|
|
|
|
@ -8,17 +8,17 @@
|
|
|
|
|
> -->
|
|
|
|
|
<div class="bottomM">
|
|
|
|
|
<div class="infoBox">
|
|
|
|
|
<p @click="handleLook">
|
|
|
|
|
<p @click="handleLook(-1)">
|
|
|
|
|
<span>装置总数</span>
|
|
|
|
|
<span>{{ termDataNum.totalNum ? termDataNum.totalNum : 0 }}</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<p @click="handleLook(1)">
|
|
|
|
|
<span>在线数量</span>
|
|
|
|
|
<span>{{
|
|
|
|
|
termDataNum.onlineNum ? termDataNum.onlineNum : 0
|
|
|
|
|
}}</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<p @click="handleLook(0)">
|
|
|
|
|
<span>离线率</span>
|
|
|
|
|
<span
|
|
|
|
|
>{{
|
|
|
|
|
@ -29,7 +29,7 @@
|
|
|
|
|
>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<span>在线率</span>
|
|
|
|
|
<span @click="handleLook(1)">在线率</span>
|
|
|
|
|
<span
|
|
|
|
|
>{{
|
|
|
|
|
termDataNum.onlinePercent
|
|
|
|
|
@ -46,39 +46,7 @@
|
|
|
|
|
<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> -->
|
|
|
|
|
|
|
|
|
|
<el-dialog
|
|
|
|
|
class="exportDialog"
|
|
|
|
|
title="装置列表"
|
|
|
|
|
@ -86,7 +54,10 @@
|
|
|
|
|
:visible.sync="dialogTableVisible"
|
|
|
|
|
>
|
|
|
|
|
<div class="exportList" v-loading="exportLoading">
|
|
|
|
|
<el-button class="exportbtn" type="primary" @click="handleExport()"
|
|
|
|
|
<el-button
|
|
|
|
|
class="exportbtn"
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="handleExport(paramsLineVal)"
|
|
|
|
|
>导出</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-table
|
|
|
|
|
@ -107,6 +78,8 @@
|
|
|
|
|
label="最新图片拍照时间"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column prop="isonline" label="是否在线"></el-table-column>
|
|
|
|
|
<el-table-column prop="longitude" label="经度"></el-table-column>
|
|
|
|
|
<el-table-column prop="latitude" label="纬度"></el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
@ -145,6 +118,7 @@ export default {
|
|
|
|
|
dialogTableVisible: false,
|
|
|
|
|
onLineData: [],
|
|
|
|
|
exportLoading: false,
|
|
|
|
|
paramsLineVal: "",
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
@ -153,8 +127,6 @@ export default {
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getDateTime(); //获取当前时间
|
|
|
|
|
this.getTermData();
|
|
|
|
|
this.getWeekAlarmStatistics();
|
|
|
|
|
this.getTodayAlarmStatistics();
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
"$store.state.collapse"(val) {
|
|
|
|
|
@ -163,17 +135,19 @@ export default {
|
|
|
|
|
//echarts得重绘方法
|
|
|
|
|
this.myChart1.resize();
|
|
|
|
|
this.myChart2.resize();
|
|
|
|
|
this.myChart3.resize();
|
|
|
|
|
this.myChart4.resize();
|
|
|
|
|
}, 300);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
//查看在线列表
|
|
|
|
|
handleLook() {
|
|
|
|
|
handleLook(val) {
|
|
|
|
|
console.log(val);
|
|
|
|
|
this.paramsLineVal = val;
|
|
|
|
|
this.dialogTableVisible = true;
|
|
|
|
|
this.exportLoading = true;
|
|
|
|
|
getOnlineTerminalList()
|
|
|
|
|
getOnlineTerminalList({
|
|
|
|
|
type: val,
|
|
|
|
|
})
|
|
|
|
|
.then((res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
this.onLineData = res.data;
|
|
|
|
|
@ -183,14 +157,14 @@ export default {
|
|
|
|
|
.catch((err) => {});
|
|
|
|
|
},
|
|
|
|
|
//导出
|
|
|
|
|
handleExport() {
|
|
|
|
|
window.location.href = "/api/api/getOnlineTerminalListExcel";
|
|
|
|
|
handleExport(val) {
|
|
|
|
|
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() {
|
|
|
|
|
@ -220,36 +194,14 @@ 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(() => {
|
|
|
|
|
console.log(this.termDataNum);
|
|
|
|
|
this.$echarts.init(document.getElementById("echart2")).dispose();
|
|
|
|
|
this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
|
|
|
|
|
let that = this;
|
|
|
|
|
that.$echarts.init(document.getElementById("echart2")).dispose();
|
|
|
|
|
that.myChart2 = this.$echarts.init(document.getElementById("echart2"));
|
|
|
|
|
let option = {
|
|
|
|
|
// title: {
|
|
|
|
|
// text: "装置在线统计",
|
|
|
|
|
@ -265,14 +217,12 @@ export default {
|
|
|
|
|
top: 20,
|
|
|
|
|
bottom: 20,
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: "pie",
|
|
|
|
|
// minAngle: 45, //最小角度
|
|
|
|
|
// startAngle: 180, //起始角度
|
|
|
|
|
radius: ["40%", "70%"],
|
|
|
|
|
avoidLabelOverlap: false,
|
|
|
|
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
borderRadius: 10,
|
|
|
|
|
borderColor: "#fff",
|
|
|
|
|
@ -280,14 +230,14 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
fontWeight: "normal",
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
formatter: "{b}\n{d}%",
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
fontSize: 26,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
formatter: "{b}\n{d}%",
|
|
|
|
|
},
|
|
|
|
|
@ -296,161 +246,23 @@ export default {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
data: [
|
|
|
|
|
{ value: this.termDataNum.onlineNum, name: "在线" },
|
|
|
|
|
{ value: this.termDataNum.offlineNum, name: "离线" },
|
|
|
|
|
{ value: that.termDataNum.onlineNum, name: "在线" },
|
|
|
|
|
{ value: that.termDataNum.offlineNum, name: "离线" },
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
this.myChart2.setOption(option);
|
|
|
|
|
that.myChart2.setOption(option);
|
|
|
|
|
window.addEventListener("resize", () => {
|
|
|
|
|
this.myChart2.resize();
|
|
|
|
|
that.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",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
//与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
|
|
|
|
|
top: "10%",
|
|
|
|
|
left: "10%",
|
|
|
|
|
right: "10%",
|
|
|
|
|
bottom: "13%",
|
|
|
|
|
},
|
|
|
|
|
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: 14,
|
|
|
|
|
fontWeight: "normal",
|
|
|
|
|
formatter: "{b}\n{d}%",
|
|
|
|
|
},
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
fontWeight: "normal",
|
|
|
|
|
formatter: "{b}\n{d}%",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
},
|
|
|
|
|
data: arr,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
this.myChart4.setOption(option);
|
|
|
|
|
window.addEventListener("resize", () => {
|
|
|
|
|
this.myChart4.resize();
|
|
|
|
|
that.myChart2.on("click", function (params) {
|
|
|
|
|
console.log(params);
|
|
|
|
|
if (params.name == "在线") {
|
|
|
|
|
that.handleLook(1);
|
|
|
|
|
} else {
|
|
|
|
|
that.handleLook(0);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
@ -507,6 +319,9 @@ export default {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
|
&:hover {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
&:first-child {
|
|
|
|
|
&:hover {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
fanluyan
2 years ago