[Fix 0000]资源删除

src/views/vent/monitorManager/fanLocalVideo/index.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <!-- <template>
   <div class="screen-container">
     <div class="top-section">
       <div class="system-title">局部风机无人值守演示系统</div>
@@ -21,12 +21,11 @@
               <div class="video-title">风机实时监控 [{{ currentFanName }}]</div>
               <div class="video-box">
                 <video class="video-bg" autoplay loop muted playsinline webkit-playsinline controls>
-                  <source src="@/assets/images/wind-video/video/fan-main.mp4" type="video/mp4">
+                  <source src="@/assets/images/wind-video/video/fan-main.mp4" type="video/mp4" />
                 </video>
               </div>
             </div>
 
-            <!-- 改造后：井下设备操作日志区域 -->
             <div class="video-item alarm-video-replace">
               <div class="alarm-title">
                 <span>井下设备操作日志</span>
@@ -36,8 +35,7 @@
                 </div>
               </div>
               <div class="alarm-scroll" ref="logScroll">
-                <div class="alarm-item" v-for="(item, idx) in operationLog" :key="idx"
-                  :class="[item.status, item.new ? 'new' : '']">
+                <div class="alarm-item" v-for="(item, idx) in operationLog" :key="idx" :class="[item.status, item.new ? 'new' : '']">
                   <div class="alarm-full-line">
                     <span class="alarm-time">{{ item.time }}</span>
                     <span class="alarm-fan">{{ item.fanName }}</span>
@@ -101,9 +99,9 @@
       <div class="search-panel">
         <div class="search-item">
           <label>时间范围：</label>
-          <input type="datetime-local" v-model="searchForm.startTime" class="search-input">
+          <input type="datetime-local" v-model="searchForm.startTime" class="search-input" />
           <span class="split">-</span>
-          <input type="datetime-local" v-model="searchForm.endTime" class="search-input">
+          <input type="datetime-local" v-model="searchForm.endTime" class="search-input" />
           <button class="btn btn-sm btn-default" @click="selectToday">今日</button>
           <button class="btn btn-sm btn-default" @click="select7d">近7天</button>
         </div>
@@ -135,7 +133,7 @@
       <div class="content-wrap">
         <div class="img-list">
           <div class="img-item" v-for="(item, idx) in currentImgList" :key="idx" @click="openImgModal(item)">
-            <img :src="item.imgUrl" class="img-thumbnail">
+            <img :src="item.imgUrl" class="img-thumbnail" />
             <div class="img-desc">
               <p class="desc-line1">{{ getFanName(item.fanId) }}-{{ getAreaName(item.areaId) }}</p>
               <p class="desc-line2">{{ item.personName }} 停留{{ item.stayTime }}</p>
@@ -145,12 +143,9 @@
 
         <div class="right-data-panel">
           <div class="tab-nav">
-            <div class="tab-item" :class="{ active: activeTab === 'personTrack' }" @click="activeTab = 'personTrack'">
-              人员轨迹</div>
-            <div class="tab-item" :class="{ active: activeTab === 'areaStay' }" @click="activeTab = 'areaStay'">区域统计
-            </div>
-            <div class="tab-item" :class="{ active: activeTab === 'warnRecord' }" @click="activeTab = 'warnRecord'">预警记录
-            </div>
+            <div class="tab-item" :class="{ active: activeTab === 'personTrack' }" @click="activeTab = 'personTrack'"> 人员轨迹</div>
+            <div class="tab-item" :class="{ active: activeTab === 'areaStay' }" @click="activeTab = 'areaStay'">区域统计 </div>
+            <div class="tab-item" :class="{ active: activeTab === 'warnRecord' }" @click="activeTab = 'warnRecord'">预警记录 </div>
           </div>
 
           <div class="data-list">
@@ -209,8 +204,7 @@
               <div class="data-col">{{ item.personName }}</div>
               <div class="data-col">{{ item.warnType }}</div>
               <div class="data-col">{{ item.warnTime }}</div>
-              <div class="data-col" :class="item.handleStatus === '已处理' ? 'handled' : 'unhandled'">{{ item.handleStatus
-                }}</div>
+              <div class="data-col" :class="item.handleStatus === '已处理' ? 'handled' : 'unhandled'">{{ item.handleStatus }}</div>
             </div>
           </div>
         </div>
@@ -223,7 +217,7 @@
           <span>现场抓拍详情</span>
           <button class="close-btn" @click="closeImgModal">×</button>
         </div>
