总发电效率排行页面修改

src/views/totalPowerRank/index.vue

@@ -1,46 +1,77 @@
 <template>
   <div class="draught-fan-list">
     <div class="query mg-b-8">
-			<div class="query-items">
+      <div class="query-items">
         <div class="query-item">
-					<div class="lable">类型：</div>
-					<div class="search-input">
-						<el-select v-model="typeId" clearable placeholder="请选择"
-							popper-class="select" @change="renderWprray">
-							<el-option v-for="item in typeArray" :key="item.id" :value="item.id" :label="item.name" />
-						</el-select>
-					</div>
-				</div>
-				<div class="query-item">
-					<div class="lable">场站：</div>
-					<div class="search-input">
-						<el-select v-model="wpId" clearable placeholder="请选择"
-							popper-class="select">
-							<el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
-						</el-select>
-					</div>
-				</div>
-				<div class="query-item">
-					<div class="lable">开始日期：</div>
-					<div class="search-input">
-						<el-date-picker v-model="beginDate" type="date"
-							value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
-						</el-date-picker>
-					</div>
-				</div>
+          <div class="lable">类型：</div>
+          <div class="search-input">
+            <el-select
+              v-model="wpIps"
+              clearable
+              placeholder="请选择"
+              popper-class="select"
+              @change="renderWprray"
+            >
+              <el-option
+                v-for="item in typeArray"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              />
+            </el-select>
+          </div>
+        </div>
         <div class="query-item">
-					<div class="lable">结束日期：</div>
-					<div class="search-input">
-						<el-date-picker v-model="endDate" type="date"
-							value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
-						</el-date-picker>
-					</div>
-				</div>
-			</div>
-			<div class="query-actions">
-				<button class="btn green" @click="search()">搜索</button>
-			</div>
-		</div>
+          <div class="lable">场站：</div>
+          <div class="search-input">
+            <el-select
+              v-model="wpId"
+              clearable
+              multiple
+              collapse-tags
+              placeholder="请选择"
+              popper-class="select"
+            >
+              <el-option
+                v-for="item in wpArray"
+                :key="item.id"
+                :value="item.id"
+                :label="item.name"
+              />
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">开始日期：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="beginDate"
+              type="date"
+              value-format="YYYY-MM-DD"
+              placeholder="选择日期"
+              popper-class="date-select"
+            >
+            </el-date-picker>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">结束日期：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="endDate"
+              type="date"
+              value-format="YYYY-MM-DD"
+              placeholder="选择日期"
+              popper-class="date-select"
+            >
+            </el-date-picker>
+          </div>
+        </div>
+      </div>
+      <div class="query-actions">
+        <button class="btn green" @click="search()">搜索</button>
+      </div>
+    </div>
     <div class="df-table">
       <ComTable height="100vh" :data="tableData"></ComTable>
     </div>
@@ -55,30 +86,22 @@ export default {
 
   // 使用组件
   components: {
-   ComTable
+    ComTable,
   },
 
   // 数据
   data() {
-    const that = this;
     return {
-      isAsc:"asc",
-      typeArray:[{
-        id:"",
-        name:"全部"
-      },{
-        id:"fc",
-        name:"风场"
-      },{
-        id:"gf",
-        name:"光伏电站"
-      }],
-      typeId:"",
-      wpArray:[],
-      wpId:"",
-      beginDate:new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
-      endDate:new Date().formatDate("yyyy-MM-dd"),
-      dialogShow:false,
+      isAsc: "asc",
+      typeArray: [],
+      wpIps: "",
+      wpArray: [],
+      wpId: [],
+      beginDate: new Date(new Date().getTime() - 3600 * 1000 * 24).formatDate(
+        "yyyy-MM-dd"
+      ),
+      endDate: new Date().formatDate("yyyy-MM-dd"),
+      dialogShow: false,
       tableData: {
         column: [
           {
@@ -86,46 +109,46 @@ export default {
             field: "windfarm",
             is_num: false,
             is_light: false,
-            sortable: true
+            sortable: true,
           },
           {
             name: "风机",
             field: "windturbine",
             is_num: false,
             is_light: false,
-            sortable: true
+            sortable: true,
           },
           {
             name: "起始日期",
             field: "beginDate",
             is_num: false,
             is_light: false,
-            sortable: true
+            sortable: true,
           },
           {
             name: "截止日期",
             field: "endDate",
             is_num: false,
             is_light: false,
-            sortable: true
+            sortable: true,
           },
           {
             name: "平均风速",
             field: "speed",
             is_num: false,
             is_light: false,
-            sortable: true
+            sortable: true,
           },
           {
             name: "发电量(万kwh)",
             field: "generatingCapacity",
             is_num: false,
             is_light: false,
-            sortable: true
-          }
+            sortable: true,
+          },
         ],
         data: [],
-      }
+      },
     };
   },
 
