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",

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

@ -1,4 +1,5 @@
<template>
<div >
<div class="leftPanel">
<el-tabs v-model="leftPanelState" class="demo-tabs" type="border-card">
<el-tab-pane label="图表组件" name="1">
@ -154,7 +155,7 @@
<el-button type="primary" text :icon="Close" @click="clear">清空</el-button>
</div>
</div>
<div class="flowArea">
<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)"
@ -375,6 +376,15 @@
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">
@ -397,6 +407,7 @@
</el-collapse-item>
</el-collapse>
</div>
</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>

44
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') || '[]');
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