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/operationLog.vue | 275 +++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 219 insertions(+), 56 deletions(-)
diff --git a/src/pages/logCenter/views/operationLog.vue b/src/pages/logCenter/views/operationLog.vue
index eebc5e2..568aa5a 100644
--- a/src/pages/logCenter/views/operationLog.vue
+++ b/src/pages/logCenter/views/operationLog.vue
@@ -6,21 +6,25 @@
<div class="title">鍛ㄦ湡锛�</div>
<div class="opts">
- <div class="opt" tabindex="1">浠婃棩</div>
- <div class="opt" tabindex="2">杩戜笁澶�</div>
- <div class="opt" tabindex="3">杩戜竷澶�</div>
- <div class="opt" tabindex="4">杩戜竴涓湀</div>
- <div class="opt" tabindex="5">杩戝叚涓湀</div>
+ <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="search">
<el-input
placeholder="鎼滅储"
- v-model="input3"
+ v-model="fuzzySearch"
size="small"
class="input-with-select"
>
- <el-button slot="append" icon="el-icon-search"></el-button>
+ <el-button slot="append" icon="el-icon-search" @click="getOperationLog"></el-button>
</el-input>
</div>
</div>
@@ -28,42 +32,55 @@
<div class="bar">
<div class="name">鎿嶄綔妯″潡锛�</div>
- <el-select v-model="value" placeholder="璇烽�夋嫨"
-
+ <el-select
+ v-model="curModule"
+ placeholder="璇烽�夋嫨"
size="small"
+ @change="moduleChange"
>
+ <el-option
+ label="鍏ㄩ儴"
+ :value="''"
+ >
+ </el-option>
<el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ v-for="item in moduleOptions"
+ :key="item.proc_name"
+ :label="item.proc_name"
+ :value="item.proc_name"
>
</el-option>
</el-select>
</div>
- <div class="bar">
- <div class="name">鎿嶄綔妯″潡锛�</div>
-
- <el-select v-model="value" placeholder="璇烽�夋嫨"
+ <div class="bar">
+ <div class="name">鎿嶄綔鍔熻兘锛�</div>
+ <el-select
+ v-model="gongneng"
+ placeholder="璇烽�夋嫨"
size="small"
+ @change="getOperationLog"
>
+ <!-- :disabled="gongnengOptions.length==0" -->
<el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+ v-for="item in gongnengOptions"
+ :key="item.name"
+ :label="item.name"
+ :value="item.name"
>
</el-option>
</el-select>
</div>
- <div class="bar">
- <div class="name">鎿嶄綔妯″潡锛�</div>
+ <div class="bar">
+ <div class="name">鎿嶄綔缁撴灉锛�</div>
- <el-select v-model="value" placeholder="璇烽�夋嫨"
+ <el-select
+ v-model="result"
+ placeholder="璇烽�夋嫨"
size="small"
+ @change="getOperationLog"
>
<el-option
- v-for="item in options"
+ v-for="item in resultOptions"
:key="item.value"
:label="item.label"
:value="item.value"
@@ -73,51 +90,186 @@
</div>
</div>
</div>
- <div class="table">faefws</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="98px"
+ 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-column
+ :align="'center'"
+ sortable
+ prop="ip"
+ label="IP"
+ ></el-table-column>
+ </el-table>
+ </div>
</div>
</template>
<script>
import { deleteDate } from "@/api/system";
+import { queryOperationLog, getOperations, getModules } from "@/api/log";
+
+function pad0(i) {
+ if (i >= 0 && i <= 9) {
+ return "0" + i;
+ } else {
+ return i;
+ }
+}
export default {
data() {
return {
loading: false,
loadingText: "",
input3: "",
- options: [
+ tableData: [],
+ dateArr: ["浠婃棩", "杩戜笁澶�", "杩戜竷澶�", "杩戜竴涓湀", "杩戝叚涓湀"],
+ moduleOptions: [],
+ gongnengOptions: [],
+ resultOptions: [
{
- value: "閫夐」1",
- label: "榛勯噾绯�",
+ value: "",
+ label: "鍏ㄩ儴",
},
{
- value: "閫夐」2",
- label: "鍙岀毊濂�",
+ value: "鎴愬姛",
+ label: "鎴愬姛",
},
{
- value: "閫夐」3",
- label: "铓典粩鐓�",
- },
- {
- value: "閫夐」4",
- label: "榫欓』闈�",
- },
- {
- value: "閫夐」5",
- label: "鍖椾含鐑ら腑",
+ value: "澶辫触",
+ label: "澶辫触",
},
],
value: "",
+ page: 1,
+ pageSize: 15,
+ activeDateChoise: 0,
+ gongneng: "",
+ result: "",
+ curModule: "",
+ timeStart: "",
+ timeEnd: "",
+ fuzzySearch: "",
+ total:0,
};
},
- mounted() {},
-
+ mounted() {
+ this.getTimeRange(24 * 60 * 60 * 1000);
+ this.getOperationLog();
+ this.getOptions();
+ },
methods: {
- format(array) {
- return [
- this.$moment(array[0]).format("YYYY-MM-DD"),
- this.$moment(array[1]).format("YYYY-MM-DD"),
- ];
+ gongnengChange(val) {},
+ moduleChange(val) {
+ this.getOperationLog()
+ this.gongneng=""
+ getOperations({
+ module: this.curModule,
+ }).then((res) => {
+ this.gongnengOptions = res.data;
+ });
+ },
+ getOptions() {
+ getModules().then((res) => {
+ this.moduleOptions = res.data;
+ });
+ },
+ 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.getOperationLog();
+ this.activeDateChoise = i;
+ },
+ getOperationLog(timeStart, timeEnd) {
+ const data= {
+ timeStart: this.timeStart,
+ timeEnd: this.timeEnd,
+ page: this.page,
+ pageSize: this.pageSize,
+ module: this.curModule,
+ function: this.gongneng,
+ result: this.result,
+ fuzzySearch: this.fuzzySearch,
+ }
+ queryOperationLog(data).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}`;
+ },
+ getTimeRange(gap) {
+ var date = new Date(); //褰撳墠鏃堕棿
+ var preDay = new Date(new Date().getTime() - gap);
+ this.timeStart = this.getTimeStr(preDay)
+ this.timeEnd = this.getTimeStr(date)
},
},
};
@@ -166,7 +318,7 @@
background-color: rgba(61, 104, 225, 1);
color: #fff;
}
- .opt:focus {
+ .opt-active {
color: #fff;
background-color: rgba(61, 104, 225, 1);
}
@@ -178,25 +330,36 @@
}
}
.second {
- display: flex;
-
+ display: flex;
+ margin: 10px 0;
.bar {
display: flex;
align-items: baseline;
- background: aliceblue;
width: fit-content;
padding-left: 20px;
- .name{
+ .name {
margin-right: 5px;
}
}
}
}
.table {
- margin-top: 10px;
- background: #fff;
- height: 100%;
+ 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