dashboard增加耗时排行

Author: mingfengwang

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

@@ -51,28 +51,57 @@
           </div>
         </div>
         <div class="row">
-          <div class="col-md-12 dashboard-module">
+          <div class="col-md-6 dashboard-module" style="margin-right: 10px">
             <div class="chart-title">
-              <span>工作流实例与成功率统计</span>
-              <div class="day-change">
-                <div :class="daySelected === 1?'selected': ''" @click="changeDay(1)">今日</div>
-                <div :class="daySelected === 2?'selected': ''" @click="changeDay(2)">昨日</div>
-              </div>
+              <span>{{$t('message.scheduler.processDefinitionStatistics')}}</span>
             </div>
             <div class="dashboard-module-content">
-              <div id="mixedBarLine" style="height: 500px"></div>
+              <m-define-user-count :project-id="searchParams.projectId" @goToList="goToList">
+              </m-define-user-count>
+              <Spin size="large" fix v-if="loading"></Spin>
+            </div>
+          </div>
+
+          <div class="col-md-6 dashboard-module">
+            <div class="chart-title">
+              <span>流程耗时排名</span>
+              <div class="time-model">
+                <template>
+                  <Date-picker
+                    style="width: 430px"
+                    v-model="consumptionTime"
+                    type="datetimerange"
+                    @on-change="changeTime"
+                    range-separator="-"
+                    format="yyyy-MM-dd HH:mm:ss">
+                  </Date-picker>
+                </template>
+              </div>
+              <!--<div class="day-change">-->
+                <!--<div :class="stateSelected === 1?'selected': ''" @click="changeState(1)">运行成功</div>-->
+                <!--<div :class="stateSelected === 2?'selected': ''" @click="changeState(2)">运行失败</div>-->
+              <!--</div>-->
+            </div>
+            <div class="row dashboard-module-content">
+              <Table :columns="columns" :data="consumptionList" style="height: 430px;" class="consumption-table">
+                <!--<template slot-scope="{ row }" slot="operation">-->
+                <!--</template>-->
+              </Table>
+              <Spin size="large" fix v-if="loading"></Spin>
             </div>
           </div>
         </div>
         <div class="row">
           <div class="col-md-12 dashboard-module">
             <div class="chart-title">
-              <span>{{$t('message.scheduler.processDefinitionStatistics')}}</span>
+              <span>工作流实例与成功率统计</span>
+              <div class="day-change">
+                <div :class="daySelected === 1?'selected': ''" @click="changeDay(1)">今日</div>
+                <div :class="daySelected === 2?'selected': ''" @click="changeDay(2)">昨日</div>
+              </div>
             </div>
             <div class="dashboard-module-content">
-              <m-define-user-count :project-id="searchParams.projectId" @goToList="goToList">
-              </m-define-user-count>
-              <Spin size="large" fix v-if="loading"></Spin>
+              <div id="mixedBarLine" style="height: 500px"></div>
             </div>
           </div>
         </div>
@@ -90,6 +119,7 @@ import mProcessStateCount from './source/processStateCount'
 import mListConstruction from '../components/listConstruction/listConstruction'
 import { GetWorkspaceData } from '@/common/service/apiCommonMethod.js'
 import {formatDate} from '../convertor'
+import { tasksState } from '../config'
 
 import echarts from 'echarts'
 
