gongzijian
6 years ago
26 changed files with 669 additions and 106 deletions
@ -1,6 +1,6 @@ |
|||||||
|
|
||||||
# 后端接口地址 |
# 后端接口地址 |
||||||
API_BASE = http://192.168.220.154:12345 |
API_BASE = http://192.168.220.247:12345 |
||||||
|
|
||||||
# 本地开发如需ip访问项目把"#"号去掉 |
# 本地开发如需ip访问项目把"#"号去掉 |
||||||
#DEV_HOST = 192.168.xx.xx |
#DEV_HOST = 192.168.xx.xx |
||||||
|
|||||||
@ -0,0 +1,121 @@ |
|||||||
|
export default { |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: 'gauge', |
||||||
|
center: ['50%', '45%'], // 仪表位置
|
||||||
|
radius: '80%', // 仪表大小
|
||||||
|
startAngle: 200, // 开始角度
|
||||||
|
endAngle: -20, // 结束角度
|
||||||
|
axisLine: { |
||||||
|
show: false, |
||||||
|
lineStyle: { // 属性lineStyle控制线条样式
|
||||||
|
color: [ |
||||||
|
[ 0.5, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ // eslint-disable-line
|
||||||
|
offset: 1, |
||||||
|
color: '#E75F25' // 50% 处的颜色
|
||||||
|
}, { |
||||||
|
offset: 0.8, |
||||||
|
color: '#D9452C' // 40% 处的颜色
|
||||||
|
}], false) ], // 100% 处的颜色
|
||||||
|
[ 0.7, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ // eslint-disable-line
|
||||||
|
offset: 1, |
||||||
|
color: '#FFC539' // 70% 处的颜色
|
||||||
|
}, { |
||||||
|
offset: 0.8, |
||||||
|
color: '#FE951E' // 66% 处的颜色
|
||||||
|
}, { |
||||||
|
offset: 0, |
||||||
|
color: '#E75F25' // 50% 处的颜色
|
||||||
|
}], false) ], |
||||||
|
[ 0.9, new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // eslint-disable-line
|
||||||
|
offset: 1, |
||||||
|
color: '#C7DD6B' // 90% 处的颜色
|
||||||
|
}, { |
||||||
|
offset: 0.8, |
||||||
|
color: '#FEEC49' // 86% 处的颜色
|
||||||
|
}, { |
||||||
|
offset: 0, |
||||||
|
color: '#FFC539' // 70% 处的颜色
|
||||||
|
}], false) ], |
||||||
|
[1, new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { // eslint-disable-line
|
||||||
|
offset: 0.2, |
||||||
|
color: '#1CAD52' // 92% 处的颜色
|
||||||
|
}, { |
||||||
|
offset: 0, |
||||||
|
color: '#C7DD6B' // 90% 处的颜色
|
||||||
|
}], false) ] |
||||||
|
], |
||||||
|
width: 10 |
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
axisLabel: { |
||||||
|
show: false |
||||||
|
}, |
||||||
|
pointer: { // 指针样式
|
||||||
|
length: '45%' |
||||||
|
}, |
||||||
|
detail: { |
||||||
|
show: false |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: 'gauge', |
||||||
|
center: ['50%', '45%'], // 默认全局居中
|
||||||
|
radius: '70%', |
||||||
|
startAngle: 200, |
||||||
|
endAngle: -20, |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { // 属性lineStyle控制线条样式
|
||||||
|
color: [ // 表盘颜色
|
||||||
|
[ 0.5, '#DA462C' ], // 0-50%处的颜色
|
||||||
|
[ 0.7, '#FF9618' ], // 51%-70%处的颜色
|
||||||
|
[ 0.9, '#FFED44' ], // 70%-90%处的颜色
|
||||||
|
[ 1, '#20AE51' ]// 90%-100%处的颜色
|
||||||
|
], |
||||||
|
width: 30// 表盘宽度
|
||||||
|
} |
||||||
|
}, |
||||||
|
splitLine: { // 分割线样式（及10、20等长线样式）
|
||||||
|
length: 30, |
||||||
|
lineStyle: { // 属性lineStyle控制线条样式
|
||||||
|
width: 2 |
||||||
|
} |
||||||
|
}, |
||||||
|
axisTick: { // 刻度线样式（及短线样式）
|
||||||
|
length: 20 |
||||||
|
}, |
||||||
|
axisLabel: { // 文字样式（及“10”、“20”等文字样式）
|
||||||
|
color: 'black', |
||||||
|
distance: 5 // 文字离表盘的距离
|
||||||
|
}, |
||||||
|
detail: { |
||||||
|
formatter: '{score|{value}%}', |
||||||
|
offsetCenter: [0, '50%'], |
||||||
|
backgroundColor: '#2D8BF0', |
||||||
|
height: 30, |
||||||
|
rich: { |
||||||
|
score: { |
||||||
|
color: 'white', |
||||||
|
fontFamily: '微软雅黑', |
||||||
|
fontSize: 32 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
data: [{ |
||||||
|
value: 70, |
||||||
|
label: { |
||||||
|
textStyle: { |
||||||
|
fontSize: 12 |
||||||
|
} |
||||||
|
} |
||||||
|
}] |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
@ -1,40 +1,83 @@ |
|||||||
<template> |
<template> |
||||||
<div class="mysql-model"> |
<m-list-construction :title="'Mysql管理'"> |
||||||
mysql |
<template slot="content"> |
||||||
</div> |
<div class="servers-wrapper"> |
||||||
|
<div class="row"> |
||||||
|
<div class="col-md-4"> |
||||||
|
<div class="gridb-model"> |
||||||
|
<div class="title"> |
||||||
|
<span>正常与否</span> |
||||||
|
</div> |
||||||
|
<div class="value-p"> |
||||||
|
<b style="color: #0098e1;">78</b> |
||||||
|
</div> |
||||||
|
<div class="text-1"> |
||||||
|
正常与否 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-md-4"> |
||||||
|
<div class="gridb-model"> |
||||||
|
<div class="title"> |
||||||
|
<span>最大连接数</span> |
||||||
|
</div> |
||||||
|
<div class="value-p"> |
||||||
|
<b style="color: #ffcf3d;">55</b> |
||||||
|
</div> |
||||||
|
<div class="text-1"> |
||||||
|
最大连接数 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="col-md-4"> |
||||||
|
<div class="gridb-model"> |
||||||
|
<div class="title"> |
||||||
|
<span>当前活跃连接</span> |
||||||
|
</div> |
||||||
|
<div class="value-p"> |
||||||
|
<b style="color: #f07d7d;">32</b> |
||||||
|
</div> |
||||||
|
<div class="text-1"> |
||||||
|
当前活跃连接 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-construction> |
||||||
</template> |
</template> |
||||||
<script> |
<script> |
||||||
|
import { mapActions } from 'vuex' |
||||||
|
import mList from './_source/list' |
||||||
|
import mSpin from '@/module/components/spin/spin' |
||||||
|
import mNoData from '@/module/components/noData/noData' |
||||||
|
import mListConstruction from '@/module/components/listConstruction/listConstruction' |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: 'mysql', |
name: 'servers-mysql', |
||||||
data () { |
data () { |
||||||
return {} |
return { |
||||||
|
pageSize: 10, |
||||||
|
pageNo: 1, |
||||||
|
totalPage: null, |
||||||
|
searchVal: '', |
||||||
|
isLoading: false, |
||||||
|
masterList: [] |
||||||
|
} |
||||||
}, |
}, |
||||||
props: {}, |
props: {}, |
||||||
methods: {}, |
methods: { |
||||||
watch: {}, |
...mapActions('security', ['getProcessMasterList']) |
||||||
beforeCreate () { |
|
||||||
}, |
}, |
||||||
|
watch: {}, |
||||||
created () { |
created () { |
||||||
}, |
}, |
||||||
beforeMount () { |
|
||||||
}, |
|
||||||
mounted () { |
mounted () { |
||||||
}, |
}, |
||||||
beforeUpdate () { |
components: { mList, mListConstruction, mSpin, mNoData } |
||||||
}, |
|
||||||
updated () { |
|
||||||
}, |
|
||||||
beforeDestroy () { |
|
||||||
}, |
|
||||||
destroyed () { |
|
||||||
}, |
|
||||||
computed: {}, |
|
||||||
components: {} |
|
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang="scss" rel="stylesheet/scss"> |
<style lang="scss" rel="stylesheet/scss"> |
||||||
.mysql-model { |
@import "./servers"; |
||||||
|
|
||||||
} |
|
||||||
</style> |
</style> |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
.servers-wrapper { |
||||||
|
padding: 16px; |
||||||
|
>.row { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
.gridb-model { |
||||||
|
width: 100%; |
||||||
|
height: 360px; |
||||||
|
overflow: hidden; |
||||||
|
border: 1px solid #E8E8E8; |
||||||
|
margin: 0 auto; |
||||||
|
>.title { |
||||||
|
height: 36px; |
||||||
|
line-height: 36px; |
||||||
|
background: #F9F9F9; |
||||||
|
border-bottom: 1px solid #E8E8E8; |
||||||
|
span { |
||||||
|
padding-left: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
.gauge-echart { |
||||||
|
width: 350px; |
||||||
|
margin: auto; |
||||||
|
margin-bottom: -80px; |
||||||
|
} |
||||||
|
.text-1 { |
||||||
|
width: 100%; |
||||||
|
margin: 0 auto; |
||||||
|
font-size: 32px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.value-p { |
||||||
|
height: 254px; |
||||||
|
line-height: 254px; |
||||||
|
text-align: center; |
||||||
|
>b { |
||||||
|
font-size: 140px; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,39 @@ |
|||||||
|
<template> |
||||||
|
<m-token></m-token> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import mToken from '@/conf/home/pages/user/pages/token' |
||||||
|
export default { |
||||||
|
name: 'token-index', |
||||||
|
data () { |
||||||
|
return {} |
||||||
|
}, |
||||||
|
props: {}, |
||||||
|
methods: {}, |
||||||
|
watch: {}, |
||||||
|
beforeCreate () { |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
beforeMount () { |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
}, |
||||||
|
beforeUpdate () { |
||||||
|
}, |
||||||
|
updated () { |
||||||
|
}, |
||||||
|
beforeDestroy () { |
||||||
|
}, |
||||||
|
destroyed () { |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
components: { mToken } |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" rel="stylesheet/scss"> |
||||||
|
.index-model { |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue