|
|
@ -8,21 +8,35 @@
|
|
|
|
> -->
|
|
|
|
> -->
|
|
|
|
<div class="bottomM">
|
|
|
|
<div class="bottomM">
|
|
|
|
<div class="infoBox">
|
|
|
|
<div class="infoBox">
|
|
|
|
<p @click="handleLook">
|
|
|
|
<p @click="handleLook(-1)">
|
|
|
|
<span>装置总数</span>
|
|
|
|
<span>装置总数</span>
|
|
|
|
<span>{{ termDataNum.totalNum }}</span>
|
|
|
|
<span>{{ termDataNum.totalNum ? termDataNum.totalNum : 0 }}</span>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<p @click="handleLook(1)">
|
|
|
|
<span>在线数量</span>
|
|
|
|
<span>在线数量</span>
|
|
|
|
<span>{{ termDataNum.onlineNum }}</span>
|
|
|
|
<span>{{
|
|
|
|
|
|
|
|
termDataNum.onlineNum ? termDataNum.onlineNum : 0
|
|
|
|
|
|
|
|
}}</span>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<p @click="handleLook(0)">
|
|
|
|
<span>离线率</span>
|
|
|
|
<span>离线率</span>
|
|
|
|
<span>{{ (termDataNum.offlinePercent * 100).toFixed(2) }}%</span>
|
|
|
|
<span
|
|
|
|
|
|
|
|
>{{
|
|
|
|
|
|
|
|
termDataNum.offlinePercent
|
|
|
|
|
|
|
|
? (termDataNum.offlinePercent * 100).toFixed(2)
|
|
|
|
|
|
|
|
: 0
|
|
|
|
|
|
|
|
}}%</span
|
|
|
|
|
|
|
|
>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<p>
|
|
|
|
<p>
|
|
|
|
<span>在线率</span>
|
|
|
|
<span @click="handleLook(0)">在线率</span>
|
|
|
|
<span>{{ (termDataNum.onlinePercent * 100).toFixed(2) }}%</span>
|
|
|
|
<span
|
|
|
|
|
|
|
|
>{{
|
|
|
|
|
|
|
|
termDataNum.onlinePercent
|
|
|
|
|
|
|
|
? (termDataNum.onlinePercent * 100).toFixed(2)
|
|
|
|
|
|
|
|
: 0
|
|
|
|
|
|
|
|
}}%</span
|
|
|
|
|
|
|
|
>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -156,10 +170,13 @@ export default {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
//查看在线列表
|
|
|
|
//查看在线列表
|
|
|
|
handleLook() {
|
|
|
|
handleLook(val) {
|
|
|
|
|
|
|
|
console.log(val);
|
|
|
|
this.dialogTableVisible = true;
|
|
|
|
this.dialogTableVisible = true;
|
|
|
|
this.exportLoading = true;
|
|
|
|
this.exportLoading = true;
|
|
|
|
getOnlineTerminalList()
|
|
|
|
getOnlineTerminalList({
|
|
|
|
|
|
|
|
type: val,
|
|
|
|
|
|
|
|
})
|
|
|
|
.then((res) => {
|
|
|
|
.then((res) => {
|
|
|
|
console.log(res);
|
|
|
|
console.log(res);
|
|
|
|
this.onLineData = res.data;
|
|
|
|
this.onLineData = res.data;
|
|
|
@ -234,8 +251,9 @@ export default {
|
|
|
|
getEchart2() {
|
|
|
|
getEchart2() {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
this.$nextTick(() => {
|
|
|
|
console.log(this.termDataNum);
|
|
|
|
console.log(this.termDataNum);
|
|
|
|
this.$echarts.init(document.getElementById("echart2")).dispose();
|
|
|
|
let that = this;
|
|
|
|
this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
|
|
|
|
that.$echarts.init(document.getElementById("echart2")).dispose();
|
|
|
|
|
|
|
|
that.myChart2 = this.$echarts.init(document.getElementById("echart2"));
|
|
|
|
let option = {
|
|
|
|
let option = {
|
|
|
|
// title: {
|
|
|
|
// title: {
|
|
|
|
// text: "装置在线统计",
|
|
|
|
// text: "装置在线统计",
|
|
|
@ -280,15 +298,23 @@ export default {
|
|
|
|
show: true,
|
|
|
|
show: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data: [
|
|
|
|
data: [
|
|
|
|
{ value: this.termDataNum.onlineNum, name: "在线" },
|
|
|
|
{ value: that.termDataNum.onlineNum, name: "在线" },
|
|
|
|
{ value: this.termDataNum.offlineNum, name: "离线" },
|
|
|
|
{ value: that.termDataNum.offlineNum, name: "离线" },
|
|
|
|
],
|
|
|
|
],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
};
|
|
|
|
};
|
|
|
|
this.myChart2.setOption(option);
|
|
|
|
that.myChart2.setOption(option);
|
|
|
|
window.addEventListener("resize", () => {
|
|
|
|
window.addEventListener("resize", () => {
|
|
|
|
this.myChart2.resize();
|
|
|
|
that.myChart2.resize();
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
that.myChart2.on("click", function (params) {
|
|
|
|
|
|
|
|
console.log(params);
|
|
|
|
|
|
|
|
if (params.name == "在线") {
|
|
|
|
|
|
|
|
that.handleLook(1);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
that.handleLook(0);
|
|
|
|
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
@ -491,6 +517,9 @@ export default {
|
|
|
|
flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: space-around;
|
|
|
|
justify-content: space-around;
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
}
|
|
|
|
&:first-child {
|
|
|
|
&:first-child {
|
|
|
|
&:hover {
|
|
|
|
&:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|