feat: 多语言处理

1. 告警多语言词条单独一个文件夹处理；
2. 告警中心支持多语言；
3. 告警日志-日志详情重构；
4. 告警配置：列数量根据屏幕大小调整，显示优化；
5. 告警配置： 新增/编辑兼容暗黑模式。

src/i18n/index.ts

@@ -2,7 +2,7 @@
  * @Author: vera_min vera_min@163.com
  * @Date: 2025-08-02 12:21:54
  * @LastEditors: vera_min vera_min@163.com
- * @LastEditTime: 2025-09-01 12:10:34
+ * @LastEditTime: 2025-09-02 09:38:08
  * @FilePath: /sagoo-admin-ui/src/i18n/index.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -57,6 +57,11 @@ import pagesCertificateZhcn from './pages/certificate/zh-cn';
 import pagesCertificateEn from './pages/certificate/en';
 import pagesCertificateZhtw from './pages/certificate/zh-tw';
 
+// 告警中心
+import pagesAlarmCenterZhcn from './pages/alarmCenter/zh-cn';
+import pagesAlarmCenterEn from './pages/alarmCenter/en';
+import pagesAlarmCenterZhtw from './pages/alarmCenter/zh-tw';
+
 
 // 定义语言国际化内容
 /**
@@ -79,6 +84,7 @@ const messages = {
 			dateCenter: pagesDateCenterZhcn,
 			dataAnalysis: pagesDataAnalysisZhcn,
 			certificate: pagesCertificateZhcn,
+			alarmCenter: pagesAlarmCenterZhcn,
 		}
 	},
 	[enLocale.name]: {
@@ -95,6 +101,7 @@ const messages = {
 			dateCenter: pagesDateCenterEn,
 			dataAnalysis: pagesDataAnalysisEn,
 			certificate: pagesCertificateEn,
+			alarmCenter: pagesAlarmCenterEn,
 		},	
 	},
 	[zhtwLocale.name]: {
@@ -111,6 +118,7 @@ const messages = {
 			dateCenter: pagesDateCenterZhtw,
 			dataAnalysis: pagesDataAnalysisZhtw,
 			certificate: pagesCertificateZhtw,
+			alarmCenter: pagesAlarmCenterZhtw,
 		},
 	},
 };

src/i18n/pages/alarmCenter/en.ts

@@ -0,0 +1,143 @@
+/*
+ * @Author: vera_min vera_min@163.com
+ * @Date: 2025-09-01 12:02:37
+ * @LastEditors: vera_min vera_min@163.com
+ * @LastEditTime: 2025-09-02 13:48:45
+ * @FilePath: /sagoo-admin-ui-pro2/src/i18n/pages/certificate/en.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+// 数据分析
+export default {
+  labels: {
+    createTime: "Created Time",
+    alarmStatus: "Alarm Status",
+    handleStatus: "Handle Status",
+    handleOpinion: "Handle Opinion",
+    ruleName: "Rule Name",
+    alarmType: "Alarm Type",
+    productName: "Product Name",
+    deviceName: "Device Name",
+    alarmLevel: "Alarm Level",
+    alarmTime: "Alarm Time",
+    alarmData: "Alarm Data",
+    trigger: "Trigger:",
+    level: "Level:",
+    name: "Name",
+    productKey: "Select Product",
+    deviceKey: "Select Device",
+    triggerType: "Trigger Type",
+    eventKey: "Select Event",
+    requestParams: "Trigger Conditions",
+    paramSetting: "Parameter Settings",
+    executeAction: "Execute Action",
+    messageNotification: "Message Notification"
+  },
+  columns: {
+    id: "ID",
+    alarmType: "Alarm Type",
+    alarmLevel: "Rule Level",
+    ruleName: "Rule Name",
+    productKey: "Product Key",
+    deviceKey: "Device Key",
+    alarmStatus: "Alarm Status",
+    alarmTime: "Alarm Time",
+    action: 'Action',
+  },
+  actions: {
+    detail: 'Detail',
+    handle: 'Handle',
+    search: 'Search',
+    reset: "Reset",
+    cancel: "Cancel",
+    confirm: "Confirm",
+    addAlarm: "Add Alarm",
+    enable: "Enable",
+    disable: "Disable",
+    edit: 'Edit',
+    delete: 'Delete',
+    addCondition: "Add Condition",
+    addGroup: "Add Group",
+    addExecution: "Add Execution",
+    add: "Add",
+  },
+  status: {
+    unprocessed: "Unprocessed",
+    processed: "Processed",
+    ignored: "Ignored",
+    enabled: "Running",
+    disabled: "Stopped"
+  },
+  options: {},
+  messages: {
+    tip: 'Tip',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    success: "Alert processed successfully",
+    deleteConfirm: "Are you sure you want to delete the selected data?",
+    selectDataFirst: "Please select the data to delete first.",
+    deleteConfirm1: "This operation will permanently delete alert: '{name}'. Do you want to continue?",
+    deleteSuccess: 'Deleted successfully',
+    opSuccess: 'Operation succeeded',
+    editSuccess: "Alert edited successfully",
+    addSuccess: "Alert added successfully",
+  },
+  placeholders: {
+    startDate: "Start Date",
+    endDate: "End Date",
+    alarmStatus: "Alarm Status",
+    pleaseInputContent: "Please input content",
+    rangeSeparator: "To",
+    pleaseInputName: "Please enter name",
+    pleaseSelectProduct: "Please select product",
+    pleaseSelectDevice: "Please select device",
+    pleaseSelectEventKey: "Please select event",
+    pleaseSelectRelation: "Select condition relation",
+    pleaseSelectRequestParam: "Please select parameter",
+    pleaseSelectOperator: "Select operator",
+    pleaseInputConditionValue: "Please enter condition value",
+    pleaseSelectNotificationWay: "Notification method",
+    pleaseSelectNotificationConfiguration: "Notification configuration",
+    pleaseSelectNotificationTemplate: "Notification template",
+    pleaseInputRecipientInformation: "enter recipient information"
+  },
+  validate: {
+    status: "Handle status cannot be empty",
+    name: "Alert name cannot be empty",
+    level: "Alert level cannot be empty",
+    productKey: "Please select a product",
+    deviceKey: "Please select a device",
+  },
+  dialogTitle: "Alarm Handling",
+  dialogTitleLogDetail: "Log Details",
+  ruleAlarm: "Rule Alarm",
+  deviceSelfAlarm: "Device Self Alarm",
+  ruleAlarmUpgrade: "Rule Alarm Upgrade",
+  deviceAlarm: "Device Alarm",
+  // 告警统计
+  dashboard: {
+    "告警总数": "Total Alarms",
+    "已关闭告警数": "Closed Alarms",
+    "未关闭告警数": "Open Alarms",
+    "平均处理时长MTTR": "Avg Time (MTTR)",
+    alarmLevelDistribution: "Alarm Level Distribution",
+    allAlarm: "All Alarms",
+    closedAlarm: "Closed",
+    unClosedAlarm: "Open",
+    alarmTrend: "Alarm Trends",
+    hour: "Hour",
+    day: "Day",
+    month: "Month",
+    alarmStatus: "Status",
+    deviceAlarmTop10: "Top 10 Device Alarms",
+    total: "Total",
+  },
+  // 告警配置
+  alarmConfig: {
+    editAlarm: "Edit Alert",
+    addAlarm: "Add Alert",
+    noRelation: "None",
+    andRelation: "AND",
+    orRelation: "OR",
+    all: "All",
+  }
+};

src/i18n/pages/alarmCenter/zh-cn.ts

@@ -0,0 +1,143 @@
+/*
+ * @Author: vera_min vera_min@163.com
+ * @Date: 2025-09-01 12:02:37
+ * @LastEditors: vera_min vera_min@163.com
+ * @LastEditTime: 2025-09-02 13:13:24
+ * @FilePath: /sagoo-admin-ui-pro2/src/i18n/pages/certificate/zh-cn.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+// 数据分析
+export default {
+  labels: {
+    createTime: "创建时间",
+    alarmStatus: "告警状态",
+    handleStatus: "处理状态",
+    handleOpinion: "处理意见",
+    ruleName: "规则名称",
+    alarmType: "告警类型",
+    productName: "产品名称",
+    deviceName: "设备名称",
+    alarmLevel: "告警级别",
+    alarmTime: "告警时间",
+    alarmData: "告警数据",
+    trigger: "触发：",
+    level: "级别：",
+    name: "名称",
+    productKey: "选择产品",
+    deviceKey: "选择设备",
+    triggerType: "触发方式",
+    eventKey: "选择事件",
+    requestParams: "触发条件",
+    paramSetting: "参数设置",
+    executeAction: "执行动作",
+    messageNotification: "消息通知",
+  },
+  columns: {
+    id: "ID",
+    alarmType: "告警类型",
+    alarmLevel: "规则级别",
+    ruleName: "规则名称",
+    productKey: "产品标识",
+    deviceKey: "设备标识",
+    alarmStatus: "告警状态",
+    alarmTime: "告警时间",
+    action: '操作',
+  },
+  actions: {
+    detail: '详情',
+    handle: '处理',
+    search: '查询',
+    reset: "重置",
+    cancel: "取消",
+    confirm: "确定",
+    addAlarm: "新增告警",
+    enable: "启用",
+    disable: "禁用",
+    edit: '编辑',
+    delete: '删除',
+    addCondition: "增加条件",
+    addGroup: "增加分组",
+    addExecution: "增加执行",
+    add: "新增",
+  },
+  status: {
+    unprocessed: "未处理",
+    processed: "已处理",
+    ignored: "已忽略",
+    enabled: "已启用",
+    disabled: "未启用"
+  },
+  options: {},
+  messages: {
+    tip: '提示',
+    confirm: '确认',
+    cancel: '取消',
+    success: "告警处理成功",
+    deleteConfirm: "你确定要删除所选数据？",
+    selectDataFirst: "请选择要删除的数据。",
+    deleteConfirm1: "此操作将永久删除告警：'{name}'，是否继续?",
+    deleteSuccess: '删除成功',
+    opSuccess: '操作成功',
+    editSuccess: "告警编辑成功",
+    addSuccess: "告警新增成功",
+  },
+  placeholders: {
+    startDate: "开始日期",
+    endDate: "结束日期",
+    alarmStatus: "告警状态",
+    pleaseInputContent: "请输入内容",
+    rangeSeparator: "至",
+    pleaseInputName: "请输入名称",
+    pleaseSelectProduct: "请选择产品",
+    pleaseSelectDevice: "请选择设备",
+    pleaseSelectEventKey: "请选择事件",
+    pleaseSelectRelation: "选择条件关系",
+    pleaseSelectRequestParam: "请选择参数",
+    pleaseSelectOperator: "选择操作符",
+    pleaseInputConditionValue: "请输入条件值",
+    pleaseSelectNotificationWay: "请选择通知方式",
+    pleaseSelectNotificationConfiguration: "请选择通知配置",
+    pleaseSelectNotificationTemplate: "请选择通知模板",
+    pleaseInputRecipientInformation: "请输入接收人信息"
+  },
+  validate: {
+    status: "处理状态不能为空",
+    name: "告警名称不能为空",
+    level: "告警级别不能为空",
+    productKey: "请选择产品",
+    deviceKey: "请选择设备",
+  },
+  dialogTitle: "告警处理",
+  dialogTitleLogDetail: "日志详情",
+  ruleAlarm: "规则告警",
+  deviceSelfAlarm: "设备自主告警",
+  ruleAlarmUpgrade: "规则告警升级",
+  deviceAlarm: "设备告警",
+  // 告警统计
+  dashboard: {
+    "告警总数": "告警总数",
+    "已关闭告警数": "已关闭告警数",
+    "未关闭告警数": "未关闭告警数",
+    "平均处理时长MTTR": "平均处理时长MTTR",
+    alarmLevelDistribution: "告警级别分布",
+    allAlarm: "全部告警",
+    closedAlarm: "已关闭告警",
+    unClosedAlarm: "未关闭告警",
+    alarmTrend: "告警趋势",
+    hour: "小时",
+    day: "天",
+    month: "月",
+    alarmStatus: "处理状态",
+    deviceAlarmTop10: "设备告警TOP10",
+    total: "总计",
+  },
+  // 告警配置
+  alarmConfig: {
+    editAlarm: "编辑告警",
+    addAlarm: "新增告警",
+    noRelation: "无",
+    andRelation: "并且",
+    orRelation: "或",
+    all: "全部",
+  }
+};

src/i18n/pages/alarmCenter/zh-tw.ts

@@ -0,0 +1,143 @@
+/*
+ * @Author: vera_min vera_min@163.com
+ * @Date: 2025-09-01 12:02:37
+ * @LastEditors: vera_min vera_min@163.com
+ * @LastEditTime: 2025-09-02 13:27:34
+ * @FilePath: /sagoo-admin-ui-pro2/src/i18n/pages/certificate/zh-cn.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+// 数据分析
+export default {
+  labels: {
+    createTime: "創建時間",
+    alarmStatus: "告警狀態",
+    handleStatus: "處理狀態",
+    handleOpinion: "處理意見",
+    ruleName: "規則名稱",
+    alarmType: "告警類型",
+    productName: "產品名稱",
+    deviceName: "設備名稱",
+    alarmLevel: "告警級別",
+    alarmTime: "告警時間",
+    alarmData: "告警數據",
+    trigger: "觸發：",
+    level: "級別：",
+    name: "名稱",
+    productKey: "選擇產品",
+    deviceKey: "選擇設備",
+    triggerType: "觸發方式",
+    eventKey: "選擇事件",
+    requestParams: "觸發條件",
+    paramSetting: "參數設置",
+    executeAction: "執行動作",
+    messageNotification: "消息通知"
+  },
+  columns: {
+    id: "ID",
+    alarmType: "告警類型",
+    alarmLevel: "規則級別",
+    ruleName: "規則名稱",
+    productKey: "產品標識",
+    deviceKey: "設備標識",
+    alarmStatus: "告警狀態",
+    alarmTime: "告警時間",
+    action: '操作',
+  },
+  actions: {
+    detail: '詳情',
+    handle: '處理',
+    search: '查詢',
+    reset: "重置",
+    cancel: "取消",
+    confirm: "確定",
+    addAlarm: "新增告警",
+    enable: "啟用",
+    disable: "禁用",
+    edit: '編輯',
+    delete: '刪除',
+    addCondition: "增加條件",
+    addGroup: "增加分組",
+    addExecution: "增加執行",
+    add: "新增",
+  },
+  status: {
+    unprocessed: "未處理",
+    processed: "已處理",
+    ignored: "已忽略",
+    enabled: "已啟用",
+    disabled: "未啟用"
+  },
+  options: {},
+  messages: {
+    tip: '提示',
+    confirm: '確認',
+    cancel: '取消',
+    success: "告警處理成功",
+    deleteConfirm: "你確定要刪除所選資料？",
+    selectDataFirst: "請選擇要刪除的資料。",
+    deleteConfirm1: "此操作將永久刪除告警：'{name}'，是否繼續?",
+    deleteSuccess: '刪除成功',
+    opSuccess: '操作成功',
+    editSuccess: "告警編輯成功",
+    addSuccess: "告警新增成功",
+  },
+  placeholders: {
+    startDate: "開始日期",
+    endDate: "結束日期",
+    alarmStatus: "告警狀態",
+    pleaseInputContent: "請輸入內容",
+    rangeSeparator: "至",
+    pleaseInputName: "請輸入名稱",
+    pleaseSelectProduct: "請選擇產品",
+    pleaseSelectDevice: "請選擇設備",
+    pleaseSelectEventKey: "請選擇事件",
+    pleaseSelectRelation: "選擇條件關係",
+    pleaseSelectRequestParam: "請選擇參數",
+    pleaseSelectOperator: "選擇操作符",
+    pleaseInputConditionValue: "請輸入條件值",
+    pleaseSelectNotificationWay: "請選擇通知方式",
+    pleaseSelectNotificationConfiguration: "請選擇通知配置",
+    pleaseSelectNotificationTemplate: "請選擇通知模板",
+    pleaseInputRecipientInformation: "請輸入接收人信息"
+  },
+  validate: {
+    status: "處理狀態不能為空",
+    name: "告警名稱不能為空",
+    level: "告警級別不能為空",
+    productKey: "請選擇產品",
+    deviceKey: "請選擇設備",
+  },
+  dialogTitle: "告警處理",
+  dialogTitleLogDetail: "日誌詳情",
+  ruleAlarm: "規則告警",
+  deviceSelfAlarm: "設備自主告警",
+  ruleAlarmUpgrade: "規則告警升級",
+  deviceAlarm: "設備告警",
+  // 告警統計
+  dashboard: {
+    "告警总数": "告警總數",
+    "已关闭告警数": "已關閉告警數",
+    "未关闭告警数": "未關閉告警數",
+    "平均处理时长MTTR": "平均處理時長MTTR",
+    alarmLevelDistribution: "告警級別分佈",
+    allAlarm: "全部告警",
+    closedAlarm: "已關閉告警",
+    unClosedAlarm: "未關閉告警",
+    alarmTrend: "告警趨勢",
+    hour: "小時",
+    day: "天",
+    month: "月",
+    alarmStatus: "處理狀態",
+    deviceAlarmTop10: "設備告警TOP10",
+    total: "總計",
+  },
+  // 告警配置
+  alarmConfig: {
+    editAlarm: "編輯告警",
+    addAlarm: "新增告警",
+    noRelation: "無",
+    andRelation: "並且",
+    orRelation: "或",
+    all: "全部",
+  }
+};

src/i18n/pages/iotmanagerI18n/en.ts

@@ -2,7 +2,7 @@
  * @Author: vera_min vera_min@163.com
  * @Date: 2025-08-05 12:42:31
  * @LastEditors: vera_min vera_min@163.com
- * @LastEditTime: 2025-09-01 13:11:01
+ * @LastEditTime: 2025-09-02 09:36:17
  * @FilePath: /sagoo-admin-ui/src/i18n/pages/iotmanagerI18n/en.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -318,28 +318,6 @@ export default {
 			tagType: "Please select data type"
 		}
 	},
-	alarm: {
-		tableI18nColumn: {
-			id: "ID",
-			alarmType: "Alarm Type",
-			alarmLevel: "Rule Level",
-			ruleName: "Rule Name",
-			productKey: "Product Key",
-			deviceKey: "Device Key",
-			alarmStatus: "Alarm Status",
-			alarmTime: "Alarm Time",
-		},
-		tableI18nAlarmType: {
-			ruleAlarm: "Rule Alarm",
-			deviceSelfAlarm: "Device Self Alarm",
-			ruleAlarmUpgrade: "Rule Alarm Upgrade"
-		},
-		tableI18nStatus: {
-			unprocessed: "Unprocessed",
-			processed: "Processed",
-			ignored: "Ignored"
-		}
-	},
 	// 级联管理
 	cascade: {
 		dialogI18n: {

src/i18n/pages/iotmanagerI18n/zh-cn.ts

@@ -2,7 +2,7 @@
  * @Author: vera_min vera_min@163.com
  * @Date: 2025-08-28 16:18:16
  * @LastEditors: vera_min vera_min@163.com
- * @LastEditTime: 2025-09-01 13:09:28
+ * @LastEditTime: 2025-09-02 09:35:49
  * @FilePath: /sagoo-admin-ui-dev/src/i18n/pages/iotmanagerI18n/zh-cn.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -318,28 +318,6 @@ export default {
 			tagType: "请选择数据类型"
 		}
 	},
-	alarm: {
-		tableI18nColumn: {
-			id: "ID",
-			alarmType: "告警类型",
-			alarmLevel: "规则级别",
-			ruleName: "规则名称",
-			productKey: "产品标识",
-			deviceKey: "设备标识",
-			alarmStatus: "告警状态",
-			alarmTime: "告警时间",
-		},
-		tableI18nAlarmType: {
-			ruleAlarm: "规则告警",
-			deviceSelfAlarm: "设备自主告警",
-			ruleAlarmUpgrade: "规侧告警升级"
-		},
-		tableI18nStatus: {
-			unprocessed: "未处理",
-			processed: "已处理",
-			ignored: "已忽略"
-		}
-	},
 	// 级联管理
 	cascade: {
 		dialogI18n: {

src/i18n/pages/iotmanagerI18n/zh-tw.ts

@@ -2,7 +2,7 @@
  * @Author: vera_min vera_min@163.com
  * @Date: 2025-08-05 12:42:31
  * @LastEditors: vera_min vera_min@163.com
- * @LastEditTime: 2025-09-01 13:11:46
+ * @LastEditTime: 2025-09-02 09:36:35
  * @FilePath: /sagoo-admin-ui/src/i18n/pages/iotmanager/zh-tw.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -318,28 +318,6 @@ export default {
 			tagType: "請選擇資料類型"
 		}
 	},
-	alarm: {
-		tableI18nColumn: {
-			id: "ID",
-			alarmType: "告警類型",
-			alarmLevel: "規則級別",
-			ruleName: "規則名稱",
-			productKey: "產品標識",
-			deviceKey: "設備標識",
-			alarmStatus: "告警狀態",
-			alarmTime: "告警時間",
-		},
-		tableI18nAlarmType: {
-			ruleAlarm: "規則告警",
-			deviceSelfAlarm: "設備自主告警",
-			ruleAlarmUpgrade: "規側告警升級"
-		},
-		tableI18nStatus: {
-			unprocessed: "未處理",
-			processed: "已處理",
-			ignored: "已忽略"
-		}
-	},
 	// 级联管理
 	cascade: {
 		dialogI18n: {

src/i18n/pages/tableI18n/en.ts

@@ -2,7 +2,7 @@
  * @Author: vera_min vera_min@163.com
  * @Date: 2025-08-06 01:16:57
  * @LastEditors: vera_min vera_min@163.com
- * @LastEditTime: 2025-09-01 13:05:35
+ * @LastEditTime: 2025-09-02 12:08:23
  * @FilePath: /sagoo-admin-ui/src/i18n/pages/tableI18n/en.ts
  * @Description: 表格国际化 - 英文
  */
