1.安全管理模块日志列表接口接入; 2. 日志监控和系统监控界面调整

src/api/security/logMonitor.js

@@ -0,0 +1,28 @@
+import { get, post } from "@/utils/requestMethod";
+
+/**
+ * 获取日志列表
+ * @param {*} page 
+ * @param {*} page_size 
+ * @param {*} name 
+ * @param {*} module 
+ * @param {*} operation_type 
+ * @param {*} operation_status 
+ * @returns 
+ */
+const getLogList = (
+  page,
+  page_size=10,
+  name="",
+  module_name="",
+  operation_type="",
+  operation_status=""
+) => {
+  return get(
+    `/log/log_list?page=${page}&page_size=${page_size}&name=${name}&module=${module_name}&operation_type=${operation_type}&operation_status=${operation_status}`
+  );
+};
+
+export{
+    getLogList 
+}

src/components/pagination/index.vue

@@ -1,53 +1,56 @@
 <template>
-    <div>
-        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-            :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
-            layout="total, prev, pager, next,sizes, jumper" :total="40">
-        </el-pagination>
-    </div>
-</template>
+    <el-pagination
+      background
+      layout="total, prev, pager, next, sizes, jumper"
+      :page-size="paginationData.pageSize"
+      :page-sizes="paginationData.pageSizes"
+      :pager-count="paginationData.pagerCount"
+      :total="paginationData.total"
+      :current-page="paginationData.currentPage"
+      @current-change="paginationData.currentChange"
+      @size-change="paginationData.handleSizeChange"
+    ></el-pagination>
+  </template>
 
 <script>
+/**
+ * 分页组件
+ * page-size -- 每页显示条目个数，支持 .sync 修饰符;
+ * pager-count -- 页码按钮的数量，当总页数超过该值时会折叠;
+ * total -- 总条目数;
+ * current-page -- 当前页数，支持 .sync 修饰符;
+ * current-change -- currentPage 改变时会触发;
+ * size-change -- handleSizeChange 切换条数时触发;
+ */
 export default {
-    name:'page',
-    data() {
-        return {
-            currentPage: 1,
-        }
-    },
-    methods: {
-        handleSizeChange(val) {
-            console.log(`每页 ${val} 条`);
-        },
-        handleCurrentChange(val) {
-            console.log(`当前页: ${val}`);
-        },
-    }
-}
+  name: "page",
+  props: ["paginationData"],
+  methods: {}
+};
 </script>
 
 <style lang="less" scoped>
 .el-pagination {
-    position: absolute;
-    width: 200px;
-    top: 10px;
-    right: 350px;
-
-    /deep/.el-pagination__jump {
-        margin-left: 0;
-    }
+  position: absolute;
+  width: 200px;
+  top: 10px;
+  right: 350px;
 
-    /deep/.btn-prev {
-        border-radius: 5px;
-    }
+  /deep/.el-pagination__jump {
+    margin-left: 0;
+  }
 
-    /deep/.btn-next {
-        border-radius: 5px;
-    }
+  /deep/.btn-prev {
+    border-radius: 5px;
+  }
 
-    /deep/ .el-pager li {
-        border-radius: 5px;
-    }
+  /deep/.btn-next {
+    border-radius: 5px;
+  }
 
+  /deep/ .el-pager li {
+    border-radius: 5px;
+    background: rgba(99, 165, 164, 0.1) ;
+  }
 }
-</style>
+</style>

src/utils/request.js

@@ -14,71 +14,75 @@ service.interceptors.request.use(
   config => {
     // do something before request is sent
 
-    if (store.getters.token) {
+    // if (store.getters.token) {
       // let each request carry token
       // ['X-Token'] is a custom headers key
       // please modify it according to the actual situation
-      config.headers['X-Token'] = getToken()
-    }
+      // config.headers['X-Token'] = getToken()
+    // }
     return config
   },
-  error => {
-    // do something with request error
-    console.log(error) // for debug
-    return Promise.reject(error)
-  }
+  // error => {
+  //   // do something with request error
+  //   console.log(error) // for debug
+  //   return Promise.reject(error)
+  // }
 )
 
 // response interceptor
