This commit is contained in:
2024-07-01 11:38:43 +08:00
parent 41c2078b5a
commit e048083dfe
4 changed files with 148 additions and 471 deletions

View File

@ -158,7 +158,6 @@ import G6Editor from "@antv/g6-editor";
import mixin from "@/views/system/mianview/mixin"; import mixin from "@/views/system/mianview/mixin";
import { getFlowScheme } from "@/api/system/preview"; import { getFlowScheme } from "@/api/system/preview";
import { construct } from "netflix-conductor-json-tree/dist/index"; import { construct } from "netflix-conductor-json-tree/dist/index";
import Cookies from 'js-cookie'
export default { export default {
name: "VueG6Editor", name: "VueG6Editor",
props: ['phoneNodeContent'], props: ['phoneNodeContent'],

View File

@ -247,7 +247,6 @@
<script> <script>
import { listScript, getScript, delScript, addScript, updateScript, departmentDisease, department, listDisease, listScriptNum } from "@/api/manage/script"; import { listScript, getScript, delScript, addScript, updateScript, departmentDisease, department, listDisease, listScriptNum } from "@/api/manage/script";
import stationAcatar from "../../system/stationAvatar/index.vue"; import stationAcatar from "../../system/stationAvatar/index.vue";
import Cookies from 'js-cookie'
export default { export default {
components: { stationAcatar }, components: { stationAcatar },
@ -479,25 +478,22 @@ export default {
}, },
// //
see(row) { see(row) {
Cookies.set("id", row.id)
Cookies.set("scriptId", row.scriptId)
this.$router.push({ this.$router.push({
path: "/knowledge/preview", path: "/knowledge/preview",
query: {
id: row.id,
scriptId: row.scriptId
},
}); });
}, },
seescript(row) { seescript(row) {
Cookies.set("id", row.id)
this.$router.push({ this.$router.push({
path: "/knowledge/Scriptpreview", path: "/knowledge/Scriptpreview",
query: { query: {
id: row.id, id: row.id,
}, },
}); });
}, },
// //
handlesee(row) { handlesee(row) {

View File

@ -22,154 +22,52 @@
> --> > -->
<!-- <font-awesome-icon icon="heart" /> --> <!-- <font-awesome-icon icon="heart" /> -->
<!-- <FontAwesomeIcon icon="far fa-copy" /> --> <!-- <FontAwesomeIcon icon="far fa-copy" /> -->
<font-awesome-icon <font-awesome-icon data-command="save" class="command fa fa-floppy-o" icon="command far far fa-copy"
data-command="save" title="保存"></font-awesome-icon>
class="command fa fa-floppy-o" <font-awesome-icon style="margin-left: 10px" icon="fas fa-reply-all" title="历史数据"
icon="command far far fa-copy" @click="readHistoryData"></font-awesome-icon>
title="保存" <font-awesome-icon style="margin-left: 10px" class="fa fa-hdd-o" icon="fas fa-file" title="上传数据"
></font-awesome-icon> @click="readUploadData"></font-awesome-icon>
<font-awesome-icon <font-awesome-icon icon="fas fa-download" style="margin-left: 10px" title="另存为文件"
style="margin-left: 10px" @click="saveAsFile">文件</font-awesome-icon>
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" /> --> <!-- <FontAwesomeIcon icon="fas fa-image" /> -->
<font-awesome-icon <font-awesome-icon style="margin-left: 10px" icon="fas fa-image" title="另存为图片"
style="margin-left: 10px" @click="openSaveAsImageDialog"></font-awesome-icon>
icon="fas fa-image"
title="另存为图片"
@click="openSaveAsImageDialog"
></font-awesome-icon>
<font-awesome-icon <font-awesome-icon style="margin-left: 10px" data-command="undo" icon="fas fa-undo" class="command fa fa-undo"
style="margin-left: 10px" title="撤销"></font-awesome-icon>
data-command="undo" <font-awesome-icon style="margin-left: 10px" data-command="redo" class="command fa fa-repeat"
icon="fas fa-undo" icon="fas fa-repeat" title="重做"></font-awesome-icon>
class="command fa fa-undo" <font-awesome-icon style="margin-left: 10px" data-command="delete" class="command fa fa-trash-o"
title="撤销" icon="fas fa-trash-alt" title="删除"></font-awesome-icon>
></font-awesome-icon> <font-awesome-icon style="margin-left: 10px" data-command="zoomOut" class="command fa fa-search-minus"
<font-awesome-icon icon="fas fa-search-minus" title="缩小"></font-awesome-icon>
style="margin-left: 10px" <font-awesome-icon style="margin-left: 10px" data-command="zoomIn" icon="fas fa-search-plus"
data-command="redo" class="command fa fa-search-plus" title="放大"></font-awesome-icon>
class="command fa fa-repeat" <font-awesome-icon style="margin-left: 10px" icon="fas fa-eraser" data-command="clear"
icon="fas fa-repeat" class="command fa fa-eraser" title="清除画布"></font-awesome-icon>
title="重做" <font-awesome-icon style="margin-left: 10px" icon="fas fa-arrow-up" data-command="toFront"
></font-awesome-icon> class="command fa fa-arrow-up" title="提升层级"></font-awesome-icon>
<font-awesome-icon <font-awesome-icon style="margin-left: 10px" icon="fas fa-arrow-down" data-command="toBack"
style="margin-left: 10px" class="command fa fa-arrow-down" title="下降层级"></font-awesome-icon>
data-command="delete" <font-awesome-icon style="margin-left: 10px" icon="fas fa-check-square" data-command="selectAll"
class="command fa fa-trash-o" class="command fa fa-check-square-o" title="全选"></font-awesome-icon>
icon="fas fa-trash-alt" <font-awesome-icon style="margin-left: 10px" icon="far fa-copy" data-command="copy"
title="删除" class="command fa fa-files-o" title="复制"></font-awesome-icon>
></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 <font-awesome-icon style="margin-left: 10px" icon="fas fa-clone" data-command="paste"
style="margin-left: 10px" class="command fa fa-clipboard" title="粘贴"></font-awesome-icon>
icon="fas fa-clone" <font-awesome-icon style="margin-left: 10px" icon="fas fa-expand" data-command="autoZoom"
data-command="paste" class="command fa fa-expand" title="实际大小"></font-awesome-icon>
class="command fa fa-clipboard" <font-awesome-icon style="margin-left: 10px" icon="fas fa-compress" data-command="resetZoom"
title="粘贴" class="command fa fa-compress" title="适应页面"></font-awesome-icon>
></font-awesome-icon> <font-awesome-icon style="margin-left: 10px" icon="fas fa-object-group" data-command="addGroup"
<font-awesome-icon class="command fa fa-object-group" title="组合"></font-awesome-icon>
style="margin-left: 10px" <font-awesome-icon style="margin-left: 10px" icon="fas fa-object-ungroup" data-command="unGroup"
icon="fas fa-expand" class="command fa fa-object-ungroup" title="取消组合"></font-awesome-icon>
data-command="autoZoom" <font-awesome-icon style="margin-left: 10px" icon="fas fa-crop" data-command="multiSelect"
class="command fa fa-expand" class="command fa fa fa-crop" title="多选"></font-awesome-icon>
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> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -201,33 +99,23 @@
<article> <article>
<!-- 下载图片 --> <!-- 下载图片 -->
<section class="save-as-image-dialog"> <section class="save-as-image-dialog">
<el-dialog <el-dialog title="下载图片" :visible.sync="saveAsImageDialogVisible" width="360px">
title="下载图片"
:visible.sync="saveAsImageDialogVisible"
width="360px"
>
<el-form label-width="100px" label-position="top"> <el-form label-width="100px" label-position="top">
<el-form-item label="选择图片格式"> <el-form-item label="选择图片格式">
<el-select v-model="saveAsImageFormat"> <el-select v-model="saveAsImageFormat">
<el-option label="jpg" value="jpg"> <el-option label="jpg" value="jpg">
<span style="float: left">jpg</span> <span style="float: left">jpg</span>
<span style="float: right; color: #8492a6; font-size: 13px" <span style="float: right; color: #8492a6; font-size: 13px">白色背景</span>
>白色背景</span
>
</el-option> </el-option>
<el-option label="png" value="png"> <el-option label="png" value="png">
<span style="float: left">png</span> <span style="float: left">png</span>
<span style="float: right; color: #8492a6; font-size: 13px" <span style="float: right; color: #8492a6; font-size: 13px">透明背景</span>
>透明背景</span
>
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer"> <span slot="footer">
<el-button @click="saveAsImageDialogVisible = false" <el-button @click="saveAsImageDialogVisible = false"> </el-button>
> </el-button
>
<el-button type="primary" @click="saveAsImage"> </el-button> <el-button type="primary" @click="saveAsImage"> </el-button>
</span> </span>
</el-dialog> </el-dialog>
@ -252,9 +140,7 @@
</div> </div>
<div data-status="canvas-selected" class="menu"> <div data-status="canvas-selected" class="menu">
<el-button data-command="undo" class="command">撤销</el-button> <el-button data-command="undo" class="command">撤销</el-button>
<el-button data-command="redo" class="command disable" <el-button data-command="redo" class="command disable">重做</el-button>
>重做</el-button
>
</div> </div>
<div data-status="multi-selected" class="menu"> <div data-status="multi-selected" class="menu">
<el-button data-command="copy" class="command">复制</el-button> <el-button data-command="copy" class="command">复制</el-button>
@ -270,18 +156,17 @@ import G6Editor from "@antv/g6-editor";
import mixin from "../mianview/mixin"; import mixin from "../mianview/mixin";
import { selectScriptEdgeNode } from "@/api/system/preview"; import { selectScriptEdgeNode } from "@/api/system/preview";
import { construct } from "netflix-conductor-json-tree/dist/index"; import { construct } from "netflix-conductor-json-tree/dist/index";
import Cookies from 'js-cookie'
export default { export default {
name: "VueG6Editor", name: "VueG6Editor",
mixins: [mixin], mixins: [mixin],
data() { data() {
return { return {
form: { form: {
scriptInfoId: null, scriptInfoId: null,
flowScheme: null, flowScheme: null,
nodes: [], nodes: [],
edges: [], edges: [],
}, },
// form: { // form: {
// nodes: [{ // nodes: [{
// color // color
@ -641,14 +526,13 @@ export default {
this.editor.getCurrentPage().read(this.form); this.editor.getCurrentPage().read(this.form);
}, },
methods: { methods: {
getlist(){ getlist() {
selectScriptEdgeNode(Cookies.get('id')).then(res=>{ selectScriptEdgeNode(this.$route.query.id).then(res => {
this.form=JSON.parse(res.data.flowScheme) this.form = JSON.parse(res.data.flowScheme)
this.editor.getCurrentPage().read(this.form); this.editor.getCurrentPage().read(this.form);
// console.log(this.form,'this.form') // console.log(this.form,'this.form')
})
}) },
},
// //
initG6Editor() { initG6Editor() {
const _this = this; const _this = this;
@ -669,7 +553,7 @@ export default {
let needSaveData = editor.getCurrentPage().save(); let needSaveData = editor.getCurrentPage().save();
console.log(needSaveData, 'needSaveData'); console.log(needSaveData, 'needSaveData');
// JSON.parse(JSON.stringify(needSaveData)) // JSON.parse(JSON.stringify(needSaveData))
const text =JSON.stringify(needSaveData) const text = JSON.stringify(needSaveData)
console.log(JSON.parse(JSON.stringify(text)), 'text'); console.log(JSON.parse(JSON.stringify(text)), 'text');
localStorage.setItem("flowData", JSON.stringify(needSaveData)); localStorage.setItem("flowData", JSON.stringify(needSaveData));
_this.save(needSaveData); _this.save(needSaveData);

View File

@ -22,154 +22,52 @@
> --> > -->
<!-- <font-awesome-icon icon="heart" /> --> <!-- <font-awesome-icon icon="heart" /> -->
<!-- <FontAwesomeIcon icon="far fa-copy" /> --> <!-- <FontAwesomeIcon icon="far fa-copy" /> -->
<font-awesome-icon <font-awesome-icon data-command="save" class="command fa fa-floppy-o" icon="command far far fa-copy"
data-command="save" title="保存"></font-awesome-icon>
class="command fa fa-floppy-o" <font-awesome-icon style="margin-left: 10px" icon="fas fa-reply-all" title="历史数据"
icon="command far far fa-copy" @click="readHistoryData"></font-awesome-icon>
title="保存" <font-awesome-icon style="margin-left: 10px" class="fa fa-hdd-o" icon="fas fa-file" title="上传数据"
></font-awesome-icon> @click="readUploadData"></font-awesome-icon>
<font-awesome-icon <font-awesome-icon icon="fas fa-download" style="margin-left: 10px" title="另存为文件"
style="margin-left: 10px" @click="saveAsFile">文件</font-awesome-icon>
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" /> --> <!-- <FontAwesomeIcon icon="fas fa-image" /> -->
<font-awesome-icon <font-awesome-icon style="margin-left: 10px" icon="fas fa-image" title="另存为图片"
style="margin-left: 10px" @click="openSaveAsImageDialog"></font-awesome-icon>
icon="fas fa-image"
title="另存为图片"
@click="openSaveAsImageDialog"
></font-awesome-icon>
<font-awesome-icon <font-awesome-icon style="margin-left: 10px" data-command="undo" icon="fas fa-undo" class="command fa fa-undo"
style="margin-left: 10px" title="撤销"></font-awesome-icon>
data-command="undo" <font-awesome-icon style="margin-left: 10px" data-command="redo" class="command fa fa-repeat"
icon="fas fa-undo" icon="fas fa-repeat" title="重做"></font-awesome-icon>
class="command fa fa-undo" <font-awesome-icon style="margin-left: 10px" data-command="delete" class="command fa fa-trash-o"
title="撤销" icon="fas fa-trash-alt" title="删除"></font-awesome-icon>
></font-awesome-icon> <font-awesome-icon style="margin-left: 10px" data-command="zoomOut" class="command fa fa-search-minus"
<font-awesome-icon icon="fas fa-search-minus" title="缩小"></font-awesome-icon>
style="margin-left: 10px" <font-awesome-icon style="margin-left: 10px" data-command="zoomIn" icon="fas fa-search-plus"
data-command="redo" class="command fa fa-search-plus" title="放大"></font-awesome-icon>
class="command fa fa-repeat" <font-awesome-icon style="margin-left: 10px" icon="fas fa-eraser" data-command="clear"
icon="fas fa-repeat" class="command fa fa-eraser" title="清除画布"></font-awesome-icon>
title="重做" <font-awesome-icon style="margin-left: 10px" icon="fas fa-arrow-up" data-command="toFront"
></font-awesome-icon> class="command fa fa-arrow-up" title="提升层级"></font-awesome-icon>
<font-awesome-icon <font-awesome-icon style="margin-left: 10px" icon="fas fa-arrow-down" data-command="toBack"
style="margin-left: 10px" class="command fa fa-arrow-down" title="下降层级"></font-awesome-icon>
data-command="delete" <font-awesome-icon style="margin-left: 10px" icon="fas fa-check-square" data-command="selectAll"
class="command fa fa-trash-o" class="command fa fa-check-square-o" title="全选"></font-awesome-icon>
icon="fas fa-trash-alt" <font-awesome-icon style="margin-left: 10px" icon="far fa-copy" data-command="copy"
title="删除" class="command fa fa-files-o" title="复制"></font-awesome-icon>
></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 <font-awesome-icon style="margin-left: 10px" icon="fas fa-clone" data-command="paste"
style="margin-left: 10px" class="command fa fa-clipboard" title="粘贴"></font-awesome-icon>
icon="fas fa-clone" <font-awesome-icon style="margin-left: 10px" icon="fas fa-expand" data-command="autoZoom"
data-command="paste" class="command fa fa-expand" title="实际大小"></font-awesome-icon>
class="command fa fa-clipboard" <font-awesome-icon style="margin-left: 10px" icon="fas fa-compress" data-command="resetZoom"
title="粘贴" class="command fa fa-compress" title="适应页面"></font-awesome-icon>
></font-awesome-icon> <font-awesome-icon style="margin-left: 10px" icon="fas fa-object-group" data-command="addGroup"
<font-awesome-icon class="command fa fa-object-group" title="组合"></font-awesome-icon>
style="margin-left: 10px" <font-awesome-icon style="margin-left: 10px" icon="fas fa-object-ungroup" data-command="unGroup"
icon="fas fa-expand" class="command fa fa-object-ungroup" title="取消组合"></font-awesome-icon>
data-command="autoZoom" <font-awesome-icon style="margin-left: 10px" icon="fas fa-crop" data-command="multiSelect"
class="command fa fa-expand" class="command fa fa fa-crop" title="多选"></font-awesome-icon>
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> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -179,66 +77,30 @@
<el-col :span="2"> <el-col :span="2">
<div id="itempannel"> <div id="itempannel">
<!-- 开始节点 --> <!-- 开始节点 -->
<div <div id="startNode" class="getItem" data-type="node" data-shape="flow-circle" data-size="72*72"
id="startNode" data-label="开始节点" data-color="#FA8C16" data-nodeType="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 /> <img draggable="false" :src="startNodeSVGUrl" alt srcset />
</div> </div>
<!-- 常规节点 --> <!-- 常规节点 -->
<div <div id="regularNode" class="getItem" data-type="node" data-size="100*50" data-label="常规节点"
id="regularNode" data-color="#1890ff">
class="getItem"
data-type="node"
data-size="100*50"
data-label="常规节点"
data-color="#1890ff"
>
<img draggable="false" :src="regularNodeSVGUrl" alt srcset /> <img draggable="false" :src="regularNodeSVGUrl" alt srcset />
</div> </div>
<!-- 条件节点 --> <!-- 条件节点 -->
<div <div id="judgeNode" class="getItem" data-type="node" data-shape="flow-rhombus" data-size="80*80"
id="judgeNode" data-label="条件节点" data-color="#13C2C2">
class="getItem"
data-type="node"
data-shape="flow-rhombus"
data-size="80*80"
data-label="条件节点"
data-color="#13C2C2"
>
<img draggable="false" :src="conditionNodeSVGUrl" /> <img draggable="false" :src="conditionNodeSVGUrl" />
</div> </div>
<!-- 自定义节点 --> <!-- 自定义节点 -->
<div <div class="getItem" data-type="node" data-shape="customNode" data-size="80*48" data-labeltitle=""
class="getItem" data-labelconcent="" data-color="#722ED1">
data-type="node"
data-shape="customNode"
data-size="80*48"
data-labeltitle=""
data-labelconcent=""
data-color="#722ED1"
>
<img draggable="false" :src="nNodeSVGUrl" /> <img draggable="false" :src="nNodeSVGUrl" />
</div> </div>
<!-- 结束节点 --> <!-- 结束节点 -->
<div <div id="endNode" class="getItem" data-type="node" data-shape="flow-circle" data-size="80*80"
id="endNode" data-label="结束节点" data-color="#FA8C16" data-nodeType="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" /> <img draggable="false" :src="endNodeSVGUrl" />
</div> </div>
</div> </div>
@ -254,84 +116,44 @@
<section class="right-part"> <section class="right-part">
<div id="detailpannel"> <div id="detailpannel">
<!-- 节点属性栏 --> <!-- 节点属性栏 -->
<div <div id="nodeAttributeBar" class="pannel" data-status="node-selected">
id="nodeAttributeBar"
class="pannel"
data-status="node-selected"
>
<div class="title">节点属性</div> <div class="title">节点属性</div>
<div class="main"> <div class="main">
<el-form <el-form :model="nodeAttributeForm" label-position="top" label-width="80px">
:model="nodeAttributeForm"
label-position="top"
label-width="80px"
>
<el-form-item label="节点文本" v-if="type != 'customNode'"> <el-form-item label="节点文本" v-if="type != 'customNode'">
<el-input <el-input v-model="nodeAttributeForm.label" @change="saveNodeAttribute"></el-input>
v-model="nodeAttributeForm.label"
@change="saveNodeAttribute"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="标题" v-if="type == 'customNode'"> <el-form-item label="标题" v-if="type == 'customNode'">
<el-input <el-input class="bold-input" v-model="nodeAttributeForm.labeltitle"
class="bold-input" @change="saveNodeAttribute"></el-input>
v-model="nodeAttributeForm.labeltitle"
@change="saveNodeAttribute"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="内容" v-if="type == 'customNode'"> <el-form-item label="内容" v-if="type == 'customNode'">
<el-input <el-input type="textarea" v-model="nodeAttributeForm.labelconcent"
type="textarea" @change="saveNodeAttribute"></el-input>
v-model="nodeAttributeForm.labelconcent"
@change="saveNodeAttribute"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="宽度"> <el-form-item label="宽度">
<el-input <el-input v-model="nodeAttributeForm.width" @change="saveNodeAttribute"></el-input>
v-model="nodeAttributeForm.width"
@change="saveNodeAttribute"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="高度"> <el-form-item label="高度">
<el-input <el-input v-model="nodeAttributeForm.height" @change="saveNodeAttribute"></el-input>
v-model="nodeAttributeForm.height"
@change="saveNodeAttribute"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="颜色"> <el-form-item label="颜色">
<el-color-picker <el-color-picker v-model="nodeAttributeForm.color" @change="saveNodeAttribute"></el-color-picker>
v-model="nodeAttributeForm.color"
@change="saveNodeAttribute"
></el-color-picker>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</div> </div>
<!-- 边属性栏 --> <!-- 边属性栏 -->
<div <div id="edgeAttributeBar" class="pannel" data-status="edge-selected">
id="edgeAttributeBar"
class="pannel"
data-status="edge-selected"
>
<div class="title">边属性</div> <div class="title">边属性</div>
<div class="main"> <div class="main">
<el-form <el-form :model="edgeAttributeForm" label-position="top" label-width="80px">
:model="edgeAttributeForm"
label-position="top"
label-width="80px"
>
<el-form-item label="边文本"> <el-form-item label="边文本">
<el-input <el-input v-model="edgeAttributeForm.label" @change="saveEdgeAttribute"></el-input>
v-model="edgeAttributeForm.label"
@change="saveEdgeAttribute"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="关键字"> <el-form-item label="关键字">
<el-input <el-input type="textarea" v-model="edgeAttributeForm.keyword"
type="textarea" @change="saveEdgeAttribute"></el-input>
v-model="edgeAttributeForm.keyword"
@change="saveEdgeAttribute"
></el-input>
</el-form-item> </el-form-item>
<!-- <el-form-item label="边文本"> <!-- <el-form-item label="边文本">
<el-select <el-select
@ -355,35 +177,20 @@
</el-form> </el-form>
</div> </div>
</div> </div>
<div <div id="groupAttributeBar" class="pannel" data-status="group-selected">
id="groupAttributeBar"
class="pannel"
data-status="group-selected"
>
<div class="title">群组属性栏</div> <div class="title">群组属性栏</div>
</div> </div>
<div <div id="canvasAttributeBar" class="pannel" data-status="canvas-selected">
id="canvasAttributeBar"
class="pannel"
data-status="canvas-selected"
>
<div class="title">画布属性栏</div> <div class="title">画布属性栏</div>
<div class="main"> <div class="main">
<el-form label-width="80px" label-position="right"> <el-form label-width="80px" label-position="right">
<el-form-item label="网格对齐"> <el-form-item label="网格对齐">
<el-checkbox <el-checkbox v-model="canvasAttributeForm.grid" @change="toggleGridShowStatus"></el-checkbox>
v-model="canvasAttributeForm.grid"
@change="toggleGridShowStatus"
></el-checkbox>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</div> </div>
<div <div id="multiAttributeBar" class="pannel" data-status="multi-selected">
id="multiAttributeBar"
class="pannel"
data-status="multi-selected"
>
<div class="title">多选时属性栏</div> <div class="title">多选时属性栏</div>
</div> </div>
</div> </div>
@ -398,19 +205,13 @@
<article> <article>
<!-- 下载图片 --> <!-- 下载图片 -->
<section class="save-as-image-dialog"> <section class="save-as-image-dialog">
<el-dialog <el-dialog title="生成图片" :visible.sync="saveAsImageDialogVisible" width="360px">
title="生成图片"
:visible.sync="saveAsImageDialogVisible"
width="360px"
>
<el-form label-width="100px" label-position="top"> <el-form label-width="100px" label-position="top">
<el-form-item label="图片格式"> <el-form-item label="图片格式">
<el-select v-model="saveAsImageFormat"> <el-select v-model="saveAsImageFormat">
<el-option label="jpg" value="jpg"> <el-option label="jpg" value="jpg">
<span style="float: left">jpg</span> <span style="float: left">jpg</span>
<span style="float: right; color: #8492a6; font-size: 13px" <span style="float: right; color: #8492a6; font-size: 13px">白色背景</span>
>白色背景</span
>
</el-option> </el-option>
<!-- <el-option label="png" value="png"> <!-- <el-option label="png" value="png">
<span style="float: left">png</span> <span style="float: left">png</span>
@ -422,9 +223,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer"> <span slot="footer">
<el-button @click="saveAsImageDialogVisible = false" <el-button @click="saveAsImageDialogVisible = false"> </el-button>
> </el-button
>
<el-button type="primary" @click="saveAsImage"> </el-button> <el-button type="primary" @click="saveAsImage"> </el-button>
</span> </span>
</el-dialog> </el-dialog>
@ -449,9 +248,7 @@
</div> </div>
<div data-status="canvas-selected" class="menu"> <div data-status="canvas-selected" class="menu">
<el-button data-command="undo" class="command">撤销</el-button> <el-button data-command="undo" class="command">撤销</el-button>
<el-button data-command="redo" class="command disable" <el-button data-command="redo" class="command disable">重做</el-button>
>重做</el-button
>
</div> </div>
<div data-status="multi-selected" class="menu"> <div data-status="multi-selected" class="menu">
<el-button data-command="copy" class="command">复制</el-button> <el-button data-command="copy" class="command">复制</el-button>
@ -558,7 +355,7 @@ export default {
methods: { methods: {
getlist() { getlist() {
selectScriptEdgeNode(Cookies.get('id')).then(res => { selectScriptEdgeNode(this.$route.query.id).then(res => {
this.form = JSON.parse(res.data.flowScheme) this.form = JSON.parse(res.data.flowScheme)
this.form = JSON.parse(res.data.flowScheme) this.form = JSON.parse(res.data.flowScheme)
console.log(this.form) console.log(this.form)
@ -603,7 +400,7 @@ export default {
execute(editor) { execute(editor) {
let needSaveData = editor.getCurrentPage().save(); let needSaveData = editor.getCurrentPage().save();
let newObj = JSON.parse(JSON.stringify(needSaveData)) let newObj = JSON.parse(JSON.stringify(needSaveData))
newObj.scriptInfoId = Cookies.get('id') newObj.scriptInfoId = Number(_this.$route.query.id)
newObj.flowScheme = JSON.stringify(needSaveData) newObj.flowScheme = JSON.stringify(needSaveData)
newObj.edges.forEach(e => { newObj.edges.forEach(e => {
if (e.keyword) { if (e.keyword) {
@ -794,8 +591,8 @@ export default {
base64ToFile(base64Data, filename) { base64ToFile(base64Data, filename) {
const now = new Date(); const now = new Date();
const nowdata = now.toTimeString().split(' ')[0]; // const nowdata = now.toTimeString().split(' ')[0]; //
console.log(nowdata,'nowdata') console.log(nowdata, 'nowdata')
const nowdatanew=nowdata.replace(/:/g, '-') const nowdatanew = nowdata.replace(/:/g, '-')
// this.attributeName.replace(/:/g, '-'); // this.attributeName.replace(/:/g, '-');
const name = Cookies.get('username') const name = Cookies.get('username')
// base64 // base64
@ -814,7 +611,7 @@ export default {
// Blob // Blob
const blob = new Blob([bytes], { type: mimeType }); const blob = new Blob([bytes], { type: mimeType });
// File // File
const file = new File([blob], Cookies.get('scriptId') + '.jpg', { type: mimeType }); const file = new File([blob], this.$route.query.scriptId + '.jpg', { type: mimeType });
return file; return file;
}, },
@ -844,9 +641,9 @@ export default {
console.log(formDatanew, 'formDatanew') console.log(formDatanew, 'formDatanew')
uploadScriptInfo(formDatanew).then(response => { uploadScriptInfo(formDatanew).then(response => {
if (response.code == 200) { if (response.code == 200) {
var obj={ var obj = {
id:Cookies.get('id'), id: this.$route.query.id,
scriptFilePath:response.imgUrl scriptFilePath: response.imgUrl
} }
edit(obj).then(response => { edit(obj).then(response => {
@ -926,5 +723,6 @@ export default {
.bold-input ::v-deep .el-input__inner { .bold-input ::v-deep .el-input__inner {
font-weight: bold; font-weight: bold;
} }
@import url("../mianview/index.less"); @import url("../mianview/index.less");
</style> </style>