init

src/views/Equipment/equipmentDetailList.vue

@@ -122,7 +122,7 @@
         <div class="alllistbox">
           <div
             class="alllist"
-            @click="compareChange(0)"
+            @click="compareChange(0,'设备总数')"
             :class="compareFlag == 0 ? 'active' : 'noactive'"
           >
             <div class="alllist-text1">设备总数</div>
@@ -147,7 +147,7 @@
           </div>
           <div
             class="alllist"
-            @click="compareChange(1)"
+            @click="compareChange(1,'在线设备数')"
             :class="compareFlag == 1 ? 'active' : 'noactive'"
           >
             <div class="alllist-text1">在线设备数</div>
@@ -171,7 +171,7 @@
           </div>
           <div
             class="alllist"
-            @click="compareChange(2)"
+            @click="compareChange(2,'在线设备平均占比')"
             :class="compareFlag == 2 ? 'active' : 'noactive'"
           >
             <div class="alllist-text1">在线设备平均占比</div>
@@ -197,7 +197,7 @@
           </div>
           <div
             class="alllist"
-            @click="compareChange(3)"
+            @click="compareChange(3,'活跃设备数')"
             :class="compareFlag == 3 ? 'active' : 'noactive'"
           >
             <div class="alllist-text1">活跃设备数</div>
@@ -221,7 +221,7 @@
           </div>
           <div
             class="alllist"
-            @click="compareChange(4)"
+            @click="compareChange(4,'活跃设备平均占比')"
             :class="compareFlag == 4 ? 'active' : 'noactive'"
           >
             <div class="alllist-text1">活跃设备平均占比</div>
@@ -247,7 +247,7 @@
           </div>
           <div
             class="alllist"
-            @click="compareChange(5)"
+            @click="compareChange(5,'指派次数')"
             :class="compareFlag == 5 ? 'active' : 'noactive'"
           >
             <div class="alllist-text1">指派次数</div>
@@ -271,7 +271,7 @@
           </div>
           <div
             class="alllist"
-            @click="compareChange(6)"
+            @click="compareChange(6,'完整录音次数')"
             :class="compareFlag == 6 ? 'active' : 'noactive'"
           >
             <div class="alllist-text1">完整录音次数</div>
@@ -297,7 +297,7 @@
           </div>
           <div
             class="alllist"
-            @click="compareChange(7)"
+            @click="compareChange(7,'完整录音占比')"
             :class="compareFlag == 7 ? 'active' : 'noactive'"
           >
             <div class="alllist-text1">完整录音占比</div>
@@ -323,7 +323,7 @@
           </div>
           <div
             class="alllist"
-            @click="compareChange(8)"
+            @click="compareChange(8,'部分录音')"
             :class="compareFlag == 8 ? 'active' : 'noactive'"
           >
             <div class="alllist-text1">部分录音</div>
@@ -351,7 +351,7 @@
           </div>
           <div
             class="alllist"
-            @click="compareChange(9)"
+            @click="compareChange(9,'未录音')"
             :class="compareFlag == 9 ? 'active' : 'noactive'"
           >
             <div class="alllist-text1">未录音</div>
@@ -375,7 +375,7 @@
           </div>
           <div
             class="alllist"
-            @click="compareChange(10)"
+            @click="compareChange(10,'正常关机次数')"
             :class="compareFlag == 10 ? 'active' : 'noactive'"
           >
             <div class="alllist-text1">正常关机次数</div>
@@ -403,7 +403,7 @@
           </div>
           <div
             class="alllist"
-            @click="compareChange(11)"
+            @click="compareChange(11,'低电关机次数')"
             :class="compareFlag == 11 ? 'active' : 'noactive'"
           >
             <div class="alllist-text1">低电关机次数</div>
@@ -431,7 +431,7 @@
           </div>
           <div
             class="alllist"
-            @click="compareChange(12)"
+            @click="compareChange(12,'异常关机次数')"
             :class="compareFlag == 12 ? 'active' : 'noactive'"
           >
             <div class="alllist-text1">异常关机次数</div>
@@ -459,6 +459,13 @@
           </div>
         </div>
       </div>
+    </div>
+        <!-- v-if="selectTime1" -->
+    <div style="margin-top: 20px" >
+      <div class="zgutteruo">
+        <div class="zgutteruo-tit">对比</div>
+        <div id="compare" style="width: 100%; height: 360px"></div>
+      </div>
     </div>
     <div style="margin-top: 20px" v-if="!selectTime1">
       <el-row :gutter="40">
