//组件
	var eSerivicecomponent = {
		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="请输入井名" 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="date_value"
						 type="datetimerange"
						 range-separator="至"
						 start-placeholder="开始日期"
						 end-placeholder="结束日期"
						value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
					<el-date-picker
						v-if="if_show_bt==2"
						 v-model="date_value"
						 type="datetimerange"
						 range-separator="至"
						 start-placeholder="开始日期"
						 end-placeholder="结束日期"
						 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="date_value"
						 type="datetimerange"
						 range-separator="至"
						 start-placeholder="开始日期"
						 end-placeholder="结束日期"
						 format="dd-MM-yyyy HH:mm:ss"
						value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
					
				</div>
				<div id="" style="float: left;margin-left: 5px;">
					<el-button id ="bt_serach" plain type="primary" icon="el-icon-search" @click="getWellEx(input)">搜索</el-button>
				</div>
				<div id="" style="float: left;margin-left: 5px;">
				<el-button id ="bt_export" plain type="primary" icon="el-icon-search" @click="getExCsv(input)">导出</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="井名称"
				      :width="150"
					  :show-overflow-tooltip="true">
				    </el-table-column>
				    <el-table-column
				      prop="wellstate"
				      label="井状态"
				      width="60">
				    </el-table-column>
				    <el-table-column
				      prop="welltime"
				      label="建井时间"
				     :width="170">
				    </el-table-column>
				    
				    <el-table-column
				      prop="welloperator"
				      label="操作用户"
				      :width="150"
					  :show-overflow-tooltip="true">
				    </el-table-column>
					<el-table-column
					      label="操作"
					      width="140">
					      <template slot-scope="scope">
						  <div style="flex: 1;display: inline-flex;">
							<div v-if="!scope.row.es_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>
								<el-button @click="showEs(scope.row)" type="text" size="medium">工程服务信息</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>
			  
			  <el-drawer
			    title="井况信息"
			    :visible.sync="drawer"
			    :direction="direction"
			    :before-close="handleClose"
				size='40%'
				>
			    <el-descriptions  class="margin-top" :column="2" size="medium" border :labelStyle="LS" :contentStyle="CS" style="font-size:13px">
			        <el-descriptions-item label="项目名称">{{Wellname}}</el-descriptions-item>
			        <el-descriptions-item label="服务地点">{{Locale}}</el-descriptions-item>
			        <el-descriptions-item label="服务类型">{{ServiceType}}</el-descriptions-item>
			        <el-descriptions-item label="客户名称">{{ClientName}}</el-descriptions-item>
			        <el-descriptions-item label="井队名称">{{DrillingCrewName}}</el-descriptions-item>
					<el-descriptions-item label="井队所属公司">{{DrillingCrewCompany}}</el-descriptions-item>
					<el-descriptions-item label="井型">{{Welltype}}</el-descriptions-item>
					<el-descriptions-item label="服务人员">{{OpUser}}</el-descriptions-item>
					<el-descriptions-item label="工作状态">{{WorkState}}</el-descriptions-item>
					<el-descriptions-item label="特殊状态说明">{{SpecialNote}}</el-descriptions-item>
					<el-descriptions-item label="设计井深(m)">{{DesignDepth}}</el-descriptions-item>
					<el-descriptions-item label="设计最大井斜(°)">{{WellDeviation}}</el-descriptions-item>
					<el-descriptions-item label="设计方位(°)">{{DesignOrientation}}</el-descriptions-item>
					<el-descriptions-item label="经纬度坐标(°)">{{LongitudeLatitude}}</el-descriptions-item>
					<el-descriptions-item label="井位标称值">{{GTBTDIP}}</el-descriptions-item>
					<el-descriptions-item label="水平段长度(m)">{{Length_of_horizontal_section}}</el-descriptions-item>
					<el-descriptions-item label="近钻头钻遇率(%)">{{Rate}}</el-descriptions-item>
					<el-descriptions-item label="钻次">{{DrillingTimes}}</el-descriptions-item>
					<el-descriptions-item label="仪器角差(°)">{{Instrument_angle_difference}}</el-descriptions-item>
					<el-descriptions-item label="钻具角差(°)">{{Angle_difference_of_drilling_tool}}</el-descriptions-item>
					<el-descriptions-item label="泥浆类型">{{MudType}}</el-descriptions-item>
					<el-descriptions-item label="泥浆密度(g/cm^3)">{{MudDensity}}</el-descriptions-item>
					<el-descriptions-item label="粘度(s)">{{MudViscosity}}</el-descriptions-item>
					<el-descriptions-item label="排量(L/s)">{{OutputVolume}}</el-descriptions-item>
					<el-descriptions-item label="含沙量(%)">{{Sediment_concentration}}</el-descriptions-item>
					<el-descriptions-item label="螺杆弯度(°)">{{Screw_curvature}}</el-descriptions-item>
					<el-descriptions-item label="循环时间(h)">{{LoopTime}}</el-descriptions-item>
					<el-descriptions-item label="入井井深(m)">{{EntryWellDepth}}</el-descriptions-item>
					<el-descriptions-item label="总进尺(m)">{{TotalFootage}}</el-descriptions-item>
					<el-descriptions-item v-if="if_show_t" label="最高温度(℃)">{{MaxTemp}}</el-descriptions-item>
					<el-descriptions-item v-if="!if_show_t" label="最高温度(℉)">{{MaxTemp}}</el-descriptions-item>
					<el-descriptions-item v-if="if_show_m" label="最大井底压力(MPa)">{{MaxPressure}}</el-descriptions-item>
					<el-descriptions-item v-if="!if_show_m" label="最大井底压力(psi)">{{MaxPressure}}</el-descriptions-item>
					<el-descriptions-item label="钻具组合">{{BHA}}</el-descriptions-item>
					<el-descriptions-item label="仪器组合">{{InstrumentCombination}}</el-descriptions-item>
					</el-descriptions>
			  </el-drawer>
		</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;">用户没有本菜单权限!</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:[],
		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":"80px"},
		CS:{"min-width": "150px","word-break": "break-all"},
		
		if_show0:false,
		if_show:false,
		
		if_show_bt:1,
		if_show_et:false,
		
		if_show_t:true,
		if_show_m:true,
	  }
	},
	mounted() {
		
		if (localStorage.getItem("level")==4) {
			this.$data.if_show = true;
			return;
		}
		
		this.$data.if_show0= true;
		
		console.log("mounted")
		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;
				}
				
				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/get_well_es', {
			opuser:localStorage.getItem("online_user"),
			opuser_uuid:localStorage.getItem("uuid"),
		    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);
		  });
	},
	  methods: {
		  getExCsv(_search_name){
		  	document.getElementById("bt_export").blur();
		  	
		  	var beginTime= '';
		  	var endTime = '';
		  	
		  	if (this.$data.date_value != null && this.$data.date_value.length > 1) {
		  		console.log("len:",this.$data.date_value.length)
		  		console.log("date_value:",this.$data.date_value);
		  		beginTime = this.$data.date_value[0];
		  		endTime = this.$data.date_value[1];
		  	}
		  	
		  	axios.post('deescloud/getEsCsv',{
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
		  		Wellname: _search_name,
		  		BeginTime:beginTime,
		  		EndTime:endTime
		  	}
		  	).then(function (response) {
		  		console.log(response.data);
		  		var fileid = response.data.fileId;
		  		
		  		var downUrl = 'file/'+fileid;
		  		downloadUrl("工程服务统计.xlsx",downUrl);
		  	})
		  	.catch(function (error) {
		  		console.log(error);
		  	});
		  },
		showEs(row){
			this.$data.drawer = true;
			
			var _this = this;
			axios.post('/deescloud/getEs', {
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				wellname: row.wellNameSource,
			  })
			  .then(function (response) {
			    console.log(response.data);
				let data = response.data;
				
				_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;
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
		},
		handleClose(done) {
			done();
		},
		  getWellEx(_search_name){
			  
			document.getElementById("bt_serach").blur();
		  	
		  	this.$data.currentPage=1;
			
			var beginTime= '';
			var endTime = '';
			
			if (this.$data.date_value != null && this.$data.date_value.length > 1) {
				console.log("len:",this.$data.date_value.length)
				console.log("date_value:",this.$data.date_value);
				beginTime = this.$data.date_value[0];
				endTime = this.$data.date_value[1];
			}
		  	
			var _this = this;
			
			var objs;
			axios.post('/deescloud/get_well_es', {
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				Wellname: _search_name,
			    index: this.$data.currentPage,
			    count: this.$data.pagesize,
				BeginTime:beginTime,
				EndTime:endTime
			  })
			  .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;
			  
			  var beginTime= '';
			  var endTime = '';
			  
			  if (this.$data.date_value != null && this.$data.date_value.length > 1) {
			  	console.log("len:",this.$data.date_value.length)
			  	console.log("date_value:",this.$data.date_value);
			  	beginTime = this.$data.date_value[0];
			  	endTime = this.$data.date_value[1];
			  }
			  
			  var _this = this;
			  
			  var objs;
			  axios.post('/deescloud/get_well_es', {
				  opuser:localStorage.getItem("online_user"),
				  opuser_uuid:localStorage.getItem("uuid"),
					Wellname: this.$data.input,
					index: this.$data.currentPage,
					count: this.$data.pagesize,
					BeginTime:beginTime,
					EndTime:endTime
				})
				.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;
		  
		  var beginTime= '';
		  var endTime = '';
		  
		  if (this.$data.date_value != null && this.$data.date_value.length > 1) {
		  	console.log("len:",this.$data.date_value.length)
		  	console.log("date_value:",this.$data.date_value);
		  	beginTime = this.$data.date_value[0];
		  	endTime = this.$data.date_value[1];
		  }
		  
		  var _this = this;
		  
		  var objs;
		  axios.post('/deescloud/get_well_es', {
			  opuser:localStorage.getItem("online_user"),
			  opuser_uuid:localStorage.getItem("uuid"),
					Wellname: this.$data.input,
					index: this.$data.currentPage,
					count: this.$data.pagesize,
					BeginTime:beginTime,
					EndTime:endTime
				})
				.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){
			console.log("实时数据：",row.wellID);
			
			var url = 'realdata.html?id='+row.wellNameSource;
			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'
		},
		
	  }
	}