Element-ui el-date-picker 时间范围只能选择1天

<template>
  <div class="container">
    <div class="searchMar">
        <el-input class="handleInput" v-model="query.stnm" placeholder="站名" @input="handleInput" @change="handleSearch"></el-input>
        <!-- <el-select placeholder="请选择水厂" class="handleInput" v-model="query.awid">
            <el-option
                v-for="item in wfctCdData"
                :key="item.wfctCd"
                :label="item.wfctName"
                :value="item.wfctCd">
            </el-option>
        </el-select>
        <el-select placeholder="请选择监测要素" class="handleInput  marL" v-model="query.type">
            <el-option
                v-for="item in typeData"
                :key="item.code"
                :label="item.name"
                :value="item.code">
            </el-option>
        </el-select> -->
        <el-date-picker
            class="marL"
            v-model="query.date"
            type="datetimerange"
            format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions0"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
       
      <el-button
        icon="el-icon-search"
        class="marL"
        type="primary"
        plain
        @click="handleSearch"
        >搜索</el-button
      >
      <el-button
        icon="el-icon-refresh-right"
        style="margin-left: 0"
        type="primary"
        plain
        @click="handleReset"
        >重置</el-button
      >
    </div>
    
    <!-- 表格 start -->
    <el-table
      height="calc(100vh - 575px)"
      :data="tableList"
      :row-style="selectedHighlight"
    >
      <el-table-column label="采集时间" width="130" prop="esstym" show-overflow-tooltip></el-table-column>
      <el-table-column label="站名" width="130" show-overflow-tooltip>
        <template slot-scope="{ row }">
          
          <span>{{ row.stcd }}</span>
        </template>
      </el-table-column>
        <!-- <el-table-column label="所属水厂">
            <template slot-scope="{ row }">
                <span>{{ getSelectVal(wfctCdData, row.awid) }}</span>
            </template>
        </el-table-column> -->
        <el-table-column label="采集要素">
            <template slot-scope="{ row }">
            <span>{{ getSelectVal(typeData, row.type) }}</span> 
            </template>
      </el-table-column>
      <el-table-column align="right" label="采集值">
            <template slot-scope="{ row}">
               
            <span>{{ row.paramax }}</span>
            </template>
      </el-table-column>
      <el-table-column align="center" label="水质分类">
            <el-table-column
                label="I类水"
                align="center"
                width="120">
                <template slot-scope="{ row }">
                    <span>{{row.bVal}}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="II类水"
                align="center"
                width="120">
                <template slot-scope="{ row }">
                    <span>{{row.bVal}}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="III类水"
                align="center"
                width="120">
                <template slot-scope="{ row }">
                    <span>{{row.bVal}}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="IV类水"
                align="center"
                width="120">
                <template slot-scope="{ row }">
                    <span>{{row.bVal}}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="V类水"
                align="center"
                width="120">
                <template slot-scope="{ row }">
                    <span>{{row.bVal}}</span>
                </template>
            </el-table-column>
      </el-table-column>
     
       
      
    </el-table>
    <!-- 表格 end -->
    <!-- 分页 start -->
    <div class="paginationBox">
     
      <div class="pagination">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          :current-page="query.page"
          :page-size="query.pageSize"
          :page-sizes="[10, 15, 20, 25]"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 分页 end -->
    <!-- echart start -->
        <div class="echartBox">
            <template>
                <el-radio-group v-model="radio">
                    <el-radio v-for="item in typeData" @change="handleRadio" :key="item.code" :label="item.code">{{ item.name }}</el-radio>
                </el-radio-group>
            </template>
            <el-row class="echartRow" :gutter="20">
                <el-col :span="12">
                    <waterqualityAnalyseLine />
                </el-col>
                <el-col :span="12">
                    <waterqualityAnalysePie />
                </el-col>
            </el-row>
        </div>
    <!-- echart end -->
  </div>
</template>


