You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
326 lines
13 KiB
326 lines
13 KiB
8 months ago
|
<template>
|
||
|
|
<div class="app-container">
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="4">
|
||
|
|
<type-tree @defaultCheck="defaultCheck" @nodeCheck="nodeCheck" :filter="false" :show_checkbox="true" :default_check_first="true"></type-tree>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="20">
|
||
|
|
<el-button @click="handleExport">导出</el-button>
|
||
|
|
<line-chart height="30vh" :show-legend="true" :chart-data="chartData"></line-chart>
|
||
|
|
<el-table :data="tableData" height="45vh" style="width: 100%" @sort-change="handleSortChange">
|
||
|
|
<el-table-column prop="deviceName" label="设备名称" width="200"></el-table-column>
|
||
|
|
<el-table-column prop="stakeMark" label="桩号"></el-table-column>
|
||
|
|
<el-table-column prop="direction" label="方向">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.direction=='1'">菏泽方向</span>
|
||
|
|
<span v-else-if="scope.row.direction=='3'">济南方向</span>
|
||
|
|
<span v-else>双向</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="deviceIp" label="IP"></el-table-column>
|
||
|
|
<el-table-column prop="deviceStatus" label="状态">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-tag type="success" size="small" v-if="scope.row.deviceStatus=='1'">在线</el-tag>
|
||
|
|
<el-tag type="danger" size="small" v-else>离线</el-tag>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="lossRate" label="丢包率">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.lossRate > 0" style="color: #ff4949">{{scope.row.lossRate}}</span>
|
||
|
|
<span v-else>{{scope.row.lossRate}}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="rttAvg" label="平均时延"></el-table-column>
|
||
|
|
<el-table-column prop="networkQuality" label="网络质量">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-tag type="success" size="small" v-if="scope.row.networkQuality=='优'">优</el-tag>
|
||
|
|
<el-tag type="primary" size="small" v-if="scope.row.networkQuality=='良'">良</el-tag>
|
||
|
|
<el-tag type="warning" size="small" v-if="scope.row.networkQuality=='一般'">一般</el-tag>
|
||
|
|
<el-tag type="danger" size="small" v-if="scope.row.networkQuality=='差'">差</el-tag>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<!-- <el-table-column prop="statisticalDate" label="日期"></el-table-column>-->
|
||
|
|
<el-table-column prop="onlineRate" label="在线率" sortable="custom">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-progress :percentage="scope.row.onlineRate"></el-progress>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column align="center">
|
||
|
|
<template slot="header" slot-scope="scope">
|
||
|
|
<el-popover placement="bottom" width="300" trigger="click">
|
||
|
|
<el-form :model="queryParams" ref="queryForm" size="small" label-width="68px">
|
||
|
|
<el-form-item label="设备桩号" prop="stakeMark">
|
||
|
|
<el-input size="mini" v-model="queryParams.stakeMark" placeholder="请输入设备桩号" clearable @keyup.enter.native="deviceOnlineTable"/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="使用状态" prop="useState">
|
||
|
|
<el-select size="mini" v-model="queryParams.useState" placeholder="请选择使用状态" clearable>
|
||
|
|
<el-option
|
||
|
|
v-for="item in useStateOptions"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.name"
|
||
|
|
:value="item.value"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="设备状态" prop="deviceState">
|
||
|
|
<el-select size="mini" v-model="queryParams.deviceState" placeholder="请选择设备状态" clearable>
|
||
|
|
<el-option
|
||
|
|
v-for="item in deviceStateOptions"
|
||
|
|
:key="item.value"
|
||
|
|
:label="item.name"
|
||
|
|
:value="item.value"
|
||
|
|
/>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="IP地址" prop="deviceIp">
|
||
|
|
<el-input
|
||
|
|
size="mini"
|
||
|
|
v-model="queryParams.deviceIp"
|
||
|
|
placeholder="请输入IP地址"
|
||
|
|
clearable
|
||
|
|
@keyup.enter.native="deviceOnlineTable"
|
||
|
|
/>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="deviceOnlineTable">搜索</el-button>
|
||
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<el-button slot="reference" size="mini" icon="el-icon-search">搜索</el-button>
|
||
|
|
</el-popover>
|
||
|
|
</template>
|
||
|
|
<template slot-scope="scope" >
|
||
|
|
<el-button @click="seeLog(scope.row.deviceId)" type="text" size="mini" icon="el-icon-view">网络日志</el-button>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
<pagination
|
||
|
|
v-show="total>0"
|
||
|
|
:total="total"
|
||
|
|
:page.sync="queryParams.pageNum"
|
||
|
|
:limit.sync="queryParams.pageSize"
|
||
|
|
@pagination="deviceOnlineTable"
|
||
|
|
/>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-dialog title="设备网络日志" width="80vw" :visible.sync="logVisible">
|
||
|
|
<el-row style="position: absolute;top: 45px;right: 40px">
|
||
|
|
<el-button size="mini" @click="upDay">上一日</el-button>
|
||
|
|
<el-button style="margin-right: 10px" size="mini" @click="downDay">下一日</el-button>
|
||
|
|
<el-date-picker
|
||
|
|
style="width: 130px"
|
||
|
|
v-model="logQueryParams.queryDate"
|
||
|
|
type="date"
|
||
|
|
size="mini"
|
||
|
|
value-format="yyyy-MM-dd"
|
||
|
|
placeholder="选择日期"
|
||
|
|
@change="logQuery"
|
||
|
|
>
|
||
|
|
</el-date-picker>
|
||
|
|
</el-row>
|
||
|
|
<el-row style="width: 100%">
|
||
|
|
<indexLine height="25vh" :chartData="logChartData"></indexLine>
|
||
|
|
</el-row>
|
||
|
|
<el-row>
|
||
|
|
<el-table :data="logTableData" height="50vh" style="width: 100%" @sort-change="handleSortChange">
|
||
|
|
<el-table-column prop="deviceName" label="设备名称" width="300"></el-table-column>
|
||
|
|
<el-table-column prop="sendCount" label="发送"></el-table-column>
|
||
|
|
<el-table-column prop="receiveCount" label="返回"></el-table-column>
|
||
|
|
<el-table-column prop="lossCount" label="丢失"></el-table-column>
|
||
|
|
<el-table-column prop="deviceStatus" label="状态">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-tag type="success" size="small" v-if="scope.row.deviceStatus=='1'">可达</el-tag>
|
||
|
|
<el-tag type="danger" size="small" v-else>不可达</el-tag>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="lossRate" label="丢包率"></el-table-column>
|
||
|
|
<el-table-column prop="rttAvg" label="平均时延"></el-table-column>
|
||
|
|
<el-table-column prop="networkQuality" label="网络质量">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<el-tag type="success" size="small" v-if="scope.row.networkQuality=='优'">优</el-tag>
|
||
|
|
<el-tag type="primary" size="small" v-if="scope.row.networkQuality=='良'">良</el-tag>
|
||
|
|
<el-tag type="warning" size="small" v-if="scope.row.networkQuality=='一般'">一般</el-tag>
|
||
|
|
<el-tag type="danger" size="small" v-if="scope.row.networkQuality=='差'">差</el-tag>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column width="200" prop="monitorTime" label="检测时间"></el-table-column>
|
||
|
|
|
||
|
|
</el-table>
|
||
|
|
<!-- <pagination
|
||
|
|
v-show="logTotal>0"
|
||
|
|
:total="logTotal"
|
||
|
|
:page.sync="logQueryParams.pageNum"
|
||
|
|
:limit.sync="logQueryParams.pageSize"
|
||
|
|
@pagination="networkLogTable"
|
||
|
|
/>-->
|
||
|
|
</el-row>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import TypeTree from "@/views/deviceManage/typeTree";
|
||
|
|
import LineChart from "@/views/deviceManage/lineChart";
|
||
|
|
import indexLine from "@/views/deviceManage/deviceOnline/indexLine";
|
||
|
|
import {deviceOnlineTable,deviceOnlineChart,networkLogTable,networkLogEcharts} from "@/api/deviceManage/deviceOnline";
|
||
|
|
import {typeTree,direction, useState, deviceState} from "@/enum/deviceEnum";
|
||
|
|
export default {
|
||
|
|
name: "index",
|
||
|
|
components: { TypeTree, LineChart, indexLine},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
chartData:{
|
||
|
|
xData:[],
|
||
|
|
yData:[]
|
||
|
|
},
|
||
|
|
tableData:[],
|
||
|
|
// 总条数
|
||
|
|
total: 0,
|
||
|
|
// 设备方向
|
||
|
|
directionOptions: direction,
|
||
|
|
// 使用状态
|
||
|
|
useStateOptions: useState,
|
||
|
|
// 设备状态
|
||
|
|
deviceStateOptions: deviceState,
|
||
|
|
logVisible:false,
|
||
|
|
deviceType:typeTree,
|
||
|
|
// 查询参数
|
||
|
|
queryParams: {
|
||
|
|
pageNum: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
type:'',
|
||
|
|
orderByField:'online_rate',
|
||
|
|
orderDirection:'desc',
|
||
|
|
searchValue:'',
|
||
|
|
startTime:'2024-07-01 00:00:00',
|
||
|
|
time:'2024-07-24 00:00:00',
|
||
|
|
direction:''
|
||
|
|
},
|
||
|
|
logQueryParams: {
|
||
|
|
//pageNum: 1,
|
||
|
|
//pageSize: 10,
|
||
|
|
queryDate:new Date(),
|
||
|
|
deviceId:'',
|
||
|
|
},
|
||
|
|
logChartData:{},
|
||
|
|
logTableData:[],
|
||
|
|
logTotal:0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
defaultCheck(types){
|
||
|
|
this.queryParams.type = types.join(',');
|
||
|
|
this.deviceOnlineTable();
|
||
|
|
this.deviceOnlineChart();
|
||
|
|
},
|
||
|
|
nodeCheck(data, checked){
|
||
|
|
this.queryParams.type = checked.checkedKeys.join(',');
|
||
|
|
this.deviceOnlineTable();
|
||
|
|
this.deviceOnlineChart();
|
||
|
|
},
|
||
|
|
deviceOnlineTable(){
|
||
|
|
deviceOnlineTable(this.queryParams).then(response => {
|
||
|
|
this.tableData = response.rows;
|
||
|
|
this.total = response.total;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
deviceOnlineChart(){
|
||
|
|
deviceOnlineChart(this.queryParams).then(response => {
|
||
|
|
let data = response.data;
|
||
|
|
let xData ,yData = [];
|
||
|
|
if(Object.keys(data).length !== 0){
|
||
|
|
xData =Object.keys(data[Object.keys(data)[0]]);
|
||
|
|
for(const type in data){
|
||
|
|
let yItem = {}
|
||
|
|
yItem.name = this.findType(type).label;
|
||
|
|
yItem.unit = '%';
|
||
|
|
yItem.data = [];
|
||
|
|
let lineObj = data[type];
|
||
|
|
for(const time in lineObj){
|
||
|
|
yItem.data.push(lineObj[time].replace('%',''));
|
||
|
|
}
|
||
|
|
yData.push(yItem);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.chartData.xData = xData;
|
||
|
|
this.chartData.yData = yData;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
seeLog(deviceId){
|
||
|
|
this.logVisible = true;
|
||
|
|
this.initQueryDate();
|
||
|
|
this.logQueryParams.deviceId = deviceId;
|
||
|
|
this.logQuery();
|
||
|
|
},
|
||
|
|
networkLogEcharts(){
|
||
|
|
networkLogEcharts(this.logQueryParams).then(response => {
|
||
|
|
this.logChartData = response.data;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
networkLogTable(){
|
||
|
|
networkLogTable(this.logQueryParams).then(response => {
|
||
|
|
console.log(response)
|
||
|
|
this.logTableData = response.rows;
|
||
|
|
this.logTotal = response.total;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/** 重置按钮操作 */
|
||
|
|
resetQuery() {
|
||
|
|
this.resetForm("queryForm");
|
||
|
|
this.deviceOnlineTable();
|
||
|
|
},
|
||
|
|
handleSortChange({ prop, order }){
|
||
|
|
this.queryParams.orderDirection = order === 'ascending'?'asc':'desc';
|
||
|
|
if (prop === 'onlineRate') {
|
||
|
|
this.queryParams.orderByField = 'online_rate';
|
||
|
|
}
|
||
|
|
this.deviceOnlineTable();
|
||
|
|
},
|
||
|
|
logQuery(){
|
||
|
|
if(!this.logQueryParams.queryDate) return;
|
||
|
|
this.networkLogEcharts()
|
||
|
|
this.networkLogTable()
|
||
|
|
},
|
||
|
|
initQueryDate(){
|
||
|
|
const date = new Date();
|
||
|
|
this.logQueryParams.queryDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
|
||
|
|
},
|
||
|
|
upDay(){
|
||
|
|
this.logQueryParams.queryDate = this.addOrSubtractDays(this.logQueryParams.queryDate, -1);
|
||
|
|
this.logQuery();
|
||
|
|
},
|
||
|
|
downDay(){
|
||
|
|
this.logQueryParams.queryDate = this.addOrSubtractDays(this.logQueryParams.queryDate, 1);
|
||
|
|
this.logQuery();
|
||
|
|
},
|
||
|
|
addOrSubtractDays(dateStr, numDays) {
|
||
|
|
const parts = dateStr.split('-');
|
||
|
|
const year = parseInt(parts[0], 10);
|
||
|
|
const month = parseInt(parts[1], 10) - 1; // 月份需要减1，因为Date对象月份是从0开始的
|
||
|
|
const day = parseInt(parts[2], 10);
|
||
|
|
const date = new Date(year, month, day);
|
||
|
|
date.setDate(date.getDate() + numDays);
|
||
|
|
const yearFormatted = date.getFullYear();
|
||
|
|
const monthFormatted = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份加1，并格式化为两位数
|
||
|
|
const dayFormatted = date.getDate().toString().padStart(2, '0'); // 格式化为两位数
|
||
|
|
return `${yearFormatted}-${monthFormatted}-${dayFormatted}`;
|
||
|
|
},
|
||
|
|
findType(typeCode) {
|
||
|
|
return this.deviceType.find(item => item.value == typeCode)
|
||
|
|
},
|
||
|
|
handleExport() {
|
||
|
|
this.download('system/status/export', {
|
||
|
|
...this.queryParams
|
||
|
|
}, `设备在线率${new Date().getTime()}.xlsx`)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|