机动无人机页面

src/api/globalMap/MobileUnmannedVehicle.ts

@@ -0,0 +1,24 @@
+//机动无人机
+
+import request from '@/utils/request';
+// 列表信息
+export const getDroneResourcesList = (data) => {
+  return request({
+    url: '/api/gateway/v2/get_drone_resources_info',
+    method: 'post',
+    data: data
+  });
+};
+
+// 轨迹信息
+export const getDroneResourcesTrajectory = (id) => {
+  return request({
+    url: '/api/gateway/v2/get_drone_resources_trajectory',
+    method: 'post',
+    data: {
+      query: {
+        id: id
+      }
+    }
+  });
+};

src/views/globalMap/RightMenu/KeyVehicles.vue

@@ -11,7 +11,7 @@
         <el-button class="btn" @click="handleCancel">取消</el-button>
       </div>
     </div>
-    <div>移动指挥车</div>
+    <div>两客一危一重货</div>
     <div class="custom-table">
       <div class="th">
         <div class="td">车牌号</div>

src/views/globalMap/RightMenu/MobilePlatform.vue

@@ -13,7 +13,7 @@
       </div>
     </div>
     <!--    </div>-->
-    <div>移动指挥车</div>
+    <div>手机工作台</div>
     <div class="custom-table">
       <div class="th">
         <div class="td">姓名</div>

src/views/globalMap/RightMenu/MobileUnmannedVehicle.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="menu-content">
+    <div class="container">
+      <div class="gradient-text title">机动无人机</div>
+      <!--    <div class="box2">-->
+      <div class="box-left">
+        <el-input v-model="queryParams.keywords" class="custom-input" placeholder="搜索" @input="initData">
+          <template #prefix>
+            <el-icon class="el-input__icon"><search /></el-icon>
+          </template>
+        </el-input>
+        <el-button class="btn" @click="handleCancel">取消</el-button>
+      </div>
+    </div>
+    <!--    </div>-->
+    <div>机动无人机</div>
+    <div class="custom-table">
+      <div class="th">
+        <div class="td">机动无人机</div>
+        <div class="td">工作单位</div>
+        <div class="td">职务</div>
+        <div class="td">操作</div>
+      </div>
+      <div class="table-content">
+        <div v-for="(item, index) in dataList" :key="item.id" class="tr">
+          <div class="td">{{ item.drone_name }}</div>
+          <div class="td">{{ item.work_unit }}</div>
+          <div class="td">{{ item.position }}</div>
+          <div class="td">
+            <div class="text" @click="handleConnect(index, item)">连线</div>
+            <div class="text" @click="handleCollaborate(index, item)">协同</div>
+            <div class="text" @click="handleTrack(item)">轨迹</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue';
+import { onMounted, reactive } from 'vue';
+import { getDroneResourcesList, getDroneResourcesTrajectory } from '@/api/globalMap/MobileUnmannedVehicle';
+const trackPlayback = inject('trackPlayback');
+// 数据列表,直接定义为数组
+const dataList = reactive([]);
+//入参
+const queryParams = reactive({
+  keywords: ''
+});
+//调接口
+const initData = () => {
+  getDroneResourcesList({
+    query: {
+      keywords: queryParams.keywords
+    }
+  }).then((res) => {
+    if (res.code === 0 && Array.isArray(res.rows)) {
+      dataList.splice(0, dataList.length, ...res.rows); // 使用 splice 替换数组内容，保持响应性
+    } else {
+      console.error('Invalid response from server:', res);
+      // 可以选择清空数据列表或显示错误消息
+      dataList.splice(0, dataList.length); // 清空数据列表
+    }
+  });
+};
+
+// 取消按钮的逻辑，搜索框清空并重新加载数据
+const handleCancel = () => {
+  queryParams.keywords = '';
+  initData();
+};
+const handleConnect = () => {};
+const handleCollaborate = () => {};
+// 轨迹
+const handleTrack = (item) => {
+  getDroneResourcesTrajectory(item.id).then((res) => {
+    const trajectory = [];
+    res.rows.forEach((item) => {
+      trajectory.push([item.longitude, item.latitude]);
+    });
+    trackPlayback(trajectory);
+  });
+};
+//调用函数
+onMounted(() => {
+  initData();
+});
+</script>
+
+<style lang="scss" scoped>
+.menu-content {
+  width: 1579px;
+  height: 1394px;
+  background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
+  padding: 130px 20px 20px 20px;
+  font-size: 36px;
+  position: relative;
+  color: #ffffff;
+}
+.title {
+  font-size: 60px;
+  position: absolute;
+  top: 30px;
+  left: 160px;
+}
+
+.box-left {
+  display: flex;
+  margin-top: 30px;
+  margin-bottom: 20px;
+  .btn {
+    width: 140px;
+    min-width: 140px;
+    height: 60px;
+    background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    margin-left: 20px;
+    color: #ffffff;
+    font-size: 32px;
+  }
+}
+
+.custom-input {
+  height: 60px;
+  line-height: 40px;
+}
+
+.custom-table {
+  width: 100%;
+  height: 1030px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  .table-content {
+    height: 880px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .th {
+    width: 100%;
+    height: 151px;
+    background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+  }
+  .tr {
+    width: 100%;
+    height: 139px;
+    background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    padding-right: 20px;
+    &:hover {
+      background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+  .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%);
+  }
+}
+.text {
+  font-size: 38px;
+  color: #247dff;
+  margin-right: 20px;
+  &:last-child {
+    margin-right: 0;
+  }
+}
+</style>

src/views/globalMap/RightMenu/index.vue

@@ -65,6 +65,8 @@
         <KeyVehicles v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '重点车辆'" @handle-menu="handleMenu" />
         <!--卫星电话-->
         <SatellitePhone v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '卫星电话'" @handle-menu="handleMenu" />
+        <!--机动无人机-->
+        <MobileUnmannedVehicle v-if="menuState.showMenu && menuState.menuData[menuState.activeIndex]?.name === '机动无人机'" @handle-menu="handleMenu" />
       </div>
     </div>
   </div>

src/views/globalMap/index.vue

@@ -143,7 +143,7 @@ const clickMenu = (item, dataList) => {
     if (item.checked || (!item.checked && index === 0)) {
       rightMenuRef.value.updateMenu(
         checked,
-        ['易涝隐患点', '无人机', '铁塔运行监测', '物资与装备', '通讯保障', '手机工作台'].includes(item.name)
+        ['易涝隐患点', '无人机', '铁塔运行监测', '物资与装备', '通讯保障', '手机工作台','机动无人机'].includes(item.name)
           ? item
           : { name: '图层分析', meta: { icon: 'icon1' } }
       );