Browse Source

首页改造结构 抽分组件

pull/2/head
gongzijian 6 years ago
parent
commit
0ef3649ee2
  1. 6
      escheduler-ui/src/js/conf/home/pages/home/index.vue
  2. 8
      escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/master.vue
  3. 6
      escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/mysql.vue
  4. 2
      escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/servers.scss
  5. 8
      escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
  6. 77
      escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/commandStateCount.vue
  7. 70
      escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/defineUserCount.vue
  8. 122
      escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/processStateCount.vue
  9. 362
      escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/projectChart.vue
  10. 102
      escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/queueCount.vue
  11. 129
      escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskCtatusCount.vue
  12. 141
      escheduler-ui/src/js/conf/home/pages/projects/pages/index/index.vue
  13. 29
      escheduler-ui/src/js/conf/home/pages/security/pages/token/index.vue
  14. 6
      escheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/createWorker.vue
  15. 4
      escheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/list.vue
  16. 4
      escheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/index.vue
  17. 12
      escheduler-ui/src/js/conf/home/pages/user/pages/token/_source/createToken.vue
  18. 12
      escheduler-ui/src/js/conf/home/pages/user/pages/token/_source/list.vue
  19. 4
      escheduler-ui/src/js/conf/home/pages/user/pages/token/index.vue
  20. 16
      escheduler-ui/src/js/conf/home/router/index.js
  21. 2
      escheduler-ui/src/js/module/components/nav/nav.vue
  22. 6
      escheduler-ui/src/js/module/components/secondaryMenu/_source/menu.js
  23. 19
      escheduler-ui/src/js/module/i18n/locale/en_US.js
  24. 19
      escheduler-ui/src/js/module/i18n/locale/zh_CN.js

6
escheduler-ui/src/js/conf/home/pages/home/index.vue

@ -1,16 +1,16 @@
<template> <template>
<m-list-construction :title="$t('Home')"> <m-list-construction :title="$t('Home')">
<template slot="content"> <template slot="content">
<m-project-chart :id="0"></m-project-chart> <m-project-home :id="0"></m-project-home>
</template> </template>
</m-list-construction> </m-list-construction>
</template> </template>
<script> <script>
import mProjectChart from '@/conf/home/pages/projects/pages/index/_source/projectChart' import mProjectHome from '@/conf/home/pages/projects/pages/index'
import mListConstruction from '@/module/components/listConstruction/listConstruction' import mListConstruction from '@/module/components/listConstruction/listConstruction'
export default { export default {
name: 'home', name: 'home',
components: { mProjectChart, mListConstruction } components: { mProjectHome, mListConstruction }
} }
</script> </script>

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

@ -6,12 +6,12 @@
<div class="row-title"> <div class="row-title">
<div class="left"> <div class="left">
<span class="sp">IP: {{item.host}}</span> <span class="sp">IP: {{item.host}}</span>
<span class="sp">端口: {{item.port}}</span> <span class="sp">{{$t('Port')}}: {{item.port}}</span>
<span class="sp">zk注册目录: {{item.zkDirectory}}</span> <span class="sp">{{$t('Zk registration directory')}}: {{item.zkDirectory}}</span>
</div> </div>
<div class="right"> <div class="right">
<span class="sp">创建时间: {{item.createTime | formatDate}}</span> <span class="sp">{{$t('Create Time')}}: {{item.createTime | formatDate}}</span>
<span class="sp">最后心跳时间: {{item.lastHeartbeatTime | formatDate}}</span> <span class="sp">{{$t('Last heartbeat time')}}: {{item.lastHeartbeatTime | formatDate}}</span>
</div> </div>
</div> </div>
<div class="row-cont"> <div class="row-cont">

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

@ -22,7 +22,7 @@
<div class="col-md-3"> <div class="col-md-3">
<div class="text-num-model text"> <div class="text-num-model text">
<div class="title"> <div class="title">
<span>最大连接数</span> <span>最大连接数 - {{item.date | formatDate}}</span>
</div> </div>
<div class="value-p"> <div class="value-p">
<b :style="{color:color[0]}">{{item.maxConnections}}</b> <b :style="{color:color[0]}">{{item.maxConnections}}</b>
@ -48,13 +48,13 @@
<div class="col-md-2"> <div class="col-md-2">
<div class="text-num-model text"> <div class="text-num-model text">
<div class="title"> <div class="title">
<span>最大连接数</span> <span>最大使用连接数</span>
</div> </div>
<div class="value-p"> <div class="value-p">
<b :style="{color:color[2]}">{{item.maxUsedConnections}}</b> <b :style="{color:color[2]}">{{item.maxUsedConnections}}</b>
</div> </div>
<div class="text-1"> <div class="text-1">
最大连接数 最大使用连接数
</div> </div>
</div> </div>
</div> </div>

2
escheduler-ui/src/js/conf/home/pages/monitor/pages/servers/servers.scss