-        <img :src="currentModalImg" class="modal-img">
+        <img :src="currentModalImg" class="modal-img" />
         <div class="modal-info">
           <p>{{ modalInfo.fanName }} - {{ modalInfo.areaName }}</p>
           <p>人员：{{ modalInfo.personName }} | 所属区队：{{ modalInfo.teamName }}</p>
@@ -235,51 +229,61 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
-import { fanList, areaList, authPersons,statusData,areaStatsList,currentImgList ,personTrackList,areaStayList,warnRecordList} from './fanLocalVideo.data'
+import { ref, onMounted, onUnmounted, nextTick } from 'vue';
+import {
+  fanList,
+  areaList,
+  authPersons,
+  statusData,
+  areaStatsList,
+  currentImgList,
+  personTrackList,
+  areaStayList,
+  warnRecordList,
+} from './fanLocalVideo.data';
 
 // 工具方法
-const getFanName = (id) => fanList.find(i => i.id === id)?.name || '未知风机'
-const getAreaName = (id) => areaList.find(i => i.id === id)?.name || '未知区域'
-const selectFan = ref('all')
-const currentFanName = ref('1号掘进工作面局部风机')
-const currentTime = ref('')
+const getFanName = (id) => fanList.find((i) => i.id === id)?.name || '未知风机';
+const getAreaName = (id) => areaList.find((i) => i.id === id)?.name || '未知区域';
+const selectFan = ref('all');
+const currentFanName = ref('1号掘进工作面局部风机');
+const currentTime = ref('');
 let timeTimer: null | NodeJS.Timeout = null;
 // ==============================================
 // 核心：井下设备操作日志（PLC + 配电柜 + 人员比对）
 // ==============================================
-const logScroll = ref<any>(null)
-let logTimer : null | NodeJS.Timeout = null;
+const logScroll = ref<any>(null);
+let logTimer: null | NodeJS.Timeout = null;
 let addLogTimer: null | NodeJS.Timeout = null;
 // 操作日志列表（最多7条）
 const operationLog = ref([
   { time: '10:12:20', fanName: '1号风机', operateType: '风机调频', operator: '张三', compareResult: '人员准入匹配', status: 'green' },
   { time: '11:05:10', fanName: '2号风机', operateType: '参数调整', operator: '李四', compareResult: '人员准入匹配', status: 'green' },
   { time: '14:30:00', fanName: '3号风机', operateType: '切换主备', operator: '未知人员', compareResult: '未检测到人员', status: 'red' },
-])
+]);
 // 搜索
