You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
460 lines
12 KiB
Vue
460 lines
12 KiB
Vue
<template>
|
|
<div class="stritleEchartsPage">
|
|
<div class="echart-top">
|
|
<el-card class="box-card" v-loading="numloading">
|
|
<h3>装置数量统计</h3>
|
|
<div class="bottomM">
|
|
<div class="infoBox">
|
|
<p>
|
|
<span>装置总数</span>
|
|
<span>{{ termDataNum.totalNum }}</span>
|
|
</p>
|
|
<p>
|
|
<span>在线数量</span>
|
|
<span>{{ termDataNum.onlineNum }}</span>
|
|
</p>
|
|
<p>
|
|
<span>离线率</span>
|
|
<span>{{ (termDataNum.offlinePercent * 100).toFixed(2) }}%</span>
|
|
</p>
|
|
<p>
|
|
<span>在线率</span>
|
|
<span>{{ (termDataNum.onlinePercent * 100).toFixed(2) }}%</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
<el-card class="box-card">
|
|
<h3>装置在线统计</h3>
|
|
<div id="echart2" class="chartClass" v-loading="pieloading"></div>
|
|
</el-card>
|
|
</div>
|
|
<div class="echart-top">
|
|
<el-card class="box-card" v-loading="barloading">
|
|
<h3>7天告警数量统计</h3>
|
|
<div class="dateBox">
|
|
<span class="datemsg">当前日期前七天</span>
|
|
<el-date-picker
|
|
v-model="dateValue"
|
|
align="right"
|
|
type="date"
|
|
placeholder="选择日期"
|
|
:picker-options="singpickerOptions"
|
|
@change="changedate"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
<div id="echart3" class="chartClass"></div>
|
|
</el-card>
|
|
<el-card class="box-card" v-loading="pie2loading">
|
|
<h3>告警类型统计</h3>
|
|
<div class="dateBox">
|
|
<el-date-picker
|
|
v-model="dateValue2"
|
|
align="right"
|
|
type="date"
|
|
placeholder="选择日期"
|
|
:picker-options="singpickerOptions"
|
|
@change="changedate2"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
<div id="echart4" class="chartClass"></div>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getTermStatistics,
|
|
getWeekAlarmStatistics,
|
|
getTodayAlarmStatistics,
|
|
} from "@/utils/api/index";
|
|
export default {
|
|
name: "",
|
|
data() {
|
|
return {
|
|
termDataNum: "", //总数
|
|
dateValue: "", //7天告警统计日期
|
|
dateValue2: "", //当天告警分类统计日期
|
|
weekData: [], //7天告警统计
|
|
todayAlarm: [], //当天告警分类统计
|
|
singpickerOptions: {
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
},
|
|
},
|
|
myChart2: "",
|
|
myChart3: "",
|
|
myChart4: "",
|
|
numloading: false,
|
|
pieloading: false,
|
|
barloading: false,
|
|
pie2loading: false,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getDateTime(); //获取当前时间
|
|
this.getTermData();
|
|
this.getWeekAlarmStatistics();
|
|
this.getTodayAlarmStatistics();
|
|
},
|
|
watch: {
|
|
"$store.state.collapse"(val) {
|
|
console.log(val);
|
|
setTimeout(() => {
|
|
//echarts得重绘方法
|
|
this.myChart1.resize();
|
|
this.myChart2.resize();
|
|
this.myChart3.resize();
|
|
this.myChart4.resize();
|
|
}, 300);
|
|
},
|
|
},
|
|
methods: {
|
|
// 隐患数量统计
|
|
changedate() {
|
|
console.log(this.dateValue.getTime());
|
|
this.dateValue = this.dateValue.getTime();
|
|
this.getWeekAlarmStatistics();
|
|
},
|
|
// 隐患分类统计
|
|
changedate2() {
|
|
console.log(this.dateValue2.getTime());
|
|
this.dateValue = this.dateValue2.getTime();
|
|
this.getTodayAlarmStatistics();
|
|
},
|
|
//获取当前时间
|
|
getDateTime() {
|
|
console.log(new Date());
|
|
this.dateValue = new Date().getTime();
|
|
this.dateValue2 = new Date().getTime();
|
|
console.log(this.dateValue);
|
|
//console.log(this.$moment(this.dateValue).format("yy-MM-DD"));
|
|
},
|
|
//装置数量统计
|
|
getTermData() {
|
|
this.numloading = true;
|
|
this.pieloading = true;
|
|
getTermStatistics()
|
|
.then((res) => {
|
|
console.log(res);
|
|
this.termDataNum = res.data;
|
|
this.numloading = false;
|
|
this.pieloading = false;
|
|
this.getEchart2();
|
|
})
|
|
.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(() => {
|
|
console.log(this.termDataNum);
|
|
this.$echarts.init(document.getElementById("echart2")).dispose();
|
|
this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
|
|
let option = {
|
|
// title: {
|
|
// text: "装置在线统计",
|
|
// },
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
top: "5%",
|
|
left: "left",
|
|
},
|
|
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: [
|
|
{ value: this.termDataNum.onlineNum, name: "在线" },
|
|
{ value: this.termDataNum.offlineNum, name: "离线" },
|
|
],
|
|
},
|
|
],
|
|
};
|
|
this.myChart2.setOption(option);
|
|
window.addEventListener("resize", () => {
|
|
this.myChart2.resize();
|
|
});
|
|
});
|
|
},
|
|
//获取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",
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: this.weekData.map((x) => {
|
|
return this.$moment(x.date).format("yy-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>
|
|
<style lang="less">
|
|
.stritleEchartsPage {
|
|
height: calc(100% - 32px);
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
.echart-top {
|
|
display: flex;
|
|
height: 48%;
|
|
justify-content: space-between;
|
|
.el-card {
|
|
width: 49%;
|
|
height: 100%;
|
|
.el-card__body {
|
|
height: calc(100% - 40px);
|
|
position: relative;
|
|
}
|
|
}
|
|
.box-card {
|
|
.chartClass {
|
|
height: calc(100% - 32px);
|
|
width: 100%;
|
|
}
|
|
h3 {
|
|
font-size: 18px;
|
|
color: #333;
|
|
line-height: 32px;
|
|
}
|
|
.bottomM {
|
|
.infoBox {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
margin-top: 32px;
|
|
p {
|
|
width: 40%;
|
|
height: 88px;
|
|
text-align: center;
|
|
margin: 4%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
span {
|
|
color: #333;
|
|
font-size: 16px;
|
|
&:last-child {
|
|
font-size: 20px;
|
|
margin-top: 5px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
&:first-child {
|
|
span {
|
|
&:last-child {
|
|
color: #128071;
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
span {
|
|
&:last-child {
|
|
color: #409eff;
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(3) {
|
|
}
|
|
&:nth-child(4) {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.dateBox {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
.datemsg {
|
|
margin-right: 8px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|