一連の記事

C# の基礎となるライブラリ –この記事へのレコードログヘルパーのリンク: https://blog.csdn.net/youcheng_ge/article/details/124187709

記事ディレクトリ

一連の記事
序文
1. 技術紹介
2. プロジェクトのソースコード
3.エフェクト表示
4. リソースリンク
- 4.1 バスバー品質登録 Web ページのソースコード
- 4.2 タングステン棒検査 Web ページのソースコード

序文

このコラムは主にHTML5、CSS、JavaScriptの技術を紹介する【H5】です。今ではhtml

このコラムは今後も更新され、充実していきます [H5]。このコラムに興味があれば、ぜひ注目してください。最も複雑な関数を実現するために最も簡潔なコードを使用する方法を説明します。

1. 技術紹介

avalon.mobile.js モバイル双方向バインディング。入力コントロールの値に応じて、vm 内のオブジェクトの値が動的に更新されます。

縛る

Avalon のバインディング (または命令) には次の 3 つのタイプがあります:
{ {}} 開始タグと終了タグの間にある補間式。つまり、テキストノードの 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" //このバインディングプロパティには 2 つのパラメータがありますが、CSS バインディングでは 1 つに相当し、内部でbackgroundColor に変換されます
ms-duplex-aaa-bbb-string="xxx"//このバインディングプロパティには 3 つのパラメータがあり、3 つの異なるインターセプト操作を示します

イベントバインディング (ms-on)

Avalon は ms-on-click または ms-click を通じてイベントバインディングを実行し、IE でイベントオブジェクトを修復します。具体的には、
avalon は jQuery のような 900 行近いイベントシステムを設計せず、イベントコールバックの実行順序さえも両方修復します(IE6-8、attachEvent によって追加されたコールバックは先入れ先出しの順序で実行されません)、カプセル化の薄い層にすぎないため、パフォーマンスは非常に強力です。
ms-click
ms-dblclick
ms-mouseout
ms-mouseover
ms-mousemove
ms-mouseenter
ms-mouseleave
ms-mouseup
ms-mousedown
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-duplex-checked

<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>

関数メニューList_menu配列は、menu.jsをハードコードして定義することもできます查询数据库が、以下の形式に準拠したデータであればフォームを使用することもできます。
①方法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. リソースリンク

完全な Web ページコード:

4.1 バスバー品質登録 Web ページのソースコード

<!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 タングステン棒検査 Web ページのソースコード

<!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>

[H5] avalon フロントエンドデータ双方向バインディング (MVVM)

一連の記事

記事ディレクトリ

序文

1. 技術紹介

2. プロジェクトのソースコード

2.1 テキスト入力ボックスをバインドする

2.2 選択ドロップダウンボックスをバインドする

2.3 バインドラジオラジオボタン

2.4 画像リソースのバインド

2.5 双方向バインディング処理を使用しない

3.エフェクト表示

4. リソースリンク

4.1 バスバー品質登録 Web ページのソースコード

4.2 タングステン棒検査 Web ページのソースコード

おすすめ

[H5] avalon フロントエンドデータ双方向バインディング (MVVM)

一連の記事

記事ディレクトリ

序文

1. 技術紹介

2. プロジェクトのソースコード

2.1 テキスト入力ボックスをバインドする

2.2 選択ドロップダウン ボックスをバインドする

2.3 バインドラジオラジオボタン

2.4 画像リソースのバインド

2.5 双方向バインディング処理を使用しない

3.エフェクト表示

4. リソースリンク

4.1 バスバー品質登録 Web ページのソースコード

4.2 タングステン棒検査 Web ページのソース コード

おすすめ

2.2 選択ドロップダウンボックスをバインドする

4.2 タングステン棒検査 Web ページのソースコード