From 503939f58144f5994d2e4482b8a2e1e05ef6ba22 Mon Sep 17 00:00:00 2001
From: lucashu <6125220@qq.com>
Date: Wed, 20 Aug 2025 16:58:08 +0800
Subject: [PATCH] 12231

---
 .../MyComponents/DeviceStatus/config.ts       |  26 +--
 .../MyComponents/DeviceStatus/config.vue      |  22 ++-
 .../MyComponents/DeviceStatus/data.json       |  36 +++-
 .../Charts/MyComponents/DeviceStatus/index.ts |   5 +-
 .../MyComponents/DeviceStatus/index.vue       | 167 ++++++++++++------
 5 files changed, 178 insertions(+), 78 deletions(-)

diff --git a/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts b/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
index 38562ce..e668b83 100644
--- a/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
+++ b/src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
@@ -5,20 +5,26 @@ import dataJson from './data.json'
 
 export const option = {
   dataset: dataJson.source,
-  title: '智慧园区',
+  header: ['所属企业', '设备类型', '设备名称'],
+  headerTextColor: '#ffffff',
+  textColor: '#ffffff',
+  headerBackgroundColor: '#1A385A',
+  itemBackgroundColor: '#0F233E',
+  timeColor: '#FF4D4F',
+  headerHeight: 40,
+  itemHeight: 35,
+  fontSize: 14,
+  title: '设备实时在线概况',
+  titleSize: 18,
   titleColor: '#ffffff',
-  titleSize: 22,
-  labelColor: '#B0E0E6',
-  labelSize: 16,
-  valueColor: '#00E5FF',
-  valueSize: 32,
-  unitColor: '#B0E0E6',
-  unitSize: 14,
-  borderColor: '#4A90E2'
+  iconColor: '#00E5FF',
+  onlineRate: 75,
+  onlineDevice: 23,
+  totalDevice: 100
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = DeviceStatusConfig.key
   public chartConfig = DeviceStatusConfig
   public option = option
-}
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/MyComponents/DeviceStatus/config.vue b/src/packages/components/Charts/MyComponents/DeviceStatus/config.vue
index f4479f1..b55c8c9 100644
--- a/src/packages/components/Charts/MyComponents/DeviceStatus/config.vue
+++ b/src/packages/components/Charts/MyComponents/DeviceStatus/config.vue
@@ -6,11 +6,23 @@
     <n-form-item label="标题大小">
       <n-input-number v-model:value="option.titleSize" />
     </n-form-item>
-    <n-form-item label="标签大小">
-      <n-input-number v-model:value="option.labelSize" />
+    <n-form-item label="字体大小">
+      <n-input-number v-model:value="option.fontSize" />
     </n-form-item>
-    <n-form-item label="数值大小">
-      <n-input-number v-model:value="option.valueSize" />
+    <n-form-item label="表头高度">
+      <n-input-number v-model:value="option.headerHeight" />
+    </n-form-item>
+    <n-form-item label="行高度">
+      <n-input-number v-model:value="option.itemHeight" />
+    </n-form-item>
+    <n-form-item label="在线率">
+      <n-input-number v-model:value="option.onlineRate" />
+    </n-form-item>
+    <n-form-item label="在线设备">
+      <n-input-number v-model:value="option.onlineDevice" />
+    </n-form-item>
+    <n-form-item label="总设备">
+      <n-input-number v-model:value="option.totalDevice" />
     </n-form-item>
   </div>
 </template>
@@ -25,4 +37,4 @@ defineProps({
     required: true
   }
 })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/packages/components/Charts/MyComponents/DeviceStatus/data.json b/src/packages/components/Charts/MyComponents/DeviceStatus/data.json
index c920014..7b91fd7 100644
--- a/src/packages/components/Charts/MyComponents/DeviceStatus/data.json
+++ b/src/packages/components/Charts/MyComponents/DeviceStatus/data.json
@@ -1,8 +1,34 @@
 {
   "source": [
-    { "label": "设备总数", "value": 108, "unit": "个", "icon": "database" },
-    { "label": "在线设备", "value": 100, "unit": "个", "icon": "wifi" },
-    { "label": "离线设备", "value": 8, "unit": "个", "icon": "exclamation-circle" },
-    { "label": "故障设备", "value": 2, "unit": "个", "icon": "tool" }
+    {
+      "enterprise": "所属企业所属企业",
+      "deviceType": "设备类型",
+      "deviceName": "设备名称设备名称",
+      "time": "1h"
+    },
+    {
+      "enterprise": "所属企业所属企业",
+      "deviceType": "设备类型",
+      "deviceName": "设备名称设备名称",
+      "time": "1D 2h"
+    },
+    {
+      "enterprise": "所属企业所属企业",
+      "deviceType": "设备类型",
+      "deviceName": "设备名称设备名称",
+      "time": "2h"
+    },
+    {
+      "enterprise": "所属企业所属企业",
+      "deviceType": "设备类型",
+      "deviceName": "设备名称设备名称",
+      "time": "2h"
+    },
+    {
+      "enterprise": "所属企业所属企业",
+      "deviceType": "设备类型",
+      "deviceName": "设备名称设备名称",
+      "time": "1D 2h"
+    }
   ]
-}
+}
\ No newline at end of file
diff --git a/src/packages/components/Charts/MyComponents/DeviceStatus/index.ts b/src/packages/components/Charts/MyComponents/DeviceStatus/index.ts
index bcf9ed1..b8ec037 100644
--- a/src/packages/components/Charts/MyComponents/DeviceStatus/index.ts
+++ b/src/packages/components/Charts/MyComponents/DeviceStatus/index.ts
@@ -1,14 +1,15 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
 export const DeviceStatusConfig: ConfigType = {
   key: 'DeviceStatus',
   chartKey: 'VDeviceStatus',
   conKey: 'VCDeviceStatus',
-  title: '设备状态',
+  title: '设备在线概况',
   category: 'MyComponents',
   categoryName: '自定义组件',
   package: PackagesCategoryEnum.CHARTS,
   chartFrame: ChartFrameEnum.COMMON,
   image: 'device_status.png'
 }
