From 4b43bfb3f6f499f480712dd29bef52275466afd6 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期五, 30 七月 2021 22:10:59 +0800
Subject: [PATCH] change all

---
 src/pages/syslog/views/eventPushLog.vue |  732 +++++++++++++++++++++++---------------------------------
 1 files changed, 301 insertions(+), 431 deletions(-)

diff --git a/src/pages/syslog/views/eventPushLog.vue b/src/pages/syslog/views/eventPushLog.vue
index 0ddb633..7776d13 100644
--- a/src/pages/syslog/views/eventPushLog.vue
+++ b/src/pages/syslog/views/eventPushLog.vue
@@ -1,478 +1,348 @@
 <template>
-  <div class="all">
-    <div class="cluster-content">
-      <div class="cluster-center" ref="left">
-        <div class="menu-item" @click="openRight(0)">
-          <div class="con">
-            <span class="icon iconfont">&#xe646;</span>
-            <span class="menu-text">绯荤粺鏇存柊</span>
+  <div class="push-log" v-loading="loading" :element-loading-text="loadingText">
+    <div class="top">
+      <div class="first">
+        <div class="time-option">
+          <div class="title">鍛ㄦ湡锛�</div>
+
+          <div class="opts">
+            <div
+              :class="activeDateChoise == i ? 'opt-active' : ''"
+              class="opt"
+              v-for="(item, i) in dateArr"
+              :key="i"
+              @click="choseRange(item, i)"
+            >
+              {{ item }}
+            </div>
           </div>
         </div>
-        <div class="menu-item" @click="openRight(1)">
-          <div class="con">
-            <span class="icon iconfont">&#xe646;</span>
-
-            <span class="menu-text">鏇存柊璁剧疆</span>
-          </div>
+        <div class="search">
+          <el-input
+            placeholder="鎼滅储"
+            v-model="fuzzySearch"
+            size="small"
+            class="input-with-select"
+          >
+            <el-button
+              slot="append"
+              icon="el-icon-search"
+              @click="getOperationLog(1)"
+            ></el-button>
+          </el-input>
         </div>
       </div>
-      <div class="cluster-right">
-        <div class="net-set" v-if="activePage == 0">
-          <el-radio-group v-model="radio2" size="medium">
-            <el-radio-button label="妫�鏌ユ洿鏂�"></el-radio-button>
-            <el-radio-button label="涓婁紶鏇存柊"></el-radio-button>
-          </el-radio-group>
+      <div class="second">
+        <div class="bar">
+          <div class="name">鐘舵�侊細</div>
 
