|
|
|
|
@ -120,8 +120,6 @@
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
getTermStatistics,
|
|
|
|
|
getWeekAlarmStatistics,
|
|
|
|
|
getTodayAlarmStatistics,
|
|
|
|
|
getOnlineTerminalList,
|
|
|
|
|
getOnlineTerminalListExcel,
|
|
|
|
|
} from "@/utils/api/index";
|
|
|
|
|
@ -159,8 +157,6 @@ export default {
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getDateTime(); //获取当前时间
|
|
|
|
|
this.getTermData();
|
|
|
|
|
this.getWeekAlarmStatistics();
|
|
|
|
|
this.getTodayAlarmStatistics();
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
"$store.state.collapse"(val) {
|
|
|
|
|
@ -169,8 +165,6 @@ export default {
|
|
|
|
|
//echarts得重绘方法
|
|
|
|
|
this.myChart1.resize();
|
|
|
|
|
this.myChart2.resize();
|
|
|
|
|
this.myChart3.resize();
|
|
|
|
|
this.myChart4.resize();
|
|
|
|
|
}, 300);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
@ -197,18 +191,7 @@ export default {
|
|
|
|
|
console.log(val);
|
|
|
|
|
window.location.href = "/api/api/getOnlineTerminalListExcel?type=" + val;
|
|
|
|
|
},
|
|
|
|
|
// 隐患数量统计
|
|
|
|
|
changedate() {
|
|
|
|
|
console.log(this.dateValue.getTime());
|
|
|
|
|
this.dateValue = this.dateValue.getTime();
|
|
|
|
|
this.getWeekAlarmStatistics();
|
|
|
|
|
},
|
|
|
|
|
// 隐患分类统计
|
|
|
|
|
changedate2() {
|
|
|
|
|
console.log(this.dateValue2.getTime());
|
|
|
|
|
this.dateValue2 = this.dateValue2.getTime();
|
|
|
|
|
this.getTodayAlarmStatistics();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
//获取当前时间
|
|
|
|
|
getDateTime() {
|
|
|
|
|
console.log(new Date());
|
|
|
|
|
@ -231,30 +214,7 @@ export default {
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {});
|
|
|
|
|
},
|
|
|
|
|
//获取7天告警统计
|
|
|
|
|
getWeekAlarmStatistics() {
|
|
|
|
|
this.barloading = true;
|
|
|
|
|
getWeekAlarmStatistics({ starttime: this.dateValue })
|
|
|
|
|
.then((res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
this.weekData = res.data.list;
|
|
|
|
|
this.barloading = false;
|
|
|
|
|
this.getEchart3();
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {});
|
|
|
|
|
},
|
|
|
|
|
//获取当天告警分类统计
|
|
|
|
|
getTodayAlarmStatistics() {
|
|
|
|
|
this.pie2loading = true;
|
|
|
|
|
getTodayAlarmStatistics({ starttime: this.dateValue2 })
|
|
|
|
|
.then((res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
this.todayAlarm = res.data.list;
|
|
|
|
|
this.pie2loading = false;
|
|
|
|
|
this.getEchart4();
|
|
|
|
|
})
|
|
|
|
|
.catch((err) => {});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
//装置数量统计
|
|
|
|
|
getEchart2() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
@ -326,152 +286,6 @@ export default {
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//获取7天告警统计
|
|
|
|
|
getEchart3() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.$echarts.init(document.getElementById("echart3")).dispose();
|
|
|
|
|
this.myChart3 = this.$echarts.init(document.getElementById("echart3"));
|
|
|
|
|
let option = {
|
|
|
|
|
// title: {
|
|
|
|
|
// text: "隐患分类统计",
|
|
|
|
|
// },
|
|
|
|
|
color: ["#169e8c"],
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "axis",
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: "shadow",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
//与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
|
|
|
|
|
top: "10%",
|
|
|
|
|
left: "10%",
|
|
|
|
|
right: "10%",
|
|
|
|
|
bottom: "10%",
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: this.weekData.map((x) => {
|
|
|
|
|
return this.$moment(x.date).format("MM-DD");
|
|
|
|
|
}),
|
|
|
|
|
axisTick: {
|
|
|
|
|
alignWithLabel: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
yAxis: { type: "value" },
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: "告警数量",
|
|
|
|
|
data: this.weekData.map((x) => {
|
|
|
|
|
return x.num;
|
|
|
|
|
}),
|
|
|
|
|
type: "bar",
|
|
|
|
|
showBackground: true,
|
|
|
|
|
backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
this.myChart3.setOption(option);
|
|
|
|
|
window.addEventListener("resize", () => {
|
|
|
|
|
this.myChart3.resize();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
//获取当天告警分类统计
|
|
|
|
|
getEchart4() {
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.$echarts.init(document.getElementById("echart4")).dispose();
|
|
|
|
|
this.myChart4 = this.$echarts.init(document.getElementById("echart4"));
|
|
|
|
|
let arr = [];
|
|
|
|
|
this.todayAlarm.forEach((element) => {
|
|
|
|
|
arr.push({
|
|
|
|
|
value: element.num, //将数组的num值赋给value
|
|
|
|
|
name: element.enname, //将数组的name值赋给name
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
let option = {
|
|
|
|
|
// title: {
|
|
|
|
|
// text: "隐患分类统计",
|
|
|
|
|
// },
|
|
|
|
|
// tooltip: {
|
|
|
|
|
// trigger: "axis",
|
|
|
|
|
// axisPointer: {
|
|
|
|
|
// type: "shadow",
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// xAxis: {
|
|
|
|
|
// type: "category",
|
|
|
|
|
// data: this.todayAlarm.map((item) => {
|
|
|
|
|
// return item.enname;
|
|
|
|
|
// }),
|
|
|
|
|
// axisTick: {
|
|
|
|
|
// alignWithLabel: true,
|
|
|
|
|
// },
|
|
|
|
|
// },
|
|
|
|
|
// yAxis: { type: "value" },
|
|
|
|
|
// series: [
|
|
|
|
|
// {
|
|
|
|
|
// name: "告警数量",
|
|
|
|
|
// data: this.todayAlarm.map((item) => {
|
|
|
|
|
// return item.num;
|
|
|
|
|
// }),
|
|
|
|
|
// type: "bar",
|
|
|
|
|
// showBackground: true,
|
|
|
|
|
// backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
|
|
|
|
|
// },
|
|
|
|
|
// ],
|
|
|
|
|
|
|
|
|
|
// title: {
|
|
|
|
|
// text: "装置在线统计",
|
|
|
|
|
// },
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "item",
|
|
|
|
|
},
|
|
|
|
|
legend: {
|
|
|
|
|
type: "scroll",
|
|
|
|
|
orient: "vertical",
|
|
|
|
|
right: 10,
|
|
|
|
|
top: 20,
|
|
|
|
|
bottom: 20,
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: "pie",
|
|
|
|
|
radius: ["40%", "70%"],
|
|
|
|
|
avoidLabelOverlap: false,
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
borderRadius: 10,
|
|
|
|
|
borderColor: "#fff",
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
formatter: "{b}\n{d}%",
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
fontSize: 26,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
formatter: "{b}\n{d}%",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
data: arr,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
this.myChart4.setOption(option);
|
|
|
|
|
window.addEventListener("resize", () => {
|
|
|
|
|
this.myChart4.resize();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
fanluyan
2 years ago