首页事件告警

ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/WarningList.vue

@@ -1,47 +1,91 @@
 <template>
   <div class="warning_list">
     <el-tabs v-model="activeTab" @tab-click="onChangeTab">
-      <el-tab-pane label="告警事件" name="first">用户管理</el-tab-pane>
+      <el-tab-pane label="告警事件" name="first" />
-      <el-tab-pane label="待确认事件" name="second">配置管理</el-tab-pane>
+      <el-tab-pane label="待确认事件" name="second" />
     </el-tabs>
+
+    <div>
+      <Table :data="tableData" :show-header="false">
+        <ElTableColumn prop="remark" width="280" />
+      </Table>
+    </div>
+
+    <div class="footer">
+      <Pagination @current-change="getMainData" @size-change="onSizeChange" width="'100%'"
+        :page-sizes="[10, 20, 30, 40, 50]" :page-size="searchData.pageSize" :current-page.sync="searchData.pageNum"
+        layout="total, sizes, prev, pager, next" :total="total">
+      </Pagination>
+    </div>
   </div>
 </template>
 
 <script>
 import request from "@/utils/request";
+import Table from '@screen/components/Table.vue';
+import Pagination from '@screen/components/Pagination.vue';
 export default {
   data() {
     return {
-      activeTab:"first"
+      activeTab: "first",
+      tableData: [],
+      total: 10,
+      searchData: {
+        pageSize: 10,
+        pageNum: 1,
+      },
     };
   },
   components: {
+    Table,
+    Pagination
   },
   computed: {
   },
+  mounted() {
+    this.getMainData();
+  },
   methods: {
-    onChangeTab(tab, event){
+    onChangeTab(tab, event) {
       console.log(tab, event);
       this.getMainData();
     },
-    getMainData(){
+    getMainData() {
-      request({
+      if (this.activeTab == 'first') {
-        // url: `/business/dcBatchFunctionsJobGroup`,
+        request({
-        url: `/perceivedEvents/warning/perceivedEventsList`,
+          url: `perceivedEvents/warning/perceivedEventsList?pageNum=${this.searchData.pageNum}&pageSize=${this.searchData.pageSize}`,
-        method: "GET",
+          method: "POST",
-        params:{}
+          data: {}
-      })
+        })
-        .then((result) => {
+          .then((result) => {
-          if (result.code != 200) return;
+            if (result.code != 200) return;
-          console.log( result.data , "刚发的刚发的发多少++++");
+            this.tableData = result.rows;
+            this.total = result.total;
+          })
+      } else if (this.activeTab == 'second') {
+        request({
+          url: `dc/system/event/list?eventState=0&pageSize=${this.searchData.pageSize}&pageNum=${this.searchData.pageNum}`,
+          method: "GET",
+          // params: {}
         })
-    }
+          .then((result) => {
+            if (result.code != 200) return;
+            result.rows.forEach(item => {
+              item.remark = item.occurrenceTime + " " + item.stakeMark + " " + item.direction + " 发生" + item.stringEventType + "( " + item.eventSubclass + ")事件"
+            })
+            this.tableData = result.rows;
+            this.total = result.total;
+          })
+      }
+    },
+    onSizeChange(pageSize) {
+      this.searchData.pageSize = pageSize;
+      this.getMainData();
+    },
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.warning_list{
+.warning_list {}
-
-}
 </style>