1、人员统计图

src/views/smartapplication/smartvideomonitorstat.vue

@@ -31,7 +31,8 @@
     <el-row>
       <el-col span="4" :push="6">选择日期</el-col>
       <el-col span="16" :push="4">
-        <el-date-picker size="mini" v-model="dateSelect" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left" @change="getPersonInOutStat" value-format="yyyy-MM-dd">
+        <el-date-picker size="mini" v-model="dateSelect" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left"
+                        @change="getPersonInOutStat" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
         </el-date-picker>
       </el-col>
     </el-row>
@@ -63,6 +64,26 @@
           total: 0
         },
         dateSelect: "",
+        pickerOptions: {
+          // 点击时，选择的是开始时间，也就是minDate
+          onPick: ({ maxDate, minDate }) => {
+            this.dateSelect = minDate.getTime()
+            if (maxDate) {
+              // 解除限制
+              this.dateSelect = ''
+            }
+          },
+          disabledDate: (time) => {
+            // 是否限制的判断条件
+            if (!this.isNull(this.dateSelect)) {
+              var date = new Date(this.dateSelect)
+              // 这里就是限制的关键，大于或者小于本月的日期被禁用
+              return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
+            } else {
+              return false
+            }
+          }
+        },
         selectionList: [],
         option: {
           menu: false,
@@ -219,6 +240,13 @@
       }
     },
     methods: {
+      // 检查是否为空
+      isNull(value) {
+        if (value) {
+          return false
+        }
+        return true
+      },
       init(){
         this.page.currentPage =1;
         this.page.pageSize =10;