feat: 负载中心服务器节点负载信息展示
parent
a0b6bd758c
commit
4d0fb8ff69
|
|
@ -0,0 +1,22 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
export function loadCenterStatistics() {
|
||||
return request({
|
||||
url: '/loadcenter/LoadCenterStatistics',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getVehicleList() {
|
||||
return request({
|
||||
url: '/loadcenter/GetVehicleList',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function getMqttServerList(sort) {
|
||||
return request({
|
||||
url: '/loadcenter/GetMqttServerList?sort=' + sort,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
<count-to
|
||||
suffix="台"
|
||||
:duration="3000" :end-val="20" :start-val="0" class="card-panel-num"/>
|
||||
:duration="3000" :end-val="LoadCenterStatistics.gatewayNodeCount" :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="10" :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="LoadCenterStatistics.entiretyLoad" :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="LoadCenterStatistics.vehicleCount" :start-val="0" class="card-panel-num"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -65,12 +65,26 @@
|
|||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
import {loadCenterStatistics} from "@/api/vehicle/vehicle";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CountTo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
LoadCenterStatistics: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadCenterStatistics()
|
||||
},
|
||||
methods: {
|
||||
loadCenterStatistics(){
|
||||
loadCenterStatistics().then(res => {
|
||||
this.LoadCenterStatistics = res.data
|
||||
})
|
||||
},
|
||||
handleSetLineChartData(type) {
|
||||
this.$emit('handleSetLineChartData', type)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@
|
|||
<panel-group/>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="isShowInfo ? 8 : 24" style="height: 725px; overflow-x: auto">
|
||||
<el-col :span="isShowInfo ? 24 : 8" v-for="nodeInfo in nodeList" >
|
||||
<el-card class="box-card" :key="nodeInfo.nodeId">
|
||||
<el-col :span="isShowInfo ? 24 : 8" v-for="mqttServer in MqttServerList" >
|
||||
<el-card class="box-card" :key="mqttServer.broker">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>节点名称：{{nodeInfo.nodeId}}</span>
|
||||
<span>节点名称：{{mqttServer.topic}}</span>
|
||||
<el-button style="float: right; padding: 3px 0"
|
||||
@click="showNodeInfo(nodeInfo)"
|
||||
@click="showNodeInfo(mqttServer)"
|
||||
type="text">查看详情</el-button>
|
||||
</div>
|
||||
<el-descriptions class="margin-top" :column="4" border>
|
||||
|
|
@ -29,15 +29,15 @@
|
|||
</el-descriptions>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8">
|
||||
<el-progress type="dashboard" :percentage="nodeInfo.cpu" :color="colors"></el-progress>
|
||||
<el-progress type="dashboard" :percentage="mqttServer.cpuusage" :color="colors"></el-progress>
|
||||
<div style="margin-left: 45px; width: 35px;">CPU</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-progress type="dashboard" :percentage="nodeInfo.memory" :color="colors"></el-progress>
|
||||
<el-progress type="dashboard" :percentage="mqttServer.jvmusage" :color="colors"></el-progress>
|
||||
<div style="margin-left: 45px; width: 35px;">内存</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-progress type="dashboard" :percentage="nodeInfo.load" :color="colors"></el-progress>
|
||||
<el-progress type="dashboard" :percentage="mqttServer.nodeLoad" :color="colors"></el-progress>
|
||||
<div style="margin-left: 45px; width: 35px;">负载</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -76,6 +76,7 @@
|
|||
|
||||
<script>
|
||||
import PanelGroup from './dashboard/PanelGroup'
|
||||
import {getMqttServerList} from "@/api/vehicle/vehicle";
|
||||
export default {
|
||||
name: "nodeList",
|
||||
components: {
|
||||
|
|
@ -95,13 +96,20 @@ export default {
|
|||
nodeInfoActive: "vehicle",
|
||||
nodeInfo: {
|
||||
|
||||
}
|
||||
},
|
||||
MqttServerList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initNodeList()
|
||||
this.getMqttServerList()
|
||||
},
|
||||
methods: {
|
||||
getMqttServerList(){
|
||||
getMqttServerList(true).then(res => {
|
||||
this.MqttServerList = res.data
|
||||
})
|
||||
},
|
||||
showNodeInfo(nodeInfo){
|
||||
this.nodeInfo = nodeInfo
|
||||
this.isShowInfo = true
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
<count-to
|
||||
suffix="台"
|
||||
:duration="3000" :end-val="20" :start-val="0" class="card-panel-num"/>
|
||||
:duration="3000" :end-val="LoadCenterStatistics.gatewayNodeCount" :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="10" :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="LoadCenterStatistics.entiretyLoad" :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="LoadCenterStatistics.vehicleCount" :start-val="0" class="card-panel-num"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -65,12 +65,26 @@
|
|||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
import {loadCenterStatistics} from "@/api/vehicle/vehicle";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CountTo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
LoadCenterStatistics: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadCenterStatistics()
|
||||
},
|
||||
methods: {
|
||||
loadCenterStatistics(){
|
||||
loadCenterStatistics().then(res => {
|
||||
this.LoadCenterStatistics = res.data
|
||||
})
|
||||
},
|
||||
handleSetLineChartData(type) {
|
||||
this.$emit('handleSetLineChartData', type)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,15 +60,15 @@
|
|||
<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 v-for="vehicle in VehicleList" :key="vehicle.vin" class="text item">
|
||||
{{vehicle.vin}} <span style="float:right;">{{vehicle.onlineTime}}</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 v-for="vehicle in VehicleList" :key="vehicle.vin" class="text item">
|
||||
{{vehicle.vin}} <span style="float:right;">{{(vehicle.time)}}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
|
|
@ -89,8 +89,8 @@
|
|||
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 v-for="mqttServer in MqttServerList" :key="mqttServer.broker" class="text item">
|
||||
{{mqttServer.topic}} <span style="float:right;">{{mqttServer.nodeLoad}}%</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
<div class="chart-wrapper">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>网关节点负载</span>
|
||||
<span>网关解析节点负载</span>
|
||||
<el-switch
|
||||
style="float: right; display: block"
|
||||
v-model="value2"
|
||||
|
|
@ -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 { getMqttServerList, getVehicleList} from "@/api/vehicle/vehicle";
|
||||
|
||||
|
||||
const yType = {
|
||||
|
|
@ -159,6 +160,14 @@ const lineChartData = {
|
|||
}
|
||||
|
||||
export default {
|
||||
watch: {
|
||||
'value1': {
|
||||
handler(val) {
|
||||
console.log(val)
|
||||
this.getMqttServerList(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
name: 'overview',
|
||||
components: {
|
||||
PanelGroup,
|
||||
|
|
@ -177,10 +186,44 @@ export default {
|
|||
activeName: 1,
|
||||
activeTopName: "最长在线TOP10",
|
||||
value1: true,
|
||||
value2: true
|
||||
value2: true,
|
||||
VehicleList: [],
|
||||
MqttServerList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getVehicleList()
|
||||
this.getMqttServerList()
|
||||
},
|
||||
methods: {
|
||||
getMqttServerList(){
|
||||
getMqttServerList(this.value1).then(res => {
|
||||
this.MqttServerList = res.data
|
||||
})
|
||||
},
|
||||
//计算上线时间
|
||||
getTimePassed(timestamp) {
|
||||
const now = new Date();
|
||||
const past = new Date(timestamp);
|
||||
let diff = now.getTime() - past.getTime();
|
||||
|
||||
const days = Math.floor(diff / 86400000);
|
||||
diff %= 86400000;
|
||||
const hours = Math.floor(diff / 3600000);
|
||||
diff %= 3600000;
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
|
||||
return `${days}天${hours}小时${minutes}分钟`;
|
||||
},
|
||||
getVehicleList(){
|
||||
getVehicleList().then(res => {
|
||||
this.VehicleList = res.data
|
||||
this.VehicleList.forEach(vehicle => {
|
||||
vehicle.onlineTime = this.getTimePassed(vehicle.connectTime)
|
||||
vehicle.time = new Date(vehicle.connectTime).toLocaleDateString() +' '+ new Date(vehicle.connectTime).toLocaleTimeString()
|
||||
})
|
||||
})
|
||||
},
|
||||
handleSetLineChartData(type) {
|
||||
if (type){
|
||||
lineChartData[type].yType = yType[this.formInline.user]
|
||||
|
|
|
|||
|
|
@ -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://localhost:9004`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: ''
|
||||
|
|
|
|||
Loading…
Reference in New Issue