Skip to content

J
JINRUN-PERPOSITION
Commit 36c6ca10 authored by xinzhedeai's avatar xinzhedeai
Browse files
Options

add：报警统计

parent c5499937
Show whitespace changes
Inline Side-by-side
Showing with 115 additions and 78 deletions
src/api/jinrun/baojingtongji.js 0 → 100644
View file @ 36c6ca10
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
View file @ 36c6ca10
......@@ -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
View file @ 36c6ca10
......@@ -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, // 添加旋转以避免日期重叠
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment