首页 感知事件提交

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

@@ -2,16 +2,23 @@
   <div class='MultipleLabelItem'>
     <div v-for="(item, index) in options" :key="item.key || index" class="item">
       <span v-if="item.prefix" :style="item.prefix.style">{{ item.prefix.text }}</span>
-      <component class="unknown" :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="data[item.key]" />
+      <!-- <component class="unknown" :is="getComponent(item.type)" v-bind="getBindData(item)" v-model="data[item.key]" /> -->
+      <ProxyCom class="unknown" :value="getValue(item)" :item="item" @update:value="data => updateValue(item, data)" />
+
       <span v-if="item.suffix" :style="item.suffix.style">{{ item.suffix.text }}</span>
     </div>
   </div>
 </template>
 
 <script>
+import ProxyCom from "./../Proxy.vue"
+
 export default {
   name: 'MultipleLabelItem',
-  inject: ['getComponent', 'getBindData'],
+  inject: ['getComponent', 'getBindData', 'getValue', 'updateValue'],
+  components: {
+    ProxyCom
+  },
   props: {
     options: {
       type: Array,

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

@@ -40,6 +40,8 @@ export default {
       getComponent: this.getComponent,
       getBindData: this.getBindData,
       getFormData: () => this.modelFormData,
+      getValue: this.getValue,
+      updateValue: this.updateValue,
       parent: this
     }
   },

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

@@ -6,7 +6,7 @@ export const lineChartOption = {
     type: "category",
     // boundaryGap: ["15%", "15%"],
     boundaryGap: false,
-    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+    data: ["17:07", "17:11", "17:15", "17:19", "17:23", "17:27", "17:31"],
     axisTick: {
       show: false,
     },
@@ -14,16 +14,26 @@ export const lineChartOption = {
       color: "#fff",
       fontSize: 12,
     },
+    axisLine: {
+      lineStyle: {
+        color: "#668598",
+      },
+    },
+  },
+  grid: {
+    // left: 0,
+    top: 36,
+    bottom: 24,
+    // right: 0,
   },
   tooltip: {
     trigger: "axis",
     backgroundColor: "rgba(0,0,0,0.36)",
-
     borderWidth: 0,
-    formatter: "{b}: {c} 量",
     textStyle: {
       color: "#fff",
     },
+    formatter: "{b}：{c}(量)",
     // formatter: function([axisData]) {
     //   console.log(axisData)
     //     let str = axisData.name + ' ' + axisData.data + '辆</br>';
@@ -53,7 +63,7 @@ export const lineChartOption = {
     splitLine: {
       lineStyle: {
         type: [6, 9],
-        color: "#aaa",
+        color: "rgba(255,255,255, .3)",
         // dashOffset: [10, 10],
         // cap: 21,
         // width: 2
@@ -78,7 +88,7 @@ export const lineChartOption = {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
             offset: 0,
-            color: "#2AD9FD",
+            color: "rgb(90, 227, 255, .9)",
           },
           {
             offset: 1,

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

@@ -1,7 +1,10 @@
 <template>
   <div class='LineChart'>
     <div class="title">
+      <span>
         断面车流量
+      </span>
+      <img src="@screen/images/title-dec.svg">
     </div>
 
     <div class="chart" ref="LineChartRef" />
@@ -28,15 +31,22 @@ export default {
   gap: 9px;
 
   .title {
-    background-image: url("~@screen/images/title-dec.svg");
+    position: relative;
-    // background-size: 100% 100%;
+
-    background-repeat: no-repeat;
+    img {
+      position: absolute;
+      width: 100%;
+      // height: 100%;
+      left: 0;
+      top: 0;
+    }
 
     font-size: 15px;
-    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-family: Source Han Sans SC,
+    Source Han Sans SC;
     font-weight: 500;
     color: #FFFFFF;
-    padding-left: 24px;
+    padding-left: 33px;
   }
 
   .chart {

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

@@ -3,13 +3,13 @@
     <div class="PerceiveEvent">
       <Video class="item-video" />
       <LineChart class="chart" />
-      <Form class="form" :value="data" ref="FormConfigRef" :formList="formList" column="1" />
+      <Form class="form" v-model="data" ref="FormConfigRef" :formList="formList" column="1" />
     </div>
 
     <template #footer>
       <Button>误操作</Button>
-      <Button style="background-color: rgba(0, 179, 204, 0.3);">取消</Button>
+      <Button style="background-color: rgba(0, 179, 204, 0.3);" @click.native="obverseVisible = false">取消</Button>
-      <Button>确定</Button>
+      <Button @click.native="updateEvent" :loading="btnLoading">确定</Button>
     </template>
   </Dialog>
 </template>
@@ -21,6 +21,8 @@ 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 request from "@/utils/request";
+import { Message } from "element-ui";
 
 import { WarningTypeList, WarningSubclassList } from "@screen/utils/enum.js"
 // import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
@@ -42,6 +44,7 @@ export default {
     return {
       activeName: 'first',
       deviceControlVisible: false,
+      btnLoading: false,
       data: {
         deviceType: "行车诱导",
         deviceStation: "k094+079",
@@ -92,7 +95,7 @@ export default {
         },
         {
           label: "事件描述:",
-          key: "desc.duration",
+          key: "remark",
           options: {
             type: "textarea",
             maxlength: 100,
@@ -113,7 +116,7 @@ export default {
               },
               {
                 key: 1,
-                label: "行",
+                label: "行1",
               },
               {
                 key: 2,
@@ -151,6 +154,39 @@ export default {
     console.log("%c [ this.data ]-108-「index.vue」", "font-size:15px; background:#1be811; color:#5fff55;", this.data);
   },
   methods: {
+    updateEvent() {
+      // s
+      this.btnLoading = true;
+
+      console.log({
+        id: this.dialogData.id,
+        warningType: this.data.warningType,
+        warningSubclass: this.data.warningSubclass,
+        remark: this.data.remark,
+        lane: this.data.lane
+      })
+
+      request({
+        url: `/perceivedEvents/warning/updateWarning`,
+        method: "post",
+        data: {
+          id: this.dialogData.id,
+          warningType: this.data.warningType,
+          warningSubclass: this.data.warningSubclass,
+          remark: this.data.remark,
+          lane: this.data.lane
+        }
+      })
+        .then(() => {
+          Message.success("提交成功");
+        })
+        .catch(() => {
+          Message.error("提交失败");
+        })
+        .finally(() => {
+          this.btnLoading = false;
+        })
+    }
   }
 }
 </script>