postdischarge-ui/src/views/system/components/Scriptpreviewopen.vue

<template>
  <div id="vue-g6-editor">
    <el-row>
      <el-col :span="24">
        <!-- <header>
          <el-button type="primary" plain @click="handledel">返回</el-button>
        </header> -->
      </el-col>
    </el-row>
    <!-- 工具栏 -->
    <el-row>
      <el-col :span="24">
        <div id="toolbar">
          <font-awesome-icon
            data-command="save"
            class="command fa fa-floppy-o"
            icon="command far far fa-copy"
            title="保存"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-reply-all"
            title="历史数据"
            @click="readHistoryData"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            class="fa fa-hdd-o"
            icon="fas fa-file"
            title="上传数据"
            @click="readUploadData"
          ></font-awesome-icon>
          <font-awesome-icon
            icon="fas fa-download"
            style="margin-left: 10px"
            title="另存为文件"
            @click="saveAsFile"
            >文件</font-awesome-icon
          >
          <!-- <FontAwesomeIcon icon="fas fa-image" /> -->

          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-image"
            title="另存为图片"
            @click="openSaveAsImageDialog"
          ></font-awesome-icon>

          <font-awesome-icon
            style="margin-left: 10px"
            data-command="undo"
            icon="fas fa-undo"
            class="command fa fa-undo"
            title="撤销"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            data-command="redo"
            class="command fa fa-repeat"
            icon="fas fa-repeat"
            title="重做"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            data-command="delete"
            class="command fa fa-trash-o"
            icon="fas fa-trash-alt"
            title="删除"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            data-command="zoomOut"
            class="command fa fa-search-minus"
            icon="fas fa-search-minus"
            title="缩小"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            data-command="zoomIn"
            icon="fas fa-search-plus"
            class="command fa fa-search-plus"
            title="放大"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-eraser"
            data-command="clear"
            class="command fa fa-eraser"
            title="清除画布"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-arrow-up"
            data-command="toFront"
            class="command fa fa-arrow-up"
            title="提升层级"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-arrow-down"
            data-command="toBack"
            class="command fa fa-arrow-down"
            title="下降层级"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-check-square"
            data-command="selectAll"
            class="command fa fa-check-square-o"
            title="全选"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="far fa-copy"
            data-command="copy"
            class="command fa fa-files-o"
            title="复制"
          ></font-awesome-icon>

          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-clone"
            data-command="paste"
            class="command fa fa-clipboard"
            title="粘贴"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-expand"
            data-command="autoZoom"
            class="command fa fa-expand"
            title="实际大小"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-compress"
            data-command="resetZoom"
            class="command fa fa-compress"
            title="适应页面"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-object-group"
            data-command="addGroup"
            class="command fa fa-object-group"
            title="组合"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-object-ungroup"
            data-command="unGroup"
            class="command fa fa-object-ungroup"
            title="取消组合"
          ></font-awesome-icon>
          <font-awesome-icon
            style="margin-left: 10px"
            icon="fas fa-crop"
            data-command="multiSelect"
            class="command fa fa fa-crop"
            title="多选"
          ></font-awesome-icon>
        </div>
      </el-col>
    </el-row>
    <!-- 元素面板 + 画布 + 属性栏 -->
    <el-row>
      <!-- 元素面板 -->
      <el-col :span="2">
        <!-- <div id="itempannel">

        </div> -->
      </el-col>
      <!-- 画布 -->
      <el-col :span="24">
        <el-col :span="24">
          <div id="page" class="zoomable-div"></div>
        </el-col>
      </el-col>
      <!-- 属性栏 -->
      <!-- <el-col :span="4"> -->
      <!-- <section class="right-part">
          <div id="minimap">
            <div class="title">缩略图</div>
          </div>
        </section> -->
      <!-- </el-col> -->
    </el-row>
    <!-- 弹窗 -->
    <article>
      <!-- 下载图片 -->
      <section class="save-as-image-dialog">
        <el-dialog
          title="下载图片"
          :visible.sync="saveAsImageDialogVisible"
          width="360px"
        >
          <el-form label-width="100px" label-position="top">
            <el-form-item label="选择图片格式">
              <el-select v-model="saveAsImageFormat">
                <el-option label="jpg" value="jpg">
                  <span style="float: left">jpg</span>
                  <span style="float: right; color: #8492a6; font-size: 13px"
                    >白色背景</span
                  >
                </el-option>
                <el-option label="png" value="png">
                  <span style="float: left">png</span>
                  <span style="float: right; color: #8492a6; font-size: 13px"
                    >透明背景</span
                  >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer">
            <el-button @click="saveAsImageDialogVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="saveAsImage">确 定</el-button>
          </span>
        </el-dialog>
      </section>
    </article>
    <!-- 右键菜单 -->
    <section>
      <div id="contextmenu">
        <div data-status="node-selected" class="menu">
          <el-button data-command="copy" class="command">复制</el-button>
          <el-button data-command="paste" class="command">粘贴</el-button>
          <el-button data-command="delete" class="command">删除</el-button>
        </div>
        <div data-status="edge-selected" class="menu">
          <el-button data-command="delete" class="command">删除</el-button>
        </div>
        <div data-status="group-selected" class="menu">
          <el-button data-command="copy" class="command">复制</el-button>
          <el-button data-command="paste" class="command">粘贴</el-button>
          <el-button data-command="unGroup" class="command">取消组合</el-button>
          <el-button data-command="delete" class="command">删除</el-button>
        </div>
        <div data-status="canvas-selected" class="menu">
          <el-button data-command="undo" class="command">撤销</el-button>
          <el-button data-command="redo" class="command disable"
            >重做</el-button
          >
        </div>
        <div data-status="multi-selected" class="menu">
          <el-button data-command="copy" class="command">复制</el-button>
          <el-button data-command="paste" class="command">粘贴</el-button>
          <el-button data-command="addGroup" class="command">组合</el-button>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import G6Editor from "@antv/g6-editor";