@@ -13,7 +13,7 @@ export default {
 		index: "Index",
 		operation: "Operation",
 		des: "Description",
-		createdAt: "Create Time",
+		createdAt: "Created Time",
 		updatedAt: "Update Time",
 		name: "Name",
 		type: "Type",

src/views/iot/alarm/dashboard/index.vue

@@ -7,7 +7,7 @@
 						<img :src="'/imgs/' + v.icoimg" class="icoimg" />
 						<div class="card-right">
 							<span class="font30">{{ v.allnum }}</span>
-							<div class="label">{{ v.num3 }}</div>
+							<div class="label">{{ $t('message.alarmCenter.dashboard.'+v.num3) }}</div>
 						</div>
 					</div>
 				</div>
@@ -16,22 +16,30 @@
 		<div class="chart-wrapper">
 			<div class="chart-item" style="flex: 1">
 				<div class="chart-title flex-row">
-					告警级别分布
+					<!-- 告警级别分布 -->
+					{{$t('message.alarmCenter.dashboard.alarmLevelDistribution')}}
 					<el-radio-group v-model="searchType" size="small" @change="onSearchTypeChange">
-						<el-radio-button label="">全部告警</el-radio-button>
-						<el-radio-button label="1">已关闭告警</el-radio-button>
-						<el-radio-button label="2">未关闭告警</el-radio-button>
+						<!-- 全部告警 -->
+						<el-radio-button label="">{{$t('message.alarmCenter.dashboard.allAlarm')}}</el-radio-button>
+						<!-- 已关闭告警 -->
+						<el-radio-button label="1">{{$t('message.alarmCenter.dashboard.closedAlarm')}}</el-radio-button>
+						<!-- 未关闭告警 -->
+						<el-radio-button label="2">{{$t('message.alarmCenter.dashboard.unClosedAlarm')}}</el-radio-button>
 					</el-radio-group>
 				</div>
 				<Chart :height="chartHeight" ref="chart1"></Chart>
 			</div>
 			<div class="chart-item" style="flex: 1.5">
 				<div class="chart-title flex-row">
-					告警趋势
+					<!-- 告警趋势 -->
+					{{$t('message.alarmCenter.dashboard.alarmTrend')}}
 					<el-radio-group v-model="intervalType" size="small" @change="onIntervalTypeChange">
-						<el-radio-button label="1">小时</el-radio-button>
-						<el-radio-button label="2">天</el-radio-button>
-						<el-radio-button label="3">月</el-radio-button>
+						<!-- 小时 -->
+						<el-radio-button label="1">{{$t('message.alarmCenter.dashboard.hour')}}</el-radio-button>
+						<!-- 天 -->
+						<el-radio-button label="2">{{$t('message.alarmCenter.dashboard.day')}}</el-radio-button>
+						<!-- 月 -->
+						<el-radio-button label="3">{{$t('message.alarmCenter.dashboard.month')}}</el-radio-button>
 					</el-radio-group>
 				</div>
 				<Chart :height="chartHeight" ref="chart2"></Chart>
@@ -40,13 +48,15 @@
 		<div class="chart-wrapper">
 			<div class="chart-item mb-0" style="flex: 1; margin-bottom: 0">
 				<div class="chart-title flex-row">
-					处理状态
+					<!-- 处理状态 -->
+					{{$t('message.alarmCenter.dashboard.alarmStatus')}}
+					<!-- 至/开始日期/结束日期 -->
 					<el-date-picker
 						v-model="statusDateRange"
 						type="daterange"
-						range-separator="至"
-						start-placeholder="开始日期"
-						end-placeholder="结束日期"
+						:range-separator="$t('message.alarmCenter.placeholders.rangeSeparator')"
+						:start-placeholder="$t('message.alarmCenter.placeholders.startDate')"
+						:end-placeholder="$t('message.alarmCenter.placeholders.endDate')"
 						:disabled-date="disabledDate"
 						format="YYYY-MM-DD"
 						value-format="YYYY-MM-DD"
@@ -58,7 +68,8 @@
 				<Chart :height="chartHeight" ref="chart3"></Chart>
 			</div>
 			<div class="chart-item" style="flex: 1.5; margin-bottom: 0">
-				<div class="chart-title">设备告警TOP10</div>
+				<!-- 设备告警TOP10 -->
+				<div class="chart-title">{{ $t('message.alarmCenter.dashboard.deviceAlarmTop10') }}</div>
 				<Chart :height="chartHeight" ref="chart4"></Chart>
 			</div>
 		</div>
@@ -72,6 +83,9 @@ import Chart from '/@/components/chart/index.vue'
 import { getBarRowOption, getLineOption, getPieOption } from '/@/components/chart/options'
 import dayjs from 'dayjs'
 import { useThemeChangeFunc } from '/@/hooks/useCommon'
+import { useI18n } from 'vue-i18n'
+
+const { t, locale } = useI18n()
 
 const chartHeight = 'calc(50vh - 168px)'
 
@@ -100,6 +114,7 @@ const alarmTypeMap: any = {}
 watch(
 	() => alarm_type.value,
 	(list) => {
+		console.log(list)
 		if (!list.length) return
 		list.forEach((item: any) => {
 			alarmTypeMap[item.value] = item.label
@@ -111,10 +126,11 @@ watch(
 	}
 )
 
-const homeOne = reactive([
+const homeOne = ref([
 	{
 		allnum: 0,
-		num3: '告警总数',
+		// 告警总数
+		num3:  "告警总数",
 		icoimg: 'dashboard-icon4.svg',
 	},
 	{
@@ -138,8 +154,10 @@ const onIntervalTypeChange = () => {
 	// 告警趋势 intervalType 统计间隔：1小时 2天 3月
 	api.dashboard.getAnalyzeTrend({ intervalType: intervalType.value }).then((res: any) => {
 		const resData = Object.values(res || []) as any[]
+		console.log('alarmTypeMap:', alarmTypeMap)
 		const legend = Object.keys(res || []).map((item) => alarmTypeMap[item])
-		// console.log(resData)
+		console.log(resData)
+		console.log(legend)
 		chart2.value?.draw(
 			getLineOption({
 				legend,
@@ -160,6 +178,7 @@ const onSearchTypeChange = () => {
 		})
 		.then((res: any) => {
 			const resData = res || []
+			console.log(resData)
 			const total = resData.reduce((a: any, b: any) => a + b.alarmCount, 0)
 			chart1.value?.draw(
 				getPieOption({
@@ -171,6 +190,8 @@ const onSearchTypeChange = () => {
 						left: '55%',
 					},
 					total,
+					// 告警总数
+					centerText: t('message.alarmCenter.dashboard.告警总数'),
 					data: resData.map((item: any) => {
 						if (total === 0) {
 							return {
@@ -201,9 +222,12 @@ const getAlarmStatusData = () => {
 		})
 		.then((res: any) => {
 			const statusMap = {
-				0: '未处理',
-				1: '已处理',
-				2: '已忽略',
+				// 未处理
+				0: t('message.alarmCenter.status.unprocessed'),
+				// 已处理
+				1: t('message.alarmCenter.status.processed'),
+				// 已忽略
+				2: t('message.alarmCenter.status.ignored'),
 			}
 
 			const resData = res || []
@@ -219,7 +243,8 @@ const getAlarmStatusData = () => {
 						left: '55%',
 					},
 					color: ['#23c6c8', '#ed5565', '#ffce37'],
-					centerText: '总计',
+					// 总计
+					centerText: t('message.alarmCenter.dashboard.total'),
 					data: resData.map((item: any) => {
 						const name = statusMap[item.status as keyof typeof statusMap]
 						if (total == 0) {
@@ -235,10 +260,10 @@ const getAlarmStatusData = () => {
 const getOverviewData = () => {
 	// 顶部统计数据
 	api.dashboard.getTotalAlarmStatistics().then((res: any) => {
-		homeOne[0].allnum = res.alarmTotalCount
-		homeOne[1].allnum = res.closeAlarmCount
-		homeOne[2].allnum = res.unCloseAlarmCount
-		homeOne[3].allnum = res.averageDealTime
+		homeOne.value[0].allnum = res.alarmTotalCount
+		homeOne.value[1].allnum = res.closeAlarmCount
+		homeOne.value[2].allnum = res.unCloseAlarmCount
+		homeOne.value[3].allnum = res.averageDealTime
 	})
 	onSearchTypeChange()
 	onIntervalTypeChange()
@@ -257,6 +282,14 @@ const getOverviewData = () => {
 }
 
 useThemeChangeFunc(getOverviewData)
+
+// 监听语言变化，重新生成图表数据
+watch(locale, () => {
+	// 重新获取所有图表数据以更新国际化文本
+	setTimeout(() => {
+		getOverviewData()
+	}, 100) // 延迟确保翻译已更新
+})
 </script>
 
 <style scoped lang="scss">

src/views/iot/alarm/list/index.vue

@@ -10,44 +10,44 @@
 					<el-table :data="tableData.data" style="width: 100%" v-loading="loading">
 						<el-table-column label="ID" align="center" prop="id" width="100" v-col="'ID'" />
 						<!-- 告警类型 -->
-						<el-table-column :label="$t('message.alarm.tableI18nColumn.alarmType')" width="120" prop="type" align="center" show-overflow-tooltip v-col="'type'">
+						<el-table-column :label="$t('message.alarmCenter.columns.alarmType')" width="120" prop="type" align="center" show-overflow-tooltip v-col="'type'">
 							<template #default="scope">
 								<!-- 规则告警 -->
-								<span v-if="scope.row.type == 1">{{ $t('message.alarm.tableI18nAlarmType.ruleAlarm') }}</span>
+								<span v-if="scope.row.type == 1">{{ $t('message.alarmCenter.ruleAlarm') }}</span>
 								<!-- 设备自主告警 -->
-								<span v-else-if="scope.row.type == 2">{{ $t('message.alarm.tableI18nAlarmType.deviceSelfAlarm') }}</span>
+								<span v-else-if="scope.row.type == 2">{{ $t('message.alarmCenter.deviceSelfAlarm') }}</span>
 								<!--  规则侧告警升级 -->
-								<span v-else-if="scope.row.type == 3">{{ $t('message.alarm.tableI18nAlarmType.ruleAlarmUpgrade') }}</span>
+								<span v-else-if="scope.row.type == 3">{{ $t('message.alarmCenter.ruleAlarmUpgrade') }}</span>
 								<!-- 设备自主告警 -->
-								<span v-else>{{ $t('message.alarm.tableI18nAlarmType.deviceSelfAlarm') }}</span>
+								<span v-else>{{ $t('message.alarmCenter.deviceSelfAlarm') }}</span>
 							</template>
 						</el-table-column>
 						<!-- 规则级别 -->
-						<el-table-column :label="$t('message.alarm.tableI18nColumn.alarmLevel')" width="120" align="center" prop="alarmLevel.name" show-overflow-tooltip v-col="'alarmLevel'" />
+						<el-table-column :label="$t('message.alarmCenter.columns.alarmLevel')" width="120" align="center" prop="alarmLevel.name" show-overflow-tooltip v-col="'alarmLevel'" />
 						<!-- 规则名称 -->
-						<el-table-column :label="$t('message.alarm.tableI18nColumn.ruleName')" prop="ruleName" show-overflow-tooltip v-col="'ruleName'" />
+						<el-table-column :label="$t('message.alarmCenter.columns.ruleName')" prop="ruleName" show-overflow-tooltip v-col="'ruleName'" />
 						<!-- 产品标识 -->
-						<el-table-column :label="$t('message.alarm.tableI18nColumn.productKey')" prop="productKey" show-overflow-tooltip v-col="'productKey'" />
+						<el-table-column :label="$t('message.alarmCenter.columns.productKey')" prop="productKey" show-overflow-tooltip v-col="'productKey'" />
 						<!-- 设备标识 -->
-						<el-table-column :label="$t('message.alarm.tableI18nColumn.deviceKey')" prop="deviceKey" show-overflow-tooltip v-col="'deviceKey'" />
+						<el-table-column :label="$t('message.alarmCenter.columns.deviceKey')" prop="deviceKey" show-overflow-tooltip v-col="'deviceKey'" />
 						<!-- 告警状态 -->
-						<el-table-column prop="status" :label="$t('message.alarm.tableI18nColumn.alarmStatus')" width="120" align="center" v-col="'status'">
+						<el-table-column prop="status" :label="$t('message.alarmCenter.columns.alarmStatus')" width="120" align="center" v-col="'status'">
 							<template #default="scope">
-								<el-tag type="success" size="small" v-if="scope.row.status">{{ $t('message.alarm.tableI18nStatus.processed') }}</el-tag>
-								<el-tag type="info" size="small" v-else>{{ $t('message.alarm.tableI18nStatus.unprocessed') }}</el-tag>
+								<!-- 已处理 -->
+								<el-tag type="success" size="small" v-if="scope.row.status">{{ $t('message.alarmCenter.status.processed') }}</el-tag>
+								<!-- 未处理 -->
+								<el-tag type="info" size="small" v-else>{{ $t('message.alarmCenter.status.unprocessed') }}</el-tag>
 							</template>
 						</el-table-column>
 						<!-- 告警时间 -->
-						<el-table-column prop="createdAt" :label="$t('message.alarm.tableI18nColumn.alarmTime')" align="center" width="170" v-col="'createdAt'"></el-table-column>
+						<el-table-column prop="createdAt" :label="$t('message.alarmCenter.columns.alarmTime')" align="center" width="170" v-col="'createdAt'"></el-table-column>
 						<!-- 操作 -->
-						<el-table-column :label="$t('message.tableI18nColumn.operation')" width="130" align="center" fixed="right" v-col="'handle'">
+						<el-table-column :label="$t('message.alarmCenter.columns.action')" width="130" align="center" fixed="right" v-col="'handle'">
 							<template #default="scope">
 								<!-- 详情 -->
-								<el-button v-auth="'detail'" size="small" text type="primary" @click="onOpenDetailDic(scope.row)">{{ $t('message.tableI18nAction.detail') }}</el-button>
+								<el-button v-auth="'detail'" size="small" text type="primary" @click="onOpenDetailDic(scope.row)">{{ $t('message.alarmCenter.actions.detail') }}</el-button>
 								<!-- 处理 -->
-								<el-button v-auth="'edit'" size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-if="scope.row.status == 0"
-									>{{ $t('message.tableI18nAction.handle') }}</el-button
-								>
+								<el-button v-auth="'edit'" size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-if="scope.row.status == 0">{{ $t('message.alarmCenter.actions.handle') }}</el-button>
 							</template>
 						</el-table-column>
 					</el-table>

src/views/iot/alarm/log/component/detail.vue

@@ -1,41 +1,43 @@
 <template>
   <div class="system-edit-dic-container">
-    <el-dialog title="日志详情" v-model="isShowDialog" width="700">
-      <el-form label-width="90px" label-position="left">
-        <el-form-item label="规则名称">
-          {{ ruleForm.ruleName }}
-        </el-form-item>
-        <el-form-item label="告警类型">
-          <span v-if="ruleForm.type == 1">规则告警</span>
-          <span v-else-if="ruleForm.type == 2">设备自主告警</span>
-          <span v-else-if="ruleForm.type == 3">规则告警升级</span>
-          <span v-else>设备告警</span>
-        </el-form-item>
-        <el-form-item label="产品名称">
-          {{ product_name }}
-        </el-form-item>
-        <el-form-item label="设备名称">
-          {{ devcie_name }}
-        </el-form-item>
-
-        <el-form-item label="告警级别">
-          {{ alarmLevel_name }}
-        </el-form-item>
-
-        <el-form-item label="告警时间">
-          {{ ruleForm.createdAt }}
-        </el-form-item>
-        <el-form-item label="告警数据">
-          <JsonViewer style="width:100%;" :value="jsonData" boxed sort theme="jv-dark" />
-        </el-form-item>
-
-        <el-form-item label="处理意见">
-          {{ ruleForm.content }}
-        </el-form-item>
-      </el-form>
+    <!-- 日志详情 -->
+    <el-dialog :title="$t('message.alarmCenter.dialogTitleLogDetail')" v-model="isShowDialog" width="700">
+        <el-descriptions
+          :column="2"
+          border
+        >
+          <!-- 规则名称 -->
+          <el-descriptions-item :label="$t('message.alarmCenter.labels.ruleName')">{{ ruleForm.ruleName }}</el-descriptions-item>
+          <!-- 告警类型 -->
+          <el-descriptions-item :label="$t('message.alarmCenter.labels.alarmType')">
+            <!-- 规则告警 -->
+            <span v-if="ruleForm.type == 1">{{$t('message.alarmCenter.ruleAlarm')}}</span>
+            <!-- 设备自主告警 -->
+            <span v-else-if="ruleForm.type == 2">{{$t('message.alarmCenter.deviceSelfAlarm')}}</span>
+            <!-- 规则告警升级 -->
+            <span v-else-if="ruleForm.type == 3">{{$t('message.alarmCenter.ruleAlarmUpgrade')}}</span>
+            <!-- 设备告警 -->
+            <span v-else>{{$t('message.alarmCenter.deviceAlarm')}}</span>
+          </el-descriptions-item>
+          <!-- 产品名称 -->
+          <el-descriptions-item :label="$t('message.alarmCenter.labels.productName')">{{ product_name }}</el-descriptions-item>
+          <!-- 设备名称 -->
+          <el-descriptions-item :label="$t('message.alarmCenter.labels.deviceName')">{{ devcie_name }}</el-descriptions-item>
+          <!-- 告警级别 -->
+          <el-descriptions-item :label="$t('message.alarmCenter.labels.alarmLevel')">{{ alarmLevel_name }}</el-descriptions-item>
+          <!-- 告警时间 -->
+          <el-descriptions-item :label="$t('message.alarmCenter.labels.alarmTime')">{{ ruleForm.createdAt }}</el-descriptions-item>
+          <!-- 告警数据 -->
+          <el-descriptions-item :label="$t('message.alarmCenter.labels.alarmData')" span="2">
+            <JsonViewer style="width:100%;" :value="jsonData" boxed sort theme="jv-dark" />
+          </el-descriptions-item>
+          <!-- 处理意见 -->
+          <el-descriptions-item :label="$t('message.alarmCenter.labels.handleOpinion')" span="2">{{ ruleForm.content }}</el-descriptions-item>
+        </el-descriptions>
       <template #footer>
         <span class="dialog-footer">
-          <el-button @click="onCancel">取 消</el-button>
+          <!-- 取消 -->
+          <el-button @click="onCancel">{{ $t('message.alarmCenter.actions.cancel') }}</el-button>
         </span>
       </template>
     </el-dialog>
@@ -43,9 +45,10 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent, ref } from 'vue';
+import { reactive, toRefs, defineComponent, computed } from 'vue';
 import api from '/@/api/alarm';
 import 'vue3-json-viewer/dist/index.css';
+import { useI18n } from 'vue-i18n';
 
 interface DicState {
   isShowDialog: boolean;
@@ -60,6 +63,8 @@ export default defineComponent({
   name: 'Edit',
 
   setup() {
+    const { locale, t } = useI18n();
+    const currentLocale = computed(() => locale.value);
     const state = reactive<DicState>({
       isShowDialog: false,
       product_name: '',
@@ -96,6 +101,7 @@ export default defineComponent({
     };
 
     return {
+      currentLocale,
       openDialog,
       closeDialog,
       onCancel,

src/views/iot/alarm/log/component/edit.vue

@@ -1,21 +1,29 @@
 <template>
 	<div class="system-edit-dic-container">
-		<el-dialog title="告警处理" v-model="isShowDialog" width="769px">
+		<!-- 告警处理 -->
+		<el-dialog :title="$t('message.alarmCenter.dialogTitle')" v-model="isShowDialog" width="769px">
 			<el-form :model="ruleForm" ref="formRef" :rules="rules" label-width="110px">
-				<el-form-item label="处理状态" prop="status">
+				<!-- 处理状态 -->
+				<el-form-item :label="$t('message.alarmCenter.labels.handleStatus')" prop="status">
 					<el-radio-group v-model="ruleForm.status">
-						<el-radio :label="1">已处理</el-radio>
-						<el-radio :label="2">忽略</el-radio>
+						<!-- 已处理 -->
+						<el-radio :label="1">{{ $t('message.alarmCenter.status.processed') }}</el-radio>
+						<!-- 已忽略 -->
+						<el-radio :label="2">{{ $t('message.alarmCenter.status.ignored') }}</el-radio>
 					</el-radio-group>
 				</el-form-item>
-				<el-form-item label="处理意见" prop="content">
-					<el-input v-model="ruleForm.content" type="textarea" placeholder="请输入内容"></el-input>
+				<!-- 处理意见 -->
+				<el-form-item :label="$t('message.alarmCenter.labels.handleOpinion')" prop="content">
+					<!-- 请输入内容 -->
+					<el-input v-model="ruleForm.content" type="textarea" :placeholder="$t('message.alarmCenter.placeholders.pleaseInputContent')"></el-input>
 				</el-form-item>
 			</el-form>
 			<template #footer>
 				<span class="dialog-footer">
-					<el-button @click="onCancel">取 消</el-button>
-					<el-button type="primary" @click="onSubmit">确定</el-button>
+					<!-- 取 消 -->
+					<el-button @click="onCancel">{{ $t('message.alarmCenter.actions.cancel') }}</el-button>
+					<!-- 确 定 -->
+					<el-button type="primary" @click="onSubmit">{{ $t('message.alarmCenter.actions.confirm') }}</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -23,9 +31,10 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
+import { reactive, toRefs, defineComponent, ref, unref, computed } from 'vue';
 import api from '/@/api/alarm';
 import { ElMessage } from 'element-plus';
+import { useI18n } from 'vue-i18n';
 
 
 interface RuleFormState {
@@ -36,23 +45,25 @@ interface RuleFormState {
 interface DicState {
 	isShowDialog: boolean;
 	ruleForm: RuleFormState;
-	rules: {};
+	// rules: {};
 }
 
 export default defineComponent({
 	name: 'Edit',
 
 	setup(prop, { emit }) {
+		const { t } = useI18n();
 		const formRef = ref<HTMLElement | null>(null);
+		const rules = computed(() => ({
+			// 处理状态不能为空
+				status: [{ required: true, message: t('message.alarmCenter.validate.status'), trigger: 'blur' }],
+		}))
 		const state = reactive<DicState>({
 			isShowDialog: false,
 			ruleForm: {
 				status: 1,
 				content: '',
-			},
-			rules: {
-				status: [{ required: true, message: '处理状态不能为空', trigger: 'blur' }],
-			},
+			}
 		});
 
 		// 打开弹窗
@@ -77,7 +88,8 @@ export default defineComponent({
 			formWrap.validate((valid: boolean) => {
 				if (valid) {
 					api.log.handle(state.ruleForm).then(() => {
-						ElMessage.success('告警处理成功');
+						// 告警处理成功
+						ElMessage.success(t('message.alarmCenter.messages.success'));
 						closeDialog(); // 关闭弹窗
 						emit('dataList');
 					});
@@ -95,6 +107,7 @@ export default defineComponent({
 		};
 
 		return {
+			rules,
 			openDialog,
 			closeDialog,
 			onCancel,

src/views/iot/alarm/log/index.vue

@@ -3,14 +3,18 @@
 		<el-card shadow="never">
 			<el-form :model="tableData.param" ref="queryRef" inline label-width="68px">
 				<!-- 创建时间 -->
-				<el-form-item :label="$t('message.formI18nLabel.createdTime')" prop="dateRange" :label-width="labelWidth">
-					<el-date-picker v-model="tableData.param.dateRange" style="width: 240px" value-format="YYYY-MM-DD" type="daterange" range-separator="-" :start-placeholder="$t('message.formI18nPlaceholder.startDate')" :end-placeholder="$t('message.formI18nPlaceholder.endDate')"></el-date-picker>
+				<el-form-item :label="$t('message.alarmCenter.labels.createTime')" prop="dateRange" :label-width="labelWidth">
+					<!-- 开始日期/结束日期 -->
+					<el-date-picker v-model="tableData.param.dateRange" style="width: 240px" value-format="YYYY-MM-DD" type="daterange" range-separator="-" :start-placeholder="$t('message.alarmCenter.placeholders.startDate')" :end-placeholder="$t('message.alarmCenter.placeholders.endDate')"></el-date-picker>
 				</el-form-item>
 				<!-- 告警状态 -->
-				<el-form-item :label="$t('message.formI18nLabel.alarmStatus')" prop="status"  :label-width="labelWidth">
-					<el-select v-model="tableData.param.status" :placeholder="$t('message.formI18nPlaceholder.alarmStatus')" clearable style="width: 180px">
-						<el-option :label="$t('message.formI18nOption.unprocessed')" :value="0" />
-						<el-option :label="$t('message.formI18nOption.ignored')" :value="2" />
+				<el-form-item :label="$t('message.alarmCenter.labels.alarmStatus')" prop="status"  :label-width="labelWidth">
+					<!-- 告警状态 -->
+					<el-select v-model="tableData.param.status" :placeholder="$t('message.alarmCenter.placeholders.alarmStatus')" clearable style="width: 180px">
+						<!-- 未处理 -->
+						<el-option :label="$t('message.alarmCenter.status.unprocessed')" :value="0" />
+						<!-- 已忽略 -->
+						<el-option :label="$t('message.alarmCenter.status.ignored')" :value="2" />
 					</el-select>
 				</el-form-item>
 				<el-form-item>
@@ -19,58 +23,59 @@
 						<el-icon>
 							<ele-Search />
 						</el-icon>
-						{{ $t('message.formI18nButton.query') }}
+						{{ $t('message.alarmCenter.actions.search') }}
 					</el-button>
 					<!-- 重置 -->
 					<el-button @click="resetQuery(queryRef)">
 						<el-icon>
 							<ele-Refresh />
 						</el-icon>
-						{{ $t('message.formI18nButton.reset') }}
+						{{ $t('message.alarmCenter.actions.reset') }}
 					</el-button>
 				</el-form-item>
 			</el-form>
 			<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading" max-height="calc(100vh  - 255px)">
-				<el-table-column label="ID" align="center" prop="id" width="100" v-col="'ID'" />
+				<!-- ID -->
+				<el-table-column :label="$t('message.alarmCenter.columns.id')" align="center" prop="id" width="100" v-col="'ID'" />
 				<!-- 告警类型 -->
-				<el-table-column :label="$t('message.alarm.tableI18nColumn.alarmType')" prop="type" width="120" show-overflow-tooltip v-col="'type'">
+				<el-table-column :label="$t('message.alarmCenter.columns.alarmType')" prop="type" width="120" show-overflow-tooltip v-col="'type'">
 					<template #default="scope">
 						<!-- 规则告警 -->
-						<span v-if="scope.row.type == 1">{{ $t('message.alarm.tableI18nAlarmType.ruleAlarm') }}</span>
+						<span v-if="scope.row.type == 1">{{ $t('message.alarmCenter.ruleAlarm') }}</span>
             <!-- 设备自主告警 -->
-						<span v-else-if="scope.row.type == 2">{{ $t('message.alarm.tableI18nAlarmType.deviceSelfAlarm') }}</span>
+						<span v-else-if="scope.row.type == 2">{{ $t('message.alarmCenter.deviceSelfAlarm') }}</span>
             <!--  规则侧告警升级 -->
-						<span v-else-if="scope.row.type == 3">{{ $t('message.alarm.tableI18nAlarmType.ruleAlarmUpgrade') }}</span>
+						<span v-else-if="scope.row.type == 3">{{ $t('message.alarmCenter.ruleAlarmUpgrade') }}</span>
             <!-- 设备自主告警 -->
-						<span v-else>{{ $t('message.alarm.tableI18nAlarmType.deviceSelfAlarm') }}</span>
+						<span v-else>{{ $t('message.alarmCenter.deviceSelfAlarm') }}</span>
 					</template>
 				</el-table-column>
 				<!-- 规则级别 -->
-				<el-table-column :label="$t('message.alarm.tableI18nColumn.alarmLevel')" prop="alarmLevel.name" width="100" align="center" show-overflow-tooltip v-col="'alarmLevel'"></el-table-column>
+				<el-table-column :label="$t('message.alarmCenter.columns.alarmLevel')" prop="alarmLevel.name" :min-width="currentLocale === 'en' ? '120' : '100'" align="center" show-overflow-tooltip v-col="'alarmLevel'"></el-table-column>
 				<!-- 规则名称 -->
-				<el-table-column :label="$t('message.alarm.tableI18nColumn.ruleName')" prop="ruleName" show-overflow-tooltip v-col="'ruleName'" />
+				<el-table-column :label="$t('message.alarmCenter.columns.ruleName')" prop="ruleName" :min-width="currentLocale === 'en' ? '120' : '100'" show-overflow-tooltip v-col="'ruleName'" />
 				<!-- 产品标识 -->
-				<el-table-column :label="$t('message.alarm.tableI18nColumn.productKey')" prop="productKey" show-overflow-tooltip v-col="'productKey'" />
+				<el-table-column :label="$t('message.alarmCenter.columns.productKey')" prop="productKey" :min-width="currentLocale === 'en' ? '120' : '100'" show-overflow-tooltip v-col="'productKey'" />
 				<!-- 设备标识 -->
-				<el-table-column :label="$t('message.alarm.tableI18nColumn.deviceKey')" prop="deviceKey" show-overflow-tooltip v-col="'deviceKey'" />
+				<el-table-column :label="$t('message.alarmCenter.columns.deviceKey')" prop="deviceKey" :min-width="currentLocale === 'en' ? '120' : '100'" show-overflow-tooltip v-col="'deviceKey'" />
 
 				<!-- 告警状态 -->
-				<el-table-column prop="status" :label="$t('message.alarm.tableI18nColumn.alarmStatus')" width="120" align="center" v-col="'status'">
+				<el-table-column prop="status" :label="$t('message.alarmCenter.columns.alarmStatus')" :min-width="currentLocale === 'en' ? '120' : '100'" align="center" v-col="'status'">
 					<template #default="scope">
-						<el-tag type="danger" size="small" v-if="scope.row.status == 0">{{ $t('message.alarm.tableI18nStatus.unprocessed') }}</el-tag>
-						<el-tag type="success" size="small" v-if="scope.row.status == 1">{{ $t('message.alarm.tableI18nStatus.processed') }}</el-tag>
-						<el-tag type="info" size="small" v-if="scope.row.status == 2">{{ $t('message.alarm.tableI18nStatus.ignored') }}</el-tag>
+						<el-tag type="danger" size="small" v-if="scope.row.status == 0">{{ $t('message.alarmCenter.status.unprocessed') }}</el-tag>
+						<el-tag type="success" size="small" v-if="scope.row.status == 1">{{ $t('message.alarmCenter.status.processed') }}</el-tag>
+						<el-tag type="info" size="small" v-if="scope.row.status == 2">{{ $t('message.alarmCenter.status.ignored') }}</el-tag>
 					</template>
 				</el-table-column>
 				<!-- 告警时间 -->
-				<el-table-column prop="createdAt" :label="$t('message.alarm.tableI18nColumn.alarmTime')" align="center" width="160" v-col="'createdAt'"></el-table-column>
+				<el-table-column prop="createdAt" :label="$t('message.alarmCenter.columns.alarmTime')" align="center" width="160" v-col="'createdAt'"></el-table-column>
 				<!-- 操作 -->
 				<el-table-column :label="$t('message.tableI18nColumn.operation')" width="140" align="center" fixed="right" v-col="'handle'">
 					<template #default="scope">
 						<!-- 详情 -->
-						<el-button size="small" text type="primary" @click="onOpenDetailDic(scope.row)" v-auth="'detail'">{{ $t('message.tableI18nAction.detail') }}</el-button>
+						<el-button size="small" text type="primary" @click="onOpenDetailDic(scope.row)" v-auth="'detail'">{{ $t('message.alarmCenter.actions.detail') }}</el-button>
 						<!-- 处理 -->
-						<el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-if="scope.row.status == 0" v-auth="'edit'">{{ $t('message.tableI18nAction.handle') }}</el-button>
+						<el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)" :disabled="scope.row.status != 0" v-auth="'edit'">{{ $t('message.alarmCenter.actions.handle') }}</el-button>
 					</template>
 				</el-table-column>
 			</el-table>
@@ -93,6 +98,8 @@ import { useI18n } from 'vue-i18n';
 // 国际化
 const { locale } = useI18n();
 
+const currentLocale = computed(() => locale.value);
+
 // 定义接口来定义对象的类型
 interface TableDataRow {
 	id: number;
@@ -103,11 +110,9 @@ interface TableDataRow {
 	createBy: string;
 }
 
-const addDicRef = ref();
 const editDicRef = ref();
 const detailRef = ref();
 const queryRef = ref();
-const ids = ref<number[]>([])
 const tableData = ref({
 	data: [],
 	total: 0,

src/views/iot/alarm/setting/component/edit.vue

@@ -1,29 +1,37 @@
 <template>
 	<div class="system-edit-dic-container">
-		<el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '告警'" v-model="isShowDialog" width="50%">
-			<el-form :model="ruleForm" ref="formRef" :rules="rules" v-if="isShowDialog" label-width="110px">
-				<el-form-item label="名称" prop="name">
-					<el-input v-model="ruleForm.name" placeholder="请输入名称" />
+		<!-- 编辑告警/新增告警 -->
+		<el-dialog :title="ruleForm.id !== 0 ? $t('message.alarmCenter.alarmConfig.editAlarm') : $t('message.alarmCenter.alarmConfig.addAlarm')" v-model="isShowDialog" width="60%">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" v-if="isShowDialog" label-width="118px">
+				<!-- 名称 -->
+				<el-form-item :label="$t('message.alarmCenter.labels.name')" prop="name">
+					<!-- 请输入名称 -->
+					<el-input v-model="ruleForm.name" :placeholder="$t('message.alarmCenter.placeholders.pleaseInputName')" />
 				</el-form-item>
 
-				<el-form-item label="告警级别" prop="level">
+				<!-- 告警级别 -->
+				<el-form-item :label="$t('message.alarmCenter.labels.level')" prop="level">
 					<el-radio-group v-model="ruleForm.level">
 						<el-radio :label="Number(item.value)" v-for="item in alarm_type" :key="item.value">{{ item.label }}</el-radio>
 					</el-radio-group>
 				</el-form-item>
 
-				<el-form-item label="选择产品" prop="productKey">
-					<el-select v-model="ruleForm.productKey" filterable placeholder="请选择产品" @change="setType()">
+				<!-- 选择产品 -->
+				<el-form-item :label="$t('message.alarmCenter.labels.productKey')" prop="productKey">
+					<!-- 请选择产品 -->
+					<el-select v-model="ruleForm.productKey" filterable :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectProduct')" @change="setType()">
 						<el-option v-for="item in productData" :key="item.key" :label="item.name" :value="item.key">
 							<span style="float: left">{{ item.name }}</span>
 							<span style="float: right; font-size: 13px">{{ item.key }}</span>
 						</el-option>
 					</el-select>
 				</el-form-item>
-
-				<el-form-item label="选择设备" prop="deviceKey">
-					<el-select v-model="ruleForm.deviceKey" filterable placeholder="请选择设备">
-						<el-option label="全部" value="all">全部</el-option>
+				<!-- 选择设备 -->
+				<el-form-item :label="$t('message.alarmCenter.labels.deviceKey')" prop="deviceKey">
+					<!-- 请选择设备 -->
+					<el-select v-model="ruleForm.deviceKey" filterable :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectDevice')">
+						<!-- 全部 -->
+						<el-option label="全部" value="all">{{ $t('message.alarmCenter.alarmConfig.all') }}</el-option>
 						<el-option v-for="item in sourceData" :key="item.key" :label="item.name" :value="item.key">
 							<span style="float: left">{{ item.name }}</span>
 							<span style="float: right; font-size: 13px">{{ item.key }}</span>
@@ -31,14 +39,17 @@
 					</el-select>
 				</el-form-item>
 
-				<el-form-item label="触发方式" prop="triggerType" v-if="ruleForm.productKey">
+				<!-- 触发方式 -->
+				<el-form-item :label="$t('message.alarmCenter.labels.triggerType')" prop="triggerType" v-if="ruleForm.productKey">
 					<el-radio-group v-model="ruleForm.triggerType" @change="getRadio()">
 						<el-radio :label="item.type" v-for="item in typeData" :key="item.type">{{ item.title }}</el-radio>
 					</el-radio-group>
 				</el-form-item>
 
-				<el-form-item label="选择事件" prop="eventKey" v-if="ruleForm.triggerType === 4">
-					<el-select v-model="ruleForm.eventKey" filterable placeholder="请选择事件" @change="eventTypeChange">
+				<!-- 选择事件 -->
+				<el-form-item :label="$t('message.alarmCenter.labels.eventKey')" prop="eventKey" v-if="ruleForm.triggerType === 4">
+					<!-- 请选择事件 -->
+					<el-select v-model="ruleForm.eventKey" filterable :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectEventKey')" @change="eventTypeChange">
 						<el-option v-for="item in eventList" :key="item.key" :label="item.name" :value="item.key"></el-option>
 					</el-select>
 
@@ -46,18 +57,23 @@
 
 
 				<div v-if="ruleForm.triggerType > 2">
-					<el-divider content-position="left">触发条件</el-divider>
+					<!-- 触发条件 -->
+					<el-divider content-position="left">{{ $t('message.alarmCenter.labels.requestParams') }}</el-divider>
 					<div class="box-content">
 						<div v-for="(item, index) in requestParams" :key="index">
-							<div style="text-align: center" v-if="index > 0">
+							<div style="text-align: center" v-if="index > 0" >
 								<el-icon>
 									<Top />
 								</el-icon>
 								<div>
-									<el-select v-model="item.andOr" placeholder="选择条件关系">
-										<el-option label="无" :value="0" />
-										<el-option label="并且" :value="1" />
-										<el-option label="或" :value="2" />
+									<!-- 选择条件关系 -->
+									<el-select v-model="item.andOr" :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectRelation')">
+										<!-- 无 -->
+										<el-option :label="$t('message.alarmCenter.alarmConfig.noRelation')" :value="0" />
+										<!-- 并且 -->
+										<el-option :label="$t('message.alarmCenter.alarmConfig.andRelation')" :value="1" />
+										<!-- 或 -->
+										<el-option :label="$t('message.alarmCenter.alarmConfig.orRelation')" :value="2" />
 									</el-select>
 								</div>
 								<el-icon>
@@ -79,7 +95,8 @@
 								</div>
 
 								<div style="display: flex">
-									<el-divider content-position="left">参数设置</el-divider>
+									<!-- 参数设置 -->
+									<el-divider content-position="left">{{ $t('message.alarmCenter.labels.paramSetting') }}</el-divider>
 								</div>
 
 								<div v-for="(aaa, bbb) in item.filters" :key="bbb">
@@ -88,10 +105,14 @@
 											<Top />
 										</el-icon>
 										<div>
-											<el-select v-model="aaa.andOr" placeholder="选择条件关系" style="width: 150px">
-												<el-option label="无" :value="0" />
-												<el-option label="并且" :value="1" />
-												<el-option label="或" :value="2" />
+											<!-- 选择条件关系 -->
+											<el-select v-model="aaa.andOr" :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectRelation')" style="width: 150px">
+												<!-- 无 -->
+												<el-option :label="$t('message.alarmCenter.alarmConfig.noRelation')" :value="0" />
+												<!-- 并且 -->
+												<el-option :label="$t('message.alarmCenter.alarmConfig.andRelation')" :value="1" />
+												<!-- 或 -->
+												<el-option :label="$t('message.alarmCenter.alarmConfig.orRelation')" :value="2" />
 											</el-select>
 										</div>
 										<el-icon>
@@ -99,13 +120,16 @@
 										</el-icon>
 									</div>
 									<div class="content-f">
-										<el-select v-model="aaa.key" :placeholder="ruleForm.triggerType === 4 && !ruleForm.eventKey ? '请先选择事件' : '选择参数'" style="width: 320px">
+										<!-- 请选择事件/请选择参数 -->
+										<el-select v-model="aaa.key" :placeholder="ruleForm.triggerType === 4 && !ruleForm.eventKey ? $t('message.alarmCenter.placeholders.pleaseSelectEventKey') : $t('message.alarmCenter.placeholders.pleaseSelectRequestParam')" style="width: 320px">
 											<el-option v-for="a in triData" :key="a.paramKey" :label="a.title" :value="a.paramKey" />
 										</el-select>
-										<el-select v-model="aaa.operator" placeholder="选择操作符" style="width: 320px">
+										<!-- 选择操作符 -->
+										<el-select v-model="aaa.operator" :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectOperator')" style="width: 320px">
 											<el-option v-for="b in operData" :key="b.type" :label="b.title" :value="b.type" />
 										</el-select>
-										<el-input v-model="aaa.value[0]" placeholder="请输入条件值" style="width: 320px" />
+										<!-- 请输入条件值 -->
+										<el-input v-model="aaa.value[0]" :placeholder="$t('message.alarmCenter.placeholders.pleaseInputConditionValue')" style="width: 320px" />
 
 										<div class="conicon">
 											<el-icon @click="delParamss(index, bbb)">
@@ -114,18 +138,20 @@
 										</div>
 									</div>
 								</div>
-
-								<el-button type="primary" text bg class="addbutton" @click="addParams(index)">增加条件</el-button>
+								<!-- 增加条件 -->
+								<el-button type="primary" text bg class="addbutton" @click="addParams(index)">{{ $t('message.alarmCenter.actions.addCondition') }}</el-button>
 							</div>
 						</div>
 					</div>
-					<el-button type="success" text bg class="addbutton" @click="addParamss">增加分组</el-button>
+					<!-- 增加分组 -->
+					<el-button type="success" text bg class="addbutton" @click="addParamss">{{ $t('message.alarmCenter.actions.addGroup') }}</el-button>
 				</div>
 
-				<el-divider content-position="left">执行动作</el-divider>
+				<!-- 执行动作 -->
+				<el-divider content-position="left">{{ $t('message.alarmCenter.labels.executeAction') }}</el-divider>
 				<div class="box-content">
 					<div v-for="(item, index) in action" :key="index">
-						<div style="
+						<div  class="notify-item-wrap" style="
 								padding: 10px;
 								border: 1px solid var(--next-border-color-light);
 								background-color: var(--next-border-color-light);
@@ -139,23 +165,28 @@
 							</div>
 
 							<div style="display: flex">
-								<el-divider content-position="left">消息通知</el-divider>
+								<!-- 消息通知 -->
+								<el-divider content-position="left">{{ $t('message.alarmCenter.labels.messageNotification') }}</el-divider>
 							</div>
 
 							<div class="content-f">
-								<el-select v-model="item.sendGateway" placeholder="请选择通知方式" style="width: 320px" @change="getNode(item.sendGateway, index)">
+								<!-- 请选择通知方式 -->
+								<el-select v-model="item.sendGateway" :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectNotificationWay')" style="width: 320px" @change="getNode(item.sendGateway, index)">
 									<el-option v-for="a in notice_send_gateway" :key="a.value" :label="a.label" :value="a.value" />
 								</el-select>
-								<el-select v-model="item.noticeConfig" placeholder="请选择通知配置" style="width: 320px" @change="getTem(item.noticeConfig, index)">
+								<!-- 请选择通知配置 -->
+								<el-select v-model="item.noticeConfig" :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectNotificationConfiguration')" style="width: 320px" @change="getTem(item.noticeConfig, index)">
 									<el-option v-for="b in sendGatewayData[index]" :key="b.id" :label="b.title" :value="b.id" />
 								</el-select>
-								<el-select v-model="item.noticeTemplate" placeholder="请选择通知模板" style="width: 320px">
+								<!-- 请选择通知模板 -->
+								<el-select v-model="item.noticeTemplate" :placeholder="$t('message.alarmCenter.placeholders.pleaseSelectNotificationTemplate')" style="width: 320px">
 									<el-option v-for="c in noticeConfigData[index]" :key="c.id" :label="c.title" :value="c.id" />
 								</el-select>
 							</div>
 							<div>
 								<div style="display: flex; margin-bottom: 10px" v-for="(ph, phindex) in item.addressee" :key="phindex">
-									<el-input v-model="ph.phone" placeholder="请输入接收人信息" style="width: 320px" />
+									<!-- 请输入接收人信息 -->
+									<el-input v-model="ph.phone" :placeholder="$t('message.alarmCenter.placeholders.pleaseInputRecipientInformation')" style="width: 320px" />
 									<el-icon style="width: 32px; height: 32px; font-size: 24px" v-if="phindex == 0" @click="AddPhone(index)">
 										<CirclePlus />
 									</el-icon>
@@ -167,12 +198,15 @@
 						</div>
 					</div>
 				</div>
-				<el-button type="success" text bg class="addbutton" @click="addAction">增加执行</el-button>
+				<!-- 增加执行 -->
+				<el-button type="success" text bg class="addbutton" @click="addAction">{{ $t('message.alarmCenter.actions.addExecution') }}</el-button>
 			</el-form>
 			<template #footer>
 				<span class="dialog-footer">
-					<el-button @click="onCancel">取 消</el-button>
-					<el-button type="primary" @click="onSubmit">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
+					<!-- 取消 -->
+					<el-button @click="onCancel">{{ $t('message.alarmCenter.actions.cancel') }}</el-button>
+					<!-- 编辑/新增 -->
+					<el-button type="primary" @click="onSubmit">{{ ruleForm.id !== 0 ? $t('message.alarmCenter.actions.edit') : $t('message.alarmCenter.actions.add') }}</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -180,11 +214,13 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance, watch } from 'vue';
+import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance, watch, computed } from 'vue';
 import api from '/@/api/datahub';
 import iotapi from '/@/api/device';
 import alarm from '/@/api/alarm';
 import notice from '/@/api/notice';
+import { useI18n } from 'vue-i18n';
+
 
 import { ElMessage } from 'element-plus';
 import { Delete, CircleClose, Top, Bottom, CirclePlus, Remove } from '@element-plus/icons-vue';
@@ -204,7 +240,7 @@ interface DicState {
 	id: number;
 	isShowDialog: boolean;
 	ruleForm: RuleFormState;
-	rules: any;
+	// rules: any;
 	sourceData: any;
 	productData: any;
 	typeData: any;
@@ -223,6 +259,18 @@ export default defineComponent({
 	components: { Delete, CircleClose, Top, Bottom, CirclePlus, Remove },
 
 	setup(prop, { emit }) {
+		const { t, locale } = useI18n();
+
+		const rules = computed(() => ({
+			// 告警名称不能为空
+			name: [{ required: true, message: t('message.alarmCenter.validate.name'), trigger: 'change' }],
+			// 告警级别不能为空
+			level: [{ required: true, message: t('message.alarmCenter.validate.level'), trigger: 'change' }],
+			// 请选择产品
+			productKey: [{ required: true, message: t('message.alarmCenter.validate.productKey'), trigger: 'change' }],
+			// 请选择设备
+			deviceKey: [{ required: true, message: t('message.alarmCenter.validate.deviceKey'), trigger: 'change' }],
+		}))
 		const myRef = ref<HTMLElement | null>(null);
 		const formRef = ref<HTMLElement | null>(null);
 		const { proxy } = getCurrentInstance() as any;
@@ -238,7 +286,6 @@ export default defineComponent({
 			typeData: [],
 			triData: [],
 			operData: [],
-			levelData: [],
 			sendGatewayData: [],
 			noticeConfigData: [],
 			eventList: [],
@@ -296,13 +343,7 @@ export default defineComponent({
 						],
 					},
 				],
-			},
-			rules: {
-				name: [{ required: true, message: '告警名称不能为空', trigger: 'change' }],
-				level: [{ required: true, message: '告警级别不能为空', trigger: 'change' }],
-				productKey: [{ required: true, message: '请选择产品', trigger: 'change' }],
-				deviceKey: [{ required: true, message: '请选择设备', trigger: 'change' }],
-			},
+			}
 		});
 
 		// 打开弹窗
@@ -437,6 +478,17 @@ export default defineComponent({
 			gettriData()
 		};
 
+		// // 监听语言变化，重新验证表单
+		// watch(locale, () => {
+		// 	// 延迟执行确保翻译更新完成
+		// 	setTimeout(() => {
+		// 			const formWrap = unref(formRef) as any;
+		// 			if (formWrap) {
+		// 					formWrap.clearValidate(); // 清除当前验证状态
+		// 			}
+		// 	}, 100);
+		// });
+
 		watch(() => state.ruleForm.productKey, (productKey) => {
 			if (!productKey) return
 			// 切换产品时候重新获取事件列表，清空之前选中的事件
@@ -466,14 +518,16 @@ export default defineComponent({
 					if (state.ruleForm.id !== 0) {
 						//修改
 						alarm.common.edit(state.ruleForm).then(() => {
-							ElMessage.success('告警修改成功');
+							// 告警编辑成功
+							ElMessage.success(t('message.alarmCenter.messages.editSuccess'));
 							closeDialog(); // 关闭弹窗
 							emit('dataList');
 						});
 					} else {
 						//添加
 						alarm.common.add(state.ruleForm).then(() => {
-							ElMessage.success('告警添加成功');
+							// 告警新增成功
+							ElMessage.success(t('message.alarmCenter.messages.addSuccess'));
 							closeDialog(); // 关闭弹窗
 							emit('dataList');
 						});
@@ -608,6 +662,8 @@ export default defineComponent({
 		};
 
 		return {
+			locale,
+			rules,
 			alarm_type,
 			getRadio,
 			gettriData,
@@ -637,6 +693,11 @@ export default defineComponent({
 });
 </script>
 <style scoped lang="scss">
+[data-theme="dark"] {
+	.notify-item-wrap {
+		background-color: transparent!important;;
+	}
+}
 
 .inline {
 	display: inline-flex;

src/views/iot/alarm/setting/index.vue

@@ -2,17 +2,18 @@
 	<div class="page padding bg page-full">
 		<el-form :model="tableData.param" ref="queryRef" inline>
 			<el-form-item class="mb-0">
+				<!-- 新增告警 -->
 				<el-button type="primary" @click="onOpenAdd" v-auth="'add'">
 					<el-icon>
 						<ele-FolderAdd />
 					</el-icon>
-					新增告警
+					{{ $t('message.alarmCenter.actions.addAlarm') }}
 				</el-button>
 			</el-form-item>
 		</el-form>
 		<el-divider class="my-5" />
 		<el-row class="page-full-part">
-			<el-col :span="6" v-for="(item, index) in tableData.data" :key="index">
+			<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" v-for="(item, index) in tableData.data" :key="index">
 				<div class="card">
 					<div class="ant-card">
 						<div class="ant-card-body">
@@ -28,9 +29,11 @@
 									</div>
 									<div class="card-item-content" v-col="'alarm'">
 										<div>
-											<label>触发：</label>
+											<!-- 触发： -->
+											<label>{{ $t('message.alarmCenter.labels.trigger') }}</label>
 											<div>
-												<div>级别：</div>
+												<!-- 级别： -->
+												<label>{{ $t('message.alarmCenter.labels.level') }}</label>
 											</div>
 										</div>
 										<div>
@@ -47,44 +50,50 @@
 								<div class="card-state-content">
 									<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper">
 										<span class="ant-badge-status-dot ant-badge-status-success"></span>
-										<span class="ant-badge-status-text">已启用</span>
+										<!-- 已启用 -->
+										<span class="ant-badge-status-text">{{ $t('message.alarmCenter.status.enabled') }}</span>
 									</span>
 								</div>
 							</div>
 							<div class="card-state error" v-if="item.status == 0" v-col="'liststatus'">
 								<div class="card-state-content">
-									<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">未启用</span></span>
+									<!-- 未启用 -->
+									<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">{{ $t('message.alarmCenter.status.disabled') }}</span></span>
 								</div>
 							</div>
 						</div>
 					</div>
 					<div class="card-tools">
+						<!-- 编辑 -->
 						<el-button type="primary" :disabled="item.status === 1" text bg @click="onOpenEdit(item)" v-auth="'edit'">
 							<el-icon>
 								<ele-Edit />
 							</el-icon>
-							修改
+							{{ $t('message.alarmCenter.actions.edit') }}
 						</el-button>
 
+						<!-- 启用 -->
 						<el-button type="warning" text bg @click="onActionStatus(item)" v-if="item.status == 0" v-auth="'status'">
 							<el-icon>
 								<ele-Check />
 							</el-icon>
-							启用
+							{{ $t('message.alarmCenter.actions.enable') }}
 						</el-button>
 
+						<!-- 禁用 -->
 						<el-button type="info" text bg @click="onActionStatus(item)" v-if="item.status == 1" v-auth="'status'">
 							<el-icon>
 								<ele-Close />
 							</el-icon>
-							禁用
+							{{ $t('message.alarmCenter.actions.disable') }}
 						</el-button>
 
+						<!-- 删除 -->
 						<el-button type="info" :disabled="item.status === 1" text bg @click="onRowDel(item)" v-auth="'del'">
 							<el-icon>
 								<ele-Delete />
 							</el-icon>
-							删除
+							{{ $t('message.alarmCenter.actions.delete') }}
 						</el-button>
 					</div>
 				</div>
@@ -100,6 +109,7 @@ import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import EditDic from './component/edit.vue';
 import alarm from '/@/api/alarm';
+import { useI18n } from 'vue-i18n';
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
@@ -129,6 +139,7 @@ export default defineComponent({
 	components: { EditDic },
 
 	setup() {
+		const { t } = useI18n();
 		const addDicRef = ref();
 		const levelDicRef = ref();
 		const editDicRef = ref();
@@ -175,21 +186,23 @@ export default defineComponent({
 			detailRef.value.openDialog(row);
 		};
 		const onRowDel = (row?: TableDataRow) => {
-			let msg = '你确定要删除所选数据？';
-			let ids: number[] | number = [];
+			// 你确定要删除所选数据？
+			let msg = t('message.alarmCenter.messages.deleteConfirm');
 			if (!row?.id) {
-				ElMessage.error('请选择要删除的数据。');
-				return;
+				// 请选择要删除的数据。
+				return ElMessage.error(t('message.alarmCenter.messages.selectDataFirst'));
 			}
-			msg = `此操作将永久删除告警：“${row.name}”，是否继续?`;
-			ElMessageBox.confirm(msg, '提示', {
-				confirmButtonText: '确认',
-				cancelButtonText: '取消',
+			// 此操作将永久删除告警：“${row.name}”，是否继续?
+			msg = t('message.alarmCenter.messages.deleteConfirm1', { name: row.name });
+			ElMessageBox.confirm(msg, t('message.alarmCenter.messages.tip'), {
+				confirmButtonText: t('message.alarmCenter.messages.confirm'),
+				cancelButtonText: t('message.alarmCenter.messages.cancel'),
 				type: 'warning',
 			})
 				.then(() => {
 					alarm.common.delete(row.id).then(() => {
-						ElMessage.success('删除成功');
+						// 删除成功
+						ElMessage.success(t('message.alarmCenter.messages.deleteSuccess'));
 						dataList();
 					});
 				})
@@ -208,10 +221,12 @@ export default defineComponent({
 		const onActionStatus = (item: TableDataRow) => {
 			if (item.status === 0) {
 				alarm.common.deploy({ id: item.id }).then(() => {
+					ElMessage.success(t('message.alarmCenter.messages.opSuccess'));
 					dataList();
 				});
 			} else {
 				alarm.common.undeploy({ id: item.id }).then(() => {
+					ElMessage.success(t('message.alarmCenter.messages.opSuccess'));
 					dataList();
 				});
 			}
@@ -360,7 +375,8 @@ export default defineComponent({
 	margin-top: 8px;
 	justify-content: space-between;
 	overflow: hidden;
-	gap: 8px;
+	gap: 4px;
+	// overflow-x: auto;
 
 	.el-button {
 		flex: 1;