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

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

@ -49,134 +49,160 @@ 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, color: '#fff'
color: '#fff'
},
left: '0',
top: '5%'
}, },
legend: { left: '0',
icon: 'circle', top: '5%'
top: '5%', },
right: '5%', legend: {
itemWidth: 6, icon: 'circle',
itemGap: 20, top: '5%',
textStyle: { right: '5%',
color: '#fff' itemWidth: 6,
itemGap: 20,
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
show: true,
backgroundColor: '#fff',
color: '#000',
borderColor: 'rgba(0,0,0,0)',
shadowColor: 'rgba(0,0,0,0)',
shadowOffsetY: 0
},
lineStyle: {
width: 0
} }
}, },
tooltip: { backgroundColor: '#fff',
trigger: 'axis', textStyle: {
color: '#000'
},
padding: [10, 10],
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
},
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 || '',
type: 'category',
axisLine: {
lineStyle: {
color: '#DCE2E8'
}
},
axisTick: {
show: true
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff'
},
// 默认x轴字体大小
fontSize: 12,
// margin:文字到x轴的距离
margin: 3
},
axisPointer: { axisPointer: {
label: { label: {
show: true, padding: [0, 0, 0, 0],
backgroundColor: '#fff', margin: 0,
color: '#000', // 移入时的字体大小
borderColor: 'rgba(0,0,0,0)', fontSize: 12
shadowColor: 'rgba(0,0,0,0)', }
shadowOffsetY: 0 },
}, boundaryGap: true
}
],
yAxis: [
{
name: props.data?.options?.yName || '',
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: { lineStyle: {
width: 0 color: '#fff'
} }
}, },
backgroundColor: '#fff', axisLabel: {
textStyle: { textStyle: {
color: '#000' color: '#fff'
}
}, },
padding: [10, 10], splitLine: {
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)' show: false
}, }
grid: { }
top: '30%', ],
bottom: '10%' series: [
}, {
xAxis: [ type: 'bar',
{ itemStyle: {
type: 'category', normal: {
axisLine: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
lineStyle: { offset: 0,
color: '#DCE2E8' color: '#0372FF'
}
},
axisTick: {
show: true
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff'
}, },
// 默认x轴字体大小 {
fontSize: 12, offset: 1,
// margin:文字到x轴的距离 color: '#75ECFF'
margin: 3 }
}, ])
axisPointer: {
label: {
padding: [0, 0, 0, 0],
margin: 0,
// 移入时的字体大小
fontSize: 12
}
},
boundaryGap: true
}
],
yAxis: [
{
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
textStyle: {
color: '#fff'
}
},
splitLine: {
show: false
} }
},
barMaxWidth: 50,
label: {
show: true,
position: 'top',
color: '#fff',
fontSize: 16
} }
], }
series: [ ]
{ };
type: 'bar', const getOption = () => {
itemStyle: { const chartOption = {
normal: { title: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ text: props.data.options.title || ''
offset: 0, },
color: '#0372FF' grid: {
}, top: props.data?.options?.gridTop + '%' || '20%',
{ left: props.data?.options?.gridLeft + '%' || '20%',
offset: 1, bottom: props.data?.options?.gridBottom + '%' || '20%',
color: '#75ECFF' right: props.data?.options?.gridRight + '%' || '20%'
} },
]) xAxis: [
} {
}, name: props.data?.options?.xName || ''
barMaxWidth: 50,
label: {
show: true,
position: 'top',
color: '#fff',
fontSize: 16
} }
} ],
] 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) => {

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

@ -49,138 +49,163 @@ 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 = {
title: {
text: props.data.options.title || '',
textStyle: {
fontSize: 12,
fontWeight: 400,
color: '#fff'
},
left: '0',
top: '5%'
},
legend: {
icon: 'circle',
top: '5%',
right: '5%',
itemWidth: 6,
itemGap: 20,
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
show: true,
backgroundColor: '#fff',
color: '#000',
borderColor: 'rgba(0,0,0,0)',
shadowColor: 'rgba(0,0,0,0)',
shadowOffsetY: 0
},
lineStyle: {
width: 0
}
},
backgroundColor: '#fff',
textStyle: {
color: '#000'
},
padding: [10, 10],
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
},
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 || '',
type: 'category',
axisLine: {
lineStyle: {
color: '#DCE2E8'
}
},
axisTick: {
show: true
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff'
},
// 默认x轴字体大小
fontSize: 12,
// margin:文字到x轴的距离
margin: 3
},
axisPointer: {
label: {
padding: [0, 0, 0, 0],
margin: 0,
// 移入时的字体大小
fontSize: 12
}
},
boundaryGap: true
}
],
yAxis: [
{
name: props.data?.options?.yName || '',
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
textStyle: {
color: '#fff'
}
},
splitLine: {
show: false
}
}
],
series: [
{
type: 'line',
symbolSize: 1,
symbol: 'circle',
smooth: true,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 1,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#9effff'
},
{
offset: 1,
color: '#9E87FF'
}
]),
shadowColor: 'rgba(158,135,255, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
},
itemStyle: {
normal: {
color: colorList[0],
borderColor: colorList[0]
}
}
}
]
};
const getOption = () => { const getOption = () => {
const chartOption = { const chartOption = {
title: { title: {
text: props.data.options.title || '设备运行数量', text: props.data.options.title || ''
textStyle: {
fontSize: 12,
fontWeight: 400,
color: '#fff'
},
left: '0',
top: '5%'
},
legend: {
icon: 'circle',
top: '5%',
right: '5%',
itemWidth: 6,
itemGap: 20,
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
show: true,
backgroundColor: '#fff',
color: '#000',
borderColor: 'rgba(0,0,0,0)',
shadowColor: 'rgba(0,0,0,0)',
shadowOffsetY: 0
},
lineStyle: {
width: 0
}
},
backgroundColor: '#fff',
textStyle: {
color: '#000'
},
padding: [10, 10],
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: [
{ {
type: 'category', name: props.data?.options?.xName || ''
axisLine: {
lineStyle: {
color: '#DCE2E8'
}
},
axisTick: {
show: true
},
axisLabel: {
interval: 0,
textStyle: {
color: '#fff'
},
// 默认x轴字体大小
fontSize: 12,
// margin:文字到x轴的距离
margin: 3
},
axisPointer: {
label: {
padding: [0, 0, 0, 0],
margin: 0,
// 移入时的字体大小
fontSize: 12
}
},
boundaryGap: true
} }
], ],
yAxis: [ yAxis: [
{ {
type: 'value', name: props.data?.options?.yName || ''
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#fff'
}
},
axisLabel: {
textStyle: {
color: '#fff'
}
},
splitLine: {
show: false
}
}
],
series: [
{
type: 'line',
symbolSize: 1,
symbol: 'circle',
smooth: true,
yAxisIndex: 0,
showSymbol: false,
lineStyle: {
width: 1,
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: '#9effff'
},
{
offset: 1,
color: '#9E87FF'
}
]),
shadowColor: 'rgba(158,135,255, 0.3)',
shadowBlur: 10,
shadowOffsetY: 20
},
itemStyle: {
normal: {
color: colorList[0],
borderColor: colorList[0]
}
}
} }
] ]
}; };
@ -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