From 5455dd4cd7c27d14bc7f98f110ae14163dbaacc1 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 16 二月 2022 15:30:10 +0800
Subject: [PATCH] 对比库新增跳到最末

---
 src/pages/syslog/views/pollingLog.vue |  366 +++++++++++++++++++++++++++++++++++++--------------
 1 files changed, 264 insertions(+), 102 deletions(-)

diff --git a/src/pages/syslog/views/pollingLog.vue b/src/pages/syslog/views/pollingLog.vue
index a6773e1..0149e6f 100644
--- a/src/pages/syslog/views/pollingLog.vue
+++ b/src/pages/syslog/views/pollingLog.vue
@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="polling-log"
-    v-loading="loading"
-    :element-loading-text="loadingText"
-  >
+  <div class="polling-log" v-loading="loading" :element-loading-text="loadingText">
     <div class="top">
       <div class="first">
         <div class="time-option">
@@ -11,32 +7,33 @@
           <div class="opts">
             <div class="opt" @click="openDialog">閫夋嫨鎽勫儚鏈�</div>
           </div>
-          <div class="pick-num">宸查�� : {{ pickNum }}</div>
+          <div class="pick-num">宸查�� : ( {{ pickNum }} )</div>
         </div>
         <div class="search">
           <el-input
             placeholder="鎼滅储"
-            v-model="procName"
+            v-model="fuzzySearch"
             size="small"
             class="input-with-select"
+            @keyup.enter.native="getScheduleLog(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="getScheduleLog(1)" slot="append">
               &#xe714;
             </span>
+
             <!-- <el-button
               slot="append"
               icon="el-icon-search"
-              @click="getScheduleLog"
+              @click="getOperationLog(1)"
             ></el-button> -->
           </el-input>
         </div>
       </div>
       <div class="second">
-        <span>鏃ユ湡鏃堕棿锛�</span>
+        <span class="title">鏃ユ湡鏃堕棿锛�</span>
         <el-date-picker
           v-model="dateRange"
           size="small"
@@ -46,6 +43,8 @@
           start-placeholder="寮�濮嬫棩鏈�"
           @change="dateChange"
           end-placeholder="缁撴潫鏃ユ湡"
+          :picker-options="pickerOptions"
+          popper-class="pollingLog_timePicker"
         >
         </el-date-picker>
       </div>
@@ -59,9 +58,12 @@
         :header-cell-style="{ background: '#f8f8f8', color: '#222222' }"
         @selection-change="handleSelectionChange"
         style="width: 100%"
+        border
       >
-        <el-table-column :align="'center'" label="搴忓彿" type="index" width="50">
-        </el-table-column>
+        <template slot="empty">
+          <img :src="png" class="empty_img" alt="" />
+        </template>
+        <el-table-column :align="'center'" label="搴忓彿" type="index" width="50"> </el-table-column>
         <el-table-column
           :align="'center'"
           sortable
@@ -76,17 +78,8 @@
           prop="schedule_end_time"
           label="杞缁撴潫鏃堕棿"
         ></el-table-column>
-        <el-table-column
-          :align="'center'"
-          sortable
-          prop="procName"
-          label="鎽勫儚鏈�"
-        ></el-table-column>
-        <el-table-column
-          :align="'center'"
-          prop="minute"
-          label="杞鏃堕暱锛堝垎锛�"
-        ></el-table-column>
+        <el-table-column :align="'center'" sortable prop="info" label="鎽勫儚鏈�"></el-table-column>
+        <el-table-column :align="'center'" prop="minute" label="杞鏃堕暱锛堝垎锛�"></el-table-column>
       </el-table>
     </div>
 
@@ -101,12 +94,7 @@
     >
     </el-pagination>
 
-    <el-dialog
-      title="閫夋嫨鎽勫儚鏈�"
-      :visible.sync="dialogVisible"
-      width="50%"
-      :before-close="handleClose"
-    >
+    <el-dialog title="閫夋嫨鎽勫儚鏈�" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
       <el-tree
         ref="cameraTree"
         :data="cameraTree"
@@ -121,22 +109,21 @@
         <el-button size="small" @click="pickAllNot">鍙栨秷鍏ㄩ��</el-button>
         <el-button @click="pickAllCam" size="small">鍏ㄩ��</el-button>
         <el-button size="small" @click="cancelShow">鍙栨秷</el-button>
-        <el-button size="small" type="primary" @click="confirmCamera"
-          >纭畾</el-button
-        >
+        <el-button size="small" type="primary" @click="confirmCamera">纭畾</el-button>
       </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { pad0 } from "@/api/utils";
