jifuning
/
ZHadmin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../static/css/font.css">
		<link rel="stylesheet" href="../static/css/weadmin.css">
		<style>
			html{
				overflow-y: auto;
			}

		</style>
	</head>
	<body>
		<div class="weadmin-body">
			<blockquote class="layui-elem-quote" style="border-left: 5px solid #2d6dcc;">欢迎使用智慧矿山！</blockquote>
			<div class="layui-fluid" style="overflow: hidden;">
				<div class="layui-row layui-col-space15">
					<div class="layui-card">
						<div class="layui-card-header">水位信息</div>
						<div class="layui-card-body">
							<div class="layui-carousel weadmin-shortcut" lay-filter="shortcut" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
								<div carousel-item="">
									<ul class="layui-row layui-col-space10 layui-this">
										<li class="layui-col-xs4">
											<a href="javascript:;">
												<span class="layui-icon time">2019-1-03-27 10:12</span>
												<cite>当前时间</cite>
											</a>
										</li>
										<li class="layui-col-xs4">
											<a href="http://www.layui.com/admin/" target="_blank">
												<i class="layui-icon">0.5m</i>
												<cite>当前水位</cite>
											</a>
										</li>
										<li class="layui-col-xs4">
											<a href="http://layim.layui.com/" target="_blank">
												<i class="layui-icon">10L/s</i>
												<cite>当前流速</cite>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<!--echarts-->
					<div class="eharts">
						<div id="main" style="width: 40%;height:400px;float: left"></div>
						<div id="main1" style="width: 40%;height:400px;float: right"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
	<script src="../static/js/echarts.common.min.js"></script>
	<script type="text/javascript">
		// 图表
		// 饼图
		var myChart = echarts.init(document.getElementById('main'));
		option = {
			title: {
				text: '水位',
				left: 'center'
			},
			tooltip : {
				trigger: 'axis'
			},
			toolbox: {
				show : true,
				feature : {
					magicType : {show: true, type: ['line', 'bar']},
					restore : {show: true},
				}
			},
			calculable : true,
			xAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: [820, 932, 901, 934, 1290, 1330, 1320],
				type: 'line'
			}]
		};
		myChart.setOption(option);
		// 树状图
		var myChartBar=echarts.init(document.getElementById('main1'));
		optionBar = {
			title: {
				text: '流速',
				left: 'center'
			},
			tooltip : {
				trigger: 'axis'
			},
			toolbox: {
				show : true,
				feature : {
					magicType : {show: true, type: ['line', 'bar']},
					restore : {show: true},
				}
			},
			calculable : true,
			xAxis : [
				{
					type : 'category',
					data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月']
				}
			],
			yAxis : [
				{
					type : 'value'
				}
			],
			series : [
				{
					name:'降水量',
					type:'bar',
					// data:barData,
					data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0]
				}
			]
		};
		myChartBar.setOption(optionBar);
		layui.extend({
			admin: '{/}../static/js/admin',
		});
		layui.use(['jquery', 'element','util', 'admin', 'carousel'], function() {
			var element = layui.element,
				$ = layui.jquery,
				carousel = layui.carousel,
				util = layui.util,
				admin = layui.admin;
			setTimeAgo(".time")
			function setTimeAgo(id){
				var date = new Date(),
				year = date.getFullYear(),
				moth = date.getMonth()+1;
				var str = `${year}-${moth}`
			    $(id).html(str);
			 }
		});
	</script>

</html>