-const searchForm = ref({ startTime: '', endTime: '', operateType: 'all', fanId: 'all' })
-const activeTab = ref('personTrack')
-const showImgModal = ref(false)
-const currentModalImg = ref('')
-const modalInfo = ref({}) as any
+const searchForm = ref({ startTime: '', endTime: '', operateType: 'all', fanId: 'all' });
+const activeTab = ref('personTrack');
+const showImgModal = ref(false);
+const currentModalImg = ref('');
+const modalInfo = ref({}) as any;
 
 // 生成PLC/配电柜操作记录 + 人员比对
 const createOperationLog = () => {
-  const now = new Date()
-  const time = `${String(now.getHours()).padStart(2, 0)}:${String(now.getMinutes()).padStart(2, 0)}:${String(now.getSeconds()).padStart(2, 0)}`
+  const now = new Date();
+  const time = `${String(now.getHours()).padStart(2, 0)}:${String(now.getMinutes()).padStart(2, 0)}:${String(now.getSeconds()).padStart(2, 0)}`;
 
-  const fan = fanList[Math.floor(Math.random() * fanList.length)]
-  const operateTypes = ['风机调频', '切换主备', '参数调整', '复位操作']
-  const operateType = operateTypes[Math.floor(Math.random() * operateTypes.length)]
+  const fan = fanList[Math.floor(Math.random() * fanList.length)];
+  const operateTypes = ['风机调频', '切换主备', '参数调整', '复位操作'];
+  const operateType = operateTypes[Math.floor(Math.random() * operateTypes.length)];
 
   // 随机操作人员
-  const allOps = [...authPersons, '未知人员', '外来人员']
-  const operator = allOps[Math.floor(Math.random() * allOps.length)]
+  const allOps = [...authPersons, '未知人员', '外来人员'];
+  const operator = allOps[Math.floor(Math.random() * allOps.length)];
 
   // 人员准入比对逻辑
-  const compareResult = authPersons.includes(operator) ? '人员准入匹配' : '未检测到人员'
-  const status = compareResult === '人员准入匹配' ? 'green' : 'red'
+  const compareResult = authPersons.includes(operator) ? '人员准入匹配' : '未检测到人员';
+  const status = compareResult === '人员准入匹配' ? 'green' : 'red';
 
   return {
     time,
@@ -287,104 +291,110 @@ const createOperationLog = () => {
     operateType,
     operator,
     compareResult,
-    status
-  }
-}
+    status,
+  };
+};
 
 // 自动生成日志，最多保留7条
 const startAddOperationLog = () => {
   addLogTimer = setInterval(() => {
-    const log = createOperationLog()
-    operationLog.value.unshift(log)
-    log.new = true
-    setTimeout(() => (log.new = false), 1800)
+    const log = createOperationLog();
+    operationLog.value.unshift(log);
+    log.new = true;
+    setTimeout(() => (log.new = false), 1800);
 
     // 最多7条
     if (operationLog.value.length > 7) {
-      operationLog.value.pop()
+      operationLog.value.pop();
     }
-  }, 6000)
-}
+  }, 6000);
+};
 
 // 日志滚动
 const startLogScroll = () => {
   nextTick(() => {
-    if (!logScroll.value) return
-    clearInterval(logTimer)
+    if (!logScroll.value) return;
+    clearInterval(logTimer);
     logTimer = setInterval(() => {
-      logScroll.value.scrollTop += 32
+      logScroll.value.scrollTop += 32;
       if (logScroll.value.scrollTop >= logScroll.value.scrollHeight - logScroll.value.clientHeight) {
-        logScroll.value.scrollTop = 0
+        logScroll.value.scrollTop = 0;
       }
-    }, 1500)
-  })
-}
+    }, 1500);
+  });
+};
 
 // 清空日志
 const clearLog = () => {
-  operationLog.value = []
-}
+  operationLog.value = [];
+};
 
 const switchFan = () => {
-  if (selectFan.value !== 'all') currentFanName.value = getFanName(+selectFan.value)
-}
+  if (selectFan.value !== 'all') currentFanName.value = getFanName(+selectFan.value);
+};
 const refreshVideo = () => {
-  const v = document.querySelector('.video-bg')
-  if (v) v.src = `/videos/fan-main.mp4?${Math.random()}`
-}
+  const v = document.querySelector('.video-bg');
+  if (v) v.src = `/videos/fan-main.mp4?${Math.random()}`;
+};
 
 const formatDate = (d) => {
-  const y = d.getFullYear()
-  const m = String(d.getMonth() + 1).padStart(2, 0)
-  const dt = String(d.getDate()).padStart(2, 0)
-  const h = String(d.getHours()).padStart(2, 0)
-  const mi = String(d.getMinutes()).padStart(2, 0)
-  return `${y}-${m}-${dt}T${h}:${mi}`
-}
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, 0);
+  const dt = String(d.getDate()).padStart(2, 0);
+  const h = String(d.getHours()).padStart(2, 0);
+  const mi = String(d.getMinutes()).padStart(2, 0);
+  return `${y}-${m}-${dt}T${h}:${mi}`;
+};
 const selectToday = () => {
-  const now = new Date()
-  searchForm.value.startTime = formatDate(new Date(now.getFullYear(), now.getMonth(), now.getDate()))
-  searchForm.value.endTime = formatDate(now)
-}
+  const now = new Date();
+  searchForm.value.startTime = formatDate(new Date(now.getFullYear(), now.getMonth(), now.getDate()));
+  searchForm.value.endTime = formatDate(now);
+};
 const select7d = () => {
-  const now = new Date()
-  searchForm.value.startTime = formatDate(new Date(now - 7 * 86400000))
-  searchForm.value.endTime = formatDate(now)
-}
-const handleSearch = () => alert('检索成功')
+  const now = new Date();
+  searchForm.value.startTime = formatDate(new Date(now - 7 * 86400000));
+  searchForm.value.endTime = formatDate(now);
+};
+const handleSearch = () => alert('检索成功');
 const resetSearch = () => {
-  searchForm.value = { startTime: '', endTime: '', operateType: 'all', fanId: 'all' }
-  selectToday()
-}
+  searchForm.value = { startTime: '', endTime: '', operateType: 'all', fanId: 'all' };
+  selectToday();
+};
 
 const openImgModal = (item) => {
-  showImgModal.value = true
-  currentModalImg.value = item.imgUrl
+  showImgModal.value = true;
+  currentModalImg.value = item.imgUrl;
   modalInfo.value = {
-    fanName: getFanName(item.fanId), areaName: getAreaName(item.areaId),
-    personName: item.personName, teamName: item.teamName,
-    enterTime: item.enterTime, leaveTime: item.leaveTime, stayTime: item.stayTime
-  }
-}
-const closeImgModal = () => showImgModal.value = false
+    fanName: getFanName(item.fanId),
+    areaName: getAreaName(item.areaId),
+    personName: item.personName,
+    teamName: item.teamName,
+    enterTime: item.enterTime,
+    leaveTime: item.leaveTime,
+    stayTime: item.stayTime,
+  };
+};
+const closeImgModal = () => (showImgModal.value = false);
 
 const updateTime = () => {
-  const d = new Date()
-  currentTime.value = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, 0)}-${String(d.getDate()).padStart(2, 0)} ${String(d.getHours()).padStart(2, 0)}:${String(d.getMinutes()).padStart(2, 0)}:${String(d.getSeconds()).padStart(2, 0)}`
-}
+  const d = new Date();
+  currentTime.value = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, 0)}-${String(d.getDate()).padStart(2, 0)} ${String(
+    d.getHours()
+  ).padStart(2, 0)}:${String(d.getMinutes()).padStart(2, 0)}:${String(d.getSeconds()).padStart(2, 0)}`;
+};
 
 onMounted(() => {
-  selectToday()
-  updateTime()
-  timeTimer = setInterval(updateTime, 1000)
-  startLogScroll()
-  startAddOperationLog()
-})
+  selectToday();
+  updateTime();
+  timeTimer = setInterval(updateTime, 1000);
+  startLogScroll();
+  startAddOperationLog();
+});
 onUnmounted(() => {
-  clearInterval(timeTimer)
-  clearInterval(logTimer)
-  clearInterval(addLogTimer)
-})
+  clearInterval(timeTimer);
+  clearInterval(logTimer);
+  clearInterval(addLogTimer);
+});
 </script>
 
 <style lang="less" scoped>
