地图提示修改

src/layouts/index.vue

@@ -66,7 +66,6 @@ const { push } = useRouter();
 const userStore = useUserStore();
 const isFullscreen = ref(false);
 const menuValue = computed(() => route.name);
-console.error(menuValue, 'menuValue');
 const userName = computed(() => userStore.userInfo.nickname || '');
 const changeHandler = (active: string) => {
   push({ name: active });

src/views/home/index.vue

@@ -1,25 +1,44 @@
 <template>
   <div class="home-container">
     <div id="mapContainer" style="width: 100%; height: 100%"></div>
+    <t-dialog
+      v-model:visible="state.visible"
+      :header="'详细信息' + '-' + dialogInfo.energyStationName"
+      :cancel-btn="null"
+      :confirm-btn="null"
+      width="25%"
+    >
+      <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>
+        <p><label>二次供温：</label>{{ dialogInfo.ecgswd }}</p>
+        <p><label>二次回温：</label>{{ dialogInfo.echswd }}</p>
+        <p><label>二次供压：</label>{{ dialogInfo.ecgsyl }}</p>
+        <p><label>二次回压：</label>{{ dialogInfo.echsyl }}</p>
+        <p><label>时间：</label>{{ formatTime(dialogInfo.dt) }}</p>
+      </div>
+    </t-dialog>
   </div>
 </template>
 <script setup lang="ts">
 import AMapLoader from '@amap/amap-jsapi-loader';
-import { ref, onMounted, reactive } from 'vue';
+import { ref, onMounted, reactive, onUnmounted, toRefs } from 'vue';
 import { getGroupingRunData } from '@/api/runData/index';
 import { useUserStore } from '@/store';
+import { formatTime } from '@/utils/date';
 const UserStore = useUserStore();
-
 const formData = reactive({
   operationName: UserStore.userInfo.username,
   deviceType: 'hr',
   sysName: '',
 });
+
 const state = reactive({
   map: null,
   markers: [
     {
-      id:'0017',
+      id: '0017',
       name: '良吉站',
       position: [103.259895, 36.741046],
     },
@@ -32,7 +51,7 @@ const state = reactive({
       position: [103.263171, 36.738818],
     },
     {
-      id:'0010',
+      id: '0010',
       name: '一号站',
       position: [103.261093, 36.738017],
     },
@@ -41,27 +60,27 @@ const state = reactive({
       position: [103.262666, 36.736043],
     },
     {
-      id:'0024',
+      id: '0024',
       name: '十号锅炉房',
       position: [103.259629, 36.737354],
     },
     {
-      id:'0020',
+      id: '0020',
       name: '二号站',
       position: [103.258883, 36.736649],
     },
     {
-      id:'0025',
+      id: '0025',
       name: '六号锅炉房',
       position: [103.258253, 36.735324],
     },
     {
-      id:'0021',
+      id: '0021',
       name: '八号站',
       position: [103.265382, 36.736052],
     },
     {
-      id:'0027',
+      id: '0027',
       name: '三号锅炉房',
       position: [103.261836, 36.733769],
     },
@@ -70,47 +89,47 @@ const state = reactive({
       position: [103.260856, 36.733824],
     },
     {
-      id:'0014',
+      id: '0014',
       name: '十一号站',
       position: [103.260617, 36.732225],
     },
     {
-      id:'0015',
+      id: '0015',
       name: '十五号站',
       position: [103.25851, 36.729362],
     },
     {
-      id:'0013',
+      id: '0013',
       name: '四号站',
       position: [103.263528, 36.730173],
     },
     {
-      id:'0022',
+      id: '0022',
       name: '蓝星锅炉房',
       position: [103.267519, 36.727559],
     },
     {
-      id:'0006',
+      id: '0006',
       name: '西太华3站',
       position: [103.268513, 36.726115],
     },
     {
-      id:'0005',
+      id: '0005',
       name: '西太华2站',
       position: [103.267139, 36.72566],
     },
     {
-      id:'0004',
+      id: '0004',
       name: '西太华1站',
       position: [103.267982, 36.723996],
     },
     {
-      id:'0019',
+      id: '0019',
       name: '华光广场站',
       position: [103.266893, 36.724245],
     },
     {
-      id:'0008',
+      id: '0008',
       name: '亚新东区',
       position: [103.266898, 36.723067],
     },
@@ -119,27 +138,27 @@ const state = reactive({
       position: [103.266013, 36.723226],
     },
     {
-      id:'0007',
+      id: '0007',
       name: '兴勇站',
       position: [103.265965, 36.721631],
     },
     {
-      id:'0009',
+      id: '0009',
       name: '兆烽站',
       position: [103.267177, 36.722396],
     },
     {
-      id:'0002',
+      id: '0002',
       name: '金邦站',
       position: [103.268727, 36.723063],
     },
     {
-      id:'0001',
+      id: '0001',
       name: '博瑞站',
       position: [103.270846, 36.724112],
     },
     {
-      id:'0003',
+      id: '0003',
       name: '世纪城站',
       position: [103.271597, 36.722516],
     },
@@ -627,15 +646,28 @@ const state = reactive({
       ],
     },
   ],
-  systemData:{}
+  mTimer: null,
+  markersData: [],
+  systemData: {},
+  visible: false,
+  dialogInfo: {},
 });
+const { dialogInfo } = toRefs(state);
 onMounted(() => {
-    initMap();
-    getTableList();
+  initMap();
+  window.getInfo = (data) => {
+    testDemo(data);
+  };
 });
-const getTableList = async () => {
-  const res = await getGroupingRunData(formData);
-  state.systemData=res.data
+
+/**获取实时数据 */
+const getRealData = () => {
+  return new Promise((resolve, reject) => {
+    getGroupingRunData(formData).then((res) => {
+      state.systemData = res.data;
+      resolve(res.data);
+    });
+  });
 };
 const initMap = () => {
   AMapLoader.reset();
@@ -647,7 +679,7 @@ const initMap = () => {
     var GMap = new AMap.Map('mapContainer', {
       zoom: 18, //  地图显示的缩放级别
       viewMode: '3D',
-      center: [103.263469,36.730827], // 初始化地图中心点位置, //  地图中心点坐标 此处填【经度，纬度】
+      center: [103.263469, 36.730827], // 初始化地图中心点位置, //  地图中心点坐标 此处填【经度，纬度】
       // mapStyle: 'amap://styles/normal', //设置地图的显示样式
       resizeEnable: true, //  是否监控地图容器尺寸变化
       buildingAnimation: true, //建筑出现的动画
@@ -663,67 +695,128 @@ const initMap = () => {
       })
     );
     state.map = GMap;
-    
-      // 项目点显示
-    state.markers.forEach((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),
-      });
-      marker.setMap(GMap);
-      // 站点标识
-      const id=element.id;
-      // 显示内容
-      var contentData='<div class="info">站名：' + element.name + '</div><br/><hr/>';
-      var content='<div class="info">' + element.name + '</div><br/>';
-      if(typeof(id)!='undefined'){
-        state.systemData[id].forEach(data => {
-          contentData+='<div class="info">分区：' + data.sysName 
-          + '</div><br/><div class="info">时间：' + data.dt
-          + '</div><br/><div class="info">阀门开度：' + data.fmkd 
-          + '</div></br><div class="info">二次供温：' + data.ecgswd 
-          + '</div><br/><div class="info">二次回温：' + data.echswd 
-          + '</div><br/><div class="info">二次供压：' + data.ecgsyl 
-          + '</div><br/><div class="info">二次回压：' + data.echsyl + '</div><br/><hr/>';
+    addMarkers(); //添加点标记
+    addPolylines();
+  });
+};
 
-          content+='<div class="info">分区：' + data.sysName 
-          + '</div><br/><div class="info">时间：' + data.dt
-          + '</div><br/><div class="info">阀门开度：' + data.fmkd+ '</div><br/><hr/>';
-          
-        });
-        var markerInfoWindow = new AMap.InfoWindow({
-          anchor: 'top-left',
-          content: contentData,
-        });
-        marker.on('mouseover', function (e) {
-          markerInfoWindow.open(GMap, [element.position[0], element.position[1]]);
-        });
-        marker.on('mouseout', function (e) {
-          markerInfoWindow.close();
-        });
-      }
-      marker.setLabel({
-        offset: new AMap.Pixel(0, 30), //设置文本标注偏移量
-        content: content, //设置文本标注内容
-        direction: 'right', //设置文本标注方位
-      });
+/**添加标记 */
+const addMarkers = () => {
+  getMarkers();
+  state.mTimer = setInterval(() => {
+    // for (let j = 0; j < state.markersData.length; j++) {
+    //   state.markersData[j].setMap(null);
+    // }
+    getMarkers();
+  }, 60000);
+};
+const getMarkers = async () => {
+  for (let i = 0; i < state.markers.length; i++) {
+    let element = state.markers[i];
+    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;
+    // 显示内容
+    await getRealData();
+    var infoWindowContent = '';
+    // var infoContent = '';
+    if (typeof id != 'undefined') {
+      state.systemData[id].forEach((data, index) => {
+        let time = formatTime(data.dt, 'YYYY-MM-DD HH:mm');
+        // infoContent +=
+        //   '<div class="info-item">站名：' +
+        //   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-item">二次供温：' +
+        //   data.ecgswd +
+        //   '</div><div class="info-item">二次回温：' +
+        //   data.echswd +
+        //   '</div><div class="info-item">二次供压：' +
+        //   data.ecgsyl +
+        //   '</div><div class="info-item">二次回压：' +
+        //   data.echsyl +
+        //   '</div><br/>';
+        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>
+        `;
+      });
+    }
 
+    // var markerInfoWindow = new AMap.InfoWindow({
+    //   anchor: 'top-left',
+    //   content: infoContent,
+    // });
 
-    // 管道显示
-    state.polylines.forEach((element) => {
-      // console.log(element)
-      const polyline = new AMap.Polyline({
-        path: element.polyline,
-        strokeColor: element.color,
-        strokeOpacity: 1,
-        strokeWeight: 4,
-      });
-      polyline.setMap(GMap);
+    marker.setMap(state.map);
+    marker.setLabel({
+      offset: new AMap.Pixel(30, 0), //设置文本标注偏移量
+      content: infoWindowContent, //设置文本标注内容
+      direction: 'top', //设置文本标注方位
+    });
+    // marker.on('mouseover', function (e) {
+    //   markerInfoWindow.open(state.map, [
+    //     element.position[0],
+    //     element.position[1],
+    //   ]);
+    // });
+    // marker.on('mouseout', function (e) {
+    //   markerInfoWindow.close();
+    // });
+    // 将marker存储到全局变量中
+    state.markersData.push(marker);
+  }
+};
+const testDemo = (data) => {
+  let list = data.split(',');
+  console.error(list, 'list');
+  const id = list[0];
+  const idx = list[1];
+  state.visible = true;
+  state.dialogInfo = state.systemData[id][idx];
+  console.error(state.dialogInfo, 'info');
+};
+/**添加管道 */
+const addPolylines = () => {
+  // 管道显示
+  state.polylines.forEach((element) => {
+    const polyline = new AMap.Polyline({
+      path: element.polyline,
+      strokeColor: element.color,
+      strokeOpacity: 1,
+      strokeWeight: 4,
     });
+    polyline.setMap(state.map);
   });
 };
+
+onUnmounted(() => {
+  clearInterval(state.mTimer);
+  state.mTimer = null;
+});
 </script>
 <style>
 .home-container {
@@ -736,8 +829,41 @@ const initMap = () => {
   width: 30px;
   height: 30px;
 }
-.amap-marker-label{
-  border: 2;
-  background-color: #C0D9D9;
+.amap-marker-label {
+  border: solid 1px silver;
+  background-color: #fff;
+  padding: 0;
+}
+.info-top {
+  position: relative;
+  background: none repeat scroll 0 0 #f9f9f9;
+  border-bottom: 1px solid #ccc;
+  font-weight: 600;
+  color: #333333;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 30px;
+  padding: 0 10px;
+  margin-bottom: 8px;
+}
+.info-item {
+  font-size: 12px;
+  padding: 0px 8px;
+  line-height: 22px;
+}
+.info-bottom {
+  padding: 5px 8px 10px 8px;
+  color: #0052d9;
+  font-weight: 700;
+  text-align: center;
+  cursor: pointer;
+  text-decoration: underline;
+}
+.dialogInfo-main p {
+  line-height: 32px;
+}
+.dialogInfo-main p label {
+  color: #666;
+  margin-right: 10px;
 }
 </style>