-
Notifications
You must be signed in to change notification settings - Fork 250
/
viewer.html
76 lines (76 loc) · 5.52 KB
/
viewer.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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="//gw.alicdn.com/tfs/TB1gRomUlr0gK0jSZFnXXbRRXXa-200-200.png" rel="shortcut icon">
<title>Loading</title>
<style>html,body{margin:0;padding:0}@keyframes r{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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="#4e9da3"/><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="#4e9da3"/></svg></div>
<script src="dist/viewer.js?v=202412151014"></script>
<script type="module">
//--－start--- 以下是环境检测提示，方便有问题时自查，正式使用时建议删除
if(!CSS.supports('overflow:clip')||
!CSS.supports('inset:auto')){
console.error('unsupport browser: '+navigator.userAgent);
}
if(!location.protocol.startsWith('http')){
alert('请配置一个web服务器,通过http的方式访问~')
}
//---end---
let {searchParams}=new URL(location.href);
let id=searchParams.get('id');
let use=searchParams.get('use');
viewer.install({
version:'202412151014',
//themeBrand:'#4f9792',//品牌色，需授权
//themeContrast:'#fff',//品牌对比色，需授权
//获取内容
getContentUrl:id ? `./apis/example_${id}.json` : './apis/content.json',
//自定义字体
getFontFaceUrl:'./apis/fontface.json',
rdsUrl:'//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
//console.log(bind);
return bind.tag+'?id='+bind.id;
},
request(request,url){//请求发起前对参数等相关参数进行二次修改，便于适配现有接口
console.log('request',request,url);
return {
options:{//fetch请求的参数，比如method headers等 https://developer.mozilla.org/zh-CN/docs/Web/API/fetch
...request.options,
headers:{//请求头处理
...request.options.headers,
'X-Type':'report designer',
Auth:'from designer'
}
},
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>