使用G6和vue完成项目流程设定---G6实例

<template>
  <el-dialog :title="flowId?'edit flow':'add flow'" :visible="showModal" class="sourceModal" :append-to-body="true" :fullscreen="true" @close="close">
    <div id="flowBox">
      <div class="flow-box-icon">
        <ul class="line-icon">
           <li @click="delNodes">
            <i class="el-icon-delete"></i>
          </li>
          <li @click="downloadFullImage">
            <i class="el-icon-download"></i>
          </li>
        </ul>
        <ul class="line-imge">

          <li v-for="(item,index) in liImage" :key="index">
            <img :src="item.opt3?showFileUrl(item.opt3) : require('../../../public/image/flow/noPicture.png')" draggable @dragend="addNodeImage($event,item.station_Id,item.enCode,item.opt3)" />
            <span :title="item.enCode">{{item.enCode}}</span>
          </li>
        </ul>

      </div>
      <div style="width:300px;height:100%;float:right">
        <div class="flow-box-active">
          <el-form class="top-check clearFix" ref="form" label-width="80px" :rules="ruleValidate" :model="form">
            <span> 图片选择: </span>
            <el-form-item label="eqpCode" prop="enCode">
              <el-input type="text" v-model="form.enCode" clearable size="mini" @keyup.native.enter="getImageList"></el-input>
            </el-form-item>
            <el-form-item label="LineImage" prop="lineImage">
              <el-select v-model="form.lineImage" clearable size="mini" @change="getImageList">
                <el-option v-for="item in selectList.lineList" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <span> 获取设定过的线体流程:</span>
            <el-form-item label="Line From" prop="lineFrom">
              <el-select v-model="form.lineFrom" clearable size="mini" @change="getLineJson">
                <el-option v-for="item in selectList.lineList" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <span> 需要设定的线体流程:</span>
            <el-form-item label="Line To" prop="line">
              <el-select v-model="form.line" clearable size="mini">
                <el-option v-for="(item,index) in selectList.lineList" :key="index" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="Pattern" prop="model">
              <el-select id="selector" v-model="form.model" @change="changeModel" size="mini">
                <el-option value='addNode' label="添加节点"></el-option>
                <el-option value='default' label="拖拽节点"></el-option>
                <el-option value='addEdge' label="连接"></el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="Content" prop="inputText">
              <el-input v-model="form.inputText" @keyup.native="editLable" size="mini"></el-input>
            </el-form-item> -->
            <el-form-item>
              <el-button class="check" size="mini" @click="getData">Commit<span class="ripple"></span></el-button>
              <el-button class="reset" size="mini" @click="clear">Clear<span class="ripple"></span></el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="flow-box-minimap">
          <div id="mini-map-preview"></div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import G6 from '@antv/g6'
import { getAreaListReq } from "@/api/smtMonitor/smtMonitor";
import { addFlowJsonReq, getFlowJsonByLiineReq, getEqpListReq } from '@/api/flow/flow'
import { elMessage } from '@/utils/tipTools'
import { showFileUrl } from "@/utils/global";

