From 5044b402981f42542eece201e1308b5c2816737a Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期四, 01 七月 2021 20:51:32 +0800
Subject: [PATCH] 轮询日志和朔黄按机车hao号搜索

---
 src/pages/logCenter/views/pollingLog.vue |  618 +++++++++++++++++++++++++------------------------------
 1 files changed, 283 insertions(+), 335 deletions(-)

diff --git a/src/pages/logCenter/views/pollingLog.vue b/src/pages/logCenter/views/pollingLog.vue
index 4b0ee47..50708cb 100644
--- a/src/pages/logCenter/views/pollingLog.vue
+++ b/src/pages/logCenter/views/pollingLog.vue
@@ -1,384 +1,332 @@
 <template>
-  <div class="restart">
-    <div class="restart-set">
-      <div class="t">閲嶅惎璁剧疆</div>
+  <div class="op-log" v-loading="loading" :element-loading-text="loadingText">
+    <div class="top">
+      <div class="first">
+        <div class="time-option">
+          <div class="title">鎽勫儚鏈猴細</div>
 
-      <div class="bar">
-        <div class="name">閲嶅惎鑺傜偣</div>
-        <el-button
-          class="reset-btn"
-          type="primary"
-          size="small"
-          @click="restart"
-          >閲嶅惎</el-button
-        >
-      </div>
-    </div>
-
-    <div class="restart-set">
-      <div class="t">瀹氭椂閲嶅惎</div>
-      <div class="bar">
-        <div class="name">閲嶅惎鍛ㄦ湡</div>
-        <el-select
-          v-model="every"
-          placeholder="鍏抽棴"
-          size="small"
-          @change="changeEvery"
-        >
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+          <div class="opts">
+            <div
+              class="opt opt-active"
+              @click="openDialog"
+            >
+              閫夋嫨鎽勫儚鏈�
+            </div>
+          </div>
+        </div>
+        <div class="search">
+          <el-input
+            placeholder="鎼滅储"
+            v-model="procName"
+            size="small"
+            class="input-with-select"
           >
-          </el-option>
-        </el-select>
+          <el-button slot="append" icon="el-icon-search" @click="getScheduleLog"></el-button>
+          </el-input>
+        </div>
       </div>
-
-      <div class="bar" v-if="every == 'monthly'">
-        <div class="name">閲嶅惎鏃ユ湡</div>
-        <el-select
-          v-model="cronValueObj.day"
-          placeholder="璇烽�夋嫨"
-          size="small"
-          @change="updateExpression"
-        >
-          <el-option
-            v-for="item in days"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          ></el-option>
-        </el-select>
-      </div>
-
-      <div class="bar" v-if="every == 'weekly'">
-        <div class="name">閲嶅惎鏃ユ湡</div>
-        <el-select
-          v-model="cronValueObj.week"
-          placeholder="璇烽�夋嫨"
-          size="small"
-          @change="updateExpression"
-        >
-          <el-option label="鏄熸湡涓�" value="1"></el-option>
-          <el-option label="鏄熸湡浜�" value="2"></el-option>
-          <el-option label="鏄熸湡涓�" value="3"></el-option>
-          <el-option label="鏄熸湡鍥�" value="4"></el-option>
-          <el-option label="鏄熸湡浜�" value="5"></el-option>
-          <el-option label="鏄熸湡鍏�" value="6"></el-option>
-          <el-option label="鏄熸湡鏃�" value="7"></el-option>
-        </el-select>
-      </div>
-
-      <div class="bar" v-if="every != 'close'">
-        <div class="name">閲嶅惎鏃堕棿</div>
-        <el-time-picker
-          v-model="time"
-          :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
-          value-format="HH:mm"
-          format="HH:mm"
-          placeholder="浠绘剰鏃堕棿鐐�"
-          size="small"
-          @change="updateExpression"
-        ></el-time-picker>
+      <div class="second">
+        <span>鏃ユ湡鏃堕棿锛�</span>
+        <el-date-picker
+      v-model="dateRange" size="small"
+      type="datetimerange"
+      range-separator="鍒�"
+            value-format="yyyy-MM-dd HH:mm:ss"
+      start-placeholder="寮�濮嬫棩鏈�" 
+      @change="dateChange"
+      end-placeholder="缁撴潫鏃ユ湡">
+    </el-date-picker>
       </div>
     </div>
