GasExtractionGoldenPeriods

用于展示工作面推进过程中覆岩运移、支承压力变化及瓦斯抽采黄金期的 Vue 3 图形组件。

组件包含走向剖面、应力曲线与 L1-L4 分区、横向采空区剖面。支持默认演示模式，也支持使用接口返回的 plotData 驱动曲线和分区，并支持大数据量场景下的分段追加。

当前 npm 包名：gas-extraction-golden-periods。

安装

npm install gas-extraction-golden-periods

项目需要 Vue 3.5+。

引入与注册

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import GasExtractionGoldenPeriodsPlugin from 'gas-extraction-golden-periods'

const app = createApp(App)

app.use(GasExtractionGoldenPeriodsPlugin)
app.mount('#app')

注册后可直接使用：

<template>
  <GasExtractionGoldenPeriods />
</template>

局部引入

<script setup>
import { GasExtractionGoldenPeriods } from 'gas-extraction-golden-periods'
</script>

<template>
  <GasExtractionGoldenPeriods />
</template>

基础使用

组件默认处于停止状态。点击或调用 resume() 后才开始推进。

<script setup>
import { ref } from 'vue'
import { GasExtractionGoldenPeriods } from 'gas-extraction-golden-periods'

const figureRef = ref(null)

const figureConfig = {
  animation: {
    autoPlay: false,
    advanceSpeed: 3,
    recoveryEndMeters: 600,
  },
  viewport: {
    workfaceLengthMeters: 1000,
  },
  horizontalProfile: {
    cutEyeLengthMeters: 100,
  },
}
</script>

<template>
  <button type="button" @click="figureRef?.resume()">开始播放</button>

  <GasExtractionGoldenPeriods
    ref="figureRef"
    :figure-config="figureConfig"
  />
</template>

Props

| Prop | 类型 | 说明 | | --- | --- | --- | | strataConfig | Array | 地层配置。未传时使用内置地层。数组顺序为自下而上。 | | plotData | Object | 初始曲线数据段。传入后启用数据驱动模式。 | | zoneConfig | Object | 默认演示模式的 L 分区阈值配置。 | | figureConfig | Object | 动画、视口、煤层、曲线、切眼、布局和显隐配置。 |

strataConfig

每一项表示一个地层，可配置字段：

{
  name: '粉砂岩',
  type: 'wanqu', // meiceng | suipo | kualuo | wanqu
  height: 5,
  color: '#F0ECD8',
  texture: '粉砂岩',
  blockLength: 15, // kualuo：垮落块段长度
  fractureEnabled: true, // wanqu：是否显示裂隙
  fractureDensity: 20, // wanqu：裂隙密度
  rocks: {}, // suipo：碎岩显示参数
}

zoneConfig

默认值：

{
  l2LengthMeters: 60,
  l3MaxLengthMeters: 100,
  l4ShowStartMeters: 100,
  l4MaxLengthMeters: 50,
}

| 字段 | 说明 | | --- | --- | | l2LengthMeters | L2 增压区长度。 | | l3MaxLengthMeters | L3 卸压区最大长度。 | | l4ShowStartMeters | L4 压实区开始出现的推进距离。 | | l4MaxLengthMeters | L4 压实区最大长度。 |

zoneConfig 只在未传 plotData 的默认演示模式下用于计算分区。数据驱动模式下，L2、L3、L4 使用当前曲线帧插值后的 nodes 分界节点。

figureConfig

完整默认配置：

{
  animation: {
    autoPlay: false,
    advanceSpeed: 3,
    initialFaceMeters: 0,
    recoveryEndMeters: undefined,
  },
  viewport: {
    workfaceLengthMeters: 1000,
    positionMarkerStepMeters: 100,
    viewportLengthMeters: 350,
    scrollStartMeters: 150,
  },
  coal: {
    leadingGapMeters: 24,
    startXOffset: 22,
    bodyExtraLeftOffset: 12,
    cutterTargetHeight: 20,
    cutterXOffset: 10,
    cutterYOffset: 1.5,
    cutterMaxGapRatio: 0.94,
    cutterAspectRatio: 1.8,
    cutterVerticalOffsetRatio: 0.35,
  },
  stressCurve: {
    compactionStartOffsetMeters: -150,
    goafStartOffsetMeters: -100,
    frontEndOffsetMeters: 60,
    horizontalShiftMeters: -8,
    recoveryLengthMeters: 100,
    peakOffsetRatio: 0.45,
    compactionRatio: 0.84,
    goafBaseRatio: 0.8,
    goafWaveRatio: 0.04,
    peakRatio: 1.45,
  },
  horizontalProfile: {
    cutEyeLengthMeters: 100,
  },
  layout: {
    longitudinalProfileOffsetY: 40,
    horizontalProfileOffsetY: 350,
    profileStackBottomY: 180,
  },
  display: {
    longitudinalProfile: true,
    curveArea: true,
    horizontalProfile: true,
  },
}