-import { getLocalCameraTree } from "@/api/area";
-import { getOperations, getModules, queryScheduleLog } from "@/api/log";
+import { pad0 } from "@/api/utils"
+import { getLocalCameraTree } from "@/api/area"
+import { getOperations, getModules, queryScheduleLog } from "@/api/log"
 
 export default {
   data() {
     return {
+      png: require("../../../../public/images/syslog/娌℃暟鎹�.png"),
       loading: false,
       loadingText: "",
       tableData: [],
@@ -145,7 +132,7 @@
       dateRange: [],
       cameraTree: [],
       props: {
-        label: "name",
+        label: "name"
       },
       value: "",
       page: 1,
@@ -161,97 +148,139 @@
       procID: "",
       procName: "",
       pickNum: 0,
-    };
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "鏈�杩戜竴鍛�",
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit("pick", [start, end])
+            }
+          },
+          {
+            text: "鏈�杩戜竴涓湀",
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+              picker.$emit("pick", [start, end])
+            }
+          },
+          {
+            text: "鏈�杩戜笁涓湀",
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+              picker.$emit("pick", [start, end])
+            }
+          }
+        ]
+      }
+    }
   },
   mounted() {
-    this.getTimeRange(24 * 60 * 60 * 1000 * 30);
-    this.getScheduleLog();
-    this.getOptions();
+    this.getTimeRange(24 * 60 * 60 * 1000 * 30)
+    this.getScheduleLog()
+    this.getOptions()
   },
   methods: {
     handleSizeChange(val) {
-      this.pageSize = val;
-      this.getOperationLog();
+      this.pageSize = val
+      this.getScheduleLog()
     },
     handleCurrentChange(val) {
-      this.page = val;
-      this.getOperationLog();
+      this.page = val
+      this.getScheduleLog()
     },
     cancelShow() {
-      this.dialogVisible = false;
-      this.pickAllNot();
+      this.dialogVisible = false
+      this.pickAllNot()
     },
     pickAllCam() {
-      this.$refs.cameraTree.setCheckedNodes(this.cameraTree);
+      this.$refs.cameraTree.setCheckedNodes(this.cameraTree)
     },
     pickAllNot() {
-      this.$refs.cameraTree.setCheckedKeys([]);
+      this.$refs.cameraTree.setCheckedKeys([])
     },
     confirmCamera() {
-      const selectedIDs = this.$refs.cameraTree.getCheckedKeys();
-      this.pickNum = selectedIDs.length;
-      this.procID = selectedIDs.join(",");
-      this.getScheduleLog();
-      this.dialogVisible = false;
+      const selectedIDs = this.$refs.cameraTree.getCheckedKeys()
+      this.pickNum = selectedIDs.length
+      this.procID = selectedIDs.join(",")
+      this.getScheduleLog()
+      this.dialogVisible = false
     },
     openDialog() {
-      this.dialogVisible = true;
+      this.dialogVisible = true
       getLocalCameraTree({
         cameraName: "",
-        searchType: 0,
+        searchType: 0
       }).then((res) => {
-        this.cameraTree = res.data;
-      });
+        this.cameraTree = res.data
+      })
     },
     moduleChange(val) {
-      this.getScheduleLog();
-      this.gongneng = "";
+      this.getScheduleLog()
+      this.gongneng = ""
       getOperations({
-        module: this.curModule,
+        module: this.curModule
       }).then((res) => {
-        this.gongnengOptions = res.data;
-      });
+        this.gongnengOptions = res.data
+      })
     },
     getOptions() {
       getModules().then((res) => {
-        this.moduleOptions = res.data;
-      });
+        this.moduleOptions = res.data
+      })
     },
-    getScheduleLog() {
+    getScheduleLog(typ) {
+      if (typ == 1) {
+        this.page = 1
+      }
+
       const data = {
         timeStart: this.timeStart,
         timeEnd: this.timeEnd,
         page: this.page,
         pageSize: this.pageSize,
+        fuzzySearch: this.fuzzySearch,
         procID: this.procID,
-        procName: this.procName,
-      };
+        procName: this.procName
+      }
       queryScheduleLog(data).then((res) => {
-        this.tableData = res.data.logs;
-        this.total = res.data.total;
-      });
+        this.tableData = res.data.logs
+        this.total = res.data.total
+      })
     },
     dateChange(val) {
-      [this.timeStart, this.timeEnd] = val;
-      this.getScheduleLog();
+      ;[this.timeStart, this.timeEnd] = val
+      this.getScheduleLog()
     },
     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()) //鏃�
