From e56d4259d3dfbd861a1428378930353ea797ce2a Mon Sep 17 00:00:00 2001
From: qingzhengli <1204552371@qq.com>
Date: Mon, 11 Mar 2024 11:22:35 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=20=E5=A2=9E=E5=8A=A0enum=E7=B1=BB?=
=?UTF-8?q?=E5=9E=8B=20=20&=20map=E4=B8=AD=E6=A1=A9=E5=8F=B7=E6=96=87?=
=?UTF-8?q?=E5=AD=97=E6=98=BE=E7=A4=BA=E9=9A=90=E8=97=8F=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ruoyi-ui/src/App.vue | 5 +
.../images/home-Vector/Vector.svg | 3 +
.../images/mapBg/active_title.svg | 20 ++++
.../images/mapBg/fault_title.svg | 20 ++++
.../Home/components/HomeVector/index.vue | 96 +++++++++++++++++++
.../components/RoadAndEvents/utils/map.js | 90 ++++++++++++-----
.../views/JiHeExpressway/pages/Home/index.vue | 17 ++--
.../src/views/JiHeExpressway/utils/enum.js | 6 +-
8 files changed, 224 insertions(+), 33 deletions(-)
create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/home-Vector/Vector.svg
create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active_title.svg
create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault_title.svg
create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue
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;
+}
</style>
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 @@
+<svg width="22" height="28" viewBox="0 0 22 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M20.2028 0.382867H2.03965C1.20334 0.382867 0.526367 1.0602 0.526367 1.8964V15.5182C0.526367 16.355 1.2034 17.0318 2.03965 17.0318H9.60758V27.627H12.6347V17.0318H20.2027C21.0392 17.0318 21.7163 16.355 21.7163 15.5183V1.8964C21.7163 1.06023 21.0393 0.382812 20.2027 0.382812L20.2028 0.382867ZM5.06641 14.0047H3.55365V9.46395H5.06647V14.0047H5.06641ZM9.60725 14.0047H8.09438V9.46395H9.60725V14.0047ZM14.1482 14.0047H12.6348V9.46395H14.1483V14.0047H14.1482ZM18.6892 14.0047H17.1755V9.46395H18.6892V14.0047ZM20.2028 6.43713H2.03965V1.8964H20.2027V6.43713H20.2028ZM8.09438 3.40927H3.55368V4.92321H8.09441L8.09438 3.40927Z" fill="white"/>
+</svg>
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 @@
+<svg width="74" height="22" viewBox="0 0 74 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Rectangle 3852">
+<g filter="url(#filter0_i_809_62)">
+<rect width="74" height="22" rx="3" fill="#1E1904"/>
+</g>
+<rect x="0.5" y="0.5" width="73" height="21" rx="2.5" stroke="#BEA019"/>
+</g>
+<defs>
+<filter id="filter0_i_809_62" x="0" y="0" width="74" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2.4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.745098 0 0 0 0 0.627451 0 0 0 0 0.0980392 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_809_62"/>
+</filter>
+</defs>
+</svg>
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 @@
+<svg width="74" height="22" viewBox="0 0 74 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Rectangle 3851">
+<g filter="url(#filter0_i_809_38)">
+<rect width="74" height="22" rx="3" fill="#330303"/>
+</g>
+<rect x="0.5" y="0.5" width="73" height="21" rx="2.5" stroke="#D20000"/>
+</g>
+<defs>
+<filter id="filter0_i_809_38" x="0" y="0" width="74" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="2.4"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.823529 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_809_38"/>
+</filter>
+</defs>
+</svg>
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 @@
+<template>
+ <div class="HomeVector">
+ <Button :class="['btn', { 'btn-active': activeIcon }]" slot="reference" @click.native="handleClick('Vector')">
+ <img src="@screen/images/home-Vector/Vector.svg" />
+ </Button>
+ </div>
+</template>
+
+<script>
+import Button from "@screen/components/Buttons/Button.vue";
+import Form from "@screen/components/FormConfig";
+import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
+import { merge, cloneDeep } from "lodash";
+import { markerClusterIns } from "@screen/pages/Home/components/RoadAndEvents/utils/map.js"
+export default {
+ name: "HomeVector",
+ components: {
+ Button,
+ Form,
+ },
+ data() {
+ return {
+ activeIcon: null,
+ };
+ },
+ methods: {
+ handleClick(type) {
+ this.activeIcon = this.activeIcon === type ? null : type;
+ if (this.activeIcon) window.showStakeText = true;
+ else window.showStakeText = false;
+ markerClusterIns.setData();
+ },
+ filterEnd(data) {
+ this.activeIcon = null;
+ // this.filterData = data;
+ this.$parent.$refs.RoadAndEventsRef?.setFilterData?.(data);
+ },
+ },
+};
+</script>
+
+<style lang="scss">
+div.el-popper.global-input-search-popover {
+ background: rgba(6, 66, 88, 0.8);
+ border: 1px solid rgba(42, 217, 253, 0.6);
+ position: relative;
+ padding-top: 36px;
+ transform: translateY(24px);
+ // margin-top: 6vh;
+
+ .body {
+ .title {
+ background: linear-gradient(90deg,
+ #237e9b 0%,
+ rgba(23, 145, 184, 0) 100%);
+ padding: 3px 9px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ }
+
+ .close {
+ padding: 3px 9px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: fit-content;
+ }
+
+ }
+}
+</style>
+
+<style lang="scss" scoped>
+.image {
+ width: 50vw;
+ height: 65vh;
+}
+
+.HomeVector {
+ .btn {
+ padding: 9px;
+ background: linear-gradient(180deg, #152e3c 0%, #163a45 100%);
+ border-radius: 4px;
+ overflow: hidden;
+ height: unset;
+ border: 1px solid rgba(40, 144, 167, 1);
+ }
+
+ .btn-active {
+ background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
+ }
+}
+</style>
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
+ ? `<p style="background-image: url('${nowTitleBg}');background-size: 100% 100%;background-repeat: no-repeat;padding: 5px;
+ font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 14px; line-height: 16px; color: ${nowTitleColor};
+ "> ${stakeMark} </p>`
+ : "";
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 `
- <div style="
- background-image: url(${nowBg});
- background-size: 100% 100%;
- background-repeat: no-repeat;
- width: 51px;
- height: 51px;
- display: flex;
- justify-content: center;
- ">
- <img style="
- min-width: 24px;
- min-height: 24px;
- width: 24px;
- height: 24px;
- margin-top: 8.1px;
- " src='${getIcon(data[0])}'
- >
- </div>
+ <div style="
+ background-image: url(${nowBg});
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ width: 51px;
+ height: 51px;
+ display: flex;
+ align-self: center;
+ justify-content: center;
+ ">
+ <img style="
+ min-width: 24px;
+ min-height: 24px;
+ width: 24px;
+ height: 24px;
+ margin-top: 8.1px;
+ " src='${getIcon(item)}'
+ >
+ </div>
`;
} 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}
</div>
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 @@
<!-- 右侧 -->
<div class="content-r">
<div class="home-icons">
- <HomeFilter class="filter" />
- <HomeFrame class="Frame" />
+ <HomeFilter class="item" />
+ <HomeFrame class="item" />
+ <HomeVector class="item" />
</div>
<ConditionStatistics class="right card-menu" />
</div>
@@ -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(