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

修改看版配置

Browse Source
master
夜笙歌 4 weeks ago
parent b46b989f1c
commit ea2754a41c
9 changed files with 362 additions and 267 deletions
Show Stats Download Patch File Download Diff File

7
src/router/index.ts
Unescape Escape View File

@ -26,6 +26,11 @@ import Layout from '@/layout/index.vue';
// 公共路由 // 公共路由
export const constantRoutes: RouteRecordRaw[] = [ export const constantRoutes: RouteRecordRaw[] = [
{
path: '/print',
hidden: true,
component: () => import('@/views/print/index.vue')
},
{ {
path: '/boardGenerate', path: '/boardGenerate',
hidden: true, hidden: true,
@ -419,7 +424,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
meta: { title: '保养工单申请', activeMenu: '/dms/maint/maintEdit', noCache: true } meta: { title: '保养工单申请', activeMenu: '/dms/maint/maintEdit', noCache: true }
} }
] ]
}, }
]; ];

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

@ -273,16 +273,16 @@
<el-input v-model="nodeAttrForm.yName" style="width: 100%" /> <el-input v-model="nodeAttrForm.yName" style="width: 100%" />
</el-form-item> </el-form-item>
<el-form-item label="顶部距离" v-if="Object.keys(nodeAttrForm).includes('gridTop')"> <el-form-item label="顶部距离" v-if="Object.keys(nodeAttrForm).includes('gridTop')">
<el-input-number v-model="nodeAttrForm.gridTop" style="width: 100%" /> <el-input-number v-model="nodeAttrForm.gridTop" style="width: 100%" :min="0" :max="100" />
</el-form-item> </el-form-item>
<el-form-item label="左侧距离" v-if="Object.keys(nodeAttrForm).includes('gridLeft')"> <el-form-item label="左侧距离" v-if="Object.keys(nodeAttrForm).includes('gridLeft')">
<el-input-number v-model="nodeAttrForm.gridLeft" style="width: 100%" /> <el-input-number v-model="nodeAttrForm.gridLeft" style="width: 100%" :min="0" :max="100" />
</el-form-item> </el-form-item>
<el-form-item label="底部距离" v-if="Object.keys(nodeAttrForm).includes('gridBottom')"> <el-form-item label="底部距离" v-if="Object.keys(nodeAttrForm).includes('gridBottom')">
<el-input-number v-model="nodeAttrForm.gridBottom" style="width: 100%" /> <el-input-number v-model="nodeAttrForm.gridBottom" style="width: 100%" :min="0" :max="100" />
</el-form-item> </el-form-item>
<el-form-item label="右侧距离" v-if="Object.keys(nodeAttrForm).includes('gridRight')"> <el-form-item label="右侧距离" v-if="Object.keys(nodeAttrForm).includes('gridRight')">
<el-input-number v-model="nodeAttrForm.gridRight" style="width: 100%" /> <el-input-number v-model="nodeAttrForm.gridRight" style="width: 100%" :min="0" :max="100" />
</el-form-item> </el-form-item>
<el-form-item label="默认日期" v-if="Object.keys(nodeAttrForm).includes('defaultTime')"> <el-form-item label="默认日期" v-if="Object.keys(nodeAttrForm).includes('defaultTime')">
<el-date-picker <el-date-picker

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

