Skip to content

P
pdczt_qd
Commit a930ca57 by zhaopanyu
Options

zpy

parent c5c4155e
Showing with 3013 additions and 207 deletions
src/api/system/cjsjLas.js
......@@ -102,7 +102,12 @@ export function ppZtxx(query) {
params: query,
});
}
export function ppZtxxx(query) {
return request({
url: "/system/ztxxJcxx/tjxq",
params: query,
});
}
// 查询
export function getZtxxck(id) {
return request({
......
src/api/system/sjJsdb copy.js 0 → 100644
import request from "@/utils/request";
// 查询设计-井身结构数据列表
export function listSjJsdb(query) {
return request({
url: "/system/sjJsdb/list",
method: "get",
params: query,
});
}
// 查询设计-井身结构数据详细
export function getSjJsdb(id) {
return request({
url: "/system/sjJsdb/" + id,
method: "get",
});
}
// 新增设计-井身结构数据
export function addSjJsdb(data) {
return request({
url: "/system/sjJsdb",
method: "post",
data: data,
});
}
// 修改设计-井身结构数据
export function updateSjJsdb(data) {
return request({
url: "/system/sjJsdb",
method: "put",
data: data,
});
}
// 删除设计-井身结构数据
export function delSjJsdb(id) {
return request({
url: "/system/sjJsdb/" + id,
method: "delete",
});
}
// 井身结构图（设计模块）
export function getSjJsjgt(params) {
return request({
url: "/system/sjJsdb/jsjgt",
method: "get",
params,
});
}
src/api/system/sjJsdb.js
import request from '@/utils/request'
import request from "@/utils/request";
// 查询设计-井身结构数据列表
export function listSjJsdb(query) {
return request({
url: '/system/sjJsdb/list',
method: 'get',
params: query
})
url: "/system/sjJsdb/list",
method: "get",
params: query,
});
}
// 查询设计-井身结构数据详细
export function getSjJsdb(id) {
return request({
url: '/system/sjJsdb/' + id,
method: 'get'
})
url: "/system/sjJsdb/" + id,
method: "get",
});
}
// 新增设计-井身结构数据
export function addSjJsdb(data) {
return request({
url: '/system/sjJsdb',
method: 'post',
data: data
})
url: "/system/sjJsdb",
method: "post",
data: data,
});
}
// 修改设计-井身结构数据
export function updateSjJsdb(data) {
return request({
url: '/system/sjJsdb',
method: 'put',
data: data
})
url: "/system/sjJsdb",
method: "put",
data: data,
});
}
// 删除设计-井身结构数据
export function delSjJsdb(id) {
return request({
url: '/system/sjJsdb/' + id,
method: 'delete'
})
url: "/system/sjJsdb/" + id,
method: "delete",
});
}
// 井身结构图（设计模块）
export function getSjJsjgt(params) {
return request({
url: "/system/sjJsdb/jsjgt",
method: "get",
params,
});
}
src/assets/.DS_Store
No preview for this file type
src/assets/images/btbj1.png
src/assets/images/btbj1.png

13.6 KB | W: | H:

src/assets/images/btbj1.png

13.2 KB | W: | H:

src/assets/images/btbj1.png
src/assets/images/btbj1.png
src/assets/images/btbj1.png
src/assets/images/btbj1.png
  • 2-up
  • Swipe
  • Onion skin
