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);
|
||
}
|
||
|
||
|