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

9 months ago · f205470181
8 changed files with 234 additions and 55 deletions
--- 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>
--- a/ruoyi-ui/src/views/JiHeExpressway/images/home-Vector/Vector.svg
+++ 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>
--- a/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/active_title.svg
+++ 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>
--- a/ruoyi-ui/src/views/JiHeExpressway/images/mapBg/fault_title.svg
+++ 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>
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeVector/index.vue
+++ 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>
--- 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,12 +305,29 @@ 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="
@ -293,6 +337,7 @@ export function getContent(data) {
        width: 51px;
        height: 51px;
        display: flex;
+        align-self: center;
        justify-content: center;
      ">
        <img style="
@ -301,7 +346,7 @@ export function getContent(data) {
            width: 24px;
            height: 24px;
            margin-top: 8.1px;
-        " src='${getIcon(data[0])}'
+          " src='${getIcon(item)}'
        >
      </div>
  `;
@ -319,6 +364,7 @@ export function getContent(data) {
      justify-content: center;
      align-items: center;
      padding-bottom: 9px;
+      align-self: center;
    ">
      ${data.length}
    </div>
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
@ -1,13 +1,9 @@
 <template>
  <div class="Home">
-    <AMapContainer
-      ref="AMapContainerRef"
-      @update: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;
    }

--- 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(