src/views/efficiencyAnalysis/jcxx/components/LoggingData.vue
......@@ -93,9 +93,10 @@
<el-table-column v-if="isColumnVisible('fbit')" label="钻头选型指数" prop="fbit" align="center"
min-width="100" show-overflow-tooltip :render-header="renderTableHeader" />
</el-table-column>
<el-table-column label="操作" fixed="right" width="80" align="center">
<el-table-column label="操作" fixed="right" width="140" align="center">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="handleView(scope.row)">查看</el-button>
<el-button type="text" size="mini" @click="handleEdit(scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
......@@ -300,6 +301,28 @@
<el-button type="primary" @click="viewOpen = false">关 闭</el-button>
</div>
</el-dialog>
<!-- 修改弹窗 -->
<el-dialog title="修改" :visible.sync="editOpen" width="600px" append-to-body>
<el-form ref="editForm" :model="editForm" :rules="editRules" label-width="220px">
<el-form-item label="井号">
<el-input v-model="editForm.jh" disabled />
</el-form-item>
<el-form-item label="井深">
<el-input v-model="editForm.dept" disabled />
</el-form-item>
<el-form-item label="自然伽马(自然伽马单位/API)" prop="gr">
<el-input v-model="editForm.gr" placeholder="请输入自然伽马" />
</el-form-item>
<el-form-item label="声波时差(微秒每英尺/μs/ft)" prop="ac">
<el-input v-model="editForm.ac" placeholder="请输入声波时差" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitEditForm">保 存</el-button>
<el-button @click="editOpen = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
......@@ -372,6 +395,16 @@ export default {
fileUploadComplete: false, // 文件上传是否完成
viewOpen: false,
viewForm: {},
editOpen: false,
editForm: {},
editRules: {
gr: [
{ required: false, message: "请输入自然伽马", trigger: "blur" }
],
ac: [
{ required: false, message: "请输入声波时差", trigger: "blur" }
]
},
rules: {
jh: [{ required: true, message: "井号不能为空", trigger: "blur" }],
jhdm: [
......@@ -670,10 +703,9 @@ export default {
handleCjData() {
this.loading = true;
const params = {
pageNum: 1,
pageSize: 20,
jhe: this.jh || this.$route.query.jh
pageNum: this.cjqueryParams.pageNum || 1,
pageSize: this.cjqueryParams.pageSize || 20,
jh: this.cjqueryParams.jh || this.jh || this.$route.query.jh
}
listCjsjLas(params).then(response => {
this.cjsjLasList = response.rows;
......@@ -944,6 +976,50 @@ export default {
} else {
this.viewForm = row || {};
}
},
handleEdit(row) {
const id = row && (row.id || row.cjsjLasId || row.cid);
this.editForm = {};
this.editOpen = true;
if (id) {
this.loading = true;
getCjsjLas(id).then(res => {
this.editForm = res && res.data ? res.data : row;
}).finally(() => {
this.loading = false;
});
} else {
this.editForm = { ...row } || {};
}
},
submitEditForm() {
this.$refs.editForm.validate(valid => {
if (valid) {
this.loading = true;
// 构建更新数据，包含ID和可编辑的字段
const updateData = {};
// 保留ID字段（可能是 id、cjsjLasId 或 cid）
if (this.editForm.id) updateData.id = this.editForm.id;
if (this.editForm.cjsjLasId) updateData.cjsjLasId = this.editForm.cjsjLasId;
if (this.editForm.cid) updateData.cid = this.editForm.cid;
// 只更新可编辑的字段
updateData.gr = this.editForm.gr;
updateData.ac = this.editForm.ac;
// 保留井号等必要字段
if (this.editForm.jh) updateData.jh = this.editForm.jh;
updateCjsjLas(updateData).then(response => {
this.$modal.msgSuccess("修改成功");
this.editOpen = false;
this.handleCjData();
}).catch(error => {
console.error('修改失败:', error);
this.$modal.msgError("修改失败");
}).finally(() => {
this.loading = false;
});
}
});
}
}
};
......
src/views/system/basicInformationOfDrillBit/index.vue
......@@ -74,10 +74,15 @@
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="pagination.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
style="margin-top: 10px; text-align: right;" />
<!-- 新增弹窗 -->
<el-dialog title="新增钻头" :visible.sync="dialogVisible" width="90%" @close="handleDialogClose">
<div class="dialog-card">
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="钻头编号" prop="ztbh">
......@@ -105,6 +110,78 @@
</el-form-item>
</el-col>
</el-row>
<el-divider class="divider-strong">设计详细参数</el-divider>
<el-row :gutter="20" class="geometry-row">
<el-col :span="8">
<el-form-item label="冠部轮廓" prop="gblk">
<el-select v-model="form.gblk" placeholder="请选择冠部轮廓" clearable @change="handleGblkChange"
style="width: 100%;">
<el-option v-for="item in crownProfileOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col v-if="['双圆弧', '单圆弧'].includes(form.gblk)" :span="8">
<el-form-item label="R1(mm)" prop="r1">
<el-input v-model="form.r1" placeholder="请输入 R1" />
</el-form-item>
</el-col>
<el-col v-if="form.gblk === '双圆弧'" :span="8">
<el-form-item label="R2(mm)" prop="r2">
<el-input v-model="form.r2" placeholder="请输入 R2" />
</el-form-item>
</el-col>
<el-col v-if="form.gblk === '其他'" :span="8">
<el-form-item label="其他" prop="qt">
<el-input v-model="form.qt" placeholder="请输入说明" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="内锥角(°)" prop="nzj">
<el-input v-model="form.nzj" placeholder="请输入内锥角" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="冠部高度(mm)" prop="gbgd">
<el-input v-model="form.gbgd" placeholder="请输入冠部高度" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="冠顶直径(mm)" prop="gdzj">
<el-input v-model="form.gdzj" placeholder="请输入冠顶直径" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="内锥高度(mm)" prop="nzgd">
<el-input v-model="form.nzgd" placeholder="请输入内锥高度" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="后倾角心部(°)" prop="hqjxb">
<el-input v-model="form.hqjxb" placeholder="请输入后倾角心部" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="后倾角冠部(°)" prop="hqjgb">
<el-input v-model="form.hqjgb" placeholder="请输入后倾角冠部" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="后倾角保径(°)" prop="hqjbj">
<el-input v-model="form.hqjbj" placeholder="请输入后倾角保径" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="后倾角其他(°)" prop="hqjqt">
<el-input v-model="form.hqjqt" placeholder="请输入后倾角其他" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="后排齿后倾角(°)" prop="hpchqj">
<el-input v-model="form.hpchqj" placeholder="请输入后排齿后倾角" />
</el-form-item>
</el-col>
</el-row>
<el-divider class="divider-strong">特征参数</el-divider>
<el-collapse v-model="activeCollapse" class="collapse-area">
<el-collapse-item title="刀翼总数" name="dyzs">
......@@ -259,9 +336,9 @@
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<!-- <div class="el-upload__tip" slot="tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
</div>
</div> -->
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
@click="importTemplate">下载模板</el-link>
......@@ -282,6 +359,28 @@ import { listZtxxJcxx, addZtxxJcxx, updateZtxxJcxx, delZtxxJcxx, getZtxxJcxx } f
import { getToken } from "@/utils/auth";
export default {
data() {
const vm = this;
const validateR1 = (rule, value, callback) => {
if (['双圆弧', '单圆弧'].includes(vm.form.gblk) && !value) {
callback(new Error('请输入 R1(mm)'));
} else {
callback();
}
};
const validateR2 = (rule, value, callback) => {
if (vm.form.gblk === '双圆弧' && !value) {
callback(new Error('请输入 R2(mm)'));
} else {
callback();
}
};
const validateQt = (rule, value, callback) => {
if (vm.form.gblk === '其他' && !value) {
callback(new Error('请输入说明'));
} else {
callback();
}
};
return {
// 用户导入参数
upload: {
......@@ -310,6 +409,12 @@ export default {
showSearch: true,
// 总条数
total: 0,
// 分页参数
pagination: {
pageNum: 1,
pageSize: 20,
total: 0
},
// 查询参数
queryParams: {
ztcc: '',
......@@ -326,6 +431,19 @@ export default {
ztlb: '',
sccj: '',
ztbh: '',
gblk: '',
r1: '',
r2: '',
qt: '',
nzj: '',
gbgd: '',
gdzj: '',
nzgd: '',
hqjxb: '',
hqjgb: '',
hqjbj: '',
hqjqt: '',
hpchqj: '',
// 刀翼总数
tzdm01: '',
tzxl01: '',
......@@ -368,6 +486,11 @@ export default {
gbxzOptions: [], // 冠部轮廓选项
bjOptions: [], // 保径选项
bladeCountOptions: [], // 刀翼总数选项
crownProfileOptions: [
{ label: '双圆弧', value: '双圆弧' },
{ label: '单圆弧', value: '单圆弧' },
{ label: '其他', value: '其他' }
],
activeCollapse: ['dyzs'], // 默认展开第一个
editType: '',
// 表单校验规则
......@@ -387,6 +510,24 @@ export default {
sccj: [
{ required: true, message: '请输入生产厂家', trigger: 'blur' }
],
nzgd: [
{ required: true, message: '请输入内锥高度', trigger: 'blur' }
],
gbgd: [
{ required: true, message: '请输入冠部高度', trigger: 'blur' }
],
// gblk: [
// { required: true, message: '请选择冠部轮廓', trigger: 'change' }
// ],
// r1: [
// { validator: validateR1, trigger: 'blur' }
// ],
// r2: [
// { validator: validateR2, trigger: 'blur' }
// ],
// qt: [
// { validator: validateQt, trigger: 'blur' }
// ],
tzdm01: [
{ required: true, message: '请选择刀翼总数', trigger: 'change' },
{
......@@ -479,7 +620,8 @@ export default {
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
this.getList();
this.pagination.pageNum = 1;
this.onSearch();
},
// 提交上传文件
submitFileForm() {
......@@ -487,9 +629,15 @@ export default {
},
onSearch() {
// 查询接口
listZtxxJcxx(this.queryParams).then(res => {
const params = {
...this.queryParams,
pageNum: this.pagination.pageNum,
pageSize: this.pagination.pageSize
};
listZtxxJcxx(params).then(res => {
this.tableData = res.rows || [];
this.total = res.total || 0;
this.pagination.total = res.total || 0;
this.loading = false
});
},
......@@ -502,6 +650,9 @@ export default {
// 清空表单
this.form = {
ztcc: '', ztxh: '', ztlb: '', sccj: '', ztbh: '',
gblk: '', r1: '', r2: '', qt: '',
nzj: '', gbgd: '', gdzj: '', nzgd: '',
hqjxb: '', hqjgb: '', hqjbj: '', hqjqt: '', hpchqj: '',
tzdm01: '', tzdm02: '', tzdm03: '', tzdm04: '', tzdm05: '', tzdm06: '',
tzxl01: '', tzxl02: '', tzxl03: '', tzxl04: '', tzxl05: '', tzxl06: '',
slt01: '', slt02: '', slt03: '', slt04: '', slt05: '', slt06: '',
......@@ -516,9 +667,21 @@ export default {
sccj: '',
ztbh: '',
};
this.pagination.pageNum = 1;
this.resetForm("queryForm");
this.onSearch();
},
// 分页大小改变
handleSizeChange(size) {
this.pagination.pageSize = size;
this.pagination.pageNum = 1;
this.onSearch();
},
// 当前页改变
handleCurrentChange(page) {
this.pagination.pageNum = page;
this.onSearch();
},
async onDetail(row) {
const res = await getZtxxJcxx(row.id);
this.detailData = res.data;
......@@ -711,6 +874,26 @@ export default {
this.$refs.formRef.resetFields();
}
},
handleGblkChange(value) {
if (value === '双圆弧') {
this.form.qt = '';
} else if (value === '单圆弧') {
this.form.qt = '';
this.form.r2 = '';
} else if (value === '其他') {
this.form.r1 = '';
this.form.r2 = '';
} else {
this.form.r1 = '';
this.form.r2 = '';
this.form.qt = '';
}
this.$nextTick(() => {
if (this.$refs.formRef) {
this.$refs.formRef.clearValidate(['r1', 'r2', 'qt']);
}
});
},
/** 刀翼总数变化处理 */
onTzdm01Change(val) {
//console\.log('刀翼总数变化:', val);
......
src/views/system/ztxxTzsj/index.vue
......@@ -241,7 +241,7 @@ export default {
/** 图片上传成功处理 */
handleAvatarSuccess(res, file) {
if (res.code === 200) {
this.form.slt = res.url;
this.form.slt = 'https://10.68.249.114:8088/pdc-api' + res.fileName;
this.$refs.uploadRef.clearFiles(); // 关键：上传成功后清空文件列表
this.$modal.msgSuccess("上传成功");
} else {
......
src/views/wellDesign/components/AdjacentWell.vue
......@@ -92,9 +92,10 @@
<el-table-column v-if="isColumnVisible('fbit')" label="钻头选型指数" prop="fbit" align="center"
min-width="100" show-overflow-tooltip :render-header="renderTableHeader" />
</el-table-column>
<el-table-column label="操作" width="80" align="center" fixed="right">
<el-table-column label="操作" width="140" align="center" fixed="right">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="handleView(scope.row)">查看</el-button>
<el-button type="text" size="mini" @click="handleEdit(scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
......@@ -300,6 +301,28 @@
</div>
</el-dialog>
<!-- 修改弹窗 -->
<el-dialog title="修改" :visible.sync="editOpen" width="600px" append-to-body>
<el-form ref="editForm" :model="editForm" :rules="editRules" label-width="220px">
<el-form-item label="井号">
<el-input v-model="editForm.jh" disabled />
</el-form-item>
<el-form-item label="井深">
<el-input v-model="editForm.dept" disabled />
</el-form-item>
<el-form-item label="自然伽马(自然伽马单位/API)" prop="gr">
<el-input v-model="editForm.gr" placeholder="请输入自然伽马" />
</el-form-item>
<el-form-item label="声波时差(微秒每英尺/μs/ft)" prop="ac">
<el-input v-model="editForm.ac" placeholder="请输入声波时差" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitEditForm">保 存</el-button>
<el-button @click="editOpen = false">取 消</el-button>
</div>
</el-dialog>
<!-- 选择邻井弹窗 -->
<el-dialog title="选择邻井" :visible.sync="wellDialogVisible" width="80%" :close-on-click-modal="false"
class="well-dialog" :z-index="2000" @open="handleWellDialogOpen">
......@@ -556,7 +579,17 @@ export default {
// 查看详情相关
viewDialogVisible: false,
viewRowData: null,
viewForm: {}
viewForm: {},
editOpen: false,
editForm: {},
editRules: {
gr: [
{ required: false, message: "请输入自然伽马", trigger: "blur" }
],
ac: [
{ required: false, message: "请输入声波时差", trigger: "blur" }
]
}
};
},
computed: {
......@@ -1165,6 +1198,33 @@ export default {
this.viewForm = { ...row };
this.viewDialogVisible = true;
},
handleEdit(row) {
this.editForm = { ...row };
this.editOpen = true;
},
submitEditForm() {
this.$refs.editForm.validate(valid => {
if (valid) {
this.loading = true;
// 传递完整的对象数据，但只更新 gr 和 ac 字段
const updateData = { ...this.editForm };
// 确保只更新可编辑的字段
updateData.gr = this.editForm.gr;
updateData.ac = this.editForm.ac;
updateSjCjsjLas(updateData).then(response => {
this.$modal.msgSuccess("修改成功");
this.editOpen = false;
this.handleCjData();
}).catch(error => {
console.error('修改失败:', error);
this.$modal.msgError("修改失败");
}).finally(() => {
this.loading = false;
});
}
});
},
// 判断列是否可见
isColumnVisible(prop) {
// 根据表格字段配置控制列的显示/隐藏
......
src/views/wellDesign/components/BitDesign.vue
......@@ -148,7 +148,7 @@
短抛物线</div>
<div
style="position: absolute; top: 50px; left: 1100px; font-size: 10px; writing-mode: vertical-rl; font-weight: bold;">
圆形</div>
鱼尾型</div>
<div
style="position: absolute; top: 50px; left: 1135px; font-size: 10px; writing-mode: vertical-rl; font-weight: bold;">
13</div>
......@@ -193,7 +193,7 @@
<!-- 开次信息显示区域 -->
<div ref="kcListContainer"
style="position: absolute; top: 90px; left: 1425px; width: 80px; height: 610px; overflow: visible; z-index: 10; border: 1px solid #000000; border-top: 0;">
style="position: absolute; top: 90px; left: 1425px; width: 80px; height: 560px; overflow: visible; z-index: 10; border: 1px solid #000000; border-top: 0;">
</div>
</div>
<div id="tooltip-container" style="display: none;position: absolute"></div>
......
src/views/wellDesign/components/BitDesignRecommendation copy 4.vue 0 → 100644
<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.vue
<template>
<div class="bit-design-recommendation">
<div class="bit-design-recommendation" v-loading="loading">
<!-- 控制栏 -->
<div class="control-bar">
<div class="control-item">
......@@ -18,11 +18,44 @@
<label>结束深度:</label>
<span class="control-value">{{ controlForm.depthRange[1] }} m</span>
</div>
<el-button type="primary" @click="handleQuery">查询</el-button>
<!-- <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="density" label="布齿密度" min-width="120px" align="center" />
<el-table-column prop="toothSize" label="切削齿尺寸" min-width="120px" align="center" />
<el-table-column prop="negativeAngle" label="切削齿负前角°" min-width="120px" align="center" />
<el-table-column prop="crownProfile" 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">
<!-- 刀翼总数 -->
......@@ -65,28 +98,27 @@
</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>
<!-- 查看钻头信息弹窗 -->
<el-dialog title="查看钻头信息" :visible.sync="viewDialogVisible" width="90%" append-to-body
@close="handleViewDialogClose" class="view-dialog">
<div v-if="viewDialogVisible" class="view-dialog-content">
<BitSelectionInfo :bitData="selectedBitData" :hideHeader="true" :showValues="true"
@close="handleViewDialogClose" />
</div>
</el-dialog>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { getCjqxDataztyx, ztTj } from "@/api/system/cjsjLas";
import { getCjqxDataztyx, ztTj, ppZtxxx } from "@/api/system/cjsjLas";
import BitSelectionInfo from './BitSelectionInfo.vue';
export default {
name: 'BitDesignRecommendation',
components: {
BitSelectionInfo
},
data() {
return {
controlForm: {
......@@ -101,15 +133,16 @@ export default {
displayBitSize: '', // 显示的钻头尺寸
// 接口返回的数据
apiData: null,
recommendationData: [
{ parameter: '刀翼数', result: '' },
{ parameter: '切削齿尺寸', result: '' },
{ parameter: '布齿密度', result: '' },
{ parameter: '冠状轮廓', result: '' },
{ parameter: '切削齿负前角°', result: '' },
// { parameter: '保径', result: '' },
]
recommendationData: {
bladeCount: '',
toothSize: '',
density: '',
crownProfile: '',
negativeAngle: ''
},
viewDialogVisible: false, // 查看弹窗显示状态
selectedBitData: {}, // 选中的钻头数据
loading: false // 加载状态
}
},
mounted() {
......@@ -210,6 +243,9 @@ export default {
return;
}
// 开始加载
this.loading = true;
// 解析 ztcc 值
let ztcc = null;
if (query.ztccValues) {
......@@ -246,6 +282,9 @@ export default {
}).catch(error => {
console.error('调用ztTj接口失败:', error);
this.$message.error('获取推荐数据失败，请重试');
}).finally(() => {
// 结束加载
this.loading = false;
});
},
......@@ -261,14 +300,13 @@ export default {
// 根据新的字段结构使用zttjfa中的推荐值
// t01: 刀翼数, t02: 布齿密度, t03: 切削齿尺寸, t04: 切削齿负前角, t05: 冠部轮廓, t06: 保径
this.recommendationData = [
{ parameter: '刀翼数', result: zttjfa.t01 || '' },
{ parameter: '切削齿尺寸', result: zttjfa.t03 || '' },
{ parameter: '布齿密度', result: zttjfa.t02 || '' },
{ parameter: '冠状轮廓', result: zttjfa.t05 || '' },
{ parameter: '切削齿负前角°', result: zttjfa.t04 || '' },
// { parameter: '保径', result: zttjfa.t06 || '' },
];
this.recommendationData = {
bladeCount: zttjfa.t01 || '',
toothSize: zttjfa.t03 || '',
density: zttjfa.t02 || '',
crownProfile: zttjfa.t05 || '',
negativeAngle: zttjfa.t04 || ''
};
console.log('推荐方案数据已更新:', this.recommendationData);
},
......@@ -787,6 +825,148 @@ export default {
} else {
this.$router.go(-1)
}
},
// 处理查看按钮点击
handleUpdate(row) {
console.log('查看钻头信息', row);
// 先构建基础数据
const zttjfa = (this.apiData && this.apiData.zttjfa) || {};
const recData = this.recommendationData;
// 构建基础钻头数据
this.selectedBitData = {
ztxh: zttjfa.ztxh || '',
ztcc: this.controlForm.bitSize || this.displayBitSize.replace('mm', '') || '',
ztlb: zttjfa.ztlb || '',
ztbh: zttjfa.ztbh || '',
// 参数值 - 使用推荐方案表格中显示的值
tzdm01: recData.bladeCount || zttjfa.t01 || '',
tzdm02: recData.density || zttjfa.t02 || '',
tzdm03: recData.toothSize || zttjfa.t03 || '',
tzdm04: recData.negativeAngle || zttjfa.t04 || '',
tzdm05: recData.crownProfile || zttjfa.t05 || '',
tzdm06: zttjfa.t06 || '',
// 图片（如果有的话）
slt01: zttjfa.slt01 || '',
slt02: zttjfa.slt02 || '',
slt03: zttjfa.slt03 || '',
slt04: zttjfa.slt04 || '',
slt05: zttjfa.slt05 || '',
slt06: zttjfa.slt06 || '',
// 匹配状态（推荐方案中显示为"推荐"）
t01match: recData.bladeCount ? '推荐' : '',
t02match: recData.density ? '推荐' : '',
t03match: recData.toothSize ? '推荐' : '',
t04match: recData.negativeAngle ? '推荐' : '',
t05match: recData.crownProfile ? '推荐' : '',
t06match: zttjfa.t06 ? '推荐' : ''
};
// 调用 ppZtxxx 接口并更新数据
this.callPpZtxxx().then(() => {
console.log('构建的钻头数据:', this.selectedBitData);
this.viewDialogVisible = true;
}).catch(() => {
// 即使接口失败也打开弹窗，使用基础数据
console.log('接口调用失败，使用基础数据:', this.selectedBitData);
this.viewDialogVisible = true;
});
},
// 调用 ppZtxxx 接口
callPpZtxxx() {
const query = this.$route.query;
const zttjfa = (this.apiData && this.apiData.zttjfa) || {};
// 获取 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 || '',
qk: query.qk || '',
ztcc: ztcc || '',
t01: zttjfa.t01 || '',
t02: zttjfa.t02 || '',
t03: zttjfa.t03 || '',
t04: zttjfa.t04 || '',
t05: zttjfa.t05 || '',
t06: zttjfa.t06 || ''
};
console.log('调用 ppZtxxx 接口，参数:', params);
return ppZtxxx(params).then(response => {
console.log('ppZtxxx 接口返回数据:', response);
// 根据返回的数据更新 selectedBitData
if (response && response.data) {
const data = response.data;
// 辅助函数：处理数组数据，保存所有有图片的项
const processItems = (items, prefix) => {
if (!items || !Array.isArray(items) || items.length === 0) {
return;
}
// 过滤出有图片的项
const itemsWithImage = items.filter(item => item.slt && item.slt.trim() !== '');
// 如果有有图片的项，使用它们；否则使用所有项
const validItems = itemsWithImage.length > 0 ? itemsWithImage : items;
// 保存第一个项的 tzdm（用于显示参数值）
if (validItems.length > 0 && validItems[0].tzdm) {
this.selectedBitData[`tzdm${prefix}`] = validItems[0].tzdm;
}
// 保存所有项的图片和名称（数组形式）
this.selectedBitData[`slt${prefix}List`] = validItems.map(item => ({
slt: item.slt || '',
tzxl: item.tzxl || ''
}));
};
// 更新 t01 (刀翼总数)
processItems(data.t01, '01');
// 更新 t02 (布齿密度)
processItems(data.t02, '02');
// 更新 t03 (切削齿尺寸)
processItems(data.t03, '03');
// 更新 t04 (切削齿负前角)
processItems(data.t04, '04');
// 更新 t05 (冠部轮廓)
processItems(data.t05, '05');
console.log('根据接口返回数据更新后的 selectedBitData:', this.selectedBitData);
}
}).catch(error => {
console.error('调用 ppZtxxx 接口失败:', error);
// 返回 rejected promise，让调用方知道失败了
return Promise.reject(error);
});
},
// 关闭查看弹窗
handleViewDialogClose() {
this.viewDialogVisible = false;
this.selectedBitData = {};
}
}
}
......@@ -850,6 +1030,7 @@ export default {
.main-content {
display: flex;
flex-direction: column;
gap: 20px;
.charts-section {
......@@ -881,9 +1062,10 @@ export default {
}
.recommendation-section {
width: 300px;
width: 100%;
.recommendation-panel {
width: 100%;
background-color: #fff;
border: 1px solid #e4e7ed;
border-radius: 4px;
......@@ -902,5 +1084,27 @@ export default {
}
}
}
.view-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;
}
.view-dialog-content {
padding: 0;
overflow: hidden;
}
}
}
</style>
src/views/wellDesign/components/BitMatching.vue
<template>
<div class="bit-matching">
<div class="bit-matching" v-loading="loading">
<div class="page-header">
<h2>钻头匹配</h2>
</div>
......@@ -116,7 +116,8 @@ export default {
// 弹窗相关
dialogVisible: false,
selectedBitId: null,
selectedBitData: null
selectedBitData: null,
loading: false // 加载状态
}
},
mounted() {
......@@ -149,6 +150,9 @@ export default {
fetchBitMatchingData() {
console.log('调用ppZtxx接口');
// 开始加载
this.loading = true;
// 构建接口参数
const params = {
jh: this.queryParams.jh,
......@@ -176,6 +180,9 @@ export default {
}).catch(error => {
console.error('调用ppZtxx接口失败:', error);
this.$message.error('获取钻头匹配数据失败，请重试');
}).finally(() => {
// 结束加载
this.loading = false;
});
},
......
src/views/wellDesign/components/BitSelectionInfo.vue
<template>
<div class="bit-selection-info">
<!-- 页面头部 -->
<div class="page-header">
<div class="page-header" v-if="!hideHeader">
<div class="header-content">
<div class="bit-basic-info">
<span>钻头型号: {{ getCurrentValue('ztxh') }}</span>
......@@ -24,61 +24,98 @@
class="match-status-table">
<el-table-column label="刀翼总数" min-width="120" align="center">
<template slot-scope="scope">
<span :class="['status-icon', scope.row.t01match === '匹配' ? 'match' : 'no-match']">
{{ scope.row.t01match === '匹配' ? '✓' : '✗' }}
<span v-if="showValues" class="value-text">
{{ getCurrentValue('tzdm01') || '--' }}
</span>
<span v-else :class="['status-icon', isMatchStatus(scope.row.t01match) ? 'match' : 'no-match']">
{{ isMatchStatus(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', scope.row.t02match === '匹配' ? 'match' : 'no-match']">
{{ scope.row.t02match === '匹配' ? '✓' : '✗' }}
<span v-if="showValues" class="value-text">
{{ getCurrentValue('tzdm02') || '--' }}
</span>
<span v-else :class="['status-icon', isMatchStatus(scope.row.t02match) ? 'match' : 'no-match']">
{{ isMatchStatus(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', scope.row.t03match === '匹配' ? 'match' : 'no-match']">
{{ scope.row.t03match === '匹配' ? '✓' : '✗' }}
<span v-if="showValues" class="value-text">
{{ getCurrentValue('tzdm03') || '--' }}
</span>
<span v-else :class="['status-icon', isMatchStatus(scope.row.t03match) ? 'match' : 'no-match']">
{{ isMatchStatus(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', scope.row.t04match === '匹配' ? 'match' : 'no-match']">
{{ scope.row.t04match === '匹配' ? '✓' : '✗' }}
<span v-if="showValues" class="value-text">
{{ getCurrentValue('tzdm04') || '--' }}
</span>
<span v-else :class="['status-icon', isMatchStatus(scope.row.t04match) ? 'match' : 'no-match']">
{{ isMatchStatus(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', scope.row.t05match === '匹配' ? 'match' : 'no-match']">
{{ scope.row.t05match === '匹配' ? '✓' : '✗' }}
<span v-if="showValues" class="value-text">
{{ getCurrentValue('tzdm05') || '--' }}
</span>
<span v-else :class="['status-icon', isMatchStatus(scope.row.t05match) ? 'match' : 'no-match']">
{{ isMatchStatus(scope.row.t05match) ? '✓' : '✗' }}
</span>
</template>
</el-table-column>
<el-table-column label="保径" min-width="100" align="center">
<!-- <el-table-column label="保径" min-width="100" align="center">
<template slot-scope="scope">
<span :class="['status-icon', scope.row.t06match === '匹配' ? 'match' : 'no-match']">
{{ scope.row.t06match === '匹配' ? '✓' : '✗' }}
<span v-if="showValues" class="value-text">
{{ getCurrentValue('tzdm06') || '--' }}
</span>
<span v-else :class="['status-icon', isMatchStatus(scope.row.t06match) ? 'match' : 'no-match']">
{{ isMatchStatus(scope.row.t06match) ? '✓' : '✗' }}
</span>
</template>
</el-table-column>
</el-table-column> -->
</el-table>
</div>
<!-- 详细参数和图片 -->
<div class="parameters-section">
<div class="parameter-row">
<div v-for="(item, index) in availableParameters" :key="index" class="parameter-item">
<div class="parameter-info">
<h4>{{ item.tzdl }}</h4>
<!-- <p class="parameter-value">值: {{ getCurrentValue(item.field) || '暂无数据' }}</p>
<p class="match-status">匹配状态: {{ getCurrentValue(item.matchField) || '未知' }}</p> -->
<!-- 左侧：参数名称 -->
<div class="parameter-label">
<h4>{{ item.tzdl }}:</h4>
</div>
<div class="parameter-image">
<img :src="getCurrentValue(item.imageField)" :alt="item.tzdl"
v-if="getCurrentValue(item.imageField)" />
<div v-else class="no-image">暂无图片</div>
<!-- 右侧：图片列表横向排列 -->
<div class="parameter-images-container">
<!-- 如果有多个图片，循环显示 -->
<div v-if="getImageList(item).length > 0" class="parameter-images-list">
<div v-for="(imgItem, imgIndex) in getImageList(item)" :key="imgIndex"
class="parameter-image-item">
<div class="parameter-image">
<img :src="imgItem.slt" :alt="imgItem.tzxl || item.tzdl" v-if="imgItem.slt" />
<div v-else class="no-image">暂无图片</div>
</div>
<div class="parameter-name" v-if="imgItem.tzxl">
{{ imgItem.tzxl }}
</div>
</div>
</div>
<!-- 如果没有图片列表，显示单个图片（兼容旧数据） -->
<div v-else class="parameter-image-single">
<div class="parameter-image">
<img :src="getCurrentValue(item.imageField)"
:alt="getCurrentValue(item.nameField) || item.tzdl"
v-if="getCurrentValue(item.imageField)" />
<div v-else class="no-image">暂无图片</div>
</div>
</div>
</div>
</div>
</div>
......@@ -109,6 +146,14 @@ export default {
bitId: {
type: String,
default: ''
},
hideHeader: {
type: Boolean,
default: false
},
showValues: {
type: Boolean,
default: false
}
},
created() {
......@@ -133,12 +178,12 @@ export default {
apiData: null,
// 参数类型定义
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' }
{ tzdl: '刀翼总数', field: 'tzdm01', imageField: 'slt01', matchField: 't01match', nameField: 'tzxl01' },
{ tzdl: '布齿密度', field: 'tzdm02', imageField: 'slt02', matchField: 't02match', nameField: 'tzxl02' },
{ tzdl: '切削齿尺寸mm', field: 'tzdm03', imageField: 'slt03', matchField: 't03match', nameField: 'tzxl03' },
{ tzdl: '切削齿负前角°', field: 'tzdm04', imageField: 'slt04', matchField: 't04match', nameField: 'tzxl04' },
{ tzdl: '冠部轮廓', field: 'tzdm05', imageField: 'slt05', matchField: 't05match', nameField: 'tzxl05' },
// { tzdl: '保径', field: 'tzdm06', imageField: 'slt06', matchField: 't06match', nameField: 'tzxl06' }
],
bitInfo: {
// 基本信息
......@@ -160,6 +205,20 @@ export default {
slt04: '', // 切削齿负前角图片
slt05: '', // 冠部轮廓图片
slt06: '', // 保径图片
// 图片名称
tzxl01: '', // 刀翼总数图片名称
tzxl02: '', // 布齿密度图片名称
tzxl03: '', // 切削齿尺寸图片名称
tzxl04: '', // 切削齿负前角图片名称
tzxl05: '', // 冠部轮廓图片名称
tzxl06: '', // 保径图片名称
// 图片列表（支持多个图片）
slt01List: [], // 刀翼总数图片列表
slt02List: [], // 布齿密度图片列表
slt03List: [], // 切削齿尺寸图片列表
slt04List: [], // 切削齿负前角图片列表
slt05List: [], // 冠部轮廓图片列表
slt06List: [], // 保径图片列表
// 匹配状态
t01match: '', // 刀翼总数匹配状态
t02match: '', // 布齿密度匹配状态
......@@ -251,6 +310,22 @@ export default {
this.bitInfo.slt05 = data.slt05 || ''
this.bitInfo.slt06 = data.slt06 || ''
// 更新图片名称 (tzxl)
this.bitInfo.tzxl01 = data.tzxl01 || ''
this.bitInfo.tzxl02 = data.tzxl02 || ''
this.bitInfo.tzxl03 = data.tzxl03 || ''
this.bitInfo.tzxl04 = data.tzxl04 || ''
this.bitInfo.tzxl05 = data.tzxl05 || ''
this.bitInfo.tzxl06 = data.tzxl06 || ''
// 更新图片列表（支持多个图片）
this.bitInfo.slt01List = data.slt01List || []
this.bitInfo.slt02List = data.slt02List || []
this.bitInfo.slt03List = data.slt03List || []
this.bitInfo.slt04List = data.slt04List || []
this.bitInfo.slt05List = data.slt05List || []
this.bitInfo.slt06List = data.slt06List || []
// 更新匹配状态
this.bitInfo.t01match = data.t01match || ''
this.bitInfo.t02match = data.t02match || ''
......@@ -271,7 +346,12 @@ export default {
isParameterMatched(item) {
// 根据API返回的匹配状态字段判断
const matchStatus = this.bitInfo[item.matchField]
return matchStatus === '匹配'
return this.isMatchStatus(matchStatus)
},
// 判断是否为匹配状态（支持'匹配'和'推荐'）
isMatchStatus(status) {
return status === '匹配' || status === '推荐' || status === true
},
// 获取参数值
......@@ -284,6 +364,21 @@ export default {
return (this.bitData && this.bitData[field]) || this.bitInfo[field] || ''
},
// 获取图片列表（支持多个图片）
getImageList(item) {
// 获取图片列表字段名（如 slt01List）
const listField = item.imageField + 'List';
const imageList = (this.bitData && this.bitData[listField]) || this.bitInfo[listField];
// 如果存在图片列表且是数组，返回它
if (Array.isArray(imageList) && imageList.length > 0) {
return imageList;
}
// 否则返回空数组
return [];
},
handleModify() {
console.log('修改钻头信息')
this.$emit('modify')
......@@ -397,6 +492,12 @@ export default {
color: #f56c6c;
}
}
.value-text {
font-size: 14px;
color: #333;
font-weight: 500;
}
}
}
......@@ -411,51 +512,116 @@ export default {
background-color: #fff;
border-radius: 4px;
padding: 15px;
text-align: center;
display: flex;
align-items: flex-start;
gap: 20px;
border: 1px solid #e4e7ed;
.parameter-info {
margin-bottom: 10px;
// 左侧：参数名称
.parameter-label {
min-width: 120px;
flex-shrink: 0;
h4 {
margin: 0 0 5px 0;
margin: 0;
color: #333;
font-size: 14px;
font-weight: bold;
}
.parameter-value {
margin: 0 0 3px 0;
font-size: 12px;
color: #333;
}
.match-status {
margin: 0;
font-size: 12px;
color: #666;
line-height: 1.5;
}
}
.parameter-image {
img {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 4px;
border: 1px solid #e4e7ed;
}
// 右侧：图片容器
.parameter-images-container {
flex: 1;
display: flex;
align-items: flex-start;
.no-image {
width: 100%;
height: 120px;
.parameter-images-list {
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f7fa;
border: 1px solid #e4e7ed;
border-radius: 4px;
color: #999;
font-size: 12px;
flex-direction: row;
gap: 15px;
flex-wrap: wrap;
.parameter-image-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
.parameter-image {
width: 150px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid #e4e7ed;
overflow: hidden;
background-color: #fafafa;
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.no-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f7fa;
color: #999;
font-size: 12px;
}
}
.parameter-name {
margin: 0;
font-size: 12px;
color: #409EFF;
font-weight: 500;
text-align: center;
white-space: pre-line;
}
}
}
.parameter-image-single {
.parameter-image {
width: 150px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
border: 1px solid #e4e7ed;
overflow: hidden;
background-color: #fafafa;
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.no-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f7fa;
color: #999;
font-size: 12px;
}
}
}
}
}
......
src/views/wellDesign/components/WellStructure copy.vue 0 → 100644
<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
<template>
<div class="app-containerjsjg">
<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="井号" prop="jh">
<el-input v-model="queryParams.jh" placeholder="请输入井号" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<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-form-item>
</el-form> -->
<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>
<!-- <el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
v-hasPermi="['system:sjJsdb:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
v-hasPermi="['system:sjJsdb:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
v-hasPermi="['system:sjJsdb:export']">导出</el-button>
</el-col> -->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<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="id" /> -->
<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>
<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;" />
<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>
......@@ -270,7 +265,8 @@
</template>
<script>
import { listSjJsdb, getSjJsdb, delSjJsdb, addSjJsdb, updateSjJsdb } from "@/api/system/sjJsdb";
import * as d3 from "d3";
import { listSjJsdb, getSjJsdb, delSjJsdb, addSjJsdb, updateSjJsdb, getSjJsjgt } from "@/api/system/sjJsdb";
export default {
name: "SjJsdb",
......@@ -282,6 +278,15 @@ export default {
},
data() {
return {
// 井身结构图相关参数
width: 600,
height: 800,
marginTop: 20,
marginRight: 30,
marginBottom: 30,
marginLeft: 40,
maxX: 0,
maxY: 0,
// 遮罩层
loading: true,
// 选中数组
......@@ -357,20 +362,31 @@ export default {
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();
}
}
}
},
......@@ -384,6 +400,164 @@ export default {
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;
......
vue.config.js
......@@ -37,7 +37,7 @@ module.exports = {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://192.168.31.108:8091`,
// target: `http://192.168.31.190:8091`,
// target: `http://192.168.31.26:8091`,
// target: `http://192.168.31.12:8091`,
// target: `http://192.168.110.69:8091`,
// target: `http://192.168.31.109:8080`,
......
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