gongzijian
5 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访问项目把"#"号去掉 |
||||
#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> |
||||
<div class="mysql-model"> |
||||
mysql |
||||
</div> |
||||
<m-list-construction :title="'Mysql管理'"> |
||||
<template slot="content"> |
||||
<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> |
||||
<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 { |
||||
name: 'mysql', |
||||
name: 'servers-mysql', |
||||
data () { |
||||
return {} |
||||
return { |
||||
pageSize: 10, |
||||
pageNo: 1, |
||||
totalPage: null, |
||||
searchVal: '', |
||||
isLoading: false, |
||||
masterList: [] |
||||
} |
||||
}, |
||||
props: {}, |
||||
methods: {}, |
||||
watch: {}, |
||||
beforeCreate () { |
||||
methods: { |
||||
...mapActions('security', ['getProcessMasterList']) |
||||
}, |
||||
watch: {}, |
||||
created () { |
||||
}, |
||||
beforeMount () { |
||||
}, |
||||
mounted () { |
||||
}, |
||||
beforeUpdate () { |
||||
}, |
||||
updated () { |
||||
}, |
||||
beforeDestroy () { |
||||
}, |
||||
destroyed () { |
||||
}, |
||||
computed: {}, |
||||
components: {} |
||||
components: { mList, mListConstruction, mSpin, mNoData } |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" rel="stylesheet/scss"> |
||||
.mysql-model { |
||||
|
||||
} |
||||
</style> |
||||
@import "./servers"; |
||||
</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