@@ -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 = () => {