From 65f459216957ecbe83f2bf48127095a0dbcbef68 Mon Sep 17 00:00:00 2001
From: zhoule <zz221011@163.com>
Date: Tue, 30 Apr 2024 10:27:14 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5-=E8=BF=9C=E7=AB=AF=E6=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/layer/路测设备/远端机.svg   |   5 +
 .../layer/路测设备/远端机_active.svg   |   3 +
 .../layer/路测设备/远端机_fault.svg    |   3 +
 .../components/DeviceControlDialog.vue        |  55 +++++
 .../RemoteMachine/components/DeviceParams.vue | 199 ++++++++++++++++++
 .../components/DeviceParamsMulti.vue          | 166 +++++++++++++++
 .../Dialogs/RemoteMachine/index.vue           | 195 +++++++++++++++++
 .../components/Dialogs/SmartDevice/index.vue  |  24 +--
 .../Home/components/RoadAndEvents/index.vue   |   8 +-
 .../RoadAndEvents/utils/buttonEvent.js        |   4 +
 10 files changed, 642 insertions(+), 20 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/layer/路测设备/远端机.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/layer/路测设备/远端机_active.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/images/layer/路测设备/远端机_fault.svg
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceControlDialog.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceParams.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceParamsMulti.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/index.vue

diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/layer/路测设备/远端机.svg b/ruoyi-ui/src/views/JiHeExpressway/images/layer/路测设备/远端机.svg
new file mode 100644
index 00000000..874c4087
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/layer/路测设备/远端机.svg
@@ -0,0 +1,5 @@
+<svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1142815835">
+<path id="Vector" d="M20.6037 11.8437C20.6037 11.8079 20.6037 11.7722 20.5903 11.7364L18.8482 2.20744C18.7812 1.84965 18.5936 1.49187 18.3256 1.25335C18.0308 0.990976 17.6422 0.835938 17.1866 0.835938H3.7329C3.27729 0.835938 2.84849 1.0029 2.54028 1.26528C2.24548 1.52765 2.07128 1.88543 2.05788 2.26707L0.315863 11.6648C0.302463 11.7244 0.289062 11.7841 0.289062 11.8318M3.6123 2.43403C3.6257 2.39825 3.6257 2.36248 3.6257 2.31477C3.6257 2.29092 3.6391 2.26707 3.6525 2.25514C3.6793 2.23129 3.7061 2.21936 3.7329 2.21936H17.1732C17.1866 2.21936 17.2 2.21936 17.2 2.24321C17.2536 2.29092 17.2804 2.36248 17.2938 2.44596L18.4194 8.54018C18.3658 8.52826 18.3256 8.52826 18.272 8.52826H2.63409C2.59388 8.52826 2.54028 8.52826 2.48668 8.54018L3.6123 2.43403ZM2.32588 9.42271C2.40628 9.37501 2.52688 9.33923 2.63409 9.33923H18.2854C18.3926 9.33923 18.4998 9.36308 18.5936 9.42271L18.8348 10.7227H2.09808L2.32588 9.42271ZM20.1213 18.2599H0.784868C0.516865 18.2599 0.289062 18.0691 0.289062 17.8187V15.8866C0.289062 15.6481 0.503465 15.4454 0.784868 15.4454H20.1213C20.3893 15.4454 20.6171 15.6362 20.6171 15.8866V17.8306C20.6171 18.0691 20.4027 18.2599 20.1213 18.2599ZM20.1079 12.2253H0.811668C0.530265 12.2253 0.302463 12.4281 0.302463 12.6785V14.5748C0.302463 14.8252 0.530265 15.028 0.811668 15.028H20.0945C20.3759 15.028 20.6037 14.8252 20.6037 14.5748V12.6785C20.6171 12.44 20.3893 12.2253 20.1079 12.2253ZM4.67091 14.4674C4.67091 14.6106 4.5503 14.7179 4.3895 14.7179C4.2287 14.7179 4.1081 14.6106 4.1081 14.4674V12.8932C4.1081 12.7501 4.2287 12.6428 4.3895 12.6428C4.5503 12.6428 4.67091 12.7501 4.67091 12.8932V14.4674ZM5.85012 14.4674C5.85012 14.6106 5.72952 14.7179 5.56871 14.7179C5.40791 14.7179 5.28731 14.6106 5.28731 14.4674V12.8932C5.28731 12.7501 5.40791 12.6428 5.56871 12.6428C5.72952 12.6428 5.85012 12.7501 5.85012 12.8932V14.4674ZM7.02933 14.4674C7.02933 14.6106 6.90873 14.7179 6.74793 14.7179C6.58712 14.7179 6.46652 14.6106 6.46652 14.4674V12.8932C6.46652 12.7501 6.58712 12.6428 6.74793 12.6428C6.90873 12.6428 7.02933 12.7501 7.02933 12.8932V14.4674ZM16.8784 14.5867C16.2888 14.5867 15.8064 14.1574 15.8064 13.6326C15.8064 13.1079 16.2888 12.6785 16.8784 12.6785C17.468 12.6785 17.9504 13.1079 17.9504 13.6326C17.9504 14.1574 17.4814 14.5867 16.8784 14.5867Z" fill="#0FD4FF"/>
+</g>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/layer/路测设备/远端机_active.svg b/ruoyi-ui/src/views/JiHeExpressway/images/layer/路测设备/远端机_active.svg
new file mode 100644
index 00000000..370cad14
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/layer/路测设备/远端机_active.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M21.2267 11.0922C21.2267 11.0565 21.2267 11.0207 21.2133 10.9849L19.4713 1.45597C19.4043 1.09819 19.2167 0.740407 18.9487 0.501885C18.6539 0.239512 18.2653 0.0844727 17.8097 0.0844727H4.35594C3.90034 0.0844727 3.47153 0.251438 3.16333 0.513812C2.86853 0.776185 2.69433 1.13397 2.68093 1.5156L0.93891 10.9134C0.92551 10.973 0.912109 11.0326 0.912109 11.0803M4.23534 1.68257C4.24874 1.64679 4.24874 1.61101 4.24874 1.56331C4.24874 1.53945 4.26214 1.5156 4.27554 1.50368C4.30234 1.47982 4.32914 1.4679 4.35594 1.4679H17.7963C17.8097 1.4679 17.8231 1.4679 17.8231 1.49175C17.8767 1.53945 17.9035 1.61101 17.9169 1.69449L19.0425 7.78872C18.9889 7.77679 18.9487 7.77679 18.8951 7.77679H3.25713C3.21693 7.77679 3.16333 7.77679 3.10973 7.78872L4.23534 1.68257ZM2.94893 8.67125C3.02933 8.62354 3.14993 8.58777 3.25713 8.58777H18.9085C19.0157 8.58777 19.1229 8.61162 19.2167 8.67125L19.4579 9.97119H2.72113L2.94893 8.67125ZM20.7443 17.5085H1.40791C1.13991 17.5085 0.912109 17.3177 0.912109 17.0672V15.1352C0.912109 14.8967 1.12651 14.6939 1.40791 14.6939H20.7443C21.0123 14.6939 21.2401 14.8847 21.2401 15.1352V17.0791C21.2401 17.3177 21.0257 17.5085 20.7443 17.5085ZM20.7309 11.4739H1.43471C1.15331 11.4739 0.92551 11.6766 0.92551 11.9271V13.8233C0.92551 14.0738 1.15331 14.2765 1.43471 14.2765H20.7175C20.9989 14.2765 21.2267 14.0738 21.2267 13.8233V11.9271C21.2401 11.6885 21.0123 11.4739 20.7309 11.4739ZM5.29395 13.716C5.29395 13.8591 5.17335 13.9664 5.01255 13.9664C4.85175 13.9664 4.73115 13.8591 4.73115 13.716V12.1417C4.73115 11.9986 4.85175 11.8913 5.01255 11.8913C5.17335 11.8913 5.29395 11.9986 5.29395 12.1417V13.716ZM6.47316 13.716C6.47316 13.8591 6.35256 13.9664 6.19176 13.9664C6.03096 13.9664 5.91036 13.8591 5.91036 13.716V12.1417C5.91036 11.9986 6.03096 11.8913 6.19176 11.8913C6.35256 11.8913 6.47316 11.9986 6.47316 12.1417V13.716ZM7.65238 13.716C7.65238 13.8591 7.53177 13.9664 7.37097 13.9664C7.21017 13.9664 7.08957 13.8591 7.08957 13.716V12.1417C7.08957 11.9986 7.21017 11.8913 7.37097 11.8913C7.53177 11.8913 7.65238 11.9986 7.65238 12.1417V13.716ZM17.5015 13.8352C16.9119 13.8352 16.4295 13.4059 16.4295 12.8812C16.4295 12.3564 16.9119 11.9271 17.5015 11.9271C18.0911 11.9271 18.5735 12.3564 18.5735 12.8812C18.5735 13.4059 18.1045 13.8352 17.5015 13.8352Z" fill="#FFDB82"/>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/layer/路测设备/远端机_fault.svg b/ruoyi-ui/src/views/JiHeExpressway/images/layer/路测设备/远端机_fault.svg
new file mode 100644
index 00000000..066c2569
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/images/layer/路测设备/远端机_fault.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="18" viewBox="0 0 21 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M20.9533 11.0922C20.9533 11.0565 20.9533 11.0207 20.9399 10.9849L19.1979 1.45597C19.1309 1.09819 18.9433 0.740407 18.6752 0.501885C18.3804 0.239512 17.9918 0.0844727 17.5362 0.0844727H4.08251C3.6269 0.0844727 3.1981 0.251438 2.88989 0.513812C2.59509 0.776185 2.42089 1.13397 2.40749 1.5156L0.665472 10.9134C0.652072 10.973 0.638672 11.0326 0.638672 11.0803M3.9619 1.68257C3.9753 1.64679 3.9753 1.61101 3.9753 1.56331C3.9753 1.53945 3.9887 1.5156 4.0021 1.50368C4.0289 1.47982 4.05571 1.4679 4.08251 1.4679H17.5228C17.5362 1.4679 17.5496 1.4679 17.5496 1.49175C17.6032 1.53945 17.63 1.61101 17.6434 1.69449L18.769 7.78872C18.7154 7.77679 18.6752 7.77679 18.6216 7.77679H2.98369C2.94349 7.77679 2.88989 7.77679 2.83629 7.78872L3.9619 1.68257ZM2.67549 8.67125C2.75589 8.62354 2.87649 8.58777 2.98369 8.58777H18.635C18.7422 8.58777 18.8494 8.61162 18.9433 8.67125L19.1845 9.97119H2.44769L2.67549 8.67125ZM20.4709 17.5085H1.13448C0.866474 17.5085 0.638672 17.3177 0.638672 17.0672V15.1352C0.638672 14.8967 0.853074 14.6939 1.13448 14.6939H20.4709C20.7389 14.6939 20.9667 14.8847 20.9667 15.1352V17.0791C20.9667 17.3177 20.7523 17.5085 20.4709 17.5085ZM20.4575 11.4739H1.16128C0.879874 11.4739 0.652072 11.6766 0.652072 11.9271V13.8233C0.652072 14.0738 0.879874 14.2765 1.16128 14.2765H20.4441C20.7255 14.2765 20.9533 14.0738 20.9533 13.8233V11.9271C20.9667 11.6885 20.7389 11.4739 20.4575 11.4739ZM5.02051 13.716C5.02051 13.8591 4.89991 13.9664 4.73911 13.9664C4.57831 13.9664 4.45771 13.8591 4.45771 13.716V12.1417C4.45771 11.9986 4.57831 11.8913 4.73911 11.8913C4.89991 11.8913 5.02051 11.9986 5.02051 12.1417V13.716ZM6.19973 13.716C6.19973 13.8591 6.07912 13.9664 5.91832 13.9664C5.75752 13.9664 5.63692 13.8591 5.63692 13.716V12.1417C5.63692 11.9986 5.75752 11.8913 5.91832 11.8913C6.07912 11.8913 6.19973 11.9986 6.19973 12.1417V13.716ZM7.37894 13.716C7.37894 13.8591 7.25834 13.9664 7.09754 13.9664C6.93673 13.9664 6.81613 13.8591 6.81613 13.716V12.1417C6.81613 11.9986 6.93673 11.8913 7.09754 11.8913C7.25834 11.8913 7.37894 11.9986 7.37894 12.1417V13.716ZM17.228 13.8352C16.6384 13.8352 16.156 13.4059 16.156 12.8812C16.156 12.3564 16.6384 11.9271 17.228 11.9271C17.8176 11.9271 18.3 12.3564 18.3 12.8812C18.3 13.4059 17.831 13.8352 17.228 13.8352Z" fill="#FF5F5F"/>
+</svg>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceControlDialog.vue
new file mode 100644
index 00000000..200357eb
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceControlDialog.vue
@@ -0,0 +1,55 @@
+<template>
+  <Dialog v-model="modelVisible" title="设备操作" width="600px">
+    <div class="DeviceControlDialog">
+      <DeviceParams :dialogData="dialogData" />
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index.vue";
+import DeviceParams from "./DeviceParams.vue";
+
+export default {
+  name: "DeviceControlDialog",
+  components: {
+    Dialog,
+    DeviceParams,
+  },
+  model: {
+    prop: "visible",
+    event: "update:value",
+  },
+  props: {
+    visible: Boolean,
+    dialogData: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    modelVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:value", val);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.DeviceControlDialog {
+  width: 510px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  min-height: 360px;
+
+  .tips {
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceParams.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceParams.vue
new file mode 100644
index 00000000..dc8d4b51
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceParams.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class='DeviceParams'>
+    <div class="no-data" v-if="!devicesList.length" v-loading="secondLoading">暂无设备参数</div>
+    <Descriptions :list="devicesList" style="gap: 18px;" column="5">
+      <template v-for="item in devicesList.slice(0, -1)" #[`content-${getSlotKey(item.key)}`]="{ data }">
+        <span>{{ data.text }}</span>
+        <Switcher v-if="!disabled" class="switcher" :activeOption="activeOption" :value="data.state"
+          @change="(value) => handleSwitcherChange(value, data)" />
+        <ElTag style="margin-left: 20px;" v-else effect="dark" :type="data.state ? '' : 'info'">{{ data.state ? '开' :
+      '关' }}
+        </ElTag>
+      </template>
+    </Descriptions>
+  </div>
+</template>
+
+<script>
+import Descriptions from '@screen/components/Descriptions.vue';
+import Switcher from '@screen/pages/service/PublishingChannelManagement/components/Switcher.vue';
+
+import request from "@/utils/request";
+import { Message } from 'element-ui';
+import { confirm } from "@screen/utils/common";
+
+export default {
+  name: 'DeviceParams',
+  components: {
+    Descriptions,
+    Switcher
+  },
+  props: {
+    dialogData: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: Boolean
+  },
+  data() {
+    return {
+      secondLoading: true,
+      devicesList: [],
+      activeOption: {
+        active: {
+          text: "开"
+        },
+        unActive: {
+          text: "关"
+        }
+      }
+    }
+  },
+  created() {
+
+    Promise.all([this.getAc(), this.getDc()]).then(res => {
+      // if (result.code != 200) return;
+
+      let ac = res[0].data;
+      let dc = res[1].data;
+      let deviceInfo = _.merge({}, ac, dc);
+
+      const typeMap = {
+        ac: '220v',
+        dc: '12v',
+      }
+      for (const key in deviceInfo.formatValue) {
+        // electricity 电流
+        // voltage 电压
+        if (key.includes('electricity')) {
+          const args = key.match(/[a-z]+|[0-9]+$/g);
+
+          const type = args[0], num = args.slice(-1)[0], prefix = args.slice(0, 2).join('_');
+          // console.log(type , num , prefix , "+++=========="); //dc 2 dc_out
+          this.devicesList.push(
+            {
+              label: `支路${num} （${typeMap[type]}）   电压`,
+              key: `${prefix}_voltage_${num}`,
+              text: deviceInfo.formatValue[`${prefix}_voltage_${num}`],
+              gridColumn: 3
+            },
+            {
+              label: '电流',
+              key: `${prefix}_electricity_${num}`,
+              text: deviceInfo.formatValue[key],
+              gridColumn: 2,
+              state: deviceInfo.value[key] > 0
+            }
+          );
+        }
+      }
+      this.devicesList.push(
+        {
+          label: '风扇',
+          key: `fan_status`,
+          // key: `aa_electricity_1`,
+          text: { 0: '正常', 1: '开' }[deviceInfo.formatValue['fan_status']] || '-',
+          gridColumn: 2,
+          state: (deviceInfo.formatValue['fan_status'] === '0')
+        },
+
+        {
+          label: '温度',
+          key: `temperature`,
+          text: deviceInfo.formatValue['temperature'] ? `${deviceInfo.formatValue['temperature']} °C` : '-',
+          gridColumn: 2
+        },
+        {
+          label: '箱门',
+          key: `door_status`,
+          text: { 0: '关闭', 1: '打开' }[deviceInfo.formatValue['door_status']] || '-',
+          gridColumn: 1
+        },
+        {
+          label: '湿度',
+          key: `humidity`,
+          text: deviceInfo.formatValue['humidity'] ? `${deviceInfo.formatValue['humidity']} %` : '-',
+          gridColumn: 2
+        },
+        {
+          label: '市电掉电',
+          key: `power_status`,
+          text: { 0: '正常', 1: '掉电' }[deviceInfo.formatValue['power_status']] || '-',
+          gridColumn: 2
+        },
+      )
+      // this.data = result.rows;
+      // this.total = result.total;
+    })
+      .finally(() => {
+        this.secondLoading = false
+      })
+  },
+  methods: {
+    getAc() {
+      return request({
+        url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || '10.0.36.143-1883'}/1ac`,
+        method: "get",
+        params: {}
+      })
+    },
+    getDc() {
+      return request({
+        url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || '10.0.36.143-1883'}/1dc`,
+        method: "get",
+        params: {}
+      })
+    },
+    async handleSwitcherChange(value, data) {
+      let str = data.state ? "关闭" : "开启";
+      let deviceName = "";
+      if (data.key.includes("fan")) {
+        str += "风扇?";
+        deviceName = "fan_out_en";
+      } else {
+        str += "该支路?"
+        deviceName = data.key.match(/^[a-z]+_out|[0-9]+/g).join("_") + "_en"; //dc_out_2_en    ac_out_2_en;
+      }
+      data.state = value;
+      const isContinue = await confirm({ message: `${str}` })
+        .catch(() => {
+          data.state = !value;
+        });
+
+      if (!isContinue) return;
+
+      // https://www.yuque.com/dayuanzhong-ovjwn/gkht0m/ww776d5kzs72ilzh?singleDoc=
+      request({
+        url: `/business/device/functions/${this.dialogData.iotDeviceId}/${102}`,
+        method: "POST",
+        data: {
+          deviceName,
+          // 开关：1=打开，0=关闭
+          value: value ? 1 : 0
+        }
+      })
+        .then(result => {
+          if (result.code != 200) {
+            Message.error("操作失败");
+            data.state = !value;
+            return;
+          };
+          Message.success("操作成功");
+        })
+        .catch(() => {
+          data.state = !value;
+          Message.error("操作失败");
+        })
+    },
+    getSlotKey(key) {
+      return key.includes('electricity') || key.includes('fan') ? key : ''
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.DeviceParams {
+  height: 100%;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceParamsMulti.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceParamsMulti.vue
new file mode 100644
index 00000000..64b0dda6
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceParamsMulti.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class='DeviceParams'>
+    <div class="no-data" v-if="!devicesList.length" v-loading="secondLoading">暂无设备参数</div>
+    <Descriptions :list="devicesList" style="gap: 18px;" column="5">
+      <template v-for="item in devicesList" #[`content-${item.key}`]="{ data }">
+        <span style="font-size: 15px;font-weight: 400;color: #3de8ff;">{{ data.text }}</span>
+        <Switcher v-if="!disabled" class="switcher" :activeOption="activeOption" :value="data.state"
+          @change="(value) => handleSwitcherChange(value, data)" />
+        <ElTag style="margin-left: 20px;" v-else effect="dark" :type="data.state ? '' : 'info'">{{ data.state ? '开' :
+      '关' }}
+        </ElTag>
+      </template>
+    </Descriptions>
+  </div>
+</template>
+
+<script>
+import Descriptions from '@screen/components/Descriptions.vue';
+import Switcher from '@screen/pages/service/PublishingChannelManagement/components/Switcher.vue';
+import { cloneDeep } from 'lodash';
+import request from "@/utils/request";
+import { Message } from 'element-ui';
+import { confirm } from "@screen/utils/common";
+import { batchFunctions } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+import { multiResultShow } from "@screen/utils/common";
+
+export default {
+  name: 'DeviceParams',
+  components: {
+    Descriptions,
+    Switcher
+  },
+  props: {
+    dialogData: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: Boolean,
+    isMultiControl: Boolean,
+    selectItems: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      secondLoading: true,
+      devicesList: [
+        {
+          labelHidden: true,
+          text: `支路1 （220v）:  `,
+          key: `ac_out_1_en`,
+          // text: deviceInfo.formatValue[`${prefix}_voltage_${num}`],
+          gridColumn: 1,
+          state: 0
+        },
+        {
+          labelHidden: true,
+          text: `支路2 （220v）:  `,
+          key: `ac_out_2_en`,
+          // text: deviceInfo.formatValue[`${prefix}_voltage_${num}`],
+          gridColumn: 1,
+          state: 0
+        },
+        {
+          labelHidden: true,
+          text: `支路1 （12v）: `,
+          key: `dc_out_1_en`,
+          // text: deviceInfo.formatValue[`${prefix}_voltage_${num}`],
+          gridColumn: 1,
+          state: 0
+        },
+        {
+          labelHidden: true,
+          text: `支路2 （12v）: `,
+          key: `dc_out_2_en`,
+          // text: deviceInfo.formatValue[`${prefix}_voltage_${num}`],
+          gridColumn: 1,
+          state: 0
+        },
+        {
+          labelHidden: true,
+          text: '风扇:',
+          key: `fan_out_en`,
+          // text: { 0: '正常', 1: '开' }[deviceInfo.formatValue['fan_status']] || '-',
+          gridColumn: 1,
+          state: 0
+        },
+      ],
+      activeOption: {
+        active: {
+          text: "开"
+        },
+        unActive: {
+          text: "关"
+        }
+      }
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    async handleSwitcherChange(value, data) {
+      let str = data.state ? "关闭" : "开启";
+      let deviceName = data.key;
+      str += `${data.text.replace(":", "")}?`;
+      // if (data.key.includes("fan")) {
+      //   str += "风扇?";
+      //   deviceName = "fan_out_en";
+      // } else {
+      //   str += "该支路?"
+      //   deviceName = data.key.match(/^[a-z]+_out|[0-9]+/g).join("_") + "_en"; //dc_out_2_en    ac_out_2_en;
+      // }
+      data.state = value;
+
+      if (!this.selectItems.length) {
+        setTimeout(() => { data.state = !value; }, 10);
+        return Message.error("请至少选择一个设备!");
+      }
+      const selectItems = this.selectItems.map(item => JSON.parse(item));
+
+      const isContinue = await confirm({ message: `${str}` })
+        .catch(() => {
+          data.state = !value;
+        });
+
+      if (!isContinue) return;
+
+      batchFunctions(
+        {
+          "devices": selectItems,
+          "functions": [
+            {
+              "functionId": "102",
+              "params": {
+                deviceName,
+                // 开关：1=打开，0=关闭
+                value: value ? 1 : 0
+              }
+            }
+          ]
+        })
+        .then(result => {
+          multiResultShow(result.data, item => item.result.code == 200, "操作");
+        })
+        .catch(() => {
+          data.state = !value;
+          Message.error("操作失败");
+        })
+    },
+    getSlotKey(key) {
+      return key.includes('electricity') || key.includes('fan') ? key : ''
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.DeviceParams {
+  height: 100%;
+  padding-right: 9px;
+  padding-left: 14px;
+  margin-top: 15px;
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/index.vue
new file mode 100644
index 00000000..3053c351
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/index.vue
@@ -0,0 +1,195 @@
+<template>
+    <Dialog v-model="obverseVisible" title="远端机" width="600px">
+        <Video class="video-stream" :pileNum="dialogData.stakeMark" />
+
+        <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="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 "./components/DeviceParams.vue";
+import DeviceControlDialog from "./components/DeviceControlDialog.vue";
+
+import request from "@/utils/request";
+
+import {
+    getRoadInfoByStakeMark,
+    getProduct,
+} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+import { dialogDelayVisible } from "./../mixin";
+
+// 广播发布
+export default {
+    name: "RemoteMachine",
+    mixins: [dialogDelayVisible],
+    components: {
+        Dialog,
+        Descriptions,
+        LineChart,
+        Video,
+        Button,
+        DeviceParams,
+        DeviceControlDialog,
+    },
+    data() {
+        return {
+            activeName: "first",
+            releaseVisible: false,
+            deviceControlVisible: false,
+            data: {
+                deviceName: "LH24",
+                roadName: "G35济泽高速",
+                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: "deviceStateLiteral",
+                    // enum: "DeviceTypeEnum",
+                },
+                {
+                    label: "设备厂商",
+                    key: "manufacturer",
+                },
+            ],
+        };
+    },
+    async created() {
+        if (this.dialogData) {
+            this.data = {
+                ...this.dialogData,
+            }
+        }
+
+        let deviceInfo = await this.getDeviceInfo();
+        this.data = {
+            roadName: null,
+            deviceStateLiteral: deviceInfo?.data.formatValue.deviceState,
+            ...this.data
+        };
+
+        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;
+        console.log('this.data', this.data)
+    },
+    methods: {
+        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: 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%;
+                }
+            }
+        }
+    }
+
+    .bottom {
+        margin-top: 12px;
+        display: flex;
+        gap: 9px;
+        align-items: center;
+        justify-content: end;
+
+        >div {
+            font-size: 16px;
+            padding: 6px 12px;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
index 411f9696..556bcb0f 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/index.vue
@@ -12,19 +12,12 @@
           <DeviceParams disabled :dialogData="dialogData" />
         </ElTabPane>
         <ElTabPane label="在线率统计" name="third">
-          <LineChart
-            v-if="activeName === 'third'"
-            :productId="dialogData.id"
-            style="height: 180px"
-          />
+          <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 v-if="activeName != 'first' && data.deviceState == '1'" @click.native="deviceControlVisible = true">
         设备操作
       </Button>
       <Button v-else-if="activeName != 'first'" style="background-color: #bbb">
@@ -32,10 +25,7 @@
       </Button>
     </template>
 
-    <DeviceControlDialog
-      v-model="deviceControlVisible"
-      :dialogData="dialogData"
-    />
+    <DeviceControlDialog v-model="deviceControlVisible" :dialogData="dialogData" />
   </Dialog>
 </template>
 
@@ -131,6 +121,7 @@ export default {
     this.data = {
       roadName: null,
       deviceStateLiteral: deviceInfo?.data.formatValue.deviceState,
+      ...this.data
     };
 
     // console.log(
@@ -151,9 +142,8 @@ export default {
   methods: {
     async getDeviceInfo() {
       return request({
-        url: `/business/device/properties/latest/${
-          this.dialogData.iotDeviceId || "10.0.36.143-1883"
-        }/3`,
+        url: `/business/device/properties/latest/${this.dialogData.iotDeviceId || "10.0.36.143-1883"
+          }/3`,
         method: "get",
         params: {},
       });
@@ -203,7 +193,7 @@ div.switcher {
     align-items: center;
     justify-content: end;
 
-    > div {
+    >div {
       font-size: 16px;
       padding: 6px 12px;
     }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
index 36ee6074..a7291719 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
@@ -47,6 +47,7 @@ import TrafficIncidents from "./../Dialogs/TrafficIncidents/index.vue";
 import PerceiveEvent from "./../Dialogs/PerceiveEvent/index.vue";
 import RoadNetworkFacilities from "./../Dialogs/RoadNetworkFacilities/index.vue";
 import SmartDevice from "./../Dialogs/SmartDevice/index.vue";
+import RemoteMachine from "./../Dialogs/RemoteMachine/index.vue";
 import SolarEnergy from "./../Dialogs/SolarEnergy/index.vue";
 import Intermodulation from "./../Dialogs/Intermodulation/index.vue";
 import GuardrailCollision from "./../Dialogs/GuardrailCollision/index.vue";
@@ -71,7 +72,8 @@ export default {
     Intermodulation,
     GuardrailCollision,
     FatigueWakesUp,
-    RoadNetworkFacilities
+    RoadNetworkFacilities,
+    RemoteMachine
   },
   data() {
     return {
@@ -288,10 +290,10 @@ export default {
         gridColumnStart: (index % columns) + 1,
       }
     },
-    async handleTrafficRelieve(e){
+    async handleTrafficRelieve(e) {
       await this.handleDeviceImmediate(e._itemData)
       setTimeout(async () => {
-        await this.handleDeviceImmediate(e._itemData)  
+        await this.handleDeviceImmediate(e._itemData)
       }, 500);
       this.dialogConfig = {
         // 0 有 可控（球机）ControlCamera | 1 ⽆ 不可控（枪机）Camera
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
index f95c8fac..a2d3858d 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
@@ -79,6 +79,10 @@ export const DeviceForMap = {
     deviceType: "15",
     dialog: "SolarEnergy",
   },
+  远端机: {
+    deviceType: "16",
+    dialog: "RemoteMachine",
+  },
 };
 
 export const lngLatMap = {}; //优化  缩略图 + 地图 复用lngLatmap