master

分支 (2)

管理

管理

master

dev

zhgdweb
/
tab1.html

<!DOCTYPE html>
<html lang="en">

	<head>
		<title>塔吊安全</title>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="css/matrix-style2.css" />
		<link rel="stylesheet" href="css/matrix-media.css" />
		<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
		<style>
			.widget-content .fl {
				width: 49%;
				display: inline-block;
			}

			.widget-content .fl.first {
				border-left: 1px solid #CCCCCC;
			}

			.item {
				display: block;
				width: 33.33%;
				float: left;
				text-indent: 4em;
				padding: 10px 0;
				/*background: #000000;*/
			}

			.widget-content {
				padding: 0;
			}

			.widget-title h5.s-title {
				margin-left: 41%;
			}

			.icon img {
				width: 20px;
			}

			.table-striped td {
				text-align: center;
			}
			.table-striped{
				margin-top: 30px;
				background: #f9f9f9;
			}
		</style>
	</head>

	<body>

		<div id="content">
			<div id="content-header">
				<h1>车辆信息</h1>
			</div>
			<div class="container-fluid" style="margin-top: 10px;">
				<ul id="myTab" class="nav nav-tabs" style="margin-bottom: 0px;">
					<li class="active">
						<a href="#tab1" data-toggle="tab">
							常规管理
						</a>
					</li>
					<li>
						<a href="#tab2" data-toggle="tab">安全报警</a>
					</li>
					<li>
						<a href="#tab3" data-toggle="tab">驾驶行为记录</a>
					</li>
					<li>
						<a href="#tab4" data-toggle="tab">油耗及里程报表</a>
					</li>
				</ul>
				<div id="myTabContent" class="tab-content">
					<div class="tab-pane fade in active" id="tab1" style="border: 1px solid #999999;">
						<div class="widget-box" style="margin-top: 0;margin-bottom: 0px;">
							<img src="img/ditu.png" style="height: 500px;width: 100%;" />
						</div>
						<div class="widget-content nopadding">
							<table class="table table-bordered table-striped" style="margin-top: 0;border-top: 1px solid #999999;">
								<thead>
									<tr>
										<th>起始位置</th>
										<th>目标位置</th>
										<th>当前位置</th>
										<th>坐标</th>
										<th>当前速度</th>
										<th>当前油量</th>
										<th>车牌号码</th>
										<th>车辆型号</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>天安门</td>
										<td>王府井</td>
										<td>北京西</td>
										<td>北纬12.5°</td>
										<td>50/km</td>
										<td>10L</td>
										<td>粤A35689</td>
										<td>宝马320</td>
									</tr>
									<tr>
										<td>故宫</td>
										<td>西单</td>
										<td>王府井</td>
										<td>北纬32.5°</td>
										<td>40/km</td>
										<td>20L</td>
										<td>粤A85476</td>
										<td>奔驰S600</td>
									</tr>
									<tr>
										<td>颐和园</td>
										<td>西客站</td>
										<td>北京站</td>
										<td>北纬25.5°</td>
										<td>35/km</td>
										<td>26L</td>
										<td>粤A34582</td>
										<td>奥迪A6</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="tab-pane fade span12" id="tab2">
						<div id="main" style="width: 800px;height:400px;margin: auto;"></div>
					</div>
					<div class="tab-pane fade" id="tab3">
						<div id="main1" style="width: 800px;height:400px;margin: auto;"></div>
						<div class="widget-content nopadding">
							<table class="table table-bordered table-striped" style="background: #f9f9f9;border: 1px solid #999;">
								<thead>
									<tr>
										<th>#</th>
										<th>日期</th>
										<th>急加速/次</th>
										<th>急转弯/次</th>
										<th>急减速/次</th>
										<th>超速/次</th>
										<th>疲劳驾驶/次</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>1</td>
										<td>2017-4-13</td>
										<td>10</td>
										<td>20</td>
										<td>15</td>
										<td>25</td>
										<td>8</td>
									</tr>
									<tr>
										<td>2</td>
										<td>2017-4-14</td>
										<td>8</td>
										<td>18</td>
										<td>16</td>
										<td>6</td>
										<td>9</td>
									</tr>
									<tr>
										<td>3</td>
										<td>2017-4-15</td>
										<td>5</td>
										<td>10</td>
										<td>15</td>
										<td>11</td>
										<td>17</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="tab-pane fade" id="tab4">
						<div id="main2" style="width: 800px;height:250px;margin: auto;"></div>
						<div class="span12" style="text-align: center;">油耗表</div>
						<div id="main3" style="width: 800px;height:250px;margin: auto;margin-bottom: 20px;"></div>
						<div class="span12" style="text-align: center;margin-bottom: 50px;">里程表</div>
						<div class="widget-content nopadding">
							<table class="table table-bordered table-striped" style="background: #f9f9f9;border: 1px solid #999;">
								<thead>
									<tr>
										<th>#</th>
										<th>日期</th>
										<th>油耗量</th>
										<th>里程</th>
										<th>油耗/百公里</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>1</td>
										<td>2017-4-13</td>
										<td>10L</td>
										<td>20km</td>
										<td>15L/100km</td>
									</tr>
									<tr>
										<td>2</td>
										<td>2017-4-14</td>
										<td>30L</td>
										<td>10km</td>
										<td>13L/100km</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.ui.custom.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/matrix.js"></script>
		<script src="js/echarts.min.js"></script>
		<script>
			var myChart = echarts.init(document.getElementById('main'));
			var myChart1 = echarts.init(document.getElementById('main1'));
			var myChart2 = echarts.init(document.getElementById('main2'));
			var myChart3 = echarts.init(document.getElementById('main3'));
			option = {
				color: ['#3398DB'],
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					data: ['非法启动', '颠簸', '碰撞', '侧翻', '故障检测'],
					axisTick: {
						alignWithLabel: true
					}
				}],
				yAxis: [{
					type: 'value'
				}],
				series: [{
					name: '直接访问',
					type: 'bar',
					barWidth: '60%',
					data: [10, 20, 30, 40, 50]
				}]
			};

			option1 = {
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					data: ['2017-4-13', '2017-4-14', '2017-4-15', '2017-4-16', '2017-4-17', '2017-4-18', '2017-4-19']
				}],
				yAxis: [{
					type: 'value'
				}],
				series: [{
					name: '急加速 ',
					type: 'bar',
					stack: '广告',
					data: [10, 20, 15, 25, 8, 18, 10]
				}, {
					name: '急转弯',
					type: 'bar',
					data: [8, 18, 15, 6, 9, 11, 13],
				}, {
					name: '急减速',
					type: 'bar',
					barWidth: 5,
					stack: '搜索引擎1',
					data: [5, 10, 15, 11, 17, 13, 8]
				}, {
					name: '超速',
					type: 'bar',
					stack: '搜索引擎2',
					data: [10, 9, 15, 13, 20, 8, 7]
				}, {
					name: '疲劳驾驶',
					type: 'bar',
					stack: '搜索引擎',
					data: [10, 17, 5, 16, 19, 11, 5]
				}]
			};

			option2 = {
				color: ['#3398DB'],
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					data: ['2017-4-13', '2017-4-14', '2017-4-15', '2017-4-16', '2017-4-17', '2017-4-18', '2017-4-19'],
					axisTick: {
						alignWithLabel: true
					}
				}],
				yAxis: [{
					type: 'value',
					 axisLabel: {
		                formatter: '{value} L'
		            }
				}],
				series: [{
					name: '直接访问',
					type: 'bar',
					barWidth: '60%',
					data: [10, 20, 30, 40, 50, 60, 65]
				}]
			};

			option3 = {
				color: ['#3398DB'],
				tooltip: {
					trigger: 'axis',
					axisPointer: { // 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					data: ['2017-4-13', '2017-4-14', '2017-4-15', '2017-4-16', '2017-4-17', '2017-4-18', '2017-4-19'],
					axisTick: {
						alignWithLabel: true
					}
				}],
				yAxis: [{
					type: 'value',
					axisLabel: {
		                formatter: '{value} km'
		            }
				}],
				series: [{
					name: '直接访问',
					type: 'bar',
					barWidth: '60%',
					data: [20, 10, 25, 15, 25, 30, 28]
				}]
			};

			myChart.setOption(option);
			myChart1.setOption(option1);
			myChart2.setOption(option2);
			myChart3.setOption(option3);
		</script>
	</body>

</html>