mes-web/src/view/process/process-flow/process-setting.vue

<template>
  <div class="main-div" style="width:100%;height:100%;"  ref="mainDiv">
    <Layout style="width:100%;height:calc(100% - 68px);">
      <Layout style="width:100%;height:100%;">
        <!--   左侧工具栏   -->
        <Sider :width="180">
          <div id="stencil"></div>
        </Sider>
        <!--   中间流程图  -->
        <Content>
          <div id="container" ref="container" style="width:100%;height:100%"/>
        </Content>
        <!--   底部按钮   -->
      </Layout>
      <Footer class="footer">
        <div class="tools">
          <Poptip trigger="hover" >
            <Button icon="ios-options"></Button>
            <div slot="content" style="background: #f8f8f9">
              <Card title="快捷键说明" icon="ios-options" :padding="0" shadow style="width: 350px;">
                <CellGroup>
                  <Cell title="复制">
                    <div slot="extra" style="display: flex">
                      <div class="key">Ctrl</div>
                      <div class="key">C</div>
                    </div>
                  </Cell>
                  <Cell title="剪切">
                    <div slot="extra" style="display: flex">
                      <div class="key">Ctrl</div>
                      <div class="key">X</div>
                    </div>
                  </Cell>
                  <Cell title="粘贴">
                    <div slot="extra" style="display: flex">
                      <div class="key">Ctrl</div>
                      <div class="key">V</div>
                    </div>
                  </Cell>
                  <Cell title="撤销">
                    <div slot="extra" style="display: flex">
                      <div class="key">Ctrl</div>
                      <div class="key">Z</div>
                    </div>
                  </Cell>
                  <Cell title="撤回撤销">
                    <div slot="extra" style="display: flex">
                      <div class="key">Ctrl</div>
                      <div class="key">Shift</div>
                      <div class="key">Z</div>
                    </div>
                  </Cell>
                  <Cell title="全选">
                    <div slot="extra" style="display: flex">
                      <div class="key">Ctrl</div>
                      <div class="key">Alt</div>
                      <div class="key">A</div>
                    </div>
                  </Cell>
                  <Cell title="删除">
                    <div slot="extra" style="display: flex">
                      <div class="key">Del</div>
                    </div>
                  </Cell>
                  <Cell title="放大">
                    <div slot="extra" style="display: flex;align-items: center">
                      <div class="key">Ctrl</div>
                      <div class="key">Alt</div>
                      <div class="key">+</div>
                      <div style="padding-left:3px">或</div>
                      <div class="key">Ctrl</div>
                      <div style="padding-left:3px">+ 鼠标滚轮</div>
                    </div>
                  </Cell>
                  <Cell title="缩小">
                    <div slot="extra" style="display: flex">
                      <div class="key">Ctrl</div>
                      <div class="key">Alt</div>
                      <div class="key">-</div>
                      <div style="padding-left:3px">或</div>
                      <div class="key">Ctrl</div>
                      <div style="padding-left:3px">+ 鼠标滚轮</div>
                    </div>
                  </Cell>
                  <Cell title="整体移动画布" extra="鼠标右键按住空白处拖动" />
                  <Cell title="多选" extra="鼠标左键按住空白处框选" />
                  <Cell title="移入节点组" extra="鼠标左键按住节点拖入" />
                  <Cell title="移出节点组">
                    <div slot="extra" style="display: flex;align-items: center">
                      <div>按住</div>
                      <div class="key">Ctrl</div>
                      <div style="padding-left:3px">+ 鼠标左键按住节点拖出</div>
                    </div>
                  </Cell>
                  <Cell title="调整路线形状">
                    <div slot="extra" style="display: flex;align-items: center;">
                      <div>按住</div>
                      <div class="key">Ctrl</div>
                      <div style="padding-left:3px">+ 鼠标左键拖动路线</div>
                    </div>
                  </Cell>
                </CellGroup>
              </Card>
            </div>
          </Poptip>
          <Tooltip content="节点居中">
            <Button icon="md-contract" @click="()=>{this.graph.centerContent(); this.graph.cleanSelection()}"></Button>
          </Tooltip>
          <Tooltip content="适应窗口">
            <Button icon="md-expand" @click="()=>{this.graph.zoomToFit(); this.graph.cleanSelection()}"></Button>
          </Tooltip>
          <Tooltip content="原始比例">
            <Button icon="iconfont iconfont icon-one2one" @click="()=>{this.graph.zoomTo(1); this.graph.cleanSelection()}"></Button>
          </Tooltip>
          <Tooltip content="显示/隐藏小地图">
            <Button icon="md-map" @click="()=>{this.showMiniMap=!this.showMiniMap}"></Button>
          </Tooltip>
          <Tooltip :content="leftMouseContent">
            <Button :icon="leftMouseIcon" @click="changeLeftMouse"></Button>
          </Tooltip>
          <Tooltip content="导出PNG">
            <Button icon="md-images" @click="()=>{this.graph.exportPNG('',{padding:50})}"></Button>
          </Tooltip>
          <Tooltip content="导出JSON">
            <Button icon="ios-cloud-download" @click="exportJson"></Button>
          </Tooltip>
          <Tooltip content="导入JSON">
            <Upload action="" accept=".json" :before-upload="uploadJson">
              <Button icon="ios-cloud-upload"></Button>
            </Upload>
          </Tooltip>
        </div>
        <div>
          <DkButton style="margin-right: 10px;" ref="save" type="primary" @click="save">{{ $t('save') }}</DkButton>
          <DkButton ref="close" @click="close('/process/process-flow/index')">{{ $t('close') }}</DkButton>
        </div>
      </Footer>
    </Layout>
    <!--  缩放比例  -->
    <div class="scale">
      <InputNumber v-model="scaleValue"
                   :min="scaleMin"
                   :max="scaleMax"
                   :step="0.1"
                   controls-outside
                   :editable="false"
                   style="width: 180px"
                   :formatter="value => `缩放比例：${(value * 100).toFixed(0)}%`"
                   :parser="value => value.replace('%', '').replace('缩放比例：', '')"
                   @on-change="(e)=>{this.graph.zoomTo(e)}"
      ></InputNumber>
    </div>
    <!--  小地图  -->
    <transition name="fade">
      <div id="miniMap" ref="miniMap" class="miniMap" v-show="showMiniMap"/>
    </transition>
      <!--  节点弹窗  -->
      <NodeModal key="node" v-if="process.nodeModal.display"
                 :dataKindList="dataKindList"
                 :productGradeList="productGradeList"
                 :jobList="jobList"
                 :shopList="shopList"
                 :kilnList="kilnList"
                 :whList="whList"
                 :dictionaryDataList="dictionaryDataList"/>
      <!--  连线弹窗  -->
      <EdgeModal key="edge" v-if="process.edgeModal.display"
                 :dictionaryDataList="dictionaryDataList"
                 :productGradeList="productGradeList.filter(it=>![$config.gradeKindType.decrease,$config.gradeKindType.inferior].includes(it.gradeKind))"/>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import NodeModal from '_c/business/process/node-modal/node-modal'
