概述页面
DongZeLiang
parent
4ed5c79003
commit
a431b72f66
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}"/>
|
||||
<div :style="{height:(height + 100)+'px',width:width}">
|
||||
<div :class="className" :style="{height: height+'px',width:width}"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -20,8 +22,8 @@ export default {
|
|||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
type: Number,
|
||||
default: 350
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
|
|
@ -62,10 +64,17 @@ export default {
|
|||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(this.chartData)
|
||||
},
|
||||
setOptions({expectedData, actualData} = {}) {
|
||||
setOptions({dataList, title, yType} = {}) {
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: title,
|
||||
top: 10,
|
||||
textStyle: {
|
||||
height: 100,
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
data: yType,
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
|
|
@ -75,7 +84,7 @@ export default {
|
|||
left: 10,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
top: 60,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
|
|
@ -90,9 +99,6 @@ export default {
|
|||
show: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['expected', 'actual']
|
||||
},
|
||||
series: [{
|
||||
name: 'expected', itemStyle: {
|
||||
normal: {
|
||||
|
|
@ -105,29 +111,9 @@ export default {
|
|||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: expectedData,
|
||||
data: dataList,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
{
|
||||
name: 'actual',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3888fa',
|
||||
lineStyle: {
|
||||
color: '#3888fa',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#f3f8ff'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: actualData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut'
|
||||
}]
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<el-row :gutter="40" class="panel-group">
|
||||
<el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
|
||||
<div class="card-panel" @click="handleSetLineChartData('gatewayNodeSum')">
|
||||
<div class="card-panel-icon-wrapper icon-people">
|
||||
<svg-icon class-name="card-panel-icon" icon-class="server"/>
|
||||
</div>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('messages')">
|
||||
<div class="card-panel" @click="handleSetLineChartData('dataParsingSum')">
|
||||
<div class="card-panel-icon-wrapper icon-message">
|
||||
<svg-icon class-name="card-panel-icon" icon-class="cascader"/>
|
||||
</div>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('purchases')">
|
||||
<div class="card-panel" @click="handleSetLineChartData('overallLoad')">
|
||||
<div class="card-panel-icon-wrapper icon-money">
|
||||
<svg-icon class-name="card-panel-icon" icon-class="validCode"/>
|
||||
</div>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
|
||||
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
|
||||
<div class="card-panel" @click="handleSetLineChartData('vehicleOnlineSum')">
|
||||
<div class="card-panel-icon-wrapper icon-shopping">
|
||||
<svg-icon class-name="card-panel-icon" icon-class="carAlt"/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,46 @@
|
|||
</el-menu>
|
||||
<panel-group @handleSetLineChartData="handleSetLineChartData"/>
|
||||
|
||||
<el-form :inline="true" :model="formInline">
|
||||
<el-form-item label="展示时间区间">
|
||||
<el-select v-model="formInline.user" placeholder="展示时间区间" @change="handleSetLineChartData(undefined)">
|
||||
<el-option label="近7秒" value="近7秒"></el-option>
|
||||
<el-option label="近7分" value="近7分"></el-option>
|
||||
<el-option label="近7小时" value="近7小时"></el-option>
|
||||
<el-option label="近7天" value="近7天"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="刷新机制">
|
||||
<el-select v-model="formInline.region" placeholder="展示时间区间">
|
||||
<el-option label="关闭" value="关闭"></el-option>
|
||||
<el-option label="自动" value="自动"></el-option>
|
||||
<el-option label="5秒" value="5秒"></el-option>
|
||||
<el-option label="10秒" value="10秒"></el-option>
|
||||
<el-option label="30秒" value="30秒"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="400"
|
||||
trigger="hover">
|
||||
<el-collapse v-model="activeName" accordion>
|
||||
<el-collapse-item title="关闭" name="1">
|
||||
<div>不再自动刷新图表数据</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="自动" name="2">
|
||||
<div>根据展示时间区间进行自动刷新</div>
|
||||
<div>近七天、近7小时、近7分：每30秒刷新一次</div>
|
||||
<div>近7秒：每3秒刷新一次</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="其余" name="3">
|
||||
<div>根据选择刷新机制进行自动刷新</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<el-button slot="reference" icon="el-icon-question"></el-button>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<line-chart :chart-data="lineChartData"/>
|
||||
</el-row>
|
||||
|
|
@ -17,17 +57,62 @@
|
|||
<el-row :gutter="32">
|
||||
<el-col :lg="8" :sm="24" :xs="24">
|
||||
<div class="chart-wrapper">
|
||||
<raddar-chart/>
|
||||
<el-tabs v-model="activeTopName" type="card">
|
||||
<el-tab-pane label="最长在线TOP10" name="最长在线TOP10">
|
||||
<el-card class="box-card">
|
||||
<div v-for="o in 10" :key="o" class="text item">
|
||||
{{'VIN123456789' + (o - 1) }} <span style="float:right;">{{56 - o}}分钟</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="最新上线车辆" name="最新上线车辆">
|
||||
<el-card class="box-card">
|
||||
<div v-for="o in 10" :key="o" class="text item">
|
||||
{{'VIN123456789' + (o - 1) }} <span style="float:right;">2024-4-13 23:06:5{{(10-o)}}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="8" :sm="24" :xs="24">
|
||||
<div class="chart-wrapper">
|
||||
<pie-chart/>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>网关节点负载</span>
|
||||
<el-switch
|
||||
style="float: right; display: block"
|
||||
v-model="value1"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#5ab1ef"
|
||||
active-text="正序"
|
||||
inactive-text="倒序">
|
||||
</el-switch>
|
||||
</div>
|
||||
<div v-for="o in 10" :key="o" class="text item">
|
||||
{{'node-gateway-' + (o - 1) }} <span style="float:right;">{{(10-o)}}%</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :lg="8" :sm="24" :xs="24">
|
||||
<div class="chart-wrapper">
|
||||
<bar-chart/>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>网关节点负载</span>
|
||||
<el-switch
|
||||
style="float: right; display: block"
|
||||
v-model="value2"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#5ab1ef"
|
||||
active-text="正序"
|
||||
inactive-text="倒序">
|
||||
</el-switch>
|
||||
</div>
|
||||
<div v-for="o in 10" :key="o" class="text item">
|
||||
{{'node-gateway-' + (o - 1)%5 + "-parsing-" + (o - 1)%7 }} <span style="float:right;">{{(40-o)}}%</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -43,22 +128,34 @@ import RaddarChart from './dashboard/RaddarChart'
|
|||
import PieChart from './dashboard/PieChart'
|
||||
import BarChart from './dashboard/BarChart'
|
||||
|
||||
|
||||
const yType = {
|
||||
"近7秒": ['34:22','34:23','34:24','34:25','34:26','34:27','34:28'],
|
||||
"近7分": ['32', '33', '34', '35', '36', '37', '38'],
|
||||
"近7小时": ['2', '3', '4', '5', '6', '7', '8'],
|
||||
"近7天":['2024-4-12', '2024-4-13', '2024-4-14', '2024-4-15', '2024-4-16', '2024-4-17', '2024-4-18' ],
|
||||
}
|
||||
|
||||
const lineChartData = {
|
||||
newVisitis: {
|
||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 145]
|
||||
gatewayNodeSum: {
|
||||
title: "网关收集节点数量",
|
||||
dataList: [100, 120, 161, 134, 105, 160, 165],
|
||||
yType: yType['近7天']
|
||||
},
|
||||
messages: {
|
||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
||||
actualData: [180, 160, 151, 106, 145, 150, 130]
|
||||
dataParsingSum: {
|
||||
title: "数据解析节点数量",
|
||||
dataList: [200, 192, 120, 144, 160, 130, 140],
|
||||
yType: yType['近7天']
|
||||
},
|
||||
purchases: {
|
||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
||||
actualData: [120, 90, 100, 138, 142, 130, 130]
|
||||
overallLoad: {
|
||||
title: "整体负载",
|
||||
dataList: [80, 100, 121, 104, 105, 90, 100],
|
||||
yType: yType['近7天']
|
||||
},
|
||||
shoppings: {
|
||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
||||
actualData: [120, 82, 91, 154, 162, 140, 130]
|
||||
vehicleOnlineSum: {
|
||||
title: "车辆在线数",
|
||||
dataList: [130, 140, 141, 142, 145, 150, 160],
|
||||
yType: yType['近7天']
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -73,12 +170,26 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
lineChartData: lineChartData.newVisitis
|
||||
lineChartData: lineChartData.gatewayNodeSum,
|
||||
formInline: {
|
||||
user: '近7天',
|
||||
region: '关闭'
|
||||
},
|
||||
activeName: 1,
|
||||
activeTopName: "最长在线TOP10",
|
||||
value1: true,
|
||||
value2: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
if (type){
|
||||
lineChartData[type].yType = yType[this.formInline.user]
|
||||
this.lineChartData = lineChartData[type]
|
||||
}else {
|
||||
this.lineChartData.yType = yType[this.formInline.user]
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -101,4 +212,11 @@ export default {
|
|||
padding: 8px;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue