From b5367cc258c95f0cc8a69f22b704646ff95f087a Mon Sep 17 00:00:00 2001 From: "BOOL\\25024" Date: Tue, 7 Jan 2025 15:31:59 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=95=B0=E6=8D=AE=E5=AF=BC?= =?UTF-8?q?=E5=87=BAExcel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jsowell-ui/package.json | 3 +- jsowell-ui/src/views/homeIndex/echarts.js | 77 +- jsowell-ui/src/views/homeIndex/homeIndex.vue | 718 ++++++++++--------- 3 files changed, 425 insertions(+), 373 deletions(-) diff --git a/jsowell-ui/package.json b/jsowell-ui/package.json index cd1d240d4..8480e66e4 100644 --- a/jsowell-ui/package.json +++ b/jsowell-ui/package.json @@ -57,7 +57,8 @@ "vue-qr": "^4.0.9", "vue-router": "3.4.9", "vuedraggable": "2.24.3", - "vuex": "3.6.0" + "vuex": "3.6.0", + "xlsx": "^0.18.5" }, "devDependencies": { "@vue/cli-plugin-babel": "4.4.6", diff --git a/jsowell-ui/src/views/homeIndex/echarts.js b/jsowell-ui/src/views/homeIndex/echarts.js index 47a724a96..41ff01a56 100644 --- a/jsowell-ui/src/views/homeIndex/echarts.js +++ b/jsowell-ui/src/views/homeIndex/echarts.js @@ -1,35 +1,70 @@ +import * as XLSX from 'xlsx'; +import { saveAs } from 'file-saver'; + export function barDataView(titleName, fileName) { var dataView = { show: true, readOnly: false, - lang: ['数据视图', '关闭', '刷新'], - optionToContent: function(opt) { - var axisData = opt.xAxis[0].data // 坐标数据 - var series = opt.series // 折线图数据 - var tdHeads = '' + lang: ['数据视图', '关闭', '导出Excel'], + optionToContent: function (opt) { + var axisData = opt.xAxis[0].data; // 坐标数据 + var series = opt.series; // 折线图数据 + var tdHeads = ''; for (let index = 0; index < titleName.length; index++) { - // 样式 - tdHeads += '' + titleName[index] + '' + tdHeads += '' + titleName[index] + ''; } - var tdBodys = '' // 表数据 - var table = '' + tdHeads + ' ' - // 组装表数据 + var tdBodys = ''; // 表数据 + var tableId = 'tableExcel_' + new Date().getTime(); // 动态表格ID + var table = `
${tdHeads}`; + for (var i = 0, l = axisData.length; i < l; i++) { + tdBodys = ''; // 添加坐标轴数据 for (var j = 0; j < series.length; j++) { - var temp = series[j].data[i] + var temp = series[j].data[i]; if (temp != null && temp !== undefined) { - tdBodys += '' + tdBodys += ''; } else { - tdBodys += '' + tdBodys += ''; } } - // 样式 - table += '' + tdBodys + '' - tdBodys = '' + table += '' + tdBodys + ''; } - table += '
' + axisData[i] + '' + temp + '' + temp + '
' + axisData[i] + '
' - return table - } - } - return dataView + table += ''; + return table; + }, + contentToOption: function (html, opt) { + console.log('HTMLDomElement:', html); // 调试信息 + if (!html || !html.tagName) { + console.error('Invalid HTML element passed to contentToOption'); + return opt; + } + + // 获取表格元素 + let tableElement = html.querySelector('table'); + + if (!tableElement) { + console.error('Table element not found within the provided HTML element'); + return opt; + } + + let et = XLSX.utils.table_to_book(tableElement); + let etout = XLSX.write(et, { + bookType: "xlsx", + bookSST: true, + type: "array", + }); + + try { + saveAs( + new Blob([etout], { type: "application/octet-stream" }), + `${fileName}-${new Date().toLocaleString().replace(/[:\/]/g, '-')}.xlsx` + ); + } catch (e) { + console.error("Export failed:", e); + } + + return opt; // 返回原始选项，因为这里没有修改图表的配置 + }, + }; + return dataView; } \ No newline at end of file diff --git a/jsowell-ui/src/views/homeIndex/homeIndex.vue b/jsowell-ui/src/views/homeIndex/homeIndex.vue index 12d7ca098..ec6ff6572 100644 --- a/jsowell-ui/src/views/homeIndex/homeIndex.vue +++ b/jsowell-ui/src/views/homeIndex/homeIndex.vue @@ -1,61 +1,65 @@ @@ -340,43 +356,43 @@ export default { // overflow: scroll; // } .box { - position: relative; - width: 15rem; - display: flex; - height: 6.25rem; - padding: 0.8rem; - /* font-size: 18px; */ - color: #ffffff; - border-radius: 8px; - box-shadow: 0 15px 0.8rem -11px black; - margin-right: 24px; - margin-bottom: 20px; - position: relative; + position: relative; + width: 15rem; + display: flex; + height: 6.25rem; + padding: 0.8rem; + /* font-size: 18px; */ + color: #ffffff; + border-radius: 8px; + box-shadow: 0 15px 0.8rem -11px black; + margin-right: 24px; + margin-bottom: 20px; + position: relative; - .box-image { - position: absolute; - left: 0; - width: 3.75rem; - height: 3.75rem; - // background-size: 100% 100%; - // position: absolute; - // right: 0; - // bottom: 0; - // filter: drop-shadow(40px 0px gray); - } + .box-image { + position: absolute; + left: 0; + width: 3.75rem; + height: 3.75rem; + // background-size: 100% 100%; + // position: absolute; + // right: 0; + // bottom: 0; + // filter: drop-shadow(40px 0px gray); + } - .flex1 { - flex: 1; - margin-left: 48px; - } + .flex1 { + flex: 1; + margin-left: 48px; + } } .box-h1 { - /* margin-top: -14px; */ - font-size: 2rem; + /* margin-top: -14px; */ + font-size: 2rem; } .box-text { - margin-top: 0px; + margin-top: 0px; }