diff --git a/src/components/e-charts/multiple_circle.vue b/src/components/e-charts/multiple_circle.vue
index 9cc2f4597a8cb45bdd2426d3dc3ad876b6e5d9c5..59a8c6802d2c297d88494352f6df55a2efdf7bdf 100644
--- a/src/components/e-charts/multiple_circle.vue
+++ b/src/components/e-charts/multiple_circle.vue
@@ -88,7 +88,7 @@ export default {
       };
       var data = [];
       var total = 0;
-      var color = ["#274fee", "#f5ab4c", "#e15260", "#a9aec0", "#e56600"];
+      var color = this.color?this.color:["#274fee", "#f5ab4c", "#e15260", "#a9aec0", "#e56600"];
       var color2 = ["#ef9433", "#515fe7"];
       var legendarr = [];
       var temp2_data = 0;
diff --git a/src/pages/workbench/component-center/process-management/monitoring/index.vue b/src/pages/workbench/component-center/process-management/monitoring/index.vue
index 6172c2351c0855f58ee1f003008c6ad7a682889b..e29d6b2e5ed5914411b14e75adbfa827cba29520 100644
--- a/src/pages/workbench/component-center/process-management/monitoring/index.vue
+++ b/src/pages/workbench/component-center/process-management/monitoring/index.vue
@@ -10,8 +10,8 @@
               <div class="left_1">
                <div ref="left_1_l" class="left_1_l">
                   <img :src="require('@/assets/imgs/data_img_liucheng.gif')" class="left_1_img" />
-                  <p><span>流程总数</span> 35</p>
-                  <p><span>流程实例总数</span> 2,380</p>
+                  <p><span>流程总数</span> {{all_count}}</p>
+                  <p><span>流程实例总数</span> {{all_ex_count}}</p>
                 </div>
                 <single-circle ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></single-circle>
               </div>
@@ -25,7 +25,7 @@
               @changeButton="changeServiceCellBtn"
               class="block"
             >
-             <line-chart class="block-radius-content" :area_flag="false" :data="line_data"></line-chart>
+             <line-chart v-if="line_data.xAxisData&&line_data.xAxisData.length" class="block-radius-content" :area_flag="false" :data="line_data"></line-chart>
             </block-radius>
           </el-col>
         </el-row>
@@ -39,6 +39,7 @@
               class="block"
             >
               <table-um 
+              v-if="tableRank.length"
               :headers="tableheaders"
               :stripe="true"
               :height="220"
