deesCloud-web/scripts/welldata.js

592 lines
20 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

//组件
var Wellcomponent = {
template:`
<div>
<el-tag v-show="if_show_tag" style="text-align: center;width: 100%;margin-top: 10px;">
<marquee>
<i class="el-icon-coin"></i>
<span>井在线数:&nbsp;{{online_num}}口</span>
<span style="margin-right: 5px;"></span>
<i class="el-icon-coin"></i>
<span>井离线数:&nbsp;{{offline_num}}口</span>
<span style="margin-right: 10px;"></span>
<i class="el-icon-connection"></i>
<span>在线井类型:&nbsp;</span>
<span>MWD:&nbsp;{{mwd}}口</span>
<span>近钻头:&nbsp;{{near_bit}}口</span>
<span>电阻率:&nbsp;{{resistivity}}口</span>
<span>探管式方位伽马:&nbsp;{{gamma1}}口</span>
<span>钻铤式方位伽马:&nbsp;{{gamma2}}口</span>
<span>&nbsp;{{context}}</span>
</marquee>
</el-tag>
<div style="display: flex;">
<el-input v-model="input" placeholder="请输入井名" clearable style="width: 30%;"></el-input>
<el-button style="margin-left: 5px;" id ="bt_serach" plain type="primary" icon="el-icon-search" @click="getWell(input)">搜索</el-button>
</div>
<div class="span">
<el-table
:data="tableData"
style="width: 100%;font-size:14px;background-color: #304156;"
:height="tHeight"
:cell-style="{background:'#304156'}"
border
>
<el-table-column
prop="wellNameSource"
label="井名称"
:width="150"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="wellName"
label="井流水号"
:width="120">
</el-table-column>
<el-table-column
prop="wellstate"
label="井状态"
width="60">
</el-table-column>
<el-table-column
prop="welltime"
label="建井时间"
:width="170">
</el-table-column>
<el-table-column
prop="welloperator"
label="操作用户"
:width="150"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
label="操作"
width="160">
<template slot-scope="scope">
<div style="flex: 1;display: inline-flex;">
<div v-if="!scope.row.rt_flag">
<svg style="bottom: 5px;" t="1683783351758" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2560" width="8" height="8"><path d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z" fill="#d81e06" p-id="2561"></path></svg>
</div>
<div style="margin-right: 10px">
<el-button @click="handleClick(scope.row)" type="text" size="medium">实时数据</el-button>
</div>
<div v-if="!scope.row.es_flag && if_show">
<svg t="1683783351758" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2560" width="8" height="8"><path d="M512 512m-469.333333 0a469.333333 469.333333 0 1 0 938.666666 0 469.333333 469.333333 0 1 0-938.666666 0Z" fill="#d81e06" p-id="2561"></path></svg>
</div>
<div>
<el-button v-show="if_show" @click="showWorkingCondition(scope.row)" type="text" size="medium">井况信息</el-button>
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="block">
<span class="demonstration" style="background-color: #ECF5FF;"></span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[50,100, 200, 300]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="recordTotal" style="background-color: #ECF5FF;">
</el-pagination>
</div>
<!--<marquee><font size=+3 color=red>Hello, World</font></marquee>-->
<el-drawer
title="井况信息"
:visible.sync="drawer"
:direction="direction"
:before-close="handleClose"
size='40%'
>
<el-descriptions class="margin-top" :column="2" size="medium" border :labelStyle="LS" :contentStyle="CS" style="font-size:13px">
<el-descriptions-item label="项目名称">{{Wellname}}</el-descriptions-item>
<el-descriptions-item label="服务地点">{{Locale}}</el-descriptions-item>
<el-descriptions-item label="服务类型">{{ServiceType}}</el-descriptions-item>
<el-descriptions-item label="客户名称">{{ClientName}}</el-descriptions-item>
<el-descriptions-item label="井队名称">{{DrillingCrewName}}</el-descriptions-item>
<el-descriptions-item label="井队所属公司">{{DrillingCrewCompany}}</el-descriptions-item>
<el-descriptions-item label="井型">{{Welltype}}</el-descriptions-item>
<el-descriptions-item label="服务人员">{{OpUser}}</el-descriptions-item>
<el-descriptions-item label="工作状态">{{WorkState}}</el-descriptions-item>
<el-descriptions-item label="特殊状态说明">{{SpecialNote}}</el-descriptions-item>
<el-descriptions-item label="设计井深(m)">{{DesignDepth}}</el-descriptions-item>
<el-descriptions-item label="设计最大井斜(°)">{{WellDeviation}}</el-descriptions-item>
<el-descriptions-item label="设计方位(°)">{{DesignOrientation}}</el-descriptions-item>
<el-descriptions-item label="经纬度坐标(°)">{{LongitudeLatitude}}</el-descriptions-item>
<el-descriptions-item label="大地坐标X">{{report_longitude_x}}</el-descriptions-item>
<el-descriptions-item label="大地坐标Y">{{report_latitude_y}}</el-descriptions-item>
<el-descriptions-item label="井位标称值">{{GTBTDIP}}</el-descriptions-item>
<el-descriptions-item label="水平段长度(m)">{{Length_of_horizontal_section}}</el-descriptions-item>
<el-descriptions-item label="近钻头钻遇率(%)">{{Rate}}</el-descriptions-item>
<el-descriptions-item label="钻次">{{DrillingTimes}}</el-descriptions-item>
<el-descriptions-item label="仪器角差(°)">{{Instrument_angle_difference}}</el-descriptions-item>
<el-descriptions-item label="钻具角差(°)">{{Angle_difference_of_drilling_tool}}</el-descriptions-item>
<el-descriptions-item label="泥浆类型">{{MudType}}</el-descriptions-item>
<el-descriptions-item label="泥浆密度(g/cm^3)">{{MudDensity}}</el-descriptions-item>
<el-descriptions-item label="粘度(s)">{{MudViscosity}}</el-descriptions-item>
<el-descriptions-item label="排量(L/s)">{{OutputVolume}}</el-descriptions-item>
<el-descriptions-item label="含沙量(%)">{{Sediment_concentration}}</el-descriptions-item>
<el-descriptions-item label="螺杆弯度(°)">{{Screw_curvature}}</el-descriptions-item>
<el-descriptions-item label="循环时间(h)">{{LoopTime}}</el-descriptions-item>
<el-descriptions-item label="入井井深(m)">{{EntryWellDepth}}</el-descriptions-item>
<el-descriptions-item label="总进尺(m)">{{TotalFootage}}</el-descriptions-item>
<el-descriptions-item v-if="if_show_t" label="最高温度(℃)">{{MaxTemp}}</el-descriptions-item>
<el-descriptions-item v-if="!if_show_t" label="最高温度(℉)">{{MaxTemp}}</el-descriptions-item>
<el-descriptions-item v-if="if_show_m" label="最大井底压力(MPa)">{{MaxPressure}}</el-descriptions-item>
<el-descriptions-item v-if="!if_show_m" label="最大井底压力(psi)">{{MaxPressure}}</el-descriptions-item>
<el-descriptions-item label="钻具组合">{{BHA}}</el-descriptions-item>
<el-descriptions-item label="仪器组合">{{InstrumentCombination}}</el-descriptions-item>
</el-descriptions>
</el-drawer>
</div>
`,
data(){
// 获取当前屏幕的分辨率
let screenW = window.screen.width;
let screenH = window.innerHeight;
console.log("screen width:",screenW);
console.log("screen height:",screenH);
return {
tHeight:screenH-192-31,
tableData: Array(0),
input:'',
currentPage: 1,
pagesize:50,
recordTotal:0,
/*Wellname:"",
Welltype:"",
OpUser:"",
DrillingTimes:"",
MudType:"",
MudDensity:"",
MudViscosity:"",
OutputVolume:"",
Sediment_concentration:"",
WellDepth:"",*/
report_longitude:"",
report_latitude:"",
report_longitude_x:"",
report_latitude_y:"",
if_show:true,
online_num:0,
offline_num:0,
mwd:0,
near_bit:0,
resistivity:0,
gamma1:0,
gamma2:0,
context:'',
if_show_tag:false,
drawer:false,
direction: 'rtl',
Wellname:'',
Locale:'',
ServiceType:'',
ClientName:'',
DrillingCrewName:'',
DrillingCrewCompany:'',
Welltype:'',
OpUser:'',
WorkState:'',
SpecialNote:'',
DesignDepth:'',
WellDeviation:'',
DesignOrientation:'',
LongitudeLatitude:'',
GTBTDIP:'',
Length_of_horizontal_section:'',
Rate:'',
DrillingTimes:'',
Instrument_angle_difference:'',
Angle_difference_of_drilling_tool:'',
MudType:'',
MudDensity:'',
MudViscosity:'',
OutputVolume:'',
Sediment_concentration:'',
Screw_curvature:'',
LoopTime:'',
EntryWellDepth:'',
TotalFootage:'',
BHA:'',
InstrumentCombination:'',
MaxTemp:'',
MaxPressure:'',
LS:{"width":"80px"},
CS:{"min-width": "150px","word-break": "break-all"},
if_show_t:true,
if_show_m:true,
}
},
mounted() {
if (localStorage.getItem("level")==4) {
this.$data.if_show = false;
}
//if (localStorage.getItem("online_user")=="张鹏里"||localStorage.getItem("online_user")=="李俊杉"||localStorage.getItem("online_user")=="王箭雨"||localStorage.getItem("online_user")=="测试3") {
this.$data.if_show_tag = true;
//}
var _this = this;
axios.post('/deescloud/get_page_setting', {
opuser:localStorage.getItem("online_user"),
opuser_uuid:localStorage.getItem("uuid"),
})
.then(function (response) {
if(response.data.r1=="2"){
_this.$data.if_show_m=false;
}
if(response.data.r2 =="2"){
_this.$data.if_show_t=false;
}
})
.catch(function (error) {
console.log(error);
});
var objs;
axios.post('/deescloud/getWell', {
opuser:localStorage.getItem("online_user"),
opuser_uuid:localStorage.getItem("uuid"),
id: "",
index: this.$data.currentPage,
count: this.$data.pagesize
})
.then(function (response) {
console.log(response.data);
objs = response.data.data;
rcnt = response.data.total;
_this.$data.tableData = objs;
_this.$data.recordTotal = rcnt;
})
.catch(function (error) {
console.log(error);
});
axios.post('/deescloud/getWellAnalysisResult')
.then(function (response) {
console.log(response.data);
_this.$data.online_num = response.data.well_online;
_this.$data.offline_num = response.data.well_offline;
_this.$data.mwd = response.data.mwd;
_this.$data.near_bit = response.data.near_bit;
_this.$data.resistivity = response.data.resistivity;
_this.$data.gamma1 = response.data.gamma1;
_this.$data.gamma2 = response.data.gamma2;
_this.$data.context= response.data.context;
})
.catch(function (error) {
console.log(error);
});
},
methods: {
showWorkingCondition(row){
this.$data.drawer = true;
var _this = this;
axios.post('/deescloud/getWellWorkingCondition', {
opuser:localStorage.getItem("online_user"),
opuser_uuid:localStorage.getItem("uuid"),
wellname: row.wellNameSource,
})
.then(function (response) {
console.log(response.data);
let data = response.data.es;
_this.$data.Wellname=data.Wellname;
_this.$data.Locale=data.Locale;
_this.$data.ServiceType=data.ServiceType;
_this.$data.ClientName=data.ClientName;
_this.$data.DrillingCrewName=data.DrillingCrewName;
_this.$data.DrillingCrewCompany=data.DrillingCrewCompany;
_this.$data.Welltype=data.Welltype;
_this.$data.OpUser=data.OpUser;
_this.$data.WorkState=data.WorkState;
_this.$data.SpecialNote=data.SpecialNote;
_this.$data.DesignDepth=data.DesignDepth;
_this.$data.WellDeviation=data.WellDeviation;
_this.$data.DesignOrientation=data.DesignOrientation;
_this.$data.LongitudeLatitude=data.LongitudeLatitude;
_this.$data.GTBTDIP=data.GTBTDIP;
_this.$data.Length_of_horizontal_section=data.Length_of_horizontal_section;
_this.$data.Rate=data.Rate;
_this.$data.DrillingTimes=data.DrillingTimes;
_this.$data.Instrument_angle_difference=data.Instrument_angle_difference;
_this.$data.Angle_difference_of_drilling_tool=data.Angle_difference_of_drilling_tool;
_this.$data.MudType=data.MudType;
_this.$data.MudDensity=data.MudDensity;
_this.$data.MudViscosity=data.MudViscosity;
_this.$data.OutputVolume=data.OutputVolume;
_this.$data.Sediment_concentration=data.Sediment_concentration;
_this.$data.Screw_curvature=data.Screw_curvature;
_this.$data.LoopTime=data.LoopTime;
_this.$data.EntryWellDepth=data.EntryWellDepth;
_this.$data.TotalFootage=data.TotalFootage;
_this.$data.BHA=data.BHA;
_this.$data.InstrumentCombination=data.InstrumentCombination;
_this.$data.MaxTemp = data.MaxTemp;
_this.$data.MaxPressure = data.MaxPressure;
_this.$data.report_longitude_x = response.data.report_longitude_x;
_this.$data.report_latitude_y = response.data.report_latitude_y;
})
.catch(function (error) {
console.log(error);
});
},
handleClose(done) {
done();
},
getWell(_search_name){
document.getElementById("bt_serach").blur();
this.$data.currentPage=1;
var _this = this;
var objs;
axios.post('/deescloud/getWell', {
opuser:localStorage.getItem("online_user"),
opuser_uuid:localStorage.getItem("uuid"),
id: _search_name,
index: this.$data.currentPage,
count: this.$data.pagesize
})
.then(function (response) {
console.log(response.data);
objs = response.data.data;
rcnt = response.data.total;
_this.$data.tableData = objs;
_this.$data.recordTotal = rcnt;
})
.catch(function (error) {
console.log(error);
});
axios.post('/deescloud/getWellAnalysisResult')
.then(function (response) {
console.log(response.data);
_this.$data.online_num = response.data.well_online;
_this.$data.offline_num = response.data.well_offline;
_this.$data.mwd = response.data.mwd;
_this.$data.near_bit = response.data.near_bit;
_this.$data.resistivity = response.data.resistivity;
_this.$data.gamma1 = response.data.gamma1;
_this.$data.gamma2 = response.data.gamma2;
_this.$data.context= response.data.context;
})
.catch(function (error) {
console.log(error);
});
},
handleSizeChange(val) {
//console.log(`每页 ${val} 条`);
this.$data.pagesize = val;
var _this = this;
var objs;
axios.post('/deescloud/getWell', {
opuser:localStorage.getItem("online_user"),
opuser_uuid:localStorage.getItem("uuid"),
id: this.$data.input,
index: this.$data.currentPage,
count: this.$data.pagesize
})
.then(function (response) {
console.log(response.data);
objs = response.data.data;
rcnt = response.data.total;
_this.$data.tableData = objs;
_this.$data.recordTotal = rcnt;
})
.catch(function (error) {
console.log(error);
});
axios.post('/deescloud/getWellAnalysisResult')
.then(function (response) {
console.log(response.data);
_this.$data.online_num = response.data.well_online;
_this.$data.offline_num = response.data.well_offline;
_this.$data.mwd = response.data.mwd;
_this.$data.near_bit = response.data.near_bit;
_this.$data.resistivity = response.data.resistivity;
_this.$data.gamma1 = response.data.gamma1;
_this.$data.gamma2 = response.data.gamma2;
_this.$data.context= response.data.context;
})
.catch(function (error) {
console.log(error);
});
},
handleCurrentChange(val) {
//console.log(`当前页: ${val}`);
this.$data.currentPage = val;
var _this = this;
var objs;
axios.post('/deescloud/getWell', {
opuser:localStorage.getItem("online_user"),
opuser_uuid:localStorage.getItem("uuid"),
id: this.$data.input,
index: this.$data.currentPage,
count: this.$data.pagesize
})
.then(function (response) {
console.log(response.data);
objs = response.data.data;
rcnt = response.data.total;
_this.$data.tableData = objs;
_this.$data.recordTotal = rcnt;
})
.catch(function (error) {
console.log(error);
});
axios.post('/deescloud/getWellAnalysisResult')
.then(function (response) {
console.log(response.data);
_this.$data.online_num = response.data.well_online;
_this.$data.offline_num = response.data.well_offline;
_this.$data.mwd = response.data.mwd;
_this.$data.near_bit = response.data.near_bit;
_this.$data.resistivity = response.data.resistivity;
_this.$data.gamma1 = response.data.gamma1;
_this.$data.gamma2 = response.data.gamma2;
_this.$data.context= response.data.context;
})
.catch(function (error) {
console.log(error);
});
},
handleClick(row){
console.log("实时数据:",row.wellID);
var _this = this;
axios.post('/deescloud/get_page_setting', {
opuser:localStorage.getItem("online_user"),
opuser_uuid:localStorage.getItem("uuid"),
})
.then(function (response) {
if(response.data.r5=="2"){
var url = 'realdata.html?id='+row.wellNameSource;
url = encodeURI(url);
window.open(url, "");
}else{
var url = 'realdata_ex.html?id='+row.wellNameSource;
url = encodeURI(url);
window.open(url, "");
}
})
.catch(function (error) {
console.log(error);
});
},
flexColumnWidth(str, tableData, flag = 'max') {
// str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
// flag为可选值可不传该参数,传参时可选'max'或'equal',默认为'max'
// flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
let maxContext = new Array();
str = str + ''
let columnContent = ''
if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
return '120px'
}
if (!str || !str.length || str.length === 0 || str === undefined) {
return '120px'
}
if (flag === 'equal') {
// 获取该列中第一个不为空的数据(内容)
for (let i = 0; i < tableData.length; i++) {
if (tableData[i][str].length > 0) {
// console.log('该列数据[0]:', tableData[0][str])
columnContent = tableData[i][str]
break
}
}
} else {
// 获取该列中最长的数据(内容)
let index = 0
for (let i = 0; i < tableData.length; i++) {
if (tableData[i][str] === null) {
return
}
const now_temp = tableData[i][str] + ''
const max_temp = tableData[index][str] + ''
if (now_temp.length >= max_temp.length) {
index = i
}
}
columnContent = tableData[index][str]
maxContext.push(columnContent);
}
// console.log('该列数据[i]:', columnContent)
// 以下分配的单位长度可根据实际需求进行调整
//console.log(columnContent);
let max_flex_width = 0
for (let i = 0; i < maxContext.length; i++) {
let flexWidth = 0;
for (const char of maxContext[i]) {
if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
// 如果是英文字符为字符分配8个单位宽度
flexWidth += 8
} else if (char >= '\u4e00' && char <= '\u9fa5') {
// 如果是中文字符为字符分配15个单位宽度
flexWidth += 15
} else {
// 其他种类字符为字符分配8个单位宽度
flexWidth += 8
}
}
if (flexWidth>max_flex_width) {
max_flex_width = flexWidth;
console.log(maxContext[i]);
}
}
if (max_flex_width < 120) {
// 设置最小宽度
max_flex_width = 120
}
if (max_flex_width > 300) {
// 设置最大宽度
max_flex_width = 300
}
//flexWidth = flexWidth;//20-padding
console.log("max_flex_width:",max_flex_width);
return max_flex_width + 'px'
},
}
}