前方通信 弹窗iframe

src/types/components.d.ts

@@ -44,6 +44,8 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']

src/views/emergencyCommandMap/LeftSection/Drone.vue

@@ -16,18 +16,14 @@
         </div>
       </div>
     </div>
-    <!--
-    <div class="right-content video-list">
-      <HKVideo :dot_data="data" autoplay />
-    </div>
-    -->
+    <Dialog v-if="showIframe" v-model="showIframe" type="lg" :title="iframeTitle" hide-footer>
+      <iframe :src="iframeUrl" style="width: 100%; height: 100%; border: none" />
+    </Dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, toRefs, watch, onMounted } from 'vue';
 import { Search } from '@element-plus/icons-vue';
-// import { getAvconDeptTree } from '@/api/emergencyCommandMap/communication';
 import { getDroneTree } from '@/api/emergencyCommandMap/Drone';
 interface QueryParams {
   equipment: string;
@@ -35,69 +31,22 @@ interface QueryParams {
 const queryParams = reactive<QueryParams>({
   equipment: ''
 });
-// const queryParams2 = reactify({});
-const options = ref([]);
-// const treeData = ref([]);
-let data = ref({
-  'name': '东镇街道长塘居委会大湴村边2',
-  'invideoIds': true,
-  'area': '茂名市视频数据共享管理平台/茂名市应急管理局/信宜市应急管理局/信宜防溺水监控/东镇街道防溺水（移动）/长塘村',
-  'ip': '级联',
-  'status': '在线',
-  'status_lifetime': '68天23.79小时',
-  'record_status': '--',
-  'inspection_datetime': '2024-07-15 16:24:09',
-  'video_code_int': '44098301581314000465',
-  'video_code': '44098301581314000465',
-  'longitude': 110.908867,
-  'latitude': 22.357185
-});
-
 const getTree = () => {
   getDroneTree(queryParams).then((res) => {
     treeData.value = res.data;
   });
 };
-const handleNodeClick = (data) => {
-  console.log('handleNodeClick', data)
-};
-const treeData = [
-  {
-    label: '无人机设备',
-    children: [
-      {
-        label: '茂名市应急管理局',
-        children: [
-          {
-            id: "1",
-            label: '应急无人机',
-            url: "http://10.100.100.103:5050/liveplay.html?liveurl=ws://10.100.100.103:9001/live/mmjk0002@mm.zw.yj_00.flv&channelid=mmjk0002@mm.zw.yj_00"
-          }
-        ]
-      },
-      {
-        label: '电白区应急管理局',
-        children: [
-          {
-            id: "2",
-            label: '应急无人机',
-            url: "http://10.100.100.103:5050/liveplay.html?liveurl=ws://10.100.100.103:9001/live/mmjk0002@mm.zw.yj_00.flv&channelid=mmjk0002@mm.zw.yj_00"
-          }
-        ]
-      },
-      {
-        label: '茂南区应急管理局',
-        children: [
-          {
-            id: "3",
-            label: '应急无人机',
-            url: "http://10.100.100.103:5050/liveplay.html?liveurl=ws://10.100.100.103:9001/live/mmjk0002@mm.zw.yj_00.flv&channelid=mmjk0002@mm.zw.yj_00"
-          }
-        ]
-      }
-    ]
+let showIframe = ref(false);
+let iframeUrl = ref('');
+let iframeTitle = ref('');
+const handleNodeClick = (data, node) => {
+  if (!!data.url && node.isLeaf) {
+    iframeUrl.value = data.url;
+    iframeTitle.value = data.label;
+    showIframe.value = true;
   }
-];
+};
+const treeData = ref([]);
 onMounted(() => {
   getTree();
 });

src/views/emergencyCommandMap/LeftSection/IndividualEquipment.vue

@@ -16,9 +16,9 @@
         </div>
       </div>
     </div>
-    <div class="right-content video-list">
-      <HKVideo :dot_data="data" autoplay />
-    </div>
+    <Dialog v-if="showIframe" v-model="showIframe" type="lg" :title="iframeTitle" hide-footer>
+      <iframe :src="iframeUrl" style="width: 100%; height: 100%" />
+    </Dialog>
   </div>
 </template>
 
@@ -32,47 +32,27 @@ interface QueryParams {
 const queryParams = reactive<QueryParams>({
   equipment: ''
 });
-// const queryParams2 = reactify({});
-const options = ref([]);
-// const treeData = ref([]);
-let data = ref({
-  'name': '东镇街道长塘居委会大湴村边2',
-  'invideoIds': true,
-  'area': '茂名市视频数据共享管理平台/茂名市应急管理局/信宜市应急管理局/信宜防溺水监控/东镇街道防溺水（移动）/长塘村',
-  'ip': '级联',
-  'status': '在线',
-  'status_lifetime': '68天23.79小时',
-  'record_status': '--',
-  'inspection_datetime': '2024-07-15 16:24:09',
-  'video_code_int': '44098301581314000465',
-  'video_code': '44098301581314000465',
-  'longitude': 110.908867,
-  'latitude': 22.357185
-});
-const treeData = ref([
-  {
-    label: '移动单兵设备',
-    children: [
-      {
-        label: '茂名市应急管理局',
-        children: [
-          {
-            label: '应急无人机'
-          },
-          { label: '智能手持终端01' },
-          { label: '智能手持终端02' }
-        ]
-      }
-    ]
-  }
-]);
+
+const treeData = ref([]);
 
 const getTree = () => {
   getDroneTree(queryParams).then((res) => {
     treeData.value = res.data;
   });
 };
-const handleNodeClick = (data) => {};
+let showIframe = ref(false);
+let iframeUrl = ref('');
+let iframeTitle = ref('');
+const handleNodeClick = (data, node) => {
+  if (!!data.url && node.isLeaf) {
+    iframeUrl.value = data.url;
+    iframeTitle.value = data.label;
+    showIframe.value = true;
+  }
+};
+onMounted(() => {
+  getTree();
+});
 </script>
 
 <style scoped lang="scss">