From 675a4ffabbb97432e8d6f772ccf73a16c79ed7b0 Mon Sep 17 00:00:00 2001
From: qingzhengli <1204552371@qq.com>
Date: Wed, 20 Mar 2024 18:10:07 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E7=A2=B0=E6=92=9E=E6=A3=80=E6=B5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/LineChart/chart.js             | 102 ++++++++++
 .../components/LineChart/index.vue            |  23 +++
 .../components/LineChartForTraffic/chart.js   | 110 ++++++++++
 .../components/LineChartForTraffic/index.vue  |  23 +++
 .../Dialogs/GuardrailCollision/index.vue      | 188 ++++++++++++++++++
 .../Home/components/RoadAndEvents/index.vue   |   5 +-
 .../RoadAndEvents/utils/buttonEvent.js        |   1 +
 7 files changed, 451 insertions(+), 1 deletion(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChart/chart.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChart/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChartForTraffic/chart.js
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChartForTraffic/index.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/index.vue

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChart/chart.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChart/chart.js
new file mode 100644
index 00000000..b8fb844a
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChart/chart.js
@@ -0,0 +1,102 @@
+import * as echarts from "echarts";
+
+export const lineChartOption = {
+  color: ["#2AD9FD"],
+  xAxis: {
+    name: "日",
+    type: "category",
+    // boundaryGap: ["15%", "15%"],
+    nameTextStyle: {
+      color: "#2AD9FD",
+      align: "right",
+      fontSize: 15,
+      padding: [0, -15, 0, 0],
+    },
+    boundaryGap: false,
+    data: ["1", "5", "10", "15", "20", "25", "30"],
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      color: "#fff",
+      fontSize: 12,
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#668598",
+      },
+    },
+  },
+  grid: {
+    left: 51,
+    top: 15,
+    bottom: 24,
+    right: 36,
+  },
+  tooltip: {
+    trigger: "axis",
+    backgroundColor: "rgba(0,0,0,0.36)",
+    borderWidth: 0,
+    textStyle: {
+      color: "#fff",
+    },
+    formatter: "{b}：{c}",
+    // formatter: function([axisData]) {
+    //   console.log(axisData)
+    //     let str = axisData.name + ' ' + axisData.data + '辆</br>';
+    //     // params.forEach(item => {
+    //     //     if (item.seriesName === '供温' || item.seriesName === '回温') {
+    //     //         str += item.marker + item.seriesName + ' : ' + item.data.value + ' ℃' + '</br>';
+    //     //     } else if (item.seriesName === '压力值(Mpa)') {
+    //     //         // 柱状图渐变时设置marker
+    //     //         item.marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#6C50F3;"></span>';
+    //     //         str += item.marker + item.seriesName + ' : ' + item.data.value + ' m';
+    //     //     }
+    //     // });
+    //     return str;
+    // }
+  },
+  yAxis: {
+    max: 100,
+    type: "value",
+    // nameGap: 24,
+    splitLine: {
+      lineStyle: {
+        type: [6, 9],
+        color: "rgba(255,255,255, .3)",
+        // dashOffset: [10, 10],
+        // cap: 21,
+        // width: 2
+      },
+    },
+    axisLabel: {
+      color: "#fff",
+      fontSize: 12,
+      formatter: "{value} %",
+    },
+  },
+  series: [
+    {
+      data: [0, 90, 65, 90, 45, 36, 27],
+      type: "line",
+      showSymbol: false,
+      smooth: true,
+      lineStyle: {
+        color: "#2AD9FD",
+      },
+      areaStyle: {
+        opacity: 0.8,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgb(90, 227, 255, .9)",
+          },
+          {
+            offset: 1,
+            color: "rgba(42,217,253,0)",
+          },
+        ]),
+      },
+    },
+  ],
+};
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChart/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChart/index.vue
new file mode 100644
index 00000000..31d73d94
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChart/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class='chart LineChart' ref="LineChartRef" />
+</template>
+
+<script>
+import * as echarts from "echarts";
+import { lineChartOption } from "./chart"
+
+export default {
+  name: 'LineChart',
+  mounted() {
+    const chartIns = echarts.init(this.$refs.LineChartRef);
+    chartIns.setOption(lineChartOption);
+  },
+}
+</script>
+
+<style lang='scss' scoped>
+.LineChart {
+  flex: 1;
+  height: 100%;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChartForTraffic/chart.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChartForTraffic/chart.js
new file mode 100644
index 00000000..95649615
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChartForTraffic/chart.js
@@ -0,0 +1,110 @@
+import * as echarts from "echarts";
+
+export const lineChartOption = {
+  color: ["#2AD9FD"],
+  xAxis: {
+    name: "时",
+    type: "category",
+    // boundaryGap: ["15%", "15%"],
+    nameTextStyle: {
+      color: "#2AD9FD",
+      align: "right",
+      fontSize: 15,
+      padding: [0, -15, 0, 0],
+    },
+    boundaryGap: false,
+    data: ["0", "2", "4", "6", "8", "10", "12", "14", "16", "18", "20", "22"],
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      color: "#fff",
+      fontSize: 12,
+    },
+    axisLine: {
+      lineStyle: {
+        color: "#668598",
+      },
+    },
+  },
+
+  yAxis: {
+    max: 1,
+    name: "辆",
+    type: "value",
+    nameTextStyle: {
+      color: "#2AD9FD",
+      // align: "right",
+      fontSize: 15,
+      // padding: [0, -15, 0, 0],
+    },
+    // nameGap: 24,
+    splitLine: {
+      lineStyle: {
+        type: [6, 9],
+        color: "rgba(255,255,255, .3)",
+        // dashOffset: [10, 10],
+        // cap: 21,
+        // width: 2
+      },
+    },
+    axisLabel: {
+      color: "#fff",
+      fontSize: 12,
+      formatter: "{value}",
+    },
+  },
+  grid: {
+    left: 33,
+    top: 33,
+    bottom: 24,
+    right: 36,
+  },
+  tooltip: {
+    trigger: "axis",
+    backgroundColor: "rgba(0,0,0,0.36)",
+    borderWidth: 0,
+    textStyle: {
+      color: "#fff",
+    },
+    formatter: "{b}：{c}",
+    // formatter: function([axisData]) {
+    //   console.log(axisData)
+    //     let str = axisData.name + ' ' + axisData.data + '辆</br>';
+    //     // params.forEach(item => {
+    //     //     if (item.seriesName === '供温' || item.seriesName === '回温') {
+    //     //         str += item.marker + item.seriesName + ' : ' + item.data.value + ' ℃' + '</br>';
+    //     //     } else if (item.seriesName === '压力值(Mpa)') {
+    //     //         // 柱状图渐变时设置marker
+    //     //         item.marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#6C50F3;"></span>';
+    //     //         str += item.marker + item.seriesName + ' : ' + item.data.value + ' m';
+    //     //     }
+    //     // });
+    //     return str;
+    // }
+  },
+  series: [
+    {
+      data: [0, 0.3, 0.6, 0.24, 0.15, 0.66, 0.9, 0, 0.36, 0.51, 0.72, 0.6, 0.3],
+      type: "line",
+      showSymbol: false,
+      smooth: true,
+      lineStyle: {
+        color: "#2AD9FD",
+      },
+      areaStyle: {
+        opacity: 0.8,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "rgb(90, 227, 255, .9)",
+          },
+          {
+            offset: 1,
+            color: "rgba(42,217,253,0)",
+          },
+        ]),
+      },
+    },
+  ],
+};
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChartForTraffic/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChartForTraffic/index.vue
new file mode 100644
index 00000000..31d73d94
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/components/LineChartForTraffic/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class='chart LineChart' ref="LineChartRef" />
+</template>
+
+<script>
+import * as echarts from "echarts";
+import { lineChartOption } from "./chart"
+
+export default {
+  name: 'LineChart',
+  mounted() {
+    const chartIns = echarts.init(this.$refs.LineChartRef);
+    chartIns.setOption(lineChartOption);
+  },
+}
+</script>
+
+<style lang='scss' scoped>
+.LineChart {
+  flex: 1;
+  height: 100%;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/index.vue
new file mode 100644
index 00000000..05a05c68
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/GuardrailCollision/index.vue
@@ -0,0 +1,188 @@
+<template>
+  <Dialog v-model="obverseVisible" title="护栏碰撞弹窗">
+    <Video class="video-stream" :pileNum="dialogData.stakeMark" />
+
+    <div class="GuardrailCollision">
+      <ElTabs v-model="activeName" class="tabs">
+        <ElTabPane label="基本信息" name="first">
+          <Descriptions :list="list" :data="data" style="gap: 18px" />
+        </ElTabPane>
+
+        <ElTabPane label="在线率统计" name="third">
+          <LineChart v-if="activeName === 'third'" :productId="dialogData.productId" />
+        </ElTabPane>
+      </ElTabs>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index.vue";
+import Button from "@screen/components/Buttons/Button.vue";
+import Descriptions from "@screen/components/Descriptions.vue";
+import Video from "@screen/components/Video";
+import LineChart from "../../LineChart/index.vue";
+import LineChartForTraffic from "./components/LineChartForTraffic/index.vue";
+import Switcher from "@screen/pages/service/PublishingChannelManagement/components/Switcher.vue";
+
+import {
+  getRoadInfoByStakeMark,
+  getProduct,
+} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+import { dialogDelayVisible } from "./../mixin";
+import request from "@/utils/request";
+import { Message } from "element-ui";
+import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue";
+
+// 广播发布
+export default {
+  name: "GuardrailCollision",
+  mixins: [dialogDelayVisible],
+  components: {
+    Dialog,
+    Button,
+    Descriptions,
+    LineChart,
+    LineChartForTraffic,
+    Video,
+    Switcher,
+    RadioGroup,
+  },
+  data() {
+    return {
+      activeName: "first",
+      releaseVisible: false,
+      secondLoading: true,
+      data: {
+        deviceName: "LH24",
+        roadName: "G35济泽高速",
+        stakeMark: "k094+079",
+        direction: "1",
+        organizationName: "山东高速济南发展公司",
+        brand: "XXX厂家",
+        deviceState: "0",
+      },
+
+      roadTypeList: [
+        { key: "1", label: "济南方向" },
+        { key: "3", label: "菏泽方向" },
+      ],
+      roadType: "1",
+      list: [
+        {
+          label: "设备名称",
+          key: "deviceName",
+        },
+        {
+          label: "设备桩号",
+          key: "stakeMark",
+        },
+        {
+          label: "道路名称",
+          key: "roadName",
+        },
+        {
+          label: "设备方向",
+          key: "direction",
+          enum: "CameraDirectionEnum",
+        },
+        {
+          label: "设备状态",
+          key: "deviceState",
+          enum: "DeviceTypeEnum",
+        },
+        // {
+        //   label: '设备厂商',
+        //   key: "brand",
+        // },
+      ],
+      activeOption: {
+        active: {
+          text: "开",
+        },
+        unActive: {
+          text: "关",
+        },
+      },
+      devicesList: [],
+    };
+  },
+  async created() {
+    // if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883';
+
+    this.data = { ...this.dialogData, roadName: null };
+
+    console.log(
+      "%c [ dialogData ]-103-「index.vue」",
+      "font-size:15px; background:#36347c; color:#7a78c0;",
+      this.dialogData
+    );
+
+    // getProduct(this.dialogData.productId)
+    //   .then(data => {
+    //     this.dialogData.brand = data.brand;
+    //   })
+
+    const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
+
+    if (roadInfo) this.data.roadName = roadInfo.roadName;
+  },
+};
+</script>
+
+<style lang="scss">
+div.switcher {
+  font-size: 12px;
+  padding: 2px;
+}
+</style>
+<style lang="scss" scoped>
+.GuardrailCollision {
+  width: 510px;
+  height: 240px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+
+  .camera-video {
+    flex: 1.5;
+  }
+
+  .tabs {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    ::v-deep {
+      .el-tabs__content {
+        flex: 1;
+
+        .el-tab-pane {
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .content-second {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    gap: 9px;
+  }
+
+  .bottom {
+    margin-top: 12px;
+    display: flex;
+    gap: 9px;
+    align-items: center;
+    justify-content: end;
+
+    >div {
+      font-size: 16px;
+      padding: 6px 12px;
+    }
+  }
+}
+</style>
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 c56d1afc..30dbef2b 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
@@ -47,12 +47,14 @@ import TrafficIncidents from "./../Dialogs/TrafficIncidents/index.vue";
 import PerceiveEvent from "./../Dialogs/PerceiveEvent/index.vue";
 import SmartDevice from "./../Dialogs/SmartDevice/index.vue";
 import Intermodulation from "./../Dialogs/Intermodulation/index.vue";
+import GuardrailCollision from "./../Dialogs/GuardrailCollision/index.vue";
+
 import FatigueWakesUp from "./../Dialogs/FatigueWakesUp/index.vue";
 import { addInGraphHandle } from "./utils/map"
 import { lngLatMap } from "./utils/buttonEvent";
 
 export default {
-  name: 'RoadAndEvents',
+  name: 'RoadAndEvents',//首页弹窗 渲染基类
   components: {
     // ControlCamera,
     Camera,
@@ -64,6 +66,7 @@ export default {
     PerceiveEvent,
     SmartDevice,
     Intermodulation,
+    GuardrailCollision,
     FatigueWakesUp
   },
   data() {
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
index e69d0b66..25b5bb13 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
@@ -59,6 +59,7 @@ export const DeviceForMap = {
   },
   护栏碰撞: {
     deviceType: "6",
+    dialog: "GuardrailCollision",
   },
   智慧锥桶: {
     deviceType: "9",