功能------弹窗,一键复制,截屏

点击的按钮

'<button type="button" class=" gdTypeBtn gdTypeBtnActive" 
onclick="popupShow(\'' + _data.planUuid +'\')">报告</button>'

方法


// 这里是弹框的js
			var mask = mui.createMask(function() {
				return false;
			}); //callback为用户点击蒙版时自动执行的回调;
			// mask.close();
			// 查看詳情彈出彈框
		function popupShow(id) {
				console.log(id);
				var html ='';
				mui.ajax({
					url: BaseUrl +"/app/search/workOrder/getWorkOrderReportByUuid",
					type: "post",
					// timeout: 5000, //超时时间设置为3秒;
					contentType: "application/json",
					data: {
						"params": {
							"UUID":id
						}
					},
					success:function(result){
						// console.log(JSON.stringify(result));
						var nameList='';
						var suppliesList='';
						var detailData='';
						result.data.constructors.forEach(function(v,i){
							nameList +=v+' ';
						})
						result.data.supplies.forEach(function(v,i){
							suppliesList +=v+',';
						})
						result.data.detailData.forEach(function(v,i){
							detailData +=`	<div class="popItem">
												<p class="title">${v.segment}</p>
												<p>${v.infos}</p>
											</div>`
						})
						 html += `<div id="popupWrap">
									<div class="closeBtn" onclick="closeFun()">
										<div class="inner">
											<img src="images/closePopup.png">
										</div>
									</div>
									<div class="popupContent">
										<div class="popTop">
										${detailData}
											
										</div>
										<div class="popBottpm">
											<p>施工人数:${nameList},共${result.data.constructors.length}人</p>
											<p>总材料消耗:${suppliesList}</p>
										</div>
									</div>
									<div class="popupBtn">
										<div class="copyFun" onclick="copyPage()">一键复制</div>
										<div class="screenFun" onclick="screenPage()">截屏</div>
									</div>
								</div>
								`
								$('body').append(html)
										// alert(JSON.stringify(data))
										mask.show(); //显示遮罩
										$('#popupWrap').css({
											display: 'block'
								})
								
					},
					error:function(error){
						console.log(error);
					}
					// complete: function(XMLHttpRequest, textStatus) {
					// 	if (textStatus == 'timeout' || textStatus == 'error') {
					// 		weui.topTips('网络异常');
					// 	}					
					// }
				})
			
		
			}
			
			
			//截屏
			function screenPage() {
				screenCapture(function() {
					mui.toast("图片已保存到相册!");
					$('.mui-backdrop').css({
						display: 'none'
					})
					$('#popupWrap').css({
						display: 'none'
					})
				})
			}
			//复制文字
			function copyPage() {
				tips = "已成功复制到剪贴板";
				var text = document.getElementById("popupWrap").innerText;
				const input = document.createElement('input')
				document.body.appendChild(input)
				input.setAttribute('value', text)
				input.select()
				if (document.execCommand('copy')) {
					document.execCommand('copy')
				}
				document.body.removeChild(input);
				mui.toast(tips)
			}
			// 點擊關閉按鈕
			function closeFun() {
				$('.mui-backdrop').css({
					display: 'none'
				})
				$('#popupWrap').css({
					display: 'none'
				})
			}

截屏的方法

//手机截图
function screenCapture(successCB, errorCB, fileName, imgID, overwrite, format, quality, clip) {
  errorCB = errorCB || function () { };
  fileName = fileName || Date.parse(new Date());
  imgID = imgID || String(Date.parse(new Date()));
  overwrite = overwrite || true;
  format = format || 'png';
  quality = quality || 50;
  clip = clip || {
    top: '0px',
    left: '0px',
    width: '100%',
    height: '100%'
  };

 var self = plus.webview.currentWebview();
  var bitmap = new plus.nativeObj.Bitmap(imgID);

  //绘制截图
  self.draw(bitmap, function () {
    // 保存Bitmap图片
    bitmap.save('_doc/' + fileName + '.' + format, {
      overwrite: overwrite,
      format: format,
      quality: quality,
      clip: clip
    }, function (i) {
      //保存到系统相册
      plus.gallery.save(i.target, function (d) {
        //销毁Bitmap图片
        bitmap.clear();
        successCB({
          success: 'success',
          details: d
        });
      }, function (e) {
        //销毁Bitmap图片
        bitmap.clear();
        errorCB({
          error: '图片保存至相册失败',
          details: e
        });
      });
    }, function (e) {
      bitmap.clear();
      errorCB({
        error: '图片保存失败',
        details: e
      });
    });

  }, function (e) {
    errorCB({
      error: '截屏绘制失败',
      details: e
    });
  })
}
内容概要:本文详细介绍了“秒杀商城”微服务架构的设计与实战全过程,涵盖系统从需求分析、服务拆分、技术选型到核心功能开发、分布式事务处理、容器化部署及监控链路追踪的完整流程。重点解决了高发场景下的超卖问题,采用Redis预减库存、消息队列削峰、数据库乐观锁等手段保障数据一致性,通过Nacos实现服务注册发现与配置管理,利用Seata处理跨服务分布式事务,结合RabbitMQ实现异步下单,提升系统吞吐能力。同时,项目支持Docker Compose快速部署和Kubernetes生产级编排,集成Sleuth+Zipkin链路追踪与Prometheus+Grafana监控体系,构建可观测性强的微服务系统。; 适合人群:具备Java基础和Spring Boot开发经验,熟悉微服务基本概念的中高级研发人员,尤其是希望深入理解高发系统设计、分布式事务、服务治理等核心技术的开发者;适合工作2-5年、有志于转型微服务或提升架构能力的工程师; 使用场景及目标:①学习如何基于Spring Cloud Alibaba构建完整的微服务项目;②掌握秒杀场景下高发、超卖控制、异步化、削峰填谷等关键技术方案;③实践分布式事务(Seata)、服务熔断降级、链路追踪、统一配置中心等企业级中间件的应用;④完成从本地开发到容器化部署的全流程落地; 阅读建议:建议按照文档提供的七个阶段循序渐进地动手实践,重点关注秒杀流程设计、服务间通信机制、分布式事务实现和系统性能优化部分,结合代码调试与监控工具深入理解各组件协作原理,真正掌握高发微服务系统的构建能力。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值