var Welltypecomponent_en = {
		template:`
		<div>
		<div v-show="if_show0">
				<div style="display: inline-block;width: 100%;margin-top: 10px;">
					<div style="float: left;width: 20%;background-color: #ECF5FF;">
						<el-input v-model="input" placeholder="Please Input Well Name" clearable></el-input>
					</div>
					<div style="float: left;background-color: #ECF5FF;">
						<el-select v-model="value" multiple collapse-tags filterable clearable placeholder="Choose The Well Type" >
							<el-option
							  v-for="item in options"
							  :key="item.value"
							  :label="item.label"
							  :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div style="float: left;background-color: #ECF5FF;">
						<el-date-picker
							v-if="if_show_bt==1"
							 v-model="date_value"
							 type="datetimerange"
							 range-separator="to"
							 start-placeholder="Upload Start Time"
							 end-placeholder="Upload End Time"
							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="to"
							 start-placeholder="Upload Start Time"
							 end-placeholder="Upload 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="date_value"
							 type="datetimerange"
							 range-separator="to"
							 start-placeholder="Upload Start Time"
							 end-placeholder="Upload 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-button id ="bt_serach" plain type="primary" icon="el-icon-search" @click="getWellTestType(input)">Search </el-button>
					</div>
					<div style="float: left;margin-left: 5px;">
						<el-button id ="bt_export_welltype" plain type="primary" icon="el-icon-document" @click="exportWellTestType()">Export</el-button>
					</div>
				</div>
			<div class="span">
				<el-table
				    :data="tableData"
				    style="width: 100%"
				    :height="tHeight"
					:cell-style="{background:'#304156'}"
					border
					>
				    <el-table-column
				      prop="wellname"
				      label="Well Name"
				      width="150"
					  :show-overflow-tooltip="true">
				    </el-table-column>
				    <el-table-column
				      prop="type"
				      label="Type"
				      width="200"
				      :show-overflow-tooltip="true">
				    </el-table-column>
							  
							  <el-table-column
							    prop="well_create_time"
							    label="Upload Time"
							    :width="170">
							  </el-table-column>
							        <el-table-column
                  label="Operation"
                  :width="200">
                   <template slot-scope="scope">
						<el-button 
							v-if="scope.row.type.includes('VSS')"
							type="text" 
							size="small" 
							@click="showReportDialog(scope.row)">
							Vibration Report
						</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),
			currentPage: 1,
			pagesize:50,
			recordTotal:0,
			input:'',
			options: [{
				  value: 0,
				  label: 'Inclination'
				}, {
				  value: 1,
				  label: 'Near-bit'
				}, {
				  value: 2,
				  label: 'LWD'
				}, {
				  value: 3,
				  label: 'Probe-based Azimuth Gamma'
				}, {
				  value: 4,
				  label: 'Collar-based Azimuth Gamma',
				},
				{
				  value: 5,
				  label: 'Natural Gamma',
				},
				{
				  value: 6,
				  label: 'DDM',
				},
				{
				  value: 7,
				  label: 'VSS',
				}
			],
			value: [],
			date_value:[],
			if_show0:false,
			if_show:false,
			
			if_show_bt:1,
			if_show_et:false,
		  }
		},
		mounted() {
			if (localStorage.getItem("level")==4) {
				this.$data.if_show = true;
				return;
			}
			
			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);
			  });
			
			this.$data.if_show0= true;
			
			this.$data.currentPage = 1;
			
			var objs;
			axios.post('/deescloud/getwtt_en', {
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				wellname: '',
			    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: {
			showReportDialog(row) {
    this.$confirm(
        '<br/><br/>',
        '📊 Report Export',  // Title
        {
            dangerouslyUseHTMLString: true,
            confirmButtonText: 'Generate Decoding Report',
            cancelButtonText: 'Generate Storage Report',
            distinguishCancelAndClose: true,
            // type: 'success',
            center: true,
            customClass: 'report-confirm'
        }
    ).then(() => {
        this.export_pdf(row, false);
    }).catch(action => {
        if (action === 'cancel') {
            this.export_pdf(row, true);
        }
    });
},
export_pdf(row, is_memory = false) {
    const loading = this.$loading({
        lock: true,
        text: 'Generating report...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });

    axios.post('deescloud/get_vibration_report_pdf', {
        opuser: localStorage.getItem("online_user"),
        opuser_uuid: localStorage.getItem("uuid"),
        wellname: row.wellname,
        is_memory: is_memory
    })
    .then(response => {
        loading.close();
        const fileid = response.data.fileId;
        // downloadUrl(`${row.wellname}-Vibration Report.pdf`, `file/${fileid}`);
		const filename = is_memory ? `${row.wellname}_Vibration Stick-Slip Storage Report.pdf` : `${row.wellname}_Vibration Stick-Slip Decoding Report.pdf`;
		downloadUrl(filename, `file/${fileid}`);
    
    })
    .catch(error => {
        loading.close();
        console.log(error);
        this.$notify.error({
            title: 'Export Failed',
            message: 'Please check your network or contact administrator',
            duration: 5000
        });
    }); 
},

		// 	showReportDialog(row) {
		// 		this.$confirm('Please select report type .', 'Report Export', {
		// 			confirmButtonText: 'Real-time Decoding Report',
		// 			cancelButtonText: 'Stored Data Report',
		// 			distinguishCancelAndClose: true,
		// 			type: 'info'
		// 		}).then(() => {
		// 			// Clicked Real-time Decoding Report (false)
		// 			this.export_pdf(row, false);
		// 		}).catch(action => {
		// 			if (action === 'cancel') {
		// 			// Clicked Stored Data Report (true)
		// 			this.export_pdf(row, true);
		// 			}
		// 		});
		// 		},

		// 	export_pdf(row, is_memory = false) {
        //         var _this = this;
        //         axios.post('deescloud/get_vibration_report_pdf', {
        //             opuser: localStorage.getItem("online_user"),
        //             opuser_uuid: localStorage.getItem("uuid"),
        //             wellname: row.wellname,
        //             is_memory: is_memory  // 使用传入的参数
        //         })
        //         .then(function (response) {
        //             console.log(response.data);
        //             var fileid = response.data.fileId;
        //             var downUrl = 'file/' + fileid;
        //             downloadUrl(row.wellname + "-Vibration Report.pdf", downUrl);
        //         })
        //         .catch(function (error) {
        //             console.log(error);
        //         });
        // },

		  exportWellTestType(){
			document.getElementById("bt_export_welltype").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];
			}
			
			var type =0 ;
			console.log("---",this.$data.value);
			if (this.$data.value.length != 0) {
				
				var len = this.$data.value.length;
				for (var i = 0; i< len; i++) {
					type = type+(1<<this.$data.value[i]);
				}
			}
			
			axios.post('deescloud/getWellTypeCsv_en',{
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				wellname: this.$data.input,
				type:type,
				beginTime:beginTime,
				endTime:endTime
			}
			).then(function (response) {
				console.log(response.data);
				var fileid = response.data.fileId;
				
				var downUrl = 'file/'+fileid;
				downloadUrl("Logging-type-statistics.csv",downUrl);
			})
			.catch(function (error) {
				console.log(error);
			});
		  },
		
		  getWellTestType(_search_name){
			document.getElementById("bt_serach").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];
			}
			
			var type =0 ;
			console.log("---",this.$data.value);
			if (this.$data.value.length != 0) {
				
				var len = this.$data.value.length;
				for (var i = 0; i< len; i++) {
					type = type+(1<<this.$data.value[i]);
				}
			}
			
			console.log("req type:",type);
			  
			this.$data.currentPage = 1;
		  	
			var _this = this;
			var objs;
			axios.post('/deescloud/getwtt_en', {
				opuser:localStorage.getItem("online_user"),
				opuser_uuid:localStorage.getItem("uuid"),
				wellname: _search_name,
				type:type,
			    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) {
			  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 type =0 ;
			  console.log("---",this.$data.value);
			  if (this.$data.value.length != 0) {
			  	
			  	var len = this.$data.value.length;
			  	for (var i = 0; i< len; i++) {
			  		type = type+(1<<this.$data.value[i]);
			  	}
			  }
			  
			  console.log("req type:",type);
			  
			  var _this = this;
			  
			  var objs;
			  axios.post('/deescloud/getwtt_en', {
				  opuser:localStorage.getItem("online_user"),
				  opuser_uuid:localStorage.getItem("uuid"),
					wellname: this.$data.input,
					type:type,
					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) {
		  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 type =0 ;
		  console.log("---",this.$data.value);
		  if (this.$data.value.length != 0) {
		  	
		  	var len = this.$data.value.length;
		  	for (var i = 0; i< len; i++) {
		  		type = type+(1<<this.$data.value[i]);
		  	}
		  }
		  
		  console.log("req type:",type);
		  
		  var _this = this;
		  
		  var objs;
		  axios.post('/deescloud/getwtt_en', {
			  opuser:localStorage.getItem("online_user"),
			  opuser_uuid:localStorage.getItem("uuid"),
					wellname: this.$data.input,
					type:type,
					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);
				});
		},
		
		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'
		},
	  }
	}