<script>
import formValidate from '../../lib/formValidation';
import waterqualityAnalyseLine from '../../components/common/echartsCom/waterqualityAnalyseLine';
import waterqualityAnalysePie from '../../components/common/echartsCom/waterqualityAnalysePie';
    export  default {
       components: {
           waterqualityAnalyseLine,
           waterqualityAnalysePie
       },
        data() {
            return {
                tableList: [
                    {
                       
                        stcd: '0003',
                        awid: "000000001",
                        esstym: '2020-08-01',
                        type: "cd",
                        bVal: 4,
                        isCB: 1,
                        CBPS: 1.6,
                        paramax: 6,
                        paramin: 8
                    }
                ],
                currentIndex: -1, // 表格当前选中的行
                multipleSelection: [],
                pageTotal: 0,  // 总页数
                BtnIndex: -1,
                query:{
                    page: 1,
                    pageSize: 15,
                    awid:'',
                    type: '',
                    date:[]
                },           
                flagAjax: true,
                wfctCdData: [],
                typeData: [],
                categoryData: [],
                isExport: false,
                radio: '',
                pickerMinDate: '',
                pickerOptions0: {
                    onPick: ({ maxDate, minDate }) => {
                        this.pickerMinDate = minDate;
                    },
                    disabledDate: (time) => {
                        if (this.pickerMinDate !== '') {
                            let maxTime = new Date(this.pickerMinDate).getTime()+1000*60*60*24;
                            if (maxTime > new Date().getTime()) {
                                maxTime = new Date().getTime();
                            }
                            return time.getTime() > maxTime || time.getTime() > Date.now() - 8.64e6;
                        } else {
                            return  time.getTime() > Date.now() - 8.64e6;
                        }
                    }
                }
            } 
        },
        created() {
            this.getParamTypeData();
          //  this.getQueryTable();
            this.waterworksData();
            this.setDefaultDate(); // 设置时间范围默认一天
        },
        methods: {
            setDefaultDate() {
                    //当前设定的日期时间
                    let d = new Date
                    let year1,month1,day1;
                    [year1,month1,day1] = [d.getFullYear(),d.getMonth(),d.getDate()]
                    let date1 = new Date(year1, month1, day1,0)
                    this.query.date.push(date1)
                    //前一天设定的日期时间
                    let year2,month2,day2
                    d.setTime(d.getTime()-24*60*60*1000);
                    [year2,month2,day2] = [d.getFullYear(),d.getMonth(),d.getDate()]
                    let date2 = new Date(year2,month2,day2,0)
                    this.query.date.unshift(date2)
            },
            handleInput() {
                if (!this.query.awid || !this.query.awid) {
                    this.getQueryTable();
                }
            },
            // 下拉框获取name
            getSelectVal (data, type)  {
                let val = ''
                if (data.length && type) {
                    data.map(item => {
                        if(item.code === type || item.wfctCd === type) {
                            val =  item.name || item.wfctName;
                        }
                    });
                }
                return val;
            },
             // 请求水厂信息
            waterworksData() {
                this.$http.waterworksList({wfctCd:""}).then(res => {
                    this.wfctCdData = res.data;
                    this.query.awid = res.data && res.data[0].wfctCd;
                });
            },
            getParamTypeData() {
                 
                this.$http.getDictionaryTree({pid:"wq_qt"}).then(res => {
                    if (res.code === "CODE_0000") { 
                         this.typeData = res.data;
                         this.radio = res.data ? res.data[0].code : "";
                    }
                });
                this.$http.getDictionaryTree({pid:"wq_type"}).then(res => {
                    if (res.code === "CODE_0000") { 
                         this.categoryData = res.data;
                    }
                });
            },
           
            // 获取表格数据
            getQueryTable() {
                this.$http.getQueryParam(this.query).then(res => {
                    if (res.code === "CODE_0000") {
                        this.tableList = res.data.records;
                        this.pageTotal=res.data.total;
                    }
                });
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'page', 1);
                this.getQueryTable();
            },
            // 重置按钮
            handleReset() {
                if (this.query.awid || this.query.type) {
                    this.query = {
                        awid: '',
                        type: '',
                        page: 1,
                        pageSize: 15,
                    };
                  this.getQueryTable();
                
                }
            },
          
            // 高亮显示的行
            selectedHighlight({row, rowIndex}) {
                row.index=rowIndex;
                return {
                    "cursor": "pointer"
                };
            },
           
             // 导出
            handleExportList() {
                this.isExport = true;
                this.$axios({
                    url: '/api/cbb-wsnetwork/baseStation/export',
                    method:'post',
                    responseType:'blob',
                    headers: { 
                        'content-type': 'application/json;charset=UTF-8',
                        Authorization: `Bearer ${sessionStorage.getItem('access_token')}` 
                    },
                    
                }).then(response =>{
                    this.$lib.downloadFile(response);
                    this.isExport = false;
                }).catch(e => {
                    this.$message.warning(e.message);
                    this.isExport = false;
                })
            },
            // 分页显示数量改变
            handleSizeChange(val) {
                this.query.pageSize=val;
                this.getQueryTable();
            },
            // 点击分页
            handlePageChange(val) {
                this.currentIndex=-1;
                this.$set(this.query, 'page', val);
                this.getQueryTable();
            },
            handleRadio(val) {
                console.log(val)
            }
        }
    };
</script>
<style scoped>
    .searchMar {
        margin-bottom: 24px;
    }
    .paginationBox {
        height: 72px;
    }
  
</style>