707 lines
23 KiB
JavaScript
707 lines
23 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);
|
|||
|
|
|
|||
|
|
var appVue = new Vue(
|
|||
|
|
{
|
|||
|
|
el:"#app",
|
|||
|
|
data(){
|
|||
|
|
var url = decodeURI(window.location.href);
|
|||
|
|
var argsIndex = url .split("?id=");
|
|||
|
|
var arg = argsIndex[1];
|
|||
|
|
|
|||
|
|
// 获取当前屏幕的分辨率
|
|||
|
|
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:screenH*0.7,
|
|||
|
|
|
|||
|
|
ctx: '', //画笔工具
|
|||
|
|
canvasWidth: screenW*0.6, //canvas的宽高
|
|||
|
|
canvasHeight: screenH*0.7,
|
|||
|
|
x0: '', // 画布中心点
|
|||
|
|
y0: '',
|
|||
|
|
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',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
|
|||
|
|
this.initCanvas();
|
|||
|
|
|
|||
|
|
var url = decodeURI(window.location.href);
|
|||
|
|
var argsIndex = url .split("?id=");
|
|||
|
|
var arg = argsIndex[1];
|
|||
|
|
|
|||
|
|
//数据展示获取数据
|
|||
|
|
var _this = this;
|
|||
|
|
axios.post('/deescloud/getWellRealData',
|
|||
|
|
{
|
|||
|
|
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('','',_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);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
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',
|
|||
|
|
{
|
|||
|
|
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('','',_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;
|
|||
|
|
// 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();
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 绘制度盘上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);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 绘制度盘上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);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 绘制内圈
|
|||
|
|
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();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 绘制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();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 绘制外圈刻度
|
|||
|
|
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();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 绘制外圈刻度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;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
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")
|
|||
|
|
}
|
|||
|
|
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 === '重工面' || data.msg[i].paraname === '磁工面') {
|
|||
|
|
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 === '随钻陀螺重工面'){
|
|||
|
|
data.msg[i].paraname = "重工面"
|
|||
|
|
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 === '井斜' || data.msg[i].paraname === '随钻陀螺井斜') {
|
|||
|
|
appVue.$data.jx = {value:data.msg[i].decodevalue,time:data.msg[i].time.slice(11)};
|
|||
|
|
}
|
|||
|
|
if (data.msg[i].paraname === '方位' || data.msg[i].paraname === '随钻陀螺方位') {
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//初始化绘制空度盘
|
|||
|
|
appVue.initCanvas();
|
|||
|
|
|
|||
|
|
//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);
|
|||
|
|
appVue.drawFourAngleText('#1','87',appVue.$data.jx,appVue.$data.fw);
|
|||
|
|
|
|||
|
|
console.log("gmlist:",appVue.$data.gmList);
|
|||
|
|
appVue.fillColor(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);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|