You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.3 KiB
Vue
81 lines
2.3 KiB
Vue
8 months ago
|
<template>
|
||
|
|
<div class="leftPanel">
|
||
|
|
<el-tabs v-model="leftPanelState" class="demo-tabs" type="border-card">
|
||
|
|
<el-tab-pane label="图表组件" name="1">
|
||
|
|
<el-card style="width: 80px" shadow="never" :draggable="true"
|
||
|
|
@dragstart="onDragStart($event, 'line')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||
|
|
:body-style="{padding:'4px 0'}">
|
||
|
|
<template #header>
|
||
|
|
<StarFilled />
|
||
|
|
</template>
|
||
|
|
图表
|
||
|
|
</el-card>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="数据源" name="2">Config</el-tab-pane>
|
||
|
|
<el-tab-pane label="表单组件" name="3">Role</el-tab-pane>
|
||
|
|
<el-tab-pane label="Task" name="4">Task</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</div>
|
||
|
|
<div class="content" @drop="onDrop">
|
||
|
|
<VueFlow :min-zoom="0.01" ref="flowRef" v-model:nodes="nodes" v-model:edges="edges" fit-view-on-init
|
||
|
|
default-marker-color="#409EFF"
|
||
|
|
@node-click="logEvent('click', $event)"
|
||
|
|
@node-contextMenu="logEvent('contextmenu', $event)"
|
||
|
|
@dragover="onDragOver"
|
||
|
|
>
|
||
|
|
<Background :size="1" :gap="20" pattern-color="#BDBDBD" />
|
||
|
|
<template #node-line="lineNodeProps">
|
||
|
|
<LineNdoe v-bind="lineNodeProps"
|
||
|
|
@resize="resize"></LineNdoe>
|
||
|
|
</template>
|
||
|
|
</VueFlow>
|
||
|
|
</div>
|
||
|
|
<div class="rightPanel"></div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { VueFlow, useVueFlow } from '@vue-flow/core';
|
||
|
|
import { Background } from '@vue-flow/background';
|
||
|
|
import { StarFilled } from '@element-plus/icons-vue';
|
||
|
|
import { onDragStart, onDrop, onDragOver } from './tool';
|
||
|
|
|
||
|
|
const leftPanelState = ref('1');
|
||
|
|
const nodes = ref([]);
|
||
|
|
const edges = ref([]);
|
||
|
|
const logEvent = async (eventname, event) => {
|
||
|
|
switch (eventname) {
|
||
|
|
case 'click':
|
||
|
|
console.log('click', event);
|
||
|
|
break;
|
||
|
|
case 'contextmenu':
|
||
|
|
console.log('contextmenu', event);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.leftPanel {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 300px;
|
||
|
|
height: 100%;
|
||
|
|
border-right: 1px solid #409EFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 320px;
|
||
|
|
width: calc(100% - 320px - 320px);
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rightPanel {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
width: 300px;
|
||
|
|
height: 100%;
|
||
|
|
border-left: 1px solid #409EFF;
|
||
|
|
}
|
||
|
|
</style>
|