288 lines
9.5 KiB
HTML
288 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<link rel="stylesheet" href="../css/mui_min.css">
|
||
<link href="../css/mui_picker_min.css" rel="stylesheet"/>
|
||
<link href="../css/mui_poppicker_css" rel="stylesheet"/>
|
||
<script src="../script/api.js"></script>
|
||
<script src="../script/mui.min.js"></script>
|
||
<script src="../script/mui.picker.min.js"></script>
|
||
<script src="../script/mui.poppicker.js"></script>
|
||
</head>
|
||
<style>
|
||
.head {
|
||
height: 10vh;
|
||
box-sizing: border-box;
|
||
border: 1px solid #a3caef;
|
||
}
|
||
.content{
|
||
height: 79vh;
|
||
box-sizing: border-box; border: 1px solid #a3caef;
|
||
}
|
||
.footer{
|
||
height: 10vh;
|
||
box-sizing: border-box; border: 1px solid #a3caef;
|
||
}
|
||
|
||
/*.content {*/
|
||
/* width: 100%;*/
|
||
/* height: 100vh;*/
|
||
/* box-sizing: border-box;*/
|
||
/* !* background-color: #007aff; *!*/
|
||
/* border: 1px solid #a3caef;*/
|
||
/*}*/
|
||
|
||
.form {
|
||
box-sizing: border-box;
|
||
border: 1px solid #a3caef;
|
||
margin: 10px;
|
||
padding: 10px;
|
||
}
|
||
|
||
input {
|
||
font-size: xx-large;
|
||
width: 300px;
|
||
box-sizing: border-box;
|
||
border: 1px solid #a3caef;
|
||
}
|
||
|
||
button {
|
||
border-radius: 20px;
|
||
}
|
||
.flex {
|
||
/*flex 布局*/
|
||
display: flex;
|
||
/*实现垂直居中*/
|
||
align-items: center;
|
||
/*实现水平居中*/
|
||
justify-content: center;
|
||
text-align: justify;
|
||
width: 100%;
|
||
}
|
||
.flex1 {
|
||
/*flex 布局*/
|
||
display: flex;
|
||
/*实现垂直居中*/
|
||
align-items: center;
|
||
/*实现水平居中*/
|
||
justify-content: flex-start;
|
||
text-align: justify;
|
||
width: 100%;
|
||
}
|
||
</style>
|
||
<body>
|
||
<div class="mui-row">
|
||
<div class="head flex mui-row">
|
||
<div class="mui-col-sm-3" style="display:flex;align-items: center;">
|
||
<button class="btnc mui-btn-inline mui-btn-danger" onclick="handleBackMain()">返回</button>
|
||
</div>
|
||
<div class="mui-col-sm-9" style="display:flex;justify-content: flex-end;">
|
||
<button class="btnc mui-btn-inline mui-btn-danger" onclick="closeApp()" type='button'>关闭系统</button>
|
||
</div>
|
||
</div>
|
||
<!--中间内容开始-->
|
||
<div class="mui-row content">
|
||
<div class="mui-col-sm-4">
|
||
<div class="mui-row form flex1">
|
||
<button class="mui-btn-inline mui-btn-info" style="font-size: large;" type='button'>绑定设备</button>
|
||
<button id='initsb' class="mui-btn-inline mui-btn-primary" style="font-size: large;" type='button'>
|
||
请选择设备
|
||
</button>
|
||
<button class="mui-btn-inline mui-btn-success" style="font-size: large;" onclick="initsb()">保存
|
||
</button>
|
||
</div>
|
||
<div class="mui-row form flex1">
|
||
<button class="mui-btn-inline mui-btn-info" style="font-size: large;" type='button'>默认页面</button>
|
||
<button id='initpage' class="mui-btn-inline mui-btn-primary" style="font-size: large;" type='button'>
|
||
请选择页面
|
||
</button>
|
||
<input id="indexPage" type="hidden" value="">
|
||
<button class="mui-btn-inline mui-btn-success" style="font-size: large;" onclick="initpage()">保存
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="mui-col-sm-4">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="footer flex mui-row">
|
||
<div class="mui-col-sm-12 flex"style="width:100%;height:8vh;white-space: nowrap !important;overflow-x: scroll;" id="list">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
|
||
var carListener = null;
|
||
var pageListener = null;
|
||
var userPicker;
|
||
var pagePicker;
|
||
var pickData = [];
|
||
var btnArray = ['取消', '<b style="font-weight:900">确认</b>'];
|
||
var pageData = []
|
||
pageData.push({value: "index", text: "首页"})
|
||
pageData.push({value: "index1", text: "装料页面"})
|
||
pageData.push({value: "collection", text: "剩料收集页面"})
|
||
pageData.push({value: "config", text: "设置页面"})
|
||
|
||
function init() {
|
||
}
|
||
|
||
var apiready = function apiready() {
|
||
initSbList()
|
||
init()
|
||
muiInitPage()
|
||
var indexPage = api.getPrefs({
|
||
sync: true,
|
||
key: 'initpage'
|
||
});
|
||
if (indexPage) {
|
||
pageData.forEach(p => {
|
||
if (indexPage === p.value) {
|
||
document.getElementById('initpage').innerHTML = p.text
|
||
}
|
||
})
|
||
|
||
}
|
||
}
|
||
|
||
//返回主页
|
||
function handleBackMain() {
|
||
api.closeWin();
|
||
}
|
||
|
||
function closeApp() {
|
||
mui.confirm('确认关闭TMR饲喂系统？', '提示', btnArray, function (e) {
|
||
if (e.index == 0) {
|
||
} else {
|
||
api.closeWidget({
|
||
id: api.appId, //应用ID
|
||
retData: {name: 'closeWidget'},
|
||
silent: true
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 初始化设备查询
|
||
function initSbList() {
|
||
pickData = [];
|
||
api.ajax({
|
||
url: 'https://tmr.nxcyx.com/api/app/tmr/sbList?sourceCow=' + api.getPrefs({sync: true, key: 'sourceCow'}),
|
||
method: 'get',
|
||
timeout: 5
|
||
}, function (ret, err) {
|
||
if (ret) {
|
||
var initsb = api.getPrefs({
|
||
sync: true,
|
||
key: 'initsb'
|
||
});
|
||
ret.data.forEach(function (e) {
|
||
if (initsb === e.name) {
|
||
var json = {value: e.sbId, text: e.name};
|
||
pickData.push(json);
|
||
}
|
||
});
|
||
ret.data.forEach(function (e) {
|
||
if (initsb !== e.name) {
|
||
var json = {value: e.sbId, text: e.name};
|
||
pickData.push(json);
|
||
}
|
||
});
|
||
document.getElementById('initsb').innerHTML = pickData[0].text;
|
||
muiInit();
|
||
} else {
|
||
mui.alert("sbList:" + err.msg);
|
||
}
|
||
});
|
||
}
|
||
|
||
// 初始化设备下拉
|
||
function muiInit() {
|
||
(function ($, doc) {
|
||
$.init();
|
||
$.ready(function () {
|
||
/**
|
||
* 获取对象属性的值
|
||
* 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
|
||
* @param {Object} obj 对象
|
||
* @param {String} param 属性名
|
||
*/
|
||
var _getParam = function _getParam(obj, param) {
|
||
return obj[param] || '';
|
||
};
|
||
if (userPicker) {
|
||
} else {
|
||
userPicker = new $.PopPicker();
|
||
var showUserPickerButton = doc.getElementById('initsb');
|
||
carListener = null;
|
||
carListener = showUserPickerButton.addEventListener('tap', function (event) {
|
||
userPicker.show(function (items) {
|
||
console.log('设备切换');
|
||
showUserPickerButton.innerHTML = items[0].text;
|
||
});
|
||
}, false);
|
||
}
|
||
userPicker.setData(pickData);
|
||
});
|
||
})(mui, document);
|
||
}
|
||
|
||
function muiInitPage() {
|
||
(function ($, doc) {
|
||
$.init();
|
||
$.ready(function () {
|
||
/**
|
||
* 获取对象属性的值
|
||
* 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
|
||
* @param {Object} obj 对象
|
||
* @param {String} param 属性名
|
||
*/
|
||
var _getParam = function _getParam(obj, param) {
|
||
return obj[param] || '';
|
||
};
|
||
if (pagePicker) {
|
||
} else {
|
||
pagePicker = new $.PopPicker();
|
||
var showPagePickerButton = doc.getElementById('initpage');
|
||
pageListener = null;
|
||
pageListener = showPagePickerButton.addEventListener('tap', function (event) {
|
||
pagePicker.show(function (items) {
|
||
console.log('设备切换');
|
||
document.getElementById('indexPage').value = items[0].value;
|
||
showPagePickerButton.innerHTML = items[0].text;
|
||
});
|
||
}, false);
|
||
}
|
||
pagePicker.setData(pageData);
|
||
});
|
||
})(mui, document);
|
||
}
|
||
|
||
function initsb() {
|
||
// var value = document.getElementById('initsb').value;
|
||
var value = document.getElementById('initsb').innerHTML
|
||
if (value) {
|
||
api.setPrefs({
|
||
key: 'initsb',
|
||
value: value
|
||
});
|
||
mui.alert('绑定设备"' + value + '"成功');
|
||
}
|
||
}
|
||
|
||
function initpage() {
|
||
var value = document.getElementById('indexPage').value;
|
||
if (value) {
|
||
api.setPrefs({
|
||
key: 'initpage',
|
||
value: value
|
||
});
|
||
var name = document.getElementById('initpage').innerHTML;
|
||
mui.alert('默认页面"' + name + '"设置成功');
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |