[H5] Avalon 프런트엔드 데이터 양방향 바인딩(MVVM)

데이터베이스 2023-08-26 19:03:42 독서 시간: null

일련의 기사


C# 기본 라이브러리 – 이 문서에 대한 기록 로그 도우미 링크: https://blog.csdn.net/youcheng_ge/article/details/124187709

기사 디렉토리

머리말

이번 칼럼은 [H5]로 HTML5, CSS, 자바스크립트 기술을 주로 소개하고 있다. 요즘은 HTML

이 칼럼은 계속 업데이트되어 [H5] 내용을 보강할 예정입니다. 본 칼럼에 관심이 있으신 분들은 주목해 주시기 바라며, 가장 복잡한 기능을 구현하기 위해 가장 간결한 코드를 사용하도록 안내해드리겠습니다.

1. 기술 소개

avalon.mobile.js 모바일 양방향 바인딩. 입력 컨트롤의 값에 따라 vm의 개체 값이 동적으로 업데이트됩니다.

묶다

Avalon의 바인딩(또는 명령어)에는 다음 세 가지 유형이 있습니다.
{ {}} 여는 태그와 닫는 태그 사이에 있는 보간 표현식, 즉 텍스트 노드인 innerText에도 위치합니다. { {}} 내부에 다양한 필터(|로 식별)를 추가할 수 있습니다 . { {}}는 실제로 텍스트 바인딩(ms-text)의 한 형태라는 점은 주목할 가치가 있습니다 .
여는 태그 내부에 있는 ms-* 바인딩 속성과 바인딩의 95%가 이 형식으로 존재합니다.
해당 형식은 대략 다음과 같이 나뉩니다. "ms" + type + "-" + param1 + "-" + param1 + "-" + param2 + ... + number = value ms-skip //이 바인딩 속성에는 값이 없습니다
ms - Controller="expr" //이 바인딩 속성에는 매개변수가 없습니다
ms-if="expr" //이 바인딩 속성에는 매개변수가 없습니다
ms-if-loop="expr" //이 바인딩 속성에는 매개변수가 있습니다
ms-repeat- el="array" //이 바인딩 속성에는 매개변수가 있습니다.
ms-attr-href="xxxx" //이 바인딩 속성에는 매개변수가 있습니다.
ms-attr-src="xxx/{ {a}}/yyy/{ { b }}” //이 바인딩 속성의 값에는 보간 표현식이 포함되어 있습니다. 문자열 유형을 나타내는 소수의 속성만 보간 표현식을 사용할 수 있습니다.
ms-click-1="fn" //이 바인딩 속성의 이름이 있습니다. 끝에 있는 숫자는 더 많은 클릭 이벤트를 바인딩하는 데 편리합니다. ms-click-2="fn" ms-click-3="fn"
ms-on-click="fn" // 이벤트의 바인딩 속성과 클래스 이름을 나타내기 위해 숫자만 추가할 수 있습니다. 예를 들어 ms-on-click-0="fn" ms- class-1="
xxx " ms-class-2="yyy" ms-class-3="xxx" //숫자는 바인딩 순서도 나타냅니다.
ms-css-Background-color="xxx" //이 바인딩 속성에는 두 개의 매개 변수가 있지만 CSS 바인딩에서는 하나와 동일하며 내부적으로 backgroundColor로 변환됩니다.
ms-duplex-aaa-bbb-string="xxx"//이 바인딩 속성에는 세 가지 다른 가로채기 작업을 나타내는 세 개의 매개 변수가 있습니다.

이벤트 바인딩(ms-on)

Avalon은 ms-on-click 또는 ms-click을 통해 이벤트 바인딩을 수행하고 IE에서 이벤트 객체를 복구합니다. 특히
avalon은 jQuery처럼 거의 900줄에 달하는 이벤트 시스템을 설계하지 않으며 이벤트 콜백의 실행 순서까지 모두 복구합니다. (IE6-8, attachmentEvent에 의해 추가된 콜백은 선입선출 순서로 실행되지 않음) 캡슐화의 얇은 층일 뿐이므로 성능이 매우 강력합니다.
ms-클릭
ms-dbl클릭
ms-mouseout
ms-mouseover
ms-mousemove
ms-mouseenter
ms-mouseleave
ms-mouseup
ms-mouseup
ms-keypress ms
-keyup
ms-keydown ms
-focus
ms-blur
ms-change
ms-scroll
ms- 애니메이션
ms-on-*

注意：ms-duplex：在向vm传递数据的同时，是泛型 object类型； ms-duplex-checked,ms-duplex-string,ms-duplex-boolean以及ms-duplex-number：在向vm传递数据的同时，指定传递该数据的类型。

2. 프로젝트 소스 코드

2.1 텍스트 입력 상자 바인딩

ms-이중

 <input type="text" class="aui-input aui-text-primary" ms-duplex="riqi" ms-click="CallRiQiSelector"/>

2.2 선택 드롭다운 상자 바인딩

ms-이중 문자열

<select id="txt_banzu" ms-duplex-string="banzu">
	<option value="甲" selected>甲</option>
	<option value="乙">乙</option>
	<option value="丙">丙</option>
	<option value="丁">丁</option>
</select>

option순회를 사용하여 값을 추가 할 수도 있습니다 ms-repeat.

<select ms-duplex-string="data.jieguo1">
	<option ms-repeat-el="jieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
</select>

