diff --git a/ruoyi-ui/src/components/eventDialogTable/video.vue b/ruoyi-ui/src/components/eventDialogTable/video.vue
index 165e6f63..3e4ae9f4 100644
--- a/ruoyi-ui/src/components/eventDialogTable/video.vue
+++ b/ruoyi-ui/src/components/eventDialogTable/video.vue
@@ -142,6 +142,7 @@
               </el-col>
             </el-row>
           </el-tab-pane>
+          <el-tab-pane label="在线率统计" name="third">在线率统计</el-tab-pane>
         </el-tabs>
       </el-form>
       <div slot="footer">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue
index aa697716..a68cd97f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/index.vue
@@ -7,12 +7,20 @@
         <ElTabPane label="基本信息" name="first">
           <Descriptions :list="list" :data="data" style="gap: 18px">
             <template #content-deviceState>
-              <img :src="require(`./images/${data.deviceState == 1 ? 'online' : 'offline'}.jpg`)" width="18">
+              <img
+                :src="
+                  require(`./images/${
+                    data.deviceState == 1 ? 'online' : 'offline'
+                  }.jpg`)
+                "
+                width="18"
+              />
               {{ DeviceTypeEnum[data.deviceState] || "" }}
             </template>
           </Descriptions>
         </ElTabPane>
         <ElTabPane label="设备参数" name="second">设备参数</ElTabPane>
+        <ElTabPane label="在线率统计" name="third">在线率统计</ElTabPane>
       </ElTabs>
 
       <div class="bottom">
@@ -20,36 +28,45 @@
       </div>
     </div>
 
-    <BroadcastReleases v-model="releaseVisible" :deviceId="dialogData.iotDeviceId" :pileNum="dialogData.stakeMark"
-      :otherConfig="dialogData.otherConfig" :currentId="dialogData.id" />
+    <BroadcastReleases
+      v-model="releaseVisible"
+      :deviceId="dialogData.iotDeviceId"
+      :pileNum="dialogData.stakeMark"
+      :otherConfig="dialogData.otherConfig"
+      :currentId="dialogData.id"
+    />
   </Dialog>
 </template>
 
 <script>
 import Dialog from "@screen/components/Dialog/index.vue";
-import Button from "@screen/components/Buttons/Button.vue"
-import Descriptions from '@screen/components/Descriptions.vue';
-import BroadcastReleases from "./components/BroadcastReleases.vue"
-import Video from "@screen/components/Video"
+import Button from "@screen/components/Buttons/Button.vue";
+import Descriptions from "@screen/components/Descriptions.vue";
+import BroadcastReleases from "./components/BroadcastReleases.vue";
+import Video from "@screen/components/Video";
 import { DeviceTypeEnum } from "@screen/utils/enum.js";
 
