var Wellcomponent_en = {
		template:`
		<div>
			<el-tag v-show="if_show_tag" style="text-align: center;width: 100%;margin-top: 10px;">
				  <marquee>
					  <i class="el-icon-coin"></i>
					  <span>Online:&nbsp;{{online_num}} Wells</span>
					  <span style="margin-right: 5px;"></span>
					  <i class="el-icon-coin"></i>
					  <span>Offline:&nbsp;{{offline_num}} Wells</span>
					  <span style="margin-right: 10px;"></span>
					  <i class="el-icon-connection"></i>
					  <span>Well(online) type:&nbsp;</span>
					  <span>MWD:&nbsp;{{mwd}} Wells</span>
					  <span>Near-bit:&nbsp;{{near_bit}} Wells </span>
					  <span>LWD:&nbsp;{{resistivity}} Wells </span>
					  <span>Probe-based Azimuth Gamma:&nbsp;{{gamma1}} Wells </span>
					  <span>Collar-based Azimuth Gamma:&nbsp;{{gamma2}} Wells </span>
					   <span>&nbsp;{{context}}</span>
				  </marquee>
			</el-tag>
			
			<div style="display: flex;">
				<el-input v-model="input" placeholder="Please Input Well Name" clearable style="width: 30%;"></el-input>
				<el-button style="margin-left: 5px;" id ="bt_serach" plain type="primary" icon="el-icon-search" @click="getWell(input)">Search</el-button>
			</div>
			<div class="span">
				<el-table
				    :data="tableData"
				    style="width: 100%;font-size:14px;background-color: #304156;"
				    :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="wellName"
					  label="Well No."
					  :width="120">
					</el-table-column>
				    <el-table-column
				      prop="wellstate"
				      label="Status"
				      width="100">
				    </el-table-column>
				    <el-table-column
				      prop="welltime"
				      label="Upload 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="Operation"
					      width="230">
					      <template slot-scope="scope">
						  <div style="flex: 1;display: inline-flex;">
						  	<div v-if="!scope.row.rt_flag">
						  		<svg  style="bottom: 5px;" t="1683783351758" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2560" width="8" height="8"><path d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z" fill="#d81e06" p-id="2561"></path></svg>
						  	</div>
							<div style="margin-right: 10px">
								<el-button @click="handleClick(scope.row)" type="text" size="medium">Real time data</el-button>
							</div>
							<div v-if="!scope.row.es_flag && if_show">
								<svg  t="1683783351758" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2560" width="8" height="8"><path d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z" fill="#d81e06" p-id="2561"></path></svg>
							</div>
							<div>
								<el-button v-show="if_show" @click="showWorkingCondition(scope.row)" type="text" size="medium">Well information</el-button>
							</div>
							
					      </div>
						  </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>
			  <!--<marquee><font size=+3 color=red>Hello, World</font></marquee>-->
			  
			  
			  <el-drawer
			    title="Well information"
			    :visible.sync="drawer"
			    :direction="direction"
			    :before-close="handleClose"
			  				size='55%'
			  				>
			    <el-descriptions  class="margin-top" :column="2" size="medium" border :labelStyle="LS" :contentStyle="CS" style="font-size:13px">
			        <el-descriptions-item label="Well Name">{{Wellname}}</el-descriptions-item>
			        <el-descriptions-item label="Service Location">{{Locale}}</el-descriptions-item>
			        <el-descriptions-item label="Service Type">{{ServiceType}}</el-descriptions-item>
			        <el-descriptions-item label="Customer">{{ClientName}}</el-descriptions-item>
			        <el-descriptions-item label="Rig Name">{{DrillingCrewName}}</el-descriptions-item>
					<el-descriptions-item label="Well Team Company">{{DrillingCrewCompany}}</el-descriptions-item>
					<el-descriptions-item label="Well Type">{{Welltype}}</el-descriptions-item>
					<el-descriptions-item label="Personnel">{{OpUser}}</el-descriptions-item>
					<el-descriptions-item label="Work Status">{{WorkState}}</el-descriptions-item>
					<el-descriptions-item label="Special Comments">{{SpecialNote}}</el-descriptions-item>
					<el-descriptions-item label="Planned Measured Depth(m)">{{DesignDepth}}</el-descriptions-item>
					<el-descriptions-item label="Planned Max Inclination(°)">{{WellDeviation}}</el-descriptions-item>
					<el-descriptions-item label="Planned Azimuth(°)">{{DesignOrientation}}</el-descriptions-item>
					<el-descriptions-item label="Longitude & Latitude Coordinates(°)">{{LongitudeLatitude}}</el-descriptions-item>
					<el-descriptions-item label="Geodetic Coordinates X">{{report_longitude_x}}</el-descriptions-item>
					<el-descriptions-item label="Geodetic Coordinates Y">{{report_latitude_y}}</el-descriptions-item>
					<el-descriptions-item label="Nominal Value">{{GTBTDIP}}</el-descriptions-item>
					<el-descriptions-item label="Horizontal Section Length(m)">{{Length_of_horizontal_section}}</el-descriptions-item>
					<el-descriptions-item label="Drilling Rate Of Near-bit(%)">{{Rate}}</el-descriptions-item>
					<el-descriptions-item label="Trip Number">{{DrillingTimes}}</el-descriptions-item>
					<el-descriptions-item label="Tool Mounting Offset(°)">{{Instrument_angle_difference}}</el-descriptions-item>
					<el-descriptions-item label="Drill Assembly Offset(°)">{{Angle_difference_of_drilling_tool}}</el-descriptions-item>
					<el-descriptions-item label="Mud Type">{{MudType}}</el-descriptions-item>
					<el-descriptions-item label="Mud Density(g/cm^3)">{{MudDensity}}</el-descriptions-item>
					<el-descriptions-item label="Viscosity(s)">{{MudViscosity}}</el-descriptions-item>
					<el-descriptions-item label="Flow Rate(L/s)">{{OutputVolume}}</el-descriptions-item>
					<el-descriptions-item label="Sand Content(%)">{{Sediment_concentration}}</el-descriptions-item>
					<el-descriptions-item label="Mud Motor Bend Angle(°)">{{Screw_curvature}}</el-descriptions-item>
					<el-descriptions-item label="Circulation Hours(h)">{{LoopTime}}</el-descriptions-item>
					<el-descriptions-item label="Initial Depth(m)">{{EntryWellDepth}}</el-descriptions-item>
					<el-descriptions-item label="Total Footage(m)">{{TotalFootage}}</el-descriptions-item>
					<el-descriptions-item v-if="if_show_t" label="Max. Temperature(℃)">{{MaxTemp}}</el-descriptions-item>
					<el-descriptions-item v-if="!if_show_t" label="Max. Temperature(℉)">{{MaxTemp}}</el-descriptions-item>
					<el-descriptions-item v-if="if_show_m" label="Max Bottomhole Pressure(MPa)">{{MaxPressure}}</el-descriptions-item>
					<el-descriptions-item v-if="!if_show_m" label="Max Bottomhole Pressure(psi)">{{MaxPressure}}</el-descriptions-item>
					<el-descriptions-item label="BHA">{{BHA}}</el-descriptions-item>
					<el-descriptions-item label="Tool Assembly">{{InstrumentCombination}}</el-descriptions-item>
					</el-descriptions>
			  </el-drawer>
		</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-31,
		tableData: Array(0),
		input:'',
		currentPage: 1,
		pagesize:50,
		recordTotal:0,
		
		/*Wellname:"",
		Welltype:"",
		OpUser:"",
		DrillingTimes:"",
		MudType:"",
		MudDensity:"",
		MudViscosity:"",
		OutputVolume:"",
		Sediment_concentration:"",
		WellDepth:"",*/
		report_longitude:"",
		report_latitude:"",
		report_longitude_x:"",
		report_latitude_y:"",
		
		if_show:true,
		online_num:0,
		offline_num:0,
		mwd:0,
		near_bit:0,
		resistivity:0,
		gamma1:0,
		gamma2:0,
		context:'',
		if_show_tag:false,
		
		drawer:false,
		direction: 'rtl',
		Wellname:'',
		Locale:'',
		ServiceType:'',
		ClientName:'',
		DrillingCrewName:'',
		DrillingCrewCompany:'',
		Welltype:'',
		OpUser:'',
		WorkState:'',
		SpecialNote:'',
		DesignDepth:'',
		WellDeviation:'',
		DesignOrientation:'',
		LongitudeLatitude:'',
		GTBTDIP:'',
		Length_of_horizontal_section:'',
		Rate:'',
		DrillingTimes:'',
		Instrument_angle_difference:'',
		Angle_difference_of_drilling_tool:'',
		MudType:'',
		MudDensity:'',
		MudViscosity:'',
		OutputVolume:'',
		Sediment_concentration:'',
		Screw_curvature:'',
		LoopTime:'',
		EntryWellDepth:'',
		TotalFootage:'',
		BHA:'',
		InstrumentCombination:'',
		MaxTemp:'',
		MaxPressure:'',
		
		LS:{"width":"200px"},
		CS:{"min-width": "200px","word-break": "break-all"},
		
		if_show_t:true,
		if_show_m:true,
	  }
	},
	mounted() {
		
		if (localStorage.getItem("level")==4) {
			this.$data.if_show = false;
		}
		
		this.$data.if_show_tag = 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.r1=="2"){
					_this.$data.if_show_m=false;
				}
				
				if(response.data.r2 =="2"){
					_this.$data.if_show_t=false;
				}
		  })
		  .catch(function (error) {
		    console.log(error);
		  });
		
		var objs;
		axios.post('/deescloud/getWell_en', {
			opuser:localStorage.getItem("online_user"),
			opuser_uuid:localStorage.getItem("uuid"),
			id: "",
		    index: this.$data.currentPage,
		    count: this.$data.pagesize
		  })
		  .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);
		  });
		  
		  axios.post('/deescloud/getWellAnalysisResult_en')
		    .then(function (response) {
		      console.log(response.data);
		  	_this.$data.online_num = response.data.well_online;
		  	_this.$data.offline_num = response.data.well_offline;
			_this.$data.mwd = response.data.mwd;
			_this.$data.near_bit = response.data.near_bit;
			_this.$data.resistivity = response.data.resistivity;
			_this.$data.gamma1 = response.data.gamma1;
			_this.$data.gamma2 = response.data.gamma2;
			_this.$data.context= response.data.context;
		    })
		    .catch(function (error) {
		      console.log(error);
		    });
	},
	  methods: {
		showWorkingCondition(row){
			this.$data.drawer = true;
			
			var _this = this;
			axios.post('/deescloud/getWellWorkingCondition', {
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				wellname: row.wellNameSource,
			  })
			  .then(function (response) {
			    console.log(response.data);
				let data = response.data.es;
				
				_this.$data.Wellname=data.Wellname;
				_this.$data.Locale=data.Locale;
				_this.$data.ServiceType=data.ServiceType;
				_this.$data.ClientName=data.ClientName;
				_this.$data.DrillingCrewName=data.DrillingCrewName;
				_this.$data.DrillingCrewCompany=data.DrillingCrewCompany;
				_this.$data.Welltype=data.Welltype;
				_this.$data.OpUser=data.OpUser;
				_this.$data.WorkState=data.WorkState;
				_this.$data.SpecialNote=data.SpecialNote;
				_this.$data.DesignDepth=data.DesignDepth;
				_this.$data.WellDeviation=data.WellDeviation;
				_this.$data.DesignOrientation=data.DesignOrientation;
				_this.$data.LongitudeLatitude=data.LongitudeLatitude;
				_this.$data.GTBTDIP=data.GTBTDIP;
				_this.$data.Length_of_horizontal_section=data.Length_of_horizontal_section;
				_this.$data.Rate=data.Rate;
				_this.$data.DrillingTimes=data.DrillingTimes;
				_this.$data.Instrument_angle_difference=data.Instrument_angle_difference;
				_this.$data.Angle_difference_of_drilling_tool=data.Angle_difference_of_drilling_tool;
				_this.$data.MudType=data.MudType;
				_this.$data.MudDensity=data.MudDensity;
				_this.$data.MudViscosity=data.MudViscosity;
				_this.$data.OutputVolume=data.OutputVolume;
				_this.$data.Sediment_concentration=data.Sediment_concentration;
				_this.$data.Screw_curvature=data.Screw_curvature;
				_this.$data.LoopTime=data.LoopTime;
				_this.$data.EntryWellDepth=data.EntryWellDepth;
				_this.$data.TotalFootage=data.TotalFootage;
				_this.$data.BHA=data.BHA;
				_this.$data.InstrumentCombination=data.InstrumentCombination;
				_this.$data.MaxTemp = data.MaxTemp;
				_this.$data.MaxPressure = data.MaxPressure;
				
				_this.$data.report_longitude_x =  response.data.report_longitude_x;
				_this.$data.report_latitude_y =  response.data.report_latitude_y;
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
		},
		handleClose(done) {
			done();
		},
		  getWell(_search_name){
			  
			document.getElementById("bt_serach").blur();
		  	
		  	this.$data.currentPage=1;
		  	
			var _this = this;
			
			var objs;
			axios.post('/deescloud/getWell_en', {
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				id: _search_name,
			    index: this.$data.currentPage,
			    count: this.$data.pagesize
			  })
			  .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);
			  });
			
			axios.post('/deescloud/getWellAnalysisResult_en')
			  .then(function (response) {
			    console.log(response.data);
				_this.$data.online_num = response.data.well_online;
				_this.$data.offline_num = response.data.well_offline;
						_this.$data.mwd = response.data.mwd;
						_this.$data.near_bit = response.data.near_bit;
						_this.$data.resistivity = response.data.resistivity;
						_this.$data.gamma1 = response.data.gamma1;
						_this.$data.gamma2 = response.data.gamma2;
						_this.$data.context= response.data.context;
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
		  },
		  
		handleSizeChange(val) {
			  //console.log(`每页 ${val} 条`);
			  this.$data.pagesize = val;
			  
			  var _this = this;
			  
			  var objs;
			  axios.post('/deescloud/getWell_en', {
				  opuser:localStorage.getItem("online_user"),
				  opuser_uuid:localStorage.getItem("uuid"),
					id: this.$data.input,
					index: this.$data.currentPage,
					count: this.$data.pagesize
				})
				.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);
				});
				
			axios.post('/deescloud/getWellAnalysisResult_en')
			  .then(function (response) {
			    console.log(response.data);
				_this.$data.online_num = response.data.well_online;
				_this.$data.offline_num = response.data.well_offline;
						_this.$data.mwd = response.data.mwd;
						_this.$data.near_bit = response.data.near_bit;
						_this.$data.resistivity = response.data.resistivity;
						_this.$data.gamma1 = response.data.gamma1;
						_this.$data.gamma2 = response.data.gamma2;
						_this.$data.context= response.data.context;
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
		},
		handleCurrentChange(val) {
		  //console.log(`当前页: ${val}`);
		  this.$data.currentPage = val;
		  
		  var _this = this;
		  
		  var objs;
		  axios.post('/deescloud/getWell_en', {
			  opuser:localStorage.getItem("online_user"),
			  opuser_uuid:localStorage.getItem("uuid"),
					id: this.$data.input,
					index: this.$data.currentPage,
					count: this.$data.pagesize
				})
				.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);
				});
				
			axios.post('/deescloud/getWellAnalysisResult_en')
			  .then(function (response) {
			    console.log(response.data);
				_this.$data.online_num = response.data.well_online;
				_this.$data.offline_num = response.data.well_offline;
						_this.$data.mwd = response.data.mwd;
						_this.$data.near_bit = response.data.near_bit;
						_this.$data.resistivity = response.data.resistivity;
						_this.$data.gamma1 = response.data.gamma1;
						_this.$data.gamma2 = response.data.gamma2;
						_this.$data.context= response.data.context;
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
		},
		
		handleClick(row){
			console.log("实时数据：",row.wellID);
			
			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.r5=="2"){
					var url = 'realdata-en.html?id='+row.wellNameSource;
					url = encodeURI(url);
					window.open(url, "");
				}else{
					var url = 'realdata_ex-en.html?id='+row.wellNameSource;
					url = encodeURI(url);
					window.open(url, "");
				}
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
		},
		
		flexColumnWidth(str, tableData, flag = 'max') {
		  // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
		  // flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'
		  // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
		  
		  let maxContext = new Array();
		  
		  str = str + ''
		  let columnContent = ''
		  if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
		    return '120px'
		  }
		  if (!str || !str.length || str.length === 0 || str === undefined) {
		    return '120px'
		  }
		  if (flag === 'equal') {
		    // 获取该列中第一个不为空的数据(内容)
		    for (let i = 0; i < tableData.length; i++) {
		      if (tableData[i][str].length > 0) {
		        // console.log('该列数据[0]:', tableData[0][str])
		        columnContent = tableData[i][str]
		        break
		      }
		    }
		  } else {
		    // 获取该列中最长的数据(内容)
		    let index = 0
		    for (let i = 0; i < tableData.length; i++) {
		      if (tableData[i][str] === null) {
		        return
		      }
		      const now_temp = tableData[i][str] + ''
		      const max_temp = tableData[index][str] + ''
		      if (now_temp.length >= max_temp.length) {
		        index = i
		      }
		    }
		    columnContent = tableData[index][str]
			
			maxContext.push(columnContent);
		  }
		  // console.log('该列数据[i]:', columnContent)
		  // 以下分配的单位长度可根据实际需求进行调整
		  
		  //console.log(columnContent);
		  let max_flex_width = 0
		  
		  for (let i = 0; i < maxContext.length; i++) {
			let flexWidth = 0;
		  	for (const char of maxContext[i]) {
		  	  if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
		  	    // 如果是英文字符，为字符分配8个单位宽度
		  	    flexWidth += 8
		  	  } else if (char >= '\u4e00' && char <= '\u9fa5') {
		  	    // 如果是中文字符，为字符分配15个单位宽度
		  	    flexWidth += 15
		  	  } else {
		  	    // 其他种类字符，为字符分配8个单位宽度
		  	    flexWidth += 8
		  	  }
		  	}
			
			if (flexWidth>max_flex_width) {
				max_flex_width = flexWidth;
				console.log(maxContext[i]);
			}
		  }
		  
		  if (max_flex_width < 120) {
		    // 设置最小宽度
		    max_flex_width = 120
		  }
			if (max_flex_width > 300) {
			 // 设置最大宽度
			 max_flex_width = 300
			}
		  
		  //flexWidth = flexWidth;//20-padding
		  console.log("max_flex_width:",max_flex_width);
		  return max_flex_width + 'px'
		},
		
	  }
	}