bugfix

src/App.jsx

@@ -7,20 +7,21 @@ function Home(props) {
 
   return (
     <>
-      {/* <Alarm.DetailModal
+      <Alarm.DetailModal
         open={open}
         onCancel={() => setOpen(false)}
         options={{ ruleId: 25 }}
         // options={{
         //   pointId: "ABC123_AAA_chr1_AEff_MIN_H",
         // }}
-      ></Alarm.DetailModal> */}
+      ></Alarm.DetailModal>
       {/* <Alarm.ComplexConfig ref={compRef} editId={50}></Alarm.ComplexConfig> */}
       {/* <button onClick={() => compRef?.current?.ok()}>测试</button> */}
-      <Alarm.EasyConfig
+      {/* <Alarm.EasyConfig
         pointId="ZWB_ALARM_chr_5_AE"
         readonly
-      ></Alarm.EasyConfig>
+        // editId={-1}
+      ></Alarm.EasyConfig> */}
     </>
   );
 }

src/pages/Alarm/components/complex.jsx

@@ -106,6 +106,9 @@ const Complex = (props, ref) => {
       const { state, data } = await API2.addRule(obj);
       if (state === 0) {
         props.onConfirm(data?.id);
+        message.success("保存成功");
+      } else {
+        message.error("保存失败");
       }
     } else {
       const value = await form.validateFields();
@@ -119,6 +122,9 @@ const Complex = (props, ref) => {
       const { state } = await API2.editRule(obj);
       if (state === 0) {
         props.onConfirm(data.id);
+        message.success("保存成功");
+      } else {
+        message.error("保存失败");
       }
     }
     form.resetFields();

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

@@ -0,0 +1,97 @@
+import { Modal } from "antd";
+import React, { useState, useRef, useEffect } from "react";
+import Alarm from "../../../../../entry";
+import { Radio } from "antd";
+import { useMemoizedFn } from "ahooks";
+
+export function AlarmConfig(props) {
+  const [type, setType] = useState(0);
+  const [groupList, setGroupList] = useState([]);
+  const compRef = useRef(null);
+  const easyRef = useRef(null);
+
+  const onModalOk = useMemoizedFn(async () => {
+    if (type === 1) {
+      await compRef.current.ok();
+    } else {
+      await easyRef.current.ok();
+    }
+  });
+
+  const onEasyConfirm = () => {
+    props.onConfirm();
+  };
+
+  const onComplexConfirm = (id) => {
+    props.onConfirm({ ruleId: id ?? 0 });
+  };
+
+  useEffect(() => {
+    if (props.visible) {
+      setType(0);
+    }
+  }, [props.visible, props.ruleId]);
+
+  return (
+    <>
+      <Modal
+        getContainer={document.getElementById("diagram-container")}
+        open={props.visible}
+        width={type === 0 ? 500 : 1200}
+        onCancel={() => {
+          props.onClose();
+        }}
+        onOk={onModalOk}
+        title={
+          <div
+            style={{
+              fontSize: 16,
+            }}
+          >
+            告警配置
+          </div>
+        }
+        forceRender
+        zIndex="1002"
+        maskClosable={false}
+      >
+        {props.visible && (
+          <>
+            {props.isDiagram ? (
+              <>
+                <Radio.Group
+                  style={{ marginLeft: 40 }}
+                  value={type}
+                  onChange={(e) => setType(e.target.value)}
+                >
+                  <Radio.Button value={0}>简单告警</Radio.Button>
+                  <Radio.Button value={1}>复杂告警</Radio.Button>
+                </Radio.Group>
+                <div style={{ display: type === 0 ? "block" : "none" }}>
+                  <Alarm.EasyConfig
+                    ref={easyRef}
+                    pointId={props.pointId}
+                    groupList={groupList}
+                    onConfirm={onEasyConfirm}
+                    readonly
+                  ></Alarm.EasyConfig>
+                </div>
+                <div style={{ display: type === 1 ? "block" : "none" }}>
+                  <Alarm.ComplexConfig
+                    ref={compRef}
+                    editId={props.ruleId}
+                    groupList={groupList}
+                    onConfirm={onComplexConfirm}
+                    showList={true}
+                  ></Alarm.ComplexConfig>
+                </div>
+              </>
+            ) : (
+              <></>
+            )}
+          </>
+        )}
+      </Modal>
+    </>
+  );
+}

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

@@ -34,6 +34,8 @@ const Index = (props) => {
     const res = await confirmAlarm({
       id: props.currentAlarm?.id,
       remark: value?.remark ?? "",
+      oper_id: localStorage.getItem("user_id"),
+      oper_name: localStorage.getItem("username"),
     });
 
     if (res.state === 0) {
@@ -62,6 +64,7 @@ const Index = (props) => {
       onOk={onModalOk}
       onCancel={onModalCancel}
       destroyOnClose
+      zIndex={1002}
     >
       <Form
         name="basic"

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

@@ -108,7 +108,7 @@ const initialOption = {
   },
   grid: {
     top: 32,
-    left: "0%",
+    left: 64,
     right: 64,
     bottom: "0%",
     containLabel: true,
@@ -209,7 +209,7 @@ const Index = (props) => {
     const res = await API.getAlarmPointData(
       props.data?.data?.rule_id,
       range[0].unix(),
-      range[1].unix()
+      range[1].hour(23).minute(58).second(59).unix()
     );
     const newData = _.cloneDeep(initialOption);
     newData.series[0].data = res?.data?.point?.map((item) => item[1]);

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

@@ -242,7 +242,7 @@ const Index = (props) => {
       width: 120,
       ellipsis: "true",
       render: (text, record) => {
-        return <Tooltip title={text}>{text}</Tooltip>;
+        return <div title={text}>{text}</div>;
       },
     },
     {

src/pages/Alarm/components/detail.jsx

@@ -13,12 +13,16 @@ import { CloseOutlined } from "@ant-design/icons";
 import _ from "lodash";
 import AlarmHistory from "./components/AlarmHistory";
 import AlarmDetail from "./components/AlarmDetail";
+import AlarmConfirm from "./components/AlarmConfirm";
+// import { AlarmConfig } from "./components/AlarmConfig";
 
 const Detail = (props) => {
-  const { options } = props;
+  const { options, isDiagram } = props;
   const [tags, setTags] = useState([]);
   const [current, setCurrent] = useState("history");
   const [ruleId, setRuleId] = useState(-1);
+  const [showConfirm, setShowConfirm] = useState(false);
+  // const [showAlarmConfig, setShowAlarmConfig] = useState(false);
   const getRuleIdByPointId = useMemoizedFn(async (ruleId, pointId) => {
     const ids = [];
     if (options.pointId) {
@@ -64,46 +68,79 @@ const Detail = (props) => {
     setCurrent(record.id);
   };
   return (
-    <Modal
-      title="告警记录"
-      open={props.open}
-      width={1200}
-      onCancel={() => {
-        props.onCancel();
-      }}
-      zIndex="1001"
-      footer={null}
-      destroyOnClose
-    >
-      <div className={styles.tags}>
-        <Radio.Group
-          value={current}
-          onChange={(e) => setCurrent(e.target.value)}
-          size="middle"
-        >
-          <Radio.Button value="history">告警记录</Radio.Button>
-          {tags.map((item, index) => (
-            <Radio.Button value={item.id}>
-              <div className={styles.tagContainer}>
-                <div className={styles.label}>详情{index + 1}</div>
-                <CloseOutlined
-                  onClick={() => {
-                    if (current === item.id) {
-                      setCurrent("history");
-                    }
-                    onRemove(index);
-                  }}
-                />
-              </div>
-            </Radio.Button>
-          ))}
-        </Radio.Group>
-      </div>
-      {current === "history" && (
-        <AlarmHistory onSelect={onSelect} ruleId={ruleId}></AlarmHistory>
-      )}
-      {current !== "history" && <AlarmDetail data={currentData}></AlarmDetail>}
-    </Modal>
+    <>
+      <Modal
+        title="告警记录"
+        open={props.open}
+        width={1200}
+        onCancel={() => {
+          props.onCancel();
+        }}
+        zIndex="1001"
+        footer={null}
+        destroyOnClose
+      >
+        <div className={styles.header}>
+          <div className={styles.tags}>
+            <Radio.Group
+              value={current}
+              onChange={(e) => setCurrent(e.target.value)}
+              size="middle"
+            >
+              <Radio.Button value="history">告警记录</Radio.Button>
+              {tags.map((item, index) => (
+                <Radio.Button value={item.id}>
+                  <div className={styles.tagContainer}>
+                    <div className={styles.label}>详情{index + 1}</div>
+                    <CloseOutlined
+                      onClick={() => {
+                        if (current === item.id) {
+                          setCurrent("history");
+                        }
+                        onRemove(index);
+                      }}
+                    />
+                  </div>
+                </Radio.Button>
+              ))}
+            </Radio.Group>
+          </div>
+          <div className={styles.oper}>
+            {current !== "history" && (
+              <Button
+                disabled={currentData?.data?.op_status === 1}
+                onClick={() => setShowConfirm(true)}
+              >
+                {currentData?.data?.op_status === 1 ? "已确认" : "确认"}
+              </Button>
+            )}
+            {/* <Button style={{ marginLeft: 10 }}>告警配置</Button> */}
+          </div>
+        </div>
+
+        {current === "history" && (
+          <AlarmHistory onSelect={onSelect} ruleId={ruleId}></AlarmHistory>
+        )}
+        {current !== "history" && (
+          <AlarmDetail data={currentData}></AlarmDetail>
+        )}
+      </Modal>
+      <AlarmConfirm
+        currentAlarm={currentData?.data}
+        open={showConfirm}
+        onCancel={() => setShowConfirm(false)}
+      />
+      {/* <AlarmConfig
+        visible={showAlarmConfig}
+        pointId={props.alarmConfig?.pointId}
+        ruleId={props.alarmConfig?.ruleId}
+        onClose={() => {
+          setShowAlarmConfig(false);
+        }}
+        onConfirm={({ id }) => props.onConfirm?.({ ruleId: id ?? 0 })}
+        isDiagram={isDiagram}
+      ></AlarmConfig> */}
+    </>
   );
 };
 

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

@@ -10,7 +10,13 @@
   display: flex;
   align-items: center;
 }
+.header {
+  align-items: center;
+  display: flex;
+  margin-bottom: 16px;
+}
 .tags {
+  overflow: auto;
   :global {
     .ant-radio-button-wrapper {
       border-color: var(--dt-line-color2) !important;
@@ -21,5 +27,11 @@
       background-color: var(--dt-line-color2) !important;
     }
   }
-  margin-bottom: 16px;
+  width: calc(100% - 160px);
+}
+
+.oper {
+  display: flex;
+  justify-content: flex-end;
+  flex: 1;
 }

src/pages/Alarm/components/easy.jsx

@@ -45,7 +45,7 @@ const Easy = (props, ref) => {
   const [alEnable, setAlEnable] = useState(false);
   const [allEnable, setAllEnable] = useState(false);
   const [showMore, setShowMore] = useState(false);
-  const [alarmId, setAlarmId] = useState(null);
+  const [alarmId, setAlarmId] = useState(-1);
 
   const onModalOk = useMemoizedFn(async () => {
     const isNull = (val, bool) => {
@@ -275,65 +275,80 @@ const Easy = (props, ref) => {
   }, [editId, pointId]);
 
   useEffect(() => {
-    if (data) {
-      setSubType(data.sub_type);
-      setDeferUnit(data?.defer_unit);
-      setStatus(data.defer_seconds > 0 ? 1 : 2);
-      setDateTime(data.defer_seconds);
-      setIsDisabled(false);
-      setAllEnable(data?.Details.all_enable);
-      setAlEnable(data?.Details.al_enable);
-      setAhEnable(data?.Details.ah_enable);
-      setAhhEnable(data?.Details.ahh_enable);
-      form.setFieldsValue({
-        threshold_high: data.threshold_high,
-        threshold_low: data.threshold_low,
-        point_name: data.point_name,
-        point_id: data.point_id,
-        name: data.name,
-        unit: data.unit,
-        alarm_level: data.alarm_level,
-        sub_type: data.sub_type,
-        group_id: data.group_id,
-        defer_unit: data.defer_unit ? data.defer_unit : undefined,
-        defer_seconds: data.defer_seconds,
-        ...(data.sub_type === 13
-          ? {
-              alarm_value: data?.Details.alarm_value,
-            }
-          : {
-              ahh_value:
-                data?.Details.ahh_value !== -9999
-                  ? data?.Details.ahh_value
-                  : null,
-              ahh_enable: data?.Details.ahh_enable,
-              ah_value:
-                data?.Details.ah_value !== -9999
-                  ? data?.Details.ah_value
-                  : null,
-              ah_enable: data?.Details.ah_enable,
-              al_value:
-                data?.Details.al_value !== -9999
-                  ? data?.Details.al_value
-                  : null,
-              al_enable: data?.Details.al_enable,
-              all_value:
-                data?.Details.all_value !== -9999
-                  ? data?.Details.all_value
-                  : null,
-              all_enable: data?.Details.all_enable,
-            }),
-      });
-    } else {
-      form.setFieldsValue({
-        alarm_level: 1,
-        sub_type: 14,
-        point_id: props.pointId ?? "",
-        point_name: props.pointId ?? "",
-      });
-      setSubType(14);
-    }
-  }, [data]);
+    const run = async () => {
+      if (data) {
+        setSubType(data.sub_type);
+        setDeferUnit(data?.defer_unit);
+        setStatus(data.defer_seconds > 0 ? 1 : 2);
+        setDateTime(data.defer_seconds);
+        setIsDisabled(false);
+        setAllEnable(data?.Details.all_enable);
+        setAlEnable(data?.Details.al_enable);
+        setAhEnable(data?.Details.ah_enable);
+        setAhhEnable(data?.Details.ahh_enable);
+        form.setFieldsValue({
+          threshold_high: data.threshold_high,
+          threshold_low: data.threshold_low,
+          point_name: data.point_name,
+          point_id: data.point_id,
+          name: data.name,
+          unit: data.unit,
+          alarm_level: data.alarm_level,
+          sub_type: data.sub_type,
+          group_id: data.group_id,
+          defer_unit: data.defer_unit ? data.defer_unit : undefined,
+          defer_seconds: data.defer_seconds,
+          ...(data.sub_type === 13
+            ? {
+                alarm_value: data?.Details.alarm_value,
+              }
+            : {
+                ahh_value:
+                  data?.Details.ahh_value !== -9999
+                    ? data?.Details.ahh_value
+                    : null,
+                ahh_enable: data?.Details.ahh_enable,
+                ah_value:
+                  data?.Details.ah_value !== -9999
+                    ? data?.Details.ah_value
+                    : null,
+                ah_enable: data?.Details.ah_enable,
+                al_value:
+                  data?.Details.al_value !== -9999
+                    ? data?.Details.al_value
+                    : null,
+                al_enable: data?.Details.al_enable,
+                all_value:
+                  data?.Details.all_value !== -9999
+                    ? data?.Details.all_value
+                    : null,
+                all_enable: data?.Details.all_enable,
+              }),
+        });
+      } else {
+        form.setFieldsValue({
+          alarm_level: 1,
+          sub_type: 14,
+          point_id: props.pointId ?? "",
+        });
+        setSubType(14);
+        if (props.pointId) {
+          const res = await API2.searchPoint({
+            key_word: props.pointId ?? "",
+            count: 50,
+            type: 1,
+            no_child: true,
+          });
+          form.setFieldsValue({
+            point_name: res?.data?.[0]?.name,
+            defer_unit: res?.data?.[0]?.defer_unit,
+          });
+          setDeferUnit(res?.data?.[0]?.defer_unit);
+        }
+      }
+    };
+    run();
+  }, [data, props.pointId]);
 
   const onChange = (e) => {
     // console.log(`selected ${e}`);
@@ -470,11 +485,11 @@ const Easy = (props, ref) => {
       <Form.Item
         label={TranslateText(["点位编号", "Point id"])}
         name="point_id"
-        style={{ display: alarmId === -1 ? "none" : "" }}
+        style={{ display: alarmId === -1 && !props.readonly ? "none" : "" }}
       >
         <Input
           placeholder={TranslateText(["请输入point_id", "Please input"])}
-          disabled={alarmId !== -1}
+          disabled={alarmId !== -1 || props.readonly}
           style={{ width: "240px" }}
         />
       </Form.Item>