监控优化

src/components/Public/videoDiv.vue

@@ -1,6 +1,10 @@
 <template>
-    <div class='info' style='display:flex;flex-direction:column;'>
+    <div class='info' style='display:flex;flex-direction:column;position: relative;'>
+        <div v-if="!isOnline" style="color: white;position: absolute;top: 5px;left: 5px;z-index: 100;">{{codeObj}} {{site}}{{codeObj}}</div>
         <div :id='props.videoId' style='border-radius: 10px;width:100%;' height="200"></div>
+        <div style="height: 235px;width: 100%;background-color: black;display: flex;flex-direction: row;align-items: center;justify-content: center;" v-if="!isOnline">
+            <div style="color: white;">设备离线</div>
+        </div>
     </div>
 </template>
 
@@ -10,29 +14,41 @@
 
     const playerObj = ref(null)
 
+    const codeObj = ref(null)
+    const site = ref(null)
+
     const props = defineProps({
         videoId: {
             type: [String],
             default: "video-container"
         },
-        height:{
+        height: {
             type: [Number],
             default: "200"
         }
     });
 
-    const initVideo = (code) => {
-        console.log(code)
-        // var code = "FM4945280"
+    const isOnline = ref(false);
+
+    const initVideo = (code,siteList) => {
+        for(var index in siteList){
+             if(code == siteList[index].code){
+                site.value = siteList[index].name
+                codeObj.value = code
+             }
+        }
         getCameraPlayerConfig(code).then(res => {
-            console.log(res.data);
-            var player = new EZUIKit.EZUIKitPlayer({
-                height: props.height,
-                template: "pcLive",
-                id: props.videoId, // 视频容器ID
-                ...res.data
-            })
-            playerObj.value = player
+            console.log(res)
+            if (res.code == 200) {
+                var player = new EZUIKit.EZUIKitPlayer({
+                    height: props.height,
+                    template: "pcLive",
+                    id: props.videoId, // 视频容器ID
+                    ...res.data
+                })
+                playerObj.value = player
+                isOnline.value = true
+            }
         })
     }
 

src/views/yunying/videoKdg/index.vue

@@ -106,6 +106,7 @@
     const boxData = ref([])
     const boxCode = ref(null)
     const showKdg = ref(false)
+    const siteListArry = ref([])
 
 
     const formdata = ref({
@@ -161,22 +162,20 @@
 
     const pageChange = (val) => {
         CurrentPage.value = val
-        var pageData = val-1
+        var pageData = val - 1
         const deviceList = deviceData.value
         var videoList = []
         if (deviceList.length > val * 9) {
             videoCount.value = 9
             for (var index = 0; index < 9; index++) {
-                videoList.push(deviceList[pageData * 9+index])
+                videoList.push(deviceList[pageData * 9 + index])
             }
         } else {
-            videoCount.value = deviceList.length-pageData*9
-            for (var index = 0; index < deviceList.length-pageData*9; index++) {
-                console.log(pageData * 9 + index)
+            videoCount.value = deviceList.length - pageData * 9
+            for (var index = 0; index < deviceList.length - pageData * 9; index++) {
                 videoList.push(deviceList[pageData * 9 + index])
             }
         }
-        console.log("摄像头列表"+videoList)
         setTimeout(() => {
             initVideos(videoList)
         }, 100);
@@ -194,23 +193,26 @@
 
     const filterNode = (value: string, node: TreeNode) => {
         if (node.id == 1) return true;
-        console.log(node.label.indexOf(value) != -1)
         return node.label.indexOf(value) != -1;
     };
 
     const currentdata = ref(null)
 
-    const treeclick = (data: TreeNodeData, node: TreeNode) => {
-        //    console.log(data.data.sites)
+    const videoInit = (data, node) => {
         var siteList = data.data.sites.split(",")
         var deviceList = [];
+        siteListArry.value = [];
         for (var i in sites.value) {
             if (siteList.indexOf(sites.value[i].dictCode) > -1) {
                 if (isJSON(sites.value[i].remark)) {
                     var deviceJson = JSON.parse(sites.value[i].remark)
-                    console.log(sites.value[i].remark)
                     for (var j in deviceJson) {
                         if (deviceJson[j].type == "camera") {
+                            var obj = {
+                                name: sites.value[i].dictLabel,
+                                code: deviceJson[j].code
+                            }
+                            siteListArry.value.push(obj)
                             console.log(deviceJson[j].code)
                             deviceList.push(deviceJson[j].code);
                         }
@@ -234,10 +236,19 @@
                 videoList.push(deviceList[index])
             }
         }
-        initVideos(videoList)
+        setTimeout(() => {
+            initVideos(videoList)
+        }, 100);
+    }
+
+    const treeclick = (data: TreeNodeData, node: TreeNode) => {
+        videoCount.value = 0
+        setTimeout(() => {
+            videoInit(data, node)
+        }, 1000);
     }
 
-    const initVideos = (videoList) => {
+    const initVideos = (videoList, sites) => {
         for (var index in videoList) {
             initVideoDiv(index, videoList[index])
             // setTimeout(() => {
@@ -251,27 +262,27 @@
         console.log(code)
         if (index == 0) {
             // console.log(code)
-            proxy.$refs.video1.initVideo(code)
+            proxy.$refs.video1.initVideo(code, siteListArry.value)
         } else if (index == 1) {
             // console.log(code)
-            proxy.$refs.video2.initVideo(code)
+            proxy.$refs.video2.initVideo(code, siteListArry.value)
             // console.log(code)
         } else if (index == 2) {
             // console.log(code)
-            proxy.$refs.video3.initVideo(code)
+            proxy.$refs.video3.initVideo(code, siteListArry.value)
         } else if (index == 3) {
             // console.log(code)
-            proxy.$refs.video4.initVideo(code)
+            proxy.$refs.video4.initVideo(code, siteListArry.value)
         } else if (index == 4) {
-            proxy.$refs.video5.initVideo(code)
+            proxy.$refs.video5.initVideo(code, siteListArry.value)
         } else if (index == 5) {
-            proxy.$refs.video6.initVideo(code)
+            proxy.$refs.video6.initVideo(code, siteListArry.value)
         } else if (index == 6) {
-            proxy.$refs.video7.initVideo(code)
+            proxy.$refs.video7.initVideo(code, siteListArry.value)
         } else if (index == 7) {
-            proxy.$refs.video8.initVideo(code)
+            proxy.$refs.video8.initVideo(code, siteListArry.value)
         } else if (index == 8) {
-            proxy.$refs.video9.initVideo(code)
+            proxy.$refs.video9.initVideo(code, siteListArry.value)
         }
     }