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

修改看板配置

Browse Source
master
suixy 3 days ago
parent 863830d6ca
commit 1eda00e462
12 changed files with 497 additions and 416 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape Escape View File

@ -20,6 +20,7 @@
"dependencies": {
"@element-plus/icons-vue": "2.3.1",
"@highlightjs/vue-plugin": "2.1.0",
"@vitejs/plugin-basic-ssl": "^2.0.0",
"@vue-flow/background": "^1.3.2",
"@vue-flow/core": "^1.43.1",
"@vue-flow/node-resizer": "^1.4.0",

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

@ -1,402 +1,413 @@
<template>
<div class="leftPanel">
<el-tabs v-model="leftPanelState" class="demo-tabs" type="border-card">
<el-tab-pane label="图表组件" name="1">
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'line')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">折线</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'multiLines')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">多折线</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'curve')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">曲线</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'multiCurves')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">多曲线
</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'bar')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">柱状图</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'multiBars')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">多柱状图
</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'pie')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">饼图</div>
</el-card>
<template v-for="i in customBoard">
<div >
<div class="leftPanel">
<el-tabs v-model="leftPanelState" class="demo-tabs" type="border-card">
<el-tab-pane label="图表组件" name="1">
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'customBoard',i)"
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
@dragstart="onDragStart($event, 'line')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">{{ i.name }}</div>
<div class="moduleText">折线</div>
</el-card>
</template>
</el-tab-pane>
<el-tab-pane label="数据源" name="2">
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'map')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">映射</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'staticData')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">静态数据</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'data')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">设备数据</div>
</el-card>
<template v-for="i in customData">
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'customData',i)"
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
@dragstart="onDragStart($event, 'multiLines')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">{{ i.name }}</div>
<div class="moduleText">多折线</div>
</el-card>
</template>
</el-tab-pane>
<el-tab-pane label="表单组件" name="3">
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'text')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'curve')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">曲线</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'multiCurves')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">多曲线
</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'bar')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">柱状图</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'multiBars')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">多柱状图
</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'pie')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">饼图</div>
</el-card>
<template v-for="i in customBoard">
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'customBoard',i)"
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">{{ i.name }}</div>
</el-card>
</template>
<div class="moduleText">文字</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'inputNode')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</el-tab-pane>
<el-tab-pane label="数据源" name="2">
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'map')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">映射</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'staticData')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">静态数据</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'data')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">设备数据</div>
</el-card>
<template v-for="i in customData">
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'customData',i)"
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">{{ i.name }}</div>
</el-card>
</template>
<div class="moduleText">输入框</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'time')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</el-tab-pane>
<el-tab-pane label="表单组件" name="3">
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'text')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">文字</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'inputNode')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">输入框</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'time')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">时间</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'img')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">图片</div>
</el-card>
</el-tab-pane>
</el-tabs>
</div>
<div class="content" @drop="onDrop">
<div class="pageSetting">
<span class="pageTitle">{{ pageTitle }}</span>
<div class="btns">
<el-button type="primary" text :icon="Setting" @click="pageSetting">页面配置</el-button>
<el-button type="primary" text :icon="Check" @click="save">保存</el-button>
<el-button type="primary" text :icon="Close" @click="clear">清空</el-button>
</div>
</div>
<div class="flowArea" v-loading="loading">
<VueFlow :min-zoom="0.01" ref="flowRef" v-model:nodes="nodes" v-model:edges="edges" fit-view-on-init
default-marker-color="#409EFF"
@connect="logEvent('connect', $event)"
@node-click="logEvent('click', $event)"
@pane-click="logEvent('paneClick', $event)"
@node-drag-start="logEvent('nodeDrag', $event)"
@node-contextMenu="logEvent('contextmenu', $event)"
@dragover="onDragOver"
>
<Background :size="1" :gap="20" pattern-color="#BDBDBD" style="background-color: #000" />
<template #node-area="areaNodeProps">
<AreaNode v-bind="areaNodeProps" :pageData="pageData"></AreaNode>
</template>
<div class="moduleText">时间</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'img')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
<template #node-customBoard="customBoardNodeProps">
<CustomBoardNode :inputData=getInputData(customBoardNodeProps.id) v-bind="customBoardNodeProps"
@resize="resize"></CustomBoardNode>
</template>
<div class="moduleText">图片</div>
</el-card>
</el-tab-pane>
</el-tabs>
</div>
<div class="content" @drop="onDrop">
<div class="pageSetting">
<span class="pageTitle">{{ pageTitle }}</span>
<div class="btns">
<el-button type="primary" text :icon="Setting" @click="pageSetting">页面配置</el-button>
<el-button type="primary" text :icon="Check" @click="save">保存</el-button>
<el-button type="primary" text :icon="Close" @click="clear">清空</el-button>
<template #node-customData="customDataNodeProps">
<CustomDataNode :inputData=getInputData(customDataNodeProps.id) v-bind="customDataNodeProps"
@resize="resize"></CustomDataNode>
</template>
<template #node-line="lineNodeProps">
<LineNode :inputData=getInputData(lineNodeProps.id) v-bind="lineNodeProps"
@resize="resize"></LineNode>
</template>
<template #node-multiLines="multiLinesNodeProps">
<MultiLinesNode :inputData=getInputData(multiLinesNodeProps.id) v-bind="multiLinesNodeProps"
@resize="resize"></MultiLinesNode>
</template>
<template #node-curve="curveNodeProps">
<CurveNode :inputData=getInputData(curveNodeProps.id) v-bind="curveNodeProps"
@resize="resize"></CurveNode>
</template>
<template #node-multiCurves="multiCurvesNodeProps">
<MultiCurvesNode :inputData=getInputData(multiCurvesNodeProps.id) v-bind="multiCurvesNodeProps"
@resize="resize"></MultiCurvesNode>
</template>
<template #node-bar="barNodeProps">
<BarNode :inputData=getInputData(barNodeProps.id) v-bind="barNodeProps"
@resize="resize"></BarNode>
</template>
<template #node-multiBars="multiBarsNodeProps">
<MultiBarsNode :inputData=getInputData(multiBarsNodeProps.id) v-bind="multiBarsNodeProps"
@resize="resize"></MultiBarsNode>
</template>
<template #node-pie="pieNodeProps">
<PieNode :inputData=getInputData(pieNodeProps.id) v-bind="pieNodeProps"
@resize="resize"></PieNode>
</template>
<template #node-data="dataNodeProps">
<DataNode :inputData=getInputData(dataNodeProps.id) v-bind="dataNodeProps"
@resize="resize"></DataNode>
</template>
<template #node-text="textNodeProps">
<TextNode :inputData=getInputData(textNodeProps.id) v-bind="textNodeProps"
@resize="resize"></TextNode>
</template>
<template #node-img="imgNodeProps">
<ImgNode :inputData=getInputData(imgNodeProps.id) v-bind="imgNodeProps"
@resize="resize"></ImgNode>
</template>
<template #node-inputNode="inputNodeProps">
<InputNode :inputData=getInputData(inputNodeProps.id) v-bind="inputNodeProps"
@resize="resize"></InputNode>
</template>
<template #node-time="timeNodeProps">
<TimeNode :inputData=getInputData(timeNodeProps.id) v-bind="timeNodeProps"
@resize="resize"></TimeNode>
</template>
<template #node-map="mapNodeProps">
<MapNode :inputData=getInputData(mapNodeProps.id) v-bind="mapNodeProps"
@resize="resize"></MapNode>
</template>
<template #node-staticData="staticDataNodeProps">
<StaticDataNode :inputData=getInputData(staticDataNodeProps.id) v-bind="staticDataNodeProps"
@resize="resize"></StaticDataNode>
</template>
</VueFlow>
</div>
</div>
<div class="flowArea">
<VueFlow :min-zoom="0.01" ref="flowRef" v-model:nodes="nodes" v-model:edges="edges" fit-view-on-init
default-marker-color="#409EFF"
@connect="logEvent('connect', $event)"
@node-click="logEvent('click', $event)"
@pane-click="logEvent('paneClick', $event)"
@node-drag-start="logEvent('nodeDrag', $event)"
@node-contextMenu="logEvent('contextmenu', $event)"
@dragover="onDragOver"
>
<Background :size="1" :gap="20" pattern-color="#BDBDBD" style="background-color: #000" />
<template #node-area="areaNodeProps">
<AreaNode v-bind="areaNodeProps" :pageData="pageData"></AreaNode>
</template>
<template #node-customBoard="customBoardNodeProps">
<CustomBoardNode :inputData=getInputData(customBoardNodeProps.id) v-bind="customBoardNodeProps"
@resize="resize"></CustomBoardNode>
</template>
<template #node-customData="customDataNodeProps">
<CustomDataNode :inputData=getInputData(customDataNodeProps.id) v-bind="customDataNodeProps"
@resize="resize"></CustomDataNode>
</template>
<template #node-line="lineNodeProps">
<LineNode :inputData=getInputData(lineNodeProps.id) v-bind="lineNodeProps"
@resize="resize"></LineNode>
</template>
<template #node-multiLines="multiLinesNodeProps">
<MultiLinesNode :inputData=getInputData(multiLinesNodeProps.id) v-bind="multiLinesNodeProps"
@resize="resize"></MultiLinesNode>
</template>
<template #node-curve="curveNodeProps">
<CurveNode :inputData=getInputData(curveNodeProps.id) v-bind="curveNodeProps"
@resize="resize"></CurveNode>
</template>
<template #node-multiCurves="multiCurvesNodeProps">
<MultiCurvesNode :inputData=getInputData(multiCurvesNodeProps.id) v-bind="multiCurvesNodeProps"
@resize="resize"></MultiCurvesNode>
</template>
<template #node-bar="barNodeProps">
<BarNode :inputData=getInputData(barNodeProps.id) v-bind="barNodeProps"
@resize="resize"></BarNode>
</template>
<template #node-multiBars="multiBarsNodeProps">
<MultiBarsNode :inputData=getInputData(multiBarsNodeProps.id) v-bind="multiBarsNodeProps"
@resize="resize"></MultiBarsNode>
</template>
<template #node-pie="pieNodeProps">
<PieNode :inputData=getInputData(pieNodeProps.id) v-bind="pieNodeProps"
@resize="resize"></PieNode>
</template>
<template #node-data="dataNodeProps">
<DataNode :inputData=getInputData(dataNodeProps.id) v-bind="dataNodeProps"
@resize="resize"></DataNode>
</template>
<template #node-text="textNodeProps">
<TextNode :inputData=getInputData(textNodeProps.id) v-bind="textNodeProps"
@resize="resize"></TextNode>
</template>
<template #node-img="imgNodeProps">
<ImgNode :inputData=getInputData(imgNodeProps.id) v-bind="imgNodeProps"
@resize="resize"></ImgNode>
</template>
<template #node-inputNode="inputNodeProps">
<InputNode :inputData=getInputData(inputNodeProps.id) v-bind="inputNodeProps"
@resize="resize"></InputNode>
</template>
<template #node-time="timeNodeProps">
<TimeNode :inputData=getInputData(timeNodeProps.id) v-bind="timeNodeProps"
@resize="resize"></TimeNode>
</template>
<template #node-map="mapNodeProps">
<MapNode :inputData=getInputData(mapNodeProps.id) v-bind="mapNodeProps"
@resize="resize"></MapNode>
</template>
<template #node-staticData="staticDataNodeProps">
<StaticDataNode :inputData=getInputData(staticDataNodeProps.id) v-bind="staticDataNodeProps"
@resize="resize"></StaticDataNode>
</template>
</VueFlow>
<div class="rightPanel">
<el-collapse>
<el-collapse-item title="基础设置" name="1" v-if="Object.keys(nodeDataForm).length>0">
<el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
<el-form-item label="x">
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.x" style="width: 100%"
@change="updateNode(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>
</el-collapse-item>
<el-collapse-item title="数据配置" name="2" v-if="Object.keys(nodeAttrForm).length>0">
<el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
<el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('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="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('startTimeId')">
<el-input v-model="nodeAttrForm.startTimeId" />
</el-form-item>
<el-form-item label="结束时间字段名" v-if="Object.keys(nodeAttrForm).includes('endTimeId')">
<el-input v-model="nodeAttrForm.endTimeId" />
</el-form-item>
<el-form-item label="数据映射" v-if="Object.keys(nodeAttrForm).includes('dataMap')">
<el-table :data="nodeAttrForm.dataMap" style="width: 100%">
<el-table-column label="源字段" min-width="120">
<template #default="scope">
<el-input v-model="scope.row.source" style="width: 100%" />
</template>
</el-table-column>
<el-table-column label="映射字段" min-width="120">
<template #default="scope">
<el-input v-model="scope.row.target" style="width: 100%" />
</template>
</el-table-column>
<el-table-column label="操作" min-width="120">
<template #default="scope">
<el-button link type="primary" size="small" @click="nodeAttrForm.dataMap.splice(scope.$index, 1)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-button style="width: 100%" @click="nodeAttrForm.dataMap.push({})">
添加映射
</el-button>
</el-form-item>
<el-form-item label="内容" v-if="Object.keys(nodeAttrForm).includes('text')">
<el-input v-model="nodeAttrForm.text" style="width: 100%" />
</el-form-item>
<el-form-item label="对齐方式" v-if="Object.keys(nodeAttrForm).includes('align')">
<el-select
v-model="nodeAttrForm.align"
placeholder="Select"
style="width: 100%"
>
<el-option
label="左对齐"
value="left"
/>
<el-option
label="居中对齐"
value="center"
/>
<el-option
label="右对齐"
value="right"
/>
</el-select>
</el-form-item>
<el-form-item label="文字颜色" v-if="Object.keys(nodeAttrForm).includes('color')">
<el-color-picker v-model="nodeAttrForm.color" show-alpha />
</el-form-item>
<el-form-item label="图片路径" v-if="Object.keys(nodeAttrForm).includes('imgSrc')">
<el-input v-model="nodeAttrForm.imgSrc" style="width: 100%" />
</el-form-item>
<el-form-item label="标题" v-if="Object.keys(nodeAttrForm).includes('title')">
<el-input v-model="nodeAttrForm.title" style="width: 100%" />
</el-form-item>
<el-form-item label="数据名称" v-if="Object.keys(nodeAttrForm).includes('yNames')">
<el-input-tag v-model="nodeAttrForm.yNames" placeholder="回车确认" />
</el-form-item>
<el-form-item label="超时时间" v-if="Object.keys(nodeAttrForm).includes('timeout')">
<el-input-number
v-model="nodeAttrForm.timeout"
:min="1000"
:step="1000"
controls-position="right"
/>
</el-form-item>
<el-form-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>
</el-collapse-item>
<el-collapse-item title="自定义配置" name="3" v-if="customDataForm">
<el-form :model="customDataForm" label-width="auto" style="max-width: 600px">
<el-form-item label="自定义内容" v-if="Object.keys(customDataForm).includes('option')">
<el-input type="textarea" v-model="customDataForm.option" style="width: 100%" />
</el-form-item>
<el-form-item label="请求地址" v-if="Object.keys(customDataForm).includes('url')">
<el-input v-model="customDataForm.url">
<template #prepend>
<el-select v-model="customDataForm.method" style="width: 100px">
<el-option label="get" value="get" />
<el-option label="post" value="post" />
<el-option label="socket" value="socket" />
</el-select>
</template>
</el-input>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
</div>
</div>
<div class="rightPanel">
<el-collapse>
<el-collapse-item title="基础设置" name="1" v-if="Object.keys(nodeDataForm).length>0">
<el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
<el-form-item label="x">
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.x" style="width: 100%"
@change="updateNode(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>
</el-collapse-item>
<el-collapse-item title="数据配置" name="2" v-if="Object.keys(nodeAttrForm).length>0">
<el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
<el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('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="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('startTimeId')">
<el-input v-model="nodeAttrForm.startTimeId" />
</el-form-item>
<el-form-item label="结束时间字段名" v-if="Object.keys(nodeAttrForm).includes('endTimeId')">
<el-input v-model="nodeAttrForm.endTimeId" />
</el-form-item>
<el-form-item label="数据映射" v-if="Object.keys(nodeAttrForm).includes('dataMap')">
<el-table :data="nodeAttrForm.dataMap" style="width: 100%">
<el-table-column label="源字段" min-width="120">
<template #default="scope">
<el-input v-model="scope.row.source" style="width: 100%" />
</template>
</el-table-column>
<el-table-column label="映射字段" min-width="120">
<template #default="scope">
<el-input v-model="scope.row.target" style="width: 100%" />
</template>
</el-table-column>
<el-table-column label="操作" min-width="120">
<template #default="scope">
<el-button link type="primary" size="small" @click="nodeAttrForm.dataMap.splice(scope.$index, 1)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-button style="width: 100%" @click="nodeAttrForm.dataMap.push({})">
添加映射
</el-button>
</el-form-item>
<el-form-item label="内容" v-if="Object.keys(nodeAttrForm).includes('text')">
<el-input v-model="nodeAttrForm.text" style="width: 100%" />
</el-form-item>
<el-form-item label="对齐方式" v-if="Object.keys(nodeAttrForm).includes('align')">
<el-select
v-model="nodeAttrForm.align"
placeholder="Select"
style="width: 100%"
>
<el-option
label="左对齐"
value="left"
/>
<el-option
label="居中对齐"
value="center"
/>
<el-option
label="右对齐"
value="right"
/>
</el-select>
</el-form-item>
<el-form-item label="文字颜色" v-if="Object.keys(nodeAttrForm).includes('color')">
<el-color-picker v-model="nodeAttrForm.color" show-alpha />
</el-form-item>
<el-form-item label="图片路径" v-if="Object.keys(nodeAttrForm).includes('imgSrc')">
<el-input v-model="nodeAttrForm.imgSrc" style="width: 100%" />
</el-form-item>
<el-form-item label="标题" v-if="Object.keys(nodeAttrForm).includes('title')">
<el-input v-model="nodeAttrForm.title" style="width: 100%" />
</el-form-item>
<el-form-item label="数据名称" v-if="Object.keys(nodeAttrForm).includes('yNames')">
<el-input-tag v-model="nodeAttrForm.yNames" placeholder="回车确认" />
</el-form-item>
<el-form-item label="超时时间" v-if="Object.keys(nodeAttrForm).includes('timeout')">
<el-input-number
v-model="nodeAttrForm.timeout"
:min="1000"
:step="1000"
controls-position="right"
/>
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="自定义配置" name="3" v-if="customDataForm">
<el-form :model="customDataForm" label-width="auto" style="max-width: 600px">
<el-form-item label="自定义内容" v-if="Object.keys(customDataForm).includes('option')">
<el-input type="textarea" v-model="customDataForm.option" style="width: 100%" />
</el-form-item>
<el-form-item label="请求地址" v-if="Object.keys(customDataForm).includes('url')">
<el-input v-model="customDataForm.url">
<template #prepend>
<el-select v-model="customDataForm.method" style="width: 100px">
<el-option label="get" value="get" />
<el-option label="post" value="post" />
<el-option label="socket" value="socket" />
</el-select>
</template>
</el-input>
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
</div>
<el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
<el-form :model="pageSettingForm">
<el-form-item label="页面大小" label-width="80px">
@ -411,11 +422,12 @@
<el-form-item label="页面背景" label-width="80px">
<el-upload
class="avatar-uploader"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
:action="uploadFileUrl"
:show-file-list="false"
:limit="1"
accept=".jpg,.png"
:before-upload="pageBgUploadSuccess"
:headers="headers"
:on-success="pageBgUploadSuccess"
>
<img v-if="pageSettingForm.bg" :src="pageSettingForm.bg" class="avatar" />
<el-icon v-else class="avatar-uploader-icon">
@ -435,6 +447,7 @@
</el-dialog>
</template>
<script setup lang="ts">
import { globalHeaders } from '@/utils/request';
import { useRouter } from 'vue-router';
import { v4 as uuidv4 } from 'uuid';
import { Check, Close, Plus, Setting, StarFilled } from '@element-plus/icons-vue';
@ -472,6 +485,11 @@ const {
updateNode
} = useVueFlow();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadFileUrl = ref(baseUrl + '/resource/oss/upload'); // 上传文件服务器地址
const headers = ref(globalHeaders());
const loading = ref(false)
const pageSettingVisible = ref(false);
const pageSettingForm = ref({});
const pageTitle = ref('页面名称');
@ -492,6 +510,7 @@ const customData = ref([]);
const customBoard = ref([]);
const boardData = ref({});
onMounted(async () => {
loading.value = true
getDataSourceList({
pageNum: 1,
pageSize: 9999999
@ -566,7 +585,11 @@ onMounted(async () => {
};
}) || [];
pageData.value = JSON.parse(data.customContent) || {};
});
})
.finally(()=>{
loading.value = false
})
// pageData.value = JSON.parse(localStorage.getItem('PAGEDATA'));
});
const customDataForm = ref({});
@ -755,18 +778,21 @@ const clear = () => {
edges.value = [];
};
const pageBgUploadSuccess = (file) => {
const getFileText = (file) => {
const reader = new FileReader();
reader.onload = function(e) {
const fileContent = e.target.result;
console.log(fileContent);
pageSettingForm.value.bg = fileContent;
};
reader.readAsDataURL(file);
};
getFileText(file);
return false;
const 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 setPageData = () => {
pageData.value = JSON.parse(JSON.stringify(pageSettingForm.value));

8
src/views/boardGenerate/nodes/board/barNode.vue
Unescape Escape View File

@ -61,6 +61,7 @@ const defaultOption = {
top: '5%'
},
legend: {
show:props.data?.options?.legend||false,
icon: 'circle',
top: '5%',
right: '5%',
@ -71,6 +72,7 @@ const defaultOption = {
}
},
tooltip: {
show:props.data?.options?.tooltip||false,
trigger: 'axis',
axisPointer: {
label: {
@ -185,6 +187,12 @@ const getOption = () => {
title: {
text: props.data.options.title || ''
},
legend: {
show: props.data?.options?.legend || false,
},
tooltip: {
show:props.data?.options?.tooltip||false,
},
grid: {
top: props.data?.options?.gridTop + '%' || '20%',
left: props.data?.options?.gridLeft + '%' || '20%',

8
src/views/boardGenerate/nodes/board/curveNode.vue
Unescape Escape View File

@ -61,6 +61,7 @@ const defaultOption = {
top: '5%'
},
legend: {
show:props.data?.options?.legend||false,
icon: 'circle',
top: '5%',
right: '5%',
@ -71,6 +72,7 @@ const defaultOption = {
}
},
tooltip: {
show:props.data?.options?.tooltip||false,
trigger: 'axis',
axisPointer: {
label: {
@ -192,6 +194,12 @@ const getOption = () => {
title: {
text: props.data.options.title || ''
},
legend: {
show: props.data?.options?.legend || false,
},
tooltip: {
show:props.data?.options?.tooltip||false,
},
grid: {
top: props.data?.options?.gridTop + '%' || '20%',
left: props.data?.options?.gridLeft + '%' || '20%',

10
src/views/boardGenerate/nodes/board/lineNode.vue
Unescape Escape View File

@ -61,6 +61,7 @@ const defaultOption = {
top: '5%'
},
legend: {
show:props.data?.options?.legend||false,
icon: 'circle',
top: '5%',
right: '5%',
@ -71,6 +72,7 @@ const defaultOption = {
}
},
tooltip: {
show:props.data?.options?.tooltip||false,
trigger: 'axis',
axisPointer: {
label: {
@ -189,6 +191,12 @@ const getOption = () => {
title: {
text: props.data.options.title || ''
},
legend: {
show: props.data?.options?.legend || false,
},
tooltip: {
show:props.data?.options?.tooltip||false,
},
grid: {
top: props.data?.options?.gridTop + '%' || '20%',
left: props.data?.options?.gridLeft + '%' || '20%',
@ -235,7 +243,7 @@ onMounted(() => {
});
watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
console.log(1123);
chart && chart.setOption(getOption(), false);
}
}, { deep: true, immediate: true });

2
src/views/boardGenerate/nodes/board/multiBarsNode.vue
Unescape Escape View File

@ -76,6 +76,7 @@ const getOption = () => {
top: '5%'
},
legend: {
show:props.data?.options?.legend||false,
icon: 'circle',
top: '5%',
right: '5%',
@ -86,6 +87,7 @@ const getOption = () => {
}
},
tooltip: {
show:props.data?.options?.tooltip||false,
trigger: 'axis',
axisPointer: {
label: {

2
src/views/boardGenerate/nodes/board/multiCurvesNode.vue
Unescape Escape View File

@ -76,6 +76,7 @@ const getOption = () => {
top: '5%'
},
legend: {
show: props.data?.options?.legend || false,
icon: 'circle',
top: '5%',
right: '5%',
@ -86,6 +87,7 @@ const getOption = () => {
}
},
tooltip: {
show:props.data?.options?.tooltip||false,
trigger: 'axis',
axisPointer: {
label: {

2
src/views/boardGenerate/nodes/board/multiLinesNode.vue
Unescape Escape View File

@ -76,6 +76,7 @@ const getOption = () => {
top: '5%'
},
legend: {
show:props.data?.options?.legend||false,
icon: 'circle',
top: '5%',
right: '5%',
@ -86,6 +87,7 @@ const getOption = () => {
}
},
tooltip: {
show:props.data?.options?.tooltip||false,
trigger: 'axis',
axisPointer: {
label: {

5
src/views/boardGenerate/nodes/board/pieNode.vue
Unescape Escape View File

@ -62,6 +62,7 @@ const getOption = () => {
top: '5%'
},
legend: {
show:props.data?.options?.legend||false,
icon: 'circle',
top: '5%',
right: '5%',
@ -72,6 +73,7 @@ const getOption = () => {
}
},
tooltip: {
show:props.data?.options?.tooltip||false,
trigger: 'axis',
axisPointer: {
label: {
@ -102,6 +104,7 @@ const getOption = () => {
type: 'pie',
radius: '50%',
label: {
show:props.data?.options?.label||false,
formatter: '{b}: {d}%'
}
}
@ -109,7 +112,7 @@ const getOption = () => {
};
let xData = [props.inputData?.x1 || []];
let yData = [props.inputData?.y1 || []];
console.log(props.inputData);
console.log(chartOption);
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
let source = [['product', ...[props.data.options?.yNames?.[0] || '数量']]];
Array(length).fill(0).forEach((_, i) => {

8
src/views/boardGenerate/tool.js
Unescape Escape View File

@ -10,13 +10,13 @@ const getId = (type) => {
const getOption = (e) => {
if (e === 'line' || e === 'multiLines') {
return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '' };
return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '', tooltip:true, legend:true };
} else if (e === 'bar' || e === 'multiBars') {
return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '' };
return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '', tooltip:true, legend:true };
} else if (e === 'curve' || e === 'multiCurves') {
return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '' };
return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '', tooltip:true, legend:true };
} else if (e === 'pie') {
return { title: '', yNames: [] };
return { title: '', yNames: [], tooltip:true, legend:true,label:true };
} else if (e === 'customBoard') {
return { title: '', yNames: [] };
} else if (e === 'data') {

9
src/views/boardGenerate/view.vue
Unescape Escape View File

@ -5,7 +5,6 @@
<template v-if="i.type === 'customBoard'">
<CustomBoardNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomBoardNode>
</template>
00
<template v-if="i.type === 'customData'">
<CustomDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomDataNode>
</template>
@ -101,8 +100,8 @@ const getInputData = (e) => {
});
return outputData;
};
onMounted(() => {
getBoardApi(router.currentRoute.value.query.id)
onMounted(async () => {
await getBoardApi(router.currentRoute.value.query.id)
.then((res) => {
let data = res.data;
nodes.value = data.designPagePointList?.length !== 0 ? data.designPagePointList.map(e => {
@ -157,8 +156,10 @@ onMounted(() => {
sourceHandle: e.sourceHandleId
};
}) || [];
area.value = JSON.parse(data.customContent) || {};
});
area.value = JSON.parse(localStorage.getItem('PAGEDATA'));
// area.value = nodes.value.find(e=>e.type==='area')
// console.log('area.value',area.value);
});
</script>
<style lang="less" scoped>

46
src/views/print/index.vue
Unescape Escape View File

@ -20,6 +20,7 @@
<el-input v-model="zoomInput" disabled style="margin-left: 8px;width:100px" />
<el-button @click="zoomChange(0.1)" icon="ZoomIn" circle style="margin-left: 8px;" />
<el-button type="primary" @click="view" style="margin-left: 12px;">预览</el-button>
<el-button type="primary" @click="imp" style="margin-left: 12px;">场景1</el-button>
<el-button type="primary" @click="save" style="margin-left: 12px;">保存</el-button>
<el-button type="primary" @click="clear" style="margin-left: 12px;">清空</el-button>
</div>
@ -442,17 +443,17 @@ const logEvent = async (eventname, event) => {
break;
}
};
// const nodes = ref([{
// id: pid.value,
// name: 'area',
// type: 'area',
// position: {
// x: 0,
// y: 0
// },
// data: {}
// }]);
const nodes = ref([]);
const nodes = ref([{
id: pid.value,
name: 'area',
type: 'area',
position: {
x: 0,
y: 0
},
data: {}
}]);
// const nodes = ref([]);
const edges = ref([]);
const setPage = (type, width, height) => {
@ -487,6 +488,17 @@ const save = () => {
localStorage.setItem('printNodes', JSON.stringify(nodes.value));
};
const clear = () => {
pid.value = `area_${uuidv4().replaceAll('-', '_')}`
nodes.value = [{
id: pid.value,
name: 'area',
type: 'area',
position: {
x: 0,
y: 0
},
data: {}
}]
};
onMounted(() => {
@ -497,8 +509,11 @@ onMounted(() => {
zoom: 1
});
});
nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
pid.value = nodes.value.find(e => e.name === 'area')?.id;
let nodesData = localStorage.getItem('printNodes')
if(nodesData){
nodes.value = JSON.parse(nodesData);
pid.value = nodes.value.find(e => e.name === 'area')?.id;
}
console.log(nodes.value);
});
watch(() => flowRef.value?.viewport, () => {
@ -524,6 +539,11 @@ window.addEventListener('keyup', keyup);
const nodeChange = () => {
updateNode(nodeData.value.id, JSON.parse(JSON.stringify(nodeData.value)), { replace: false });
};
const imp = () =>{
let json ='[{"id":"text_e0ed2e33_b370_493f_9e85_179277939055","type":"text","dimensions":{"width":189,"height":76},"computedPosition":{"x":283.4645669291338,"y":0,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":283.4645669291338,"y":0},"data":{"options":{"field":"planDetailId","default":"","border":[{"type":"top","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"right","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"bottom","isShow":true,"width":1,"color":"#000","borderType":"solid"},{"type":"left","isShow":false,"width":1,"color":"#000","borderType":"solid"}]},"outputData":{}},"events":{},"name":"text","extent":"parent"},{"id":"text_af484d4b_42c0_463f_b0f7_eb0f716fbc5a","type":"text","dimensions":{"width":189,"height":19},"computedPosition":{"x":283.4645669291338,"y":94.48818897637794,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":283.4645669291338,"y":94.48818897637794},"data":{"options":{"default":"planId","border":[{"type":"top","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"right","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"bottom","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"left","isShow":false,"width":1,"color":"#000","borderType":"solid"}]},"outputData":{}},"events":{},"name":"text","extent":"parent","style":{"width":"189px","height":"18.89763779527559px"}},{"id":"barCode_1dd4465e_928c_49f2_867b_061fc5f96843","type":"barCode","dimensions":{"width":189,"height":76},"computedPosition":{"x":0,"y":188.97637795275588,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":0,"y":188.97637795275588},"data":{"options":{"field":"returnBarcode","default":""},"outputData":{}},"events":{},"name":"barCode","extent":"parent"},{"id":"QRCode_9ad0beba_b555_45ac_a1c6_23f23a6c9e9a","type":"QRCode","dimensions":{"width":189,"height":189},"computedPosition":{"x":529.1338582677165,"y":151.1811023622047,"z":1000},"handleBounds":{"source":null,"target":null},"selected":true,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":529.1338582677165,"y":151.1811023622047},"data":{"options":{"field":"returnBarcode","default":""},"outputData":{}},"events":{},"name":"QRCode","extent":"parent"}]'
nodes.value = JSON.parse(json);
pid.value = nodes.value.find(e => e.name === 'area')?.id;
}
</script>
<style lang="less" scoped>
.borderOption {

Write Preview
Loading…
Cancel
Save