add：报警统计

src/api/jinrun/baojingtongji.js

+import request from '@/utils/request'
+
+// 查询人员信息列表
+export function getYearMonthDayAlarmCount(query) {
+  return request({
+    url: '/count/manage/getYearMonthDayAlarmCount',
+    method: 'get',
+    params: query
+  })
+}
+
+
+export function getAlarmCountTrend(query) {
+  return request({
+    url: '/count/manage/getAlarmCountTrend',
+    method: 'get',
+    params: query
+  })
+}
+

src/views/tongji/baojing.vue

@@ -28,14 +28,14 @@
               class="stat-icon"
               style="font-size: 30px; color: #409eff; margin-bottom: 10px"
             >
-              <svg-icon icon-class="user" />
+              <svg-icon icon-class="build" />
             </div>
             <div class="stat-text" style="font-size: 16px; color: #000">
               报警统计
             </div>
           </div>
         </el-col>
-        <!-- 今日SOS报警数 -->
+        <!-- 第二部分：今日员工人数 -->
         <el-col :span="6">
           <div
             class="stat-item"
@@ -57,13 +57,13 @@
             </div>
             <div
               class="stat-value"
-              style="font-size: 18px; font-weight: 400; color: #ff0000"
+              style="font-size: 18px; font-weight: 400; color: #2196f3"
             >
-              3次
+              {{ sumObj.today_count }}次
             </div>
           </div>
         </el-col>
-        <!-- 当月SOS报警数 -->
+        <!-- 第三部分：今日访客人数 -->
         <el-col :span="6">
           <div
             class="stat-item"
@@ -83,9 +83,9 @@
             </div>
             <div
               class="stat-value"
-              style="font-size: 18px; font-weight: 400; color: #ff0000"
+              style="font-size: 18px; font-weight: 400; color: #2196f3"
             >
-              3次
+              {{ sumObj.month_count }}次
             </div>
           </div>
         </el-col>
@@ -111,7 +111,7 @@
               class="stat-value"
               style="font-size: 18px; font-weight: 400; color: #ff0000"
             >
-              3次
+              {{ sumObj.year_count }}次
             </div>
           </div>
         </el-col>
@@ -124,9 +124,14 @@
       :inline="true"
       v-show="showSearch"
       label-width="68px"
+      :rules="dateRangeRules"
     >
       <label>SOS报警变化趋势图</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"
@@ -135,6 +140,7 @@
           range-separator="-"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
+          @change="handleDateChange"
         ></el-date-picker>
       </el-form-item>
 
@@ -160,14 +166,35 @@
 </template>
 
 <script>
-import { listInfo } from "@/api/jinrun/renyuan";
-import { getDict } from "@/api/jinrun/common";
+import {
+  getYearMonthDayAlarmCount,
+  getAlarmCountTrend,
+} from "@/api/jinrun/baojingtongji";
 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: {},
       // 人员类型下拉列表数据
       personTypeOptions: [],
       // 遮罩层
