unfolded-well-structure
v1.0.16
Published
井身结构展开图
Readme
Well Structure Canvas - 井身结构可视化组件
UnfoldedWellStructure 是一个基于 Vue.js 和 Fabric.js 的井身结构可视化组件，用于在 Web 应用中绘制和展示井身结构图、井眼轨迹、套管、水泥环等石油工程相关数据。
功能特性
组件设计初衷
本组件的初始目的是：在井设计阶段，通过录入参数，绘制出井筒剖面图（侧重于事前设计）；而不是根据测斜数据绘制（侧重于事后分析）。虽然二者并没有特别严格的界限，但功能出发点具有根本区别。
效果展示
井身结构可视化
- 套管系统：支持单个开次下多个套管序列的录入和绘制
- 水泥环：完整的水泥环绘制，包括填充和随机点效果
- 筛管系统：带悬挂器和套管鞋标识的虚线绘制
- 悬挂器：带叉号矩形的悬挂器绘制
- 分级箍：水泥环中的黑色短实线标识
- 套管鞋：三角形套管鞋标识
- 封隔器：井筒中的灰色实心矩形
- 回接套管：自动识别并绘制向上的箭头标识
井眼轨迹展示
- 井筒中心线：虚线表示的井筒中心线
- 井筒轴线造斜段：实线表示的造斜段轨迹
- 稳斜段：虚线表示的稳斜段轨迹
标签系统
- 井筒造斜数据标签：显示造斜点的深度和位移数据
- 套管标签：显示套管的关键参数信息
- 智能标签布局：自动避免标签重叠，支持左右两侧布局
绘图模式
- 严格模式：精确按照比例尺绘制
- 示意图模式：简化绘制，便于快速查看
画布适配
- 填充父容器：自动填充父容器尺寸
- 自定义尺寸：支持固定尺寸设置
- 自动调整宽度：根据井眼轨迹位移自动调整画布宽度
主题定制
- 完整主题系统：支持20+个CSS变量的自定义
- 控制面板样式：可定制控制面板的外观
数据导出
- DataURL导出：将画布导出为DataURL格式图片
- Blob导出：将画布导出为Blob对象
安装与使用
安装依赖
npm install unfolded-well-structure基本使用
<template>
<div style="height: 600px; width: 800px;">
<UnfoldedWellStructure
:data="wellData"
:cementRingThickness="15"
:halfWellboreWidth="12"
:showLabels="true"
:showWellboreLabels="true"
:canvasMode="'fillParent'"
:drawMode="'strict'"
:theme="customTheme"
/>
</div>
</template>
<script>
import UnfoldedWellStructure from 'unfolded-well-structure'
export default {
components: {
UnfoldedWellStructure
},
data() {
return {
wellData: {
direct: [], // 井眼轨迹数据
struct: [] // 井身结构数据
},
customTheme: {
'--canvas-back-ground-color': '#f5f5f5',
'--wellbore-hold-line-color': '#666',
'--wellbore-slope-line-color': '#ff6b6b'
}
}
}
}
</script>Props 配置
数据相关
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| data | Object | { direct: [], struct: [], screenTubeData: [] } | 井身数据，包含 direct（井眼轨迹）、struct（井身结构）和 screenTubeData（筛管数据）三个数组 |
尺寸控制
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| cementRingThickness | Number | 13 | 水泥环厚度（像素） |
| halfWellboreWidth | Number | 13 | 井筒半径（像素） |
| canvasHeight | Number | 200 | 画布高度（仅在 canvasMode="custom" 时生效） |
| canvasWidth | Number | 100 | 画布宽度（仅在 canvasMode="custom" 时生效） |
| bottomEdge | Number | 60 | 画布底部边距 |
显示控制
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| showLabels | Boolean | true | 是否显示标签 |
| showWellboreLabels | Boolean | true | 是否显示井筒造斜数据标签 |
模式控制
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| drawMode | String | "strict" | 绘图模式："strict"（严格）或 "illustration"（示意图） |
| canvasMode | String | "fillParent" | 画布模式："fillParent"（填充父容器）、"custom"（自定义）或 "auto"（自动调整） |
主题定制
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| theme | Object | {} | 自定义主题配置，覆盖默认主题颜色 |
数据格式
井眼轨迹数据 (direct)
[
{
koPoint: 100, // 造斜开始点井深
aPoint: 150, // 造斜结束点井深
inc: 30, // 造斜终点井斜
},
// ... 更多数据点
]井身结构数据 (struct)
[
{
spudin: "表层套管", // 套管名称
spudinNo: 1, // 开次编号
casingName: "表层套管", // 套管名称
drillDiameter: 660.4, // 钻头直径
startDepth: null, // 起始深度
finalDepth: 196, // 最终深度
pluggerTopMd: null, // 封隔器顶部深度
pluggerBottomMd: null, // 封隔器底部深度
casingDiameter: 508, // 套管直径
casingThickness: 11.13, // 套管壁厚
casingTopMd: 0, // 套管顶部深度
casingBottomMd: 196, // 套管底部深度
cementFillTop: 0, // 水泥返高顶部
stageCementerMd: null // 分级箍深度
},
// ... 更多套管数据
]筛管数据 (screenTubeData)
[
{
screenTopMd: 100, // 筛管顶部深度
screenBottomMd: 150 // 筛管底部深度
},
]数据录入说明
支持单个开次下多个套管序列：组件支持在一个开次下录入多个套管序列，用于复杂井身结构设计。
套管序列变径处理：
- 目前不支持变径绘制，统一按照保径处理
- 套管序列之间未加标识符，但会进行标签绘制
- 理论上可以实现变径绘制，需综合考虑表现形式（颜色变化、线宽变化等）
录入顺序规则：
- 常规录入：开次从小到大录入；套管序列中，井浅的套管在上部，井深的套管在下部
- 回接套管录入：在有回接套管施工的井中，套管序列中井深的套管在上部，井浅的套管在下部时，组件会自动识别下部较浅的套管为回接套管，并在两个套管结合处绘制向上的箭头标识
数据合理性检查：
- 组件只做最基本容错，如套管底深和顶深的关系验证
- 水泥返高等数据设置不合理时，可能出现预期之外的绘制效果
- 建议在数据录入时确保数据的合理性和一致性
支持的绘制内容
组件支持绘制以下井身结构元素：
1. 井筒相关
- 井筒中心线：虚线表示的井筒中心轨迹线
- 井筒轴线造斜段：实线表示的造斜段轨迹
- 井筒稳斜段：虚线表示的稳斜段轨迹
2. 套管系统
- 套管主体：根据套管直径和壁厚绘制的套管线条
- 套管鞋：三角形标识，表示套管底部位置
- 悬挂器：带叉号矩形标识，表示套管悬挂位置
- 分级箍：水泥环中的黑色短实线，表示分级固井位置
- 回接套管：自动识别的回接套管，带有向上的箭头标识
3. 水泥系统
- 水泥环：套管与井壁之间的水泥填充区域
- 水泥波浪线：表示水泥环外缘的波浪形线条
- 水泥随机点：水泥环内部的随机分布点，增强视觉效果
- 水泥塞：井筒中的灰色实心矩形，表示封堵位置
4. 筛管系统
- 筛管主体：带悬挂器和套管鞋标识的虚线
- 筛管悬挂器：筛管系统的悬挂装置
- 筛管套管鞋：筛管底部的套管鞋标识
5. 封隔器系统
- 封隔器：井筒中的灰色实心矩形，用于封隔不同层段
6. 标签系统
- 井筒造斜数据标签：显示造斜点的深度、位移等关键数据
- 套管参数标签：显示套管的直径、深度、水泥返高等信息
- 智能布局：自动避免标签重叠，支持左右两侧自适应布局
主题配置
组件支持完整的主题定制，可以通过 theme prop 覆盖以下 CSS 变量：
const customTheme = {
// 基础绘图元素
'--canvas-back-ground-color': '#ffffff', // 画布背景色
'--ground-h-line-color': '#000000', // 地平线颜色
// 井筒相关
'--wellbore-slope-line-color': 'red', // 井筒造斜段线条颜色
'--wellbore-hold-line-color': 'red', // 井筒稳斜段线条颜色
// 水泥环相关
'--cement-wave-line-color': 'darkblue', // 水泥波浪线颜色
'--cement-fill-color': '#c0c0c0', // 水泥填充色
'--cement-random-point-color': '#333333', // 水泥随机点颜色
'--cement-casing-shoe-fill-color': 'darkblue', // 套管鞋填充色
// 套管组件相关
'--linear-hanger-line-color': 'darkblue', // 悬挂器线条颜色
'--linear-hanger-fill-color': '#D3D3D3', // 悬挂器填充色
'--stager-line-color': '#000000', // 分级箍线条颜色
'--back-indicator-fill-color': 'darkblue', // 回接指示器填充色
'--screen-tube-fill-color': 'darkblue', // 筛管填充色
'--screen-tube-line-color': 'darkblue', // 筛管线条颜色
'--pluger-color': '#D3D3D3', // 封隔器颜色
// 标签系统
'--label-text-fill-color': '#333333', // 标签文字颜色
'--label-line-color': 'darkblue', // 标签线条颜色
// 控制面板样式
'--control-panel-background-rgba-color': '255, 255, 255', // 控制面板背景色
'--bg-opacity': 0.8, // 背景透明度
'--control-panel-control-label-color': '#333333', // 控制标签颜色
'--control-panel-control-row-label-color': '#333333', // 行标签颜色
'--control-panel-control-slider-background-color': '#DDDDDD', // 滑块背景色
'--control-panel-primary-color': '#3d5fef', // 主色调
'--toggle-btn-color': '#45a049' // 切换按钮颜色
}方法
组件提供以下方法供外部调用：
toDataURL()
将画布内容导出为 DataURL 格式的图片。
const dataUrl = this.$refs.wellCanvas.toDataURL();toBlob()
将画布内容导出为 Blob 对象（返回 Promise）。
this.$refs.wellCanvas.toBlob().then(blob => {
// 处理 blob 对象
});注意事项
数据验证与合理性
- 基本容错：组件只做最基本容错，如套管底深和顶深的关系验证
- 数据合理性：水泥返高等数据设置不合理时，可能出现预期之外的绘制效果
- 建议：在数据录入时确保数据的合理性和一致性
功能限制说明
- 变径绘制：目前不支持套管序列变径绘制，统一按照保径处理
- 套管序列标识：套管序列之间未加特殊标识符，但会进行标签绘制
- 变径实现：理论上可以实现变径绘制，需综合考虑表现形式（颜色变化、线宽变化等）
性能与兼容性
- 性能优化：使用防抖函数处理频繁的尺寸变化事件
- 内存管理：组件销毁时会自动清理画布和观察器
- 浏览器兼容：基于现代浏览器标准，建议使用 Chrome 80+、Firefox 75+、Safari 13+
技术支持与反馈
- 问题反馈：组件尽可能考虑到了常规合理的绘制逻辑，如有其他未考虑到的需求，请提出合理需求发送到
[email protected] - 自定义需求：如需特殊定制功能或遇到预期之外的绘制效果，请联系技术支持
许可证
MIT License