| | |
| | | <div class="head"> |
| | | <div class="head-title">自动仓库监控平台</div> |
| | | <div class="time-tools"> |
| | | <span id="bar-year"></span>-<span id="bar-month"></span>-<span id="bar-day"></span> <span id="bar-hour"></span>:<span id="bar-minute"></span>:<span id="bar-second"></span> <span id="bar-week"></span> |
| | | <span id="bar-year"></span>-<span id="bar-month"></span>-<span id="bar-day"></span> <span id="bar-hour"></span>:<span id="bar-minute"></span>:<span id="bar-second"></span> |
| | | </div> |
| | | </div> |
| | | <div class="body"> |
| | |
| | | <div class="box"> |
| | | <div class="box-title">测试状态</div> |
| | | <div class="box-body"> |
| | | <div class="table-head" style="display: flex"><div style="flex: 1">库位号</div><div style="flex: 1">库位状态</div><div style="flex: 1">包号</div><div style="flex: 1">测试状态</div></div> |
| | | <div class="table-head" style="display: flex"><div style="flex: 1">库位号</div><div style="flex: 1">库位状态</div><div style="flex: 3">包号</div><div style="flex: 1">测试状态</div></div> |
| | | <div class="swiper" style="height: 85%"> |
| | | <div class="swiper-wrapper table-item"> |
| | | </div> |
| | |
| | | </div> |
| | | <div class="box"> |
| | | <div class="box-title">合格率</div> |
| | | <div style="display: flex;"class="box-body"> |
| | | <div class="box-body" id="barLabelRotation"></div> |
| | | <!--<div class="box-body3" >--> |
| | | <!-- <div class="percentage" id="thisWeek">60%</div>--> |
| | | <!-- <div class="percentage" id="lastWeek">40%</div>--> |
| | | <!--</div>--> |
| | | </div> |
| | | <div class="box-body" id="barLabelRotation"></div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </body> |
| | | </html> |
| | | <script> |
| | | // 左 |
| | | $('.time-tools').click(function () { |
| | | exitFull(); |
| | | }); |
| | | $('.head-title').click(function () { |
| | | full(); |
| | | }); |
| | | //开始全屏 |
| | | function full() { |
| | | var docElm = document.documentElement; |
| | | //W3C |
| | | if (docElm.requestFullscreen) { |
| | | docElm.requestFullscreen(); |
| | | } |
| | | //FireFox |
| | | else if (docElm.mozRequestFullScreen) { |
| | | docElm.mozRequestFullScreen(); |
| | | } |
| | | //Chrome等 |
| | | else if (docElm.webkitRequestFullScreen) { |
| | | docElm.webkitRequestFullScreen(); |
| | | } |
| | | //IE11 |
| | | else if (elem.msRequestFullscreen) { |
| | | elem.msRequestFullscreen(); |
| | | } |
| | | } |
| | | |
| | | //退出全屏 |
| | | function exitFull() { |
| | | if (document.exitFullscreen) { |
| | | document.exitFullscreen(); |
| | | } |
| | | else if (document.mozCancelFullScreen) { |
| | | document.mozCancelFullScreen(); |
| | | } |
| | | else if (document.webkitCancelFullScreen) { |
| | | document.webkitCancelFullScreen(); |
| | | } |
| | | else if (document.msExitFullscreen) { |
| | | document.msExitFullscreen(); |
| | | } |
| | | } |
| | | let url = 'http://10.12.55.200:8080/fnwms' |
| | | var item = [{locNo: '1',locSts: '1',mk: '1',packStatus$: '1'}] |
| | | var year = '2020'; |
| | |
| | | setDate(); |
| | | },1000) |
| | | setInterval(()=>{ |
| | | //location.reload() |
| | | },10000) |
| | | location.reload() |
| | | },600000) |
| | | function initTest() { |
| | | var box = '' |
| | | var el |
| | |
| | | for (var i = 0; i < item.length; i++) { |
| | | el = "<div class='swiper-slide "+ css + " '><div style='flex: 1'>" |
| | | + item[i].locNo + "</div><div style='flex: 1'>" |
| | | + item[i].locSts + "</div><div style='flex: 1'>" |
| | | + item[i].locSts + "</div><div style='flex: 3'>" |
| | | + item[i].mk + "</div><div style='flex: 1'>" |
| | | + item[i].packStatus$ |
| | | + "</div></div>" |
| | |
| | | $('#bar-hour').text(hour); |
| | | $('#bar-minute').text(minute); |
| | | $('#bar-second').text(second); |
| | | $('#bar-week').text(week); |
| | | } |
| | | /** |
| | | * 获取时间 |
| | |
| | | } |
| | | }, |
| | | legend: { |
| | | textStyle:{color:'#FFF'}, |
| | | textStyle:{color:'#FFF',}, |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | |
| | | color: '#FFF' |
| | | } |
| | | }, |
| | | data: ['测试库位', '静置库位', '测试前暂存库为', '测试失败库位'] |
| | | data: ['测试库位', '静置库位', '暂存库位', 'NG库位'] |
| | | } |
| | | ], |
| | | yAxis: [ |
| | |
| | | } |
| | | }, |
| | | legend: { |
| | | textStyle:{color:'#FFF'}, |
| | | textStyle:{color:'#FFF',fontSize:14}, |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | |
| | | stack: 'Ad', |
| | | label: { |
| | | show: true, |
| | | fontSize: 16,fontWeight: 'bold', |
| | | fontSize: 14,fontWeight: 'bold', |
| | | position: 'top',offset: [-15,5], |
| | | }, |
| | | data: [9, 3] |
| | |
| | | legend: { |
| | | icon: 'roundRect', |
| | | data: ['出库', '入库'], |
| | | textStyle:{color:'#FFF'}, |
| | | textStyle:{color:'#FFF',fontSize:14}, |
| | | }, |
| | | grid: { // 图表距离边框的距离,可用百分比和数字(px)配置 |
| | | top: '20%', |
| | | left: '3%', |
| | | right: '5%', |
| | | bottom: '5%', |