-
+
装置总数
{{ termDataNum.totalNum ? termDataNum.totalNum : 0 }}
-
+
在线数量
{{
termDataNum.onlineNum ? termDataNum.onlineNum : 0
}}
-
+
离线率
{{
@@ -29,7 +29,7 @@
>
- 在线率
+ 在线率
{{
termDataNum.onlinePercent
@@ -86,7 +86,10 @@
:visible.sync="dialogTableVisible"
>
- 导出
+
+
@@ -145,6 +150,7 @@ export default {
dialogTableVisible: false,
onLineData: [],
exportLoading: false,
+ paramsLineVal: "",
};
},
created() {
@@ -170,12 +176,18 @@ export default {
},
methods: {
//查看在线列表
- handleLook() {
+ handleLook(val) {
+ console.log(val);
+ this.paramsLineVal = val;
this.dialogTableVisible = true;
this.exportLoading = true;
- getOnlineTerminalList()
+ this.onLineData = [];
+ getOnlineTerminalList({
+ type: val,
+ })
.then((res) => {
console.log(res);
+
this.onLineData = res.data;
this.exportLoading = false;
console.log(this.onLineData);
@@ -183,8 +195,9 @@ 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() {
@@ -248,8 +261,9 @@ export default {
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 +279,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 +292,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,15 +308,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();
+ });
+ that.myChart2.on("click", function (params) {
+ console.log(params);
+ if (params.name == "在线") {
+ that.handleLook(1);
+ } else {
+ that.handleLook(0);
+ }
});
});
},
@@ -329,7 +349,7 @@ export default {
top: "10%",
left: "10%",
right: "10%",
- bottom: "13%",
+ bottom: "10%",
},
xAxis: {
type: "category",
@@ -429,15 +449,15 @@ export default {
},
label: {
show: true,
- fontSize: 14,
- fontWeight: "normal",
+ fontSize: 16,
+ fontWeight: "bold",
formatter: "{b}\n{d}%",
},
emphasis: {
label: {
show: true,
- fontSize: 14,
- fontWeight: "normal",
+ fontSize: 26,
+ fontWeight: "bold",
formatter: "{b}\n{d}%",
},
},
@@ -507,6 +527,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;