增加短期调控记录场站多选下拉框及样式

cpp-admin/src/main/java/com/cpp/web/controller/regulation/DqRegulationController.java

@@ -339,7 +339,8 @@ public class DqRegulationController {
     @GetMapping("/getDqRegulationRecordList")
     public R getDqRegulationRecordList(String stationCode, Long startTime,Long endTime) {
         QueryWrapper<TempShortRegulation> tempShortRegulationQueryWrapper = new QueryWrapper<>();
-        tempShortRegulationQueryWrapper.eq("station_code", stationCode);
+        String[] stationCodeSplit = stationCode.split(",");
+        tempShortRegulationQueryWrapper.in("station_code", stationCodeSplit);
         tempShortRegulationQueryWrapper.between("tk_date", new Date(startTime), new Date(endTime));
         tempShortRegulationQueryWrapper.orderByAsc("tk_date").orderByAsc("station_code").orderByAsc("forecast_date");
         List<TempShortRegulation> tempShortRegulationList = tempShortRegulationService.list(tempShortRegulationQueryWrapper);

cpp-ui/src/assets/styles/dark.scss

@@ -408,6 +408,11 @@ $table-header-background-color: #284266;
   .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
     background-color: rgba(15, 28, 49, 0.65);
   }
+
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+    //color: #1890ff;
+    background-color: transparent !important;
+  }
 }
 
 /* vue-treeselect*/

cpp-ui/src/views/regulation/dqRegulationRecord/index.vue

@@ -11,17 +11,44 @@
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
-          popper-class="cpp-popper"
+            popper-class="cpp-popper"
           />
         </el-form-item>
         <el-form-item label="场站名称">
-          <el-select v-model="stationCode" placeholder="请选择" popper-class="cpp-popper">
-            <el-option
-              v-for="item in stationList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
+          <el-select class="select-dropdown-checkbox"
+                     collapse-tags
+                     v-model="biddingStage"
+                     v-bind="$attrs"
+                     multiple
+                     style="width: 100%"
+                     placeholder="请选择线路"
+                     @change="handleSelect"
+                     popper-class="cpp-popper" :popper-append-to-body="false"
+          >
+            <div style="padding: 0 20px; line-height: 34px">
+              <el-checkbox
+                v-model="isCheckAll"
+                :indeterminate="isIndeterminate"
+                @change="handleCheckAllChange"
+              >所有场站
+              </el-checkbox
+              >
+            </div>
+            <el-checkbox-group v-model="biddingStage">
+              <el-option
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+                <el-checkbox
+                  style="pointer-events: none"
+                  :label="item.value"
+                >
+                  {{ item.label }}
+                </el-checkbox>
+              </el-option>
+            </el-checkbox-group>
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -73,6 +100,11 @@ export default {
   name: 'inverterinfo',
   data() {
     return {
+      isCheckAll: false, // 是否全选
+      isIndeterminate: false, //全选复选框标识
+      options: [],
+      biddingStage: [],
+
       expireDateOption: {
         disabledDate(time) {
           return time.getTime() > Date.now()
@@ -87,33 +119,71 @@ export default {
       stationCode: [],
       searchForm: {},
       tableData: [],
-      nameList:[],
+      nameList: [],
       loading: false,
       modId: '',//备用id
     }
   },
-  created(){
+  created() {
     // 获取场站下拉列表
     this.getStationCode()
   },
   mounted() {
+    // this.biddingStage = [ '京广高速','京包客专', '京哈高速','崇礼线','京沪高铁','京津城际']
 
+    // this.biddingStage.unshift('全选')
   },
   computed: {},
   methods: {
-    jumpCamera(row){
+    // 下拉框选择事件
+    handleSelect(value) {
+      const arr1 = this.options.filter((item) => {
+        return item !== '所有场站'
+      })
+      const selectArr = value.filter((item) => {
+        return item !== '所有场站'
+      })
+      const checkedCount = selectArr.length
+      this.isCheckAll = checkedCount === arr1.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < arr1.length
+      if (this.isCheckAll) {
+        this.biddingStage.unshift('所有场站')
+      } else {
+        this.biddingStage = this.biddingStage.filter((item) => {
+          return item !== '所有场站'
+        })
+      }
+    },
+    // 全选事件
+    handleCheckAllChange(val) {
+      const data = this.options.map(item => {
+        return item.value
+      })
+      if (val) {
+        this.biddingStage = data
+        this.biddingStage.unshift('所有场站')
+      } else {
+        this.biddingStage = []
+      }
+      this.isIndeterminate = false;
+    },
+
+    jumpCamera(row) {
       console.log(row)
     },
-    beforeQuery(){
+    beforeQuery() {
+      if (this.biddingStage.length == 0) {
+        this.$message.warning("请选择场站进行查询！")
+        return
+      }
       // 判断日期间隔最多不能超出30天
       let startTime = Math.round(this.dateTime[0])
       let endTime = Math.round(this.dateTime[1])
 
-      if(endTime-startTime> 60 * 60 * 24 * 1000*29){
-        this.$message.error("最多只能查询30天的数据！")
+      if (endTime - startTime > 60 * 60 * 24 * 1000 * 29) {
+        this.$message.warning("最多只能查询30天的数据！")
         return
       }
-
       this.dataQuery()
     },
     nameFormat({cellValue, row, column}) {
@@ -121,7 +191,7 @@ export default {
       return item ? item.label : ''
     },
     stationCodeFormat({cellValue, row, column}) {
-      const item = this.stationList.find(item => item.value === cellValue)
+      const item = this.options.find(item => item.value === cellValue)
       return item ? item.label : ''
     },
     handlePageChange({currentPage, pageSize}) {
@@ -131,21 +201,20 @@ export default {
     dataQuery() {
       let startTime = Math.round(this.dateTime[0])
       let endTime = Math.round(this.dateTime[1])
-      if (startTime>endTime) {
+      if (startTime > endTime) {
         this.$message.error("开始时间不能大于结束时间")
         return
       }
 
       this.loading = true
       let queryParams = {
-        "stationCode": this.stationCode,
+        "stationCode": this.biddingStage.join(','),
         "startTime": startTime,
         "endTime": endTime,
       }
 
       this.$axios.get('/dqRegulationController/getDqRegulationRecordList', {params: queryParams}).then(response => {
         this.tableData = response.data
-        console.log(this.tableData)
         this.total = response.data.length
         this.loading = false
       }).catch(() => {
@@ -154,13 +223,34 @@ export default {
     },
     async getStationCode() {
       await this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
-        this.stationList = response.data
-        if (this.stationList.length > 0) {
-          this.stationCode = this.stationList[0].value
-          // this.dataQuery()
+        this.options = response.data
+        if (this.options.length > 0) {
+          for (let i = 0; i < this.options.length; i++) {
+            this.biddingStage.push(this.options[i].value)
+          }
+          this.biddingStage.unshift('所有场站')
+          this.isCheckAll = true
+
         }
       })
     },
   }
 }
 </script>
+
+<style scoped>
+/deep/ .select-dropdown-checkbox .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
+  display: none;
+}
+
+/deep/ .select-dropdown-checkbox .el-checkbox {
+  color: #cddef1 !important;
+}
+
+/deep/ .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+  background-color: transparent !important;
+}
+/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #cddef1 !important;
+}
+</style>