Merge remote-tracking branch 'remotes/upstream/dev-20190415' into dev-20190415 (5d90156b) · Commits · SUMMER2020 / students / proj-2002251

escheduler-ui/.env

+1 −1

Original line number	Diff line number	Diff line

		# 后端接口地址
		API_BASE = http://192.168.220.154:12345
		API_BASE = http://192.168.220.247:12345

		# 本地开发如需ip访问项目把"#"号去掉
		#DEV_HOST = 192.168.xx.xx

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

0 → 100644

+121 −0

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

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

+20 −17

Original line number	Diff line number	Diff line
		@@ -7,25 +7,28 @@
		<span>{{$t('#')}}</span>
		</th>
		<th>
		<span>{{$t('IP')}}</span>
		<span>node</span>
		</th>
		<th>
		<span>{{$t('Process Pid')}}</span>
		<span>ip</span>
		</th>
		<th>
		<span>{{$t('zk registration directory')}}</span>
		<span>模式</span>
		</th>
		<th>
		<span>{{$t('cpuUsage')}}</span>
		<span>连接数</span>
		</th>
		<th>
		<span>{{$t('memoryUsage')}}</span>
		<span>watch数</span>
		</th>
		<th>
		<span>{{$t('Create Time')}}</span>
		<span>数据量</span>
		</th>
		<th>
		<span>{{$t('Last heartbeat time')}}</span>
		<span>Sent/Received</span>
		</th>
		<th>
		<span>节点自检状态</span>
		</th>
		</tr>
		<tr v-for="(item, $index) in list" :key="$index">
		@@ -34,22 +37,25 @@
		</td>
		<td>
		<span>
		<a href="javascript:" class="links">{{item.host}}</a>
		<a href="javascript:" class="links">task1</a>
		</span>
		</td>
		<td><span>{{item.port}}</span></td>
		<td><span>192.11.1.1</span></td>
		<td>
		<span>{{item.zkDirectory}}</span>
		<span>2222</span>
		</td>
		<td>
		<span>{{_rtResInfo(JSON.parse(item.resInfo)['cpuUsage'])}}</span>
		<span>3333</span>
		</td>
		<td>
		<span>{{_rtResInfo(JSON.parse(item.resInfo)['memoryUsage'])}}</span>
		<span>4444</span>
		</td>
		<td><span>{{item.createTime \| formatDate}}</span></td>
		<td><span>5555</span></td>
		<td>
		<span>{{item.lastHeartbeatTime \| formatDate}}</span>
		<span>6666</span>
		</td>
		<td>
		<span>7777</span>
		</td>
		</tr>
		</table>
		@@ -70,9 +76,6 @@
		list: Array
		},
		methods: {
		_rtResInfo (val) {
		return (val * 100).toFixed(2) + ' %'
		}
		}
		}
		</script>

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

+134 −9

Original line number	Diff line number	Diff line
		<template>
		<m-list-construction :title="$t('Service-Master')">
		<m-list-construction :title="'Master管理'">
		<template slot="content">
		<div class="servers-wrapper">
		<div class="row">
		<div class="col-md-4">.col-md-8</div>
		<div class="col-md-4">.col-md-4</div>
		<div class="col-md-4">.col-md-4</div>
		<div class="col-md-4">
		<div class="gridb-model">
		<div class="title">
		<span>Cpu详细信息</span>
		</div>
		<div class="gauge-echart">
		<div id="a1" style="height: 380px;"></div>
		</div>
		<div class="text-1" style="margin-top: -126px">
		cpu
		</div>
		</div>
		</div>
		<div class="col-md-4">
		<div class="gridb-model">
		<div class="title">
		<span>内存详细信息</span>
		</div>
		<div class="gauge-echart">
		<div id="a2" style="height: 380px;"></div>
		</div>
		<div class="text-1" style="margin-top: -126px">
		cpu
		</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: #0098e1;">12</b>
		</div>
		<div class="text-1">
		cpu
		</div>
		</div>
		</div>
		</div>
		<div class="row">
		<div class="col-md-4">
		<div class="gridb-model">
		<div class="title">
		<span>Cpu详细信息</span>
		</div>
		<div class="gauge-echart">
		<div id="a3" style="height: 380px;"></div>
		</div>
		<div class="text-1" style="margin-top: -126px">
		cpu
		</div>
		</div>
		</div>
		<div class="col-md-4">
		<div class="gridb-model">
		<div class="title">
		<span>内存详细信息</span>
		</div>
		<div class="gauge-echart">
		<div id="a4" style="height: 380px;"></div>
		</div>
		<div class="text-1" style="margin-top: -126px">
		cpu
		</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: #7a56b8;">72</b>
		</div>
		<div class="text-1">
		cpu
		</div>
		</div>
		</div>
		</div>
		<div class="row">
		<div class="col-md-4">
		<div class="gridb-model">
		<div class="title">
		<span>Cpu详细信息</span>
		</div>
		<div class="gauge-echart">
		<div id="a5" style="height: 380px;"></div>
		</div>
		<div class="text-1" style="margin-top: -126px">
		cpu
		</div>
		</div>
		</div>
		<div class="col-md-4">
		<div class="gridb-model">
		<div class="title">
		<span>内存详细信息</span>
		</div>
		<div class="gauge-echart">
		<div id="a6" style="height: 380px;"></div>
		</div>
		<div class="text-1" style="margin-top: -126px">
		cpu
		</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: #e84d80;">44</b>
		</div>
		<div class="text-1">
		cpu
		</div>
		</div>
		</div>
		</div>
		</div>
		</template>
		@@ -16,6 +134,7 @@
		import mList from './_source/list'
		import mSpin from '@/module/components/spin/spin'
		import mNoData from '@/module/components/noData/noData'
		import gaugeOption from './_source/gaugeOption'
		import mListConstruction from '@/module/components/listConstruction/listConstruction'

		export default {
		@@ -36,14 +155,20 @@
		},
		watch: {},
		created () {
		this.isLoading = true
		this.getProcessMasterList().then(res => {
		this.masterList = res.data
		this.isLoading = false
		})


		},
		mounted () {
		let b = {}
		let a = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6']
		a.forEach((v, i) => {
		b[v] = echarts.init(document.getElementById(v)) // eslint-disable-line
		b[v].setOption(gaugeOption, true)
		})
		},
		components: { mList, mListConstruction, mSpin, mNoData }
		}
		</script>
		<style lang="scss" rel="stylesheet/scss">
		@import "./servers";
		</style>
		No newline at end of file

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

+68 −25

Original line number	Diff line number	Diff line
		<template>
		<div class="mysql-model">
		mysql
		<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 {

		}
		@import "./servers";
		</style>
		No newline at end of file