diff --git a/src/api/modules/goverment.ts b/src/api/modules/goverment.ts index b1f6e90..5114f77 100644 --- a/src/api/modules/goverment.ts +++ b/src/api/modules/goverment.ts @@ -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); +}; diff --git a/src/layouts/LayoutClassic/index.vue b/src/layouts/LayoutClassic/index.vue index 20a7899..714cd6c 100644 --- a/src/layouts/LayoutClassic/index.vue +++ b/src/layouts/LayoutClassic/index.vue @@ -1,10 +1,10 @@ diff --git a/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.scss b/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.scss index 8d22722..fb40ef2 100644 --- a/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.scss +++ b/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.scss @@ -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; + } + } +} diff --git a/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.vue b/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.vue index c0229db..0e437b2 100644 --- a/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.vue +++ b/src/views/goverment/huizhou/siteSupervision/videoMonitoring/index.vue @@ -24,12 +24,45 @@

实时视频

- + +
+
+
+ + +
-
+ + + +
+
+
视频操作
+
+
+ +
+
+ + +
+
+ +
+
+ +
+
+
+ +
+
+ @@ -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([]); interface rightFormList { createTime: string; projectName: string; @@ -66,13 +101,6 @@ const rightForm = ref({ 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(""); let playUrl = ref(""); let playIndex = ref(0); +let dataIndex = ref(0); +const videoData = ref({}); +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(); + // } + // }); });