export default {
  components: {
    G6,
  },
  props: {
    showModal: Boolean,
    flowId: [String, Number],
  },
  watch: {
    showModal () {
      if (this.showModal) {
        this.$nextTick(() => {
          // 创建画布
          this.createGraphic(this.data);
          this.getLineList();
          this.getImageList();
        })
      }
    }
  },
  data () {
    return {
      showFileUrl: showFileUrl,
      graph: '',
      form: {
        line: "",
        model: 'addNode',
        // inputText: '',
        lineFrom: "",
        lineImage: "",
        enCode: "",// 设备编码
      },
      activation: '', //当前激活的节点
      liImage: [],
      selectList: {
        lineList: [],
      },
      // Initial data
      data: {
        "nodes": [],
        "edges": [],
        "combos": []
      },
      // 验证实体
      ruleValidate: {
        line: [
          { required: true, message: 'Line is Required', trigger: 'change' }
        ],
      },
      type: ''
    }
  },
  methods: {
    // 获取线体对应图片
    getImageList () {
      const { lineImage, enCode } = this.form;
      const obj = { line: lineImage, enCode: enCode, station_Name: "", enabled: -1 }
      getEqpListReq(obj).then(res => {
        this.liImage = res.result
      }).finally(() => {
        this.loading = false;
        this.emptyText = '无数据'
      });
    },

    // 获取线体下拉框
    getLineList () {
      getAreaListReq({ enabled: 1 }).then((res) => {
        if (res.code === 200) {
          var result = res.result;
          for (var i = 0; i < result.length; i++) {
            for (var j = 0; j < result[i].line.length; j++) {
              let line = result[i].line[j];
              let isline = this.selectList.lineList.findIndex(
                (item) => item.label === line
              );
              if (isline == -1) {
                this.selectList.lineList.push({ label: line, value: line });
              }
            }
          }
        }
      });
    },

    // 获取线体对应设备流程
    getLineJson () {
      const obj = {
        line: this.form.lineFrom,
        enabled: 1
      }
      getFlowJsonByLiineReq(obj).then(res => {
        this.data = JSON.parse(res.result.json);
        this.graph.destroy();
        this.createGraphic(this.data);
      })
    },

    // 清空画布和表单数据
    clear () {
      this.graph.destroy();
      this.$refs.form.resetFields();
      this.data = {
        "nodes": [],
        "edges": [],
        "combos": []
      }
      this.createGraphic(this.data);
      this.getImageList();
    },

    // 创建画布
    createGraphic (data) {
      this.self = this
      // 边的添加删除
      //   G6.registerBehavior('click-add-edge', {
      //     getEvents () {
      //       return {
      //         'node:click': 'onClick',
      //         mousemove: 'onMousemove',
      //         'edge:click': 'onEdgeClick',
      //       }
      //     },
      //     onClick (ev) {
      //       const self = this
      //       const node = ev.item
      //       const graph = self.graph
      //       const point = { x: ev.x, y: ev.y }
      //       const model = node.getModel()
      //       if (self.addingEdge && self.edge) {
      //         graph.updateItem(self.edge, {
      //           target: model.id,
      //         })

      //         self.edge = null
      //         self.addingEdge = false
      //       } else {
      //         self.edge = graph.addItem('edge', {
      //           source: model.id,
      //           target: model.id,
      //         })
      //         self.addingEdge = true
      //       }
      //     },
      //     onMousemove (ev) {
      //       const self = this
      //       const point = { x: ev.x, y: ev.y }
      //       if (self.addingEdge && self.edge) {
      //         self.graph.updateItem(self.edge, {
      //           target: point,
      //         })
      //       }
      //     },
      //     onEdgeClick (ev) {
      //       const self = this
      //       const currentEdge = ev.item
      //       if (self.addingEdge && self.edge === currentEdge) {
      //         self.graph.removeItem(self.edge)
      //         self.edge = null
      //         self.addingEdge = false
      //       }
      //     },
      //   })


      // 提示框
      //   const tooltip = new G6.Tooltip({
      //     offsetX: 10,
      //     offsetY: 10,
      //     // 允许出现 tooltip 的 item 类型
      //     itemTypes: ['node'],
      //     // 自定义 tooltip 内容
      //     getContent: (e) => {
      //       const outDiv = document.createElement('div')
      //       outDiv.style.width = 'fit-content'
      //       var getClassName = document.getElementsByClassName(
      //         'g6-component-tooltip'
      //       )
      //       getClassName[0].style.zIndex = 2;
      //       const { label, machineType, machineStatus } = e.item.getModel();

      //       //设备类型，设备状态，设备名称
      //       outDiv.innerHTML = `<h4>设备信息</h4>
      //             <ul>
      //                 <li>设备名称: ${label}</li>
      //                 <li>设备类型: ${machineType}</li>
      //                 <li>设备状态: ${machineStatus}</li>
      //             </ul>`
      //       return outDiv
      //     },
      //   })

      // 实例化 grid 插件


      // 网格插件


      const grid = new G6.Grid();

      // 实例化 minimap 插件
      const getElemId = document.getElementById('mini-map-preview'); // 右侧缩略图
      const minimap = new G6.Minimap({
        container: 'mini-map-preview',
        size: [getElemId.offsetWidth, 200],
        className: 'minimap-viewport',
        type: 'delegate',
      })

      // 实例化画布
      const container = document.getElementById('flowBox'); // 画布
      const width = container.scrollWidth - 350
      const height = container.scrollHeight + 150
      this.graph = new G6.Graph({
        container: 'flowBox',
        width: width,
        height: height,
        plugins: [minimap, grid],
        modes: {
          default: ['drag-node', 'click-select', 'drag-canvas', 'zoom-canvas', 'brush-select'],
          addNode: ['click-add-node', 'click-select', 'drag-node', 'drag-canvas', 'zoom-canvas'],
        },
        defaultNode: {
          // 文本内容设定样式
          labelCfg: {
            position: 'bottom',
            offset: 10,
            style: {
              fill: '#3361e2',
              fontSize: 16,
              fontWeight: 600,
            },
          },
        },
        fitView: true, //自适应画布
        fitCenter: true,// 画布居中
        // minZoom: 0, //最小缩放比例
      })
      // 渲染数据
      this.graph.data(data)
      this.graph.render()
      // 设置层级
      const canvas = this.graph.get('canvas')
      canvas.get('el').style.zIndex = 2
      canvas.get('el').style.position = 'absolute'
      grid.getContainer().style.zIndex = 0

      // 点击节点
      this.graph.on('node:click', (event) => {
        const { item } = event
        this.activation = item.getModel().id // 获取当前节点
        // this.form.inputText = item.getModel().label
      })
    },
    // 添加节点
    addNodeImage (e, stationId, enCode, opt3) {
      if (this.form.model === 'addNode') {
        // this.form.inputText = null
        const { src, naturalWidth, naturalHeight } = e.target;
        let naturalWithPercent = (188 / naturalHeight) * naturalWidth;
        if (!opt3) naturalWithPercent = 120;
        const point = this.graph.getPointByClient(e.x, e.y)
        this.graph.addItem('node', {
          nodeType: 0,
          x: point.x,
          y: point.y,
          img: src,
          type: 'image',
          label: enCode,
          stationId: stationId,
          size: enCode ? [naturalWithPercent, 188] : [naturalWidth, naturalHeight],
          style: {
            radius: [15],
            cursor: 'pointer'
          },
        })
        const currentNodes = this.graph.getNodes()[this.graph.getNodes().length - 1]
        this.activation = currentNodes.getModel().id // 获取当前节点
      } else {
        this.$confirm('请先选择右侧添加节点模式', 'tips', {
          confirmButtonText: '确定',
          type: 'warning',
        })
      }
    },

    // 提交数据
    getData () {
      this.$refs.form.validate((validate) => {
        if (validate) {
          const obj = {
            sortCode: 0,
            enabled: 1,
            line: this.form.line,
            name: this.form.line,
            json: JSON.stringify(this.graph.save())
          }
          addFlowJsonReq(obj).then(res => {
            if (res.code === 200) {
              elMessage("commit success");
              return;
            }
            elMessage('commit fail:' + `${res.message}`, 'error');
          })
        }
      })

    },

    // 删除节点
    delNodes () {
      const item = this.graph.findById(this.activation)
      this.graph.removeItem(item)
    },

    // 导出图片
    downloadFullImage () {
      this.graph.downloadImage()
    },

    // 关闭窗口
    close () {
      this.graph.destroy();
      this.$emit('update:showModal', false);
      this.$refs.form.resetFields();
      this.data = {
        "nodes": [],
        "edges": [],
        "combos": []
      }
    },

    // 切换模式
    // changeModel () {
    //   this.graph.setMode(this.form.model)
    // },

    // 编辑节点label
    // editLable (e) {
    //   if (this.activation) {
    //     const item = this.graph.findById(this.activation)
    //     item.getModel().label = this.form.inputText
    //     this.graph.updateItem(item, item.getModel())
    //     item.refresh()
    //   } else {
    //     if ((this.form.inputText = null)) {
    //       this.$confirm('请先选择编辑的节点', 'tips', {
    //         confirmButtonText: '确定',
    //         type: 'warning',
    //       })
    //     }
    //   }
    // },

  },
}
</script>
<style lang="scss" scoped>
#flowBox {
  width: 100%;
  height: calc(100% - 90px);
  z-index: 1;
  .flow-box-icon {
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    .line-icon {
      width: 15% !important;
      display: inline-block;
      li {
        width: 19.33% !important;
      }
    }
    .line-imge {
      width: 85% !important;
      display: inline-block;
    }
    ul {
      width: 100%;
      height: 90%;
      overflow-x: scroll;
      white-space: nowrap;
      overflow-y: hidden;
      li {
        width: 6%;
        height: 100%;
        border: #000;
        border-right: 1px solid #f7f5f5;
        border-bottom: 1px solid #f7f5f5;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        img,
        i {
          font-size: 25px;
          text-align: center;
          width: 50%;
          height: 74%;
        }
        i {
          padding-top: 40%;
          display: inline-block;
        }
        span {
          display: block;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          font-size: 0.12rem;
        }
      }
    }
  }

  .flow-box-active {
    width: 100%;
    height: calc(50% - 90px);
    background-color: #ffffff;
    border-radius: 0 0 10px 10px;
    span {
      font-weight: bold;
      color: #2a89a9;
    }
  }

  .flow-box-minimap {
    width: 100%;
    height: calc(50% - 10px);
    background-color: #ffffff;
    margin-top: 10px;
    border-radius: 10px;
  }
}

.g6-component-tooltip {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0px 10px 24px 10px;
  box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}
</style>

showFileUrl

/**
 * 获取文件下载地址
 *@param fileId 文件id
 */
export const showFileUrl = (fileId, downLoad = false) => {
    let fileUrl =
        window.localStorage.getItem("configIp") +
        "/api/systemcenter/anonymous/v1/assets/" +
        (downLoad ? "get" : "show") +
        "?fileId=" +
        fileId;
    return fileUrl;
};