无人机页面接口联调

src/api/globalMap/UAV.ts

@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+// 获取无人机列表
+
+export const getDroneResourcesList = (data) => {
+  return request({
+    url: '/api/gateway/v1/get_drone_resources_list',
+    method: 'post',
+    data: data
+  });
+};

src/views/globalMap/RightMenu/UAV.vue

@@ -20,15 +20,269 @@
       </div>
     </div>
     <div class="table-content">
-      <div v-for="(item, index) in riverMonitorData.listData" :key="index" class="tr" @click="handleShowDialog(item)">
-        <div class="td">{{ item.name }}</div>
-        <div class="td">{{ item.area }}</div>
+      <div v-for="(item, index) in droneResourcesData.listData" :key="index" class="tr">
+        <div class="td">{{ item.drone_name }}</div>
+        <div class="td">{{ item.drone_type }}</div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { validateNum } from "@/utils/ruoyi";
-import Dialog from "@/views/globalMap/RightMenu/Dialog.vue";
+import { getDroneResourcesList } from '@/api/globalMap/UAV';
+
+// 请求参数
+const queryParams = reactive({
+  area: '',
+  drone_type: ''
+});
+
+// 返回数据
+const droneResourcesData = reactive({
+  // time: '',
+  // statusList: [],
+  listData: []
+});
+
+// 获取数据
+const initData = async () => {
+  getDroneResourcesList(queryParams).then((res) => {
+    debugger;
+    droneResourcesData.listData = res.data.list;
+  });
+};
+initData();
+
+const planForm = reactive({
+  planType: ''
+});
+
+// 固定的下拉选项数据
+const plan_type = [
+  { label: '茂南区', value: 'maonan' },
+  { label: '高州市', value: 'gaozhou' },
+  { label: '电白区', value: 'dianbai' },
+  { label: '信宜市', value: 'xinyi' },
+  { label: '化州市', value: 'huazhou' }
+];
 </script>
+
+<style lang="scss" scoped>
+.detail-container {
+  font-size: 36px;
+  .dialog-content {
+    display: flex;
+  }
+  .info-box {
+    width: 834px;
+    height: 459px;
+    background: url('@/assets/images/map/rightMenu/box2.png') no-repeat;
+    padding: 11px;
+    .info-header {
+      width: 311px;
+      height: 56px;
+      padding-left: 50px;
+      background: url(@/assets/images/map/rightMenu/titleBox1.png) no-repeat;
+    }
+    .info-content {
+      padding: 0 37px 26px 37px;
+      font-size: 32px;
+      color: #a8ccde;
+    }
+    .info-item {
+      display: flex;
+      align-items: center;
+      height: 72px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+  .box1 {
+    width: 776px;
+    height: 459px;
+    display: flex;
+    flex-direction: column;
+    margin-left: 94px;
+    margin-right: 110px;
+    .box1-title {
+      width: 372px;
+      height: 54px;
+      background: url('@/assets/images/map/rightMenu/titleBox2.png');
+      padding-left: 65px;
+      font-size: 44px;
+      color: #f4f7fa;
+    }
+  }
+  .box2 {
+    margin-top: 45px;
+    .box2-title {
+      height: 54px;
+      background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat;
+      padding-left: 65px;
+      font-size: 44px;
+      color: #f4f7fa;
+    }
+  }
+}
+.right-box {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 1009px;
+  .flex-box2 {
+    height: 54px;
+    background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat;
+    padding-left: 65px;
+    display: flex;
+    align-items: center;
+    .title2 {
+      font-size: 44px;
+      flex-shrink: 0;
+      margin-right: 30px;
+      color: #f4f7fa;
+    }
+  }
+  .video-box {
+    margin-top: 30px;
+    height: 900px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 12px;
+  left: 210px;
+}
+
+.flex-box {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  .data-box1,
+  .data-box2,
+  .data-box3 {
+    width: 462px;
+    height: 144px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+    &:last-child {
+      margin-right: 0;
+    }
+    .box-text1 {
+      color: #fff;
+      font-size: 36px;
+      padding-left: 190px;
+      min-width: 100px;
+      &::after {
+        content: '';
+        width: 1px;
+        height: 48px;
+        background: url('@/assets/images/map/rightMenu/line.png');
+        margin: 0 30px;
+      }
+    }
+    .box-text2 {
+      /* 设置字体透明 */
+      color: transparent;
+      /* 设置线性渐变，从红色渐变到蓝色 */
+      background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
+      /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+      -webkit-background-clip: text;
+      /* 非Webkit内核浏览器需要使用标准前缀 */
+      background-clip: text;
+      /* 把当前元素设置为行内块，以便能够应用背景 */
+      display: inline-block;
+      font-family: 'YouSheBiaoTiHei';
+      font-size: 40px;
+    }
+  }
+
+  .data-box1 {
+    background: url('@/assets/images/map/rightMenu/dataBox1.png') no-repeat;
+  }
+  .data-box2 {
+    background: url('@/assets/images/map/rightMenu/dataBox2.png') no-repeat;
+  }
+  .data-box3 {
+    background: url('@/assets/images/map/rightMenu/dataBox3.png') no-repeat;
+  }
+}
+
+.custom-table {
+  width: 100%;
+  height: 1030px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  .table-content {
+    height: 880px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .th {
+    width: 1499px;
+    height: 151px;
+    background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
+    display: flex;
+  }
+  .tr {
+    width: 1499px;
+    height: 139px;
+    background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
+    //margin-left: -23px;
+    display: flex;
+    padding-right: 20px;
+    &:hover {
+      background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
+    }
+  }
+  .td {
+    flex: 1;
+    color: #edfaff;
+    font-size: 38px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  .td-text {
+    /* 设置字体透明 */
+    color: transparent;
+    /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
+    -webkit-background-clip: text;
+    /* 非Webkit内核浏览器需要使用标准前缀 */
+    background-clip: text;
+    font-family: 'YouSheBiaoTiHei';
+    /* 设置线性渐变，从红色渐变到蓝色 */
+    background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
+    font-size: 48px;
+  }
+  .text-green {
+    background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
+  }
+  .text-danger {
+    background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
+  }
+}
+
+.custom-select {
+  width: 148px;
+  height: 38px;
+  line-height: 38px;
+  :deep(.el-select__wrapper) {
+    background-color: #081b41;
+    box-shadow: 0 0 0 1px #126cf7 inset;
+  }
+  :deep(.el-select__placeholder) {
+    font-size: 30px;
+    color: #eaf3fc;
+  }
+}
+
+</style>
+

src/views/globalMap/RightMenu/index.vue

@@ -33,7 +33,7 @@
         <!--河道监测-->
         <RiverMonitor v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '河道监测'" />
         <!--无人机-->
-        <RiverMonitor v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '河道监测'" />
+        <UAV v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '无人机'" />
         <!--实时标绘-->
         <OnlinePlotting v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '实时标绘'" />
       </div>
@@ -49,6 +49,7 @@ import Reservoir from './Reservoir.vue';
 import SpatialAnalysis from '@/views/globalMap/RightMenu/SpatialAnalysis.vue';
 import LayerAnalysis from '@/views/globalMap/RightMenu/LayerAnalysis.vue';
 import OnlinePlotting from '@/views/globalMap/RightMenu/OnlinePlotting.vue';
+import UAV from './UAV.vue';
 import { PointType } from '@/api/globalMap/type';
 
 interface Props {