zy-wcs.git - Gitblit

			@@ -5,37 +5,51 @@
			<title>ASRS监控</title>
			<link href="css/monitor.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="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>
			.crn-speed {
			width: 100%;
			height: 20%;
			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:64px;
			font-size:56px;
			font-family:'Pacifico',serif
			}
			.speed-content {
			display: inline-block;
			height: 100%;
			}
			.speed-chart {
			float: left;
			width: 100%;
			height: 100%;
			}


			.scroll-pane {
			position: absolute;
			top: 42%;
			width: 100%;
			height: 80%;
			height: 58%;
			}

			.scroll-bar {
			float: left;
			width: 50%;
			@@ -66,6 +80,16 @@
			}
			}

			#led-content {
			display: none;
			}
			#led-p-content {
			text-align: center;
			padding: 20px 40px;
			font-size: 35px;
			font-weight: bold
			}

			</style>
			</head>
			<body class="monitor-bg">
			@@ -88,7 +112,7 @@
			<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监控平台
			@@ -119,40 +143,40 @@
			<img src="img/a.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">km</span>
			</div>
			<div class="content">库位总数(个)</div>
			<div class="content">累计走行距离(千米)</div>
			</div>
			</div>
			<div class="charge-info-elem">
			<img src="img/b.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">km</span>
			</div>
			<div class="content">使用中库位(个)</div>
			<div class="content">累计升降距离(千米)</div>
			</div>
			</div>
			<div class="charge-info-elem">
			<img src="img/c.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">h</span>
			</div>
			<div class="content">今日入库(托)</div>
			<div class="content">累计走行时长(小时)</div>
			</div>
			</div>
			<div class="charge-info-elem">
			<img src="img/d.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">h</span>
			</div>
			<div class="content">今日电总量(千瓦时)</div>
			<div class="content">累计升降时长(小时)</div>
			</div>
			</div>
			</div>
			@@ -161,7 +185,7 @@
			<div class="image-border image-border2"></div>
			<div class="image-border image-border3"></div>
			<div class="image-border image-border4"></div>
			<span>中扬物流客户服务中心</span>
			<span>浙江中扬物流装备有限公司</span>
			<img src="img/wxCode.jpg">
			</div>
			</div>
			@@ -178,55 +202,71 @@
			<!-- 中上 -->
			<div class="crn-speed">
			<div class="speed-content">
			<span>堆垛机速度：</span><span class="counter">5.00</span><span>米/秒</span>
			<div id="crn-chart" class="speed-chart">
			</div>
			</div>
			</div>

			<!-- 中下 -->
			<div class="scroll-pane">
			<!-- 中左 -->
			<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 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 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 id="led-content">
			<pre id="led-p-content"></pre>
			</div>
			</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>

			<!--右-->
			@@ -238,7 +278,7 @@
			<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">
			@@ -275,7 +315,7 @@
			在库
			</div>
			<div class="elem-footer">
			3,300
			<span id="stock-count">0</span>
			</div>
			</div>
			<div class="top-footer-elem">
			@@ -285,17 +325,17 @@
			空库
			</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>
			@@ -308,7 +348,7 @@
			<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>
			@@ -316,10 +356,13 @@
			</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>
			@@ -327,18 +370,325 @@
			</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
			});
			});

			// 折线图
			let lineCharts = echarts.init(document.getElementById('line-charts'));
			lineChartOption = {
			/***********************************************************************************/
			/********************************** 堆垛机速度 ***********************************/
			/***********************************************************************************/

			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: 130,
			splitNumber: 13,
			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: 30,
			endAngle: 30,
			splitNumber: 6,
			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: 25,
			startAngle: 135,
			endAngle: 45,
			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%',
			@@ -352,7 +702,7 @@
			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', //坐标的字体颜色
			@@ -386,28 +736,68 @@
			}

			},
			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%',
			@@ -423,7 +813,7 @@
			legend: {
			orient: 'vertical',
			left: 10,
			data: ['1', '2', '3']
			data: ['在库', '空']
			},
			series: [
			{
			@@ -446,9 +836,10 @@
			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: {
			@@ -469,7 +860,40 @@
			}
			]
			};
			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>