package.json

@@ -1,6 +1,6 @@
 {
   "name": "dt-alarm-component",
-  "version": "1.1.33",
+  "version": "1.1.35",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

src/entry.jsx

@@ -15,10 +15,20 @@ import { getAntdToken } from "./utils/theme";
 import ThemeWrapper from "./utils/theme/ThemeWrapper";
 import { ConfigProvider, App } from "antd";
 import zhCN from "antd/es/locale/zh_CN";
+import enUS from "antd/es/locale/en_US";
 import "./utils/theme/customStyle.less";
 import "dayjs/locale/zh-cn";
 import dayjs from "dayjs";
-dayjs.locale("zh-cn");
+
+const resolveAntdLocale = () => {
+  const lang =
+    typeof localStorage !== "undefined"
+      ? localStorage.getItem("dtLanguage")
+      : "";
+  const isEnglish = lang === "en";
+  dayjs.locale(isEnglish ? "en" : "zh-cn");
+  return isEnglish ? enUS : zhCN;
+};
 
 const EasyConfig = forwardRef((props, ref) => {
   const { editId = -1, onConfirm, groupList, pointId, readonly, style } = props;
@@ -26,6 +36,7 @@ const EasyConfig = forwardRef((props, ref) => {
 
   const [themeName, setThemeName] = useState();
 
+  const antdLocale = resolveAntdLocale();
   const antdToken = useMemo(() => {
     if (themeName) {
       return getAntdToken(themeName);
@@ -42,7 +53,7 @@ const EasyConfig = forwardRef((props, ref) => {
     <ThemeWrapper setThemeName={setThemeName}>
       {themeName && (
         <ConfigProvider
-          locale={zhCN}
+          locale={antdLocale}
           theme={antdToken}
           autoInsertSpaceInButton={false}
         >
@@ -77,6 +88,7 @@ const ComplexConfig = forwardRef((props, ref) => {
 
   const [themeName, setThemeName] = useState();
 
+  const antdLocale = resolveAntdLocale();
   const antdToken = useMemo(() => {
     if (themeName) {
       return getAntdToken(themeName);
@@ -93,7 +105,7 @@ const ComplexConfig = forwardRef((props, ref) => {
     <ThemeWrapper setThemeName={setThemeName}>
       {themeName && (
         <ConfigProvider
-          locale={zhCN}
+          locale={antdLocale}
           theme={antdToken}
           autoInsertSpaceInButton={false}
         >
@@ -117,7 +129,7 @@ const ComplexConfig = forwardRef((props, ref) => {
 
 const DetailModal = (props) => {
   const [themeName, setThemeName] = useState();
-
+  const antdLocale = resolveAntdLocale();
   const antdToken = useMemo(() => {
     if (themeName) {
       return getAntdToken(themeName);
@@ -128,7 +140,7 @@ const DetailModal = (props) => {
     <ThemeWrapper setThemeName={setThemeName}>
       {themeName && (
         <ConfigProvider
-          locale={zhCN}
+          locale={antdLocale}
           theme={antdToken}
           autoInsertSpaceInButton={false}
         >
@@ -144,6 +156,7 @@ const DetailModal = (props) => {
 const TopoDetailModal = (props) => {
   const [themeName, setThemeName] = useState();
 
+  const antdLocale = resolveAntdLocale();
   const antdToken = useMemo(() => {
     if (themeName) {
       return getAntdToken(themeName);
@@ -154,7 +167,7 @@ const TopoDetailModal = (props) => {
     <ThemeWrapper setThemeName={setThemeName}>
       {themeName && (
         <ConfigProvider
-          locale={zhCN}
+          locale={antdLocale}
           theme={antdToken}
           autoInsertSpaceInButton={false}
         >

src/pages/Alarm/components/complex.jsx

@@ -37,6 +37,8 @@ const getPaginationTotalText = (total) => {
   return dtLanguage === "en" ? `${total} items` : `共${total}条`;
 };
 
+const SELECT_DROPDOWN_STYLE = { zIndex: 99999999 };
+
 const Complex = (props, ref) => {
   const { message } = App.useApp();
   const { editId, groupList = [], showList, formula } = props;
@@ -325,6 +327,7 @@ const Complex = (props, ref) => {
                     <Select
                       value={alarmId}
                       onChange={setAlarmId}
+                      dropdownStyle={SELECT_DROPDOWN_STYLE}
                       style={{ width: 320 }}
                       options={ruleOptions}
                       placeholder={TranslateText(["请选择规则", "Please choose rule"])}
@@ -362,6 +365,7 @@ const Complex = (props, ref) => {
                   name={"group_id"}
                 >
                   <Select
+                    dropdownStyle={SELECT_DROPDOWN_STYLE}
                     style={{ width: 200 }}
                     options={[
                       ...[
@@ -396,6 +400,7 @@ const Complex = (props, ref) => {
                 >
                   <Select
                     placeholder={TranslateText(["请选择", "Please choose"])}
+                    dropdownStyle={SELECT_DROPDOWN_STYLE}
                     style={{ width: "200px" }}
                   >
                     <Select.Option value={1}>

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

@@ -82,7 +82,7 @@ const Index = (props) => {
         preserve={false}
       >
         <Form.Item
-          label={TranslateText(["备注", "Remarks"])}
+          label={TranslateText(["备注", "Remark"])}
           name="remark"
           rules={[
             {

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

@@ -470,7 +470,7 @@ const Index = (props) => {
             {props.data?.data?.confirmed_oper_name}
           </Descriptions.Item>
           <Descriptions.Item
-            label={TranslateText(["确认时间", "Confirmed at"])}
+            label={TranslateText(["确认时间", "Occurred at"])}
           >
             {props.data?.data?.confirmed_time}
           </Descriptions.Item>

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

@@ -324,7 +324,7 @@ const Index = (props) => {
       width: 100,
     },
     {
-      title: TranslateText(["确认时间", "Confirmed At"]),
+      title: TranslateText(["确认时间", "Occurred At"]),
       dataIndex: "confirmed_time",
       width: 180,
       render: (text, record) =>

src/pages/Alarm/components/detail.jsx

@@ -34,7 +34,7 @@ function TranslateText(arr) {
 }
 
 const Detail = (props) => {
-  const { options, isDiagram } = props;
+  const { options, isDiagram, getPopupContainer } = props;
   const [tags, setTags] = useState([]);
   const [current, setCurrent] = useState("history");
   const [ruleId, setRuleId] = useState(undefined);
@@ -102,9 +102,10 @@ const Detail = (props) => {
   return (
     <>
       <Modal
-        title={TranslateText(["告警记录", "Alarm History"])}
+        title={TranslateText(["告警记录", "Alarm Record"])}
         centered
         open={props.open}
+        getContainer={getPopupContainer}
         width="90vw"
         onCancel={() => {
           props.onCancel();
@@ -137,7 +138,7 @@ const Detail = (props) => {
                   type="card"
                   items={[
                     {
-                      label: TranslateText(["告警记录", "Alarm History"]),
+                      label: TranslateText(["告警记录", "Alarm Record"]),
                       children: null,
                       key: "history",
                     },

src/pages/Alarm/components/easy.jsx

@@ -37,6 +37,8 @@ function TranslateText(arr) {
   return arr?.[0];
 }
 
+const SELECT_DROPDOWN_STYLE = { zIndex: 99999999 };
+
 const Easy = (props, ref) => {
   const { editId, groupList = [], pointId = null } = props;
   const [form] = Form.useForm();
@@ -501,6 +503,7 @@ const Easy = (props, ref) => {
             disabled={alarmId !== -1 || props.readonly}
             filterOption={false}
             dropdownMatchSelectWidth={400}
+            dropdownStyle={SELECT_DROPDOWN_STYLE}
             labelInValue={true}
             onChange={(e) => {
               onChange(e);
@@ -813,6 +816,7 @@ const Easy = (props, ref) => {
         >
           <Select
             placeholder={TranslateText(["请选择", "Please choose"])}
+            dropdownStyle={SELECT_DROPDOWN_STYLE}
             style={{ width: "200px" }}
           >
             <Select.Option value={1}>
@@ -848,6 +852,7 @@ const Easy = (props, ref) => {
 
         <Form.Item label={TranslateText(["告警组", "Group"])} name={"group_id"}>
           <Select
+            dropdownStyle={SELECT_DROPDOWN_STYLE}
             style={{ width: 200 }}
             options={[
               ...[