源文件
This commit is contained in:
135
src/views/monitor/log/errorLog.vue
Normal file
135
src/views/monitor/log/errorLog.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<Search />
|
||||
<crudOperation>
|
||||
<el-button
|
||||
slot="left"
|
||||
class="filter-item"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:loading="crud.delAllLoading"
|
||||
@click="confirmDelAll()"
|
||||
>
|
||||
清空
|
||||
</el-button>
|
||||
</crudOperation>
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-form label-position="left" inline class="demo-table-expand">
|
||||
<el-form-item label="请求方法">
|
||||
<span>{{ props.row.method }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求参数">
|
||||
<span>{{ props.row.params }}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="username" label="用户名" />
|
||||
<el-table-column prop="requestIp" label="IP" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
|
||||
<el-table-column prop="description" label="描述" />
|
||||
<el-table-column prop="browser" label="浏览器" />
|
||||
<el-table-column prop="createTime" label="创建日期" />
|
||||
<el-table-column label="异常详情" width="100px">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" @click="info(scope.row.id)">查看详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog :visible.sync="dialog" title="异常详情" append-to-body top="30px" width="85%">
|
||||
<pre>{{ errorInfo }}</pre>
|
||||
</el-dialog>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getErrDetail, delAllError } from '@/api/monitor/log'
|
||||
import Search from './search'
|
||||
import CRUD, { presenter } from '@crud/crud'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
|
||||
export default {
|
||||
name: 'ErrorLog',
|
||||
components: { Search, crudOperation, pagination },
|
||||
cruds() {
|
||||
return CRUD({ title: '异常日志', url: 'api/logs/error' })
|
||||
},
|
||||
mixins: [presenter()],
|
||||
data() {
|
||||
return {
|
||||
errorInfo: '', dialog: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.crud.optShow = {
|
||||
add: false,
|
||||
edit: false,
|
||||
del: false,
|
||||
download: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取异常详情
|
||||
info(id) {
|
||||
this.dialog = true
|
||||
getErrDetail(id).then(res => {
|
||||
this.errorInfo = res.exception
|
||||
})
|
||||
},
|
||||
confirmDelAll() {
|
||||
this.$confirm(`确认清空所有异常日志吗?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.crud.delAllLoading = true
|
||||
delAllError().then(res => {
|
||||
this.crud.delAllLoading = false
|
||||
this.crud.dleChangePage(1)
|
||||
this.crud.delSuccessNotify()
|
||||
this.crud.toQuery()
|
||||
}).catch(err => {
|
||||
this.crud.delAllLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-table-expand {
|
||||
font-size: 0;
|
||||
}
|
||||
.demo-table-expand label {
|
||||
width: 70px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
.demo-table-expand .el-form-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.demo-table-expand .el-form-item__content {
|
||||
font-size: 12px;
|
||||
}
|
||||
/deep/ .el-dialog__body {
|
||||
padding: 0 20px 10px 20px !important;
|
||||
}
|
||||
.java.hljs {
|
||||
color: #444;
|
||||
background: #ffffff !important;
|
||||
height: 630px !important;
|
||||
}
|
||||
</style>
|
||||
114
src/views/monitor/log/index.vue
Normal file
114
src/views/monitor/log/index.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<Search />
|
||||
<crudOperation>
|
||||
<el-button
|
||||
slot="left"
|
||||
class="filter-item"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:loading="crud.delAllLoading"
|
||||
@click="confirmDelAll()"
|
||||
>
|
||||
清空
|
||||
</el-button>
|
||||
</crudOperation>
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-form label-position="left" inline class="demo-table-expand">
|
||||
<el-form-item label="请求方法">
|
||||
<span>{{ props.row.method }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求参数">
|
||||
<span>{{ props.row.params }}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="username" label="用户名" />
|
||||
<el-table-column prop="requestIp" label="IP" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
|
||||
<el-table-column prop="description" label="描述" />
|
||||
<el-table-column prop="browser" label="浏览器" />
|
||||
<el-table-column prop="time" label="请求耗时" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
|
||||
<el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
|
||||
<el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建日期" width="180px" />
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Search from './search'
|
||||
import { delAllInfo } from '@/api/monitor/log'
|
||||
import CRUD, { presenter } from '@crud/crud'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
|
||||
export default {
|
||||
name: 'Log',
|
||||
components: { Search, crudOperation, pagination },
|
||||
cruds() {
|
||||
return CRUD({ title: '日志', url: 'api/logs' })
|
||||
},
|
||||
mixins: [presenter()],
|
||||
created() {
|
||||
this.crud.optShow = {
|
||||
add: false,
|
||||
edit: false,
|
||||
del: false,
|
||||
download: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirmDelAll() {
|
||||
this.$confirm(`确认清空所有操作日志吗?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.crud.delAllLoading = true
|
||||
delAllInfo().then(res => {
|
||||
this.crud.delAllLoading = false
|
||||
this.crud.dleChangePage(1)
|
||||
this.crud.delSuccessNotify()
|
||||
this.crud.toQuery()
|
||||
}).catch(err => {
|
||||
this.crud.delAllLoading = false
|
||||
console.log(err.response.data.message)
|
||||
})
|
||||
}).catch(() => {
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-table-expand {
|
||||
font-size: 0;
|
||||
}
|
||||
.demo-table-expand label {
|
||||
width: 70px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
.demo-table-expand .el-form-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.demo-table-expand .el-form-item__content {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
24
src/views/monitor/log/search.vue
Normal file
24
src/views/monitor/log/search.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<el-input
|
||||
v-model="query.blurry"
|
||||
clearable
|
||||
size="small"
|
||||
placeholder="请输入你要搜索的内容"
|
||||
style="width: 200px;"
|
||||
class="filter-item"
|
||||
/>
|
||||
<date-range-picker v-model="query.createTime" class="date-item" />
|
||||
<rrOperation />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { header } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import DateRangePicker from '@/components/DateRangePicker'
|
||||
export default {
|
||||
components: { rrOperation, DateRangePicker },
|
||||
mixins: [header()]
|
||||
}
|
||||
</script>
|
||||
121
src/views/monitor/online/index.vue
Normal file
121
src/views/monitor/online/index.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<div v-if="crud.props.searchToggle">
|
||||
<el-input v-model="query.filter" clearable size="small" placeholder="全表模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
|
||||
<rrOperation />
|
||||
</div>
|
||||
<crudOperation>
|
||||
<el-button
|
||||
slot="left"
|
||||
class="filter-item"
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:loading="delLoading"
|
||||
:disabled="crud.selections.length === 0"
|
||||
@click="doDelete(crud.selections)"
|
||||
>
|
||||
强退
|
||||
</el-button>
|
||||
</crudOperation>
|
||||
</div>
|
||||
<!--表格渲染-->
|
||||
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="userName" label="用户名" />
|
||||
<el-table-column prop="nickName" label="用户昵称" />
|
||||
<el-table-column prop="dept" label="部门" />
|
||||
<el-table-column prop="ip" label="登录IP" />
|
||||
<el-table-column :show-overflow-tooltip="true" prop="address" label="登录地点" />
|
||||
<el-table-column prop="browser" label="浏览器" />
|
||||
<el-table-column prop="loginTime" label="登录时间" />
|
||||
<el-table-column label="操作" width="70px" fixed="right">
|
||||
<template slot-scope="scope">
|
||||
<el-popover
|
||||
:ref="scope.$index"
|
||||
v-permission="['admin']"
|
||||
placement="top"
|
||||
width="180"
|
||||
>
|
||||
<p>确定强制退出该用户吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="$refs[scope.$index].doClose()">取消</el-button>
|
||||
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.key, scope.$index)">确定</el-button>
|
||||
</div>
|
||||
<el-button slot="reference" size="mini" type="text">强退</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!--分页组件-->
|
||||
<pagination />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { del } from '@/api/monitor/online'
|
||||
import CRUD, { presenter, header, crud } from '@crud/crud'
|
||||
import rrOperation from '@crud/RR.operation'
|
||||
import crudOperation from '@crud/CRUD.operation'
|
||||
import pagination from '@crud/Pagination'
|
||||
|
||||
export default {
|
||||
name: 'OnlineUser',
|
||||
components: { pagination, crudOperation, rrOperation },
|
||||
cruds() {
|
||||
return CRUD({ url: 'auth/online', title: '在线用户' })
|
||||
},
|
||||
mixins: [presenter(), header(), crud()],
|
||||
data() {
|
||||
return {
|
||||
delLoading: false,
|
||||
permission: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.crud.msg.del = '强退成功！'
|
||||
this.crud.optShow = {
|
||||
add: false,
|
||||
edit: false,
|
||||
del: false,
|
||||
download: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doDelete(datas) {
|
||||
this.$confirm(`确认强退选中的${datas.length}个用户?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.delMethod(datas)
|
||||
}).catch(() => {})
|
||||
},
|
||||
// 踢出用户
|
||||
delMethod(key, index) {
|
||||
const ids = []
|
||||
if (key instanceof Array) {
|
||||
key.forEach(val => {
|
||||
ids.push(val.key)
|
||||
})
|
||||
} else ids.push(key)
|
||||
this.delLoading = true
|
||||
del(ids).then(() => {
|
||||
this.delLoading = false
|
||||
if (this.$refs[index]) {
|
||||
this.$refs[index].doClose()
|
||||
}
|
||||
this.crud.dleChangePage(1)
|
||||
this.crud.delSuccessNotify()
|
||||
this.crud.toQuery()
|
||||
}).catch(() => {
|
||||
this.delLoading = false
|
||||
if (this.$refs[index]) {
|
||||
this.$refs[index].doClose()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
291
src/views/monitor/server/index.vue
Normal file
291
src/views/monitor/server/index.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div v-loading="!show" element-loading-text="数据加载中..." :style="!show ? 'height: 500px' : 'height: 100%'" class="app-container">
|
||||
<div v-if="show">
|
||||
<el-card class="box-card">
|
||||
<div style="color: #666;font-size: 13px;">
|
||||
<svg-icon icon-class="system" style="margin-right: 5px" />
|
||||
<span>
|
||||
系统：{{ data.sys.os }}
|
||||
</span>
|
||||
<span>
|
||||
IP：{{ data.sys.ip }}
|
||||
</span>
|
||||
<span>
|
||||
项目已不间断运行：{{ data.sys.day }}
|
||||
</span>
|
||||
<i class="el-icon-refresh" style="margin-left: 40px" @click="init" />
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="font-weight: bold;color: #666;font-size: 15px">状态</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">CPU使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px;">
|
||||
{{ data.cpu.name }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
{{ data.cpu.package }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
{{ data.cpu.core }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
{{ data.cpu.logic }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(data.cpu.used)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer">{{ data.cpu.coreNumber }} 核心</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">内存使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px;">
|
||||
总量：{{ data.memory.total }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
已使用：{{ data.memory.used }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ data.memory.available }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(data.memory.usageRate)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer">{{ data.memory.used }} / {{ data.memory.total }}</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">交换区使用率</div>
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px;">
|
||||
总量：{{ data.swap.total }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
已使用：{{ data.swap.used }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ data.swap.available }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(data.swap.usageRate)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<div class="footer">{{ data.swap.used }} / {{ data.swap.total }}</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
|
||||
<div class="title">磁盘使用率</div>
|
||||
<div class="content">
|
||||
<el-tooltip placement="top-end">
|
||||
<div slot="content" style="font-size: 12px;">
|
||||
<div style="padding: 3px">
|
||||
总量：{{ data.disk.total }}
|
||||
</div>
|
||||
<div style="padding: 3px">
|
||||
空闲：{{ data.disk.available }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<el-progress type="dashboard" :percentage="parseFloat(data.disk.usageRate)" />
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="footer">{{ data.disk.used }} / {{ data.disk.total }}</div>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div>
|
||||
<el-row :gutter="6">
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="font-weight: bold;color: #666;font-size: 15px">CPU使用率监控</span>
|
||||
</div>
|
||||
<div>
|
||||
<v-chart :options="cpuInfo" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="font-weight: bold;color: #666;font-size: 15px">内存使用率监控</span>
|
||||
</div>
|
||||
<div>
|
||||
<v-chart :options="memoryInfo" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ECharts from 'vue-echarts'
|
||||
import 'echarts/lib/chart/line'
|
||||
import 'echarts/lib/component/polar'
|
||||
import { initData } from '@/api/data'
|
||||
export default {
|
||||
name: 'ServerMonitor',
|
||||
components: {
|
||||
'v-chart': ECharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
monitor: null,
|
||||
url: 'api/monitor',
|
||||
data: {},
|
||||
cpuInfo: {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20
|
||||
},
|
||||
series: [{
|
||||
data: [],
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: 'rgb(32, 160, 255)' // 改变区域颜色
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#6fbae1',
|
||||
lineStyle: {
|
||||
color: '#6fbae1' // 改变折线颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
memoryInfo: {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20
|
||||
},
|
||||
series: [{
|
||||
data: [],
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: 'rgb(32, 160, 255)' // 改变区域颜色
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#6fbae1',
|
||||
lineStyle: {
|
||||
color: '#6fbae1' // 改变折线颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
this.monitor = window.setInterval(() => {
|
||||
setTimeout(() => {
|
||||
this.init()
|
||||
}, 2)
|
||||
}, 3500)
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.monitor)
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
initData(this.url, {}).then(data => {
|
||||
this.data = data
|
||||
this.show = true
|
||||
if (this.cpuInfo.xAxis.data.length >= 8) {
|
||||
this.cpuInfo.xAxis.data.shift()
|
||||
this.memoryInfo.xAxis.data.shift()
|
||||
this.cpuInfo.series[0].data.shift()
|
||||
this.memoryInfo.series[0].data.shift()
|
||||
}
|
||||
this.cpuInfo.xAxis.data.push(data.time)
|
||||
this.memoryInfo.xAxis.data.push(data.time)
|
||||
this.cpuInfo.series[0].data.push(parseFloat(data.cpu.used))
|
||||
this.memoryInfo.series[0].data.push(parseFloat(data.memory.usageRate))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||||
::v-deep .box-card {
|
||||
margin-bottom: 5px;
|
||||
span {
|
||||
margin-right: 28px;
|
||||
}
|
||||
.el-icon-refresh {
|
||||
margin-right: 10px;
|
||||
float: right;
|
||||
cursor:pointer;
|
||||
}
|
||||
}
|
||||
.cpu, .memory, .swap, .disk {
|
||||
width: 20%;
|
||||
float: left;
|
||||
padding-bottom: 20px;
|
||||
margin-right: 5%;
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.footer {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #999;
|
||||
margin-top: -5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.content {
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
16
src/views/monitor/sql/index.vue
Normal file
16
src/views/monitor/sql/index.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<elFrame :src="sqlApi" />
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import elFrame from '@/components/Iframe/index'
|
||||
export default {
|
||||
name: 'Sql',
|
||||
components: { elFrame },
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'sqlApi'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user