From c65c056c8f1bac8a92fcd31725c23340321fb754 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com>
Date: Mon, 3 Mar 2025 21:52:36 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E3=80=91IoT:=20=E8=AE=BE=E5=A4=87=E8=AF=A6=E6=83=85=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9EMQTT=E8=BF=9E=E6=8E=A5=E5=8F=82=E6=95=B0=E6=9F=A5?=
 =?UTF-8?q?=E7=9C=8B=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/iot/device/device/index.ts            | 12 +++++++++
 .../device/detail/DeviceDetailsInfo.vue       | 27 ++++++++++++++-----
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/api/iot/device/device/index.ts b/src/api/iot/device/device/index.ts
index f44786b5..3b8a8838 100644
--- a/src/api/iot/device/device/index.ts
+++ b/src/api/iot/device/device/index.ts
@@ -72,6 +72,13 @@ export interface IotDeviceDownstreamReqVO {
   data: any // 请求参数
 }
 
+// MQTT连接参数 VO
+export interface MqttConnectionParamsVO {
+  mqttClientId: string // MQTT 客户端 ID
+  mqttUsername: string // MQTT 用户名
+  mqttPassword: string // MQTT 密码
+}
+
 // 设备 API
 export const DeviceApi = {
   // 查询设备分页
@@ -152,5 +159,10 @@ export const DeviceApi = {
   // 查询设备日志分页
   getDeviceLogPage: async (params: any) => {
     return await request.get({ url: `/iot/device/log/page`, params })
+  },
+
+  // 获取设备MQTT连接参数
+  getMqttConnectionParams: async (deviceId: number) => {
+    return await request.get({ url: `/iot/device/mqtt-connection-params`, params: { deviceId } })
   }
 }
diff --git a/src/views/iot/device/device/detail/DeviceDetailsInfo.vue b/src/views/iot/device/device/detail/DeviceDetailsInfo.vue
index 2a87cdd6..b0ac49e4 100644
--- a/src/views/iot/device/device/detail/DeviceDetailsInfo.vue
+++ b/src/views/iot/device/device/detail/DeviceDetailsInfo.vue
@@ -63,8 +63,11 @@
         </el-input>
       </el-form-item>
       <el-form-item label="passwd">
-        <el-input v-model="mqttParams.mqttPassword" readonly type="password">
+        <el-input v-model="mqttParams.mqttPassword" readonly :type="passwordVisible ? 'text' : 'password'">
           <template #append>
+            <el-button @click="passwordVisible = !passwordVisible" type="primary">
+              <Icon :icon="passwordVisible ? 'ph:eye-slash' : 'ph:eye'" />
+            </el-button>
             <el-button @click="copyToClipboard(mqttParams.mqttPassword)" type="primary">
               <Icon icon="ph:copy" />
             </el-button>
@@ -85,6 +88,7 @@ import { DICT_TYPE } from '@/utils/dict'
 import { ProductVO } from '@/api/iot/product/product'
 import { formatDate } from '@/utils/formatTime'
 import { DeviceVO } from '@/api/iot/device/device'
+import { DeviceApi, MqttConnectionParamsVO } from '@/api/iot/device/device/index'
 
 const message = useMessage() // 消息提示
 
@@ -92,6 +96,7 @@ const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }
 const emit = defineEmits(['refresh']) // 定义 Emits
 
 const mqttDialogVisible = ref(false) // 定义 MQTT 弹框的可见性
+const passwordVisible = ref(false) // 定义密码可见性状态
 const mqttParams = ref({
   mqttClientId: '',
   mqttUsername: '',
@@ -109,13 +114,21 @@ const copyToClipboard = async (text: string) => {
 }
 
 /** 打开 MQTT 参数弹框的方法 */
-const openMqttParams = () => {
-  mqttParams.value = {
-    mqttClientId: device.mqttClientId || 'N/A',
-    mqttUsername: device.mqttUsername || 'N/A',
-    mqttPassword: device.mqttPassword || 'N/A'
+const openMqttParams = async () => {
+  try {
+    const res = await DeviceApi.getMqttConnectionParams(device.id)
+    
+    // 根据API响应结构正确获取数据
+    mqttParams.value = {
+      mqttClientId: res.mqttClientId || 'N/A',
+      mqttUsername: res.mqttUsername || 'N/A',
+      mqttPassword: res.mqttPassword || 'N/A'
+    }
+    mqttDialogVisible.value = true
+  } catch (error) {
+    console.error('获取MQTT连接参数出错：', error)
+    message.error('获取MQTT连接参数失败，请检查网络连接或联系管理员')
   }
-  mqttDialogVisible.value = true
 }
 
 /** 关闭 MQTT 弹框的方法 */