Merge remote-tracking branch 'origin/master'

zzw

2023-11-29 0b08d373869c91dda58dd0e33b13fe59688234f9

Merge remote-tracking branch 'origin/master'

 modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/controller/ConfigItemWarehouseController.java

@@ -14,6 +14,7 @@
import com.zt.common.validator.group.UpdateGroup;
import com.zt.life.modules.configItemWarehouse.dto.ConfigItemWarehouseDto;
import com.zt.life.modules.configItemWarehouse.model.ConfigItemWarehouse;
import com.zt.life.modules.configItemWarehouse.model.WarehouseConfigItem;
import com.zt.life.modules.configItemWarehouse.service.ConfigItemWarehouseService;
import com.zt.life.modules.itemCirculatOrder.dto.ItemCirculatOrderDto;
import com.zt.life.modules.itemCirculatOrder.model.ItemCirculatOrderTechnical;
@@ -60,12 +61,12 @@
        @ApiImplicitParam(name = Constant.Q.ORDER_FIELD, value = Constant.QV.ORDER_FIELD, dataType = Constant.QT.STRING),
        @ApiImplicitParam(name = Constant.Q.ORDER, value = Constant.QV.ORDER, dataType = Constant.QT.STRING),
        @ApiImplicitParam(name = "code", value = "配置项入库编号", dataType = Constant.QT.STRING, format = "code^LK"),
        @ApiImplicitParam(name = "projectCode", value = "项目编号", dataType = Constant.QT.STRING, format = "project_code^LK"),
        @ApiImplicitParam(name = "projectName", value = "项目名称", dataType = Constant.QT.STRING, format = "project_name^LK"),
        @ApiImplicitParam(name = "projectCode", value = "项目编号", dataType = Constant.QT.STRING, format = "code1^EQ"),
        @ApiImplicitParam(name = "softwareName", value = "项目名称", dataType = Constant.QT.STRING, format = "software_name^EQ"),
        @ApiImplicitParam(name = "libraryType", value = "库类型", dataType = Constant.QT.STRING, format = "library_type^EQ")    })
    public PageResult<ConfigItemWarehouse> page(@ApiIgnore @QueryParam QueryFilter queryFilter){

        return PageResult.ok(configItemWarehouseService.page(queryFilter));
        List<ConfigItemWarehouse> configItemWarehouse=configItemWarehouseService.page(queryFilter);
        return PageResult.ok(configItemWarehouse);
    }

    @GetMapping("getDto")
@@ -73,9 +74,12 @@
    public Result<ConfigItemWarehouseDto> getDto(Long projectId, Long warehouseId) {
        ConfigItemWarehouseDto data =configItemWarehouseService.getDto(projectId, warehouseId);
        if (warehouseId!=null) {
            OssDto ossDto = sysOssConfigService.getOssByBusiType(warehouseId, "config_item_warehouse");
            for (WarehouseConfigItem configItem  : data.getConfigItemList()) {
                Long configItemId = configItem.getId();
                OssDto ossDto = sysOssConfigService.getOssByBusiType(configItemId, "config_item_warehouse");
            if (ossDto != null) {
                data.setFiles(ossDto);
                    configItem.setFiles(ossDto);
                }
            }
        }
        return Result.ok(data);
@@ -106,7 +110,7 @@
        return Result.ok();
    }

    @DeleteMapping
    @DeleteMapping("deleteConfigItem")
    @ApiOperation("删除")
    @LogOperation("删除")
    public Result delete(@RequestBody Long[] ids){

 modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/dto/ConfigItemWarehouseDto.java

@@ -25,8 +25,7 @@
    private Project project;
    @ApiModelProperty(value = "配置项入库")
    private ConfigItemWarehouse configItemWarehouse;
    @ApiModelProperty(value = "附件")
    private OssDto files;


    @ApiModelProperty(value = "入库配置项")
    private List<WarehouseConfigItem> configItemList = new ArrayList<>();

 modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/model/ConfigItemWarehouse.java

@@ -1,5 +1,6 @@
package com.zt.life.modules.configItemWarehouse.model;

import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.zt.common.entity.BusiEntity;
@@ -84,4 +85,12 @@
    @ApiModelProperty(value = "年份")
    private String year;

    @TableField(exist = false)
    @ApiModelProperty(value = "项目名称")
    private String softwareName;

    @TableField(exist = false)
    @ApiModelProperty(value = "项目编号")
    private String projectCode;

}

 modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/model/WarehouseConfigItem.java

@@ -2,6 +2,7 @@

import com.baomidou.mybatisplus.annotation.TableName;
import com.zt.common.entity.BusiEntity;
import com.zt.life.sys.dto.OssDto;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
@@ -42,4 +43,6 @@
    @ApiModelProperty(value = "密级")
    private String secretClass;

    @ApiModelProperty(value = "附件")
    private OssDto files;
}

 modules/mainPart/src/main/java/com/zt/life/modules/configItemWarehouse/service/ConfigItemWarehouseService.java

@@ -100,6 +100,7 @@
                configItem.setWarehouseId(warehouseId);
                configItemService.insert(configItem);
            }
            sysOssConfigService.updateOss(configItem.getId(), configItem.getFiles());// 保存附件
        }

        for (WarehouseCmAudit cmAudit : configItemDto.getCmAuditList()) {
@@ -121,8 +122,6 @@
                qaAuditService.insert(qaAudit);
            }
        }
        sysOssConfigService.updateOss(configItemDto.getId(), configItemDto.getFiles());// 保存附件

        return true;
    }


 modules/mainPart/src/main/resources/mapper/configItemWarehouse/ConfigItemWarehouseDao.xml

@@ -4,7 +4,7 @@
<mapper namespace="com.zt.life.modules.configItemWarehouse.dao.ConfigItemWarehouseDao">

    <select id="getList" resultType="com.zt.life.modules.configItemWarehouse.model.ConfigItemWarehouse">
        select a.* ,p.*
        select a.* ,p.*,p.CODE AS projectCode
        from config_item_warehouse a
        INNER JOIN  project p ON p.id = a.project_id
        <where>

 web/src/views/modules/configItemWarehouse/ConfigItemWarehouse.vue

@@ -1,7 +1,6 @@
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-configItemWarehouse-configItemWarehouse}">
      <zt-table-wraper query-url="/configItemWarehouse/ConfigItemWarehouse/page" delete-url="/configItemWarehouse/ConfigItemWarehouse" v-slot="{ table }">
  <div class="fa-card-a">
      <zt-table-wraper query-url="/configItemWarehouse/ConfigItemWarehouse/page" delete-url="/configItemWarehouse/ConfigItemWarehouse/deleteConfigItem" v-slot="{ table }">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()">
          <el-form-item>
            <el-input v-model="dataForm.code" placeholder="请输入配置项入库编号" clearable></el-input>
@@ -10,7 +9,7 @@
            <el-input v-model="dataForm.projectCode" placeholder="请输入项目编号" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="dataForm.projectName" placeholder="请输入项目名称" clearable></el-input>
            <el-input v-model="dataForm.softwareName" placeholder="请输入项目名称" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <zt-dict v-model="dataForm.libraryType" dict="library_type" clearable></zt-dict>
@@ -22,10 +21,10 @@
          </el-form-item>
        </el-form>
        <el-table v-loading="table.dataLoading" :data="table.dataList" height="100px" v-adaptive="{bottomOffset:70}" border @selection-change="table.selectionChangeHandle">
          <el-table-column type="selection" width="40"/>
          <el-table-column align="center" type="selection" width="40"/>
            <el-table-column prop="code" label="配置项入库编号"/>
                <el-table-column prop="projectCode" label="项目编号"/>
                <el-table-column prop="projectName" label="项目名称"/>
                <el-table-column prop="softwareName" label="项目名称"/>
                <zt-table-column-dict prop="libraryType" label="库类型" dict="library_type"/>
              <zt-table-column-handle :table="table" edit-perm="configItemWarehouse:update" delete-perm="configItemWarehouse::delete"/>
        </el-table>
@@ -37,7 +36,6 @@
        </ProjectSelect>
      </zt-table-wraper>
    </div>
  </el-card>
</template>

<script>
@@ -49,8 +47,8 @@
        dataForm: {
          code: '',
          projectCode: '',
          projectName: '',
          libraryType: '',
          softwareName: '',
          libraryType: ''
        }
      }
    },

 web/src/views/modules/flowChart/ConfigNode/index.vue

New file
@@ -0,0 +1,256 @@
<template>
  <div style="position: absolute;top:6%;right:0;background:#cccccc;width: 300px;" :style="'height:'+ left_p + 'px'">
  <el-card style="height: 100%">
    <el-tabs v-model="activeName" id="tabPane">
      <el-tab-pane label="文本"  name="first">
        <el-row :gutter="5" align="middle" style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 38px">文本大小</el-col>
          <el-col :span=16>
            <el-slider :min=8 :max=20 :step=1 v-model="globalGridAttr.nodeFontSize" @change="onFontSizeChange"></el-slider>
          </el-col>
        </el-row>
        <el-row :gutter="5" align="middle" style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 40px">字体颜色</el-col>
          <el-col :span=16>
            <el-color-picker  v-model="globalGridAttr.nodeColor" style="width: 100%" @change="onColorChange"></el-color-picker>
          </el-col>
        </el-row>
        <el-row v-show="shape!=='custom-text' || shape!=='custom-circle1'" :gutter="5" align="middle" style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 32px">项目名称</el-col>
          <el-col :span=16 >
            <el-input  @click.native='showDialog' v-model="globalGridAttr.inspectName" style="width:100%"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="5" v-show="shape!=='custom-circle1'"  align="middle" style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 32px">过程名称</el-col>
          <el-col :span=16 >
            <el-input  v-model="globalGridAttr.nodeText" style="width:100%" @change="onTextChange"></el-input>
          </el-col>
        </el-row>
        <el-row v-show="shape!=='custom-text'" :gutter="5" align="middle" style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 32px">日期</el-col>
          <el-col :span=16 >
            <el-date-picker v-model="globalGridAttr.nodeDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                            style="width: 100%" @change="onDateChange">
            </el-date-picker>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="节点"  name="second">
        <el-row align="middle" style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 40px">边框颜色</el-col>
          <el-col :span=16>
            <el-color-picker v-model="globalGridAttr.nodeStroke" style="width: 100%" @change="onStrokeChange"></el-color-picker>
          </el-col>
        </el-row>
        <el-row align="middle"style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 38px">边框宽度</el-col>
          <el-col :span=16>
            <el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.nodeStrokeWidth" @change="onStrokeWidthChange"></el-slider>
          </el-col>
        </el-row>
        <el-row align="middle" style="margin-top:20px">
          <el-col :span=8 style="font-size: 16px;line-height: 40px">颜色</el-col>
          <el-col :span=16>
            <el-color-picker  v-model="globalGridAttr.nodeFill" style="width: 100%" @change="onFillChange"></el-color-picker>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-card>
    <el-dialog ref="detailedDialog"  title="选择项目" width='85%' :visible.sync="dialogVisible ">
      <Inspection @func="procResult" ref="inspectionNode" />
    </el-dialog>
  </div>
