Merge branch 'develop' of http://39.106.31.193:9211/mengff/jihe-hs into develop

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>

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>

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>

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>

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>

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>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue

@@ -1,13 +1,9 @@
 <template>
   <div class="Home">
-    <AMapContainer
-      ref="AMapContainerRef"
-      @update:isGisCompleted="
-        (data) => {
-          this.isGisCompleted = data;
-        }
-      "
-    />
+    <AMapContainer ref="AMapContainerRef" @update:isGisCompleted="(data) => {
+        this.isGisCompleted = data;
+      }
+      " />
     <section class="content">
       <!-- 左侧 -->
       <div class="content-l">
@@ -15,18 +11,15 @@
         <FocusedMonitoring class="card-menu" />
 
         <!-- 下 -->
-        <RoadAndEvents
-          ref="RoadAndEventsRef"
-          :isGisCompleted="isGisCompleted"
-          class="content-l-b card-menu"
-        />
+        <RoadAndEvents ref="RoadAndEventsRef" :isGisCompleted="isGisCompleted" class="content-l-b card-menu" />
       </div>
 
       <!-- 右侧 -->
       <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>
@@ -35,11 +28,7 @@
     <footer class="footer card-menu">
       <div class="footer-title">
         <span>济菏高速缩略图</span>
-        <i
-          class="el-icon-s-fold"
-          style="color: #2ad9fd; transform: rotate(-90deg)"
-          @click.stop="handleShrink"
-        />
+        <i class="el-icon-s-fold" style="color: #2ad9fd; transform: rotate(-90deg)" @click.stop="handleShrink" />
       </div>
       <div class="footer-content">
         <Thumbnail />
@@ -56,7 +45,8 @@ 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 Button from "@screen/components/Buttons/Button.vue";
+import HomeVector from "./components/HomeVector/index.vue";
+import Button from '@screen/components/Buttons/Button.vue';
 
 // import InfoBoard from "./components/InfoBoard"
 
@@ -71,6 +61,7 @@ export default {
     Button,
     HomeFilter,
     HomeFrame,
+    HomeVector,
     // InfoBoard
   },
   data() {
@@ -131,7 +122,7 @@ export default {
     height: min-content;
     pointer-events: none;
 
-    > div {
+    >div {
       pointer-events: auto;
     }
 
@@ -145,7 +136,7 @@ export default {
       overflow: hidden;
       height: 100%;
 
-      > div {
+      >div {
         pointer-events: all;
         flex: 1;
       }
@@ -166,17 +157,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 {
@@ -194,7 +179,7 @@ export default {
     will-change: height;
     bottom: 0;
 
-    > div {
+    >div {
       pointer-events: all;
     }
 

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(