|
11 | 11 | </Select>
|
12 | 12 | </div>-->
|
13 | 13 | <div class="row" >
|
14 |
| - <div class="col-md-6 dashboard-module"> |
| 14 | + <div class="col-md-6 dashboard-module" style="margin-right: 10px"> |
15 | 15 | <div class="chart-title">
|
16 | 16 | <span>{{$t('message.scheduler.processStatusStatistics')}}</span>
|
17 | 17 | <div class="time-model">
|
|
35 | 35 | <Spin size="large" fix v-if="loading"></Spin>
|
36 | 36 | </div>
|
37 | 37 | </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> |
38 | 52 | </div>
|
39 | 53 | <div class="row">
|
40 | 54 | <div class="col-md-12 dashboard-module">
|
41 | 55 | <div class="chart-title">
|
42 |
| - <!--<span>{{$t('message.scheduler.taskStatusStatistics')}}</span>--> |
43 | 56 | <span>工作流实例与成功率统计</span>
|
44 | 57 | <div class="day-change">
|
45 | 58 | <div :class="daySelected === 1?'selected': ''" @click="changeDay(1)">今日</div>
|
@@ -96,14 +109,30 @@ export default {
|
96 | 109 | projectList: [],
|
97 | 110 |
|
98 | 111 | mixedBarLineChart: null,
|
| 112 | + areaChart: null, |
99 | 113 | daySelected: 1,
|
| 114 | + stateSelected: 1, |
100 | 115 | loading: false
|
101 | 116 | }
|
102 | 117 | },
|
103 | 118 | props: {
|
104 | 119 |
|
105 | 120 | },
|
106 | 121 | 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 | + }, |
107 | 136 | changeDay(day){
|
108 | 137 | if (day)
|
109 | 138 | this.daySelected = day
|
@@ -216,6 +245,72 @@ export default {
|
216 | 245 | })
|
217 | 246 | })
|
218 | 247 | },
|
| 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 | + }, |
219 | 314 | buildMixedBarLineChart(data) {
|
220 | 315 | this.mixedBarLineChart = echarts.init(document.getElementById('mixedBarLine'))
|
221 | 316 |
|
@@ -311,6 +406,7 @@ export default {
|
311 | 406 | })
|
312 | 407 | this.$nextTick(() => {
|
313 | 408 | this.changeDay()
|
| 409 | + this.changeState() |
314 | 410 | })
|
315 | 411 | })
|
316 | 412 | })
|
@@ -375,6 +471,9 @@ export default {
|
375 | 471 | }
|
376 | 472 |
|
377 | 473 | .dashboard-module{
|
| 474 | + &.col-md-6 { |
| 475 | + width: calc(50% - 10px); |
| 476 | + } |
378 | 477 | background: #FFFFFF;
|
379 | 478 | border: 1px solid #DEE4EC;
|
380 | 479 | border-radius: 2px;
|
|
0 commit comments