Browse Source

Merge remote-tracking branch 'origin/dev' into dev

yangyuxuan 6 months ago
parent
commit
51f3027dd0

+ 9 - 0
package-lock.json

@@ -31,6 +31,7 @@
         "element-resize-detector": "^1.2.4",
         "file-saver": "^2.0.5",
         "fuse.js": "7.0.0",
+        "gcoord": "^1.0.7",
         "highlight.js": "11.9.0",
         "html2canvas": "^1.4.1",
         "image-conversion": "^2.1.1",
@@ -8201,6 +8202,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/gcoord": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmmirror.com/gcoord/-/gcoord-1.0.7.tgz",
+      "integrity": "sha512-UCN2iSm69jBOYz2ma2eg5I5imp65Cj70rcTTfMNSNMvZpR1U6oGjmVh080aCvC/6lN1ClkuOoBeaLuebw9AZJg==",
+      "engines": {
+        "node": ">=16.11.0"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",

+ 1 - 0
package.json

@@ -39,6 +39,7 @@
     "element-resize-detector": "^1.2.4",
     "file-saver": "^2.0.5",
     "fuse.js": "7.0.0",
+    "gcoord": "^1.0.7",
     "highlight.js": "11.9.0",
     "html2canvas": "^1.4.1",
     "image-conversion": "^2.1.1",

BIN
src/assets/images/map/end.png


BIN
src/assets/images/map/mark.png


BIN
src/assets/images/map/start.png


+ 1 - 1
src/components/Dialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="modelValue || customShow" v-drag="{draggable: draggable, scaleX: containerScale().scaleX, scaleY: containerScale().scaleY}" class="common-dialog" :style="{ width: computedWidth, height: computedHeight, zIndex: zIndex }">
+  <div v-if="modelValue || customShow" v-drag="{draggable: draggable, position: 'fixed', scaleX: containerScale().scaleX, scaleY: containerScale().scaleY}" class="common-dialog" :style="{ width: computedWidth, height: computedHeight, zIndex: zIndex }">
     <div :class="type === 'xs' || headerType === 'header2' ? 'dialog-header2' : 'dialog-header'">
       <div v-if="!hideTitle" class="dialog-title">
         {{ title ? title : '弹窗' }}

+ 2 - 2
src/directive/common/drag.ts

@@ -1,12 +1,12 @@
 export default {
   mounted(el, binding) {
-    const { draggable, scaleX = 1, scaleY = 1 } = binding.value;
+    const { draggable, position = 'absolute', scaleX = 1, scaleY = 1 } = binding.value;
     if (!draggable) {
       // 如果拖拽功能被禁用,则不执行任何拖拽相关的逻辑
       return;
     }
 
-    el.style.position = 'absolute';
+    el.style.position = position;
     el.style.cursor = 'move';
 
     const dragDom = el;

+ 0 - 3
src/hooks/useDrag.ts

@@ -1,3 +0,0 @@
-export function useDrag(element: HTMLElement) {
-
-}

+ 1 - 0
src/types/components.d.ts

@@ -97,6 +97,7 @@ declare module 'vue' {
     VideoContainer2: typeof import('./../components/HKVideo/video-container2.vue')['default']
     VideoTagEdit: typeof import('./../components/VideoTagEdit/index.vue')['default']
     YMap: typeof import('./../components/Map/YMap.vue')['default']
+    YMapold: typeof import('./../components/Map/YMapold.vue')['default']
     YztMap: typeof import('./../components/Map/YztMap/index.vue')['default']
   }
 }

+ 260 - 150
src/views/globalMap/RightMenu/FixedPointAnalysis.vue

@@ -7,6 +7,7 @@
           <i class="icon-position2" />
           <div class="text1" :title="selectData.event_title">{{ selectData.event_title }}</div>
         </div>
+        <div class="common-btn-primary3" @click="toSelect">定点选取</div>
       </div>
       <div v-else class="search-box">
         <div class="text-box">
@@ -56,7 +57,7 @@
           </div>
         </div>
       </div>
-      <div v-show="!!routeData && routeData.length > 0" class="route-box">
+      <div v-show="showAddress && !!routeData && routeData.length > 0" class="route-box">
         <div class="route-item1">
           <i class="icon-position3" />
           <div class="text1">路线始点:</div>
@@ -66,15 +67,15 @@
         <div class="route-list">
           <div v-for="(item, index) in routeData" :key="index" class="route-item2" @click="drawRoute(item)">
             <div class="text-box1">
-              <div :class="'tag' + index">{{ getTag(index) }}</div>
-              <div class="text1">{{ item.policy }}</div>
+              <div :class="'tag tag' + index">{{ getTag(index) }}</div>
+              <div class="text1">{{ item.strategy }}</div>
             </div>
             <div class="route-info">
               <div class="text-box2">
                 <i class="icon1" />
-                <div class="gradient-text2">{{ item.date[0] }}</div>
+                <div class="gradient-text2">{{ item.duration[0] }}</div>
                 <div class="text2">小时</div>
-                <div class="gradient-text2">{{ item.date[1] }}</div>
+                <div class="gradient-text2">{{ item.duration[1] }}</div>
                 <div class="text2">分钟</div>
               </div>
               <div class="line"></div>
@@ -94,21 +95,35 @@
 <script lang="ts" setup name="FixedPointAnalysis">
 import BigNumber from 'bignumber.js';
 import { getEmergencyRescuePointInfoList } from '@/api/globalMap';
+import markImg from '@/assets/images/map/mark.png';
+import startImg from '@/assets/images/map/start.png';
+import endImg from '@/assets/images/map/end.png';
 
 interface Props {
   modelValue: boolean;
   location?: string | number[];
+  activeMap: string;
 }
+const AMapType = ['vectorgraph', 'satellite'];
 const props = withDefaults(defineProps<Props>(), {});
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { emergency_resource, disaster_relief_material } = toRefs<any>(proxy?.useDict('emergency_resource', 'disaster_relief_material'));
 const emits = defineEmits(['update:modelValue']);
+import gcoord from 'gcoord';
+import Icon from 'ol/style/Icon';
+import Feature from 'ol/Feature';
+import Point from 'ol/geom/Point';
+import Style from 'ol/style/Style';
+import { LineString } from 'ol/geom';
+import { Stroke } from 'ol/style';
+
+const amapKey = 'e45d4caa2bef3c84714a2ed9b1e27d98';
 let getMapUtils = inject('getMapUtils');
 let showAddress = ref(true);
 let routeData = ref([]);
 let routeLine, startMarker, endMarker;
 let routesAddress = ref('');
-let AMap, map, driving, geocoder;
+let AMap, map, geocoder;
 let eventList = ref([]);
 let selectData = ref({
   event_title: '',
@@ -131,16 +146,18 @@ let total = ref(0);
 let dataList = ref([]);
 const toSelect = () => {
   map.on('click', handleClickMap);
+  showAddress.value = false;
+  routeData.value = [];
+  clearMarker();
+  clearLine();
 };
 const handleClickMap = (e) => {
-  map.off('click', handleClickMap);
-  tempState.longitude = e.lnglat.getLng();
-  tempState.latitude = e.lnglat.getLat();
-  geocoder.getAddress([tempState.longitude, tempState.latitude], (status, result) => {
-    if (status === 'complete' && result.info === 'OK') {
-      tempState.address = result.regeocode.formattedAddress;
-    }
-  });
+  if (AMapType.includes(props.activeMap)) {
+    map.off('click', handleClickMap);
+  } else {
+    map.un('click', handleClickMap);
+  }
+  getAddress([e.lnglat.getLng(), e.lnglat.getLat()]);
 };
 const confirmSelect = () => {
   selectEvent(
@@ -165,109 +182,161 @@ const selectEvent = (item, unFitView) => {
   tempState.address = '';
   tempState.longitude = '';
   tempState.latitude = '';
-  if (!!selectMarker) {
-    selectMarker.setMap(null);
-    selectMarker = null;
-  }
-  // 以 icon URL 的形式创建一个途经点
-  const icon = new AMap.Icon({
-    size: new AMap.Size(19, 31),
-    image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png'
-  });
-  selectMarker = new AMap.Marker({
-    position: new AMap.LngLat(item.longitude, item.latitude),
-    icon: icon,
-    offset: new AMap.Pixel(-13, -30)
-  });
-  selectMarker.setMap(map);
-  if (!unFitView) {
-    map.setFitView([selectMarker]);
+  clearMarker();
+  if (AMapType.includes(props.activeMap)) {
+    // 以 icon URL 的形式创建一个途经点
+    const icon = new AMap.Icon({
+      size: new AMap.Size(19, 31),
+      image: markImg
+    });
+    selectMarker = new AMap.Marker({
+      position: new AMap.LngLat(item.longitude, item.latitude),
+      icon: icon,
+      offset: new AMap.Pixel(-13, -30)
+    });
+    selectMarker.setMap(map);
+    if (!unFitView) {
+      map.setFitView([selectMarker]);
+    }
+  } else {
+    const icon = new Icon({
+      src: markImg,
+      width: 19,
+      height: 31
+    });
+    const feature = new Feature({
+      geometry: new Point([item.longitude, item.latitude])
+    });
+    feature.setStyle(
+      new Style({
+        image: icon
+      })
+    );
+    const vectorLayer = getMapUtils().getVectorLayer();
+    vectorLayer.getSource().addFeature(feature);
+    if (!unFitView) {
+      map.getView().setCenter([item.longitude, item.latitude]);
+    }
   }
   getList();
 };
 
-const handleRoutes = (item) => {
-  const start = [item.longitude, item.latitude];
-  const end = [selectData.value.longitude, selectData.value.latitude];
+const handleRoutes = async (item) => {
+  const lnglat = gcoord.transform([item.longitude, item.latitude], gcoord.WGS84, gcoord.GCJ02);
+  const lnglat2 = gcoord.transform([selectData.value.longitude, selectData.value.latitude], gcoord.WGS84, gcoord.GCJ02);
+  const start = [lnglat[0], lnglat[1]];
+  const end = lnglat2;
   showAddress.value = true;
   routesAddress.value = item.address;
-  calculateRoutes(start, end, 0);
-};
-// 计算并展示三条路线
-const calculateRoutes = (start, end, index) => {
-  if (index >= 3) {
-    return;
-  }
-  // 不同的策略或参数来生成不同的路线
-  const policyMap = [
-    AMap.DrivingPolicy.LEAST_TIME, // 最短时间
-    AMap.DrivingPolicy.LEAST_DISTANCE, // 最短距离
-    AMap.DrivingPolicy.LEAST_FEE // 最少费用
-  ];
-  driving.setPolicy(policyMap[index]);
+  // 10速度最快 返回结果会躲避拥堵,路程较短,尽量缩短时间,与高德地图的默认策略也就是不进行任何勾选一致
+  // 16费用最低 返回的结果尽量不走高速,并且尽量规划收费较低甚至免费的路径结果,与高德地图的“避免收费&不走高速”策略一致
+  const url = `https://restapi.amap.com/v3/direction/driving?origin=${start}&destination=${end}&key=${amapKey}`;
+  const response = await fetch(url + '&strategy=10');
 
-  driving.search(new AMap.LngLat(start[0], start[1]), new AMap.LngLat(end[0], end[1]), function (status, result) {
-    if (status === 'complete' && result.info === 'OK') {
-      const route = result.routes[0];
-      if (index === 0) {
-        routeData.value = [];
-      }
-      route.date = formatDate(route.time);
-      routeData.value.push(route);
+  if (!!response.ok) {
+    const data = await response.json();
+    if (data.route && data.route.paths) {
+      data.route.paths.forEach((item) => {
+        item.duration = formatDate(item.duration);
+      });
+      routeData.value = data.route.paths;
+    } else {
+      routeData.value = [];
     }
-
-    // 计算下一条路线
-    calculateRoutes(start, end, index + 1);
-  });
-};
-const drawRoute = (route) => {
-  const path = parseRouteToPath(route);
-  if (!!startMarker) {
-    map.remove(startMarker);
-    startMarker = null;
   }
-  if (!!endMarker) {
-    map.remove(endMarker);
-    endMarker = null;
-  }
-  if (!!routeLine) {
-    routeLine.setMap(null);
-    routeLine = null;
+  const response2 = await fetch(url + '&strategy=16');
+  if (!!response2.ok) {
+    const data2 = await response2.json();
+    if (data2.route && data2.route.paths) {
+      data2.route.paths.forEach((item) => {
+        item.duration = formatDate(item.duration);
+      });
+      routeData.value = routeData.value.concat(data2.route.paths);
+    }
   }
-  const icon1 = new AMap.Icon({
-    size: new AMap.Size(19, 31),
-    image: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png'
-  });
-  const icon2 = new AMap.Icon({
-    size: new AMap.Size(19, 31),
-    image: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png'
-  });
-  startMarker = new AMap.Marker({
-    position: path[0],
-    icon: icon1,
-    offset: new AMap.Pixel(-13, -30),
-    map: map
-  });
+};
 
-  endMarker = new AMap.Marker({
-    position: path[path.length - 1],
-    icon: icon2,
-    offset: new AMap.Pixel(-13, -30),
-    map: map
-  });
-  routeLine = new AMap.Polyline({
-    path: path,
-    isOutline: true,
-    outlineColor: '#ffeeee',
-    borderWeight: 2,
-    strokeWeight: 5,
-    strokeColor: '#0091ff',
-    lineJoin: 'round'
-  });
-  routeLine.setMap(map);
+const drawRoute = (route) => {
+  const path = parseRouteToPath(route);
+  clearLine();
+  if (AMapType.includes(props.activeMap)) {
+    const icon1 = new AMap.Icon({
+      size: new AMap.Size(19, 31),
+      image: startImg
+    });
+    const icon2 = new AMap.Icon({
+      size: new AMap.Size(19, 31),
+      image: endImg
+    });
+    startMarker = new AMap.Marker({
+      position: path[0],
+      icon: icon1,
+      offset: new AMap.Pixel(-13, -30),
+      map: map
+    });
 
-  // 调整视野达到最佳显示区域
-  map.setFitView([startMarker, endMarker, routeLine]);
+    endMarker = new AMap.Marker({
+      position: path[path.length - 1],
+      icon: icon2,
+      offset: new AMap.Pixel(-13, -30),
+      map: map
+    });
+    routeLine = new AMap.Polyline({
+      path: path,
+      isOutline: true,
+      outlineColor: '#ffeeee',
+      borderWeight: 2,
+      strokeWeight: 5,
+      strokeColor: '#0091ff',
+      lineJoin: 'round'
+    });
+    routeLine.setMap(map);
+    // 调整视野达到最佳显示区域
+    map.setFitView([startMarker, endMarker, routeLine]);
+  } else {
+    const vectorLayer = getMapUtils().getVectorLayer();
+    const source = vectorLayer.getSource();
+    startMarker = new Feature({
+      geometry: new Point(path[0])
+    });
+    endMarker = new Feature({
+      geometry: new Point(path[path.length - 1])
+    });
+    startMarker.setStyle(
+      new Style({
+        image: new Icon({
+          src: startImg,
+          width: 19,
+          height: 31
+        })
+      })
+    );
+    endMarker.setStyle(
+      new Style({
+        image: new Icon({
+          src: endImg,
+          width: 19,
+          height: 31
+        })
+      })
+    );
+    routeLine = new Feature({
+      geometry: new LineString(path)
+    });
+    routeLine.setStyle(
+      new Style({
+        stroke: new Stroke({
+          color: '#0091ff', // 主线条颜色
+          width: 5, // 主线条宽度
+          lineCap: 'round', // 线帽样式(可选)
+          lineJoin: 'round' // 线连接样式
+        })
+      })
+    );
+    source.addFeature(startMarker);
+    source.addFeature(routeLine);
+    source.addFeature(endMarker);
+  }
 };
 
 // 解析DrivingRoute对象,构造成AMap.Polyline的path参数需要的格式
@@ -278,11 +347,14 @@ const parseRouteToPath = (route) => {
   for (var i = 0, l = route.steps.length; i < l; i++) {
     var step = route.steps[i];
 
-    for (var j = 0, n = step.path.length; j < n; j++) {
-      path.push(step.path[j]);
-    }
+    // 按分号分割字符串,得到一个包含经纬度对的数组
+    const coordinatesPairs = step.polyline.split(';');
+    // 将每个经纬度对进一步分割成经度和纬度,并转换为一个对象
+    path = coordinatesPairs.map((pair) => {
+      const [longitude, latitude] = pair.split(',');
+      return gcoord.transform([longitude, latitude], gcoord.GCJ02, gcoord.WGS84);
+    });
   }
-
   return path;
 };
 function formatDate(seconds: number) {
@@ -304,15 +376,8 @@ function formatDate(seconds: number) {
   return [hours, minutes];
 }
 const getTag = (index) => {
-  let tag = '路线' + index;
-  if (index === 0) {
-    tag = '路线A';
-  } else if (index === 1) {
-    tag = '路线B';
-  } else if (index === 2) {
-    tag = '路线C';
-  }
-  return tag;
+  const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+  return '路线' + (arr[index] ? arr[index] : index);
 };
 // 搜索列表
 const getList = () => {
@@ -331,22 +396,68 @@ const getList = () => {
     total.value = res.total;
   });
 };
+const getAddress = async (location) => {
+  const gcj02Coord = gcoord.transform(location, gcoord.WGS84, gcoord.GCJ02);
+  tempState.longitude = location[0];
+  tempState.latitude = location[1];
+  // 调用高德逆向地理编码 API
+  const response = await fetch(`https://restapi.amap.com/v3/geocode/regeo?key=${amapKey}&location=${gcj02Coord[0]},${gcj02Coord[1]}`);
+  const result = await response.json();
+
+  // 解析地址信息
+  if (result.status === '1' && result.regeocode) {
+    tempState.address = result.regeocode.formatted_address;
+  }
+};
+const clearMarker = () => {
+  if (!selectMarker) return;
+  if (AMapType.includes(props.activeMap)) {
+    selectMarker.remove();
+    selectMarker = null;
+  } else {
+    const vectorLayer = getMapUtils().getVectorLayer();
+    const source = vectorLayer.getSource();
+    source.removeFeature(selectMarker);
+    selectMarker = null;
+  }
+};
+const clearLine = () => {
+  if (AMapType.includes(props.activeMap)) {
+    if (!!startMarker) {
+      startMarker.remove();
+      startMarker = null;
+    }
+    if (!!endMarker) {
+      endMarker.remove();
+      endMarker = null;
+    }
+    if (!!routeLine) {
+      routeLine.remove();
+      routeLine = null;
+    }
+  } else {
+    const vectorLayer = getMapUtils().getVectorLayer();
+    const source = vectorLayer.getSource();
+    if (!!startMarker) {
+      source.removeFeature(startMarker);
+      startMarker = null;
+    }
+    if (!!endMarker) {
+      source.removeFeature(endMarker);
+      endMarker = null;
+    }
+    if (!!routeLine) {
+      source.removeFeature(routeLine);
+      routeLine = null;
+    }
+  }
+};
 onMounted(() => {
-  AMap = getMapUtils().getAMap();
   map = getMapUtils().getMap();
-  geocoder = new AMap.Geocoder({
-    // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
-    city: '010'
-  });
-  tempState.longitude = props.location[0];
-  tempState.latitude = props.location[1];
-  geocoder.getAddress(props.location, (status, result) => {
-    if (status === 'complete' && result.info === 'OK') {
-      tempState.address = result.regeocode.formattedAddress;
-    }
-  });
-  //构造路线导航类
-  driving = new AMap.Driving({});
+  if (AMapType.includes(props.activeMap)) {
+    AMap = getMapUtils().getAMap();
+  }
+  getAddress(props.location);
 });
 </script>
 
@@ -366,11 +477,11 @@ onMounted(() => {
     overflow-y: auto;
   }
   .search-box {
-    width: 1490px;
+    width: 100%;
     height: 150px;
     background: url('@/assets/images/electronicDisasterMapManage/box6.png') no-repeat;
     background-size: 100% 100%;
-    padding: 0 10px;
+    padding: 0 10px 0 30px;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -540,6 +651,7 @@ onMounted(() => {
         height: 30px;
         background: url('@/assets/images/electronicDisasterMapManage/close.png') no-repeat;
         background-size: 100% 100%;
+        cursor: pointer;
         margin-left: 5px;
       }
     }
@@ -551,26 +663,25 @@ onMounted(() => {
       cursor: pointer;
       .text-box1 {
         display: flex;
-        .tag0 {
+        padding: 0 15px;
+        .tag {
           color: #fff;
-          background-color: #e65d63;
+          background-color: #2c81ff;
           border-radius: 10px;
           padding: 2px 6px;
           font-size: 36px;
         }
+        .tag0 {
+          color: #fff;
+          background-color: #e65d63;
+        }
         .tag1 {
           color: #fff;
           background-color: #f0b13c;
-          border-radius: 10px;
-          padding: 2px 6px;
-          font-size: 36px;
         }
         .tag2 {
           color: #fff;
           background-color: #6bc26b;
-          border-radius: 10px;
-          padding: 2px 6px;
-          font-size: 36px;
         }
         .text1 {
           font-size: 38px;
@@ -578,10 +689,9 @@ onMounted(() => {
         }
       }
       .route-info {
-        display: flex;
         background-color: #2b3858;
         border: 1px solid #2e5174;
-        padding: 3px 5px;
+        padding: 5px 15px;
         margin-top: 10px;
         display: flex;
         align-items: center;
@@ -590,19 +700,19 @@ onMounted(() => {
           align-items: center;
           .icon1 {
             display: inline-block;
-            width: 14px;
-            height: 13px;
+            width: 38px;
+            height: 34px;
             background: url('@/assets/images/electronicDisasterMapManage/icon3.png') no-repeat;
             background-size: 100% 100%;
-            margin-right: 5px;
+            margin-right: 15px;
           }
           .icon2 {
             display: inline-block;
-            width: 13px;
-            height: 16px;
+            width: 34px;
+            height: 42px;
             background: url('@/assets/images/electronicDisasterMapManage/icon4.png') no-repeat;
             background-size: 100% 100%;
-            margin-right: 5px;
+            margin-right: 15px;
           }
           .gradient-text2 {
             font-size: 40px;

+ 5 - 5
src/views/globalMap/RightMenu/ForestDefenseVideo/DetailDialog.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="detail-box">
-    <div class="tabs">
-      <div v-for="(item, index) in tabs" :key="index" class="tab">
-        <i :class="item.icon" />
-      </div>
-    </div>
+<!--    <div class="tabs">-->
+<!--      <div v-for="(item, index) in tabs" :key="index" class="tab">-->
+<!--        <i :class="item.icon" />-->
+<!--      </div>-->
+<!--    </div>-->
     <div class="content">
       <div class="line">
         <div class="common-title-box">{{ detailData.title }}</div>

+ 7 - 9
src/views/globalMap/RightMenu/ForestDefenseVideo/index.vue

@@ -7,11 +7,11 @@
       <div class="data-line">
         <div class="text-box1">
           <div class="data-label">设备总数</div>
-          <div class="gradient-text3">{{ !['', null, undefined].includes(statisticsData.data1) ? statisticsData.data1 : '-' }}</div>
+          <div class="gradient-text3">{{ !['', null, undefined].includes(statisticsData.total) ? statisticsData.total : '-' }}</div>
         </div>
         <div class="text-box2">
           <div class="data-label">在线</div>
-          <div class="gradient-text3">{{ !['', null, undefined].includes(statisticsData.data2) ? statisticsData.data2 : '-' }}</div>
+          <div class="gradient-text3">{{ !['', null, undefined].includes(statisticsData.online) ? statisticsData.online : '-' }}</div>
         </div>
       </div>
       <div class="query-box">
@@ -57,7 +57,7 @@
         <div class="tree-box">
           <el-tree ref="tree" :data="treeData" default-expand-all>
             <template #default="{ node, data }">
-              <span v-if="data.online && data.total" class="custom-tree-node">
+              <span v-if="![null, undefined, ''].includes(data.online) && ![null, undefined, ''].includes(data.total)" class="custom-tree-node">
                 <span>{{ node.label }}</span>
                 <span>({{ data.online }}/{{ data.total }})</span>
               </span>
@@ -82,8 +82,8 @@ const props = defineProps({
   activeMap: String
 });
 const statisticsData = ref({
-  data1: '',
-  data2: ''
+  online: '',
+  total: ''
 });
 // 查询条件
 const queryParams = reactive({
@@ -98,6 +98,8 @@ let treeData = ref([]);
 const getData = () => {
   getVideoForestFireList().then((res) => {
     treeData.value = res.data;
+    statisticsData.value.online = res.online;
+    statisticsData.value.total = res.total;
   });
 };
 let detailId = ref('');
@@ -112,10 +114,6 @@ const handleClick = (data) => {
   }
 };
 onMounted(() => {
-  statisticsData.value = {
-    data1: '125',
-    data2: '121'
-  };
   selectOptions1.value = [
     { label: '测试1', value: 1 },
     { label: '测试2', value: 2 },

+ 1 - 1
src/views/globalMap/RightMenu/GridPointRainfall.vue

@@ -1,6 +1,6 @@
 <template>
   <Dialog draggable custom-show title="格点雨量" :height="'1000px'" hide-footer @close="handleClose">
-    <div class="gradient-text title">雨量统计:{{address}}({{location[0]}}, {{location[1]}})</div>
+    <div class="gradient-text title">雨量统计:{{ address }}({{location[0]}}, {{location[1]}})</div>
     <Chart :option="chartOption" style="height: 700px" />
   </Dialog>
 </template>

+ 1 - 1
src/views/globalMap/RightMenu/index.vue

@@ -54,7 +54,7 @@
           <!--实时标绘-->
           <OnlinePlotting v-if="menuState.menuData[menuState.activeIndex]?.name === '实时标绘'" :activeMap="activeMap" />
           <!--定点分析-->
-          <FixedPointAnalysis v-if="menuState.menuData[menuState.activeIndex]?.name === '定点分析'" :location="location2" />
+          <FixedPointAnalysis v-if="menuState.menuData[menuState.activeIndex]?.name === '定点分析'" :location="location2" :activeMap="activeMap" />
           <!--雨情监测-->
           <RainMonitor v-if="menuState.menuData[menuState.activeIndex]?.name === '雨情监测'" />
           <!--铁塔运行监测-->

+ 25 - 5
src/views/globalMap/index.vue

@@ -300,7 +300,11 @@ watch(showNearbyVideos, () => {
     if (!!tempMenu.value && !!tempMenu.value.name) {
       leftMenuRef.value.setMenuChange(tempMenu.value, false);
       tempMenu.value = {};
-      map.off('click', handleClickMap);
+      if (AMapType.includes(activeMap.value)) {
+        map.off('click', handleClickMap);
+      } else {
+        map.un('click', handleClickMap);
+      }
     }
   }
 });
@@ -310,7 +314,11 @@ watch(showRainfall, () => {
     if (!!tempMenu.value && !!tempMenu.value.name) {
       leftMenuRef.value.setMenuChange(tempMenu.value, false);
       tempMenu.value = {};
-      map.off('click', handleClickMap);
+      if (AMapType.includes(activeMap.value)) {
+        map.off('click', handleClickMap);
+      } else {
+        map.un('click', handleClickMap);
+      }
     }
   }
 });
@@ -320,7 +328,11 @@ const handleShowVideo = (data) => {
   showNearbyVideos.value = true;
 };
 const handleClickMap = (e) => {
-  location.value = [e.lnglat.getLng(), e.lnglat.getLat()];
+  if (AMapType.includes(activeMap.value)) {
+    location.value = [e.lnglat.lng, e.lnglat.lat];
+  } else {
+    location.value = e.coordinate;
+  }
   if (!!tempMenu.value && tempMenu.value.name === '附近视频') {
     showNearbyVideos.value = true;
   } else if (!!tempMenu.value && tempMenu.value.name === '格点雨量') {
@@ -329,7 +341,11 @@ const handleClickMap = (e) => {
     const item = deepClone(tempMenu.value);
     const nowLocation = deepClone(location.value);
     tempMenu.value = {};
-    map.off('click', handleClickMap);
+    if (AMapType.includes(activeMap.value)) {
+      map.off('click', handleClickMap);
+    } else {
+      map.un('click', handleClickMap);
+    }
     rightMenuRef.value.updateMenu(item.checked ? '1' : '2', item, nowLocation);
   }
 };
@@ -352,7 +368,11 @@ const handleShowPeople = (data) => {
 // })
 onBeforeUnmount(() => {
   if (!!map) {
-    map.off('click', handleClickMap);
+    if (AMapType.includes(activeMap.value)) {
+      map.off('click', handleClickMap);
+    } else {
+      map.un('click', handleClickMap);
+    }
   }
 });