TMRAppBle/html/config.html

305 lines
10 KiB
HTML
Raw Normal View History

<!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 class="mui-row form flex1">
<button class="mui-btn-inline mui-btn-info" style="font-size: large;" type='button'>跳转数据包数</button>
<input id='weightSize' style="font-size: large;" value="" type="number" placeholder="请输入数字"/>
<button class="mui-btn-inline mui-btn-success" style="font-size: large;" onclick="weightSizeSave()">保存
</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 + '"设置成功');
}
}
function weightSizeSave(){
var value = document.getElementById('weightSize').value;
if (value) {
api.setPrefs({
key: 'weightSize',
value: value
});
mui.alert('自动跳转数据包"' + value + '"成功');
}
}
</script>
</body>
</html>