Skip to content

Commit 786ed91

Browse files
committed
完成运维中心周期图标
1 parent 637ca1c commit 786ed91

File tree

2 files changed

+105
-6
lines changed

2 files changed

+105
-6
lines changed

web/src/apps/workflows/module/dispatch/dashboard/index.vue

Lines changed: 101 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</Select>
1212
</div>-->
1313
<div class="row" >
14-
<div class="col-md-6 dashboard-module">
14+
<div class="col-md-6 dashboard-module" style="margin-right: 10px">
1515
<div class="chart-title">
1616
<span>{{$t('message.scheduler.processStatusStatistics')}}</span>
1717
<div class="time-model">
@@ -35,11 +35,24 @@
3535
<Spin size="large" fix v-if="loading"></Spin>
3636
</div>
3737
</div>
38+
39+
<div class="col-md-6 dashboard-module">
40+
<div class="chart-title">
41+
<span>周期实例完成情况</span>
42+
<div class="day-change">
43+
<div :class="stateSelected === 1?'selected': ''" @click="changeState(1)">运行成功</div>
44+
<div :class="stateSelected === 2?'selected': ''" @click="changeState(2)">运行失败</div>
45+
</div>
46+
</div>
47+
<div class="row dashboard-module-content">
48+
<div id="areaChart" style="height: 430px"></div>
49+
<Spin size="large" fix v-if="loading"></Spin>
50+
</div>
51+
</div>
3852
</div>
3953
<div class="row">
4054
<div class="col-md-12 dashboard-module">
4155
<div class="chart-title">
42-
<!--<span>{{$t('message.scheduler.taskStatusStatistics')}}</span>-->
4356
<span>工作流实例与成功率统计</span>
4457
<div class="day-change">
4558
<div :class="daySelected === 1?'selected': ''" @click="changeDay(1)">今日</div>
@@ -96,14 +109,30 @@ export default {
96109
projectList: [],
97110
98111
mixedBarLineChart: null,
112+
areaChart: null,
99113
daySelected: 1,
114+
stateSelected: 1,
100115
loading: false
101116
}
102117
},
103118
props: {
104119
105120
},
106121
methods: {
122+
changeState(state) {
123+
if (state) {
124+
this.stateSelected = state
125+
}
126+
let curState
127+
if (state == 1) {
128+
curState = 'SUCCESS'
129+
} else if (state == 2) {
130+
curState = 'FAILURE'
131+
}
132+
this.getAreaData((areaData) => {
133+
this.buildAreaChart(areaData)
134+
}, curState)
135+
},
107136
changeDay(day){
108137
if (day)
109138
this.daySelected = day
@@ -216,6 +245,72 @@ export default {
216245
})
217246
})
218247
},
248+
getAreaData(cb, stateType) {
249+
function getFormatDateString(dd) {
250+
let tYear = dd.getFullYear(),
251+
tMonth = dd.getMonth() + 1 > 9 ? dd.getMonth() + 1 : '0' + (dd.getMonth() + 1),
252+
tDay = dd.getDate()
253+
return `${tYear}-${tMonth}-${tDay}`
254+
}
255+
if (!this.projectName) return
256+
257+
let dd = new Date(),
258+
dd1 = new Date()
259+
dd1.setDate(dd.getDate() - 1)
260+
let dateString1 = getFormatDateString(dd),
261+
dateString2 = getFormatDateString(dd1)
262+
util.checkToken(() => {
263+
api.fetch(`dolphinscheduler/projects/${this.workspaceName}-${this.projectName}/instance/statistics`, {
264+
dates: dateString1 + ',' + dateString2,
265+
step: 2,
266+
stateType: stateType || 'SUCCESS'
267+
}, 'get').then((data) => {
268+
cb && cb([data[dateString2], data[dateString1]])
269+
})
270+
})
271+
},
272+
buildAreaChart(data) {
273+
this.areaChart = echarts.init(document.getElementById('areaChart'))
274+
let option = {
275+
tooltip: {
276+
trigger: 'axis',
277+
axisPointer: {
278+
type: 'cross',
279+
crossStyle: {
280+
color: '#999'
281+
}
282+
}
283+
},
284+
legend: {
285+
data: ['昨日', '今日']
286+
},
287+
xAxis: {
288+
type: 'category',
289+
boundaryGap: false,
290+
data: ['2','4', '6', '8', '10','12','14','16','18','20','22','24']
291+
},
292+
yAxis: {
293+
type: 'value'
294+
},
295+
series: [
296+
{
297+
name: '昨日',
298+
data: data[0],
299+
type: 'line',
300+
areaStyle: {},
301+
color: '#87AEFA'
302+
},
303+
{
304+
name: '今日',
305+
data: data[1],
306+
type: 'line',
307+
areaStyle: {},
308+
color: '#5AD8A6'
309+
}
310+
]
311+
};
312+
this.areaChart.setOption(option)
313+
},
219314
buildMixedBarLineChart(data) {
220315
this.mixedBarLineChart = echarts.init(document.getElementById('mixedBarLine'))
221316
@@ -311,6 +406,7 @@ export default {
311406
})
312407
this.$nextTick(() => {
313408
this.changeDay()
409+
this.changeState()
314410
})
315411
})
316412
})
@@ -375,6 +471,9 @@ export default {
375471
}
376472
377473
.dashboard-module{
474+
&.col-md-6 {
475+
width: calc(50% - 10px);
476+
}
378477
background: #FFFFFF;
379478
border: 1px solid #DEE4EC;
380479
border-radius: 2px;

web/vue.config.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -240,19 +240,19 @@ module.exports = {
240240
devServer: {
241241
proxy: {
242242
"/api": {
243-
target: "http://***REMOVED***:8088",
243+
//target: "http://***REMOVED***:8088",
244244
//target: 'http://***REMOVED***:9202', //yichao
245245
// target: "http://***REMOVED***:9202", //jiawei
246-
// target: "http://luban.ctyun.cn:8088",
246+
target: "http://luban.ctyun.cn:8088",
247247
//target: "http://devluban.ctyun.cn:8088",
248248
changeOrigin: true,
249249
pathRewrite: {
250250
"^/api": "/api"
251251
}
252252
},
253253
"/guideAssets": {
254-
target: "http://***REMOVED***:8088", // 产品文档后台上传的图片代理
255-
// target: "http://luban.ctyun.cn:8088",
254+
//target: "http://***REMOVED***:8088", // 产品文档后台上传的图片代理
255+
target: "http://luban.ctyun.cn:8088",
256256
//target: "http://devluban.ctyun.cn:8088",
257257
changeOrigin: true,
258258
pathRewrite: {

0 commit comments

Comments
 (0)