From c56dd68548367e1ed6c0dd7c26f3661a0758afe2 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Thu, 29 Jul 2021 15:34:15 +0800
Subject: [PATCH] UPD
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- FIX scTable rowClick
- 重构 logs Page
---
 src/components/scTable/index.vue |  5 ++-
 src/views/setting/log/index.vue  | 64 ++++++++++++++++++++++++++++----
 src/views/setting/log/info.vue   | 38 +++++++++----------
 3 files changed, 77 insertions(+), 30 deletions(-)

diff --git a/src/components/scTable/index.vue b/src/components/scTable/index.vue
index 6b72b069..4d1d5435 100644
--- a/src/components/scTable/index.vue
+++ b/src/components/scTable/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="scTable" ref="scTableMain" v-loading="loading">
 		<div class="scTable-table">
-			<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" :stripe="stripe" :highlight-current-row="highlightCurrentRow"  @selection-change="selectionChange" @current-change="currentChange" @sort-change="sortChange" @filter-change="filterChange">
+			<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" :stripe="stripe" :highlight-current-row="highlightCurrentRow"  @selection-change="selectionChange" @current-change="currentChange" @row-click="rowClick" @sort-change="sortChange" @filter-change="filterChange">
 				<slot></slot>
 				<template v-for="(item, index) in userColumn" :key="index">
 					<el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler">
@@ -201,6 +201,9 @@
 			},
 			currentChange(selection){
 				this.$emit('current-change', selection)
+			},
+			rowClick(row, column, event){
+				this.$emit('row-click', row, column, event)
 			}
 		}
 	}
diff --git a/src/views/setting/log/index.vue b/src/views/setting/log/index.vue
index 26734b28..eadc3fb7 100644
--- a/src/views/setting/log/index.vue
+++ b/src/views/setting/log/index.vue
@@ -15,8 +15,11 @@
 
 						</div>
 					</el-header>
+					<el-header style="height:150px;">
+						<scEcharts height="100%" :option="logsChartOption"></scEcharts>
+					</el-header>
 					<el-main class="nopadding">
-						<scTable ref="table" :apiObj="apiObj" stripe highlightCurrentRow @currentChange="currentChange">
+						<scTable ref="table" :apiObj="apiObj" stripe highlightCurrentRow @row-click="rowClick">
 							<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>
@@ -35,24 +38,66 @@
 					</el-main>
 				</el-container>
 			</el-main>
-			<div style="height:10px;border-top: 1px solid #e6e6e6;"></div>
-			<el-footer style="height:40%;overflow: auto;">
-				<info ref="info"></info>
-			</el-footer>
 		</el-container>
 	</el-container>
+
+	<el-drawer v-model="infoDrawer" title="日志详情" :size="600" destroy-on-close>
+		<info ref="info"></info>
+	</el-drawer>
 </template>
 
 <script>
 	import info from './info'
+	import scEcharts from '@/components/scEcharts'
 
 	export default {
 		name: 'log',
 		components: {
-			info
+			info,
+			scEcharts
 		},
 		data() {
 			return {
+				infoDrawer: false,
+				logsChartOption: {
+					color: ['#409eff','#e6a23c','#f56c6c'],
+					grid: {
+						top: '0px',
+						left: '10px',
+						right: '10px',
+						bottom: '0px'
+					},
+					tooltip: {
+						trigger: 'axis'
+					},
+					xAxis: {
+						type: 'category',
+						boundaryGap: false,
+						data: ['2021-07-01', '2021-07-02', '2021-07-03', '2021-07-04', '2021-07-05', '2021-07-06', '2021-07-07', '2021-07-08', '2021-07-09', '2021-07-10', '2021-07-11', '2021-07-12', '2021-07-13', '2021-07-14', '2021-07-15']
+					},
+					yAxis: {
+						show: false,
+						type: 'value'
+					},
+					series: [{
+						data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 70, 110],
+						type: 'bar',
+						stack: 'log',
+						barWidth: '15px'
+					},
+					{
+						data: [15, 26, 7, 12, 13, 9, 21, 15, 26, 7, 12, 13, 9, 21, 12, 3],
+						type: 'bar',
+						stack: 'log',
+						barWidth: '15px'
+					},
+					{
+						data: [0, 0, 0, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+						type: 'bar',
+						stack: 'log',
+						barWidth: '15px'
+					}]
+				},
 				category: [
 					{
 						label: '系统日志',
@@ -83,8 +128,11 @@
 			upsearch(){
 
 			},
-			currentChange(row){
-				this.$refs.info.setData(row)
+			rowClick(row){
+				this.infoDrawer = true
+				this.$nextTick(() => {
+					this.$refs.info.setData(row)
+				})
 			}
 		}
 	}
diff --git a/src/views/setting/log/info.vue b/src/views/setting/log/info.vue
index 6776b15d..bdb3fca2 100644
--- a/src/views/setting/log/info.vue
+++ b/src/views/setting/log/info.vue
@@ -1,18 +1,18 @@
 <template>
 
-	<template v-if="data&&data.id">
-		<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="详细">
+	<el-main style="padding:0 20px;">
+		<el-descriptions :column="1" 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-collapse v-model="activeNames" style="margin-top: 20px;">
+			<el-collapse-item title="常规" name="1">
+				<el-alert title="在没有配置的 DNS 服务器响应之后，名称 update-khd.2345.cc 的名称解析超时。" :type="typeMap[data.level]" :closable="false"></el-alert>
+			</el-collapse-item>
+			<el-collapse-item title="详细" name="2">
 				<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"
@@ -23,14 +23,9 @@
 						Server: "nginx/1.17.8"
 					}
 				</div>
-			</el-tab-pane>
-		</el-tabs>
-	</template>
-
-	<template v-else>
-		<el-empty description="没有预览" :image-size="120"></el-empty>
-	</template>
-
+			</el-collapse-item>
+		</el-collapse>
+	</el-main>
 </template>
 
 <script>
@@ -38,6 +33,7 @@
 		data() {
 			return {
 				data: {},
+				activeNames: ['1'],
 				typeMap: {
 					'info': "info",
 					'warn': "warning",