zy-wcs.git - Gitblit

			@@ -8,26 +8,30 @@
			<script src="js/jquery-3.3.1.min.js"></script>
			<script src="js/swiper-bundle.min.js"></script>
			<script src="js/echarts/echarts.min.js"></script>
			<script src="../../static/js/common.js"></script>
			</head>
			<body>
			<div class="container" id="app">
			<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>
			</div>
			</div>
			<div class="body">
			<div class="area">
			<div class="box">
			<div class="box-title">图标1</div>
			<div class="box-title">测试状态</div>
			<div class="box-body">
			<div style="display: flex"><div style="flex: 1">库位号</div><div style="flex: 1">库位状态</div><div style="flex: 1">测试状态</div></div>
			<div class="swiper">
			<div class="swiper-wrapper">
			<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="swiper" style="height: 85%">
			<div class="swiper-wrapper table-item">
			</div>
			</div>
			</div>
			</div>
			<div class="box">
			<div class="box-title">早8晚8</div>
			<div class="box-title">12小时入出库统计</div>
			<div class="box-body" id="smoothedLineChart"></div>
			</div>
			</div>
			@@ -39,11 +43,11 @@
			<div class="box">
			<div class="box-title">合格率</div>
			<div style="display: flex;"class="box-body">
			<div class="box-body2" id="barLabelRotation"></div>
			<div class="box-body3" >
			<div class="percentage">60%</div>
			<div class="percentage">40%</div>
			</div>
			<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>
			</div>
			@@ -52,55 +56,145 @@
			</body>
			</html>
			<script>
			var item = [
			{
			locNo:'0100101',
			loc_sts: 'F',
			packStatus$: '未完成'
			},
			{
			locNo:'0100102',
			loc_sts: 'F',
			packStatus$: '未完成'
			},
			{
			locNo:'0100103',
			loc_sts: 'F',
			packStatus$: '未完成'
			},]
			var el
			var box = ''
			for (var i = 0; i < item.length; i++) {
			el = "<div class='swiper-slide' style='display: flex'><div style='flex: 1'>"
			+ item[i].locNo + "</div><div style='flex: 1'>"
			+ item[i].loc_sts + "</div><div style='flex: 1'>"
			+ item[i].packStatus$
			+ "</div></div>"
			box = box + el
			// 左
			$('.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();
			}
			}
			$('.swiper-wrapper').append(box)
			var mySwiper = new Swiper ('.swiper', {
			direction: 'vertical', // 垂直切换选项
			loop: true, // 循环模式选项
			autoplay:true,
			slidesPerView: 3,
			// 如果需要分页器
			pagination: {
			el: '.swiper-pagination',
			},
			})

			//退出全屏
			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://192.168.4.188:8085/fnwms'
			var item = [{locNo: '1',locSts: '1',mk: '1',packStatus$: '1'}]
			var year = '2020';
			var month = '05';
			var day = '01';
			var hour = '08';
			var minute = '00';
			var second = '00';
			var week = '星期一';
			initBasicInformation();
			setTimeout(()=>{
			initTest();
			},500)
			setInterval(()=>{
			initUsageRate();
			initQualified();
			initEvening();
			getDate();
			setDate();
			},1000)
			setInterval(()=>{
			//location.reload()
			},10000)
			function initTest() {
			var box = ''
			var el
			var len = item.length
			var autoplay = true
			var css = 'table-td'
			if (len == 0) {
			box = "<div class='swiper-none'>暂无测试数据</div>"
			} else if (len < 5) {
			var itemInfo = {locNo: '',locSts: '',mk: '',packStatus$: ''}
			for (var j = 0; j < 5-len;j++) {
			css = 'table-td2'
			autoplay = false
			item.push(itemInfo)
			}
			}
			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].mk + "</div><div style='flex: 1'>"
			+ item[i].packStatus$
			+ "</div></div>"
			box = box + el
			}
			$('.swiper-wrapper').append(box)
			var mySwiper = new Swiper ('.swiper', {
			direction: 'vertical', // 垂直切换选项
			loop: true, // 循环模式选项
			autoplay:autoplay,
			slidesPerView: 5,
			})
			}
			function setDate() {
			getDate();
			$('#bar-year').text(year);
			$('#bar-month').text(month);
			$('#bar-day').text(day);
			$('#bar-hour').text(hour);
			$('#bar-minute').text(minute);
			$('#bar-second').text(second);
			$('#bar-week').text(week);
			}
			/**
			* 获取时间
			*/
			function getDate() {
			http.get("http://localhost:9090/fnwcs/monitor/date", null, function (res) {
			if (res.code === 200){
			year = res.data.year;
			month = res.data.month;
			day = res.data.day;
			hour = res.data.hour;
			minute = res.data.minute;
			second = res.data.second;
			week = res.data.week;
			} else if (res.code === 403){
			parent.location.href = baseUrl+"/login";
			} else {
			layer.msg("连接服务器失败", {icon: 2});
			}
			})

			}
			/**
			* 堆叠柱状图 -- 使用率
			* */
			// 基于准备好的dom，初始化echarts实例
			var stackedColumnChart = echarts.init(document.getElementById('stackedColumnChart'));
			// 指定图表的配置项和数据
			var option = {
			var stackedColumnChartOption = {
			// 全局调色盘。
			color: [
			'#2f89cf',
			'#27d08a',
			],
			color: ['#00d887', '#0184d5',],
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			@@ -124,7 +218,7 @@
			color: '#FFF'
			}
			},
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
			data: ['其他', '测试库位', '静置库位', '测试前暂存库为', '测试失败库位']
			}
			],
			yAxis: [
			@@ -139,44 +233,53 @@
			],
			series: [
			{
			name: 'Email',
			name: '已使用库位',
			type: 'bar',
			stack: 'Ad',
			emphasis: {
			focus: 'series'
			},
			z:99,
			label: {
			show: true
			show: true,
			fontSize: 16,
			fontWeight: 'bold',
			position: 'top',
			color: '#FFF',
			offset: [15,5],
			},
			barWidth:'50%',
			data: [50, 132, 101, 134, 90]
			data: [],
			},
			{
			name: 'Union Ads',
			name: '空闲库位',
			type: 'bar',
			stack: 'Ad',
			emphasis: {
			focus: 'series'
			},
			label: {
			show: true
			show: true,
			fontSize: 16,fontWeight: 'bold',
			position: 'top',offset: [-15,5],
			},
			data: [300, 182, 191, 234, 290]
			data: []
			},
			]
			};

			// 使用刚指定的配置项和数据显示图表。
			stackedColumnChart.setOption(option);
			stackedColumnChart.setOption(stackedColumnChartOption);

			/**
			* 柱状图标签旋转 -- 合格率
			* */
			var chartDom = document.getElementById('barLabelRotation');
			var barLabelRotation = echarts.init(chartDom);
			var option;
			var barLabelRotationOption;

			option = {
			barLabelRotationOption = {
			color: ['#80FFA5', '#FFBF00','#00DDFF', '#37A2FF', '#FF0087', ],
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			@@ -193,60 +296,189 @@
			containLabel: true
			},
			xAxis: {
			type: 'category',
			axisLine: {
			lineStyle: {
			color: '#FFF'
			}
			},
			data: ['未知', '测试库位', '静置库位', '测试前暂存库为', '测试失败库位']
			},
			yAxis: {
			type: 'value',
			axisLine: {
			lineStyle: {
			color: '#FFF'
			}
			},
			boundaryGap: [0, 0.01]
			},
			yAxis: {
			type: 'category',
			axisLine: {
			lineStyle: {
			color: '#FFF'
			}
			},
			data: ['合格', '不合格']
			},
			series: [
			{
			name: '本周',
			name: '合格',
			type: 'bar',
			stack: 'Ad',
			label: {
			show: true,
			fontSize: 16,
			fontWeight: 'bold',
			position: 'top',
			color: '#FFF',
			offset: [15,5],
			},
			z:99,
			barWidth:'50%',
			data: [10, 1]
			},
			{
			name: '上周',
			name: '不合格',
			type: 'bar',
			stack: 'Ad',
			label: {
			show: true,
			fontSize: 16,fontWeight: 'bold',
			position: 'top',offset: [-15,5],
			},
			data: [9, 3]
			}
			]
			};

			option && barLabelRotation.setOption(option);
			barLabelRotationOption && barLabelRotation.setOption(barLabelRotationOption);


			var smoothedLineChart = echarts.init(document.getElementById('smoothedLineChart'));
			var option;
			var smoothedLineChartOption;

			option = {
			smoothedLineChartOption = {
			color: ['rgb(225,5,85)', 'rgb(255,72,31)', 'rgb(0,146,252)', 'rgb(13,46,207)', '#FFBF00'],
			legend: {
			icon: 'roundRect',
			data: ['出库', '入库'],
			textStyle:{color:'#FFF'},
			},
			grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
			top: '20%',
			left: '3%',
			right: '5%',
			bottom: '5%',
			containLabel: true
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			axisLine: {
			lineStyle: {
			color: '#FFF'
			}
			},
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
			type: 'value'
			type: 'value',
			axisLine: {
			lineStyle: {
			color: '#FFF'
			}
			},
			},
			series: [
			{
			data: [820, 932, 901, 934, 1290, 1330, 1320],
			name: '出库',
			type: 'line',
			smooth: true
			}
			lineStyle: {
			normal: {
			width: 4
			}
			},
			smooth: true,
			data: [8, 7, 10, 6, 10, 10, 10]
			},
			{
			name: '入库',
			type: 'line',
			lineStyle: {
			normal: {
			width: 4
			}
			},
			smooth: true,
			data: [9, 9, 10, 5, 10, 10, 10]
			},
			]
			};

			option && smoothedLineChart.setOption(option);
			smoothedLineChartOption && smoothedLineChart.setOption(smoothedLineChartOption);


			function initUsageRate() {
			$.ajax({
			url: url+"/mobile/pack/usage/rate",
			method: 'POST',
			success: function (res) {
			if (res.code === 200) {
			for (var i = 0; i < res.data.length; i++) {
			stackedColumnChartOption.series[0].data[i] = res.data[i].currentQuantity
			stackedColumnChartOption.series[1].data[i] = (res.data[i].total - res.data[i].currentQuantity)
			}
			stackedColumnChart.setOption(stackedColumnChartOption);
			}
			}
			});
			}
			function initQualified() {
			$.ajax({
			url: url+"/mobile/pack/qualified",
			method: 'POST',
			success: function (res) {
			var qualifieds = []
			if (res.code === 200) {
			res.data.reverse()
			for (var i = 0; i < res.data.length; i++) {
			barLabelRotationOption.xAxis.data[i] = res.data[i].week
			barLabelRotationOption.series[0].data[i] = res.data[i].qualified
			barLabelRotationOption.series[1].data[i] = res.data[i].unqualified
			var qualified = res.data[i].qualified / res.data[i].total
			var percent = (Math.round(qualified*10000))/100+'%';
			qualifieds.push(percent)
			}
			$('#lastWeek').text(qualifieds[0])
			$('#thisWeek').text(qualifieds[1])
			barLabelRotation.setOption(barLabelRotationOption);
			}
			}
			});
			}
			function initEvening() {
			$.ajax({
			url: url+"/mobile/pack/evening",
			method: 'POST',
			success: function (res) {
			res.data.reverse()
			if (res.code === 200) {
			for (var i = 0; i < res.data.length;i++) {
			smoothedLineChartOption.xAxis.data[i] = res.data[i].week
			smoothedLineChartOption.series[0].data[i]=res.data[i].unqualified
			smoothedLineChartOption.series[1].data[i]=res.data[i].qualified
			}
			smoothedLineChart.setOption(smoothedLineChartOption)
			}
			}
			});
			}
			function initBasicInformation() {
			$.ajax({
			url: url+"/mobile/pack/basic/information",
			method: 'POST',
			success: function (res) {
			var array = []
			if (res.code === 200) {
			for (var i = 0; i < res.data.length; i++) {
			array.push(res.data[i])
			}
			item = array
			}
			}
			});
			}

			</script>