import EdgeModal from '_c/business/process/edge-modal/edge-modal'

const insertCss = require('insert-css')
import Process from '@/view/process/process-flow/config/ProcessConfig'
import queryUtil from '@/view/process/process-flow/queryUtil'
import { formMixin } from '@/mixins/form'
import FileSaver from 'file-saver'
import { Selection } from '@antv/x6-plugin-selection'

export default {
  name: 'process-setting',
  mixins: [formMixin],
  components: { NodeModal, EdgeModal },
  props: {
    type: {
      type: String,
      default: 'edit'
    },
  },
  data() {
    return {
      showMiniMap:true,
      scaleValue: 1,
      scaleMax: 3,
      scaleMin: 0.5,
      graph: null,//图形对象
      exportData: undefined,
      importValue: undefined,
      dataKindList: [],//基础数据
      productGradeList: [],//产品等级
      jobList: [],//工种
      dictionaryDataList:[],//数据字典
      shopList:[],//车间
      kilnList:[],//窑炉
      whList:[],//仓库
      leftMouseContent:'点击切换左键移动画布',
      leftMouseIcon:'md-crop',
    }
  },
  created() {
    this.setCurrentNodeId(undefined)
    this.setCurrentEdgeId(undefined)
    this.setProcessNodeModalDisplay(null)
    this.setProcessEdgeModalDisplay(null)
  },
  mounted() {

  },
  activated(){

  },
  computed: {
    ...mapState(['process']),
  },

  methods: {
    ...mapMutations(['setProcessNodeModalDisplay', 'setProcessEdgeModalDisplay', 'setCurrentNodeId', 'setCurrentEdgeId']),

    changeLeftMouse(){
      console.log(this.graph)
      if(this.leftMouseIcon=='ios-hand'){
        this.leftMouseIcon='md-crop'
        this.leftMouseContent='点击切换左键移动画布'
        this.graph.panning.options.panning.eventTypes=['rightMouseDown']
        this.graph.toggleRubberband(true)
      }else{
        this.leftMouseIcon='ios-hand'
        this.leftMouseContent='点击切换左键框选主题'
        this.graph.panning.options.panning.eventTypes=['leftMouseDown','rightMouseDown']
        this.graph.toggleRubberband(false)
      }
    },
    /**
     * @desc   : 导出json方法
     * @author : 张潇木
     * @date   : 2023/5/10 9:52
     */
    exportJson(){
      // JSON.stringify(data, null, 2): 格式化json数据 方便阅读
      FileSaver.saveAs(new Blob([JSON.stringify(this.graph.toJSON(),null,2)], {type: 'application/json'}), 'flow.json')
    },

    /**
     * @desc   : 导入json
     * @author : 张潇木
     * @date   : 2023/5/10 10:17
     */
    uploadJson(file){
      //检验文件类型
      if(file.type!='application/json'){
        console.log('file.type',file.type)
        this.$Message.error('导入失败，请上传JSON类型的文件')
        return false
      }

      //读取json
      let reader = new FileReader()
      reader.readAsText(file)
      reader.onload = ((e) => {
        console.log('e',e)
        let uploadData = JSON.parse(e.target.result)
        console.log('uploadData',uploadData)
        if(!uploadData.cells){
          //校验数据结构
          this.$Message.error('导入失败，请检查JSON文件数据结构')
        }else{
          //根据数据绘制图形
          this.graph.fromJSON(uploadData)
          // region 暂时不考虑复杂场景，导入数据不需处理
          // let allCells=this.graph.getCells()
          // this.graph.cut(allCells)
          // this.graph.paste({ offset: 0 })
          // this.graph.cleanSelection()
          // endregion
          this.$Message.success('导入成功')
        }
      })


      return false
    },

    /**
     * @desc   : 获取基础数据
     * @author : 张潇木
     * @date   : 2023/1/31 13:42
     */
    initData() {

      // 获取产品等级
      this.excute(this.$service.productGradeService, this.$service.productGradeService.selectByCond, {
        flgValid: true,
        ftyId: this.$store.state.user.ftyId
      }).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.productGradeList = res.data.list
        }
      })
      // 获取工种信息
      this.excute(this.$service.jobService, this.$service.jobService.selectByCond, {
        flgValid: true,
        ftyId: this.$store.state.user.ftyId
      }).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.jobList = res.data.list
        }
      })
      //数据字典
      this.excute(this.$service.commonService, this.$service.commonService.getDictionaryData, {
        ftyId: this.$store.state.user.ftyId,
      }).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.dictionaryDataList = res.data
        }
      })
      //车间
      this.excute(this.$service.commonService, this.$service.commonService.getFactorySpace, {
        ftyId: this.$store.state.user.ftyId,
        spaceKind: this.$config.factorySpace.shop
      }).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.shopList = res.data
        }
      })
      //窑炉
      this.excute(this.$service.equipKilnService, this.$service.equipKilnService.selectByCond, {
        ftyId: this.$store.state.user.ftyId,
        flgValid: true,
      }).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.kilnList = res.data.list
        }
      })
      //仓库
      this.excute(this.$service.warehouseService, this.$service.warehouseService.selectByCond, {
        ftyId: this.$store.state.user.ftyId,
        flgValid: true,
      }).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.whList = res.data.list
        }
      })
    },
    clearMiniMap(){
      document.getElementsByClassName('x6-widget-minimap')?.[0]?.remove()
    },
    /**
     * @desc   : 初始化流程设计器
     * @author : 张潇木
     * @date   : 2023/7/14 16:22
     */
    initGraph(){
      this.clearMiniMap()
      //创建流程图对象
      this.graph = Process.init(this.$refs.container,this.$refs.miniMap,this.dataKindList.filter(it=>it.kindType===this.$config.dataKind.nodeKind))
      //监听删除节点
      this.bindDeleteNodes()
      //监听画布缩放
      this.bindGraphScale()
      //初始化数据
      this.graph.fromJSON(this.formData.flowLayout || { cells: [] })
      //再重新渲染群组大小
      this.graph.getNodes().filter(it => it.shape == 'groupNode').forEach((it) => {
        // console.log('group-data',it.getData())
        //解构
        let { isCollapsed, expandSize } = it.getData()
        //设置展开大小
        it.setExpandSize(expandSize)
        //如果不是收起的，展开并还原大小
        if (!isCollapsed) {
          it.toggleCollapse(isCollapsed)
        }
      })
    },

    /**
     * @desc   : 提交保存
     * @author : 张潇木
     * @date   : 2023/2/3 9:30
     */
    save() {
      //取消动画
      let allEdges=this.graph.getEdges()
      allEdges?.forEach((edge) => {
        edge.attr('line/style/animation', '')
      })
      //节点组大小和是否展开存在data中
      this.graph.getNodes().filter(it => it.shape == 'groupNode').forEach((it) => {
        //如果是收起状态，存展开大小，如果展开，存当时的实际大小
        it.setData({
          'expandSize': it.isCollapsed() ? it.getExpandSize() : it.getSize(),
          'isCollapsed': it.isCollapsed()
        })
      })
      //转json
      this.formData.flowLayout = this.graph.toJSON()
      //流程整体校验
      if (!this.validData()) return false
      //发送保存网络请求
      this.excute(this.$service.processService, this.$service.processService.processSetting, this.formData).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          // 提示信息
          this.$Message.success(this.$t('I_001', { 'param': this.$v(this.type) }))
          //触发首页查询
          queryUtil.$emit('process-setting-ok', { row: this.formData })
          // 编辑关闭窗体
          this.close(false);
        } else {
          // 如果不成功就提示错误信息
          this.$Message.warning(res.message)
        }
      })
    },

    /**
     * @desc   : 校验数据
     * @author : 张潇木
     * @date   : 2023/2/27 11:12
     */
    validData() {
      let allNodes = this.graph.getNodes().filter(it => it.shape == 'custom-image')
      let allEdges = this.graph.getEdges()
      let startNodes = allNodes.filter(it=>it.getData()?.flowKind===this.$config.flowKind.start)
      let endNodes = allNodes.filter(it=>it.getData()?.flowKind===this.$config.flowKind.end)
      //成检交接节点
      let nodeSysTagsCheck =allNodes.filter(it=>it.getData()?.nodeSysTags?.includes(this.$config.nodeSysTags.check))
      if(allNodes.length<2){
        this.$Message.warning('流程中应至少包含2个节点')
        return false
      }
      if(allEdges.length<1){
        this.$Message.warning('流程中应至少包含1条线')
        return false
      }
      if(startNodes.length<1){
        this.$Message.warning('流程中应至少包含1个开始节点')
        return false
      }
      if(endNodes.length<1){
        this.$Message.warning('流程中应至少包含1个结束节点')
        return false
      }
      if(nodeSysTagsCheck.length<1){
        this.$Message.warning('流程中应至少包含1个 [工序标签] 为 [成检交接] 的节点')
        return false
      }
      console.log('allNodes',allNodes)
      //检查所有开始节点是否能够连接到结束节点
      let startNodesNoCloseLoop=startNodes.filter(it=>{
        let endCount = this.graph.getSuccessors(it)?.filter(it=>it.getData()?.flowKind===this.$config.flowKind.end)
        if (endCount<1) {
          this.$Message.warning('开始节点为 [' + it.getData()?.nodeName + '] 的流程未闭环，请检查')
          return true
        }
      })
      if (startNodesNoCloseLoop.length > 0) return false

      //检查所有结束节点是否都有开始节点(回收不校验)
      let endNodesNoCloseLoop=endNodes.filter(it=>it.getData()?.nodeKind!==this.$config.nodeKind.recover).filter(it=>{
        let startCount = this.graph.getPredecessors(it)?.filter(it=>it.getData()?.flowKind===this.$config.flowKind.start)
        if (startCount<1) {
          this.$Message.warning('结束节点为 [' + it.getData()?.nodeName + '] 的流程未闭环，请检查')
          return true
        }
      })
      if (endNodesNoCloseLoop.length > 0) return false

      //节点的单个校验未通过
      let invalidNodes =allNodes.filter(it => {
        if (!it.getData().isValid) {
          this.$Message.warning('[' + it.getData()?.nodeName + '] 节点设置有误，请检查')
          return true
        }
      })
      if (invalidNodes.length > 0) return false
      return true
    },


    /**
     * @desc   : 删除节点特殊控制，如果是成型模型，且被成型线绑定了，则不能删除
     * @author : 张潇木
     * @date   : 2023/3/29 13:26
     */
    bindDeleteNodes(){
      this.graph.bindKey(['backspace','del'], () => {
        const cells = this.graph.getSelectedCells()
        if (cells.length) {
          //取成型节点id
          let shapingNodes=cells.filter(it=>it.getData()?.nodeKind === this.$config.nodeKind.shaping).map(it=> {return it.getData()?.nodeId})
          if(shapingNodes.length){
            //查询是否存在绑定的成型线
            this.excute(this.$service.processService, this.$service.processService.getBindMolding, shapingNodes).then(res => {
              if (res.code === this.$config.SUCCESS_CODE&&res.data.length) {
                this.$Message.warning('无法删除已被成型线绑定的节点')
              }
              else{
                this.graph.removeCells(cells)
              }
            })
          }else{
            this.graph.removeCells(cells)
          }
        }
      })
    },


    /**
     * @desc   : 监听画布缩放
     * @author : 张潇木
     * @date   : 2023/7/14 10:42
     */
    bindGraphScale() {
      this.graph.on('scale', ({ sx, sy, ox, oy }) => {
        this.scaleValue=sx
      })
    },

    /**
     * @desc   : 查询明细
     * @author : 张潇木
     * @date   : 2023/2/3 16:47
     */
    detail(id) {
      return this.excuteNoParam(this.$service.processService, this.$service.processService.selectById, [id], false)
    },

    /**
     * @desc   : formData赋值
     * @author : 张潇木
     * @date   : 2023/2/7 8:50
     */
    setValuesByEdit(data) {
      this.formData = data
      // 获取数据类别
      this.excute(this.$service.commonService, this.$service.commonService.getDataKind, {}).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.dataKindList = res.data
          //图形的初始化依赖于数据种类，需要根据DB变化名称等信息
          this.initGraph();
        }
      })
    },

  },

}
</script>
<style scoped>
#container {
  display: flex;
  border: 1px solid #dfe3e8;
}
#stencil {
  width: 180px;
  height: 100%;
  position: relative;
  border-right: 1px solid #dfe3e8;
  background-color: #f5f5f5;
}