@@ -137,68 +160,97 @@ export default {
       that.API.requestData({
         method: "GET",
         subUrl: "powercompare/windfarmAllAjax",
-        data:{
-          type:that.typeId
+        data: {
+          type: that.typeId,
         },
         success(res) {
           that.allWpArray = res.data;
+          let fdc = [];
+          let gf = [];
+
+          res.data.forEach((ele) => {
+            if (ele.id.indexOf("FDC") !== -1) {
+              fdc.push(ele.id);
+            } else {
+              gf.push(ele.id);
+            }
+          });
+          that.typeArray = [
+            {
+              id: [].concat(fdc, gf).toString(),
+              name: "全部",
+            },
+            {
+              id: fdc.toString(),
+              name: "风场",
+            },
+            {
+              id: gf.toString(),
+              name: "光伏电站",
+            },
+          ];
+          that.wpIps = [].concat(fdc, gf).toString();
           that.renderWprray();
-        }
+        },
       });
     },
 
-    renderWprray(){
+    renderWprray() {
       let wpArray = [];
-      this.allWpArray.forEach(ele=>{
-        if(this.typeId === "fc"){
-          if(ele.id.indexOf("FDC") !== -1){
+      if (!this.wpIps) {
+        this.wpIps = []
+          .concat(this.typeArray[1].id.split(","), this.typeArray[2].id.split(","))
+          .toString();
+      }
+      this.allWpArray.forEach((ele) => {
+        if (this.wpIps.indexOf("FDC") !== -1) { 
+          if (ele.id.indexOf("FDC") !== -1) {
             wpArray.push(ele);
           }
-        }else if(this.typeId === "gf"){
-          if(ele.id.indexOf("GDC") !== -1){
+        } else if (this.wpIps.indexOf("GDC")) {
+          if (ele.id.indexOf("GDC") !== -1) {
             wpArray.push(ele);
           }
-        }else{
+        } else {
           wpArray.push(ele);
         }
       });
-      this.wpId = wpArray[0].id;
+      this.wpId = this.wpIps ? this.wpIps.split(",") : [];
       this.wpArray = wpArray;
       this.getOutputSpeedList();
     },
 
-    getOutputSpeedList(){
+    getOutputSpeedList() {
       let that = this;
-      if(!that.beginDate || !that.endDate){
+      if (!that.beginDate || !that.endDate) {
         that.BASE.showMsg({
-          msg:"日期不可为空"
+          msg: "日期不可为空",
         });
-      }else{
+      } else {
         that.API.requestData({
           method: "GET",
           subUrl: "leaderboard/totalPowerCapacityTopList",
-          data:{
-            wpId:that.wpId,
-            type:that.typeId,
-            isAsc:that.isAsc,
-            beginDate:that.beginDate,
-            endDate:that.endDate,
-            orderByColumn:"",
+          data: {
+            wpIps: that.wpId.length ? that.wpId.toString() : that.wpIps,
+            isAsc: that.isAsc,
+            beginDate: that.beginDate,
+            endDate: that.endDate,
+            orderByColumn: "",
           },
           success(res) {
-            res.data.forEach(ele=>{
-              ele.beginDate=new Date(ele.beginDate).formatDate("yyyy-MM-dd");
-              ele.endDate=new Date(ele.beginDate).formatDate("yyyy-MM-dd");
-            })
+            res.data.forEach((ele) => {
+              ele.beginDate = new Date(ele.beginDate).formatDate("yyyy-MM-dd");
+              ele.endDate = new Date(ele.beginDate).formatDate("yyyy-MM-dd");
+            });
             that.tableData.data = res.data;
-          }
+          },
         });
       }
     },
 
-    search(){
+    search() {
       this.getOutputSpeedList();
-    }
+    },
   },
 
   created() {
@@ -233,7 +285,7 @@ export default {
     overflow: hidden;
     flex-grow: 1;
     margin-top: 1.481vh;
-    height:80vh;
+    height: 80vh;
 
     &:before {
       content: "";