打点详情

src/components/Map/YztMap/index.vue

@@ -302,7 +302,7 @@ const filterTd = (obj, dataType) => {
     data.push(tempData);
   }
   if (data[data.length - 1].data && data[data.length - 1].data.length === 1 && data[data.length - 1].type === 'shortText') {
-    data[data.length - 1].data[1] = { label: '', value: '' };
+    data[data.length - 1].type = 'longText';
   }
   return data;
 };

src/components/Map/data.ts

@@ -102,5 +102,6 @@ export const titleList = {
   '32': '防溺水',
   '33': '森林防火',
   '34': '防灾救援',
-  '41': '救援队伍'
+  '41': '救援队伍',
+  'forestFireWarn': '森林火灾'
 };

src/components/Map/index.vue

@@ -5,12 +5,13 @@
 </template>
 
 <script setup lang="ts" name="Map">
-import { useAMap } from '@/hooks/AMap/useAMap';
-import { useDrawTool } from '@/hooks/AMap/useDrawTool';
-import { getDictLabel } from '@/utils/dict';
-import { pointDetailTemplate } from './mapData';
+import {useAMap} from '@/hooks/AMap/useAMap';
+import {useDrawTool} from '@/hooks/AMap/useDrawTool';
+import {getDictLabel} from '@/utils/dict';
+import {pointDetailTemplate} from './mapData';
 import {getPointInfoList} from "@/api/globalMap";
