diff --git a/ruoyi-ui/src/App.vue b/ruoyi-ui/src/App.vue index 535fc08c..93f035b3 100644 --- a/ruoyi-ui/src/App.vue +++ b/ruoyi-ui/src/App.vue @@ -64,4 +64,9 @@ export default { font-family: "PangMenZhengDao-3"; src: url("/static/fonts/庞门正道标题体3.ttf"); } + +.amap-marker-label { + border: 0; + background-color: transparent; +} diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/home-Vector/Vector.svg b/ruoyi-ui/src/views/JiHeExpressway/images/home-Vector/Vector.svg new file mode 100644 index 00000000..e3158ed2 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/images/home-Vector/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active_title.svg b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active_title.svg new file mode 100644 index 00000000..f09c1e6b --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active_title.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault_title.svg b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault_title.svg new file mode 100644 index 00000000..9009a869 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault_title.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue new file mode 100644 index 00000000..6940b663 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue @@ -0,0 +1,96 @@ + + + + + + + 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 8aeb6151..12e76a5b 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 @@ -24,6 +24,8 @@ import { upperFirst } from "lodash"; */ const faultBg = require(`@screen/images/mapBg/fault.svg`); const normalBg = require(`@screen/images/mapBg/active.svg`); +const faultTitleBg = require(`@screen/images/mapBg/fault_title.svg`); +const normalTitleBg = require(`@screen/images/mapBg/active_title.svg`); /** * 聚合点 @@ -206,12 +208,37 @@ export class MarkerCluster { lnglat: { lat, lng }, } = markerData; const lngLatStr = `${lng}/${lat}`; - - if (lngLatMap[lngLatStr]) { - context.marker.setContent(getContent(lngLatMap[lngLatStr])); + const data = lngLatMap[lngLatStr]; + if (data) { + const state = getState(data); + let nowTitleBg, nowTitleColor; + if (state) { + nowTitleBg = normalTitleBg; + nowTitleColor = "#FFDB82"; + } else { + nowTitleBg = faultTitleBg; + nowTitleColor = "#FF7575"; + } + const item = data[0]; + const { stakeMark } = item.extData; + const titleTemplate = window.showStakeText + ? `

${stakeMark}

` + : ""; context.marker.setAnchor("bottom-center"); + context.marker.setLabel({ + direction: "bottom", + // offset: new AMap.Pixel(10, 0), //设置文本标注偏移量 + content: titleTemplate, //设置文本标注内容 + }); + + context.marker.setContent(getContent(data)); + // if (window.showStakeText) context.marker.setAnchor("center"); + // else context.marker.setAnchor("bottom-center"); + const offset = new AMap.Pixel(0, 0); context.marker.setOffset(offset); @@ -278,32 +305,50 @@ export class MarkerCluster { this.markerCluster.setData(this.data); } + + setData() { + this.markerCluster.setData(this.data); + } } export function getContent(data) { // const faultBg = require(`@screen/images/mapBg/fault.svg`); // const normalBg = require(`@screen/images/mapBg/active.svg`); - const nowBg = getState(data) ? normalBg : faultBg; + const state = getState(data); + let nowBg, nowTitleBg, nowTitleColor; + if (state) { + nowBg = normalBg; + nowTitleBg = normalTitleBg; + nowTitleColor = "#FFDB82"; + } else { + nowBg = faultBg; + nowTitleBg = faultTitleBg; + nowTitleColor = "#FF7575"; + } + + const item = data[0]; + const { stakeMark } = item.extData; if (data.length === 1) { return ` -
- -
+
+ +
`; } else { const width = `${36 + `${data.length}`.length * 15}px`; @@ -319,6 +364,7 @@ export function getContent(data) { justify-content: center; align-items: center; padding-bottom: 9px; + align-self: center; "> ${data.length} diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue index 2e0435c8..54a0cfad 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue @@ -14,8 +14,9 @@
- - + + +
@@ -41,6 +42,7 @@ import RoadAndEvents from "./components/RoadAndEvents/index.vue"; import AMapContainer from "./components/AMapContainer/index.vue"; import HomeFilter from "./components/HomeFilter/index.vue"; import HomeFrame from "./components/HomeFrame/index.vue"; +import HomeVector from "./components/HomeVector/index.vue"; import Button from '@screen/components/Buttons/Button.vue'; // import InfoBoard from "./components/InfoBoard" @@ -56,6 +58,7 @@ export default { Button, HomeFilter, HomeFrame, + HomeVector, // InfoBoard }, data() { @@ -148,17 +151,11 @@ export default { gap: 0px; flex-direction: column; - .filter { - display: flex; - gap: 9px; + .item { padding-top: 15px; } - .Frame { - display: flex; - gap: 9px; - padding-top: 15px; - } + } .right { diff --git a/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js index cad7cfc3..0e405ccb 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js +++ b/ruoyi-ui/src/views/JiHeExpressway/utils/enum.js @@ -131,7 +131,7 @@ export const InfoWarningSource = { }, 7: { text: "气象监测器", - } + }, }; // 事件主类 warningType @@ -147,6 +147,7 @@ export const WarningType = { 9: "护栏碰撞", 10: "交通事故", 11: "车辆故障", + 99: "其他", }; export const WarningTypeList = Object.keys(WarningType).map((key) => { @@ -208,6 +209,9 @@ export const WarningSubclass = { "9-2": "只倾斜无碰撞", "9-3": "碰撞后倾斜", }, + 99: { + "99-1": "其他", + }, }; export const WarningSubclassList = Object.keys(WarningSubclass).reduce(