@@ -112,13 +142,33 @@ export default {
       areaChart: null,
       daySelected: 1,
       stateSelected: 1,
-      loading: false
+      loading: false,
+
+      consumptionList: [],
+      consumptionTime: [],
+      consumptionParams: {}
     }
   },
   props: {
 
   },
   methods: {
+    getConsumptionData() {
+      if (!this.projectName) return
+      api.fetch(`dolphinscheduler/projects/${this.workspaceName}-${this.projectName}/instance/list-order-by-duration`, {
+        pageSize: 10,
+        pageNo: 1,
+        startDate: this.consumptionParams.startDate  || '',
+        endDate: this.consumptionParams.endDate || '',
+      }, 'get').then((res) => {
+        this.consumptionList = res.totalList
+      })
+    },
+    changeTime(val) {
+      this.consumptionParams.startDate = val[0]
+      this.consumptionParams.endDate = val[1]
+      this.getConsumptionData()
+    },
     changeState(state) {
       if (state) {
         this.stateSelected = state
@@ -394,6 +444,29 @@ export default {
         ]
       };
       this.mixedBarLineChart.setOption(option)
+    },
+    showDuration(seconds) {
+      let remain = seconds,
+        dayUnit = 60*60*24,
+        hourUnit = 60*60,
+        minuteUnit = 60,
+        str = ''
+      if (remain / dayUnit >= 1) {
+        str += `${parseInt(remain/dayUnit)}天`
+        remain = remain % dayUnit
+      }
+      if (remain / hourUnit >= 1) {
+        str += `${parseInt(remain/hourUnit)}小时`
+        remain = remain % hourUnit
+      }
+      if (remain / minuteUnit >= 1) {
+        str += `${parseInt(remain/minuteUnit)}分`
+        remain = remain % minuteUnit
+      }
+      if (remain >= 1) {
+        str += `${parseInt(remain)}秒`
+      }
+      return str
     }
   },
   created () {
@@ -410,6 +483,7 @@ export default {
         this.$nextTick(() => {
           this.changeDay()
           this.changeState()
+          this.getConsumptionData()
         })
       })
     })
@@ -420,6 +494,41 @@ export default {
     mDefineUserCount,
     mProcessStateCount,
     //mTaskStatusCount
+  },
+  computed: {
+    columns() {
+      return [
+        {
+          type: 'index',
+          width: 60,
+          align: 'center'
+        },
+        {
+          title: '实例名',
+          key: 'name',
+          //width: 240,
+          align: 'center',
+        },
+        {
+          title: this.$t('message.workflow.projectDetail.status'),
+          key: 'state',
+          align: 'center',
+          width: 80,
+          render: (h, scope) => {
+            return h('span', {}, tasksState[scope.row.state].desc);
+          },
+        },
+        {
+          title: '耗时',
+          key: 'duration',
+          width: 210,
+          align: 'center',
+          render: (h, scope) => {
+            return h('span', {}, this.showDuration(scope.row.duration))
+          },
+        }
+      ]
+    }
   }
 }
 </script>
@@ -451,6 +560,16 @@ export default {
         @include font-color($workspace-title-color, $dark-workspace-title-color);
       }
     }
+    .ivu-picker-panel-body {
+      span {
+        font-size: 12px;
+      }
+    }
+    .ivu-btn-primary {
+      >span {
+          color: #fff;
+       }
+    }
   }
   .table-small-model {
     padding: 0 10px;
@@ -503,4 +622,12 @@ export default {
       }
     }
   }
+  .consumption-table {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    .ivu-table {
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+  }
 </style>

web/src/apps/workflows/module/dispatch/dashboard/source/defineUserCount.vue

@@ -2,11 +2,11 @@
   <div class="define-user-count-model">
     <div v-if="msg">
       <div class="data-area">
-        <div id="process-definition-bar" style="height:500px"></div>
+        <div id="process-definition-bar" style="height:430px"></div>
       </div>
     </div>
     <div v-else>
-      <m-no-data :height="530"></m-no-data>
+      <m-no-data :height="430"></m-no-data>
     </div>
   </div>
 </template>

web/vue.config.js

@@ -269,8 +269,8 @@ module.exports = {
         }
       },
       "/dolphinscheduler": {
-        target: "http://***REMOVED***:12345",
-        //target: "https://dolphin.ctyun.cn:10002",
+        //target: "http://***REMOVED***:12345",
+        target: "https://dolphin.ctyun.cn:10002",
         changeOrigin: true,
         pathRewrite: {
           "^/dolphinscheduler": "/dolphinscheduler"