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

2022-09-07 11:52:35 +08:00 · 2022-09-07 11:52:35 +08:00 · 2fd3a71175
parent fe0bb897ab
commit 2fd3a71175
3 changed files with 120 additions and 94 deletions
--- a/src/api/app.js
+++ b/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
+  })
+}
--- a/src/components/Amap/components/bigscLocation/indexV_3.vue
+++ b/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(
-            `<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>`
-          );
+          content.push(this.handlerMarkerInfoWindow(this.projectList[i], projectUrl));
          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>
--- a/src/views/bigScreen/v3/index.vue
+++ b/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;