话术预览修改
This commit is contained in:
shidongli
parent
44428e54ce
commit
1ead0a930e
@ -11,19 +11,6 @@
|
|||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<div id="toolbar">
|
<div id="toolbar">
|
||||||
<!-- <font-awesome-icon icon="fa fa-history" />
|
|
||||||
<font-awesome-icon icon="heart" />
|
|
||||||
<font-awesome-icon icon="clock" />
|
|
||||||
<font-awesome-icon icon="clock" style="color: #476151" />
|
|
||||||
<i
|
|
||||||
class="el-icon-edit"
|
|
||||||
data-command="save"
|
|
||||||
title="保存"
|
|
||||||
@click="submitForm"
|
|
||||||
>保存</i
|
|
||||||
> -->
|
|
||||||
<!-- <font-awesome-icon icon="heart" /> -->
|
|
||||||
<!-- <FontAwesomeIcon icon="far fa-copy" /> -->
|
|
||||||
<font-awesome-icon
|
<font-awesome-icon
|
||||||
data-command="save"
|
data-command="save"
|
||||||
class="command fa fa-floppy-o"
|
class="command fa fa-floppy-o"
|
||||||
@ -180,24 +167,23 @@
|
|||||||
<!-- 元素面板 -->
|
<!-- 元素面板 -->
|
||||||
<el-col :span="2">
|
<el-col :span="2">
|
||||||
<!-- <div id="itempannel">
|
<!-- <div id="itempannel">
|
||||||
|
|
||||||
</div> -->
|
</div> -->
|
||||||
</el-col>
|
</el-col>
|
||||||
<!-- 画布 -->
|
<!-- 画布 -->
|
||||||
<el-col :span="20">
|
<el-col :span="24">
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<div id="page"></div>
|
<div id="page" class="zoomable-div"></div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-col>
|
</el-col>
|
||||||
<!-- 属性栏 -->
|
<!-- 属性栏 -->
|
||||||
<el-col :span="4">
|
<!-- <el-col :span="4"> -->
|
||||||
<section class="right-part">
|
<!-- <section class="right-part">
|
||||||
<!-- 缩略图 -->
|
|
||||||
<div id="minimap">
|
<div id="minimap">
|
||||||
<div class="title">缩略图</div>
|
<div class="title">缩略图</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section> -->
|
||||||
</el-col>
|
<!-- </el-col> -->
|
||||||
</el-row>
|
</el-row>
|
||||||
<!-- 弹窗 -->
|
<!-- 弹窗 -->
|
||||||
<article>
|
<article>
|
||||||
@ -278,335 +264,14 @@ export default {
|
|||||||
mixins: [mixin],
|
mixins: [mixin],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
scale: 1, // 初始缩放比例为1
|
||||||
|
zoomFactor: 0.1, // 设置每次鼠标滚轮滚动时的缩放因子
|
||||||
form: {
|
form: {
|
||||||
scriptInfoId: null,
|
scriptInfoId: null,
|
||||||
flowScheme: null,
|
flowScheme: null,
|
||||||
nodes: [],
|
nodes: [],
|
||||||
edges: [],
|
edges: [],
|
||||||
},
|
},
|
||||||
// form: {
|
|
||||||
// nodes: [{
|
|
||||||
// color
|
|
||||||
// :
|
|
||||||
// "#FA8C16",
|
|
||||||
// id
|
|
||||||
// :
|
|
||||||
// "655c5165",
|
|
||||||
// index
|
|
||||||
// :
|
|
||||||
// 0,
|
|
||||||
// label
|
|
||||||
// :
|
|
||||||
// "自我介绍确认",
|
|
||||||
// nodetype
|
|
||||||
// :
|
|
||||||
// "startNode",
|
|
||||||
// shape
|
|
||||||
// :
|
|
||||||
// "flow-circle",
|
|
||||||
// size
|
|
||||||
// :
|
|
||||||
// "72*72",
|
|
||||||
// type
|
|
||||||
// :
|
|
||||||
// "node",
|
|
||||||
// x
|
|
||||||
// :
|
|
||||||
// 441.5124969482422,
|
|
||||||
// y
|
|
||||||
// :
|
|
||||||
// 60.79999542236328,
|
|
||||||
// }, {
|
|
||||||
// color
|
|
||||||
// :
|
|
||||||
// "#1890ff",
|
|
||||||
// id
|
|
||||||
// :
|
|
||||||
// "8660695d",
|
|
||||||
// index
|
|
||||||
// :
|
|
||||||
// 1,
|
|
||||||
// label
|
|
||||||
// :
|
|
||||||
// "家属是否能代打",
|
|
||||||
// size
|
|
||||||
// :
|
|
||||||
// "100*50",
|
|
||||||
// type
|
|
||||||
// :
|
|
||||||
// "node",
|
|
||||||
// x
|
|
||||||
// :
|
|
||||||
// 242.5124969482422,
|
|
||||||
// y
|
|
||||||
// :
|
|
||||||
// 183.5999984741211,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// color
|
|
||||||
// :
|
|
||||||
// "#1890ff",
|
|
||||||
// id
|
|
||||||
// :
|
|
||||||
// "59c9ceed",
|
|
||||||
// index
|
|
||||||
// :
|
|
||||||
// 2,
|
|
||||||
// label
|
|
||||||
// :
|
|
||||||
// "常规节点",
|
|
||||||
// size
|
|
||||||
// :
|
|
||||||
// "100*50",
|
|
||||||
// type
|
|
||||||
// :
|
|
||||||
// "node",
|
|
||||||
// x
|
|
||||||
// :
|
|
||||||
// 606.5124969482422,
|
|
||||||
// y
|
|
||||||
// :
|
|
||||||
// 187.5999984741211,
|
|
||||||
// }, {
|
|
||||||
// color
|
|
||||||
// :
|
|
||||||
// "#722ED1",
|
|
||||||
// id
|
|
||||||
// :
|
|
||||||
// "16f4c8ba",
|
|
||||||
// index
|
|
||||||
// :
|
|
||||||
// 5,
|
|
||||||
// label
|
|
||||||
// :
|
|
||||||
// "你好，我这边是#机构#的工作人员",
|
|
||||||
// shape
|
|
||||||
// :
|
|
||||||
// "flow-capsule",
|
|
||||||
// size
|
|
||||||
// :
|
|
||||||
// "200*48",
|
|
||||||
// type
|
|
||||||
// :
|
|
||||||
// "node",
|
|
||||||
// x
|
|
||||||
// :
|
|
||||||
// 433.5124969482422,
|
|
||||||
// y
|
|
||||||
// :
|
|
||||||
// 125.5999984741211,
|
|
||||||
// }, {
|
|
||||||
// color
|
|
||||||
// :
|
|
||||||
// "#722ED1",
|
|
||||||
// id
|
|
||||||
// :
|
|
||||||
// "e4839dcc",
|
|
||||||
// index
|
|
||||||
// :
|
|
||||||
// 6,
|
|
||||||
// label
|
|
||||||
// :
|
|
||||||
// "好的是这样的",
|
|
||||||
// shape
|
|
||||||
// :
|
|
||||||
// "flow-capsule",
|
|
||||||
// size
|
|
||||||
// :
|
|
||||||
// "80*48",
|
|
||||||
// type
|
|
||||||
// :
|
|
||||||
// "node",
|
|
||||||
// x
|
|
||||||
// :
|
|
||||||
// 233.5124969482422,
|
|
||||||
// y
|
|
||||||
// :
|
|
||||||
// 251.5999984741211,
|
|
||||||
// }, {
|
|
||||||
// color
|
|
||||||
// :
|
|
||||||
// "#1890ff",
|
|
||||||
// id
|
|
||||||
// :
|
|
||||||
// "392ca0b8",
|
|
||||||
// index
|
|
||||||
// :
|
|
||||||
// 7,
|
|
||||||
// label
|
|
||||||
// :
|
|
||||||
// "家属不能代打",
|
|
||||||
// size
|
|
||||||
// :
|
|
||||||
// "100*50",
|
|
||||||
// type
|
|
||||||
// :
|
|
||||||
// "node",
|
|
||||||
// x
|
|
||||||
// :
|
|
||||||
// 55.51249694824219,
|
|
||||||
// y
|
|
||||||
// :
|
|
||||||
// 299.5999984741211
|
|
||||||
// }, {
|
|
||||||
// color
|
|
||||||
// :
|
|
||||||
// "#1890ff",
|
|
||||||
// id
|
|
||||||
// :
|
|
||||||
// "6bcab22d",
|
|
||||||
// index
|
|
||||||
// :
|
|
||||||
// 8,
|
|
||||||
// label
|
|
||||||
// :
|
|
||||||
// "家属能代打",
|
|
||||||
// size
|
|
||||||
// :
|
|
||||||
// "100*50",
|
|
||||||
// type
|
|
||||||
// :
|
|
||||||
// "node",
|
|
||||||
// x
|
|
||||||
// :
|
|
||||||
// 384.5124969482422,
|
|
||||||
// y
|
|
||||||
// :
|
|
||||||
// 307.5999984741211
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// color
|
|
||||||
// :
|
|
||||||
// "#722ED1",
|
|
||||||
// id
|
|
||||||
// :
|
|
||||||
// "dc5de91f",
|
|
||||||
// index
|
|
||||||
// :
|
|
||||||
// 11,
|
|
||||||
// label
|
|
||||||
// :
|
|
||||||
// "好的 麻烦转告一下",
|
|
||||||
// shape
|
|
||||||
// :
|
|
||||||
// "flow-capsule",
|
|
||||||
// size
|
|
||||||
// :
|
|
||||||
// "200*48",
|
|
||||||
// type
|
|
||||||
// :
|
|
||||||
// "node",
|
|
||||||
// x
|
|
||||||
// :
|
|
||||||
// 55.51249694824219,
|
|
||||||
// y
|
|
||||||
// :
|
|
||||||
// 366.5
|
|
||||||
|
|
||||||
// }],
|
|
||||||
// edges: [{
|
|
||||||
// id: "b04d23c7",
|
|
||||||
// index
|
|
||||||
// :
|
|
||||||
// 3,
|
|
||||||
// label
|
|
||||||
// :
|
|
||||||
// "是本人",
|
|
||||||
// shape
|
|
||||||
// :
|
|
||||||
// "flow-polyline-round",
|
|
||||||
// source
|
|
||||||
// :
|
|
||||||
// "655c5165",
|
|
||||||
// sourceAnchor
|
|
||||||
// :
|
|
||||||
// 1,
|
|
||||||
// target
|
|
||||||
// :
|
|
||||||
// "59c9ceed",
|
|
||||||
// targetAnchor
|
|
||||||
// :
|
|
||||||
// 0,
|
|
||||||
// }, {
|
|
||||||
// id
|
|
||||||
// :
|
|
||||||
// "7894068d",
|
|
||||||
// index
|
|
||||||
// :
|
|
||||||
// 4,
|
|
||||||
// label
|
|
||||||
// :
|
|
||||||
// "是家属",
|
|
||||||
// shape
|
|
||||||
// :
|
|
||||||
// "flow-polyline-round",
|
|
||||||
// source
|
|
||||||
// :
|
|
||||||
// "655c5165",
|
|
||||||
// sourceAnchor
|
|
||||||
// :
|
|
||||||
// 3,
|
|
||||||
// target
|
|
||||||
// :
|
|
||||||
// "8660695d",
|
|
||||||
// targetAnchor
|
|
||||||
// :
|
|
||||||
// 0,
|
|
||||||
// }, {
|
|
||||||
// id
|
|
||||||
// :
|
|
||||||
// "6aa429cc",
|
|
||||||
// index
|
|
||||||
// :
|
|
||||||
// 9,
|
|
||||||
// label
|
|
||||||
// :
|
|
||||||
// "能带大",
|
|
||||||
// shape
|
|
||||||
// :
|
|
||||||
// "flow-polyline-round",
|
|
||||||
// source
|
|
||||||
// :
|
|
||||||
// "8660695d",
|
|
||||||
// sourceAnchor
|
|
||||||
// :
|
|
||||||
// 3,
|
|
||||||
// target
|
|
||||||
// :
|
|
||||||
// "392ca0b8",
|
|
||||||
// targetAnchor
|
|
||||||
// :
|
|
||||||
// 0,
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// id
|
|
||||||
// :
|
|
||||||
// "02bfc4d0",
|
|
||||||
// index
|
|
||||||
// :
|
|
||||||
// 10,
|
|
||||||
// label
|
|
||||||
// :
|
|
||||||
// "不能代打",
|
|
||||||
// shape
|
|
||||||
// :
|
|
||||||
// "flow-polyline-round",
|
|
||||||
// source
|
|
||||||
// :
|
|
||||||
// "8660695d",
|
|
||||||
// sourceAnchor
|
|
||||||
// :
|
|
||||||
// 1,
|
|
||||||
// target
|
|
||||||
// :
|
|
||||||
// "6bcab22d",
|
|
||||||
// targetAnchor
|
|
||||||
// :
|
|
||||||
// 0
|
|
||||||
// }
|
|
||||||
// ]
|
|
||||||
|
|
||||||
// },
|
|
||||||
// 节点属性表单
|
// 节点属性表单
|
||||||
nodeAttributeForm: {
|
nodeAttributeForm: {
|
||||||
label: "",
|
label: "",
|
||||||
@ -638,7 +303,6 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log( this.phoneNodeContent,' this.phoneNodeContent')
|
|
||||||
this.initG6Editor();
|
this.initG6Editor();
|
||||||
this.getlist();
|
this.getlist();
|
||||||
// this.editor.getCurrentPage().save()
|
// this.editor.getCurrentPage().save()
|
||||||
@ -647,7 +311,6 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
phoneNodeContent(newValue, oldValue) {
|
phoneNodeContent(newValue, oldValue) {
|
||||||
console.log(newValue,'newValue222222222222222222222')
|
|
||||||
this.phoneNodeContent = newValue;
|
this.phoneNodeContent = newValue;
|
||||||
this.getlist();
|
this.getlist();
|
||||||
},
|
},
|
||||||
@ -725,7 +388,6 @@ export default {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
window.flow = flow;
|
window.flow = flow;
|
||||||
|
|
||||||
// 设置边
|
// 设置边
|
||||||
flow.getGraph().edge({
|
flow.getGraph().edge({
|
||||||
shape: "flow-polyline",
|
shape: "flow-polyline",
|
||||||
@ -739,20 +401,35 @@ export default {
|
|||||||
const toolbar = new G6Editor.Toolbar({
|
const toolbar = new G6Editor.Toolbar({
|
||||||
container: "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({
|
// const detailpannel = new G6Editor.Detailpannel({
|
||||||
// container: "detailpannel"
|
// container: "detailpannel"
|
||||||
// });
|
// });
|
||||||
// 缩略图
|
// 缩略图
|
||||||
let minimapWidth = getComputedStyle(
|
// let minimapWidth = getComputedStyle(
|
||||||
document.querySelector(".right-part")
|
// document.querySelector(".right-part")
|
||||||
).width;
|
// ).width;
|
||||||
minimapWidth = Number(minimapWidth.replace(/px$/, ""));
|
// minimapWidth = Number(minimapWidth.replace(/px$/, ""));
|
||||||
const minimap = new G6Editor.Minimap({
|
// const minimap = new G6Editor.Minimap({
|
||||||
container: "minimap",
|
// container: "minimap",
|
||||||
width: minimapWidth,
|
// width: minimapWidth,
|
||||||
height: 200,
|
// height: 200,
|
||||||
});
|
// });
|
||||||
// 右键菜单
|
// 右键菜单
|
||||||
const contextmenu = new G6Editor.Contextmenu({
|
const contextmenu = new G6Editor.Contextmenu({
|
||||||
container: "contextmenu",
|
container: "contextmenu",
|
||||||
@ -762,14 +439,15 @@ export default {
|
|||||||
editor.add(itempannel);
|
editor.add(itempannel);
|
||||||
editor.add(toolbar);
|
editor.add(toolbar);
|
||||||
// editor.add(detailpannel);
|
// editor.add(detailpannel);
|
||||||
editor.add(minimap);
|
// editor.add(minimap);
|
||||||
editor.add(contextmenu);
|
editor.add(contextmenu);
|
||||||
// 挂载到window，方便调试
|
// 挂载到window，方便调试
|
||||||
window.editor = editor;
|
window.editor = editor;
|
||||||
|
|
||||||
// 获取当前画布
|
// 获取当前画布
|
||||||
const currentPage = editor.getCurrentPage();
|
const currentPage = editor.getCurrentPage();
|
||||||
currentPage.on("afterchange", (e) => {
|
currentPage.on("afterchange", (e) => {
|
||||||
|
console.log(currentPage, 'currentPage')
|
||||||
|
|
||||||
if (e.action === "add") {
|
if (e.action === "add") {
|
||||||
if (
|
if (
|
||||||
e.model.nodetype === "startNode" ||
|
e.model.nodetype === "startNode" ||
|
||||||
@ -788,31 +466,31 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// 监听（选择对象后）事件
|
// // 监听（选择对象后）事件
|
||||||
currentPage.on("afteritemselected", (ev) => {
|
// currentPage.on("afteritemselected", (ev) => {
|
||||||
console.log("打印所选对象属性", ev.item);
|
// console.log("打印所选对象属性", ev.item);
|
||||||
console.log("打印所选对象数据模型", ev.item.model);
|
// console.log("打印所选对象数据模型", ev.item.model);
|
||||||
const selectedItemDataModel = ev.item.model;
|
// const selectedItemDataModel = ev.item.model;
|
||||||
// 如果选择的对象是节点
|
// // 如果选择的对象是节点
|
||||||
if (ev.item.isNode) {
|
// if (ev.item.isNode) {
|
||||||
this.nodeAttributeForm.label = selectedItemDataModel.label;
|
// this.nodeAttributeForm.label = selectedItemDataModel.label;
|
||||||
this.nodeAttributeForm.width =
|
// this.nodeAttributeForm.width =
|
||||||
selectedItemDataModel.size.split("*")[0];
|
// selectedItemDataModel.size.split("*")[0];
|
||||||
this.nodeAttributeForm.height =
|
// this.nodeAttributeForm.height =
|
||||||
selectedItemDataModel.size.split("*")[1];
|
// selectedItemDataModel.size.split("*")[1];
|
||||||
this.nodeAttributeForm.color = selectedItemDataModel.color;
|
// this.nodeAttributeForm.color = selectedItemDataModel.color;
|
||||||
}
|
// }
|
||||||
// 如果选择的对象是边
|
// // 如果选择的对象是边
|
||||||
if (ev.item.isEdge) {
|
// if (ev.item.isEdge) {
|
||||||
ev.item.graph.edge({
|
// ev.item.graph.edge({
|
||||||
shape: "flow-polyline-round",
|
// shape: "flow-polyline-round",
|
||||||
});
|
// });
|
||||||
this.edgeAttributeForm.label = selectedItemDataModel.label;
|
// this.edgeAttributeForm.label = selectedItemDataModel.label;
|
||||||
this.edgeAttributeForm.shape = selectedItemDataModel.shape;
|
// this.edgeAttributeForm.shape = selectedItemDataModel.shape;
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
// 监听（删除后）事件
|
// 监听（删除后）事件
|
||||||
currentPage.on("afterdelete", (ev) => {});
|
currentPage.on("afterdelete", (ev) => { });
|
||||||
},
|
},
|
||||||
// 打开保存为图片弹窗
|
// 打开保存为图片弹窗
|
||||||
openSaveAsImageDialog() {
|
openSaveAsImageDialog() {
|
||||||
@ -921,5 +599,14 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<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");
|
@import url("@/views/system/mianview/index.less");
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user