</template>

<script>
import { Graph, Shape, Node, Addon, Cell,FunctionExt} from '@antv/x6';
import Inspection from './project-list-select'
// const {inject} = require("vue");
export default {
  name: "index",
  data(){
    return{
      data:{
        dataId:'',
        finishDate: '',
        inspectName:''
      },
      date:'',
      text:'',
      dateId:'',
      content:'',
      dialogVisible:false,
      activeName: 'first',
      // globalGridAttr:{},
      curCel:Cell,
      left_p:document.documentElement.clientHeight*0.9,
    }
  },
  components:{
    Inspection
  },
  props:{
    id: {
      type: String,
    },
    shape:{
      type: String
    },
    refY2:{
      type: Number
    },
    globalGridAttr:{
      type: Object,
    },
    graph:{
      type: String,
    },
    projectId:{
      type: String,
    },
    diagramId:{
      type: String,
    }
  },
  watch:{
    'id'(val,oldVal){
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    }
  },
  mounted() {
    // this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
  },
  methods:{
    showDialog() {
      let param = {projectId:this.projectId,diagramId:this.diagramId}
      console.log(param, 'dialog init param')
      this.dialogVisible = true;
      this.$nextTick(()=>{
        this.$refs.inspectionNode.init(param)
      })
    },
    procResult(node) {
      // console.log(node,'node')
      this.text =node.nodeName
      this.dateId = node.nodeId
      this.globalGridAttr.dataId = this.dateId
      this.globalGridAttr.inspectName = this.text
      this.globalGridAttr.nodeText = this.text
      this.data={
        dataId:this.dateId,
        inspectName:this.text
      }
      this.curCel.setData(this.data)
      this.curCel.attr('text/text', this.text)
      this.curCel.attr('data/dataId', this.dateId)
      this.curCel.attr('data/inspectName', this.text)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
      this.dialogVisible = false
      // console.log(node,'dialog窗口返回值')
    },
    // 改变边框颜色
    onStrokeChange(e){
      let val = e
      this.globalGridAttr.nodeStroke = val
     this.curCel.attr('body/stroke', val)
    },
    //改变边框大小
    onStrokeWidthChange(e){
      let val =e
      this.globalGridAttr.nodeStrokeWidth = val
      this.curCel.attr('body/strokeWidth', val)
    },
    //改变文本颜色
    onFillChange(e){
      let val = e
      this.globalGridAttr.nodeFill=val
      this.curCel.attr('body/fill', val)
      // this.curCel.attr('title/fill', val)
    },
    // 改变字体大小
    onFontSizeChange(e){
      let val =e
      this.globalGridAttr.nodeFontSize = val
      this.curCel.attr('text/fontSize', val)
      this.curCel.attr('title/fontSize', val)
    },
    // 改变字体颜色
    onColorChange(e){
      let val =e
      this.globalGridAttr.nodeColor = val
      this.curCel.attr('text/fill', val)
      this.curCel.attr('title/fill', val)
      this.curCel.attr('text/style/color', val)
      this.curCel.attr('title/style/color', val)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    // 改变文本
    onTextChange(e){
      this.text =e
      this.globalGridAttr.nodeText = this.text
      this.curCel.attr('label/textWrap/text', this.text)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)

    },
    onDateChange(e){
      this.date =e
       this.globalGridAttr.nodeDate = this.date
       this.data={
        finishDate:this.date,
      }
      this.curCel.setData(this.data)
      if(this.shape=='custom-circle1'){
        this.curCel.attr('text/text', this.date)
      }
      this.curCel.attr('title/text', this.date)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    nodeOpt(id, globalGridAttr){
      this.curCel=null
      if(id){
        let cell =  this.graph.getCellById(id)
        // console.log(cell,'let cell 123456')
        if (!cell || !cell.isNode()) {
          return
        }
        this.curCel = cell
        globalGridAttr.nodeStroke = cell.attr('body/stroke')
        globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
        globalGridAttr.nodeFill = cell.attr('body/fill')
        // globalGridAttr.nodeFontSize = cell.attr('text/fontSize')
        // globalGridAttr.nodeFontSize = cell.attr('title/fontSize')
        globalGridAttr.nodeFontSize = cell.attr('text/fontSize')?cell.attr('text/fontSize'):cell.attr('title/fontSize')
        globalGridAttr.nodeColor = cell.attr('text/fill') ? cell.attr('text/fill'):cell.attr('title/fill')?cell.attr('title/fill'):cell.attr('label/text/fill')
        // globalGridAttr.nodeColor = cell.attr('text/fill')
        // globalGridAttr.nodeColor = cell.attr('title/fill')
        // globalGridAttr.nodeColor = cell.attr('text/style/color')
        // globalGridAttr.nodeColor =  cell.attr('title/style/color')
        globalGridAttr.nodeUsers = cell.attr('approve/users')
        globalGridAttr.nodeText = cell.attr('label/textWrap/text')
        if(this.shape=='custom-circle1'){
          globalGridAttr.nodeDate = cell.attr('text/text')
        }
        globalGridAttr.nodeDate = cell.attr('title/text')
        globalGridAttr.dataId = cell.getData().dataId
        globalGridAttr.inspectName =cell.getData().inspectName
        // console.log(globalGridAttr.inspectName,globalGridAttr.dataId,globalGridAttr.nodeDate,'globalGridAttr.inspectName,globalGridAttr.dataId,globalGridAttr.nodeDate 789')
        cell.getData()
        // console.log( cell.getData(),' cell.getData() 909')
      }
      return this.curCel;
    }
  }
}
</script>

<style >
#tabPane .el-tabs__header.is-top .el-tabs__nav-scroll{
width: 100% !important;
}

#tabPane .el-color-picker__trigger{
  width: 100%;
}
</style>

 web/src/views/modules/flowChart/ConfigNode/project-list-select.vue

New file
@@ -0,0 +1,273 @@
<template>
  <div class="v-service-user">
    <zt-table-wraper ref="tableObj" query-url="/maintain/projectNetworkDiagram/getInspectionPage" :lazy="true" :paging='true'
                     delete-url="/project/inspection" v-slot="{ table }">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()">
        <el-form-item class="toolbar">
          <el-form-item prop="projectId" style="margin-top: 2px;width: 150px;">
            <zt-select v-model="dataForm.projectId" :datas="model" placeholder="工程项目" clearable></zt-select>
          </el-form-item>
          <el-form-item style="margin-top: 2px;" v-show="selectProjectFlag">
            <el-input v-model="dataForm.userKey" placeholder="关键字" style="width: 150px;" clearable></el-input>
          </el-form-item>
          <!--<el-form-item prop="projectMajor" style="margin-top: 2px;width: 150px;">-->
          <!--<zt-dict v-model="dataForm.projectMajor" dict="project_major" placeholder="工程专业" clearable></zt-dict>-->
          <!--</el-form-item>-->
          <el-form-item prop="reconditionMajor" style="margin-top: 2px;width: 120px;" v-show="selectProjectFlag">
            <zt-dict v-model="dataForm.reconditionMajor" dict="recondition_major" placeholder="监修专业"
                     clearable></zt-dict>
          </el-form-item>
          <el-form-item style="width:130px;margin-top: 2px;" v-show="selectProjectFlag">
            <zt-dict v-model="dataForm.projectType" dict="project_type" placeholder="项目类型"
                     @keyup.enter.native="table.query()" clearable></zt-dict>
          </el-form-item>
          <el-form-item style="width:120px;margin-top: 2px;" v-show="selectProjectFlag">
            <el-select v-model="dataForm.planStatus" placeholder="项目状态" @change="table.query()" clearable>
              <el-option label="未完工" value="0"></el-option>
              <el-option label="已完工" value="1"></el-option>
              <el-option label="已取消" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="message-btn" style="margin-top: 2px;">
            <el-button type="primary" size="medium" icon="el-icon-search" @click="table.query()">搜索
            </el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
      <!--{{ table }}-->
      <el-table id="table" ref="table" v-adaptive="{bottomOffset:120}" height="650px" v-loading="table.dataLoading"
                :data="table.dataList" :default-expand-all="false" :paging="true" @current-change="showProjectList"
                border  align-text="left"
                @selection-change="table.selectionChangeHandle" row-key="id" width="100%" lazy :load="load"
                class="repair_button"
                @row-dblclick="rowDblclick"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column type="selection" width="40" v-show="!isShow"/>
        <el-table-column prop="projectListCode" label="编号" width="160" v-if="showColumn.projectListCode" sortable show-overflow-tooltip >
        </el-table-column>
        <el-table-column prop="projectListName" label="工程名称"  v-if="showColumn.projectListName" show-overflow-tooltip/>
        <el-table-column prop="examineConcat" label="检验内容"  v-if="showColumn.examineConcat" show-overflow-tooltip/>
        <el-table-column prop="maintainUnitName" label="承修单位" v-if="showColumn.maintainUnit" show-overflow-tooltip/>
      </el-table>
    </zt-table-wraper>
  </div>
