xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板

Browse Source
master
夜笙歌 3 weeks ago
parent f148a367e7
commit f2875d1da2
2 changed files with 737 additions and 46 deletions
Show Stats Download Patch File Download Diff File

3
src/views/boardGenerate/index.vue
Unescape Escape View File

@ -662,8 +662,7 @@
</el-collapse-item>
</el-collapse>
<div v-else>
<div v-for="i in nodes.filter(e=>e.type!=='area').reverse()" class="nodeCard" @click="pitchOnNode(i)">
<div v-for="i in nodes.filter(e=>e.type!=='area').reverse()" class="nodeCard" @click="pitchOnNode(i)"
<div style="display: inline-block;margin-right: 8px;">
<el-dropdown trigger="click" @command="nodeOperate">
<span class="el-dropdown-link" @click.stop>

780
src/views/boardGenerate/index1.vue
Unescape Escape View File

@ -269,52 +269,59 @@
</div>
</el-popover>
</div>
<div class="optionsMenu"></div>
<div class="optionsMenu">
<el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top"
@click="pageSetting">
<Setting />
</el-icon>
<el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top" @click="save">
<DocumentChecked />
</el-icon>
<el-icon color="#ddd" :size="20" style="margin-top: 15px;margin-left: 20px;vertical-align: top" @click="clear">
<View />
</el-icon>
</div>
</div>
<div class="left">
<div class="title">
图层
</div>
<div v-if="else">
<el-dropdown trigger="click" @command="nodeOperate">
<span class="el-dropdown-link" @click.stop>
<el-icon class="settingIcon">
<Setting />
</el-icon>
</span>
<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="isShow">
<el-icon style="cursor: pointer" color="#fff" :size="16">
<View />
</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:'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-item :command="{ type: 'toTop', 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 class="levels">
<div class="level" v-for="i in nodes.filter(e=>e.type!=='area').reverse()">
<div class="isShow">
<el-icon style="cursor: pointer" color="#fff" :size="16">
<View />
</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" p-id="10516"></path>
</svg>
</div>
<div class="boardName">
<span style=" display: inline-block;">{{ i.name }}</span>
</div>
</div>
</div>
</div>
<div class="center" @drop="onDrop" v-loading="loading">
<FlowRuler>
@ -435,28 +442,491 @@
@resize="resize"></ScrollTableNode>
</template>
</VueFlow>
</FlowRuler>
</div>
<div class="right">
<div class="tabs">
<div class="tab" :class="{active : tabs === 0}" @click="selectTabs(0)">
<div v-if="Object.keys(nodeDataForm).length>0" class="tab" :class="{active : tabs === 0}"
@click="selectTabs(0)">
属性设置
</div>
<div class="tab" :class="{active : tabs === 1}" @click="selectTabs(1)">
<div v-if="Object.keys(nodeAttrForm).length>0" class="tab" :class="{active : tabs === 1}"
@click="selectTabs(1)">
样式设置
</div>
</div>
<div class="tabsItem"></div>
<div class="tabItems">
<div class="tabItem" v-if="Object.keys(nodeDataForm).length>0 && tabs === 0">
<el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
<el-form-item label="组件名称">
<el-input v-model="nodeDataForm.name" style="width: 100%" />
</el-form-item>
<el-form-item label="x">
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.x" style="width: 100%"
@change="updateNode(nodeDataForm.id,nodeDataForm,{ 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(nodeDataForm.id,nodeDataForm,{ 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(nodeDataForm.id,nodeDataForm,{ 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(nodeDataForm.id,nodeDataForm,{ replace: true })" />
</el-form-item>
</el-form>
</div>
<div class="tabItem" v-if="Object.keys(nodeAttrForm).length>0 && tabs === 1">
<el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
<el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInputArea')">
<el-input type="textarea" v-model="nodeAttrForm.defaultInputArea" style="width: 100%" />
</el-form-item>
<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('number')">
<el-input-number :controls="false" autocomplete="off" v-model="nodeAttrForm.number" style="width: 100%" />
</el-form-item>
<el-form-item label="x轴名称" v-if="Object.keys(nodeAttrForm).includes('xName')">
<el-input v-model="nodeAttrForm.xName" style="width: 100%" />
</el-form-item>
<el-form-item label="y轴名称" v-if="Object.keys(nodeAttrForm).includes('yName')">
<el-input v-model="nodeAttrForm.yName" style="width: 100%" />
</el-form-item>
<el-form-item label="顶部距离" v-if="Object.keys(nodeAttrForm).includes('gridTop')">
<el-input-number v-model="nodeAttrForm.gridTop" style="width: 100%" :min="0" :max="100" />
</el-form-item>
<el-form-item label="左侧距离" v-if="Object.keys(nodeAttrForm).includes('gridLeft')">
<el-input-number v-model="nodeAttrForm.gridLeft" style="width: 100%" :min="0" :max="100" />
</el-form-item>
<el-form-item label="底部距离" v-if="Object.keys(nodeAttrForm).includes('gridBottom')">
<el-input-number v-model="nodeAttrForm.gridBottom" style="width: 100%" :min="0" :max="100" />
</el-form-item>
<el-form-item label="右侧距离" v-if="Object.keys(nodeAttrForm).includes('gridRight')">
<el-input-number v-model="nodeAttrForm.gridRight" style="width: 100%" :min="0" :max="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('timestampField')">
<el-input v-model="nodeAttrForm.timestampField" />
</el-form-item>
<el-form-item label="是否显示时间戳" v-if="Object.keys(nodeAttrForm).includes('isTimestamp')">
<el-switch v-model="nodeAttrForm.isTimestamp" />
</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('backgroundColor')">
<el-color-picker v-model="nodeAttrForm.backgroundColor" show-alpha />
</el-form-item>
<el-form-item label="是否显示边框" v-if="Object.keys(nodeAttrForm).includes('isBorder')">
<el-switch v-model="nodeAttrForm.isBorder" />
</el-form-item>
<el-form-item label="边框颜色"
v-if="Object.keys(nodeAttrForm).includes('borderColor') && nodeAttrForm.isBorder">
<el-color-picker v-model="nodeAttrForm.borderColor" show-alpha />
</el-form-item>
<el-form-item label="时间戳颜色" v-if="Object.keys(nodeAttrForm).includes('timestampColor')">
<el-color-picker v-model="nodeAttrForm.timestampColor" 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('icon')">
<el-popover
placement="bottom"
:width="400"
trigger="click"
>
<template #reference>
<el-input readonly v-model="nodeAttrForm.icon" style="width: 100%" placeholder="选择图标">
<template #prepend>
<el-button :icon="icon[nodeAttrForm.icon]" />
</template>
</el-input>
</template>
<el-input v-model="selectIconInput" style="width: 100%" placeholder="筛选图标" />
<div style="height: 50vh;overflow-y: auto">
<!-- <el-tooltip-->
<!-- class="box-item"-->
<!-- effect="dark"-->
<!-- :content="i"--
<!-- placement="bottom"-->
<!-- v-for="i in icons.filter(e=>e.includes(selectIconInput))"-->
<!-- >-->
<el-button :icon="icon[i]" @click="nodeAttrForm.icon = i"
:type="nodeAttrForm.icon === i ? 'primary':''"
v-for="i in icons.filter(e=>e.includes(selectIconInput))"
style="margin-top: 4px;margin-left: 0;margin-right: 4px;" />
<!-- </el-tooltip>-->
</div>
</el-popover>
</el-form-item>
<el-form-item label="图标路径" v-if="Object.keys(nodeAttrForm).includes('iconSrc')">
<el-input v-model="nodeAttrForm.imgSrc" style="width: 100%" />
</el-form-item>
<el-form-item label="视频路径" v-if="Object.keys(nodeAttrForm).includes('videoSrc')">
<el-input v-model="nodeAttrForm.videoSrc" 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-item label="提示框" v-if="Object.keys(nodeAttrForm).includes('tooltip')">
<el-switch v-model="nodeAttrForm.tooltip" active-text="显示" inactive-text="隐藏" />
</el-form-item>
<el-form-item label="图例" v-if="Object.keys(nodeAttrForm).includes('legend')">
<el-switch v-model="nodeAttrForm.legend" active-text="显示" inactive-text="隐藏" />
</el-form-item>
<el-form-item label="饼图标签" v-if="Object.keys(nodeAttrForm).includes('label')">
<el-switch v-model="nodeAttrForm.label" active-text="显示" inactive-text="隐藏" />
</el-form-item>
<el-form-item label="轮播设置" v-if="Object.keys(nodeAttrForm).includes('swiperOptions')">
<el-button plain @click="swiperOptionsVisible = true">
配置轮播图
</el-button>
</el-form-item>
<el-form-item label="图片显示方式" v-if="Object.keys(nodeAttrForm).includes('imageFit')">
<el-select
v-model="nodeAttrForm.imageFit"
style="width: 100%"
>
<el-option
label="填充满"
value="fill"
/>
<el-option
label="固定比例"
value="contain"
/>
</el-select>
</el-form-item>
<el-form-item label="图片集" v-if="Object.keys(nodeAttrForm).includes('carouselImages')">
<el-input-tag v-model="nodeAttrForm.carouselImages" placeholder="回车确认" />
</el-form-item>
<el-form-item label="表格列设置" v-if="Object.keys(nodeAttrForm).includes('tableOptions')">
<el-button plain @click="tableOptionsVisible = true">
配置表格
</el-button>
</el-form-item>
<el-form-item label="表格动画设置" v-if="Object.keys(nodeAttrForm).includes('tableClassOption')">
<el-button plain @click="tableClassOptionsVisible = true">
配置动画
</el-button>
</el-form-item>
<el-form-item label="表头高度" v-if="Object.keys(nodeAttrForm).includes('thHeight')">
<el-input v-model="nodeAttrForm.thHeight" style="width: 100%" />
</el-form-item>
<el-form-item label="行高度" v-if="Object.keys(nodeAttrForm).includes('tdHeight')">
<el-input v-model="nodeAttrForm.tdHeight" style="width: 100%" />
</el-form-item>
<el-form-item label="表头文字颜色" v-if="Object.keys(nodeAttrForm).includes('thColor')">
<el-color-picker v-model="nodeAttrForm.thColor" show-alpha />
</el-form-item>
<el-form-item label="行文字颜色" v-if="Object.keys(nodeAttrForm).includes('tdColor')">
<el-badge value="99" class="item" :offset="[-8,0]"
v-for="(i,k) in nodeAttrForm.tdColor">
<el-color-picker style="margin-right: 4px;" v-model="nodeAttrForm.tdColor[k]" show-alpha />
<template #content>
<div class="custom-content" @click="nodeAttrForm.tdColor.splice(k, 1)">
<el-icon>
<Close />
</el-icon>
</div>
</template>
</el-badge>
<el-button :icon="Plus" @click="nodeAttrForm.tdColor.push('#fff')" />
</el-form-item>
<el-form-item label="表头背景颜色" v-if="Object.keys(nodeAttrForm).includes('thBgColor')">
<el-color-picker v-model="nodeAttrForm.thBgColor" show-alpha />
</el-form-item>
<el-form-item label="行背景颜色" v-if="Object.keys(nodeAttrForm).includes('tdBgColor')">
<el-badge value="99" class="item" :offset="[-8,0]"
v-for="(i,k) in nodeAttrForm.tdBgColor">
<el-color-picker style="margin-right: 8px;"
v-model="nodeAttrForm.tdBgColor[k]" show-alpha />
<template #content>
<div class="custom-content" @click="nodeAttrForm.tdBgColor.splice(k, 1)">
<el-icon>
<Close />
</el-icon>
</div>
</template>
</el-badge>
<el-button :icon="Plus" @click="nodeAttrForm.tdBgColor.push('#fff')" />
</el-form-item>
</el-form>
</div>
</div>
</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="uploadFileUrl"
:show-file-list="false"
:limit="1"
accept=".jpg,.png"
:headers="headers"
:on-success="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>
<el-dialog v-model="tableOptionsVisible" title="表格设置" width="800">
<el-table :data="nodeAttrForm.tableOptions">
<el-table-column label="列名称" width="150">
<template #default="scope">
<el-input v-model="scope.row.name" style="width: 100%" />
</template>
</el-table-column>
<el-table-column label="数据字段" width="200">
<template #default="scope">
<el-input v-model="scope.row.field" style="width: 100%" />
</template>
</el-table-column>
<el-table-column label="列宽">
<template #default="scope">
<el-input v-model="scope.row.width" style="width: 100%" />
</template>
</el-table-column>
<el-table-column label="对齐方式">
<template #default="scope">
<el-select
v-model="scope.row.align"
placeholder="请选择"
style="width: 100%"
>
<el-option
label="左对齐"
value="left"
/>
<el-option
label="居中"
value="center"
/>
<el-option
label="右对齐"
value="right"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="类型">
<template #default="scope">
<el-select
v-model="scope.row.type"
placeholder="请选择"
style="width: 100%"
>
<el-option
label="文本"
value="文本"
/>
<el-option
label="标签"
value="标签"
/>
<el-option
label="图片"
value="图片"
/>
</el-select>
</template>
</el-table-column>
<el-table-column label="操作">
<template #default="scope">
<el-button :icon="Delete" circle @click="nodeAttrForm.tableOptions.splice(scope.$index, 1)" />
</template>
</el-table-column>
</el-table>
<el-button size="small" :icon="Plus" style="width: 100%" @click="nodeAttrForm.tableOptions.push({})">添加
</el-button>
</el-dialog>
<el-dialog v-model="tableClassOptionsVisible" title="动画设置" width="500">
<el-form :model="nodeAttrForm.tableClassOption" label-width="auto">
<el-form-item label="滚动速度">
<el-input-number :controls="false" v-model="nodeAttrForm.tableClassOption.step" autocomplete="off" />
</el-form-item>
<el-form-item label="开启滚动的数据量">
<el-input-number :controls="false" v-model="nodeAttrForm.tableClassOption.limitMoveNum" autocomplete="off" />
</el-form-item>
<el-form-item label="鼠标悬停停止">
<el-switch v-model="nodeAttrForm.tableClassOption.hoverStop" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="tableClassOptionsVisible = false">关闭</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="swiperOptionsVisible" title="轮播设置" width="500">
<el-form v-if="swiperOptionsVisible" :model="nodeAttrForm.swiperOptions" label-width="auto">
<el-form-item label="自动播放">
<el-switch v-model="nodeAttrForm.swiperOptions.autoplay" />
</el-form-item>
<el-form-item label="切换间隔">
<el-input-number :controls="false" v-model="nodeAttrForm.swiperOptions.delay" autocomplete="off" />
</el-form-item>
<el-form-item label="鼠标悬停停止">
<el-switch v-model="nodeAttrForm.swiperOptions.pauseOnMouseEnter" />
</el-form-item>
<el-form-item label="过渡时间">
<el-input-number :controls="false" v-model="nodeAttrForm.swiperOptions.speed" autocomplete="off" />
</el-form-item>
<el-form-item label="循环播放">
<el-switch v-model="nodeAttrForm.swiperOptions.loop" />
</el-form-item>
<el-form-item label="显示导航按钮">
<el-switch v-model="nodeAttrForm.swiperOptions.navigation" />
</el-form-item>
<el-form-item label="动画效果">
<el-select
v-model="nodeAttrForm.swiperOptions.effect"
style="width: 100%"
>
<el-option
label="默认"
value="slide"
/>
<el-option
label="淡入淡出"
value="fade"
/>
<el-option
label="立方体"
value="cube"
/>
<el-option
label="翻转"
value="flip"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="swiperOptionsVisible = false">关闭</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import FlowRuler from './FlowRuler.vue';
import { ArrowDown, View } from '@element-plus/icons-vue';
import { ArrowDown, View, DocumentChecked } from '@element-plus/icons-vue';
import * as icon from '@element-plus/icons-vue';
import { MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
import tool from '@/views/boardGenerate/tool.js';
import tool, { options } from '@/views/boardGenerate/tool.js';
import { v4 as uuidv4 } from 'uuid';
import { Background } from '@vue-flow/background';
import CarouselNode from '@/views/boardGenerate/nodes/board/carouselNode.vue';
@ -486,8 +956,12 @@ import AreaNode from '@/views/boardGenerate/nodes/other/areaNode.vue';
import StaticDataNode from '@/views/boardGenerate/nodes/data/staticDataNode.vue';
import MapNode from '@/views/boardGenerate/nodes/form/mapNode.vue';
import { getDataSourceList } from '@/views/boardGenerate/api/dataSource.js';
import { getBoardApi } from '@/views/boardGenerate/api/boardList.js';
import { editBoardApi, getBoardApi } from '@/views/boardGenerate/api/boardList.js';
import { globalHeaders } from '@/utils/request.ts';
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
const headers = ref(globalHeaders());
const { onDragStart, onDrop, onDragOver } = tool();
const router = useRouter();
@ -581,7 +1055,13 @@ onMounted(async () => {
});
});
const icons = ref([]);
const selectIconInput = ref('');
const loading = ref(false);
const pageSettingVisible = ref(false);
const tableOptionsVisible = ref(false);
const tableClassOptionsVisible = ref(false);
const swiperOptionsVisible = ref(false);
const tabs = ref(0);
const nodes = ref([{
id: `area_${uuidv4().replaceAll('-', '_')}`,
name: 'area',
@ -597,7 +1077,10 @@ const customData = ref([]);
const customBoard = ref([]);
const boardData = ref({});
const pageData = ref({});
const tabs = ref(0);
const customDataForm = ref({});
const nodeAttrForm = ref({});
const nodeDataForm = ref({});
const pageSettingForm = ref({});
const logEvent = async (eventname, event) => {
switch (eventname) {
case 'connect':
@ -670,13 +1153,197 @@ const getInputData = (e) => {
const selectTabs = (e) => {
tabs.value = e;
};
const pageSetting = () => {
pageSettingVisible.value = true;
pageSettingForm.value = pageData.value;
};
const save = () => {
loading.value = true;
editBoardApi({
...boardData.value,
customContent: JSON.stringify(pageSettingForm.value),
designPagePointList: nodes.value.map((e, index) => {
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 {
activeFlag: '1',
pageConfigId: boardData.value.pageConfigId,
pagePointId: e.id,
pagePointName: e.name,
fieldOne: index,
width: e.dimensions.width,
height: e.dimensions.height,
posX: e.position.x,
posY: e.position.y,
pointType: e.type,
dataContent: JSON.stringify(data)
};
}),
designPageEdgesList: edges.value.map(e => {
console.log(e);
return {
activeFlag: '1',
pageConfigId: boardData.value.pageConfigId,
pageEdgesId: e.id,
sourceNodeId: e.source,
targetNodeId: e.target,
edgeType: e.type,
targetHandleId: e.targetHandle,
sourceHandleId: e.sourceHandle
};
})
}).then(() => {
ElMessage({
type: 'success',
message: '保存成功'
});
})
.finally(() => {
loading.value = false;
});
// 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 = (res) => {
// 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;
if (res.code === 200) {
pageSettingForm.value.bg = res.data.url;
}
};
const nodeOperate = (data) => {
let type = data.type;
const index = nodes.value.indexOf(data.node);
let arr = JSON.parse(JSON.stringify(nodes.value));
const item = arr[index];
switch (type) {
case 'toTop':
nodes.value = [...nodes.value.filter(e => e.id !== data.node.id), data.node];
break;
case 'moveUp':
arr.splice(index, 1);
arr.splice(index + 1, 0, item);
nodes.value = arr;
break;
case 'moveDown':
arr.splice(index, 1);
arr.splice(index - 1, 0, item);
nodes.value = arr;
break;
case 'copy':
item.id = options.getId(item.type);
addNodes(item);
break;
case 'del':
removeNodes([data.node.id]);
break;
}
};
const pitchOnNode = (e) => {
nodes.value.forEach(v => {
if (v.id === e.id) {
v.selected = true;
} else {
v.selected = false;
}
});
nodeAttrForm.value = e.data.options;
nodeDataForm.value = e;
customDataForm.value = e.data.customData;
};
</script>
<style scoped lang="less">
:deep(.swiper-slide-active) {
pointer-events: none;
}
:deep(.vue-flow__node-area) {
z-index: -1 !important;
pointer-events: none !important;
}
.custom-content {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.boardGenerate {
width: 100%;
height: 100%;
@ -688,6 +1355,18 @@ const selectTabs = (e) => {
height: var(--boardGenerateTopHeight);
background-color: #1C1F20;
border-bottom: 1px solid #000;
position: relative;
.componentMenu {
display: inline-block;
}
.optionsMenu {
vertical-align: top;
display: inline-block;
position: absolute;
right: 20px;
}
}
.left {
@ -714,7 +1393,11 @@ const selectTabs = (e) => {
overflow: auto;
background-color: #1C1F20;
&::-webkit-scrollbar {
display: none;
}
.level {
display: flex;
align-items: center;
height: 50px;
@ -743,6 +1426,15 @@ const selectTabs = (e) => {
color: #fff;
}
}
.isSelect {
background-color: #494949;
.isShow {
border-right: 1px solid #373737;
}
}
}
}
@ -787,7 +1479,7 @@ const selectTabs = (e) => {
}
}
.tabsItem {
.tabItems {
width: 100%;
height: calc(100% - 50px);
background-color: #222;

Write Preview
Loading…
Cancel
Save