From 0d3db253cad1fb49c4fae9b9a537c8c318c7172f Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 29 十一月 2023 10:23:59 +0800
Subject: [PATCH] 优化应用中心卸载

---
 src/pages/syslog/views/systemLog.vue |  342 +++++++++++++++++++++++++++++++-------------------------
 1 files changed, 187 insertions(+), 155 deletions(-)

diff --git a/src/pages/syslog/views/systemLog.vue b/src/pages/syslog/views/systemLog.vue
index 4bd479f..fb9c3a5 100644
--- a/src/pages/syslog/views/systemLog.vue
+++ b/src/pages/syslog/views/systemLog.vue
@@ -23,19 +23,14 @@
             v-model="fuzzySearch"
             size="small"
             class="input-with-select"
+            @keyup.enter.native="getVaSystemLog(1)"
           >
-            <span
-              class="icon iconfont"
-              @click="getOperationLog(1)"
-              slot="append"
-            >
+            <span class="icon iconfont icon_clear" @click="clearSearch" slot="append" v-if="fuzzySearch">
+              &#xe785;
+            </span>
+            <span class="icon iconfont icon_search" @click="getVaSystemLog(1)" slot="append">
               &#xe714;
             </span>
-            <!-- <el-button
-              slot="append"
-              icon="el-icon-search"
-              @click="getOperationLog(1)"
-            ></el-button> -->
           </el-input>
         </div>
       </div>
@@ -43,37 +38,22 @@
         <div class="bar">
           <div class="name">绾у埆锛�</div>
 
-          <el-select
-            v-model="level"
-            placeholder="璇烽�夋嫨"
-            size="small"
-            @change="levelChange"
-          >
-            <el-option label="鍏ㄩ儴" :value="''"> </el-option>
-            <el-option
-              v-for="item in levelOptions"
-              :key="item.proc_name"
-              :label="item.proc_name"
-              :value="item.proc_name"
-            >
+          <el-select v-model="level" placeholder="璇烽�夋嫨" size="small" @change="getVaSystemLog">
+            <el-option v-for="(item, index) in levelOptions" :key="index" :label="item.label" :value="item.value">
             </el-option>
           </el-select>
         </div>
         <div class="bar">
-          <div class="name">涓绘満鍚嶏細</div>
+          <div class="name">杩涚▼</div>
           <el-select
-            v-model="hostName"
+            v-model="procName"
             placeholder="璇烽�夋嫨"
             size="small"
-            @change="getOperationLog(1)"
+            @change="getVaSystemLog(1)"
+            clearable
+            multiple
           >
-            <el-option
-              v-for="item in hostNameOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
+            <el-option v-for="(item, index) in procOptions" :key="index" :label="item" :value="item"> </el-option>
           </el-select>
         </div>
       </div>
@@ -86,44 +66,30 @@
         :data="tableData"
         :header-cell-style="{ background: '#f8f8f8', color: '#222222' }"
         style="width: 100%"
+        border
+        :row-class-name="tableRowClassName"
       >
