改为时段查询且禁用未来日期

src/assets/css/element_ui.css

@@ -78,6 +78,13 @@
   border-color: #19446E !important;
 }
 
+.el-input__inner {
+  background-color: #2d3744;
+}
+.el-picker-panel__footer {
+  background-color: #2d3744;
+}
+
 .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
   background: #2a2a2a;
 }
@@ -325,7 +332,7 @@ cur-select {
 }
 
 .el-input__icon {
-  line-height: 25px;
+  line-height: 40px;
 }
 
 .el-input__inner {
@@ -397,3 +404,7 @@ cur-select {
 .el-tabs__item {
   color: #bbc2d0
 }
+
+.el-date-table td.disabled div{
+  background-color: #858990;
+}

src/pages/index/components/access_data_analysis.vue

@@ -22,6 +22,7 @@
           range-separator="至"
           start-placeholder="开始日期"
           value-format="yyyy-MM-dd"
+          :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>

src/pages/index/components/berth_peration_nalysis.vue

@@ -22,6 +22,7 @@
           range-separator="至"
           start-placeholder="开始日期"
           value-format="yyyy-MM-dd"
+          :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>

src/pages/index/components/berth_road.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="body-wrapper">
-    <el-form class="form-wrapper" :inline="true" :model="formInline1">
+    <el-form class="form-wrapper" :inline="true" :rules="formRules" ref="formInline1" :model="formInline1">
       <el-form-item label="行政区">
         <el-select clearable  v-model="formInline1.regionCode" placeholder="请选择" popper-class="cur-select">
           <el-option v-for="item in districtOptions"  :key="item.label" :label="item.label" :value="item.value"></el-option>
@@ -14,16 +14,25 @@
           <el-option v-for="item in carOptions" :key="item.parkId" :label="item.carParkName" :value="item.parkId"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="查询日期">
+      <el-form-item label="开始时间" prop="begin">
         <el-date-picker
-          clearable
-          v-model="formInline1.time"
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          value-format="yyyy-MM-dd"
-          end-placeholder="结束日期">
-        </el-date-picker>
+          v-model="formInline1.begin"
+          type="datetime"
+          placeholder="选择开始时间"
+          @change="validateTimeRange"
+          :picker-options="endPickerOptions"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item label="结束时间" prop="end">
+        <el-date-picker
+          v-model="formInline1.end"
+          type="datetime"
+          placeholder="选择结束时间"
+          @change="validateTimeRange"
+          :picker-options="endPickerOptions"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        ></el-date-picker>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="queryAll">查询</el-button>
@@ -136,6 +145,7 @@ import piechart from "@/components/pieChart";
 import linechart from "@/components/lineChart";
 import barchart from "@/components/barChart";
 import vtable from "@/components/vtableNew";
+import { Message } from 'element-ui';
 import api from "@/api/article_liao";
 import options from '@/util/options'
 
@@ -149,11 +159,19 @@ export default {
   },
   data() {
     return {
+      formRules: {
+        begin: [{ required: false, message: '请选择开始时间', trigger: 'blur' }],
+        end: [
+          { required: false, message: '请选择结束时间', trigger: 'blur' },
+          { validator: this.validateEndTime, trigger: 'blur' }
+        ]
+      },
       districtOptions: options.districtOptions,
       carOptions: [],
       formInline1: {
         parkId: '',
-        time: [],
+        begin: '',
+        end: '',
         regionCode: '',
         streetName: ''
       },
@@ -173,30 +191,62 @@ export default {
   },
   watch: {
 
+  },
+  computed: {
+    endPickerOptions() {
+      return {
+        disabledDate(time) {
+          // 禁止选择当前时间之后的日期和时间
+          return time.getTime() > Date.now();
+        }
+      };
+    }
   },
   methods: {
+    validateEndTime(rule, value, callback) {
+      if (this.formInline1.begin && this.formInline1.end) {
+        const startTimestamp = new Date(this.formInline1.begin).getTime();
+        const endTimestamp = new Date(value).getTime();
+        if (startTimestamp > endTimestamp) {
+          callback(new Error('结束时间不能早于开始时间'));
+        } else {
+          callback();
+        }
+      } else {
+        callback();
+      }
+    },
+    validateTimeRange() {
+      // 触发结束时间的验证
+      this.$refs['formInline1'].validateField('end');
+    },
     getParkDic() {
       api.parkDic().then(res => {
         this.carOptions = res.data || [];
       })
     },
     queryAll() {
-      let params = {...this.formInline1}
-      if (
-        this.formInline1.time && this.formInline1.time.length === 2 &&
-        this.formInline1.time[1] !== ""
-      ) {
-        this.formInline1.time[0] = this.formInline1.time[0].substring(0, 10) + " 00:00:00";
-        this.formInline1.time[1] = this.formInline1.time[1].substring(0, 10) + " 23:59:59";
-        params.begin= this.formInline1.time[0]
-        params.end = this.formInline1.time[1]
+      if (this.formInline1.begin || this.formInline1.end) {
+        this.$refs['formInline1'].validate((valid) => {
+          if (valid) {
+            let params = {...this.formInline1}
+            this.dashBerthRoadStat1(params)
+            this.dashBerthRoadStat2(params)
+            this.dashBerthRoadStat3(params)
+            this.dashBerthRoadStat4(params)
+            this.dashBerthRoadStat5(params)
+          } else {
+            Message.error('结束时间不能早于开始时间!')
+          }
+        });
+      } else {
+        let params = {...this.formInline1}
+        this.dashBerthRoadStat1(params)
+        this.dashBerthRoadStat2(params)
+        this.dashBerthRoadStat3(params)
+        this.dashBerthRoadStat4(params)
+        this.dashBerthRoadStat5(params)
       }
-      delete params.time
-      this.dashBerthRoadStat1(params)
-      this.dashBerthRoadStat2(params)
-      this.dashBerthRoadStat3(params)
-      this.dashBerthRoadStat4(params)
-      this.dashBerthRoadStat5(params)
     },
     lineTooltipFormat1(params) {
       const data = params[0].data;

src/pages/index/components/berth_road_out.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="body-wrapper">
-    <el-form class="form-wrapper" :inline="true" :model="formInline1">
+    <el-form class="form-wrapper" :inline="true" :rules="formRules" ref="formInline1" :model="formInline1">
       <el-form-item label="行政区">
         <el-select clearable  v-model="formInline1.regionCode" placeholder="请选择" popper-class="cur-select">
           <el-option v-for="item in districtOptions"  :key="item.label" :label="item.label" :value="item.value"></el-option>
@@ -14,16 +14,23 @@
           <el-option v-for="item in carOptions" :key="item.parkId" :label="item.carParkName" :value="item.parkId"></el-option>
         </el-select>
       </el-form-item>
-      <el-form-item label="查询日期">
+      <el-form-item label="开始时间" prop="begin">
         <el-date-picker
-          clearable
-          v-model="formInline1.time"
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          value-format="yyyy-MM-dd"
-          end-placeholder="结束日期">
-        </el-date-picker>
+          v-model="formInline1.begin"
+          type="datetime"
+          placeholder="选择开始时间"
+          :picker-options="endPickerOptions"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item label="结束时间" prop="end">
+        <el-date-picker
+          v-model="formInline1.end"
+          type="datetime"
+          placeholder="选择结束时间"
+          :picker-options="endPickerOptions"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        ></el-date-picker>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="queryAll">查询</el-button>
@@ -138,6 +145,7 @@ import barchart from "@/components/barChart";
 import vtable from "@/components/vtableNew";
 import api from "@/api/article_liao";
 import options from '@/util/options'
+import {Message} from "element-ui";
 
 export default {
   components: {
@@ -148,11 +156,19 @@ export default {
   },
   data() {
     return {
+      formRules: {
+        begin: [{ required: false, message: '请选择开始时间', trigger: 'blur' }],
+        end: [
+          { required: false, message: '请选择结束时间', trigger: 'blur' },
+          { validator: this.validateEndTime, trigger: 'blur' }
+        ]
+      },
       districtOptions: options.districtOptions,
       carOptions: [],
       formInline1: {
         parkId: '',
-        time: [],
+        begin: '',
+        end: '',
         regionCode: '',
         streetName: ''
       },
@@ -173,30 +189,62 @@ export default {
   },
   watch: {
 
+  },
+  computed: {
+    endPickerOptions() {
+      return {
+        disabledDate(time) {
+          // 禁止选择当前时间之后的日期和时间
+          return time.getTime() > Date.now();
+        }
+      };
+    }
   },
   methods: {
+    validateEndTime(rule, value, callback) {
+      if (this.formInline1.begin && this.formInline1.end) {
+        const startTimestamp = new Date(this.formInline1.begin).getTime();
+        const endTimestamp = new Date(value).getTime();
+        if (startTimestamp > endTimestamp) {
+          callback(new Error('结束时间不能早于开始时间'));
+        } else {
+          callback();
+        }
+      } else {
+        callback();
+      }
+    },
+    validateTimeRange() {
+      // 触发结束时间的验证
+      this.$refs['formInline1'].validateField('end');
+    },
     getParkDic() {
       api.parkDic().then(res => {
         this.carOptions = res.data || [];
       })
     },
     queryAll() {
-      let params = {...this.formInline1}
-      if (
-        this.formInline1.time && this.formInline1.time.length === 2 &&
-        this.formInline1.time[1] !== ""
-      ) {
-        this.formInline1.time[0] = this.formInline1.time[0].substring(0, 10) + " 00:00:00";
-        this.formInline1.time[1] = this.formInline1.time[1].substring(0, 10) + " 23:59:59";
-        params.begin= this.formInline1.time[0]
-        params.end = this.formInline1.time[1]
+      if (this.formInline1.begin || this.formInline1.end) {
+        this.$refs['formInline1'].validate((valid) => {
+          if (valid) {
+            let params = {...this.formInline1}
+            this.dashBertRroadOutStat1(params)
+            this.dashBertRroadOutStat2(params)
+            this.dashBertRroadOutStat3(params)
+            this.dashBertRroadOutStat4(params)
+            this.dashBertRroadOutStat5(params)
+          } else {
+            Message.error('结束时间不能早于开始时间!')
+          }
+        });
+      } else {
+        let params = {...this.formInline1}
+        this.dashBertRroadOutStat1(params)
+        this.dashBertRroadOutStat2(params)
+        this.dashBertRroadOutStat3(params)
+        this.dashBertRroadOutStat4(params)
+        this.dashBertRroadOutStat5(params)
       }
-      delete params.time
-      this.dashBertRroadOutStat1(params)
-      this.dashBertRroadOutStat2(params)
-      this.dashBertRroadOutStat3(params)
-      this.dashBertRroadOutStat4(params)
-      this.dashBertRroadOutStat5(params)
     },
     lineTooltipFormat1(params) {
       const data = params[0].data;

src/pages/index/components/berths_information.vue

@@ -27,6 +27,7 @@
           range-separator="至"
           start-placeholder="开始日期"
           value-format="yyyy-MM-dd"
+          :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>

src/pages/index/components/berths_revenue.vue

@@ -28,6 +28,7 @@
           range-separator="至"
           start-placeholder="开始日期"
           value-format="yyyy-MM-dd"
+          :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>

src/pages/index/components/berths_usage.vue

@@ -27,6 +27,7 @@
           range-separator="至"
           start-placeholder="开始日期"
           value-format="yyyy-MM-dd"
+          :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>

src/pages/index/components/business_conditions.vue

@@ -37,6 +37,7 @@
           range-separator="至"
           start-placeholder="开始日期"
           value-format="yyyy-MM-dd"
+          :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>

src/pages/index/components/charge_business_analysis.vue

@@ -27,6 +27,7 @@
           range-separator="至"
           start-placeholder="开始日期"
           value-format="yyyy-MM-dd"
+          :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>

src/pages/index/components/customer_complaint.vue

@@ -73,6 +73,7 @@
           range-separator="至"
           start-placeholder="开始日期"
           value-format="yyyy-MM-dd"
+          :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>

src/pages/index/components/operation_log.vue

@@ -21,6 +21,7 @@
               range-separator="-"
               value-format="yyyy-MM-dd HH:mm:ss"
               start-placeholder="开始日期"
+              :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"
               end-placeholder="结束日期">
             </el-date-picker>
           </el-form-item>

src/pages/index/components/parking_analysis_report.vue

@@ -22,6 +22,7 @@
               range-separator="-"
               value-format="yyyy-MM-dd HH:mm:ss"
               start-placeholder="开始日期"
+              :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"
               end-placeholder="结束日期">
             </el-date-picker>
           </el-form-item>

src/pages/index/components/parking_operate.vue

@@ -22,6 +22,7 @@
           range-separator="至"
           start-placeholder="开始日期"
           value-format="yyyy-MM-dd"
+          :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>

src/pages/index/components/vehicle_violations.vue

@@ -22,6 +22,7 @@
           range-separator="至"
           start-placeholder="开始日期"
           value-format="yyyy-MM-dd"
+          :picker-options="{disabledDate: (time) => time.getTime() > Date.now()}"
           end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>