TMRAppBle/html/index.html

725 lines
24 KiB
HTML
Raw Normal View History

2023-10-19 15:00:17 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Document</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/ble.js"></script>
<script src="../script/index.js"></script>
<script src="../script/electric.js"></script>
<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>
<script src="../script/echarts.js"></script>
</head>
<style>
.content {
width: 100%;
}
.head {
height: 9vh;
padding: 4px 0;
}
.btnc {
margin-left: 5px;
font-weight: 900;
border-radius: 20px;
}
.btnWIFI {
color: seagreen;
margin-left: 20px;
font-weight: 900;
}
.echarts_wrap {
background-color: brown;
width: 100%;
height: 72vh;
margin-top: 9vh;
display: flex;
justify-content: center;
align-items: center;
}
.echarts_item {
width: 35%;
height: 79vh;
}
.echarts_item1 {
width: 30%;
height: 79vh;
font-size: medium;
font-weight: 900;
}
.header_btn {
background-color: #407ae6;
color: #ffffff;
font-size: 25px;
height: 40px;
font-weight: 900;
width: 100%;
}
.feedShow {
margin: 10px;
}
.trains {
background-color: #407ae6
}
.dis {
display: none;
font-size: 30px;
}
/*toast信息提示*/
.mui-toast-container {
bottom: 50% !important;
}
.mui-toast-message {
/* background: url(/app/themes/default/images/toast.png) no-repeat center 10px #407ae6; */
opacity: 1;
/* color: #fff; */
width: 100%;
padding: 10px 5px 10px 5px;
}
</style>
<body>
<header class="mui-bar mui-bar-nav" style="height: 8vh;">
<div class="mui-row">
<div class="mui-col-xs-6" style="display:flex;align-items: center;">
<button id='showUserPicker' class="btnc mui-btn-inline mui-btn-primary" type='button'>请选择设备</button>
<text id='batchName' style="font-size: 14px;font-weight: 900;"></text>
<button class="btnc mui-btn-inline mui-btn-primary" type='button' onclick="refreshDayPlan()">更新计划</button>
<button class="btnc mui-btn-inline mui-btn-primary" type='button' onclick="reloadPage()">刷新页面</button>
</div>
<div class="mui-col-xs-6" style="display:flex;justify-content: flex-end;">
<button class="btnc mui-btn-inline mui-btn-danger" onclick="closeApp()" type='button'>关闭系统</button>
<button id="driveName" class="btnc mui-btn-info" type="button" onclick="handleBackSys()">机车手</button>
<button id='wifiDom' onclick="showZifuka()" class="btnc mui-btn-inline mui-btn-info"
style="color: seagreen !important;" type='button'>暂无设备</button>
</div>
</div>
</header>
<div class="mui-row" style="height: 83vh;margin-top: 9vh;">
<div class="mui-col-xs-2" style="height: 100%;box-sizing: border-box; border: 1px solid #a3caef;overflow: auto;">
<ul class="mui-table-view" id="train"
style="text-align: center;line-height: 30px;font-size: 12px;font-weight: 900;">
</ul>
</div>
<div class="mui-col-xs-10">
<div class="mui-scroll-wrapper"
style="width:100%;white-space: nowrap !important;overflow-x: scroll;" id="feedList">
</div>
<div>
<div id="echarts_main_one"></div>
<div id="echarts_main_two"></div>
<div >
<button class="btnc mui-btn-primary" type="button" id="fix" onclick="weightFix()">校准计划</button>
<div class="feedShow" id="nowFeed"></div>
<div class="feedShow" id="feedNum"></div>
<button class="btnc mui-btn-primary" id="startLoad" style="font-size: x-large;width: 80%;;"
onclick="startLoad()">开始装料</button>
<button class="btnc mui-btn-primary dis" id="submitData" style="font-size: x-large;width: 90%;"
onclick="submitData()">下一步</button>
</div>
</div>
</div>
</div>
<div class="mui-row" style="box-sizing: border-box; border: 1px solid #a3caef;">
<div class="mui-col-xs-2">
<text id="text" style="margin-left: 20px;line-height:10vh;font-weight: 900;" onclick="updateApp()"></text>
</div>
<div class="mui-col-xs-10" id="timeList">
</div>
</div>
<script type="text/javascript">
'use strict';
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var networkStatus = true;
var driverName = '';
var pickData = [];
var btnArray = ['取消', '<b style="font-weight:900">确认</b>'];
var sbId = null;
// 初始化echarts Dom
var weightChartDom = document.getElementById('echarts_main_two');
var weightMyChart = echarts.init(weightChartDom);
var feedChartDom = document.getElementById('echarts_main_one');
var feedMyChart = echarts.init(feedChartDom);
var _outerRadius = 105;
var _innerRadius = 85;
var feedName;
var templateName;
var templetType;
var _pointerInnerRadius = 20;
var _insidePanelRadius = 80;
var fontsize = 25;
var feedList = [];
var feedIndex = 0;
var classCode = 1;
var trainNumber = 1;
var templateName = '';
var trainIndex = 0;
var trainArr = [];
var batchName = '';
// 装料状态还是卸料状态
var load = true;
var beforeWeight = 0;
var _weightSum = 0;
var _planSum = 0;
var nowWeight = 0;
var _feedNum = 0;
var allow = 0;
var first = true;
var carListener = null;
var resultInterval = null;
var totalInterval = null;
var textInterval = null;
var echartsType = '';
var weightStatus = true;
var IFlyVoice = null;
var text = '';
var speed = '30';
var zfk;
var UNICODE_CHARS = {
1: "①",
2: "②",
3: "③",
4: "④",
5: "⑤",
6: "⑥",
7: "⑦",
8: "⑧",
9: "⑨",
10: "⑩",
11: "⑪",
12: "⑫",
13: "⑬",
14: "⑭",
15: "⑮",
16: "⑯",
17: "⑰",
18: "⑱",
19: "⑲",
20: "⑳",
21: "㉑",
22: "㉒",
23: "㉓",
24: "㉔",
25: "㉕",
26: "㉖",
27: "㉗",
28: "㉘",
29: "㉙",
30: "㉚"
}
var ble;
var apiready = function apiready() {
ble = api.require('ble');
zfk = api.require("moduleDemo");
clearInterval(resultInterval);
clearInterval(totalInterval);
clearInterval(textInterval);
IFlyVoice = api.require('IFlyVoice');
IFlyVoice.initSpeechSynthesizer(function (ret) {
// textInterval = setInterval(function () {
// console.log(text);
// if (text.length > 0) {
// speakTest(text, speed);
// text = '';
// speed = '30';
// }
// }, 2000);
});
initPage();
setTimeout(function(){
initService()
},1000)
api.addEventListener({
name: 'keyback'
}, function (ret, err) {
mui.confirm('确认关闭TMR饲喂系统', '提示', btnArray, function (e) {
if (e.index == 0) {} else {
api.closeWidget({
id: api.appId, //应用ID
retData: { name: 'closeWidget' },
silent: true
});
}
});
});
};
var value = 0;
var value1 = 0;
var data = [value, value1];
var option = {
backgroundColor: '#0F224C',
title: [{
text: batchName,
subtext: '',
x: '65%',
y: '70%',
textStyle: {
fontSize: 14,
fontWeight: '100',
color: '#5dc3ea',
lineHeight: 16,
textAlign: 'center'
}
}, {
text: feedName,
subtext: '',
x: '15%',
y: '70%',
textStyle: {
fontSize: 14,
fontWeight: '100',
color: '#5dc3ea',
lineHeight: 16,
textAlign: 'center'
}
}],
series: [{ //第二个球的填充
type: 'liquidFill',
radius: '60%',
center: ['75%', '35%'],
color: [{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#2aa1e3'
}, {
offset: 1,
color: '#08bbc9'
}],
globalCoord: false
}],
data: [value1, value1], // data个数代表波浪数
backgroundStyle: {
borderWidth: 1,
color: 'RGBA(51, 66, 127, 0.7)'
// color: '#0F224C',
},
label: {
normal: {
textStyle: {
fontSize: 28,
color: '#fff'
}
}
},
outline: {
// show: false
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: '#112165'
}
}
}, {
type: 'liquidFill',
radius: '60%',
center: ['25%', '35%'],
color: [{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#446bf5'
}, {
offset: 1,
color: '#2ca3e2'
}],
globalCoord: false
}],
data: [value, value], // data个数代表波浪数
backgroundStyle: {
borderWidth: 1,
color: 'RGBA(51, 66, 127, 0.7)'
// color: '#0F224C',
},
label: {
normal: {
textStyle: {
fontSize: 28,
color: '#fff'
}
}
},
outline: {
// show: false
borderDistance: 0,
itemStyle: {
borderWidth: 2,
borderColor: '#112165'
}
}
}]
};
// 初始化页面
function initPage() {
getWifiInfo();
}
String.prototype.getByteLen = function () {
var len = 0;
for (var i = 0; i < this.length; i++) {
this.charCodeAt(i) < 256 ? len += 1 : len += 2;
}
return len;
};
var userPicker;
// 初始化设备下拉
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('showUserPicker');
carListener = null;
carListener = showUserPickerButton.addEventListener('tap', function (event) {
userPicker.show(function (items) {
console.log('设备切换');
sbId = items[0].value;
showUserPickerButton.innerHTML = items[0].text;
initTime();
});
}, false);
}
userPicker.setData(pickData);
});
})(mui, document);
}
// 初始化班次信息
function initTime() {
api.ajax({
url: 'https://tmr.nxcyx.com/api/app/tmr/time?sourceCow=' + api.getPrefs({ sync: true, key: 'sourceCow' }),
method: 'get'
}, function (ret, err) {
if (ret) {
if (ret.data.length > 0) {
document.getElementById('text').innerHTML = '班次初始化';
} else {
document.getElementById('text').innerHTML = '当前暂无班次';
}
var html = '';
ret.data.forEach(function (e, index) {
if (index == 0) {
html += '<button class="btnc classes mui-btn-inline mui-btn-primary" type="button" onclick="handleClassClick(this,' + '\'' + e.batch + '\')">' + e.name + '(' + e.start + '-' + e.end + ')</button>';
} else {
html += '<button class="btnc classes mui-btn-inline" type="button" onclick="handleClassClick(this,' + '\'' + e.batch + '\')">' + e.name + '(' + e.start + '-' + e.end + ')</button>';
}
});
document.getElementById('timeList').innerHTML = html;
var param = {
classCode: ret.data[0].batch,
sbId: sbId,
sourceCow: api.getPrefs({ sync: true, key: 'sourceCow' }),
dateOf: getDateStr(new Date())
};
initTrain(param);
} else {
document.getElementById('text').innerHTML = '<font style="color:red">班次加载失败</font>';
}
});
}
// 初始化当前班次所有车次
function initTrain(param) {
document.getElementById('train').innerHTML = '暂无车次';
api.ajax({
url: 'https://tmr.nxcyx.com/api/app/tmr/planDay',
headers: {
'Content-Type': 'application/json;charset=utf-8' //建议key使用首字母大写的形式如 User-Agent
},
method: 'post',
data: {
body: param
}
}, function (ret, err) {
if (ret) {
if (ret.data.length > 0) {
document.getElementById('text').innerHTML = '车次初始化';
} else {
document.getElementById('feedList').innerHTML = '';
feedList = [];
document.getElementById('text').innerHTML = '当前暂无计划';
}
if (ret.data.length == 0) {
mui.toast("该班次暂无车次信息");
} else if (ret.data.length > 0) {
var html = '';
trainArr = [];
ret.data.forEach(function (e, index) {
trainArr.push(e.trainNumber);
if (index == 0) {
html += '<li id="classeCode_' + e.classCode + 'train_' + index + '" class="mui-table-view-cell trains" onclick="handleCarClick(this,' + '\'' + e.classCode + '\',\'' + e.trainNumber + '\')">第' + e.trainNumber + '车(' + e.templetName + ')</li>';
} else {
html += '<li id="classeCode_' + e.classCode + 'train_' + index + '" class="mui-table-view-cell" onclick="handleCarClick(this,' + '\'' + e.classCode + '\',\'' + e.trainNumber + '\')">第' + e.trainNumber + '车(' + e.templetName + ')</li>';
}
});
document.getElementById('train').innerHTML = html;
trainIndex = 0;
classCode = ret.data[0].classCode;
var param = {
classCode: ret.data[0].classCode,
sbId: sbId,
trainNumber: ret.data[0].trainNumber,
sourceCow: api.getPrefs({ sync: true, key: 'sourceCow' }),
dateOf: getDateStr(new Date())
};
initOne(param);
}
} else {
document.getElementById('text').innerHTML = '<font style="color:red">车次加载失败</font>';
}
});
}
// 初始化当前车次饲料信息
function initOne(param) {
if (sid) {
document.getElementById('submitData').setAttribute("class", 'btnc mui-btn-primary');
}
api.ajax({
url: 'https://tmr.nxcyx.com/api/app/tmr/planDay',
headers: {
'Content-Type': 'application/json;charset=utf-8' //建议key使用首字母大写的形式如 User-Agent
},
method: 'post',
data: {
body: param
}
}, function (ret, err) {
if (ret) {
first = true;
document.getElementById('text').innerHTML = '装料信息初始化成功';
var html = '';
ret.data.forEach(function (e) {
load = true;
trainNumber = e.trainNumber;
_weightSum = e.total.toFixed(0);
// 饲料
var feedJson = e.feedJson;
// 合并饲料和圈舍圈舍存入步骤stepsList
var json = [].concat(_toConsumableArray(e.feedJson), _toConsumableArray(e.cowshedJson));
feedList = json;
json.forEach(function (j, index) {
if (index == 0) {
html += '<span id="feed_' + index + '" class="mui-badge mui-badge-purple" style="font-size: 14px;font-weight: 900;">' + UNICODE_CHARS[index + 1] + j.name + ':' + Number(j.weight).toFixed(0) + '</span>';
} else {
html += '<span id="feed_' + index + '" class="mui-badge" style="font-size: 14px;font-weight: 900;">' + UNICODE_CHARS[index + 1] + j.name + ':' + Number(j.weight).toFixed(0) + '</span>';
}
});
document.getElementById('feedList').innerHTML = html;
// 根据步骤下标取stepsList的值
document.getElementById('batchName').innerHTML = e.className + e.trainNumber + '(' + e.total.toFixed(0) + 'kg)';
feedIndex = 0;
_feedNum = 0;
feedName = json[0].name;
// document.getElementById("upload").innerHTML = '上传'+json[0].name
document.getElementById('submitData').innerHTML = '上传' + json[0].name;
document.getElementById('fix').innerHTML = '装料前校准' + json[0].name;
document.querySelector('#feed_0').scrollIntoView(true);
allow = json[0].allow;
// 计划
_planSum = json[0].weight.toFixed(0);
document.getElementById('feedNum').innerHTML = '<font style="color:blue">计划:' + _planSum + '</font>/<font style="color:green">已装:' + _feedNum + '</font>';
text = feedName + _planSum;
batchName = e.className + e.trainNumber;
templateName = e.templetName;
templetType = e.templetType;
document.getElementById('nowFeed').innerHTML = '<font style="color:blue">' + e.className + e.trainNumber + ',' + feedName + '</font>';
document.getElementById('text').innerHTML = 'V' + api.appVersion;
});
} else {
document.getElementById('text').innerHTML = '<font style="color:red">装料信息加载失败</font>';
}
});
}
//班次点击事件
function handleClassClick(obj, batch) {
document.getElementById('batchName').innerHTML = '';
document.getElementById('nowFeed').innerHTML = '';
// document.getElementById('beforeWeight').innerHTML = ''
document.getElementById('feedNum').innerHTML = '';
var doms = document.getElementsByClassName('classes');
if (doms.length > 0) {
for (var i = 0; i < doms.length; i++) {
doms[i].setAttribute("class", 'btnc classes mui-btn-inline');
}
}
obj.setAttribute("class", 'btnc classes mui-btn-inline mui-btn-primary');
var param = {
classCode: batch,
sbId: sbId,
sourceCow: api.getPrefs({ sync: true, key: 'sourceCow' }),
dateOf: getDateStr(new Date())
};
initTrain(param);
}
//左侧车次点击事件
function handleCarClick(obj, classCode, trainNumber) {
trainIndex = Number(trainNumber) - 1;
var doms = document.getElementsByClassName('trains');
if (doms.length > 0) {
for (var i = 0; i < doms.length; i++) {
doms[i].setAttribute("class", 'mui-table-view-cell');
}
}
obj.setAttribute("class", 'mui-table-view-cell trains');
var param = {
classCode: classCode,
sbId: sbId,
trainNumber: trainNumber,
sourceCow: api.getPrefs({ sync: true, key: 'sourceCow' }),
dateOf: getDateStr(new Date())
};
initOne(param);
}
// 初始化设备查询
function initSbList() {
document.getElementById('text').innerHTML = '初始化设备';
api.showProgress({
title: '初始化设备...',
modal: true
});
pickData = [];
api.ajax({
url: 'https://tmr.nxcyx.com/api/app/tmr/sbList?sourceCow=' + api.getPrefs({ sync: true, key: 'sourceCow' }),
// url: 'http://192.168.0.107:8088/app/tmr/sbList?sourceCow=' + api.getPrefs({ sync: true, key: 'sourceCow' }),
method: 'get',
timeout: 5
}, function (ret, err) {
if (ret) {
networkStatus = true;
api.hideProgress();
document.getElementById('text').innerHTML = '设备初始化成功';
sbId = ret.data[0].sbId;
document.getElementById('showUserPicker').innerHTML = ret.data[0].name;
ret.data.forEach(function (e) {
var json = { value: e.sbId, text: e.name };
pickData.push(json);
});
muiInit();
initTime();
} else {
networkStatus = false;
api.hideProgress();
mui.alert("sbList:" + err.msg);
document.getElementById('text').innerHTML = '<font style="color:red">' + '服务器异常' + '</font>';
}
});
}
// 刷新页面
function reloadPage() {
mui.confirm('确认重新初始化页面么?', '提示', btnArray, function (e) {
if (e.index == 0) {} else {
getWifiInfo();
}
});
}
var sid;
// 获取WiFi信息并刷新页面数据
function getWifiInfo() {
// sid = ''
// document.getElementById('text').innerHTML = '正在连接服务器'
var loginUser = api.getPrefs({ sync: true, key: 'loginUser' });
var obj = JSON.parse(loginUser);
driverName = obj.nickName;
document.getElementById('driveName').innerHTML = '用户:' + obj.nickName;
pickData = [];
document.getElementById('train').innerHTML = '';
document.getElementById('timeList').innerHTML = '';
document.getElementById('feedList').innerHTML = '';
initSbList();
}
// 更新获取最新配方
function refreshDayPlan() {
mui.confirm('确认更新计划么?', '提示', btnArray, function (e) {
if (e.index == 0) {} else {
var param = {
sourceCow: api.getPrefs({ sync: true, key: 'sourceCow' }),
dateOf: getDateStr(new Date())
};
api.ajax({
url: 'https://tmr.nxcyx.com/api/app/tmr/planDayInit',
headers: {
'Content-Type': 'application/json;charset=utf-8' //建议key使用首字母大写的形式如 User-Agent
},
method: 'post',
data: {
body: param
}
}, function (ret, err) {
if (ret) {
mui.toast("计划更新成功");
getWifiInfo();
} else {
mui.toast("计划更新失败");
}
});
}
});
}
//退出登录
function handleBackSys() {
mui.confirm('退出当前登录用户?', JSON.parse(api.getPrefs({ sync: true, key: 'loginUser' })).name + '(' + driverName + ')', btnArray, function (e) {
if (e.index == 0) {} else {
//跳转到login.stml
api.closeWin();
api.removePrefs({
key: 'token'
});
api.removePrefs({
key: 'loginUser'
});
api.removePrefs({
key: 'sourceCow'
});
api.clearCache(function () {
console.log("清除完成");
});
}
});
}
</script>
</body>
</html>