-service.interceptors.response.use(
-  /**
-   * If you want to get http information such as headers or status
-   * Please return  response => response
-  */
+service.interceptors.response.use((response) => {
+  return response
+})
 
-  /**
-   * Determine the request status by custom code
-   * Here is just an example
-   * You can also judge the status by HTTP Status Code
-   */
-  response => {
-    const res = response.data
+// service.interceptors.response.use(
+//   /**
+//    * If you want to get http information such as headers or status
+//    * Please return  response => response
+//   */
 
-    // if the custom code is not 20000, it is judged as an error.
-    if (res.code !== 20000) {
-      Message({
-        message: res.message || 'Error',
-        type: 'error',
-        duration: 5 * 1000
-      })
+//   /**
+//    * Determine the request status by custom code
+//    * Here is just an example
+//    * You can also judge the status by HTTP Status Code
+//    */
+//   response => {
+//     const res = response.data
 
-      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
-        // to re-login
-        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-          confirmButtonText: 'Re-Login',
-          cancelButtonText: 'Cancel',
-          type: 'warning'
-        }).then(() => {
-          store.dispatch('user/resetToken').then(() => {
-            location.reload()
-          })
-        })
-      }
-      return Promise.reject(new Error(res.message || 'Error'))
-    } else {
-      return res
-    }
-  },
-  error => {
-    console.log('err' + error) // for debug
-    Message({
-      message: error.message,
-      type: 'error',
-      duration: 5 * 1000
-    })
-    return Promise.reject(error)
-  }
-)
+//     // if the custom code is not 20000, it is judged as an error.
+//     if (res.code !== 20000) {
+//       Message({
+//         message: res.message || 'Error',
+//         type: 'error',
+//         duration: 5 * 1000
+//       })
+
+//       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+//       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+//         // to re-login
+//         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+//           confirmButtonText: 'Re-Login',
+//           cancelButtonText: 'Cancel',
+//           type: 'warning'
+//         }).then(() => {
+//           store.dispatch('user/resetToken').then(() => {
+//             location.reload()
+//           })
+//         })
+//       }
+//       return Promise.reject(new Error(res.message || 'Error'))
+//     } else {
+//       return res
+//     }
+//   },
+//   error => {
+//     console.log('err' + error) // for debug
+//     Message({
+//       message: error.message,
+//       type: 'error',
+//       duration: 5 * 1000
+//     })
+//     return Promise.reject(error)
+//   }
+// )
 
 export default service

src/utils/requestMethod.js

