地图修改

src/views/home/index.vue

@@ -3,12 +3,20 @@
     <div id="mapContainer" style="width: 100%; height: 100%"></div>
     <t-dialog
       v-model:visible="state.visible"
-      :header="'详细信息' + '-' + dialogInfo.energyStationName"
+      :header="'详细信息'"
       :cancel-btn="null"
       :confirm-btn="null"
-      width="25%"
+      width="45%"
     >
-      <div class="dialogInfo-main" style="color: #333">
+      <t-base-table
+        size="small"
+        row-key="index"
+        bordered
+        :data="dialogList"
+        :columns="dialogColumns"
+      >
+      </t-base-table>
+      <!-- <div class="dialogInfo-main" style="color: #333">
         <p><label>站名：</label>{{ dialogInfo.energyStationName }}</p>
         <p><label>分区：</label>{{ dialogInfo.sysName }}</p>
         <p><label>阀门开度：</label>{{ dialogInfo.fmkd }}</p>
@@ -17,7 +25,7 @@
         <p><label>二次供压：</label>{{ dialogInfo.ecgsyl }}</p>
         <p><label>二次回压：</label>{{ dialogInfo.echsyl }}</p>
         <p><label>时间：</label>{{ formatTime(dialogInfo.dt) }}</p>
-      </div>
+      </div> -->
     </t-dialog>
   </div>
 </template>
@@ -650,23 +658,26 @@ const state = reactive({
   markersData: [],
   systemData: {},
   visible: false,
-  dialogInfo: {},
+  dialogList: [],
+  dialogColumns: [
+    { colKey: 'energyStationName', title: '站名', width: '120' },
+    { colKey: 'sysName', title: '系统' },
+    { colKey: 'ecgswd', title: '二次供温' },
+    { colKey: 'echswd', title: '二次回温' },
+    { colKey: 'ecgsyl', title: '二次供压' },
+    { colKey: 'echsyl', title: '二次回压' },
+    { colKey: 'fmkd', title: '阀门开度' },
+  ],
 });
