zy-wcs.git - Gitblit

			@@ -8,20 +8,24 @@
			<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>
			<div class="swiper" style="height: 85%">
			<div class="swiper-wrapper table-item">
			</div>
			</div>
			</div>
			@@ -41,8 +45,8 @@
			<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 class="percentage" id="thisWeek">60%</div>
			<div class="percentage" id="lastWeek">40%</div>
			</div>
			</div>
			</div>
			@@ -52,55 +56,90 @@
			</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
			let url = 'http://127.0.0.1:8080/fnwms'
			var item = []
			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();
			initMorning();
			initEvening();
			getDate();
			setDate();
			},1000)
			setInterval(()=>{
			//location.reload()
			},10000)
			function initTest() {
			console.log(item)
			var box = ''
			var el
			for (var i = 0; i < item.length; i++) {
			el = "<div class='swiper-slide table-td'><div style='flex: 1'>"
			+ item[i].locNo + "</div><div style='flex: 1'>"
			+ item[i].locSts + "</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:true,
			slidesPerView: 5,
			})
			}
			$('.swiper-wrapper').append(box)
			var mySwiper = new Swiper ('.swiper', {
			direction: 'vertical', // 垂直切换选项
			loop: true, // 循环模式选项
			autoplay:true,
			slidesPerView: 3,
			// 如果需要分页器
			pagination: {
			el: '.swiper-pagination',
			},
			})
			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 +163,7 @@
			color: '#FFF'
			}
			},
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
			data: ['未知', '测试库位', '静置库位', '测试前暂存库为', '测试失败库位']
			}
			],
			yAxis: [
			@@ -139,44 +178,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', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
			tooltip: {
			trigger: 'axis',
			axisPointer: {
			@@ -209,32 +257,49 @@
			color: '#FFF'
			}
			},
			data: ['合格', '不合格']
			data: ['本周', '上周']
			},
			series: [
			{
			name: '本周',
			name: '合格',
			type: 'bar',
			itemStyle: {
			normal: {
			label: {
			show: true,
			position: 'right'
			}
			}
			},
			data: [10, 1]
			},
			{
			name: '上周',
			name: '不合格',
			type: 'bar',
			itemStyle: {
			normal: {
			label: {
			show: true,
			position: 'right'
			}
			}
			},
			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: ['上午出库', '上午入库', '下午出库', '下午入库'],
			data: ['8-20出库', '8-20入库', '20-8出库', '20-8入库'],
			textStyle:{color:'#FFF'},
			},
			grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
			@@ -264,7 +329,7 @@
			},
			series: [
			{
			name: '上午出库',
			name: '8-20出库',
			type: 'line',
			lineStyle: {
			width: 0,
			@@ -273,10 +338,10 @@
			}
			},
			smooth: true,
			data: [10, 10, 10, 10, 10, 10, 10]
			data: [10, 15, 8, 10, 10, 10, 10]
			},
			{
			name: '上午入库',
			name: '8-20入库',
			type: 'line',
			lineStyle: {
			width: 0,
			@@ -285,10 +350,10 @@
			}
			},
			smooth: true,
			data: [10, 10, 10, 10, 10, 10, 10]
			data: [12, 20, 7, 10, 10, 10, 10]
			},
			{
			name: '下午出库',
			name: '20-8出库',
			type: 'line',
			lineStyle: {
			normal: {
			@@ -296,10 +361,10 @@
			}
			},
			smooth: true,
			data: [10, 10, 10, 10, 10, 10, 10]
			data: [8, 7, 10, 6, 10, 10, 10]
			},
			{
			name: '下午入库',
			name: '20-8入库',
			type: 'line',
			lineStyle: {
			normal: {
			@@ -307,11 +372,95 @@
			}
			},
			smooth: true,
			data: [10, 1, 10, 10, 10, 10, 10]
			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) {
			for (var i = 0; i < res.data.length; i++) {
			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 initMorning() {
			$.ajax({
			url: url+"/mobile/pack/morning/v2",
			method: 'POST',
			success: function (res) {
			if (res.code === 200) {
			smoothedLineChartOption.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)];
			smoothedLineChartOption.series[0].data=res.data.rows[0].data;
			smoothedLineChartOption.series[1].data=res.data.rows[1].data;
			smoothedLineChart.setOption(smoothedLineChartOption)
			}
			}
			});
			}
			function initEvening() {
			$.ajax({
			url: url+"/mobile/pack/evening/v2",
			method: 'POST',
			success: function (res) {
			if (res.code === 200) {
			smoothedLineChartOption.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)];
			smoothedLineChartOption.series[3].data=res.data.rows[0].data;
			smoothedLineChartOption.series[2].data=res.data.rows[1].data;
			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>

	src/main/webapp/views/monitor/css/index.css	40 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/views/monitor/index.html	295 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/webapp/views/monitor/monitor.html	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

			@@ -57,7 +57,8 @@
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			font-size: 26px;
			font-weight: 600;
			}
			.box-body {
			width: 95%;
			@@ -75,6 +76,29 @@
			width: 100%;
			height: 90%;
			}
			.table-head {
			height: 40px;
			background-color: rgba(0, 54, 167, 0.4);
			color: #f1f1f1;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			font-size: 20px;
			font-weight: 700;
			}
			.table-item {
			color: #FFF;
			text-align: center;
			}
			.table-td {
			display: flex;
			align-items: center;
			font-size: 18px;
			}
			.table-td:nth-child(even) {
			background-color: rgba(90, 163, 172, 0.3);
			}
			.percentage {
			text-align: center;
			line-height: 100px;
			@@ -82,8 +106,18 @@
			margin-left: 20px;
			height: 100px;
			width: 100px;
			background-color: #f1f1f1;
			background-color: rgba(85, 255, 227, 0.56);
			border-radius: 50%;
			font-size: 40px;
			font-size: 32px;
			color: #ffffff;
			font-family: electronicFont;
			}
			.time-tools {
			position: absolute;
			margin-left: 80%;
			margin-top: 0.8%;
			width: 20%;
			height: 10%;
			text-align: center;
			color: #FFF;
			}

			@@ -792,6 +792,7 @@
			url: baseUrl+"/monitor/line/charts",
			method: 'GET',
			success: function (res) {
			console.log(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),