系列文章
【移动设备】iData 50P 技术规格
本文链接:https://blog.csdn.net/youcheng_ge/article/details/130604517
【H5】Promise的用法
本文链接:https://blog.csdn.net/youcheng_ge/article/details/131634038
【H5】文件下载(javascript)
本文链接:https://blog.csdn.net/youcheng_ge/article/details/131539397
【H5】文件上传(ajax)
本文链接:https://blog.csdn.net/youcheng_ge/article/details/131538256
【H5】移动端,常见界面布局模板
本文链接:https://blog.csdn.net/youcheng_ge/article/details/131229989
【H5】前端avalon数据双向绑定(MVVM)
本文链接:https://blog.csdn.net/youcheng_ge/article/details/131067187
【H5】最全Android自动更新(源码)
本文链接:https://blog.csdn.net/youcheng_ge/article/details/126759498
文章目录
前言
本专栏为 前端【H5】专栏,主要介绍HTML知识点。对于刚进入计算机世界的学生来说,学习课本上的知识是远远不够的,并且国内教材偏旧,所以需要我们通过互联网自主学习。
这里普及一个知识:HTML已不仅仅只能开发 Web
,也可以开发移动端(Android
、iOS
),所以本专栏也会介绍 移动端的开发。
我个人将移动端开发,分为两大方向:
①原生开发
最早一批,使用安卓开发工具包(Android SDK)和Java语言来开发App的方式。原生开发允许开发者充分利用安卓平台的功能和特性,以及庞大的安卓开发社区资源。但缺点就是门槛高、需要适配不同尺寸的屏幕、测试繁琐,对开发人员技术要求高。
②混合开发(加壳方式)
当前热门,使用Web技术(网页三剑客HTML、CSS和JavaScript
)开发App的方式,使用vue.js
、node.js
、Angular.js
、React.js
、api.js
等框架开发。混合开发具有较高的开发效率和跨平台的优势,由于使用Web技术进行 界面渲染样式丰富、屏幕适配(栅格技术
自适应)效果好。但缺点就是对底层硬件调用库尚不完善,有时候会发生异常,对框架依赖较高,不过库在不断完善中,主要的相机、相册、GPS、存储调用是没有问题的。
HTML的全称为超文本标记语言,是一种标记语言。是前端的必备技术,一定要掌握好,后期使用前端框架,才不会无所适从。
一、技术介绍
avalon.mobile.js 移动端双向绑定。根据input控件的value,来动态更新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设计一个近九百行的事件系统,连事件回调的执行顺序都进行修复(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-animation
ms-on-*
注意:ms-duplex:在向vm传递数据的同时,是泛型 object类型; ms-duplex-checked,ms-duplex-string,ms-duplex-boolean以及ms-duplex-number:在向vm传递数据的同时,指定传递该数据的类型。
二、项目源码
2.1 绑定text输入框
ms-duplex
<input type="text" class="aui-input aui-text-primary" ms-duplex="riqi" ms-click="CallRiQiSelector"/>
2.2 绑定select下拉框
ms-duplex-string
<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 绑定radio单选按钮
ms-duplex-checked
<label><input class="aui-radio" type="radio" name="banci" ms-duplex-checked="banci" value="早" checked="checked"> 早 </label>
<label><input class="aui-radio" type="radio" name="banci" value="夜"> 夜 </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写死,你也可以采用 查询数据库
的形式,只要符合以下格式的数据就OK。
①方法一: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: "气七模下盘"
}
];
②方法二:数据库查询
详情阅读文章: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;
});
三、效果展示
四、资源链接
完整的网页代码:
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"> 早 </label>
<label><input class="aui-radio" type="radio" name="banci" value="夜"> 夜 </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"> 早 </label>
<label><input class="aui-radio" type="radio" name="kaijibanci" value="夜"> 夜 </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 </label>
<label><input class="aui-radio" type="radio" name="wugangmojudaima" value="LK"> LK </label>
<label><input class="aui-radio" type="radio" name="wugangmojudaima" value="KL"> KL </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>