| | |
| | | <template> |
| | | <el-container> |
| | | <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"> |
| | | <el-tree :expand-on-click-node="false" ref="category" class="menu" node-key="label" :data="category" |
| | | :default-expanded-keys="['系统日志']" current-node-key="系统日志" :highlight-current="true"> |
| | | </el-tree> |
| | | </el-aside> |
| | | <el-container> |
| | |
| | | <el-container> |
| | | <el-header> |
| | | <div class="left-panel"> |
| | | <el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
| | | <el-date-picker v-model="date" type="datetimerange" range-separator="至" |
| | | start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
| | | </div> |
| | | <div class="right-panel"> |
| | | |
| | |
| | | <scTable ref="table" :apiObj="apiObj" stripe highlightCurrentRow @row-click="rowClick"> |
| | | <el-table-column label="级别" prop="level" width="60"> |
| | | <template #default="scope"> |
| | | <el-icon v-if="scope.row.level=='error'" style="color: #F56C6C;"><el-icon-circle-close-filled /></el-icon> |
| | | <el-icon v-if="scope.row.level=='warn'" style="color: #E6A23C;"><el-icon-warning-filled /></el-icon> |
| | | <el-icon v-if="scope.row.level=='info'" style="color: #409EFF;"><el-icon-info-filled /></el-icon> |
| | | <el-icon v-if="scope.row.level == 'error'" |
| | | style="color: #F56C6C;"><el-icon-circle-close-filled /></el-icon> |
| | | <el-icon v-if="scope.row.level == 'warn'" |
| | | style="color: #E6A23C;"><el-icon-warning-filled /></el-icon> |
| | | <el-icon v-if="scope.row.level == 'info'" |
| | | style="color: #409EFF;"><el-icon-info-filled /></el-icon> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="ID" prop="id" width="180"></el-table-column> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import info from './info' |
| | | import scEcharts from '@/components/scEcharts' |
| | | import info from './info' |
| | | import scEcharts from '@/components/scEcharts' |
| | | |
| | | export default { |
| | | name: 'log', |
| | | components: { |
| | | 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' |
| | | }] |
| | | export default { |
| | | name: 'log', |
| | | components: { |
| | | info, |
| | | scEcharts |
| | | }, |
| | | data() { |
| | | return { |
| | | infoDrawer: false, |
| | | logsChartOption: { |
| | | color: ['#409eff', '#e6a23c', '#f56c6c'], |
| | | grid: { |
| | | top: '0px', |
| | | left: '10px', |
| | | right: '10px', |
| | | bottom: '0px' |
| | | }, |
| | | category: [ |
| | | { |
| | | label: '系统日志', |
| | | children: [ |
| | | {label: 'debug'}, |
| | | {label: 'info'}, |
| | | {label: 'warn'}, |
| | | {label: 'error'}, |
| | | {label: 'fatal'} |
| | | ] |
| | | }, |
| | | { |
| | | label: '应用日志', |
| | | children: [ |
| | | {label: 'selfHelp'}, |
| | | {label: 'WechatApp'} |
| | | ] |
| | | } |
| | | ], |
| | | date: [], |
| | | apiObj: this.$API.system.log.list, |
| | | search: { |
| | | keyword: "" |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | upsearch(){ |
| | | |
| | | 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' |
| | | }] |
| | | }, |
| | | rowClick(row){ |
| | | this.infoDrawer = true |
| | | this.$nextTick(() => { |
| | | this.$refs.info.setData(row) |
| | | }) |
| | | category: [ |
| | | { |
| | | label: '系统日志', |
| | | children: [ |
| | | { label: 'debug' }, |
| | | { label: 'info' }, |
| | | { label: 'warn' }, |
| | | { label: 'error' }, |
| | | { label: 'fatal' } |
| | | ] |
| | | }, |
| | | { |
| | | label: '应用日志', |
| | | children: [ |
| | | { label: 'selfHelp' }, |
| | | { label: 'WechatApp' } |
| | | ] |
| | | } |
| | | ], |
| | | date: [], |
| | | apiObj: this.$API.system.log.list, |
| | | search: { |
| | | keyword: "" |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | upsearch() { |
| | | |
| | | }, |
| | | rowClick(row) { |
| | | this.infoDrawer = true |
| | | this.$nextTick(() => { |
| | | this.$refs.info.setData(row) |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | </style> |
| | | <style></style> |