| | |
| | | } |
| | | } |
| | | |
| | | #led-content { |
| | | display: none; |
| | | } |
| | | #led-p-content { |
| | | text-align: center; |
| | | padding: 20px 40px; |
| | | font-size: 35px; |
| | | font-weight: bold; |
| | | /*color: #FF5722;*/ |
| | | } |
| | | |
| | | </style> |
| | | </head> |
| | |
| | | <p class="english">warehouse data</p> |
| | | </div> |
| | | <div class="charge-info-elem"> |
| | | <img src="img/a.png"> |
| | | <img src="img/a1.png"> |
| | | <div class="info-detail"> |
| | | <div class="real-data"> |
| | | <i class="count" id="xDistance">0</i> |
| | | <span class="unit">km</span> |
| | | <span class="unit">m</span> |
| | | </div> |
| | | <div class="content">累计走行距离(千米)</div> |
| | | <div class="content">累计走行距离(米)</div> |
| | | </div> |
| | | </div> |
| | | <div class="charge-info-elem"> |
| | | <img src="img/b.png"> |
| | | <img src="img/b1.png"> |
| | | <div class="info-detail"> |
| | | <div class="real-data"> |
| | | <i class="count" id="yDistance">0</i> |
| | | <span class="unit">km</span> |
| | | <span class="unit">m</span> |
| | | </div> |
| | | <div class="content">累计升降距离(千米)</div> |
| | | <div class="content">累计升降距离(米)</div> |
| | | </div> |
| | | </div> |
| | | <div class="charge-info-elem"> |
| | | <img src="img/c.png"> |
| | | <img src="img/c1.png"> |
| | | <div class="info-detail"> |
| | | <div class="real-data"> |
| | | <i class="count" id="xDuration">0</i> |
| | | <span class="unit">h</span> |
| | | <span class="unit">s</span> |
| | | </div> |
| | | <div class="content">累计走行时长(小时)</div> |
| | | <div class="content">累计走行时长(秒)</div> |
| | | </div> |
| | | </div> |
| | | <div class="charge-info-elem"> |
| | | <img src="img/d.png"> |
| | | <img src="img/d1.png"> |
| | | <div class="info-detail"> |
| | | <div class="real-data"> |
| | | <i class="count" id="yDuration">0</i> |
| | | <span class="unit">h</span> |
| | | <span class="unit">s</span> |
| | | </div> |
| | | <div class="content">累计升降时长(小时)</div> |
| | | <div class="content">累计升降时长(秒)</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="image-border image-border2"></div> |
| | | <div class="image-border image-border3"></div> |
| | | <div class="image-border image-border4"></div> |
| | | <span>浙江中扬物流装备有限公司</span> |
| | | <img src="img/wxCode.jpg"> |
| | | <span>浙江中扬立库技术有限公司</span> |
| | | <img src="../../static/image/barcode.png"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="speed-content"> |
| | | <div id="crn-chart" class="speed-chart"> |
| | | </div> |
| | | <!-- <div id="xSpeed-chart" class="speed-chart">--> |
| | | <!--<!– <span>堆垛机走行速度:</span><span id="xSpeed" class="counter">5.00</span><span>米/秒</span>–>--> |
| | | <!-- </div>--> |
| | | <!-- <div id="ySpeed-chart" class="speed-chart">--> |
| | | <!--<!– <span>堆垛机升降速度:</span><span id="ySpeed" class="counter">5.00</span><span>米/秒</span>–>--> |
| | | <!-- </div>--> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 中下 --> |
| | | <div class="scroll-pane"> |
| | | <div class="layui-carousel" id="test1"> |
| | | <div class="layui-carousel" id="banner"> |
| | | <div carousel-item> |
| | | <div class="item-img" id="img-1" style="background-color: red"></div> |
| | | <div class="item-img" id="img-2" style="background-color: gold"></div> |
| | |
| | | <div class="item-img" id="img-4" style="background-color: white"></div> |
| | | <div class="item-img" id="img-5" style="background-color: darkgoldenrod"></div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div id="led-content"> |
| | | <pre id="led-p-content"></pre> |
| | | </div> |
| | | |
| | | <!-- <!– 中左 –>--> |
| | |
| | | var element = layui.element; |
| | | // 轮播图 |
| | | carousel.render({ |
| | | elem: '#test1' |
| | | elem: '#banner' |
| | | ,width: '100%' //设置容器宽度 |
| | | ,arrow: 'hover' // 切换箭头默认显示状态,可选值为 hover(悬停显示) always(始终显示) none(始终不显示) |
| | | ,interval: '3000' // 自动切换的时间间隔,单位:ms(毫秒),不能低于800 |
| | | ,anim: 'fade' |
| | | }); |
| | | }); |
| | | |
| | | /***********************************************************************************/ |
| | | /************************************* 头部按钮 *************************************/ |
| | | /***********************************************************************************/ |
| | | // 左 |
| | | $('.button-left').click(function () { |
| | | exitFull(); |
| | | }); |
| | | // 右 |
| | | $('.button-right').click(function () { |
| | | full(); |
| | | }); |
| | | |
| | | |
| | | |
| | | /***********************************************************************************/ |
| | | /************************************ 堆垛机速度 *************************************/ |
| | |
| | | tooltip: { |
| | | formatter: '{a} <br/>{c} {b}' |
| | | }, |
| | | toolbox: { |
| | | show: true, |
| | | feature: { |
| | | mark: {show: true}, |
| | | restore: {show: true}, |
| | | saveAsImage: {show: true} |
| | | } |
| | | }, |
| | | // toolbox: { // 保存图片 |
| | | // show: true, |
| | | // feature: { |
| | | // mark: {show: true}, |
| | | // restore: {show: true}, |
| | | // saveAsImage: {show: true} |
| | | // } |
| | | // }, |
| | | series: [ |
| | | { |
| | | name: '走行速度', |
| | | type: 'gauge', |
| | | min: 0, |
| | | max: 110, |
| | | splitNumber: 11, |
| | | max: 160, |
| | | splitNumber: 16, |
| | | radius: '50%', |
| | | axisLine: { // 坐标轴线 |
| | | lineStyle: { // 属性lineStyle控制线条样式 |
| | |
| | | center: ['25%', '55%'], // 默认全局居中 |
| | | radius: '30%', |
| | | min: 0, |
| | | max: 30, |
| | | endAngle: 30, |
| | | splitNumber: 6, |
| | | max: 40, |
| | | endAngle: 40, |
| | | splitNumber: 5, |
| | | axisLine: { // 坐标轴线 |
| | | lineStyle: { // 属性lineStyle控制线条样式 |
| | | color: [[0.32, '#0fe507'], [0.86, '#1e90ff'], [1, '#ff4500']], |
| | |
| | | center: ['75%', '50%'], // 默认全局居中 |
| | | radius: '30%', |
| | | min: 0, |
| | | max: 4, |
| | | max: 50, |
| | | startAngle: 135, |
| | | endAngle: 45, |
| | | endAngle: 50, |
| | | splitNumber: 2, |
| | | axisLine: { // 坐标轴线 |
| | | lineStyle: { // 属性lineStyle控制线条样式 |
| | |
| | | // }, |
| | | itemStyle:{ |
| | | normal:{ |
| | | color:'#0cbad9', //折点颜色 |
| | | color:'#ef550e', //折点颜色 |
| | | lineStyle:{ |
| | | color:'#07a093' //折线颜色 |
| | | color:'#ec670f' //折线颜色 |
| | | } |
| | | } |
| | | } |
| | |
| | | }); |
| | | } |
| | | |
| | | // eCharts 跟随窗口改变 |
| | | window.onresize = function(){ |
| | | crnChart.resize(); |
| | | lineCharts.resize(); |
| | | pieCharts.resize(); |
| | | } |
| | | |
| | | |
| | | </script> |
| | | </html> |