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.
734 lines
27 KiB
Vue
734 lines
27 KiB
Vue
<template>
|
|
<div class="leftPanel">
|
|
<el-tabs v-model="leftPanelState" class="demo-tabs" type="border-card">
|
|
<el-tab-pane label="图表组件" name="1">
|
|
<el-card class="moduleCard" 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>
|
|
<div class="moduleText">折线</div>
|
|
</el-card>
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'multiLines')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
<div class="moduleText">多折线</div>
|
|
</el-card>
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'curve')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
<div class="moduleText">曲线</div>
|
|
</el-card>
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'multiCurves')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
<div class="moduleText">多曲线
|
|
</div>
|
|
</el-card>
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'bar')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
<div class="moduleText">柱状图</div>
|
|
</el-card>
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'multiBars')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
<div class="moduleText">多柱状图
|
|
</div>
|
|
</el-card>
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'pie')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
<div class="moduleText">饼图</div>
|
|
</el-card>
|
|
<template v-for="i in customBoard">
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'customBoard',i)"
|
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
<div class="moduleText">{{ i.name }}</div>
|
|
</el-card>
|
|
</template>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="数据源" name="2">
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'map')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
<div class="moduleText">映射</div>
|
|
</el-card>
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'data')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
<div class="moduleText">设备数据</div>
|
|
</el-card>
|
|
<template v-for="i in customData">
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'customData',i)"
|
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
<div class="moduleText">{{ i.name }}</div>
|
|
</el-card>
|
|
</template>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="表单组件" name="3">
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'text')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
<div class="moduleText">文字</div>
|
|
</el-card>
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'inputNode')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
<div class="moduleText">输入框</div>
|
|
</el-card>
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'time')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
<div class="moduleText">时间</div>
|
|
</el-card>
|
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
|
@dragstart="onDragStart($event, 'img')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
|
:body-style="{padding:'4px 0'}">
|
|
<template #header>
|
|
<StarFilled />
|
|
</template>
|
|
<div class="moduleText">图片</div>
|
|
</el-card>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
<div class="content" @drop="onDrop">
|
|
<div class="pageSetting">
|
|
<span class="pageTitle">{{ pageTitle }}</span>
|
|
<div class="btns">
|
|
<el-button type="primary" text :icon="Setting" @click="pageSetting">页面配置</el-button>
|
|
<el-button type="primary" text :icon="Check" @click="save">保存</el-button>
|
|
<el-button type="primary" text :icon="Close" @click="clear">清空</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="flowArea">
|
|
<VueFlow :min-zoom="0.01" ref="flowRef" v-model:nodes="nodes" v-model:edges="edges" fit-view-on-init
|
|
default-marker-color="#409EFF"
|
|
@connect="logEvent('connect', $event)"
|
|
@node-click="logEvent('click', $event)"
|
|
@pane-click="logEvent('paneClick', $event)"
|
|
@node-drag-start="logEvent('nodeDrag', $event)"
|
|
@node-contextMenu="logEvent('contextmenu', $event)"
|
|
@dragover="onDragOver"
|
|
>
|
|
<Background :size="1" :gap="20" pattern-color="#BDBDBD" style="background-color: #000" />
|
|
|
|
<template #node-area="areaNodeProps">
|
|
<AreaNode v-bind="areaNodeProps" :pageData="pageData"></AreaNode>
|
|
</template>
|
|
<template #node-customBoard="customBoardNodeProps">
|
|
<CustomBoardNode :inputData=getInputData(customBoardNodeProps.id) v-bind="customBoardNodeProps"
|
|
@resize="resize"></CustomBoardNode>
|
|
</template>
|
|
<template #node-customData="customDataNodeProps">
|
|
<CustomDataNode :inputData=getInputData(customDataNodeProps.id) v-bind="customDataNodeProps"
|
|
@resize="resize"></CustomDataNode>
|
|
</template>
|
|
<template #node-line="lineNodeProps">
|
|
<LineNode :inputData=getInputData(lineNodeProps.id) v-bind="lineNodeProps"
|
|
@resize="resize"></LineNode>
|
|
</template>
|
|
<template #node-multiLines="multiLinesNodeProps">
|
|
<MultiLinesNode :inputData=getInputData(multiLinesNodeProps.id) v-bind="multiLinesNodeProps"
|
|
@resize="resize"></MultiLinesNode>
|
|
</template>
|
|
<template #node-curve="curveNodeProps">
|
|
<CurveNode :inputData=getInputData(curveNodeProps.id) v-bind="curveNodeProps"
|
|
@resize="resize"></CurveNode>
|
|
</template>
|
|
<template #node-multiCurves="multiCurvesNodeProps">
|
|
<MultiCurvesNode :inputData=getInputData(multiCurvesNodeProps.id) v-bind="multiCurvesNodeProps"
|
|
@resize="resize"></MultiCurvesNode>
|
|
</template>
|
|
<template #node-bar="barNodeProps">
|
|
<BarNode :inputData=getInputData(barNodeProps.id) v-bind="barNodeProps"
|
|
@resize="resize"></BarNode>
|
|
</template>
|
|
<template #node-multiBars="multiBarsNodeProps">
|
|
<MultiBarsNode :inputData=getInputData(multiBarsNodeProps.id) v-bind="multiBarsNodeProps"
|
|
@resize="resize"></MultiBarsNode>
|
|
</template>
|
|
<template #node-pie="pieNodeProps">
|
|
<PieNode :inputData=getInputData(pieNodeProps.id) v-bind="pieNodeProps"
|
|
@resize="resize"></PieNode>
|
|
</template>
|
|
<template #node-data="dataNodeProps">
|
|
<DataNode :inputData=getInputData(dataNodeProps.id) v-bind="dataNodeProps"
|
|
@resize="resize"></DataNode>
|
|
</template>
|
|
<template #node-text="textNodeProps">
|
|
<TextNode :inputData=getInputData(textNodeProps.id) v-bind="textNodeProps"
|
|
@resize="resize"></TextNode>
|
|
</template>
|
|
<template #node-img="imgNodeProps">
|
|
<ImgNode :inputData=getInputData(imgNodeProps.id) v-bind="imgNodeProps"
|
|
@resize="resize"></ImgNode>
|
|
</template>
|
|
<template #node-inputNode="inputNodeProps">
|
|
<InputNode :inputData=getInputData(inputNodeProps.id) v-bind="inputNodeProps"
|
|
@resize="resize"></InputNode>
|
|
</template>
|
|
<template #node-time="timeNodeProps">
|
|
<TimeNode :inputData=getInputData(timeNodeProps.id) v-bind="timeNodeProps"
|
|
@resize="resize"></TimeNode>
|
|
</template>
|
|
<template #node-map="mapNodeProps">
|
|
<MapNode :inputData=getInputData(mapNodeProps.id) v-bind="mapNodeProps"
|
|
@resize="resize"></MapNode>
|
|
</template>
|
|
</VueFlow>
|
|
</div>
|
|
</div>
|
|
<div class="rightPanel">
|
|
<el-collapse>
|
|
<el-collapse-item title="基础设置" name="1" v-if="Object.keys(nodeDataForm).length>0">
|
|
<el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
|
|
<el-form-item label="x">
|
|
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.x" style="width: 100%"
|
|
@change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
|
|
</el-form-item>
|
|
<el-form-item label="y">
|
|
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.y" style="width: 100%"
|
|
@change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
|
|
</el-form-item>
|
|
<el-form-item label="宽度">
|
|
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.width" style="width: 100%"
|
|
@change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
|
|
</el-form-item>
|
|
<el-form-item label="高度">
|
|
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.height" style="width: 100%"
|
|
@change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="数据配置" name="2" v-if="Object.keys(nodeAttrForm).length>0">
|
|
<el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
|
|
<el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInput')">
|
|
<el-input v-model="nodeAttrForm.defaultInput" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="默认日期" v-if="Object.keys(nodeAttrForm).includes('defaultTime')">
|
|
<el-date-picker
|
|
v-model="nodeAttrForm.defaultTime"
|
|
type="datetimerange"
|
|
range-separator="到"
|
|
start-placeholder="开始时间"
|
|
end-placeholder="结束时间"
|
|
style="width: 100%;height: 100%"
|
|
:value-format="nodeAttrForm?.format||'YYYY/MM/DD HH:mm:ss'"
|
|
:format="nodeAttrForm?.format||'YYYY/MM/DD HH:mm:ss'"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="日期格式" v-if="Object.keys(nodeAttrForm).includes('format')">
|
|
<el-input v-model="nodeAttrForm.format" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="输出字段名" v-if="Object.keys(nodeAttrForm).includes('field')">
|
|
<el-input v-model="nodeAttrForm.field" />
|
|
</el-form-item>
|
|
<el-form-item label="开始时间字段名" v-if="Object.keys(nodeAttrForm).includes('startTimeId')">
|
|
<el-input v-model="nodeAttrForm.startTimeId" />
|
|
</el-form-item>
|
|
<el-form-item label="结束时间字段名" v-if="Object.keys(nodeAttrForm).includes('endTimeId')">
|
|
<el-input v-model="nodeAttrForm.endTimeId" />
|
|
</el-form-item>
|
|
<el-form-item label="数据映射" v-if="Object.keys(nodeAttrForm).includes('dataMap')">
|
|
<el-table :data="nodeAttrForm.dataMap" style="width: 100%">
|
|
<el-table-column label="源字段" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.source" style="width: 100%" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="映射字段" min-width="120">
|
|
<template #default="scope">
|
|
<el-input v-model="scope.row.target" style="width: 100%" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" min-width="120">
|
|
<template #default="scope">
|
|
<el-button link type="primary" size="small" @click="nodeAttrForm.dataMap.splice(scope.$index, 1)">
|
|
删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-button style="width: 100%" @click="nodeAttrForm.dataMap.push({})">
|
|
添加映射
|
|
</el-button>
|
|
</el-form-item>
|
|
<el-form-item label="内容" v-if="Object.keys(nodeAttrForm).includes('text')">
|
|
<el-input v-model="nodeAttrForm.text" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="对齐方式" v-if="Object.keys(nodeAttrForm).includes('align')">
|
|
<el-select
|
|
v-model="nodeAttrForm.align"
|
|
placeholder="Select"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
label="左对齐"
|
|
value="left"
|
|
/>
|
|
<el-option
|
|
label="居中对齐"
|
|
value="center"
|
|
/>
|
|
<el-option
|
|
label="右对齐"
|
|
value="right"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="文字颜色" v-if="Object.keys(nodeAttrForm).includes('color')">
|
|
<el-color-picker v-model="nodeAttrForm.color" show-alpha />
|
|
</el-form-item>
|
|
<el-form-item label="图片路径" v-if="Object.keys(nodeAttrForm).includes('imgSrc')">
|
|
<el-input v-model="nodeAttrForm.imgSrc" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="标题" v-if="Object.keys(nodeAttrForm).includes('title')">
|
|
<el-input v-model="nodeAttrForm.title" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="数据名称" v-if="Object.keys(nodeAttrForm).includes('yNames')">
|
|
<el-input-tag v-model="nodeAttrForm.yNames" placeholder="回车确认" />
|
|
</el-form-item>
|
|
<el-form-item label="超时时间" v-if="Object.keys(nodeAttrForm).includes('timeout')">
|
|
<el-input-number
|
|
v-model="nodeAttrForm.timeout"
|
|
:min="1000"
|
|
:step="1000"
|
|
controls-position="right"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-collapse-item>
|
|
<el-collapse-item title="自定义配置" name="3" v-if="customDataForm">
|
|
<el-form :model="customDataForm" label-width="auto" style="max-width: 600px">
|
|
<el-form-item label="自定义内容" v-if="Object.keys(customDataForm).includes('option')">
|
|
<el-input type="textarea" v-model="customDataForm.option" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="请求地址" v-if="Object.keys(customDataForm).includes('url')">
|
|
<el-input v-model="customDataForm.url">
|
|
<template #prepend>
|
|
<el-select v-model="customDataForm.method" style="width: 100px">
|
|
<el-option label="get" value="get" />
|
|
<el-option label="post" value="post" />
|
|
<el-option label="socket" value="socket" />
|
|
</el-select>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
<el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
|
|
<el-form :model="pageSettingForm">
|
|
<el-form-item label="页面大小" label-width="80px">
|
|
<el-input v-model="pageSettingForm.width" style="width: calc(50% - 10px)" autocomplete="off"
|
|
placeholder="缺省则为不限制" />
|
|
<span style="width: 20px;text-align: center">
|
|
X
|
|
</span>
|
|
<el-input v-model="pageSettingForm.height" style="width: calc(50% - 10px)" autocomplete="off"
|
|
placeholder="缺省则为不限制" />
|
|
</el-form-item>
|
|
<el-form-item label="页面背景" label-width="80px">
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
|
|
:show-file-list="false"
|
|
:limit="1"
|
|
accept=".jpg,.png"
|
|
:before-upload="pageBgUploadSuccess"
|
|
>
|
|
<img v-if="pageSettingForm.bg" :src="pageSettingForm.bg" class="avatar" />
|
|
<el-icon v-else class="avatar-uploader-icon">
|
|
<Plus />
|
|
</el-icon>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="pageSettingVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="setPageData">
|
|
确定
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { v4 as uuidv4 } from 'uuid';
|
|
import { Setting, Check, Close, Plus } from '@element-plus/icons-vue';
|
|
import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core';
|
|
import { Background } from '@vue-flow/background';
|
|
import { StarFilled } from '@element-plus/icons-vue';
|
|
import LineNode from './nodes/board/lineNode.vue';
|
|
import MultiLinesNode from './nodes/board/multiLinesNode.vue';
|
|
import CurveNode from './nodes/board/curveNode.vue';
|
|
import MultiCurvesNode from './nodes/board/multiCurvesNode.vue';
|
|
import BarNode from './nodes/board/barNode.vue';
|
|
import MultiBarsNode from './nodes/board/multiBarsNode.vue';
|
|
import CustomBoardNode from './nodes/board/customBoardNode.vue';
|
|
import PieNode from './nodes/board/pieNode.vue';
|
|
import DataNode from './nodes/data/dataNode.vue';
|
|
import CustomDataNode from './nodes/data/customDataNode.vue';
|
|
import MapNode from './nodes/form/mapNode.vue';
|
|
import InputNode from './nodes/form/inputNode.vue';
|
|
import TimeNode from './nodes/form/timeNode.vue';
|
|
import TextNode from './nodes/form/textNode.vue';
|
|
import ImgNode from './nodes/form/imgNode.vue';
|
|
import AreaNode from './nodes/other/areaNode.vue';
|
|
import tool from './tool';
|
|
|
|
// 获取自定义的方法
|
|
const { onDragStart, onDrop, onDragOver } = tool();
|
|
|
|
|
|
// flow内置方法
|
|
const {
|
|
addEdges,
|
|
updateNode
|
|
} = useVueFlow();
|
|
console.log(updateNode);
|
|
|
|
const pageSettingVisible = ref(false);
|
|
const pageSettingForm = ref({});
|
|
const pageTitle = ref('页面名称');
|
|
const leftPanelState = ref('1');
|
|
const pageData = ref({});
|
|
const nodes = ref([{
|
|
id: `area_${uuidv4().replaceAll('-', '_')}`,
|
|
name: 'area',
|
|
type: 'area',
|
|
position: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
data: {}
|
|
}]);
|
|
const edges = ref([]);
|
|
const customData = ref([]);
|
|
const customBoard = ref([]);
|
|
onMounted(async () => {
|
|
customData.value = JSON.parse(localStorage.getItem('DATANODE') || '[]');
|
|
customBoard.value = JSON.parse(localStorage.getItem('BOARDNODE') || '[]');
|
|
await nextTick();
|
|
nodes.value = reactive(JSON.parse(localStorage.getItem('NODES') || '[]'));
|
|
edges.value = JSON.parse(localStorage.getItem('EDGES') || '[]');
|
|
pageData.value = JSON.parse(localStorage.getItem('PAGEDATA'));
|
|
});
|
|
const customDataForm = ref({});
|
|
const nodeAttrForm = ref({});
|
|
const nodeDataForm = ref({});
|
|
const logEvent = async (eventname, event) => {
|
|
switch (eventname) {
|
|
case 'connect':
|
|
if (!edges.value.some(r => r.id === `${event.source}---${event.target}`)) {
|
|
addEdges({
|
|
id: `${event.source}---${event.target}`,
|
|
source: event.source,
|
|
target: event.target,
|
|
type: 'bezier',
|
|
animated: true,
|
|
markerEnd: MarkerType.ArrowClosed,
|
|
sourceHandle: event.sourceHandle,
|
|
style: { stroke: '#409EFF' }
|
|
});
|
|
}
|
|
break;
|
|
case 'paneClick':
|
|
nodeAttrForm.value = {};
|
|
nodeDataForm.value = {};
|
|
customDataForm.value = {};
|
|
break;
|
|
case 'click':
|
|
nodeAttrForm.value = event.node.data.options;
|
|
nodeDataForm.value = event.node;
|
|
customDataForm.value = event.node.data.customData;
|
|
console.log(event.node.data);
|
|
break;
|
|
case 'nodeDrag':
|
|
if (event.nodes.length === 1) {
|
|
nodeAttrForm.value = event.node.data.options;
|
|
nodeDataForm.value = event.node;
|
|
customDataForm.value = event.node.data.customData;
|
|
} else {
|
|
nodeAttrForm.value = {};
|
|
nodeDataForm.value = {};
|
|
customDataForm.value = {};
|
|
}
|
|
break;
|
|
case 'contextmenu':
|
|
console.log('contextmenu', event);
|
|
}
|
|
};
|
|
const resize = (e, id) => {
|
|
nodes.value.forEach((item) => {
|
|
if (item.selected && item.id !== id) {
|
|
item.dimensions = {
|
|
width: e.params.width,
|
|
height: e.params.height
|
|
};
|
|
}
|
|
});
|
|
};
|
|
const getInputData = (e) => {
|
|
let outputData = {};
|
|
let nodeIds = edges.value.map(v => {
|
|
if (v.target === e) {
|
|
return v.source;
|
|
}
|
|
});
|
|
nodes.value.forEach(v => {
|
|
if (nodeIds.includes(v.id)) {
|
|
outputData = {
|
|
...outputData,
|
|
...v.data.outputData
|
|
};
|
|
}
|
|
});
|
|
return outputData;
|
|
};
|
|
const pageSetting = () => {
|
|
pageSettingVisible.value = true;
|
|
pageSettingForm.value = JSON.parse(localStorage.getItem('PAGEDATA'));
|
|
};
|
|
const save = () => {
|
|
localStorage.setItem('NODES', JSON.stringify(nodes.value.map(e => {
|
|
let data = {};
|
|
let savaField = ['customData', 'options'];
|
|
Object.keys(e.data).forEach((key) => {
|
|
if (savaField.includes(key)) {
|
|
data[key] = e.data[key];
|
|
} else {
|
|
if (Array.isArray(e.data[key])) {
|
|
data[key] = [];
|
|
} else if (e.data[key] && typeof e.data[key] === 'object' && !Array.isArray(e.data[key])) {
|
|
data[key] = {};
|
|
} else {
|
|
data[key] = null;
|
|
}
|
|
|
|
}
|
|
});
|
|
return {
|
|
id: e.id,
|
|
name: e.name,
|
|
dimensions: e.dimensions,
|
|
position: e.position,
|
|
type: e.type,
|
|
data: data
|
|
};
|
|
})));
|
|
localStorage.setItem('EDGES', JSON.stringify(edges.value.map(e => {
|
|
return {
|
|
id: e.id,
|
|
source: e.source,
|
|
target: e.target,
|
|
type: e.type,
|
|
animated: e.animated,
|
|
markerEnd: e.markerEnd,
|
|
targetHandle: e.targetHandle,
|
|
sourceHandle: e.sourceHandle,
|
|
style: e.style
|
|
};
|
|
})));
|
|
};
|
|
const clear = () => {
|
|
nodes.value = [{
|
|
id: `area_${uuidv4().replaceAll('-', '_')}`,
|
|
name: 'area',
|
|
type: 'area',
|
|
position: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
data: {}
|
|
}];
|
|
edges.value = [];
|
|
|
|
};
|
|
const pageBgUploadSuccess = (file) => {
|
|
const getFileText = (file) => {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
const fileContent = e.target.result;
|
|
console.log(fileContent);
|
|
pageSettingForm.value.bg = fileContent;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
};
|
|
getFileText(file);
|
|
return false;
|
|
};
|
|
const setPageData = () => {
|
|
pageData.value = JSON.parse(JSON.stringify(pageSettingForm.value));
|
|
localStorage.setItem('PAGEDATA', JSON.stringify(pageData.value));
|
|
pageSettingVisible.value = false;
|
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
|
:deep(.vue-flow__node-area) {
|
|
z-index: -1 !important;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
:deep(.avatar-uploader) .el-upload {
|
|
border: 1px dashed var(--el-border-color);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--el-transition-duration-fast);
|
|
}
|
|
|
|
:deep(.avatar-uploader) .el-upload:hover {
|
|
border-color: var(--el-color-primary);
|
|
}
|
|
|
|
:deep(.el-icon.avatar-uploader-icon) {
|
|
font-size: 28px;
|
|
color: #8c939d;
|
|
width: 178px;
|
|
height: 178px;
|
|
text-align: center;
|
|
}
|
|
|
|
.moduleCard {
|
|
width: 80px;
|
|
vertical-align: top;
|
|
|
|
:deep(.el-card__body) {
|
|
height: 40px;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.moduleText {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.leftPanel {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 300px;
|
|
height: 100%;
|
|
border-right: 1px solid #409EFF;
|
|
overflow: auto;
|
|
}
|
|
|
|
.content {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 300px;
|
|
width: calc(100% - 300px - 300px);
|
|
height: 100%;
|
|
|
|
.pageSetting {
|
|
width: 100%;
|
|
height: 50px;
|
|
border-bottom: 1px solid #409EFF;
|
|
position: relative;
|
|
|
|
.pageTitle {
|
|
line-height: 50px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.btns {
|
|
position: absolute;
|
|
right: 8px;
|
|
display: inline-block;
|
|
line-height: 50px;
|
|
|
|
button {
|
|
vertical-align: inherit;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.flowArea {
|
|
width: 100%;
|
|
height: calc(100% - 50px);
|
|
}
|
|
}
|
|
|
|
.rightPanel {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 300px;
|
|
height: 100%;
|
|
border-left: 1px solid #409EFF;
|
|
overflow: auto;
|
|
}
|
|
|
|
.avatar {
|
|
width: 384px;
|
|
height: 216px
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.el-notification {
|
|
display: none !important;
|
|
}
|
|
|
|
</style>
|