+    <div class="table">
+      <el-table
+        class="tableBox"
+        ref="multipleTable"
+        highlight-current-row
+        :data="tableData"
+        style="width: 100%"
+        :header-cell-style="{ background: '#f8f8f8', color: '#222222' }"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column :align="'center'" label="搴忓彿" type="index" width="50">
+        </el-table-column>
+        <el-table-column
+          :align="'center'"
+          sortable
+          min-width="100px"
+          prop="add_time"
+          label="杞寮�濮嬫椂闂�"
+        ></el-table-column>
+        <el-table-column
+          :align="'center'"
+          sortable
+          min-width="100px"
+          prop="add_time"
+          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>
+    </div>
 
-    <el-button class="save-btn" type="primary" @click="save">淇濆瓨</el-button>
+    <el-dialog
+    title="閫夋嫨鎽勫儚鏈�"
+     :visible.sync="dialogVisible"
+  width="50%"
+  :before-close="handleClose">
+
+   <el-tree
+            ref="cameraTree"
+            :data="cameraTree"
+            :props="props"
+            node-key="id"
+            show-checkbox
+            check-on-click-node
+            default-expand-all
+          ></el-tree>
+
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="dialogVisible = false">鍏ㄩ儴鍙栨秷</el-button>
+    <el-button @click="dialogVisible = false">鍏ㄩ��</el-button>
+    <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
+    <el-button type="primary" @click="confirmCamera">纭� 瀹�</el-button>
+  </span>
+</el-dialog>
+
   </div>
 </template>
 
 <script>