@@ -393,7 +403,7 @@ onUnmounted(() => {
   height: 100%;
   background: #0a102b;
   color: #e0efff;
-  font-family: "Microsoft YaHei", sans-serif;
+  font-family: 'Microsoft YaHei', sans-serif;
   overflow: hidden !important;
   padding: 8px;
   box-sizing: border-box;
@@ -987,4 +997,4 @@ onUnmounted(() => {
 .alarm-item.new {
   animation: newAlarmFlash 1.8s forwards;
 }
-</style>
+</style> -->

src/views/vent/monitorManager/mainLocalWind/index.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
   <div class="screen-container">
     <div class="top-section">
       <div class="system-title">主通风机无人巡检演示系统</div>
@@ -16,7 +16,6 @@
             <div class="time-box">当前时间：{{ currentTime }}</div>
           </div>
 
-          <!-- 双视频画面：主风机主体 + 配电室 -->
           <div class="video-single">
             <div class="video-item">
               <div class="video-title">主风机主体监控 [{{ currentDeviceName }}]</div>
@@ -39,11 +38,9 @@
         </div>
 
         <div class="top-right">
-          <!-- 设备操作日志（最多显示3条） -->
           <div class="status-panel log-panel">
             <div class="status-title">设备操作日志</div>
             <div class="alarm-scroll" ref="logScroll" style="height: 100%;padding:4px;">
-              <!-- 核心修改：slice(0, 3) -->
               <div class="alarm-item" v-for="(item, idx) in operationLog.slice(0, 3)" :key="idx"
                 :class="[item.status, item.new ? 'new' : '']">
                 <div class="alarm-full-line">
@@ -56,7 +53,6 @@
             </div>
           </div>
 
-          <!-- 主风机状态 -->
           <div class="status-panel status-panel-large">
             <div class="status-title">主风机运行状态</div>
             <div class="status-grid">
@@ -126,7 +122,6 @@
 
     <div class="bottom-section">
       <div class="content-wrap">
-        <!-- 抓拍图片区域 -->
         <div class="img-list">
           <div class="img-item" v-for="(item, idx) in currentImgList" :key="idx" @click="openImgModal(item)">
             <img :src="item.imgUrl" class="img-thumbnail">
@@ -137,7 +132,6 @@
           </div>
         </div>
 
-        <!-- 右侧表格：仅保留人员检测记录 -->
         <div class="right-data-panel">
           <div class="tab-nav">
             <div class="tab-item" :class="{ active: activeTab === 'personDetect' }" @click="activeTab = 'personDetect'">
@@ -149,7 +143,6 @@
           </div>
 
           <div class="data-list">
-            <!-- 人员检测（无姓名、无区队） -->
             <div class="data-header" v-if="activeTab === 'personDetect'">
               <div class="data-col">序号</div>
               <div class="data-col">设备</div>
@@ -158,7 +151,6 @@
               <div class="data-col">检测结果</div>
               <div class="data-col">状态</div>
             </div>
-            <!-- 操作日志 -->
             <div class="data-header" v-else-if="activeTab === 'operateLog'">
               <div class="data-col">序号</div>
               <div class="data-col">设备</div>
@@ -167,7 +159,6 @@
               <div class="data-col">比对结果</div>
               <div class="data-col">状态</div>
             </div>
-            <!-- 预警 -->
             <div class="data-header" v-else>
               <div class="data-col">序号</div>
               <div class="data-col">设备</div>
@@ -188,7 +179,6 @@
                 }}</div>
             </div>
 
-            <!-- 表格里的操作日志也限制3条 -->
             <div class="data-row" v-for="(item, idx) in operationLog.slice(0, 3)" :key="idx"
               v-if="activeTab === 'operateLog'">
               <div class="data-col">{{ idx + 1 }}</div>
@@ -909,4 +899,4 @@ onUnmounted(() => {
 .alarm-item.new {
   animation: newAlarmFlash 1.8s forwards;
 }
-</style>
+</style> -->

src/views/vent/monitorManager/windDoorVideo/index.vue

@@ -1,4 +1,4 @@
-<template>
+ <!-- <template>
   <div class="screen-container">
     <div class="top-section">
       <div class="system-title">风门视频图像综合解析系统</div>
@@ -14,7 +14,6 @@
             </select>
             <button class="btn btn-primary" @click="refreshVideo">刷新视频</button>
 
-            <!-- 当前时间 -->
             <div class="time-box">当前时间：{{ currentTime }}</div>
           </div>
 
@@ -22,10 +21,8 @@
             <div class="video-item">
               <div class="video-title">前门 [{{ currentDoorName }}]</div>
               <div class="video-box">
-                <!-- 视频标签：所有属性齐全，兼容所有浏览器 -->
                 <video class="video-bg" autoplay loop muted playsinline webkit-playsinline controls>
-                  <source src="@/assets/images/wind-video/video/v1.mp4" type="video/mp4">
-                  <!-- 兜底提示：视频不支持时显示 -->
+                  <source src="@/assets/images/wind-video/video/v1.mp4" type="video/mp4" />
                   您的浏览器不支持视频播放
                 </video>
               </div>
@@ -34,8 +31,7 @@
               <div class="video-title">后门 [{{ currentDoorName }}]</div>
               <div class="video-box">
                 <video class="video-bg" autoplay loop muted playsinline webkit-playsinline controls>
-                  <source src="@/assets/images/wind-video/video/v2.mp4" type="video/mp4">
-                  <!-- 兜底提示：视频不支持时显示 -->
+                  <source src="@/assets/images/wind-video/video/v2.mp4" type="video/mp4" />
                   您的浏览器不支持视频播放
                 </video>
               </div>
@@ -83,8 +79,7 @@
               </div>
             </div>
             <div class="alarm-scroll" ref="alarmScroll">
-              <div class="alarm-item" v-for="(item, idx) in alarmList" :key="idx"
-                :class="[item.level, item.new ? 'new' : '']">
+              <div class="alarm-item" v-for="(item, idx) in alarmList" :key="idx" :class="[item.level, item.new ? 'new' : '']">
                 <span class="alarm-time">{{ item.time }}</span>
                 <span class="alarm-door">{{ getDoorName(item.doorId) }}</span>
                 <span class="alarm-type">{{ item.type }}</span>
@@ -100,9 +95,9 @@
       <div class="search-panel">
         <div class="search-item">
           <label>时间范围：</label>
-          <input type="datetime-local" v-model="searchForm.startTime" class="search-input">
+          <input type="datetime-local" v-model="searchForm.startTime" class="search-input" />
           <span class="split">-</span>
-          <input type="datetime-local" v-model="searchForm.endTime" class="search-input">
+          <input type="datetime-local" v-model="searchForm.endTime" class="search-input" />
           <button class="btn btn-sm btn-default" @click="selectToday">今日</button>
           <button class="btn btn-sm btn-default" @click="select7d">近7天</button>
         </div>
@@ -131,7 +126,7 @@
       <div class="content-wrap">
         <div class="img-list">
           <div class="img-item" v-for="(item, idx) in currentImgList" :key="idx" @click="openImgModal(item)">
-            <img :src="item.imgUrl" class="img-thumbnail">
+            <img :src="item.imgUrl" class="img-thumbnail" />
             <div class="img-desc">
               <p class="desc-line1">{{ getDoorName(item.doorId) }}</p>
               <p class="desc-line2">
@@ -147,8 +142,7 @@
           <div class="tab-nav">
             <div class="tab-item" :class="{ active: activeTab === 'car' }" @click="activeTab = 'car'">车辆通行记录</div>
             <div class="tab-item" :class="{ active: activeTab === 'person' }" @click="activeTab = 'person'">人员通行记录</div>
-            <div class="tab-item" :class="{ active: activeTab === 'unclose' }" @click="activeTab = 'unclose'">风门未关严记录
-            </div>
+            <div class="tab-item" :class="{ active: activeTab === 'unclose' }" @click="activeTab = 'unclose'">风门未关严记录 </div>
           </div>
 
           <div class="data-list">
@@ -206,7 +200,7 @@
           <span>图像详情</span>
           <button class="close-btn" @click="closeImgModal">×</button>
         </div>
-        <img :src="currentModalImg" class="modal-img">
+        <img :src="currentModalImg" class="modal-img" />
         <div class="modal-info">
           <p>{{ modalInfo }}</p>
         </div>
@@ -214,27 +208,26 @@
     </div>
   </div>
 </template>
-
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import { doorList,statusData,alarmTypeList,createRandomAlarm,currentImgList,carList,personList,uncloseList } from './windDoorVideo.data'
-
-const selectDoor = ref('all')
-const currentDoorId = ref(1)
-const currentDoorName = ref('五盘区402辅运大巷风门')
-const videoUrl1 = ref('https://picsum.photos/800/600?random=1')
-const videoUrl2 = ref('https://picsum.photos/800/600?random=2')
-const showImgModal = ref(false)
-const currentModalImg = ref('')
-const modalInfo = ref('')
-const activeTab = ref('car')
-const currentTime = ref('')
+import { ref, onMounted, onUnmounted } from 'vue';
+import { doorList, statusData, alarmTypeList, createRandomAlarm, currentImgList, carList, personList, uncloseList } from './windDoorVideo.data';
+
+const selectDoor = ref('all');
+const currentDoorId = ref(1);
+const currentDoorName = ref('五盘区402辅运大巷风门');
+const videoUrl1 = ref('https://picsum.photos/800/600?random=1');
+const videoUrl2 = ref('https://picsum.photos/800/600?random=2');
+const showImgModal = ref(false);
+const currentModalImg = ref('');
+const modalInfo = ref('');
+const activeTab = ref('car');
+const currentTime = ref('');
 // https获取监测数据
 let timeTimer: null | NodeJS.Timeout = null;
-let addAlarmTimer: null | NodeJS.Timeout = null;// 新增：定时添加告警定时器
+let addAlarmTimer: null | NodeJS.Timeout = null; // 新增：定时添加告警定时器
 let alarmTimer: null | NodeJS.Timeout = null; // 原有滚动定时器
-const alarmScroll = ref<any>(null)
-const searchForm = ref({ startTime: '', endTime: '', alarmType: 'all', doorId: 'all' })
+const alarmScroll = ref<any>(null);
+const searchForm = ref({ startTime: '', endTime: '', alarmType: 'all', doorId: 'all' });
 const alarmList = ref<any[]>([
   { time: '16:30:22', doorId: 2, type: '防夹人预警', desc: '危险区域有人闯入，已触发PLC停止', level: 'red' },
   { time: '16:28:15', doorId: 4, type: '风门未关严', desc: '门板闭合缝隙15mm，超标10mm', level: 'yellow' },
@@ -245,18 +238,16 @@ const alarmList = ref<any[]>([
   { time: '16:05:12', doorId: 2, type: '防夹人预警', desc: '风门闭合区检测到人员肢体，紧急止停', level: 'red' },
   { time: '16:00:58', doorId: 1, type: '风门未关严', desc: '门板闭合缝隙8mm，接近阈值', level: 'gray' },
   { time: '15:55:33', doorId: 5, type: '异物卡堵', desc: '风门轨道有杂物', level: 'yellow' },
-  { time: '15:50:20', doorId: 3, type: '违规停留', desc: '禁停区有人员逗留，已语音提醒', level: 'gray' }
-])
-
-
+  { time: '15:50:20', doorId: 3, type: '违规停留', desc: '禁停区有人员逗留，已语音提醒', level: 'gray' },
+]);
 
 // 新增：定时添加新告警到顶部
 const startAddAlarm = () => {
   // 每5-10秒随机生成1条（可自行调整时间）
-  const randomTime = 5000 + Math.floor(Math.random() * 5000)
+  const randomTime = 5000 + Math.floor(Math.random() * 5000);
   addAlarmTimer = setInterval(() => {
-    const newAlarm = createRandomAlarm()
-    alarmList.value.unshift(newAlarm) // 插入到列表顶部，实现“新告警优先展示”
+    const newAlarm = createRandomAlarm();
+    alarmList.value.unshift(newAlarm); // 插入到列表顶部，实现“新告警优先展示”
     newAlarm.new = true;
     // 1.8 秒后清除动画
     setTimeout(() => {
@@ -264,104 +255,112 @@ const startAddAlarm = () => {
     }, 1800);
     // 限制列表长度，避免数据过多（保留20条，可调整）
     if (alarmList.value.length > 20) {
-      alarmList.value.pop()
+      alarmList.value.pop();
     }
-  }, randomTime)
-}
+  }, randomTime);
+};
 const getDoorName = (id) => {
-  const d = doorList.find(i => i.id === id)
-  return d ? d.name : '未知风门'
-}
+  const d = doorList.find((i) => i.id === id);
+  return d ? d.name : '未知风门';
+};
 const switchDoor = () => {
   if (selectDoor.value !== 'all') {
-    currentDoorId.value = +selectDoor.value
-    currentDoorName.value = getDoorName(currentDoorId.value)
-    videoUrl1.value = `https://picsum.photos/800/600?random=${Math.random()}`
-    videoUrl2.value = `https://picsum.photos/800/600?random=${Math.random()}`
+    currentDoorId.value = +selectDoor.value;
+    currentDoorName.value = getDoorName(currentDoorId.value);
+    videoUrl1.value = `https://picsum.photos/800/600?random=${Math.random()}`;
+    videoUrl2.value = `https://picsum.photos/800/600?random=${Math.random()}`;
   }
-}
+};
 const refreshVideo = () => {
-  videoUrl1.value = `https://picsum.photos/800/600?random=${Math.random()}`
-  videoUrl2.value = `https://picsum.photos/800/600?random=${Math.random()}`
-}
-const clearAlarm = () => { alarmList.value = [] }
+  videoUrl1.value = `https://picsum.photos/800/600?random=${Math.random()}`;
+  videoUrl2.value = `https://picsum.photos/800/600?random=${Math.random()}`;
+};
+const clearAlarm = () => {
+  alarmList.value = [];
+};
 const formatDate = (d) => {
-  const y = d.getFullYear()
-  const m = String(d.getMonth() + 1).padStart(2, '0')
-  const dt = String(d.getDate()).padStart(2, '0')
-  const h = String(d.getHours()).padStart(2, '0')
-  const mi = String(d.getMinutes()).padStart(2, '0')
-  return `${y}-${m}-${dt}T${h}:${mi}`
-}
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const dt = String(d.getDate()).padStart(2, '0');
+  const h = String(d.getHours()).padStart(2, '0');
+  const mi = String(d.getMinutes()).padStart(2, '0');
+  return `${y}-${m}-${dt}T${h}:${mi}`;
+};
 
 const selectToday = () => {
-  const now = new Date()
-  const st = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0)
-  searchForm.value.startTime = formatDate(st)
-  searchForm.value.endTime = formatDate(now)
-}
+  const now = new Date();
+  const st = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
+  searchForm.value.startTime = formatDate(st);
+  searchForm.value.endTime = formatDate(now);
+};
 
 const select7d = () => {
-  const now = new Date()
-  const st = new Date(now.getTime() - 7 * 86400000)
-  searchForm.value.startTime = formatDate(st)
-  searchForm.value.endTime = formatDate(now)
-}
-
-const handleSearch = () => { alert('检索成功') }
-const resetSearch = () => { searchForm.value = { startTime: '', endTime: '', alarmType: 'all', doorId: 'all' } }
+  const now = new Date();
+  const st = new Date(now.getTime() - 7 * 86400000);
+  searchForm.value.startTime = formatDate(st);
+  searchForm.value.endTime = formatDate(now);
+};
+
+const handleSearch = () => {
+  alert('检索成功');
+};
+const resetSearch = () => {
+  searchForm.value = { startTime: '', endTime: '', alarmType: 'all', doorId: 'all' };
+};
 
 const openImgModal = (item) => {
-  showImgModal.value = true
-  currentModalImg.value = item.imgUrl
-  let info = ''
-  if (item.type === '车辆通行') info = `${getDoorName(item.doorId)} | 车辆通行/${item.license}`
-  if (item.type === '人员通行') info = `${getDoorName(item.doorId)} | 人员通行/${item.personName}`
-  if (item.type === '风门未关严') info = `${getDoorName(item.doorId)} | 缝隙${item.gap}mm`
-  modalInfo.value = info
-}
-const closeImgModal = () => { showImgModal.value = false }
+  showImgModal.value = true;
+  currentModalImg.value = item.imgUrl;
+  let info = '';
+  if (item.type === '车辆通行') info = `${getDoorName(item.doorId)} | 车辆通行/${item.license}`;
+  if (item.type === '人员通行') info = `${getDoorName(item.doorId)} | 人员通行/${item.personName}`;
+  if (item.type === '风门未关严') info = `${getDoorName(item.doorId)} | 缝隙${item.gap}mm`;
+  modalInfo.value = info;
+};
+const closeImgModal = () => {
+  showImgModal.value = false;
+};
 
 const updateTime = () => {
-  const d = new Date()
-  const y = d.getFullYear()
-  const m = String(d.getMonth() + 1).padStart(2, '0')
-  const dt = String(d.getDate()).padStart(2, '0')
-  const h = String(d.getHours()).padStart(2, '0')
-  const mi = String(d.getMinutes()).padStart(2, '0')
-  const se = String(d.getSeconds()).padStart(2, '0')
-  currentTime.value = `${y}-${m}-${dt} ${h}:${mi}:${se}`
-}
+  const d = new Date();
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const dt = String(d.getDate()).padStart(2, '0');
+  const h = String(d.getHours()).padStart(2, '0');
+  const mi = String(d.getMinutes()).padStart(2, '0');
+  const se = String(d.getSeconds()).padStart(2, '0');
+  currentTime.value = `${y}-${m}-${dt} ${h}:${mi}:${se}`;
+};
 // 恢复告警滚动（优化流畅度）
 const startAlarmScroll = () => {
-  if (!alarmScroll.value) return
+  if (!alarmScroll.value) return;
   alarmTimer = setInterval(() => {
-    const scrollDom = alarmScroll.value
-    const firstItem = scrollDom.firstElementChild
+    const scrollDom = alarmScroll.value;
+    const firstItem = scrollDom.firstElementChild;
     if (firstItem) {
       // 平滑滚动到下一条，贴合工业界面体验
-      scrollDom.scrollTop += 28
+      scrollDom.scrollTop += 28;
       // 滚动到底部时重置
       if (scrollDom.scrollTop >= scrollDom.scrollHeight - scrollDom.clientHeight) {
-        scrollDom.scrollTop = 0
+        scrollDom.scrollTop = 0;
       }
     }
-  }, 1500) // 滚动速度（数值越小越快，可调整）
-}
+  }, 1500); // 滚动速度（数值越小越快，可调整）
+};
 
 onMounted(() => {
-  selectToday()
-  updateTime()
-  timeTimer = setInterval(updateTime, 1000)
-  startAlarmScroll() // 恢复原有滚动
-  startAddAlarm() // 新增：启动定时添加新告警
-})
+  selectToday();
+  updateTime();
+  timeTimer = setInterval(updateTime, 1000);
+  startAlarmScroll(); // 恢复原有滚动
+  startAddAlarm(); // 新增：启动定时添加新告警
+});
 
 onUnmounted(() => {
-  clearInterval(timeTimer)
-  if (alarmTimer) clearInterval(alarmTimer) // 销毁滚动定时器
-  if (addAlarmTimer) clearInterval(addAlarmTimer) // 销毁新增告警定时器
-})
+  clearInterval(timeTimer);
+  if (alarmTimer) clearInterval(alarmTimer); // 销毁滚动定时器
+  if (addAlarmTimer) clearInterval(addAlarmTimer); // 销毁新增告警定时器
+});
 </script>
 
 <style lang="less" scoped>
@@ -371,7 +370,7 @@ onUnmounted(() => {
   height: 100%;
   background: #0a102b;
   color: #e0efff;
-  font-family: "Microsoft YaHei", sans-serif;
+  font-family: 'Microsoft YaHei', sans-serif;
   /* 关键修复：禁止页面整体滚动，内部区域自己滚动 */
   overflow: hidden !important;
   padding: 8px;
@@ -1035,4 +1034,4 @@ onUnmounted(() => {
   z-index: 10;
   /* 新告警浮在最上层 */
 }
-</style>
+</style> -->