添加导出

src/views/stritl/index.vue

@@ -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
@@ -86,7 +86,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 +110,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 +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;