@@ -124,74 +125,15 @@ export default {
   },
   data(){
     return{
-      das_data: {
-        num: 80,
-        color: "#e56600",
-        text: "总超时率"
-      },
-      line_data:{
-        xAxisData: ['01-02','01-03','01-04','01-05','01-06','01-07'],
-        seriesData: [
-          {
-            name: "趋势",
-            data: [100,200,500,1000,1800,500]
-          }
-        ],
-      },
-          toplistData:[
-            {
-              service_name:'保安资格申请',
-              request_count: 50,
-              cover:1,
-              service_id:{
-                id:1,
-                source:1
-              },
-              data_service_type1:124
-            },
-            {
-              service_name:'保安考试流程',
-              request_count: 10,
-              cover:1,
-              service_id:{
-                id:1,
-                source:1
-              },
-              data_service_type1:124
-            },
-            {
-              service_name:'外国人永久居留资格申请',
-              request_count: 25,
-              cover:1,
-              service_id:{
-                id:1,
-                source:1
-              },
-              data_service_type1:124
-            },
-            {
-              service_name:'大型焰火燃放资格申请',
-              request_count: 30,
-              cover:1,
-              service_id:{
-                id:1,
-                source:1
-              },
-              data_service_type1:124
-            },
-            {
-              service_name:'保安培训机构许可证申请流程',
-              request_count: 70,
-              cover:1,
-              service_id:{
-                id:1,
-                source:1
-              },
-              data_service_type1:124
-            },
-          ],
-          toplistTargetValue:70,
-          tableheaders:[
+      das_data: {},
+      all_count:0,
+      all_ex_count:0,
+      line_data:{},
+      trend_data:{},
+      use_data:{},
+      toplistData:[],
+      toplistTargetValue:70,
+      tableheaders:[
             {
               label: "排名",
               prop: "index",
@@ -219,91 +161,185 @@ export default {
               align: "center",
               minWidtn:'30%'
             },
-          ],
-          tableRank:[
-            {
-              index:1,
-              id:1,
-              name:'保安许可资格申请',
-              time:18,
-              val:'10%'
-            },
-            {
-              index:1,
-              name:'保安考试流程',
-              id:3,
-              time:10,
-              val:'15%'
-            },
-            {
-              index:1,
-              name:'外国人永久居留资格申请',
-              id:4,
-              time:20,
-              val:'30%'
-            },
-            {
-              index:1,
-              name:'大型焰火燃放资格申请',
-              id:5,
-              time:35,
-              val:'20%'
-            },
-            {
-              index:1,
-              id:6,
-              name:'保安培训机构许可证申请流程',
-              time:40,
-              val:'10%'
-            },
-          ],
-          bar_data_area:{
-            legendData: ['保安资格','大型焰火燃放资格','外国人永久居留资格','保安培训机构许可证'],
-            seriesData: [
-              55,44,33,22
-            ]
-          },
-          bar_data_org:{
-            legendData: ['保安资格','大型焰火燃放资格','外国人永久居留资格','保安培训机构许可证'],
-            seriesData: [
-              55,44,33,22
-            ]
-          },
-          color_arr:["#274fee",'#36a5ec', "#25bdb1", "#ffc95c", "#e56600", "#e15260"],
-          mult_data:[
-            {
-              name:'5分钟内',
-              value:10,
-            },
-            {
-              name:'1小时内',
-              value:15,
-            },
-            {
-              name:'1天内',
-              value:20,
-            },
-            {
-              name:'7天内',
-              value:8,
-            },
-            {
-              name:'30天内',
-              value:2,
-            },
-            {
-              name:'30天以上',
-              value:1,
-            },
-          ]
+      ],
+      tableRank:[],
+      bar_data_area:{},
+      bar_data_org:{},
+      color_arr:["#515fe7",'#36a5ec', "#25bdb1", "#ffc95c", "#e56600", "#e15260"],
+      mult_data:[]
     }
   },
+  mounted(){
+    this.get_process_all()
+    this.process_use_time()
+    this.process_timeout()
+    this.process_num_trend()
+    this.now_process_num()
+    this.now_process_avg()
+    this.process_use()
+  },
   methods:{
     changeServiceCellBtn(index){
       console.log(index);
+      if(index==0){
+        this.deal_trend_data(this.trend_data.day)
+      }else{
+        this.deal_trend_data(this.trend_data.month)
+      }
     },
     changeAppInfoBtn(index){
       console.log(index);
+      if(index==0){
+        this.deal_use_data(this.use_data.useMost)
+      }else{
+        this.deal_use_data(this.use_data.useLeast)
+      }
+    },
+    get_process_all(){
+      this.$http
+        .get(`/apaas/serviceapp/v3/workflows/monitoring/overview`)
+        .then(response => {
+          if(response.data.success){
+            let data = response.data.data
+            this.das_data= {
+              num: data.total_timeout_rate*100,
+              color: "#e56600",
+              text: "总超时率"
+            }
+            this.all_count = data.wf_total
+            this.all_ex_count = data.wf_instance_total
+          }
+        })
+    },
+    process_use_time(){
+      this.$http
+        .get(`/apaas/serviceapp/v3/workflows/monitoring/elapsedTimeStat`)
+        .then(response => {
+          if(response.data.success){
+            let data = response.data.data
+            this.tableRank = []
+            data.forEach((e,idx) => {
+                this.tableRank.push({
+                  index:idx+1,
+                  id:e.workflows_id,
+                  name:e.wf_name,
+                  time:e.elapsed_time,
+                  val:parseInt(e.timeout_rate*100)
+                })
+            });
+          }
+        })
+    },
+    process_timeout(){
+      this.$http
+        .get(`/apaas/serviceapp/v3/workflows/monitoring/timeoutStat`)
+        .then(response => {
+          if(response.data.success){
+            let data = response.data.data
+            var tempx = []
+            var tempy = []
+            data.forEach(e => {
+              tempx.push(e.wf_name)
+              tempy.push(parseInt(e.timeout_rate*100))
+            });
+            this.bar_data_org = {
+              legendData: tempx,
+              seriesData: tempy
+            }
+          }
+        })
+    },
+    process_num_trend(){
+      this.$http
+        .get(`/apaas/serviceapp/v3/workflows/monitoring/instanceStat`)
+        .then(response => {
+          if(response.data.success){
+            let data = response.data.data
+            this.trend_data = data
+            this.deal_trend_data(this.trend_data.day)
+          }
+        })
+    },
+    now_process_num(){
+      this.$http
+        .get(`/apaas/serviceapp/v3/workflows/monitoring/instanceRunningStat`)
+        .then(response => {
+          if(response.data.success){
+            let data = response.data.data
+            var tempx = []
+            var tempy = []
+            data.forEach(e => {
+              tempx.push(e.wf_name)
+              tempy.push(e.wf_instances)
+            });
+            this.bar_data_area={
+              legendData: tempx,
+              seriesData: tempy
+            }
+          }
+        })
+    },
+    now_process_avg(){
+      this.$http
+        .get(`/apaas/serviceapp/v3/workflows/monitoring/elapsedTimeAnalyse`)
+        .then(response => {
+          if(response.data.success){
+            let data = response.data.data
+            this.mult_data = []
+            for (const key in data) {
+              this.mult_data.push({
+                name:key,
+                value:data[key],
+              })
+            }
+          }
+        })
+    },
+    process_use(){
+      this.$http
+        .get(`/apaas/serviceapp/v3/workflows/monitoring/useRateStat`)
+        .then(response => {
+          if(response.data.success){
+            let data = response.data.data
+            this.use_data = data
+            this.deal_use_data(data.useMost)
+          }
+        })
+    },
+    deal_use_data(data){
+      var temp = []
+      this.toplistData = []
+      data.forEach(e => {
+        temp.push(e.total_instances)
+        this.toplistData.push({
+          service_name:e.wf_name,
+          request_count: e.total_instances,
+          cover:1,
+          service_id:{
+            id:e.workflows_id,
+            source:1
+          },
+          data_service_type1:124
+        })
+      });
+      this.toplistTargetValue = Math.max(...temp)
+    },
+    deal_trend_data(data){
+      var tempx=[]
+      var tempy=[]
+      data.forEach(e => {
+        tempx.push(e.date)
+        tempy.push(e.wf_instances)
+      });
+      this.line_data = {
+        xAxisData: tempx,
+        seriesData: [
+          {
+            name: "趋势",
+            data: tempy
+          }
+        ],
+      }
     },
   }
 }