From b985855dc106dc40852836774321fe9b1d97c97e Mon Sep 17 00:00:00 2001 From: qingzhengli <1204552371@qq.com> Date: Wed, 28 Feb 2024 18:17:02 +0800 Subject: [PATCH] =?UTF-8?q?feat=20=20canvas=E6=A0=87=E6=B3=A8=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RoadAndEvents/utils/buttonEvent.js | 10 -- .../components/RoadAndEvents/utils/map.js | 67 ++++++++++++- .../pages/Home/components/Thumbnail/index.vue | 96 ++++++++++++++++++- ruoyi-ui/vue.config.js | 4 +- 4 files changed, 156 insertions(+), 21 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js index 7e74de6d..8ac6233d 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js @@ -10,8 +10,6 @@ import { debounce } from "lodash"; import Vue from "vue"; import { markerClusterIns, getContent } from "./map"; -const graphInstance = Vue.prototype.graphInstance; - const cameraIcon = { // 球机 "00": require("@screen/images/deviceType/ball_active.svg"), @@ -287,19 +285,11 @@ function lngLatMapHandle(markers, cb) { } function addDataPreHandle(markers) { - // console.log(markers, graphInstance, "addData"); - const cb = (lngLatStr, markerData) => { if (lngLatMap[lngLatStr]) !lngLatMap[lngLatStr].includes(markerData) && lngLatMap[lngLatStr].push(markerData); else lngLatMap[lngLatStr] = [markerData]; - // console.log( - // getContent(lngLatMap[lngLatStr]), - // lngLatMap[lngLatStr], - // lngLatStr, - // "marker div" - // ); }; lngLatMapHandle(markers, cb); } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js index fad6ccbc..37d578ae 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js @@ -21,6 +21,8 @@ import { lngLatMap } from "./buttonEvent"; * @param {Function} markerFun * @returns */ +const faultBg = require(`@screen/images/mapBg/fault.svg`); +const normalBg = require(`@screen/images/mapBg/active.svg`); /** * 聚合点 @@ -43,6 +45,63 @@ export class MarkerCluster { async addData(data) { this.infoWindow?.close?.(); + const graphInstance = window.graphInstance; + console.log(data, "xxxxx"); + data?.forEach((markerData, index) => { + const lnglat = markerData.lnglat; + if (lnglat) { + const getLatAndLng = () => { + if (Array.isArray(lnglat)) return { lng: lnglat[0], lat: lnglat[1] }; + else return lnglat; + }; + const { lat, lng } = getLatAndLng(); + const lngLatStr = `${lng}/${lat}`; + const data = lngLatMap[lngLatStr]; + const nowBg = getState(data) ? normalBg : faultBg; + const extData = data[0].extData; + const { item: eventItem } = data[0].config; + if (eventItem.id.match("./事件专题")) { + let { stakeMark, lang } = extData; + const distance = + (Number( + stakeMark + .replace(/\.\d+/, "") + .replace("+", ".") + .replace(/[Kk]/, "") + ) - + 54.394) * + window.canvasRatio + + window.canvasWidth * 0.0755; //K54+394 开始到K208+979计算的比例尺 + + const node = {}; + if (data.length === 1) { + node.shape = "singleNode-html"; + node.data = { + nowBg, + src: `${getIcon(data[0])}`, + extData, + }; + } else { + node.shape = "multiNode-html"; + node.data = { + nowBg, + // width: `${36 + `${data.length}`.length * 15}px`, + length: data.length, + extData, + }; + } + graphInstance.addNode({ + x: distance, + y: 60, + width: 20, + height: 20, + ...node, + zIndex: 1, + id: stakeMark, + }); + } + } + }); if (!data) return; if (!Array.isArray(data)) data = [data]; @@ -248,6 +307,8 @@ export class MarkerCluster { const findIndex = this.data.findIndex( (removeData) => removeData === item ); + const { stakeMark } = item.extData; + window.graphInstance.removeNode(stakeMark); if (findIndex > -1) this.data.splice(findIndex, 1); }); @@ -257,8 +318,8 @@ export class MarkerCluster { } export function getContent(data) { - const faultBg = require(`@screen/images/mapBg/fault.svg`); - const normalBg = require(`@screen/images/mapBg/active.svg`); + // const faultBg = require(`@screen/images/mapBg/fault.svg`); + // const normalBg = require(`@screen/images/mapBg/active.svg`); const nowBg = getState(data) ? normalBg : faultBg; if (data.length === 1) { return ` @@ -323,14 +384,12 @@ function getIcon({ config, extData }) { } function getState(data) { - console.log(data, Array.isArray(data), "getState"); if (Array.isArray(data)) { return data.every((item) => getStateSingle(item)); } else return getStateSingle(data); } function getStateSingle({ config, extData }) { - console.log(config, "getStateSingle"); return typeof config?.stateCallback === "function" ? config.stateCallback?.() : extData.deviceState == 1; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue index 92ae1831..563afea7 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Thumbnail/index.vue @@ -5,15 +5,41 @@