| | |
| | | <meta charset="UTF-8"> |
| | | <title>ASRS监控</title> |
| | | <link href="css/monitor.css" rel="stylesheet"> |
| | | <!-- <link href="css/Pacifico.css" rel="stylesheet">--> |
| | | <link href="css/Pacifico.css" rel="stylesheet"> |
| | | <link href="../../static/layui/css/layui.css" rel="stylesheet"> |
| | | <link href="css/lunbo.css" rel="stylesheet"> |
| | | <script src="js/jquery-3.3.1.min.js"></script> |
| | | <script src="js/vincent.js"></script> |
| | | <script src="js/echarts/echarts.min.js"></script> |
| | | <script src="https://api.map.baidu.com/api?v=2.0&ak=pnkdgjAQGCS0nwjFnBjbprCtPrNNvDBe" type="text/javascript"></script> |
| | | <script src="js/echarts/bmap.min.js"></script> |
| | | <script src="js/jquery.countup.min.js"></script> |
| | | <script src="js/jquery.waypoints.min.js"></script> |
| | | <script src="../../static/layui/layui.js"></script> |
| | | <script src="../../static/js/common.js"></script> |
| | | <script src="js/monitor.js"></script> |
| | | <style> |
| | | span.counter { |
| | | display:block; |
| | | .crn-speed { |
| | | width: 100%; |
| | | height: 75%; |
| | | position: absolute; |
| | | text-align: center; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | top: -15%; |
| | | /*border-bottom: 1px solid rgba(0, 0, 0, 0.3);*/ |
| | | } |
| | | |
| | | .crn-speed span { |
| | | display:inline-block; |
| | | margin:20px auto; |
| | | font-size:56px; |
| | | font-family:'Pacifico',serif |
| | | } |
| | | .speed-content { |
| | | height: 100%; |
| | | } |
| | | .speed-chart { |
| | | float: left; |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | |
| | | .scroll-pane { |
| | | position: absolute; |
| | | top: 42%; |
| | | width: 100%; |
| | | height: 58%; |
| | | } |
| | | .scroll-bar { |
| | | float: left; |
| | | width: 50%; |
| | | height: 100%; |
| | | text-align: center; |
| | | } |
| | | |
| | | .scroll-header span { |
| | | font-size:64px; |
| | | font-family:'Pacifico',serif |
| | | } |
| | | |
| | | /*.div1 {*/ |
| | | /* width:200px;*/ |
| | | /* height:200px;*/ |
| | | /* overflow:hidden;*/ |
| | | /* margin:auto;*/ |
| | | /* position:relative;*/ |
| | | /* font-family:'Pacifico',serif*/ |
| | | /*}*/ |
| | | /*@keyframes anis {*/ |
| | | /* 100% {*/ |
| | | /* transform:translateY(-200px)*/ |
| | | /* }*/ |
| | | /*}img {*/ |
| | | /* position:absolute;*/ |
| | | /* }*/ |
| | | /*.div2 {*/ |
| | | /* animation:anis 10s linear infinite;*/ |
| | | /*}*/ |
| | | /*.div2:hover {*/ |
| | | /* animation-play-state:paused;*/ |
| | | /*}*/ |
| | | .scroll-content { |
| | | animation:anis 10s linear infinite; |
| | | padding: 200px 10px 20px 10px; |
| | | font-family:'Pacifico',serif; |
| | | overflow:hidden; |
| | | } |
| | | .scroll-content:last-child { |
| | | border-left: 1px solid rgba(0, 0, 0, 0.3); |
| | | } |
| | | .scroll-content:hover { |
| | | animation-play-state:paused; |
| | | } |
| | | @keyframes anis { |
| | | 100% { |
| | | transform:translateY(-200px) |
| | | } |
| | | } |
| | | |
| | | #led-content { |
| | | display: none; |
| | | } |
| | | #led-p-content { |
| | | text-align: center; |
| | | padding: 20px 40px; |
| | | font-size: 35px; |
| | | font-weight: bold; |
| | | /*color: #FF5722;*/ |
| | | } |
| | | |
| | | </style> |
| | | </head> |
| | |
| | | <div class="button-left"></div> |
| | | <div class="button-right"></div> |
| | | <div class="time-tools"> |
| | | 2019-04-27 10:30:01 星期一 |
| | | <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> |
| | | </div> |
| | | <div class="title"> |
| | | 自动仓库WCS监控平台 |
| | |
| | | <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">7777</i> |
| | | <span class="unit">个</span> |
| | | <i class="count" id="xDistance">0</i> |
| | | <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">777</i> |
| | | <span class="unit">个</span> |
| | | <i class="count" id="yDistance">0</i> |
| | | <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">33</i> |
| | | <span class="unit">托</span> |
| | | <i class="count" id="xDuration">0</i> |
| | | <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">14296</i> |
| | | <span class="unit">千瓦时</span> |
| | | <i class="count" id="yDuration">0</i> |
| | | <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="container-element-middle"> |
| | | <div class="map-board"> |
| | | <div class="inside"> |
| | | <div class="image-border image-border1"></div> |
| | | <div class="image-border image-border2"></div> |
| | | <div class="image-border image-border3"></div> |
| | | <div class="image-border image-border4"></div> |
| | | |
| | | |
| | | <!-- 中上 --> |
| | | <div class="demo"> |
| | | <span class="counter">5.00</span> |
| | | </div> |
| | | |
| | | <!-- 中左 --> |
| | | <div class="div1"> |
| | | <div class="div2"> |
| | | <p>111111111111111111111</p> |
| | | <p>211111111111111111111</p> |
| | | <p>311111111111111111111</p> |
| | | <p>411111111111111111111</p> |
| | | <p>511111111111111111111</p> |
| | | <p>611111111111111111111</p> |
| | | <p>711111111111111111111</p> |
| | | <p>2211111111111111111111</p> |
| | | <p>331111111111111111111</p> |
| | | <p>441111111111111111111</p> |
| | | <p>551111111111111111111</p> |
| | | <p>661111111111111111111</p> |
| | | <p>771111111111111111111</p> |
| | | <p>881111111111111111111</p> |
| | | <p>991111111111111111111</p> |
| | | <p>001111111111111111111</p> |
| | | <div class="crn-speed"> |
| | | <div class="speed-content"> |
| | | <div id="crn-chart" class="speed-chart"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- 中右 --> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 中下 --> |
| | | <div class="scroll-pane"> |
| | | <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-3" style="background-color: green"></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> |
| | | |
| | | <!-- <!– 中左 –>--> |
| | | <!-- <div class="scroll-bar left-bar">--> |
| | | <!-- <div class="scroll-header">--> |
| | | <!-- <span>入库</span>--> |
| | | <!-- <p class="english">Entering Warehouse</p>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="scroll-content">--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | |
| | | <!-- <!– 中右 –>--> |
| | | <!-- <div class="scroll-bar right-bar">--> |
| | | <!-- <div class="scroll-header">--> |
| | | <!-- <span>出库</span>--> |
| | | <!-- <p class="english">Delivery Of Cargo From Storage</p>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="scroll-content">--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- <p>111111111111111111111</p>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | | <!--右--> |
| | |
| | | <div class="image-border image-border4"></div> |
| | | <div class="line-chart-title"> |
| | | <div class="order-report"> |
| | | <span class="order-report-left" >入库单统计</span> |
| | | <span class="order-report-left" >入出库统计</span> |
| | | <span class="order-report-right">31</span> |
| | | </div> |
| | | <div class="order-report-english english"> |
| | |
| | | 在库 |
| | | </div> |
| | | <div class="elem-footer"> |
| | | 3,300 |
| | | <span id="stock-count">0</span> |
| | | </div> |
| | | </div> |
| | | <div class="top-footer-elem"> |
| | |
| | | 空库 |
| | | </div> |
| | | <div class="elem-footer"> |
| | | 161 |
| | | <span id="empty-count">0</span> |
| | | </div> |
| | | </div> |
| | | <div class="top-footer-elem"> |
| | | <div class="elem-header" id="elem-header-third"> |
| | | </div> |
| | | <div class="elem-main"> |
| | | 使用中 |
| | | 禁用 |
| | | </div> |
| | | <div class="elem-footer"> |
| | | 666 |
| | | <span id="none-count">0</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="progress-bar"> |
| | | <div class="usage-rate"> |
| | | <span class="usage-rate-left" >库位使用率</span> |
| | | <span class="usage-rate-right">60%</span> |
| | | <span class="usage-rate-right"><span id="usedPr">0</span>%</span> |
| | | </div> |
| | | <div class="usage-rate-english english"> |
| | | <span class="usage-rate-left">EQUIPMENT USAGE THIS MONTH</span> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="progress-bar-modal"> |
| | | <div class="bar-container"> |
| | | <div class="bar-proportion"><span>实际使用</span></div> |
| | | <div class="layui-progress layui-progress-big" lay-filter="used-progress" style="background-color: #233751;width: 80%;display: inline-block"> |
| | | <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div> |
| | | </div> |
| | | <i class="bar-container-count">7777<span>个</span></i> |
| | | <!-- <div class="bar-container">--> |
| | | <!-- <div class="bar-proportion"><span>实际使用</span></div>--> |
| | | <!-- </div>--> |
| | | <i class="bar-container-count"><span id="used">0</span></i> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </body> |
| | | <script> |
| | | $('.counter').countUp(); |
| | | // 遮罩 |
| | | let closeBtn = document.getElementById('closeBtn'); |
| | | let detailModal = document.getElementById('detail-modal'); |
| | | closeBtn.onclick = function () { |
| | | detailModal.style.display = 'none'; |
| | | }; |
| | | var data = []; |
| | | layui.use(['element', 'carousel'], function(){ |
| | | var carousel = layui.carousel; |
| | | var element = layui.element; |
| | | // 轮播图 |
| | | carousel.render({ |
| | | elem: '#banner' |
| | | ,width: '100%' //设置容器宽度 |
| | | ,arrow: 'hover' // 切换箭头默认显示状态,可选值为 hover(悬停显示) always(始终显示) none(始终不显示) |
| | | ,interval: '3000' // 自动切换的时间间隔,单位:ms(毫秒),不能低于800 |
| | | ,anim: 'fade' |
| | | }); |
| | | }); |
| | | |
| | | // 折线图 |
| | | let lineCharts = echarts.init(document.getElementById('line-charts')); |
| | | lineChartOption = { |
| | | /***********************************************************************************/ |
| | | /************************************* 头部按钮 *************************************/ |
| | | /***********************************************************************************/ |
| | | // 左 |
| | | $('.button-left').click(function () { |
| | | exitFull(); |
| | | }); |
| | | // 右 |
| | | $('.button-right').click(function () { |
| | | full(); |
| | | }); |
| | | |
| | | |
| | | |
| | | /***********************************************************************************/ |
| | | /************************************ 堆垛机速度 *************************************/ |
| | | /***********************************************************************************/ |
| | | |
| | | var crnChart = echarts.init(document.getElementById('crn-chart')); |
| | | crnChartOption = { |
| | | // backgroundColor: '#1b1b1b', |
| | | tooltip: { |
| | | formatter: '{a} <br/>{c} {b}' |
| | | }, |
| | | // toolbox: { // 保存图片 |
| | | // show: true, |
| | | // feature: { |
| | | // mark: {show: true}, |
| | | // restore: {show: true}, |
| | | // saveAsImage: {show: true} |
| | | // } |
| | | // }, |
| | | series: [ |
| | | { |
| | | name: '走行速度', |
| | | type: 'gauge', |
| | | min: 0, |
| | | max: 160, |
| | | splitNumber: 16, |
| | | radius: '50%', |
| | | axisLine: { // 坐标轴线 |
| | | lineStyle: { // 属性lineStyle控制线条样式 |
| | | color: [[0.09, '#0fe507'], [0.82, '#1e90ff'], [1, '#ff4500']], |
| | | width: 3, |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | } |
| | | }, |
| | | axisLabel: { // 坐标轴数字 |
| | | fontWeight: 'bolder', |
| | | color: '#fff', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | }, |
| | | axisTick: { // 坐标轴小标记 |
| | | length: 15, // 属性length控制线长 |
| | | lineStyle: { // 属性lineStyle控制线条样式 |
| | | color: 'auto', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | } |
| | | }, |
| | | splitLine: { // 分隔线 |
| | | length: 25, // 属性length控制线长 |
| | | lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 |
| | | width: 3, |
| | | color: '#fff', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | } |
| | | }, |
| | | pointer: { // 分隔线 |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 5 |
| | | }, |
| | | title: { // 速度单位 |
| | | textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE |
| | | fontWeight: 'bolder', |
| | | fontSize: 20, |
| | | fontStyle: 'italic', |
| | | color: '#fff', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | } |
| | | }, |
| | | detail: { // 速度值 |
| | | backgroundColor: 'rgba(30,144,255,0.8)', |
| | | borderWidth: 1, |
| | | borderColor: '#fff', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 5, |
| | | offsetCenter: [0, '50%'], // x, y,单位px |
| | | textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE |
| | | fontWeight: 'bolder', |
| | | color: '#fff' |
| | | } |
| | | }, |
| | | data: [{value: 40, name: 'x\nm/min'}] |
| | | }, |
| | | { |
| | | name: '升降速度', |
| | | type: 'gauge', |
| | | center: ['25%', '55%'], // 默认全局居中 |
| | | radius: '30%', |
| | | min: 0, |
| | | max: 40, |
| | | endAngle: 40, |
| | | splitNumber: 5, |
| | | axisLine: { // 坐标轴线 |
| | | lineStyle: { // 属性lineStyle控制线条样式 |
| | | color: [[0.32, '#0fe507'], [0.86, '#1e90ff'], [1, '#ff4500']], |
| | | width: 2, |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | } |
| | | }, |
| | | axisLabel: { // 坐标轴小标记 |
| | | fontWeight: 'bolder', |
| | | color: '#fff', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | }, |
| | | axisTick: { // 坐标轴小标记 |
| | | length: 12, // 属性length控制线长 |
| | | lineStyle: { // 属性lineStyle控制线条样式 |
| | | color: 'auto', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | } |
| | | }, |
| | | splitLine: { // 分隔线 |
| | | length: 20, // 属性length控制线长 |
| | | lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 |
| | | width: 3, |
| | | color: '#fff', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | } |
| | | }, |
| | | pointer: { |
| | | width: 5, |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 5 |
| | | }, |
| | | title: { |
| | | offsetCenter: [0, '-30%'], // x, y,单位px |
| | | textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE |
| | | fontWeight: 'bolder', |
| | | fontStyle: 'italic', |
| | | color: '#fff', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | } |
| | | }, |
| | | detail: { |
| | | //backgroundColor: 'rgba(30,144,255,0.8)', |
| | | // borderWidth: 1, |
| | | borderColor: '#fff', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 5, |
| | | width: 80, |
| | | height: 30, |
| | | offsetCenter: [35, '20%'], // x, y,单位px |
| | | textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE |
| | | fontWeight: 'bolder', |
| | | color: '#fff' |
| | | } |
| | | }, |
| | | data: [{value: 1.5, name: 'y'}] |
| | | }, |
| | | { |
| | | name: '货叉速度', |
| | | type: 'gauge', |
| | | center: ['75%', '50%'], // 默认全局居中 |
| | | radius: '30%', |
| | | min: 0, |
| | | max: 50, |
| | | startAngle: 135, |
| | | endAngle: 50, |
| | | splitNumber: 2, |
| | | axisLine: { // 坐标轴线 |
| | | lineStyle: { // 属性lineStyle控制线条样式 |
| | | color: [[0.2, '#0fe507'], [0.8, '#1e90ff'], [1, '#ff4500']], |
| | | width: 2, |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | } |
| | | }, |
| | | axisLabel: { // 坐标轴小标记 |
| | | fontWeight: 'bolder', |
| | | color: '#fff', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | }, |
| | | axisTick: { // 坐标轴小标记 |
| | | length: 12, // 属性length控制线长 |
| | | lineStyle: { // 属性lineStyle控制线条样式 |
| | | color: 'auto', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | } |
| | | }, |
| | | // axisLabel: { |
| | | // fontWeight: 'bolder', |
| | | // color: '#fff', |
| | | // shadowColor: '#fff', //默认透明 |
| | | // shadowBlur: 10, |
| | | // formatter: function (v){ |
| | | // switch (v + '') { |
| | | // case '0': return 'E'; |
| | | // case '1': return 'Gas'; |
| | | // case '2': return 'F'; |
| | | // } |
| | | // } |
| | | // }, |
| | | splitLine: { // 分隔线 |
| | | length:15, // 属性length控制线长 |
| | | lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 |
| | | width:3, |
| | | color: '#fff', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | } |
| | | }, |
| | | pointer: { |
| | | width:2, |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 5 |
| | | }, |
| | | title: { |
| | | offsetCenter: [0, '-30%'], // x, y,单位px |
| | | textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE |
| | | fontWeight: 'bolder', |
| | | fontStyle: 'italic', |
| | | color: '#fff', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | } |
| | | }, |
| | | detail: { |
| | | //backgroundColor: 'rgba(30,144,255,0.8)', |
| | | // borderWidth: 1, |
| | | borderColor: '#fff', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 5, |
| | | width: 80, |
| | | height: 30, |
| | | offsetCenter: [40, '5%'], // x, y,单位px |
| | | textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE |
| | | fontWeight: 'bolder', |
| | | color: '#fff' |
| | | } |
| | | }, |
| | | data: [{value: 0.5, name: 'z'}] |
| | | }, |
| | | { |
| | | name: '货叉位置', |
| | | type: 'gauge', |
| | | center: ['75%', '50%'], // 默认全局居中 |
| | | radius: '30%', |
| | | min: 0, |
| | | max: 2, |
| | | startAngle: 315, |
| | | endAngle: 225, |
| | | splitNumber: 2, |
| | | axisLine: { // 坐标轴线 |
| | | lineStyle: { // 属性lineStyle控制线条样式 |
| | | color: [[0.2, '#0fe507'], [0.8, '#1e90ff'], [1, '#ff4500']], |
| | | width: 2, |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | } |
| | | }, |
| | | axisTick: { // 坐标轴小标记 |
| | | show: false |
| | | }, |
| | | axisLabel: { |
| | | fontWeight: 'bolder', |
| | | color: '#fff', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10, |
| | | formatter: function(v){ |
| | | switch (v + '') { |
| | | case '0': return '右'; |
| | | case '1': return '中'; |
| | | case '2': return '左'; |
| | | } |
| | | } |
| | | }, |
| | | splitLine: { // 分隔线 |
| | | length: 15, // 属性length控制线长 |
| | | lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式 |
| | | width: 3, |
| | | color: '#fff', |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 10 |
| | | } |
| | | }, |
| | | pointer: { |
| | | width: 2, |
| | | shadowColor: '#fff', //默认透明 |
| | | shadowBlur: 5 |
| | | }, |
| | | title: { |
| | | show: false |
| | | }, |
| | | detail: { |
| | | show: false |
| | | }, |
| | | data:[{value: 0.5, name: 'gas'}] |
| | | } |
| | | ] |
| | | }; |
| | | |
| | | |
| | | /***********************************************************************************/ |
| | | /************************************* 折线图 ***************************************/ |
| | | /***********************************************************************************/ |
| | | |
| | | var lineCharts = echarts.init(document.getElementById('line-charts')); |
| | | var lineChartOption = { |
| | | // animation: false, |
| | | grid: { |
| | | top: '0%', |
| | |
| | | xAxis: { |
| | | type: 'category', |
| | | boundaryGap: false, |
| | | data: ['1', '2', '3', '4', '5', '6', '7'], |
| | | data: ['1', '2', '3', '4', '5', '6', '7'], |
| | | axisLabel: { |
| | | textStyle:{ |
| | | color:'#aaa', //坐标的字体颜色 |
| | |
| | | } |
| | | |
| | | }, |
| | | series: [{ |
| | | data: [820, 932, 901, 934, 1290, 1330, 1320], |
| | | type: 'line', |
| | | areaStyle: { |
| | | color: '#7494ae' // 折线区域颜色 |
| | | series: [ |
| | | { |
| | | data: [820, 932, 901, 934, 1290, 1330, 1320], |
| | | type: 'line', |
| | | // areaStyle: { |
| | | // color: '#7494ae' // 折线区域颜色 |
| | | // }, |
| | | itemStyle:{ |
| | | normal:{ |
| | | color:'#3590ac', //折点颜色 |
| | | lineStyle:{ |
| | | color:'#3590ac' //折线颜色 |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | itemStyle:{ |
| | | normal:{ |
| | | color:'#3590ac', //折点颜色 |
| | | lineStyle:{ |
| | | color:'#3590ac' //折线颜色 |
| | | { |
| | | data: [820, 932, 901, 934, 1290, 1330, 1320], |
| | | type: 'line', |
| | | // areaStyle: { |
| | | // color: '#d55b35' // 折线区域颜色 |
| | | // }, |
| | | itemStyle:{ |
| | | normal:{ |
| | | color:'#ef550e', //折点颜色 |
| | | lineStyle:{ |
| | | color:'#ec670f' //折线颜色 |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }] |
| | | ] |
| | | }; |
| | | |
| | | lineCharts.setOption(lineChartOption); |
| | | function initlineChart() { |
| | | var reportView = lineChartOption; |
| | | $.ajax({ |
| | | url: baseUrl+"/monitor/line/charts", |
| | | method: 'GET', |
| | | success: function (res) { |
| | | if (res.code === 200){ |
| | | var json = res.data.rows; |
| | | reportView.xAxis.data=[getDateFormat(-11), getDateFormat(-10), getDateFormat(-9), getDateFormat(-8), getDateFormat(-7), getDateFormat(-6), |
| | | getDateFormat(-5), getDateFormat(-4), getDateFormat(-3), getDateFormat(-2), getDateFormat(-1), getDateFormat(-0)]; |
| | | reportView.series[0].data=res.data.rows[0].data; |
| | | reportView.series[1].data=res.data.rows[1].data; |
| | | lineCharts.setOption(reportView) |
| | | } else if (res.code === 403){ |
| | | top.location.href = "/"; |
| | | } else { |
| | | console.log(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // 饼图 |
| | | let pieCharts = echarts.init(document.getElementById('pie-charts')); |
| | | pieChartOption = { |
| | | /***********************************************************************************/ |
| | | /************************************* 饼图 *****************************************/ |
| | | /***********************************************************************************/ |
| | | |
| | | var pieCharts = echarts.init(document.getElementById('pie-charts')); |
| | | var pieChartOption = { |
| | | // animation: false, |
| | | grid: { |
| | | top: '0%', |
| | |
| | | legend: { |
| | | orient: 'vertical', |
| | | left: 10, |
| | | data: ['1', '2', '3'] |
| | | data: ['在库', '空'] |
| | | }, |
| | | series: [ |
| | | { |
| | |
| | | show: false |
| | | }, |
| | | data: [ |
| | | {value: 335, name: '1'}, |
| | | {value: 310, name: '2'}, |
| | | {value: 234, name: '3'}, |
| | | {value: 1, name: '在库'}, |
| | | {value: 1, name: '空'}, |
| | | {value: 1, name: '使用'}, |
| | | {value: 1, name: '禁用'}, |
| | | ], |
| | | itemStyle: { |
| | | emphasis: { |
| | |
| | | } |
| | | ] |
| | | }; |
| | | pieCharts.setOption(pieChartOption); |
| | | // 饼图加载 |
| | | function initPieChart() { |
| | | $.ajax({ |
| | | url: baseUrl+"/monitor/loc/rep", |
| | | method: 'GET', |
| | | success: function (res) { |
| | | if (res.code === 200){ |
| | | pieChartOption.series[0].data = res.data.pie; |
| | | pieCharts.setOption(pieChartOption); |
| | | |
| | | $('#stock-count').text(res.data.stockCunt); |
| | | $('#empty-count').text(res.data.emptyCount); |
| | | $('#none-count').text(res.data.noneCount); |
| | | |
| | | $('#usedPr').text(res.data.usedPr); |
| | | $('#used').text(res.data.used); |
| | | |
| | | layui.element.progress('used-progress', res.data.usedPr + '%'); |
| | | } else if (res.code === 403){ |
| | | top.location.href = "/"; |
| | | } else { |
| | | layer.msg(res.msg); |
| | | } |
| | | } |
| | | }); |
| | | } |
| | | |
| | | // eCharts 跟随窗口改变 |
| | | window.onresize = function(){ |
| | | crnChart.resize(); |
| | | lineCharts.resize(); |
| | | pieCharts.resize(); |
| | | } |
| | | |
| | | |
| | | </script> |
| | | </html> |