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

ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/Proxy.vue

@@ -7,7 +7,7 @@
 
 export default {
   name: 'Proxy',
-  inject: ['getComponent', 'getBindData', "getFormData"],
+  inject: ['getComponent', 'getBindData', "getFormData", 'parent'],
   props: {
     value: {},
     item: Object
@@ -29,7 +29,7 @@ export default {
       const result = {};
 
       for (const key in callbacks) {
-        result[key] = (...args) => callbacks[key](...args, this.getFormData(), this)
+        result[key] = (...args) => callbacks[key](...args, this.getFormData(), parent)
       }
 
       return result

ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue

@@ -39,7 +39,8 @@ export default {
     return {
       getComponent: this.getComponent,
       getBindData: this.getBindData,
-      getFormData: () => this.modelFormData
+      getFormData: () => this.modelFormData,
+      parent: this
     }
   },
   props: {

ruoyi-ui/src/views/JiHeExpressway/images/title-dec.svg

@@ -0,0 +1,19 @@
+<svg width="409" height="22" viewBox="0 0 409 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142814152">
+<g id="Group 1872">
+<path id="Ellipse 254" d="M12.283 2.18398C13.4708 2.93689 14.4391 3.98963 15.0904 5.23607C15.7417 6.48251 16.0529 7.87862 15.9927 9.28367L15.1934 9.2494C15.2476 7.98485 14.9675 6.72836 14.3814 5.60655C13.7952 4.48476 12.9237 3.53729 11.8547 2.85967L12.283 2.18398Z" fill="#25D2F8"/>
+<path id="Ellipse 257" d="M0.644752 5.79444C1.2495 4.38077 2.24883 3.17132 3.52313 2.31087C4.79742 1.45041 6.29268 0.975415 7.82992 0.942726L7.84693 1.74255C6.46341 1.77197 5.11767 2.19946 3.97081 2.97387C2.82395 3.74828 1.92455 4.83678 1.38028 6.10909L0.644752 5.79444Z" fill="#25D2F8"/>
+<path id="Ellipse 258" d="M12.681 15.4284C11.5678 16.2317 10.2665 16.735 8.90245 16.8899C7.5384 17.0447 6.15744 16.846 4.89243 16.3127C3.62743 15.7794 2.52093 14.9296 1.67938 13.845C0.837836 12.7603 0.289563 11.4774 0.0873031 10.1196L0.878573 10.0017C1.06061 11.2238 1.55405 12.3784 2.31144 13.3546C3.06883 14.3307 4.06468 15.0956 5.20319 15.5755C6.3417 16.0555 7.58456 16.2343 8.8122 16.095C10.0399 15.9556 11.211 15.5026 12.2129 14.7797L12.681 15.4284Z" fill="#25D1F7"/>
+<circle id="Ellipse 256" cx="7.99957" cy="8.94097" r="5.94222" fill="#1E849E" stroke="#25D1F7" stroke-width="0.56"/>
+<circle id="Ellipse 255" cx="8.00087" cy="8.94032" r="3.27556" fill="#2AD9FD" stroke="#C8FFF5" stroke-width="0.56"/>
+<path id="Vector 115 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M12 15.8L12.5433 15.1997L18.3773 20.0111H408.8V20.7997H18.0688L12 15.8Z" fill="url(#paint0_linear_149_4)"/>
+<rect id="Rectangle 499" x="29.5996" y="20.1406" width="26.4" height="1.28" fill="#FFCD4D"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_149_4" x1="10.475" y1="19.6162" x2="407.198" y2="19.6162" gradientUnits="userSpaceOnUse">
+<stop stop-color="#25D8FF"/>
+<stop offset="1" stop-color="#25D8FF" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/PerceiveEvent/components/LineChart/chart.js

@@ -0,0 +1,91 @@
+import * as echarts from "echarts";
+
+export const lineChartOption = {
+  color: ["#2AD9FD"],
+  xAxis: {
+    type: "category",
+    // boundaryGap: ["15%", "15%"],
+    boundaryGap: false,
+    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      color: "#fff",
+      fontSize: 12,
+    },
+  },
+  tooltip: {
+    trigger: "axis",
+    backgroundColor: "rgba(0,0,0,0.36)",
+
+    borderWidth: 0,
+    formatter: "{b}: {c} 量",
+    textStyle: {
+      color: "#fff",
+    },
+    // 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: {
+    name: "辆",
+    type: "value",
+    // nameGap: 24,
+    nameTextStyle: {
+      color: "#2AD9FD",
+      width: 200,
+      align: "right",
+      fontSize: 12,
+      padding: [0, 12, 0, 0],
+    },
+    splitLine: {
+      lineStyle: {
+        type: [6, 9],
+        color: "#aaa",
+        // dashOffset: [10, 10],
+        // cap: 21,
+        // width: 2
+      },
+    },
+    axisLabel: {
+      color: "#fff",
+      fontSize: 12,
+    },
+  },
+  series: [
+    {
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      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: "#2AD9FD",
+          },
+          {
+            offset: 1,
+            color: "rgba(42,217,253,0)",
+          },
+        ]),
+      },
+    },
+  ],
+};

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/PerceiveEvent/components/LineChart/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class='LineChart'>
+    <div class="title">
+      断面车流量
+    </div>
+
+    <div class="chart" ref="LineChartRef" />
+  </div>
+</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 {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+
+  .title {
+    background-image: url("~@screen/images/title-dec.svg");
+    // background-size: 100% 100%;
+    background-repeat: no-repeat;
+
+    font-size: 15px;
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    padding-left: 24px;
+  }
+
+  .chart {
+    flex: 1;
+    height: 100%;
+  }
+}
+</style>

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

