<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content = "IE=edge" />
		<title></title>
		
		<script src="./scripts/polyfill.js"></script>
		<script src="./scripts/vue.min.js"></script>
		<script src="./scripts/vue-router.js"></script>
		
		<link rel="stylesheet" href="./scripts/elementindex.css">
		
		<script src="./scripts/2.15.6/elementindex.js"></script>
		<script src="./scripts/2.15.6/en.js"></script>
		
		<!--
		<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
		<script src="https://unpkg.com/element-ui@2.15.6/lib/umd/locale/en.js"></script>
		-->
		
		<script src="scripts/axiosmin.js"></script>
		
		<script src="scripts/checkuser.js"></script>
		<script src="scripts/loginout.js"></script>
		
		<style>
			.box-card {
						color: #538C21;
			  /*width: 480px;*/
			}
		</style>
	</head>
	<body style="margin: 0px;">
		<div id="app" class="homeWrap" style="background-color: #304156;">
		<el-container style="height: 100%; border: 0px solid #eee">
			
			<el-header style="height: 60px;">
				<div style="display: flex;">
					<div style="float: left;width: 60%;height: 60px;font-size: 14px;">
						<div style="color: #FFFF00;width: 100%;height: 30px;line-height: 30px;">
							<span>井名 : {{wellname}}</span>
							<span style="margin-left: 40px;">井口坐标 : (X){{X}}m (y){{Y}}m</span>
							<span style="margin-left: 40px;">当前井深 : {{WellDepth}}m</span>
							<span style="margin-left: 40px;">钻次 : {{Drilling_num}}</span>
						</div>
						<div style="color: #FFFF00;width: 100%;height: 30px;line-height: 30px;">
							<span>施工人员 : {{Servicer}}</span>
							<span style="margin-left: 40px;">工作时长 : {{Work_time}}h</span>
							<span style="margin-left: 40px;">等待时长 : {{Wait_time}}h</span>
						</div>
					</div>
					<div style="float: left;color: #FFFF00;width: 30%;height: 60px;line-height: 60px;font-size: 26px;">
						<span v-if="time_warn==1">DEES客户端系统时间异常</span>
					</div>
					<div style="float: right;width: 10%;font-size: 14px;line-height: 60px;">
						<div style="float: right;">
							<el-dropdown @command="handleCommand" class="el-dropdown-link">
							  <i class="el-icon-setting" style="margin-right: 16px"></i>
							  <el-dropdown-menu slot="dropdown" style="font-size: 12px;">
								<el-dropdown-item command='exit'>退出</el-dropdown-item>
							  </el-dropdown-menu>
							</el-dropdown>
							<span>{{onlineuser}}</span>
						</div>
					</div>
				</div>
				<!--
				<el-row :gutter="20" style="height: 60px;">
				  <el-col :span="16" :offset="4">
					  <span>井名 : </span>
					  <span>井名 : </span>
				  </el-col>
					<el-col :span="4">
						<div style="float: right; font-size: 14px;">
						<el-dropdown @command="handleCommand" class="el-dropdown-link">
						  <i class="el-icon-setting" style="margin-right: 16px"></i>
						  <el-dropdown-menu slot="dropdown" style="font-size: 12px;">
							<el-dropdown-item command='exit'>退出</el-dropdown-item>
						  </el-dropdown-menu>
						</el-dropdown>
						<span>{{onlineuser}}</span>
						</div>
					</el-col>
				</el-row>-->
			</el-header>
			
			<el-container>
				<el-main >
					<el-dialog
					  title="解码参数单位"
					  :visible.sync="dialogVisible"
					  width="30%"
					  >
					  <template>
							<div class="text item">
								<span style="margin-right: 20px;">压力</span>
								<el-radio v-model="radio1" label="1" >Mpa</el-radio>
								<el-radio v-model="radio1" label="2" >psi</el-radio>
							</div>
					  </template>
					  
					  <template>
							<div class="text item" style="margin-top: 20px;">
								<span style="margin-right: 20px;">温度</span>
								<el-radio v-model="radio2" label="1" >℃</el-radio>
								<el-radio v-model="radio2" label="2" >℉</el-radio>
							</div>
					  </template>
					  
					  <span slot="footer" class="dialog-footer">
					    <el-button @click="dialogVisible = false">取 消</el-button>
					    <el-button type="primary" @click="get_decode_value">确 认</el-button>
					  </span>
					</el-dialog>
					<!--<div>
						<el-tag effect="plain">当前井：{{curWellName}}</el-tag>
						<el-tag effect="plain" style="cursor: pointer;" @click="show_unit">解码参数单位</el-tag>
					
					</div>-->
				  <div style="display: flex;width: 100%;height: 100%;">
					<canvas id="mycanvas" ></canvas>
					<!--<canvas id="mycanvas" width="800" height="500"></canvas>-->
					<!--<canvas id="mycanvas" width="780" height="580"></canvas>-->
					<div style="display: flex;height: 100%;" class="setscroll">
						<!--<el-tag effect="plain">当前井：{{curWellName}}</el-tag>-->
						<div style="float: left;">
							<!--<el-card  class="box-card" shadow="hover" style="margin-bottom: 10px;height: 100%;" >
							  <div slot="header" class="clearfix">
							    当前井：{{curWellName}} 
							  </div>
								  <div ref="contentRef" class="content" >
								  	<div class="text item1" style="margin-bottom: 3px;">位置: 靖边 &nbsp;&nbsp; 设计井深: 3360m</div>
								  	<div class="text item1" style="margin-bottom: 3px;">预警信息:</div>
								  	<div class="text item1" style="margin-bottom: 3px;">电池编号:3570 已用时间(h):120</div>
								  	<div class="text item1" style="margin-bottom: 3px;">仪器:LHE6118 AH 已用时间(h):1220</div>
								  	<div class="text item1" style="margin-bottom: 3px;">仪器:LHE6118 AB 已用时间(h):1320</div>
								  	<div class="text item1" style="margin-bottom: 3px;">仪器:LHE6118 AG 已用时间(h):1240</div>
								  	<div class="text item1" style="margin-bottom: 3px;">仪器:LHE6118 AK 已用时间(h):1620</div>
								  	<div class="text item1" style="margin-bottom: 3px;">施工信息:</div>
								  	<div class="text item1" style="margin-bottom: 3px;">钻次: 第1趟钻 人员: 测试人员 施工时长: 116 等待时长: 24</div>
								  	<div class="text item1" style="margin-bottom: 3px;">钻次: 第2趟钻 人员: 测试人员 施工时长: 116 等待时长: 24</div>
								  	<div class="text item1" style="margin-bottom: 3px;">钻次: 第3趟钻 人员: 测试人员 施工时长: 116 等待时长: 24</div>
								  	<div class="text item1" style="margin-bottom: 3px;">钻次: 第4趟钻 人员: 测试人员 施工时长: 116 等待时长: 24</div>
								  	<div class="text item1" style="margin-bottom: 3px;">钻次: 第5趟钻 人员: 测试人员 施工时长: 116 等待时长: 24</div>
								  	<div class="text item1" style="margin-bottom: 3px;">钻次: 第6趟钻 人员: 测试人员 施工时长: 116 等待时长: 24</div>
								  	<div class="text item1" style="margin-bottom: 3px;">钻次: 第7趟钻 人员: 测试人员 施工时长: 116 等待时长: 24</div>
								  		
								  </div>
								
							</el-card>-->
						</div>
						<div class="setscroll" style="float: left;margin-left: 40px;" >
							<el-table
							style="background-color: #304156;"
							  class="setscroll"
							  :data="tableData"
							  :height=tHeight
							  border
							  :header-cell-style="{'text-align':'left'}"
							  :row-class-name="tableRowClassName"
							>
							<el-table-column
								prop="time"
								label="时间"
								width="160">
							</el-table-column>
							<!--
							<el-table-column
								v-if="false"
								prop="welldepth"
								label="井深"
								width="60">
							</el-table-column>
							-->
							<el-table-column
								prop="paraname"
								label="参数名"
								width="120"
								style='{"white-space":"nowrap";}'
								:show-overflow-tooltip="true">
							</el-table-column>
							<el-table-column
								prop="decodevalue"
								label="解码值"
								width="80">
							</el-table-column>
							<el-table-column
							  prop="unit"
							  label="单位"
							  width="80"
							  :show-overflow-tooltip="true">
							</el-table-column>
							<!--
							<el-table-column
								prop="precision"
								label="精度"
								width="50">
							</el-table-column>
							-->
							</el-table>
						</div>
						
						<div :style="{ height: tHeight + 'px' }">
							<div style="float: left;margin-left: 20px;display: inline-block;width: 30%;height: 100%;">
								<div style="height: 30%;width: 350px;">
									<div style="height: 15%;background-color: #FFFFFF;">
										<span style="line-height: 15%;vertical-align: middle;margin-left: 20px;color: rgb(15,15,15);font-size: 16px;">电池信息</span>
									</div>
									
									<div  class="setscroll" style="border: rgb(151,154,158) 3px solid;height: 85%;color: #F0F0F0;font-size: 14px;overflow-y: scroll;">
										<div v-if="nb_data.length>0" v-for="(item, index) in nb_data">
											<div style="margin-top: 10px;margin-left: 25px;">序列号 : {{item.b_code}}</div>
											<div style="margin-top: 10px;margin-left: 25px;">使用时长 : {{item.uset}}h</div>
											<div style="margin-top: 10px;margin-left: 25px;color: rgb(218,28,36);">{{item.action}}</div>
										</div>
										<div v-if="nb_data.length==0">
											<div style="margin-top: 10px;margin-left: 25px;color: #E5FF31;">暂无数据</div>
										</div>
									</div>
								</div>	
								
								
								<div style="height: 30%;width: 350px;margin-top: 20px;">
									<div style="height: 15%;background-color: #FFFFFF;">
										<span style="line-height: 15%;vertical-align: middle;margin-left: 20px;color: rgb(15,15,15);font-size: 16px;">维保信息</span>
									</div>
									<div class="setscroll" style="border: rgb(151,154,158) 3px solid;height: 85%;color: #F0F0F0;font-size: 14px;overflow-y: scroll; ">
										<div v-if="timeout_data.length>0" v-for="(item, index) in timeout_data">
											<div style="margin-top: 10px;margin-left: 25px;">序列号 : {{item.series}} {{item.instrument_id}}</div>
											<div style="margin-top: 10px;margin-left: 25px;">当次累计工作时长 : {{item.workTime}}h</div>
											<div style="margin-top: 10px;margin-left: 25px;color: rgb(218,28,36);">{{item.warn_type}}</div>
										</div>
										<div v-if="timeout_data.length==0" >
											<div style="margin-top: 10px;margin-left: 25px;color: #E5FF31;">暂无数据</div>
										</div>
									</div>
								</div>
								
								
								<div style="height: 30%;width: 350px;margin-top: 20px;">
									<div style="height: 15%;background-color: #FFFFFF;">
										<span style="line-height: 15%;vertical-align: middle;margin-left: 20px;color: rgb(15,15,15);font-size: 16px;">仪器版本信息</span>
									</div>
									<div class="setscroll" style="border: rgb(151,154,158) 3px solid;height: 85%;color: #F0F0F0;font-size: 14px;overflow-y: scroll; ">
										<div v-if="ver_data.length>0" v-for="(item, index) in ver_data">
											<div style="margin-top: 10px;margin-left: 25px;">{{item.series}} {{item.instrument_id}} 当前版本 {{item.ver}}</div>
											<div style="margin-top: 10px;margin-left: 25px;color: rgb(218,28,36);">{{item.warn_type}}</div>
										</div>
										<div v-if="ver_data.length==0" >
											<div style="margin-top: 10px;margin-left: 25px;color: #E5FF31;">暂无数据</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						
					</div>
				 </div>
				</el-main>
		</el-container>
		</el-container>
		
		<div v-show="false" style="background-color: #ffffff;height: 30px;">
			<div style="text-align: center;padding-top: 10px;font-size: 12px;">
				<span>版权所有 &#169;</span>
				<span style="color: #116699;">北京六合伟业科技股份有限公司</span>
			</div>
		</div>
		</div>
		
		<script src="scripts/realdata_ex.js"></script>
		
		<style>
		
		@font-face {
		            font-family: "Cambria"; /* 自定义字体名称 */
		            src: url("/scripts/fonts/Cambria.ttf") format("truetype"); /* 字体文件路径及格式 */
		            font-weight: normal; /* 字体粗细 */
		            font-style: normal; /* 字体样式 */
		         }
		
		.content{
			font-weight: bolder;
		        margin-top:0px;
		        height: 450px;
		        width: 100%;
		         border:1px solid #f0f0f0;
		         overflow: hidden;
		        .contentItem{
		            margin:10px 0;
		            background-color: #f0f0f0;
		            line-height:50px;
		            text-align: center;
		            cursor: pointer;
		        }
		    }
		                        
		 .container {
		      height: 100px;
		      overflow: hidden; 
		    }
		
		   /*   .content {
		      height: 120px;
		      overflow: scroll;
		    }
		
		  @keyframes moveVertically {
		      0% {
		        transform: translateY(0);
		      }
		      100% {
		        transform: translateY(-20px);
		      }
		    }*/
		
		    .item1 {
		      padding-top: 3px;
		      padding-bottom: 3px;
		      padding-left: 0rem;
		      padding-right: 0rem;
		      
		      border-spacing: 0rem;
		      font-weight: normal;
		      font-size: 14px;
		    }
			
		.text {
		  font-size: 14px;
		}
				
		.item {
		  margin-bottom: 18px;
		}
		
		.el-dropdown-link {
		   cursor: pointer;
		   color: #f8f8f8;
		 }
		
		@font-face {
		              font-family: "字体圈欣意LOGO体"; 
		              src: url(data:;base64, )
		             }
		
		.el-table .warning-row {
		    color: #ff0000;
		  }
		
		
		.el-table{
			font-family: "Microsoft YaHei",Arial,Helvetica,sans-serif,"宋体";
		}
		
		.el-table td
		{
		    border-right: 1px solid #EBEEF5;
			/*color: #4e545d;*/
			background-color: #304156;
		}
		
		.el-table td:first-child{
			border-left: 0px solid #EBEEF5;
		}
		
		.el-table td>.cell{
			padding-top: 3px;
			padding-bottom: 3px;
			padding-left: 0rem;
			padding-right: 0rem;
			
			border-spacing: 0rem;
			font-weight: normal;
			text-align: center;
			font-size: 13px;
			
			color: #9DA3AC;
		}
		
		.el-table td {
			padding-top: 0rem;
			padding-bottom: 0rem;
			padding-left: 0rem;
			padding-right: 0rem;
			border-spacing: 0rem;
		}
		
		.el-table th {
			padding-top: 0px;
			padding-bottom: 5px;
			padding-left: 0rem;
			padding-right: 0rem;
			border-spacing: 0rem;
			background-color: #304156;
		}
		
		.el-table th>.cell {
			padding: 0px;
			border-spacing: 0rem;
			/*color:#4e545d;
			font-weight: bold;*/
			
			text-align: center;
			background-color: #304156;
			color: #9DA3AC;
		}
		
			.homeWrap {
				/*position: absolute;*/
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			}
			
		  .el-header {
			background-color: rgb(112, 146, 190);
		    color: #F0F7FF;;/*color: #333;*/
		    /*line-height: 60px;*/
		  }
		  
		  .el-aside {
		    color: #333;
		  }
		  
		    .el-table__body-wrapper::-webkit-scrollbar{
		       /*width: 0;宽度为0隐藏*/
		      width: 0px;
		    }
		   .el-table__body-wrapper::-webkit-scrollbar-thumb{
		      border-radius: 2px;
		      height: 50px;
		      background: #eee;
		    }
		   .el-table__body-wrapper::-webkit-scrollbar-track{
		      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		      border-radius: 2px;
		      background: rgba(0,0,0,0.4);
		    }
		  
		  .setscroll::-webkit-scrollbar {
		    width: 0px;
		    height: 7px;
		    background-color: $eq-scroll-bg-color;
		    border-radius: 3px;
		    cursor: pointer;
		  }
		   
		  .setscroll::-webkit-scrollbar-thumb {
		    background-color: $eq-scroll-thumb-bg-color;
		    border-radius: 3px;
		  }
		  
		</style>
		
	</body>
</html>
