TMRAppBle/html/index1.html

644 lines
22 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/index.js"></script>
<script src="../script/ble.js"></script>
2023-10-19 15:00:17 +08:00
<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>
body{
/*background-color: rgba(255, 255, 255, 0.96);*/
}
.head{
/*background-color: chartreuse;*/
height: 10vh;
box-sizing: border-box; border: 1px solid #a3caef;
}
.content{
height: 80vh;
box-sizing: border-box; border: 1px solid #a3caef;
}
.centerLeft{
/*background-color: #2ac845;*/
height: 80vh;
box-sizing: border-box; border: 1px solid #a3caef;
overflow: auto;
}
.centerRight{
/*background-color: #007aff;*/
height: 80vh;
box-sizing: border-box; border: 1px solid #a3caef;
}
.footer{
/*background-color: chocolate;*/
height: 10vh;
box-sizing: border-box; border: 1px solid #a3caef;
}
.flex{
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: flex-start;
text-align: justify;
width:100%;
margin:0 auto;
}
.flex2{
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: flex-end;
text-align: justify;
width:100%;
height: 10vh;
margin:0 auto;
}
.btnc {
2023-10-20 10:52:35 +08:00
margin-left: 15px;
/* margin-right: 15px; */
2023-10-30 18:06:37 +08:00
font-size: x-large;
2023-10-19 15:00:17 +08:00
font-weight: 900;
border-radius: 20px;
}
.echarts_item {
width: 50%;
/*background-color: #007aff;*/
height: 68vh;
}
.trains {
background-color: #407ae6
}
.dis {
display: none;
font-size: 25px;
}
/*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; */
font-size: x-large;
/* color: #fff;
*/
2023-10-19 15:00:17 +08:00
width: 100%;
padding: 20px 10px 20px 10px;
2023-10-19 15:00:17 +08:00
}
.btnc:active {
animation: clickAnimation 0.2s ease forwards;
}
@keyframes clickAnimation {
0% { transform: scale(1); } /* 起始状态为原大小 */
100% { transform: scale(0.95); } /* 结束状态为稍微收缩的大小 */
}
2023-10-19 15:00:17 +08:00
</style>
<body>
<div class="mui-row">
<!--头部信息开始-->
<div class="head flex mui-row">
<div class="mui-col-xs-6" style="display:flex;align-items: center;">
<button class="btnc mui-btn-inline mui-btn-danger" onclick="handleBackMain()">返回</button>
2023-10-19 15:00:17 +08:00
<button id='showUserPicker' class="btnc mui-btn-inline mui-btn-primary" type='button'>请选择设备</button>
2023-10-30 18:06:37 +08:00
<text id='batchName' style="font-size: x-large;margin-left:15px;font-weight: 900;"></text>
2023-10-19 15:00:17 +08:00
<button class="btnc mui-btn-inline mui-btn-primary" type='button' onclick="refreshDayPlan()">更新计划</button>
</div>
<div class="mui-col-xs-6" style="display:flex;justify-content: flex-end;">
2023-10-19 15:00:17 +08:00
<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>
2023-10-20 10:52:35 +08:00
<button id='wifiDom' class="btnc mui-btn-inline mui-btn-info"
2023-10-30 18:06:37 +08:00
style="color: seagreen !important;" type='button' onclick="rescan()"></button>
<button id='showBlePicker' class="btnc mui-btn-inline mui-btn-primary dis" type='button'>连接蓝牙</button>
2023-10-19 15:00:17 +08:00
</div>
</div>
<!--中间内容开始-->
<div class="mui-row content">
<!--中间左边开始-->
<div class="mui-col-xs-3 centerLeft">
<ul class="mui-table-view" id="train"
2023-10-30 18:06:37 +08:00
style="text-align: left;line-height: 60px;font-size: xx-large;font-weight: 900;">
2023-10-19 15:00:17 +08:00
</ul>
</div>
<!--中间右边开始-->
<div class="mui-col-xs-9 centerRight mui-row">
2023-10-20 10:52:35 +08:00
<div class="mui-scroll-wrapper mui-col-sm-12 "
2023-10-19 15:00:17 +08:00
style="width:100%;height:5vh;white-space: nowrap !important;overflow-x: scroll;" id="feedList">
</div>
<div class="mui-row mui-col-sm-12" >
<div id="echarts_main_one" class="mui-col-sm-6 echarts_item"></div>
<div id="echarts_main_two" class="mui-col-sm-6 echarts_item"></div>
<div class="mui-col-sm-12 flex2">
2023-10-30 18:06:37 +08:00
<button class="btnc mui-btn-success" style="font-size: xx-large;" type="button" id="fix" onclick="weightFix()">校准计划</button>
2023-10-20 10:52:35 +08:00
<text id='nowFeed' style="font-size:x-large;font-weight: 900;margin-left:10px; "></text>
2023-10-19 15:00:17 +08:00
<text id='feedNum' style="font-size: x-large;font-weight: 900;"></text>
<!-- <button class="btnc mui-btn-success" id="startLoad" style="font-size: xx-large;width: 20%;;"
onclick="startLoad()">开始装料</button> -->
2023-10-30 18:06:37 +08:00
<button class="btnc mui-btn-success dis" id="submitData" style="font-size: xx-large;"
2023-10-19 15:00:17 +08:00
onclick="submitData()">上传</button>
</div>
</div>
</div>
</div>
<!--尾部信息开始-->
<div class="footer flex mui-row">
<div class="mui-col-xs-2" >
<text id="text" style="margin-left: 20px;font-weight: 900;font-size: x-large;" onclick="updateApp()"></text>
</div>
<div class="mui-col-xs-9" id="timeList" >
2023-10-19 15:00:17 +08:00
</div>
<div class="mui-col-xs-1" >
<text id="isfix" style="margin-left: 20px;font-weight: 900;font-size: x-large;" ><font style="color:red;font-size: x-large;">未校准</font></text>
2023-10-19 15:00:17 +08:00
</div>
</div>
</div>
<script type="text/javascript">
'use strict';
2023-10-19 15:00:17 +08:00
//默认自动跳转速度
let weightSize = 3;
//默认称Led比
let shujubao = 1;
let threshold = 20;
let weightBeforefix = '1';
let autoJump = '1';
2023-10-19 15:00:17 +08:00
//车次,蓝牙点击监听事件
let carListener = null;
let bleListener = null;
let userPicker;
let blePicker;
let pickData = [];
let bleData = [];
let btnArray = ['取消', '<b style="font-weight:900">确认</b>'];
// 初始化echarts Dom
let weightChartDom = document.getElementById('echarts_main_two');
let weightMyChart = echarts.init(weightChartDom);
let feedChartDom = document.getElementById('echarts_main_one');
let feedMyChart = echarts.init(feedChartDom);
let _outerRadius = 215;
let _innerRadius = 185;
let _pointerInnerRadius = 120;
let _insidePanelRadius = 180;
let fontsize = 80;
//车次饲料列表
let feedList = [];
let feedIndex = 0;
let driverName = '';
let sbId = null;
let feedName = '';
let remark = '手动上传';
let templetType = '';
let classCode = 1;
let trainNumber = 1;
let minutes = 0;
let templateName = '';
//车次列表
let trainArr = [];
let trainIndex = 0;
//班次名称
let batchName = '';
// 装料状态还是卸料状态 true装料
let load = true;
// 装料前总重量
let beforeWeight = 0;
// 计划车次总重量
let _weightSum = 0;
let weightDataFilter;
weightDataFilter = new WeightDataFilter(100, 20);
var wendinSize = [];
// 计划重量
let _planSum = 0;
//实时总重量
let nowWeight = 0;
//差值装料重量
let _feedNum = 0;
//允许误差
let allow = 0;
//装第一个饲料
let first = true;
//结果上传,车内总重量上传,语音播报等定时任务
let resultInterval = null;
let totalInterval = null;
let textInterval = null;
//echarts类型 多/少
let echartsType = '';
//LED字符卡模块
let zfk;
//蓝牙模块
let ble;
//本地数据库模块
let db;
//数字样式
let 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 apiready = function apiready() {
// 获取db连接
db = api.require('db');
db.openDatabase({
name: 'test',
path: 'fs://Database/cqjiouzai.db'
}, function (ret, err) {
if (ret.status) {
initFeedResult();
} else {
console.log(JSON.stringify(err))
}
});
clearInterval(resultInterval);
clearInterval(totalInterval);
clearInterval(textInterval);
ble = api.require('ble');
zfk = api.require("moduleDemo");
//获取自动跳转速度
var size = api.getPrefs({sync: true, key: 'weightSize'})
if (size && !isNaN(size)) {
weightSize = Number(size)
2023-10-19 15:00:17 +08:00
}
//获取是否需要校准
var fixbeforeload = api.getPrefs({sync: true, key: 'fixbeforeload'});
if (fixbeforeload) {
weightBeforefix = fixbeforeload;
}
//获取是否开启自动跳转
var jump = api.getPrefs({sync: true, key: 'jump'});
if (jump) {
2024-01-02 10:31:23 +08:00
autoJump = jump;
}
//获取称LED比
var btl = api.getPrefs({sync: true, key: 'btl'})
if (btl && !isNaN(btl)) {
shujubao = Number(btl)
}
var threshold = api.getPrefs({sync: true, key: 'threshold'})
if (threshold && !isNaN(threshold)) {
threshold = Number(threshold)
}
//初始化页面数据
initPage();
//定时上传任务
resultInterval = setInterval(function () {
select(db, 'SELECT * FROM t_tmr_result', function (ret, err) {
if (!ret.status) {
console.log(JSON.stringify(err))
}
var data = ret.data
if (data.length > 0) {
var d = data[0]
var r = JSON.parse(d.text);
api.ajax({
url: 'https://tmr.nxcyx.com/api/app/tmr/resultUpload',
headers: {
'Content-Type': 'application/json;charset=utf-8' //建议key使用首字母大写的形式如 User-Agent
},
method: 'post',
data: {
body: r
}
}, function (ret, err) {
if (ret.code === 200) {
//上传成功后删除
execute(db, "delete from t_tmr_result where id = '" + d.id + "'", function (ret, err) {
if (!ret.status) {
console.log(JSON.stringify(err))
}
})
} else {
console.log(r.name + '上传失败')
addNotice(4, 'red', 'submitData,' + err.msg);
}
});
// data.forEach(d => {
//
// })
}
})
}, 3000);
};
2023-10-19 15:00:17 +08:00
// 初始化页面
function initPage() {
mui.toast('初始化页面',{duration:1500,type:'div'});
initUserSb();
}
//创饲喂结果表
function initFeedResult() {
select(db, 'SELECT * FROM t_tmr_result', function(ret, err) {
if (ret.status === false || err.status === false) {
execute(db, 'CREATE TABLE t_tmr_result(id varchar(50),text varchar(2000))', function(ret, err) {
if (ret.status === true) {
console.log('创建饲喂结果表成功');
}else {
console.log(JSON.stringify(err))
}
});
console.log('饲喂结果表不存在');
} else {
console.log('饲喂结果表已存在');
}
});
select(db, 'SELECT * FROM t_ble_msg', function(ret, err) {
if (ret.status === false || err.status === false) {
execute(db, 'CREATE TABLE t_ble_msg(id INTEGER,text varchar(100))', function(ret, err) {
if (ret.status === true) {
console.log('创建蓝牙队列表成功');
}else {
console.log(JSON.stringify(err))
2023-10-19 15:00:17 +08:00
}
});
console.log('蓝牙队列表不存在');
} else {
console.log('蓝牙队列表已存在');
var sql = "delete from t_ble_msg";
execute(db, sql, function (ret, err) {
if (!ret.status) {
console.log(JSON.stringify(err))
}else{
console.log('删除成功')
2023-10-19 15:00:17 +08:00
}
})
}
});
}
2023-10-19 15:00:17 +08:00
// 初始化设备下拉
function bleInit(){
(function ($, doc) {
var showBlePickerButton = doc.getElementById('showBlePicker');
$.init();
$.ready(function () {
/**
* 获取对象属性的值
* 主要用于过滤三级联动中,可能出现的最低级的数据不存在的情况,实际开发中需要注意这一点;
* @param {Object} obj 对象
* @param {String} param 属性名
*/
var _getParam = function _getParam(obj, param) {
return obj[param] || '';
};
if (blePicker) {
} else {
blePicker = new $.PopPicker();
bleListener = null;
showBlePickerButton.addEventListener('tap', function (event) {
blePicker.show(function (items) {
console.log('蓝牙'+JSON.stringify(items[0]));
showBlePickerButton.innerHTML = items[0].text;
uuid = items[0].value
//自动连接
connect({peripheralUUID: uuid});
});
}, false);
}
blePicker.setData(bleData);
});
})(mui, document);
}
2023-10-24 16:15:53 +08:00
//班次点击事件
function handleClassClickH(obj, batch) {
mui.confirm('确定切换到其他班次?', '当前'+batchName, btnArray, function (e) {
if (e.index === 0) {
// return false
} else {
handleClassClick(obj, batch)
}
})
}
//班次点击事件
function handleClassClick(obj, batch) {
weightDataFilter.dataBuffer = []
wendinSize = []
mui.toast('切换班次',{duration:1500,type:'div'});
document.getElementById('batchName').innerHTML = '';
document.getElementById('nowFeed').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');
}
2023-10-19 15:00:17 +08:00
}
//选中当前班次
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 handleCarClickH(obj, classCode, trainNumber){
mui.confirm('确定切换到其他车次?', '当前'+batchName, btnArray, function (e) {
if (e.index === 0) {
// return false
} else {
mui.toast('切换车次', {duration: 1500, type: 'div'});
handleCarClick(obj, classCode, trainNumber)
}
})
}
//左侧车次点击事件
function handleCarClick(obj, classCode, trainNumber) {
weightDataFilter.dataBuffer = []
wendinSize = []
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');
}
2023-10-19 15:00:17 +08:00
}
//选中当前车次
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 initUserSb() {
let loginUser = api.getPrefs({sync: true, key: 'loginUser'});
let obj = JSON.parse(loginUser);
driverName = obj.nickName;
document.getElementById('driveName').innerHTML = '用户:' + obj.nickName;
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 {
weightDataFilter.dataBuffer = []
wendinSize = []
var param = {
sourceCow: api.getPrefs({ sync: true, key: 'sourceCow' }),
dateOf: getDateStr(new Date())
};
api.ajax({
url: 'https://tmr.nxcyx.com/api/app/tmr/planDayInit',
// url: 'http://192.168.0.107:8081/api/planDayInit',
headers: {
'Content-Type': 'application/json;charset=utf-8' //建议key使用首字母大写的形式如 User-Agent
},
method: 'post',
data: {
body: param
}
}, function (ret, err) {
if (ret) {
mui.toast("计划更新成功");
initUserSb();
} else {
mui.toast("计划更新失败"+JSON.stringify(err));
}
});
}
});
}
//退出登录
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("清除完成");
});
//跳转登录页
api.openWin({
name: 'login',
reload:true,
url:'../pages/login.stml'
})
}
});
}
// 获取当前日期字符串
function getDateStr(date) {
let seperator1 = "-";
// var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
return date.getFullYear() + seperator1 + month + seperator1 + strDate;
}
//获取字符长度
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;
};
//合并数组
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);
}
}
</script>
2023-10-19 15:00:17 +08:00
</body>
</html>