feat 车辆数据展示 以及负载展示
parent
360a217220
commit
d5e55ec67a
|
|
@ -13,3 +13,11 @@ export function selectCarList(){
|
|||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export function selectNode(){
|
||||
return request({
|
||||
url: '/connect/selectNode',
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ service.interceptors.request.use(config => {
|
|||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(res => {
|
||||
debugger
|
||||
|
||||
// 未设置状态码则默认成功状态
|
||||
const code = res.data.code || 200;
|
||||
// 获取错误信息
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
<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-card class="box-card" :key="nodeInfo.id">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>节点名称：{{nodeInfo.nodeId}}</span>
|
||||
<span>节点名称：{{nodeInfo.nodeName}}</span>
|
||||
<el-button style="float: right; padding: 3px 0"
|
||||
@click="showNodeInfo(nodeInfo)"
|
||||
type="text">查看详情</el-button>
|
||||
|
|
@ -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="nodeInfo.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="nodeInfo.memoryUseRate" :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="nodeInfo.nodeWeights" :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 {selectNode} from "@/api/connect/connect";
|
||||
export default {
|
||||
name: "nodeList",
|
||||
components: {
|
||||
|
|
@ -106,30 +107,35 @@ export default {
|
|||
this.nodeInfo = nodeInfo
|
||||
this.isShowInfo = true
|
||||
},
|
||||
initNodeList: function () {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
let number = parseInt(Math.random() * 100);
|
||||
let cpuNumber = parseInt(Math.random() * 10);
|
||||
let memoryNumber = parseInt(Math.random() * 10);
|
||||
let loadNumber = parseInt(Math.random() * 10);
|
||||
let nodeInfo = {
|
||||
nodeId: "node-gateway-" + (i),
|
||||
cpu: (number - cpuNumber) < 0 ? number : number - cpuNumber,
|
||||
memory: (number - memoryNumber) < 0 ? number : number - memoryNumber,
|
||||
load: (number - loadNumber) < 0 ? number : number - loadNumber
|
||||
};
|
||||
let vehicleInfoList = [];
|
||||
// 随机生成节点车辆
|
||||
for (let j = 0; j < nodeInfo.load; j++) {
|
||||
vehicleInfoList.push({
|
||||
vin: "VIN"+parseInt(Math.random() * 10000000000000),
|
||||
topic: nodeInfo.nodeId,
|
||||
zoning: parseInt(Math.random() * 100 % 16),
|
||||
})
|
||||
}
|
||||
nodeInfo.vehicleInfoList = vehicleInfoList;
|
||||
this.nodeList.push(nodeInfo)
|
||||
}
|
||||
// initNodeList: function () {
|
||||
// for (let i = 0; i < 10; i++) {
|
||||
// let number = parseInt(Math.random() * 100);
|
||||
// let cpuNumber = parseInt(Math.random() * 10);
|
||||
// let memoryNumber = parseInt(Math.random() * 10);
|
||||
// let loadNumber = parseInt(Math.random() * 10);
|
||||
// let nodeInfo = {
|
||||
// nodeId: "node-gateway-" + (i),
|
||||
// cpu: (number - cpuNumber) < 0 ? number : number - cpuNumber,
|
||||
// memory: (number - memoryNumber) < 0 ? number : number - memoryNumber,
|
||||
// load: (number - loadNumber) < 0 ? number : number - loadNumber
|
||||
// };
|
||||
// let vehicleInfoList = [];
|
||||
// // 随机生成节点车辆
|
||||
// for (let j = 0; j < nodeInfo.load; j++) {
|
||||
// vehicleInfoList.push({
|
||||
// vin: "VIN"+parseInt(Math.random() * 10000000000000),
|
||||
// topic: nodeInfo.nodeId,
|
||||
// zoning: parseInt(Math.random() * 100 % 16),
|
||||
// })
|
||||
// }
|
||||
// nodeInfo.vehicleInfoList = vehicleInfoList;
|
||||
// this.nodeList.push(nodeInfo)
|
||||
// }
|
||||
initNodeList(){
|
||||
selectNode().then(res =>{
|
||||
console.log("res",res)
|
||||
this.nodeList = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,18 +57,18 @@
|
|||
<el-row :gutter="32">
|
||||
<el-col :lg="8" :sm="24" :xs="24">
|
||||
<div class="chart-wrapper">
|
||||
<el-tabs v-model="car" type="card">
|
||||
<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">
|
||||
{{ + (o - 1) }} <span style="float:right;">{{ 55- o }}分钟</span>
|
||||
<div v-for="o in car" :key="o.id" class="text item">
|
||||
{{ o.vin }} <span style="float:right;">{{ getMinutesSinceMidnight(o.timestamp) }}分钟</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 v-for="o in car" :key="o.id" class="text item">
|
||||
{{ o.vin }} <span style="float:right;">{{ getDateTime(o.timestamp) }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-tab-pane>
|
||||
|
|
@ -83,14 +83,15 @@
|
|||
<el-switch
|
||||
style="float: right; display: block"
|
||||
v-model="value1"
|
||||
@change="selectNode(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 v-for="o in node" :key="o.id" class="text item">
|
||||
{{o.nodeName }} <span style="float:right;">{{o.nodeWeights}}%</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
|
@ -126,7 +127,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";
|
||||
import {selectCarList, selectNode} from "@/api/connect/connect";
|
||||
|
||||
|
||||
const yType = {
|
||||
|
|
@ -175,22 +176,20 @@ export default {
|
|||
user: '近7天',
|
||||
region: '关闭'
|
||||
},
|
||||
activeName: 1,
|
||||
activeName: 0,
|
||||
activeTopName: "最长在线TOP10",
|
||||
value1: true,
|
||||
value2: true,
|
||||
car:[]
|
||||
car:[],
|
||||
node:[]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.selectCarList()
|
||||
},
|
||||
mounted() {
|
||||
// 在组件挂载后更新时间戳
|
||||
this.currentTimestamp = Date.now();
|
||||
},
|
||||
methods: {
|
||||
handleSetLineChartData(type) {
|
||||
console.log("type",type)
|
||||
if (type){
|
||||
lineChartData[type].yType = yType[this.formInline.user]
|
||||
this.lineChartData = lineChartData[type]
|
||||
|
|
@ -203,6 +202,35 @@ export default {
|
|||
console.log('res',res)
|
||||
this.car = res.data
|
||||
})
|
||||
},
|
||||
//分钟
|
||||
getMinutesSinceMidnight(timestampString){
|
||||
//当前时间 - timestampString
|
||||
var nowInMilliseconds = Date.now();
|
||||
|
||||
var date = new Date(timestampString);
|
||||
|
||||
// 计算时间差（毫秒）
|
||||
var differenceInMilliseconds = nowInMilliseconds - date;
|
||||
return Math.floor(differenceInMilliseconds / (1000 * 60));
|
||||
},
|
||||
//年月日
|
||||
getDateTime(timestamp){
|
||||
const date = new Date(timestamp);
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
return `${year}-${month}-${day}`;
|
||||
},
|
||||
selectNode(value1) {
|
||||
selectNode().then(res => {
|
||||
console.log('node', res)
|
||||
if (value1){
|
||||
this.node = res.data
|
||||
}else {
|
||||
this.node = res.data.reverse()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue