From d365829b14ca4256d39694b9cdcd43bad0ad8595 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期五, 11 二月 2022 18:18:39 +0800 Subject: [PATCH] bug修复 --- src/pages/syslog/views/pollingLog.vue | 261 ++++++++++++++++++++++++++++++--------------------- 1 files changed, 154 insertions(+), 107 deletions(-) diff --git a/src/pages/syslog/views/pollingLog.vue b/src/pages/syslog/views/pollingLog.vue index 895c3cf..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"> @@ -16,21 +12,22 @@ <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"> +  + </span> + <span class="icon iconfont icon_search" @click="getScheduleLog(1)" slot="append">  </span> + <!-- <el-button slot="append" icon="el-icon-search" - @click="getScheduleLog" + @click="getOperationLog(1)" ></el-button> --> </el-input> </div> @@ -47,6 +44,7 @@ @change="dateChange" end-placeholder="缁撴潫鏃ユ湡" :picker-options="pickerOptions" + popper-class="pollingLog_timePicker" > </el-date-picker> </div> @@ -65,8 +63,7 @@ <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'" label="搴忓彿" type="index" width="50"> </el-table-column> <el-table-column :align="'center'" sortable @@ -81,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> @@ -106,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" @@ -126,23 +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: "", + png: require("../../../../public/images/syslog/娌℃暟鎹�.png"), loading: false, loadingText: "", tableData: [], @@ -151,7 +132,7 @@ dateRange: [], cameraTree: [], props: { - label: "name", + label: "name" }, value: "", page: 1, @@ -172,126 +153,134 @@ { text: "鏈�杩戜竴鍛�", onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); - picker.$emit("pick", [start, end]); - }, + 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]); - }, + 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]); - }, - }, - ], - }, - }; + 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.png = require("../../../../public/images/syslog/娌℃暟鎹�.png"); - }); + 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 { @@ -458,6 +447,13 @@ } 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; @@ -492,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