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/logCenter/index/App.vue | 764 ++++++++++++++--------------------------------------------
1 files changed, 184 insertions(+), 580 deletions(-)
diff --git a/src/pages/logCenter/index/App.vue b/src/pages/logCenter/index/App.vue
index 97c2238..e9e8c79 100644
--- a/src/pages/logCenter/index/App.vue
+++ b/src/pages/logCenter/index/App.vue
@@ -1,607 +1,211 @@
<template>
- <div class="container">
- <div class="container-left">
- <div
- class="left-card"
- v-for="(item, index) in menuArr"
- :key="index"
- @click="openMenu(item, index)"
- >
- <span class="icon iconfont"></span>
- <span class="card-text">{{ item.name }}</span>
- </div>
+ <div class="s-log-management">
+ <div class="top">
+ <!-- <b>鏃ュ織绫诲瀷:</b>
+ <el-select v-model="logValue" placeholder="璇烽�夋嫨" size="small">
+ <el-option
+ v-for="item in logOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
+ </el-select> -->
+ <b>鎿嶄綔鏃堕棿:</b>
+ <el-date-picker
+ v-model="timeValue"
+ type="datetimerange"
+ size="mini"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡"
+ style="width: 244px;"
+ ></el-date-picker>
+ <b>妯″潡:</b>
+ <el-select v-model="logValue" placeholder="璇烽�夋嫨" size="mini">
+ <el-option
+ v-for="item in logOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ <b>鍔熻兘:</b>
+ <el-select v-model="logValue" placeholder="璇烽�夋嫨" size="mini">
+ <el-option
+ v-for="item in logOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ ></el-option>
+ </el-select>
+ <el-input
+ v-model="searchValue"
+ placeholder="璇疯緭鍏ュ唴瀹�"
+ clearable
+ style="width: 150px;margin: 0px 10px;"
+ size="mini"
+ ></el-input>
+ <el-button type="primary" size="mini">鎼滅储</el-button>
+ <el-button type="danger" size="mini" @click="delSelected">鎵归噺鍒犻櫎</el-button>
+ <el-button type="text" size="mini" style="font-size: 13px;font-weight: 600;">瀵煎嚭</el-button>
</div>
- <operationLog
- v-if="activePage == '鎿嶄綔鏃ュ織'"
- style="width: 100%"
- ></operationLog>
- <systemLog
- v-if="activePage == '绯荤粺鏃ュ織'"
- style="width: 100%"
- ></systemLog>
- <pollingLog v-if="activePage == '杞鏃ュ織'" style="width: 100%"></pollingLog>
- <eventPushLog
- v-if="activePage == '浜嬩欢鎺ㄩ�佹棩蹇�'"
- style="width: 100%"
- ></eventPushLog>
+ <div class="foot-table s-table">
+ <el-table
+ ref="multipleTable"
+ highlight-current-row
+ :data="tableData"
+ style="width: 100%"
+ :header-cell-style="{background:'#f8f8f8',color:'#222222'}"
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column type="selection" width="55"></el-table-column>
+ <el-table-column :align="'center'" sortable prop="index" label="搴忓彿"></el-table-column>
+ <el-table-column :align="'center'" sortable prop="logtype" label="鏃ュ織绫诲瀷"></el-table-column>
+ <el-table-column :align="'center'" sortable prop="username" label="鐢ㄦ埛鍚�"></el-table-column>
+ <el-table-column :align="'center'" sortable prop="ipaddress" label="IP鍦板潃"></el-table-column>
+ <el-table-column :align="'center'" sortable prop="operation" label="鎿嶄綔鍔熻兘"></el-table-column>
+ <el-table-column :align="'center'" sortable prop="operatetime" label="鎿嶄綔鏃堕棿"></el-table-column>
+ <el-table-column :align="'center'" sortable prop="operateinfo" label="鎿嶄綔淇℃伅"></el-table-column>
+ <el-table-column label="鎿嶄綔" :align="'center'">
+ <template slot-scope="scope">
+ <el-button
+ type="text"
+ style="color: red;font-size:16px"
+ @click="handleDelete(scope.$index, scope.row)"
+ icon="el-icon-delete"
+ ></el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
</div>
</template>
<script>
-import operationLog from "../views/operationLog";
-import systemLog from "../views/systemLog";
-import pollingLog from "../views/pollingLog";
-import eventPushLog from "../views/eventPushLog";
export default {
- name: "settings",
- components: {
- operationLog,
- systemLog,
- pollingLog,
- eventPushLog,
- },
data() {
return {
- menuArr: [
- { name: "鎿嶄綔鏃ュ織" },
- { name: "绯荤粺鏃ュ織" },
- { name: "杞鏃ュ織" },
- { name: "浜嬩欢鎺ㄩ�佹棩蹇�" },
+ tableData: [
+ {
+ index: "1",
+ logtype: "寮傚父",
+ username: "admin",
+ ipaddress: "192.168.10.110",
+ operation: "娣诲姞鎽勫儚鏈�",
+ operatetime: "2019-5-31 16:38:21",
+ operateinfo: "娣诲姞鎿嶄綔"
+ },
+ {
+ index: "2",
+ logtype: "淇℃伅",
+ username: "admin",
+ ipaddress: "192.168.10.108",
+ operation: "鍒犻櫎鎽勫儚鏈�",
+ operatetime: "2019-5-31 16:38:21",
+ operateinfo: "娣诲姞鎿嶄綔"
+ },
+ {
+ index: "3",
+ logtype: "鎿嶄綔",
+ username: "admin",
+ ipaddress: "192.168.10.110",
+ operation: "娣诲姞鎽勫儚鏈�",
+ operatetime: "2019-5-31 16:38:21",
+ operateinfo: "娣诲姞鎿嶄綔"
+ },
+ {
+ index: "4",
+ logtype: "寮傚父",
+ username: "admin",
+ ipaddress: "192.168.10.110",
+ operation: "娣诲姞鎽勫儚鏈�",
+ operatetime: "2019-5-31 16:38:21",
+ operateinfo: "娣诲姞鎿嶄綔"
+ },
+ {
+ index: "5",
+ logtype: "寮傚父",
+ username: "admin",
+ ipaddress: "192.168.10.110",
+ operation: "鍒犻櫎鎽勫儚鏈�",
+ operatetime: "2019-5-31 16:38:21",
+ operateinfo: "娣诲姞鎿嶄綔"
+ },
+ {
+ index: "6",
+ logtype: "寮傚父",
+ username: "admin",
+ ipaddress: "192.168.10.110",
+ operation: "娣诲姞鎽勫儚鏈�",
+ operatetime: "2019-5-31 16:38:21",
+ operateinfo: "娣诲姞鎿嶄綔"
+ }
],
- activePage: "鎿嶄綔鏃ュ織",
- activeIndex: 0,
+ multipleSelection: [],
+ logOptions: [
+ {
+ value: "鍏ㄩ儴绫诲瀷",
+ label: "鍏ㄩ儴绫诲瀷"
+ },
+ {
+ value: "鍏朵粬绫诲瀷",
+ label: "鍏朵粬绫诲瀷"
+ }
+ ],
+ logValue: "鍏ㄩ儴绫诲瀷",
+ timeValue: [
+ new Date(2000, 10, 10, 10, 10),
+ new Date(2000, 10, 11, 10, 10)
+ ],
+ searchValue: ""
};
},
- mounted() {
- const s = document.getElementsByClassName("left-card")[0];
- s.style.backgroundColor = "rgba(61, 104, 225, 1)";
- s.style.color = "#fff";
- },
methods: {
- openMenu(item, i) {
- const old = document.getElementsByClassName("left-card")[
- this.activeIndex
- ];
- old.style.backgroundColor = "initial";
- old.style.color = "rgba(81, 81, 81, 1)";
-
- this.activePage = item.name;
- this.activeIndex = i;
- const s = document.getElementsByClassName("left-card")[i];
- s.style.backgroundColor = "rgba(61, 104, 225, 1)";
- s.style.color = "#fff";
+ handleDelete(index, row) {
+ console.log(index, row);
},
- },
+ handleSelectionChange(val) {
+ this.multipleSelection = val;
+ },
+ delSelected() {
+ console.log(this.multipleSelection);
+ }
+ }
};
</script>
<style lang="scss">
-.container {
+.s-log-management {
height: 100%;
- display: flex;
- flex-direction: row;
- flex: 1;
- flex-basis: auto;
+ width: 100%;
+ padding: 20px;
box-sizing: border-box;
- .container-left {
- height: 100%;
- width: 210px;
- overflow: auto;
- box-sizing: border-box;
- flex-shrink: 0;
- padding: 10px;
- border-right: 5px solid rgba(248, 248, 248, 1);
- box-sizing: border-box;
- .left-card {
- height: 55px;
- cursor: pointer;
- border-radius: 12px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- .iconfont {
- margin-left: 25px;
- margin-right: 10px;
- font-size: 24px;
- }
- .card-text {
- font-size: 16px;
- }
- }
- .left-card:hover {
- background-color: rgba(61, 104, 225, 1);
- color: #fff;
+ .top {
+ width: 100%;
+
+ margin-bottom: 20px;
+ overflow-y: auto;
+ min-width: 1156px;
+ height: 40px;
+ text-align: left;
+ b {
+ padding: 0px 10px;
}
}
- .container-center {
- height: 100%;
- width: 280px;
- overflow: auto;
- flex-shrink: 0;
- padding: 10px;
- border-right: 5px solid rgba(248, 248, 248, 1);
+ .export {
+ display: inline-block;
+ padding-right: 10px;
box-sizing: border-box;
- .account-left {
- .add-account {
- color: rgba(61, 104, 225, 1);
- margin-top: 50px;
-
- .iconfont {
- cursor: pointer;
- font-size: 32px;
- }
- }
- .account-card {
- height: 50px;
- background-color: rgba(248, 248, 248, 1);
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- padding: 0 20px;
- box-sizing: border-box;
- border-radius: 10px;
- cursor: pointer;
- .touxiang {
- height: 35px;
- width: 35px;
- background-color: bisque;
- border-radius: 17.5px;
- }
- .user-name {
- margin-left: 10px;
- font-size: 14px;
- }
- }
- }
- .datetime-left {
- .time-card {
- height: 105px;
- background-color: rgba(248, 248, 248, 1);
- margin-bottom: 30px;
- border-radius: 10px;
- .head {
- height: 30px;
- line-height: 30px;
- text-align: left;
- box-sizing: border-box;
- padding: 0 10px;
- font-size: 14px;
- .icon {
- margin-right: 5px;
- color: rgba(61, 104, 225, 1);
- }
- }
- .time-main {
- height: 42px;
- line-height: 42px;
- font-family: Consolas;
- font-size: 36px;
- }
- .date-bot {
- height: 25px;
- font-size: 14px;
- line-height: 25px;
- color: #868686;
- display: flex;
- justify-content: space-evenly;
- }
- }
- .line {
- display: flex;
- align-items: center;
- height: 50px;
- padding: 0 25px;
- background-color: rgba(248, 248, 248, 1);
- justify-content: space-between;
- border-radius: 12px;
- margin-bottom: 10px;
- .name {
- font-size: 14px;
- }
- }
+ margin-top: 20px;
+ b:hover {
+ color: #2249b4;
}
}
- .container-right {
- flex: 1;
- flex-basis: auto;
- overflow: auto;
- box-sizing: border-box;
- position: relative;
-
- padding: 20px 40px;
- .account-right {
- .account-content {
- .content-top {
- height: 120px;
- width: 350px;
- margin: 0 auto;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: 20px;
- .touxiang-big {
- width: 100px;
- height: 100px;
- background-color: bisque;
- border-radius: 50px;
- }
- .user-desc {
- height: 100px;
- display: flex;
- flex-direction: column;
- align-items: baseline;
- min-width: 200px;
- .username {
- margin: 5px 15px;
- height: 30px;
- line-height: 30px;
- width: 90px;
- text-align: left;
- font-size: 15px;
- display: flex;
- align-items: center;
- }
- .nickname {
- margin: 5px 15px;
- font-size: 14px;
- .input-nick {
- width: 50px;
- margin-right: 5px;
- }
- .iconfont {
- font-size: 14px;
- margin-left: 5px;
- }
- }
- }
- }
- .list-btn {
- display: flex;
-
- flex-direction: column;
- align-items: center;
- .item-btn {
- width: 500px;
- height: 45px;
- background-color: #f0f0f0;
- margin-bottom: 15px;
- border-radius: 10px;
- line-height: 45px;
- font-size: 15px;
- cursor: pointer;
- }
- .item-btn:hover {
- color: rgba(255, 153, 102, 1);
- }
- }
- }
- .title {
- height: 30px;
- line-height: 30px;
- /* background-color: aliceblue; */
- margin-bottom: 10px;
- font-size: 16px;
- font-weight: 600;
- }
- .change-pw {
- .p-title {
- text-align: left;
- font-size: 15px;
- margin-top: 5px;
- }
- }
- .el-form-item {
- margin-bottom: 0;
- .el-input__inner {
- background-color: rgba(240, 240, 240, 1);
- border: none;
- border-radius: 12px;
- height: 45px;
- padding: 0 20px;
- font-size: 15px;
- }
- .el-input__clear {
- color: dimgray;
- font-size: 17px;
- line-height: 45px;
- }
- .el-input__suffix {
- right: 1px;
- top: -0.5px;
- width: 45px;
- // background-color: rgba(61, 104, 225, 1);
- /* color: white; */
- border-radius: 12px;
- }
- }
- .permission {
- .line {
- display: flex;
- align-items: center;
- height: 50px;
- padding: 0 25px;
- background-color: rgba(248, 248, 248, 1);
- justify-content: space-between;
- border-radius: 12px;
- margin-bottom: 10px;
- .name {
- font-size: 14px;
- }
- }
- }
-
- .add-account-page {
- // background-color: lightcyan;
- // padding: 10px 50px;
- .upload-group {
- height: 120px;
- width: 350px;
- margin: 0 auto;
- overflow: hidden;
- .upload-jpg {
- height: 50px;
- width: 50px;
- float: left;
- margin: 0 10px;
- background-color: antiquewhite;
- margin-bottom: 20px;
- border-radius: 25px;
- }
- }
- .fill-group {
- .p-title {
- text-align: left;
- }
- }
- }
- }
- .datetime-right {
- .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-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;
- }
- .ntp-time {
- .right {
- display: flex;
- align-items: baseline;
- .el-input-number--small {
- width: 100%;
- }
- .el-button--text {
- margin-left: 10px;
- text-decoration: underline;
- }
- }
- .ntp-bar {
- height: 40px;
- background-color: rgba(248, 248, 248, 1);
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 0 10px;
- border-radius: 10px;
- margin-bottom: 10px;
- .title {
- min-width: 70px;
- }
- .input-area {
- width: 450px;
- height: 30px;
- background-color: rgba(240, 240, 240, 1);
- border-radius: 10px;
- line-height: 30px;
- font-size: 14px;
- }
- }
- .int-bar {
- height: 40px;
- background-color: rgba(248, 248, 248, 1);
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 0 10px;
- border-radius: 10px;
- margin-bottom: 10px;
- .title {
- min-width: 130px;
- }
- .right {
- width: 450px;
- display: flex;
- align-items: center;
- height: 30px;
-
- .input-area {
- // width: 410px;
- background-color: rgba(240, 240, 240, 1);
- border-radius: 10px;
- line-height: 30px;
- width: -webkit-fill-available;
-
- font-size: 14px;
- }
- .test {
- width: 40px;
- }
- }
- }
- }
- .manual-time {
- .clock-wrap {
- height: 75px;
-
- background-color: #f8f8f8;
- display: flex;
- justify-content: center;
- align-items: center;
- margin-bottom: 10px;
- border-radius: 10px;
- .clock {
- display: flex;
- align-items: center;
- height: 90px;
- justify-content: space-evenly;
- .iconfont {
- cursor: pointer;
- color: rgba(134, 134, 134, 1);
- }
- .iconfont:hover {
- background-color: gainsboro;
- }
- .hour {
- background-color: rgba(240, 240, 240, 1);
- display: flex;
- align-items: center;
- width: 100px;
- height: 50px;
- justify-content: space-evenly;
- border-radius: 10px;
- }
- .dnum {
- width: 40px;
- height: 40px;
- line-height: 40px;
- font-size: 34px;
- font-family: Consolas;
- display: flex;
- align-items: center;
- .input-box {
- width: inherit;
- border: none;
- border-radius: 5px;
- height: 35px;
- font-size: 28px;
- text-align: center;
- }
-
- .input-box:focus {
- outline: none;
- }
- }
- .control {
- width: 20px;
- .fanzhuan {
- display: inline-block;
- -moz-transform: scaleY(-1);
- -webkit-transform: scaleY(-1);
- -o-transform: scaleY(-1);
- transform: scaleY(-1);
- }
- }
- .sep {
- font-family: Consolas;
- width: 40px;
- font-size: 34px;
- height: 40px;
- line-height: 40px;
- }
- .mins {
- background-color: #f0f0f0;
- display: flex;
- align-items: center;
- width: 110px;
- height: 50px;
- justify-content: space-evenly;
- border-radius: 10px;
- }
- }
- }
- .adjust-bar {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 10px;
- border-radius: 10px;
- height: 50px;
- background-color: rgba(248, 248, 248, 1);
- .middle {
- font-size: 14px;
- }
- .input-box {
- width: 80px;
- border: none;
- border-radius: 5px;
- height: 25px;
- font-size: 18px;
- text-align: center;
- }
-
- .input-box:focus {
- outline: none;
- }
- .minus {
- width: 50px;
- height: 50px;
- background-color: #f0f0f0;
- font-size: 35px;
- border-radius: 10px;
- cursor: pointer;
- line-height: 50px;
- color: rgba(134, 134, 134, 1);
- }
- .plus {
- width: 50px;
- height: 50px;
- cursor: pointer;
- background-color: #f0f0f0;
- font-size: 35px;
- border-radius: 10px;
- line-height: 50px;
- color: rgba(134, 134, 134, 1);
- }
- }
- }
- }
- .btns {
- display: flex;
- justify-content: space-between;
- margin-top: 20px;
-
- .cancel {
- height: 40px;
- width: 48%;
- cursor: pointer;
- border-radius: 8px;
- background-color: rgba(240, 240, 240, 1);
- line-height: 40px;
- font-size: 14px;
- }
- .ok {
- height: 40px;
- width: 48%;
- cursor: pointer;
- border-radius: 8px;
- background-color: rgba(61, 104, 225, 1);
- color: #fff;
- line-height: 40px;
- font-size: 14px;
- }
- }
+ .clear-searching {
+ cursor: pointer;
+ text-decoration: underline;
+ width: 40px;
+ font-size: 13px;
+ color: #3d68e1;
}
}
</style>
-
-
--
Gitblit v1.8.0