From b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 21 七月 2021 16:40:17 +0800
Subject: [PATCH] all
---
src/pages/syslog/index/App.vue | 259 ++++++++++++++-------------------------------------
1 files changed, 73 insertions(+), 186 deletions(-)
diff --git a/src/pages/syslog/index/App.vue b/src/pages/syslog/index/App.vue
index e9e8c79..376527a 100644
--- a/src/pages/syslog/index/App.vue
+++ b/src/pages/syslog/index/App.vue
@@ -1,211 +1,98 @@
<template>
- <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>
- <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"
+ <div class="container">
+ <div class="container-left">
+ <div
+ class="left-card"
+ v-for="(item, i) in menuArr"
+ :key="i"
+ :class="activePage == i ? 'left-card-active' : ''"
+ @click="openMenu(item, i)"
>
- <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>
+ <span class="icon iconfont"></span>
+ <span class="card-text">{{ item.name }}</span>
+ </div>
</div>
+ <operationLog v-if="activePage == 0" style="width: 100%"></operationLog>
+ <systemLog v-if="activePage == 1" style="width: 100%"></systemLog>
+ <pollingLog v-if="activePage == 2" style="width: 100%"></pollingLog>
+ <eventPushLog v-if="activePage == 3" style="width: 100%"></eventPushLog>
</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 {
- 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: "娣诲姞鎿嶄綔"
- }
+ menuArr: [
+ { name: "鎿嶄綔鏃ュ織" },
+ { name: "绯荤粺鏃ュ織" },
+ { name: "杞鏃ュ織" },
+ { name: "浜嬩欢鎺ㄩ�佹棩蹇�" },
],
- multipleSelection: [],
- logOptions: [
- {
- value: "鍏ㄩ儴绫诲瀷",
- label: "鍏ㄩ儴绫诲瀷"
- },
- {
- value: "鍏朵粬绫诲瀷",
- label: "鍏朵粬绫诲瀷"
- }
- ],
- logValue: "鍏ㄩ儴绫诲瀷",
- timeValue: [
- new Date(2000, 10, 10, 10, 10),
- new Date(2000, 10, 11, 10, 10)
- ],
- searchValue: ""
+ activePage: 0,
};
},
methods: {
- handleDelete(index, row) {
- console.log(index, row);
+ openMenu(item, i) {
+ this.activePage = i;
},
- handleSelectionChange(val) {
- this.multipleSelection = val;
- },
- delSelected() {
- console.log(this.multipleSelection);
- }
- }
+ },
};
</script>
<style lang="scss">
-.s-log-management {
+.container {
height: 100%;
- width: 100%;
- padding: 20px;
+ display: flex;
+ flex-direction: row;
+ flex: 1;
+ flex-basis: auto;
box-sizing: border-box;
- .top {
- width: 100%;
-
- margin-bottom: 20px;
- overflow-y: auto;
- min-width: 1156px;
- height: 40px;
- text-align: left;
- b {
- padding: 0px 10px;
- }
- }
- .export {
- display: inline-block;
- padding-right: 10px;
+ .container-left {
+ height: 100%;
+ width: 210px;
+ overflow: auto;
box-sizing: border-box;
- margin-top: 20px;
- b:hover {
- color: #2249b4;
+ 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: 15px;
+ margin-right: 10px;
+ font-size: 20px;
+ }
+ .card-text {
+ font-size: 16px;
+ }
}
- }
- .clear-searching {
- cursor: pointer;
- text-decoration: underline;
- width: 40px;
- font-size: 13px;
- color: #3d68e1;
+ .left-card-active{
+ background-color: rgba(61, 104, 225, 1);
+ color: #fff;
+ }
+ .left-card:hover {
+ background-color: rgba(61, 104, 225, 1);
+ color: #fff;
+ }
}
}
</style>
+
+
--
Gitblit v1.8.0