提交： 大屏 项目列表查询 接口更改，地图选择项目 是选中项目标记点 居中 15级缩放 弹窗信息展示。

src/api/app.js

@@ -70,3 +70,13 @@ export function appDeviceStatistics(query) {
     params: query
   })
 }
+
+
+// 监控大屏 项目列表
+export function bigScreenProjectList(query) {
+  return request({
+    url: '/sys/device/projecList',
+    method: 'get',
+    params: query
+  })
+}

src/components/Amap/components/bigscLocation/indexV_3.vue

@@ -7,6 +7,7 @@
 import AMap from "AMap";
 import markerIcon from "@/assets/images/big/marker_noalarm.png";
 import markerAlarmIcon from "@/assets/images/big/marker_alarm.png";
+import markerSelect from "@/assets/images/big/marker_select.png";
 import infoTopIcon from "@/assets/images/big/map_top.png";
 import infoBotIcon from "@/assets/images/big/map_bottom.png";
 import infoAlarmIcon from "@/assets/images/big/map_alarm.png";
@@ -37,8 +38,8 @@ export default {
     },
     selectProjectId: {
       type: [String, Number],
-      default: null
+      default: null,
-    }
+    },
   },
   data() {
     return {
@@ -50,6 +51,7 @@ export default {
       },
       theme: "",
       infoWindow: null,
+      markerList: [],
     };
   },
   mounted() {
@@ -63,13 +65,113 @@ export default {
           this.aMap.clearMap();
         }
         this.createMarker();
-        // console.log("map_projectList: ", list);
+      },
-        // this.textFu();
+      deep: true,
+    },
+    selectProjectId: {
+      handler: function (val, oldVal) {
+        if (this.projectList && this.projectList.length > 0) {
+          this.projectList.forEach((pro, idx) => {
+            if (pro && pro.projectId === this.selectProjectId) {
+              this.handlerSetMarker(pro, idx, markerSelect, true);
+            }
+            if (oldVal !== null && oldVal !== undefined) {
+              if (pro && pro.projectId === oldVal) {
+                this.handlerSetMarker( pro, idx, pro.tenantIndexVo["unProcessed"] > 0
+                  ? markerAlarmIcon
+                  : markerIcon
+                );
+              }
+            }
+          });
+        }
+        if (val === '' || val === null) {
+          this.closeInfoWindow()
+          this.overview()
+        }
       },
       deep: true,
     },
   },
   methods: {
+    // handlerMarkerInfoWindow
+    handlerMarkerInfoWindow(project, url) {
+      return `<div class="info-block">
+              <span class="info-title">报警提醒</span>
+              <img name="closeImg" class="info-close" onclick="window['amapObj'].clearInfoWindow()" src="${infoCloseIcon}"/>
+              <img class="info-top" src="${infoTopIcon}" />
+              <div class="info-wrap">
+                <div class="info-item"><span class="info-lable">项目：</span>
+                  <span class="info-value info-a"
+                    onclick="window['_this'].$router.push({ path:'${url}', query: { 'projectId': '${
+              project.projectId
+            }', 'tempType': 'details' } })"
+                  >${project.projectName}</span></div>
+                <div class="info-item"><span class="info-lable">地址：</span>
+                  <marquee style="margin: 0; width:calc(100% - 80px);" behavior="alternate" scrollamount="1" width="calc(100% - 40px)">
+                    <span class="info-value">${project.projectAddress}</span>
+                  </marquee>
+                </div>
+                <div class="info-item"><span class="info-lable">报警总数：</span>
+                  <span class="info-value" style="color: #ff3739;font-size: 24px;font-weight: 500;">${
+                    project.tenantIndexVo?.unProcessed
+                  }</span></div>
+                <div class="alarm-icon-block">
+                  <img class="alarm-icon" src="${infoAlarmIcon}"/>
+                </div>
+                <div class="list-device">
+                  ${this.resultDeviceListStr(
+                    project.deviceAlarmSimpleVoList || []
+                  )}
+                 </div>
+              </div>
+              <img class="info-bottom" src="${infoBotIcon}">
+            </div>`
+    },
+    /**
+     * 单个 marker 设置更替样式；
+     * @param {*} project 点 对象
+     * @param {*} idx  点坐标
+     * @param {*} icon 更新点图标
+     * @param {*} isSelect 是否选中
+     */
+    handlerSetMarker(project, idx, icon, isSelect) {
+      if (this.markerList && this.markerList.length > idx) {
+        // 创建 新的 点状态
+        var newMarker = null;
+        var projectUrl =
+          this.$store.getters.tenantId === 0
+            ? "/project/project"
+            : "/project_tenant/project_tenant";
+        if (project.projectLat && project.projectLng) {
+          newMarker = new AMap.Marker({
+            position: [project.projectLng, project.projectLat],
+            icon: icon,
+            offset: new AMap.Pixel(-13, -30),
+          });
+          var content = [];
+          window["amapObj"] = this.aMap;
+          window["_this"] = this;
+          content.push(this.handlerMarkerInfoWindow(project, projectUrl));
+          newMarker.content = _this.createInfoWindow(content.join("<br/>"));
+          newMarker.on("click", _this.markerClick);
+        }
+        // 刪除指定点坐标
+        this.aMap.remove(this.markerList[idx]);
+        this.markerList[idx] = newMarker;
+        this.aMap.add(newMarker);
+        if(isSelect) {
+          let position = new AMap.LngLat(project.projectLng, project.projectLat);
+          this.aMap.setZoom(15);
+          this.aMap.setCenter(position);
+          if (!this.infoWindow) {
+            this.createInfoWindowO();
+          }
+          this.infoWindow.setContent(newMarker.content);
+          this.infoWindow.open(this.aMap, position);
+        }
+      }
+    },
     overview() {
       if (this.aMap) {
         this.aMap.setFitView();
@@ -106,47 +208,6 @@ export default {
       this.infoWindow.setContent(e.target.content);
       this.infoWindow.open(this.aMap, e.target.getPosition());
     },
-    // 开发测试方法
-    textFu() {
-      let marker = new AMap.Marker({
-        position: [116.4224009776628, 39.93482727239599],
-        icon: markerIcon,
-        offset: new AMap.Pixel(-13, -30),
-      });
-      var content = [];
-      content.push(
-        `<div class="info-block">
-          <span class="info-title">报警提醒</span>
-          <img class="info-close" src="${infoCloseIcon}"/>
-          <img class="info-top" src="${infoTopIcon}" />
-          <div class="info-wrap">
-            <div class="info-item"><span class="info-lable">项目：</span><span class="info-value">智慧园区项目</span></div>
-            <div class="info-item"><span class="info-lable">地址：</span><span class="info-value">智慧园区项目</span></div>
-            <div class="info-item"><span class="info-lable">报警总数：</span><span class="info-value">智慧园区项目</span></div>
-            <div class="alarm-icon-block">
-              <img class="alarm-icon" src="${infoAlarmIcon}"/>
-            </div>
-            <div class="list-device">
-              <div class="item-device"><img class="d-img" src="${infoDeviceIcon}" /> <span class="device-info">设备名称设备名称设备名称设备名</span> </div>
-              <div class="item-device"><img class="d-img" src="${infoDeviceIcon}" /> <span class="device-info">设备名称设备名称设备名称设备名</span></div>
-              <div class="item-device"><img class="d-img" src="${infoDeviceIcon}" /> <span class="device-info">设备名称设备名称设备名称设备名</span></div>
-              <div class="item-device"><img class="d-img" src="${infoDeviceIcon}" /> <span class="device-info">设备名称设备名称设备名称设备名</span></div>
-            </div>
-          </div>
-          <img class="info-bottom" src="${infoBotIcon}">
-        </div>`
-      );
-
-      const contentStr = this.createInfoWindow(content.join("<br/>"));
-      if (!this.infoWindow) {
-        this.createInfoWindowO();
-      }
-      this.infoWindow.setContent(contentStr);
-      this.infoWindow.open(this.aMap, [116.4224009776628, 39.93482727239599]);
-
-      this.aMap.add(marker);
-      this.aMap.setFitView();
-    },
     // 创建设备定位的点
     createMarker() {
       var markerList = [];
@@ -162,70 +223,26 @@ export default {
               this.projectList[i].projectLng,
               this.projectList[i].projectLat,
             ],
-            // map: this.aMap,
             icon:
               this.projectList[i].tenantIndexVo["unProcessed"] > 0
                 ? markerAlarmIcon
                 : markerIcon,
-            // icon:
-            //   new AMap.Icon({
-            //     image: this.projectList[i].tenantIndexVo["unProcessed"] > 0
-            //         ? markerAlarmIcon
-            //         : markerIcon,
-            //     size: new AMap.Size(80, 80),
-            //     imageSize: new AMap.Size(52, 52),
-            //   }),
-
             offset: new AMap.Pixel(-13, -30),
           });
           var content = [];
           window["amapObj"] = this.aMap;
           window["_this"] = this;
-          content.push(
+          content.push(this.handlerMarkerInfoWindow(this.projectList[i], projectUrl));
-            `<div class="info-block">
-              <span class="info-title">报警提醒</span>
-              <img name="closeImg" class="info-close" onclick="window['amapObj'].clearInfoWindow()" src="${infoCloseIcon}"/>
-              <img class="info-top" src="${infoTopIcon}" />
-              <div class="info-wrap">
-                <div class="info-item"><span class="info-lable">项目：</span>
-                  <span class="info-value info-a"
-                    onclick="window['_this'].$router.push({ path:'${projectUrl}', query: { 'projectId': '${
-              this.projectList[i].projectId
-            }', 'tempType': 'details' } })"
-                  >${this.projectList[i].projectName}</span></div>
-                <div class="info-item"><span class="info-lable">地址：</span>
-                  <marquee style="margin: 0; width:calc(100% - 80px);" behavior="alternate" scrollamount="1" width="calc(100% - 40px)">
-                    <span class="info-value">${
-                      this.projectList[i].projectAddress
-                    }</span>
-                  </marquee>
-                </div>
-                <div class="info-item"><span class="info-lable">报警总数：</span>
-                  <span class="info-value" style="color: #ff3739;font-size: 24px;font-weight: 500;">${
-                    this.projectList[i].tenantIndexVo?.unProcessed
-                  }</span></div>
-                <div class="alarm-icon-block">
-                  <img class="alarm-icon" src="${infoAlarmIcon}"/>
-                </div>
-                <div class="list-device">
-                  ${this.resultDeviceListStr(
-                    this.projectList[i].deviceAlarmSimpleVoList || []
-                  )}
-                 </div>
-              </div>
-              <img class="info-bottom" src="${infoBotIcon}">
-            </div>`
-          );
           marker.content = _this.createInfoWindow(content.join("<br/>"));
           marker.on("click", _this.markerClick);
           markerList.push(marker);
         }
       }
+      this.markerList = [...markerList];
       this.aMap.add(markerList);
       this.aMap.setFitView();
     },
     handlerMapDevice(e) {
-      console.log("handler-map-device-click", e);
       this.$router.push({
         name: "Device",
         params: { deviceId: e.deviceId, tempType: "details" },
@@ -478,5 +495,4 @@ export default {
     background-color: #00f7f800;
   }
 }
-
 </style>

src/views/bigScreen/v3/index.vue

@@ -141,7 +141,7 @@ import Cookies from "js-cookie";
 import EProjectCensusTemp from "./profile/EProjectCensusTemp";
 import NotificationAlarm from './profile/NotificationAlarm';
 
-import { getWarningAnalysis, homeCount, appProjectList } from "@/api/app";
+import { getWarningAnalysis, homeCount, bigScreenProjectList } from "@/api/app";
 import {
   getEnergySpaceCensusList,
   getEnergyCensusList,
@@ -337,7 +337,7 @@ export default {
     // 查询项目列表
     getProjectList() {
       if (this.$store.getters.userType !== "PERSONAL") {
-        appProjectList({
+        bigScreenProjectList({
           regionalismId: this.regionalismId,
         }).then((response) => {
           this.projectList = response.data;