</template>

<script>
  export default {
    props: {
      noImportCodes: {
        type: Object
      },
      isShow: {
        type: Number
      },
      projectTypeName: {
        type: String
      }
    },
    data() {
      return {
        timeNodeArr: [{projectType: '', projectTypeName: '', timeNode: ''}],
        timeNodesForm: {
          timeNodes: ''
        },
        isShowColumn: '',
        dialogFormVisible: false,
        checkList: {},
        showColumn: {
          projectListCode: true,
          projectListName: true,
          examineConcat: true,
          maintainUnit: true,
          gmtFinish: true,
          reconditionMajor: true,
          isSpecial: true,
          armyType: true,
          isCheck: true,
          files: true,
          projectTypeName: true,
          planStatus: true,
          timeRemaining: true,
          deadline: true,
          cause: true,
        },
        fullHeight: (document.documentElement.clientHeight - 210) - 120,
        word: {},
        dataForm: {
          projectId: '',
          diagramId:'',
          reconditionMajor: '',
          projectTypeName: '',
          productId: '', // 选择的产品节点
          userKey: '', // 用户输入关键字
          projectMajor: '', // 工程专业
          id: '',
          projectName: '',
          planStatus: '',
          type: '',
          projectNode: '',
          floatTime: '',
          typeStr: '',
          maxDate: '',
          minDate: '',
          options: [],
        },
        constructionOrInspection: 1,
        model: '',
        timeNodeArr: [],
        options: [{value: 0, label: '否'}, {value: 1, label: '是'}],
        postList: [{id: '0', name: '未完工'}, {id: '1', name: '已完工'}, {id: '2', name: '已取消'}],
        equipments: {
          equipments: []
        },
        parts: {
          parts: []
        },
        stateFrom: {
          id: '',
          planStatus: ''
        },
        oldDataForm: {
          productId: '',
          projectId: '',
          maintainLevel: ''
        },
        queryForm: {
          productId: '',
          projectId: '',
          maintainLevel: ''
        },
        technologyData: {
          equipmentData: [],
          unitData: []
        },
        // postList: [{id: '3', name: '未审批'}, {id: '0', name: '已驳回'}, {id: '1', name: '已同意'}],
        twoPostList: [{id: '3', name: '未审批'}, {id: '0', name: '已驳回'}, {id: '1', name: '已同意'}],
        isStyle: "margin-top:-10px",
        ids: [],
        productId: '',
        armyCheckNo: '',
        selectProjectFlag: false,
        timeNodes: false
      }
    },
    components: {
    },
    computed: {
    },
    created() {
    },
    mounted() {
      this.getInfo()
    },
    watch: {
    },
    methods: {
      init(item) {
        // this.$nextTick(()=>{
        console.log(item, "dialog init param.....................")
        this.dataForm.projectId = item.projectId
        this.dataForm.diagramId = item.diagramId
        this.selectProjectFlag = true
        console.log(this.dataForm, ' init this.dataForm')
        this.$refs.tableObj.query()
        // })
      },
      rowDblclick(row) {
        console.log(row.id,'双击行的id')
        console.log(row.name,'双击行的数据')
        this.$emit('func',{nodeId:row.id,nodeName:row.projectListName})
      },
      async getInfo(){
        if (this.$store.state.user.localShip) {
          this.dataForm.productId = this.$store.state.user.localShip
        }
        let res = await this.$http.get(`/homeFunction/projectSelect?productId=${this.dataForm.productId}`)
        this.model = res.data
        if (this.model.length > 0 && !this.dataForm.projectId) {
          this.dataForm.projectId = this.model[0].id
        }
      }
    }
  }
</script>
<style lang="less" >
  #columnOption {
    position: fixed;
    z-index: 20;
    top: 15%;
    left: 80%;
    width: 10%;
    height: 60%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: row-reverse;
    .content {
      width: 100%;
      height: 100%;
      .head {
        width: 100%;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
      }
      .body {
        width: 88%;
        height: calc(100% - 88px);
        box-sizing: border-box;
        margin-left:20px;
        padding-top: 10px;
        overflow-y: auto;
        .items {
          width: 100%;
          height: 100%;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          .el-checkbox__label {
            width: 100%;
            height: 28px;
            line-height: 28px;
            margin-bottom: 14px;
            display: inline-block;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            box-sizing: border-box;
            padding-left: 14px;
          }
          .el-checkbox:hover {
            background-color: #f5f7fa;
          }
        }
      }
      #footer {
        width: 100%;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        size: 20px;
      }
    }
  }
  // 控制淡入淡出效果
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
  #columnOption .el-checkbox{
    display: block;
    margin-top:10px;
  }
</style>

 web/src/views/modules/flowChart/ProcessTrajectory.vue

New file
@@ -0,0 +1,42 @@
<!--流程轨迹-->
<template>
  <zt-dialog ref="dialog" :hasConfirm="false" title="流程办理轨迹" append-to-body
             @close="close">
    <el-table :data="tableData"  v-adaptive="{bottomOffset: 100}"
              height="250"
              v-loading="this.dataLoading">
      <el-table-column align="center" label="步骤名" prop="stepName"></el-table-column>
      <el-table-column align="center" label="角色名" prop="receiveName"></el-table-column>
      <el-table-column align="center" label="接受任务时间" prop="receiveTime"></el-table-column>
      <el-table-column align="center" label="完成时间" prop="finishTime"></el-table-column>
    </el-table>
  </zt-dialog>
</template>

<script>
  export default {
    name: 'ProcessTrajectory',
    data(){
      return{
        tableData:[],
        dataLoading:false,
      }
    },
    methods:{
     async init(params){
       this.dataLoading = true
        let res =await this.$http.get(`wf/getFlowTrack`,{params: params})
       console.log(res.data,'processTra res.data')
        if(res){
          this.tableData = res.data
          console.log(res.data,'getFlowTrack res.data')
        }
       this.dataLoading = false
      }
    }
  }
</script>

<style scoped>

</style>

 web/src/views/modules/flowChart/flowChartEdge/index.vue

New file
@@ -0,0 +1,143 @@
<template>
  <div style="position: absolute;top:6%;right:0;background:#cccccc;width: 300px;" :style="'height:'+ left_p + 'px'">
    <el-card style="height: 100%">
      <el-tabs v-model="activeName" id="EdgeTabPane">
        <el-tab-pane label="线条"  name="first">
          <el-row :gutter="5" align="middle" style="margin-top:20px;">
            <el-col :span=8 style="font-size: 16px;line-height: 38px">宽度</el-col>
            <el-col :span=16>
              <el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.strokeWidth" @change="onStrokeWidthChange"></el-slider>
            </el-col>
          </el-row>
          <el-row :gutter="5" align="middle" style="margin-top:20px;">
            <el-col :span=8 style="font-size: 16px;line-height: 38px">颜色</el-col>
            <el-col :span=16>
              <el-color-picker  v-model="globalGridAttr.stroke" style="width: 100%" @change="onStrokeChange"></el-color-picker>
            </el-col>
          </el-row>
<!--          <el-row :gutter="5" align="middle" style="margin-top:20px;">-->
<!--            <el-col :span=8 style="font-size: 16px;line-height: 32px">类型</el-col>-->
<!--            <el-col :span=16>-->
<!--              <el-select style="width: 100%" v-model="globalGridAttr.connector" @change="onConnectorChange">-->
<!--                <el-option-->
<!--                  v-for="item in options"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value">-->
<!--                </el-option>-->
<!--                &lt;!&ndash;              <el-option value="normal">默认</el-option>&ndash;&gt;-->
<!--                &lt;!&ndash;              <el-option value="smooth">平滑</el-option>&ndash;&gt;-->
<!--                &lt;!&ndash;              <el-option value="rounded">圆形</el-option>&ndash;&gt;-->
<!--                &lt;!&ndash;              <el-option value="jumpover">折线</el-option>&ndash;&gt;-->
<!--              </el-select>-->
<!--            </el-col>-->
<!--          </el-row>-->
          <el-row :gutter="5" align="middle" style="margin-top:20px;">
            <el-col :span=8 style="font-size: 16px;line-height: 32px">标签</el-col>
            <el-col :span=16>
              <el-input v-model="globalGridAttr.label" style="width: 100%" @change="onLabelChange"/>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { Edge} from '@antv/x6';
export default {
  name: "index",
  data(){
    return{
      left_p:document.documentElement.clientHeight*0.9,
      activeName: 'first',
      // globalGridAttr:{},
      curCell:Edge,
      options: [{
        value: 'normal',
        label: '默认'
      }, {
        value: 'smooth',
        label: '平滑连线'
      }]
    }
  },
  props:{
    id: {
      type: String,
    },
    globalGridAttr:{
      type: Object,
    },
    graph:{
      type: String,
    }
  },
  watch:{
    'id'(val,oldVal){
      const cell = this.graph.getCellById(this.id)
      if(!cell || !cell.isEdge()){
        return
      }
      this.curCell = cell
      let connector = cell.getConnector() || {
        name:'默认'
      }
      this.globalGridAttr.stroke = cell.attr('line/stroke')
      this.globalGridAttr.strokeWidth = cell.attr('line/strokeWidth')
      this.globalGridAttr.connector = connector.name
      // console.log(cell.getLabels()[0],'cell.getLabels()[0]')
      //  this.globalGridAttr.label = (cell.getLabels()[0].attrs).text.text||''
    }
  },
  methods:{
    onStrokeWidthChange(val) {

      this.globalGridAttr.strokeWidth = val
      this.curCell.attr('line/strokeWidth', val)
    },

    onStrokeChange(e) {
      const val = e
      this.globalGridAttr.stroke = val
      this.curCell.attr('line/stroke', val)
    },


    onConnectorChange(val){
      this.globalGridAttr.connector = val
      this.curCell.setConnector(val)
    },

    onLabelChange(e) {
      const val = e
      this.globalGridAttr.label = val
      this.curCell.setLabels([
        {
          attrs: {
            text: {
              text: val,
            },
          },
          position: {
            distance: 0.50,
          },
        }
      ])
    }
  }
}
</script>

