forked from lucas/go-view-fetch
组件完成
This commit is contained in:
parent
bd0f759c66
commit
60d4e7ee69
@ -2,22 +2,20 @@ import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { DeviceStatusConfig } from './index'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const option = {
|
||||
dataset: dataJson.source,
|
||||
header: ['所属企业', '设备类型', '设备名称'],
|
||||
headerTextColor: '#ffffff',
|
||||
headerTextColor: '#7F9DB4',
|
||||
textColor: '#ffffff',
|
||||
headerBackgroundColor: 'rgba(26, 56, 90, 0.5)',
|
||||
itemBackgroundColor: 'rgba(15, 35, 62, 0.5)',
|
||||
timeTextColor: '#ffffff',
|
||||
timeBgColor: '#FF4D4F',
|
||||
headerHeight: 40,
|
||||
itemHeight: 35,
|
||||
fontSize: 14,
|
||||
itemBackgroundColor: '#212936',
|
||||
timeTextColor: '#B75055',
|
||||
timeBgColor: '#562922',
|
||||
headerHeight: 30,
|
||||
itemHeight: 28,
|
||||
fontSize: 11,
|
||||
title: '设备实时在线概况',
|
||||
titleSize: 20,
|
||||
titleColor: '#B4E4FF',
|
||||
titleSize: 17,
|
||||
titleColor: '#ffffff',
|
||||
iconColor: '#00E5FF',
|
||||
onlineRate: 75,
|
||||
onlineDevice: 23,
|
||||
@ -26,7 +24,11 @@ export const option = {
|
||||
headerBgColor2: '#003a8c',
|
||||
legendColors: ['#00E5FF', '#00FF7F', '#FFFFFF'],
|
||||
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 {
|
||||
|
||||
@ -1,67 +1,90 @@
|
||||
<template>
|
||||
<SmallBorder>
|
||||
<div class="go-device-status">
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<div class="title-icon-bg" :style="{ backgroundColor: option.headerBgColor1 }">
|
||||
<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 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 class="header-left" :style="{
|
||||
marginLeft:
|
||||
option.paddingX
|
||||
+ 'px',
|
||||
marginTop:
|
||||
option.paddingY
|
||||
+ 'px'
|
||||
}
|
||||
">
|
||||
<div class="title-text-bg" :style="{
|
||||
|
||||
}">
|
||||
<span class="title-text" :style="{
|
||||
letterSpacing: option.letterSpacing + 'px',
|
||||
color: option.titleColor, fontSize: option.titleSize + 'px'
|
||||
}">{{
|
||||
option.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-section">
|
||||
<div class="online-rate">
|
||||
<div class="rate-circle-bg">
|
||||
<div
|
||||
class="rate-circle"
|
||||
:style="{ background: `conic-gradient(${option.progressColor} 0% ${option.onlineRate}%, ${option.progressBgColor} ${option.onlineRate}% 100%)` }"
|
||||
>
|
||||
<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" :style="{ color: option.progressColor }">{{ option.onlineRate }}</span>
|
||||
<span class="rate-percent" :style="{ color: option.progressColor }">%</span>
|
||||
<span class="rate-text" :style="{ color: option.progressTextColor }">{{ option.onlineRate }}</span>
|
||||
<span class="rate-percent" :style="{ color: option.progressTextColor }">%</span>
|
||||
</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 class="progress-bar-wrapper">
|
||||
<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 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' }">
|
||||
</div>
|
||||
<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 }}
|
||||
</div>
|
||||
<div class="header-item"></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 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-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 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SmallBorder>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SmallBorder from '../SmallBorder/index.vue'
|
||||
import { PropType, computed } from 'vue'
|
||||
import { option as configOption } from './config'
|
||||
|
||||
@ -76,56 +99,39 @@ const option = computed(() => props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
SmallBorder {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.go-device-status {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #041126;
|
||||
// background-color: #041126;
|
||||
color: #ffffff;
|
||||
padding: 15px;
|
||||
padding: 10px 15px;
|
||||
// padding-bottom: 3px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
margin-right: 10px;
|
||||
|
||||
.legend-item {
|
||||
width: 15px;
|
||||
height: 8px;
|
||||
@ -137,13 +143,12 @@ const option = computed(() => props.chartConfig.option)
|
||||
|
||||
.status-section {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: -2px;
|
||||
padding: 0 10px;
|
||||
.online-rate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 15px;
|
||||
|
||||
.rate-circle-bg {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
@ -151,6 +156,8 @@ const option = computed(() => props.chartConfig.option)
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 2px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -160,79 +167,123 @@ const option = computed(() => props.chartConfig.option)
|
||||
bottom: -5px;
|
||||
border-radius: 50%;
|
||||
filter: blur(5px);
|
||||
background: radial-gradient(circle, rgba(0, 229, 255, 0.5), transparent 70%);
|
||||
background: radial-gradient(circle, #0d5585, transparent 60%);
|
||||
}
|
||||
}
|
||||
|
||||
.rate-circle {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background-color: #041126;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.rate-text-wrapper {
|
||||
position: absolute;
|
||||
|
||||
.rate-text {
|
||||
font-size: 24px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rate-percent {
|
||||
font-size: 14px;
|
||||
margin-left: 2px;
|
||||
font-size: 12px;
|
||||
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;
|
||||
|
||||
.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 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
border-radius: 6px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
overflow: hidden;
|
||||
box-shadow: #082846 0px 0px 0px 2px;
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
.device-count {
|
||||
font-size: 20px;
|
||||
margin-left: 15px;
|
||||
.online {
|
||||
color: #00e5ff;
|
||||
}
|
||||
.total {
|
||||
color: #ffffff;
|
||||
border-radius: 1px;
|
||||
background: linear-gradient(to right, #0A5987, #71D8FE);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
border-radius: 1px;
|
||||
background: linear-gradient(to top, #226493c8, #0f2448);
|
||||
border-bottom: 2px solid #4da6ff;
|
||||
|
||||
|
||||
.header-item {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
&:nth-child(1) { flex: 2; }
|
||||
&:nth-child(2) { flex: 2; }
|
||||
&:nth-child(3) { flex: 3; }
|
||||
&:nth-child(4) { flex: 1; }
|
||||
|
||||
&:nth-child(1) {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
&: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;
|
||||
overflow-y: auto;
|
||||
margin-top: 5px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
/* 隐藏滚动条 */
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
scrollbar-width: none;
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 3px;
|
||||
border-radius: 1px;
|
||||
border-bottom: 1px solid #29333C;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.row-item {
|
||||
text-align: left;
|
||||
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(1) {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.time-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 10px;
|
||||
|
||||
.time {
|
||||
padding: 2px 8px;
|
||||
padding: 1px 6px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user