millionfor
5 years ago
committed by
GitHub
35 changed files with 703 additions and 519 deletions
@ -0,0 +1,62 @@
|
||||
<template> |
||||
<div class="gauge-model"> |
||||
<div class="gauge-echart"> |
||||
<div :id="id" style="height: 380px;"></div> |
||||
</div> |
||||
<div class="text-1" style="margin-top: -104px;"> |
||||
{{name}} |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import gaugeOption from './gaugeOption' |
||||
|
||||
export default { |
||||
name: 'gauge', |
||||
data () { |
||||
return {} |
||||
}, |
||||
props: { |
||||
id: String, |
||||
name: String, |
||||
value: Number |
||||
}, |
||||
methods: {}, |
||||
created () { |
||||
}, |
||||
mounted () { |
||||
const gauge = echarts.init(document.getElementById(this.id)) // eslint-disable-line |
||||
gauge.setOption(gaugeOption(this.value), true) |
||||
}, |
||||
components: {} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" rel="stylesheet/scss"> |
||||
.gauge-model { |
||||
width: 100%; |
||||
height: 360px; |
||||
overflow: hidden; |
||||
margin: 0 auto; |
||||
.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: 100px; |
||||
color: #333; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,121 +1,123 @@
|
||||
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 |
||||
export default function (value) { |
||||
return { |
||||
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 |
||||
} |
||||
}, |
||||
data: [{ |
||||
value: 70, |
||||
label: { |
||||
textStyle: { |
||||
fontSize: 12 |
||||
{ |
||||
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: value || 0, |
||||
label: { |
||||
textStyle: { |
||||
fontSize: 12 |
||||
} |
||||
} |
||||
}] |
||||
} |
||||
] |
||||
} |
||||
} |
||||
|
||||
@ -1,81 +0,0 @@
|
||||
<template> |
||||
<div class="list-model"> |
||||
<div class="table-box"> |
||||
<table> |
||||
<tr> |
||||
<th> |
||||
<span>{{$t('#')}}</span> |
||||
</th> |
||||
<th> |
||||
<span>node</span> |
||||
</th> |
||||
<th> |
||||
<span>ip</span> |
||||
</th> |
||||
<th> |
||||
<span>模式</span> |
||||
</th> |
||||
<th> |
||||
<span>连接数</span> |
||||
</th> |
||||
<th> |
||||
<span>watch数</span> |
||||
</th> |
||||
<th> |
||||
<span>数据量</span> |
||||
</th> |
||||
<th> |
||||
<span>Sent/Received</span> |
||||
</th> |
||||
<th> |
||||
<span>节点自检状态</span> |
||||
</th> |
||||
</tr> |
||||
<tr v-for="(item, $index) in list" :key="$index"> |
||||
<td> |
||||
<span>{{$index + 1}}</span> |
||||
</td> |
||||
<td> |
||||
<span> |
||||
<a href="javascript:" class="links">task1</a> |
||||
</span> |
||||
</td> |
||||
<td><span>192.11.1.1</span></td> |
||||
<td> |
||||
<span>2222</span> |
||||
</td> |
||||
<td> |
||||
<span>3333</span> |
||||
</td> |
||||
<td> |
||||
<span>4444</span> |
||||
</td> |
||||
<td><span>5555</span></td> |
||||
<td> |
||||
<span>6666</span> |
||||
</td> |
||||
<td> |
||||
<span>7777</span> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import '@/module/filter/formatDate' |
||||
|
||||
export default { |
||||
name: 'tenement-list', |
||||
data () { |
||||
return { |
||||
list: [] |
||||
} |
||||
}, |
||||
props: { |
||||
list: Array |
||||
}, |
||||
methods: { |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,125 @@
|
||||
<template> |
||||
<div class="list-model zookeeper-list"> |
||||
<div class="table-box"> |
||||
<table> |
||||
<tr> |
||||
<th> |
||||
<span>{{$t('#')}}</span> |
||||
</th> |
||||
<th> |
||||
<span>host</span> |
||||
</th> |
||||
<th> |
||||
<span>连接数</span> |
||||
</th> |
||||
<th> |
||||
<span>watches数量</span> |
||||
</th> |
||||
<th> |
||||
<span>发送量</span> |
||||
</th> |
||||
<th> |
||||
<span>接收量</span> |
||||
</th> |
||||
<th> |
||||
<span>leader/follower</span> |
||||
</th> |
||||
<th> |
||||
<span>最低延时</span> |
||||
</th> |
||||
<th> |
||||
<span>平均延时</span> |
||||
</th> |
||||
<th> |
||||
<span>最大延时</span> |
||||
</th> |
||||
<th> |
||||
<span>节点数</span> |
||||
</th> |
||||
<th> |
||||
<span>当前查询时间戳</span> |
||||
</th> |
||||
<th style="text-align: center"> |
||||
<span>节点自检状态</span> |
||||
</th> |
||||
</tr> |
||||
<tr v-for="(item, $index) in list" :key="$index"> |
||||
<td> |
||||
<span>{{$index + 1}}</span> |
||||
</td> |
||||
<td> |
||||
<span> |
||||
<a href="javascript:" class="links">{{item.hostname}}</a> |
||||
</span> |
||||
</td> |
||||
<td><span>{{item.connections}}</span></td> |
||||
<td> |
||||
<span>{{item.watches}}</span> |
||||
</td> |
||||
<td> |
||||
<span>{{item.sent}}</span> |
||||
</td> |
||||
<td> |
||||
<span>{{item.received}}</span> |
||||
</td> |
||||
<td><span>{{item.mode}}</span></td> |
||||
<td> |
||||
<span>{{item.minLatency}}</span> |
||||
</td> |
||||
<td> |
||||
<span>{{item.avgLatency}}</span> |
||||
</td> |
||||
<td> |
||||
<span>{{item.maxLatency}}</span> |
||||
</td> |
||||
<td> |
||||
<span>{{item.nodeCount}}</span> |
||||
</td> |
||||
<td> |
||||
<span>{{item.date | formatDate}}</span> |
||||
</td> |
||||
<td> |
||||
<span class="state"> |
||||
<i class="iconfont success" v-if="item.state"></i> |
||||
<i class="iconfont error" v-else></i> |
||||
</span> |
||||
</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: 'zookeeper-list', |
||||
data () { |
||||
return { |
||||
list: [] |
||||
} |
||||
}, |
||||
props: { |
||||
list: Array |
||||
}, |
||||
methods: { |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" rel="stylesheet/scss"> |
||||
.zookeeper-list { |
||||
.state { |
||||
text-align: center; |
||||
display: block; |
||||
>i { |
||||
font-size: 18px; |
||||
} |
||||
.success { |
||||
color: #33cc00; |
||||
} |
||||
.error { |
||||
color: #ff0000; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,57 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import io from '@/module/io' |
||||
|
||||
export default { |
||||
getMasterData ({ state }, payload) { |
||||
return new Promise((resolve, reject) => { |
||||
io.get(`monitor/master/list`, payload, res => { |
||||
resolve(res.data) |
||||
}).catch(e => { |
||||
reject(e) |
||||
}) |
||||
}) |
||||
}, |
||||
getWorkerData ({ state }, payload) { |
||||
return new Promise((resolve, reject) => { |
||||
io.get(`monitor/worker/list`, payload, res => { |
||||
resolve(res.data) |
||||
}).catch(e => { |
||||
reject(e) |
||||
}) |
||||
}) |
||||
}, |
||||
getDatabaseData ({ state }, payload) { |
||||
return new Promise((resolve, reject) => { |
||||
io.get(`monitor/database`, payload, res => { |
||||
resolve(res.data) |
||||
}).catch(e => { |
||||
reject(e) |
||||
}) |
||||
}) |
||||
}, |
||||
getZookeeperData ({ state }, payload) { |
||||
return new Promise((resolve, reject) => { |
||||
io.get(`monitor/zookeeper/list`, payload, res => { |
||||
resolve(res.data) |
||||
}).catch(e => { |
||||
reject(e) |
||||
}) |
||||
}) |
||||
} |
||||
} |
||||
@ -0,0 +1,19 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
export default { |
||||
} |
||||
@ -0,0 +1,30 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import actions from './actions' |
||||
import getters from './getters' |
||||
import mutations from './mutations' |
||||
import state from './state' |
||||
|
||||
export default { |
||||
strict: true, |
||||
namespaced: true, |
||||
state, |
||||
getters, |
||||
mutations, |
||||
actions |
||||
} |
||||
@ -0,0 +1,19 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
export default { |
||||
} |
||||
@ -0,0 +1,18 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
export default { |
||||
} |
||||
Loading…
Reference in new issue