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

<template>
  <div style="width:100%;height:100%;">
    {{this.exportData}}
<!--    {{this.importValue}}-->
<!--  测试导入初始数据  -->
    <Layout>
      <!--   左侧工具栏   -->
      <Sider :width="180">
        <div id="stencil"></div>
      </Sider>
      <Layout>
        <!-- 顶部工具栏 -->
        <Header class="header">
          <Button @click="()=>{this.graph.exportPNG('',{padding:50})}">导出PNG</Button>
          <Button @click="()=>{this.exportData=this.graph.toJSON()}" style="margin-left:10px;">导出json</Button>
          <Button @click="()=>{this.graph.fromJSON(JSON.parse(this.importValue))}" style="margin-left:10px;">导入json</Button>
          <Input v-model="importValue"/>
        </Header>
        <!--   中间流程图  -->
        <Content>
          <div id="container" ref="container" style="width:100%;height:100%"/>
        </Content>
        <!--   底部按钮   -->
        <Footer class="footer">
          <Button style="margin-right: 10px;">保存</Button>
          <Button>关闭</Button>
        </Footer>
      </Layout>
    </Layout>
    <!--  节点弹窗  -->
    <NodeModal/>
    <!--  连线弹窗  -->
    <EdgeModal/>
  </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')
const zt1 = require('./data/zt1.json')
import Process from '@/view/process/process-flow/config/ProcessConfig'


export default {
  components: { NodeModal,EdgeModal },
  data() {
    return {
      graph: null,//图形对象
      exportData: undefined,
      importValue:undefined,
      currentNode:{},
    }
  },
  created() {},
  mounted() {
    //创建流程图对象
    this.graph=Process.init(this.$refs.container)
  },
  computed: {
    ...mapState(['process']),
  },
  methods: {

    init() {

    // region 初始化数据
    //   this.graph.fromJSON(zt1)
      // this.graph.zoomToFit({ maxScale: 1 });// 将画布中元素缩小或者放大一定级别，让画布正好容纳所有元素，可以通过 maxScale 配置最大缩放级别
      // this.graph.centerContent(); // 将画布中元素居中展示
    // endregion

    },


  }
}
</script>
<style scoped>
#container {
  display: flex;
  border: 1px solid #dfe3e8;
}
#stencil {
  width: 180px;
  height: 100%;
  position: relative;
  border-right: 1px solid #dfe3e8;
}
#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;
}
/deep/ .ivu-layout-header{
  height: 52px!important;
  line-height: 52px!important;
}
.footer{
  background: #ededed;
  display: flex;
  justify-content: right;
  padding:10px 50px;
}
</style>