diff --git a/package.json b/package.json index 02c4f2f..acd8ed3 100644 --- a/package.json +++ b/package.json @@ -36,10 +36,18 @@ "url": "https://gitee.com/y_project/xinelu-Vue.git" }, "dependencies": { + "@antv/g6-editor": "^1.2.0", + "@babel/preset-react": "^7.24.7", + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-brands-svg-icons": "^6.5.2", + "@fortawesome/free-regular-svg-icons": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/vue-fontawesome": "^2.0.10", "@riophae/vue-treeselect": "0.4.0", "@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^1.0.2", "axios": "0.24.0", + "butterfly-dag": "^5.1.0-beta.38", "clipboard": "2.0.8", "core-js": "3.19.1", "echarts": "4.9.0", @@ -50,6 +58,8 @@ "js-beautify": "1.13.0", "js-cookie": "3.0.1", "jsencrypt": "3.0.0-rc.1", + "less": "^4.2.0", + "netflix-conductor-json-tree": "^0.0.4", "nprogress": "0.2.0", "quill": "1.3.7", "screenfull": "5.0.2", @@ -74,6 +84,7 @@ "connect": "3.6.6", "eslint": "7.15.0", "eslint-plugin-vue": "7.2.0", + "less-loader": "^7.3.0", "lint-staged": "10.5.3", "runjs": "4.4.2", "sass": "1.32.13", diff --git a/src/api/system/preview.js b/src/api/system/preview.js new file mode 100644 index 0000000..3e92caf --- /dev/null +++ b/src/api/system/preview.js @@ -0,0 +1,18 @@ +import request from '@/utils/request' + +//新增 +export function insertScriptEdgeNode(data) { + return request({ + url: '/manage/script/updateScriptEdgeNode', + method: 'post', + data: data + }) +} +// 话术列表 +export function selectScriptEdgeNode(id) { + return request({ + url: `/manage/script/selectScriptEdgeNode?id=${id}`, + method: 'get' + }) + } + diff --git a/src/main.js b/src/main.js index a982f9f..28507ec 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,9 @@ import Vue from 'vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' +import { fas } from '@fortawesome/free-solid-svg-icons' +import { far } from '@fortawesome/free-regular-svg-icons' +import { fab } from '@fortawesome/free-brands-svg-icons' import Cookies from 'js-cookie' @@ -38,6 +43,7 @@ import VueMeta from 'vue-meta' // 字典数据组件 import DictData from '@/components/DictData' import echarts from "echarts"; +library.add(fas,far, fab) Vue.prototype.$echarts = echarts; // 全局方法挂载 @@ -52,6 +58,8 @@ Vue.prototype.download = download Vue.prototype.handleTree = handleTree // 全局组件挂载 + +Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.component('DictTag', DictTag) Vue.component('Pagination', Pagination) Vue.component('RightToolbar', RightToolbar) diff --git a/src/views/system/Scriptpreview/index.vue b/src/views/system/Scriptpreview/index.vue new file mode 100644 index 0000000..7302156 --- /dev/null +++ b/src/views/system/Scriptpreview/index.vue @@ -0,0 +1,902 @@ + + + + + \ No newline at end of file diff --git a/src/views/system/mianview/condition-node.svg b/src/views/system/mianview/condition-node.svg new file mode 100644 index 0000000..ef5a078 --- /dev/null +++ b/src/views/system/mianview/condition-node.svg @@ -0,0 +1,17 @@ + + + + + background + + + + + + + Layer 1 + + + 条件节点 + + \ No newline at end of file diff --git a/src/views/system/mianview/end-node.svg b/src/views/system/mianview/end-node.svg new file mode 100644 index 0000000..ddbb35e --- /dev/null +++ b/src/views/system/mianview/end-node.svg @@ -0,0 +1,17 @@ + + + + + background + + + + + + + Layer 1 + + + 结束节点 + + \ No newline at end of file diff --git a/src/views/system/mianview/index.less b/src/views/system/mianview/index.less new file mode 100644 index 0000000..6aa8820 --- /dev/null +++ b/src/views/system/mianview/index.less @@ -0,0 +1,146 @@ +@backgroundColor: #fbfbfb; +@borderColor: #dadce0; + +@itempannelAndPageBorder: 1px solid #ccc; +@pageHeight: calc(100vh - 41px - 37px); + +body { + margin: 0; + overflow: hidden; +} + +#vue-g6-editor { + header:nth-of-type(1) { + background: @backgroundColor; + line-height: 40px; + padding-left: 20px; + border-bottom: 1px solid @borderColor; + box-sizing: border-box; + } + // 工具栏 + #toolbar { + background: @backgroundColor; + border-bottom: 1px solid @borderColor; + padding: 4px 14px; + i { + font-size: 18px; + padding: 4px; + margin-right: 8px; + color: #999999; + &:hover { + cursor: pointer; + background-color: #eeeeee; + color: #5cb6ff; + } + } + } + // 元素面板 + #itempannel { + box-sizing: border-box; + background-color: @backgroundColor; + border-right: 1px solid @borderColor; + height: @pageHeight; + padding-top: 10px; + overflow: hidden; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + align-content: flex-start; + .getItem { + cursor: move; + width: 80px; + height: 80px; + margin-bottom: 20px; + display: flex; + justify-content: center; + align-items: center; + img { + width: 100%; + } + } + } + // 主画布 + #page { + height: @pageHeight; + canvas { + // 去除canvas底部间隙 + display: block; + width: 100%; + } + } + // 右侧部分（属性栏 + 缩略图） + .right-part { + height: @pageHeight; + display: flex; + flex-direction: column; + justify-content: flex-start; + } + // 属性栏 + #detailpannel { + flex-grow: 1; + + background-color: @backgroundColor; + border-left: 1px solid @borderColor; + overflow-y: scroll; + #nodeAttributeBar, + #edgeAttributeBar, + #groupAttributeBar, + #canvasAttributeBar, + #multiAttributeBar { + .title { + height: 34px; + line-height: 34px; + text-align: center; + box-sizing: border-box; + font-weight: bold; + font-size: 13px; + border-width: 0 0 1px 0; + border-style: solid; + border-color: @borderColor; + } + .main { + padding: 10px; + } + } + } + // 缩略图 + #minimap { + background-color: @backgroundColor; + border-top: 1px solid #ccc; + border-left: 1px solid #ccc; + .title { + height: 34px; + line-height: 34px; + text-align: center; + box-sizing: border-box; + font-weight: bold; + font-size: 13px; + border-width: 0 0 1px 0; + border-style: solid; + border-color: @borderColor; + } + } + // 右键菜单 + #contextmenu { + display: none; + .menu { + /deep/ .el-button { + width: 100%; + display: block; + margin-left: 0; + border-radius: 0 !important; + border-bottom: none; + &:nth-last-of-type(1) { + border-bottom: 1px solid #dcdfe6; + } + } + } + } + // 下载图片弹窗 + .save-as-image-dialog { + /deep/ .el-select { + display: block; + } + } +} diff --git a/src/views/system/mianview/logo.png b/src/views/system/mianview/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/src/views/system/mianview/logo.png differ diff --git a/src/views/system/mianview/mixin.js b/src/views/system/mianview/mixin.js new file mode 100644 index 0000000..4590bfe --- /dev/null +++ b/src/views/system/mianview/mixin.js @@ -0,0 +1,39 @@ +export default { + methods: { + // 保存节点属性 + saveNodeAttribute() { + this.editor.executeCommand(() => { + // 获取画布 + const page = this.editor.getCurrentPage(); + // 获取所选对象 + const selectedItem = page.getSelected()[0]; + page.update(selectedItem.id, { + label: this.nodeAttributeForm.label, + size: this.nodeAttributeForm.width + "*" + this.nodeAttributeForm.height, + color: this.nodeAttributeForm.color + }); + }); + }, + // 保存边属性 + saveEdgeAttribute() { + this.editor.executeCommand(() => { + // 获取画布 + const page = this.editor.getCurrentPage(); + // 获取所选对象 + const selectedItem = page.getSelected()[0]; + console.log(this.edgeAttributeForm); + if(this.edgeAttributeForm.keyword){ + this.edgeAttributeForm.label = { + text: this.edgeAttributeForm.label, + fill: 'red' + } + } + page.update(selectedItem.id, { + label: this.edgeAttributeForm.label, + shape: this.edgeAttributeForm.shape, + keyword: this.edgeAttributeForm.keyword + }); + }); + } + } +}; diff --git a/src/views/system/mianview/regular-node.svg b/src/views/system/mianview/regular-node.svg new file mode 100644 index 0000000..5b71b8c --- /dev/null +++ b/src/views/system/mianview/regular-node.svg @@ -0,0 +1,18 @@ + + + + + background + + + + + + + Layer 1 + + + + 常规节点 + + \ No newline at end of file diff --git a/src/views/system/mianview/start-node.svg b/src/views/system/mianview/start-node.svg new file mode 100644 index 0000000..9beeb84 --- /dev/null +++ b/src/views/system/mianview/start-node.svg @@ -0,0 +1,17 @@ + + + + + background + + + + + + + Layer 1 + + + 开始节点 + + \ No newline at end of file diff --git a/src/views/system/preview/index.vue b/src/views/system/preview/index.vue new file mode 100644 index 0000000..276b4b0 --- /dev/null +++ b/src/views/system/preview/index.vue @@ -0,0 +1,889 @@ + + + +