var WellHistorycomponent_en = {
		template:`
		<div style="height: 100%;width: 100%;">
		<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 ></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"
						 format="yyyy-MM-dd HH:mm:ss"
						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;display: flex;background-color: #ECF5FF;">
					<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 style="background-color: #ECF5FF;" v-model="checked" label="Project Service" border></el-checkbox>
				</div>
				<div style="float: left;margin-left: 5px;">
					<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"
				    :height="tHeight"
				    style="font-size:14px;overflow-y: auto;"
					: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="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="150">
					      <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>
							  <el-button @click="handleClick(scope.row)" type="text" size="medium">Data details</el-button>
							  <el-button @click="exportWellHis(scope.row)" type="text" size="medium">Export</el-button>
						  </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>
		</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>
		
		<el-dialog
		  title="Decoding Parameter Units"
		  :visible.sync="dialogVisible"
		  width="30%"
		  >
		  <template>
				<div class="text item">
					<span style="margin-right: 20px;">Pressure</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;">Temperature</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">Cancel</el-button>
		    <el-button type="primary" @click="export_his">Ok</el-button>
		  </span>
		</el-dialog>
		</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,
		
		dialogVisible:false,
		sel_wellname:'',
		radio1:'1',
		radio2:'1',
		
		if_show_bt:1,
		if_show_et:false,
		checked: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/get_well_history_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: {
		export_his(){
			this.$data.dialogVisible=false;
			
			var _this = this;
			
			axios.post('deescloud/exportWellHistory_en',{
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				id: this.$data.sel_wellname,
				if_asc:false,
				r1:this.$data.radio1,
				r2:this.$data.radio2,
			},
			).then(function (response) {
				console.log(response.data);
				var fileid = response.data.fileId;
				
				var downUrl = 'file/'+fileid;
				downloadUrl(_this.$data.sel_wellname+".csv",downUrl);
			})
			.catch(function (error) {
				console.log(error);
			});
		},
		
		exportWellHis(row){
			this.$data.sel_wellname = row.wellNameSource;
			
			this.export_his();
			//this.$data.dialogVisible=true;
		},
		  
		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 later than start time!',
					type: 'warning',
					duration: 1500
				});
				return;
			}

			var _this = this;

			var objs;
			axios.post('/deescloud/get_well_history_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;
			  
			  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 later than start time!',
			  		type: 'warning',
			  		duration: 1500
			  	});
			  	return;
			  }
			  
			  var _this = this;
			  
			  var objs;
			  axios.post('/deescloud/get_well_history_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 later than start time!',
		 		type: 'warning',
		 		duration: 1500
		 	});
		 	return;
		 }
		  
		  var _this = this;
		  
		  var objs;
		  axios.post('/deescloud/get_well_history_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 = 'hisd-en.html?id='+row.wellNameSource+'&sid='+row.wellstate+'&iid='+row.welloperator;
			url = encodeURI(url);
			window.open(url, "");
		},
		
		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'
		},
		
	  }
	}