master

分支 (1)

管理

管理

master

roadLampScreen
/
index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>路灯节点数据可视化平台</title>
		<link rel="icon" href="./images/favicon.ico" type="image/x-icon">	<!-- 在网页标题左侧显示图标 -->
		<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">	<!-- 在收藏夹显示图标 -->
		<!--echarts JS-->
		<script src="js/echarts.min.js"></script>
		<link rel="stylesheet" href="./css/bootstrap.min.css">
		<script src="./js/jquery.min.js"></script>
		<script src="./js/bootstrap.min.js"></script>
		<!-- 导入vue axios -->
		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="js/scoll.js"></script>
		<script src="js/getAllData.js"></script>
		<script src="js/pieEchart.js"></script>
		<link rel="stylesheet" href="./css/index.css">
	</head>
	<body>
		<div class="main" id="Lamp">
			<div class="top_title">
				<img src="./images/top_title.png" />
			</div>
			<div class="datas">
				<div class="data_left">
					<div class="left_top">
						<div class="left_top_title">校园路灯各区占比</div>
						<div id="Business_type" class="left_top_main left_bottom_main"></div>
					</div>
					<div class="left_bottom">
						<div class="left_top_title">校园路灯总数</div>
						<div class="left_top_main">
							<div class="left_main_circle">
								<p class="counter-value circle_num1"
									style="color: #F3DB5C;font-size: 24px;margin-top: 40px;">{{this.eData.size}}</p>
								<span class="span_font" style="color: #ffff;">东区</span>
							</div>
							<div class="left_main_circle">
								<p class="counter-value circle_num2" style="font-size: 24px;margin-top: 32px;">
									{{this.wData.size}}</p>
								<span class="span_font" style="color: #ffff;">西区路灯<br />(盏)</span>
							</div>
							<div class="left_main_circle">
								<p class="counter-value circle_num3"
									style="font-size: 24px;margin-top: 32px;color: rgba(48,255,191,1);">
									{{this.nData.size}}</p>
								<span class="span_font" style="color: #ffff;">北区路灯<br />(盏)</span>
							</div>
						</div>
					</div>
				</div>
				<div class="data_middle">
					<div class="middle_top">
						<div class="middle_top_list">
							<div class="list_title">东区路灯总数</div>
							<div class="list_num"><span>{{this.eData.size}}</span> 盏
							</div>
							<div class="today_list_font">当前亮灯 <span>{{this.eBright}}</span> 盏</div>
						</div>
						<div class="middle_top_list">
							<div class="list_title">西区路灯总数</div>
							<div class="list_num"><span>{{this.wData.size}}</span> 盏
							</div>
							<div class="today_list_font">当前亮灯 <span>{{this.wBright}}</span> 盏</div>
						</div>
						<div class="middle_top_list">
							<div class="list_title">北区路灯总数</div>
							<div class="list_num"><span>{{this.nData.size}}</span> 盏
							</div>
							<div class="today_list_font">当前亮灯 <span>{{this.nBright}}</span> 盏</div>
						</div>
					</div>
					<div class="middle_bottom" style="display: flex;flex-direction: column;">
						<div
							style="display: flex;flex-direction: row;background: url(./images/t_border.png) no-repeat;background-size: 40%;border-bottom:1px solid #ffffff;width: 90%;margin-left: 4%;">
							<img src="images/lamp.png" style="width: 36px;height: 40px;margin-left: 4%;" />
							<div style="font-size: 18px;color: #ffffff;margin-left: 2%;margin-top: 2%;">东区路灯概况</div>
						</div>
						<table class="t_btn8 main_middle_table">
							<thead>
								<tr>
									<th style="width: 28%;">路灯名称</th>
									<th style="width: 11%;">亮灯状态</th>
									<th style="width: 16%;">采集时间</th>
									<th style="width: 45%;">uuid</th>
								</tr>
							</thead>
						</table>
						<div class="overflow" id="e_roll" >
							<table class="table table-hover t_btn8 main_middle_table">
								<tbody>
									<tr v-for="(item,index) in eData">
										<td :id="item[1].device + '-' + item[1].addr">
											{{item[1].name}}
										</td>
										<td :id="item[1].device + '--' + item[1].addr">{{item[1].swtich}}</td>
										<td>{{item[1].time}}</td>
										<td>{{item[1].uuid}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="data_right">
					<div class="right_top main_table t_btn8" style="display: flex;flex-direction: column;">
						<div class="left_top_title">西区路灯概况</div>
						<table>
							<thead>
								<tr>
									<th style="width: 28%;">路灯名称</th>
									<th style="width: 11%;">亮灯状态</th>
									<th style="width: 16%;">采集时间</th>
									<th style="width: 45%;">uuid</th>
								</tr>
							</thead>
						</table>
						<div class="overflow" style="height: 70%;" id="w_roll">
							<table class="table">
								<tbody>
									<tr v-for="(item,index) in wData">
										<td :id="item[1].device + '-' + item[1].addr">
											{{item[1].name}}
										</td>
										<td :id="item[1].device + '--' + item[1].addr">{{item[1].swtich}}</td>
										<td>{{item[1].time}}</td>
										<td>{{item[1].uuid}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="right_bottom">
						<div class="left_top_title">北区路灯概况</div>
						<div id="n_roll" style="height: 80%;overflow: hidden;margin-top: 3%;" class="overflow">
							<div style="width: 89%;height: 30%;margin-left: 5%;display: flex;flex-direction: row;background: url(images/nBg.png);background-size: 100%;margin-top: 1%;"
								v-for="(item,index) in nData">
								<div style="display: flex;flex-direction: column;width: 25%;">
									<div style="color: #F3DB5C;font-size: 16px;margin-top: 19%;margin-left: 36%;">亮灯状态</div>
									<div style="color: #ffffff;font-size: 20px;margin-left: 42%;margin-top: 8%;"
									:id="item[1].device + '--' + item[1].addr">
										{{item[1].swtich}}</div>
								</div>
								<div style="display: flex;flex-direction: column;width: 70%;">
									<div style="display: flex;flex-direction: row;">
										<div style="color: #ffffff;font-size: 16px;margin-top: 6%;margin-left: 12%;"
											:id="item[1].device + '-' + item[1].addr">{{item[1].name}}</div>
										<div style="color: #F3DB5C;font-size: 12px;margin-left: 10%;margin-top: 7.5%;">
											{{item[1].location}}</div>
									</div>
									<div style="color: rgba(48,255,191,1);font-size: 12px;margin-left: 51%;margin-top: 1.5%;">
										{{item[1].time}}</div>
									<div style="color: #61d2f7;font-size: 14px;margin-left: 12%;margin-top: 2.5%;">
										{{item[1].uuid}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	// 定义滚动数据
	$('.w_roll').scrollTop = 0;
	$('.e_roll').scrollTop = 0;
	// $('.n_roll').scrollTop = 0;

	// vue 应用
	Vue.createApp(Alldata).mount('#Lamp');

	// 使用指定的配置项和数据显示图表。
	var myChart = echarts.init(document.getElementById('Business_type'));
	myChart.setOption(option);
</script>