-import { methodList, titleList } from './data';
+import {methodList, titleList} from './data';
+
 interface EventDetails {
   'event_id': String;
   'event_title': String;
@@ -24,16 +25,17 @@ interface EventDetails {
   'latitude': String;
   'longitude': String
 }
+
 interface Props {
   activeMap: string;
   pointType: [];
-  eventDetails: EventDetails;
+  eventDetails?: EventDetails;
   zoom?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {});
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
+const {proxy} = getCurrentInstance() as ComponentInternalInstance;
+const {point_type} = toRefs<any>(proxy?.useDict('point_type'));
 
 const emits = defineEmits(['onLoadCompleted', 'selectGraphics', 'unSelectGraphics', 'showTextEditBox', 'onDrawCompleted', 'handleShowVideo', 'handleShowWarehouse']);
 
@@ -70,7 +72,7 @@ const mapUtils = useAMap({
     } else {
       map.removeLayer();
     }
-    drawTool.initMouseTool({ container: 'aMap', map, AMap });
+    drawTool.initMouseTool({container: 'aMap', map, AMap});
     handleResize();
     emits('onLoadCompleted')
   },
@@ -107,7 +109,7 @@ const mapUtils = useAMap({
           const div = document.createElement('div');
           div.className = 'point-item point-item-hover';
           div.innerHTML =
-            '<div class="td4">' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div class="td4">' + item.name + '</div>';
+              '<div class="td4">' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div class="td4">' + item.name + '</div>';
           div.addEventListener('click', () => {
             handlePointDetails(item);
           });
@@ -140,86 +142,116 @@ const {
   handleHover,
   creatMask,
   trackPlayback
-} = { ...mapUtils };
+} = {...mapUtils};
 const handlePointDetails = (data) => {
-  let method = methodList[data.dataType];
-  let title = !!titleList[data.dataType] ? titleList[data.dataType] : '信息';
-  if (!method) return;
-  method(data.id).then((res) => {
-    if (!!pointDetailTemplate[data.dataType]) {
-      let div = document.createElement('div');
-      div.className = 'point-info';
-      let titleDom = document.createElement('div');
-      titleDom.className = 'title-box';
-      titleDom.innerHTML = '<div class="gradient-text">' + title + '</div></div>';
-      div.appendChild(titleDom);
-      if (data.dataType === 2) {
-        let btnBox = document.createElement('div');
-        let btn = document.createElement('div');
-        btnBox.className = 'flex';
-        btn.className = 'btn';
-        btn.innerHTML = '<div class="video-icon"></div><div>物资详情</div>';
-        btn.onclick = () => {
-          emits('handleShowWarehouse', data);
-        };
-        btnBox.appendChild(btn);
-        div.appendChild(btnBox);
-      } else if (data.dataType === 4) {
-        let btnBox = document.createElement('div');
-        let btn = document.createElement('div');
-        btnBox.className = 'flex';
-        btn.className = 'btn';
-        btn.innerHTML = '<div class="video-icon"></div><div>附近视频</div>';
-        btn.onclick = () => {
-          emits('handleShowVideo', data);
-        };
-        btnBox.appendChild(btn);
-        div.appendChild(btnBox);
+  const method = methodList[data.dataType];
+  if (!!method) {
+    // 请求接口获取详情
+    method(data.id).then((res) => {
+      if (!!pointDetailTemplate[data.dataType]) {
+        createInfo(data, res);
       }
-      let icon1 = document.createElement('div');
-      icon1.className = 'icon1';
-      let icon2 = document.createElement('div');
-      icon2.className = 'icon2';
-      let icon3 = document.createElement('div');
-      icon3.className = 'icon3';
-      let icon4 = document.createElement('div');
-      icon4.className = 'icon4';
-      div.appendChild(icon1);
-      div.appendChild(icon2);
-      div.appendChild(icon3);
-      div.appendChild(icon4);
-      let table = document.createElement('div');
-      table.className = 'table-box';
-      let content = '';
-      content += '<div class="table">';
-      const newData = filterTd(res.rows[0], data.dataType);
-      newData.forEach((item) => {
-        content += '<div class="point-item2">';
-        content += '<div class="td1">' + item.data[0].label + '</div><div class="td2">' + item.data[0].value + '</div>';
+    });
+  } else if (!!pointDetailTemplate[data.detailType]) {
+    // 直接用现有数据展示
+    createInfo(data)
+  }
+};
+const createInfo = (data, res) => {
+  let dataType = '';
+  if (!!titleList[data.dataType]) {
+    dataType = data.dataType;
+  } else if (!!titleList[data.detailType]) {
+    dataType = data.detailType;
+  }
+  let title = titleList[dataType] ? titleList[dataType] :  '信息';
+  let div = document.createElement('div');
+  div.className = 'point-info';
+  let titleDom = document.createElement('div');
+  titleDom.className = 'title-box';
+  titleDom.innerHTML = '<div class="gradient-text">' + title + '</div></div>';
+  div.appendChild(titleDom);
+  if (data.dataType === 2) {
+    let btnBox = document.createElement('div');
+    let btn = document.createElement('div');
+    btnBox.className = 'flex';
+    btn.className = 'btn';
+    btn.innerHTML = '<div class="video-icon"></div><div>物资详情</div>';
+    btn.onclick = () => {
+      emits('handleShowWarehouse', data);
+    };
+    btnBox.appendChild(btn);
+    div.appendChild(btnBox);
+  } else if (data.dataType === 4) {
+    let btnBox = document.createElement('div');
+    let btn = document.createElement('div');
+    btnBox.className = 'flex';
+    btn.className = 'btn';
+    btn.innerHTML = '<div class="video-icon"></div><div>附近视频</div>';
+    btn.onclick = () => {
+      emits('handleShowVideo', data);
+    };
+    btnBox.appendChild(btn);
+    div.appendChild(btnBox);
+  }
+  let icon1 = document.createElement('div');
+  icon1.className = 'icon1';
+  let icon2 = document.createElement('div');
+  icon2.className = 'icon2';
+  let icon3 = document.createElement('div');
+  icon3.className = 'icon3';
+  let icon4 = document.createElement('div');
+  icon4.className = 'icon4';
+  div.appendChild(icon1);
+  div.appendChild(icon2);
+  div.appendChild(icon3);
+  div.appendChild(icon4);
+  let table = document.createElement('div');
+  table.className = 'table-box';
+  let content = '';
+  content += '<div class="table">';
+  let newData = [];
+  if (res) {
+    newData = filterTd(res.rows[0], dataType);
+  } else {
+    newData = filterTd(data, dataType);
+  }
+  newData.forEach((item) => {
+    if (item.type === 'shortText') {
+      content += '<div class="tr">';
+      item.data.forEach((item2) => {
+        content += '<div class="point-item">';
+        content += '<div class="td1">' + item2.label + '</div><div class="td2">' + item2.value + '</div>';
         content += '</div>';
       });
       content += '</div>';
-      table.innerHTML = content;
-      div.appendChild(table);
-      let closeBtn = document.createElement('div');
-      closeBtn.className = 'close';
-      closeBtn.onclick = hideInfo;
-      div.appendChild(closeBtn);
-      showInfo(div, [data.longitude, data.latitude], true);
+    } else {
+      content += '<div class="point-item2">';
+      content += '<div class="td1">' + item.data[0].label + '</div><div class="td2">' + item.data[0].value + '</div>';
+      content += '</div>';
     }
   });
-};
+  content += '</div>';
+  table.innerHTML = content;
+  div.appendChild(table);
+  let closeBtn = document.createElement('div');
+  closeBtn.className = 'close';
+  closeBtn.onclick = hideInfo;
+  div.appendChild(closeBtn);
+  showInfo(div, [data.longitude, data.latitude], true);
+}
 const filterTd = (obj, dataType) => {
   let data = [];
   let tempData = {};
   let i = 0;
-  for (let key in obj) {
-    let keyLabel = pointDetailTemplate[dataType][key];
+  const pointDetailTemplateObj = pointDetailTemplate[dataType];
+  Object.keys(pointDetailTemplateObj).forEach((key) => {
+    let keyLabel = pointDetailTemplateObj[key];
     if (!!keyLabel) {
       if (i === 2) {
         i = 0;
       }
-      const value = !!obj[key] ? obj[key] : '';
+      const value = !!obj && !!obj[key] ? obj[key] : '';
       if (value && value.length > 8) {
         if (i === 0) {
           data.push({ type: 'longText', data: [{ label: keyLabel, value: value }] });
@@ -228,7 +260,11 @@ const filterTd = (obj, dataType) => {
           tempData = { type: 'longText', data: [{ label: keyLabel, value: value }] };
         }
       } else {
-        data[data.length - 1].data.push({ label: keyLabel, value: value });
+        if (i === 0) {
+          data.push({ type: 'shortText', data: [{ label: keyLabel, value: value }] });
+        } else {
+          data[data.length - 1].data.push({ label: keyLabel, value: value });
+        }
         i++;
         if (!!tempData && JSON.stringify(tempData) !== '{}') {
           data.push(tempData);
@@ -237,18 +273,21 @@ const filterTd = (obj, dataType) => {
         }
       }
     }
-  }
+  })
   if (!!tempData && JSON.stringify(tempData) !== '{}') {
     data.push(tempData);
   }
+  if (data[data.length - 1].data && data[data.length - 1].data.length === 1 && data[data.length - 1].type === 'shortText') {
+    data[data.length - 1].type = 'longText';
+  }
   return data;
 };
 // 监听地图类型变化
 watch(
-  () => props.activeMap,
-  () => {
-    switchMap(props.activeMap);
-  }
+    () => props.activeMap,
+    () => {
+      switchMap(props.activeMap);
+    }
 );
 
 watch(() => props.eventDetails, () => {
@@ -265,7 +304,17 @@ const getMapUtils = () => {
 const getDrawTool = () => {
   return mapUtils.getDrawTool();
 };
-defineExpose({ getDrawTool, getMapUtils, addMarker, addSearchMarker, getMarkers, clearMarker, getMap, drawTool, handleHover });
+defineExpose({
+  getDrawTool,
+  getMapUtils,
+  addMarker,
+  addSearchMarker,
+  getMarkers,
+  clearMarker,
+  getMap,
+  drawTool,
+  handleHover
+});
 const handleResize = () => {
   map.resize();
 };
@@ -280,12 +329,14 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 @import 'map.scss';
+
 .map-container2 {
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
 }
+
 .map-container {
   width: 100%;
   height: 100%;
@@ -294,6 +345,7 @@ onUnmounted(() => {
   :deep(.amap-copyright) {
     display: none !important;
   }
+
   :deep(.amap-marker-label) {
     border: 1px solid #474747;
     background-color: rgba(255, 255, 255, 0.65);

src/components/Map/map.scss

@@ -1,6 +1,6 @@
 :deep(.point-info) {
   border: 1px solid #2a81fc;
-  padding: 5px 12px 12px;
+  padding: 2px 15px 15px;
   width: 350px;
   font-size: 14px;
   display: flex;
@@ -9,7 +9,7 @@
   color: #d5dde3;
   position: relative;
   .table-box {
-    max-height: 400px;
+    max-height: 175px;
     overflow-y: auto;
     width: 100%;
     &::-webkit-scrollbar {
@@ -42,36 +42,40 @@
     width: 100%;
   }
   .td1 {
+    width: 67px;
+  }
+  .td1, .td3 {
     background-color: #1a326e;
     padding: 8px 5px;
     color: #c6d1e6;
     border-bottom: 1px solid #3d66ae;
     border-left: 1px solid #3d66ae;
   }
-  .td2 {
+  .td2, .td4 {
     padding: 8px 5px;
     border-bottom: 1px solid #3d66ae;
     border-left: 1px solid #3d66ae;
   }
-  .td1, .td2 {
+  .td2, .td3, .td4 {
     flex: 1;
   }
   .close {
     position: absolute;
     top: 10px;
-    right: 30px;
-    width: 30px;
-    height: 30px;
-    background: url('@/assets/images/close.png') no-repeat;
+    right: 20px;
+    width: 10px;
+    height: 10px;
+    background: url('@/assets/images/close2.png') no-repeat;
     background-size: 100% 100%;
     cursor: pointer;
   }
   .title-box {
     width: 100%;
-    height: 45px;
+    height: 25px;
     position: relative;
     background: url('@/assets/images/line.png') no-repeat bottom left;
-    background-size:14px 6px;
+    background-size: 14px 6px;
+    margin-bottom: 5px;
     &::before {
       content: "";
       width: 280px;
@@ -79,8 +83,8 @@
       background-image: linear-gradient(to right, rgba(0, 191, 252, 0.35) 0, rgba(0, 191, 252, 0) 100%);
       display: block;
       position: absolute;
-      left: 90px;
-      bottom: 15px;
+      left: 16px;
+      bottom: 2.5px;
     }
   }
   .gradient-text {
@@ -88,11 +92,12 @@
   }
   .icon1, .icon2, .icon3, .icon4 {
     position: absolute;
-    top: 10px;
-    left: 10px;
-    width: 12px;
-    height: 12px;
+    top: 5px;
+    left: 5px;
+    width: 6px;
+    height: 6px;
     background: url('@/assets/images/inputIcon1.png') no-repeat;
+    background-size: 100% 100%;
   }
   .icon2 {
     left: unset;

src/components/Map/mapData.ts

@@ -854,5 +854,15 @@ export const pointDetailTemplate = {
     description: '描述',
     longitude: '经度',
     latitude: '纬度'
+  },
+  'forestFireWarn': {
+    name: '地址',
+    time1: '热点上报时间',
+    data2: '反馈类型',
+    time2: '反馈时间',
+    data1: '亮温强度',
+    longitude: '经度',
+    latitude: '纬度',
+    address: '详细地址'
   }
 };

src/router/routes.ts

@@ -107,7 +107,6 @@ export const constantRoutes: Array<RouteRecordRaw> = [
       noCache: true
     }
   },
-  ,
   {
     path: "/rainfallMonitoringView",
     name: "RainfallMonitoringView",

src/views/disasterRiskMonitor/forestFireWarn.vue

@@ -4,7 +4,6 @@
       <Map
         ref="mapRef"
         active-map="satellite"
-        :event-details="eventDetails"
         @onLoadCompleted="initData"
       />
       <div class="legend-box">
@@ -109,7 +108,6 @@
 </template>
 
 <script lang="ts" setup name="forestFireWarn">
-import { onMounted, reactive, ref } from "vue";
 let mapRef = ref();
 const queryParams = reactive({
   type: "1",
@@ -119,8 +117,6 @@ let dateState = reactive({
   nowDate: [],
   selectDate: []
 });
-let pointType = ref([]);
-let eventDetails = ref({});
 let forestFireData = ref({
   total: 0,
   dataList: []
@@ -164,7 +160,8 @@ const initData = () => {
         latitude: "21.69", // 观珠镇纬度
         address: "281省道附近",
         data2: "林火",
-        dataType: "3"
+        iconType: "3",
+        detailType: "forestFireWarn",
       },
       {
         name: "茂名市-高州市-石鼓镇",
@@ -175,7 +172,8 @@ const initData = () => {
         latitude: "21.82", // 石鼓镇纬度
         address: "高州市石鼓镇石鼓公园",
         data2: "非林火",
-        dataType: "2"
+        iconType: "2",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-信宜市-池洞镇",
@@ -186,7 +184,8 @@ const initData = () => {
         latitude: "22.43", // 池洞镇纬度
         address: "广海路37号附近",
         data2: "林火",
-        dataType: "3"
+        iconType: "3",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-茂南区-袂花镇",
@@ -197,7 +196,8 @@ const initData = () => {
         latitude: "21.58", // 袂花镇纬度
         address: "袂花镇茂名市第六中学",
         data2: "已灭林火",
-        dataType: "4"
+        iconType: "4",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-电白区-麻岗镇",
@@ -208,7 +208,8 @@ const initData = () => {
         latitude: "21.53", // 麻岗镇纬度
         address: "麻岗镇温泉中路",
         data2: "已灭林火",
-        dataType: "4"
+        iconType: "4",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-高州市-谢鸡镇",
@@ -219,7 +220,8 @@ const initData = () => {
         latitude: "21.92", // 谢鸡镇纬度
         address: "谢鸡镇府前路1号",
         data2: "未反馈",
-        dataType: "1"
+        iconType: "1",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-信宜市-丁堡镇",
@@ -230,7 +232,8 @@ const initData = () => {
         latitude: "22.30", // 丁堡镇纬度
         address: "丁堡旧街1号",
         data2: "已灭林火",
-        dataType: "4"
+        iconType: "4",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-茂南区-金塘镇",
@@ -241,7 +244,8 @@ const initData = () => {
         latitude: "21.75", // 金塘镇纬度
         address: "人民二路2号",
         data2: "非林火",
-        dataType: "3"
+        iconType: "3",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-电白区-林头镇",
@@ -252,7 +256,8 @@ const initData = () => {
         latitude: "21.66", // 林头镇纬度
         address: "林头镇s281西街和北街交叉口",
         data2: "非林火",
-        dataType: "3"
+        iconType: "3",
+        detailType: "forestFireWarn"
       },
       {
         name: "茂名市-茂南区-羊角镇",
@@ -263,19 +268,20 @@ const initData = () => {
         latitude: "21.67", // 羊角镇纬度
         address: "羊正街12号附近",
         data2: "已灭林火",
-        dataType: "4"
+        iconType: "4",
+        detailType: "forestFireWarn"
       }
     ]
   };
   data.dataList.forEach(item => {
     const icon =
-      item.dataType && !!iconList[item.dataType].image
-        ? iconList[item.dataType].image
+      item.iconType && !!iconList[item.iconType].image
+        ? iconList[item.iconType].image
         : "";
     item.icon = icon;
     item.image = icon;
     item.imageHover = icon;
-    item.size = iconList[item.dataType].size;
+    item.size = iconList[item.iconType].size;
     item.lnglat = [item.longitude, item.latitude];
   });
   forestFireData.value = data;