From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期三, 20 七月 2022 15:05:58 +0800 Subject: [PATCH] 修复国标配置的bug --- src/pages/syslog/views/eventPushLog.vue | 833 +++++++++++++++++++++++++++++------------------------------ 1 files changed, 406 insertions(+), 427 deletions(-) diff --git a/src/pages/syslog/views/eventPushLog.vue b/src/pages/syslog/views/eventPushLog.vue index 0ddb633..3cdb001 100644 --- a/src/pages/syslog/views/eventPushLog.vue +++ b/src/pages/syslog/views/eventPushLog.vue @@ -1,478 +1,457 @@ <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> + <div class="search"> + <el-input + placeholder="鎼滅储" + v-model="fuzzySearch" + size="small" + class="input-with-select" + @keyup.enter.native="getPushLog(1)" + > + <span class="icon iconfont icon_clear" @click="clearSearch" slot="append" v-if="fuzzySearch"> +  + </span> + <span class="icon iconfont icon_search" @click="getPushLog(1)" slot="append"> +  + </span> - <span class="menu-text">鏇存柊璁剧疆</span> - </div> + <!-- <el-button + slot="append" + icon="el-icon-search" + @click="getPushLog(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="state" placeholder="璇烽�夋嫨" size="small" @change="stateChange"> + <el-option v-for="(item, i) in stateOptions" :key="i" :label="item.label" :value="item.value"> </el-option> + </el-select> </div> </div> </div> + <div class="table"> + <el-table + class="tableBox" + ref="multipleTable" + :cell-style="styleFunc" + highlight-current-row + :data="tableData" + :header-cell-style="{ background: '#f8f8f8', color: '#222222' }" + style="width: 100%" + v-if="!showSubTable" + border + > + <template slot="empty"> + <img :src="png1" class="empty_img" alt="" /> + </template> + <el-table-column :align="'center'" label="搴忓彿" type="index" width="50"> </el-table-column> + <el-table-column sortable :align="'center'" prop="name" label="浠诲姟鍚嶇О"></el-table-column> + <el-table-column :align="'center'" sortable prop="state" label="鐘舵��"></el-table-column> + <el-table-column :align="'center'" sortable prop="lastSendDate" label="鏈�杩戜竴娆℃帹閫佹椂闂�"></el-table-column> + <el-table-column :align="'center'" prop="lastSendState" label="鏈�杩戜竴娆℃帹閫佺姸鎬�"> + <template #default="{ row }"> + <span v-show="row.lastSendState != ''" :style="row.lastSendState === 'true' ? 'color:green' : 'color:red'" + >{{ row.lastSendState === "true" ? "鎴愬姛" : "澶辫触" }} + </span> + </template> + </el-table-column> + <el-table-column :align="'center'" sortable prop="totalSuccess" label="鎴愬姛鎬婚噺"></el-table-column> + <el-table-column :align="'center'" prop="totalFailure" label="澶辫触鎬婚噺"></el-table-column> + <!-- <el-table-column :align="'center'" prop="totalCached" label="绛夊緟閲嶆帹"></el-table-column> --> + </el-table> + + <div class="back" v-if="showSubTable" @click="showSubTable = false"> + <span class="icon iconfont"></span> + <span class="title" style="color: #4e94ff">浜嬩欢鎺ㄩ�佹棩蹇�</span> + </div> + <el-table + class="tableBox" + ref="multipleTable" + :cell-style="styleFunc" + highlight-current-row + :data="subTableData" + :header-cell-style="{ background: '#f8f8f8', color: '#222222' }" + style="width: 100%" + v-if="showSubTable" + border + > + <template slot="empty"> + <img :src="png2" class="empty_img2" alt="" /> + </template> + <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> + </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 { pad0 } from "@/api/utils" +import { queryDataPushLog } 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, - }; + png1: "", + png2: require("../../../../public/images/syslog/娌℃暟鎹�.png"), + loading: false, + loadingText: "", + showSubTable: false, + tableData: [], + subTableData: [], + dateArr: ["浠婃棩", "杩戜笁澶�", "杩戜竷澶�", "杩戜竴涓湀", "杩戝叚涓湀"], + hostNameOptions: [], + stateOptions: [ + { + value: "", + label: "鍏ㄩ儴" + }, + { + value: "瀹屾垚", + label: "瀹屾垚" + }, + { + value: "杩涜涓�", + label: "杩涜涓�" + } + ], + value: "", + page: 1, + pageSize: 15, + activeDateChoise: 0, + hostName: "", + result: "", + state: "", + timeStart: "", + timeEnd: "", + fuzzySearch: "", + total: 0 + } }, - mounted() {}, + mounted() { + this.getTimeRange(24 * 60 * 60 * 1000) + this.getPushLog() + }, methods: { - onFileUpload(file) { - this.patchUpdateStatus = `<span style="color:green">涓婁紶鎴愬姛, 鐐瑰嚮鍗囩骇鎸夐挳寮�濮嬪崌绾�</span>`; - this.patchFile = { ...file }; - this.fileAdded = true; - }, - onFileAdded() { - this.patchUpdateStatus = ""; - }, - 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); - } - }); - }, - 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(); - }); - }, - 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; + styleFunc({ row, column, rowIndex, columnIndex }) { + if (columnIndex == 6) { + return { cursor: "pointer" } } - this.timer = setTimeout(() => { - getDevInfo() - .then(() => { - cb(); - }) - .catch((err) => { - _this.probeServer(cb); - }); - }, 10000); + return {} }, - 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; + handleSizeChange(val) { + this.pageSize = val + // this.getPushLog(); }, - switchChange(typ) { - console.log(this[typ]); + handleCurrentChange(val) { + this.page = val + // this.getPushLog(); }, - }, -}; + stateChange(val) { + this.getPushLog(1) + }, + 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.getPushLog(1) + this.activeDateChoise = i + }, + getPushLog(typ) { + if (typ == 1) { + this.page = 1 + } + queryDataPushLog({ + timeStart: this.timeStart, + timeEnd: this.timeEnd, + page: this.page, + pageSize: this.pageSize, + state: this.state, + function: this.hostName, + result: this.result, + fuzzySearch: this.fuzzySearch + }).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()) //鏃� + return `${date.getFullYear()}-${month}-${day}` + }, + getTimeRange(gap) { + var date = new Date() //褰撳墠鏃堕棿 + // 璁$畻鍑烘潵鐨勬椂闂翠細澶氫竴澶�, 涓轰簡涓嶄慨鏀逛笂杈圭殑浠g爜, 璁$畻鏃跺鍔犱竴澶� + // 淇鏃堕棿浠庤捣濮嬫棩鏈熺殑, 0鐐瑰紑濮嬪埌24鐐圭粨鏉� + var preDay = new Date(new Date().getTime() - gap + 24 * 60 * 60 * 1000) + this.timeStart = this.getTimeStr(preDay) + " 00:00:00" + this.timeEnd = this.getTimeStr(date) + " 23:59:59" + }, + clearSearch() { + this.fuzzySearch = "" + this.getPushLog(1) + } + } +} </script> <style lang="scss"> -.all { +.push-log { + margin: 0 auto; + padding: 0px 8px 10px 5px; + border-top: 1px solid #e1e0e6; + background-color: rgba(242, 242, 247, 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: 132px; + background: #fff; + border-radius: 5px; + .first { display: flex; justify-content: space-between; - .con { - .iconfont { + align-items: center; + height: 45px; + padding: 20px 20px 0 20px; + .time-option { + display: flex; + justify-content: space-between; + align-items: center; + .title { margin-right: 10px; + min-width: fit-content; + font-weight: bold; + font-size: 12px; } - .menu-text { - font-size: 15px; + .opts { + display: flex; + justify-content: space-between; + .opt { + box-sizing: border-box; + border: 2px solid #efeff6; + min-width: fit-content; + width: 100px; + height: 36px; + padding: 0 15px; + border-radius: 4px; + cursor: pointer; + margin-right: 2px; + line-height: 32px; + font-size: 12px; + color: #333; + } + .opt:hover { + border-color: #4e94ff; + } + .opt-active { + color: #fff; + background-color: #4e94ff; + border-color: #4e94ff; + } + } + } + .search { + width: 280px; + height: 36px; + display: flex; + align-items: center; + + .input-with-select { + width: 100%; + height: 100%; + + input { + height: 100%; + border-radius: 18px 0 0 18px; + border: 2px solid #f2f2f7; + border-right: none; + + &:focus, + &:focus + .el-input-group__append { + border-color: #409eff; + } + } + + .el-input-group__append { + transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); + background-color: #fff; + border: 2px solid #f2f2f7; + border-radius: 0 18px 18px 0; + border-left: none; + } + } + + span { + cursor: pointer; + color: rgb(47, 45, 61); + font-weight: 700; + font-size: 19px; + } + } + } + .second { + display: flex; + margin: 15px 0 20px 0; + padding: 0 20px; + .bar { + display: flex; + align-items: baseline; + width: fit-content; + margin-right: 30px; + min-width: 120px; + + .el-select { + width: 200px; + height: 36px; + + .el-input { + width: 100%; + height: 100%; + + input { + width: 100%; + height: 100%; + border: 2px solid #f2f2f7; + border-radius: 20px; + } + } + } + .name { + margin-right: 15px; + min-width: fit-content; + font-weight: bold; + font-size: 12px; } } } } - .cluster-right { - flex: 1; - flex-basis: auto; - overflow: auto; - 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; + .table { + margin-top: 16px; + border-radius: 5px; + padding: 12px; + background-color: white; + .empty_img { + margin: 80px auto; + width: 164px; } - .el-select { - width: 100%; + .empty_img2 { + margin: 50px auto; + width: 164px; } - .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 { + .back { 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; - } + align-items: center; + .icon { + cursor: pointer; + margin: 0 5px; + font-size: 18px; } - .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 { + .title { + cursor: pointer; + line-height: 30px; font-size: 14px; } } - .wifi { - .content { - margin-bottom: 20px; + .tableBox { + border: none; + &::before, + &::after { + display: none; } - .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; + + 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); } } - .title { - text-align: left; - padding: 10px; - font-size: 16px; + 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; } } - - .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; - } + } + .el-pagination { + padding: 20px 5px; + height: 100%; + box-sizing: border-box; + background-color: white; } } </style> -- Gitblit v1.8.0