报警列表，持续时间动态计算

.env.development

@@ -5,8 +5,8 @@ VITE_APP_TITLE = 云平台管理系统
 VITE_APP_ENV = 'development'
 
 # 开发环境
- VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
+ #VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
- #VITE_APP_BASE_API = 'http://192.168.2.23:8000'
+ VITE_APP_BASE_API = 'http://192.168.2.23:8000'
 
 #代永飞接口
 #VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'   

src/utils/timeConverter.ts

@@ -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);
+    }
+  }
+}

src/views/equipmentAlarmRecord/index.vue

@@ -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 => {

src/views/system/menu/index.vue

@@ -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: {