diff --git a/package.json b/package.json
index 49541ed..67ab2ef 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "echarts-gl": "^1.1.1",
     "echarts-wordcloud": "^1.1.3",
     "element-ui": "^2.15.6",
-    "file-saver": "1.3.8",
+    "file-saver": "^1.3.8",
     "fuse.js": "3.4.4",
     "highlight.js": "^11.5.1",
     "html2canvas": "^1.4.1",
diff --git a/src/api/system/flowable.js b/src/api/system/flowable.js
index 51c3c60..f64283b 100644
--- a/src/api/system/flowable.js
+++ b/src/api/system/flowable.js
@@ -54,13 +54,30 @@ export function FetchLeadingOutModelXml(params) {
   })
 }
 
-// 部署
-export function FetchGenProcessDiagram(data) {
+export function FetchGenProcessDiagram(params) {
   return request({
     url: 'api/flowable/genProcessDiagram',
-    method: 'post',
-    data
+    method: 'get',
+    params
+  })
+}
+
+// 根据部署id获取流程图
+export function FetchFindFolwImgByModelId(params) {
+  return request({
+    url: 'api/flowable/findFolwImgByModelId',
+    method: 'get',
+    params
+  })
+}
+
+// 根据部署id获取流程图
+export function FetchTaskByProcinstId(params) {
+  return request({
+    url: 'api/flowable/getTaskByProcinstId',
+    method: 'get',
+    params
   })
 }
 
-export default { FetchInitFlowAll, FetchFlowList, FetchDeloy, FetchSuspendActivate, FetchAllByKey, FetchLeadingOutModelXml }
+export default { FetchInitFlowAll, FetchFlowList, FetchDeloy, FetchSuspendActivate, FetchAllByKey, FetchLeadingOutModelXml, FetchFindFolwImgByModelId, FetchTaskByProcinstId }
diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss
index 7cde6f9..e378bf0 100644
--- a/src/assets/styles/mixin.scss
+++ b/src/assets/styles/mixin.scss
@@ -1007,4 +1007,39 @@
   .process-right{
     width: calc(100vw - 964px);
   }
+}
+
+@mixin process-status-style{
+  [data-theme="dark"] & {
+    &.ing-state{
+      color: #0348F3;
+      border: 1px solid #0348F3 ;
+    }
+    &.end-state{
+      color: #1aae93;
+      border: 1px solid #1aae93;
+    }
+    &.cancel-state{
+      color: #ED4A41;
+      border: 1px solid #FFA5A0;
+      opacity: 0.6;
+    }
+  }
+  [data-theme="light"] & {
+    &.ing-state{
+      color: #0348F3;
+      background-color: #EEF5FE;
+      border: 1px solid #0348F3;
+    }
+    &.end-state{
+      color: #2ECAAC;
+      background-color: #E8F8F5;
+      border: 1px solid #B1EBDF;
+    }
+    &.cancel-state{
+      color: #ED4A41;
+      background-color: #FFEBEA;
+      border: 1px solid #FFA5A0;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/assets/styles/yxk-admin.scss b/src/assets/styles/yxk-admin.scss
index 419e083..e16da23 100644
--- a/src/assets/styles/yxk-admin.scss
+++ b/src/assets/styles/yxk-admin.scss
@@ -1938,3 +1938,15 @@ input[type ='number'] {
     border: none !important;
   }
 }
+
+
+.row-state{
+  display: inline-block;
+  padding: 0 4px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  font-size: 12px;
+  border-radius: 3px;
+  @include process-status-style;
+}
\ No newline at end of file
diff --git a/src/views/system/metadata/dataList/index.vue b/src/views/system/metadata/dataList/index.vue
index 9f11dd2..67bf8cf 100644
--- a/src/views/system/metadata/dataList/index.vue
+++ b/src/views/system/metadata/dataList/index.vue
@@ -17,21 +17,21 @@
     <!--表单组件-->
     <el-dialog append-to-body :close-on-click-modal="false" :before-close="handleClose" :visible="metadataVisible" :title="metadataTitle">
       <div class="setting-dialog">
-        <el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="100px">
+        <el-form ref="mform" inline :model="mform" :rules="rules" size="small" label-width="100px">
           <el-form-item label="编号" prop="infoCode">
-            <el-input v-model="form.infoCode" />
+            <el-input v-model="mform.infoCode" />
           </el-form-item>
           <el-form-item label="元数据元素" prop="infoName">
-            <el-input v-model="form.infoName" />
+            <el-input v-model="mform.infoName" />
           </el-form-item>
           <el-form-item label="顶级元数据" prop="isTop">
-            <el-radio-group v-model="form.isTop">
+            <el-radio-group v-model="mform.isTop" :disabled="isEdit">
               <el-radio label="1">是</el-radio>
               <el-radio label="0">否</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item v-if="form.isTop === '0'" label="父级" prop="parentInfoId">
-            <el-select v-model="form.parentInfoId" style="width: 225px;">
+          <el-form-item v-if="mform.isTop === '0'" label="父级" prop="parentInfoId">
+            <el-select v-model="mform.parentInfoId" style="width: 225px;" :disabled="isEdit">
               <el-option v-for="item in selectOptions" :key="item.id" :label="item.label" :value="item.id" />
             </el-select>
           </el-form-item>
@@ -80,10 +80,11 @@ export default {
       tableData: [],
       selections: [],
       isAllSelect: false,
+      isEdit: false,
       metadataTitle: '新增元数据',
       metadataVisible: false,
       selectOptions: [],
-      form: { id: null, infoCode: null, infoName: null, isTop: '1', parentInfoId: null },
+      mform: { id: null, infoCode: null, infoName: null, isTop: '1', parentInfoId: null },
       rules: {
         infoCode: [
           { required: true, message: '编号不可为空', trigger: 'blur' }
@@ -132,25 +133,23 @@ export default {
       })
     },
     toAdd() {
+      this.isEdit = false
       this.metadataVisible = true
       this.metadataTitle = '新增元数据'
     },
     toEdit(data) {
-      const editData = data[0]
+      this.isEdit = true
       this.metadataVisible = true
       this.metadataTitle = '编辑元数据'
-      this.form = {
-        id: editData.id,
-        infoCode: editData.infoCode,
-        infoName: editData.infoName
-      }
-      if (editData.infoParentId) {
-        this.form.isTop = '0'
-        this.form.parentInfoId = editData.infoParentId
+      const form = JSON.parse(JSON.stringify(data[0]))
+      if (form.infoParentId) {
+        form.isTop = '0'
+        form.parentInfoId = form.infoParentId
       } else {
-        this.form.isTop = '1'
-        this.form.parentInfoId = null
+        form.isTop = '1'
+        form.parentInfoId = null
       }
+      this.mform = form
     },
     handleComfire() {
       this.$refs['form'].validate((valid) => {
@@ -158,14 +157,13 @@ export default {
           const params = {
             'metadataId': this.selectedTreeItem.id,
             'info': [{
-              'metadataInfoId': this.form.id,
-              'parentInfoId': this.form.parentInfoId,
-              'infoCode': this.form.infoCode,
-              'infoName': this.form.infoName
+              'metadataInfoId': this.mform.id,
+              'parentInfoId': this.mform.parentInfoId,
+              'infoCode': this.mform.infoCode,
+              'infoName': this.mform.infoName
             }]
           }
-          delete this.form.isTop
-          console.log(params)
+          delete this.mform.isTop
           FetchEditMetadataInfo(params).then((res) => {
             if (res) {
               this.metadataVisible = false
@@ -206,9 +204,9 @@ export default {
       })
     },
     clearForm() {
-      if (this.$refs['form']) {
-        this.$refs['form'].clearValidate()
-        this.form = {}
+      if (this.$refs['mform']) {
+        this.$refs['mform'].clearValidate()
+        this.mform = {}
       }
     },
     handleClose() {
diff --git a/src/views/system/metadata/index.vue b/src/views/system/metadata/index.vue
index 200abca..169a30c 100644
--- a/src/views/system/metadata/index.vue
+++ b/src/views/system/metadata/index.vue
@@ -152,7 +152,6 @@ export default {
     },
     // 选中门类后，设置门类详情数据
     handleNodeClick(val) {
-      console.log(val)
       if (val) {
         if (val.parentsId === null) {
           this.addBtnShow = true
diff --git a/src/views/system/processManage/historicalProcess/index.vue b/src/views/system/processManage/historicalProcess/index.vue
index 018d08d..0b03e8a 100644
--- a/src/views/system/processManage/historicalProcess/index.vue
+++ b/src/views/system/processManage/historicalProcess/index.vue
@@ -1,147 +1,25 @@
 <template>
   <div>
-    <!--工具栏-->
-    <div class="head-container">
-      <div class="head-search">
-        <el-input v-model="query.name" clearable size="small" placeholder="输入发起人名" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
-        <el-select
-          v-model="query.value1"
-          multiple
-          collapse-tags
-          placeholder="请选择"
-        >
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
-        </el-select>
-        <date-range-picker v-model="query.createTime" class="date-item" />
-        <rrOperation />
-      </div>
-    </div>
-    <!--表格渲染-->
-    <el-table
-      ref="table"
-      v-loading="crud.loading"
-      :data="crud.data"
-      row-key="id"
-      @select="crud.selectChange"
-      @select-all="crud.selectAllChange"
-      @cell-dblclick="tableDoubleClick"
-      @selection-change="crud.selectionChangeHandler"
-    >
-      <el-table-column label="发起时间" prop="startTime" align="center" width="160">
-        <template slot-scope="scope">
-          <div>{{ scope.row.startTime | parseTime }}</div>
-        </template>
-      </el-table-column>
-      <el-table-column label="发起人" prop="promoter" align="center" width="140" />
-      <el-table-column label="流程名称" prop="flowableName" align="center" />
-      <el-table-column label="当前节点" prop="currentNode" align="center" />
-      <el-table-column label="下一节点" prop="nextNode" align="center" />
-      <el-table-column label="结束时间" prop="endTime" align="center" width="160">
-        <template slot-scope="scope">
-          <div v-if="scope.row.endTime">{{ scope.row.endTime | parseTime }}</div>
-          <div v-else>-</div>
-        </template>
-      </el-table-column>
-      <el-table-column label="流程状态" prop="status" align="center" width="140">
-        <template slot-scope="scope">
-          <div v-if="scope.row.endTime" class="row-state active-state">已完成</div>
-          <div v-else class="row-state disabled-state">已取消</div>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!--分页组件-->
-    <pagination v-if="crud.data.length!==0" />
-    <Detail ref="processDetail" />
+    <Process ref="process" :is-histroy="true" />
   </div>
 </template>
 
 <script>
-import CRUD, { presenter, header, crud } from '@crud/crud'
-import rrOperation from '@crud/RR.operation'
-import DateRangePicker from '@/components/DateRangePicker'
-import pagination from '@crud/Pagination'
-import Detail from '../runningProcess/module/detail'
+import Process from '../runningProcess/index'
 
 export default {
-  name: 'RunningProcess',
-  components: { rrOperation, DateRangePicker, pagination, Detail },
-  cruds() {
-    return CRUD({ title: '运行中流程', url: 'api/flowable/getFlowList', crudMethod: {}})
-  },
-  mixins: [presenter(), header(), crud()],
+  name: 'HistoricalProcess',
+  components: { Process },
   data() {
     return {
-      options: [{
-        value: '选项1',
-        label: '流程A'
-      }, {
-        value: '选项2',
-        label: '流程B'
-      }, {
-        value: '选项3',
-        label: '流程C'
-      }, {
-        value: '选项4',
-        label: '流程D'
-      }],
-      permission: {
-        add: ['admin', 'dept:add'],
-        edit: ['admin', 'dept:edit'],
-        del: ['admin', 'dept:del']
-      }
     }
   },
+  mounted() {
+  },
   methods: {
-    [CRUD.HOOK.beforeRefresh]() {
-      this.crud.query.isEnd = true
-    },
-    // table - 双击查看详情
-    tableDoubleClick(row) {
-      this.$refs.processDetail.detailVisible = true
-    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-@mixin table-fixed-status-style{
-  [data-theme="dark"] & {
-    &.active-state{
-      color: #1aae93;
-      border: 1px solid #1aae93;
-    }
-    &.disabled-state{
-      color: #ED4A41;
-      border: 1px solid #FFA5A0;
-      opacity: 0.6;
-    }
-  }
-  [data-theme="light"] & {
-    &.active-state{
-      color: #2ECAAC;
-      background-color: #E8F8F5;
-      border: 1px solid #B1EBDF;
-    }
-    &.disabled-state{
-      color: #ED4A41;
-      background-color: #FFEBEA;
-      border: 1px solid #FFA5A0;
-    }
-  }
-}
-.row-state{
-  display: inline-block;
-  padding: 0 4px;
-  height: 20px;
-  line-height: 20px;
-  text-align: center;
-  font-size: 12px;
-  border-radius: 3px;
-  @include table-fixed-status-style;
-}
 </style>
diff --git a/src/views/system/processManage/index.vue b/src/views/system/processManage/index.vue
index c9efe16..c636c57 100644
--- a/src/views/system/processManage/index.vue
+++ b/src/views/system/processManage/index.vue
@@ -5,10 +5,10 @@
       <span class="left-bottom-line" />
       <span class="right-bottom-line" />
       <ul class="tab-nav">
-        <li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">流程部署<i /></li>
-        <li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">模型设计<i /></li>
-        <li :class="{ 'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">运行中流程<i /></li>
-        <li :class="{ 'active-tab-nav': activeIndex == 3 }" @click="changeActiveTab(3)">历史流程<i /></li>
+        <li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">运行中流程<i /></li>
+        <li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">历史流程<i /></li>
+        <li :class="{ 'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">流程部署<i /></li>
+        <li :class="{ 'active-tab-nav': activeIndex == 3 }" @click="changeActiveTab(3)">模型设计<i /></li>
         <!-- 最右侧装饰img -->
         <span class="tab-right-img" />
       </ul>
@@ -39,15 +39,15 @@ export default {
   computed: {
     comName: function() {
       if (this.activeIndex === 0) {
-        return 'processDeployment'
+        return 'runningProcess'
       } else if (this.activeIndex === 1) {
-        return 'modelDesign'
+        return 'historicalProcess'
       } else if (this.activeIndex === 2) {
-        return 'runningProcess'
+        return 'processDeployment'
       } else if (this.activeIndex === 3) {
-        return 'historicalProcess'
+        return 'modelDesign'
       }
-      return 'processDeployment'
+      return 'runningProcess'
     }
   },
   methods: {
diff --git a/src/views/system/processManage/modelDesign/index.vue b/src/views/system/processManage/modelDesign/index.vue
index da021ac..be5e3cb 100644
--- a/src/views/system/processManage/modelDesign/index.vue
+++ b/src/views/system/processManage/modelDesign/index.vue
@@ -1,10 +1,12 @@
 <template>
   <div>
     <!-- http://192.168.99.84:8080/flowable-ui/modeler/#/processes -->
+    <!-- :src="baseApi+'/flowable-ui/modeler'" -->
+    <!-- src="http://192.168.99.67:11110/flowable-ui/modeler/" -->
     <iframe
       ref="iframe"
       class="iframe_box"
-      src="http://192.168.99.84:8080/flowable-ui/modeler/#/processes"
+      src="http://192.168.99.67:11110/flowable-ui/modeler/"
       frameborder="0"
       scrolling="no"
     />
@@ -12,6 +14,35 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+export default {
+  data() {
+    return {
+      url: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'baseApi'
+    ])
+  },
+  created() {
+  },
+  mounted() {
+    const iframeElement = this.$refs.iframe
+    console.log('iframeElement', iframeElement)
+    const iframeWindow = iframeElement.contentWindow
+    console.log('iframeWindow', iframeWindow)
+    const iframeDocument = iframeWindow.document
+    console.log('iframeDocument', iframeDocument)
+    // 通过iframe文档对象获取元素
+    const iframeInnerElement = iframeDocument.querySelector('.login-button')
+    // 在这里可以对获取到的元素进行进一步的操作
+    console.log('iframeInnerElement', iframeInnerElement)
+  },
+  methods: {
+  }
+}
 </script>
 
 <style lang='scss' scoped>
diff --git a/src/views/system/processManage/processDeployment/index.vue b/src/views/system/processManage/processDeployment/index.vue
index f0648c9..b409b5a 100644
--- a/src/views/system/processManage/processDeployment/index.vue
+++ b/src/views/system/processManage/processDeployment/index.vue
@@ -54,7 +54,7 @@
           </div>
         </div>
         <div class="process-info-img">
-          <img src="~@/assets/images/system/process-img.png" alt="">
+          <img :src="srcImg" alt="" :onerror="defaultImg">
         </div>
       </div>
     </div>
@@ -63,7 +63,7 @@
 </template>
 
 <script>
-import { FetchInitFlowAll, FetchSuspendActivate, FetchAllByKey, FetchLeadingOutModelXml, FetchGenProcessDiagram } from '@/api/system/flowable'
+import { FetchInitFlowAll, FetchSuspendActivate, FetchAllByKey, FetchLeadingOutModelXml, FetchFindFolwImgByModelId } from '@/api/system/flowable'
 import { downloadFile } from '@/utils/index'
 import eForm from './module/form'
 export default {
@@ -84,11 +84,13 @@ export default {
       versionNew: null,
       exportVisible: false,
       activateName: '',
+      srcImg: null,
       enabledTypeOptions: [
         { key: null, display_name: '全部' },
         { key: 1, display_name: '启用' },
         { key: 2, display_name: '挂起' }
-      ]
+      ],
+      defaultImg: 'this.src="' + require('@/assets/images/system/default-img.jpg') + '"'
     }
   },
   mounted() {
@@ -123,14 +125,14 @@ export default {
           return json
         })
         this.versionNew = item.version
-        FetchGenProcessDiagram({ 'processId': item.procdefId }).then((res) => {
-          console.log(res)
-        }).catch(err => {
-          console.log(err)
-        })
       }).catch((err) => {
         console.log(err)
       })
+      FetchFindFolwImgByModelId({ 'processDefinitionId': item.procdefId }).then((res) => {
+        this.srcImg = 'data:image/jpeg;base64,' + res
+      }).catch(err => {
+        console.log(err)
+      })
     },
     selectVersion(val) {
       this.allVersionModel.filter((item, index) => {
@@ -151,7 +153,7 @@ export default {
       } else {
         this.activateName = '挂起'
       }
-      this.$confirm('此操作将' + this.activateName + '“' + this.selectedItem[0].modelName + '”' + '<span>你是否还要继续？</span>', '提示', {
+      this.$confirm('此操作将' + this.activateName + '“' + this.selectedItem[0].deployName + '”' + '<span>你是否还要继续？</span>', '提示', {
         confirmButtonText: '继续',
         cancelButtonText: '取消',
         type: 'warning',
@@ -313,10 +315,12 @@ export default {
     }
     .process-info-img{
       height: calc(100vh - 374px);
+      background-color: #fff;
+      border: 1px solid #E6E8ED;
+      overflow: hidden;
       & img{
         display: block;
-        height: 100%;
-        border: 1px solid #E6E8ED;
+        width: 100%;
       }
     }
   }
diff --git a/src/views/system/processManage/runningProcess/index.vue b/src/views/system/processManage/runningProcess/index.vue
index d5642da..2ee8bd7 100644
--- a/src/views/system/processManage/runningProcess/index.vue
+++ b/src/views/system/processManage/runningProcess/index.vue
@@ -5,10 +5,10 @@
       <div class="head-search">
         <el-input v-model="query.promoter" clearable size="small" placeholder="输入发起人名" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
         <el-select
-          v-model="query.modelKeys"
+          v-model="modelKeysSelect"
           multiple
           collapse-tags
-          placeholder="请选择"
+          placeholder="流程筛选（可多选）"
         >
           <el-option
             v-for="item in options"
@@ -17,8 +17,12 @@
             :value="item.value"
           />
         </el-select>
-        <date-range-picker v-model="query.createTime" class="date-item" />
-        <rrOperation />
+        <date-range-picker v-model="blurryTime" class="date-item" />
+        <rrOperation>
+          <template v-slot:right>
+            <el-button class="filter-item  filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button>
+          </template>
+        </rrOperation>
       </div>
     </div>
     <!--表格渲染-->
@@ -48,19 +52,23 @@
         </template>
       </el-table-column>
       <el-table-column label="流程状态" prop="status" align="center" width="140">
-        <template>
-          <div class="row-state active-state">进行中</div>
+        <template slot-scope="scope">
+          <div v-if="!isHistroy" class="row-state ing-state">进行中</div>
+          <div v-else>
+            <span v-if="scope.row.endTime" class="row-state end-state">已完成</span>
+            <span v-else class="row-state cancel-state">已取消</span>
+          </div>
         </template>
       </el-table-column>
     </el-table>
     <!--分页组件-->
     <pagination v-if="crud.data.length!==0" />
-    <Detail ref="processDetail" />
+    <Detail ref="processDetail" :is-histroy="isHistroy" />
   </div>
 </template>
 
 <script>
-import { FetchGenProcessDiagram } from '@/api/system/flowable'
+import { FetchInitFlowAll } from '@/api/system/flowable'
 import CRUD, { presenter, header, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import DateRangePicker from '@/components/DateRangePicker'
@@ -71,64 +79,85 @@ export default {
   name: 'RunningProcess',
   components: { rrOperation, DateRangePicker, pagination, Detail },
   cruds() {
-    return CRUD({ title: '运行中流程', url: 'api/flowable/getFlowList', crudMethod: {}})
+    return CRUD({ title: '运行中流程', url: 'api/flowable/getFlowList', crudMethod: {},
+      optShow: {
+        add: false,
+        edit: false,
+        del: false,
+        reset: false,
+        download: false,
+        group: false
+      }})
   },
   mixins: [presenter(), header(), crud()],
+  props: {
+    isHistroy: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
-      options: [{
-        value: '选项1',
-        label: '流程A'
-      }, {
-        value: '选项2',
-        label: '流程B'
-      }, {
-        value: '选项3',
-        label: '流程C'
-      }, {
-        value: '选项4',
-        label: '流程D'
-      }],
-      permission: {
-        add: ['admin', 'dept:add'],
-        edit: ['admin', 'dept:edit'],
-        del: ['admin', 'dept:del']
-      }
+      blurryTime: [],
+      modelKeysSelect: [],
+      options: [],
+      permission: {}
     }
   },
+  mounted() {
+    this.getAllFlowable()
+  },
   methods: {
     [CRUD.HOOK.beforeRefresh]() {
-      this.crud.query.isEnd = false
+      if (this.isHistroy) {
+        this.crud.query.isEnd = true
+      } else {
+        this.crud.query.isEnd = false
+      }
+      if (this.blurryTime) {
+        this.crud.query.startTime = this.blurryTime[0]
+        this.crud.query.endTime = this.blurryTime[1]
+      } else {
+        this.crud.query.startTime = null
+        this.crud.query.endTime = null
+      }
+      if (this.modelKeysSelect.length !== 0) {
+        this.crud.query.modelKeys = this.modelKeysSelect.join(',')
+      } else {
+        this.crud.query.modelKeys = null
+      }
     },
-    // table - 双击查看详情
-    tableDoubleClick(row) {
-      this.$refs.processDetail.detailVisible = true
-      FetchGenProcessDiagram({ 'processId': row.procinstId }).then((res) => {
-        console.log(res)
+    resetQuery() {
+      this.modelKeysSelect = []
+      this.blurryTime = []
+      this.crud.query = {}
+      this.crud.toQuery()
+    },
+    getAllFlowable() {
+      FetchInitFlowAll().then((res) => {
+        this.options = res.map(item => {
+          const json = {}
+          json.value = item.modelKey
+          json.label = item.deployName
+          return json
+        })
       }).catch(err => {
         console.log(err)
       })
+    },
+    // table - 双击查看详情
+    tableDoubleClick(row) {
+      this.$refs.processDetail.detailVisible = true
+      this.$refs.processDetail.selectRow = row
+      this.$refs.processDetail.activeIndex = 0
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-@mixin table-fixed-status-style{
-  [data-theme="dark"] & {
-    &.active-state{
-      color: #0348F3;
-      border: 1px solid #0348F3 ;
-    }
-  }
-  [data-theme="light"] & {
-    &.active-state{
-      color: #0348F3;
-      background-color: #EEF5FE;
-      border: 1px solid #0348F3;
-    }
-  }
-}
+@import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/variables.scss";
 .row-state{
   display: inline-block;
   padding: 0 4px;
@@ -137,6 +166,6 @@ export default {
   text-align: center;
   font-size: 12px;
   border-radius: 3px;
-  @include table-fixed-status-style;
+  @include process-status-style;
 }
 </style>
diff --git a/src/views/system/processManage/runningProcess/module/businessDetails/index.vue b/src/views/system/processManage/runningProcess/module/businessDetails/index.vue
index ff0373b..ae4ff72 100644
--- a/src/views/system/processManage/runningProcess/module/businessDetails/index.vue
+++ b/src/views/system/processManage/runningProcess/module/businessDetails/index.vue
@@ -32,36 +32,6 @@ export default {
         type: '按件整理',
         number: 'DAS-Y-2020-001',
         title: '人事劳资文件级文书档案'
-      }, {
-        groups: '全宗A',
-        name: '文书档案（文件）',
-        type: '按件整理',
-        number: 'DAS-Y-2020-001',
-        title: '人事劳资文件级文书档案'
-      }, {
-        groups: '全宗A',
-        name: '文书档案（文件）',
-        type: '按件整理',
-        number: 'DAS-Y-2020-001',
-        title: '人事劳资文件级文书档案'
-      }, {
-        groups: '全宗A',
-        name: '文书档案（文件）',
-        type: '按件整理',
-        number: 'DAS-Y-2020-001',
-        title: '人事劳资文件级文书档案'
-      }, {
-        groups: '全宗A',
-        name: '文书档案（文件）',
-        type: '按件整理',
-        number: 'DAS-Y-2020-001',
-        title: '人事劳资文件级文书档案'
-      }, {
-        groups: '全宗A',
-        name: '文书档案（文件）',
-        type: '按件整理',
-        number: 'DAS-Y-2020-001',
-        title: '人事劳资文件级文书档案'
       }]
     }
   },
diff --git a/src/views/system/processManage/runningProcess/module/detail.vue b/src/views/system/processManage/runningProcess/module/detail.vue
index 4b21a00..558a7a6 100644
--- a/src/views/system/processManage/runningProcess/module/detail.vue
+++ b/src/views/system/processManage/runningProcess/module/detail.vue
@@ -1,30 +1,49 @@
 <template>
   <el-dialog class="detail-dialog" :visible.sync="detailVisible" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="流程详情">
     <div class="setting-dialog">
-      <div class="detail-info">
-        <p><span>流程名称：</span>01-归档审批流程</p>
-        <p><span>启动时间：</span>2016-09-21 08:50:08</p>
-        <p><span>实例ID：</span>9af7f46a-ea52- 4aa3-b8c3-9fd484c2af12</p>
-        <p><span>发起人：</span>admin</p>
-      </div>
-      <!--  -->
-      <div class="detail-arrow" @click="isExpend = !isExpend"><i :class="[ isExpend ? 'arrow-up':'']" /></div>
+      <ul class="detail-info">
+        <li><span>流程名称：</span>{{ selectRow.flowableName }}</li>
+        <li><span>流程结果：</span><p class="row-state">{{ !isHistroy ? '进行中' : ( selectRow.endTime ? '已完成' : '已取消') }}</p></li>
+        <li><span>所属全宗：</span>全宗A</li>
+        <li v-if="selectRow.endTime"><span>结束时间：</span>{{ selectRow.endTime | parseTime }}</li>
+        <li v-else><span>结束时间：</span>-</li>
+      </ul>
+      <!-- 归档 / 退档 -->
+      <!-- <ul class="detail-type-info">
+        <li><span>原始位置：</span>整编库</li>
+        <li><span>目标位置：</span>管理库</li>
+      </ul> -->
+      <!-- 赋权审批 -->
+      <!-- <ul class="detail-type-info">
+        <li><span>利用目的：</span>资料查阅</li>
+        <li><span>赋权开始：</span>2022-10-01 10:23:56</li>
+        <li><span>赋权结束：</span>2022-10-07 10:23:56</li>
+      </ul> -->
+      <!-- 内部移交 -->
+      <!-- <ul class="detail-type-info">
+        <li><span>目标全宗：</span>全宗B</li>
+      </ul> -->
+      <!-- 开发鉴定 / 销毁鉴定 -->
+      <!-- <ul class="detail-type-info">
+        <li><span>申请缘由：</span>开放学习</li>
+      </ul> -->
+      <!-- <div class="detail-arrow" @click="isExpend = !isExpend"><i :class="[ isExpend ? 'arrow-up':'']" /></div>
       <el-collapse-transition>
         <div v-show="isExpend" class="service-detail">
           <h4>业务详情</h4>
-          <div class="detail-list">
-            <p><span>业务类型：</span>归档审批</p>
-            <p><span>原始位置：</span>全宗A-整理库-门类A</p>
-            <p><span>目标位置：</span>全宗A-整理库-门类A</p>
-            <p><span>赋权类型：</span>-</p>
-            <p><span>起始时间：</span>-</p>
-            <p><span>终止时间：</span>-</p>
-            <p><span>利用目的：</span>-</p>
-            <p><span>业务状态：</span>已完成</p>
-            <p><span>审批状态：</span>通过</p>
-          </div>
+          <ul class="detail-list">
+            <li><span>业务类型：</span>归档审批</li>
+            <li><span>原始位置：</span>全宗A-整理库-门类A</li>
+            <li><span>目标位置：</span>全宗A-整理库-门类A</li>
+            <li><span>赋权类型：</span>-</li>
+            <li><span>起始时间：</span>-</li>
+            <li><span>终止时间：</span>-</li>
+            <li><span>利用目的：</span>-</li>
+            <li><span>业务状态：</span>已完成</li>
+            <li><span>审批状态：</span>通过</li>
+          </ul>
         </div>
-      </el-collapse-transition>
+      </el-collapse-transition> -->
       <div class="detail-tab tab-content">
         <ul class="tab-nav">
           <li :class="{'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">档案列表</li>
@@ -32,7 +51,7 @@
           <li :class="{'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">流程图</li>
         </ul>
         <div v-if="activeIndex == 0" class="double-click-btn"><i class="iconfont icon-zhuyi-lan" /><span>双击列表数据查看详情</span></div>
-        <component :is="comName" class="component-cont" />
+        <component :is="comName" class="component-cont" :src-img="srcImg" :task-table-list="taskTableList" />
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="detailVisible=false">确定</el-button>
@@ -42,23 +61,33 @@
 </template>
 
 <script>
+import { FetchGenProcessDiagram, FetchTaskByProcinstId } from '@/api/system/flowable'
 import processImg from './processImg/index'
 import businessDetails from './businessDetails/index'
 import taskList from './taskList/index'
-import approvalList from './approvalList/index'
+// import approvalList from './approvalList/index'
 export default {
   name: 'Detail',
   components: {
     processImg,
     businessDetails,
-    taskList,
-    approvalList
+    taskList
+    // approvalList
+  },
+  props: {
+    isHistroy: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
       detailVisible: false,
       isExpend: false,
-      activeIndex: 0
+      activeIndex: 0,
+      selectRow: {},
+      srcImg: '',
+      taskTableList: []
     }
   },
   computed: {
@@ -76,6 +105,27 @@ export default {
   methods: {
     changeActiveTab(data) {
       this.activeIndex = data
+      if (this.activeIndex === 1) {
+        this.getTaskByProcinstId()
+      } else if (this.activeIndex === 2) {
+        this.getProcessImg()
+      }
+    },
+    getProcessImg() {
+      this.srcImg = ''
+      FetchGenProcessDiagram({ 'processId': this.selectRow.procinstId }).then((res) => {
+        this.srcImg = res
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    getTaskByProcinstId() {
+      this.taskTableList = []
+      FetchTaskByProcinstId({ 'procinstId': this.selectRow.procinstId }).then((res) => {
+        this.taskTableList = res
+      }).catch(err => {
+        console.log(err)
+      })
     }
   }
 }
@@ -87,7 +137,8 @@ export default {
 }
 .detail-dialog{
   .detail-info,
-  .detail-list{
+  .detail-list,
+  .detail-type-info{
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
@@ -95,7 +146,9 @@ export default {
     font-size: 14px;
     line-height: 30px;
     color: #545B65;
-    p{
+    li{
+      display: flex;
+      justify-content: flex-start;
       width: 50%;
       span{
         display: inline-block;
@@ -103,8 +156,14 @@ export default {
         text-align: right;
         color: #0C0E1E;
       }
+      p{
+
+      }
     }
   }
+  .detail-type-info{
+    padding-top: 0;
+  }
   .detail-arrow{
     position: relative;
     width: 64px;
diff --git a/src/views/system/processManage/runningProcess/module/processImg/index.vue b/src/views/system/processManage/runningProcess/module/processImg/index.vue
index 877e247..f4714c5 100644
--- a/src/views/system/processManage/runningProcess/module/processImg/index.vue
+++ b/src/views/system/processManage/runningProcess/module/processImg/index.vue
@@ -1,20 +1,37 @@
 <template>
   <div class="tab-img">
-    <img src="~@/assets/images/system/process-img.png" alt="">
+    <img :src="'data:image/jpeg;base64,'+ srcImg" alt="" :onerror="defaultImg">
   </div>
 </template>
 
 <script>
+export default {
+  props: {
+    srcImg: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      defaultImg: 'this.src="' + require('@/assets/images/system/default-img.jpg') + '"'
+    }
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
 </script>
 
 <style lang='scss' scoped>
 .tab-img{
-  max-height: 344px;
+  height: 440px;
   overflow: hidden;
-  overflow-y: scroll;
   img{
     display: block;
     width: 100%;
+    // height: 100%;
   }
 }
 </style>
diff --git a/src/views/system/processManage/runningProcess/module/taskList/index.vue b/src/views/system/processManage/runningProcess/module/taskList/index.vue
index 20715a5..e733edd 100644
--- a/src/views/system/processManage/runningProcess/module/taskList/index.vue
+++ b/src/views/system/processManage/runningProcess/module/taskList/index.vue
@@ -1,28 +1,46 @@
 <template>
   <div>
-    <el-table :data="tableData" style="width: 100%" height="300" @cell-dblclick="tableDoubleClick">
-      <el-table-column prop="state" label="状态" align="center" width="90px">
+    <!-- @cell-dblclick="tableDoubleClick" -->
+    <el-table :data="taskTableList" style="width: 100%" height="300">
+      <el-table-column prop="type" label="状态" align="center" width="80px">
         <template slot-scope="scope">
-          <div :class="scope.row.state ? 'process-state' :'process-state ing-state'">{{ scope.row.state ? '已完成':'进行中' }}</div>
+          <div :class="scope.row.type === '进行中' ? 'process-state  ing-state' :'process-state'">{{ scope.row.type }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="任务名称" align="center" />
+      <el-table-column prop="assignee" label="执行人" align="center" />
+      <el-table-column prop="message" label="执行意见" align="center" />
+      <el-table-column prop="startTime" label="创建时间" width="160" align="center">
+        <template slot-scope="scope">
+          <div v-if="scope.row.startTime">{{ scope.row.startTime | parseTime }}</div>
+          <div v-else>-</div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="endTime" label="完成时间" width="160" align="center">
+        <template slot-scope="scope">
+          <div v-if="scope.row.endTime">{{ scope.row.endTime | parseTime }}</div>
+          <div v-else>-</div>
         </template>
       </el-table-column>
-      <el-table-column prop="name" label="任务名称" />
-      <el-table-column prop="operator" label="执行人" />
-      <el-table-column prop="createDate" label="创建时间" />
-      <el-table-column prop="endDate" label="完成时间" />
     </el-table>
     <!-- @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" -->
     <el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" />
-    <TaskDetail ref="taskDetail" />
+    <!-- <TaskDetail ref="taskDetail" /> -->
   </div>
 </template>
 
 <script>
-import TaskDetail from './module/detail'
+// import TaskDetail from './module/detail'
 export default {
   name: 'TaskList',
   components: {
-    TaskDetail
+    // TaskDetail
+  },
+  props: {
+    taskTableList: {
+      type: Array,
+      default: () => []
+    }
   },
   data() {
     return {
@@ -31,31 +49,7 @@ export default {
         size: 10,
         page: 1
       },
-      tableData: [{
-        state: 1,
-        name: '入管理库流程',
-        operator: 'admin',
-        createDate: '2022-10-01 10:23:54',
-        endDate: '2022-10-02 10:23:54'
-      }, {
-        state: 1,
-        name: '入管理库流程',
-        operator: 'admin',
-        createDate: '2022-10-01 10:23:54',
-        endDate: '2022-10-02 10:23:54'
-      }, {
-        state: 1,
-        name: '入管理库流程',
-        operator: 'admin',
-        createDate: '2022-10-01 10:23:54',
-        endDate: '2022-10-02 10:23:54'
-      }, {
-        state: 0,
-        name: '入管理库流程',
-        operator: 'admin',
-        createDate: '2022-10-01 10:23:54',
-        endDate: '-'
-      }]
+      tableData: []
     }
   },
   methods: {
@@ -76,11 +70,11 @@ export default {
       this.params.page = e - 1
       // this.doQuery(this.params)
       this.loading = false
-    },
-    tableDoubleClick() {
-      this.$refs.taskDetail.taskDetailVisible = true
-      this.$refs.taskDetail.getDetial()
     }
+    // tableDoubleClick() {
+    //   this.$refs.taskDetail.taskDetailVisible = true
+    //   this.$refs.taskDetail.getDetial()
+    // }
   }
 }