zy-wcs.git - Gitblit

			@@ -4,17 +4,70 @@
			<meta charset="UTF-8">
			<title>ASRS监控</title>
			<link href="css/monitor.css" rel="stylesheet">
			<link href="css/Pacifico.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>
			<style>
			.crn-speed {
			width: 100%;
			height: 20%;
			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:64px;
			font-family:'Pacifico',serif
			}
			.speed-content {
			display: inline-block;
			}

			.scroll-pane {
			width: 100%;
			height: 80%;
			}

			.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">

			<!-- 电站详情 -->
			@@ -117,48 +170,63 @@
			<!--中-->
			<div class="container-element-middle">
			<div class="map-board">
			<div id="map">
			</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">
			<span>堆垛机速度：</span><span class="counter">5.00</span><span>米/秒</span>
			</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>
			</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="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">A</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">B</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">C</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">D</div>
			</div>
			</div>
			</ul>
			</div>

			</div>

			<!--右-->
			@@ -259,6 +327,7 @@
			</div>
			</body>
			<script>
			$('.counter').countUp();
			// 遮罩
			let closeBtn = document.getElementById('closeBtn');
			let detailModal = document.getElementById('detail-modal');
			@@ -266,109 +335,6 @@
			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'));