tjf
/
yinshuapinmenhu


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716
							<!DOCTYPE html>
<html lang="zh">
<head>
		<meta charset="utf-8" />
		<meta http-equv="X-UA-Compatible" content="IE=edge" />
		<!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> -->
		<meta name="format-detection" content="telephone=no" />
		<title>报告查询</title>
       <meta name="keywords" content="">
       <meta name="description" content="">
	   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
	  
	   
	   <script type="text/javascript" src="./static/js/jquery.min.js"></script>
		<script type="text/javascript" src="./static/js/custom.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link href="./static/css/vendor.css" rel="stylesheet" />
		<link href="./static/css/style.css" rel="stylesheet" />
		<link href="./static/css/custom.css" rel="stylesheet" />
		<link href="./static/css/printstyle.css" rel="stylesheet"/>
		<link href="static/css/index.css" rel="stylesheet"/>	
	</head>
	<body class="pcs" style="display: none;">
		<div id="appse">
			<header>
				<div class='a'>
					<div class='container'>
						<div class='tool'>
							<div class='fr'>
								<a href='' target='_blank'></a>
							</div>
							<div class='loca'>
								<span> 欢迎访问 安徽省刷制品质量监督检验中心 ! 今天{{date_show}} {{week}}</span>
							</div>
							<div class='srch'><input type='text' class='tt' placeholder='输入要查找的信息' v-model="inpute"
									@blur="inpubie" /> <img src='static/picture/icon_ztl_ss@2x.png' @click="nhyesee">
							</div>
						</div>
					</div>
				</div>
				<div class='b'>
					<div class='container'>
						<div class='logo'>
							<a href='javascript:void(0)'><img src='static/picture/pic_hp_dh_logo@2x.png' alt='' /></a>
						</div>
						<div class='frs fr' v-if="hyew == true">
							<div class='menu _list'>
								<ul>
									<li v-for="item,index in tablide" :key="index" @click="tabcl(item.id)">
										<div :class="[ nue == item.id ? 'on' : '' , 'i' ]">
											<p><a :href='ulrw'>{{item.label}}</a></p>
											<div class='ex' v-for="(items,indexs) in item.children" :key="indexs + 'y'"
												v-if='item.children' @click.stop="jeuese(items.id)">
												<p><a :href='ulrw'>{{items.label}}</a></p>

											</div>
										</div>
									</li>
		
								</ul>
							</div>
						</div>
						<a href='' class='mbtn pc-hide'></a>
					</div>
				</div>
			</header>
		</div>
		<div id="app">
		<main>
			<div class="u-fullpart">
				<div class="p_container">
					<!-- 定位 -->
					<div class="pleft">
						<ul>
							<li class="pleft_tit">办事服务</li>
							<li><a href="送检流程.html" >送检流程</a></li>
							<li><a href="办事指南.html">办事指南</a></li>
							<li><a href="网上送检.html">网上送检</a></li>
							<li><a href="报告查询.html" class="act">报告查询</a></li>
							<li><a href="送检须知.html" >送检须知</a></li>
						</ul>
					</div>
				
				<div class="container">
					
					<div class="u-pagepath">
						<p>
							<a href="index.html">首页</a>
							<i>·</i>
							<a href="#">办事服务</a>
							<i>·</i>
							<a href="报告查询.html">报告查询</a>
						</p>
					</div>
					<div class="p_box">
						<div class="p_box_tit cf"><p class="fl p_box_titl">报告查询</p>
							<div class="p_box_ser">
								<div class="psearch" @click="getMode(0)" :class="form.queryMode==0?'act':''">二维码查询</div>
								<div class="psearch" @click="getMode(1)" :class="form.queryMode==1?'act':''">粗略查询</div>
								<div class="psearch" @click="getMode(2)" :class="form.queryMode==2?'act':''">详细查询</div>
							</div>
						</div>
						<div class="pd10 pf_list">
							<!-- 二维码查询 -->
							<div class="pb_search" v-if="searchflag">
								<form>
									<!-- 查询码 -->
									<div v-if="nextflag&&form.queryMode==2">
										<div class="pb_w520 pb_searchnum" style="padding-bottom: 20px;">
											<div class="pb_searchtit" style="margin-bottom: 30px;">查询码：</div>
											<div class="pflexc pb_searnum">
												<input maxlength="1" v-model="queryinput[0]" @keyup="nextFocusNum($event,0)"/>
												<input maxlength="1" v-model="queryinput[1]" @keyup="nextFocusNum($event,1)"/>
												<input maxlength="1" v-model="queryinput[2]" @keyup="nextFocusNum($event,2)"/>
												<input maxlength="1" v-model="queryinput[3]" @keyup="nextFocusNum($event,3)"/>
											</div>
										</div>
									</div>
									<!--第一步页面  -->
									<div v-else>
									<!-- 粗略查询，详细查询 -->
									<div class="pb_w520 pb_searchnum" v-if="form.queryMode!=0">
										<div class="pb_searchtit">报告编号：</div>
										<div class="pflexc pb_searinput"><span>NO：ASJ (</span>
										
											<input maxlength="1" @keyup="nextFocus($event,0)"
                  v-model="reportinput[0]"/>
											<input maxlength="1" @keyup="nextFocus($event,1)"
                   v-model="reportinput[1]"/>
											<input maxlength="1" @keyup="nextFocus($event,2)"
                   v-model="reportinput[2]"/>
											<input maxlength="1" @keyup="nextFocus($event,3)"
                    v-model="reportinput[3]"/>
											<span>QG —</span>
											<input maxlength="1" @keyup="nextFocus($event,4)"
                    v-model="reportinput[4]"/>
											<input maxlength="1" @keyup="nextFocus($event,5)"
                    v-model="reportinput[5]"/>
											<input maxlength="1" @keyup="nextFocus($event,6)"
                    v-model="reportinput[6]"/>
											<span>号</span>
											
										</div>
									</div>
									<div class="pb_w520">
										<div class="pb_searchtit">查询主体：</div>
										<div class="cf">
											<div class="fl pb_searchzt" @click="getType(0)" :class="form.queryType==0?'act':''">个人</div>
											<div class="fl pb_searchzt" @click="getType(1)" :class="form.queryType==1?'act':''">单位</div>
										</div>
									</div>
									<!-- 个人 -->
									<div class="pb_searchsta" v-if="form.queryType==0">
										<div class="pb_w520">
											<div class="pb_searchtit">查询人姓名：</div>
											<input placeholder="请输入查询人姓名" v-model="form.queryName" class="pb_searchin"/>
										</div>
										<div class="pb_w520" >
											<div class="pb_searchtit">查询人手机号：</div>
											<input placeholder="请输入查询人手机号" v-model="form.queryPhone" class="pb_searchin"/>
										</div>
									</div>
									<!-- 单位 -->
									<div class="pb_searchsta" v-if="form.queryType==1">
										<div class="pb_w520">
											<div class="pb_searchtit">单位名称：</div>
											<input placeholder="请输入单位名称" v-model="form.companyName" class="pb_searchin"/>
										</div>
										<div class="pb_w520">
											<div class="pb_searchtit">单位联系号码：</div>
											<input placeholder="请输入单位联系号码" v-model="form.companyPhone" class="pb_searchin"/>
										</div>
									</div>
									<div class="pb_w520">
										<div class="pb_searchtit">短信验证码：</div>
										<div class="cf pb_searchsend">
											<input placeholder="请输入短信验证码" v-model="form.code" class="pb_searchin fl" style="width: 366px;"/>
											
											<div class="fr pb_searchsendr" style="background: #999999;" v-if="timefalg">{{time}}秒后重新获取验证码</div>
											<div class="fr pb_searchsendr"  @click="getCode" v-else>发送验证码</div>
											<!-- <div class="pb_searchsendt">* 此验证码时效期为10分钟</div> -->
										</div>
									</div>
									<!-- 二维码查询 -->
									<div class="pb_w520 pb_searchcode" v-if="form.queryMode==0">
										<div class="pb_searchtit">二维码上传：</div>
										<div class="cf">
											<div class="pb_searchup">
												<el-upload
												  class="avatar-uploader"
												  :action='uploadImgUrl'
												   list-type="picture"
												  :show-file-list="false"
												  :on-success="handleAvatarSuccess"
												  :before-upload="handleBeforeUpload"
												  >
												  <img v-if="form.qrImage" :src="form.qrImage" class="avatar">
												  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
												</el-upload>
												<!-- <img src="static/images/printimg/code_icon.png" class="pb_searchupi"/>
												<input type="file" class="pb_searchupin" /> -->
												<div class="pb_searchupt">* 请确认上传的二维码图片准确无误</div>
											</div>
										</div>
									</div>
									</div>
									
									<div class="pb_searchbtn pb_searchbtna" v-if="form.queryMode==2&&!nextflag" @click="getNext">下一步</div>
									<div class="pb_searchbtn pb_searchbtna" v-else @click="getSerch">查询</div>
									<div class="pb_searchtxt" v-if="form.queryMode==2&&nextflag" @click="getPre">返回上一步</div>
								</form>	
							</div>
						
							<!-- 查询结果 -->
							<div class="pb_result" v-else>
								<img src="static/images/printimg/pic_bgcx_yes.png" v-if="resdata.isQualify=='N'" class="pb_result_img"/>
								<img src="static/images/printimg/pic_bgcx_no.png" v-else class="pb_result_img"/>
								<div class="pb_resulta cf">
									<div class="pb_resultw fl">
										<div class="pb_resultt">报告编号：</div>
										<p>{{resdata.reportNumber}}</p>
									</div>
									<div class="pb_resultw fl">
										<div class="pb_resultt">样品名称：</div>
										<p>{{resdata.sampleName}}</p>
									</div>
								</div>
								<div class="pb_resulta cf">
									<div class="pb_resultw fl">
										<div class="pb_resultt">送检单位名称：</div>
										<p>{{resdata.inspectName}}</p>
									</div>
									<div class="pb_resultw fl">
										<div class="pb_resultt">委托单位名称 ：</div>
										<p>{{resdata.entrustName}}</p>
									</div>
								</div>
								<div class="pb_resulta cf">
									<div class="pb_resultw fl">
										<div class="pb_resultt">是否合格： </div>
										<p>{{resdata.isQualify=='N'?'合格':'不合格'}}</p>
									</div>
								</div>
								<!-- 详细结果 -->
								<div class="pb_resulta cf pb_resultb" v-if="resdata.reportUrl">
									<div style="margin-left: 60px;">
										<div class="pb_resultt">详细报告： </div>
										<div >
											<img v-for="item in resdata.reportUrl" :src="item" class="pb_resulttja"/>
											<!-- <img src="static/images/printimg/pic_jb.png" class="pb_resulttja"/>
											<img src="static/images/printimg/pic_jc.png" class="pb_resulttja"/> -->
										</div>
									</div>
								</div>
								
								<div class="pb_result_btn">
									<a href="index.html" class="pb_result_btna ">返回首页</a>
									<div class="pb_result_btna btnb" @click="getMoreSearch">查询更多详细报告</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				</div>
			</div>
			<!-- 分割 -->
			<!-- <div class="foot_line"></div> -->
		</main>
		</div>
	</body>
	<script src="static/js/footer.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://www.qsqrkg.com/vendor/vendor.js"></script>
	<script src="static/js/script.js"></script>
	<script src="static/js/custom.js"></script>
	
	<script type="text/javascript" src="static/js/header.js"></script>
	<script type="text/javascript">
		var app=new Vue({
			el:'#app',
			data:{
				inpute: '',
				tablide: [],
				hyew: false,
				nue: 0,
				week: '',
				date_show: '',
				ulrw: '',
				mjuede: '',
				
				reportinput:['','','','','','','',],//编码展示
				queryinput:['','','',''],//查询码展示
				form:{
					'reportNumber':'',//报告编号
					'queryType':0,//查询主体0个体，1单位
					'queryMode':0,//查询方式0二维码，1粗略，2详细
					'queryPhone':'',//查询主体为个人时传
					'queryName':'',//查询主体为个人时传
					'companyPhone':'',//查询主体为单位时传
					'companyName':'',//查询主体为单位时传
					'code':'',//验证码
					'qrImage':'',//二维码
					'queryNum':'',//查询码,
				},
				base_url:'http://192.168.101.243:8090/dev-api',
				resdata:{ "searchValue": null,
            "createBy": "admin",
            "createTime": "2021-12-23 07:43:23",
            "updateBy": "",
            "updateTime": null,
            "remark": null,
            "params": {},
            "reportNumber": 1,
            "sampleName": "样品名称",
            "inspectName": "送检单位名称",
            "entrustName": "委托单位名称",
            "isQualify": "Y",
            "reportUrl":''
			},//接口返回展示
				codeflag:false,//禁止多次点击
				nextflag:false,
				searchflag:true,
				timefalg:false,//时间
				time:60,
				timer:'',
				uploadImgUrl: "http://192.168.101.243:8090/dev-api/gateway/query/common/upload", // 上传的图片服务器地址
			},
			created() {
				
			},
			methods:{
				getType(e){
					this.form.queryType=e;
				},
				getMode(e){
					this.form.queryMode=e;
					this.searchflag=true;
				},
				handleBeforeUpload(file) {
					const isJPG =
					  file.type === "image/jpeg" ||
					  file.type === "image/png" ||
					  file.type === "image/jpg";
					const isPNG = file.type === "image/png";
					const isLt2M = file.size / 1024 / 1024 < 10;
					// this.ndheuos = isJPG
					if (!isJPG) {
					  this.$message.error("图片只能是 JPG 格式! 或者 PNG 格式!");
					}
					// if(!isPNG){
					//   this.$message.error('图片只能是 JPG 格式! 或者 PNG 格式!');
					// }
					// if (!isLt2M) {
					//   this.$message.error("文件大小不能超过 10MB!");
					// }
					return  isLt2M;
				  // this.loading = this.$loading({
				  //   lock: true,
				  //   text: "上传中",
				  //   background: "rgba(0, 0, 0, 0.7)",
				  // });
				},
				handleAvatarSuccess(res, file) {
					// console.log(res)
					if(res.code==200){
						this.form.qrImage =res.url;
					}else{
						this.$message.error(res.msg);
					}
				   
				},
				setTimein(){
					var that=this;
					clearInterval(that.timer)
					that.timer=setInterval(()=>{
						if(that.time<=1){
							that.timefalg=false;
							that.time=60;
							clearInterval(that.timer)
						}
						that.time=that.time-1;
					},1000)
				},
				getPre(){
					this.nextflag=false
				},
				nextFocus(el,index){
					var dom = $(".pb_searinput input"),
					                    currInput = dom[index],
					                    nextInput = dom[index + 1],
					                    lastInput = dom[index - 1];
					               
					if (el.keyCode != 8) {
						if (index < (this.reportinput.length - 1)){
						        nextInput.focus();
						    } else {
						        currInput.blur();
						    }
					}else{
						if (index !=0) {
						    lastInput.focus();
						}
					}

				},
				nextFocusNum(el,index){
					var dom = $(".pb_searnum input"),
							                    currInput = dom[index],
							                    nextInput = dom[index + 1],
							                    lastInput = dom[index - 1];
							               
					if (el.keyCode != 8) {
						if (index < (this.queryinput.length - 1)){
						        nextInput.focus();
						    } else {
						        currInput.blur();
						    }
					}else{
						if (index !=0) {
						    lastInput.focus();
						}
					}
				},

				getNext(){
					var that=this;
					var params=this.form;
					if(this.form.queryType==0){
						if(!this.form.queryName){
							this.$message.error('请输入查询人姓名');
							return 
						}
						if(!this.form.queryPhone){
							this.$message.error('请输入查询人手机号');
							return 
						}
						params.companyName='';
						params.companyPhone='';
					}else{
						if(!this.form.companyName){
							this.$message.error('请输入单位名称');
							return 
						}
						if(!this.form.companyPhone){
							this.$message.error('请输入单位联系号码');
							return 
						}
						params.queryName='';
						params.queryPhone='';
					}
					if(!this.form.code){
						this.$message.error('请输入短信验证码');
						return 
					}
					if(this.form.queryMode==2){
						var newArr=this.reportinput;
						var report=0;
						for(var i=0;i<newArr.length;i++){
							if(!newArr[i]){
								report=1
								break
							}
						}
						if(report==0){
							var a=newArr.slice(0,4)
							var b=newArr.slice(4)
							params.reportNumber='NO:ASJ('+a.join('')+')QG —'+b.join('')+'号'
						}else{
							this.$message.error('请输入报告编码');
							return
						}
						params.qrImage='';
					}
					that.nextflag=true;
					params.queryNum='';
					// console.log(params,12)
					// 获取查询码
					$.ajax({
						url:this.base_url+ '/gateway/query/sendQueryNum',
						type: 'POST',
						data: params,
						dataType: 'json',
						success: function(res) {
							if (res.code == 200) {
								that.$message.success(res.msg);
								
								 // that.setTimein()
							} else {
								that.$message({
									message: res.msg,
									type: 'error'
								});
							}
						}
					})
				},
				getMoreSearch(){
					this.form={
						'reportNumber':'',
						'queryType':0,
						'queryMode':0,
						'queryPhone':'',
						'queryName':'',
						'companyPhone':'',
						'companyName':'',
						'code':'',
						'qrImage':'',
						'queryNum':'',
					}
					this.reportinput=['','','','','','','']
					this.queryinput=['','','',''];
					this.nextflag=false
					this.searchflag=true
					this.timefalg=false
					this.time=60
					
					
				},
				getSerch(){
					var that=this;
					var params=this.form;
					// 
					if(this.form.queryType==0){
						if(!this.form.queryName){
							this.$message.error('请输入查询人姓名');
							return 
						}
						if(!this.form.queryPhone){
							this.$message.error('请输入查询人手机号');
							return 
						}
						params.companyName='';
						params.companyPhone='';
						
					}else{
						if(!this.form.companyName){
							this.$message.error('请输入单位名称');
							return 
						}
						if(!this.form.companyPhone){
							this.$message.error('请输入单位联系号码');
							return 
						}
						params.queryName='';
						params.queryPhone='';
					}
					if(!this.form.code){
						this.$message.error('请输入短信验证码');
						return 
					}
					params.reportNumber='';
					params.queryNum='';
					// 判断报告编号
					if(this.form.queryMode!=0){
						var newArr=this.reportinput;
						var report=0;
						for(var i=0;i<newArr.length;i++){
							if(!newArr[i]){
								report=1
								break
							}
						}
						if(report==0){
							var a=newArr.slice(0,4)
							var b=newArr.slice(4)
							// NO:ASJ(2021)QG —001号
							params.reportNumber='NO:ASJ('+a.join('')+')QG —'+b.join('')+'号'
						}else{
							this.$message.error('请输入报告编码');
							return
						}
						params.qrImage='';
					}else{
						if(!this.form.qrImage){
							this.$message.error('请选择二维码');
							return
						}
					}
					//查询码
					if(this.form.queryMode==2){
						var newArrs=this.queryinput;
						var report=0;
						for(var i=0;i<newArrs.length;i++){
							if(!newArrs[i]){
								report=1
								break
							}
						}
						if(report==0){
							params.queryNum=newArrs.join("")
						}else{
							this.$message.error('请输入查询码');
							return
						}
					}
					// console.log(params,123)
					$.ajax({
						url:this.base_url+ '/gateway/query/getReport',
						type: 'POST',
						data: params,
						dataType: 'json',
						success: function(res) {
							if (res.code == 200) {
								that.searchflag=false;
								that.resdata=res.data;
								var newArr=res.data.reportUrl;
								that.resdata.reportUrl=newArr.split(',');
							} else {
								that.$message({
									message: res.msg,
									type: 'error'
								});
							}
						}
					})
					
				},
				getCode(){
					var that=this;
					var params={}
					// 判断是否有手机号
					if(this.form.queryType==0){
						if(!this.form.queryPhone||this.form.queryPhone.length!=11){
							this.$message.error('请输入查询人查询手机号');
							return
						}
						params={
							queryType:this.form.queryType,
							queryPhone:this.form.queryPhone,
							queryMode:this.form.queryMode
						}
					}else{
						if(!this.form.companyPhone||this.form.companyPhone.length!=11){
							this.$message.error('请输入单位联系号码');
							return
						}
						params={
							queryType:this.form.queryType,
							companyPhone:this.form.companyPhone,
							queryMode:this.form.queryMode
						}
					}
					$.ajax({
						url:this.base_url+ '/gateway/query/getCode',
						type: 'POST',
						data: params,
						dataType: 'json',
						success: function(res) {
							if (res.code == 200) {
								 that.$message.success('发送成功');
								 that.timefalg=true;
								 that.setTimein()
							} else {
								that.$message({
									message: res.msg,
									type: 'error'
								});
							}
						}
					})
				},
				getInput(){
					console.log(55)
				},
				// 头部
				inpubie() {
					console.log(this.inpute)
				},
				nhyesee() {
					console.log(this.inpute)
					
				},
				tabcl(index, val) {
					this.nue = index
					if (val == 1) {
						this.ulrw = index.html
					} else {
						this.ulrw = 'djdt.html?id=' + val
					}
				},
				jeuese(index) {
					if (index == 1) {
						this.ulrw = index.html
					} else {
						this.ulrw = 'djdt.html?id=' + index
					}
				},
			}
		})
	</script>
	<style>
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 178px;
	    height: 178px;
	    line-height: 178px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
	  </style>
</html>