<style >
#EdgeTabPane .el-tabs__header.is-top .el-tabs__nav-scroll{
  width: 100% !important;
}
#EdgeTabPane .el-tabs__nav.is-top{
  -webkit-transform: translateX(35px) !important
}
#EdgeTabPane .el-color-picker__trigger{
  width: 100%;
}
</style>

 web/src/views/modules/flowChart/flowChartEdit.vue

New file
@@ -0,0 +1,827 @@
<template>
  <div>
    <el-row :gutter="[8,8]">
      <el-col :span="3">
        <div class="fa-card-a">
          <div id="stencil2" :style="'height:'+ left_p + 'px'"></div>
        </div>
      </el-col>
      <el-col :span="21">
          <div class="fa-card-a">
            <el-form :inline="true">
              <el-form-item prop="flowId" style="margin-left:10px;width: 180px;">
                <zt-select v-model="flowId" :datas="flowList" @change="flowChange" placeholder="工程项目"
                           clearable></zt-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" v-show="dataForm.id" @click="saveDiagram()">保存</el-button>
              </el-form-item>
            </el-form>
            <div id="flowChart">
            </div>
            <flowChartNode v-show="type === 'node'" :flowId="flowId" :id="id" :globalGridAttr="globalGridAttr"
                           :graph="graph"/>
            <flowChart-edge v-show="type === 'edge'" :flowId="flowId" :id="id" :globalGridAttr="globalGridAttr"
                            :graph="graph"/>
          </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {Graph, Shape, Addon, Cell} from '@antv/x6';
import ConfigNode from './ConfigNode/index.vue'
import flowChartNode from './flowChartNode/index.vue'
import flowChartEdge from './flowChartEdge/index.vue'

