功能修改20250117

src/components/MapView.vue

@@ -70,8 +70,7 @@ export default {
             mapStore.draw_geometry = geometry;
             break;
           case "CurrentUavInfo":
-            mapStore.isConflict = arg.data.isConflict;
-            mapStore.currentUavInfo = arg.data;
+            mapStore.currentUavInfo = arg.data.message;
             break;
           case "RealTimeUAVList":
             mapStore.realTimeUAVList= arg.data.message;

src/service/map.js

@@ -71,11 +71,16 @@ export function queryGridByLine(params){
             "radius":5,
             "fields":["gridCode","x","y","z","element","boxSize"],
             "isShowInfo":0,
-            "elementFields":["demographics","green","river","road",
+            "elementFields":["demographics",
+                "green",
+                "river",
+                "road",
                 "collision",
                 "no_fly_zone",
                 "clear_zone",
-                "collision_buffer","no_fly_zone_buffer"]
+                "collision_buffer",
+                "no_fly_zone_buffer",
+                "clear_zone_buffer"]
         }
     })
 }
@@ -120,7 +125,17 @@ export function routeRePlan(params){
             "radius":5,
             "fields":["gridCode","x","y","z","element","boxSize"],
             "isShowInfo":0,
-            "elementFields":["demographics","green","river","road","collision_buffer","no_fly_zone_buffer"]
+            "elementFields":[
+                "demographics",
+                "green",
+                "river",
+                "road",
+                "collision",
+                "no_fly_zone",
+                "clear_zone",
+                "collision_buffer",
+                "no_fly_zone_buffer",
+                "clear_zone_buffer"]
         }
     })
 }

src/store/map.js

