diff --git a/src/components/e-charts/multiple_circle.vue b/src/components/e-charts/multiple_circle.vue
index 7851ae83ed0d3f4a02cf7cfc7c1f6ac47db185c4..0e1bed0a7cb180eace2933f4dd4afe3abee75e33 100644
--- a/src/components/e-charts/multiple_circle.vue
+++ b/src/components/e-charts/multiple_circle.vue
@@ -24,6 +24,10 @@ export default {
     bar_width: {
       type: Number,
       default: 5
+    },
+    color:{
+      type:Array,
+      default:null
     }
   },
   components: {},
@@ -76,7 +80,7 @@ export default {
       };
       var data = [];
       var total = 0;
-      var color = ["#274fee", "#25bdb1", "#ffc95c", "#e56600", "#e15260"];
+      var color = this.color?this.color:["#274fee", "#25bdb1", "#ffc95c", "#e56600", "#e15260"];
       var legendarr = [];
       var temp2_data = 0;
       data_val.forEach(e => {
diff --git a/src/components/e-charts/process-top-list.vue b/src/components/e-charts/process-top-list.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c6aff89b22ad81bed609520e4e13076f1a69bb02
--- /dev/null
+++ b/src/components/e-charts/process-top-list.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="top_list apaas_scroll" @mouseenter="mouseenter" @mouseleave="mouseleave">
+    <ul>
+      <li class="item_list" v-for="(option, index) in options" :key="index">
+        <div class="item_detail">
+          <p class="item_info">
+            <span
+              class="text_clip is_link"
+              @click="getDetail(option.service_id, option.data_service_type1)"
+            >
+              {{ option.service_name }}
+            </span>
+            
+          </p>
+          <el-progress
+            class="item_progress"
+            :percentage="getPercent(option.request_count)"
+            :show-text="false"
+            color="#e56600"
+          ></el-progress>
+          <span
+            style="float:right;"
+              v-text="helper.numberFormat(option.request_count, 2) + (option.request_count > 10000 ? '万次' : '次')"
+            ></span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import helper from "@/services/helper";
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    },
+    targetValue: {
+      type: Number,
+      default: () => 0
+    }
+  },
+  data() {
+    return {
+      timer: null,
+      helper
+    };
+  },
+  watch: {
+    text() {
+      this.autoScroll();
+    }
+  },
+  methods: {
+    getPercent(value) {
+      if (value == 0) {
+        return 0;
+      } else {
+        return Math.min((value / this.targetValue) * 100, 100);
+      }
+    },
+    autoScroll() {
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+
+      this.$el.scrollTop = 0;
+
+      this.timer = setInterval(() => {
+        let itemHeight = 50;
+        let curScrollTop = this.$el.scrollTop + itemHeight;
+
+        if (curScrollTop >= this.$el.scrollHeight - this.$el.clientHeight + itemHeight) {
+          curScrollTop = 0;
+        }
+
+        this.$el.scrollTop = Math.min(curScrollTop, this.$el.scrollHeight - this.$el.clientHeight);
+      }, 1500);
+    },
+    mouseenter() {
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+    },
+    mouseleave() {
+      this.autoScroll();
+    },
+    getDetail(id, type) {
+      
+    }
+  },
+  mounted() {
+    this.autoScroll();
+    window.addEventListener("resize", () => {
+      this.autoScroll();
+    });
+  },
+  destroyed() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.top_list {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.item_list {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 18px;
+}
+.item_index {
+  width: 35px;
+  flex-shrink: 0;
+  margin-right: 10px;
+  font-size: 12px;
+  color: #58617a;
+}
+.item_logo {
+  margin-right: 10px;
+  flex-shrink: 0;
+  font-size: 0;
+  border: 2px solid #e3e5ef;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.item_info {
+  flex-grow: 1;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 14px;
+  line-height: 20px;
+  color: #58617a;
+}
+.item_detail {
+  flex-grow: 1;
+}
+.item_info > span:first-child {
+  width: 100px;
+  flex-grow: 1;
+  margin-right: 10px;
+  color:#58617a;
+  font-size: 14px;
+}
+.item_info > span:first-child > i {
+  font-weight: bold;
+  font-size: 12px;
+  color: #8e96ab;
+}
+.item_info > span:nth-child(2) {
+  flex-shrink: 0;
+  white-space: nowrap;
+  color: #0d1847;
+}
+.item_progress {
+  margin-top: 6px;
+  width: calc(100% - 60px);
+  float: left;
+}
+.is_link {
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/table/table-um.vue b/src/components/table/table-um.vue
index 46ec67705a093dac837dcfb9b47cc2617a50b2dd..1282faa7fdf791d217944f8874f3d6188d2d9d42 100644
--- a/src/components/table/table-um.vue
+++ b/src/components/table/table-um.vue
@@ -200,7 +200,7 @@
               {{ scope.row[item.prop] }}
             </span>
             <!-- others -->
-            <span v-else-if="item.type === 'click'" style="cursor: pointer;" @click="gotopage(item.url,scope.row[item.prop][item.id])">{{ scope.row[item.prop] }}</span>
+            <span v-else-if="item.type === 'click'" style="cursor: pointer;color: #274fee;" @click="gotopage(item.url,scope.row[item.id])">{{ scope.row[item.prop] }}</span>
             <span v-else>{{ scope.row[item.prop] }}</span>
           </template>
         </el-table-column>
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 1fb81f36adc54dd391c54cf01dfad9a04ea82190..2456a81ea98b7fb0a6720442dab605ecf63951de 100644
--- a/src/pages/workbench/component-center/process-management/monitoring/index.vue
+++ b/src/pages/workbench/component-center/process-management/monitoring/index.vue
@@ -1,5 +1,392 @@
 <template>
-  <div>
-    大屏监控
+  <div class="detail_contain">
+    <p class="now_page_title">在线组件工具 /  流程设计  / <span>流程监控</span></p>
+    <el-row class="in_analysis">
+      <!-- 可横向铺满 -->
+      <el-col :span="6" class="in_left">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius :show_header="true" title="流程总体概况" class="block">
+              <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>
+                </div>
+                <single-circle ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></single-circle>
+              </div>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="流程实例数趋势分析"
+              :buttons_arr="['近7天', '近6个月']"
+              @changeButton="changeServiceCellBtn"
+              class="block"
+            >
+             <line-chart class="block-radius-content" :area_flag="false" :data="line_data"></line-chart>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="12" class="in_center">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="流程平均耗时排行"
+              class="block"
+            >
+              <table-um 
+              :headers="tableheaders"
+              :stripe="true"
+              :height="220"
+              :datas="tableRank">
+              </table-um>
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="实时流程实例分析"
+              class="block"
+            >
+              <BarChart
+                :data="bar_data_area"
+                :colors="['#1034eb', '#4274f8']"
+                :bar_border_radius="[20, 20, 0, 0]"
+                :bar_width="26"
+                :show_split="true"
+              />
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="6" class="in_right">
+        <el-row>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="流程超时率分析"
+              class="block"
+            >
+              <BarChart :data="bar_data_org" :colors="['#274fee', '#274fee']" :x_router="30" />
+            </block-radius>
+          </el-col>
+          <el-col :span="24" class="in_block">
+            <block-radius
+              :show_header="true"
+              title="流程实例平均耗时分析"
+              class="block"
+            >
+              <multiple-circle class="block-radius-content" :show_center_data="false" :color="color_arr" :data="mult_data" :text="''"></multiple-circle>
+            </block-radius>
+          </el-col>
+        </el-row>
+      </el-col>
+      <!-- 不可横向铺满，一般为最后一行 -->
+      <el-col :span="6" class="in_block">
+        <block-radius :show_header="true" title="流程使用率分析" class="block" :buttons_arr="['最多', '最少']" @changeButton="changeAppInfoBtn">
+          <toplist
+            class="block-radius-content"
+            :options="toplistData"
+            :target-value="toplistTargetValue"
+          ></toplist>
+        </block-radius>
+      </el-col>
+      <el-col :span="18" class="in_block default">
+        <block-radius class="block">
+          <img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
+        </block-radius>
+      </el-col>
+    </el-row>
   </div>
 </template>
+
+<script>
+import BlockRadius from "@/components/general/block-radius";
+import singleCircle from "@/components/e-charts/single_circle";
+import lineChart from "@/components/e-charts/line_chart";
+import Toplist from "@/components/e-charts/process-top-list";
+import tableUm from '@/components/table/table-um'
+import BarChart from "@/components/e-charts/bar-chart";
+import multipleCircle from "@/components/e-charts/multiple_circle";
+export default {
+  components:{
+    BlockRadius,
+    singleCircle,
+    lineChart,
+    Toplist,
+    tableUm,
+    BarChart,
+    multipleCircle
+  },
+  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:100,
+          tableheaders:[
+            {
+              label: "排名",
+              prop: "index",
+              align: "center",
+              width: "80px"
+            },
+            {
+              label: "流程名称",
+              prop: "name",
+              align: "left",
+              minWidtn:'40%',
+              type:'click',
+              url:'/',
+              id:'id',
+            },
+            {
+              label: "耗时（分钟）",
+              prop: "time",
+              align: "center",
+              minWidtn:'30%'
+            },
+            {
+              label: "超时率",
+              prop: "val",
+              align: "center",
+              minWidtn:'30%'
+            },
+          ],
+          tableRank:[
+            {
+              index:1,
+              id:1,
+              name:'保安许可资格申请',
+              time:180,
+              val:'40%'
+            },
+            {
+              index:1,
+              name:'保安考试流程',
+              id:3,
+              time:180,
+              val:'40%'
+            },
+            {
+              index:1,
+              name:'外国人永久居留资格申请',
+              id:4,
+              time:180,
+              val:'40%'
+            },
+            {
+              index:1,
+              name:'大型焰火燃放资格申请',
+              id:5,
+              time:180,
+              val:'40%'
+            },
+            {
+              index:1,
+              id:6,
+              name:'保安培训机构许可证申请流程',
+              time:180,
+              val:'40%'
+            },
+          ],
+          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:10,
+            },
+            {
+              name:'1天内',
+              value:10,
+            },
+            {
+              name:'7天内',
+              value:10,
+            },
+            {
+              name:'30天内',
+              value:10,
+            },
+            {
+              name:'30天以上',
+              value:10,
+            },
+          ]
+    }
+  },
+  methods:{
+    changeServiceCellBtn(index){
+      console.log(index);
+    },
+    changeAppInfoBtn(index){
+      console.log(index);
+    },
+  }
+}
+</script>
+
+<style scoped>
+.detail_contain {
+  width: 100%;
+  padding: 0 10px;
+  height: calc(100% - 55px);
+}
+.now_page_title {
+  margin: 15px 0;
+  margin-left: 10px;
+  color: #898d9e;
+}
+.now_page_title span {
+  color: #242c43;
+}
+.in_analysis {
+  height: 100%;
+  width: 100%;
+  min-width: 1700px;
+}
+.in_block {
+  height: 300px;
+  padding: 10px;
+}
+.block {
+  width: 100%;
+  height: 100%;
+}
+.left_1 {
+  height: 100%;
+  display: flex;
+  justify-content: space-around;
+}
+.left_block {
+  width: 280px;
+  height: 100%;
+  padding: 10px 0 0 0;
+}
+.left_1_l {
+  padding-top: 20px;
+}
+.left_1_l p{
+  font-size: 26px;
+  color: #515fe7;
+}
+.left_1_l p span{
+  font-size: 14px;
+  color: #242c43;
+  width: 100px;
+  display: inline-block;
+}
+.left_1_title {
+  width: 100%;
+}
+.left_1_num {
+  font-size: 32px;
+  color: #515fe7;
+  width: 100%;
+}
+.left_1_img {
+  width: 126px;
+  height: 138px;
+  display: inline-block;
+}
+.default {
+  text-align: center;
+}
+.default_img {
+  width: 330px;
+  height: 230px;
+}
+.left_1_r {
+  width: 50%;
+  height: 100%;
+  display: inline-block;
+}
+.block-radius-content {
+  width: 100%;
+  height: calc(100% - 36px);
+  margin-top: 15px;
+}
+</style>
diff --git a/src/pages/workbench/yygl/app_detail.vue b/src/pages/workbench/yygl/app_detail.vue
index e958369224c8ca885d3a9e0e2c8d773a3cc42b7e..dc061a2058817ce707618d365fd3dfd38cc71d06 100644
--- a/src/pages/workbench/yygl/app_detail.vue
+++ b/src/pages/workbench/yygl/app_detail.vue
@@ -161,6 +161,7 @@
               :auto-upload="false"
               :on-success="upload_success"
               :on-error="upload_error"
+              :on-change="change_file_state"
               :data="anotherData1"
               :multiple="false"
             >
@@ -493,10 +494,17 @@ export default {
         this.now_page = 1;
         this.image_arr = [];
         this.get_image_list();
+        this.get_file_name();
       } else {
         this.$message.error(response.errMsg);
       }
     },
+    change_file_state(file,fileList){
+      console.log(file,fileList);
+      if(fileList.length>=2){
+        this.fileList = [file]
+      }
+    },
     upload_error() {
       this.$message.error("上传失败");
     },