-const { dialogInfo } = toRefs(state);
+const { dialogList, dialogColumns } = toRefs(state);
 onMounted(() => {
   initMap();
-  window.getInfo = (data: any) => {
-    //定义事件
+  getRealData();
+  window.getInfo = (data) => {
     testDemo(data);
   };
 });
-
-/**获取实时数据 */
-const getRealData = async () => {
-  const res = await getGroupingRunData(formData);
-  state.systemData = res.data;
-};
-
+/**初始化地图 */
 const initMap = () => {
   AMapLoader.reset();
   AMapLoader.load({
@@ -675,13 +686,12 @@ const initMap = () => {
     plugins: ['AMap.Marker', 'AMap.ControlBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
   }).then((AMap) => {
     var GMap = new AMap.Map('mapContainer', {
-      zoom: 17.6, //  地图显示的缩放级别
+      zoom: 18, //  地图显示的缩放级别
       viewMode: '3D',
       center: [103.263469, 36.730827], // 初始化地图中心点位置, //  地图中心点坐标 此处填【经度，纬度】
       // mapStyle: 'amap://styles/normal', //设置地图的显示样式
       resizeEnable: true, //  是否监控地图容器尺寸变化
       buildingAnimation: true, //建筑出现的动画
-      zooms: [14, 17.6],
     });
     GMap.addControl(
       new AMap.ControlBar({
@@ -694,77 +704,99 @@ const initMap = () => {
       })
     );
     state.map = GMap;
+    addMarkers();
     addPolylines();
-    addMarkers(); //添加点标记
   });
 };
 
+/**获取实时数据 */
+const getRealData = () => {
+  return new Promise((resolve, reject) => {
+    getGroupingRunData(formData).then((res) => {
+      state.systemData = res.data;
+      resolve(res.data);
+    });
+  });
+};
 /**添加标记 */
 const addMarkers = () => {
   getMarkers();
-  state.mTimer = setInterval(async () => {
-    // for (let j = 0; j < state.markersData.length; j++) {
-    //   state.markersData[j].setMap(null);
-    // }
-    getMarkers();
+  state.mTimer = setInterval(() => {
+    state.markersData.forEach((ele) => {
+      let markerItem = ele.De.label;
+      getGroupingRunData(formData).then((res) => {
+        const list = res.data;
+        let { eid, name } = markerItem.extData;
+        let infoWindowContent = `<div class='info-top'>${name}</div>`;
+        if (eid !== undefined) {
+          let itemsInfo = list[eid][0];
+          infoWindowContent += `
+            <div class='content'>
+              <div class='info-item'>
+                  二次供温：${itemsInfo.ecgswd}
+              </div>
+              <div class='info-item'>
+                  二次回温：${itemsInfo.echswd}
+              </div>
+              <div class='info-item'>
+                  时间：${formatTime(itemsInfo.dt)}
+              </div>
+              <div class='info-bottom' onclick='getInfo("${eid}")'>详细信息</div>
+              `;
+        }
+        ele.setLabel({
+          offset: new AMap.Pixel(30, 0), //设置文本标注偏移量
+          content: infoWindowContent, //设置文本标注内容
+          direction: 'top', //设置文本标注方位
+        });
+      });
+    });
   }, 30000);
 };
-const getMarkers = async () => {
-  await getRealData();
-  for (let i = 0; i < state.markers.length; i++) {
-    let element = state.markers[i];
+
+const getMarkers = () => {
+  let markersArr = [];
+  state.markers.forEach((element) => {
+    const { id, name } = element;
     const marker = new AMap.Marker({
       icon: 'http://demo-demo12.oss-cn-beijing.aliyuncs.com/NewImage/GLF.png',
       position: [element.position[0], element.position[1]],
       offset: new AMap.Pixel(-13, -30),
     });
-    // 站点标识
-    const id = element.id;
-    // 显示内容
-    var infoWindowContent = '';
-    if (typeof id != 'undefined') {
-      state.systemData[element.id].forEach((data, index) => {
-        let time = formatTime(data.dt, 'YYYY-MM-DD HH:mm');
-        infoWindowContent = `
-          <div class='content'>
-            <div class='info-top'>
-               ${element.name}
-            </div>
-            <div class='info-item'>
-                分区：${data.sysName}
-            </div>
-            <div class='info-item'>
-                时间：${time}
-            </div>
-            <div class='info-item'>
-                阀门开度：${data.fmkd}
-            </div>
-            <div class='info-bottom' onclick='getInfo("${id},${index}")'>详细信息</div>
-          </div>
-        `;
-      });
-    } else {
-      infoWindowContent = '';
-    }
+    var infoWindowContent = `<div class='info-top'>${name}</div>`;
+    if (id !== undefined) {
+      let itemobj = state.systemData[id][0];
 
+      infoWindowContent += `
+            <div class='content'>
+              <div class='info-item'>
+                  二次供温：${itemobj.ecgswd}
+              </div>
+              <div class='info-item'>
+                  二次回温：${itemobj.echswd}
+              </div>
+              <div class='info-item'>
+                  时间：${formatTime(itemobj.dt)}
+              </div>
+              <div class='info-bottom' onclick='getInfo("${id}")'>详细信息</div>
+              `;
+    }
     marker.setMap(state.map);
     // state.map.add(marker);
-    // state.map.setFitView();
+    // state.map.setFitView([marker]);
     marker.setLabel({
       offset: new AMap.Pixel(30, 0), //设置文本标注偏移量
       content: infoWindowContent, //设置文本标注内容
       direction: 'top', //设置文本标注方位
+      extData: { eid: id, name: name },
     });
-    // 将marker存储到全局变量中
-    state.markersData.push(marker);
-  }
+    markersArr.push(marker);
+  });
+  state.markersData = markersArr;
 };
 const testDemo = (data) => {
-  let list = data.split(',');
-  const id = list[0];
-  const idx = list[1];
   state.visible = true;
-  state.dialogInfo = state.systemData[id][idx];
+  state.dialogList = state.systemData[data];
 };
 /**添加管道 */
 const addPolylines = () => {
@@ -811,7 +843,9 @@ onUnmounted(() => {
   font-weight: bold;
   line-height: 30px;
   padding: 0 10px;
-  margin-bottom: 8px;
+}
+.content {
+  margin-top: 8px;
 }
 .info-item {
   font-size: 12px;
@@ -826,11 +860,11 @@ onUnmounted(() => {
   cursor: pointer;
   text-decoration: underline;
 }
-.dialogInfo-main p {
+/* .dialogInfo-main p {
   line-height: 32px;
 }
 .dialogInfo-main p label {
   color: #666;
   margin-right: 10px;
-}
+} */
 </style>