交调增加删除感知事件车辆类型

1 year ago · d76c1aaac6
8 changed files with 458 additions and 10 deletions
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/components/LineChart/chart.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/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)",
+          },
+        ]),
+      },
+    },
+  ],
+};
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/components/LineChart/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/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>
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/components/LineChartForTraffic/chart.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/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: 51,
+    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)",
+          },
+        ]),
+      },
+    },
+  ],
+};
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/components/LineChartForTraffic/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/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>
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/index.vue
@ -0,0 +1,188 @@
+<template>
+  <Dialog v-model="obverseVisible" title="一类交调站弹窗">
+    <Video class="video-stream" :pileNum="dialogData.stakeMark" />
+
+    <div class="Intermodulation">
+      <ElTabs v-model="activeName" class="tabs">
+        <ElTabPane label="基本信息" name="first">
+
+          <Descriptions :list="list" :data="data" style="gap: 18px" />
+        </ElTabPane>
+        <ElTabPane label="设备参数" name="second">
+          <div class="content-second">
+            <RadioGroup v-model="roadType" :options="roadTypeList" />
+            <LineChartForTraffic v-if="activeName === 'second'" />
+          </div>
+        </ElTabPane>
+        <ElTabPane label="在线统计率" name="third">
+          <LineChart v-if="activeName === 'third'" />
+        </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 './components/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: 'Intermodulation',
+  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;
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang='scss'>
+div.switcher {
+  font-size: 12px;
+  padding: 2px;
+}
+</style>
+<style lang='scss' scoped>
+.Intermodulation {
+  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%;
+    gap: 9px;
+  }
+
+  .bottom {
+    margin-top: 12px;
+    display: flex;
+    gap: 9px;
+    align-items: center;
+    justify-content: end;
+
+    >div {
+      font-size: 16px;
+      padding: 6px 12px;
+    }
+  }
+}
+</style>
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/PerceiveEvent/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/PerceiveEvent/index.vue
@ -97,15 +97,14 @@ export default {
            options: []
          },
        },
-
-        {
-          label: "车辆类型:",
-          key: "vehicleType",
-          type: "select",
-          options: {
-            options: vehicleTypeList
-          },
-        },
+        // {
+        //   label: "车辆类型:",
+        //   key: "vehicleType",
+        //   type: "select",
+        //   options: {
+        //     options: vehicleTypeList
+        //   },
+        // },
        {
          label: "事件描述:",
          key: "remark",
@ -239,7 +238,7 @@ export default {
          id: this.dialogData.id,
          warningType: this.data.warningType,
          warningSubclass: this.data.warningSubclass,
-          vehicleType: this.data.vehicleType,
+          // vehicleType: this.data.vehicleType,
          remark: this.data.remark,
          lane: this.data.lane.join(",")
        }
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
@ -46,6 +46,7 @@ import Broadcast from "./../Dialogs/Broadcast/index.vue";
 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";

 export default {
  name: 'RoadAndEvents',
@ -59,6 +60,7 @@ export default {
    TrafficIncidents,
    PerceiveEvent,
    SmartDevice,
+    Intermodulation
  },
  data() {
    return {
--- 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
@ -52,6 +52,7 @@ export const DeviceForMap = {
  },
  交调: {
    deviceType: "11",
+    dialog: "Intermodulation",
  },
  合流区: {
    deviceType: "8",