1

src/views/modules/load-data/index.vue

@@ -69,17 +69,40 @@
               class="item-label"
               >归属县旗</label
             >
-            <el-select
-              style="width: 100%"
-              v-model="searchForm.compNm"
-              placeholder="归属县旗"
-              @keydown.enter.native="search()"
-              clearable
-            >
+            <el-select style="width: 100%" v-model="searchForm.compNm" placeholder="归属县旗" @keydown.enter.native="search()" clearable>
               <el-option v-for="item in compList" :key="item.value" :label="item.label" :value="item.label" />
             </el-select>
           </div>
-
+          <div
+            :style="{
+              alignItems: 'center',
+              margin: '0 10px 0 0',
+              display: 'flex',
+            }"
+          >
+            <label
+              :style="{
+                margin: '0 10px 0 0',
+                whiteSpace: 'nowrap',
+                color: '#666',
+                display: 'inline-block',
+                lineHeight: '40px',
+                fontSize: 'inherit',
+                fontWeight: '500',
+                height: '40px',
+              }"
+              class="item-label"
+              >日期</label
+            >
+            <el-date-picker
+              v-model="searchForm.dateRange"
+              type="daterange"
+              value-format="yyyy-MM-dd"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            ></el-date-picker>
+          </div>
           <el-button class="search" type="success" @click="search()">
             <span
               class="icon iconfont icon-fangdajing07"
@@ -131,6 +154,19 @@
             ></span>
             导入
           </el-button>
+          <el-button class="add" type="danger" @click="exportTemplate()">
+            <span
+              class="icon iconfont icon-xihuan"
+              :style="{
+                margin: '0 2px',
+                fontSize: '14px',
+                color: '#fff',
+                display: 'none',
+                height: '34px',
+              }"
+            ></span>
+            模板下载
+          </el-button>
         </el-row>
       </el-form>
       <div
@@ -163,13 +199,13 @@
         >
           <el-table-column :resizable="true" type="selection" align="center" width="50"></el-table-column>
           <el-table-column :resizable="true" :sortable="true" label="序号" type="index" width="50" />
-		  <el-table-column :resizable="true" :sortable="true" prop="dataDate" label="日期" />
+          <el-table-column :resizable="true" :sortable="true" prop="dataDate" label="日期" />
           <el-table-column :resizable="true" :sortable="true" prop="subNm" label="变电站">
             <template slot-scope="scope" :resizable="true" :sortable="true">
-			  {{scope.row.subNm  }}
+              {{ scope.row.subNm }}
             </template>
           </el-table-column>
-         <el-table-column :resizable="true" :sortable="true" prop="compNm" label="归属旗县">
+          <el-table-column :resizable="true" :sortable="true" prop="compNm" label="归属旗县">
             <template slot-scope="scope">
               {{ scope.row.compNm }}
             </template>
@@ -186,16 +222,16 @@
           </el-table-column>
           <el-table-column :resizable="true" :sortable="true" prop="mainCapacity" label="主变容量(MVA)">
             <template slot-scope="scope">
-              {{ scope.row.mainCapacity }}  
+              {{ scope.row.mainCapacity }}
             </template>
           </el-table-column>
-         <!-- <el-table-column :resizable="true" :sortable="true" prop="temperature" label="温度">
+          <!-- <el-table-column :resizable="true" :sortable="true" prop="temperature" label="温度">
             <template slot-scope="scope">
               {{ scope.row.temperature }}℃
             </template>
           </el-table-column> -->
           <el-table-column :resizable="true" :sortable="true" prop="peakLoad" label="最大负荷(MW)" />
-		  <el-table-column :resizable="true" :sortable="true" prop="loadRate" label="负载率(%)" />
+          <el-table-column :resizable="true" :sortable="true" prop="loadRate" label="负载率(%)" />
           <el-table-column :resizable="true" :sortable="true" prop="baseLoad" label="基础负荷(MW)" />
           <el-table-column :resizable="true" :sortable="true" prop="electricHeatingLoad" label="电采暖负荷(MW)" />
           <el-table-column :resizable="true" :sortable="true" prop="usersNum" label="用户数" />
@@ -280,6 +316,7 @@ export default {
       searchForm: {
         subNm: '',
         compNm: '',
+        dateRange: [],
       },
       dataList: [],
       pageIndex: 1,
@@ -314,6 +351,28 @@ export default {
     importHandler() {
       this.$refs.uploadModal.openDialog();
     },
+    exportTemplate() {
+      this.$http({
+        url: `/file/download/`,
+        method: 'get',
+        params: {
+          fileName: 'voltageLoad_template.xlsx',
+        },
+        responseType: 'blob',
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          const blob = new Blob([data], { type: 'application/vnd.ms-excel' });
+          const fileName = '模板.xlsx';
+          const a = document.createElement('a');
+          a.href = URL.createObjectURL(blob);
+          a.download = fileName;
+          a.click();
+          URL.revokeObjectURL(a.href);
+        } else {
+          this.$message.error(data.msg || '导出失败');
+        }
+      });
+    },
     search() {
       this.pageIndex = 1;
       this.getDataList();
@@ -333,6 +392,10 @@ export default {
       if (this.searchForm.compNm != '' && this.searchForm.compNm != undefined) {
         params['compNm'] = '%' + this.searchForm.compNm + '%';
       }
+      if (this.searchForm.dateRange != '' && this.searchForm.dateRange != undefined) {
+        params['data_date_start'] = this.searchForm.dateRange[0];
+        params['data_date_end'] = this.searchForm.dateRange[1];
+      }
       this.$http({
         url: '/subLoad/page',
         method: 'get',