-          <div class="update-center" v-if="radio2 == '妫�鏌ユ洿鏂�'">
-            <div class="spin-bg"></div>
-            <div class="line"></div>
-            <div class="desc">{{ "妫�鏌ュ埌鏈�鏂扮増鏈細1.0.2" }}</div>
-            <el-button type="primary" size="small">鏇存柊</el-button>
-          </div>
-          <div class="upload-center" v-if="radio2 == '涓婁紶鏇存柊'">
-            <!-- uploadPlaceholder="涓婁紶鍗囩骇鏂囦欢" -->
-            <div class="top">
-              <div class="up-text">涓婁紶鏇存柊鏂囦欢</div>
-              <fileUploader
-                single
-                url="/data/api-v/sysset/patchUpdate"
-                @complete="onFileUpload"
-                @file-added="onFileAdded"
-              />
-              <el-button
-                type="primary"
-                size="small"
-                style="width: 80px"
-                @click="upgrade"
-                :disabled="!fileAdded"
-                :loading="upgrading"
-                >鍗囩骇</el-button
-              >
-            </div>
-
-            <div class="update-center">
-              <div class="spin-bg"></div>
-              <div class="line"></div>
-              <div class="desc">{{ "妫�鏌ュ埌鏈�鏂扮増鏈細1.0.2" }}</div>
-              <el-button type="primary" size="small">鏇存柊</el-button>
-            </div>
-            <!-- <span v-html="patchUpdateStatus"></span> -->
-          </div>
-
-          <div class="cur-version">褰撳墠鐗堟湰锛歿{ "1.0.1" }}</div>
-        </div>
-
-        <div class="wifi" v-if="activePage == 1">
-          <div class="content">
-            <div class="title">绯荤粺鏇存柊璁剧疆</div>
-
-            <div class="bar">
-              <div class="name">鑷姩娓呯悊杞欢鍖呯紦瀛�</div>
-              <el-switch
-                v-model="sys_auto_clear"
-                active-color="rgba(61, 104, 225, 1)"
-                @change="switchChange('sys_auto_clear')"
-              >
-              </el-switch>
-            </div>
-
-            <div class="bar">
-              <div class="name">鏇存柊鎻愰啋</div>
-              <el-switch
-                v-model="sys_remind"
-                active-color="rgba(61, 104, 225, 1)"
-                @change="switchChange('sys_remind')"
-              >
-              </el-switch>
-            </div>
-
-            <div class="bar" v-if="sys_remind">
-              <div class="name">鑷姩涓嬭浇鏇存柊</div>
-              <el-switch
-                v-model="sys_auto_download"
-                active-color="rgba(61, 104, 225, 1)"
-                @change="switchChange('sys_auto_download')"
-              >
-              </el-switch>
-            </div>
-          </div>
-
-          <div class="content">
-            <div class="title">搴旂敤/绠楁硶鏇存柊璁剧疆</div>
-
-            <div class="bar">
-              <div class="name">鑷姩娓呯悊杞欢鍖呯紦瀛�</div>
-              <el-switch
-                v-model="app_auto_clear"
-                active-color="rgba(61, 104, 225, 1)"
-                @change="switchChange('app_auto_clear')"
-              >
-              </el-switch>
-            </div>
-
-            <div class="bar">
-              <div class="name">鏇存柊鎻愰啋</div>
-              <el-switch
-                v-model="app_remind"
-                active-color="rgba(61, 104, 225, 1)"
-                @change="switchChange('app_remind')"
-              >
-              </el-switch>
-            </div>
-
-            <div class="bar" v-if="app_remind">
-              <div class="name">鑷姩涓嬭浇鏇存柊</div>
-              <el-switch
-                v-model="app_auto_download"
-                active-color="rgba(61, 104, 225, 1)"
-                @change="switchChange('app_auto_download')"
-              >
-              </el-switch>
-            </div>
-          </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-option>
+          </el-select>
         </div>
       </div>
     </div>
+    <div class="table">
+      <el-table
+        class="tableBox"
+        ref="multipleTable"
+        highlight-current-row
+        :data="tableData"
+        :header-cell-style="{ background: '#f8f8f8', color: '#222222' }"
+        style="width: 100%"
+      >
+        <el-table-column :align="'center'" label="搴忓彿" type="index" width="50">
+        </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"
+          min-width="100px"
+          label="澶辫触鎬婚噺"
+        ></el-table-column>
+        
+      </el-table>
+    </div>
+
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="page"
+      :page-sizes="[15, 30, 50, 100]"
+      :page-size="15"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    >
+    </el-pagination>
   </div>
 </template>
 
 <script>
