能源抄表加统计

energyManagement/src/views/meterReadingManagement/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="main">
         <div class="search">
-            <el-radio-group v-model="mixins_query.categoryId" @change="mixins_search" class="zz-tab-button">
+            <el-radio-group v-model="mixins_query.categoryId" @change="searchs" class="zz-tab-button">
                 <el-radio-button :label="1">水表</el-radio-button>
                 <el-radio-button :label="2">电表</el-radio-button>
             </el-radio-group>
@@ -22,13 +22,27 @@
                 @input="toggleTime"
             >
             </el-date-picker>
-            <el-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
+            <el-button type="primary" class="search-btn" @click="searchs" icon="el-icon-search">查询 </el-button>
             <div class="search-icon">
                 <el-tooltip class="item" effect="light" placement="bottom" content="导出">
                     <i class="zoniot_font zoniot-icon-daochu2" @click="exportExcel"></i>
                 </el-tooltip>
             </div>
         </div>
+        <div class="Cube">
+            <div class="Cube-list totalBack">
+                <div class="title">抄表成功率</div>
+                <div class="number">{{ deftot.rate * 100 || 0 }}%</div>
+            </div>
+            <div class="Cube-list normalBack">
+                <div class="title">应抄{{ mixins_query.categoryId == 1 ? '水' : '电' }}表总数</div>
+                <div class="number">{{ deftot.total || 0 }}</div>
+            </div>
+            <div class="Cube-list abnormalBack">
+                <div class="title">抄收成功总数</div>
+                <div class="number">{{ deftot.success || 0 }}</div>
+            </div>
+        </div>
         <zz-table
             :cols="cols"
             :settings="{ showIndex: true, stripe: true }"
@@ -112,7 +126,8 @@ export default {
                     return +new Date(val) > +new Date();
                 }
             },
-            communityArr: []
+            communityArr: [],
+            deftot: { rate: 0, success: 0, total: 0 }
         };
     },
     created() {
@@ -121,10 +136,21 @@ export default {
 
         this.mixins_dataUrl = '/sc-energy/meter/read/record/page';
         this.mixins_query.categoryId = 1;
-        this.mixins_search();
+        this.searchs();
     },
     mounted() {},
     methods: {
+        searchs() {
+            this.mixins_search();
+            this.getTo();
+        },
+        getTo() {
+            this.$http.get('/sc-energy/meter/read/record/queryReadingRate', this.mixins_query).then(({ status, data, msg }) => {
+                if (0 === status && data) {
+                    this.deftot = data;
+                }
+            });
+        },
         getTypeDate(dateNum) {
             if (!dateNum) return '-';
             let da = new Date(Number(dateNum));
@@ -171,4 +197,36 @@ export default {
         margin-right: 20px;
     }
 }
+$totalColor: linear-gradient(135deg, #488fff 0%, #65dcff 100%);
+$normalColor: linear-gradient(315deg, #5eedcc 0%, #24c3f1 100%);
+$unusedColor: linear-gradient(135deg, #7178ff 0%, #d2a4ff 100%);
+.totalBack {
+    background: $totalColor !important;
+    color: white;
+}
+.normalBack {
+    background: $normalColor !important;
+    color: white;
+}
+.abnormalBack {
+    background: $unusedColor !important;
+    color: white;
+}
+.Cube {
+    display: flex;
+    justify-content: space-between;
+    margin: 20px 0;
+    font-size: 15px;
+    .Cube-list {
+        height: 84px;
+        background: #f5f7f7;
+        border-radius: 5px;
+        padding: 10px 10px 10px 30px;
+        box-sizing: border-box;
+        width: 30%;
+        .number {
+            font-size: 30px;
+        }
+    }
+}
 </style>