export default {
  name: "flowChart-edit",
  components: {
    flowChartNode,
    ConfigNode,
    flowChartEdge
  },
  data() {
    return {
      shape: '',
      diagramList:[],
      diagramName:'',
      diagramId:'',
      flowList: '',
      flowId: '',
      diagramJson: '',
      dataForm: { // 流程图内容
        id: null,
        diagram: null
      },
      type: '',
      id: '',
      graph: null,
      emptyJson: {
        // 节点
        nodes: [
          {
            id: 'node1', // String，可选，节点的唯一标识
            width: 500,   // Number，可选，节点大小的 width 值
            height: 300,  // Number，可选，节点大小的 height 值
            label: '该流程图还没有配置',
            attrs: {
              body: {
                strokeWidth: 0
              },
            }
            //   text: {
            //     text: '该项目还未编制网络图',
            //     // fontSize: 56,
            //     fill: 'rgba(0,0,0,0.7)'
            //   },
            // },
          }
        ],
      },
      globalGridAttr: {
        type: 'mesh',
        size: 10,
        color: '#e5e5e5',
        thickness: 1,
        colorSecond: '#d0d0d0',
        thicknessSecond: 1,
        factor: 4,
        bgColor: '#e5e5e5',
        showImage: true,
        repeat: 'watermark',
        angle: 30,
        position: 'center',
        bgSize: JSON.stringify({width: 150, height: 150}),
        opacity: 0.1,

        stroke: '#5F95FF',
        strokeWidth: 1,
        connector: 'normal',
        label: '',

        nodeStroke: '#5F95FF',
        nodeStrokeWidth: 1,
        nodeFill: '#ffffff',
        nodeFontSize: 12,
        nodeColor: '#080808',
        nodeText: '',
        nodeDate: '',
        nodeUsers: '',
        nodeDataDate: '',
        nodeDataText: ''
      },
      isReady: false,
      curCel: Cell,
      left_p: document.documentElement.clientHeight -220,
      ports: {
        groups: {
          top: {
            position: 'top',
            attrs: {
              circle: {
                r: 8,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          right: {
            position: 'right',
            attrs: {
              circle: {
                r: 8,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          bottom: {
            position: 'bottom',
            attrs: {
              circle: {
                r: 8,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          left: {
            position: 'left',
            attrs: {
              circle: {
                r: 8,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
        },
        items: [
          {
            group: 'top',
          },
          {
            group: 'right',
          },
          {
            group: 'bottom',
          },
          {
            group: 'left',
          },
        ],
      }
    }
  },
  watch: {
  },
  methods: {
    async getFlowList() {
      let res = await this.$http.get(`/WfDef/getFlowList`)
      this.flowList = res.data
      console.log(this.flowList,'this.flowList')
      for (let i = 0; i < this.flowList.length; i++) {
        if (this.flowList[i] && this.flowList[i].id) {
          this.flowId = this.flowList[i].id
          console.log(this.flowId, 'this.flowId 6789')
          break
        }
      }
      this.flowChange(this.flowId)
    },
    flowChange() {
      this.dataForm.id = this.flowId
      // this.flowId = this.dataForm.id
      console.log(this.flowId,'this.flowId')
      this.getDiagram()
    },
    async getDiagram() {
      let res = await this.$http.get(`/WfDef/${this.flowId}`)
      if (res.data !== null) {
        this.dataForm = res.data
        if (res.data.diagram != null && res.data.diagram != '')
          this.diagramJson = JSON.parse(this.dataForm.diagram)
        else
          this.diagramJson = this.emptyJson
        console.log(this.diagramJson, 'this.Diagram json')
        this.graph.fromJSON(this.diagramJson)
        this.graph.centerContent()
        this.graph.zoomToFit()
        // this.graph.freeze('flowChart')
      } else {
        this.dataForm.id = null
/*        this.graph.fromJSON(this.emptyJson)
        this.graph.centerContent()
        this.graph.zoomToFit()
        this.graph.freeze()*/
      }
    },
    init1() {
      // console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
      // console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
      this.graph = new Graph({
        container: document.getElementById('flowChart'),
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight - 240,
        // async: true,
        grid: {
          visible: true,
        },
        onToolItemCreated({ tool }) {
          const handle = tool
          const options = handle.options
          if (options && options.index % 2 === 1) {
            tool.setAttrs({ fill: 'red' })
          }
        },
        autoResize: true,
        history: true,
        panning: {
          enabled: false,
        },
        scroller: {
          enabled: true,
          pageVisible: true,
          pageBreak: true,
          pannable: true,
        },
        mousewheel: {
          enabled: true,
          zoomAtMousePosition: true,
          modifiers: 'ctrl',
          minScale: 0.5,
          maxScale: 2,
        },
        connecting: {
          router: { name: 'manhattan' },
          connector: { name: 'rounded' },
          // anchor: 'center',
          connectionPoint: 'anchor',
          allowBlank: false,
          createEdge() {
            return new Shape.Edge({
              attrs: {
                line: {
                  stroke: '#A2B1C3',
                  strokeWidth: 2,
                  targetMarker: 'classic'
                }
              },
              tools: {
                name: 'segments',
                args: {
                  snapRadius: 20,
                  attrs: {
                    fill: '#444',
                  },
                },
              },
              zIndex: 0,
            })
          },
          validateConnection({targetMagnet}) {
            return !!targetMagnet
          },
        },
        highlighting: {
          magnetAdsorbed: {
            name: 'stroke',
            args: {
              attrs: {
                fill: '#5F95FF',
                stroke: '#5F95FF',
              },
            },
          },
        },
        resizing: {
          enabled:true,
          restricted:true
        },
        rotating: true,
        selecting: {
          enabled: true,
          rubberband: true,
          rubberEdge: true,
          showNodeSelectionBox: true,
        },
        snapline: true,
        keyboard: true,
        clipboard: true,
      })
      // graph.fromJSON(
      //   {nodes:nodes,
      //     edges:edges}
      // )
      this.graph.centerContent()
      const stencil = new Addon.Stencil({
        title: '',
        target: this.graph,
        stencilGraphWidth: 200,
        stencilGraphHeight: 480,
        // collapsable: true,
        groups: [
          {
            title: '图元',
            name: 'group1',
          }
        ],
        layoutOptions: {
          columns: 1,
          columnWidth: 120,
          // rowHeight: 75,
        },
      })
      document.getElementById('stencil2').appendChild(stencil.container)

      Graph.registerNode(
        'custom-polygon',
        {
          inherit: 'polygon',
          width: 86,
          height: 56,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: '#5F95FF',
              fill: '#EFF4FF',
            },
            // title:{
            //   text:'',
            //   refX: 40,
            //   refY: 38,
            //   fontSize: 14,
            //   fill: '#262626',
            //   'text-anchor': 'start',
            // },
            text: {
              // refX: 40,
              // refY: 14,
              fontSize: 14,
              fill: '#262626',
              // 'text-anchor': 'start',
            },
          },
          // markup: [
          //   {
          //     tagName: 'polygon',
          //     selector: 'body',
          //   },
          //   {
          //     tagName: 'text',
          //     selector: 'title',
          //   },
          //   {
          //     tagName: 'text',
          //     selector: 'text',
          //   },
          // ],
          ports: {
            ...this.ports
            // items: [
            //   {
            //     group: 'top',
            //   },
            //   {
            //     group: 'bottom',
            //   },
            // ],
          },
        },
        true,
      )

      Graph.registerNode(
        'custom-circle',
        {
          inherit: 'ellipse',
          width: 86,
          height: 56,
          data: {
            dataId: '',
            finishDate: ''
          },
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: '#5F95FF',
              fill: '#EFF4FF',
            },
            title: {
              text: '',
              fontSize: 14,
              fill: '#262626',
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
            text: {
              fontSize: 14,
              fill: '#262626',
              refX: 0.5,
              refY: 0.5,
              textAnchor: 'middle',
              textVerticalAnchor: 'middle',
            },
          },
          markup: [
            {
              tagName: 'ellipse',
              selector: 'body',
            },
            {
              tagName: 'text',
              selector: 'title',
            },
            {
              tagName: 'text',
              selector: 'text',
            },
          ],
          ports: {...this.ports},
        },
        true,
      )
      const r6 = this.graph.createNode({
        shape: 'text-block',
        label: '可选过程',
        width: 86,
        height: 56,
        data: {
          stepMarker:''
        },
        attrs: {
          body: {
            strokeWidth: 1,
            stroke: '#5F95FF',
            fill: '#EFF4FF',
            rx: 6,
            ry: 6
          },
          text: {
            text: '可选过程',
            fontSize: 14,
            fill: '#262626',
            refX: '0',
            refY: -0.5,
            refY2: '0',
            textAnchor: 'middle',
            textVerticalAnchor: 'middle',
          },
        },
        markup: [
          {
            tagName: 'rect',
            selector: 'body',
          },
          {
            tagName: 'text',
            selector: 'text',
          },
        ],
        ports: {...this.ports},
      })
      const r4 = this.graph.createNode({
        shape: 'custom-polygon',
        data: {
          stepMarker:''
        },
        attrs: {
          body: {
            refPoints: '0,10 10,0 20,10 10,20',
          },
        },
        label: '决策',
      })
      const r5 = this.graph.createNode({
        shape: 'custom-circle',
        data: {
          stepMarker:''
        },
        label: '阶段',
      })
      stencil.load([r4, r5,r6], 'group1')

      this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
        const cells = this.graph.getSelectedCells()
        if (cells.length) {
          this.graph.copy(cells)
        }
        return false
      })

      this.graph.bindKey(['meta+x', 'ctrl+x'], () => {
        const cells = this.graph.getSelectedCells()
        if (cells.length) {
          this.graph.cut(cells)
        }
        return false
      })

      this.graph.bindKey(['meta+v', 'ctrl+v'], () => {
        if (!this.graph.isClipboardEmpty()) {
          const cells = this.graph.paste({offset: 32})
          this.graph.cleanSelection()
          this.graph.select(cells)
        }
        return false
      })
//undo redo
      this.graph.bindKey(['meta+z', 'ctrl+z'], () => {
        if (this.graph.history.canUndo()) {
          this.graph.history.undo()
        }
        return false
      })

      this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
        if (this.graph.history.canRedo()) {
          this.graph.history.redo()
        }
        return false
      })

// select all
      this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
        const nodes = this.graph.getNodes()
        if (nodes) {
          this.graph.select(nodes)
        }
      })
//delete
      this.graph.bindKey('delete', () => {
        const cells = this.graph.getSelectedCells()
        if (cells.length) {
          this.graph.removeCells(cells)
        }
      })
// zoom
      this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
        const zoom = this.graph.zoom()
        if (zoom < 1.5) {
          this.graph.zoom(0.1)
        }
      })

      this.graph.bindKey(['ctrl+2', 'meta+2'], () => {
        const zoom = this.graph.zoom()
        if (zoom > 0.5) {
          this.graph.zoom(-0.1)
        }
      })

      this.graph.on('blank:click', ({cell}) => {
        this.reset()
        this.type = 'grid'
        // this.id = cell.id
      })

      this.graph.on('cell:click', ({cell}) => {
        // this.type.value = cell.isNode() ? "node" : "edge"
        this.type = cell.isNode() ? "node" : "edge"
        this.shape = cell.shape
        this.id = cell.id
        // this.nodeOpt(this.id, this.globalGridAttr)
      })
      //单击边节点
      this.graph.on('edge:click', ({edge}) => {
        this.reset()
        edge.attr('line/stroke', 'orange')
        edge.prop('labels/0', {
          attrs: {
            body: {
              stroke: 'orange',
            },
          },
        })
      })
      // 单击node节点
      this.graph.on('node:click', ({node}) => {
        this.reset()
        node.attr('line/stroke', 'orange')
        node.prop('labels/0', {
          attrs: {
            body: {
              stroke: 'orange',
            },
          },
        })
      })
      // 控制连接桩显示/隐藏
      this.graph.on('node:delete', ({view, e}) => {
        e.stopPropagation()
        view.cell.remove()
      })

      this.graph.on('node:customevent', ({name, view, e}) => {
        if (name === 'node:delete') {
          e.stopPropagation()
          view.cell.remove()
        }
      })
      // 双击编辑
      this.graph.on('cell:dblclick', ({cell, e}) => {
        const isNode = cell.isNode()
        const name = cell.isNode() ? 'node-editor' : 'edge-editor'
        cell.removeTool(name)
        cell.addTools({
          name,
          args: {
            event: e,
            attrs: {
              backgroundColor: isNode ? '#EFF4FF' : '#FFF',
              text: {
                fontSize: 16,
                fill: '#262626',
              },
            },
          },
        })
      })

      this.graph.on('node:mouseenter', ({node}) => {
        const flowChart = document.getElementById('flowChart')
        const ports = flowChart.querySelectorAll(
          '.x6-port-body',
        )
        this.showPorts(ports, true)
      })

      this.graph.on('node:mouseleave', ({node}) => {
        // if (node.hasTool('button-remove')) {
        //   node.removeTool('button-remove')
        // }
        const flowChart = document.getElementById('flowChart')
        const ports = flowChart.querySelectorAll(
          '.x6-port-body',
        )
        this.showPorts(ports, false)
      })

      this.graph.on('edge:mouseenter', ({cell}) => {
        cell.addTools([
          {
            name: 'source-arrowhead',
          },
          {
            name: 'target-arrowhead',
            args: {
              attrs: {
                fill: 'red',
              },
            },
          },
        ])
        cell.addTools(
          [
            {
              name: 'segments',
              args: {snapRadius: 20, attrs: {fill: '#444'}}
            }
          ]
        )
      })

      this.graph.on('edge:mouseleave', ({cell}) => {
        cell.removeTools()
      })
    },
    reset() {
      this.graph.drawBackground({color: '#fff'})
      const nodes = this.graph.getNodes()
      const edges = this.graph.getEdges()
      nodes.forEach((node) => {
        node.attr('body/stroke', '#5F95FF')
      })
      edges.forEach((edge) => {
        edge.attr('line/stroke', '#5F95FF')
        edge.prop('labels/0', {
          attrs: {
            body: {
              stroke: '#5F95FF',
            },
          },
        })
      })
    },
    showPorts(ports, show) {
      for (let i = 0, len = ports.length; i < len; i = i + 1) {
        ports[i].style.visibility = show ? "visible" : "hidden"
      }
    },
    nodeOpt(id, globalGridAttr) {
      this.curCel = null
      if (id) {
        let cell = this.graph.getCellById(id)
        // console.log(cell, 'let cell 123456')
        if (!cell || !cell.isNode()) {
          return
        }
        this.curCel = cell
        globalGridAttr.nodeStroke = cell.attr('body/stroke')
        globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
        globalGridAttr.nodeFill = cell.attr('body/fill')
        globalGridAttr.nodeFontSize = cell.attr('text/fontSize')
        globalGridAttr.nodeFontSize = cell.attr('title/fontSize')
        globalGridAttr.nodeColor = cell.attr('text/fill')
        globalGridAttr.nodeColor = cell.attr('title/fill')
        // globalGridAttr.nodeColor = cell.attr('label/text/fill')
        // globalGridAttr.nodeColor = cell.attr('label/title/fill')
        globalGridAttr.nodeUsers = cell.attr('approve/users')
        globalGridAttr.nodeText = cell.attr('text/text')
        globalGridAttr.nodeDate = cell.attr('title/text')
        // let data={
        //   dataId:this.flowId,
        //   finishDate: globalGridAttr.nodeDate,
        // }
        // cell.setData(data)
        // console.log( cell.getData(),' cell.getData() 909')
      }
      return this.curCel;
    },
    async saveDiagram() {
      console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
      this.dataForm.diagram = JSON.stringify(this.graph.toJSON())
      console.log(this.dataForm, 'dataFrom')
      await this.$http[this.dataForm.id === null ? 'post' : 'put'](`/WfDef`, this.dataForm).then(async res => {
        if (res.msg === 'success') {
          this.$alert('保存成功', '提示', {
            confirmButtonText: '确定'
          })
        }
      })
    }
  },
  mounted() {
    this.getFlowList()
    this.init1()
    // this.nodeOpt(this.id, this.globalGridAttr)
    // let data={
    //     dataId: this.flowId,
    //     finishDate: this.date
    // }
    // this.curCel.setData(data)
    // if(this.dataForm) {
    //   this.graph.fromJSON(this.diagramJson)
    // }
    this.type = 'grid'
  }
}
</script>

<style>
#flowChart {
  display: flex;
  border: 1px solid #dfe3e8;
  width: 100% !important;
}

.x6-graph-scroller.x6-graph-scroller-pannable {
  width: 100% !important;
}

#stencil2 {
  width: 100%;
  height: 100%;
  position: relative;
  border-right: 1px solid #dfe3e8;
}

.x6-widget-stencil {
  position: relative;
  height: 100%;
}

.x6-widget-stencil-content {
  position: relative;
  height: 100%;
}
.x6-graph-scroller.x6-graph-scroller-paged.x6-graph-scroller-pannable{
  box-shadow:1px 1px 3px #606266;
  border-radius: 10px;
}
</style>

 web/src/views/modules/flowChart/flowChartNode/index.vue

