更新

ruoyi-ui/src/api/equipment/type/api.js

@@ -145,7 +145,7 @@ export function listDevicesType() {
 // 设备在线率统计
 export function deviceStatusList(id) {
   return request({
-    url: "/system/status/deviceStatusList?deviceld=" + id,
+    url: "/system/status/deviceStatusList/" + id,
     method: "get",
   });
 }

ruoyi-ui/src/views/JiHeExpressway/components/ProgressBar.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="congestion">
+    <div>
+      <!-- :style="{ width: dataList.length * 300 }" -->
+      <div
+        :class="
+          selectIndex == index
+            ? selectLine < 1
+              ? 'item action Abefore'
+              : 'item action Aafter'
+            : selectIndex + selectLine == index
+            ? selectLine < 1
+              ? 'item action Aafter'
+              : 'item action Abefore'
+            : 'item'
+        "
+        v-for="(item, index) in dataList"
+        :key="index"
+      >
+        <i class="after" v-if="index === 0"></i>
+        <i
+          class="after"
+          v-else
+          @click="selectItem(index, -1, dataList[index - 1])"
+        ></i>
+        <i class="before" v-if="index === dataList.length - 1"></i>
+        <i class="before" v-else @click="selectItem(index, +1, item)"></i>
+
+        <span></span>
+        <div>{{ item.title }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProgressBar",
+  components: {},
+  props: {
+    dataList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    selectIndex: {
+      type: Number,
+      default: 1,
+    },
+    reset: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      // selectIndex: 0,
+      selectLine: -1,
+    };
+  },
+  created() {},
+  watch: {
+    reset: {
+      handler(newV) {
+        if (newV) {
+          this.selectLine = -1;
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    selectItem(index, num, item) {
+      // this.selectIndex = index;
+      this.selectLine = num;
+      if (item) this.$emit("selectItem", item, index);
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="scss" scoped>
+.congestion {
+  width: 100%;
+  height: 35px;
+  display: inline-flex;
+  flex-direction: row;
+
+  > div {
+    position: relative;
+    width: 100%;
+    height: 35px;
+    display: inline-flex;
+    flex-direction: row;
+
+    > .item .after {
+      position: absolute;
+      display: inline-flex;
+      left: 0px;
+      top: -5px;
+      width: 45px !important;
+      height: 35px !important;
+      background-color: transparent;
+      cursor: pointer;
+    }
+
+    > .item .after::after {
+      content: "";
+      position: absolute;
+      display: inline-flex;
+      left: 0px;
+      top: 8px;
+      width: 45px !important;
+      height: 3px !important;
+      background-color: #c7c7c7;
+    }
+
+    > .item .before {
+      position: absolute;
+      display: inline-flex;
+      right: 0px;
+      top: -5px;
+      width: 45px;
+      height: 35px;
+      background-color: transparent;
+      cursor: pointer;
+    }
+
+    > .item .before::after {
+      content: "";
+      position: absolute;
+      display: inline-flex;
+      left: 0px;
+      top: 8px;
+      width: 45px !important;
+      height: 3px !important;
+      background-color: #c7c7c7;
+    }
+
+    .item.action .after::after {
+      background-color: #72fdc9;
+    }
+
+    .item.action.Aafter .after::after {
+      background-color: #c7c7c7 !important;
+    }
+
+    > .item.action.Aafter .before::after {
+      background-color: #72fdc9;
+    }
+
+    > .item.action.Abefore .after::after {
+      background-color: #72fdc9;
+    }
+
+    > .bef::before {
+      background-color: #72fdc9 !important;
+    }
+
+    > .aft::after {
+      background-color: #72fdc9 !important;
+    }
+
+    > .item.action span {
+      background-color: #72fdc9;
+      cursor: pointer;
+    }
+
+    > .item.action span::after {
+      border-color: #72fdc9;
+    }
+
+    > .action div {
+      color: #72fdc9 !important;
+    }
+
+    > .item {
+      position: relative;
+      width: 113px;
+      height: 35px;
+      display: inline-flex;
+      flex-direction: column;
+      justify-items: center;
+
+      > span {
+        position: absolute;
+        display: inline-flex;
+        width: 9px;
+        height: 9px;
+        background: #c7c7c7;
+        border-radius: 50%;
+        opacity: 1;
+        left: 53px;
+      }
+
+      > div {
+        font-size: 14px;
+        position: relative;
+        display: inline-flex;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+        top: 5px;
+        margin-top: 10px;
+        color: #c7c7c7;
+      }
+
+      > span::after {
+        content: "";
+        position: absolute;
+        display: inline-flex;
+        width: 15px;
+        height: 15px;
+        border: 1px solid #c7c7c7;
+        border-radius: 50%;
+        opacity: 1;
+        top: -3.5px;
+        left: -3px;
+      }
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue

@@ -8,7 +8,7 @@
             id="otherConfig" label="deviceName">
             <template #[otherConfig]="{ data }">
               <span style="color: #6EE5FE;">
-                {{ data.deviceName }}(当前设备)
+                {{ data.deviceName }}(当前)
               </span>
             </template>
           </CheckboxGroup>

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

@@ -12,7 +12,7 @@
         <ElTabPane label="在线率统计" name="third">
           <LineChart
             v-if="activeName === 'third'"
-            :productId="dialogData.productId"
+            :productId="dialogData.id"
             style="height: 150px"
           />
         </ElTabPane>

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/components/CameraControlDialog.vue

@@ -27,10 +27,7 @@
           <span>{{ item.label }}</span>
           <img src="../images/add.svg" @click="controlClick(item.add)">
         </div>
-        <div>雨刷
+
-          <Button @click.native="controlClick(49)">开</Button>
-          <Button @click.native="controlClick(48)">关</Button>
-        </div>
 
       </div>
     </div>

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

@@ -22,12 +22,34 @@
               />
             </template>
           </Descriptions>
+          <div
+            v-if="PanoramicCameraTypes.indexOf(dialogData.childType) == -1"
+            style="width: 50%; display: flex; margin-top: 18px"
+          >
+            <span
+              style="
+                color: #3de8ff;
+                font-size: 15px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                line-height: 18px;
+              "
+            >
+              雨刷:
+            </span>
+            <Button style="margin-left: 5px" @click.native="controlClick(49)"
+              >开</Button
+            >
+            <Button style="margin-left: 5px" @click.native="controlClick(48)"
+              >关</Button
+            >
+          </div>
         </ElTabPane>
         <ElTabPane label="摄相机参数" name="second">摄相机参数</ElTabPane>
         <ElTabPane label="在线率统计" name="third">
           <LineChart
             v-if="activeName === 'third'"
-            :productId="dialogData.productId"
+            :productId="dialogData.id"
             style="height: 180px"
           />
         </ElTabPane>
@@ -53,11 +75,14 @@ import Video from "@screen/components/Video";
 import Descriptions from "@screen/components/Descriptions.vue";
 import CameraControlDialog from "./components/CameraControlDialog.vue";
 import LineChart from "../../LineChart/index.vue";
+import { PanoramicCameraTypes } from "@screen/utils/enum.js";
 
 import {
   getRoadInfoByStakeMark,
   getOrganizationName,
 } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+import { controlCamera } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+import { throttle } from "lodash";
 
 import { dialogDelayVisible } from "./../mixin";
 
@@ -75,6 +100,7 @@ export default {
   },
   data() {
     return {
+      PanoramicCameraTypes,
       activeName: "first",
       controlDialogVisible: false,
       data: {},
@@ -108,12 +134,12 @@ export default {
           label: "设备状态",
           key: "deviceState",
           enum: "DeviceTypeEnum",
-          gridColumn: 2,
+          // gridColumn: 2,
         },
         {
           label: "状态更新时间",
           key: "updateTime",
-          gridColumn: 2,
+          // gridColumn: 2,
           // enum: "CameraDirectionEnum"
         },
         // {
@@ -137,6 +163,9 @@ export default {
     console.log(this.data, "this.data");
   },
   methods: {
+    controlClick: throttle(function (type) {
+      controlCamera(this.deviceId, type);
+    }, 150),
     visibleClose(bool) {
       if (bool) return;
 

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

@@ -11,7 +11,7 @@
         <ElTabPane label="在线率统计" name="third">
           <LineChart
             v-if="activeName === 'third'"
-            :productId="dialogData.productId"
+            :productId="dialogData.id"
             style="height: 180px"
           />
         </ElTabPane>

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

@@ -4,11 +4,20 @@
       <Video class="video-stream" :pileNum="dialogData.stakeMark" />
       <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
         <ElTabPane label="基本信息" name="first">
-          <Descriptions labelWidth="72px" :list="list" :data="data" style="gap: 18px" />
+          <Descriptions
+            labelWidth="72px"
+            :list="list"
+            :data="data"
+            style="gap: 18px"
+          />
         </ElTabPane>
         <ElTabPane label="设备参数" name="second">设备参数</ElTabPane>
         <ElTabPane label="在线率统计" name="third">
-          <LineChart v-if="activeName === 'third'" :productId="dialogData.productId" style="height: 180px" />
+          <LineChart
+            v-if="activeName === 'third'"
+            :productId="dialogData.id"
+            style="height: 180px"
+          />
         </ElTabPane>
       </ElTabs>
     </div>
@@ -17,7 +26,10 @@
       <Button @click.native="deviceControlVisible = true">设备操作</Button>
     </template>
 
-    <DeviceControlDialog v-model="deviceControlVisible" :deviceId="dialogData.iotDeviceId" />
+    <DeviceControlDialog
+      v-model="deviceControlVisible"
+      :deviceId="dialogData.iotDeviceId"
+    />
   </Dialog>
 </template>
 
@@ -25,7 +37,10 @@
 import Dialog from "@screen/components/Dialog/index.vue";
 import Descriptions from "@screen/components/Descriptions.vue";
 import Button from "@screen/components/Buttons/Button.vue";
-import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
+import {
+  getRoadInfoByStakeMark,
+  getProduct,
+} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
 import Video from "@screen/components/Video";
 import DeviceControlDialog from "./components/DeviceControlDialog.vue";
 
@@ -99,7 +114,7 @@ export default {
     if (roadInfo) this.$set(this.data, "roadName", roadInfo.roadName);
   },
   methods: {
-    handleClickTabs() { },
+    handleClickTabs() {},
   },
 };
 </script>
@@ -140,7 +155,7 @@ export default {
     align-items: center;
     justify-content: end;
 
-    >div {
+    > div {
       font-size: 16px;
       padding: 6px 12px;
     }

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

@@ -9,7 +9,7 @@
         </ElTabPane>
 
         <ElTabPane label="在线率统计" name="third">
-          <LineChart v-if="activeName === 'third'" :productId="dialogData.productId" />
+          <LineChart v-if="activeName === 'third'" :productId="dialogData.id" />
         </ElTabPane>
       </ElTabs>
     </div>
@@ -179,7 +179,7 @@ div.switcher {
     align-items: center;
     justify-content: end;
 
-    >div {
+    > div {
       font-size: 16px;
       padding: 6px 12px;
     }

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

@@ -9,17 +9,22 @@
         </ElTabPane>
         <ElTabPane label="设备参数" name="second">
           <div class="content-second" style="height: 185px">
-            <RadioGroup v-model="roadType" :options="roadTypeList" @input="changeRadio" />
+            <RadioGroup
+              v-model="roadType"
+              :options="roadTypeList"
+              @input="changeRadio"
+            />
             <span>当前车流量: {{ carNum }}辆</span>
-            <LineChartForTraffic style="flex: 1" v-if="isShowCar && activeName === 'second'" :xData="xData"
+            <LineChartForTraffic
-              :yData="yData" />
+              style="flex: 1"
+              v-if="isShowCar && activeName === 'second'"
+              :xData="xData"
+              :yData="yData"
+            />
           </div>
         </ElTabPane>
         <ElTabPane label="在线率统计" name="third">
-          <LineChart
+          <LineChart v-if="activeName === 'third'" :productId="dialogData.id" />
-            v-if="activeName === 'third'"
-            :productId="dialogData.productId"
-          />
         </ElTabPane>
       </ElTabs>
     </div>
@@ -43,7 +48,7 @@ import { dialogDelayVisible } from "./../mixin";
 import request from "@/utils/request";
 import { Message } from "element-ui";
 import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue";
-import moment from 'moment/moment';
+import moment from "moment/moment";
 
 // 广播发布
 export default {
@@ -75,8 +80,8 @@ export default {
       },
       carNum: 0,
       objectValue: {
-        '1': 0,
+        1: 0,
-        '3': 0
+        3: 0,
       },
       xData: [],
       yData: [],
@@ -153,19 +158,19 @@ export default {
   },
   methods: {
     changeRadio(value) {
-      this.carNum = this.objectValue[value + ''];
+      this.carNum = this.objectValue[value + ""];
       this.isShowCar = false;
       if (value == 3) {
         this.yData = this.jnYData;
       } else {
         this.yData = this.hzYData;
       }
-      console.log('xdata', this.xData);
+      // console.log('xdata', this.xData);
-      console.log('ydata', this.hzYData);
+      // console.log('ydata', this.hzYData);
-      console.log('rdata', this.jnYData);
+      // console.log('rdata', this.jnYData);
       setTimeout(() => {
         this.isShowCar = true;
-      }, 1000)
+      }, 1000);
     },
     getPropertiesHistory(deviceId) {
       this.xData = [];
@@ -179,18 +184,18 @@ export default {
         method: "get",
       }).then((result) => {
         if (result.code != 200) return Message.error(result?.msg);
-        this.objectValue = result.data[0];
+        this.objectValue = result.data[result.data.length - 1];
-        this.carNum = result.data[0]['1'];
+        this.carNum = result.data[result.data.length - 1]["1"];
-        result.data.forEach(it => {
+        result.data.forEach((it) => {
           this.xData.push(moment(it.timestamp).format("HH:mm"));
-          this.hzYData.push(it['1']);
+          this.hzYData.push(it["1"]);
-          this.jnYData.push(it['3']);
+          this.jnYData.push(it["3"]);
           this.yData = this.hzYData;
-        })
+        });
         this.isShowCar = true;
       });
-    }
+    },
-  }
+  },
 };
 </script>
 
@@ -243,7 +248,7 @@ div.switcher {
     align-items: center;
     justify-content: end;
 
-    >div {
+    > div {
       font-size: 16px;
       padding: 6px 12px;
     }

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

@@ -14,15 +14,22 @@
         <ElTabPane label="在线率统计" name="third">
           <LineChart
             v-if="activeName === 'third'"
-            :productId="dialogData.productId"
+            :productId="dialogData.id"
             style="height: 180px"
           />
         </ElTabPane>
       </ElTabs>
     </div>
     <template #footer>
-      <Button v-if="activeName != 'first' && data.deviceState == '1'" @click.native="deviceControlVisible = true"> 设备操作 </Button>
+      <Button
-      <Button v-else-if="activeName != 'first'" style="background-color: #bbb;"> 设备离线 </Button>
+        v-if="activeName != 'first' && data.deviceState == '1'"
+        @click.native="deviceControlVisible = true"
+      >
+        设备操作
+      </Button>
+      <Button v-else-if="activeName != 'first'" style="background-color: #bbb">
+        设备离线
+      </Button>
     </template>
 
     <DeviceControlDialog
@@ -99,7 +106,7 @@ export default {
           label: "设备状态",
           key: "deviceState",
           // enum: "DeviceTypeEnum",
-          visible: false
+          visible: false,
         },
         {
           label: "设备状态",
@@ -117,7 +124,11 @@ export default {
     // if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883';
 
     let deviceInfo = await this.getDeviceInfo();
-    this.data = { ...this.dialogData, roadName: null, deviceStateLiteral : deviceInfo.data.formatValue.deviceState };
+    this.data = {
+      ...this.dialogData,
+      roadName: null,
+      deviceStateLiteral: deviceInfo.data.formatValue.deviceState,
+    };
 
     // console.log(
     //   "%c [ dialogData ]-103-「index.vue」",
@@ -134,15 +145,17 @@ export default {
 
     if (roadInfo) this.data.roadName = roadInfo.roadName;
   },
-  methods:{
+  methods: {
     async getDeviceInfo() {
       return request({
-        url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || '10.0.36.143-1883'}/3`,
+        url: `/business/device/properties/latest/${
+          this.dialogData.iotDeviceId || "10.0.36.143-1883"
+        }/3`,
         method: "get",
-        params: {}
+        params: {},
       });
-    }
+    },
-  }
+  },
 };
 </script>
 

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

@@ -94,7 +94,7 @@
                   <el-tab-pane label="在线率统计" name="third">
                     <LineChart
                       v-if="activeTab === 'third'"
-                      :productId="selectedDevice.productId"
+                      :productId="selectedDevice.id"
                       style="height: 160px"
                     />
                   </el-tab-pane>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/eventPlanDialog/index.vue

@@ -13,7 +13,7 @@
                         <div class="text">联动设备:</div>
                     </el-col>
                     <el-col :span="22">
-                        <FormTable ref="secondFormTable" :tableData="secondFormData"></FormTable>
+                        <FormTable ref="secondFormTable" :tableData="secondFormData" :type="1"></FormTable>
                     </el-col>
                 </el-row>
             </div>
@@ -23,14 +23,16 @@
                         <div class="text">恢复操作:</div>
                     </el-col>
                     <el-col :span="22">
-                        <FormTable ref="thirdFormTable" :tableData="thirdFormData"></FormTable>
+                        <FormTable ref="thirdFormTable" :tableData="thirdFormData" :type="2"></FormTable>
                     </el-col>
                 </el-row>
             </div>
         </div>
 
         <template #footer>
-            <Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">强制恢复</Button>
+            <Button v-if="isDisBtn" style="padding:0 24px;  pointer-events: none; background-color: #C9C9C9;"
+                @click.native="handleRestore" :loading="submitting">强制恢复</Button>
+            <Button v-else style="padding:0 24px;" @click.native="handleRestore" :loading="submitting">强制恢复</Button>
             <Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">确认</Button>
             <Button style="background: #C9C9C9;padding:0 24px;"
                 @click.native="modelVisible = false, submitting = false">取消</Button>
@@ -40,12 +42,11 @@
 
 <script>
 import Dialog from "@screen/components/Dialog/index";
-import FormTable from '../../../plan/formTable/index.vue';
+import FormTable from '../formTable/index.vue';
 import Button from '@screen/components/Buttons/Button.vue';
 import request from '@/utils/request';
 import { Message } from "element-ui";
 import { throttle } from "lodash"
-import { isDate } from 'mathjs';
 
 
 export default {
@@ -66,17 +67,23 @@ export default {
     },
     props: {
         visible: Boolean,
+        activeName: String,
         info: {
             type: Array,
             default: () => []
+        },
+        eventFormData: {
+            type: Object,
+            default: () => { }
         }
     },
     data() {
         return {
             title: '事件确认',
+            isDisBtn: true,
             dialogType: 1,
             planId: 0,
-            plans: [],
+            planInfo: {},
             submitting: false,
             secondFormData: [{
                 deviceType: 1,
@@ -186,6 +193,7 @@ export default {
                 if (this.visible) {
                     if (this.info.length > 0) {
                         this.planName = this.info[0]?.planName || '';
+                        this.planInfo = this.info[0];
                         this.initData(this.info[0]);
                     }
                 }
@@ -243,10 +251,21 @@ export default {
             }
             return this.deviceData;
         },
+        async getTemplateAutomatic() {
+            request({
+                url: `/business/plans/event/automatic`,
+                method: "post",
+            }).then((result) => {
+                if (result.code != 200) return Message.error(result?.msg);
+                this.sbOptions = result.data;
+
+            }).catch(() => {
+                Message.error("查询可变信息标识失败");
+            })
+        },
         changeRadio(value) {
-            console.log('va', value)
             let plan = this.info.find(it => it.planName == value);
-            console.log('plan', plan)
+            this.planInfo = plan;
             this.initData(plan);
         },
         formatData(it, value = 1) {
@@ -289,47 +308,53 @@ export default {
         },
         handleSubmit() {
             // this.submitting = false;
-            let secondFormTable = this.$refs['secondFormTable'].tableData || [];
-            let thirdFormTable = this.$refs['thirdFormTable'].tableData || [];
-            console.log('12', thirdFormTable);
-            let dcArr = [];
-            let id = '';
-            if (this.dialogType == 2) id = this.planId;
-            secondFormTable.forEach(it => {
-                dcArr.push(this.formatData(it, 1, id));
-            })
-            thirdFormTable.forEach(it => {
-                dcArr.push(this.formatData(it, 2, id));
-            })
 
-            console.log({
+            // let secondFormTable = this.$refs['secondFormTable'].tableData || [];
-                dcExecuteAction: dcArr
+            // let thirdFormTable = this.$refs['thirdFormTable'].tableData || [];
-            })
+            // console.log('12', thirdFormTable);
-            return;
+            // let dcArr = [];
-            if (this.dialogType == 1) {//新增
+            // let id = '';
+            // if (this.dialogType == 2) id = this.planId;
+            // secondFormTable.forEach(it => {
+            //     dcArr.push(this.formatData(it, 1, id));
+            // })
+            // thirdFormTable.forEach(it => {
+            //     dcArr.push(this.formatData(it, 2, id));
+            // })
 
-            } else if (this.dialogType == 2) {//修改
+            let reqData = {
-                // request({
+                operationType: 1,//1-执行操作 2-恢复操作
-                //     url: `/business/plans`,
+                dcEmergencyPlans: this.planInfo,
-                //     method: "put",
+                dcEvent: this.eventFormData
-                //     data: {
+            };
-                //         ...this.formData,
+
-                //         id: this.planId,
+            // let url = '';
-                //         dcExecuteAction: dcArr
+            // if (this.activeName == '-1') {//感知
-                //     }
+            //     url = '/business/plans/event/confirm';
-                // }).then((result) => {
+            //     reqData = { ...reqData, dcWarning: { ...reqData.dcEvent } }
-                //     if (result.code != 200) return Message.error(result?.msg);
+            // } else {//交通
-                //     Message.success("提交成功");
+            //     url = '/business/plans/event/confirm';
-                //     this.modelVisible = false;
+            // }
-                // }).catch(() => {
+            console.log('reqData', reqData)
-                //     Message.error("提交失败");
+            return;
-                // }).finally(() => {
+            request({
-                //     this.submitting = false;
+                url: url,
-                //     this.$emit('reInitData', true);
+                method: "post",
-                // })
+                data: reqData
+            }).then((result) => {
+                if (result.code != 200) return Message.error(result?.msg);
+                Message.success("提交成功");
+                this.modelVisible = false;
+            }).catch(() => {
+                Message.error("提交失败");
+            }).finally(() => {
+                this.submitting = false;
+                // this.$emit('reInitData', true);
+            })
 
-            }
 
+        },
+        handleRestore() {
 
         }
     }
@@ -349,7 +374,7 @@ export default {
 
 .EventAddPlanDialog {
     gap: 9px;
-    width: 1080px;
+    width: 1280px;
     height: 310px;
     display: flex;
     flex-direction: column;
@@ -376,5 +401,16 @@ export default {
         justify-content: end;
         gap: 15px;
     }
+
+    // .disabledBtn {
+    //     height: 24px;
+    //     border-radius: 48px;
+    //     background: #C9C9C9;
+    //     padding: 0 24px;
+    //     color: white !important;
+    //     display: flex;
+    //     align-items: center;
+    //     justify-content: center;
+    // }
 }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/formTable/index.vue

@@ -0,0 +1,336 @@
+<template>
+    <div class="EventDetail">
+        <Table :data="tableData" :show-header="false">
+            <ElTableColumn prop="deviceType" width="160">
+                <template slot-scope="scope">
+                    <el-select v-model="scope.row.deviceType" placeholder="请选择设备类型" @change="changeDeviceType">
+                        <el-option v-for="item in deviceOptions" :key="item.value" :label="item.label"
+                            :value="item.value">
+                        </el-option>
+                    </el-select>
+                </template>
+            </ElTableColumn>
+
+            <ElTableColumn prop="searchRule" width="230">
+                <template slot-scope="scope">
+                    <div class="plhx">
+                        <el-select v-model="scope.row.searchRule" placeholder="检索规则条件">
+                            <el-option v-for="item in zyOptions" :key="item.value" :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select>
+
+                        <el-input-number v-if="scope.row.searchRule == 2 || scope.row.searchRule == 3"
+                            v-model="scope.row.number" :min="0" :max="9999" style="width: 130px;"></el-input-number>
+                        <p v-if="scope.row.searchRule == 2 || scope.row.searchRule == 3">个</p>
+
+                        <el-input-number v-if="scope.row.searchRule == 4" v-model="scope.row.number" :min="0"
+                            :max="9999" style="width: 130px;"></el-input-number>
+                        <p v-if="scope.row.searchRule == 4" style="width: 56px;">公里</p>
+                    </div>
+
+                </template>
+            </ElTableColumn>
+
+            <ElTableColumn prop="deviceList" width="400">
+                <template slot-scope="scope">
+                    <div class="mjs">
+                        <el-select v-if="scope.row.searchRule == 1" v-model="scope.row.deviceList" placeholder="请选择设备"
+                            multiple collapse-tags>
+                            <el-option v-for="item in sbOptions" :key="item.id" :label="item.deviceName"
+                                :value="item.id">
+                            </el-option>
+                        </el-select>
+                        <el-input @click.native="clickQbb(scope.$index)" v-if="scope.row.deviceType == 2"
+                            placeholder="请选择" v-model="scope.row.qbb" readonly>
+                            <i slot="suffix" class="el-input__icon el-icon-search"></i>
+                        </el-input>
+
+                        <el-select v-if="scope.row.deviceType == 10" v-model="scope.row.gzms" placeholder="工作模式">
+                            <el-option v-for="item in gzmsOptions" :key="item.value" :label="item.label"
+                                :value="item.value"></el-option>
+                        </el-select>
+                        <el-input-number v-if="scope.row.deviceType == 10" placeholder="时长(分钟)"
+                            v-model="scope.row.operationDuration" :min="0" :max="999"></el-input-number>
+
+                        <el-select v-if="scope.row.deviceType == 12" v-model="scope.row.controlModel"
+                            placeholder="请选择模式">
+                            <el-option label="手动模式" value="00"></el-option>
+                            <el-option label="自动模式" value="01"></el-option>
+                            <el-option label="万年历" value="02"></el-option>
+                        </el-select>
+                        <el-time-picker v-if="scope.row.controlModel == '01' && scope.row.deviceType == 12"
+                            v-model="scope.row.time" is-range style="" range-separator="-" placeholder="选择时间"
+                            value-format="HH:mm" format="HH:mm">
+                        </el-time-picker>
+                        <el-select v-if="scope.row.deviceType == 12" v-model="scope.row.state" placeholder="工作状态">
+                            <el-option v-for="item in gzztOptions" :key="item.value" :label="item.label"
+                                :value="item.value"></el-option>
+                        </el-select>
+
+                        <el-input v-if="scope.row.deviceType == 5" v-model="scope.row.content"
+                            placeholder="请输入发布内容"></el-input>
+
+                    </div>
+                </template>
+            </ElTableColumn>
+
+
+            <ElTableColumn label="操作" width="100">
+                <template slot-scope="scope">
+                    <ElButton class="elButton" icon="el-icon-plus" plain size="mini"
+                        @click.native="onAdd(scope.row.id)" />
+                    <ElButton class="elButton" icon="el-icon-delete" plain size="mini"
+                        @click.native="onDel(scope.$index)" />
+                </template>
+            </ElTableColumn>
+        </Table>
+
+        <!-- 情报板弹窗 -->
+        <QbbDialog :visible="isShowDialog" :info="qbbData" :type="type" @close="onCloseDialog" @dialogSubmit="dialogSubmit" />
+    </div>
+</template>
+
+<script>
+import Table from '@screen/components/Table.vue';
+import Button from '@screen/components/Buttons/Button.vue';
+import request from "@/utils/request";
+import QbbDialog from "../qbbDialog/index.vue";
+import { Message } from 'element-ui'
+import { planDeviceOptions } from "@screen/utils/enum.js";
+
+
+export default {
+    name: 'formTable',
+    components: {
+        Button,
+        Table,
+        QbbDialog
+    },
+    model: {
+        prop: 'visible',
+        event: 'update:value'
+    },
+    inject: ['loadData'],
+    props: {
+        visible: Boolean,
+        eventType: Number,
+        type: Number,
+        tableData: {
+            type: Array,
+            default: () => [{
+                deviceType: 1,
+                searchRule: 1,
+                qbb: ''
+            }]
+        }
+    },
+    data() {
+        return {
+            // tableData: [
+            //     {
+            //         deviceType: 1,
+            //         searchRule: 1,
+            //         qbb: '安全行驶'
+            //     }
+            // ],
+            isShowDialog: false,
+            deviceOptions: planDeviceOptions,
+            zyOptions: [
+                {
+                    value: 1,
+                    label: '指定设备资源'
+                },
+                {
+                    value: 2,
+                    label: '事发上游最近'
+                },
+                {
+                    value: 3,
+                    label: '事发下游最近'
+                },
+                {
+                    value: 4,
+                    label: '最近公里数'
+                },
+            ],
+            gzztOptions: [
+                {
+                    value: "01",
+                    label: "常亮"
+                },
+                {
+                    value: "02",
+                    label: "流水"
+                },
+                {
+                    value: "03",
+                    label: "闪烁"
+                },
+                {
+                    value: "04",
+                    label: "关闭",
+                }
+            ],
+            gzmsOptions: [
+                {
+                    value: "SETMD0",
+                    label: "激光关闭"
+                },
+                {
+                    value: "SETMD1",
+                    label: "常亮模式"
+                },
+                {
+                    value: "SETMD2",
+                    label: "间隔100ms闪烁模式"
+                },
+                {
+                    value: "SETMD3",
+                    label: "间隔200ms闪烁模式",
+                },
+                {
+                    value: "SETMD4",
+                    label: "间隔500ms闪烁模式",
+                },
+                {
+                    value: "SETMD5",
+                    label: "2次闪烁模式"
+                },
+                {
+                    value: "SETMD6",
+                    label: "SOS模式"
+                },
+                {
+                    value: "SETMD7",
+                    label: "自定义模式1",
+                },
+                {
+                    value: "SETMD8",
+                    label: "自定义模式2",
+                },
+                {
+                    value: "SETMD9",
+                    label: "自定义模式3",
+                }
+            ],
+            qbbData: {},
+            sbOptions: [],
+            deviceType: 1,
+            index: 1
+        }
+    },
+    async created() {
+        let loadData = await this.loadData(1);
+        // console.log('aa',loadData)
+        this.sbOptions = loadData;
+    },
+    methods: {
+        initData() {
+            // request({
+            //     url: `business/device/query?deviceType=2`,
+            //     method: "get",
+            // }).then((result) => {
+            //     if (result.code != 200) return Message.error(result?.msg);
+            //     this.sbOptions = result.data;
+
+            // }).catch(() => {
+            //     Message.error("查询可变信息标识失败");
+            // })
+
+        },
+        async changeDeviceType(value) {
+            this.deviceType = value;
+            console.log('value', value)
+            this.sbOptions = await this.loadData(value);
+        },
+        onAdd(id) {
+            this.tableData.push({
+                deviceType: 1,
+                searchRule: 1,
+                qbb: ''
+            })
+        },
+        onDel(index) {
+            if (this.tableData.length <= 1) {
+                return Message.warning('最后一项不可删除！');
+            }
+            this.tableData.splice(index, 1)
+        },
+        clickQbb(index) {
+            this.index = index;
+            this.qbbData = this.tableData[index].dcInfoBoardTemplate;
+            if (this.type == 1) {
+                this.isShowDialog = true;
+            }
+        },
+        onCloseDialog() {
+            this.isShowDialog = false;
+        },
+        dialogSubmit(data) {
+            this.tableData[this.index].qbb = data.content;
+            this.tableData[this.index].otherConfig = JSON.stringify(data);
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.EventDetail {
+    display: flex;
+    gap: 9px;
+    width: 100%;
+    // height: 768px;
+    min-height: 50px;
+    margin-top: 5px;
+    flex-direction: column;
+
+    ::v-deep {
+        .el-table .el-table__cell {
+            padding: 0 5px;
+        }
+    }
+
+    .mjs {
+        display: flex;
+
+        >div {
+            margin-right: 10px;
+        }
+    }
+
+    .ms {
+        width: 160px;
+    }
+
+    .plhx {
+        display: flex;
+    }
+
+    ::v-deep {
+        .el-tag.el-tag--info {
+            max-width: 100px;
+        }
+
+        .el-range-editor--medium .el-range__icon,
+        .el-range-editor--medium .el-range__close-icon {
+            display: none;
+        }
+    }
+
+}
+
+.elButton {
+    background: #2ba8c3;
+    border-radius: 2px 2px 2px 2px;
+    color: #FFFFFF;
+}
+
+.elButton:hover,
+.elButton:focus {
+    background: #2ba8c3;
+    border-radius: 2px 2px 2px 2px;
+    border-color: #FFFFFF;
+    color: #FFFFFF;
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue

@@ -18,7 +18,8 @@
     </div>
 
     <!-- 确认弹窗 -->
-    <EventPlanDialog :visible="isShowDialog" :info="info" @close="onCloseAddNew" />
+    <EventPlanDialog :visible="isShowDialog" :info="info" :eventFormData="formData" :activeName="activeName"
+      @close="onCloseAddNew" />
 
     <template #footer>
       <Button style="padding: 0 24px;" @click.native="onDelete">误报</Button>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/qbbDialog/index.vue

@@ -0,0 +1,308 @@
+<template>
+    <Dialog v-model="modelVisible" title="情报板确认">
+        <div class="EventAddPlanDialog">
+            <h4>预案内容</h4>
+            <dev class="listBox disPid">
+                <div class="tplItem">
+                    <!-- 模板内容 -->
+                    <BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="{}"></BoardTplPreview>
+                    <!-- 操作按钮 -->
+                    <div class="infoBtnBox infoBtnBoxSm">
+                        <p class="btn">
+                            <!-- <el-radio v-model="radio1" :label="1" @input="changeRadio(1)" /> -->
+                        </p>
+                    </div>
+                </div>
+            </dev>
+            <h4>自动生成</h4>
+            <dev class="listBox disPid">
+                <div class="tplItem">
+                    <!-- 模板内容 -->
+                    <BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="{}"></BoardTplPreview>
+                    <!-- 操作按钮 -->
+                    <div class="infoBtnBox infoBtnBoxSm">
+                        <p class="btn">
+                            <!-- <el-radio v-model="radio1" :label="2" @input="changeRadio(2)" /> -->
+                        </p>
+                    </div>
+                </div>
+            </dev>
+            <h4>情报板模版</h4>
+            <vuescroll :ops="scrollOptions" class="listBox">
+                <div v-for="(item) in templateAvailable" :key="item.dictValue">
+                    <!-- 原来是<el-collapse v-model="activeNames"> -->
+                    <h5>{{ item.dictLabel }}</h5>
+                    <div v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
+                        <!-- 模板内容 -->
+                        <BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="itm"></BoardTplPreview>
+                        <!-- 操作按钮 -->
+                        <div class="infoBtnBox infoBtnBoxSm">
+                            <p class="btn">
+                                <el-radio v-model="radio1" :label="itm.id" @input="changeRadio(itm)" />
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </vuescroll>
+        </div>
+        <template #footer>
+            <Button style="background: #C9C9C9;padding:0 24px;"
+                @click.native="modelVisible = false, submitting = false">取消</Button>
+            <Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">确认</Button>
+        </template>
+    </Dialog>
+</template>
+
+<script>
+import vuescroll from "vuescroll";
+import scrollOptions from "@/common/scrollbar.js";
+import BoardTplPreview from "@screen/components/infoBoard/BoardTplPreview.vue";
+import Dialog from "@screen/components/Dialog/index";
+import Button from '@screen/components/Buttons/Button.vue';
+import { getTemplateList } from "@/api/board/template";
+import DeviceControlDialog from '../../../../../Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue';
+
+export default {
+    name: 'qbbDialog',
+    components: {
+        Dialog,
+        Button,
+        vuescroll,
+        BoardTplPreview,
+        DeviceControlDialog
+    },
+    model: {
+        prop: 'visible',
+        event: 'close'
+    },
+    props: {
+        visible: Boolean,
+        type: Number,
+        info: {
+            type: Object,
+            default: () => { }
+        }
+    },
+    data() {
+        return {
+            submitting: false,
+            selectedSize: "",
+            scrollOptions,
+            templateAvailable: null,
+            tplCategory: [],
+            templateAll: [],
+            radio1: '',
+            itmData: {}
+        }
+    },
+    mounted() {
+        if (this.type == 1) {
+            this.initData();
+        }
+    },
+    computed: {
+        modelVisible: {
+            get() {
+                if (this.visible) {
+                    if (this.info && this.info.id) {
+                        this.radio1 = Number(this.info.id);
+                    }
+                }
+                return this.visible;
+            },
+            set(val) {
+                this.$emit('close', val)
+            }
+        },
+    },
+    methods: {
+        initData() {
+            if (this.tplCategory.length && this.templateAll.length) {
+                this.____setAvailableTemplate();
+            } else {
+                Promise.all([
+                    this.____getTemplateCategory(),
+                    this.____getAllTemplate(),
+                ]).then((res) => {
+                    this.____setAvailableTemplate();
+                });
+            }
+
+        },
+        // 获取信息模板分类
+        ____getTemplateCategory() {
+            return this.getDicts("iot_template_category").then((res) => {
+                this.tplCategory = res.data;
+            });
+        },
+        //获取全部模版
+        ____getAllTemplate() {
+            return getTemplateList().then((res) => {
+                this.templateAll = res.data;
+            });
+        },
+        // 设置当前设备可用的模板
+        ____setAvailableTemplate() {
+            this.templateAvailable = [];
+            this.tplCategory.forEach((item, index) => {
+                let arr = this.templateAll["" + index];
+                if (arr.length > 0) {
+                    let temp = [];
+                    arr.forEach((tpl) => {
+                        if (tpl.screenSize) {
+                            temp.push(tpl);
+                        }
+                    });
+                    if (temp.length > 0) {
+                        this.templateAvailable.push({
+                            ...item,
+                            list: temp,
+                        });
+                    }
+                }
+            });
+        },
+        changeRadio(data) {
+            this.itmData = data;
+        },
+        handleSubmit() {
+            this.modelVisible = false;
+            this.$emit('dialogSubmit', this.itmData);
+        }
+
+
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.listBox {
+    padding: 20px;
+
+    .tplItem {
+        margin-right: 14px;
+        display: flex;
+        align-items: stretch;
+        padding-bottom: 10px;
+
+        .boardPreview {
+            border: 1px solid rgba(61, 232, 255, 0.5);
+            // width: 560px;
+            // height:80px;
+            flex: 1;
+        }
+
+        .infoBtnBox {
+            &.infoBtnBoxSm {
+                width: 60px;
+            }
+
+            width: 110px;
+            height: 80px;
+            display: flex;
+            margin-left: 10px;
+            /* // border: solid 1px #05afe3; */
+            border: 1px solid rgba(61, 232, 255, 0.5);
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            .btn {
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                width: 15px;
+                height: 30px;
+
+                &.btnApply {
+                    background-image: url(~@/assets/jihe/images/button/toLeft.svg);
+                }
+
+                &.btnEdit {
+                    background-image: url(~@/assets/jihe/images/button/edit.svg);
+                }
+
+                &.btnDelete {
+                    background-image: url(~@/assets/jihe/images/button/delete.svg);
+                }
+            }
+
+            i {
+                font-size: 24px;
+                color: #666;
+                padding-left: 4px;
+                cursor: pointer;
+                caret-color: rgba(0, 0, 0, 0);
+                user-select: none;
+            }
+
+            i:hover {
+                color: #05afe3;
+            }
+
+            .disabledClass {
+                pointer-events: none;
+                cursor: auto !important;
+                color: #ccc;
+            }
+        }
+    }
+
+    .controlBox {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: center;
+    }
+
+    .el-collapse {
+        max-height: 100% !important;
+        overflow: auto;
+        border-bottom: none;
+        border-top: none;
+        padding: 0 0.5vw;
+    }
+}
+
+.disPid {
+    padding: 0 20px !important;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity .24s;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.EventAddPlanDialog {
+    gap: 9px;
+    width: 650px;
+    height: 700px;
+    display: flex;
+    flex-direction: column;
+
+    h4 {
+        margin: 0 0 5px 0;
+    }
+
+    ::v-deep {
+        .el-radio__label {
+            display: none;
+        }
+    }
+
+    .form {
+        flex: 1;
+        overflow-y: auto;
+    }
+
+    .footer {
+        display: flex;
+        justify-content: end;
+        gap: 15px;
+    }
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/index.vue

@@ -161,7 +161,7 @@ export default {
     getData() {
       if (this.activeName === '-1') {
         request({
-          url: `/perceivedEvents/warning/perceivedEventsList`,
+          url: `/perceivedEvents/warning/perceivedEventsList`,//感知事件
           method: "post",
           params: { pageNum: this.searchData.pageNum, pageSize: this.searchData.pageSize },
           data: { ...this.searchData, warningState: 1 }
@@ -255,9 +255,9 @@ export default {
     },
     firstBtnClick(id) {
       console.log("id", id);
-      if (this.activeName == '-1') {
+      if (this.activeName == '-1') { //除了 感知事件外的 事件专题 均须处理
         request({
-          url: `/perceivedEvents/warning/getWarningById`,
+          url: `/perceivedEvents/warning/getWarningById`,//感知事件
           method: "post",
           data: { id }
         }).then((result) => {
@@ -297,6 +297,7 @@ export default {
           if (result.code != 200) return Message.error(result?.msg);
           let data = result.data;
           data.stringDirection = gzDirectionMapping[data.direction] || data.direction;
+          data.startTime = data?.occurrenceTime || '';
 
           data.videoList = [];
           if (data.otherConfig) {

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/index.vue

@@ -245,15 +245,17 @@ export default {
       })
 
     },
-    async loadData() {
+    async loadData(deviceType = 1) {
-      if (this.deviceData.length <= 0) {
+      this.deviceData = [];
-        let result = await request({
+      let result = await request({
-          url: `business/device/query?deviceType=2`,
+        url: `business/device/query?deviceType=${deviceType}`,
-          method: "get",
+        method: "get",
-        })
+      })
-        if (result.code != 200) return Message.error(result?.msg);
+      if (result.code != 200) return Message.error(result?.msg);
+      if (deviceType == 1) {
+        this.deviceData = result.data.filter(it => it.childType !== '1-1')
+      } else {
         this.deviceData = result.data;
-        // return result.data;
       }
       return this.deviceData;
     },
@@ -312,32 +314,32 @@ export default {
           // this.submitting = false;
           let secondFormTable = this.$refs['secondFormTable'].tableData || [];
           let thirdFormTable = this.$refs['thirdFormTable'].tableData || [];
-          let flg = false;
+          // let flg = false;
-          for (let item of secondFormTable) {
+          // for (let item of secondFormTable) {
-            if (this.areAllValuesEmpty(item)) { flg = true; break };
+          //   if (this.areAllValuesEmpty(item)) { flg = true; break };
-          }
+          // }
-          if (flg) return Message.warning('执行操作子项不能为空！');
+          // if (flg) return Message.warning('执行操作子项不能为空！');
-          for (let item of thirdFormTable) {
+          // for (let item of thirdFormTable) {
-            if (this.areAllValuesEmpty(item)) { flg = true; break };
+          //   if (this.areAllValuesEmpty(item)) { flg = true; break };
-          }
+          // }
-          if (flg) return Message.warning('恢复操作子项不能为空！');
+          // if (flg) return Message.warning('恢复操作子项不能为空！');
-          console.log('12', secondFormTable);
+          // console.log('12', secondFormTable);
-          console.log('34', thirdFormTable);
+          // console.log('34', thirdFormTable);
           let dcArr = [];
-          // let id = '';
+          let id = '';
-          // if (this.dialogType == 2) id = this.planId;
+          if (this.dialogType == 2) id = this.planId;
-          // secondFormTable.forEach(it => {
+          secondFormTable.forEach(it => {
-          //   dcArr.push(this.formatData(it, 1, id));
+            dcArr.push(this.formatData(it, 1, id));
-          // })
+          })
-          // thirdFormTable.forEach(it => {
+          thirdFormTable.forEach(it => {
-          //   dcArr.push(this.formatData(it, 2, id));
+            dcArr.push(this.formatData(it, 2, id));
-          // })
+          })
 
           console.log({
             ...this.formData,
             dcExecuteAction: dcArr
           })
-          return;
+          // return;
           if (this.dialogType == 1) {//新增
             request({
               url: `/business/plans`,
@@ -385,7 +387,7 @@ export default {
 
     },
     areAllValuesEmpty(obj) {
-      console.log('ass',obj)
+      console.log('ass', obj)
       return Object.keys(obj).every(function (key) {
         const value = obj[key];
         return (
@@ -413,7 +415,7 @@ export default {
 
 .EventAddPlanDialog {
   gap: 9px;
-  width: 1080px;
+  width: 1280px;
   height: 310px;
   display: flex;
   flex-direction: column;

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/formTable/index.vue

@@ -11,7 +11,7 @@
                 </template>
             </ElTableColumn>
 
-            <ElTableColumn prop="searchRule" width="260">
+            <ElTableColumn prop="searchRule" width="230">
                 <template slot-scope="scope">
                     <div class="plhx">
                         <el-select v-model="scope.row.searchRule" placeholder="检索规则条件">
@@ -32,7 +32,7 @@
                 </template>
             </ElTableColumn>
 
-            <ElTableColumn prop="deviceList" width="370">
+            <ElTableColumn prop="deviceList" width="400">
                 <template slot-scope="scope">
                     <div class="mjs">
                         <el-select v-if="scope.row.searchRule == 1" v-model="scope.row.deviceList" placeholder="请选择设备"
@@ -50,23 +50,23 @@
                             <el-option v-for="item in gzmsOptions" :key="item.value" :label="item.label"
                                 :value="item.value"></el-option>
                         </el-select>
-                        <el-input-number v-if="scope.row.deviceType == 10" placeholder="操作时长(分钟)"
+                        <el-input-number v-if="scope.row.deviceType == 10" placeholder="时长(分钟)"
                             v-model="scope.row.operationDuration" :min="0" :max="999"></el-input-number>
 
-                        <div v-if="scope.row.deviceType == 12" class="mjs">
+                        <el-select v-if="scope.row.deviceType == 12" v-model="scope.row.controlModel"
-                            <el-select v-model="scope.row.controlModel" placeholder="请选择控制模式">
+                            placeholder="请选择模式">
-                                <el-option label="手动模式" value="00"></el-option>
+                            <el-option label="手动模式" value="00"></el-option>
-                                <el-option label="自动模式" value="01"></el-option>
+                            <el-option label="自动模式" value="01"></el-option>
-                                <el-option label="万年历" value="02"></el-option>
+                            <el-option label="万年历" value="02"></el-option>
-                            </el-select>
+                        </el-select>
-                            <el-time-picker v-if="scope.row.controlModel == '01'" v-model="scope.row.time" is-range
+                        <el-time-picker v-if="scope.row.controlModel == '01' && scope.row.deviceType == 12"
-                                style="" range-separator="-" placeholder="选择时间" value-format="HH:mm" format="HH:mm">
+                            v-model="scope.row.time" is-range style="" range-separator="-" placeholder="选择时间"
-                            </el-time-picker>
+                            value-format="HH:mm" format="HH:mm">
-                            <el-select v-model="scope.row.state" placeholder="工作状态">
+                        </el-time-picker>
-                                <el-option v-for="item in gzztOptions" :key="item.value" :label="item.label"
+                        <el-select v-if="scope.row.deviceType == 12" v-model="scope.row.state" placeholder="工作状态">
-                                    :value="item.value"></el-option>
+                            <el-option v-for="item in gzztOptions" :key="item.value" :label="item.label"
-                            </el-select>
+                                :value="item.value"></el-option>
-                        </div>
+                        </el-select>
 
                         <el-input v-if="scope.row.deviceType == 5" v-model="scope.row.content"
                             placeholder="请输入发布内容"></el-input>
@@ -220,7 +220,7 @@ export default {
         }
     },
     async created() {
-        let loadData = await this.loadData();
+        let loadData = await this.loadData(1);
         // console.log('aa',loadData)
         this.sbOptions = loadData;
     },
@@ -238,17 +238,10 @@ export default {
             // })
 
         },
-        changeDeviceType(value) {
+        async changeDeviceType(value) {
             this.deviceType = value;
-            // if(value == 1){
+            console.log('value', value)
-            //     this.searchRule = 1
+            this.sbOptions = await this.loadData(value);
-            // }else if(value == 2){
-            //     this.searchRule = 1
-            // }else if(value == 3){
-            //     this.searchRule = 1
-            // }else if(value == 4){
-            //     this.searchRule = 1
-            // }
         },
         onAdd(id) {
             this.tableData.push({
@@ -303,6 +296,10 @@ export default {
         }
     }
 
+    .ms {
+        width: 160px;
+    }
+
     .plhx {
         display: flex;
     }

ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/statisticalAnalysis/index.vue

@@ -84,27 +84,7 @@
             </el-table-column>
             <el-table-column prop="deviceIp" label="设备IP"> </el-table-column>
             <el-table-column prop="production" label="厂家"> </el-table-column>
-            <el-table-column prop="type" label="型号">
+            <el-table-column prop="model" label="型号"> </el-table-column>
-              <template slot-scope="scope">
-                <div v-if="scope.row.type == '1-1'">高清网络枪型固定摄像机</div>
-                <div v-if="scope.row.type == '1-2'">高清网络球形摄像机</div>
-                <div v-if="scope.row.type == '1-3'">桥下高清网络球形摄像机</div>
-                <div v-if="scope.row.type == '1-4'">360°全景摄像机</div>
-                <div v-if="scope.row.type == '1-5'">180°全景摄像机</div>
-                <div v-if="scope.row.type == '2-1'">门架式可变信息标志</div>
-                <div v-if="scope.row.type == '2-3'">雨棚可变信息标志</div>
-                <div v-if="scope.row.type == '2-4'">站前悬臂式可变信息标志</div>
-                <div v-if="scope.row.type == '3'">气象检测器</div>
-                <div v-if="scope.row.type == '5'">路段语音广播系统</div>
-                <div v-if="scope.row.type == '6'">护栏碰撞预警系统</div>
-                <div v-if="scope.row.type == '7'">毫米波雷达</div>
-                <div v-if="scope.row.type == '8'">合流区预警系统</div>
-                <div v-if="scope.row.type == '10'">激光疲劳唤醒</div>
-                <div v-if="scope.row.type == '11'">一类交通量调查站</div>
-                <div v-if="scope.row.type == '12'">智能行车诱导系统</div>
-                <div v-if="scope.row.type == '13'">智能设备箱</div>
-              </template>
-            </el-table-column>
             <!-- <el-table-column prop="network" label="网段"> </el-table-column> -->
             <el-table-column prop="time" label="监测时间"> </el-table-column>
             <el-table-column prop="deviceStatus" label="设备状态">
@@ -135,7 +115,7 @@
 
 <script>
 import * as echarts from "echarts";
-import chartsStatistics from "./assets/charts";
+import onlineCharts from "./assets/charts";
 import DeviceUptime from "./components/deviceUptime";
 import MonthlyEquipment from "./components/monthlyEquipment";
 import DeviceSummary from "./components/deviceSummary";
@@ -212,7 +192,7 @@ export default {
         this.initDevice();
       } else if (this.activeName == "second") {
         this.queryChart = echarts.init(this.$refs["queryChart"]);
-        this.queryChart.setOption(chartsStatistics);
+        this.queryChart.setOption(onlineCharts);
         this.initQueryChart();
         this.initQueryTable(1);
       }
@@ -383,17 +363,14 @@ export default {
             data0.push(val);
             data1.push(100);
           }
-          chartsStatistics.xAxis.data = dataX;
+          onlineCharts.xAxis.data = dataX;
-          chartsStatistics.series[0].data = data0;
+          onlineCharts.series[0].data = data0;
-          chartsStatistics.series[0].name = typeLabel;
+          onlineCharts.series[0].name = typeLabel;
-          chartsStatistics.series[1].data = data1;
+          onlineCharts.series[1].data = data1;
-          chartsStatistics.yAxis[0].name = "在线率(%)";
+          onlineCharts.yAxis[0].name = "在线率(%)";
-          chartsStatistics.legend = {
-            show: true,
-          };
 
           this.$nextTick(() => {
-            this.queryChart.setOption(chartsStatistics);
+            this.queryChart.setOption(onlineCharts);
           });
           // } else {
           //   this.setStatus("01", "empty");

ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventQuery/index.vue

@@ -125,7 +125,7 @@
 <script>
 import WgtTitle from "../../../widgets/title";
 import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue";
-import ProgressBar from "./progressBar";
+import ProgressBar from "@screen/components/ProgressBar.vue";
 import * as echarts from "echarts";
 import chart1 from "./assets/charts";
 import chart2 from "./assets/charts2";
@@ -137,7 +137,7 @@ import {
   getWarningSectionType,
   getSectionMarkNumber,
   getRoadSectionList,
-} from "../../../../../../../api/event/perceiveEvent";
+} from "@/api/event/perceiveEvent";
 
 const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
   // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/assets/charts.js

@@ -1,17 +1,24 @@
 /* 数据 */
 let nameList = [
-  "数据1",
+  "殷家林-枢纽",
-  "数据2",
+  "大学城-立交",
-  "数据3",
+  "长清-立交",
-  "数据4",
+  "松竹-枢纽",
-  "数据5",
+  "孝里-立交",
-  "数据6",
+  "平阴北-立交",
-  "数据7",
+  "平阴-立交",
-  "数据8",
+  "孔村-枢纽",
-  "数据9",
+  "平阴南-立交",
-  "数据10",
+  "东平-立交",
+  "东平湖-枢纽",
+  "梁山东-立交",
+  "梁山-立交",
+  "嘉祥西-立交",
+  "王官屯-枢纽",
 ]; // 类别
-let valueList = [26, 62, 38, 26, 85, 46, 12, 12, 33, 60]; // 人数
+let valueList = [
+  26, 62, 38, 26, 85, 46, 12, 12, 33, 60, 26, 62, 38, 26, 85, 46, 12, 12, 33,
+]; // 人数
 var yList = ["畅通", "基本畅通", "轻度拥堵", "中度拥堵", "严重拥堵"];
 /* 数据整合 */
 let dataList = [];
@@ -58,8 +65,9 @@ var options = {
   tooltip: {
     show: true,
     trigger: "axis",
-    valueFormatter: function (value) {
+    formatter: function (params) {
-      return value + " 起";
+      let value = params[0].name.split("-");
+      return `${params[0].marker}${value[0]}${value[1]}: <span style="font-weight:bold;"> ${params[0].value}  起</span>`;
     },
   },
   grid: {
@@ -70,7 +78,7 @@ var options = {
     containLabel: true,
   },
   xAxis: {
-    type: "category",
+    // type: "category",
     data: nameList,
     axisTick: {
       show: false, //隐藏X轴刻度
@@ -84,7 +92,10 @@ var options = {
       show: true,
       color: "#fff",
       fontSize: 12,
-      fontFamily: "Source Han Sans CN-Regular",
+      formatter: function (params) {
+        let value = params.split("-");
+        return `${value[0]}\n\n${value[1]}`;
+      },
     },
   },
   yAxis: [

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/congestion/index.vue

@@ -1,46 +1,41 @@
 <template>
-  <div class='congestion'>
+  <div class="congestion">
-    <WgtTitle :title="'在途车流量车型分类'"></WgtTitle>
+    <WgtTitle title="全路段拥堵状态"></WgtTitle>
     <div class="board">
-      <div class="charts keep-ratio " id="congestionEchartBox"></div>
+      <div class="charts keep-ratio" id="congestionEchartBox"></div>
     </div>
   </div>
 </template>
 
 <script>
-
+import WgtTitle from "../../../widgets/title";
-import WgtTitle from '../../../widgets/title'
 import * as echarts from "echarts";
 import chartsStatistics from "./assets/charts";
 export default {
-  name: 'Congestion',
+  name: "Congestion",
   components: {
-    WgtTitle
+    WgtTitle,
   },
   data() {
-    return {
+    return {};
-
-    }
-  },
-
-  created() {
-
   },
-  methods: {
 
-  },
+  created() {},
+  methods: {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart = echarts.init(document.getElementById('congestionEchartBox'));
+        var myChart = echarts.init(
+          document.getElementById("congestionEchartBox")
+        );
         myChart.setOption(chartsStatistics);
       });
     });
   },
-}
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
   width: 100%;
 
@@ -52,11 +47,15 @@ export default {
     border-radius: 5px 5px 5px 5px;
     opacity: 1;
     border: 1px solid;
-    border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), rgba(55, 231, 255, 0)) 1 1;
+    border-image: linear-gradient(
+        360deg,
+        rgba(55, 231, 255, 0.3),
+        rgba(55, 231, 255, 0)
+      )
+      1 1;
     display: flex;
     justify-content: space-between;
     align-items: center;
-
   }
 }
 

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/assets/charts.js

@@ -92,20 +92,19 @@ var options = {
       z: 10,
       data: [
         "殷家林-枢纽",
-        "大学城-枢纽",
+        "大学城-立交",
-        "长清-枢纽",
+        "长清-立交",
         "松竹-枢纽",
-        "孝里-枢纽",
+        "孝里-立交",
-        "安城-枢纽",
+        "平阴北-立交",
-        "平阴-枢纽",
+        "平阴-立交",
         "孔村-枢纽",
-        "平阴南-枢纽",
+        "平阴南-立交",
-        "东平-枢纽",
+        "东平-立交",
         "东平湖-枢纽",
-        "韩岗-枢纽",
+        "梁山东-立交",
-        "梁山-枢纽",
+        "梁山-立交",
-        "鄄郓-枢纽",
+        "嘉祥西-立交",
-        "嘉祥西-枢纽",
         "王官屯-枢纽",
       ],
       position: "top",

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/flowstate/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flowstate">
-    <WgtTitle :title="'全路车流量状况'"></WgtTitle>
+    <WgtTitle title="在途车流量车型分类"></WgtTitle>
     <div class="board">
       <div class="tag1">方向：济南</div>
       <div class="tag2">方向：菏泽</div>

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue

@@ -2,88 +2,89 @@
   <div class="congestion">
     <WgtTitle :title="'交通指标分析'"></WgtTitle>
     <div class="board">
-      <!-- <div class="searchPanel">
+      <ProgressBar
-          <el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择">
+        class="keep-ratio"
-            <el-option
+        @selectItem="selectProgress"
-              v-for="item in areaOptions"
+        :dataList="dataList"
-              :key="item.value"
+        :selectIndex="selectIndex"
-              :label="item.label"
+        :reset="reset"
-              :value="item.value">
+      />
-            </el-option>
-          </el-select>
-          <el-select v-model="year" size="mini" class="selectRoad" placeholder="请选择">
-            <el-option
-              v-for="item in yearOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-          <el-date-picker
-          size="mini"
-          v-if="year != 'quarter'"
-          class="selectRoad"
-            v-model="dateTime"
-            style="width:140px;"
-            :type="year"
-            placeholder="请选择"
-        />
-        <el-quarter-picker  size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'" v-model="quarter" aria-placeholder="请选季度" />
-
-          <el-button type="primary" size="mini" class="btnSearch"  icon="el-icon-search">查询</el-button>
-          <el-button class="btnReset"  size="mini" icon="el-icon-refresh-left" >重置</el-button>
-        </div> -->
-      <ProgressBar :dataList="dataList" class="keep-ratio progressbar" :selectIndex="7" />
       <div class="body">
         <div class="body-l">
           <div class="searchPanel_1">
-            <!-- <el-from ref="form"> -->
+            <RadioGroup
-            <RadioGroup :options="[
+              :options="[
-      { key: '1', label: '菏泽' },
+                { key: '1', label: '菏泽' },
-      { key: '3', label: '济南' },
+                { key: '3', label: '济南' },
-    ]" v-model="direction" type="button" />
+              ]"
-            <el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择">
+              v-model="direction"
-              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
+              type="button"
+            />
+            <el-select
+              v-model="type"
+              size="mini"
+              class="selectRoad"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in typeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
               </el-option>
             </el-select>
-            <el-select v-model="quarter" size="medium" v-if="type == '3'" class="selectRoad-medium" placeholder="请选择">
+            <el-select
-              <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value">
+              v-model="quarter"
+              size="medium"
+              v-if="type == '3'"
+              class="selectRoad-medium"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in quarterOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
               </el-option>
             </el-select>
             <!-- <el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="type == '3'" v-model="dateTime"
             aria-placeholder="请选季度" /> -->
-            <el-date-picker size="mini" v-if="type != '3'" class="selectRoad" v-model="dateTime" style="width: 140px"
+            <el-date-picker
-              :type="type == 1
+              size="mini"
-      ? 'date'
+              v-if="type != '3'"
-      : type == 2
+              class="selectRoad"
-        ? 'month'
+              v-model="dateTime"
-        : type == 4
+              style="width: 140px"
-          ? 'year'
+              :type="
-          : ''
+                type == 1
-      " placeholder="请选择" />
+                  ? 'date'
-
+                  : type == 2
-            <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery"
+                  ? 'month'
-              icon="el-icon-search">查询</el-button>
+                  : type == 4
-            <el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="handleClear">重置</el-button>
+                  ? 'year'
-            <!-- </el-from> -->
+                  : ''
+              "
+              placeholder="请选择"
+            />
+
+            <el-button
+              type="primary"
+              size="mini"
+              class="btnSearch"
+              @click="searchQuery"
+              icon="el-icon-search"
+              >查询</el-button
+            >
+            <el-button
+              class="btnReset"
+              size="mini"
+              icon="el-icon-refresh-left"
+              @click="onReset"
+              >重置</el-button
+            >
           </div>
-          <!-- <div class="searchPanel_1">
-            <el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择">
-              <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value">
-              </el-option>
-            </el-select>
-            <el-select v-model="year" size="mini" class="selectRoad" placeholder="请选择">
-              <el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value">
-              </el-option>
-            </el-select>
-            <el-date-picker size="mini" v-if="year != 'quarter'" class="selectRoad" v-model="dateTime"
-              style="width:140px;" :type="year" placeholder="请选择" />
-            <el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="year == 'quarter'"
-              v-model="quarter" aria-placeholder="请选季度" />
-
-            <el-button type="primary" size="mini" class="btnSearch" icon="el-icon-search">查询</el-button>
-            <el-button class="btnReset" size="mini" icon="el-icon-refresh-left">重置</el-button>
-          </div> -->
           <div id="chart1" class="keep-ratio"></div>
         </div>
         <div class="chartOrg">
@@ -104,13 +105,14 @@
 <script>
 import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue";
 import WgtTitle from "../../../../../widgets/title";
-import ProgressBar from "./progressBar.vue";
+import ProgressBar from "@screen/components/ProgressBar.vue";
 import * as echarts from "echarts";
 import chart1 from "./assets/charts";
 import chart2 from "./assets/charts2";
 import chart3 from "./assets/charts3";
 import chartsRadar from "./assets/chartsRadar";
 import ElQuarterPicker from "./ElQuarterPicker";
+import { getRoadSectionList } from "@/api/event/perceiveEvent";
 
 const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
   // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
@@ -150,6 +152,9 @@ export default {
   },
   data() {
     return {
+      selectIndex: 1,
+      selectId: 1,
+      reset: false,
       direction: "1",
       type: "1",
       typeOptions: [
@@ -190,56 +195,7 @@ export default {
         },
       ],
       dateTime: "2024-01-01 00:00:00",
-      dataList: [
+      dataList: [],
-        {
-          title: "殷家林枢纽",
-        },
-        {
-          title: "大学城立交",
-        },
-        {
-          title: "长清立交",
-        },
-        {
-          title: "松竹枢纽",
-        },
-        {
-          title: "孝里立交",
-        },
-        {
-          title: "平阴立交",
-        },
-        {
-          title: "孔村枢纽",
-        },
-        {
-          title: "平阴南立交",
-        },
-        {
-          title: "魏雪枢纽",
-        },
-        {
-          title: "东平立交",
-        },
-        {
-          title: "东平湖枢纽",
-        },
-        {
-          title: "韩岗立交",
-        },
-        {
-          title: "梁山立交",
-        },
-        {
-          title: "鄄郓枢纽",
-        },
-        {
-          title: "嘉祥西立交",
-        },
-        {
-          title: "王官屯枢纽",
-        },
-      ],
       quarter: "",
       year: "",
       list: [
@@ -289,11 +245,45 @@ export default {
     };
   },
 
-  created() { },
+  created() {},
-  methods: {},
+  methods: {
+    selectProgress(item, index) {
+      this.selectIndex = index;
+      this.selectId = item.id;
+      this.reset = false;
+      // this.searchQuery();
+    },
+    onReset() {
+      this.selectId = 1;
+      this.selectIndex = 1;
+      this.reset = true;
+      // this.searchQuery();
+    },
+  },
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
+        getRoadSectionList().then((res) => {
+          console.log(res);
+          if (res.code == 200) {
+            let rows = res.data;
+            this.dataList = [];
+            rows.forEach((it) => {
+              this.dataList.push({
+                title: it.sectionName.split("-")[0],
+                id: it.id,
+              });
+            });
+            //最后一项取结束点
+            if (rows.length > 1) {
+              this.dataList.push({
+                title: rows[rows.length - 1].sectionName.split("-")[1],
+                id: rows[rows.length - 1].id,
+              });
+            }
+            console.log("dataList", this.dataList);
+          }
+        });
         var myChart1 = echarts.init(document.getElementById("chart1"));
         myChart1.setOption(chart1);
         var myChart2 = echarts.init(document.getElementById("chart2"));
@@ -317,21 +307,20 @@ export default {
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
         // 绘制圆角矩形
-        drawRoundRect(context, 98, 1, 90, 22, 12, gr);
+        drawRoundRect(context, 98, 11, 90, 22, 12, gr);
 
         var gr = context.createLinearGradient(35, 0, 75, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
-        drawRoundRect(context, -1, 136, 80, 20, 12, gr);
+        drawRoundRect(context, -1, 146, 80, 20, 12, gr);
 
         var gr = context.createLinearGradient(230, 0, 275, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
         context.lineWidth = 1; // 设置线段宽度
-        drawRoundRect(context, 211, 136, 220, 20, 12, gr);
+        drawRoundRect(context, 211, 146, 220, 20, 12, gr);
-
 
         const domMap3 = document.getElementById("chart3");
         let parentDiv3 = domMap3.firstChild;
@@ -349,20 +338,20 @@ export default {
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
         // 绘制圆角矩形
-        drawRoundRect(context3, 98, 4, 90, 20, 12, gr);
+        drawRoundRect(context3, 98, 14, 90, 20, 12, gr);
 
         var gr = context3.createLinearGradient(35, 0, 75, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
-        drawRoundRect(context3, -1, 138, 80, 20, 12, gr);
+        drawRoundRect(context3, -1, 148, 80, 20, 12, gr);
 
         var gr = context3.createLinearGradient(240, 0, 290, 0);
         // 颜色断点
         gr.addColorStop(1, "rgba(92,197,255,0)");
         gr.addColorStop(0, "rgba(92,197,255,0.5)");
         context3.lineWidth = 1; // 设置线段宽度
-        drawRoundRect(context3, 211, 138, 220, 20, 12, gr);
+        drawRoundRect(context3, 211, 148, 200, 20, 12, gr);
       });
     });
   },
@@ -376,6 +365,7 @@ export default {
 
 .congestion {
   width: 100%;
+  margin: 5px 0;
 
   .body {
     display: flex;
@@ -385,7 +375,7 @@ export default {
     width: 100%;
     font-size: 14px;
 
-    >div {
+    > div {
       display: inline-flex;
       flex-direction: column;
       height: 100%;
@@ -401,7 +391,7 @@ export default {
     .chartOrg {
       flex-direction: row !important;
 
-      >div {
+      > div {
         display: inline-flex;
         flex-direction: column;
         width: 50%;
@@ -409,7 +399,7 @@ export default {
       }
 
       .itemChart {
-        >.title {
+        > .title {
           display: inline-flex;
           width: 100%;
           height: 30px;

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/progressBar.vue

@@ -1,197 +1,199 @@
 <template>
-    <div class='congestion'>
+  <div class="congestion">
-        <div :style="{ width: dataList.length * 300 }">
+    <div :style="{ width: dataList.length * 300 }">
-            <div :class="selectIndex == index ? selectLine < 1 ? 'item action Abefore' : 'item action Aafter' : selectIndex + selectLine == index ? selectLine < 1 ? 'item action Aafter' : 'item action Abefore' : 'item'"
+      <div
-                v-for="(item, index) in dataList" :key="index">
+        :class="
-                <i class="after" @click="selectItem(index, -1)"></i>
+          selectIndex == index
-                <i class="before" @click="selectItem(index, +1)"></i>
+            ? selectLine < 1
-                <span></span>
+              ? 'item action Abefore'
-                <div>{{ item.title }}</div>
+              : 'item action Aafter'
-            </div>
+            : selectIndex + selectLine == index
-        </div>
+            ? selectLine < 1
+              ? 'item action Aafter'
+              : 'item action Abefore'
+            : 'item'
+        "
+        v-for="(item, index) in dataList"
+        :key="index"
+      >
+        <i class="after" @click="selectItem(index, -1)"></i>
+        <i class="before" @click="selectItem(index, +1)"></i>
+        <span></span>
+        <div>{{ item.title }}</div>
+      </div>
     </div>
+  </div>
 </template>
-  
-<script>
-import { number } from 'echarts';
-
 
+<script>
 export default {
-    name: 'ProgressBar',
+  name: "ProgressBar",
-    components: {
+  components: {},
+  props: {
+    dataList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
     },
-    props: {
+  },
-        dataList: {
+  data() {
-            type: Array,
+    return {
-            default: () => {
+      selectIndex: 0,
-                return []
+      selectLine: -1,
-            }
+    };
-        },
+  },
+
+  created() {},
+  methods: {
+    selectItem(index, num) {
+      this.selectIndex = index;
+      this.selectLine = num;
     },
-    data() {
+  },
-        return {
+  mounted() {},
-            selectIndex: 0,
+};
-            selectLine: -1,
-        }
-    },
-
-    created() {
-
-    },
-    methods: {
-        selectItem(index, num) {
-            this.selectIndex = index;
-            this.selectLine = num
-        }
-    },
-    mounted() {
-
-    },
-}
 </script>
-  
+
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .congestion {
+  width: 100%;
+  height: 35px;
+  display: inline-flex;
+  flex-direction: row;
+
+  > div {
+    position: relative;
     width: 100%;
     height: 35px;
     display: inline-flex;
     flex-direction: row;
 
-    >div {
+    > .item .after {
+      position: absolute;
+      display: inline-flex;
+      left: 0px;
+      top: -5px;
+      width: 45px !important;
+      height: 35px !important;
+      background-color: transparent;
+      cursor: pointer;
+    }
+
+    > .item .after::after {
+      content: "";
+      position: absolute;
+      display: inline-flex;
+      left: 0px;
+      top: 8px;
+      width: 45px !important;
+      height: 3px !important;
+      background-color: #c7c7c7;
+    }
+
+    > .item .before {
+      position: absolute;
+      display: inline-flex;
+      right: 0px;
+      top: -5px;
+      width: 45px;
+      height: 35px;
+      background-color: transparent;
+      cursor: pointer;
+    }
+
+    > .item .before::after {
+      content: "";
+      position: absolute;
+      display: inline-flex;
+      left: 0px;
+      top: 8px;
+      width: 45px !important;
+      height: 3px !important;
+      background-color: #c7c7c7;
+    }
+
+    .item.action .after::after {
+      background-color: #72fdc9;
+    }
+
+    .item.action.Aafter .after::after {
+      background-color: #c7c7c7 !important;
+    }
+
+    > .item.action.Aafter .before::after {
+      background-color: #72fdc9;
+    }
+
+    > .item.action.Abefore .after::after {
+      background-color: #72fdc9;
+    }
+
+    > .bef::before {
+      background-color: #72fdc9 !important;
+    }
+
+    > .aft::after {
+      background-color: #72fdc9 !important;
+    }
+
+    > .item.action span {
+      background-color: #72fdc9;
+      cursor: pointer;
+    }
+
+    > .item.action span::after {
+      border-color: #72fdc9;
+    }
+
+    > .action div {
+      color: #72fdc9 !important;
+    }
+
+    > .item {
+      position: relative;
+      width: 180px;
+      height: 35px;
+      display: inline-flex;
+      flex-direction: column;
+      justify-items: center;
+
+      > span {
+        position: absolute;
+        display: inline-flex;
+        width: 9px;
+        height: 9px;
+        background: #c7c7c7;
+        border-radius: 50%;
+        opacity: 1;
+        left: 53px;
+      }
+
+      > div {
         position: relative;
+        display: inline-flex;
         width: 100%;
-        height: 35px;
+        align-items: center;
+        justify-content: center;
+        top: 5px;
+        margin-top: 10px;
+        font-size: 14px;
+        color: #c7c7c7;
+      }
+
+      > span::after {
+        content: "";
+        position: absolute;
         display: inline-flex;
-        flex-direction: row;
+        width: 15px;
-
+        height: 15px;
-        >.item .after {
+        border: 1px solid #c7c7c7;
-            position: absolute;
+        border-radius: 50%;
-            display: inline-flex;
+        opacity: 1;
-            left: 0px;
+        top: -3.5px;
-            top: -5px;
+        left: -3px;
-            width: 45px !important;
+      }
-            height: 35px !important;
-            background-color: transparent;
-            cursor: pointer;
-        }
-
-        >.item .after::after {
-            content: "";
-            position: absolute;
-            display: inline-flex;
-            left: 0px;
-            top: 8px;
-            width: 45px !important;
-            height: 3px !important;
-            background-color: #C7C7C7;
-        }
-
-        >.item .before {
-            position: absolute;
-            display: inline-flex;
-            right: 0px;
-            top: -5px;
-            width: 45px;
-            height: 35px;
-            background-color: transparent;
-            cursor: pointer;
-        }
-
-        >.item .before::after {
-            content: "";
-            position: absolute;
-            display: inline-flex;
-            left: 0px;
-            top: 8px;
-            width: 45px !important;
-            height: 3px !important;
-            background-color: #C7C7C7;
-        }
-
-        .item.action .after::after {
-            background-color: #72FDC9;
-        }
-
-        .item.action.Aafter .after::after {
-            background-color: #C7C7C7 !important;
-        }
-
-        >.item.action.Aafter .before::after {
-            background-color: #72FDC9;
-        }
-
-        >.item.action.Abefore .after::after {
-            background-color: #72FDC9;
-        }
-
-        >.bef::before {
-            background-color: #72FDC9 !important;
-        }
-
-        >.aft::after {
-            background-color: #72FDC9 !important;
-        }
-
-        >.item.action span {
-            background-color: #72FDC9;
-            cursor: pointer;
-        }
-
-        >.item.action span::after {
-            border-color: #72FDC9;
-        }
-
-        >.action div {
-            color: #72FDC9 !important;
-        }
-
-
-        >.item {
-            position: relative;
-            width: 180px;
-            height: 35px;
-            display: inline-flex;
-            flex-direction: column;
-            justify-items: center;
-
-
-            >span {
-                position: absolute;
-                display: inline-flex;
-                width: 9px;
-                height: 9px;
-                background: #C7C7C7;
-                border-radius: 50%;
-                opacity: 1;
-                left: 53px;
-            }
-
-            >div {
-                position: relative;
-                display: inline-flex;
-                width: 100%;
-                align-items: center;
-                justify-content: center;
-                top: 5px;
-                margin-top: 10px;
-                font-size: 14px;
-                color: #C7C7C7;
-            }
-
-            >span::after {
-                content: "";
-                position: absolute;
-                display: inline-flex;
-                width: 15px;
-                height: 15px;
-                border: 1px solid #C7C7C7;
-                border-radius: 50%;
-                opacity: 1;
-                top: -3.5px;
-                left: -3px;
-            }
-        }
     }
+  }
 }
 </style>
-  

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/index.vue

@@ -1,148 +1,139 @@
 <template>
-    <div class='TrafficFlowMax'>
+  <div class="TrafficFlowMax">
-        <el-tabs class="footTabs" v-model="activeName"  @tab-click="changeTabs">
+    <el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
-            <el-tab-pane label="综合指标分析" name="first">
+      <el-tab-pane label="综合指标分析" name="first">
-              <IndicatorAnalysis />
+        <IndicatorAnalysis />
-            </el-tab-pane>
+      </el-tab-pane>
-            <el-tab-pane label="综合指标查询" name="second">
+      <el-tab-pane label="综合指标查询" name="second">
-              <IndicatorQuery />
+        <IndicatorQuery />
-            </el-tab-pane>
+      </el-tab-pane>
-        </el-tabs>
+    </el-tabs>
-    </div>
+  </div>
-  </template>
+</template>
-  
-  <script> 
-  import IndicatorAnalysis from './components/IndicatorAnalysis';
-  import IndicatorQuery from './components/IndicatorQuery';
 
-  export default {
+<script>
-    name: 'trafficSituation',
+import IndicatorAnalysis from "./components/IndicatorAnalysis";
-    components: {
+import IndicatorQuery from "./components/IndicatorQuery";
-      IndicatorAnalysis,
-      IndicatorQuery
-    },
-    data(){
-        return {
-            activeName:"first"
-        }
-    },
-    methods:{
-      changeTabs(){
-        
-      }
-    }
-    
-  }
-  </script>
-  
-  <style lang='scss' scoped>
 
-   ::v-deep .el-tabs__item{
+export default {
-    display: inline-flex;
+  name: "trafficSituation",
-    justify-content: center;
+  components: {
-    font-size: 16px;
+    IndicatorAnalysis,
-    font-family: PingFang SC, PingFang SC;
+    IndicatorQuery,
-    font-weight: 500;
+  },
-    color: #FFFFFF;
+  data() {
-    min-width:128px;
+    return {
-    position: relative;
+      activeName: "first",
-    left:10px;
+    };
-   }
+  },
+  methods: {
+    changeTabs() {},
+  },
+};
+</script>
 
-   ::v-deep .el-tabs__active-bar {
+<style lang="scss" scoped>
-    min-width:128px;
+::v-deep .el-tabs__item {
-   }
+  display: inline-flex;
+  justify-content: center;
+  font-size: 16px;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+  min-width: 128px;
+  position: relative;
+  left: 10px;
+}
 
-   ::v-deep .el-tabs__nav-wrap::after {
+::v-deep .el-tabs__active-bar {
-    background-color: #133242;
+  min-width: 128px;
-    opacity: 0.1;
+}
-   }
 
-   ::v-deep .el-tabs__header {
+::v-deep .el-tabs__nav-wrap::after {
-    margin:0px !important;
+  background-color: #133242;
-   }
+  opacity: 0.1;
+}
 
-   .footTabs {
+::v-deep .el-tabs__header {
-     display: inline;
+  margin: 0px !important;
-     width:99%;
+}
 
-   }
+.footTabs {
+  display: inline;
+  width: 99%;
+}
 
-  .TrafficFlowMax {
+.TrafficFlowMax {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    position: relative;
+  position: relative;
-    z-index: 6;
+  z-index: 6;
-    color: white;
+  color: white;
-    padding: 15px 25px;
+  padding: 15px 25px;
-  
+
-    .head{
+  .head {
-      width: 98%;
+    width: 98%;
-      margin: auto;
+    margin: auto;
-      margin-top: 15px;
+    margin-top: 15px;
+  }
+  .content {
+    width: 98%;
+    margin: auto;
+    display: flex;
+    flex: 1;
+    pointer-events: none;
+    margin-top: 19px;
+    > div {
+      pointer-events: auto;
     }
-    .content {
-      width: 98%;
-      margin: auto;
-      display: flex;
-      flex: 1;
-      pointer-events: none;
-      margin-top: 19px;
-      >div {
-        pointer-events: auto;
-      }
-  
-      .content-l {
-        width: calc(50%);
-        min-width:460px;
-        margin-right:20px;
 
-      }
+    .content-l {
-  
+      width: calc(50%);
-  
+      min-width: 460px;
-      .content-m {
+      margin-right: 20px;
-        display: inline-flex;
+    }
-        flex-direction: column;
-        width: calc(100% / 4 );
-        margin-right:20px;
 
-        .content-m-t {
+    .content-m {
-            width:100%;
+      display: inline-flex;
-            height:240px;
+      flex-direction: column;
-            margin-bottom: 20px;
+      width: calc(100% / 4);
-        }
+      margin-right: 20px;
-      }
+
-      .content-r {
+      .content-m-t {
-        width: 49.4%;
+        width: 100%;
+        height: 240px;
+        margin-bottom: 20px;
       }
     }
-    .foot{
+    .content-r {
-      width: 98%;
+      width: 49.4%;
-      margin: auto;
+    }
-      display: flex;
+  }
-      justify-content: space-between;
+  .foot {
-      flex: 1;
+    width: 98%;
-      pointer-events: none;
+    margin: auto;
-      margin-top: 8px;
+    display: flex;
-      >div {
+    justify-content: space-between;
-        pointer-events: auto;
+    flex: 1;
-      }
+    pointer-events: none;
+    margin-top: 8px;
+    > div {
+      pointer-events: auto;
+    }
 
-      .foot-w {
+    .foot-w {
-        width:100%;
+      width: 100%;
+    }
 
-      }
+    .foot-l {
-  
+      width: 726px;
-      .foot-l {
+    }
-        width: 726px;
+    .foot-m {
-      }
+      width: 613px;
-      .foot-m {
+    }
-        width: 613px;
+    .foot-r {
-      }
+      width: 493px;
-      .foot-r {
-        width: 493px;
-      }
     }
   }
-  </style>
+}
-  
+</style>

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

@@ -847,15 +847,15 @@ export const gzmsMap = {
 export const planDeviceMap = {
   1: "摄像机",
   2: "可变信息标志",
-  3: "气象监测器",
+  // 3: "气象监测器",
-  4: "出口诱导灯",
+  // 4: "出口诱导灯",
   5: "路段语音广播",
-  6: "护栏碰撞",
+  // 6: "护栏碰撞",
-  7: "毫米波雷达",
+  // 7: "毫米波雷达",
   8: "合流区预警",
-  9: "智慧锥桶",
+  // 9: "智慧锥桶",
   10: "激光疲劳唤醒",
-  11: "类交通量调查站",
+  // 11: "一类交通量调查站",
   12: "行车诱导",
   13: "智能设备箱",
   14: "光线在线监测",
@@ -870,42 +870,42 @@ export const planDeviceOptions = [
     value: 2,
     label: "可变信息标志",
   },
-  {
+  // {
-    value: 3,
+  //   value: 3,
-    label: "气象监测器",
+  //   label: "气象监测器",
-  },
+  // },
-  {
+  // {
-    value: 4,
+  //   value: 4,
-    label: "出口诱导灯",
+  //   label: "出口诱导灯",
-  },
+  // },
   {
     value: 5,
     label: "路段语音广播",
   },
-  {
+  // {
-    value: 6,
+  //   value: 6,
-    label: "护栏碰撞",
+  //   label: "护栏碰撞",
-  },
+  // },
-  {
+  // {
-    value: 7,
+  //   value: 7,
-    label: "毫米波雷达",
+  //   label: "毫米波雷达",
-  },
+  // },
   {
     value: 8,
     label: "合流区预警",
   },
-  {
+  // {
-    value: 9,
+  //   value: 9,
-    label: "智慧锥桶",
+  //   label: "智慧锥桶",
-  },
+  // },
   {
     value: 10,
     label: "激光疲劳唤醒",
   },
-  {
+  // {
-    value: 11,
+  //   value: 11,
-    label: "类交通量调查站",
+  //   label: "一类交通量调查站",
-  },
+  // },
   {
     value: 12,
     label: "行车诱导",
@@ -984,6 +984,7 @@ const BoardChildTypes = {
   "2-3": "雨棚可变信息标志",
   "2-4": "站前悬臂式可变信息标志",
 };
+export const PanoramicCameraTypes = Object.keys(CameraChildTypes).slice(3, 5);
 
 export const ChildTypes = {
   1: CameraChildTypes,

ruoyi-ui/vue.config.js

@@ -54,7 +54,7 @@ module.exports = {
         // target: `http://10.168.78.135:8087`,  //王钦
         // target: `http://10.168.66.196:8087`, //正晨后台 连现场物联 刘文阁2
         // target: `http://10.168.68.42:8087`, //王思祥
-        // target: `http://10.168.65.194:8087`, //赵祥龙
+        target: `http://10.168.65.194:8087`, //赵祥龙
         // target: `http://10.168.65.156:8097`, //孟
         target: `http://10.168.56.165:8087`, //王家宝