@ -49,10 +49,9 @@ const props = defineProps({
const chartRef = ref(); const chartRef = ref();
let chart = null; let chart = null;
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']; const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
const getOption = () => { const defaultOption = {
const chartOption = {
title: { title: {
text: props.data.options.title || '设备运行数量', text: props.data.options.title || '',
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
fontWeight: 400, fontWeight: 400,
@ -94,11 +93,14 @@ const getOption = () => {
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)' extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
}, },
grid: { grid: {
top: '30%', top: props.data?.options?.gridTop + '%' || '20%',
bottom: '10%' left: props.data?.options?.gridLeft + '%' || '20%',
bottom: props.data?.options?.gridBottom + '%' || '20%',
right: props.data?.options?.gridRight + '%' || '20%'
}, },
xAxis: [ xAxis: [
{ {
name: props.data?.options?.xName || '',
type: 'category', type: 'category',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
@ -131,6 +133,7 @@ const getOption = () => {
], ],
yAxis: [ yAxis: [
{ {
name: props.data?.options?.yName || '',
type: 'value', type: 'value',
axisTick: { axisTick: {
show: false show: false
@ -176,7 +179,30 @@ const getOption = () => {
} }
} }
] ]
}; };
const getOption = () => {
const chartOption = {
title: {
text: props.data.options.title || ''
},
grid: {
top: props.data?.options?.gridTop + '%' || '20%',
left: props.data?.options?.gridLeft + '%' || '20%',
bottom: props.data?.options?.gridBottom + '%' || '20%',
right: props.data?.options?.gridRight + '%' || '20%'
},
xAxis: [
{
name: props.data?.options?.xName || ''
}
],
yAxis: [
{
name: props.data?.options?.yName || ''
}
]
}
;
let xData = [props.inputData?.x1 || []]; let xData = [props.inputData?.x1 || []];
let yData = [props.inputData?.y1 || []]; let yData = [props.inputData?.y1 || []];
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));
@ -202,11 +228,11 @@ onMounted(() => {
chart = echarts.init(chartRef.value, 'macarons', { chart = echarts.init(chartRef.value, 'macarons', {
renderer: 'svg' renderer: 'svg'
}); });
chart.setOption(getOption(), true); chart.setOption(defaultOption, true);
}); });
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)) {
chart && chart.setOption(getOption(), true); chart && chart.setOption(getOption(), false);
} }
}, { deep: true, immediate: true }); }, { deep: true, immediate: true });
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => { watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {

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

@ -49,10 +49,9 @@ const props = defineProps({
const chartRef = ref(); const chartRef = ref();
let chart = null; let chart = null;
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']; const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
const getOption = () => { const defaultOption = {
const chartOption = {
title: { title: {
text: props.data.options.title || '设备运行数量', text: props.data.options.title || '',
textStyle: { textStyle: {
fontSize: 12, fontSize: 12,
fontWeight: 400, fontWeight: 400,
@ -94,11 +93,14 @@ const getOption = () => {
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)' extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
}, },
grid: { grid: {
top: '30%', top: props.data?.options?.gridTop + '%' || '20%',
bottom: '10%' left: props.data?.options?.gridLeft + '%' || '20%',
bottom: props.data?.options?.gridBottom + '%' || '20%',
right: props.data?.options?.gridRight + '%' || '20%'
}, },
xAxis: [ xAxis: [
{ {
name: props.data?.options?.xName || '',
type: 'category', type: 'category',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
@ -131,6 +133,7 @@ const getOption = () => {
], ],
yAxis: [ yAxis: [
{ {
name: props.data?.options?.yName || '',
type: 'value', type: 'value',
axisTick: { axisTick: {
show: false show: false
@ -183,6 +186,28 @@ const getOption = () => {
} }
} }
] ]
};
const getOption = () => {
const chartOption = {
title: {
text: props.data.options.title || ''
},
grid: {
top: props.data?.options?.gridTop + '%' || '20%',
left: props.data?.options?.gridLeft + '%' || '20%',
bottom: props.data?.options?.gridBottom + '%' || '20%',
right: props.data?.options?.gridRight + '%' || '20%'
},
xAxis: [
{
name: props.data?.options?.xName || ''
}
],
yAxis: [
{
name: props.data?.options?.yName || ''
}
]
}; };
let xData = [props.inputData?.x1 || []]; let xData = [props.inputData?.x1 || []];
let yData = [props.inputData?.y1 || []]; let yData = [props.inputData?.y1 || []];
@ -209,11 +234,11 @@ onMounted(() => {
chart = echarts.init(chartRef.value, 'macarons', { chart = echarts.init(chartRef.value, 'macarons', {
renderer: 'svg' renderer: 'svg'
}); });
chart.setOption(getOption(), true); chart.setOption(defaultOption, true);
}); });
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)) {
chart && chart.setOption(getOption(), true); chart && chart.setOption(getOption(), false);
} }
}, { deep: true, immediate: true }); }, { deep: true, immediate: true });
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => { watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {

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

@ -49,7 +49,7 @@ const props = defineProps({
const chartRef = ref(); const chartRef = ref();
let chart = null; let chart = null;
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']; const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
const defaultOption= { const defaultOption = {
title: { title: {
text: props.data.options.title || '', text: props.data.options.title || '',
textStyle: { textStyle: {
@ -93,14 +93,14 @@ const defaultOption= {
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)' extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
}, },
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%',
bottom: props.data?.options?.gridBottom+'%' || '20%', bottom: props.data?.options?.gridBottom + '%' || '20%',
right: props.data?.options?.gridRight+'%' || '20%' right: props.data?.options?.gridRight + '%' || '20%'
}, },
xAxis: [ xAxis: [
{ {
name:props.data?.options?.xName || '', name: props.data?.options?.xName || '',
type: 'category', type: 'category',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
@ -130,7 +130,7 @@ const defaultOption= {
], ],
yAxis: [ yAxis: [
{ {
name:props.data?.options?.yName || '', name: props.data?.options?.yName || '',
type: 'value', type: 'value',
axisTick: { axisTick: {
show: false show: false
@ -183,30 +183,29 @@ const defaultOption= {
} }
} }
] ]
} };
const getOption = () => { const getOption = () => {
const chartOption = { const chartOption = {
title: { title: {
text: props.data.options.title || '', text: props.data.options.title || ''
}, },
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%',
bottom: props.data?.options?.gridBottom+'%' || '20%', bottom: props.data?.options?.gridBottom + '%' || '20%',
right: props.data?.options?.gridRight+'%' || '20%' right: props.data?.options?.gridRight + '%' || '20%'
}, },
xAxis: [ xAxis: [
{ {
name:props.data?.options?.xName || '', name: props.data?.options?.xName || ''
} }
], ],
yAxis: [ yAxis: [
{ {
name:props.data?.options?.yName || '', name: props.data?.options?.yName || ''
} }
], ]
}; };
console.log(chartOption);
let xData = [props.inputData?.x1 || []]; let xData = [props.inputData?.x1 || []];
let yData = [props.inputData?.y1 || []]; let yData = [props.inputData?.y1 || []];
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));

2
src/views/boardGenerate/nodes/other/areaNode.vue
Unescape Escape View File

@ -2,7 +2,7 @@
<div style="pointer-events: none"> <div style="pointer-events: none">
<div class="custom-node"> <div class="custom-node">
<div class="area" <div class="area"
:style='`width:${props.pageData.width || "1920px"};height:${props.pageData.height || "1080px"};border: 1px solid #fff;background-image:url(${props.pageData.bg})`'></div> :style='`width:${props.pageData?.width || "1920px"};height:${props.pageData?.height || "1080px"};border: 1px solid #fff;background-image:url(${props.pageData?.bg})`'></div>
</div> </div>
</div> </div>
</template> </template>

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

@ -10,11 +10,11 @@ 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: '' };
} 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: '' };
} 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: '' };
} else if (e === 'pie') { } else if (e === 'pie') {
return { title: '', yNames: [] }; return { title: '', yNames: [] };
} else if (e === 'customBoard') { } else if (e === 'customBoard') {

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

@ -1,10 +1,11 @@
<template> <template>
<div class="content" <div class="content"
:style='`width:${area.width || "100%"};height:${area.height || "100%"};background-image:url(${area.bg})`'> :style='`width:${area?.width || "100%"};height:${area?.height || "100%"};background-image:url(${area?.bg})`'>
<div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}"> <div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
<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>00 </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>

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

@ -0,0 +1,39 @@
<template>
<div>
<div class="ep-draggable-item" />
<div id="hiprint-printTemplate" />
<div id="PrintElementOptionSetting" />
</div>
</template>
<script>
import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint';
console.log([new defaultElementTypeProvider()]);
hiprint.init({
providers: [new defaultElementTypeProvider()]
});
hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'));
let hiprintTemplate = new hiprint.PrintTemplate({
template: {}, // 模板json
settingContainer: '#PrintElementOptionSetting', // 元素参数容器
history: true, // 是否需要 撤销重做功能
onDataChanged: (type, json) => {
// 模板发生改变回调
console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转
console.log(json); // 返回 template
},
onUpdateError: (e) => {
// 更新失败回调
console.log(e);
}
});
// 设计器的容器
hiprintTemplate.design('#hiprint-printTemplate');
</script>
<style scoped>
.ep-draggable-item, #hiprint-printTemplate, #PrintElementOptionSetting {
display: inline-block;
width: 300px;
height: 100vh;
}
</style>
Write Preview
Loading…
Cancel
Save