var model = avalon.define({
    
    
	$id: "model",
	jieguo_list: ["合格", "不合格"],
	jianyanjieguo_list: ["空", "合格", "不合格", "报废"],
	buhegeyuanyin_list: ["空", "米数不足", "直径大", "直径小", "表面不良", "重量不足", "密度超差"], //不合格原因
	biaozhun_list: [],

	data: {
    
    
		gongsibianhao: '',
		yangpingbianhao: '',
		yangpingleixing: '',
		guige: '',
		yangpinguizebianhao: '',

		toubuzhijing: '',
		zhongbuzhijing: '',
		weibuzhijing: '',
		kongqizhongzhongliang: '',
		shuizhongzhongliang: '',
		midu: 0,
		jieguo1: '',
		jieguo2: '',
		jieguo3: '',
		jieguo4: '',
		jieguo5: '',
		jieguo6: '',
		jianyanjieguoTotal: '空', //检验结果
		buhegeyuanyinTotal: '空', //不合格原因
		beizhuTotal: '',
	},

2.3 라디오 라디오 버튼 바인딩

ms-이중 확인

<label><input class="aui-radio" type="radio" name="banci" ms-duplex-checked="banci" value="早" checked="checked"> 早&nbsp;&nbsp;&nbsp;</label>
<label><input class="aui-radio" type="radio" name="banci" value="夜"> 夜&nbsp;&nbsp;&nbsp;</label>

2.4 이미지 리소스 바인딩

ms-attr-src

<div class="aui-row">
	<div class="aui-col-xs-3" ms-repeat="List_menu" tapmode ms-click="openWin(el.fun_guid,el.url)">
		<div class="aui-iconfont">
			<img class="aui-col-image" ms-attr-src="{
     
     {el.img_src}}" />
		</div>
		<div class="aui-grid-label">{
   
   {el.menu_name}}</div>
	</div>
</div>

기능 메뉴 배열은 menu.js를 하드코딩하여 정의할 수 있으며 데이터가 다음 형식을 준수하는 한 양식을 List_menu사용할 수도 있습니다 . ①방법 1: menu.js를 작성해서 죽입니다.查询数据库

var GetMenu = [
	// {
    
    
	// 	fun_guid: "WuTiaoYang_frm1",
	// 	url: "WuTiaoYang_frm1.html",
	// 	img_src: '../image/yangpin.png',
	// 	menu_name: "钨条样"
	// },
	{
    
    
		fun_guid: "Thick_1_XDZeroOn",
		url: "Thick_1_XDZeroOn.html",
		img_src: "../image/shangji.png",
		menu_name: "零号旋锻上机"
	},
	{
    
    
		fun_guid: "Thick_2_XDZeroDown",
		url: "Thick_2_XDZeroDown.html",
		img_src: "../image/xiaji.png",
		menu_name: "零号旋锻下机"
	},
	{
    
    
		fun_guid: "Thick_3_XDFour",
		url: "Thick_3_XDFour.html",
		img_src: "../image/xuanduan.png",
		menu_name: "四号旋锻"
	},
	{
    
    
		fun_guid: "Thick_4_THOne",
		url: "Thick_4_THOne.html",
		img_src: "../image/tuihuo.png",
		menu_name: "一号退火"
	},
	{
    
    
		fun_guid: "Thick_5_XDThree",
		url: "Thick_5_XDThree.html",
		img_src: "../image/xuanduan.png",
		menu_name: "三号旋锻"
	},
	{
    
    
		fun_guid: "Thick_6_XDTwo",
		url: "Thick_6_XDTwo.html",
		img_src: "../image/xuanduan.png",
		menu_name: "二号旋锻"
	},
	{
    
    
		fun_guid: "Thick_7_THTwo",
		url: "Thick_7_THTwo.html",
		img_src: "../image/tuihuo.png",
		menu_name: "二号退火"
	},
	{
    
    
		fun_guid: "Thick_8_XDOne",
		url: "Thick_8_XDOne.html",
		img_src: "../image/xuanduan.png",
		menu_name: "一号旋锻"
	},
	{
    
    
		fun_guid: "Thick_9_BigTurn",
		url: "Thick_9_BigTurn.html",
		img_src: "../image/zhuanpan.png",
		menu_name: "大转盘"
	},
	{
    
    
		fun_guid: "Thick_10_SmallTurn",
		url: "Thick_10_SmallTurn.html",
		img_src: "../image/zhuanpan.png",
		menu_name: "小转盘"
	},
	{
    
    
		fun_guid: "Thick_11_AirSevenDown",
		url: "Thick_11_AirSevenDown.html",
		img_src: "../image/xiaji.png",
		menu_name: "气七模下盘"
	}
];

② 방법 2: 데이터베이스 쿼리
자세한 내용은 기사 읽기: https://blog.csdn.net/youcheng_ge/article/details/131472661

GetMenu: function() {
    
    
			api.showProgress({
    
    
				style: 'default',
				animationType: 'fade',
				title: '正在查询，请稍候...',
				text: '',
				modal: true
			});

			var sqlString = "SELECT c.fun_guid,c.url,c.img_src,c.menu_name,a.用户编号,a.用户角色,b.模组名称,b.权限使能 " +
				"FROM dl_mes.用户信息表 a " +
				"LEFT JOIN dl_mes.用户权限表 b ON a.用户编号=b.用户编号 " +
				"INNER JOIN dl_mes.app功能菜单表 c ON c.visible='是' AND (b.模块名称=c.menu_name OR a.用户角色='管理员') " +
				"WHERE (b.权限使能='是' OR a.用户角色='管理员') AND a.用户编号= " + "'" + model.user_no + "'";

			api.ajax({
    
    
				url: API_HOST,
				method: 'post',
				headers: {
    
    
					'Content-Type': 'application/json;charset=utf-8', //必须，否则后端无法识别
					'SN': 14, //消息ID
					'UserID': model.user_no //用户编号
				},
				returnAll: false,
				timeout: 60,
				data: {
    
    
					body: JSON.stringify({
    
    
						"sqlString": sqlString,
					})
				}
			}, function(ret, err) {
    
    
				api.hideProgress();
				if (ret) {
    
    
					if (ret.Success) {
    
     //成功
						model.List_menu = ret.Data.List_TableSend[0];
					} else {
    
     // 取数失败
						ShowToast(ErrorMsg);
					}
				} else {
    
    
					api.alert({
    
    
						msg: err.msg
					});
				}
			});
		},

2.5 양방향 바인딩 처리를 사용하지 마세요

//下拉框只改变事件
function CallComboBoxChange() {
    
    
	model2.banzu = $api.byId('txt_banzu').value;
	model2.ABCzhiliangdengji = $api.byId('txt_ABCzhiliangdengji').value;
	model2.kaijisudu = $api.byId('txt_kaijisudu').value;
	model2.biaomianzhiliang = $api.byId('txt_biaomianzhiliang').value;
	model2.dijipan = $api.byId('txt_dijipan').value;
	model2.shiyandaima = $api.byId('txt_shiyandaima').value;
}

//单选按钮事件
$('input:radio[name="banci"]').click(function(){
     var checkValue = $('input:radio[name="banci"]:checked').val();
     model2.banci = checkValue;
 });

3. 효과 표시

여기에 이미지 설명을 삽입하세요
여기에 이미지 설명을 삽입하세요

4. 리소스 링크

전체 웹페이지 코드:

4.1 부스바 품질등록 웹페이지 소스코드

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>母线质量登记记录</title>
    <link rel="stylesheet" type="text/css" href="../css/aui2.1.css" />
    <style type="text/css">
.aui-bar {
      
      
	margin: 0;
	padding-top:25px;
 }
.aui-list-item-input input[type="text"],
.aui-list-item-input input[type="number"] {
      
      
	padding: 5px 10px;
	text-align: left;
	border:1px solid;
	height: 100%;
	
}
.aui-list .aui-list-item-label,
.aui-list .aui-list-item-label-icon {
      
      
	/* font-size: 14px; */
	font-weight: 400;
	line-height: 1;
	text-align: left;
	display: table-cell;
	white-space: nowrap; 
	vertical-align: middle;
	padding: 5px;
	width: 100%;
	
	overflow:auto;
	display: -webkit-box;
	color: #212121;
    margin: 0;
    padding: 0;
    padding-right: 0.25rem;
    line-height: 2.2rem;
    position: relative;
    -webkit-box-sizing: border-box;
    		box-sizing: border-box;
    display: -webkit-box;
    -webkit-align-items: center;
            align-items: center;
}

.aui-footer {
      
      
	padding: 15px;
}
    </style>
	
</head>
<body ms-controller="model2">
    <!-- 标题栏 -->
   <header class="aui-bar aui-bar-nav" id="aui-header">
        <a class="aui-btn aui-pull-left" tapmode onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">
            母线质量登记记录
        </div>
    </header>
    <!-- 内容区域 -->
    <div class="aui-card-list-content-padded">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label" style="width:140px;">
                        日期：
                    </div>
                    <input type="text" class="aui-input aui-text-primary" ms-duplex="riqi" ms-click="CallRiQiSelector"/>                
                </div>
            </li>
			<li class="aui-list-item">
				<div class="aui-list-item-label" style="width:140px;">
					原料编号：
				</div>
				<input type="text" class="aui-input aui-text-primary" ms-duplex="yuanliaobianhao"/>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-label" style="width:140px;" >
					原料规格：
				</div>
				<input type="text" class="aui-input aui-text-primary" ms-duplex="yuanliaoguige" />
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-label" style="width:140px;">
					原料强度：
				</div>
				<input type="text" class="aui-input aui-text-primary" ms-duplex="yuanliaoqiangdu" />
			</li>
<!-- 			<li class="aui-list-item">
				<div class="aui-list-item-label" style="width:140px;">
					黄丝厂家：
				</div>
				<input type="text" class="aui-input aui-text-primary" ms-duplex="huangsichangjia" />
			</li> -->
			<li class="aui-list-item">
				<div class="aui-list-item-label" style="width:140px;">
					黄丝代码：
				</div>
				<!-- <input type="text" ms-duplex="huangsidaima" ms-click="CallHSCodeSelector"/> -->
				<input type="text" class="aui-input aui-text-primary" ms-duplex="huangsidaima" />
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-label" style="width:140px;">
					doff：
				</div>
				<input type="text" class="aui-input aui-text-primary" ms-duplex="doff" readonly/>
			</li>
        </ul> 
    </div>
	
	<!-- 母线信息 -->
	<div class="aui-content aui-margin-10">
	    <ul class="aui-list aui-list-in">
	        <li class="aui-list-header" style="background-color: #ffff7f;height: 34px;">
	            母线信息
	        </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label" style="width: 190px;">
                        班组：
                    </div>
                    <div class="aui-list-item-input">
						<select id="txt_banzu" ms-duplex-string="banzu">
							<option value="甲" selected>甲</option>
							<option value="乙">乙</option>
							<option value="丙">丙</option>
							<option value="丁">丁</option>
						</select>
                    </div>
                </div>
            </li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width: 190px;">
						班次：
					</div>
					<div class="aui-list-item-input">
						<label><input class="aui-radio" type="radio" name="banci" ms-duplex-checked="banci" value="早" checked="checked"> 早&nbsp;&nbsp;&nbsp;</label>
						<label><input class="aui-radio" type="radio" name="banci" value="夜"> 夜&nbsp;&nbsp;&nbsp;</label>
					</div>
				</div>
			</li>
			<li class="aui-list-item">
			    <div class="aui-list-item-inner">
			        <div class="aui-list-item-label" style="width: 190px;">
			            母线盘编号：
			        </div>
					<div class="aui-list-item-input">
						<input type="text" id="txt_muxianpanbianhao" class="aui-input" 
							ms-duplex="muxianpanbianhao" ms-keydown="Btn_KeyDown(event)"/> 
					</div>
					<div class="aui-list-item-right">
						<div class="aui-list-item-label-icon">
							<i class="aui-iconfont aui-icon-camera" onclick="openScanner()"></i>
						</div>
					</div>	
			    </div>
			</li>
			<li class="aui-list-item">
			    <div class="aui-list-item-inner">
			        <div class="aui-list-item-label" style="width: 190px;">
			            车台号：
			        </div>
			        <input type="text" class="aui-input aui-text-primary" ms-duplex="chetaihao" ms-click="CallCheTaiHaoSelector"/>
			    </div>
			</li>
			<li class="aui-list-item">
			    <div class="aui-list-item-inner">
			        <div class="aui-list-item-label" style="width: 190px;">
			            规格(um)：
			        </div>
					<input type="text" class="aui-input aui-text-primary" ms-duplex="guige" />
			    </div>
			</li>	
		</ul>		
	</div>
	
	<!-- ABC质量 -->
	<div class="aui-content aui-margin-10">
	    <ul class="aui-list aui-list-in">
	        <li class="aui-list-header" style="background-color: #ffff7f;height: 34px;">
	            ABC质量
	        </li>
	        <li class="aui-list-item ">
				 <div class="aui-list-item-inner">
				     <div class="aui-list-item-label" style="width: 140px;">
				         质量等级：
				     </div>
				     <div class="aui-list-item-input">
				         <select id="txt_ABCzhiliangdengji" ms-duplex-string="action">
							<option value="A" selected>A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
				         </select>
				     </div>
				 </div>
	        </li>
			<li class="aui-list-item ">
			    <div class="aui-list-item-inner">
			        <div class="aui-list-item-label" style="width: 140px;">
			            质量描述：
			        </div>
			        <div class="aui-list-item-input">
						<input type="text" ms-duplex="ABCzhiliangmiaoshu" ms-click="CallScrapQualityDescSelector"/>
			        </div>
			    </div>
			</li>
			<li class="aui-list-item ">
			    <div class="aui-list-item-inner">
			        <div class="aui-list-item-label" style="width: 140px;">
			            质量类型：
			        </div>
			        <div class="aui-list-item-input">
						<input type="text" ms-duplex="ABCzhiliangleixing" ms-click="CallScrapQualityTypeSelector"/>
			        </div>
			    </div>
			</li>
	    </ul>
	</div>
	
	<!-- 下盘 -->
	<div class="aui-content aui-margin-10">
		<ul class="aui-list aui-list-in">
		    <li class="aui-list-header" style="background-color: #ffff7f;height: 34px;">
		        下盘
		    </li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" >
						直径：
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="xiapanzhijing"/>
					</div>
					<div class="aui-list-item-label">
						椭圆度：
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="xiapantuoyuandu"/>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						圈径：
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="xiapanquanjing" />
					</div>
					<div class="aui-list-item-label">
						翘头：
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="xiapanqiaotou"/>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						操作工：
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="xiapancaozuogong" ms-click="CallXiaWorkerSelector"/>
					</div>
					<div class="aui-list-item-label">
						成品模编码：
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="chengpinmobianma" ms-click="CallCPMPrompt"/>
					</div>
				</div>
			</li>
		</ul>
	</div>
	
	<!-- 长度 -->
	<div class="aui-content aui-margin-10">
		<ul class="aui-list aui-list-in">
		    <li class="aui-list-header" style="background-color: #ffff7f;height: 34px;">
		        长度
		    </li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						长度(M)：
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="changdu"/>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						实际定长(KM)：
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="shijidingchang"/>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						下盘累积换模长度(KM)：
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="xiapanleijihuanmochangdu"/>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						第几盘：
					</div>
					<div class="aui-list-item-input">
						<select id="txt_dijipan" ms-duplex-string="dijipan">
							<option value="0">0</option>
							<option value="1" selected>1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
						</select>
					</div>
					<div class="aui-list-item-label">
						开机速度：
					</div>
					<div class="aui-list-item-input">
						<select id="txt_kaijisudu" ms-duplex-string="kaijisudu">
							<option value="4">4</option>
							<option value="4.5">4.5</option>
							<option value="8">8</option>
							<option value="10">10</option>
							<option value="11">11</option>
							<option value="12" selected>12</option>
							<option value="15">15</option>
						</select>
					</div>
				</div>
			</li>
		</ul>
	</div>
	
	<!-- 开机 -->
	<div class="aui-content aui-margin-10">
		<ul class="aui-list aui-list-in">
		    <li class="aui-list-header" style="background-color: #ffff7f;height: 34px;">
		        开机
		    </li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						上盘操作工：
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="shangpancaozuogong" ms-click="CallShangWorkerSelector"/>
					</div>
					<div class="aui-list-item-label">
						开机直径：
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="kaijizhijing"/>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						开机椭圆度：
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="kaijituoyuandu" />
					</div>
					<div class="aui-list-item-label">
						开机圈径：
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="kaijiquanjing"/>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						开机翘头：
					</div>
					<div class="aui-list-item-input">
						<input type="number" ms-duplex="kaijiqiaotou" />
					</div>
					<div class="aui-list-item-label">
						开机领班：
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="kaijilingban" ms-click="CallLingBanWorkerSelector" />
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width:145px;">
						开机班次：
					</div>
                    <div class="aui-list-item-input">
						<label><input class="aui-radio" type="radio" name="kaijibanci" value="早" checked="checked"> 早&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label> 
						<label><input class="aui-radio" type="radio" name="kaijibanci" value="夜"> 夜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>     
                    </div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width:145px;">
						工艺代码：
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="gongyidaima" ms-click="CallGYDMSelector"/>
					</div>
				</div>
			</li>
		</ul>
	</div>
	
	<!-- 试验代码 -->
	<div class="aui-content aui-margin-10">
		<ul class="aui-list aui-list-in">
		    <li class="aui-list-header" style="background-color: #ffff7f;height: 34px;">
		        试验代码
		    </li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width:220px;">
						试验代码：
					</div>
					<div class="aui-list-item-input" >
						<select id="txt_shiyandaima" ms-duplex-string="shiyandaima">
							<option value="(空白)" selected>(空白)</option>
							<option value="A0204">A0204</option>
							<option value="A0205">A0205</option>
							<option value="A0206">A0206</option>
							<option value="A0207">A0207</option>
							<option value="A0208">A0208</option>
							<option value="A0209">A0209</option>
							<option value="A0210">A0210</option>
						</select>
					</div>
				</div>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width:220px;">
						钻石模具代码：
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="zuanshimojudaima" ms-click="CallZSMJSelector"/>
					</div>
				</div>
			</li>	
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width:220px;">
						钨钢模具代码：
					</div>
					<div class="aui-list-item-input">
						<label><input class="aui-radio" type="radio" name="wugangmojudaima" value="HZ" checked="checked"> HZ&nbsp;&nbsp;&nbsp;</label> 
						<label><input class="aui-radio" type="radio" name="wugangmojudaima" value="LK"> LK&nbsp;&nbsp;&nbsp;</label>
						<label><input class="aui-radio" type="radio" name="wugangmojudaima" value="KL"> KL&nbsp;&nbsp;&nbsp;</label> 
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						定长：
					</div>
					<div class="aui-list-item-input">
						<input type="number"  ms-duplex="dingchang"/>
					</div>
					<div class="aui-list-item-label">
						表面质量：
					</div>
					<div class="aui-list-item-input">
						<select style="height: 100%;" id="txt_biaomianzhiliang" ms-duplex-string="biaomianzhiliang">
							<option value="(空白)" selected>(空白)</option>
							<option value="A">A</option>
							<option value="B">B</option>
							<option value="C">C</option>
							<option value="D">D</option>
							<option value="E">E</option>
						</select>
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width:220px;">
						BC原因分析：
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="BCyuanyinfenxi" ms-click="CallYYFXSelector" />
					</div>
				</div>
			</li>
			<li class="aui-list-item ">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width:220px;">
						物理退回原因：
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="wulituihuiyuanyin" ms-click="CallWLTHCausesSelector" />
					</div>
				</div>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						设备：
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="shebei"/>
					</div>
					<div class="aui-list-item-right">
						<div class="aui-list-item-label-icon">
							<i class="aui-iconfont aui-icon-more" ms-click="CallSBSelector"></i>
						</div>
					</div>
				</div>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">
						工字轮类型：
					</div>
					<div class="aui-list-item-input">
						<input type="text" ms-duplex="gongzilunleixing" />
					</div>
					<div class="aui-list-item-right">
						<div class="aui-list-item-label-icon">
							<i class="aui-iconfont aui-icon-more" ms-click="CallGZLLXSelector"></i>
						</div>
					</div>
				</div>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label" style="width: 80px;">
					    备注：
					</div>
					<div class="aui-list-item-input">
						<textarea placeholder="备注" style="	text-align: left;" ms-duplex="beizhu"></textarea>
					</div>
				</div>
			</li>
		</ul>
	</div>

    <!--底部状态栏-->
    <div class="aui-footer">
        <div class="aui-btn aui-btn-info" style="width: 100%" ms-click="Btn_OK">
            确认
        </div>
    </div>
</body>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/avalon.mobile.js"></script>
<script type="text/javascript" src="../script/jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="../script/yuanshiApi.js" ></script>
<script>
apiready = function(){
      
      
    api.parseTapmode();
    SetAPIHost();
	
    //上页传值
	var l_data = api.pageParam;
	model2.yuanliaobianhao = l_data.codeno;
	model2.yuanliaoguige = l_data.huangsiguige;
	model2.yuanliaoqiangdu = l_data.qiangdudaihao;
	model2.huangsidaima = l_data.huangsidaima;	
	model2.huangsichangjia = l_data.huangsichangjia;	
	model2.huangsikezhong = l_data.kezhong;	
	model2.doff = l_data.doff;	
	
	model2.ABCzhiliangmiaoshu = "";
	model2.ABCzhiliangleixing = "";
	model2.changdu = 0;
	model2.shijidingchang = 0;
	model2.xiapanleijihuanmochangdu = 0;
	model2.dingchang = 0;
		
    //获取当前日期
    var date = new Date(); 
    var year = date.getFullYear(); 
    var month = date.getMonth() + 1;
    var day = date.getDate();
    month = (month > 9) ? month : ("0" + month);
    day = (day < 10) ? ("0" + day) : day;
    var today = year + "-" + month + "-" + day;
    model2.riqi = today;
}


var model2 = avalon.define({
      
      
    $id: "model2",
    riqi: '',//日期
    banzu: '',//班组
    banci: '早',//班次
    chetaihao: '',//车台号
    guige:'',//规格
	
    muxianpanbianhao: '',//母线盘编号
    ABCzhiliangdengji: 'A',//ABC质量等级
    ABCzhiliangmiaoshu: '',//ABC质量描述
    ABCzhiliangleixing: '',//ABC质量类型

    xiapanzhijing: '',//下盘直径
    xiapantuoyuandu: '',//下盘椭圆度
    xiapanquanjing: '',//下盘圈径
    xiapanqiaotou: '',//下盘翘头
    xiapancaozuogong: '',//下盘操作工
    chengpinmobianma: '',//成品模编码

    changdu: '',//长度
    shijidingchang: '',//实际定长
    xiapanleijihuanmochangdu: '',//下盘累积换模长度
    dijipan: 1,//第几盘
    kaijisudu: 12,//开机速度
    yuanliaoguige: '',//原料规格
	yuanliaoqiangdu: '',//原料强度
    yuanliaobianhao: '',//原料编号
    huangsidaima: '',//黄丝代码
	huangsichangjia: '',//黄丝厂家
	huangsikezhong: '',//黄丝克重
	doff: '',//doff

    shangpancaozuogong: '',//上盘操作工
    kaijizhijing: '',//开机直径
    kaijituoyuandu: '',//开机椭圆度
    kaijiquanjing: '',//开机圈径
    kaijiqiaotou: '',//开机翘头
    kaijilingban: '',//开机领班
    kaijibanci: '早',//开机班次
    gongyidaima: '',//工艺代码

    shiyandaima: '',//试验代码
    zuanshimojudaima: '',//钻石模具代码
    wugangmojudaima: 'HZ',//钨钢模具代码
    dingchang: '',//定长
    BCyuanyinfenxi: '',//BC原因分析
    wulituihuiyuanyin: '',//物理退回原因
    shebei: '',//设备
    gongzilunleixing: '',//工字轮类型
    biaomianzhiliang:'',//表面质量
    beizhu: '',//备注
	dr:'0',//删除标识
	
	//回车事件
	Btn_KeyDown : function(event) {
      
      
		if (event.keyCode == 13) {
      
      
			model2.GetLabelData();
		}
	},
	GetLabelData : function() {
      
      
		model2.muxianpanbianhao = model2.muxianpanbianhao.trim();
		if (model2.muxianpanbianhao.length == 0) {
      
      
			ShowToast("请扫描二维码!");
			$api.byId("txt_muxianpanbianhao").focus();
			return;
		}
	
		api.ajax({
      
      
			url : OpenAPI.ScanMXPBHLabel,
			method : 'post',
			headers: {
      
      
				'Content-Type': 'application/json;charset=utf-8'//必须，否则后端无法识别
			},
			returnAll : false,
			timeout : 60,
			data : {
      
      
				body : JSON.stringify({
      
      
							"No" : model2.muxianpanbianhao
						}) 
			}
		}, function(ret, err) {
      
      
				if (ret) {
      
      
				if (ret.RetInfo.IsSUCD) {
      
      
					var l_tbResult = ret.Data.Obj;
					model2.muxianpanbianhao = l_tbResult.母线盘编号;
					model2.chetaihao = l_tbResult.车台号;
					model2.guige = l_tbResult.母线规格;
				} else {
      
      // 取数失败
					ShowToast(ret.RetInfo.ErrorCode+":"+ret.RetInfo.ErrorMsg);
				}
			} else {
      
      
				ShowToast(err.msg);
			}
		});
	},
	
    Btn_OK: function () {
      
      
		// CallComboBoxChange();//下选值改变事件
		if (model2.ABCzhiliangdengji != "A") {
      
      
			if (model2.ABCzhiliangmiaoshu.trim().length==0) {
      
      
				ShowToast("质量等级不为A，质量描述必须填写！");
				return;
			}
			if (model2.ABCzhiliangleixing.trim().length==0) {
      
      
				ShowToast("质量等级不为A，质量类型必须填写！");
				return;
			}
		}else{
      
      
			model2.ABCzhiliangmiaoshu = "";
			model2.ABCzhiliangleixing = "";
		}
		
        var l_detail = [];
        l_detail.push({
      
      
            日期: model2.riqi,
			原料编号: model2.yuanliaobianhao,
			原料规格: model2.yuanliaoguige,
			原料强度: model2.yuanliaoqiangdu,
			黄丝厂家: model2.huangsichangjia,
			黄丝代码: model2.huangsidaima,
			黄丝克重: model2.huangsikezhong,
			doff: model2.doff,
			
            班组: model2.banzu,
            班次: model2.banci,
			母线盘编号: model2.muxianpanbianhao,
            车台号: model2.chetaihao,
            规格:model2.guige,

            ABC质量等级: model2.ABCzhiliangdengji,
            ABC质量描述: model2.ABCzhiliangmiaoshu,
            ABC质量类型: model2.ABCzhiliangleixing,

            下盘直径: model2.xiapanzhijing,
            下盘椭圆度: model2.xiapantuoyuandu,
            下盘圈径: model2.xiapanquanjing,
            下盘翘头: model2.xiapanqiaotou,
            下盘操作工: model2.xiapancaozuogong,
            成品模编码: model2.chengpinmobianma,

            长度: model2.changdu,
            实际定长: model2.shijidingchang,
            下盘累积换模长度: model2.xiapanleijihuanmochangdu,
            第几盘: model2.dijipan,
            开机速度: model2.kaijisudu,

            上盘操作工: model2.shangpancaozuogong,
            开机直径: model2.kaijizhijing,
            开机椭圆度: model2.kaijituoyuandu,
            开机圈径: model2.kaijiquanjing,
            开机翘头: model2.kaijiqiaotou,
            开机领班: model2.kaijilingban,
            开机班次: model2.kaijibanci,
            工艺代码: model2.gongyidaima,

            试验代码: model2.shiyandaima,
            钻石模具代码: model2.zuanshimojudaima,
            钨钢模具代码: model2.wugangmojudaima,
            定长: model2.dingchang,
            BC原因分析: model2.BCyuanyinfenxi,
            物理退回原因: model2.wulituihuiyuanyin,
            设备: model2.shebei,
            工字轮类型: model2.gongzilunleixing,
            表面质量: model2.biaomianzhiliang,
            备注: model2.beizhu,
			删除:model2.dr
        });
        model2.SaveData(l_detail);
    },

    SaveData: function (a_strDetail) {
      
      
        api.showProgress({
      
      
                style : 'default',
                animationType : 'fade',
                title : '数据保存中，请稍候...',
                text : '',
                modal : true
            });      

        //保存数据
        api.ajax({
      
      
            url : OpenAPI.SaveDataMX,
            method : 'post',
            headers: {
      
      
                'Content-Type': 'application/json;charset=utf-8'//必须，否则后端无法识别
                },
            timeout : 180,
            returnAll : false,
            data : {
      
      
                body : JSON.stringify(a_strDetail)
            }
        }, function(ret, err) {
      
      
            api.hideProgress();
            if (ret) {
      
      
                if (ret.RetInfo.IsSUCD) {
      
      // 保存成功
                    api.alert({
      
      
                        title : '提示',
                        msg : '保存成功！',
                    }, function(ret, err) {
      
      
                        backToHome();
                    });
                } else {
      
      // 保存失败
                    ShowToast(ret.RetInfo.ErrorCode+":"+ret.RetInfo.ErrorMsg);
                }
            } 
            else {
      
      
                ShowToast(err.msg);
            }
        });
    },
    
    //选择日期
    CallRiQiSelector : function() {
      
      
            api.openPicker({
      
      
            type: 'date',
            date: model2.riqi,
            title: '选择日期'
        }, function(ret, err) {
      
      
            if (ret) {
      
      
                model2.riqi = ret.year+"-"+ret.month+"-"+ret.day;
            } else {
      
      
                api.alert({
      
      
                    msg:JSON.stringify(err)
                });
            }
        });
	},
	
	//成品模编码
	CallCPMPrompt : function() {
      
      
		api.prompt({
      
      
			title: '成品模编码',
			text: model2.chengpinmobianma,
			buttons: ['确定', '取消']
		}, function(ret, err) {
      
      
			model2.chengpinmobianma = ret.text;
		});
	},


    /*通用选择区，标准代码模板*/
	//黄丝规格
	CallHSGGSelector : function() {
      
      
	    var delay = 0;
	    if (api.systemType != 'ios') {
      
      
	        delay = 300;
	    }
	    api.openWin({
      
      
	        name : "MXZLDJ_frmHSGG",
	        url : "MXZLDJ_frmHSGG.html",
	        pageParam : {
      
      
	            data : ""
	        },
	        bounces : false,
	        delay : delay
	    });
	},
	//原料强度通用选择
	CallYLQDSelector : function() {
      
      
	    var delay = 0;
	    if (api.systemType != 'ios') {
      
      
	        delay = 300;
	    }
	    api.openWin({
      
      
	        name : "MXZLDJ_frmHSQD",
	        url : "MXZLDJ_frmHSQD.html",
	        pageParam : {
      
      
	            data : ""
	        },
	        bounces : false,
	        delay : delay
	    });
	},
	//黄丝代码通用选择
	CallHSCodeSelector : function() {
      
      
	    var delay = 0;
	    if (api.systemType != 'ios') {
      
      
	        delay = 300;
	    }
	    api.openWin({
      
      
	        name : "MXZLDJ_frmHSCode",
	        url : "MXZLDJ_frmHSCode.html",
	        pageParam : {
      
      
	            data : ""
	        },
	        bounces : false,
	        delay : delay
	    });
	},
    //车台号通用选择
    CallCheTaiHaoSelector : function() {
      
      
        var delay = 0;
        if (api.systemType != 'ios') {
      
      
            delay = 300;
        }
        api.openWin({
      
      
            name : "MXZLDJ_frmCTH",
            url : "MXZLDJ_frmCTH.html",
            pageParam : {
      
      
                data : ""
            },
            bounces : false,
            delay : delay
        });
	},
    
    //质量描述
    CallScrapQualityDescSelector : function() {
      
      
        var delay = 0;
        if (api.systemType != 'ios') {
      
      
            delay = 300;
        }
        api.openWin({
      
      
            name : "MXZLDJ_frmZLMS",
            url : "MXZLDJ_frmZLMS.html",
            pageParam : {
      
      
                data : ""
            },
            bounces : false,
            delay : delay
        });
	},

    //质量类型通用选择
    CallScrapQualityTypeSelector : function() {
      
      
        var delay = 0;
        if (api.systemType != 'ios') {
      
      
            delay = 300;
        }
        api.openWin({
      
      
            name : "MXZLDJ_frmZLLX",
            url : "MXZLDJ_frmZLLX.html",
            pageParam : {
      
      
                data : ""
            },
            bounces : false,
            delay : delay
        });
	},

    //下盘操作工通用选择
    CallXiaWorkerSelector : function() {
      
      
        var delay = 0;
        if (api.systemType != 'ios') {
      
      
            delay = 300;
        }
        api.openWin({
      
      
            name : "MXZLDJ_frmUserInfo",
            url : "MXZLDJ_frmUserInfo.html",
            pageParam : {
      
      
                data : "下盘"
            },
            bounces : false,
            delay : delay
        });
    },
    //上盘操作工通用选择
    CallShangWorkerSelector : function() {
      
      
        var delay = 0;
        if (api.systemType != 'ios') {
      
      
            delay = 300;
        }
        api.openWin({
      
      
            name : "MXZLDJ_frmUserInfo",
            url : "MXZLDJ_frmUserInfo.html",
            pageParam : {
      
      
                data : "上盘"
            },
            bounces : false,
            delay : delay
        });
    },
    //开机领班通用选择
    CallLingBanWorkerSelector : function() {
      
      
        var delay = 0;
        if (api.systemType != 'ios') {
      
      
            delay = 300;
        }
        api.openWin({
      
      
            name : "MXZLDJ_frmUserInfo",
            url : "MXZLDJ_frmUserInfo.html",
            pageParam : {
      
      
                data : "领班"
            },
            bounces : false,
            delay : delay
        });
    },

    //工艺代码
    CallGYDMSelector : function() {
      
      
        var delay = 0;
        if (api.systemType != 'ios') {
      
      
            delay = 300;
        }
        api.openWin({
      
      
            name : "MXZLDJ_frmGYDM",
            url : "MXZLDJ_frmGYDM.html",
            pageParam : {
      
      
                data : ""
            },
            bounces : false,
            delay : delay
        });
    },
	//钻石模具代码
	CallZSMJSelector : function() {
      
      
	    var delay = 0;
	    if (api.systemType != 'ios') {
      
      
	        delay = 300;
	    }
	    api.openWin({
      
      
	        name : "MXZLDJ_frmZSMJDM",
	        url : "MXZLDJ_frmZSMJDM.html",
	        pageParam : {
      
      
	            data : ""
	        },
	        bounces : false,
	        delay : delay
	    });
	},
	//BC原因分析
    CallYYFXSelector : function() {
      
      
        var delay = 0;
        if (api.systemType != 'ios') {
      
      
            delay = 300;
        }
        api.openWin({
      
      
            name : "MXZLDJ_frmYYFX",
            url : "MXZLDJ_frmYYFX.html",
            pageParam : {
      
      
                data : ""
            },
            bounces : false,
            delay : delay
        });
    },
	//物理退回原因
	CallWLTHCausesSelector : function() {
      
      
	    var delay = 0;
	    if (api.systemType != 'ios') {
      
      
	        delay = 300;
	    }
	    api.openWin({
      
      
	        name : "MXZLDJ_frmWLTHCauses",
	        url : "MXZLDJ_frmWLTHCauses.html",
	        pageParam : {
      
      
	            data : ""
	        },
	        bounces : false,
	        delay : delay
	    });
	},
	//设备
	CallSBSelector : function() {
      
      
	    var delay = 0;
	    if (api.systemType != 'ios') {
      
      
	        delay = 300;
	    }
	    api.openWin({
      
      
	        name : "MXZLDJ_frmSB",
	        url : "MXZLDJ_frmSB.html",
	        pageParam : {
      
      
	            data : ""
	        },
	        bounces : false,
	        delay : delay
	    });
	},
	//工字轮类型
	CallGZLLXSelector : function() {
      
      
	    var delay = 0;
	    if (api.systemType != 'ios') {
      
      
	        delay = 300;
	    }
	    api.openWin({
      
      
	        name : "MXZLDJ_frmGZLLX",
	        url : "MXZLDJ_frmGZLLX.html",
	        pageParam : {
      
      
	            data : ""
	        },
	        bounces : false,
	        delay : delay
	    });
	}
});

	//下拉框只改变事件
	// function CallComboBoxChange() {
      
      
	// 	model2.banzu = $api.byId('txt_banzu').value;
	// 	model2.ABCzhiliangdengji = $api.byId('txt_ABCzhiliangdengji').value;
	// 	model2.kaijisudu = $api.byId('txt_kaijisudu').value;
	// 	model2.biaomianzhiliang = $api.byId('txt_biaomianzhiliang').value;
	// 	model2.dijipan = $api.byId('txt_dijipan').value;
	// 	model2.shiyandaima = $api.byId('txt_shiyandaima').value;
	// }

	//单选按钮事件
	$('input:radio[name="banci"]').click(function(){
      
      
	     var checkValue = $('input:radio[name="banci"]:checked').val();
	     model2.banci = checkValue;
	 });
	 
	$('input:radio[name="kaijibanci"]').click(function(){
      
      
	     var checkValue = $('input:radio[name="kaijibanci"]:checked').val();
	     model2.kaijibanci = checkValue;
	 });
	 
	$('input:radio[name="wugangmojudaima"]').click(function(){
      
      
	     var checkValue = $('input:radio[name="wugangmojudaima"]:checked').val();
	     model2.wugangmojudaima = checkValue;
	 });		

    //黄丝规格回调函数
    function SelectHSGGCallBack(data) {
      
      
        model2.yuanliaoguige = data.simple_name;
    }
	//黄丝强度回调函数
	function SelectHSQDCallBack(data) {
      
      
	    model2.yuanliaoqiangdu = data.simple_name;
	}
    //黄丝代码回调函数
    function SelectHSCodeCallBack(data) {
      
      
        model2.huangsidaima = data.simple_no;
    }
	
    //车台号
    function SelectCTHCallBack(data) {
      
      
        model2.chetaihao = data.equipment_name;
    }

    //质量描述回调函数
    function SelectQualityDescCallBack(data) {
      
      
        model2.ABCzhiliangmiaoshu = data.word_name_cn;
    }

    //质量类型回调函数
    function SelectQualityTypeCallBack(data) {
      
      
        model2.ABCzhiliangleixing = data.word_name_cn;
    }

    //下盘操作工回调函数
    function SelectXiaWorkerCallBack(data) {
      
      
        model2.xiapancaozuogong = data.user_name;
     }
    //上盘操作工回调函数
    function SelectShangWorkerCallBack(data) {
      
      
        model2.shangpancaozuogong = data.user_name;
    }
    //领班回调函数
    function SelectLingBanWorkerCallBack(data) {
      
      
        model2.kaijilingban = data.user_name;
    }

    //工艺代码回调函数
    function SelectGYDMCallBack(data) {
      
      
        model2.gongyidaima = data.gydm;
    }
	
    //钻石模具代码回调函数
    function SelectZSMJCallBack(data) {
      
      
        model2.zuanshimojudaima = data.mj_code;
    } 
	
    //BC原因分析回调函数
    function SelectAnalysisCallBack(data) {
      
      
        model2.BCyuanyinfenxi = data.word_name_cn;
    } 
	
    //物理退回原因
    function SelectTuihuiCallBack(data) {
      
      
        model2.wulituihuiyuanyin = data.causes_back;
    } 
	//设备
    function SelectSBCallBack(data) {
      
      
        model2.shebei = data.word_name_cn;
    } 
	
	//工字轮类型
    function SelectGZLLXCallBack(data) {
      
      
        model2.gongzilunleixing = data.word_name_cn;
    } 
	
	//扫码
	function openScanner() {
      
      
		var scanner = api.require('scanner');
			scanner.open(function(ret, err) {
      
      
			if (ret.eventType == "success") {
      
      
				model2.muxianpanbianhao = ret.msg;
				model2.GetLabelData();
			} else {
      
      
				$api.byId('txt_muxianpanbianhao').innerHTML = JSON.stringify(err);
			}
		});
	}

    //关闭页面
    function closeWin() {
      
      
        api.closeWin();
    }

    //关闭返回上一页面
    function backToHome() {
      
      
        api.closeToWin({
      
      
            name : 'MXZLDJ_frm1'
        });
    }

    //提示消息
    function ShowToast(a_strMsg) {
      
      
        api.toast({
      
      
            msg : a_strMsg,
            duration : 5000,
            location : 'middle'
        });
    }       
</script>
</html>

4.2 텅스텐 바 검사 웹페이지 소스 코드

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<title>钨条检验</title>
		<link rel="stylesheet" type="text/css" href="../css/aui2.1.css" />
		<style type="text/css">
			select {
      
      
				padding: 5px 10px;
				text-align: left;
				border: 1px solid;
				height: 100%;
			}

			.aui-bar {
      
      
				margin: 0;
				padding-top: 25px;
			}

			.aui-list-item-input input[type="text"],
			.aui-list-item-input input[type="number"] {
      
      
				padding: 5px 10px;
				text-align: left;
				border: 1px solid;
				height: 100%;
			}

			.aui-list .aui-list-item-label,
			.aui-list .aui-list-item-label-icon {
      
      
				font-weight: 400;
				line-height: 1;
				text-align: left;
				display: table-cell;
				white-space: nowrap;
				vertical-align: middle;
				padding: 5px;
				width: 100%;
				overflow: auto;
				display: -webkit-box;
				color: #212121;
				margin: 0;
				padding: 0;
				padding-right: 0.25rem;
				line-height: 2.2rem;
				position: relative;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				display: -webkit-box;
				-webkit-align-items: center;
				align-items: center;
			}

			.aui-footer {
      
      
				padding: 15px;
			}
		</style>
	</head>
	<body ms-controller="model">
		<!-- 标题栏 -->
		<header class="aui-bar aui-bar-nav" id="aui-header">
			<a class="aui-btn aui-pull-left" tapmode onclick="closeWin()">
				<span class="aui-iconfont aui-icon-left">返回</span>
			</a>
			<div class="aui-title">
				钨条检验
			</div>
		</header>
		<!-- 内容区域 -->
		<div class="aui-card-list-content-padded">
			<ul class="aui-list aui-list-in">
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							样品编号：
						</div>
						<input type="text" class="aui-input aui-text-danger aui-label-outlined"
							ms-duplex="data.yangpingbianhao" readonly />
					</div>
				</li>

				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							样品类型：
						</div>
						<input type="text" class="aui-input aui-text-primary" ms-duplex="data.yangpingleixing"
							readonly />
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							规格：
						</div>
						<input type="text" class="aui-input aui-text-primary" ms-duplex="data.guige" readonly />
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							样品规则编号：
						</div>
						<input type="text" class="aui-input aui-text-primary" ms-duplex="data.yangpinguizebianhao"
							readonly />
					</div>
				</li>
			</ul>
		</div>
		<!-- 内容区域 -->
		<!-- 头部直径 -->
		<div class="aui-content aui-margin-10">
			<ul class="aui-list aui-list-in">
				<li class="aui-list-header" style="background-color: #ffff7f;height: 34px;">
					检验项目
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							头部直径：
						</div>
						<div class="aui-list-item-input">
							<input type="number" class="aui-input" ms-duplex="data.toubuzhijing"
								ms-on-change="Fun_change('头部直径')" />
						</div>
						<div class="aui-list-item-label">
							结果：
						</div>
						<div class="aui-list-item-input">
							<select ms-duplex-string="data.jieguo1">
								<option ms-repeat-el="jieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</div>
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							中部直径：
						</div>
						<div class="aui-list-item-input">
							<input type="number" class="aui-input" ms-duplex="data.zhongbuzhijing"
								ms-on-change="Fun_change('中部直径')" />
						</div>
						<div class="aui-list-item-label">
							结果：
						</div>
						<div class="aui-list-item-input">
							<select ms-duplex-string="data.jieguo2">
								<option ms-repeat-el="jieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</div>
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							尾部直径：
						</div>
						<div class="aui-list-item-input">
							<input type="number" class="aui-input" ms-duplex="data.weibuzhijing"
								ms-on-change="Fun_change('尾部直径')" />
						</div>
						<div class="aui-list-item-label">
							结果：
						</div>
						<div class="aui-list-item-input">
							<select ms-duplex-string="data.jieguo3">
								<option ms-repeat-el="jieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</div>
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							空气中重量：
						</div>
						<div class="aui-list-item-input">
							<input type="number" class="aui-input" ms-duplex="data.kongqizhongzhongliang"
								ms-on-change="Fun_change('空气中重量')" />
						</div>
						<div class="aui-list-item-label">
							结果：
						</div>
						<div class="aui-list-item-input">
							<select ms-duplex-string="data.jieguo4">
								<option ms-repeat-el="jieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</div>
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							水中重量 ：
						</div>
						<div class="aui-list-item-input">
							<input type="number" class="aui-input" ms-duplex="data.shuizhongzhongliang"
								ms-on-change="Fun_change('水中重量')" />
						</div>
						<div class="aui-list-item-label">
							结果：
						</div>
						<div class="aui-list-item-input">
							<select ms-duplex-string="data.jieguo5">
								<option ms-repeat-el="jieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</div>
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							密度 ：
						</div>
						<input type="number" class="aui-input aui-text-primary" ms-duplex="data.midu" readonly />
						<div class="aui-list-item-label">
							结果：
						</div>
						<div class="aui-list-item-input">
							<select ms-duplex-string="data.jieguo6">
								<option ms-repeat-el="jieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<!-- 黄丝参数自动计算 -->
		<div class="aui-content aui-margin-10">
			<ul class="aui-list aui-list-in">
				<li class="aui-list-header" style="background-color: #bfbfbf;height: 34px;">
					结果汇总
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							检验结果：
						</div>
						<div class="aui-list-item-input">
							<select ms-duplex-string="data.jianyanjieguoTotal" ms-on-change="Fun_jianyanjieguochange()">
								<option ms-repeat-el="jianyanjieguo_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</div>
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							不合格原因：
						</div>
						<div class="aui-list-item-input">
							<select ms-duplex-string="data.buhegeyuanyinTotal">
								<option ms-repeat-el="buhegeyuanyin_list" ms-attr-value="{
     
     {el}}">{
   
   {el}}</option>
							</select>
						</div>
					</div>
				</li>

				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label">
							备注：
						</div>
						<div class="aui-list-item-input">
							<textarea placeholder="填写备注" class="aui-input" style="border:1px solid;text-align: left"
								ms-duplex="data.beizhuTotal"></textarea>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<!--底部状态栏-->
		<div class="aui-footer">
			<div class="aui-btn aui-btn-info" style="width: 100%" ms-click="Btn_OK">
				确认
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/avalon.mobile.js"></script>
	<script type="text/javascript" src="../script/yuanshiApi.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script>
		apiready = function() {
      
      
			api.parseTapmode();
			SetAPIHost();
			//上页传值
			var l_data = api.pageParam;
			model.data.gongsibianhao = l_data.gongsibianhao;
			model.data.yangpingleixing = l_data.yangpingleixing;
			model.data.yangpingbianhao = l_data.yangpingbianhao;
			model.data.guige = l_data.guige;
			model.biaozhun_list = l_data.dt_biaozhun;
			if (model.biaozhun_list.length > 0) {
      
      
				model.data.yangpinguizebianhao = model.biaozhun_list[0].规则编号;
			}
		}

		var model = avalon.define({
      
      
			$id: "model",
			jieguo_list: ["合格", "不合格"],
			jianyanjieguo_list: ["空", "合格", "不合格", "报废"],
			buhegeyuanyin_list: ["空", "米数不足", "直径大", "直径小", "表面不良", "重量不足", "密度超差"], //不合格原因
			biaozhun_list: [],

			data: {
      
      
				gongsibianhao: '',
				yangpingbianhao: '',
				yangpingleixing: '',
				guige: '',
				yangpinguizebianhao: '',
				toubuzhijing: '',
				zhongbuzhijing: '',
				weibuzhijing: '',
				kongqizhongzhongliang: '',
				shuizhongzhongliang: '',
				midu: 0,
				jieguo1: '',
				jieguo2: '',
				jieguo3: '',
				jieguo4: '',
				jieguo5: '',
				jieguo6: '',
				jianyanjieguoTotal: '空', //检验结果
				buhegeyuanyinTotal: '空', //不合格原因
				beizhuTotal: '',
			},

			//计算密度（小数点后三位）
			CalcMiDu: function() {
      
      
				if (model.data.kongqizhongzhongliang == 0 ||
					model.data.shuizhongzhongliang == 0 ||
					model.data.kongqizhongzhongliang == model.data.shuizhongzhongliang) {
      
      
					return;
				}

				var l_dTotalNum = Number(model.data.kongqizhongzhongliang) - Number(model.data
					.shuizhongzhongliang);
				l_dTotalNum = Number(model.data.kongqizhongzhongliang) / l_dTotalNum;
				model.data.midu = Number(l_dTotalNum.toFixed(3)); //toFixed得到字符串
				Fun_change('密度');
			},

			Btn_OK: function() {
      
      
				if (model.data.toubuzhijing == 0) {
      
      
					ShowToast("头部直径，必须填写！");
					return;
				}

				if (model.data.zhongbuzhijing == 0) {
      
      
					ShowToast("中部直径，必须填写！");
					return;
				}

				if (model.data.weibuzhijing == 0) {
      
      
					ShowToast("尾部直径，必须填写！");
					return;
				}

				if (model.data.kongqizhongzhongliang == 0) {
      
      
					ShowToast("空气中重量，必须填写！");
					return;
				}

				if (model.data.shuizhongzhongliang == 0) {
      
      
					ShowToast("水中重量，必须填写！");
					return;
				}

				if (model.data.jieguo1 == "" || model.data.jieguo2 == "" ||
					model.data.jieguo3 == "" || model.data.jieguo4 == "" ||
					model.data.jieguo5 == "" || model.data.jieguo6 == "") {
      
      
					ShowToast("检验项目中，结果 存在未填写的记录！");
					return;
				}

				if (model.data.jianyanjieguoTotal == "空") {
      
      
					ShowToast("检验结果，不为【空】！");
					return;
				}

				if (model.data.jianyanjieguoTotal == "不合格" &&
					model.data.buhegeyuanyinTotal == "空") {
      
      
					ShowToast("检验结果【不合格】，需要填写 不合格原因！");
					return;
				}
				model.MakeData();
			},
			MakeData: function() {
      
      
				var Dt_Sample = [];
				var Dt_SampleDetail = [];
				Dt_Sample.push({
      
      
					公司编号: model.data.gongsibianhao,
					样品类型: model.data.yangpingleixing,
					样品编号: model.data.yangpingbianhao,
					样品来源编号: model.data.yangpingbianhao,
					头部直径: model.data.toubuzhijing,
					中部直径: model.data.zhongbuzhijing,
					尾部直径: model.data.weibuzhijing,
					空气中重量: model.data.kongqizhongzhongliang,
					水中重量: model.data.shuizhongzhongliang,
					密度: model.data.midu,
					检验结果: model.data.jianyanjieguoTotal,
					不合格原因: model.data.buhegeyuanyinTotal,
					是否放行: "空",
					放行原因: "空",
					备注: model.data.beizhuTotal,
					检验操作人编号: $api.getStorage("user_no")
				});
				Dt_SampleDetail.push({
      
      
					公司编号: model.data.gongsibianhao,
					样品编号: model.data.yangpingbianhao,
					项目名称: "头部直径",
					项目数据: model.data.toubuzhijing,
					检验结果: model.data.jieguo1,
					不合格原因: "空",
					备注: "空",
				});
				Dt_SampleDetail.push({
      
      
					公司编号: model.data.gongsibianhao,
					样品编号: model.data.yangpingbianhao,
					项目名称: "中部直径",
					项目数据: model.data.zhongbuzhijing,
					检验结果: model.data.jieguo2,
					不合格原因: "空",
					备注: "空",
				});
				Dt_SampleDetail.push({
      
      
					公司编号: model.data.gongsibianhao,
					样品编号: model.data.yangpingbianhao,
					项目名称: "尾部直径",
					项目数据: model.data.weibuzhijing,
					检验结果: model.data.jieguo3,
					不合格原因: "空",
					备注: "空",
				});
				Dt_SampleDetail.push({
      
      
					公司编号: model.data.gongsibianhao,
					样品编号: model.data.yangpingbianhao,
					项目名称: "空气中重量",
					项目数据: model.data.kongqizhongzhongliang,
					检验结果: model.data.jieguo4,
					不合格原因: "空",
					备注: "空",
				});
				Dt_SampleDetail.push({
      
      
					公司编号: model.data.gongsibianhao,
					样品编号: model.data.yangpingbianhao,
					项目名称: "水中重量",
					项目数据: model.data.shuizhongzhongliang,
					检验结果: model.data.jieguo5,
					不合格原因: "空",
					备注: "空",
				});
				Dt_SampleDetail.push({
      
      
					公司编号: model.data.gongsibianhao,
					样品编号: model.data.yangpingbianhao,
					项目名称: "密度",
					项目数据: model.data.midu,
					检验结果: model.data.jieguo6,
					不合格原因: "空",
					备注: "空",
				});
				model.SaveData({
      
      
					T1: Dt_Sample,
					T2: Dt_SampleDetail
				});
			},

			SaveData: function(data) {
      
      
				api.showProgress({
      
      
					style: 'default',
					animationType: 'fade',
					title: '数据保存中，请稍候...',
					text: '',
					modal: true
				});
				//保存数据
				api.ajax({
      
      
					url: API_HOST,
					method: 'post',
					headers: {
      
      
						'Content-Type': 'application/json;charset=utf-8', //必须，否则后端无法识别
						'SN': 2502, //消息ID
						'UserID': $api.getStorage("user_no") //用户编号
					},
					timeout: 180,
					returnAll: false,
					data: {
      
      
						body: JSON.stringify(data)
					}
				}, function(ret, err) {
      
      
					api.hideProgress();
					if (ret) {
      
      
						if (ret.Success) {
      
       // 保存成功
							api.alert({
      
      
								title: '提示',
								msg: '保存成功！',
							}, function(ret, err) {
      
      
								backToHome();
							});
						} else {
      
       // 保存失败
							ShowToast(ret.ErrorMsg);
						}
					} else {
      
      
						ShowToast(err.msg);
					}
				});
			},
		});

		//值改变，判断是否合格
		function Fun_change(a_ItemName) {
      
      
			for (var i = 0; i < model.biaozhun_list.length; i++) {
      
      
				switch (a_ItemName) {
      
      
					case '头部直径':
						if (model.biaozhun_list[i].项目名称 == a_ItemName) {
      
      
							if (model.data.toubuzhijing >= Number(model.biaozhun_list[i].可能最小值) &&
								model.data.toubuzhijing <= Number(model.biaozhun_list[i].可能最大值)) {
      
      
								model.data.jieguo1 = "合格";
							} else {
      
      
								model.data.jieguo1 = "不合格";
							}
						}
						break;

					case '中部直径':
						if (model.biaozhun_list[i].项目名称 == a_ItemName) {
      
      
							if (model.data.zhongbuzhijing >= Number(model.biaozhun_list[i].可能最小值) &&
								model.data.zhongbuzhijing <= Number(model.biaozhun_list[i].可能最大值)) {
      
      
								model.data.jieguo2 = "合格";
							} else {
      
      
								model.data.jieguo2 = "不合格";
							}
						}
						break;

					case '尾部直径':
						if (model.biaozhun_list[i].项目名称 == a_ItemName) {
      
      
							if (model.data.weibuzhijing >= Number(model.biaozhun_list[i].可能最小值) &&
								model.data.weibuzhijing <= Number(model.biaozhun_list[i].可能最大值)) {
      
      
								model.data.jieguo3 = "合格";
							} else {
      
      
								model.data.jieguo3 = "不合格";
							}
						}
						break;

					case '空气中重量':
						model.CalcMiDu();
						if (model.biaozhun_list[i].项目名称 == a_ItemName) {
      
      
							if (model.data.kongqizhongzhongliang >= Number(model.biaozhun_list[i].可能最小值) &&
								model.data.kongqizhongzhongliang <= Number(model.biaozhun_list[i].可能最大值)) {
      
      
								model.data.jieguo4 = "合格";
							} else {
      
      
								model.data.jieguo4 = "不合格";
							}
						}
						break;

					case '水中重量':
						model.CalcMiDu();
						if (model.biaozhun_list[i].项目名称 == a_ItemName) {
      
      
							if (model.data.shuizhongzhongliang >= Number(model.biaozhun_list[i].可能最小值) &&
								model.data.shuizhongzhongliang <= Number(model.biaozhun_list[i].可能最大值)) {
      
      
								model.data.jieguo5 = "合格";
							} else {
      
      
								model.data.jieguo5 = "不合格";
							}
						}
						break;

					case '密度':
						if (model.biaozhun_list[i].项目名称 == a_ItemName) {
      
      
							if (model.data.midu >= Number(model.biaozhun_list[i].可能最小值) &&
								model.data.midu <= Number(model.biaozhun_list[i].可能最大值)) {
      
      
								model.data.jieguo6 = "合格";
							} else {
      
      
								model.data.jieguo6 = "不合格";
							}
						}
						break;

					default:
						break;
				}
			}
		}

		function Fun_jianyanjieguochange() {
      
      
			if (model.data.jianyanjieguoTotal == "合格") {
      
      
				model.data.buhegeyuanyinTotal = "空";
			}
		}

		//四舍五入保留2位小数（若第二位小数为0，则保留一位小数）  
		function keepTwoDecimal(num) {
      
      
			var result = parseFloat(num);
			if (isNaN(result)) {
      
      
				ShowToast("传递参数错误，请检查！");
				return false;
			}
			result = Math.round(num * 100) / 100;
			return result;
		}

		//关闭页面
		function closeWin() {
      
      
			api.closeWin();
		}

		//关闭返回上一页面
		function backToHome() {
      
      
			api.closeToWin({
      
      
				name: 'Quality_1_TBarSample1'
			});
		}
	</script>
