gongzijian
6 years ago
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,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