	var mhsComponent_en = {
		template:`
		<div>
		<div v-show="if_show0">
			<div id="" style="display: inline-block;width: 100%;margin-top: 10px;">
				<div style="float: left;display: flex;background-color: #ECF5FF;">
					<el-input v-model="input" placeholder="Please Input Well Name" clearable style=""></el-input>
				</div>
				<div style="float: left;display: flex;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>
					<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;display: flex;">
					<el-checkbox style="background-color: #ECF5FF;margin-left: 5px;margin-right: 5px;" v-model="checked" label="Project Service" border></el-checkbox>
					<el-button id ="bt_serach" plain type="primary" icon="el-icon-search" @click="getWellEx(input)">Search</el-button>
				</div>
			</div>
			<div class="span">
				<el-table
				    :data="tableData"
				    style="width: 100%;font-size:14px"
				    :height="tHeight"
					:cell-style="{background:'#304156'}"
					border
					>
				    <el-table-column
				      prop="wellNameSource"
				      label="Well Name"
				      :width="150"
				      :show-overflow-tooltip="true">
				    </el-table-column>
				    <el-table-column
				      prop="wellstate"
				      label="Status"
				      width="80">
				    </el-table-column>
				    <el-table-column
				      prop="welltime"
				      label="Create Time"
				     :width="170">
				    </el-table-column>
				    
				    <el-table-column
				      prop="welloperator"
				      label="Users"
				      :width="150"
				      :show-overflow-tooltip="true">
				    </el-table-column>
					<el-table-column
					      label="Status"
					      width="140">
					      <template slot-scope="scope">
					        <el-button @click="handleClick(scope.row)" type="text" size="medium">Service status</el-button>
					      </template>
					    </el-table-column>
				  </el-table>
			</div>
			
			<div class="block">
			    <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 v-show="if_show" style="text-align: center; width: 100%;;font-size: 14px;">
		  <el-tag type="warning" style="width: 100%;height: 50px;font-size: 14px;">The user does not have permission for this menu!</el-tag>
		</div>
		</div>
		`,
	data(){
		// 获取当前屏幕的分辨率
		let screenW = window.screen.width;
		let screenH = window.innerHeight;
		console.log("screen width:",screenW);
		console.log("screen height:",screenH);
	  return {
		tHeight:screenH-192,
		tableData: Array(0),
		input:'',
		currentPage: 1,
		pagesize:50,
		recordTotal:0,
		date_value:[],
		begin_t:'',
		end_t:'',
		
		if_show0:false,
		if_show:false,
		
		checked:false,
		
		if_show_bt:1,
		if_show_et:false,
	  }
	},
	mounted() {
		
		if (localStorage.getItem("level")==4) {
			this.$data.if_show = true;
			return;
		}
		this.$data.if_show0= true;
		
		var _this = this;
		
		axios.post('/deescloud/get_page_setting', {
			opuser:localStorage.getItem("online_user"),
			opuser_uuid:localStorage.getItem("uuid"),
		  })
		  .then(function (response) {
				if(response.data.r3=="1"){
					_this.$data.if_show_bt=1;
					//_this.$data.if_show_et=false;
				}else if(response.data.r3=="2"){
					//_this.$data.if_show_et=true;
					_this.$data.if_show_bt=2;
				}else if(response.data.r3=="3"){
					//_this.$data.if_show_et=true;
					_this.$data.if_show_bt=3;
				}else{
					_this.$data.if_show_bt=1;
				}
		  })
		  .catch(function (error) {
		    console.log(error);
		  });
		
		var objs;
		axios.post('/deescloud/getWellEx1_en', {
			opuser:localStorage.getItem("online_user"),
			opuser_uuid:localStorage.getItem("uuid"),
		    index: this.$data.currentPage,
		    count: this.$data.pagesize,
			checked:this.$data.checked
		  })
		  .then(function (response) {
		    console.log(response.data);
			objs = response.data.data;
			rcnt = response.data.total;
			_this.$data.tableData = objs;
			_this.$data.recordTotal = rcnt;
		  })
		  .catch(function (error) {
		    console.log(error);
		  });
	},
	  methods: {
		  
		handleClose(done) {
			done();
		},
		  getWellEx(_search_name){
			  
			document.getElementById("bt_serach").blur();
		  	
		  	this.$data.currentPage=1;
			
			if (this.$data.begin_t != '' && this.$data.end_t != '' && this.$data.begin_t>this.$data.end_t) {
				this.$message({
					message: 'The end time must be after the start time!',
					type: 'warning',
					duration: 1500
				});
				return;
			}
			
			var _this = this;
			
			var objs;
			axios.post('/deescloud/getWellEx1_en', {
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				Wellname: _search_name,
			    index: this.$data.currentPage,
			    count: this.$data.pagesize,
				BeginTime:this.$data.begin_t,
				EndTime:this.$data.end_t,
				checked:this.$data.checked
			  })
			  .then(function (response) {
			    console.log(response.data);
				objs = response.data.data;
				rcnt = response.data.total;
				_this.$data.tableData = objs;
				_this.$data.recordTotal = rcnt;
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
			
		  },
		  
		handleSizeChange(val) {
			  //console.log(`每页 ${val} 条`);
			  this.$data.pagesize = val;
			  this.$data.currentPage = 1;
			  if (this.$data.begin_t != '' && this.$data.end_t != '' && this.$data.begin_t>this.$data.end_t) {
			  	this.$message({
			  		message: 'The end time must be after the start time!',
			  		type: 'warning',
			  		duration: 1500
			  	});
			  	return;
			  }
			  
			  var _this = this;
			  
			  var objs;
			  axios.post('/deescloud/getWellEx1_en', {
				  opuser:localStorage.getItem("online_user"),
				  opuser_uuid:localStorage.getItem("uuid"),
					Wellname: this.$data.input,
					index: this.$data.currentPage,
					count: this.$data.pagesize,
					BeginTime:this.$data.begin_t,
					EndTime:this.$data.end_t,
					checked:this.$data.checked
				})
				.then(function (response) {
				  console.log(response.data);
				objs = response.data.data;
				rcnt = response.data.total;
				_this.$data.tableData = objs;
				_this.$data.recordTotal = rcnt;
				})
				.catch(function (error) {
				  console.log(error);
				});
		},
		handleCurrentChange(val) {
		  //console.log(`当前页: ${val}`);
		  this.$data.currentPage = val;
		  
		 if (this.$data.begin_t != '' && this.$data.end_t != '' && this.$data.begin_t>this.$data.end_t) {
		 	this.$message({
		 		message: 'The end time must be after the start time!',
		 		type: 'warning',
		 		duration: 1500
		 	});
		 	return;
		 }
		  
		  var _this = this;
		  
		  var objs;
		  axios.post('/deescloud/getWellEx1_en', {
			  opuser:localStorage.getItem("online_user"),
			  opuser_uuid:localStorage.getItem("uuid"),
					Wellname: this.$data.input,
					index: this.$data.currentPage,
					count: this.$data.pagesize,
					BeginTime:this.$data.begin_t,
					EndTime:this.$data.end_t,
					checked:this.$data.checked
				})
				.then(function (response) {
				  console.log(response.data);
				objs = response.data.data;
				rcnt = response.data.total;
				_this.$data.tableData = objs;
				_this.$data.recordTotal = rcnt;
				})
				.catch(function (error) {
				  console.log(error);
				});
		},
		
		handleClick(row){
			var url = 'mhs-en.html?id='+row.wellNameSource+'&sid='+row.wellstate+'&iid='+row.welloperator;
			url = encodeURI(url);
			window.open(url, "");
		},
		
	  }
	}