-        <!-- <el-table-column :align="'center'" label="搴忓彿" type="index" width="50">
-        </el-table-column> -->
-        <el-table-column
+        <template slot="empty">
+          <img :src="png" class="empty_img" alt="" />
+        </template>
+        <el-table-column :align="'center'" label="搴忓彿" type="index" width="100"> </el-table-column>
+        <el-table-column :align="'center'" sortable prop="level" label="绾у埆" width="100px">
+          <template slot-scope="scope">
+            <span>{{ scope.row.level | leverFilter }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :align="'center'" sortable prop="procName" label="杩涚▼" width="150px"></el-table-column>
+        <el-table-column :align="'center'" sortable prop="procID" label="杩涚▼鍙�" width="150px"></el-table-column>
+        <!-- <el-table-column
           :align="'center'"
-          sortable
-          prop="add_time"
-          label="绾у埆"
-        ></el-table-column>
-        <el-table-column
-          sortable
-          :align="'center'"
-          prop="userName"
-          label="鏃ユ湡鏃堕棿"
-        ></el-table-column>
-        <el-table-column
-          :align="'center'"
-          sortable
-          prop="module"
-          label="杩涚▼"
-        ></el-table-column>
-        <el-table-column
-          :align="'center'"
-          prop="procName"
-          label="璇︾粏淇℃伅"
-        ></el-table-column>
-        <el-table-column
-          :align="'center'"
-          sortable
-          prop="result"
-          label="杩涚▼鍙�"
-        ></el-table-column>
-        <el-table-column
-          :align="'center'"
-          prop="msg"
+          prop="hostName"
           min-width="100px"
           label="涓绘満鍚�"
-        ></el-table-column>
+          width="150px"
+        ></el-table-column> -->
+
+        <el-table-column sortable :align="'center'" prop="createDate" label="鏃ユ湡鏃堕棿" width="200px"></el-table-column>
+        <el-table-column prop="info" label="璇︾粏淇℃伅"></el-table-column>
       </el-table>
     </div>
 
@@ -141,132 +107,157 @@
 </template>
 
 <script>
-import { deleteDate } from "@/api/system";
-import { pad0 } from "@/api/utils";
-import {} from "@/api/log";
+import { queryVaSystemLog, queryProcName } from "@/api/log"
+import { pad0 } from "@/api/utils"
+const levelOptions = [
+  {
+    value: 0,
+    label: "鍏ㄩ儴",
+    style: ""
+  },
+  {
+    value: 1,
+    label: "涓ラ噸",
+    style: "error-row"
+  },
+  {
+    value: 2,
+    label: "閿欒",
+    style: "error-row"
+  },
+  {
+    value: 3,
+    label: "璀﹀憡",
+    style: "warning-row"
+  },
+  {
+    value: 4,
+    label: "淇℃伅",
+    style: ""
+  },
+  {
+    value: 5,
+    label: "璋冭瘯",
+    style: ""
+  }
+]
 
 export default {
   data() {
     return {
+      png: require("../../../../public/images/syslog/娌℃暟鎹�.png"),
       loading: false,
       loadingText: "",
-      input3: "",
       tableData: [],
       dateArr: ["浠婃棩", "杩戜笁澶�", "杩戜竷澶�", "杩戜竴涓湀", "杩戝叚涓湀"],
-      levelOptions: [],
+
+      procOptions: [],
       hostNameOptions: [],
-      resultOptions: [
-        {
-          value: "",
-          label: "鍏ㄩ儴",
-        },
-        {
-          value: "鎴愬姛",
-          label: "鎴愬姛",
-        },
-        {
-          value: "澶辫触",
-          label: "澶辫触",
-        },
-      ],
+      levelOptions: levelOptions,
       value: "",
       page: 1,
       pageSize: 15,
       activeDateChoise: 0,
-      hostName: "",
-      result: "",
-      level: "",
+      procName: [],
+      level: 0,
       timeStart: "",
       timeEnd: "",
       fuzzySearch: "",
-      total: 0,
-    };
+      total: 0
+    }
+  },
+  filters: {
+    leverFilter(val) {
+      for (let i = 0; i < levelOptions.length; i++) {
+        if (levelOptions[i].value === val) {
+          return levelOptions[i].label
+        }
+      }
+    }
   },
   mounted() {
-    this.getTimeRange(24 * 60 * 60 * 1000);
-    // this.getOperationLog();
-    this.getOptions();
+    this.getTimeRange(24 * 60 * 60 * 1000)
+    this.getVaSystemLog()
+    this.getOptions()
   },
   methods: {
+    tableRowClassName({ row, rowIndex }) {
+      for (let i = 0; i < levelOptions.length; i++) {
+        if (levelOptions[i].value === row.level) {
+          return levelOptions[i].style
+        }
+      }
+    },
     handleSizeChange(val) {
-      this.pageSize = val;
-      // this.getOperationLog();
+      this.pageSize = val
+      this.getVaSystemLog()
     },
     handleCurrentChange(val) {
-      this.page = val;
-      // this.getOperationLog();
-    },
-    levelChange(val) {
-      // this.getOperationLog(1);
-      // this.hostName = "";
-      // getOperations({
-      //   module: this.level,
-      // }).then((res) => {
-      //   this.hostNameOptions = res.data;
-      // });
+      this.page = val
+      this.getVaSystemLog()
     },
     getOptions() {
-      getModules().then((res) => {
-        this.levelOptions = res.data;
-      });
+      queryProcName().then((res) => {
+        this.procOptions = res.data
+      })
     },
     choseRange(item, i) {
       switch (item) {
         case "浠婃棩":
-          this.getTimeRange(24 * 60 * 60 * 1000);
-          break;
+          this.getTimeRange(24 * 60 * 60 * 1000)
+          break
         case "杩戜笁澶�":
-          this.getTimeRange(24 * 60 * 60 * 1000 * 3);
-          break;
+          this.getTimeRange(24 * 60 * 60 * 1000 * 3)
+          break
         case "杩戜竷澶�":
-          this.getTimeRange(24 * 60 * 60 * 1000 * 7);
-          break;
+          this.getTimeRange(24 * 60 * 60 * 1000 * 7)
+          break
         case "杩戜竴涓湀":
-          this.getTimeRange(24 * 60 * 60 * 1000 * 30);
-          break;
+          this.getTimeRange(24 * 60 * 60 * 1000 * 30)
+          break
         case "杩戝叚涓湀":
-          this.getTimeRange(24 * 60 * 60 * 1000 * 30 * 6);
-          break;
+          this.getTimeRange(24 * 60 * 60 * 1000 * 30 * 6)
+          break
         default:
-          break;
+          break
       }
-      // this.getOperationLog(1);
-      this.activeDateChoise = i;
+      this.activeDateChoise = i
+      this.getVaSystemLog()
     },
-    getOperationLog(typ) {
+    getVaSystemLog(typ) {
       if (typ == 1) {
-        this.page = 1;
+        this.page = 1
       }
-      // queryOperationLog({
-      //   timeStart: this.timeStart,
-      //   timeEnd: this.timeEnd,
-      //   page: this.page,
-      //   pageSize: this.pageSize,
-      //   module: this.level,
-      //   function: this.hostName,
-      //   result: this.result,
-      //   fuzzySearch: this.fuzzySearch,
-      // }).then((res) => {
-      //   this.tableData = res.data.logs;
-      //   this.total = res.data.total;
-      // });
+      queryVaSystemLog({
+        timeStart: this.timeStart,
+        timeEnd: this.timeEnd,
+        level: this.level,
+        procName: this.procName,
+        fuzzySearch: this.fuzzySearch,
+        page: this.page,
+        pageSize: this.pageSize
+      }).then((res) => {
+        this.tableData = res.data.logs
+        this.total = res.data.total
+      })
     },
     getTimeStr(date) {
-      var month = pad0(date.getMonth() + 1); //鏈�
-      var day = pad0(date.getDate()); //鏃�
-      var hour = pad0(date.getHours()); //鏃�
-      var minute = pad0(date.getMinutes()); //鍒�
-      var second = pad0(date.getSeconds()); //绉�
-      return `${date.getFullYear()}-${month}-${day} ${hour}:${minute}:${second}`;
+      var month = pad0(date.getMonth() + 1) //鏈�
+      var day = pad0(date.getDate()) //鏃�
+      return `${date.getFullYear()}-${month}-${day}`
     },
     getTimeRange(gap) {
-      var date = new Date(); //褰撳墠鏃堕棿
-      var preDay = new Date(new Date().getTime() - gap);
-      this.timeStart = this.getTimeStr(preDay);
-      this.timeEnd = this.getTimeStr(date);
+      var date = new Date() //褰撳墠鏃堕棿
+      var preDay = new Date(new Date().getTime() - gap + 24 * 60 * 60 * 1000)
+      this.timeStart = this.getTimeStr(preDay) + " 00:00:00"
+      this.timeEnd = this.getTimeStr(date) + " 23:59:59"
     },
-  },
-};
+    clearSearch() {
+      this.fuzzySearch = ""
+      this.getVaSystemLog(1)
+    }
+  }
+}
 </script>
 <style lang="scss">
 .sys-log {
@@ -341,13 +332,14 @@
             border: 2px solid #f2f2f7;
             border-right: none;
 
-            // &:focus + .el-input-group__append {
-            //   border-color: #409eff;
-            // }
+            &:focus,
+            &:focus + .el-input-group__append {
+              border-color: #409eff;
+            }
           }
 
           .el-input-group__append {
-            //    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+            transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
             background-color: #fff;
             border: 2px solid #f2f2f7;
             border-radius: 0 18px 18px 0;
@@ -403,17 +395,49 @@
     margin-top: 16px;
     border-radius: 5px;
     padding: 12px;
-    background-color: white;
+    background-color: rgb(255, 255, 255);
+    .empty_img {
+      margin: 80px auto;
+      width: 164px;
+    }
     .tableBox {
+      border: none;
+      &::before,
+      &::after {
+        display: none;
+      }
+
+      tr {
+        td:first-child {
+          border-radius: 4px 0 0 4px;
+        }
+        td:last-child {
+          border-radius: 0 4px 4px 0;
+        }
+        &.current-row td {
+          background-color: #4e94ff !important;
+          color: #fff;
+        }
+        &:hover td {
+          background-color: rgb(242, 242, 247);
+        }
+      }
       th {
         padding: 0 !important;
         height: 40px;
         line-height: 40px;
+        border-color: #fff !important;
+        border-right: 2px solid #fff;
+        border-radius: 4px;
+        font-size: 12px;
+        background: #f2f2f7;
       }
       td {
         padding: 0 !important;
         height: 34px;
         line-height: 34px;
+        border: none;
+        font-size: 12px;
       }
     }
   }
@@ -423,5 +447,13 @@
     box-sizing: border-box;
     background-color: white;
   }
+
+  .el-table .warning-row {
+    background: oldlace;
+  }
+
+  .el-table .error-row {
+    background: #f7b9b9;
+  }
 }
 </style>

--
Gitblit v1.8.0