修改地图

src/views/home/index.vue

@@ -655,20 +655,18 @@ const state = reactive({
 const { dialogInfo } = toRefs(state);
 onMounted(() => {
   initMap();
-  window.getInfo = (data) => {
+  window.getInfo = (data: any) => {
+    //定义事件
     testDemo(data);
   };
 });
 
 /**获取实时数据 */
-const getRealData = () => {
-  return new Promise((resolve, reject) => {
-    getGroupingRunData(formData).then((res) => {
-      state.systemData = res.data;
-      resolve(res.data);
-    });
-  });
+const getRealData = async () => {
+  const res = await getGroupingRunData(formData);
+  state.systemData = res.data;
 };
+
 const initMap = () => {
   AMapLoader.reset();
   AMapLoader.load({
@@ -677,12 +675,13 @@ const initMap = () => {
     plugins: ['AMap.Marker', 'AMap.ControlBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
   }).then((AMap) => {
     var GMap = new AMap.Map('mapContainer', {
-      zoom: 18, //  地图显示的缩放级别
+      zoom: 17.6, //  地图显示的缩放级别
       viewMode: '3D',
       center: [103.263469, 36.730827], // 初始化地图中心点位置, //  地图中心点坐标 此处填【经度，纬度】
       // mapStyle: 'amap://styles/normal', //设置地图的显示样式
       resizeEnable: true, //  是否监控地图容器尺寸变化
       buildingAnimation: true, //建筑出现的动画
+      zooms: [14, 17.6],
     });
     GMap.addControl(
       new AMap.ControlBar({
@@ -695,22 +694,23 @@ const initMap = () => {
       })
     );
     state.map = GMap;
-    addMarkers(); //添加点标记
     addPolylines();
+    addMarkers(); //添加点标记
   });
 };
 
 /**添加标记 */
 const addMarkers = () => {
   getMarkers();
-  state.mTimer = setInterval(() => {
+  state.mTimer = setInterval(async () => {
     // for (let j = 0; j < state.markersData.length; j++) {
     //   state.markersData[j].setMap(null);
     // }
     getMarkers();
-  }, 60000);
+  }, 30000);
 };
 const getMarkers = async () => {
+  await getRealData();
   for (let i = 0; i < state.markers.length; i++) {
     let element = state.markers[i];
     const marker = new AMap.Marker({
@@ -721,31 +721,10 @@ const getMarkers = async () => {
     // 站点标识
     const id = element.id;
     // 显示内容
-    await getRealData();
     var infoWindowContent = '';
-    // var infoContent = '';
     if (typeof id != 'undefined') {
-      state.systemData[id].forEach((data, index) => {
+      state.systemData[element.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'>
@@ -764,40 +743,28 @@ const getMarkers = async () => {
           </div>
         `;
       });
+    } else {
+      infoWindowContent = '';
     }
 
-    // var markerInfoWindow = new AMap.InfoWindow({
-    //   anchor: 'top-left',
-    //   content: infoContent,
-    // });
-
     marker.setMap(state.map);
+    // state.map.add(marker);
+    // state.map.setFitView();
     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 = () => {