@ -59,7 +59,7 @@
height: 160px; height: 160px;
line-height: 160px; line-height: 160px;
>b { >b {
font-size: 80px; font-size: 72px;
} }
>.state { >.state {
>i { >i {

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

@ -6,12 +6,12 @@
<div class="row-title"> <div class="row-title">
<div class="left"> <div class="left">
<span class="sp">IP: {{item.host}}</span> <span class="sp">IP: {{item.host}}</span>
<span class="sp">端口: {{item.port}}</span> <span class="sp">{{$t('Port')}}: {{item.port}}</span>
<span class="sp">zk注册目录: {{item.zkDirectory}}</span> <span class="sp">{{$t('Zk registration directory')}}: {{item.zkDirectory}}</span>
</div> </div>
<div class="right"> <div class="right">
<span class="sp">创建时间: {{item.createTime | formatDate}}</span> <span class="sp">{{$t('Create Time')}}: {{item.createTime | formatDate}}</span>
<span class="sp">最后心跳时间: {{item.lastHeartbeatTime | formatDate}}</span> <span class="sp">{{$t('Last heartbeat time')}}: {{item.lastHeartbeatTime | formatDate}}</span>
</div> </div>
</div> </div>
<div class="row-cont"> <div class="row-cont">

77
escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/commandStateCount.vue

@ -0,0 +1,77 @@
<template>
<div class="command-state-count-model">
<template v-show="!msg">
<div class="data-area" v-spin="isSpin">
<div id="command-state-bar" style="height:500px"></div>
</div>
</template>
<template v-show="msg">
<m-no-data :msg="msg" v-if="msg"></m-no-data>
</template>
</div>
</template>
<script>
import _ from 'lodash'
import { mapActions } from 'vuex'
import { simple } from './chartConfig'
import Chart from '~/@analysys/ana-charts'
import mNoData from '@/module/components/noData/noData'
export default {
name: 'command-state-count',
data () {
return {
isSpin: true,
msg: ''
}
},
props: {
searchParams: Object
},
methods: {
...mapActions('projects', ['getCommandStateCount']),
_handleCommandState (res) {
let data = []
_.forEach(res.data, (v, i) => {
let key = _.keys(v)
if (key[0] === 'errorCount') {
data.push({ typeName: '错误指令数', key: v.commandState, value: v.errorCount })
}
})
_.forEach(res.data, (v, i) => {
let key = _.keys(v)
if (key[1] === 'normalCount') {
data.push({ typeName: '正常指令数', key: v.commandState, value: v.normalCount })
}
})
const myChart = Chart.bar('#command-state-bar', data, {
title: ''
})
myChart.echart.setOption(simple)
}
},
created () {
},
watch: {
'searchParams': {
deep: true,
immediate: true,
handler (o) {
this.isSpin = true
this.getCommandStateCount(o).then(res => {
this._handleCommandState(res)
this.isSpin = false
}).catch(e => {
this.msg = e.msg || 'error'
this.isSpin = false
})
}
}
},
mounted () {
},
computed: {},
components: { mNoData }
}
</script>

70
escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/defineUserCount.vue

@ -0,0 +1,70 @@
<template>
<div class="define-user-count-model">
<template v-if="!msg">
<div class="data-area" v-spin="isSpin">
<div id="process-definition-bar" style="height:500px"></div>
</div>
</template>
<template v-if="msg">
<m-no-data :msg="msg" v-if="msg"></m-no-data>
</template>
</div>
</template>
<script>
import _ from 'lodash'
import { mapActions } from 'vuex'
import { bar } from './chartConfig'
import Chart from '~/@analysys/ana-charts'
import mNoData from '@/module/components/noData/noData'
export default {
name: 'define-user-count',
data () {
return {
isSpin: true,
msg: ''
}
},
props: {
projectId: Number
},
methods: {
...mapActions('projects', ['getDefineUserCount']),
_handleDefineUser (res) {
let data = res.data.userList || []
this.defineUserList = _.map(data, v => {
return {
key: v.userName + ',' + v.userId + ',' + v.count,
value: v.count
}
})
const myChart = Chart.bar('#process-definition-bar', this.defineUserList, {})
myChart.echart.setOption(bar)
//
if (this.id) {
myChart.echart.on('click', e => {
this.$router.push({
name: 'projects-definition-list',
query: {
userId: e.name.split(',')[1]
}
})
})
}
}
},
created () {
this.isSpin = true
this.getDefineUserCount(this.projectId).then(res => {
this.defineUserList = []
this._handleDefineUser(res)
this.isSpin = false
}).catch(e => {
this.msg = e.msg || 'error'
this.isSpin = false
})
},
mounted () {
},
components: { mNoData }
}
</script>

122
escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/processStateCount.vue

@ -0,0 +1,122 @@
<template>
<div class="process-state-count-model">
<template v-show="!msg">
<div class="data-area" v-spin="isSpin" style="height: 430px;">
<div class="col-md-7">
<div id="process-state-pie" style="height:260px;margin-top: 100px;"></div>
</div>
<div class="col-md-5">
<div class="table-small-model">
<table>
<tr>
<th width="40">{{$t('#')}}</th>
<th>{{$t('Number')}}</th>
<th>{{$t('State')}}</th>
</tr>
<tr v-for="(item,$index) in processStateList">
<td><span>{{$index+1}}</span></td>
<td><span><a href="javascript:" @click="id && _goProcess(item.key)" :class="id ?'links':''">{{item.value}}</a></span></td>
<td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
</tr>
</table>
</div>
</div>
</div>
</template>
<template v-show="msg">
<m-no-data :msg="msg" v-if="msg"></m-no-data>
</template>
</div>
</template>
<script>
import _ from 'lodash'
import { mapActions } from 'vuex'
import { pie } from './chartConfig'
import Chart from '~/@analysys/ana-charts'
import mNoData from '@/module/components/noData/noData'
import { stateType } from '@/conf/home/pages/projects/pages/_source/instanceConditions/common'
export default {
name: 'process-state-count',
data () {
return {
isSpin: true,
msg: '',
processStateList: []
}
},
props: {
searchParams: Object
},
methods: {
...mapActions('projects', ['getProcessStateCount']),
_goProcess (name) {
this.$router.push({
name: 'projects-instance-list',
query: {
stateType: _.find(stateType, ['label', name])['code'],
startDate: this.scheduleTime[0],
endDate: this.scheduleTime[1]
}
})
},
_handleProcessState (res) {
let data = res.data.taskCountDtos
this.processStateList = _.map(data, v => {
return {
key: _.find(stateType, ['code', v.taskStateType])['label'],
value: v.count
}
})
const myChart = Chart.pie('#process-state-pie', this.processStateList, { title: '' })
myChart.echart.setOption(pie)
//
if (this.id) {
myChart.echart.on('click', e => {
this._goProcess(e.data.name)
})
}
}
},
watch: {
'searchParams': {
deep: true,
immediate: true,
handler (o) {
this.isSpin = true
this.getProcessStateCount(o).then(res => {
this.processStateList = []
this._handleProcessState(res)
this.isSpin = false
}).catch(e => {
this.msg = e.msg || 'error'
this.isSpin = false
})
}
}
},
beforeCreate () {
},
created () {
},
beforeMount () {
},
mounted () {
},
beforeUpdate () {
},
updated () {
},
beforeDestroy () {
},
destroyed () {
},
computed: {},
components: { mNoData }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.process-state-count-model {
}
</style>

362
escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/projectChart.vue

@ -1,362 +0,0 @@
<template>
<div>
<template v-show="!isLoading">
<div class="perject-home-content" v-show="!msg">
<div class="time-model">
<x-datepicker
:panel-num="2"
placement="bottom-end"
@on-change="_datepicker"
:value="[searchParams.startDate,searchParams.endDate]"
type="daterange"
:placeholder="$t('Select date range')"
format="YYYY-MM-DD HH:mm:ss">
</x-datepicker>
</div>
<div class="row" >
<div class="col-md-6">
<div class="chart-title">
<span>{{$t('Task status statistics')}}</span>
</div>
<div class="row">
<div class="col-md-7">
<div id="task-status-pie" style="height:260px;margin-top: 100px;"></div>
</div>
<div class="col-md-5">
<div class="table-small-model">
<table>
<tr>
<th width="40">{{$t('#')}}</th>
<th>{{$t('Number')}}</th>
<th>{{$t('State')}}</th>
</tr>
<tr v-for="(item,$index) in taskCtatusList">
<td><span>{{$index+1}}</span></td>
<td>
<span>
<a href="javascript:" @click="id && _goTask(item.key)" :class="id ?'links':''">{{item.value}}</a>
</span>
</td>
<td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="chart-title">
<span>{{$t('Process Status Statistics')}}</span>
</div>
<div class="row">
<div class="col-md-7">
<div id="process-state-pie" style="height:260px;margin-top: 100px;"></div>
</div>
<div class="col-md-5">
<div class="table-small-model">
<table>
<tr>
<th width="40">{{$t('#')}}</th>
<th>{{$t('Number')}}</th>
<th>{{$t('State')}}</th>
</tr>
<tr v-for="(item,$index) in processStateList">
<td><span>{{$index+1}}</span></td>
<td><span><a href="javascript:" @click="id && _goProcess(item.key)" :class="id ?'links':''">{{item.value}}</a></span></td>
<td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="padding-top: 20px;">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div class="chart-title">
<span>队列统计</span>
</div>
<div class="row">
<div class="col-md-7">
<div id="queue-pie" style="height:260px;margin-top: 100px;"></div>
</div>
<div class="col-md-5">
<div class="table-small-model">
<table>
<tr>
<th width="40">{{$t('#')}}</th>
<th>等待执行任务</th>
<th>等待Kill任务</th>
</tr>
<tr v-for="(item,$index) in queueList">
<td><span>{{$index+1}}</span></td>
<td><span><a href="javascript:" >{{item.value}}</a></span></td>
<td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="chart-title" style="margin-bottom: 20px;margin-top: 30px">
<span>命令状态统计</span>
</div>
<div>
<div id="command-state-bar" style="height:500px"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="chart-title" style="margin-bottom: -20px;margin-top: 30px">
<span>{{$t('Process Definition Statistics')}}</span>
</div>
<div>
<div id="process-definition-bar" style="height:500px"></div>
</div>
</div>
</div>
</div>
<m-no-data :msg="msg" v-if="msg"></m-no-data>
</template>
<m-spin :is-spin="isLoading" :is-left="id ? true : false">
</m-spin>
</div>
</template>
<script>
import _ from 'lodash'
import dayjs from 'dayjs'
import { mapActions } from 'vuex'
import { pie, bar, simple } from './chartConfig'
import Chart from '~/@analysys/ana-charts'
import mSpin from '@/module/components/spin/spin'
import mNoData from '@/module/components/noData/noData'
import { stateType } from '@/conf/home/pages/projects/pages/_source/instanceConditions/common'
export default {
name: 'perject-chart',
data () {
return {
isLoading: true,
taskCtatusList: [],
processStateList: [],
defineUserList: [],
commandStateList: [],
queueList: [],
searchParams: {
projectId: this.id,
startDate: '',
endDate: ''
},
msg: ''
}
},
props: {
id: Number
},
methods: {
...mapActions('projects', ['getTaskCtatusCount', 'getProcessStateCount', 'getDefineUserCount', 'getCommandStateCount', 'getQueueCount']),
_datepicker (val) {
this.searchParams.startDate = val[0]
this.searchParams.endDate = val[1]
this._getData(false)
},
_goTask (name) {
this.$router.push({
name: 'task-instance',
query: {
stateType: _.find(stateType, ['label', name])['code'],
startDate: this.scheduleTime[0],
endDate: this.scheduleTime[1]
}
})
},
_goProcess (name) {
this.$router.push({
name: 'projects-instance-list',
query: {
stateType: _.find(stateType, ['label', name])['code'],
startDate: this.scheduleTime[0],
endDate: this.scheduleTime[1]
}
})
},
_handleTaskCtatus (res) {
let data = res.data.taskCountDtos
this.taskCtatusList = _.map(data, v => {
return {
key: _.find(stateType, ['code', v.taskStateType])['label'],
value: v.count,
type: 'type'
}
})
const myChart = Chart.pie('#task-status-pie', this.taskCtatusList, { title: '' })
myChart.echart.setOption(pie)
//
if (this.id) {
myChart.echart.on('click', e => {
this._goTask(e.data.name)
})
}
},
_handleProcessState (res) {
let data = res.data.taskCountDtos
this.processStateList = _.map(data, v => {
return {
key: _.find(stateType, ['code', v.taskStateType])['label'],
value: v.count
}
})
const myChart = Chart.pie('#process-state-pie', this.processStateList, { title: '' })
myChart.echart.setOption(pie)
//
if (this.id) {
myChart.echart.on('click', e => {
this._goProcess(e.data.name)
})
}
},
_handleDefineUser (res) {
let data = res.data.userList
this.defineUserList = _.map(data, v => {
return {
key: v.userName + ',' + v.userId + ',' + v.count,
value: v.count
}
})
const myChart = Chart.bar('#process-definition-bar', this.defineUserList, {})
myChart.echart.setOption(bar)
//
if (this.id) {
myChart.echart.on('click', e => {
this.$router.push({
name: 'projects-definition-list',
query: {
userId: e.name.split(',')[1]
}
})
})
}
},
_handleCommandState (res) {
let data = []
_.forEach(res.data, (v, i) => {
let key = _.keys(v)
if (key[0] === 'errorCount') {
data.push({ typeName: '错误指令数', key: v.commandState, value: v.errorCount })
}
})
_.forEach(res.data, (v, i) => {
let key = _.keys(v)
if (key[1] === 'normalCount') {
data.push({ typeName: '正常指令数', key: v.commandState, value: v.normalCount })
}
})
const myChart = Chart.bar('#command-state-bar', data, {
title: ''
})
myChart.echart.setOption(simple)
},
_handleQueue (res) {
_.forEach(res.data, (v, k) => this.queueList.push({
key: k === 'taskQueue' ? '等待执行任务' : '等待kill任务',
value: v
}))
const myChart = Chart.pie('#queue-pie', this.queueList, { title: '' })
myChart.echart.setOption(pie)
},
_getData (is = true) {
this.isLoading = true
let ioList = [
this.getTaskCtatusCount(this.searchParams),
this.getProcessStateCount(this.searchParams),
this.getCommandStateCount(this.searchParams),
this.getQueueCount(this.searchParams)
]
if (is) {
ioList.push(this.getDefineUserCount(_.pick(this.searchParams, ['projectId'])))
}
Promise.all(ioList).then(res => {
this._handleTaskCtatus(res[0])
this._handleProcessState(res[1])
this._handleCommandState(res[2])
this._handleQueue(res[3])
if (is) {
this._handleDefineUser(res[4])
}
setTimeout(() => {
this.isLoading = false
}, 800)
}).catch(e => {
this.msg = e.msg || 'error'
this.isLoading = false
})
}
},
watch: {
},
created () {
this.searchParams.startDate = dayjs().format('YYYY-MM-DD 00:00:00')
this.searchParams.endDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
// init get data
this._getData()
},
mounted () {
},
updated () {
},
beforeDestroy () {
},
destroyed () {
},
computed: {},
components: { mNoData, mSpin }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.perject-home-content {
padding: 10px 20px;
position: relative;
.time-model {
position: absolute;
right: 8px;
top: -40px;
.ans-input {
>input {
width: 344px;
}
}
}
.chart-title {
text-align: center;
height: 60px;
line-height: 60px;
span {
font-size: 22px;
color: #333;
font-weight: bold;
}
}
}
.table-small-model {
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
}
</style>

102
escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/queueCount.vue

@ -0,0 +1,102 @@
<template>
<div class="queue-count-model">
<template v-show="!msg">
<div class="data-area" v-spin="isSpin" style="height: 430px;">
<div class="col-md-7">
<div id="queue-pie" style="height:260px;margin-top: 100px;"></div>
</div>
<div class="col-md-5">
<div class="table-small-model">
<table>
<tr>
<th width="40">{{$t('#')}}</th>
<th>等待执行任务</th>
<th>等待Kill任务</th>
</tr>
<tr v-for="(item,$index) in queueList">
<td><span>{{$index+1}}</span></td>
<td><span><a href="javascript:" >{{item.value}}</a></span></td>
<td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
</tr>
</table>
</div>
</div>
</div>
</template>
<template v-show="msg">
<m-no-data :msg="msg" v-if="msg"></m-no-data>
</template>
</div>
</template>
<script>
import _ from 'lodash'
import { mapActions } from 'vuex'
import { pie } from './chartConfig'
import Chart from '~/@analysys/ana-charts'
import mNoData from '@/module/components/noData/noData'
export default {
name: 'queue-count',
data () {
return {
isSpin: true,
msg: '',
queueList: []
}
},
props: {
searchParams: Object
},
methods: {
...mapActions('projects', ['getQueueCount']),
_handleQueue (res) {
_.forEach(res.data, (v, k) => this.queueList.push({
key: k === 'taskQueue' ? '等待执行任务' : '等待kill任务',
value: v
}))
const myChart = Chart.pie('#queue-pie', this.queueList, { title: '' })
myChart.echart.setOption(pie)
}
},
watch: {
'searchParams': {
deep: true,
immediate: true,
handler (o) {
this.isSpin = true
this.getQueueCount(o).then(res => {
this.queueList = []
this._handleQueue(res)
this.isSpin = false
}).catch(e => {
this.msg = e.msg || 'error'
this.isSpin = false
})
}
}
},
beforeCreate () {
},
created () {
},
beforeMount () {
},
mounted () {
},
beforeUpdate () {
},
updated () {
},
beforeDestroy () {
},
destroyed () {
},
computed: {},
components: { mNoData }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.queue-count-model {
}
</style>

129
escheduler-ui/src/js/conf/home/pages/projects/pages/index/_source/taskCtatusCount.vue

@ -0,0 +1,129 @@
<template>
<div class="task-ctatus-count-model">
<template v-show="!msg">
<div class="data-area" v-spin="isSpin" style="height: 430px;">
<div class="col-md-7">
<div id="task-status-pie" style="height:260px;margin-top: 100px;"></div>
</div>
<div class="col-md-5">
<div class="table-small-model">
<table>
<tr>
<th width="40">{{$t('#')}}</th>
<th>{{$t('Number')}}</th>
<th>{{$t('State')}}</th>
</tr>
<tr v-for="(item,$index) in taskCtatusList">
<td><span>{{$index+1}}</span></td>
<td>
<span>
<a href="javascript:" @click="id && _goTask(item.key)" :class="id ?'links':''">{{item.value}}</a>
</span>
</td>
<td><span class="ellipsis" style="width: 98%;" :title="item.key">{{item.key}}</span></td>
</tr>
</table>
</div>
</div>
</div>
</template>
<template v-show="msg">
<m-no-data :msg="msg" v-if="msg"></m-no-data>
</template>
</div>
</template>
<script>
import _ from 'lodash'
import { mapActions } from 'vuex'
import { pie } from './chartConfig'
import Chart from '~/@analysys/ana-charts'
import mNoData from '@/module/components/noData/noData'
import { stateType } from '@/conf/home/pages/projects/pages/_source/instanceConditions/common'
export default {
name: 'task-ctatus-count',
data () {
return {
isSpin: true,
msg: '',
taskCtatusList: []
}
},
props: {
searchParams: Object
},
methods: {
...mapActions('projects', ['getTaskCtatusCount']),
_goTask (name) {
this.$router.push({
name: 'task-instance',
query: {
stateType: _.find(stateType, ['label', name])['code'],
startDate: this.scheduleTime[0],
endDate: this.scheduleTime[1]
}
})
},
_handleTaskCtatus (res) {
let data = res.data.taskCountDtos
this.taskCtatusList = _.map(data, v => {
return {
key: _.find(stateType, ['code', v.taskStateType])['label'],
value: v.count,
type: 'type'
}
})
const myChart = Chart.pie('#task-status-pie', this.taskCtatusList, { title: '' })
myChart.echart.setOption(pie)
//
if (this.id) {
myChart.echart.on('click', e => {
this._goTask(e.data.name)
})
}
}
},
watch: {
'searchParams': {
deep: true,
immediate: true,
handler (o) {
this.isSpin = true
this.getTaskCtatusCount(o).then(res => {
this.taskCtatusList = []
this._handleTaskCtatus(res)
this.isSpin = false
}).catch(e => {
this.msg = e.msg || 'error'
this.isSpin = false
})
}
}
},
beforeCreate () {
},
created () {
},
beforeMount () {
},
mounted () {
},
beforeUpdate () {
},
updated () {
},
beforeDestroy () {
},
destroyed () {
},
computed: {},
components: { mNoData }
}
</script>
<style lang="scss" rel="stylesheet/scss">
.task-ctatus-count-model {
}
</style>

141
escheduler-ui/src/js/conf/home/pages/projects/pages/index/index.vue

@ -1,12 +1,84 @@
<template> <template>
<m-list-construction :title="$t('Project Home')"> <m-list-construction :title="$t('Project Home')">
<template slot="content"> <template slot="content">
<m-project-chart :id="id"></m-project-chart> <div class="perject-home-content">
<div class="time-model">
<x-datepicker
:panel-num="2"
placement="bottom-end"
@on-change="_datepicker"
:value="[searchParams.startDate,searchParams.endDate]"
type="daterange"
:placeholder="$t('Select date range')"
format="YYYY-MM-DD HH:mm:ss">
</x-datepicker>
</div>
<div class="row" >
<div class="col-md-6">
<div class="chart-title">
<span>{{$t('Task status statistics')}}</span>
</div>
<div class="row">
<m-task-ctatus-count :search-params="searchParams">
</m-task-ctatus-count>
</div>
</div>
<div class="col-md-6">
<div class="chart-title">
<span>{{$t('Process Status Statistics')}}</span>
</div>
<div class="row">
<m-process-state-count :search-params="searchParams">
</m-process-state-count>
</div>
</div>
</div>
<div class="row" style="padding-top: 20px;">
<div class="col-md-6">
</div>
<div class="col-md-6">
<div class="chart-title">
<span>队列统计</span>
</div>
<div class="row">
<m-queue-count :search-params="searchParams">
</m-queue-count>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="chart-title" style="margin-bottom: 20px;margin-top: 30px">
<span>命令状态统计</span>
</div>
<div>
<m-command-state-count :search-params="searchParams">
</m-command-state-count>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="chart-title" style="margin-bottom: -20px;margin-top: 30px">
<span>{{$t('Process Definition Statistics')}}</span>
</div>
<div>
<m-define-user-count :project-id="searchParams.projectId">
</m-define-user-count>
</div>
</div>
</div>
</div>
</template> </template>
</m-list-construction> </m-list-construction>
</template> </template>
<script> <script>
import mProjectChart from './_source/projectChart' import dayjs from 'dayjs'
import mDefineUserCount from './_source/defineUserCount'
import mCommandStateCount from './_source/CommandStateCount'
import mTaskCtatusCount from './_source/taskCtatusCount'
import mProcessStateCount from './_source/processStateCount'
import mQueueCount from './_source/queueCount'
import localStore from '@/module/util/localStorage' import localStore from '@/module/util/localStorage'
import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu' import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu'
import mListConstruction from '@/module/components/listConstruction/listConstruction' import mListConstruction from '@/module/components/listConstruction/listConstruction'
@ -15,9 +87,70 @@
name: 'projects-index-index', name: 'projects-index-index',
data () { data () {
return { return {
id: localStore.getItem('projectId') || null searchParams: {
projectId: null,
startDate: '',
endDate: ''
}
}
},
props: {
id: Number
},
methods: {
_datepicker (val) {
this.searchParams.startDate = val[0]
this.searchParams.endDate = val[1]
} }
}, },
components: { mSecondaryMenu, mListConstruction, mProjectChart } created () {
this.searchParams.projectId = this.id === 0 ? 0 : localStore.getItem('projectId')
this.searchParams.startDate = dayjs().format('YYYY-MM-DD 00:00:00')
this.searchParams.endDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
},
components: {
mSecondaryMenu,
mListConstruction,
mDefineUserCount,
mCommandStateCount,
mTaskCtatusCount,
mProcessStateCount,
mQueueCount
}
} }
</script> </script>
<style lang="scss" rel="stylesheet/scss">
.perject-home-content {
padding: 10px 20px;
position: relative;
.time-model {
position: absolute;
right: 8px;
top: -40px;
.ans-input {
>input {
width: 344px;
}
}
}
.chart-title {
text-align: center;
height: 60px;
line-height: 60px;
span {
font-size: 22px;
color: #333;
font-weight: bold;
}
}
}
.table-small-model {
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
}
</style>

29
escheduler-ui/src/js/conf/home/pages/security/pages/token/index.vue

@ -5,35 +5,6 @@
import mToken from '@/conf/home/pages/user/pages/token' import mToken from '@/conf/home/pages/user/pages/token'
export default { export default {
name: 'token-index', name: 'token-index',
data () {
return {}
},
props: {},
methods: {},
watch: {},
beforeCreate () {
},
created () {
},
beforeMount () {
},
mounted () {
},
beforeUpdate () {
},
updated () {
},
beforeDestroy () {
},
destroyed () {
},
computed: {},
components: { mToken } components: { mToken }
} }
</script> </script>
<style lang="scss" rel="stylesheet/scss">
.index-model {
}
</style>

6
escheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/createWorker.vue

@ -2,7 +2,7 @@
<m-popup <m-popup
ref="popup" ref="popup"
:ok-text="item ? $t('Edit') : $t('Submit')" :ok-text="item ? $t('Edit') : $t('Submit')"
:nameText="item ? '编辑Worker分组' : '创建Worker分组'" :nameText="item ? $t('Edit worker group') : $t('Create worker group')"
@ok="_ok"> @ok="_ok">
<template slot="content"> <template slot="content">
<div class="create-worker-model"> <div class="create-worker-model">
@ -23,10 +23,10 @@
:autosize="{ minRows: 4, maxRows: 6 }" :autosize="{ minRows: 4, maxRows: 6 }"
type="textarea" type="textarea"
v-model="ipList" v-model="ipList"
:placeholder="'请输入IP地址多个用逗号隔开'"> :placeholder="$t('Please enter the IP address separated by commas')">
</x-input> </x-input>
<div class="ipt-tip"> <div class="ipt-tip">
<span>注意多个IP地址已逗号分割</span> <span>{{$t('Note: Multiple IP addresses have been comma separated')}}</span>
</div> </div>
</template> </template>
</m-list-box-f> </m-list-box-f>

4
escheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/_source/list.vue

@ -7,7 +7,7 @@
<span>{{$t('#')}}</span> <span>{{$t('#')}}</span>
</th> </th>
<th> <th>
<span>分组名称</span> <span>{{$t('Group')}}</span>
</th> </th>
<th> <th>
<span>IPList</span> <span>IPList</span>
@ -62,8 +62,6 @@
</div> </div>
</template> </template>
<script> <script>
// import _ from 'lodash'
// import i18n from '@/module/i18n'
import { mapActions } from 'vuex' import { mapActions } from 'vuex'
export default { export default {

4
escheduler-ui/src/js/conf/home/pages/security/pages/workerGroups/index.vue

@ -1,9 +1,9 @@
<template> <template>
<m-list-construction :title="'worker分组管理'"> <m-list-construction :title="$t('Worker group manage')">
<template slot="conditions"> <template slot="conditions">
<m-conditions @on-conditions="_onConditions"> <m-conditions @on-conditions="_onConditions">
<template slot="button-group"> <template slot="button-group">
<x-button type="ghost" size="small" @click="_create('')">创建worker分组</x-button> <x-button type="ghost" size="small" @click="_create('')">{{$t('Create worker group')}}</x-button>
</template> </template>
</m-conditions> </m-conditions>
</template> </template>

12
escheduler-ui/src/js/conf/home/pages/user/pages/token/_source/createToken.vue

@ -2,12 +2,12 @@
<m-popup <m-popup
ref="popup" ref="popup"
:ok-text="item ? $t('Edit') : $t('Submit')" :ok-text="item ? $t('Edit') : $t('Submit')"
:nameText="item ? '编辑令牌' : '创建令牌'" :nameText="item ? $t('Edit token') : $t('Create token')"
@ok="_ok"> @ok="_ok">
<template slot="content"> <template slot="content">
<div class="create-token-model"> <div class="create-token-model">
<m-list-box-f> <m-list-box-f>
<template slot="name"><b>*</b>失效时间</template> <template slot="name"><b>*</b>{{$t('Failure time')}}</template>
<template slot="content"> <template slot="content">
<x-datepicker <x-datepicker
:disabled-date="disabledDate" :disabled-date="disabledDate"
@ -19,7 +19,7 @@
</template> </template>
</m-list-box-f> </m-list-box-f>
<m-list-box-f v-if="auth"> <m-list-box-f v-if="auth">
<template slot="name"><b>*</b>用户</template> <template slot="name"><b>*</b>{{$t('User')}}</template>
<template slot="content"> <template slot="content">
<x-select v-model="userId" @on-change="_onChange"> <x-select v-model="userId" @on-change="_onChange">
<x-option <x-option
@ -36,12 +36,12 @@
<template slot="content"> <template slot="content">
<x-input <x-input
readonly readonly
style="width: 330px;" style="width: 306px;"
type="input" type="input"
v-model="token" v-model="token"
placeholder="请输入Token"> :placeholder="$t('Please enter token')">
</x-input> </x-input>
<x-button type="ghost" @click="_generateToken" :loading="tokenLoading">生成Token</x-button> <x-button type="ghost" @click="_generateToken" :loading="tokenLoading">{{$t('Generate token')}}</x-button>
</template> </template>
</m-list-box-f> </m-list-box-f>
</div> </div>

12
escheduler-ui/src/js/conf/home/pages/user/pages/token/_source/list.vue

@ -4,25 +4,25 @@
<table> <table>
<tr> <tr>
<th> <th>
<span>编号</span> <span>{{$t('#')}}</span>
</th> </th>
<th> <th>
<span>用户</span> <span>{{$t('User')}}</span>
</th> </th>
<th> <th>
<span>Token</span> <span>Token</span>
</th> </th>
<th> <th>
<span>开始时间</span> <span>{{$t('Start Time')}}</span>
</th> </th>
<th> <th>
<span>失效时间</span> <span>{{$t('Failure time')}}</span>
</th> </th>
<th> <th>
<span>创建时间</span> <span>{{$t('Create Time')}}</span>
</th> </th>
<th> <th>
<span>更新时间</span> <span>{{$t('Update Time')}}</span>
</th> </th>
<th width="70"> <th width="70">
<span>{{$t('Operation')}}</span> <span>{{$t('Operation')}}</span>

4
escheduler-ui/src/js/conf/home/pages/user/pages/token/index.vue

@ -1,9 +1,9 @@
<template> <template>
<m-list-construction :title="'令牌管理'"> <m-list-construction :title="$t('Token manage')">
<template slot="conditions"> <template slot="conditions">
<m-conditions @on-conditions="_onConditions"> <m-conditions @on-conditions="_onConditions">
<template slot="button-group"> <template slot="button-group">
<x-button type="ghost" size="small" @click="_create('')">创建令牌</x-button> <x-button type="ghost" size="small" @click="_create('')">{{$t('Create token')}}</x-button>
</template> </template>
</m-conditions> </m-conditions>
</template> </template>

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

@ -323,7 +323,7 @@ const router = new Router({
name: 'worker-groups-manage', name: 'worker-groups-manage',
component: resolve => require(['../pages/security/pages/workerGroups/index'], resolve), component: resolve => require(['../pages/security/pages/workerGroups/index'], resolve),
meta: { meta: {
title: `workerGroups` title: `${i18n.$t('Worker group manage')}`
} }
}, },
{ {
@ -331,7 +331,7 @@ const router = new Router({
name: 'token-manage', name: 'token-manage',
component: resolve => require(['../pages/security/pages/token/index'], resolve), component: resolve => require(['../pages/security/pages/token/index'], resolve),
meta: { meta: {
title: `token` title: `${i18n.$t('Token manage')}`
} }
} }
] ]
@ -368,7 +368,7 @@ const router = new Router({
name: 'token', name: 'token',
component: resolve => require(['../pages/user/pages/token/index'], resolve), component: resolve => require(['../pages/user/pages/token/index'], resolve),
meta: { meta: {
title: `令牌管理` title: `${i18n.$t('Token manage')}`
} }
} }
] ]
@ -405,7 +405,7 @@ const router = new Router({
name: 'servers-alert', name: 'servers-alert',
component: resolve => require(['../pages/monitor/pages/servers/alert'], resolve), component: resolve => require(['../pages/monitor/pages/servers/alert'], resolve),
meta: { meta: {
title: `alert` title: `Alert`
} }
}, },
{ {
@ -413,7 +413,7 @@ const router = new Router({
name: 'servers-rpcserver', name: 'servers-rpcserver',
component: resolve => require(['../pages/monitor/pages/servers/rpcserver'], resolve), component: resolve => require(['../pages/monitor/pages/servers/rpcserver'], resolve),
meta: { meta: {
title: `rpcserver` title: `Rpcserver`
} }
}, },
{ {
@ -421,7 +421,7 @@ const router = new Router({
name: 'servers-zookeeper', name: 'servers-zookeeper',
component: resolve => require(['../pages/monitor/pages/servers/zookeeper'], resolve), component: resolve => require(['../pages/monitor/pages/servers/zookeeper'], resolve),
meta: { meta: {
title: `zookeeper` title: `Zookeeper`
} }
}, },
{ {
@ -429,7 +429,7 @@ const router = new Router({
name: 'servers-apiserver', name: 'servers-apiserver',
component: resolve => require(['../pages/monitor/pages/servers/apiserver'], resolve), component: resolve => require(['../pages/monitor/pages/servers/apiserver'], resolve),
meta: { meta: {
title: `apiserver` title: `Apiserver`
} }
}, },
{ {
@ -437,7 +437,7 @@ const router = new Router({
name: 'servers-mysql', name: 'servers-mysql',
component: resolve => require(['../pages/monitor/pages/servers/mysql'], resolve), component: resolve => require(['../pages/monitor/pages/servers/mysql'], resolve),
meta: { meta: {
title: `mysql` title: `Mysql`
} }
} }
] ]

2
escheduler-ui/src/js/module/components/nav/nav.vue

@ -35,7 +35,7 @@
<div class="clearfix list"> <div class="clearfix list">
<div class="nav-links"> <div class="nav-links">
<router-link :to="{ path: '/monitor'}" tag="a" active-class="active"> <router-link :to="{ path: '/monitor'}" tag="a" active-class="active">
<span><i class="iconfont">&#xe65f;</i>监控中心</span><b></b> <span><i class="iconfont">&#xe65f;</i>{{$t('Monitor')}}</span><b></b>
</router-link> </router-link>
</div> </div>
</div> </div>

6
escheduler-ui/src/js/module/components/secondaryMenu/_source/menu.js

@ -110,7 +110,7 @@ let menu = {
children: [] children: []
}, },
{ {
name: `worker分组管理`, name: `${i18n.$t('Worker group manage')}`,
id: 4, id: 4,
path: 'worker-groups-manage', path: 'worker-groups-manage',
isOpen: true, isOpen: true,
@ -119,7 +119,7 @@ let menu = {
children: [] children: []
}, },
{ {
name: `令牌管理`, name: `${i18n.$t('Token manage')}`,
id: 2, id: 2,
path: 'token-manage', path: 'token-manage',
isOpen: true, isOpen: true,
@ -181,7 +181,7 @@ let menu = {
disabled: true disabled: true
}, },
{ {
name: `令牌管理`, name: `${i18n.$t('Token manage')}`,
id: 2, id: 2,
path: 'token', path: 'token',
isOpen: true, isOpen: true,

19
escheduler-ui/src/js/module/i18n/locale/en_US.js

@ -151,7 +151,7 @@ export default {
'Please enter name': 'Please enter name', 'Please enter name': 'Please enter name',
'Owned Users': 'Owned Users', 'Owned Users': 'Owned Users',
'Process Pid': 'Process Pid', 'Process Pid': 'Process Pid',
'zk registration directory': 'zk registration directory', 'Zk registration directory': 'Zk registration directory',
'cpuUsage': 'cpuUsage', 'cpuUsage': 'cpuUsage',
'memoryUsage': 'memoryUsage', 'memoryUsage': 'memoryUsage',
'Last heartbeat time': 'Last heartbeat time', 'Last heartbeat time': 'Last heartbeat time',
@ -411,5 +411,20 @@ export default {
'History task record': 'History task record', 'History task record': 'History task record',
'Please go online': 'Please go online', 'Please go online': 'Please go online',
'Queue value': 'Queue value', 'Queue value': 'Queue value',
'Please enter queue value': 'Please enter queue value' 'Please enter queue value': 'Please enter queue value',
'Worker group manage': 'Worker group manage',
'Create worker group': 'Create worker group',
'Edit worker group': 'Edit worker group',
'Token manage': 'Token manage',
'Create token': 'Create token',
'Edit token': 'Edit token',
'Please enter the IP address separated by commas': 'Please enter the IP address separated by commas',
'Note: Multiple IP addresses have been comma separated': 'Note: Multiple IP addresses have been comma separated',
'Failure time': 'Failure time',
'User': 'User',
'Please enter token': 'Please enter token',
'Generate token': 'Generate token',
'Monitor': 'Monitor',
'Group': 'Group'
} }

19
escheduler-ui/src/js/module/i18n/locale/zh_CN.js

@ -151,7 +151,7 @@ export default {
'Please enter name': '请输入名称', 'Please enter name': '请输入名称',
'Owned Users': '所属用户', 'Owned Users': '所属用户',
'Process Pid': '进程pid', 'Process Pid': '进程pid',
'zk registration directory': 'zk注册目录', 'Zk registration directory': 'zk注册目录',
'cpuUsage': 'cpuUsage', 'cpuUsage': 'cpuUsage',
'memoryUsage': 'memoryUsage', 'memoryUsage': 'memoryUsage',
'Last heartbeat time': '最后心跳时间', 'Last heartbeat time': '最后心跳时间',
@ -411,5 +411,20 @@ export default {
'History task record': '历史任务记录', 'History task record': '历史任务记录',
'Please go online': '不要忘记上线', 'Please go online': '不要忘记上线',
'Queue value': '队列值', 'Queue value': '队列值',
'Please enter queue value': '请输入队列值' 'Please enter queue value': '请输入队列值',
'Worker group manage': 'Worker分组管理',
'Create worker group': '创建Worker分组',
'Edit worker group': '编辑Worker分组',
'Token manage': '令牌管理',
'Create token': '创建令牌',
'Edit token': '编辑令牌',
'Please enter the IP address separated by commas': '请输入IP地址多个用逗号隔开',
'Note: Multiple IP addresses have been comma separated': '注意多个IP地址已逗号分割',
'Failure time': '失效时间',
'User': '用户',
'Please enter token': '请输入令牌',
'Generate token': '生成令牌',
'Monitor': '监控中心',
'Group': '分组'
} }

Loading…
Cancel
Save