#graph-container {
  width: calc(100% - 180px);
  height: 100%;
}

.x6-widget-stencil {
  background-color: #fff;
}

.x6-widget-stencil-title {
  background-color: #fff;
}

.x6-widget-stencil-group-title {
  background-color: #fff !important;
}

/deep/ .x6-widget-transform {
  margin: -1px 0 0 -1px;
  padding: 0px;
  border: 1px solid #239edd;
}

/deep/ .x6-widget-transform > div {
  border: 1px solid #239edd;
}

/deep/ .x6-widget-transform > div:hover {
  background-color: #3dafe4;
}

/deep/ .x6-widget-transform-active-handle {
  background-color: #3dafe4;
}

/deep/ .x6-widget-transform-resize {
  border-radius: 0;
}

/deep/ .x6-widget-selection-inner {
  border: 1px solid #239edd;
}

/deep/ .x6-widget-selection-box {
  border: 0 !important;
}

/*@keyframes ant-line {*/
/*  to {*/
/*    stroke-dashoffset: -1000*/
/*  }*/
/*}*/
.snap-line-color {
  color: black !important;
  background: black !important;
}

.ivu-layout-has-sider {
  height: 100%;
}

.header {
  height: 30px;
  background: #ededed;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/deep/ .ivu-layout-header {
  height: 52px !important;
  line-height: 52px !important;
}

