diff --git a/src/views/stritl/index.vue b/src/views/stritl/index.vue index 9881282..7e916fd 100644 --- a/src/views/stritl/index.vue +++ b/src/views/stritl/index.vue @@ -8,17 +8,17 @@ > -->
-

+

装置总数 {{ 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;