更改详情样式

src/App.jsx

@@ -10,31 +10,31 @@ function Home(props) {
       <Alarm.DetailModal
         open={open}
         onCancel={() => setOpen(false)}
-        options={{ ruleId: 69 }}
-        // options={{
-        //   detail: {
-        //     id: 260909,
-        //     name: "DT_chr7_AE已有告警名称超下下限(值0.00; 限值5000)",
-        //     rule_id: 88,
-        //     type: 1,
-        //     sub_type: 14,
-        //     status: 1,
-        //     point_id: "ZWB_ALARM_chr_1_AE",
-        //     point_name: "",
-        //     alarm_level: 1,
-        //     op_status: 2,
-        //     created_time: "2024-09-25 10:43:08",
-        //     duration: 3,
-        //     confirmed_time: "",
-        //     confirmed_oper_id: 0,
-        //     confirmed_oper_name: "",
-        //     recovery_time: "",
-        //     remark: "",
-        //     value: 2.446e-41,
-        //     unit: "",
-        //     group_name: "",
-        //   },
-        // }}
+        // options={{ ruleId: 69 }}
+        options={{
+          detail: {
+            id: 275575,
+            name: "测试",
+            rule_id: 112,
+            type: 1,
+            sub_type: 12,
+            status: 1,
+            point_id: "",
+            point_name: "",
+            alarm_level: 1,
+            op_status: 1,
+            created_time: "2024-09-25 15:06:00",
+            duration: 1704255,
+            confirmed_time: "2024-09-25 16:03:15",
+            confirmed_oper_id: 14,
+            confirmed_oper_name: "郭红阳",
+            recovery_time: "",
+            remark: "ccc",
+            value: 0,
+            unit: "",
+            group_name: "",
+          },
+        }}
         // // options={{
         // //   pointId: "ABC123_AAA_chr1_AEff_MIN_H",
         // // }}

src/api/alarm.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 const config = {
   // baseURL: "http://192.168.1.109:32080",
-  baseURL: '/api',
+  baseURL: '/',
   noNeedInterceptor: false,
   headers: {
     Authorization: localStorage.getItem("token"),

src/pages/Alarm/components/components/AlarmDetail/index.jsx

@@ -16,6 +16,8 @@ import * as echarts from "echarts";
 import { getVariable } from "../../../../../utils/theme";
 import { Descriptions, DatePicker } from "antd";
 const { RangePicker } = DatePicker;
+import alert from "../../../../../assets/alert.png";
+import check from "../../../../../assets/check.png";
 
 const alarmTypeMap = {
   1: "过程告警",
@@ -330,20 +332,25 @@ const Index = (props) => {
   return (
     <>
       <div className={styles.desc}>
-        <Descriptions column={4} style={{ margin: "0px 20px" }}>
-          <Descriptions.Item span={2} label="告警名称">
+        <Descriptions column={3} style={{ margin: "0px 20px", width: "62.5%" }}>
+          <Descriptions.Item span={3} label="告警名称">
             {props.data?.data?.name}
           </Descriptions.Item>
-          {props.data?.data?.point_id && (
-            <Descriptions.Item label="点位编号">
-              {props.data?.data?.point_id}
-            </Descriptions.Item>
-          )}
+          {props.data?.data?.point_id !== null &&
+            props.data?.data?.point_id !== "" &&
+            props.data?.data?.point_id !== undefined && (
+              <Descriptions.Item label="点位编号">
+                {props.data?.data?.point_id}
+              </Descriptions.Item>
+            )}
+          <Descriptions.Item label="告警类型">
+            {alarmTypeMap[props.data?.data?.type]}
+          </Descriptions.Item>
           <Descriptions.Item label="告警级别">
             {levelMap[props.data?.data?.alarm_level]}
           </Descriptions.Item>
-          <Descriptions.Item label="告警类型">
-            {alarmTypeMap[props.data?.data?.type]}
+          <Descriptions.Item label="告警时间">
+            {props.data?.data?.created_time}
           </Descriptions.Item>
           <Descriptions.Item label="恢复时间">
             {props.data?.data?.recovery_time || "-"}
@@ -351,22 +358,37 @@ const Index = (props) => {
           <Descriptions.Item label="持续时间">
             {getDur(props?.data?.data?.duration)}
           </Descriptions.Item>
-          <Descriptions.Item label="告警时间">
-            {props.data?.data?.created_time}
-          </Descriptions.Item>
-          <Descriptions.Item label="告警状态">
-            {alarmStatusMap[props.data?.data?.status]}
+          <Descriptions.Item label="确认人">
+            {props.data?.data?.confirmed_oper_name}
           </Descriptions.Item>
           <Descriptions.Item label="确认时间">
             {props.data?.data?.confirmed_time}
           </Descriptions.Item>
-          <Descriptions.Item label="确认人">
-            {props.data?.data?.confirmed_oper_name}
-          </Descriptions.Item>
-          <Descriptions.Item label="备注">
+          <Descriptions.Item label="备注信息">
             {props.data?.data?.remark}
           </Descriptions.Item>
         </Descriptions>
+        <div className={styles.divide}></div>
+        <div className={styles.oper}>
+          <img src={props.data?.data?.status === 2 ? check : alert} />
+          <div className={styles.status}>
+            {alarmStatusMap[props.data?.data?.status]}
+          </div>
+          <div className={styles.buttons}>
+            <div className={styles.button} onClick={props?.onSetting}>
+              告警配置
+            </div>
+            <div className={styles.divide}></div>
+            <div
+              onClick={props.onConfirm}
+              className={`${styles.button} ${
+                props.data?.data?.op_status === 1 ? styles.disabled : ""
+              }`}
+            >
+              {props.data?.data?.op_status === 1 ? "已确认" : "告警确认"}
+            </div>
+          </div>
+        </div>
       </div>
       {(props.data?.data?.sub_type === 13 ||
         props.data?.data?.sub_type === 14) && (

src/pages/Alarm/components/components/AlarmDetail/index.module.less

@@ -53,6 +53,8 @@
 }
 
 .desc {
+  display: flex;
+  align-items: center;
   :global {
     .ant-descriptions .ant-descriptions-row > td {
       padding-bottom: 10px;
@@ -60,6 +62,45 @@
   }
 }
 
+.divide {
+  border-left: 1px solid var(--dt-line-color2);
+  height: 112px;
+}
+
+.oper {
+  width: 37.5%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  img {
+    width: 32px;
+    height: 32px;
+    margin-bottom: 4px;
+  }
+  .divide {
+    height: 20px;
+    margin: 0 12px;
+  }
+  .status {
+    color: var(--dt-text-color2);
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 18px;
+  }
+  .buttons {
+    display: flex;
+  }
+  .button {
+    color: var(--dt-primary-color);
+    cursor: pointer;
+    &.disabled {
+      color: var(--dt-text-color3);
+      pointer-events: none;
+    }
+  }
+}
+
 .tooltip {
   background-color: var(--dt-fill-color3) !important;
   border-width: 0 !important;

src/pages/Alarm/components/detail.jsx

@@ -98,7 +98,11 @@ const Detail = (props) => {
         {props.open && (
           <>
             <div className={styles.header}>
-              <div className={styles.tags}>
+              <div
+                className={`${styles.tags} ${
+                  current !== "history" ? styles.nobutton : ""
+                }`}
+              >
                 <Tabs
                   hideAdd
                   onChange={(value) => {
@@ -154,17 +158,19 @@ const Detail = (props) => {
                 </Radio.Group> */}
               </div>
               <div className={styles.oper}>
-                {current !== "history" && (
+                {/* {current !== "history" && (
                   <Button
                     disabled={currentData?.data?.op_status === 1}
                     onClick={() => setShowConfirm(true)}
                   >
                     {currentData?.data?.op_status === 1 ? "已确认" : "确认"}
                   </Button>
+                )} */}
+                {current === "history" && (
+                  <Button onClick={props?.onSetting} style={{ marginLeft: 10 }}>
+                    告警配置
+                  </Button>
                 )}
-                <Button onClick={props?.onSetting} style={{ marginLeft: 10 }}>
-                  告警配置
-                </Button>
               </div>
             </div>
 
@@ -172,7 +178,11 @@ const Detail = (props) => {
               <AlarmHistory onSelect={onSelect} ruleId={ruleId}></AlarmHistory>
             )}
             {current !== "history" && (
-              <AlarmDetail data={currentData}></AlarmDetail>
+              <AlarmDetail
+                onSetting={props?.onSetting}
+                onConfirm={() => setShowConfirm(true)}
+                data={currentData}
+              ></AlarmDetail>
             )}
           </>
         )}

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

@@ -14,6 +14,7 @@
   align-items: center;
   display: flex;
   margin-bottom: 16px;
+  margin-top: 32px;
 }
 .tags {
   overflow: auto;
@@ -27,7 +28,10 @@
       background-color: var(--dt-line-color2) !important;
     }
   }
-  width: calc(100% - 180px);
+  width: calc(100% - 90px);
+  &.nobutton {
+    width: 100%;
+  }
 }
 
 .oper {