空间分析 详情

src/api/globalMap/index.ts

@@ -87,4 +87,3 @@ export const getVideoInfo = (params) => {
     data: params
   });
 };
-

src/api/globalMap/spatialAnalysis.ts

@@ -0,0 +1,79 @@
+import request from '@/utils/request';
+
+// 专家详情
+export const getEmergencyExpertDetails = (id: string) => {
+  return request({
+    url: '/api/gateway/v2/get_point_info_emergency_expert',
+    method: 'post',
+    data: {
+      query: {
+        id: id
+      }
+    }
+  });
+};
+
+// 救援物资详情
+export const getRescueMateriaDetails = (id: string) => {
+  return request({
+    url: '/api/gateway/v2/get_point_info_rescue_materia',
+    method: 'post',
+    data: {
+      query: {
+        id: id
+      }
+    }
+  });
+};
+
+// 避难场所详情
+export const getEmergencyShelterTypeDetails = (id: string) => {
+  return request({
+    url: '/api/gateway/v2/get_point_info_emergency_shelter',
+    method: 'post',
+    data: {
+      query: {
+        id: id
+      }
+    }
+  });
+};
+
+// 易涝点详情
+export const getWaterloggedRoadsDetails = (id: string) => {
+  return request({
+    url: '/api/gateway/v2/get_point_info_waterlogged_roads',
+    method: 'post',
+    data: {
+      query: {
+        id: id
+      }
+    }
+  });
+};
+
+// 学校详情
+export const getSchoolDetails = (id: string) => {
+  return request({
+    url: '/api/gateway/v2/get_point_info_school',
+    method: 'post',
+    data: {
+      query: {
+        id: id
+      }
+    }
+  });
+};
+
+// 医院详情
+export const getHospitalDetails = (id: string) => {
+  return request({
+    url: '/api/gateway/v2/get_point_info_hospital',
+    method: 'post',
+    data: {
+      query: {
+        id: id
+      }
+    }
+  });
+};

src/components/Map/index.vue

@@ -26,6 +26,14 @@ import { useRuler } from '@/hooks/AMap/useRuler';
 import { getPointInfoList } from '@/api/globalMap';
 import { getDictLabel } from '@/utils/dict';
 import { PointType } from '@/api/globalMap/type';
+import {
+  getEmergencyExpertDetails,
+  getEmergencyShelterTypeDetails,
+  getHospitalDetails,
+  getRescueMateriaDetails,
+  getSchoolDetails,
+  getWaterloggedRoadsDetails
+} from '@/api/globalMap/spatialAnalysis';
 
 interface Props {
   activeMap: string;
@@ -119,27 +127,42 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
         latitude: data.latitude.toString()
       }).then((res) => {
         const data2 = res.data.list;
-        let content = '<div class="point-info">';
+        let content = document.createElement('div');
+        content.className = 'point-info';
+        let table = document.createElement('div');
+        table.className = 'point-item';
+        table.innerHTML = '<div>主题</div><div>名称</div>';
+        content.appendChild(table);
         data2.forEach((item) => {
-          content += '<div class="point-item">' + '<div>主题：</div><div>' + getDictLabel(point_type.value, item.dataType.toString()) + '</div></div>';
-          content += '<div class="point-item">' + '<div>名称：</div><div>' + item.name + '</div></div>';
+          const div = document.createElement('div');
+          div.className = 'point-item';
+          div.innerHTML = '<div>' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div>' + item.name + '</div>';
+          div.addEventListener('click', () => handlePointDetails(item));
+          content.appendChild(div);
         });
-        content += '</div>';
         showInfo(content, [data.longitude, data.latitude]);
       });
     } else {
-      getPointInfoList({
-        option: data.dataType.toString(),
-        longitude: data.longitude.toString(),
-        latitude: data.latitude.toString()
-      }).then((res) => {
-        const content =
-          '<div class="point-info">' + '<div class="point-item">' + '<div>名称：</div><div>' + res.data.list[0].name + '</div>' + '</div>' + '</div>';
-        showInfo(content, [data.longitude, data.latitude]);
-      });
+      handlePointDetails(data);
     }
   }
 });
