From a7fd5ea264c34d38436268f421d7ea093ffaf153 Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Mon, 9 Feb 2026 17:04:47 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E5=A4=A7=E5=B1=8F-=E4=BA=A7?=
 =?UTF-8?q?=E7=BA=BF=E8=BF=90=E8=A1=8C=E7=9C=8B=E6=9D=BF-=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E6=A8=A1=E5=9D=97=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/report/dashboardList/index.vue      | 19 ----
 .../report/dashboardPage/dashboard1/index.vue | 99 ++++++++++++++++++-
 2 files changed, 97 insertions(+), 21 deletions(-)

diff --git a/src/views/report/dashboardList/index.vue b/src/views/report/dashboardList/index.vue
index 07dbe56e..8c155d67 100644
--- a/src/views/report/dashboardList/index.vue
+++ b/src/views/report/dashboardList/index.vue
@@ -373,25 +373,6 @@ const handlePreview = (item: DashboardItem) => {
   const queryParams = new URLSearchParams()
   if (item.id) queryParams.append('goviewId', String(item.id))
   if (item.orgId) queryParams.append('orgId', String(item.orgId))
-  if (item.type === '1') {
-    let deviceIdsStr = ''
-    if (Array.isArray(item.deviceIdsList) && item.deviceIdsList.length) {
-      deviceIdsStr = item.deviceIdsList
-        .map((g) => g.deviceId)
-        .filter((id) => id !== undefined && id !== null)
-        .join(',')
-    } else if (Array.isArray(item.deviceIds)) {
-      deviceIdsStr = item.deviceIds
-        .map((g: any) => g?.deviceId)
-        .filter((id: any) => id !== undefined && id !== null)
-        .join(',')
-    } else if (typeof item.deviceIds === 'string') {
-      deviceIdsStr = item.deviceIds
-    }
-    if (deviceIdsStr && deviceIdsStr.trim()) {
-      queryParams.append('deviceIds', deviceIdsStr.trim())
-    }
-  }
   const queryString = queryParams.toString()
   const url = router.resolve(path + (queryString ? `?${queryString}` : '')).href
   window.open(url, '_blank')
diff --git a/src/views/report/dashboardPage/dashboard1/index.vue b/src/views/report/dashboardPage/dashboard1/index.vue
index c01749fa..cc1c845e 100644
--- a/src/views/report/dashboardPage/dashboard1/index.vue
+++ b/src/views/report/dashboardPage/dashboard1/index.vue
@@ -27,11 +27,25 @@
             <div class="center-shell">
               <img class="dashboard-center-image" src="@/assets/imgs/dashboard_img.png" alt="dashboard" />
               <!-- 上面4个 -->
-              <div v-for="(item, index) in topDevices" :key="'top-' + index" class="device-card top-card" :style="{ left: getTopLeft(index) }">
+              <div
+                v-for="(item, index) in topDevices"
+                :key="'top-' + index"
+                class="device-card top-card"
+                :class="`device-card--${getDeviceStatusType(item.operatingStatus)}`"
+                :style="{ left: getTopLeft(index) }"
+              >
                 <div class="device-header">
                   <div class="header-left">
                     <span class="device-dot"></span>
                     <span class="device-name" :title="item.deviceName">{{ item.deviceName }}</span>
+                    <el-tag
+                      size="small"
+                      effect="plain"
+                      class="device-status-tag"
+                      :class="`device-status-tag--${getDeviceStatusType(item.operatingStatus)}`"
+                    >
+                      {{ getDeviceStatusText(item.operatingStatus) }}
+                    </el-tag>
                   </div>
                   <div class="header-right">
                     <span class="device-id">ID: {{ item.deviceId }}</span>
@@ -45,11 +59,25 @@
                 </div>
               </div>
               <!-- 下面4个 -->
-              <div v-for="(item, index) in bottomDevices" :key="'bottom-' + index" class="device-card bottom-card" :style="{ left: getBottomLeft(index) }">
+              <div
+                v-for="(item, index) in bottomDevices"
+                :key="'bottom-' + index"
+                class="device-card bottom-card"
+                :class="`device-card--${getDeviceStatusType(item.operatingStatus)}`"
+                :style="{ left: getBottomLeft(index) }"
+              >
                 <div class="device-header">
                   <div class="header-left">
                     <span class="device-dot"></span>
                     <span class="device-name" :title="item.deviceName">{{ item.deviceName }}</span>
+                    <el-tag
+                      size="small"
+                      effect="plain"
+                      class="device-status-tag"
+                      :class="`device-status-tag--${getDeviceStatusType(item.operatingStatus)}`"
+                    >
+                      {{ getDeviceStatusText(item.operatingStatus) }}
+                    </el-tag>
                   </div>
                   <div class="header-right">
                     <span class="device-id">ID: {{ item.deviceId }}</span>
@@ -111,6 +139,7 @@ interface DeviceCardData {
   deviceName: string
   deviceId: number
   attributes: DeviceAttribute[]
+  operatingStatus?: string
 }
 
 const topDevices = ref<DeviceCardData[]>([])
@@ -137,6 +166,7 @@ const loadDeviceAttributes = async () => {
       return {
         deviceName: d.deviceName || 'Device',
         deviceId: d.deviceId,
+        operatingStatus: d.operatingStatus,
         attributes: (d.attributes || []).map((attr: any) => ({
           attributeName: attr.attributeName || '-',
           addressValue: attr.addressValue,
@@ -152,6 +182,21 @@ const loadDeviceAttributes = async () => {
   }
 }
 
+const getDeviceStatusType = (status?: string) => {
+  if (!status) return 'info'
+  const s = String(status).toLowerCase()
+  if (s.includes('故障') || s === 'fault') return 'danger'
+  if (s.includes('待机') || s === 'standby') return 'primary'
+  if (s.includes('运行') || s === 'run' || s === 'running') return 'success'
+  if (s.includes('离线') || s === 'offline') return 'info'
+  return 'info'
+}
+
+const getDeviceStatusText = (status?: string) => {
+  if (!status) return '离线'
+  return status
+}
+
 onMounted(() => {
   loadDeviceAttributes()
 })
@@ -301,6 +346,26 @@ main {
   box-shadow: 0 0 10px rgb(0 0 0 / 50%);
 }
 
+.device-card--success {
+  border-color: var(--green);
+  box-shadow: 0 0 10px rgb(34 197 94 / 45%);
+}
+
+.device-card--primary {
+  border-color: var(--primary);
+  box-shadow: 0 0 10px rgb(56 189 248 / 45%);
+}
+
+.device-card--danger {
+  border-color: var(--danger);
+  box-shadow: 0 0 10px rgb(239 68 68 / 45%);
+}
+
+.device-card--info {
+  border-color: var(--muted);
+  box-shadow: 0 0 10px rgb(148 163 184 / 35%);
+}
+
 .top-card {
   top: 5%;
 }
@@ -348,6 +413,36 @@ main {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.device-status-tag {
+  margin-left: 6px;
+  padding: 0 6px;
+  font-size: 11px;
+  border-radius: 999px;
+}
+
+.device-status-tag--success {
+  --el-tag-text-color: var(--green);
+  --el-tag-border-color: rgb(34 197 94 / 60%);
+  --el-tag-bg-color: rgb(22 163 74 / 15%);
+}
+
+.device-status-tag--primary {
+  --el-tag-text-color: var(--primary);
+  --el-tag-border-color: rgb(56 189 248 / 60%);
+  --el-tag-bg-color: rgb(37 99 235 / 18%);
+}
+
+.device-status-tag--danger {
+  --el-tag-text-color: var(--danger);
+  --el-tag-border-color: rgb(239 68 68 / 60%);
+  --el-tag-bg-color: rgb(185 28 28 / 18%);
+}
+
+.device-status-tag--info {
+  --el-tag-text-color: var(--muted);
+  --el-tag-border-color: rgb(148 163 184 / 60%);
+  --el-tag-bg-color: rgb(30 41 59 / 60%);
+}
 
 .device-id {
   font-size: 12px;