236 lines
7.3 KiB
Vue
236 lines
7.3 KiB
Vue
<template>
|
||
<div class="dashboard-editor-container">
|
||
<el-menu :default-active="'1'" class="el-menu-demo" mode="horizontal">
|
||
<el-menu-item index="1">
|
||
<router-link to="/overview" style="padding: 10px 0">概述</router-link>
|
||
</el-menu-item>
|
||
<el-menu-item index="2">
|
||
<router-link to="/node/list" style="padding: 10px 0">节点列表</router-link>
|
||
</el-menu-item>
|
||
</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>
|
||
|
||
<el-row :gutter="32">
|
||
<el-col :lg="8" :sm="24" :xs="24">
|
||
<div class="chart-wrapper">
|
||
<el-tabs v-model="car" 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">
|
||
{{ + (o - 1) }} <span style="float:right;">{{ 55- 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">
|
||
{{ + (o - 1) }} <span style="float:right;">{{ car.timestamp + (o - 1) }}</span>
|
||
</div>
|
||
</el-card>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</el-col>
|
||
<el-col :lg="8" :sm="24" :xs="24">
|
||
<div class="chart-wrapper">
|
||
<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">
|
||
<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>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import PanelGroup from './dashboard/PanelGroup'
|
||
import LineChart from './dashboard/LineChart'
|
||
import RaddarChart from './dashboard/RaddarChart'
|
||
import PieChart from './dashboard/PieChart'
|
||
import BarChart from './dashboard/BarChart'
|
||
import {selectCarList} from "@/api/connect/connect";
|
||
|
||
|
||
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 = {
|
||
gatewayNodeSum: {
|
||
title: "网关收集节点数量",
|
||
dataList: [100, 120, 161, 134, 105, 160, 165],
|
||
yType: yType['近7天']
|
||
},
|
||
dataParsingSum: {
|
||
title: "数据解析节点数量",
|
||
dataList: [200, 192, 120, 144, 160, 130, 140],
|
||
yType: yType['近7天']
|
||
},
|
||
overallLoad: {
|
||
title: "整体负载",
|
||
dataList: [80, 100, 121, 104, 105, 90, 100],
|
||
yType: yType['近7天']
|
||
},
|
||
vehicleOnlineSum: {
|
||
title: "车辆在线数",
|
||
dataList: [130, 140, 141, 142, 145, 150, 160],
|
||
yType: yType['近7天']
|
||
}
|
||
}
|
||
|
||
export default {
|
||
name: 'overview',
|
||
components: {
|
||
PanelGroup,
|
||
LineChart,
|
||
RaddarChart,
|
||
PieChart,
|
||
BarChart
|
||
},
|
||
data() {
|
||
return {
|
||
lineChartData: lineChartData.gatewayNodeSum,
|
||
formInline: {
|
||
user: '近7天',
|
||
region: '关闭'
|
||
},
|
||
activeName: 1,
|
||
activeTopName: "最长在线TOP10",
|
||
value1: true,
|
||
value2: true,
|
||
car:[]
|
||
}
|
||
},
|
||
created() {
|
||
this.selectCarList()
|
||
},
|
||
mounted() {
|
||
// 在组件挂载后更新时间戳
|
||
this.currentTimestamp = Date.now();
|
||
},
|
||
methods: {
|
||
handleSetLineChartData(type) {
|
||
if (type){
|
||
lineChartData[type].yType = yType[this.formInline.user]
|
||
this.lineChartData = lineChartData[type]
|
||
}else {
|
||
this.lineChartData.yType = yType[this.formInline.user]
|
||
}
|
||
},
|
||
selectCarList(){
|
||
selectCarList().then(res => {
|
||
console.log('res',res)
|
||
this.car = res.data
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.dashboard-editor-container {
|
||
background-color: rgb(240, 242, 245);
|
||
position: relative;
|
||
|
||
.chart-wrapper {
|
||
background: #fff;
|
||
padding: 16px 16px 0;
|
||
margin-bottom: 32px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.chart-wrapper {
|
||
padding: 8px;
|
||
}
|
||
}
|
||
.text {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.item {
|
||
margin-bottom: 18px;
|
||
}
|
||
</style>
|