zy-wcs.git - Gitblit

			@@ -2,19 +2,77 @@
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<title>电桩监控</title>
			<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="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>
			.crn-speed {
			width: 100%;
			height: 35%;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			/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 {
			display: inline-block;
			}


			.scroll-pane {
			width: 100%;
			height: 65%;
			}
			.scroll-bar {
			float: left;
			width: 50%;
			height: 100%;
			text-align: center;
			}

			.scroll-header span {
			font-size:64px;
			font-family:'Pacifico',serif
			}

			.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)
			}
			}

			</style>
			</head>
			<style>



			</style>
			<body class="monitor-bg">

			<!-- 电站详情 -->
			@@ -35,7 +93,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监控平台
			@@ -53,14 +111,14 @@
			<div class="image-border image-border3"></div>
			<div class="image-border image-border4"></div>
			<div class="introduce">
			<h6>充电桩基本信息</h6>
			<p class="english">charge base info</p>
			<p class="introduce-content">那就是南昌打开另外纳斯达克脸上难看了上电脑课拉萨等你可怜我那就是南昌市第三代离开温暖的渴望懒得快来为你打开另外纳斯达克脸上难看了上电脑课拉萨等你可怜我那就是南昌市第三代离开温暖的渴望懒得快来为你打开另外纳斯达克脸上难看了上电脑课拉萨等你可怜我</p>
			<h6>自动化立体仓库</h6>
			<p class="english">Automatic Storageand Retrieval System</p>
			<p class="introduce-content"> 利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化；自动化立体仓库是当前技术水平较高的形式。自动化立体仓库的主体由货架、巷道式堆垛起重机、入（出）库工作台和自动运进（出）及操作控制系统组成。货架是钢结构或钢筋混凝土结构的建筑物或结构体，货架内是标准尺寸的货位空间，巷道堆垛起重机穿行于货架之间的巷道中，完成存、取货的工作。管理上采用计算机及条形码技术。</p>
			</div>
			<div class="charge-info">
			<div class="info-header">
			<h6>场站数据</h6>
			<p class="english">charge data</p>
			<h6>仓库数据</h6>
			<p class="english">warehouse data</p>
			</div>
			<div class="charge-info-elem">
			<img src="img/a.png">
			@@ -69,7 +127,7 @@
			<i class="count">7777</i>
			<span class="unit">个</span>
			</div>
			<div class="content">充电桩总数(个)</div>
			<div class="content">库位总数(个)</div>
			</div>
			</div>
			<div class="charge-info-elem">
			@@ -79,7 +137,7 @@
			<i class="count">777</i>
			<span class="unit">个</span>
			</div>
			<div class="content">使用中电桩(个)</div>
			<div class="content">使用中库位(个)</div>
			</div>
			</div>
			<div class="charge-info-elem">
			@@ -87,9 +145,9 @@
			<div class="info-detail">
			<div class="real-data">
			<i class="count">33</i>
			<span class="unit">元</span>
			<span class="unit">托</span>
			</div>
			<div class="content">今日充电金额(元)</div>
			<div class="content">今日入库(托)</div>
			</div>
			</div>
			<div class="charge-info-elem">
			@@ -99,7 +157,7 @@
			<i class="count">14296</i>
			<span class="unit">千瓦时</span>
			</div>
			<div class="content">今日充电总量(千瓦时)</div>
			<div class="content">今日电总量(千瓦时)</div>
			</div>
			</div>
			</div>
			@@ -108,7 +166,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>
			@@ -117,47 +175,78 @@
			<!--中-->
			<div class="container-element-middle">
			<div class="map-board">
			<div id="map">
			</div>
			</div>
			<div class="station-list">
			<div class="outside">
			<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="station-name">正工鸿大</div>
			<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="crn-speed">
			<div class="speed-content">
			<div>
			<span>堆垛机走行速度：</span><span class="counter">5.00</span><span>米/秒</span>
			</div>
			<div>
			<span>堆垛机升降速度：</span><span class="counter">5.00</span><span>米/秒</span>
			</div>
			</div>
			</div>

			<div class="scroll-pane">

			<div class="layui-carousel" id="test1">
			<div carousel-item>
			<div style="background-color: red">条目1</div>
			<div style="background-color: gold">条目2</div>
			<div style="background-color: #333333">条目3</div>
			<div style="background-color: #00FF00">条目4</div>
			<div style="background-color: #5FB878">条目5</div>
			</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 class="outside">
			<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="station-name">警体中心</div>
			</div>
			</div>
			<div class="outside">
			<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="station-name">下沙新加坡科技园</div>
			</div>
			</div>
			<div class="outside">
			<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="station-name">塘栖市民之家</div>
			</div>
			</div>
			</ul>

			</div>
			</div>

			@@ -170,7 +259,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">
			@@ -188,7 +277,7 @@
			<div class="image-border image-border4"></div>
			<div class="top-header">
			<div class="income-date">
			<span class="income-date-left" >收入类型</span>
			<span class="income-date-left" >库存类型</span>
			<span class="income-date-right">今天</span>
			</div>
			<div class="income-date-english english">
			@@ -204,7 +293,7 @@
			<div class="elem-header" id="elem-header-first">
			</div>
			<div class="elem-main">
			合计(元)
			在库
			</div>
			<div class="elem-footer">
			3,300
			@@ -214,7 +303,7 @@
			<div class="elem-header" id="elem-header-second">
			</div>
			<div class="elem-main">
			电桩数(个)
			空库
			</div>
			<div class="elem-footer">
			161
			@@ -224,7 +313,7 @@
			<div class="elem-header" id="elem-header-third">
			</div>
			<div class="elem-main">
			面积(m²)
			使用中
			</div>
			<div class="elem-footer">
			666
			@@ -239,7 +328,7 @@
			<div class="image-border image-border4"></div>
			<div class="progress-bar">
			<div class="usage-rate">
			<span class="usage-rate-left" >本月设备使用率</span>
			<span class="usage-rate-left" >库位使用率</span>
			<span class="usage-rate-right">60%</span>
			</div>
			<div class="usage-rate-english english">
			@@ -259,6 +348,17 @@
			</div>
			</body>
			<script>
			layui.use('carousel', function(){
			var carousel = layui.carousel;
			//建造实例
			carousel.render({
			elem: '#test1'
			,width: '100%' //设置容器宽度
			,arrow: 'always' //始终显示箭头
			//,anim: 'updown' //切换动画方式
			});
			});
			$('.counter').countUp();
			// 遮罩
			let closeBtn = document.getElementById('closeBtn');
			let detailModal = document.getElementById('detail-modal');
			@@ -266,113 +366,14 @@
			detailModal.style.display = 'none';
			};
			var data = [];
			var chart = echarts.init(document.getElementById('map'));
			var lastStationId = null;
			var defalutName = '递递叭叭充电桩监控平台';
			var lastName = defalutName;
			function reload(stationId){
			data = [];
			let center = [120.307658, 30.372121];
			let param = {
			stationId: stationId
			};
			http.post("http://localhost:8080/admin/stations.action", param, function (res) {
			res.data.list.map(item => {
			data.push({
			name: item.name,
			stationId: item.stationId,
			value: [item.lon, item.lat]
			})
			});
			option = {
			backgroundColor: 'transparent',
			title: {
			text: '',
			subtext: '',
			sublink: '',
			left: 'center',
			textStyle: {
			color: '#fff'
			}
			},
			tooltip : {
			trigger: 'item'
			},
			bmap: {
			center: stationId==null?center:data[0].value,
			zoom: stationId==null?12:18,
			roam: true, // 是否可缩放
			},
			series : [
			{
			name: '',
			type: 'effectScatter',
			coordinateSystem: 'bmap',
			data: data,
			symbolSize: function () {
			return 18;
			},
			showEffectOn: 'emphasis',
			rippleEffect: {
			brushType: 'stroke'
			},
			hoverAnimation: true,
			label: { // 标签
			formatter: '{b}',
			position: 'right',
			show: false
			},
			itemStyle: {
			color: '#f4e925',
			shadowBlur: 10,
			shadowColor: '#333'
			},
			zlevel: 1
			},
			]
			};

			chart.setOption(option);

			var bMap = chart.getModel().getComponent('bmap').getBMap();
			bMap.setMapStyle({
			style : "midnight",
			});

			if (stationId != null) {
			lastStationId = stationId;
			lastName = data[0].name;
			} else {
			lastStationId = null;
			lastName = defalutName;
			}

			}, 'form');
			}

			reload();

			chart.on('click', function (param) {
			reload(param.data.stationId);
			$('.title').html(param.data.name);
			});

			// 返回
			$('.button-left').click(function () {
			reload();
			$('.title').html(defalutName);
			});
			// 刷新
			$('.button-right').click(function () {
			detailModal.style.display = 'block';
			// reload(lastStationId);
			// $('.title').html(lastName);
			});


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

			var lineCharts = echarts.init(document.getElementById('line-charts'));
			var lineChartOption = {
			// animation: false,
			grid: {
			top: '0%',
			@@ -437,11 +438,39 @@
			}]
			};

			lineCharts.setOption(lineChartOption);
			// 访问量报表加载
			function initlinChart() {
			var reportView = lineChartOption;
			var xAxisDate = [];
			var seriesDate=[];
			$.ajax({
			url: baseUrl+"/monitor/pakin/rep",
			method: 'GET',
			success: function (res) {
			if (res.code === 200){
			var json = res.data;
			for (var i = 0; i < json.length; i++) {
			xAxisDate[i]=json[i].node;
			seriesDate[i]=json[i].val;
			}
			reportView.xAxis.data=xAxisDate;
			reportView.series[0].data=seriesDate;
			lineCharts.setOption(reportView)
			} else if (res.code === 403){
			top.location.href = "/";
			} else {
			layer.msg(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%',
			@@ -457,7 +486,7 @@
			legend: {
			orient: 'vertical',
			left: 10,
			data: ['1', '2', '3']
			data: ['在库库位', '空库位', '使用库位', '禁用库位']
			},
			series: [
			{
			@@ -480,9 +509,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: {
			@@ -503,7 +533,24 @@
			}
			]
			};
			pieCharts.setOption(pieChartOption);
			// 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;
			pieCharts.setOption(pieChartOption)
			} else if (res.code === 403){
			top.location.href = "/";
			} else {
			layer.msg(res.msg);
			}
			}
			});
			}

			</script>
			</html>