+const handlePointDetails = (data) => {
+  let methodList = {
+    '1': getEmergencyExpertDetails,
+    '2': getRescueMateriaDetails,
+    '3': getEmergencyShelterTypeDetails,
+    '4': getWaterloggedRoadsDetails,
+    '5': getSchoolDetails,
+    '6': getHospitalDetails
+  };
+  let method = methodList[data.dataType];
+  if (!method) return;
+  method(data.id).then((res) => {
+    const data = res.rows[0];
+    showInfo(content, [data.longitude, data.latitude]);
+  });
+};
 // 监听地图类型变化
 watch(
   () => props.activeMap,

src/components/Map/map.scss

@@ -4,5 +4,10 @@
   font-size: 16px;
   .point-item {
     display: flex;
+    width: 100%;
+    div {
+      flex: 1;
+      text-align: center;
+    }
   }
 }

src/hooks/AMap/useAMap.ts

@@ -90,7 +90,13 @@ export function useAMap(options) {
     const _renderMarker = function (context) {
       const content =
         '<div style="display: flex;flex-direction: column;align-items: center;justify-content: center">' +
-        '<div style="background: url(' + context.data[0].image + ') no-repeat; width: '+ context.data[0].size[0] +'px;height: '+ context.data[0].size[1] +'px;cursor: pointer; background-size: cover"></div>' +
+        '<div style="background: url(' +
+        context.data[0].image +
+        ') no-repeat; width: ' +
+        context.data[0].size[0] +
+        'px;height: ' +
+        context.data[0].size[1] +
+        'px;cursor: pointer; background-size: cover"></div>' +
         // '<div style="font-size: 36px;white-space: nowrap">'+ context.data[0].name +'</div>' +
         '</div>';
       const offset = new AMap.Pixel(-9, -9);

src/views/globalMap/LeftMenu.vue

@@ -292,7 +292,17 @@ onMounted(() => {
         position: relative;
         font-size: 40px;
         font-weight: 500;
-        //padding-top: 45px;
+        margin-bottom: 3px;
+        position: relative;
+        &::after {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          content: '';
+          width: 100%;
+          height: 3px;
+          background-color: rgba(142, 189, 241, 0.3);
+        }
         .icon1 {
           background-image: url('@/assets/images/menu/icon1.png');
         }

src/views/globalMap/RightMenu/LayerAnalysis.vue

@@ -1,12 +1,7 @@
 <template>
   <div class="gradient-text title">图层分析</div>
   <div class="box">
-    <div
-      v-for="(item, index) in dataList"
-      :key="index"
-      :class="item.checked ? 'box-item box-item-active' : 'box-item'"
-      @click="handleClick(item)"
-    >
+    <div v-for="(item, index) in dataList" :key="index" :class="item.checked ? 'box-item box-item-active' : 'box-item'" @click="handleClick(item)">
       {{ item.name + '(' + item.value + ')' }}
     </div>
   </div>
@@ -25,8 +20,12 @@ import { PointType } from '@/api/globalMap/type';
 import {
   getCountPointInfo,
   getCountPointInfoAreaList,
-  getEmergencyExpertType, getEmergencyShelterType, getHospitalType,
-  getRescueMateriaType, getSchoolType, getWaterloggedRoadsType
+  getEmergencyExpertType,
+  getEmergencyShelterType,
+  getHospitalType,
+  getRescueMateriaType,
+  getSchoolType,
+  getWaterloggedRoadsType
 } from '@/api/globalMap/layerAnalysis';
 import { option4, option5 } from './echartOptions';
 import BigNumber from 'bignumber.js';
@@ -156,12 +155,12 @@ const handleClick = (item) => {
     cursor: pointer;
     margin-right: 20px;
     &:hover {
-      background-color: #00AAFF;
+      background-color: #00aaff;
       color: #fff;
     }
   }
   .box-item-active {
-    background-color: #00AAFF;
+    background-color: #00aaff;
     color: #fff;
   }
 }

src/views/globalMap/RightMenu/pointDetailTemplate.ts

@@ -0,0 +1,13 @@
+export const pointDetailTemplate = {
+  '1': {
+    name: '姓名',
+    area: '所属区域',
+    company: '单位',
+    official: '职位',
+    phone: '联系电话',
+    type: '专家类型'
+  },
+  '2': {
+
+  }
+};

src/views/globalMap/index.vue

@@ -183,7 +183,6 @@ const undo = () => {
 let selectedScope = reactive({});
 // 空间分析数据
 const analysisSpatial = (data, len?: string) => {
-  debugger
   // 已选中的范围
   if (selectedScope[data.id]) {
     delete selectedScope[data.id];
@@ -206,7 +205,6 @@ const analysisSpatial = (data, len?: string) => {
       location.push(itemLocation);
     }
   }
-  debugger
   rightMenuRef.value.setAnalysisData(location);
 };
 // 取消显示