1147 lines
38 KiB
JavaScript
1147 lines
38 KiB
JavaScript
|
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|