New file
@@ -0,0 +1,235 @@
<template>
  <div style="position: absolute;top:6%;right:0;z-index:1000;background:#cccccc;width: 300px;" :style="'height:'+ left_p + 'px'">
    <el-card style="height: 100%">
      <el-tabs v-model="activeName" id="tabPane">
        <el-tab-pane label="文本"  name="first">
          <el-row :gutter="5" align="middle" style="margin-top:20px">
            <el-col :span=8 style="font-size: 16px;line-height: 38px">文本大小</el-col>
            <el-col :span=16>
              <el-slider :min=8 :max=20 :step=1 v-model="globalGridAttr.nodeFontSize" @change="onFontSizeChange"></el-slider>
            </el-col>
          </el-row>
          <el-row :gutter="5" align="middle" style="margin-top:20px">
            <el-col :span=8 style="font-size: 16px;line-height: 40px">字体颜色</el-col>
            <el-col :span=16>
              <el-color-picker  v-model="globalGridAttr.nodeColor" style="width: 100%" @change="onColorChange"></el-color-picker>
            </el-col>
          </el-row>
          <el-row :gutter="5" align="middle" style="margin-top:20px">
            <el-col :span=8 style="font-size: 16px;line-height: 32px">文本内容</el-col>
            <el-col :span=16 >
<!--              <el-input v-model="globalGridAttr.nodeText" style="width: 100%" @change="onTextChange"></el-input>-->
              <el-select style="width: 100%" :value-key="key" v-model="globalGridAttr.nodeText" @change="onTextChange($event)">
                <el-option v-for="item in FlowStepList"
                           :key="item.stepMarker"
                           :label="item.stepTitle"
                           :value="item.stepMarker">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="节点"  name="second">
          <el-row align="middle" style="margin-top:20px">
            <el-col :span=8 style="font-size: 16px;line-height: 40px">边框颜色</el-col>
            <el-col :span=16>
              <el-color-picker v-model="globalGridAttr.nodeStroke" style="width: 100%" @change="onStrokeChange"></el-color-picker>
            </el-col>
          </el-row>
          <el-row align="middle"style="margin-top:20px">
            <el-col :span=8 style="font-size: 16px;line-height: 38px">边框宽度</el-col>
            <el-col :span=16>
              <el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.nodeStrokeWidth" @change="onStrokeWidthChange"></el-slider>
            </el-col>
          </el-row>
          <el-row align="middle" style="margin-top:20px">
            <el-col :span=8 style="font-size: 16px;line-height: 40px">颜色</el-col>
            <el-col :span=16>
              <el-color-picker  v-model="globalGridAttr.nodeFill" style="width: 100%" @change="onFillChange"></el-color-picker>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { Graph, Shape, Node, Addon, Cell,FunctionExt} from '@antv/x6';
