From 554fd5a73d97adcd3647462eb5a7c677c9d36b74 Mon Sep 17 00:00:00 2001
From: Joe <1712833832@qq.com>
Date: Tue, 9 Jan 2024 10:53:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=83=8C=E6=99=AF=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Decorations/BackgroundClip.vue | 48 ++++++++++
 .../components/Decorations/bg-1.vue           | 32 +++++++
 .../components/Decorations/bg-2.vue           | 92 +++++++++++++++++++
 .../components/ConditionStatistics/index.vue  | 25 +++--
 .../components/FocusedMonitoring/index.vue    | 22 +++--
 .../Home/components/RoadAndEvents/index.vue   | 12 ++-
 6 files changed, 212 insertions(+), 19 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/components/Decorations/BackgroundClip.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/components/Decorations/bg-2.vue

diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Decorations/BackgroundClip.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Decorations/BackgroundClip.vue
new file mode 100644
index 00000000..34f383c5
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Decorations/BackgroundClip.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class='BackgroundClip' :style="{ '--clip-path': clipPath, '--border-color': borderColor, '--bg-color': bgColor }">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BackgroundClip',
+  props: {
+    clipPath: {
+      type: String,
+      default: null
+    },
+    borderColor: {
+      type: String,
+      default: null
+    },
+    bgColor: {
+      type: String,
+      default: null
+    },
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.BackgroundClip {
+  clip-path: var(--clip-path);
+  position: relative;
+  background: var(--border-color);
+  color: #fff;
+
+  &::before {
+    content: "";
+    position: absolute;
+    clip-path: var(--clip-path);
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: calc(100% - 3px);
+    height: calc(100% - 3px);
+    background: var(--bg-color);
+    pointer-events: none;
+    z-index: -1;
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Decorations/bg-1.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Decorations/bg-1.vue
index e69de29b..95f6b692 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/components/Decorations/bg-1.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Decorations/bg-1.vue
@@ -0,0 +1,32 @@
+<template>
+  <BackgroundClip class='BG-01' :clipPath="getClipPath" bgColor="linear-gradient(180deg, #152E3C 0%, #163A45 100%)"
+    borderColor="linear-gradient(180deg, rgba(40, 144, 167, 1), rgba(40, 144, 167, 0.38), rgba(40, 144, 167, 1))">
+    <slot />
+  </BackgroundClip>
+</template>
+
+<script>
+import BackgroundClip from "./BackgroundClip.vue"
+
+export default {
+  name: 'BG-01',
+  components: {
+    BackgroundClip
+  },
+  props: {
+    width: {
+      type: String,
+      default: "18px"
+    }
+  },
+  computed: {
+    getClipPath() {
+      return `polygon(${this.width} 0%, calc(100% - ${this.width}) 0%, 100% ${this.width}, 100% calc(100% - ${this.width}), calc(100% - ${this.width}) 100%, ${this.width} 100%, 0% calc(100% - ${this.width}), 0% ${this.width})`
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.BG-01 {}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Decorations/bg-2.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Decorations/bg-2.vue
new file mode 100644
index 00000000..b5f06766
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/components/Decorations/bg-2.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class='BG-02' :style="{ '--width': width, '--lang-width': langWidth }">
+    <BackgroundClip ref="BackgroundClipRef" class="bg" :clipPath="getClipPath"
+      bgColor="linear-gradient(180deg, #152E3C 0%, #163A45 100%)"
+      borderColor="linear-gradient(180deg, rgba(40, 144, 167, 1), rgba(40, 144, 167, 0.38), rgba(40, 144, 167, 1))">
+      <slot />
+    </BackgroundClip>
+    <div class="decoration">
+      <span v-for="i in whileLength" :key="i" :style="getSize(whileLength - i + 1)" />
+    </div>
+  </div>
+</template>
+
+<script>
+import BackgroundClip from "./BackgroundClip.vue"
+
+export default {
+  name: 'BG-02',
+  components: {
+    BackgroundClip
+  },
+  props: {
+    width: {
+      type: String,
+      default: "15px"
+    },
+    langWidth: {
+      type: String,
+      default: "150px"
+    },
+  },
+  data() {
+    return {
+      whileLength: 3
+
+    }
+  },
+  computed: {
+    getClipPath() {
+      return `polygon(calc(100% - ${this.langWidth} - ${this.width} * 2) 0, calc(100% - ${this.langWidth}) calc(${this.width} * 1.5), calc(100% - ${this.width} * 1.4) calc(${this.width} * 1.5), 100% calc(${this.width} * 3), 100% calc(100% - ${this.width}), calc(100% - ${this.width}) 100%, ${this.width} 100%, 0 calc(100% - ${this.width}), 0 ${this.width}, ${this.width} 0)`
+    }
+  },
+  methods: {
+    getSize: (function () {
+      let top = 0;
+
+      return function (i) {
+        const base = 7.2;
+        const size = i * base;
+        if (i !== this.whileLength) {
+          top += Math.ceil(((i + 1) * base - size) / 2) + 1
+        }
+
+        try {
+          return { width: `${size}px`, height: `${size}px`, marginTop: `${top}px`, backgroundColor: `rgba(50, 179, 187, ${i / this.whileLength})` }
+        } catch (error) { }
+        finally {
+          if (i === 1) top = 0;
+        }
+      }
+    })()
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.BG-02 {
+  position: relative;
+
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .decoration {
+    position: absolute;
+    right: 0;
+    top: calc(var(--width) / 5);
+    width: calc(var(--lang-width) + 8.1px);
+    height: calc(var(--width) * 1.5);
+    display: flex;
+    // gap: 0px;
+    // pointer-events: none;
+    // align-items: center;
+
+    >span {
+      display: block;
+      clip-path: polygon(0 25%, 45% 25%, 100% 75%, 55% 75%);
+    }
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/ConditionStatistics/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/ConditionStatistics/index.vue
index d6e69118..36e17ca3 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/ConditionStatistics/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/ConditionStatistics/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class='ConditionStatistics'>
+  <Bg2 class='ConditionStatistics'>
     <div class="statistics-header">
       <div class="title"></div>
       <img class="icon-right" src="@screen/images/icon/icon_right.png" />
@@ -89,7 +89,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </Bg2>
 </template>
 
 <script>
@@ -98,9 +98,13 @@ import * as echarts from "echarts";
 import carStatistics from "./js/carStatistics.js";
 import focusStatistics from "./js/focusStatistics.js";
 import otherStatistics from "./js/otherStatistics.js";
+import Bg2 from "@screen/components/Decorations/bg-2.vue"
 
 export default {
   name: 'ConditionStatistics',
+  components: {
+    Bg2
+  },
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
@@ -124,13 +128,18 @@ export default {
 <style lang='scss' scoped>
 .ConditionStatistics {
   position: relative;
-  background: url("~@screen/images/bg/box_bg_003.png") no-repeat;
-  background-size: 100% 100%;
+  // background: url("~@screen/images/bg/box_bg_003.png") no-repeat;
+  // background-size: 100% 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  padding-top: 51px;
+
+  ::v-deep {
+    .BackgroundClip.bg {
+      padding-top: 51px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+    }
+  }
 
   // .icon-right {
   //   position: absolute;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/FocusedMonitoring/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/FocusedMonitoring/index.vue
index 792429e1..780dde0f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/FocusedMonitoring/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/FocusedMonitoring/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="content-l-t">
+  <Bg2 class="content-l-t">
     <div class="content-l-t-title">
     </div>
     <img class="icon_005" src="@screen/images/icon/icon_005.png" />
@@ -39,18 +39,28 @@
         <div>平均车速</div>
       </div>
     </div>
-  </div>
+  </Bg2>
 </template>
-<script></script>
+<script>
+import Bg2 from "@screen/components/Decorations/bg-2.vue"
+
+export default {
+  name: "FocusedMonitoring",
+  components: {
+    Bg2
+  }
+}
+</script>
 <style lang="less">
 .content-l-t {
   width: 100%;
   margin: auto;
   height: 332px;
-  padding-top: 10px;
   position: relative;
-  background: url("~@screen/images/bg/box_bg_001.png") no-repeat;
-  background-size: 100% 100%;
+
+  >div:first-child {
+    padding-top: 10px;
+  }
 
   .icon_005 {
     position: absolute;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
index e6b3dbd4..7713daad 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class='RoadAndEvents'>
+  <Bg1 class='RoadAndEvents'>
     <div class="tabs">
       <div class="tabs-item" :class="layer.title === active ? 'tabs-active' : ''" v-for="layer in layerData"
         :key="layer.title" @click="handleClick(layer)">
@@ -29,7 +29,7 @@
     <!-- 摄像机 G35 K094+079 下行（可控） 枪机 可打开-->
     <!-- <Camera :data="cameraDialogConfig.data" :visible="cameraDialogConfig.visibleType === 1" /> -->
     <component :dialogData="cameraDialogConfig.data" :is="cameraDialogConfig.component" @change="handleCameraChange" />
-  </div>
+  </Bg1>
 </template>
 
 <script>
@@ -38,13 +38,15 @@ import { debounce } from "lodash";
 import { eventMap, cacheRemoveFunc } from "./utils/buttonEvent";
 
 import ControlCamera from "./../Dialogs/ControlCamera/index.vue"
+import Bg1 from "@screen/components/Decorations/bg-1.vue"
 import Camera from "./../Dialogs/Camera/index.vue";
 
 export default {
   name: 'RoadAndEvents',
   components: {
     ControlCamera,
-    Camera
+    Camera,
+    Bg1
   },
   data() {
     return {
@@ -151,9 +153,9 @@ export default {
 
 .RoadAndEvents {
   width: 100%;
-  background: url("~@screen/images/bg/box_bg_002.png") no-repeat;
+  // background: url("~@screen/images/bg/box_bg_002.png") no-repeat;
   // clip-path: polygon(13% 0, 87% 0, 100% 14%, 100% 85%, 85% 100%, 11% 100%, 0 87%, 0 15%);
-  background-size: 100% 100%;
+  // background-size: 100% 100%;
   position: relative;
   display: flex;
   flex-direction: column;