From bbd45bbc15e45b78ca0d98a13eee393022f12b88 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Fri, 25 Jun 2021 12:29:59 +0800
Subject: [PATCH] =?UTF-8?q?UP=20=E9=87=8D=E6=9E=84=E6=97=A5=E5=BF=97?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/setting/log/index.vue | 85 +++++++++++++++++++++++----------
 src/views/setting/log/info.vue  | 52 ++++++++++++--------
 2 files changed, 90 insertions(+), 47 deletions(-)

diff --git a/src/views/setting/log/index.vue b/src/views/setting/log/index.vue
index 5462c620..330061ab 100644
--- a/src/views/setting/log/index.vue
+++ b/src/views/setting/log/index.vue
@@ -1,32 +1,45 @@
 <template>
 	<el-container>
-		<el-container>
-			<el-header>
-				<div class="left-panel">
-				</div>
-				<div class="right-panel">
-					<div class="right-panel-search">
-						<el-input v-model="search.keyword" placeholder="关键词" clearable></el-input>
-						<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
-					</div>
-				</div>
-			</el-header>
-			<el-main class="nopadding">
-				<scTable ref="table" :apiObj="apiObj" stripe highlightCurrentRow @currentChange="currentChange">
-					<el-table-column label="#" type="index" width="50"></el-table-column>
-					<el-table-column label="ID" prop="id" width="180"></el-table-column>
-					<el-table-column label="日志名" prop="name" width="150"></el-table-column>
-					<el-table-column label="请求接口" prop="url" width="150"></el-table-column>
-					<el-table-column label="请求方法" prop="type" width="150"></el-table-column>
-					<el-table-column label="用户" prop="user" width="150"></el-table-column>
-					<el-table-column label="客户端IP" prop="cip" width="150"></el-table-column>
-					<el-table-column label="日志时间" prop="time" width="150"></el-table-column>
-				</scTable>
-			</el-main>
-		</el-container>
-		<el-aside width="340px" style="border-left: 1px solid #e6e6e6;border-right: 0;padding:20px;">
-			<info ref="info"></info>
+		<el-aside width="220px">
+			<el-tree ref="category" class="menu" node-key="label" :data="category" :default-expanded-keys="['系统日志']" current-node-key="系统日志" :highlight-current="true" :expand-on-click-node="false" @node-click="dicClick">
+			</el-tree>
 		</el-aside>
+		<el-container>
+			<el-main class="nopadding">
+				<el-container>
+					<el-header>
+						<div class="left-panel">
+							<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size="mini"></el-date-picker>
+						</div>
+						<div class="right-panel">
+
+						</div>
+					</el-header>
+					<el-main class="nopadding">
+						<scTable ref="table" :apiObj="apiObj" stripe highlightCurrentRow @currentChange="currentChange">
+							<el-table-column label="级别" prop="level" width="50">
+								<template #default="scope">
+									<i v-if="scope.row.level=='error'" class="el-icon-error" style="color: #F56C6C;font-size: 14px;"></i>
+									<i v-if="scope.row.level=='warn'" class="el-icon-warning" style="color: #E6A23C;font-size: 14px;"></i>
+									<i v-if="scope.row.level=='info'" class="el-icon-info" style="color: #409EFF;font-size: 14px;"></i>
+								</template>
+							</el-table-column>
+							<el-table-column label="ID" prop="id" width="180"></el-table-column>
+							<el-table-column label="日志名" prop="name" width="150"></el-table-column>
+							<el-table-column label="请求接口" prop="url" width="150"></el-table-column>
+							<el-table-column label="请求方法" prop="type" width="150"></el-table-column>
+							<el-table-column label="用户" prop="user" width="150"></el-table-column>
+							<el-table-column label="客户端IP" prop="cip" width="150"></el-table-column>
+							<el-table-column label="日志时间" prop="time" width="150"></el-table-column>
+						</scTable>
+					</el-main>
+				</el-container>
+			</el-main>
+			<div style="height:10px;border-top: 1px solid #e6e6e6;"></div>
+			<el-footer style="height:50%;overflow: auto;">
+				<info ref="info"></info>
+			</el-footer>
+		</el-container>
 	</el-container>
 </template>
 
@@ -40,6 +53,26 @@
 		},
 		data() {
 			return {
+				category: [
+					{
+						label: '系统日志',
+						children: [
+							{label: 'debug'},
+							{label: 'info'},
+							{label: 'warn'},
+							{label: 'error'},
+							{label: 'fatal'}
+						]
+					},
+					{
+						label: '应用日志',
+						children: [
+							{label: 'selfHelp'},
+							{label: 'WechatApp'}
+						]
+					}
+				],
+				date: [],
 				apiObj: this.$API.log.list,
 				search: {
 					keyword: ""
diff --git a/src/views/setting/log/info.vue b/src/views/setting/log/info.vue
index 255880f2..6776b15d 100644
--- a/src/views/setting/log/info.vue
+++ b/src/views/setting/log/info.vue
@@ -1,26 +1,30 @@
 <template>
 
 	<template v-if="data&&data.id">
-		<el-descriptions title="基础信息" :column="1" size="small">
-			<el-descriptions-item label="请求接口">{{data.url}}</el-descriptions-item>
-			<el-descriptions-item label="请求方法">{{data.type}}</el-descriptions-item>
-			<el-descriptions-item label="状态代码">{{data.code}}</el-descriptions-item>
-			<el-descriptions-item label="日志名">{{data.name}}</el-descriptions-item>
-			<el-descriptions-item label="日志时间">{{data.time}}</el-descriptions-item>
-		</el-descriptions>
-		<el-collapse>
-			<el-collapse-item title="Request" name="1">
-				<div>
-					Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198
-					Safari/537.36
+		<el-tabs>
+			<el-tab-pane label="常规">
+				<el-alert title="在没有配置的 DNS 服务器响应之后，名称 update-khd.2345.cc 的名称解析超时。" :type="typeMap[data.level]" :closable="false" style="margin-bottom:15px;"></el-alert>
+				<el-descriptions :column="2" border size="small">
+					<el-descriptions-item label="请求接口">{{data.url}}</el-descriptions-item>
+					<el-descriptions-item label="请求方法">{{data.type}}</el-descriptions-item>
+					<el-descriptions-item label="状态代码">{{data.code}}</el-descriptions-item>
+					<el-descriptions-item label="日志名">{{data.name}}</el-descriptions-item>
+					<el-descriptions-item label="日志时间">{{data.time}}</el-descriptions-item>
+				</el-descriptions>
+			</el-tab-pane>
+			<el-tab-pane label="详细">
+				<div class="code">
+					Request: {
+						User-Agent: "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
+					},
+					Response: {
+						Content-Type: "application/json; charset=utf-8",
+						Date: "Fri, 25 Jun 2021 03:02:14 GMT",
+						Server: "nginx/1.17.8"
+					}
 				</div>
-			</el-collapse-item>
-			<el-collapse-item title="Response" name="2">
-				<div>
-					id=100
-				</div>
-			</el-collapse-item>
-		</el-collapse>
+			</el-tab-pane>
+		</el-tabs>
 	</template>
 
 	<template v-else>
@@ -33,7 +37,12 @@
 	export default {
 		data() {
 			return {
-				data: {}
+				data: {},
+				typeMap: {
+					'info': "info",
+					'warn': "warning",
+					'error': "error"
+				}
 			}
 		},
 		methods: {
@@ -44,5 +53,6 @@
 	}
 </script>
 
-<style>
+<style scoped>
+	.code {background: #848484;padding:15px;color: #fff;font-size: 12px;border-radius: 4px;}
 </style>