234
This commit is contained in:
parent
c48a6e4aa2
commit
f6cbff7e08
@ -8,23 +8,28 @@ export const option = {
|
|||||||
header: ['所属企业', '设备类型', '设备名称'],
|
header: ['所属企业', '设备类型', '设备名称'],
|
||||||
headerTextColor: '#ffffff',
|
headerTextColor: '#ffffff',
|
||||||
textColor: '#ffffff',
|
textColor: '#ffffff',
|
||||||
headerBackgroundColor: '#1A385A',
|
headerBackgroundColor: 'rgba(26, 56, 90, 0.5)',
|
||||||
itemBackgroundColor: '#0F233E',
|
itemBackgroundColor: 'rgba(15, 35, 62, 0.5)',
|
||||||
timeColor: '#FF4D4F',
|
timeColor: '#FF4D4F',
|
||||||
headerHeight: 40,
|
headerHeight: 40,
|
||||||
itemHeight: 35,
|
itemHeight: 35,
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
title: '设备实时在线概况',
|
title: '设备实时在线概况',
|
||||||
titleSize: 18,
|
titleSize: 20,
|
||||||
titleColor: '#ffffff',
|
titleColor: '#ffffff',
|
||||||
iconColor: '#00E5FF',
|
iconColor: '#00E5FF',
|
||||||
onlineRate: 75,
|
onlineRate: 75,
|
||||||
onlineDevice: 23,
|
onlineDevice: 23,
|
||||||
totalDevice: 100
|
totalDevice: 100,
|
||||||
|
headerBgColor1: '#0059c9',
|
||||||
|
headerBgColor2: '#003a8c',
|
||||||
|
legendColors: ['#00E5FF', '#00FF7F', '#FFFFFF'],
|
||||||
|
progressColor: '#00E5FF',
|
||||||
|
progressBgColor: '#1A385A'
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||||
public key = DeviceStatusConfig.key
|
public key = DeviceStatusConfig.key
|
||||||
public chartConfig = DeviceStatusConfig
|
public chartConfig = DeviceStatusConfig
|
||||||
public option = option
|
public option = option
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,29 +1,50 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="go-device-status">
|
<div class="go-device-status">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title">
|
<div class="header-left">
|
||||||
<svg-icon icon-class="rocket" class="title-icon" :style="{ color: option.iconColor }"></svg-icon>
|
<div class="title-icon-bg" :style="{ backgroundColor: option.headerBgColor1 }">
|
||||||
<span :style="{ color: option.titleColor, fontSize: option.titleSize + 'px' }">{{ option.title }}</span>
|
<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>
|
||||||
|
</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>
|
</div>
|
||||||
<div class="status-section">
|
<div class="status-section">
|
||||||
<div class="online-rate">
|
<div class="online-rate">
|
||||||
<div class="rate-circle">
|
<div class="rate-circle-bg">
|
||||||
<span class="rate-text">{{ option.onlineRate }}%</span>
|
<div
|
||||||
|
class="rate-circle"
|
||||||
|
: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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="rate-label">设备在线率</span>
|
<span class="rate-label">设备在线率</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="progress-bar">
|
<div class="progress-bar-wrapper">
|
||||||
<div class="progress" :style="{ width: option.onlineRate + '%' }"></div>
|
<div class="progress-bar" :style="{ backgroundColor: option.progressBgColor }">
|
||||||
</div>
|
<div class="progress" :style="{ width: option.onlineRate + '%', backgroundColor: option.progressColor }"></div>
|
||||||
<div class="device-count">
|
</div>
|
||||||
<span>{{ option.onlineDevice }}</span> / <span>{{ option.totalDevice }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="table-header" :style="{ backgroundColor: option.headerBackgroundColor, height: option.headerHeight + 'px' }">
|
<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' }">
|
<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>
|
</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" :style="{ backgroundColor: option.itemBackgroundColor, height: option.itemHeight + 'px' }">
|
||||||
@ -56,21 +77,62 @@ const option = computed(() => props.chartConfig.option)
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: #0F233E;
|
background-color: #041126;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
padding: 10px;
|
padding: 15px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 10px;
|
justify-content: space-between;
|
||||||
.title {
|
margin-bottom: 15px;
|
||||||
|
|
||||||
|
.header-left {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.title-icon {
|
.title-icon-bg {
|
||||||
font-size: 24px;
|
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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.legend {
|
||||||
|
display: flex;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
|
.legend-item {
|
||||||
|
width: 15px;
|
||||||
|
height: 8px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.device-count {
|
||||||
|
font-size: 20px;
|
||||||
|
.online {
|
||||||
|
color: #00e5ff;
|
||||||
|
}
|
||||||
|
.total {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -78,73 +140,126 @@ const option = computed(() => props.chartConfig.option)
|
|||||||
.status-section {
|
.status-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 15px;
|
||||||
.online-rate {
|
.online-rate {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-right: 15px;
|
||||||
|
.rate-circle-bg {
|
||||||
|
position: relative;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -5px;
|
||||||
|
left: -5px;
|
||||||
|
right: -5px;
|
||||||
|
bottom: -5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(5px);
|
||||||
|
background: radial-gradient(circle, rgba(0, 229, 255, 0.5), transparent 70%);
|
||||||
|
}
|
||||||
|
}
|
||||||
.rate-circle {
|
.rate-circle {
|
||||||
width: 50px;
|
width: 60px;
|
||||||
height: 50px;
|
height: 60px;
|
||||||
border: 2px solid #00E5FF;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-right: 10px;
|
position: relative;
|
||||||
.rate-text {
|
z-index: 1;
|
||||||
color: #00E5FF;
|
&::before {
|
||||||
font-size: 16px;
|
content: '';
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background-color: #041126;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.rate-text-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
color: #00e5ff;
|
||||||
|
.rate-text {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.rate-percent {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-left: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.rate-label {
|
.rate-label {
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.progress-bar {
|
.progress-bar-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 10px;
|
}
|
||||||
background-color: #1A385A;
|
.progress-bar {
|
||||||
border-radius: 5px;
|
width: 100%;
|
||||||
margin: 0 10px;
|
height: 12px;
|
||||||
|
border-radius: 6px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.progress {
|
.progress {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: #00E5FF;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.device-count {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-header {
|
.table-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
border-radius: 5px;
|
||||||
.header-item {
|
.header-item {
|
||||||
flex: 1;
|
text-align: left;
|
||||||
text-align: center;
|
padding-left: 10px;
|
||||||
|
&:nth-child(1) { flex: 2; }
|
||||||
|
&:nth-child(2) { flex: 2; }
|
||||||
|
&:nth-child(3) { flex: 3; }
|
||||||
|
&:nth-child(4) { flex: 1; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-body {
|
.table-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
margin-top: 5px;
|
||||||
.table-row {
|
.table-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
border-bottom: 1px solid #1A385A;
|
margin-bottom: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
.row-item {
|
.row-item {
|
||||||
flex: 1;
|
text-align: left;
|
||||||
text-align: center;
|
padding-left: 10px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
&: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 {
|
&.time {
|
||||||
color: #FF4D4F;
|
color: #ff4d4f;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user