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">
		<!-- 新 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>
		<!--界面样式-->
		<script src="js/visual.js"></script>

		<script src="https://unpkg.com/vue@next"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.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 NSPEM">
									<div>
										<h3 id="delayed">{{NSPEM[index].location}} (kwh)</h3>
										<p>{{ NSPEM[index].activeEnergy / 1000 }}</p>
										<div class="conTop_smil">
											<a class="sz">电流 / 电压 :
												<span>{{ NSPEM[index].curSpecs }}/{{ NSPEM[index].volSpecs }}</span><i
													class="fa fa-long-arrow-up"></i></a>
											<a class="xd">生产商 : <span>{{ NSPEM[index].produtor }}</span><i
													class="fa fa-long-arrow-down"></i></a>
											<a><span>{{ NSPEM[index].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 TPEM">
									<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><img src="images/dianbiao.png">{{TPEM[index].location}}</label>
									<div class="sfzcll_smallBk" style="width: 20%;">
										<div class="ygl">
											<span>{{TPEM[index].activeEnergyAppulse / 1000}}</span>
										</div>
									</div>
									<div class="sfzcll_smallBk" style="width: 20%;">
										<div class="ygh">
											<span>{{TPEM[index].company}}</span>
										</div>
									</div>
									<div class="sfzcll_smallBk">
										<div class="ygl">
											<span>{{TPEM[index].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">{{NSPEM.length}}</div>
									<div class="echartFont echartLeft">{{TPEM.length}}</div>
								</div>
							</div>
						</div>
					</div>
					<!-- <div class="flex-row">
					<div class="visual_con">
						<div class="visual_conTop" >
							<div class="visual_conTop_box visual_conTop1" v-for="(item,index) in TPEM">
								<div>
									<h3>{{ TPEM[index].location }} (kwh)</h3>
									<p>{{TPEM[index].activeEnergyAppulse / 1000}}</p>
									<div class="conTop_smil">
										<a class="xd"> 公司 : {{TPEM[index].company}}</a>
										<a class=""><span>{{TPEM[index].uuid}}</span></i></a>
									</div>
								</div>
							</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">{{NSPEM.length}}</div>
							<div class="echartFont echartLeft">{{TPEM.length}}</div>
						</div>
					</div>
				</div> -->
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var count = 0;
			var count1 = 0;
			var repeat = 0;
			var repeat1 = 0;
			var stop = 0;
			var stop1 = 0;
			var newScrollTop = 0;
			var newScrollTop1 = 0;
			document.getElementById('roll1').scrollTop = 0;
			document.getElementById('roll').scrollTop = 0;

			//获取实时时间
			function mytime() {
				var a = new Date();
				var b = a.toLocaleTimeString();
				var c = a.toLocaleDateString();
				document.getElementById("time").innerHTML = c + "&nbsp" + b;
				// this.time = c;
			}

			// 控制单相电表移动
			function set1() {
				if (document.getElementById('roll').scrollTop == 0) {
					stop1++;
				}
				if (stop1 >= 100) {
					count1 += 1;
					let oldScrollTop = document.getElementById('roll').scrollTop;
					document.getElementById('roll').scrollTop = count1;
					let newScrollTop = document.getElementById('roll').scrollTop;
					if (oldScrollTop == newScrollTop) {
						repeat1++;
					}
					if (repeat1 >= 100) {
						document.getElementById('roll').scrollTop = 0;
						count1 = 0;
						repeat1 = 0;
					}
				}
			}

			// 控制三相电表移动
			function set() {
				if (document.getElementById('roll1').scrollTop == 0) {
					stop++;
				}
				if (stop >= 100) {
					count += 1;
					let oldScrollTop = document.getElementById('roll1').scrollTop;
					document.getElementById('roll1').scrollTop = count;
					let newScrollTop = document.getElementById('roll1').scrollTop;
					if (oldScrollTop == newScrollTop) {
						repeat++;
					}
					if (repeat >= 100) {
						document.getElementById('roll1').scrollTop = 0;
						count = 0;
						repeat = 0;
					}
				}
			}

			var s = setInterval(function() {
				mytime()
				set()
			}, 10);

			var s1 = setInterval(function() {
				set1()
			}, 50);

			window.onload = function() {
				var scoll = document.getElementById('roll1');
				scoll.onmouseenter = function() {
					clearInterval(s);
				}
				scoll.onmouseleave = function() {
					s = setInterval(function() {
						set()
					}, 10)
				}
				var scoll1 = document.getElementById('roll');
				scoll1.onmouseenter = function() {
					clearInterval(s1);
				}
				scoll1.onmouseleave = function() {
					s1 = setInterval(function() {
						set1()
					}, 50)
				}
			}

			$(function() {
				var a = $('.visualSssf_left a')
				for (var i = 0; i < a.length; i++) {
					a[i].index = i;
					a[i].onclick = function() {
						for (var i = 0; i < a.length; i++) {
							a[i].className = ''
						}
						this.className = 'active'
					}
				}

				var sfzcllH = $('.sfzcll_box').height()
				var sfzcllHtwo = sfzcllH - 2
				$('.sfzcll_box').css('line-height', sfzcllH + 'px')
				$('.sfzcll_smallBk>div').css('line-height', sfzcllHtwo + 'px')

				//删除加载动画
				$('#load').fadeOut(1000)
				setTimeout(function() {
					$('#load').remove()
				}, 1100);
			})
			const Alldata = {
				data() {
					return {
						NSPEM: [],
						TPEM: [],
						Data: {}
					}
				},
				methods: {
					getData() {
						axios
							.get('http://172.22.112.171:8082/api')
							.then(response => {
								var allData = response.data;
								var item;
								for (item in allData) {
									var a = allData[item];
									var liu;
									var isExist = false;
									for(liu in this.TPEM){
										if(this.TPEM[liu].addr == a.addr){
											isExist = true;
											break;
										}
									}
									if(isExist){
										this.TPEM[liu] = a;
									}else{
										if (a.device == 'TPEM') {
											this.TPEM.push(allData[item]);
										}
									}
									isExist = false;
									for(liu in this.NSPEM){
										if(this.NSPEM[liu].addr == a.addr){
											isExist = true;
											break;
										}
									}
									if(isExist){
										this.NSPEM[liu] = a;
									}else{
										if ((a.device == 'SPEM') || (a.device == 'SPEM97')) {
											this.NSPEM.push(allData[item]);
										}
									}
								}

								for(var i = 0;i < this.NSPEM.length;i++ ) {
									var delayedTime = this.NSPEM[i].time.slice(0,10);
									var strTimeDate = new Date(Date.parse(delayedTime .replace('/-/g','/'))).getTime();
									var timeStamp = this.time - strTimeDate;
									// var element = document.getElementById('delayed');
									// element.style.color = red;
									// $('#delayed').css('color', '#aa0000')
									// console.log(element)
									if(timeStamp >= 86400000) {
										// element.style.height = '100px';

									}
								}
							})
							.catch(function(error) { // 请求失败处理
								console.log(error);
							});
					},
					//获取时间戳
					time() {
						this.time = new Date().getTime();
					}
				},
				mounted() {
					this.Data = Data;
					this.getData();
					var that = this;
					setInterval(function() {
						that.getData();
					}, 10000);
					this.time();
				}
			}
			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>