@@ -2,8 +2,7 @@
   <Dialog v-model="obverseVisible" title="感知事件">
     <div class="PerceiveEvent">
       <Video class="item-video" />
-      <div class="chart"></div>
+      <LineChart class="chart" />
-
       <Form class="form" :value="data" ref="FormConfigRef" :formList="formList" column="1" />
     </div>
 
@@ -19,10 +18,12 @@
 import Dialog from "@screen/components/Dialog/index.vue";
 import Button from "@screen/components/Buttons/Button.vue"
 import Descriptions from '@screen/components/Descriptions.vue';
+import LineChart from './components/LineChart/index.vue';
 import Video from "@screen/components/Video";
 import Form from '@screen/components/FormConfig';
-// import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
 
+import { WarningTypeList, WarningSubclassList } from "@screen/utils/enum.js"
+// import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
 import { dialogDelayVisible } from "./../mixin"
 
 // 感知事件
@@ -33,6 +34,7 @@ export default {
     Dialog,
     Button,
     Descriptions,
+    LineChart,
     Video,
     Form
   },
@@ -71,13 +73,22 @@ export default {
           key: "warningType",
           type: "select",
           options: {
-            options: []
+            options: WarningTypeList
+          },
+          ons: {
+            change: (value, formData) => {
+              this.formList[4].options.options = WarningSubclassList[value] || [];
+              formData.warningSubclass = null;
+            }
           }
         },
         {
           label: "细分类型:",
           key: "warningSubclass",
           type: "select",
+          options: {
+            options: []
+          },
         },
         {
           label: "事件描述:",
@@ -97,23 +108,23 @@ export default {
             activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
             options: [
               {
-                key: "0",
+                key: 0,
                 label: "应急",
               },
               {
-                key: "1",
+                key: 1,
                 label: "行",
               },
               {
-                key: "2",
+                key: 2,
                 label: "行2",
               },
               {
-                key: "3",
+                key: 3,
                 label: "行3",
               },
               {
-                key: "4",
+                key: 4,
                 label: "行4",
               },
             ],
@@ -126,14 +137,17 @@ export default {
         },
         {
           label: "天气情况:",
-          key: "createTime8",
+          key: "weather",
           type: "text",
         },
       ]
     }
   },
   async created() {
-    this.data = { ...this.dialogData, roadName: null }
+    this.data = { ...this.dialogData, roadName: null };
+
+    this.formList[4].options.options = WarningSubclassList[this.data.warningType] || []
+
     console.log("%c [ this.data ]-108-「index.vue」", "font-size:15px; background:#1be811; color:#5fff55;", this.data);
   },
   methods: {
@@ -156,7 +170,6 @@ export default {
 
   .chart {
     grid-area: 2/1/2/1;
-    background-color: #fff;
   }
 
   .form {

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

@@ -92,10 +92,35 @@ export default {
         // 0 有 可控（球机） ControlCamera | 1 ⽆ 不可控（枪机） Camera
         component: void 0,
         data: void 0,
-        // component: "Camera",
+        component: "PerceiveEvent",
-        // data: {
+        data: {
-        //   camId: "57937",
+          "searchValue": null,
-        // }
+          "createBy": null,
+          "createTime": "2024-07-23 14:18:58",
+          "updateBy": null,
+          "updateTime": null,
+          "remark": null,
+          "params": {},
+          "id": 11,
+          "stakeMarkId": "k103+900",
+          "direction": "1",
+          "deptId": null,
+          "warningState": 1,
+          "warningTime": null,
+          "userId": null,
+          "warningSource": 1,
+          "warningLevel": null,
+          "warningType": 1,
+          "warningSubclass": null,
+          "warningTitle": null,
+          "otherConfig": null,
+          "sectionName": null,
+          "number": 0,
+          "type": null,
+          "sectionId": null,
+          "longitude": "116.493888",
+          "latitude": "36.291145"
+        }
       }
     }
   },

ruoyi-ui/src/views/JiHeExpressway/utils/enum.js

@@ -128,6 +128,13 @@ export const WarningType = {
   9: "护栏碰撞",
 };
 
+export const WarningTypeList = Object.keys(WarningType).map((key) => {
+  return {
+    value: key * 1,
+    label: WarningType[key],
+  };
+});
+
 // 事件主类的子类(上方) warningSubclass
 export const WarningSubclass = {
   1: {
@@ -155,7 +162,7 @@ export const WarningSubclass = {
     "4-9": "其他",
   },
   5: {
-    "5-1": "倒车_逆行",
+    "5-1": "倒车/逆行",
   },
   6: {
     "6-1": "烟火",
@@ -181,3 +188,17 @@ export const WarningSubclass = {
     "9-3": "碰撞后倾斜",
   },
 };
+
+export const WarningSubclassList = Object.keys(WarningSubclass).reduce(
+  (prev, key) => {
+    prev[key] = Object.keys(WarningSubclass[key]).map((subKey) => {
+      return {
+        value: subKey,
+        label: WarningSubclass[key][subKey],
+      };
+    });
+
+    return prev;
+  },
+  {}
+);