12231

src/packages/components/Charts/MyComponents/DeviceStatus/config.ts

@@ -5,16 +5,22 @@ 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,
+  iconColor: '#00E5FF',
-  labelColor: '#B0E0E6',
+  onlineRate: 75,
-  labelSize: 16,
+  onlineDevice: 23,
-  valueColor: '#00E5FF',
+  totalDevice: 100
-  valueSize: 32,
-  unitColor: '#B0E0E6',
-  unitSize: 14,
-  borderColor: '#4A90E2'
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

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-form-item label="字体大小">
-      <n-input-number v-model:value="option.labelSize" />
+      <n-input-number v-model:value="option.fontSize" />
     </n-form-item>
-    <n-form-item label="数值大小">
+    <n-form-item label="表头高度">
-      <n-input-number v-model:value="option.valueSize" />
+      <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>

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" },
+      "enterprise": "所属企业所属企业",
-    { "label": "离线设备", "value": 8, "unit": "个", "icon": "exclamation-circle" },
+      "deviceType": "设备类型",
-    { "label": "故障设备", "value": 2, "unit": "个", "icon": "tool" }
+      "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"
+    }
   ]
 }

src/packages/components/Charts/MyComponents/DeviceStatus/index.ts

@@ -1,10 +1,11 @@
 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,

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="header">
-    <div class="status-grid">
+      <div class="title">
-      <div v-for="(item, index) in option.dataset" :key="index" class="status-item" :style="{ borderColor: option.borderColor }">
+        <svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
-        <div class="item-icon-wrapper">
+        <span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
-          <svg-icon :icon-class="item.icon" class="item-icon"></svg-icon>
+      </div>
-        </div>
+    </div>
-        <div class="item-details">
+    <div class="status-section">
-          <div class="item-label" :style="{ color: option.labelColor, fontSize: option.labelSize + 'px' }">{{ item.label }}</div>
+      <div class="online-rate">
-          <div class="item-value">
+        <div class="rate-circle">
-            <span :style="{ color: option.valueColor, fontSize: option.valueSize + 'px' }">{{ item.value }}</span>
+          <span class="rate-text">{{ option.onlineRate }}%</span>
-            <span :style="{ color: option.unitColor, fontSize: option.unitSize + 'px' }">{{ item.unit }}</span>
-          </div>
         </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,58 +54,95 @@ 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 {
+  .header {
-    font-weight: bold;
-    margin-bottom: 20px;
-  }
-
-  .status-grid {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    grid-gap: 20px;
-  }
-
-  .status-item {
     display: flex;
     align-items: center;
-    background-color: rgba(26, 56, 90, 0.5);
+    margin-bottom: 10px;
-    border: 1px solid;
+    .title {
-    padding: 15px;
+      display: flex;
-    border-radius: 5px;
+      align-items: center;
-  }
+      .title-icon {
-
+        font-size: 24px;
-  .item-icon-wrapper {
+        margin-right: 10px;
-    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;
     }
   }
 
-  .item-details {
+  .status-section {
-    .item-label {
+    display: flex;
-      margin-bottom: 5px;
+    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 {
+    .progress-bar {
-      span:first-child {
+      flex: 1;
-        font-weight: bold;
+      height: 10px;
-        margin-right: 5px;
+      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;
+        }
       }
     }
   }