946 lines
32 KiB
Vue
946 lines
32 KiB
Vue
<template>
|
||
<div id="vue-g6-editor">
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<!-- <header>vue-g6-editor</header> -->
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 工具栏 -->
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<div id="toolbar">
|
||
<div>
|
||
<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-button
|
||
type="primary"
|
||
plain
|
||
size="small"
|
||
style="position: absolute; top: 10px; right: 41px"
|
||
@click="back"
|
||
>返回</el-button
|
||
>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- 元素面板 + 画布 + 属性栏 -->
|
||
<el-row>
|
||
<!-- 元素面板 -->
|
||
<el-col :span="2">
|
||
<div id="itempannel">
|
||
<!-- 开始节点 -->
|
||
<div
|
||
id="startNode"
|
||
class="getItem"
|
||
data-type="node"
|
||
data-shape="flow-circle"
|
||
data-size="72*72"
|
||
data-label="开始节点"
|
||
data-color="#FA8C16"
|
||
data-nodeType="startNode"
|
||
>
|
||
<img draggable="false" :src="startNodeSVGUrl" alt srcset />
|
||
</div>
|
||
<!-- 常规节点 -->
|
||
<div
|
||
id="regularNode"
|
||
class="getItem"
|
||
data-type="node"
|
||
data-size="100*50"
|
||
data-label="常规节点"
|
||
data-color="#1890ff"
|
||
>
|
||
<img draggable="false" :src="regularNodeSVGUrl" alt srcset />
|
||
</div>
|
||
|
||
<!-- 条件节点 -->
|
||
<div
|
||
id="judgeNode"
|
||
class="getItem"
|
||
data-type="node"
|
||
data-shape="flow-rhombus"
|
||
data-size="80*80"
|
||
data-label="条件节点"
|
||
data-color="#13C2C2"
|
||
>
|
||
<img draggable="false" :src="conditionNodeSVGUrl" />
|
||
</div>
|
||
<!-- 自定义节点 -->
|
||
<div
|
||
class="getItem"
|
||
data-type="node"
|
||
data-shape="customNode"
|
||
data-size="80*48"
|
||
data-labeltitle=""
|
||
data-labelconcent=""
|
||
data-color="#722ED1"
|
||
>
|
||
<img draggable="false" :src="nNodeSVGUrl" />
|
||
</div>
|
||
|
||
<!-- 结束节点 -->
|
||
<div
|
||
id="endNode"
|
||
class="getItem"
|
||
data-type="node"
|
||
data-shape="flow-circle"
|
||
data-size="80*80"
|
||
data-label="结束节点"
|
||
data-color="#FA8C16"
|
||
data-nodeType="endNode"
|
||
>
|
||
<img draggable="false" :src="endNodeSVGUrl" />
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<!-- 画布 -->
|
||
<el-col :span="18">
|
||
<el-col :span="24">
|
||
<div id="page"></div>
|
||
</el-col>
|
||
</el-col>
|
||
<!-- 属性栏 -->
|
||
<el-col :span="4">
|
||
<section class="right-part">
|
||
<div id="detailpannel">
|
||
<!-- 节点属性栏 -->
|
||
<div
|
||
id="nodeAttributeBar"
|
||
class="pannel"
|
||
data-status="node-selected"
|
||
>
|
||
<div class="title">节点属性</div>
|
||
<div class="main">
|
||
<el-form
|
||
:model="nodeAttributeForm"
|
||
label-position="top"
|
||
label-width="80px"
|
||
>
|
||
<el-form-item label="节点文本" v-if="type != 'customNode'">
|
||
<el-input
|
||
v-model="nodeAttributeForm.label"
|
||
@change="saveNodeAttribute"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="标题" v-if="type == 'customNode'">
|
||
<el-input
|
||
class="bold-input"
|
||
v-model="nodeAttributeForm.labeltitle"
|
||
@change="saveNodeAttribute"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="内容" v-if="type == 'customNode'">
|
||
<el-input
|
||
type="textarea"
|
||
v-model="nodeAttributeForm.labelconcent"
|
||
@change="saveNodeAttribute"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="宽度">
|
||
<el-input
|
||
v-model="nodeAttributeForm.width"
|
||
@change="saveNodeAttribute"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="高度">
|
||
<el-input
|
||
v-model="nodeAttributeForm.height"
|
||
@change="saveNodeAttribute"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="颜色">
|
||
<el-color-picker
|
||
v-model="nodeAttributeForm.color"
|
||
@change="saveNodeAttribute"
|
||
></el-color-picker>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<!-- 边属性栏 -->
|
||
<div
|
||
id="edgeAttributeBar"
|
||
class="pannel"
|
||
data-status="edge-selected"
|
||
>
|
||
<div class="title">边属性</div>
|
||
<div class="main">
|
||
<el-form
|
||
:model="edgeAttributeForm"
|
||
label-position="top"
|
||
label-width="80px"
|
||
@submit.native.prevent
|
||
>
|
||
<el-form-item label="边文本">
|
||
<el-input
|
||
v-model="edgeAttributeForm.label"
|
||
@change="saveEdgeAttribute"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="关键字">
|
||
<el-input
|
||
type="textarea"
|
||
v-model="edgeAttributeForm.keyword"
|
||
@change="saveEdgeAttribute"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="边文本">
|
||
<el-select
|
||
v-model="edgeAttributeForm.shape"
|
||
@change="saveEdgeAttribute"
|
||
>
|
||
<el-option
|
||
label="流程图折线"
|
||
value="flow-polyline"
|
||
></el-option>
|
||
<el-option
|
||
label="流程图圆⻆折线"
|
||
value="flow-polyline-round"
|
||
></el-option>
|
||
<el-option
|
||
label="流程图曲线"
|
||
value="flow-smooth"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item> -->
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<div
|
||
id="groupAttributeBar"
|
||
class="pannel"
|
||
data-status="group-selected"
|
||
>
|
||
<div class="title">群组属性栏</div>
|
||
</div>
|
||
<div
|
||
id="canvasAttributeBar"
|
||
class="pannel"
|
||
data-status="canvas-selected"
|
||
>
|
||
<div class="title">画布属性栏</div>
|
||
<div class="main">
|
||
<el-form label-width="80px" label-position="right">
|
||
<el-form-item label="网格对齐">
|
||
<el-checkbox
|
||
v-model="canvasAttributeForm.grid"
|
||
@change="toggleGridShowStatus"
|
||
></el-checkbox>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<div
|
||
id="multiAttributeBar"
|
||
class="pannel"
|
||
data-status="multi-selected"
|
||
>
|
||
<div class="title">多选时属性栏</div>
|
||
</div>
|
||
</div>
|
||
<!-- 缩略图 -->
|
||
<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 "../mianview/mixin";
|
||
import { insertScriptEdgeNode, selectScriptEdgeNode, uploadScriptInfo, edit } from "@/api/system/preview";
|
||
import Cookies from 'js-cookie'
|
||
import { construct } from "netflix-conductor-json-tree/dist/index";
|
||
|
||
export default {
|
||
name: "VueG6Editor",
|
||
mixins: [mixin],
|
||
data() {
|
||
return {
|
||
type: '',
|
||
state: {
|
||
edgeTextColor: '#000' // 默认为黑色
|
||
},
|
||
form: {
|
||
scriptInfoId: null,
|
||
flowScheme: null,
|
||
nodes: [],
|
||
edges: [],
|
||
},
|
||
// 节点属性表单
|
||
nodeAttributeForm: {
|
||
// title:"",
|
||
// contont:"",
|
||
labeltitle: "",
|
||
label: "",
|
||
labelconcent: "",
|
||
width: "",
|
||
height: ""
|
||
},
|
||
// 节点属性表单
|
||
edgeAttributeForm: {
|
||
keyword: '',
|
||
label: ""
|
||
},
|
||
// 画布属性栏表单
|
||
canvasAttributeForm: {
|
||
grid: true,
|
||
cell: 20
|
||
},
|
||
// SVG节点图片URL地址
|
||
startNodeSVGUrl: require("../mianview/start-node.svg"),
|
||
endNodeSVGUrl: require("../mianview/end-node.svg"),
|
||
regularNodeSVGUrl: require("../mianview/regular-node.svg"),
|
||
conditionNodeSVGUrl: require("../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"
|
||
};
|
||
},
|
||
watch: {
|
||
nodeAttributeForm: {
|
||
handler(newVal, oldVal) {
|
||
if (newVal.labeltitle || newVal.labelconcent) {
|
||
this.$set(this.nodeAttributeForm, 'labelconcent', newVal.labelconcent)
|
||
this.$set(this.nodeAttributeForm, 'labeltitle', newVal.labeltitle)
|
||
this.nodeAttributeForm.label = newVal.labeltitle + '\n' + newVal.labelconcent;
|
||
} else {
|
||
this.nodeAttributeForm.label = newVal.label
|
||
}
|
||
// console.log('obj发生了变化', newVal, oldVal)
|
||
},
|
||
|
||
deep: true
|
||
}
|
||
},
|
||
mounted() {
|
||
// console.log(this.$router.query,'query')
|
||
this.initG6Editor();
|
||
this.getlist()
|
||
|
||
this.form.edges.forEach(e => {
|
||
if (e.keyword) {
|
||
// e.label=e.label
|
||
e.label = {
|
||
text: e.label,
|
||
fill: 'red'
|
||
}
|
||
|
||
}
|
||
|
||
})
|
||
// this.editor.getCurrentPage().save()
|
||
// this.editor.getCurrentPage().read(this.form);
|
||
},
|
||
created() {
|
||
|
||
},
|
||
|
||
methods: {
|
||
// 返回
|
||
back(){
|
||
this.$router.go(-1);//返回上一层
|
||
},
|
||
getlist() {
|
||
selectScriptEdgeNode(this.$route.query.id).then(res => {
|
||
if (res.data.flowScheme) {
|
||
this.form = JSON.parse(res.data.flowScheme)
|
||
|
||
}
|
||
|
||
console.log(this.form)
|
||
this.form.nodes.forEach(e => {
|
||
if (e.label) {
|
||
if (e.label.split('\n').shift() && e.label.split('\n').slice(1).join('\n')) {
|
||
// e.labeltitle = e.label .split('\n').shift()
|
||
// e.labelconcent = e.label.split('\n').slice(1).join('\n')
|
||
// e.label= `<p>${e.label.split('\n').shift()}</p>`+'\n'+ e.label.split('\n').slice(1).join('\n')
|
||
// console.log(e.label, 'e.la')
|
||
// e.label={ // 关键形样式（优先级高于color）
|
||
// fontSize: 14,
|
||
// fontWeight:800,
|
||
// text:e.label,
|
||
|
||
// }
|
||
}
|
||
}
|
||
})
|
||
this.editor.getCurrentPage().read(this.form);
|
||
console.log(this.form, '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();
|
||
let newObj = JSON.parse(JSON.stringify(needSaveData))
|
||
newObj.scriptInfoId = Number(_this.$route.query.id)
|
||
newObj.flowScheme = JSON.stringify(needSaveData)
|
||
newObj.edges.forEach(e => {
|
||
if (e.keyword) {
|
||
// e.label=e.label
|
||
e.label = e.label.text
|
||
}
|
||
e.code = e.id
|
||
delete e.id
|
||
})
|
||
newObj.nodes.forEach(e => {
|
||
e.code = e.id
|
||
delete e.id
|
||
})
|
||
console.log(newObj, 'newObj');
|
||
|
||
// return
|
||
insertScriptEdgeNode(newObj).then(res => {
|
||
if (res.code == 200) {
|
||
_this.$message.success("数据保存成功");
|
||
_this.getlist()
|
||
} else {
|
||
_this.$modal.msgError(res.msg);
|
||
}
|
||
|
||
})
|
||
|
||
let testcs = JSON.stringify(needSaveData)
|
||
let test = JSON.parse(testcs)
|
||
console.log(testcs, 'JSON.stringify(needSaveData)');
|
||
console.log(test, 'test');
|
||
// localStorage.setItem("flowData", JSON.stringify(needSaveData));
|
||
_this.save(needSaveData);
|
||
|
||
},
|
||
// 反向命令
|
||
back(editor) {
|
||
console.log("反向命令");
|
||
},
|
||
// 快捷键：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 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) => {
|
||
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.type = selectedItemDataModel.shape
|
||
if (selectedItemDataModel.label && selectedItemDataModel.labelconcent == '' && selectedItemDataModel.labeltitle == '') {
|
||
var titles = selectedItemDataModel.label.split('\n').shift()
|
||
var concent = selectedItemDataModel.label.split('\n').slice(1).join('\n')
|
||
console.log(titles, 'shift()')
|
||
console.log(concent, 'join')
|
||
if (titles && concent) {
|
||
this.nodeAttributeForm.labeltitle = titles
|
||
this.nodeAttributeForm.labelconcent = concent
|
||
} else if (titles && !concent) {
|
||
this.nodeAttributeForm.labeltitle = titles;
|
||
this.nodeAttributeForm.labelconcent = ''
|
||
|
||
} else if (!titles && concent) {
|
||
this.nodeAttributeForm.labeltitle = '';
|
||
this.nodeAttributeForm.labelconcent = concent
|
||
}
|
||
}
|
||
else {
|
||
this.nodeAttributeForm.labelconcent = selectedItemDataModel.labelconcent;
|
||
this.nodeAttributeForm.labeltitle = selectedItemDataModel.labeltitle;
|
||
}
|
||
if (!this.nodeAttributeForm.labelconcent && !this.nodeAttributeForm.labeltitle) {
|
||
this.nodeAttributeForm.label = selectedItemDataModel.label;
|
||
}
|
||
// this.nodeAttributeForm.labelconcent = selectedItemDataModel.labelconcent;
|
||
// this.nodeAttributeForm.labeltitle = selectedItemDataModel.labeltitle;
|
||
|
||
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"
|
||
});
|
||
let newObj = JSON.parse(JSON.stringify(selectedItemDataModel))
|
||
if (newObj.keyword) {
|
||
this.edgeAttributeForm.label = newObj.label.text;
|
||
} else {
|
||
this.edgeAttributeForm.label = selectedItemDataModel.label;
|
||
}
|
||
this.edgeAttributeForm.shape = selectedItemDataModel.shape;
|
||
this.edgeAttributeForm.keyword = selectedItemDataModel.keyword;
|
||
}
|
||
});
|
||
// 监听（删除后）事件
|
||
currentPage.on("afterdelete", (ev) => { });
|
||
},
|
||
// 打开保存为图片弹窗
|
||
openSaveAsImageDialog() {
|
||
this.saveAsImageDialogVisible = true;
|
||
},
|
||
// 开启/关闭网格对齐
|
||
toggleGridShowStatus(value) {
|
||
if (value) {
|
||
this.editor.getCurrentPage().showGrid();
|
||
} else {
|
||
this.editor.getCurrentPage().hideGrid();
|
||
}
|
||
},
|
||
|
||
// 将data:image/png;base64,格式的Base64字符串转换为File对象
|
||
base64ToFile(base64Data, filename) {
|
||
const now = new Date();
|
||
const nowdata = now.toTimeString().split(' ')[0]; // 获取时分秒
|
||
console.log(nowdata, 'nowdata')
|
||
const nowdatanew = nowdata.replace(/:/g, '-')
|
||
// this.attributeName.replace(/:/g, '-');
|
||
const name = Cookies.get('username')
|
||
// 将base64的数据类型前缀去掉（如果有必要）
|
||
const base64Regex = /^data:([^;]+);base64,/;
|
||
const matches = base64Data.match(base64Regex);
|
||
// const mimeType = matches ? matches[1] : '';
|
||
const mimeType = 'image/jpg';
|
||
const base64String = base64Data.replace(base64Regex, ''); // 获取去掉前缀的base64字符串
|
||
// 将base64字符串转换为二进制数据
|
||
const binaryString = atob(base64String);
|
||
const len = binaryString.length;
|
||
const bytes = new Uint8Array(len);
|
||
for (let i = 0; i < len; i++) {
|
||
bytes[i] = binaryString.charCodeAt(i);
|
||
}
|
||
// 将二进制数据转换为Blob对象
|
||
const blob = new Blob([bytes], { type: mimeType });
|
||
// 创建File对象
|
||
const file = new File([blob], this.$route.query.scriptId + '.jpg', { type: mimeType });
|
||
return file;
|
||
},
|
||
|
||
// 保存为图片
|
||
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();
|
||
console.log(imageDataURL, 'imageDataURL')
|
||
const file = this.base64ToFile(imageDataURL);
|
||
console.log(file, '0000000000')
|
||
// return
|
||
let formDatanew = new FormData();
|
||
formDatanew.append("file", file);
|
||
console.log(formDatanew, 'formDatanew')
|
||
uploadScriptInfo(formDatanew).then(response => {
|
||
if (response.code == 200) {
|
||
var obj = {
|
||
id: this.$route.query.id,
|
||
scriptFilePath: response.imgUrl
|
||
}
|
||
|
||
edit(obj).then(response => {
|
||
if (response.code == 200) {
|
||
|
||
}
|
||
});
|
||
}
|
||
});
|
||
// return file;
|
||
let downloadLink = document.createElement("a");
|
||
downloadLink.download = "图片.jpg";
|
||
downloadLink.href = imageDataURL;
|
||
document.body.appendChild(downloadLink);
|
||
downloadLink.click();
|
||
document.body.removeChild(downloadLink);
|
||
this.saveAsImageDialogVisible = false;
|
||
},
|
||
|
||
// 保存为文件
|
||
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));
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.bold-input ::v-deep .el-input__inner {
|
||
font-weight: bold;
|
||
}
|
||
|
||
@import url("../mianview/index.less");
|
||
</style>
|