123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401 |
- <!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>报表详情</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;
- }
- .model {
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.3);
- position: fixed;
- z-index: 9999;
- }
- .table-box {
- width: 300px;
- height: 300px;
- background: #ffffff;
- margin: auto;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- padding: 10px;
- overflow-y: auto;
- }
- .head {
- display: flex;
- justify-content: flex-end;
- font-size: 20px;
- font-weight: bold;
- color: #000000;
- }
- .cel {
- cursor: pointer;
- }
- #table {
- width: 100%;
- margin-top: 20px;
- font-size: 18px;
- }
- #table tr {
- width: 100%;
- height: 30px;
- }
- #table td {
- border-bottom: 1px solid #000000;
- border-top: 1px solid #000000;
- padding: 5px;
- }
- .layui-layer-title {
- text-align: center;
- font-size: 16px;
- padding: 0 81px;
- }
- .layui-layer {
- top: 70 !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="model" style="display: none;">
- <div class="table-box">
- <div class="head"> -->
- <!-- <div>运行记录</div> -->
- <!-- <div class="cel">×</div>
- </div>
- <table id="table">
- <tr>
- <th>
- 运行内容
- </th>
- </tr>
- </table>
- </div>
- </div> -->
- <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="./plugins/exceljs.min.js"></script>
- <script src="./plugins/excelopput.js"></script>
- <script src="./plugins/echarts.js"></script>
- <!-- <script src="./echarts.js"></script> -->
- <script src="./cqcyCode.js"></script>
- <script src="./canvertChart.js"></script>
- <!-- uni 的 SDK -->
- <script src="./wvIP.js"></script>
- <script src="./plugins/axios.min.js"></script>
- <script type="text/javascript" src="../luckysheet/dist/plugins/js/uni-webview-js0.0.3_index.js"></script>
- <Script>
- function GetQueryString(name) {
- var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
- var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
- var context = "";
- if (r != null)
- context = decodeURIComponent(r[2]);
- reg = null;
- r = null;
- return context == null || context == "" || context == "undefined" ? "" : context;
- }
- </Script>
- <script>
- $(function() {
- document.addEventListener('UniAppJSBridgeReady', function() {
- uni.getEnv(function(res) {
- console.log('当前环境:' + JSON.stringify(res));
- window.sessionName = 'device_report_index'
- sessionStorage.removeItem(window.sessionName)
- const id = GetQueryString('id')
- axios.defaults.baseURL = baseUrl
- var reportTableName
- axios.get('/reportTable/getReportTableById?id=' + id)
- .then(res => {
- //console.log(res, 'res');
- const data = res.data
- if (data.code === 200) {
- // 报表类型
- let reportTableType = data.data.reportTableType
- //报表名
- reportTableName = data.data.reportTableName
-
- const templateData = JSON.parse(data.data.reportTableData)
-
- let s_data = $.extend(true, {}, templateData.sheet)
- delete s_data.chart
- const option = {
- container: 'luckysheet',
- data: [s_data],
- 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, // 公式
- print: false,
- image: true,
- link: true,
- textRotateMode: true,
- sortAndFilter: true
- },
- showsheetbar: false,
- showstatisticBar: false,
- sheetFormulaBar: false,
- allowCopy:false,
- allowUpdate:false,
- allowEdit:true,
- forceCalculation:true,
- cellRightClickConfig: {
- copy: false, // 复制
- copyAs: false, // 复制为
- paste: false, // 粘贴
- insertRow: false, // 插入行
- insertColumn: false, // 插入列
- deleteRow: false, // 删除选中行
- deleteColumn: false, // 删除选中列
- deleteCell: false, // 删除单元格
- hideRow: false, // 隐藏选中行和显示选中行
- hideColumn: false, // 隐藏选中列和显示选中列
- rowHeight: false, // 行高
- columnWidth: false, // 列宽
- clear: false, // 清除内容
- matrix: false, // 矩阵操作选区
- sort: false, // 排序选区
- filter: false, // 筛选选区
- chart: false, // 图表生成
- image: false, // 插入图片
- link: false, // 插入链接
- data: false, // 数据验证
- cellFormat: false // 设置单元格格式
- },
- plugins: ['chart'],
- hook: {
- cellEditBefore: function(range) {
- const cell = getCellData((range[0].row)[0], (range[0].column)[0])
- if (cell) {
- try {
- const data = JSON.parse(cell) || {}
- if (data && data.tableId) {
- return false
- }
- } catch(e) {
- //console.log(e)
- }
- }
- return false;
- },
- cellUpdateBefore: function(r, c, val) {
- const cell = getCellData(r, c)
- if (cell) {
- try {
- const data = JSON.parse(cell) || {}
- if (data && data.tableId) {
- return false
- }
- } catch(e) {
- //console.log(e)
- }
- }
- return true
- },
- cellMousedown:function(cell,position,sheet,ctx){
- //console.log('r='+position.r+','+'c='+position.c);
- //console.log(position.c);
- console.log(cell);
- },
- workbookCreateAfter: function() {
- luckysheet.setRangeShow('B1:B2', {
- success: () => {
- for (let key in templateData.chart) {
- //console.log(templateData.chart[key])
- luckysheet.showHistoryChart({
- chartId: key,
- option: templateData.chart[key].position,
- init: function(chart, chartId) {
- const colorForm = templateData.chart[key].colorForm
- if (colorForm.background) {
- templateData.chart[key].chartData.backgroundColor = colorForm.background
- $(`#${chartId}_c`).css('background', colorForm.background)
- }
- const xForm = templateData.chart[key].xForm;
- let chart_new = templateData.chart[key].chartData;
- if(xForm!=undefined){
- chart_new.xAxis[0].axisLabel.formatter = function (value) {
- var date = new Date(value);
- if(date.toString()=='Invalid Date'){
- return value
- }else{
- return new Date(value).format(xForm.formatter)
- }
- };
- }
- chart.setOption(chart_new, {
- notMerge: true
- })
- // chart.setOption(templateData.chart[key].chartData, {
- // notMerge: true
- // })
- if (colorForm.border) {
- $(`#${chartId}_c`).css('border', '1px solid ' + colorForm.border)
- }
- },
- })
- }
- // if(callback){
- // callback()
- // return
- // }
- }
- })
- }
- }
- }
-
-
- luckysheet.create(option)
- } else {
- }
- })
- $('#recordBtn').on('click', () => {
- $('.model').show()
- const token = window.localStorage.getItem('C_TOKEN')
- layui.use('table', function() {
- var table = layui.table;
- var layer = layui.layer;
- layer.open({
- type: 1,
- title: '运行记录',
- content: $('#demo'),
- offset: ['30px', '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: baseUrl+'/reportTable/getAutoChReportTable',
- headers: {
- token: token
- },
- 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>
|