From d06f7ad0231d5fb029ab8520bf442590d3bab20b Mon Sep 17 00:00:00 2001
From: guonan <guonan201020@163.com>
Date: 星期三, 16 七月 2025 15:29:13 +0800
Subject: [PATCH] 完善监测设备弹窗

---
 src/components/tools/Detail.vue |  134 ++++++++++++++++++++++++++++++++------------
 1 files changed, 97 insertions(+), 37 deletions(-)

diff --git a/src/components/tools/Detail.vue b/src/components/tools/Detail.vue
index ae1f16b..dfa5128 100644
--- a/src/components/tools/Detail.vue
+++ b/src/components/tools/Detail.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="detail" ref="detailRef">
-    <div class="detail-top">{{ detailTitle }}</div>
+    <div class="detail-top" :title="name">{{ detailTitle }}</div>
     <div class="detail-close" @click="closeMsg"></div>
     <div class="detail-context">
       <div v-for="(item, key) in detailList" :key="key" class="detail-item">
@@ -22,61 +22,108 @@
   dialogPositon,
 } from "@/store";
 
+import { hdByDevice } from "@/api/hpApi";
+
 const detailList = ref([]);
 const detailTitle = ref("璁惧璇︽儏");
+const name = ref("");
 function closeMsg() {
   showDeviceDetail.value = false;
   coloseDialog();
 }
+
 // 鐩戞祴璁惧鍏蜂綋淇℃伅
-function handlDeviceDetail() {
-  // const name = deviceDetail.value.deviceForShort;
-  detailTitle.value = deviceDetail.value.deviceForShort;
-  detailList.value = [
-    {
-      name: "璁惧缂栧彿",
-      value:
-        deviceDetail.value.deviceCode || Math.floor(Math.random() * 100000),
-    },
-    {
-      name: "璁惧绫诲瀷",
-      value: deviceDetail.value.type || "",
-    },
-    {
-      name: "瀹夎鏃堕棿",
-      value: "2024-01-15 12:55:18" || deviceDetail.value.startTime,
-    },
-    {
-      name: "鏇存柊鏃堕棿",
-      value: "2025-02-15 8:15:28",
-    },
-    {
-      name: "璁惧浣嶇疆",
-      value: deviceDetail.value.deviceForShort || cityData.listData[0],
-      //   value: deviceDetail.value.name.split("瀛欒儭娌�")[0] || cityData.listData[0],
-    },
-  ];
+async function handlDeviceDetail() {
+  const hdInfo = ref();
+
+  try {
+    const res = await hdByDevice(deviceDetail.value.hdUnifiedCode);
+    hdInfo.value = res.data;
+
+    detailList.value = [
+      {
+        name: "璁惧缂栧彿",
+        value: deviceDetail.value.deviceCode || Math.floor(Math.random() * 100000),
+      },
+      {
+        name: "璁惧绫诲瀷",
+        value: deviceDetail.value.type || deviceDetail.value.deviceTypeName,
+      },
+      {
+        name: "鍏宠仈闅愭偅鐐�",
+        value: deviceDetail.value.hdName,
+      },
+      {
+        name: "缇ゆ祴缇ら槻鍛�",
+        value: hdInfo.value?.groupTestGroupDefenseUserName || "鏆傛棤淇℃伅",
+      },
+      {
+        name: "缇ゆ祴缇ら槻鍛樼數璇�",
+        value: hdInfo.value?.groupTestGroupDefenseMobile || "鏆傛棤淇℃伅",
+      },
+    ];
+
+    detailTitle.value = deviceDetail.value.deviceForShort;
+  } catch (err) {
+    console.error("鑾峰彇 hdInfo 澶辫触", err);
+    detailList.value = [
+      {
+        name: "缇ゆ祴缇ら槻鍛�",
+        value: "鎺ュ彛寮傚父"
+      },
+      {
+        name: "缇ゆ祴缇ら槻鍛樼數璇�",
+        value: "鎺ュ彛寮傚父"
+      }
+    ];
+  }
 }
+
 // 闅愭偅鐐瑰叿浣撲俊鎭�
 function handleDistrictDetail() {
   const name = deviceDetail.value.hdName;
   detailTitle.value = name;
   detailList.value = [
+    // {}
     {
-      name: "闅愭偅绫诲瀷",
+      name: "鐏惧绫诲瀷",
       value: deviceDetail.value.disasterType || "娉ョ煶娴�",
     },
     {
-      name: "涓荤绉戦暱",
-      value: "寮犳旦",
+      name: "濞佽儊瀵硅薄",
+      value: deviceDetail.value.threatObj || "灞呮皯鐐�",
     },
     {
-      name: "涓荤闀囬暱",
-      value: deviceDetail.value.supervisorAlcaldeUserName,
+      name: "瑙勬ā绛夌骇",
+      value: deviceDetail.value.disasterGrade || "灏忓瀷",
     },
     {
-      name: "缇ゆ祴缇ら槻",
+      name: "闄╂儏绛夌骇",
+      value: deviceDetail.value.riskLevel || "灏忓瀷",
+    },
+    {
+      name: "濞佽儊浜烘暟",
+      value: deviceDetail.value.threatPersonNum || "0",
+    },
+    {
+      name: "濞佽儊鎴锋暟",
+      value: deviceDetail.value.threatHouseNum || "0",
+    },
+    {
+      name: "濞佽儊鎴挎暟",
+      value: deviceDetail.value.threatRoomNum || "0",
+    },
+    {
+      name: "鏄惁娌荤悊",
+      value: deviceDetail.value.isGovern || "鍚�",
+    },
+    {
+      name: "缇ゆ祴缇ら槻鍛�",
       value: deviceDetail.value.groupTestGroupDefenseUserName,
+    },
+    {
+      name: "缇ゆ祴缇ら槻鍛樼數璇�",
+      value: deviceDetail.value.groupTestGroupDefenseMobile,
     },
     {
       name: "闅愭偅浣嶇疆",
@@ -91,8 +138,10 @@
 function loadClassNameDetail() {
   if (className.value == "device") {
     handlDeviceDetail();
+    name.value = deviceDetail.value.deviceName;
   } else if (className.value == "district") {
     handleDistrictDetail();
+    name.value = deviceDetail.value.hdName;
   }
 }
 const detailRef = ref(null);
@@ -155,11 +204,18 @@
   left: 1.25rem;
   font-weight: 700;
   font-size: 1.125rem;
-  font-weight: 700;
   color: #fff;
   line-height: 2.5rem;
-  width: 16.875rem;
+  width: 16.875rem; /* 瀹瑰櫒瀹藉害鍥哄畾鎴栭檺鍒� */
   cursor: pointer;
+
+  /* 瓒呭嚭闅愯棌 + 鐪佺暐鍙� */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  /* 鍙�夛細娣诲姞杩囨浮鍔ㄧ敾 */
+  transition: all 0.3s ease;
 }
 
 .detail-close {
@@ -184,6 +240,8 @@
   top: 3.8rem;
   left: 1.25rem;
   width: 21.875rem;
+  overflow-y: auto;
+  height: 63%;
 }
 
 .detail-item {
@@ -193,9 +251,11 @@
   margin-left: 0.625rem;
 }
 .detail-name {
-  width: 100px;
+  display: inline-block; /* 鍏抽敭 */
+  max-width: 100%; /* 闃叉婧㈠嚭 */
   font-weight: 700;
   color: #94e0c4;
+  white-space: nowrap; /* 鍙�夛細闃叉鏂囧瓧鎹㈣ */
   &::after {
     content: "锛�";
   }

--
Gitblit v1.9.3