// const {inject} = require("vue");
export default {
  name: "index",
  data(){
    return{
      data:'',
      FlowStepList:[],
      date:'',
      text:'',
      content:'',
      activeName: 'first',
      // globalGridAttr:{},
      curCel:Cell,
      left_p:document.documentElement.clientHeight*0.9,
    }
  },
  props:{
    id: {
      type: String,
    },
    shape:{
      type: String
    },
    globalGridAttr:{
      type: Object,
    },
    graph:{
      type: String,
    },
    flowId:{
      type: String,
    }
  },
  watch:{
    'id'(val,oldVal){
      this.getFlowStepList()
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    'flowId'(val,oldVal){
      this.FlowStepList = []
      this.getFlowStepList()
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
      // this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    }
  },
  mounted() {
    this.getFlowStepList()
    // this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
  },
  methods:{
   async getFlowStepList(){
      let res= await this.$http.get(`/WfDef/getFlowStepList?flowId=${this.flowId}`)
      if(res.data){
        this.FlowStepList =res.data
      }
      console.log(this.FlowStepList,'this.FlowStepList')
    },
    // 改变边框颜色
    onStrokeChange(e){
      // this.curCel = Cell
      let val = e
      this.globalGridAttr.nodeStroke = val
      this.curCel.attr('body/stroke', val)
    },
    //改变边框大小
    onStrokeWidthChange(e){
      let val =e
      this.globalGridAttr.nodeStrokeWidth = val
      this.curCel.attr('body/strokeWidth', val)
    },
    //改变背景颜色
    onFillChange(e){
      let val = e
      this.globalGridAttr.nodeFill=val
      this.curCel.attr('body/fill', val)
    },
    // 改变字体大小
    onFontSizeChange(e){
      let val =e
      this.globalGridAttr.nodeFontSize = val
      this.curCel.attr('text/fontSize', val)
      this.curCel.attr('title/fontSize', val)
    },
    // 改变字体颜色
    onColorChange(e){
      let val =e
      this.globalGridAttr.nodeColor = val
      this.curCel.attr('text/fill', val)
      this.curCel.attr('title/fill', val)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    // 改变文本
    onTextChange(e){
     let selectItemObj= this.FlowStepList.find((item)=>{
        return item.stepMarker===e
      })

      this.curCel.setData({
        stepMarker:e
      })
      this.curCel.attr('text/text', selectItemObj.name)
      this.globalGridAttr.nodeText = e
      this.curCel = this.nodeOpt(this.id, this.globalGridAttr)

/*      this.text =e
      if(this.text.indexOf("：")!==-1){
        let arr = this.text.split("：")
        let title = arr[1]
        this.data={
          stepMarker:obj.stepMarker
        }
        this.curCel.setData(this.data)
        this.curCel.attr('text/text',title)
        this.globalGridAttr.nodeText = obj.stepMarker //this.text
        this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
      }else {
        let title = this.text
        this.data={
          stepMarker:obj.stepMarker
        }
        this.curCel.setData(this.data)
        this.curCel.attr('text/text',title)
        this.globalGridAttr.nodeText = obj.stepMarker //this.text
        this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
      }*/
    },
    onDateChange(e){
      this.date =e
      this.globalGridAttr.nodeDate = this.date
      this.curCel.attr('title/text', this.date)
      this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
    },
    nodeOpt(id, globalGridAttr){
      this.curCel=null
      if(id){
        let cell =  this.graph.getCellById(id)
        console.log(cell,'let cell 123456')
        if (!cell || !cell.isNode()) {
          return
        }
        this.curCel = cell
        console.log(this.curCel.getData(),'this.curCel.getData()')

        globalGridAttr.nodeStroke = cell.attr('body/stroke')
        globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
        globalGridAttr.nodeFill = cell.attr('body/fill')
        globalGridAttr.nodeFontSize = cell.attr('text/fontSize')?cell.attr('text/fontSize'):cell.attr('title/fontSize')
        //globalGridAttr.nodeFontSize = cell.attr('title/fontSize')
        globalGridAttr.nodeColor = cell.attr('text/fill') ? cell.attr('text/fill'):cell.attr('title/fill')?cell.attr('title/fill'):cell.attr('label/text/fill')
        // globalGridAttr.nodeColor = cell.attr('title/fill')
        // globalGridAttr.nodeColor = cell.attr('label/text/fill')
        // globalGridAttr.nodeColor = cell.attr('label/title/fill')
        // globalGridAttr.nodeColor = cell.attr('label/style/fill')

        //globalGridAttr.nodeUsers = cell.attr('approve/users')
        //globalGridAttr.nodeDate = cell.attr('title/text')

        globalGridAttr.nodeText = this.curCel.getData().stepMarker
        console.log(globalGridAttr.nodeText,'globalGridAttr.nodeText globalGridAttr.nodeText')
        cell.getData()
        console.log( cell.getData(),' cell.getData() 909')
      }
      return this.curCel;
    }
  }
}
</script>

<style >
#tabPane .el-tabs__header.is-top .el-tabs__nav-scroll{
  width: 100% !important;
}

#tabPane .el-color-picker__trigger{
  width: 100%;
}
</style>

 web/src/views/modules/flowChart/flowChartView.vue

New file
@@ -0,0 +1,474 @@
<template>
  <div>
    <el-form :inline="true" style="padding: 0">
      <zt-form-item style="float: left;margin-bottom: 0">
        <zt-button style="background:#EAEBEE;border: 1px solid #EAEBEE;color:#000">未完成</zt-button>
        <zt-button style="background:#F1F0A3;border: 1px solid #F1F0A3;color:#000">进行中</zt-button>
        <zt-button style="background:#5FF13A;border: 1px solid #5FF13A;color:#000">已完成</zt-button>
      </zt-form-item>
    </el-form>
        <div id="flowChartView" style="border: 1px solid #EAEBEE;border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);overflow-x: hidden">
        </div>
<!--    <el-tooltip id="toolTip" class="box-item" effect="dark" content="1234" placement="top">-->
<!--      <div></div>-->
<!--    </el-tooltip>-->
  </div>
</template>

<script>
import {Graph, Shape, Addon, Cell,ToolsView,NodeView} from '@antv/x6';
export default {
  name: "flowChart-view",
  components: {
  },
  props:{
    flowChartHeight:''
  },
  data() {
    return {
      prop:{
        content:'',
        visible:false,
      },
      knob:HTMLDivElement,
      flowCode:'',
      diagramList:[],
      diagramName:'',
      diagramId:'',
      flowList: '',
      flowId: '',
      diagramJson: '',
      dataForm: { // 流程图内容
        id: null,
        diagram: null
      },
      emptyJson: {
        // 节点
        nodes: [
          {
            id: 'node1', // String，可选，节点的唯一标识
            width: 500,   // Number，可选，节点大小的 width 值
            height: 300,  // Number，可选，节点大小的 height 值
            label: '该项目还未配置厂家网络图',
            attrs: {
              body: {
                strokeWidth: 0
              },
            }
            //   text: {
            //     text: '该项目还未编制网络图',
            //     // fontSize: 56,
            //     fill: 'rgba(0,0,0,0.7)'
            //   },
            // },
          }
        ],
      },
      type: '',
      id: '',
      graph: null,
      globalGridAttr: {
        type: 'mesh',
        size: 10,
        color: '#e5e5e5',
        thickness: 1,
        colorSecond: '#d0d0d0',
        thicknessSecond: 1,
        factor: 4,
        bgColor: '#e5e5e5',
        showImage: true,
        repeat: 'watermark',
        angle: 30,
        position: 'center',
        bgSize: JSON.stringify({width: 150, height: 150}),
        opacity: 0.1,

        stroke: '#5F95FF',
        strokeWidth: 1,
        connector: 'normal',
        label: '',

        nodeStroke: '#5F95FF',
        nodeStrokeWidth: 1,
        nodeFill: '#ffffff',
        nodeFontSize: 12,
        nodeColor: '#080808',
        nodeText: '',
        nodeDate: '',
        nodeUsers: '',
        nodeDataDate: '',
        nodeDataText: ''
      },
      isReady: false,
      curCel: Cell,
      left_p: document.documentElement.clientHeight * 0.85,
      ports: {
        groups: {
          top: {
            position: 'top',
            attrs: {
              circle: {
                r: 8,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          right: {
            position: 'right',
            attrs: {
              circle: {
                r: 8,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          bottom: {
            position: 'bottom',
            attrs: {
              circle: {
                r: 8,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
          left: {
            position: 'left',
            attrs: {
              circle: {
                r: 8,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden',
                },
              },
            },
          },
        },
        items: [
          {
            group: 'top',
          },
          {
            group: 'right',
          },
          {
            group: 'bottom',
          },
          {
            group: 'left',
          },
        ],
      }
    }
  },
  watch: {
  },
  methods: {
    async init(params) {
      let res = await this.$http.get(`/WfDef/getFlowStatusJson`,{params:params})
      console.log(res.data,'res.data ')
      if (res.data !== null) {
        this.dataForm = res.data
        this.graph.unfreeze('flowChartView')
        if (this.dataForm.diagram!=null){
          this.graph.fromJSON(JSON.parse(this.dataForm.diagram))
        } else{
          this.graph.fromJSON(this.emptyJson)
        }
        this.graph.positionContent('top',{ padding: { left: 0 }})
        // this.graph.zoomToFit()
        this.graph.freeze('flowChartView')
        if(flowCode!='planFlow' && flowCode!='wltFlow' && flowCode!='xbsy' && flowCode!='hxsy' && flowCode!='kybgFlow'
          && flowCode!='jsfaFlow' && flowCode!='jzjysFlow' && flowCode!='zjgcFlow'){
          if(this.graph.scroller){
            for(let graph in this.graph.scroller.widgetOptions){
              this.graph.scroller.widgetOptions[graph] = false
            }
          }
          // this.graph.disablePanning()
          this.graph.lockScroller()
        }
      } else {
        this.graph.unfreeze('flowChartView')
        this.dataForm.id = null
        console.log(this.data, 'this.data asdfg')
        this.graph.fromJSON(this.emptyJson)
        this.graph.centerContent()
        // this.graph.zoomToFit()
        this.graph.freeze('flowChartView')
      }
    },
    init2() {
      this.graph = new Graph({
        container: document.getElementById('flowChartView'),
        width: document.documentElement.clientWidth*0.5,
        height:this.flowChartHeight? 595:document.documentElement.clientHeight-220,
        // async: true,
        // grid: {
        //   visible: true,
        // },
        // autoResize: true,
        // panning: {
        //   enabled: true,
        // },
        scroller: {
          enabled: true,
          pannable: true,
        },
        mousewheel: {
          enabled: true,
          zoomAtMousePosition: true,
          modifiers: 'ctrl',
          minScale: 0.1,
          maxScale: 10,
        },
        connecting: {
          router: { name: 'manhattan' },
          connector: { name: 'rounded' },
          connectionPoint: 'anchor',
          allowBlank: false,
          snap: {
            radius: 20,
          }
        },
      })
      this.graph.centerContent()
      Graph.registerNode(
        'custom-polygon',
        {
          inherit: 'polygon',
          width: 86,
          height: 56,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: '#5F95FF',
              fill: '#EFF4FF',
            },
            text: {
              fontSize: 20,
              fill: '#262626',
            },
          },
          ports: {
            ...this.ports
          },
        },
        true,
      )

      Graph.registerNode(
        'custom-circle',
        {
          inherit: 'ellipse',
          width: 86,
          height: 56,
          data: {
            dataId: '',
            finishDate: ''
          },
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: '#5F95FF',
              fill: '#EFF4FF',
            },
            title: {
              text: '',
              fontSize: 20,
              fill: '#262626',
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
            text: {
              fontSize: 20,
              fill: '#262626',
              refX: 0.5,
              refY: 0.5,
              textAnchor: 'middle',
              textVerticalAnchor: 'middle',
            },
          },

          markup: [
            {
              tagName: 'ellipse',
              selector: 'body',
            },
            {
              tagName: 'text',
              selector: 'title',
            },
            {
              tagName: 'text',
              selector: 'text',
            },
          ],
          ports: {...this.ports},
        },
        true,
      )
      const r6 = this.graph.createNode({
        shape: 'text-block',
        label: '可选过程',
        width: 86,
        height: 56,
        data: {
          dataId: '',
          finishDate: ''
        },
        attrs: {
          body: {
            strokeWidth: 1,
            stroke: '#5F95FF',
            fill: '#EFF4FF',
            rx: 6,
            ry: 6
          },
          text: {
            text: '可选过程',
            fontSize: 20,
            fill: '#262626',
            refX: '0',
            refY: -0.5,
            refY2: '0',
            textAnchor: 'middle',
            textVerticalAnchor: 'middle',
          },
        },
        markup: [
          {
            tagName: 'rect',
            selector: 'body',
          },
          {
            tagName: 'text',
            selector: 'text',
          },
        ],
        ports: {...this.ports},
      })
      const r4 = this.graph.createNode({
        shape: 'custom-polygon',
        attrs: {
          body: {
            refPoints: '0,10 10,0 20,10 10,20',
          },
        },
        label: '决策',
      })
      const r5 = this.graph.createNode({
        shape: 'custom-circle',
        data: {
          dataId: '',
          finishDate: ''
        },
        label: '阶段',
      })
      // 单击node节点
      this.graph.on('node:click', ({node}) => {
          let stepMarker = node.getData().stepMarker || ''
          this.$emit('fatherMethod',stepMarker)
          console.log(node.getData(),stepMarker,'  node.getData()')
      })
      // // 鼠标移入node节点
      this.graph.on('node:mouseenter', ({node,e}) => {
        const style = this.knob.style
        // e.stopPropagation()
        setTimeout(()=>{
        if (e) {
          if (node.getData().receiveName && node.getData().receiveName!==undefined) {
              const p = this.graph.clientToGraph(e.clientX, e.clientY)
              style.display = 'block'
              style.left = `${p.x}px`
              style.top = `${p.y}px`
              style.width = (node.getData().tipsWidth +30+ 'px')
              style.height = (40 + 'px')
              style.textAlign = 'center'
              style.background = '#000'
              style.color = '#fff'
              style.lineHeight = (40 + 'px')
              this.knob.innerText = node.getData().receiveName === undefined ? '暂无' : node.getData().receiveName
          }else{
            style.display = 'none'
            style.left = '-1000px'
            style.top = '-1000px'
          }
        } else {
          style.display = 'none'
          style.left = '-1000px'
          style.top = '-1000px'
        }
        },50)
      })
      // // 鼠标移出node节点
      this.graph.on('node:mouseleave', ({node}) => {
        const style = this.knob.style
        style.display = 'none'
      })
    }
  },
  mounted() {
    this.init2()
    this.type = 'grid'
     this.knob = document.createElement('div',false)
    // this.knob = document.getElementById('toolTip')
    this.knob.style.position = 'absolute'
    document.getElementById('flowChartView').appendChild(this.knob)
  }
}
</script>

<style>
#flowChartView {
  display: flex;
  border: 1px solid #dfe3e8;
  width: 100% !important;
}
#flowChartView .x6-cell.x6-node {
  cursor: inherit;
}
.x6-graph-scroller.x6-graph-scroller-pannable {
  width: 100% !important;
}

.x6-widget-stencil {
  position: relative;
  height: 100%;
}

.x6-widget-stencil-content {
  position: relative;
  height: 100%;
}
.clear::after{
  content: '';
  display: table;
  clear: both;
}
</style>

 web/src/views/modules/flowChart/processTimeline.vue

New file
@@ -0,0 +1,111 @@
<template>
  <el-row :gutter="10">
    <el-col>
      <FlowChartView :flowChartHeight="flowChartHeight" ref="flowChartView"></FlowChartView>
    </el-col>
    <el-col>
      <ProcessTrajectory ref="processTrajectory" @refreshDataList="getQuery()"></ProcessTrajectory>
    </el-col>
  </el-row>
</template>

<script>
  import FlowChartView from './flowChartView'
  import ProcessTrajectory from './ProcessTrajectory'

  export default {
    name: "processTimeline",
    props:{
      flowChartHeight:''
    },
    data() {
      return {
        contractComponent: null,
        dataForm2: {
          id: '',
          projectId: '',
          approveStepId: '',
        },
        isBlankPage:true,
        word: {},
        transTitle: ['数量'],
        stepCountList: [],
        constructionList: [],
        isBackground1: false,
        approvalNum: '',
        refuseNum: '',
        num: '',
        repairNum: '',
        approveStepId: '',
        pier: '',
        agreed: '',
        repair: '',
        approve: '',
        projectId: '',
        processData: false,
        flowCode: '',
        selectFlowCode: '',
        showFlowCode: '',
        stepMarker: '',
        statusData: {},
        noneFrame: false,
      };
    },
    components: {
      FlowChartView,
      ProcessTrajectory
    },
    watch: {},
    created() {
    },
    computed: {},
    methods: {
      init(row) {
        console.log(row, 'row init')
        this.showFlowCode = this.selectFlowCode = this.flowCode = row.flowCode
        this.showFlowCode = 'planFlow'
        this.stepMarker = row.stepMarker
        let params={
          flowCode:row.flowCode,
          bizId:row.bizId
        }
        this.$nextTick(() => {
          this.$refs.flowChartView.init(params)
          this.$refs.processTrajectory.init(params)
        })
      },
      indexFormat(index) {
        return index += 1
      },
      handleInfiniteLoadingBeforeGet() {
        this.page = 1;
        this.dataListAll = []
        this.dataList = []
      },
      async getQuery(){
        this.handleInfiniteLoadingBeforeGet()
        this.dataLoading = true
        let params = {
          djxlSystem: this.dataForm.djxlSystem,
        }
        let res = await this.$http.get(`/newPlan/taskCenter/page`,{
          params: params
        })
        if (res.success) {
          this.dataLoading = false
          this.handleInfiniteLoadingAfterGet(res)
          console.log(this.dataList, 'getQuery:this.dataList')
        } else {
          this.dataLoading = true
        }
      },
    },
    mounted() {
      // this.kwReplacement()
    }
  }
</script>

<style>

</style>

 web/src/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate.vue

@@ -121,7 +121,7 @@
          </div>
          <div class="el-border-left-right acceptDate" style="width: 20%;height: 80px;">
            <el-form-item style="width: 100%;padding-left:20px;margin:0;">
              {{dataForm.circulatOrder.acceptDate}}
              {{ dataForm.circulatOrder.acceptDate | filterTime('YYYY年MM月DD日') }}
            </el-form-item>
          </div>
          <div style="width: 84px;text-align: center;font-weight: 600">
@@ -176,7 +176,8 @@
          </div>
          <div class="el-border-left-right" style="width: 20%;height: 40px;">
            <el-form-item style="width: 100%;padding-left:20px;margin:0;">
              {{dataForm.circulatOrder.detectDate}}
<!--              {{dataForm.circulatOrder.detectDate}}-->
              {{ dataForm.circulatOrder.detectDate | filterTime('YYYY年MM月DD日') }}
            </el-form-item>
          </div>
          <div style="width: 84px;text-align: center;font-weight: 600">
@@ -228,7 +229,8 @@
          </div>
          <div class="el-border-left-right " style="width: 20%;height: 40px;">
            <el-form-item style="width: 100%;padding-left:20px;margin:0;">
              {{dataForm.circulatOrder.issueDate}}
<!--              {{dataForm.circulatOrder.issueDate}}-->
              {{ dataForm.circulatOrder.issueDate | filterTime('YYYY年MM月DD日') }}
            </el-form-item>
          </div>
          <div style="width: 84px;text-align: center;font-weight: 600">

 web/src/views/modules/itemCirculatOrder/ItemCirculatOrder.vue

@@ -1,6 +1,5 @@
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-itemCirculatOrder-itemCirculatOrder}">
    <div class="fa-card-a">
      <zt-table-wraper query-url="/itemCirculatOrder/ItemCirculatOrder/page" delete-url="/itemCirculatOrder/ItemCirculatOrder/deleteCirculat" v-slot="{ table }">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()">
          <el-form-item>
@@ -33,7 +32,6 @@
        </ProjectSelect>
      </zt-table-wraper>
    </div>
  </el-card>
</template>

<script>

 web/src/views/modules/project/Environ.vue

@@ -1,6 +1,5 @@
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-project-environ}">
    <div class="fa-card-a">
      <zt-table-wraper query-url="/project/Environ/page" delete-url="/project/Environ/deleteEnviron" v-slot="{ table }" @dataLoaded="dataLoaded">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()">
          <el-form-item>
@@ -31,7 +30,6 @@
        </ProjectSelect>
      </zt-table-wraper>
    </div>
  </el-card>
</template>

<script>

 web/src/views/modules/project/Project.vue

@@ -1,6 +1,5 @@
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-project-project}">
    <div class="fa-card-a">
      <zt-table-wraper query-url="/project/Project/page" delete-url="/project/Project/deleteProject" v-slot="{ table }">
        <el-form :inline="true" class="form-input-width-1"  :model="dataForm" @keyup.enter.native="table.query()">
          <el-form-item>
@@ -52,7 +51,6 @@
        <add-or-update @refreshDataList="table.query"/>
      </zt-table-wraper>
    </div>
  </el-card>
</template>

<script>

 web/src/views/modules/project/SoftwareTestOrder.vue

@@ -1,6 +1,5 @@
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-project-softwareTestOrder}">
    <div class="fa-card-a">
      <zt-table-wraper query-url="/project/SoftwareTestOrder/page" delete-url="/project/SoftwareTestOrder/deleteOrder"
                       v-slot="{ table }">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()">
