能耗排名

src/views/HandlerPage/EnergyConsumptionPage.vue

 
 <template>
-  <div class="contentBlock" id="contentBlock">
+  <div
+    class="contentBlock"
+    id="contentBlock"
+    v-loading.fullscreen.lock="fullscreenLoading"
+    element-loading-background="rgba(122, 122, 122, 0.6)"
+  >
     <el-card class="card-contianer">
       <el-form
         :inline="true"
@@ -16,7 +21,7 @@
             inactive-text="实时排行"
             style="
               --el-switch-on-color: #13ce66;
-              --el-switch-off-color: #ff4949;
+              --el-switch-off-color: #6589ff;
               min-width: 130px;
             "
             @change="changeFun"
@@ -94,14 +99,12 @@
             <el-checkbox name="type" label="民建">民建 </el-checkbox>
           </el-checkbox-group>
         </el-form-item>
-        <el-form-item>
-          <el-button type="primary" style="min-width: 70px" @click="sendClick"
-            >查询</el-button
+        <div style="position: absolute; top: 25px; right: 2%">
+          <el-button type="primary" @click="sendClick">查询</el-button
+          ><el-button type="primary" @click="exportTableToExcel"
+            >导出表格</el-button
           >
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" style="min-width: 70px">导出表格</el-button>
-        </el-form-item>
+        </div>
       </el-form>
       <div class="titInfoBlock">
         <table class="titBlock" style="width: 98%; margin: 0; padding: 0">
@@ -123,15 +126,14 @@
               <div class="tit">民建换热站</div>
               <div class="left">
                 <div>
-                  <span>{{ overviewList.civilCount }}</span
-                  >座
+                  <span>{{ overviewList.civilCount }}</span> 座
                 </div>
                 <div class="sub">机组数量</div>
               </div>
               <div class="right">
                 <div>
-                  <span>{{ (overviewList.civilArea / 10000).toFixed(2) }}</span
-                  >万平米
+                  <span>{{ (overviewList.civilArea / 10000).toFixed(2) }}</span>
+                  万平米
                 </div>
                 <div class="sub">供热面积</div>
               </div>
@@ -146,15 +148,14 @@
               <div class="tit">公建换热站</div>
               <div class="left">
                 <div>
-                  <span>{{ overviewList.pbCount }}</span
-                  >座
+                  <span>{{ overviewList.pbCount }}</span> 座
                 </div>
                 <div class="sub">机组数量</div>
               </div>
               <div class="right">
                 <div>
-                  <span>{{ (overviewList.pbArea / 10000).toFixed(2) }}</span
-                  >万平米
+                  <span>{{ (overviewList.pbArea / 10000).toFixed(2) }}</span>
+                  万平米
                 </div>
                 <div class="sub">供热面积</div>
               </div>
@@ -169,15 +170,15 @@
               <div class="tit">热量消耗</div>
               <div class="left">
                 <div>
-                  <span>{{ (overviewList.totalHeat / 10000).toFixed(2) }}</span
-                  >GJ
+                  <span>{{ (overviewList.totalHeat / 10000).toFixed(2) }}</span>
+                  GJ
                 </div>
                 <div class="sub">热总耗</div>
               </div>
               <div class="right">
                 <div>
-                  <span>{{ (overviewList.heatUc / 10000).toFixed(2) }}</span
-                  >W/㎡
+                  <span>{{ (overviewList.heatUc / 10000).toFixed(2) }}</span>
+                  W/㎡
                 </div>
                 <div class="sub">热单耗</div>
               </div>
@@ -192,15 +193,15 @@
               <div class="tit">电量消耗</div>
               <div class="left">
                 <div>
-                  <span>{{ (overviewList.totalElec / 10000).toFixed(2) }}</span
-                  >A
+                  <span>{{ (overviewList.totalElec / 10000).toFixed(2) }}</span>
+                  A
                 </div>
                 <div class="sub">电总耗</div>
               </div>
               <div class="right">
                 <div>
-                  <span>{{ (overviewList.elecUc / 10000).toFixed(2) }}</span
-                  >Kwh/㎡
+                  <span>{{ (overviewList.elecUc / 10000).toFixed(2) }}</span>
+                  Kwh/㎡
                 </div>
                 <div class="sub">电单耗</div>
               </div>
@@ -215,15 +216,17 @@
               <div class="tit">水量消耗</div>
               <div class="left">
                 <div>
-                  <span>{{ (overviewList.totalWater / 10000).toFixed(2) }}</span
-                  >T
+                  <span>{{
+                    (overviewList.totalWater / 10000).toFixed(2)
+                  }}</span>
+                  T
                 </div>
                 <div class="sub">水总耗</div>
               </div>
               <div class="right">
                 <div>
-                  <span>{{ (overviewList.waterUc / 10000).toFixed(2) }}</span
-                  >kg/㎡
+                  <span>{{ (overviewList.waterUc / 10000).toFixed(2) }}</span>
+                  kg/㎡
                 </div>
                 <div class="sub">水单耗</div>
               </div>