.footer {
  /*background: #fff;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px 10px 180px;
  position: fixed;
  bottom: 0;
  width: calc(100% - 200px);
}
.key{
  align-items: center;
  background-image: linear-gradient(180deg,#f2f4f5,#fff);
  border: 1px solid #d1d5d9;
  border-radius: 4px;
  box-shadow: 0 1px 0 0 #b8bfc4, inset 0 2px 0 0 #fff;
  color: #666;
  display: flex;
  font-size: 12px;
  font-weight: 500;
  height: 20px;
  justify-content: center;
  margin-left: 5px;
  min-width: 20px;
  padding: 0 5px;
}
/deep/ .ivu-card-head{
  padding: 7px 8px!important;
}
/deep/ .ivu-cell{
  padding: 3px 8px!important;
}
/deep/ .ivu-cell-group{
  padding: 2px 0 !important;
}
/deep/ .ivu-btn-icon-only{
  padding: 0 !important;
  font-size: 28px!important;
  width: 48px!important;
  height: 48px!important;
  border: none!important;
  outline:none!important;  /*去除点击时的蓝色边框*/
  box-shadow:none!important; /*同时去除阴影的蓝色边框*/
  background: #F5F5F5;
  /*border-radius:0px!important;*/
}

/deep/ .iconfont{
  font-size: 28px!important;
  /*font-weight: bold;*/
}

