+
+
@@ -63,10 +65,10 @@
-
+
在线
- 离线
+ 离线
@@ -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 {