|
|
@@ -40,121 +40,421 @@
|
|
|
|
|
|
<script src="../jquery.min.js"></script>
|
|
|
<script src="../dist/layui.js"></script>
|
|
|
+
|
|
|
<script src="../luckysheet/dist/luckysheet.umd.js"></script>
|
|
|
<script src="../luckysheet/dist/plugins/js/plugin.js"></script>
|
|
|
|
|
|
+ <script src="./echarts.js"></script>
|
|
|
+
|
|
|
<!-- uni 的 SDK -->
|
|
|
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
|
|
|
<script>
|
|
|
- document.addEventListener('UniAppJSBridgeReady', function() {
|
|
|
- uni.getEnv(function(res) {
|
|
|
- console.log('当前环境：' + JSON.stringify(res));
|
|
|
- const id = window.location.search.split('?id=')[1]
|
|
|
- $.ajax({
|
|
|
- url: "http://192.168.0.40:8081/reportTable/getReportTableById/" + id,
|
|
|
- type: 'GET',
|
|
|
- success: function(res) {
|
|
|
- if (res.code === 200) {
|
|
|
- const tableData = JSON.parse(res.data.reportTableData)
|
|
|
- const option = tableData.option
|
|
|
- console.log(tableData)
|
|
|
- if (option) {
|
|
|
- option.allowEdit = false
|
|
|
- tableData.showtoolbar = false
|
|
|
- tableData.option.enableAddRow = false
|
|
|
- tableData.option.enableAddBackTop = false
|
|
|
- let data = tableData.option.showtoolbarConfig
|
|
|
- for (let item in data) {
|
|
|
- data[item] = false
|
|
|
+ $(function() {
|
|
|
+ document.addEventListener('UniAppJSBridgeReady', function() {
|
|
|
+ uni.getEnv(function(res) {
|
|
|
+ console.log('当前环境：' + JSON.stringify(res));
|
|
|
+ const id = window.location.search.split('?id=')[1]
|
|
|
+ $.ajax({
|
|
|
+ url: "http://192.168.0.40:8081/reportTable/getReportTableById/" + id,
|
|
|
+ type: 'GET',
|
|
|
+ success: function(res) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ console.log(res.data, 'res.data');
|
|
|
+ // 报表数据
|
|
|
+ let tableData = JSON.parse(res.data.reportTableData)
|
|
|
+ let option = tableData.option
|
|
|
+ console.log(tableData, 'jsonData')
|
|
|
+ // 基础数据项值
|
|
|
+ let baseItem = tableData.baseItem
|
|
|
+ // 数据项
|
|
|
+ let reportTableItemList = res.data.reportTableItemList
|
|
|
+ let reportChartList = res.data.reportChartList
|
|
|
+ // 报表类型
|
|
|
+ let reportTableType = res.data.reportTableType
|
|
|
+ drawTableData(reportTableItemList, reportTableType)
|
|
|
+
|
|
|
+ let luckysheetOption = {
|
|
|
+ container: 'luckysheet', // 设定 DOM 容器的 id
|
|
|
+ title: '报表模板', // 设定表格名称
|
|
|
+ lang: 'zh', // 设定表格语言
|
|
|
+ showinfobar: false, // 是否显示顶部信息栏
|
|
|
+ showtoolbar: false, // 是否显示工具栏
|
|
|
+ showtoolbarConfig: {
|
|
|
+ paintFormat: true, //格式刷
|
|
|
+ moreFormats: true, // 单元格格式
|
|
|
+ font: true, // 字体
|
|
|
+ fontSize: true, // 字号大小
|
|
|
+ bold: true, // 粗体 (Ctrl+B)
|
|
|
+ italic: true, // 斜体 (Ctrl+I)
|
|
|
+ strikethrough: true, // 删除线 (Alt+Shift+5)
|
|
|
+ underline: true, // 下划线 (Alt+Shift+6)
|
|
|
+ textColor: true, // 文本颜色
|
|
|
+ fillColor: true, // 单元格颜色
|
|
|
+ border: true, // 边框
|
|
|
+ mergeCell: true, // 合并单元格
|
|
|
+ horizontalAlignMode: true, // 水平对齐方式
|
|
|
+ verticalAlignMode: true, // 垂直对齐方式
|
|
|
+ function: true, // 公式
|
|
|
+ // image: true
|
|
|
+ // chart: true
|
|
|
+ },
|
|
|
+ showsheetbar: false, // 是否显示底部 sheet 页按钮
|
|
|
+ sheetFormulaBar: false, // 是否显示公式
|
|
|
+ row: 120, // 是否显示底部 sheet 页按钮
|
|
|
+ data: [{
|
|
|
+ "name": "统计报表", //工作表名称
|
|
|
+ }],
|
|
|
+ cellRightClickConfig: { // 自定义配置单元格右击菜单
|
|
|
+ copy: true, // 复制
|
|
|
+ copyAs: false, // 复制为
|
|
|
+ paste: true, // 粘贴
|
|
|
+ insertRow: true, // 插入行
|
|
|
+ insertColumn: true, // 插入列
|
|
|
+ deleteRow: true, // 删除选中行
|
|
|
+ deleteColumn: true, // 删除选中列
|
|
|
+ deleteCell: false, // 删除单元格
|
|
|
+ hideRow: false, // 隐藏选中行和显示选中行
|
|
|
+ hideColumn: false, // 隐藏选中列和显示选中列
|
|
|
+ rowHeight: true, // 行高
|
|
|
+ columnWidth: true, // 列宽
|
|
|
+ clear: false, // 清除内容
|
|
|
+ matrix: false, // 矩阵操作选区
|
|
|
+ sort: false, // 排序选区
|
|
|
+ filter: false, // 筛选选区
|
|
|
+ chart: true, // 图表生成
|
|
|
+ image: false, // 插入图片
|
|
|
+ link: false, // 插入链接
|
|
|
+ data: false, // 数据验证
|
|
|
+ cellFormat: false // 设置单元格格式
|
|
|
+ },
|
|
|
+ plugins: ['chart']
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!option) {
|
|
|
+ option = JSON.parse(JSON.stringify(luckysheetOption))
|
|
|
}
|
|
|
option.data = tableData.data
|
|
|
+ // 设置工作表保护
|
|
|
+ option.data[0].config.authority = {
|
|
|
+ sheet: 1, // 如果为 1 或 true，则该工作表受到保护；如果为 0 或 false，则该工作表不受保护。
|
|
|
+ hintText: '该工作表受到保护，无法操作', // 弹窗提示的文字
|
|
|
+ }
|
|
|
+ // 关闭右键菜单
|
|
|
+ option.cellRightClickConfig.chart = false
|
|
|
+ option.cellRightClickConfig.columnWidth = false
|
|
|
+ option.cellRightClickConfig.rowHeight = false
|
|
|
+ option.cellRightClickConfig.deleteColumn = false
|
|
|
+ option.cellRightClickConfig.deleteRow = false
|
|
|
+ option.cellRightClickConfig.insertColumn = false
|
|
|
+ option.cellRightClickConfig.insertRow = false
|
|
|
+ // 关闭工具栏
|
|
|
+ option.showtoolbar = false
|
|
|
+ option.enableAddRow = false
|
|
|
+ option.showtoolbarConfig = {
|
|
|
+ bold: false,
|
|
|
+ border: false,
|
|
|
+ fillColor: false,
|
|
|
+ font: false,
|
|
|
+ fontSize: false,
|
|
|
+ function: false,
|
|
|
+ horizontalAlignMode: false,
|
|
|
+ italic: false,
|
|
|
+ mergeCell: false,
|
|
|
+ moreFormats: false,
|
|
|
+ paintFormat: false,
|
|
|
+ strikethrough: false,
|
|
|
+ textColor: false,
|
|
|
+ underline: false,
|
|
|
+ verticalAlignMode: false
|
|
|
+ }
|
|
|
+ // 钩子函数
|
|
|
+ option.hook = {
|
|
|
+ workbookCreateAfter() {
|
|
|
+ // 图表操作
|
|
|
+ for (let i in reportChartList) {
|
|
|
+ insertEChartInfo(reportChartList[i])
|
|
|
+ }
|
|
|
+ // option.data.forEach((data, i) => {
|
|
|
+ // if (data.chart && data.chart.length > 0) {
|
|
|
+ // data.chart.forEach((chart, j) => {
|
|
|
+ // console.log(chart.chart_id)
|
|
|
+ // let dom = document.getElementById(chart.chart_id + '_c')
|
|
|
+ // if (dom) dom.style.display = 'none'
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // 绘制基础数据项
|
|
|
+ drawBaseInfo(baseItem)
|
|
|
+ // 绘制数据值
|
|
|
+ drawTableData(reportTableItemList,
|
|
|
+ reportTableType)
|
|
|
+ printExcel()
|
|
|
+ luckysheet.setRangeShow('BH1')
|
|
|
+ }
|
|
|
+ }
|
|
|
luckysheet.create(option)
|
|
|
- printExcel()
|
|
|
+ } else {
|
|
|
+ layer.msg(res.msg);
|
|
|
}
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ function printExcel() {
|
|
|
+ let currentSelected = luckysheet.getRange()
|
|
|
+ luckysheet.hideGridLines()
|
|
|
+ // 如果当前选中区只是一个单元格，则认为选取无效。
|
|
|
+ if (currentSelected[0] != null &&
|
|
|
+ (currentSelected[0].row[1] - currentSelected[0].row[0] >= 1 ||
|
|
|
+ currentSelected[0].column[1] - currentSelected[0].column[0] >= 1)) {
|
|
|
+ // 生成base64图片
|
|
|
+ let imgSrc = luckysheet.getScreenshot();
|
|
|
+ luckysheet.showGridLines();
|
|
|
} else {
|
|
|
- layer.msg(res.msg);
|
|
|
+ // 获取打印区域的行列
|
|
|
+ let RowColumn = getPrintSheetArea();
|
|
|
+ // 因需要打印左边的边框，需重新设置第一列
|
|
|
+ RowColumn.column[0] = 0;
|
|
|
+ // 进行选区操作
|
|
|
+ luckysheet.setRangeShow("A1:L40");
|
|
|
+ let imgSrc = luckysheet.getScreenshot(); // 生成base64图片
|
|
|
+ luckysheet.showGridLines();
|
|
|
+ console.log(imgSrc);
|
|
|
}
|
|
|
}
|
|
|
- })
|
|
|
+ // top.window.document.write(imgSrc)
|
|
|
+ // $.ajax({
|
|
|
+ // url: "localhost:8084?file="+imgSrc,
|
|
|
+ // type: 'GET',
|
|
|
+ // success: function(res) {
|
|
|
|
|
|
- function printExcel(){
|
|
|
- luckysheet.hideGridLines()
|
|
|
- let imgSrc = luckysheet.getScreenshot();
|
|
|
- luckysheet.showGridLines();
|
|
|
- console.log(imgSrc);
|
|
|
- $.ajax({
|
|
|
- url: "" ,
|
|
|
- type: 'GET',
|
|
|
- success: function(res) {
|
|
|
-
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+
|
|
|
+ function getPrintSheetArea() {
|
|
|
+ const sheetData = luckysheet.getSheetData();
|
|
|
+ let objRowColumn = {
|
|
|
+ row: [0, 0], //行
|
|
|
+ column: [0, 0], //列
|
|
|
+ };
|
|
|
+ // * item是行、index是行索引、it是一行里的一格、itemIndex是这一格在这一行里的列索引
|
|
|
+ sheetData.forEach((item, index) => {
|
|
|
+ //行数
|
|
|
+ item.forEach((it, itemIndex) => {
|
|
|
+ if (it !== null && it.v) {
|
|
|
+ console.log(index, it)
|
|
|
+ if (objRowColumn.row[1] < index) {
|
|
|
+ objRowColumn.row[1] = index; //row第二位
|
|
|
+ }
|
|
|
+ if (objRowColumn.column[1] < itemIndex) {
|
|
|
+ objRowColumn.column[1] =
|
|
|
+ itemIndex; //column第二位
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return objRowColumn;
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 绘制表格数据 */
|
|
|
+ function drawTableData(tableItemList, type) {
|
|
|
+ if (!tableItemList || tableItemList.length == 0) return
|
|
|
+ // 事件驱动报表
|
|
|
+ if (type == 2 || type == 4) {
|
|
|
+ tableItemList.forEach((tableItem, i) => {
|
|
|
+ let valueList = tableItem.valueList ? tableItem.valueList
|
|
|
+ .split(',') : []
|
|
|
+ let xAxis = tableItem.xaxis
|
|
|
+ let yAxis = tableItem.yaxis
|
|
|
+ if (valueList.length == 0) {
|
|
|
+ luckysheet.setCellValue(xAxis, yAxis, '')
|
|
|
+ } else {
|
|
|
+ valueList.forEach((v, j) => {
|
|
|
+ luckysheet.setCellValue(xAxis + j, yAxis,
|
|
|
+ v)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return
|
|
|
}
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- $('#recordBtn').on('click', () => {
|
|
|
- layui.use('table', function() {
|
|
|
- var table = layui.table;
|
|
|
- var layer = layui.layer;
|
|
|
-
|
|
|
- layer.open({
|
|
|
- type: 1,
|
|
|
- title: '运行记录',
|
|
|
- content: $('#demo'),
|
|
|
- offset: ['180px', '45px'],
|
|
|
- end: function() {
|
|
|
- $('#demo').hide();
|
|
|
- $('.layui-table-view').hide()
|
|
|
- },
|
|
|
- cancel: function(index, layero) {
|
|
|
- $('.layui-layer-content').hide()
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 绘制基础数据项布局信息 */
|
|
|
+ function drawBaseInfo(baseData) {
|
|
|
+ if (!baseData) return
|
|
|
+ let option = luckysheet.getAllSheets()[0]
|
|
|
+ option.celldata.map(item => {
|
|
|
+ if (item.v.v) {
|
|
|
+ item.v.v = String(item.v.v).trim()
|
|
|
+ if (item.v.v.match(/\${([^}]+)}/g)) { // 替换${xxx}内部数据
|
|
|
+ if (item.v.v.indexOf('${currDate}') > -1) {
|
|
|
+ let val = item.v.v
|
|
|
+ val = val.replace('${currDate}', baseData.currDate)
|
|
|
+ luckysheet.setCellValue(item.r, item.c, val)
|
|
|
+ }
|
|
|
+ if (item.v.v.indexOf('${currDateTime}') > -1) {
|
|
|
+ let val = item.v.v
|
|
|
+ val = val.replace('${currDateTime}', baseData
|
|
|
+ .currDateTime)
|
|
|
+ luckysheet.setCellValue(item.r, item.c, val)
|
|
|
+ }
|
|
|
+ if (item.v.v.indexOf('${userName}') > -1) {
|
|
|
+ let val = item.v.v
|
|
|
+ val = val.replace('${userName}', baseData.userName)
|
|
|
+ luckysheet.setCellValue(item.r, item.c, val)
|
|
|
+ }
|
|
|
+ if (item.v.v.indexOf('${winUserName}') > -1) {
|
|
|
+ let val = item.v.v
|
|
|
+ val = val.replace('${winUserName}', baseData
|
|
|
+ .winUserName)
|
|
|
+ luckysheet.setCellValue(item.r, item.c, val)
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
- var tableReload = table.render({
|
|
|
- elem: '#demo',
|
|
|
- width: 300,
|
|
|
- page: {
|
|
|
- elem: '#demo',
|
|
|
- layout: ['prev', 'page', 'next', 'count']
|
|
|
- },
|
|
|
- url: 'http://192.168.0.40:8081/reportTable/getAutoChReportTable',
|
|
|
- where: {
|
|
|
- autoTableId: id
|
|
|
- },
|
|
|
- text: {
|
|
|
- none: '暂无数据' //默认：无数据。
|
|
|
- },
|
|
|
- cols: [
|
|
|
- [{
|
|
|
- field: 'reportTableName',
|
|
|
- title: null,
|
|
|
- width: 300
|
|
|
- }]
|
|
|
- ],
|
|
|
- parseData: function(res) {
|
|
|
- return {
|
|
|
- "code": 0,
|
|
|
- "msg": res.msg,
|
|
|
- "count": res.data.count,
|
|
|
- "data": res.data.reportTableList
|
|
|
- };
|
|
|
+ /** 向 Excel 插入图表 */
|
|
|
+ function insertEChartInfo(chart) {
|
|
|
+ let _self = this
|
|
|
+ let info = JSON.parse(chart.standby)
|
|
|
+ let reportChartItemList = chart.reportChartItemList
|
|
|
+ let chartType = chart.chartType
|
|
|
+ // 系列
|
|
|
+ let series = info.option.series
|
|
|
+ for (let i in series) {
|
|
|
+ let temp = series[i]
|
|
|
+ temp.data = []
|
|
|
+ for (let j in reportChartItemList) {
|
|
|
+ let _name = reportChartItemList[j].describe ?
|
|
|
+ reportChartItemList[j].describe : reportChartItemList[j]
|
|
|
+ .itemName
|
|
|
+ if (chartType == 'pie') {
|
|
|
+ temp.name = _name
|
|
|
+ temp.data.push({
|
|
|
+ 'name': _name,
|
|
|
+ 'value': reportChartItemList[j].valueList
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ let _t = []
|
|
|
+ let t = reportChartItemList[i].valueList ?
|
|
|
+ reportChartItemList[i].valueList.split(',') : []
|
|
|
+ t.forEach((temp) => {
|
|
|
+ _t.push(parseFloat(temp))
|
|
|
+ })
|
|
|
+ temp.data = _t
|
|
|
+ }
|
|
|
}
|
|
|
- });
|
|
|
+ }
|
|
|
+ if (chartType != 'pie') {
|
|
|
+ // x 轴
|
|
|
+ let xAxis = info.option.xAxis
|
|
|
+ let legend = info.option.legend
|
|
|
+ // xAxis.data = []
|
|
|
+ legend.data = []
|
|
|
+ xAxis.data = (reportChartItemList && reportChartItemList.length >
|
|
|
+ 0) ? reportChartItemList[0].dataTimeList : []
|
|
|
+ // xAxis.data = xAxis.data.slice(0, 7)
|
|
|
+ for (let i in reportChartItemList) {
|
|
|
+ let name = reportChartItemList[i].describe ? reportChartItemList[
|
|
|
+ i].describe : reportChartItemList[i].itemName
|
|
|
+ // xAxis.data.push(name)
|
|
|
+ legend.data.push(name)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log(chartType, info)
|
|
|
+ setTimeout(() => {
|
|
|
+ const sheet = luckysheet.getLuckysheetfile()[0]
|
|
|
+ let optionData = sheet.data
|
|
|
+ try {
|
|
|
+ let flag = false
|
|
|
+ insertLuckysheetEChart({
|
|
|
+ selector: '#luckysheet',
|
|
|
+ info,
|
|
|
+ sheet,
|
|
|
+ optionData,
|
|
|
+ echarts,
|
|
|
+ luckysheet,
|
|
|
+ $,
|
|
|
+ _self,
|
|
|
+ flag
|
|
|
+ })
|
|
|
+ } catch (e) {
|
|
|
+ console.log(999, e == 'echarts is not defined')
|
|
|
+ console.error(e)
|
|
|
+ }
|
|
|
+ }, 200)
|
|
|
+ }
|
|
|
|
|
|
- //触发行单击事件
|
|
|
- table.on('row(test)', function(obj) {
|
|
|
- const id = obj.data.id
|
|
|
- const title = obj.data.reportTableName
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/reportForm/report-detail/recordDetail?id=${id}&title=${title}`
|
|
|
- })
|
|
|
- });
|
|
|
+ $('#recordBtn').on('click', () => {
|
|
|
+ layui.use('table', function() {
|
|
|
+ var table = layui.table;
|
|
|
+ var layer = layui.layer;
|
|
|
+
|
|
|
+ layer.open({
|
|
|
+ type: 1,
|
|
|
+ title: '运行记录',
|
|
|
+ content: $('#demo'),
|
|
|
+ offset: ['180px', '45px'],
|
|
|
+ end: function() {
|
|
|
+ $('#demo').hide();
|
|
|
+ $('.layui-table-view').hide()
|
|
|
+ },
|
|
|
+ cancel: function(index, layero) {
|
|
|
+ $('.layui-layer-content')
|
|
|
+ .hide()
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- $('th').hide()
|
|
|
- });
|
|
|
- })
|
|
|
+ var tableReload = table.render({
|
|
|
+ elem: '#demo',
|
|
|
+ width: 300,
|
|
|
+ page: {
|
|
|
+ elem: '#demo',
|
|
|
+ layout: ['prev', 'page', 'next',
|
|
|
+ 'count'
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ url: 'http://192.168.0.40:8081/reportTable/getAutoChReportTable',
|
|
|
+ where: {
|
|
|
+ autoTableId: id
|
|
|
+ },
|
|
|
+ text: {
|
|
|
+ none: '暂无数据' //默认：无数据。
|
|
|
+ },
|
|
|
+ cols: [
|
|
|
+ [{
|
|
|
+ field: 'reportTableName',
|
|
|
+ title: null,
|
|
|
+ width: 300
|
|
|
+ }]
|
|
|
+ ],
|
|
|
+ parseData: function(res) {
|
|
|
+ return {
|
|
|
+ "code": 0,
|
|
|
+ "msg": res.msg,
|
|
|
+ "count": res.data.count,
|
|
|
+ "data": res.data
|
|
|
+ .reportTableList
|
|
|
+ };
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ //触发行单击事件
|
|
|
+ table.on('row(test)', function(obj) {
|
|
|
+ const id = obj.data.id
|
|
|
+ const title = obj.data
|
|
|
+ .reportTableName
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/reportForm/report-detail/recordDetail?id=${id}&title=${title}`
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ $('th').hide()
|
|
|
+ });
|
|
|
+ })
|
|
|
+ });
|
|
|
});
|
|
|
- });
|
|
|
+ })
|
|
|
</script>
|
|
|
|
|
|
</body>
|
Zt