diff --git a/ALOps_sys_fe/alops-ui/src/api/message/index.js b/ALOps_sys_fe/alops-ui/src/api/message/index.js
new file mode 100644
index 00000000..0fcd0dab
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/api/message/index.js
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+import { parseStrEmpty } from "@/utils/ruoyi";
+
+// 查询预警消息列表
+export function messageList(query) {
+  return request({
+    url: '/message/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+
diff --git a/ALOps_sys_fe/alops-ui/src/views/message/index.vue b/ALOps_sys_fe/alops-ui/src/views/message/index.vue
new file mode 100644
index 00000000..5d2c7238
--- /dev/null
+++ b/ALOps_sys_fe/alops-ui/src/views/message/index.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
+        <!--设备档案-->
+        <pane size="84">
+          <el-col>
+            <el-table v-loading="loading" :data="dataList">
+              <el-table-column type="selection" width="50" align="center" />
+              <el-table-column
+                label="序号"
+                width="60"
+                type="index"
+              ></el-table-column>              
+              <el-table-column label="消息ID" align="center" key="id" prop="id" width="80" />
+              <el-table-column label="用户ID" align="center" key="userId" prop="userId" width="80" />
+              <el-table-column label="消息内容" align="center" key="content" prop="content" :show-overflow-tooltip="true">
+                <template slot-scope="scope">
+                  <span>{{ scope.row.content || '--' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="消息状态" align="center" key="status" prop="status" width="100">
+                <template slot-scope="scope">
+                  <el-tag :type="scope.row.status === 'unread' ? 'primary' : 'success'">
+                    {{ scope.row.status === 'unread' ? '未读' : '已读' }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="标题" align="center" key="title" prop="title" :show-overflow-tooltip="true">
+                <template slot-scope="scope">
+                  <span>{{ scope.row.title || '--' }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+                <template slot-scope="scope">
+                  <span>{{ parseTime(scope.row.createTime) }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+          </el-col>
+        </pane>
+      </splitpanes>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { messageList } from "@/api/message/index"
+import { Splitpanes, Pane } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
+
+export default {
+  name: "Message",
+  components: { Splitpanes, Pane },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+
+
+      // 总条数
+      total: 0,
+      // 消息数据列表
+      dataList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        status: undefined
+      },
+
+    }
+  },
+
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询设备列表 */
+    getList() {
+      this.loading = true
+      messageList(this.queryParams).then(response => {
+          this.dataList = response.data || []
+          this.total = response.data?.length || 0
+          this.loading = false
+        }
+      )
+    },
+
+
+  }
+}
+</script>