import mixin from "@/views/system/mianview/mixin";
import { getFlowScheme } from "@/api/system/preview";
import { construct } from "netflix-conductor-json-tree/dist/index";
export default {
  name: "VueG6Editor",
  props: ["phoneNodeContent"],
  mixins: [mixin],
  data() {
    return {
      scale: 1, // 初始缩放比例为1
      zoomFactor: 0.1, // 设置每次鼠标滚轮滚动时的缩放因子
      form: {
        scriptInfoId: null,
        flowScheme: null,
        nodes: [],
        edges: [],
      },
      // 节点属性表单
      nodeAttributeForm: {
        label: "",
        width: "",
        height: "",
      },
      // 节点属性表单
      edgeAttributeForm: {
        label: "",
      },
      // 画布属性栏表单
      canvasAttributeForm: {
        grid: true,
        cell: 20,
      },
      // SVG节点图片URL地址
      startNodeSVGUrl: require("@/views/system/mianview/start-node.svg"),
      endNodeSVGUrl: require("@/views/system/mianview/end-node.svg"),
      regularNodeSVGUrl: require("@/views/system/mianview/regular-node.svg"),
      conditionNodeSVGUrl: require("@/views/system/mianview/condition-node.svg"),
      nNodeSVGUrl:
        "https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg",
      modelNodeSVGUrl:
        "https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg",
      // 编辑器
      editor: null,
      saveAsImageDialogVisible: false,
      saveAsImageFormat: "jpg",
    };
  },
  mounted() {
    this.initG6Editor();
    this.getlist();
    // this.editor.getCurrentPage().save()
    this.editor.getCurrentPage().hideGrid();
    this.editor.getCurrentPage().read(this.form);
  },
  watch: {
    phoneNodeContent(newValue, oldValue) {
      this.phoneNodeContent = newValue;
      this.getlist();
    },
  },
  methods: {
    getlist() {
      // console.log(this.$route.query)
      // console.log(this.phoneNodeContent)
      // getFlowScheme(this.$route.query.id).then(res => {
      // this.form = JSON.parse(this.$route.query.id)
      this.form = JSON.parse(this.phoneNodeContent);
      this.editor.getCurrentPage().read(this.form);
      // })
    },
    // 初始化
    initG6Editor() {
      const _this = this;
      const editor = new G6Editor();
      this.editor = editor;
      G6Editor.track(false);
      const Command = G6Editor.Command;
      // 注册新命令save
      Command.registerCommand("save", {
        // 禁止保存命令进入队列
        queue: false,
        // 命令是否可用
        enable: (editor) => {
          return true;
        },
        // 正向命令
        execute(editor) {
          let needSaveData = editor.getCurrentPage().save();
          console.log(needSaveData, "needSaveData");
          // JSON.parse(JSON.stringify(needSaveData))
          const text = JSON.stringify(needSaveData);
          console.log(JSON.parse(JSON.stringify(text)), "text");
          localStorage.setItem("flowData", JSON.stringify(needSaveData));
          _this.save(needSaveData);
        },
        // 反向命令
        back(editor) {
          console.log("反向命令");
          console.log(editor);
        },
        // 快捷键：Ctrl + S
        shortcutCodes: [
          ["metaKey", "s"],
          ["ctrlKey", "s"],
        ],
      });
      // 画布
      const flow = new G6Editor.Flow({
        graph: {
          container: "page",
        },
        align: {
          line: {
            // 对齐线颜色
            stroke: "#FA8C16",
            // 对齐线粗细
            lineWidth: 1,
          },
          // 开启全方位对齐
          item: true,
          // 网格对齐
          grid: true,
        },
        grid: {
          // 网孔尺寸
          cell: 18,
        },
        shortcut: {
          // 开启自定义命令保存的快捷键
          save: true,
        },
      });
      window.flow = flow;
      // 设置边
      flow.getGraph().edge({
        shape: "flow-polyline",
      });

      // 元素面板栏
      const itempannel = new G6Editor.Itempannel({
        container: "itempannel",
      });
      // 工具栏
      const toolbar = new G6Editor.Toolbar({
        container: "toolbar",
      });
      const container = document.getElementById('page');
      // 为 graph 容器添加鼠标滚轮事件监听
      container.addEventListener('mousewheel', (e) => {
        e.preventDefault();
        const ratio = 1.1; // 设置放大缩小的比例
        const oldScale = this.editor.getCurrentPage().getZoom(); // 获取当前的缩放比例
        // console.log(oldScale, 'oldScale')
        const newScale = e.wheelDelta > 0 ? oldScale * ratio : oldScale / ratio; // 根据滚轮方向计算新的缩放比例
        // console.log(newScale, 'oldScale')
        this.editor.getCurrentPage().zoom(newScale); // 执行缩放操作
      })



      // console.log(toolbar, 'toolbar')
      // 属性栏
      // const detailpannel = new G6Editor.Detailpannel({
      //   container: "detailpannel"
      // });
      // 缩略图
      // let minimapWidth = getComputedStyle(
      //   document.querySelector(".right-part")
      // ).width;
      // minimapWidth = Number(minimapWidth.replace(/px$/, ""));
      // const minimap = new G6Editor.Minimap({
      //   container: "minimap",
      //   width: minimapWidth,
      //   height: 200,
      // });
      // 右键菜单
      const contextmenu = new G6Editor.Contextmenu({
        container: "contextmenu",
      });
      // 挂载以上组件到Editor
      editor.add(flow);
      editor.add(itempannel);
      editor.add(toolbar);
      // editor.add(detailpannel);
      // editor.add(minimap);
      editor.add(contextmenu);
      // 挂载到window，方便调试
      window.editor = editor;
      // 获取当前画布
      const currentPage = editor.getCurrentPage();
      currentPage.on("afterchange", (e) => {
        console.log(currentPage, 'currentPage')

        if (e.action === "add") {
          if (
            e.model.nodetype === "startNode" ||
            e.model.nodetype === "endNode"
          ) {
            let nodes = this.editor.getCurrentPage().getNodes();
            for (const item of nodes) {
              if (
                item.model.nodetype === e.model.nodetype &&
                item.model.id !== e.model.id
              ) {
                this.editor.getCurrentPage().remove(e.item);
                this.$message.warning("只能有一个开始节点或结束节点");
              }
            }
          }
        }
      });
      // // 监听（选择对象后）事件
      // currentPage.on("afteritemselected", (ev) => {
      //   console.log("打印所选对象属性", ev.item);
      //   console.log("打印所选对象数据模型", ev.item.model);
      //   const selectedItemDataModel = ev.item.model;
      //   // 如果选择的对象是节点
      //   if (ev.item.isNode) {
      //     this.nodeAttributeForm.label = selectedItemDataModel.label;
      //     this.nodeAttributeForm.width =
      //       selectedItemDataModel.size.split("*")[0];
      //     this.nodeAttributeForm.height =
      //       selectedItemDataModel.size.split("*")[1];
      //     this.nodeAttributeForm.color = selectedItemDataModel.color;
      //   }
      //   // 如果选择的对象是边
      //   if (ev.item.isEdge) {
      //     ev.item.graph.edge({
      //       shape: "flow-polyline-round",
      //     });
      //     this.edgeAttributeForm.label = selectedItemDataModel.label;
      //     this.edgeAttributeForm.shape = selectedItemDataModel.shape;
      //   }
      // });
      // 监听（删除后）事件
      currentPage.on("afterdelete", (ev) => { });
    },
    // 打开保存为图片弹窗
    openSaveAsImageDialog() {
      this.saveAsImageDialogVisible = true;
    },
    // 开启/关闭网格对齐
    toggleGridShowStatus(value) {
      if (value) {
        this.editor.getCurrentPage().showGrid();
      } else {
        this.editor.getCurrentPage().hideGrid();
      }
    },
    // 保存为图片
    saveAsImage() {
      let newCanvas;
      if (this.saveAsImageFormat === "jpg") {
        let canvas = this.editor.getCurrentPage().saveImage();
        newCanvas = document.createElement("canvas");
        newCanvas.width = canvas.width;
        newCanvas.height = canvas.height;
        let newContext = newCanvas.getContext("2d");
        newContext.fillStyle = "#fff";
        newContext.fillRect(0, 0, newCanvas.width, newCanvas.height);
        newContext.drawImage(canvas, 0, 0);
      }
      if (this.saveAsImageFormat === "png") {
        newCanvas = this.editor.getCurrentPage().saveImage();
      }
      let imageDataURL = newCanvas.toDataURL();
      let downloadLink = document.createElement("a");
      downloadLink.download = "图片.jpg";
      downloadLink.href = imageDataURL;
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
      this.saveAsImageDialogVisible = false;
    },
    // 保存
    submitForm() {
      const _this = this;
      let needSaveData = editor.getCurrentPage().save();
      console.log(needSaveData, "needSaveData");
      localStorage.setItem("flowData", JSON.stringify(needSaveData));
      _this.save(needSaveData);
      _this.$message.success("数据已保存");
    },
    // 保存为文件
    saveAsFile() {
      let sub = this.editor.getCurrentPage().save();
      console.log(sub, "sub");
      let jsonString = JSON.stringify(this.editor.getCurrentPage().save());
      let blob = new Blob([jsonString]);
      let blobURL = URL.createObjectURL(blob);
      let downloadLink = document.createElement("a");
      downloadLink.download = "数据.json";
      downloadLink.href = blobURL;
      document.body.appendChild(downloadLink);
      downloadLink.click();
      URL.revokeObjectURL(blobURL);
      document.body.removeChild(downloadLink);
    },
    // 读取历史数据
    readHistoryData() {
      let stringData = localStorage.getItem("flowData");
      if (stringData === "" || stringData === "{}" || stringData === null) {
        this.$message.warning("无历史数据");
        return;
      }
      let jsonData = JSON.parse(stringData);
      this.editor.getCurrentPage().read(jsonData);
    },
    // 读取上传数据
    readUploadData() {
      let uploadButton = document.createElement("input");
      uploadButton.setAttribute("type", "file");
      uploadButton.setAttribute("accept", ".json");
      uploadButton.addEventListener("change", (e) => {
        console.dir(uploadButton);
        let file = uploadButton.files[0];
        let fileReader = new FileReader();
        fileReader.onload = (event) => {
          console.log(event);
          let text = JSON.parse(event.target.result);
          console.log(text);
          this.editor.getCurrentPage().read(text);
        };
        fileReader.readAsText(file);
      });
      uploadButton.click();
    },
    //
    save(source) {
      let edges = source.edges;
      let nodes = source.nodes;
      console.log(construct);
      let res = construct(source);
      console.log(JSON.stringify(res, null, 2));
    },
    handledel() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less">
// .display {
//   width: 100%;
//   pointer-events: auto !important;
//   z-index: 999999;
// .zoomable-div {
//   pointer-events: none !important;
// }
// }

@import url("@/views/system/mianview/index.less");
</style>