@@ -190,11 +217,19 @@ export default {
       open: false,
       // 查询参数
       queryParams: {
-        dateRange: null,
-        realName: null,
+        dateRange: [],
         pageNum: 1,
         pageSize: 10,
       },
+      // 日期范围校验规则
+      dateRangeRules: {
+        dateRange: [
+          {
+            validator: validateDateRange,
+            trigger: "change",
+          },
+        ],
+      },
       // 表单参数
       form: {
         personType: "",
@@ -206,9 +241,36 @@ export default {
   },
   mounted() {
     this.initChart();
+    this.getYearMonthDayAlarmCount();
+    this.getAlarmCountTrend();
   },
   methods: {
+    // 日期变化处理
+    handleDateChange(value) {
+      if (value && value.length === 2) {
+        this.$refs.queryForm.validateField("dateRange");
+      }
+    },
+
+    getAlarmCountTrend() {
+      // 处理日期范围参数
+      this.queryParams.startDate = this.queryParams.dateRange[0] || "";
+      this.queryParams.endDate = this.queryParams.dateRange[1] || "";
+      getAlarmCountTrend(this.queryParams).then((response) => {
+        // this.sumObj = response.data;
+        console.log(response, " 人员数量趋势图数据");
+        this.updateChart(response.data.xData, response.data.yData);
+      });
+    },
+    getYearMonthDayAlarmCount() {
+      getYearMonthDayAlarmCount().then((response) => {
+        this.sumObj = response.data;
+        console.log(response, " 报警数");
+      });
+    },
+
     /** 初始化图表 */
+
     initChart() {
       // 获取DOM元素并初始化图表
       const chartDom = document.querySelector(".qushitu");
@@ -243,7 +305,7 @@ export default {
               // 修改formatter配置，正确显示年月日
               formatter: function (value) {
                 // value是完整的日期字符串，如"2023-10-25"
-                return value.split("-").slice(1).join("-"); // 显示月-日，如"10-25"
+                return value.split("-").join("-"); // 显示月-日，如"10-25"
                 // 如果需要显示完整年月日，可以使用：return value;
               },
               rotate: 45, // 添加旋转以避免日期重叠
@@ -267,7 +329,7 @@ export default {
           },
           series: [
             {
-              name: "人员数量",
+              name: "报警次数",
               type: "line",
               smooth: false,
               symbol: "circle", // 数据点样式
@@ -307,49 +369,8 @@ export default {
     },
 
     /** 更新图表数据 */
-    updateChart() {
+    updateChart(dates, values) {
       if (this.chartInstance) {
-        // 模拟数据（实际项目中应根据后端返回数据处理）
-        const dateRange = this.queryParams.dateRange;
-        let dates = [];
-        let values = [];
-
-        if (dateRange && dateRange.length === 2) {
-          // 有日期范围时生成模拟数据
-          const start = new Date(dateRange[0]);
-          const end = new Date(dateRange[1]);
-          const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
-
-          for (let i = 0; i <= days; i++) {
-            const currentDate = new Date(start);
-            currentDate.setDate(start.getDate() + i);
-            const dateStr =
-              currentDate.getFullYear() +
-              "-" +
-              (currentDate.getMonth() + 1).toString().padStart(2, "0") +
-              "-" +
-              currentDate.getDate().toString().padStart(2, "0");
-            dates.push(dateStr);
-            // 生成随机数据，范围在1-10之间
-            values.push(Math.floor(Math.random() * 10) + 1);
-          }
-        } else {
-          // 默认显示最近7天的数据
-          for (let i = 6; i >= 0; i--) {
-            const currentDate = new Date();
-            currentDate.setDate(currentDate.getDate() - i);
-            const dateStr =
-              currentDate.getFullYear() +
-              "-" +
-              (currentDate.getMonth() + 1).toString().padStart(2, "0") +
-              "-" +
-              currentDate.getDate().toString().padStart(2, "0");
-            dates.push(dateStr);
-            // 生成随机数据，范围在1-10之间
-            values.push(Math.floor(Math.random() * 10) + 1);
-          }
-        }
-
         // 更新图表数据
         this.chartInstance.setOption({
           xAxis: {
@@ -371,15 +392,6 @@ export default {
       }
     },
 
-    /** 查询人员信息列表 */
-    getList() {
-      this.loading = true;
-      listInfo(this.queryParams).then((response) => {
-        this.infoList = response.records;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -388,22 +400,27 @@ export default {
 
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-      // 搜索时更新图表数据（添加这行）
-      this.updateChart();
+      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.getAlarmCountTrend();
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
+      // this.resetForm("queryForm");
+      this.queryParams.dateRange = [];
+      this.queryParams.startDate = "";
+      this.queryParams.endDate = "";
       this.handleQuery();
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.personId);
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
-    },
   },
   /** 组件销毁时清理 */
   beforeDestroy() {

src/views/tongji/renyuan.vue

@@ -322,7 +322,7 @@ export default {
               // 修改formatter配置，正确显示年月日
               formatter: function (value) {
                 // value是完整的日期字符串，如"2023-10-25"
-                return value.split("-").slice(1).join("-"); // 显示月-日，如"10-25"
+                return value.split("-").join("-"); // 显示月-日，如"10-25"
                 // 如果需要显示完整年月日，可以使用：return value;
               },
               rotate: 45, // 添加旋转以避免日期重叠