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

组件完成

Browse Source
This commit is contained in:
Free-sss 2025-08-21 21:34:32 +08:00
parent bd0f759c66
commit 60d4e7ee69
2 changed files with 245 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,22 +2,20 @@ import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d'
import { DeviceStatusConfig } from './index' import { DeviceStatusConfig } from './index'
import dataJson from './data.json' import dataJson from './data.json'
export const option = { export const option = {
dataset: dataJson.source, dataset: dataJson.source,
header: ['所属企业', '设备类型', '设备名称'], header: ['所属企业', '设备类型', '设备名称'],
headerTextColor: '#ffffff', headerTextColor: '#7F9DB4',
textColor: '#ffffff', textColor: '#ffffff',
headerBackgroundColor: 'rgba(26, 56, 90, 0.5)', itemBackgroundColor: '#212936',
itemBackgroundColor: 'rgba(15, 35, 62, 0.5)', timeTextColor: '#B75055',
timeTextColor: '#ffffff', timeBgColor: '#562922',
timeBgColor: '#FF4D4F', headerHeight: 30,
headerHeight: 40, itemHeight: 28,
itemHeight: 35, fontSize: 11,
fontSize: 14,
title: '设备实时在线概况', title: '设备实时在线概况',
titleSize: 20, titleSize: 17,
titleColor: '#B4E4FF', titleColor: '#ffffff',
iconColor: '#00E5FF', iconColor: '#00E5FF',
onlineRate: 75, onlineRate: 75,
onlineDevice: 23, onlineDevice: 23,
@ -26,7 +24,11 @@ export const option = {
headerBgColor2: '#003a8c', headerBgColor2: '#003a8c',
legendColors: ['#00E5FF', '#00FF7F', '#FFFFFF'], legendColors: ['#00E5FF', '#00FF7F', '#FFFFFF'],
progressColor: '#00E5FF', progressColor: '#00E5FF',
progressBgColor: '#1A385A' progressBgColor: 'rgba(0, 0, 0, 0.1)',
progressTextColor: '#DDE3E9',
paddingX: 60,
paddingY: -4,
letterSpacing: 1
} }
export default class Config extends PublicConfigClass implements CreateComponentType { export default class Config extends PublicConfigClass implements CreateComponentType {

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

@ -1,67 +1,90 @@
<template> <template>
<SmallBorder>
<div class="go-device-status"> <div class="go-device-status">
<div class="header"> <div class="header">
<div class="header-left"> <div class="header-left" :style="{
<div class="title-icon-bg" :style="{ backgroundColor: option.headerBgColor1 }"> marginLeft:
<svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon> option.paddingX
</div> + 'px',
<div class="title-text-bg" :style="{ backgroundColor: option.headerBgColor2 }"> marginTop:
<span class="title-text" :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span> option.paddingY
</div> + 'px'
</div> }
<div class="header-right"> ">
<div class="legend"> <div class="title-text-bg" :style="{
<div v-for="color in option.legendColors" :key="color" class="legend-item" :style="{ backgroundColor: color }"></div>
}">
<span class="title-text" :style="{
letterSpacing: option.letterSpacing + 'px',
color: option.titleColor, fontSize: option.titleSize + 'px'
}">{{
option.title }}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="status-section"> <div class="status-section">
<div class="online-rate">
<div class="rate-circle-bg"> <div class="rate-circle-bg">
<div <div class="rate-circle"
class="rate-circle" :style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }">
:style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }"
>
<div class="rate-text-wrapper"> <div class="rate-text-wrapper">
<span class="rate-text" :style="{ color: option.progressColor }">{{ option.onlineRate }}</span> <span class="rate-text" :style="{ color: option.progressTextColor }">{{ option.onlineRate }}</span>
<span class="rate-percent" :style="{ color: option.progressColor }">%</span> <span class="rate-percent" :style="{ color: option.progressTextColor }">%</span>
</div> </div>
</div> </div>
</div> </div>
<span class="rate-label">设备在线率</span>
<div class="online-content">
<div class="text-content">
<span class="online-text">
设备在线率
</span>
<div class="online-nums">
<span class="online-num">{{ option.onlineDevice }}</span>
<span class="total-num">/{{ option.totalDevice }}</span>
</div> </div>
</div>
<div class="progress-bar-wrapper"> <div class="progress-bar-wrapper">
<div class="progress-bar" :style="{ backgroundColor: option.progressBgColor }"> <div class="progress-bar" :style="{ backgroundColor: option.progressBgColor }">
<div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }"></div> <div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }">
</div> </div>
</div> </div>
<div class="device-count">
<span class="online">{{ option.onlineDevice }}</span>
<span class="total">/ {{ option.totalDevice }}</span>
</div> </div>
</div> </div>
<div class="table-header" :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }"> </div>
<div v-for="header in option.header" :key="header" class="header-item" :style="{ color: option.headerTextColor, fontSize: option.fontSize + 'px' }"> <div class="table-header" :style="{
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 }} {{ header }}
</div> </div>
<div class="header-item"></div> <div class="header-item"></div>
</div> </div>
<div class="table-body"> <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 v-for="(item, index) in option.dataset" :key="index" class="table-row"
<div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.enterprise }}</div> :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
<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' }">{{
<div class="row-item" :style="{ color: option.textColor, fontSize: option.fontSize + 'px' }">{{ item.deviceName }}</div> 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-wrapper"> <div class="row-item time-wrapper">
<div class="time" :style="{ backgroundColor: option.timeBgColor, color: option.timeTextColor, fontSize: option.fontSize + 'px' }"> <div class="time"
:style="{ backgroundColor: option.timeBgColor, color: option.timeTextColor, fontSize: option.fontSize + 'px' }">
{{ item.time }} {{ item.time }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</SmallBorder>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import SmallBorder from '../SmallBorder/index.vue'
import { PropType, computed } from 'vue' import { PropType, computed } from 'vue'
import { option as configOption } from './config' import { option as configOption } from './config'
@ -76,56 +99,39 @@ const option = computed(() => props.chartConfig.option)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
SmallBorder {
position: relative;
}
.go-device-status { .go-device-status {
position: absolute;
top: 0;
left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #041126; // background-color: #041126;
color: #ffffff; color: #ffffff;
padding: 15px; padding: 10px 15px;
// padding-bottom: 3px;
box-sizing: border-box; box-sizing: border-box;
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: 10px; margin-bottom: 5px;
.header-left {
display: flex;
align-items: center;
.title-icon-bg {
width: 50px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
.title-icon {
font-size: 28px;
}
}
.title-text-bg {
height: 40px;
padding: 0 20px 0 30px;
margin-left: -10px;
display: flex;
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);
}
}
}
.header-right { .header-right {
display: flex; display: flex;
align-items: center; align-items: center;
.legend { .legend {
display: flex; display: flex;
margin-right: 10px; margin-right: 10px;
.legend-item { .legend-item {
width: 15px; width: 15px;
height: 8px; height: 8px;
@ -137,13 +143,12 @@ const option = computed(() => props.chartConfig.option)
.status-section { .status-section {
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
margin-bottom: 15px; margin-bottom: -2px;
padding: 0 10px; padding: 0 10px;
.online-rate {
display: flex;
align-items: center;
margin-right: 15px;
.rate-circle-bg { .rate-circle-bg {
position: relative; position: relative;
width: 60px; width: 60px;
@ -151,6 +156,8 @@ const option = computed(() => props.chartConfig.option)
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding-bottom: 2px;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
@ -160,79 +167,123 @@ const option = computed(() => props.chartConfig.option)
bottom: -5px; bottom: -5px;
border-radius: 50%; border-radius: 50%;
filter: blur(5px); filter: blur(5px);
background: radial-gradient(circle, rgba(0, 229, 255, 0.5), transparent 70%); background: radial-gradient(circle, #0d5585, transparent 60%);
} }
} }
.rate-circle { .rate-circle {
width: 60px; width: 48px;
height: 60px; height: 48px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative; position: relative;
z-index: 1; z-index: 1;
&::before { &::before {
content: ''; content: '';
width: 48px; width: 36px;
height: 48px; height: 36px;
background-color: #041126; background-color: #041126;
border-radius: 50%; border-radius: 50%;
} }
.rate-text-wrapper { .rate-text-wrapper {
position: absolute; position: absolute;
.rate-text { .rate-text {
font-size: 24px; font-size: 12px;
font-weight: bold; font-weight: bold;
} }
.rate-percent { .rate-percent {
font-size: 14px; font-size: 12px;
margin-left: 2px; margin-left: 0px;
} }
} }
} }
.rate-label {
font-size: 16px; .online-content {
margin-top: -5px;
display: flex;
flex-direction: column;
width: 100%;
height: 80%;
justify-content: center;
margin-left: 10px; margin-left: 10px;
.text-content {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
margin-bottom: 2px;
.online-num {
font-size: 16px;
font-weight: bold;
color: #23DEE9;
}
.total-num {
font-size: 16px;
font-weight: bold;
color: #555657;
} }
} }
}
.progress-bar-wrapper { .progress-bar-wrapper {
flex: 1; flex: 1;
} }
.progress-bar { .progress-bar {
width: 100%; width: 100%;
height: 12px; height: 10px;
border-radius: 6px; border-radius: 1px;
overflow: hidden; overflow: hidden;
box-shadow: #082846 0px 0px 0px 2px;
.progress { .progress {
height: 100%; height: 100%;
border-radius: 6px; border-radius: 1px;
} background: linear-gradient(to right, #0A5987, #71D8FE);
}
.device-count {
font-size: 20px;
margin-left: 15px;
.online {
color: #00e5ff;
}
.total {
color: #ffffff;
} }
} }
} }
.table-header { .table-header {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 10px; padding: 0 10px;
border-radius: 5px; border-radius: 1px;
background: linear-gradient(to top, #226493c8, #0f2448);
border-bottom: 2px solid #4da6ff;
.header-item { .header-item {
text-align: left; text-align: left;
padding-left: 10px; padding-left: 10px;
&:nth-child(1) { flex: 2; }
&:nth-child(2) { flex: 2; } &:nth-child(1) {
&:nth-child(3) { flex: 3; } flex: 2;
&:nth-child(4) { flex: 1; } }
&:nth-child(2) {
flex: 2;
}
&:nth-child(3) {
flex: 2;
}
&:nth-child(4) {
flex: 1;
}
} }
} }
@ -240,32 +291,60 @@ const option = computed(() => props.chartConfig.option)
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
margin-top: 5px; margin-top: 5px;
&::-webkit-scrollbar {
display: none;
/* 隐藏滚动条 */
width: 0;
height: 0;
}
scrollbar-width: none;
.table-row { .table-row {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 10px; padding: 0 10px;
margin-bottom: 5px; margin-bottom: 3px;
border-radius: 5px; border-radius: 1px;
border-bottom: 1px solid #29333C;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
.row-item { .row-item {
text-align: left; text-align: left;
padding-left: 10px; padding-left: 10px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
&:nth-child(1) { flex: 2; }
&:nth-child(2) { flex: 2; } &:nth-child(1) {
&:nth-child(3) { flex: 3; } flex: 2;
} }
&:nth-child(2) {
flex: 2;
}
&:nth-child(3) {
flex: 2;
}
&:nth-child(4) {
flex: 1;
}
}
.time-wrapper { .time-wrapper {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
padding-right: 10px; padding-right: 10px;
.time { .time {
padding: 2px 8px; padding: 1px 6px;
border-radius: 5px; border-radius: 5px;
} }
} }