zS/go-view-fetch
1
0
Fork 0
forked from lucas/go-view-fetch
Code Pull Requests Activity

12231

Browse Source
This commit is contained in:
lucashu 2025-08-20 16:58:08 +08:00
parent f9af50d44a
commit 503939f581
5 changed files with 178 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/packages/components/Charts/MyComponents/DeviceStatus/config.ts
View File

@ -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,
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 {

20
src/packages/components/Charts/MyComponents/DeviceStatus/config.vue
View File

@ -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>

34
src/packages/components/Charts/MyComponents/DeviceStatus/data.json
View File

@ -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"
}
]
}

3
src/packages/components/Charts/MyComponents/DeviceStatus/index.ts
View File

@ -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,

165
src/packages/components/Charts/MyComponents/DeviceStatus/index.vue
View File

@ -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,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 {
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;
}
}
}
}