lucas/go-view-fetch
1
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sss

Browse Source
This commit is contained in:
lucashu 2025-08-20 20:21:13 +08:00
parent f6cbff7e08
commit fbaedbd97d
2 changed files with 41 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,13 +10,14 @@ export const option = {
textColor: '#ffffff',
headerBackgroundColor: 'rgba(26, 56, 90, 0.5)',
itemBackgroundColor: 'rgba(15, 35, 62, 0.5)',
timeColor: '#FF4D4F',
timeTextColor: '#ffffff',
timeBgColor: '#FF4D4F',
headerHeight: 40,
itemHeight: 35,
fontSize: 14,
title: '设备实时在线概况',
titleSize: 20,
titleColor: '#ffffff',
titleColor: '#B4E4FF',
iconColor: '#00E5FF',
onlineRate: 75,
onlineDevice: 23,

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

@ -6,17 +6,13 @@
<svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
</div>
<div class="title-text-bg" :style="{ backgroundColor: option.headerBgColor2 }">
<span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
<span class="title-text" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
</div>
</div>
<div class="header-right">
<div class="legend">
<div v-for="color in option.legendColors" :key="color" class="legend-item" :style="{ backgroundColor: color }"></div>
</div>
<div class="device-count">
<span class="online">{{ option.onlineDevice }}</span>
<span class="total">/ {{ option.totalDevice }}</span>
</div>
</div>
</div>
<div class="status-section">
@ -27,8 +23,8 @@
:style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }"
>
<div class="rate-text-wrapper">
<span class="rate-text">{{ option.onlineRate }}</span>
<span class="rate-percent">%</span>
<span class="rate-text" :style="{ color: option.progressColor }">{{ option.onlineRate }}</span>
<span class="rate-percent" :style="{ color: option.progressColor }">%</span>
</div>
</div>
</div>
@ -39,6 +35,10 @@
<div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }"></div>
</div>
</div>
<div class="device-count">
<span class="online">{{ option.onlineDevice }}</span>
<span class="total">/ {{ 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' }">
@ -51,7 +51,11 @@
<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 class="row-item time-wrapper">
<div class="time" :style="{ backgroundColor: option.timeBgColor, color: option.timeTextColor, fontSize: option.fontSize + 'px' }">
{{ item.time }}
</div>
</div>
</div>
</div>
</div>
@ -86,7 +90,7 @@ const option = computed(() => props.chartConfig.option)
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
margin-bottom: 10px;
.header-left {
display: flex;
@ -110,6 +114,9 @@ const option = computed(() => props.chartConfig.option)
align-items: center;
justify-content: center;
clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
.title-text {
text-shadow: 0 0 10px rgba(180, 228, 255, 0.8);
}
}
}
@ -125,15 +132,6 @@ const option = computed(() => props.chartConfig.option)
margin-left: 5px;
}
}
.device-count {
font-size: 20px;
.online {
color: #00e5ff;
}
.total {
color: #ffffff;
}
}
}
}
@ -141,6 +139,7 @@ const option = computed(() => props.chartConfig.option)
display: flex;
align-items: center;
margin-bottom: 15px;
padding: 0 10px;
.online-rate {
display: flex;
align-items: center;
@ -182,13 +181,12 @@ const option = computed(() => props.chartConfig.option)
}
.rate-text-wrapper {
position: absolute;
color: #00e5ff;
.rate-text {
font-size: 22px;
font-size: 24px;
font-weight: bold;
}
.rate-percent {
font-size: 12px;
font-size: 14px;
margin-left: 2px;
}
}
@ -211,6 +209,16 @@ const option = computed(() => props.chartConfig.option)
border-radius: 6px;
}
}
.device-count {
font-size: 20px;
margin-left: 15px;
.online {
color: #00e5ff;
}
.total {
color: #ffffff;
}
}
}
.table-header {
@ -250,13 +258,15 @@ const option = computed(() => props.chartConfig.option)
&:nth-child(1) { flex: 2; }
&:nth-child(2) { flex: 2; }
&:nth-child(3) { flex: 3; }
&:nth-child(4) {
flex: 1;
text-align: right;
padding-right: 10px;
}
&.time {
color: #ff4d4f;
}
.time-wrapper {
flex: 1;
display: flex;
justify-content: flex-end;
padding-right: 10px;
.time {
padding: 2px 8px;
border-radius: 5px;
}
}
}