@@ -51,7 +50,6 @@
        <Preview ref="view" :pageMarkerfun="SoftwareTestOrder"></Preview>
      </zt-table-wraper>
    </div>
  </el-card>
</template>

<script>

 web/src/views/modules/sys/task/already-task.vue

@@ -6,7 +6,7 @@
      <el-input type="text" v-model="dataForm.djxlSystem" v-if="false" />
    </el-form>
    <el-table ref="table"
              :height="getTransformHeight(transformHeight)"
              :height="getTransformHeight()"
              class="pushtable  table-is__left-tz"
              v-loading="dataLoading"
              :data="dataList"
@@ -27,13 +27,13 @@
      <el-table-column align="center" prop="stepName" label="当前状态" width="240px"/>
      <el-table-column align="center" prop="receiveName" label="办理人"  width="120px"/>
      <!--        <el-table-column align="center" prop="statusName" label="我的意见" />-->
      <el-table-column label="操作" width="220px">
      <el-table-column label="操作" width="180px">
        <template v-slot="{ row }">
          <zt-table-button v-show="row.canRecall == 1 && !$store.state.user.isAdmin" @click="reCall(row)">撤回</zt-table-button>
          <zt-table-button @click="check(row,'')" v-if="row.flowCode !== 'yearPlanFlow'">查看</zt-table-button>
          <zt-table-button @click="check(row,'')" v-if="row.flowCode === 'yearPlanFlow'">修改</zt-table-button>
          <zt-table-button @click="flowChart(row)">流程图</zt-table-button>
          <zt-table-button v-if="row.flowCode != 'yearPlan2'" @click="getFlowTrack(row)">办理轨迹</zt-table-button>
<!--          <zt-table-button v-if="row.flowCode != 'yearPlan2'" @click="getFlowTrack(row)">办理轨迹</zt-table-button>-->
        </template>
      </el-table-column>
      <infinite-loading
@@ -57,6 +57,7 @@
  import cloneDeep from 'lodash/cloneDeep'
  import InfiniteLoading from 'vue-infinite-loading'
  import ItemCirculatOrder from '@/views/modules/itemCirculatOrder/ItemCirculatOrder-AddOrUpdate'
  import Cookies from "js-cookie";

  export default {
    data() {
@@ -146,13 +147,9 @@
        });
      },

      getTransformHeight(transformHeight){
      getTransformHeight(){
        let Height=document.documentElement.clientHeight
        if(transformHeight){
          return  Height-(650-403)
        }else{
          return  Height-650
        }
      },
      async getQuery(){
        this.handleInfiniteLoadingBeforeGet()

 web/src/views/modules/sys/task/stay-task.vue

@@ -6,7 +6,7 @@
      <el-input type="text" v-model="dataForm.djxlSystem" v-if="false"/>
    </el-form>
    <el-table ref="table"
              :height="getTransformHeight(transformHeight)"
              :height="getTransformHeight()"
              v-loading="dataLoading"
              :data="dataList"
              style='margin-top:10px;transition: .5s;'
@@ -182,13 +182,9 @@
          this.dataLoading = true
        }
      },
      getTransformHeight(transformHeight) {
      getTransformHeight() {
        let Height = document.documentElement.clientHeight
        if (transformHeight) {
          return Height - (650 - 403)
        } else {
          return Height - 650
        }
      },
      async reCall(row) {
        if (await this.$tip.confirm('确定要进行撤回吗?')) {

 web/src/views/modules/sys/task/taskCenter.vue

@@ -12,12 +12,16 @@
        <alreadyTask :system="system" ref="alreadyTask" @alreadyTask="getDiagram1"></alreadyTask>
      </el-tab-pane>
    </el-tabs>
    <el-dialog v-dialogDrag title="项目进度图" top="10vh" width='85%' :visible.sync="dialogVisible">
      <processTimeline ref="processTimeline"></processTimeline>
    </el-dialog>
  </div>
</template>

<script>
  import stayTask from './stay-task'
  import alreadyTask from './already-task'
  import processTimeline from '../../flowChart/processTimeline'

  export default {
    data() {
@@ -31,7 +35,8 @@
    },
    components: {
      stayTask,
      alreadyTask
      alreadyTask,
      processTimeline
    },
    mounted() {
    },

 zt/core/src/main/resources/mapper/workflowconfig/WfDefDao.xml

@@ -116,14 +116,11 @@
    </select>

    <select id="getStyleList" resultType="com.zt.modules.workflowconfig.model.WfDef">
        select Content as diagram
        from WX_NETWORK_DIAGRAM
        select diagram
        from wf_def
        where is_delete = 0
        <if test="projectId!=null and projectId!=''">
            and PROJECT_ID = #{projectId}
        </if>
        <if test="diagramId!=null and diagramId!=''">
            and DIAGRAM_ID = #{diagramId}
        <if test="flowCode!=null and flowCode!=''">
            and CODE = #{flowCode}
        </if>
    </select>