diff --git a/src/api/home/rule/alarm.ts b/src/api/home/rule/alarm.ts
new file mode 100644
index 0000000..f2041d0
--- /dev/null
+++ b/src/api/home/rule/alarm.ts
@@ -0,0 +1,115 @@
+/**
+ * 规则引擎--报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRule/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 停用或者启用
+export function switchStatus(data: any) {
+  return request({
+    url: '/system/alarmRule/stop',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRule/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建
+export function addAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警类型管理列表
+export function getAlarmTypeListPage(data: any) {
+  return request({
+    url: `/system/alarmType/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警类型
+export function removeAlarmType(id: string) {
+  return request({
+    url: '/system/alarmType/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警类型
+export function addAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警类型
+export function editAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警等级管理列表
+export function getAlarmLevelListPage(data: any) {
+  return request({
+    url: `/system/alarmLevelControl/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警等级
+export function removeAlarmLevel(id: string) {
+  return request({
+    url: '/system/alarmLevelControl/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警等级
+export function addAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警等级
+export function editAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/edit',
+    method: 'post',
+    data,
+  })
+}

diff --git a/src/api/home/rule/alarm.ts b/src/api/home/rule/alarm.ts
new file mode 100644
index 0000000..f2041d0
--- /dev/null
+++ b/src/api/home/rule/alarm.ts
@@ -0,0 +1,115 @@
+/**
+ * 规则引擎--报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRule/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 停用或者启用
+export function switchStatus(data: any) {
+  return request({
+    url: '/system/alarmRule/stop',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRule/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建
+export function addAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警类型管理列表
+export function getAlarmTypeListPage(data: any) {
+  return request({
+    url: `/system/alarmType/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警类型
+export function removeAlarmType(id: string) {
+  return request({
+    url: '/system/alarmType/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警类型
+export function addAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警类型
+export function editAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警等级管理列表
+export function getAlarmLevelListPage(data: any) {
+  return request({
+    url: `/system/alarmLevelControl/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警等级
+export function removeAlarmLevel(id: string) {
+  return request({
+    url: '/system/alarmLevelControl/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警等级
+export function addAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警等级
+export function editAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/rule/special.ts b/src/api/home/rule/special.ts
new file mode 100644
index 0000000..5ecd2a0
--- /dev/null
+++ b/src/api/home/rule/special.ts
@@ -0,0 +1,39 @@
+/**
+ * 规则引擎--特殊报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getSpecialAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRuleDevice/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeSpecialAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRuleDevice/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新增
+export function addSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/edit',
+    method: 'post',
+    data,
+  })
+}

diff --git a/src/api/home/rule/alarm.ts b/src/api/home/rule/alarm.ts
new file mode 100644
index 0000000..f2041d0
--- /dev/null
+++ b/src/api/home/rule/alarm.ts
@@ -0,0 +1,115 @@
+/**
+ * 规则引擎--报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRule/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 停用或者启用
+export function switchStatus(data: any) {
+  return request({
+    url: '/system/alarmRule/stop',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRule/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建
+export function addAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警类型管理列表
+export function getAlarmTypeListPage(data: any) {
+  return request({
+    url: `/system/alarmType/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警类型
+export function removeAlarmType(id: string) {
+  return request({
+    url: '/system/alarmType/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警类型
+export function addAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警类型
+export function editAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警等级管理列表
+export function getAlarmLevelListPage(data: any) {
+  return request({
+    url: `/system/alarmLevelControl/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警等级
+export function removeAlarmLevel(id: string) {
+  return request({
+    url: '/system/alarmLevelControl/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警等级
+export function addAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警等级
+export function editAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/rule/special.ts b/src/api/home/rule/special.ts
new file mode 100644
index 0000000..5ecd2a0
--- /dev/null
+++ b/src/api/home/rule/special.ts
@@ -0,0 +1,39 @@
+/**
+ * 规则引擎--特殊报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getSpecialAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRuleDevice/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeSpecialAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRuleDevice/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新增
+export function addSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 662d4c7..6f9660b 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -255,6 +255,9 @@
   })
   // 绘制线
   resetDrawLine()
+  setTimeout(() => {
+    pageIsFirst.value = false
+  }, 2000)
 }
 defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
@@ -270,7 +273,7 @@
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
-        <span>{{ item.name }}</span>
+        <span style="margin-left: 5px;">{{ item.name }}</span>
       </div>
     </div>
   </div>
@@ -283,17 +286,17 @@
 }
 
 .legend {
-  background: rgb(68 66 66 / 20%);
+  background: rgb(255 255 255 / 80%);
   position: absolute;
   z-index: 1;
   left: 15px;
   bottom: 10px;
   padding: 0 10px;
-  border-radius: 8px;
+  border-radius: 3px;
 
   .legend-item {
-    margin: 5px 0;
-    font-weight: 700;
+    margin: 10px 0;
+    // font-weight: 700;
     display: flex;
     align-items: center;
 

diff --git a/src/api/home/rule/alarm.ts b/src/api/home/rule/alarm.ts
new file mode 100644
index 0000000..f2041d0
--- /dev/null
+++ b/src/api/home/rule/alarm.ts
@@ -0,0 +1,115 @@
+/**
+ * 规则引擎--报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRule/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 停用或者启用
+export function switchStatus(data: any) {
+  return request({
+    url: '/system/alarmRule/stop',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRule/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建
+export function addAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警类型管理列表
+export function getAlarmTypeListPage(data: any) {
+  return request({
+    url: `/system/alarmType/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警类型
+export function removeAlarmType(id: string) {
+  return request({
+    url: '/system/alarmType/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警类型
+export function addAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警类型
+export function editAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警等级管理列表
+export function getAlarmLevelListPage(data: any) {
+  return request({
+    url: `/system/alarmLevelControl/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警等级
+export function removeAlarmLevel(id: string) {
+  return request({
+    url: '/system/alarmLevelControl/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警等级
+export function addAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警等级
+export function editAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/rule/special.ts b/src/api/home/rule/special.ts
new file mode 100644
index 0000000..5ecd2a0
--- /dev/null
+++ b/src/api/home/rule/special.ts
@@ -0,0 +1,39 @@
+/**
+ * 规则引擎--特殊报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getSpecialAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRuleDevice/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeSpecialAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRuleDevice/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新增
+export function addSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 662d4c7..6f9660b 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -255,6 +255,9 @@
   })
   // 绘制线
   resetDrawLine()
+  setTimeout(() => {
+    pageIsFirst.value = false
+  }, 2000)
 }
 defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
@@ -270,7 +273,7 @@
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
-        <span>{{ item.name }}</span>
+        <span style="margin-left: 5px;">{{ item.name }}</span>
       </div>
     </div>
   </div>
@@ -283,17 +286,17 @@
 }
 
 .legend {
-  background: rgb(68 66 66 / 20%);
+  background: rgb(255 255 255 / 80%);
   position: absolute;
   z-index: 1;
   left: 15px;
   bottom: 10px;
   padding: 0 10px;
-  border-radius: 8px;
+  border-radius: 3px;
 
   .legend-item {
-    margin: 5px 0;
-    font-weight: 700;
+    margin: 10px 0;
+    // font-weight: 700;
     display: flex;
     align-items: center;
 
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
new file mode 100644
index 0000000..c1b129d
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -0,0 +1,148 @@
+<!--
+  Description: 报警规则-报警等级管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmLevelManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmLevelDialog from './editAlarmLevelDialog.vue'
+import { getAlarmLevelListPage, removeAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '报警音效', value: 'isSoundName', align: 'center' },
+  { text: '报警推送', value: 'isSendName', align: 'center' },
+  { text: '报警短信', value: 'isTextName', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      isSendName: item.isSend === '0' ? '关' : '开',
+      isSoundName: item.isSound === '0' ? '关' : '开',
+      isTextName: item.isText === '0' ? '关' : '开',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : item.alarmNoteMethod === '2' ? '消息提醒' : '',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmLevel(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警等级管理" append-to-body>
+    <edit-alarm-level-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

diff --git a/src/api/home/rule/alarm.ts b/src/api/home/rule/alarm.ts
new file mode 100644
index 0000000..f2041d0
--- /dev/null
+++ b/src/api/home/rule/alarm.ts
@@ -0,0 +1,115 @@
+/**
+ * 规则引擎--报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRule/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 停用或者启用
+export function switchStatus(data: any) {
+  return request({
+    url: '/system/alarmRule/stop',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRule/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建
+export function addAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警类型管理列表
+export function getAlarmTypeListPage(data: any) {
+  return request({
+    url: `/system/alarmType/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警类型
+export function removeAlarmType(id: string) {
+  return request({
+    url: '/system/alarmType/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警类型
+export function addAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警类型
+export function editAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警等级管理列表
+export function getAlarmLevelListPage(data: any) {
+  return request({
+    url: `/system/alarmLevelControl/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警等级
+export function removeAlarmLevel(id: string) {
+  return request({
+    url: '/system/alarmLevelControl/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警等级
+export function addAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警等级
+export function editAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/rule/special.ts b/src/api/home/rule/special.ts
new file mode 100644
index 0000000..5ecd2a0
--- /dev/null
+++ b/src/api/home/rule/special.ts
@@ -0,0 +1,39 @@
+/**
+ * 规则引擎--特殊报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getSpecialAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRuleDevice/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeSpecialAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRuleDevice/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新增
+export function addSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 662d4c7..6f9660b 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -255,6 +255,9 @@
   })
   // 绘制线
   resetDrawLine()
+  setTimeout(() => {
+    pageIsFirst.value = false
+  }, 2000)
 }
 defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
@@ -270,7 +273,7 @@
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
-        <span>{{ item.name }}</span>
+        <span style="margin-left: 5px;">{{ item.name }}</span>
       </div>
     </div>
   </div>
@@ -283,17 +286,17 @@
 }
 
 .legend {
-  background: rgb(68 66 66 / 20%);
+  background: rgb(255 255 255 / 80%);
   position: absolute;
   z-index: 1;
   left: 15px;
   bottom: 10px;
   padding: 0 10px;
-  border-radius: 8px;
+  border-radius: 3px;
 
   .legend-item {
-    margin: 5px 0;
-    font-weight: 700;
+    margin: 10px 0;
+    // font-weight: 700;
     display: flex;
     align-items: center;
 
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
new file mode 100644
index 0000000..c1b129d
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -0,0 +1,148 @@
+<!--
+  Description: 报警规则-报警等级管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmLevelManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmLevelDialog from './editAlarmLevelDialog.vue'
+import { getAlarmLevelListPage, removeAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '报警音效', value: 'isSoundName', align: 'center' },
+  { text: '报警推送', value: 'isSendName', align: 'center' },
+  { text: '报警短信', value: 'isTextName', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      isSendName: item.isSend === '0' ? '关' : '开',
+      isSoundName: item.isSound === '0' ? '关' : '开',
+      isTextName: item.isText === '0' ? '关' : '开',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : item.alarmNoteMethod === '2' ? '消息提醒' : '',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmLevel(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警等级管理" append-to-body>
+    <edit-alarm-level-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
new file mode 100644
index 0000000..f3bc573
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -0,0 +1,140 @@
+<!--
+  Description: 报警规则-报警类型管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmTypeManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmTypeDialog from './editAlarmTypeDialog.vue'
+import { getAlarmTypeListPage, removeAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警类别', value: 'alarmCategoryName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmType(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警类型管理" append-to-body>
+    <edit-alarm-type-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

diff --git a/src/api/home/rule/alarm.ts b/src/api/home/rule/alarm.ts
new file mode 100644
index 0000000..f2041d0
--- /dev/null
+++ b/src/api/home/rule/alarm.ts
@@ -0,0 +1,115 @@
+/**
+ * 规则引擎--报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRule/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 停用或者启用
+export function switchStatus(data: any) {
+  return request({
+    url: '/system/alarmRule/stop',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRule/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建
+export function addAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警类型管理列表
+export function getAlarmTypeListPage(data: any) {
+  return request({
+    url: `/system/alarmType/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警类型
+export function removeAlarmType(id: string) {
+  return request({
+    url: '/system/alarmType/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警类型
+export function addAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警类型
+export function editAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警等级管理列表
+export function getAlarmLevelListPage(data: any) {
+  return request({
+    url: `/system/alarmLevelControl/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警等级
+export function removeAlarmLevel(id: string) {
+  return request({
+    url: '/system/alarmLevelControl/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警等级
+export function addAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警等级
+export function editAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/rule/special.ts b/src/api/home/rule/special.ts
new file mode 100644
index 0000000..5ecd2a0
--- /dev/null
+++ b/src/api/home/rule/special.ts
@@ -0,0 +1,39 @@
+/**
+ * 规则引擎--特殊报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getSpecialAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRuleDevice/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeSpecialAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRuleDevice/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新增
+export function addSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 662d4c7..6f9660b 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -255,6 +255,9 @@
   })
   // 绘制线
   resetDrawLine()
+  setTimeout(() => {
+    pageIsFirst.value = false
+  }, 2000)
 }
 defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
@@ -270,7 +273,7 @@
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
-        <span>{{ item.name }}</span>
+        <span style="margin-left: 5px;">{{ item.name }}</span>
       </div>
     </div>
   </div>
@@ -283,17 +286,17 @@
 }
 
 .legend {
-  background: rgb(68 66 66 / 20%);
+  background: rgb(255 255 255 / 80%);
   position: absolute;
   z-index: 1;
   left: 15px;
   bottom: 10px;
   padding: 0 10px;
-  border-radius: 8px;
+  border-radius: 3px;
 
   .legend-item {
-    margin: 5px 0;
-    font-weight: 700;
+    margin: 10px 0;
+    // font-weight: 700;
     display: flex;
     align-items: center;
 
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
new file mode 100644
index 0000000..c1b129d
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -0,0 +1,148 @@
+<!--
+  Description: 报警规则-报警等级管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmLevelManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmLevelDialog from './editAlarmLevelDialog.vue'
+import { getAlarmLevelListPage, removeAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '报警音效', value: 'isSoundName', align: 'center' },
+  { text: '报警推送', value: 'isSendName', align: 'center' },
+  { text: '报警短信', value: 'isTextName', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      isSendName: item.isSend === '0' ? '关' : '开',
+      isSoundName: item.isSound === '0' ? '关' : '开',
+      isTextName: item.isText === '0' ? '关' : '开',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : item.alarmNoteMethod === '2' ? '消息提醒' : '',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmLevel(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警等级管理" append-to-body>
+    <edit-alarm-level-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
new file mode 100644
index 0000000..f3bc573
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -0,0 +1,140 @@
+<!--
+  Description: 报警规则-报警类型管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmTypeManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmTypeDialog from './editAlarmTypeDialog.vue'
+import { getAlarmTypeListPage, removeAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警类别', value: 'alarmCategoryName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmType(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警类型管理" append-to-body>
+    <edit-alarm-type-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
new file mode 100644
index 0000000..fe60451
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
@@ -0,0 +1,199 @@
+<!--
+  Description: 报警等级管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmLevel">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmLevel, editAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmLevel: '', // 报警等级
+  alarmNoteMethod: '', // 报警提示方式
+  isSound: '0',
+  isSend: '0',
+  isText: '0',
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmLevel: [{ required: true, message: '报警等级不能为空', trigger: ['blur', 'change'] }],
+  alarmNoteMethod: [{ required: true, message: '报警提示方式不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmLevel: '', // 报警等级
+    alarmNoteMethod: '', // 报警提示方式
+    isSound: '0',
+    isSend: '0',
+    isText: '0',
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+const alarmNoteMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '弹窗',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '消息提醒',
+    id: '2',
+    value: '2',
+  },
+]) // 报警类别
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警等级`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警等级" prop="alarmLevel">
+            <el-input
+              v-model.trim="dataForm.alarmLevel" type="text" placeholder="报警等级" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警提示方式" prop="alarmNoteMethod">
+            <el-select
+              v-model.trim="dataForm.alarmNoteMethod" placeholder="报警提示方式" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmNoteMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警音效" prop="isSound">
+            <el-switch v-model="dataForm.isSound" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警推送" prop="isSend">
+            <el-switch v-model="dataForm.isSend" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警短信" prop="isText">
+            <el-switch v-model="dataForm.isText" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

diff --git a/src/api/home/rule/alarm.ts b/src/api/home/rule/alarm.ts
new file mode 100644
index 0000000..f2041d0
--- /dev/null
+++ b/src/api/home/rule/alarm.ts
@@ -0,0 +1,115 @@
+/**
+ * 规则引擎--报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRule/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 停用或者启用
+export function switchStatus(data: any) {
+  return request({
+    url: '/system/alarmRule/stop',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRule/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建
+export function addAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警类型管理列表
+export function getAlarmTypeListPage(data: any) {
+  return request({
+    url: `/system/alarmType/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警类型
+export function removeAlarmType(id: string) {
+  return request({
+    url: '/system/alarmType/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警类型
+export function addAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警类型
+export function editAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警等级管理列表
+export function getAlarmLevelListPage(data: any) {
+  return request({
+    url: `/system/alarmLevelControl/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警等级
+export function removeAlarmLevel(id: string) {
+  return request({
+    url: '/system/alarmLevelControl/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警等级
+export function addAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警等级
+export function editAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/rule/special.ts b/src/api/home/rule/special.ts
new file mode 100644
index 0000000..5ecd2a0
--- /dev/null
+++ b/src/api/home/rule/special.ts
@@ -0,0 +1,39 @@
+/**
+ * 规则引擎--特殊报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getSpecialAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRuleDevice/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeSpecialAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRuleDevice/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新增
+export function addSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 662d4c7..6f9660b 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -255,6 +255,9 @@
   })
   // 绘制线
   resetDrawLine()
+  setTimeout(() => {
+    pageIsFirst.value = false
+  }, 2000)
 }
 defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
@@ -270,7 +273,7 @@
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
-        <span>{{ item.name }}</span>
+        <span style="margin-left: 5px;">{{ item.name }}</span>
       </div>
     </div>
   </div>
@@ -283,17 +286,17 @@
 }
 
 .legend {
-  background: rgb(68 66 66 / 20%);
+  background: rgb(255 255 255 / 80%);
   position: absolute;
   z-index: 1;
   left: 15px;
   bottom: 10px;
   padding: 0 10px;
-  border-radius: 8px;
+  border-radius: 3px;
 
   .legend-item {
-    margin: 5px 0;
-    font-weight: 700;
+    margin: 10px 0;
+    // font-weight: 700;
     display: flex;
     align-items: center;
 
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
new file mode 100644
index 0000000..c1b129d
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -0,0 +1,148 @@
+<!--
+  Description: 报警规则-报警等级管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmLevelManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmLevelDialog from './editAlarmLevelDialog.vue'
+import { getAlarmLevelListPage, removeAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '报警音效', value: 'isSoundName', align: 'center' },
+  { text: '报警推送', value: 'isSendName', align: 'center' },
+  { text: '报警短信', value: 'isTextName', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      isSendName: item.isSend === '0' ? '关' : '开',
+      isSoundName: item.isSound === '0' ? '关' : '开',
+      isTextName: item.isText === '0' ? '关' : '开',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : item.alarmNoteMethod === '2' ? '消息提醒' : '',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmLevel(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警等级管理" append-to-body>
+    <edit-alarm-level-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
new file mode 100644
index 0000000..f3bc573
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -0,0 +1,140 @@
+<!--
+  Description: 报警规则-报警类型管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmTypeManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmTypeDialog from './editAlarmTypeDialog.vue'
+import { getAlarmTypeListPage, removeAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警类别', value: 'alarmCategoryName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmType(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警类型管理" append-to-body>
+    <edit-alarm-type-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
new file mode 100644
index 0000000..fe60451
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
@@ -0,0 +1,199 @@
+<!--
+  Description: 报警等级管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmLevel">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmLevel, editAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmLevel: '', // 报警等级
+  alarmNoteMethod: '', // 报警提示方式
+  isSound: '0',
+  isSend: '0',
+  isText: '0',
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmLevel: [{ required: true, message: '报警等级不能为空', trigger: ['blur', 'change'] }],
+  alarmNoteMethod: [{ required: true, message: '报警提示方式不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmLevel: '', // 报警等级
+    alarmNoteMethod: '', // 报警提示方式
+    isSound: '0',
+    isSend: '0',
+    isText: '0',
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+const alarmNoteMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '弹窗',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '消息提醒',
+    id: '2',
+    value: '2',
+  },
+]) // 报警类别
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警等级`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警等级" prop="alarmLevel">
+            <el-input
+              v-model.trim="dataForm.alarmLevel" type="text" placeholder="报警等级" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警提示方式" prop="alarmNoteMethod">
+            <el-select
+              v-model.trim="dataForm.alarmNoteMethod" placeholder="报警提示方式" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmNoteMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警音效" prop="isSound">
+            <el-switch v-model="dataForm.isSound" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警推送" prop="isSend">
+            <el-switch v-model="dataForm.isSend" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警短信" prop="isText">
+            <el-switch v-model="dataForm.isText" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
new file mode 100644
index 0000000..59c523f
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
@@ -0,0 +1,198 @@
+<!--
+  Description: 报警类型管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmType">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmType, editAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmCategory: '', // 报警类别
+  alarmType: '', // 报警类型
+  deviceTypeIds: [] as any, // 设备类型ids
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmCategory: [{ required: true, message: '报警类别不能为空', trigger: ['blur', 'change'] }],
+  alarmType: [{ required: true, message: '报警类型不能为空', trigger: ['blur', 'change'] }],
+  deviceTypeIds: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmCategory: '', // 报警类别
+    alarmType: '', // 报警类型
+    deviceTypeIds: [] as any, // 设备类型ids
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+    dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
+    // dataForm.value.deviceTypeIds ? dataForm.value.deviceTypeIds : []
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmType(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmType(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+
+const fetchDict = () => {
+  // 报警类别
+  getDictByCode('alarmCategory').then((res) => {
+    alarmCategoryList.value = res.data
+  })
+  // 设备类型
+  getDeviceTypeListPage({ offset: 1, limit: 9999 }).then((res) => {
+    deviceTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.typeName,
+      id: item.id,
+      value: item.id,
+    }))
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警类型`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警类别" prop="alarmCategory">
+            <el-select
+              v-model.trim="dataForm.alarmCategory" placeholder="报警类别" style="width: 100%;" clearable
+              filterable :disabled="dialogStatus === 'create' ? false : true"
+            >
+              <el-option v-for="item in alarmCategoryList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="设备类型" prop="deviceTypeIds">
+            <el-select
+              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable :multiple="dialogStatus === 'edit' ? false : true"
+              filterable :disabled="dialogStatus === 'create' ? false : true"
+            >
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警类型" prop="alarmType">
+            <el-input v-model.trim="dataForm.alarmType" type="text" placeholder="报警类型" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

diff --git a/src/api/home/rule/alarm.ts b/src/api/home/rule/alarm.ts
new file mode 100644
index 0000000..f2041d0
--- /dev/null
+++ b/src/api/home/rule/alarm.ts
@@ -0,0 +1,115 @@
+/**
+ * 规则引擎--报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRule/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 停用或者启用
+export function switchStatus(data: any) {
+  return request({
+    url: '/system/alarmRule/stop',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRule/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建
+export function addAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警类型管理列表
+export function getAlarmTypeListPage(data: any) {
+  return request({
+    url: `/system/alarmType/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警类型
+export function removeAlarmType(id: string) {
+  return request({
+    url: '/system/alarmType/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警类型
+export function addAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警类型
+export function editAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警等级管理列表
+export function getAlarmLevelListPage(data: any) {
+  return request({
+    url: `/system/alarmLevelControl/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警等级
+export function removeAlarmLevel(id: string) {
+  return request({
+    url: '/system/alarmLevelControl/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警等级
+export function addAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警等级
+export function editAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/rule/special.ts b/src/api/home/rule/special.ts
new file mode 100644
index 0000000..5ecd2a0
--- /dev/null
+++ b/src/api/home/rule/special.ts
@@ -0,0 +1,39 @@
+/**
+ * 规则引擎--特殊报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getSpecialAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRuleDevice/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeSpecialAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRuleDevice/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新增
+export function addSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 662d4c7..6f9660b 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -255,6 +255,9 @@
   })
   // 绘制线
   resetDrawLine()
+  setTimeout(() => {
+    pageIsFirst.value = false
+  }, 2000)
 }
 defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
@@ -270,7 +273,7 @@
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
-        <span>{{ item.name }}</span>
+        <span style="margin-left: 5px;">{{ item.name }}</span>
       </div>
     </div>
   </div>
@@ -283,17 +286,17 @@
 }
 
 .legend {
-  background: rgb(68 66 66 / 20%);
+  background: rgb(255 255 255 / 80%);
   position: absolute;
   z-index: 1;
   left: 15px;
   bottom: 10px;
   padding: 0 10px;
-  border-radius: 8px;
+  border-radius: 3px;
 
   .legend-item {
-    margin: 5px 0;
-    font-weight: 700;
+    margin: 10px 0;
+    // font-weight: 700;
     display: flex;
     align-items: center;
 
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
new file mode 100644
index 0000000..c1b129d
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -0,0 +1,148 @@
+<!--
+  Description: 报警规则-报警等级管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmLevelManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmLevelDialog from './editAlarmLevelDialog.vue'
+import { getAlarmLevelListPage, removeAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '报警音效', value: 'isSoundName', align: 'center' },
+  { text: '报警推送', value: 'isSendName', align: 'center' },
+  { text: '报警短信', value: 'isTextName', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      isSendName: item.isSend === '0' ? '关' : '开',
+      isSoundName: item.isSound === '0' ? '关' : '开',
+      isTextName: item.isText === '0' ? '关' : '开',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : item.alarmNoteMethod === '2' ? '消息提醒' : '',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmLevel(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警等级管理" append-to-body>
+    <edit-alarm-level-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
new file mode 100644
index 0000000..f3bc573
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -0,0 +1,140 @@
+<!--
+  Description: 报警规则-报警类型管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmTypeManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmTypeDialog from './editAlarmTypeDialog.vue'
+import { getAlarmTypeListPage, removeAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警类别', value: 'alarmCategoryName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmType(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警类型管理" append-to-body>
+    <edit-alarm-type-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
new file mode 100644
index 0000000..fe60451
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
@@ -0,0 +1,199 @@
+<!--
+  Description: 报警等级管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmLevel">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmLevel, editAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmLevel: '', // 报警等级
+  alarmNoteMethod: '', // 报警提示方式
+  isSound: '0',
+  isSend: '0',
+  isText: '0',
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmLevel: [{ required: true, message: '报警等级不能为空', trigger: ['blur', 'change'] }],
+  alarmNoteMethod: [{ required: true, message: '报警提示方式不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmLevel: '', // 报警等级
+    alarmNoteMethod: '', // 报警提示方式
+    isSound: '0',
+    isSend: '0',
+    isText: '0',
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+const alarmNoteMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '弹窗',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '消息提醒',
+    id: '2',
+    value: '2',
+  },
+]) // 报警类别
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警等级`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警等级" prop="alarmLevel">
+            <el-input
+              v-model.trim="dataForm.alarmLevel" type="text" placeholder="报警等级" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警提示方式" prop="alarmNoteMethod">
+            <el-select
+              v-model.trim="dataForm.alarmNoteMethod" placeholder="报警提示方式" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmNoteMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警音效" prop="isSound">
+            <el-switch v-model="dataForm.isSound" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警推送" prop="isSend">
+            <el-switch v-model="dataForm.isSend" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警短信" prop="isText">
+            <el-switch v-model="dataForm.isText" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
new file mode 100644
index 0000000..59c523f
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
@@ -0,0 +1,198 @@
+<!--
+  Description: 报警类型管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmType">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmType, editAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmCategory: '', // 报警类别
+  alarmType: '', // 报警类型
+  deviceTypeIds: [] as any, // 设备类型ids
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmCategory: [{ required: true, message: '报警类别不能为空', trigger: ['blur', 'change'] }],
+  alarmType: [{ required: true, message: '报警类型不能为空', trigger: ['blur', 'change'] }],
+  deviceTypeIds: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmCategory: '', // 报警类别
+    alarmType: '', // 报警类型
+    deviceTypeIds: [] as any, // 设备类型ids
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+    dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
+    // dataForm.value.deviceTypeIds ? dataForm.value.deviceTypeIds : []
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmType(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmType(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+
+const fetchDict = () => {
+  // 报警类别
+  getDictByCode('alarmCategory').then((res) => {
+    alarmCategoryList.value = res.data
+  })
+  // 设备类型
+  getDeviceTypeListPage({ offset: 1, limit: 9999 }).then((res) => {
+    deviceTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.typeName,
+      id: item.id,
+      value: item.id,
+    }))
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警类型`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警类别" prop="alarmCategory">
+            <el-select
+              v-model.trim="dataForm.alarmCategory" placeholder="报警类别" style="width: 100%;" clearable
+              filterable :disabled="dialogStatus === 'create' ? false : true"
+            >
+              <el-option v-for="item in alarmCategoryList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="设备类型" prop="deviceTypeIds">
+            <el-select
+              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable :multiple="dialogStatus === 'edit' ? false : true"
+              filterable :disabled="dialogStatus === 'create' ? false : true"
+            >
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警类型" prop="alarmType">
+            <el-input v-model.trim="dataForm.alarmType" type="text" placeholder="报警类型" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editDialog.vue b/src/views/home/rule/alarm/components/editDialog.vue
new file mode 100644
index 0000000..d4357eb
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editDialog.vue
@@ -0,0 +1,277 @@
+<!--
+  Description: 报警规则管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmRuleDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getProductListPage } from '@/api/home/device/product'
+import { addAlarmRule, editAlarmRule, getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmName: '', // 报警名称
+  alarmTypeId: '', // 报警类型
+  alarmLevelId: '', // 报警等级id
+  alarmNoteMethod: '', // 报警提醒方式
+  productId: '', // 产品
+  alarmJudgeMethod: '', // 报警判断方式
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmName: [{ required: true, message: '报警名称不能为空', trigger: ['blur', 'change'] }],
+  alarmTypeId: [{ required: true, message: '报警类型不能为空', trigger: ['blur', 'change'] }],
+  alarmLevelId: [{ required: true, message: '报警等级不能为空', trigger: ['blur', 'change'] }],
+  productId: [{ required: true, message: '产品不能为空', trigger: ['blur', 'change'] }],
+  alarmJudgeMethod: [{ required: true, message: '报警判断方式不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmName: '', // 报警名称
+    alarmTypeId: '', // 报警类型
+    alarmLevelId: '', // 报警等级id
+    alarmNoteMethod: '', // 报警提醒方式
+    productId: '', // 产品
+    alarmJudgeMethod: '', // 报警判断方式
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmRule(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmRule(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+const productList = ref<{ id: string; name: string; value: string }[]>([]) // 产品
+const alarmNoteMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '弹窗',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '消息提醒',
+    id: '2',
+    value: '2',
+  },
+])
+const alarmJudgeMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '系统',
+    value: '1',
+    id: '1',
+  },
+  {
+    name: '设备',
+    value: '0',
+    id: '0',
+  },
+])
+const fetchDict = () => {
+  // 报警等级
+  getAlarmLevelListPage({ offset: 1, limit: 9999 }).then((res) => {
+    alarmLevelList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmLevel,
+      value: item.id,
+      id: item.id,
+      alarmNoteMethod: item.alarmNoteMethod,
+    }))
+  })
+  // 报警类型
+  getAlarmTypeListPage({ offset: 1, limit: 9999 }).then((res) => {
+    alarmTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmType,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+  // 产品
+  getProductListPage({ limit: 9999, offset: 1 }).then((res) => {
+    productList.value = res.data.rows.map((item: any) => ({
+      name: `${item.deviceTypeName}-${item.deviceModel}/${item.manufacturerName}`,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+}
+fetchDict()
+
+// 监听报警等级，填充报警提示方式
+watch(() => dataForm.value.alarmLevelId, (newVal) => {
+  if (newVal) {
+    dataForm.value.alarmNoteMethod = alarmLevelList.value.filter((item: { id: string; name: string; value: string }) => item.id === dataForm.value.alarmLevelId)[0].alarmNoteMethod
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警规则`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警名称" prop="alarmName">
+            <el-input v-model.trim="dataForm.alarmName" type="text" placeholder="报警名称" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警类型" prop="alarmTypeId">
+            <el-select v-model.trim="dataForm.alarmTypeId" placeholder="" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警等级" prop="alarmLevelId">
+            <el-select
+              v-model.trim="dataForm.alarmLevelId" placeholder="报警等级" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmLevelList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警提示方式" prop="alarmNoteMethod">
+            <!-- <el-input v-model.trim="dataForm.alarmNoteMethod" type="text" placeholder="报警提示方式" clearable
+              style="width: 100%;" disabled /> -->
+            <el-select
+              v-model.trim="dataForm.alarmNoteMethod" placeholder="报警提示方式" style="width: 100%;" clearable
+              filterable disabled
+            >
+              <el-option v-for="item in alarmNoteMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="产品" prop="productId">
+            <el-select v-model.trim="dataForm.productId" placeholder="产品" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警判断方式" prop="alarmJudgeMethod">
+            <el-select
+              v-model.trim="dataForm.alarmJudgeMethod" placeholder="报警判断方式" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmJudgeMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

diff --git a/src/api/home/rule/alarm.ts b/src/api/home/rule/alarm.ts
new file mode 100644
index 0000000..f2041d0
--- /dev/null
+++ b/src/api/home/rule/alarm.ts
@@ -0,0 +1,115 @@
+/**
+ * 规则引擎--报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRule/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 停用或者启用
+export function switchStatus(data: any) {
+  return request({
+    url: '/system/alarmRule/stop',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRule/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建
+export function addAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警类型管理列表
+export function getAlarmTypeListPage(data: any) {
+  return request({
+    url: `/system/alarmType/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警类型
+export function removeAlarmType(id: string) {
+  return request({
+    url: '/system/alarmType/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警类型
+export function addAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警类型
+export function editAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警等级管理列表
+export function getAlarmLevelListPage(data: any) {
+  return request({
+    url: `/system/alarmLevelControl/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警等级
+export function removeAlarmLevel(id: string) {
+  return request({
+    url: '/system/alarmLevelControl/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警等级
+export function addAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警等级
+export function editAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/rule/special.ts b/src/api/home/rule/special.ts
new file mode 100644
index 0000000..5ecd2a0
--- /dev/null
+++ b/src/api/home/rule/special.ts
@@ -0,0 +1,39 @@
+/**
+ * 规则引擎--特殊报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getSpecialAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRuleDevice/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeSpecialAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRuleDevice/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新增
+export function addSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 662d4c7..6f9660b 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -255,6 +255,9 @@
   })
   // 绘制线
   resetDrawLine()
+  setTimeout(() => {
+    pageIsFirst.value = false
+  }, 2000)
 }
 defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
@@ -270,7 +273,7 @@
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
-        <span>{{ item.name }}</span>
+        <span style="margin-left: 5px;">{{ item.name }}</span>
       </div>
     </div>
   </div>
@@ -283,17 +286,17 @@
 }
 
 .legend {
-  background: rgb(68 66 66 / 20%);
+  background: rgb(255 255 255 / 80%);
   position: absolute;
   z-index: 1;
   left: 15px;
   bottom: 10px;
   padding: 0 10px;
-  border-radius: 8px;
+  border-radius: 3px;
 
   .legend-item {
-    margin: 5px 0;
-    font-weight: 700;
+    margin: 10px 0;
+    // font-weight: 700;
     display: flex;
     align-items: center;
 
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
new file mode 100644
index 0000000..c1b129d
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -0,0 +1,148 @@
+<!--
+  Description: 报警规则-报警等级管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmLevelManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmLevelDialog from './editAlarmLevelDialog.vue'
+import { getAlarmLevelListPage, removeAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '报警音效', value: 'isSoundName', align: 'center' },
+  { text: '报警推送', value: 'isSendName', align: 'center' },
+  { text: '报警短信', value: 'isTextName', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      isSendName: item.isSend === '0' ? '关' : '开',
+      isSoundName: item.isSound === '0' ? '关' : '开',
+      isTextName: item.isText === '0' ? '关' : '开',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : item.alarmNoteMethod === '2' ? '消息提醒' : '',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmLevel(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警等级管理" append-to-body>
+    <edit-alarm-level-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
new file mode 100644
index 0000000..f3bc573
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -0,0 +1,140 @@
+<!--
+  Description: 报警规则-报警类型管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmTypeManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmTypeDialog from './editAlarmTypeDialog.vue'
+import { getAlarmTypeListPage, removeAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警类别', value: 'alarmCategoryName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmType(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警类型管理" append-to-body>
+    <edit-alarm-type-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
new file mode 100644
index 0000000..fe60451
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
@@ -0,0 +1,199 @@
+<!--
+  Description: 报警等级管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmLevel">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmLevel, editAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmLevel: '', // 报警等级
+  alarmNoteMethod: '', // 报警提示方式
+  isSound: '0',
+  isSend: '0',
+  isText: '0',
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmLevel: [{ required: true, message: '报警等级不能为空', trigger: ['blur', 'change'] }],
+  alarmNoteMethod: [{ required: true, message: '报警提示方式不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmLevel: '', // 报警等级
+    alarmNoteMethod: '', // 报警提示方式
+    isSound: '0',
+    isSend: '0',
+    isText: '0',
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+const alarmNoteMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '弹窗',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '消息提醒',
+    id: '2',
+    value: '2',
+  },
+]) // 报警类别
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警等级`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警等级" prop="alarmLevel">
+            <el-input
+              v-model.trim="dataForm.alarmLevel" type="text" placeholder="报警等级" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警提示方式" prop="alarmNoteMethod">
+            <el-select
+              v-model.trim="dataForm.alarmNoteMethod" placeholder="报警提示方式" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmNoteMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警音效" prop="isSound">
+            <el-switch v-model="dataForm.isSound" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警推送" prop="isSend">
+            <el-switch v-model="dataForm.isSend" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警短信" prop="isText">
+            <el-switch v-model="dataForm.isText" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
new file mode 100644
index 0000000..59c523f
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
@@ -0,0 +1,198 @@
+<!--
+  Description: 报警类型管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmType">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmType, editAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmCategory: '', // 报警类别
+  alarmType: '', // 报警类型
+  deviceTypeIds: [] as any, // 设备类型ids
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmCategory: [{ required: true, message: '报警类别不能为空', trigger: ['blur', 'change'] }],
+  alarmType: [{ required: true, message: '报警类型不能为空', trigger: ['blur', 'change'] }],
+  deviceTypeIds: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmCategory: '', // 报警类别
+    alarmType: '', // 报警类型
+    deviceTypeIds: [] as any, // 设备类型ids
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+    dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
+    // dataForm.value.deviceTypeIds ? dataForm.value.deviceTypeIds : []
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmType(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmType(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+
+const fetchDict = () => {
+  // 报警类别
+  getDictByCode('alarmCategory').then((res) => {
+    alarmCategoryList.value = res.data
+  })
+  // 设备类型
+  getDeviceTypeListPage({ offset: 1, limit: 9999 }).then((res) => {
+    deviceTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.typeName,
+      id: item.id,
+      value: item.id,
+    }))
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警类型`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警类别" prop="alarmCategory">
+            <el-select
+              v-model.trim="dataForm.alarmCategory" placeholder="报警类别" style="width: 100%;" clearable
+              filterable :disabled="dialogStatus === 'create' ? false : true"
+            >
+              <el-option v-for="item in alarmCategoryList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="设备类型" prop="deviceTypeIds">
+            <el-select
+              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable :multiple="dialogStatus === 'edit' ? false : true"
+              filterable :disabled="dialogStatus === 'create' ? false : true"
+            >
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警类型" prop="alarmType">
+            <el-input v-model.trim="dataForm.alarmType" type="text" placeholder="报警类型" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editDialog.vue b/src/views/home/rule/alarm/components/editDialog.vue
new file mode 100644
index 0000000..d4357eb
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editDialog.vue
@@ -0,0 +1,277 @@
+<!--
+  Description: 报警规则管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmRuleDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getProductListPage } from '@/api/home/device/product'
+import { addAlarmRule, editAlarmRule, getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmName: '', // 报警名称
+  alarmTypeId: '', // 报警类型
+  alarmLevelId: '', // 报警等级id
+  alarmNoteMethod: '', // 报警提醒方式
+  productId: '', // 产品
+  alarmJudgeMethod: '', // 报警判断方式
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmName: [{ required: true, message: '报警名称不能为空', trigger: ['blur', 'change'] }],
+  alarmTypeId: [{ required: true, message: '报警类型不能为空', trigger: ['blur', 'change'] }],
+  alarmLevelId: [{ required: true, message: '报警等级不能为空', trigger: ['blur', 'change'] }],
+  productId: [{ required: true, message: '产品不能为空', trigger: ['blur', 'change'] }],
+  alarmJudgeMethod: [{ required: true, message: '报警判断方式不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmName: '', // 报警名称
+    alarmTypeId: '', // 报警类型
+    alarmLevelId: '', // 报警等级id
+    alarmNoteMethod: '', // 报警提醒方式
+    productId: '', // 产品
+    alarmJudgeMethod: '', // 报警判断方式
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmRule(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmRule(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+const productList = ref<{ id: string; name: string; value: string }[]>([]) // 产品
+const alarmNoteMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '弹窗',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '消息提醒',
+    id: '2',
+    value: '2',
+  },
+])
+const alarmJudgeMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '系统',
+    value: '1',
+    id: '1',
+  },
+  {
+    name: '设备',
+    value: '0',
+    id: '0',
+  },
+])
+const fetchDict = () => {
+  // 报警等级
+  getAlarmLevelListPage({ offset: 1, limit: 9999 }).then((res) => {
+    alarmLevelList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmLevel,
+      value: item.id,
+      id: item.id,
+      alarmNoteMethod: item.alarmNoteMethod,
+    }))
+  })
+  // 报警类型
+  getAlarmTypeListPage({ offset: 1, limit: 9999 }).then((res) => {
+    alarmTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmType,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+  // 产品
+  getProductListPage({ limit: 9999, offset: 1 }).then((res) => {
+    productList.value = res.data.rows.map((item: any) => ({
+      name: `${item.deviceTypeName}-${item.deviceModel}/${item.manufacturerName}`,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+}
+fetchDict()
+
+// 监听报警等级，填充报警提示方式
+watch(() => dataForm.value.alarmLevelId, (newVal) => {
+  if (newVal) {
+    dataForm.value.alarmNoteMethod = alarmLevelList.value.filter((item: { id: string; name: string; value: string }) => item.id === dataForm.value.alarmLevelId)[0].alarmNoteMethod
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警规则`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警名称" prop="alarmName">
+            <el-input v-model.trim="dataForm.alarmName" type="text" placeholder="报警名称" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警类型" prop="alarmTypeId">
+            <el-select v-model.trim="dataForm.alarmTypeId" placeholder="" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警等级" prop="alarmLevelId">
+            <el-select
+              v-model.trim="dataForm.alarmLevelId" placeholder="报警等级" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmLevelList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警提示方式" prop="alarmNoteMethod">
+            <!-- <el-input v-model.trim="dataForm.alarmNoteMethod" type="text" placeholder="报警提示方式" clearable
+              style="width: 100%;" disabled /> -->
+            <el-select
+              v-model.trim="dataForm.alarmNoteMethod" placeholder="报警提示方式" style="width: 100%;" clearable
+              filterable disabled
+            >
+              <el-option v-for="item in alarmNoteMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="产品" prop="productId">
+            <el-select v-model.trim="dataForm.productId" placeholder="产品" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警判断方式" prop="alarmJudgeMethod">
+            <el-select
+              v-model.trim="dataForm.alarmJudgeMethod" placeholder="报警判断方式" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmJudgeMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/index.vue b/src/views/home/rule/alarm/index.vue
index 98f2b83..dbcfed3 100644
--- a/src/views/home/rule/alarm/index.vue
+++ b/src/views/home/rule/alarm/index.vue
@@ -5,19 +5,25 @@
  -->
 <script lang="ts" setup name="RuleAlarmManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
-import { getDeviceTypeListPage } from '@/api/home/device/type'
-const deviceTypeList = ref<any[]>([]) // 设备类型列表
+import alarmType from './components/alarmTypeList.vue'
+import alarmLevel from './components/alarmLevelList.vue'
+import editDialog from './components/editDialog.vue'
+import { getDictByCode } from '@/api/system/dict'
+import { getAlarmLevelListPage, getAlarmRuleListPage, getAlarmTypeListPage, removeAlarmRule, switchStatus } from '@/api/home/rule/alarm'
+const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
+const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 // 表格数据
 const list = ref([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '报警类型', value: '', align: 'center' },
-  { text: '报警名称', value: 'deviceTypeName', align: 'center' },
-  { text: '报警等级', value: '', align: 'center' },
-  { text: '报警提示方式', value: '', align: 'center' },
-  { text: '状态', value: '', align: 'center' },
-  { text: '创建时间', value: '', align: 'center' },
+  { text: '报警类型', value: 'alarmTypeName', align: 'center' },
+  { text: '报警名称', value: 'alarmName', align: 'center' },
+  { text: '报警等级', value: 'alarmLevelName', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '状态', value: 'stateName', align: 'center' },
+  { text: '创建时间', value: 'ts', align: 'center' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -30,38 +36,33 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
+  alarmLevelId: '',
+  alarmName: '',
 })
-// 开始结束时间
-// const datetimerange = ref()
-// watch(() => datetimerange.value, (newVal) => {
-//   listQuery.value.begTime = ''
-//   listQuery.value.endTime = ''
-//   if (Array.isArray(newVal)) {
-//     if (newVal.length) {
-//       listQuery.value.begTime = `${newVal[0]} 00:00:00`
-//       listQuery.value.endTime = `${newVal[1]} 23:59:59`
-//     }
-//   }
-// })
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
-  // getOperationListPage(listQuery.value).then((res) => {
-  //   list.value = res.data.rows.map((item: any) => ({
-  //     ...item,
-  //     deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
-  //   }))
-  //   total.value = res.data.total
-  loadingTable.value = false
-  // }).catch(() => {
-  //   loadingTable.value = false
-  // })
+  getAlarmRuleListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmTypeName: alarmTypeList.value[alarmTypeList.value.findIndex(citem => item.alarmTypeId === citem.id)].name || '',
+      alarmLevelName: alarmLevelList.value[alarmLevelList.value.findIndex(citem => item.alarmLevelId === citem.id)].name || '',
+      stateName: item.state === '1' ? '启用' : '未启用',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : '消息提醒',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
 }
 // 重置查询条件f
 const reset = () => {
   listQuery.value = {
     limit: 20,
     offset: 1,
+    alarmLevelId: '',
+    alarmName: '',
   }
   fetchData()
 }
@@ -75,16 +76,83 @@
   }
   fetchData()
 }
-// 查看轨迹详情
-const detail = (row: any) => {
-
+// 报警类型管理
+const typeRef = ref()
+const showAlarmType = () => {
+  typeRef.value.initDialog()
+}
+// 报警等级管理
+const levelRef = ref()
+const showAlarmLevel = () => {
+  levelRef.value.initDialog()
+}
+// 报警等级/类型确认修改
+const confirmAlarm = async () => {
+  await fetchDict()
+  fetchData()
+}
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmRule(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 新建或编辑
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 停用或者启用
+const switchStatusRow = (row: any) => {
+  ElMessageBox.confirm(
+    `确认要${row.state === '1' ? '停用' : '启用'}该报警吗？`,
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    switchStatus({
+      ids: [row.id],
+      state: row.state === '1' ? '0' : '1',
+    }).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
 }
 // 获取字典
-const fetchDict = async () => {
-  // 获取设备类型
-  const res = await getDeviceTypeListPage({ limit: 9999, offset: 1 })
-  deviceTypeList.value = res.data.rows
+async function fetchDict() {
+  const res = await getDictByCode('alarmCategory')
+  alarmCategoryList.value = res.data
+
+  const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
+  alarmLevelList.value = res1.data.rows.map((item: any) => ({
+    name: item.alarmLevel,
+    value: item.id,
+    id: item.id,
+  }))
+
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
+  alarmTypeList.value = res2.data.rows.map((item: any) => ({
+    name: item.alarmType,
+    value: item.id,
+    id: item.id,
+  }))
 }
+
 onMounted(async () => {
   await fetchDict()
   fetchData()
@@ -94,17 +162,23 @@
 <template>
   <!-- 布局 -->
   <app-container>
+    <!-- 报警类型弹窗 -->
+    <alarm-type ref="typeRef" @refresh="confirmAlarm" />
+    <!-- 报警等级弹窗 -->
+    <alarm-level ref="levelRef" @refresh="confirmAlarm" />
+    <!-- 新建或编辑弹窗 -->
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-input v-model="listQuery.devcode" placeholder="报警名称" clearable />
+        <el-input v-model="listQuery.alarmName" placeholder="报警名称" clearable />
       </search-item>
       <search-item>
         <el-select
-          v-model="listQuery.deviceType" placeholder="报警等级" clearable filterable class="select"
+          v-model="listQuery.alarmLevelId" placeholder="报警等级" clearable filterable class="select"
           style="width: 192px;"
         >
-          <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
+          <el-option v-for="item in alarmLevelList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </search-item>
     </search-area>
@@ -116,13 +190,13 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="showAlarmType">
             报警类型管理
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="showAlarmLevel">
             报警等级管理
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="detailRow('create', {})">
             新增
           </el-button>
         </div>
@@ -142,13 +216,13 @@
         <template #columns>
           <el-table-column label="操作" width="140" align="center">
             <template #default="scope">
-              <el-button type="primary" link size="small">
-                停用
+              <el-button type="primary" link size="small" @click="switchStatusRow(scope.row)">
+                {{ scope.row.state === '1' ? '停用' : '启用' }}
               </el-button>
-              <el-button type="primary" link size="small" @click="detail(scope.row)">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
                 编辑
               </el-button>
-              <el-button type="danger" link size="small">
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
                 删除
               </el-button>
             </template>

diff --git a/src/api/home/rule/alarm.ts b/src/api/home/rule/alarm.ts
new file mode 100644
index 0000000..f2041d0
--- /dev/null
+++ b/src/api/home/rule/alarm.ts
@@ -0,0 +1,115 @@
+/**
+ * 规则引擎--报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRule/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 停用或者启用
+export function switchStatus(data: any) {
+  return request({
+    url: '/system/alarmRule/stop',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRule/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建
+export function addAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警类型管理列表
+export function getAlarmTypeListPage(data: any) {
+  return request({
+    url: `/system/alarmType/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警类型
+export function removeAlarmType(id: string) {
+  return request({
+    url: '/system/alarmType/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警类型
+export function addAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警类型
+export function editAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警等级管理列表
+export function getAlarmLevelListPage(data: any) {
+  return request({
+    url: `/system/alarmLevelControl/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警等级
+export function removeAlarmLevel(id: string) {
+  return request({
+    url: '/system/alarmLevelControl/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警等级
+export function addAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警等级
+export function editAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/rule/special.ts b/src/api/home/rule/special.ts
new file mode 100644
index 0000000..5ecd2a0
--- /dev/null
+++ b/src/api/home/rule/special.ts
@@ -0,0 +1,39 @@
+/**
+ * 规则引擎--特殊报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getSpecialAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRuleDevice/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeSpecialAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRuleDevice/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新增
+export function addSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 662d4c7..6f9660b 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -255,6 +255,9 @@
   })
   // 绘制线
   resetDrawLine()
+  setTimeout(() => {
+    pageIsFirst.value = false
+  }, 2000)
 }
 defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
@@ -270,7 +273,7 @@
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
-        <span>{{ item.name }}</span>
+        <span style="margin-left: 5px;">{{ item.name }}</span>
       </div>
     </div>
   </div>
@@ -283,17 +286,17 @@
 }
 
 .legend {
-  background: rgb(68 66 66 / 20%);
+  background: rgb(255 255 255 / 80%);
   position: absolute;
   z-index: 1;
   left: 15px;
   bottom: 10px;
   padding: 0 10px;
-  border-radius: 8px;
+  border-radius: 3px;
 
   .legend-item {
-    margin: 5px 0;
-    font-weight: 700;
+    margin: 10px 0;
+    // font-weight: 700;
     display: flex;
     align-items: center;
 
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
new file mode 100644
index 0000000..c1b129d
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -0,0 +1,148 @@
+<!--
+  Description: 报警规则-报警等级管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmLevelManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmLevelDialog from './editAlarmLevelDialog.vue'
+import { getAlarmLevelListPage, removeAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '报警音效', value: 'isSoundName', align: 'center' },
+  { text: '报警推送', value: 'isSendName', align: 'center' },
+  { text: '报警短信', value: 'isTextName', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      isSendName: item.isSend === '0' ? '关' : '开',
+      isSoundName: item.isSound === '0' ? '关' : '开',
+      isTextName: item.isText === '0' ? '关' : '开',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : item.alarmNoteMethod === '2' ? '消息提醒' : '',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmLevel(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警等级管理" append-to-body>
+    <edit-alarm-level-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
new file mode 100644
index 0000000..f3bc573
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -0,0 +1,140 @@
+<!--
+  Description: 报警规则-报警类型管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmTypeManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmTypeDialog from './editAlarmTypeDialog.vue'
+import { getAlarmTypeListPage, removeAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警类别', value: 'alarmCategoryName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmType(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警类型管理" append-to-body>
+    <edit-alarm-type-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
new file mode 100644
index 0000000..fe60451
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
@@ -0,0 +1,199 @@
+<!--
+  Description: 报警等级管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmLevel">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmLevel, editAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmLevel: '', // 报警等级
+  alarmNoteMethod: '', // 报警提示方式
+  isSound: '0',
+  isSend: '0',
+  isText: '0',
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmLevel: [{ required: true, message: '报警等级不能为空', trigger: ['blur', 'change'] }],
+  alarmNoteMethod: [{ required: true, message: '报警提示方式不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmLevel: '', // 报警等级
+    alarmNoteMethod: '', // 报警提示方式
+    isSound: '0',
+    isSend: '0',
+    isText: '0',
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+const alarmNoteMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '弹窗',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '消息提醒',
+    id: '2',
+    value: '2',
+  },
+]) // 报警类别
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警等级`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警等级" prop="alarmLevel">
+            <el-input
+              v-model.trim="dataForm.alarmLevel" type="text" placeholder="报警等级" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警提示方式" prop="alarmNoteMethod">
+            <el-select
+              v-model.trim="dataForm.alarmNoteMethod" placeholder="报警提示方式" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmNoteMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警音效" prop="isSound">
+            <el-switch v-model="dataForm.isSound" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警推送" prop="isSend">
+            <el-switch v-model="dataForm.isSend" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警短信" prop="isText">
+            <el-switch v-model="dataForm.isText" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
new file mode 100644
index 0000000..59c523f
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
@@ -0,0 +1,198 @@
+<!--
+  Description: 报警类型管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmType">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmType, editAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmCategory: '', // 报警类别
+  alarmType: '', // 报警类型
+  deviceTypeIds: [] as any, // 设备类型ids
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmCategory: [{ required: true, message: '报警类别不能为空', trigger: ['blur', 'change'] }],
+  alarmType: [{ required: true, message: '报警类型不能为空', trigger: ['blur', 'change'] }],
+  deviceTypeIds: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmCategory: '', // 报警类别
+    alarmType: '', // 报警类型
+    deviceTypeIds: [] as any, // 设备类型ids
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+    dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
+    // dataForm.value.deviceTypeIds ? dataForm.value.deviceTypeIds : []
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmType(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmType(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+
+const fetchDict = () => {
+  // 报警类别
+  getDictByCode('alarmCategory').then((res) => {
+    alarmCategoryList.value = res.data
+  })
+  // 设备类型
+  getDeviceTypeListPage({ offset: 1, limit: 9999 }).then((res) => {
+    deviceTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.typeName,
+      id: item.id,
+      value: item.id,
+    }))
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警类型`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警类别" prop="alarmCategory">
+            <el-select
+              v-model.trim="dataForm.alarmCategory" placeholder="报警类别" style="width: 100%;" clearable
+              filterable :disabled="dialogStatus === 'create' ? false : true"
+            >
+              <el-option v-for="item in alarmCategoryList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="设备类型" prop="deviceTypeIds">
+            <el-select
+              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable :multiple="dialogStatus === 'edit' ? false : true"
+              filterable :disabled="dialogStatus === 'create' ? false : true"
+            >
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警类型" prop="alarmType">
+            <el-input v-model.trim="dataForm.alarmType" type="text" placeholder="报警类型" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editDialog.vue b/src/views/home/rule/alarm/components/editDialog.vue
new file mode 100644
index 0000000..d4357eb
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editDialog.vue
@@ -0,0 +1,277 @@
+<!--
+  Description: 报警规则管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmRuleDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getProductListPage } from '@/api/home/device/product'
+import { addAlarmRule, editAlarmRule, getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmName: '', // 报警名称
+  alarmTypeId: '', // 报警类型
+  alarmLevelId: '', // 报警等级id
+  alarmNoteMethod: '', // 报警提醒方式
+  productId: '', // 产品
+  alarmJudgeMethod: '', // 报警判断方式
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmName: [{ required: true, message: '报警名称不能为空', trigger: ['blur', 'change'] }],
+  alarmTypeId: [{ required: true, message: '报警类型不能为空', trigger: ['blur', 'change'] }],
+  alarmLevelId: [{ required: true, message: '报警等级不能为空', trigger: ['blur', 'change'] }],
+  productId: [{ required: true, message: '产品不能为空', trigger: ['blur', 'change'] }],
+  alarmJudgeMethod: [{ required: true, message: '报警判断方式不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmName: '', // 报警名称
+    alarmTypeId: '', // 报警类型
+    alarmLevelId: '', // 报警等级id
+    alarmNoteMethod: '', // 报警提醒方式
+    productId: '', // 产品
+    alarmJudgeMethod: '', // 报警判断方式
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmRule(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmRule(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+const productList = ref<{ id: string; name: string; value: string }[]>([]) // 产品
+const alarmNoteMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '弹窗',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '消息提醒',
+    id: '2',
+    value: '2',
+  },
+])
+const alarmJudgeMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '系统',
+    value: '1',
+    id: '1',
+  },
+  {
+    name: '设备',
+    value: '0',
+    id: '0',
+  },
+])
+const fetchDict = () => {
+  // 报警等级
+  getAlarmLevelListPage({ offset: 1, limit: 9999 }).then((res) => {
+    alarmLevelList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmLevel,
+      value: item.id,
+      id: item.id,
+      alarmNoteMethod: item.alarmNoteMethod,
+    }))
+  })
+  // 报警类型
+  getAlarmTypeListPage({ offset: 1, limit: 9999 }).then((res) => {
+    alarmTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmType,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+  // 产品
+  getProductListPage({ limit: 9999, offset: 1 }).then((res) => {
+    productList.value = res.data.rows.map((item: any) => ({
+      name: `${item.deviceTypeName}-${item.deviceModel}/${item.manufacturerName}`,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+}
+fetchDict()
+
+// 监听报警等级，填充报警提示方式
+watch(() => dataForm.value.alarmLevelId, (newVal) => {
+  if (newVal) {
+    dataForm.value.alarmNoteMethod = alarmLevelList.value.filter((item: { id: string; name: string; value: string }) => item.id === dataForm.value.alarmLevelId)[0].alarmNoteMethod
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警规则`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警名称" prop="alarmName">
+            <el-input v-model.trim="dataForm.alarmName" type="text" placeholder="报警名称" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警类型" prop="alarmTypeId">
+            <el-select v-model.trim="dataForm.alarmTypeId" placeholder="" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警等级" prop="alarmLevelId">
+            <el-select
+              v-model.trim="dataForm.alarmLevelId" placeholder="报警等级" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmLevelList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警提示方式" prop="alarmNoteMethod">
+            <!-- <el-input v-model.trim="dataForm.alarmNoteMethod" type="text" placeholder="报警提示方式" clearable
+              style="width: 100%;" disabled /> -->
+            <el-select
+              v-model.trim="dataForm.alarmNoteMethod" placeholder="报警提示方式" style="width: 100%;" clearable
+              filterable disabled
+            >
+              <el-option v-for="item in alarmNoteMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="产品" prop="productId">
+            <el-select v-model.trim="dataForm.productId" placeholder="产品" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警判断方式" prop="alarmJudgeMethod">
+            <el-select
+              v-model.trim="dataForm.alarmJudgeMethod" placeholder="报警判断方式" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmJudgeMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/index.vue b/src/views/home/rule/alarm/index.vue
index 98f2b83..dbcfed3 100644
--- a/src/views/home/rule/alarm/index.vue
+++ b/src/views/home/rule/alarm/index.vue
@@ -5,19 +5,25 @@
  -->
 <script lang="ts" setup name="RuleAlarmManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
-import { getDeviceTypeListPage } from '@/api/home/device/type'
-const deviceTypeList = ref<any[]>([]) // 设备类型列表
+import alarmType from './components/alarmTypeList.vue'
+import alarmLevel from './components/alarmLevelList.vue'
+import editDialog from './components/editDialog.vue'
+import { getDictByCode } from '@/api/system/dict'
+import { getAlarmLevelListPage, getAlarmRuleListPage, getAlarmTypeListPage, removeAlarmRule, switchStatus } from '@/api/home/rule/alarm'
+const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
+const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 // 表格数据
 const list = ref([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '报警类型', value: '', align: 'center' },
-  { text: '报警名称', value: 'deviceTypeName', align: 'center' },
-  { text: '报警等级', value: '', align: 'center' },
-  { text: '报警提示方式', value: '', align: 'center' },
-  { text: '状态', value: '', align: 'center' },
-  { text: '创建时间', value: '', align: 'center' },
+  { text: '报警类型', value: 'alarmTypeName', align: 'center' },
+  { text: '报警名称', value: 'alarmName', align: 'center' },
+  { text: '报警等级', value: 'alarmLevelName', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '状态', value: 'stateName', align: 'center' },
+  { text: '创建时间', value: 'ts', align: 'center' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -30,38 +36,33 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
+  alarmLevelId: '',
+  alarmName: '',
 })
-// 开始结束时间
-// const datetimerange = ref()
-// watch(() => datetimerange.value, (newVal) => {
-//   listQuery.value.begTime = ''
-//   listQuery.value.endTime = ''
-//   if (Array.isArray(newVal)) {
-//     if (newVal.length) {
-//       listQuery.value.begTime = `${newVal[0]} 00:00:00`
-//       listQuery.value.endTime = `${newVal[1]} 23:59:59`
-//     }
-//   }
-// })
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
-  // getOperationListPage(listQuery.value).then((res) => {
-  //   list.value = res.data.rows.map((item: any) => ({
-  //     ...item,
-  //     deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
-  //   }))
-  //   total.value = res.data.total
-  loadingTable.value = false
-  // }).catch(() => {
-  //   loadingTable.value = false
-  // })
+  getAlarmRuleListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmTypeName: alarmTypeList.value[alarmTypeList.value.findIndex(citem => item.alarmTypeId === citem.id)].name || '',
+      alarmLevelName: alarmLevelList.value[alarmLevelList.value.findIndex(citem => item.alarmLevelId === citem.id)].name || '',
+      stateName: item.state === '1' ? '启用' : '未启用',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : '消息提醒',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
 }
 // 重置查询条件f
 const reset = () => {
   listQuery.value = {
     limit: 20,
     offset: 1,
+    alarmLevelId: '',
+    alarmName: '',
   }
   fetchData()
 }
@@ -75,16 +76,83 @@
   }
   fetchData()
 }
-// 查看轨迹详情
-const detail = (row: any) => {
-
+// 报警类型管理
+const typeRef = ref()
+const showAlarmType = () => {
+  typeRef.value.initDialog()
+}
+// 报警等级管理
+const levelRef = ref()
+const showAlarmLevel = () => {
+  levelRef.value.initDialog()
+}
+// 报警等级/类型确认修改
+const confirmAlarm = async () => {
+  await fetchDict()
+  fetchData()
+}
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmRule(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 新建或编辑
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 停用或者启用
+const switchStatusRow = (row: any) => {
+  ElMessageBox.confirm(
+    `确认要${row.state === '1' ? '停用' : '启用'}该报警吗？`,
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    switchStatus({
+      ids: [row.id],
+      state: row.state === '1' ? '0' : '1',
+    }).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
 }
 // 获取字典
-const fetchDict = async () => {
-  // 获取设备类型
-  const res = await getDeviceTypeListPage({ limit: 9999, offset: 1 })
-  deviceTypeList.value = res.data.rows
+async function fetchDict() {
+  const res = await getDictByCode('alarmCategory')
+  alarmCategoryList.value = res.data
+
+  const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
+  alarmLevelList.value = res1.data.rows.map((item: any) => ({
+    name: item.alarmLevel,
+    value: item.id,
+    id: item.id,
+  }))
+
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
+  alarmTypeList.value = res2.data.rows.map((item: any) => ({
+    name: item.alarmType,
+    value: item.id,
+    id: item.id,
+  }))
 }
+
 onMounted(async () => {
   await fetchDict()
   fetchData()
@@ -94,17 +162,23 @@
 <template>
   <!-- 布局 -->
   <app-container>
+    <!-- 报警类型弹窗 -->
+    <alarm-type ref="typeRef" @refresh="confirmAlarm" />
+    <!-- 报警等级弹窗 -->
+    <alarm-level ref="levelRef" @refresh="confirmAlarm" />
+    <!-- 新建或编辑弹窗 -->
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-input v-model="listQuery.devcode" placeholder="报警名称" clearable />
+        <el-input v-model="listQuery.alarmName" placeholder="报警名称" clearable />
       </search-item>
       <search-item>
         <el-select
-          v-model="listQuery.deviceType" placeholder="报警等级" clearable filterable class="select"
+          v-model="listQuery.alarmLevelId" placeholder="报警等级" clearable filterable class="select"
           style="width: 192px;"
         >
-          <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
+          <el-option v-for="item in alarmLevelList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </search-item>
     </search-area>
@@ -116,13 +190,13 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="showAlarmType">
             报警类型管理
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="showAlarmLevel">
             报警等级管理
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="detailRow('create', {})">
             新增
           </el-button>
         </div>
@@ -142,13 +216,13 @@
         <template #columns>
           <el-table-column label="操作" width="140" align="center">
             <template #default="scope">
-              <el-button type="primary" link size="small">
-                停用
+              <el-button type="primary" link size="small" @click="switchStatusRow(scope.row)">
+                {{ scope.row.state === '1' ? '停用' : '启用' }}
               </el-button>
-              <el-button type="primary" link size="small" @click="detail(scope.row)">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
                 编辑
               </el-button>
-              <el-button type="danger" link size="small">
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
                 删除
               </el-button>
             </template>
diff --git a/src/views/home/rule/special/components/editDialog.vue b/src/views/home/rule/special/components/editDialog.vue
new file mode 100644
index 0000000..927cb73
--- /dev/null
+++ b/src/views/home/rule/special/components/editDialog.vue
@@ -0,0 +1,420 @@
+<!--
+  Description: 特殊报警规则-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmRuleSPecial">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getAlarmLevelListPage, getAlarmRuleListPage } from '@/api/home/rule/alarm'
+import { addSpecialAlarmRule, editSpecialAlarmRule } from '@/api/home/rule/special'
+import { getDeviceListPage } from '@/api/home/device/device'
+import { getProductListPage } from '@/api/home/device/product'
+import { useCheckList } from '@/utils/useCheckList'
+const emits = defineEmits(['refresh'])
+const deviceList = ref<any[]>([]) // 设备列表
+const productList = ref<any[]>([]) // 产品
+const alarmRuleList = ref<any[]>([]) // 报警规则
+const alarmLevelList = ref<any[]>([]) // 报警等级
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  devcode: '', // 设备编号
+  tagNumber: '', // 位号
+  position: '', // 详细位置
+  alarmLevelId: '', // 报警等级id
+  alarmTypeId: '', // 报警类型
+  alarmThreshold: '', // 报警阈值
+  productId: '',
+  alarmRule: '',
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+  detail: '',
+} // 表头显示标题
+const rules: FormRules = {
+  devcode: [{ required: true, message: '设备编号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    devcode: '', // 设备编号
+    tagNumber: '', // 位号
+    position: '', // 详细位置
+    alarmLevelId: '', // 报警等级id
+    alarmTypeId: '', // 报警类型
+    alarmThreshold: '', // 报警阈值
+    productId: '',
+    alarmRule: '',
+    id: '',
+  }
+}
+const list = ref<any[]>([])
+const columns = ref<any>([
+  { text: '报警规则', value: 'alarmRule', align: 'center', type: 'select', code: 'alarm-rule', required: true },
+  { text: '报警等级', value: 'alarmLevelId', align: 'center', type: 'select', code: 'alarm-level', required: true },
+  { text: '报警阈值', value: 'alarmThreshold', align: 'center', type: 'input', required: true },
+])
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+    list.value = []
+  }
+  else if (dialogStatus.value === 'edit' || dialogStatus.value === 'detail') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+    list.value = [
+      {
+        edit: dialogStatus.value === 'edit',
+        alarmRule: row.alarmRule,
+        alarmLevelId: row.alarmLevelId,
+        alarmThreshold: row.alarmThreshold,
+      },
+    ]
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = (data: any) => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      // 验证数据列
+      if (useCheckList(list.value, columns.value, '报警规则')) {
+        addSpecialAlarmRule(data).then((response) => {
+          if (response.code === 200) {
+            ElMessage({
+              message: '添加成功',
+              type: 'success',
+            })
+            // 通知父组件刷新状态
+            dialogFormVisible.value = false
+            setTimeout(() => {
+              emits('refresh')
+            })
+          }
+        }).catch((_) => { // 异常情况，loading置为false
+        })
+      }
+    }
+  })
+}
+
+// 修改数据
+const updateData = (data: any) => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      if (useCheckList(list.value, columns.value, '报警规则')) {
+        editSpecialAlarmRule(data).then((response) => {
+          if (response.code === 200) {
+            ElMessage({
+              message: '修改成功',
+              type: 'success',
+            })
+            setTimeout(() => {
+              emits('refresh')
+            })
+            dialogFormVisible.value = false
+          }
+        }).catch((_) => { // 异常情况，loading置为false
+        })
+      }
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  const data = list.value.map((item: any) => ({
+    alarmLevelId: item.alarmLevelId,
+    alarmRule: item.alarmRule,
+    alarmRuleName: `${item.alarmRule}[${alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevelId)[0]?.name || ''}]:${item.alarmThreshold}%LEL`,
+    alarmThreshold: item.alarmThreshold,
+    devcode: dataForm.value.devcode,
+    id: dataForm.value.id,
+    position: dataForm.value.position,
+    tagNumber: dataForm.value.tagNumber,
+    devTypeName: deviceList.value.filter((citem: any) => citem.value === dataForm.value.devcode)[0]?.name || '',
+    alarmTypeId: alarmRuleList.value.filter((citem: any) => citem.name === item.alarmRule)[0]?.alarmTypeId || '',
+  }))
+  if (dialogStatus.value === 'edit') {
+    updateData(data)
+  }
+  else if (dialogStatus.value === 'create') {
+    createData(data)
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+// 列表添加行
+const addRow = () => {
+  list.value.push({
+    alarmThreshold: '',
+    alarmLevelId: '',
+    alarmRule: '',
+    edit: true,
+  })
+}
+// 保存行
+const saveRow = (scope: any) => {
+  const row = scope.row as any
+  if (String(row.alarmThreshold) && row.alarmLevelId && row.alarmRule) {
+    list.value[scope.$index].edit = false
+  }
+  else {
+    ElMessage.warning('请先完善当前行数据')
+  }
+}
+// 编辑行
+const editRow = (scope: any) => {
+  list.value[scope.$index].edit = true
+}
+// 删除行
+const removeRow = (scope: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    list.value = list.value.filter((item, index) => index !== scope.$index)
+    ElMessage.success('操作成功')
+  })
+}
+// 字典
+
+const fetchDict = () => {
+  // 设备列表
+  getDeviceListPage({ offset: 1, limit: 9999 }).then((res) => {
+    deviceList.value = res.data.rows.map((item: any) => ({
+      name: item.devTypeName,
+      id: item.id,
+      value: item.devcode,
+      productId: item.productId,
+      position: item.position,
+      tagNumber: item.tagNumber,
+    })).filter((item: any) => item.productId && item.value)
+    // 产品
+    getProductListPage({ limit: 9999, offset: 1 }).then((res) => {
+      productList.value = res.data.rows.map((item: any) => ({
+        name: `${item.deviceTypeName}-${item.deviceModel}/${item.manufacturerName}`,
+        value: item.id,
+        id: item.id,
+      }))
+    })
+    // 报警规则
+    getAlarmRuleListPage({ limit: 9999, offset: 1 }).then((res) => {
+      alarmRuleList.value = res.data.rows.map((item: any) => ({
+        name: item.alarmName,
+        id: item.id,
+        value: item.id,
+        alarmTypeId: item.alarmTypeId,
+      }))
+    })
+    // 报警等级
+    getAlarmLevelListPage({ limit: 9999, offset: 1 }).then((res) => {
+      alarmLevelList.value = res.data.rows.map((item: any) => ({
+        name: item.alarmLevel,
+        id: item.id,
+        value: item.id,
+      }))
+    })
+  })
+}
+fetchDict()
+
+// 监听设备编号，自动填充产品，安装位号，详细地址
+watch(() => dataForm.value.devcode, (newVal) => {
+  if (newVal) {
+    const current = deviceList.value.filter((item: any) => item.value === dataForm.value.devcode)
+    if (current.length) {
+      dataForm.value.productId = current[0].productId
+      dataForm.value.tagNumber = current[0].tagNumber
+      dataForm.value.position = current[0].position
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}特殊报警规则`" append-to-body>
+    <el-form
+      ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right"
+      :disabled="dialogStatus === 'detail'" label-width="110px"
+    >
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="设备编号" prop="devcode">
+            <el-select v-model.trim="dataForm.devcode" placeholder="设备编号" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in deviceList" :key="item.id" :label="item.value" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产品" prop="productId">
+            <el-select
+              v-model.trim="dataForm.productId" placeholder="产品" style="width: 100%;" clearable filterable
+              disabled
+            >
+              <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="安装位号" prop="tagNumber">
+            <el-input
+              v-model.trim="dataForm.tagNumber" type="text" placeholder="安装位号" style="width: 100%;" disabled
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="详细地址" prop="position">
+            <el-input
+              v-model.trim="dataForm.position" type="text" placeholder="安装位号" style="width: 100%;" disabled
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警规则" prop="">
+            <div style="width: 100%;">
+              <table-container title=" ">
+                <template #btns-right>
+                  <!-- 操作 -->
+                  <div>
+                    <el-button v-if="dialogStatus === 'create'" type="primary" @click="addRow">
+                      新增
+                    </el-button>
+                  </div>
+                </template>
+                <!-- 查询结果Table显示 -->
+                <normal-table :data="list" :total="0" :columns="[]" :query="{}" :pagination="false">
+                  <template #preColumns>
+                    <el-table-column label="序号" width="55" align="center">
+                      <template #default="scope">
+                        {{ scope.$index + 1 }}
+                      </template>
+                    </el-table-column>
+                  </template>
+                  <template #columns>
+                    <el-table-column v-for="item in columns" :key="item.text" :label="item.text" align="center">
+                      <template #default="scope">
+                        <!-- 报警规则 -->
+                        <template v-if="item.type === 'select' && item.code === 'alarm-rule'">
+                          <el-select
+                            v-model.trim="scope.row[item.value]" placeholder="报警规则" style="width: 100%;"
+                            clearable filterable :disabled="!scope.row.edit"
+                          >
+                            <el-option
+                              v-for="item in alarmRuleList" :key="item.id" :label="item.name"
+                              :value="item.name"
+                            />
+                          </el-select>
+                        </template>
+                        <!-- 报警等级 -->
+                        <template v-if="item.type === 'select' && item.code === 'alarm-level'">
+                          <el-select
+                            v-model.trim="scope.row[item.value]" placeholder="报警等级" style="width: 100%;"
+                            clearable filterable :disabled="!scope.row.edit"
+                          >
+                            <el-option
+                              v-for="item in alarmLevelList" :key="item.id" :label="item.name"
+                              :value="item.value"
+                            />
+                          </el-select>
+                        </template>
+                        <!-- 报警阈值 -->
+                        <div v-if="item.type === 'input'" style="width: 100%;">
+                          <el-input
+                            v-model.trim="scope.row[item.value]" placeholder="报警阈值" clearable type="number"
+                            style="width: 60%;" :disabled="!scope.row.edit"
+                          />
+                          <span>%LEL</span>
+                        </div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column v-if="dialogStatus === 'create'" label="操作" width="140" align="center">
+                      <template #default="scope">
+                        <el-button
+                          v-if="scope.row.edit === true" type="primary" link size="small"
+                          @click="saveRow(scope)"
+                        >
+                          保存
+                        </el-button>
+                        <el-button
+                          v-if="scope.row.edit === false" type="primary" link size="small"
+                          @click="editRow(scope)"
+                        >
+                          编辑
+                        </el-button>
+                        <el-button
+                          v-if="scope.row.edit === true" type="danger" link size="small"
+                          @click="removeRow(scope)"
+                        >
+                          删除
+                        </el-button>
+                      </template>
+                    </el-table-column>
+                  </template>
+                </normal-table>
+              </table-container>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div v-if="dialogStatus !== 'detail'" class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+      <div v-else class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>

diff --git a/src/api/home/rule/alarm.ts b/src/api/home/rule/alarm.ts
new file mode 100644
index 0000000..f2041d0
--- /dev/null
+++ b/src/api/home/rule/alarm.ts
@@ -0,0 +1,115 @@
+/**
+ * 规则引擎--报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRule/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 停用或者启用
+export function switchStatus(data: any) {
+  return request({
+    url: '/system/alarmRule/stop',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRule/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建
+export function addAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警类型管理列表
+export function getAlarmTypeListPage(data: any) {
+  return request({
+    url: `/system/alarmType/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警类型
+export function removeAlarmType(id: string) {
+  return request({
+    url: '/system/alarmType/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警类型
+export function addAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警类型
+export function editAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警等级管理列表
+export function getAlarmLevelListPage(data: any) {
+  return request({
+    url: `/system/alarmLevelControl/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警等级
+export function removeAlarmLevel(id: string) {
+  return request({
+    url: '/system/alarmLevelControl/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警等级
+export function addAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警等级
+export function editAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/rule/special.ts b/src/api/home/rule/special.ts
new file mode 100644
index 0000000..5ecd2a0
--- /dev/null
+++ b/src/api/home/rule/special.ts
@@ -0,0 +1,39 @@
+/**
+ * 规则引擎--特殊报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getSpecialAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRuleDevice/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeSpecialAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRuleDevice/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新增
+export function addSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 662d4c7..6f9660b 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -255,6 +255,9 @@
   })
   // 绘制线
   resetDrawLine()
+  setTimeout(() => {
+    pageIsFirst.value = false
+  }, 2000)
 }
 defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
@@ -270,7 +273,7 @@
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
-        <span>{{ item.name }}</span>
+        <span style="margin-left: 5px;">{{ item.name }}</span>
       </div>
     </div>
   </div>
@@ -283,17 +286,17 @@
 }
 
 .legend {
-  background: rgb(68 66 66 / 20%);
+  background: rgb(255 255 255 / 80%);
   position: absolute;
   z-index: 1;
   left: 15px;
   bottom: 10px;
   padding: 0 10px;
-  border-radius: 8px;
+  border-radius: 3px;
 
   .legend-item {
-    margin: 5px 0;
-    font-weight: 700;
+    margin: 10px 0;
+    // font-weight: 700;
     display: flex;
     align-items: center;
 
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
new file mode 100644
index 0000000..c1b129d
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -0,0 +1,148 @@
+<!--
+  Description: 报警规则-报警等级管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmLevelManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmLevelDialog from './editAlarmLevelDialog.vue'
+import { getAlarmLevelListPage, removeAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '报警音效', value: 'isSoundName', align: 'center' },
+  { text: '报警推送', value: 'isSendName', align: 'center' },
+  { text: '报警短信', value: 'isTextName', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      isSendName: item.isSend === '0' ? '关' : '开',
+      isSoundName: item.isSound === '0' ? '关' : '开',
+      isTextName: item.isText === '0' ? '关' : '开',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : item.alarmNoteMethod === '2' ? '消息提醒' : '',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmLevel(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警等级管理" append-to-body>
+    <edit-alarm-level-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
new file mode 100644
index 0000000..f3bc573
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -0,0 +1,140 @@
+<!--
+  Description: 报警规则-报警类型管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmTypeManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmTypeDialog from './editAlarmTypeDialog.vue'
+import { getAlarmTypeListPage, removeAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警类别', value: 'alarmCategoryName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmType(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警类型管理" append-to-body>
+    <edit-alarm-type-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
new file mode 100644
index 0000000..fe60451
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
@@ -0,0 +1,199 @@
+<!--
+  Description: 报警等级管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmLevel">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmLevel, editAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmLevel: '', // 报警等级
+  alarmNoteMethod: '', // 报警提示方式
+  isSound: '0',
+  isSend: '0',
+  isText: '0',
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmLevel: [{ required: true, message: '报警等级不能为空', trigger: ['blur', 'change'] }],
+  alarmNoteMethod: [{ required: true, message: '报警提示方式不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmLevel: '', // 报警等级
+    alarmNoteMethod: '', // 报警提示方式
+    isSound: '0',
+    isSend: '0',
+    isText: '0',
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+const alarmNoteMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '弹窗',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '消息提醒',
+    id: '2',
+    value: '2',
+  },
+]) // 报警类别
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警等级`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警等级" prop="alarmLevel">
+            <el-input
+              v-model.trim="dataForm.alarmLevel" type="text" placeholder="报警等级" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警提示方式" prop="alarmNoteMethod">
+            <el-select
+              v-model.trim="dataForm.alarmNoteMethod" placeholder="报警提示方式" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmNoteMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警音效" prop="isSound">
+            <el-switch v-model="dataForm.isSound" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警推送" prop="isSend">
+            <el-switch v-model="dataForm.isSend" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警短信" prop="isText">
+            <el-switch v-model="dataForm.isText" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
new file mode 100644
index 0000000..59c523f
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
@@ -0,0 +1,198 @@
+<!--
+  Description: 报警类型管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmType">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmType, editAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmCategory: '', // 报警类别
+  alarmType: '', // 报警类型
+  deviceTypeIds: [] as any, // 设备类型ids
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmCategory: [{ required: true, message: '报警类别不能为空', trigger: ['blur', 'change'] }],
+  alarmType: [{ required: true, message: '报警类型不能为空', trigger: ['blur', 'change'] }],
+  deviceTypeIds: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmCategory: '', // 报警类别
+    alarmType: '', // 报警类型
+    deviceTypeIds: [] as any, // 设备类型ids
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+    dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
+    // dataForm.value.deviceTypeIds ? dataForm.value.deviceTypeIds : []
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmType(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmType(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+
+const fetchDict = () => {
+  // 报警类别
+  getDictByCode('alarmCategory').then((res) => {
+    alarmCategoryList.value = res.data
+  })
+  // 设备类型
+  getDeviceTypeListPage({ offset: 1, limit: 9999 }).then((res) => {
+    deviceTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.typeName,
+      id: item.id,
+      value: item.id,
+    }))
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警类型`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警类别" prop="alarmCategory">
+            <el-select
+              v-model.trim="dataForm.alarmCategory" placeholder="报警类别" style="width: 100%;" clearable
+              filterable :disabled="dialogStatus === 'create' ? false : true"
+            >
+              <el-option v-for="item in alarmCategoryList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="设备类型" prop="deviceTypeIds">
+            <el-select
+              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable :multiple="dialogStatus === 'edit' ? false : true"
+              filterable :disabled="dialogStatus === 'create' ? false : true"
+            >
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警类型" prop="alarmType">
+            <el-input v-model.trim="dataForm.alarmType" type="text" placeholder="报警类型" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editDialog.vue b/src/views/home/rule/alarm/components/editDialog.vue
new file mode 100644
index 0000000..d4357eb
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editDialog.vue
@@ -0,0 +1,277 @@
+<!--
+  Description: 报警规则管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmRuleDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getProductListPage } from '@/api/home/device/product'
+import { addAlarmRule, editAlarmRule, getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmName: '', // 报警名称
+  alarmTypeId: '', // 报警类型
+  alarmLevelId: '', // 报警等级id
+  alarmNoteMethod: '', // 报警提醒方式
+  productId: '', // 产品
+  alarmJudgeMethod: '', // 报警判断方式
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmName: [{ required: true, message: '报警名称不能为空', trigger: ['blur', 'change'] }],
+  alarmTypeId: [{ required: true, message: '报警类型不能为空', trigger: ['blur', 'change'] }],
+  alarmLevelId: [{ required: true, message: '报警等级不能为空', trigger: ['blur', 'change'] }],
+  productId: [{ required: true, message: '产品不能为空', trigger: ['blur', 'change'] }],
+  alarmJudgeMethod: [{ required: true, message: '报警判断方式不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmName: '', // 报警名称
+    alarmTypeId: '', // 报警类型
+    alarmLevelId: '', // 报警等级id
+    alarmNoteMethod: '', // 报警提醒方式
+    productId: '', // 产品
+    alarmJudgeMethod: '', // 报警判断方式
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmRule(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmRule(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+const productList = ref<{ id: string; name: string; value: string }[]>([]) // 产品
+const alarmNoteMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '弹窗',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '消息提醒',
+    id: '2',
+    value: '2',
+  },
+])
+const alarmJudgeMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '系统',
+    value: '1',
+    id: '1',
+  },
+  {
+    name: '设备',
+    value: '0',
+    id: '0',
+  },
+])
+const fetchDict = () => {
+  // 报警等级
+  getAlarmLevelListPage({ offset: 1, limit: 9999 }).then((res) => {
+    alarmLevelList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmLevel,
+      value: item.id,
+      id: item.id,
+      alarmNoteMethod: item.alarmNoteMethod,
+    }))
+  })
+  // 报警类型
+  getAlarmTypeListPage({ offset: 1, limit: 9999 }).then((res) => {
+    alarmTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmType,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+  // 产品
+  getProductListPage({ limit: 9999, offset: 1 }).then((res) => {
+    productList.value = res.data.rows.map((item: any) => ({
+      name: `${item.deviceTypeName}-${item.deviceModel}/${item.manufacturerName}`,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+}
+fetchDict()
+
+// 监听报警等级，填充报警提示方式
+watch(() => dataForm.value.alarmLevelId, (newVal) => {
+  if (newVal) {
+    dataForm.value.alarmNoteMethod = alarmLevelList.value.filter((item: { id: string; name: string; value: string }) => item.id === dataForm.value.alarmLevelId)[0].alarmNoteMethod
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警规则`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警名称" prop="alarmName">
+            <el-input v-model.trim="dataForm.alarmName" type="text" placeholder="报警名称" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警类型" prop="alarmTypeId">
+            <el-select v-model.trim="dataForm.alarmTypeId" placeholder="" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警等级" prop="alarmLevelId">
+            <el-select
+              v-model.trim="dataForm.alarmLevelId" placeholder="报警等级" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmLevelList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警提示方式" prop="alarmNoteMethod">
+            <!-- <el-input v-model.trim="dataForm.alarmNoteMethod" type="text" placeholder="报警提示方式" clearable
+              style="width: 100%;" disabled /> -->
+            <el-select
+              v-model.trim="dataForm.alarmNoteMethod" placeholder="报警提示方式" style="width: 100%;" clearable
+              filterable disabled
+            >
+              <el-option v-for="item in alarmNoteMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="产品" prop="productId">
+            <el-select v-model.trim="dataForm.productId" placeholder="产品" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警判断方式" prop="alarmJudgeMethod">
+            <el-select
+              v-model.trim="dataForm.alarmJudgeMethod" placeholder="报警判断方式" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmJudgeMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/index.vue b/src/views/home/rule/alarm/index.vue
index 98f2b83..dbcfed3 100644
--- a/src/views/home/rule/alarm/index.vue
+++ b/src/views/home/rule/alarm/index.vue
@@ -5,19 +5,25 @@
  -->
 <script lang="ts" setup name="RuleAlarmManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
-import { getDeviceTypeListPage } from '@/api/home/device/type'
-const deviceTypeList = ref<any[]>([]) // 设备类型列表
+import alarmType from './components/alarmTypeList.vue'
+import alarmLevel from './components/alarmLevelList.vue'
+import editDialog from './components/editDialog.vue'
+import { getDictByCode } from '@/api/system/dict'
+import { getAlarmLevelListPage, getAlarmRuleListPage, getAlarmTypeListPage, removeAlarmRule, switchStatus } from '@/api/home/rule/alarm'
+const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
+const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 // 表格数据
 const list = ref([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '报警类型', value: '', align: 'center' },
-  { text: '报警名称', value: 'deviceTypeName', align: 'center' },
-  { text: '报警等级', value: '', align: 'center' },
-  { text: '报警提示方式', value: '', align: 'center' },
-  { text: '状态', value: '', align: 'center' },
-  { text: '创建时间', value: '', align: 'center' },
+  { text: '报警类型', value: 'alarmTypeName', align: 'center' },
+  { text: '报警名称', value: 'alarmName', align: 'center' },
+  { text: '报警等级', value: 'alarmLevelName', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '状态', value: 'stateName', align: 'center' },
+  { text: '创建时间', value: 'ts', align: 'center' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -30,38 +36,33 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
+  alarmLevelId: '',
+  alarmName: '',
 })
-// 开始结束时间
-// const datetimerange = ref()
-// watch(() => datetimerange.value, (newVal) => {
-//   listQuery.value.begTime = ''
-//   listQuery.value.endTime = ''
-//   if (Array.isArray(newVal)) {
-//     if (newVal.length) {
-//       listQuery.value.begTime = `${newVal[0]} 00:00:00`
-//       listQuery.value.endTime = `${newVal[1]} 23:59:59`
-//     }
-//   }
-// })
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
-  // getOperationListPage(listQuery.value).then((res) => {
-  //   list.value = res.data.rows.map((item: any) => ({
-  //     ...item,
-  //     deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
-  //   }))
-  //   total.value = res.data.total
-  loadingTable.value = false
-  // }).catch(() => {
-  //   loadingTable.value = false
-  // })
+  getAlarmRuleListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmTypeName: alarmTypeList.value[alarmTypeList.value.findIndex(citem => item.alarmTypeId === citem.id)].name || '',
+      alarmLevelName: alarmLevelList.value[alarmLevelList.value.findIndex(citem => item.alarmLevelId === citem.id)].name || '',
+      stateName: item.state === '1' ? '启用' : '未启用',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : '消息提醒',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
 }
 // 重置查询条件f
 const reset = () => {
   listQuery.value = {
     limit: 20,
     offset: 1,
+    alarmLevelId: '',
+    alarmName: '',
   }
   fetchData()
 }
@@ -75,16 +76,83 @@
   }
   fetchData()
 }
-// 查看轨迹详情
-const detail = (row: any) => {
-
+// 报警类型管理
+const typeRef = ref()
+const showAlarmType = () => {
+  typeRef.value.initDialog()
+}
+// 报警等级管理
+const levelRef = ref()
+const showAlarmLevel = () => {
+  levelRef.value.initDialog()
+}
+// 报警等级/类型确认修改
+const confirmAlarm = async () => {
+  await fetchDict()
+  fetchData()
+}
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmRule(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 新建或编辑
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 停用或者启用
+const switchStatusRow = (row: any) => {
+  ElMessageBox.confirm(
+    `确认要${row.state === '1' ? '停用' : '启用'}该报警吗？`,
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    switchStatus({
+      ids: [row.id],
+      state: row.state === '1' ? '0' : '1',
+    }).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
 }
 // 获取字典
-const fetchDict = async () => {
-  // 获取设备类型
-  const res = await getDeviceTypeListPage({ limit: 9999, offset: 1 })
-  deviceTypeList.value = res.data.rows
+async function fetchDict() {
+  const res = await getDictByCode('alarmCategory')
+  alarmCategoryList.value = res.data
+
+  const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
+  alarmLevelList.value = res1.data.rows.map((item: any) => ({
+    name: item.alarmLevel,
+    value: item.id,
+    id: item.id,
+  }))
+
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
+  alarmTypeList.value = res2.data.rows.map((item: any) => ({
+    name: item.alarmType,
+    value: item.id,
+    id: item.id,
+  }))
 }
+
 onMounted(async () => {
   await fetchDict()
   fetchData()
@@ -94,17 +162,23 @@
 <template>
   <!-- 布局 -->
   <app-container>
+    <!-- 报警类型弹窗 -->
+    <alarm-type ref="typeRef" @refresh="confirmAlarm" />
+    <!-- 报警等级弹窗 -->
+    <alarm-level ref="levelRef" @refresh="confirmAlarm" />
+    <!-- 新建或编辑弹窗 -->
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-input v-model="listQuery.devcode" placeholder="报警名称" clearable />
+        <el-input v-model="listQuery.alarmName" placeholder="报警名称" clearable />
       </search-item>
       <search-item>
         <el-select
-          v-model="listQuery.deviceType" placeholder="报警等级" clearable filterable class="select"
+          v-model="listQuery.alarmLevelId" placeholder="报警等级" clearable filterable class="select"
           style="width: 192px;"
         >
-          <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
+          <el-option v-for="item in alarmLevelList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </search-item>
     </search-area>
@@ -116,13 +190,13 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="showAlarmType">
             报警类型管理
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="showAlarmLevel">
             报警等级管理
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="detailRow('create', {})">
             新增
           </el-button>
         </div>
@@ -142,13 +216,13 @@
         <template #columns>
           <el-table-column label="操作" width="140" align="center">
             <template #default="scope">
-              <el-button type="primary" link size="small">
-                停用
+              <el-button type="primary" link size="small" @click="switchStatusRow(scope.row)">
+                {{ scope.row.state === '1' ? '停用' : '启用' }}
               </el-button>
-              <el-button type="primary" link size="small" @click="detail(scope.row)">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
                 编辑
               </el-button>
-              <el-button type="danger" link size="small">
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
                 删除
               </el-button>
             </template>
diff --git a/src/views/home/rule/special/components/editDialog.vue b/src/views/home/rule/special/components/editDialog.vue
new file mode 100644
index 0000000..927cb73
--- /dev/null
+++ b/src/views/home/rule/special/components/editDialog.vue
@@ -0,0 +1,420 @@
+<!--
+  Description: 特殊报警规则-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmRuleSPecial">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getAlarmLevelListPage, getAlarmRuleListPage } from '@/api/home/rule/alarm'
+import { addSpecialAlarmRule, editSpecialAlarmRule } from '@/api/home/rule/special'
+import { getDeviceListPage } from '@/api/home/device/device'
+import { getProductListPage } from '@/api/home/device/product'
+import { useCheckList } from '@/utils/useCheckList'
+const emits = defineEmits(['refresh'])
+const deviceList = ref<any[]>([]) // 设备列表
+const productList = ref<any[]>([]) // 产品
+const alarmRuleList = ref<any[]>([]) // 报警规则
+const alarmLevelList = ref<any[]>([]) // 报警等级
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  devcode: '', // 设备编号
+  tagNumber: '', // 位号
+  position: '', // 详细位置
+  alarmLevelId: '', // 报警等级id
+  alarmTypeId: '', // 报警类型
+  alarmThreshold: '', // 报警阈值
+  productId: '',
+  alarmRule: '',
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+  detail: '',
+} // 表头显示标题
+const rules: FormRules = {
+  devcode: [{ required: true, message: '设备编号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    devcode: '', // 设备编号
+    tagNumber: '', // 位号
+    position: '', // 详细位置
+    alarmLevelId: '', // 报警等级id
+    alarmTypeId: '', // 报警类型
+    alarmThreshold: '', // 报警阈值
+    productId: '',
+    alarmRule: '',
+    id: '',
+  }
+}
+const list = ref<any[]>([])
+const columns = ref<any>([
+  { text: '报警规则', value: 'alarmRule', align: 'center', type: 'select', code: 'alarm-rule', required: true },
+  { text: '报警等级', value: 'alarmLevelId', align: 'center', type: 'select', code: 'alarm-level', required: true },
+  { text: '报警阈值', value: 'alarmThreshold', align: 'center', type: 'input', required: true },
+])
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+    list.value = []
+  }
+  else if (dialogStatus.value === 'edit' || dialogStatus.value === 'detail') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+    list.value = [
+      {
+        edit: dialogStatus.value === 'edit',
+        alarmRule: row.alarmRule,
+        alarmLevelId: row.alarmLevelId,
+        alarmThreshold: row.alarmThreshold,
+      },
+    ]
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = (data: any) => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      // 验证数据列
+      if (useCheckList(list.value, columns.value, '报警规则')) {
+        addSpecialAlarmRule(data).then((response) => {
+          if (response.code === 200) {
+            ElMessage({
+              message: '添加成功',
+              type: 'success',
+            })
+            // 通知父组件刷新状态
+            dialogFormVisible.value = false
+            setTimeout(() => {
+              emits('refresh')
+            })
+          }
+        }).catch((_) => { // 异常情况，loading置为false
+        })
+      }
+    }
+  })
+}
+
+// 修改数据
+const updateData = (data: any) => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      if (useCheckList(list.value, columns.value, '报警规则')) {
+        editSpecialAlarmRule(data).then((response) => {
+          if (response.code === 200) {
+            ElMessage({
+              message: '修改成功',
+              type: 'success',
+            })
+            setTimeout(() => {
+              emits('refresh')
+            })
+            dialogFormVisible.value = false
+          }
+        }).catch((_) => { // 异常情况，loading置为false
+        })
+      }
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  const data = list.value.map((item: any) => ({
+    alarmLevelId: item.alarmLevelId,
+    alarmRule: item.alarmRule,
+    alarmRuleName: `${item.alarmRule}[${alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevelId)[0]?.name || ''}]:${item.alarmThreshold}%LEL`,
+    alarmThreshold: item.alarmThreshold,
+    devcode: dataForm.value.devcode,
+    id: dataForm.value.id,
+    position: dataForm.value.position,
+    tagNumber: dataForm.value.tagNumber,
+    devTypeName: deviceList.value.filter((citem: any) => citem.value === dataForm.value.devcode)[0]?.name || '',
+    alarmTypeId: alarmRuleList.value.filter((citem: any) => citem.name === item.alarmRule)[0]?.alarmTypeId || '',
+  }))
+  if (dialogStatus.value === 'edit') {
+    updateData(data)
+  }
+  else if (dialogStatus.value === 'create') {
+    createData(data)
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+// 列表添加行
+const addRow = () => {
+  list.value.push({
+    alarmThreshold: '',
+    alarmLevelId: '',
+    alarmRule: '',
+    edit: true,
+  })
+}
+// 保存行
+const saveRow = (scope: any) => {
+  const row = scope.row as any
+  if (String(row.alarmThreshold) && row.alarmLevelId && row.alarmRule) {
+    list.value[scope.$index].edit = false
+  }
+  else {
+    ElMessage.warning('请先完善当前行数据')
+  }
+}
+// 编辑行
+const editRow = (scope: any) => {
+  list.value[scope.$index].edit = true
+}
+// 删除行
+const removeRow = (scope: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    list.value = list.value.filter((item, index) => index !== scope.$index)
+    ElMessage.success('操作成功')
+  })
+}
+// 字典
+
+const fetchDict = () => {
+  // 设备列表
+  getDeviceListPage({ offset: 1, limit: 9999 }).then((res) => {
+    deviceList.value = res.data.rows.map((item: any) => ({
+      name: item.devTypeName,
+      id: item.id,
+      value: item.devcode,
+      productId: item.productId,
+      position: item.position,
+      tagNumber: item.tagNumber,
+    })).filter((item: any) => item.productId && item.value)
+    // 产品
+    getProductListPage({ limit: 9999, offset: 1 }).then((res) => {
+      productList.value = res.data.rows.map((item: any) => ({
+        name: `${item.deviceTypeName}-${item.deviceModel}/${item.manufacturerName}`,
+        value: item.id,
+        id: item.id,
+      }))
+    })
+    // 报警规则
+    getAlarmRuleListPage({ limit: 9999, offset: 1 }).then((res) => {
+      alarmRuleList.value = res.data.rows.map((item: any) => ({
+        name: item.alarmName,
+        id: item.id,
+        value: item.id,
+        alarmTypeId: item.alarmTypeId,
+      }))
+    })
+    // 报警等级
+    getAlarmLevelListPage({ limit: 9999, offset: 1 }).then((res) => {
+      alarmLevelList.value = res.data.rows.map((item: any) => ({
+        name: item.alarmLevel,
+        id: item.id,
+        value: item.id,
+      }))
+    })
+  })
+}
+fetchDict()
+
+// 监听设备编号，自动填充产品，安装位号，详细地址
+watch(() => dataForm.value.devcode, (newVal) => {
+  if (newVal) {
+    const current = deviceList.value.filter((item: any) => item.value === dataForm.value.devcode)
+    if (current.length) {
+      dataForm.value.productId = current[0].productId
+      dataForm.value.tagNumber = current[0].tagNumber
+      dataForm.value.position = current[0].position
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}特殊报警规则`" append-to-body>
+    <el-form
+      ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right"
+      :disabled="dialogStatus === 'detail'" label-width="110px"
+    >
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="设备编号" prop="devcode">
+            <el-select v-model.trim="dataForm.devcode" placeholder="设备编号" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in deviceList" :key="item.id" :label="item.value" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产品" prop="productId">
+            <el-select
+              v-model.trim="dataForm.productId" placeholder="产品" style="width: 100%;" clearable filterable
+              disabled
+            >
+              <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="安装位号" prop="tagNumber">
+            <el-input
+              v-model.trim="dataForm.tagNumber" type="text" placeholder="安装位号" style="width: 100%;" disabled
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="详细地址" prop="position">
+            <el-input
+              v-model.trim="dataForm.position" type="text" placeholder="安装位号" style="width: 100%;" disabled
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警规则" prop="">
+            <div style="width: 100%;">
+              <table-container title=" ">
+                <template #btns-right>
+                  <!-- 操作 -->
+                  <div>
+                    <el-button v-if="dialogStatus === 'create'" type="primary" @click="addRow">
+                      新增
+                    </el-button>
+                  </div>
+                </template>
+                <!-- 查询结果Table显示 -->
+                <normal-table :data="list" :total="0" :columns="[]" :query="{}" :pagination="false">
+                  <template #preColumns>
+                    <el-table-column label="序号" width="55" align="center">
+                      <template #default="scope">
+                        {{ scope.$index + 1 }}
+                      </template>
+                    </el-table-column>
+                  </template>
+                  <template #columns>
+                    <el-table-column v-for="item in columns" :key="item.text" :label="item.text" align="center">
+                      <template #default="scope">
+                        <!-- 报警规则 -->
+                        <template v-if="item.type === 'select' && item.code === 'alarm-rule'">
+                          <el-select
+                            v-model.trim="scope.row[item.value]" placeholder="报警规则" style="width: 100%;"
+                            clearable filterable :disabled="!scope.row.edit"
+                          >
+                            <el-option
+                              v-for="item in alarmRuleList" :key="item.id" :label="item.name"
+                              :value="item.name"
+                            />
+                          </el-select>
+                        </template>
+                        <!-- 报警等级 -->
+                        <template v-if="item.type === 'select' && item.code === 'alarm-level'">
+                          <el-select
+                            v-model.trim="scope.row[item.value]" placeholder="报警等级" style="width: 100%;"
+                            clearable filterable :disabled="!scope.row.edit"
+                          >
+                            <el-option
+                              v-for="item in alarmLevelList" :key="item.id" :label="item.name"
+                              :value="item.value"
+                            />
+                          </el-select>
+                        </template>
+                        <!-- 报警阈值 -->
+                        <div v-if="item.type === 'input'" style="width: 100%;">
+                          <el-input
+                            v-model.trim="scope.row[item.value]" placeholder="报警阈值" clearable type="number"
+                            style="width: 60%;" :disabled="!scope.row.edit"
+                          />
+                          <span>%LEL</span>
+                        </div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column v-if="dialogStatus === 'create'" label="操作" width="140" align="center">
+                      <template #default="scope">
+                        <el-button
+                          v-if="scope.row.edit === true" type="primary" link size="small"
+                          @click="saveRow(scope)"
+                        >
+                          保存
+                        </el-button>
+                        <el-button
+                          v-if="scope.row.edit === false" type="primary" link size="small"
+                          @click="editRow(scope)"
+                        >
+                          编辑
+                        </el-button>
+                        <el-button
+                          v-if="scope.row.edit === true" type="danger" link size="small"
+                          @click="removeRow(scope)"
+                        >
+                          删除
+                        </el-button>
+                      </template>
+                    </el-table-column>
+                  </template>
+                </normal-table>
+              </table-container>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div v-if="dialogStatus !== 'detail'" class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+      <div v-else class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/special/index.vue b/src/views/home/rule/special/index.vue
index b739dcd..65f2650 100644
--- a/src/views/home/rule/special/index.vue
+++ b/src/views/home/rule/special/index.vue
@@ -5,20 +5,22 @@
  -->
 <script lang="ts" setup name="RuleAlarmSpecialManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
+import editDialog from './components/editDialog.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getSpecialAlarmRuleListPage, removeSpecialAlarmRule } from '@/api/home/rule/special'
 const deviceTypeList = ref<any[]>([]) // 设备类型列表
 // 表格数据
 const list = ref([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备编号', value: '', align: 'center' },
-  { text: '设备类型', value: '', align: 'center' },
-  { text: '绑定点位', value: '', align: 'center' },
-  { text: '详细位置', value: '', align: 'center' },
-  { text: '报警规则', value: '', align: 'center' },
-  { text: '操作时间', value: '', align: 'center' },
-  { text: '操作人', value: '', align: 'center' },
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '设备类型', value: 'devTypeName', align: 'center' },
+  { text: '绑定点位', value: 'tagNumber', align: 'center', width: '160' },
+  { text: '详细位置', value: 'position', align: 'center' },
+  { text: '报警规则', value: 'alarmRuleName', align: 'center' },
+  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '操作人', value: 'createUser', align: 'center', width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -31,38 +33,31 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
+  devCode: '',
+  devTypeId: '',
 })
-// 开始结束时间
-// const datetimerange = ref()
-// watch(() => datetimerange.value, (newVal) => {
-//   listQuery.value.begTime = ''
-//   listQuery.value.endTime = ''
-//   if (Array.isArray(newVal)) {
-//     if (newVal.length) {
-//       listQuery.value.begTime = `${newVal[0]} 00:00:00`
-//       listQuery.value.endTime = `${newVal[1]} 23:59:59`
-//     }
-//   }
-// })
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
-  // getOperationListPage(listQuery.value).then((res) => {
-  //   list.value = res.data.rows.map((item: any) => ({
-  //     ...item,
-  //     deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
-  //   }))
-  //   total.value = res.data.total
-  loadingTable.value = false
-  // }).catch(() => {
-  //   loadingTable.value = false
-  // })
+  getSpecialAlarmRuleListPage(listQuery.value).then((res) => {
+    console.log(res.data.rows, '123321')
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      // deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
 }
 // 重置查询条件f
 const reset = () => {
   listQuery.value = {
     limit: 20,
     offset: 1,
+    devCode: '',
+    devTypeId: '',
   }
   fetchData()
 }
@@ -76,9 +71,27 @@
   }
   fetchData()
 }
-// 查看轨迹详情
-const detail = (row: any) => {
-
+// 查看详情
+const editRef = ref()
+const detail = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeSpecialAlarmRule(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
 }
 // 获取字典
 const fetchDict = async () => {
@@ -95,14 +108,15 @@
 <template>
   <!-- 布局 -->
   <app-container>
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-input v-model="listQuery.devcode" placeholder="设备编号" clearable />
+        <el-input v-model="listQuery.devCode" placeholder="设备编号" clearable />
       </search-item>
       <search-item>
         <el-select
-          v-model="listQuery.deviceType" placeholder="设备类型" clearable filterable class="select"
+          v-model="listQuery.devTypeId" placeholder="设备类型" clearable filterable class="select"
           style="width: 192px;"
         >
           <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
@@ -117,7 +131,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="detail('create', {})">
             新增
           </el-button>
         </div>
@@ -137,13 +151,13 @@
         <template #columns>
           <el-table-column label="操作" width="140" align="center">
             <template #default="scope">
-              <el-button type="primary" link size="small">
+              <el-button type="primary" link size="small" @click="detail('detail', scope.row)">
                 查看
               </el-button>
-              <el-button type="primary" link size="small" @click="detail(scope.row)">
+              <el-button type="primary" link size="small" @click="detail('edit', scope.row)">
                 编辑
               </el-button>
-              <el-button type="danger" link size="small">
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
                 删除
               </el-button>
             </template>

diff --git a/src/api/home/rule/alarm.ts b/src/api/home/rule/alarm.ts
new file mode 100644
index 0000000..f2041d0
--- /dev/null
+++ b/src/api/home/rule/alarm.ts
@@ -0,0 +1,115 @@
+/**
+ * 规则引擎--报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRule/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 停用或者启用
+export function switchStatus(data: any) {
+  return request({
+    url: '/system/alarmRule/stop',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRule/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建
+export function addAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警类型管理列表
+export function getAlarmTypeListPage(data: any) {
+  return request({
+    url: `/system/alarmType/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警类型
+export function removeAlarmType(id: string) {
+  return request({
+    url: '/system/alarmType/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警类型
+export function addAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警类型
+export function editAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警等级管理列表
+export function getAlarmLevelListPage(data: any) {
+  return request({
+    url: `/system/alarmLevelControl/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警等级
+export function removeAlarmLevel(id: string) {
+  return request({
+    url: '/system/alarmLevelControl/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警等级
+export function addAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警等级
+export function editAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/rule/special.ts b/src/api/home/rule/special.ts
new file mode 100644
index 0000000..5ecd2a0
--- /dev/null
+++ b/src/api/home/rule/special.ts
@@ -0,0 +1,39 @@
+/**
+ * 规则引擎--特殊报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getSpecialAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRuleDevice/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeSpecialAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRuleDevice/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新增
+export function addSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 662d4c7..6f9660b 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -255,6 +255,9 @@
   })
   // 绘制线
   resetDrawLine()
+  setTimeout(() => {
+    pageIsFirst.value = false
+  }, 2000)
 }
 defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
@@ -270,7 +273,7 @@
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
-        <span>{{ item.name }}</span>
+        <span style="margin-left: 5px;">{{ item.name }}</span>
       </div>
     </div>
   </div>
@@ -283,17 +286,17 @@
 }
 
 .legend {
-  background: rgb(68 66 66 / 20%);
+  background: rgb(255 255 255 / 80%);
   position: absolute;
   z-index: 1;
   left: 15px;
   bottom: 10px;
   padding: 0 10px;
-  border-radius: 8px;
+  border-radius: 3px;
 
   .legend-item {
-    margin: 5px 0;
-    font-weight: 700;
+    margin: 10px 0;
+    // font-weight: 700;
     display: flex;
     align-items: center;
 
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
new file mode 100644
index 0000000..c1b129d
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -0,0 +1,148 @@
+<!--
+  Description: 报警规则-报警等级管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmLevelManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmLevelDialog from './editAlarmLevelDialog.vue'
+import { getAlarmLevelListPage, removeAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '报警音效', value: 'isSoundName', align: 'center' },
+  { text: '报警推送', value: 'isSendName', align: 'center' },
+  { text: '报警短信', value: 'isTextName', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      isSendName: item.isSend === '0' ? '关' : '开',
+      isSoundName: item.isSound === '0' ? '关' : '开',
+      isTextName: item.isText === '0' ? '关' : '开',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : item.alarmNoteMethod === '2' ? '消息提醒' : '',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmLevel(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警等级管理" append-to-body>
+    <edit-alarm-level-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
new file mode 100644
index 0000000..f3bc573
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -0,0 +1,140 @@
+<!--
+  Description: 报警规则-报警类型管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmTypeManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmTypeDialog from './editAlarmTypeDialog.vue'
+import { getAlarmTypeListPage, removeAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警类别', value: 'alarmCategoryName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmType(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警类型管理" append-to-body>
+    <edit-alarm-type-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
new file mode 100644
index 0000000..fe60451
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
@@ -0,0 +1,199 @@
+<!--
+  Description: 报警等级管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmLevel">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmLevel, editAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmLevel: '', // 报警等级
+  alarmNoteMethod: '', // 报警提示方式
+  isSound: '0',
+  isSend: '0',
+  isText: '0',
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmLevel: [{ required: true, message: '报警等级不能为空', trigger: ['blur', 'change'] }],
+  alarmNoteMethod: [{ required: true, message: '报警提示方式不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmLevel: '', // 报警等级
+    alarmNoteMethod: '', // 报警提示方式
+    isSound: '0',
+    isSend: '0',
+    isText: '0',
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+const alarmNoteMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '弹窗',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '消息提醒',
+    id: '2',
+    value: '2',
+  },
+]) // 报警类别
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警等级`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警等级" prop="alarmLevel">
+            <el-input
+              v-model.trim="dataForm.alarmLevel" type="text" placeholder="报警等级" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警提示方式" prop="alarmNoteMethod">
+            <el-select
+              v-model.trim="dataForm.alarmNoteMethod" placeholder="报警提示方式" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmNoteMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警音效" prop="isSound">
+            <el-switch v-model="dataForm.isSound" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警推送" prop="isSend">
+            <el-switch v-model="dataForm.isSend" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警短信" prop="isText">
+            <el-switch v-model="dataForm.isText" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
new file mode 100644
index 0000000..59c523f
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
@@ -0,0 +1,198 @@
+<!--
+  Description: 报警类型管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmType">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmType, editAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmCategory: '', // 报警类别
+  alarmType: '', // 报警类型
+  deviceTypeIds: [] as any, // 设备类型ids
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmCategory: [{ required: true, message: '报警类别不能为空', trigger: ['blur', 'change'] }],
+  alarmType: [{ required: true, message: '报警类型不能为空', trigger: ['blur', 'change'] }],
+  deviceTypeIds: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmCategory: '', // 报警类别
+    alarmType: '', // 报警类型
+    deviceTypeIds: [] as any, // 设备类型ids
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+    dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
+    // dataForm.value.deviceTypeIds ? dataForm.value.deviceTypeIds : []
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmType(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmType(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+
+const fetchDict = () => {
+  // 报警类别
+  getDictByCode('alarmCategory').then((res) => {
+    alarmCategoryList.value = res.data
+  })
+  // 设备类型
+  getDeviceTypeListPage({ offset: 1, limit: 9999 }).then((res) => {
+    deviceTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.typeName,
+      id: item.id,
+      value: item.id,
+    }))
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警类型`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警类别" prop="alarmCategory">
+            <el-select
+              v-model.trim="dataForm.alarmCategory" placeholder="报警类别" style="width: 100%;" clearable
+              filterable :disabled="dialogStatus === 'create' ? false : true"
+            >
+              <el-option v-for="item in alarmCategoryList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="设备类型" prop="deviceTypeIds">
+            <el-select
+              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable :multiple="dialogStatus === 'edit' ? false : true"
+              filterable :disabled="dialogStatus === 'create' ? false : true"
+            >
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警类型" prop="alarmType">
+            <el-input v-model.trim="dataForm.alarmType" type="text" placeholder="报警类型" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editDialog.vue b/src/views/home/rule/alarm/components/editDialog.vue
new file mode 100644
index 0000000..d4357eb
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editDialog.vue
@@ -0,0 +1,277 @@
+<!--
+  Description: 报警规则管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmRuleDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getProductListPage } from '@/api/home/device/product'
+import { addAlarmRule, editAlarmRule, getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmName: '', // 报警名称
+  alarmTypeId: '', // 报警类型
+  alarmLevelId: '', // 报警等级id
+  alarmNoteMethod: '', // 报警提醒方式
+  productId: '', // 产品
+  alarmJudgeMethod: '', // 报警判断方式
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmName: [{ required: true, message: '报警名称不能为空', trigger: ['blur', 'change'] }],
+  alarmTypeId: [{ required: true, message: '报警类型不能为空', trigger: ['blur', 'change'] }],
+  alarmLevelId: [{ required: true, message: '报警等级不能为空', trigger: ['blur', 'change'] }],
+  productId: [{ required: true, message: '产品不能为空', trigger: ['blur', 'change'] }],
+  alarmJudgeMethod: [{ required: true, message: '报警判断方式不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmName: '', // 报警名称
+    alarmTypeId: '', // 报警类型
+    alarmLevelId: '', // 报警等级id
+    alarmNoteMethod: '', // 报警提醒方式
+    productId: '', // 产品
+    alarmJudgeMethod: '', // 报警判断方式
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmRule(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmRule(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+const productList = ref<{ id: string; name: string; value: string }[]>([]) // 产品
+const alarmNoteMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '弹窗',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '消息提醒',
+    id: '2',
+    value: '2',
+  },
+])
+const alarmJudgeMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '系统',
+    value: '1',
+    id: '1',
+  },
+  {
+    name: '设备',
+    value: '0',
+    id: '0',
+  },
+])
+const fetchDict = () => {
+  // 报警等级
+  getAlarmLevelListPage({ offset: 1, limit: 9999 }).then((res) => {
+    alarmLevelList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmLevel,
+      value: item.id,
+      id: item.id,
+      alarmNoteMethod: item.alarmNoteMethod,
+    }))
+  })
+  // 报警类型
+  getAlarmTypeListPage({ offset: 1, limit: 9999 }).then((res) => {
+    alarmTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmType,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+  // 产品
+  getProductListPage({ limit: 9999, offset: 1 }).then((res) => {
+    productList.value = res.data.rows.map((item: any) => ({
+      name: `${item.deviceTypeName}-${item.deviceModel}/${item.manufacturerName}`,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+}
+fetchDict()
+
+// 监听报警等级，填充报警提示方式
+watch(() => dataForm.value.alarmLevelId, (newVal) => {
+  if (newVal) {
+    dataForm.value.alarmNoteMethod = alarmLevelList.value.filter((item: { id: string; name: string; value: string }) => item.id === dataForm.value.alarmLevelId)[0].alarmNoteMethod
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警规则`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警名称" prop="alarmName">
+            <el-input v-model.trim="dataForm.alarmName" type="text" placeholder="报警名称" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警类型" prop="alarmTypeId">
+            <el-select v-model.trim="dataForm.alarmTypeId" placeholder="" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警等级" prop="alarmLevelId">
+            <el-select
+              v-model.trim="dataForm.alarmLevelId" placeholder="报警等级" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmLevelList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警提示方式" prop="alarmNoteMethod">
+            <!-- <el-input v-model.trim="dataForm.alarmNoteMethod" type="text" placeholder="报警提示方式" clearable
+              style="width: 100%;" disabled /> -->
+            <el-select
+              v-model.trim="dataForm.alarmNoteMethod" placeholder="报警提示方式" style="width: 100%;" clearable
+              filterable disabled
+            >
+              <el-option v-for="item in alarmNoteMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="产品" prop="productId">
+            <el-select v-model.trim="dataForm.productId" placeholder="产品" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警判断方式" prop="alarmJudgeMethod">
+            <el-select
+              v-model.trim="dataForm.alarmJudgeMethod" placeholder="报警判断方式" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmJudgeMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/index.vue b/src/views/home/rule/alarm/index.vue
index 98f2b83..dbcfed3 100644
--- a/src/views/home/rule/alarm/index.vue
+++ b/src/views/home/rule/alarm/index.vue
@@ -5,19 +5,25 @@
  -->
 <script lang="ts" setup name="RuleAlarmManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
-import { getDeviceTypeListPage } from '@/api/home/device/type'
-const deviceTypeList = ref<any[]>([]) // 设备类型列表
+import alarmType from './components/alarmTypeList.vue'
+import alarmLevel from './components/alarmLevelList.vue'
+import editDialog from './components/editDialog.vue'
+import { getDictByCode } from '@/api/system/dict'
+import { getAlarmLevelListPage, getAlarmRuleListPage, getAlarmTypeListPage, removeAlarmRule, switchStatus } from '@/api/home/rule/alarm'
+const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
+const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 // 表格数据
 const list = ref([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '报警类型', value: '', align: 'center' },
-  { text: '报警名称', value: 'deviceTypeName', align: 'center' },
-  { text: '报警等级', value: '', align: 'center' },
-  { text: '报警提示方式', value: '', align: 'center' },
-  { text: '状态', value: '', align: 'center' },
-  { text: '创建时间', value: '', align: 'center' },
+  { text: '报警类型', value: 'alarmTypeName', align: 'center' },
+  { text: '报警名称', value: 'alarmName', align: 'center' },
+  { text: '报警等级', value: 'alarmLevelName', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '状态', value: 'stateName', align: 'center' },
+  { text: '创建时间', value: 'ts', align: 'center' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -30,38 +36,33 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
+  alarmLevelId: '',
+  alarmName: '',
 })
-// 开始结束时间
-// const datetimerange = ref()
-// watch(() => datetimerange.value, (newVal) => {
-//   listQuery.value.begTime = ''
-//   listQuery.value.endTime = ''
-//   if (Array.isArray(newVal)) {
-//     if (newVal.length) {
-//       listQuery.value.begTime = `${newVal[0]} 00:00:00`
-//       listQuery.value.endTime = `${newVal[1]} 23:59:59`
-//     }
-//   }
-// })
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
-  // getOperationListPage(listQuery.value).then((res) => {
-  //   list.value = res.data.rows.map((item: any) => ({
-  //     ...item,
-  //     deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
-  //   }))
-  //   total.value = res.data.total
-  loadingTable.value = false
-  // }).catch(() => {
-  //   loadingTable.value = false
-  // })
+  getAlarmRuleListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmTypeName: alarmTypeList.value[alarmTypeList.value.findIndex(citem => item.alarmTypeId === citem.id)].name || '',
+      alarmLevelName: alarmLevelList.value[alarmLevelList.value.findIndex(citem => item.alarmLevelId === citem.id)].name || '',
+      stateName: item.state === '1' ? '启用' : '未启用',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : '消息提醒',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
 }
 // 重置查询条件f
 const reset = () => {
   listQuery.value = {
     limit: 20,
     offset: 1,
+    alarmLevelId: '',
+    alarmName: '',
   }
   fetchData()
 }
@@ -75,16 +76,83 @@
   }
   fetchData()
 }
-// 查看轨迹详情
-const detail = (row: any) => {
-
+// 报警类型管理
+const typeRef = ref()
+const showAlarmType = () => {
+  typeRef.value.initDialog()
+}
+// 报警等级管理
+const levelRef = ref()
+const showAlarmLevel = () => {
+  levelRef.value.initDialog()
+}
+// 报警等级/类型确认修改
+const confirmAlarm = async () => {
+  await fetchDict()
+  fetchData()
+}
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmRule(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 新建或编辑
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 停用或者启用
+const switchStatusRow = (row: any) => {
+  ElMessageBox.confirm(
+    `确认要${row.state === '1' ? '停用' : '启用'}该报警吗？`,
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    switchStatus({
+      ids: [row.id],
+      state: row.state === '1' ? '0' : '1',
+    }).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
 }
 // 获取字典
-const fetchDict = async () => {
-  // 获取设备类型
-  const res = await getDeviceTypeListPage({ limit: 9999, offset: 1 })
-  deviceTypeList.value = res.data.rows
+async function fetchDict() {
+  const res = await getDictByCode('alarmCategory')
+  alarmCategoryList.value = res.data
+
+  const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
+  alarmLevelList.value = res1.data.rows.map((item: any) => ({
+    name: item.alarmLevel,
+    value: item.id,
+    id: item.id,
+  }))
+
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
+  alarmTypeList.value = res2.data.rows.map((item: any) => ({
+    name: item.alarmType,
+    value: item.id,
+    id: item.id,
+  }))
 }
+
 onMounted(async () => {
   await fetchDict()
   fetchData()
@@ -94,17 +162,23 @@
 <template>
   <!-- 布局 -->
   <app-container>
+    <!-- 报警类型弹窗 -->
+    <alarm-type ref="typeRef" @refresh="confirmAlarm" />
+    <!-- 报警等级弹窗 -->
+    <alarm-level ref="levelRef" @refresh="confirmAlarm" />
+    <!-- 新建或编辑弹窗 -->
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-input v-model="listQuery.devcode" placeholder="报警名称" clearable />
+        <el-input v-model="listQuery.alarmName" placeholder="报警名称" clearable />
       </search-item>
       <search-item>
         <el-select
-          v-model="listQuery.deviceType" placeholder="报警等级" clearable filterable class="select"
+          v-model="listQuery.alarmLevelId" placeholder="报警等级" clearable filterable class="select"
           style="width: 192px;"
         >
-          <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
+          <el-option v-for="item in alarmLevelList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </search-item>
     </search-area>
@@ -116,13 +190,13 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="showAlarmType">
             报警类型管理
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="showAlarmLevel">
             报警等级管理
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="detailRow('create', {})">
             新增
           </el-button>
         </div>
@@ -142,13 +216,13 @@
         <template #columns>
           <el-table-column label="操作" width="140" align="center">
             <template #default="scope">
-              <el-button type="primary" link size="small">
-                停用
+              <el-button type="primary" link size="small" @click="switchStatusRow(scope.row)">
+                {{ scope.row.state === '1' ? '停用' : '启用' }}
               </el-button>
-              <el-button type="primary" link size="small" @click="detail(scope.row)">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
                 编辑
               </el-button>
-              <el-button type="danger" link size="small">
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
                 删除
               </el-button>
             </template>
diff --git a/src/views/home/rule/special/components/editDialog.vue b/src/views/home/rule/special/components/editDialog.vue
new file mode 100644
index 0000000..927cb73
--- /dev/null
+++ b/src/views/home/rule/special/components/editDialog.vue
@@ -0,0 +1,420 @@
+<!--
+  Description: 特殊报警规则-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmRuleSPecial">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getAlarmLevelListPage, getAlarmRuleListPage } from '@/api/home/rule/alarm'
+import { addSpecialAlarmRule, editSpecialAlarmRule } from '@/api/home/rule/special'
+import { getDeviceListPage } from '@/api/home/device/device'
+import { getProductListPage } from '@/api/home/device/product'
+import { useCheckList } from '@/utils/useCheckList'
+const emits = defineEmits(['refresh'])
+const deviceList = ref<any[]>([]) // 设备列表
+const productList = ref<any[]>([]) // 产品
+const alarmRuleList = ref<any[]>([]) // 报警规则
+const alarmLevelList = ref<any[]>([]) // 报警等级
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  devcode: '', // 设备编号
+  tagNumber: '', // 位号
+  position: '', // 详细位置
+  alarmLevelId: '', // 报警等级id
+  alarmTypeId: '', // 报警类型
+  alarmThreshold: '', // 报警阈值
+  productId: '',
+  alarmRule: '',
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+  detail: '',
+} // 表头显示标题
+const rules: FormRules = {
+  devcode: [{ required: true, message: '设备编号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    devcode: '', // 设备编号
+    tagNumber: '', // 位号
+    position: '', // 详细位置
+    alarmLevelId: '', // 报警等级id
+    alarmTypeId: '', // 报警类型
+    alarmThreshold: '', // 报警阈值
+    productId: '',
+    alarmRule: '',
+    id: '',
+  }
+}
+const list = ref<any[]>([])
+const columns = ref<any>([
+  { text: '报警规则', value: 'alarmRule', align: 'center', type: 'select', code: 'alarm-rule', required: true },
+  { text: '报警等级', value: 'alarmLevelId', align: 'center', type: 'select', code: 'alarm-level', required: true },
+  { text: '报警阈值', value: 'alarmThreshold', align: 'center', type: 'input', required: true },
+])
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+    list.value = []
+  }
+  else if (dialogStatus.value === 'edit' || dialogStatus.value === 'detail') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+    list.value = [
+      {
+        edit: dialogStatus.value === 'edit',
+        alarmRule: row.alarmRule,
+        alarmLevelId: row.alarmLevelId,
+        alarmThreshold: row.alarmThreshold,
+      },
+    ]
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = (data: any) => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      // 验证数据列
+      if (useCheckList(list.value, columns.value, '报警规则')) {
+        addSpecialAlarmRule(data).then((response) => {
+          if (response.code === 200) {
+            ElMessage({
+              message: '添加成功',
+              type: 'success',
+            })
+            // 通知父组件刷新状态
+            dialogFormVisible.value = false
+            setTimeout(() => {
+              emits('refresh')
+            })
+          }
+        }).catch((_) => { // 异常情况，loading置为false
+        })
+      }
+    }
+  })
+}
+
+// 修改数据
+const updateData = (data: any) => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      if (useCheckList(list.value, columns.value, '报警规则')) {
+        editSpecialAlarmRule(data).then((response) => {
+          if (response.code === 200) {
+            ElMessage({
+              message: '修改成功',
+              type: 'success',
+            })
+            setTimeout(() => {
+              emits('refresh')
+            })
+            dialogFormVisible.value = false
+          }
+        }).catch((_) => { // 异常情况，loading置为false
+        })
+      }
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  const data = list.value.map((item: any) => ({
+    alarmLevelId: item.alarmLevelId,
+    alarmRule: item.alarmRule,
+    alarmRuleName: `${item.alarmRule}[${alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevelId)[0]?.name || ''}]:${item.alarmThreshold}%LEL`,
+    alarmThreshold: item.alarmThreshold,
+    devcode: dataForm.value.devcode,
+    id: dataForm.value.id,
+    position: dataForm.value.position,
+    tagNumber: dataForm.value.tagNumber,
+    devTypeName: deviceList.value.filter((citem: any) => citem.value === dataForm.value.devcode)[0]?.name || '',
+    alarmTypeId: alarmRuleList.value.filter((citem: any) => citem.name === item.alarmRule)[0]?.alarmTypeId || '',
+  }))
+  if (dialogStatus.value === 'edit') {
+    updateData(data)
+  }
+  else if (dialogStatus.value === 'create') {
+    createData(data)
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+// 列表添加行
+const addRow = () => {
+  list.value.push({
+    alarmThreshold: '',
+    alarmLevelId: '',
+    alarmRule: '',
+    edit: true,
+  })
+}
+// 保存行
+const saveRow = (scope: any) => {
+  const row = scope.row as any
+  if (String(row.alarmThreshold) && row.alarmLevelId && row.alarmRule) {
+    list.value[scope.$index].edit = false
+  }
+  else {
+    ElMessage.warning('请先完善当前行数据')
+  }
+}
+// 编辑行
+const editRow = (scope: any) => {
+  list.value[scope.$index].edit = true
+}
+// 删除行
+const removeRow = (scope: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    list.value = list.value.filter((item, index) => index !== scope.$index)
+    ElMessage.success('操作成功')
+  })
+}
+// 字典
+
+const fetchDict = () => {
+  // 设备列表
+  getDeviceListPage({ offset: 1, limit: 9999 }).then((res) => {
+    deviceList.value = res.data.rows.map((item: any) => ({
+      name: item.devTypeName,
+      id: item.id,
+      value: item.devcode,
+      productId: item.productId,
+      position: item.position,
+      tagNumber: item.tagNumber,
+    })).filter((item: any) => item.productId && item.value)
+    // 产品
+    getProductListPage({ limit: 9999, offset: 1 }).then((res) => {
+      productList.value = res.data.rows.map((item: any) => ({
+        name: `${item.deviceTypeName}-${item.deviceModel}/${item.manufacturerName}`,
+        value: item.id,
+        id: item.id,
+      }))
+    })
+    // 报警规则
+    getAlarmRuleListPage({ limit: 9999, offset: 1 }).then((res) => {
+      alarmRuleList.value = res.data.rows.map((item: any) => ({
+        name: item.alarmName,
+        id: item.id,
+        value: item.id,
+        alarmTypeId: item.alarmTypeId,
+      }))
+    })
+    // 报警等级
+    getAlarmLevelListPage({ limit: 9999, offset: 1 }).then((res) => {
+      alarmLevelList.value = res.data.rows.map((item: any) => ({
+        name: item.alarmLevel,
+        id: item.id,
+        value: item.id,
+      }))
+    })
+  })
+}
+fetchDict()
+
+// 监听设备编号，自动填充产品，安装位号，详细地址
+watch(() => dataForm.value.devcode, (newVal) => {
+  if (newVal) {
+    const current = deviceList.value.filter((item: any) => item.value === dataForm.value.devcode)
+    if (current.length) {
+      dataForm.value.productId = current[0].productId
+      dataForm.value.tagNumber = current[0].tagNumber
+      dataForm.value.position = current[0].position
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}特殊报警规则`" append-to-body>
+    <el-form
+      ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right"
+      :disabled="dialogStatus === 'detail'" label-width="110px"
+    >
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="设备编号" prop="devcode">
+            <el-select v-model.trim="dataForm.devcode" placeholder="设备编号" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in deviceList" :key="item.id" :label="item.value" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产品" prop="productId">
+            <el-select
+              v-model.trim="dataForm.productId" placeholder="产品" style="width: 100%;" clearable filterable
+              disabled
+            >
+              <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="安装位号" prop="tagNumber">
+            <el-input
+              v-model.trim="dataForm.tagNumber" type="text" placeholder="安装位号" style="width: 100%;" disabled
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="详细地址" prop="position">
+            <el-input
+              v-model.trim="dataForm.position" type="text" placeholder="安装位号" style="width: 100%;" disabled
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警规则" prop="">
+            <div style="width: 100%;">
+              <table-container title=" ">
+                <template #btns-right>
+                  <!-- 操作 -->
+                  <div>
+                    <el-button v-if="dialogStatus === 'create'" type="primary" @click="addRow">
+                      新增
+                    </el-button>
+                  </div>
+                </template>
+                <!-- 查询结果Table显示 -->
+                <normal-table :data="list" :total="0" :columns="[]" :query="{}" :pagination="false">
+                  <template #preColumns>
+                    <el-table-column label="序号" width="55" align="center">
+                      <template #default="scope">
+                        {{ scope.$index + 1 }}
+                      </template>
+                    </el-table-column>
+                  </template>
+                  <template #columns>
+                    <el-table-column v-for="item in columns" :key="item.text" :label="item.text" align="center">
+                      <template #default="scope">
+                        <!-- 报警规则 -->
+                        <template v-if="item.type === 'select' && item.code === 'alarm-rule'">
+                          <el-select
+                            v-model.trim="scope.row[item.value]" placeholder="报警规则" style="width: 100%;"
+                            clearable filterable :disabled="!scope.row.edit"
+                          >
+                            <el-option
+                              v-for="item in alarmRuleList" :key="item.id" :label="item.name"
+                              :value="item.name"
+                            />
+                          </el-select>
+                        </template>
+                        <!-- 报警等级 -->
+                        <template v-if="item.type === 'select' && item.code === 'alarm-level'">
+                          <el-select
+                            v-model.trim="scope.row[item.value]" placeholder="报警等级" style="width: 100%;"
+                            clearable filterable :disabled="!scope.row.edit"
+                          >
+                            <el-option
+                              v-for="item in alarmLevelList" :key="item.id" :label="item.name"
+                              :value="item.value"
+                            />
+                          </el-select>
+                        </template>
+                        <!-- 报警阈值 -->
+                        <div v-if="item.type === 'input'" style="width: 100%;">
+                          <el-input
+                            v-model.trim="scope.row[item.value]" placeholder="报警阈值" clearable type="number"
+                            style="width: 60%;" :disabled="!scope.row.edit"
+                          />
+                          <span>%LEL</span>
+                        </div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column v-if="dialogStatus === 'create'" label="操作" width="140" align="center">
+                      <template #default="scope">
+                        <el-button
+                          v-if="scope.row.edit === true" type="primary" link size="small"
+                          @click="saveRow(scope)"
+                        >
+                          保存
+                        </el-button>
+                        <el-button
+                          v-if="scope.row.edit === false" type="primary" link size="small"
+                          @click="editRow(scope)"
+                        >
+                          编辑
+                        </el-button>
+                        <el-button
+                          v-if="scope.row.edit === true" type="danger" link size="small"
+                          @click="removeRow(scope)"
+                        >
+                          删除
+                        </el-button>
+                      </template>
+                    </el-table-column>
+                  </template>
+                </normal-table>
+              </table-container>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div v-if="dialogStatus !== 'detail'" class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+      <div v-else class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/special/index.vue b/src/views/home/rule/special/index.vue
index b739dcd..65f2650 100644
--- a/src/views/home/rule/special/index.vue
+++ b/src/views/home/rule/special/index.vue
@@ -5,20 +5,22 @@
  -->
 <script lang="ts" setup name="RuleAlarmSpecialManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
+import editDialog from './components/editDialog.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getSpecialAlarmRuleListPage, removeSpecialAlarmRule } from '@/api/home/rule/special'
 const deviceTypeList = ref<any[]>([]) // 设备类型列表
 // 表格数据
 const list = ref([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备编号', value: '', align: 'center' },
-  { text: '设备类型', value: '', align: 'center' },
-  { text: '绑定点位', value: '', align: 'center' },
-  { text: '详细位置', value: '', align: 'center' },
-  { text: '报警规则', value: '', align: 'center' },
-  { text: '操作时间', value: '', align: 'center' },
-  { text: '操作人', value: '', align: 'center' },
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '设备类型', value: 'devTypeName', align: 'center' },
+  { text: '绑定点位', value: 'tagNumber', align: 'center', width: '160' },
+  { text: '详细位置', value: 'position', align: 'center' },
+  { text: '报警规则', value: 'alarmRuleName', align: 'center' },
+  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '操作人', value: 'createUser', align: 'center', width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -31,38 +33,31 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
+  devCode: '',
+  devTypeId: '',
 })
-// 开始结束时间
-// const datetimerange = ref()
-// watch(() => datetimerange.value, (newVal) => {
-//   listQuery.value.begTime = ''
-//   listQuery.value.endTime = ''
-//   if (Array.isArray(newVal)) {
-//     if (newVal.length) {
-//       listQuery.value.begTime = `${newVal[0]} 00:00:00`
-//       listQuery.value.endTime = `${newVal[1]} 23:59:59`
-//     }
-//   }
-// })
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
-  // getOperationListPage(listQuery.value).then((res) => {
-  //   list.value = res.data.rows.map((item: any) => ({
-  //     ...item,
-  //     deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
-  //   }))
-  //   total.value = res.data.total
-  loadingTable.value = false
-  // }).catch(() => {
-  //   loadingTable.value = false
-  // })
+  getSpecialAlarmRuleListPage(listQuery.value).then((res) => {
+    console.log(res.data.rows, '123321')
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      // deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
 }
 // 重置查询条件f
 const reset = () => {
   listQuery.value = {
     limit: 20,
     offset: 1,
+    devCode: '',
+    devTypeId: '',
   }
   fetchData()
 }
@@ -76,9 +71,27 @@
   }
   fetchData()
 }
-// 查看轨迹详情
-const detail = (row: any) => {
-
+// 查看详情
+const editRef = ref()
+const detail = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeSpecialAlarmRule(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
 }
 // 获取字典
 const fetchDict = async () => {
@@ -95,14 +108,15 @@
 <template>
   <!-- 布局 -->
   <app-container>
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-input v-model="listQuery.devcode" placeholder="设备编号" clearable />
+        <el-input v-model="listQuery.devCode" placeholder="设备编号" clearable />
       </search-item>
       <search-item>
         <el-select
-          v-model="listQuery.deviceType" placeholder="设备类型" clearable filterable class="select"
+          v-model="listQuery.devTypeId" placeholder="设备类型" clearable filterable class="select"
           style="width: 192px;"
         >
           <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
@@ -117,7 +131,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="detail('create', {})">
             新增
           </el-button>
         </div>
@@ -137,13 +151,13 @@
         <template #columns>
           <el-table-column label="操作" width="140" align="center">
             <template #default="scope">
-              <el-button type="primary" link size="small">
+              <el-button type="primary" link size="small" @click="detail('detail', scope.row)">
                 查看
               </el-button>
-              <el-button type="primary" link size="small" @click="detail(scope.row)">
+              <el-button type="primary" link size="small" @click="detail('edit', scope.row)">
                 编辑
               </el-button>
-              <el-button type="danger" link size="small">
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
                 删除
               </el-button>
             </template>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 21437bf..7acfb73 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -183,6 +183,9 @@
   console.log('地图绘制完毕')
   // 绘制海量点
   resetDraw()
+  setTimeout(() => {
+    pageIsFirst.value = false
+  }, 2000)
 }
 defineExpose({ openInfoDetail, drawMarker, resetDraw })
 </script>
@@ -198,7 +201,7 @@
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
-        <span>{{ item.name }}</span>
+        <span style="margin-left: 5px;">{{ item.name }}</span>
       </div>
     </div>
   </div>
@@ -211,17 +214,17 @@
 }
 
 .legend {
-  background: rgb(68 66 66 / 20%);
+  background: rgb(255 255 255 / 80%);
   position: absolute;
   z-index: 1;
   left: 15px;
   bottom: 10px;
   padding: 0 10px;
-  border-radius: 8px;
+  border-radius: 3px;
 
   .legend-item {
-    margin: 5px 0;
-    font-weight: 700;
+    margin: 10px 0;
+    // font-weight: 700;
     display: flex;
     align-items: center;
 

diff --git a/src/api/home/rule/alarm.ts b/src/api/home/rule/alarm.ts
new file mode 100644
index 0000000..f2041d0
--- /dev/null
+++ b/src/api/home/rule/alarm.ts
@@ -0,0 +1,115 @@
+/**
+ * 规则引擎--报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRule/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 停用或者启用
+export function switchStatus(data: any) {
+  return request({
+    url: '/system/alarmRule/stop',
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRule/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建
+export function addAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRule/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警类型管理列表
+export function getAlarmTypeListPage(data: any) {
+  return request({
+    url: `/system/alarmType/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警类型
+export function removeAlarmType(id: string) {
+  return request({
+    url: '/system/alarmType/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警类型
+export function addAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警类型
+export function editAlarmType(data: any) {
+  return request({
+    url: '/system/alarmType/edit',
+    method: 'post',
+    data,
+  })
+}
+// 报警等级管理列表
+export function getAlarmLevelListPage(data: any) {
+  return request({
+    url: `/system/alarmLevelControl/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除报警等级
+export function removeAlarmLevel(id: string) {
+  return request({
+    url: '/system/alarmLevelControl/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新建报警等级
+export function addAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑报警等级
+export function editAlarmLevel(data: any) {
+  return request({
+    url: '/system/alarmLevelControl/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/api/home/rule/special.ts b/src/api/home/rule/special.ts
new file mode 100644
index 0000000..5ecd2a0
--- /dev/null
+++ b/src/api/home/rule/special.ts
@@ -0,0 +1,39 @@
+/**
+ * 规则引擎--特殊报警规则管理接口
+ */
+import request from '@/api/index'
+
+// 基础列表
+export function getSpecialAlarmRuleListPage(data: any) {
+  return request({
+    url: `/system/alarmRuleDevice/listPage?limit=${data.limit}&offset=${data.offset}`,
+    method: 'post',
+    data,
+  })
+}
+// 删除
+export function removeSpecialAlarmRule(id: any) {
+  return request({
+    url: '/system/alarmRuleDevice/batchDelete',
+    method: 'post',
+    data: {
+      ids: [id],
+    },
+  })
+}
+// 新增
+export function addSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/add',
+    method: 'post',
+    data,
+  })
+}
+// 编辑
+export function editSpecialAlarmRule(data: any) {
+  return request({
+    url: '/system/alarmRuleDevice/edit',
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/home/pipeline/components/map.vue b/src/views/home/pipeline/components/map.vue
index 662d4c7..6f9660b 100644
--- a/src/views/home/pipeline/components/map.vue
+++ b/src/views/home/pipeline/components/map.vue
@@ -255,6 +255,9 @@
   })
   // 绘制线
   resetDrawLine()
+  setTimeout(() => {
+    pageIsFirst.value = false
+  }, 2000)
 }
 defineExpose({ openInfoDetail, drawMarker, resetDraw, drawLine, resetDrawLine, mapRef })
 </script>
