feat(views): 环境监控”时间轴滚动查询“功能新增超标数据显示功能

src/api/index.ts

@@ -5,6 +5,7 @@ import { request } from '@/utils';
 import type {
   AddInterface,
   AgreementUpdate,
+  AlarmHistoryItem,
   AllDevicesList,
   BatchUpdate,
   CustomParameters,
@@ -156,6 +157,11 @@ export const updateBatchMonitorPointAlarm = async (params: WarningItem[]) => {
   });
 };
 
+export const getMonitorPointAlarmHistory = async (devGroupId: number) => {
+  const data = await request<AlarmHistoryItem[]>(apiBiz(`/monitorPointAlarm/history/${devGroupId}`));
+  return data;
+};
+
 // 环境监控-区域
 
 export const addRegion = async (params: RegionQuery) => {

src/views/env-monitor/EnvMonitor.vue

@@ -16,6 +16,7 @@ import {
   getDeviceGroupList,
   getDeviceListSimple,
   getGroupRegions,
+  getMonitorPointAlarmHistory,
   getMonitorPointInfo,
   getPageList,
   getRegionsPointsData,
@@ -40,6 +41,7 @@ import type { Meta2dData } from '@meta2d/core';
 import type { FormInstance, Rule } from 'ant-design-vue/es/form';
 import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';
 import type {
+  AlarmHistoryItem,
   DeviceGroup,
   DeviceGroupItem,
   DeviceParams,
@@ -61,6 +63,7 @@ interface TimeList {
   time: string;
   integral: boolean;
   index: number;
+  backgroundShow: boolean;
 }
 
 const envMonitorListRef = useTemplateRef('envMonitorList');
@@ -99,6 +102,7 @@ const timeList = ref<TimeList[]>([]);
 const timeLineIndex = ref<number>(0);
 const monitoringPointList = ref<MonitoringPointData[]>([]);
 const chooseTime = ref<string>();
+const alarmHistoryList = ref<AlarmHistoryItem[]>([]);
 
 const envMonitorStyle = ref<EnvMonitorStyle>({
   background: `url(${envMonitorBgc})`,
@@ -532,6 +536,7 @@ const generateTimeArray = async () => {
         time: timeStr,
         integral: minute === 0, // 分钟为0时标记为整点
         index: index++,
+        backgroundShow: false,
       });
     }
   }
@@ -547,6 +552,44 @@ const generateTimeArray = async () => {
   }, 50); // 增加短延迟
 };
 
+// 时间字符串转分钟数（支持带日期和不带日期）
+function parseTimeToMinutes(timeStr: string): number {
+  if (!timeStr.trim()) return 24 * 60; // 空字符串视为次日0点
+  const timePart = timeStr.includes(' ') ? timeStr.split(' ')[1] : timeStr;
+  const [hours, minutes] = timePart.split(':').slice(0, 2).map(Number);
+  return hours * 60 + minutes;
+}
+
+const getAlarmHistoryList = () => {
+  handleRequest(async () => {
+    if (gradeTwo.value) {
+      alarmHistoryList.value = await getMonitorPointAlarmHistory(gradeTwo.value);
+      if (alarmHistoryList.value.length) {
+        // 核心逻辑
+        for (const bItem of alarmHistoryList.value) {
+          const triggerStart = parseTimeToMinutes(bItem.triggerTime);
+          const recoverEnd = parseTimeToMinutes(bItem.recoverTime);
+
+          for (const aItem of timeList.value) {
+            const aStart = parseTimeToMinutes(aItem.time);
+            const aEnd = aStart + 12;
+
+            // 区间重叠判断（左闭右开）
+            const isOverlap = triggerStart < aEnd && recoverEnd >= aStart;
+
+            // 特殊处理：当recoverTime为空时，触发时间后的所有区间
+            const isInfiniteMode = !bItem.recoverTime.trim() && aStart >= triggerStart;
+
+            if (isOverlap || isInfiniteMode) {
+              aItem.backgroundShow = true;
+            }
+          }
+        }
+      }
+    }
+  });
+};
+
 // 返回当前
 const returnCurrently = () => {
   bs?.refresh();
@@ -643,6 +686,7 @@ watch(
   () => gradeTwo.value,
   (count) => {
     if (count) {
+      getAlarmHistoryList();
       getRegionsPointsList(count);
       obtainRegionsPointsData(count);
       getGroupRegionsList();
@@ -780,8 +824,7 @@ const copyAreaCanvas = () => {
               <div>&nbsp;&nbsp;&nbsp;</div>
 
               <div v-for="item in timeList" :key="item.time">
-                <!-- :class="item.index === timeLineIndex ? 'background-alarm' : 'background-default'" -->
-                <AFlex align="flex-end" class="background-default">
+                <AFlex align="flex-end" :class="item.backgroundShow ? 'background-alarm' : 'background-default'">
                   <AFlex :vertical="true">
                     <div v-if="item.integral" class="time-style">{{ item.time }}</div>
                     <div @click="addTimeLine(item)">