森防视频 列表

src/api/globalMap/forestDefenseVideo.ts

@@ -26,3 +26,11 @@ export const setHkVideoControlling = (data: VideoControlParams) => {
     data: data
   });
 };
+
+// 森防视频树形数据
+export const getVideoForestFireList = () => {
+  return request({
+    url: '/api/videoResource/videoinfo/get_video_forest_fire_list',
+    method: 'get'
+  });
+};

src/views/globalMap/RightMenu/ForestDefenseVideo/DetailDialog.vue

@@ -126,7 +126,7 @@ let ptzInfo = ref({
   AzimuthH: 0
 });
 const handleGetPtzInfo = () => {
-  getPtzInfo({ code: props.id }).then((res) => {
+  return getPtzInfo({ code: props.id }).then((res) => {
     ptzInfo.value = res.data;
     if (visibleRange.value) {
       createSector();
@@ -250,9 +250,7 @@ const handleControl = (type) => {
   };
   setHkVideoControlling(params).then(() => {
     params.action = '1';
-    setHkVideoControlling(params).then(() => {
-      handleGetPtzInfo();
-    });
+    setHkVideoControlling(params)
   });
 };
 // 新增扇形
@@ -299,12 +297,23 @@ const handleRefresh = () => {
     isRefresh.value = false;
   }, 1000);
 };
-
-watch(visibleRange, () => {
+const handleClearInterval = () => {
+  if (!!timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+};
+watch(visibleRange, async () => {
   if (visibleRange.value) {
+    if (!!timer) {
+      clearInterval(timer);
+    }
+    await handleGetPtzInfo();
+    timer = setInterval(handleGetPtzInfo, 1000);
     addVisibleRange();
   } else {
     removeVisibleRange();
+    handleClearInterval();
   }
 });
 // 移除标点
@@ -350,23 +359,6 @@ const addVisibleRange = () => {
         })
       })
     );
-
-    // const center = [detailData.value.lng, detailData.value.lat];
-    // circle = new Feature({
-    //   geometry: new Circle(center, 100)
-    //   // geometry: new Circle(center, ptzInfo.value.Distance)
-    // });
-    // circle.setStyle(
-    //   new Style({
-    //     fill: new Fill({
-    //       color: 'rgba(255, 0, 0, 0.2)'
-    //     }),
-    //     stroke: new Stroke({
-    //       color: 'rgba(255, 0, 0, 0.35)',
-    //       width: 1
-    //     })
-    //   })
-    // );
     vectorLayer.getSource().addFeature(circle);
   }
   createSector();
@@ -383,6 +375,7 @@ const removeVisibleRange = () => {
     circle = null;
   }
   removeSector();
+  handleClearInterval();
 };
 // 移除扇形
 const removeSector = () => {
@@ -506,10 +499,6 @@ const handleCruise = (event?: MouseEvent) => {
     }).then(() => {
       showSuccessMsg('巡航开始');
       cruise.value = true;
-      if (!!timer) {
-        clearInterval(timer);
-      }
-      timer = setInterval(handleGetPtzInfo, 1000);
     });
   } else {
     setHkVideoControlling({
@@ -519,11 +508,8 @@ const handleCruise = (event?: MouseEvent) => {
       speed: detailData.value.speed,
       presetIndex: 20
     }).then(() => {
-      clearInterval(timer);
-      timer = null;
       showSuccessMsg('巡航结束');
       cruise.value = false;
-      handleGetPtzInfo();
     });
   }
 };
@@ -546,6 +532,7 @@ watch(
 onUnmounted(() => {
   removeMarker();
   removeVisibleRange();
+  handleClearInterval();
 });
 </script>
 

src/views/globalMap/RightMenu/ForestDefenseVideo/index.vue

@@ -57,9 +57,9 @@
         <div class="tree-box">
           <el-tree ref="tree" :data="treeData" default-expand-all>
             <template #default="{ node, data }">
-              <span v-if="data.num1 && data.num2" class="custom-tree-node">
+              <span v-if="data.online && data.total" class="custom-tree-node">
                 <span>{{ node.label }}</span>
-                <span>（{{ data.num1 }}/{{ data.num2 }}）</span>
+                <span>（{{ data.online }}/{{ data.total }}）</span>
               </span>
               <span v-else class="custom-tree-node" @click="handleClick(data)">
                 <span>{{ node.label }}</span>
@@ -76,6 +76,7 @@
 <script lang="ts" setup name="ForestDefenseVideo">
 // 统计数据
 import DetailDialog from './DetailDialog.vue';
+import { getVideoForestFireList } from '@/api/globalMap/forestDefenseVideo';
 
 const props = defineProps({
   activeMap: String
@@ -95,49 +96,16 @@ let selectOptions2 = ref([]);
 let selectOptions3 = ref([]);
 let treeData = ref([]);
 const getData = () => {
-  treeData.value = [
-    {
-      label: '茂名市',
-      value: 1,
-      num1: 128,
-      num2: 134,
-      children: [
-        {
-          label: '茂南区',
-          value: 2,
-          num1: 5,
-          num2: 5,
-          children: [
-            { label: '茂南公馆蒲芦塘村', value: '44090000001321000033' },
-            { label: '茂南区羊角镇禄段横山庙1', value: '44090000001321000033' },
-            { label: '茂南区羊角镇禄段横山庙2', value: '44090000001321000033' },
-            { label: '茂南区羊角镇禄段横山庙3', value: '44090000001321000033' },
-            { label: '茂南区羊角镇禄段横山庙4', value: '44090000001321000033' }
-          ]
-        },
-        {
-          label: '电白区',
-          value: 8,
-          num1: 5,
-          num2: 6,
-          children: [
-            { label: '茂南公馆蒲芦塘村', value: '44090000001321000033' },
-            { label: '茂南区羊角镇禄段横山庙1', value: '44090000001321000033' },
-            { label: '茂南区羊角镇禄段横山庙2', value: '44090000001321000033' },
-            { label: '茂南区羊角镇禄段横山庙3', value: '44090000001321000033' },
-            { label: '茂南区羊角镇禄段横山庙4', value: '44090000001321000033' }
-          ]
-        }
-      ]
-    }
-  ];
+  getVideoForestFireList().then((res) => {
+    treeData.value = res.data;
+  });
 };
 let detailId = ref('');
 const handleClick = (data) => {
-  if (detailId.value === data.value) {
+  if (detailId.value === data.video_code) {
     detailId.value = '';
   } else {
-    detailId.value = data.value;
+    detailId.value = data.video_code;
   }
 };
 onMounted(() => {
@@ -220,6 +188,8 @@ onMounted(() => {
 }
 .tree-box {
   width: 100%;
+  height: 1500px;
+  overflow: auto;
   padding: 20px 0;
   :deep(.el-tree) {
     background-color: transparent;