前方通信 弹窗iframe

src/api/emergencyCommandMap/Drone.ts

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+// 无人机-部门树
+export function getDroneTree(params) {
+  return request({
+    url: '/api/videoResource/avcon/get_drone_tree',
+    method: 'get',
+    params: params
+  });
+}

src/types/components.d.ts

@@ -24,20 +24,14 @@ declare module 'vue' {
     DistributionMap: typeof import('./../components/Map/YztMap/DistributionMap.vue')['default']
     DrawMap: typeof import('./../components/Map/YztMap/DrawMap.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
-    ElAnchor: typeof import('element-plus/es')['ElAnchor']
-    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
-    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -50,24 +44,21 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     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']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
@@ -86,8 +77,6 @@ declare module 'vue' {
     HikvisionPlayer: typeof import('./../components/HKVideo/hikvision-player.vue')['default']
     HKVideo: typeof import('./../components/HKVideo/index.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
-    IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
-    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
     IFrame: typeof import('./../components/iFrame/index.vue')['default']
     ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
     ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']

src/views/emergencyCommandMap/LeftSection/Communication.vue

@@ -2,7 +2,7 @@
   <div class="communication-container">
     <div class="common-title gradient-text">前方通信</div>
     <div class="tabs">
-      <div v-for="(item, index) in menu" :key="index" :class="activeIndex === index ? 'tab tab_active' : 'tab'">
+      <div v-for="(item, index) in menu" :key="index" :class="activeIndex === index ? 'tab tab_active' : 'tab'" @click="activeIndex = index">
         {{ item.name }}
       </div>
     </div>
@@ -98,6 +98,8 @@
         </div>
       </div>
     </div>
+    <Drone v-show="activeIndex === 1" />
+    <IndividualEquipment v-show="activeIndex === 2" />
     <Dialog v-if="showJoinMeeting" customShow type="xs" height="180px" title="加入会议" @confirm="handleJoinMeeting" @close="closeDialog">
       <div class="dialog-content">
         <el-form ref="formRef" :model="meetingForm" :rules="rules">
@@ -113,6 +115,8 @@
 <script lang="ts" setup>
 import { Search } from '@element-plus/icons-vue';
 import { getAvconDeptList, getAvconDeptTree, getStartMiniWithNoParam, getStartMiniParam } from '@/api/emergencyCommandMap/communication';
+import Drone from './Drone.vue';
+import IndividualEquipment from './IndividualEquipment.vue';
 
 const proxy = getCurrentInstance()?.proxy;
 

src/views/emergencyCommandMap/LeftSection/Drone.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="content">
+    <div class="left-content">
+      <div class="search-box">
+        <el-input v-model="queryParams.equipment" class="custom-input" placeholder="搜索设备" @keyup.enter="getTree">
+          <template #prefix>
+            <el-icon class="el-input__icon"><search /></el-icon>
+          </template>
+        </el-input>
+      </div>
+      <div class="tree-container">
+        <div class="tree-box">
+          <div style="overflow-y: auto; height: 100%">
+            <el-tree :data="treeData" accordion @node-click="handleNodeClick" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <Dialog v-if="showIframe" v-model="showIframe" type="xl" height="90%" :title="iframeTitle" hide-footer>
+      <iframe :src="iframeUrl" style="width: 100%; height: 100%; border: none" />
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue';
+import { getDroneTree } from '@/api/emergencyCommandMap/Drone';
+interface QueryParams {
+  equipment: string;
+}
+const queryParams = reactive<QueryParams>({
+  equipment: ''
+});
+const getTree = () => {
+  getDroneTree(queryParams).then((res) => {
+    treeData.value = res.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;
+  }
+};
+const treeData = ref([]);
+onMounted(() => {
+  getTree();
+});
+</script>
+
+<style scoped lang="scss">
+.content {
+  display: flex;
+  height: 260px;
+  .left-content {
+    height: 100%;
+    flex: 1;
+    margin-right: 20px;
+
+    .search-box {
+      display: flex;
+
+      .custom-input {
+        width: 100%;
+      }
+    }
+    :deep(.el-tree) {
+      height: 100%;
+      background-color: transparent;
+      color: #fbffff;
+      font-size: 14px;
+      .el-tree-node__content {
+        height: auto;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        white-space: normal;
+        word-break: break-all;
+      }
+      .el-tree-node__expand-icon {
+        color: #297cfc;
+      }
+      .el-tree-node:focus > .el-tree-node__content,
+      .el-tree-node__content:hover {
+        background-color: transparent !important;
+      }
+    }
+  }
+  .right-content {
+    height: 100%;
+    flex-grow: 1;
+    flex: 1;
+  }
+}
+</style>

src/views/emergencyCommandMap/LeftSection/IndividualEquipment.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="content">
+    <div class="left-content">
+      <div class="search-box">
+        <el-input v-model="queryParams.equipment" class="custom-input" placeholder="搜索设备" @keyup.enter="getTree">
+          <template #prefix>
+            <el-icon class="el-input__icon"><search /></el-icon>
+          </template>
+        </el-input>
+      </div>
+      <div class="tree-container">
+        <div class="tree-box">
+          <div style="overflow-y: auto; height: 100%">
+            <el-tree :data="treeData" accordion @node-click="handleNodeClick" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <Dialog v-if="showIframe" v-model="showIframe"  type="xl" height="90%" :title="iframeTitle" hide-footer>
+      <iframe :src="iframeUrl" style="width: 100%; height: 100%" />
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue';
+import { getAvconDeptTree } from '@/api/emergencyCommandMap/communication';
+import { getDroneTree } from '@/api/emergencyCommandMap/Drone';
+interface QueryParams {
+  equipment: string;
+}
+const queryParams = reactive<QueryParams>({
+  equipment: ''
+});
+
+const treeData = ref([]);
+
+const getTree = () => {
+  getDroneTree(queryParams).then((res) => {
+    treeData.value = res.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">
+.content {
+  display: flex;
+  height: 260px;
+  .left-content {
+    height: 100%;
+    flex: 1;
+    margin-right: 20px;
+
+    .search-box {
+      display: flex;
+
+      .custom-input {
+        width: 100%;
+      }
+    }
+    :deep(.el-tree) {
+      height: 100%;
+      background-color: transparent;
+      color: #fbffff;
+      font-size: 14px;
+      .el-tree-node__content {
+        height: auto;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        white-space: normal;
+        word-break: break-all;
+      }
+      .el-tree-node__expand-icon {
+        color: #297cfc;
+      }
+      .el-tree-node:focus > .el-tree-node__content,
+      .el-tree-node__content:hover {
+        background-color: transparent !important;
+      }
+    }
+  }
+  .right-content {
+    height: 100%;
+    flex-grow: 1;
+    flex: 1;
+  }
+}
+</style>