master

分支 (1)

管理

管理

master

screen
/
index.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>校园电表大屏数据分析平台</title>
		<!--设置是否为缩放模式 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 在网页标题左侧显示图标 -->
		<link rel="icon" href="./images/favicon.ico" type="image/x-icon">
		<!-- 在收藏夹显示图标 -->
		<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" type="text/css" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="js/jquery.min.js"></script>
		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="js/bootstrap.min.js"></script>
		<!--echarts JS-->
		<script src="js/echarts.min.js"></script>
		<!-- 轮播swiper文件 -->
		<!-- <link rel="stylesheet" type="text/css" href="css/swiper.min.css"> -->
		<!-- <script src="js/swiper.min.js"></script> -->
		<!--界面样式1-->
		<script src="js/visual.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/scroll.js"></script>
		<script src="js/getAllData.js"></script>
		<link rel="stylesheet" type="text/css" href="css/visual.css">
	</head>
	<body class="ksh" id="NSPEM1">
		<div id="load">
			<div class="load_img">
				<!-- 加载动画 -->
				<img class="jzxz1" src="images/jzxz1.png">
				<img class="jzxz2" src="images/jzxz2.png">
			</div>
		</div>
		<div class="head_top">
			<img class="img-responsive" src="images/jcdsj_logo.gif">
		</div>
		<div class="visual">
			<div class="visual_left">
				<div class="visual_box">
					<div class="visual_title">
						<div>
							<span>单相电表</span>
							<img src="images/ksh33.png">
						</div>
						<div id="time" style="float: right;color: antiquewhite;margin-right: 80px;margin-top: -10px;">
						</div>
					</div>
					<div style="height: 93%;">
						<div class="visual_con" id="roll">
							<div class="visual_conTop">
								<div class="visual_conTop_box visual_conTop2" v-for="(item,index) in Data1">
									<div>
										<h3 :id="item[1].device + '-' + item[1].addr">{{item[1].location}} (kwh)</h3>
										<p>{{ item[1].activeEnergy / 1000 }}</p>
										<div class="conTop_smil">
											<a class="sz">电流 / 电压 :
												<span>{{ item[1].curSpecs }}/{{ item[1].volSpecs }}</span><i
													class="fa fa-long-arrow-up"></i></a>
											<a class="xd">采集时间 : {{ item[1].time }}<i
													class="fa fa-long-arrow-down"></i></a>
											<a><span>{{ item[1].uuid }}</span></a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="visual_box">
					<div class="visual_title">
						<span class="visual_title">三相电表</span>
						<img src="images/ksh33.png">
					</div>
					<div class="visual_chart sfzcll">
						<div class="flex-row" style="color: #FFFFFF;padding: 8px;">
							<div style="margin-left: 7%;">电表所在位置</div>
							<div style="margin-left: 12%;">总功率 (kwh) </div>
							<div style="margin-left: 9%;">采集时间</div>
							<div style="margin-left: 14%;">uuid</div>
						</div>
						<div class="flex-row">
							<div class="sfzcll_pos_box" id="roll1">
								<div class="sfzcll_box" v-for="(item,index) in Data">
									<img class="sfzcll_bkJk" src="images/ksh34.png">
									<img class="sfzcll_bkJk" src="images/ksh34.png">
									<img class="sfzcll_bkJk" src="images/ksh34.png">
									<img class="sfzcll_bkJk" src="images/ksh34.png">
									<label :id="item[1].device + '-' + item[1].addr"><img :src="img[index]">{{item[1].location}}</label>
									<div class="sfzcll_smallBk" style="width: 20%;">
										<div class="ygl">
											<span>{{item[1].activeEnergyAppulse / 1000}}</span>
										</div>
									</div>
									<div class="sfzcll_smallBk" style="width: 20%;">
										<div class="ygh">
											<span>{{item[1].time}}</span>
										</div>
									</div>
									<div class="sfzcll_smallBk">
										<div class="ygl">
											<span>{{item[1].uuid}}</span>
										</div>
									</div>
									<div class="clear"></div>
								</div>
							</div>
							<div class="flex-column">
								<div class="flex-row">
									<div id="main6" class="echart"></div>
									<div id="main5" class="echart"></div>
								</div>
								<div class="flex-row">
									<div class="echartFont">{{Data1.size}}</div>
									<div class="echartFont echartLeft">{{Data.size}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			// 定义滚动数据
			document.getElementById('roll1').scrollTop = 0;
			document.getElementById('roll').scrollTop = 0;

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

			// 使用指定的配置项和数据显示图表。
			var myChart5 = echarts.init(document.getElementById('main5'));
			myChart5.setOption(option5);
			var myChart6 = echarts.init(document.getElementById('main6'));
			myChart6.setOption(option6);
		</script>
	</body>
</html>