|
|
|
@ -12,21 +12,23 @@ |
|
|
|
<el-tab-pane label="设备查询" name="second"> |
|
|
|
<div class="topdiv"> |
|
|
|
<div class="left-div"> |
|
|
|
<el-button size="mini" icon="el-icon-refresh-left" class="btnSearch">刷新</el-button> |
|
|
|
<el-button size="mini" icon="el-icon-refresh-left" class="btnSearch" @click="onRefreshData">刷新</el-button> |
|
|
|
<el-button size="mini" icon="el-icon-download" class="btnSearch" |
|
|
|
@click="SystemStatusExport">导出Excel</el-button> |
|
|
|
</div> |
|
|
|
<div class="right-div"> |
|
|
|
<InputSearch style="width: 402px;" :formList="searchFormList" @handleSearch="handleSearch" /> |
|
|
|
<InputSearch style="width: 402px;" :formList="searchFormList" @handleSearch="handleSearch" :placeholder="searchText"/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="middleDiv"> |
|
|
|
</div> |
|
|
|
<div class="queryChart"> |
|
|
|
<!-- v-if="isEmpty01" --> |
|
|
|
<Empty v-if="isEmpty01" class="floatEmpty" :text="emptyText01"></Empty> |
|
|
|
<div ref="queryChart" class="keep-ratio"> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-table :border="false" :data="tableData" height="480" style="width: 100%"> |
|
|
|
<div style="position: relative;"> |
|
|
|
<Empty v-if="isEmpty02" class="floatEmpty" :text="emptyText02"></Empty> |
|
|
|
<el-table :border="false" :data="tableData" height="480" header-align="left" empty-text=" "> |
|
|
|
<el-table-column prop="order" label="序号" width="80"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="deviceName" label="设备名称"></el-table-column> |
|
|
|
@ -63,10 +65,10 @@ |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="time" label="监测时间" width=""> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="deviceStatus" label="操作" width=""> |
|
|
|
<el-table-column prop="deviceStatus" label="设备状态" width=""> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div v-if="scope.row.deviceStatus == 1">在线</div> |
|
|
|
<div v-if="scope.row.deviceStatus == 0">离线</div> |
|
|
|
<div v-if="scope.row.deviceStatus == 0" style="color: #BBB;">离线</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
@ -107,9 +109,14 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
startTime: "2024-01-01 00:00:00", |
|
|
|
time: "2024-01-31 00:00:00", |
|
|
|
typeQuery: 1, //高清网络枪型固定摄像机 |
|
|
|
searchText:"请设置查询条件", |
|
|
|
isEmpty01:true, |
|
|
|
emptyText01:"请输入参数查询...", |
|
|
|
isEmpty02:true, |
|
|
|
emptyText02: "请输入参数查询...", |
|
|
|
startTime: "", |
|
|
|
time: "", |
|
|
|
typeQuery: "", //高清网络枪型固定摄像机 |
|
|
|
pageTotal: 0, |
|
|
|
pageIndex: 1, |
|
|
|
pageSize: 10, |
|
|
|
@ -133,139 +140,8 @@ export default { |
|
|
|
"智能行车诱导系统", |
|
|
|
], |
|
|
|
equipments: [], |
|
|
|
activeName: "second", |
|
|
|
tableData: [{ |
|
|
|
date: '2023-12-31 13:00:00', |
|
|
|
name: '高清网络球形摄像机', |
|
|
|
address: 'K234+235', |
|
|
|
root: "中央分隔带", |
|
|
|
ip: "10.0.61.43", |
|
|
|
cj: "海康威视", |
|
|
|
xh: "XXX", |
|
|
|
wd: "梁山收费站监控网段", |
|
|
|
jcsj: "2024-01-17", |
|
|
|
cz: "在线", |
|
|
|
}, { |
|
|
|
date: '2023-12-31 13:00:00', |
|
|
|
name: '高清网络球形摄像机', |
|
|
|
address: 'K234+235', |
|
|
|
root: "中央分隔带", |
|
|
|
ip: "10.0.61.43", |
|
|
|
cj: "海康威视", |
|
|
|
xh: "XXX", |
|
|
|
wd: "梁山收费站监控网段", |
|
|
|
jcsj: "2024-01-17", |
|
|
|
cz: "在线", |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '2023-12-31 13:00:00', |
|
|
|
name: '高清网络球形摄像机', |
|
|
|
address: 'K234+235', |
|
|
|
root: "中央分隔带", |
|
|
|
ip: "10.0.61.43", |
|
|
|
cj: "海康威视", |
|
|
|
xh: "XXX", |
|
|
|
wd: "梁山收费站监控网段", |
|
|
|
jcsj: "2024-01-17", |
|
|
|
cz: "在线", |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '2023-12-31 13:00:00', |
|
|
|
name: '高清网络球形摄像机', |
|
|
|
address: 'K234+235', |
|
|
|
root: "中央分隔带", |
|
|
|
ip: "10.0.61.43", |
|
|
|
cj: "海康威视", |
|
|
|
xh: "XXX", |
|
|
|
wd: "梁山收费站监控网段", |
|
|
|
jcsj: "2024-01-17", |
|
|
|
cz: "在线", |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '2023-12-31 13:00:00', |
|
|
|
name: '高清网络球形摄像机', |
|
|
|
address: 'K234+235', |
|
|
|
root: "中央分隔带", |
|
|
|
ip: "10.0.61.43", |
|
|
|
cj: "海康威视", |
|
|
|
xh: "XXX", |
|
|
|
wd: "梁山收费站监控网段", |
|
|
|
jcsj: "2024-01-17", |
|
|
|
cz: "在线", |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '2023-12-31 13:00:00', |
|
|
|
name: '高清网络球形摄像机', |
|
|
|
address: 'K234+235', |
|
|
|
root: "中央分隔带", |
|
|
|
ip: "10.0.61.43", |
|
|
|
cj: "海康威视", |
|
|
|
xh: "XXX", |
|
|
|
wd: "梁山收费站监控网段", |
|
|
|
jcsj: "2024-01-17", |
|
|
|
cz: "在线", |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '2023-12-31 13:00:00', |
|
|
|
name: '高清网络球形摄像机', |
|
|
|
address: 'K234+235', |
|
|
|
root: "中央分隔带", |
|
|
|
ip: "10.0.61.43", |
|
|
|
cj: "海康威视", |
|
|
|
xh: "XXX", |
|
|
|
wd: "梁山收费站监控网段", |
|
|
|
jcsj: "2024-01-17", |
|
|
|
cz: "在线", |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '2023-12-31 13:00:00', |
|
|
|
name: '高清网络球形摄像机', |
|
|
|
address: 'K234+235', |
|
|
|
root: "中央分隔带", |
|
|
|
ip: "10.0.61.43", |
|
|
|
cj: "海康威视", |
|
|
|
xh: "XXX", |
|
|
|
wd: "梁山收费站监控网段", |
|
|
|
jcsj: "2024-01-17", |
|
|
|
cz: "在线", |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '2023-12-31 13:00:00', |
|
|
|
name: '高清网络球形摄像机', |
|
|
|
address: 'K234+235', |
|
|
|
root: "中央分隔带", |
|
|
|
ip: "10.0.61.43", |
|
|
|
cj: "海康威视", |
|
|
|
xh: "XXX", |
|
|
|
wd: "梁山收费站监控网段", |
|
|
|
jcsj: "2024-01-17", |
|
|
|
cz: "在线", |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '2023-12-31 13:00:00', |
|
|
|
name: '高清网络球形摄像机', |
|
|
|
address: 'K234+235', |
|
|
|
root: "中央分隔带", |
|
|
|
ip: "10.0.61.43", |
|
|
|
cj: "海康威视", |
|
|
|
xh: "XXX", |
|
|
|
wd: "梁山收费站监控网段", |
|
|
|
jcsj: "2024-01-17", |
|
|
|
cz: "在线", |
|
|
|
}, |
|
|
|
{ |
|
|
|
date: '2023-12-31 13:00:00', |
|
|
|
name: '高清网络球形摄像机', |
|
|
|
address: 'K234+235', |
|
|
|
root: "中央分隔带", |
|
|
|
ip: "10.0.61.43", |
|
|
|
cj: "海康威视", |
|
|
|
xh: "XXX", |
|
|
|
wd: "梁山收费站监控网段", |
|
|
|
jcsj: "2024-01-17", |
|
|
|
cz: "在线", |
|
|
|
} |
|
|
|
], |
|
|
|
activeName: "first", |
|
|
|
tableData: [], |
|
|
|
interval: null |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -281,10 +157,6 @@ export default { |
|
|
|
} else if (this.activeName == 'second') { |
|
|
|
this.queryChart = echarts.init(this.$refs["queryChart"]); |
|
|
|
this.queryChart.setOption(chartsStatistics); |
|
|
|
|
|
|
|
// this.initQueryTable(1); |
|
|
|
// this.initQueryChart(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
this.interval = setInterval(() => { |
|
|
|
@ -308,10 +180,23 @@ export default { |
|
|
|
|
|
|
|
return year + "-" + m + "-" + day + " 00:00:00"; |
|
|
|
}, |
|
|
|
onRefreshData(){ |
|
|
|
if(!this.typeQuery || !this.startTime){ |
|
|
|
this.$message({ |
|
|
|
message : "请先设置查询条件！", |
|
|
|
type : "warning" |
|
|
|
}) |
|
|
|
return |
|
|
|
} |
|
|
|
this.initQueryChart(); |
|
|
|
this.initQueryTable(1); |
|
|
|
}, |
|
|
|
handleSearch(data) { |
|
|
|
this.typeQuery = data.type; |
|
|
|
this.startTime = this.formatDate(data.time[0]); |
|
|
|
this.time = this.formatDate(data.time[1]); |
|
|
|
let typeText = this.searchFormList[1].options.options[this.typeQuery-1].label; |
|
|
|
this.searchText = `${moment(this.startTime).format("YYYY年MM月DD日")}-${moment(this.time).format("YYYY年MM月DD日")},${typeText}`; |
|
|
|
this.initQueryChart(); |
|
|
|
this.initQueryTable(1); |
|
|
|
}, |
|
|
|
@ -347,44 +232,6 @@ export default { |
|
|
|
loadingInstance.close(); |
|
|
|
}) |
|
|
|
}, |
|
|
|
initQueryChart() { |
|
|
|
|
|
|
|
getSystemStatusList({ |
|
|
|
startTime: this.startTime, |
|
|
|
time: this.time, |
|
|
|
type: this.typeQuery, |
|
|
|
}).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
let origin = res.data; |
|
|
|
|
|
|
|
let startStamp = +moment(this.startTime).startOf('day').format("x"); |
|
|
|
let endStamp = +moment(this.time).endOf('day').format("x"); |
|
|
|
let oneDay = 86400000; |
|
|
|
let daysTotal = Math.ceil((endStamp - startStamp) / oneDay); |
|
|
|
let queryChartData = []; |
|
|
|
let dataX = []; |
|
|
|
let data0 = []; |
|
|
|
let data1 = []; |
|
|
|
for (let i = 0; i < daysTotal; i++) { |
|
|
|
let ts = startStamp + i * oneDay; |
|
|
|
let date = moment(ts).format("YYYY-M-D"); |
|
|
|
let val = origin[date] ? +origin[date].replace("%", "") : 0; |
|
|
|
dataX.push(moment(ts).format("MM月DD日")); |
|
|
|
data0.push(val); |
|
|
|
data1.push(100); |
|
|
|
} |
|
|
|
chartsStatistics.xAxis.data = dataX; |
|
|
|
chartsStatistics.series[0].data = data0; |
|
|
|
chartsStatistics.series[1].data = data1; |
|
|
|
chartsStatistics.yAxis[0].name = "在线率(%)"; |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
this.queryChart.setOption(chartsStatistics); |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
initDevice() { //设备在线离线率接口 |
|
|
|
|
|
|
|
getSystemStatusType().then((res) => { |
|
|
|
@ -424,8 +271,73 @@ export default { |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
setStatus(id,status){ |
|
|
|
if(status == "doing"){ |
|
|
|
this["isEmpty" + id] = true |
|
|
|
this["emptyText" + id] = "数据查询中..." |
|
|
|
}else if(status == "empty"){ |
|
|
|
this["isEmpty" + id] = true |
|
|
|
this["emptyText" + id] = "暂无数据..." |
|
|
|
} else if (status == "finish") { |
|
|
|
this["isEmpty" + id] = false |
|
|
|
this["emptyText" + id] = "" |
|
|
|
} |
|
|
|
}, |
|
|
|
initQueryChart() { |
|
|
|
|
|
|
|
this.setStatus("01", "doing"); |
|
|
|
|
|
|
|
getSystemStatusList({ |
|
|
|
startTime: this.startTime, |
|
|
|
time: this.time, |
|
|
|
type: this.typeQuery, |
|
|
|
}).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
|
|
|
|
if (res.data && Object.keys(res.data).length>0) { |
|
|
|
|
|
|
|
this.setStatus("01", "finish"); |
|
|
|
|
|
|
|
let origin = res.data; |
|
|
|
|
|
|
|
let startStamp = +moment(this.startTime).startOf('day').format("x"); |
|
|
|
let endStamp = +moment(this.time).endOf('day').format("x"); |
|
|
|
let oneDay = 86400000; |
|
|
|
let daysTotal = Math.ceil((endStamp - startStamp) / oneDay); |
|
|
|
let queryChartData = []; |
|
|
|
let dataX = []; |
|
|
|
let data0 = []; |
|
|
|
let data1 = []; |
|
|
|
for (let i = 0; i < daysTotal; i++) { |
|
|
|
let ts = startStamp + i * oneDay; |
|
|
|
let date = moment(ts).format("YYYY-M-D"); |
|
|
|
let val = origin[date] ? +origin[date].replace("%", "") : 0; |
|
|
|
dataX.push(moment(ts).format("MM-DD")); |
|
|
|
data0.push(val); |
|
|
|
data1.push(100); |
|
|
|
} |
|
|
|
chartsStatistics.xAxis.data = dataX; |
|
|
|
chartsStatistics.series[0].data = data0; |
|
|
|
chartsStatistics.series[1].data = data1; |
|
|
|
chartsStatistics.yAxis[0].name = "在线率(%)"; |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
this.queryChart.setOption(chartsStatistics); |
|
|
|
}); |
|
|
|
|
|
|
|
}else{ |
|
|
|
|
|
|
|
this.setStatus("01", "empty"); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
//查询列表 |
|
|
|
initQueryTable(pageIndex, pageSize = 30) { |
|
|
|
this.setStatus("02", "doing"); |
|
|
|
getSystemStatusTabList({ |
|
|
|
startTime: this.startTime, |
|
|
|
time: this.time, |
|
|
|
@ -434,13 +346,18 @@ export default { |
|
|
|
pageSize: pageSize, |
|
|
|
}).then((res) => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.pageIndex = pageIndex; |
|
|
|
this.pageSize = pageSize; |
|
|
|
this.pageTotal = res.total; |
|
|
|
this.tableData = res.rows; |
|
|
|
this.tableData.forEach((it, index) => { |
|
|
|
it.order = (pageIndex - 1) * (pageSize) + index + 1; |
|
|
|
}) |
|
|
|
if(res.rows && res.rows.length>0){ |
|
|
|
this.setStatus("02", "finish"); |
|
|
|
this.pageIndex = pageIndex; |
|
|
|
this.pageSize = pageSize; |
|
|
|
this.pageTotal = res.total; |
|
|
|
this.tableData = res.rows; |
|
|
|
this.tableData.forEach((it, index) => { |
|
|
|
it.order = (pageIndex - 1) * (pageSize) + index + 1; |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
this.setStatus("02", "empty"); |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
@ -454,6 +371,14 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
|
|
|
|
.floatEmpty{ |
|
|
|
position: absolute; |
|
|
|
z-index: 100; |
|
|
|
background: rgba($color: #000000, $alpha: 0.2); |
|
|
|
left: 0; top:0; right: 0; bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.bottomTabs { |
|
|
|
position: relative; |
|
|
|
display: inline-flex; |
|
|
|
@ -512,6 +437,7 @@ export default { |
|
|
|
|
|
|
|
::v-deep .el-table .el-table__cell { |
|
|
|
height: 47px; |
|
|
|
padding-left: 15px; |
|
|
|
font-size: 14px; |
|
|
|
font-family: PingFang SC, PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
@ -593,7 +519,8 @@ export default { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.middleDiv { |
|
|
|
.queryChart { |
|
|
|
position: relative; |
|
|
|
display: inline-flex; |
|
|
|
width: 100%; |
|
|
|
height: 343px; |
|
|
|
|
hui
1 year ago