<!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> 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 { margin-left: 15px; /* margin-right: 15px; */ font-size: x-large; 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: xx-large; color: #fff; width: 100%; padding: 20px 10px 20px 10px; } </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> <button id='showUserPicker' class="btnc mui-btn-inline mui-btn-primary" type='button'>请选择设备</button> <text id='batchName' style="font-size: x-large;margin-left:15px;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' class="btnc mui-btn-inline mui-btn-info" style="color: seagreen !important;" type='button' onclick="rescan()"></button> <button id='showBlePicker' class="btnc mui-btn-inline mui-btn-primary dis" type='button'>连接蓝牙</button> </div> </div> <!--中间内容开始--> <div class="mui-row content"> <!--中间左边开始--> <div class="mui-col-xs-3 centerLeft"> <ul class="mui-table-view" id="train" style="text-align: left;line-height: 60px;font-size: xx-large;font-weight: 900;"> </ul> </div> <!--中间右边开始--> <div class="mui-col-xs-9 centerRight mui-row"> <div class="mui-scroll-wrapper mui-col-sm-12 " 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"> <button class="btnc mui-btn-success" style="font-size: xx-large;" type="button" id="fix" onclick="weightFix()">校准计划</button> <text id='nowFeed' style="font-size:x-large;font-weight: 900;margin-left:10px; "></text> <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> <button class="btnc mui-btn-success dis" id="submitData" style="font-size: xx-large;" 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-10" id="timeList" > </div> </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 bleData = []; 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 = 215; var _innerRadius = 185; var feedName; var templateName; var templetType; var _pointerInnerRadius = 120; var _insidePanelRadius = 180; var fontsize = 80; 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 bleListener = 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 weightSize = 40; var apiready = function apiready() { var size = api.getPrefs({sync: true,key: 'weightSize'}) if (size && !isNaN(size)){ weightSize = size console.log(weightSize) } 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(); initService() // 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 // }); // } // }); // }); }; function rescan(){ if(!connetcedStatus){ if(bleData.length>0){ connect({peripheralUUID: bleData[0].value}); }else{ scan() } } } function initService() { initManager({single: true}); } // 获取当前日期字符串 function getDateStr(date) { var 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; } var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate; return currentdate; } var value = 0; var value1 = 0; var data = [value, value1]; var option = { backgroundColor: '#0F224C', title: [{ text: batchName, subtext: '', x: '65%', y: '70%', textStyle: { fontSize: 60, fontWeight: '100', color: '#5dc3ea', lineHeight: 16, textAlign: 'center' } }, { text: feedName, subtext: '', x: '15%', y: '70%', textStyle: { fontSize: 60, 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: 86, 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: 86, 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; var blePicker; // 初始化设备下拉 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 bleInit(){ (function ($, doc) { $.init(); $.ready(function () { /** * 获取对象属性的值 * 主要用于过滤三级联动中,可能出现的最低级的数据不存在的情况,实际开发中需要注意这一点; * @param {Object} obj 对象 * @param {String} param 属性名 */ var _getParam = function _getParam(obj, param) { return obj[param] || ''; }; if (blePicker) {} else { blePicker = new $.PopPicker(); var showBlePickerButton = doc.getElementById('showBlePicker'); bleListener = null; bleListener = 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: items[0].value}); }); }, false); } blePicker.setData(bleData); }); })(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.className + 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.className + 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) { document.getElementById('submitData').setAttribute("class", 'btnc mui-btn-success'); feedStatus = true 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: xx-large;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: xx-large;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.getElementById('fix').innerHTML = '装料前校准'; document.querySelector('#feed_0').scrollIntoView(true); allow = json[0].allow; // 计划 _planSum = json[0].weight.toFixed(0); renderUnload(); feedMyChart.setOption({ dataset: { source: [[1, _feedNum]] } }); // 误差小于100必须校准才能自动跳转 allowAuto = false; 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;margin-left:10px; ">' + e.className + e.trainNumber + ',' + feedName + '</font>'; document.getElementById('text').innerHTML = 'V' + api.appVersion+'Ble'; }); } 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 = '设备初始化成功'; 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); } }); // sbId = ret.data[0].sbId; // document.getElementById('showUserPicker').innerHTML = ret.data[0].name; sbId = pickData[0].value; document.getElementById('showUserPicker').innerHTML = pickData[0].text; muiInit(); initTime(); } else { networkStatus = false; api.hideProgress(); mui.alert("sbList:" + err.msg); document.getElementById('text').innerHTML = '<font style="color:red">' + '服务器异常' + '</font>'; } }); } // 刷新页面 function reloadPage() { api.openWin({ name: 'collection', reload:true, url:'../html/collection.html' }) // 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>