diff --git a/src/pages/processCenter/pages/processDetail/index.vue b/src/pages/processCenter/pages/processDetail/index.vue
index 0790dbef4..c78e51861 100644
--- a/src/pages/processCenter/pages/processDetail/index.vue
+++ b/src/pages/processCenter/pages/processDetail/index.vue
@@ -1,1379 +1,1764 @@
 <!-- 流程详情 -->
 <template>
-  <div id="processDetails">
-    <div class="flow-chart">
-      <div class="flow-header">
-        <div class="back" title="返回" @click="back">
-          <i class="el-icon-back" />
+    <div id="processDetails">
+        <div class="flow-chart">
+            <div class="flow-header">
+                <div class="back" title="返回" @click="back">
+                    <i class="el-icon-back"/>
+                </div>
+                <!--        <span class="flow-chart-title">{{ $route.params.processNumber }}  {{ $route.params.processTypeName }}  流程图</span>-->
+            </div>
+            <div class="flow-group" style="margin-top: 30px;overflow: auto;">
+                <img v-if="$route.query.oldAndNew == 'old'" :src="processStep" class="process-img">
+                <div v-else-if="$route.query.oldAndNew == 'new'" class="flow-group-process">
+                    <div class="flow-group-process-stard">
+                        开始
+                    </div>
+                    <div v-for="(item,index) in nameList"
+                         :class="{'flow-group-process-box-one':arrangeFromTheLeft(index + 1)}"
+                         class="flow-group-process-box">
+                        <div v-if="leftArrow(index + 1)"
+                             :class="{'flow-group-process-arrow-left':arrangeFromTheLeft(index + 1)}"
+                             class="flow-group-process-arrow">
+                        </div>
+                        <div class="flow-group-process-content"
+                             :style="backdrop(item.status)"
+                             :class="{'flow-group-process-content-dis':!leftArrow(index + 1)}">
+                            <div class="flow-group-process-content-top">
+                                起草
+                            </div>
+                            <div class="flow-group-process-content-bottom">
+                                {{item.name}}
+                            </div>
+                        </div>
+                        <div v-if="isVerticalLine(index + 1)"
+                             :class="{'flow-group-process-arrow-one':(index + 1) % num == 0 ? true : false}"
+                             class="flow-group-process-arrow"></div>
+                        <div v-if="!arrangeFromTheLeft(index + 1) && (index + 1) == nameList.length
+                             && (index + 1) % num != 0"
+                             :class="{'flow-group-process-arrow-left':arrangeFromTheLeft(index + 1)}"
+                             class="flow-group-process-arrow">
+                        </div>
+                    </div>
+                    <div class="flow-group-process-end"
+                         :style="backdrop(nameList[nameList.length - 1].status == 1 ? 1 : 3)"
+                         :class="{'flow-group-process-end-left':isProcessEnd(nameList.length),
+                         'flow-group-process-end-one':isProcessEndOne(nameList.length),}">
+                        结束
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="action-bar">
+            <el-button
+                    class="common-button-default export-button"
+                    round
+                    icon="export"
+                    title="不勾选时默认导出所有筛选项；勾选时仅导出勾选项"
+                    @click="exportStandard"
+            >
+                导出
+            </el-button>
+            <el-button
+                    class="common-button-default"
+                    round
+                    @click="seeProcessLast"
+            >
+                查看流程数据
+            </el-button>
+            <el-button
+                    v-if="tzclrEnable"
+                    class="common-button-default"
+                    round
+                    @click="adjustmentHandler"
+            >
+                调整处理人
+            </el-button>
+            <el-button
+                    v-if="approveShow"
+                    class="common-button-default"
+                    round
+                    @click="approveHandler"
+            >
+                汇总流程
+            </el-button>
+            <!--临时屏蔽 start-->
+            <!--<el-button-->
+            <!--  class="common-button-default"-->
+            <!--  round-->
+            <!--  @click="handlingTasks"-->
+            <!--&gt;办理任务</el-button>-->
+            <!--临时屏蔽 end-->
+            <!--      <el-button-->
+            <!--          class="common-button-default"-->
+            <!--          round-->
+            <!--          @click="urgeRow"-->
+            <!--      >催办</el-button>-->
+        </div>
+        <div class="flow-list">
+            <el-table
+                    ref="selection"
+                    height="100%"
+                    :data="detailData"
+                    tooltip-effect="dark"
+                    style="width: 100%"
+                    border
+                    row-key="id"
+                    :no-data-text="listNoDataText"
+                    :header-cell-style="{background: '#f8f8f9', color: '#515a6e'}"
+                    @selection-change="tableChange"
+                    @sort-change="sortChange"
+            >
+                <el-table-column
+                        type="selection"
+                        width="55"
+                        align="center"
+                />
+                <el-table-column type="index" width="55" label="序号" align="center"/>
+                <el-table-column
+                        prop="name"
+                        label="任务步骤"
+                        align="center"
+                        sortable="custom"
+                />
+                <el-table-column
+                        prop="assignee"
+                        label="任务受理人"
+                        align="center"
+                        sortable="custom"
+                />
+                <el-table-column
+                        prop="createTime"
+                        label="创建时间"
+                        sortable="custom"
+                        align="center"
+                >
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.createTime ? $moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                        prop="endTime"
+                        label="完成时间"
+                        align="center"
+                >
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.endTime ? $moment(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                        prop="comment"
+                        label="流程信息"
+                        align="center"
+                >
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.commentText }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                        prop="completeFlag"
+                        label="状态"
+                        align="center"
+                >
+                    <template slot-scope="scope">
+                        <span>{{ scope.row.endTime ? '已完成' : scope.row.receiveStatus ? '已接收' : '未完成' }}</span>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <loading :loading="loading">流程列表加载中</loading>
+            <!-- 福田全公司选人解决方案 -->
+            <Role-tree
+                    check-box
+                    :is-title="drawerTitle"
+                    :is-visible.sync="drawerModal"
+                    :nodeList="nodeList"
+                    @checkedRole="checkedRole"
+            />
+            <!--      <org-table-->
+            <!--          title="调整处理人"-->
+            <!--          :visible.sync="drawerModal"-->
+            <!--          dialog-model-->
+            <!--          :config="orgTableConfig"-->
+            <!--          :max-selected="1"-->
+            <!--          max-selected-tips="处理人只能选择一个用户"-->
+            <!--          :excludeUser="excludeUser"-->
+            <!--          @confirm="addTree"-->
+            <!--      ></org-table>-->
         </div>
-        <!--        <span class="flow-chart-title">{{ $route.params.processNumber }}  {{ $route.params.processTypeName }}  流程图</span>-->
-      </div>
-      <div class="flow-group" style="margin-top: 30px;overflow: auto;">
-        <img :src="processStep" class="process-img">
-      </div>
     </div>
-    <div class="action-bar">
-      <el-button
-        class="common-button-default export-button"
-        round
-        icon="export"
-        title="不勾选时默认导出所有筛选项；勾选时仅导出勾选项"
-        @click="exportStandard"
-      >
-        导出
-      </el-button>
-      <el-button
-        class="common-button-default"
-        round
-        @click="seeProcessLast"
-      >
-        查看流程数据
-      </el-button>
-      <el-button
-        v-if="tzclrEnable"
-        class="common-button-default"
-        round
-        @click="adjustmentHandler"
-      >
-        调整处理人
-      </el-button>
-      <el-button
-        v-if="approveShow"
-        class="common-button-default"
-        round
-        @click="approveHandler"
-      >
-        汇总流程
-      </el-button>
-      <!--临时屏蔽 start-->
-      <!--<el-button-->
-      <!--  class="common-button-default"-->
-      <!--  round-->
-      <!--  @click="handlingTasks"-->
-      <!--&gt;办理任务</el-button>-->
-      <!--临时屏蔽 end-->
-      <!--      <el-button-->
-      <!--          class="common-button-default"-->
-      <!--          round-->
-      <!--          @click="urgeRow"-->
-      <!--      >催办</el-button>-->
-    </div>
-    <div class="flow-list">
-      <el-table
-        ref="selection"
-        height="100%"
-        :data="detailData"
-        tooltip-effect="dark"
-        style="width: 100%"
-        border
-        row-key="id"
-        :no-data-text="listNoDataText"
-        :header-cell-style="{background: '#f8f8f9', color: '#515a6e'}"
-        @selection-change="tableChange"
-        @sort-change="sortChange"
-      >
-        <el-table-column
-          type="selection"
-          width="55"
-          align="center"
-        />
-        <el-table-column type="index" width="55" label="序号" align="center" />
-        <el-table-column
-          prop="name"
-          label="任务步骤"
-          align="center"
-          sortable="custom"
-        />
-        <el-table-column
-          prop="assignee"
-          label="任务受理人"
-          align="center"
-          sortable="custom"
-        />
-        <el-table-column
-          prop="createTime"
-          label="创建时间"
-          sortable="custom"
-          align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.createTime ? $moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="endTime"
-          label="完成时间"
-          align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.endTime ? $moment(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="comment"
-          label="流程信息"
-          align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.commentText }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="completeFlag"
-          label="状态"
-          align="center"
-        >
-          <template slot-scope="scope">
-            <span>{{ scope.row.endTime ? '已完成' : scope.row.receiveStatus ? '已接收' : '未完成' }}</span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <loading :loading="loading">流程列表加载中</loading>
-      <!-- 福田全公司选人解决方案 -->
-      <Role-tree
-        check-box
-        :is-title="drawerTitle"
-        :is-visible.sync="drawerModal"
-        :nodeList="nodeList"
-        @checkedRole="checkedRole"
-      />
-      <!--      <org-table-->
-      <!--          title="调整处理人"-->
-      <!--          :visible.sync="drawerModal"-->
-      <!--          dialog-model-->
-      <!--          :config="orgTableConfig"-->
-      <!--          :max-selected="1"-->
-      <!--          max-selected-tips="处理人只能选择一个用户"-->
-      <!--          :excludeUser="excludeUser"-->
-      <!--          @confirm="addTree"-->
-      <!--      ></org-table>-->
-    </div>
-  </div>
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
-import { changeAssigneeNew } from 'api/process'
-import axios from 'axios'
-import eventBus from '@/common/eventHub'
+    import {mapMutations} from 'vuex'
+    import {changeAssigneeNew} from 'api/process'
+    import axios from 'axios'
+    import * as echarts from 'echarts'
+    import eventBus from '@/common/eventHub'
 
