init
suixy
3 days ago
parent
50abab6cb2
commit
716f6797bb
@ -0,0 +1,40 @@
|
|||||||
|
{
|
||||||
|
"name": "scrin-visual-editor",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"license": "MIT",
|
||||||
|
"main": "dist/scrin-visual-editor.umd.js",
|
||||||
|
"module": "dist/scrin-visual-editor.es.js",
|
||||||
|
"style": "dist/style.css",
|
||||||
|
"types": "dist/index.d.ts",
|
||||||
|
"files": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"import": "./dist/scrin-visual-editor.es.js",
|
||||||
|
"require": "./dist/scrin-visual-editor.umd.js"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"build": "vite build",
|
||||||
|
"dev": "vite build --watch"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@vue-flow/background": "^1.3.2",
|
||||||
|
"@vue-flow/core": "^1.48.2",
|
||||||
|
"@vue-flow/node-resizer": "^1.5.1",
|
||||||
|
"uuid": "^11.0.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^6.0.4",
|
||||||
|
"element-plus": "^2.13.3",
|
||||||
|
"less": "^4.5.1",
|
||||||
|
"vite": "^7.3.1",
|
||||||
|
"vue": "^3.5.29"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"element-plus": "^2.13.3",
|
||||||
|
"vue": "^3.3.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1011 B |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1000 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 955 B |
Binary file not shown.
|
After Width: | Height: | Size: 527 B |
Binary file not shown.
|
After Width: | Height: | Size: 527 B |
Binary file not shown.
|
After Width: | Height: | Size: 527 B |
Binary file not shown.
|
After Width: | Height: | Size: 632 B |
Binary file not shown.
|
After Width: | Height: | Size: 632 B |
Binary file not shown.
|
After Width: | Height: | Size: 456 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 635 B |
Binary file not shown.
|
After Width: | Height: | Size: 532 B |
@ -0,0 +1,470 @@
|
|||||||
|
<template>
|
||||||
|
<div class="hw-root">
|
||||||
|
<div class="visual-editor">
|
||||||
|
<div class="visual-editor-top">
|
||||||
|
<div style="display: inline-block;">
|
||||||
|
<el-popover
|
||||||
|
:width="880"
|
||||||
|
trigger="click"
|
||||||
|
placement="bottom-start">
|
||||||
|
<template #reference>
|
||||||
|
<div style="margin-left: 20px;display: inline-block">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="margin-top: 15px;">
|
||||||
|
<path
|
||||||
|
d="M629.333333 160v768h-213.333333v-768h213.333333z m-277.333333 192v576h-213.333333v-576h213.333333z m554.666667 213.333333v362.666667h-213.333334v-362.666667h213.333334z m-341.333334-341.333333h-85.333333v640h85.333333v-640z m-277.333333 192h-85.333333v448h85.333333v-448z m554.666667 213.333333h-85.333334v234.666667h85.333334v-234.666667z"
|
||||||
|
fill="#ddd" p-id="10516"></path>
|
||||||
|
</svg>
|
||||||
|
<el-icon color="#eee" :size="10" style="margin-top: 20px;margin-left: 8px;;vertical-align: top">
|
||||||
|
<component :is="icon.ArrowDown"/>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div style="max-height: 60vh;overflow:auto;">
|
||||||
|
<BoardNodes/>
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
|
<el-popover
|
||||||
|
:width="620"
|
||||||
|
trigger="click"
|
||||||
|
placement="bottom-start">
|
||||||
|
<template #reference>
|
||||||
|
<div style="margin-left: 30px;display: inline-block">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="margin-top: 15px;">
|
||||||
|
<path
|
||||||
|
d="M108.8 224v576C108.8 902.4 313.6 960 512 960s403.2-57.6 403.2-160v-576C915.2 12.8 108.8 12.8 108.8 224z m742.4 390.4c0 32-121.6 96-339.2 96s-339.2-64-339.2-96V518.4C249.6 563.2 384 588.8 512 588.8s262.4-25.6 339.2-70.4v96z m0-300.8v108.8c0 32-121.6 96-339.2 96s-339.2-64-339.2-96V313.6h6.4c6.4 6.4 12.8 12.8 19.2 12.8h6.4c12.8 6.4 19.2 6.4 32 12.8 19.2 12.8 32 12.8 44.8 19.2 70.4 19.2 147.2 25.6 230.4 25.6s160-6.4 230.4-25.6c12.8-6.4 25.6-6.4 38.4-12.8 12.8-6.4 25.6-6.4 32-12.8h6.4c12.8-6.4 19.2-12.8 32-19.2-6.4 0 0 0 0 0zM512 128c217.6 0 339.2 64 339.2 96S729.6 320 512 320 172.8 256 172.8 224 294.4 128 512 128z m0 768c-217.6 0-339.2-64-339.2-96V704c76.8 44.8 211.2 70.4 339.2 70.4s262.4-25.6 339.2-70.4v89.6c0 38.4-121.6 102.4-339.2 102.4z"
|
||||||
|
fill="#ddd" p-id="22021"></path>
|
||||||
|
</svg>
|
||||||
|
<el-icon color="#eee" :size="10" style="margin-top: 20px;margin-left: 8px;;vertical-align: top">
|
||||||
|
<component :is="icon.ArrowDown"/>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div style="max-height: 60vh;overflow:auto;">
|
||||||
|
<CustomData/>
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
|
<el-popover
|
||||||
|
:width="620"
|
||||||
|
trigger="click"
|
||||||
|
placement="bottom-start"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<div style="margin-left: 30px;display: inline-block">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="margin-top: 15px;">
|
||||||
|
<path
|
||||||
|
d="M959.825022 384.002258V191.939717C959.825022 121.2479 902.517291 63.940169 831.825474 63.940169H191.939717C121.2479 63.940169 63.940169 121.2479 63.940169 191.939717v639.885757C63.940169 902.517291 121.2479 959.825022 191.939717 959.825022h639.885757c70.691817 0 127.999548-57.307731 127.999548-127.999548V384.002258zM146.66502 146.66502a63.737872 63.737872 0 0 1 45.336109-18.784682h639.997742A63.961844 63.961844 0 0 1 895.884854 192.001129V320.062089H127.880338V192.001129A63.737872 63.737872 0 0 1 146.66502 146.66502z m269.1267 461.308451v-223.971213h192.181751v223.971213h-192.181751z m192.181751 63.940169v223.971214h-192.181751v-223.971214h192.181751z m-256.12192-63.940169H127.880338v-223.971213h223.971213v223.971213z m-205.186531 269.235073a63.466939 63.466939 0 0 1-18.784682-45.209673V671.91364h223.971213v223.971214H192.001129a63.625887 63.625887 0 0 1-45.336109-18.67631z m749.219834-45.209673A63.763159 63.763159 0 0 1 831.998871 895.884854H671.91364v-223.971214h223.971214v160.085231z m0-224.0254h-223.971214v-223.971213h223.971214v223.971213z"
|
||||||
|
fill="#ddd" p-id="23072"></path>
|
||||||
|
</svg>
|
||||||
|
<el-icon color="#eee" :size="10" style="margin-top: 20px;margin-left: 8px;;vertical-align: top">
|
||||||
|
<component :is="icon.ArrowDown"/>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div style="max-height: 60vh;overflow:auto;">
|
||||||
|
<FormNodes/>
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
|
<el-popover
|
||||||
|
:width="620"
|
||||||
|
trigger="click"
|
||||||
|
placement="bottom-start"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<div style="margin-left: 30px;display: inline-block;vertical-align: top">
|
||||||
|
<el-icon color="#fff" style="margin-top: 15px;">
|
||||||
|
<component :is="icon.Opportunity"/>
|
||||||
|
</el-icon>
|
||||||
|
<el-icon color="#eee" :size="10" style="margin-top: 20px;margin-left: 8px;;vertical-align: top">
|
||||||
|
<component :is="icon.ArrowDown"/>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div style="max-height: 60vh;overflow:auto;">
|
||||||
|
<OtherNodes :icons="icon"/>
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
|
</div>
|
||||||
|
<div class="options-menu">
|
||||||
|
<el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top"
|
||||||
|
@click="pageSetting">
|
||||||
|
<component :is="icon.Setting"/>
|
||||||
|
</el-icon>
|
||||||
|
<el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top" @click="save">
|
||||||
|
<component :is="icon.DocumentChecked"/>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="visual-editor-left">
|
||||||
|
<div class="title">
|
||||||
|
图层
|
||||||
|
</div>
|
||||||
|
<div class="levels">
|
||||||
|
<el-dropdown
|
||||||
|
style="min-width: 100%;display: inline-block"
|
||||||
|
v-for="i in nodes.filter(e => e.type !== 'area').reverse()"
|
||||||
|
:key="i.id"
|
||||||
|
trigger="contextmenu"
|
||||||
|
@command="nodeOperate">
|
||||||
|
<div class="level" :class="{isSelect: i.selected}" @contextmenu.prevent @click="pitchOnNode(i)">
|
||||||
|
<div class="isLock">
|
||||||
|
<el-icon style="cursor: pointer" color="#fff" :size="16" @click="i.draggable = !i.draggable">
|
||||||
|
<Unlock v-if="i.draggable"/>
|
||||||
|
<Lock v-if="!i.draggable"/>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
<div class="icon">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="16" height="16" style="margin-left: 10px;">
|
||||||
|
<path
|
||||||
|
d="M629.333333 160v768h-213.333333v-768h213.333333z m-277.333333 192v576h-213.333333v-576h213.333333z m554.666667 213.333333v362.666667h-213.333334v-362.666667h213.333334z m-341.333334-341.333333h-85.333333v640h85.333333v-640z m-277.333333 192h-85.333333v448h85.333333v-448z m554.666667 213.333333h-85.333334v234.666667h85.333334v-234.666667z"
|
||||||
|
fill="#ddd"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="boardName">
|
||||||
|
<span style="display: inline-block;">{{ i.name }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item :command="{ type: 'toTop', node: i }">置顶</el-dropdown-item>
|
||||||
|
<el-dropdown-item :command="{ type: 'toBottom', node: i }">置底</el-dropdown-item>
|
||||||
|
<el-dropdown-item :command="{ type: 'moveUp', node: i }">上移一层</el-dropdown-item>
|
||||||
|
<el-dropdown-item :command="{ type: 'moveDown', node: i }">下移一层</el-dropdown-item>
|
||||||
|
<el-dropdown-item :command="{ type: 'copy', node: i }">复制</el-dropdown-item>
|
||||||
|
<el-dropdown-item :command="{ type: 'del', node: i }">删除</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="visual-editor-center" @drop="onDrop" v-loading="loading">
|
||||||
|
<FlowRuler>
|
||||||
|
<VueFlow
|
||||||
|
id="flowA"
|
||||||
|
:min-zoom="0.01"
|
||||||
|
ref="flowRef"
|
||||||
|
:snapToGrid="isSnapToGrid"
|
||||||
|
:snapGrid="[10, 10]"
|
||||||
|
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="props">
|
||||||
|
<AreaNode v-bind="props" :pageData="pageData" @resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-customBoard="props">
|
||||||
|
<CustomBoardNode v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-customData="props">
|
||||||
|
<CustomDataNode v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-line="props">
|
||||||
|
<LineNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-multiLines="props">
|
||||||
|
<MultiLinesNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-curve="props">
|
||||||
|
<CurveNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-multiCurves="props">
|
||||||
|
<MultiCurvesNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-lineBar="props">
|
||||||
|
<LineBarNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-bar="props">
|
||||||
|
<BarNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-backgroundBar="props">
|
||||||
|
<BackgroundBarNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-multiBars="props">
|
||||||
|
<MultiBarsNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-pie="props">
|
||||||
|
<PieNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-annular="props">
|
||||||
|
<AnnularNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-radar="props">
|
||||||
|
<RadarNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-dashboard="props">
|
||||||
|
<DashboardNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-props="props">
|
||||||
|
<NightingaleRoseDiagramNode :colors="pageSettingForm.colors" v-bind="props"
|
||||||
|
:inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-carousel="props">
|
||||||
|
<CarouselNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-data="props">
|
||||||
|
<DataNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-text="props">
|
||||||
|
<TextNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-img="imgNodeProps">
|
||||||
|
<ImgNode :colors="pageSettingForm.colors" v-bind="imgNodeProps" :inputData="getInputData(imgNodeProps.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, imgNodeProps)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-icon="iconNodeProps">
|
||||||
|
<IconNode :colors="pageSettingForm.colors" v-bind="iconNodeProps"
|
||||||
|
:inputData="getInputData(iconNodeProps.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, iconNodeProps)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-video="videoNodeProps">
|
||||||
|
<VideoNode :colors="pageSettingForm.colors" v-bind="videoNodeProps"
|
||||||
|
:inputData="getInputData(videoNodeProps.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, videoNodeProps)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-timeline="timelineNodeProps">
|
||||||
|
<TimelineNode :colors="pageSettingForm.colors" v-bind="timelineNodeProps"
|
||||||
|
:inputData="getInputData(timelineNodeProps.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, timelineNodeProps)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-digitalFlop="digitalFlopNodeProps">
|
||||||
|
<DigitalFlopNode :colors="pageSettingForm.colors" v-bind="digitalFlopNodeProps"
|
||||||
|
:inputData="getInputData(digitalFlopNodeProps.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, digitalFlopNodeProps)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-inputNode="inputNodeProps">
|
||||||
|
<InputNode :colors="pageSettingForm.colors" v-bind="inputNodeProps"
|
||||||
|
:inputData="getInputData(inputNodeProps.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, inputNodeProps)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-buttonNode="buttonNodeProps">
|
||||||
|
<ButtonNode :colors="pageSettingForm.colors" v-bind="buttonNodeProps"
|
||||||
|
:inputData="getInputData(buttonNodeProps.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, buttonNodeProps)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-selectNode="selectNodeProps">
|
||||||
|
<SelectNode :colors="pageSettingForm.colors" v-bind="selectNodeProps"
|
||||||
|
:inputData="getInputData(selectNodeProps.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, selectNodeProps)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-time="props">
|
||||||
|
<TimeNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-map="mapNodeProps">
|
||||||
|
<MapNode :colors="pageSettingForm.colors" v-bind="mapNodeProps" :inputData="getInputData(mapNodeProps.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, mapNodeProps)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-staticData="staticDataNodeProps">
|
||||||
|
<StaticDataNode :colors="pageSettingForm.colors" v-bind="staticDataNodeProps"
|
||||||
|
:inputData="getInputData(staticDataNodeProps.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, staticDataNodeProps)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-table="tableNodeProps">
|
||||||
|
<TableNode :colors="pageSettingForm.colors" v-bind="tableNodeProps"
|
||||||
|
:inputData="getInputData(tableNodeProps.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, tableNodeProps)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-scrollTable="scrollTableNodeProps">
|
||||||
|
<ScrollTableNode :colors="pageSettingForm.colors" v-bind="scrollTableNodeProps"
|
||||||
|
:inputData="getInputData(scrollTableNodeProps.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, scrollTableNodeProps)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-background="backgroundNodeProps">
|
||||||
|
<BackgroundNode :colors="pageSettingForm.colors" v-bind="backgroundNodeProps"
|
||||||
|
:inputData="getInputData(backgroundNodeProps.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, backgroundNodeProps)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-pagination="paginationNodeProps">
|
||||||
|
<PaginationNode :colors="pageSettingForm.colors" v-bind="paginationNodeProps"
|
||||||
|
:inputData="getInputData(paginationNodeProps.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, paginationNodeProps)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-menu="props">
|
||||||
|
<MenuNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #node-tree="props">
|
||||||
|
<TreeNode :colors="pageSettingForm.colors" v-bind="props" :inputData="getInputData(props.id)"
|
||||||
|
@resize="(e) => handleResizeStop(e, props)"/>
|
||||||
|
</template>
|
||||||
|
</VueFlow>
|
||||||
|
</FlowRuler>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import {MarkerType, useVueFlow, VueFlow} from '@vue-flow/core';
|
||||||
|
import tool from '../../util/tool.js';
|
||||||
|
import {Background} from '@vue-flow/background';
|
||||||
|
import * as icon from '@element-plus/icons-vue';
|
||||||
|
import BoardNodes from '../inside/boardNodes/index.vue'
|
||||||
|
import CustomData from '../inside/customData/index.vue'
|
||||||
|
import FormNodes from '../inside/formNodes/index.vue'
|
||||||
|
import OtherNodes from '../inside/otherNodes/index.vue'
|
||||||
|
import FlowRuler from '../inside/FlowRuler.vue'
|
||||||
|
|
||||||
|
const nodes = ref([])
|
||||||
|
const {onDragStart, onDrop, onDragOver} = tool();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.hw-root {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 80vh;
|
||||||
|
--visual-editor-top-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-editor {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.visual-editor-top {
|
||||||
|
width: 100%;
|
||||||
|
height: var(--visual-editor-top-height);
|
||||||
|
background-color: #1C1F20;
|
||||||
|
border-bottom: 1px solid #000;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.options-menu {
|
||||||
|
vertical-align: top;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-editor-left {
|
||||||
|
width: 200px;
|
||||||
|
height: calc(100% - var(--visual-editor-top-height));
|
||||||
|
display: inline-block;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: #1C1F20;
|
||||||
|
border-right: 1px solid #000;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFF;
|
||||||
|
background-color: #293133;
|
||||||
|
border-bottom: 1px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.levels {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
overflow: auto;
|
||||||
|
background-color: #1C1F20;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 50px;
|
||||||
|
padding-left: 20px;
|
||||||
|
border-bottom: 1px solid #000;
|
||||||
|
|
||||||
|
.icon, .boardName {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 40px;
|
||||||
|
min-width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boardName {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.isSelect {
|
||||||
|
background-color: #494949;
|
||||||
|
|
||||||
|
.isShow {
|
||||||
|
border-right: 1px solid #373737;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.visual-editor-center {
|
||||||
|
width: calc(100% - 500px);
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #1C1F20;
|
||||||
|
height: calc(100vh - var(--visual-editor-top-height));
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,158 @@
|
|||||||
|
<template>
|
||||||
|
<div class="hw-flow-ruler-container">
|
||||||
|
<div class="hw-flow-ruler-x">
|
||||||
|
<canvas ref="rulerXCanvas" class="hw-flow-ruler-canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="hw-flow-ruler-main-content">
|
||||||
|
<div class="hw-flow-ruler-y">
|
||||||
|
<canvas ref="rulerYCanvas" class="hw-flow-ruler-canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
<slot/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {ref, onMounted} from 'vue';
|
||||||
|
import {useVueFlow} from '@vue-flow/core';
|
||||||
|
|
||||||
|
const rulerXCanvas = ref(null);
|
||||||
|
const rulerYCanvas = ref(null);
|
||||||
|
const {viewport} = useVueFlow();
|
||||||
|
|
||||||
|
let animationFrameId = null;
|
||||||
|
let lastRenderTime = 0;
|
||||||
|
const FRAME_INTERVAL = 1000 / 60;
|
||||||
|
|
||||||
|
const getNiceStep = (target) => {
|
||||||
|
const steps = [1, 2, 5, 10, 20, 25, 50, 100, 200, 500, 1000];
|
||||||
|
return steps.find(s => s * viewport.value.zoom >= target) || 1000;
|
||||||
|
};
|
||||||
|
|
||||||
|
const drawRulers = () => {
|
||||||
|
const scale = viewport.value.zoom;
|
||||||
|
const offsetX = viewport.value.x;
|
||||||
|
const offsetY = viewport.value.y;
|
||||||
|
|
||||||
|
const step = getNiceStep(10);
|
||||||
|
const bigStep = step * 10;
|
||||||
|
const leftOffset = 30;
|
||||||
|
const rulerSize = 30;
|
||||||
|
|
||||||
|
const xCanvas = rulerXCanvas.value;
|
||||||
|
const xCtx = xCanvas.getContext('2d');
|
||||||
|
xCanvas.width = xCanvas.offsetWidth * window.devicePixelRatio;
|
||||||
|
xCanvas.height = xCanvas.offsetHeight * window.devicePixelRatio;
|
||||||
|
xCtx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||||||
|
xCtx.clearRect(0, 0, xCanvas.offsetWidth, xCanvas.offsetHeight);
|
||||||
|
|
||||||
|
xCtx.fillStyle = '#999';
|
||||||
|
xCtx.font = '10px sans-serif';
|
||||||
|
|
||||||
|
const canvasWidth = xCanvas.offsetWidth;
|
||||||
|
const startWorldX = Math.floor((-offsetX - leftOffset) / scale / step) * step;
|
||||||
|
const endWorldX = (-offsetX + canvasWidth) / scale;
|
||||||
|
|
||||||
|
for (let worldX = startWorldX; worldX < endWorldX; worldX += step) {
|
||||||
|
const screenX = worldX * scale + offsetX + leftOffset;
|
||||||
|
xCtx.beginPath();
|
||||||
|
if (Math.round(worldX) % bigStep === 0) {
|
||||||
|
xCtx.strokeStyle = '#fff';
|
||||||
|
xCtx.moveTo(screenX, rulerSize - 20);
|
||||||
|
xCtx.lineTo(screenX, rulerSize);
|
||||||
|
xCtx.stroke();
|
||||||
|
xCtx.fillStyle = '#ccc';
|
||||||
|
xCtx.fillText(Math.round(worldX).toString(), screenX + 2, 10);
|
||||||
|
} else {
|
||||||
|
xCtx.strokeStyle = '#666';
|
||||||
|
xCtx.moveTo(screenX, rulerSize - 10);
|
||||||
|
xCtx.lineTo(screenX, rulerSize);
|
||||||
|
xCtx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const yCanvas = rulerYCanvas.value;
|
||||||
|
const yCtx = yCanvas.getContext('2d');
|
||||||
|
yCanvas.width = yCanvas.offsetWidth * window.devicePixelRatio;
|
||||||
|
yCanvas.height = yCanvas.offsetHeight * window.devicePixelRatio;
|
||||||
|
yCtx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||||||
|
yCtx.clearRect(0, 0, yCanvas.offsetWidth, yCanvas.offsetHeight);
|
||||||
|
|
||||||
|
yCtx.fillStyle = '#999';
|
||||||
|
yCtx.font = '10px sans-serif';
|
||||||
|
|
||||||
|
const canvasHeight = yCanvas.offsetHeight;
|
||||||
|
const startWorldY = Math.floor((-offsetY) / scale / step) * step;
|
||||||
|
const endWorldY = (-offsetY + canvasHeight) / scale;
|
||||||
|
|
||||||
|
for (let worldY = startWorldY; worldY < endWorldY; worldY += step) {
|
||||||
|
const screenY = worldY * scale + offsetY;
|
||||||
|
yCtx.beginPath();
|
||||||
|
if (Math.round(worldY) % bigStep === 0) {
|
||||||
|
yCtx.strokeStyle = '#fff';
|
||||||
|
yCtx.save();
|
||||||
|
yCtx.translate(rulerSize - 2, screenY + 5);
|
||||||
|
yCtx.rotate(-Math.PI / 2);
|
||||||
|
yCtx.fillStyle = '#ccc';
|
||||||
|
yCtx.fillText(Math.round(worldY).toString(), 0, 0);
|
||||||
|
yCtx.restore();
|
||||||
|
|
||||||
|
yCtx.moveTo(rulerSize - 20, screenY);
|
||||||
|
yCtx.lineTo(rulerSize, screenY);
|
||||||
|
yCtx.stroke();
|
||||||
|
} else {
|
||||||
|
yCtx.strokeStyle = '#666';
|
||||||
|
yCtx.moveTo(rulerSize - 10, screenY);
|
||||||
|
yCtx.lineTo(rulerSize, screenY);
|
||||||
|
yCtx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderLoop = (time) => {
|
||||||
|
if (time - lastRenderTime >= FRAME_INTERVAL) {
|
||||||
|
drawRulers();
|
||||||
|
lastRenderTime = time;
|
||||||
|
}
|
||||||
|
animationFrameId = requestAnimationFrame(renderLoop);
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
animationFrameId = requestAnimationFrame(renderLoop);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.hw-flow-ruler-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hw-flow-ruler-x {
|
||||||
|
height: 30px;
|
||||||
|
background: #1F2122;
|
||||||
|
border-bottom: 1px solid #444;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hw-flow-ruler-y {
|
||||||
|
width: 30px;
|
||||||
|
background: #1F2122;
|
||||||
|
border-right: 1px solid #444;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hw-flow-ruler-main-content {
|
||||||
|
display: flex;
|
||||||
|
height: calc(100% - 30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hw-flow-ruler-canvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,177 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="lineImg" fit="contain"/>
|
||||||
|
</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>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="multiLinesImg" fit="contain"/>
|
||||||
|
</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>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="curveImg" fit="contain"/>
|
||||||
|
</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>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="multiCurvesImg" fit="contain"/>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">多曲线
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'lineBar')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="lineBarImg" fit="contain"/>
|
||||||
|
</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>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="barImg" fit="contain"/>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">柱状图</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'backgroundBar')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="backgroundBarImg" fit="contain"/>
|
||||||
|
</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>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="multiBarsImg" fit="contain"/>
|
||||||
|
</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>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="pieImg" fit="contain"/>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">饼图</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'annular')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="annularImg" fit="contain"/>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">中空饼图</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'dashboard')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="dashboardImg" fit="contain"/>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">仪表盘</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'radar')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="radarImg" fit="contain"/>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">雷达图</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'nightingaleRoseDiagram')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="nightingaleRoseDiagramImg" fit="contain"/>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">南丁格尔玫瑰图</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'carousel')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="carouselImg" fit="contain"/>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">轮播图</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import backgroundBarImg from '../../../assets/images/boardNodes/backgroundBarImg.png';
|
||||||
|
import pieImg from '../../../assets/images/boardNodes/pieImg.png';
|
||||||
|
import multiCurvesImg from '../../../assets/images/boardNodes/multiCurvesImg.png';
|
||||||
|
import lineBarImg from '../../../assets/images/boardNodes/lineBarImg.png';
|
||||||
|
import multiLinesImg from '../../../assets/images/boardNodes/multiLinesImg.png';
|
||||||
|
import multiBarsImg from '../../../assets/images/boardNodes/multiBarsImg.png';
|
||||||
|
import annularImg from '../../../assets/images/boardNodes/annularImg.png';
|
||||||
|
import radarImg from '../../../assets/images/boardNodes/radarImg.png';
|
||||||
|
import carouselImg from '../../../assets/images/boardNodes/carouselImg.png';
|
||||||
|
import nightingaleRoseDiagramImg from '../../../assets/images/boardNodes/nightingaleRoseDiagramImg.png';
|
||||||
|
import curveImg from '../../../assets/images/boardNodes/curveImg.png';
|
||||||
|
import dashboardImg from '../../../assets/images/boardNodes/dashboardImg.png';
|
||||||
|
import lineImg from '../../../assets/images/boardNodes/lineImg.png';
|
||||||
|
import barImg from '../../../assets/images/boardNodes/barImg.png';
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
onDragStart: Function
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.moduleCard {
|
||||||
|
width: 100px;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
:deep(.el-card__body) {
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-card__header) {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
<div style="width: 100%;height: 100px;text-align: center">
|
||||||
|
|
||||||
|
<el-image style="width:80px;height: 80px;margin-top: 10px;" :src="mapImg" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">映射</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'staticData')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="customizationRequestImg" fit="contain"/>
|
||||||
|
</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>
|
||||||
|
<el-image style="width: 100%; height: 100%" :src="network" fit="contain"/>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">{{ i.name }}</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import customizationRequestImg from '@/assets/images/customData/customizationRequestImg.png';
|
||||||
|
import mapImg from '@/assets/images/customData/mapImg.png';
|
||||||
|
import network from '@/assets/images/customData/network.png';
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
onDragStart: Function
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
.moduleCard {
|
||||||
|
width: 100px;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
:deep(.el-card__body) {
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-card__header) {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,213 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<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>
|
||||||
|
<div style="width: 100%;height: 100%;text-align: center">
|
||||||
|
|
||||||
|
<el-image style="width:50px;height: 50px;text-align: center" :src="textImg" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">文字</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'buttonNode')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<div style="width: 100%;height: 100%;text-align: center">
|
||||||
|
|
||||||
|
<el-image style="width:50px;height: 50px;text-align: center" :src="inputNodeImg" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<div style="width: 100%;height: 100%;text-align: center">
|
||||||
|
|
||||||
|
<el-image style="width:50px;height: 50px;text-align: center" :src="inputNodeImg2" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">输入框</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'selectNode')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<div style="width: 100%;height: 100%;text-align: center">
|
||||||
|
|
||||||
|
<el-image style="width:50px;height: 50px;text-align: center" :src="inputNodeImg3" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<div style="width: 100%;height: 100%;text-align: center">
|
||||||
|
|
||||||
|
<el-image style="width:50px;height: 50px;text-align: center" :src="timeImg" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<div style="width: 100%;height: 100%;text-align: center">
|
||||||
|
|
||||||
|
<el-image style="width:50px;height: 50px;text-align: center" :src="imgImg" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">图片</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'icon')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<div style="width: 100%;height: 100%;text-align: center">
|
||||||
|
|
||||||
|
<el-image style="width:50px;height: 50px;text-align: center" :src="iconImg" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">图标</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'video')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<div style="width: 100%;height: 100%;text-align: center">
|
||||||
|
|
||||||
|
<el-image style="width:50px;height: 50px;text-align: center" :src="videoImg" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">视频</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'timeline')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<div style="width: 100%;height: 100%;text-align: center">
|
||||||
|
|
||||||
|
<el-image style="width:50px;height: 50px;text-align: center" :src="timelineImg" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">时间线</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'digitalFlop')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<div style="width: 100%;height: 100%;text-align: center">
|
||||||
|
|
||||||
|
<el-image style="width:50px;height: 50px;text-align: center" :src="digitalFlopImg" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">数字翻牌器</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'table')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<div style="width: 100%;height: 100%;text-align: center">
|
||||||
|
<el-image style="width:50px;height: 50px;text-align: center" :src="scrollTableImg" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">普通表格</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'scrollTable')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<div style="width: 100%;height: 100%;text-align: center">
|
||||||
|
<el-image style="width:50px;height: 50px;text-align: center" :src="scrollTableImg2" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">滚动表格</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'background')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<div style="width: 100%;height: 100%;text-align: center">
|
||||||
|
|
||||||
|
<el-image style="width:50px;height: 50px;text-align: center" :src="backgroundImg" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">背景</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'pagination')"
|
||||||
|
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<div style="width: 100%;height: 100%;text-align: center">
|
||||||
|
|
||||||
|
<el-image style="width:50px;height: 50px;text-align: center" :src="backgroundImg" fit="contain"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">分页</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import backgroundImg from '@/assets/images/formNodes/backgroundImg.png';
|
||||||
|
import digitalFlopImg from '@/assets/images/formNodes/digitalFlopImg.png';
|
||||||
|
import iconImg from '@/assets/images/formNodes/iconImg.png';
|
||||||
|
import imgImg from '@/assets/images/formNodes/imgImg.png';
|
||||||
|
import inputNodeImg from '@/assets/images/formNodes/inputNodeImg.png';
|
||||||
|
import inputNodeImg2 from '@/assets/images/formNodes/inputNodeImg2.png';
|
||||||
|
import inputNodeImg3 from '@/assets/images/formNodes/inputNodeImg3.png';
|
||||||
|
import scrollTableImg from '@/assets/images/formNodes/scrollTableImg.png';
|
||||||
|
import scrollTableImg2 from '@/assets/images/formNodes/scrollTableImg2.png';
|
||||||
|
import textImg from '@/assets/images/formNodes/textImg.png';
|
||||||
|
import timeImg from '@/assets/images/formNodes/timeImg.png';
|
||||||
|
import timelineImg from '@/assets/images/formNodes/timelineImg.png';
|
||||||
|
import videoImg from '@/assets/images/formNodes/videoImg.png';
|
||||||
|
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
onDragStart: Function
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
.moduleCard {
|
||||||
|
width: 100px;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
:deep(.el-card__body) {
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-card__header) {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'menu')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<div style="width: 100%;height: 50px;line-height:50px;text-align: center">
|
||||||
|
<el-icon>
|
||||||
|
<component :is="icons.Menu"/>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">菜单</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="moduleCard" shadow="never" :draggable="true"
|
||||||
|
@dragstart="onDragStart($event, 'tree')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
|
||||||
|
:body-style="{padding:'4px 0'}">
|
||||||
|
<template #header>
|
||||||
|
<div style="width: 100%;height: 50px;display: flex; justify-content: center; align-items: center;">
|
||||||
|
<svg t="1768964556223" viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" p-id="4878" width="30" height="30">
|
||||||
|
<path
|
||||||
|
d="M554.666667 682.666667h85.333333v128h-213.333333v-128h85.333333v-128H256v128h85.333333v128H128v-128h85.333333v-170.666667h298.666667V384h-85.333333V256h213.333333v128h-85.333333v128h298.666666v170.666667h85.333334v128h-213.333334v-128h85.333334v-128h-256v128z m42.666666-384h-128v42.666666h128V298.666667zM298.666667 725.333333H170.666667v42.666667h128v-42.666667z m597.333333 0h-128v42.666667h128v-42.666667z m-298.666667 0h-128v42.666667h128v-42.666667z"
|
||||||
|
fill="#444444" p-id="4879"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="moduleText">树状图</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
icons: Object,
|
||||||
|
onDragStart: Function
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
|
||||||
|
|
||||||
|
.moduleCard {
|
||||||
|
width: 100px;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
:deep(.el-card__body) {
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-card__header) {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
import VisualEditor from './components/external/VisualEditor.vue'
|
||||||
|
|
||||||
|
export { VisualEditor }
|
||||||
|
|
||||||
|
export default {
|
||||||
|
install(app) {
|
||||||
|
app.component('VisualEditor', VisualEditor)
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,515 @@
|
|||||||
|
import {useVueFlow} from '@vue-flow/core';
|
||||||
|
import {ref,} from 'vue';
|
||||||
|
import {v4 as uuidv4} from 'uuid';
|
||||||
|
|
||||||
|
|
||||||
|
const getId = (type) => {
|
||||||
|
return `${type}_${uuidv4().replaceAll('-', '_')}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const optionList = (e) => {
|
||||||
|
const normalOption = {
|
||||||
|
title: '', boundaryGap: true,
|
||||||
|
}
|
||||||
|
const chartOption = {
|
||||||
|
gridTop: 30,
|
||||||
|
gridLeft: 5,
|
||||||
|
gridBottom: 10,
|
||||||
|
gridRight: 10,
|
||||||
|
xName: '',
|
||||||
|
xNameLocation: 'end',
|
||||||
|
xAxisLineShow: true,
|
||||||
|
xAxisLineColor: '#DCE2E8',
|
||||||
|
xAxisTickShow: true,
|
||||||
|
xAxisTickInside: false,
|
||||||
|
xAxisTickColor: '#DCE2E8',
|
||||||
|
xAxisLabelShow: true,
|
||||||
|
xAxisLabelInterval: true,
|
||||||
|
xAxisLabelInside: false,
|
||||||
|
xAxisLabelRotate: 0,
|
||||||
|
xAxisLabelFormatter: '',
|
||||||
|
xAxisLabelColor: '#fff',
|
||||||
|
xAxisLabelFontSize: 12,
|
||||||
|
xAxisLabelMargin: 3,
|
||||||
|
xAxisSplitLineShow: false,
|
||||||
|
xAxisSplitLineColor: '#DCE2E8',
|
||||||
|
xAxisSplitLineType: 'solid',
|
||||||
|
yName: '',
|
||||||
|
yNames: [],
|
||||||
|
yNameLocation: 'end',
|
||||||
|
yAxisLineShow: true,
|
||||||
|
yAxisLineColor: '#DCE2E8',
|
||||||
|
yAxisTickShow: true,
|
||||||
|
yAxisTickInside: false,
|
||||||
|
yAxisTickColor: '#DCE2E8',
|
||||||
|
yAxisLabelShow: true,
|
||||||
|
yAxisLabelInterval: true,
|
||||||
|
yAxisLabelInside: false,
|
||||||
|
yAxisLabelRotate: 0,
|
||||||
|
yAxisLabelFormatter: '',
|
||||||
|
yAxisLabelColor: '#fff',
|
||||||
|
yAxisLabelFontSize: 12,
|
||||||
|
yAxisLabelMargin: 3,
|
||||||
|
yAxisSplitLineShow: false,
|
||||||
|
yAxisSplitLineColor: '#DCE2E8',
|
||||||
|
yAxisSplitLineType: 'solid',
|
||||||
|
lineSymbolShow: false,
|
||||||
|
lineSymbolSize: 5,
|
||||||
|
lineSymbolType: 'circle',
|
||||||
|
seriesColor: '#9E87FF',
|
||||||
|
tooltip: true,
|
||||||
|
legend: true,
|
||||||
|
}
|
||||||
|
const options = {
|
||||||
|
...normalOption, ...chartOption,
|
||||||
|
}
|
||||||
|
return e.map(v => {
|
||||||
|
return {[v]: options[v]};
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const getOption = (e) => {
|
||||||
|
let res = {}
|
||||||
|
if (e === 'line' || e === 'multiLines') {
|
||||||
|
return optionList(['title', 'boundaryGap', 'gridTop', 'gridLeft', 'gridBottom', 'gridRight', 'xName', 'xNameLocation', 'xAxisLineShow', 'xAxisLineColor', 'xAxisTickShow', 'xAxisTickInside', 'xAxisTickColor', 'xAxisLabelShow', 'xAxisLabelInterval', 'xAxisLabelInside', 'xAxisLabelRotate', 'xAxisLabelFormatter', 'xAxisLabelColor', 'xAxisLabelFontSize', 'xAxisLabelMargin', 'xAxisSplitLineShow', 'xAxisSplitLineColor', 'xAxisSplitLineType', 'yName', 'yNames', 'yNameLocation', 'yAxisLineShow', 'yAxisLineColor', 'yAxisTickShow', 'yAxisTickInside', 'yAxisTickColor', 'yAxisLabelShow', 'yAxisLabelInterval', 'yAxisLabelInside', 'yAxisLabelRotate', 'yAxisLabelFormatter', 'yAxisLabelColor', 'yAxisLabelFontSize', 'yAxisLabelMargin', 'yAxisSplitLineShow', 'yAxisSplitLineColor', 'yAxisSplitLineType', 'lineSymbolShow', 'lineSymbolSize', 'lineSymbolType', 'seriesColor', 'tooltip', 'legend'])
|
||||||
|
} else if (e === 'bar' || e === 'multiBars') {
|
||||||
|
return {
|
||||||
|
title: '',
|
||||||
|
yNames: [],
|
||||||
|
gridTop: 30,
|
||||||
|
gridLeft: 5,
|
||||||
|
gridBottom: 10,
|
||||||
|
gridRight: 10,
|
||||||
|
xName: '',
|
||||||
|
xNameLocation: 'end',
|
||||||
|
xAxisLineShow: true,
|
||||||
|
xAxisLineColor: '#DCE2E8',
|
||||||
|
xAxisTickShow: true,
|
||||||
|
xAxisTickInside: false,
|
||||||
|
xAxisTickColor: '#DCE2E8',
|
||||||
|
xAxisLabelShow: true,
|
||||||
|
xAxisLabelInterval: true,
|
||||||
|
xAxisLabelInside: false,
|
||||||
|
xAxisLabelRotate: 0,
|
||||||
|
xAxisLabelFormatter: '',
|
||||||
|
xAxisLabelColor: '#fff',
|
||||||
|
xAxisLabelFontSize: 12,
|
||||||
|
xAxisLabelMargin: 3,
|
||||||
|
xAxisSplitLineShow: false,
|
||||||
|
xAxisSplitLineColor: '#DCE2E8',
|
||||||
|
xAxisSplitLineType: 'solid',
|
||||||
|
yName: '',
|
||||||
|
yNameLocation: 'end',
|
||||||
|
yAxisLineShow: true,
|
||||||
|
yAxisLineColor: '#DCE2E8',
|
||||||
|
yAxisTickShow: true,
|
||||||
|
yAxisTickInside: false,
|
||||||
|
yAxisTickColor: '#DCE2E8',
|
||||||
|
yAxisLabelShow: true,
|
||||||
|
yAxisLabelInterval: true,
|
||||||
|
yAxisLabelInside: false,
|
||||||
|
yAxisLabelRotate: 0,
|
||||||
|
yAxisLabelFormatter: '',
|
||||||
|
yAxisLabelColor: '#fff',
|
||||||
|
yAxisLabelFontSize: 12,
|
||||||
|
yAxisLabelMargin: 3,
|
||||||
|
yAxisSplitLineShow: false,
|
||||||
|
yAxisSplitLineColor: '#DCE2E8',
|
||||||
|
yAxisSplitLineType: 'solid',
|
||||||
|
seriesColor: '#9E87FF',
|
||||||
|
tooltip: true,
|
||||||
|
legend: true,
|
||||||
|
isHorizontal: false,
|
||||||
|
};
|
||||||
|
} else if (e === 'backgroundBar') {
|
||||||
|
return {
|
||||||
|
title: '',
|
||||||
|
yNames: [],
|
||||||
|
gridTop: 30,
|
||||||
|
gridLeft: 5,
|
||||||
|
gridBottom: 10,
|
||||||
|
gridRight: 10,
|
||||||
|
xName: '',
|
||||||
|
xNameLocation: 'end',
|
||||||
|
xAxisLineShow: true,
|
||||||
|
xAxisLineColor: '#DCE2E8',
|
||||||
|
xAxisTickShow: true,
|
||||||
|
xAxisTickInside: false,
|
||||||
|
xAxisTickColor: '#DCE2E8',
|
||||||
|
xAxisLabelShow: true,
|
||||||
|
xAxisLabelInterval: true,
|
||||||
|
xAxisLabelInside: false,
|
||||||
|
xAxisLabelRotate: 0,
|
||||||
|
xAxisLabelFormatter: '',
|
||||||
|
xAxisLabelColor: '#fff',
|
||||||
|
xAxisLabelFontSize: 12,
|
||||||
|
xAxisLabelMargin: 3,
|
||||||
|
xAxisSplitLineShow: false,
|
||||||
|
xAxisSplitLineColor: '#DCE2E8',
|
||||||
|
xAxisSplitLineType: 'solid',
|
||||||
|
yName: '',
|
||||||
|
yNameLocation: 'end',
|
||||||
|
yAxisLineShow: true,
|
||||||
|
yAxisLineColor: '#DCE2E8',
|
||||||
|
yAxisTickShow: true,
|
||||||
|
yAxisTickInside: false,
|
||||||
|
yAxisTickColor: '#DCE2E8',
|
||||||
|
yAxisLabelShow: true,
|
||||||
|
yAxisLabelInterval: true,
|
||||||
|
yAxisLabelInside: false,
|
||||||
|
yAxisLabelRotate: 0,
|
||||||
|
yAxisLabelFormatter: '',
|
||||||
|
yAxisLabelColor: '#fff',
|
||||||
|
yAxisLabelFontSize: 12,
|
||||||
|
yAxisLabelMargin: 3,
|
||||||
|
yAxisSplitLineShow: false,
|
||||||
|
yAxisSplitLineColor: '#DCE2E8',
|
||||||
|
yAxisSplitLineType: 'solid',
|
||||||
|
tooltip: true,
|
||||||
|
legend: true,
|
||||||
|
seriesColor: '#9E87FF',
|
||||||
|
backgroundColor: 'rgba(180, 180, 180, 0.2)',
|
||||||
|
isHorizontal: false,
|
||||||
|
};
|
||||||
|
} else if (e === 'curve' || e === 'multiCurves') {
|
||||||
|
return {
|
||||||
|
title: '',
|
||||||
|
yNames: [],
|
||||||
|
gridTop: 30,
|
||||||
|
gridLeft: 5,
|
||||||
|
gridBottom: 10,
|
||||||
|
gridRight: 10,
|
||||||
|
boundaryGap: true,
|
||||||
|
xName: '',
|
||||||
|
xNameLocation: 'end',
|
||||||
|
xAxisLineShow: true,
|
||||||
|
xAxisLineColor: '#DCE2E8',
|
||||||
|
xAxisTickShow: true,
|
||||||
|
xAxisTickInside: false,
|
||||||
|
xAxisTickColor: '#DCE2E8',
|
||||||
|
xAxisLabelShow: true,
|
||||||
|
xAxisLabelInterval: true,
|
||||||
|
xAxisLabelInside: false,
|
||||||
|
xAxisLabelRotate: 0,
|
||||||
|
xAxisLabelFormatter: '',
|
||||||
|
xAxisLabelColor: '#fff',
|
||||||
|
xAxisLabelFontSize: 12,
|
||||||
|
xAxisLabelMargin: 3,
|
||||||
|
xAxisSplitLineShow: false,
|
||||||
|
xAxisSplitLineColor: '#DCE2E8',
|
||||||
|
xAxisSplitLineType: 'solid',
|
||||||
|
yName: '',
|
||||||
|
yNameLocation: 'end',
|
||||||
|
yAxisLineShow: true,
|
||||||
|
yAxisLineColor: '#DCE2E8',
|
||||||
|
yAxisTickShow: true,
|
||||||
|
yAxisTickInside: false,
|
||||||
|
yAxisTickColor: '#DCE2E8',
|
||||||
|
yAxisLabelShow: true,
|
||||||
|
yAxisLabelInterval: true,
|
||||||
|
yAxisLabelInside: false,
|
||||||
|
yAxisLabelRotate: 0,
|
||||||
|
yAxisLabelFormatter: '',
|
||||||
|
yAxisLabelColor: '#fff',
|
||||||
|
yAxisLabelFontSize: 12,
|
||||||
|
yAxisLabelMargin: 3,
|
||||||
|
yAxisSplitLineShow: false,
|
||||||
|
yAxisSplitLineColor: '#DCE2E8',
|
||||||
|
yAxisSplitLineType: 'solid',
|
||||||
|
lineSymbolShow: false,
|
||||||
|
lineSymbolSize: 5,
|
||||||
|
lineSymbolType: 'circle',
|
||||||
|
seriesColor: '#9E87FF',
|
||||||
|
tooltip: true,
|
||||||
|
legend: true
|
||||||
|
};
|
||||||
|
} else if (e === 'lineBar') {
|
||||||
|
return {
|
||||||
|
title: '',
|
||||||
|
yNames: [],
|
||||||
|
gridTop: 30,
|
||||||
|
gridLeft: 5,
|
||||||
|
gridBottom: 10,
|
||||||
|
gridRight: 10,
|
||||||
|
xName: '',
|
||||||
|
xNameLocation: 'end',
|
||||||
|
xAxisLineShow: true,
|
||||||
|
xAxisLineColor: '#DCE2E8',
|
||||||
|
xAxisTickShow: true,
|
||||||
|
xAxisTickInside: false,
|
||||||
|
xAxisTickColor: '#DCE2E8',
|
||||||
|
xAxisLabelShow: true,
|
||||||
|
xAxisLabelInterval: true,
|
||||||
|
xAxisLabelInside: false,
|
||||||
|
xAxisLabelRotate: 0,
|
||||||
|
xAxisLabelFormatter: '',
|
||||||
|
xAxisLabelColor: '#fff',
|
||||||
|
xAxisLabelFontSize: 12,
|
||||||
|
xAxisLabelMargin: 3,
|
||||||
|
xAxisSplitLineShow: false,
|
||||||
|
xAxisSplitLineColor: '#DCE2E8',
|
||||||
|
xAxisSplitLineType: 'solid',
|
||||||
|
yName: '',
|
||||||
|
yNameLocation: 'end',
|
||||||
|
yAxisLineShow: true,
|
||||||
|
yAxisLineColor: '#DCE2E8',
|
||||||
|
yAxisTickShow: true,
|
||||||
|
yAxisTickInside: false,
|
||||||
|
yAxisTickColor: '#DCE2E8',
|
||||||
|
yAxisLabelShow: true,
|
||||||
|
yAxisLabelInterval: true,
|
||||||
|
yAxisLabelInside: false,
|
||||||
|
yAxisLabelRotate: 0,
|
||||||
|
yAxisLabelFormatter: '',
|
||||||
|
yAxisLabelColor: '#fff',
|
||||||
|
yAxisLabelFontSize: 12,
|
||||||
|
yAxisLabelMargin: 3,
|
||||||
|
yAxisSplitLineShow: false,
|
||||||
|
yAxisSplitLineColor: '#DCE2E8',
|
||||||
|
yAxisSplitLineType: 'solid',
|
||||||
|
lineSymbolShow: false,
|
||||||
|
lineSymbolSize: 5,
|
||||||
|
lineSymbolType: 'circle',
|
||||||
|
tooltip: true,
|
||||||
|
legend: true,
|
||||||
|
seriesColor: '#9E87FF'
|
||||||
|
};
|
||||||
|
} else if (e === 'radar') {
|
||||||
|
return {
|
||||||
|
title: '',
|
||||||
|
seriesColor: '#9E87FF',
|
||||||
|
yNames: [],
|
||||||
|
tooltip: true,
|
||||||
|
legend: true,
|
||||||
|
radarCenter: [30, 50],
|
||||||
|
radarRadius: 40,
|
||||||
|
radarShape: 'polygon',
|
||||||
|
radarSplitNumber: 5,
|
||||||
|
splitLineColor: '#9E87FF'
|
||||||
|
};
|
||||||
|
} else if (e === 'pie' || e === 'nightingaleRoseDiagram') {
|
||||||
|
return {
|
||||||
|
title: '',
|
||||||
|
yNames: [],
|
||||||
|
tooltip: true,
|
||||||
|
legend: true,
|
||||||
|
label: true,
|
||||||
|
pieCenter: 50,
|
||||||
|
pieLabelFormatter: '',
|
||||||
|
legendColor: '#fff'
|
||||||
|
};
|
||||||
|
} else if (e === 'annular') {
|
||||||
|
return {
|
||||||
|
title: '',
|
||||||
|
yNames: [],
|
||||||
|
tooltip: true,
|
||||||
|
legend: true,
|
||||||
|
label: true,
|
||||||
|
pieCenter: 50,
|
||||||
|
pieRadius: [30, 70],
|
||||||
|
colorList: ['#D6F4FF', '#D6F4FF', '#D6F4FF', '#D6F4FF'],
|
||||||
|
};
|
||||||
|
} else if (e === 'dashboard') {
|
||||||
|
return {title: '', yNames: [], tooltip: true, legend: true, label: true};
|
||||||
|
} else if (e === 'customBoard') {
|
||||||
|
return {title: '', yNames: []};
|
||||||
|
} else if (e === 'data') {
|
||||||
|
return {timeout: 5};
|
||||||
|
} else if (e === 'staticData') {
|
||||||
|
return {defaultInputArea: '', field: 'input', defaultDataType: ''};
|
||||||
|
} else if (e === 'customData') {
|
||||||
|
return {timeout: 5};
|
||||||
|
} else if (e === 'map') {
|
||||||
|
return {dataMap: []};
|
||||||
|
} else if (e === 'inputNode') {
|
||||||
|
return {field: 'input', defaultInput: ''};
|
||||||
|
} else if (e === 'buttonNode') {
|
||||||
|
return {backgroundColor: '#409EFF', color: '#fff', text: '按钮', sendType: ['ok']};
|
||||||
|
} else if (e === 'selectNode') {
|
||||||
|
return {field: 'select', defaultInput: '', labelField: 'label', valueField: 'value'};
|
||||||
|
} else if (e === 'time') {
|
||||||
|
return {startTimeId: 'startTime', endTimeId: 'endTime', defaultTime: [], format: ''};
|
||||||
|
} else if (e === 'text') {
|
||||||
|
return {text: '文字', align: '', color: '#fff', whiteSpace: 'nowrap'};
|
||||||
|
} else if (e === 'img') {
|
||||||
|
return {imgSrc: ''};
|
||||||
|
} else if (e === 'icon') {
|
||||||
|
return {icon: 'Tools', iconSrc: ''};
|
||||||
|
} else if (e === 'video') {
|
||||||
|
return {videoSrc: ''};
|
||||||
|
} else if (e === 'timeline') {
|
||||||
|
return {
|
||||||
|
color: '#fff', timestampColor: '#fff', field: 'content', timestampField: 'timestamp', isTimestamp: true
|
||||||
|
};
|
||||||
|
} else if (e === 'scrollTable' || e === 'table') {
|
||||||
|
return {
|
||||||
|
tableOptions: [],
|
||||||
|
tableCellOptions: [],
|
||||||
|
tableClassOption: {},
|
||||||
|
isThShow: true,
|
||||||
|
thHeight: '32px',
|
||||||
|
tdHeight: '28px',
|
||||||
|
thColor: '#D6F4FF',
|
||||||
|
tdColor: ['#D6F4FF', '#D6F4FF', '#D6F4FF', '#D6F4FF'],
|
||||||
|
thBgColor: '#1E90FF',
|
||||||
|
tdBgColor: ['#0D2B3D', '#103B4C', '#14576B', '#187E99']
|
||||||
|
};
|
||||||
|
} else if (e === 'customTable') {
|
||||||
|
return {
|
||||||
|
tableOptions: [],
|
||||||
|
tableCellOptions: [],
|
||||||
|
cellNum: 2,
|
||||||
|
dataNum: 2,
|
||||||
|
tdHeight: '28px',
|
||||||
|
tdColor: ['#D6F4FF', '#D6F4FF', '#D6F4FF', '#D6F4FF'],
|
||||||
|
tdBgColor: ['#0D2B3D', '#103B4C', '#14576B', '#187E99']
|
||||||
|
};
|
||||||
|
} else if (e === 'carousel') {
|
||||||
|
return {swiperOptions: {}, imageFit: 'contain', carouselImages: []};
|
||||||
|
} else if (e === 'background') {
|
||||||
|
return {backgroundColor: '#fff', isBorder: true, borderColor: '#fff', backgroundImage: ''};
|
||||||
|
} else if (e === 'pagination') {
|
||||||
|
return {pageSizeField: 'pageSize', currentPageField: 'pageNum'};
|
||||||
|
} else if (e === 'digitalFlop') {
|
||||||
|
return {
|
||||||
|
field: '',
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 22,
|
||||||
|
number: 123,
|
||||||
|
numQuantity: 3,
|
||||||
|
backgroundColor: 'rgba(180, 180, 180, 0.2)',
|
||||||
|
isBorder: true,
|
||||||
|
borderColor: '#fff'
|
||||||
|
};
|
||||||
|
} else if (e === 'menu') {
|
||||||
|
return {menuField: '', activeField: '', field: '', color: '#fff', activeColor: '#ffd04b'};
|
||||||
|
} else if (e === 'tree') {
|
||||||
|
return {level: 2, treeOptions: []};
|
||||||
|
} else {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const getNodeSize = (e) => {
|
||||||
|
if (e === 'line' || e === 'multiLines' || e === 'bar' || e === 'multiBars' || e === 'curve' || e === 'multiCurves' || e === 'customBoard' || e === 'pie' || e === 'annular' || e === 'dashboard' || e === 'radar') {
|
||||||
|
return {width: 300, height: 150};
|
||||||
|
} else if (e === 'data' || e === 'customData') {
|
||||||
|
return {width: 150, height: 50};
|
||||||
|
} else if (e === 'inputNode') {
|
||||||
|
return {width: 100, height: 30};
|
||||||
|
} else if (e === 'buttonNode') {
|
||||||
|
return {width: 100, height: 30};
|
||||||
|
} else if (e === 'staticData') {
|
||||||
|
return {width: 100, height: 60};
|
||||||
|
} else if (e === 'text') {
|
||||||
|
return {width: 100, height: 30};
|
||||||
|
} else if (e === 'time') {
|
||||||
|
return {width: 200, height: 30};
|
||||||
|
} else if (e === 'img') {
|
||||||
|
return {width: 300, height: 300};
|
||||||
|
} else if (e === 'map') {
|
||||||
|
return {width: 100, height: 30};
|
||||||
|
} else if (e === 'menu') {
|
||||||
|
return {width: 200, height: 800};
|
||||||
|
} else if (e === 'scrollTable' || e === 'table') {
|
||||||
|
return {width: 500, height: 300};
|
||||||
|
} else if (e === 'tree') {
|
||||||
|
return {width: 800, height: 800};
|
||||||
|
} else {
|
||||||
|
return {width: 100, height: 100};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const nameEnum = {
|
||||||
|
line: '折线',
|
||||||
|
multiLines: '多折线',
|
||||||
|
curve: '曲线',
|
||||||
|
multiCurves: '多曲线',
|
||||||
|
lineBar: '双轴图',
|
||||||
|
bar: '柱状图',
|
||||||
|
backgroundBar: '背景柱状图',
|
||||||
|
multiBars: '多柱状图',
|
||||||
|
pie: '饼图',
|
||||||
|
annular: '中空饼图',
|
||||||
|
dashboard: '仪表盘',
|
||||||
|
radar: '雷达图',
|
||||||
|
nightingaleRoseDiagram: '南丁格尔玫瑰图',
|
||||||
|
carousel: '轮播图',
|
||||||
|
map: '映射',
|
||||||
|
staticData: '静态数据',
|
||||||
|
customData: '自定义数据',
|
||||||
|
text: '文字',
|
||||||
|
inputNode: '输入框',
|
||||||
|
time: '时间',
|
||||||
|
img: '图片',
|
||||||
|
icon: '图标',
|
||||||
|
video: '视频',
|
||||||
|
timeline: '时间线',
|
||||||
|
digitalFlop: '数字翻牌器',
|
||||||
|
scrollTable: '滚动表格',
|
||||||
|
background: '背景',
|
||||||
|
tree: '树状图'
|
||||||
|
};
|
||||||
|
const tool = () => {
|
||||||
|
const nodeType = ref('');
|
||||||
|
const customData = ref({script: ''});
|
||||||
|
const {addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode} = useVueFlow({id: 'flowA'});
|
||||||
|
const onDragStart = (event, type, data) => {
|
||||||
|
if (event.dataTransfer) {
|
||||||
|
event.dataTransfer.setData('application/vueflow', type);
|
||||||
|
event.dataTransfer.effectAllowed = 'move';
|
||||||
|
}
|
||||||
|
|
||||||
|
nodeType.value = type;
|
||||||
|
customData.value = {...customData.value, ...(data || {})};
|
||||||
|
document.addEventListener('drop', onDragEnd);
|
||||||
|
};
|
||||||
|
const onDragEnd = () => {
|
||||||
|
nodeType.value = null;
|
||||||
|
document.removeEventListener('drop', onDragEnd);
|
||||||
|
};
|
||||||
|
const onDrop = (event) => {
|
||||||
|
const dimensions = getNodeSize(nodeType.value);
|
||||||
|
|
||||||
|
const position = screenToFlowCoordinate({
|
||||||
|
x: event.clientX, y: event.clientY
|
||||||
|
});
|
||||||
|
|
||||||
|
const nodeId = getId(nodeType.value);
|
||||||
|
const newNode = {
|
||||||
|
id: nodeId,
|
||||||
|
name: nameEnum[nodeType.value],
|
||||||
|
draggable: true,
|
||||||
|
type: nodeType.value,
|
||||||
|
dimensions,
|
||||||
|
position,
|
||||||
|
data: {options: getOption(nodeType.value), outputData: {}, customData: customData.value}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
};
|
||||||
|
const onDragOver = (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
if (nodeType.value) {
|
||||||
|
|
||||||
|
if (event.dataTransfer) {
|
||||||
|
event.dataTransfer.dropEffect = 'move';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
onDragStart, onDragEnd, onDrop, onDragOver
|
||||||
|
};
|
||||||
|
};
|
||||||
|
export default tool;
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
import {defineConfig} from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
// @ 指向 src 目录
|
||||||
|
'@': path.resolve(__dirname, 'src')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
lib: {
|
||||||
|
entry: path.resolve(__dirname, 'src/index.js'),
|
||||||
|
name: 'ScrinVisualEditor',
|
||||||
|
fileName: (format) => {
|
||||||
|
if (format === 'es') return 'scrin-visual-editor.es.js'
|
||||||
|
if (format === 'umd') return 'scrin-visual-editor.umd.js'
|
||||||
|
return `scrin-visual-editor.${format}.js`
|
||||||
|
},
|
||||||
|
cssFileName: 'style'
|
||||||
|
},
|
||||||
|
preserveModules: false,
|
||||||
|
assetsInlineLimit: 0,
|
||||||
|
output: {
|
||||||
|
preserveModulesRoot: 'src',
|
||||||
|
},
|
||||||
|
rollupOptions: {
|
||||||
|
external: ['vue'],
|
||||||
|
output: {
|
||||||
|
globals: {
|
||||||
|
vue: 'Vue'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue