话术预览修改
This commit is contained in:
shidongli
parent
44428e54ce
commit
1ead0a930e
@ -11,19 +11,6 @@
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<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
|
||||
data-command="save"
|
||||
class="command fa fa-floppy-o"
|
||||
@ -184,20 +171,19 @@
|
||||
</div> -->
|
||||
</el-col>
|
||||
<!-- 画布 -->
|
||||
<el-col :span="20">
|
||||
<el-col :span="24">
|
||||
<div id="page"></div>
|
||||
<el-col :span="24">
|
||||
<div id="page" class="zoomable-div"></div>
|
||||
</el-col>
|
||||
</el-col>
|
||||
<!-- 属性栏 -->
|
||||
<el-col :span="4">
|
||||
<section class="right-part">
|
||||
<!-- 缩略图 -->
|
||||
<!-- <el-col :span="4"> -->
|
||||
<!-- <section class="right-part">
|
||||
<div id="minimap">
|
||||
<div class="title">缩略图</div>
|
||||
</div>
|
||||
</section>
|
||||
</el-col>
|
||||
</section> -->
|
||||
<!-- </el-col> -->
|
||||
</el-row>
|
||||
<!-- 弹窗 -->
|
||||
<article>
|
||||
@ -278,335 +264,14 @@ export default {
|
||||
mixins: [mixin],
|
||||
data() {
|
||||
return {
|
||||
scale: 1, // 初始缩放比例为1
|
||||
zoomFactor: 0.1, // 设置每次鼠标滚轮滚动时的缩放因子
|
||||
form: {
|
||||
scriptInfoId: null,
|
||||
flowScheme: null,
|
||||
nodes: [],
|
||||
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: {
|
||||
label: "",
|
||||
@ -638,7 +303,6 @@ export default {
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log( this.phoneNodeContent,' this.phoneNodeContent')
|
||||
this.initG6Editor();
|
||||
this.getlist();
|
||||
// this.editor.getCurrentPage().save()
|
||||
@ -647,7 +311,6 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
phoneNodeContent(newValue, oldValue) {
|
||||
console.log(newValue,'newValue222222222222222222222')
|
||||
this.phoneNodeContent = newValue;
|
||||
this.getlist();
|
||||
},
|
||||
@ -725,7 +388,6 @@ export default {
|
||||
},
|
||||
});
|
||||
window.flow = flow;
|
||||
|
||||
// 设置边
|
||||
flow.getGraph().edge({
|
||||
shape: "flow-polyline",
|
||||
@ -739,20 +401,35 @@ export default {
|
||||
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,
|
||||
});
|
||||
// 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",
|
||||
@ -762,14 +439,15 @@ export default {
|
||||
editor.add(itempannel);
|
||||
editor.add(toolbar);
|
||||
// editor.add(detailpannel);
|
||||
editor.add(minimap);
|
||||
// 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" ||
|
||||
@ -788,29 +466,29 @@ export default {
|
||||
}
|
||||
}
|
||||
});
|
||||
// 监听（选择对象后）事件
|
||||
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("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) => { });
|
||||
},
|
||||
@ -921,5 +599,14 @@ export default {
|
||||
</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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user