diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue
index c85c1dab..23977f09 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Broadcast/components/BroadcastReleases.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="广播发布" width="1230px">
+  <Dialog v-model="modelVisible" title="广播发布" width="1230px"  style="z-index:9999">
     <div class="BroadcastReleases">
       <!-- <BroadcastParam v-model="modelVisible" :pileNum="pileNum" :otherConfig="otherConfig" /> -->
       <div class="body">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue
index 307c624d..8fe4c14d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="设备操作" width="600px">
+  <Dialog v-model="modelVisible" title="设备操作" width="600px" style="z-index:4000">
     <DeviceParam v-model="modelVisible" ref="DeviceParam" :deviceId="deviceId" :id="id" :deviceType="deviceType"
       @update:submitting="(val) => { submitting = val }">
     </DeviceParam>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/components/DeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/components/DeviceControlDialog.vue
index 41b4362a..b734bae1 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/components/DeviceControlDialog.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/components/DeviceControlDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="设备操作" width="910px">
+  <Dialog v-model="modelVisible" title="设备操作" width="910px"  style="z-index:4000">
     <div class="DeviceControlDialog">
       <DeviceParam v-model="modelVisible" ref="DeviceParam" :deviceId="this.deviceId" :productId="this.productId"
         :deviceType="deviceType" @update:submitting="(val) => { submitting = val }">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/index.vue
