yangle-wangannan
/
gateway-load-center
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat 前台数据展示

master
rouchen 2024-06-03 21:30:44 +08:00
parent a0b6bd758c
commit 360a217220
5 changed files with 80 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/api/connect/connect.js 100644
View File

@ -0,0 +1,15 @@
import request from '@/utils/request'
export function selectCar(){
return request({
url: '/connect/select',
method: 'post'
})
}
export function selectCarList(){
return request({
url: '/connect/selectCar',
method: 'post'
})
}

30
src/views/statistics/node-list/dashboard/PanelGroup.vue
View File

@ -1,6 +1,7 @@
<template>
<el-row :gutter="40" class="panel-group">
<el-col :lg="6" :sm="12" :xs="12" class="card-panel-col">
<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('gatewayNodeSum')">
<div class="card-panel-icon-wrapper icon-people">
<svg-icon class-name="card-panel-icon" icon-class="server"/>
@ -11,7 +12,7 @@
</div>
<count-to
suffix="台"
:duration="3000" :end-val="20" :start-val="0" class="card-panel-num"/>
:duration="3000" :end-val="carNum.gatewayNum" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -26,7 +27,7 @@
</div>
<count-to
suffix="台"
:duration="3000" :end-val="160" :start-val="0" class="card-panel-num"/>
:duration="3000" :end-val="carNum.dataNum" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -41,7 +42,7 @@
</div>
<count-to :decimals="2"
suffix="%"
:duration="3200" :end-val="63.23" :start-val="0" class="card-panel-num"/>
:duration="3200" :end-val="carNum.overallLoad" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -56,7 +57,7 @@
</div>
<count-to
suffix="辆"
:duration="3600" :end-val="13600" :start-val="0" class="card-panel-num"/>
:duration="3600" :end-val="carNum.carSum" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -65,15 +66,30 @@
<script>
import CountTo from 'vue-count-to'
import {selectCar} from "@/api/connect/connect";
export default {
components: {
CountTo
},
data(){
return{
carNum:{}
}
},
created() {
this.selectCarNum()
},
methods: {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
}
},
selectCarNum(){
selectCar().then(res => {
console.log('res',res)
this.carNum= res.data
})
},
}
}
</script>

27
src/views/statistics/overview/dashboard/PanelGroup.vue
View File

@ -7,11 +7,11 @@
</div>
<div class="card-panel-description">
<div class="card-panel-text">
网关收集节点数量
收集节点数量
</div>
<count-to
suffix="台"
:duration="3000" :end-val="20" :start-val="0" class="card-panel-num"/>
:duration="3000" :end-val="carNum.gatewayNum" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -26,7 +26,7 @@
</div>
<count-to
suffix="台"
:duration="3000" :end-val="160" :start-val="0" class="card-panel-num"/>
:duration="3000" :end-val="carNum.dataNum" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -41,7 +41,7 @@
</div>
<count-to :decimals="2"
suffix="%"
:duration="3200" :end-val="63.23" :start-val="0" class="card-panel-num"/>
:duration="3200" :end-val="carNum.overallLoad" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -56,7 +56,7 @@
</div>
<count-to
suffix="辆"
:duration="3600" :end-val="13600" :start-val="0" class="card-panel-num"/>
:duration="3600" :end-val="carNum.carSum" :start-val="0" class="card-panel-num"/>
</div>
</div>
</el-col>
@ -65,15 +65,30 @@
<script>
import CountTo from 'vue-count-to'
import {selectCar} from "@/api/connect/connect";
export default {
components: {
CountTo
},
data(){
return{
carNum:{}
}
},
created() {
this.selectCarNum()
},
methods: {
handleSetLineChartData(type) {
this.$emit('handleSetLineChartData', type)
}
},
selectCarNum(){
selectCar().then(res => {
console.log('res',res)
this.carNum= res.data
})
},
}
}
</script>

26
src/views/statistics/overview/index.vue
View File

@ -57,18 +57,18 @@
<el-row :gutter="32">
<el-col :lg="8" :sm="24" :xs="24">
<div class="chart-wrapper">
<el-tabs v-model="activeTopName" type="card">
<el-tab-pane label="最长在线TOP10" name="最长在线TOP10">
<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">
{{'VIN123456789' + (o - 1) }} <span style="float:right;">{{56 - o}}分钟</span>
{{ + (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">
{{'VIN123456789' + (o - 1) }} <span style="float:right;">2024-4-13 23:06:5{{(10-o)}}</span>
{{ + (o - 1) }} <span style="float:right;">{{ car.timestamp + (o - 1) }}</span>
</div>
</el-card>
</el-tab-pane>
@ -126,6 +126,7 @@ 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 = {
@ -177,9 +178,17 @@ export default {
activeName: 1,
activeTopName: "最长在线TOP10",
value1: true,
value2: true
value2: true,
car:[]
}
},
created() {
this.selectCarList()
},
mounted() {
// 在组件挂载后更新时间戳
this.currentTimestamp = Date.now();
},
methods: {
handleSetLineChartData(type) {
if (type){
@ -188,7 +197,12 @@ export default {
}else {
this.lineChartData.yType = yType[this.formInline.user]
}
},
selectCarList(){
selectCarList().then(res => {
console.log('res',res)
this.car = res.data
})
}
}
}

2
vue.config.js
View File

@ -35,7 +35,7 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080`,
target: `http://127.0.0.1:8082`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''