Merge pull request #144 from millionfor/dev-20190415 (ec224e27) · Commits · SUMMER2020 / students / proj-2002251

escheduler-ui/src/js/conf/home/index.js

+1 −0

Original line number	Diff line number	Diff line
		@@ -25,6 +25,7 @@ import store from './store'
		import i18n from '@/module/i18n'
		import { sync } from 'vuex-router-sync'
		import Chart from '~/@analysys/ana-charts'
		import '@/module/filter/formatDate'
		import themeData from '@/module/echarts/themeData.json'
		import Permissions from '@/module/permissions'
		import '~/@analysys/ans-ui/lib/ans-ui.min.css'

escheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue

+0 −1

Original line number	Diff line number	Diff line
		@@ -90,7 +90,6 @@
		</template>
		<script>
		import { mapActions } from 'vuex'
		import '@/module/filter/formatDate'
		import { findComponentDownward } from '@/module/util/'
		import mTooltipsJSON from '@/module/components/tooltipsJSON/tooltipsJSON'

escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/gauge.vue

0 → 100644

+62 −0

Original line number	Diff line number	Diff line
		<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>

escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/gaugeOption.js

+118 −116

Original line number	Diff line number	Diff line
		export default {
		export default function (value) {
		return {
		series: [
		{
		type: 'gauge',
		@@ -109,7 +110,7 @@ export default {
		}
		},
		data: [{
		value: 70,
		value: value \|\| 0,
		label: {
		textStyle: {
		fontSize: 12
		@@ -119,3 +120,4 @@ export default {
		}
		]
		}
		}

escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/list.vue→escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue

+125 −0

Original line number	Diff line number	Diff line
		<template>
		<div class="list-model">
		<div class="list-model zookeeper-list">
		<div class="table-box">
		<table>
		<tr>
		@@ -7,27 +7,39 @@
		<span>{{$t('#')}}</span>
		</th>
		<th>
		<span>node</span>
		<span>host</span>
		</th>
		<th>
		<span>ip</span>
		<span>连接数</span>
		</th>
		<th>
		<span>模式</span>
		<span>watches数量</span>
		</th>
		<th>
		<span>连接数</span>
		<span>发送量</span>
		</th>
		<th>
		<span>接收量</span>
		</th>
		<th>
		<span>watch数</span>
		<span>leader/follower</span>
		</th>
		<th>
		<span>数据量</span>
		<span>最低延时</span>
		</th>
		<th>
		<span>Sent/Received</span>
		<span>平均延时</span>
		</th>
		<th>
		<span>最大延时</span>
		</th>
		<th>
		<span>节点数</span>
		</th>
		<th>
		<span>当前查询时间戳</span>
		</th>
		<th style="text-align: center">
		<span>节点自检状态</span>
		</th>
		</tr>
		@@ -37,25 +49,40 @@
		</td>
		<td>
		<span>
		<a href="javascript:" class="links">task1</a>
		<a href="javascript:" class="links">{{item.hostname}}</a>
		</span>
		</td>
		<td><span>192.11.1.1</span></td>
		<td><span>{{item.connections}}</span></td>
		<td>
		<span>{{item.watches}}</span>
		</td>
		<td>
		<span>{{item.sent}}</span>
		</td>
		<td>
		<span>2222</span>
		<span>{{item.received}}</span>
		</td>
		<td><span>{{item.mode}}</span></td>
		<td>
		<span>3333</span>
		<span>{{item.minLatency}}</span>
		</td>
		<td>
		<span>4444</span>
		<span>{{item.avgLatency}}</span>
		</td>
		<td><span>5555</span></td>
		<td>
		<span>6666</span>
		<span>{{item.maxLatency}}</span>
		</td>
		<td>
		<span>7777</span>
		<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>
		@@ -63,10 +90,8 @@
		</div>
		</template>
		<script>
		import '@/module/filter/formatDate'

		export default {
		name: 'tenement-list',
		name: 'zookeeper-list',
		data () {
		return {
		list: []
		@@ -79,3 +104,22 @@
		}
		}
		</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>