更新TopoDetail组件，添加compare_type参数以判断告警触发条件，调整时间范围逻辑，禁用今天及以后的日期选择，并优化样式和交互体验。

src/App.jsx

@@ -60,8 +60,8 @@ function Home(props) {
         ></Alarm.EasyConfig>
       </div> */}
       <Alarm.TopoDetailModal
-        id={689504}
-        alarmTime="2025-06-12 00:00:00"
+        id={690332}
+        alarmTime="2025-06-17 00:00:00"
         open={true}
         onCancel={() => {}}
       />

src/pages/Alarm/components/topoDetail.jsx

@@ -7,6 +7,7 @@ import * as echarts from "echarts";
 import dayjs from "dayjs";
 import _ from "lodash";
 import API from "../../../api/alarm";
+import classNames from "classnames";
 
 const { RangePicker } = DatePicker;
 
@@ -103,7 +104,8 @@ const initialOption = {
               `<span style="display:inline-block;margin-right:4px;margin-bottom:5px;width:10px;height:2px;background:${item.color};"></span>` +
               item.seriesName +
               "    " +
-              item.value
+              item.value +
+              "%"
             );
           })
           .join("<br/>")
@@ -113,7 +115,7 @@ const initialOption = {
   legend: {
     show: true,
     top: 34,
-    left: 28,
+    left: 50,
     itemWidth: 8,
     textStyle: {
       color: getVariable("--dt-text-color3"),
@@ -155,6 +157,8 @@ const initialOption = {
       color: getVariable("--dt-text-color3"),
       fontSize: 12,
       fontWeight: 400,
+      align: "right",
+      padding: [0, 8, 0, 0],
     },
     axisLabel: {
       color: getVariable("--dt-text-color3"),
@@ -210,11 +214,22 @@ const TopoDetail = (props) => {
   const [chartData, setChartData] = useState(null);
   const [loading, setLoading] = useState(false);
 
-  // 设置默认时间范围为告警时间前三天和后三天
-  const [range, setRange] = useState([
-    dayjs(alarmTime).startOf('day').subtract(3, "day"),
-    dayjs(alarmTime).startOf('day').add(3, "day"),
-  ]);
+  // 设置默认时间范围为告警时间前三天和后三天，但不能超过昨天
+  const [range, setRange] = useState(() => {
+    if (alarmTime) {
+      const centerTime = dayjs(alarmTime);
+      const startDate = centerTime.startOf("day").subtract(3, "day");
+      const endDate = centerTime.startOf("day").add(3, "day");
+      const yesterday = dayjs().subtract(1, "day").startOf("day");
+
+      // 如果结束时间超过昨天，则设置为昨天
+      const finalEndDate = endDate.isAfter(yesterday) ? yesterday : endDate;
+
+      return [startDate, finalEndDate];
+    } else {
+      return [dayjs().subtract(4, "day"), dayjs().subtract(1, "day")];
+    }
+  });
 
   // 获取告警详情数据
   useEffect(() => {
@@ -252,7 +267,11 @@ const TopoDetail = (props) => {
           remark: apiData.remark || "-",
         });
 
-        const data = processChartData(apiData.history, apiData.threshold);
+        const data = processChartData(
+          apiData.history,
+          apiData.threshold,
+          apiData.compare_type
+        );
 
         // 设置图表数据
         setChartData(data);
@@ -266,8 +285,26 @@ const TopoDetail = (props) => {
     }
   };
 
+  // 根据compare_type判断是否触发告警
+  const isAlarmTriggered = (value, threshold, compareType) => {
+    switch (compareType) {
+      case 1: // >=
+        return value >= threshold;
+      case 2: // <=
+        return value <= threshold;
+      case 3: // <
+        return value < threshold;
+      case 4: // >
+        return value > threshold;
+      case 5: // ==
+        return value === threshold;
+      default:
+        return false;
+    }
+  };
+
   // 处理图表数据
-  const processChartData = (historyData, threshold) => {
+  const processChartData = (historyData, threshold, compareType) => {
     if (!historyData || historyData.length === 0) {
       return null;
     }
@@ -294,12 +331,12 @@ const TopoDetail = (props) => {
       data: seriesData,
       symbol: "emptyCircle", // 使用空心圆圈
       symbolSize: (value, params) => {
-        // 只有超过阈值的点才显示圆圈
-        return value > thresholdValue ? 8 : 0;
+        // 根据compare_type判断是否显示圆圈
+        return isAlarmTriggered(value, thresholdValue, compareType) ? 8 : 0;
       },
       itemStyle: {
         color: ({ data }) => {
-          return data > thresholdValue
+          return isAlarmTriggered(data, thresholdValue, compareType)
             ? getVariable("--dt-error-color1")
             : getVariable("--dt-primary-color1");
         },
@@ -319,6 +356,19 @@ const TopoDetail = (props) => {
           },
         ]),
       },
+    };
+
+    // 添加阈值线作为单独的系列，以便在legend和tooltip中显示
+    newData.series.push({
+      name: "阈值",
+      type: "line",
+      data: Array(xAxisData.length).fill(thresholdValue),
+      symbol: "none",
+      lineStyle: {
+        width: 0, // 设置为0，使线不可见（已由markLine显示）
+        type: "dashed",
+        color: getVariable("--dt-error-color1"),
+      },
       // 添加阈值线 - 使用markLine
       markLine: {
         silent: true,
@@ -338,19 +388,6 @@ const TopoDetail = (props) => {
           },
         ],
       },
-    };
-
-    // 添加阈值线作为单独的系列，以便在legend和tooltip中显示
-    newData.series.push({
-      name: "阈值",
-      type: "line",
-      data: Array(xAxisData.length).fill(thresholdValue),
-      symbol: "none",
-      lineStyle: {
-        width: 0, // 设置为0，使线不可见（已由markLine显示）
-        type: "dashed",
-        color: getVariable("--dt-error-color1"),
-      },
     });
 
     newData.xAxis.data = xAxisData;
@@ -358,6 +395,12 @@ const TopoDetail = (props) => {
     return newData;
   };
 
+  // 禁用今天及以后的日期
+  const disabledDate = (current) => {
+    // 禁用今天及以后的日期
+    return current && current.isAfter(dayjs().subtract(1, "day"), "day");
+  };
+
   // 处理日期范围变化
   const handleRangeChange = (dates) => {
     if (dates && dates.length === 2) {
@@ -430,8 +473,17 @@ const TopoDetail = (props) => {
               <div className={styles.status}>
                 {alarmStatusMap[alarmData.status]}
               </div>
-              <div className={styles.opStatus}>
-                {alarmData.op_status === 1 ? "已确认" : "未确认"}
+              <div
+                className={classNames(styles.opStatus, {
+                  [styles.link]: alarmData.op_status !== 1,
+                })}
+                onClick={() => {
+                  if (alarmData.op_status !== 1) {
+                    props.onConfirm();
+                  }
+                }}
+              >
+                {alarmData.op_status === 1 ? "已确认" : "确认"}
               </div>
             </div>
           </div>
@@ -442,6 +494,7 @@ const TopoDetail = (props) => {
                 format="YYYY-MM-DD"
                 value={range}
                 onChange={handleRangeChange}
+                disabledDate={disabledDate}
                 style={{ width: 360, zIndex: 99999 }}
               />
             </div>

src/pages/Alarm/components/topoDetail.module.less

@@ -36,6 +36,10 @@
     color: var(--dt-text-color4);
     font-size: 14px;
     margin-top: 18px;
+    &.link {
+      cursor: pointer;
+      color: var(--dt-primary-color1);
+    }
   }
 }
 
@@ -51,4 +55,4 @@
   background-color: var(--dt-fill-color3) !important;
   border-width: 0 !important;
   box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1) !important;
-} 
+}