-import { getRoadInfoByStakeMark, getOrganizationName, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
-import { dialogDelayVisible } from "./../mixin"
+import {
+  getRoadInfoByStakeMark,
+  getOrganizationName,
+  getProduct,
+} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+import { dialogDelayVisible } from "./../mixin";
 
 // 广播发布
 export default {
-  name: 'Broadcast',
+  name: "Broadcast",
   mixins: [dialogDelayVisible],
   components: {
     Dialog,
     Button,
     Descriptions,
     BroadcastReleases,
-    Video
+    Video,
   },
   data() {
     return {
-      activeName: 'first',
+      activeName: "first",
       releaseVisible: false,
       data: {
         deviceName: "LH24",
@@ -63,63 +80,65 @@ export default {
       DeviceTypeEnum,
       list: [
         {
-          label: '设备名称',
+          label: "设备名称",
           key: "deviceName",
         },
         {
-          label: '道路名称',
+          label: "道路名称",
           key: "roadName",
         },
         {
-          label: '设备桩号',
+          label: "设备桩号",
           key: "stakeMark",
         },
         {
-          label: '所属方向',
+          label: "所属方向",
           key: "direction",
-          enum: "CameraDirectionEnum"
+          enum: "CameraDirectionEnum",
         },
         {
-          label: '所属机构',
+          label: "所属机构",
           key: "organizationName",
         },
         {
-          label: '设备厂商',
+          label: "设备厂商",
           key: "brand",
         },
         {
-          label: '设备状态',
+          label: "设备状态",
           key: "deviceState",
-          enum: "DeviceTypeEnum"
+          enum: "DeviceTypeEnum",
         },
-      ]
-    }
+      ],
+    };
   },
   async created() {
-    this.data = { ...this.dialogData, roadName: null }
+    this.data = { ...this.dialogData, roadName: null };
 
-    getProduct(this.dialogData.productId)
-      .then(data => {
-        this.dialogData.brand = data.brand;
-      })
+    getProduct(this.dialogData.productId).then((data) => {
+      this.dialogData.brand = data.brand;
+    });
 
-    getOrganizationName(this.dialogData.iotDeviceId)
-      .then(data => {
-        this.dialogData.organizationName = data?.organizationName;
-      })
+    getOrganizationName(this.dialogData.iotDeviceId).then((data) => {
+      this.dialogData.organizationName = data?.organizationName;
+    });
 
     const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
-    console.log("%c [ roadInfo ]-103-「index.vue」", "font-size:15px; background:#36347c; color:#7a78c0;", roadInfo.roadName);
+    console.log(
+      "%c [ roadInfo ]-103-「index.vue」",
+      "font-size:15px; background:#36347c; color:#7a78c0;",
+      roadInfo.roadName
+    );
 
     if (roadInfo) this.data.roadName = roadInfo.roadName;
   },
   methods: {
-    handleClickTabs() { }
-  }
-}
+    handleClickTabs() {},
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .Broadcast {
   width: 600px;
   height: 240px;
@@ -154,7 +173,7 @@ export default {
     align-items: center;
     justify-content: end;
 
-    >div {
+    > div {
       font-size: 16px;
       padding: 6px 12px;
     }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue
index fc0c3710..988044bd 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue
@@ -6,14 +6,25 @@
         <ElTabPane label="基本信息" name="first">
           <Descriptions :list="list" :data="data" style="gap: 18px">
             <template #content-deviceName>
-              <span>{{ dialogData.deviceName || '-' }}</span>
-              <img @click="controlDialogVisible = true"
-                v-if="[0, '0'].includes(dialogData.parseOtherConfig && dialogData.parseOtherConfig.ptzCtrl)"
-                src="@screen/images/camera-control-icon.svg" width="18px" height="18px" style="cursor: pointer;">
+              <span>{{ dialogData.deviceName || "-" }}</span>
+              <img
+                @click="controlDialogVisible = true"
+                v-if="
+                  [0, '0'].includes(
+                    dialogData.parseOtherConfig &&
+                      dialogData.parseOtherConfig.ptzCtrl
+                  )
+                "
+                src="@screen/images/camera-control-icon.svg"
+                width="18px"
+                height="18px"
+                style="cursor: pointer"
+              />
             </template>
           </Descriptions>
         </ElTabPane>
         <ElTabPane label="摄相机参数" name="second">摄相机参数</ElTabPane>
+        <ElTabPane label="在线率统计" name="third">在线率统计</ElTabPane>
       </ElTabs>
 
       <div class="bottom">
@@ -22,71 +33,77 @@
       </div>
     </div>
 
-    <CameraControlDialog :deviceId="dialogData.iotDeviceId" v-model="controlDialogVisible" />
+    <CameraControlDialog
+      :deviceId="dialogData.iotDeviceId"
+      v-model="controlDialogVisible"
+    />
   </Dialog>
 </template>
 
 <script>
 import Dialog from "@screen/components/Dialog/index.vue";
-import Button from "@screen/components/Buttons/Button.vue"
-import Video from "@screen/components/Video"
-import Descriptions from '@screen/components/Descriptions.vue';
+import Button from "@screen/components/Buttons/Button.vue";
+import Video from "@screen/components/Video";
+import Descriptions from "@screen/components/Descriptions.vue";
 import CameraControlDialog from "./components/CameraControlDialog.vue";
 
-import { getRoadInfoByStakeMark, getOrganizationName } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
+import {
+  getRoadInfoByStakeMark,
+  getOrganizationName,
+} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
 
-import { dialogDelayVisible } from "./../mixin"
+import { dialogDelayVisible } from "./../mixin";
 
 // 摄像机弹窗
 export default {
-  name: 'Camera',
+  name: "Camera",
   mixins: [dialogDelayVisible],
   components: {
     Dialog,
     Button,
     Descriptions,
     Video,
-    CameraControlDialog
+    CameraControlDialog,
   },
   data() {
     return {
-      activeName: 'first',
+      activeName: "first",
       controlDialogVisible: false,
       data: {},
       list: [
         {
-          label: '设备名称',
+          label: "设备名称",
           key: "deviceName",
         },
         {
-          label: '道路名称',
+          label: "道路名称",
           key: "roadName",
         },
         {
-          label: '设备编号',
+          label: "设备编号",
           key: "deviceCode",
         },
         {
-          label: '所属机构',
+          label: "所属机构",
           key: "organizationName",
         },
         {
-          label: '设备桩号',
+          label: "设备桩号",
           key: "stakeMark",
         },
         {
-          label: '设备方向',
+          label: "设备方向",
           key: "direction",
-          enum: "CameraDirectionEnum"
+          enum: "CameraDirectionEnum",
         },
         {
-          label: '设备状态',
+          label: "设备状态",
           key: "deviceState",
           enum: "DeviceTypeEnum",
           gridColumn: 2,
         },
         {
-          label: '状态更新时间',
+          label: "状态更新时间",
           key: "updateTime",
           gridColumn: 2,
           // enum: "CameraDirectionEnum"
@@ -96,18 +113,15 @@ export default {
         //   key: "${longitude} / ${latitude}",
         // },
       ],
-    }
-  },
-  watch: {
-
+    };
   },
+  watch: {},
   async created() {
     this.data = { ...this.dialogData, organizationName: null, roadName: null };
 
-    getOrganizationName(this.dialogData.iotDeviceId)
-      .then((data) => {
-        this.data.organizationName = data?.organizationName;
-      });
+    getOrganizationName(this.dialogData.iotDeviceId).then((data) => {
+      this.data.organizationName = data?.organizationName;
+    });
 
     const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
 
@@ -118,12 +132,12 @@ export default {
       if (bool) return;
 
       this.controlDialogVisible = false;
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .Camera {
   width: 600px;
   height: 510px;
@@ -176,7 +190,7 @@ export default {
     align-items: center;
     justify-content: end;
 
-    >div {
+    > div {
       font-size: 16px;
       padding: 6px 12px;
     }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/index.vue
index c9e55a7a..3e846243 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Intermodulation/index.vue
@@ -8,13 +8,16 @@
           <Descriptions :list="list" :data="data" style="gap: 18px" />
         </ElTabPane>
         <ElTabPane label="设备参数" name="second">
-          <div class="content-second" style="height: 185px;">
+          <div class="content-second" style="height: 185px">
             <RadioGroup v-model="roadType" :options="roadTypeList" />
             <span>当前车流量: 999辆</span>
-            <LineChartForTraffic style="flex: 1;" v-if="activeName === 'second'" />
+            <LineChartForTraffic
+              style="flex: 1"
+              v-if="activeName === 'second'"
+            />
           </div>
         </ElTabPane>
-        <ElTabPane label="在线统计率" name="third">
+        <ElTabPane label="在线率统计" name="third">
           <LineChart v-if="activeName === 'third'" />
         </ElTabPane>
       </ElTabs>
@@ -24,22 +27,25 @@
 
 <script>
 import Dialog from "@screen/components/Dialog/index.vue";
-import Button from "@screen/components/Buttons/Button.vue"
-import Descriptions from '@screen/components/Descriptions.vue';
-import Video from "@screen/components/Video"
-import LineChart from './components/LineChart/index.vue';
-import LineChartForTraffic from './components/LineChartForTraffic/index.vue';
-import Switcher from '@screen/pages/service/PublishingChannelManagement/components/Switcher.vue';
-
-import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
-import { dialogDelayVisible } from "./../mixin"
+import Button from "@screen/components/Buttons/Button.vue";
+import Descriptions from "@screen/components/Descriptions.vue";
+import Video from "@screen/components/Video";
+import LineChart from "./components/LineChart/index.vue";
+import LineChartForTraffic from "./components/LineChartForTraffic/index.vue";
+import Switcher from "@screen/pages/service/PublishingChannelManagement/components/Switcher.vue";
+
+import {
+  getRoadInfoByStakeMark,
+  getProduct,
+} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+import { dialogDelayVisible } from "./../mixin";
 import request from "@/utils/request";
-import { Message } from 'element-ui';
-import RadioGroup from '@screen/components/FormConfig/components/RadioGroup/index.vue';
+import { Message } from "element-ui";
+import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue";
 
 // 广播发布
 export default {
-  name: 'Intermodulation',
+  name: "Intermodulation",
   mixins: [dialogDelayVisible],
   components: {
     Dialog,
@@ -49,11 +55,11 @@ export default {
     LineChartForTraffic,
     Video,
     Switcher,
-    RadioGroup
+    RadioGroup,
   },
   data() {
     return {
-      activeName: 'first',
+      activeName: "first",
       releaseVisible: false,
       secondLoading: true,
       data: {
@@ -67,32 +73,32 @@ export default {
       },
 
       roadTypeList: [
-        { key: '1', label: '济南方向' },
-        { key: '3', label: '菏泽方向' },
+        { key: "1", label: "济南方向" },
+        { key: "3", label: "菏泽方向" },
       ],
-      roadType: '1',
+      roadType: "1",
       list: [
         {
-          label: '设备名称',
+          label: "设备名称",
           key: "deviceName",
         },
         {
-          label: '设备桩号',
+          label: "设备桩号",
           key: "stakeMark",
         },
         {
-          label: '道路名称',
+          label: "道路名称",
           key: "roadName",
         },
         {
-          label: '设备方向',
+          label: "设备方向",
           key: "direction",
-          enum: "CameraDirectionEnum"
+          enum: "CameraDirectionEnum",
         },
         {
-          label: '设备状态',
+          label: "设备状态",
           key: "deviceState",
-          enum: "DeviceTypeEnum"
+          enum: "DeviceTypeEnum",
         },
         // {
         //   label: '设备厂商',
@@ -101,21 +107,25 @@ export default {
       ],
       activeOption: {
         active: {
-          text: "开"
+          text: "开",
         },
         unActive: {
-          text: "关"
-        }
+          text: "关",
+        },
       },
-      devicesList: []
-    }
+      devicesList: [],
+    };
   },
   async created() {
     // if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883';
 
-    this.data = { ...this.dialogData, roadName: null }
+    this.data = { ...this.dialogData, roadName: null };
 
-    console.log("%c [ dialogData ]-103-「index.vue」", "font-size:15px; background:#36347c; color:#7a78c0;", this.dialogData);
+    console.log(
+      "%c [ dialogData ]-103-「index.vue」",
+      "font-size:15px; background:#36347c; color:#7a78c0;",
+      this.dialogData
+    );
 
     // getProduct(this.dialogData.productId)
     //   .then(data => {
@@ -125,17 +135,17 @@ export default {
     const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
 
     if (roadInfo) this.data.roadName = roadInfo.roadName;
-  }
-}
+  },
+};
 </script>
 
-<style lang='scss'>
+<style lang="scss">
 div.switcher {
   font-size: 12px;
   padding: 2px;
 }
 </style>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .Intermodulation {
   width: 510px;
   height: 240px;
@@ -178,7 +188,7 @@ div.switcher {
     align-items: center;
     justify-content: end;
 
-    >div {
+    > div {
       font-size: 16px;
       padding: 6px 12px;
     }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
index fcd88622..5f8bf7dd 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
@@ -10,37 +10,41 @@
         <ElTabPane label="设备参数" name="second">
           <DeviceParams disabled :dialogData="dialogData" />
         </ElTabPane>
-        <ElTabPane label="在线统计率" name="third">
+        <ElTabPane label="在线率统计" name="third">
           <LineChart v-if="activeName === 'third'" style="height: 222px" />
         </ElTabPane>
       </ElTabs>
     </div>
 
     <template #footer>
-      <Button @click.native="deviceControlVisible = true">
-        设备操作
-      </Button>
+      <Button @click.native="deviceControlVisible = true"> 设备操作 </Button>
     </template>
 
-    <DeviceControlDialog v-model="deviceControlVisible" :dialogData="dialogData" />
+    <DeviceControlDialog
+      v-model="deviceControlVisible"
+      :dialogData="dialogData"
+    />
   </Dialog>
 </template>
 
 <script>
 import Dialog from "@screen/components/Dialog/index.vue";
-import Button from "@screen/components/Buttons/Button.vue"
-import Descriptions from '@screen/components/Descriptions.vue';
-import Video from "@screen/components/Video"
-import LineChart from './components/LineChart/index.vue';
-import DeviceParams from "./components/DeviceParams.vue"
-import DeviceControlDialog from "./components/DeviceControlDialog.vue"
-
-import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
-import { dialogDelayVisible } from "./../mixin"
+import Button from "@screen/components/Buttons/Button.vue";
+import Descriptions from "@screen/components/Descriptions.vue";
+import Video from "@screen/components/Video";
+import LineChart from "./components/LineChart/index.vue";
+import DeviceParams from "./components/DeviceParams.vue";
+import DeviceControlDialog from "./components/DeviceControlDialog.vue";
+
+import {
+  getRoadInfoByStakeMark,
+  getProduct,
+} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+import { dialogDelayVisible } from "./../mixin";
 
 // 广播发布
 export default {
-  name: 'SmartDevice',
+  name: "SmartDevice",
   mixins: [dialogDelayVisible],
   components: {
     Dialog,
@@ -49,11 +53,11 @@ export default {
     Video,
     Button,
     DeviceParams,
-    DeviceControlDialog
+    DeviceControlDialog,
   },
   data() {
     return {
-      activeName: 'first',
+      activeName: "first",
       releaseVisible: false,
       deviceControlVisible: false,
       data: {
@@ -67,60 +71,63 @@ export default {
       },
       list: [
         {
-          label: '设备名称',
+          label: "设备名称",
           key: "deviceName",
         },
         {
-          label: '设备桩号',
+          label: "设备桩号",
           key: "stakeMark",
         },
         {
-          label: '道路名称',
+          label: "道路名称",
           key: "roadName",
         },
         {
-          label: '设备方向',
+          label: "设备方向",
           key: "direction",
-          enum: "CameraDirectionEnum"
+          enum: "CameraDirectionEnum",
         },
         {
-          label: '设备状态',
+          label: "设备状态",
           key: "deviceState",
-          enum: "DeviceTypeEnum"
+          enum: "DeviceTypeEnum",
         },
         {
-          label: '设备厂商',
+          label: "设备厂商",
           key: "brand",
         },
-      ]
-    }
+      ],
+    };
   },
   async created() {
     // if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883';
 
-    this.data = { ...this.dialogData, roadName: null }
+    this.data = { ...this.dialogData, roadName: null };
 
-    console.log("%c [ dialogData ]-103-「index.vue」", "font-size:15px; background:#36347c; color:#7a78c0;", this.dialogData);
+    console.log(
+      "%c [ dialogData ]-103-「index.vue」",
+      "font-size:15px; background:#36347c; color:#7a78c0;",
+      this.dialogData
+    );
 
-    getProduct(this.dialogData.productId)
-      .then(data => {
-        this.dialogData.brand = data.brand;
-      })
+    getProduct(this.dialogData.productId).then((data) => {
+      this.dialogData.brand = data.brand;
+    });
 
     const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
 
     if (roadInfo) this.data.roadName = roadInfo.roadName;
-  }
-}
+  },
+};
 </script>
 
-<style lang='scss'>
+<style lang="scss">
 div.switcher {
   font-size: 12px;
   padding: 2px;
 }
 </style>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .SmartDevice {
   width: 510px;
   // height: 240px;
@@ -155,7 +162,7 @@ div.switcher {
     align-items: center;
     justify-content: end;
 
-    >div {
+    > div {
       font-size: 16px;
       padding: 6px 12px;
     }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/TrafficIncidents/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/TrafficIncidents/index.vue
index 2adbf40e..944d0c5f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/TrafficIncidents/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/TrafficIncidents/index.vue
@@ -1,37 +1,50 @@
 <template>
-  <Dialog v-model="obverseVisible" :title="dialogData._itemData && dialogData._itemData.title">
+  <Dialog
+    v-model="obverseVisible"
+    :title="dialogData._itemData && dialogData._itemData.title"
+  >
     <div class="TrafficIncidents">
       <div class="header">
         <Video class="video-stream" :pileNum="dialogData.stakeMark" />
-        <Video class="video-stream" :pileNum="dialogData.stakeMark" :rangeIndex="1" />
+        <Video
+          class="video-stream"
+          :pileNum="dialogData.stakeMark"
+          :rangeIndex="1"
+        />
       </div>
 
-      <Descriptions labelWidth="72px" :list="list" :data="data" style="gap: 18px" column="7" />
+      <Descriptions
+        labelWidth="72px"
+        :list="list"
+        :data="data"
+        style="gap: 18px"
+        column="7"
+      />
     </div>
   </Dialog>
 </template>
 
 <script>
 import Dialog from "@screen/components/Dialog/index.vue";
-import Descriptions from '@screen/components/Descriptions.vue';
+import Descriptions from "@screen/components/Descriptions.vue";
 // import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
-import Video from "@screen/components/Video"
+import Video from "@screen/components/Video";
 
 import request from "@/utils/request";
-import { dialogDelayVisible } from "./../mixin"
+import { dialogDelayVisible } from "./../mixin";
 
 // 所有交通事件的详情
 export default {
-  name: 'TrafficIncidents',
+  name: "TrafficIncidents",
   mixins: [dialogDelayVisible],
   components: {
     Dialog,
     Descriptions,
-    Video
+    Video,
   },
   data() {
     return {
-      activeName: 'first',
+      activeName: "first",
       deviceControlVisible: false,
       data: {
         deviceType: "行车诱导",
@@ -43,94 +56,93 @@ export default {
       },
       list: [
         {
-          label: '机构',
+          label: "机构",
           key: "organizationName",
-          gridColumn: '3'
+          gridColumn: "3",
         },
         {
-          label: '高速名称',
+          label: "高速名称",
           key: "roadName",
-          gridColumn: '3'
+          gridColumn: "3",
         },
         {
-          label: '感知时间',
+          label: "感知时间",
           key: "occurrenceTime",
-          gridColumn: '3',
-          visible: () => this.isPerceived
+          gridColumn: "3",
+          visible: () => this.isPerceived,
         },
         {
-          label: '桩号',
+          label: "桩号",
           key: "stakeMark",
-          gridColumn: '3'
+          gridColumn: "3",
         },
         {
-          label: '事件源',
+          label: "事件源",
           key: "stringEventSource",
-          gridColumn: '3'
+          gridColumn: "3",
         },
         {
-          label: '车道列表',
+          label: "车道列表",
           key: "lang",
           enum: "LaneOccupancy",
-          gridColumn: '2'
+          gridColumn: "3",
         },
         {
-          label: '事件状态',
+          label: "事件状态",
           key: "eventState",
           enum: "EventType",
-          gridColumn: '2'
+          gridColumn: "3",
         },
         {
-          label: '经/纬度',
+          label: "经/纬度",
           key: "${longitude} / ${latitude}",
-          gridColumn: '3'
+          gridColumn: "5",
         },
         {
-          label: '发生时间',
+          label: "发生时间",
           key: "occurrenceTime",
-          gridColumn: '3'
+          gridColumn: "3",
         },
         {
-          label: '行驶方向',
+          label: "行驶方向",
           key: "direction",
           enum: "CameraDirectionEnum",
-          gridColumn: '3'
+          gridColumn: "3",
         },
         {
-          label: '完结时间',
+          label: "完结时间",
           key: "endTime",
-          gridColumn: '3'
+          gridColumn: "3",
         },
         {
-          label: '事件描述',
+          label: "事件描述",
           key: "description",
-          gridColumn: '5'
+          gridColumn: "5",
         },
-      ]
-    }
+      ],
+    };
   },
   async created() {
     this.data = { ...this.dialogData };
     request({
       url: `/business/trafficIncidents/getEventInfo/${this.dialogData.id}`,
-      method: "get"
+      method: "get",
     })
       .then(({ code, data }) => {
         if (code != 200) return;
 
         this.data = { ...data, ...this.data };
-        console.log(data)
-      }).catch((err) => {
-
-      });
+        console.log(data);
+      })
+      .catch((err) => {});
   },
   methods: {
-    handleClickTabs() { }
-  }
-}
+    handleClickTabs() {},
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .TrafficIncidents {
   width: 600px;
   color: #fff;
@@ -146,7 +158,7 @@ export default {
     display: flex;
     gap: 9px;
 
-    >div.video-stream {
+    > div.video-stream {
       height: 210px;
     }
   }
@@ -174,7 +186,7 @@ export default {
     align-items: center;
     justify-content: end;
 
-    >div {
+    > div {
       font-size: 16px;
       padding: 6px 12px;
     }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue
index cdf2ba21..7078d4e2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue
@@ -6,29 +6,55 @@
           <div class="mainDialog">
             <div class="dialog_head">
               <div class="tit">{{ selectedDevice.deviceName }}</div>
-              <img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="____onClose">
-              <img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="">
+              <img
+                class="btnCls"
+                src="@/assets/jihe/images/dialog/ibCls.png"
+                alt=""
+                @click="____onClose"
+              />
+              <img
+                class="deco"
+                src="@/assets/jihe/images/dialog/ibHeadDeco.png"
+                alt=""
+              />
             </div>
             <div class="dialogContent">
-              <div v-if="selectedBdMsg.length > 0" class="dialogContent_box" style="height: 100%;">
+              <div
+                v-if="selectedBdMsg.length > 0"
+                class="dialogContent_box"
+                style="height: 100%"
+              >
                 <vuescroll :ops="scrollOptions" class="listBox">
-                  <div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem">
+                  <div
+                    v-for="(itm, indx) in selectedBdMsg"
+                    :key="indx"
+                    class="tplItem"
+                  >
                     <!-- 模板内容 -->
-                    <BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
+                    <BoardPreview
+                      class="boardPreview"
+                      :boardWH="selectedSize"
+                      :tpl="itm"
+                    ></BoardPreview>
                     <!-- 操作按钮 -->
                     <div class="infoBtnBox">
                       <el-tooltip content="编辑" placement="top">
-                        <p @click="____onEditBoardItem(itm, indx)" class="btn btnEdit"></p>
+                        <p
+                          @click="____onEditBoardItem(itm, indx)"
+                          class="btn btnEdit"
+                        ></p>
                       </el-tooltip>
                       <el-tooltip content="删除" placement="top">
-                        <p @click="____onDeleteBoardItem(indx)" class="btn btnDelete"></p>
+                        <p
+                          @click="____onDeleteBoardItem(indx)"
+                          class="btn btnDelete"
+                        ></p>
                       </el-tooltip>
                     </div>
                   </div>
-
                 </vuescroll>
               </div>
-              <div v-else class="dialogContent_box" style="height: 100%;">
+              <div v-else class="dialogContent_box" style="height: 100%">
                 <div class="dialogContent_box_empty">暂无数据</div>
               </div>
               <div class="dialogContent_bottom">
@@ -37,15 +63,24 @@
                     <div class="show_bottom_tab_box">
                       <div class="deviceInfo">
                         <div class="deviceInfo_l">设备名称</div>
-                        <div class="deviceInfo_r">{{ selectedDevice.deviceName }}</div>
+                        <div class="deviceInfo_r">
+                          {{ selectedDevice.deviceName }}
+                        </div>
                       </div>
                       <div class="deviceInfo">
                         <div class="deviceInfo_l">设备桩号</div>
-                        <div class="deviceInfo_r">{{ selectedDevice.stakeMark }}</div>
+                        <div class="deviceInfo_r">
+                          {{ selectedDevice.stakeMark }}
+                        </div>
                       </div>
                       <div class="deviceInfo">
                         <div class="deviceInfo_l">屏幕像素</div>
-                        <div class="deviceInfo_r">{{ JSON.parse(selectedDevice.otherConfig).screenSize }} px</div>
+                        <div class="deviceInfo_r">
+                          {{
+                            JSON.parse(selectedDevice.otherConfig).screenSize
+                          }}
+                          px
+                        </div>
                       </div>
                       <!-- <div class="deviceInfo" v-for="item in tabDataInfoList" :key="item.id">
                       <div class="deviceInfo_l">{{ item.tit }}: </div>
@@ -53,36 +88,83 @@
                     </div> -->
                     </div>
                   </el-tab-pane>
-                  <el-tab-pane label="设备参数" name="second">设备参数</el-tab-pane>
+                  <el-tab-pane label="设备参数" name="second"
+                    >设备参数</el-tab-pane
+                  >
+                  <el-tab-pane label="在线率统计" name="third"
+                    >在线率统计</el-tab-pane
+                  >
                 </el-tabs>
               </div>
               <div class="dialogContent_bottom_btn">
-                <el-button class="btnInfoBoard" type="add" @click.native="____onAddDeviceItem()">添加信息</el-button>
-                <el-button class="btnInfoBoard" type="publish" @click="____publishInfo" :disabled="selectedBdMsg.length <= 0">发布信息</el-button>
+                <el-button
+                  class="btnInfoBoard"
+                  type="add"
+                  @click.native="____onAddDeviceItem()"
+                  >添加信息</el-button
+                >
+                <el-button
+                  class="btnInfoBoard"
+                  type="publish"
+                  @click="____publishInfo"
+                  :disabled="selectedBdMsg.length <= 0"
+                  >发布信息</el-button
+                >
               </div>
               <div class="sideSwitch" @click="____onShowTemplate">
-                <img class="img" src="@/assets/screen/xtb/leftd.png" alt=""
-                  :style="{ 'transform': isShowTemplate ? 'rotate(0deg)' : 'rotate(180deg)' }">
+                <img
+                  class="img"
+                  src="@/assets/screen/xtb/leftd.png"
+                  alt=""
+                  :style="{
+                    transform: isShowTemplate
+                      ? 'rotate(0deg)'
+                      : 'rotate(180deg)',
+                  }"
+                />
                 <div class="txt">信息模板</div>
               </div>
               <!-- 附近的摄像机 -->
-              <div class="sideSwitch" style="top:36%;" @click="____onShowCameraShower">
-                <img class="img" src="@/assets/screen/xtb/leftd.png" alt=""
-                  :style="{ 'transform': dialogInfoCamera ? 'rotate(0deg)' : 'rotate(180deg)' }">
+              <div
+                class="sideSwitch"
+                style="top: 36%"
+                @click="____onShowCameraShower"
+              >
+                <img
+                  class="img"
+                  src="@/assets/screen/xtb/leftd.png"
+                  alt=""
+                  :style="{
+                    transform: dialogInfoCamera
+                      ? 'rotate(0deg)'
+                      : 'rotate(180deg)',
+                  }"
+                />
                 <div class="txt">附近相机</div>
-            </div>
+              </div>
             </div>
           </div>
 
           <!-- 信息模板 -->
           <div v-if="isShowTemplate" class="sideContent template">
             <vuescroll :ops="scrollOptions" class="listBox">
-              <div v-for="(item, index) in templateAvailable" :key="item.dictValue">
+              <div
+                v-for="(item, index) in templateAvailable"
+                :key="item.dictValue"
+              >
                 <!-- 原来是<el-collapse v-model="activeNames"> -->
                 <h3>{{ item.dictLabel }}</h3>
-                <div v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
+                <div
+                  v-for="(itm, indx) in item.list"
+                  :key="indx"
+                  class="tplItem"
+                >
                   <!-- 模板内容 -->
-                  <BoardTplPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardTplPreview>
+                  <BoardTplPreview
+                    class="boardPreview"
+                    :boardWH="selectedSize"
+                    :tpl="itm"
+                  ></BoardTplPreview>
                   <!-- <div class="infoPreview">
                       <div class="infoBox" :style="____boardBgStyle">
                         <span class="infoTxt" :style="____boardTxtStyle(itm)" v-html="itm.content.replace(/\n|\r\n/g, '<br>').replace(/ /g, '&nbsp')"></span>
@@ -91,7 +173,10 @@
                   <!-- 操作按钮 -->
                   <div class="infoBtnBox infoBtnBoxSm">
                     <el-tooltip content="加入待下发信息" placement="top">
-                      <p @click="____onTplToDevice(itm, false)" class="btn btnApply"></p>
+                      <p
+                        @click="____onTplToDevice(itm, false)"
+                        class="btn btnApply"
+                      ></p>
                     </el-tooltip>
                   </div>
                 </div>
@@ -99,44 +184,55 @@
             </vuescroll>
           </div>
 
-
           <!-- 附近相机 -->
-          <CameraShower class="sideContent camera" :visible.sync="dialogInfoCamera" :list="nearbyCameraList"></CameraShower>
-          
-
+          <CameraShower
+            class="sideContent camera"
+            :visible.sync="dialogInfoCamera"
+            :list="nearbyCameraList"
+          ></CameraShower>
         </div>
       </transition>
 
-      <BoardInfoEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type"
-        :visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></BoardInfoEditor>
+      <BoardInfoEditor
+        @afterSubmit="____onEditSubmit"
+        :mode="editDialog.mode"
+        :type="editDialog.type"
+        :visible.sync="editDialog.visible"
+        :screenSize="selectedSize"
+        :tpl="editDialog.tpl"
+      ></BoardInfoEditor>
     </div>
   </Teleport>
 </template>
 
 <script>
-import { listDevice, invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device.js'
+import {
+  listDevice,
+  invokedFunction,
+  getDeviceRealtimeProperty,
+} from "@/api/device/device.js";
 // import infoBoardTestData from "@/common/infoBoardTestData.js"
-import { getBoardDeviceInfo } from '@/api/board/board'
-import { getNearbyCameraByPileNum } from '@/api/camera/camera'
+import { getBoardDeviceInfo } from "@/api/board/board";
+import { getNearbyCameraByPileNum } from "@/api/camera/camera";
 
-import BoardPreview from "@screen/components/infoBoard/BoardPreview.vue"
-import BoardTplPreview from "@screen/components/infoBoard/BoardTplPreview.vue"
-import BoardInfoEditor from '@screen/components/infoBoard/BoardInfoEditor'
+import BoardPreview from "@screen/components/infoBoard/BoardPreview.vue";
+import BoardTplPreview from "@screen/components/infoBoard/BoardTplPreview.vue";
+import BoardInfoEditor from "@screen/components/infoBoard/BoardInfoEditor";
 
-import vuescroll from 'vuescroll'
-import scrollOptions from '@/common/scrollbar.js'
-import Teleport from '@screen/components/Teleport.vue'
+import vuescroll from "vuescroll";
+import scrollOptions from "@/common/scrollbar.js";
+import Teleport from "@screen/components/Teleport.vue";
 
-import { getTemplateList } from '@/api/board/template'
+import { getTemplateList } from "@/api/board/template";
 
-import testDeviceInfo from "@screen/testData/infoBoard.js"
+import testDeviceInfo from "@screen/testData/infoBoard.js";
 
-import CameraShower from '@screen/components/CameraShower'
+import CameraShower from "@screen/components/CameraShower";
 
-import InfoBoard from '@screen/mixins/InfoBoard'
+import InfoBoard from "@screen/mixins/InfoBoard";
 export default {
-  name: 'InfoBoard',
-  mixins:[InfoBoard],
+  name: "InfoBoard",
+  mixins: [InfoBoard],
   data() {
     return {
       isShowTemplate: false,
@@ -148,24 +244,24 @@ export default {
       tabDataInfoList: [],
       cameraDataVideoList: [],
       cameraDataList: [
-        { id: 3001, txt: '设备名称', val: '疲劳唤醒设备1' },
-        { id: 3002, txt: '设备编号', val: 'G00030497B0180001' },
-        { id: 3003, txt: '设备桩号', val: 'K097+900' },
-        { id: 3004, txt: '经/纬度', val: '117.071152/35.910659' },
-        { id: 3005, txt: '道路名称', val: 'G35济菏高速' },
-        { id: 3006, txt: '道路状况', val: '正常' },
-        { id: 3007, txt: '方向', val: '菏泽' }
+        { id: 3001, txt: "设备名称", val: "疲劳唤醒设备1" },
+        { id: 3002, txt: "设备编号", val: "G00030497B0180001" },
+        { id: 3003, txt: "设备桩号", val: "K097+900" },
+        { id: 3004, txt: "经/纬度", val: "117.071152/35.910659" },
+        { id: 3005, txt: "道路名称", val: "G35济菏高速" },
+        { id: 3006, txt: "道路状况", val: "正常" },
+        { id: 3007, txt: "方向", val: "菏泽" },
       ],
       cameraBtnList: [
-        { id: 4001, cmd: 23, dir: 'left', le: '26%', to: '33%', ro: 0 },
-        { id: 4002, cmd: 21, dir: 'up', le: '46%', to: '4%', ro: 90 },
-        { id: 4003, cmd: 24, dir: 'right', le: '65%', to: '33%', ro: 180 },
-        { id: 4004, cmd: 22, dir: 'downward', le: '46%', to: '62%', ro: 267 }
+        { id: 4001, cmd: 23, dir: "left", le: "26%", to: "33%", ro: 0 },
+        { id: 4002, cmd: 21, dir: "up", le: "46%", to: "4%", ro: 90 },
+        { id: 4003, cmd: 24, dir: "right", le: "65%", to: "33%", ro: 180 },
+        { id: 4004, cmd: 22, dir: "downward", le: "46%", to: "62%", ro: 267 },
       ],
       cameraControlList: [
-        { id: 5001, txt: '变倍', numL: 11, numR: 12 },
-        { id: 5002, txt: '光圈', numL: 16, numR: 15 },
-        { id: 5003, txt: '聚焦', numL: 14, numR: 13 }
+        { id: 5001, txt: "变倍", numL: 11, numR: 12 },
+        { id: 5002, txt: "光圈", numL: 16, numR: 15 },
+        { id: 5003, txt: "聚焦", numL: 14, numR: 13 },
       ],
 
       selectedBdMsg: [],
@@ -174,50 +270,53 @@ export default {
         mode: "",
         type: "",
         visible: false,
-        tpl: {}
+        tpl: {},
       },
       scrollOptions,
       templateAvailable: null,
       tplCategory: [], //模板
       templateAll: [],
-      nearbyCameraList:[]
-    }
+      nearbyCameraList: [],
+    };
   },
   props: {
     visible: {
       type: Boolean,
-      default: false
+      default: false,
     },
     selectedDevice: {
       type: Object,
-      default: null
-    }
+      default: null,
+    },
   },
   watch: {
     selectedDevice: {
       handler(newV) {
         this.____initData();
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
-  components: { BoardPreview, BoardTplPreview, BoardInfoEditor, vuescroll, Teleport, 
-    CameraShower
+  components: {
+    BoardPreview,
+    BoardTplPreview,
+    BoardInfoEditor,
+    vuescroll,
+    Teleport,
+    CameraShower,
   },
   created() {
     // this.____getTemplateCategory();
     // this.____getAllTemplate();
   },
-  computed: {
-  },
-  mounted() {
-  },
+  computed: {},
+  mounted() {},
   methods: {
     // 获取信息模板分类
     ____getTemplateCategory() {
-      return this.getDicts('iot_template_category').then(res => {
+      return this.getDicts("iot_template_category").then((res) => {
         this.tplCategory = res.data;
-      })
+      });
     },
     //获取全部模版
     ____getAllTemplate() {
@@ -225,55 +324,58 @@ export default {
         this.templateAll = res.data;
       });
     },
-   //初始化数据
+    //初始化数据
     ____initData() {
-      this.selectedSize = JSON.parse(this.selectedDevice.otherConfig).screenSize;
-      if(this.tplCategory.length && this.templateAll.length){
+      this.selectedSize = JSON.parse(
+        this.selectedDevice.otherConfig
+      ).screenSize;
+      if (this.tplCategory.length && this.templateAll.length) {
         this.____setAvailableTemplate();
-      }else{
-        Promise.all([this.____getTemplateCategory(), this.____getAllTemplate()]).then(res=>{
-           this.____setAvailableTemplate();
-        })
+      } else {
+        Promise.all([
+          this.____getTemplateCategory(),
+          this.____getAllTemplate(),
+        ]).then((res) => {
+          this.____setAvailableTemplate();
+        });
       }
 
       this.____getDeviceInfo();
     },
-  //  获取已选中设备的展示内容
-    ____getDeviceInfo(){
+    //  获取已选中设备的展示内容
+    ____getDeviceInfo() {
       if (IS_TESTING) {
-        
         this.selectedBdMsg = _.cloneDeep(testDeviceInfo.data["3A"].content);
-        
-      }else{
-        getBoardDeviceInfo(this.selectedDevice.iotDeviceId).then(res => {
-          this.selectedBdMsg = res.data["3A"].content;
-        }).catch(err => {
-          
-        })
+      } else {
+        getBoardDeviceInfo(this.selectedDevice.iotDeviceId)
+          .then((res) => {
+            this.selectedBdMsg = res.data["3A"].content;
+          })
+          .catch((err) => {});
       }
     },
-  // 设置当前设备可用的模板
+    // 设置当前设备可用的模板
     ____setAvailableTemplate() {
       this.templateAvailable = [];
       this.tplCategory.forEach((item, index) => {
-        let arr = this.templateAll['' + index];
+        let arr = this.templateAll["" + index];
         if (arr.length > 0) {
           let temp = [];
-          arr.forEach(tpl => {
+          arr.forEach((tpl) => {
             if (tpl.screenSize == this.selectedSize) {
               temp.push(tpl);
             }
-          })
+          });
           if (temp.length > 0) {
             this.templateAvailable.push({
               ...item,
-              list: temp
+              list: temp,
             });
           }
         }
-      })
+      });
     },
-  //调用编辑器编辑设备展示项
+    //调用编辑器编辑设备展示项
     ____onEditBoardItem(tpl, index) {
       // type : board template
       // mode : edit add toDevice toTemplate
@@ -282,17 +384,17 @@ export default {
         visible: true,
         mode: "edit",
         type: "device",
-        tpl
-      }
+        tpl,
+      };
     },
-//删除设备展示项
+    //删除设备展示项
     ____onDeleteBoardItem(index) {
       if (index > -1) {
-        this.selectedBdMsg.splice(index, 1)
-        this.$message.success('删除成功。')
+        this.selectedBdMsg.splice(index, 1);
+        this.$message.success("删除成功。");
       }
     },
-//编辑机编辑后的回调
+    //编辑机编辑后的回调
     ____onEditSubmit(para) {
       this.editDialog.tpl = {};
       this.editDialog.visible = false;
@@ -310,85 +412,93 @@ export default {
       }
     },
 
-    ____refreshPageData(para) { },
+    ____refreshPageData(para) {},
 
     ____getNearbyCams() {
-      if(!this.selectedDevice.stakeMark){
-          this.$message.warning("设备缺少stakeMark字段...");
+      if (!this.selectedDevice.stakeMark) {
+        this.$message.warning("设备缺少stakeMark字段...");
       }
       let stakeMark = this.selectedDevice.stakeMark;
 
       // stakeMark = "K64+300";
 
-      getNearbyCameraByPileNum(stakeMark).then(res=>{
+      getNearbyCameraByPileNum(stakeMark).then((res) => {
         this.nearbyCameraList = res.data;
-      })
+      });
     },
     cameraControlBtnFn(item) {
-      this.getEnergyCameraControlFn(item.cmd, 5)
+      this.getEnergyCameraControlFn(item.cmd, 5);
     },
     cameraControlLeFn(item) {
       // console.log('按钮点击事件', item)
-      this.getEnergyCameraControlFn(item, 5)
+      this.getEnergyCameraControlFn(item, 5);
     },
     getEnergyCameraControlFn(cmd, spe) {
-      getEnergyCameraControlAPi({ camId: this.cameraVal, cmdType: cmd, speed: spe }).then(res => {
+      getEnergyCameraControlAPi({
+        camId: this.cameraVal,
+        cmdType: cmd,
+        speed: spe,
+      }).then((res) => {
         // console.log('控制返回结果', res)
         // this.videoUrl = res.data.liveUrl
-      })
+      });
     },
     cameraValChangeFn() {
-      console.log('点击切换按钮', this.cameraVal)
-      this.cameraValCha(this.cameraOptList, this.cameraVal)
+      console.log("点击切换按钮", this.cameraVal);
+      this.cameraValCha(this.cameraOptList, this.cameraVal);
     },
     // cameraDataVideoList
     cameraValCha(date, num) {
       let str = {
-        0: '正常',
-        1: '网络中断',
-        2: '网络正常无图像',
-        3: '有图像图可能存在问题'
-      }
-      date.forEach(i => {
+        0: "正常",
+        1: "网络中断",
+        2: "网络正常无图像",
+        3: "有图像图可能存在问题",
+      };
+      date.forEach((i) => {
         if (i.camId === num) {
           this.cameraDataVideoList = [
-            { id: 3001, txt: '设备名称', val: i.camName },
-            { id: 3002, txt: '设备编号', val: i.camId },
-            { id: 3003, txt: '设备桩号', val: i.pileNum },
-            { id: 3005, txt: '道路名称', val: i.deptName },
-            { id: 3006, txt: '道路状况', val: i.status == '-1' ? '未启用' : str[Number(i.status)] }
-          ]
+            { id: 3001, txt: "设备名称", val: i.camName },
+            { id: 3002, txt: "设备编号", val: i.camId },
+            { id: 3003, txt: "设备桩号", val: i.pileNum },
+            { id: 3005, txt: "道路名称", val: i.deptName },
+            {
+              id: 3006,
+              txt: "道路状况",
+              val: i.status == "-1" ? "未启用" : str[Number(i.status)],
+            },
+          ];
         }
-      })
+      });
     },
     tabClickFn(tab, event) {
-      console.log(tab, event)
+      console.log(tab, event);
     },
     ____onClose() {
       this.$emit("update:visible", false);
-      this.isShowTemplate = false
+      this.isShowTemplate = false;
     },
     ____onShowTemplate() {
       if (this.dialogInfoCamera) {
-        this.dialogInfoCamera = false
+        this.dialogInfoCamera = false;
       }
-      this.isShowTemplate = !this.isShowTemplate
+      this.isShowTemplate = !this.isShowTemplate;
     },
     ____onShowCameraShower() {
       if (this.isShowTemplate) {
-        this.isShowTemplate = false
+        this.isShowTemplate = false;
       }
-      this.dialogInfoCamera = !this.dialogInfoCamera
+      this.dialogInfoCamera = !this.dialogInfoCamera;
       this.____getNearbyCams();
     },
     subjectBtnFn(item) {
-      this.subjectBtn = item.id
-    }
-  }
-}
+      this.subjectBtn = item.id;
+    },
+  },
+};
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .listBox {
   padding: 20px;
 
@@ -397,7 +507,7 @@ export default {
     display: flex;
     align-items: stretch;
     padding-bottom: 10px;
-    
+
     .boardPreview {
       border: 1px solid rgba(61, 232, 255, 0.5);
       // width: 560px;
@@ -406,7 +516,7 @@ export default {
     }
 
     .infoBtnBox {
-      &.infoBtnBoxSm{
+      &.infoBtnBoxSm {
         width: 60px;
       }
       width: 110px;
@@ -457,7 +567,6 @@ export default {
         color: #ccc;
       }
     }
-
   }
 
   .controlBox {
@@ -481,7 +590,7 @@ export default {
   position: fixed;
   top: 0;
   left: 0;
-  background: rgba(0, 0, 0, .36);
+  background: rgba(0, 0, 0, 0.36);
   z-index: 1100;
   display: flex;
   justify-content: center;
@@ -489,7 +598,7 @@ export default {
   .content {
     display: flex;
     flex-direction: row;
-    }
+  }
 }
 
 .mainDialog {
@@ -504,14 +613,14 @@ export default {
   background-color: #114c66;
   position: relative;
   margin-top: 50px;
-  &.camera{
+  &.camera {
     width: 540px;
     height: 556px;
   }
-  &.template{
+  &.template {
     width: 430px;
     height: 556px;
-    padding:20px 0 20px 10px;
+    padding: 20px 0 20px 10px;
   }
 }
 
@@ -519,7 +628,7 @@ export default {
   width: 100%;
   height: 48px;
   padding: 0 10px;
-  background-image: url('~@/assets/screen/xtb/qbbtit.png');
+  background-image: url("~@/assets/screen/xtb/qbbtit.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
@@ -600,21 +709,21 @@ export default {
 }
 
 .dialogContent_r_btn1 {
-  background-image: url('~@/assets/screen/xtb/gg.png');
+  background-image: url("~@/assets/screen/xtb/gg.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
 }
 
 .dialogContent_r_btn2 {
-  background-image: url('~@/assets/screen/xtb/xx.png');
+  background-image: url("~@/assets/screen/xtb/xx.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
 }
 
 .dialogContent_r_btn3 {
-  background-image: url('~@/assets/screen/xtb/zz.png');
+  background-image: url("~@/assets/screen/xtb/zz.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
@@ -794,7 +903,7 @@ export default {
   left: 27%;
   top: 33%;
   cursor: pointer;
-  background-image: url('~@/assets/screen/xtb/xjleft.png');
+  background-image: url("~@/assets/screen/xtb/xjleft.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
@@ -811,7 +920,7 @@ export default {
   width: 1.2vw;
   height: 2.4vh;
   border-radius: 50%;
-  background-image: url('~@/assets/screen/xtb/jhbtn.png');
+  background-image: url("~@/assets/screen/xtb/jhbtn.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
@@ -826,7 +935,7 @@ export default {
   width: 1.2vw;
   height: 2.4vh;
   border-radius: 50%;
-  background-image: url('~@/assets/screen/xtb/addbtn.png');
+  background-image: url("~@/assets/screen/xtb/addbtn.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center;
diff --git a/ruoyi-ui/src/views/workbench/config/components/board.vue b/ruoyi-ui/src/views/workbench/config/components/board.vue
index 291cb5e2..edbe7206 100644
--- a/ruoyi-ui/src/views/workbench/config/components/board.vue
+++ b/ruoyi-ui/src/views/workbench/config/components/board.vue
@@ -1,7 +1,16 @@
 <template>
   <div style="width: 100%; height: 100%">
-    <el-dialog v-dialogDrag class="workbench-dialog workbench-boardDialog" :title="title" width="835px" append-to-body
-      :visible="visible" :before-close="handleClosee" :close-on-click-modal="false" :modal="false">
+    <el-dialog
+      v-dialogDrag
+      class="workbench-dialog workbench-boardDialog"
+      :title="title"
+      width="835px"
+      append-to-body
+      :visible="visible"
+      :before-close="handleClosee"
+      :close-on-click-modal="false"
+      :modal="false"
+    >
       <div class="dialogStyleBox">
         <div class="dialogLine"></div>
         <div class="dialogCloseButton"></div>
@@ -9,11 +18,18 @@
       <div v-show="infoType == 'info'" style="display: flex">
         <div style="float: left">
           <div class="infoBox">
-            <el-table :data="contentList" row-key="ID" max-height="550" v-loading="loading">
+            <el-table
+              :data="contentList"
+              row-key="ID"
+              max-height="550"
+              v-loading="loading"
+            >
               <el-table-column align="left" width="645">
                 <template slot-scope="scope">
                   <div class="contentBox">
-                    <div class="content" :style="{
+                    <div
+                      class="content"
+                      :style="{
                         color: scope.row.COLOR,
                         fontSize: addForm.devicePixel
                           ? getFontSize(
@@ -28,8 +44,10 @@
                         height: addForm.devicePixel
                           ? getDevicePixel(addForm.devicePixel, 1) + 'px'
                           : '',
-                      }">
-                      <span :style="{
+                      }"
+                    >
+                      <span
+                        :style="{
                           left: getCoordinate(
                             scope.row.COORDINATE.substring(0, 3),
                             'left'
@@ -38,9 +56,16 @@
                             scope.row.COORDINATE.substring(3, 6),
                             'top'
                           ),
-                        }" class="boardTextStyle" v-html="
-                          scope.row.CONTENT?scope.row.CONTENT.replace(/\n|\r\n/g,'<br>').replace(/ /g, '&nbsp').replace('<r><n>', '<br>'):''
-                        "></span>
+                        }"
+                        class="boardTextStyle"
+                        v-html="
+                          scope.row.CONTENT
+                            ? scope.row.CONTENT.replace(/\n|\r\n/g, '<br>')
+                                .replace(/ /g, '&nbsp')
+                                .replace('<r><n>', '<br>')
+                            : ''
+                        "
+                      ></span>
                     </div>
                   </div>
                 </template>
@@ -48,7 +73,10 @@
               <el-table-column align="center" width="135">
                 <template slot-scope="scope">
                   <div class="infoButton">
-                    <div @click="openQbbDrawer(scope.row, scope.$index, 1)" class="edit"></div>
+                    <div
+                      @click="openQbbDrawer(scope.row, scope.$index, 1)"
+                      class="edit"
+                    ></div>
                     <!-- <img
                         src="../../../../assets/cloudControl/edit2.png"
                         @click="openQbbDrawer(scope.row, scope.$index, 1)"
@@ -59,13 +87,23 @@
               </el-table-column>
             </el-table>
           </div>
-          <div class="openMIniDialogStyle" :class="
+          <div
+            class="openMIniDialogStyle"
+            :class="
               msgModeShow ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'
-            " @click="openMesMode">
+            "
+            @click="openMesMode"
+          >
             信息模板
           </div>
-          <el-form ref="form" :model="stateForm" label-width="75px" label-position="left" size="mini"
-            style="width: 800px">
+          <el-form
+            ref="form"
+            :model="stateForm"
+            label-width="75px"
+            label-position="left"
+            size="mini"
+            style="width: 800px"
+          >
             <el-tabs class="videoTabs" v-model="videoActive">
               <el-tab-pane label="详细信息" name="information">
                 <el-row>
@@ -95,14 +133,17 @@
                     </el-form-item>
                   </el-col>
                   <el-col :span="7">
-                    <el-form-item label="设备状态:" :style="{
+                    <el-form-item
+                      label="设备状态:"
+                      :style="{
                         color:
                           stateForm.eqStatus == '1'
                             ? 'yellowgreen'
                             : stateForm.eqStatus == '2'
                             ? 'white'
                             : 'red',
-                      }">
+                      }"
+                    >
                       {{ geteqType(stateForm.eqStatus) }}
                     </el-form-item>
                   </el-col>
@@ -127,39 +168,69 @@
                   </el-col>
                 </el-row>
               </el-tab-pane>
+              <el-tab-pane label="在线率统计" name="third"
+                >在线率统计</el-tab-pane
+              >
             </el-tabs>
           </el-form>
-          <div slot="footer" style="margin: 10px 0 20px; width: 800px" class="dialog-footer">
-            <el-button @click="openDialogVisible(1, 1)" style="width: 80px" class="submitButton"
-              v-hasPermi="['workbench:dialog:save']">添加信息</el-button>
-            <el-button @click="releaseInfo()" v-hasPermi="['workbench:dialog:save']" :disabled="contentList.length == 0"
+          <div
+            slot="footer"
+            style="margin: 10px 0 20px; width: 800px"
+            class="dialog-footer"
+          >
+            <el-button
+              @click="openDialogVisible(1, 1)"
+              style="width: 80px"
+              class="submitButton"
+              v-hasPermi="['workbench:dialog:save']"
+              >添加信息</el-button
+            >
+            <el-button
+              @click="releaseInfo()"
+              v-hasPermi="['workbench:dialog:save']"
+              :disabled="contentList.length == 0"
               :class="
                 contentList.length == 0
                   ? 'zancunButtonDisabled'
                   : 'zancunButton'
-              ">信息发布</el-button>
+              "
+              >信息发布</el-button
+            >
           </div>
         </div>
         <div class="boardRightBox" v-show="msgModeShow">
           <div class="mesModeBg">
             <div class="mesModeBox">
               <el-collapse v-model="activeNames" @change="handleChange">
-                <el-collapse-item v-for="(item, index) in iotTemplateCategoryList" :key="index" :title="item.dictLabel"
-                  :name="item.dictValue">
-                  <div v-for="(itm, indx) in item.list" :key="indx" class="con" :style="{
+                <el-collapse-item
+                  v-for="(item, index) in iotTemplateCategoryList"
+                  :key="index"
+                  :title="item.dictLabel"
+                  :name="item.dictValue"
+                >
+                  <div
+                    v-for="(itm, indx) in item.list"
+                    :key="indx"
+                    class="con"
+                    :style="{
                       'font-size': getFontSize(
                         itm.tcontents[0].fontSize,
                         itm.screenSize
                       ),
                       color: getColorStyle(itm.tcontents[0].fontColor),
                       fontFamily: itm.tcontents[0].fontType,
-                    }">
+                    }"
+                  >
                     <div class="templateTitle">
-                      <div :style="{
+                      <div
+                        :style="{
                           width: getDevicePixel(itm.screenSize, 0) + 'px',
                           height: getDevicePixel(itm.screenSize, 1) + 'px',
-                        }" style="background: black; position: relative">
-                        <span :style="{
+                        }"
+                        style="background: black; position: relative"
+                      >
+                        <span
+                          :style="{
                             left: getCoordinate(
                               itm.tcontents[0].coordinate.substring(0, 3),
                               'left',
@@ -170,11 +241,14 @@
                               'top',
                               itm.screenSize
                             ),
-                          }" class="boardTextStyle" v-html="
+                          }"
+                          class="boardTextStyle"
+                          v-html="
                             itm.tcontents[0].content
                               .replace(/\n|\r\n/g, '<br>')
                               .replace(/ /g, '&nbsp')
-                          "></span>
+                          "
+                        ></span>
                       </div>
                     </div>
                     <div class="downIcon">
@@ -189,912 +263,917 @@
       </div>
     </el-dialog>
 
-    <editInfo :boardEmitItem="this.boardEmitItem" @receiveForm="receiveForm" v-if="this.showEmit"
-      @dialogClose="dialogClose1"></editInfo>
+    <editInfo
+      :boardEmitItem="this.boardEmitItem"
+      @receiveForm="receiveForm"
+      v-if="this.showEmit"
+      @dialogClose="dialogClose1"
+    ></editInfo>
     <addinfo ref="addinfo" @addInfo="addInfo"></addinfo>
   </div>
 </template>
 
 <script>
-  import $ from "jquery";
-  import {
-    displayH5sVideoAll
-  } from "@/api/icyH5stream";
-  import {
-    getDeviceById
-  } from "@/api/equipment/eqlist/api.js"; //查询弹窗信息
-  import {
-    getInfo
-  } from "@/api/equipment/tunnel/api.js"; //查询设备当前状态
-  import {
-    listDevice
-  } from "@/api/board/informationBoard.js"; //查询弹窗信息
-  import {
-    getAllVmsTemplate,
-    uploadBoardEditInfo,
-    // getBoardContent,
-    splicingBoard,
-    gantryVmsInfo
-  } from "@/api/board/template";
-  import boardData from "@/views/information/board/boardData.json";
-  import editInfo from "@/views/information/board/editInfo";
-  import addinfo from "@/views/information/board//addinfo";
-  import Sortable from "sortablejs";
-  import {
-    getBoardEditInfo,
-    getBoardContentData
-  } from "@/api/information/api.js";
-  // 对象深拷贝
-  export const deepClone = (data) => {
-    // 封装的判断数据类型的方法
-    var type = typeof data;
-    var obj;
-    if (type === "array") {
-      obj = [];
-    } else if (type === "object") {
-      obj = {};
-    } else {
-      // 不再具有下一层次
-      return data;
+import $ from "jquery";
+import { displayH5sVideoAll } from "@/api/icyH5stream";
+import { getDeviceById } from "@/api/equipment/eqlist/api.js"; //查询弹窗信息
+import { getInfo } from "@/api/equipment/tunnel/api.js"; //查询设备当前状态
+import { listDevice } from "@/api/board/informationBoard.js"; //查询弹窗信息
+import {
+  getAllVmsTemplate,
+  uploadBoardEditInfo,
+  // getBoardContent,
+  splicingBoard,
+  gantryVmsInfo,
+} from "@/api/board/template";
+import boardData from "@/views/information/board/boardData.json";
+import editInfo from "@/views/information/board/editInfo";
+import addinfo from "@/views/information/board//addinfo";
+import Sortable from "sortablejs";
+import {
+  getBoardEditInfo,
+  getBoardContentData,
+} from "@/api/information/api.js";
+// 对象深拷贝
+export const deepClone = (data) => {
+  // 封装的判断数据类型的方法
+  var type = typeof data;
+  var obj;
+  if (type === "array") {
+    obj = [];
+  } else if (type === "object") {
+    obj = {};
+  } else {
+    // 不再具有下一层次
+    return data;
+  }
+  if (type === "array") {
+    for (var i = 0, len = data.length; i < len; i++) {
+      obj.push(deepClone(data[i]));
     }
-    if (type === "array") {
-      for (var i = 0, len = data.length; i < len; i++) {
-        obj.push(deepClone(data[i]));
-      }
-    } else if (type === "object") {
-      for (var key in data) {
-        obj[key] = deepClone(data[key]);
-      }
+  } else if (type === "object") {
+    for (var key in data) {
+      obj[key] = deepClone(data[key]);
     }
-    return obj;
-  };
-  export default {
-    // props: ["eqInfo", "brandList", "directionList", "eqTypeDialogList"],
-    components: {
-      editInfo,
-      addinfo,
+  }
+  return obj;
+};
+export default {
+  // props: ["eqInfo", "brandList", "directionList", "eqTypeDialogList"],
+  components: {
+    editInfo,
+    addinfo,
+  },
+  data() {
+    return {
+      loading: false,
+      msgModeShow: false,
+      associatedDeviceId: "",
+      title: "",
+      visible: false, //情报板弹窗
+      videoActive: "information", // tab页
+      stateForm: {}, //弹窗表单
+      infoType: "info",
+      boardEmitItem: {},
+      showEmit: false,
+      index_: 0,
+      addForm: {},
+      iotTemplateCategoryList: [],
+      activeNames: [],
+      templateList: [],
+      contentList: [],
+      brandList: [],
+      eqInfo: {},
+      eqTypeDialogList: [],
+      directionList: [],
+    };
+  },
+  watch: {
+    contentList: function (newVal, oldVal) {
+      this.$nextTick(() => {
+        console.log("大弹窗contentList");
+        this.rowDrop();
+      });
     },
-    data() {
-      return {
-        loading: false,
-        msgModeShow: false,
-        associatedDeviceId: "",
-        title: "",
-        visible: false, //情报板弹窗
-        videoActive: "information", // tab页
-        stateForm: {}, //弹窗表单
-        infoType: "info",
-        boardEmitItem: {},
-        showEmit: false,
-        index_: 0,
-        addForm: {},
-        iotTemplateCategoryList: [],
-        activeNames: [],
-        templateList: [],
-        contentList: [],
-        brandList: [],
-        eqInfo: {},
-        eqTypeDialogList: [],
-        directionList: [],
-      };
+  },
+  created() {
+    this.getDicts("iot_template_category").then((res) => {
+      this.iotTemplateCategoryList = res.data;
+      // console.log(this.iotTemplateCategoryList, "this.iotTemplateCategoryList");
+    });
+  },
+  mounted() {},
+  methods: {
+    init(eqInfo, brandList, directionList, eqTypeDialogList) {
+      console.log(eqInfo, "eqInfo");
+      console.log("进来了");
+      this.contentList = [];
+      (this.videoActive = "information"), // tab页
+        (this.msgModeShow = true);
+      this.openMesMode();
+      this.eqInfo = eqInfo;
+      this.brandList = brandList;
+      this.directionList = directionList;
+      this.eqTypeDialogList = eqTypeDialogList;
+      this.getmessage();
+      this.visible = true;
     },
-    watch: {
-      contentList: function (newVal, oldVal) {
-        this.$nextTick(() => {
-          console.log("大弹窗contentList");
-          this.rowDrop();
+    // 行拖拽
+    rowDrop() {
+      if (JSON.parse(JSON.stringify(this.contentList)).length > 0) {
+        // 要侦听拖拽响应的DOM对象
+        const tbody = document.querySelector(
+          ".infoBox .el-table__body-wrapper tbody"
+        );
+        const _this = this;
+        Sortable.create(tbody, {
+          // 结束拖拽后的回调函数
+          onEnd({ newIndex, oldIndex }) {
+            const currentRow = _this.contentList.splice(oldIndex, 1)[0];
+            _this.contentList.splice(newIndex, 0, currentRow);
+          },
         });
-      },
-    },
-    created() {
-      this.getDicts("iot_template_category").then((res) => {
-        this.iotTemplateCategoryList = res.data;
-        // console.log(this.iotTemplateCategoryList, "this.iotTemplateCategoryList");
-      });
+      }
     },
-    mounted() {},
-    methods: {
-      init(eqInfo, brandList, directionList, eqTypeDialogList) {
-        console.log(eqInfo, "eqInfo");
-        console.log("进来了");
-        this.contentList = [];
-        (this.videoActive = "information"), // tab页
-        (this.msgModeShow = true);
-        this.openMesMode();
-        this.eqInfo = eqInfo;
-        this.brandList = brandList;
-        this.directionList = directionList;
-        this.eqTypeDialogList = eqTypeDialogList;
-        this.getmessage();
-        this.visible = true;
-      },
-      // 行拖拽
-      rowDrop() {
-        if (JSON.parse(JSON.stringify(this.contentList)).length > 0) {
-          // 要侦听拖拽响应的DOM对象
-          const tbody = document.querySelector(
-            ".infoBox .el-table__body-wrapper tbody"
-          );
-          const _this = this;
-          Sortable.create(tbody, {
-            // 结束拖拽后的回调函数
-            onEnd({
-              newIndex,
-              oldIndex
-            }) {
-              const currentRow = _this.contentList.splice(oldIndex, 1)[0];
-              _this.contentList.splice(newIndex, 0, currentRow);
-            },
+    // 信息发布
+    releaseInfo() {
+      this.$confirm("是否确定发布情报板?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          const loading = this.$loading({
+            lock: true,
+            text: "Loading",
+            spinner: "el-icon-loading",
+            background: "rgba(0, 0, 0, 0.7)",
           });
-        }
-      },
-      // 信息发布
-      releaseInfo() {
-        this.$confirm("是否确定发布情报板?", "提示", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning",
-          })
-          .then(() => {
-            const loading = this.$loading({
-              lock: true,
-              text: 'Loading',
-              spinner: 'el-icon-loading',
-              background: 'rgba(0, 0, 0, 0.7)'
+          if (this.eqInfo.clickEqType == 16) {
+            const objAll = {};
+            objAll.deviceIds = this.eqInfo.equipmentId;
+            let that = this;
+            let newArr = this.contentList.map(function (item) {
+              let obj = {};
+              obj.STAY = item.STAY;
+              obj.ACTION = item.ACTION;
+              obj.SPEED = item.SPEED;
+              obj.COORDINATE = item.COORDINATE.replace("-", "0");
+              obj.COLOR = that.getColorValue(item.COLOR);
+              obj.FONT = that.getFontValue(item.FONT);
+
+              obj.FONT_SIZE = item.FONT_SIZE.substring(0, 2);
+              obj.CONTENT = item.CONTENT
+                ? item.CONTENT.replace(/\n|\r\n/g, "<r><n>")
+                : "";
+              return obj;
             });
-            if(this.eqInfo.clickEqType == 16){
-              const objAll = {};
-              objAll.deviceIds = this.eqInfo.equipmentId;
-              let that = this
-              let newArr = this.contentList.map(function (item) {
-                let obj = {}
-                obj.STAY = item.STAY;
-                obj.ACTION = item.ACTION;
-                obj.SPEED = item.SPEED;
-                obj.COORDINATE = item.COORDINATE.replace("-", "0");
-                obj.COLOR = that.getColorValue(item.COLOR);
-                obj.FONT = that.getFontValue(item.FONT);
-
-                obj.FONT_SIZE = item.FONT_SIZE.substring(0, 2);
-                obj.CONTENT = item.CONTENT?item.CONTENT.replace(/\n|\r\n/g, "<r><n>"):'';
-                return obj
-              })
-              objAll.parameters = newArr
-              const param = {
-                objectData: JSON.stringify(objAll)
-              }
-              console.log(param, "param")
-              splicingBoard(param).then((res) => {
+            objAll.parameters = newArr;
+            const param = {
+              objectData: JSON.stringify(objAll),
+            };
+            console.log(param, "param");
+            splicingBoard(param)
+              .then((res) => {
                 this.$modal.msgSuccess("发布成功");
                 loading.close();
-              }).catch((res) => {
+              })
+              .catch((res) => {
                 loading.close();
                 // this.$message({
                 //   type: "info",
                 //   message: res.msg,
                 // });
               });
-            }else{
-              const objAll = {};
-              objAll.deviceIds = this.eqInfo.equipmentId;
-              let that = this
-              let newArr = this.contentList.map(function (item) {
-                let obj = {}
-                obj.delay = item.STAY;
-                obj.showStyle = item.ACTION;
-                obj.speed = item.SPEED;
-                // obj.COORDINATE = item.COORDINATE.replace("-", "0");
-                obj.offsetx = item.COORDINATE.substring(0, 3);
-                obj.offsety = item.COORDINATE.substring(3, 6);
-                obj.wordSpace = 1;
-
-                obj.fontColor = that.getColorValue(item.COLOR);
-                obj.font = that.getFontValue(item.FONT);
-                obj.formatStyle = item.formatStyle;
-
-                obj.fontSize = item.FONT_SIZE.substring(0, 2);
-                obj.content = item.CONTENT.replace(/\n|\r\n/g, "<r><n>");
-                return obj
-              })
-              objAll.screenList = newArr
-              const param = {
-                objectData: JSON.stringify(objAll)
-              }
-              gantryVmsInfo(param).then((res)=>{
-                loading.close();
-              }).catch(() => {
+          } else {
+            const objAll = {};
+            objAll.deviceIds = this.eqInfo.equipmentId;
+            let that = this;
+            let newArr = this.contentList.map(function (item) {
+              let obj = {};
+              obj.delay = item.STAY;
+              obj.showStyle = item.ACTION;
+              obj.speed = item.SPEED;
+              // obj.COORDINATE = item.COORDINATE.replace("-", "0");
+              obj.offsetx = item.COORDINATE.substring(0, 3);
+              obj.offsety = item.COORDINATE.substring(3, 6);
+              obj.wordSpace = 1;
+
+              obj.fontColor = that.getColorValue(item.COLOR);
+              obj.font = that.getFontValue(item.FONT);
+              obj.formatStyle = item.formatStyle;
+
+              obj.fontSize = item.FONT_SIZE.substring(0, 2);
+              obj.content = item.CONTENT.replace(/\n|\r\n/g, "<r><n>");
+              return obj;
+            });
+            objAll.screenList = newArr;
+            const param = {
+              objectData: JSON.stringify(objAll),
+            };
+            gantryVmsInfo(param)
+              .then((res) => {
                 loading.close();
               })
-            }
-            
-            // let parameters = []
-            // parameters.push(obj)
-
-
-            // var content = "";
-            // var playList = "[Playlist]<r><n>";
-            // var Item_Start = "ITEM_NO=";
-            // var Item_Content = "ITEM";
-            // content += playList;
-            // var length = parseInt(this.contentList.length);
-            // var Item_No = Item_Start + length + "<r><n>";
-            // var value = "";
-            // content += Item_No;
-            // for (var i = 0; i < this.contentList.length; i++) {
-            //   value = ("000" + i).slice(-3);
-            //   content += Item_Content + value + "=";
-            //   content += this.contentList[i].STAY + ",";
-            //   content += this.contentList[i].ACTION + ",";
-            //   content += this.contentList[i].SPEED + "," + "\\";
-            //   content +=
-            //     "C" + this.contentList[i].COORDINATE.replace("-", "0") + "\\";
-            //   content += "S00\\";
-            //   content +=
-            //     "c" + this.getColorValue(this.contentList[i].COLOR) + "\\";
-            //   content += "f" + this.getFontValue(this.contentList[i].FONT);
-
-            //   content +=
-            //     this.contentList[i].FONT_SIZE.substring(0, 2) +
-            //     this.contentList[i].FONT_SIZE.substring(0, 2);
-            //   content += this.contentList[i].CONTENT.replace(
-            //     /\n|\r\n/g,
-            //     "<r><n>"
-            //   );
-
-            //   if (i + 1 != this.contentList.length) {
-            //     content += "<r><n>";
-            //   }
-            // }
-            // let protocolType = "GUANGDIAN_V33";
-            // let deviceld = this.associatedDeviceId.toString();
-            // uploadBoardEditInfo(deviceld, protocolType, content).then(
-            //   (response) => {
-            //     this.$modal.msgSuccess("发布成功");
-            //   }
-            // );
-            // .catch(() => {
-            //   this.$message({
-            //     type: "info",
-            //     message: "发布失败，请联系管理员",
-            //   });
-            // });
-          })
-          .catch(() => {
-            this.$message({
-              type: "info",
-              message: "取消发布",
-            });
+              .catch(() => {
+                loading.close();
+              });
+          }
+
+          // let parameters = []
+          // parameters.push(obj)
+
+          // var content = "";
+          // var playList = "[Playlist]<r><n>";
+          // var Item_Start = "ITEM_NO=";
+          // var Item_Content = "ITEM";
+          // content += playList;
+          // var length = parseInt(this.contentList.length);
+          // var Item_No = Item_Start + length + "<r><n>";
+          // var value = "";
+          // content += Item_No;
+          // for (var i = 0; i < this.contentList.length; i++) {
+          //   value = ("000" + i).slice(-3);
+          //   content += Item_Content + value + "=";
+          //   content += this.contentList[i].STAY + ",";
+          //   content += this.contentList[i].ACTION + ",";
+          //   content += this.contentList[i].SPEED + "," + "\\";
+          //   content +=
+          //     "C" + this.contentList[i].COORDINATE.replace("-", "0") + "\\";
+          //   content += "S00\\";
+          //   content +=
+          //     "c" + this.getColorValue(this.contentList[i].COLOR) + "\\";
+          //   content += "f" + this.getFontValue(this.contentList[i].FONT);
+
+          //   content +=
+          //     this.contentList[i].FONT_SIZE.substring(0, 2) +
+          //     this.contentList[i].FONT_SIZE.substring(0, 2);
+          //   content += this.contentList[i].CONTENT.replace(
+          //     /\n|\r\n/g,
+          //     "<r><n>"
+          //   );
+
+          //   if (i + 1 != this.contentList.length) {
+          //     content += "<r><n>";
+          //   }
+          // }
+          // let protocolType = "GUANGDIAN_V33";
+          // let deviceld = this.associatedDeviceId.toString();
+          // uploadBoardEditInfo(deviceld, protocolType, content).then(
+          //   (response) => {
+          //     this.$modal.msgSuccess("发布成功");
+          //   }
+          // );
+          // .catch(() => {
+          //   this.$message({
+          //     type: "info",
+          //     message: "发布失败，请联系管理员",
+          //   });
+          // });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "取消发布",
           });
-      },
-      // 转字体
-      getFont(font) {
-        if (font == "KaiTi" || font == 'k') {
-          return "楷体";
-        } else if (font == "SimSun" || font == 's') {
-          return "宋体";
-        } else if (font == "SimHei" || font == 'h') {
-          return "黑体";
-        } else if (font == "FangSong" || font == 'f') {
-          return "仿宋";
-        } else if (font == "LiSu" || font == 'l') {
-          return "隶书";
-        } else {
-          return font;
-        }
-      },
-      getFontValue(font) {
-        if (font == "黑体" || font == "SimHei") return "h";
-        if (font == "楷体" || font == "KaiTi") return "k";
-        if (font == "仿宋" || font == "FangSong") return "f";
-        if (font == "隶书" || font == "LiSu") return "l";
-        if (font == "宋体" || font == "SimSun") return "s";
+        });
+    },
+    // 转字体
+    getFont(font) {
+      if (font == "KaiTi" || font == "k") {
+        return "楷体";
+      } else if (font == "SimSun" || font == "s") {
+        return "宋体";
+      } else if (font == "SimHei" || font == "h") {
+        return "黑体";
+      } else if (font == "FangSong" || font == "f") {
+        return "仿宋";
+      } else if (font == "LiSu" || font == "l") {
+        return "隶书";
+      } else {
         return font;
-      },
-      getColorValue(color) {
-        if (color == "蓝色" || color == "blue") return "000000255000";
-        if (color == "绿色" || color == "#00FF00" || color == "GreenYellow")
-          return "000255000000";
-        if (color == "透明色" || color == "transparent") return "t";
-        if (color == "红色" || color == "red") return "255000000000";
-        return "255255000000"; //黄色
-      },
-
-      // 打开添加信息弹窗
-      openDialogVisible(type, mode) {
-        if (type == 1) {
-          this.$refs.addinfo.init(this.addForm.devicePixel, type, mode);
-        } else {
-          this.$refs.addinfo.init(this.devicePixelMode, type, mode);
-        }
-      },
-      // 接收子组件新增待发模板
-      addInfo(form) {
-        form.ID = this.contentList.length;
-        console.log(form, "待发新增");
-        this.contentList.push(deepClone(form));
-        console.log(this.contentList, "this.contentList");
-        this.$forceUpdate();
-      },
-      // 接收子组件form表单 修改
-      receiveForm(form) {
-        console.log(form, "接收子组件form表单 修改");
-        this.contentList.splice(this.index_, 1, form);
-        this.$forceUpdate();
-        console.log(this.contentList, "this.contentList");
-      },
-      // 编辑
-      openQbbDrawer(item, index, type) {
-        this.index_ = index;
-        console.log(item);
-        this.boardEmitItem = item;
-        this.boardEmitItem.screenSize = this.addForm.devicePixel;
-        this.boardEmitItem.type = type;
-        this.showEmit = true;
-      },
-
-      onSubmit() {
-        this.loading = true;
-        const param = {
-          deviceId: this.associatedDeviceId
-        }
-        getBoardContentData(param).then((res) => {
-          console.log(res, "onSubmit")
+      }
+    },
+    getFontValue(font) {
+      if (font == "黑体" || font == "SimHei") return "h";
+      if (font == "楷体" || font == "KaiTi") return "k";
+      if (font == "仿宋" || font == "FangSong") return "f";
+      if (font == "隶书" || font == "LiSu") return "l";
+      if (font == "宋体" || font == "SimSun") return "s";
+      return font;
+    },
+    getColorValue(color) {
+      if (color == "蓝色" || color == "blue") return "000000255000";
+      if (color == "绿色" || color == "#00FF00" || color == "GreenYellow")
+        return "000255000000";
+      if (color == "透明色" || color == "transparent") return "t";
+      if (color == "红色" || color == "red") return "255000000000";
+      return "255255000000"; //黄色
+    },
+
+    // 打开添加信息弹窗
+    openDialogVisible(type, mode) {
+      if (type == 1) {
+        this.$refs.addinfo.init(this.addForm.devicePixel, type, mode);
+      } else {
+        this.$refs.addinfo.init(this.devicePixelMode, type, mode);
+      }
+    },
+    // 接收子组件新增待发模板
+    addInfo(form) {
+      form.ID = this.contentList.length;
+      console.log(form, "待发新增");
+      this.contentList.push(deepClone(form));
+      console.log(this.contentList, "this.contentList");
+      this.$forceUpdate();
+    },
+    // 接收子组件form表单 修改
+    receiveForm(form) {
+      console.log(form, "接收子组件form表单 修改");
+      this.contentList.splice(this.index_, 1, form);
+      this.$forceUpdate();
+      console.log(this.contentList, "this.contentList");
+    },
+    // 编辑
+    openQbbDrawer(item, index, type) {
+      this.index_ = index;
+      console.log(item);
+      this.boardEmitItem = item;
+      this.boardEmitItem.screenSize = this.addForm.devicePixel;
+      this.boardEmitItem.type = type;
+      this.showEmit = true;
+    },
+
+    onSubmit() {
+      this.loading = true;
+      const param = {
+        deviceId: this.associatedDeviceId,
+      };
+      getBoardContentData(param)
+        .then((res) => {
+          console.log(res, "onSubmit");
           var contents = res.data.parameters;
-          console.log(contents, "onSubmit-----contents")
+          console.log(contents, "onSubmit-----contents");
           for (let i = 0; i < contents.length; i++) {
-            let item = contents[i]
+            let item = contents[i];
             item.COLOR = this.getColorStyle(item.COLOR);
             item.FONT_SIZE = Number(item.FONT_SIZE.substring(0, 2)) + "px";
             item.ID = i;
-            item.FONT = this.getFont(item.FONT)
-            item.CONTENT = item.CONTENT
+            item.FONT = this.getFont(item.FONT);
+            item.CONTENT = item.CONTENT;
             this.contentList.push(item);
           }
-          console.log(this.contentList, "onSubmit-----this.contentList")
+          console.log(this.contentList, "onSubmit-----this.contentList");
           this.loading = false;
           this.rowDrop();
-        }).catch((e) => {
+        })
+        .catch((e) => {
           this.loading = false;
         });
-        // getBoardEditInfo(this.associatedDeviceId)
-        //   .then((response) => {
-        //     var parseObject = JSON.parse(response.data[0]);
-        //     var contents = parseObject.content;
-        //     this.contentList = [];
-        //     for (var i = 0; i < contents.length; i++) {
-        //       var content = contents[i];
-        //       var itemId = "ITEM" + this.formatNum(i, 3);
-        //       for (var itm of content[itemId]) {
-        //         itm.COLOR = this.getColorStyle(itm.COLOR);
-        //         itm.FONT_SIZE = Number(itm.FONT_SIZE.substring(0, 2)) + "px";
-        //         itm.ID = i;
-        //         this.contentList.push(itm);
-        //       }
-        //     }
-        //     console.log(this.contentList, "this.contentList11");
-        //     this.loading = false;
-        //     this.rowDrop();
-        //   })
-        //   .catch((e) => {
-        //     this.loading = false;
-        //   });
-      },
-      formatNum(num, length) {
-        return (Array(length).join("0") + parseInt(num)).slice(-length);
-      },
-      // 删除中间模板
-      delQbbDrawer(index) {
-        console.log(index);
-        if (index > -1) {
-          this.contentList.splice(index, 1);
-          this.$forceUpdate();
+      // getBoardEditInfo(this.associatedDeviceId)
+      //   .then((response) => {
+      //     var parseObject = JSON.parse(response.data[0]);
+      //     var contents = parseObject.content;
+      //     this.contentList = [];
+      //     for (var i = 0; i < contents.length; i++) {
+      //       var content = contents[i];
+      //       var itemId = "ITEM" + this.formatNum(i, 3);
+      //       for (var itm of content[itemId]) {
+      //         itm.COLOR = this.getColorStyle(itm.COLOR);
+      //         itm.FONT_SIZE = Number(itm.FONT_SIZE.substring(0, 2)) + "px";
+      //         itm.ID = i;
+      //         this.contentList.push(itm);
+      //       }
+      //     }
+      //     console.log(this.contentList, "this.contentList11");
+      //     this.loading = false;
+      //     this.rowDrop();
+      //   })
+      //   .catch((e) => {
+      //     this.loading = false;
+      //   });
+    },
+    formatNum(num, length) {
+      return (Array(length).join("0") + parseInt(num)).slice(-length);
+    },
+    // 删除中间模板
+    delQbbDrawer(index) {
+      console.log(index);
+      if (index > -1) {
+        this.contentList.splice(index, 1);
+        this.$forceUpdate();
+      }
+    },
+    // 信息模板转到待下发
+    arrowLeft(item) {
+      console.log(item, "item");
+      var contentList = {
+        formatStyle: item.tcontents[0].formatStyle,
+        FONT_SIZE: item.tcontents[0].fontSize + "px",
+        COLOR: item.tcontents[0].fontColor,
+        CONTENT: item.tcontents[0].content,
+        COORDINATE: item.tcontents[0].coordinate,
+        FONT: this.getFont(item.tcontents[0].fontType),
+        SPEED: item.tcontents[0].fontSpacing, //字体间距
+        ACTION: item.inScreenMode, //出屏方式
+        STAY: item.stopTime, //停留时间
+        category: item.category, //所属类别
+        ID: this.contentList.length,
+      };
+      this.contentList.push(contentList);
+      console.log(this.contentList, "this.contentList");
+    },
+
+    // 情报板管理右侧查询接口
+    allVmsTemplate() {
+      const param = {
+        devicePixel: this.addForm.devicePixel,
+        category: 0,
+      };
+      getAllVmsTemplate(param).then((res) => {
+        let data = res.data;
+        console.log(res, "情报板管理右侧查询接口");
+        for (let j = 0; j < this.iotTemplateCategoryList.length; j++) {
+          let arr = this.iotTemplateCategoryList[j];
+          let brr = data[j];
+          arr.list = brr;
+          this.activeNames.push(j.toString());
         }
-      },
-      // 信息模板转到待下发
-      arrowLeft(item) {
-        console.log(item, "item");
-        var contentList = {
-          formatStyle:item.tcontents[0].formatStyle,
-          FONT_SIZE: item.tcontents[0].fontSize + "px",
-          COLOR: item.tcontents[0].fontColor,
-          CONTENT: item.tcontents[0].content,
-          COORDINATE: item.tcontents[0].coordinate,
-          FONT: this.getFont(item.tcontents[0].fontType),
-          SPEED: item.tcontents[0].fontSpacing, //字体间距
-          ACTION: item.inScreenMode, //出屏方式
-          STAY: item.stopTime, //停留时间
-          category: item.category, //所属类别
-          ID: this.contentList.length,
+        this.$forceUpdate();
+        // console.log(this.iotTemplateCategoryList, "新模板");
+      });
+    },
+    //  上移
+    moveTop(i, item) {
+      if (item && i) {
+        let obj = {
+          ...this.contentList[i - 1],
         };
-        this.contentList.push(contentList);
-        console.log(this.contentList, "this.contentList");
-      },
-      
-      // 情报板管理右侧查询接口
-      allVmsTemplate() {
-        const param = {
-          devicePixel: this.addForm.devicePixel,
-          category: 0,
+        this.contentList.splice(i - 1, 1, item);
+        this.contentList.splice(i, 1, obj);
+        this.$forceUpdate();
+      }
+    },
+    // 下移
+    moveBottom(i, item) {
+      if (item && typeof i === "number") {
+        let obj = {
+          ...this.contentList[i + 1],
         };
-        getAllVmsTemplate(param).then((res) => {
-          let data = res.data;
-          console.log(res, "情报板管理右侧查询接口");
-          for (let j = 0; j < this.iotTemplateCategoryList.length; j++) {
-            let arr = this.iotTemplateCategoryList[j];
-            let brr = data[j];
-            arr.list = brr;
-            this.activeNames.push(j.toString());
+        this.contentList.splice(i + 1, 1, item);
+        this.contentList.splice(i, 1, obj);
+        this.$forceUpdate();
+      }
+    },
+    // 切换模板
+    handleChange(active) {
+      this.activeNames = active;
+      const param = {
+        devicePixel: this.addForm.devicePixel,
+        category: active,
+      };
+      getAllVmsTemplate(param).then((res) => {
+        console.log(res, "情报板管理右侧查询接口");
+        this.templateList = res.data;
+      });
+    },
+
+    getCoordinate(coordinate, type, screenSize) {
+      let width = "";
+      let height = "";
+      if (!screenSize) {
+        width = this.addForm.devicePixel.split("*")[0];
+        height = this.addForm.devicePixel.split("*")[1];
+      } else {
+        width = screenSize.split("*")[0];
+        height = screenSize.split("*")[1];
+      }
+      if (width < 630 && height < 75) {
+        return coordinate + "px";
+      } else {
+        if (width / 630 > height / 75) {
+          if (type == "left") {
+            return coordinate / (width / 630) + "px";
+          } else if (type == "top") {
+            return coordinate / (width / 630) + "px";
           }
-          this.$forceUpdate();
-          // console.log(this.iotTemplateCategoryList, "新模板");
-        });
-      },
-      //  上移
-      moveTop(i, item) {
-        if (item && i) {
-          let obj = {
-            ...this.contentList[i - 1]
-          };
-          this.contentList.splice(i - 1, 1, item);
-          this.contentList.splice(i, 1, obj);
-          this.$forceUpdate();
-        }
-      },
-      // 下移
-      moveBottom(i, item) {
-        if (item && typeof i === "number") {
-          let obj = {
-            ...this.contentList[i + 1]
-          };
-          this.contentList.splice(i + 1, 1, item);
-          this.contentList.splice(i, 1, obj);
-          this.$forceUpdate();
-        }
-      },
-      // 切换模板
-      handleChange(active) {
-        this.activeNames = active;
-        const param = {
-          devicePixel: this.addForm.devicePixel,
-          category: active,
-        };
-        getAllVmsTemplate(param).then((res) => {
-          console.log(res, "情报板管理右侧查询接口");
-          this.templateList = res.data;
-        });
-      },
-
-      getCoordinate(coordinate, type, screenSize) {
-        let width = "";
-        let height = "";
-        if (!screenSize) {
-          width = this.addForm.devicePixel.split("*")[0];
-          height = this.addForm.devicePixel.split("*")[1];
-        } else {
-          width = screenSize.split("*")[0];
-          height = screenSize.split("*")[1];
-        }
-        if (width < 630 && height < 75) {
-          return coordinate + "px";
         } else {
-          if (width / 630 > height / 75) {
-            if (type == "left") {
-              return coordinate / (width / 630) + "px";
-            } else if (type == "top") {
-              return coordinate / (width / 630) + "px";
-            }
-          } else {
-            if (type == "left") {
-              return coordinate / (height / 75) + "px";
-            } else if (type == "top") {
-              return coordinate / (height / 75) + "px";
-            }
+          if (type == "left") {
+            return coordinate / (height / 75) + "px";
+          } else if (type == "top") {
+            return coordinate / (height / 75) + "px";
           }
         }
-      },
-      // 转分辨率
-      getDevicePixel(devicePixel, type) {
-        let width = devicePixel.split("*")[0];
-        let height = devicePixel.split("*")[1];
-        // 实际分辨率比页面板子小
-        if (width < 630 && height < 75) {
+      }
+    },
+    // 转分辨率
+    getDevicePixel(devicePixel, type) {
+      let width = devicePixel.split("*")[0];
+      let height = devicePixel.split("*")[1];
+      // 实际分辨率比页面板子小
+      if (width < 630 && height < 75) {
+        if (type == 0) {
+          return width;
+        } else if (type == 1) {
+          return height;
+        }
+      } else {
+        // 实际分辨率比页面板子大
+        if (width / 630 > height / 75) {
           if (type == 0) {
-            return width;
+            return 630;
           } else if (type == 1) {
-            return height;
+            return height / (width / 630);
           }
         } else {
-          // 实际分辨率比页面板子大
-          if (width / 630 > height / 75) {
-            if (type == 0) {
-              return 630;
-            } else if (type == 1) {
-              return height / (width / 630);
-            }
-          } else {
-            if (type == 0) {
-              return width / (height / 75);
-            } else if (type == 1) {
-              return 75;
-            }
+          if (type == 0) {
+            return width / (height / 75);
+          } else if (type == 1) {
+            return 75;
           }
         }
-      },
-      // 转字号
-      getFontSize(font, screenSize) {
-        if (!font) {
-          return;
-        }
-        let width = screenSize.split("*")[0];
-        let height = screenSize.split("*")[1];
+      }
+    },
+    // 转字号
+    getFontSize(font, screenSize) {
+      if (!font) {
+        return;
+      }
+      let width = screenSize.split("*")[0];
+      let height = screenSize.split("*")[1];
 
-        if (width < 630 && height < 75) {
+      if (width < 630 && height < 75) {
+        if (font.toString().length == 2) {
+          return font + "px";
+        } else {
+          return font.substring(0, 2) + "px";
+        }
+      } else {
+        if (width / 630 > height / 75) {
           if (font.toString().length == 2) {
-            return font + "px";
+            return font / (width / 630) - 1 + "px";
           } else {
-            return font.substring(0, 2) + "px";
+            return font.substring(0, 2) / (width / 630) - 1 + "px";
           }
         } else {
-          if (width / 630 > height / 75) {
-            if (font.toString().length == 2) {
-              return font / (width / 630) - 1 + "px";
-            } else {
-              return font.substring(0, 2) / (width / 630) - 1 + "px";
-            }
+          if (font.toString().length == 2) {
+            return font / (height / 75) - 1 + "px";
           } else {
-            if (font.toString().length == 2) {
-              return font / (height / 75) - 1 + "px";
-            } else {
-              return font.substring(0, 2) / (height / 75) - 1 + "px";
-            }
-          }
-        }
-      },
-      // 转颜色
-      getColorStyle(font) {
-        if (font == "黄色" || font == '255255000000') {
-          return "yellow";
-        } else if (font == "红色" || font == '255000000000') {
-          return "red";
-        } else if (font == "绿色" || font == "GreenYellow" || font == '000255000000') {
-          return "#00FF00";
-        } else if (font == "蓝色" || font == '000000255000') {
-          return "blue";
-        } else {
-          return font;
-        }
-      },
-      // 打开信息模板
-      openMesMode() {
-        let dialog = $(".workbench-boardDialog .el-dialog")[0];
-        if (this.msgModeShow == false) {
-          this.msgModeShow = true;
-          dialog.style.width = "1600px";
-          dialog.style.left = "200px";
-        } else {
-          this.msgModeShow = false;
-          dialog.style.width = "835px";
-          dialog.style.left = "28%";
-        }
-      },
-      // 根据设备id 获取弹窗内信息
-      async getmessage() {
-        if (this.eqInfo.equipmentId) {
-          await getDeviceById(this.eqInfo.equipmentId).then((res) => {
-            console.log(res, "查询情报板弹窗信息");
-            this.stateForm = res.data;
-            this.title = this.stateForm.eqName;
-            this.associatedDeviceId = res.data.associatedDeviceId;
-            if (this.associatedDeviceId) {
-              const param = {
-                deviceId: res.data.associatedDeviceId,
-              };
-              listDevice(param).then((response) => {
-                console.log(response, "查询设备信息");
-                if (response.rows.length > 0) {
-                  this.addForm = response.rows[0];
-                }
-                this.allVmsTemplate();
-              });
-              this.onSubmit();
-            } else {
-              this.$modal.msgWarning("没有设备Id");
-            }
-          });
-        } else {
-          this.$modal.msgWarning("没有设备Id");
-        }
-      },
-      getDirection(num) {
-        for (var item of this.directionList) {
-          if (item.dictValue == num) {
-            return item.dictLabel;
-          }
-        }
-      },
-      getBrandName(num) {
-        // 根据字典表查设备厂商--------------------------
-        for (var item of this.brandList) {
-          if (Number(item.dictValue) == num) {
-            return item.dictLabel;
+            return font.substring(0, 2) / (height / 75) - 1 + "px";
           }
         }
-      },
-      geteqType(num) {
-        for (var item of this.eqTypeDialogList) {
-          if (item.dictValue == num) {
-            return item.dictLabel;
+      }
+    },
+    // 转颜色
+    getColorStyle(font) {
+      if (font == "黄色" || font == "255255000000") {
+        return "yellow";
+      } else if (font == "红色" || font == "255000000000") {
+        return "red";
+      } else if (
+        font == "绿色" ||
+        font == "GreenYellow" ||
+        font == "000255000000"
+      ) {
+        return "#00FF00";
+      } else if (font == "蓝色" || font == "000000255000") {
+        return "blue";
+      } else {
+        return font;
+      }
+    },
+    // 打开信息模板
+    openMesMode() {
+      let dialog = $(".workbench-boardDialog .el-dialog")[0];
+      if (this.msgModeShow == false) {
+        this.msgModeShow = true;
+        dialog.style.width = "1600px";
+        dialog.style.left = "200px";
+      } else {
+        this.msgModeShow = false;
+        dialog.style.width = "835px";
+        dialog.style.left = "28%";
+      }
+    },
+    // 根据设备id 获取弹窗内信息
+    async getmessage() {
+      if (this.eqInfo.equipmentId) {
+        await getDeviceById(this.eqInfo.equipmentId).then((res) => {
+          console.log(res, "查询情报板弹窗信息");
+          this.stateForm = res.data;
+          this.title = this.stateForm.eqName;
+          this.associatedDeviceId = res.data.associatedDeviceId;
+          if (this.associatedDeviceId) {
+            const param = {
+              deviceId: res.data.associatedDeviceId,
+            };
+            listDevice(param).then((response) => {
+              console.log(response, "查询设备信息");
+              if (response.rows.length > 0) {
+                this.addForm = response.rows[0];
+              }
+              this.allVmsTemplate();
+            });
+            this.onSubmit();
+          } else {
+            this.$modal.msgWarning("没有设备Id");
           }
+        });
+      } else {
+        this.$modal.msgWarning("没有设备Id");
+      }
+    },
+    getDirection(num) {
+      for (var item of this.directionList) {
+        if (item.dictValue == num) {
+          return item.dictLabel;
         }
-      },
-      // 关闭弹窗
-      handleClosee() {
-        if (this.associatedDeviceId) {
-          const param = {
-          deviceId: this.associatedDeviceId
+      }
+    },
+    getBrandName(num) {
+      // 根据字典表查设备厂商--------------------------
+      for (var item of this.brandList) {
+        if (Number(item.dictValue) == num) {
+          return item.dictLabel;
         }
-        getBoardContentData(param).then((res) => {}).catch((e) => {});
-          // getBoardContent(this.associatedDeviceId)
-          //   .then((res) => {
-          //     console.log(res, "情报板内容查询");
-          //   })
-          //   .catch((e) => {
-          //     console.log(e);
-          //   });
+      }
+    },
+    geteqType(num) {
+      for (var item of this.eqTypeDialogList) {
+        if (item.dictValue == num) {
+          return item.dictLabel;
         }
-        this.visible = false;
-      },
-      dialogClose1() {
-        this.showEmit = false;
-        this.$forceUpdate();
-      },
+      }
     },
-  };
-
+    // 关闭弹窗
+    handleClosee() {
+      if (this.associatedDeviceId) {
+        const param = {
+          deviceId: this.associatedDeviceId,
+        };
+        getBoardContentData(param)
+          .then((res) => {})
+          .catch((e) => {});
+        // getBoardContent(this.associatedDeviceId)
+        //   .then((res) => {
+        //     console.log(res, "情报板内容查询");
+        //   })
+        //   .catch((e) => {
+        //     console.log(e);
+        //   });
+      }
+      this.visible = false;
+    },
+    dialogClose1() {
+      this.showEmit = false;
+      this.$forceUpdate();
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  ::v-deep .el-table--medium .el-table__cell {
-    padding: 10px 0 !important;
-  }
-
-  .el-row {
-    margin-bottom: -10px;
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .openMIniDialogStyle {
-    position: absolute;
-    left: 813px;
-    width: 20px;
-    height: 85px;
-    background: #d8d8d8 linear-gradient(180deg, #1eace8 0%, #0074d4 100%);
-    top: 66px;
-    color: #fff;
-    font-size: 12px;
-    line-height: 16px;
-    text-align: center;
-    cursor: pointer;
-  }
-
-  ::v-deep .el-tabs__nav-wrap::after {
-    background-color: #dfe4ed;
-    opacity: 0.4;
-  }
-
-  ::v-deep .el-tabs__active-bar {
-    background-color: #01aafd;
-  }
-
-  ::v-deep .el-radio-button--mini .el-radio-button__inner {
-    padding: 6px 13px !important;
-  }
-
-  /* ::v-deep .el-radio-group .el-radio-button__inner {
+::v-deep .el-table--medium .el-table__cell {
+  padding: 10px 0 !important;
+}
+
+.el-row {
+  margin-bottom: -10px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.openMIniDialogStyle {
+  position: absolute;
+  left: 813px;
+  width: 20px;
+  height: 85px;
+  background: #d8d8d8 linear-gradient(180deg, #1eace8 0%, #0074d4 100%);
+  top: 66px;
+  color: #fff;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: center;
+  cursor: pointer;
+}
+
+::v-deep .el-tabs__nav-wrap::after {
+  background-color: #dfe4ed;
+  opacity: 0.4;
+}
+
+::v-deep .el-tabs__active-bar {
+  background-color: #01aafd;
+}
+
+::v-deep .el-radio-button--mini .el-radio-button__inner {
+  padding: 6px 13px !important;
+}
+
+/* ::v-deep .el-radio-group .el-radio-button__inner {
   background: white;
 } */
-  .workbench-boardDialog {
-    .el-dialog {
-      left: 28%;
-    }
-    .el-dialog__body{
-      max-height: unset !important;
-    }
+.workbench-boardDialog {
+  .el-dialog {
+    left: 28%;
   }
+  .el-dialog__body {
+    max-height: unset !important;
+  }
+}
 
-  .boardRightBox {
-    float: right;
-    width: 760px;
-    margin-left: 20px;
+.boardRightBox {
+  float: right;
+  width: 760px;
+  margin-left: 20px;
 
-    .el-collapse {
-      border-top: transparent !important;
-    }
+  .el-collapse {
+    border-top: transparent !important;
   }
+}
 
-  .mesModeBg {
-    height: 753px;
-    overflow: auto;
+.mesModeBg {
+  height: 753px;
+  overflow: auto;
+
+  .mesModeBox {
+    width: 100%;
+    border: solid 1px #01aafd;
 
-    .mesModeBox {
+    .con {
       width: 100%;
-      border: solid 1px #01aafd;
+      height: 80px;
+      margin-bottom: 10px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
 
-      .con {
-        width: 100%;
-        height: 80px;
-        margin-bottom: 10px;
+      .templateTitle {
+        height: 75px;
+        border: 1px solid #01aafd;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 630px;
+        float: left;
+        margin-left: 5px;
         overflow: hidden;
+      }
+
+      .downIcon {
+        width: 75px;
+        height: 75px;
+        border: solid 1px #01aafd;
+        margin-left: 10px;
+        justify-content: center;
         display: flex;
         align-items: center;
 
-        .templateTitle {
-          height: 75px;
-          border: 1px solid #01aafd;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 630px;
-          float: left;
-          margin-left: 5px;
-          overflow: hidden;
+        > div {
+          width: 40px;
+          height: 40px;
+          /* border: solid 1px #cfd5e0; */
+          /* border-radius: 2px; */
+          text-align: center;
+          line-height: 40px;
+          font-size: 16px;
+          /* color: #00162c; */
+          display: block;
+          cursor: pointer;
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          background-position: center;
+          /* background: #f2f8ff; */
         }
 
-        .downIcon {
-          width: 75px;
-          height: 75px;
-          border: solid 1px #01aafd;
-          margin-left: 10px;
-          justify-content: center;
-          display: flex;
-          align-items: center;
-
-          >div {
-            width: 40px;
-            height: 40px;
-            /* border: solid 1px #cfd5e0; */
-            /* border-radius: 2px; */
-            text-align: center;
-            line-height: 40px;
-            font-size: 16px;
-            /* color: #00162c; */
-            display: block;
-            cursor: pointer;
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            background-position: center;
-            /* background: #f2f8ff; */
-          }
-
-          /* >div:hover {
+        /* >div:hover {
             background: #39adff;
             color: #fff;
             border: solid 1px #39adff;
           } */
-        }
-
-        .menuBox {
-          display: flex;
-          margin: 28px 0;
-          float: right;
-
-          i {
-            font-size: 24px;
-            color: #666;
-          }
-
-          .disabledClass {
-            pointer-events: none;
-            cursor: auto !important;
-            color: #ccc;
-          }
-        }
-      }
-
-      .mesModeTitle {
-        font-size: 14px;
-        color: rgba(0, 22, 44, 0.7);
-        line-height: 30px;
-        height: 30px;
-        width: 100%;
-        border: solid 1px #cfd5e0;
       }
 
-      .mesModeContent {
+      .menuBox {
         display: flex;
-        width: 100%;
-        height: 70px;
-
-        .mesModeLeft {
-          width: 280px;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
+        margin: 28px 0;
+        float: right;
+
+        i {
+          font-size: 24px;
+          color: #666;
         }
 
-        .mesModeRight {
-          width: calc(100% - 280px);
-          height: 100%;
-          border-left: solid 1px #cfd5e0;
+        .disabledClass {
+          pointer-events: none;
+          cursor: auto !important;
+          color: #ccc;
         }
       }
     }
-  }
 
-  .infoBox {
-    width: 783px;
-    height: 550px;
-    overflow: hidden;
-    border: solid 1px #01aafd;
+    .mesModeTitle {
+      font-size: 14px;
+      color: rgba(0, 22, 44, 0.7);
+      line-height: 30px;
+      height: 30px;
+      width: 100%;
+      border: solid 1px #cfd5e0;
+    }
 
-    .infoContent {
-      width: 97%;
-      height: 75px;
-      margin: 5px 10px;
+    .mesModeContent {
       display: flex;
+      width: 100%;
+      height: 70px;
 
-      .upDown {
-        width: 30px;
+      .mesModeLeft {
+        width: 280px;
         height: 100%;
-        border: solid 1px #01aafd;
-        text-align: center;
-        writing-mode: tb-rl;
-        white-space: nowrap;
         display: flex;
-        align-items: center;
         justify-content: center;
+        align-items: center;
+      }
 
-        i {
-          display: block;
-          color: #f2f8ff;
-        }
-
-        i:nth-of-type(2) {
-          padding-top: 10px;
-        }
+      .mesModeRight {
+        width: calc(100% - 280px);
+        height: 100%;
+        border-left: solid 1px #cfd5e0;
       }
     }
   }
+}
+
+.infoBox {
+  width: 783px;
+  height: 550px;
+  overflow: hidden;
+  border: solid 1px #01aafd;
 
-  .contentBox {
-    width: 630px;
+  .infoContent {
+    width: 97%;
     height: 75px;
-    border: solid 1px #01aafd;
-    margin-left: 4px;
-    overflow: hidden;
+    margin: 5px 10px;
     display: flex;
-    align-items: center;
-    justify-content: center;
 
-    .content {
-      background: #000;
-      overflow: hidden;
-      position: relative;
-    }
-  }
+    .upDown {
+      width: 30px;
+      height: 100%;
+      border: solid 1px #01aafd;
+      text-align: center;
+      writing-mode: tb-rl;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-  .infoButton {
-    width: 112px;
-    height: 75px;
-    border: solid 1px #01aafd;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-
-    >div,
-    img {
-      width: 40px;
-      height: 40px;
-      line-height: 40px;
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      cursor: pointer;
-      padding-left: 2px;
+      i {
+        display: block;
+        color: #f2f8ff;
+      }
+
+      i:nth-of-type(2) {
+        padding-top: 10px;
+      }
     }
+  }
+}
+
+.contentBox {
+  width: 630px;
+  height: 75px;
+  border: solid 1px #01aafd;
+  margin-left: 4px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .content {
+    background: #000;
+    overflow: hidden;
+    position: relative;
+  }
+}
+
+.infoButton {
+  width: 112px;
+  height: 75px;
+  border: solid 1px #01aafd;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  > div,
+  img {
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+    padding-left: 2px;
+  }
 
-    /* >div:nth-of-type(1) {
+  /* >div:nth-of-type(1) {
       background-image: url(../../../../assets/cloudControl/edit3.png);
     }
 
@@ -1109,71 +1188,70 @@
     >div:nth-of-type(2):hover {
       background-image: url(../../../../assets/cloudControl/closeIcon1.png);
     } */
+}
+
+.disabledClass {
+  pointer-events: none;
+  cursor: auto !important;
+  color: #00152b !important;
+}
+
+::v-deep .el-collapse-item__header {
+  height: 30px;
+  border-bottom: solid 1px #01aafd;
+  padding-left: 10px;
+}
+
+::v-deep .el-collapse-item__header.is-active {
+  border-bottom: transparent;
+}
+
+::v-deep .el-collapse-item__content {
+  padding-bottom: 0px;
+}
+
+::v-deep .el-collapse-item__wrap {
+  padding: 0 10px;
+  border-bottom: solid 1px #01aafd;
+}
+
+::v-deep ::-webkit-scrollbar {
+  width: 0px !important;
+}
+
+.boardTextStyle {
+  position: absolute;
+  line-height: 1;
+  caret-color: rgba(0, 0, 0, 0);
+  user-select: none;
+}
+
+::v-deep .el-table {
+  border-bottom: none !important;
+
+  thead {
+    display: none;
   }
 
-  .disabledClass {
-    pointer-events: none;
-    cursor: auto !important;
-    color: #00152b !important;
-  }
-
-  ::v-deep .el-collapse-item__header {
-    height: 30px;
-    border-bottom: solid 1px #01aafd;
-    padding-left: 10px;
-  }
-
-  ::v-deep .el-collapse-item__header.is-active {
-    border-bottom: transparent;
-  }
-
-  ::v-deep .el-collapse-item__content {
-    padding-bottom: 0px;
-  }
-
-  ::v-deep .el-collapse-item__wrap {
-    padding: 0 10px;
-    border-bottom: solid 1px #01aafd;
+  th.el-table__cell.is-leaf,
+  td.el-table__cell {
+    border-bottom: none;
   }
+}
 
-  ::v-deep ::-webkit-scrollbar {
-    width: 0px !important;
-  }
-
-  .boardTextStyle {
-    position: absolute;
-    line-height: 1;
-    caret-color: rgba(0, 0, 0, 0);
-    user-select: none;
-  }
-
-  ::v-deep .el-table {
-    border-bottom: none !important;
+::v-deep .el-table::before {
+  height: 0px;
+}
 
-    thead {
-      display: none;
-    }
-
-    th.el-table__cell.is-leaf,
-    td.el-table__cell {
-      border-bottom: none;
-    }
-  }
+::v-deep .sortable-chosen:not(th) {
+  background-color: rgba(5, 175, 227, 0.1) !important;
+}
 
-  ::v-deep .el-table::before {
-    height: 0px;
-  }
-
-  ::v-deep .sortable-chosen:not(th) {
-    background-color: rgba(5, 175, 227, 0.1) !important;
-  }
-
-  ::v-deep .el-loading-mask {
-    background: transparent !important;
-  }
-
-  ::v-deep .el-dialog {
-    pointer-events: auto !important;
-  }
+::v-deep .el-loading-mask {
+  background: transparent !important;
+}
 
+::v-deep .el-dialog {
+  pointer-events: auto !important;
+}
 </style>
diff --git a/ruoyi-ui/src/views/workbench/config/components/video.vue b/ruoyi-ui/src/views/workbench/config/components/video.vue
index be6f1135..dcc584ed 100644
--- a/ruoyi-ui/src/views/workbench/config/components/video.vue
+++ b/ruoyi-ui/src/views/workbench/config/components/video.vue
@@ -38,7 +38,7 @@
         @click="changeVideo('left')"
         v-if="[21, 32, 39, 40].includes(this.clickEqType)"
       >
-        <div @click="changeVideo('left')" ></div>
+        <div @click="changeVideo('left')"></div>
       </div>
       <div
         class="rlModelButton right"
@@ -156,6 +156,7 @@
               </el-col>
             </el-row>
           </el-tab-pane>
+          <el-tab-pane label="在线率统计" name="third">在线率统计</el-tab-pane>
         </el-tabs>
       </el-form>
       <div slot="footer" class="dialog-footer">