/deep/ .ivu-tooltip{
  height: 48px!important;
}
/deep/ .custom-html{
  height: 100%;
  width: 100%;
  display: flex;
  border:solid 1px #E9F1FF;
}
/deep/ .custom-html-left{
  background: #E9F1FF;
  height: 100%;
  width: 52px;
  border: solid 2px #E9F1FF;
  border-right: none;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);

}
/deep/ .custom-html-right{
  background: #fff;
  height: 100%;
  /*width: 60%;*/
  border: solid 2px #fff;
  border-left: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  flex: 1;
}
/deep/ .custom-html-right-title{
  font-size: 14px;
  font-weight: bold;
  padding-left: 10px;
  width:  100%;
  height: 50%;
  padding-top: 6px;
  align-items: center;
  color: #4C4C4C;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
/deep/ .custom-html-right-text{
  padding: 3px 0 0 10px ;
  width:  100%;
  height: 50%;
  font-size: 10px;
  display: flex;
  align-items: self-start;
  color: #B6B6B6;
}
.tools{
  background: #F2F7FA;
}
.scale{
  position: absolute;
  right: 30px;
  top: 30px
}
/deep/ .scale .ivu-input-number-controls-outside-btn i {
  font-size: 18px;
  font-weight: bold;
}
/deep/ .scale .ivu-input-number-input{
  text-align: center!important;
}
.miniMap{
  position: absolute;
  bottom: 100px;
  right: 30px
}
.fade-enter,.fade-leave-to {
  opacity: 0;
}
.fade-enter-to,.fade-leave {
  opacity: 1;
}

.fade-enter-active,.fade-leave-active {
  transition: all .2s;
}

</style>