CQ_JD
/
read_opc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461
							<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<link rel='stylesheet' href='../luckysheet/dist/plugins/plugins.css' />
		<link rel='stylesheet' href='../luckysheet/dist/plugins/css/pluginsCss.css' />
		<link rel='stylesheet' href='../luckysheet/dist/css/luckysheet.css' />
		<link rel='stylesheet' href='../luckysheet/dist/assets/iconfont/iconfont.css' />
		<link rel="stylesheet" href="../dist/css/layui.css">
		<style>
			.la-btn {
				position: absolute;
				left: 50%;
				bottom: 35px;
				transform: translate(-50%);
				padding: 0 2%;
			}

			.btn {
				width: 100%;
			}

			.layui-laypage-em {
				background-color: #1e9fff !important;
			}
		</style>
	</head>
	<body>
		<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:90%;left: 0px;top: 0px;">
		</div>

		<table id="demo" lay-filter="test"></table>

		<div class="la-btn">
			<button id="recordBtn" type="button" class="layui-btn layui-btn-normal layui-btn-sm btn">运行记录</button>
		</div>

		<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>
			$(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)
								} 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 {
								// 获取打印区域的行列
								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 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
							}
						}

						/** 绘制基础数据项布局信息 */
						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)
										}
									}
								}
							})
						}

						/** 向 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)
						}

						$('#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()
									}
								});

								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>
</html>