@@ -245,7 +248,7 @@
                 <th>排名</th>
                 <th>供热站名称</th>
                 <th>机组名称</th>
-                <th>数据</th>
+                <th>热单耗(W/㎡)</th>
               </tr>
               <tr v-for="item in topHeatUCList.value" :key="item.rankingIndex">
                 <td>{{ item.rankingIndex }}</td>
@@ -267,7 +270,7 @@
                 <th>排名</th>
                 <th>供热站名称</th>
                 <th>机组名称</th>
-                <th>数据</th>
+                <th>热耗(W/(㎡×℃))</th>
               </tr>
               <tr v-for="item in topDayHeatUC.value" :key="item.rankingIndex">
                 <td>{{ item.rankingIndex }}</td>
@@ -289,7 +292,7 @@
                 <th>排名</th>
                 <th>供热站名称</th>
                 <th>机组名称</th>
-                <th>数据</th>
+                <th>水单耗(Kg/㎡)</th>
               </tr>
               <tr v-for="item in topWaterUC.value" :key="item.rankingIndex">
                 <td>{{ item.rankingIndex }}</td>
@@ -311,7 +314,7 @@
                 <th>排名</th>
                 <th>供热站名称</th>
                 <th>机组名称</th>
-                <th>数据</th>
+                <th>电单耗(Kwh/㎡)</th>
               </tr>
               <tr v-for="item in topElecUC.value" :key="item.rankingIndex">
                 <td>{{ item.rankingIndex }}</td>
@@ -333,7 +336,7 @@
                 <th>排名</th>
                 <th>供热站名称</th>
                 <th>机组名称</th>
-                <th>数据</th>
+                <th>一网回温(℃)</th>
               </tr>
               <tr v-for="item in topElecUC.value" :key="item.rankingIndex">
                 <td>{{ item.rankingIndex }}</td>
@@ -355,7 +358,7 @@
                 <th>排名</th>
                 <th>供热站名称</th>
                 <th>机组名称</th>
-                <th>数据</th>
+                <th>流量(t/h/万㎡)</th>
               </tr>
               <tr v-for="item in topFirsFlow.value" :key="item.rankingIndex">
                 <td>{{ item.rankingIndex }}</td>
@@ -377,7 +380,7 @@
                 <th>排名</th>
                 <th>供热站名称</th>
                 <th>机组名称</th>
-                <th>数据</th>
+                <th>热效率</th>
               </tr>
               <tr v-for="item in topFirsFlow.value" :key="item.rankingIndex">
                 <td>{{ item.rankingIndex }}</td>
@@ -399,7 +402,7 @@
                 <th>排名</th>
                 <th>供热站名称</th>
                 <th>机组名称</th>
-                <th>数据</th>
+                <th>板换效率(%)</th>
               </tr>
               <tr v-for="item in topBHXLXJ1.value" :key="item.rankingIndex">
                 <td>{{ item.rankingIndex }}</td>
@@ -421,7 +424,7 @@
                 <th>排名</th>
                 <th>供热站名称</th>
                 <th>机组名称</th>
-                <th>数据</th>
+                <th>二网均温(℃)</th>
               </tr>
               <tr
                 v-for="item in topSecondTempAvg.value"
@@ -446,7 +449,7 @@
                 <th>排名</th>
                 <th>供热站名称</th>
                 <th>机组名称</th>
-                <th>数据</th>
+                <th>二网温差(℃)</th>
               </tr>
               <tr
                 v-for="item in topSecondTempAvg.value"
@@ -471,7 +474,7 @@
                 <th>排名</th>
                 <th>供热站名称</th>
                 <th>机组名称</th>
-                <th>数据</th>
+                <th>二网瞬时(t/h)</th>
               </tr>
               <tr
                 v-for="item in topSecondTempAvg.value"
@@ -496,7 +499,7 @@
                 <th>排名</th>
                 <th>供热站名称</th>
                 <th>机组名称</th>
-                <th>数据</th>
+                <th>流量(t/h/万㎡)</th>
               </tr>
               <tr
                 v-for="item in topSecondTempAvg.value"
@@ -604,6 +607,7 @@ const topFirsFlow = reactive({});
 const topBHXL = reactive({});
 const topBHXLXJ1 = reactive({});
 const topSecondTempAvg = reactive({});
+const fullscreenLoading = ref(false);
 const rules = {
   transferId: [{ required: true, message: "请选择换热机组", trigger: "blur" }],
   startTime: [{ required: true, message: "请选择开始时间", trigger: "blur" }],
@@ -669,13 +673,14 @@ function timeFun() {
 
 //换热站机组排名页概况
 function postOverviewFun(enertySend) {
+  fullscreenLoading.value = true;
   postOverview(enertySend).then((res) => {
     if (res.success === true) {
       overviewList.value = res.data[0];
-      console.log(overviewList);
     } else {
       ElMessage.error(res.message);
     }
+    fullscreenLoading.value = false;
   });
 }