From 4b43bfb3f6f499f480712dd29bef52275466afd6 Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期五, 30 七月 2021 22:10:59 +0800 Subject: [PATCH] change all --- src/pages/syslog/views/eventPushLog.vue | 732 +++++++++++++++++++++++--------------------------------- 1 files changed, 301 insertions(+), 431 deletions(-) diff --git a/src/pages/syslog/views/eventPushLog.vue b/src/pages/syslog/views/eventPushLog.vue index 0ddb633..7776d13 100644 --- a/src/pages/syslog/views/eventPushLog.vue +++ b/src/pages/syslog/views/eventPushLog.vue @@ -1,478 +1,348 @@ <template> - <div class="all"> - <div class="cluster-content"> - <div class="cluster-center" ref="left"> - <div class="menu-item" @click="openRight(0)"> - <div class="con"> - <span class="icon iconfont"></span> - <span class="menu-text">绯荤粺鏇存柊</span> + <div class="push-log" v-loading="loading" :element-loading-text="loadingText"> + <div class="top"> + <div class="first"> + <div class="time-option"> + <div class="title">鍛ㄦ湡锛�</div> + + <div class="opts"> + <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="menu-item" @click="openRight(1)"> - <div class="con"> - <span class="icon iconfont"></span> - - <span class="menu-text">鏇存柊璁剧疆</span> - </div> + <div class="search"> + <el-input + placeholder="鎼滅储" + v-model="fuzzySearch" + size="small" + class="input-with-select" + > + <el-button + slot="append" + icon="el-icon-search" + @click="getOperationLog(1)" + ></el-button> + </el-input> </div> </div> - <div class="cluster-right"> - <div class="net-set" v-if="activePage == 0"> - <el-radio-group v-model="radio2" size="medium"> - <el-radio-button label="妫�鏌ユ洿鏂�"></el-radio-button> - <el-radio-button label="涓婁紶鏇存柊"></el-radio-button> - </el-radio-group> + <div class="second"> + <div class="bar"> + <div class="name">鐘舵�侊細</div> - <div class="update-center" v-if="radio2 == '妫�鏌ユ洿鏂�'"> - <div class="spin-bg"></div> - <div class="line"></div> - <div class="desc">{{ "妫�鏌ュ埌鏈�鏂扮増鏈細1.0.2" }}</div> - <el-button type="primary" size="small">鏇存柊</el-button> - </div> - <div class="upload-center" v-if="radio2 == '涓婁紶鏇存柊'"> - <!-- uploadPlaceholder="涓婁紶鍗囩骇鏂囦欢" --> - <div class="top"> - <div class="up-text">涓婁紶鏇存柊鏂囦欢</div> - <fileUploader - single - url="/data/api-v/sysset/patchUpdate" - @complete="onFileUpload" - @file-added="onFileAdded" - /> - <el-button - type="primary" - size="small" - style="width: 80px" - @click="upgrade" - :disabled="!fileAdded" - :loading="upgrading" - >鍗囩骇</el-button - > - </div> - - <div class="update-center"> - <div class="spin-bg"></div> - <div class="line"></div> - <div class="desc">{{ "妫�鏌ュ埌鏈�鏂扮増鏈細1.0.2" }}</div> - <el-button type="primary" size="small">鏇存柊</el-button> - </div> - <!-- <span v-html="patchUpdateStatus"></span> --> - </div> - - <div class="cur-version">褰撳墠鐗堟湰锛歿{ "1.0.1" }}</div> - </div> - - <div class="wifi" v-if="activePage == 1"> - <div class="content"> - <div class="title">绯荤粺鏇存柊璁剧疆</div> - - <div class="bar"> - <div class="name">鑷姩娓呯悊杞欢鍖呯紦瀛�</div> - <el-switch - v-model="sys_auto_clear" - active-color="rgba(61, 104, 225, 1)" - @change="switchChange('sys_auto_clear')" - > - </el-switch> - </div> - - <div class="bar"> - <div class="name">鏇存柊鎻愰啋</div> - <el-switch - v-model="sys_remind" - active-color="rgba(61, 104, 225, 1)" - @change="switchChange('sys_remind')" - > - </el-switch> - </div> - - <div class="bar" v-if="sys_remind"> - <div class="name">鑷姩涓嬭浇鏇存柊</div> - <el-switch - v-model="sys_auto_download" - active-color="rgba(61, 104, 225, 1)" - @change="switchChange('sys_auto_download')" - > - </el-switch> - </div> - </div> - - <div class="content"> - <div class="title">搴旂敤/绠楁硶鏇存柊璁剧疆</div> - - <div class="bar"> - <div class="name">鑷姩娓呯悊杞欢鍖呯紦瀛�</div> - <el-switch - v-model="app_auto_clear" - active-color="rgba(61, 104, 225, 1)" - @change="switchChange('app_auto_clear')" - > - </el-switch> - </div> - - <div class="bar"> - <div class="name">鏇存柊鎻愰啋</div> - <el-switch - v-model="app_remind" - active-color="rgba(61, 104, 225, 1)" - @change="switchChange('app_remind')" - > - </el-switch> - </div> - - <div class="bar" v-if="app_remind"> - <div class="name">鑷姩涓嬭浇鏇存柊</div> - <el-switch - v-model="app_auto_download" - active-color="rgba(61, 104, 225, 1)" - @change="switchChange('app_auto_download')" - > - </el-switch> - </div> - </div> + <el-select + v-model="level" + placeholder="璇烽�夋嫨" + size="small" + @change="levelChange" + > + <el-option label="鍏ㄩ儴" :value="''"> </el-option> + <el-option + v-for="item in levelOptions" + :key="item.proc_name" + :label="item.proc_name" + :value="item.proc_name" + > + </el-option> + </el-select> </div> </div> </div> + <div class="table"> + <el-table + class="tableBox" + ref="multipleTable" + highlight-current-row + :data="tableData" + :header-cell-style="{ background: '#f8f8f8', color: '#222222' }" + style="width: 100%" + > + <el-table-column :align="'center'" label="搴忓彿" type="index" width="50"> + </el-table-column> + <el-table-column + :align="'center'" + sortable + + 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> + </div> + + <el-pagination + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + :current-page="page" + :page-sizes="[15, 30, 50, 100]" + :page-size="15" + layout="total, sizes, prev, pager, next, jumper" + :total="total" + > + </el-pagination> </div> </template> <script> -import { getDevInfo, doUpgrade } from "@/api/system"; -import FileUploader from "@/components/subComponents/FileUpload/index"; +import { deleteDate } from "@/api/system"; +import { pad0 } from "@/api/utils"; +import { } from "@/api/log"; export default { - components: { - FileUploader, - }, data() { return { - wifiList: [{ name: "鏃犵嚎缃戠粶1" }, { name: "鏃犵嚎缃戠粶2" }], - radio2: "妫�鏌ユ洿鏂�", - activePage: 0, - patchUpdateStatus: "", - probeSum: 0, - sys_auto_clear: false, - sys_remind: false, - sys_auto_download: false, - app_auto_clear: false, - app_remind: false, - app_auto_download: false, - timer: null, - patchFile: {}, - - fileAdded: false, - upgrading: false, + loading: false, + loadingText: "", + input3: "", + tableData: [], + dateArr: ["浠婃棩", "杩戜笁澶�", "杩戜竷澶�", "杩戜竴涓湀", "杩戝叚涓湀"], + levelOptions: [], + hostNameOptions: [], + resultOptions: [ + { + value: "", + label: "鍏ㄩ儴", + }, + { + value: "鎴愬姛", + label: "鎴愬姛", + }, + { + value: "澶辫触", + label: "澶辫触", + }, + ], + value: "", + page: 1, + pageSize: 15, + activeDateChoise: 0, + hostName: "", + result: "", + level: "", + timeStart: "", + timeEnd: "", + fuzzySearch: "", + total: 0, }; }, - mounted() {}, + mounted() { + this.getTimeRange(24 * 60 * 60 * 1000); + // this.getOperationLog(); + this.getOptions(); + }, methods: { - onFileUpload(file) { - this.patchUpdateStatus = `<span style="color:green">涓婁紶鎴愬姛, 鐐瑰嚮鍗囩骇鎸夐挳寮�濮嬪崌绾�</span>`; - this.patchFile = { ...file }; - this.fileAdded = true; + handleSizeChange(val) { + this.pageSize = val; + // this.getOperationLog(); }, - onFileAdded() { - this.patchUpdateStatus = ""; + handleCurrentChange(val) { + this.page = val; + // this.getOperationLog(); }, - upgrade() { - this.upgrading = true; - this.patchUpdateStatus = `<span style="color:red">姝e湪鍗囩骇...</span>`; - doUpgrade(this.patchFile) - .then((rsp) => { - this.upgrading = false; - if (rsp && rsp.success) { - clearTimeout(this.timer); - this.doneUpgrade(); - } - }) - .catch((err) => { - if (err.code) { - this.upgrading = false; - this.patchUpdateStatus = `<span style="color:red">${err.data}</span>`; - clearTimeout(this.timer); - } else { - this.probeServer(this.doneUpgrade); - } - }); + levelChange(val) { + // this.getOperationLog(1); + // this.hostName = ""; + // getOperations({ + // module: this.level, + // }).then((res) => { + // this.hostNameOptions = res.data; + // }); }, - doneUpgrade() { - this.upgrading = false; - this.patchUpdateStatus = `<span style="color:green">鍗囩骇鎴愬姛</span>`; - let _this = this; - this.$confirm("鍗囩骇鎴愬姛, 璇烽噸鏂扮櫥褰曠郴缁�", "鎴愬姛", { - type: "success", - cancelButtonClass: "comfirm-class-cancle", - confirmButtonClass: "comfirm-class-sure", - }).then(() => { - _this.reLogin(); + getOptions() { + getModules().then((res) => { + this.levelOptions = res.data; }); }, - reLogin() { - this.$router.push("/"); - }, - 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; + 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.timer = setTimeout(() => { - getDevInfo() - .then(() => { - cb(); - }) - .catch((err) => { - _this.probeServer(cb); - }); - }, 10000); + // this.getOperationLog(1); + this.activeDateChoise = i; }, - openRight(typ) { - const es = document.getElementsByClassName("menu-item"); - es[this.activePage].style.backgroundColor = "#f8f8f8"; - es[this.activePage].style.color = "rgba(54, 54, 54, 1)"; - es[typ].style.backgroundColor = "rgba(61, 104, 225, 1)"; - es[typ].style.color = "#fff"; - this.activePage = typ; + getOperationLog(typ) { + if (typ==1) { + this.page=1 + } + // queryOperationLog({ + // timeStart: this.timeStart, + // timeEnd: this.timeEnd, + // page: this.page, + // pageSize: this.pageSize, + // module: this.level, + // function: this.hostName, + // result: this.result, + // fuzzySearch: this.fuzzySearch, + // }).then((res) => { + // this.tableData = res.data.logs; + // this.total = res.data.total; + // }); }, - switchChange(typ) { - console.log(this[typ]); + 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); }, }, }; </script> <style lang="scss"> -.all { +.push-log { + margin: 0 auto; + padding: 10px 8px 10px 5px; + background-color: rgba(248, 248, 248, 1); width: 100%; -} - -.cluster-content { - height: 100%; display: flex; - flex-direction: row; - flex: 1; - flex-basis: auto; - box-sizing: border-box; - .cluster-center { - height: 100%; - width: 280px; - overflow: auto; - box-sizing: border-box; - flex-shrink: 0; - padding: 10px; - border-right: 5px solid #f8f8f8; - - // background-color: lavender; - .menu-item { - background-color: #f8f8f8; - height: 50px; - margin-bottom: 10px; - border-radius: 8px; - line-height: 50px; - box-sizing: border-box; - font-size: 14px; - cursor: pointer; - padding: 0 20px; + flex-direction: column; + overflow: auto; + .top { + height: 100px; + background: #fff; + border-radius: 5px; + .first { display: flex; justify-content: space-between; - .con { - .iconfont { + height: 45px; + padding: 0 20px; + .time-option { + display: flex; + justify-content: space-between; + align-items: center; + .title { margin-right: 10px; + min-width: fit-content; + font-size: 14px; } - .menu-text { - font-size: 15px; + .opts { + display: flex; + justify-content: space-between; + .opt { + min-width: fit-content; + width: 50px; + height: 32px; + padding: 0 15px; + border-radius: 4px; + cursor: pointer; + margin-right: 10px; + 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; + } + } + .second { + display: flex; + margin: 10px 0; + padding: 0 20px; + .bar { + display: flex; + align-items: baseline; + width: fit-content; + margin-right: 20px; + min-width: 120px; + .name { + margin-right: 5px; + min-width: fit-content; + font-size: 14px; } } } } - .cluster-right { - flex: 1; - flex-basis: auto; - overflow: auto; + .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; + } + } + } + .el-pagination { + padding: 20px 5px; + height: 100%; box-sizing: border-box; - position: relative; - padding: 20px 40px; - .el-form-item.is-required:not(.is-no-asterisk) - > .el-form-item__label:before, - .el-form-item.is-required:not(.is-no-asterisk) - .el-form-item__label-wrap - > .el-form-item__label:before { - display: none; - } - .el-select { - width: 100%; - } - .el-form-item { - margin-bottom: 10px; - height: 50px; - background: #f8f8f8; - padding: 4px 20px; - -webkit-box-sizing: border-box; - box-sizing: border-box; - border-radius: 10px; - .el-form-item__label { - text-align: left; - line-height: 42px; - } - } - .el-form-item__content { - line-height: 40px; - position: relative; - font-size: 14px; - } - .ip-input-container { - max-width: none !important; - } - .net-set { - display: flex; - flex-direction: column; - justify-content: space-between; - height: 95%; - // .el-radio-button__inner { - // // color: #333333; - // border: none; - // } - .update-center { - height: 160px; - .spin-bg { - width: 70px; - height: 70px; - background: rgba(230, 230, 230, 1); - margin: 0 auto; - border-radius: 35px; - } - .line { - width: 180px; - height: 5px; - background: #e6e6e6; - border-radius: 5px; - margin: 5px auto; - } - .desc { - height: 20px; - line-height: 20px; - font-size: 14px; - color: rgba(161, 161, 161, 1); - margin-bottom: 10px; - } - .el-button { - width: 120px; - } - .el-button--small { - font-size: 14px; - } - } - .upload-center { - height: 340px; - - // margin: 0 auto; - .update-center { - height: 160px; - .spin-bg { - width: 70px; - height: 70px; - background: rgba(230, 230, 230, 1); - margin: 0 auto; - border-radius: 35px; - } - .line { - width: 180px; - height: 5px; - background: #e6e6e6; - border-radius: 5px; - margin: 5px auto; - } - .desc { - height: 20px; - line-height: 20px; - font-size: 14px; - color: rgba(161, 161, 161, 1); - margin-bottom: 10px; - } - .el-button { - width: 120px; - } - .el-button--small { - font-size: 14px; - } - } - .top { - display: flex; - justify-content: space-evenly; - align-items: center; - background: rgba(248, 248, 248, 1); - box-sizing: border-box; - padding: 8px 10px; - border-radius: 8px; - .el-input--small .el-input__inner { - border: none; - } - .uploader-btn { - padding: 6px 8px; - .el-icon-upload2 { - font-size: 21px; - font-weight: 600; - } - } - } - .up-text { - height: 32px; - line-height: 32px; - font-size: 14px; - min-width: 105px; - margin-right: 5px; - } - .file-uploader { - width: 100%; - margin-right: 20px; - min-width: 150px; - } - } - .cur-version { - font-size: 14px; - } - } - .wifi { - .content { - margin-bottom: 20px; - } - .bar { - display: flex; - align-items: center; - height: 50px; - padding: 0 25px; - background-color: #f8f8f8; - justify-content: space-between; - border-radius: 12px; - margin-bottom: 10px; - .name { - font-size: 15px; - } - } - .title { - text-align: left; - padding: 10px; - font-size: 16px; - } - } - - .save-btn { - background-color: #3d68e1; - width: 240px; - height: 40px; - margin: 0 auto; - border-radius: 10px; - color: #fff; - line-height: 40px; - font-size: 14px; - margin-top: 20px; - } + background-color: white; } } </style> -- Gitblit v1.8.0