-import {
-  rebootServer,
-  getDevInfo,
-  getRebootTask,
-  setRebootTask,
-  fileUpload,
-  doUpgrade,
-  deleteDate,
-} from "@/api/system";
+import { deleteDate } from "@/api/system";
+import { getLocalCameraTree } from "@/api/area";
+
+
+import { queryOperationLog, getOperations, getModules,queryScheduleLog } from "@/api/log";
+
+function pad0(i) {
+  if (i >= 0 && i <= 9) {
+    return "0" + i;
+  } else {
+    return i;
+  }
+}
 export default {
   data() {
     return {
-      time: "",
-      saveBtn: false,
-      timer: null,
-      probeSum: 0,
-      cronText: "",
-      cronValueObj: {
-        min: "*",
-        hour: "*",
-        day: "*",
-        month: "*",
-        week: "*",
-      },
-      options: [
+      loading: false,
+      loadingText: "",
+      input3: "",
+      tableData: [],
+      moduleOptions: [],
+      gongnengOptions: [],
+      dateRange: [],
+      cameraTree:[],
+      resultOptions: [
         {
-          value: "close",
-          label: "鍏抽棴",
+          value: "",
+          label: "鍏ㄩ儴",
         },
         {
-          value: "daily",
-          label: "姣忔棩",
+          value: "鎴愬姛",
+          label: "鎴愬姛",
         },
         {
-          value: "weekly",
-          label: "姣忓懆",
-        },
-        {
-          value: "monthly",
-          label: "姣忔湀",
+          value: "澶辫触",
+          label: "澶辫触",
         },
       ],
-      every: "close",
-      rebootCron: "",
+      props: {
+        label: 'name'
+      },
+      value: "",
+      page: 1,
+      pageSize: 15,
+      activeDateChoise: 0,
+      gongneng: "",
+      result: "",
+      curModule: "",
+      timeStart: "",
+      timeEnd: "",
+      fuzzySearch: "",
+      total:0,dialogVisible: false,
+       procID: "",
+       procName: "",
     };
   },
-  computed: {
-    days: () => {
-      let arr = [];
-      for (let i = 1; i < 32; i++) {
-        arr.push({
-          label: i + "鏃�",
-          value: i + "",
-        });
-      }
-      return arr;
-    },
-  },
-  components: {},
   mounted() {
-    this.getRebootCron();
+    this.getTimeRange(24 * 60 * 60 * 1000);
+    this.getScheduleLog();
+    this.getOptions();
   },
-  beforeDestroy() {},
   methods: {
-    resolveExp() {
-      // "鍑嗗鍙嶈В鏋�", this.expression;
-      if (this.rebootCron.length) {
-        let arr = this.rebootCron.split(" ");
-        if (arr.length >= 5) {
-          //6 浣嶄互涓婃槸鍚堟硶琛ㄨ揪寮�
-          this.cronValueObj.min = arr[0];
-          this.cronValueObj.hour = arr[1];
-          this.cronValueObj.day = arr[2];
-          this.cronValueObj.month = "*";
-          this.cronValueObj.week = arr[4];
-        }
-
-        if (this.cronValueObj.week != "*") {
-          this.every = "weekly";
-        } else if (this.cronValueObj.day != "*") {
-          this.every = "monthly";
-        } else {
-          this.every = "daily";
-        }
-        this.time = this.cronValueObj.hour + ":" + this.cronValueObj.min;
-      } else {
-        //娌℃湁浼犲叆鐨勮〃杈惧紡 鍒欒繕鍘�
-        this.clearCron();
-      }
+    confirmCamera(){
+     const selectedIDs= this.$refs.cameraTree.getCheckedKeys()
+      this.procID= selectedIDs.join(",")
+    this.getScheduleLog()
+      this.dialogVisible=false
     },
-    clearCron() {
-      this.cronValueObj.min = "*";
-      this.cronValueObj.hour = "*";
-      this.cronValueObj.day = "*";
-      this.cronValueObj.month = "*";
-      this.cronValueObj.week = "*";
+    openDialog(){
+      this.dialogVisible= true
+      getLocalCameraTree({
+        cameraName:"",
+        searchType:0
+      }).then((res) => {
+        this.cameraTree =res.data
+      })
     },
-    getRebootCron() {
-      getRebootTask().then((rsp) => {
-        this.rebootCron = rsp.data;
+    gongnengChange(val) {},
+    moduleChange(val) {
+      this.getScheduleLog()
+      this.gongneng=""
+      getOperations({
+        module: this.curModule,
+      }).then((res) => {
+        this.gongnengOptions = res.data;
       });
     },
-    reLogin() {
-      this.$router.push("/");
-    },
-    restart() {
-      this.$confirm("纭畾瑕侀噸鍚鑺傜偣鍚�?", {
-        center: true,
-        cancelButtonClass: "comfirm-class-cancle",
-        confirmButtonClass: "comfirm-class-sure",
-      }).then(() => {
-        // this.loading = true;
-        // this.loadingText = "鏅鸿兘璁$畻鑺傜偣姝e湪閲嶅惎锛岃鑰愬績绛夊緟..."
-        rebootServer()
-          .then((rsp) => {
-            this.probeServer(this.reLogin);
-          })
-          .catch((err) => {
-            if (err.status == 400) {
-              // this.loading = false;
-              this.$notify({
-                type: "error",
-                message: "閲嶅惎璁$畻鑺傜偣澶辫触",
-              });
-            } else {
-              this.probeServer(this.reLogin);
-            }
-          });
+    getOptions() {
+      getModules().then((res) => {
+        this.moduleOptions = res.data;
       });
     },
-    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;
-      }
-      this.timer = setTimeout(() => {
-        getDevInfo()
-          .then(() => {
-            cb();
-          })
-          .catch((err) => {
-            _this.probeServer(cb);
-          });
-      }, 10000);
+    choseRange() {
+     
+      this.getScheduleLog();
+      this.activeDateChoise = i;
     },
-    save() {
-      this.rebootCron = this.cronText;
-      setRebootTask({ task: this.cronText })
-        .then((rsp) => {
-          if (rsp && rsp.success) {
-            this.$notify({
-              type: "success",
-              message: "閰嶇疆鎴愬姛",
-            });
-          }
-        })
-        .catch((err) => {
-          this.$notify({
-            type: "error",
-            message: "閰嶇疆澶辫触",
-          });
-        });
+    getScheduleLog() {
+      const data= {
+        timeStart: this.timeStart,
+        timeEnd: this.timeEnd,
+        page: this.page,
+        pageSize: this.pageSize,
+        procID: this.procID,
+        procName: this.procName,
+      }
+      queryScheduleLog(data).then((res) => {
+        this.tableData = res.data.logs;
+        this.total = res.data.total
+      });
     },
-    changeEvery() {
-      this.saveBtn = true;
-      if (this.every === "close") {
-        this.cronText = "";
-        return;
-      }
-      if (this.every === "monthly") {
-        this.cronValueObj.week = "*";
-        this.cronValueObj.day = "1";
-        if (!this.time.length) {
-          this.time = "00:00";
-        }
-      }
-      if (this.every === "weekly") {
-        this.cronValueObj.day = "*";
-        this.cronValueObj.week = "1";
-        if (!this.time.length) {
-          this.time = "00:00";
-        }
-      }
-      if (this.every === "daily") {
-        this.cronValueObj.day = "*";
-        this.cronValueObj.week = "*";
-      }
-      this.updateExpression();
+    dateChange(val){
+      [this.timeStart,this.timeEnd]= val;
+      this.getScheduleLog()
     },
-    updateExpression() {
-      this.saveBtn = true;
-      if (this.time.length) {
-        let arr = this.time.split(":");
-        this.cronValueObj.hour = arr[0];
-        this.cronValueObj.min = arr[1];
-      }
-      this.crontabValueString();
+    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}`;
     },
-    crontabValueString() {
-      let obj = this.cronValueObj;
-      this.cronText =
-        obj.min +
-        " " +
-        obj.hour +
-        " " +
-        obj.day +
-        " " +
-        obj.month +
-        " " +
-        obj.week;
-    },
-  },
-  watch: {
-    rebootCron() {
-      this.resolveExp();
+    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]
     },
   },
 };
 </script>
 <style lang="scss">
-.all {
-  width: 100%;
-}
-.restart {
+.op-log {
   margin: 0 auto;
-  padding: 20px;
-  .t {
-    box-sizing: border-box;
-    text-align: left;
-    width: 70%;
-    margin: 0 auto;
-    padding: 10px;
-    font-size: 16px;
-  }
-  .bar {
-    height: 50px;
+  padding: 10px 8px 10px 5px;
 
-    width: 70%;
-    background: rgba(248, 248, 248, 1);
-    margin: 0 auto;
-    min-width: 300px;
-    display: flex;
-    justify-content: space-between;
-    box-sizing: border-box;
-    padding: 0 20px;
-    align-items: center;
-    border-radius: 10px;
-    margin-bottom: 10px;
-    .reset-btn {
-      width: 70px;
-      height: 32px;
-      border-radius: 5px;
+  background-color: rgba(248, 248, 248, 1);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .top {
+    height: 100px;
+    background: #fff;
+    border-radius: 5px;
+    .first {
+      display: flex;
+      justify-content: space-between;
+      height: 45px;
+      padding: 0 20px;
+      .time-option {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        // padding-left: 20px;
+        .title {
+          margin-right: 20px;
+        }
+        .opts {
+          display: flex;
+          justify-content: space-between;
+          .opt {
+            width: fit-content;
+            height: 32px;
+            padding: 0 15px;
+            // background: aquamarine;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-right: 20px;
+            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;
+      }
     }
-    .el-select {
-      width: 100%;
-    }
-    .name {
-      min-width: 150px;
-      text-align: left;
-      font-size: 14px;
-    }
-    .el-input__inner::placeholder {
-      color: rgba(107, 107, 107, 1);
-    }
-    .el-input--small .el-input__inner {
-      height: 32px;
-      line-height: 32px;
-      border: none;
-      background: rgba(240, 240, 240, 1);
-    }
-    .el-select .el-input .el-select__caret {
-      color: rgba(138, 138, 138, 1);
-      font-size: 15px;
-    }
-    .el-date-editor.el-input,
-    .el-date-editor.el-input__inner {
-      width: 100%;
+    .second {
+      display: flex;
+      margin: 10px 0;    padding: 0 20px;
+align-items: center;
+    font-size: 14px;
+      .bar {
+        display: flex;
+        align-items: baseline;
+        width: fit-content;
+        padding-left: 20px;
+        .name {
+          margin-right: 5px;
+        }
+      }
     }
   }
-  .save-btn {
-    width: 260px;
-    margin-top: 50px;
+  .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;
+      }
+    }
   }
 }
 </style>

--
Gitblit v1.8.0