<!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>
		<script src="scripts/exportfile.js"></script>
		<style>
			.box-card {
						color: #538C21;
			  /*width: 480px;*/
			}
		</style>
	</head>
	<body style="margin-top: 0px;margin-left: 0px;margin-right: 0px;margin-bottom: 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: 70%;height: 60px;font-size: 14px;">
						<div style="color: #FFFF00;width: 100%;height: 30px;line-height: 30px;">
							<span>Well name : {{wellname}}</span>
							<span style="margin-left: 20px;">Wellhead coordinates : (X){{X}}m (y){{Y}}m</span>
							<span style="margin-left: 20px;">Current well depth : {{WellDepth}}m</span>
							<span style="margin-left: 20px;">Drilling frequency : {{Drilling_num}}</span>
						</div>
						<div style="color: #FFFF00;width: 100%;height: 30px;line-height: 30px;">
							<span>Construction personnel : {{Servicer}}</span>
							<span style="margin-left: 20px;">Working hours : {{Work_time}}h</span>
							<span style="margin-left: 20px;">Waiting hours : {{Wait_time}}h</span>
						</div>
					</div>
					<div style="float: left;color: #FFFF00;width: 23%;height: 60px;line-height: 60px;font-size: 20px;">
						<span v-if="time_warn==1">DEES Client System Time Exception</span>
					</div>
					<div style="float: right;width: 7%;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'>Exit</el-dropdown-item>
							  </el-dropdown-menu>
							</el-dropdown>
							<span>{{onlineuser}}</span>
						</div>
					</div>
				</div>
			</el-header>
			
			<el-container>
				<el-main >
				  <div style="display: flex;width: 100%;height: 100%;">
					<div id="" style="width: 100%;">
						<div style="display: inline-block;width: 100%;">
							<div style="float: left;background-color: #ECF5FF;">
							  <el-date-picker
								v-if="if_show_bt==1"
							  	 v-model="begin_t"
							  	 type="datetime"
							  	 placeholder="Start Time"
							  	value-format="yyyy-MM-dd HH:mm:ss">
							  </el-date-picker>
							  <el-date-picker
								v-if="if_show_bt==2"
							  	 v-model="begin_t"
							  	 type="datetime"
							  	 placeholder="Start Time"
								 format="MM-dd-yyyy HH:mm:ss"
							  	value-format="yyyy-MM-dd HH:mm:ss">
							  </el-date-picker>
							  <el-date-picker
							  	v-if="if_show_bt==3"
							  	 v-model="begin_t"
							  	 type="datetime"
							  	 placeholder="Start Time"
							  	format="dd-MM-yyyy HH:mm:ss"
							  	value-format="yyyy-MM-dd HH:mm:ss">
							  </el-date-picker>
							</div>
							<div style="float: left;background-color: #ECF5FF;margin-left: 0px">
								<el-date-picker
									v-if="if_show_bt==1"
									 v-model="end_t"
									 type="datetime"
									 placeholder="End Time"
									value-format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>
								<el-date-picker
									v-if="if_show_bt==2"
									 v-model="end_t"
									 type="datetime"
									 placeholder="End Time"
									 format="MM-dd-yyyy HH:mm:ss"
									value-format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>
								<el-date-picker
									v-if="if_show_bt==3"
									 v-model="end_t"
									 type="datetime"
									 placeholder="End Time"
									 format="dd-MM-yyyy HH:mm:ss"
									value-format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>
							</div>
							<div style="float: left;margin-left: 5px">
								<el-checkbox v-model="vit" label="VSS" border style="background-color: #ecf5ff;"></el-checkbox>
							</div>
							<div style="float: left;margin-left: 5px">
								<el-checkbox v-model="checked" label="Ascending" border style="background-color: #ecf5ff;"></el-checkbox>
							</div>
							<div style="float: left;margin-left: 5px;">
								<el-button id ="bt_serach" plain type="primary" icon="el-icon-search" @click="getWellhistory()">Search</el-button>
							</div>
						</div>
						
						<div style="display: flex;width: 100%;">
							<div style="float: left;width: 73%;">
								<div style="margin-top: 5px;width: 100%;">
									<el-table
										style="background-color: #304156;"
										class="setscroll"
									    :data="tableData"
									    style="width: 100%"
									    :height="tHeight"
										border
										:row-class-name="tableRowClassName"
										>
									    <el-table-column
									      prop="time"
									      label="Time"
									      width="200">
									    </el-table-column>
									    <el-table-column
									      prop="welldepth"
									      label="Depth"
									      width="140">
									    </el-table-column>
										<el-table-column
										  prop="paraname"
										  label="Parameters"
										  width="140"
										  :show-overflow-tooltip="true">
										</el-table-column>
									    <el-table-column
									      prop="decodevalue"
									      label="Decoding Value"
									      width="140">
									    </el-table-column>
										<el-table-column
										  prop="unit"
										  label="Unit"
										  width="140"
										  :show-overflow-tooltip="true">
										</el-table-column>
									    <el-table-column
									      prop="precision"
									      label="Accuracy"
									      width="140">
									    </el-table-column>
									  </el-table>
								</div>
								
								<div class="block" style="margin-top: 10px;width: 100%;" >
								    <span class="demonstration" style="background-color: #ECF5FF;"></span>
								    <el-pagination
								      @size-change="handleSizeChange"
								      @current-change="handleCurrentChange"
								      :current-page="currentPage"
								      :page-sizes="[50,100, 200, 300]"
								      :page-size="pagesize"
								      layout="total, sizes, prev, pager, next, jumper"
								      :total="recordTotal"
									  style="background-color: #ECF5FF;">
								    </el-pagination>
								</div>
							</div>
							
							<div style="width: 20%;margin-left: 60px;">
								<div :style="{ height: tHeight1 + 'px'}">
									<div style="float: left;display: inline-block;width: 30%;height: 100%;margin-top: 5px;width: 100%;">
										<div style="height: 30%;width: 100%;">
											<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;">Battery Information</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;">Serial number : {{item.b_code}}</div>
													<div style="margin-top: 10px;margin-left: 25px;">Usage duration : {{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;">No Data</div>
												</div>
											</div>
										</div>	
										
										
										<div style="height: 30%;width: 100%;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;">Maintenance Information</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;">Serial number : {{item.series}} {{item.instrument_id}}</div>
													<div style="margin-top: 10px;margin-left: 25px;">Current working time : {{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;">No Data</div>
												</div>
											</div>
										</div>
										
										
										<div style="height: 30%;width: 100%;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;">Instrument Version Information</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}} Current Version {{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;">No Data</div>
												</div>
											</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/hisd-en.js"></script>
			
		<style>
		
		.el-table__body tr:hover>td{
		  background: #3C8DBC !important;
		  color: rgb(255,255,0);
		}
		
		.el-table th.gutter{
			display: none; 
			width: 0px;
			}
		
		.el-dropdown-link {
		   cursor: pointer;
		   color: #f8f8f8;
		 }
		
		  .text {
		    font-size: 14px;
		  }
		
		  .item {
		    margin-bottom: 18px;
		  }
		
		  .clearfix:before,
		  .clearfix:after {
		    display: table;
		    content: "";
		  }
		  .clearfix:after {
		    clear: both
		  }
		
		@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: rgb(255,255,50);
		}
		
		.el-table td {
			padding-top: 0rem;
			padding-bottom: 0rem;
			padding-left: 0rem;
			padding-right: 0rem;
			border-spacing: 0rem;
		}
		
		.el-table th {
			padding-top: 5px;
			padding-bottom: 5px;
			padding-left: 0rem;
			padding-right: 0rem;
			border-spacing: 0rem;
			background-color: #00a2e8;
		}
		
		.el-table th>.cell {
			padding: 0px;
			border-spacing: 0rem;
			/*color:#4e545d;
			font-weight: bold;*/
			
			text-align: center;
			background-color: #00a2e8;
			color: #cbee46;
		}
		
			.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: 64px;
		  }
		  
		  .el-aside {
		    color: #333;
		  }
		  
		  .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;
		  }
		  
		  .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);
		   }
		  
		</style>
		
	</body>
</html>
