From 2fd3a7117539a4c8a58e20e0fe8810ce813decfa Mon Sep 17 00:00:00 2001 From: 23688nl <329261568@qq.com> Date: Wed, 7 Sep 2022 11:52:35 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=EF=BC=9A=20=E5=A4=A7?= =?UTF-8?q?=E5=B1=8F=20=E9=A1=B9=E7=9B=AE=E5=88=97=E8=A1=A8=E6=9F=A5?= =?UTF-8?q?=E8=AF=A2=20=E6=8E=A5=E5=8F=A3=E6=9B=B4=E6=94=B9=EF=BC=8C?= =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E9=80=89=E6=8B=A9=E9=A1=B9=E7=9B=AE=20?= =?UTF-8?q?=E6=98=AF=E9=80=89=E4=B8=AD=E9=A1=B9=E7=9B=AE=E6=A0=87=E8=AE=B0?= =?UTF-8?q?=E7=82=B9=20=E5=B1=85=E4=B8=AD=2015=E7=BA=A7=E7=BC=A9=E6=94=BE?= =?UTF-8?q?=20=E5=BC=B9=E7=AA=97=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/app.js | 10 + .../components/bigscLocation/indexV_3.vue | 200 ++++++++++-------- src/views/bigScreen/v3/index.vue | 4 +- 3 files changed, 120 insertions(+), 94 deletions(-) diff --git a/src/api/app.js b/src/api/app.js index ba91961f..f2bc3e1a 100644 --- 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 + }) +} diff --git a/src/components/Amap/components/bigscLocation/indexV_3.vue b/src/components/Amap/components/bigscLocation/indexV_3.vue index e621ba2d..84fcb43b 100644 --- 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 `
+ 报警提醒 + + +
+
项目： + ${project.projectName}
+
地址： + + ${project.projectAddress} + +
+
报警总数： + ${ + project.tenantIndexVo?.unProcessed + }
+
+ +
+
+ ${this.resultDeviceListStr( + project.deviceAlarmSimpleVoList || [] + )} +
+
+ +
` + }, + /** + * 单个 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("
")); + 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( - `
- 报警提醒 - - -
-
项目：智慧园区项目
-
地址：智慧园区项目
-
报警总数：智慧园区项目
-
- -
-
-
设备名称设备名称设备名称设备名
-
设备名称设备名称设备名称设备名
-
设备名称设备名称设备名称设备名
-
设备名称设备名称设备名称设备名
-
-
- -
` - ); - - const contentStr = this.createInfoWindow(content.join("
")); - 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( - `
- 报警提醒 - - -
-
项目： - ${this.projectList[i].projectName}
-
地址： - - ${ - this.projectList[i].projectAddress - } - -
-
报警总数： - ${ - this.projectList[i].tenantIndexVo?.unProcessed - }
-
- -
-
- ${this.resultDeviceListStr( - this.projectList[i].deviceAlarmSimpleVoList || [] - )} -
-
- -
` - ); + content.push(this.handlerMarkerInfoWindow(this.projectList[i], projectUrl)); marker.content = _this.createInfoWindow(content.join("
")); 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; } } - diff --git a/src/views/bigScreen/v3/index.vue b/src/views/bigScreen/v3/index.vue index b30486ef..28a60f63 100644 --- 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;