YQ-August
/
yzCctvHelm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="Cache" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="0">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>钢丝绳检测</title>
		<link rel="stylesheet" href="../css/index.css">
		<link rel="stylesheet" href="../css/style.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<script src="../js/vue.min.js"></script>
		<script src="../js/index.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/echarts.min.js"></script>
		<script type="text/javascript">
			document.write('<script src="../assets/init.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
			document.write('<script src="../assets/wireWram.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
		</script>
		<script>
			checkLogin();
		</script>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
			.yz_main{
				width: calc(100% - 160px);
				height: 100%;
				float: right;
				padding: 0 8px;
			}
			.yz_aside{
				width: 160px;
				height: 100%;
				float: left;
				color: #fff;
			}
			.yz_aside li{
				cursor: pointer;
				padding: 7px 8px;
			}
			li{
				list-style: none;
			}
			.warmli li{
				display: flex;
				align-items: center;
				font-size: 14px;
				color: #e1e1e1;
				padding: 7px 15px;
			}
			.warmli li .act{
				color: #0081FF;
			}
			#app .el-table .el-table__cell{
				padding:7px 0 !important;
			}
			#app .el-table,#app .el-table__expanded-cell,#app .el-table tr{
				color: #d4d4d4;
				background-color: transparent !important;
			}
			#app .el-table::before{
				height: 0;
			}
			#app .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
				border-bottom: none;
			}
			#app .el-table--striped .el-table__body tr.el-table__row--striped td {
				background: #001D45;
			}
			.el-input__inner{
				height: 34px;
			}
		</style>
	</head>
	<body>
		<div id="app" class="padding-xs" v-cloak>
			<div class="bg-theme-son flex algin-center">
			    <div v-for="(item,index) in ['实时监控','历史查询']" :key='index' @click="activeName = index"
				class="padding-tb-sm padding-lr pointer" :class="activeName == index?'text-blue':''">{{ item }}</div>
			</div>
			<div style="height:calc(100vh - 47px);overflow: auto;" class="padding-tb-xs" v-loading="loading">
				<div class="yz_aside warmli Sense">
					<div class="padding-sm text-bold text-sm">设备列表</div>
					<ul style="height: calc(100% - 52px);overflow: auto;" v-if="wireImeiLi.length">
						<li v-for="(it,ind) in wireImeiLi" :key="ind" @click="handleChange(it)">
							<div class="text-sm" :class="it.imei == wireItem.imei?'act':''">{{ it.name }}</div>
						</li>
					</ul>
					<ul v-else>
						<li>暂无设备</li> 
					</ul>
				</div>
				<div class="yz_main text-sm">
					<div v-show="activeName == 0" style="height:100%;">
						<div style="height:50%;background-color: #001D45;">
							<div id="myChart" style="height:100%;width: 100%;"></div>
						</div>
						<img src="../img/wireRope.png" alt="" class="margin-tb-xs" style="width: 100%;">
						<div style="height:calc(50% - 90px);">
							<el-row :gutter="10" style="height:100%;">
								<el-col :span="8" class="padding-tb-sm radius" style="background-color: #001D45;">
									<div class="padding-xs">设备编号：<span class="text-yellow">{{wireItem.imei}}</span></div>
									<div class="padding-xs">上报时间：<span class="text-yellow">{{wireInfo.ts != undefined?getDTime(new Date(parseInt(wireInfo.ts)*1000))[2]:'---- --:--:--'}}</span> </div>
									<div class="flex">
										<div class="flex-sub">
											<div class="padding-xs">风险等级：<span class="text-yellow">无</span></div>
											<div class="padding-xs">最大损伤值：<span class="text-yellow">{{wireInfo.maxSS.toFixed(2)}}%</span></div>
											<div class="padding-xs">平均损伤值：<span class="text-yellow">{{wireInfo.avgSS.toFixed(2)}}%</span></div>
											 <div class="padding-xs">损伤等级：
												<span>
													<span v-if="wireInfo.level == 0" class="text-green">正常</span>
													<span v-else-if="wireInfo.level == 1" class="text-green">轻度</span>
													<span v-else-if="wireInfo.level == 2" class="text-orange">中度</span>
													<span v-else-if="wireInfo.level == 3" class="text-red">重度</span>
												</span>
											</div>
										</div>
										<div class="flex-sub">
											<div class="padding-xs">检测距离：<span class="text-yellow">{{wireInfo.distance}}m</span></div>
											<div class="padding-xs">损伤个数：<span class="text-yellow">{{wireInfo.cnt}}个</span></div>
											<div class="padding-xs">平均速度：<span class="text-yellow">{{wireInfo.speed}}m/s</span></div>
										</div>
									</div>
								</el-col>
								<el-col :span="16" style="height:100%;">
									<div style="width: 100%;height: 100%;">
										<el-table :data="wireInfo.data" stripe height="100%" style="width: 100%;"
											:header-cell-style="{background:'#173862',color:'#fff'}">
										    <el-table-column align="center" prop="x" label="时间" width="160">
										    	<template slot-scope="scope">
										    		{{getDTime(new Date(parseInt(scope.row.x)*1000))[2]}}
										    	</template>
										    </el-table-column>
										    <el-table-column align="center" prop="ss" label="损伤值">
										    	<template slot-scope="scope">{{ scope.row.ss }}%</template>
										    </el-table-column>
										    <el-table-column align="center" prop="y" label="模数值"></el-table-column>
										  </el-table>
									</div>
								</el-col>
							</el-row>
						</div>
					</div>
					<div v-show="activeName == 1" style="height:100%;">
						<el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
							<el-form-item label="日期：" prop="maintenanceId">
								<div class="flex">
									<el-date-picker style="width: 196px;" type="datetime" placeholder="选择开始日期" value-model="yyyy-MM-dd HH:mm:ss" v-model="queryParams.startime"></el-date-picker>
									<span class="margin-lr-sm">-</span>
									<el-date-picker style="width: 196px;" type="datetime" placeholder="选择结束日期" value-model="yyyy-MM-dd HH:mm:ss" v-model="queryParams.endtime"></el-date-picker>
								</div>
							</el-form-item>
							<el-form-item label="日期排序：">
								<el-select v-model="queryParams.orderSql" style="width: 110px;" placeholder="请选择">
									<el-option
									  v-for="item in orderSqlLi"
									  :key="item.value"
									  :label="item.label"
									  :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
								<el-button icon="el-icon-refresh-right" size="small" @click="resetQuery">重置</el-button>
							</el-form-item>
						</el-form>
						<el-table :data="wireHis" style="width: 100%;" stripe
							:header-cell-style="{background:'#173862',color:'#fff'}">
							<el-table-column align="center" prop="imei" label="设备号"></el-table-column>
							<el-table-column align="center" prop="time" label="上报时间"></el-table-column>
							<!-- <el-table-column align="center" prop="sTime" label="开始时间" width="160" v-if="wireHis[0].sTime != undefined">
								<template slot-scope="scope">
									{{getDTime(new Date(parseInt(scope.row.sTime)*1000))[2]}}
								</template>
							</el-table-column>
							<el-table-column align="center" prop="etime" label="结束时间" width="160" v-if="wireHis[0].etime != undefined">
								<template slot-scope="scope">
									{{getDTime(new Date(parseInt(scope.row.etime)*1000))[2]}}
								</template>
							</el-table-column> -->
							<el-table-column align="center" prop="level" label="损伤等级">
								<template slot-scope="scope">
									<span v-if="scope.row.level == 0" class="text-green">正常</span>
									<span v-else-if="scope.row.level == 1" class="text-green">轻度</span>
									<span v-else-if="scope.row.level == 2" class="text-orange">中度</span>
									<span v-else-if="scope.row.level == 3" class="text-red">重度</span>
								</template>
							</el-table-column>
							<el-table-column align="center" prop="cnt" label="损伤个数">
								<template slot-scope="scope">
									<el-tooltip class="item" effect="dark" placement="top-start">
										<template slot="content">
											<el-table v-if="scope.row.data != undefined" :data="JSON.parse(scope.row.data)">
												<el-table-column align="center" prop="x" label="时间" width="160">
													<template slot-scope="scope">
														{{getDTime(new Date(parseInt(scope.row.x)*1000))[2]}}
													</template>
												</el-table-column>
												<el-table-column align="center" prop="ss" label="损伤值">
													<template slot-scope="scope">{{ scope.row.ss }}%</template>
												</el-table-column>
												<el-table-column align="center" prop="y" label="模数值"></el-table-column>
											</el-table>
										</template>
										<span>{{ scope.row.cnt }}</span>
									</el-tooltip>
								</template>
							</el-table-column>
							<el-table-column align="center" prop="avgSS" label="平均损伤值">
								<template slot-scope="scope">{{ scope.row.avgSS }}%</template>
							</el-table-column>
							<el-table-column align="center" prop="maxSS" label="最大损伤值">
								<template slot-scope="scope">{{ scope.row.maxSS }}%</template>
							</el-table-column>
							<el-table-column align="center" prop="speed" label="平均速度">
								<template slot-scope="scope">{{ scope.row.speed }}m/s</template>
							</el-table-column>
							<el-table-column align="center" prop="distance" label="检测距离">
								<template slot-scope="scope">{{ scope.row.distance }}m</template>
							</el-table-column>
						</el-table>
						<div class="margin-tb-sm">
							<el-pagination
								@current-change="handleCurrentChange"
								:current-page="queryParams.page"
								background
								:page-size="12"
								layout="total, prev, pager, next, jumper"
								:total="allTotal">
							</el-pagination>
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			document.write('<script src="../assets/wireRope.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
		</script>
	</body>

</html>