yinshu_ui/yinshuacx/pages/home/recordtwo.vue

<template>
	<div class="apply_box">
		
		<div class="apply_item_input apply_item_input_ld">
			<div class="apply_span_x apply_span_xde">
				<img src="../../static/pic_bgxq_zs.png" alt="" class="img">
				<span>报告编号</span>
			</div>
			<div class="apply_span_x">
				<p>{{listIi.reportNumber == null ? '暂无数据' : listIi.reportNumber}}</p>
			</div>
		</div>
		<div class="apply_item_input apply_item_input_ld">
			<div class="apply_span_x apply_span_xde">
				<img src="../../static/pic_bgxq_zs.png" alt="" class="img">
				<span>样品名称</span>
			</div>
			<div class="apply_span_x">
				<p>{{listIi.sampleName == null ? '暂无数据' : listIi.sampleName}}</p>
			</div>
		</div>
		<div class="apply_item_input apply_item_input_ld">
			<div class="apply_span_x apply_span_xde">
				<img src="../../static/pic_bgxq_zs.png" alt="" class="img">
				<span>送检单位名称</span>
			</div>
			<div class="apply_span_x">
				<p>{{listIi.inspectName == null ? '暂无数据' : listIi.inspectName}}</p>
			</div>
		</div>
		<div class="apply_item_input apply_item_input_ld">
			<div class="apply_span_x apply_span_xde">
				<img src="../../static/pic_bgxq_zs.png" alt="" class="img">
				<span>委托单位名称</span>
			</div>
			<div class="apply_span_x">
				<p>{{listIi.entrustName == null ? '暂无数据' : listIi.entrustName}}</p>
			</div>
		</div>
		<div class="apply_item_input apply_item_input_ld">
			<div class="apply_span_x apply_span_xde">
				<img src="../../static/pic_bgxq_zs.png" alt="" class="img">
				<span>签发时间</span>
			</div>
			<div class="apply_span_x">
				<p>{{listIi.issueTime == null ? '暂无数据' : listIi.issueTime}}</p>
			</div>
		</div>
		<div class="apply_item_input apply_item_input_ld">
			<div class="apply_span_x apply_span_xde">
				<img src="../../static/pic_bgxq_zs.png" alt="" class="img">
				<span>所检项目是否合格</span>
			</div>
			<div class="apply_span_x">
				<p>{{listIi.isQualify == 'Y' ? '合格' : '不合格'}}</p>
			</div>
		</div>
		<img src="../../static/pic_bgcx_hg.png" alt="" class="imgf" v-if="listIi.isQualify == 'N'">
		<img src="../../static/pic_bgcx_bhg.png" alt="" class="imgf" v-if="listIi.isQualify == 'Y'">
	</div>
	
</template>

