forked from dyf/dyf-vue-ui
报警列表，持续时间动态计算
This commit is contained in:
fengerli
113
src/utils/timeConverter.ts
Normal file
113
src/utils/timeConverter.ts
Normal file
@ -0,0 +1,113 @@
|
||||
/**
|
||||
* 时间转换工具类
|
||||
* 提供时间格式化、时间差计算等功能
|
||||
*/
|
||||
export class TimeConverter {
|
||||
/**
|
||||
* 检查时间字符串是否有效
|
||||
* @param timeStr 时间字符串
|
||||
* @returns 是否有效的时间
|
||||
*/
|
||||
static isValidTime(timeStr: string): boolean {
|
||||
if (!timeStr) return false;
|
||||
return !isNaN(new Date(timeStr).getTime());
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化时间
|
||||
* @param timeStr 时间字符串
|
||||
* @param format 格式，可选值: 'YYYY-MM-DD', 'HH:mm:ss', 'YYYY-MM-DD HH:mm:ss'
|
||||
* @returns 格式化后的时间字符串
|
||||
*/
|
||||
static formatTime(timeStr: string, format: 'YYYY-MM-DD' | 'HH:mm:ss' | 'YYYY-MM-DD HH:mm:ss' = 'YYYY-MM-DD HH:mm:ss'): string {
|
||||
if (!this.isValidTime(timeStr)) return '无效时间';
|
||||
|
||||
const date = new Date(timeStr);
|
||||
const year = date.getFullYear();
|
||||
const month = this.padZero(date.getMonth() + 1);
|
||||
const day = this.padZero(date.getDate());
|
||||
const hours = this.padZero(date.getHours());
|
||||
const minutes = this.padZero(date.getMinutes());
|
||||
const seconds = this.padZero(date.getSeconds());
|
||||
|
||||
switch (format) {
|
||||
case 'YYYY-MM-DD':
|
||||
return `${year}-${month}-${day}`;
|
||||
case 'HH:mm:ss':
|
||||
return `${hours}:${minutes}:${seconds}`;
|
||||
case 'YYYY-MM-DD HH:mm:ss':
|
||||
default:
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算与当前时间的差值（格式为 HH:mm:ss）
|
||||
* @param startTimeStr 起始时间字符串
|
||||
* @returns 格式化的时间差字符串
|
||||
*/
|
||||
static calculateTimeDiff(startTimeStr: string): string {
|
||||
if (!this.isValidTime(startTimeStr)) return '';
|
||||
|
||||
const startTime = new Date(startTimeStr).getTime();
|
||||
const nowTime = new Date().getTime();
|
||||
const diffMs = nowTime - startTime;
|
||||
|
||||
// 处理未来时间
|
||||
if (diffMs < 0) {
|
||||
return '00:00:00';
|
||||
}
|
||||
|
||||
// 计算总秒数
|
||||
const totalSeconds = Math.floor(diffMs / 1000);
|
||||
|
||||
// 计算时、分、秒
|
||||
const hours = this.padZero(Math.floor(totalSeconds / 3600));
|
||||
const minutes = this.padZero(Math.floor((totalSeconds % 3600) / 60));
|
||||
const seconds = this.padZero(totalSeconds % 60);
|
||||
|
||||
return `${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数字补零
|
||||
* @param num 数字
|
||||
* @returns 补零后的字符串
|
||||
*/
|
||||
private static padZero(num: number): string {
|
||||
return num < 10 ? `0${num}` : num.toString();
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建一个时间差更新定时器
|
||||
* @param startTimeStr 起始时间字符串
|
||||
* @param callback 回调函数，接收计算后的时间差
|
||||
* @param interval 刷新间隔(毫秒)
|
||||
* @returns 定时器ID，用于清除定时器
|
||||
*/
|
||||
static createTimeDiffTimer(
|
||||
startTimeStr: string,
|
||||
callback: (diffText: string) => void,
|
||||
interval: number = 1000
|
||||
): number {
|
||||
// 立即执行一次
|
||||
callback(this.calculateTimeDiff(startTimeStr));
|
||||
|
||||
// 设置定时器
|
||||
const timerId = window.setInterval(() => {
|
||||
callback(this.calculateTimeDiff(startTimeStr));
|
||||
}, interval);
|
||||
|
||||
return timerId;
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除时间差更新定时器
|
||||
* @param timerId 定时器ID
|
||||
*/
|
||||
static clearTimeDiffTimer(timerId: number | null): void {
|
||||
if (timerId) {
|
||||
clearInterval(timerId);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -89,16 +89,16 @@
|
||||
<div class="label">报警事项</div>
|
||||
<div class="alearm">
|
||||
<template v-if="item.deviceAction === 0">强制报警
|
||||
<span v-if="item.treatmentState === 1">({{ item.startTime.split(' ')[1] || '' }})</span>
|
||||
<span v-if="item.treatmentState === 1">({{ item.timeDiff}})</span>
|
||||
</template>
|
||||
<template v-else-if="item.deviceAction === 1">撞击闯入
|
||||
<span v-if="item.treatmentState === 1">({{ item.startTime.split(' ')[1] || '' }})</span>
|
||||
<span v-if="item.treatmentState === 1">({{ item.timeDiff}})</span>
|
||||
</template>
|
||||
<template v-else-if="item.deviceAction === 2">自动报警
|
||||
<span v-if="item.treatmentState === 1">({{ item.startTime.split(' ')[1] || '' }})</span>
|
||||
<span v-if="item.treatmentState === 1">({{ item.timeDiff}})</span>
|
||||
</template>
|
||||
<template v-else-if="item.deviceAction === 3">电子围栏告警
|
||||
<span v-if="item.treatmentState === 1">({{ item.startTime.split(' ')[1] || '' }})</span>
|
||||
<span v-if="item.treatmentState === 1">({{ item.timeDiff}})</span>
|
||||
</template>
|
||||
</div>
|
||||
<div class="label">报警地点</div>
|
||||
@ -134,13 +134,14 @@
|
||||
</el-table-column>
|
||||
<el-table-column label="报警持续时间" align="center" prop="durationTime" width="180">
|
||||
<template #default="scope">
|
||||
<el-tag type="danger">{{ scope.row.durationTime }}</el-tag>
|
||||
<el-tag type="danger">{{ scope.row.durationTime || '/' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="处理状态" align="center" prop="treatmentState">
|
||||
<template #default="scope">
|
||||
<div class="ysStatus" v-if="scope.row.treatmentState == 0">已处理</div>
|
||||
<el-tag type="danger" v-if="scope.row.treatmentState == 1">未处理</el-tag>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="报警时间" align="center" prop="startTime" />
|
||||
@ -156,8 +157,10 @@
|
||||
import { listAlarm } from '@/api/equipmentAlarmRecord/index';
|
||||
import { AlarmVO, AlarmQuery, AlarmForm } from '@/api/equipmentAlarmRecord/types';
|
||||
import apiTypeAll from '@/api/equipmentManagement/device/index';
|
||||
import { TimeConverter } from '@/utils/timeConverter';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const alarmList = ref<AlarmVO[]>([]);
|
||||
const timers = ref<Record<string, number>>({});
|
||||
const isListView = ref(true);
|
||||
const dateRange = ref(['', '']);
|
||||
const loading = ref(true);
|
||||
@ -220,12 +223,47 @@ const getList = async () => {
|
||||
};
|
||||
const res = await listAlarm(queryParams.value);
|
||||
if (res.rows) {
|
||||
alarmList.value = res.rows;
|
||||
// 先清除已有定时器
|
||||
clearAllTimers();
|
||||
//alarmList.value = res.rows;
|
||||
// 为每个项添加timeDiff属性并初始化
|
||||
alarmList.value = res.rows.map(item => ({
|
||||
...item,
|
||||
timeDiff: '' // 用于存储计算出的时间差
|
||||
}));
|
||||
total.value = res.total;
|
||||
// 为每个需要计时的项创建定时器
|
||||
initTimers();
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
}
|
||||
// 初始化所有定时器
|
||||
const initTimers = () => {
|
||||
alarmList.value.forEach(item => {
|
||||
// 只对需要计时的项创建定时器（根据你的业务逻辑判断）
|
||||
if (item.treatmentState === 1 && item.startTime) {
|
||||
// 使用项的唯一标识作为定时器键名（假设id是唯一标识）
|
||||
timers.value[item.id] = TimeConverter.createTimeDiffTimer(
|
||||
item.startTime,
|
||||
(diff) => {
|
||||
// 找到对应的项并更新时间差
|
||||
const index = alarmList.value.findIndex(i => i.id === item.id);
|
||||
if (index !== -1) {
|
||||
alarmList.value[index].timeDiff = diff;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
// 清除所有定时器
|
||||
const clearAllTimers = () => {
|
||||
Object.values(timers.value).forEach(timerId => {
|
||||
TimeConverter.clearTimeDiffTimer(timerId);
|
||||
});
|
||||
timers.value = {};
|
||||
};
|
||||
// 设备类型
|
||||
const getDeviceType = () => {
|
||||
apiTypeAll.deviceTypeAll().then(res => {
|
||||
|
||||
@ -288,6 +288,7 @@
|
||||
import { addMenu, cascadeDelMenu, delMenu, getMenu, listMenu, updateMenu } from '@/api/system/menu';
|
||||
import { MenuForm, MenuQuery, MenuVO } from '@/api/system/menu/types';
|
||||
import { MenuTypeEnum } from '@/enums/MenuTypeEnum';
|
||||
import { log } from 'console';
|
||||
|
||||
interface MenuOptionsType {
|
||||
menuId: number;
|
||||
@ -324,6 +325,7 @@ const initFormData = {
|
||||
visible: '0',
|
||||
status: '0'
|
||||
};
|
||||
|
||||
const data = reactive<PageData<MenuForm, MenuQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
|
||||
Reference in New Issue
Block a user