-export default {
-  name: 'ProcessDetail',
-  data () {
-    return {
-      approveShow: false,
-      approveRowIndex: 0,
-      assigneeNewLoading: false, // 调整处理人确定loading
-      loginPeople: '',
-      // 调整处理人抽屉状态
-      drawerModal: false,
-      drawerTitle: '',
-      nodeList: [],
-      tasksName: '',
-      selectPeople: '',
-      // loading
-      loading: false,
-      // 流程步骤
-      processStep: null,
-      // 当前节点
-      taskKey: 0,
-      // 当前流程类型(1待办/2已办)
-      processType: 1,
-      // 流程列表
-      detailData: [],
-      taskNames: '',
-      tableRow: [], // 接受表格数据
-      completeFlagType: true, // 判断当前任务是否完成
-      processState: true, // 判断当前流程
-      detailsList: [],
-      shunxu: '',
-      paixu: '',
-      orgTableConfig: {
-        value: '',
-        valueName: ''
-      },
-      excludeUser: this.$store.getters.userInfo.userId
-    }
-  },
-  methods: {
-    checkedRole (data) {
-      this.assigneeNewLoading = true
-      changeAssigneeNew({
-        taskId: this.selectPeople.id, // 任务id
-        assignee: data[0].id, // 被委托人
-        userId: this.selectPeople.assigneeId, // 委托人
-        pId: this.selectPeople.processInstanceId // 流程实例
-      }).then(res => {
-        this.assigneeNewLoading = false
-        if (res.success) {
-          this.drawerModal = false
-          this.$message.success('调整成功')
-          this.processNum()
-          this.processTable()
-        } else {
-          this.$message.warning(res.message)
-        }
-      })
-    },
-    // 汇总流程
-    approveHandler () {
-      const index = this.detailData.length - 1 // 当前流程任务最后一步index
-      const isEnd = true
-      let row = { ...this.detailData[this.approveRowIndex + 1] }// 汇总页下一步拿到数据
-      if(this.approveRowIndex === this.detailData.length - 1) { // 最后一步
-        row = { ...this.detailData[this.approveRowIndex] }
-      }
-      row.taskIds = row.id
-      row.taskInfo = row.name
-      row.tabsName = this.$route.query.tabsName
-
-      const currentItem = this.detailData[this.approveRowIndex]
-      row.currentItem = currentItem
-
-      const prcType = this.detailData[index].prcType // 流程类型
-      if (isEnd) {
-        if (this.$store.state.detailMap !== '') {
-          const lastDetailMap = this.$store.getters.getLastDetailMap
-          lastDetailMap.push(this.$store.state.detailMap)
-          this.$store.commit('setLastDetailMap', JSON.stringify(lastDetailMap))
-        }
-        this.$store.commit('setDetailMap', this.$route.path)
-        row.isEnd = isEnd
-        this.setHandleInfo((JSON.stringify(row)))
-        this.setPrcLastDetail((JSON.stringify(row)))
-        // 根据type判断跳转具体流程页面
-        if (prcType === '1') {
-          // 标准入库流程数据 //第一步
-          this.toProcessDetail('bzrkStep1-1', row)
-        }else if(prcType === '2') {
-          // 标准调研流程 //第五步
-          this.toProcessDetail('bzdyStep5-1', row)
-        }else if(prcType === '3') {
-          // 标准征求意见 第七步
-          this.toProcessDetail('bzzqyjStep5-1', row)
-        }else if(prcType === '4') {
-          // 标准清单发布流程数据 第一步
-          this.toProcessDetail('bzqdfbStep1_1', row)
-        } else if(prcType === '9') {
-          // 标准解读流程 数据汇总页面 最后一步 暂时没有
-          this.toProcessDetail('bzjdStep6-1', row)
-        }else if (prcType === '5') {
-          // 标准合规评估流程 最后一步
-          this.toProcessDetail('bzpgStep8-2', row)
-        }else if(prcType === '6') {
-          // 项目合规评估流程 最后一步
-          // this.toProcessDetail('xmpg2Step12-1',row)
-          this.toProcessDetail('xmpgStep5-1', row)
-        }else if(prcType === '10') {
-          // 项目清单确认 最后一步
-          this.toProcessDetail('xmqdqrStep4-1', row)
-        }else if (prcType === '8') {
-          // 未符合项整改 3
-          this.toProcessDetail('wfhxzgStep3-1', row)
-        }else if(prcType === 'buss1') {
-          // 企标制修订 技术标准 第9
-          this.toProcessDetail('bussLibrary11-1', row)
-        }else if(prcType === 'buss2') {
-          // 企标 产品标准 6
-          // this.toProcessDetail('bussLibraryProduct6-1', row)
-          const params = { type: '6' }
-          this.toProcessDetailForParams('bussLibraryProduct', row, params)
-        }else if(prcType === 'buss3') {
-        // 企标复审 4
-          this.toProcessDetail('bussFs2-1', row)
-        }else if(prcType === '24') {
-          // 企标废止 3
-          this.toProcessDetail('qbfzStep4-1', row)
-        }else if(prcType === '25') {
-          // 企标制修订计划管控 1
-          this.toProcessDetail('qbzxdjhgkStep1-1', row)
-        }else if(prcType === '26') {
-          // 企标制修订计划立项 1
-          this.toProcessDetail('qbzxdlxStep1-1', row)
-        } else if (prcType === '33') {
-          const data = []
-          this.detailData.forEach(res => {
-            if (res.taskDefinitionKey == 'PolicySolicitOpinionProcessKey11') {
-              data.push(res)
+    export default {
+        name: 'ProcessDetail',
+        data() {
+            return {
+                nameList: [
+                    {
+                        name: '张三1',
+                        status: 1
+                    },
+                    {
+                        name: '张三2',
+                        status: 1
+                    },
+                    {
+                        name: '张三3',
+                        status: 2
+                    },
+                    {
+                        name: '张三4',
+                        status: 3
+                    },
+                    {
+                        name: '张三5',
+                        status: 3
+                    },
+                    {
+                        name: '张三6',
+                        status: 3
+                    },
+                    // {
+                    //     name: '张三7'
+                    // },
+                    // {
+                    //     name: '张三8'
+                    // },
+                    // {
+                    //     name: '张三9'
+                    // },
+                    // {
+                    //     name: '张三10'
+                    // },
+                    // {
+                    //     name: '张三11'
+                    // },
+                    // {
+                    //     name: '张三12'
+                    // },
+                    // {
+                    //     name: '张三13'
+                    // },
+                    // {
+                    //     name: '张三14'
+                    // },
+                    // {
+                    //     name: '张三15'
+                    // },
+                    // {
+                    //     name: '张三16'
+                    // },
+                    // {
+                    //     name: '张三17'
+                    // },
+                    // {
+                    //     name: '张三18'
+                    // },
+                    // {
+                    //     name: '张三19'
+                    // },
+                ],
+                approveShow: false,
+                approveRowIndex: 0,
+                assigneeNewLoading: false, // 调整处理人确定loading
+                loginPeople: '',
+                // 调整处理人抽屉状态
+                drawerModal: false,
+                drawerTitle: '',
+                nodeList: [],
+                tasksName: '',
+                selectPeople: '',
+                // loading
+                loading: false,
+                // 流程步骤
+                processStep: null,
+                // 当前节点
+                taskKey: 0,
+                // 当前流程类型(1待办/2已办)
+                processType: 1,
+                // 流程列表
+                detailData: [],
+                taskNames: '',
+                tableRow: [], // 接受表格数据
+                completeFlagType: true, // 判断当前任务是否完成
+                processState: true, // 判断当前流程
+                detailsList: [],
+                shunxu: '',
+                paixu: '',
+                orgTableConfig: {
+                    value: '',
+                    valueName: ''
+                },
+                excludeUser: this.$store.getters.userInfo.userId,
+                num: 0,
             }
-          })
-          this.$router.push({
-            path: '/policyConsultation',
-            query: {
-              taskIds: data[0].id,
-              prcNum: data[0].prcNum,
-              prcName: data[0].prcName,
-              prcType: data[0].prcType,
-              prcId: data[0].processInstanceId,
-              taskDefinitionKey: data[0].taskDefinitionKey,
-              operate: 'view',
-            }
-          })
-        } else if (prcType === '34') {
-          const data = []
-          this.detailData.forEach(res => {
-            if (res.taskDefinitionKey == 'PolicyComplianceProgramReviewProcessKey11') {
-              data.push(res)
-            }
-          })
-          this.$router.push({
-            path: '/policyComplianceReview',
-            query: {
-              taskIds: data[0].id,
-              prcNum: data[0].prcNum,
-              prcName: data[0].prcName,
-              prcType: data[0].prcType,
-              prcId: data[0].processInstanceId,
-              taskDefinitionKey: data[0].taskDefinitionKey,
-              operate: 'view',
-            }
-          })
-        }
-      }
-    },
-    /**
-     * @author liruohao
-     * @date 2019/4/22
-     * @Description: 查看流程最后一步
-     */
-    seeProcessLast () {
-      const index = this.detailData.length - 1 // 当前流程任务最后一步index
-      const isEnd = true
-      const row = { ...this.detailData[0] }
-      row.taskIds = row.id
-      row.taskInfo = row.name
-      row.tabsName = this.$route.query.tabsName
-      const prcType = this.detailData[index].prcType // 流程类型
-      console.log(prcType);
-      // 判断当前流程是否已全部办理完成
-      // this.detailData.map(item => {
-      //   if (!item.endTime) {
-      //     isEnd = false
-      //   }
-      // })
-      if (isEnd) {
-        if (this.$store.state.detailMap !== '') {
-          const lastDetailMap = this.$store.getters.getLastDetailMap
-          lastDetailMap.push(this.$store.state.detailMap)
-          this.$store.commit('setLastDetailMap', JSON.stringify(lastDetailMap))
-        }
-        this.$store.commit('setDetailMap', this.$route.path)
-        row.isEnd = isEnd
-        this.setHandleInfo((JSON.stringify(row)))
-        this.setPrcLastDetail((JSON.stringify(row)))
-        // 根据type判断跳转具体流程页面
-        if (prcType === '1') {
-          // 标准入库流程数据
-          this.toProcessDetail('bzrkStep1', row)
-        }else if(prcType === 'laws1') {
-          // 政策入库
-          // this.toProcessDetail('zcrkStep1',row)
-          this.toProcessDetailForParams('policyWarehousing1', row)
-        }else if(prcType === 'laws2') {
-          // 政策征求意见流程
-          this.toProcessDetail('zczqyjStep1', row)
-        }else if(prcType === 'laws3') {
-          // 重点认证标准/政策合规性项目审查流程
-          this.toProcessDetail('zdrzbzORzchgxxmscStep1', row)
-        }else if(prcType === 'buss1') {
-          // 企标入库
-          this.toProcessDetail('bussLibrary1', row)
-        }else if(prcType === 'buss2') {
-          // 企标入库
-          // this.toProcessDetail('bussLibraryProduct1', row)
-          const params = { type: '1' }
-          this.toProcessDetailForParams('bussLibraryProduct', row, params)
-        }else if(prcType === 'buss3') {
-        // 企标复审
-          this.toProcessDetail('qbfsStep1', row)
-        }else if(prcType === '4') {
-          // 标准清单发布流程数据
-          this.toProcessDetail('bzqdfbStep1', row)
-        }else if (prcType === '5') {
-          // 标准项目合规评估
-          this.toProcessDetail('bzpgStep1', row)
-        }else if(prcType === '6') {
-          // 标准项目合规评估 项目维度
-          this.toProcessDetail('xmpg2Step1', row)
-        } else if (prcType === '8') {
-          // 未符合项整改
-          this.toProcessDetail('wfhxzgStep1', row)
-        } else if(prcType === '9') {
-          this.toProcessDetail('bzjdStep1', row)
-          // 标准调研流程
-        }else if(prcType === '2') {
-          this.toProcessDetail('bzdyStep1', row)
-        }else if(prcType === '3') {
-          // 标准征求意见
-          this.toProcessDetail('bzzqyjStep1', row)
-        }else if(prcType === '10') {
-          // 项目清单确认
-          this.toProcessDetail('xmqdqrStep1', row, 'unShowReceipt')
-        }else if(prcType === '14') {
-          // 加入标准化协会信息备案流程
-          this.toProcessDetail('cywbbzzxdStep1', row,)
-        }else if(prcType === '15') {
-          // 加入标准化协会信息备案流程
-          this.toProcessDetail('jrbzhxhStep1', row,)
-        } else if(prcType === '16') {
-          // 外部署名
-          this.toProcessDetail('wbsmStep1', row)
-        }else if(prcType === '20') {
-          // 入会流程
-          this.toProcessDetail('bzrhStep1', row)
-        } else if(prcType === '21') {
-          // 参会流程
-          this.toProcessDetail('bzchStep1', row)
-        } else if(prcType === '23') {
-          // 企标复审
-          this.toProcessDetail('qbfsStep1', row)
-        }else if(prcType === '24') {
-          // 企标废止
-          this.toProcessDetail('qbfzStep1', row)
-        }else if(prcType === '25') {
-          // 企标制修订计划管控
-          this.toProcessDetail('qbzxdjhgkStep1', row)
-        }else if(prcType === '26') {
-          // 企标制修订计划立项
-          this.toProcessDetail('qbzxdlxStep1', row)
-        }else if(prcType === '17') {
-          // 政策课题入会发起流程
-          this.toProcessDetail('zcrhStep1', row)
-        }else if(prcType === '18') {
-          // 政策课题参会发起流程
-          this.toProcessDetail('zcchStep1', row)
-        }else if(prcType === '12') {
-          // 政策课题参会发起流程
-          this.toProcessDetail('zdrzbzORzchgxxmscStep1', row)
-        }else if(prcType === '29') {
-          // 内外部会议入库
-          // this.toProcessDetail('policyMeetings1',row)
-          this.toProcessDetailForParams('policyMeetings1', row)
-        } else if(prcType === '30') {
-          // 政策课题入会流程
-          const params = { type: 'step1' }
-          this.toProcessDetailForParams('policyTopicEnrollment', row, params)
-        } else if(prcType === '31') {
-          // 政策课题参会流程
-          const params = { type: 'step1' }
-          this.toProcessDetailForParams('policyTopicParticipation', row, params)
-        } else if(prcType === '32') {
-          // 政策法规资料入库流程
-          const params = { type: 'step1' }
-          this.toProcessDetailForParams('policyRegulatoryMaterials', row, params)
-        } else if (prcType === '33') {
-          this.$router.push({
-            path: '/policyConsultation',
-            query: {
-              taskIds: row.id,
-              prcNum: row.prcNum,
-              prcId: row.processInstanceId,
-              prcName: row.prcName,
-              prcType: row.prcType,
-              taskDefinitionKey: row.taskDefinitionKey,
-              operate: 'view',
-            }
-          })
-        } else if (prcType === '34') {
-          this.$router.push({
-            path: '/policyComplianceReview',
-            query: {
-              taskIds: row.id,
-              prcNum: row.prcNum,
-              prcName: row.prcName,
-              prcType: row.prcType,
-              prcId: row.processInstanceId,
-              taskDefinitionKey: row.taskDefinitionKey,
-              operate: 'view',
-            }
-          })
-        }
-      } else {
-        this.$message.warning('当前流程未全部办理完成，无法查看')
-      }
-    },
-    toProcessDetailForParams (componentName, row, params) {
-      this.$router.push({
-        name: componentName,
-        query: {
-          prcType: row.prcType,
-          taskIds: row.id,
-          prcId: row.processInstanceId,
-          prcNum: row.prcNum,
-          prcName: row.prcName,
-          operate: 'view'
         },
-        params
-      })
-    },
-    toProcessDetail (componentName, row, unShowReceipt) {
-      const data = {
-        name: componentName,
-        query: {
-          bpnId: row.bpnId,
-          taskIds: row.id,
-          prcId: row.processInstanceId,
-          prcNum: row.prcNum,
-          prcName: row.prcName,
-          prcType: row.prcType,
-          disabledXX: true,
-          verifySarStandard: true,
-          index: this.approveRowIndex,
-          processInstanceId: row.processInstanceId
+        methods: {
+            getProcessList() {
+                let query = {
+                    actiProcInstId:this.$route.query.actiProcInstId,
+                    flowType:this.$route.query.flowType,
+                }
+                this.$http.get('/lawss/activiti/getImgDataList', query, {
+                    loading: 'loading',
+                    _this: this
+                }, res => {
+                    // this.detailData = res
+                    this.$nextTick(() => {
+                        let flowGroupProcess = document.getElementsByClassName('flow-group-process')
+                        let num = (flowGroupProcess[0].offsetWidth - 100) / 248
+                        this.num = Math.floor(num)
+                        let width = 248 * this.num
+                        let offsetWidth = flowGroupProcess[0].offsetWidth
+
+                        flowGroupProcess[0].style.width = (offsetWidth - (offsetWidth - 100 - width) + 40) + 'px'
+                        console.log(offsetWidth);
+                        console.log(flowGroupProcess);
+                    })
+                }, e => {
+                })
+            },
+            checkedRole(data) {
+                this.assigneeNewLoading = true
+                changeAssigneeNew({
+                    taskId: this.selectPeople.id, // 任务id
+                    assignee: data[0].id, // 被委托人
+                    userId: this.selectPeople.assigneeId, // 委托人
+                    pId: this.selectPeople.processInstanceId // 流程实例
+                }).then(res => {
+                    this.assigneeNewLoading = false
+                    if (res.success) {
+                        this.drawerModal = false
+                        this.$message.success('调整成功')
+                        this.processNum()
+                        this.processTable()
+                    } else {
+                        this.$message.warning(res.message)
+                    }
+                })
+            },
+            // 汇总流程
+            approveHandler() {
+                const index = this.detailData.length - 1 // 当前流程任务最后一步index
+                const isEnd = true
+                let row = {...this.detailData[this.approveRowIndex + 1]}// 汇总页下一步拿到数据
+                if (this.approveRowIndex === this.detailData.length - 1) { // 最后一步
+                    row = {...this.detailData[this.approveRowIndex]}
+                }
+                row.taskIds = row.id
+                row.taskInfo = row.name
+                row.tabsName = this.$route.query.tabsName
+
+                const currentItem = this.detailData[this.approveRowIndex]
+                row.currentItem = currentItem
+
+                const prcType = this.detailData[index].prcType // 流程类型
+                if (isEnd) {
+                    if (this.$store.state.detailMap !== '') {
+                        const lastDetailMap = this.$store.getters.getLastDetailMap
+                        lastDetailMap.push(this.$store.state.detailMap)
+                        this.$store.commit('setLastDetailMap', JSON.stringify(lastDetailMap))
+                    }
+                    this.$store.commit('setDetailMap', this.$route.path)
+                    row.isEnd = isEnd
+                    this.setHandleInfo((JSON.stringify(row)))
+                    this.setPrcLastDetail((JSON.stringify(row)))
+                    // 根据type判断跳转具体流程页面
+                    if (prcType === '1') {
+                        // 标准入库流程数据 //第一步
+                        this.toProcessDetail('bzrkStep1-1', row)
+                    } else if (prcType === '2') {
+                        // 标准调研流程 //第五步
+                        this.toProcessDetail('bzdyStep5-1', row)
+                    } else if (prcType === '3') {
+                        // 标准征求意见 第七步
+                        this.toProcessDetail('bzzqyjStep5-1', row)
+                    } else if (prcType === '4') {
+                        // 标准清单发布流程数据 第一步
+                        this.toProcessDetail('bzqdfbStep1_1', row)
+                    } else if (prcType === '9') {
+                        // 标准解读流程 数据汇总页面 最后一步 暂时没有
+                        this.toProcessDetail('bzjdStep6-1', row)
+                    } else if (prcType === '5') {
+                        // 标准合规评估流程 最后一步
+                        this.toProcessDetail('bzpgStep8-2', row)
+                    } else if (prcType === '6') {
+                        // 项目合规评估流程 最后一步
+                        // this.toProcessDetail('xmpg2Step12-1',row)
+                        this.toProcessDetail('xmpgStep5-1', row)
+                    } else if (prcType === '10') {
+                        // 项目清单确认 最后一步
+                        this.toProcessDetail('xmqdqrStep4-1', row)
+                    } else if (prcType === '8') {
+                        // 未符合项整改 3
+                        this.toProcessDetail('wfhxzgStep3-1', row)
+                    } else if (prcType === 'buss1') {
+                        // 企标制修订 技术标准 第9
+                        this.toProcessDetail('bussLibrary11-1', row)
+                    } else if (prcType === 'buss2') {
+                        // 企标 产品标准 6
+                        // this.toProcessDetail('bussLibraryProduct6-1', row)
+                        const params = {type: '6'}
+                        this.toProcessDetailForParams('bussLibraryProduct', row, params)
+                    } else if (prcType === 'buss3') {
+                        // 企标复审 4
+                        this.toProcessDetail('bussFs2-1', row)
+                    } else if (prcType === '24') {
+                        // 企标废止 3
+                        this.toProcessDetail('qbfzStep4-1', row)
+                    } else if (prcType === '25') {
+                        // 企标制修订计划管控 1
+                        this.toProcessDetail('qbzxdjhgkStep1-1', row)
+                    } else if (prcType === '26') {
+                        // 企标制修订计划立项 1
+                        this.toProcessDetail('qbzxdlxStep1-1', row)
+                    } else if (prcType === '33') {
+                        const data = []
+                        this.detailData.forEach(res => {
+                            if (res.taskDefinitionKey == 'PolicySolicitOpinionProcessKey11') {
+                                data.push(res)
+                            }
+                        })
+                        this.$router.push({
+                            path: '/policyConsultation',
+                            query: {
+                                taskIds: data[0].id,
+                                prcNum: data[0].prcNum,
+                                prcName: data[0].prcName,
+                                prcType: data[0].prcType,
+                                prcId: data[0].processInstanceId,
+                                taskDefinitionKey: data[0].taskDefinitionKey,
+                                operate: 'view',
+                            }
+                        })
+                    } else if (prcType === '34') {
+                        const data = []
+                        this.detailData.forEach(res => {
+                            if (res.taskDefinitionKey == 'PolicyComplianceProgramReviewProcessKey11') {
+                                data.push(res)
+                            }
+                        })
+                        this.$router.push({
+                            path: '/policyComplianceReview',
+                            query: {
+                                taskIds: data[0].id,
+                                prcNum: data[0].prcNum,
+                                prcName: data[0].prcName,
+                                prcType: data[0].prcType,
+                                prcId: data[0].processInstanceId,
+                                taskDefinitionKey: data[0].taskDefinitionKey,
+                                operate: 'view',
+                            }
+                        })
+                    }
+                }
+            },
+            /**
+             * @author liruohao
+             * @date 2019/4/22
+             * @Description: 查看流程最后一步
+             */
+            seeProcessLast() {
+                const index = this.detailData.length - 1 // 当前流程任务最后一步index
+                const isEnd = true
+                const row = {...this.detailData[0]}
+                row.taskIds = row.id
+                row.taskInfo = row.name
+                row.tabsName = this.$route.query.tabsName
+                const prcType = this.detailData[index].prcType // 流程类型
+                console.log(prcType);
+                // 判断当前流程是否已全部办理完成
+                // this.detailData.map(item => {
+                //   if (!item.endTime) {
+                //     isEnd = false
+                //   }
+                // })
+                if (isEnd) {
+                    if (this.$store.state.detailMap !== '') {
+                        const lastDetailMap = this.$store.getters.getLastDetailMap
+                        lastDetailMap.push(this.$store.state.detailMap)
+                        this.$store.commit('setLastDetailMap', JSON.stringify(lastDetailMap))
+                    }
+                    this.$store.commit('setDetailMap', this.$route.path)
+                    row.isEnd = isEnd
+                    this.setHandleInfo((JSON.stringify(row)))
+                    this.setPrcLastDetail((JSON.stringify(row)))
+                    // 根据type判断跳转具体流程页面
+                    if (prcType === '1') {
+                        // 标准入库流程数据
+                        this.toProcessDetail('bzrkStep1', row)
+                    } else if (prcType === 'laws1') {
+                        // 政策入库
+                        // this.toProcessDetail('zcrkStep1',row)
+                        this.toProcessDetailForParams('policyWarehousing1', row)
+                    } else if (prcType === 'laws2') {
+                        // 政策征求意见流程
+                        this.toProcessDetail('zczqyjStep1', row)
+                    } else if (prcType === 'laws3') {
+                        // 重点认证标准/政策合规性项目审查流程
+                        this.toProcessDetail('zdrzbzORzchgxxmscStep1', row)
+                    } else if (prcType === 'buss1') {
+                        // 企标入库
+                        this.toProcessDetail('bussLibrary1', row)
+                    } else if (prcType === 'buss2') {
+                        // 企标入库
+                        // this.toProcessDetail('bussLibraryProduct1', row)
+                        const params = {type: '1'}
+                        this.toProcessDetailForParams('bussLibraryProduct', row, params)
+                    } else if (prcType === 'buss3') {
+                        // 企标复审
+                        this.toProcessDetail('qbfsStep1', row)
+                    } else if (prcType === '4') {
+                        // 标准清单发布流程数据
+                        this.toProcessDetail('bzqdfbStep1', row)
+                    } else if (prcType === '5') {
+                        // 标准项目合规评估
+                        this.toProcessDetail('bzpgStep1', row)
+                    } else if (prcType === '6') {
+                        // 标准项目合规评估 项目维度
+                        this.toProcessDetail('xmpg2Step1', row)
+                    } else if (prcType === '8') {
+                        // 未符合项整改
+                        this.toProcessDetail('wfhxzgStep1', row)
+                    } else if (prcType === '9') {
+                        this.toProcessDetail('bzjdStep1', row)
+                        // 标准调研流程
+                    } else if (prcType === '2') {
+                        this.toProcessDetail('bzdyStep1', row)
+                    } else if (prcType === '3') {
+                        // 标准征求意见
+                        this.toProcessDetail('bzzqyjStep1', row)
+                    } else if (prcType === '10') {
+                        // 项目清单确认
+                        this.toProcessDetail('xmqdqrStep1', row, 'unShowReceipt')
+                    } else if (prcType === '14') {
+                        // 加入标准化协会信息备案流程
+                        this.toProcessDetail('cywbbzzxdStep1', row,)
+                    } else if (prcType === '15') {
+                        // 加入标准化协会信息备案流程
+                        this.toProcessDetail('jrbzhxhStep1', row,)
+                    } else if (prcType === '16') {
+                        // 外部署名
+                        this.toProcessDetail('wbsmStep1', row)
+                    } else if (prcType === '20') {
+                        // 入会流程
+                        this.toProcessDetail('bzrhStep1', row)
+                    } else if (prcType === '21') {
+                        // 参会流程
+                        this.toProcessDetail('bzchStep1', row)
+                    } else if (prcType === '23') {
+                        // 企标复审
+                        this.toProcessDetail('qbfsStep1', row)
+                    } else if (prcType === '24') {
+                        // 企标废止
+                        this.toProcessDetail('qbfzStep1', row)
+                    } else if (prcType === '25') {
+                        // 企标制修订计划管控
+                        this.toProcessDetail('qbzxdjhgkStep1', row)
+                    } else if (prcType === '26') {
+                        // 企标制修订计划立项
+                        this.toProcessDetail('qbzxdlxStep1', row)
+                    } else if (prcType === '17') {
+                        // 政策课题入会发起流程
+                        this.toProcessDetail('zcrhStep1', row)
+                    } else if (prcType === '18') {
+                        // 政策课题参会发起流程
+                        this.toProcessDetail('zcchStep1', row)
+                    } else if (prcType === '12') {
+                        // 政策课题参会发起流程
+                        this.toProcessDetail('zdrzbzORzchgxxmscStep1', row)
+                    } else if (prcType === '29') {
+                        // 内外部会议入库
+                        // this.toProcessDetail('policyMeetings1',row)
+                        this.toProcessDetailForParams('policyMeetings1', row)
+                    } else if (prcType === '30') {
+                        // 政策课题入会流程
+                        const params = {type: 'step1'}
+                        this.toProcessDetailForParams('policyTopicEnrollment', row, params)
+                    } else if (prcType === '31') {
+                        // 政策课题参会流程
+                        const params = {type: 'step1'}
+                        this.toProcessDetailForParams('policyTopicParticipation', row, params)
+                    } else if (prcType === '32') {
+                        // 政策法规资料入库流程
+                        const params = {type: 'step1'}
+                        this.toProcessDetailForParams('policyRegulatoryMaterials', row, params)
+                    } else if (prcType === '33') {
+                        this.$router.push({
+                            path: '/policyConsultation',
+                            query: {
+                                taskIds: row.id,
+                                prcNum: row.prcNum,
+                                prcId: row.processInstanceId,
+                                prcName: row.prcName,
+                                prcType: row.prcType,
+                                taskDefinitionKey: row.taskDefinitionKey,
+                                operate: 'view',
+                            }
+                        })
+                    } else if (prcType === '34') {
+                        this.$router.push({
+                            path: '/policyComplianceReview',
+                            query: {
+                                taskIds: row.id,
+                                prcNum: row.prcNum,
+                                prcName: row.prcName,
+                                prcType: row.prcType,
+                                prcId: row.processInstanceId,
+                                taskDefinitionKey: row.taskDefinitionKey,
+                                operate: 'view',
+                            }
+                        })
+                    }
+                } else {
+                    this.$message.warning('当前流程未全部办理完成，无法查看')
+                }
+            },
+            toProcessDetailForParams(componentName, row, params) {
+                this.$router.push({
+                    name: componentName,
+                    query: {
+                        prcType: row.prcType,
+                        taskIds: row.id,
+                        prcId: row.processInstanceId,
+                        prcNum: row.prcNum,
+                        prcName: row.prcName,
+                        operate: 'view'
+                    },
+                    params
+                })
+            },
+            toProcessDetail(componentName, row, unShowReceipt) {
+                const data = {
+                    name: componentName,
+                    query: {
+                        bpnId: row.bpnId,
+                        taskIds: row.id,
+                        prcId: row.processInstanceId,
+                        prcNum: row.prcNum,
+                        prcName: row.prcName,
+                        prcType: row.prcType,
+                        disabledXX: true,
+                        verifySarStandard: true,
+                        index: this.approveRowIndex,
+                        processInstanceId: row.processInstanceId
+                    },
+                    params: {
+                        currentItem: row.currentItem
+                    }
+                }
+                if (unShowReceipt) {
+                    data.query.unShowReceipt = true
+                }
+                const routeUrl = this.$router.resolve(data)
+                window.open(routeUrl.href, '_blank')
+                // this.$router.push(data)
+            },
+            // table行选择事件
+            tableChange(row) {
+                this.tableRow = row
+            },
+            // 办理任务
+            handlingTasks() {
+                // 判断选中一条数据、未完成数据、当前登陆人数据
+                if (this.tableRow.length === 1 && !this.tableRow[0].endTime && this.tableRow[0].assigneeId === this.$store.getters.userInfo.userId) {
+                    if (this.$store.state.detailMap !== '') {
+                        const lastDetailMap = this.$store.getters.getLastDetailMap
+                        lastDetailMap.push(this.$store.state.detailMap)
+                        this.$store.commit('setLastDetailMap', JSON.stringify(lastDetailMap))
+                    }
+                    // this.tableRow[0].processType = this.$route.params.processType
+                    this.$store.commit('setDetailMap', this.$route.path)
+                    const row = {
+                        taskIds: this.tableRow[0].id,
+                        prcId: this.tableRow[0].processDefinitionId,
+                        prcNum: this.tableRow[0].prcNum,
+                        prcName: this.tableRow[0].prcName,
+                        prcType: this.tableRow[0].prcType,
+                        taskInfo: this.tableRow[0].name,
+                        tabsName: this.$route.query.tabsName
+                    }
+                    this.setHandleInfo((JSON.stringify(row)))
+                    const prcType = row.prcType
+                    switch (prcType) {
+                        // 法规入库及评估流程
+                        case '1':
+                            if (row.taskInfo === '法规工程师修改') {
+                                this.$router.push({
+                                    name: 'RuKuStep1',
+                                    query: {
+                                        taskIds: row.taskIds,
+                                        prcId: row.prcId,
+                                        prcNum: row.prcNum,
+                                        prcName: row.prcName,
+                                        prcType: row.prcType
+                                    }
+                                })
+                            } else if (row.taskInfo === '联络人分发FO') {
+                                this.$router.push({
+                                    name: 'RuKuStep2',
+                                    query: {
+                                        taskIds: row.taskIds,
+                                        prcId: row.prcId,
+                                        prcNum: row.prcNum,
+                                        prcName: row.prcName,
+                                        prcType: row.prcType
+                                    }
+                                })
+                            } else if (row.taskInfo === 'FO填写') {
+                                this.$router.push({
+                                    name: 'RuKuStep3',
+                                    query: {
+                                        taskIds: row.taskIds,
+                                        prcId: row.prcId,
+                                        prcNum: row.prcNum,
+                                        prcName: row.prcName,
+                                        prcType: row.prcType
+                                    }
+                                })
+                            } else if (row.taskInfo === '高级经理审批') {
+                                this.$router.push({
+                                    name: 'RuKuStep4',
+                                    query: {
+                                        taskIds: row.taskIds,
+                                        prcId: row.prcId,
+                                        prcNum: row.prcNum,
+                                        prcName: row.prcName,
+                                        prcType: row.prcType
+                                    }
+                                })
+                            } else if (row.taskInfo === '发起人汇总') {
+                                this.$router.push({
+                                    name: 'RuKuStep5',
+                                    query: {
+                                        taskIds: row.taskIds,
+                                        prcId: row.prcId,
+                                        prcNum: row.prcNum,
+                                        prcName: row.prcName,
+                                        prcType: row.prcType
+                                    }
+                                })
+                            }
+                            break
+
+                        // 法规入库及评估流程
+                        case '2':
+                            if (row.taskInfo === 'FO填写') {
+                                this.$router.push({
+                                    name: 'handle',
+                                    query: {
+                                        taskIds: row.taskIds,
+                                        prcId: row.prcId,
+                                        prcNum: row.prcNum,
+                                        prcName: row.prcName,
+                                        prcType: row.prcType
+                                    }
+                                })
+                            } else if (row.taskInfo === '再次下发' || row.taskInfo === '回退再次下发' || row.taskInfo === '单条回退再次下发') {
+                                this.$router.push({
+                                    name: 'handle1',
+                                    query: {
+                                        newtype: '1',
+                                        taskIds: row.taskIds,
+                                        prcId: row.prcId,
+                                        prcNum: row.prcNum,
+                                        prcName: row.prcName,
+                                        prcType: row.prcType
+                                    }
+                                })
+                            } else if (row.taskInfo === '高级经理审核') {
+                                this.$router.push({
+                                    name: 'handle2',
+                                    query: {
+                                        taskIds: row.taskIds,
+                                        prcId: row.prcId,
+                                        prcNum: row.prcNum,
+                                        prcName: row.prcName,
+                                        prcType: row.prcType
+                                    }
+                                })
+                            } else if (row.taskInfo === '发起人汇总') {
+                                this.$router.push({
+                                    name: 'handle3',
+                                    query: {
+                                        taskIds: row.taskIds,
+                                        prcId: row.prcId,
+                                        prcNum: row.prcNum,
+                                        prcName: row.prcName,
+                                        prcType: row.prcType
+                                    }
+                                })
+                            }
+                            break
+
+                        // 项目评估流程
+                        case '3':
+                            if (row.taskInfo === 'VSE分发') {
+                                this.$router.push({
+                                    name: 'XmpgSetp2'
+                                })
+                            } else if (row.taskInfo === 'DRE评估') {
+                                this.$router.push({
+                                    name: 'XmpgSetp3'
+                                })
+                            } else if (row.taskInfo === '一级审批') {
+                                this.$router.push({
+                                    name: 'XmpgSetp4'
+                                })
+                            } else if (row.taskInfo === '二级审批') {
+                                this.$router.push({
+                                    name: 'XmpgSetp5'
+                                })
+                            } else if (row.taskInfo === '发起人汇总') {
+                                this.$router.push({
+                                    name: 'XmpgSetp6'
+                                })
+                            }
+                            break
+
+                        // 企标制修订流程
+                        case '4':
+                            if (row.taskInfo === '起草人重新编辑') {
+                                this.$router.push({
+                                    name: 'qbzxdStep1',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '其他起草人审批') {
+                                this.$router.push({
+                                    name: 'qbzxdStep2-1',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '会签部门联络人转发') {
+                                this.$router.push({
+                                    name: 'qbzxdStep2-2',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === 'FO审批') {
+                                this.$router.push({
+                                    name: 'qbzxdStep3-1',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '会签部门审批') {
+                                this.$router.push({
+                                    name: 'qbzxdStep3-2',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '高级经理审批') {
+                                this.$router.push({
+                                    name: 'qbzxdStep4',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '企标工程师审批') {
+                                this.$router.push({
+                                    name: 'qbzxdStep5',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            }
+                            break
+
+                        case '5':
+                            if (row.taskInfo === '填写计划') {
+                                this.$router.push({
+                                    name: 'zgStep2'
+                                })
+                            } else if (row.taskInfo === '审批计划') {
+                                this.$router.push({
+                                    name: 'zgStep3'
+                                })
+                            } else if (row.taskInfo === '设计方案') {
+                                this.$router.push({
+                                    name: 'zgStep4'
+                                })
+                            } else if (row.taskInfo === '审核设计') {
+                                this.$router.push({
+                                    name: 'zgStep5'
+                                })
+                            } else if (row.taskInfo === '验证结果') {
+                                this.$router.push({
+                                    name: 'zgStep6'
+                                })
+                            } else if (row.taskInfo === '审核验证') {
+                                this.$router.push({
+                                    name: 'zgStep7'
+                                })
+                            } else if (row.taskInfo === '更改落实') {
+                                this.$router.push({
+                                    name: 'zgStep8'
+                                })
+                            } else if (row.taskInfo === '审核更改') {
+                                this.$router.push({
+                                    name: 'zgStep9'
+                                })
+                            }
+                            break
+
+                        case '6':
+                            if (row.taskInfo === '起草人修订') {
+                                this.$router.push({
+                                    name: 'QbzxdsqStep4'
+                                })
+                            } else if (row.taskInfo === 'FO审批') {
+                                this.$router.push({
+                                    name: 'QbzxdsqStep2'
+                                })
+                            } else if (row.taskInfo === '高级经理审批') {
+                                this.$router.push({
+                                    name: 'QbzxdsqStep3'
+                                })
+                            }
+                            break
+
+                        // 企标废止流程
+                        case '7':
+                            if (row.taskInfo === '起草人修改') {
+                                this.$router.push({
+                                    name: 'qbfzStep1',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === 'FO审批') {
+                                this.$router.push({
+                                    name: 'qbfzStep2',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '高级经理审批') {
+                                this.$router.push({
+                                    name: 'qbfzStep3',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '总监审批') {
+                                this.$router.push({
+                                    name: 'qbfzStep4',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '企标工程师审批') {
+                                this.$router.push({
+                                    name: 'qbfzStep5',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            }
+                            break
+
+                        // 企标延期制修订审批流程
+                        case '8':
+                            if (row.taskInfo === '高级经理审核') {
+                                this.$router.push({
+                                    name: 'QbyqzxdspStep2'
+                                })
+                            } else if (row.taskInfo === '总监审批') {
+                                this.$router.push({
+                                    name: 'QbyqzxdspStep3'
+                                })
+                            } else if (row.taskInfo === '主起草人重新申请') {
+                                this.$router.push({
+                                    name: 'QbyqzxdspStep4'
+                                })
+                            }
+                            break
+                        // 采购流程
+                        case '9':
+                            if (row.taskInfo === '高级经理审批') {
+                                this.$router.push({
+                                    path: '/bzcg/step2',
+                                    query: {
+                                        prcName: row.prcName,
+                                        prcNum: row.prcNum,
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '采购员审批') {
+                                this.$router.push({
+                                    path: '/bzcg/step3',
+                                    query: {
+                                        prcName: row.prcName,
+                                        prcNum: row.prcNum,
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '项目经理或者EQ总监审批') {
+                                this.$router.push({
+                                    path: '/bzcg/step4',
+                                    query: {
+                                        prcName: row.prcName,
+                                        prcNum: row.prcNum,
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '再次发起申请') {
+                                this.$router.push({
+                                    path: '/bzcg/step1-1',
+                                    query: {
+                                        prcName: row.prcName,
+                                        prcNum: row.prcNum,
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            }
+                            break
+                        // 会前流程
+                        case '10':
+                            if (row.taskInfo === '领导审批') {
+                                this.$router.push({
+                                    name: 'HqsqStep2'
+                                })
+                            } else if (row.taskInfo === '工程师修改') {
+                                this.$router.push({
+                                    name: 'HqsqStep3'
+                                })
+                            }
+                            break
+                        // 企标制修订评估流程
+                        case '11':
+                            if (row.taskInfo === 'FO审批') {
+                                this.$router.push({
+                                    name: 'QbzxdpgStep2'
+                                })
+                            } else if (row.taskInfo === '主起草人填写') {
+                                this.$router.push({
+                                    name: 'QbzxdpgStep3'
+                                })
+                            } else if (row.taskInfo === '高级经理审批') {
+                                this.$router.push({
+                                    name: 'QbzxdpgStep4'
+                                })
+                            }
+                            break
+                        // 企标勘误流程
+                        case '12':
+                            if (row.taskInfo === 'FO审批') {
+                                this.$router.push({
+                                    name: 'QbkwStep2'
+                                })
+                            } else if (row.taskInfo === '企标工程师发布') {
+                                this.$router.push({
+                                    name: 'QbkwStep3'
+                                })
+                            } else if (row.taskInfo === '主起草人修改') {
+                                this.$router.push({
+                                    name: 'QbkwStep4'
+                                })
+                            }
+                            break
+
+                        // 政策入库及技术评估
+                        case '14':
+                            if (row.taskInfo === '再次下发') {
+                                this.$router.push({
+                                    name: 'zcrk&jspgStep1',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === 'FO填写SVPPS') {
+                                this.$router.push({
+                                    name: 'zcrk&jspgStep2',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '标准采购员审批') {
+                                this.$router.push({
+                                    path: '/bzfy/step3',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === 'FO审批') {
+                                this.$router.push({
+                                    name: 'zcrk&jspgStep3',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === 'FO填写时间') {
+                                this.$router.push({
+                                    name: 'zcrk&jspgStep3',
+                                    query: {
+                                        taskIds: row.taskIds,
+                                        taskInfo: row.taskInfo
+                                    }
+                                })
+                            }
+                            break
+
+                        // 标准翻译流程
+                        case '15':
+                            if (row.taskInfo === '高级经理审批') {
+                                this.$router.push({
+                                    path: '/bzfy/step2',
+                                    query: {
+                                        taskIds: row.taskIds,
+                                        prcName: row.prcName,
+                                        prcNum: row.prcNum
+                                    }
+                                })
+                            } else if (row.taskInfo === '标准采购员审批') {
+                                this.$router.push({
+                                    path: '/bzfy/step3',
+                                    query: {
+                                        prcName: row.prcName,
+                                        prcNum: row.prcNum,
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '项目经理或EQ总监审批') {
+                                this.$router.push({
+                                    path: '/bzfy/step4',
+                                    query: {
+                                        prcName: row.prcName,
+                                        prcNum: row.prcNum,
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '再次发起申请') {
+                                this.$router.push({
+                                    path: '/bzfy/step1-1',
+                                    query: {
+                                        prcName: row.prcName,
+                                        prcNum: row.prcNum,
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            }
+                            break
+                        // 会后管理流程
+                        case '16':
+                            if (row.taskInfo === '工程师发起流程' || row.taskInfo === '主起草人修改') {
+                                this.$router.push({
+                                    name: 'HhglStep1'
+                                })
+                            } else if (row.taskInfo === '领导审批') {
+                                this.$router.push({
+                                    name: 'HhglStep2'
+                                })
+                            }
+                            break
+                        // 企标备案流程
+                        case '17':
+                            if (row.taskInfo === 'VSE/认证工程师/法规工程师审批') {
+                                this.$router.push({
+                                    name: 'QbbaStep2'
+                                })
+                            } else if (row.taskInfo === '企标工程师审批') {
+                                this.$router.push({
+                                    name: 'QbbaStep3'
+                                })
+                            } else if (row.taskInfo === '整车性能集成工程师审核') {
+                                this.$router.push({
+                                    name: 'QbbaStep4'
+                                })
+                            } else if (row.taskInfo === '总监审核') {
+                                this.$router.push({
+                                    name: 'QbbaStep5'
+                                })
+                            } else if (row.taskInfo === '企标备案专家审批') {
+                                this.$router.push({
+                                    name: 'QbbaStep6'
+                                })
+                            } else if (row.taskInfo === '项目总工审批') {
+                                this.$router.push({
+                                    name: 'QbbaStep7'
+                                })
+                            } else if (row.taskInfo === '再次发起') {
+                                this.$router.push({
+                                    name: 'QbbaStep8'
+                                })
+                            }
+                            break
+                        // 海外标准法规清单发布/更新流程
+                        case '18':
+                            if (row.taskInfo === '会签审批') {
+                                this.$router.push({
+                                    name: 'bzqdStep2'
+                                })
+                            } else if (row.taskInfo === '发起人确认') {
+                                this.$router.push({
+                                    name: 'bzqdStep3'
+                                })
+                            }
+                            break
+                        // 企标复审流程
+                        case '19':
+                            if (row.taskInfo === '法规联络人发起复审或企标工程师选择法规联络人') {
+                                this.$router.push({
+                                    path: '/qbfs/step1',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            } else if (row.taskInfo === '选择法规联络人') {
+                                this.$router.push({
+                                    path: '/qbfs/step2',
+                                    query: {
+                                        taskIds: row.taskIds
+                                    }
+                                })
+                            }
+                            break
+                    }
+                } else {
+                    this.$message.warning('请选择一条未完成以及受理人是本人的数据')
+                }
+            },
+            // 调整处理人
+            adjustmentHandler() {
+                if (this.tableRow.length === 1 && !this.tableRow[0].endTime) {
+                    this.drawerModal = true
+                    this.drawerTitle = '调整处理人'
+                    this.selectPeople = this.tableRow[0]
+                } else {
+                    this.$message.warning('请选择一条未完成的数据')
+                }
+            },
+            // 催办
+            urgeRow() {
+                if (this.tableRow.length === 1 && !this.tableRow[0].endTime) {
+                    this.$confirm('您确认要催办该任务吗', '提示', {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                        type: 'warning',
+                        confirmButtonClass: 'common-button-primary',
+                        roundButton: true
+                    }).then(() => {
+                        this.urge(this.tableRow[0])
+                    })
+                } else {
+                    this.$message.warning('请选择一条未完成的数据')
+                }
+            },
+            // 清空条件
+            clearanceCondition() {
+                this.completeFlagType = true
+                this.tableRow = []
+            },
+            back() {
+                this.$router.push({
+                    name: 'ProcessCenter',
+                    query: {
+                        tabsName: this.$route.query.tabsName
+                    }
+                })
+            },
+            // 调整处理人确定事件
+            addTree(checkedList) {
+                if (checkedList.length !== 1) {
+                    this.$message.warning('请选择一个处理人进行调整')
+                } else {
+                    this.assigneeNewLoading = true
+                    changeAssigneeNew({
+                        taskId: this.selectPeople.id, // 任务id
+                        assignee: checkedList[0].userId, // 被委托人
+                        userId: this.selectPeople.assigneeId, // 委托人
+                        pId: this.selectPeople.processInstanceId // 流程实例
+                    }).then(res => {
+                        this.assigneeNewLoading = false
+                        if (res.success) {
+                            this.drawerModal = false
+                            this.$message.success('调整成功')
+                            this.processNum()
+                            this.processTable()
+                        } else {
+                            this.$message.warning(res.message)
+                        }
+                    })
+                }
+            },
+            /**
+             * @description: 流程催办
+             * @author: chenxiaoxi
+             * @date: 2018/10/11 13:41:45
+             */
+            urge(row) {
+                this.$http.postData('person/personMsg/saveNew',
+                    {
+                        msgContent: '流程编号为' + row.prcNum + '的流程，请尽快办理。',
+                        msgTitle: '流程编号' + row.prcNum,
+                        userId: row.assigneeId,
+                        msgType: 'TEXT'
+                    },
+                    {
+                        loading: 'loading',
+                        _this: this
+                    }, res => {
+                        this.clearanceCondition()
+                        this.processTable()
+                        this.$message.success('催办成功')
+                    }, e => {
+                    })
+            },
+            // 请求转换流程图
+            processNum() {
+                axios.request({
+                    url: '/api/lawss/activiti/getImg?_t=' + new Date().getTime(),
+                    responseType: 'blob',
+                    method: 'get',
+                    params: {
+                        prcNum: this.$route.query.prcNum
+                    }
+                }).then(res => {
+                    // let blob = new Blob([res.data], {type: 'image/jpg'})
+                    // let url = window.URL.createObjectURL(res.data)
+                    this.processStep = window.URL.createObjectURL(res.data)
+                })
+            },
+            // 请求列表
+            processTable() {
+                let url = ''
+                let query = {}
+                if (this.$route.query.oldAndNew == 'new'){
+                    url = '/lawss/activiti/queryFlowHistoryList'
+                    query = {
+                        actiProcInstId: this.$route.query.actiProcInstId,
+                        flowType: this.$route.query.flowType,
+                    }
+                }else{
+                    url = 'lawss/activiti/get_list_by_instance'
+                    query = {
+                        prcNum: this.$route.query.prcNum,
+                        sortWord: this.shunxu ? this.paixu : '',
+                        shunxu: this.shunxu
+                    }
+                }
+                this.$http.get(url, query, {
+                    loading: 'loading',
+                    _this: this
+                }, res => {
+                    this.detailData = res
+                }, e => {
+                })
+            },
+            ...mapMutations(['setProcess', 'setHandleInfo', 'setPrcLastDetail']),
+            processFlag(res) {
+                //   if (res.data.hisTaskExcelVOList[0].processTypeFlag === '1' || res.data.hisTaskExcelVOList[0].processTypeFlag === '2' || res.data.hisTaskExcelVOList[0].processTypeFlag === '3' || res.data.hisTaskExcelVOList[0].processTypeFlag === '4' ||
+                //     res.data.hisTaskExcelVOList[0].processTypeFlag === '5' || res.data.hisTaskExcelVOList[0].processTypeFlag === '6' || res.data.hisTaskExcelVOList[0].processTypeFlag === '8') {
+                //     return false
+                //   } else {
+                //     return true
+                //   }
+                // }
+                return false
+            },
+            // 导出事件
+            exportStandard() {
+                const ids = []
+                if (this.tableRow.length > 0) {
+                    this.tableRow.map(item => {
+                        ids.push(item.id)
+                    })
+                } else {
+                    this.detailData.map(item => {
+                        ids.push(item.id)
+                    })
+                }
+                window.location.href = '/api/lawss/activiti/exportProcessDetailInfo?idAndSartypeList=' + ids.join(',') + '&prcNum=' + this.$route.query.prcNum
+                this.$message.success('导出信息成功')
+            },
+            // 表格排序
+            sortChange(sortObj) {
+                if (sortObj.column.order !== 'normal') {
+                    this.shunxu = ''
+                    this.paixu = ''
+                    const order = sortObj.column.order
+                    switch (sortObj.column.property) {
+                        // 任务步骤
+                        case 'name' :
+                            // 后台联调
+                            this.paixu = 'name'
+                            if (order === 'ascending') {
+                                this.shunxu = 'asc'
+                            } else if (order === 'descending') {
+                                this.shunxu = 'desc'
+                            }
+                            break
+                        // 任务受理人
+                        case 'assignee' :
+                            // 后台联调
+                            this.paixu = 'assignee'
+                            if (order === 'ascending') {
+                                this.shunxu = 'asc'
+                            } else if (order === 'descending') {
+                                this.shunxu = 'desc'
+                            }
+                            break
+                        // 创建时间
+                        case 'createTime' :
+                            // 后台联调
+                            this.paixu = 'startTime'
+                            if (order === 'ascending') {
+                                this.shunxu = 'asc'
+                            } else if (order === 'descending') {
+                                this.shunxu = 'desc'
+                            }
+                            break
+                    }
+                }
+                this.processTable()
+            },
+            // 流程审批按钮是否显示
+            getApproveShow() {
+                this.$http.get('lawss/activiti/get_gather_by_instance', {
+                    prcNum: this.$route.query.prcNum,
+                    sortWord: this.shunxu ? this.paixu : '',
+                    shunxu: this.shunxu
+                }, {
+                    loading: 'loading',
+                    _this: this
+                }, res => {
+                    this.approveShow = res[res.length - 1].isGather
+                    this.approveRowIndex = res[res.length - 1].index
+                }, e => {
+                })
+            },
+
+            arrangeFromTheLeft(index) {
+                let num = Math.ceil(index / this.num)
+                if (num % 2 == 0) {
+                    return true
+                }
+                return false
+            },
+            leftArrow(index) {
+                let num = Math.ceil(index / this.num)
+                if (num % 2 == 0) {
+                    if (index == this.num * num && this.nameList.length != index) {
+                        return false
+                    }
+                } else {
+                    if (index > this.num) {
+                        if (index == this.num * (num - 1) + 1) {
+                            return false
+                        }
+                    }
+                }
+                return true
+            },
+            isVerticalLine(index) {
+                let num = Math.ceil(index / this.num)
+                if (index % this.num == 0 && this.nameList.length != index) {
+                    return true
+                }
+                if (num == index / this.num && num % 3 == 0) {
+                    return true
+                }
+                if (num == index / this.num && index <= this.num) {
+                    return true
+                }
+                return false
+            },
+            isProcessEnd(index) {
+                let num = Math.ceil(index / this.num)
+                if (num % 2 == 0) {
+                    return false
+                } else {
+                    if (num == index / this.num && index <= this.num) {
+                        return false
+                    }
+                    if (num == index / this.num && num % 3 == 0) {
+                        return false
+                    }
+                    return true
+                }
+            },
+            isProcessEndOne(index) {
+                let num = Math.ceil(index / this.num)
+                if (num == index / this.num && index <= this.num) {
+                    return true
+                }
+                if (num == index / this.num && num % 3 == 0) {
+                    return true
+                }
+                return false
+            },
+            backdrop(status) {
+                if (status == 1) {
+                    return {
+                        background: '#bcddff',
+                        border: '1px #79c8ff solid',
+                    }
+                } else if (status == 2) {
+                    return {
+                        background: '#ebfccf',
+                        border: '1px #8bcb71 solid',
+                    }
+                } else if (status == 3) {
+                    return {
+                        background: '#fff',
+                        border: '1px #d6d6d6 solid',
+                    }
+                }
+            },
         },
-        params: {
-          currentItem: row.currentItem
-        }
-      }
-      if (unShowReceipt) {
-        data.query.unShowReceipt = true
-      }
-      const routeUrl = this.$router.resolve(data)
-      window.open(routeUrl.href, '_blank')
-      // this.$router.push(data)
-    },
-    // table行选择事件
-    tableChange (row) {
-      this.tableRow = row
-    },
-    // 办理任务
-    handlingTasks () {
-      // 判断选中一条数据、未完成数据、当前登陆人数据
-      if (this.tableRow.length === 1 && !this.tableRow[0].endTime && this.tableRow[0].assigneeId === this.$store.getters.userInfo.userId) {
-        if (this.$store.state.detailMap !== '') {
-          const lastDetailMap = this.$store.getters.getLastDetailMap
-          lastDetailMap.push(this.$store.state.detailMap)
-          this.$store.commit('setLastDetailMap', JSON.stringify(lastDetailMap))
-        }
-        // this.tableRow[0].processType = this.$route.params.processType
-        this.$store.commit('setDetailMap', this.$route.path)
-        const row = {
-          taskIds: this.tableRow[0].id,
-          prcId: this.tableRow[0].processDefinitionId,
-          prcNum: this.tableRow[0].prcNum,
-          prcName: this.tableRow[0].prcName,
-          prcType: this.tableRow[0].prcType,
-          taskInfo: this.tableRow[0].name,
-          tabsName: this.$route.query.tabsName
-        }
-        this.setHandleInfo((JSON.stringify(row)))
-        const prcType = row.prcType
-        switch (prcType) {
-          // 法规入库及评估流程
-          case '1':
-            if (row.taskInfo === '法规工程师修改') {
-              this.$router.push({
-                name: 'RuKuStep1',
-                query: {
-                  taskIds: row.taskIds,
-                  prcId: row.prcId,
-                  prcNum: row.prcNum,
-                  prcName: row.prcName,
-                  prcType: row.prcType
-                }
-              })
-            } else if (row.taskInfo === '联络人分发FO') {
-              this.$router.push({
-                name: 'RuKuStep2',
-                query: {
-                  taskIds: row.taskIds,
-                  prcId: row.prcId,
-                  prcNum: row.prcNum,
-                  prcName: row.prcName,
-                  prcType: row.prcType
-                }
-              })
-            } else if (row.taskInfo === 'FO填写') {
-              this.$router.push({
-                name: 'RuKuStep3',
-                query: {
-                  taskIds: row.taskIds,
-                  prcId: row.prcId,
-                  prcNum: row.prcNum,
-                  prcName: row.prcName,
-                  prcType: row.prcType
-                }
-              })
-            } else if (row.taskInfo === '高级经理审批') {
-              this.$router.push({
-                name: 'RuKuStep4',
-                query: {
-                  taskIds: row.taskIds,
-                  prcId: row.prcId,
-                  prcNum: row.prcNum,
-                  prcName: row.prcName,
-                  prcType: row.prcType
-                }
-              })
-            } else if (row.taskInfo === '发起人汇总') {
-              this.$router.push({
-                name: 'RuKuStep5',
-                query: {
-                  taskIds: row.taskIds,
-                  prcId: row.prcId,
-                  prcNum: row.prcNum,
-                  prcName: row.prcName,
-                  prcType: row.prcType
-                }
-              })
-            }
-            break
 
-            // 法规入库及评估流程
-          case '2':
-            if (row.taskInfo === 'FO填写') {
-              this.$router.push({
-                name: 'handle',
-                query: {
-                  taskIds: row.taskIds,
-                  prcId: row.prcId,
-                  prcNum: row.prcNum,
-                  prcName: row.prcName,
-                  prcType: row.prcType
-                }
-              })
-            } else if (row.taskInfo === '再次下发' || row.taskInfo === '回退再次下发' || row.taskInfo === '单条回退再次下发') {
-              this.$router.push({
-                name: 'handle1',
-                query: {
-                  newtype: '1',
-                  taskIds: row.taskIds,
-                  prcId: row.prcId,
-                  prcNum: row.prcNum,
-                  prcName: row.prcName,
-                  prcType: row.prcType
-                }
-              })
-            } else if (row.taskInfo === '高级经理审核') {
-              this.$router.push({
-                name: 'handle2',
-                query: {
-                  taskIds: row.taskIds,
-                  prcId: row.prcId,
-                  prcNum: row.prcNum,
-                  prcName: row.prcName,
-                  prcType: row.prcType
-                }
-              })
-            } else if (row.taskInfo === '发起人汇总') {
-              this.$router.push({
-                name: 'handle3',
-                query: {
-                  taskIds: row.taskIds,
-                  prcId: row.prcId,
-                  prcNum: row.prcNum,
-                  prcName: row.prcName,
-                  prcType: row.prcType
-                }
-              })
+        components: {},
+        props: {},
+        computed: {
+            listNoDataText() {
+                return this.processType === 1 ? '暂无待办流程' : '暂无已办流程'
+            },
+            urgeRowMenu() {
+                let flag = false
+                this.$store.getters.getMenuList.map((menu) => {
+                    if (menu.id === 'ZDE6GT7UG5' || this.loginPeople === this.$store.getters.userInfo.userId) {
+                        flag = true
+                    }
+                })
+                return flag
+            },
+            /**
+             * 调整处理人按钮是否显示
+             */
+            tzclrEnable() {
+                return this.$route.query.tabsName === 'MonitorProcess'
             }
-            break
+        },
+        watch: {},
+        beforeUpdate() {
+            if (this.detailData.length > 0) {
+                sessionStorage.setItem('processInstance', JSON.stringify(this.detailData[0]))
+            }
+        },
+        mounted() {
 
-            // 项目评估流程
-          case '3':
-            if (row.taskInfo === 'VSE分发') {
-              this.$router.push({
-                name: 'XmpgSetp2'
-              })
-            } else if (row.taskInfo === 'DRE评估') {
-              this.$router.push({
-                name: 'XmpgSetp3'
-              })
-            } else if (row.taskInfo === '一级审批') {
-              this.$router.push({
-                name: 'XmpgSetp4'
-              })
-            } else if (row.taskInfo === '二级审批') {
-              this.$router.push({
-                name: 'XmpgSetp5'
-              })
-            } else if (row.taskInfo === '发起人汇总') {
-              this.$router.push({
-                name: 'XmpgSetp6'
-              })
-            }
-            break
-
-            // 企标制修订流程
-          case '4':
-            if (row.taskInfo === '起草人重新编辑') {
-              this.$router.push({
-                name: 'qbzxdStep1',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '其他起草人审批') {
-              this.$router.push({
-                name: 'qbzxdStep2-1',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '会签部门联络人转发') {
-              this.$router.push({
-                name: 'qbzxdStep2-2',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === 'FO审批') {
-              this.$router.push({
-                name: 'qbzxdStep3-1',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '会签部门审批') {
-              this.$router.push({
-                name: 'qbzxdStep3-2',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '高级经理审批') {
-              this.$router.push({
-                name: 'qbzxdStep4',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '企标工程师审批') {
-              this.$router.push({
-                name: 'qbzxdStep5',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            }
-            break
-
-          case '5':
-            if (row.taskInfo === '填写计划') {
-              this.$router.push({
-                name: 'zgStep2'
-              })
-            } else if (row.taskInfo === '审批计划') {
-              this.$router.push({
-                name: 'zgStep3'
-              })
-            } else if (row.taskInfo === '设计方案') {
-              this.$router.push({
-                name: 'zgStep4'
-              })
-            } else if (row.taskInfo === '审核设计') {
-              this.$router.push({
-                name: 'zgStep5'
-              })
-            } else if (row.taskInfo === '验证结果') {
-              this.$router.push({
-                name: 'zgStep6'
-              })
-            } else if (row.taskInfo === '审核验证') {
-              this.$router.push({
-                name: 'zgStep7'
-              })
-            } else if (row.taskInfo === '更改落实') {
-              this.$router.push({
-                name: 'zgStep8'
-              })
-            } else if (row.taskInfo === '审核更改') {
-              this.$router.push({
-                name: 'zgStep9'
-              })
-            }
-            break
-
-          case '6':
-            if (row.taskInfo === '起草人修订') {
-              this.$router.push({
-                name: 'QbzxdsqStep4'
-              })
-            } else if (row.taskInfo === 'FO审批') {
-              this.$router.push({
-                name: 'QbzxdsqStep2'
-              })
-            } else if (row.taskInfo === '高级经理审批') {
-              this.$router.push({
-                name: 'QbzxdsqStep3'
-              })
-            }
-            break
-
-            // 企标废止流程
-          case '7':
-            if (row.taskInfo === '起草人修改') {
-              this.$router.push({
-                name: 'qbfzStep1',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === 'FO审批') {
-              this.$router.push({
-                name: 'qbfzStep2',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '高级经理审批') {
-              this.$router.push({
-                name: 'qbfzStep3',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '总监审批') {
-              this.$router.push({
-                name: 'qbfzStep4',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '企标工程师审批') {
-              this.$router.push({
-                name: 'qbfzStep5',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            }
-            break
-
-            // 企标延期制修订审批流程
-          case '8':
-            if (row.taskInfo === '高级经理审核') {
-              this.$router.push({
-                name: 'QbyqzxdspStep2'
-              })
-            } else if (row.taskInfo === '总监审批') {
-              this.$router.push({
-                name: 'QbyqzxdspStep3'
-              })
-            } else if (row.taskInfo === '主起草人重新申请') {
-              this.$router.push({
-                name: 'QbyqzxdspStep4'
-              })
-            }
-            break
-            // 采购流程
-          case '9':
-            if (row.taskInfo === '高级经理审批') {
-              this.$router.push({
-                path: '/bzcg/step2',
-                query: {
-                  prcName: row.prcName,
-                  prcNum: row.prcNum,
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '采购员审批') {
-              this.$router.push({
-                path: '/bzcg/step3',
-                query: {
-                  prcName: row.prcName,
-                  prcNum: row.prcNum,
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '项目经理或者EQ总监审批') {
-              this.$router.push({
-                path: '/bzcg/step4',
-                query: {
-                  prcName: row.prcName,
-                  prcNum: row.prcNum,
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '再次发起申请') {
-              this.$router.push({
-                path: '/bzcg/step1-1',
-                query: {
-                  prcName: row.prcName,
-                  prcNum: row.prcNum,
-                  taskIds: row.taskIds
-                }
-              })
-            }
-            break
-            // 会前流程
-          case '10':
-            if (row.taskInfo === '领导审批') {
-              this.$router.push({
-                name: 'HqsqStep2'
-              })
-            } else if (row.taskInfo === '工程师修改') {
-              this.$router.push({
-                name: 'HqsqStep3'
-              })
-            }
-            break
-            // 企标制修订评估流程
-          case '11':
-            if (row.taskInfo === 'FO审批') {
-              this.$router.push({
-                name: 'QbzxdpgStep2'
-              })
-            } else if (row.taskInfo === '主起草人填写') {
-              this.$router.push({
-                name: 'QbzxdpgStep3'
-              })
-            } else if (row.taskInfo === '高级经理审批') {
-              this.$router.push({
-                name: 'QbzxdpgStep4'
-              })
-            }
-            break
-            // 企标勘误流程
-          case '12':
-            if (row.taskInfo === 'FO审批') {
-              this.$router.push({
-                name: 'QbkwStep2'
-              })
-            } else if (row.taskInfo === '企标工程师发布') {
-              this.$router.push({
-                name: 'QbkwStep3'
-              })
-            } else if (row.taskInfo === '主起草人修改') {
-              this.$router.push({
-                name: 'QbkwStep4'
-              })
-            }
-            break
-
-            // 政策入库及技术评估
-          case '14':
-            if (row.taskInfo === '再次下发') {
-              this.$router.push({
-                name: 'zcrk&jspgStep1',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === 'FO填写SVPPS') {
-              this.$router.push({
-                name: 'zcrk&jspgStep2',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '标准采购员审批') {
-              this.$router.push({
-                path: '/bzfy/step3',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === 'FO审批') {
-              this.$router.push({
-                name: 'zcrk&jspgStep3',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === 'FO填写时间') {
-              this.$router.push({
-                name: 'zcrk&jspgStep3',
-                query: {
-                  taskIds: row.taskIds,
-                  taskInfo: row.taskInfo
-                }
-              })
-            }
-            break
-
-            // 标准翻译流程
-          case '15':
-            if (row.taskInfo === '高级经理审批') {
-              this.$router.push({
-                path: '/bzfy/step2',
-                query: {
-                  taskIds: row.taskIds,
-                  prcName: row.prcName,
-                  prcNum: row.prcNum
-                }
-              })
-            } else if (row.taskInfo === '标准采购员审批') {
-              this.$router.push({
-                path: '/bzfy/step3',
-                query: {
-                  prcName: row.prcName,
-                  prcNum: row.prcNum,
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '项目经理或EQ总监审批') {
-              this.$router.push({
-                path: '/bzfy/step4',
-                query: {
-                  prcName: row.prcName,
-                  prcNum: row.prcNum,
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '再次发起申请') {
-              this.$router.push({
-                path: '/bzfy/step1-1',
-                query: {
-                  prcName: row.prcName,
-                  prcNum: row.prcNum,
-                  taskIds: row.taskIds
-                }
-              })
-            }
-            break
-            // 会后管理流程
-          case '16':
-            if (row.taskInfo === '工程师发起流程' || row.taskInfo === '主起草人修改') {
-              this.$router.push({
-                name: 'HhglStep1'
-              })
-            } else if (row.taskInfo === '领导审批') {
-              this.$router.push({
-                name: 'HhglStep2'
-              })
-            }
-            break
-            // 企标备案流程
-          case '17':
-            if (row.taskInfo === 'VSE/认证工程师/法规工程师审批') {
-              this.$router.push({
-                name: 'QbbaStep2'
-              })
-            } else if (row.taskInfo === '企标工程师审批') {
-              this.$router.push({
-                name: 'QbbaStep3'
-              })
-            } else if (row.taskInfo === '整车性能集成工程师审核') {
-              this.$router.push({
-                name: 'QbbaStep4'
-              })
-            } else if (row.taskInfo === '总监审核') {
-              this.$router.push({
-                name: 'QbbaStep5'
-              })
-            } else if (row.taskInfo === '企标备案专家审批') {
-              this.$router.push({
-                name: 'QbbaStep6'
-              })
-            } else if (row.taskInfo === '项目总工审批') {
-              this.$router.push({
-                name: 'QbbaStep7'
-              })
-            } else if (row.taskInfo === '再次发起') {
-              this.$router.push({
-                name: 'QbbaStep8'
-              })
-            }
-            break
-            // 海外标准法规清单发布/更新流程
-          case '18':
-            if (row.taskInfo === '会签审批') {
-              this.$router.push({
-                name: 'bzqdStep2'
-              })
-            } else if (row.taskInfo === '发起人确认') {
-              this.$router.push({
-                name: 'bzqdStep3'
-              })
-            }
-            break
-            // 企标复审流程
-          case '19':
-            if (row.taskInfo === '法规联络人发起复审或企标工程师选择法规联络人') {
-              this.$router.push({
-                path: '/qbfs/step1',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            } else if (row.taskInfo === '选择法规联络人') {
-              this.$router.push({
-                path: '/qbfs/step2',
-                query: {
-                  taskIds: row.taskIds
-                }
-              })
-            }
-            break
-        }
-      } else {
-        this.$message.warning('请选择一条未完成以及受理人是本人的数据')
-      }
-    },
-    // 调整处理人
-    adjustmentHandler () {
-      if (this.tableRow.length === 1 && !this.tableRow[0].endTime) {
-        this.drawerModal = true
-        this.drawerTitle = '调整处理人'
-        this.selectPeople = this.tableRow[0]
-      } else {
-        this.$message.warning('请选择一条未完成的数据')
-      }
-    },
-    // 催办
-    urgeRow () {
-      if (this.tableRow.length === 1 && !this.tableRow[0].endTime) {
-        this.$confirm('您确认要催办该任务吗', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-          confirmButtonClass: 'common-button-primary',
-          roundButton: true
-        }).then(() => {
-          this.urge(this.tableRow[0])
-        })
-      } else {
-        this.$message.warning('请选择一条未完成的数据')
-      }
-    },
-    // 清空条件
-    clearanceCondition () {
-      this.completeFlagType = true
-      this.tableRow = []
-    },
-    back () {
-      this.$router.push({
-        name: 'ProcessCenter',
-        query: {
-          tabsName: this.$route.query.tabsName
-        }
-      })
-    },
-    // 调整处理人确定事件
-    addTree (checkedList) {
-      if (checkedList.length !== 1) {
-        this.$message.warning('请选择一个处理人进行调整')
-      } else {
-        this.assigneeNewLoading = true
-        changeAssigneeNew({
-          taskId: this.selectPeople.id, // 任务id
-          assignee: checkedList[0].userId, // 被委托人
-          userId: this.selectPeople.assigneeId, // 委托人
-          pId: this.selectPeople.processInstanceId // 流程实例
-        }).then(res => {
-          this.assigneeNewLoading = false
-          if (res.success) {
-            this.drawerModal = false
-            this.$message.success('调整成功')
+            this.getProcessList()
             this.processNum()
             this.processTable()
-          } else {
-            this.$message.warning(res.message)
-          }
-        })
-      }
-    },
-    /**
-     * @description: 流程催办
-     * @author: chenxiaoxi
-     * @date: 2018/10/11 13:41:45
-     */
-    urge (row) {
-      this.$http.postData('person/personMsg/saveNew',
-        {
-          msgContent: '流程编号为' + row.prcNum + '的流程，请尽快办理。',
-          msgTitle: '流程编号' + row.prcNum,
-          userId: row.assigneeId,
-          msgType: 'TEXT'
-        },
-        {
-          loading: 'loading',
-          _this: this
-        }, res => {
-          this.clearanceCondition()
-          this.processTable()
-          this.$message.success('催办成功')
-        }, e => {
-        })
-    },
-    // 请求转换流程图
-    processNum () {
-      axios.request({
-        url: '/api/lawss/activiti/getImg?_t=' + new Date().getTime(),
-        responseType: 'blob',
-        method: 'get',
-        params: {
-          prcNum: this.$route.query.prcNum
+            this.getApproveShow()
         }
-      }).then(res => {
-        // let blob = new Blob([res.data], {type: 'image/jpg'})
-        // let url = window.URL.createObjectURL(res.data)
-        this.processStep = window.URL.createObjectURL(res.data)
-      })
-    },
-    // 请求列表
-    processTable () {
-      this.$http.get('lawss/activiti/get_list_by_instance', {
-        prcNum: this.$route.query.prcNum,
-        sortWord: this.shunxu ? this.paixu : '',
-        shunxu: this.shunxu
-      }, {
-        loading: 'loading',
-        _this: this
-      }, res => {
-        this.detailData = res
-      }, e => {})
-    },
-    ...mapMutations([ 'setProcess', 'setHandleInfo', 'setPrcLastDetail' ]),
-    processFlag (res) {
-      //   if (res.data.hisTaskExcelVOList[0].processTypeFlag === '1' || res.data.hisTaskExcelVOList[0].processTypeFlag === '2' || res.data.hisTaskExcelVOList[0].processTypeFlag === '3' || res.data.hisTaskExcelVOList[0].processTypeFlag === '4' ||
-      //     res.data.hisTaskExcelVOList[0].processTypeFlag === '5' || res.data.hisTaskExcelVOList[0].processTypeFlag === '6' || res.data.hisTaskExcelVOList[0].processTypeFlag === '8') {
-      //     return false
-      //   } else {
-      //     return true
-      //   }
-      // }
-      return false
-    },
-    // 导出事件
-    exportStandard () {
-      const ids = []
-      if (this.tableRow.length > 0) {
-        this.tableRow.map(item => {
-          ids.push(item.id)
-        })
-      } else {
-        this.detailData.map(item => {
-          ids.push(item.id)
-        })
-      }
-      window.location.href = '/api/lawss/activiti/exportProcessDetailInfo?idAndSartypeList=' + ids.join(',') + '&prcNum=' + this.$route.query.prcNum
-      this.$message.success('导出信息成功')
-    },
-    // 表格排序
-    sortChange (sortObj) {
-      if (sortObj.column.order !== 'normal') {
-        this.shunxu = ''
-        this.paixu = ''
-        const order = sortObj.column.order
-        switch (sortObj.column.property) {
-          // 任务步骤
-          case 'name' :
-            // 后台联调
-            this.paixu = 'name'
-            if (order === 'ascending') {
-              this.shunxu = 'asc'
-            } else if (order === 'descending') {
-              this.shunxu = 'desc'
-            }
-            break
-            // 任务受理人
-          case 'assignee' :
-            // 后台联调
-            this.paixu = 'assignee'
-            if (order === 'ascending') {
-              this.shunxu = 'asc'
-            } else if (order === 'descending') {
-              this.shunxu = 'desc'
-            }
-            break
-            // 创建时间
-          case 'createTime' :
-            // 后台联调
-            this.paixu = 'startTime'
-            if (order === 'ascending') {
-              this.shunxu = 'asc'
-            } else if (order === 'descending') {
-              this.shunxu = 'desc'
-            }
-            break
-        }
-      }
-      this.processTable()
-    },
-    // 流程审批按钮是否显示
-    getApproveShow () {
-      this.$http.get('lawss/activiti/get_gather_by_instance', {
-        prcNum: this.$route.query.prcNum,
-        sortWord: this.shunxu ? this.paixu : '',
-        shunxu: this.shunxu
-      }, {
-        loading: 'loading',
-        _this: this
-      }, res => {
-        this.approveShow = res[res.length - 1].isGather
-        this.approveRowIndex = res[res.length - 1].index
-      }, e => {})
     }
-  },
-  components: {
-  },
-  props: {},
-  computed: {
-    listNoDataText () {
-      return this.processType === 1 ? '暂无待办流程' : '暂无已办流程'
-    },
-    urgeRowMenu () {
-      let flag = false
-      this.$store.getters.getMenuList.map((menu) => {
-        if (menu.id === 'ZDE6GT7UG5' || this.loginPeople === this.$store.getters.userInfo.userId) {
-          flag = true
-        }
-      })
-      return flag
-    },
-    /**
-     * 调整处理人按钮是否显示
-     */
-    tzclrEnable () {
-      return this.$route.query.tabsName === 'MonitorProcess'
-    }
-  },
-  watch: {},
-  beforeUpdate () {
-    if (this.detailData.length > 0) {
-      sessionStorage.setItem('processInstance', JSON.stringify(this.detailData[0]))
-    }
-  },
-  mounted () {
-    this.processNum()
-    this.processTable()
-    this.getApproveShow()
-  }
-}
 </script>
 
 <style lang="less" scoped>
-//@import '~styles/mixins';
-#processDetails{
-  height: 100%;
-  .flow-chart{
-    width: 100%;
-    height: 45%;
-    background: #F0F0F0;
-    border: 1px solid #CCCDCE;
-    border-bottom: none;
-    padding: 10px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    .flow-header{
-      height: 30px;
-      line-height: 30px;
-      //.flex();
-      align-items: center;
-      position: absolute;
-      .flow-chart-title{
-        font-size: 16px;
-        font-weight: bold;
-        padding: 0 20px;
-        //.ellipsis();
-      }
+    //@import '~styles/mixins';
+    #processDetails {
+        height: 100%;
+
+        .flow-chart {
+            width: 100%;
+            height: 45%;
+            background: #F0F0F0;
+            border: 1px solid #CCCDCE;
+            border-bottom: none;
+            padding: 10px;
+            overflow-x: hidden;
+            overflow-y: auto;
+
+            .flow-header {
+                height: 30px;
+                line-height: 30px;
+                //.flex();
+                align-items: center;
+                position: absolute;
+
+                .flow-chart-title {
+                    font-size: 16px;
+                    font-weight: bold;
+                    padding: 0 20px;
+                    //.ellipsis();
+                }
+            }
+
+            .flow-group {
+                width: 100%;
+                height: calc(~'100% - 30px');
+
+                .process-img {
+                    //width: 100%;
+                    //height: 100%;
+                }
+
+                .flow-group-process {
+                    width: 100%;
+                    height: auto;
+                    min-height: 100%;
+                    padding: 20px;
+                    box-sizing: border-box;
+                    /*display: flex;*/
+                    /*align-items: center;*/
+                    /*flex-wrap: wrap;*/
+
+                    .flow-group-process-stard {
+                        width: 100px;
+                        border-radius: 20px;
+                        height: 40px;
+                        background: #bcddff;
+                        border: 1px #79c8ff solid;
+                        font-size: 12px;
+                        color: #000;
+                        text-align: center;
+                        line-height: 40px;
+                        font-weight: 600;
+                        float: inline-start;
+                        margin-top: 18px;
+                    }
+
+                    .flow-group-process-end {
+                        width: 100px;
+                        border-radius: 20px;
+                        height: 40px;
+                        background: #bcddff;
+                        border: 1px #79c8ff solid;
+                        font-size: 12px;
+                        color: #000;
+                        text-align: center;
+                        line-height: 40px;
+                        font-weight: 600;
+                        float: inline-end;
+                        margin-top: 20px;
+                    }
+
+                    .flow-group-process-end-left {
+                        float: inline-start;
+                    }
+
+                    .flow-group-process-end-one {
+                        margin-top: 0;
+                        margin-right: 17px;
+                    }
+
+                    .flow-group-process-arrow {
+                        width: 100px;
+                        height: 1px;
+                        background: #c1c1c1;
+                        margin-right: 8px;
+                    }
+
+                    .flow-group-process-arrow::after {
+                        content: "";
+                        display: inline-block;
+                        position: relative;
+                        left: 100px;
+                        top: -7px;
+                        border-left: 8px solid #c1c1c1;
+                        border-top: 4px solid transparent;
+                        border-bottom: 4px solid transparent;
+                    }
+
+                    .flow-group-process-arrow-one {
+                        width: 30px;
+                        height: 1px;
+                        background: #c1c1c1;
+                        margin-right: 8px;
+                        transform: rotate(90deg);
+                        right: 44px;
+                        position: absolute;
+                        bottom: -16px;
+
+                    }
+
+                    .flow-group-process-arrow-one::after {
+                        content: "";
+                        display: inline-block;
+                        position: relative;
+                        left: 30px;
+                        top: -7px;
+                        border-left: 8px solid #c1c1c1;
+                        border-top: 4px solid transparent;
+                        border-bottom: 4px solid transparent;
+                    }
+
+                    .flow-group-process-arrow-left {
+                        width: 100px;
+                        height: 1px;
+                        background: #c1c1c1;
+                        margin-right: 0;
+                        margin-left: 8px;
+                    }
+
+                    .flow-group-process-arrow-left::after {
+                        content: "";
+                        display: inline-block;
+                        position: relative;
+                        left: -8px;
+                        top: -7px;
+                        border-right: 8px solid #c1c1c1;
+                        border-left: none;
+                        border-top: 4px solid transparent;
+                        border-bottom: 4px solid transparent;
+                    }
+
+                    .flow-group-process-box {
+                        display: flex;
+                        align-items: center;
+                        float: inline-start;
+                        position: relative;
+                        margin-bottom: 40px;
+                    }
+
+                    .flow-group-process-box-one {
+                        float: inline-end;
+                    }
+
+                    .flow-group-process-content {
+                        min-height: 80px;
+                        width: 140px;
+                        background: #bcddff;
+                        border: 1px #79c8ff solid;
+                        font-size: 12px;
+                        color: #000;
+                        text-align: center;
+                        padding: 0 6px;
+                        box-sizing: border-box;
+                        font-weight: 600;
+
+                        .flow-group-process-content-top {
+                            width: 100%;
+                            height: 40px;
+                            line-height: 40px;
+                            font-size: 12px;
+                        }
+
+                        .flow-group-process-content-bottom {
+                            width: 100%;
+                            font-size: 12px;
+                            line-height: 1.4;
+                        }
+
+                        .flow-group-process-arrow-dis {
+                            margin-left: 200px;
+                        }
+                    }
+
+                    .flow-group-process-content-dis {
+                        margin-left: 208px;
+                    }
+                }
+            }
+        }
+
+        .flow-list {
+            width: 100%;
+            height: calc(~'55% - 55px');
+            border: 1px solid #CCCDCE;
+            position: relative;
+        }
     }
-    .flow-group{
-      width: 100%;
-      height: calc(~'100% - 30px');
-      .process-img{
-        //width: 100%;
-        //height: 100%;
-      }
-    }
-  }
-  .flow-list{
-    width: 100%;
-    height: calc(~'55% - 55px');
-    border: 1px solid #CCCDCE;
-    position: relative;
-  }
-}
 </style>
diff --git a/src/pages/processCenter/pages/processList/tabComponents/alreadyProcess/index.vue b/src/pages/processCenter/pages/processList/tabComponents/alreadyProcess/index.vue
index a7adeaa6c..9514ed1f3 100644
--- a/src/pages/processCenter/pages/processList/tabComponents/alreadyProcess/index.vue
+++ b/src/pages/processCenter/pages/processList/tabComponents/alreadyProcess/index.vue
@@ -239,11 +239,23 @@ export default {
       this.queryProcess()
     },
     dealWith (row) { // 查看
+      let oldAndNew = ''
+      const currentDate = new Date().getTime();
+      const date = new Date(row.creatTime);
+      const timestamp = date.getTime();
+      if (currentDate > timestamp){
+        oldAndNew = 'old'
+      }else{
+        oldAndNew = 'new'
+      }
       const routeUrl = this.$router.resolve({
         name: 'ProcessDetail',
         query: {
           prcNum: row.prcNum,
-          tabsName: 'AlreadyProcess'
+          tabsName: 'AlreadyProcess',
+          actiProcInstId: row.prcId,
+          flowType: row.prcType,
+          oldAndNew:oldAndNew,
         }
       })
       window.open(routeUrl.href, '_blank');
diff --git a/src/pages/processCenter/pages/processList/tabComponents/alreadySend/index.vue b/src/pages/processCenter/pages/processList/tabComponents/alreadySend/index.vue
index 7d79ec453..86df48d0b 100644
--- a/src/pages/processCenter/pages/processList/tabComponents/alreadySend/index.vue
+++ b/src/pages/processCenter/pages/processList/tabComponents/alreadySend/index.vue
@@ -269,11 +269,23 @@ export default {
       this.queryProcess()
     },
     dealWith (row) { // 查看
+      let oldAndNew = ''
+      const currentDate = new Date().getTime();
+      const date = new Date(row.creatTime);
+      const timestamp = date.getTime();
+      if (currentDate > timestamp){
+        oldAndNew = 'old'
+      }else{
+        oldAndNew = 'new'
+      }
       const routeUrl = this.$router.resolve({
         name: 'ProcessDetail',
         query: {
           prcNum: row.prcNum,
-          tabsName: 'AlreadySend'
+          tabsName: 'AlreadySend',
+          actiProcInstId: row.prcId,
+          flowType: row.prcType,
+          oldAndNew:oldAndNew,
         }
       })
       window.open(routeUrl.href, '_blank');
diff --git a/src/pages/processCenter/pages/processList/tabComponents/monitorProcess/index.vue b/src/pages/processCenter/pages/processList/tabComponents/monitorProcess/index.vue
index aabdfe5a8..619d96d79 100644
--- a/src/pages/processCenter/pages/processList/tabComponents/monitorProcess/index.vue
+++ b/src/pages/processCenter/pages/processList/tabComponents/monitorProcess/index.vue
@@ -242,12 +242,24 @@ export default {
       this.queryProcess()
     },
     dealWith (row) { // 查看
+      let oldAndNew = ''
+      const currentDate = new Date().getTime();
+      const date = new Date(row.creatTime);
+      const timestamp = date.getTime();
+      if (currentDate > timestamp){
+        oldAndNew = 'old'
+      }else{
+        oldAndNew = 'new'
+      }
       const routeUrl = this.$router.resolve({
         name: 'ProcessDetail',
         query: {
           bpnId: row.id,
           prcNum: row.prcNum,
-          tabsName: 'MonitorProcess'
+          tabsName: 'MonitorProcess',
+          actiProcInstId: row.prcId,
+          flowType: row.prcType,
+          oldAndNew:oldAndNew,
         }
       })
       window.open(routeUrl.href, '_blank');
diff --git a/src/pages/processCenter/pages/processList/tabComponents/processCenter/index.vue b/src/pages/processCenter/pages/processList/tabComponents/processCenter/index.vue
index 836fb7452..f7b3add7b 100644
--- a/src/pages/processCenter/pages/processList/tabComponents/processCenter/index.vue
+++ b/src/pages/processCenter/pages/processList/tabComponents/processCenter/index.vue
@@ -156,7 +156,7 @@
                   <i class="iconfont">&#xe61e;</i>
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item v-btn-permission="'4219fdb5e33dbbc84d845af98c947e66'" :command="[scope.row, '办理']">办理</el-dropdown-item>
-                    <el-dropdown-item v-btn-permission="'5cf95d4e0eaae6118e1375f677a0a08d'":command="[scope.row, '转办']">转办</el-dropdown-item>
+                    <el-dropdown-item v-btn-permission="'5cf95d4e0eaae6118e1375f677a0a08d'" :command="[scope.row, '转办']">转办</el-dropdown-item>
                   </el-dropdown-menu>
                 </el-dropdown>
               </div>