<script>
// import uCharts from '@/components/u-charts/u-charts.js';
// import  { isJSON } from '@/common/checker.js';
	var _self;
	var canvaLineA=null;
	var lastMoveTime=null;//最后执行移动的时间戳
	export default{
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				textarea:'',
				show:false,
				listIi:{},
				studenListtwo:{
					xData:[],
					yData:[]
				},
				studenListtwoss:[],
				newNum:0
			}
		},
		onShow(){
			 
		},
		onHide() {
		},
		onLoad(options) {
			let hddw = options.code
	console.log(JSON.parse(hddw))
	   console.log(options.iju)
	   this.listIi = JSON.parse(hddw)
		// let oiuye = JSON.parse(options.iju)
		// let opti = JSON.parse(options.iju)
        // this.listIi = uni.getStorageSync('item')
		// this.listIi.anCode = 0
		// console.log(opti.name)
	
		},
		methods:{
			//信息

			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
			        colors:['#1678FF', '#f04864', '#8543e0', '#90ed7d'],
					fontSize:11,
					padding:[15,15,0,15],
					legend:{
						show:true,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8,
						//disableGrid:true
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
				
			},
			touchLineA(e) {
				lastMoveTime=Date.now();
			},
			moveLineA(e){
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime;
				if (duration < Math.floor(1000 / 60)) return;//每秒60帧
				lastMoveTime = currMoveTime;
				
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'℃';
				}
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			touchEndLineA(e){
				let currIndex=canvaLineA.getCurrentDataIndex(e);
				if(currIndex>-1&&currIndex<canvaLineA.opts.categories.length){
					let riqi=canvaLineA.opts.categories[currIndex];
					let leibie=canvaLineA.opts.series[0].name;
					let shuju=canvaLineA.opts.series[0].data[currIndex];
					this.Interactive=leibie+':'+riqi+'-'+shuju+'℃';
				}
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			changeData(){
				if(isJSON(_self.textarea)){
					let newdata=JSON.parse(_self.textarea);
					canvaLineA.updateData({
						series: newdata.series,
						categories: newdata.categories
					});
				}else{
					uni.showToast({
						title:'数据格式错误',
						image:'../../../static/images/alert-warning.png'
					})
				}
			},
			//现照
			newchansk(index){
				this.show = true
				this.newNum =  index
			},
		  chansk(index){
			  console.log(34)
				this.show = true
				this.newNum = index
			},
          onClickHideDec(){
			  this.show =  false
		  },
		  imgShow(){
			  this.show =  false
		  }
		}
	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 100%;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
<style lang="scss">
	.cues{
		height:100vh ;
		width: 100% ;
		background-color: rgba(0,0,0,0.4);
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		cover-image{
			width: 550upx;
			height: 550upx;
		}
	}
	.xiansu{
		width: 550upx;
		height: 550upx;
		background-color: #fff;
	}
	.wrapper {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  height: 100%;
	}
	.block {
	  width: 120px;
	  height: 120px;
	  background-color: #fff;
	}
</style>


<style lang="scss" scoped>
	.imgf{
		width: 238upx;
		height: 208upx;
		position: fixed;
		right: 38upx;
		bottom: 133upx;
	}
	.teset{
		font-size: 28upx !important;
		padding: 0 33upx;
		box-sizing: border-box;
	}
	.timeu{
		margin-top: 20upx;
		padding: 0 33upx;
		box-sizing: border-box;
		font-size: 28upx !important;
		color: #1678FF !important;
		i{
			display: inline-block;
			font-size: 24upx;
			color: #AAAAAA;
		}
		span{
			font-size: 24upx;
			color: #AAAAAA;
			float: right;
		}
	}
	.img{
		// width: 100%;
		width: 7upx;
		height: 35upx;
	}
	input{
		color: #808080;
	}
	.choseValue_s{
		width: 80upx;
		height: 40upx;
	}
			.dialog-content{
		background-color: #fff;
		width: 620upx;
		margin: 0 auto;
		border-radius: 12px;
		position: relative;
		margin-top: 0 !important;
		height: auto!important;
		padding-top: 20upx;
		.wrapper{
			padding: 0 30upx;
			.title{
				text-align: center;
				padding: 40upx 0 28upx 0;
				font-size: 38upx;
				color: #030303;	
				font-weight: bold;
				
			}
			.wrapp_cont{
				margin: 0 auto;
				font-size: 32upx;
				padding: 20upx 10upx 40upx;
				line-height: 1.5;
				p{
					text-align: center;
					color: #999999;
				}
			}
		}
		
		.footer-cell{
			height: 86upx;
			width: 100%;
			display: flex;
			border-top: 1px solid #f5f5f5;
			box-sizing: border-box;
			.item{
				flex: 1;
				text-align: center;
				color: #000;
				line-height: 86upx;
				font-size: 34upx
			}
			.items{
				color: #56CBC5;
			}
			.confirm-text{
				color: #000000;
				border-left: 1px solid #f5f5f5;
				box-sizing: border-box;
			}
		}
	}
	.fot_box{
		margin-top: 256upx;
		// border-top: 1upx solid #F4F4F4;
		padding: 20upx 38upx 0;
		margin-bottom: 96upx;
		.fot_btn{
			height: 96upx;
			border-radius: 14upx;
			background: #1678FF;
			text-align: center;
			line-height: 96upx;
			color: #fff;
			font-size: 36upx;
		}
	}
	.apply_item_fot{
		padding: 22upx 32upx 36upx;
		border-bottom: 1upx solid #F4F4F4;
		.apply_item_top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			span{
				color: #000;
				font-size: 34upx;
				font-weight: bold;
			}
		}
		.apply_item_fot_input{
			font-size: 30upx;
			margin-top: 52upx;
		}
	}
	.apply_item_bq_phone{
		padding: 20upx 32upx 0;
		border-top: 1upx solid #F4F4F4;
		.apply_item_bq_phone_box{
			height: 346upx;
			border-radius: 20upx;
			background: #F7F7F7;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border:1upx solid #F7F7F7;
			.img{
				width: 78upx;
				height: 78upx;
				margin-bottom: 50upx;
			}
			.imgs{
				width: 100%;
				height: 100%;
				border-radius: 20upx;
			}
			span{
				color: #B6B6B6;
				font-size: 30upx;
			}
		}
	}
	.uni-input{
		color: #808080;
		font-size: 30upx;
	}
	.apply_item_input_bq{
		justify-content: space-between;
	}
	.apply_item_input_ld{
		justify-content: space-between;
	}
	.apply_box{
		.apply_item_input{
			padding-right: 33upx;
			// border-top: 1upx solid #F4F4F4;
			// display: flex;
			// height: 112upx;
			margin-top: 57upx;
			width: calc(100vw - 33upx);
			margin-left: 33upx;
			box-sizing: border-box;
			// align-items: center;
			.apply_span_x{
				font-size: 32upx;
				color: #363535;
				span{
					margin-left: 24upx;
					font-size: 29upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1E1E1E;
				}
				p{
					margin-top: 26upx;
					margin-left: 31upx;
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #1E1E1E;
				}
			}
			.apply_span_xde{
				display: flex;
				align-items: center;
			}
			.apply_span_xl{
				color: #32B16C;
			}
			.apply_span_xltwo{
				color: #ffa200;
			}
			.apply_span_xlfive{
				color: #4c4b4b;
			}
			.apply_span_xlthreo{
				color: #f00404;
			}
			.apply_span_xlforu{
				color: #aaaaaa;
			}
			.apply_span_xla{
				color: #1678FF;
				text-decoration: underline;
			}
			.input_r{
				font-size: 30upx;
				height: 100%;
				flex: 1;
				text-align: right;
			}
		}
		.apply_title_jt{
			height: 130upx;
			border-top: 1upx solid #F4F4F4;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 32upx;
			span{
				font-size: 36upx;
				color: #333;
				font-weight: bold;
			}
			.apply_title_btn{
				width: 160upx;
				height: 60upx;
				font-size: 24upx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #FF568C;
				border-radius: 8upx;
				.img{
					width: 30upx;
					height: 30upx;
					margin-right: 10upx;
				}
			}
		}
		.apply_title_jts{
			border:none;
		}
		.apply_title_jt_item{
			border-bottom: 9upx solid #F4F4F4;
			.apply_item_input_qx{
				color: #FF5185;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 112upx;
				font-size: 30upx;
			}
		}
		.apply_item_sfz{
			padding: 42upx 20upx;
			border-bottom: 9upx solid #F4F4F4;
			.apply_item_sfz_title{
				font-weight: bold;
				font-size: 34upx;
				margin-bottom: 40upx;
				margin-left: 2upx;
			}
			.apply_item_phones{
				display: flex;
				justify-content: space-between;
				.apply_item_phone{
					width: 340upx;
					height: 218upx;
					.img{
						width: 100%;
						height: 100%;
						border-radius: 20upx;
					}
				}
			}
		}
		.apply_item_zdxx{
			padding: 0 26upx;
			font-size: 34upx;
			font-weight: bold;
			color: #333;
			height: 112upx;
			line-height: 112upx;
			border: 1upx solid #F4F4F4;
		}
		.qt_div{
			height: 112upx;
			border-top: 1upx solid #F4F4F4;
			padding: 0 32upx;
			border-bottom: 9upx solid #F9F9F9;
			.input_l{
				height: 100%;
				font-size: 30upx;
			}
		}
	}
	.apply_item_img{
		padding: 40upx 30upx;
		.apply_item_img_box{
			width: 186upx;
			height: 186upx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background: #F2F2F2;
			border-radius: 20upx;
			.img{
				width: 78upx;
				height: 78upx;
				margin-bottom: 10upx;
			}
			.imgs{
				width: 100%;
				height: 100%;
			}
			p{
				font-size: 24upx;
				color: #D7D7D7;
			}
		}
	}
	.apply_item_input_cphone{
		padding: 24upx 32upx;
		display: flex;
		justify-content: space-between;
		border-top: 1upx solid #F4F4F4;
		.apply_span_x{
			margin-top: 8upx;
			p{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #1E1E1E;
			}
			
			span{
				font-size: 29upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1E1E1E;
			}
			
		}
		.apply_span_phone{
			width: 186upx;
			height: 186upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #F2F2F2;
			flex-direction: column;
			border-radius: 20upx;
			.imgs{
				width: 100%;
				height: 100%;
				border-radius: 20upx;
			}
			.img{
				width: 78upx;
				height: 78upx;
				margin-bottom: 10upx;
			}
			span{
				color: #D7D7D7;
				font-size: 24upx;
			}
		}
	}
	//填写
	.tinxie{
		height: 103upx;
		line-height: 103upx;
		background-color: #F8f8f8;
		font-size: 28upx;
		padding: 0 33upx;
		box-sizing: border-box;
		color: #666;
	}
	.shenf{
		flex: 1;
		text-align: right;
	}
</style>