history.pushState(null, null, document.URL);
			window.addEventListener('popstate', function () {
				console.log(document.URL);
				history.pushState(null, null, document.URL);
			});
			
			setInterval(checkUser,5000);
			ELEMENT.locale(ELEMENT.lang.en);
			var appVue = new Vue(
				{
					el:"#app",
					data(){
						var url = decodeURI(window.location.href);
						var argsIndex = url .split("?id=");
						var arg = argsIndex[1];
						
						// 获取浏览器窗口宽度
						var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
						 
						// 获取浏览器窗口高度
						var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
						 
						console.log('窗口宽度: ' + windowWidth);
						console.log('窗口高度: ' + windowHeight);
						
						// 获取当前屏幕的分辨率
						let screenW = window.screen.width;
						let screenH = window.screen.height;
						console.log("screen width:",screenW);
						console.log("screen height:",screenH);
						
						  return {
							onlineuser:localStorage.getItem("online_user"),
							tableData: [],
							tHeight:windowHeight-100,
							tHeight1:screenH*0.3,
							
							ctx: '',  //画笔工具
							canvasWidth: windowHeight-100,  //canvas的宽高screenH*0.7
							canvasHeight: windowHeight-100,
							x0: '',  // 画布中心点
							y0: '',
							cicle_radius: (this.canvasWidth-10)/12,
							innerR: 70,  //内圈半径
							
							shortScale:5,  //短刻度长度
							middleScale: 10, //中刻度长度
							longScale: 20,//长刻度长度
							
							ringWidth: 23,//外圈半径递增长度
							sepAngle: Math.PI / 6, //分割线角度
							
							// 度盘显示的数据
							gmList: [],
							curWellName:arg,
							jx:{value:0,time:'00:00:00'},
							fw:{value:0,time:'00:00:00'},
							ratio:0,
							if_show:false,
							
							dialogVisible:false,
							radio1:'1',
							radio2:'1',
							
							timer:undefined,
							
							wellname:'',
							X:'',
							Y:'',
							WellDepth:'',
							Drilling_num:'',
							Servicer:'',
							Work_time:'',
							Wait_time:'',
							
							nb_data:[],
							timeout_data:[],
							ver_data:[],
							
							twidth:windowWidth-(windowHeight-120)-500,
							time_warn:0,
						  }
					},
					mounted() {
						// this.initDiv();
						this.initCanvas_ex();
						
						var url = decodeURI(window.location.href);
						var argsIndex = url .split("?id=");
						var arg = argsIndex[1];
						
						//数据展示获取数据
						var _this = this;
						axios.post('/deescloud/getWellRealData_en',
						{
							opuser:localStorage.getItem("online_user"),
							opuser_uuid:localStorage.getItem("uuid"),
							id: arg,
							index: 1,
							count: 20,
							r1:this.$data.radio1,
							r2:this.$data.radio2,
						})
						  .then(function (response) {
							console.log(response.data);
							_this.$data.tableData = response.data.data;
							_this.$data.jx = response.data.jx;
							_this.$data.fw = response.data.fw;
							_this.$data.time_warn=response.data.time_warn;
							
							// 调用绘图方法
							_this.drawFourAngleText_ex('','',_this.$data.jx,_this.$data.fw);
							//_this.fill_jxfwColor(_this.$data.jx,_this.$data.fw);
							
							/*console.log("++++")
							var arr = [];
							arr.push({name:'重工面',value:'30',time:'2024-04-18 10:00:00'}) 
							arr.push({name:'重工面',value:'60',time:'2024-04-18 10:00:00'}) 
							arr.push({name:'重工面',value:'70',time:'2024-04-18 10:00:00'}) 
							arr.push({name:'重工面',value:'90',time:'2024-04-18 10:00:00'}) 
							arr.push({name:'重工面',value:'105',time:'2024-04-18 10:00:00'}) 
							
							console.log(arr)
							_this.fillColor_ex(arr)*/
							
							_this.$data.if_show=true;
						  })
						  .catch(function (error) {
							console.log(error);
						  });
						  
						axios.post('/deescloud/get_well_cur_data', {
							opuser:localStorage.getItem("online_user"),
							opuser_uuid:localStorage.getItem("uuid"),
								Wellname: arg
							  })
							  .then(function (response) {
								console.log(response.data);
								let data = response.data;
								
								_this.$data.wellname =data.wellname;
								_this.$data.X = data.x
								_this.$data.Y = data.y;
								_this.$data.WellDepth = data.cur_well_dep;
								
								_this.$data.Drilling_num=data.Drilling_num;
								_this.$data.Servicer = data.Servicer;
								_this.$data.Wait_time =data.Wait_time;
								_this.$data.Work_time =data.Work_time;
							  })
							  .catch(function (error) {
								console.log(error);
							  });
						axios.post('/deescloud/get_well_nb', {
							opuser:localStorage.getItem("online_user"),
							opuser_uuid:localStorage.getItem("uuid"),
								wellname: arg
							  })
							  .then(function (response) {
								let data = response.data.data;
								console.log(data);
								_this.$data.nb_data = data;
							  })
							  .catch(function (error) {
								console.log(error);
							  });
						axios.post('/deescloud/get_well_instrument_timeout', {
							opuser:localStorage.getItem("online_user"),
							opuser_uuid:localStorage.getItem("uuid"),
								wellname: arg,
								if_en:true,
							  })
							  .then(function (response) {
								let data = response.data.data;
								console.log(data);
								_this.$data.timeout_data = data;
							  })
							  .catch(function (error) {
								console.log(error);
							  });
						axios.post('/deescloud/get_well_ver_timeout', {
							opuser:localStorage.getItem("online_user"),
							opuser_uuid:localStorage.getItem("uuid"),
								wellname: arg,
								if_en:true,
							  })
							  .then(function (response) {
								let data = response.data.data;
								console.log(data);
								_this.$data.ver_data = data;
							  })
							  .catch(function (error) {
								console.log(error);
							  });
					},
					methods: {
					 initDiv () {
						  const self = this
						  const setInter = function () {
							  //console.log("1",self.$refs.contentRef.scrollTop)
							  //console.log("2",self.$refs.contentRef.scrollHeight - self.$refs.contentRef.clientHeight+0.5)
							if (self.$refs.contentRef.scrollTop >= (self.$refs.contentRef.scrollHeight - self.$refs.contentRef.clientHeight)) {
							  self.$refs.contentRef.scrollTop = 0
							} else {
							  self.$refs.contentRef.scrollTop++
							}
						  }
						  self.timer && clearInterval(self.timer)
						  self.timer = setInterval(setInter, 100)
					
						  this.$refs.contentRef.addEventListener('mouseover', function () {
							self.timer && clearInterval(self.timer)
						  })
						  this.$refs.contentRef.addEventListener('mouseout', function () {
							self.timer = setInterval(setInter, 100)
						  })
						},
						get_decode_value(){
							this.$data.dialogVisible =false;
							
							var url = decodeURI(window.location.href);
							var argsIndex = url .split("?id=");
							var arg = argsIndex[1];
							
							//数据展示获取数据
							var _this = this;
							axios.post('/deescloud/getWellRealData_en',
							{
								opuser:localStorage.getItem("online_user"),
								opuser_uuid:localStorage.getItem("uuid"),
								id: arg,
								index: 1,
								count: 20,
								r1:this.$data.radio1,
								r2:this.$data.radio2,
							})
							  .then(function (response) {
								console.log(response.data);
								_this.$data.tableData = response.data.data;
								_this.$data.jx = response.data.jx;
								_this.$data.fw = response.data.fw;
								
								// 调用绘图方法
								_this.drawFourAngleText_ex('','',_this.$data.jx,_this.$data.fw);
								//_this.fill_jxfwColor(_this.$data.jx,_this.$data.fw);
								
								_this.$data.if_show=true;
							  })
							  .catch(function (error) {
								console.log(error);
							  });
						},
						
						show_unit(){
							this.$data.dialogVisible=true;
						},
						
						tableRowClassName({row, rowIndex}) {
							if (row.paraname=='井斜') {
								if (row.decodevalue >180 || row.decodevalue<0) {
									return 'warning-row';
								}
							}
							
							if (row.paraname=='方位') {
								if (row.decodevalue >360 || row.decodevalue<0) {
									return 'warning-row';
								}
							}
							
							if (row.paraname=='重工面' || row.paraname=='磁工面') {
								if (row.decodevalue >360 || row.decodevalue<0) {
									return 'warning-row';
								}
							}
							
							if (row.ifWarning==1){
								return 'warning-row';
							}
							
							/*
							if (row.decodevalue >31.79) {
								return 'warning-row';
							}
							if (rowIndex === 1) {
							  return 'warning-row';
							} else if (rowIndex === 3) {
							  return 'success-row';
							}*/
							return '';
						},
						
						initCanvas(){
							
							//度盘
							// 适配低分辨率屏幕
							// 获取画布
							var c = document.getElementById('mycanvas');
							// 获取绘图工具
							this.ctx = c.getContext('2d');
							this.ctx.imageSmoothingEnabled = true;
							
							var dpr = window.devicePixelRatio || 1,
							      bsr = this.ctx['webkitBackingStorePixelRatio'] ||
							        this.ctx['mozBackingStorePixelRatio'] ||
							        this.ctx['msBackingStorePixelRatio'] ||
							        this.ctx['oBackingStorePixelRatio'] ||
							        this.ctx['backingStorePixelRatio'] || 1;
							this.$data.ratio = dpr / bsr
							
							ratio = this.$data.ratio;
							console.log("ratio:",ratio);
							console.log("c.width",c.width);
							console.log("c.height",c.height);
							
							c.width = this.canvasWidth * ratio;
							c.height = this.canvasHeight * ratio;
							console.log("c.width",c.width);
							console.log("c.height",c.height);
							
							// canvas的宽度和高度
							c.style.width = this.canvasWidth + "px";
							c.style.height = this.canvasHeight + "px";
							console.log('--canvasW--',this.canvasWidth);
							console.log('--canvasH--',this.canvasHeight);
							
							this.ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
							
							// 清空canvas
							this.ctx.clearRect(0,0,c.width,c.height);
							
							// 画布中心点
							this.$data.x0 = this.canvasWidth/2;//screenW*0.6/2
							this.$data.y0 = this.canvasHeight/2; //250
							console.log("x0",this.$data.x0);
							console.log("y0",this.$data.y0);
											
							// 调用绘图方法
							this.drawInnerCircle(); 
							this.drawCenterText({name:'重工面',value:0,time:'00:00:00'});
							this.drawOurterCircle();
							
							this.drawFourAngleTextLabel();
							
							},
						
						initCanvas_ex(flag){
							
							//度盘
							// 适配低分辨率屏幕
							// 获取画布
							var c = document.getElementById('mycanvas');
							// 获取绘图工具
							this.ctx = c.getContext('2d');
							this.ctx.imageSmoothingEnabled = true;
							
							var dpr = window.devicePixelRatio || 1,
							      bsr = this.ctx['webkitBackingStorePixelRatio'] ||
							        this.ctx['mozBackingStorePixelRatio'] ||
							        this.ctx['msBackingStorePixelRatio'] ||
							        this.ctx['oBackingStorePixelRatio'] ||
							        this.ctx['backingStorePixelRatio'] || 1;
							this.$data.ratio = dpr / bsr
							
							ratio = this.$data.ratio;
							console.log("ratio:",ratio);
							console.log("c.width",c.width);
							console.log("c.height",c.height);
							
							c.width = this.canvasWidth * ratio;
							c.height = this.canvasHeight * ratio;
							console.log("c.width",c.width);
							console.log("c.height",c.height);
							// canvas的宽度和高度
							c.style.width = this.canvasWidth + "px";
							c.style.height = this.canvasHeight + "px";
							console.log('--canvasW--',this.canvasWidth);
							console.log('--canvasH--',this.canvasHeight);
							
							this.ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
							
							// 清空canvas
							this.ctx.clearRect(0,0,c.width,c.height);
							
							// 画布中心点
							this.$data.x0 = this.canvasWidth/2;//screenW*0.6/2
							this.$data.y0 = this.canvasHeight/2; //250
							console.log("x0",this.$data.x0);
							console.log("y0",this.$data.y0);
											
							// 调用绘图方法
							//this.drawInnerCircle(); 
							//this.drawCenterText({name:'重工面',value:0,time:'00:00:00'});
							this.drawOurterCircle_ex();
							
							if(flag==1){
								this.drawFourAngleTextLabel_ex_mtf();
							}else{
								this.drawFourAngleTextLabel_ex();
							}
							
							},	
						
						// 绘制度盘上4个角上的文字标题
						drawFourAngleTextLabel() {
							
							let up_size = 25;
							let l_size = 60;
							let r_size = 100;
							let b_size = 80
							
							this.ctx.beginPath();
							this.ctx.font = '16px SimSun,sans-serif,PingFang SC';
							this.ctx.fillStyle = '#303133';
							this.ctx.fillText('工作模式',l_size,up_size);
										
							/*this.ctx.beginPath();
							this.ctx.font = '16px SimSun,sans-serif,PingFang SC';	
							this.ctx.fillStyle = '#303133';
							this.ctx.fillText('系统误差',this.canvasWidth-r_size,up_size);
							*/
							this.ctx.beginPath();
							this.ctx.font = '16px SimSun,sans-serif,PingFang SC';
							this.ctx.fillStyle = '#303133';
							this.ctx.fillText('井斜',l_size,this.canvasHeight-b_size);
									
							this.ctx.beginPath();
							this.ctx.font = '16px SimSun,sans-serif,PingFang SC';
							this.ctx.fillStyle = '#303133';
							this.ctx.fillText('方位',this.canvasWidth-r_size,this.canvasHeight-b_size);
						},
						
						drawFourAngleTextLabel_ex() {
							
							let up_size = 25;
							let l_size = 40;
							let r_size = 40;
							let b_size = 80
							
							this.ctx.beginPath();
							this.ctx.font = '16px Cambria,SimSun,sans-serif,PingFang SC';
							this.ctx.fillStyle = '#E5FF31';
							this.ctx.fillText('GTF',l_size,up_size);
										
							this.ctx.beginPath();
							this.ctx.font = '16px Cambria,SimSun,sans-serif,PingFang SC';	
							this.ctx.fillStyle = '#E5FF31';
							this.ctx.fillText('Tool offset',this.canvasWidth-r_size,up_size);
							
							this.ctx.beginPath();
							this.ctx.font = '16px Cambria,SimSun,sans-serif,PingFang SC';
							this.ctx.fillStyle = '#E5FF31';
							this.ctx.fillText('INC',l_size,this.canvasHeight-b_size);
									
							this.ctx.beginPath();
							this.ctx.font = '16px Cambria,SimSun,sans-serif,PingFang SC';
							this.ctx.fillStyle = '#E5FF31';
							this.ctx.fillText('AZ',this.canvasWidth-r_size,this.canvasHeight-b_size);
						},
						
						drawFourAngleTextLabel_ex_mtf() {
							
							let up_size = 25;
							let l_size = 40;
							let r_size = 40;
							let b_size = 80
							
							this.ctx.beginPath();
							this.ctx.font = '16px Cambria,SimSun,sans-serif,PingFang SC';
							this.ctx.fillStyle = '#E5FF31';
							this.ctx.fillText('MTF',l_size,up_size);
										
							this.ctx.beginPath();
							this.ctx.font = '16px Cambria,SimSun,sans-serif,PingFang SC';	
							this.ctx.fillStyle = '#E5FF31';
							this.ctx.fillText('Tool offset',this.canvasWidth-r_size,up_size);
							
							this.ctx.beginPath();
							this.ctx.font = '16px Cambria,SimSun,sans-serif,PingFang SC';
							this.ctx.fillStyle = '#E5FF31';
							this.ctx.fillText('INC',l_size,this.canvasHeight-b_size);
									
							this.ctx.beginPath();
							this.ctx.font = '16px Cambria,SimSun,sans-serif,PingFang SC';
							this.ctx.fillStyle = '#E5FF31';
							this.ctx.fillText('AZ',this.canvasWidth-r_size,this.canvasHeight-b_size);
						},
						
						
						// 绘制度盘上4个角上的文字
						drawFourAngleText(workMode,systemErr,wellDevi,bearing) {
							
							let up_size = 25;
							let l_size = 60;
							let r_size = 100;
							let b_size = 80
							
							this.ctx.beginPath();
							//this.ctx.font = '16px SimSun,PingFang SC';
							//this.ctx.fillStyle = '#303133';
							//this.ctx.fillText('工作模式',l_size,up_size);
							this.ctx.font = '18px SimSun,PingFang SC';
							this.ctx.fillStyle = '#303133';
							this.ctx.fillText(workMode,l_size,up_size+30);
				
							this.ctx.beginPath();
							//this.ctx.font = '16px SimSun,PingFang SC';
							//this.ctx.fillStyle = '#303133';
							//this.ctx.fillText('系统误差',this.canvasWidth-r_size,up_size);
							this.ctx.font = '18px SimSun,PingFang SC';
							this.ctx.fillStyle = '#303133';
							//this.ctx.fillText(systemErr,this.canvasWidth-r_size,up_size+30);
				
							this.ctx.beginPath();
							//this.ctx.font = '16px SimSun,PingFang SC';
							//this.ctx.fillStyle = '#303133';
							//this.ctx.fillText('井斜',l_size,this.canvasHeight-b_size);
							this.ctx.font = '18px SimSun,PingFang SC';
							this.ctx.fillStyle = '#F7C709';
							this.ctx.fillText(wellDevi.value,l_size,this.canvasHeight-b_size+30);
							this.ctx.fillText(wellDevi.time,l_size,this.canvasHeight-b_size+60);
				
							this.ctx.beginPath();
							//this.ctx.font = '16px SimSun,PingFang SC';
							//this.ctx.fillStyle = '#303133';
							//this.ctx.fillText('方位',this.canvasWidth-r_size,this.canvasHeight-b_size);
							this.ctx.font = '18px SimSun,PingFang SC';
							this.ctx.fillStyle = '#2E64FE';
							
							//console.log("bearing:",bearing);
							this.ctx.fillText(bearing.value,this.canvasWidth-r_size,this.canvasHeight-b_size+30);
							this.ctx.fillText(bearing.time,this.canvasWidth-r_size,this.canvasHeight-b_size+60);
						},
						
						drawFourAngleText_ex(workMode,systemErr,wellDevi,bearing) {
							
							let up_size = 25;
							let l_size = 40;
							let r_size = 40;
							let b_size = 80
							
							this.ctx.beginPath();
							//this.ctx.font = '16px SimSun,PingFang SC';
							//this.ctx.fillStyle = '#303133';
							//this.ctx.fillText('工作模式',l_size,up_size);
							this.ctx.font = '26px Cambria,SimSun,PingFang SC';
							this.ctx.fillStyle = '#E5FF31';
							this.ctx.fillText(workMode,l_size,up_size+30);
										
							this.ctx.beginPath();
							//this.ctx.font = '16px SimSun,PingFang SC';
							//this.ctx.fillStyle = '#303133';
							//this.ctx.fillText('系统误差',this.canvasWidth-r_size,up_size);
							this.ctx.font = '26px Cambria,SimSun,PingFang SC';
							this.ctx.fillStyle = '#E5FF31';
							//this.ctx.fillText(systemErr,this.canvasWidth-r_size,up_size+30);
										
							this.ctx.beginPath();
							//this.ctx.font = '16px SimSun,PingFang SC';
							//this.ctx.fillStyle = '#303133';
							//this.ctx.fillText('井斜',l_size,this.canvasHeight-b_size);
							this.ctx.font = '26px Cambria,SimSun,PingFang SC';
							this.ctx.fillStyle = '#E5FF31';
							this.ctx.fillText(wellDevi.value,l_size,this.canvasHeight-b_size+30);
							this.ctx.font = '16px Cambria,SimSun,PingFang SC';
							this.ctx.fillText(wellDevi.time,l_size,this.canvasHeight-b_size+55);
										
							this.ctx.beginPath();
							//this.ctx.font = '16px SimSun,PingFang SC';
							//this.ctx.fillStyle = '#303133';
							//this.ctx.fillText('方位',this.canvasWidth-r_size,this.canvasHeight-b_size);
							this.ctx.font = '26px Cambria,SimSun,PingFang SC';
							this.ctx.fillStyle = '#E5FF31';
							
							//console.log("bearing:",bearing);
							this.ctx.fillText(bearing.value,this.canvasWidth-r_size,this.canvasHeight-b_size+30);
							this.ctx.font = '16px Cambria,SimSun,PingFang SC';
							this.ctx.fillText(bearing.time,this.canvasWidth-r_size,this.canvasHeight-b_size+55);
						},
				
						// 绘制内圈
						drawInnerCircle() {
							this.ctx.beginPath();
							this.ctx.arc(this.x0, this.y0, this.innerR, 0, Math.PI*2);
							this.ctx.strokeStyle = '#303133';
							this.ctx.lineWidth = 1;
							this.ctx.stroke();
							
							var angle = Math.PI / 36;
							// 绘制刻度
							for (var i = 0; i < 72; i++) {
								this.ctx.beginPath();
								var nowAngle = angle * i;
								var startX = this.x0 + this.innerR * Math.sin(nowAngle);
								var startY = this.y0 - this.innerR * Math.cos(nowAngle);
								var endX = this.x0 + (this.innerR - this.shortScale) * Math.sin(nowAngle);
								var endY = this.y0 - (this.innerR - this.shortScale) * Math.cos(nowAngle);
								this.ctx.moveTo(startX, startY);
								this.ctx.lineTo(endX, endY);
								this.ctx.stroke();
								
								if (nowAngle === 0) {
									// console.log('--0--');
									this.ctx.beginPath();
									this.ctx.textAlign = 'center';
									this.ctx.font = '10px  SimSun';
									this.ctx.fillStyle = '#303133';
									this.ctx.fillText('0',endX,endY+10);
								}
								else if(nowAngle === Math.PI / 2) {
									this.ctx.beginPath();
									this.ctx.textAlign = 'center';
									this.ctx.textBaseline = 'middle';
									this.ctx.font = '10px  SimSun';
									this.ctx.fillText('90',endX-10,endY);
								}
								else if(nowAngle === Math.PI ) {
									this.ctx.beginPath();
									this.ctx.textAlign = 'center';
									this.ctx.font = '10px  SimSun';
									this.ctx.fillText('180',endX,endY-7);
								}
								else if(nowAngle === Math.PI * 1.5) {
									this.ctx.beginPath();
									this.ctx.textAlign = 'center';	
									this.ctx.textBaseline = 'middle';
									this.ctx.font = '10px  SimSun';
									this.ctx.fillText('270',endX+12,endY);
								}
							}
						},
				
						//绘制外圈
						drawOurterCircle() {
							
							var circleNum = 7; // 绘制的圈数
							for (var i = 1; i <= circleNum; i++) {
								this.ctx.beginPath();
								if (i === 7) {
									this.ctx.arc(this.x0, this.y0, this.innerR + i*this.ringWidth, Math.PI/2, Math.PI*3/2);
								} else{
									this.ctx.arc(this.x0, this.y0, this.innerR + i*this.ringWidth, 0, Math.PI*2);
								}	
								this.ctx.lineWidth = 1;				
								this.ctx.strokeStyle = '#303133';
								this.ctx.stroke();
							}	
							
							this.drawSeparatedLine();
							this.drawOurterScale();
						},
						
						drawOurterCircle_ex() {
							var cicle_radius = (this.canvasWidth-10)/12
							
							this.ctx.beginPath();
							this.ctx.arc(this.x0, this.y0, cicle_radius/2, 0, Math.PI*2);
							this.ctx.lineWidth = 2;				
							this.ctx.strokeStyle = '#ffffff';
							this.ctx.stroke();
							
							var circleNum = 6; // 绘制的圈数
							for (var i = 1; i <= circleNum; i++) {
								this.ctx.beginPath();
								this.ctx.arc(this.x0, this.y0, i*cicle_radius, 0, Math.PI*2);
								this.ctx.lineWidth = 2;				
								this.ctx.strokeStyle = '#ffffff';
								this.ctx.stroke();
							}	
							
							this.drawSeparatedLine_ex();
							this.drawOurterScale_ex();
						},
				
						// 绘制12份 分割线
						drawSeparatedLine() {
							
							for (var i = 0; i < 12; i++) {
								this.ctx.beginPath();
								var startX = this.x0 + this.innerR * Math.sin(this.sepAngle * i);
								var startY = this.y0 - this.innerR * Math.cos(this.sepAngle * i);
								var endX = this.x0 + (this.innerR + this.ringWidth * 5) * Math.sin(this.sepAngle * i);
								var endY = this.y0 - (this.innerR + this.ringWidth * 5) * Math.cos(this.sepAngle * i);
								this.ctx.moveTo(startX, startY);
								this.ctx.lineTo(endX, endY);
								this.ctx.setLineDash([3,3]);
								this.ctx.lineWidth = 1;
								this.ctx.stroke();
							}
						},
						
						drawSeparatedLine_ex() {
							console.log("999")
							var sep_angle = Math.PI / 12
							var cr = (this.canvasWidth-10)/24
							console.log("cr",cr)
							
							this.ctx.lineWidth = 1;
							this.ctx.strokeStyle = '#C8C8C8';
							
							for (var i = 0; i < 24; i++) {
								this.ctx.beginPath();
								var startX = this.x0 + cr * Math.sin(sep_angle * i);
								var startY = this.y0 - cr * Math.cos(sep_angle * i);
								var endX = this.x0 + ( cr*2 * 5) * Math.sin(sep_angle * i);
								var endY = this.y0 - ( cr*2 * 5) * Math.cos(sep_angle * i);
								this.ctx.moveTo(startX, startY);
								this.ctx.lineTo(endX, endY);
								//this.ctx.setLineDash([3,3]);
								this.ctx.lineWidth = 0.5;
								this.ctx.stroke();
							}
							
							this.ctx.strokeStyle = '#969696';
							for (var i = 0; i < 24; i++) {
								this.ctx.beginPath();
								var startX = this.x0 + cr * Math.sin(sep_angle * i+(Math.PI / 24));
								var startY = this.y0 - cr * Math.cos(sep_angle * i+(Math.PI / 24));
								var endX = this.x0 + ( cr*2 * 6) * Math.sin(sep_angle * i+(Math.PI / 24));
								var endY = this.y0 - ( cr*2 * 6) * Math.cos(sep_angle * i+(Math.PI / 24));
								this.ctx.moveTo(startX, startY);
								this.ctx.lineTo(endX, endY);
								//this.ctx.setLineDash([3,3]);
								this.ctx.lineWidth = 0.5;
								this.ctx.stroke();
							}
						},
				
						// 绘制外圈刻度
						drawOurterScale() {
							this.ctx.strokeStyle = '#303133';
							this.ctx.fillStyle = '#303133';
							this.ctx.lineWidth = 1;
							
							var angle = Math.PI / 36;
							var flag = 0;
							// 绘制刻度
							for (var i = 0; i <= 72; i++) {
								this.ctx.beginPath();
								var nowAngle = angle * i;
								var nowRadius = this.innerR + this.ringWidth*6;
								var startX = this.x0 + nowRadius * Math.sin(nowAngle);
								var startY = this.y0 - nowRadius * Math.cos(nowAngle);
								
								var str = (i/6) * 30;
								if (str ==360) {
									continue;
								}
								if(i%6 === 0) {
									var endX = this.x0 + (nowRadius + this.longScale) * Math.sin(nowAngle);
									var endY = this.y0 - (nowRadius + this.longScale) * Math.cos(nowAngle);
									this.ctx.beginPath();
									this.ctx.textAlign = 'center';
									this.ctx.textBaseline = 'middle';
									this.ctx.font = '10px  SimSun';
									this.ctx.fillText(str+'',this.x0 + (nowRadius-this.ringWidth/2) * Math.sin(nowAngle), this.y0 - (nowRadius-this.ringWidth/2) * Math.cos(nowAngle));
									if (str >= 180) {
										this.ctx.fillText(30*flag,this.x0 + (nowRadius+this.ringWidth*2-this.ringWidth/2) * Math.sin(nowAngle), this.y0 - (nowRadius+this.ringWidth*2-this.ringWidth/2) * Math.cos(nowAngle));
										flag = flag + 1;
									} 
								}
								else if(i%2 === 0) {
									var endX = this.x0 + (nowRadius + this.middleScale) * Math.sin(nowAngle);
									var endY = this.y0 - (nowRadius + this.middleScale) * Math.cos(nowAngle);
								}
								else {
									var endX = this.x0 + (nowRadius + this.shortScale) * Math.sin(nowAngle);
									var endY = this.y0 - (nowRadius + this.shortScale) * Math.cos(nowAngle);
								}
								
								//中间的刻度 0和360显示位置重合，先清除360再画一个0
								//this.ctx.clearRect(this.x0-16,this.y0 - this.innerR - this.ringWidth * 5.5-8,28,15);
								//this.ctx.fillText('0',this.x0, this.y0 - this.innerR - this.ringWidth * 5.5);
								
								this.ctx.moveTo(startX, startY);
								this.ctx.lineTo(endX, endY);
								this.ctx.setLineDash([1,0]);
								this.ctx.stroke();	
							}	
						},
						
						drawOurterScale_ex() {
							this.ctx.strokeStyle = '#ffffff';
							this.ctx.fillStyle = '#ffffff';
							this.ctx.lineWidth = 1;
							
							var angle = Math.PI / 12;
							var flag = 0;
							
							var cicle_radius = (this.canvasWidth-10)/12
							// 绘制刻度
							for (var i = 0; i <= 23; i++) {
								this.ctx.beginPath();
								var nowAngle = angle * i;
								var nowRadius = cicle_radius + cicle_radius*5;
								var startX = this.x0 + nowRadius * Math.sin(nowAngle);
								var startY = this.y0 - nowRadius * Math.cos(nowAngle);
								
								var str = i * 15;
								if (str ==360) {
									break;
								}
								
								this.ctx.beginPath();
								this.ctx.textAlign = 'center';
								this.ctx.textBaseline = 'middle';
								this.ctx.font = '12px Cambria,SimSun';
								this.ctx.fillText(str+'',this.x0 + (nowRadius-cicle_radius/2) * Math.sin(nowAngle), this.y0 - (nowRadius-cicle_radius/2) * Math.cos(nowAngle));
								/*if (str >= 180) {
									this.ctx.fillText(30*flag,this.x0 + (nowRadius+this.ringWidth*2-this.ringWidth/2) * Math.sin(nowAngle), this.y0 - (nowRadius+this.ringWidth*2-this.ringWidth/2) * Math.cos(nowAngle));
									flag = flag + 1;
								} */
							}	
						},
				
						// 绘制外圈刻度0 30 60
						drawOurterScaleText() {
							this.ctx.strokeStyle = '#303133';
							this.ctx.fillStyle = '#303133';
							this.ctx.lineWidth = 1;
							
							var angle = Math.PI / 36;
							var flag = 0;
							// 绘制刻度
							for (var i = 0; i <= 72; i++) {
								this.ctx.beginPath();
								var nowAngle = angle * i;
								var nowRadius = this.innerR + this.ringWidth*6;
								var startX = this.x0 + nowRadius * Math.sin(nowAngle);
								var startY = this.y0 - nowRadius * Math.cos(nowAngle);
								
								var str = (i/6) * 30;
								if (str ==360) {
									continue;
								}
								if(i%6 === 0) {
									var endX = this.x0 + (nowRadius + this.longScale) * Math.sin(nowAngle);
									var endY = this.y0 - (nowRadius + this.longScale) * Math.cos(nowAngle);
									this.ctx.beginPath();
									this.ctx.textAlign = 'center';
									this.ctx.textBaseline = 'middle';
									this.ctx.font = '10px  SimSun';
									this.ctx.fillText(str+'',this.x0 + (nowRadius-this.ringWidth/2) * Math.sin(nowAngle), this.y0 - (nowRadius-this.ringWidth/2) * Math.cos(nowAngle));
									if (str >= 180) {
										this.ctx.fillText(30*flag,this.x0 + (nowRadius+this.ringWidth*2-this.ringWidth/2) * Math.sin(nowAngle), this.y0 - (nowRadius+this.ringWidth*2-this.ringWidth/2) * Math.cos(nowAngle));
										flag = flag + 1;
									} 
								}
								else if(i%2 === 0) {
									var endX = this.x0 + (nowRadius + this.middleScale) * Math.sin(nowAngle);
									var endY = this.y0 - (nowRadius + this.middleScale) * Math.cos(nowAngle);
								}
								else {
									var endX = this.x0 + (nowRadius + this.shortScale) * Math.sin(nowAngle);
									var endY = this.y0 - (nowRadius + this.shortScale) * Math.cos(nowAngle);
								}
								
								//中间的刻度 0和360显示位置重合，先清除360再画一个0
								//this.ctx.clearRect(this.x0-16,this.y0 - this.innerR - this.ringWidth * 5.5-8,28,15);
								//this.ctx.fillText('0',this.x0, this.y0 - this.innerR - this.ringWidth * 5.5);
								
								//this.ctx.moveTo(startX, startY);
								//this.ctx.lineTo(endX, endY);
								//this.ctx.setLineDash([1,0]);
								this.ctx.stroke();	
							}	
						},
								
						// 内圈中心文字
						drawCenterText(item) {
							
							// 清除中心文字，避免同上个值重复显示
							this.ctx.clearRect(this.x0-0.6*this.innerR,this.y0-0.6*this.innerR,this.innerR*1.2,this.innerR*1.2);
							
							this.ctx.beginPath();
							this.ctx.font = '16px  SimSun';
							this.ctx.fillStyle = '#303133';
							this.ctx.fillText(item.name,this.x0,this.y0-25);
							this.ctx.fillStyle = 'red';
							this.ctx.textAlign = 'center';
							this.ctx.font = '20px  SimSun';
							this.ctx.fillText(item.value,this.x0,this.y0);
							this.ctx.fillStyle = '#303133';
							this.ctx.font = '16px  SimSun';
							this.ctx.fillText(item.time,this.x0,this.y0+25);
						},
				
						//按数据值填充色块
						fillColor(gmList) {
							let _this = this;
							try{
								for(i=0,len=gmList.length; i< len; i++){
									// 填充颜色
									_this.ctx.beginPath();
									let angle = Math.PI/180*gmList[i].value;
									if (i ==0) {
										_this.ctx.strokeStyle='#FF55FF';
									} else if (i==1){
										_this.ctx.strokeStyle='#00ff00';
									}else if (i==2) {
										_this.ctx.strokeStyle='#00df00';
									}else if (i==3) {
										_this.ctx.strokeStyle='#00cf00';
									}else if (i==4) {
										_this.ctx.strokeStyle='#00bf00';
									}else{
										_this.ctx.strokeStyle='#00a000';
									}
									//_this.ctx.strokeStyle = i>0? '#2AC845' : '#FF55FF';
									_this.ctx.lineWidth = _this.ringWidth-1;
									_this.ctx.arc(_this.x0,_this.y0,_this.innerR + _this.ringWidth*(i+0.5),-Math.PI/2,(angle-Math.PI/2));
									_this.ctx.stroke();
								}
							}
							catch(e) {
								return;
							}
						},
						
						fillColor_ex(gmList) {
							let _this = this;
							
							var cicle_radius = (this.canvasWidth-10)/12
							
							try{
								var h=(this.canvasWidth-10)/24;
								for(i=0,len=gmList.length; i< len; i++){
									
									// 填充颜色
									var r=h*1.0*(0.45+(i*0.05)); 
									
									_this.ctx.beginPath();
									
									//_this.ctx.strokeStyle='#42C217'//'#42C217';
									let angle = Math.PI/180*gmList[i].value;
									
									// 设置圆的中心点和半径
									var centerX = this.x0 + cicle_radius*(i+1) * Math.sin(angle);
									var centerY = this.y0 - cicle_radius*(i+1) * Math.cos(angle);
									const radius = 70;
									 
									// 开始绘制实心圆
									console.log(gmList)
									_this.ctx.arc(centerX,centerY, r, 0, 2 * Math.PI, false);
									_this.ctx.fillStyle = '#42C217'; // 设置填充颜色
									_this.ctx.fill(); // 填充
									//_this.ctx.stroke();
									console.log("00000")
									
									/*_this.ctx.lineWidth = _this.ringWidth-1;
									_this.ctx.arc(_this.x0,_this.y0,_this.innerR + _this.ringWidth*(i+0.5),-Math.PI/2,(angle-Math.PI/2));
									_this.ctx.stroke();*/
								}
							}
							catch(e) {
								return;
							}
						},
						
						fill_jxfwColor(_jx,_fw) {
							let _this = this;
							try{
								if (_fw.value<=360 && _fw.value>0) {
									// 填充方位颜色
									_this.ctx.beginPath();
									var angle = Math.PI/180*_fw.value; 
									console.log("fw:",angle);
									_this.ctx.strokeStyle = '#2E64FE';
									_this.ctx.lineWidth = _this.ringWidth-1;
									_this.ctx.arc(_this.x0,_this.y0,_this.innerR + _this.ringWidth*(5+0.5),-Math.PI/2,(angle-Math.PI/2));
									_this.ctx.stroke();
								}
								
								if (_jx.value <=180 && _jx.value>0) {
									// 填充井斜颜色
									_this.ctx.beginPath();
									var angle1 = Math.PI/180*_jx.value; 
									console.log("jx:",angle1);
									_this.ctx.strokeStyle = '#F7C709';
									//'#00ff00' '#00d000' #00b000 #009000 #0000ff #00cf04
									// '#00ff00' '#00d000' #00a800 #008000 #0000ff #00cf04
									_this.ctx.lineWidth = _this.ringWidth-1;
									_this.ctx.arc(_this.x0,_this.y0,_this.innerR + _this.ringWidth*(6+0.5),Math.PI/2,(angle1+Math.PI/2));
									_this.ctx.stroke();
								}
								
								if (angle > 0) {
									//this.drawOurterScale();
									this.drawOurterScaleText();
								}
							}
							catch(e) {
								return;
							}
						},
						
						handleCommand(command) {
							if (command === 'exit') {
								loginout();
							}
						},
					},
				}
			);
			
		
			var wsUrl = '';
			if (true) {
				wsUrl = "ws://119.3.242.17:8880/ws";
			} else{
				wsUrl = "ws://localhost:8880/ws";
			}
			
			//var wsUrl = config.testConfig.wsUrl;
			ws = new WebSocket(wsUrl);
	
			try {
	
				ws.onopen = function () {
	
					var url = decodeURI(window.location.href);
					var argsIndex = url .split("?id=");
					var arg = argsIndex[1];
					
					var req = {
						id:arg,
						user:localStorage.getItem("online_user"),
						lang:localStorage.getItem("lang"),
					}
					var reqJson = JSON.stringify(req);
					
					console.log(reqJson);
					
					//let sendjson = '{"id":'+'"'+arg+'",'+'"user":"ljs"}'
					ws.send(reqJson);
				}
	
				ws.onclose = function () {
					if (ws) {
						ws.close();
						ws = null;
					}
	
					console.log("连接服务器-关闭")
				}
	
				ws.onmessage = function (result) {
	
					//console.log(result.data);
					var data = JSON.parse(result.data);
					console.log("recv server msg:",data);
					if (data.msg == null) {
						return;
					}
					
					//var jx = {value:0,time:'00:00:00'};
					//var fw = {value:0,time:'00:00:00'};
					if (data.type == 0) {
						for(i=0,len=data.msg.length;i<len;i++){
							if(data.msg[i].unit =="Mpa" && appVue.$data.radio1=="2"){
								data.msg[i].unit = "psi"
								var f = parseFloat(data.msg[i].decodevalue) *145.038
								data.msg[i].decodevalue = f.toFixed(2).toString()
							} else if (data.msg[i].unit =="℃" && appVue.$data.radio2=="2"){
								data.msg[i].unit = "℉"
								var f = parseFloat(data.msg[i].decodevalue) *1.8 +32
								data.msg[i].decodevalue = f.toFixed(2).toString()
							}
							appVue.$data.tableData.unshift(data.msg[i]);
							
							console.log("paraname:",data.msg[i].paraname)
							if (data.msg[i].paraname === 'GTF') {
								appVue.$data.gmList.unshift({name:data.msg[i].paraname,value:data.msg[i].decodevalue,time:data.msg[i].time.slice(11)});
							}
							
							if(data.msg[i].paraname === 'G_GHS'){
								data.msg[i].paraname = "GTF"
								appVue.$data.gmList.unshift({name:data.msg[i].paraname,value:data.msg[i].decodevalue,time:data.msg[i].time.slice(11)});
							}
							
							if (data.msg[i].paraname === 'INC' || data.msg[i].paraname === 'G_INC') {
								appVue.$data.jx = {value:data.msg[i].decodevalue,time:data.msg[i].time.slice(11)};
							}
							if (data.msg[i].paraname === 'AZ' || data.msg[i].paraname === 'G_AZ') {
								appVue.$data.fw = {value:data.msg[i].decodevalue,time:data.msg[i].time.slice(11)};
							}
						}
						
						console.log("tableData:",appVue.$data.tableData)
						if (appVue.$data.tableData.length > 20){
							appVue.$data.tableData.splice(20);
						}
						if (appVue.$data.gmList.length > 5) {
							appVue.$data.gmList.splice(5);
						}
						
						//初始化绘制空度盘
						if (appVue.$data.gmList.length>0){
							gtf = appVue.$data.gmList[0]
							if(gtf.paraname=="MTF"){
								appVue.initCanvas_ex(1);
							}else{
								appVue.initCanvas_ex(0);
							}
						}else{
							appVue.initCanvas_ex(0);
						}
						
						
						//jx = {value:90,time:'00:00:00'};;
						//fw = {value:190,time:'00:00:00'};;
						console.log("jx:",appVue.$data.jx);
						console.log("fw:",appVue.$data.fw);
						var gtf = "";
						if (appVue.$data.gmList.length>0){
							gtf = appVue.$data.gmList[0]
							appVue.drawFourAngleText_ex(gtf.value,'87',appVue.$data.jx,appVue.$data.fw);
						}else{
							appVue.drawFourAngleText_ex('','87',appVue.$data.jx,appVue.$data.fw);
						}
						
						console.log("gmlist:",appVue.$data.gmList);
						appVue.fillColor_ex(appVue.$data.gmList);
						//appVue.fill_jxfwColor(appVue.$data.jx,appVue.$data.fw);
						
						/*if (appVue.gmList.length >0) {
							appVue.drawCenterText({name:appVue.gmList[0].name,value:appVue.gmList[0].value,time:appVue.gmList[0].time});
						}*/
						
					}
				}
	
				ws.onerror = function () {
					if (ws) {
						ws.close();
						ws = null;
					}
	
					console.log("连接服务器-关闭")
				}
	
			} catch (e) {
				alert(e.message);
			}