From 182aed85616f7ac60d0ffb02e4feac5661b80e0c Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期三, 08 六月 2022 10:40:21 +0800 Subject: [PATCH] 修复初始化页面 --- src/pages/syslog/views/pollingLog.vue | 169 +++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 160 insertions(+), 9 deletions(-) diff --git a/src/pages/syslog/views/pollingLog.vue b/src/pages/syslog/views/pollingLog.vue index db7f82b..92bcb10 100644 --- a/src/pages/syslog/views/pollingLog.vue +++ b/src/pages/syslog/views/pollingLog.vue @@ -16,27 +16,37 @@ <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)" + 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> </div> <div class="second"> - <span>鏃ユ湡鏃堕棿锛�</span> + <span class="title">鏃ユ湡鏃堕棿锛�</span> <el-date-picker v-model="dateRange" size="small" @@ -46,6 +56,8 @@ start-placeholder="寮�濮嬫棩鏈�" @change="dateChange" end-placeholder="缁撴潫鏃ユ湡" + :picker-options="pickerOptions" + popper-class="pollingLog_timePicker" > </el-date-picker> </div> @@ -59,7 +71,11 @@ :header-cell-style="{ background: '#f8f8f8', color: '#222222' }" @selection-change="handleSelectionChange" style="width: 100%" + border > + <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 @@ -79,7 +95,7 @@ <el-table-column :align="'center'" sortable - prop="procName" + prop="info" label="鎽勫儚鏈�" ></el-table-column> <el-table-column @@ -137,6 +153,7 @@ export default { data() { return { + png: require("../../../../public/images/syslog/娌℃暟鎹�.png"), loading: false, loadingText: "", tableData: [], @@ -161,6 +178,37 @@ 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() { @@ -171,11 +219,11 @@ methods: { handleSizeChange(val) { this.pageSize = val; - this.getOperationLog(); + this.getScheduleLog(); }, handleCurrentChange(val) { this.page = val; - this.getOperationLog(); + this.getScheduleLog(); }, cancelShow() { this.dialogVisible = false; @@ -217,12 +265,17 @@ 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, }; @@ -249,6 +302,12 @@ this.timeStart = this.getTimeStr(preDay); this.timeEnd = this.getTimeStr(date); this.dateRange = [this.timeStart, this.timeEnd]; + }, + handleSelectionChange() {}, + handleClose() {}, + clearSearch() { + this.fuzzySearch = ""; + this.getScheduleLog(1); }, }, }; @@ -374,8 +433,15 @@ } .second { display: flex; + align-items: center; 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; @@ -398,16 +464,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; } } } @@ -418,4 +518,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