点位信息样式

src/components/Map/index.vue

@@ -71,7 +71,7 @@ let AMap, map, scale;
 // 鼠标绘制工具
 const drawTool = useDrawTool();
 // 初始化地图
-const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, getMarkers, getScale, showInfo } = useAMap({
+const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, getMarkers, getScale, showInfo, hideInfo } = useAMap({
   key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
   pitch: mapState.isThreeDimensional ? 45 : 0,
@@ -110,20 +110,31 @@ const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, get
         const data2 = res.data.list;
         let content = document.createElement('div');
         content.className = 'point-info';
+        let content2 = '';
+        content2 += '<div class="title-box"><div class="gradient-text">多点位信息</div></div>';
+        content2 += '<div class="icon1"></div>';
+        content2 += '<div class="icon2"></div>';
+        content2 += '<div class="icon3"></div>';
+        content2 += '<div class="icon4"></div>';
+        content.innerHTML = content2;
         let table = document.createElement('div');
-        table.className = 'point-item';
-        table.innerHTML = '<div>主题</div><div>名称</div>';
-        content.appendChild(table);
+        table.className = 'table';
+        table.innerHTML = '<div class="point-item"><div class="td1">主题</div><div class="td1">名称</div></div>';
         data2.forEach((item) => {
           item.longitude = data.longitude;
           item.latitude = data.latitude;
           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.innerHTML = '<div class="td2">' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div class="td2">' + item.name + '</div>';
           div.addEventListener('click', () => handlePointDetails(item));
-          content.appendChild(div);
+          table.appendChild(div);
         });
-        showInfo(content, [data.longitude, data.latitude]);
+        content.appendChild(table);
+        let closeBtn = document.createElement('div');
+        closeBtn.className = 'close';
+        closeBtn.onclick = hideInfo;
+        content.appendChild(closeBtn);
+        showInfo(content, [data.longitude, data.latitude], true);
       });
     } else {
       handlePointDetails(data);
@@ -148,23 +159,88 @@ const handlePointDetails = (data) => {
     '14': getChemicalcompanyDetails,
     '15': getUAVDetails
   };
+  let titleList = {
+    '1': '专家信息'
+  };
   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 content = document.createElement('div');
-      content.className = 'point-info';
-      for (let key in res.rows[0]) {
-        let keyLabel = !!pointDetailTemplate[data.dataType][key] ? pointDetailTemplate[data.dataType][key] : key;
-        const div = document.createElement('div');
-        div.className = 'point-item';
-        div.innerHTML = '<div>' + keyLabel + '</div><div>' + res.rows[0][key] + '</div>';
-        content.appendChild(div);
-      }
-      showInfo(content, [data.longitude, data.latitude]);
+      let div = document.createElement('div');
+      div.className = 'point-info';
+      let content = '';
+      content += '<div class="title-box"><div class="gradient-text">' + title + '</div></div>';
+      content += '<div class="icon1"></div>';
+      content += '<div class="icon2"></div>';
+      content += '<div class="icon3"></div>';
+      content += '<div class="icon4"></div>';
+      content += '<div class="table">';
+      const newData = filterTd(res.rows[0], 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>';
+        } 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>';
+      div.innerHTML = content;
+      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 content = '';
+  let i = 0;
+  for (let key in obj) {
+    let keyLabel = pointDetailTemplate[dataType][key];
+    if (!!keyLabel) {
+      if (i === 2) {
+        i = 0;
+      }
+      if (obj[key].length > 6) {
+        if (i === 0) {
+          data.push({ type: 'longText', data: [{ label: keyLabel, value: obj[key] }] });
+          i = 0;
+        } else {
+          tempData = { type: 'longText', data: [{ label: keyLabel, value: obj[key] }] };
+        }
+      } else {
+        if (i === 0) {
+          data.push({ type: 'shortText', data: [{ label: keyLabel, value: obj[key] }] });
+        } else {
+          data[data.length - 1].data.push({ label: keyLabel, value: obj[key] });
+        }
+        i++;
+        if (!!tempData && JSON.stringify(tempData) !== '{}') {
+          data.push(tempData);
+          tempData = {};
+          i = 0;
+        }
+      }
+    }
+  }
+  if (!!tempData && JSON.stringify(tempData) !== '{}') {
+    data.push(tempData);
+  }
+  return data;
+};
 // 监听地图类型变化
 watch(
   () => props.activeMap,

src/components/Map/map.scss

@@ -11,14 +11,114 @@ $vh_base: 2520;
 }
 
 :deep(.point-info) {
-  width: 200px;
+  border: 4px solid #2a81fc;
+  padding: 5px 15px 15px;
+  width: 570px;
+  max-height: 320px;
+  overflow-y: auto;
   font-size: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #1c294c;
+  color: #d5dde3;
+  position: relative;
+  .table {
+    border-top: 1px solid #3d66ae;
+    border-right: 1px solid #3d66ae;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    .tr {
+      width: 100%;
+      display: flex;
+    }
+  }
   .point-item {
     display: flex;
     width: 100%;
-    div {
-      flex: 1;
-      text-align: center;
+    .td1 {
+      width: 50%;
+    }
+    .td2 {
+      width: 50%;
+    }
+  }
+  .point-item2 {
+    display: flex;
+    width: 100%;
+    .td1 {
+      width: 25%;
+    }
+    .td2 {
+      width: 75%;
     }
   }
+  .td1 {
+    background-color: #1a326e;
+    padding: 5px 10px;
+    color: #c6d1e6;
+    border-bottom: 1px solid #3d66ae;
+    border-left: 1px solid #3d66ae;
+  }
+  .td2 {
+    padding: 5px 10px;
+    border-bottom: 1px solid #3d66ae;
+    border-left: 1px solid #3d66ae;
+  }
+  .close {
+    position: absolute;
+    top: 2px;
+    right: 20px;
+    width: 10px;
+    height: 10px;
+    background: url('@/assets/images/close.png') no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+  }
+  .title-box {
+    width: 550px;
+    height: 40px;
+    position: relative;
+    background: url('@/assets/images/line.png') no-repeat;
+    background-size: 35px 15px;
+    background-position: bottom left;
+    &::before {
+      content: "";
+      width: 515px;
+      height: 2px;
+      background-image: linear-gradient(to right, rgba(0, 191, 252, 0.35) 0, rgba(0, 191, 252, 0) 100%);
+      display: block;
+      position: absolute;
+      left: 38px;
+      bottom: 6.5px;
+    }
+  }
+  .gradient-text {
+    font-size: 24px;
+  }
+  .icon1, .icon2, .icon3, .icon4 {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 12px;
+    height: 12px;
+    background: url('@/assets/images/inputIcon1.png') no-repeat;
+  }
+  .icon2 {
+    left: unset;
+    right: 2px;
+    transform: rotate(90deg);
+  }
+  .icon3 {
+    left: unset;
+    top: unset;
+    right: 2px;
+    bottom: 2px;
+    transform: rotate(180deg);
+  }
+  .icon4 {
+    top: unset;
+    bottom: 2px;
+    transform: rotate(-90deg);
+  }
 }

src/hooks/AMap/useAMap.ts

@@ -132,11 +132,13 @@ export function useAMap(options) {
   };
 
   // 显示信息框
-  const showInfo = (content, position) => {
+  let infoWindow;
+  const showInfo = (content, position, isCustom) => {
+    hideInfo();
     // 实例化InfoWindow
-    const infoWindow = new AMap.InfoWindow({
+    infoWindow = new AMap.InfoWindow({
       // 完全自定义
-      // isCustom: true,
+      isCustom: isCustom,
       offset: new AMap.Pixel(0, -20) // 信息窗体的偏移量
       // 可以根据需要设置其他InfoWindow的属性
     });
@@ -146,6 +148,12 @@ export function useAMap(options) {
     infoWindow.open(map, lnglat);
   };
 
+  const hideInfo = () => {
+    if (!!infoWindow) {
+      infoWindow.close();
+    }
+  };
+
   onMounted(() => {
     initMap(options);
   });
@@ -158,6 +166,7 @@ export function useAMap(options) {
     clearMarker,
     getMarkers,
     getScale,
-    showInfo
+    showInfo,
+    hideInfo
   };
 }