@@ -37,9 +37,9 @@ export const useMapStore = defineStore('map', {
         gridCode:null,   //当前网格编码
         uavId:null, //当前无人机编码
         flyInfo:null, //当前无人机信息
-        isConflict:false, //是否冲突
         currentUavInfo:null,
         realTimeUAVList:[], //实时无人机列表
+        isFollow:false, //是否跟随无人机
     }),
     persist: true,
     actions: {

src/utils/map/addLayer.js

@@ -852,8 +852,8 @@ export function drawRouteManual(params) {
           "material": {
             "color": [
               0,
+              149,
               255,
-              0,
               0.3
             ]
           },

src/views/home/Index.vue

@@ -151,8 +151,7 @@
     <RouteList v-show="panelShow.routeList" @close="handleClosePanels('routeList')" />
     <RoadList v-show="panelShow.roadList" @close="handleClosePanels('roadList')" />
     <AreaList v-show="panelShow.areaList" @close="handleClosePanels('areaList')" />
-    <FlyController v-show="false" @close="handleClosePanels('areaList')" />
-    <FlyConflict v-show="mapStore.isConflict" @close="handleClosePanels('areaList')" />
+    <FlyController v-show="mapStore.isFollow" @close="handleClosePanels('areaList')" />
     <CubeInfo v-show="mapStore.gridCode != null" @close="handleClosePanels('areaList')" />
     <AreaLayering v-show="panelShow.areaLayering" @close="handleClosePanels('areaLayering')" />
     <UavInfo v-if="mapStore.uavId != null" @close="handleCloseUavInfo" />
@@ -240,11 +239,26 @@ let warningData = ref([
 function updateWarningData() {
   let tempData = [];
   mapStore.realTimeUAVList.forEach((item)=>{
+    let msg = '';
+    let status = "";
+    if(item?.nearestAircraft?.status != "SAFE"){
+      msg = "碰撞预警"
+      status = "预警中"
+    }else if(item?.noFlyZone.status != "SAFE"){
+      msg = "禁飞区预警"
+      status = "预警中"
+    }else if(item?.routeDeviate.status != "SAFE"){
+      msg = "偏航预警"
+      status = "预警中"
+    }else{
+      msg = "碰撞预警"
+      status = "已解除"
+    }
     let obj = {
       id: item.uavid,
       time: item.dateTime,
-      status: item?.nearestAircraft?.status =="DANGEROUS" ? '预警中' : '已解除',
-      msg: '碰撞预警!',
+      status: status,
+      msg: msg,
       position: item.position_cj,
     }
     tempData.push(obj);
@@ -261,19 +275,21 @@ function handlePickIllegalUav(row) {
   if (selectedIllegalUav.value === row.id) {
     selectedIllegalUav.value = null
     panelShow.uavInfo = false;
-    // changePointStatus({
-    //   "uavid": row.id,
-    //   "isFollow": false,
-    // })
-    importantAreaPosition(row.position[0], row.position[1], 300, 0, 0);
+    changePointStatus({
+      "uavid": row.id,
+      "isFollow": false,
+    });
+    mapStore.isFollow = false;
+    // importantAreaPosition(row.position[0], row.position[1], 300, 0, 0);
 
   } else {
     selectedIllegalUav.value = row.id;
     panelShow.uavInfo = true;
-    // changePointStatus({
-    //   "uavid": row.id,
-    //   "isFollow": true,
-    // })
+    changePointStatus({
+      "uavid": row.id,
+      "isFollow": true,
+    });
+    mapStore.isFollow = true;
   }
 }
 

src/views/home/cpns/FlyController.vue

@@ -4,39 +4,189 @@
       <span>
         鸟瞰视角
       </span>
-      <sapn>
+      <sapn @click="quitFollow">
         退出跟随
       </sapn>
     </div>
     <div class="bottom">
       <div class="bottom_left">
         <div class="left_fxlc">
-
+          <div class="single-item">飞行里程(M)</div>
+          <div class="single-item num">{{ singleLength }}</div>
         </div>
         <div class="left_txxh">
-
+          <img src="../../../assets/images/page/信号.png" alt="">
+          <div class="single-item">通信信号</div>
+          <div class="single-item num">3</div>
         </div>
       </div>
       <div class="bottom_middle">
-        <div class="left_fxlc">
+        <div class="middle_left_fxlc">
 
         </div>
-        <div class="left_txxh">
+        <div id="chart-ybp" class="middle_center_fxlc">
+
+        </div>
+        <div class="middle_right_fxlc">
 
         </div>
       </div>
       <div class="bottom_right">
-
+        <div class="right_fxlc">
+          <div class="single-item">飞行时长(S)</div>
+          <div class="single-item num">{{ singleTime }}</div>
+        </div>
+        <div class="right_txxh">
+          <img src="../../../assets/images/page/风量.png" alt="">
+          <div class="single-item">风力级数</div>
+          <div class="single-item num">0</div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script>
 import {useMapStore} from "@/store/map.js";
-
+import {onMounted,ref, watch} from "vue";
+import {nowSize, setOptions} from "@/utils/echarts.js";
+import {graphic} from "echarts";
+import * as echarts from 'echarts'
+import {changePointStatus} from "@/utils/map/addLayer.js";
 export default {
   setup(props) {
     const mapStore = useMapStore();
+    let option;
+    let singleLength = ref(0);
+    let singleTime = ref(0);
+    onMounted(()=>{
+      loadChart()
+    })
+    function loadChart() {
+      option = {
+        backgroundColor: 'transparent',
+        series: [
+          {
+            type: 'gauge',
+            z:100,
+            axisLine: {
+              lineStyle: {
+                width: 5,
+                color: [
+                  [
+                    0.3, new echarts.graphic.LinearGradient(
+                      0, 1, 1, 0, [{
+                        offset: 0,
+                        color: 'rgba(0, 237, 3,0.1)',
+                      }, {
+                        offset: 0.5,
+                        color: 'rgba(0, 237, 3,0.6)',
+                      },
+                        {
+                          offset: 1,
+                          color: 'rgba(0, 237, 3,1)',
+                        }
+                      ]
+                  )
+                  ],
+                  [
+                    0.7, new echarts.graphic.LinearGradient(
+                      0, 1, 1, 0, [{
+                        offset: 0,
+                        color: 'rgba(255, 184, 0,0.1)',
+                      }, {
+                        offset: 0.5,
+                        color: 'rgba(255, 184, 0,0.6)',
+                      },
+                        {
+                          offset: 1,
+                          color: 'rgba(255, 184, 0,1)',
+                        }
+                      ]
+                  )
+                  ],
+                  [
+                    1, new echarts.graphic.LinearGradient(
+                      0, 1, 1, 0, [{
+                        offset: 0,
+                        color: 'rgba(175, 36, 74,0.1)',
+                      }, {
+                        offset: 0.5,
+                        color: 'rgba(255, 36, 74,0.6)',
+                      },
+                        {
+                          offset: 1,
+                          color: 'rgba(255, 36, 74,1)',
+                        }
+                      ]
+                  )
+                  ]
+                ],
+              }
+            },
+            radius: '110%',
+            center: ['50%', '55%'],
+            pointer: {
+              itemStyle: {
+                color: 'auto'
+              }
+            },
+            axisTick: {
+              distance: 0,
+              length: 8,
+              lineStyle: {
+                color: 'auto',
+                width: 2
+              }
+            },
+            splitLine: {
+              distance: 0,
+              length: 20,
+              lineStyle: {
+                color: 'auto',
+                width: 4
+              }
+            },
+            axisLabel: {
+              color: 'white',
+              distance: 8,
+              fontSize: 12
+            },
+            detail: {
+              fontSize: 14,
+              valueAnimation: true,
+              formatter: '{value} 米/秒',
+              color: 'white',
+            },
+            data: [{
+              value: 0
+            }]
+          },
+        ]
+      };
+    }
+
+    function quitFollow(){
+      debugger
+      changePointStatus({
+        "uavid": mapStore.currentUavInfo.uavid,
+        "isFollow": false,
+      });
+      mapStore.isFollow = false;
+    }
+
+    watch(() => mapStore.currentUavInfo, (val) => {
+      option.series[0].data[0].value = mapStore.currentUavInfo.speed;
+      singleLength.value = mapStore.currentUavInfo.lastFlightDistance;
+      singleTime.value = mapStore.currentUavInfo.lastFlightTime;
+      setOptions(document.getElementById('chart-ybp'), option)
+    }, {
+      deep: true
+    })
+    return{
+      singleLength,
+      singleTime,
+      quitFollow
+    }
   }
 }
 </script>
@@ -81,14 +231,140 @@ export default {
   .bottom_left{
     width: 33%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
+    .left_fxlc{
+      width: 100%;
+      height: 78%;
+      background: url("../../../assets/images/page/左.png") no-repeat;
+      background-position: center right;
+      background-size: 40% 90%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-end;
+      .single-item{
+        padding-bottom: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        font-size: 14px;
+        color: #CAD6F1;
+      }
+      .num{
+        font-family: BarlowBold;
+        font-size: 16px;;
+        color: transparent;
+        background: linear-gradient(0deg, #00A8FF 0%, #8FDFFE 100%);
+        -webkit-background-clip: text !important;
+      }
+    }
+    .left_txxh{
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      width: 100%;
+      height: 22%;
+      img{
+        padding-left: 40px;
+        width: 18px;
+        height: 18px;
+      }
+      .single-item{
+        padding-left: 10px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        font-size: 16px;
+        color: #FFFFFF;
+        line-height: 60px;
+      }
+      .num{
+        padding-bottom: 4px;
+        font-family: BarlowBold;
+        font-size: 24px;;
+        color: transparent;
+        background: linear-gradient(0deg, #00A8FF 0%, #8FDFFE 100%);
+        -webkit-background-clip: text !important;
+      }
+    }
   }
   .bottom_middle{
     width: 33%;
     height: 100%;
+    display: flex;
+    .middle_left_fxlc{
+      width: 10%;
+      height: 100%;
+    }
+    .middle_center_fxlc{
+      width: 80%;
+      height: 100%;
+    }
+    .middle_right_fxlc{
+      width: 10%;
+      height: 100%;
+    }
   }
   .bottom_right{
     width: 33%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
+    .right_fxlc{
+      width: 100%;
+      height: 78%;
+      background: url("../../../assets/images/page/右.png") no-repeat;
+      background-position: center left;
+      background-size: 40% 90%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      .single-item{
+        padding-bottom: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        font-size: 14px;
+        color: #CAD6F1;
+      }
+      .num{
+        font-family: BarlowBold;
+        font-size: 16px;;
+        color: transparent;
+        background: linear-gradient(0deg, #00A8FF 0%, #8FDFFE 100%);
+        -webkit-background-clip: text !important;
+      }
+    }
+    .right_txxh{
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: center;
+      width: 100%;
+      height: 22%;
+      img{
+        padding-right: 10px;
+        width: 18px;
+        height: 18px;
+      }
+      .single-item{
+        padding-right: 10px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        font-size: 16px;
+        color: #FFFFFF;
+        line-height: 60px;
+      }
+      .num{
+        padding-right: 40px;
+        padding-bottom: 4px;
+        font-family: BarlowBold;
+        font-size: 24px;;
+        color: transparent;
+        background: linear-gradient(0deg, #00A8FF 0%, #8FDFFE 100%);
+        -webkit-background-clip: text !important;
+      }
+    }
   }
 
 }

src/views/home/cpns/MeshEditor.vue

@@ -101,15 +101,15 @@ export default {
 
     const DenseData = reactive([
       // { label: '1/8″网格', level: 24, size: { x: 3.3055614085396883, y: 3.8513467134689563, z: 3.3678982462941303 }, des: '(3.9m)', position: 0 },
-      { label: '1/4″网格', level: 23, size: { x: 6.7358, y: 7.7024, z: 6.6111 }, des: '(7.7m)', position: 10 },
-      { label: '1/2″网格', level: 22, size: { x: 13.222978864358083, y: 15.406742669116284, z: 13.471596544164798 }, des: '(15.5m)', position: 33 },
+      { label: '1/4″网格', level: 23, size: { x: 6.7358, y: 7.7024, z: 6.6111 }, des: '(7m)', position: 10 },
+      { label: '1/2″网格', level: 22, size: { x: 13.222978864358083, y: 15.406742669116284, z: 13.471596544164798 }, des: '(15m)', position: 33 },
       // { label: '1′网格', level: 21, size: { x: 30.9, y: 30.9, z: 30.9 }, des: '(30.9m)', position: 30 },
-      { label: '2′网格', level: 20, size: { x: 52.887881893650956, y: 61.627412608112536, z: 53.887012166300096 }, des: '(61.8m)', position: 66 },
+      { label: '2′网格', level: 20, size: { x: 52.887881893650956, y: 61.627412608112536, z: 53.887012166300096 }, des: '(61m)', position: 66 },
       // { label: '4′网格', level: 19, size: { x: 123.7, y: 123.7, z: 123.7 }, des: '(123.7m)', position: 50 },
       // { label: '8′网格', level: 18, size: { x: 247.4, y: 247.4, z: 247.4 }, des: '(247.4m)', position: 60 },
       // { label: '16′网格', level: 17, size: { x: 376.7, y: 376.7, z: 376.7 }, des: '(376.7m)', position: 70 },
       // { label: '32′网格', level: 16, size: { x: 746.4, y: 746.4, z: 746.4 }, des: '(746.4m)', position: 80 },
-      { label: '1′网格', level: 15, size: { x: 1582.2726823222256, y: 1856.6079667204758, z: 1724.5956527210265 }, des: '(1856.4m)', position: 100 },
+      { label: '1′网格', level: 15, size: { x: 1582.2726823222256, y: 1856.6079667204758, z: 1724.5956527210265 }, des: '(1850m)', position: 100 },
       // { label: '2′网格', level: 14, size: { x: 2984.4, y: 2984.4, z: 2984.4 }, des: '(2984.4m)', position: 100 },
     ]);