From f0ef409370c5520f8154b85aeb34ee76aa71617f Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期二, 09 十一月 2021 15:36:30 +0800 Subject: [PATCH] 暂存 --- src/pages/syslog/views/operationLog.vue | 98 ++++++++++++++++++++---- src/pages/syslog/views/systemLog.vue | 13 +- src/pages/syslog/views/pollingLog.vue | 7 + src/pages/syslog/views/eventPushLog.vue | 49 ++++++------ src/pages/syslog/index/App.vue | 33 ++++---- 5 files changed, 132 insertions(+), 68 deletions(-) diff --git a/src/pages/syslog/index/App.vue b/src/pages/syslog/index/App.vue index 4b58fc0..dc1a3c3 100644 --- a/src/pages/syslog/index/App.vue +++ b/src/pages/syslog/index/App.vue @@ -37,10 +37,10 @@ data() { return { menuArr: [ - { name: "鎿嶄綔鏃ュ織", icon: "\ue706", size: 19 }, - { name: "绯荤粺鏃ュ織", icon: "\ue730", size: 19 }, - { name: "杞鏃ュ織", icon: "\ue708", size: 21 }, - { name: "浜嬩欢鎺ㄩ�佹棩蹇�", icon: "\ue707", size: 13 }, + { name: "鎿嶄綔鏃ュ織", icon: "\ue706", size: 26 }, + { name: "绯荤粺鏃ュ織", icon: "\ue730", size: 26 }, + { name: "杞鏃ュ織", icon: "\ue708", size: 26 }, + { name: "浜嬩欢鎺ㄩ�佹棩蹇�", icon: "\ue707", size: 15 }, ], activePage: 0, }; @@ -63,37 +63,38 @@ background-color: #fff; .container-left { height: 100%; - width: 210px; + width: 244px; overflow: auto; box-sizing: border-box; flex-shrink: 0; padding: 10px; - border-right: 5px solid rgba(248, 248, 248, 1); border-top: 1px solid #e1e0e6; box-sizing: border-box; + background-color: #fff; .left-card { - height: 55px; + height: 56px; cursor: pointer; - border-radius: 12px; - margin-bottom: 10px; + border-radius: 8px; + margin-bottom: 4px; display: flex; align-items: center; + .iconfont { - margin-left: 15px; - margin-right: 10px; - font-size: 20px; + margin-left: 17px; + margin-right: 27px; + font-size: 26px; } .card-text { - font-size: 16px; + font-weight: bold; + font-size: 14px; } } .left-card-active { - background-color: rgba(61, 104, 225, 1); + background-color: #4e94ff !important; color: #fff; } .left-card:hover { - background-color: rgba(61, 104, 225, 1); - color: #fff; + background-color: #f2f2f7; } } } diff --git a/src/pages/syslog/views/eventPushLog.vue b/src/pages/syslog/views/eventPushLog.vue index 7cb991e..1807b80 100644 --- a/src/pages/syslog/views/eventPushLog.vue +++ b/src/pages/syslog/views/eventPushLog.vue @@ -104,12 +104,12 @@ label="澶辫触鎬婚噺" ></el-table-column> </el-table> - - <div class="back" v-if="showSubTable" @click="showSubTable=false"> + + <div class="back" v-if="showSubTable" @click="showSubTable = false"> <span class="icon iconfont"></span> <span class="title">浜嬩欢鎺ㄩ�佹棩蹇�</span> </div> - <el-table + <el-table class="tableBox" ref="multipleTable" :cell-style="styleFunc" @@ -150,7 +150,6 @@ prop="result" label="鍐嶆鎺ㄩ�佺姸鎬�" ></el-table-column> - </el-table> </div> @@ -176,15 +175,13 @@ data() { return { loading: false, - loadingText: "",showSubTable: false, + loadingText: "", + showSubTable: false, tableData: [ { msg: 2, userName: "杞﹁締璇嗗埆" }, { userName: "浜鸿劯璇嗗埆", msg: 4 }, ], - subTableData:[ - - - ], + subTableData: [], dateArr: ["浠婃棩", "杩戜笁澶�", "杩戜竷澶�", "杩戜竴涓湀", "杩戝叚涓湀"], levelOptions: [], hostNameOptions: [], @@ -250,9 +247,7 @@ }); }, clickFaults(row, column, cell, event) { - this.showSubTable=true - - + this.showSubTable = true; }, choseRange(item, i) { switch (item) { @@ -315,8 +310,9 @@ <style lang="scss"> .push-log { margin: 0 auto; - padding: 10px 8px 10px 5px; - background-color: rgba(248, 248, 248, 1); + padding: 0px 8px 10px 5px; + border-top: 1px solid #e1e0e6; + background-color: rgba(242, 242, 247, 1); width: 100%; display: flex; flex-direction: column; @@ -372,7 +368,7 @@ display: flex; margin: 10px 0; padding: 0 20px; - + .bar { display: flex; align-items: baseline; @@ -392,17 +388,20 @@ border-radius: 5px; padding: 12px; background-color: white; - .back{ - display: flex; - align-items: center; - .icon{ - cursor: pointer; margin:0 5px;font-size: 18px; - } - .title{ - cursor: pointer; line-height: 30px;font-size: 14px; - - } + .back { + display: flex; + align-items: center; + .icon { + cursor: pointer; + margin: 0 5px; + font-size: 18px; } + .title { + cursor: pointer; + line-height: 30px; + font-size: 14px; + } + } .tableBox { th { padding: 0 !important; diff --git a/src/pages/syslog/views/operationLog.vue b/src/pages/syslog/views/operationLog.vue index 067cc63..8ba295e 100644 --- a/src/pages/syslog/views/operationLog.vue +++ b/src/pages/syslog/views/operationLog.vue @@ -24,11 +24,18 @@ size="small" class="input-with-select" > - <el-button + <span + class="icon iconfont" + @click="getOperationLog(1)" + slot="append" + > +  + </span> + <!-- <el-button slot="append" icon="el-icon-search" @click="getOperationLog(1)" - ></el-button> + ></el-button> --> </el-input> </div> </div> @@ -291,21 +298,23 @@ <style lang="scss"> .op-log { margin: 0 auto; - padding: 1px 8px 10px 0; - background-color: rgba(248, 248, 248, 1); + padding: 0px 8px 10px 5px; + border-top: 1px solid #e1e0e6; + background-color: rgba(242, 242, 247, 1); width: 100%; display: flex; flex-direction: column; overflow: auto; .top { - height: 100px; + height: 132px; background: #fff; border-radius: 5px; .first { display: flex; justify-content: space-between; + align-items: center; height: 45px; - padding: 0 20px; + padding: 20px 20px 0 20px; .time-option { display: flex; justify-content: space-between; @@ -313,40 +322,77 @@ .title { margin-right: 10px; min-width: fit-content; - font-size: 14px; + font-weight: bold; + font-size: 12px; } .opts { display: flex; justify-content: space-between; .opt { + box-sizing: border-box; + border: 2px solid #efeff6; min-width: fit-content; - width: 50px; - height: 32px; + width: 100px; + height: 36px; padding: 0 15px; border-radius: 4px; cursor: pointer; - margin-right: 10px; + margin-right: 2px; line-height: 32px; - font-size: 14px; + font-size: 12px; + color: #333; } .opt:hover { - background-color: rgba(61, 104, 225, 1); - color: #fff; + border-color: #4e94ff; } .opt-active { color: #fff; - background-color: rgba(61, 104, 225, 1); + 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 + .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: 10px 0; + margin: 20px 0; padding: 0 20px; .bar { display: flex; @@ -354,10 +400,28 @@ width: fit-content; margin-right: 20px; 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: 5px; + margin-right: 15px; min-width: fit-content; - font-size: 14px; + font-weight: bold; + font-size: 12px; } } } diff --git a/src/pages/syslog/views/pollingLog.vue b/src/pages/syslog/views/pollingLog.vue index 6abe780..bcbdbed 100644 --- a/src/pages/syslog/views/pollingLog.vue +++ b/src/pages/syslog/views/pollingLog.vue @@ -249,8 +249,9 @@ <style lang="scss"> .polling-log { margin: 0 auto; - padding: 10px 8px 10px 5px; - background-color: rgba(248, 248, 248, 1); + padding: 0px 8px 10px 5px; + border-top: 1px solid #e1e0e6; + background-color: rgba(242, 242, 247, 1); width: 100%; display: flex; overflow: auto; @@ -348,7 +349,7 @@ border-radius: 5px; padding: 12px; background-color: white; - + .tableBox { th { padding: 0 !important; diff --git a/src/pages/syslog/views/systemLog.vue b/src/pages/syslog/views/systemLog.vue index 3e7b84d..5fca5fc 100644 --- a/src/pages/syslog/views/systemLog.vue +++ b/src/pages/syslog/views/systemLog.vue @@ -85,7 +85,6 @@ <el-table-column :align="'center'" sortable - prop="add_time" label="绾у埆" ></el-table-column> @@ -118,7 +117,6 @@ min-width="100px" label="涓绘満鍚�" ></el-table-column> - </el-table> </div> @@ -138,7 +136,7 @@ <script> import { deleteDate } from "@/api/system"; import { pad0 } from "@/api/utils"; -import { } from "@/api/log"; +import {} from "@/api/log"; export default { data() { @@ -229,8 +227,8 @@ this.activeDateChoise = i; }, getOperationLog(typ) { - if (typ==1) { - this.page=1 + if (typ == 1) { + this.page = 1; } // queryOperationLog({ // timeStart: this.timeStart, @@ -266,8 +264,9 @@ <style lang="scss"> .sys-log { margin: 0 auto; - padding: 10px 8px 10px 5px; - background-color: rgba(248, 248, 248, 1); + padding: 0px 8px 10px 5px; + border-top: 1px solid #e1e0e6; + background-color: rgba(242, 242, 247, 1); width: 100%; display: flex; flex-direction: column; -- Gitblit v1.8.0