add：人员统计

src/views/tongji/renyuan.vue

@@ -98,9 +98,14 @@
       :inline="true"
       v-show="showSearch"
       label-width="68px"
+      :rules="dateRangeRules"
     >
       <label>人员数量趋势图</label>
-      <el-form-item label="" style="margin-top: -5px; margin-left: 20px">
+      <el-form-item
+        label=""
+        style="margin-top: -5px; margin-left: 20px"
+        prop="dateRange"
+      >
         <el-date-picker
           v-model="queryParams.dateRange"
           style="width: 240px"
@@ -109,6 +114,7 @@
           range-separator="-"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
+          @change="handleDateChange"
         ></el-date-picker>
       </el-form-item>
 
@@ -150,8 +156,8 @@
       v-show="showSearch"
       label-width="68px"
     >
-      <label>人员明细表</label></el-form
-    >
+      <label style="display: block; margin-bottom: 10px">人员明细表</label>
+    </el-form>
     <el-table
       v-loading="loading"
       :data="infoList"
@@ -186,6 +192,24 @@ import * as echarts from "echarts"; // 导入ECharts
 export default {
   name: "Info",
   data() {
+    // 日期范围校验规则
+    const validateDateRange = (rule, value, callback) => {
+      if (!value || value.length !== 2) {
+        callback();
+        return;
+      }
+
+      const startDate = new Date(value[0]);
+      const endDate = new Date(value[1]);
+      const daysDiff = (endDate - startDate) / (1000 * 60 * 60 * 24) + 1; // 包含起止日
+
+      if (daysDiff > 31) {
+        callback(new Error("日期范围不能超过一个月"));
+      } else {
+        callback();
+      }
+    };
+
     return {
       sumObj: {},
       // 人员类型下拉列表数据
@@ -214,6 +238,15 @@ export default {
         pageNum: 1,
         pageSize: 10,
       },
+      // 日期范围校验规则
+      dateRangeRules: {
+        dateRange: [
+          {
+            validator: validateDateRange,
+            trigger: "change",
+          },
+        ],
+      },
       // 表单参数
       form: {
         personType: "",
@@ -230,6 +263,13 @@ export default {
     this.getList();
   },
   methods: {
+    // 日期变化处理
+    handleDateChange(value) {
+      if (value && value.length === 2) {
+        this.$refs.queryForm.validateField("dateRange");
+      }
+    },
+
     getPersonCountTrend() {
       // 处理日期范围参数
       this.queryParams.startDate = this.queryParams.dateRange[0] || "";
@@ -388,10 +428,19 @@ export default {
 
     /** 搜索按钮操作 */
     handleQuery() {
+      if (this.queryParams.dateRange.length > 0) {
+        const startDate = new Date(this.queryParams.dateRange[0]);
+        const endDate = new Date(this.queryParams.dateRange[1]);
+        const daysDiff = (endDate - startDate) / (1000 * 60 * 60 * 24) + 1; // 包含起止日
+
+        if (daysDiff > 31) {
+          this.$message.warning("日期范围不能超过一个月");
+          return;
+        }
+      }
+
       this.queryParams.pageNum = 1;
       this.getList();
-      // 搜索时更新图表数据（添加这行）
-      // this.updateChart();
       this.getPersonCountTrend();
     },
     /** 重置按钮操作 */