Weibw's FR
微信公众号：次世代数据技术 关注可了解更多的教程。问题或建议，请公众号留言或联系本人; 如果您有报表开发需求或者定制化功能开发,也可以联系本人; 微信号：weibw162
本教程视频讲解可以关注本人B站账号进行观看：次世代数据技术
一、需求描述
我们在移动端报表开发过程中，会在表格中展示部分图片的，而且一般是以缩略图的形式进行展示。但是某些场景下，我们还是需要放大这些图片进行展示的。这里，作者提供几种展示方式的实现方案。 
本方案的实现步骤如下：
- 将下载好的
enlarge-pic-mobile.js文件存放到工程目录中。 - 在图片单元格必须为纯路径文本或者经过
webimage()函数处理过的公式内容。 - 在决策平台管理中移动平台中引入第一步下载的js文件。
- 给模板增加页面加载结束事件，设置指定单元格可以放大显示图片。
注1：本功能仅在荣耀V30Pro手机上验证可以，其他型号及系统的手机上不保证成功。注2：图片显示仅支持路径形式，不支持数据库存储的二进制数据。
二、具体操作
第一步
将下载好的enlarge-pic-mobile.js文件存放到工程目录下，具体路径为：webroot->help->js。
第二步
将图片路径字段直接拖入模板中，或者使用webimage()公式函数进行处理。
第三步
登录决策平台，在管理系统->移动平台->其他->引入js中引入第一步下载的js文件，及jq文件。
第四步
在模板web属性->分页预览设置中增加一个加载结束事件，然后填入如下代码：
javaScript
EnlargePicMobile({
el: $("div[id^='col_1']"), // 第二列单元格
width: 95, // 图片放大后宽度占屏幕95%
height: 20, // 图片放大后占屏幕高度的20%
closeColor: "#fff", // 关闭按钮颜色为白色
imgOpacity: 0.95, // 图片透明度0.95
isMask: true, // 启用遮罩
maskColor: '#000', // 遮罩颜色为黑色
maskOpacity: 0.65 // 遮罩透明度为0.65
});
EnlargePicMobile({
el: $("div[id^='col_2']"),// 第三列单元格
width: 75, // 图片放大后宽度占屏幕75%
height: 30, // 图片放大后占屏幕高度的30%
closeColor: "red", // 关闭按钮颜色为红色
isMask: false, // 不启用遮罩
});EnlargePicMobile({
el: $("div[id^='col_1']"), // 第二列单元格
width: 95, // 图片放大后宽度占屏幕95%
height: 20, // 图片放大后占屏幕高度的20%
closeColor: "#fff", // 关闭按钮颜色为白色
imgOpacity: 0.95, // 图片透明度0.95
isMask: true, // 启用遮罩
maskColor: '#000', // 遮罩颜色为黑色
maskOpacity: 0.65 // 遮罩透明度为0.65
});
EnlargePicMobile({
el: $("div[id^='col_2']"),// 第三列单元格
width: 75, // 图片放大后宽度占屏幕75%
height: 30, // 图片放大后占屏幕高度的30%
closeColor: "red", // 关闭按钮颜色为红色
isMask: false, // 不启用遮罩
});按照以上步骤配置完后，点击预览即可看到我们需要的效果。
三、接口注释
javascript
EnlargePicMobile({
el: $("div[id^='col_1']"), // 第二列单元格
width: 95, // 图片放大后宽度占屏幕95%
height: 20, // 图片放大后占屏幕高度的20%
closeColor: "#fff", // 关闭按钮颜色为白色
imgOpacity: 0.95, // 图片透明度0.95
isMask: true, // 启用遮罩
maskColor: '#000', // 遮罩颜色为黑色
maskOpacity: 0.65 // 遮罩透明度为0.65
});EnlargePicMobile({
el: $("div[id^='col_1']"), // 第二列单元格
width: 95, // 图片放大后宽度占屏幕95%
height: 20, // 图片放大后占屏幕高度的20%
closeColor: "#fff", // 关闭按钮颜色为白色
imgOpacity: 0.95, // 图片透明度0.95
isMask: true, // 启用遮罩
maskColor: '#000', // 遮罩颜色为黑色
maskOpacity: 0.65 // 遮罩透明度为0.65
});EnlargePicMobile()是主要的函数，该函数的参数解释如下：
| 参数 | 是否必填 | 注释 |
|---|---|---|
| el | 是 | 通过JQ选择器指向需要增加放大事件的单元格所在位置 |
| width | 否 | 图片放大后的宽度占屏幕的比例，可填范围1-100，默认90 |
| height | 否 | 图片放大后的高度占屏幕的比例，可填范围1-100，默认35 |
| closeColor | 否 | 关闭按钮颜色，默认红色，可填色值，或rgb，rgba |
| imgOpacity | 否 | 图片显示透明度，可填范围0-1，默认1 |
| isMask | 否 | 是否使用遮罩，可填true，false，默认值true |
| maskColor | 否 | 遮罩颜色，默认为gray，可填色值，或rgb，rgba |
| maskOpacity | 否 | 遮罩透明度，可填范围0-1，默认0.65 |
四、模板文件下载
扫码即可下载文档示例模板及其他代码文件 如果您在阅读或实际操作过程中有问题，可以随时添加作者好友进行咨询。