Skip to content

P
pdczt_qd
Commit 8b364239 by jiang'yun
Options

修改

parent 9da0a538
Showing with 53 additions and 8370 deletions
src/views/efficiencyAnalysis/jcxx/components/WellDepthStructure.vue
......@@ -47,37 +47,32 @@
</el-row> -->
<el-table border v-loading="loading" :data="jsdbList" @selection-change="handleSelectionChange"
height="calc(100vh - 230px)" class="table-container">
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="井号" align="center" prop="jh" min-width="100" show-overflow-tooltip fixed />
<el-table-column label="套管层次" align="center" prop="tgcc" min-width="120" show-overflow-tooltip />
<el-table-column label="钻头直径mm" align="center" prop="ztzj" min-width="120" show-overflow-tooltip />
<el-table-column label="井深" align="center" prop="js" min-width="90" show-overflow-tooltip />
<el-table-column label="套管外径" align="center" prop="tgwj" min-width="120" show-overflow-tooltip />
<el-table-column label="套管顶部深度" align="center" prop="tgdbsd" min-width="120" show-overflow-tooltip />
<el-table-column label="套管鞋深度" align="center" prop="tgxsd" min-width="120" show-overflow-tooltip />
<el-table-column label="人工井底深度" align="center" prop="rgjdsd" min-width="120" show-overflow-tooltip />
<el-table-column label="阻流环深度1" align="center" prop="zlhsd" min-width="120" show-overflow-tooltip />
<el-table-column label="水泥外返深度" align="center" prop="snwfsd" min-width="120" show-overflow-tooltip />
<el-table-column label="扶正器" align="center" prop="tgfzq" min-width="120" show-overflow-tooltip />
<!-- <el-table-column label="套管附件1" align="center" prop="tgfj1" />
<el-table-column label="套管附件2" align="center" prop="tgfj2" />
<el-table-column label="套管附件3" align="center" prop="tgfj3" />
<el-table-column label="套管附件4" align="center" prop="tgfj4" />
<el-table-column label="套管附件深度1" align="center" prop="tgfj1sd" />
<el-table-column label="套管附件深度2" align="center" prop="tgfj2sd" />
<el-table-column label="套管附件深度3" align="center" prop="tgfj3sd" />
<el-table-column label="套管附件深度4" align="center" prop="tgfj4sd" />
<el-table-column label="套补距" align="center" prop="tbj" />
<el-table-column label="阻流环深度2" align="center" prop="zlhsd1" />
<el-table-column label="阻流环深度3" align="center" prop="zlhsd2" />
<el-table-column label="套管附件5" align="center" prop="tgfj5" />
<el-table-column label="套管附件6" align="center" prop="tgfj6" />
<el-table-column label="套管附件7" align="center" prop="tgfj7" />
<el-table-column label="套管附件8" align="center" prop="tgfj8" />
<el-table-column label="套管附件深度5" align="center" prop="tgfj5sd" />
<el-table-column label="套管附件深度6" align="center" prop="tgfj6sd" />
<el-table-column label="套管附件深度7" align="center" prop="tgfj7sd" />
<el-table-column label="套管附件深度8" align="center" prop="tgfj8sd" /> -->
<!-- 基础信息列 -->
<el-table-column label="井号" align="center" prop="jh" min-width="95" />
<el-table-column label="层次项目" align="center" prop="tgcc" min-width="95" />
<el-table-column label="钻头直径(mm)" align="center" prop="ztzj" min-width="100" />
<el-table-column label="井深(m)" align="center" prop="js" min-width="70" />
<el-table-column label="套管外径(mm)" align="center" prop="tgwj" min-width="80" />
<el-table-column label="套管顶部深度(m)" align="center" prop="tgdbsd" min-width="100" />
<el-table-column label="套管鞋深度(m)" align="center" prop="tgxsd" min-width="90" />
<el-table-column label="人工井底深度(m)" align="center" prop="rgjdsd" min-width="100" />
<el-table-column label="阻流环深度(m)" align="center" prop="zlhsd" min-width="100" />
<el-table-column label="水泥外返深度(m)" align="center" prop="snwfsd" min-width="100" />
<el-table-column label="套管扶正器深度(m)" align="center" prop="tgfzq" min-width="80" />
<!-- 多级表头：套管附件深度(m) -->
<el-table-column label="套管附件深度(m)" align="center" min-width="90">
<!-- <el-table-column label="磁位" align="center" prop="cw" min-width="90" />-->
<!-- 图片中磁位右侧还有7个空列，用prop占位（可根据实际字段调整） -->
<el-table-column label="套管附件深度1" align="center" prop="tgfj1sd" min-width="90" />
<el-table-column label="套管附件深度2" align="center" prop="tgfj2sd" min-width="90" />
<el-table-column label="套管附件深度3" align="center" prop="tgfj3sd" min-width="90" />
<el-table-column label="套管附件深度4" align="center" prop="tgfj4sd" min-width="90" />
<el-table-column label="套管附件深度5" align="center" prop="tgfj5sd" min-width="90" />
<el-table-column label="套管附件深度6" align="center" prop="tgfj6sd" min-width="90" />
<el-table-column label="套管附件深度7" align="center" prop="tgfj7sd" min-width="90" />
<el-table-column label="套管附件深度8" align="center" prop="tgfj8sd" min-width="90" />
</el-table-column>
<el-table-column label="操作" align="center" width="140" class-name="small-padding fixed-width" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
......
src/views/wellDesign/components/BitDesignRecommendation copy 2.vue deleted 100644 → 0
<template>
<div class="bit-design-recommendation">
<!-- 控制栏 -->
<div class="control-bar">
<div class="control-item">
<label>开次:</label>
<span class="control-value">{{ displayOpeningTimes }}</span>
</div>
<!-- 显示当前开次信息 -->
<!-- <div class="control-item" v-if="currentOpeningInfo">
<label>当前开次:</label>
<span class="opening-info">{{ currentOpeningInfo }}</span>
</div> -->
<!-- 调试信息显示 -->
<!-- <div class="control-item" v-if="debugInfo">
<label>调试信息:</label>
<span class="debug-info">{{ debugInfo }}</span>
</div> -->
<!-- <div class="control-item">
<label>深度范围:</label>
<el-slider v-model="controlForm.depthRange" range :min="0" :max="5000" :step="100"
style="width: 200px;" />
</div> -->
<div class="control-item">
<label>钻头尺寸mm:</label>
<span class="control-value">{{ displayBitSize }}</span>
</div>
<el-button type="primary" @click="handleQuery">查询</el-button>
</div>
<!-- 主要内容区域 -->
<div class="main-content">
<!-- 左侧图表区域 -->
<div class="charts-section">
<div class="charts-grid">
<!-- 刀翼总数 -->
<div class="chart-item">
<div ref="bladeChart1" class="chart" style="width: 100%; height:calc((100vh - 240px) / 2);">
</div>
<div class="chart-title">刀翼总数</div>
</div>
<!-- 布齿密度 -->
<div class="chart-item">
<div ref="bladeChart2" class="chart" style="width: 100%; height:calc((100vh - 240px) / 2);">
</div>
<div class="chart-title">布齿密度</div>
</div>
<!-- 切削齿尺寸 -->
<div class="chart-item">
<div ref="bladeChart3" class="chart" style="width: 100%; height: calc((100vh - 240px) / 2);">
</div>
<div class="chart-title">切削齿尺寸</div>
</div>
<!-- 切削齿后倾角 -->
<div class="chart-item">
<div ref="bladeChart4" class="chart" style="width: 100%; height: calc((100vh - 240px) / 2);">
</div>
<div class="chart-title">切削齿后倾角°</div>
</div>
<!-- 冠部轮廓 -->
<div class="chart-item">
<div ref="cuttingTeethChart1" class="chart"
style="width: 100%; height: calc((100vh - 240px) / 2);"></div>
<div class="chart-title">冠部轮廓</div>
</div>
<!-- 保径图表 -->
<div class="chart-item">
<div ref="gaugeChart" class="chart" style="width: 100%; height: calc((100vh - 240px) / 2);">
</div>
<div class="chart-title">
<div class="chart-title">保径</div>
</div>
</div>
</div>
</div>
<!-- 右侧推荐方案 -->
<div class="recommendation-section">
<div class="recommendation-panel">
<h3>钻头设计推荐方案</h3>
<el-table :data="recommendationData" border style="width: 100%">
<el-table-column prop="parameter" label="设计参数" width="120" />
<el-table-column prop="result" label="推荐结果" />
</el-table>
<div class="action-buttons">
<el-button type="primary" @click="handleMatchBit">匹配钻头</el-button>
<el-button @click="handleBack">返回</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { getCjqxDataztyx, ztTj } from "@/api/system/cjsjLas";
export default {
name: 'BitDesignRecommendation',
data() {
return {
controlForm: {
openingTimes: 'first',
depthRange: [1000, 3000],
bitSize: '224.1'
},
charts: {},
currentOpeningInfo: '', // 当前开次信息
debugInfo: '', // 调试信息
displayOpeningTimes: '一开', // 显示的开次名称
displayBitSize: '224.1mm', // 显示的钻头尺寸
// 接口返回的数据
apiData: null,
recommendationData: [
{ parameter: '刀翼数', result: '' },
{ parameter: '切削齿尺寸', result: '' },
{ parameter: '布齿密度', result: '' },
{ parameter: '冠状轮廓', result: '' },
{ parameter: '切削齿后倾角°', result: '' },
{ parameter: '保径', result: '' },
]
}
},
mounted() {
this.initFromQuery()
this.$nextTick(() => {
this.initCharts()
})
},
beforeDestroy() {
Object.values(this.charts).forEach(chart => {
if (chart) {
chart.dispose()
}
})
},
methods: {
// 初始化页面参数
initFromQuery() {
console.log('initFromQuery 方法被调用了！');
const query = this.$route.query;
console.log('=== 推荐方案页面接收到的所有参数 ===');
console.log('完整query对象:', query);
console.log('参数详情:');
console.log('- from:', query.from);
console.log('- jh (井号):', query.jh);
console.log('- qk (区块):', query.qk);
console.log('- openingTimes (开次):', query.openingTimes);
console.log('- startDepth (起始深度):', query.startDepth);
console.log('- endDepth (结束深度):', query.endDepth);
console.log('- pointCount (数据点数):', query.pointCount);
console.log('- ztccValues (ztcc值):', query.ztccValues);
console.log('- ztccData (ztcc数据):', query.ztccData);
console.log('=====================================');
// 设置开次显示值
if (query.openingTimes) {
this.displayOpeningTimes = query.openingTimes;
// 同时设置内部值用于其他逻辑
const openingTimesMap = {
'一开': 'first',
'二开': 'second',
'三开': 'third',
'第三开次': 'third',
'第四开次': 'fourth',
'第五开次': 'fifth'
};
const mappedValue = openingTimesMap[query.openingTimes] || 'first';
this.controlForm.openingTimes = mappedValue;
console.log(`开次显示: ${query.openingTimes}`);
}
// 设置钻头尺寸显示值
if (query.ztccValues) {
try {
const ztccValues = JSON.parse(query.ztccValues);
if (ztccValues && ztccValues.length > 0) {
// 取第一个ztcc值作为显示的钻头尺寸
const firstZtcc = ztccValues[0].toString();
this.displayBitSize = `${firstZtcc}mm`;
this.controlForm.bitSize = firstZtcc;
console.log(`钻头尺寸显示: ${firstZtcc}mm`);
}
} catch (e) {
console.warn('解析ztcc值失败:', e);
}
}
if (query.startDepth && query.endDepth) {
// 设置深度范围
const startDepth = parseInt(query.startDepth);
const endDepth = parseInt(query.endDepth);
this.controlForm.depthRange = [startDepth, endDepth];
console.log(`深度范围设置: ${startDepth} - ${endDepth}m`);
}
// 设置当前开次信息显示
if (query.openingTimes && query.startDepth && query.endDepth) {
this.currentOpeningInfo = `${query.openingTimes} (${query.startDepth}-${query.endDepth}m)`;
console.log('当前开次信息:', this.currentOpeningInfo);
// 显示成功消息
this.$nextTick(() => {
this.$message.success(`已选择${query.openingTimes}: ${query.startDepth}-${query.endDepth}m`);
});
}
// 打印最终的控制表单状态
console.log('最终控制表单状态:', this.controlForm);
// 设置调试信息显示
if (query.jh || query.openingTimes) {
this.debugInfo = `井号:${query.jh || '未知'} | 开次:${query.openingTimes || '未知'} | 数据点:${query.pointCount || '0'}`;
}
// 调用接口获取推荐数据
this.fetchRecommendationData();
},
// 获取推荐数据
fetchRecommendationData() {
const query = this.$route.query;
if (!query.jh || !query.startDepth || !query.endDepth) {
console.warn('缺少必要参数，无法调用推荐接口');
return;
}
const params = {
jh: query.jh,
ksjs: parseFloat(query.startDepth), // 开始井深
jsjs: parseFloat(query.endDepth) // 结束井深
};
console.log('调用ztTj接口，参数:', params);
ztTj(params).then(response => {
console.log('ztTj接口返回数据:', response);
this.apiData = response;
// 更新推荐方案表格
this.updateRecommendationData(response);
// 更新图表数据
this.updateChartsWithApiData(response);
}).catch(error => {
console.error('调用ztTj接口失败:', error);
this.$message.error('获取推荐数据失败，请重试');
});
},
// 更新推荐方案数据
updateRecommendationData(data) {
if (!data || !data.zttjfa) {
console.warn('推荐方案数据格式错误');
return;
}
const zttjfa = data.zttjfa;
console.log('zttjfa推荐数据:', zttjfa);
// 根据新的字段结构使用zttjfa中的推荐值
// t01: 刀翼数, t02: 布齿密度, t03: 切削齿尺寸, t04: 切削齿后倾角, t05: 冠部轮廓, t06: 保径
this.recommendationData = [
{ parameter: '刀翼数', result: '' },
{ parameter: '切削齿尺寸', result: '' },
{ parameter: '布齿密度', result: '' },
{ parameter: '冠状轮廓', result: '' },
{ parameter: '切削齿后倾角°', result: '' },
{ parameter: '保径', result: '' },
];
console.log('推荐方案数据已更新:', this.recommendationData);
},
// 使用接口数据更新图表
updateChartsWithApiData(data) {
if (!data) {
console.warn('没有数据，无法更新图表');
return;
}
console.log('开始更新图表，接收到的数据:', data);
// 更新刀翼数图表 (blade1 对应 dys)
if (data.dys && this.charts.blade1) {
console.log('更新刀翼数图表:', data.dys);
this.updateBladeChart(data.dys);
}
// 更新布齿密度图表 (blade2 对应 bcmd)
if (data.bcmd && this.charts.blade2) {
console.log('更新布齿密度图表:', data.bcmd);
this.updateDensityChart(data.bcmd);
}
// 更新切削齿尺寸图表 (blade3 对应 qxccc)
if (data.qxccc && this.charts.blade3) {
console.log('更新切削齿尺寸图表:', data.qxccc);
this.updateCuttingTeethSizeChart(data.qxccc);
}
// 更新切削齿后倾角图表 (blade4 对应 qxcfqj)
if (data.qxcfqj && this.charts.blade4) {
console.log('更新切削齿后倾角图表:', data.qxcfqj);
this.updateCuttingTeethAngleChart(data.qxcfqj);
}
// 更新冠部轮廓图表 (cuttingTeeth1 对应 gblk)
if (data.gblk && this.charts.cuttingTeeth1) {
console.log('更新冠部轮廓图表:', data.gblk);
this.updateCrownProfileChart(data.gblk);
}
// 更新保径图表 (gauge 对应 bjdata)
if (data.bjdata && this.charts.gauge) {
console.log('更新保径图表:', data.bjdata);
this.updateGaugeChart(data.bjdata);
}
},
// 更新刀翼数图表
updateBladeChart(dysData) {
if (!dysData || !dysData.X || !dysData.Y) {
console.warn('刀翼数图表数据无效:', dysData);
return;
}
console.log('更新刀翼数图表 - X轴:', dysData.X, 'Y轴:', dysData.Y);
// 直接使用后台返回的数据
let displayData = [...dysData.Y]; // 复制原始数据
this.charts.blade1.setOption({
title: { text: '刀翼数', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: dysData.X,
axisLabel: {
rotate: 45,
fontSize: 10
}
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '刀翼数',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
// 推荐值用不同颜色突出显示
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t01 || '4'; // t01是刀翼数
if (dysData.X[params.dataIndex].includes(recommendedValue)) {
return '#FF6B6B'; // 推荐值用红色
}
return '#409EFF'; // 其他用蓝色
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新布齿密度图表
updateDensityChart(bcmdData) {
if (!bcmdData || !bcmdData.X || !bcmdData.Y) {
console.warn('布齿密度图表数据无效:', bcmdData);
return;
}
console.log('更新布齿密度图表 - X轴:', bcmdData.X, 'Y轴:', bcmdData.Y);
// 直接使用后台返回的数据
let displayData = [...bcmdData.Y]; // 复制原始数据
this.charts.blade2.setOption({
title: { text: '布齿密度', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: bcmdData.X
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '布齿密度',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t02 || '低'; // t02是布齿密度
if (bcmdData.X[params.dataIndex] === recommendedValue) {
return '#FF6B6B';
}
return '#67C23A';
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新切削齿尺寸图表
updateCuttingTeethSizeChart(qxcccData) {
if (!qxcccData || !qxcccData.X || !qxcccData.Y) {
console.warn('切削齿尺寸图表数据无效:', qxcccData);
return;
}
console.log('更新切削齿尺寸图表 - X轴:', qxcccData.X, 'Y轴:', qxcccData.Y);
// 直接使用后台返回的数据
let displayData = [...qxcccData.Y]; // 复制原始数据
this.charts.blade3.setOption({
title: { text: '切削齿尺寸', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}mm: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: qxcccData.X
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '切削齿尺寸',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t03 || '8'; // t03是切削齿尺寸
if (qxcccData.X[params.dataIndex] === recommendedValue) {
return '#FF6B6B';
}
return '#E6A23C';
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新切削齿后倾角图表
updateCuttingTeethAngleChart(qxcfqjData) {
if (!qxcfqjData || !qxcfqjData.X || !qxcfqjData.Y) {
console.warn('切削齿后倾角图表数据无效:', qxcfqjData);
return;
}
console.log('更新切削齿后倾角图表 - X轴:', qxcfqjData.X, 'Y轴:', qxcfqjData.Y);
// 直接使用后台返回的数据
let displayData = [...qxcfqjData.Y]; // 复制原始数据
this.charts.blade4.setOption({
title: { text: '切削齿后倾角', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}°: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: qxcfqjData.X
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '切削齿后倾角',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t04 || '15'; // t04是切削齿后倾角
if (qxcfqjData.X[params.dataIndex] === recommendedValue) {
return '#FF6B6B';
}
return '#F56C6C';
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新冠部轮廓图表
updateCrownProfileChart(gblkData) {
if (!gblkData || !gblkData.X || !gblkData.Y) {
console.warn('冠部轮廓图表数据无效:', gblkData);
return;
}
console.log('更新冠部轮廓图表 - X轴:', gblkData.X, 'Y轴:', gblkData.Y);
// 直接使用后台返回的数据
let displayData = [...gblkData.Y]; // 复制原始数据
this.charts.cuttingTeeth1.setOption({
title: { text: '冠部轮廓', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: gblkData.X,
axisLabel: {
rotate: 30,
fontSize: 10
}
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '冠部轮廓',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t05 || '短抛物'; // t05是冠部轮廓
if (gblkData.X[params.dataIndex] === recommendedValue) {
return '#FF6B6B';
}
return '#909399';
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新保径图表
updateGaugeChart(bjdataArray) {
if (!Array.isArray(bjdataArray)) {
console.warn('保径图表数据无效:', bjdataArray);
return;
}
console.log('更新保径图表:', bjdataArray);
// 直接使用后台返回的数据
let pieData = bjdataArray.map(item => ({
name: item.name,
value: item.value
}));
this.charts.gauge.setOption({
title: { text: '保径', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
series: [
{
type: 'pie',
radius: '60%',
center: ['50%', '60%'],
data: pieData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t06 || '常规'; // t06是保径
if (params.name === recommendedValue) {
return '#FF6B6B'; // 推荐值用红色
}
return params.name === '常规' ? '#409EFF' : '#67C23A';
}.bind(this)
},
label: {
formatter: '{b}: {c}%'
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
},
initCharts() {
this.initBladeCharts()
this.initCuttingTeethCharts()
this.initGaugeChart()
},
initBladeCharts() {
// 刀翼图表1 - 刀翼数
if (this.$refs.bladeChart1) {
this.charts.blade1 = echarts.init(this.$refs.bladeChart1)
this.charts.blade1.setOption({
title: { text: '刀翼数', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: ['低', '中', '高'] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '刀翼数', type: 'bar', data: [30, 50, 20] }
]
})
}
// 刀翼图表2 - 布齿密度
if (this.$refs.bladeChart2) {
this.charts.blade2 = echarts.init(this.$refs.bladeChart2)
this.charts.blade2.setOption({
title: { text: '布齿密度', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: ['低', '中', '高'] },
yAxis: { type: 'value', name: '百分' },
series: [
{ type: 'bar', data: [20, 25, 30] }
]
})
}
// 刀翼图表3 - 切削齿尺寸
if (this.$refs.bladeChart3) {
this.charts.blade3 = echarts.init(this.$refs.bladeChart3)
this.charts.blade3.setOption({
title: { text: '切削齿尺寸', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: [4, 5, 6, 7, 8] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '切削齿尺寸', type: 'bar', data: [15, 20, 25, 30, 35] }
]
})
}
// 刀翼图表4 - 切削齿后倾角
if (this.$refs.bladeChart4) {
this.charts.blade4 = echarts.init(this.$refs.bladeChart4)
this.charts.blade4.setOption({
title: { text: '切削齿后倾角°', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: [4, 5, 6, 7, 8] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '切削齿后倾角°', type: 'bar', data: [10, 15, 20, 25, 30] }
]
})
}
},
initCuttingTeethCharts() {
// 切削齿图表1 - 冠部轮廓
if (this.$refs.cuttingTeethChart1) {
this.charts.cuttingTeeth1 = echarts.init(this.$refs.cuttingTeethChart1)
this.charts.cuttingTeeth1.setOption({
title: { text: '冠部轮廓', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: ['长剖面', '中剖面', '短剖面', '平剖面'] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '冠部轮廓', type: 'bar', data: [30, 27, 25, 20] }
]
})
}
},
initGaugeChart() {
// 保径图表 - 饼图
if (this.$refs.gaugeChart) {
this.charts.gauge = echarts.init(this.$refs.gaugeChart)
this.charts.gauge.setOption({
title: { text: '保径', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'item' },
series: [
{
type: 'pie',
radius: '60%',
center: ['50%', '60%'],
data: [
{ value: 85, name: '常规', itemStyle: { color: '#409EFF' } },
{ value: 15, name: '增强', itemStyle: { color: '#67C23A' } }
],
label: {
formatter: '{b}: {c}%'
}
}
]
})
}
},
handleQuery() {
console.log('查询条件:', this.controlForm)
// 这里可以调用API获取数据并更新图表
},
handleMatchBit() {
console.log('匹配钻头')
// 跳转到钻头匹配页面
this.$router.push({
name: 'BitMatching',
query: {
from: 'recommendation',
jh: this.$route.query.jh,
qk: this.$route.query.qk
}
})
},
// 添加返回按钮处理方法
handleBack() {
console.log('返回上一页')
// 根据来源页面决定返回路径
const from = this.$route.query.from || 'main'
if (from === 'main') {
this.$router.push({ name: 'BitDesign' })
} else {
this.$router.go(-1)
}
}
}
}
</script>
<style lang="scss" scoped>
.bit-design-recommendation {
padding: 5px;
.control-bar {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 5px;
padding: 5px;
background-color: #f5f7fa;
border-radius: 4px;
.control-item {
display: flex;
align-items: center;
gap: 8px;
label {
font-weight: bold;
color: #333;
white-space: nowrap;
}
.control-value {
background-color: #f5f7fa;
color: #333;
padding: 6px 12px;
border-radius: 4px;
font-weight: bold;
border: 1px solid #dcdfe6;
min-width: 80px;
text-align: center;
}
.opening-info {
background-color: #e6f7ff;
color: #1890ff;
padding: 4px 8px;
border-radius: 4px;
font-weight: bold;
border: 1px solid #91d5ff;
}
.debug-info {
background-color: #fff2e8;
color: #fa8c16;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
border: 1px solid #ffbb96;
font-family: monospace;
}
}
}
.main-content {
display: flex;
gap: 20px;
.charts-section {
flex: 1;
.charts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
.chart-item {
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 10px;
.chart {
border-radius: 4px;
}
.chart-title {
text-align: center;
margin-top: 5px;
font-size: 12px;
color: #666;
}
}
}
}
.recommendation-section {
width: 300px;
.recommendation-panel {
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 20px;
h3 {
margin: 0 0 15px 0;
text-align: center;
color: #333;
}
.action-buttons {
margin-top: 20px;
text-align: center;
}
}
}
}
}
</style>
src/views/wellDesign/components/BitDesignRecommendation copy 3.vue deleted 100644 → 0
<template>
<div class="bit-design-recommendation">
<!-- 控制栏 -->
<div class="control-bar">
<div class="control-item">
<label>开次:</label>
<span class="control-value">{{ displayOpeningTimes }}</span>
</div>
<!-- 显示当前开次信息 -->
<!-- <div class="control-item" v-if="currentOpeningInfo">
<label>当前开次:</label>
<span class="opening-info">{{ currentOpeningInfo }}</span>
</div> -->
<!-- 调试信息显示 -->
<!-- <div class="control-item" v-if="debugInfo">
<label>调试信息:</label>
<span class="debug-info">{{ debugInfo }}</span>
</div> -->
<!-- <div class="control-item">
<label>深度范围:</label>
<el-slider v-model="controlForm.depthRange" range :min="0" :max="5000" :step="100"
style="width: 200px;" />
</div> -->
<div class="control-item">
<label>钻头尺寸mm:</label>
<span class="control-value">{{ displayBitSize }}</span>
</div>
<el-button type="primary" @click="handleQuery">查询</el-button>
</div>
<!-- 主要内容区域 -->
<div class="main-content">
<!-- 左侧图表区域 -->
<div class="charts-section">
<div class="charts-grid">
<!-- 刀翼总数 -->
<div class="chart-item">
<div ref="bladeChart1" class="chart" style="width: 100%; height:calc((100vh - 240px) / 2);">
</div>
<div class="chart-title">刀翼总数</div>
</div>
<!-- 布齿密度 -->
<div class="chart-item">
<div ref="bladeChart2" class="chart" style="width: 100%; height:calc((100vh - 240px) / 2);">
</div>
<div class="chart-title">布齿密度</div>
</div>
<!-- 切削齿尺寸 -->
<div class="chart-item">
<div ref="bladeChart3" class="chart" style="width: 100%; height: calc((100vh - 240px) / 2);">
</div>
<div class="chart-title">切削齿尺寸</div>
</div>
<!-- 切削齿后倾角 -->
<div class="chart-item">
<div ref="bladeChart4" class="chart" style="width: 100%; height: calc((100vh - 240px) / 2);">
</div>
<div class="chart-title">切削齿后倾角°</div>
</div>
<!-- 冠部轮廓 -->
<div class="chart-item">
<div ref="cuttingTeethChart1" class="chart"
style="width: 100%; height: calc((100vh - 240px) / 2);"></div>
<div class="chart-title">冠部轮廓</div>
</div>
<!-- 保径图表 -->
<div class="chart-item">
<div ref="gaugeChart" class="chart" style="width: 100%; height: calc((100vh - 240px) / 2);">
</div>
<div class="chart-title">
<div class="chart-title">保径</div>
</div>
</div>
</div>
</div>
<!-- 右侧推荐方案 -->
<div class="recommendation-section">
<div class="recommendation-panel">
<h3>钻头设计推荐方案</h3>
<el-table :data="recommendationData" border style="width: 100%">
<el-table-column prop="parameter" label="设计参数" width="120" />
<el-table-column prop="result" label="推荐结果" />
</el-table>
<div class="action-buttons">
<el-button type="primary" @click="handleMatchBit">匹配钻头</el-button>
<el-button @click="handleBack">返回</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { getCjqxDataztyx, ztTj } from "@/api/system/cjsjLas";
export default {
name: 'BitDesignRecommendation',
data() {
return {
controlForm: {
openingTimes: 'first',
depthRange: [1000, 3000],
bitSize: '224.1'
},
charts: {},
currentOpeningInfo: '', // 当前开次信息
debugInfo: '', // 调试信息
displayOpeningTimes: '一开', // 显示的开次名称
displayBitSize: '224.1mm', // 显示的钻头尺寸
// 接口返回的数据
apiData: null,
recommendationData: [
{ parameter: '刀翼数', result: '' },
{ parameter: '切削齿尺寸', result: '' },
{ parameter: '布齿密度', result: '' },
{ parameter: '冠状轮廓', result: '' },
{ parameter: '切削齿后倾角°', result: '' },
{ parameter: '保径', result: '' },
]
}
},
mounted() {
this.initFromQuery()
this.$nextTick(() => {
this.initCharts()
})
},
beforeDestroy() {
Object.values(this.charts).forEach(chart => {
if (chart) {
chart.dispose()
}
})
},
methods: {
// 初始化页面参数
initFromQuery() {
console.log('initFromQuery 方法被调用了！');
const query = this.$route.query;
console.log('=== 推荐方案页面接收到的所有参数 ===');
console.log('完整query对象:', query);
console.log('参数详情:');
console.log('- from:', query.from);
console.log('- jh (井号):', query.jh);
console.log('- qk (区块):', query.qk);
console.log('- openingTimes (开次):', query.openingTimes);
console.log('- startDepth (起始深度):', query.startDepth);
console.log('- endDepth (结束深度):', query.endDepth);
console.log('- pointCount (数据点数):', query.pointCount);
console.log('- ztccValues (ztcc值):', query.ztccValues);
console.log('- ztccData (ztcc数据):', query.ztccData);
console.log('=====================================');
// 设置开次显示值
if (query.openingTimes) {
this.displayOpeningTimes = query.openingTimes;
// 同时设置内部值用于其他逻辑
const openingTimesMap = {
'一开': 'first',
'二开': 'second',
'三开': 'third',
'第三开次': 'third',
'第四开次': 'fourth',
'第五开次': 'fifth'
};
const mappedValue = openingTimesMap[query.openingTimes] || 'first';
this.controlForm.openingTimes = mappedValue;
console.log(`开次显示: ${query.openingTimes}`);
}
// 设置钻头尺寸显示值
if (query.ztccValues) {
try {
const ztccValues = JSON.parse(query.ztccValues);
if (ztccValues && ztccValues.length > 0) {
// 取第一个ztcc值作为显示的钻头尺寸
const firstZtcc = ztccValues[0].toString();
this.displayBitSize = `${firstZtcc}mm`;
this.controlForm.bitSize = firstZtcc;
console.log(`钻头尺寸显示: ${firstZtcc}mm`);
}
} catch (e) {
console.warn('解析ztcc值失败:', e);
}
}
if (query.startDepth && query.endDepth) {
// 设置深度范围
const startDepth = parseInt(query.startDepth);
const endDepth = parseInt(query.endDepth);
this.controlForm.depthRange = [startDepth, endDepth];
console.log(`深度范围设置: ${startDepth} - ${endDepth}m`);
}
// 设置当前开次信息显示
if (query.openingTimes && query.startDepth && query.endDepth) {
this.currentOpeningInfo = `${query.openingTimes} (${query.startDepth}-${query.endDepth}m)`;
console.log('当前开次信息:', this.currentOpeningInfo);
// 显示成功消息
this.$nextTick(() => {
this.$message.success(`已选择${query.openingTimes}: ${query.startDepth}-${query.endDepth}m`);
});
}
// 打印最终的控制表单状态
console.log('最终控制表单状态:', this.controlForm);
// 设置调试信息显示
if (query.jh || query.openingTimes) {
this.debugInfo = `井号:${query.jh || '未知'} | 开次:${query.openingTimes || '未知'} | 数据点:${query.pointCount || '0'}`;
}
// 调用接口获取推荐数据
this.fetchRecommendationData();
},
// 获取推荐数据
fetchRecommendationData() {
const query = this.$route.query;
if (!query.jh || !query.startDepth || !query.endDepth) {
console.warn('缺少必要参数，无法调用推荐接口');
return;
}
const params = {
jh: query.jh,
ksjs: parseFloat(query.startDepth), // 开始井深
jsjs: parseFloat(query.endDepth) // 结束井深
};
console.log('调用ztTj接口，参数:', params);
ztTj(params).then(response => {
console.log('ztTj接口返回数据:', response);
this.apiData = response;
// 更新推荐方案表格
this.updateRecommendationData(response);
// 更新图表数据
this.updateChartsWithApiData(response);
}).catch(error => {
console.error('调用ztTj接口失败:', error);
this.$message.error('获取推荐数据失败，请重试');
});
},
// 更新推荐方案数据
updateRecommendationData(data) {
if (!data || !data.zttjfa) {
console.warn('推荐方案数据格式错误');
return;
}
const zttjfa = data.zttjfa;
console.log('zttjfa推荐数据:', zttjfa);
// 根据新的字段结构使用zttjfa中的推荐值
// t01: 刀翼数, t02: 布齿密度, t03: 切削齿尺寸, t04: 切削齿后倾角, t05: 冠部轮廓, t06: 保径
this.recommendationData = [
{ parameter: '刀翼数', result: '' },
{ parameter: '切削齿尺寸', result: '' },
{ parameter: '布齿密度', result: '' },
{ parameter: '冠状轮廓', result: '' },
{ parameter: '切削齿后倾角°', result: '' },
{ parameter: '保径', result: '' },
];
console.log('推荐方案数据已更新:', this.recommendationData);
},
// 使用接口数据更新图表
updateChartsWithApiData(data) {
if (!data) {
console.warn('没有数据，无法更新图表');
return;
}
console.log('开始更新图表，接收到的数据:', data);
// 更新刀翼数图表 (blade1 对应 dys)
if (data.dys && this.charts.blade1) {
console.log('更新刀翼数图表:', data.dys);
this.updateBladeChart(data.dys);
}
// 更新布齿密度图表 (blade2 对应 bcmd)
if (data.bcmd && this.charts.blade2) {
console.log('更新布齿密度图表:', data.bcmd);
this.updateDensityChart(data.bcmd);
}
// 更新切削齿尺寸图表 (blade3 对应 qxccc)
if (data.qxccc && this.charts.blade3) {
console.log('更新切削齿尺寸图表:', data.qxccc);
this.updateCuttingTeethSizeChart(data.qxccc);
}
// 更新切削齿后倾角图表 (blade4 对应 qxcfqj)
if (data.qxcfqj && this.charts.blade4) {
console.log('更新切削齿后倾角图表:', data.qxcfqj);
this.updateCuttingTeethAngleChart(data.qxcfqj);
}
// 更新冠部轮廓图表 (cuttingTeeth1 对应 gblk)
if (data.gblk && this.charts.cuttingTeeth1) {
console.log('更新冠部轮廓图表:', data.gblk);
this.updateCrownProfileChart(data.gblk);
}
// 更新保径图表 (gauge 对应 bjdata)
if (data.bjdata && this.charts.gauge) {
console.log('更新保径图表:', data.bjdata);
this.updateGaugeChart(data.bjdata);
}
},
// 更新刀翼数图表
updateBladeChart(dysData) {
if (!dysData || !dysData.X || !dysData.Y) {
console.warn('刀翼数图表数据无效:', dysData);
return;
}
console.log('更新刀翼数图表 - X轴:', dysData.X, 'Y轴:', dysData.Y);
// 直接使用后台返回的数据
let displayData = [...dysData.Y]; // 复制原始数据
this.charts.blade1.setOption({
title: { text: '刀翼数', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: dysData.X,
axisLabel: {
rotate: 45,
fontSize: 10
}
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '刀翼数',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
// 推荐值用不同颜色突出显示
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t01 || '4'; // t01是刀翼数
if (dysData.X[params.dataIndex].includes(recommendedValue)) {
return '#FF6B6B'; // 推荐值用红色
}
return '#409EFF'; // 其他用蓝色
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新布齿密度图表
updateDensityChart(bcmdData) {
if (!bcmdData || !bcmdData.X || !bcmdData.Y) {
console.warn('布齿密度图表数据无效:', bcmdData);
return;
}
console.log('更新布齿密度图表 - X轴:', bcmdData.X, 'Y轴:', bcmdData.Y);
// 直接使用后台返回的数据
let displayData = [...bcmdData.Y]; // 复制原始数据
this.charts.blade2.setOption({
title: { text: '布齿密度', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: bcmdData.X
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '布齿密度',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t02 || '低'; // t02是布齿密度
if (bcmdData.X[params.dataIndex] === recommendedValue) {
return '#FF6B6B';
}
return '#67C23A';
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新切削齿尺寸图表
updateCuttingTeethSizeChart(qxcccData) {
if (!qxcccData || !qxcccData.X || !qxcccData.Y) {
console.warn('切削齿尺寸图表数据无效:', qxcccData);
return;
}
console.log('更新切削齿尺寸图表 - X轴:', qxcccData.X, 'Y轴:', qxcccData.Y);
// 直接使用后台返回的数据
let displayData = [...qxcccData.Y]; // 复制原始数据
this.charts.blade3.setOption({
title: { text: '切削齿尺寸', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}mm: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: qxcccData.X
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '切削齿尺寸',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t03 || '8'; // t03是切削齿尺寸
if (qxcccData.X[params.dataIndex] === recommendedValue) {
return '#FF6B6B';
}
return '#E6A23C';
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新切削齿后倾角图表
updateCuttingTeethAngleChart(qxcfqjData) {
if (!qxcfqjData || !qxcfqjData.X || !qxcfqjData.Y) {
console.warn('切削齿后倾角图表数据无效:', qxcfqjData);
return;
}
console.log('更新切削齿后倾角图表 - X轴:', qxcfqjData.X, 'Y轴:', qxcfqjData.Y);
// 直接使用后台返回的数据
let displayData = [...qxcfqjData.Y]; // 复制原始数据
this.charts.blade4.setOption({
title: { text: '切削齿后倾角°', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}°: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: qxcfqjData.X
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '切削齿后倾角°',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t04 || '15'; // t04是切削齿后倾角
if (qxcfqjData.X[params.dataIndex] === recommendedValue) {
return '#FF6B6B';
}
return '#F56C6C';
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新冠部轮廓图表
updateCrownProfileChart(gblkData) {
if (!gblkData || !gblkData.X || !gblkData.Y) {
console.warn('冠部轮廓图表数据无效:', gblkData);
return;
}
console.log('更新冠部轮廓图表 - X轴:', gblkData.X, 'Y轴:', gblkData.Y);
// 直接使用后台返回的数据
let displayData = [...gblkData.Y]; // 复制原始数据
this.charts.cuttingTeeth1.setOption({
title: { text: '冠部轮廓', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: gblkData.X,
axisLabel: {
rotate: 30,
fontSize: 10
}
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '冠部轮廓',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t05 || '短抛物'; // t05是冠部轮廓
if (gblkData.X[params.dataIndex] === recommendedValue) {
return '#FF6B6B';
}
return '#909399';
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新保径图表
updateGaugeChart(bjdataArray) {
if (!Array.isArray(bjdataArray)) {
console.warn('保径图表数据无效:', bjdataArray);
return;
}
console.log('更新保径图表:', bjdataArray);
// 直接使用后台返回的数据
let pieData = bjdataArray.map(item => ({
name: item.name,
value: item.value
}));
this.charts.gauge.setOption({
title: { text: '保径', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
series: [
{
type: 'pie',
radius: '60%',
center: ['50%', '60%'],
data: pieData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t06 || '常规'; // t06是保径
if (params.name === recommendedValue) {
return '#FF6B6B'; // 推荐值用红色
}
return params.name === '常规' ? '#409EFF' : '#67C23A';
}.bind(this)
},
label: {
formatter: '{b}: {c}%'
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
},
initCharts() {
this.initBladeCharts()
this.initCuttingTeethCharts()
this.initGaugeChart()
},
initBladeCharts() {
// 刀翼图表1 - 刀翼数
if (this.$refs.bladeChart1) {
this.charts.blade1 = echarts.init(this.$refs.bladeChart1)
this.charts.blade1.setOption({
title: { text: '刀翼数', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: ['低', '中', '高'] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '刀翼数', type: 'bar', data: [30, 50, 20] }
]
})
}
// 刀翼图表2 - 布齿密度
if (this.$refs.bladeChart2) {
this.charts.blade2 = echarts.init(this.$refs.bladeChart2)
this.charts.blade2.setOption({
title: { text: '布齿密度', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: ['低', '中', '高'] },
yAxis: { type: 'value', name: '百分' },
series: [
{ type: 'bar', data: [20, 25, 30] }
]
})
}
// 刀翼图表3 - 切削齿尺寸
if (this.$refs.bladeChart3) {
this.charts.blade3 = echarts.init(this.$refs.bladeChart3)
this.charts.blade3.setOption({
title: { text: '切削齿尺寸', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: [4, 5, 6, 7, 8] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '切削齿尺寸', type: 'bar', data: [15, 20, 25, 30, 35] }
]
})
}
// 刀翼图表4 - 切削齿后倾角
if (this.$refs.bladeChart4) {
this.charts.blade4 = echarts.init(this.$refs.bladeChart4)
this.charts.blade4.setOption({
title: { text: '切削齿后倾角°', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: [4, 5, 6, 7, 8] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '切削齿后倾角°', type: 'bar', data: [10, 15, 20, 25, 30] }
]
})
}
},
initCuttingTeethCharts() {
// 切削齿图表1 - 冠部轮廓
if (this.$refs.cuttingTeethChart1) {
this.charts.cuttingTeeth1 = echarts.init(this.$refs.cuttingTeethChart1)
this.charts.cuttingTeeth1.setOption({
title: { text: '冠部轮廓', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: ['长剖面', '中剖面', '短剖面', '平剖面'] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '冠部轮廓', type: 'bar', data: [30, 27, 25, 20] }
]
})
}
},
initGaugeChart() {
// 保径图表 - 饼图
if (this.$refs.gaugeChart) {
this.charts.gauge = echarts.init(this.$refs.gaugeChart)
this.charts.gauge.setOption({
title: { text: '保径', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'item' },
series: [
{
type: 'pie',
radius: '60%',
center: ['50%', '60%'],
data: [
{ value: 85, name: '常规', itemStyle: { color: '#409EFF' } },
{ value: 15, name: '增强', itemStyle: { color: '#67C23A' } }
],
label: {
formatter: '{b}: {c}%'
}
}
]
})
}
},
handleQuery() {
console.log('查询条件:', this.controlForm)
// 这里可以调用API获取数据并更新图表
},
handleMatchBit() {
console.log('匹配钻头')
// 跳转到钻头匹配页面
this.$router.push({
name: 'BitMatching',
query: {
from: 'recommendation',
jh: this.$route.query.jh,
qk: this.$route.query.qk
}
})
},
// 添加返回按钮处理方法
handleBack() {
console.log('返回上一页')
// 根据来源页面决定返回路径
const from = this.$route.query.from || 'main'
if (from === 'main') {
this.$router.push({ name: 'BitDesign' })
} else {
this.$router.go(-1)
}
}
}
}
</script>
<style lang="scss" scoped>
.bit-design-recommendation {
padding: 5px;
.control-bar {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 5px;
padding: 5px;
background-color: #f5f7fa;
border-radius: 4px;
.control-item {
display: flex;
align-items: center;
gap: 8px;
label {
font-weight: bold;
color: #333;
white-space: nowrap;
}
.control-value {
background-color: #f5f7fa;
color: #333;
padding: 6px 12px;
border-radius: 4px;
font-weight: bold;
border: 1px solid #dcdfe6;
min-width: 80px;
text-align: center;
}
.opening-info {
background-color: #e6f7ff;
color: #1890ff;
padding: 4px 8px;
border-radius: 4px;
font-weight: bold;
border: 1px solid #91d5ff;
}
.debug-info {
background-color: #fff2e8;
color: #fa8c16;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
border: 1px solid #ffbb96;
font-family: monospace;
}
}
}
.main-content {
display: flex;
gap: 20px;
.charts-section {
flex: 1;
.charts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
.chart-item {
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 10px;
.chart {
border-radius: 4px;
}
.chart-title {
text-align: center;
margin-top: 5px;
font-size: 12px;
color: #666;
}
}
}
}
.recommendation-section {
width: 300px;
.recommendation-panel {
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 20px;
h3 {
margin: 0 0 15px 0;
text-align: center;
color: #333;
}
.action-buttons {
margin-top: 20px;
text-align: center;
}
}
}
}
}
</style>
src/views/wellDesign/components/BitDesignRecommendation copy 4.vue deleted 100644 → 0
<template>
<div class="bit-design-recommendation">
<!-- 控制栏 -->
<div class="control-bar">
<div class="control-item">
<label>开次:</label>
<span class="control-value">{{ displayOpeningTimes }}</span>
</div>
<div class="control-item">
<label>钻头尺寸mm:</label>
<span class="control-value">{{ displayBitSize }}</span>
</div>
<div class="control-item">
<label>开始深度:</label>
<span class="control-value">{{ controlForm.depthRange[0] }} m</span>
</div>
<div class="control-item">
<label>结束深度:</label>
<span class="control-value">{{ controlForm.depthRange[1] }} m</span>
</div>
<el-button type="primary" @click="handleQuery">查询</el-button>
</div>
<!-- 主要内容区域 -->
<div class="main-content">
<!-- 上方推荐方案 -->
<div class="recommendation-section">
<div class="recommendation-panel">
<h3>钻头设计推荐方案</h3>
<el-table :data="[recommendationData]" border style="width: 100%">
<el-table-column prop="bladeCount" label="刀翼数" min-width="120px" align="center" />
<el-table-column prop="toothSize" label="切削齿尺寸" min-width="120px" align="center" />
<el-table-column prop="density" label="布齿密度" min-width="120px" align="center" />
<el-table-column prop="crownProfile" label="冠状轮廓" min-width="120px" align="center" />
<el-table-column prop="negativeAngle" label="切削齿后倾角°" min-width="120px" align="center" />
<el-table-column label="操作" align="center" fixed="right" width="250px"
class-name="small-padding fixed-width">
<template slot-scope="scope">
<!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['jtzj:jtzjJzzg:edit']">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['jtzj:jtzjJzzg:remove']">删除</el-button> -->
<el-button size="mini" type="text" icon="el-icon-view"
@click="handleUpdate(scope.row)">查看</el-button>
<el-button size="mini" type="text" icon="el-icon-connection"
@click="handleMatchBit">匹配钻头</el-button>
<el-button size="mini" type="text" icon="el-icon-back"
@click="handleBack">返回</el-button>
</template>
</el-table-column>
</el-table>
<!-- <div class="action-buttons">
<el-button type="primary" @click="handleMatchBit">匹配钻头</el-button>
<el-button @click="handleBack">返回</el-button>
</div> -->
</div>
</div>
<!-- 下方图表区域 -->
<div class="charts-section">
<div class="charts-grid">
<!-- 刀翼总数 -->
<div class="chart-item">
<div ref="bladeChart1" class="chart" style="width: 100%; height:calc((100vh - 260px) / 2);">
</div>
<div class="chart-title">刀翼总数</div>
</div>
<!-- 布齿密度 -->
<div class="chart-item">
<div ref="bladeChart2" class="chart" style="width: 100%; height:calc((100vh - 260px) / 2);">
</div>
<div class="chart-title">布齿密度</div>
</div>
<!-- 切削齿尺寸 -->
<div class="chart-item">
<div ref="bladeChart3" class="chart" style="width: 100%; height: calc((100vh - 260px) / 2);">
</div>
<div class="chart-title">切削齿尺寸</div>
</div>
<!-- 切削齿后倾角 -->
<div class="chart-item">
<div ref="bladeChart4" class="chart" style="width: 100%; height: calc((100vh - 260px) / 2);">
</div>
<div class="chart-title">切削齿后倾角°</div>
</div>
<!-- 冠部轮廓 -->
<div class="chart-item">
<div ref="cuttingTeethChart1" class="chart"
style="width: 100%; height: calc((100vh - 260px) / 2);"></div>
<div class="chart-title">冠部轮廓</div>
</div>
<!-- 保径图表 -->
<!-- <div class="chart-item">
<div ref="gaugeChart" class="chart" style="width: 100%; height: calc((100vh - 260px) / 2);">
</div>
<div class="chart-title">
<div class="chart-title">保径</div>
</div>
</div> -->
</div>
</div>
</div>
<el-dialog title="查看钻头信息" :visible.sync="selectionDialogVisible" width="90%" append-to-body
@close="handleSelectionDialogClose" class="selection-dialog">
<div v-if="selectionDialogVisible" class="selection-dialog-content">
<div class="bit-selection-info">
<div class="matching-table">
<el-table :data="[selectedBitData]" border fit style="width: 100%; margin-bottom: 10px;"
class="match-status-table">
<el-table-column label="刀翼总数" min-width="120" align="center">
<template slot-scope="scope">
<span :class="['status-icon', isMatch(scope.row.t01match) ? 'match' : 'no-match']">
{{ isMatch(scope.row.t01match) ? '✓' : '✗' }}
</span>
</template>
</el-table-column>
<el-table-column label="布齿密度" min-width="120" align="center">
<template slot-scope="scope">
<span :class="['status-icon', isMatch(scope.row.t02match) ? 'match' : 'no-match']">
{{ isMatch(scope.row.t02match) ? '✓' : '✗' }}
</span>
</template>
</el-table-column>
<el-table-column label="切削齿尺寸mm" min-width="140" align="center">
<template slot-scope="scope">
<span :class="['status-icon', isMatch(scope.row.t03match) ? 'match' : 'no-match']">
{{ isMatch(scope.row.t03match) ? '✓' : '✗' }}
</span>
</template>
</el-table-column>
<el-table-column label="切削齿后倾角°" min-width="140" align="center">
<template slot-scope="scope">
<span :class="['status-icon', isMatch(scope.row.t04match) ? 'match' : 'no-match']">
{{ isMatch(scope.row.t04match) ? '✓' : '✗' }}
</span>
</template>
</el-table-column>
<el-table-column label="冠部轮廓" min-width="120" align="center">
<template slot-scope="scope">
<span :class="['status-icon', isMatch(scope.row.t05match) ? 'match' : 'no-match']">
{{ isMatch(scope.row.t05match) ? '✓' : '✗' }}
</span>
</template>
</el-table-column>
<el-table-column label="保径" min-width="100" align="center">
<template slot-scope="scope">
<span :class="['status-icon', isMatch(scope.row.t06match) ? 'match' : 'no-match']">
{{ isMatch(scope.row.t06match) ? '✓' : '✗' }}
</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="parameters-section">
<div class="parameter-row">
<div v-for="(item, index) in parameterTypes" :key="index" class="parameter-item">
<div class="parameter-info">
<h4>{{ item.tzdl }}</h4>
</div>
<div class="parameter-image">
<img :src="getSelectedValue(item.imageField)" :alt="item.tzdl"
v-if="getSelectedValue(item.imageField) && getSelectedValue(item.imageField).trim() !== ''" />
<div v-else class="no-image">暂无图片</div>
</div>
</div>
</div>
</div>
<div class="footer-actions">
<el-button @click="handleSelectionDialogClose">关闭</el-button>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { getCjqxDataztyx, ztTj } from "@/api/system/cjsjLas";
export default {
name: 'BitDesignRecommendation',
data() {
return {
controlForm: {
openingTimes: '',
depthRange: [],
bitSize: ''
},
charts: {},
currentOpeningInfo: '', // 当前开次信息
debugInfo: '', // 调试信息
displayOpeningTimes: '', // 显示的开次名称
displayBitSize: '', // 显示的钻头尺寸
// 接口返回的数据
apiData: null,
recommendationData: {
bladeCount: '',
toothSize: '',
density: '',
crownProfile: '',
negativeAngle: ''
},
selectionDialogVisible: false,
selectedBitData: {},
parameterTypes: [
{ tzdl: '刀翼总数', field: 'tzdm01', imageField: 'slt01', matchField: 't01match' },
{ tzdl: '布齿密度', field: 'tzdm02', imageField: 'slt02', matchField: 't02match' },
{ tzdl: '切削齿尺寸mm', field: 'tzdm03', imageField: 'slt03', matchField: 't03match' },
{ tzdl: '切削齿后倾角°', field: 'tzdm04', imageField: 'slt04', matchField: 't04match' },
{ tzdl: '冠部轮廓', field: 'tzdm05', imageField: 'slt05', matchField: 't05match' },
{ tzdl: '保径', field: 'tzdm06', imageField: 'slt06', matchField: 't06match' }
]
}
},
mounted() {
this.initFromQuery()
this.$nextTick(() => {
this.initCharts()
})
},
beforeDestroy() {
Object.values(this.charts).forEach(chart => {
if (chart) {
chart.dispose()
}
})
},
methods: {
// 初始化页面参数
initFromQuery() {
console.log('initFromQuery 方法被调用了！');
const query = this.$route.query;
// 设置开次显示值
if (query.openingTimes) {
this.displayOpeningTimes = query.openingTimes;
// 同时设置内部值用于其他逻辑
const openingTimesMap = {
'一开': 'first',
'二开': 'second',
'三开': 'third',
'第三开次': 'third',
'第四开次': 'fourth',
'第五开次': 'fifth'
};
const mappedValue = openingTimesMap[query.openingTimes] || 'first';
this.controlForm.openingTimes = mappedValue;
console.log(`开次显示: ${query.openingTimes}`);
}
// 设置钻头尺寸显示值
if (query.ztccValues) {
try {
const ztccValues = JSON.parse(query.ztccValues);
if (ztccValues && ztccValues.length > 0) {
// 取第一个ztcc值作为显示的钻头尺寸
const firstZtcc = ztccValues[0].toString();
this.displayBitSize = `${firstZtcc}mm`;
this.controlForm.bitSize = firstZtcc;
console.log(`钻头尺寸显示: ${firstZtcc}mm`);
}
} catch (e) {
console.warn('解析ztcc值失败:', e);
}
}
if (query.startDepth && query.endDepth) {
// 设置深度范围
const startDepth = parseInt(query.startDepth);
const endDepth = parseInt(query.endDepth);
this.controlForm.depthRange = [startDepth, endDepth];
console.log(`深度范围设置: ${startDepth} - ${endDepth}m`);
}
// 设置当前开次信息显示
if (query.openingTimes && query.startDepth && query.endDepth) {
this.currentOpeningInfo = `${query.openingTimes} (${query.startDepth}-${query.endDepth}m)`;
console.log('当前开次信息:', this.currentOpeningInfo);
// 显示成功消息
this.$nextTick(() => {
this.$message.success(`已选择${query.openingTimes}: ${query.startDepth}-${query.endDepth}m`);
});
}
// 打印最终的控制表单状态
console.log('最终控制表单状态:', this.controlForm);
// 设置调试信息显示
if (query.jh || query.openingTimes) {
this.debugInfo = `井号:${query.jh || '未知'} | 开次:${query.openingTimes || '未知'} | 数据点:${query.pointCount || '0'}`;
}
// 调用接口获取推荐数据
this.fetchRecommendationData();
},
// 获取推荐数据
fetchRecommendationData() {
const query = this.$route.query;
if (!query.jh || !query.startDepth || !query.endDepth) {
let missingParams = [];
if (!query.jh) missingParams.push('井号(jh)');
if (!query.startDepth) missingParams.push('起始深度(startDepth)');
if (!query.endDepth) missingParams.push('结束深度(endDepth)');
const errorMsg = `缺少必要参数，无法调用推荐接口: ${missingParams.join(', ')}`;
console.warn(errorMsg);
this.$message.warning(`参数不完整: ${missingParams.join(', ')}`);
return;
}
// 解析 ztcc 值
let ztcc = null;
if (query.ztccValues) {
try {
const ztccValues = JSON.parse(query.ztccValues);
if (Array.isArray(ztccValues) && ztccValues.length > 0) {
ztcc = ztccValues[0]; // 取第一个值
}
} catch (e) {
console.warn('解析ztcc值失败:', e);
}
}
const params = {
jh: query.jh,
ksjs: parseFloat(query.startDepth), // 开始井深
jsjs: parseFloat(query.endDepth), // 结束井深
ztcc: ztcc, // 钻头尺寸
kc: query.openingTimes // 开次
};
console.log('调用ztTj接口，参数:', params);
ztTj(params).then(response => {
console.log('ztTj接口返回数据:', response);
this.apiData = response;
// 更新推荐方案表格
this.updateRecommendationData(response);
// 更新图表数据
this.updateChartsWithApiData(response);
}).catch(error => {
console.error('调用ztTj接口失败:', error);
this.$message.error('获取推荐数据失败，请重试');
});
},
// 更新推荐方案数据
updateRecommendationData(data) {
if (!data || !data.zttjfa) {
console.warn('推荐方案数据格式错误');
return;
}
const zttjfa = data.zttjfa;
console.log('zttjfa推荐数据:', zttjfa);
// 根据新的字段结构使用zttjfa中的推荐值
// t01: 刀翼数, t02: 布齿密度, t03: 切削齿尺寸, t04: 切削齿后倾角, t05: 冠部轮廓, t06: 保径
this.recommendationData = {
bladeCount: zttjfa.t01 || '',
toothSize: zttjfa.t03 || '',
density: zttjfa.t02 || '',
crownProfile: zttjfa.t05 || '',
negativeAngle: zttjfa.t04 || ''
};
console.log('推荐方案数据已更新:', this.recommendationData);
},
// 使用接口数据更新图表
updateChartsWithApiData(data) {
if (!data) {
console.warn('没有数据，无法更新图表');
return;
}
console.log('开始更新图表，接收到的数据:', data);
// 更新刀翼数图表 (blade1 对应 dys)
if (data.dys && this.charts.blade1) {
console.log('更新刀翼数图表:', data.dys);
this.updateBladeChart(data.dys);
}
// 更新布齿密度图表 (blade2 对应 bcmd)
if (data.bcmd && this.charts.blade2) {
console.log('更新布齿密度图表:', data.bcmd);
this.updateDensityChart(data.bcmd);
}
// 更新切削齿尺寸图表 (blade3 对应 qxccc)
if (data.qxccc && this.charts.blade3) {
console.log('更新切削齿尺寸图表:', data.qxccc);
this.updateCuttingTeethSizeChart(data.qxccc);
}
// 更新切削齿后倾角图表 (blade4 对应 qxcfqj)
if (data.qxcfqj && this.charts.blade4) {
console.log('更新切削齿后倾角图表:', data.qxcfqj);
this.updateCuttingTeethAngleChart(data.qxcfqj);
}
// 更新冠部轮廓图表 (cuttingTeeth1 对应 gblk)
if (data.gblk && this.charts.cuttingTeeth1) {
console.log('更新冠部轮廓图表:', data.gblk);
this.updateCrownProfileChart(data.gblk);
}
// 更新保径图表 (gauge 对应 bjdata)
if (data.bjdata && this.charts.gauge) {
console.log('更新保径图表:', data.bjdata);
this.updateGaugeChart(data.bjdata);
}
},
// 更新刀翼数图表
updateBladeChart(dysData) {
if (!dysData || !dysData.X || !dysData.Y) {
console.warn('刀翼数图表数据无效:', dysData);
return;
}
console.log('更新刀翼数图表 - X轴:', dysData.X, 'Y轴:', dysData.Y);
// 直接使用后台返回的数据
let displayData = [...dysData.Y]; // 复制原始数据
this.charts.blade1.setOption({
title: { text: '刀翼数', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: dysData.X,
axisLabel: {
rotate: 45,
fontSize: 10
}
},
yAxis: {
type: 'value',
name: '次数',
// max: 100
},
series: [
{
name: '刀翼数',
type: 'bar',
barWidth: 50,
data: displayData,
itemStyle: {
color: '#5087ec'
},
label: {
show: true,
position: 'top',
formatter: '{c}'
}
}
]
});
},
// 更新布齿密度图表
updateDensityChart(bcmdData) {
if (!bcmdData || !bcmdData.X || !bcmdData.Y) {
console.warn('布齿密度图表数据无效:', bcmdData);
return;
}
console.log('更新布齿密度图表 - X轴:', bcmdData.X, 'Y轴:', bcmdData.Y);
// 直接使用后台返回的数据
let displayData = [...bcmdData.Y]; // 复制原始数据
this.charts.blade2.setOption({
title: { text: '布齿密度', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: bcmdData.X
},
yAxis: {
type: 'value',
name: '次数',
// max: 100
},
series: [
{
name: '布齿密度',
type: 'bar',
barWidth: 50,
data: displayData,
itemStyle: {
color: '#5087ec'
},
label: {
show: true,
position: 'top',
formatter: '{c}'
}
}
]
});
},
// 更新切削齿尺寸图表
updateCuttingTeethSizeChart(qxcccData) {
if (!qxcccData || !qxcccData.X || !qxcccData.Y) {
console.warn('切削齿尺寸图表数据无效:', qxcccData);
return;
}
console.log('更新切削齿尺寸图表 - X轴:', qxcccData.X, 'Y轴:', qxcccData.Y);
// 直接使用后台返回的数据
let displayData = [...qxcccData.Y]; // 复制原始数据
this.charts.blade3.setOption({
title: { text: '切削齿尺寸', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}mm: {c}'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: qxcccData.X
},
yAxis: {
type: 'value',
name: '次数',
// max: 100
},
series: [
{
name: '切削齿尺寸',
type: 'bar',
barWidth: 50,
data: displayData,
itemStyle: {
color: '#5087ec'
},
label: {
show: true,
position: 'top',
formatter: '{c}'
}
}
]
});
},
// 更新切削齿后倾角图表
updateCuttingTeethAngleChart(qxcfqjData) {
if (!qxcfqjData || !qxcfqjData.X || !qxcfqjData.Y) {
console.warn('切削齿后倾角图表数据无效:', qxcfqjData);
return;
}
console.log('更新切削齿后倾角图表 - X轴:', qxcfqjData.X, 'Y轴:', qxcfqjData.Y);
// 直接使用后台返回的数据
let displayData = [...qxcfqjData.Y]; // 复制原始数据
this.charts.blade4.setOption({
title: { text: '切削齿后倾角°', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}°: {c}'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: qxcfqjData.X
},
yAxis: {
type: 'value',
name: '次数',
// max: 100
},
series: [
{
name: '切削齿后倾角°',
type: 'bar',
barWidth: 50,
data: displayData,
itemStyle: {
color: '#5087ec'
},
label: {
show: true,
position: 'top',
formatter: '{c}'
}
}
]
});
},
// 更新冠部轮廓图表
updateCrownProfileChart(gblkData) {
if (!gblkData || !gblkData.X || !gblkData.Y) {
console.warn('冠部轮廓图表数据无效:', gblkData);
return;
}
console.log('更新冠部轮廓图表 - X轴:', gblkData.X, 'Y轴:', gblkData.Y);
// 直接使用后台返回的数据
let displayData = [...gblkData.Y]; // 复制原始数据
this.charts.cuttingTeeth1.setOption({
title: { text: '冠部轮廓', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: gblkData.X,
axisLabel: {
rotate: 30,
fontSize: 10
}
},
yAxis: {
type: 'value',
name: '次数',
// max: 100
},
series: [
{
name: '冠部轮廓',
type: 'bar',
barWidth: 50,
data: displayData,
itemStyle: {
color: '#5087ec'
},
label: {
show: true,
position: 'top',
formatter: '{c}'
}
}
]
});
},
// 更新保径图表
updateGaugeChart(bjdataArray) {
if (!Array.isArray(bjdataArray)) {
console.warn('保径图表数据无效:', bjdataArray);
return;
}
console.log('更新保径图表:', bjdataArray);
// 直接使用后台返回的数据
let pieData = bjdataArray.map(item => ({
name: item.name,
value: item.value
}));
this.charts.gauge.setOption({
title: { text: '保径', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
series: [
{
type: 'pie',
radius: '60%',
center: ['50%', '60%'],
data: pieData,
itemStyle: {
color: function (params) {
return params.name === '常规' ? '#5087ec' : '#67c23a';
}
},
label: {
formatter: '{b}: {c}%'
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
},
initCharts() {
this.initBladeCharts()
this.initCuttingTeethCharts()
this.initGaugeChart()
},
initBladeCharts() {
// 刀翼图表1 - 刀翼数
if (this.$refs.bladeChart1) {
this.charts.blade1 = echarts.init(this.$refs.bladeChart1)
this.charts.blade1.setOption({
title: { text: '刀翼数', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: ['低', '中', '高'] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '刀翼数', type: 'bar', barWidth: 30, data: [] }
]
})
}
// 刀翼图表2 - 布齿密度
if (this.$refs.bladeChart2) {
this.charts.blade2 = echarts.init(this.$refs.bladeChart2)
this.charts.blade2.setOption({
title: { text: '布齿密度', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: ['低', '中', '高'] },
yAxis: { type: 'value', name: '百分' },
series: [
{ type: 'bar', barWidth: 30, data: [] }
]
})
}
// 刀翼图表3 - 切削齿尺寸
if (this.$refs.bladeChart3) {
this.charts.blade3 = echarts.init(this.$refs.bladeChart3)
this.charts.blade3.setOption({
title: { text: '切削齿尺寸', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: [4, 5, 6, 7, 8] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '切削齿尺寸', type: 'bar', barWidth: 30, data: [] }
]
})
}
// 刀翼图表4 - 切削齿后倾角
if (this.$refs.bladeChart4) {
this.charts.blade4 = echarts.init(this.$refs.bladeChart4)
this.charts.blade4.setOption({
title: { text: '切削齿后倾角°', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: [4, 5, 6, 7, 8] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '切削齿后倾角°', type: 'bar', barWidth: 30, data: [] }
]
})
}
},
initCuttingTeethCharts() {
// 切削齿图表1 - 冠部轮廓
if (this.$refs.cuttingTeethChart1) {
this.charts.cuttingTeeth1 = echarts.init(this.$refs.cuttingTeethChart1)
this.charts.cuttingTeeth1.setOption({
title: { text: '冠部轮廓', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: ['长剖面', '中剖面', '短剖面', '平剖面'] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '冠部轮廓', type: 'bar', barWidth: 30, data: [] }
]
})
}
},
initGaugeChart() {
// 保径图表 - 饼图
if (this.$refs.gaugeChart) {
this.charts.gauge = echarts.init(this.$refs.gaugeChart)
this.charts.gauge.setOption({
title: { text: '保径', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'item' },
series: [
{
type: 'pie',
radius: '60%',
center: ['50%', '60%'],
data: [
{ value: 85, name: '常规', itemStyle: { color: '#409EFF' } },
{ value: 15, name: '增强', itemStyle: { color: '#67C23A' } }
],
label: {
formatter: '{b}: {c}%'
}
}
]
})
}
},
handleQuery() {
console.log('查询条件:', this.controlForm)
// 这里可以调用API获取数据并更新图表
},
handleMatchBit() {
console.log('匹配钻头')
// 获取ztcc值
let ztcc = null;
if (this.$route.query.ztccValues) {
try {
const ztccValues = JSON.parse(this.$route.query.ztccValues);
if (Array.isArray(ztccValues) && ztccValues.length > 0) {
ztcc = ztccValues[0];
}
} catch (e) {
console.warn('解析ztcc值失败:', e);
}
}
// 构建查询参数
const queryParams = {
from: 'recommendation',
jh: this.$route.query.jh,
qk: this.$route.query.qk,
ztcc: ztcc
};
// 如果有推荐数据，添加t01-t06参数
if (this.apiData && this.apiData.zttjfa) {
const zttjfa = this.apiData.zttjfa;
queryParams.t01 = zttjfa.t01; // 刀翼数
queryParams.t02 = zttjfa.t02; // 布齿密度
queryParams.t03 = zttjfa.t03; // 切削齿尺寸
queryParams.t04 = zttjfa.t04; // 切削齿后倾角
queryParams.t05 = zttjfa.t05; // 冠部轮廓
// queryParams.t06 = zttjfa.t06; // 保径
}
console.log('跳转参数:', queryParams);
// 跳转到钻头匹配页面
this.$router.push({
name: 'BitMatching',
query: queryParams
})
},
// 添加返回按钮处理方法
handleBack() {
console.log('返回上一页')
// 根据来源页面决定返回路径
const from = this.$route.query.from || 'main'
if (from === 'main') {
// 返回BitDesign页面时，需要传递必要的参数
const queryParams = {
jh: this.$route.query.jh, // 井号
qk: this.$route.query.qk // 区块
};
console.log('返回BitDesign页面，传递参数:', queryParams);
this.$router.push({
name: 'BitDesign',
query: queryParams
})
} else {
this.$router.go(-1)
}
},
handleUpdate(row) {
const sourceRow = row && Object.keys(row).length ? row : this.recommendationData
this.selectedBitData = this.buildSelectionInfoData(sourceRow)
this.selectionDialogVisible = true
},
buildSelectionInfoData(row) {
const zttjfa = (this.apiData && this.apiData.zttjfa) || {}
const detail = {
ztxh: zttjfa.ztxh || '',
ztcc: this.controlForm.bitSize || '',
ztlb: zttjfa.ztlb || '',
ztbh: zttjfa.ztbh || '',
tzdm01: row.bladeCount || zttjfa.t01 || '',
tzdm02: row.density || zttjfa.t02 || '',
tzdm03: row.toothSize || zttjfa.t03 || '',
tzdm04: row.negativeAngle || zttjfa.t04 || '',
tzdm05: row.crownProfile || zttjfa.t05 || '',
tzdm06: zttjfa.t06 || '',
slt01: '',
slt02: '',
slt03: '',
slt04: '',
slt05: '',
slt06: '',
t01match: row.bladeCount ? '推荐' : '',
t02match: row.density ? '推荐' : '',
t03match: row.toothSize ? '推荐' : '',
t04match: row.negativeAngle ? '推荐' : '',
t05match: row.crownProfile ? '推荐' : '',
t06match: zttjfa.t06 ? '推荐' : ''
}
return detail
},
handleSelectionDialogClose() {
this.selectionDialogVisible = false
this.selectedBitData = {}
},
isMatch(status) {
return status === '匹配' || status === '推荐' || status === true
},
getSelectedValue(field) {
return (this.selectedBitData && this.selectedBitData[field]) || ''
}
}
}
</script>
<style lang="scss" scoped>
.bit-design-recommendation {
padding: 5px;
.control-bar {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 5px;
padding: 5px;
background-color: #f5f7fa;
border-radius: 4px;
.control-item {
display: flex;
align-items: center;
gap: 8px;
label {
font-weight: bold;
color: #333;
white-space: nowrap;
}
.control-value {
background-color: #f5f7fa;
color: #333;
padding: 6px 12px;
border-radius: 4px;
font-weight: bold;
border: 1px solid #dcdfe6;
min-width: 80px;
text-align: center;
}
.opening-info {
background-color: #e6f7ff;
color: #1890ff;
padding: 4px 8px;
border-radius: 4px;
font-weight: bold;
border: 1px solid #91d5ff;
}
.debug-info {
background-color: #fff2e8;
color: #fa8c16;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
border: 1px solid #ffbb96;
font-family: monospace;
}
}
}
.main-content {
display: flex;
flex-direction: column;
gap: 20px;
.charts-section {
flex: 1;
.charts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
.chart-item {
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 10px;
.chart {
border-radius: 4px;
}
.chart-title {
text-align: center;
margin-top: 5px;
font-size: 12px;
color: #666;
}
}
}
}
.recommendation-section {
width: 100%;
.recommendation-panel {
width: 100%;
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 20px;
h3 {
margin: 0 0 15px 0;
text-align: center;
color: #333;
}
.action-buttons {
margin-top: 20px;
text-align: center;
}
}
}
}
.selection-dialog {
:deep(.el-dialog__body) {
padding: 0 !important;
background-color: #f5f7fa;
overflow: hidden;
}
:deep(.el-dialog) {
margin-top: 5vh !important;
}
:deep(.el-dialog__header) {
padding: 20px 20px 10px;
background-color: #fff;
}
.selection-dialog-content {
padding: 0;
overflow: hidden;
}
:deep(.bit-selection-info) {
padding: 10px;
background-color: #f5f7fa;
min-height: 70vh;
max-height: 80vh;
position: relative;
overflow-y: auto;
overflow-x: hidden;
.matching-table {
margin-bottom: 10px;
background-color: #fff;
padding: 10px;
border-radius: 4px;
.match-status-table {
.status-icon {
font-size: 16px;
font-weight: bold;
&.match {
color: #67C23A;
}
&.no-match {
color: #f56c6c;
}
}
}
}
.parameters-section {
margin-bottom: 60px;
.parameter-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 10px;
.parameter-item {
background-color: #fff;
border-radius: 4px;
padding: 15px;
text-align: center;
position: relative;
.parameter-info {
margin-bottom: 10px;
h4 {
margin: 0 0 5px 0;
color: #333;
font-size: 14px;
font-weight: bold;
}
.parameter-value {
display: none;
}
.match-status {
display: none;
}
}
.parameter-image {
img {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 4px;
border: 1px solid #e4e7ed;
}
.no-image {
width: 100%;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f7fa;
border: 1px solid #e4e7ed;
border-radius: 4px;
color: #999;
font-size: 12px;
}
}
}
}
}
.footer-actions {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 10;
}
}
}
}
</style>
src/views/wellDesign/components/BitDesignRecommendation copy.vue deleted 100644 → 0
<template>
<div class="bit-design-recommendation">
<!-- 控制栏 -->
<div class="control-bar">
<div class="control-item">
<label>开次:</label>
<span class="control-value">{{ displayOpeningTimes }}</span>
</div>
<!-- 显示当前开次信息 -->
<!-- <div class="control-item" v-if="currentOpeningInfo">
<label>当前开次:</label>
<span class="opening-info">{{ currentOpeningInfo }}</span>
</div> -->
<!-- 调试信息显示 -->
<!-- <div class="control-item" v-if="debugInfo">
<label>调试信息:</label>
<span class="debug-info">{{ debugInfo }}</span>
</div> -->
<!-- <div class="control-item">
<label>深度范围:</label>
<el-slider v-model="controlForm.depthRange" range :min="0" :max="5000" :step="100"
style="width: 200px;" />
</div> -->
<div class="control-item">
<label>钻头尺寸mm:</label>
<span class="control-value">{{ displayBitSize }}</span>
</div>
<el-button type="primary" @click="handleQuery">查询</el-button>
</div>
<!-- 主要内容区域 -->
<div class="main-content">
<!-- 左侧图表区域 -->
<div class="charts-section">
<div class="charts-grid">
<!-- 刀翼总数 -->
<div class="chart-item">
<div ref="bladeChart1" class="chart" style="width: 100%; height: 200px;"></div>
<div class="chart-title">刀翼总数</div>
</div>
<!-- 布齿密度 -->
<div class="chart-item">
<div ref="bladeChart2" class="chart" style="width: 100%; height: 200px;"></div>
<div class="chart-title">布齿密度</div>
</div>
<!-- 切削齿尺寸 -->
<div class="chart-item">
<div ref="bladeChart3" class="chart" style="width: 100%; height: 200px;"></div>
<div class="chart-title">切削齿尺寸</div>
</div>
<!-- 切削齿后倾角 -->
<div class="chart-item">
<div ref="bladeChart4" class="chart" style="width: 100%; height: 200px;"></div>
<div class="chart-title">切削齿后倾角°</div>
</div>
<!-- 冠部轮廓 -->
<div class="chart-item">
<div ref="cuttingTeethChart1" class="chart" style="width: 100%; height: 200px;"></div>
<div class="chart-title">冠部轮廓</div>
</div>
<!-- 保径图表 -->
<div class="chart-item">
<div ref="gaugeChart" class="chart" style="width: 100%; height: 200px;"></div>
<div class="chart-title">
<div class="chart-title">保径</div>
</div>
</div>
</div>
</div>
<!-- 右侧推荐方案 -->
<div class="recommendation-section">
<div class="recommendation-panel">
<h3>钻头设计推荐方案</h3>
<el-table :data="recommendationData" border style="width: 100%">
<el-table-column prop="parameter" label="设计参数" width="120" />
<el-table-column prop="result" label="推荐结果" />
</el-table>
<div class="action-buttons">
<el-button type="primary" @click="handleMatchBit">匹配钻头</el-button>
<el-button @click="handleBack">返回</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { getCjqxDataztyx, ztTj } from "@/api/system/cjsjLas";
export default {
name: 'BitDesignRecommendation',
data() {
return {
controlForm: {
openingTimes: 'first',
depthRange: [1000, 3000],
bitSize: '224.1'
},
charts: {},
currentOpeningInfo: '', // 当前开次信息
debugInfo: '', // 调试信息
displayOpeningTimes: '一开', // 显示的开次名称
displayBitSize: '224.1mm', // 显示的钻头尺寸
// 接口返回的数据
apiData: null,
recommendationData: [
{ parameter: '材质', result: '钢体' },
{ parameter: '刀翼数', result: '5' },
{ parameter: '冠部轮廓', result: '中剖面' },
{ parameter: '切削齿尺寸', result: '16mm' },
{ parameter: '双排齿', result: '是' },
{ parameter: '控制涡轮', result: '否' },
{ parameter: '保径板', result: '常规' },
{ parameter: '水力设计', result: '常规' },
{ parameter: '喷嘴数', result: '5~7' },
{ parameter: '限位齿', result: '否' },
{ parameter: 'HSI要求', result: '>=2.0' }
]
}
},
mounted() {
this.initFromQuery()
this.$nextTick(() => {
this.initCharts()
})
},
beforeDestroy() {
Object.values(this.charts).forEach(chart => {
if (chart) {
chart.dispose()
}
})
},
methods: {
// 初始化页面参数
initFromQuery() {
console.log('initFromQuery 方法被调用了！');
const query = this.$route.query;
console.log('=== 推荐方案页面接收到的所有参数 ===');
console.log('完整query对象:', query);
console.log('参数详情:');
console.log('- from:', query.from);
console.log('- jh (井号):', query.jh);
console.log('- qk (区块):', query.qk);
console.log('- openingTimes (开次):', query.openingTimes);
console.log('- startDepth (起始深度):', query.startDepth);
console.log('- endDepth (结束深度):', query.endDepth);
console.log('- pointCount (数据点数):', query.pointCount);
console.log('- ztccValues (ztcc值):', query.ztccValues);
console.log('- ztccData (ztcc数据):', query.ztccData);
console.log('=====================================');
// 设置开次显示值
if (query.openingTimes) {
this.displayOpeningTimes = query.openingTimes;
// 同时设置内部值用于其他逻辑
const openingTimesMap = {
'一开': 'first',
'二开': 'second',
'三开': 'third',
'第三开次': 'third',
'第四开次': 'fourth',
'第五开次': 'fifth'
};
const mappedValue = openingTimesMap[query.openingTimes] || 'first';
this.controlForm.openingTimes = mappedValue;
console.log(`开次显示: ${query.openingTimes}`);
}
// 设置钻头尺寸显示值
if (query.ztccValues) {
try {
const ztccValues = JSON.parse(query.ztccValues);
if (ztccValues && ztccValues.length > 0) {
// 取第一个ztcc值作为显示的钻头尺寸
const firstZtcc = ztccValues[0].toString();
this.displayBitSize = `${firstZtcc}mm`;
this.controlForm.bitSize = firstZtcc;
console.log(`钻头尺寸显示: ${firstZtcc}mm`);
}
} catch (e) {
console.warn('解析ztcc值失败:', e);
}
}
if (query.startDepth && query.endDepth) {
// 设置深度范围
const startDepth = parseInt(query.startDepth);
const endDepth = parseInt(query.endDepth);
this.controlForm.depthRange = [startDepth, endDepth];
console.log(`深度范围设置: ${startDepth} - ${endDepth}m`);
}
// 设置当前开次信息显示
if (query.openingTimes && query.startDepth && query.endDepth) {
this.currentOpeningInfo = `${query.openingTimes} (${query.startDepth}-${query.endDepth}m)`;
console.log('当前开次信息:', this.currentOpeningInfo);
// 显示成功消息
this.$nextTick(() => {
this.$message.success(`已选择${query.openingTimes}: ${query.startDepth}-${query.endDepth}m`);
});
}
// 打印最终的控制表单状态
console.log('最终控制表单状态:', this.controlForm);
// 设置调试信息显示
if (query.jh || query.openingTimes) {
this.debugInfo = `井号:${query.jh || '未知'} | 开次:${query.openingTimes || '未知'} | 数据点:${query.pointCount || '0'}`;
}
// 调用接口获取推荐数据
this.fetchRecommendationData();
},
// 获取推荐数据
fetchRecommendationData() {
const query = this.$route.query;
if (!query.jh || !query.startDepth || !query.endDepth) {
console.warn('缺少必要参数，无法调用推荐接口');
return;
}
const params = {
jh: query.jh,
ksjs: parseFloat(query.startDepth), // 开始井深
jsjs: parseFloat(query.endDepth) // 结束井深
};
console.log('调用ztTj接口，参数:', params);
ztTj(params).then(response => {
console.log('ztTj接口返回数据:', response);
this.apiData = response;
// 更新推荐方案表格
this.updateRecommendationData(response);
// 更新图表数据
this.updateChartsWithApiData(response);
}).catch(error => {
console.error('调用ztTj接口失败:', error);
this.$message.error('获取推荐数据失败，请重试');
});
},
// 更新推荐方案数据
updateRecommendationData(data) {
if (!data || !data.zttjfa) {
console.warn('推荐方案数据格式错误');
return;
}
const zttjfa = data.zttjfa;
console.log('zttjfa推荐数据:', zttjfa);
// 根据新的字段结构使用zttjfa中的推荐值
// t01: 刀翼数, t02: 布齿密度, t03: 切削齿尺寸, t04: 切削齿后倾角, t05: 冠部轮廓, t06: 保径
this.recommendationData = [
{ parameter: '材质', result: '钢体' },
{ parameter: '刀翼数', result: zttjfa.t01 || '4' },
{ parameter: '冠部轮廓', result: zttjfa.t05 || '短抛物' },
{ parameter: '切削齿尺寸', result: (zttjfa.t03 || '8') + 'mm' },
{ parameter: '切削齿后倾角°', result: (zttjfa.t04 || '15') + '°' },
{ parameter: '布齿密度', result: zttjfa.t02 || '低' },
{ parameter: '保径', result: zttjfa.t06 || '常规' },
{ parameter: '双排齿', result: '是' },
{ parameter: '控制涡轮', result: '否' },
{ parameter: '水力设计', result: '常规' },
{ parameter: '喷嘴数', result: '5~7' },
{ parameter: '限位齿', result: '否' },
{ parameter: 'HSI要求', result: '>=2.0' }
];
console.log('推荐方案数据已更新:', this.recommendationData);
},
// 使用接口数据更新图表
updateChartsWithApiData(data) {
if (!data) {
console.warn('没有数据，无法更新图表');
return;
}
console.log('开始更新图表，接收到的数据:', data);
// 更新刀翼数图表 (blade1 对应 dys)
if (data.dys && this.charts.blade1) {
console.log('更新刀翼数图表:', data.dys);
this.updateBladeChart(data.dys);
}
// 更新布齿密度图表 (blade2 对应 bcmd)
if (data.bcmd && this.charts.blade2) {
console.log('更新布齿密度图表:', data.bcmd);
this.updateDensityChart(data.bcmd);
}
// 更新切削齿尺寸图表 (blade3 对应 qxccc)
if (data.qxccc && this.charts.blade3) {
console.log('更新切削齿尺寸图表:', data.qxccc);
this.updateCuttingTeethSizeChart(data.qxccc);
}
// 更新切削齿后倾角图表 (blade4 对应 qxcfqj)
if (data.qxcfqj && this.charts.blade4) {
console.log('更新切削齿后倾角图表:', data.qxcfqj);
this.updateCuttingTeethAngleChart(data.qxcfqj);
}
// 更新冠部轮廓图表 (cuttingTeeth1 对应 gblk)
if (data.gblk && this.charts.cuttingTeeth1) {
console.log('更新冠部轮廓图表:', data.gblk);
this.updateCrownProfileChart(data.gblk);
}
// 更新保径图表 (gauge 对应 bjdata)
if (data.bjdata && this.charts.gauge) {
console.log('更新保径图表:', data.bjdata);
this.updateGaugeChart(data.bjdata);
}
},
// 更新刀翼数图表
updateBladeChart(dysData) {
if (!dysData || !dysData.X || !dysData.Y) {
console.warn('刀翼数图表数据无效:', dysData);
return;
}
console.log('更新刀翼数图表 - X轴:', dysData.X, 'Y轴:', dysData.Y);
// 直接使用后台返回的数据，不生成示例数据
let displayData = [...dysData.Y]; // 复制原始数据
this.charts.blade1.setOption({
title: { text: '刀翼数', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: dysData.X,
axisLabel: {
rotate: 45,
fontSize: 10
}
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '刀翼数',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
// 推荐值用不同颜色突出显示
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t01 || '4'; // t01是刀翼数
if (dysData.X[params.dataIndex].includes(recommendedValue)) {
return '#FF6B6B'; // 推荐值用红色
}
return '#409EFF'; // 其他用蓝色
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新布齿密度图表
updateDensityChart(bcmdData) {
if (!bcmdData || !bcmdData.X || !bcmdData.Y) {
console.warn('布齿密度图表数据无效:', bcmdData);
return;
}
console.log('更新布齿密度图表 - X轴:', bcmdData.X, 'Y轴:', bcmdData.Y);
// 直接使用后台返回的数据，不生成示例数据
let displayData = [...bcmdData.Y]; // 复制原始数据
this.charts.blade2.setOption({
title: { text: '布齿密度', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: bcmdData.X
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '布齿密度',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t02 || '低'; // t02是布齿密度
if (bcmdData.X[params.dataIndex] === recommendedValue) {
return '#FF6B6B';
}
return '#67C23A';
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新切削齿尺寸图表
updateCuttingTeethSizeChart(qxcccData) {
if (!qxcccData || !qxcccData.X || !qxcccData.Y) {
console.warn('切削齿尺寸图表数据无效:', qxcccData);
return;
}
console.log('更新切削齿尺寸图表 - X轴:', qxcccData.X, 'Y轴:', qxcccData.Y);
// 直接使用后台返回的数据，不生成示例数据
let displayData = [...qxcccData.Y]; // 复制原始数据
this.charts.blade3.setOption({
title: { text: '切削齿尺寸', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}mm: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: qxcccData.X
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '切削齿尺寸',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t03 || '8'; // t03是切削齿尺寸
if (qxcccData.X[params.dataIndex] === recommendedValue) {
return '#FF6B6B';
}
return '#E6A23C';
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新切削齿后倾角图表
updateCuttingTeethAngleChart(qxcfqjData) {
if (!qxcfqjData || !qxcfqjData.X || !qxcfqjData.Y) {
console.warn('切削齿后倾角图表数据无效:', qxcfqjData);
return;
}
console.log('更新切削齿后倾角图表 - X轴:', qxcfqjData.X, 'Y轴:', qxcfqjData.Y);
// 直接使用后台返回的数据，不生成示例数据
let displayData = [...qxcfqjData.Y]; // 复制原始数据
this.charts.blade4.setOption({
title: { text: '切削齿后倾角', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}°: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: qxcfqjData.X
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '切削齿后倾角°',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t04 || '15'; // t04是切削齿后倾角
if (qxcfqjData.X[params.dataIndex] === recommendedValue) {
return '#FF6B6B';
}
return '#F56C6C';
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新冠部轮廓图表
updateCrownProfileChart(gblkData) {
if (!gblkData || !gblkData.X || !gblkData.Y) {
console.warn('冠部轮廓图表数据无效:', gblkData);
return;
}
console.log('更新冠部轮廓图表 - X轴:', gblkData.X, 'Y轴:', gblkData.Y);
// 直接使用后台返回的数据，不生成示例数据
let displayData = [...gblkData.Y]; // 复制原始数据
this.charts.cuttingTeeth1.setOption({
title: { text: '冠部轮廓', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}%'
},
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: {
type: 'category',
data: gblkData.X,
axisLabel: {
rotate: 30,
fontSize: 10
}
},
yAxis: {
type: 'value',
name: '百分比(%)',
max: 100
},
series: [
{
name: '冠部轮廓',
type: 'bar',
data: displayData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t05 || '短抛物'; // t05是冠部轮廓
if (gblkData.X[params.dataIndex] === recommendedValue) {
return '#FF6B6B';
}
return '#909399';
}.bind(this)
},
label: {
show: true,
position: 'top',
formatter: '{c}%'
}
}
]
});
},
// 更新保径图表
updateGaugeChart(bjdataArray) {
if (!Array.isArray(bjdataArray)) {
console.warn('保径图表数据无效:', bjdataArray);
return;
}
console.log('更新保径图表:', bjdataArray);
// 直接使用后台返回的数据，不生成示例数据
let pieData = bjdataArray.map(item => ({
name: item.name,
value: item.value
}));
this.charts.gauge.setOption({
title: { text: '保径', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: {
trigger: 'item',
formatter: '{b}: {c}%'
},
series: [
{
type: 'pie',
radius: '60%',
center: ['50%', '60%'],
data: pieData,
itemStyle: {
color: function (params) {
const zttjfa = this.apiData?.zttjfa;
const recommendedValue = zttjfa?.t06 || '常规'; // t06是保径
if (params.name === recommendedValue) {
return '#FF6B6B'; // 推荐值用红色
}
return params.name === '常规' ? '#409EFF' : '#67C23A';
}.bind(this)
},
label: {
formatter: '{b}: {c}%'
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
},
initCharts() {
this.initBladeCharts()
this.initCuttingTeethCharts()
this.initGaugeChart()
},
initBladeCharts() {
// 刀翼图表1 - 长剖面
if (this.$refs.bladeChart1) {
this.charts.blade1 = echarts.init(this.$refs.bladeChart1)
this.charts.blade1.setOption({
title: { text: '长剖面', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
legend: { data: ['中剖面', '刀翼轮廓'], top: 30, textStyle: { fontSize: 10 } },
grid: { top: 60, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: ['长剖面', '中剖面', '短剖面', '平剖面'] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '中剖面', type: 'bar', data: [30, 27, 25, 20] },
{ name: '刀翼轮廓', type: 'line', data: [30, 27, 25, 20] }
]
})
}
// 刀翼图表2 - 中剖面
if (this.$refs.bladeChart2) {
this.charts.blade2 = echarts.init(this.$refs.bladeChart2)
this.charts.blade2.setOption({
title: { text: '中剖面', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: [4, 5, 6, 7, 8] },
yAxis: { type: 'value', name: '百分' },
series: [
{ type: 'bar', data: [20, 25, 30, 35, 40] }
]
})
}
// 刀翼图表3 - 短剖面
if (this.$refs.bladeChart3) {
this.charts.blade3 = echarts.init(this.$refs.bladeChart3)
this.charts.blade3.setOption({
title: { text: '短剖面', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: [4, 5, 6, 7, 8] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '柱状图', type: 'bar', data: [15, 20, 25, 30, 35] },
{ name: '折线图', type: 'line', data: [15, 20, 25, 30, 35] }
]
})
}
// 刀翼图表4 - 平剖面
if (this.$refs.bladeChart4) {
this.charts.blade4 = echarts.init(this.$refs.bladeChart4)
this.charts.blade4.setOption({
title: { text: '平剖面', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: [4, 5, 6, 7, 8] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '柱状图', type: 'bar', data: [10, 15, 20, 25, 30] },
{ name: '折线图', type: 'line', data: [10, 15, 20, 25, 30] }
]
})
}
},
initCuttingTeethCharts() {
// 切削齿图表1
if (this.$refs.cuttingTeethChart1) {
this.charts.cuttingTeeth1 = echarts.init(this.$refs.cuttingTeethChart1)
this.charts.cuttingTeeth1.setOption({
title: { text: '切削齿', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'axis' },
grid: { top: 40, left: 40, right: 20, bottom: 30 },
xAxis: { type: 'category', data: ['22mm', '19mm', '16mm', '13mm', '11mm', '9mm'] },
yAxis: { type: 'value', name: '百分' },
series: [
{ name: '柱状图', type: 'bar', data: [10, 15, 25, 20, 15, 10] },
{ name: '折线图', type: 'line', data: [10, 15, 25, 20, 15, 10] }
]
})
}
},
initGaugeChart() {
// 保径图表
if (this.$refs.gaugeChart) {
this.charts.gauge = echarts.init(this.$refs.gaugeChart)
this.charts.gauge.setOption({
title: { text: '保径', left: 'center', top: 10, textStyle: { fontSize: 12 } },
tooltip: { trigger: 'item' },
series: [
{
type: 'pie',
radius: '60%',
center: ['50%', '60%'],
data: [
{ value: 85, name: '常规', itemStyle: { color: '#409EFF' } },
{ value: 15, name: '增强', itemStyle: { color: '#67C23A' } }
],
label: {
formatter: '{b}: {c}%'
}
}
]
})
}
},
handleQuery() {
console.log('查询条件:', this.controlForm)
// 这里可以调用API获取数据并更新图表
},
handleMatchBit() {
console.log('匹配钻头')
// 跳转到钻头匹配页面
this.$router.push({
name: 'BitMatching',
query: {
from: 'recommendation',
jh: this.$route.query.jh,
qk: this.$route.query.qk
}
})
},
// 添加返回按钮处理方法
handleBack() {
console.log('返回上一页')
// 根据来源页面决定返回路径
const from = this.$route.query.from || 'main'
if (from === 'main') {
this.$router.push({ name: 'BitDesign' })
} else {
this.$router.go(-1)
}
}
}
}
</script>
<style lang="scss" scoped>
.bit-design-recommendation {
padding: 10px;
.control-bar {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 10px;
padding: 15px;
background-color: #f5f7fa;
border-radius: 4px;
.control-item {
display: flex;
align-items: center;
gap: 8px;
label {
font-weight: bold;
color: #333;
white-space: nowrap;
}
.control-value {
background-color: #f5f7fa;
color: #333;
padding: 6px 12px;
border-radius: 4px;
font-weight: bold;
border: 1px solid #dcdfe6;
min-width: 80px;
text-align: center;
}
.opening-info {
background-color: #e6f7ff;
color: #1890ff;
padding: 4px 8px;
border-radius: 4px;
font-weight: bold;
border: 1px solid #91d5ff;
}
.debug-info {
background-color: #fff2e8;
color: #fa8c16;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
border: 1px solid #ffbb96;
font-family: monospace;
}
}
}
.main-content {
display: flex;
gap: 20px;
.charts-section {
flex: 1;
.charts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
.chart-item {
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 10px;
.chart {
border-radius: 4px;
}
.chart-title {
text-align: center;
margin-top: 5px;
font-size: 12px;
color: #666;
}
}
}
}
.recommendation-section {
width: 300px;
.recommendation-panel {
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 20px;
h3 {
margin: 0 0 15px 0;
text-align: center;
color: #333;
}
.action-buttons {
margin-top: 20px;
text-align: center;
}
}
}
}
}
</style>
src/views/wellDesign/components/FormationCurveChart copy 2.vue deleted 100644 → 0
<template>
<div class="box" v-loading="loading">
<div>
<div style="position: relative">
<canvas ref="plot" style="height: 700px; width: 100%; position: relative" />
<!-- 添加层位表头 -->
<div style="position: absolute; top: 20px; left: 50px; display: flex;margin-top: -4px;">
<div style="display: flex; width: 100px;">
<div
style="width: 70px; align-items: center; justify-content: center; font-size: 10px; font-weight: bold;">
层位
</div>
</div>
</div>
<!-- 添加单轴线压强度表头 -->
<div style="position: absolute; top: 5px; left: 150px; display: flex; margin-top: -4px; z-index: 2;">
<div style="display: flex; width: 100px;">
<div
style="width: 98px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background-color: #f3f8ff;">
单轴线压强度
</div>
</div>
</div>
<!-- 添加岩石可钻性级值表头 -->
<div style="position: absolute; top: 5px; left: 250px; display: flex; margin-top: -4px; z-index: 2;">
<div style="display: flex; width: 100px;">
<div
style="width: 98px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background-color: #f3f8ff;">
岩石可钻性级值
</div>
</div>
</div>
<!-- 添加研磨性系数表头 -->
<div style="position: absolute; top: 5px; left: 350px; display: flex; margin-top: -4px; z-index: 2;">
<div style="display: flex; width: 100px;">
<div
style="width: 98px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background-color: #f3f8ff;">
研磨性系数
</div>
</div>
</div>
<!-- 添加均质性系数表头 -->
<div style="position: absolute; top: 5px; left: 450px; display: flex; margin-top: -4px; z-index: 2;">
<div style="display: flex; width: 80px;">
<div
style="width: 78px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background-color: #f3f8ff;">
均质性系数
</div>
</div>
</div>
</div>
<div id="tooltip-container" style="display: none;position: absolute"></div>
</div>
</div>
</template>
<script>
import { ComponentNodeFactoryRegistry } from '@int/geotoolkit/schematics/factory/ComponentNodeFactoryRegistry';
import { v3 as WellLogWidget } from '@int/impl/geotoolkit.welllog.widgets.js';
import { LogAbstractVisual } from '@int/geotoolkit/welllog/LogAbstractVisual';
import { WellBoreNode } from '@int/geotoolkit/schematics/scene/WellBoreNode';
import { TrackType } from '@int/geotoolkit/welllog/TrackType';
import { HeaderType } from '@int/geotoolkit/welllog/header/LogAxisVisualHeader';
import { LogData } from '@int/geotoolkit/welllog/data/LogData';
import { LogCurve } from '@int/geotoolkit/welllog/LogCurve';
import { Group } from '@int/geotoolkit/scene/Group';
import { CssLayout } from '@int/geotoolkit/layout/CssLayout';
import { Plot } from '@int/geotoolkit/plot/Plot';
import { MathUtil } from '@int/geotoolkit/util/MathUtil';
import { LogMudLogSection } from '@int/geotoolkit/welllog/LogMudLogSection';
import { Text } from '@int/geotoolkit/scene/shapes/Text';
import { getCjqxDatadcyx } from "@/api/system/cjsjLas";
export default {
name: "cjqx",
props: {
jh: {
type: String,
required: true
}
},
data() {
return {
loading: false,
curveData: {},
scale: '',
scale1: '',
layerColors: {},
uniqueLayers: [],
predefinedColors: [
'#fbd860', '#f3a43a', '#5fc0de', '#d74f4a', '#c6e679',
'#fce913',
]
}
},
mounted() {
this.onSearch()
},
watch: {
jh: {
handler(newVal) {
if (newVal) {
this.onSearch()
}
}
}
},
methods: {
onSearch() {
const canvas = this.$refs.plot;
if (!canvas) {
console.warn('Canvas element not found, skipping canvas manipulation');
this.getWelllogData();
return;
}
const parent = canvas.parentElement;
if (canvas && parent) {
parent.removeChild(canvas);
this.newCanvas = document.createElement('canvas');
this.newCanvas.style.height = '700px';
this.newCanvas.style.width = '100%';
this.newCanvas.style.position = 'relative';
this.newCanvas.setAttribute('ref', 'plot');
parent.appendChild(this.newCanvas);
this.$refs.plot = this.newCanvas;
}
this.getWelllogData()
},
getWelllogData() {
this.loading = true;
getCjqxDatadcyx({ jh: this.jh }).then(res => {
this.scale = res.scale;
this.scale1 = res.scale1;
this.curveData = {};
// 处理层位数据
this.curveData['层位'] = this.filterValidData(this.processData(res.cwList, '层位'), '层位');
this.processLayerData(this.curveData['层位']);
// 处理其他指标数据
this.curveData['单轴线压强度'] = this.filterValidData(this.processData(res.dzkyList, '单轴线压强度'), '单轴线压强度');
this.curveData['岩石可钻性级值'] = this.filterValidData(this.processData(res.yskzxjzList, '岩石可钻性级值'), '岩石可钻性级值');
this.curveData['研磨性系数'] = this.filterValidData(this.processData(res.ymzsList, '研磨性系数'), '研磨性系数');
this.curveData['均质性系数'] = this.filterValidData(this.processData(res.cjzsList, '均质性系数'), '均质性系数');
this.createScene(this.$refs.plot);
}).catch(error => {
console.error('获取数据失败:', error);
this.$message.error('获取数据失败');
}).finally(() => {
this.loading = false;
});
},
createScene(canvas) {
const widget = new WellLogWidget({
'header': { 'visible': true },
'footer': { 'visible': false },
'border': { 'visible': true },
'horizontalscrollable': false,
'verticalscrollable': false,
'nodefilter': (node) => node instanceof LogAbstractVisual || node instanceof WellBoreNode
})
.setAxisHeaderType(HeaderType.Simple)
.setHeaderHeight(90)
.setIndexUnit('m');
widget.setDepthLimits(this.scale1, this.scale);
this.applyModernThemeCSS(widget);
widget.addTrack(TrackType.IndexTrack);
// 层位轨道
const layerTrack = widget.addTrack(TrackType.LinearTrack)
.setWidth(100)
.addChild(
new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'left': '0%',
'right': '0%',
'top': '-45px',
'height': '45px'
})
);
if (this.curveData['层位'] && Array.isArray(this.curveData['层位']) && this.curveData['层位'].length > 0) {
layerTrack.addChild(
new Group()
.setLayout(new CssLayout())
.addChild(
new LogMudLogSection({
'fillstyles': (depth, text, i) => {
const layerInfo = this.curveData['层位'].find(
range => depth >= range.startDepth && depth < range.endDepth
);
return layerInfo ? this.layerColors[layerInfo.layer] : '#FFFFFF';
},
'textstyles': {
'color': '#FFFFFF !important',
'font': 'bold 14px Arial',
'alignment': 'center',
'baseline': 'middle',
'angle': 0,
'css': {
'writing-mode': 'vertical-rl',
'text-orientation': 'upright',
'white-space': 'nowrap',
'text-shadow': '1px 1px 2px rgba(0,0,0,0.8)',
'color': '#FFFFFF !important'
}
},
'displaytext': (depth, text) => {
const layerInfo = this.curveData['层位'].find(
range => depth >= range.startDepth && depth < range.endDepth
);
if (!layerInfo) return '';
return `<div style="color: white !important; font-weight: bold; font-size: 14px; writing-mode: vertical-rl; text-orientation: upright; text-shadow: 1px 1px 3px black; width: 100%; text-align: center;">${layerInfo.layer}</div>`;
},
'textposition': 'center',
'textoptions': {
'horizontaloffset': 0,
'sectionheight': 20,
'verticaloffset': 0,
'wordwrap': false,
'useHTML': true
}
})
.setDepthsAndValues(
this.curveData['层位'].reduce((acc, layer) => {
acc.push(layer.startDepth);
acc.push(layer.endDepth);
return acc;
}, []),
this.curveData['层位'].reduce((acc, layer) => {
acc.push(layer.layer);
acc.push(layer.layer);
return acc;
}, [])
)
.setEllipsisString('')
)
);
}
// 单轴线压强度轨道
const dzkTrack = widget.addTrack(TrackType.LinearTrack)
.setWidth(100);
const dzkCurve = this.createCurve(0, 20, '单轴线压强度', 'orange');
if (dzkCurve !== null) {
dzkTrack.addChild(dzkCurve);
}
// 岩石可钻性级值轨道
const yskzTrack = widget.addTrack(TrackType.LinearTrack)
.setWidth(100);
const yskzCurve = this.createCurve(0, 20, '岩石可钻性级值', 'orange');
if (yskzCurve !== null) {
yskzTrack.addChild(yskzCurve);
}
// 研磨性系数轨道
const ymzsTrack = widget.addTrack(TrackType.LinearTrack)
.setWidth(100);
const ymzsCurve = this.createCurve(0, 20, '研磨性系数', '#7cb342');
if (ymzsCurve !== null) {
ymzsTrack.addChild(ymzsCurve);
}
// 均质性系数轨道
const cjzsTrack = widget.addTrack(TrackType.LinearTrack)
.setWidth(80);
const cjzsCurve = this.createCurve(0, 20, '均质性系数', 'orange');
if (cjzsCurve !== null) {
cjzsTrack.addChild(cjzsCurve);
}
// 添加层位图例
this.addLayerLegend(widget);
widget.setLayoutStyle({
'top': 0,
'left': 0,
'bottom': 0,
'width': 1200
});
const plot = new Plot({
'canvasElement': canvas,
'autosize': false,
'root': widget
});
widget.fitToHeight();
plot.getTool().add(widget.getTool());
return plot;
},
addLayerLegend(widget) {
const legendGroup = new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'position': 'absolute',
'top': '10px',
'right': '10px',
'background': 'rgba(255, 255, 255, 0.9)',
'padding': '10px',
'border': '1px solid #ccc',
'borderRadius': '4px',
'width': '120px'
});
const legendTitle = new Text({
text: '层位图例',
textbaseline: 'top',
textalign: 'left'
})
.setTextStyle({
'color': '#000000',
'font': 'bold 12px Roboto'
})
.setLayoutStyle({
'position': 'absolute',
'left': '5px',
'top': '5px'
});
legendGroup.addChild(legendTitle);
this.uniqueLayers.forEach((layer, index) => {
const legendItemGroup = new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'position': 'absolute',
'left': '5px',
'top': `${index * 25 + 30}px`,
'width': '110px',
'height': '20px'
});
const colorBox = new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'position': 'absolute',
'left': '0px',
'top': '2px',
'width': '15px',
'height': '15px',
'background': this.layerColors[layer],
'border': '1px solid #ccc'
});
const legendText = new Text({
text: layer,
textbaseline: 'top',
textalign: 'left'
})
.setTextStyle({
'color': '#000000',
'font': '10px Roboto'
})
.setLayoutStyle({
'position': 'absolute',
'left': '25px',
'top': '2px'
});
legendItemGroup.addChild(colorBox);
legendItemGroup.addChild(legendText);
legendGroup.addChild(legendItemGroup);
});
widget.addChild(legendGroup);
},
applyModernThemeCSS(widget) {
widget.setCss(new CssStyle({
'css': [
'* {',
' textstyle-font : 10px Roboto;',
' textstyle-color : #000;',
'}',
'.geotoolkit.welllog.header.AdaptiveLogCurveVisualHeader {',
' element-tracking-textstyle-font : bold 10px Roboto;',
' element-tracking-textstyle-color : #000;',
'}',
'.geotoolkit.welllog.header.LogTrackHeader {',
' borderfillstyle-style: lineargradient;',
' borderfillstyle-unittype: absoluteCoordinates;',
' borderfillstyle-startpoint-x: 0;',
' borderfillstyle-startpoint-y: 0;',
' borderfillstyle-startcolor: rgba(255, 255, 255, 0);',
' borderfillstyle-endpoint-x: 0;',
' borderfillstyle-endpoint-y: 500;',
' borderfillstyle-endcolor: rgba(255, 255, 255, 0);',
' borderlinestyle: null;',
' isbordervisible: true;',
' borders-left: true;',
' borders-top: true;',
' borders-right: true;',
' borders-bottom: true;',
'}',
'.geotoolkit.welllog.LogTrack {',
' backgroundcolor-style: lineargradient;',
' backgroundcolor-unittype: absoluteCoordinates;',
' backgroundcolor-startpoint-x: 0;',
' backgroundcolor-startpoint-y: 0;',
' backgroundcolor-startcolor: rgba(255, 255, 255, 0);',
' backgroundcolor-endpoint-x: 0;',
' backgroundcolor-endpoint-y: 500;',
' backgroundcolor-endcolor: rgba(255, 255, 255, 0);',
' clipping : true;',
' borderstrategy: top;',
' border-visible : true;',
' border-borderstyle: visible-bounds;',
' border-linestyle-color: #000;',
' border-linestyle-weight: blod;',
' border-linestyle-pixelsnapmode-x: true;',
' border-linestyle-pixelsnapmode-y: true;',
' border-borders-left : true;',
' border-borders-right : true;',
' border-borders-top : true;',
' border-borders-bottom : true;',
'}',
'.geotoolkit.welllog.LogAxis {',
' tickgenerator-major-labelstyle-color: red;',
' tickgenerator-major-labelstyle-font: 10px Roboto;',
' tickgenerator-major-tickstyle-color: #C8C8C8;',
' tickgenerator-major-tickstyle-width: 1;',
' tickgenerator-major-tickstyle-pixelsnapmode-x: true;',
' tickgenerator-major-tickstyle-pixelsnapmode-y: true;',
' tickgenerator-minor-tickstyle-color: #646464;',
' tickgenerator-edge-labelstyle-color: red;',
' tickgenerator-edge-tickstyle-color: #EFFFFF;',
' tickgenerator-edge-labelstyle-font: 10px Roboto;',
'}',
'.geotoolkit.welllog.LogCurve:highlight {',
' linestyle-width: 2;',
' linestyle-shadow-enable: true;',
' linestyle-shadow-blur: 2;',
' linestyle-shadow-offsetx: 0;',
' linestyle-shadow-offsety: 0;',
'}',
'.geotoolkit.welllog.LogTrack:highlight {',
' borderstrategy: top;',
' linestyle-color: grey;',
' linestyle-width: 2;',
' linestyle-shadow-enable: true;',
' linestyle-shadow-blur: 2;',
' linestyle-shadow-offsetx: 0;',
' linestyle-shadow-offsety: 0;',
'}'
].join('')
}))
},
processData(data, key) {
if (!data) {
console.warn(`${key} 数据为空`);
return [];
}
if (Array.isArray(data)) {
return data;
}
console.warn(`${key} 数据格式不正确:`, data);
return [];
},
filterValidData(data, name) {
if (!data || !Array.isArray(data)) {
console.warn(`${name} 数据无效或为空`);
return [];
}
if (name === '层位') {
if (!data || !Array.isArray(data)) {
console.warn('层位数据无效或为空');
return [];
}
const layerRanges = [];
let currentLayer = null;
let startDepth = null;
data.forEach((value, index) => {
const depth = this.scale1 + index * 0.5;
if (value && value !== currentLayer) {
if (currentLayer) {
layerRanges.push({
layer: currentLayer,
startDepth: startDepth,
endDepth: depth
});
}
currentLayer = value;
startDepth = depth;
}
});
if (currentLayer) {
layerRanges.push({
layer: currentLayer,
startDepth: startDepth,
endDepth: this.scale
});
}
return layerRanges;
}
const validData = [];
data.forEach((value, index) => {
if (value !== 0) {
validData.push({
depth: this.scale1 + index * 0.5,
value: value
});
}
});
return validData.map(item => item.value);
},
createCurve(from, step, curveMnemonic, color) {
try {
if (!this.curveData) {
console.warn('curveData 对象不存在');
return null;
}
const values = this.curveData[curveMnemonic];
if (!values || !Array.isArray(values) || values.length === 0) {
console.warn(`${curveMnemonic} 的数据无效:`, values);
return null;
}
const depths = Array.from({ length: values.length }, (_, i) => from + i * step);
const data = new LogData(depths, values);
const limits = MathUtil.calculateNeatLimits(data.getMinValue(), data.getMaxValue(), false, false);
return new LogCurve(data)
.setName(curveMnemonic)
.setNormalizationLimits(limits)
.setLineStyle({
'color': color,
'width': 1
});
} catch (e) {
console.error(`创建曲线 ${curveMnemonic} 时出错:`, e);
return null;
}
},
generateRandomColor(index) {
if (index < this.predefinedColors.length) {
return this.predefinedColors[index];
}
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
},
processLayerData(layerRanges) {
if (!layerRanges || !Array.isArray(layerRanges) || layerRanges.length === 0) {
this.uniqueLayers = [];
this.layerColors = {};
return { uniqueLayers: [], layerColors: {}, layerRanges: [] };
}
const uniqueLayers = [...new Set(layerRanges.map(item => item.layer))];
const layerColors = {};
uniqueLayers.forEach((layer, index) => {
const color = this.generateRandomColor(index);
this.$set(layerColors, layer, color);
});
this.uniqueLayers = uniqueLayers;
this.layerColors = layerColors;
return { uniqueLayers, layerColors, layerRanges };
}
}
};
</script>
<style lang="scss" scoped>
.image {
width: 100%;
height: 450px;
}
@media screen and (min-width: 1400px),
screen and (min-height: 800px) {
.image {
height: 650px;
}
}
.box {
margin: 0 5px;
min-height: 600px;
overflow-y: auto;
}
div#tooltip-container {
z-index: 100;
margin-left: 5px;
opacity: 1;
text-align: left;
color: rgb(73, 73, 73);
padding-left: 5px;
padding-right: 5px;
background: rgba(255, 255, 204, 0.5);
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: grey;
border-image: initial;
width: 150px;
}
</style>
\ No newline at end of file
src/views/wellDesign/components/FormationCurveChart copy 3.vue deleted 100644 → 0
<template>
<div class="box" v-loading="loading">
<div>
<div style="position: relative">
<canvas ref="plot" style="height: 700px; width: 100%; position: relative" />
<!-- 添加层位表头 -->
<div style="position: absolute; top: 20px; left: 50px; display: flex;margin-top: -4px;">
<div style="display: flex; width: 100px;">
<div
style="width: 70px; align-items: center; justify-content: center; font-size: 10px; font-weight: bold;">
层位
</div>
</div>
</div>
<!-- 添加单轴线压强度表头 -->
<div style="position: absolute; top: 5px; left: 150px; display: flex; margin-top: -4px; z-index: 2;">
<div style="display: flex; width: 100px;">
<div
style="width: 98px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background-color: #f3f8ff;">
单轴线压强度
</div>
</div>
</div>
<!-- 添加岩石可钻性级值表头 -->
<div style="position: absolute; top: 5px; left: 250px; display: flex; margin-top: -4px; z-index: 2;">
<div style="display: flex; width: 100px;">
<div
style="width: 98px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background-color: #f3f8ff;">
岩石可钻性级值
</div>
</div>
</div>
<!-- 添加研磨性系数表头 -->
<div style="position: absolute; top: 5px; left: 350px; display: flex; margin-top: -4px; z-index: 2;">
<div style="display: flex; width: 100px;">
<div
style="width: 98px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background-color: #f3f8ff;">
研磨性系数
</div>
</div>
</div>
<!-- 添加均质性系数表头 -->
<div style="position: absolute; top: 5px; left: 450px; display: flex; margin-top: -4px; z-index: 2;">
<div style="display: flex; width: 80px;">
<div
style="width: 78px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background-color: #f3f8ff;">
均质性系数
</div>
</div>
</div>
</div>
<div id="tooltip-container" style="display: none;position: absolute"></div>
</div>
</div>
</template>
<script>
import { ComponentNodeFactoryRegistry } from '@int/geotoolkit/schematics/factory/ComponentNodeFactoryRegistry';
import { v3 as WellLogWidget } from '@int/impl/geotoolkit.welllog.widgets.js';
import { LogAbstractVisual } from '@int/geotoolkit/welllog/LogAbstractVisual';
import { WellBoreNode } from '@int/geotoolkit/schematics/scene/WellBoreNode';
import { TrackType } from '@int/geotoolkit/welllog/TrackType';
import { HeaderType } from '@int/geotoolkit/welllog/header/LogAxisVisualHeader';
import { LogData } from '@int/geotoolkit/welllog/data/LogData';
import { LogCurve } from '@int/geotoolkit/welllog/LogCurve';
import { Group } from '@int/geotoolkit/scene/Group';
import { CssLayout } from '@int/geotoolkit/layout/CssLayout';
import { Plot } from '@int/geotoolkit/plot/Plot';
import { MathUtil } from '@int/geotoolkit/util/MathUtil';
import { LogMudLogSection } from '@int/geotoolkit/welllog/LogMudLogSection';
import { Text } from '@int/geotoolkit/scene/shapes/Text';
import { getCjqxDatadcyx } from "@/api/system/cjsjLas";
export default {
name: "cjqx",
props: {
jh: {
type: String,
required: true
}
},
data() {
return {
loading: false,
curveData: {},
scale: '',
scale1: '',
layerColors: {},
uniqueLayers: [],
predefinedColors: [
'#fbd860', '#f3a43a', '#5fc0de', '#d74f4a', '#c6e679',
'#fce913',
]
}
},
mounted() {
this.onSearch()
},
watch: {
jh: {
handler(newVal) {
if (newVal) {
this.onSearch()
}
}
}
},
methods: {
onSearch() {
const canvas = this.$refs.plot;
if (!canvas) {
console.warn('Canvas element not found, skipping canvas manipulation');
this.getWelllogData();
return;
}
const parent = canvas.parentElement;
if (canvas && parent) {
parent.removeChild(canvas);
this.newCanvas = document.createElement('canvas');
this.newCanvas.style.height = '700px';
this.newCanvas.style.width = '100%';
this.newCanvas.style.position = 'relative';
this.newCanvas.setAttribute('ref', 'plot');
parent.appendChild(this.newCanvas);
this.$refs.plot = this.newCanvas;
}
this.getWelllogData()
},
getWelllogData() {
this.loading = true;
getCjqxDatadcyx({ jh: this.jh }).then(res => {
this.scale = res.scale;
this.scale1 = res.scale1;
this.curveData = {};
// 处理层位数据
this.curveData['层位'] = this.filterValidData(this.processData(res.cwList, '层位'), '层位');
this.processLayerData(this.curveData['层位']);
// 处理其他指标数据
this.curveData['单轴线压强度'] = this.filterValidData(this.processData(res.dzkyList, '单轴线压强度'), '单轴线压强度');
this.curveData['岩石可钻性级值'] = this.filterValidData(this.processData(res.yskzxjzList, '岩石可钻性级值'), '岩石可钻性级值');
this.curveData['研磨性系数'] = this.filterValidData(this.processData(res.ymzsList, '研磨性系数'), '研磨性系数');
this.curveData['均质性系数'] = this.filterValidData(this.processData(res.cjzsList, '均质性系数'), '均质性系数');
this.createScene(this.$refs.plot);
}).catch(error => {
console.error('获取数据失败:', error);
this.$message.error('获取数据失败');
}).finally(() => {
this.loading = false;
});
},
createScene(canvas) {
const widget = new WellLogWidget({
'header': { 'visible': true },
'footer': { 'visible': false },
'border': { 'visible': true },
'horizontalscrollable': false,
'verticalscrollable': false,
'nodefilter': (node) => node instanceof LogAbstractVisual || node instanceof WellBoreNode
})
.setAxisHeaderType(HeaderType.Simple)
.setHeaderHeight(90)
.setIndexUnit('m');
widget.setDepthLimits(this.scale1, this.scale);
this.applyModernThemeCSS(widget);
widget.addTrack(TrackType.IndexTrack);
// 层位轨道
const layerTrack = widget.addTrack(TrackType.LinearTrack)
.setWidth(100)
.addChild(
new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'left': '0%',
'right': '0%',
'top': '-45px',
'height': '45px'
})
);
if (this.curveData['层位'] && Array.isArray(this.curveData['层位']) && this.curveData['层位'].length > 0) {
layerTrack.addChild(
new Group()
.setLayout(new CssLayout())
.addChild(
new LogMudLogSection({
'fillstyles': (depth, text, i) => {
const layerInfo = this.curveData['层位'].find(
range => depth >= range.startDepth && depth < range.endDepth
);
return layerInfo ? this.layerColors[layerInfo.layer] : '#FFFFFF';
},
'textstyles': {
'color': '#FFFFFF !important',
'font': 'bold 14px Arial',
'alignment': 'center',
'baseline': 'middle',
'angle': 0,
'css': {
'writing-mode': 'vertical-rl',
'text-orientation': 'upright',
'white-space': 'nowrap',
'text-shadow': '1px 1px 2px rgba(0,0,0,0.8)',
'color': '#FFFFFF !important'
}
},
'displaytext': (depth, text) => {
const layerInfo = this.curveData['层位'].find(
range => depth >= range.startDepth && depth < range.endDepth
);
if (!layerInfo) return '';
return `<div style="color: white !important; font-weight: bold; font-size: 14px; writing-mode: vertical-rl; text-orientation: upright; text-shadow: 1px 1px 3px black; width: 100%; text-align: center;">${layerInfo.layer}</div>`;
},
'textposition': 'center',
'textoptions': {
'horizontaloffset': 0,
'sectionheight': 20,
'verticaloffset': 0,
'wordwrap': false,
'useHTML': true
}
})
.setDepthsAndValues(
this.curveData['层位'].reduce((acc, layer) => {
acc.push(layer.startDepth);
acc.push(layer.endDepth);
return acc;
}, []),
this.curveData['层位'].reduce((acc, layer) => {
acc.push(layer.layer);
acc.push(layer.layer);
return acc;
}, [])
)
.setEllipsisString('')
)
);
}
// 单轴线压强度轨道
const dzkTrack = widget.addTrack(TrackType.LinearTrack)
.setWidth(100);
const dzkCurve = this.createCurve(0, 20, '单轴线压强度', 'orange');
if (dzkCurve !== null) {
dzkTrack.addChild(dzkCurve);
}
// 岩石可钻性级值轨道
const yskzTrack = widget.addTrack(TrackType.LinearTrack)
.setWidth(100);
const yskzCurve = this.createCurve(0, 20, '岩石可钻性级值', 'orange');
if (yskzCurve !== null) {
yskzTrack.addChild(yskzCurve);
}
// 研磨性系数轨道
const ymzsTrack = widget.addTrack(TrackType.LinearTrack)
.setWidth(100);
const ymzsCurve = this.createCurve(0, 20, '研磨性系数', '#7cb342');
if (ymzsCurve !== null) {
ymzsTrack.addChild(ymzsCurve);
}
// 均质性系数轨道
const cjzsTrack = widget.addTrack(TrackType.LinearTrack)
.setWidth(80);
const cjzsCurve = this.createCurve(0, 20, '均质性系数', 'orange');
if (cjzsCurve !== null) {
cjzsTrack.addChild(cjzsCurve);
}
// 添加层位图例
this.addLayerLegend(widget);
widget.setLayoutStyle({
'top': 0,
'left': 0,
'bottom': 0,
'width': 1200
});
const plot = new Plot({
'canvasElement': canvas,
'autosize': false,
'root': widget
});
widget.fitToHeight();
plot.getTool().add(widget.getTool());
return plot;
},
addLayerLegend(widget) {
const legendGroup = new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'position': 'absolute',
'top': '10px',
'right': '10px',
'background': 'rgba(255, 255, 255, 0.9)',
'padding': '10px',
'border': '1px solid #ccc',
'borderRadius': '4px',
'width': '120px'
});
const legendTitle = new Text({
text: '层位图例',
textbaseline: 'top',
textalign: 'left'
})
.setTextStyle({
'color': '#000000',
'font': 'bold 12px Roboto'
})
.setLayoutStyle({
'position': 'absolute',
'left': '5px',
'top': '5px'
});
legendGroup.addChild(legendTitle);
this.uniqueLayers.forEach((layer, index) => {
const legendItemGroup = new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'position': 'absolute',
'left': '5px',
'top': `${index * 25 + 30}px`,
'width': '110px',
'height': '20px'
});
const colorBox = new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'position': 'absolute',
'left': '0px',
'top': '2px',
'width': '15px',
'height': '15px',
'background': this.layerColors[layer],
'border': '1px solid #ccc'
});
const legendText = new Text({
text: layer,
textbaseline: 'top',
textalign: 'left'
})
.setTextStyle({
'color': '#000000',
'font': '10px Roboto'
})
.setLayoutStyle({
'position': 'absolute',
'left': '25px',
'top': '2px'
});
legendItemGroup.addChild(colorBox);
legendItemGroup.addChild(legendText);
legendGroup.addChild(legendItemGroup);
});
widget.addChild(legendGroup);
},
applyModernThemeCSS(widget) {
widget.setCss(new CssStyle({
'css': [
'* {',
' textstyle-font : 10px Roboto;',
' textstyle-color : #000;',
'}',
'.geotoolkit.welllog.header.AdaptiveLogCurveVisualHeader {',
' element-tracking-textstyle-font : bold 10px Roboto;',
' element-tracking-textstyle-color : #000;',
'}',
'.geotoolkit.welllog.header.LogTrackHeader {',
' borderfillstyle-style: lineargradient;',
' borderfillstyle-unittype: absoluteCoordinates;',
' borderfillstyle-startpoint-x: 0;',
' borderfillstyle-startpoint-y: 0;',
' borderfillstyle-startcolor: rgba(255, 255, 255, 0);',
' borderfillstyle-endpoint-x: 0;',
' borderfillstyle-endpoint-y: 500;',
' borderfillstyle-endcolor: rgba(255, 255, 255, 0);',
' borderlinestyle: null;',
' isbordervisible: true;',
' borders-left: true;',
' borders-top: true;',
' borders-right: true;',
' borders-bottom: true;',
'}',
'.geotoolkit.welllog.LogTrack {',
' backgroundcolor-style: lineargradient;',
' backgroundcolor-unittype: absoluteCoordinates;',
' backgroundcolor-startpoint-x: 0;',
' backgroundcolor-startpoint-y: 0;',
' backgroundcolor-startcolor: rgba(255, 255, 255, 0);',
' backgroundcolor-endpoint-x: 0;',
' backgroundcolor-endpoint-y: 500;',
' backgroundcolor-endcolor: rgba(255, 255, 255, 0);',
' clipping : true;',
' borderstrategy: top;',
' border-visible : true;',
' border-borderstyle: visible-bounds;',
' border-linestyle-color: #000;',
' border-linestyle-weight: blod;',
' border-linestyle-pixelsnapmode-x: true;',
' border-linestyle-pixelsnapmode-y: true;',
' border-borders-left : true;',
' border-borders-right : true;',
' border-borders-top : true;',
' border-borders-bottom : true;',
'}',
'.geotoolkit.welllog.LogAxis {',
' tickgenerator-major-labelstyle-color: red;',
' tickgenerator-major-labelstyle-font: 10px Roboto;',
' tickgenerator-major-tickstyle-color: #C8C8C8;',
' tickgenerator-major-tickstyle-width: 1;',
' tickgenerator-major-tickstyle-pixelsnapmode-x: true;',
' tickgenerator-major-tickstyle-pixelsnapmode-y: true;',
' tickgenerator-minor-tickstyle-color: #646464;',
' tickgenerator-edge-labelstyle-color: red;',
' tickgenerator-edge-tickstyle-color: #EFFFFF;',
' tickgenerator-edge-labelstyle-font: 10px Roboto;',
'}',
'.geotoolkit.welllog.LogCurve:highlight {',
' linestyle-width: 2;',
' linestyle-shadow-enable: true;',
' linestyle-shadow-blur: 2;',
' linestyle-shadow-offsetx: 0;',
' linestyle-shadow-offsety: 0;',
'}',
'.geotoolkit.welllog.LogTrack:highlight {',
' borderstrategy: top;',
' linestyle-color: grey;',
' linestyle-width: 2;',
' linestyle-shadow-enable: true;',
' linestyle-shadow-blur: 2;',
' linestyle-shadow-offsetx: 0;',
' linestyle-shadow-offsety: 0;',
'}'
].join('')
}))
},
processData(data, key) {
if (!data) {
console.warn(`${key} 数据为空`);
return [];
}
if (Array.isArray(data)) {
return data;
}
console.warn(`${key} 数据格式不正确:`, data);
return [];
},
filterValidData(data, name) {
if (!data || !Array.isArray(data)) {
console.warn(`${name} 数据无效或为空`);
return [];
}
if (name === '层位') {
if (!data || !Array.isArray(data)) {
console.warn('层位数据无效或为空');
return [];
}
const layerRanges = [];
let currentLayer = null;
let startDepth = null;
data.forEach((value, index) => {
const depth = this.scale1 + index * 0.5;
if (value && value !== currentLayer) {
if (currentLayer) {
layerRanges.push({
layer: currentLayer,
startDepth: startDepth,
endDepth: depth
});
}
currentLayer = value;
startDepth = depth;
}
});
if (currentLayer) {
layerRanges.push({
layer: currentLayer,
startDepth: startDepth,
endDepth: this.scale
});
}
return layerRanges;
}
const validData = [];
data.forEach((value, index) => {
if (value !== 0) {
validData.push({
depth: this.scale1 + index * 0.5,
value: value
});
}
});
return validData.map(item => item.value);
},
createCurve(from, step, curveMnemonic, color) {
try {
if (!this.curveData) {
console.warn('curveData 对象不存在');
return null;
}
const values = this.curveData[curveMnemonic];
if (!values || !Array.isArray(values) || values.length === 0) {
console.warn(`${curveMnemonic} 的数据无效:`, values);
return null;
}
const depths = Array.from({ length: values.length }, (_, i) => from + i * step);
const data = new LogData(depths, values);
const limits = MathUtil.calculateNeatLimits(data.getMinValue(), data.getMaxValue(), false, false);
return new LogCurve(data)
.setName(curveMnemonic)
.setNormalizationLimits(limits)
.setLineStyle({
'color': color,
'width': 1
});
} catch (e) {
console.error(`创建曲线 ${curveMnemonic} 时出错:`, e);
return null;
}
},
generateRandomColor(index) {
if (index < this.predefinedColors.length) {
return this.predefinedColors[index];
}
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
},
processLayerData(layerRanges) {
if (!layerRanges || !Array.isArray(layerRanges) || layerRanges.length === 0) {
this.uniqueLayers = [];
this.layerColors = {};
return { uniqueLayers: [], layerColors: {}, layerRanges: [] };
}
const uniqueLayers = [...new Set(layerRanges.map(item => item.layer))];
const layerColors = {};
uniqueLayers.forEach((layer, index) => {
const color = this.generateRandomColor(index);
this.$set(layerColors, layer, color);
});
this.uniqueLayers = uniqueLayers;
this.layerColors = layerColors;
return { uniqueLayers, layerColors, layerRanges };
}
}
};
</script>
<style lang="scss" scoped>
.image {
width: 100%;
height: 450px;
}
@media screen and (min-width: 1400px),
screen and (min-height: 800px) {
.image {
height: 650px;
}
}
.box {
margin: 0 5px;
min-height: 600px;
overflow-y: auto;
}
div#tooltip-container {
z-index: 100;
margin-left: 5px;
opacity: 1;
text-align: left;
color: rgb(73, 73, 73);
padding-left: 5px;
padding-right: 5px;
background: rgba(255, 255, 204, 0.5);
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: grey;
border-image: initial;
width: 150px;
}
</style>
\ No newline at end of file
src/views/wellDesign/components/FormationCurveChart copy.vue deleted 100644 → 0
<template>
<div class="formation-curve-chart" v-loading="loading">
<!-- 图表控制区域 -->
<div class="chart-controls">
<div class="control-item">
<label>井深范围(m):</label>
<el-input v-model="chartForm.startDepth" placeholder="起始深度" style="width: 150px; margin-right: 10px;" />
<span>-</span>
<el-input v-model="chartForm.endDepth" placeholder="结束深度" style="width: 150px; margin-left: 10px;" />
</div>
<div class="action-buttons">
<el-button type="primary" size="small" @click="handleRefreshChart">查询</el-button>
<el-button type="success" size="small" @click="handleCalculate">计算</el-button>
<el-button type="danger" size="small" @click="handleExportData">下载数据文档</el-button>
<el-button type="success" size="small" @click="handleNeighborWell">邻井映射</el-button>
</div>
</div>
<!-- 图表展示区域 -->
<div class="chart-container">
<div style="position: relative">
<canvas ref="plot" style="height: 700px; width: 100%; position: relative" />
<!-- 表头区域 -->
<div style="position: absolute; top: 5px; left: 50px; display: flex; margin-top: -4px; z-index: 2;">
<div style="display: flex; width: 100px;">
<div
style="width: 98px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background-color: #f3f8ff;">
层位
</div>
</div>
</div>
<div style="position: absolute; top: 5px; left: 150px; display: flex; margin-top: -4px; z-index: 2;">
<div style="display: flex; width: 100px;">
<div
style="width: 98px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background-color: #f3f8ff;">
单轴线压强度
</div>
</div>
</div>
<div style="position: absolute; top: 5px; left: 250px; display: flex; margin-top: -4px; z-index: 2;">
<div style="display: flex; width: 100px;">
<div
style="width: 98px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background-color: #f3f8ff;">
岩石可钻性级值
</div>
</div>
</div>
<div style="position: absolute; top: 5px; left: 350px; display: flex; margin-top: -4px; z-index: 2;">
<div style="display: flex; width: 100px;">
<div
style="width: 98px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background-color: #f3f8ff;">
研磨性系数
</div>
</div>
</div>
</div>
<div id="tooltip-container" style="display: none;position: absolute"></div>
</div>
</div>
</template>
<script>
import { ComponentNodeFactoryRegistry } from '@int/geotoolkit/schematics/factory/ComponentNodeFactoryRegistry';
import { v3 as WellLogWidget } from '@int/impl/geotoolkit.welllog.widgets.js';
import { WellBoreData } from '@int/geotoolkit/schematics/data/WellBoreData';
import { LogAbstractVisual } from '@int/geotoolkit/welllog/LogAbstractVisual';
import { WellBoreNode, ViewMode } from '@int/geotoolkit/schematics/scene/WellBoreNode';
import { TrackType } from '@int/geotoolkit/welllog/TrackType';
import { HeaderType } from '@int/geotoolkit/welllog/header/LogAxisVisualHeader';
import { Rect } from '@int/geotoolkit/util/Rect';
import { LogData } from '@int/geotoolkit/welllog/data/LogData';
import { LogCurve } from '@int/geotoolkit/welllog/LogCurve';
import { Group } from '@int/geotoolkit/scene/Group';
import { CssLayout } from '@int/geotoolkit/layout/CssLayout';
import { Plot } from '@int/geotoolkit/plot/Plot';
import { MathUtil } from '@int/geotoolkit/util/MathUtil';
import { LogMudLogSection } from '@int/geotoolkit/welllog/LogMudLogSection';
import { Text } from '@int/geotoolkit/scene/shapes/Text';
import { AnchorType } from '@int/geotoolkit/util/AnchorType';
import { CssStyle } from '@int/geotoolkit/css/CssStyle';
import { TooltipTool } from '@/views/wellTest/wellCurveData/tooltipTool';
import { getCjqxDatadcyx } from "@/api/system/cjsjLas";
export default {
name: 'FormationCurveChart',
data() {
return {
loading: false,
chartForm: {
startDepth: '2603',
endDepth: '6000'
},
plot: null,
// 模拟数据
curveData: {
// 层位数据
'层位': [
{ layer: '八道湾组', startDepth: 2603, endDepth: 2900 },
{ layer: '白碱滩组', startDepth: 2900, endDepth: 3200 },
{ layer: '百口泉组', startDepth: 3200, endDepth: 5500 },
{ layer: '下克拉玛依组', startDepth: 5500, endDepth: 6000 }
],
// 单轴线压强度数据
'单轴线压强度': Array.from({ length: 100 }, (_, i) => {
const depth = 2603 + i * 34;
return {
depth: depth,
value: 50 + Math.random() * 150 + Math.sin(depth / 100) * 20
};
}),
// 岩石可钻性级值数据
'岩石可钻性级值': Array.from({ length: 100 }, (_, i) => {
const depth = 2603 + i * 34;
return {
depth: depth,
value: 3 + Math.random() * 7 + Math.sin(depth / 200) * 2
};
}),
// 研磨性系数数据
'研磨性系数': Array.from({ length: 100 }, (_, i) => {
const depth = 2603 + i * 34;
return {
depth: depth,
value: 0.5 + Math.random() * 1.5 + Math.sin(depth / 150) * 0.3
};
})
},
// 层位颜色映射
layerColors: {
'八道湾组': '#fbd860',
'白碱滩组': '#f3a43a',
'百口泉组': '#5fc0de',
'下克拉玛依组': '#d74f4a'
},
uniqueLayers: ['八道湾组', '白碱滩组', '百口泉组', '下克拉玛依组'],
// 深度范围
scale: 6000,
scale1: 2603
}
},
mounted() {
this.initChart()
},
beforeDestroy() {
if (this.plot) {
this.plot.dispose()
}
},
methods: {
initChart() {
this.createScene(this.$refs.plot)
},
createScene(canvas) {
// 创建测井组件
const widget = new WellLogWidget({
'header': { 'visible': true },
'footer': { 'visible': false },
'border': { 'visible': true },
'horizontalscrollable': false,
'verticalscrollable': false,
'nodefilter': (node) => node instanceof LogAbstractVisual || node instanceof WellBoreNode
})
.setAxisHeaderType(HeaderType.Simple)
.setHeaderHeight(90)
.setIndexUnit('m');
// 设置深度范围
const startDepth = parseFloat(this.chartForm.startDepth) || 2603;
const endDepth = parseFloat(this.chartForm.endDepth) || 6000;
widget.setDepthLimits(startDepth, endDepth);
// 应用样式
this.applyModernThemeCSS(widget);
// 添加工具提示
widget.connectTool(new TooltipTool(widget));
// 添加坐标轴
widget.addTrack(TrackType.IndexTrack);
// 1. 层位轨道
const layerTrack = widget.addTrack(TrackType.LinearTrack)
.setWidth(100)
.addChild(
new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'left': '0%',
'right': '0%',
'top': '-45px',
'height': '45px'
})
);
// 添加层位数据
if (this.curveData['层位'] && this.curveData['层位'].length > 0) {
layerTrack.addChild(
new Group()
.setLayout(new CssLayout())
.addChild(
new LogMudLogSection({
'fillstyles': (depth, text, i) => {
const layerInfo = this.curveData['层位'].find(
range => depth >= range.startDepth && depth < range.endDepth
);
const color = layerInfo ? this.layerColors[layerInfo.layer] : '#FFFFFF';
return color;
},
'textstyles': {
'color': '#FFFFFF !important',
'font': 'bold 14px Arial',
'alignment': 'center',
'baseline': 'middle',
'angle': 0,
'fillstyle': {
'color': '#FFFFFF !important'
},
'css': {
'writing-mode': 'vertical-rl',
'text-orientation': 'upright',
'white-space': 'nowrap',
'text-shadow': '1px 1px 2px rgba(0,0,0,0.8)',
'color': '#FFFFFF !important'
}
},
'displaytext': (depth, text) => {
const layerInfo = this.curveData['层位'].find(
range => depth >= range.startDepth && depth < range.endDepth
);
if (!layerInfo) return '';
return `<div style="color: white !important; font-weight: bold; font-size: 14px; writing-mode: vertical-rl; text-orientation: upright; text-shadow: 1px 1px 3px black; width: 100%; text-align: center;">${layerInfo.layer}</div>`;
},
'textposition': 'center',
'textoptions': {
'horizontaloffset': 0,
'sectionheight': 20,
'verticaloffset': 0,
'wordwrap': false,
'useHTML': true
}
})
.setDepthsAndValues(
this.curveData['层位'].reduce((acc, layer) => {
acc.push(layer.startDepth);
acc.push(layer.endDepth);
return acc;
}, []),
this.curveData['层位'].reduce((acc, layer) => {
acc.push(layer.layer);
acc.push(layer.layer);
return acc;
}, [])
)
.setEllipsisString('')
)
);
}
// 2. 单轴线压强度轨道
const dzkTrack = widget.addTrack(TrackType.LinearTrack)
.setWidth(100)
.addChild(
new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'left': '0%',
'right': '0%',
'top': '-45px',
'height': '45px'
})
);
// 添加单轴线压强度曲线
const dzkCurve = this.createCurve('单轴线压强度', 'red');
if (dzkCurve !== null) {
dzkTrack.addChild(dzkCurve);
}
// 3. 岩石可钻性级值轨道
const yskzTrack = widget.addTrack(TrackType.LinearTrack)
.setWidth(100)
.addChild(
new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'left': '0%',
'right': '0%',
'top': '-45px',
'height': '45px'
})
);
// 添加岩石可钻性级值曲线
const yskzCurve = this.createCurve('岩石可钻性级值', 'red');
if (yskzCurve !== null) {
yskzTrack.addChild(yskzCurve);
}
// 4. 研磨性系数轨道
const ymzsTrack = widget.addTrack(TrackType.LinearTrack)
.setWidth(100)
.addChild(
new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'left': '0%',
'right': '0%',
'top': '-45px',
'height': '45px'
})
);
// 添加研磨性系数曲线
const ymzsCurve = this.createCurve('研磨性系数', 'red');
if (ymzsCurve !== null) {
ymzsTrack.addChild(ymzsCurve);
}
// 添加层位图例
const legendGroup = new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'position': 'absolute',
'top': '10px',
'right': '10px',
'background': 'rgba(255, 255, 255, 0.9)',
'padding': '10px',
'border': '1px solid #ccc',
'borderRadius': '4px',
'width': '120px'
});
// 添加图例标题
const legendTitle = new Text({
text: '层位图例',
textbaseline: 'top',
textalign: 'left'
})
.setTextStyle({
'color': '#000000',
'font': 'bold 12px Roboto'
})
.setLayoutStyle({
'position': 'absolute',
'left': '5px',
'top': '5px'
});
legendGroup.addChild(legendTitle);
// 添加图例项
this.uniqueLayers.forEach((layer, index) => {
const legendItemGroup = new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'position': 'absolute',
'left': '5px',
'top': `${index * 25 + 30}px`,
'width': '110px',
'height': '20px'
});
// 创建颜色块
const colorBox = new Group()
.setLayout(new CssLayout())
.setLayoutStyle({
'position': 'absolute',
'left': '0px',
'top': '2px',
'width': '15px',
'height': '15px',
'background': this.layerColors[layer],
'border': '1px solid #ccc'
});
// 创建文本标签
const legendText = new Text({
text: layer,
textbaseline: 'top',
textalign: 'left'
})
.setTextStyle({
'color': '#000000',
'font': '10px Roboto'
})
.setLayoutStyle({
'position': 'absolute',
'left': '25px',
'top': '2px'
});
legendItemGroup.addChild(colorBox);
legendItemGroup.addChild(legendText);
legendGroup.addChild(legendItemGroup);
});
widget.addChild(legendGroup);
widget.setLayoutStyle({
'top': 0,
'left': 0,
'bottom': 0,
'width': 500
});
this.plot = new Plot({
'canvasElement': canvas,
'autosize': false,
'root': widget
});
// 适应大小
widget.fitToHeight();
return this.plot;
},
createCurve(curveMnemonic, color) {
try {
const data = this.curveData[curveMnemonic];
if (!data || !Array.isArray(data) || data.length === 0) {
console.warn(`${curveMnemonic} 的数据无效:`, data);
return null;
}
// 提取深度和值
const depths = data.map(item => item.depth);
const values = data.map(item => item.value);
// 创建数据对象
const logData = new LogData(depths, values);
// 计算限制
let limits;
try {
limits = MathUtil.calculateNeatLimits(logData.getMinValue(), logData.getMaxValue(), false, false);
} catch (e) {
console.warn(`计算 ${curveMnemonic} 的限制时出错:`, e);
limits = [0, 1];
}
// 创建曲线
return new LogCurve(logData)
.setName(curveMnemonic)
.setNormalizationLimits(limits)
.setLineStyle({
'color': color,
'width': 2
});
} catch (e) {
console.error(`创建曲线 ${curveMnemonic} 时出错:`, e);
return null;
}
},
applyModernThemeCSS(widget) {
widget.setCss(new CssStyle({
'css': [
'* {',
' textstyle-font : 10px Roboto;',
' textstyle-color : #000;',
'}',
'.geotoolkit.welllog.header.AdaptiveLogCurveVisualHeader {',
' element-tracking-textstyle-font : bold 10px Roboto;',
' element-tracking-textstyle-color : #000;',
'}',
'.geotoolkit.welllog.header.LogTrackHeader {',
' borderfillstyle-style: lineargradient;',
' borderfillstyle-unittype: absoluteCoordinates;',
' borderfillstyle-startpoint-x: 0;',
' borderfillstyle-startpoint-y: 0;',
' borderfillstyle-startcolor: rgba(255, 255, 255, 0);',
' borderfillstyle-endpoint-x: 0;',
' borderfillstyle-endpoint-y: 500;',
' borderfillstyle-endcolor: rgba(255, 255, 255, 0);',
' borderlinestyle: null;',
' isbordervisible: true;',
' borders-left: true;',
' borders-top: true;',
' borders-right: true;',
' borders-bottom: true;',
'}',
'.geotoolkit.welllog.LogTrack {',
' backgroundcolor-style: lineargradient;',
' backgroundcolor-unittype: absoluteCoordinates;',
' backgroundcolor-startpoint-x: 0;',
' backgroundcolor-startpoint-y: 0;',
' backgroundcolor-startcolor: rgba(255, 255, 255, 0);',
' backgroundcolor-endpoint-x: 0;',
' backgroundcolor-endpoint-y: 500;',
' backgroundcolor-endcolor: rgba(255, 255, 255, 0);',
' clipping : true;',
' borderstrategy: top;',
' border-visible : true;',
' border-borderstyle: visible-bounds;',
' border-linestyle-color: #000;',
' border-linestyle-weight: blod;',
' border-linestyle-pixelsnapmode-x: true;',
' border-linestyle-pixelsnapmode-y: true;',
' border-borders-left : true;',
' border-borders-right : true;',
' border-borders-top : true;',
' border-borders-bottom : true;',
'}',
'.geotoolkit.welllog.LogAxis {',
' tickgenerator-major-labelstyle-color: red;',
' tickgenerator-major-labelstyle-font: 10px Roboto;',
' tickgenerator-major-tickstyle-color: #C8C8C8;',
' tickgenerator-major-tickstyle-width: 1;',
' tickgenerator-major-tickstyle-pixelsnapmode-x: true;',
' tickgenerator-major-tickstyle-pixelsnapmode-y: true;',
' tickgenerator-minor-tickstyle-color: #646464;',
' tickgenerator-edge-labelstyle-color: red;',
' tickgenerator-edge-tickstyle-color: #EFFFFF;',
' tickgenerator-edge-labelstyle-font: 10px Roboto;',
'}',
'.geotoolkit.welllog.LogCurve:highlight {',
' linestyle-width: 2;',
' linestyle-shadow-enable: true;',
' linestyle-shadow-blur: 2;',
' linestyle-shadow-offsetx: 0;',
' linestyle-shadow-offsety: 0;',
'}',
'.geotoolkit.welllog.LogTrack:highlight {',
' borderstrategy: top;',
' linestyle-color: grey;',
' linestyle-width: 2;',
' linestyle-shadow-enable: true;',
' linestyle-shadow-blur: 2;',
' linestyle-shadow-offsetx: 0;',
' linestyle-shadow-offsety: 0;',
'}'
].join('')
}))
},
handleRefreshChart() {
console.log('查询图表')
this.initChart()
},
handleCalculate() {
console.log('计算')
// 这里可以实现计算功能
},
handleExportData() {
console.log('下载数据文档')
// 这里可以实现数据导出功能
},
handleNeighborWell() {
console.log('邻井映射')
// 这里可以实现邻井映射功能
}
}
}
</script>
<style lang="scss" scoped>
.formation-curve-chart {
padding: 20px;
.chart-controls {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding: 15px;
background-color: #f5f7fa;
border-radius: 4px;
.control-item {
display: flex;
align-items: center;
label {
margin-right: 10px;
font-weight: bold;
color: #333;
}
}
.action-buttons {
display: flex;
gap: 10px;
}
}
.chart-container {
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 20px;
position: relative;
}
}
div#tooltip-container {
z-index: 100;
margin-left: 5px;
opacity: 1;
text-align: left;
color: rgb(73, 73, 73);
padding-left: 5px;
padding-right: 5px;
background: rgba(255, 255, 204, 0.5);
border-radius: 4px;
border-width: 1px;
border-style: solid;
border-color: grey;
border-image: initial;
width: 150px;
}
</style>
src/views/wellDesign/components/FormationMaintenance copy.vue deleted 100644 → 0
<!-- 地层维护-->
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
label-width="98px">
<!-- <el-form-item label="选择邻井" prop="jh">
<el-input v-model="queryParams.jh" placeholder="请输入井号" clearable @keyup.enter.native="handleQuery" />
</el-form-item> -->
<el-form-item style="margin-top: -10px;">
<!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
</el-form-item>
</el-form>
<el-table border :data="jsbbList" @selection-change="handleSelectionChange"
style="width: 100%; flex: 1;margin-top: -5px" height="100%">
<el-table-column label="井号" align="center" prop="jh" min-width="90" show-overflow-tooltip />
<el-table-column label="地质时代名称" align="center" prop="dzsdmc" min-width="120" show-overflow-tooltip />
<el-table-column label="层位" align="center" prop="cw" min-width="90" show-overflow-tooltip />
<!-- <el-table-column label="设计底界深度" align="center" prop="sjdjsd" min-width="110" show-overflow-tooltip /> -->
<el-table-column label="设计底界深度m" align="center" prop="sjdjsd2" min-width="110" show-overflow-tooltip />
<!-- <el-table-column label="设计厚度" align="center" prop="sjhd" min-width="90" show-overflow-tooltip /> -->
<el-table-column label="设计厚度m" align="center" prop="sjhd2" min-width="90" show-overflow-tooltip />
<el-table-column label="主要岩性描述" align="center" prop="zyyxms" min-width="130" show-overflow-tooltip />
<el-table-column label="地层走向" align="center" prop="dczx" min-width="90" show-overflow-tooltip />
<el-table-column label="地层倾角" align="center" prop="dcqj" min-width="90" show-overflow-tooltip />
<el-table-column label="备注" align="center" prop="bz" min-width="150" show-overflow-tooltip />
<el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit"
@click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" :page-sizes="[20, 50, 100]" />
<!-- 添加或修改地层数据对话框 -->
<el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="井号" prop="jh">
<el-input v-model="form.jh" placeholder="请输入井号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="地质时代名称" prop="dzsdmc">
<el-input v-model="form.dzsdmc" placeholder="请输入地质时代名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="层位" prop="cw">
<el-input v-if="!showCascader" v-model="form.cw" readonly style="width: 100%;">
<template slot="append">
<el-button @click="openCascader">选择</el-button>
</template>
</el-input>
<el-cascader v-if="showCascader" ref="cascader" v-model="cascaderValue" @change="change"
@click="handleCascaderClick" :options="mdcOptions" :props="mdc" placeholder="请选择层位"
style="width: 200px;" popper-class="cascader-popper">
</el-cascader>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设计底界深度" prop="sjdjsd2">
<el-input v-model="form.sjdjsd2" placeholder="请输入实际底界深度"
@input="handleDecimalInput(form.sjdjsd2, 'sjdjsd2')" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="设计厚度" prop="sjhd2">
<el-input v-model="form.sjhd2" placeholder="请输入实际厚度"
@input="handleDecimalInput(form.sjhd2, 'sjhd2')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主要岩性描述" prop="zyyxms">
<el-input v-model="form.zyyxms" placeholder="请输入主要岩性描述" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="地层走向" prop="dczx">
<el-input v-model="form.dczx" placeholder="请输入地层走向" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="地层倾角" prop="dcqj">
<el-input v-model="form.dcqj" placeholder="请输入地层倾角" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="备注" prop="bz">
<el-input v-model="form.bz" placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="param-box">
<el-form ref="form" :model="form" :rules="rules" label-width="60px">
<!-- 横波时差 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">横波时差</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="hbsca1">
<el-input v-model="form.hbsca1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A2" prop="hbsca2">
<el-input v-model="form.hbsca2" placeholder="A2" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A3" prop="hbsca3">
<el-input v-model="form.hbsca3" placeholder="A3" />
</el-form-item>
</el-col>
</el-row>
<!-- 泥质含量 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">泥质含量</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="nzhla1">
<el-input v-model="form.nzhla1" placeholder="A1" />
</el-form-item>
</el-col>
</el-row>
<!-- 地层密度 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">地层密度</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="dcmda1">
<el-input v-model="form.dcmda1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A2" prop="dcmda2">
<el-input v-model="form.dcmda2" placeholder="A2" />
</el-form-item>
</el-col>
</el-row>
<!-- 泊松比 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">泊松比</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="bsba1">
<el-input v-model="form.bsba1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A2" prop="bsba2">
<el-input v-model="form.bsba2" placeholder="A2" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="B2" prop="bsbb2">
<el-input v-model="form.bsbb2" placeholder="B2" />
</el-form-item>
</el-col>
</el-row>
<!-- 弹性模量 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">弹性模量</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="txmla1">
<el-input v-model="form.txmla1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="B1" prop="txmlb1">
<el-input v-model="form.txmlb1" placeholder="B1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="B2" prop="txmlb2">
<el-input v-model="form.txmlb2" placeholder="B2" />
</el-form-item>
</el-col>
</el-row>
<!-- 可钻性极值 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">可钻性极值</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="kzxjza1">
<el-input v-model="form.kzxjza1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A2" prop="kzxjza2">
<el-input v-model="form.kzxjza2" placeholder="A2" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A3" prop="kzxjza3">
<el-input v-model="form.kzxjza3" placeholder="A3" />
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item label="B1" prop="kzxjzb1">
<el-input v-model="form.kzxjzb1" placeholder="B1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B2" prop="kzxjzb2">
<el-input v-model="form.kzxjzb2" placeholder="B2" />
</el-form-item>
</el-col> -->
</el-row>
<!-- 研磨系数 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">研磨系数</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="ymxsa1">
<el-input v-model="form.ymxsa1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A2" prop="ymxsa2">
<el-input v-model="form.ymxsa2" placeholder="A2" />
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item label="A3" prop="ymxsa3">
<el-input v-model="form.ymxsa3" placeholder="A3" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B1" prop="ymxsb1">
<el-input v-model="form.ymxsb1" placeholder="B1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B2" prop="ymxsb2">
<el-input v-model="form.ymxsb2" placeholder="B2" />
</el-form-item>
</el-col> -->
</el-row>
<!-- 粘聚力 -->
<!-- <el-row :gutter="20">
<el-col :span="4">
<el-form-item>
<span
style="line-height: 32px; font-weight: bold; text-align: right; display: block;">粘聚力</span>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A1" prop="njla1">
<el-input v-model="form.njla1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A2" prop="njla2">
<el-input v-model="form.njla2" placeholder="A2" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A3" prop="njla3">
<el-input v-model="form.njla3" placeholder="A3" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B1" prop="njlb1">
<el-input v-model="form.njlb1" placeholder="B1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B2" prop="njlb2">
<el-input v-model="form.njlb2" placeholder="B2" />
</el-form-item>
</el-col>
</el-row> -->
<!-- 岩石抗拉强度 -->
<!-- <el-row :gutter="20">
<el-col :span="4">
<el-form-item>
<span
style="line-height: 32px; font-weight: bold; text-align: right; display: block;">岩石抗拉强度</span>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A1" prop="ysklqda1">
<el-input v-model="form.ysklqda1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A2" prop="ysklqda2">
<el-input v-model="form.ysklqda2" placeholder="A2" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A3" prop="ysklqda3">
<el-input v-model="form.ysklqda3" placeholder="A3" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B1" prop="ysklqdb1">
<el-input v-model="form.ysklqdb1" placeholder="B1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B2" prop="ysklqdb2">
<el-input v-model="form.ysklqdb2" placeholder="B2" />
</el-form-item>
</el-col>
</el-row> -->
<!-- 内摩擦角 -->
<!-- <el-row :gutter="20">
<el-col :span="4">
<el-form-item>
<span
style="line-height: 32px; font-weight: bold; text-align: right; display: block;">内摩擦角</span>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A1" prop="nmcja1">
<el-input v-model="form.nmcja1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A2" prop="nmcja2">
<el-input v-model="form.nmcja2" placeholder="A2" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A3" prop="nmcja3">
<el-input v-model="form.nmcja3" placeholder="A3" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B1" prop="nmcjb1">
<el-input v-model="form.nmcjb1" placeholder="B1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B2" prop="nmcjb2">
<el-input v-model="form.nmcjb2" placeholder="B2" />
</el-form-item>
</el-col>
</el-row> -->
<!-- 均质性系数 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">均质性系数</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="cjzsa1">
<el-input v-model="form.cjzsa1" placeholder="A1" />
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item label="A2" prop="cjzsa2">
<el-input v-model="form.cjzsa2" placeholder="A2" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A3" prop="cjzsa3">
<el-input v-model="form.cjzsa3" placeholder="A3" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B1" prop="cjzsb1">
<el-input v-model="form.cjzsb1" placeholder="B1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B2" prop="cjzsb2">
<el-input v-model="form.cjzsb2" placeholder="B2" />
</el-form-item>
</el-col> -->
</el-row>
<!-- 钻头选型指数 A1、A2 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">钻头选型指数</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="ztxxzsa1">
<el-input v-model="form.ztxxzsa1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A2" prop="ztxxzsa2">
<el-input v-model="form.ztxxzsa2" placeholder="A2" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listSjJsbb, getSjJsbb, delSjJsbb, addSjJsbb, updateSjJsbb } from "@/api/system/sjJsbb";
import { getMdcByQkid } from "@/api/scientificDrill/schemeOptimization";
export default {
name: "FormationMaintenance",
props: {
wellInfo: {
type: Object,
default: () => ({})
}
},
data() {
return {
loading: true,
ids: [],
single: true,
multiple: true,
showSearch: true,
total: 0,
jsbbList: [],
title: "",
open: false,
isAdd: false,
showCascader: false,
mdcOptions: [],
oilOptions: [],
queryParams: {
pageNum: 1,
pageSize: 20,
jh: "",
cw: null,
sjdjsd: null,
sjdjsd2: null,
sjhd: null,
sjhd2: null,
zyyxms: null,
dczx: null,
dcqj: null,
bz: null
},
form: {},
mdc: {
lazy: true,
lazyLoad: this.loadTreeNode,
checkStrictly: true,
multiple: false,
expandTrigger: 'click',
emitPath: true,
maxLevel: 5
},
rules: {
sjdjsd2: [
{ required: true, message: "设计底界深度不能为空", trigger: "blur" }
],
jh: [
{ required: true, message: "井号不能为空", trigger: "blur" }
],
sjhd2: [
{ required: true, message: "设计厚度不能为空", trigger: "blur" }
],
cw: [
{ required: true, message: "层位不能为空", trigger: "blur" }
],
// 横波时差
hbsca1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
hbsca2: [{ required: true, message: "A2不能为空", trigger: "blur" }],
hbsca3: [{ required: true, message: "A3不能为空", trigger: "blur" }],
// 泥质含量
nzhla1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
// 地层密度
dcmda1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
dcmda2: [{ required: true, message: "A2不能为空", trigger: "blur" }],
// 泊松比
bsba1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
bsba2: [{ required: true, message: "A2不能为空", trigger: "blur" }],
bsbb2: [{ required: true, message: "B2不能为空", trigger: "blur" }],
// 弹性模量
txmla1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
txmlb1: [{ required: true, message: "B1不能为空", trigger: "blur" }],
txmlb2: [{ required: true, message: "B2不能为空", trigger: "blur" }],
// 可钻性极值
kzxjza1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
kzxjza2: [{ required: true, message: "A2不能为空", trigger: "blur" }],
kzxjza3: [{ required: true, message: "A3不能为空", trigger: "blur" }],
// 研磨系数
ymxsa1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
ymxsa2: [{ required: true, message: "A2不能为空", trigger: "blur" }],
// 均质性系数
cjzsa1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
// 钻头选型指数
ztxxzsa1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
ztxxzsa2: [{ required: true, message: "A2不能为空", trigger: "blur" }],
},
cascaderValue: []
};
},
created() {
this.initMdcOptions();
},
watch: {
'wellInfo.jh': {
immediate: true,
handler(newJh) {
if (newJh) {
this.queryParams.jh = newJh;
this.getList();
}
}
}
},
methods: {
initMdcOptions() {
const params = { dclevel: 1, pid: null };
getMdcByQkid(params).then(response => {
const options = response.data.map(item => ({
value: item.id,
label: item.mc,
leaf: false,
level: 1
}));
this.mdcOptions = options;
}).catch(() => {
this.mdcOptions = [];
});
},
getList() {
this.loading = true;
listSjJsbb(this.queryParams).then(response => {
this.jsbbList = response.rows;
this.total = response.total;
this.loading = false;
});
},
cancel() {
this.open = false;
this.reset();
},
reset() {
this.form = {
jh: this.queryParams.jh,
dzsdmc: null,
cw: null,
cwid: null,
mdcid: null,
sjdjsd: 1,
sjdjsd2: 1,
sjhd: 1,
sjhd2: 1,
zyyxms: null,
dczx: null,
dcqj: null,
bz: null,
// 横波时差
hbsca1: 1,
hbsca2: 1,
hbsca3: 1,
// 泥质含量
nzhla1: 1,
// 地层密度
dcmda1: 1,
dcmda2: 1,
// 泊松比
bsba1: 1,
bsba2: 1,
bsbb2: 1,
// 弹性模量
txmla1: 1,
txmlb1: 1,
txmlb2: 1,
// 可钻性极值
kzxjza1: 1,
kzxjza2: 1,
kzxjza3: 1,
// 研磨系数
ymxsa1: 1,
ymxsa2: 1,
// 均质性系数
cjzsa1: 1,
// 钻头选型指数
ztxxzsa1: 1,
ztxxzsa2: 1
};
this.resetForm("form");
this.showCascader = false;
this.cascaderValue = [];
},
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
resetQuery() {
this.resetForm("queryForm");
// 保留井号（默认取父页传递的井号）
this.queryParams.jh = this.wellInfo.jh || this.queryParams.jh;
this.handleQuery();
},
handleSelectionChange(selection) {
this.ids = selection.map(item => item.jh)
this.single = selection.length !== 1
this.multiple = !selection.length
},
handleAdd() {
this.reset();
this.open = true;
this.isAdd = true;
this.title = "添加地层数据";
},
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
console.log(row, '22222');
this.isAdd = false;
getSjJsbb(id).then(response => {
this.form = response.data;
if (this.form.mdcid) {
this.cascaderValue = [this.form.mdcid];
}
this.open = true;
this.title = "修改地层数据";
});
},
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (!this.isAdd) {
updateSjJsbb(this.form).then(() => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addSjJsbb(this.form).then(() => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
handleDelete(row) {
const id = row.id || this.ids;
const name = row.jh || id;
this.$modal.confirm('是否确认删除编号为"' + name + '"的数据项？').then(() => {
return delSjJsbb(id);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => { });
},
handleDecimalInput(value, key) {
if (value === '') {
this.form[key] = '';
return;
}
value = value.toString().replace(/[^\d.]/g, '');
const parts = value.split('.');
if (parts.length > 2) {
value = parts[0] + '.' + parts.slice(1).join('');
}
if (parts.length === 2 && parts[1].length > 2) {
value = parts[0] + '.' + parts[1].slice(0, 2);
}
this.form[key] = value;
},
openCascader() {
this.showCascader = true;
this.$nextTick(() => {
if (this.$refs.cascader && this.form.mdcid) {
this.cascaderValue = [this.form.mdcid];
}
});
},
handleCascaderClick() { },
change(val) {
if (val && val.length > 0) {
const selectedValue = val[val.length - 1];
this.form.mdcid = selectedValue;
this.getSelectedLabel(val, selectedValue);
setTimeout(() => {
this.showCascader = false;
this.$forceUpdate();
}, 100);
} else {
this.showCascader = false;
}
},
async getSelectedLabel(path, selectedValue) {
for (let i = path.length - 1; i >= 0; i--) {
const currentValue = path[i];
const level = i + 1;
try {
const params = { dclevel: level, pid: i === 0 ? null : path[i - 1] };
const response = await getMdcByQkid(params);
const nodes = response.data;
const selectedNode = nodes.find(item => item.id === currentValue);
if (selectedNode) {
this.form.cw = selectedNode.mc;
this.form.cwid = selectedNode.id;
this.buildDzsdmc(path, selectedNode);
this.$set(this.form, 'cw', selectedNode.mc);
this.$set(this.form, 'cwid', selectedNode.id);
this.$set(this.form, 'mdcid', selectedValue);
break;
}
} catch (error) { }
}
},
async buildDzsdmc(path, selectedNode) {
if (path.length >= 2) {
try {
const eraPath = [];
for (let i = 1; i < path.length - 1; i++) {
const currentValue = path[i];
const level = i + 1;
const pid = i === 1 ? path[0] : path[i - 1];
const params = { dclevel: level, pid: pid };
const response = await getMdcByQkid(params);
const nodes = response.data;
const currentNode = nodes.find(item => item.id === currentValue);
if (currentNode) {
eraPath.push(currentNode.mc);
}
}
const dzsdmc = eraPath.join('/');
this.form.dzsdmc = dzsdmc;
this.$set(this.form, 'dzsdmc', dzsdmc);
} catch (error) { }
}
},
loadTreeNode(node, resolve) {
if (node.level >= 5) {
resolve([]);
return;
}
const params = { dclevel: node.level + 1, pid: node.value };
getMdcByQkid(params).then(response => {
const oilOptions = response.data;
if (Array.isArray(oilOptions) && oilOptions.length > 0) {
const nodes = oilOptions.map(item => ({
value: item.id,
label: item.mc,
leaf: node.level + 1 >= 5,
level: node.level + 1
}));
resolve(nodes);
} else {
resolve([]);
}
}).catch(() => {
resolve([]);
});
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
height: calc(100vh - 180px);
display: flex;
flex-direction: column;
padding: 5px;
}
::v-deep .el-table__cell>.cell {
font-weight: normal;
}
::v-deep .el-table--medium .el-table__cell {
padding: 3px 0 !important;
}
.pagination-container {
padding: 3px !important;
margin: 0;
}
/* 参量标题列右对齐，与表单label对齐 */
::v-deep .title-col {
/* 抵消 param-box 左内边距，使标题与外层表单右缘对齐 */
margin-left: -13px;
}
/* 仅标题使用与外层一致的标签宽度 */
::v-deep .title-col .el-form-item__label {
width: 110px !important;
padding-right: 12px;
/* 与 Element UI 默认一致 */
white-space: nowrap;
}
::v-deep .title-col .el-form-item__content {
display: flex;
justify-content: flex-end;
text-align: right;
padding-right: 4px;
}
/* 参量区域外框样式 */
.param-box {
border: 1px solid #e4e7ed;
border-radius: 6px;
background: #fafafa;
padding: 12px 16px;
margin-top: 8px;
}
::v-deep .cascader-popper {
z-index: 3000 !important;
}
::v-deep .el-cascader {
width: 100%;
}
::v-deep .el-cascader__dropdown {
z-index: 3000 !important;
}
// 减小表单项之间的间距
::v-deep .el-form-item {
margin-bottom: 10px;
}
// 减小对话框内的行间距
::v-deep .el-dialog__body {
padding: 10px 20px;
}
::v-deep .el-dialog .el-row {
margin-bottom: 5px;
}
</style>
src/views/wellDesign/components/FormationMaintenance 最新.vue deleted 100644 → 0
<!-- 地层维护-->
<!-- 地层维护-->
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
label-width="98px">
<!-- <el-form-item label="选择邻井" prop="jh">
<el-input v-model="queryParams.jh" placeholder="请输入井号" clearable @keyup.enter.native="handleQuery" />
</el-form-item> -->
<el-form-item style="margin-top: -10px;">
<!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
</el-form-item>
</el-form>
<el-table border :data="jsbbList" @selection-change="handleSelectionChange"
style="width: 100%; flex: 1;margin-top: -5px" height="100%">
<el-table-column label="井号" align="center" prop="jh" min-width="90" show-overflow-tooltip />
<el-table-column label="地质时代名称" align="center" prop="dzsdmc" min-width="120" show-overflow-tooltip />
<el-table-column label="层位" align="center" prop="cw" min-width="90" show-overflow-tooltip />
<!-- <el-table-column label="设计底界深度" align="center" prop="sjdjsd" min-width="110" show-overflow-tooltip /> -->
<el-table-column label="设计底界深度m" align="center" prop="sjdjsd2" min-width="110" show-overflow-tooltip />
<!-- <el-table-column label="设计厚度" align="center" prop="sjhd" min-width="90" show-overflow-tooltip /> -->
<el-table-column label="设计厚度m" align="center" prop="sjhd2" min-width="90" show-overflow-tooltip />
<el-table-column label="主要岩性描述" align="center" prop="zyyxms" min-width="130" show-overflow-tooltip />
<el-table-column label="地层走向" align="center" prop="dczx" min-width="90" show-overflow-tooltip />
<el-table-column label="地层倾角" align="center" prop="dcqj" min-width="90" show-overflow-tooltip />
<el-table-column label="备注" align="center" prop="bz" min-width="150" show-overflow-tooltip />
<el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit"
@click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" :page-sizes="[20, 50, 100]" />
<!-- 添加或修改地层数据对话框 -->
<el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
<el-form ref="mainForm" :model="form" :rules="rules" label-width="120px">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="井号" prop="jh">
<el-input v-model="form.jh" placeholder="请输入井号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="地质时代名称" prop="dzsdmc">
<el-input v-model="form.dzsdmc" placeholder="请输入地质时代名称" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="层位" prop="cw">
<el-input v-if="!showCascader" v-model="form.cw" readonly style="width: 100%;">
<template slot="append">
<el-button @click="openCascader">选择</el-button>
</template>
</el-input>
<el-cascader v-if="showCascader" ref="cascader" v-model="cascaderValue" @change="change"
@click="handleCascaderClick" :options="mdcOptions" :props="mdc" placeholder="请选择层位"
style="width: 200px;" popper-class="cascader-popper">
</el-cascader>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设计底界深度m" prop="sjdjsd2">
<el-input v-model="form.sjdjsd2" placeholder="请输入实际底界深度"
@input="handleDecimalInput(form.sjdjsd2, 'sjdjsd2')" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="设计厚度m" prop="sjhd2">
<el-input v-model="form.sjhd2" placeholder="请输入实际厚度"
@input="handleDecimalInput(form.sjhd2, 'sjhd2')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="主要岩性描述" prop="zyyxms">
<el-input v-model="form.zyyxms" placeholder="请输入主要岩性描述" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="地层走向" prop="dczx">
<el-input v-model="form.dczx" placeholder="请输入地层走向" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="地层倾角" prop="dcqj">
<el-input v-model="form.dcqj" placeholder="请输入地层倾角" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="备注" prop="bz">
<el-input v-model="form.bz" placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="param-box">
<el-form ref="paramForm" :model="form" :rules="rules" label-width="60px">
<!-- 横波时差 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">横波时差</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="hbsca1">
<el-input v-model="form.hbsca1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A2" prop="hbsca2">
<el-input v-model="form.hbsca2" placeholder="A2" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A3" prop="hbsca3">
<el-input v-model="form.hbsca3" placeholder="A3" />
</el-form-item>
</el-col>
</el-row>
<!-- 泥质含量 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">泥质含量</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="nzhla1">
<el-input v-model="form.nzhla1" placeholder="A1" />
</el-form-item>
</el-col>
</el-row>
<!-- 地层密度 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">地层密度</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="dcmda1">
<el-input v-model="form.dcmda1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A2" prop="dcmda2">
<el-input v-model="form.dcmda2" placeholder="A2" />
</el-form-item>
</el-col>
</el-row>
<!-- 泊松比 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">泊松比</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="bsba1">
<el-input v-model="form.bsba1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="B1" prop="bsbb1">
<el-input v-model="form.bsbb1" placeholder="B1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="B2" prop="bsbb2">
<el-input v-model="form.bsbb2" placeholder="B2" />
</el-form-item>
</el-col>
</el-row>
<!-- 弹性模量 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">弹性模量</template>
</el-form-item>
</el-col>
<!-- <el-col :span="7">
<el-form-item label="A1" prop="txmla1">
<el-input v-model="form.txmla1" placeholder="A1" />
</el-form-item>
</el-col> -->
<el-col :span="7">
<el-form-item label="B1" prop="txmlb1">
<el-input v-model="form.txmlb1" placeholder="B1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="B2" prop="txmlb2">
<el-input v-model="form.txmlb2" placeholder="B2" />
</el-form-item>
</el-col>
</el-row>
<!-- 可钻性极值 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">可钻性极值</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="kzxjza1">
<el-input v-model="form.kzxjza1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A2" prop="kzxjza2">
<el-input v-model="form.kzxjza2" placeholder="A2" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A3" prop="kzxjza3">
<el-input v-model="form.kzxjza3" placeholder="A3" />
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item label="B1" prop="kzxjzb1">
<el-input v-model="form.kzxjzb1" placeholder="B1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B2" prop="kzxjzb2">
<el-input v-model="form.kzxjzb2" placeholder="B2" />
</el-form-item>
</el-col> -->
</el-row>
<!-- 研磨系数 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">研磨系数</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="ymxsa1">
<el-input v-model="form.ymxsa1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A2" prop="ymxsa2">
<el-input v-model="form.ymxsa2" placeholder="A2" />
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item label="A3" prop="ymxsa3">
<el-input v-model="form.ymxsa3" placeholder="A3" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B1" prop="ymxsb1">
<el-input v-model="form.ymxsb1" placeholder="B1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B2" prop="ymxsb2">
<el-input v-model="form.ymxsb2" placeholder="B2" />
</el-form-item>
</el-col> -->
</el-row>
<!-- 粘聚力 -->
<el-row :gutter="20">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">粘聚力</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="njla1">
<el-input v-model="form.njla1" placeholder="A1" />
</el-form-item>
</el-col>
</el-row>
<!-- 岩石抗拉强度 -->
<!-- <el-row :gutter="20">
<el-col :span="4">
<el-form-item>
<span
style="line-height: 32px; font-weight: bold; text-align: right; display: block;">岩石抗拉强度</span>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A1" prop="ysklqda1">
<el-input v-model="form.ysklqda1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A2" prop="ysklqda2">
<el-input v-model="form.ysklqda2" placeholder="A2" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A3" prop="ysklqda3">
<el-input v-model="form.ysklqda3" placeholder="A3" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B1" prop="ysklqdb1">
<el-input v-model="form.ysklqdb1" placeholder="B1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B2" prop="ysklqdb2">
<el-input v-model="form.ysklqdb2" placeholder="B2" />
</el-form-item>
</el-col>
</el-row> -->
<!-- 内摩擦角 -->
<!-- <el-row :gutter="20">
<el-col :span="4">
<el-form-item>
<span
style="line-height: 32px; font-weight: bold; text-align: right; display: block;">内摩擦角</span>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A1" prop="nmcja1">
<el-input v-model="form.nmcja1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A2" prop="nmcja2">
<el-input v-model="form.nmcja2" placeholder="A2" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A3" prop="nmcja3">
<el-input v-model="form.nmcja3" placeholder="A3" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B1" prop="nmcjb1">
<el-input v-model="form.nmcjb1" placeholder="B1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B2" prop="nmcjb2">
<el-input v-model="form.nmcjb2" placeholder="B2" />
</el-form-item>
</el-col>
</el-row> -->
<!-- 均质性系数 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">均质性系数</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="cjzsa1">
<el-input v-model="form.cjzsa1" placeholder="A1" />
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item label="A2" prop="cjzsa2">
<el-input v-model="form.cjzsa2" placeholder="A2" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="A3" prop="cjzsa3">
<el-input v-model="form.cjzsa3" placeholder="A3" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B1" prop="cjzsb1">
<el-input v-model="form.cjzsb1" placeholder="B1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="B2" prop="cjzsb2">
<el-input v-model="form.cjzsb2" placeholder="B2" />
</el-form-item>
</el-col> -->
</el-row>
<!-- 钻头选型指数 A1、A2 -->
<el-row :gutter="10">
<el-col :span="3" class="title-col">
<el-form-item>
<template slot="label">钻头选型指数</template>
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A1" prop="ztxxzsa1">
<el-input v-model="form.ztxxzsa1" placeholder="A1" />
</el-form-item>
</el-col>
<el-col :span="7">
<el-form-item label="A2" prop="ztxxzsa2">
<el-input v-model="form.ztxxzsa2" placeholder="A2" />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listSjJsbb, getSjJsbb, delSjJsbb, addSjJsbb, updateSjJsbb } from "@/api/system/sjJsbb";
import { getMdcByQkid } from "@/api/scientificDrill/schemeOptimization";
export default {
name: "FormationMaintenance",
props: {
wellInfo: {
type: Object,
default: () => ({})
}
},
data() {
return {
loading: true,
ids: [],
single: true,
multiple: true,
showSearch: true,
total: 0,
jsbbList: [],
title: "",
open: false,
isAdd: false,
showCascader: false,
mdcOptions: [],
oilOptions: [],
queryParams: {
pageNum: 1,
pageSize: 20,
jh: "",
cw: null,
sjdjsd: null,
sjdjsd2: null,
sjhd: null,
sjhd2: null,
zyyxms: null,
dczx: null,
dcqj: null,
bz: null
},
form: {},
mdc: {
lazy: true,
lazyLoad: this.loadTreeNode,
checkStrictly: true,
multiple: false,
expandTrigger: 'click',
emitPath: true,
maxLevel: 5
},
rules: {
sjdjsd2: [
{ required: true, message: "设计底界深度不能为空", trigger: "blur" }
],
jh: [
{ required: true, message: "井号不能为空", trigger: "blur" }
],
sjhd2: [
{ required: true, message: "设计厚度不能为空", trigger: "blur" }
],
cw: [
{ required: true, message: "层位不能为空", trigger: "blur" }
],
// 横波时差
hbsca1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
hbsca2: [{ required: true, message: "A2不能为空", trigger: "blur" }],
hbsca3: [{ required: true, message: "A3不能为空", trigger: "blur" }],
// 泥质含量
nzhla1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
// 地层密度
dcmda1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
dcmda2: [{ required: true, message: "A2不能为空", trigger: "blur" }],
// 泊松比
bsba1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
bsbb1: [{ required: true, message: "B1不能为空", trigger: "blur" }],
bsbb2: [{ required: true, message: "B2不能为空", trigger: "blur" }],
// 弹性模量
txmla1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
txmlb1: [{ required: true, message: "B1不能为空", trigger: "blur" }],
txmlb2: [{ required: true, message: "B2不能为空", trigger: "blur" }],
// 弹性模量
txmla1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
txmlb1: [{ required: true, message: "B1不能为空", trigger: "blur" }],
txmlb2: [{ required: true, message: "B2不能为空", trigger: "blur" }],
// 可钻性极值
kzxjza1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
kzxjza2: [{ required: true, message: "A2不能为空", trigger: "blur" }],
kzxjza3: [{ required: true, message: "A3不能为空", trigger: "blur" }],
// 研磨系数
ymxsa1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
ymxsa2: [{ required: true, message: "A2不能为空", trigger: "blur" }],
// 粘聚力
njla1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
// 均质性系数
cjzsa1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
// 钻头选型指数
ztxxzsa1: [{ required: true, message: "A1不能为空", trigger: "blur" }],
ztxxzsa2: [{ required: true, message: "A2不能为空", trigger: "blur" }],
},
cascaderValue: []
};
},
created() {
this.initMdcOptions();
},
watch: {
'wellInfo.jh': {
immediate: true,
handler(newJh) {
if (newJh) {
this.queryParams.jh = newJh;
this.getList();
}
}
}
},
methods: {
initMdcOptions() {
const params = { dclevel: 1, pid: null };
getMdcByQkid(params).then(response => {
const options = response.data.map(item => ({
value: item.id,
label: item.mc,
leaf: false,
level: 1
}));
this.mdcOptions = options;
}).catch(() => {
this.mdcOptions = [];
});
},
getList() {
this.loading = true;
listSjJsbb(this.queryParams).then(response => {
this.jsbbList = response.rows;
this.total = response.total;
this.loading = false;
});
},
cancel() {
this.open = false;
this.reset();
},
reset() {
this.form = {
jh: this.queryParams.jh,
dzsdmc: null,
cw: null,
cwid: null,
mdcid: null,
sjdjsd: 1,
sjdjsd2: 1,
sjhd: 1,
sjhd2: 1,
zyyxms: null,
dczx: null,
dcqj: null,
bz: null,
// 横波时差
hbsca1: 0.6,
hbsca2: -0.0014,
hbsca3: 0.25,
// 泥质含量
nzhla1: 2,
// 地层密度
dcmda1: 0.32,
dcmda2: 0.25,
// 泊松比
bsba1: 2,
bsbb1: 0.9,
bsbb2: 0.035,
// 弹性模量
// txmla1: 1,
txmlb1: 0.9,
txmlb2: 0.035,
// 可钻性极值
kzxjza1: 1.1908,
kzxjza2: 0.0003,
kzxjza3: -0.1427,
// 研磨系数
ymxsa1: 0.75,
ymxsa2: 1.15,
// 粘聚力
njla1: 0.000003326,
// 均质性系数
cjzsa1: 0.75,
// 钻头选型指数
ztxxzsa1: 1,
ztxxzsa2: 1.25
};
// 重置两块表单的校验状态
this.resetForm && this.resetForm("mainForm");
this.resetForm && this.resetForm("paramForm");
this.showCascader = false;
this.cascaderValue = [];
},
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
resetQuery() {
this.resetForm("queryForm");
// 保留井号（默认取父页传递的井号）
this.queryParams.jh = this.wellInfo.jh || this.queryParams.jh;
this.handleQuery();
},
handleSelectionChange(selection) {
this.ids = selection.map(item => item.jh)
this.single = selection.length !== 1
this.multiple = !selection.length
},
handleAdd() {
this.reset();
this.open = true;
this.isAdd = true;
this.title = "添加地层数据";
},
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
console.log(row, '22222');
this.isAdd = false;
getSjJsbb(id).then(response => {
this.form = response.data;
if (this.form.mdcid) {
this.cascaderValue = [this.form.mdcid];
}
this.open = true;
this.title = "修改地层数据";
});
},
submitForm() {
const validateMain = () => new Promise(resolve => {
if (this.$refs.mainForm) {
this.$refs.mainForm.validate(valid => resolve(valid));
} else {
resolve(true);
}
});
const validateParam = () => new Promise(resolve => {
if (this.$refs.paramForm) {
this.$refs.paramForm.validate(valid => resolve(valid));
} else {
resolve(true);
}
});
Promise.all([validateMain(), validateParam()]).then(([mainOk, paramOk]) => {
if (mainOk && paramOk) {
if (!this.isAdd) {
updateSjJsbb(this.form).then(() => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addSjJsbb(this.form).then(() => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
handleDelete(row) {
const id = row.id || this.ids;
const name = row.jh || id;
this.$modal.confirm('是否确认删除编号为"' + name + '"的数据项？').then(() => {
return delSjJsbb(id);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => { });
},
handleDecimalInput(value, key) {
if (value === '') {
this.form[key] = '';
return;
}
value = value.toString().replace(/[^\d.]/g, '');
const parts = value.split('.');
if (parts.length > 2) {
value = parts[0] + '.' + parts.slice(1).join('');
}
if (parts.length === 2 && parts[1].length > 2) {
value = parts[0] + '.' + parts[1].slice(0, 2);
}
this.form[key] = value;
},
openCascader() {
this.showCascader = true;
this.$nextTick(() => {
if (this.$refs.cascader && this.form.mdcid) {
this.cascaderValue = [this.form.mdcid];
}
});
},
handleCascaderClick() { },
change(val) {
if (val && val.length > 0) {
const selectedValue = val[val.length - 1];
this.form.mdcid = selectedValue;
this.getSelectedLabel(val, selectedValue);
setTimeout(() => {
this.showCascader = false;
this.$forceUpdate();
}, 100);
} else {
this.showCascader = false;
}
},
async getSelectedLabel(path, selectedValue) {
for (let i = path.length - 1; i >= 0; i--) {
const currentValue = path[i];
const level = i + 1;
try {
const params = { dclevel: level, pid: i === 0 ? null : path[i - 1] };
const response = await getMdcByQkid(params);
const nodes = response.data;
const selectedNode = nodes.find(item => item.id === currentValue);
if (selectedNode) {
this.form.cw = selectedNode.mc;
this.form.cwid = selectedNode.id;
this.buildDzsdmc(path, selectedNode);
this.$set(this.form, 'cw', selectedNode.mc);
this.$set(this.form, 'cwid', selectedNode.id);
this.$set(this.form, 'mdcid', selectedValue);
break;
}
} catch (error) { }
}
},
async buildDzsdmc(path, selectedNode) {
if (path.length >= 2) {
try {
const eraPath = [];
for (let i = 1; i < path.length - 1; i++) {
const currentValue = path[i];
const level = i + 1;
const pid = i === 1 ? path[0] : path[i - 1];
const params = { dclevel: level, pid: pid };
const response = await getMdcByQkid(params);
const nodes = response.data;
const currentNode = nodes.find(item => item.id === currentValue);
if (currentNode) {
eraPath.push(currentNode.mc);
}
}
const dzsdmc = eraPath.join('/');
this.form.dzsdmc = dzsdmc;
this.$set(this.form, 'dzsdmc', dzsdmc);
} catch (error) { }
}
},
loadTreeNode(node, resolve) {
if (node.level >= 5) {
resolve([]);
return;
}
const params = { dclevel: node.level + 1, pid: node.value };
getMdcByQkid(params).then(response => {
const oilOptions = response.data;
if (Array.isArray(oilOptions) && oilOptions.length > 0) {
const nodes = oilOptions.map(item => ({
value: item.id,
label: item.mc,
leaf: node.level + 1 >= 5,
level: node.level + 1
}));
resolve(nodes);
} else {
resolve([]);
}
}).catch(() => {
resolve([]);
});
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
height: calc(100vh - 180px);
display: flex;
flex-direction: column;
padding: 5px;
}
::v-deep .el-table__cell>.cell {
font-weight: normal;
}
::v-deep .el-table--medium .el-table__cell {
padding: 3px 0 !important;
}
.pagination-container {
padding: 3px !important;
margin: 0;
}
/* 参量标题列右对齐，与表单label对齐 */
::v-deep .title-col {
/* 抵消 param-box 左内边距，使标题与外层表单右缘对齐 */
margin-left: -13px;
}
/* 仅标题使用与外层一致的标签宽度 */
::v-deep .title-col .el-form-item__label {
width: 110px !important;
padding-right: 12px;
/* 与 Element UI 默认一致 */
white-space: nowrap;
}
::v-deep .title-col .el-form-item__content {
display: flex;
justify-content: flex-end;
text-align: right;
padding-right: 4px;
}
/* 参量区域外框样式 */
.param-box {
border: 1px solid #e4e7ed;
border-radius: 6px;
background: #fafafa;
padding: 12px 16px;
margin-top: 8px;
}
::v-deep .cascader-popper {
z-index: 3000 !important;
}
::v-deep .el-cascader {
width: 100%;
}
::v-deep .el-cascader__dropdown {
z-index: 3000 !important;
}
// 减小表单项之间的间距
::v-deep .el-form-item {
margin-bottom: 10px;
}
// 减小对话框内的行间距
::v-deep .el-dialog__body {
padding: 10px 20px;
}
::v-deep .el-dialog .el-row {
margin-bottom: 5px;
}
</style>
src/views/wellDesign/components/FormationMaintenance.vue
......@@ -44,7 +44,7 @@
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="井号" prop="jh">
<el-input v-model="form.jh" placeholder="请输入井号" />
<el-input v-model="form.jh" disabled placeholder="请输入井号" />
</el-form-item>
</el-col>
<el-col :span="12">
......
src/views/wellDesign/components/WellStructure copy.vue deleted 100644 → 0
<template>
<div class="app-containerjsjg">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['system:sjJsdb:add']">新增</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-row :gutter="10" class="content-row">
<!-- 左侧表格 -->
<el-col :span="15">
<el-table border v-loading="loading" :data="sjJsdbList" @selection-change="handleSelectionChange"
height="calc(100vh - 260px)">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="井号" align="center" prop="jh" min-width="95" show-overflow-tooltip />
<el-table-column label="套管层次" align="center" prop="tgcc" min-width="95" show-overflow-tooltip />
<el-table-column label="钻头直径mm" align="center" prop="ztzj" min-width="100" show-overflow-tooltip />
<el-table-column label="井深" align="center" prop="js" min-width="70" show-overflow-tooltip />
<el-table-column label="套管外径" align="center" prop="tgwj" min-width="80" show-overflow-tooltip />
<el-table-column label="套管顶部深度" align="center" prop="tgdbsd" min-width="100" show-overflow-tooltip />
<el-table-column label="套管鞋深度" align="center" prop="tgxsd" min-width="90" show-overflow-tooltip />
<el-table-column label="人工井底深度" align="center" prop="rgjdsd" min-width="100" show-overflow-tooltip />
<el-table-column label="阻流环深度1" align="center" prop="zlhsd" min-width="100" show-overflow-tooltip />
<el-table-column label="水泥外返深度" align="center" prop="snwfsd" min-width="100" show-overflow-tooltip />
<el-table-column label="扶正器" align="center" prop="tgfzq" min-width="80" show-overflow-tooltip />
<el-table-column label="套管附件1" align="center" prop="tgfj1" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件2" align="center" prop="tgfj2" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件3" align="center" prop="tgfj3" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件4" align="center" prop="tgfj4" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件深度1" align="center" prop="tgfj1sd" min-width="110" show-overflow-tooltip />
<el-table-column label="套管附件深度2" align="center" prop="tgfj2sd" min-width="110" show-overflow-tooltip />
<el-table-column label="套管附件深度3" align="center" prop="tgfj3sd" min-width="110" show-overflow-tooltip />
<el-table-column label="套管附件深度4" align="center" prop="tgfj4sd" min-width="110" show-overflow-tooltip />
<el-table-column label="套补距" align="center" prop="tbj" min-width="80" show-overflow-tooltip />
<el-table-column label="阻流环深度2" align="center" prop="zlhsd1" min-width="100" show-overflow-tooltip />
<el-table-column label="阻流环深度3" align="center" prop="zlhsd2" min-width="100" show-overflow-tooltip />
<el-table-column label="套管附件5" align="center" prop="tgfj5" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件6" align="center" prop="tgfj6" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件7" align="center" prop="tgfj7" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件8" align="center" prop="tgfj8" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件深度5" align="center" prop="tgfj5sd" min-width="110" show-overflow-tooltip />
<el-table-column label="套管附件深度6" align="center" prop="tgfj6sd" min-width="110" show-overflow-tooltip />
<el-table-column label="套管附件深度7" align="center" prop="tgfj7sd" min-width="110" show-overflow-tooltip />
<el-table-column label="套管附件深度8" align="center" prop="tgfj8sd" min-width="110" show-overflow-tooltip />
<el-table-column label="操作" align="center" min-width="120" fixed="right"
class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
v-hasPermi="['system:sjJsdb:edit']">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
v-hasPermi="['system:sjJsdb:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" :page-sizes="[20, 40, 60, 80, 100]" @pagination="getList"
style="padding: 10px 0;" />
</el-col>
<!-- 右侧井身结构图 -->
<el-col :span="9">
<div class="jsjgt-wrapper">
<div class="jsjgt-title">井身结构图</div>
<div class="jsjgt-body">
<svg class="svg2"></svg>
<div v-if="!currentJh" class="jsjgt-empty">请先选择井号</div>
</div>
</div>
</el-col>
</el-row>
<!-- 添加或修改设计-井身结构数据对话框 -->
<el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="110px">
<el-row>
<el-col :span="12">
<el-form-item label="井号" prop="jh">
<el-input v-model="form.jh" placeholder="请输入井号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="套管层次" prop="tgcc">
<el-input v-model="form.tgcc" placeholder="请输入套管层次" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="钻头直径mm" prop="ztzj">
<el-input v-model="form.ztzj" placeholder="请输入钻头直径" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="井深" prop="js">
<el-input v-model="form.js" placeholder="请输入井深" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="套管外径" prop="tgwj">
<el-input v-model="form.tgwj" placeholder="请输入套管外径" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="套管顶部深度" prop="tgdbsd">
<el-input v-model="form.tgdbsd" placeholder="请输入套管顶部深度" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="套管鞋深度" prop="tgxsd">
<el-input v-model="form.tgxsd" placeholder="请输入套管鞋深度" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="人工井底深度" prop="rgjdsd">
<el-input v-model="form.rgjdsd" placeholder="请输入人工井底深度" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="阻流环深度1" prop="zlhsd">
<el-input v-model="form.zlhsd" placeholder="请输入阻流环深度1" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="水泥外返深度" prop="snwfsd">
<el-input v-model="form.snwfsd" placeholder="请输入水泥外返深度" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="扶正器" prop="tgfzq">
<el-input v-model="form.tgfzq" placeholder="请输入扶正器" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="套管附件1" prop="tgfj1">
<el-input v-model="form.tgfj1" placeholder="请输入套管附件1" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="套管附件2" prop="tgfj2">
<el-input v-model="form.tgfj2" placeholder="请输入套管附件2" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="套管附件3" prop="tgfj3">
<el-input v-model="form.tgfj3" placeholder="请输入套管附件3" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="套管附件4" prop="tgfj4">
<el-input v-model="form.tgfj4" placeholder="请输入套管附件4" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="套管附件深度1" prop="tgfj1sd">
<el-input v-model="form.tgfj1sd" placeholder="请输入套管附件深度1" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="套管附件深度2" prop="tgfj2sd">
<el-input v-model="form.tgfj2sd" placeholder="请输入套管附件深度2" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="套管附件深度3" prop="tgfj3sd">
<el-input v-model="form.tgfj3sd" placeholder="请输入套管附件深度3" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="套管附件深度4" prop="tgfj4sd">
<el-input v-model="form.tgfj4sd" placeholder="请输入套管附件深度4" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="套补距" prop="tbj">
<el-input v-model="form.tbj" placeholder="请输入套补距" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="阻流环深度2" prop="zlhsd1">
<el-input v-model="form.zlhsd1" placeholder="请输入阻流环深度2" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="阻流环深度3" prop="zlhsd2">
<el-input v-model="form.zlhsd2" placeholder="请输入阻流环深度3" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="套管附件5" prop="tgfj5">
<el-input v-model="form.tgfj5" placeholder="请输入套管附件5" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="套管附件6" prop="tgfj6">
<el-input v-model="form.tgfj6" placeholder="请输入套管附件6" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="套管附件7" prop="tgfj7">
<el-input v-model="form.tgfj7" placeholder="请输入套管附件7" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="套管附件8" prop="tgfj8">
<el-input v-model="form.tgfj8" placeholder="请输入套管附件8" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="套管附件深度5" prop="tgfj5sd">
<el-input v-model="form.tgfj5sd" placeholder="请输入套管附件深度5" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="套管附件深度6" prop="tgfj6sd">
<el-input v-model="form.tgfj6sd" placeholder="请输入套管附件深度6" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="套管附件深度7" prop="tgfj7sd">
<el-input v-model="form.tgfj7sd" placeholder="请输入套管附件深度7" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="套管附件深度8" prop="tgfj8sd">
<el-input v-model="form.tgfj8sd" placeholder="请输入套管附件深度8" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import * as d3 from "d3";
import { listSjJsdb, getSjJsdb, delSjJsdb, addSjJsdb, updateSjJsdb, getSjJsjgt } from "@/api/system/sjJsdb";
export default {
name: "SjJsdb",
props: {
wellInfo: {
type: Object,
default: () => ({})
}
},
data() {
return {
// 井身结构图相关参数
width: 600,
height: 800,
marginTop: 20,
marginRight: 30,
marginBottom: 30,
marginLeft: 40,
maxX: 0,
maxY: 0,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 设计-井身结构数据表格数据
sjJsdbList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
jh: null,
tgcc: null,
ztzj: null,
js: null,
tgwj: null,
tgdbsd: null,
tgxsd: null,
rgjdsd: null,
zlhsd: null,
snwfsd: null,
tgfzq: null,
tgfj1: null,
tgfj2: null,
tgfj3: null,
tgfj4: null,
tgfj1sd: null,
tgfj2sd: null,
tgfj3sd: null,
tgfj4sd: null,
tbj: null,
zlhsd1: null,
zlhsd2: null,
tgfj5: null,
tgfj6: null,
tgfj7: null,
tgfj8: null,
tgfj5sd: null,
tgfj6sd: null,
tgfj7sd: null,
tgfj8sd: null
},
// 表单参数
form: {},
// 表单校验
rules: {
jh: [
{ required: true, message: "井号不能为空", trigger: "blur" }
],
tgcc: [
{ required: true, message: "套管层次不能为空", trigger: "blur" }
],
ztzj: [
{ required: true, message: "钻头直径不能为空", trigger: "blur" }
],
js: [
{ required: true, message: "井深不能为空", trigger: "blur" }
],
tgwj: [
{ required: true, message: "套管外径不能为空", trigger: "blur" }
],
tgdbsd: [
{ required: true, message: "套管底壁深度不能为空", trigger: "blur" }
],
},
currentJh: null,
};
},
created() {
this.queryParams.jh = this.wellInfo && this.wellInfo.jh ? this.wellInfo.jh : null;
this.currentJh = this.queryParams.jh;
this.getList();
if (this.currentJh) {
this.getJsjgSvg();
}
},
watch: {
'wellInfo.jh'(newJh) {
const normalizedJh = newJh || null;
if (normalizedJh !== this.queryParams.jh) {
this.queryParams.jh = normalizedJh;
this.currentJh = normalizedJh;
this.queryParams.pageNum = 1;
this.getList();
if (this.currentJh) {
this.getJsjgSvg();
} else {
this.clearSvg();
}
}
}
},
methods: {
/** 查询设计-井身结构数据列表 */
getList() {
this.loading = true;
listSjJsdb(this.queryParams).then(response => {
this.sjJsdbList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// =================== 井身结构图 ===================
clearSvg() {
d3.select(".svg2").selectAll("*").remove();
},
// 获取井身结构图数据（设计模块）
getJsjgSvg() {
if (!this.currentJh) {
this.clearSvg();
return;
}
getSjJsjgt({ jh: this.currentJh }).then(res => {
if (res && res.code === 200 && res.jsJgmap) {
this.maxX = Number(res.jsJgmap.maxX);
this.maxY = Number(res.jsJgmap.maxY);
this.getScalesSvg2(res.jsJgmap);
} else {
this.clearSvg();
}
}).catch(() => {
this.clearSvg();
});
},
getScalesSvg2(res) {
this.clearSvg();
const x = d3.scaleLinear([0, Number(res.maxX)], [0, this.width]);
const y = d3.scaleLinear([Number(res.maxY), 0], [this.height - this.marginBottom, this.marginTop]);
const line = d3.line()
.x(d => x(d.value))
.y(d => y(d.depth));
const svg2 = d3.select(".svg2")
.attr("viewBox", [0, 0, this.width, this.height])
.attr("width", this.width)
.attr("height", this.height)
.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif; padding:20px")
.style("-webkit-tap-highlight-color", "transparent")
.style("overflow", "visible");
svg2.append("rect")
.attr("width", this.width)
.attr("height", this.height)
.style("fill", "rgb(38,42,50)");
svg2.append("g")
.attr("transform", `translate(0,${this.marginTop})`)
.call(d3.axisTop(x).ticks(this.width / 100).tickSizeOuter(0));
const tickCount = 50;
const tickInterval = Math.max(1, Math.floor(Number(res.maxY) / tickCount));
const tickValues = d3.range(0, Number(res.maxY) + 1, tickInterval);
const tickFormat = (value) => {
return value % 5 === 0 ? value : "";
};
const yAxis = d3.axisRight(y)
.tickValues(tickValues)
.tickFormat(tickFormat);
svg2.append("g")
.attr("transform", "translate(10,0)")
.call(yAxis);
svg2.selectAll(".tick text").style("fill", "#fff");
svg2.selectAll(".tick line").style("stroke", "#fff");
svg2.selectAll(".domain").style("stroke", "#fff");
const gradient = svg2.append("defs")
.append("linearGradient")
.attr("id", "gray-to-white-to-gray")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%");
gradient.append("stop")
.attr("offset", "0%")
.attr("stop-color", "gray")
.attr("stop-opacity", 1);
gradient.append("stop")
.attr("offset", "50%")
.attr("stop-color", "white")
.attr("stop-opacity", 1);
gradient.append("stop")
.attr("offset", "100%")
.attr("stop-color", "gray")
.attr("stop-opacity", 1);
const area = d3.area()
.x0(d => x(d.value1))
.x1(d => x(d.value2))
.y0(d => y(d.depth1))
.y1(d => y(d.depth2));
if (Array.isArray(res.svg2ConstructFillGrey)) {
for (let k = 0; k < res.svg2ConstructFillGrey.length; k++) {
const item = res.svg2ConstructFillGrey[k];
if (!item || !item.fill) continue;
const path = svg2.append("path")
.attr("transform", `translate(0,0)`)
.datum(item.fill)
.attr("class", "area")
.attr("d", area);
if (item.gradient === true) {
path.style("fill", "url(#gray-to-white-to-gray)");
} else {
path.attr("fill", "silver");
}
}
}
const triangleLeft = { x1: 0, y1: 0, x2: -10, y2: 0, x3: 0, y3: -10 };
const triangleRight = { x1: 0, y1: 0, x2: 0, y2: -10, x3: 10, y3: 0 };
if (Array.isArray(res.svg2ConstructLeft)) {
for (let j = 0; j < res.svg2ConstructLeft.length; j++) {
const seg = res.svg2ConstructLeft[j];
if (!seg || !seg.leftLine) continue;
svg2.append("path")
.attr("transform", `translate(0,0)`)
.attr("fill", "none")
.attr("stroke", "#fff")
.attr("stroke-width", 2)
.attr("d", line(seg.leftLine));
if (seg.leftLine[1]) {
svg2.append("path")
.datum(seg.leftLine[1])
.attr("class", "triangle-point")
.attr("fill", "rgb(255,255,255)")
.attr("d", this.drawTriangle(triangleLeft))
.attr("transform", d => `translate(${x(d.value)},${y(d.depth)})`);
}
}
}
if (Array.isArray(res.svg2ConstructRight)) {
for (let j = 0; j < res.svg2ConstructRight.length; j++) {
const seg = res.svg2ConstructRight[j];
if (!seg || !seg.rightLine) continue;
svg2.append("path")
.attr("transform", `translate(0,0)`)
.attr("fill", "none")
.attr("stroke", "#fff")
.attr("stroke-width", 2)
.attr("d", line(seg.rightLine));
if (seg.rightLine[1]) {
svg2.append("path")
.datum(seg.rightLine[1])
.attr("class", "triangle-point")
.attr("fill", "rgb(255,255,255)")
.attr("d", this.drawTriangle(triangleRight))
.attr("transform", d => `translate(${x(d.value)},${y(d.depth)})`);
}
}
}
},
drawTriangle(triangle) {
return "M" + triangle.x1 + "," + triangle.y1 +
"L" + triangle.x2 + "," + triangle.y2 +
"L" + triangle.x3 + "," + triangle.y3 + "Z";
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
jh: null,
tgcc: null,
ztzj: null,
js: null,
tgwj: null,
tgdbsd: null,
tgxsd: null,
rgjdsd: null,
zlhsd: null,
snwfsd: null,
tgfzq: null,
tgfj1: null,
tgfj2: null,
tgfj3: null,
tgfj4: null,
tgfj1sd: null,
tgfj2sd: null,
tgfj3sd: null,
tgfj4sd: null,
tbj: null,
zlhsd1: null,
zlhsd2: null,
tgfj5: null,
tgfj6: null,
tgfj7: null,
tgfj8: null,
tgfj5sd: null,
tgfj6sd: null,
tgfj7sd: null,
tgfj8sd: null
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.form.jh = this.wellInfo && this.wellInfo.jh ? this.wellInfo.jh : null;
this.open = true;
this.title = "添加设计-井身结构数据";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getSjJsdb(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改设计-井身结构数据";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateSjJsdb(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addSjJsdb(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除设计-井身结构数据编号为"' + ids + '"的数据项？').then(function () {
return delSjJsdb(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => { });
},
/** 导出按钮操作 */
handleExport() {
this.download('system/sjJsdb/export', {
...this.queryParams
}, `sjJsdb_${new Date().getTime()}.xlsx`)
}
}
};
</script>
<style scoped lang="scss">
.app-containerjsjg {
height: calc(100vh - 180px);
margin: 5px;
}
::v-deep .el-table__cell>.cell {
font-weight: normal;
}
::v-deep .el-table--medium .el-table__cell {
padding: 0px 0 !important;
}
::v-deep.pagination-container {
padding: 5px !important;
margin: 0;
}
</style>
src/views/wellDesign/components/WellStructure.vue
......@@ -13,37 +13,31 @@
<el-col :span="15">
<el-table border v-loading="loading" :data="sjJsdbList" @selection-change="handleSelectionChange"
height="calc(100vh - 260px)">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="井号" align="center" prop="jh" min-width="95" show-overflow-tooltip />
<el-table-column label="套管层次" align="center" prop="tgcc" min-width="95" show-overflow-tooltip />
<el-table-column label="钻头直径mm" align="center" prop="ztzj" min-width="100" show-overflow-tooltip />
<el-table-column label="井深" align="center" prop="js" min-width="70" show-overflow-tooltip />
<el-table-column label="套管外径" align="center" prop="tgwj" min-width="80" show-overflow-tooltip />
<el-table-column label="套管顶部深度" align="center" prop="tgdbsd" min-width="100" show-overflow-tooltip />
<el-table-column label="套管鞋深度" align="center" prop="tgxsd" min-width="90" show-overflow-tooltip />
<el-table-column label="人工井底深度" align="center" prop="rgjdsd" min-width="100" show-overflow-tooltip />
<el-table-column label="阻流环深度1" align="center" prop="zlhsd" min-width="100" show-overflow-tooltip />
<el-table-column label="水泥外返深度" align="center" prop="snwfsd" min-width="100" show-overflow-tooltip />
<el-table-column label="扶正器" align="center" prop="tgfzq" min-width="80" show-overflow-tooltip />
<el-table-column label="套管附件1" align="center" prop="tgfj1" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件2" align="center" prop="tgfj2" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件3" align="center" prop="tgfj3" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件4" align="center" prop="tgfj4" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件深度1" align="center" prop="tgfj1sd" min-width="110" show-overflow-tooltip />
<el-table-column label="套管附件深度2" align="center" prop="tgfj2sd" min-width="110" show-overflow-tooltip />
<el-table-column label="套管附件深度3" align="center" prop="tgfj3sd" min-width="110" show-overflow-tooltip />
<el-table-column label="套管附件深度4" align="center" prop="tgfj4sd" min-width="110" show-overflow-tooltip />
<el-table-column label="套补距" align="center" prop="tbj" min-width="80" show-overflow-tooltip />
<el-table-column label="阻流环深度2" align="center" prop="zlhsd1" min-width="100" show-overflow-tooltip />
<el-table-column label="阻流环深度3" align="center" prop="zlhsd2" min-width="100" show-overflow-tooltip />
<el-table-column label="套管附件5" align="center" prop="tgfj5" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件6" align="center" prop="tgfj6" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件7" align="center" prop="tgfj7" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件8" align="center" prop="tgfj8" min-width="90" show-overflow-tooltip />
<el-table-column label="套管附件深度5" align="center" prop="tgfj5sd" min-width="110" show-overflow-tooltip />
<el-table-column label="套管附件深度6" align="center" prop="tgfj6sd" min-width="110" show-overflow-tooltip />
<el-table-column label="套管附件深度7" align="center" prop="tgfj7sd" min-width="110" show-overflow-tooltip />
<el-table-column label="套管附件深度8" align="center" prop="tgfj8sd" min-width="110" show-overflow-tooltip />
<!-- 基础信息列 -->
<el-table-column label="井号" align="center" prop="jh" min-width="95" />
<el-table-column label="层次项目" align="center" prop="tgcc" min-width="95" />
<el-table-column label="钻头直径(mm)" align="center" prop="ztzj" min-width="100" />
<el-table-column label="井深(m)" align="center" prop="js" min-width="70" />
<el-table-column label="套管外径(mm)" align="center" prop="tgwj" min-width="80" />
<el-table-column label="套管顶部深度(m)" align="center" prop="tgdbsd" min-width="100" />
<el-table-column label="套管鞋深度(m)" align="center" prop="tgxsd" min-width="90" />
<el-table-column label="人工井底深度(m)" align="center" prop="rgjdsd" min-width="100" />
<el-table-column label="阻流环深度(m)" align="center" prop="zlhsd" min-width="100" />
<el-table-column label="水泥外返深度(m)" align="center" prop="snwfsd" min-width="100" />
<el-table-column label="套管扶正器深度(m)" align="center" prop="tgfzq" min-width="80" />
<!-- 多级表头：套管附件深度(m) -->
<el-table-column label="套管附件深度(m)" align="center" min-width="90">
<!-- <el-table-column label="磁位" align="center" prop="cw" min-width="90" />-->
<!-- 图片中磁位右侧还有7个空列，用prop占位（可根据实际字段调整） -->
<el-table-column label="套管附件深度1" align="center" prop="tgfj1sd" min-width="90" />
<el-table-column label="套管附件深度2" align="center" prop="tgfj2sd" min-width="90" />
<el-table-column label="套管附件深度3" align="center" prop="tgfj3sd" min-width="90" />
<el-table-column label="套管附件深度4" align="center" prop="tgfj4sd" min-width="90" />
<el-table-column label="套管附件深度5" align="center" prop="tgfj5sd" min-width="90" />
<el-table-column label="套管附件深度6" align="center" prop="tgfj6sd" min-width="90" />
<el-table-column label="套管附件深度7" align="center" prop="tgfj7sd" min-width="90" />
<el-table-column label="套管附件深度8" align="center" prop="tgfj8sd" min-width="90" />
</el-table-column>
<el-table-column label="操作" align="center" min-width="120" fixed="right"
class-name="small-padding fixed-width">
<template slot-scope="scope">
......@@ -78,7 +72,7 @@
<el-row>
<el-col :span="12">
<el-form-item label="井号" prop="jh">
<el-input v-model="form.jh" placeholder="请输入井号" />
<el-input v-model="form.jh" disabled placeholder="请输入井号" />
</el-form-item>
</el-col>
<el-col :span="12">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment