代码提交

src/App.vue

@@ -1,11 +1,11 @@
 <template>
   <div id="app">
     <div class="top">
-      <div class="left">
+      <div class="left" text="盐都电力可视化系统">
         盐都电力可视化系统
       </div>
       <div class="middle">
-        <div class="router" :class="{'active':routerActive==index}" v-for="(item,index) in routerTitle" @click="handleChange(index)" :key="index">{{item}}</div>
+        <div class="router" :class="{'active':routerActive==index}" v-for="(item,index) in routerTitle" @click="handleChange(index)" :key="index" :text="item">{{item}}</div>
       </div>
       <div class="right">
         <div class="time">
@@ -52,7 +52,9 @@ export default {
       let that = this;
       this.routerActive = index
       if (this.routerActive == 0) {
-        that.$router.push({name:'home'})
+        if (this.$route.name != 'index') {
+          that.$router.push({name:'index'})
+        }
       }else if (this.routerActive == 3) {
         that.$router.push({name:'stationBuilding'})
       }
@@ -98,6 +100,13 @@ export default {
     text-align: left;
     box-sizing: border-box;
   }
+  .left:before{
+        content: attr(text);
+        position: absolute;
+        z-index: 10;
+        color:rgb(86, 254, 246);
+        -webkit-mask:linear-gradient(to top, rgb(86,244,254), transparent );
+    }
   .middle{
     width: auto;
     height: 78px;
@@ -115,7 +124,13 @@ export default {
       color: #ffffff;
       background: url('./assets/images/routerActive.png') no-repeat;
       background-size: 100% 100%;
-      
+    }
+    .active:before{
+        content: attr(text);
+        position: absolute;
+        z-index: 10;
+        color:rgb(86, 254, 246);
+        -webkit-mask:linear-gradient(to top, rgb(86,244,254), transparent );
     }
   }
   .right{

src/views/index.vue

@@ -178,13 +178,9 @@
             </el-option>
           </el-select>
         </div>
-        <div class="screen">
-          <div class="btn"></div>
-          <div class="btn"></div>
-        </div>
       </div>
       <div class="detailed">
-        <div class="two" style="height: 350px; width: 780px">
+        <div class="two" style="height: 350px; width: 780px;display: flex;flex-direction: column;align-items: center;">
           <div class="cartitle">
             <div class="titleFont">
             本周路线故障跳闸明细
@@ -460,6 +456,16 @@ export default {
       let dataPbty = [];
       dataPbty = res.data.data
       this.detailedFive(dataPbty);
+      console.log(dataPbty,'配变停运');
+      let dataPb = [];
+      let dataCf = [];
+      for (let i = 0; i < dataPbty.length; i++) {
+        dataPb.push(dataPbty[i].pbsl);
+        dataCf.push(dataPbty[i].cftytc);
+      }
+      this.topContent[0].count = dataPb.reduce((x, y) => x + y)
+      this.topContent[1].count = dataCf.reduce((x, y) => x + y)
+      console.log(dataCf.reduce((x, y) => x + y),'总数');
     })
     this.handleDate(0);
     let that = this;
@@ -620,7 +626,6 @@ export default {
       myChart.setOption(option);
     },
      detailedTwo(dataGdzl){
-       console.log(dataGdzl,'供电质量');
        let gdsList = [];
        let xlcczList =  [];
        let pbcczList = [];
@@ -1233,7 +1238,6 @@ export default {
       
     },
     detailedFive(dataPbty){
-      console.log(dataPbty,'dataPbty');
       let dataListx = [];
       let dataPb = [];
       let dataGz = [];
@@ -1457,6 +1461,14 @@ export default {
           let dataPbty = [];
           dataPbty = res.data.data
           this.detailedFive(dataPbty);
+          let dataPb = [];
+          let dataCf = [];
+          for (let i = 0; i < dataPbty.length; i++) {
+            dataPb.push(dataPbty[i].pbsl);
+            dataCf.push(dataPbty[i].cftytc);
+          }
+          this.topContent[0].count = dataPb.reduce((x, y) => x + y)
+          this.topContent[1].count = dataCf.reduce((x, y) => x + y)
         })
       }else if (index == 1) {
         //月配变停运
@@ -1466,6 +1478,14 @@ export default {
           let dataPbty = [];
           dataPbty = res.data.data
           this.detailedFive(dataPbty);
+          let dataPb = [];
+          let dataCf = [];
+          for (let i = 0; i < dataPbty.length; i++) {
+            dataPb.push(dataPbty[i].pbsl);
+            dataCf.push(dataPbty[i].cftytc);
+          }
+          this.topContent[0].count = dataPb.reduce((x, y) => x + y)
+          this.topContent[1].count = dataCf.reduce((x, y) => x + y)
         })
       }
     },
@@ -1705,19 +1725,23 @@ export default {
           background-size: 100% 100%;
         }
         
-      };
+       };
     }
+      
       .two{
-     .detailedOneList{
+      .detailedOneList{
        display: flex;
         flex-direction: row;
         justify-content: space-evenly;
         height: 10%;
         align-items: center;
         color:#ffffff;
-        background: rgb(18,54,87);
+        background: url("../assets/images/tableBg.png") no-repeat;
+        background-size: 100% 100%;
+        width:96%;
      }
-   }
+    }
+      
     .detailed {
       display: flex;
       flex-flow: row nowrap;