fix: BUG修改
This commit is contained in:
kun
parent
9d48df5482
commit
cd7fd1eee7
@ -416,3 +416,8 @@ export const getDevicePage = (params: {}) => {
|
||||
export const bigEntItemAll = (params: any) => {
|
||||
return http.post(BASEURL + `/ent/projectSubItem/list`, params);
|
||||
};
|
||||
|
||||
// 视频监控摄像头调整方向
|
||||
export const cameraAdjust = (params: any) => {
|
||||
return http.post(BASEURL + `/xmgl/video/controlling`, params);
|
||||
};
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!-- 经典布局 -->
|
||||
<template>
|
||||
<el-container class="layout">
|
||||
<el-container class="classic-main">
|
||||
<!-- <el-container class="classic-main">
|
||||
<Main />
|
||||
</el-container>
|
||||
<!-- <el-header>
|
||||
</el-container> -->
|
||||
<el-header>
|
||||
<div class="header-lf">
|
||||
<div @click="goHome" class="logo flx-center">
|
||||
<img src="@/assets/images/login/china.png" style="margin: 0 15px" alt="logo" />
|
||||
@ -15,10 +15,10 @@
|
||||
<ToolBarLeft />
|
||||
</div>
|
||||
<ToolBarRight />
|
||||
</el-header> -->
|
||||
<!-- <el-container class="classic-content">
|
||||
</el-header>
|
||||
<el-container class="classic-content">
|
||||
<el-aside>
|
||||
<div class="menu" :style="{ width: isCollapse ? '65px' : '210px' }"> 根据屏幕自动收缩
|
||||
<!-- <div class="menu" :style="{ width: isCollapse ? '65px' : '210px' }"> 根据屏幕自动收缩 -->
|
||||
<div class="menu">
|
||||
<el-scrollbar>
|
||||
<el-menu
|
||||
@ -39,7 +39,7 @@
|
||||
<el-container class="classic-main">
|
||||
<Main />
|
||||
</el-container>
|
||||
</el-container> -->
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
|
||||
@ -28,17 +28,40 @@
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
// position: fixed;
|
||||
// top: 50%;
|
||||
// left: 30%;
|
||||
// transform: translateY(-50%);
|
||||
// margin: 0 20px;
|
||||
border-radius: 8px;
|
||||
flex: 1;
|
||||
height: 80vh;
|
||||
// margin: auto;
|
||||
// background-color: rgba(255, 192, 203, 0.4);
|
||||
.player-list {
|
||||
display: flex;
|
||||
// display: grid;
|
||||
// grid-template-columns: repeat(4, 1fr);
|
||||
// grid-template-columns: repeat(auto-fit, minmax(530px, 0fr));
|
||||
// grid-gap: 20px;
|
||||
.player-box {
|
||||
width: 25%;
|
||||
max-width: 345px;
|
||||
height: 280px;
|
||||
position: relative;
|
||||
.main {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
:deep() {
|
||||
.sub-wnd {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.close-btn {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.full-btn {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .right-form {
|
||||
@ -217,3 +240,54 @@
|
||||
background-color: #092945;
|
||||
}
|
||||
}
|
||||
// 实时画面弹框
|
||||
.video-relative {
|
||||
display: flex;
|
||||
&-left {
|
||||
width: 170px;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.left-title {
|
||||
background-image: -webkit-linear-gradient(bottom, #1dfcff, #189bff);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 22px;
|
||||
}
|
||||
.direction-control {
|
||||
width: 170px;
|
||||
margin-top: 40px;
|
||||
.control-top,
|
||||
.control-bottom {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.control-center {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
}
|
||||
.img-photo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
position: relative;
|
||||
width: calc(100% - 200px);
|
||||
margin-left: 30px;
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
.full-btn {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,12 +24,45 @@
|
||||
<h3>实时视频</h3>
|
||||
<!-- <span>-</span>
|
||||
<h3>{{ childTitle }}</h3> -->
|
||||
<img @click="onPhoto" src="@/assets/images/AIwaring/抓拍.png" alt="" />
|
||||
</div>
|
||||
<div class="player-list">
|
||||
<div class="player-box" v-for="(item, index) in videoList" :key="item.id">
|
||||
<div :id="item.id" ref="playWndBox" class="main" @click="openDialog(item)"></div>
|
||||
<el-icon class="close-btn" size="18" color="#fff" @click="closePlayer(index)"><CircleClose /></el-icon>
|
||||
<el-icon class="full-btn" size="18" color="#fff" @click="fullPlayer(item)"><FullScreen /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 视频数据站位 -->
|
||||
<div id="play_window" ref="playWndBox" class="main" style="width: 100%; height: calc(100% - 76px)"></div>
|
||||
<!-- <div id="play_window" ref="playWndBox" class="main" style="width: 100%; height: calc(100% - 76px)"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- 实时画面弹框 -->
|
||||
<el-dialog title="实时画面" width="40%" v-model="videoVisible" show-close @close="clearData">
|
||||
<div class="video-relative">
|
||||
<div class="video-relative-left">
|
||||
<div class="left-title">视频操作</div>
|
||||
<div class="direction-control">
|
||||
<div class="control-top">
|
||||
<el-button type="primary" :icon="ArrowUpBold" @click="adjust('UP')" />
|
||||
</div>
|
||||
<div class="control-center">
|
||||
<el-button type="primary" :icon="ArrowLeftBold" @click="adjust('LEFT')" />
|
||||
<el-button type="primary" :icon="ArrowRightBold" @click="adjust('RIGHT')" />
|
||||
</div>
|
||||
<div class="control-bottom">
|
||||
<el-button type="primary" :icon="ArrowDownBold" @click="adjust('DOWN')" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="img-photo">
|
||||
<el-button type="primary" @click="imageGet(videoData)">图片抓拍</el-button>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="video-relative-right">
|
||||
<div :id="videoData.id + '-0'" ref="playWndBox" class="main"></div>
|
||||
<el-icon class="full-btn" size="18" color="#fff" @click="fullDialogPlayer(videoData)"><FullScreen /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -37,10 +70,12 @@
|
||||
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
import { getVideoQuestionPage, getvideoProTreeList, getvideoEngTreeList } from "@/api/modules/goverment";
|
||||
import { getVideoQuestionPage, getvideoProTreeList, getvideoEngTreeList, cameraAdjust } from "@/api/modules/goverment";
|
||||
import { getpreviewURL, getmanualCaptureL } from "@/api/modules/common";
|
||||
import TreeFilter from "@/components/TreeFilter/index.vue";
|
||||
|
||||
import { ArrowUpBold, ArrowLeftBold, ArrowRightBold, ArrowDownBold } from "@element-plus/icons-vue";
|
||||
const videoVisible = ref(false);
|
||||
const videoList = ref<any>([]);
|
||||
interface rightFormList {
|
||||
createTime: string;
|
||||
projectName: string;
|
||||
@ -66,13 +101,6 @@ const rightForm = ref<rightFormList>({
|
||||
questionDesc: "",
|
||||
showForm: false
|
||||
});
|
||||
const photoList = ref({
|
||||
url: "",
|
||||
questionDesc: "",
|
||||
createBy: "",
|
||||
image: ""
|
||||
});
|
||||
const showInitiate = ref(false);
|
||||
const proTree = ref();
|
||||
const engTree = ref();
|
||||
const playWndBox = ref(null);
|
||||
@ -82,12 +110,130 @@ let myPlugin = ref("");
|
||||
let cameraIndexCode = ref<string>("");
|
||||
let playUrl = ref("");
|
||||
let playIndex = ref(0);
|
||||
let dataIndex = ref(0);
|
||||
const videoData = ref<any>({});
|
||||
const directionValue = ref("");
|
||||
// 关闭弹框时
|
||||
const clearData = () => {
|
||||
videoData.value = {}; // 清空一下videoData数据，因为里面携带着播放plugin
|
||||
};
|
||||
// 方向调整
|
||||
const adjust = async (params: any) => {
|
||||
let requestData = {
|
||||
cameraIndexCode: cameraIndexCode.value,
|
||||
action: directionValue.value == params ? 1 : 0,
|
||||
command: params,
|
||||
speed: 20
|
||||
};
|
||||
const { result } = await cameraAdjust(requestData);
|
||||
console.log(result);
|
||||
if (result && result.msg == "success") {
|
||||
ElMessage.success("操作成功");
|
||||
}
|
||||
if (directionValue.value == params) {
|
||||
directionValue.value = "";
|
||||
} else {
|
||||
directionValue.value = params;
|
||||
}
|
||||
};
|
||||
// 图片抓拍
|
||||
const imageGet = async (item: any) => {
|
||||
let Plugin = item.dialogPlugin;
|
||||
if (!cameraIndexCode.value) {
|
||||
ElMessage.error("请先选择要抓拍的监控");
|
||||
} else {
|
||||
const { result } = await getmanualCaptureL({ monitorCode: cameraIndexCode.value });
|
||||
console.log(result);
|
||||
window.open(result.url);
|
||||
// let link = document.createElement("a");
|
||||
// link.href = result.url;
|
||||
// link.download = "抓拍图片";
|
||||
// link.click();
|
||||
// link.remove();
|
||||
}
|
||||
};
|
||||
// 点击弹框里的全屏
|
||||
const fullDialogPlayer = (item: any) => {
|
||||
let Plugin = item.dialogPlugin;
|
||||
Plugin.JS_FullScreenDisplay(true).then(
|
||||
() => {
|
||||
console.info("JS_FullScreenDisplay success");
|
||||
// do you want...
|
||||
},
|
||||
(err: any) => {
|
||||
console.info("JS_FullScreenDisplay failed");
|
||||
// do you want...
|
||||
}
|
||||
);
|
||||
};
|
||||
// 打开弹框
|
||||
const openDialog = (item: any) => {
|
||||
videoData.value = item;
|
||||
console.log(item);
|
||||
setTimeout(function () {
|
||||
let url = item.videoUrl;
|
||||
let newMyplugin = new JSPlugin({
|
||||
szId: item.id + "-0", //需要英文字母开头 必填
|
||||
// szBasePath: "/public/h5player", // 必填,引用H5player.min.js的js相对路径
|
||||
szBasePath: "/h5player", // 打包后的地址
|
||||
// szBasePath: "./", // 必填,引用H5player.min.js的js相对路径
|
||||
// iWidth: playWndWidth.value + "px",
|
||||
// iHeight: playWndHeight.value + "px",
|
||||
// iWidth: "300px",
|
||||
// iHeight: "300px",
|
||||
iMaxSplit: 1,
|
||||
iCurrentSplit: 1,
|
||||
openDebug: true
|
||||
});
|
||||
newMyplugin
|
||||
.JS_Play(
|
||||
url,
|
||||
{
|
||||
playURL: url, // 流媒体播放时必传
|
||||
mode: 1 // 解码类型：0=普通模式; 1=高级模式 默认为0
|
||||
// 设置直连时的认证参数等
|
||||
// ...
|
||||
},
|
||||
0 //当前窗口下标
|
||||
)
|
||||
.then(
|
||||
() => {
|
||||
console.info("JS_Play success");
|
||||
// do you want...
|
||||
},
|
||||
() => {
|
||||
console.info("JS_Play failed:");
|
||||
// playIndex.value += 1;
|
||||
// do you want...
|
||||
}
|
||||
);
|
||||
videoData.value.dialogPlugin = newMyplugin;
|
||||
}, 200);
|
||||
videoVisible.value = true;
|
||||
};
|
||||
// 全屏播放器
|
||||
const fullPlayer = (item: any) => {
|
||||
let Plugin = item.pluginValue;
|
||||
console.log(Plugin);
|
||||
Plugin.JS_FullScreenDisplay(true).then(
|
||||
() => {
|
||||
console.info("JS_FullScreenDisplay success");
|
||||
// do you want...
|
||||
},
|
||||
(err: any) => {
|
||||
console.info("JS_FullScreenDisplay failed");
|
||||
// do you want...
|
||||
}
|
||||
);
|
||||
};
|
||||
// 关闭播放器
|
||||
const closePlayer = (index: number) => {
|
||||
videoList.value.splice(index, 1);
|
||||
};
|
||||
// 播放视频流
|
||||
const playVideo = async () => {
|
||||
let url = playUrl.value;
|
||||
let newMyplugin = myPlugin.value;
|
||||
console.log(url);
|
||||
console.log(playIndex.value);
|
||||
newMyplugin
|
||||
.JS_Play(
|
||||
url,
|
||||
@ -115,24 +261,40 @@ const playVideo = async () => {
|
||||
// 获取视频流
|
||||
const getVideo = async () => {
|
||||
// await sendRequest({ code: cameraIndexCode.value });
|
||||
videoList.value.push({
|
||||
id: "play_window-" + dataIndex.value,
|
||||
ref: "playWndBox",
|
||||
pluginValue: "",
|
||||
videoUrl: ""
|
||||
});
|
||||
setTimeout(function () {
|
||||
BeginPlayer("play_window-" + dataIndex.value);
|
||||
}, 200);
|
||||
const res = await getpreviewURL({ cameraIndexCode: cameraIndexCode.value, protocol: "ws" });
|
||||
playUrl.value = res.result;
|
||||
playVideo();
|
||||
await playVideo();
|
||||
let changeVal = dataIndex.value - 1; // 由于上一个方法已经对dataIndex.value + 1，所以需要-1
|
||||
videoList.value[changeVal].videoUrl = res.result;
|
||||
console.log(res);
|
||||
};
|
||||
const BeginPlayer = () => {
|
||||
const BeginPlayer = (id: any) => {
|
||||
console.log(id);
|
||||
// 初始化插件
|
||||
myPlugin.value = new JSPlugin({
|
||||
szId: "play_window", //需要英文字母开头 必填
|
||||
szId: id, //需要英文字母开头 必填
|
||||
// szBasePath: "/public/h5player", // 必填,引用H5player.min.js的js相对路径
|
||||
szBasePath: "/h5player", // 打包后的地址
|
||||
// szBasePath: "./", // 必填,引用H5player.min.js的js相对路径
|
||||
iWidth: playWndWidth.value + "px",
|
||||
iHeight: playWndHeight.value + "px",
|
||||
iMaxSplit: 4,
|
||||
iCurrentSplit: 4,
|
||||
// iWidth: playWndWidth.value + "px",
|
||||
// iHeight: playWndHeight.value + "px",
|
||||
// iWidth: "300px",
|
||||
// iHeight: "300px",
|
||||
iMaxSplit: 1,
|
||||
iCurrentSplit: 1,
|
||||
openDebug: true
|
||||
});
|
||||
videoList.value[dataIndex.value].pluginValue = myPlugin.value;
|
||||
dataIndex.value++;
|
||||
};
|
||||
const changeTreeFilter = async (item: {
|
||||
data: { code: string | null; title: any; children: any[] };
|
||||
@ -189,48 +351,34 @@ const engApi = async () => {
|
||||
const { result } = await getvideoEngTreeList({});
|
||||
engTree.value.treeAllData = result;
|
||||
};
|
||||
// 拍照的按钮
|
||||
const onPhoto = async () => {
|
||||
if (cameraIndexCode.value.length !== 1) {
|
||||
ElMessage.error("请先选择要抓拍的监控");
|
||||
} else {
|
||||
console.log(cameraIndexCode.value.length);
|
||||
|
||||
const { result } = await getmanualCaptureL({ monitorCode: cameraIndexCode.value });
|
||||
photoList.value.url = result.url;
|
||||
photoList.value.image = photoList.value.url;
|
||||
showInitiate.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await BeginPlayer();
|
||||
const pageInstance = getCurrentInstance();
|
||||
// 获取dom节点对象
|
||||
const tagDomObj = pageInstance?.refs.playWndBox;
|
||||
playWndHeight.value = tagDomObj?.clientHeight;
|
||||
playWndWidth.value = tagDomObj?.clientWidth;
|
||||
// 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
window.addEventListener("scroll", () => {
|
||||
if (myPlugin.value == undefined) {
|
||||
setTimeout(function () {
|
||||
myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||||
}, 500);
|
||||
// setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
window.addEventListener("resize", e => {
|
||||
if (myPlugin.value == undefined) {
|
||||
// console.log("wwwww", e);
|
||||
setTimeout(function () {
|
||||
myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||||
}, 500);
|
||||
// oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
|
||||
// setWndCover();
|
||||
}
|
||||
});
|
||||
// await BeginPlayer();
|
||||
// const pageInstance = getCurrentInstance();
|
||||
// // 获取dom节点对象
|
||||
// const tagDomObj = pageInstance?.refs.playWndBox;
|
||||
// playWndHeight.value = tagDomObj?.clientHeight;
|
||||
// playWndWidth.value = tagDomObj?.clientWidth;
|
||||
// // 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
// window.addEventListener("scroll", () => {
|
||||
// if (myPlugin.value == undefined) {
|
||||
// setTimeout(function () {
|
||||
// myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||||
// }, 500);
|
||||
// // setWndCover();
|
||||
// }
|
||||
// });
|
||||
// // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
// window.addEventListener("resize", e => {
|
||||
// if (myPlugin.value == undefined) {
|
||||
// // console.log("wwwww", e);
|
||||
// setTimeout(function () {
|
||||
// myPlugin.value.JS_Resize(tagDomObj?.clientWidth, tagDomObj?.clientHeight);
|
||||
// }, 500);
|
||||
// // oWebControl.JS_Resize(playWndHeight.value, playWndWidth.value);
|
||||
// // setWndCover();
|
||||
// }
|
||||
// });
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user