+      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);
-      this.dateRange = [this.timeStart, this.timeEnd];
+      var date = new Date() //褰撳墠鏃堕棿
+      var preDay = new Date(new Date().getTime() - gap)
+      this.timeStart = this.getTimeStr(preDay)
+      this.timeEnd = this.getTimeStr(date)
+      this.dateRange = [this.timeStart, this.timeEnd]
     },
-  },
-};
+    handleSelectionChange() {},
+    handleClose() {},
+    clearSearch() {
+      this.fuzzySearch = ""
+      this.getScheduleLog(1)
+    }
+  }
+}
 </script>
 <style lang="scss">
 .polling-log {
@@ -294,14 +323,15 @@
     }
   }
   .top {
-    height: 100px;
+    height: 132px;
     background: #fff;
     border-radius: 5px;
     .first {
       display: flex;
       justify-content: space-between;
+      align-items: center;
       height: 45px;
-      padding: 0 20px;
+      padding: 20px 20px 0 20px;
       .time-option {
         display: flex;
         justify-content: space-between;
@@ -309,44 +339,91 @@
         .title,
         .pick-num {
           margin-right: 10px;
-          font-size: 14px;
           min-width: fit-content;
+          font-weight: bold;
+          font-size: 12px;
         }
+
         .opts {
           display: flex;
           justify-content: space-between;
           .opt {
-            width: 70px;
-            height: 32px;
+            width: 100px;
+            height: 36px;
             padding: 0 15px;
             border-radius: 4px;
             cursor: pointer;
             margin-right: 20px;
-            line-height: 32px;
-            font-size: 14px;
+            line-height: 36px;
+            font-size: 12px;
+            font-weight: 700;
             color: #fff;
-            background-color: rgba(61, 104, 225, 1);
+            background-color: #4e94ff;
           }
         }
       }
       .search {
+        width: 280px;
+        height: 36px;
         display: flex;
         align-items: center;
+
+        .input-with-select {
+          width: 100%;
+          height: 100%;
+
+          input {
+            height: 100%;
+            border-radius: 18px 0 0 18px;
+            border: 2px solid #f2f2f7;
+            border-right: none;
+
+            &: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);
+            background-color: #fff;
+            border: 2px solid #f2f2f7;
+            border-radius: 0 18px 18px 0;
+            border-left: none;
+          }
+        }
+
+        span {
+          cursor: pointer;
+          color: rgb(47, 45, 61);
+          font-weight: 700;
+          font-size: 19px;
+        }
       }
     }
     .second {
       display: flex;
-      margin: 10px 0;
-      padding: 0 20px;
       align-items: center;
-      font-size: 14px;
+      margin: 15px 0 20px 0;
+      padding: 0 20px;
+      .title {
+        margin-right: 10px;
+        min-width: fit-content;
+        font-weight: bold;
+        font-size: 12px;
+      }
       .bar {
         display: flex;
         align-items: baseline;
         width: fit-content;
-        padding-left: 20px;
+        margin-right: 30px;
+        min-width: 120px;
+
         .name {
-          margin-right: 5px;
+          margin-right: 15px;
+          min-width: fit-content;
+          font-weight: bold;
+          font-size: 12px;
         }
       }
     }
@@ -357,16 +434,50 @@
     padding: 12px;
     background-color: white;
 
+    .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;
       }
     }
   }
@@ -377,4 +488,55 @@
     background-color: white;
   }
 }
+
+.pollingLog_timePicker {
+  width: 520px !important;
+  * {
+    font-size: 12px !important;
+    min-width: 0px !important;
+  }
+
+  .el-date-range-picker__time-header {
+    border: none;
+  }
+
+  .el-date-range-picker__content {
+    padding: 2px 9px;
+  }
+
+  .el-date-table th {
+    pad: 0 5px;
+  }
+
+  .el-picker-panel__shortcut {
+    padding-left: 20px;
+    padding-bottom: 10px;
+  }
+
+  .el-picker-panel__footer {
+    padding: 0 20px 10px 0;
+    background-color: none;
+    display: flex;
+    justify-content: end;
+    border: none;
+    button {
+      display: block;
+      width: 54px;
+      height: 24px;
+      border: 1px solid #e0e0e0;
+      border-radius: 25px;
+      line-height: 9px;
+
+      &:first-child {
+        color: #4f4f4f !important;
+      }
+
+      &:last-child {
+        color: #fff !important;
+        background-color: #4e94ff !important;
+        border-color: #4e94ff !important;
+      }
+    }
+  }
+}
 </style>

--
Gitblit v1.8.0