From 777b53981b53e0fa857705ced10ca4c9467fdaae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=85=B4=E7=90=B3?= <1911390090@qq.com>
Date: Fri, 5 Dec 2025 09:28:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=A1=8C=E8=BD=A6=E8=AF=B1?=
 =?UTF-8?q?=E5=AF=BC=E8=AE=BE=E5=A4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/NewDeviceControlDialog.vue     |  73 ++
 .../components/NewDeviceParam.vue             | 730 ++++++++++++++++++
 .../Dialogs/DrivingGuidance/index.vue         | 198 ++---
 .../components/HomeDevice/DrivingGuidance.vue | 287 +------
 .../HomeDevice/NewDeviceDrivingGuidance.vue   | 542 +++++++++++++
 .../HomeDevice/OldDeviceDrivingGuidance.vue   | 323 ++++++++
 6 files changed, 1748 insertions(+), 405 deletions(-)
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/NewDeviceControlDialog.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/NewDeviceParam.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/NewDeviceDrivingGuidance.vue
 create mode 100644 ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/OldDeviceDrivingGuidance.vue

diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/NewDeviceControlDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/NewDeviceControlDialog.vue
new file mode 100644
index 00000000..2f2392e9
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/NewDeviceControlDialog.vue
@@ -0,0 +1,73 @@
+<template>
+  <Dialog v-model="modelVisible" title="设备操作(新设备)" width="600px" style="z-index:1200">
+    <DeviceParam v-model="modelVisible" ref="DeviceParam" :deviceId="deviceId" :id="id" :deviceType="deviceType"
+                 @update:submitting="(val) => { submitting = val }">
+    </DeviceParam>
+
+    <template #footer>
+      <Button style="background-color: rgba(0, 179, 204, 0.3)"
+              @click.native="(modelVisible = false), (submitting = false)">
+        取消
+      </Button>
+      <Button @click.native="handleSubmit" :loading="submitting"> 确定 </Button>
+    </template>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index.vue";
+import Button from "@screen/components/Buttons/Button.vue";
+import NewDeviceParam from "./NewDeviceParam.vue";
+
+export default {
+  name: "NewDeviceControlDialog",
+  components: {
+    Dialog,
+    Button,
+    DeviceParam: NewDeviceParam,
+  },
+  model: {
+    prop: "visible",
+    event: "update:value",
+  },
+  props: {
+    visible: Boolean,
+    deviceId: String,
+    id: Number,
+    deviceType: String,
+  },
+  data() {
+    return {
+      submitting: false,
+    };
+  },
+  computed: {
+    modelVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:value", val);
+      },
+    },
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.DeviceParam.handleSubmit();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.NewDeviceControlDialog {
+  width: 450px;
+  height: 250px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  .tips {
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/NewDeviceParam.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/NewDeviceParam.vue
new file mode 100644
index 00000000..5ae863ad
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/components/NewDeviceParam.vue
@@ -0,0 +1,730 @@
+<template>
+  <div class="DeviceControlDialog" :style="{
+    'margin-top': isMultiControl ? '15px' : undefined,
+    'width': isMultiControl ? '100%' : undefined,
+  }">
+    <Form v-model="formData" class="form" ref="FormConfigRef" :formList="formList" column="1" labelWidth="120px" />
+
+    <div class="tips" v-if="formData.deviceMode == 1">
+      说明: 阈值开关开启时，设备将按照设定的开灯时间和关灯时间自动控制
+    </div>
+  </div>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index.vue";
+import Button from "@screen/components/Buttons/Button.vue";
+import Form from "@screen/components/FormConfig";
+
+import { Message } from "element-ui";
+import request from "@/utils/request";
+import { delay } from "@screen/utils/common.js";
+
+const workStatus = [
+  {
+    key: "00",
+    label: "不更新状态",
+    disabled: false,
+  },
+  {
+    key: "01",
+    label: "常亮",
+  },
+  {
+    key: "02",
+    label: "流水",
+  },
+  {
+    key: "03",
+    label: "闪烁",
+  },
+  {
+    key: "04",
+    label: "关闭",
+    disabled: false,
+  },
+];
+
+export default {
+  name: "NewDeviceParam",
+  components: {
+    Dialog,
+    Button,
+    Form,
+  },
+  model: {
+    prop: "visible",
+    event: "update:value",
+  },
+  props: {
+    visible: Boolean,
+    deviceId: String,
+    id: [String, Number],
+    deviceType: String,
+    isMultiControl: Boolean,
+    selectItems: {
+      type: Array,
+      default: () => []
+    },
+
+    deviceParams: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      formData: {
+        onTimePicker: null, // 用于时间选择器绑定
+        offTimePicker: null, // 用于时间选择器绑定
+      },
+      // 用于存储从接口获取的设备参数
+      apiDeviceParams: {},
+      formList: [
+        {
+          label: "模式选择:",
+          key: "cmd",
+          type: "RadioGroup",
+          default: 1,
+          options: {
+            type: "circle",
+            options: [
+              {
+                key: 1,
+                label: "同步",
+              },
+              {
+                key: 2,
+                label: "流水",
+              },
+              {
+                key: 3,
+                label: "尾迹",
+              },
+            ],
+          },
+        },
+        {
+          label: "亮灯模式:",
+          key: "mode",
+          type: "RadioGroup",
+          default: 0,
+          options: {
+            type: "circle",
+            options: [
+              {
+                key: 0,
+                label: "常亮",
+              },
+              {
+                key: 1,
+                label: "单闪",
+              },
+              {
+                key: 2,
+                label: "双闪",
+              },
+              {
+                key: 3,
+                label: "三闪",
+              },
+            ],
+          },
+        },
+        {
+          label: "设备开关:",
+          key: "sw",
+          type: "RadioGroup",
+          default: true,
+          options: {
+            type: "circle",
+            options: [
+              {
+                key: true,
+                label: "开启",
+              },
+              {
+                key: false,
+                label: "关闭",
+              },
+            ],
+          },
+        },
+        {
+          label: "闪灯频率:",
+          key: "ff",
+          type: "Input",
+          required: true,
+          options: {
+            placeholder: "请输入闪灯频率 (1-30)",
+            tip: "数值×5表示一分钟闪烁次数（例如：输入6表示每分钟闪烁30次）"
+          },
+        },
+        {
+          label: "亮度:",
+          key: "lum",
+          type: "Input",
+          required: true,
+          options: {
+            placeholder: "请输入亮度 (0-100)",
+            tip: "亮度值范围0-100，数值越大亮度越高"
+          },
+        },
+        {
+          label: "亮灯时长:",
+          key: "ontime",
+          type: "Input",
+          required: true,
+          options: {
+            placeholder: "请输入亮灯时长 (50-500)",
+            tip: "必须为50的倍数，单位为毫秒（例如：50、100、150...500）"
+          },
+        },
+        {
+          label: "灯光颜色:",
+          key: "sg",
+          type: "RadioGroup",
+          default: "AA",
+          options: {
+            type: "circle",
+            options: [
+              {
+                key: "AA",
+                label: "红色",
+              },
+              {
+                key: "55",
+                label: "黄色",
+              },
+            ],
+          },
+        },
+        {
+          label: "灵敏度:",
+          key: "cth",
+          type: "Input",
+          required: true,
+          options: {
+            placeholder: "请输入灵敏度 (0-255)",
+            tip: "值越高灵敏度越低，范围0-255"
+          },
+        },
+        {
+          label: "阈值开关:",
+          key: "deviceMode",
+          type: "RadioGroup",
+          default: 0,
+          options: {
+            type: "circle",
+            options: [
+              {
+                key: 0,
+                label: "关闭",
+              },
+              {
+                key: 1,
+                label: "开启",
+              },
+            ],
+          },
+        },
+        {
+          label: "开灯时间:",
+          key: "onTimePicker",
+          type: "TimePicker",
+          required: true,
+          visible: (data) => data.deviceMode === 1,
+          options: {
+            format: "HH:mm",
+            valueFormat: "HH:mm",
+            placeholder: "选择开灯时间",
+            tip: "选择开灯时间（格式：HH:mm，保存时会转换为数字格式如1800）"
+          },
+        },
+        {
+          label: "关灯时间:",
+          key: "offTimePicker",
+          type: "TimePicker",
+          required: true,
+          visible: (data) => data.deviceMode === 1,
+          options: {
+            format: "HH:mm",
+            valueFormat: "HH:mm",
+            placeholder: "选择关灯时间",
+            tip: "选择关灯时间（格式：HH:mm，保存时会转换为数字格式如0600）"
+          },
+        },
+      ],
+    };
+  },
+  mounted() {
+    console.log('NewDeviceParam 组件 mounted，deviceId:', this.deviceId);
+    this.$emit("update:submitting", false);
+
+    // 优先使用 props 中的 deviceParams，如果没有则从接口获取
+    if (this.deviceParams && this.hasActualData(this.deviceParams)) {
+      console.log('使用 props 中的 deviceParams 进行回显');
+      this.setFormDataFromParams(this.deviceParams);
+    } else if (!this.isMultiControl) {
+      console.log('从接口获取设备参数进行回显');
+      this.reDisplay();
+    }
+  },
+  watch: {
+    // 监听 deviceParams 变化
+    deviceParams: {
+      handler(newVal) {
+        console.log('deviceParams props 变化:', newVal);
+        if (newVal && this.hasActualData(newVal)) {
+          this.setFormDataFromParams(newVal);
+        }
+      },
+      immediate: true,
+      deep: true
+    },
+    // 监听时间选择器变化，转换为数字格式
+    'formData.onTimePicker': {
+      handler(newVal) {
+        console.log('onTimePicker 变化:', newVal);
+        if (newVal) {
+          this.formData.onTime = this.timeStringToNumber(newVal);
+        } else {
+          this.formData.onTime = null;
+        }
+      }
+    },
+    'formData.offTimePicker': {
+      handler(newVal) {
+        console.log('offTimePicker 变化:', newVal);
+        if (newVal) {
+          this.formData.offTime = this.timeStringToNumber(newVal);
+        } else {
+          this.formData.offTime = null;
+        }
+      }
+    }
+  },
+  methods: {
+    // 检查对象是否有实际数据（排除Vue响应式属性）
+    hasActualData(obj) {
+      if (!obj || typeof obj !== 'object') return false;
+
+      // 检查是否有非 __ 开头的属性
+      for (let key in obj) {
+        if (obj.hasOwnProperty(key) && !key.startsWith('__')) {
+          return true;
+        }
+      }
+      return false;
+    },
+
+    // 重新显示方法
+    reDisplay() {
+      console.log('reDisplay 被调用，deviceId:', this.deviceId);
+      this.fetchDeviceProperty();
+    },
+
+    // 获取设备参数
+    async fetchDeviceProperty() {
+      try {
+        console.log('开始从接口获取设备参数，deviceId:', this.deviceId);
+
+        // 按照要求的格式构建请求体
+        const requestBody = {
+          params: {
+            list: [this.deviceId]  // 使用组件的 deviceId prop
+          }
+        };
+
+        console.log('发送请求体:', requestBody);
+
+        const response = await request.post(
+          `business/device/functions/${this.deviceId}/getProperty`,
+          requestBody
+        );
+
+        console.log('接口响应:', response);
+
+        if (response.code === 200 && response.data) {
+          console.log('获取设备参数成功:', response.data);
+          this.parseResponseData(response.data);
+        } else {
+          console.warn('获取设备参数失败:', response);
+          Message.error('获取设备参数失败');
+        }
+      } catch (error) {
+        console.error('获取设备参数异常:', error);
+        Message.error('获取设备参数异常');
+      }
+    },
+
+    ensureBoolean(value) {
+      if (value === true || value === 'true') return true;
+      if (value === false || value === 'false') return false;
+      return value;
+    },
+
+    // 解析响应数据
+    parseResponseData(data) {
+      try {
+        console.log('开始解析数据，数据类型:', typeof data, '值:', data);
+
+        // 如果返回的是数组，取第一个元素
+        let rawData = data;
+        if (Array.isArray(data) && data.length > 0) {
+          rawData = data[0];
+        }
+
+        // 如果数据是字符串，解析为JSON
+        if (typeof rawData === 'string') {
+          try {
+            rawData = JSON.parse(rawData);
+          } catch (parseError) {
+            console.error('JSON解析失败:', parseError);
+            console.error('原始字符串:', rawData);
+            Message.error('数据解析失败');
+            return;
+          }
+        }
+
+        if (rawData && rawData.data) {
+          const deviceData = rawData.data;
+          console.log("设备属性数据:", deviceData);
+
+          // 创建对象存储解析后的设备参数
+          const parsedParams = {};
+
+          // 处理 deviceProperty
+          if (deviceData.deviceProperty && Array.isArray(deviceData.deviceProperty) && deviceData.deviceProperty.length > 0) {
+            const property = deviceData.deviceProperty[0];
+            console.log('设备属性数据:', {
+              csq: property.csq,
+              latitude: property.lat,
+              longitude: property.lng,
+              voltage: property.vol
+            });
+          }
+
+          // 处理 lampParam
+          if (deviceData.lampParam && Array.isArray(deviceData.lampParam) && deviceData.lampParam.length > 0) {
+            const lampParam = deviceData.lampParam[0];
+
+            // 存储 lampParam 数据
+            Object.assign(parsedParams, {
+              cmd: lampParam.cmd || 1,
+              mode: lampParam.mode || 0,
+              ff: lampParam.ff || 1,
+              lum: lampParam.lum || 50,
+              ontime: lampParam.ontime || 50,
+              sw: this.ensureBoolean(lampParam.sw),
+              sg: lampParam.sg || 'AA',
+              cth: lampParam.cth || 128
+            });
+          }
+
+          // 处理 deviceSetting
+          if (deviceData.deviceSetting && Array.isArray(deviceData.deviceSetting) && deviceData.deviceSetting.length > 0) {
+            const deviceSetting = deviceData.deviceSetting[0];
+
+            // 合并 deviceSetting 数据
+            Object.assign(parsedParams, {
+              deviceMode: deviceSetting.mode || 0,
+              onTime: deviceSetting.onTime || 1800,
+              offTime: deviceSetting.offTime || 600
+            });
+          }
+
+          console.log('解析后的设备参数:', parsedParams);
+
+          // 保存到本地，然后进行回显
+          this.apiDeviceParams = parsedParams;
+          this.setFormDataFromParams(parsedParams);
+
+        } else {
+          console.warn('数据格式不正确，没有 data 字段:', rawData);
+          Message.warning('设备参数数据格式不正确');
+        }
+      } catch (error) {
+        console.error('解析数据失败:', error);
+        console.error('原始数据:', data);
+        console.error('错误堆栈:', error.stack);
+        Message.error('解析设备参数失败');
+      }
+    },
+
+    // 从参数设置表单数据（回显）
+    setFormDataFromParams(params) {
+
+      const sourceParams = params || this.deviceParams || this.apiDeviceParams;
+
+
+      if (!sourceParams || !this.hasActualData(sourceParams)) {
+        console.log('没有有效的设备参数，跳过回显');
+        return;
+      }
+
+
+      // 逐个字段设置，确保每个字段都有值
+      const updates = {};
+
+      // cmd
+      if ('cmd' in sourceParams) {
+        updates.cmd = sourceParams.cmd;
+      }
+
+      // mode
+      if ('mode' in sourceParams) {
+        updates.mode = sourceParams.mode;
+      }
+
+      // sw
+      if ('sw' in sourceParams) {
+        updates.sw = this.ensureBoolean(sourceParams.sw);
+      }
+
+      // ff
+      if ('ff' in sourceParams) {
+        updates.ff = sourceParams.ff !== undefined ? sourceParams.ff.toString() : '';
+      }
+
+      // lum
+      if ('lum' in sourceParams) {
+        updates.lum = sourceParams.lum !== undefined ? sourceParams.lum.toString() : '';
+      }
+
+      // ontime
+      if ('ontime' in sourceParams) {
+        updates.ontime = sourceParams.ontime !== undefined ? sourceParams.ontime.toString() : '';
+      }
+
+      // sg
+      if ('sg' in sourceParams) {
+        updates.sg = sourceParams.sg;
+      }
+
+      // cth
+      if ('cth' in sourceParams) {
+        updates.cth = sourceParams.cth !== undefined ? sourceParams.cth.toString() : '';
+      }
+
+      // deviceMode
+      if ('deviceMode' in sourceParams) {
+        updates.deviceMode = sourceParams.deviceMode;
+      }
+
+      // 应用更新
+      Object.assign(this.formData, updates);
+
+
+      // 处理时间字段
+      if ('onTime' in sourceParams && sourceParams.onTime !== undefined && sourceParams.onTime !== null) {
+        this.formData.onTime = sourceParams.onTime;
+        this.formData.onTimePicker = this.numberToTimeString(sourceParams.onTime);
+      }
+
+      if ('offTime' in sourceParams && sourceParams.offTime !== undefined && sourceParams.offTime !== null) {
+        this.formData.offTime = sourceParams.offTime;
+        this.formData.offTimePicker = this.numberToTimeString(sourceParams.offTime);
+      }
+
+    },
+
+    // 将数字格式转换为时间字符串（1800 → "18:00"）
+    numberToTimeString(timeNum) {
+      if (timeNum === undefined || timeNum === null) {
+        console.log('numberToTimeString: 输入为空', timeNum);
+        return null;
+      }
+
+      // 将数字转换为4位字符串，不足补0
+      const numStr = timeNum.toString().padStart(4, '0');
+
+      // 提取小时和分钟
+      const hours = numStr.substring(0, 2);
+      const minutes = numStr.substring(2, 4);
+
+      const result = `${hours}:${minutes}`;
+      console.log('numberToTimeString 转换:', timeNum, '->', result);
+      return result;
+    },
+
+    // 将时间字符串转换为数字格式（"18:00" → 1800）
+    timeStringToNumber(timeStr) {
+      if (!timeStr) {
+        console.log('timeStringToNumber: 输入为空');
+        return null;
+      }
+
+      // 分割小时和分钟
+      const [hours, minutes] = timeStr.split(':');
+
+      // 转换为数字格式
+      const result = parseInt(hours) * 100 + parseInt(minutes);
+      return result;
+    },
+
+    handleSubmit() {
+      const formData = this.$refs.FormConfigRef?.formData || this.formData;
+
+      console.log('提交的表单数据:', formData);
+
+      // 验证闪灯频率（1-30）
+      if (formData.ff) {
+        const ffValue = parseInt(formData.ff);
+        if (isNaN(ffValue) || ffValue < 1 || ffValue > 30) {
+          return Message.error('闪灯频率必须在1-30范围内!');
+        }
+      }
+
+      // 验证亮度（0-100）
+      if (formData.lum) {
+        const lumValue = parseInt(formData.lum);
+        if (isNaN(lumValue) || lumValue < 0 || lumValue > 100) {
+          return Message.error('亮度必须在0-100范围内!');
+        }
+      }
+
+      // 验证亮灯时长（50-500且必须是50的倍数）
+      if (formData.ontime) {
+        const ontimeValue = parseInt(formData.ontime);
+        if (isNaN(ontimeValue) || ontimeValue < 50 || ontimeValue > 500) {
+          return Message.error('亮灯时长必须在50-500范围内!');
+        }
+        if (ontimeValue % 50 !== 0) {
+          return Message.error('亮灯时长必须是50的倍数!');
+        }
+      }
+
+      // 验证灵敏度（0-255）
+      if (formData.cth) {
+        const cthValue = parseInt(formData.cth);
+        if (isNaN(cthValue) || cthValue < 0 || cthValue > 255) {
+          return Message.error('灵敏度必须在0-255范围内!');
+        }
+      }
+
+      // 验证时间格式
+      if (formData.deviceMode == 1) {
+        // 验证时间选择器是否已选择
+        if (!formData.onTimePicker || !formData.offTimePicker) {
+          return Message.error('开灯时间和关灯时间不能为空!');
+        }
+
+        // 确保数字格式已生成
+        if (!formData.onTime) {
+          formData.onTime = this.timeStringToNumber(formData.onTimePicker);
+        }
+
+        if (!formData.offTime) {
+          formData.offTime = this.timeStringToNumber(formData.offTimePicker);
+        }
+
+        if (formData.onTime < 0 || formData.onTime > 2359 ||
+          formData.offTime < 0 || formData.offTime > 2359) {
+          return Message.error('时间必须在0-2359范围内!');
+        }
+      }
+
+      // 验证其他必填字段
+      const requiredFields = ['cmd', 'mode', 'sw', 'ff', 'lum', 'ontime', 'sg', 'cth', 'deviceMode'];
+      for (const field of requiredFields) {
+        const value = formData[field];
+        if (value === undefined || value === null || value === '') {
+          return Message.error(`${this.getFieldLabel(field)}不能为空!`);
+        }
+      }
+
+      this.$emit("update:submitting", true);
+
+      // 准备lampParam数据
+      const lampParamData = {
+        cmd: parseInt(formData.cmd),
+        mode: parseInt(formData.mode),
+        ff: parseInt(formData.ff),
+        lum: parseInt(formData.lum),
+        ontime: parseInt(formData.ontime),
+        sw: formData.sw,
+        sg: formData.sg,
+        cth: parseInt(formData.cth)
+      };
+
+      // 准备deviceSetting数据
+      const deviceSettingData = {
+        mode: parseInt(formData.deviceMode),
+        onTime: formData.onTime || 0,
+        offTime: formData.offTime || 0
+      };
+
+      console.log('发送的数据:', {
+        lampParam: lampParamData,
+        deviceSetting: deviceSettingData
+      });
+
+      const requestBody = {
+
+        params: {
+          list: [this.deviceId],
+          params: {
+            lampParam: lampParamData,
+            deviceSetting: deviceSettingData
+          }
+        }
+
+      };
+      // 发送控制命令
+      request.post(
+        `business/device/functions/${this.deviceId}/setDesired`,
+        requestBody
+      )
+        .then(res => {
+          if (res.code === 200) {
+            this.$emit("update:value", false);
+            Message.success('设备操作成功');
+          } else {
+            Message.error(res.message || '设备操作失败');
+          }
+        })
+        .catch((err) => {
+          console.error('设备操作失败:', err);
+          Message.error('设备操作失败');
+        })
+        .finally(() => {
+          this.$emit("update:submitting", false);
+        });
+    },
+
+    getFieldLabel(field) {
+      const labelMap = {
+        cmd: '模式选择',
+        mode: '亮灯模式',
+        sw: '设备开关',
+        ff: '闪灯频率',
+        lum: '亮度',
+        ontime: '亮灯时长',
+        sg: '灯光颜色',
+        cth: '灵敏度',
+        deviceMode: '阈值开关',
+        onTime: '开灯时间',
+        offTime: '关灯时间'
+      };
+      return labelMap[field] || field;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.DeviceControlDialog {
+  width: 450px;
+  height: 500px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+
+  .tips {
+    font-size: 12px;
+    color: #909399;
+    margin-top: 10px;
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue
index 3383c564..6adf6b38 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue
@@ -1,25 +1,16 @@
 <template>
-  <Dialog v-model="obverseVisible" title="行车诱导" width="470px">
-    <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>
+  <NewDeviceDrivingGuidance
+    v-if="isNewDevice"
+    :visible="internalVisible"
+    :data="data"
+    @close="handleClose"
+  />
+  <OldDeviceDrivingGuidance
+    v-else
+    :visible="internalVisible"
+    :data="data"
+    @close="handleClose"
+  />
 </template>
 
 <script>
@@ -27,28 +18,29 @@ 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 "./components/DeviceControlDialog.vue";
-import {
-  getRoadInfoByStakeMark,
-  getProduct,
-} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+import {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 "./../mixin";
 import LineChart from "../../LineChart/index.vue";
-
+import NewDeviceDrivingGuidance from '@/views/JiHeExpressway/pages/Home/components/HomeDevice/NewDeviceDrivingGuidance.vue';
+import OldDeviceDrivingGuidance from '@/views/JiHeExpressway/pages/Home/components/HomeDevice/OldDeviceDrivingGuidance.vue';
 // 行车诱导
 export default {
   name: "DrivingGuidance",
   mixins: [dialogDelayVisible],
-  provide() {
-    return {
-      requestURL: this.requestURL,
-      updateFormData: this.updateFormData
-    };
+
+    props: {
+      visible: {
+        type: Boolean,
+        default: false,
+      },
+      dialogData: {
+        type: Object,
+        required: true,
+        default: () => ({})
+      }
+
   },
   components: {
     Dialog,
@@ -57,145 +49,51 @@ export default {
     DeviceControlDialog,
     Video,
     LineChart,
+    NewDeviceDrivingGuidance,
+    OldDeviceDrivingGuidance
   },
   data() {
     return {
-      camId: '',
       activeName: "first",
-      deviceControlVisible: false,
+      internalVisible: this.visible,
       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
     };
   },
+  emits: ['update:visible'],
+  computed: {
+    // 判断是否为新设备（以86开头）
+    isNewDevice() {
+
+      return this.data?.iotDeviceId?.startsWith('86');
+    }
+  },
+  methods: {
+    handleClose() {
+      this.internalVisible = false;
+      this.$emit('update:visible', false);
+
+    }
+  },
   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: '济菏高速' };
-
     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: {
-    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>
 
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/DrivingGuidance.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/DrivingGuidance.vue
index 204ba10c..2c17e063 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/DrivingGuidance.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/DrivingGuidance.vue
@@ -1,65 +1,26 @@
 <template>
-    <Dialog v-model="visibleModel"
-     title="行车诱导" width="470px" >
-      <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: {
+  <!-- 根据设备类型分发到不同组件 -->
+  <NewDeviceDrivingGuidance v-if="isNewDevice"
+                            :visible="visible"
+                            :data="data"
+                            @close="$emit('close')" />
+  <OldDeviceDrivingGuidance v-else
+                            :visible="visible"
+                            :data="data"
+                            @close="$emit('close')" />
+</template>
+
+<script>
+import NewDeviceDrivingGuidance from './NewDeviceDrivingGuidance.vue';
+import OldDeviceDrivingGuidance from './OldDeviceDrivingGuidance.vue';
+
+export default {
+  name: 'DrivingGuidance',
+  components: {
+    NewDeviceDrivingGuidance,
+    OldDeviceDrivingGuidance
+  },
+  props: {
     visible: {
       type: Boolean,
       default: true,
@@ -69,200 +30,16 @@
       default: null,
     },
   },
-  emit: ["close"],
+  emits: ['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;
-      }
+    // 判断是否为新设备（以86开头）
+    isNewDevice() {
+      console.log("判断是否为新设备（以86开头）")
+      console.log(this.data)
+
+      console.log(this.data?.iotDeviceId?.startsWith('86'))
+      return this.data?.iotDeviceId?.startsWith('86');
     }
   }
-  </style>
-  
\ No newline at end of file
+};
+</script>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/NewDeviceDrivingGuidance.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/NewDeviceDrivingGuidance.vue
new file mode 100644
index 00000000..3baa7840
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/NewDeviceDrivingGuidance.vue
@@ -0,0 +1,542 @@
+<template>
+  <Dialog v-model="visibleModel" title="行车诱导(新设备)" width="470px">
+    <div class="DrivingGuidance">
+      <Video class="video-stream" :camId="camId" img="智能行车诱导" />
+
+      <ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
+        <ElTabPane label="基本信息" name="first">
+          <div class="device-info">
+            <div class="info-grid">
+              <div class="info-item" v-for="(item, index) in infoList" :key="index">
+                <div class="info-label">{{ item.label }}:</div>
+                <div class="info-value">{{ getInfoValue(item) }}</div>
+              </div>
+            </div>
+
+            <!-- 新设备特有参数 -->
+            <div class="device-setting-section" v-if="deviceParams.deviceMode !== undefined">
+              <div class="section-title">设备设置</div>
+              <div class="setting-grid">
+                <div class="setting-item">
+                  <span class="setting-label">阈值开关:</span>
+                  <span class="setting-value" :class="deviceParams.deviceMode === 1 ? 'on' : 'off'">
+        {{ deviceParams.deviceMode === 1 ? '开启' : '关闭' }}
+      </span>
+                </div>
+                <div class="setting-item">
+                  <span class="setting-label">开灯时间:</span>
+                  <span class="setting-value">{{ formatTime(deviceParams.onTime) }}</span>
+                </div>
+                <div class="setting-item">
+                  <span class="setting-label">关灯时间:</span>
+                  <span class="setting-value">{{ formatTime(deviceParams.offTime) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ElTabPane>
+
+        <ElTabPane label="设备参数" name="second">
+          <div class="device-params">
+            <div class="param-section">
+              <div class="section-title">灯控参数</div>
+              <div class="param-grid">
+                <div class="param-item">
+                  <span class="param-label">模式:</span>
+                  <span class="param-value">{{ getModeText(deviceParams.cmd) }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">亮灯模式:</span>
+                  <span class="param-value">{{ getLightModeText(deviceParams.mode) }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">闪灯频率:</span>
+                  <span class="param-value">{{ deviceParams.ff ? `${deviceParams.ff * 5}次/分钟` : '-' }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">亮度:</span>
+                  <span class="param-value">{{ deviceParams.lum !== undefined ? `${deviceParams.lum}%` : '-' }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">亮灯时长:</span>
+                  <span class="param-value">{{ deviceParams.ontime ? `${deviceParams.ontime}ms` : '-' }}</span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">开关:</span>
+                  <span class="param-value" :class="{ 'on': deviceParams.sw, 'off': !deviceParams.sw }">
+                    {{ deviceParams.sw ? '开启' : '关闭' }}
+                  </span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">颜色:</span>
+                  <span class="param-value" :style="{ color: getColorStyle(deviceParams.sg) }">
+                    {{ getColorText(deviceParams.sg) }}
+                  </span>
+                </div>
+                <div class="param-item">
+                  <span class="param-label">灵敏度:</span>
+                  <span class="param-value">{{ deviceParams.cth !== undefined ? deviceParams.cth : '-' }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </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.deviceState ? '' : 'background-color:grey'">设备操作</Button>
+
+      </div>
+    </div>
+
+    <!-- 新设备控制对话框 -->
+    <NewDeviceControlDialog v-model="deviceControlVisible"
+                            :deviceId="dialogData.iotDeviceId"
+                            :id="dialogData.id"
+                            :deviceType="dialogData.deviceType"
+                            :deviceParams="deviceParams" />
+  </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 LineChart from "../LineChart/index.vue";
+import NewDeviceControlDialog from "../Dialogs/DrivingGuidance/components/NewDeviceControlDialog.vue";
+import request from "@/utils/request";
+import { CameraDirectionEnum, DeviceTypeEnum } from "@screen/utils/enum.js";
+
+export default {
+  name: "NewDeviceDrivingGuidance",
+  components: {
+    Dialog,
+    Button,
+    NewDeviceControlDialog,
+    Video,
+    LineChart,
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  emits: ["close"],
+  computed: {
+    visibleModel: {
+      get() {
+        return this.visible;
+      },
+      set(bool) {
+        this.$emit("close", bool);
+      },
+    },
+    dialogData() {
+      return this.data || {};
+    }
+  },
+  data() {
+    return {
+      camId: '',
+      activeName: "first",
+      deviceControlVisible: false,
+      deviceParams: {},
+
+      infoList: [
+        { label: "设备名称", key: "deviceName" },
+        { label: "设备桩号", key: "stakeMark" },
+        { label: "道路名称", key: "roadName" },
+        { label: "设备方向", key: "direction", enum: "CameraDirectionEnum" },
+        { label: "设备状态", key: "deviceState", enum: "DeviceTypeEnum" },
+        { label: "设备厂商", key: "manufacturer" },
+      ]
+    };
+  },
+  async created() {
+    // 解析camId
+    if (typeof this.dialogData.otherConfig === 'string') {
+      try {
+        const oConfig = JSON.parse(this.dialogData.otherConfig);
+        if (oConfig?.camId) {
+          this.camId = oConfig.camId;
+        }
+      } catch (e) {
+        console.error('解析otherConfig失败:', e);
+      }
+    }
+
+    // 获取设备属性（基本信息）
+    await this.fetchDeviceProperty();
+  },
+  methods: {
+
+
+// 获取设备参数
+    async fetchDeviceProperty() {
+
+        // 按照要求的格式构建请求体
+        const requestBody = {
+          params: {
+            list: [this.dialogData.iotDeviceId]
+          }
+        };
+
+        console.log('发送请求体:', requestBody);
+
+        const lampResponse = await request.post(
+          `business/device/functions/${this.dialogData.iotDeviceId}/getProperty`,
+
+          requestBody
+        );
+
+        if (lampResponse.code === 200 && lampResponse.data) {
+          console.log('lampParam获取成功:', lampResponse.data);
+          this.parseResponseData(lampResponse.data);
+        } else {
+          console.warn('获取lampParam失败:', lampResponse);
+        }
+
+    },
+
+    onControlClick() {
+
+      if (this.dialogData.deviceState) {
+        // 直接使用已经获取的 deviceParams
+        // 确保 deviceParams 已经有数据
+        if (Object.keys(this.deviceParams).length === 0) {
+          console.log('deviceParams 为空，尝试重新获取');
+          // 可以尝试重新获取数据
+          this.fetchDeviceProperty().then(() => {
+            this.deviceControlVisible = true;
+          });
+        } else {
+          console.log('deviceParams 已有数据，打开对话框');
+          this.deviceControlVisible = true;
+        }
+      } else {
+        this.$message.warning('设备状态不可用，无法操作');
+      }
+    },
+    ensureBoolean(value) {
+      if (value === true || value === 'true') return true;
+      if (value === false || value === 'false') return false;
+      return value;
+    },
+
+// 解析响应数据
+    parseResponseData(data) {
+      try {
+        console.log('开始解析数据，数据类型:', typeof data, '值:', data);
+
+        // 如果返回的是数组，取第一个元素
+        let rawData = data;
+        if (Array.isArray(data) && data.length > 0) {
+          rawData = data[0];
+        }
+
+        // 如果数据是字符串，解析为JSON
+        if (typeof rawData === 'string') {
+          try {
+            rawData = JSON.parse(rawData);
+          } catch (parseError) {
+            console.error('JSON解析失败:', parseError);
+            console.error('原始字符串:', rawData);
+            return;
+          }
+        }
+
+
+        if (rawData && rawData.data) {
+          const deviceData = rawData.data;
+          console.log("设备属性数据")
+          console.log(deviceData)
+          // 处理 deviceProperty
+          if (deviceData.deviceProperty && Array.isArray(deviceData.deviceProperty) && deviceData.deviceProperty.length > 0) {
+            const property = deviceData.deviceProperty[0];
+
+            console.log('设备属性数据:', {
+              csq: property.csq,
+              latitude: property.lat,
+              longitude: property.lng,
+              voltage: property.vol
+            });
+          }
+
+          // 处理 lampParam
+          if (deviceData.lampParam && Array.isArray(deviceData.lampParam) && deviceData.lampParam.length > 0) {
+            const lampParam = deviceData.lampParam[0];
+
+            // 存储 lampParam 数据
+            this.deviceParams = {
+              cmd: lampParam.cmd || 1,
+              mode: lampParam.mode || 0,
+              ff: lampParam.ff || 1,
+              lum: lampParam.lum || 50,
+              ontime: lampParam.ontime || 50,
+              sw: this.ensureBoolean(lampParam.sw),
+              sg: lampParam.sg || 'AA',
+              cth: lampParam.cth || 128  // 默认值
+            };
+          }
+
+          // 处理 deviceSetting
+          if (deviceData.deviceSetting && Array.isArray(deviceData.deviceSetting) && deviceData.deviceSetting.length > 0) {
+            const deviceSetting = deviceData.deviceSetting[0];
+
+            // 合并 deviceSetting 数据
+            this.deviceParams = {
+              ...this.deviceParams,
+              deviceMode: deviceSetting.mode || 0,
+              onTime: deviceSetting.onTime || 1800,
+              offTime: deviceSetting.offTime || 600
+            };
+          }
+
+          // 设置设备参数类型
+          this.deviceParamType = 'lampParam';
+
+
+          // 强制更新视图
+          this.$forceUpdate();
+        } else {
+          console.warn('数据格式不正确，没有 data 字段:', rawData);
+        }
+      } catch (error) {
+        console.error('解析数据失败:', error);
+        console.error('原始数据:', data);
+        console.error('错误堆栈:', error.stack);
+      }
+    },
+
+    handleClickTabs(tab) {
+      // tab切换处理
+    },
+
+    getInfoValue(item) {
+      const value = this.dialogData[item.key];
+
+      if (item.enum) {
+        if (item.enum === 'CameraDirectionEnum') {
+          return CameraDirectionEnum[value]?.text || value;
+        } else if (item.enum === 'DeviceTypeEnum') {
+          return DeviceTypeEnum[value]?.text || value;
+        }
+      }
+
+      return value || '-';
+    },
+
+    getModeText(cmd) {
+      const modeMap = { 1: '同步', 2: '流水', 3: '尾迹' };
+      return modeMap[cmd] || '-';
+    },
+
+    getLightModeText(mode) {
+      const lightModeMap = { 0: '常亮', 1: '单闪', 2: '双闪', 3: '三闪' };
+      return lightModeMap[mode] || '-';
+    },
+
+    getColorText(color) {
+      const colorMap = { 'AA': '红色', '55': '黄色' };
+      return colorMap[color] || '-';
+    },
+
+    getColorStyle(color) {
+      const colorStyleMap = { 'AA': '#ff0000', '55': '#ffff00' };
+      return colorStyleMap[color] ? { color: colorStyleMap[color] } : {};
+    },
+
+    formatTime(timeValue) {
+      if (timeValue === undefined || timeValue === null) return '-';
+
+      const timeStr = String(timeValue).padStart(4, '0');
+      const hour = timeStr.substring(0, 2);
+      const minute = timeStr.substring(2, 4);
+
+      return `${hour}:${minute}`;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.DrivingGuidance {
+  width: 420px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+
+  .video-stream {
+    height: 200px;
+    margin-bottom: 15px;
+  }
+
+  .tabs {
+    flex: 1;
+    flex-direction: column;
+
+    ::v-deep {
+      .el-tabs__content {
+        flex: 1;
+        overflow-y: auto;
+
+        .el-tab-pane {
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  .device-info {
+    padding: 10px;
+
+    .info-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+      margin-bottom: 20px;
+
+      .info-item {
+        display: flex;
+        flex-direction: row;  // 改为行布局
+        align-items: center;  // 垂直居中
+        padding: 8px;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 4px;
+
+        .info-label {
+          font-size: 13px;
+          color: #72b6ef;
+          margin-right: 8px;  // 改为右间距
+          margin-bottom: 0;   // 移除底部间距
+        }
+
+        .info-value {
+          font-size: 14px;
+          font-weight: 500;
+        }
+      }
+    }
+
+    .device-setting-section {
+      margin-top: 15px;
+      padding: 12px;
+      background: rgba(255, 255, 255, 0.03);
+      border-radius: 6px;
+      border-left: 3px solid #409EFF;
+
+      .section-title {
+        font-size: 15px;
+        font-weight: bold;
+        margin-bottom: 12px;
+        color: #409EFF;
+      }
+
+      .setting-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 12px;
+
+        .setting-item {
+          flex-direction: column;
+
+          .setting-label {
+            font-size: 13px;
+            color: #a0a0a0;
+            margin-bottom: 4px;
+          }
+
+          .setting-value {
+            font-size: 14px;
+            font-weight: 500;
+
+            &.on {
+              color: #67c23a;
+            }
+
+            &.off {
+              color: #f56c6c;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .device-params {
+    padding: 10px;
+
+    .param-section {
+      .section-title {
+        font-size: 16px;
+        font-weight: bold;
+        margin-bottom: 15px;
+        color: #409EFF;
+        border-left: 4px solid #409EFF;
+        padding-left: 10px;
+      }
+
+      .param-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+
+        .param-item {
+          flex-direction: column;
+          padding: 10px;
+          background: rgba(255, 255, 255, 0.05);
+          border-radius: 4px;
+
+          .param-label {
+            font-size: 13px;
+            color: #72b6ef;
+            margin-bottom: 5px;
+            margin-right: 8px;  // 改为右间距
+
+          }
+
+          .param-value {
+            font-size: 14px;
+            font-weight: 500;
+
+            &.on {
+              color: #67c23a;
+            }
+
+            &.off {
+              color: #f56c6c;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .bottom {
+    margin-top: 12px;
+    display: flex;
+    justify-content: flex-end;
+
+    ::v-deep button {
+      font-size: 14px;
+      padding: 8px 20px;
+
+      &:disabled {
+        background-color: #666 !important;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+</style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/OldDeviceDrivingGuidance.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/OldDeviceDrivingGuidance.vue
new file mode 100644
index 00000000..73bb479f
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/HomeDevice/OldDeviceDrivingGuidance.vue
@@ -0,0 +1,323 @@
+<template>
+  <Dialog v-model="visibleModel" title="行车诱导" width="470px">
+    <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="deviceInfoData" style="gap: 18px" />
+        </ElTabPane>
+        <ElTabPane label="在线率统计" name="third">
+          <LineChart v-if="activeName === 'third'" :productId="deviceInfoData.id" style="height: 180px" />
+        </ElTabPane>
+      </ElTabs>
+
+      <div class="bottom">
+        <Button v-hasPermi="['business:home:drivingGuidance']" @click.native="onControlClick" :style="deviceInfoData.useState ? '' : 'background-color:grey'">设备操作</Button>
+      </div>
+    </div>
+    <DeviceControlDialog v-model="deviceControlVisible" :deviceId="deviceInfoData.iotDeviceId" :id="deviceInfoData.id"
+                         :deviceType="deviceInfoData.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 { dialogDelayVisible } from "../Dialogs/mixin.js";
+import LineChart from "../LineChart/index.vue";
+
+export default {
+  name: "OldDeviceDrivingGuidance",
+  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: () => ({})
+    },
+  },
+  emits: ["close"],
+  computed: {
+    visibleModel: {
+      get() {
+        if (this.visible) this.getData();
+        return this.visible;
+      },
+      set(bool) {
+        console.log('子组件准备关闭，emit close');
+        this.$emit('close');
+        this.$emit("close", bool);
+      },
+    },
+  },
+  data() {
+    return {
+      camId: '',
+      activeName: "first",
+      deviceControlVisible: false,
+      // 重命名为 deviceInfoData，避免与 props.data 冲突
+      deviceInfoData: {
+        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",
+        },
+      ]
+    };
+  },
+  watch: {
+    // 监听 props.data 的变化
+    data: {
+      immediate: true,
+      deep: true,
+      handler(newData) {
+        console.log('收到设备数据:', newData);
+        this.updateDeviceInfoData(newData);
+      }
+    }
+  },
+  async created() {
+    // 初始化设备信息数据
+    this.updateDeviceInfoData(this.data);
+
+    // 等待数据加载完成
+    await delay(100);
+
+    // 解析camId
+    if (typeof this.deviceInfoData.otherConfig === 'string') {
+      try {
+        const oConfig = JSON.parse(this.deviceInfoData.otherConfig);
+        if (oConfig && oConfig.camId) {
+          this.camId = oConfig.camId;
+        }
+      } catch (e) {
+        console.error('解析otherConfig失败:', e);
+      }
+    }
+
+    // 获取产品信息 - 修复 productId 访问
+    if (this.deviceInfoData.productId) {
+      console.log('获取产品信息，productId:', this.deviceInfoData.productId);
+      getProduct(this.deviceInfoData.productId)
+        .then((data) => {
+          console.log('产品信息获取成功:', data);
+          if (data && data.brand) {
+            this.$set(this.deviceInfoData, "brand", data.brand);
+          }
+        })
+        .catch((err) => {
+          console.error('获取产品信息失败:', err);
+        });
+    } else {
+      console.warn('未找到 productId，跳过获取产品信息');
+    }
+
+    // 获取设备状态信息
+    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 });
+    }).catch(err => {
+      console.error('获取设备状态失败:', err);
+    });
+  },
+  methods: {
+    // 更新设备信息数据
+    updateDeviceInfoData(newData) {
+      if (!newData) return;
+
+      console.log('更新设备信息数据:', newData);
+
+      // 合并数据，保持原有的默认值
+      this.deviceInfoData = {
+        ...this.deviceInfoData,
+        ...newData,
+        roadName: '济菏高速'  // 保持默认的道路名称
+      };
+
+      // 确保 iotDeviceId 是有效的
+      if (!this.deviceInfoData.iotDeviceId) {
+        console.error('警告：设备ID为空');
+      } else {
+        console.log('设备ID有效:', this.deviceInfoData.iotDeviceId);
+      }
+    },
+
+    getData() {},
+
+    onControlClick() {
+      if (this.deviceInfoData.useState) {
+        this.deviceControlVisible = true;
+      }
+    },
+
+    updateFormData(formData) {
+      console.log('更新表单数据:', formData);
+
+      if (formData.workMode) {
+        this.$set(this.deviceInfoData, "workMode", inducerModeDic[formData.workMode]);
+      }
+      if (formData.inWorkStatus) {
+        this.$set(this.deviceInfoData, "inWorkStatus", inducerWorkTypeDic[formData.inWorkStatus]);
+      }
+      if (formData.onWorkStatus) {
+        this.$set(this.deviceInfoData, "onWorkStatus", inducerWorkTypeDic[formData.onWorkStatus]);
+      }
+    },
+
+    handleClickTabs() { },
+
+    requestURL(functionId = 52, options = {}) {
+      return new Promise((resolve, reject) => {
+        // 检查设备ID
+        if (!this.deviceInfoData.iotDeviceId) {
+          console.error('请求失败：设备ID为空');
+          reject(new Error('设备ID为空'));
+          return;
+        }
+
+        // 确保 options 是对象，即使是空对象
+        const requestBody = options && Object.keys(options).length > 0 ? options : {};
+
+        console.log(`发送请求:`, {
+          url: `business/device/functions/${this.deviceInfoData.iotDeviceId}/${functionId}`,
+          deviceId: this.deviceInfoData.iotDeviceId,
+          functionId: functionId,
+          body: requestBody
+        });
+
+        request
+          .post(
+            `business/device/functions/${this.deviceInfoData.iotDeviceId}/${functionId}`,
+            requestBody  // 确保传递请求体
+          )
+          .then((result) => {
+            if (result.code != 200) {
+              console.warn('请求返回非200状态:', result);
+              return reject(result);
+            }
+            resolve(result.data[0]);
+          })
+          .catch((err) => {
+            console.error('请求失败:', err);
+            reject(err);
+          });
+      });
+    },
+  },
+};
+</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>