var frComponent_en = {
		template:`
		<div>
			<div v-show="if_show0">
				<div id="" style="display: inline-block;width: 100%;margin-top: 10px;">
					
					<div style="float: left; width: 30%;">
					<el-input v-model="series_v" :placeholder="h_series_v" clearable></el-input>
					</div>
					
					<div style="float: left;margin-left: 5px;">
					<el-button id ="bt_search" plain type="primary" icon="el-icon-search" @click="getFr(series_v)">Search</el-button>
					</div>
					
					<div style="float: left; margin-left: 5px;">
						<el-button id ="bt_export" plain type="primary" icon="el-icon-document" @click="exportFr()">Export</el-button>
					</div>
					<div style="float: left; margin-left: 5px;">
						<el-button id ="bt_cfg" plain type="primary" icon="el-icon-setting" @click="setting()">Display settings</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="series"
							label="Instrument Series No."
							width="160">
						</el-table-column>
						<!--
						<el-table-column
							fixed
							prop="instrument_id"
							label="Instrument Code"
							width="60">
						</el-table-column>-->
						
						<el-table-column
							prop="repairCnt"
							label="Maintenance Times"
							width="150">
							<template slot="header" >
							    <el-tooltip
							      effect="dark"
							      content="number of maintenance events"
							      placement="top"
							    >
							      <span>Maintenance Times</span>
							    </el-tooltip>
							  </template>
						</el-table-column>
						<!--
						<el-table-column
							prop="cur_footage"
							label="入井井深"
							width="120">
						</el-table-column>-->
						
						<el-table-column
							prop="total_footage"
							label="Total Drilling Footage(10,000m)"
							width="230">
						</el-table-column>
						
						<el-table-column
							prop="rate"
							label="Failure Rate(maintenance frequency/10,000m)"
							width="340">
							<!--<template slot="header" >
							    <el-tooltip
							      effect="dark"
							      content="Failure Rate(maintenance frequency/10,000m)"
							      placement="top"
							    >
							      <span>Failure Rate</span>
							    </el-tooltip>
							  </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-dialog
					title="Series number merge display settings"
					:visible.sync="adddialogVisible"
					:lock-scroll ="false"
					width="35%">
					<el-form ref="frform" :model="form" label-width="160px" :rules="rules">
					 <el-form-item label="Series No." prop="series_num">
					 <el-input v-model="form.series_num" placeholder="format: LHE6118,LHE6118A"></el-input>
					 </el-form-item>
					 <el-form-item label="Merged name" prop="series_num_new">
					 <el-input v-model="form.series_num_new" placeholder="format: LHE6118/A"></el-input>
					 </el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
					<el-button @click="adddialogVisible = false">Cancel</el-button>
					<el-button id ="bt_ok" plain type="primary" @click="postFrSetting()">Ok</el-button>
					</span>
				</el-dialog>
				
				<el-dialog
					title="Display settings"
					:visible.sync="dialogVisible"
					:lock-scroll ="false"
					width="50%">
					<div id="" style="display: block;">
						<div style="float: right; ">
							<el-button id ="bt_add" plain type="primary" size="medium" icon="el-icon-circle-plus-outline" @click="addFrSetting()">Add</el-button>
						</div>
					</div>
					
					<el-table
					    :data="tableData1"
					    style="width: 100%"
						:cell-style="{background:'#fff'}"
						height="300"
						>
					    <el-table-column
					      prop="series_num"
					      label="Instrument Series No."
					      width="300">
					    </el-table-column>
						  <el-table-column
							prop="series_num_new"
							label="Merged name"
							width="150">
						  </el-table-column>
							<el-table-column
							  label="Operation"
							  width="120">
							  <template slot-scope="scope">
							  <!--style="height:23px;padding:0px" -->
								<el-button @click="updateFrSetting(scope.row)" type="text" size="medium" >Update</el-button>
								<el-button @click="delFrSetting(scope.row)" type="text" size="medium" >Delete</el-button>
							  </template>
							</el-table-column>
									
					  </el-table>
					
				</el-dialog>
				
			</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: [],
			currentPage: 1,
			pagesize:50,
			recordTotal:0,
			options: [],
			series_v:"",
			instrument_id_v:"",
			h_series_v:"Please Input Series No.",
			h_instrument_id_v:"请输入查询编码",
			form: {
				id:"",
				series_num: '',
				series_num_new:'',
			},
			adddialogVisible:false,
			rules: {
			    series_num: [
			        { required: true, message: 'The series No. cannot be empty!', trigger: 'blur' }
			    ],
			    series_num_new: [
			        { required: true, message: 'Consolidated Name cannot be empty!', trigger: 'blur' }
			    ],
			},
			dialogVisible:false,
			oper_type:0,
			tableData1: [],
			
			if_show0:false,
			if_show:false,
		  }
		},
		mounted() {
			if (localStorage.getItem("level")==4) {
				this.$data.if_show = true;
				return;
			}
			this.$data.if_show0= true;
			
			var _this = this;
			
			var objs;
			axios.post('/deescloud/getfr', {
				series:this.$data.series_v,
				index: this.$data.currentPage,
				count: this.$data.pagesize,
				op_user:localStorage.getItem("online_user")
			})
			.then(function (response) {
				console.log(response.data);
				objs = response.data.data;
				rcnt = response.data.total;
				_this.$data.tableData = objs;
				_this.$data.recordTotal = rcnt;
				
				console.log(objs);
			})
			.catch(function (error) {
				console.log(error);
			});
			
			var _this = this;
			
			var objs;
			axios.post('/deescloud/getFrSetting', {
				op_user:localStorage.getItem("online_user"),
			  })
			  .then(function (response) {
				console.log(response.data);
				objs = response.data.data;
				_this.$data.tableData1 = objs;
			  })
			  .catch(function (error) {
				console.log(error);
			  });
		},
	methods: {
		
		getFrSetting(){
			var _this = this;
			
			var objs;
			axios.post('/deescloud/getFrSetting', {
				op_user:localStorage.getItem("online_user"),
			  })
			  .then(function (response) {
				console.log(response.data);
				objs = response.data.data;
				_this.$data.tableData1 = objs;
			  })
			  .catch(function (error) {
				console.log(error);
			  });
		},
		
		postFrSetting(){
			var check_num = 0;
			if (this.$data.form.series_num == '') {
				check_num = check_num+1;
			}
			
			if ( this.$data.form.series_num_new == '') {
				check_num = check_num+1;
			}
			
			if (check_num==1) {
				this.$message({
					message: "Instrument Series No. and Consolidated Name cannot be empty!",
					type: "warning",
					duration: 1500
				});
				return;
			}
			
			this.$data.adddialogVisible = false;
			  
			var _this = this;
			
			console.log(_this.$data.form);
			 
			 var objs;
			 axios.post('/deescloud/postFrSetting', {
				op_user:localStorage.getItem("online_user"),
				series_num: _this.$data.form.series_num,
				series_num_new:_this.$data.form.series_num_new,
				id:_this.$data.form.id,
				oper_type: _this.$data.oper_type
			})
			.then(function (response) {
				
				let r = response.data.r;
				if (r == 0) {
					_this.$message({
						message: "Set successfully!",
						type: "success",
						duration: 1500
					});
					
					_this.getFrSetting();//更新页面
				} else{
					if (r ==1) {
						_this.$message({
							message: "The number of new and old series no. groups does not match!",
							type: "error",
							duration: 1500
						});
					} else{
						_this.$message({
							message: "Setting failed!",
							type: "error",
							duration: 1500
						});
					}
				}
			})
			.catch(function (error) {
			  console.log(error);
			});
			
		},
		
		delFrSetting(info){
		  this.$data.oper_type = 3;
		  
		  var _this = this;
		  
		   var objs;
		   axios.post('/deescloud/postFrSetting', {
			op_user:localStorage.getItem("online_user"),
			id:info.id,
			series_num: info.series_num,
			series_num_new:info.series_num_new,
			oper_type: _this.$data.oper_type
		  })
		  .then(function (response) {
			
			let r = response.data.r;
			let s = ""
			let errType = ""
			if (r == 0) {
				s = "Delete succeeded!";
				errType = "success"
			} else{
				s = "Delete failed!";
				errType = "error"
			}
		
			_this.$message({
				message: s,
				type: errType,
				duration: 1500
			});
			
			if (r ==0) {
				_this.getFrSetting("");//更新页面
			}
			
		  })
		  .catch(function (error) {
			console.log(error);
		  });
		},
		
		updateFrSetting(info){
		  this.$data.oper_type = 2;
		  this.$data.form = {
			op_user:localStorage.getItem("online_user"),
			id:info.id,
			series_num: info.series_num,
			series_num_new:info.series_num_new
		  };
		  
		this.$data.adddialogVisible = true;
		  this.$nextTick(() => {
			  this.$refs['frform'].clearValidate()
		  });
		 
		},
		
		addFrSetting(){
			this.$data.oper_type = 1;
			this.$data.form = {
				id:"",
				series_num: '',
				series_num_new:'',
			};
			
			this.$data.adddialogVisible = true;
			this.$nextTick(() => {
				this.$refs['frform'].clearValidate();
			});
		},
		
		
		updateMhSetting(){
			
			var check_num = 0;
			if (this.$data.form.series_num == '') {
				check_num = check_num+1;
			}
			
			if ( this.$data.form.series_num_new == '') {
				check_num = check_num+1;
			}
			
			if (check_num==1) {
				this.$message({
					message: "Instrument Series No. and Consolidated Name cannot be empty!",
					type: "warning",
					duration: 1500
				});
				return;
			}
			
			this.$data.dialogVisible = false;
			  
			var _this = this;
			
			console.log(_this.$data.form);
			 
			 var objs;
			 axios.post('/deescloud/updateFrSetting', {
				op_user:localStorage.getItem("online_user"),
				series_num: _this.$data.form.series_num,
				series_num_new:_this.$data.form.series_num_new,
			})
			.then(function (response) {
				
				let r = response.data.r;
				if (r == 0) {
					_this.$message({
						message: "Set successfully!",
						type: "success",
						duration: 1500
					});
				} else{
					if (r==1) {
						_this.$message({
							message: "The number of new and old series number groups does not match!",
							type: "error",
							duration: 1500
						});
					} else{
						_this.$message({
							message: "Setting failed!",
							type: "error",
							duration: 1500
						});
					}
				}
			})
			.catch(function (error) {
			  console.log(error);
			});
		},
		
		setting(){
			document.getElementById("bt_cfg").blur();
			
			this.$data.dialogVisible = true;
			this.$nextTick(() => {
				this.$refs['frform'].clearValidate();
			});
			
		},
		
		exportFr(){
			document.getElementById("bt_export").blur();
			
			var _this = this;
			
			var filename = '';
			
			if (this.$data.series_v == "") {
				filename = 'Statistics of failure rate per 10000 meters';
			}else{
				filename = _this.$data.series_v+'-Statistics of failure rate per 10000 meters';
			}
			
			axios.post('deescloud/exportfr_en',{
				series:this.$data.series_v,
				op_user:localStorage.getItem("online_user")
			},
			).then(function (response) {
				console.log(response.data);
				var fileid = response.data.fileId;
				
				var downUrl = 'file/'+fileid;
				downloadUrl(filename+".csv",downUrl);
			})
			.catch(function (error) {
				console.log(error);
			});
		},

		getFr(_search_name){
			document.getElementById("bt_search").blur();
			
			this.$data.currentPage=1;
			
			var _this = this;
			
			var objs;
			axios.post('/deescloud/getfr', {
				series:this.$data.series_v,
				index: this.$data.currentPage,
				count: this.$data.pagesize,
				op_user:localStorage.getItem("online_user")
			  })
			  .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 _this = this;
			  
			  var objs;
			  axios.post('/deescloud/getfr', {
					series:this.$data.series_v,
					index: this.$data.currentPage,
					count: this.$data.pagesize,
					op_user:localStorage.getItem("online_user")
				})
				.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 _this = this;
		  
		  var objs;
		  axios.post('/deescloud/getfr', {
					series:this.$data.series_v,
					index: this.$data.currentPage,
					count: this.$data.pagesize,
					op_user:localStorage.getItem("online_user")
				})
				.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);
				});
		}
	  }
	}