-import { getDevInfo, doUpgrade } from "@/api/system";
-import FileUploader from "@/components/subComponents/FileUpload/index";
+import { deleteDate } from "@/api/system";
+import { pad0 } from "@/api/utils";
+import {  } from "@/api/log";
 
 export default {
-  components: {
-    FileUploader,
-  },
   data() {
     return {
-      wifiList: [{ name: "鏃犵嚎缃戠粶1" }, { name: "鏃犵嚎缃戠粶2" }],
-      radio2: "妫�鏌ユ洿鏂�",
-      activePage: 0,
-      patchUpdateStatus: "",
-      probeSum: 0,
-      sys_auto_clear: false,
-      sys_remind: false,
-      sys_auto_download: false,
-      app_auto_clear: false,
-      app_remind: false,
-      app_auto_download: false,
-      timer: null,
-      patchFile: {},
-
-      fileAdded: false,
-      upgrading: false,
+      loading: false,
+      loadingText: "",
+      input3: "",
+      tableData: [],
+      dateArr: ["浠婃棩", "杩戜笁澶�", "杩戜竷澶�", "杩戜竴涓湀", "杩戝叚涓湀"],
+      levelOptions: [],
+      hostNameOptions: [],
+      resultOptions: [
+        {
+          value: "",
+          label: "鍏ㄩ儴",
+        },
+        {
+          value: "鎴愬姛",
+          label: "鎴愬姛",
+        },
+        {
+          value: "澶辫触",
+          label: "澶辫触",
+        },
+      ],
+      value: "",
+      page: 1,
+      pageSize: 15,
+      activeDateChoise: 0,
+      hostName: "",
+      result: "",
+      level: "",
+      timeStart: "",
+      timeEnd: "",
+      fuzzySearch: "",
+      total: 0,
     };
   },
-  mounted() {},
+  mounted() {
+    this.getTimeRange(24 * 60 * 60 * 1000);
+    // this.getOperationLog();
+    this.getOptions();
+  },
   methods: {
-    onFileUpload(file) {
-      this.patchUpdateStatus = `<span style="color:green">涓婁紶鎴愬姛, 鐐瑰嚮鍗囩骇鎸夐挳寮�濮嬪崌绾�</span>`;
-      this.patchFile = { ...file };
-      this.fileAdded = true;
+    handleSizeChange(val) {
+      this.pageSize = val;
+      // this.getOperationLog();
     },
-    onFileAdded() {
-      this.patchUpdateStatus = "";
+    handleCurrentChange(val) {
+      this.page = val;
+      // this.getOperationLog();
     },
-    upgrade() {
-      this.upgrading = true;
-      this.patchUpdateStatus = `<span style="color:red">姝e湪鍗囩骇...</span>`;
-      doUpgrade(this.patchFile)
-        .then((rsp) => {
-          this.upgrading = false;
-          if (rsp && rsp.success) {
-            clearTimeout(this.timer);
-            this.doneUpgrade();
-          }
-        })
-        .catch((err) => {
-          if (err.code) {
-            this.upgrading = false;
-            this.patchUpdateStatus = `<span style="color:red">${err.data}</span>`;
-            clearTimeout(this.timer);
-          } else {
-            this.probeServer(this.doneUpgrade);
-          }
-        });
+    levelChange(val) {
+      // this.getOperationLog(1);
+      // this.hostName = "";
+      // getOperations({
+      //   module: this.level,
+      // }).then((res) => {
+      //   this.hostNameOptions = res.data;
+      // });
     },
-    doneUpgrade() {
-      this.upgrading = false;
-      this.patchUpdateStatus = `<span style="color:green">鍗囩骇鎴愬姛</span>`;
-      let _this = this;
-      this.$confirm("鍗囩骇鎴愬姛, 璇烽噸鏂扮櫥褰曠郴缁�", "鎴愬姛", {
-        type: "success",
-        cancelButtonClass: "comfirm-class-cancle",
-        confirmButtonClass: "comfirm-class-sure",
-      }).then(() => {
-        _this.reLogin();
+    getOptions() {
+      getModules().then((res) => {
+        this.levelOptions = res.data;
       });
     },
-    reLogin() {
-      this.$router.push("/");
-    },
-    probeServer(cb) {
-      this.probeSum++;
-      let _this = this;
-      if (this.probeSum > 60) {
-        this.$confirm("杩炴帴鏈嶅姟鍣ㄥけ璐�, 璇峰埛鏂伴〉闈㈡垨鑱旂郴绠$悊鍛�", "澶辫触", {
-          type: "error",
-          cancelButtonClass: "comfirm-class-cancle",
-          confirmButtonClass: "comfirm-class-sure",
-        }).then(() => {
-          cb();
-        });
-        return;
+    choseRange(item, i) {
+      switch (item) {
+        case "浠婃棩":
+          this.getTimeRange(24 * 60 * 60 * 1000);
+          break;
+        case "杩戜笁澶�":
+          this.getTimeRange(24 * 60 * 60 * 1000 * 3);
+          break;
+        case "杩戜竷澶�":
+          this.getTimeRange(24 * 60 * 60 * 1000 * 7);
+          break;
+        case "杩戜竴涓湀":
+          this.getTimeRange(24 * 60 * 60 * 1000 * 30);
+          break;
+        case "杩戝叚涓湀":
+          this.getTimeRange(24 * 60 * 60 * 1000 * 30 * 6);
+          break;
+        default:
+          break;
       }
-      this.timer = setTimeout(() => {
-        getDevInfo()
-          .then(() => {
-            cb();
-          })
-          .catch((err) => {
-            _this.probeServer(cb);
-          });
-      }, 10000);
+      // this.getOperationLog(1);
+      this.activeDateChoise = i;
     },
-    openRight(typ) {
-      const es = document.getElementsByClassName("menu-item");
-      es[this.activePage].style.backgroundColor = "#f8f8f8";
-      es[this.activePage].style.color = "rgba(54, 54, 54, 1)";
-      es[typ].style.backgroundColor = "rgba(61, 104, 225, 1)";
-      es[typ].style.color = "#fff";
-      this.activePage = typ;
+    getOperationLog(typ) {
+      if (typ==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;
+      // });
     },
-    switchChange(typ) {
-      console.log(this[typ]);
+    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}`;
+    },
+    getTimeRange(gap) {
+      var date = new Date(); //褰撳墠鏃堕棿
+      var preDay = new Date(new Date().getTime() - gap);
+      this.timeStart = this.getTimeStr(preDay);
+      this.timeEnd = this.getTimeStr(date);
     },
   },
 };
 </script>
 <style lang="scss">
-.all {
+.push-log {
+  margin: 0 auto;
+  padding: 10px 8px 10px 5px;
+  background-color: rgba(248, 248, 248, 1);
   width: 100%;
-}
-
-.cluster-content {
-  height: 100%;
   display: flex;
-  flex-direction: row;
-  flex: 1;
-  flex-basis: auto;
-  box-sizing: border-box;
-  .cluster-center {
-    height: 100%;
-    width: 280px;
-    overflow: auto;
-    box-sizing: border-box;
-    flex-shrink: 0;
-    padding: 10px;
-    border-right: 5px solid #f8f8f8;
-
-    // background-color: lavender;
-    .menu-item {
-      background-color: #f8f8f8;
-      height: 50px;
-      margin-bottom: 10px;
-      border-radius: 8px;
-      line-height: 50px;
-      box-sizing: border-box;
-      font-size: 14px;
-      cursor: pointer;
-      padding: 0 20px;
+  flex-direction: column;
+  overflow: auto;
+  .top {
+    height: 100px;
+    background: #fff;
+    border-radius: 5px;
+    .first {
       display: flex;
       justify-content: space-between;
-      .con {
-        .iconfont {
+      height: 45px;
+      padding: 0 20px;
+      .time-option {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .title {
           margin-right: 10px;
+          min-width: fit-content;
+          font-size: 14px;
         }
-        .menu-text {
-          font-size: 15px;
+        .opts {
+          display: flex;
+          justify-content: space-between;
+          .opt {
+            min-width: fit-content;
+            width: 50px;
+            height: 32px;
+            padding: 0 15px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-right: 10px;
+            line-height: 32px;
+            font-size: 14px;
+          }
+          .opt:hover {
+            background-color: rgba(61, 104, 225, 1);
+            color: #fff;
+          }
+          .opt-active {
+            color: #fff;
+            background-color: rgba(61, 104, 225, 1);
+          }
+        }
+      }
+      .search {
+        display: flex;
+        align-items: center;
+      }
+    }
+    .second {
+      display: flex;
+      margin: 10px 0;
+      padding: 0 20px;
+      .bar {
+        display: flex;
+        align-items: baseline;
+        width: fit-content;
+        margin-right: 20px;
+        min-width: 120px;
+        .name {
+          margin-right: 5px;
+          min-width: fit-content;
+          font-size: 14px;
         }
       }
     }
   }
-  .cluster-right {
-    flex: 1;
-    flex-basis: auto;
-    overflow: auto;
+  .table {
+    margin-top: 16px;
+    border-radius: 5px;
+    padding: 12px;
+    background-color: white;
+    .tableBox {
+      th {
+        padding: 0 !important;
+        height: 40px;
+        line-height: 40px;
+      }
+      td {
+        padding: 0 !important;
+        height: 34px;
+        line-height: 34px;
+      }
+    }
+  }
+  .el-pagination {
+    padding: 20px 5px;
+    height: 100%;
     box-sizing: border-box;
-    position: relative;
-    padding: 20px 40px;
-    .el-form-item.is-required:not(.is-no-asterisk)
-      > .el-form-item__label:before,
-    .el-form-item.is-required:not(.is-no-asterisk)
-      .el-form-item__label-wrap
-      > .el-form-item__label:before {
-      display: none;
-    }
-    .el-select {
-      width: 100%;
-    }
-    .el-form-item {
-      margin-bottom: 10px;
-      height: 50px;
-      background: #f8f8f8;
-      padding: 4px 20px;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      border-radius: 10px;
-      .el-form-item__label {
-        text-align: left;
-        line-height: 42px;
-      }
-    }
-    .el-form-item__content {
-      line-height: 40px;
-      position: relative;
-      font-size: 14px;
-    }
-    .ip-input-container {
-      max-width: none !important;
-    }
-    .net-set {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 95%;
-      // .el-radio-button__inner {
-      //   // color: #333333;
-      //   border: none;
-      // }
-      .update-center {
-        height: 160px;
-        .spin-bg {
-          width: 70px;
-          height: 70px;
-          background: rgba(230, 230, 230, 1);
-          margin: 0 auto;
-          border-radius: 35px;
-        }
-        .line {
-          width: 180px;
-          height: 5px;
-          background: #e6e6e6;
-          border-radius: 5px;
-          margin: 5px auto;
-        }
-        .desc {
-          height: 20px;
-          line-height: 20px;
-          font-size: 14px;
-          color: rgba(161, 161, 161, 1);
-          margin-bottom: 10px;
-        }
-        .el-button {
-          width: 120px;
-        }
-        .el-button--small {
-          font-size: 14px;
-        }
-      }
-      .upload-center {
-        height: 340px;
-
-        // margin: 0 auto;
-         .update-center {
-        height: 160px;
-        .spin-bg {
-          width: 70px;
-          height: 70px;
-          background: rgba(230, 230, 230, 1);
-          margin: 0 auto;
-          border-radius: 35px;
-        }
-        .line {
-          width: 180px;
-          height: 5px;
-          background: #e6e6e6;
-          border-radius: 5px;
-          margin: 5px auto;
-        }
-        .desc {
-          height: 20px;
-          line-height: 20px;
-          font-size: 14px;
-          color: rgba(161, 161, 161, 1);
-          margin-bottom: 10px;
-        }
-        .el-button {
-          width: 120px;
-        }
-        .el-button--small {
-          font-size: 14px;
-        }
-      }
-        .top {
-          display: flex;
-          justify-content: space-evenly;
-          align-items: center;
-          background: rgba(248, 248, 248, 1);
-          box-sizing: border-box;
-          padding: 8px 10px;
-          border-radius: 8px;
-          .el-input--small .el-input__inner {
-            border: none;
-          }
-          .uploader-btn {
-            padding: 6px 8px;
-            .el-icon-upload2 {
-              font-size: 21px;
-              font-weight: 600;
-            }
-          }
-        }
-        .up-text {
-          height: 32px;
-          line-height: 32px;
-          font-size: 14px;
-          min-width: 105px;
-          margin-right: 5px;
-        }
-        .file-uploader {
-          width: 100%;
-          margin-right: 20px;
-          min-width: 150px;
-        }
-      }
-      .cur-version {
-        font-size: 14px;
-      }
-    }
-    .wifi {
-      .content {
-        margin-bottom: 20px;
-      }
-      .bar {
-        display: flex;
-        align-items: center;
-        height: 50px;
-        padding: 0 25px;
-        background-color: #f8f8f8;
-        justify-content: space-between;
-        border-radius: 12px;
-        margin-bottom: 10px;
-        .name {
-          font-size: 15px;
-        }
-      }
-      .title {
-        text-align: left;
-        padding: 10px;
-        font-size: 16px;
-      }
-    }
-
-    .save-btn {
-      background-color: #3d68e1;
-      width: 240px;
-      height: 40px;
-      margin: 0 auto;
-      border-radius: 10px;
-      color: #fff;
-      line-height: 40px;
-      font-size: 14px;
-      margin-top: 20px;
-    }
+    background-color: white;
   }
 }
 </style>

--
Gitblit v1.8.0