From 72ce5a82c3d0d72fc9781235f869fea4acfec59c Mon Sep 17 00:00:00 2001 From: hwj Date: Wed, 20 May 2026 17:58:14 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=A8=A1=E6=9D=BF=E9=85=8D?= =?UTF-8?q?=E7=BD=AE-=E6=8A=A5=E8=A1=A8=E6=A8=A1=E6=9D=BF=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=8A=A5=E8=A1=A8=E5=85=83=E7=B4=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../printTemplate/ReportTemplateDesigner.vue | 151 +++++++++++++++++- 1 file changed, 150 insertions(+), 1 deletion(-) diff --git a/src/views/mes/printTemplate/ReportTemplateDesigner.vue b/src/views/mes/printTemplate/ReportTemplateDesigner.vue index 32c5f6df..21249c26 100644 --- a/src/views/mes/printTemplate/ReportTemplateDesigner.vue +++ b/src/views/mes/printTemplate/ReportTemplateDesigner.vue @@ -9,6 +9,12 @@ {{ item.label }} +
报表元素
+
+
+ {{ item.label }} +
+
@@ -150,6 +156,7 @@ import { defaultElementTypeProvider, hiprint } from 'vue-plugin-hiprint' import { PrintTemplateApi } from '@/api/mes/printtemplate' import qrCodeImg from '@/assets/imgs/qrCode.png' +import * as echarts from 'echarts' const { t } = useI18n() const message = useMessage() @@ -166,6 +173,12 @@ const baseElements = [ { tid: 'defaultModule.oval', label: '圆形' } ] +const chartElements = [ + { tid: 'chartModule.lineChart', label: '折线图' }, + { tid: 'chartModule.barChart', label: '柱状图' }, + { tid: 'chartModule.donutChart', label: '环形图' } +] + const qrcodeProvider = function () { const addElementTypes = function (context: any) { context.removePrintElementTypes('qrcodeModule') @@ -190,6 +203,139 @@ const qrcodeProvider = function () { return { addElementTypes } } +const chartProvider = function () { + const addElementTypes = function (context: any) { + context.removePrintElementTypes('chartModule') + context.addPrintElementTypes('chartModule', [ + new hiprint.PrintElementTypeGroup('图表', [ + { + tid: 'chartModule.lineChart', + title: '折线图', + type: 'html', + options: { + left: 12, + top: 12, + height: 200, + width: 300, + formatter: `function(t, e, printData) { + if (window.echarts) { + var ptW = e.width || 300; + var ptH = e.height || 200; + var pxW = Math.round(ptW * 4 / 3); + var pxH = Math.round(ptH * 4 / 3); + var dom = document.createElement("div"); + dom.style.width = pxW + "px"; + dom.style.height = pxH + "px"; + var chart = echarts.init(dom, null, {renderer: "svg"}); + chart.setOption({ + animation: false, + grid: { top: 20, right: 20, bottom: 30, left: 40 }, + xAxis: { type: 'category', data: ['1月','2月','3月','4月','5月','6月'] }, + yAxis: { type: 'value' }, + series: [{ + data: printData?.lineData || [120, 200, 150, 80, 70, 110], + type: 'line', + smooth: true, + lineStyle: { color: '#5470c6', width: 2 }, + itemStyle: { color: '#5470c6' }, + areaStyle: { color: 'rgba(84,112,198,0.15)' } + }] + }); + return dom; + } else { + return '
ECharts 未加载，请刷新页面重试
'; + } + }` + } + }, + { + tid: 'chartModule.barChart', + title: '柱状图', + type: 'html', + options: { + left: 12, + top: 12, + height: 200, + width: 300, + formatter: `function(t, e, printData) { + if (window.echarts) { + var ptW = e.width || 300; + var ptH = e.height || 200; + var pxW = Math.round(ptW * 4 / 3); + var pxH = Math.round(ptH * 4 / 3); + var dom = document.createElement("div"); + dom.style.width = pxW + "px"; + dom.style.height = pxH + "px"; + var chart = echarts.init(dom, null, {renderer: "svg"}); + chart.setOption({ + animation: false, + grid: { top: 20, right: 20, bottom: 30, left: 40 }, + xAxis: { type: 'category', data: ['1月','2月','3月','4月','5月','6月'] }, + yAxis: { type: 'value' }, + series: [{ + data: printData?.barData || [120, 200, 150, 80, 70, 110], + type: 'bar', + itemStyle: { color: '#91cc75' } + }] + }); + return dom; + } else { + return '
ECharts 未加载，请刷新页面重试
'; + } + }` + } + }, + { + tid: 'chartModule.donutChart', + title: '环形图', + type: 'html', + options: { + left: 12, + top: 12, + height: 200, + width: 200, + formatter: `function(t, e, printData) { + if (window.echarts) { + var ptW = e.width || 200; + var ptH = e.height || 200; + var pxW = Math.round(ptW * 4 / 3); + var pxH = Math.round(ptH * 4 / 3); + var dom = document.createElement("div"); + dom.style.width = pxW + "px"; + dom.style.height = pxH + "px"; + var chart = echarts.init(dom, null, {renderer: "svg"}); + chart.setOption({ + animation: false, + tooltip: { trigger: 'item' }, + legend: { bottom: '0%', left: 'center' }, + series: [{ + type: 'pie', + radius: ['40%', '70%'], + center: ['50%', '45%'], + label: { show: false }, + emphasis: { scale: false }, + data: printData?.pieData || [ + { value: 1048, name: '分类一' }, + { value: 735, name: '分类二' }, + { value: 580, name: '分类三' }, + { value: 484, name: '分类四' }, + { value: 300, name: '分类五' } + ] + }] + }); + return dom; + } else { + return '
ECharts 未加载，请刷新页面重试
'; + } + }` + } + } + ]) + ]) + } + return { addElementTypes } +} + const dialogVisible = ref(false) const dialogTitle = ref('模板配置') const saveLoading = ref(false) @@ -198,6 +344,7 @@ const currentTemplateJson = ref | undefined>(undefined) const instanceId = `hiprint-designer-${Math.random().toString(36).slice(2)}` const dragContainerId = `${instanceId}-drag` +const chartDragContainerId = `${instanceId}-chart-drag` const designerContainerId = `${instanceId}-designer` const settingContainerId = `${instanceId}-setting` @@ -242,8 +389,9 @@ const ensureInit = () => { if (hiprintInited) { return } + ;(window as any).echarts = echarts hiprint.init({ - providers: [new defaultElementTypeProvider(), qrcodeProvider()] + providers: [new defaultElementTypeProvider(), qrcodeProvider(), chartProvider()] }) hiprintInited = true } @@ -255,6 +403,7 @@ const buildLeftElement = () => { return } hiprint.PrintElementTypeManager.buildByHtml(jquery(`#${dragContainerId} .ep-draggable-item`)) + hiprint.PrintElementTypeManager.buildByHtml(jquery(`#${chartDragContainerId} .ep-draggable-item`)) } const buildDesigner = () => {