-export default DeviceStatusConfig
+export default DeviceStatusConfig
\ No newline at end of file
diff --git a/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue b/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
index d572e74..7d85ff8 100644
--- a/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
+++ b/src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
@@ -1,18 +1,36 @@
 <template>
   <div class="go-device-status">
-    <div class="title" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</div>
-    <div class="status-grid">
-      <div v-for="(item, index) in option.dataset" :key="index" class="status-item" :style="{ borderColor: option.borderColor }">
-        <div class="item-icon-wrapper">
-          <svg-icon :icon-class="item.icon" class="item-icon"></svg-icon>
-        </div>
-        <div class="item-details">
-          <div class="item-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ item.label }}</div>
-          <div class="item-value">
-            <span :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{ item.value }}</span>
-            <span :style="{ color: option.unitColor, fontSize: option.unitSize + 'px' }">{{ item.unit }}</span>
-          </div>
+    <div class="header">
+      <div class="title">
+        <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
+        <span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
+      </div>
+    </div>
+    <div class="status-section">
+      <div class="online-rate">
+        <div class="rate-circle">
+          <span class="rate-text">{{ option.onlineRate }}%</span>
         </div>
+        <span class="rate-label">设备在线率</span>
+      </div>
+      <div class="progress-bar">
+        <div class="progress" :style="{ width: option.onlineRate + '%' }"></div>
+      </div>
+      <div class="device-count">
+        <span>{{ option.onlineDevice }}</span> / <span>{{ option.totalDevice }}</span>
+      </div>
+    </div>
+    <div class="table-header" :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }">
+      <div v-for="header in option.header" :key="header" class="header-item" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }">
+        {{ header }}
+      </div>
+    </div>
+    <div class="table-body">
+      <div v-for="(item, index) in option.dataset" :key="index" class="table-row" :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
+        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.enterprise }}</div>
+        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceType }}</div>
+        <div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceName }}</div>
+        <div class="row-item time" :style="{ color: option.timeColor, fontSize: option.fontSize + 'px' }">{{ item.time }}</div>
       </div>
     </div>
   </div>
@@ -36,60 +54,97 @@ const option = computed(() => props.chartConfig.option)
 .go-device-status {
   width: 100%;
   height: 100%;
-  background-color: #0F1C3D;
-  padding: 20px;
-  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  align-items: center;
+  background-color: #0F233E;
+  color: #ffffff;
+  padding: 10px;
+  box-sizing: border-box;
 
-  .title {
-    font-weight: bold;
-    margin-bottom: 20px;
-  }
-
-  .status-grid {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: 20px;
-  }
-
-  .status-item {
+  .header {
     display: flex;
     align-items: center;
-    background-color: rgba(26, 56, 90, 0.5);
-    border: 1px solid;
-    padding: 15px;
-    border-radius: 5px;
-  }
-
-  .item-icon-wrapper {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    background-color: rgba(0, 229, 255, 0.2);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 15px;
-
-    .item-icon {
-      font-size: 28px;
-      color: #00E5FF;
+    margin-bottom: 10px;
+    .title {
+      display: flex;
+      align-items: center;
+      .title-icon {
+        font-size: 24px;
+        margin-right: 10px;
+      }
     }
   }
 
-  .item-details {
-    .item-label {
-      margin-bottom: 5px;
+  .status-section {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    .online-rate {
+      display: flex;
+      align-items: center;
+      .rate-circle {
+        width: 50px;
+        height: 50px;
+        border: 2px solid #00E5FF;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 10px;
+        .rate-text {
+          color: #00E5FF;
+          font-size: 16px;
+        }
+      }
+      .rate-label {
+        font-size: 14px;
+      }
     }
-    .item-value {
-      span:first-child {
-        font-weight: bold;
-        margin-right: 5px;
+    .progress-bar {
+      flex: 1;
+      height: 10px;
+      background-color: #1A385A;
+      border-radius: 5px;
+      margin: 0 10px;
+      overflow: hidden;
+      .progress {
+        height: 100%;
+        background-color: #00E5FF;
+      }
+    }
+    .device-count {
+      font-size: 14px;
+    }
+  }
+
+  .table-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+    .header-item {
+      flex: 1;
+      text-align: center;
+    }
+  }
+
+  .table-body {
+    flex: 1;
+    overflow-y: auto;
+    .table-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 10px;
+      border-bottom: 1px solid #1A385A;
+      .row-item {
+        flex: 1;
+        text-align: center;
+        &.time {
+          color: #FF4D4F;
+        }
       }
     }
   }
 }
-</style>
+</style>
\ No newline at end of file