zbcx_ckyc 1.0.0

package/src/plugins/bf/BiFlow.vue

@@ -0,0 +1,1177 @@
+<style lang="scss" scoped>
+  .plug-biflow{user-select: none;width: 100%; height: 100%; }
+  .node-tree{height: 96%;margin-top: 4%;margin-left: 4.5%;}
+  .flow-graph{position: relative; width: 100%; height: 100%; background: var(--cx-colorBg2);
+    .mini-map{position: absolute; right: .1rem; bottom: .1rem;}
+    .tool-bar{position: absolute; right: .1rem; top: .1rem; z-index: 10;}
+  }
+  :deep .flow-graph .x6-graph-svg{background: none;width: 100%;height: 100%;}
+</style>
+
+<template>
+  <cx-layout class="plug-biflow" :size="size" padding>
+    <cx-region region="west" :width="treeWidth" style="width: 2.8rem;height: 100%;padding-right:.12rem;background-color: #fff;;" gutter splitable border>
+      <BfNodeTree  class="node-tree" ref="tree"
+        :size="size"
+      />
+    </cx-region>
+    <cx-region region="center" class="cx-of-h" style="width: 100%;height: 100%;">
+      <div class="flow-graph" ref="graph">
+        <div class="mini-map" ref="miniMap"></div>
+        <cx-tool-bar data-html2canvas-ignore class="tool-bar" v-bind="toolcfg" @tool-click="onClickTool"></cx-tool-bar>
+        <cx-r-menu ref="menuNode" style="background: var(--cx-colorBg1)"
+          :data="menus1"
+          @item-click="onRMenu"
+        />
+        <cx-r-menu ref="menuEdge" style="background: var(--cx-colorBg1)"
+          :data="menus2"
+          @item-click="onRMenu"
+        >
+      </cx-r-menu>
+      </div>
+    </cx-region>
+  </cx-layout>
+</template>
+
+<script>
+/**
+ * 修改记录:
+ * 24-07-10       张发勇          首次提交
+ */
+
+/**
+ * 插件 - BI 流程
+ *
+ * 调用说明：
+ * @param {Object}    params
+ * @param {String}    [params.mode = icon]      模式（icon - 图标模式, rect - 图框模式）
+ * @param {String}    [params.router = smooth]  路由（smooth - 弧线，manhattan - 正交连线）
+ * @param {Boolean}   [params.editable = true]  是否可编辑
+ * @param {Number}    [params.dirid]            默认导入的流程所在目录
+ * @param {Number}    [params.flowName]         默认导入的流程名字
+ * @param {Array}     [params.data]             默认设置的参数
+ */
+
+import { register } from '@antv/x6-vue-shape'
+import { Edge, Graph, Shape } from '@antv/x6'
+import { Keyboard } from '@antv/x6-plugin-keyboard'
+import { Transform } from '@antv/x6-plugin-transform'
+import { Selection } from '@antv/x6-plugin-selection'
+import { Snapline } from '@antv/x6-plugin-snapline'
+import { Clipboard } from '@antv/x6-plugin-clipboard'
+import { History } from '@antv/x6-plugin-history'
+import { Export } from '@antv/x6-plugin-export'
+import html2canvas from 'html2canvas'
+import { defineAsyncComponent } from 'vue'
+
+import BfNodeTree from './coms/NodeTree.vue'
+import CustomParts from './parts'
+import BfApi from './BfApi'
+export default
+{
+  mixins: [cx.mixin.IPlugBase],
+  components: { BfNodeTree },
+  data()
+  {
+    return {
+      treeWidth: '1.75rem',
+      menus1: [],               // 右键 - 结点
+      menus2: [],               // 右键 - 边
+      curSel: null,             // 当前选择的对象 node / edge
+      running: false,           // 当前是否正在运行
+      toolcfg:
+      {
+        mode: 'horizontal',
+        subToolMode: 'vertical',
+        subToolPlace: 'bottom',
+        showTip: false,
+        tipPlace: 'top',
+        grpGap: '0.03rem',
+        tools: BfApi.getToolbar()
+      },
+      tableList: [] // 运行结果表
+    }
+  },
+
+  watch:
+  {
+    running: function(newVal, oldVal)
+    {
+      // 运行时需要禁用编辑功能
+      this.disToolbar('disRun', !!newVal)
+    }
+  },
+
+  created()
+  {
+    const ps = this.params
+
+    // 扩展
+    this.graph = null                                       // graph 对象
+    this.editable = cx.base.defVal(ps.editable, true)
+    this.isDynaPort = true                                  // 是否动态添加连接桩
+    this.dynaPort = null                                    // 动态扩展连接桩
+    this.mode = cx.base.defVal(ps.mode, 'icon')             // 模式(icon-图标模式, 1-图框模式)
+    this.shape = null                                       // shape 信息
+    this.router = cx.base.defVal(ps.router, 'smooth')       // 路由方式（ smooth - 弧线；manhattan - 正交连线 ）
+
+    this.menus1 = BfApi.getNodeMenu()
+    this.menus2 = BfApi.getEdgeMenu()
+    this.conValues = new cx.bf.FlowValues()                 // 构造条件计算的对象
+    this.conFlds = new cx.dc.ExpFields()                    // 判断条件的字段对象
+    this.conVals = new cx.dc.ExpValues()                    // 判断条件的值对象
+
+    this.runParams = []                                     // 配置的运行参数（配置信息）,配置好的参数设置到了 graph._params_
+
+    // 禁用非编辑状态的功能
+    this.disToolbar('disEdit', !this.editable)
+  },
+
+  mounted()
+  {
+    const ps = this.params
+
+    this.initGraph()
+    this.register()
+    this.bindKey()
+    this.bindEvents()
+
+    this.setShape(this.mode)
+    this.setRouter(this.router)
+
+    // 加载默认的流程
+    if (ps.dirid && ps.flowName)
+    {
+      cx.bf.core.importFlow(this, this.params.bfData)
+        .catch(this.onError)
+    }
+    if (ps.data)
+      this.setParams(ps.data)
+
+    // 此处需求保存运行结果
+    cx.events.listen(this, 'Bf-Run', data =>
+    {
+      this.tableList.push(data)
+    })
+
+    this.$nextTick(() =>
+    {
+      this.graph.zoomTo(1)
+      this.graph.centerContent()
+    })
+  },
+
+  unmounted()
+  {
+    cx.run.closeRun('BfRunHis')
+  },
+
+  methods:
+  {
+    /**
+     * 初始化 X6-Graph对象
+     * @method
+     */
+    initGraph()
+    {
+      const self = this
+
+      self.graph = new Graph(
+        {
+          container: self.$refs.graph,        // 画布容器
+          snapline: true,                     // 对齐线
+          autoResize: true,                     // 画布自适应缩放
+          Clipboard: true,                      // 剪切板，用于复制/黏贴节点和边
+          selecting: true,                      //
+          onPortRendered: self.onPortRendered,  // 动态添加 port
+          background:
+          {
+            color: 'var(--cx-colorBg5)'
+          },                                  // 背景
+          grid:
+          {
+            visible: true,
+            type: 'dot',
+            size: 20,                         // 网点间距
+            args:
+            {
+              color: '#616161',               // 网点颜色 - 采用的是 Canvas画图，不支持cx颜色变量!!
+              thickness: 1                    // 网点大小
+            }
+          },                                  // 网格
+          mousewheel:
+          {
+            enabled: true,
+            minScale: 0.2,
+            maxScale: 4,
+            modifiers: ['ctrl', 'meta']       // 画布缩放控制按键
+          },                                  // 鼠标滚轮
+          panning:
+          {
+            enabled: true,
+            eventTypes: ['leftMouseDown', 'mouseWheel']
+          },                                  // 画布平移
+          connecting:
+          {
+            connectionPoint: 'anchor',
+            snap: true,                       // 自动吸附
+            allowBlank: false,                // 是否允许连接到画布空白位置的点
+            allowMulti: false,                // 是否允许在相同的起始节点和终止之间创建多条边
+            allowLoop: false,                 // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点
+            highlight: true,                  // 拖动边时，是否高亮显示所有可用的节点
+            highlighting:
+            {
+              magnetAdsorbed:
+              {
+                name: 'stroke',
+                args:
+                {
+                  attrs:
+                  {
+                    fill: 'purple',
+                    stroke: '#555555'
+                  }
+                }
+              }
+            },
+            /**
+            // 以下代码用于边增加线条
+            // router:
+            // {
+            //   name: 'manhattan'            // 对路径添加额外的点
+            // },
+            */
+            connector:
+            {
+              name: 'smooth'                  // 平滑连线
+              /**
+              // 以下代码用于边增加线条
+              // name: 'rounded',
+              // args:
+              // {
+              //   radius: 8
+              // }
+              */
+            },                                // 边渲染到画布后的样式
+            createEdge()
+            {
+              return new Shape.Edge(
+                {
+                  attrs: cx.bf.core.defEdgeAttr(),
+                  zIndex: 0
+                })
+            },
+            validateConnection({ targetMagnet })
+            {
+              return !!targetMagnet
+            }
+          }
+        })
+      self.graph.use(new Export())
+      // 插件 X6 注册
+      self.graph
+        .use(new Transform(
+          {
+            resizing: true,                   // 允许调整节点宽高
+            rotating: false                   // 不允许旋转节点
+          }))
+        .use(new Selection(
+          {
+            enabled: true,
+            showNodeSelectionBox: false,      // 隐藏选择节点的盒子样式
+            multiple: true,                   // 允许按住shift+左键选择多个节点
+            rubberEdge: true,
+            rubberNode: true,
+            modifiers: 'shift',
+            rubberband: true
+          }))                                 // 选择
+        .use(new Snapline())
+        .use(new Keyboard())
+        .use(new Clipboard())
+        .use(new History({ enabled: true }))
+
+      // 把图形设置给树
+      self.getTree().setBiFlow(self)
+
+      // 自定义部分
+      self.graph._params_ = {}
+      self.graph.setParams = function(params) // 设置参数
+      {
+        this._params_ = params || {}
+      }
+
+      self.graph.getParam = function(key)     // 取参数
+      {
+        return this._params_[key] || ''
+      }
+    },
+
+    /**
+     * 注册部件(如Node显示成 Rect)
+     * @method
+     */
+    register()
+    {
+      CustomParts.forEach(part =>
+        register(
+          {
+            ...{ ...part.registerOpts, ...part.data() },
+            component: part
+          })
+      )
+    },
+
+    /**
+     * 绑定快捷键
+     * @method
+     */
+    bindKey()
+    {
+      const self = this
+      const graph = self.graph
+
+      // 复制
+      graph.bindKey(['meta+c', 'ctrl+c'], () =>
+      {
+        const olds = graph.getSelectedCells()
+        if (olds.length > 0)
+        {
+          const cells = graph.copy(olds)
+
+          for (let cell of cells)
+            cx.bf.core.setNodeObj(cell)
+        }
+        return false
+      })
+
+      // 剪切
+      graph.bindKey(['meta+x', 'ctrl+x'], () =>
+      {
+        const cells = graph.getSelectedCells()
+        if (cells.length)
+          graph.cut(cells)
+        return false
+      })
+
+      // 粘贴
+      graph.bindKey(['meta+v', 'ctrl+v'], () =>
+      {
+        if (!graph.isClipboardEmpty())
+        {
+          const cells = graph.paste({ offset: 80 })
+
+          for (let cell of cells)
+            cx.bf.core.setNodeObj(cell)
+
+          graph.cleanSelection()
+          graph.select(cells)
+        }
+        return false
+      })
+
+      // undo
+      graph.bindKey(['meta+z', 'ctrl+z'], () =>
+      {
+        if (graph.canUndo())
+          graph.undo()
+        return false
+      })
+
+      // redo
+      graph.bindKey(['meta+y', 'ctrl+y'], () =>
+      {
+        if (graph.canRedo())
+          graph.redo()
+        return false
+      })
+
+      // select all
+      graph.bindKey(['meta+a', 'ctrl+a'], () =>
+      {
+        const nodes = graph.getNodes()
+        if (nodes)
+          graph.select(nodes)
+      })
+
+      // delete
+      graph.bindKey(['backspace', 'delete'], () =>
+      {
+        const cells = graph.getSelectedCells()
+        if (cells.length)
+          graph.removeCells(cells)
+      })
+
+      // zoom
+      graph.bindKey(['ctrl+1', 'meta+1'], () =>
+      {
+        self.zoomIn()
+      })
+
+      graph.bindKey(['ctrl+2', 'meta+2'], () =>
+      {
+        self.zoomOut()
+      })
+    },
+
+    /**
+     * 绑定事件
+     * @method
+     */
+    bindEvents()
+    {
+      const self = this
+      const graph = self.graph
+      const container = self.$refs.graph
+
+      const showPorts = (ports, show) =>
+      {
+        for (let i = 0, len = ports.length; i < len; i++)
+          ports[i].style.visibility = show ? 'visible' : 'hidden'
+      }
+
+      // 鼠标进入
+      graph.on('node:mouseenter', () =>
+      {
+        const ports = container.querySelectorAll('.x6-port-body')
+        showPorts(ports, true)
+      })
+
+      // 鼠标离开
+      graph.on('node:mouseleave', () =>
+      {
+        const ports = container.querySelectorAll('.x6-port-body')
+        showPorts(ports, false)
+      })
+
+      // 右键 连接线
+      graph.on('edge:contextmenu', ({ e, x, y, edge, view }) =>
+      {
+        e.stopPropagation()
+        self.curSel = edge
+
+        self.hideRMenu(e)
+        self.makeFldVal(edge)
+        cx.dc.Plug.state(self.menus2, self.conVals, self.conFlds)
+        self.$refs.menuEdge.show(e)
+      })
+
+      // 右键 节点
+      graph.on('node:contextmenu', ({ e, x, y, node, cell }) =>
+      {
+        e.stopPropagation()
+        self.curSel = node
+        self.hideRMenu(e)
+        self.makeFldVal(node)
+        cx.dc.Plug.state(self.menus1, self.conVals, self.conFlds)
+        self.$refs.menuNode.show(e)
+      })
+
+      // 监听连接线创建事件
+      graph.on('edge:connected', ({ edge, previousView, currentView }) =>
+      {
+        // 如果存在回路，则删除不要
+        if (cx.bf.core.existLoop(graph))
+        {
+          graph.removeEdge(edge.id)
+          self.$showMsgErr(cx.bf.core.locErr('existLoop'))
+          return
+        }
+
+        // 验证输入数量
+        if (!cx.bf.core.edgeExist(graph, edge))
+        {
+          graph.removeEdge(edge.id)
+          this.$showMsgErr(cx.bf.core.locErr('inOutLimt'))
+          return
+        }
+
+        if (self.isDynaPort)
+          self.dynaPort = cx.bf.core.dynaPort(graph, edge)
+
+        edge.setLabels('')                  // 设置标签
+        edge.setData(
+          {
+            exp: '',                        // 设置条件
+            status: cx.consts.ST_DEFAULT,   // 状态
+            data: []                        // 数据
+          })
+      })
+
+      // 监听连接线选中事件
+      graph.on('edge:selected', edge =>
+      {
+        self.curSel = Edge
+      })
+
+      // 监听节点选中事件
+      graph.on('node:selected', node =>
+      {
+        self.curSel = node
+      })
+    },
+
+    /**
+     * 动态添加连接桩
+     * @method
+     */
+    onPortRendered({ node, port })
+    {
+      if (!port.attrs.delEdge)
+        return
+      delete port.attrs.delEdge
+
+      const self = this
+      const dynaPort = self.dynaPort
+
+      if (dynaPort)
+      {
+        // eslint-disable-next-line
+        if (node == dynaPort.from.node && dynaPort.from.dyna)
+          dynaPort.from.dyna = 0
+        // eslint-disable-next-line
+        if (node == dynaPort.to.node && dynaPort.to.dyna)
+          dynaPort.to.dyna = 0
+
+        if (!dynaPort.from.dyna && !dynaPort.to.dyna)
+        {
+          const edge = self.graph.addEdge(
+            {
+              source: { cell: dynaPort.from.node.id, port: dynaPort.from.portId },
+              target: { cell: dynaPort.to.node.id, port: dynaPort.to.portId },
+              attrs: dynaPort.edge.store.data.attrs
+            })
+
+          edge.setLabels('')
+          edge.setData(
+            {
+              exp: '',
+              status: cx.consts.ST_DEFAULT,
+              data: []
+            })
+
+          self.graph.removeEdge(dynaPort.edge.id)
+          self.dynaPort = null
+        }
+      }
+    },
+
+    // 得到结点的组件对象
+    getNodeCom()
+    {
+      return defineAsyncComponent(_ => cx.base.loadModule(this.shape.url))
+    },
+
+    /**
+     * 设置结点画图的形状
+     * @param   {String}    mode      绘图形状( icon / rect )
+     */
+    setShape(mode)
+    {
+      this.mode = mode
+      this.shape = BfApi.getShape(mode)
+
+      switch (mode)
+      {
+      case 'icon':
+        this.setRouter('smooth')
+        this.isDynaPort = false
+        break
+      case 'rect':
+        this.setRouter('manhattan')
+        this.isDynaPort = true
+        break
+      }
+    },
+
+    /**
+     * 设置边路由
+     * @param   {String}    mode    路由方式（ smooth - 弧线；manhattan - 正交连线 ）
+     */
+    setRouter(mode)
+    {
+      switch (mode)
+      {
+      case 'smooth':
+        this.router = mode
+        this.graph.options.connecting.connector =
+        {
+          name: mode
+        }
+        delete this.graph.options.connecting.router
+        break
+      case 'manhattan':
+        this.router = mode
+        this.graph.options.connecting.connector =
+        {
+          name: 'rounded',
+          args:
+          {
+            radius: 8
+          }
+        }
+        this.graph.options.connecting.router =
+        {
+          name: mode
+        }
+        break
+      }
+    },
+
+    /**
+     *  默认设置的参数
+     * @method
+     * @param   {Array}   obj       配置数据({ key: String, value: String })
+     */
+    setParams(data)
+    {
+      for (let i in data)
+        this.graph.setParams(data[i])
+    },
+
+
+    /**
+     * 点击工具条
+     * @method
+     */
+    onClickTool({ tool, pTool, oldTool })
+    {
+      switch (tool.name)
+      {
+      case 'back':
+        cx.run.runPlug('Znckycmx')
+        break
+      case 'runAll':
+        this.tableList = []
+        cx.bf.plug.runAll({ context: this })
+        break
+      case 'zoomIn':
+        this.zoomIn()
+        break
+      case 'zoomOut':
+        this.zoomOut()
+        break
+      case 'import':
+        cx.bf.plug.importJson({ context: this })
+        break
+      case 'export':
+        cx.bf.plug.exportJson({ context: this })
+        break
+      case 'icon':
+      case 'rect':
+        this.setShape(tool.name)
+        break
+      case 'smooth':
+      case 'manhattan':
+        this.setRouter(tool.name)
+        break
+      case 'params':
+        cx.bf.plug.setRunParams({ context: this })
+        break
+      case 'newFlow':
+        this.graph.clearCells()
+        break
+      case 'save':
+        this.exportJson()
+        
+        break
+      }
+    },
+
+    /**
+     * 拖拽方式添加结点
+     * @method
+     */
+    addNodeDrop(evt, nodeData)
+    {
+      const self = this
+      const cfg = nodeData.att
+      const pos = self.graph.pageToLocal(evt.clientX, evt.clientY)
+      const obj = cx.bf.factory.getNodeObj(cfg)
+      const ports = self.getNodePort(obj)
+      const label = cx.bf.core.locAtt(cx.consts.TAB_BFNODE, cfg)
+
+      const data =
+      {
+        name: cfg.name,                   // 结点命名，用于后续多路径数据处理
+        title: label,
+        icon: cfg.icon,
+        cfgName: cfg.name,                // 结点配置名
+        obj,
+        bgColor: cx.bf.core.defBgNode()
+      }
+
+      const item =
+      {
+        shape: self.shape.shape,
+        content: self.getNodeCom()
+      }
+
+      pos.x -= self.shape.width          // 定位，目前定的宽度是300
+
+      const node = self.graph.addNode(
+        {
+          ...item,
+          ...pos,
+          ports
+        })
+
+      node.setData(data)
+    },
+
+    /**
+     * 根据结点配置，得到默认的连接桩
+     * @method
+     * @param   {IBfNodeBase}   obj       结点对象
+     * @returns {Object}                  { groups: { top: Port }, items: [ { group: 'top'} ] }
+     */
+    getNodePort(obj)
+    {
+      const positions = cx.bf.core.portPositions()
+      const groups = {}
+      const items = []
+      let pos, group
+
+      for (pos of positions)
+        groups[pos] = this.getDefPort(pos)
+
+      for (group in groups)
+        items.push({ group })
+
+      return { groups, items }
+    },
+
+    /**
+     * 导入结点时，得到全部连接桩的信息
+     * @method
+     * @param   {Array.<Items>}   ports   连接桩信息
+     * @returns {Object}                  { groups: { top: Port }, items: [ { group: 'top'} ] }
+     */
+    getNodePortImp(ports)
+    {
+      const positions = cx.bf.core.portPositions()
+      const groups = {}
+      const items = []
+      let pos, port
+
+      for (pos of positions)
+        groups[pos] = this.getDefPort(pos)
+
+      for (port of ports)
+        items.push({ group: port[1] })
+
+      return { groups, items }
+    },
+
+    // 获得默认的连接桩信息
+    getDefPort(position)
+    {
+      return {
+        position,
+        attrs: cx.bf.core.defPortAttr()
+      }
+    },
+
+    // 隐藏右边菜单
+    hideRMenu(event)
+    {
+      this.$refs.menuNode.hide(event)
+      this.$refs.menuEdge.hide(event)
+    },
+
+    // 生成条件表达式计算的字段信息、值
+    makeFldVal(cell)
+    {
+      this.conFlds.clear()
+      this.conVals.clear()
+      this.conValues.values(this.conFlds, this.conVals, cell, null, this)
+    },
+
+    // 取插件运行参数
+    plugParams(key, curNode)
+    {
+      switch (key)
+      {
+      case '{context}':
+        return this
+      case '{values}':
+        return this.conVals.values
+      case '{curNode}':
+        return curNode ? curNode : this.curSel
+      case '{selection}':
+        return this.selection
+      }
+    },
+
+    /**
+     * 点击插件
+     * @method
+     * @param   {Object}    oper        点击的操作
+     * @param   {Array}     args        参数
+     */
+    onRMenu(oper, args)
+    {
+      this.makeFldVal(this.curSel)
+      cx.dc.Plug.execute(oper, this.plugParams, this.curSel, this.selection, this)
+    },
+
+    /**
+     * 放大
+     * @method
+     */
+    zoomIn()
+    {
+      const zoom = this.graph.zoom()
+      if (zoom < 1.5)
+        this.graph.zoom(0.1)
+    },
+
+    /**
+     * 缩小
+     * @method
+     */
+    zoomOut()
+    {
+      const zoom = this.graph.zoom()
+      if (zoom > 0.5)
+        this.graph.zoom(-0.1)
+    },
+
+    /**
+     * 取树对象
+     * @method
+     */
+    getTree()
+    {
+      return this.$refs.tree
+    },
+
+    // 设置 toolbar 的状态
+    disToolbar(colname, disabled)
+    {
+      for (let grps of this.toolcfg.tools)
+        this._disToolbar(grps, colname, disabled)
+    },
+
+    // 递归设置 toolbar 的状态
+    _disToolbar(tools, colname, disabled)
+    {
+      for (let tool of tools)
+      {
+        if (tool[colname])
+          tool.disabled = disabled
+
+        if (tool.children)
+          this._disToolbar(tool.children, colname, disabled)
+      }
+    },
+
+    exportJson()
+    {
+      let self = this
+      if (this.params.bfData)
+      {
+        self.exportFlow(this, this.params.bfData).then((res) =>
+        {
+          // 当为任务数据时要更新结果
+          if (this.params.rwData && this.params.rwData.id)
+          {
+            this.uploadRw()
+            this.$showMsg('保存成功', 'success')
+          }
+          else
+            this.$showMsg('保存成功', 'success')
+        }).catch((e) =>
+        {
+          this.$showMsg('保存失败', 'error')
+        })
+      }
+      else
+      {
+        this.$prompt('请输入名称', '', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消'
+        }).then(({ value }) =>
+        {
+          self.exportFlow(this, {
+            dirid: 99,
+            filename: value
+          }).then((res) =>
+          {
+            // 当为任务数据时要更新结果
+            if (this.params.rwData)
+            {
+              this.$showMsg('保存成功', 'success')
+              this.uploadRw()
+            }
+            else
+              this.$showMsg('保存成功', 'success')
+          }).catch(() =>
+          {
+            this.$showMsg('保存失败', 'error')
+          })
+        }).catch(() =>
+        {
+        })
+      }
+    },
+
+    // 当存在任务时更新
+    uploadRw()
+    {
+      let tabList = this.tableList.map((item) =>
+      {
+        return {
+          id: item.id,
+          inNum: item.inNum,
+          outNum: item.outNum,
+          status: item.status,
+          task: item.task,
+          time: item.time,
+          _status: item._status,
+          _time: item._time,
+          cell: {
+            data: {
+              result: item?.cell?.data?.result
+            }
+          }
+        }
+      })
+      let tabdata = JSON.stringify(tabList)
+      // 修改成矿预测任务状态
+      let uptObj =
+        {
+          id: this.params.rwData.id,
+          state: 1,
+          resultdata: tabdata
+        }
+      cx.svr.data.update($app.TabConst.ckycrwglb.major, $app.TabConst.ckycrwglb.minor, uptObj).then(res =>
+      {
+        // this.$showMsg('保存成功', 'success')
+      }).catch(() =>
+      {
+        this.$showMsg('保存失败', 'error')
+      })
+    },
+
+    async exportFlow(ctx, flow, options)
+    {
+      const graph = ctx.graph
+      const runParams = ctx.runParams
+      const nodes = []
+      const edges = []
+      const ids = {}
+      const nodeAll = graph.getNodes()
+      const edgeAll = graph.getEdges()
+      let id = 0
+      let cell, cellData, data, position, size, obj, cfg, port, out, label
+
+      // 先建立 ID 索引（只需建结点，连接桩的索引）
+      for (cell of nodeAll)
+      {
+        cellData = cell.store.data
+        ids[cell.id] = id++
+        for (port of cellData.ports.items)
+          ids[port.id] = id++
+      }
+
+      for (cell of nodeAll)
+      {
+        cellData = cell.store.data              // cell.store.data
+        data = cellData.data                    // cell.store.data.data
+        position = cellData.position            // 位置
+        size = cellData.size                    // 大小
+        obj = data.obj                          // 对象
+        cfg = obj.cfg                           // 配置
+
+        out =
+      {
+        id: ids[cell.id],
+        pos: [position.x, position.y],        // position
+        size: [size.width, size.height],      // size
+        cfged: data.isConfiged ? 1 : 0,       // 是否正确配置
+        cfg: data.cfgName,                    // 配置对象名
+        title: data.title,                    // 标题
+        ports: [],                            // 连接桩
+        obj: {}                               // 配置对象
+      }
+      // eslint-disable-next-line
+      if (data.name != cfg.name)              // 名字没有修改，则不记录
+          out.name = data.name
+        // eslint-disable-next-line
+      if (data.bgColor != cx.bf.core.defBgNode()) // 没有修改默认的背景颜色，不记录
+          out.bg = data.bgColor
+        for (port of cellData.ports.items)      // 连接桩
+          out.ports.push([ids[port.id], port.group])
+        obj.toJSON(out.obj)
+        let cfgList = ['excel', 'grd', 'point', 'polyline', 'polygon', 'kd']
+        if (cfgList.includes(out.cfg))
+          delete out.obj.formData
+        
+        nodes.push(out)
+      }
+
+      for (cell of edgeAll)
+      {
+        cellData = cell.store.data              // cell.store.data.
+        data = cellData.data                    // cell.store.data.data
+        label = cx.bf.core.getEdgeLabel(cell)       // label
+        out =
+      {
+        source: [ids[cellData.source.cell], ids[cellData.source.port]],
+        target: [ids[cellData.target.cell], ids[cellData.target.port]]
+      }
+        if (label)                              // 标题没有修改，则不记录
+          out.label = label
+        if (data.exp)                           // 条件没有修改，则不记录
+          out.exp = data.exp
+        edges.push(out)
+      }
+
+      // 完整的JSON
+      obj =
+      {
+        v: '0.2',
+        mode: ctx.mode,
+        router: ctx.router,
+        nodes,
+        edges,
+        params: graph._params_
+      }
+
+      // 额外信息
+      if (options && options.beforeExport)
+        options.beforeExport(obj)
+
+      const content = JSON.stringify(obj)
+
+      // 简化版
+      delete obj.mode
+      delete obj.router
+      for (cell of nodes)
+      {
+        delete cell.pos
+        delete cell.size
+        delete cell.cfged
+        delete cell.ports
+        delete cell.bgColor
+      }
+      out = []
+      for (cell of edges)
+        out.push([cell.source[0], cell.target[0]])
+      obj.edges = out
+      const content2 = JSON.stringify(obj)
+      // 写入数据库
+      const att =
+      {
+        dirid: flow.dirid,
+        name: flow.filename,
+        content,
+        content2,
+        length: content.length,
+        params: runParams && runParams.length > 0 ? JSON.stringify(runParams) : '',
+        uperson: $g.user.name,
+        userid: $g.user.id
+      }
+
+      if (flow.id)
+      {
+        // 修改数据
+        att.id = flow.id
+        delete att.dirid
+        delete att.name
+        let img = await this.getImg()
+        let str = flow.memo ? JSON.parse(flow.memo) : null
+        let data = {
+          isFb: str ? str.isFb : '',
+          kcId: str ? str.kcId : '',
+          mxsm: str ? str.mxsm : '',
+          imgUrl: img
+        }
+        att.memo = JSON.stringify(data)
+        return cx.svr.attOper.update(cx.consts.SYSTAB, cx.consts.TAB_BFFLOW, att, att)
+      }
+      else
+      {
+        let img = await this.getImg()
+        // 修改数据
+        let data = {
+          imgUrl: img
+        }
+        att.memo = JSON.stringify(data)
+        // 增加数据
+        return cx.svr.attOper.insert(cx.consts.SYSTAB, cx.consts.TAB_BFFLOW, att, 1)
+      }
+    },
+
+    getZoomScale()
+    {
+      let scale = 1
+      if (this.graph.model.getAllCellsBBox().width / this.$refs.graph.clientWidth > 1)
+        scale = this.$refs.graph.clientWidth / this.graph.model.getAllCellsBBox().width
+      else if (this.graph.model.getAllCellsBBox().height / this.$refs.graph.clientHeight > 1)
+        scale = this.$refs.graph.clientHeight / this.graph.model.getAllCellsBBox().height
+      else scale = 1
+      return scale - 0.1
+    },
+
+    zoomToOverview()
+    {
+      let scale = this.getZoomScale()
+      this.graph.zoomTo(scale)
+      this.graph.centerContent()
+    },
+
+    // 生成截图
+    async  getImg()
+    {
+      this.zoomToOverview()
+      let that = this
+      this.$refs.graph.style.position = 'relative'
+      let canvas = await html2canvas(that.$refs.graph, {
+        useCORS: true,          // 允许跨域
+        foreignObjectRendering: true,    // 在浏览器支持的情况下使用ForeignObject模式渲染图片
+        ignoreElements: (e) =>
+        {
+          if (e.contains(that.$refs.graph) || that.$refs.graph.contains(e) || e.getAttribute('data-html2canvas') != null)
+          
+            return false
+          
+          return true
+        }
+      })
+      let imgData = canvas.toDataURL('image/webp')
+      this.$refs.graph.style.top = '0rem'
+      this.$refs.graph.style.left = '0rem'
+      return imgData
+    },
+
+    imageBase64ToBlob(urlData, type = 'image/jpeg')
+    {
+      try
+      {
+        let arr = urlData.split(',')
+        let mime = arr[0].match(/:(.*?);/)[1] || type
+        // 去掉url的头，并转化为byte
+        let bytes = window.atob(arr[1])
+        // 处理异常,将ascii码小于0的转换为大于0
+        var ab = new ArrayBuffer(bytes.length)
+        // 生成视图（直接针对内存）：8位无符号整数，长度1个字节
+        let ia = new Uint8Array(ab)
+        for (let i = 0; i < bytes.length; i++)
+          ia[i] = bytes.charCodeAt(i)
+        return new Blob([ab], {
+          type: mime
+        })
+      }
+      catch (e)
+      {
+        var ab = new ArrayBuffer(0)
+        return new Blob([ab], {
+          type: type
+        })
+      }
+    }
+  }
+}
+
+</script>