diff --git a/package.json b/package.json
index 0ce7be4..02b340a 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
"dependencies": {
"@element-plus/icons-vue": "2.3.1",
"@highlightjs/vue-plugin": "2.1.0",
+ "@vue-flow/background": "^1.3.2",
+ "@vue-flow/core": "^1.43.1",
"@vueup/vue-quill": "1.2.0",
"@vueuse/core": "10.9.0",
"animate.css": "4.1.1",
diff --git a/src/main.ts b/src/main.ts
index a9390fe..e494a6b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,8 @@ import { createApp, provide } from 'vue';
import 'virtual:uno.css';
import '@/assets/styles/index.scss';
import 'element-plus/theme-chalk/dark/css-vars.css';
+import '@vue-flow/core/dist/style.css'
+import '@vue-flow/core/dist/theme-default.css'
// App、router、store
import App from './App.vue';
diff --git a/src/permission.ts b/src/permission.ts
index f12d1cb..7087520 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -10,7 +10,7 @@ import useSettingsStore from '@/store/modules/settings';
import usePermissionStore from '@/store/modules/permission';
NProgress.configure({ showSpinner: false });
-const whiteList = ['/board1','/board2','/login', '/register', '/social-callback'];
+const whiteList = ['/boardGenerate','/board1','/board2','/login', '/register', '/social-callback'];
router.beforeEach(async (to, from, next) => {
NProgress.start();
diff --git a/src/router/index.ts b/src/router/index.ts
index 8e44459..c5f050c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -26,6 +26,11 @@ import Layout from '@/layout/index.vue';
// 公共路由
export const constantRoutes: RouteRecordRaw[] = [
+ {
+ path: '/boardGenerate',
+ hidden: true,
+ component: () => import('@/views/boardGenerate/index.vue')
+ },
{
path: '/board1',
hidden: true,
diff --git a/src/views/boardGenerate/index.vue b/src/views/boardGenerate/index.vue
new file mode 100644
index 0000000..ad87ba6
--- /dev/null
+++ b/src/views/boardGenerate/index.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
+
+ 图表
+
+
+ Config
+ Role
+ Task
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/boardGenerate/nodes/lineNode.vue b/src/views/boardGenerate/nodes/lineNode.vue
new file mode 100644
index 0000000..fb5f7e0
--- /dev/null
+++ b/src/views/boardGenerate/nodes/lineNode.vue
@@ -0,0 +1,151 @@
+
+
+
+
+
diff --git a/src/views/boardGenerate/tool.js b/src/views/boardGenerate/tool.js
new file mode 100644
index 0000000..e225e1f
--- /dev/null
+++ b/src/views/boardGenerate/tool.js
@@ -0,0 +1,72 @@
+import { useVueFlow } from '@vue-flow/core';
+import { ref, watch } from 'vue';
+import { v4 as uuidv4 } from 'uuid';
+
+const nodeType = ref('');
+const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow();
+
+const getId = (type) => {
+ return `${type}_${uuidv4().replaceAll('-', '_')}`;
+};
+const onDragStart = (event, type) => {
+ if (event.dataTransfer) {
+ event.dataTransfer.setData('application/vueflow', type);
+ event.dataTransfer.effectAllowed = 'move';
+ }
+
+ nodeType.value = type;
+ document.addEventListener('drop', onDragEnd);
+};
+const onDragEnd = () => {
+ nodeType.value = null;
+ document.removeEventListener('drop', onDragEnd);
+};
+
+
+const getOption = (e) => {
+ return {
+ deviceType: e, deviceName: ''
+ };
+};
+
+
+const onDragOver = (event) => {
+ event.preventDefault();
+
+ if (nodeType.value) {
+
+ if (event.dataTransfer) {
+ event.dataTransfer.dropEffect = 'move';
+ }
+ }
+};
+
+const onDrop = (event) => {
+ console.log('onDrop', event);
+ const position = screenToFlowCoordinate({
+ x: event.clientX, y: event.clientY
+ });
+
+ const nodeId = getId(nodeType.value);
+ const newNode = {
+ id: nodeId, name: nodeType.value, type: nodeType.value, dimensions: {
+ width: 100, height: 60
+ }, position, data: { label: nodeId, options: getOption(nodeType.value), deviceData: {} }
+ };
+
+
+ const { off } = onNodesInitialized(() => {
+ updateNode(nodeId, (node) => ({
+ position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 }
+ }));
+
+ off();
+ });
+
+ addNodes(newNode);
+
+};
+
+export {
+ onDragStart, onDragEnd, onDrop, onDragOver
+};
diff --git a/src/views/tool/draggable/demo.vue b/src/views/tool/draggable/demo.vue
index ca48298..a2cf802 100644
--- a/src/views/tool/draggable/demo.vue
+++ b/src/views/tool/draggable/demo.vue
@@ -190,7 +190,7 @@ const aaDel = () => {
const aaAddSubmit = async () => {
let formData = aaOperationForm.value;
let localData = pageData.value;
-
+ console.log(formData);
aaOperationFormVisible.value = false;
};
diff --git a/src/views/tool/draggable/exportConfig/index.js b/src/views/tool/draggable/exportConfig/index.js
index 63abb5d..882f888 100644
--- a/src/views/tool/draggable/exportConfig/index.js
+++ b/src/views/tool/draggable/exportConfig/index.js
@@ -28,7 +28,7 @@ const exportConfig = (e) => {
let codeStr = template + script;
console.log(codeStr);
const blob = new Blob([codeStr], { type: 'text/plain;charset=utf-8' });
- // Download.saveAs(blob, Date.now() + '.vue');
+ Download.saveAs(blob, Date.now() + '.vue');
};