index 90ab60f4..3845a1d4 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/FatigueWakesUp/index.vue
@@ -102,8 +102,8 @@ export default {
     this.data = { ...this.dialogData, roadName: '济菏高速' };
 
 
-    getProduct(this.dialogData.productId).then((data) => {
-      this.dialogData.brand = data.brand;
+    getProduct(this.data.productId).then((data) => {
+      this.data.brand = data.brand;
     });
 
     // const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/components/AirConditioning.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/components/AirConditioning.vue
index ccb5e93c..6eacd028 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/components/AirConditioning.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/components/AirConditioning.vue
@@ -1,5 +1,5 @@
 <template>
-    <Dialog v-model="modelVisible" title="设备操作" width="550px">
+    <Dialog v-model="modelVisible" title="设备操作" width="550px" style="z-index:3000">
       <div class="DeviceControlDialog">
         <!-- <DeviceParams :dialogData="dialogData" /> -->
         <div class="control-unit">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/components/DeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/components/DeviceControlDialog.vue
index 47d52e60..4d6b56b4 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/components/DeviceControlDialog.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/components/DeviceControlDialog.vue
@@ -1,5 +1,5 @@
 <template>
-    <Dialog v-model="modelVisible" title="设备操作" width="550px">
+    <Dialog v-model="modelVisible" title="设备操作" width="550px" style="z-index:3000">
   <div class="DeviceControlDialog">
   <div class="row">
     <div class="control-unit">
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/MeteorologicalDetection/components/DeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/MeteorologicalDetection/components/DeviceControlDialog.vue
index a049cb25..7f0e45c4 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/MeteorologicalDetection/components/DeviceControlDialog.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/MeteorologicalDetection/components/DeviceControlDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" :title="title" width="910px">
+  <Dialog v-model="modelVisible" :title="title" width="910px" style="z-index:4000" >
     <div class="DeviceControlDialog">
       <div class="headSearch">
         <p>时间范围:</p>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/MillimeterWaveRadar/components/DeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/MillimeterWaveRadar/components/DeviceControlDialog.vue
index 504747b7..7e6278cc 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/MillimeterWaveRadar/components/DeviceControlDialog.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/MillimeterWaveRadar/components/DeviceControlDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="感知事件"  width="740px" >
+  <Dialog v-model="modelVisible" title="感知事件"  width="740px" style="z-index:4000" >
     <div class="DeviceControlDialog">
       <div class="headSearch">
         <p>查询事件:</p>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceControlDialog.vue
index 84fd6dcc..a61b9945 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceControlDialog.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceControlDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="设备操作" width="500px">
+  <Dialog v-model="modelVisible" title="设备操作" width="500px" style="z-index:3000" >
     <div class="DeviceControlDialog" v-if="locked">
       <DeviceParams :dialogData="dialogData" />
     </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceControlDialog.vue
index 0a5e9963..63ea4af8 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceControlDialog.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceControlDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="设备操作" width="500px">
+  <Dialog v-model="modelVisible" title="设备操作" width="500px" style="z-index:3000">
     <div class="DeviceControlDialog" v-if="locked">
       <DeviceParams :dialogData="dialogData" />
     </div>
@@ -78,6 +78,7 @@ export default {
         this.locked = false;
         this.lockText = '';
         this.$emit("update:value", val);
+        this.$emit("close", val);
       },
     },
   },
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SolarEnergy/components/DeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SolarEnergy/components/DeviceControlDialog.vue
index dd73bbda..707b50e6 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SolarEnergy/components/DeviceControlDialog.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SolarEnergy/components/DeviceControlDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="modelVisible" title="设备操作" width="550px">
+  <Dialog v-model="modelVisible" title="设备操作" width="550px"  style="z-index:4000">
     <div class="DeviceControlDialog">
       <DeviceParams :dialogData="dialogData" />
     </div>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/Broadcast.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/Broadcast.vue
new file mode 100644
index 00000000..73d2e52e
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/Broadcast.vue
@@ -0,0 +1,199 @@
+<template>
+    <Dialog v-model="visibleModel" 
+    title="语音广播" width="470px" style="z-index:3000">
+      <Video class="video-stream" :camId="camId" img="语音广播" />
+  
+      <div class="Broadcast">
+        <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
+          <ElTabPane label="基本信息" name="first">
+            <Descriptions :list="list" :data="data" style="gap: 18px">
+            </Descriptions>
+          </ElTabPane>
+          <!-- <ElTabPane label="设备参数" name="second">设备参数</ElTabPane> -->
+          <ElTabPane label="在线率统计" name="third">
+            <LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 150px" />
+          </ElTabPane>
+        </ElTabs>
+  
+        <div class="bottom">
+          <Button @click.native="releaseVisible = true" v-hasPermi="['business:home:broadcast']">广播发布</Button>
+        </div>
+      </div>
+  
+      <BroadcastReleases v-model="releaseVisible" :pileNum="dialogData.stakeMark" :otherConfig="dialogData.otherConfig" />
+    </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 "../Dialogs/Broadcast/components/BroadcastReleases.vue";
+  import Video from "@screen/components/Video";
+  import LineChart from "../LineChart/index.vue";
+  
+  import { DeviceTypeEnum } from "@screen/utils/enum.js";
+  
+  import {
+    getRoadInfoByStakeMark,
+    getOrganizationName,
+    getProduct,
+  } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+  import { dialogDelayVisible } from "../Dialogs/mixin.js";
+  
+  // 广播发布
+  export default {
+    name: "Broadcast",
+    mixins: [dialogDelayVisible],
+    components: {
+      Dialog,
+      Button,
+      Descriptions,
+      BroadcastReleases,
+      Video,
+      LineChart,
+    },
+    props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+   },
+    data() {
+      return {
+        activeName: "first",
+        releaseVisible: false,
+        data: {
+          deviceName: "LH24",
+          roadName: "济菏高速",
+          stakeMark: "k094+079",
+          direction: "1",
+          organizationName: "山东高速济南发展公司",
+          brand: "XXX厂家",
+          deviceState: "0",
+        },
+        DeviceTypeEnum,
+        list: [
+          {
+            label: "设备名称",
+            key: "deviceName",
+          },
+          {
+            label: "道路名称",
+            key: "roadName",
+          },
+          {
+            label: "设备桩号",
+            key: "stakeMark",
+          },
+          {
+            label: "所属方向",
+            key: "direction",
+            enum: "CameraDirectionEnum",
+          },
+          // {
+          //   label: "所属机构",
+          //   key: "organizationName",
+          // },
+          {
+            label: "设备厂商",
+            key: "manufacturer",
+          },
+          {
+            label: "设备状态",
+            key: "deviceState",
+            enum: "DeviceTypeEnum",
+          },
+        ],
+        camId:null
+      };
+    },
+    async created() {
+      if(typeof this.data.otherConfig === 'string'){
+        const oConfig = JSON.parse(this.data.otherConfig)
+        if(oConfig && oConfig.camId){
+          this.camId = oConfig.camId
+        }
+      }
+  
+      this.data = { ...this.dialogData, roadName: '济菏高速' };
+  
+      if(this.dialogData.productId!=null){
+        getProduct(this.dialogData.productId).then((data) => {
+        this.dialogData.brand = data.brand;
+      });
+      }
+      if(this.dialogData.iotDeviceId!=null){
+        getOrganizationName(this.dialogData.iotDeviceId).then((data) => {
+        this.dialogData.organizationName = data?.organizationName;
+      });
+      }
+      const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
+       if (roadInfo) this.data.roadName = roadInfo.roadName;
+    },
+    methods: {
+        getData(){},
+      handleClickTabs() { },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .Broadcast {
+    width: 420px;
+    height: 240px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+  
+    .camera-video {
+      flex: 1.5;
+    }
+  
+    .tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+  
+      ::v-deep {
+        .el-tabs__content {
+          flex: 1;
+  
+          .el-tab-pane {
+            height: 100%;
+          }
+        }
+      }
+    }
+  
+    .bottom {
+      margin-top: 12px;
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      justify-content: end;
+  
+      >div {
+        font-size: 16px;
+        padding: 6px 12px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/Camera.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/Camera.vue
new file mode 100644
index 00000000..d7c36123
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/Camera.vue
@@ -0,0 +1,271 @@
+<template>
+    <Dialog v-model="visibleModel" :title="dialogData.deviceName" @update:close="visibleClose"
+     width="450px" style="z-index:3000">
+      <div class="Camera">
+        <Video class="video-stream" :camId="dialogData.iotDeviceId" :img="AENUM[dialogData.childType]" />
+        <ElTabs v-model="activeName" class="tabs">
+          <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="check(['business:home:camera']) && 
+                    [0, '0'].includes(
+                      dialogData.parseOtherConfig &&
+                        dialogData.parseOtherConfig.ptzCtrl
+                    )
+                  "
+                  src="@screen/images/camera-control-icon.svg"
+                  width="18px"
+                  height="18px"
+                  style="cursor: pointer"
+                />
+              </template>
+            </Descriptions>
+            
+            <div
+              v-if="check(['business:home:camera']) && PanoramicCameraTypes.indexOf(dialogData.childType) == -1"
+              style="width: 50%; display: flex; margin-top: 18px"
+            >
+              <span
+                style="
+                  color: #3de8ff;
+                  font-size: 15px;
+                  font-family: PingFang SC, PingFang SC;
+                  font-weight: 400;
+                  line-height: 18px;
+                "
+              >
+                雨刷:
+              </span>
+              <Button style="margin-left: 5px" @click.native="controlClick(49)"
+                >开</Button
+              >
+              <Button style="margin-left: 5px" @click.native="controlClick(48)"
+                >关</Button
+              >
+            </div>
+          </ElTabPane>
+          <!-- <ElTabPane label="摄相机参数" name="second">摄相机参数</ElTabPane> -->
+          <ElTabPane label="在线率统计" name="third">
+            <LineChart
+              v-if="activeName === 'third'"
+              :productId="dialogData.id"
+              style="height: 180px"
+            />
+          </ElTabPane>
+        </ElTabs>
+  
+        <!-- <div class="bottom">
+          <Button> 录像查看</Button>
+        </div> -->
+      </div>
+  
+      <CameraControlDialog :deviceId="dialogData.iotDeviceId" :dialogData="dialogData" @update:value="handleClose" :visible="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 CameraControlDialog from "../Dialogs/Camera/components/CameraControlDialog.vue";
+  import LineChart from "../LineChart/index.vue";
+  import { PanoramicCameraTypes } from "@screen/utils/enum.js";
+  import { checkPermi } from "@/utils/permission.js";
+  
+  import {
+    getRoadInfoByStakeMark,
+    getOrganizationName,
+  } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+  import { controlCamera } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+  import { throttle } from "lodash";
+  
+  import { dialogDelayVisible } from "../Dialogs/mixin.js";
+  
+  // 摄像机弹窗
+  export default {
+    name: "Camera",
+    mixins: [dialogDelayVisible],
+    components: {
+      Dialog,
+      Button,
+      Descriptions,
+      Video,
+      CameraControlDialog,
+      LineChart,
+    },
+    props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+    data() {
+      return {
+        AENUM:{
+         '1-3': '门架监控摄像机',
+         '1-4': '360全景摄像机',
+         '1-2': '高清网络摄像机',
+         '1-5': '180全景摄像机',
+         '1-1': '高清网络枪型固定摄像机',
+        },
+        PanoramicCameraTypes,
+        activeName: "first",
+        controlDialogVisible: false,
+        data: {},
+        list: [
+          {
+            label: "设备名称",
+            key: "deviceName",
+            gridColumn: 2
+          },
+          {
+            label: "道路名称",
+            key: "roadName",
+          },
+          {
+            label: "设备桩号",
+            key: "stakeMark",
+            
+          },
+          {
+            label: "设备方向",
+            key: "direction",
+            enum: "CameraDirectionEnum",
+            
+          },
+          {
+            label: "设备状态",
+            key: "deviceState",
+            enum: "DeviceTypeEnum",
+            
+          },
+          // {
+          //   label: "状态更新时间",
+          //   key: "updateTime",
+          //   // gridColumn: 2,
+          //   // enum: "CameraDirectionEnum"
+          // },
+          // {
+          //   label: '经/纬度',
+          //   key: "${longitude} / ${latitude}",
+          // },
+        ],
+      };
+    },
+    watch: {},
+    async created() {
+      this.data = { ...this.dialogData, organizationName: null, roadName: null };
+      if(this.dialogData.iotDeviceId!=null){
+        getOrganizationName(this.dialogData.iotDeviceId).then((data) => {
+        this.data.organizationName = data?.organizationName;
+      });
+      }     
+      const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
+      if (roadInfo) this.data.roadName = roadInfo.roadName;
+    },
+    methods: {
+    getData() {
+     
+    },
+      check(arr){
+        return checkPermi(arr);
+      },
+      handleClose() {
+        this.controlDialogVisible = false;
+      },
+      controlClick: throttle(function (type) {
+        // console.log(this.dialogData, "dialogData")
+        if (this.dialogData.deviceState != "0")
+          controlCamera(this.dialogData.iotDeviceId, type, false);
+        else this.$message.info("设备离线, 无法操作");
+      }, 150),
+      visibleClose(bool) {
+        if (bool) return;
+        this.controlDialogVisible = false;
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .Camera {
+    width: 400px;
+    height: 510px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    
+    .icon-content {
+      display: flex;
+      gap: 9px;
+      cursor: pointer;
+  
+      img {
+        display: inline-block;
+      }
+    }
+  
+    .video-stream {
+      width: 100%;
+      height: 216px;
+      margin-top: 10px;
+      // background: #00ebc1;
+  
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  
+    .tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+  
+      ::v-deep {
+        .el-tabs__content {
+          flex: 1;
+  
+          .el-tab-pane {
+            height: 100%;
+          }
+        }
+      }
+    }
+  
+    .bottom {
+      margin-top: 12px;
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      justify-content: end;
+  
+      > div {
+        font-size: 16px;
+        padding: 6px 12px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/ConfluenceArea.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/ConfluenceArea.vue
new file mode 100644
index 00000000..17168633
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/ConfluenceArea.vue
@@ -0,0 +1,224 @@
+<template>
+    <Dialog v-model="visibleModel"
+     title="合流区预警" width="550px" style="z-index:3000">
+      <Video class="video-stream" :camId="camId" img="河流区预警-超级雾灯" />
+  
+      <div class="confluencearea">
+        <ElTabs v-model="activeName" class="tabs">
+          <ElTabPane label="基本信息" name="first" style="height: 180px; ">
+            <Descriptions :list="list" :data="data" style="gap: 18px;overflow: hidden;" />
+          </ElTabPane>
+          <ElTabPane label="设备参数" name="second" style="height: 180px;overflow-y:auto ;">
+            <DeviceParams ref="refParam" disabled :dialogData="dialogData" />
+          </ElTabPane>
+          <ElTabPane label="在线率统计" name="third">
+            <LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 180px" />
+          </ElTabPane>
+        </ElTabs>
+      </div>
+      <template #footer>
+        <Button v-if="activeName != 'first' && data.deviceState == '1'" @click.native="deviceControlVisible = true">
+          设备操作
+        </Button>
+      </template>
+  
+      <DeviceControlDialog :rebind="rebind" 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 "../LineChart/index.vue";
+  import DeviceParams from "../Dialogs/ConfluenceArea/components/DeviceParams.vue";
+  import DeviceControlDialog from "../Dialogs/ConfluenceArea/components/DeviceControlDialog.vue";
+  import request from "@/utils/request";
+  
+  import {
+    getRoadInfoByStakeMark,
+    getProduct,
+  } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+  import { dialogDelayVisible } from "../Dialogs/mixin.js";
+  import { resolve } from "@antv/x6/lib/registry/node-anchor/util";
+  
+  // 离网光伏供电
+  export default {
+    name: "ConfluenceArea",
+    mixins: [dialogDelayVisible],
+    components: {
+      Dialog,
+  
+      Descriptions,
+      LineChart,
+      Video,
+      Button,
+      DeviceParams,
+      DeviceControlDialog
+    },
+    props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+    data() {
+      return {
+        refParam:null,
+        activeName: "first",
+        releaseVisible: false,
+        deviceControlVisible: false,
+        data: {
+          deviceName: "LH24",
+          roadName: "济菏高速",
+          stakeMark: "k094+079",
+          direction: "1",
+          organizationName: "山东高速济南发展公司",
+          brand: "XXX厂家",
+          deviceState: "0",
+        },
+        list: [
+          {
+            label: "设备名称",
+            key: "deviceName",
+          },
+          {
+            label: "设备桩号",
+            key: "stakeMark",
+          },
+          {
+            label: "道路名称",
+            key: "roadName",
+          },
+          {
+            label: "设备方向",
+            key: "direction",
+            enum: "CameraDirectionEnum",
+          },
+          {
+            label: "设备状态",
+            key: "deviceState",
+            enum: "DeviceTypeEnum",
+            // visible: false,
+          },
+          {
+            label: "设备厂商",
+            key: "manufacturer",
+          },
+        ],
+        camId:null
+      };
+    },
+    async created() {
+         // 修改camid
+      if(typeof this.dialogData.otherConfig === 'string'){
+        const oConfig = JSON.parse(this.dialogData.otherConfig)
+        if(oConfig && oConfig.camId){
+          this.camId = oConfig.camId
+        }
+      }
+      this.data = {
+        ...this.dialogData,
+        roadName: '济菏高速',
+      };
+      //厂商
+      if(this.dialogData.productId!=null){
+        getProduct(this.dialogData.productId).then((data) => {
+        this.dialogData.brand = data.brand;
+      });
+      }
+      // const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
+      // if (roadInfo) this.data.roadName = roadInfo.roadName;
+    },
+    methods: {
+    getData() {
+     
+    },
+      rebind(){
+        this.$refs.refParam.bind()
+      },
+      async getDeviceInfo() {
+        return request({
+          url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || "10.0.36.143-1883"
+            }/3`,
+          method: "get",
+          params: {},
+        });
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  div.switcher {
+    font-size: 12px;
+    padding: 2px;
+  }
+  </style>
+  <style lang="scss" scoped>
+  .confluencearea {
+    width: 508px;
+    // height: 248px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+  
+    ::v-deep {
+      .el-tabs__content {
+        overflow-y: auto;
+        max-height: 220px;
+      }
+    }
+  
+    .camera-video {
+      flex: 1.5;
+    }
+  
+    .tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      ::v-deep {
+        .el-tabs__content {
+          flex: 1;
+          overflow: hidden;
+          .el-tab-pane {
+            height: 100%;
+          }
+        }
+      }
+    }
+  
+    .bottom {
+      margin-top: 12px;
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      justify-content: end;
+  
+      >div {
+        font-size: 16px;
+        padding: 6px 12px;
+      }
+    }
+  }
+  </style>../mixin../mixin../mixin
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/DialogFatingWakeUp.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/DialogFatingWakeUp.vue
new file mode 100644
index 00000000..02bb76c5
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/DialogFatingWakeUp.vue
@@ -0,0 +1,198 @@
+<template>
+    <Dialog v-model="visibleModel" 
+    title="疲劳唤醒弹窗" width="470px" style="z-index:3000" >
+      <div class="FatigueWakesUp">
+        <Video class="video-stream" :camId="camId" img="激光疲劳唤醒" />
+        <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
+          <ElTabPane label="基本信息" name="first">
+            <Descriptions labelWidth="72px" :list="list" :data="data" style="gap: 18px" />
+          </ElTabPane>
+          <!-- <ElTabPane label="设备参数" name="second">设备参数</ElTabPane> -->
+          <ElTabPane label="在线率统计" name="third">
+            <LineChart v-if="activeName === 'third'" :productId="data.id" style="height: 180px" />
+          </ElTabPane>
+        </ElTabs>
+      </div>
+      <template #footer v-if="check(['business:home:laserFatigueAwakening'])">
+        <Button  @click.native="onControlClick" disabled :style="(data.deviceState==='1' && data.iotDeviceId)?'':'background-color:#A9AEB8'">设备操作</Button>
+      </template>
+      <!-- 设备操作弹窗 -->
+      <DeviceControlDialog v-model="deviceControlVisible" :deviceId="data.iotDeviceId" :productId="data.id"
+        :deviceType="data.deviceType"  />
+    </Dialog>
+  </template>
+  
+  <script>
+  import Dialog from "@screen/components/Dialog/index.vue";
+  import Descriptions from "@screen/components/Descriptions.vue";
+  import Button from "@screen/components/Buttons/Button.vue";
+  import {
+    getRoadInfoByStakeMark,
+    getProduct,
+  } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+  import Video from "@screen/components/Video";
+  import DeviceControlDialog from "../Dialogs/FatigueWakesUp/components/DeviceControlDialog.vue";
+  import { checkPermi } from "@/utils/permission.js";
+  import request from "@/utils/request";
+  import { dialogDelayVisible } from "../Dialogs/mixin.js";
+  import LineChart from "../LineChart/index.vue";
+
+  
+  // 疲劳唤醒弹窗
+  export default {
+    name: "DialogFatigueWakesUp",
+    components: {
+      Dialog,
+      Descriptions,
+      Video,
+      DeviceControlDialog,
+      Button,
+      LineChart,
+    },
+    
+  props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+    data() {
+      return {
+        camId: null ,
+        activeName: "first",
+        deviceControlVisible: false,
+        list: [
+          {
+            label: "设备名称",
+            key: "deviceName",
+          },
+          {
+            label: "设备桩号",
+            key: "stakeMark",
+          },
+          {
+            label: "道路名称",
+            key: "roadName",
+          },
+          {
+            label: "设备方向",
+            key: "direction",
+            enum: "CameraDirectionEnum",
+          },
+          {
+            label: "设备状态",
+            key: "deviceState",
+            enum: "DeviceTypeEnum",
+          },
+          {
+            label: "设备厂商",
+            key: "manufacturer",
+          },
+        ],
+      };
+    },
+    async mounted() {
+      // 修改camid
+      if(typeof this.data.otherConfig === 'string'){
+        const oConfig = JSON.parse(this.data.otherConfig)
+        if(oConfig && oConfig.camId){
+          this.camId = oConfig.camId
+        }
+      }
+      console.log("8888888888",this.data)
+      this.data = { ...this.data, roadName: '济菏高速' };
+  
+ 
+      getProduct(this.data.productId).then((data) => {
+        this.data.brand = data.brand;
+      });
+
+   
+  
+      // const roadInfo = await getRoadInfoByStakeMark(this.data.stakeMark);
+  
+      // if (roadInfo) this.$set(this.data, "roadName", roadInfo.roadName);
+    },
+    methods: {
+      check(arr){
+        return checkPermi(arr);
+      },
+      
+    getData() {
+     
+    },
+      onControlClick(){
+        if(this.data.deviceState==='1' && this.data.iotDeviceId){
+          this.deviceControlVisible = true
+        }
+      },
+      handleClickTabs() { },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .fatigue-wakes-up {
+    position: absolute; /* 或 fixed，取决于你的需求 */
+    z-index: 3000; /* 确保这个值足够高 */
+    /* 其他样式 */
+    }
+  .FatigueWakesUp {
+    width: 420px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    // padding-bottom: 24px;
+  
+    .camera-video {
+      flex: 1.5;
+    }
+  
+    .tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+  
+      ::v-deep {
+        .el-tabs__content {
+          flex: 1;
+  
+          .el-tab-pane {
+            height: 100%;
+          }
+        }
+      }
+    }
+  
+    .bottom {
+      margin-top: 12px;
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      justify-content: end;
+  
+      >div {
+        font-size: 16px;
+        padding: 6px 12px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/DrivingGuidance.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/DrivingGuidance.vue
new file mode 100644
index 00000000..cd3c0c7e
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/DrivingGuidance.vue
@@ -0,0 +1,268 @@
+<template>
+    <Dialog v-model="visibleModel"
+     title="行车诱导" width="470px" style="z-index:3000" >
+      <div class="DrivingGuidance">
+        <Video class="video-stream" :camId="camId" img="智能行车诱导" />
+  
+        <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
+          <ElTabPane label="基本信息" name="first">
+            <Descriptions :list="list" :data="data" style="gap: 18px" />
+          </ElTabPane>
+          <!-- <ElTabPane label="设备参数" name="second">设备参数</ElTabPane> -->
+          <ElTabPane label="在线率统计" name="third">
+            <LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 180px" />
+          </ElTabPane>
+        </ElTabs>
+  
+        <div class="bottom">
+          <Button v-hasPermi="['business:home:drivingGuidance']" @click.native="onControlClick" :style="dialogData.useState ? '':'background-color:grey'">设备操作</Button>
+        </div>
+      </div>
+      <DeviceControlDialog v-model="deviceControlVisible" :deviceId="dialogData.iotDeviceId" :id="dialogData.id"
+        :deviceType="dialogData.deviceType" />
+    </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 DeviceControlDialog from "../Dialogs/DrivingGuidance/components/DeviceControlDialog.vue";
+  import {
+    getRoadInfoByStakeMark,
+    getProduct,
+  } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+  import Video from "@screen/components/Video";
+  import request from "@/utils/request";
+  import { delay } from "@screen/utils/common.js";
+  import { handle3CResult } from "@screen/utils/deviceControl.js";
+  import { inducerModeDic, inducerWorkTypeDic } from "@screen/utils/enum.js";
+  import { find, assign } from "lodash";
+  import { dialogDelayVisible } from "../Dialogs/mixin.js";
+  import LineChart from "../LineChart/index.vue";
+  
+  // 行车诱导
+  export default {
+    name: "DrivingGuidance",
+    mixins: [dialogDelayVisible],
+    provide() {
+      return {
+        requestURL: this.requestURL,
+        updateFormData: this.updateFormData
+      };
+    },
+    components: {
+      Dialog,
+      Button,
+      Descriptions,
+      DeviceControlDialog,
+      Video,
+      LineChart,
+    },
+    props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+    data() {
+      return {
+        camId: '',
+        activeName: "first",
+        deviceControlVisible: false,
+        data: {
+          deviceType: "行车诱导",
+          deviceStation: "k094+079",
+          roadName: "济菏高速",
+          direction: "1",
+          deviceState: "0",
+          deviceVendors: "XXX厂家",
+        },
+        list: [
+          {
+            label: "设备名称",
+            key: "deviceName",
+          },
+          {
+            label: "设备桩号",
+            key: "stakeMark",
+          },
+          {
+            label: "道路名称",
+            key: "roadName",
+          },
+          {
+            label: "设备方向",
+            key: "direction",
+            enum: "CameraDirectionEnum",
+          },
+          {
+            label: "设备状态",
+            key: "deviceState",
+            enum: "DeviceTypeEnum",
+          },
+          {
+            label: "设备厂商",
+            key: "manufacturer",
+          },
+          {
+            label: "工作模式",
+            key: "workMode",
+          },
+          {
+            label: "上行工作状态",
+            key: "onWorkStatus",
+          },
+          {
+            label: "下行工作状态",
+            key: "inWorkStatus",
+          },
+        ],
+        camId:null
+      };
+    },
+    async created() {
+      // 修改camid
+      if(typeof this.data.otherConfig === 'string'){
+        const oConfig = JSON.parse(this.data.otherConfig)
+        if(oConfig && oConfig.camId){
+          this.camId = oConfig.camId
+        }
+      }
+      
+      this.data = { ...this.dialogData, roadName: '济菏高速' };
+      if(this.dialogData.productId!=null){
+        getProduct(this.dialogData.productId)
+        .then((data) => {
+          this.dialogData.brand = data.brand;
+        })
+        .catch((err) => { });
+      }
+   
+      // this.requestURL(52)
+      //   .then((result) => {
+      //     this.data.workMode = {
+      //       "00": "手动控制",
+      //       "01": "自动控制",
+      //       "02": "万年历",
+      //     }[result.mode];
+      //     this.data.onWorkStatus = result.onWorkStatus;
+      //     this.data.inWorkStatus = result.inWorkStatus;
+      //   })
+      //   .catch((err) => { });
+      this.requestURL().then(async (data) => {
+        await delay(0);
+        const formData = {};
+        formData.controlType = data.mode;
+        await handle3CResult(data, formData, this.requestURL);
+        this.updateFormData({ ...formData, workMode: data.mode });
+      });
+      // const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
+      // console.log(
+      //   "%c [ roadInfo ]-103-「index.vue」",
+      //   "font-size:15px; background:#36347c; color:#7a78c0;",
+      //   roadInfo.roadName
+      // );
+  
+      // if (roadInfo) this.data.roadName = roadInfo.roadName;
+    },
+    methods: {
+        getData() {},
+      onControlClick(){
+        if(this.dialogData.useState){
+          this.deviceControlVisible = true
+        }
+      },
+      updateFormData(formData) {
+        formData.workMode &&
+          this.$set(this.data, "workMode", inducerModeDic[formData.workMode]); //(this.data.workMode = inducerModeDic[formData.controlType]);
+        formData.inWorkStatus &&
+          this.$set(this.data, "inWorkStatus", inducerWorkTypeDic[formData.inWorkStatus]); //(this.data.inWorkStatus = inducerWorkTypeDic[formData.inWorkStatus]);
+        formData.onWorkStatus &&
+          this.$set(this.data, "onWorkStatus", inducerWorkTypeDic[formData.onWorkStatus]); //(this.data.onWorkStatus = inducerWorkTypeDic[formData.onWorkStatus]);
+  
+      },
+      handleClickTabs() { },
+      requestURL(functionId = 52, options = {}) {
+        return new Promise((resolve, reject) => {
+          if (!this.dialogData.iotDeviceId) {
+            reject();
+          } else {
+            request
+              .post(
+                `business/device/functions/${this.dialogData.iotDeviceId}/${functionId}`,
+                options
+              )
+              .then((result) => {
+                if (result.code != 200) return reject();
+                resolve(result.data[0]);
+              })
+              .catch((err) => {
+                reject();
+              });
+          }
+  
+        });
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .DrivingGuidance {
+    width: 420px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+  
+    .camera-video {
+      flex: 1.5;
+    }
+  
+    .tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+  
+      ::v-deep {
+        .el-tabs__content {
+          flex: 1;
+  
+          .el-tab-pane {
+            height: 100%;
+          }
+        }
+      }
+    }
+  
+    .bottom {
+      margin-top: 12px;
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      justify-content: end;
+  
+      >div {
+        font-size: 16px;
+        padding: 6px 12px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/GuardrailCollision.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/GuardrailCollision.vue
new file mode 100644
index 00000000..e037eb5d
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/GuardrailCollision.vue
@@ -0,0 +1,250 @@
+<template>
+    <Dialog v-model="visibleModel"
+     title="护栏碰撞弹窗" width="600px" style="z-index:3000">
+      <Video class="video-stream" :camId="camId" img="护栏碰撞预警系统" />
+  
+      <div class="GuardrailCollision">
+        <ElTabs v-model="activeName" class="tabs">
+          <ElTabPane label="基本信息" name="first">
+            <Descriptions :list="list" :data="data" style="gap: 18px" />
+             <div class="jsdcontrol" v-hasPermi="['business:home:guardrailCollision']">
+                <span style="
+                      color: #3de8ff;
+                      font-size: 12px;
+                      font-family: PingFang SC, PingFang SC;
+                      font-weight: 400;
+                      line-height: 25px;
+                    ">
+                  警示灯:
+                </span>
+                <Button style="margin-left: 5px" @click.native="controlClick(30)">开</Button>
+                <Button style="margin-left: 5px" @click.native="controlClick(31)">关</Button>
+                <Button style="margin-left: 5px" @click.native="controlClick(34)">退出</Button>
+              </div>
+          </ElTabPane>
+  
+          <ElTabPane label="在线率统计" name="third">
+            <LineChart v-if="activeName === 'third'" :productId="dialogData.id" />
+          </ElTabPane>
+        </ElTabs>
+      </div>
+    </Dialog>
+  </template>
+  
+  <script>
+  import Dialog from "@screen/components/Dialog/index.vue";
+  import Button from "@screen/components/Buttons/Button.vue";
+  import Descriptions from "@screen/components/Descriptions.vue";
+  import Video from "@screen/components/Video";
+  import LineChart from "../LineChart/index.vue";
+
+  import Switcher from "@screen/pages/service/PublishingChannelManagement/components/Switcher.vue";
+
+  import { dialogDelayVisible } from "../Dialogs/mixin.js";
+  import request from "@/utils/request";
+  
+  import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue";
+  
+  // 广播发布
+  export default {
+    name: "GuardrailCollision",
+    mixins: [dialogDelayVisible],
+    components: {
+      Dialog,
+      Button,
+      Descriptions,
+      LineChart,
+      Video,
+      Switcher,
+      RadioGroup,
+    },
+    props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+    emit: ["close"],
+    computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+    data() {
+      return {
+        activeName: "first",
+        releaseVisible: false,
+        secondLoading: true,
+        data: {
+          deviceName: "LH24",
+          roadName: "济菏高速",
+          stakeMark: "k094+079",
+          direction: "1",
+          organizationName: "山东高速济南发展公司",
+          brand: "XXX厂家",
+          deviceState: "0",
+        },
+  
+        roadTypeList: [
+          { key: "1", label: "菏泽方向" },
+          { key: "3", label: "济南方向" },
+        ],
+        roadType: "1",
+        list: [
+          {
+            label: "设备名称",
+            key: "deviceName",
+          },
+          {
+            label: "设备桩号",
+            key: "stakeMark",
+          },
+          {
+            label: "道路名称",
+            key: "roadName",
+          },
+          {
+            label: "设备方向",
+            key: "direction",
+            enum: "CameraDirectionEnum",
+          },
+          {
+            label: "设备状态",
+            key: "deviceState",
+            enum: "DeviceTypeEnum",
+          },
+          // {
+          //   label: '设备厂商',
+          //   key: "brand",
+          // },
+        ],
+        activeOption: {
+          active: {
+            text: "开",
+          },
+          unActive: {
+            text: "关",
+          },
+        },
+        devicesList: [],
+        camId:null
+      };
+    },
+    async created() {
+      // if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883';
+  
+        // 修改camid  
+        if(typeof this.data.otherConfig === 'string'){
+        const oConfig = JSON.parse(this.data.otherConfig)
+        if(oConfig && oConfig.camId){
+          this.camId = oConfig.camId
+        }
+      }
+      this.data = { ...this.dialogData, roadName: '济菏高速' };
+      if(this.dialogData.productId!=null){
+        getProduct(this.dialogData.productId)
+        .then(data => {
+          this.dialogData.brand = data.brand;
+        })
+      }
+    
+  
+      // const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
+  
+      // if (roadInfo) this.data.roadName = roadInfo.roadName;
+    },
+    methods:{
+        getData() {
+     
+       },
+      controlClick(id){
+        request({
+          url: `/business/device/functions/${this.dialogData.iotDeviceId}/A3`,
+          method: "POST",
+          data: {
+           function:id
+          }
+        }).then(res=>{
+          if (result.code != 200) {
+            this.$message.error(result.msg);
+            return;
+          };
+          this.$message.success('设备请求完成')
+        })
+      }
+    }
+  };
+  </script>
+  
+  <style lang="scss">
+  div.switcher {
+    font-size: 12px;
+    padding: 2px;
+  }
+  </style>
+  <style lang="scss" scoped>
+  .GuardrailCollision {
+    width: 510px;
+    height: 240px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+  
+    .camera-video {
+      flex: 1.5;
+    }
+  
+    .tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+  
+      ::v-deep {
+        .el-tabs__content {
+          flex: 1;
+  
+          .el-tab-pane {
+            height: 100%;
+          }
+        }
+      }
+    }
+  
+    .content-second {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+      gap: 9px;
+    }
+  
+    .bottom {
+      margin-top: 12px;
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      justify-content: end;
+  
+      > div {
+        font-size: 16px;
+        padding: 6px 12px;
+      }
+    }
+  }
+  .jsdcontrol{
+    display:flex;
+    margin-top:20px;
+    align-content: center;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/InfoBoard.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/InfoBoard.vue
new file mode 100644
index 00000000..88826871
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/InfoBoard.vue
@@ -0,0 +1,1027 @@
+<template>
+    <div class="mask" :style="{
+      ...(isMultiControl ? {
+        'flex-direction': 'column', position: 'static', 'z-index': 0, background: 'rgba(0,0,0,0)',
+        'margin-top': '15px', gap: '15px'
+      } : undefined),'z-index': 2000,
+    }" >
+      <!-- <div style="display: flex;width:100%;padding-right: 9px;" v-if="isMultiControl">
+        <label class="el-form-item__label" style="width: 90px;">分辨率:</label>
+        <el-select v-model="selectedSize" placeholder="请选择" @change="____initData">
+          <el-option v-for=" item  in  boardSizeArr " :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select>
+      </div> -->
+      <transition>
+        <div v-if="visible" class="content">
+          <div class="mainDialog" :style="{ height: isMultiControl ? '370px' : undefined }">
+            <div class="dialog_head">
+              <div class="tit"><span v-if="!isMultiControl"> {{ selectedDevice.deviceName }}</span>
+                <span v-else>待下发信息</span>
+              </div>
+              <img v-if="!isMultiControl" 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%">
+                <vuescroll :ops="scrollOptions" class="listBox">
+                  <div v-for="( itm, indx ) in  selectedBdMsg " :key="indx" class="tplItem">
+                    <!-- 模板内容 -->
+                    <BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
+                    <!-- 操作按钮 -->
+                    <div class="infoBtnBox" v-if="check(['business:home:boardTemplate'])">
+                      <el-tooltip content="编辑" placement="top">
+                        <p @click="____onEditBoardItem(itm, indx)" class="btn btnEdit"></p>
+                      </el-tooltip>
+                      <el-tooltip content="删除" placement="top">
+                        <p @click="____onDeleteBoardItem(indx)" class="btn btnDelete"></p>
+                      </el-tooltip>
+                    </div>
+                  </div>
+                </vuescroll>
+              </div>
+              <div v-else class="dialogContent_box" style="height: 100%">
+                <div class="dialogContent_box_empty">暂无数据</div>
+              </div>
+              <div v-if="!isMultiControl" class="dialogContent_bottom">
+                <el-tabs v-model="activeTab" @tab-click="tabClickFn">
+                  <el-tab-pane label="详情信息" name="first">
+                    <div class="show_bottom_tab_box">
+                      <div class="deviceInfo title">
+                        <div class="deviceInfo_l">设备名称:</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>
+                      <div class="deviceInfo">
+                        <div class="deviceInfo_l">屏幕像素:</div>
+                        <div class="deviceInfo_r">
+                          {{
+      JSON.parse(selectedDevice.otherConfig).screenSize
+    }}
+                          px
+                        </div>
+                      </div>
+                      <div class="deviceInfo">
+                        <div class="deviceInfo_l">设备状态</div>
+                        <div class="deviceInfo_r">
+                          {{ selectedDevice.deviceState == 1 ? "在线" : "离线" }}
+                        </div>
+                      </div>
+                    </div>
+                  </el-tab-pane>
+                  <el-tab-pane label="在线率统计" name="third">
+                    <LineChart v-if="activeTab === 'third'" :productId="selectedDevice.id" style="height: 160px" />
+                  </el-tab-pane>
+                </el-tabs>
+              </div>
+              <div class="dialogContent_bottom_btn">
+                <el-button  v-hasPermi="['business:home:board']" class="btnInfoBoard" type="add" @click.native="____onAddDeviceItem()" >添加信息</el-button>
+                <el-button  v-hasPermi="['business:home:boardTemplate']" class="btnInfoBoard" type="publish" @click="____publishInfo" :disabled="selectedBdMsg.length <= 0 ||
+      (isMultiControl && selectItems.length === 0) ||
+      (!isMultiControl && [undefined, null].indexOf(selectedDevice.iotDeviceId) !== -1
+      )
+      ">发布信息</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)',
+    }
+      " />
+                <div class="txt">信息模板</div>
+              </div>
+              <!-- 附近的摄像机 -->
+              <div v-if="!isMultiControl" 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 v-if="isShowTemplate" class="sideContent template"
+            :style="{ height: isMultiControl ? '320px' : undefined }">
+            <vuescroll :ops="scrollOptions" class="listBox">
+              <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">
+                  <!-- 模板内容 -->
+                  <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>
+                        </div>
+                      </div> -->
+                  <!-- 操作按钮 -->
+                  <div class="infoBtnBox infoBtnBoxSm">
+                    <el-tooltip content="加入待下发信息" placement="top">
+                      <p @click="____onTplToDevice(itm, false)" class="btn btnApply"></p>
+                    </el-tooltip>
+                  </div>
+                </div>
+              </div>
+            </vuescroll>
+          </div>
+  
+          <!-- 附近相机 -->
+          <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>
+    </div>
+  </template>
+  
+  <script>
+  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 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 { getTemplateList } from "@/api/board/template";
+  
+  import testDeviceInfo from "@screen/testData/infoBoard.js";
+  
+  import CameraShower from "@screen/components/CameraShower";
+  
+  import InfoBoard from "@screen/mixins/InfoBoard";
+  import LineChart from "../LineChart/index.vue";
+  import { checkPermi } from "@/utils/permission.js";
+  import { batchFunctions } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+  import { multiResultShow } from "@screen/utils/common";
+  export default {
+    name: "InfoBoard",
+    mixins: [InfoBoard],
+    data() {
+      return {
+        isShowTemplate: false,
+        dialogInfoCamera: false,
+        dialogInfoList: [],
+        moBanList: [],
+        activeNames: [1001, 1002],
+        activeTab: "first",
+        tabDataInfoList: [],
+        boardSizeArr: [],
+        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: "菏泽" },
+        ],
+        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 },
+        ],
+        cameraControlList: [
+          { id: 5001, txt: "变倍", numL: 11, numR: 12 },
+          { id: 5002, txt: "光圈", numL: 16, numR: 15 },
+          { id: 5003, txt: "聚焦", numL: 14, numR: 13 },
+        ],
+  
+        selectedBdMsg: [],
+        selectedSize: "",
+        editDialog: {
+          mode: "",
+          type: "",
+          visible: false,
+          tpl: {},
+        },
+        scrollOptions,
+        templateAvailable: null,
+        tplCategory: [], //模板
+        templateAll: [],
+        nearbyCameraList: [],
+      };
+    },
+    emit: ["close"],
+    props: {
+      visible: {
+        type: Boolean,
+        default: false,
+      },
+      selectedDevice: {
+        type: Object,
+        default: () => { },
+      },
+      isMultiControl: Boolean,
+      selectItems: {
+        type: Array,
+        default: () => []
+      },
+      selectedSizeMutl: {
+        type: String
+      }
+    },
+    watch: {
+      selectedDevice: {
+        handler(newV) {
+          if (!this.isMultiControl)
+            this.____initData();
+        },
+        immediate: true,
+      }, selectedSizeMutl: {
+        handler(v) {
+          this.selectedSize = v;
+          this.____initData();
+        }
+      }
+    },
+    components: {
+      LineChart,
+      BoardPreview,
+      BoardTplPreview,
+      BoardInfoEditor,
+      vuescroll,
+      Teleport,
+      CameraShower,
+    },
+    created() {
+  
+    },
+    computed: {},
+    async mounted() {
+      // if (this.isMultiControl) {
+      //   await this.____getBoardPixel();
+      // //   console.log(this.boardSizeArr, "boardSizeArr");
+      //   this.selectedSize = this.selectedSizeMutl;
+      //   this.____initData();
+      // }
+    },
+    methods: {
+      check(arr){
+        return checkPermi(arr);
+      },
+      // 获取信息模板分类
+      async ____getTemplateCategory() {
+        const res = await this.getDicts("iot_template_category");
+        this.tplCategory = res.data;
+      },
+      //获取全部模版
+      async ____getAllTemplate() {
+        const res = await getTemplateList()
+        this.templateAll = res.data;
+      },
+      async ____getBoardPixel() {
+        // this.boardSizeDic = {};
+        const res = await this.getDicts("iot_board_pixel");
+        res.data.forEach((item) => {
+          let dictValue = item.dictLabel.substr(item.dictLabel.search(/\d/))
+          this.boardSizeArr.push({
+            label: item.dictLabel,
+            value: dictValue
+          });
+        });
+  
+      },
+      //初始化数据
+      async ____initData() {
+        if (this.selectedDevice?.otherConfig) {
+          this.selectedSize = JSON.parse(this.selectedDevice.otherConfig).screenSize;
+        }
+        if (this.tplCategory.length && this.templateAll.length) {
+          this.____setAvailableTemplate();
+        } else {
+          await this.____getTemplateCategory();
+          await this.____getAllTemplate();
+          this.____setAvailableTemplate();
+        }
+        if (!this.isMultiControl) {
+          this.____getDeviceInfo();
+        }
+  
+      },
+      //  获取已选中设备的展示内容
+      ____getDeviceInfo() {
+        if (IS_TESTING) {
+          this.selectedBdMsg = _.cloneDeep(testDeviceInfo.data["3A"].content);
+        } else {
+          //改下判断条件 iotDeviceId为null时不要请求后台  加个提示 设备未接入
+          const iotDeviceId = this.selectedDevice.iotDeviceId;
+          if (iotDeviceId != null && iotDeviceId != undefined)
+            getBoardDeviceInfo(iotDeviceId)
+              .then((res) => {
+                this.selectedBdMsg = res.data["3A"].content;
+              })
+              .catch((err) => { });
+          else {
+            //     this.$emit("update:visible", false);
+            // this.isShowTemplate = false;
+            this.$message.error("设备未接入");
+          }
+        }
+      },
+      // 设置当前设备可用的模板
+      ____setAvailableTemplate() {
+        this.templateAvailable = [];
+        this.tplCategory.forEach((item, index) => {
+          let arr = this.templateAll["" + index];
+          if (arr.length > 0) {
+            let temp = [];
+            arr.forEach((tpl) => {
+              if (tpl.screenSize == this.selectedSize) {
+                temp.push(tpl);
+              }
+            });
+            if (temp.length > 0) {
+              this.templateAvailable.push({
+                ...item,
+                list: temp,
+              });
+            }
+          }
+        });
+      },
+      //调用编辑器编辑设备展示项
+      ____onEditBoardItem(tpl, index) {
+        // type : board template
+        // mode : edit add toDevice toTemplate
+        this.boardItemEdtingIndex = index;
+        this.editDialog = {
+          visible: true,
+          mode: "edit",
+          type: "device",
+          tpl,
+        };
+      },
+      //删除设备展示项
+      ____onDeleteBoardItem(index) {
+        if (index > -1) {
+          this.selectedBdMsg.splice(index, 1);
+          this.$message.success("删除成功");
+        }
+      },
+      //编辑机编辑后的回调
+      ____onEditSubmit(para) {
+        this.editDialog.tpl = {};
+        this.editDialog.visible = false;
+  
+        if (para.type == "device") {
+          if (para.mode == "edit") {
+            this.selectedBdMsg[this.boardItemEdtingIndex] = para.data;
+          } else {
+            this.selectedBdMsg.push(para.data);
+          }
+        } else if (para.mode == "toDevice") {
+          this.selectedBdMsg.push(para.data);
+        } else {
+          this.____refreshPageData(para);
+        }
+      },
+  
+      ____refreshPageData(para) { },
+  
+      ____getNearbyCams() {
+        if (!this.selectedDevice.stakeMark) {
+          this.$message.warning("设备缺少stakeMark字段...");
+        }
+        let stakeMark = this.selectedDevice.stakeMark;
+  
+        // stakeMark = "K64+300";
+  
+        getNearbyCameraByPileNum(stakeMark).then((res) => {
+          this.nearbyCameraList = res.data;
+        });
+      },
+      cameraControlBtnFn(item) {
+        this.getEnergyCameraControlFn(item.cmd, 5);
+      },
+      cameraControlLeFn(item) {
+        // console.log('按钮点击事件', item)
+        this.getEnergyCameraControlFn(item, 5);
+      },
+      getEnergyCameraControlFn(cmd, spe) {
+        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);
+      },
+      // cameraDataVideoList
+      cameraValCha(date, num) {
+        let str = {
+          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)],
+              },
+            ];
+          }
+        });
+      },
+      tabClickFn(tab, event) {
+        console.log(tab, event);
+      },
+      ____onClose() {
+        this.$emit("update:visible", false);
+        this.isShowTemplate = false;
+        this.$emit("close");
+      },
+      ____onShowTemplate() {
+        if (this.dialogInfoCamera) {
+          this.dialogInfoCamera = false;
+        }
+        this.isShowTemplate = !this.isShowTemplate;
+      },
+      ____onShowCameraShower() {
+        if (this.isShowTemplate) {
+          this.isShowTemplate = false;
+        }
+        this.dialogInfoCamera = !this.dialogInfoCamera;
+        this.____getNearbyCams();
+      },
+      subjectBtnFn(item) {
+        this.subjectBtn = item.id;
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .listBox {
+    padding: 20px;
+  
+    .tplItem {
+      margin-right: 14px;
+      display: flex;
+      align-items: stretch;
+      padding-bottom: 10px;
+  
+      .boardPreview {
+        border: 1px solid rgba(61, 232, 255, 0.5);
+        // width: 560px;
+        // height:80px;
+        flex: 1;
+      }
+  
+      .infoBtnBox {
+        &.infoBtnBoxSm {
+          width: 60px;
+        }
+  
+        width: 110px;
+        height: 80px;
+        display: flex;
+        margin-left: 10px;
+        /* // border: solid 1px #05afe3; */
+        border: 1px solid rgba(61, 232, 255, 0.5);
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+  
+        .btn {
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          width: 30px;
+          height: 30px;
+  
+          &.btnApply {
+            background-image: url(~@/assets/jihe/images/button/toLeft.svg);
+          }
+  
+          &.btnEdit {
+            background-image: url(~@/assets/jihe/images/button/edit.svg);
+          }
+  
+          &.btnDelete {
+            background-image: url(~@/assets/jihe/images/button/delete.svg);
+          }
+        }
+  
+        i {
+          font-size: 24px;
+          color: #666;
+          padding-left: 4px;
+          cursor: pointer;
+          caret-color: rgba(0, 0, 0, 0);
+          user-select: none;
+        }
+  
+        i:hover {
+          color: #05afe3;
+        }
+  
+        .disabledClass {
+          pointer-events: none;
+          cursor: auto !important;
+          color: #ccc;
+        }
+      }
+    }
+  
+    .controlBox {
+      margin-top: 10px;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: center;
+    }
+  
+    .el-collapse {
+      max-height: 100% !important;
+      overflow: auto;
+      border-bottom: none;
+      border-top: none;
+      padding: 0 0.5vw;
+    }
+  }
+  
+  .mask {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.36);
+    z-index: 1100;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  
+    .content {
+      display: flex;
+      flex-direction: row;
+    }
+  }
+  
+  .mainDialog {
+    width: 510px;
+    height: 620px;
+    background-color: #114c66;
+    margin-right: 3px;
+  }
+  
+  .sideContent {
+    border: 2px solid #196980;
+    background-color: #114c66;
+    position: relative;
+    margin-top: 50px;
+  
+    &.camera {
+      width: 540px;
+      height: 556px;
+    }
+  
+    &.template {
+      width: 430px;
+      height: 556px;
+      padding: 20px 0 20px 10px;
+    }
+  }
+  
+  .dialog_head {
+    width: 100%;
+    height: 48px;
+    padding: 0 10px;
+    background-image: url("~@/assets/screen/xtb/qbbtit.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  
+    .tit {
+      color: #3de8ff;
+      font-size: 18px;
+    }
+  
+    .btnCls {
+      width: 13px;
+      height: 13px;
+      cursor: pointer;
+    }
+  
+    .deco {
+      width: 55%;
+      height: 5px;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+  }
+  
+  .dialogContent {
+    width: 100%;
+    height: 300px;
+    padding: 10px 24px 10px 10px;
+    position: relative;
+  }
+  
+  .dialogContent_box {
+    width: 100%;
+    // height: 100%;
+    overflow-y: scroll;
+  }
+  
+  .dialogContent_l {
+    width: 355px;
+    // height: 4.91vh;
+    border: 2px solid #1d7890;
+    padding: 1px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .dialogContent_r {
+    width: 96px;
+    // height: 4.91vh;
+    border: 2px solid #1d7890;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+  
+  .dialogContent_l_xsq {
+    width: 256px;
+    height: 100%;
+    font-size: 18px;
+    color: #ff0000;
+    background-color: #000;
+    line-height: 1;
+    // text-align: center;
+    display: flex;
+    // justify-content: center;
+    align-items: center;
+  }
+  
+  .show_r_btn {
+    width: 1.67vw;
+    height: 2.96vh;
+    cursor: pointer;
+  }
+  
+  .dialogContent_r_btn1 {
+    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-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  
+  .dialogContent_r_btn3 {
+    background-image: url("~@/assets/screen/xtb/zz.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  
+  .dialogContent_box_item {
+    margin-bottom: 0.5vh;
+    display: flex;
+    justify-content: space-between;
+  }
+  
+  .dialogContent_bottom {
+    width: 105%;
+    margin-bottom: 2vh;
+    // height: 16.52vh;
+  }
+  
+  .deviceInfo {
+    width: 33.333%;
+    padding: 10px 0;
+    display: flex;
+    // flex-wrap: wrap;
+    align-items: center;
+  
+    &.title {
+      width: 100%;
+    }
+  }
+  
+  .show_bottom_tab_box {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  
+  .deviceInfo_l {
+    color: #3de8ff;
+    font-size: 14px;
+    width: 60px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  
+  .deviceInfo_r {
+    width: 0;
+    flex: 1;
+    color: #fff;
+    font-size: 14px;
+    margin-left: 0.5vw;
+  }
+  
+  .sideSwitch {
+    position: absolute;
+    right: 0%;
+    top: 0%;
+    width: 24px;
+    line-height: 1.2;
+    padding: 0.5vh 0;
+    background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
+    border-radius: 0px 0px 0px 0px;
+    opacity: 1;
+    text-align: center;
+    cursor: pointer;
+  
+    .img {
+      width: 15px;
+      height: 10px;
+      border: none;
+      transition: transform 0.3s ease;
+      /* 过渡效果 */
+    }
+  
+    .txt {
+      color: #fff;
+      font-size: 13px;
+    }
+  }
+  
+  .dialogContent_box_empty {
+    font-size: 14px;
+    text-align: center;
+    color: #fff;
+  }
+  
+  .dialog_info_right_tit {
+    color: #fff;
+    font-size: 14px;
+    margin-bottom: 0.5vh;
+  }
+  
+  .dialog_info_right_show {
+    width: 100%;
+    // height: 28vh;
+  }
+  
+  .dialogContent_bottom_btn {
+    height: 28px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    text-align: center;
+  }
+  
+  .info_right_camera {
+    width: 100%;
+    height: calc(100% - 4vh);
+    padding: 1vh 0.5vw;
+  }
+  
+  .info_right_camera_top {
+    width: 100%;
+    height: 20vh;
+  }
+  
+  .info_right_camera_bom {
+    width: 100%;
+    padding: 1vh 0;
+    height: calc(100% - 20vh);
+    display: flex;
+  }
+  
+  .camera_bom_left {
+    width: 50%;
+    height: 100%;
+    padding: 2vh 0;
+    border-right: 1px dashed #285a71;
+  }
+  
+  .camera_bom_right {
+    width: 50%;
+    height: 100%;
+  }
+  
+  .camera_bom_left_item {
+    width: 100%;
+    color: #fff;
+    display: flex;
+    font-size: 14px;
+    padding-bottom: 1.5vh;
+  }
+  
+  .camera_bom_left_item_txt {
+    width: 31%;
+    color: #3de8ff;
+  }
+  
+  .camera_bom_left_item_val {
+    color: #fff;
+    font-size: 13px;
+  }
+  
+  .camera_bom_right_t {
+    width: 100%;
+    height: 60%;
+    position: relative;
+  }
+  
+  .camera_bom_right_b {
+    width: 100%;
+    height: 40%;
+    // background-color: deeppink;
+  }
+  
+  .camera_bom_right_t_box {
+    width: 2vw;
+    height: 4vh;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #005f87;
+    border-radius: 50%;
+    border: 1px solid #2191b1;
+  }
+  
+  .camera_bom_right_t_h_po {
+    width: 1vw;
+    height: 5vh;
+    position: absolute;
+    left: 27%;
+    top: 33%;
+    cursor: pointer;
+    background-image: url("~@/assets/screen/xtb/xjleft.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  
+  .camera_bom_right_b_btn {
+    width: 100%;
+    padding: 0vh 2vw 1vh 2vw;
+    display: flex;
+    justify-content: space-between;
+  }
+  
+  .camera_bom_right_b_btn_l {
+    width: 1.2vw;
+    height: 2.4vh;
+    border-radius: 50%;
+    background-image: url("~@/assets/screen/xtb/jhbtn.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    cursor: pointer;
+  }
+  
+  .camera_bom_right_b_btn_c {
+    color: #fff;
+  }
+  
+  .camera_bom_right_b_btn_r {
+    width: 1.2vw;
+    height: 2.4vh;
+    border-radius: 50%;
+    background-image: url("~@/assets/screen/xtb/addbtn.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    cursor: pointer;
+  }
+  
+  //   background-color: #104b65;
+  //   background-image: url('~@/assets/screen/xtb/qbbtit.png');
+  //   background-size: 100% 100%;
+  //   background-repeat: no-repeat;
+  //   background-position: center;
+  
+  /* 通用滚动条样式 */
+  ::-webkit-scrollbar {
+    width: 3px;
+    /* 设置滚动条宽度 */
+    height: 3px;
+    /* 设置滚动条高度 */
+  }
+  
+  ::-webkit-scrollbar-track {
+    background-color: #114c66;
+    /* 设置滚动条轨道颜色 */
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background-color: #9abce0;
+    /* 设置滚动条滑块颜色 */
+    border-radius: 4px;
+    /* 设置滚动条滑块圆角 */
+  }
+  
+  ::v-deep .el-tabs__nav-wrap::after {
+    background-color: #316076;
+  }
+  
+  ::v-deep .el-tabs__item.is-active {
+    color: #3de8ff !important;
+  }
+  
+  ::v-deep .el-tabs__item {
+    color: #fff !important;
+  }
+  
+  ::v-deep .el-tabs__active-bar {
+    background-color: #3de8ff !important;
+  }
+  
+  ::v-deep .el-collapse-item__header {
+    color: #fff;
+    height: 28px;
+    background-color: #053b4f;
+    border: none;
+    padding-left: 0.5vw;
+  }
+  
+  ::v-deep .el-collapse {
+    color: #fff;
+    border: none;
+  }
+  
+  ::v-deep .el-collapse-item__wrap {
+    color: #fff;
+    will-change: height;
+    background-color: #053b4f;
+    overflow: hidden;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin-top: 0.5vh;
+    border: none;
+  }
+  
+  ::v-deep .el-collapse-item__content {
+    margin-bottom: 0;
+    padding: 0.5vh 0.5vw;
+  }
+  
+  ::v-deep .el-collapse-item {
+    margin-bottom: 1vh;
+  }
+  
+  ::v-deep .el-input--mini .el-input__icon {
+    line-height: 20px;
+    color: #fff;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/IntegratedCabinet.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/IntegratedCabinet.vue
new file mode 100644
index 00000000..ce9f3f3f
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/IntegratedCabinet.vue
@@ -0,0 +1,250 @@
+<template>
+    <Dialog v-model="visibleModel"
+     title="一体机柜" width="550px" >
+      <Video class="video-stream" :camId="camId" img="一体机柜" />
+  
+      <div class="IntegratedCabinet">
+        <ElTabs v-model="activeName" class="tabs">
+          <ElTabPane label="基本信息" name="first">
+            <!-- {{ dialogData }} -->
+            <Descriptions :list="list" :data="data" style="gap: 18px" />
+          </ElTabPane>
+          <ElTabPane label="设备参数" name="second">
+            <DeviceParams disabled :dialogData="dialogData"  style="height: 180px" />
+          </ElTabPane>
+          <ElTabPane label="空调参数" name="second2">
+            <DevicePacks disabled :dialogData="dialogData"  style="height: 180px" />
+          </ElTabPane>
+          <ElTabPane label="在线率统计" name="third">
+            <LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 180px" />
+          </ElTabPane>
+        </ElTabs>
+      </div>
+      <template #footer>
+        <Button v-hasPermi="['business:home:airConditioning']" v-if="activeName === 'second' && data.deviceState == '1'" @click.native="deviceControlVisible = true">
+          设备操作
+        </Button>
+        <Button v-hasPermi="['business:home:airConditioning']" v-else-if="activeName === 'second2' && airStatus == '1'" @click.native="airConditioningVisible = true">
+          设备操作
+        </Button>
+        <Button v-else-if="activeName != 'first'" style="background-color: #bbb">
+          设备离线
+        </Button>
+      </template>
+  
+      <DeviceControlDialog v-model="deviceControlVisible" :dialogData="dialogData" />
+      <AirConditioning v-model="airConditioningVisible" :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 "../LineChart/index.vue";
+  import DeviceParams from "../Dialogs/IntegratedCabinet/components/DeviceParams.vue";
+  import DeviceControlDialog from "../Dialogs/IntegratedCabinet/components/DeviceControlDialog.vue";
+  import AirConditioning from "../Dialogs/IntegratedCabinet/components/AirConditioning.vue";
+  import request from "@/utils/request";
+  import DevicePacks from "../Dialogs/IntegratedCabinet/components/DevicePacks.vue";
+  import { getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+  import { dialogDelayVisible } from "../Dialogs/mixin.js";
+
+  
+  // 一体机柜
+  export default {
+    name: "IntegratedCabinet",
+    mixins: [dialogDelayVisible],
+    components: {
+      Dialog,
+      Descriptions,
+      LineChart,
+      Video,
+      Button,
+      DeviceParams,
+      DevicePacks,
+      DeviceControlDialog,
+      AirConditioning,
+    },
+    props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+    computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+    data() {
+      return {
+        airStatus:"",
+        activeName: "first",
+        releaseVisible: false,
+        deviceControlVisible: false,
+        airConditioningVisible:false,
+        data: {
+          deviceName: "LH24",
+          roadName: "济菏高速",
+          stakeMark: "k094+079",
+          direction: "1",
+          organizationName: "山东高速济南发展公司",
+          brand: "XXX厂家",
+          deviceState: "0",
+        },
+        list: [
+          {
+            label: "设备名称",
+            key: "deviceName",
+          },
+          {
+            label: "设备桩号",
+            key: "stakeMark",
+          },
+          {
+            label: "道路名称",
+            key: "roadName",
+          },
+          {
+            label: "设备方向",
+            key: "direction",
+            enum: "CameraDirectionEnum",
+          },
+          {
+            label: "设备状态",
+            key: "deviceState",
+            enum: "DeviceTypeEnum",
+          },
+          // {
+          //   label: "设备状态",
+          //   key: "deviceStateLiteral",
+          // },
+          {
+            label: "设备厂商",
+            key: "manufacturer",
+          },
+        ],
+        camId:null
+      };
+    },
+    async created() {
+      // 修改camid
+      if(typeof this.dialogData.otherConfig === 'string'){
+        const oConfig = JSON.parse(this.dialogData.otherConfig)
+        if(oConfig && oConfig.camId){
+          this.camId = oConfig.camId
+        }
+      }
+      this.data = { ...this.dialogData, roadName: '济菏高速', };
+  
+      //厂商
+      if(this.dialogData.productId!=null){
+        getProduct(this.dialogData.productId).then((data) => {
+        this.data.brand = data.brand;
+      });
+      }
+      if(this.dialogData!=null&&this.dialogData.iotDeviceId!=null){
+        this.getSattue();
+      }
+      // const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
+      // if (roadInfo) this.data.roadName = roadInfo.roadName;
+    },
+    methods: {
+     getData() {
+     
+    },
+      async getDeviceInfo() {
+        return request({
+          url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || "10.0.36.143-1883" }/3`,
+          method: "get",
+          params: {},
+        });
+      },
+    async getSattue(){
+      const iotDeviceId = this.dialogData.iotDeviceId.replace(/-502$/, '-5000');
+      return request({
+          url: `/business/device/getDeviceById`,
+          method: "post",
+          data: { iotDeviceId:iotDeviceId },
+        }).then((res) => {
+          if(res.code!=200){
+            console.log('err', res.msg)
+          }
+          console.log(res.data.deviceState)
+          this.airStatus=res.data.deviceState;
+      }).catch((err) => {
+        console.log('err', err)
+      });
+    }
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  div.switcher {
+    font-size: 12px;
+    padding: 2px;
+  }
+  </style>
+  <style lang="scss" scoped>
+  .IntegratedCabinet {
+    width: 508px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    height: 250px;
+    ::v-deep {
+      .el-tabs__content {
+        overflow-y: auto;
+        max-height: 220px;
+      }
+    }
+  
+    .camera-video {
+      flex: 1.5;
+    }
+  
+    .tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+  
+      ::v-deep {
+        .el-tabs__content {
+          flex: 1;
+  
+          .el-tab-pane {
+            height: 100%;
+          }
+        }
+      }
+    }
+  
+    .bottom {
+      margin-top: 12px;
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      justify-content: end;
+  
+      >div {
+        font-size: 16px;
+        padding: 6px 12px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/Intermodulation.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/Intermodulation.vue
new file mode 100644
index 00000000..cfeb0da0
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/Intermodulation.vue
@@ -0,0 +1,276 @@
+<template>
+    <Dialog v-model="visibleModel" 
+    title="一类交调站弹窗" width="600px"  style="z-index:3000">
+      <Video class="video-stream" :camId="camId" img="一类交通量" />
+  
+      <div class="Intermodulation">
+        <ElTabs v-model="activeName" class="tabs">
+          <ElTabPane label="基本信息" name="first">
+            <Descriptions :list="list" :data="data" style="gap: 18px" />
+          </ElTabPane>
+          <ElTabPane label="设备参数" name="second">
+            <div class="content-second" style="height: 185px">
+              <RadioGroup
+                v-model="roadType"
+                :options="roadTypeList"
+                @input="changeRadio"
+              />
+              <span>当前车流量: {{ carNum }}辆</span>
+              <LineChartForTraffic
+                style="flex: 1"
+                v-if="isShowCar && activeName === 'second'"
+                :xData="xData"
+                :yData="yData"
+              />
+            </div>
+          </ElTabPane>
+          <ElTabPane label="在线率统计" name="third">
+            <LineChart v-if="activeName === 'third'" :productId="dialogData.id" />
+          </ElTabPane>
+        </ElTabs>
+      </div>
+    </Dialog>
+  </template>
+  
+  <script>
+  import Dialog from "@screen/components/Dialog/index.vue";
+  import Button from "@screen/components/Buttons/Button.vue";
+  import Descriptions from "@screen/components/Descriptions.vue";
+  import Video from "@screen/components/Video";
+  import LineChart from "../LineChart/index.vue";
+  import LineChartForTraffic from "../Dialogs/Intermodulation/components/LineChartForTraffic/index.vue";
+  import Switcher from "@screen/pages/service/PublishingChannelManagement/components/Switcher.vue";
+  
+
+  import { dialogDelayVisible } from "../Dialogs/mixin.js";
+  import request from "@/utils/request";
+  import { Message } from "element-ui";
+  import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue";
+  import moment from "moment/moment";
+  
+  // 广播发布
+  export default {
+    name: "Intermodulation",
+    mixins: [dialogDelayVisible],
+    components: {
+      Dialog,
+      Button,
+      Descriptions,
+      LineChart,
+      LineChartForTraffic,
+      Video,
+      Switcher,
+      RadioGroup,
+    },
+    props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+    data() {
+      return {
+        activeName: "first",
+        releaseVisible: false,
+        secondLoading: true,
+        data: {
+          deviceName: "LH24",
+          roadName: "济菏高速",
+          stakeMark: "k094+079",
+          direction: "1",
+          organizationName: "山东高速济南发展公司",
+          brand: "XXX厂家",
+          deviceState: "0",
+        },
+        carNum: 0,
+        objectValue: {
+          1: 0,
+          3: 0,
+        },
+        xData: [],
+        yData: [],
+        hzYData: [],
+        jnYData: [],
+        isShowCar: true,
+        roadTypeList: [
+          { key: "1", label: "菏泽方向" },
+          { key: "3", label: "济南方向" },
+        ],
+        roadType: "1",
+        list: [
+          {
+            label: "设备名称",
+            key: "deviceName",
+          },
+          {
+            label: "设备桩号",
+            key: "stakeMark",
+          },
+          {
+            label: "道路名称",
+            key: "roadName",
+          },
+          {
+            label: "设备方向",
+            key: "direction",
+            enum: "CameraDirectionEnum",
+          },
+          {
+            label: "设备状态",
+            key: "deviceState",
+            enum: "DeviceTypeEnum",
+          },
+          // {
+          //   label: '设备厂商',
+          //   key: "brand",
+          // },
+        ],
+        activeOption: {
+          active: {
+            text: "开",
+          },
+          unActive: {
+            text: "关",
+          },
+        },
+        devicesList: [],
+        camId:null
+      };
+    },
+    async created() {
+      // if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883';
+  
+        // 修改camid
+      if(typeof this.dialogData.otherConfig === 'string'){
+        const oConfig = JSON.parse(this.dialogData.otherConfig)
+        if(oConfig && oConfig.camId){
+          this.camId = oConfig.camId
+        }
+      }
+  
+      this.data = { ...this.dialogData, roadName: '济菏高速' };
+  
+  
+      if (this.dialogData.iotDeviceId!=null) {
+        this.getPropertiesHistory(this.dialogData.iotDeviceId);
+      }
+  
+      // const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
+  
+      // if (roadInfo) this.data.roadName = roadInfo.roadName;
+    },
+    methods: {
+     getData() {
+    },
+      changeRadio(value) {
+        this.carNum = this.objectValue[value + ""];
+        this.isShowCar = false;
+        if (value == 3) {
+          this.yData = this.jnYData;
+        } else {
+          this.yData = this.hzYData;
+        }
+        setTimeout(() => {
+          this.isShowCar = true;
+        }, 0);
+      },
+      getPropertiesHistory(deviceId) {
+        this.xData = [];
+        this.yData = [];
+        this.hzYData = [];
+        this.jnYData = [];
+  
+        this.isShowCar = false;
+        request({
+          url: `/business/device/properties/history/day/${deviceId}/01`,
+          method: "get",
+        }).then((result) => {
+          if (result.code != 200) return Message.error(result?.msg);
+          this.objectValue = result.data[result.data.length - 1];
+          this.carNum = result.data[result.data.length - 1]["1"];
+          result.data.forEach((it) => {
+            this.xData.push(moment(it.timestamp).format("HH:mm"));
+            this.hzYData.push(it["1"]);
+            this.jnYData.push(it["3"]);
+            this.yData = this.hzYData;
+          });
+          this.isShowCar = true;
+        });
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  div.switcher {
+    font-size: 12px;
+    padding: 2px;
+  }
+  </style>
+  <style lang="scss" scoped>
+  .Intermodulation {
+    width: 510px;
+    height: 240px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+  
+    .camera-video {
+      flex: 1.5;
+    }
+  
+    .tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+  
+      ::v-deep {
+        .el-tabs__content {
+          flex: 1;
+  
+          .el-tab-pane {
+            height: 100%;
+          }
+        }
+      }
+    }
+  
+    .content-second {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+      gap: 9px;
+    }
+  
+    .bottom {
+      margin-top: 12px;
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      justify-content: end;
+  
+      > div {
+        font-size: 16px;
+        padding: 6px 12px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/MeteorologicalDetection.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/MeteorologicalDetection.vue
new file mode 100644
index 00000000..a1e978c8
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/MeteorologicalDetection.vue
@@ -0,0 +1,256 @@
+<template>
+    <Dialog v-model="visibleModel" 
+    title="气象设备" width="470px" style="z-index:3000">
+      <div class="MeteorologicalDetection">
+        <Video class="video-stream" :camId="camId" img="气象监测器" />
+        <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
+          <ElTabPane label="基本信息" name="first"  style="height: 150px">
+            <Descriptions labelWidth="72px" :list="list" :data="data" style="gap: 18px;" />
+          </ElTabPane>
+          <ElTabPane label="气象情况" name="second" style="height: 150px;overflow-y: auto;">
+            <Descriptions labelWidth="104px" :list="weatherList" :data="weatherData" style="gap: 14px" />
+          </ElTabPane>
+          <ElTabPane label="在线率统计" name="third" style="height: 150px">
+            <LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 150px" />
+          </ElTabPane>
+        </ElTabs>
+      </div>
+  
+      <template #footer>
+        <Button @click.native="deviceControlVisible = true; btnType = 1">气温变化趋势</Button>
+        <Button @click.native="deviceControlVisible = true; btnType = 2">能见度变化趋势</Button>
+      </template>
+  
+      <!-- 设备操作弹窗 -->
+      <DeviceControlDialog v-model="deviceControlVisible" :deviceName="dialogData.deviceName" :btnType="btnType" />
+  
+    </Dialog>
+  </template>
+  
+  <script>
+  import Dialog from "@screen/components/Dialog/index.vue";
+  import Descriptions from "@screen/components/Descriptions.vue";
+  import Button from "@screen/components/Buttons/Button.vue";
+  import LineChart from "../LineChart/index.vue";
+  import {
+    getRoadInfoByStakeMark,
+    getProduct,
+    getMeteorologicalDetector
+  } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+  import Video from "@screen/components/Video";
+  import DeviceControlDialog from "../Dialogs/MeteorologicalDetection/components/DeviceControlDialog.vue";
+  
+  import request from "@/utils/request";
+  import { dialogDelayVisible } from "../Dialogs/mixin.js";
+  // 疲劳唤醒弹窗
+  export default {
+    name: "MeteorologicalDetection",
+    mixins: [dialogDelayVisible],
+    components: {
+      Dialog,
+      Descriptions,
+      Video,
+      DeviceControlDialog,
+      Button,
+      LineChart,
+    },
+    props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+    data() {
+      return {
+        activeName: "first",
+        deviceControlVisible: false,
+        data: {
+          deviceType: "行车诱导",
+          deviceStation: "k094+079",
+          roadName: "济菏高速",
+          direction: "1",
+          deviceState: "0",
+          deviceVendors: "XXX厂家",
+        },
+        btnType: 1,
+        weatherData: {},
+        list: [
+          {
+            label: "设备名称",
+            key: "deviceName",
+          },
+          {
+            label: "设备桩号",
+            key: "stakeMark",
+          },
+          {
+            label: "道路名称",
+            key: "roadName",
+          },
+          {
+            label: "设备方向",
+            key: "direction",
+            enum: "CameraDirectionEnum",
+          },
+          {
+            label: "设备状态",
+            key: "deviceState",
+            enum: "DeviceTypeEnum",
+          },
+          {
+            label: "设备厂商",
+            key: "manufacturer",
+          },
+        ],
+        weatherList: [
+          {
+            label: "路面状态",
+            key: "remoteRoadSurfaceStatus",
+            enum: "remoteRoadSurfaceStatus",
+          },
+          {
+            label: "路表温度(℃)",
+            key: "remoteRoadSurfaceTemperature",
+          },
+          {
+            label: "下雨类型",
+            key: "precipitationType",
+            enum: "precipitationType",
+          },
+          {
+            label: "雨量( mm )",
+            key: "rainfall",
+          },
+          {
+            label: "能见度类型",
+            key: "visibilityType",
+            enum: "visibilityType",
+          },
+          {
+            label: "能见度( km )",
+            key: "visibility",
+          },
+          {
+            label: "温度( ℃ )",
+            key: "temperature",
+          },
+          {
+            label: "湿度( % )",
+            key: "humidity",
+          },
+          {
+            label: "风向( ° )",
+            key: "windDirection",
+          },
+          {
+            label: "风速( m/s )",
+            key: "windSpeed",
+          },
+          {
+            label: "水膜厚度( mm )",
+            key: "waterFilmIceSnowValue",
+          },
+          {
+            label: "大气压力( hPa )",
+            key: "atmosphericPressure",
+          },
+          {
+            label: "时间",
+            key: "createTime",
+            gridColumn: 2,
+          },
+        ],
+        camId:null
+      };
+    },
+    async created() {
+      if(typeof this.data.otherConfig === 'string'){
+        const oConfig = JSON.parse(this.data.otherConfig)
+        if(oConfig && oConfig.camId){
+          this.camId = oConfig.camId
+        }
+      }
+  
+      this.data = { ...this.dialogData, roadName:'济菏高速' };
+      if(this.dialogData.productId!=null){
+        getProduct(this.dialogData.productId).then((data) => {
+        this.dialogData.brand = data.brand;
+      });
+      }
+      // const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
+      // if (roadInfo) this.$set(this.data, "roadName", roadInfo.roadName);
+      if (this.dialogData.deviceName != null&&this.dialogData.deviceName !='') {
+      const weatherInfo = await getMeteorologicalDetector(this.dialogData.deviceName);
+       if (weatherInfo && weatherInfo.visibility) {
+        weatherInfo.visibility = parseInt(weatherInfo.visibility, 10); // 最好明确指定基数，以避免潜在的解析错误
+       }
+       this.weatherData = { ...weatherInfo };
+       }
+    },
+    methods: {
+      getData() {},
+      handleClickTabs() { },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .MeteorologicalDetection {
+    width: 420px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    // padding-bottom: 24px;
+  
+    .camera-video {
+      flex: 1.5;
+    }
+  
+    .tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+  
+      ::v-deep {
+        .el-tabs__content {
+          flex: 1;
+  
+          .el-tab-pane {
+            height: 100%;
+          }
+        }
+      }
+    }
+  
+    .bottom {
+      margin-top: 12px;
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      justify-content: end;
+  
+      >div {
+        font-size: 16px;
+        padding: 6px 12px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/MillimeterWaveRadar.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/MillimeterWaveRadar.vue
new file mode 100644
index 00000000..6cd290fb
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/MillimeterWaveRadar.vue
@@ -0,0 +1,251 @@
+<template>
+    <Dialog v-model="visibleModel"
+     title="毫米波雷达" width="470px" style="z-index:3000">
+      <div class="MillimeterWaveRadar">
+        <Video class="video-stream" :camId="camId" img="毫米波雷达" />
+        <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
+          <ElTabPane label="基本信息" name="first">
+            <Descriptions labelWidth="72px" :list="list" :data="data" style="gap: 18px" />
+          </ElTabPane>
+        </ElTabs>
+      </div>
+  
+      <template #footer>
+        <Button @click.native="deviceControlVisible = true;" style="margin-top: 20px;">感知事件</Button>
+      </template>
+  
+      <!-- 设备操作弹窗 -->
+      <DeviceControlDialog v-model="deviceControlVisible" :deviceId="dialogData.iotDeviceId" :btnType="btnType" />
+  
+    </Dialog>
+  </template>
+  
+  <script>
+  import Dialog from "@screen/components/Dialog/index.vue";
+  import Descriptions from "@screen/components/Descriptions.vue";
+  import Button from "@screen/components/Buttons/Button.vue";
+  import {
+    getRoadInfoByStakeMark,
+    getProduct,
+    getMeteorologicalDetector
+  } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+  import Video from "@screen/components/Video";
+  import DeviceControlDialog from "../Dialogs/MillimeterWaveRadar/components/DeviceControlDialog.vue";
+
+  import { dialogDelayVisible } from "../Dialogs/mixin.js";
+  import LineChart from "../LineChart/index.vue";
+  
+  // 毫米波雷达
+  export default {
+    name: "MillimeterWaveRadar",
+    mixins: [dialogDelayVisible],
+    components: {
+      Dialog,
+      Descriptions,
+      Video,
+      DeviceControlDialog,
+      Button,
+      LineChart,
+    },
+    props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+    data() {
+      return {
+        activeName: "first",
+        deviceControlVisible: false,
+        data: {
+          deviceType: "行车诱导",
+          deviceStation: "k094+079",
+          roadName: "",
+          direction: "1",
+          deviceState: "0",
+          deviceVendors: "XXX厂家",
+        },
+        btnType: 1,
+        weatherData: {},
+        list: [
+          {
+            label: "设备名称",
+            key: "deviceName",
+          },
+          {
+            label: "设备桩号",
+            key: "stakeMark",
+          },
+          {
+            label: "道路名称",
+            key: "roadName",
+          },
+          {
+            label: "设备方向",
+            key: "direction",
+            enum: "CameraDirectionEnum",
+          },
+          {
+            label: "设备状态",
+            key: "deviceState",
+            enum: "DeviceTypeEnum",
+          },
+          {
+            label: "设备厂商",
+            key: "manufacturer",
+          },
+        ],
+        weatherList: [
+          {
+            label: "路面状态",
+            key: "remoteRoadSurfaceStatus",
+            enum: "remoteRoadSurfaceStatus",
+          },
+          {
+            label: "路表温度(℃)",
+            key: "remoteRoadSurfaceTemperature",
+          },
+          {
+            label: "下雨类型",
+            key: "precipitationType",
+            enum: "precipitationType",
+          },
+          {
+            label: "雨量(mm)",
+            key: "rainfall",
+          },
+          {
+            label: "能见度类型",
+            key: "visibilityType",
+            enum: "visibilityType",
+          },
+          {
+            label: "能见度(km)",
+            key: "visibility",
+          },
+          {
+            label: "温度(℃)",
+            key: "temperature",
+          },
+          {
+            label: "湿度",
+            key: "humidity",
+          },
+          {
+            label: "风向",
+            key: "windDirection",
+          },
+          {
+            label: "风速(m/s)",
+            key: "windSpeed",
+          },
+          {
+            label: "水膜厚度(mm)",
+            key: "waterFilmIceSnowValue",
+          },
+          {
+            label: "大气压力(hPa)",
+            key: "atmosphericPressure",
+          },
+          {
+            label: "时间",
+            key: "createTime",
+            gridColumn: 2,
+          },
+        ],
+        camId:null
+      };
+    },
+    async created() {
+  
+  
+        // 修改camid
+        if(typeof this.dialogData.otherConfig === 'string'){
+        const oConfig = JSON.parse(this.dialogData.otherConfig)
+        if(oConfig && oConfig.camId){
+          this.camId = oConfig.camId
+        }
+      }
+  
+      this.data = { ...this.dialogData , roadName: '济菏高速' };
+      if(this.dialogData.productId!=null){
+        getProduct(this.dialogData.productId).then((data) => {
+        this.dialogData.brand = data.brand;
+      });
+  
+      }  
+      // const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
+      // if (roadInfo) this.$set(this.data, "roadName", roadInfo.roadName);
+      if (this.dialogData.deviceName != null&&this.dialogData.deviceName !='') {
+        const weatherInfo = await getMeteorologicalDetector(this.dialogData.deviceName)
+        this.weatherData = { ...weatherInfo }
+      }
+    },
+    methods: {
+    getData() {
+    },
+      handleClickTabs() { },
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .MillimeterWaveRadar {
+    width: 420px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    // padding-bottom: 24px;
+  
+    .camera-video {
+      flex: 1.5;
+    }
+  
+    .tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+  
+      ::v-deep {
+        .el-tabs__content {
+          flex: 1;
+  
+          .el-tab-pane {
+            height: 100%;
+          }
+        }
+      }
+    }
+  
+    .bottom {
+      margin-top: 12px;
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      justify-content: end;
+  
+      >div {
+        font-size: 16px;
+        padding: 6px 12px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/RemoteMachine.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/RemoteMachine.vue
new file mode 100644
index 00000000..3b12b1b2
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/RemoteMachine.vue
@@ -0,0 +1,223 @@
+<template>
+    <Dialog v-model="visibleModel" title="远端机" width="470px" >
+        <Video class="video-stream" :camId="camId" img="远端机" />
+
+        <div class="RemoteMachine">
+            <ElTabs v-model="activeName" class="tabs">
+                <ElTabPane label="基本信息" name="first">
+                    <!-- {{ dialogData }} -->
+                    <Descriptions :list="list" :data="data" style="gap: 18px" />
+                </ElTabPane>
+                <ElTabPane label="设备参数" name="second">
+                    <DeviceParams disabled :dialogData="dialogData" />
+                </ElTabPane>
+                <ElTabPane label="在线率统计" name="third">
+                    <LineChart v-if="activeName === 'third'" :productId="dialogData.id" style="height: 180px" />
+                </ElTabPane>
+            </ElTabs>
+        </div>
+        <template #footer>
+            <Button v-if="check(['business:home:equipmentBox']) &&  activeName != 'first' && data.deviceState == '1'" @click.native="deviceControlVisible = true">
+                设备操作
+            </Button>
+            <Button v-else-if="check(['business:home:equipmentBox']) && activeName != 'first'" style="background-color: #bbb">
+                设备离线
+            </Button>
+        </template>
+
+        <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 "../LineChart/index.vue";
+import DeviceParams from "../Dialogs/RemoteMachine/components/DeviceParams.vue";
+import DeviceControlDialog from "../Dialogs/RemoteMachine/components/DeviceControlDialog.vue";
+
+import { checkPermi } from "@/utils/permission.js";
+import request from "@/utils/request";
+
+import {
+    getRoadInfoByStakeMark,
+    getProduct,
+} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+import { dialogDelayVisible } from "../Dialogs/mixin.js";
+
+// 广播发布
+export default {
+    name: "RemoteMachine",
+    mixins: [dialogDelayVisible],
+    components: {
+        Dialog,
+        Descriptions,
+        LineChart,
+        Video,
+        Button,
+        DeviceParams,
+        DeviceControlDialog,
+    },
+    props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+    data() {
+        return {
+            activeName: "first",
+            releaseVisible: false,
+            deviceControlVisible: false,
+            data: {
+                deviceName: "LH24",
+                roadName: "济菏高速",
+                stakeMark: "k094+079",
+                direction: "1",
+                organizationName: "山东高速济南发展公司",
+                brand: "XXX厂家",
+                deviceState: "0",
+            },
+            list: [
+                {
+                    label: "设备名称",
+                    key: "deviceName",
+                },
+                {
+                    label: "设备桩号",
+                    key: "stakeMark",
+                },
+                {
+                    label: "道路名称",
+                    key: "roadName",
+                },
+                {
+                    label: "设备方向",
+                    key: "direction",
+                    enum: "CameraDirectionEnum",
+                },
+                {
+                    label: "设备状态",
+                    key: "deviceState",
+                    enum: "DeviceTypeEnum",
+                },
+                
+                {
+                    label: "设备厂商",
+                    key: "manufacturer",
+                },
+            ],
+            camId:null
+        };
+    },
+    async created() {
+       // 修改camid
+        if(typeof this.data.otherConfig === 'string'){
+        const oConfig = JSON.parse(this.data.otherConfig)
+        if(oConfig && oConfig.camId){
+            this.camId = oConfig.camId
+        }
+        }
+
+        this.data = { ...this.dialogData };
+        let deviceInfo;
+        if(this.dialogData.iotDeviceId!=null){
+         deviceInfo = await this.getDeviceInfo();
+        }
+        this.data = { ...this.dialogData, roadName: '济菏高速' };
+        if(this.dialogData.productId!=null){
+            getProduct(this.dialogData.productId).then((data) => {
+            this.dialogData.brand = data.brand;
+        });
+        }
+           let roadInfo;
+        if(this.dialogData.stakeMark!=null&&this.dialogData.stakeMark!=''){
+           roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
+        }
+        if (roadInfo) this.data.roadName = roadInfo.roadName;
+    },
+    methods: {
+        getData() {
+     
+    },
+        check(arr){
+            return checkPermi(arr);
+        },
+        async getDeviceInfo() {
+            return request({
+                url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || "10.0.36.143-1883"
+                    }/3`,
+                method: "get",
+                params: {},
+            });
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+div.switcher {
+    font-size: 12px;
+    padding: 2px;
+}
+</style>
+<style lang="scss" scoped>
+.RemoteMachine {
+    width: 420px;
+    // height: 240px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+
+    .camera-video {
+        flex: 1.5;
+    }
+
+    .tabs {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        ::v-deep {
+            .el-tabs__content {
+                flex: 1;
+
+                .el-tab-pane {
+                    height: 100%;
+                }
+            }
+        }
+    }
+
+    .bottom {
+        margin-top: 12px;
+        display: flex;
+        gap: 9px;
+        align-items: center;
+        justify-content: end;
+
+        >div {
+            font-size: 16px;
+            padding: 6px 12px;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/SmartDevice.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/SmartDevice.vue
new file mode 100644
index 00000000..1e12879f
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/SmartDevice.vue
@@ -0,0 +1,256 @@
+<template>
+    <Dialog v-model="visibleModel"
+     title="智能设备箱" width="470px" >
+      <Video class="video-stream" :camId="camId" img="设备箱" />
+  
+      <div class="SmartDevice">
+        <ElTabs v-model="activeName" class="tabs">
+          <ElTabPane label="基本信息" name="first">
+            <!-- {{ dialogData }} -->
+            <Descriptions :list="list" :data="data" style="gap: 18px" />
+          </ElTabPane>
+          <ElTabPane label="设备参数" name="second">
+            <DeviceParams disabled :dialogData="dialogData" />
+          </ElTabPane>
+          <ElTabPane label="在线率统计" name="third">
+            <LineChart
+              v-if="activeName === 'third'"
+              :productId="dialogData.id"
+              style="height: 180px"
+            />
+          </ElTabPane>
+        </ElTabs>
+      </div>
+      <template #footer>
+        <Button
+          v-if="
+            check(['business:home:equipmentBox']) &&
+            activeName != 'first' &&
+            data.deviceState == '1'
+          "
+          @click.native="deviceControlVisible = true"
+        >
+          设备操作
+        </Button>
+        <Button
+          v-else-if="
+            check(['business:home:equipmentBox']) && activeName != 'first'
+          "
+          style="background-color: #bbb"
+        >
+          设备离线
+        </Button>
+      </template>
+  
+      <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 "../LineChart/index.vue";
+  import DeviceParams from "../Dialogs/SmartDevice/components/DeviceParams.vue";
+  import DeviceControlDialog from "../Dialogs/SmartDevice/components/DeviceControlDialog.vue";
+  
+  import { checkPermi } from "@/utils/permission.js";
+  import request from "@/utils/request";
+  
+  import {
+    getRoadInfoByStakeMark,
+    getProduct,
+  } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+  import { dialogDelayVisible } from "../Dialogs/mixin.js";
+  import { resolve } from "@antv/x6/lib/registry/node-anchor/util";
+  
+  // 广播发布
+  export default {
+    name: "SmartDevice",
+    mixins: [dialogDelayVisible],
+    components: {
+      Dialog,
+      Descriptions,
+      LineChart,
+      Video,
+      Button,
+      DeviceParams,
+      DeviceControlDialog,
+    },
+    props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+    data() {
+      return {
+        activeName: "first",
+        releaseVisible: false,
+        deviceControlVisible: false,
+        data: {
+          deviceName: "LH24",
+          roadName: "济菏高速",
+          stakeMark: "k094+079",
+          direction: "1",
+          organizationName: "山东高速济南发展公司",
+          brand: "XXX厂家",
+          deviceState: "0",
+        },
+        list: [
+          {
+            label: "设备名称",
+            key: "deviceName",
+          },
+          {
+            label: "设备桩号",
+            key: "stakeMark",
+          },
+          {
+            label: "道路名称",
+            key: "roadName",
+          },
+          {
+            label: "设备方向",
+            key: "direction",
+            enum: "CameraDirectionEnum",
+          },
+          {
+            label: "设备状态",
+            key: "deviceState",
+             enum: "DeviceTypeEnum",
+          },
+          {
+            label: "设备厂商",
+            key: "manufacturer",
+          },
+        ],
+        camId:null
+      };
+    },
+    async created() {
+      // if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883';
+   
+      if(typeof this.data.otherConfig === 'string'){
+        const oConfig = JSON.parse(this.data.otherConfig)
+        if(oConfig && oConfig.camId){
+          this.camId = oConfig.camId
+        }
+      }
+      this.data = { ...this.dialogData, roadName: '济菏高速' };
+  
+      let deviceInfo;
+        if(this.dialogData.iotDeviceId!=null){
+         deviceInfo = await this.getDeviceInfo();
+        }
+
+      this.data = {
+        roadName: '济菏高速' ,
+        //deviceStateLiteral: deviceInfo?.data.formatValue.deviceState,
+        ...this.data,
+         deviceStateName: (this.data.deviceState === '0'?'离线':'在线')
+      };
+  
+      // console.log(
+      //   "%c [ dialogData ]-103-「index.vue」",
+      //   "font-size:15px; background:#36347c; color:#7a78c0;",
+      //   this.dialogData,
+      //   "+++========"
+      // );
+      if(this.dialogData.productId!=null){
+       getProduct(this.dialogData.productId).then((data) => {
+        this.dialogData.brand = data.brand;
+       });
+      }
+   
+  
+      // const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
+  
+      // if (roadInfo) this.data.roadName = roadInfo.roadName;
+    },
+    methods: {
+      getData() { },
+      check(arr){
+          return checkPermi(arr);
+      },
+      async getDeviceInfo() {
+        return request({
+          url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || "10.0.36.143-1883"
+            }/3`,
+          method: "get",
+          params: {},
+        });
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  div.switcher {
+    font-size: 12px;
+    padding: 2px;
+  }
+  </style>
+  <style lang="scss" scoped>
+  .SmartDevice {
+    width: 420px;
+    // height: 240px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+  
+    .camera-video {
+      flex: 1.5;
+    }
+  
+    .tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+  
+      ::v-deep {
+        .el-tabs__content {
+          flex: 1;
+  
+          .el-tab-pane {
+            height: 100%;
+          }
+        }
+      }
+    }
+  
+    .bottom {
+      margin-top: 12px;
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      justify-content: end;
+  
+      > div {
+        font-size: 16px;
+        padding: 6px 12px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/SolarEnergy.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/SolarEnergy.vue
new file mode 100644
index 00000000..792d10e3
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/SolarEnergy.vue
@@ -0,0 +1,229 @@
+<template>
+    <Dialog v-model="visibleModel"
+     title="离网光伏供电" width="550px" style="z-index:3000">
+      <Video class="video-stream" :camId="camId" img="离网光伏供电" />
+  
+      <div class="SolarEnergy">
+        <ElTabs v-model="activeName" class="tabs">
+          <ElTabPane label="基本信息" name="first">
+            <!-- {{ dialogData }} -->
+            <Descriptions :list="list" :data="data" style="gap: 18px" />
+          </ElTabPane>
+          <ElTabPane label="设备参数" name="second">
+            <DeviceParams disabled :dialogData="data"  style="height: 180px" />
+          </ElTabPane>
+          <ElTabPane label="在线率统计" name="third">
+            <LineChart v-if="activeName === 'third'" :productId="data.id" style="height: 180px" />
+          </ElTabPane>
+        </ElTabs>
+      </div>
+      <!-- <template #footer>
+        <Button v-if="activeName != 'first' && data.deviceState == '1'" @click.native="deviceControlVisible = true">
+          设备操作
+        </Button>
+        <Button v-else-if="activeName != 'first'" style="background-color: #bbb">
+          设备离线
+        </Button>
+      </template> -->
+  
+      <DeviceControlDialog 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 "../LineChart/index.vue";
+  import DeviceParams from "../Dialogs/SolarEnergy/components/DeviceParams.vue";
+  import DeviceControlDialog from "../Dialogs/SolarEnergy/components/DeviceControlDialog.vue";
+  
+  import request from "@/utils/request";
+  
+  import {
+    getRoadInfoByStakeMark,
+    getProduct,
+  } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+  import { dialogDelayVisible } from "../Dialogs/mixin.js";
+
+  
+  // 离网光伏供电
+  export default {
+    name: "SolarEnergy",
+    mixins: [dialogDelayVisible],
+    components: {
+      Dialog,
+      Descriptions,
+      LineChart,
+      Video,
+      Button,
+      DeviceParams,
+      DeviceControlDialog,
+    },
+    props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emit: ["close"],
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+  },
+    data() {
+      return {
+        activeName: "first",
+        releaseVisible: false,
+        deviceControlVisible: false,
+        data: {
+          deviceName: "LH24",
+          roadName: "济菏高速",
+          stakeMark: "k094+079",
+          direction: "1",
+          organizationName: "山东高速济南发展公司",
+          brand: "XXX厂家",
+          deviceState: "0",
+        },
+        list: [
+          {
+            label: "设备名称",
+            key: "deviceName",
+          },
+          {
+            label: "设备桩号",
+            key: "stakeMark",
+          },
+          {
+            label: "道路名称",
+            key: "roadName",
+          },
+          {
+            label: "设备方向",
+            key: "direction",
+            enum: "CameraDirectionEnum",
+          },
+          {
+            label: "设备状态",
+            key: "deviceState",
+            enum: "DeviceTypeEnum",
+          },
+          // {
+          //   label: "设备状态",
+          //   key: "deviceStateLiteral",
+          // },
+          {
+            label: "设备厂商",
+            key: "manufacturer",
+          },
+        ],
+        camId:null
+      };
+    },
+    async created() {
+      // if (!this.dialogData.iotDeviceId) this.dialogData.iotDeviceId = '10.0.36.146-1883';
+  
+      // let deviceInfo = await this.getDeviceInfo();
+      // 修改camid
+      if(typeof this.data.otherConfig === 'string'){
+        const oConfig = JSON.parse(this.data.otherConfig)
+        if(oConfig && oConfig.camId){
+          this.camId = oConfig.camId
+        }
+      }
+      this.data = {
+        ...this.dialogData,
+        roadName: '济菏高速',
+        // deviceStateLiteral: deviceInfo.data.formatValue.deviceState,
+      };
+  
+      //厂商
+      if(this.dialogData.productId!=null){
+        getProduct(this.dialogData.productId).then((data) => {
+        this.dialogData.brand = data.brand;
+      });
+      }
+      // const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMark);
+      // if (roadInfo) this.data.roadName = roadInfo.roadName;
+    },
+    methods: {
+    getData(){},
+      async getDeviceInfo() {
+        return request({
+          url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || "10.0.36.143-1883"
+            }/3`,
+          method: "get",
+          params: {},
+        });
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  div.switcher {
+    font-size: 12px;
+    padding: 2px;
+  }
+  </style>
+  <style lang="scss" scoped>
+  .SolarEnergy {
+    width: 508px;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    height: 250px;
+    ::v-deep {
+      .el-tabs__content {
+        overflow-y: auto;
+        max-height: 220px;
+      }
+    }
+  
+    .camera-video {
+      flex: 1.5;
+    }
+  
+    .tabs {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+  
+      ::v-deep {
+        .el-tabs__content {
+          flex: 1;
+  
+          .el-tab-pane {
+            height: 100%;
+          }
+        }
+      }
+    }
+  
+    .bottom {
+      margin-top: 12px;
+      display: flex;
+      gap: 9px;
+      align-items: center;
+      justify-content: end;
+  
+      >div {
+        font-size: 16px;
+        padding: 6px 12px;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/device.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/device.vue
index 26e7b538..cf3d77b2 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/device.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/device.vue
@@ -10,7 +10,12 @@
                 placeholder="请选择设备类型"
               >
                 <el-option
-                  v-for="item in [{label:'激光疲劳唤醒',value:10},{label:'智能设备箱',value:13},{label:'离网光伏供电',value:15},{label:'远端机',value:16},{label:'气象检测器',value:3},{label:'一体机柜',value:17}]"
+                  v-for="item in [{label:'摄像机',value:1},{label:'情报板',value:2},{label:'语音广播',value:5},
+                  {label:'护栏碰撞',value:6},{label:'毫米波雷达',value:7},
+                  {label:'合流区预警',value:8},{label:'激光疲劳唤醒',value:10},{label:'一类交调站',value:11},
+                  {label:'行车诱导',value:12},
+                  {label:'智能设备箱',value:13},{label:'离网光伏供电',value:15},{label:'远端机',value:16},
+                  {label:'气象检测器',value:3},{label:'一体机柜',value:17}]"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value"
@@ -44,20 +49,40 @@
             </div>
           </vuescroll>
         </div>
+        <FatigueWakesUp v-if="isFatigueWakesUpVisible" :visible="isFatigueWakesUpVisible" @close="handledDialogCamera(false)" :data="dialogData"   />
         <div class="footer">
           <Pagination @current-change="bindList" @size-change="onSizeChange" width="'100%'"
             :page-sizes="[10, 20, 30, 40, 50]" :page-size="page.pageSize" :current-page.sync="page.pageNum"
             layout="total, prev, pager, next" :total="total" class="Pagination">
           </Pagination>
         </div>
-        <FatigueWakesUp v-if="isFatigueWakesUpVisible"   :dialogData="dialogData"/>
-        <GuardrailCollision v-if="isGuardrailCollision"   />
-        <IntegratedCabinet v-if="isIntegratedCabinet"  />
+   
+        <GuardrailCollision v-if="isGuardrailCollision" :visible="isGuardrailCollision" @close="handledDialogCamera(false)" :dialogData="dialogData"  :data="dialogData"/>
+        <IntegratedCabinet v-if="isIntegratedCabinet"  :visible="isIntegratedCabinet" @close="handledDialogCamera(false)" :data="dialogData"  :dialogData="dialogData"/>
+        <Intermodulation v-if="isIntermodulation"  :visible="isIntermodulation" @close="handledDialogCamera(false)" :data="dialogData"  :dialogData="dialogData"/>
+        <ConfluenceArea  v-if="isConfluenceArea"  :visible="isConfluenceArea" @close="handledDialogCamera(false)" :data="dialogData"  :dialogData="dialogData"/>
+
+        <Teleport v-if="visible">
+        <InfoBoard :visible="visible" @close="handledDialogCamera(false)" :selectedDevice="dialogData" ></InfoBoard>
+        </Teleport>
+      <!--情报板-->
+
+
+        <Camera v-if="isCamera"  :visible="isCamera" @close="handledDialogCamera(false)" :data="dialogData"  :dialogData="dialogData" />
+        <MillimeterWaveRadar v-if="isMillimeterWaveRadar" :visible="isMillimeterWaveRadar" @close="handledDialogCamera(false)" :data="dialogData"  :dialogData="dialogData"/>
+        <MeteorologicalDetection v-if="isMeteorologicalDetection" :visible="isMeteorologicalDetection" @close="handledDialogCamera(false)" :data="dialogData"  :dialogData="dialogData"/>
+        <SolarEnergy v-if="isSolarEnergy" :visible="isSolarEnergy" @close="handledDialogCamera(false)" :data="dialogData" :dialogData="dialogData" />
+        <DrivingGuidance v-if="isDrivingGuidance" :visible="isDrivingGuidance" @close="handledDialogCamera(false)" :data="dialogData"  :dialogData="dialogData"/>
+        <SmartDevice v-if="isSmartDevice" :visible="isSmartDevice" @close="handledDialogCamera(false)" :data="dialogData" :dialogData="dialogData" />
+        <Broadcast v-if="isBroadcast" :visible="isBroadcast" @close="handledDialogCamera(false)" :data="dialogData" :dialogData="dialogData" />
+        <RemoteMachine v-if="isRemoteMachine" :visible="isRemoteMachine" @close="handledDialogCamera(false)" :data="dialogData"  :dialogData="dialogData"/>
       </div>
+ 
     </div>
   </template>
   
   <script>
+  import Teleport from "@screen/components/Teleport.vue";
   import request from "@/utils/request";
   import vuescroll from "vuescroll";
   import scrollOptions from "@/common/scrollbar.js";
@@ -66,16 +91,41 @@
   import { setLoading } from "@screen/utils/index.js";
   import Pagination from '@screen/components/Pagination.vue';
   import {  mapState } from "vuex";
-  import FatigueWakesUp from "./../Dialogs/FatigueWakesUp/index.vue";
-  import GuardrailCollision from "./../Dialogs/GuardrailCollision/index.vue";
-  import IntegratedCabinet from "./../Dialogs/IntegratedCabinet/index.vue";
+  import FatigueWakesUp from "./DialogFatingWakeUp.vue";
+  import GuardrailCollision from "./GuardrailCollision.vue";
+  import IntegratedCabinet from "./IntegratedCabinet.vue";
+  import Intermodulation from "./Intermodulation.vue";
+  import ConfluenceArea from "./ConfluenceArea.vue";
+  import Camera from "./Camera.vue";
+  //import Camera from '@/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue';
+  import InfoBoard from "./InfoBoard.vue";
+  import MillimeterWaveRadar from "./MillimeterWaveRadar.vue";
+  import MeteorologicalDetection from "./MeteorologicalDetection.vue";
+  import SolarEnergy from "./SolarEnergy.vue";
+  import DrivingGuidance from "./DrivingGuidance.vue";
+  import SmartDevice from "./SmartDevice.vue";
+  import Broadcast from "./Broadcast.vue";
+  import RemoteMachine from "./RemoteMachine.vue";
+import { log } from 'mathjs';
   export default {
     name: 'smartAnalysis',
     components: {
       vuescroll,
-      FatigueWakesUp,
-      GuardrailCollision,
-      IntegratedCabinet,
+      Teleport,
+      FatigueWakesUp,//激光唤醒
+      GuardrailCollision,//护栏碰撞
+      IntegratedCabinet,//一体机柜
+      Intermodulation,//一类交调
+      ConfluenceArea,//合流区预警
+      InfoBoard,//情报板
+      Camera,//摄像机
+      MillimeterWaveRadar,//毫米波雷达
+      MeteorologicalDetection,//气象设备
+      SolarEnergy,//太阳能板
+      DrivingGuidance,//行车诱导
+      SmartDevice,//设备箱
+      Broadcast,//语言广播
+      RemoteMachine,//远端机
       Button,
 
       Pagination
@@ -83,11 +133,29 @@
     computed: {
       ...mapState(["menu"]),
     },
+    props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+
+  },
     data() {
       return {
         isFatigueWakesUpVisible:false,
         isGuardrailCollision:false,
         isIntegratedCabinet:false,
+        isIntermodulation:false,
+        isConfluenceArea:false,
+        isInfoBoard:false,
+        isCamera:false,
+        isMillimeterWaveRadar:false,
+        isMeteorologicalDetection:false,
+        isSolarEnergy:false,
+        isDrivingGuidance:false,
+        isSmartDevice:false,
+        isBroadcast:false,
+        isRemoteMachine:false,
         dialogData: {},
         devItem:{},
         clearable: false,
@@ -124,7 +192,23 @@
       this.bindList();
     },
     methods: {
-    
+      handledDialogCamera(bool) {
+      this.isFatigueWakesUpVisible = bool;
+      this.isGuardrailCollision = bool;
+      this.isIntegratedCabinet = bool;
+      this.isIntermodulation = bool;
+      this.isConfluenceArea = bool;
+      this.isCamera = bool;
+      this.isInfoBoard = bool;
+      this.isMillimeterWaveRadar = bool;
+      this.isMeteorologicalDetection = bool;
+      this.isSolarEnergy = bool;
+      this.isDrivingGuidance = bool;
+      this.isSmartDevice = bool;
+      this.isBroadcast = bool;
+      this.isRemoteMachine = bool;
+      this.visible=false;
+    },
       bindData(){
         const item = this.devItem;
         const closeLoading = setLoading();
@@ -217,19 +301,63 @@
       },
    
       devClick(item){
-        // console.log(item.deviceType)
-        // console.log(item.deviceType+"111")
-        // console.log(this.isFatigueWakesUpVisible+"2")
-        // console.log(this.isFatigueWakesUpVisible+"5")
-        this.isIntegratedCabinet=false;
+        this.isFatigueWakesUpVisible =false;
         this.isGuardrailCollision=false;
+        this.isIntegratedCabinet=false;
+        this.isIntermodulation=false;
+        this.isConfluenceArea=false;
+        this.isInfoBoard=false;
+        this.isCamera=false;
+        this.isMillimeterWaveRadar=false;
+        this.isMeteorologicalDetection=false;
+        this.isSolarEnergy=false;
+        this.isDrivingGuidance=false;
+        this.isSmartDevice=false;
+        this.isBroadcast=false;
+        this.isRemoteMachine=false;
         this.dialogData=item;
-        this.isFatigueWakesUpVisible =false;
         if(item.deviceType=='10'){
           this.isFatigueWakesUpVisible =true;
-          // console.log(this.isFatigueWakesUpVisible+"3")
         }
-        // console.log(this.isFatigueWakesUpVisible+"4")
+        if(item.deviceType=='6'){
+          this.isGuardrailCollision =true;
+        }
+        if(item.deviceType=='17'){
+          this.isIntegratedCabinet =true;
+        }
+        if(item.deviceType=='11'){
+          this.isIntermodulation =true;
+        }
+        if(item.deviceType=='8'){
+          this.isConfluenceArea =true;
+        }
+        if(item.deviceType=='2'){
+          this.visible =true;
+        }
+        if(item.deviceType=='1'){
+          this.isCamera =true;
+        }
+        if(item.deviceType=='7'){
+          this.isMillimeterWaveRadar =true;
+        }
+        if(item.deviceType=='3'){
+          this.isMeteorologicalDetection =true;
+        }
+        if(item.deviceType=='15'){
+          this.isSolarEnergy =true;
+        }
+        if(item.deviceType=='12'){
+          this.isDrivingGuidance =true;
+        }
+        if(item.deviceType=='13'){
+          this.isSmartDevice =true;
+        }
+        if(item.deviceType=='5'){
+          this.isBroadcast =true;
+        }
+        if(item.deviceType=='16'){
+          this.isRemoteMachine =true;
+        }
       },
       onSizeChange(pageSize) {
         this.page.pageSize = pageSize;
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/index.vue
index ff78f71e..87fc5211 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/index.vue
@@ -56,6 +56,7 @@ export default {
 <style lang="scss">
 .global-input-search-popoverIcon2{
   top: 35px !important;
+  z-index: 1000 !important;
 }
 div.el-popper.global-input-search-popoverIcon {
   background: rgba(6, 66, 88, 0.8);
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeTraffic/DialogCamera.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeTraffic/DialogCamera.vue
index e4c0ac7f..4b025154 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeTraffic/DialogCamera.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeTraffic/DialogCamera.vue
@@ -1,5 +1,7 @@
 <template>
-  <Dialog v-if="data" v-model="visibleModel" :title="data.deviceName" width="600px">
+  <Dialog v-if="data"
+  v-model="visibleModel"
+   :title="data.deviceName" width="600px">
     <img @click="controlDialogVisible = true" v-if="[0, '0'].includes(
         data.parseOtherConfig &&
         data.parseOtherConfig.ptzCtrl