kd-lane-chart-v3 0.0.1

package/README.md

@@ -0,0 +1,170 @@
+# kd-lane-chart
+
+泳道图（KdLaneContainer）+ 实时曲线（frameLayout）Vue 2 组件包。
+
+> **注意：** 旧包 `kd-lane-container` 和 `kd-curve-v2` 已不再推荐使用，请迁移至此统一包。
+
+---
+
+## 安装
+
+```bash
+npm install kd-lane-chart
+```
+
+### 依赖
+
+| 依赖 | 版本 |
+|---|---|
+| vue | ^2.6.0 |
+| element-ui | ^2.15.14 |
+| echarts | * |
+| vuedraggable | ^2.24.3 |
+| v-click-outside | ^2.1.3 |
+| resize-detector | ^0.3.0 |
+| lodash-es | ^4.18.1 |
+
+---
+
+## 快速开始
+
+```js
+import Vue from "vue";
+import { KdLaneContainer, frameLayout } from "kd-lane-chart";
+
+// 全局注册（也可按需单独注册）
+Vue.use(KdLaneContainer);
+Vue.use(frameLayout);
+```
+
+或在组件内局部使用：
+
+```js
+import { KdLaneContainer, frameLayout } from "kd-lane-chart";
+
+export default {
+  components: {
+    KdLaneContainer,
+    frameLayout,
+  },
+};
+```
+
+---
+
+## KdLaneContainer（泳道图）
+
+泳道图组件，用于展示钻井相关的车道数据。
+
+### 基本用法
+
+```vue
+<template>
+  <kd-lane-container
+    :config="config"
+    :datas="datas"
+    theme-name="dark"
+  />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      config: { /* 泳道图配置 */ },
+      datas: { /* 数据 */ },
+    };
+  },
+};
+</script>
+```
+
+### Props
+
+| 参数 | 类型 | 说明 |
+|---|---|---|
+| config | Object | 泳道图配置 |
+| datas | Object | 数据 |
+| themeName | String | 主题：`white` / `dark` / `gray` |
+
+---
+
+## frameLayout（实时曲线）
+
+实时曲线图表容器，支持井深/时间两种曲线类型、实时/历史数据、多主题、滚动加载等。
+
+### 基本用法
+
+```vue
+<template>
+  <frame-layout
+    ref="frameLayout"
+    :depthConfig="depthConfig"
+    :timeConfig="timeConfig"
+    :curveDatas="curveDatas"
+    :themeName="themeName"
+    :toolBarConfig="toolBarConfig"
+    :parameterPanelConfig="parameterPanelConfig"
+    :WellBitDepthTimePlotConfig="WellBitDepthTimePlotConfig"
+    :warningData="warningData"
+    @template-change="onTemplateChange"
+    @line-change="onLineChange"
+    @chart-scroll="onChartScroll"
+    @updateSettings="onUpdateSettings"
+    @visibleDataChange="onVisibleDataChange"
+    @dialogFunction="onDialog"
+    @refresh="onRefresh"
+  >
+    <template v-for="lane in headerSlotName" :slot="lane.laneId">
+      <div class="header-slot">{{ lane.laneName }}</div>
+    </template>
+    <template v-for="lane in contentSlotName" :slot="lane.laneId">
+      <div class="content-slot">
+        <resizeEcharts autoresize :options="contentSlotOptions[lane.contentKey]" />
+      </div>
+    </template>
+  </frame-layout>
+</template>
+```
+
+### Props
+
+| 参数 | 类型 | 说明 |
+|---|---|---|
+| depthConfig | Object | 井深配置（templates、params） |
+| timeConfig | Object | 时间配置（templates、params） |
+| curveDatas | Object | 曲线数据，`{ type: "replace" / "append", data: [...] }` |
+| themeName | String | 主题：`white` / `dark` / `gray` |
+| toolBarConfig | Object | 工具栏配置 |
+| parameterPanelConfig | Object | 参数面板配置 |
+| WellBitDepthTimePlotConfig | Object | 井深-钻头-时间曲线面板配置 |
+| warningData | Array | 预警数据 |
+
+### 事件
+
+| 事件 | 参数 | 说明 |
+|---|---|---|
+| @template-change | data | 模板变更 |
+| @line-change | line | 曲线变更 |
+| @chart-scroll | { direction, currentData } | 图表滚动（方向 top/bottom） |
+| @updateSettings | { key, value, settings } | 设置变更 |
+| @visibleDataChange | { firstValue, lastValue } | 可见数据范围变更 |
+| @dialogFunction | { type, start, end } | 弹窗（1-井深段，2-时间段，3-导出） |
+| @refresh | — | 刷新 |
+| @onCustomMenuClicked | — | 自定义菜单点击 |
+
+### 曲线数据格式
+
+```js
+// 初始化/替换数据
+curveDatas: { type: "replace", data: [...] }
+
+// 追加数据（实时更新）
+curveDatas: { type: "append", data: generator() }
+```
+
+---
+
+## License
+
+MIT