@@ -0,0 +1,87 @@
+import request from '@/utils/request'
+import user from "@/store/user"
+
+let currentToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX25hbWUiOiJcdTVmMjBcdTRlMDkiLCJleHAiOjE2ODA3NzEzOTV9.aQ51C_OIOoHDGi-ua6aGPdF2WqNGCgEp1IdqK_zdfOo"
+
+function get(url, params) {
+  return new Promise((resolve, reject) => {
+    request({
+      method: "GET",
+      url,
+      params: params,
+      headers: {
+        token: user.token || currentToken,
+      },
+    })
+      .then((res) => {
+        resolve(res);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
+
+function post(url, data) {
+  return new Promise((resolve, reject) => {
+    request({
+      method: "POST",
+      url,
+      data: data,
+      headers: {
+        token: user.token || "",
+        "Content-Type": "multipart/form-data;",
+      },
+    })
+      .then((res) => {
+        resolve(res);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
+
+function del(url, data) {
+  return new Promise((resolve, reject) => {
+    request({
+      method: "DELETE",
+      url,
+      data: data,
+      headers: {
+        "Content-Type": "application/json;",
+      },
+    })
+      .then((res) => {
+        resolve(res);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
+
+
+function delform(url, data) {
+  return new Promise((resolve, reject) => {
+    request({
+      method: "DELETE",
+      url,
+      data: JSON.stringify(data),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded;",
+      },
+    })
+      .then((res) => {
+        resolve(res);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
+
+export {
+  get,
+  post
+}

src/views/securityManagement/logMonitor.vue

@@ -81,7 +81,8 @@
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="50"> </el-table-column>
-        <el-table-column prop="logID" label="日志编号"> </el-table-column>
+        <el-table-column label="序号" type="index" width="60">
+        </el-table-column>
         <el-table-column prop="systemTemplate" label="系统模块">
         </el-table-column>
         <el-table-column prop="operationType" label="操作类型">
@@ -103,16 +104,12 @@
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="operationTime" label="操作时间">
+        <el-table-column prop="operationTime" label="操作时间" width="180">
         </el-table-column>
       </el-table>
     </div>
     <div class="bottom">
-      <div style="width: 100%; height: 100%; position: absolute">
-        <!-- 逻辑bug,如果选中应该怎么办 -->
-        <el-checkbox class="checkbox" v-model="isSelected"
-          >已选{{ multipleSelection.length }}项</el-checkbox
-        >
+      <!-- <div style="width: 100%; height: 100%; position: absolute">
         <el-button
           class="check-cancel"
           size="mini"
@@ -133,8 +130,8 @@
         <el-button class="export" type="text" @click="exportData"
           >导出数据</el-button
         >
-      </div>
-      <page class="page"></page>
+      </div> -->
+      <page class="page" :paginationData="paginationData"></page>
     </div>
   </div>
 </template>
@@ -142,58 +139,59 @@
 <script>
 import checkbox from "@/components/Checkbox/index";
 import page from "@/components/pagination/index";
+import { getLogList } from "@/api/security/logMonitor";
 export default {
   components: { checkbox, page },
   data() {
     return {
-      isSelected: false,
       show: true,
       form: {
-        moduleName: "全部",
+        moduleName: "",
+        operationType: "",
         nameInput: "",
-        operationType: "全部",
-        operationStatus: "2",
+        operationStatus: "",
         timeVal: "",
       },
-      tableData: [
-        {
-          logID: "176",
-          systemTemplate: "用户登录",
-          operationType: "新增",
-          requestType: "post",
-          operationPerson: "管理员",
-          operationAddress: "11.11.11.11",
-          operationAddress_desc: "内网IP",
-          operationStatus: "true",
-          operationTime: "2023-01-01 00:00",
-        },
-        {
-          logID: "176",
-          systemTemplate: "用户登录",
-          operationType: "新增",
-          requestType: "post",
-          operationPerson: "管理员",
-          operationAddress: "11.11.11.11",
-          operationAddress_desc: "内网IP",
-          operationStatus: "true",
-          operationTime: "2023-01-01 00:00",
-        },
-        {
-          logID: "176",
-          systemTemplate: "用户登录",
-          operationType: "新增",
-          requestType: "post",
-          operationPerson: "管理员",
-          operationAddress: "11.11.11.11",
-          operationAddress_desc: "内网IP",
-          operationStatus: "false",
-          operationTime: "2023-01-01 00:00",
-        },
-      ],
+      tableData: [],
+      // tableData: [
+      //   {
+      //     logID: "176",
+      //     systemTemplate: "用户登录",
+      //     operationType: "新增",
+      //     requestType: "post",
+      //     operationPerson: "管理员",
+      //     operationAddress: "11.11.11.11",
+      //     operationAddress_desc: "内网IP",
+      //     operationStatus: "true",
+      //     operationTime: "2023-01-01 00:00",
+      //   },
+      //   {
+      //     logID: "176",
+      //     systemTemplate: "用户登录",
+      //     operationType: "新增",
+      //     requestType: "post",
+      //     operationPerson: "管理员",
+      //     operationAddress: "11.11.11.11",
+      //     operationAddress_desc: "内网IP",
+      //     operationStatus: "true",
+      //     operationTime: "2023-01-01 00:00",
+      //   },
+      //   {
+      //     logID: "176",
+      //     systemTemplate: "用户登录",
+      //     operationType: "新增",
+      //     requestType: "post",
+      //     operationPerson: "管理员",
+      //     operationAddress: "11.11.11.11",
+      //     operationAddress_desc: "内网IP",
+      //     operationStatus: "false",
+      //     operationTime: "2023-01-01 00:00",
+      //   },
+      // ],
       operationTypeOptions: [
         {
-          value: "全部",
-          label: "全部",
+          value: "",
+          label: "不限",
         },
         {
           value: "新增",
@@ -223,8 +221,8 @@ export default {
       ],
       operationStatusOptions: [
         {
-          value: "2",
-          label: "全部",
+          value: "",
+          label: "不限",
         },
         {
           value: "0",
@@ -237,8 +235,8 @@ export default {
       ],
       moduleNameOptions: [
         {
-          value: "全部",
-          label: "全部",
+          value: "",
+          label: "不限",
         },
         {
           value: "登入",
@@ -278,23 +276,68 @@ export default {
         children: "children",
         label: "label",
       },
+      currentPageSize: 10,
+      currentPage: 1,
+      paginationData: {
+        pageSize: 10,
+        pagerCount: 5,
+        currentPage: 1,
+        pageSizes: [5, 10, 20, 30],
+        total: 30,
+        currentChange: (val) => {
+          this.getTableData(val);
+        },
+        handleSizeChange: (val) => {
+          this.handleSizeChange(val);
+        },
+      },
     };
   },
   watch: {
     filterText(val) {
       this.$refs.search.filter(val);
     },
-    isSelected(val) {
-      if (!val) {
-        this.$refs.multipleTable.clearSelection();
-      }
-    },
   },
   mounted() {
     this.initData();
   },
   methods: {
-    initData() {},
+    initData() {
+      this.getTableData(1);
+    },
+    getTableData(page) {
+      this.tableData = [];
+      getLogList(
+        page,
+        this.currentPageSize,
+        this.form.nameInput,
+        this.form.moduleName,
+        this.form.operationType,
+        this.form.operationStatus
+      ).then((res) => {
+        if (res.data.code === 0 && res.data.data.length > 0) {
+          this.tableData = res.data.data.map((v) => {
+            return {
+              logID: v.id,
+              systemTemplate: v.module,
+              operationType: v.operation_type,
+              requestType: v.request,
+              operationPerson: v.operation_staff,
+              operationAddress: v.operation_address,
+              operationAddress_desc: "内网IP",
+              operationStatus: v.operation_status == "0" ? "true" : "false",
+              operationTime: v.operation_time,
+            };
+          });
+        }
+      });
+    },
+    // 切换条数
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.currentPageSize = val;
+      this.getTableData(this.currentPage);
+    },
     filterNode(value, data) {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
@@ -303,22 +346,18 @@ export default {
       this.$refs.multipleTable.clearSelection();
     },
     handleSelectionChange(val) {
-      if (val.length > 0) {
-        this.isSelected = true;
-      } else {
-        this.isSelected = false;
-      }
       this.multipleSelection = val;
     },
     resetEvent() {
-      this.form.moduleName = "全部";
+      this.form.moduleName = "";
       this.form.nameInput = "";
-      this.form.operationType = "全部";
-      this.operationStatus = "2";
+      this.form.operationType = "";
+      this.form.operationStatus = "";
       this.searchEvent();
     },
     searchEvent() {
       console.log(this.form);
+      this.getTableData(this.currentPage)
     },
     exportEvent() {
       console.log("导出事件");

src/views/securityManagement/messageDialog/alterTask.vue

@@ -48,14 +48,19 @@
         </el-form-item>
         <el-button
           type="text"
-          style="margin: 0px 0 0 330px;color:#2EA8E6;"
+          style="margin: 0px 0 0 330px; color: #2ea8e6"
           @click="innerVisible = true"
           >生成表达式</el-button
         >
       </el-form>
       <div slot="footer">
         <el-button @click="resetForm('form')">重置</el-button>
-        <el-button type="primary" @click="submitForm('form')">确认</el-button>
+        <el-button
+          style="background: #2ea8e6"
+          type="primary"
+          @click="submitForm('form')"
+          >确认</el-button
+        >
       </div>
       <el-dialog
         v-dialog-drag
@@ -256,7 +261,7 @@ export default {
   height: 30vh;
 }
 
-/deep/.el-dialog__header{
+/deep/.el-dialog__header {
   text-align: left;
 }
 
@@ -299,7 +304,7 @@ export default {
     color: #fff;
     background: #b3b3b3;
   }
-  &:nth-child(3){
+  &:nth-child(3) {
     background: #2ea8e6;
     color: #fff;
   }

src/views/securityManagement/systemMonitor/periodicTask.vue

@@ -45,11 +45,9 @@
     </div>
     <div class="content">
       <div class="content-inner">
-        <el-button class="blue-btn">新增</el-button>
-        <el-button class="blue-btn" @click="alterTask()">修改</el-button>
-        <el-button class="blue-btn">导出</el-button>
-        <el-button class="blue-btn">日志</el-button>
-        <el-button class="delete-btn">删除</el-button>
+        <el-button class="blue-btn" @click="addEvent">新增</el-button>
+        <el-button class="blue-btn" @click="batchActivate">批量激活</el-button>
+        <el-button class="delete-btn" @click="batchDelete">批量删除</el-button>
       </div>
       <el-table
         ref="multipleTable"
@@ -90,12 +88,14 @@
               v-show="scope.row.taskID == null ? false : true"
               size="mini"
               type="text"
+              @click="alterTask"
               >编辑</el-button
             >
             <el-button
               v-show="scope.row.taskID == null ? false : true"
               size="mini"
               type="text"
+              @click="deleteEvent(scope.row)"
               >删除</el-button
             >
           </template>
@@ -103,8 +103,7 @@
       </el-table>
     </div>
     <div class="bottom">
-      <div style="width: 100%; height: 100%; position: absolute">
-        <checkbox class="checkbox" v-model="total">已选2项</checkbox>
+      <!-- <div style="width: 100%; height: 100%; position: absolute">
         <el-button
           class="check-cancel"
           size="mini"
@@ -119,8 +118,8 @@
         <el-button class="disabled" type="text">批量激活</el-button>
         <el-divider direction="vertical"></el-divider>
         <el-button class="export" type="text">导出数据</el-button>
-      </div>
-      <page></page>
+      </div> -->
+      <page class="page" :paginationData="paginationData"></page>
     </div>
     <alterTask ref="altertask"></alterTask>
   </div>
@@ -135,7 +134,6 @@ export default {
   components: { checkbox, page, alterTask },
   data() {
     return {
-      total: 0,
       input: "",
       show: true,
       form: {
@@ -220,7 +218,7 @@ export default {
       taskStatusOptions: [
         {
           value: "0",
-          label: "全部",
+          label: "不限",
         },
         {
           value: "1",
@@ -234,7 +232,7 @@ export default {
       taskGroupOptions: [
         {
           value: "0",
-          label: "全部",
+          label: "不限",
         },
         {
           value: "1",
@@ -245,12 +243,37 @@ export default {
           label: "默认",
         },
       ],
+      multipleSelection: [],
+      currentPageSize: 10,
+      currentPage: 1,
+      paginationData: {
+        pageSize: 10,
+        pagerCount: 5,
+        currentPage: 1,
+        pageSizes: [5, 10, 20, 30],
+        total: 30,
+        currentChange: (val) => {
+          this.getTableData(val);
+        },
+        handleSizeChange: (val) => {
+          this.handleSizeChange(val);
+        },
+      },
     };
   },
-
+  mounted() {
+    this.initData();
+  },
   methods: {
-    handleSelectionChange() {},
-    cancleChecked() {},
+    initData() {
+      this.getTableData(1);
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+    cancleChecked() {
+      this.$refs.multipleTable.clearSelection();
+    },
     alterTask() {
       this.$refs.altertask.dialogVisible = true;
     },
@@ -259,7 +282,18 @@ export default {
     },
     searchEvent() {
       console.log(this.form);
+      this.getTableData(1);
+    },
+    getTableData(val) {},
+    handleSizeChange() {},
+    deleteEvent(data) {
+      this.tableData = this.tableData.filter((v) => {
+        return v.id !== data.id;
+      });
     },
+    addEvent() {},
+    batchActivate() {},
+    batchDelete() {},
   },
 };
 </script>