@@ -270,7 +273,7 @@
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
-        <span>{{ item.name }}</span>
+        <span style="margin-left: 5px;">{{ item.name }}</span>
       </div>
     </div>
   </div>
@@ -283,17 +286,17 @@
 }
 
 .legend {
-  background: rgb(68 66 66 / 20%);
+  background: rgb(255 255 255 / 80%);
   position: absolute;
   z-index: 1;
   left: 15px;
   bottom: 10px;
   padding: 0 10px;
-  border-radius: 8px;
+  border-radius: 3px;
 
   .legend-item {
-    margin: 5px 0;
-    font-weight: 700;
+    margin: 10px 0;
+    // font-weight: 700;
     display: flex;
     align-items: center;
 
diff --git a/src/views/home/rule/alarm/components/alarmLevelList.vue b/src/views/home/rule/alarm/components/alarmLevelList.vue
new file mode 100644
index 0000000..c1b129d
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmLevelList.vue
@@ -0,0 +1,148 @@
+<!--
+  Description: 报警规则-报警等级管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmLevelManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmLevelDialog from './editAlarmLevelDialog.vue'
+import { getAlarmLevelListPage, removeAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警等级', value: 'alarmLevel', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '报警音效', value: 'isSoundName', align: 'center' },
+  { text: '报警推送', value: 'isSendName', align: 'center' },
+  { text: '报警短信', value: 'isTextName', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmLevelListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      isSendName: item.isSend === '0' ? '关' : '开',
+      isSoundName: item.isSound === '0' ? '关' : '开',
+      isTextName: item.isText === '0' ? '关' : '开',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : item.alarmNoteMethod === '2' ? '消息提醒' : '',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmLevel(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警等级管理" append-to-body>
+    <edit-alarm-level-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/alarmTypeList.vue b/src/views/home/rule/alarm/components/alarmTypeList.vue
new file mode 100644
index 0000000..f3bc573
--- /dev/null
+++ b/src/views/home/rule/alarm/components/alarmTypeList.vue
@@ -0,0 +1,140 @@
+<!--
+  Description: 报警规则-报警类型管理
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="AlarmTypeManage">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import editAlarmTypeDialog from './editAlarmTypeDialog.vue'
+import { getAlarmTypeListPage, removeAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dialogFormVisible = ref(false) // 对话框是否显示
+// 表格数据
+const list = ref([])
+const total = ref(0)
+// 初始展示列
+const columns = ref<any>([
+  { text: '报警类别', value: 'alarmCategoryName', align: 'center' },
+  { text: '设备类型', value: 'deviceTypeName', align: 'center' },
+  { text: '报警类型', value: 'alarmType', align: 'center' },
+])
+const loadingTable = ref(true)
+//  查询条件
+const listQuery = ref({
+  limit: 5,
+  offset: 1,
+})
+const fetchData = () => {
+  loadingTable.value = true
+  getAlarmTypeListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
+}
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: { size: number; page: number }) => {
+  if (val && val.size) {
+    listQuery.value.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.value.offset = val.page
+  }
+  fetchData()
+}
+fetchData()
+// 初始化对话框
+const initDialog = () => {
+  dialogFormVisible.value = true
+}
+defineExpose({
+  initDialog,
+})
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmType(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 编辑行或者新建
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 取消
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" title="报警类型管理" append-to-body>
+    <edit-alarm-type-dialog ref="editRef" @refresh="fetchData" />
+    <!-- 表头标题 -->
+    <table-container>
+      <template #btns-right>
+        <!-- 操作 -->
+        <div>
+          <el-button type="primary" @click="detailRow('create', {})">
+            新增
+          </el-button>
+        </div>
+      </template>
+      <!-- 查询结果Table显示 -->
+      <normal-table
+        :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+        @change="changePage"
+      >
+        <template #preColumns>
+          <el-table-column label="序号" width="55" align="center">
+            <template #default="scope">
+              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+            </template>
+          </el-table-column>
+        </template>
+        <template #columns>
+          <el-table-column label="操作" width="120" align="center">
+            <template #default="scope">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
+                编辑
+              </el-button>
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </template>
+      </normal-table>
+    </table-container>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
new file mode 100644
index 0000000..fe60451
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmLevelDialog.vue
@@ -0,0 +1,199 @@
+<!--
+  Description: 报警等级管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmLevel">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmLevel, editAlarmLevel } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmLevel: '', // 报警等级
+  alarmNoteMethod: '', // 报警提示方式
+  isSound: '0',
+  isSend: '0',
+  isText: '0',
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmLevel: [{ required: true, message: '报警等级不能为空', trigger: ['blur', 'change'] }],
+  alarmNoteMethod: [{ required: true, message: '报警提示方式不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmLevel: '', // 报警等级
+    alarmNoteMethod: '', // 报警提示方式
+    isSound: '0',
+    isSend: '0',
+    isText: '0',
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmLevel(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+const alarmNoteMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '弹窗',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '消息提醒',
+    id: '2',
+    value: '2',
+  },
+]) // 报警类别
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警等级`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="110px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警等级" prop="alarmLevel">
+            <el-input
+              v-model.trim="dataForm.alarmLevel" type="text" placeholder="报警等级" style="width: 100%;"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警提示方式" prop="alarmNoteMethod">
+            <el-select
+              v-model.trim="dataForm.alarmNoteMethod" placeholder="报警提示方式" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmNoteMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警音效" prop="isSound">
+            <el-switch v-model="dataForm.isSound" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警推送" prop="isSend">
+            <el-switch v-model="dataForm.isSend" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警短信" prop="isText">
+            <el-switch v-model="dataForm.isText" size="large" active-text="开" inactive-text="关" active-value="1" inactive-value="0" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
new file mode 100644
index 0000000..59c523f
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editAlarmTypeDialog.vue
@@ -0,0 +1,198 @@
+<!--
+  Description: 报警类型管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmType">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { addAlarmType, editAlarmType } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
+const deviceTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 设备类型
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmCategory: '', // 报警类别
+  alarmType: '', // 报警类型
+  deviceTypeIds: [] as any, // 设备类型ids
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmCategory: [{ required: true, message: '报警类别不能为空', trigger: ['blur', 'change'] }],
+  alarmType: [{ required: true, message: '报警类型不能为空', trigger: ['blur', 'change'] }],
+  deviceTypeIds: [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmCategory: '', // 报警类别
+    alarmType: '', // 报警类型
+    deviceTypeIds: [] as any, // 设备类型ids
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+    dataForm.value.deviceTypeIds = deviceTypeList.value.length ? deviceTypeList.value.filter((item: any) => item.name === dataForm.value.deviceTypeName)[0].id : ''
+    // dataForm.value.deviceTypeIds ? dataForm.value.deviceTypeIds : []
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmType(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmType(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+
+const fetchDict = () => {
+  // 报警类别
+  getDictByCode('alarmCategory').then((res) => {
+    alarmCategoryList.value = res.data
+  })
+  // 设备类型
+  getDeviceTypeListPage({ offset: 1, limit: 9999 }).then((res) => {
+    deviceTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.typeName,
+      id: item.id,
+      value: item.id,
+    }))
+  })
+}
+fetchDict()
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警类型`" append-to-body width="40%">
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="80px">
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警类别" prop="alarmCategory">
+            <el-select
+              v-model.trim="dataForm.alarmCategory" placeholder="报警类别" style="width: 100%;" clearable
+              filterable :disabled="dialogStatus === 'create' ? false : true"
+            >
+              <el-option v-for="item in alarmCategoryList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="设备类型" prop="deviceTypeIds">
+            <el-select
+              v-model.trim="dataForm.deviceTypeIds" placeholder="设备类型" style="width: 100%;" clearable :multiple="dialogStatus === 'edit' ? false : true"
+              filterable :disabled="dialogStatus === 'create' ? false : true"
+            >
+              <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警类型" prop="alarmType">
+            <el-input v-model.trim="dataForm.alarmType" type="text" placeholder="报警类型" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/components/editDialog.vue b/src/views/home/rule/alarm/components/editDialog.vue
new file mode 100644
index 0000000..d4357eb
--- /dev/null
+++ b/src/views/home/rule/alarm/components/editDialog.vue
@@ -0,0 +1,277 @@
+<!--
+  Description: 报警规则管理-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmRuleDialog">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getProductListPage } from '@/api/home/device/product'
+import { addAlarmRule, editAlarmRule, getAlarmLevelListPage, getAlarmTypeListPage } from '@/api/home/rule/alarm'
+const emits = defineEmits(['refresh'])
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  alarmName: '', // 报警名称
+  alarmTypeId: '', // 报警类型
+  alarmLevelId: '', // 报警等级id
+  alarmNoteMethod: '', // 报警提醒方式
+  productId: '', // 产品
+  alarmJudgeMethod: '', // 报警判断方式
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+} // 表头显示标题
+const rules: FormRules = {
+  alarmName: [{ required: true, message: '报警名称不能为空', trigger: ['blur', 'change'] }],
+  alarmTypeId: [{ required: true, message: '报警类型不能为空', trigger: ['blur', 'change'] }],
+  alarmLevelId: [{ required: true, message: '报警等级不能为空', trigger: ['blur', 'change'] }],
+  productId: [{ required: true, message: '产品不能为空', trigger: ['blur', 'change'] }],
+  alarmJudgeMethod: [{ required: true, message: '报警判断方式不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    alarmName: '', // 报警名称
+    alarmTypeId: '', // 报警类型
+    alarmLevelId: '', // 报警等级id
+    alarmNoteMethod: '', // 报警提醒方式
+    productId: '', // 产品
+    alarmJudgeMethod: '', // 报警判断方式
+    id: '',
+  }
+}
+
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+  }
+  else if (dialogStatus.value === 'edit') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      addAlarmRule(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '添加成功',
+            type: 'success',
+          })
+          // 通知父组件刷新状态
+          dialogFormVisible.value = false
+          setTimeout(() => {
+            emits('refresh')
+          })
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 修改数据
+const updateData = () => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      editAlarmRule(dataForm.value).then((response) => {
+        if (response.code === 200) {
+          ElMessage({
+            message: '修改成功',
+            type: 'success',
+          })
+          setTimeout(() => {
+            emits('refresh')
+          })
+          dialogFormVisible.value = false
+        }
+      }).catch((_) => { // 异常情况，loading置为false
+      })
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  if (dialogStatus.value === 'edit') {
+    updateData()
+  }
+  else if (dialogStatus.value === 'create') {
+    createData()
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+
+// 字典
+const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
+const productList = ref<{ id: string; name: string; value: string }[]>([]) // 产品
+const alarmNoteMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '弹窗',
+    id: '1',
+    value: '1',
+  },
+  {
+    name: '消息提醒',
+    id: '2',
+    value: '2',
+  },
+])
+const alarmJudgeMethodList = ref<{ id: string; name: string; value: string }[]>([
+  {
+    name: '系统',
+    value: '1',
+    id: '1',
+  },
+  {
+    name: '设备',
+    value: '0',
+    id: '0',
+  },
+])
+const fetchDict = () => {
+  // 报警等级
+  getAlarmLevelListPage({ offset: 1, limit: 9999 }).then((res) => {
+    alarmLevelList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmLevel,
+      value: item.id,
+      id: item.id,
+      alarmNoteMethod: item.alarmNoteMethod,
+    }))
+  })
+  // 报警类型
+  getAlarmTypeListPage({ offset: 1, limit: 9999 }).then((res) => {
+    alarmTypeList.value = res.data.rows.map((item: any) => ({
+      name: item.alarmType,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+  // 产品
+  getProductListPage({ limit: 9999, offset: 1 }).then((res) => {
+    productList.value = res.data.rows.map((item: any) => ({
+      name: `${item.deviceTypeName}-${item.deviceModel}/${item.manufacturerName}`,
+      value: item.id,
+      id: item.id,
+    }))
+  })
+}
+fetchDict()
+
+// 监听报警等级，填充报警提示方式
+watch(() => dataForm.value.alarmLevelId, (newVal) => {
+  if (newVal) {
+    dataForm.value.alarmNoteMethod = alarmLevelList.value.filter((item: { id: string; name: string; value: string }) => item.id === dataForm.value.alarmLevelId)[0].alarmNoteMethod
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}报警规则`" append-to-body>
+    <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right" label-width="120px">
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警名称" prop="alarmName">
+            <el-input v-model.trim="dataForm.alarmName" type="text" placeholder="报警名称" style="width: 100%;" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警类型" prop="alarmTypeId">
+            <el-select v-model.trim="dataForm.alarmTypeId" placeholder="" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="报警等级" prop="alarmLevelId">
+            <el-select
+              v-model.trim="dataForm.alarmLevelId" placeholder="报警等级" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmLevelList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警提示方式" prop="alarmNoteMethod">
+            <!-- <el-input v-model.trim="dataForm.alarmNoteMethod" type="text" placeholder="报警提示方式" clearable
+              style="width: 100%;" disabled /> -->
+            <el-select
+              v-model.trim="dataForm.alarmNoteMethod" placeholder="报警提示方式" style="width: 100%;" clearable
+              filterable disabled
+            >
+              <el-option v-for="item in alarmNoteMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="产品" prop="productId">
+            <el-select v-model.trim="dataForm.productId" placeholder="产品" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="报警判断方式" prop="alarmJudgeMethod">
+            <el-select
+              v-model.trim="dataForm.alarmJudgeMethod" placeholder="报警判断方式" style="width: 100%;" clearable
+              filterable
+            >
+              <el-option v-for="item in alarmJudgeMethodList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/alarm/index.vue b/src/views/home/rule/alarm/index.vue
index 98f2b83..dbcfed3 100644
--- a/src/views/home/rule/alarm/index.vue
+++ b/src/views/home/rule/alarm/index.vue
@@ -5,19 +5,25 @@
  -->
 <script lang="ts" setup name="RuleAlarmManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
-import { getDeviceTypeListPage } from '@/api/home/device/type'
-const deviceTypeList = ref<any[]>([]) // 设备类型列表
+import alarmType from './components/alarmTypeList.vue'
+import alarmLevel from './components/alarmLevelList.vue'
+import editDialog from './components/editDialog.vue'
+import { getDictByCode } from '@/api/system/dict'
+import { getAlarmLevelListPage, getAlarmRuleListPage, getAlarmTypeListPage, removeAlarmRule, switchStatus } from '@/api/home/rule/alarm'
+const alarmCategoryList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类别
+const alarmLevelList = ref<{ id: string; name: string; value: string }[]>([]) // 报警等级
+const alarmTypeList = ref<{ id: string; name: string; value: string }[]>([]) // 报警类型
 // 表格数据
 const list = ref([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '报警类型', value: '', align: 'center' },
-  { text: '报警名称', value: 'deviceTypeName', align: 'center' },
-  { text: '报警等级', value: '', align: 'center' },
-  { text: '报警提示方式', value: '', align: 'center' },
-  { text: '状态', value: '', align: 'center' },
-  { text: '创建时间', value: '', align: 'center' },
+  { text: '报警类型', value: 'alarmTypeName', align: 'center' },
+  { text: '报警名称', value: 'alarmName', align: 'center' },
+  { text: '报警等级', value: 'alarmLevelName', align: 'center' },
+  { text: '报警提示方式', value: 'alarmNoteMethodName', align: 'center' },
+  { text: '状态', value: 'stateName', align: 'center' },
+  { text: '创建时间', value: 'ts', align: 'center' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -30,38 +36,33 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
+  alarmLevelId: '',
+  alarmName: '',
 })
-// 开始结束时间
-// const datetimerange = ref()
-// watch(() => datetimerange.value, (newVal) => {
-//   listQuery.value.begTime = ''
-//   listQuery.value.endTime = ''
-//   if (Array.isArray(newVal)) {
-//     if (newVal.length) {
-//       listQuery.value.begTime = `${newVal[0]} 00:00:00`
-//       listQuery.value.endTime = `${newVal[1]} 23:59:59`
-//     }
-//   }
-// })
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
-  // getOperationListPage(listQuery.value).then((res) => {
-  //   list.value = res.data.rows.map((item: any) => ({
-  //     ...item,
-  //     deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
-  //   }))
-  //   total.value = res.data.total
-  loadingTable.value = false
-  // }).catch(() => {
-  //   loadingTable.value = false
-  // })
+  getAlarmRuleListPage(listQuery.value).then((res) => {
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      alarmTypeName: alarmTypeList.value[alarmTypeList.value.findIndex(citem => item.alarmTypeId === citem.id)].name || '',
+      alarmLevelName: alarmLevelList.value[alarmLevelList.value.findIndex(citem => item.alarmLevelId === citem.id)].name || '',
+      stateName: item.state === '1' ? '启用' : '未启用',
+      alarmNoteMethodName: item.alarmNoteMethod === '1' ? '弹窗' : '消息提醒',
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
 }
 // 重置查询条件f
 const reset = () => {
   listQuery.value = {
     limit: 20,
     offset: 1,
+    alarmLevelId: '',
+    alarmName: '',
   }
   fetchData()
 }
@@ -75,16 +76,83 @@
   }
   fetchData()
 }
-// 查看轨迹详情
-const detail = (row: any) => {
-
+// 报警类型管理
+const typeRef = ref()
+const showAlarmType = () => {
+  typeRef.value.initDialog()
+}
+// 报警等级管理
+const levelRef = ref()
+const showAlarmLevel = () => {
+  levelRef.value.initDialog()
+}
+// 报警等级/类型确认修改
+const confirmAlarm = async () => {
+  await fetchDict()
+  fetchData()
+}
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeAlarmRule(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
+}
+// 新建或编辑
+const editRef = ref()
+const detailRow = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 停用或者启用
+const switchStatusRow = (row: any) => {
+  ElMessageBox.confirm(
+    `确认要${row.state === '1' ? '停用' : '启用'}该报警吗？`,
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    switchStatus({
+      ids: [row.id],
+      state: row.state === '1' ? '0' : '1',
+    }).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
 }
 // 获取字典
-const fetchDict = async () => {
-  // 获取设备类型
-  const res = await getDeviceTypeListPage({ limit: 9999, offset: 1 })
-  deviceTypeList.value = res.data.rows
+async function fetchDict() {
+  const res = await getDictByCode('alarmCategory')
+  alarmCategoryList.value = res.data
+
+  const res1 = await getAlarmLevelListPage({ offset: 1, limit: 9999 })
+  alarmLevelList.value = res1.data.rows.map((item: any) => ({
+    name: item.alarmLevel,
+    value: item.id,
+    id: item.id,
+  }))
+
+  const res2 = await getAlarmTypeListPage({ offset: 1, limit: 9999 })
+  alarmTypeList.value = res2.data.rows.map((item: any) => ({
+    name: item.alarmType,
+    value: item.id,
+    id: item.id,
+  }))
 }
+
 onMounted(async () => {
   await fetchDict()
   fetchData()
@@ -94,17 +162,23 @@
 <template>
   <!-- 布局 -->
   <app-container>
+    <!-- 报警类型弹窗 -->
+    <alarm-type ref="typeRef" @refresh="confirmAlarm" />
+    <!-- 报警等级弹窗 -->
+    <alarm-level ref="levelRef" @refresh="confirmAlarm" />
+    <!-- 新建或编辑弹窗 -->
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-input v-model="listQuery.devcode" placeholder="报警名称" clearable />
+        <el-input v-model="listQuery.alarmName" placeholder="报警名称" clearable />
       </search-item>
       <search-item>
         <el-select
-          v-model="listQuery.deviceType" placeholder="报警等级" clearable filterable class="select"
+          v-model="listQuery.alarmLevelId" placeholder="报警等级" clearable filterable class="select"
           style="width: 192px;"
         >
-          <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
+          <el-option v-for="item in alarmLevelList" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
       </search-item>
     </search-area>
@@ -116,13 +190,13 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="showAlarmType">
             报警类型管理
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="showAlarmLevel">
             报警等级管理
           </el-button>
-          <el-button type="primary">
+          <el-button type="primary" @click="detailRow('create', {})">
             新增
           </el-button>
         </div>
@@ -142,13 +216,13 @@
         <template #columns>
           <el-table-column label="操作" width="140" align="center">
             <template #default="scope">
-              <el-button type="primary" link size="small">
-                停用
+              <el-button type="primary" link size="small" @click="switchStatusRow(scope.row)">
+                {{ scope.row.state === '1' ? '停用' : '启用' }}
               </el-button>
-              <el-button type="primary" link size="small" @click="detail(scope.row)">
+              <el-button type="primary" link size="small" @click="detailRow('edit', scope.row)">
                 编辑
               </el-button>
-              <el-button type="danger" link size="small">
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
                 删除
               </el-button>
             </template>
diff --git a/src/views/home/rule/special/components/editDialog.vue b/src/views/home/rule/special/components/editDialog.vue
new file mode 100644
index 0000000..927cb73
--- /dev/null
+++ b/src/views/home/rule/special/components/editDialog.vue
@@ -0,0 +1,420 @@
+<!--
+  Description: 特殊报警规则-编辑新建
+  Author: 李亚光
+  Date: 2024-09-09
+ -->
+<script lang="ts" setup name="EditAlarmRuleSPecial">
+import type { FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getDictByCode } from '@/api/system/dict'
+import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getAlarmLevelListPage, getAlarmRuleListPage } from '@/api/home/rule/alarm'
+import { addSpecialAlarmRule, editSpecialAlarmRule } from '@/api/home/rule/special'
+import { getDeviceListPage } from '@/api/home/device/device'
+import { getProductListPage } from '@/api/home/device/product'
+import { useCheckList } from '@/utils/useCheckList'
+const emits = defineEmits(['refresh'])
+const deviceList = ref<any[]>([]) // 设备列表
+const productList = ref<any[]>([]) // 产品
+const alarmRuleList = ref<any[]>([]) // 报警规则
+const alarmLevelList = ref<any[]>([]) // 报警等级
+const dataFormRef = ref()
+const dialogFormVisible = ref(false) // 对话框是否显示
+const dialogStatus = ref('') // 对话框类型：create,update
+const dataForm = ref({
+  devcode: '', // 设备编号
+  tagNumber: '', // 位号
+  position: '', // 详细位置
+  alarmLevelId: '', // 报警等级id
+  alarmTypeId: '', // 报警类型
+  alarmThreshold: '', // 报警阈值
+  productId: '',
+  alarmRule: '',
+  id: '',
+}) // 表单
+const textMap: { [key: string]: string } = {
+  edit: '编辑',
+  create: '新增',
+  detail: '',
+} // 表头显示标题
+const rules: FormRules = {
+  devcode: [{ required: true, message: '设备编号不能为空', trigger: ['blur', 'change'] }],
+} // 前端校验规则
+
+// 重置表单
+const resetForm = () => {
+  dataForm.value = {
+    devcode: '', // 设备编号
+    tagNumber: '', // 位号
+    position: '', // 详细位置
+    alarmLevelId: '', // 报警等级id
+    alarmTypeId: '', // 报警类型
+    alarmThreshold: '', // 报警阈值
+    productId: '',
+    alarmRule: '',
+    id: '',
+  }
+}
+const list = ref<any[]>([])
+const columns = ref<any>([
+  { text: '报警规则', value: 'alarmRule', align: 'center', type: 'select', code: 'alarm-rule', required: true },
+  { text: '报警等级', value: 'alarmLevelId', align: 'center', type: 'select', code: 'alarm-level', required: true },
+  { text: '报警阈值', value: 'alarmThreshold', align: 'center', type: 'input', required: true },
+])
+// 初始化对话框
+const initDialog = (dialogStatusValue: string, row: any) => {
+  dialogStatus.value = dialogStatusValue
+  dialogFormVisible.value = true
+  if (dialogStatus.value === 'create') { // 如果是新增，清除验证
+    resetForm()
+    // nextTick(() => {
+    //   dataFormRef.value.clearValidate()
+    // })
+    dataFormRef.value?.resetFields()
+    list.value = []
+  }
+  else if (dialogStatus.value === 'edit' || dialogStatus.value === 'detail') { // 如果是修改，将row中数据填写到输入框中
+    dataForm.value = {
+      ...JSON.parse(JSON.stringify(row)),
+    }
+    list.value = [
+      {
+        edit: dialogStatus.value === 'edit',
+        alarmRule: row.alarmRule,
+        alarmLevelId: row.alarmLevelId,
+        alarmThreshold: row.alarmThreshold,
+      },
+    ]
+  }
+}
+defineExpose({
+  initDialog,
+})
+
+// 新增数据
+const createData = (data: any) => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      // 验证数据列
+      if (useCheckList(list.value, columns.value, '报警规则')) {
+        addSpecialAlarmRule(data).then((response) => {
+          if (response.code === 200) {
+            ElMessage({
+              message: '添加成功',
+              type: 'success',
+            })
+            // 通知父组件刷新状态
+            dialogFormVisible.value = false
+            setTimeout(() => {
+              emits('refresh')
+            })
+          }
+        }).catch((_) => { // 异常情况，loading置为false
+        })
+      }
+    }
+  })
+}
+
+// 修改数据
+const updateData = (data: any) => {
+  dataFormRef.value.validate((valid: any) => {
+    if (valid) {
+      if (useCheckList(list.value, columns.value, '报警规则')) {
+        editSpecialAlarmRule(data).then((response) => {
+          if (response.code === 200) {
+            ElMessage({
+              message: '修改成功',
+              type: 'success',
+            })
+            setTimeout(() => {
+              emits('refresh')
+            })
+            dialogFormVisible.value = false
+          }
+        }).catch((_) => { // 异常情况，loading置为false
+        })
+      }
+    }
+  })
+}
+
+// 保存数据
+const saveData = () => {
+  const data = list.value.map((item: any) => ({
+    alarmLevelId: item.alarmLevelId,
+    alarmRule: item.alarmRule,
+    alarmRuleName: `${item.alarmRule}[${alarmLevelList.value.filter((citem: any) => citem.id === item.alarmLevelId)[0]?.name || ''}]:${item.alarmThreshold}%LEL`,
+    alarmThreshold: item.alarmThreshold,
+    devcode: dataForm.value.devcode,
+    id: dataForm.value.id,
+    position: dataForm.value.position,
+    tagNumber: dataForm.value.tagNumber,
+    devTypeName: deviceList.value.filter((citem: any) => citem.value === dataForm.value.devcode)[0]?.name || '',
+    alarmTypeId: alarmRuleList.value.filter((citem: any) => citem.name === item.alarmRule)[0]?.alarmTypeId || '',
+  }))
+  if (dialogStatus.value === 'edit') {
+    updateData(data)
+  }
+  else if (dialogStatus.value === 'create') {
+    createData(data)
+  }
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+}
+// 列表添加行
+const addRow = () => {
+  list.value.push({
+    alarmThreshold: '',
+    alarmLevelId: '',
+    alarmRule: '',
+    edit: true,
+  })
+}
+// 保存行
+const saveRow = (scope: any) => {
+  const row = scope.row as any
+  if (String(row.alarmThreshold) && row.alarmLevelId && row.alarmRule) {
+    list.value[scope.$index].edit = false
+  }
+  else {
+    ElMessage.warning('请先完善当前行数据')
+  }
+}
+// 编辑行
+const editRow = (scope: any) => {
+  list.value[scope.$index].edit = true
+}
+// 删除行
+const removeRow = (scope: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    list.value = list.value.filter((item, index) => index !== scope.$index)
+    ElMessage.success('操作成功')
+  })
+}
+// 字典
+
+const fetchDict = () => {
+  // 设备列表
+  getDeviceListPage({ offset: 1, limit: 9999 }).then((res) => {
+    deviceList.value = res.data.rows.map((item: any) => ({
+      name: item.devTypeName,
+      id: item.id,
+      value: item.devcode,
+      productId: item.productId,
+      position: item.position,
+      tagNumber: item.tagNumber,
+    })).filter((item: any) => item.productId && item.value)
+    // 产品
+    getProductListPage({ limit: 9999, offset: 1 }).then((res) => {
+      productList.value = res.data.rows.map((item: any) => ({
+        name: `${item.deviceTypeName}-${item.deviceModel}/${item.manufacturerName}`,
+        value: item.id,
+        id: item.id,
+      }))
+    })
+    // 报警规则
+    getAlarmRuleListPage({ limit: 9999, offset: 1 }).then((res) => {
+      alarmRuleList.value = res.data.rows.map((item: any) => ({
+        name: item.alarmName,
+        id: item.id,
+        value: item.id,
+        alarmTypeId: item.alarmTypeId,
+      }))
+    })
+    // 报警等级
+    getAlarmLevelListPage({ limit: 9999, offset: 1 }).then((res) => {
+      alarmLevelList.value = res.data.rows.map((item: any) => ({
+        name: item.alarmLevel,
+        id: item.id,
+        value: item.id,
+      }))
+    })
+  })
+}
+fetchDict()
+
+// 监听设备编号，自动填充产品，安装位号，详细地址
+watch(() => dataForm.value.devcode, (newVal) => {
+  if (newVal) {
+    const current = deviceList.value.filter((item: any) => item.value === dataForm.value.devcode)
+    if (current.length) {
+      dataForm.value.productId = current[0].productId
+      dataForm.value.tagNumber = current[0].tagNumber
+      dataForm.value.position = current[0].position
+    }
+  }
+}, {
+  deep: true,
+  immediate: true,
+})
+</script>
+
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="`${textMap[dialogStatus]}特殊报警规则`" append-to-body>
+    <el-form
+      ref="dataFormRef" :rules="rules" :model="dataForm" label-position="right"
+      :disabled="dialogStatus === 'detail'" label-width="110px"
+    >
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="设备编号" prop="devcode">
+            <el-select v-model.trim="dataForm.devcode" placeholder="设备编号" style="width: 100%;" clearable filterable>
+              <el-option v-for="item in deviceList" :key="item.id" :label="item.value" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产品" prop="productId">
+            <el-select
+              v-model.trim="dataForm.productId" placeholder="产品" style="width: 100%;" clearable filterable
+              disabled
+            >
+              <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="12">
+          <el-form-item label="安装位号" prop="tagNumber">
+            <el-input
+              v-model.trim="dataForm.tagNumber" type="text" placeholder="安装位号" style="width: 100%;" disabled
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="详细地址" prop="position">
+            <el-input
+              v-model.trim="dataForm.position" type="text" placeholder="安装位号" style="width: 100%;" disabled
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="报警规则" prop="">
+            <div style="width: 100%;">
+              <table-container title=" ">
+                <template #btns-right>
+                  <!-- 操作 -->
+                  <div>
+                    <el-button v-if="dialogStatus === 'create'" type="primary" @click="addRow">
+                      新增
+                    </el-button>
+                  </div>
+                </template>
+                <!-- 查询结果Table显示 -->
+                <normal-table :data="list" :total="0" :columns="[]" :query="{}" :pagination="false">
+                  <template #preColumns>
+                    <el-table-column label="序号" width="55" align="center">
+                      <template #default="scope">
+                        {{ scope.$index + 1 }}
+                      </template>
+                    </el-table-column>
+                  </template>
+                  <template #columns>
+                    <el-table-column v-for="item in columns" :key="item.text" :label="item.text" align="center">
+                      <template #default="scope">
+                        <!-- 报警规则 -->
+                        <template v-if="item.type === 'select' && item.code === 'alarm-rule'">
+                          <el-select
+                            v-model.trim="scope.row[item.value]" placeholder="报警规则" style="width: 100%;"
+                            clearable filterable :disabled="!scope.row.edit"
+                          >
+                            <el-option
+                              v-for="item in alarmRuleList" :key="item.id" :label="item.name"
+                              :value="item.name"
+                            />
+                          </el-select>
+                        </template>
+                        <!-- 报警等级 -->
+                        <template v-if="item.type === 'select' && item.code === 'alarm-level'">
+                          <el-select
+                            v-model.trim="scope.row[item.value]" placeholder="报警等级" style="width: 100%;"
+                            clearable filterable :disabled="!scope.row.edit"
+                          >
+                            <el-option
+                              v-for="item in alarmLevelList" :key="item.id" :label="item.name"
+                              :value="item.value"
+                            />
+                          </el-select>
+                        </template>
+                        <!-- 报警阈值 -->
+                        <div v-if="item.type === 'input'" style="width: 100%;">
+                          <el-input
+                            v-model.trim="scope.row[item.value]" placeholder="报警阈值" clearable type="number"
+                            style="width: 60%;" :disabled="!scope.row.edit"
+                          />
+                          <span>%LEL</span>
+                        </div>
+                      </template>
+                    </el-table-column>
+                    <el-table-column v-if="dialogStatus === 'create'" label="操作" width="140" align="center">
+                      <template #default="scope">
+                        <el-button
+                          v-if="scope.row.edit === true" type="primary" link size="small"
+                          @click="saveRow(scope)"
+                        >
+                          保存
+                        </el-button>
+                        <el-button
+                          v-if="scope.row.edit === false" type="primary" link size="small"
+                          @click="editRow(scope)"
+                        >
+                          编辑
+                        </el-button>
+                        <el-button
+                          v-if="scope.row.edit === true" type="danger" link size="small"
+                          @click="removeRow(scope)"
+                        >
+                          删除
+                        </el-button>
+                      </template>
+                    </el-table-column>
+                  </template>
+                </normal-table>
+              </table-container>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <div v-if="dialogStatus !== 'detail'" class="dialog-footer">
+        <el-button type="primary" @click="saveData">
+          确认
+        </el-button>
+        <el-button @click="cancel">
+          取消
+        </el-button>
+      </div>
+      <div v-else class="dialog-footer">
+        <el-button type="primary" @click="cancel">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.el-dialog {
+  width: 700px;
+}
+
+.el-select {
+  width: 100%;
+}
+</style>
diff --git a/src/views/home/rule/special/index.vue b/src/views/home/rule/special/index.vue
index b739dcd..65f2650 100644
--- a/src/views/home/rule/special/index.vue
+++ b/src/views/home/rule/special/index.vue
@@ -5,20 +5,22 @@
  -->
 <script lang="ts" setup name="RuleAlarmSpecialManage">
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
+import editDialog from './components/editDialog.vue'
 import { getDeviceTypeListPage } from '@/api/home/device/type'
+import { getSpecialAlarmRuleListPage, removeSpecialAlarmRule } from '@/api/home/rule/special'
 const deviceTypeList = ref<any[]>([]) // 设备类型列表
 // 表格数据
 const list = ref([])
 const total = ref(0)
 // 初始展示列
 const columns = ref<any>([
-  { text: '设备编号', value: '', align: 'center' },
-  { text: '设备类型', value: '', align: 'center' },
-  { text: '绑定点位', value: '', align: 'center' },
-  { text: '详细位置', value: '', align: 'center' },
-  { text: '报警规则', value: '', align: 'center' },
-  { text: '操作时间', value: '', align: 'center' },
-  { text: '操作人', value: '', align: 'center' },
+  { text: '设备编号', value: 'devcode', align: 'center' },
+  { text: '设备类型', value: 'devTypeName', align: 'center' },
+  { text: '绑定点位', value: 'tagNumber', align: 'center', width: '160' },
+  { text: '详细位置', value: 'position', align: 'center' },
+  { text: '报警规则', value: 'alarmRuleName', align: 'center' },
+  { text: '操作时间', value: 'ts', align: 'center' },
+  { text: '操作人', value: 'createUser', align: 'center', width: '110' },
 ])
 // 最终展示列
 const columnsConfig = ref([])
@@ -31,38 +33,31 @@
 const listQuery = ref({
   limit: 20,
   offset: 1,
+  devCode: '',
+  devTypeId: '',
 })
-// 开始结束时间
-// const datetimerange = ref()
-// watch(() => datetimerange.value, (newVal) => {
-//   listQuery.value.begTime = ''
-//   listQuery.value.endTime = ''
-//   if (Array.isArray(newVal)) {
-//     if (newVal.length) {
-//       listQuery.value.begTime = `${newVal[0]} 00:00:00`
-//       listQuery.value.endTime = `${newVal[1]} 23:59:59`
-//     }
-//   }
-// })
 // 查询数据
 const fetchData = () => {
   loadingTable.value = true
-  // getOperationListPage(listQuery.value).then((res) => {
-  //   list.value = res.data.rows.map((item: any) => ({
-  //     ...item,
-  //     deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
-  //   }))
-  //   total.value = res.data.total
-  loadingTable.value = false
-  // }).catch(() => {
-  //   loadingTable.value = false
-  // })
+  getSpecialAlarmRuleListPage(listQuery.value).then((res) => {
+    console.log(res.data.rows, '123321')
+    list.value = res.data.rows.map((item: any) => ({
+      ...item,
+      // deviceTypeName: deviceTypeList.value.filter((citem: any) => citem.id === item.deviceType)[0].typeName,
+    }))
+    total.value = res.data.total
+    loadingTable.value = false
+  }).catch(() => {
+    loadingTable.value = false
+  })
 }
 // 重置查询条件f
 const reset = () => {
   listQuery.value = {
     limit: 20,
     offset: 1,
+    devCode: '',
+    devTypeId: '',
   }
   fetchData()
 }
@@ -76,9 +71,27 @@
   }
   fetchData()
 }
-// 查看轨迹详情
-const detail = (row: any) => {
-
+// 查看详情
+const editRef = ref()
+const detail = (type: string, row: any) => {
+  editRef.value.initDialog(type, row)
+}
+// 删除行
+const removeRow = (row: any) => {
+  ElMessageBox.confirm(
+    '确定要删除该数据吗？',
+    '确认操作',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    },
+  ).then(() => {
+    removeSpecialAlarmRule(row.id).then(() => {
+      ElMessage.success('操作成功')
+      fetchData()
+    })
+  })
 }
 // 获取字典
 const fetchDict = async () => {
@@ -95,14 +108,15 @@
 <template>
   <!-- 布局 -->
   <app-container>
+    <edit-dialog ref="editRef" @refresh="fetchData" />
     <!-- 筛选条件 -->
     <search-area :need-clear="true" @search="fetchData" @clear="reset">
       <search-item>
-        <el-input v-model="listQuery.devcode" placeholder="设备编号" clearable />
+        <el-input v-model="listQuery.devCode" placeholder="设备编号" clearable />
       </search-item>
       <search-item>
         <el-select
-          v-model="listQuery.deviceType" placeholder="设备类型" clearable filterable class="select"
+          v-model="listQuery.devTypeId" placeholder="设备类型" clearable filterable class="select"
           style="width: 192px;"
         >
           <el-option v-for="item in deviceTypeList" :key="item.id" :label="item.typeName" :value="item.id" />
@@ -117,7 +131,7 @@
       <template #btns-right>
         <!-- 操作 -->
         <div>
-          <el-button type="primary">
+          <el-button type="primary" @click="detail('create', {})">
             新增
           </el-button>
         </div>
@@ -137,13 +151,13 @@
         <template #columns>
           <el-table-column label="操作" width="140" align="center">
             <template #default="scope">
-              <el-button type="primary" link size="small">
+              <el-button type="primary" link size="small" @click="detail('detail', scope.row)">
                 查看
               </el-button>
-              <el-button type="primary" link size="small" @click="detail(scope.row)">
+              <el-button type="primary" link size="small" @click="detail('edit', scope.row)">
                 编辑
               </el-button>
-              <el-button type="danger" link size="small">
+              <el-button type="danger" link size="small" @click="removeRow(scope.row)">
                 删除
               </el-button>
             </template>
diff --git a/src/views/home/station/station/components/map.vue b/src/views/home/station/station/components/map.vue
index 21437bf..7acfb73 100644
--- a/src/views/home/station/station/components/map.vue
+++ b/src/views/home/station/station/components/map.vue
@@ -183,6 +183,9 @@
   console.log('地图绘制完毕')
   // 绘制海量点
   resetDraw()
+  setTimeout(() => {
+    pageIsFirst.value = false
+  }, 2000)
 }
 defineExpose({ openInfoDetail, drawMarker, resetDraw })
 </script>
@@ -198,7 +201,7 @@
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
-        <span>{{ item.name }}</span>
+        <span style="margin-left: 5px;">{{ item.name }}</span>
       </div>
     </div>
   </div>
@@ -211,17 +214,17 @@
 }
 
 .legend {
-  background: rgb(68 66 66 / 20%);
+  background: rgb(255 255 255 / 80%);
   position: absolute;
   z-index: 1;
   left: 15px;
   bottom: 10px;
   padding: 0 10px;
-  border-radius: 8px;
+  border-radius: 3px;
 
   .legend-item {
-    margin: 5px 0;
-    font-weight: 700;
+    margin: 10px 0;
+    // font-weight: 700;
     display: flex;
     align-items: center;
 
diff --git a/src/views/home/well/components/map.vue b/src/views/home/well/components/map.vue
index f74230f..6b3d892 100644
--- a/src/views/home/well/components/map.vue
+++ b/src/views/home/well/components/map.vue
@@ -96,7 +96,7 @@
   const data = $props.data.map((item: any) => ({ ...item, monitorState: item.monitorState || '0' })).filter((item: any) => legendShowData.value.includes(item.monitorState)).filter((item: any) => item.lngGaode && item.latGaode).map((item: any) => ({
     lnglat: [item.lngGaode, item.latGaode],
     name: item.ledgerName,
-    style: item.monitorState ? styleDict[item.monitorState] : 3,
+    style: item.monitorState ? styleDict[item.monitorState] : 0,
     id: item.id,
     row: item,
   }))
@@ -183,6 +183,9 @@
   console.log('地图绘制完毕')
   // 绘制海量点
   resetDraw()
+  setTimeout(() => {
+    pageIsFirst.value = false
+  }, 2000)
 }
 defineExpose({ openInfoDetail, drawMarker, resetDraw })
 </script>
@@ -198,7 +201,7 @@
       <div v-for="item in legendData" :key="item.value" class="legend-item" @click="clickLegend(item.value)">
         <img v-show="legendShowData.includes(item.value)" class="img" :src="item.url">
         <span v-show="!legendShowData.includes(item.value)" class="img" />
-        <span>{{ item.name }}</span>
+        <span style="margin-left: 5px;">{{ item.name }}</span>
       </div>
     </div>
   </div>
@@ -211,17 +214,17 @@
 }
 
 .legend {
-  background: rgb(68 66 66 / 20%);
+  background: rgb(255 255 255 / 80%);
   position: absolute;
   z-index: 1;
   left: 15px;
   bottom: 10px;
   padding: 0 10px;
-  border-radius: 8px;
+  border-radius: 3px;
 
   .legend-item {
-    margin: 5px 0;
-    font-weight: 700;
+    margin: 10px 0;
+    // font-weight: 700;
     display: flex;
     align-items: center;