kd-wellbore-3d-imaging

kd-wellbore-3D-imaging

全井筒坍塌/破裂 3D 成像 Vue 3 组件。

主要特点

• 全井筒井径轨迹 + 密度热力图三维可视化
• 自由调整井径比例，一键切换坍塌/破裂模式
• 多主题支持（white / dark / gray）
• 鼠标悬停查看轨迹点位详细信息

安装

npm install kd-wellbore-3d-imaging

环境要求：Vue 3.x、three 0.163.0+

快速开始

注意：CSS 文件需单独引入，否则组件无样式。

全局注册

import { createApp } from "vue";
import App from "./App.vue";
import { Wellbore3dImaging } from "kd-wellbore-3d-imaging";
import "kd-wellbore-3d-imaging/dist/kd-wellbore-3d-imaging.css";

const app = createApp(App);
app.use(Wellbore3dImaging);
app.mount("#app");

局部注册

<template>
  <Wellbore3dImaging ref="wellboreRef" />
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Wellbore3dImaging } from "kd-wellbore-3d-imaging";
import "kd-wellbore-3d-imaging/dist/kd-wellbore-3d-imaging.css";

const wellboreRef = ref(null);

onMounted(async () => {
  wellboreRef.value.createCompleteWellbore(data);
  wellboreRef.value.changeColorType("collapse");
});
</script>

API

通过组件 ref 暴露以下方法：

数据格式

createCompleteWellbore(data) 接受以下结构：

{
  "data": {
    "points": [{
      "MD": 3249.5,
      "TVD": 3183.2313,
      "actual_inc_deg": 6.0571,
      "actual_az_deg": 275.7711,
      "caliper_mm": 180.594,
      "bit_size_mm": null,
      "az_deg": [0, 10, 20, /* ... 0-360 */],
      "Pc_MPa": [/* 坍塌压力 */],
      "collapse_density_g_cc": [/* 坍塌密度 */],
      "Pf_init_MPa": [/* 破裂压力 */],
      "fracture_density_g_cc": [/* 破裂密度 */]
    },
    // ... 更多测深点
    ]
  }
}

License

MIT