report-designer/viewer.html at master · xinglie/report-designer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta rd="jv97vnrjq8.1"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <link type="image/x-icon" href="./rd.png" rel="shortcut icon">
        <title>Report Designer</title>
        <style>html,body{margin:0;padding:0;scrollbar-gutter:stable}@keyframes r{to{transform:rotate(1turn)}}.logo{width:60px;position:fixed;left:calc(50% - 35px);top:calc(50% - 35px);animation:r 2s linear infinite}</style>
    </head>
    <body>
        <div id="app"><svg class="logo" viewBox="0 0 1024 1024"><path d="M850.1 627.5V388.7c32.8-5.9 59.2-36.7 59.2-71.5 0-40.6-32.8-71.4-71.5-71.4-20.6 0-40.6 10.3-52.9 24.5L581 156.2c2-5.9 3.9-12.2 3.9-20.6 0-40.6-32.8-71.4-71.4-71.4-38.7 0-71.4 32.8-71.4 71.4 0 5.9 2 12.2 2 18.6L240.4 270.7c-16.1-16.1-34.7-26.4-54.8-26.4-40.6 0-71.4 32.8-71.4 71.4 0 34.7 24.5 63.1 57.3 71.4V628c-32.8 8.3-57.3 36.7-57.3 71.4 0 40.6 32.8 71.4 71.4 71.4 20.6 0 40.6-10.3 52.9-24.5l206 114c-3.9 8.3-5.9 18.6-5.9 28.4 0 40.6 32.8 71.4 71.4 71.4 38.7 0 71.4-32.8 71.4-71.4 0-10.3-2-20.6-5.9-30.3l206-112.1c14.2 14.2 32.8 24.5 54.8 24.5 40.6 0 71.4-32.8 71.4-71.4 1.6-37.7-22.8-66-57.6-71.9zM554.5 831.1c-8.3-5.9-16.1-10.3-24.5-12.2V637.3h-34.7v181.6c-10.3 2-20.6 8.3-28.4 14.2L257 716.6c2-5.9 2-12.2 2-18.6 0-32.8-22.5-61.2-52.9-69.5V386.7c12.2-3.9 22.5-8.3 30.3-18.6l152.7 94 18.6-28.4-153.2-94c2-8.3 3.9-14.2 3.9-22.5 0-5.9-2-12.2-2-18.6l204.1-116c12.2 14.2 32.8 22.5 52.9 22.5 20.6 0 38.7-8.3 50.9-22.5l204.1 116.5c-2 5.9-2 12.2-2 18.6 0 8.3 2 14.2 3.9 22.5l-152.7 94 18.6 28.4 150.7-92c8.3 8.3 18.6 14.2 30.3 18.6v242.2c-30.3 8.3-50.9 36.7-50.9 69.5 0 5.9 0 12.2 2 16.1L554.5 831.1zm0 0" fill="#35b8ca"/><path d="M443.9 577.6c36.7 36.7 95.9 36.7 132.6 0 36.7-36.7 36.7-95.9 0-132.6-36.7-36.7-95.9-36.7-132.6 0-36.7 36.2-36.7 95.9 0 132.6zm0 0" fill="#35b8ca"/></svg></div>
        <script src="dist/viewer.js?v=202603290806"></script>
        <script type="module">
            //--－start--- 以下是环境检测提示，方便有问题时自查，正式使用时建议删除
            if(!CSS.supports('overflow:clip')||
                !CSS.supports('inset:auto')||
                !CSS.supports('scale:1')||
                !CSS.supports('translate:0')||
                !CSS.supports('rotate:0deg')){
                console.error('unsupport browser: '+navigator.userAgent);
            }
            if(!location.protocol.startsWith('http')){
                alert('请配置一个web服务器,通过http的方式访问~')
            }
            //---end---
            //---mock websocket在静态页面的情况下模拟数据，真实使用时需删除
            globalThis.WebSocket = class{
                OPEN = 1
                constructor(){
                    this.readyState = 1;
                    setTimeout(()=>{
                        this.onopen?.();
                        this.start();
                        this.onmessage?.(this.getData());
                    },100);
                }
                getData(){
                    return {
                        data: JSON.stringify({
                            success:true,
                            data: {
                                iot001: (40 * Math.random() - 0).toFixed(1),
                                iot002: (100 * Math.random()).toFixed(0),
                                iot003: Math.random() > 0.5 ? 1 : 0,
                                iot004: [{ key: 'key1', value: Math.random() * 100 }, { key:'key2', value: Math.random() * 20 }, { key:'key3', value: Math.random() * 80 }]
                            }
                        })
                    }
                }
                start(){
                    setInterval(()=>{
                        this.onmessage?.(this.getData())
                    },2000);
                }
                send(msg){
                    console.log(msg);
                }
            }
            //---end---
            let {searchParams}=new URL(location.href);
            let id=searchParams.get('id')||'';
            let use=searchParams.get('use')||'';
            document.addEventListener('rdstatechange',()=>{//监听页面渲染状态
                console.log(document.rdState);//　document.rdState是一个位掩码
                // & 1 表示页面初始化完成
                // & 2 表示基础页面渲染完成
                // & 4 表示页面完成渲染且所有资源加载完成
                if(document.rdState & 4){
                    console.log('页面渲染完成，所有功能可用');
                }
            });
            viewer.install({
                version:'202603290806',
                //language: 'zh-hans',//语言包，可以用zh-hant也可以用zh-tw，不配置则根据环境自动选择
                //themeBrand:'#4f9792',//品牌色，需授权
                //themeContrast:'#fff',//品牌对比色，需授权
                //获取内容
                getContentUrl:id ? `./apis/example_${id}.json` : './apis/content.json',
                //自定义字体
                getFontFaceUrl:'./apis/fontface.json',
                rdsUrl:'http://127.0.0.1:9898/',//report designer server扩展服务，可联系作者免费获取
                iotTransfer:'ws',//iot预览时，使用何种方式与服务器通讯，目前支持ws、sse以及http这3种方式
                iotUrl:'ws://localhost:9999',//iot大屏中连接的ws地址，也可换成a^b的http地址，详情可联系作者
                use:use|| 'default',//预览器的类型，有label(标签预览) stack(流式分页等) 详情可查阅：https://github.com/xinglie/report-designer/issues/64
                getBindUrl(bind){//获取元素绑定的真实接口地址。详情可查阅：https://github.com/xinglie/report-designer/issues/27#issuecomment-967156739
                    let url = new URL(bind.tag,location.href);
                    url.searchParams.set('id',bind.id);
                    url.searchParams.set('more','更多参数');
                    return url.toString();
                },
                request(request){//请求发起前对参数等相关参数进行二次修改，便于适配现有接口
                    let url=request.url;
                    console.log('request',request,url);
                    //console.log('request',request,url);
                    if (url.startsWith('//unpkg.') ||
                        url.startsWith('//at.') ||
                        url.startsWith('//cdn.') ||
                        url.includes('cdn-icons-png.flaticon.com') ||
                        url.startsWith('//cdnjs.')) {
                        return { //公共cdn不能发送任何凭证。如果自建资源服务器，则可以根据需要调整
                            options:{},
                            qurey:{}
                        };
                    }
                    return {
                        options:request.options,
                        body: request.body ? {//对于post请求则是放在form或payload中的数据
                            ...request.body,
                            extend:'your data'
                        } : null,
                        query:{//放在url中的数据
                            ...request.query,
                            name:'行列',
                            random:Math.random()
                        }
                    };
                },
                response(response,url){//对请求结果进行二次控制修改，便于适配现有接口
                    //console.log('response',response,url);
                    return {
                        success:response.success,//本次请求是否成功
                        data:response.data,//本次请求的相关业务数据
                        message:response.message
                    }
                }
            });
        </script>
    </body>
</html>