</html>

추천

출처blog.csdn.net/youcheng_ge/article/details/131067187
추천
행
Ubuntu에서 전체 CLion 설치 프로세스 요약
첫째, 너무 많은, 당신은 캐시가하고있는거야?
긱 제거 1.4.5.136 제거 도구 그린 에디션
函数内部的this指向 , 如何改变this指向 , 异同点是什么
[FAQ] セキュリティ監視システム/ビデオクラウドストレージ/監視プラットフォームEasyCVRのサーバーインタープリタを変更するにはどうすればよいですか?
커널을 구성하면 컴파일하기 전에 메이크업의 menuconfig를 오류 치명적 오류 : curses.h : 해당 파일이나 디렉토리
구성 요소 -template을 만들 Vue-- --- 개인 어셈블리의 정의를
LeetCode 【12】
도 고전 알고리즘 익스트라 알고리즘 - 데이터 구조 (VI)
Java 코드 작성, 1에서 10까지 인쇄
아카이브
기타
2020-04-08(1460)
2020-04-07(1517)
2020-04-06(1499)
2020-04-05(1440)
2020-04-04(1629)
2020-04-03(1644)
2020-04-02(1572)
2020-04-01(1665)
2020-03-31(1639)
2020-03-30(1334)

코드 세계

© 2018 codetd.com