@@ -476,12 +483,6 @@
         </el-col>
       </el-row>
     </div>
-    <div style="margin-top: 20px" v-if="selectTime1">
-      <div class="zgutteruo">
-        <div class="zgutteruo-tit">对比</div>
-        <div id="compare" style="width: 100%; height: 360px"></div>
-      </div>
-    </div>
     <div class="tablebox" v-if="!selectTime1">
       <template>
         <el-table :data="tableData" style="width: 100%">
@@ -760,7 +761,7 @@ export default {
         lowElectricityQuantity: "",
         abnormalShutdownQuantity: "",
       },
-      pageSize: 6,
+      pageSize: 10,
       pageNum: 1,
       total: 10,
       allCompare: {},
@@ -856,10 +857,10 @@ export default {
         },
       });
     },
-    compareChange(idx) {
+    compareChange(idx,str) {
       // if (!this.selectTime1) return;
       this.compareFlag = idx;
-      this.tabChange(idx);
+      this.tabChange(idx,str);
     },
     timeChange(e) {
       this.selectTime = "";
@@ -1037,7 +1038,7 @@ export default {
       this.compareFlag = 0;
       let obj = {
         current: this.pageNum,
-        pageSize: this.pageNum,
+        pageSize: this.pageSize,
         startDate: this.page.openTime,
         endDate: this.page.closeTime,
         houseId: this.houseId,
@@ -1085,15 +1086,16 @@ export default {
           });
           this.compareList = arr;
           // console.log(this.compareList,'123')
-          this.tabChange(0);
+          this.tabChange(0,'设备总数');
         })
         .catch((err) => {
           // console.log(err)
           this.compareList = [];
+          this.tabChange(0,'设备总数');
         });
     },
     //处理数据
-    tabChange(idx) {
+    tabChange(idx,str1) {
       //首先获取到给定的标志，对数据进行操作和赋值
       //判断情况
       // 	console.log(idx)
@@ -1236,7 +1238,87 @@ export default {
           myChart.resize();
         });
       } else {
-        console.log("第一种");
+        // console.log(this.allCompare,"第一种");
+        let timeDate = [];
+        let arr1 = [];
+        this.allCompare.data.first.records.map(item=>{
+          timeDate.push(item.createTime.substring(5))
+          arr1.push(item[str])
+        })
+        // console.log(timeDate,arr1);
+         var chartDom = document.getElementById("compare");
+        echarts.init(chartDom).dispose();
+        var myChart = echarts.init(chartDom);
+        var option;
+                option = {
+          tooltip: {
+            trigger: "axis",
+          },
+          legend: {
+            data: [str1],
+            bottom: "10",
+          },
+          grid: {
+            left: 10,
+            right: 10,
+            containLabel: true,
+          },
+          xAxis: {
+            type: "category",
+            data: timeDate,
+            axisLabel: {
+              //重点在这一块，其余可以忽略
+              textStyle: {
+                color: "#212121", //更改坐标轴文字颜色
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                type: "solid",
+                color: "#DDE1EE", //x线的颜色
+                width: "1", //坐标线的宽度
+              },
+            },
+          },
+          yAxis: {
+            type: "value",
+            splitNumber: 4,
+            axisLabel: {
+              //重点在这一块，其余可以忽略
+              textStyle: {
+                color: "#212121", //更改坐标轴文字颜色
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                ype: "solid",
+                color: "#DDE1EE", //x线的颜色
+                width: "1", //坐标线的宽度
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed", // y轴分割线类型
+              },
+            },
+            axisTick: {
+              //y轴刻度线
+              show: false,
+            },
+          },
+          series: [
+            {
+              name: str1,
+              data: arr1,
+              type: "line",
+              smooth: true,
+            },
+          ],
+        };
+        option && myChart.setOption(option);
+        window.addEventListener("resize", () => {
+          myChart.resize();
+        });
       }
     },
     //获取统计数据

src/views/Equipment/index.vue

@@ -1353,7 +1353,7 @@ export default {
       })
         .then(() => {
           this.$api.api
-            .equipmentUnbind({
+            .zkequipmentEquipmentBack({
               imeis: row.imei,
             })
             .then((res) => {