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": { "dependencies": {
"@element-plus/icons-vue": "2.3.1", "@element-plus/icons-vue": "2.3.1",
"@highlightjs/vue-plugin": "2.1.0", "@highlightjs/vue-plugin": "2.1.0",
"@vitejs/plugin-basic-ssl": "^2.0.0",
"@vue-flow/background": "^1.3.2", "@vue-flow/background": "^1.3.2",
"@vue-flow/core": "^1.43.1", "@vue-flow/core": "^1.43.1",
"@vue-flow/node-resizer": "^1.4.0", "@vue-flow/node-resizer": "^1.4.0",

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

@ -1,402 +1,413 @@
<template> <template>
<div class="leftPanel"> <div >
<el-tabs v-model="leftPanelState" class="demo-tabs" type="border-card"> <div class="leftPanel">
<el-tab-pane label="图表组件" name="1"> <el-tabs v-model="leftPanelState" class="demo-tabs" type="border-card">
<el-card class="moduleCard" shadow="never" :draggable="true" <el-tab-pane label="图表组件" name="1">
@dragstart="onDragStart($event, 'line')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">折线</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'multiLines')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">多折线</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'curve')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">曲线</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'multiCurves')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">多曲线
</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'bar')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">柱状图</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'multiBars')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">多柱状图
</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'pie')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template>
<div class="moduleText">饼图</div>
</el-card>
<template v-for="i in customBoard">
<el-card class="moduleCard" shadow="never" :draggable="true" <el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'customBoard',i)" @dragstart="onDragStart($event, 'line')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}"> :body-style="{padding:'4px 0'}">
<template #header> <template #header>
<StarFilled /> <StarFilled />
</template> </template>
<div class="moduleText">{{ i.name }}</div> <div class="moduleText">折线</div>
</el-card> </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" <el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'customData',i)" @dragstart="onDragStart($event, 'multiLines')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}"> :body-style="{padding:'4px 0'}">
<template #header> <template #header>
<StarFilled /> <StarFilled />
</template> </template>
<div class="moduleText">{{ i.name }}</div> <div class="moduleText">多折线</div>
</el-card> </el-card>
</template> <el-card class="moduleCard" shadow="never" :draggable="true"
</el-tab-pane> @dragstart="onDragStart($event, 'curve')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
<el-tab-pane label="表单组件" name="3"> :body-style="{padding:'4px 0'}">
<el-card class="moduleCard" shadow="never" :draggable="true" <template #header>
@dragstart="onDragStart($event, 'text')" :style="{display:'inline-block',margin:'0 4px 4px 0'}" <StarFilled />
:body-style="{padding:'4px 0'}"> </template>
<template #header> <div class="moduleText">曲线</div>
<StarFilled /> </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> </template>
<div class="moduleText">文字</div> </el-tab-pane>
</el-card> <el-tab-pane label="数据源" name="2">
<el-card class="moduleCard" shadow="never" :draggable="true" <el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'inputNode')" :style="{display:'inline-block',margin:'0 4px 4px 0'}" @dragstart="onDragStart($event, 'map')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}"> :body-style="{padding:'4px 0'}">
<template #header> <template #header>
<StarFilled /> <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> </template>
<div class="moduleText">输入框</div> </el-tab-pane>
</el-card> <el-tab-pane label="表单组件" name="3">
<el-card class="moduleCard" shadow="never" :draggable="true" <el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'time')" :style="{display:'inline-block',margin:'0 4px 4px 0'}" @dragstart="onDragStart($event, 'text')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}"> :body-style="{padding:'4px 0'}">
<template #header> <template #header>
<StarFilled /> <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> </template>
<div class="moduleText">时间</div> <template #node-customBoard="customBoardNodeProps">
</el-card> <CustomBoardNode :inputData=getInputData(customBoardNodeProps.id) v-bind="customBoardNodeProps"
<el-card class="moduleCard" shadow="never" :draggable="true" @resize="resize"></CustomBoardNode>
@dragstart="onDragStart($event, 'img')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<StarFilled />
</template> </template>
<div class="moduleText">图片</div> <template #node-customData="customDataNodeProps">
</el-card> <CustomDataNode :inputData=getInputData(customDataNodeProps.id) v-bind="customDataNodeProps"
</el-tab-pane> @resize="resize"></CustomDataNode>
</el-tabs> </template>
</div> <template #node-line="lineNodeProps">
<div class="content" @drop="onDrop"> <LineNode :inputData=getInputData(lineNodeProps.id) v-bind="lineNodeProps"
<div class="pageSetting"> @resize="resize"></LineNode>
<span class="pageTitle">{{ pageTitle }}</span> </template>
<div class="btns"> <template #node-multiLines="multiLinesNodeProps">
<el-button type="primary" text :icon="Setting" @click="pageSetting">页面配置</el-button> <MultiLinesNode :inputData=getInputData(multiLinesNodeProps.id) v-bind="multiLinesNodeProps"
<el-button type="primary" text :icon="Check" @click="save">保存</el-button> @resize="resize"></MultiLinesNode>
<el-button type="primary" text :icon="Close" @click="clear">清空</el-button> </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> </div>
<div class="flowArea"> <div class="rightPanel">
<VueFlow :min-zoom="0.01" ref="flowRef" v-model:nodes="nodes" v-model:edges="edges" fit-view-on-init <el-collapse>
default-marker-color="#409EFF" <el-collapse-item title="基础设置" name="1" v-if="Object.keys(nodeDataForm).length>0">
@connect="logEvent('connect', $event)" <el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
@node-click="logEvent('click', $event)" <el-form-item label="x">
@pane-click="logEvent('paneClick', $event)" <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.x" style="width: 100%"
@node-drag-start="logEvent('nodeDrag', $event)" @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
@node-contextMenu="logEvent('contextmenu', $event)" </el-form-item>
@dragover="onDragOver" <el-form-item label="y">
> <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.y" style="width: 100%"
<Background :size="1" :gap="20" pattern-color="#BDBDBD" style="background-color: #000" /> @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
</el-form-item>
<template #node-area="areaNodeProps"> <el-form-item label="宽度">
<AreaNode v-bind="areaNodeProps" :pageData="pageData"></AreaNode> <el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.width" style="width: 100%"
</template> @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
<template #node-customBoard="customBoardNodeProps"> </el-form-item>
<CustomBoardNode :inputData=getInputData(customBoardNodeProps.id) v-bind="customBoardNodeProps" <el-form-item label="高度">
@resize="resize"></CustomBoardNode> <el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.height" style="width: 100%"
</template> @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
<template #node-customData="customDataNodeProps"> </el-form-item>
<CustomDataNode :inputData=getInputData(customDataNodeProps.id) v-bind="customDataNodeProps" </el-form>
@resize="resize"></CustomDataNode> </el-collapse-item>
</template> <el-collapse-item title="数据配置" name="2" v-if="Object.keys(nodeAttrForm).length>0">
<template #node-line="lineNodeProps"> <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
<LineNode :inputData=getInputData(lineNodeProps.id) v-bind="lineNodeProps" <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInputArea')">
@resize="resize"></LineNode> <el-input type="textarea" v-model="nodeAttrForm.defaultInputArea" style="width: 100%" />
</template> </el-form-item>
<template #node-multiLines="multiLinesNodeProps"> <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInput')">
<MultiLinesNode :inputData=getInputData(multiLinesNodeProps.id) v-bind="multiLinesNodeProps" <el-input v-model="nodeAttrForm.defaultInput" style="width: 100%" />
@resize="resize"></MultiLinesNode> </el-form-item>
</template> <el-form-item label="x轴名称" v-if="Object.keys(nodeAttrForm).includes('xName')">
<template #node-curve="curveNodeProps"> <el-input v-model="nodeAttrForm.xName" style="width: 100%" />
<CurveNode :inputData=getInputData(curveNodeProps.id) v-bind="curveNodeProps" </el-form-item>
@resize="resize"></CurveNode> <el-form-item label="y轴名称" v-if="Object.keys(nodeAttrForm).includes('yName')">
</template> <el-input v-model="nodeAttrForm.yName" style="width: 100%" />
<template #node-multiCurves="multiCurvesNodeProps"> </el-form-item>
<MultiCurvesNode :inputData=getInputData(multiCurvesNodeProps.id) v-bind="multiCurvesNodeProps" <el-form-item label="顶部距离" v-if="Object.keys(nodeAttrForm).includes('gridTop')">
@resize="resize"></MultiCurvesNode> <el-input-number v-model="nodeAttrForm.gridTop" style="width: 100%" :min="0" :max="100" />
</template> </el-form-item>
<template #node-bar="barNodeProps"> <el-form-item label="左侧距离" v-if="Object.keys(nodeAttrForm).includes('gridLeft')">
<BarNode :inputData=getInputData(barNodeProps.id) v-bind="barNodeProps" <el-input-number v-model="nodeAttrForm.gridLeft" style="width: 100%" :min="0" :max="100" />
@resize="resize"></BarNode> </el-form-item>
</template> <el-form-item label="底部距离" v-if="Object.keys(nodeAttrForm).includes('gridBottom')">
<template #node-multiBars="multiBarsNodeProps"> <el-input-number v-model="nodeAttrForm.gridBottom" style="width: 100%" :min="0" :max="100" />
<MultiBarsNode :inputData=getInputData(multiBarsNodeProps.id) v-bind="multiBarsNodeProps" </el-form-item>
@resize="resize"></MultiBarsNode> <el-form-item label="右侧距离" v-if="Object.keys(nodeAttrForm).includes('gridRight')">
</template> <el-input-number v-model="nodeAttrForm.gridRight" style="width: 100%" :min="0" :max="100" />
<template #node-pie="pieNodeProps"> </el-form-item>
<PieNode :inputData=getInputData(pieNodeProps.id) v-bind="pieNodeProps" <el-form-item label="默认日期" v-if="Object.keys(nodeAttrForm).includes('defaultTime')">
@resize="resize"></PieNode> <el-date-picker
</template> v-model="nodeAttrForm.defaultTime"
<template #node-data="dataNodeProps"> type="datetimerange"
<DataNode :inputData=getInputData(dataNodeProps.id) v-bind="dataNodeProps" range-separator="到"
@resize="resize"></DataNode> start-placeholder="开始时间"
</template> end-placeholder="结束时间"
<template #node-text="textNodeProps"> style="width: 100%;height: 100%"
<TextNode :inputData=getInputData(textNodeProps.id) v-bind="textNodeProps" :value-format="nodeAttrForm?.format||'YYYY/MM/DD HH:mm:ss'"
@resize="resize"></TextNode> :format="nodeAttrForm?.format||'YYYY/MM/DD HH:mm:ss'"
</template> />
<template #node-img="imgNodeProps"> </el-form-item>
<ImgNode :inputData=getInputData(imgNodeProps.id) v-bind="imgNodeProps" <el-form-item label="日期格式" v-if="Object.keys(nodeAttrForm).includes('format')">
@resize="resize"></ImgNode> <el-input v-model="nodeAttrForm.format" style="width: 100%" />
</template> </el-form-item>
<template #node-inputNode="inputNodeProps"> <el-form-item label="输出字段名" v-if="Object.keys(nodeAttrForm).includes('field')">
<InputNode :inputData=getInputData(inputNodeProps.id) v-bind="inputNodeProps" <el-input v-model="nodeAttrForm.field" />
@resize="resize"></InputNode> </el-form-item>
</template> <el-form-item label="开始时间字段名" v-if="Object.keys(nodeAttrForm).includes('startTimeId')">
<template #node-time="timeNodeProps"> <el-input v-model="nodeAttrForm.startTimeId" />
<TimeNode :inputData=getInputData(timeNodeProps.id) v-bind="timeNodeProps" </el-form-item>
@resize="resize"></TimeNode> <el-form-item label="结束时间字段名" v-if="Object.keys(nodeAttrForm).includes('endTimeId')">
</template> <el-input v-model="nodeAttrForm.endTimeId" />
<template #node-map="mapNodeProps"> </el-form-item>
<MapNode :inputData=getInputData(mapNodeProps.id) v-bind="mapNodeProps" <el-form-item label="数据映射" v-if="Object.keys(nodeAttrForm).includes('dataMap')">
@resize="resize"></MapNode> <el-table :data="nodeAttrForm.dataMap" style="width: 100%">
</template> <el-table-column label="源字段" min-width="120">
<template #node-staticData="staticDataNodeProps"> <template #default="scope">
<StaticDataNode :inputData=getInputData(staticDataNodeProps.id) v-bind="staticDataNodeProps" <el-input v-model="scope.row.source" style="width: 100%" />
@resize="resize"></StaticDataNode> </template>
</template> </el-table-column>
</VueFlow> <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> </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-dialog v-model="pageSettingVisible" title="页面设置" width="500">
<el-form :model="pageSettingForm"> <el-form :model="pageSettingForm">
<el-form-item label="页面大小" label-width="80px"> <el-form-item label="页面大小" label-width="80px">
@ -411,11 +422,12 @@
<el-form-item label="页面背景" label-width="80px"> <el-form-item label="页面背景" label-width="80px">
<el-upload <el-upload
class="avatar-uploader" class="avatar-uploader"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :action="uploadFileUrl"
:show-file-list="false" :show-file-list="false"
:limit="1" :limit="1"
accept=".jpg,.png" accept=".jpg,.png"
:before-upload="pageBgUploadSuccess" :headers="headers"
:on-success="pageBgUploadSuccess"
> >
<img v-if="pageSettingForm.bg" :src="pageSettingForm.bg" class="avatar" /> <img v-if="pageSettingForm.bg" :src="pageSettingForm.bg" class="avatar" />
<el-icon v-else class="avatar-uploader-icon"> <el-icon v-else class="avatar-uploader-icon">
@ -435,6 +447,7 @@
</el-dialog> </el-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { globalHeaders } from '@/utils/request';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import { Check, Close, Plus, Setting, StarFilled } from '@element-plus/icons-vue'; import { Check, Close, Plus, Setting, StarFilled } from '@element-plus/icons-vue';
@ -472,6 +485,11 @@ const {
updateNode updateNode
} = useVueFlow(); } = 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 pageSettingVisible = ref(false);
const pageSettingForm = ref({}); const pageSettingForm = ref({});
const pageTitle = ref('页面名称'); const pageTitle = ref('页面名称');
@ -492,6 +510,7 @@ const customData = ref([]);
const customBoard = ref([]); const customBoard = ref([]);
const boardData = ref({}); const boardData = ref({});
onMounted(async () => { onMounted(async () => {
loading.value = true
getDataSourceList({ getDataSourceList({
pageNum: 1, pageNum: 1,
pageSize: 9999999 pageSize: 9999999
@ -566,7 +585,11 @@ onMounted(async () => {
}; };
}) || []; }) || [];
pageData.value = JSON.parse(data.customContent) || {}; pageData.value = JSON.parse(data.customContent) || {};
}); })
.finally(()=>{
loading.value = false
})
// pageData.value = JSON.parse(localStorage.getItem('PAGEDATA')); // pageData.value = JSON.parse(localStorage.getItem('PAGEDATA'));
}); });
const customDataForm = ref({}); const customDataForm = ref({});
@ -755,18 +778,21 @@ const clear = () => {
edges.value = []; edges.value = [];
}; };
const pageBgUploadSuccess = (file) => { const pageBgUploadSuccess = (res) => {
const getFileText = (file) => { // const getFileText = (file) => {
const reader = new FileReader(); // const reader = new FileReader();
reader.onload = function(e) { // reader.onload = function(e) {
const fileContent = e.target.result; // const fileContent = e.target.result;
console.log(fileContent); // console.log(fileContent);
pageSettingForm.value.bg = fileContent; // pageSettingForm.value.bg = fileContent;
}; // };
reader.readAsDataURL(file); // reader.readAsDataURL(file);
}; // };
getFileText(file); // getFileText(file);
return false; // return false;
if (res.code === 200) {
pageSettingForm.value.bg = res.data.url
}
}; };
const setPageData = () => { const setPageData = () => {
pageData.value = JSON.parse(JSON.stringify(pageSettingForm.value)); 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%' top: '5%'
}, },
legend: { legend: {
show:props.data?.options?.legend||false,
icon: 'circle', icon: 'circle',
top: '5%', top: '5%',
right: '5%', right: '5%',
@ -71,6 +72,7 @@ const defaultOption = {
} }
}, },
tooltip: { tooltip: {
show:props.data?.options?.tooltip||false,
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
label: { label: {
@ -185,6 +187,12 @@ const getOption = () => {
title: { title: {
text: props.data.options.title || '' text: props.data.options.title || ''
}, },
legend: {
show: props.data?.options?.legend || false,
},
tooltip: {
show:props.data?.options?.tooltip||false,
},
grid: { grid: {
top: props.data?.options?.gridTop + '%' || '20%', top: props.data?.options?.gridTop + '%' || '20%',
left: props.data?.options?.gridLeft + '%' || '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%' top: '5%'
}, },
legend: { legend: {
show:props.data?.options?.legend||false,
icon: 'circle', icon: 'circle',
top: '5%', top: '5%',
right: '5%', right: '5%',
@ -71,6 +72,7 @@ const defaultOption = {
} }
}, },
tooltip: { tooltip: {
show:props.data?.options?.tooltip||false,
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
label: { label: {
@ -192,6 +194,12 @@ const getOption = () => {
title: { title: {
text: props.data.options.title || '' text: props.data.options.title || ''
}, },
legend: {
show: props.data?.options?.legend || false,
},
tooltip: {
show:props.data?.options?.tooltip||false,
},
grid: { grid: {
top: props.data?.options?.gridTop + '%' || '20%', top: props.data?.options?.gridTop + '%' || '20%',
left: props.data?.options?.gridLeft + '%' || '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%' top: '5%'
}, },
legend: { legend: {
show:props.data?.options?.legend||false,
icon: 'circle', icon: 'circle',
top: '5%', top: '5%',
right: '5%', right: '5%',
@ -71,6 +72,7 @@ const defaultOption = {
} }
}, },
tooltip: { tooltip: {
show:props.data?.options?.tooltip||false,
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
label: { label: {
@ -189,6 +191,12 @@ const getOption = () => {
title: { title: {
text: props.data.options.title || '' text: props.data.options.title || ''
}, },
legend: {
show: props.data?.options?.legend || false,
},
tooltip: {
show:props.data?.options?.tooltip||false,
},
grid: { grid: {
top: props.data?.options?.gridTop + '%' || '20%', top: props.data?.options?.gridTop + '%' || '20%',
left: props.data?.options?.gridLeft + '%' || '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) => { watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) { if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
console.log(1123);
chart && chart.setOption(getOption(), false); chart && chart.setOption(getOption(), false);
} }
}, { deep: true, immediate: true }); }, { deep: true, immediate: true });

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

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

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

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

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

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

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

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

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

@ -5,7 +5,6 @@
<template v-if="i.type === 'customBoard'"> <template v-if="i.type === 'customBoard'">
<CustomBoardNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomBoardNode> <CustomBoardNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomBoardNode>
</template> </template>
00
<template v-if="i.type === 'customData'"> <template v-if="i.type === 'customData'">
<CustomDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomDataNode> <CustomDataNode :isView="true" :inputData=getInputData(i.id) v-bind="i"></CustomDataNode>
</template> </template>
@ -101,8 +100,8 @@ const getInputData = (e) => {
}); });
return outputData; return outputData;
}; };
onMounted(() => { onMounted(async () => {
getBoardApi(router.currentRoute.value.query.id) await getBoardApi(router.currentRoute.value.query.id)
.then((res) => { .then((res) => {
let data = res.data; let data = res.data;
nodes.value = data.designPagePointList?.length !== 0 ? data.designPagePointList.map(e => { nodes.value = data.designPagePointList?.length !== 0 ? data.designPagePointList.map(e => {
@ -157,8 +156,10 @@ onMounted(() => {
sourceHandle: e.sourceHandleId 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> </script>
<style lang="less" scoped> <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-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 @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="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="save" style="margin-left: 12px;">保存</el-button>
<el-button type="primary" @click="clear" style="margin-left: 12px;">清空</el-button> <el-button type="primary" @click="clear" style="margin-left: 12px;">清空</el-button>
</div> </div>
@ -442,17 +443,17 @@ const logEvent = async (eventname, event) => {
break; break;
} }
}; };
// const nodes = ref([{ const nodes = ref([{
// id: pid.value, id: pid.value,
// name: 'area', name: 'area',
// type: 'area', type: 'area',
// position: { position: {
// x: 0, x: 0,
// y: 0 y: 0
// }, },
// data: {} data: {}
// }]); }]);
const nodes = ref([]); // const nodes = ref([]);
const edges = ref([]); const edges = ref([]);
const setPage = (type, width, height) => { const setPage = (type, width, height) => {
@ -487,6 +488,17 @@ const save = () => {
localStorage.setItem('printNodes', JSON.stringify(nodes.value)); localStorage.setItem('printNodes', JSON.stringify(nodes.value));
}; };
const clear = () => { const clear = () => {
pid.value = `area_${uuidv4().replaceAll('-', '_')}`
nodes.value = [{
id: pid.value,
name: 'area',
type: 'area',
position: {
x: 0,
y: 0
},
data: {}
}]
}; };
onMounted(() => { onMounted(() => {
@ -497,8 +509,11 @@ onMounted(() => {
zoom: 1 zoom: 1
}); });
}); });
nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]'); let nodesData = localStorage.getItem('printNodes')
pid.value = nodes.value.find(e => e.name === 'area')?.id; if(nodesData){
nodes.value = JSON.parse(nodesData);
pid.value = nodes.value.find(e => e.name === 'area')?.id;
}
console.log(nodes.value); console.log(nodes.value);
}); });
watch(() => flowRef.value?.viewport, () => { watch(() => flowRef.value?.viewport, () => {
@ -524,6 +539,11 @@ window.addEventListener('keyup', keyup);
const nodeChange = () => { const nodeChange = () => {
updateNode(nodeData.value.id, JSON.parse(JSON.stringify(nodeData.value)), { replace: false }); 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.borderOption { .borderOption {

Write Preview
Loading…
Cancel
Save