常用字段说明：

| 字段 | 说明 | | --- | --- | | animation.autoPlay | 是否自动播放，默认 false。 | | animation.advanceSpeed | 推进速度，单位为米/秒。 | | animation.initialFaceMeters | 初始推进距离，单位为米。 | | animation.recoveryEndMeters | 回采终点，单位为米。动画推进到该位置后停止，最大值为工作面总推进长度；未传时保持原有播放行为。 | | viewport.workfaceLengthMeters | 工作面总推进长度，单位为米。不是横向切眼长度。 | | viewport.viewportLengthMeters | 走向剖面的可见推进长度，单位为米。 | | viewport.positionMarkerStepMeters | 米数刻度间隔，单位为米。 | | horizontalProfile.cutEyeLengthMeters | 工作面切眼长度，控制横向剖面中采面风巷到采面运巷的距离及采空区宽度，单位为米。 | | display.* | 控制走向剖面、应力曲线区和横向剖面的显示。 |

coal、stressCurve 与 layout 用于高级视觉和曲线调整；未传时保留默认效果。

plotData 数据驱动模式

传入 plotData 后：

• 红色应力曲线使用相邻数据帧线性插值；
• L2、L3、L4 根据插值后的 nodes 分界节点变化；
• 工作面、覆岩、采空区仍按连续推进距离计算；
• 曲线数据可分段追加，避免一次加载大量帧。

初始数据结构：

const plotData = {
  advance_step: 0.5,
  x_axis: [0, 0.5, 1],
  frames: [
    {
      advance_dist: 100,
      coal_wall_pos: 100,
      sigma_0: 10,
      y_curve: [10, 10.1, 10.2],
      nodes: {
        x1_old_compaction_boundary: 20,
        x2_goaf_transition_point: 65,
        x3_coal_wall: 100,
        x4_advance_boundary: 165,
        x5_original_stress_boundary: 200,
      },
    },
  ],
}

事件

progress

组件每次推进时触发，宿主可据此决定何时请求下一段曲线数据。

<GasExtractionGoldenPeriods @progress="handleProgress" />

function handleProgress({
  advanceMeters,
  bufferStartMeters,
  bufferEndMeters,
  isWaitingForData,
}) {
  // 当前推进距离
  console.log(advanceMeters)

  // 例如接近缓存末尾时，请求下一段数据
  if (advanceMeters >= bufferEndMeters - 100 && !isWaitingForData) {
    // loadNextPlotData()
  }
}

| 字段 | 说明 | | --- | --- | | advanceMeters | 当前实时推进距离。 | | bufferStartMeters | 当前曲线帧缓存起点；默认演示模式为 null。 | | bufferEndMeters | 当前曲线帧缓存终点；默认演示模式为 null。 | | isWaitingForData | 是否已播到缓存末尾并等待宿主追加下一段数据。 |

实例方法

通过 ref 可调用以下方法：

| 方法 | 返回值 | 说明 | | --- | --- | --- | | pause() | void | 暂停播放。 | | resume() | void | 开始或恢复播放。 | | toggle() | void | 切换播放与暂停。 | | reset() | void | 回到初始推进位置。 | | appendPlotData(chunk) | boolean | 追加一段 plotData，成功时返回 true。 | | seek(advanceMeters) | boolean | 跳转到当前缓存范围内的位置；目标未缓存时返回 false。 |

<script setup>
import { ref } from 'vue'
import { GasExtractionGoldenPeriods } from 'gas-extraction-golden-periods'

const figureRef = ref(null)

function jumpTo100Meters() {
  const isSeeked = figureRef.value?.seek(100)

  if (!isSeeked) {
    // 当前缓存中没有 100 米数据，先请求对应数据段
  }
}
</script>

<template>
  <GasExtractionGoldenPeriods ref="figureRef" />
  <button type="button" @click="figureRef?.toggle()">播放 / 暂停</button>
  <button type="button" @click="jumpTo100Meters">跳转至 100 米</button>
</template>

分段追加曲线数据

大数据量场景下，先传入当前播放所需的初始数据段；宿主随后在合适时机追加下一段。

async function loadNextPlotData() {
  const nextPlotData = await fetchPlotData({
    startAdvanceMeters: 500,
    endAdvanceMeters: 1000,
  })

  figureRef.value?.appendPlotData({
    startAdvanceMeters: 500,
    endAdvanceMeters: 1000,
    plotData: nextPlotData,
  })
}

追加规则：

• 组件按 frames[].advance_dist 合并数据；
• 两段数据在 500m 等边界位置存在重复帧时，组件会自动去重；
• 追加不会重置当前推进位置或动画进度；
• 播放到当前缓存末尾而新数据未到时，组件会停在末帧等待；
• 新数据追加成功后，组件自动恢复播放。

构建

构建组件库：

npm run build:lib