首页设备筛选完善

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">

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>

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 }">

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);

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">

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">

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>

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>

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>

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);
       },
     },
   },

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>

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>
+  

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>
+  

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
+  

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>
+  

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>
+  

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>
+  

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>
+  

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>
+  

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>
+  

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>
+  

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>

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>
+  

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>
+  

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;

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);

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