kd-lane-container 0.0.1 → 0.0.3

package/README.md

@@ -1,406 +1,502 @@
-# KdLaneChartContainer 组件使用文档
-
-## 1. 组件概述
-
-KdLaneChartContainer 是一个基于 Vue 开发的泳道图容器组件，用于展示和管理泳道模板、线条配置等。
-
-### 1.1 设计思路
-- **逻辑分离**：将模板、泳道、参数的设置逻辑和绘制逻辑完全剥离，提高组件的可维护性和扩展性
-- **接口兼容**：提供了不依赖接口但是兼容接口实现的模板配置逻辑，既支持本地静态数据直接使用，也支持对接后端接口
-- **使用场景**：
-  - 适合静态数据展示场景，无需后端接口即可运行
-  - 适合合作单位使用，提供灵活的数据接入方式
-- **技术栈无关**：不限制绘制区技术栈，绘制逻辑完全由外部实现，只需要监听组件事件即可动态调整绘制内容
-
-## 2. 组件功能
-
-## 2. 组件功能
-
-- 加载和展示泳道模板
-- 支持自定义泳道头部
-- 提供上下文菜单操作
-- 支持自定义菜单扩展
-- 实时曲线配置功能
-- 模板和线条的增删改查操作
-
-## 3. 组件引入
-
-```javascript
-import KdLaneChartContainer from "./components/kd-lane/chart-container.vue";
-
-export default {
-  components: {
-    KdLaneChartContainer,
-  },
-  // ...
-};
-```
-
-## 4. 组件使用
-
-### 4.1 基本使用
-
-```vue
-<KdLaneChartContainer class="container" :config="config" :customMenuList="customMenuList" @onCustomMenuClicked="onCustomMenuClicked">
-  <!-- 自定义插槽内容 -->
-</KdLaneChartContainer>
-```
-
-### 4.1 场景与版本控制
-
-#### 4.1.1 场景唯一标识规则
-- **caseId (场景ID)**：用于唯一标识不同的应用场景或业务模块。
-  - 必须确保在同一应用中唯一，否则会导致数据混淆。
-  - 建议使用业务模块名称或唯一的UUID。
-  - 所有数据操作都将与该场景ID绑定，确保数据隔离。
-
-#### 4.1.2 版本号管理
-- **versionCode (版本号)**：用于管理不同版本的初始配置。
-  - 当业务需求发生重大变更时，可以通过升级版本号来重置数据。
-  - 版本号升级后，系统会自动清理旧版本数据并重新初始化。
-  - 版本号必须为整数，建议从1开始递增。
-
-#### 4.1.3 数据初始化策略
-- 首次初始化：系统会将传入的`dataSource`保存为当前版本的初始配置。
-- 版本冲突：当检测到版本号变更时，系统会自动重置数据并使用新版本的配置。
-- 异常恢复：如果初始化过程中出现错误，系统会自动执行重置操作。
-
-### 4.2 配置参数
-
-#### 4.2.1 本地数据源 (Local)
-
-```javascript
-config: {
-  type: "local", // 数据源类型，可选值: "local" | "custom"
-  caseId: "demo", // 案例ID
-  versionCode: 2, // 版本号
-  dataSource: { // 数据源
-    // 支持两种数据结构：
-    
-    // 1. 扁平结构 (推荐用于数据量大的场景)
-    templates: [], // 模板数据
-    lanes: [], // 泳道数据
-    lines: [], // 线条数据
-    params: [] // 参数数据
-    
-    // 2. 树形结构 (直观易读，不用关心数据ID，组件会自己补全和维护)
-    // templates: [{
-    //   lanes: [{
-    //     lines: []
-    //   }]
-    // }],
-    // params: []
-  }
-}
-```
-
-#### 4.2.2 自定义数据源 (Custom)
-
-当需要从服务器或自定义数据源获取和管理数据时，使用 `custom` 类型。需要实现以下CRUD方法：
-
-```javascript
-config: {
-  type: "custom", // 数据源类型，可选值: "local" | "custom"
-  caseId: "demo", // 案例ID
-  versionCode: 2, // 版本号
-  
-  // 自定义数据源必须实现的方法
-  getUserTemplates() { /* 加载所有模板、泳道和线条数据 */ },
-  upsertTemplate(data) { /* 新增或更新模板 */ },
-  delTemplate(data) { /* 删除模板 */ },
-  upsertLane(data) { /* 新增或更新泳道 */ },
-  delLane(data) { /* 删除泳道 */ },
-  upsertLine(data) { /* 新增或更新线条 */ },
-  delLine(data) { /* 删除线条 */ },
-  
-  // 可选方法：恢复默认设置
-  restoreSetting() { /* 恢复默认设置 */ }
-}
-```
-
-各方法参数和返回值说明：
-
-1. `getUserTemplates()`
-   - 返回值：`Promise<Object>` - 包含所有模板、泳道和线条数据的配置对象
-   - 示例：
-     ```json
-     {
-       "caseVersion": { "caseId": "case123", "versionCode": "v1.0" },
-       "templates": [/* 模板数组 */],
-       "params": []
-     }
-     ```
-
-2. `upsertTemplate(data)`
-   - 参数：`data` - 模板数据
-   - 返回值：`Promise<Object>` - 插入或更新后的完整模板对象
-
-3. `delTemplate(data)`
-   - 参数：`data` - 模板数据（需包含`templateId`）
-   - 返回值：`Promise<void>` - 操作成功或失败的Promise
-
-4. `upsertLane(data)`
-   - 参数：`data` - 泳道数据
-   - 返回值：`Promise<Object>` - 插入或更新后的完整泳道对象
-
-5. `delLane(lane)`
-   - 参数：`lane` - 泳道数据（需包含`laneId`和`lines`数组）
-   - 返回值：`Promise<void>` - 操作成功或失败的Promise
-
-6. `upsertLine(data)`
-   - 参数：`data` - 线条数据
-   - 返回值：`Promise<Object>` - 插入或更新后的完整线条对象
-
-7. `delLine(data)`
-   - 参数：`data` - 线条数据（需包含`lineId`和`laneId`）
-   - 返回值：`Promise<void>` - 操作成功或失败的Promise
-
-8. `restoreSetting()` (可选)
-   - 返回值：`Promise<void>` - 恢复默认设置的Promise
-
-### 4.3 自定义菜单
-
-customMenuList用于在上下文菜单中添加自定义操作选项。当用户在泳道头部或线条上右键点击时，这些自定义选项会出现在上下文菜单中。
-
-#### 4.3.1 菜单结构
-```javascript
-customMenuList: [
-  { 
-    name: "单屏时长", // 菜单项显示名称
-    key: "timeRange" // 菜单项唯一标识
-  },
-  { 
-    name: "导出数据", 
-    key: "exportData" 
-  }
-];
-```
-
-#### 4.3.2 点击事件
-当用户点击自定义菜单项时，会触发 `onCustomMenuClicked` 事件，并传递以下参数：
-- `event`: 事件对象，包含 `option` 和 `item` 属性
-  - `option`: 被点击的菜单项配置
-  - `item`: 右键点击时的目标对象（可能是泳道或线条）
-
-#### 4.3.3 使用示例
-```html
-<kd-lane-chart-container
-  :customMenuList=\"[{ name: '单屏时长', key: 'timeRange' }]\"
-  @onCustomMenuClicked=\"handleCustomMenuClick\">
-</kd-lane-chart-container>
-```
-
-```javascript
-handleCustomMenuClick(event) {
-  const { option, item } = event;
-  console.log('自定义菜单项被点击:', option.name);
-  console.log('点击的目标对象:', item);
-  
-  if (option.key === 'timeRange') {
-    // 处理单屏时长操作
-  }
-}
-```
-
-## 5. 组件 API
-
-### 5.1 Props
-
-| 属性名           | 类型   | 默认值 | 说明             |
-| ---------------- | ------ | ------ | ---------------- |
-| config           | Object | 必填   | 组件配置对象     |
-| headerPadding    | Number | 4      | 泳道头部内边距   |
-| headerItemHeight | Number | 20     | 头部线条项高度   |
-| itemGap          | Number | 2      | 线条项之间的间距 |
-| customMenuList   | Array  | []     | 自定义菜单列表   |
-
-### 5.2 事件
-
-| 事件名              | 参数     | 说明               |
-| ------------------- | -------- | ------------------ |
-| onCustomMenuClicked | event    | 自定义菜单点击事件 |
-| line-change         | line     | 线条变化事件       |
-| template-change     | template | 模板变化事件       |
-
-### 5.3 方法
-
-组件内部提供的方法主要用于模板和线条的管理：
-
-- upsertTemplate(data) - 新增或更新模板
-  - 参数：`data` - 模板数据
-  - 返回值：`Promise<Object>` - 插入或更新后的**完整**模板对象
-
-- delTemplate(data) - 删除模板
-  - 参数：`data` - 模板数据（需包含`templateId`）
-  - 返回值：`Promise<void>` - 操作成功或失败的Promise
-
-- upsertLane(data) - 新增或更新泳道
-  - 参数：`data` - 泳道数据
-  - 返回值：`Promise<Object>` - 插入或更新后的**完整**泳道对象
-
-- delLane(lane) - 删除泳道
-  - 参数：`lane` - 泳道数据（需包含`laneId`和`lines`数组）
-  - 返回值：`Promise<void>` - 操作成功或失败的Promise
-
-- upsertLine(data) - 新增或更新线条
-  - 参数：`data` - 线条数据
-  - 返回值：`Promise<Object>` - 插入或更新后的**完整线**条对象
-
-- delLine(data) - 删除线条
-  - 参数：`data` - 线条数据（需包含`lineId`和`laneId`）
-  - 返回值：`Promise<void>` - 操作成功或失败的Promise
-
-- restoreSetting() - 恢复默认设置
-  - 功能：将当前场景的数据重置为初始配置状态
-  - 实现逻辑：使用构造函数传入的初始dataSource重新初始化数据
-  - 返回值：`Promise<void>` - 恢复默认设置的Promise
-
-## 6. 自定义插槽
-
-组件支持根据泳道 ID 动态生成的插槽，用于自定义泳道头部：
-
-```vue
-<KdLaneChartContainer ...>
-  <!-- 动态slot名称 -->
-  <template v-if="slotName">
-    <div :slot="slotName" class="demo-slot">
-      {{ slotName }}
-    </div>
-  </template>
-  
-  <!-- 带参数的插槽 -->
-  <template v-if="slotName2" :slot="slotName2" slot-scope="slotData">
-    <div class="demo-slot">{{ typeof slotData }}</div>
-  </template>
-</KdLaneChartContainer>
-```
-
-插槽名称格式为 `lane${laneId}`，例如：`lane1556bdbfd0f24c11948b14999947c556`。
-
-### 6.2 draw-slot 画布插槽
-
-组件提供 `draw-slot` 插槽用于自定义绘制内容，该插槽占据泳道下方的整个绘制区域：
-
-```vue
-<KdLaneChartContainer ...>
-  <template slot="draw-slot">
-    <div style="height: 100%; width: 100%; padding: 10px">
-      <!-- 自定义绘制内容 -->
-    </div>
-  </template>
-</KdLaneChartContainer>
-```
-
-### 6.3 插槽布局与尺寸注意事项
-
-1. **布局方式**：
-   - 自定义插槽与泳道区域采用 flex 布局
-   - 自定义插槽会占据剩余位置后，与其他泳道进行平分
-   - 确保自定义插槽内容的宽度和高度设置正确，以保证与泳道对齐
-
-2. **尺寸单位**：
-   - 组件内的自定义插槽使用 style 绑定形式
-   - 宽度和高度单位必须使用 px，以确保精确对齐
-   - 避免使用其他单位（如 %、rem、em 等），否则可能导致布局错位
-
-3. **样式处理**：
-   - 不要使用全局样式处理插件对自定义插槽的尺寸单位进行转换
-   - 直接使用 px 单位编写插槽内容的尺寸样式
-   - 确保插槽内容的 box-sizing 为 border-box，以避免 padding 和 border 影响实际尺寸
-
-```vue
-<!-- 推荐的插槽内容样式 -->
-<template slot="draw-slot">
-  <div style="height: 100%; width: 100%; box-sizing: border-box; padding: 10px">
-    <!-- 自定义绘制内容 -->
-  </div>
-</template>
-```
-
-## 7. 样式定制
-
-可以通过 CSS 变量或直接覆盖样式来自定义组件外观：
-
-```css
-.kd-lane-chart-container {
-  --kd-lane-container-border-color: white;
-  --kd-lane-container-context-background-color: darkgray;
-  --kd-lane-container-context-hover-color: darkgray;
-  --kd-lane-container-header-item-color: white;
-  --app-background-color: gray;
-}
-```
-
-## 8. 使用示例
-
-```vue
-<template>
-  <div id="app">
-    <KdLaneChartContainer class="container" :config="config" :customMenuList="customMenuList" @onCustomMenuClicked="onCustomMenuClicked">
-      <template v-if="slotName">
-        <div :slot="slotName" class="demo-slot">
-          {{ slotName }}
-        </div>
-      </template>
-    </KdLaneChartContainer>
-  </div>
-</template>
-
-<script>
-import KdLaneChartContainer from "./components/kd-lane/chart-container.vue";
-import { data } from "./mock/mockData.js";
-
-export default {
-  name: "App",
-  components: {
-    KdLaneChartContainer,
-  },
-  data() {
-    return {
-      config: {
-        type: "local",
-        caseId: "demo",
-        versionCode: 2,
-        dataSource: { templates: data.templates, lanes: data.lanes, lines: data.lines, params: data.params },
-      },
-      slotName: "",
-      customMenuList: [{ name: "单屏时长", key: "timeRange" }],
-    };
-  },
-  mounted() {
-    setTimeout(() => {
-      this.slotName = "lane1556bdbfd0f24c11948b14999947c556";
-    }, 2000);
-  },
-  methods: {
-    onCustomMenuClicked(event) {
-      console.log(event);
-    },
-  },
-};
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  height: 100vh;
-  position: relative;
-  padding: 10px;
-
-  .container {
-    margin-left: 100px;
-    margin-top: 50px;
-    height: 600px;
-    width: 800px;
-  }
-
-  .demo-slot {
-    width: 80px;
-  }
-}
-</style>
-```
+# KdLaneChartContainer 组件使用文档
+
+## 1. 组件概述
+
+KdLaneChartContainer 是一个基于 Vue 开发的泳道图容器组件，用于展示和管理泳道模板、线条配置等。
+
+### 1.1 设计思路
+
+- **逻辑分离**：将模板、泳道、参数的设置逻辑和绘制逻辑完全剥离，提高组件的可维护性和扩展性
+- **接口兼容**：提供了不依赖接口但是兼容接口实现的模板配置逻辑，既支持本地静态数据直接使用，也支持对接后端接口
+- **使用场景**：
+  - 适合静态数据展示场景，无需后端接口即可运行
+  - 适合合作单位使用，提供灵活的数据接入方式
+- **技术栈无关**：不限制绘制区技术栈，绘制逻辑完全由外部实现，只需要监听组件事件即可动态调整绘制内容
+
+## 2. 组件功能
+
+- 加载和展示泳道模板
+- 支持自定义泳道头部
+- 提供上下文菜单操作
+- 支持自定义菜单扩展
+- 实时曲线配置功能
+- 模板和线条的增删改查操作
+
+## 3. 组件引入
+
+### 3.1 安装与注册
+
+```javascript
+// 安装依赖
+// npm install kd-lane-container --save
+
+// 引入组件
+import KdLaneChartContainer from "kd-lane-container";
+import Vue from "vue";
+
+// 注册组件
+Vue.use(KdLaneChartContainer);
+```
+
+### 3.2 在组件中使用
+
+```javascript
+export default {
+  // 组件已全局注册，无需再局部注册
+  // components: {},
+  // ...
+};
+```
+
+## 4. 组件使用
+
+### 4.1 基本使用
+
+```vue
+<KdLaneChartContainer class="container" :config="config" :customMenuList="customMenuList" @onCustomMenuClicked="onCustomMenuClicked">
+  <!-- 自定义插槽内容 -->
+</KdLaneChartContainer>
+```
+
+### 4.2 场景与版本控制
+
+#### 4.1.1 场景唯一标识规则
+
+- **caseId (场景 ID)**：用于唯一标识不同的应用场景或业务模块。
+  - 必须确保在同一应用中唯一，否则会导致数据混淆。
+  - 建议使用业务模块名称或唯一的 UUID。
+  - 所有数据操作都将与该场景 ID 绑定，确保数据隔离。
+
+#### 4.1.2 版本号管理
+
+- **versionCode (版本号)**：用于管理不同版本的初始配置。
+  - 当业务需求发生重大变更时，可以通过升级版本号来重置数据。
+  - 版本号升级后，系统会自动清理旧版本数据并重新初始化。
+  - 版本号必须为整数，建议从 1 开始递增。
+
+#### 4.1.3 数据初始化策略
+
+- 首次初始化：系统会将传入的`dataSource`保存为当前版本的初始配置。
+- 版本冲突：当检测到版本号变更时，系统会自动重置数据并使用新版本的配置。
+- 异常恢复：如果初始化过程中出现错误，系统会自动执行重置操作。
+
+### 4.2 配置参数
+
+#### 4.2.1 数据源类型选择说明
+
+KdLaneChartContainer 支持两种数据源类型：
+
+- **local**：无后台配置接口，仅需前端单方面维护配置时使用
+- **custom**：需要本组件 + 后台实时曲线配置接口组合使用时使用
+
+#### 4.2.2 本地数据源 (Local)
+
+```javascript
+config: {
+  type: "local", // 数据源类型，可选值: "local" | "custom"
+  caseId: "demo", // 案例ID
+  versionCode: 2, // 版本号
+  dataSource: { // 数据源
+    // 支持两种数据结构：
+
+    // 1. 扁平结构 (推荐用于数据量大的场景)
+    templates: [], // 模板数据
+    lanes: [], // 泳道数据
+    lines: [], // 线条数据
+    params: [] // 参数数据
+
+    // 2. 树形结构 (直观易读，不用关心数据ID，组件会自己补全和维护)
+    // templates: [{
+    //   lanes: [{
+    //     lines: []
+    //   }]
+    // }],
+    // params: []
+  }
+}
+```
+
+**local 模式下 datasource 参数说明：**
+
+- **templates**：只需提供 `templateName` 属性
+- **lane**：不需要提供任何属性
+- **line**：需要提供以下属性：`paramId`, `min`, `lineSort`, `max`, `lineSize`, `lineColor`, `lineType`, `isUsed`
+  示例：`{ paramId: "51", min: 0.001, lineSort: 1, max: 100, lineSize: "2", lineColor: "#E5360B", lineType: "solid", isUsed: "1" }`
+- **params**：需要提供以下属性：`paramId`, `paramName`, `paramUnit`
+  示例：`{ paramId: "12", paramName: "钻头位置", paramUnit: "m" }`
+
+**完整 local 模式示例配置：**
+
+```javascript
+config: {
+  type: "local",
+  caseId: "demo",
+  versionCode: 2,
+  dataSource: {
+    // 嵌套结构示例
+    templates: [
+      { 
+        templateName: "测试",
+        lanes: [
+          {
+            lines: [
+              { paramId: "51", min: 0.001, lineSort: 1, max: 100, lineSize: "2", lineColor: "#E5360B", lineType: "solid", isUsed: "1" },
+              { paramId: "52", min: 0, lineSort: 2, max: 50, lineSize: "1", lineColor: "#1890FF", lineType: "dashed", isUsed: "1" }
+            ]
+          }
+        ]
+      }
+    ],
+    params: [
+      { paramId: "51", paramName: "钻头位置", paramUnit: "m" },
+      { paramId: "52", paramName: "钻压", paramUnit: "kN" }
+    ]
+  }
+}
+```
+
+#### 4.2.3 自定义数据源 (Custom)
+
+```javascript
+config: {
+  type: "custom", // 数据源类型，可选值: "local" | "custom"
+  caseId: "demo", // 案例ID
+  versionCode: 2, // 版本号
+
+  // 自定义数据源必须实现的7个方法，需按照要求的返回格式设置
+  getUserTemplates() { /* 加载所有模板、泳道和线条数据 */ },
+  upsertTemplate(data) { /* 新增或更新模板 */ },
+  delTemplate(data) { /* 删除模板 */ },
+  upsertLane(data) { /* 新增或更新泳道 */ },
+  delLane(data) { /* 删除泳道 */ },
+  upsertLine(data) { /* 新增或更新线条 */ },
+  delLine(data) { /* 删除线条 */ },
+
+  // 可选方法：恢复默认设置
+  restoreSetting() { /* 恢复默认设置 */ }
+}
+```
+
+各方法参数和返回值说明：
+
+1. `getUserTemplates()`
+
+   - 返回值：`Promise<Object>` - 包含所有模板、泳道和线条数据的配置对象
+   - 示例：
+     ```json
+     {
+       "caseVersion": { "caseId": "case123", "versionCode": "v1.0" },
+       "templates": [
+         /* 模板数组 */
+       ],
+       "params": []
+     }
+     ```
+
+2. `upsertTemplate(data)`
+
+   - 参数：`data` - 模板数据
+   - 返回值：`Promise<Object>` - 插入或更新后的完整模板对象
+
+3. `delTemplate(data)`
+
+   - 参数：`data` - 模板数据（需包含`templateId`）
+   - 返回值：`Promise<void>` - 操作成功或失败的 Promise
+
+4. `upsertLane(data)`
+
+   - 参数：`data` - 泳道数据
+   - 返回值：`Promise<Object>` - 插入或更新后的完整泳道对象
+
+5. `delLane(lane)`
+
+   - 参数：`lane` - 泳道数据（需包含`laneId`和`lines`数组）
+   - 返回值：`Promise<void>` - 操作成功或失败的 Promise
+
+6. `upsertLine(data)`
+
+   - 参数：`data` - 线条数据
+   - 返回值：`Promise<Object>` - 插入或更新后的完整线条对象
+
+7. `delLine(data)`
+
+   - 参数：`data` - 线条数据（需包含`lineId`和`laneId`）
+   - 返回值：`Promise<void>` - 操作成功或失败的 Promise
+
+8. `restoreSetting()` (可选)
+   - 返回值：`Promise<void>` - 恢复默认设置的 Promise
+
+### 4.3 自定义菜单
+
+customMenuList 用于在上下文菜单中添加自定义操作选项。当用户在泳道头部或线条上右键点击时，这些自定义选项会出现在上下文菜单中。
+
+#### 4.3.1 菜单结构
+
+```javascript
+customMenuList: [
+  {
+    name: "单屏时长", // 菜单项显示名称
+    key: "timeRange", // 菜单项唯一标识
+  },
+  {
+    name: "导出数据",
+    key: "exportData",
+  },
+];
+```
+
+#### 4.3.2 点击事件
+
+当用户点击自定义菜单项时，会触发 `onCustomMenuClicked` 事件，并传递以下参数：
+
+- `event`: 事件对象，包含 `option` 和 `item` 属性
+  - `option`: 被点击的菜单项配置
+  - `item`: 右键点击时的目标对象（可能是泳道或线条）
+
+#### 4.3.3 使用示例
+
+```html
+<kd-lane-chart-container
+  :customMenuList=\"[{ name: '单屏时长', key: 'timeRange' }]\"
+  @onCustomMenuClicked=\"handleCustomMenuClick\">
+</kd-lane-chart-container>
+```
+
+```javascript
+handleCustomMenuClick(event) {
+  const { option, item } = event;
+  console.log('自定义菜单项被点击:', option.name);
+  console.log('点击的目标对象:', item);
+
+  if (option.key === 'timeRange') {
+    // 处理单屏时长操作
+  }
+}
+```
+
+## 5. 组件 API
+
+### 5.1 Props
+
+| 属性名           | 类型   | 默认值 | 说明             |
+| ---------------- | ------ | ------ | ---------------- |
+| config           | Object | 必填   | 组件配置对象     |
+| headerPadding    | Number | 4      | 泳道头部内边距   |
+| headerItemHeight | Number | 20     | 头部线条项高度   |
+| itemGap          | Number | 2      | 线条项之间的间距 |
+| customMenuList   | Array  | []     | 自定义菜单列表   |
+
+### 5.2 事件
+
+| 事件名              | 参数     | 说明               |
+| ------------------- | -------- | ------------------ |
+| onCustomMenuClicked | event    | 自定义菜单点击事件 |
+| line-change         | line     | 线条变化事件       |
+| template-change     | template | 模板变化事件       |
+
+### 5.3 方法
+
+**注：以下方法仅在使用 `custom` 模式时需要了解和实现，local 模式下不需要考虑。**
+
+组件内部提供的方法主要用于模板和线条的管理：
+
+- upsertTemplate(data) - 新增或更新模板
+
+  - 参数：`data` - 模板数据
+  - 返回值：`Promise<Object>` - 插入或更新后的**完整**模板对象
+
+- delTemplate(data) - 删除模板
+
+  - 参数：`data` - 模板数据（需包含`templateId`）
+  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
+
+- upsertLane(data) - 新增或更新泳道
+
+  - 参数：`data` - 泳道数据
+  - 返回值：`Promise<Object>` - 插入或更新后的**完整**泳道对象
+
+- delLane(lane) - 删除泳道
+
+  - 参数：`lane` - 泳道数据（需包含`laneId`和`lines`数组）
+  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
+
+- upsertLine(data) - 新增或更新线条
+
+  - 参数：`data` - 线条数据
+  - 返回值：`Promise<Object>` - 插入或更新后的**完整线**条对象
+
+- delLine(data) - 删除线条
+
+  - 参数：`data` - 线条数据（需包含`lineId`和`laneId`）
+  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
+
+- restoreSetting() - 恢复默认设置
+  - 功能：将当前场景的数据重置为初始配置状态
+  - 实现逻辑：使用构造函数传入的初始 dataSource 重新初始化数据
+  - 返回值：`Promise<void>` - 恢复默认设置的 Promise
+
+## 6. 自定义插槽
+
+组件支持根据泳道 ID 动态生成的插槽，用于自定义泳道头部：
+
+```vue
+<KdLaneChartContainer ...>
+  <!-- 动态slot名称 -->
+  <template v-if="slotName">
+    <div :slot="slotName" class="demo-slot">
+      {{ slotName }}
+    </div>
+  </template>
+  
+  <!-- 带参数的插槽 -->
+  <template v-if="slotName2" :slot="slotName2" slot-scope="slotData">
+    <div class="demo-slot">{{ typeof slotData }}</div>
+  </template>
+</KdLaneChartContainer>
+```
+
+插槽名称格式为 `lane${laneId}`，例如：`lane1556bdbfd0f24c11948b14999947c556`。
+
+### 6.2 draw-slot 画布插槽
+
+组件提供 `draw-slot` 插槽用于自定义绘制内容，该插槽占据泳道下方的整个绘制区域：
+
+```vue
+<KdLaneChartContainer ...>
+  <template slot="draw-slot">
+    <div style="height: 100%; width: 100%; padding: 10px">
+      <!-- 自定义绘制内容 -->
+    </div>
+  </template>
+</KdLaneChartContainer>
+```
+
+### 6.3 插槽布局与尺寸注意事项
+
+1. **布局方式**：
+
+   - 自定义插槽与泳道区域采用 flex 布局
+   - 自定义插槽会占据剩余位置后，与其他泳道进行平分
+   - 确保自定义插槽内容的宽度和高度设置正确，以保证与泳道对齐
+
+2. **尺寸单位**：
+
+   - 组件内的自定义插槽使用 style 绑定形式
+   - 宽度和高度单位必须使用 px，以确保精确对齐
+   - 避免使用其他单位（如 %、rem、em 等），否则可能导致布局错位
+
+3. **样式处理**：
+   - 不要使用全局样式处理插件对自定义插槽的尺寸单位进行转换
+   - 直接使用 px 单位编写插槽内容的尺寸样式
+   - 确保插槽内容的 box-sizing 为 border-box，以避免 padding 和 border 影响实际尺寸
+
+```vue
+<!-- 推荐的插槽内容样式 -->
+<template slot="draw-slot">
+  <div style="height: 100%; width: 100%; box-sizing: border-box; padding: 10px">
+    <!-- 自定义绘制内容 -->
+  </div>
+</template>
+```
+
+## 7. 样式定制
+
+可以通过 CSS 变量或直接覆盖样式来自定义组件外观：
+
+```css
+.kd-lane-chart-container {
+  --kd-lane-container-border-color: white;
+  --kd-lane-container-context-background-color: darkgray;
+  --kd-lane-container-context-hover-color: darkgray;
+  --kd-lane-container-header-item-color: white;
+  --app-background-color: gray;
+}
+```
+
+## 8. 使用示例
+
+```vue
+<template>
+  <div id="app">
+    <KdLaneChartContainer class="container" :config="config" :customMenuList="customMenuList" @onCustomMenuClicked="onCustomMenuClicked">
+      <!-- 动态slot名称，这里全部使用的是旧语法 -->
+      <template v-if="slotName">
+        <div :slot="slotName" class="demo-slot">
+          {{ slotName }}
+        </div>
+      </template>
+      <template v-if="slotName2" :slot="slotName2" slot-scope="slotData">
+        <div class="demo-slot">{{ typeof slotData }}</div>
+      </template>
+    </KdLaneChartContainer>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import KdLaneChartContainer from "kd-lane-container";
+Vue.use(KdLaneChartContainer);
+import { data } from "./mock/mockData.js";
+export default {
+  name: "App",
+  components: {},
+  data() {
+    return {
+      config: {
+        type: "local",
+        caseId: "demo",
+        versionCode: 2,
+        // for with server
+        dataSource: { templates: data.templates, lanes: data.lanes, lines: data.lines, params: data.params },
+      },
+      slotName: "",
+      slotName2: "",
+      customMenuList: [{ name: "单屏时长", key: "timeRange" }],
+    };
+  },
+  mounted() {
+    setTimeout(() => {
+      this.slotName = "lane1556bdbfd0f24c11948b14999947c556";
+    }, 2000);
+  },
+  methods: {
+    onCustomMenuClicked(event) {
+      console.log(event);
+    },
+  },
+};
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  height: 100vh;
+  position: relative;
+  padding: 10px;
+
+  .container {
+    margin-left: 100px;
+    margin-top: 50px;
+    height: 600px;
+    width: 800px;
+  }
+
+  .demo-slot {
+    width: 80px;
+  }
+}
+
+/* 全局设置 box-sizing 为 border-box */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+</style>
+```

package/dist/cjs/index.js

@@ -2768,6 +2768,11 @@ var script$2 = {
       required: true,
       default: () => [],
     },
+    paramsNameMap: {
+      type: Object,
+      default: () => {},
+      required: true,
+    },
   },
   data() {
     return {
@@ -2788,6 +2793,16 @@ var script$2 = {
   },
   mounted() {},
   methods: {
+    getLineDataLabel(line) {
+      if (!line) {
+        return "";
+      }
+      const nameConfig = this.paramsNameMap[line.paramId];
+      if (!nameConfig) {
+        return line.paramId;
+      }
+      return nameConfig.paramName;
+    },
     setTargetData(targetData) {
       this.targetData = targetData;
       this.setExpanded();
@@ -3039,6 +3054,7 @@ var script$2 = {
             laneData.children = [];
             lane.lines.forEach((line) => {
               const lineData = { ...line, id: line.lineId, label: line.lineName || line.paramId };
+              lineData.label = this.getLineDataLabel(line);
               laneData.children.push(lineData);
             });
           });
@@ -3316,6 +3332,16 @@ var script$1 = {
     },
   },
   methods: {
+    getParamName(line) {
+      if (!line) {
+        return "";
+      }
+      const nameConfig = this.paramsNameMap[line.paramId];
+      if (!nameConfig) {
+        return "";
+      }
+      return `${nameConfig.paramName}${nameConfig.paramUnit}`;
+    },
     toggleIsUsed() {
       const temp = { ...this.line };
       if (temp.isUsed == "1" || temp.isUsed == 1) {
@@ -3373,9 +3399,7 @@ var __vue_render__$1 = function () {
         ]),
         _vm._v(" "),
         _c("span", { staticClass: "center" }, [
-          _vm._v(
-            _vm._s(_vm.paramsNameMap[_vm.line.paramId] || _vm.line.paramId)
-          ),
+          _vm._v(_vm._s(_vm.getParamName(_vm.line))),
         ]),
         _vm._v(" "),
         _c("span", { staticClass: "right", style: _vm.textColor }, [
@@ -3739,7 +3763,10 @@ var script = {
     paramsNameMap() {
       const result = {};
       for (const param of this.params) {
-        result[param.paramId] = param.paramName;
+        result[param.paramId] = {
+          paramName: param.paramName,
+          paramUnit: param.paramUnit,
+        };
       }
       return result;
     },
@@ -3951,6 +3978,7 @@ var __vue_render__ = function () {
                   inputTempates: _vm.treeTemplates,
                   caseId: _vm.strategy.caseId,
                   params: _vm.params,
+                  paramsNameMap: _vm.paramsNameMap,
                   contextItem: _vm.contextItem,
                 },
               },

package/dist/umd/index.min.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("v-click-outside"),require("vue")):"function"==typeof define&&define.amd?define(["v-click-outside","vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).KdLaneChartContainer=t(e.vClickOutside,e.Vue)}(this,function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(e),r=n(t);function s(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}function i(e,t,n,a,r,s,i,o,l,d){"boolean"!=typeof i&&(l=o,o=i,i=!1);var c,p="function"==typeof n?n.options:n;if(e&&e.render&&(p.render=e.render,p.staticRenderFns=e.staticRenderFns,p._compiled=!0,r&&(p.functional=!0)),a&&(p._scopeId=a),s?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},p._ssrRegister=c):t&&(c=i?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,o(e))}),c)if(p.functional){var m=p.render;p.render=function(e,t){return c.call(t),m(e,t)}}else{var h=p.beforeCreate;p.beforeCreate=h?[].concat(h,c):[c]}return n}s('.vue-simple-context-menu {\n  top: 0;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  display: none;\n  list-style: none;\n  position: absolute;\n  z-index: 1000000;\n  background-color: #ecf0f1;\n  border-bottom-width: 0px;\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n  box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.2);\n  border-radius: 4px;\n}\n.vue-simple-context-menu--active {\n  display: block;\n}\n.vue-simple-context-menu__item {\n  display: flex;\n  color: #333;\n  cursor: pointer;\n  padding: 5px 15px;\n  align-items: center;\n}\n.vue-simple-context-menu__item:hover {\n  background-color: #007aff;\n  color: #fff;\n}\n.vue-simple-context-menu__divider {\n  box-sizing: content-box;\n  height: 2px;\n  background-color: #c0cdd1;\n  padding: 4px 0;\n  background-clip: content-box;\n  pointer-events: none;\n}\n.vue-simple-context-menu li:first-of-type {\n  margin-top: 4px;\n}\n.vue-simple-context-menu li:last-of-type {\n  margin-bottom: 4px;\n}'),r.default.use(a.default);var o={name:"VueSimpleContextMenu",props:{elementId:{type:String,required:!0},options:{type:Array,required:!0}},data:function(){return{item:null,menuWidth:null,menuHeight:null}},methods:{showMenu:function(e,t){this.item=t;var n=document.getElementById(this.elementId);n&&(this.menuWidth&&this.menuHeight||(n.style.visibility="hidden",n.style.display="block",this.menuWidth=n.offsetWidth,this.menuHeight=n.offsetHeight,n.removeAttribute("style")),this.menuWidth+e.pageX>=window.innerWidth?n.style.left=e.pageX-this.menuWidth+2+"px":n.style.left=e.pageX-2+"px",this.menuHeight+e.pageY>=window.innerHeight?n.style.top=e.pageY-this.menuHeight+2+"px":n.style.top=e.pageY-2+"px",n.classList.add("vue-simple-context-menu--active"))},hideContextMenu:function(){var e=document.getElementById(this.elementId);e&&(e.classList.remove("vue-simple-context-menu--active"),this.$emit("menu-closed"))},onClickOutside:function(){this.hideContextMenu()},optionClicked:function(e){this.hideContextMenu(),this.$emit("option-clicked",{item:this.item,option:e})},onEscKeyRelease:function(e){27===e.keyCode&&this.hideContextMenu()}},mounted:function(){document.body.addEventListener("keyup",this.onEscKeyRelease)},beforeDestroy:function(){document.removeEventListener("keyup",this.onEscKeyRelease)}},l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("ul",{directives:[{name:"click-outside",rawName:"v-click-outside",value:e.onClickOutside,expression:"onClickOutside"}],staticClass:"vue-simple-context-menu",attrs:{id:e.elementId}},e._l(e.options,function(t,a){return n("li",{key:a,staticClass:"vue-simple-context-menu__item",class:[t.class,"divider"===t.type?"vue-simple-context-menu__divider":""],on:{click:function(n){return n.stopPropagation(),e.optionClicked(t)}}},[n("span",{domProps:{innerHTML:e._s(t.name)}})])}),0)])};l._withStripped=!0;var d=i({render:l,staticRenderFns:[]},undefined,o,undefined,false,undefined,!1,void 0,void 0,void 0);var c={install:function e(t){e.installed||(e.installed=!0,t.component("VueSimpleContextMenu",d))}},p=null;"undefined"!=typeof window?p=window.Vue:"undefined"!=typeof global&&(p=global.Vue),p&&p.use(c);class m{constructor(e){this.strategy=e}getUserTemplates(){return this.strategy.getUserTemplates()}upsertTemplate(e){return this.strategy.upsertTemplate(e)}delTemplate(e){return this.strategy.deleteTemplate(e)}upsertLane(e){return this.strategy.upsertLane(e)}delLane(e){return this.strategy.deleteLane(e)}upsertLine(e){return this.strategy.upsertLine(e)}delLine(e){return this.strategy.delLine(e)}restoreSetting(){return this.strategy.restoreSetting?this.strategy.restoreSetting():Promise.resolve()}}class h{static DB_NAME="KDLaneChartContainerConfigDB";static MAX_UNICODE_CHAR="￿";static DB_VERSION=2;static STORE_NAMES={TEMPLATES:"templates",LANES:"lanes",LINES:"lines",PARAMS:"params",CASE_VERSIONS:"case_versions"};_db=null;_openDB(){return new Promise((e,t)=>{if(this._db)return void e(this._db);const n=indexedDB.open(h.DB_NAME,h.DB_VERSION);n.onupgradeneeded=e=>{const t=e.target.result,{STORE_NAMES:n}=h;t.objectStoreNames.contains(n.CASE_VERSIONS)||t.createObjectStore(n.CASE_VERSIONS,{keyPath:"caseId"}),t.objectStoreNames.contains(n.TEMPLATES)||t.createObjectStore(n.TEMPLATES,{keyPath:["caseId","templateId"]}),t.objectStoreNames.contains(n.LANES)||t.createObjectStore(n.LANES,{keyPath:["caseId","laneId"]}),t.objectStoreNames.contains(n.LINES)||t.createObjectStore(n.LINES,{keyPath:["caseId","lineId"]}),t.objectStoreNames.contains(n.PARAMS)||t.createObjectStore(n.PARAMS,{keyPath:["caseId","paramId"]})},n.onsuccess=t=>{this._db=t.target.result,this._db.onclose=()=>{this._db=null},e(this._db)},n.onerror=e=>{t(new Error(`打开数据库失败：${e.target.error.message}`))},n.onblocked=()=>{t(new Error("数据库操作被阻塞，请关闭其他标签页后重试"))}})}closeDB(){return new Promise(e=>{this._db&&(this._db.close(),this._db=null),e()})}_compareVersion(e,t){const n=e=>String(e).split(".").map(Number),a=n(e),r=n(t),s=Math.max(a.length,r.length);for(let e=0;e<s;e++){const t=a[e]||0,n=r[e]||0;if(t>n)return 1;if(t<n)return-1}return 0}_clearSceneData(e){return this._openDB().then(t=>new Promise((n,a)=>{const r=t.transaction([h.STORE_NAMES.CASE_VERSIONS,h.STORE_NAMES.TEMPLATES,h.STORE_NAMES.LANES,h.STORE_NAMES.LINES,h.STORE_NAMES.PARAMS],"readwrite"),s=r.objectStore(h.STORE_NAMES.TEMPLATES),i=r.objectStore(h.STORE_NAMES.LANES),o=r.objectStore(h.STORE_NAMES.LINES),l=r.objectStore(h.STORE_NAMES.CASE_VERSIONS),d=r.objectStore(h.STORE_NAMES.PARAMS),c=IDBKeyRange.bound([e],[e,h.MAX_UNICODE_CHAR]);s.delete(c),i.delete(c),o.delete(c),d.delete(c),l.delete(e),r.oncomplete=()=>n(),r.onerror=e=>a(new Error(`事务失败：${e.target.error.message}`))}))}_promisifyRequest(e){return new Promise((t,n)=>{e.onsuccess=()=>t(e.result),e.onerror=()=>n(e.error)})}forceInitSceneConfig(e,t,n){return e&&t?this._clearSceneData(e).then(()=>{const a=this.setUpData(e,t,n);return this.batchAddConfig(a)}).catch(e=>{throw new Error(`强制初始化场景配置失败：${e.message}`)}):Promise.reject(new Error("caseId和versionCode为强制初始化的必传参数"))}setUpData(e,t,n){const a=n.templates.map(t=>({...t,caseId:e})),r=n.lanes.map(t=>({...t,caseId:e})),s=n.lines.map(t=>({...t,caseId:e})),i=n.params.map(t=>({...t,caseId:e}));return{caseVersion:{caseId:e,versionCode:t,updateTime:new Date},templates:a,lanes:r,lines:s,params:i}}checkConfigIntegrity(e,t){return this.getCaseVersionByCaseId(e).then(n=>!(!n||n.versionCode!==t)&&this.getTemplatesByCaseId(e).then(t=>{if(0===t.length)return!0;const n=t[0].templateId;return this.getLanesByTemplateId(e,n).then(t=>{if(0===t.length)return!0;const n=t[0].laneId;return this.getLinesByLaneId(e,n).then(e=>0===e.length)})}))}_initSceneConfig(e){const{caseVersion:t}=e,{caseId:n,versionCode:a}=t;return this.getCaseVersionByCaseId(n).then(t=>{if(!t)return this.batchAddConfig(e);const r=this._compareVersion(a,t.versionCode);if(r>0)return this._clearSceneData(n).then(()=>this.batchAddConfig(e));if(0===r)return console.log(`场景${n}已存在版本${a}，无需重复创建`),Promise.resolve(t);throw new Error(`场景${n}当前版本${t.versionCode}高于待创建版本${a}。`)})}saveSceneConfig(e,t,n){if(!e||!t)return Promise.reject(new Error("caseId和versionCode为必传参数"));if(!Array.isArray(n.templates)||!Array.isArray(n.lanes)||!Array.isArray(n.lines))return Promise.reject(new Error("templates/lanes/lines必须为数组"));const a=this.setUpData(e,t,n);return this._initSceneConfig(a)}batchAddConfig(e){return this._openDB().then(t=>new Promise((n,a)=>{const r=t.transaction([h.STORE_NAMES.CASE_VERSIONS,h.STORE_NAMES.TEMPLATES,h.STORE_NAMES.LANES,h.STORE_NAMES.LINES,h.STORE_NAMES.PARAMS],"readwrite");r.objectStore(h.STORE_NAMES.CASE_VERSIONS).put(e.caseVersion);const s=r.objectStore(h.STORE_NAMES.TEMPLATES);e.templates.forEach(e=>s.put(e));const i=r.objectStore(h.STORE_NAMES.LANES);e.lanes.forEach(e=>i.put(e));const o=r.objectStore(h.STORE_NAMES.LINES);e.lines.forEach(e=>o.put(e));const l=r.objectStore(h.STORE_NAMES.PARAMS);e.params.forEach(e=>l.put(e)),r.oncomplete=()=>n(e),r.onerror=e=>a(new Error(`批量添加配置失败：${e.target.error.message}`))}))}upsertCaseVersion(e){return this._openDB().then(t=>new Promise((n,a)=>{const r=t.transaction([h.STORE_NAMES.CASE_VERSIONS],"readwrite").objectStore(h.STORE_NAMES.CASE_VERSIONS),s={updateTime:new Date,...e};this._promisifyRequest(r.put(s)).then(()=>n(s)).catch(e=>a(new Error(`更新场景版本失败：${e.message}`)))}))}getCaseVersionByCaseId(e){return this._openDB().then(t=>new Promise((n,a)=>{const r=t.transaction([h.STORE_NAMES.CASE_VERSIONS],"readonly").objectStore(h.STORE_NAMES.CASE_VERSIONS);this._promisifyRequest(r.get(e)).then(e=>n(e||null)).catch(e=>a(new Error(`查询场景版本失败：${e.message}`)))}))}getConfigByCaseId(e){return e?Promise.all([this.getCaseVersionByCaseId(e),this.getTemplatesByCaseId(e),this.getParamsByCaseId(e)]).then(([t,n,a])=>{const r=n.map(t=>this.getLanesByTemplateId(e,t.templateId).then(n=>{const a=n.map(t=>this.getLinesByLaneId(e,t.laneId).then(e=>({...t,lines:e})));return Promise.all(a).then(e=>({...t,lanes:e}))}));return Promise.all(r).then(e=>({caseVersion:t,templates:e,params:a}))}).catch(e=>{throw new Error(`查询场景配置失败：${e.message}`)}):Promise.reject(new Error("caseId为必传参数"))}getConfigByTemplateId(e,t){if(!e||!t)return Promise.reject(new Error("caseId为必传参数"));const n={};return this.getLanesByTemplateId(e,t).then(t=>{const a=t.map(t=>this.getLinesByLaneId(e,t.laneId));return Promise.all(a).then(e=>{e.forEach((e,n)=>{t[n].lines=e}),n.lanes=t})}).then(()=>this.getTemplateById(e,t)).then(e=>(e.lanes=n.lanes,Promise.resolve(e)))}deleteCaseVersion(e){return this._openDB().then(t=>new Promise((n,a)=>{const r=t.transaction([h.STORE_NAMES.CASE_VERSIONS],"readwrite").objectStore(h.STORE_NAMES.CASE_VERSIONS);this._promisifyRequest(r.delete(e)).then(()=>n()).catch(e=>a(new Error(`删除场景版本失败：${e.message}`)))}))}upsertTemplate(e){return this._openDB().then(t=>new Promise((n,a)=>{if(!e.caseId)return void a(new Error("模板数据必须包含caseId"));const r=t.transaction([h.STORE_NAMES.TEMPLATES],"readwrite").objectStore(h.STORE_NAMES.TEMPLATES),s={...e,createDate:e.createDate?new Date(e.createDate):new Date,updateDate:e.updateDate?new Date(e.updateDate):null};return delete s.lanes,this._promisifyRequest(r.put(s)).then(()=>n(s)).catch(e=>a(new Error(`更新模板失败：${e.message}`)))}))}getTemplateById(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.TEMPLATES],"readonly").objectStore(h.STORE_NAMES.TEMPLATES);this._promisifyRequest(s.get([e,t])).then(e=>a(e||null)).catch(e=>r(new Error(`查询模板失败：${e.message}`)))}))}getTemplatesByCaseId(e){return this._openDB().then(t=>new Promise((n,a)=>{const r=t.transaction([h.STORE_NAMES.TEMPLATES],"readonly").objectStore(h.STORE_NAMES.TEMPLATES),s=IDBKeyRange.bound([e],[e,h.MAX_UNICODE_CHAR]);this._promisifyRequest(r.getAll(s)).then(e=>{n(e||[])}).catch(e=>a(new Error(`查询场景下模板失败：${e.message}`)))}))}deleteTemplate(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.TEMPLATES],"readwrite").objectStore(h.STORE_NAMES.TEMPLATES);this._promisifyRequest(s.delete([e,t])).then(()=>a()).catch(e=>r(new Error(`删除模板失败：${e.message}`)))}))}upsertLane(e,t){return this._openDB().then(n=>new Promise((a,r)=>{if(!e||!t.templateId)return void r(new Error("泳道数据必须包含caseId和templateId"));const s=n.transaction([h.STORE_NAMES.LANES],"readwrite").objectStore(h.STORE_NAMES.LANES),i={...t,caseId:e,updateDate:t.updateDate?new Date(t.updateDate):new Date};this._promisifyRequest(s.put(i)).then(()=>a(i)).catch(e=>r(new Error(`更新泳道失败：${e.message}`)))}))}getLaneById(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.LANES],"readonly").objectStore(h.STORE_NAMES.LANES);this._promisifyRequest(s.get([e,t])).then(e=>a(e||null)).catch(e=>r(new Error(`查询泳道失败：${e.message}`)))}))}getLanesByTemplateId(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.LANES],"readonly").objectStore(h.STORE_NAMES.LANES),i=IDBKeyRange.bound([e],[e,h.MAX_UNICODE_CHAR]);this._promisifyRequest(s.getAll(i)).then(e=>e.filter(e=>e.templateId===t)).then(e=>a(e||[])).catch(e=>r(new Error(`查询模板下泳道失败：${e.message}`)))}))}deleteLaneByLaneIds(e,t){return Array.isArray(t)&&0!==t.length?this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.LANES],"readwrite"),i=s.objectStore(h.STORE_NAMES.LANES);t.map(t=>this._promisifyRequest(i.delete([e,t]))),s.oncomplete=()=>a(),s.onerror=e=>r(new Error(`删除泳道失败：${e.target.error.message}`))})):Promise.resolve()}upsertLine(e,t){return this._openDB().then(n=>new Promise((a,r)=>{if(!e||!t.laneId)return void r(new Error("线条数据必须包含caseId和laneId"));const s=n.transaction([h.STORE_NAMES.LINES],"readwrite").objectStore(h.STORE_NAMES.LINES),i={...t,caseId:e,updateDate:t.updateDate?new Date(t.updateDate):new Date};this._promisifyRequest(s.put(i)).then(()=>a(i)).catch(e=>r(new Error(`更新线条失败：${e.message}`)))}))}getLineById(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.LINES],"readonly").objectStore(h.STORE_NAMES.LINES);this._promisifyRequest(s.get([e,t])).then(e=>a(e||null)).catch(e=>r(new Error(`查询线条失败：${e.message}`)))}))}getLinesByLaneId(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.LINES],"readonly").objectStore(h.STORE_NAMES.LINES),i=IDBKeyRange.bound([e],[e,h.MAX_UNICODE_CHAR]);this._promisifyRequest(s.getAll(i)).then(e=>e.filter(e=>e.laneId===t)).then(e=>a(e||[])).catch(e=>r(new Error(`查询泳道下线条失败：${e.message}`)))}))}deleteLineByIds(e,t){return Array.isArray(t)&&0!==t.length?this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.LINES],"readwrite"),i=s.objectStore(h.STORE_NAMES.LINES);t.map(t=>this._promisifyRequest(i.delete([e,t]))),s.oncomplete=()=>a(),s.onerror=e=>r(new Error(`批量删除线条失败：${e.target.error.message}`))})):Promise.resolve()}upsertParam(e){return this._openDB().then(t=>new Promise((n,a)=>{if(!e.caseId)return void a(new Error("参数数据必须包含caseId"));const r=t.transaction([h.STORE_NAMES.PARAMS],"readwrite").objectStore(h.STORE_NAMES.PARAMS),s={...e,updateDate:e.updateDate?new Date(e.updateDate):new Date};this._promisifyRequest(r.put(s)).then(()=>n(s)).catch(e=>a(new Error(`更新参数失败：${e.message}`)))}))}getParamById(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.PARAMS],"readonly").objectStore(h.STORE_NAMES.PARAMS);this._promisifyRequest(s.get([e,t])).then(e=>a(e||null)).catch(e=>r(new Error(`查询参数失败：${e.message}`)))}))}getParamsByCaseId(e){return this._openDB().then(t=>new Promise((n,a)=>{const r=t.transaction([h.STORE_NAMES.PARAMS],"readonly").objectStore(h.STORE_NAMES.PARAMS),s=IDBKeyRange.bound([e],[e,h.MAX_UNICODE_CHAR]);this._promisifyRequest(r.getAll(s)).then(e=>n(e||[])).catch(e=>a(new Error(`查询场景下参数失败：${e.message}`)))}))}deleteParamById(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.PARAMS],"readwrite").objectStore(h.STORE_NAMES.PARAMS);this._promisifyRequest(s.delete([e,t])).then(()=>a()).catch(e=>r(new Error(`删除参数失败：${e.message}`)))}))}}const u=new h;function f(e){e&&Array.isArray(e.lines)&&e.lines.sort((e,t)=>(e.lineSort??0)-(t.lineSort??0))}function g(e){Array.isArray(e)&&(e.sort((e,t)=>(e.sort??0)-(t.sort??0)),e.forEach(e=>f(e)))}function S(e){return Array.isArray(e)&&0!==e.length?(e.sort((e,t)=>(e.sort??0)-(t.sort??0)),e.forEach(e=>g(e.lanes)),e):e}function y(e){return e?e.lineId&&e.laneId?"line":e.laneId&&e.templateId&&!e.lineId?"lane":e.templateId?"template":null:null}function v(e=!0){let t="";return t="undefined"!=typeof crypto&&crypto.randomUUID?crypto.randomUUID():"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){const t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)}),e?t.replace(/-/g,""):t}class b{constructor(e,t,n,a=!0){this.caseId=e,this.versionCode=t,this.dataSource=n,this.flatData=a,this.ready=u.saveSceneConfig(e,t,n).catch(a=>(console.warn(`初始化数据库出错，直接重置：${a.message}`),u.forceInitSceneConfig(e,t,n)))}getUserTemplates(){return this.ready.then(()=>u.getConfigByCaseId(this.caseId))}upsertTemplate(e){let t;if(e.templateId)t=u.upsertTemplate(e);else{const n=v();if(e.templateId=n,e.baseTemplate){const a={};t=u.getLanesByTemplateId(this.caseId,e.baseTemplate).then(e=>{a.lanes=e;const t=e.map(e=>u.getLinesByLaneId(this.caseId,e.laneId));return Promise.all(t).then(e=>{const t=[];e.forEach((e,r)=>{const s=v();a.lanes[r].laneId=s,a.lanes[r].templateId=n,a.lanes[r].createUser=void 0,e.forEach(e=>{e.lineId=v(),e.laneId=s,e.createUser=void 0,t.push(e)})}),a.lines=t})}).then(()=>{a.templates=[e]}).then(()=>{a.params=[];const e=u.setUpData(this.caseId,this.versionCode,a);return u.batchAddConfig(e)}).then(()=>u.getTemplateById(this.caseId,n))}else t=u.upsertTemplate(e)}return"1"===e.isPublic?t.then(()=>u.getTemplatesByCaseId(this.caseId).then(t=>t.filter(t=>t.templateId!==e.templateId)).then(e=>{e.forEach(e=>{e.isPublic="0"});const t=e.map(e=>u.upsertTemplate(e));return Promise.all(t)}).then(()=>u.getConfigByTemplateId(this.caseId,e.templateId))):t}deleteTemplate(e){return u.getLanesByTemplateId(this.caseId,e.templateId).then(e=>{const t=e.map(e=>e.laneId);let n=t.map(e=>u.getLinesByLaneId(this.caseId,e));return Promise.all(n).then(e=>{const t=e.reduce((e,t)=>e.concat(t),[]).map(e=>e.lineId);return u.deleteLineByIds(this.caseId,t)}).then(()=>Promise.resolve(t))}).then(e=>u.deleteLaneByLaneIds(this.caseId,e)).then(()=>u.deleteTemplate(this.caseId,e.templateId)).then(()=>Promise.resolve(e))}upsertLane(e){return e.laneId||(e.laneId=v()),e.lines||(e.lines=[]),u.upsertLane(this.caseId,e)}delLane(e){const{lines:t,laneId:n}=e,a=t.map(e=>e.lineId);return u.deleteLineByIds(this.caseId,a).then(()=>u.deleteLaneByLaneIds(this.caseId,[n])).then(()=>Promise.resolve(e))}upsertLine(e){return e.lineId||(e.lineId=v()),e.laneId?u.upsertLine(this.caseId,e):Promise.reject(new Error("更新线条数据的时候，必须laneId不能为空！"))}delLine(e){return e.laneId?u.deleteLineByIds(this.caseId,[e.lineId]):Promise.reject(new Error("更新线条数据的时候，必须laneId不能为空！"))}restoreSetting(){return u.forceInitSceneConfig(this.caseId,this.versionCode,this.dataSource)}getType(){return"local-default"}}class E{static createStrategy(e){if("local"===e.type){let n;if((t=e.dataSource)&&Array.isArray(t.templates)&&Array.isArray(t.lanes)&&Array.isArray(t.lines)&&(0===t.templates.length||!t.templates[0].lanes))n={...e};else{if(!function(e){return Array.isArray(e)?0===e.length||!!e[0]&&Array.isArray(e[0].lanes):!!e&&Array.isArray(e.templates)&&(0===e.templates.length||Array.isArray(e.templates[0].lanes))}(e.dataSource))throw new Error("策略数据源格式不匹配");{const t=function(e){const t=[],n=[],a=[];for(const r of e){const{lanes:e,...s}=r;s.templateId||(s.templateId=v()),t.push(s);for(const t of e||[]){const{lines:e,...r}=t;r.templateId=s.templateId,r.laneId||(r.laneId=v()),n.push(r);for(const t of e||[])t.laneId=r.laneId,t.lineId||(t.lineId=v()),a.push(t)}}return{templates:t,lanes:n,lines:a}}(e.dataSource.templates);n={...e,dataSource:{...t,params:e.dataSource.params}}}}const{caseId:a,versionCode:r,dataSource:s}=n;return new b(a,r,s,!1)}return new m(e);var t}}var I={inject:["upsertTemplate","setTargetData","setExpanded"],props:{currentTemplate:{type:Object},formDisable:{type:Boolean},userTemplate:{type:Array},caseId:{type:String,default:""}},data(){return{formData:Object.assign({sort:void 0},this.currentTemplate),rules:{templateName:[{required:!0,message:"请输入模板名称",trigger:"blur"}]},saving:!1}},methods:{editable(){this.$emit("editable")},submitForm(e){this.$refs[e].validate(e=>{if(!e)return;if("function"!=typeof this.upsertTemplate)return void this.$message({type:"error",message:"没有配置模板管理方法"});this.saving=!0;const t={...this.formData};t.caseId||(t.caseId=this.caseId);const n=this.upsertTemplate(t);n instanceof Promise?n.then(e=>{this.setTargetData(e)}).then(()=>{this.$message({type:"success",message:"保存成功"})}).finally(()=>{this.saving=!1}):this.saving=!1})}},computed:{baseTemplate(){return this.userTemplate?[{name:"空白模板",value:""},...this.userTemplate.map(e=>({name:e.templateName,value:e.templateId}))]:[{name:"空白模板",value:""}]}},watch:{currentTemplate:{deep:!0,handler:function(e){this.formData=Object.assign({},e)}}}};function _(e,t,n,a,r,s,i,o,l,d){"boolean"!=typeof i&&(l=o,o=i,i=!1);const c="function"==typeof n?n.options:n;let p;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,r&&(c.functional=!0)),a&&(c._scopeId=a),s?(p=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},c._ssrRegister=p):t&&(p=i?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,o(e))}),p)if(c.functional){const e=c.render;c.render=function(t,n){return p.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,p):[p]}return n}s(".kd-lane-template-content {\n  display: flex;\n  flex-direction: column;\n  align-content: center;\n}\n.kd-lane-template-content .template-buttons {\n  text-align: center;\n}");const T=I;var x=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"kd-lane-template-content"},[n("el-form",{ref:"template",attrs:{rules:e.rules,model:e.formData,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"模板名称",prop:"templateName"}},[n("el-input",{attrs:{disabled:"SYSTEM_USER"==e.currentTemplate.createUser||e.formDisable},model:{value:e.formData.templateName,callback:function(t){e.$set(e.formData,"templateName",t)},expression:"formData.templateName"}})],1),e._v(" "),n("el-form-item",{attrs:{label:"默认模板",prop:"isPublic"}},[n("el-radio-group",{attrs:{disabled:e.formDisable},model:{value:e.formData.isPublic,callback:function(t){e.$set(e.formData,"isPublic",t)},expression:"formData.isPublic"}},[n("el-radio",{attrs:{label:"1"}},[e._v("是")]),e._v(" "),n("el-radio",{attrs:{label:"0"}},[e._v("否")])],1)],1),e._v(" "),n("el-form-item",{attrs:{label:"曲线高度占比",prop:"col1"}},[n("el-select",{attrs:{disabled:e.formDisable},model:{value:e.formData.col1,callback:function(t){e.$set(e.formData,"col1",t)},expression:"formData.col1"}},[n("el-option",{attrs:{value:"0.5",label:"50%"}}),e._v(" "),n("el-option",{attrs:{value:"0.6",label:"60%"}}),e._v(" "),n("el-option",{attrs:{value:"0.7",label:"70%"}}),e._v(" "),n("el-option",{attrs:{value:"0.8",label:"80%"}}),e._v(" "),n("el-option",{attrs:{value:"0.9",label:"90%"}}),e._v(" "),n("el-option",{attrs:{value:"1",label:"全屏"}})],1)],1),e._v(" "),n("el-form-item",{directives:[{name:"show",rawName:"v-show",value:!e.currentTemplate.templateId,expression:"!currentTemplate.templateId"}],attrs:{label:"选择基础模板",prop:"lineType",disabled:e.formDisable}},[n("el-select",{attrs:{placeholder:"请选择"},model:{value:e.formData.baseTemplate,callback:function(t){e.$set(e.formData,"baseTemplate",t)},expression:"formData.baseTemplate"}},e._l(e.baseTemplate,function(e){return n("el-option",{key:e.value,attrs:{label:e.name,value:e.value}})}),1)],1),e._v(" "),n("el-form-item",{attrs:{label:"顺序",prop:"sort","label-width":"120px"}},[n("el-input",{attrs:{disabled:e.formDisable},model:{value:e.formData.sort,callback:function(t){e.$set(e.formData,"sort",e._n(t))},expression:"formData.sort"}})],1)],1),e._v(" "),n("div",{staticClass:"template-buttons"},[n("el-button",{on:{click:e.editable}},[e._v("编辑")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:e.formDisable,loading:e.saving},on:{click:function(t){return e.submitForm("template")}}},[e._v("保存")])],1)],1)};x._withStripped=!0;const w=_({render:x,staticRenderFns:[]},undefined,T,undefined,false,undefined,!1,void 0,void 0,void 0);var C={inject:["upsertLane","setTargetData","setExpanded"],props:{laneInfo:{type:Object},caseId:{type:String,default:""},formDisable:{type:Boolean}},data(){return{formData:Object.assign(this.laneInfo),rules:{sort:[{required:!0,message:"请输入泳道顺序",trigger:"blur"}]},saving:!1}},methods:{editable(){this.$emit("editable")},submitForm(e){this.$refs[e].validate(e=>{if(!e)return;if("function"!=typeof this.upsertLane)return void this.$message({type:"error",message:"没有配置泳道管理方法"});this.saving=!0;const t={...this.formData};t.caseId||(t.caseId=this.caseId);const n=this.upsertLane(t);n instanceof Promise?n.then(e=>{this.setTargetData(e)}).then(()=>{this.$message({type:"success",message:"保存成功"})}).finally(()=>{this.saving=!1}):this.saving=!1})}},computed:{},watch:{laneInfo:{deep:!0,handler:function(e){this.formData=Object.assign({},e)}}}};s(".kd-lane-lane-content {\n  display: flex;\n  flex-direction: column;\n  align-content: center;\n}\n.kd-lane-lane-content .template-buttons {\n  text-align: center;\n}");const A=C;var D=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"kd-lane-lane-content"},[n("el-form",{ref:"template",attrs:{rules:e.rules,model:e.formData,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"泳道顺序",prop:"sort"}},[n("el-input",{attrs:{disabled:e.formDisable},model:{value:e.formData.sort,callback:function(t){e.$set(e.formData,"sort",t)},expression:"formData.sort"}})],1)],1),e._v(" "),n("div",{staticClass:"template-buttons"},[n("el-button",{on:{click:e.editable}},[e._v("编辑")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:e.formDisable,loading:e.saving},on:{click:function(t){return e.submitForm("template")}}},[e._v("保存")])],1)],1)};D._withStripped=!0;const k=_({render:D,staticRenderFns:[]},undefined,A,undefined,false,undefined,!1,void 0,void 0,void 0);var N={inject:["upsertLine","setTargetData","setExpanded"],props:{template:{type:Object},formDisable:{type:Boolean},params:{type:Array}},mounted(){},data(){const e=(e,t,n)=>{isNaN(t)?n(new Error("请输入数字值")):n()};return{formData:Object.assign({},this.template),lines:[{name:"直线",value:"solid"},{name:"虚线",value:"dashed"},{name:"点线",value:"dotted"},{name:"面积",value:"area"}],lineWidthSliderMarks:{1:"1",2:"2",3:"3",4:"4"},rules:{min:[{required:!0,message:"请输入最小值",trigger:"blur"},{validator:e,trigger:"blur"}],lineSort:[{required:!0,message:"请输入曲线顺序（1-10）",trigger:"blur"},{type:"number",message:"顺序必须为数字值"}],max:[{required:!0,message:"请输入最大值",trigger:"blur"},{validator:e,trigger:"blur"}],lineSize:[{required:!0,message:"请选择曲线粗细",trigger:"blur"}],lineColor:[{required:!0,message:"请选择曲线颜色",trigger:"blur"}],lineType:[{required:!0,message:"请选择线型",trigger:"blur"}],paramId:[{required:!0,message:"请选择参数名称",trigger:"blur"}]}}},methods:{editable(){this.$emit("editable")},submitForm(e){this.$refs[e].validate().then(()=>{if(!(this.upsertLine instanceof Function))return Promise.reject(new Error("未配置线条设置函数"));{const e=this.upsertLine(this.formData);e instanceof Promise?e.then(e=>{this.setTargetData(e)}).then(()=>{this.$message({type:"success",message:"保存成功"})}).finally(()=>{this.saving=!1}):this.saving=!1}}).catch(e=>{console.log(e)})}},watch:{template:{immediate:!1,deep:!0,handler(e){this.formData=Object.assign({},e)}}}};s(".kd-lane-line-content {\n  width: 95%;\n  display: flex;\n  flex-direction: column;\n  align-content: center;\n}\n.kd-lane-line-content .template-buttons {\n  text-align: center;\n}");const L=N;var R=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"kd-lane-line-content"},[n("el-form",{ref:"template",attrs:{rules:e.rules,model:e.formData,disabled:e.formDisable}},[n("el-form-item",{attrs:{label:"参数名称",prop:"paramId","label-width":"120px"}},[n("el-select",{attrs:{filterable:"",placeholder:"请选择"},model:{value:e.formData.paramId,callback:function(t){e.$set(e.formData,"paramId",t)},expression:"formData.paramId"}},e._l(e.params,function(e){return n("el-option",{key:e.paramId,attrs:{label:e.paramName,value:e.paramId}})}),1)],1),e._v(" "),n("el-form-item",{attrs:{label:"最小值",prop:"min","label-width":"120px"}},[n("el-input",{model:{value:e.formData.min,callback:function(t){e.$set(e.formData,"min",t)},expression:"formData.min"}})],1),e._v(" "),n("el-form-item",{attrs:{label:"最大值",prop:"max","label-width":"120px"}},[n("el-input",{model:{value:e.formData.max,callback:function(t){e.$set(e.formData,"max",t)},expression:"formData.max"}})],1),e._v(" "),n("el-form-item",{attrs:{label:"曲线粗细",prop:"lineSize","label-width":"120px"}},[n("el-input",{attrs:{max:4,min:1,type:"number"},model:{value:e.formData.lineSize,callback:function(t){e.$set(e.formData,"lineSize",t)},expression:"formData.lineSize"}})],1),e._v(" "),n("el-form-item",{attrs:{label:"曲线颜色",prop:"lineColor","label-width":"120px"}},[n("el-color-picker",{model:{value:e.formData.lineColor,callback:function(t){e.$set(e.formData,"lineColor",t)},expression:"formData.lineColor"}})],1),e._v(" "),n("el-form-item",{attrs:{label:"线型",prop:"lineType","label-width":"120px"}},[n("el-select",{attrs:{placeholder:"请选择"},model:{value:e.formData.lineType,callback:function(t){e.$set(e.formData,"lineType",t)},expression:"formData.lineType"}},e._l(e.lines,function(e){return n("el-option",{key:e.value,attrs:{label:e.name,value:e.value}})}),1)],1),e._v(" "),n("el-form-item",{attrs:{label:"曲线顺序",prop:"lineSort","label-width":"120px"}},[n("el-input",{model:{value:e.formData.lineSort,callback:function(t){e.$set(e.formData,"lineSort",e._n(t))},expression:"formData.lineSort"}})],1),e._v(" "),e._e()],1),e._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:"SYSTEM_USER"!=e.template.createUser,expression:"template.createUser != 'SYSTEM_USER'"}],staticClass:"template-buttons"},[n("el-button",{on:{click:e.editable}},[e._v("编辑")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:e.formDisable},on:{click:function(t){return e.submitForm("template")}}},[e._v("保存")])],1)],1)};R._withStripped=!0;const M=_({render:R,staticRenderFns:[]},undefined,L,undefined,false,undefined,!1,void 0,void 0,void 0);var P={inject:["delTemplate","delLane","delLine"],provide(){return{setTargetData:this.setTargetData,setExpanded:this.setExpanded}},components:{LineEdit:M,TemplateEdit:w,LaneEdit:k},props:{contextItem:{type:Object,default:()=>{}},expended:{type:Object},caseId:{type:String,default:""},inputTempates:{type:Array,default:()=>[]},params:{type:Array,required:!0,default:()=>[]}},data:()=>({templateContentShow:!1,templateDisable:!1,laneContentShow:!1,lineContentShow:!1,templateInfo:{},laneInfo:{},lineInfo:{},dataType:"",curveConfigLoading:!1,expandedKeys:[],currentNodeKey:"",targetData:void 0,treeKey:""}),mounted(){},methods:{setTargetData(e){this.targetData=e,this.setExpanded();switch(y(e)){case"template":this.templateContentShow=!0,this.laneContentShow=!1,this.lineContentShow=!1,this.templateDisable=!0,this.templateInfo=e;break;case"lane":this.templateContentShow=!1,this.laneContentShow=!0,this.lineContentShow=!1,this.templateDisable=!0,this.laneInfo=e;break;case"line":this.templateContentShow=!1,this.laneContentShow=!1,this.lineContentShow=!0,this.templateDisable=!0,this.lineInfo=e}},setExpanded(){const e=this.targetData;if(e){switch(y(e)){case"template":this.expandedKeys=[e.templateId],this.currentNodeKey=e.templateId;break;case"lane":this.expandedKeys=[e.laneId],this.currentNodeKey=e.laneId;break;case"line":this.expandedKeys=[e.lineId],this.currentNodeKey=e.lineId;break;default:this.expandedKeys=[],this.currentNodeKey=""}}else this.expandedKeys=[],this.currentNodeKey="";this.$refs.refTree&&this.$refs.refTree.setCurrentKey(this.currentNodeKey),this.treeKey=`treeKey${(new Date).getTime()}`},optionClicked(e){const{option:t={},item:n}=e;switch(t.key){case"delTemplate":this.askForDelTemplate(n);break;case"addLane":this.addLane(n);break;case"delLane":this.askForDelLane(n);break;case"addParam":this.addParam(n);break;case"delParam":this.delParam(n)}},hideContextMenu(){const e=this.$refs.vueSimpleContextMenu;e&&e.hideContextMenu()},showRightWindows(e,t,n){const a=this.judgeDataType(n);this.dataType=a,"SYSTEM_USER"!=t.createUser?this.$refs.vueSimpleContextMenu.showMenu(e,t):this.$message.warning("系统模板不能编辑")},clear(){this.expandedKeys=[],this.templateDisable=!0,this.templateContentShow=!1},editable(){this.templateDisable=!1},handleNodeClick(e){this.setTargetData(e)},judgeDataType(e){const{level:t,data:n={}}=e;return 1==t&&n.templateId?"template":2==t&&n.laneId&&n.templateId?"lane":3==t&&n.lineId?"line":null},addTemplate(){this.templateContentShow=!0,this.laneContentShow=!1,this.lineContentShow=!1,this.templateDisable=!1,this.templateInfo={isPublic:"0",baseTemplate:"",col1:"1"}},addLane(e){this.templateContentShow=!1,this.laneContentShow=!0,this.lineContentShow=!1,this.templateDisable=!1,this.laneInfo={templateId:e.templateId,isUsed:"1",sort:e.lanes.length+1}},addParam(e){this.templateContentShow=!1,this.laneContentShow=!1,this.lineContentShow=!0,this.templateDisable=!1,this.lineInfo={laneId:e.laneId,isUsed:"1",lineSize:2}},askForDelTemplate(e){this.$confirm("此操作将删除该模板, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(()=>(e.bsflag="1",this.curveConfigLoading=!0,this.delTemplate instanceof Function?this.delTemplate(e):Promise.reject(new Error("未配置删除模板函数")))).catch(e=>{this.$message.error(e.message||"删除失败")}).finally(()=>{this.curveConfigLoading=!1})},askForDelLane(e){this.$confirm("此操作将删除该泳道, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(()=>(e.bsflag="1",this.curveConfigLoading=!0,this.delLane instanceof Function?this.delLane(e):Promise.reject(new Error("未配置删除模板函数")))).catch(()=>{this.$message.error("删除失败")}).finally(()=>{this.curveConfigLoading=!1})},delParam(e){this.$confirm("此操作将删除该参数, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(()=>(e.bsflag="1",this.delLine instanceof Function?this.delLine(e):Promise.reject(new Error("未配置删除线条函数")))).catch(e=>{this.$message.error(e.message||"删除失败")})}},computed:{contextMenuOptions(){switch(this.dataType){case"template":return[{name:"新增泳道",key:"addLane"},{name:"删除模板",key:"delTemplate"}];case"lane":return[{name:"新增参数",key:"addParam"},{name:"删除泳道",key:"delLane"}];case"line":return[{name:"删除参数",key:"delParam"}];default:return[]}},treeData(){if(this.inputTempates){const e=[];return this.inputTempates.forEach(t=>{const n={...t,id:t.templateId,label:t.templateName};n.children=[],t.lanes||(t.lanes=[]),t.lanes.forEach((e,t)=>{const a={...e,id:e.laneId,label:`泳道${t+1}`};n.children.push(a),a.lines||(a.lines=[]),a.children=[],e.lines.forEach(e=>{const t={...e,id:e.lineId,label:e.lineName||e.paramId};a.children.push(t)})}),e.push(n)}),e}return[]},userTemplate(){return this.treeData?[...this.treeData]:[]}},watch:{contextItem:{immediate:!0,deep:!0,handler(e){this.setTargetData(Object.assign({},e))}}},beforeDestroy(){}};s(".kd-lane-el-container {\n  height: 60vh;\n  border: 1px solid var(--kd-lane-container-border-color, #333);\n  width: 100%;\n}\n@media screen and (max-width: 1024px) {\n.kd-lane-el-container {\n    height: 70vh;\n}\n}\n.kd-lane-el-container .rtd-config-side {\n  border-right: 1px solid var(--kd-lane-container-border-color, #333);\n}\n.kd-lane-el-container .rtd-config-side-tree {\n  height: 90%;\n  overflow: auto;\n}\n.kd-lane-el-container .rtd-config-side-option {\n  text-align: center;\n}\n.kd-lane-el-container .rtd-config-main {\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  width: 100%;\n}");const $=P;var O=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("el-container",{directives:[{name:"loading",rawName:"v-loading",value:e.curveConfigLoading,expression:"curveConfigLoading"}],staticClass:"kd-lane-el-container"},[n("el-aside",{staticClass:"rtd-config-side",attrs:{width:"20%"}},[n("el-tree",{key:e.treeKey,ref:"refTree",staticClass:"rtd-config-side-tree",attrs:{data:e.treeData,"expand-on-click-node":!1,"current-node-key":e.currentNodeKey,"default-expanded-keys":e.expandedKeys,"node-key":"id","highlight-current":""},on:{"node-click":e.handleNodeClick,"node-expand":e.hideContextMenu,"node-collapse":e.hideContextMenu},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.node,r=t.data;return n("span",{staticClass:"custom-tree-node",on:{contextmenu:function(t){return t.preventDefault(),e.showRightWindows(t,r,a)}}},[n("span",[e._v(e._s(a.label))]),e._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:"1"==r.isPublic,expression:"data.isPublic == '1'"}],staticStyle:{"padding-left":"5px"}},[n("i",{staticClass:"el-icon-star-on"})])])}}])}),e._v(" "),n("div",{staticClass:"rtd-config-side-option"},[n("el-button",{on:{click:e.addTemplate}},[e._v("新增模板")])],1)],1),e._v(" "),n("el-main",{staticClass:"rtd-config-main"},[n("TemplateEdit",e._g({directives:[{name:"show",rawName:"v-show",value:e.templateContentShow,expression:"templateContentShow"}],attrs:{currentTemplate:e.templateInfo,"form-disable":e.templateDisable,userTemplate:e.userTemplate,caseId:e.caseId},on:{editable:e.editable}},e.$listeners)),e._v(" "),n("LaneEdit",e._g({directives:[{name:"show",rawName:"v-show",value:e.laneContentShow,expression:"laneContentShow"}],attrs:{laneInfo:e.laneInfo,"form-disable":e.templateDisable},on:{editable:e.editable}},e.$listeners)),e._v(" "),n("LineEdit",e._g({directives:[{name:"show",rawName:"v-show",value:e.lineContentShow,expression:"lineContentShow"}],attrs:{template:e.lineInfo,params:e.params,"form-disable":e.templateDisable},on:{editable:e.editable}},e.$listeners))],1),e._v(" "),n("VueSimpleContextMenu",{ref:"vueSimpleContextMenu",attrs:{"element-id":"kd-lane-chart-context-menu-2",options:e.contextMenuOptions},on:{"option-clicked":e.optionClicked}})],1)};O._withStripped=!0;const B=_({render:O,staticRenderFns:[]},undefined,$,undefined,false,undefined,!1,void 0,void 0,void 0);var j={props:{itemHeight:{type:Number,default:20},line:{type:Object,default:()=>{}},paramsNameMap:{type:Object,default:()=>{},required:!0}},methods:{toggleIsUsed(){const e={...this.line};"1"==e.isUsed||1==e.isUsed?e.isUsed="0":e.isUsed="1",this.$emit("updateLine",e)}},computed:{textColor(){return{color:this.line.lineColor}},headerItemStyle(){let e;return e="area"==this.line.lineType?{"box-shadow":`inset 0 0 8px 0px ${this.line.lineColor}`}:{"border-bottom":`2px ${this.line.lineType} ${this.line.lineColor}`},{height:`${this.itemHeight}px`,opacity:"1"==this.line.isUsed?1:.5,...e}}},watch:{}};s('@charset "UTF-8";\n.kd-lane-chart-container-header-item {\n  color: var(--kd-lane-container-header-item-color, #333);\n  border: unset;\n  position: relative;\n  cursor: pointer;\n}\n.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container {\n  height: 100%;\n  width: 100%;\n  font-size: 10px;\n  font-weight: bold;\n  position: relative;\n}\n.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .left {\n  position: absolute;\n  left: 0;\n  bottom: 2px;\n}\n.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .center {\n  position: absolute;\n  left: 50%;\n  bottom: 2px;\n  transform: translateX(-50%);\n  /* 文字不换行，超出显示省略号 */\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .right {\n  position: absolute;\n  right: 0;\n  bottom: 2px;\n}');const U=j;var V=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"kd-lane-chart-container-header-item",style:e.headerItemStyle,on:{click:e.toggleIsUsed}},[n("div",{staticClass:"kd-lane-chart-container-text-container"},[n("span",{staticClass:"left",style:e.textColor},[e._v(e._s(e.line.min))]),e._v(" "),n("span",{staticClass:"center"},[e._v(e._s(e.paramsNameMap[e.line.paramId]||e.line.paramId))]),e._v(" "),n("span",{staticClass:"right",style:e.textColor},[e._v(e._s(e.line.max))])])])};V._withStripped=!0;const q=_({render:V,staticRenderFns:[]},undefined,U,undefined,false,undefined,!1,void 0,void 0,void 0);var K={name:"KdLaneChartContainer",provide(){return{upsertTemplate:this.upsertTemplate,delTemplate:this.delTemplate,upsertLane:this.upsertLane,delLane:this.delLane,upsertLine:this.upsertLine,delLine:this.delLine}},components:{HeaderItem:q,RealTimeCurveConfig:B},props:{config:{type:Object,required:!0,validator:function(e){if("object"!=typeof e||null===e)throw new Error("配置必须是一个对象");if(!("type"in e))throw new Error("配置必须包含 type 属性");if(!("caseId"in e)||!("versionCode"in e))throw new Error("配置必须包含 caseId, versionCode 属性");const{type:t}=e;if("local"===t){if(!("dataSource"in e)||null==e.dataSource)throw new Error("local 类型的配置必须包含 dataSource 属性");if(!("params"in e.dataSource))throw new Error("local 类型的配置 dataSource 必须包含 params 属性")}else{if("custom"!==t)throw new Error('type 必须是 "local" 或 "custom"');{const t=["getUserTemplates","upsertTemplate","delTemplate","upsertLane","delLane","upsertLine","delLine"];for(const n of t)if("function"!=typeof e[n])throw new Error(`${n} 必须是一个函数`)}}return!0}},headerPadding:{type:Number,default:4},headerItemHeight:{type:Number,default:20},itemGap:{type:Number,default:2},customMenuList:{type:Array,default:()=>[]}},data:()=>({treeTemplates:null,isLoading:!1,strategy:null,currentTemplate:{},curveConfigVisible:!1,params:[],contextItem:void 0}),created(){this.strategy=E.createStrategy(this.$props.config),this.loadConfig()},mounted(){},methods:{setExpanded(){this.$refs.curveConfig.setExpanded()},delLine(e){return this.strategy.delLine(e).then(()=>{const t=this.currentTemplate.lanes,n=t.findIndex(t=>t.laneId==e.laneId);if(n<0)for(const t of this.treeTemplates){const{lanes:n}=t;for(const t of n)if(t.laneId==e.laneId){const{lines:n}=t,a=n.findIndex(t=>t.lineId==e.lineId);a<0?console.warn("要删除的线条在当前泳道中不存在？"):n.splice(a,1);break}}else{const a=t[n].lines.findIndex(t=>t.lineId==e.lineId);a<0?console.warn("要删除的线条在当前泳道中不存在？"):t[n].lines.splice(a,1),this.onLineChange(e)}})},upsertLine(e){return this.strategy.upsertLine(e).then(e=>{const t=this.currentTemplate.lanes,n=t.findIndex(t=>t.laneId==e.laneId);if(!(n<0)){const a=t[n],r=a.lines,s=r.findIndex(t=>t.lineId==e.lineId);return s<0?r.push(e):this.$set(r,s,e),this.$set(t,n,a),f(a),this.onLineChange(e),e}for(const t of this.treeTemplates){const{lanes:n}=t;for(const t of n)if(t.laneId==e.laneId){const{lines:n}=t,a=n.findIndex(t=>t.lineId==e.lineId);a<0?n.push(e):this.$set(n,a,e),f(t);break}}})},delLane(e){return this.strategy.delLane(e).then(e=>{const{templateId:t}=e,n=this.treeTemplates.findIndex(e=>e.templateId==t);if(n<0)return void console.warn(`template_id not found: '${t}'`);const a=this.treeTemplates[n],r=a.lanes.findIndex(t=>t.laneId==e.laneId);a.lanes.splice(r,1),this.currentTemplate.templateId==t&&this.setDefaultAndNotify()})},upsertLane(e){return this.strategy.upsertLane(e).then(e=>{const t=this.treeTemplates.findIndex(t=>t.templateId==e.templateId);if(t<0)console.warn("template not found");else{const n=this.treeTemplates[t],a=n.lanes||[],r=a.findIndex(t=>t.laneId==e.laneId);r<0?a.push(e):this.$set(a,r,e),g(n.lanes),n.templateId===this.currentTemplate.templateId&&this.setDefaultAndNotify()}return e})},delTemplate(e){return this.strategy.deleteTemplate(e).then(()=>{const t=this.treeTemplates.findIndex(t=>t.templateId===e.templateId);this.treeTemplates.splice(t,1),e.templateId==this.currentTemplate.templateId&&this.setDefaultAndNotify()})},upsertTemplate(e){return this.strategy.upsertTemplate(e).then(e=>{"1"==e.isPublic&&this.treeTemplates.forEach(e=>{e.isPublic="0"});const t=this.treeTemplates.findIndex(t=>t.templateId===e.templateId);if(t>=0){const n=this.treeTemplates[t],a=Object.assign({},n,e);this.$set(this.treeTemplates,t,a)}else this.treeTemplates.push(e);return S(this.treeTemplates),this.setDefaultAndNotify(),e})},onParentContextMenu(e){const t=".kd-lane-chart-lane-header";if(!(e.target&&(e.target.classList.contains(t)||e.target.closest(t)))){e.preventDefault();const t=this.$refs.vueSimpleContextMenu;t&&t.hideContextMenu()}},showContextMenu(e,t){e.stopPropagation(),this.$refs.vueSimpleContextMenu.showMenu(e,t)},optionClicked(e){const{option:t,item:n}=e;this.contextItem=n;const a=this.customMenuList.findIndex(e=>e.key==t.key);if(a<0){if("editTemplate"==t.key)this.curveConfigVisible=!0;else if("restoreSetting"==t.key)return this.strategy.restoreSetting().then(()=>{this.loadConfig()})}else this.$emit("onCustomMenuClicked",e)},loadConfig(){this.isLoading=!0,this.strategy.getUserTemplates().then(e=>{const{templates:t=[],params:n=[]}=e;this.params=n,S(t),this.treeTemplates=t,this.setDefaultAndNotify()}).catch(e=>{console.error(`加载配置失败: ${this.$props.strategy.caseId},${this.$props.strategy.versionCode},${e.message}`)}).finally(()=>{this.isLoading=!1})},onLineChange(e){console.log("notify line change",e),this.$emit("line-change",e)},setDefaultAndNotify(){const e=this.treeTemplates.find(e=>"1"===e.isPublic);if(e)this.currentTemplate=e;else{const e=this.treeTemplates.find(e=>"SYSTEM_USER"==e.createUser);e?(e.isPublic="1",this.currentTemplate=e,this.strategy.upsertTemplate(e)):(this.treeTemplates[0].isPublic="1",this.currentTemplate=this.treeTemplates[0],this.strategy.upsertTemplate(this.currentTemplate))}this.$emit("template-change",this.currentTemplate)}},computed:{contextMenuOptions(){return"local"==this.config.type?[{name:"编辑模板",key:"editTemplate"},{name:"恢复默认",key:"restoreSetting"},...this.customMenuList]:[{name:"编辑模板",key:"template"},...this.customMenuList]},paramsNameMap(){const e={};for(const t of this.params)e[t.paramId]=t.paramName;return e},lineCount(){const{lanes:e=[]}=this.currentTemplate||{};return Math.max(...e.map(e=>e.lines?.length||0))},headerStyle(){const e={gap:`${this.itemGap}px`,padding:`${this.headerPadding}px`};if(this.currentTemplate){const{lanes:t=[]}=this.currentTemplate;if(t&&0!=t.length){const t=Math.max(0,this.lineCount-1);return{...e,height:this.lineCount*this.headerItemHeight+2*this.headerPadding+t*this.itemGap+"px","min-height":"60px"}}return{...e,height:"30%","min-height":"60px"}}return{...e,height:"30%","min-height":"60px"}},darwAreaStyle(){return{top:this.headerStyle.height}}}};s(".kd-lane-chart-container {\n  --border-color: var(--kd-lane-container-border-color, #333);\n  --context-background-color: var(--kd-lane-container-context-background-color, #ecf0f1);\n  --context-hover-color: var(--kd-lane-container-context-hover-color, #007aff);\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n  border: 1px solid var(--border-color);\n  display: flex;\n}\n.kd-lane-chart-container .kd-lane-chart-lane-slot-container, .kd-lane-chart-container .kd-lane-chart-lane-container {\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  z-index: 1;\n}\n.kd-lane-chart-container .kd-lane-chart-lane-slot-container .kd-lane-chart-lane-header, .kd-lane-chart-container .kd-lane-chart-lane-container .kd-lane-chart-lane-header {\n  padding: 4px;\n  max-height: 40%;\n  border-bottom: 1px solid var(--border-color);\n  overflow: hidden;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.kd-lane-chart-container .kd-lane-chart-lane-container {\n  flex: 1;\n}\n.kd-lane-chart-container .kd-lane-chart-lane-slot-container {\n  width: auto;\n}\n.kd-lane-chart-container .border-left {\n  border-left: 1px solid var(--border-color);\n}\n.kd-lane-chart-container .kd-lane-chart-container-draw-area {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 3;\n  border: none;\n}\n.kd-lane-chart-container .vue-simple-context-menu {\n  background-color: var(--context-background-color);\n  position: fixed;\n}\n.kd-lane-chart-container .vue-simple-context-menu .vue-simple-context-menu__item:hover {\n  background: var(--context-hover-color);\n}");const F=K;var H=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{directives:[{name:"loading",rawName:"v-loading",value:e.isLoading,expression:"isLoading"}],staticClass:"kd-lane-chart-container",on:{contextmenu:e.onParentContextMenu}},[e.currentTemplate&&e.currentTemplate.lanes&&e.currentTemplate.lanes.length>0?[e._l(e.currentTemplate.lanes||[],function(t,a){return[e.$scopedSlots["lane"+t.laneId]?n("div",{key:t.laneId,staticClass:"kd-lane-chart-lane-slot-container",class:{"border-left":0!=a}},[n("div",{staticClass:"kd-lane-chart-lane-header",style:e.headerStyle},[e._t("lane"+t.laneId,null,{lane:t})],2)]):e.$slots["lane"+t.laneId]?n("div",{key:""+t.laneId,staticClass:"kd-lane-chart-lane-slot-container",class:{"border-left":0!=a}},[n("div",{staticClass:"kd-lane-chart-lane-header",style:e.headerStyle},[e._t("lane"+t.laneId,null,{lane:t})],2)]):[n("div",{key:t.laneId,staticClass:"kd-lane-chart-lane-container",class:{"border-left":0!=a}},[n("div",{staticClass:"kd-lane-chart-lane-header",style:e.headerStyle,on:{contextmenu:function(n){return n.preventDefault(),e.showContextMenu(n,t)}}},e._l(t.lines||[],function(t){return n("HeaderItem",{key:t.lineId,attrs:{itemHeight:e.headerItemHeight,line:t,paramsNameMap:e.paramsNameMap},on:{updateLine:e.upsertLine},nativeOn:{contextmenu:function(n){return n.preventDefault(),e.showContextMenu(n,t)}}})}),1)])]]})]:[n("div",{staticClass:"kd-lane-chart-lane-container"},[n("div",{staticClass:"kd-lane-chart-lane-header",style:e.headerStyle,on:{contextmenu:function(t){return t.preventDefault(),e.showContextMenu.apply(null,arguments)}}})])],e._v(" "),n("div",{staticClass:"kd-lane-chart-container-draw-area",style:e.darwAreaStyle},[e._t("draw-slot")],2),e._v(" "),n("VueSimpleContextMenu",{ref:"vueSimpleContextMenu",attrs:{"element-id":"kd-lane-chart-context-menu",options:e.contextMenuOptions},on:{"option-clicked":e.optionClicked}}),e._v(" "),n("el-dialog",{attrs:{title:"泳道模板设置",visible:e.curveConfigVisible},on:{"update:visible":function(t){e.curveConfigVisible=t},opened:e.setExpanded}},[n("RealTimeCurveConfig",e._g({ref:"curveConfig",attrs:{inputTempates:e.treeTemplates,caseId:e.strategy.caseId,params:e.params,contextItem:e.contextItem}},e.$listeners))],1)],2)};H._withStripped=!0;const X=_({render:H,staticRenderFns:[]},undefined,F,undefined,false,undefined,!1,void 0,void 0,void 0),z=e=>{e.use(a.default),e.component(d.name,d),e.component(X.name,X)};return"undefined"!=typeof window&&window.Vue&&window.Vue.use(z),{install:z}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("v-click-outside"),require("vue")):"function"==typeof define&&define.amd?define(["v-click-outside","vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).KdLaneChartContainer=t(e.vClickOutside,e.Vue)}(this,function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(e),r=n(t);function s(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}function i(e,t,n,a,r,s,i,o,l,d){"boolean"!=typeof i&&(l=o,o=i,i=!1);var c,m="function"==typeof n?n.options:n;if(e&&e.render&&(m.render=e.render,m.staticRenderFns=e.staticRenderFns,m._compiled=!0,r&&(m.functional=!0)),a&&(m._scopeId=a),s?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},m._ssrRegister=c):t&&(c=i?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,o(e))}),c)if(m.functional){var p=m.render;m.render=function(e,t){return c.call(t),p(e,t)}}else{var h=m.beforeCreate;m.beforeCreate=h?[].concat(h,c):[c]}return n}s('.vue-simple-context-menu {\n  top: 0;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  display: none;\n  list-style: none;\n  position: absolute;\n  z-index: 1000000;\n  background-color: #ecf0f1;\n  border-bottom-width: 0px;\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;\n  box-shadow: 0 3px 6px 0 rgba(51, 51, 51, 0.2);\n  border-radius: 4px;\n}\n.vue-simple-context-menu--active {\n  display: block;\n}\n.vue-simple-context-menu__item {\n  display: flex;\n  color: #333;\n  cursor: pointer;\n  padding: 5px 15px;\n  align-items: center;\n}\n.vue-simple-context-menu__item:hover {\n  background-color: #007aff;\n  color: #fff;\n}\n.vue-simple-context-menu__divider {\n  box-sizing: content-box;\n  height: 2px;\n  background-color: #c0cdd1;\n  padding: 4px 0;\n  background-clip: content-box;\n  pointer-events: none;\n}\n.vue-simple-context-menu li:first-of-type {\n  margin-top: 4px;\n}\n.vue-simple-context-menu li:last-of-type {\n  margin-bottom: 4px;\n}'),r.default.use(a.default);var o={name:"VueSimpleContextMenu",props:{elementId:{type:String,required:!0},options:{type:Array,required:!0}},data:function(){return{item:null,menuWidth:null,menuHeight:null}},methods:{showMenu:function(e,t){this.item=t;var n=document.getElementById(this.elementId);n&&(this.menuWidth&&this.menuHeight||(n.style.visibility="hidden",n.style.display="block",this.menuWidth=n.offsetWidth,this.menuHeight=n.offsetHeight,n.removeAttribute("style")),this.menuWidth+e.pageX>=window.innerWidth?n.style.left=e.pageX-this.menuWidth+2+"px":n.style.left=e.pageX-2+"px",this.menuHeight+e.pageY>=window.innerHeight?n.style.top=e.pageY-this.menuHeight+2+"px":n.style.top=e.pageY-2+"px",n.classList.add("vue-simple-context-menu--active"))},hideContextMenu:function(){var e=document.getElementById(this.elementId);e&&(e.classList.remove("vue-simple-context-menu--active"),this.$emit("menu-closed"))},onClickOutside:function(){this.hideContextMenu()},optionClicked:function(e){this.hideContextMenu(),this.$emit("option-clicked",{item:this.item,option:e})},onEscKeyRelease:function(e){27===e.keyCode&&this.hideContextMenu()}},mounted:function(){document.body.addEventListener("keyup",this.onEscKeyRelease)},beforeDestroy:function(){document.removeEventListener("keyup",this.onEscKeyRelease)}},l=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("ul",{directives:[{name:"click-outside",rawName:"v-click-outside",value:e.onClickOutside,expression:"onClickOutside"}],staticClass:"vue-simple-context-menu",attrs:{id:e.elementId}},e._l(e.options,function(t,a){return n("li",{key:a,staticClass:"vue-simple-context-menu__item",class:[t.class,"divider"===t.type?"vue-simple-context-menu__divider":""],on:{click:function(n){return n.stopPropagation(),e.optionClicked(t)}}},[n("span",{domProps:{innerHTML:e._s(t.name)}})])}),0)])};l._withStripped=!0;var d=i({render:l,staticRenderFns:[]},undefined,o,undefined,false,undefined,!1,void 0,void 0,void 0);var c={install:function e(t){e.installed||(e.installed=!0,t.component("VueSimpleContextMenu",d))}},m=null;"undefined"!=typeof window?m=window.Vue:"undefined"!=typeof global&&(m=global.Vue),m&&m.use(c);class p{constructor(e){this.strategy=e}getUserTemplates(){return this.strategy.getUserTemplates()}upsertTemplate(e){return this.strategy.upsertTemplate(e)}delTemplate(e){return this.strategy.deleteTemplate(e)}upsertLane(e){return this.strategy.upsertLane(e)}delLane(e){return this.strategy.deleteLane(e)}upsertLine(e){return this.strategy.upsertLine(e)}delLine(e){return this.strategy.delLine(e)}restoreSetting(){return this.strategy.restoreSetting?this.strategy.restoreSetting():Promise.resolve()}}class h{static DB_NAME="KDLaneChartContainerConfigDB";static MAX_UNICODE_CHAR="￿";static DB_VERSION=2;static STORE_NAMES={TEMPLATES:"templates",LANES:"lanes",LINES:"lines",PARAMS:"params",CASE_VERSIONS:"case_versions"};_db=null;_openDB(){return new Promise((e,t)=>{if(this._db)return void e(this._db);const n=indexedDB.open(h.DB_NAME,h.DB_VERSION);n.onupgradeneeded=e=>{const t=e.target.result,{STORE_NAMES:n}=h;t.objectStoreNames.contains(n.CASE_VERSIONS)||t.createObjectStore(n.CASE_VERSIONS,{keyPath:"caseId"}),t.objectStoreNames.contains(n.TEMPLATES)||t.createObjectStore(n.TEMPLATES,{keyPath:["caseId","templateId"]}),t.objectStoreNames.contains(n.LANES)||t.createObjectStore(n.LANES,{keyPath:["caseId","laneId"]}),t.objectStoreNames.contains(n.LINES)||t.createObjectStore(n.LINES,{keyPath:["caseId","lineId"]}),t.objectStoreNames.contains(n.PARAMS)||t.createObjectStore(n.PARAMS,{keyPath:["caseId","paramId"]})},n.onsuccess=t=>{this._db=t.target.result,this._db.onclose=()=>{this._db=null},e(this._db)},n.onerror=e=>{t(new Error(`打开数据库失败：${e.target.error.message}`))},n.onblocked=()=>{t(new Error("数据库操作被阻塞，请关闭其他标签页后重试"))}})}closeDB(){return new Promise(e=>{this._db&&(this._db.close(),this._db=null),e()})}_compareVersion(e,t){const n=e=>String(e).split(".").map(Number),a=n(e),r=n(t),s=Math.max(a.length,r.length);for(let e=0;e<s;e++){const t=a[e]||0,n=r[e]||0;if(t>n)return 1;if(t<n)return-1}return 0}_clearSceneData(e){return this._openDB().then(t=>new Promise((n,a)=>{const r=t.transaction([h.STORE_NAMES.CASE_VERSIONS,h.STORE_NAMES.TEMPLATES,h.STORE_NAMES.LANES,h.STORE_NAMES.LINES,h.STORE_NAMES.PARAMS],"readwrite"),s=r.objectStore(h.STORE_NAMES.TEMPLATES),i=r.objectStore(h.STORE_NAMES.LANES),o=r.objectStore(h.STORE_NAMES.LINES),l=r.objectStore(h.STORE_NAMES.CASE_VERSIONS),d=r.objectStore(h.STORE_NAMES.PARAMS),c=IDBKeyRange.bound([e],[e,h.MAX_UNICODE_CHAR]);s.delete(c),i.delete(c),o.delete(c),d.delete(c),l.delete(e),r.oncomplete=()=>n(),r.onerror=e=>a(new Error(`事务失败：${e.target.error.message}`))}))}_promisifyRequest(e){return new Promise((t,n)=>{e.onsuccess=()=>t(e.result),e.onerror=()=>n(e.error)})}forceInitSceneConfig(e,t,n){return e&&t?this._clearSceneData(e).then(()=>{const a=this.setUpData(e,t,n);return this.batchAddConfig(a)}).catch(e=>{throw new Error(`强制初始化场景配置失败：${e.message}`)}):Promise.reject(new Error("caseId和versionCode为强制初始化的必传参数"))}setUpData(e,t,n){const a=n.templates.map(t=>({...t,caseId:e})),r=n.lanes.map(t=>({...t,caseId:e})),s=n.lines.map(t=>({...t,caseId:e})),i=n.params.map(t=>({...t,caseId:e}));return{caseVersion:{caseId:e,versionCode:t,updateTime:new Date},templates:a,lanes:r,lines:s,params:i}}checkConfigIntegrity(e,t){return this.getCaseVersionByCaseId(e).then(n=>!(!n||n.versionCode!==t)&&this.getTemplatesByCaseId(e).then(t=>{if(0===t.length)return!0;const n=t[0].templateId;return this.getLanesByTemplateId(e,n).then(t=>{if(0===t.length)return!0;const n=t[0].laneId;return this.getLinesByLaneId(e,n).then(e=>0===e.length)})}))}_initSceneConfig(e){const{caseVersion:t}=e,{caseId:n,versionCode:a}=t;return this.getCaseVersionByCaseId(n).then(t=>{if(!t)return this.batchAddConfig(e);const r=this._compareVersion(a,t.versionCode);if(r>0)return this._clearSceneData(n).then(()=>this.batchAddConfig(e));if(0===r)return console.log(`场景${n}已存在版本${a}，无需重复创建`),Promise.resolve(t);throw new Error(`场景${n}当前版本${t.versionCode}高于待创建版本${a}。`)})}saveSceneConfig(e,t,n){if(!e||!t)return Promise.reject(new Error("caseId和versionCode为必传参数"));if(!Array.isArray(n.templates)||!Array.isArray(n.lanes)||!Array.isArray(n.lines))return Promise.reject(new Error("templates/lanes/lines必须为数组"));const a=this.setUpData(e,t,n);return this._initSceneConfig(a)}batchAddConfig(e){return this._openDB().then(t=>new Promise((n,a)=>{const r=t.transaction([h.STORE_NAMES.CASE_VERSIONS,h.STORE_NAMES.TEMPLATES,h.STORE_NAMES.LANES,h.STORE_NAMES.LINES,h.STORE_NAMES.PARAMS],"readwrite");r.objectStore(h.STORE_NAMES.CASE_VERSIONS).put(e.caseVersion);const s=r.objectStore(h.STORE_NAMES.TEMPLATES);e.templates.forEach(e=>s.put(e));const i=r.objectStore(h.STORE_NAMES.LANES);e.lanes.forEach(e=>i.put(e));const o=r.objectStore(h.STORE_NAMES.LINES);e.lines.forEach(e=>o.put(e));const l=r.objectStore(h.STORE_NAMES.PARAMS);e.params.forEach(e=>l.put(e)),r.oncomplete=()=>n(e),r.onerror=e=>a(new Error(`批量添加配置失败：${e.target.error.message}`))}))}upsertCaseVersion(e){return this._openDB().then(t=>new Promise((n,a)=>{const r=t.transaction([h.STORE_NAMES.CASE_VERSIONS],"readwrite").objectStore(h.STORE_NAMES.CASE_VERSIONS),s={updateTime:new Date,...e};this._promisifyRequest(r.put(s)).then(()=>n(s)).catch(e=>a(new Error(`更新场景版本失败：${e.message}`)))}))}getCaseVersionByCaseId(e){return this._openDB().then(t=>new Promise((n,a)=>{const r=t.transaction([h.STORE_NAMES.CASE_VERSIONS],"readonly").objectStore(h.STORE_NAMES.CASE_VERSIONS);this._promisifyRequest(r.get(e)).then(e=>n(e||null)).catch(e=>a(new Error(`查询场景版本失败：${e.message}`)))}))}getConfigByCaseId(e){return e?Promise.all([this.getCaseVersionByCaseId(e),this.getTemplatesByCaseId(e),this.getParamsByCaseId(e)]).then(([t,n,a])=>{const r=n.map(t=>this.getLanesByTemplateId(e,t.templateId).then(n=>{const a=n.map(t=>this.getLinesByLaneId(e,t.laneId).then(e=>({...t,lines:e})));return Promise.all(a).then(e=>({...t,lanes:e}))}));return Promise.all(r).then(e=>({caseVersion:t,templates:e,params:a}))}).catch(e=>{throw new Error(`查询场景配置失败：${e.message}`)}):Promise.reject(new Error("caseId为必传参数"))}getConfigByTemplateId(e,t){if(!e||!t)return Promise.reject(new Error("caseId为必传参数"));const n={};return this.getLanesByTemplateId(e,t).then(t=>{const a=t.map(t=>this.getLinesByLaneId(e,t.laneId));return Promise.all(a).then(e=>{e.forEach((e,n)=>{t[n].lines=e}),n.lanes=t})}).then(()=>this.getTemplateById(e,t)).then(e=>(e.lanes=n.lanes,Promise.resolve(e)))}deleteCaseVersion(e){return this._openDB().then(t=>new Promise((n,a)=>{const r=t.transaction([h.STORE_NAMES.CASE_VERSIONS],"readwrite").objectStore(h.STORE_NAMES.CASE_VERSIONS);this._promisifyRequest(r.delete(e)).then(()=>n()).catch(e=>a(new Error(`删除场景版本失败：${e.message}`)))}))}upsertTemplate(e){return this._openDB().then(t=>new Promise((n,a)=>{if(!e.caseId)return void a(new Error("模板数据必须包含caseId"));const r=t.transaction([h.STORE_NAMES.TEMPLATES],"readwrite").objectStore(h.STORE_NAMES.TEMPLATES),s={...e,createDate:e.createDate?new Date(e.createDate):new Date,updateDate:e.updateDate?new Date(e.updateDate):null};return delete s.lanes,this._promisifyRequest(r.put(s)).then(()=>n(s)).catch(e=>a(new Error(`更新模板失败：${e.message}`)))}))}getTemplateById(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.TEMPLATES],"readonly").objectStore(h.STORE_NAMES.TEMPLATES);this._promisifyRequest(s.get([e,t])).then(e=>a(e||null)).catch(e=>r(new Error(`查询模板失败：${e.message}`)))}))}getTemplatesByCaseId(e){return this._openDB().then(t=>new Promise((n,a)=>{const r=t.transaction([h.STORE_NAMES.TEMPLATES],"readonly").objectStore(h.STORE_NAMES.TEMPLATES),s=IDBKeyRange.bound([e],[e,h.MAX_UNICODE_CHAR]);this._promisifyRequest(r.getAll(s)).then(e=>{n(e||[])}).catch(e=>a(new Error(`查询场景下模板失败：${e.message}`)))}))}deleteTemplate(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.TEMPLATES],"readwrite").objectStore(h.STORE_NAMES.TEMPLATES);this._promisifyRequest(s.delete([e,t])).then(()=>a()).catch(e=>r(new Error(`删除模板失败：${e.message}`)))}))}upsertLane(e,t){return this._openDB().then(n=>new Promise((a,r)=>{if(!e||!t.templateId)return void r(new Error("泳道数据必须包含caseId和templateId"));const s=n.transaction([h.STORE_NAMES.LANES],"readwrite").objectStore(h.STORE_NAMES.LANES),i={...t,caseId:e,updateDate:t.updateDate?new Date(t.updateDate):new Date};this._promisifyRequest(s.put(i)).then(()=>a(i)).catch(e=>r(new Error(`更新泳道失败：${e.message}`)))}))}getLaneById(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.LANES],"readonly").objectStore(h.STORE_NAMES.LANES);this._promisifyRequest(s.get([e,t])).then(e=>a(e||null)).catch(e=>r(new Error(`查询泳道失败：${e.message}`)))}))}getLanesByTemplateId(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.LANES],"readonly").objectStore(h.STORE_NAMES.LANES),i=IDBKeyRange.bound([e],[e,h.MAX_UNICODE_CHAR]);this._promisifyRequest(s.getAll(i)).then(e=>e.filter(e=>e.templateId===t)).then(e=>a(e||[])).catch(e=>r(new Error(`查询模板下泳道失败：${e.message}`)))}))}deleteLaneByLaneIds(e,t){return Array.isArray(t)&&0!==t.length?this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.LANES],"readwrite"),i=s.objectStore(h.STORE_NAMES.LANES);t.map(t=>this._promisifyRequest(i.delete([e,t]))),s.oncomplete=()=>a(),s.onerror=e=>r(new Error(`删除泳道失败：${e.target.error.message}`))})):Promise.resolve()}upsertLine(e,t){return this._openDB().then(n=>new Promise((a,r)=>{if(!e||!t.laneId)return void r(new Error("线条数据必须包含caseId和laneId"));const s=n.transaction([h.STORE_NAMES.LINES],"readwrite").objectStore(h.STORE_NAMES.LINES),i={...t,caseId:e,updateDate:t.updateDate?new Date(t.updateDate):new Date};this._promisifyRequest(s.put(i)).then(()=>a(i)).catch(e=>r(new Error(`更新线条失败：${e.message}`)))}))}getLineById(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.LINES],"readonly").objectStore(h.STORE_NAMES.LINES);this._promisifyRequest(s.get([e,t])).then(e=>a(e||null)).catch(e=>r(new Error(`查询线条失败：${e.message}`)))}))}getLinesByLaneId(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.LINES],"readonly").objectStore(h.STORE_NAMES.LINES),i=IDBKeyRange.bound([e],[e,h.MAX_UNICODE_CHAR]);this._promisifyRequest(s.getAll(i)).then(e=>e.filter(e=>e.laneId===t)).then(e=>a(e||[])).catch(e=>r(new Error(`查询泳道下线条失败：${e.message}`)))}))}deleteLineByIds(e,t){return Array.isArray(t)&&0!==t.length?this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.LINES],"readwrite"),i=s.objectStore(h.STORE_NAMES.LINES);t.map(t=>this._promisifyRequest(i.delete([e,t]))),s.oncomplete=()=>a(),s.onerror=e=>r(new Error(`批量删除线条失败：${e.target.error.message}`))})):Promise.resolve()}upsertParam(e){return this._openDB().then(t=>new Promise((n,a)=>{if(!e.caseId)return void a(new Error("参数数据必须包含caseId"));const r=t.transaction([h.STORE_NAMES.PARAMS],"readwrite").objectStore(h.STORE_NAMES.PARAMS),s={...e,updateDate:e.updateDate?new Date(e.updateDate):new Date};this._promisifyRequest(r.put(s)).then(()=>n(s)).catch(e=>a(new Error(`更新参数失败：${e.message}`)))}))}getParamById(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.PARAMS],"readonly").objectStore(h.STORE_NAMES.PARAMS);this._promisifyRequest(s.get([e,t])).then(e=>a(e||null)).catch(e=>r(new Error(`查询参数失败：${e.message}`)))}))}getParamsByCaseId(e){return this._openDB().then(t=>new Promise((n,a)=>{const r=t.transaction([h.STORE_NAMES.PARAMS],"readonly").objectStore(h.STORE_NAMES.PARAMS),s=IDBKeyRange.bound([e],[e,h.MAX_UNICODE_CHAR]);this._promisifyRequest(r.getAll(s)).then(e=>n(e||[])).catch(e=>a(new Error(`查询场景下参数失败：${e.message}`)))}))}deleteParamById(e,t){return this._openDB().then(n=>new Promise((a,r)=>{const s=n.transaction([h.STORE_NAMES.PARAMS],"readwrite").objectStore(h.STORE_NAMES.PARAMS);this._promisifyRequest(s.delete([e,t])).then(()=>a()).catch(e=>r(new Error(`删除参数失败：${e.message}`)))}))}}const u=new h;function f(e){e&&Array.isArray(e.lines)&&e.lines.sort((e,t)=>(e.lineSort??0)-(t.lineSort??0))}function g(e){Array.isArray(e)&&(e.sort((e,t)=>(e.sort??0)-(t.sort??0)),e.forEach(e=>f(e)))}function S(e){return Array.isArray(e)&&0!==e.length?(e.sort((e,t)=>(e.sort??0)-(t.sort??0)),e.forEach(e=>g(e.lanes)),e):e}function y(e){return e?e.lineId&&e.laneId?"line":e.laneId&&e.templateId&&!e.lineId?"lane":e.templateId?"template":null:null}function v(e=!0){let t="";return t="undefined"!=typeof crypto&&crypto.randomUUID?crypto.randomUUID():"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(e){const t=16*Math.random()|0;return("x"===e?t:3&t|8).toString(16)}),e?t.replace(/-/g,""):t}class b{constructor(e,t,n,a=!0){this.caseId=e,this.versionCode=t,this.dataSource=n,this.flatData=a,this.ready=u.saveSceneConfig(e,t,n).catch(a=>(console.warn(`初始化数据库出错，直接重置：${a.message}`),u.forceInitSceneConfig(e,t,n)))}getUserTemplates(){return this.ready.then(()=>u.getConfigByCaseId(this.caseId))}upsertTemplate(e){let t;if(e.templateId)t=u.upsertTemplate(e);else{const n=v();if(e.templateId=n,e.baseTemplate){const a={};t=u.getLanesByTemplateId(this.caseId,e.baseTemplate).then(e=>{a.lanes=e;const t=e.map(e=>u.getLinesByLaneId(this.caseId,e.laneId));return Promise.all(t).then(e=>{const t=[];e.forEach((e,r)=>{const s=v();a.lanes[r].laneId=s,a.lanes[r].templateId=n,a.lanes[r].createUser=void 0,e.forEach(e=>{e.lineId=v(),e.laneId=s,e.createUser=void 0,t.push(e)})}),a.lines=t})}).then(()=>{a.templates=[e]}).then(()=>{a.params=[];const e=u.setUpData(this.caseId,this.versionCode,a);return u.batchAddConfig(e)}).then(()=>u.getTemplateById(this.caseId,n))}else t=u.upsertTemplate(e)}return"1"===e.isPublic?t.then(()=>u.getTemplatesByCaseId(this.caseId).then(t=>t.filter(t=>t.templateId!==e.templateId)).then(e=>{e.forEach(e=>{e.isPublic="0"});const t=e.map(e=>u.upsertTemplate(e));return Promise.all(t)}).then(()=>u.getConfigByTemplateId(this.caseId,e.templateId))):t}deleteTemplate(e){return u.getLanesByTemplateId(this.caseId,e.templateId).then(e=>{const t=e.map(e=>e.laneId);let n=t.map(e=>u.getLinesByLaneId(this.caseId,e));return Promise.all(n).then(e=>{const t=e.reduce((e,t)=>e.concat(t),[]).map(e=>e.lineId);return u.deleteLineByIds(this.caseId,t)}).then(()=>Promise.resolve(t))}).then(e=>u.deleteLaneByLaneIds(this.caseId,e)).then(()=>u.deleteTemplate(this.caseId,e.templateId)).then(()=>Promise.resolve(e))}upsertLane(e){return e.laneId||(e.laneId=v()),e.lines||(e.lines=[]),u.upsertLane(this.caseId,e)}delLane(e){const{lines:t,laneId:n}=e,a=t.map(e=>e.lineId);return u.deleteLineByIds(this.caseId,a).then(()=>u.deleteLaneByLaneIds(this.caseId,[n])).then(()=>Promise.resolve(e))}upsertLine(e){return e.lineId||(e.lineId=v()),e.laneId?u.upsertLine(this.caseId,e):Promise.reject(new Error("更新线条数据的时候，必须laneId不能为空！"))}delLine(e){return e.laneId?u.deleteLineByIds(this.caseId,[e.lineId]):Promise.reject(new Error("更新线条数据的时候，必须laneId不能为空！"))}restoreSetting(){return u.forceInitSceneConfig(this.caseId,this.versionCode,this.dataSource)}getType(){return"local-default"}}class E{static createStrategy(e){if("local"===e.type){let n;if((t=e.dataSource)&&Array.isArray(t.templates)&&Array.isArray(t.lanes)&&Array.isArray(t.lines)&&(0===t.templates.length||!t.templates[0].lanes))n={...e};else{if(!function(e){return Array.isArray(e)?0===e.length||!!e[0]&&Array.isArray(e[0].lanes):!!e&&Array.isArray(e.templates)&&(0===e.templates.length||Array.isArray(e.templates[0].lanes))}(e.dataSource))throw new Error("策略数据源格式不匹配");{const t=function(e){const t=[],n=[],a=[];for(const r of e){const{lanes:e,...s}=r;s.templateId||(s.templateId=v()),t.push(s);for(const t of e||[]){const{lines:e,...r}=t;r.templateId=s.templateId,r.laneId||(r.laneId=v()),n.push(r);for(const t of e||[])t.laneId=r.laneId,t.lineId||(t.lineId=v()),a.push(t)}}return{templates:t,lanes:n,lines:a}}(e.dataSource.templates);n={...e,dataSource:{...t,params:e.dataSource.params}}}}const{caseId:a,versionCode:r,dataSource:s}=n;return new b(a,r,s,!1)}return new p(e);var t}}var I={inject:["upsertTemplate","setTargetData","setExpanded"],props:{currentTemplate:{type:Object},formDisable:{type:Boolean},userTemplate:{type:Array},caseId:{type:String,default:""}},data(){return{formData:Object.assign({sort:void 0},this.currentTemplate),rules:{templateName:[{required:!0,message:"请输入模板名称",trigger:"blur"}]},saving:!1}},methods:{editable(){this.$emit("editable")},submitForm(e){this.$refs[e].validate(e=>{if(!e)return;if("function"!=typeof this.upsertTemplate)return void this.$message({type:"error",message:"没有配置模板管理方法"});this.saving=!0;const t={...this.formData};t.caseId||(t.caseId=this.caseId);const n=this.upsertTemplate(t);n instanceof Promise?n.then(e=>{this.setTargetData(e)}).then(()=>{this.$message({type:"success",message:"保存成功"})}).finally(()=>{this.saving=!1}):this.saving=!1})}},computed:{baseTemplate(){return this.userTemplate?[{name:"空白模板",value:""},...this.userTemplate.map(e=>({name:e.templateName,value:e.templateId}))]:[{name:"空白模板",value:""}]}},watch:{currentTemplate:{deep:!0,handler:function(e){this.formData=Object.assign({},e)}}}};function _(e,t,n,a,r,s,i,o,l,d){"boolean"!=typeof i&&(l=o,o=i,i=!1);const c="function"==typeof n?n.options:n;let m;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,r&&(c.functional=!0)),a&&(c._scopeId=a),s?(m=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},c._ssrRegister=m):t&&(m=i?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,o(e))}),m)if(c.functional){const e=c.render;c.render=function(t,n){return m.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,m):[m]}return n}s(".kd-lane-template-content {\n  display: flex;\n  flex-direction: column;\n  align-content: center;\n}\n.kd-lane-template-content .template-buttons {\n  text-align: center;\n}");const T=I;var x=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"kd-lane-template-content"},[n("el-form",{ref:"template",attrs:{rules:e.rules,model:e.formData,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"模板名称",prop:"templateName"}},[n("el-input",{attrs:{disabled:"SYSTEM_USER"==e.currentTemplate.createUser||e.formDisable},model:{value:e.formData.templateName,callback:function(t){e.$set(e.formData,"templateName",t)},expression:"formData.templateName"}})],1),e._v(" "),n("el-form-item",{attrs:{label:"默认模板",prop:"isPublic"}},[n("el-radio-group",{attrs:{disabled:e.formDisable},model:{value:e.formData.isPublic,callback:function(t){e.$set(e.formData,"isPublic",t)},expression:"formData.isPublic"}},[n("el-radio",{attrs:{label:"1"}},[e._v("是")]),e._v(" "),n("el-radio",{attrs:{label:"0"}},[e._v("否")])],1)],1),e._v(" "),n("el-form-item",{attrs:{label:"曲线高度占比",prop:"col1"}},[n("el-select",{attrs:{disabled:e.formDisable},model:{value:e.formData.col1,callback:function(t){e.$set(e.formData,"col1",t)},expression:"formData.col1"}},[n("el-option",{attrs:{value:"0.5",label:"50%"}}),e._v(" "),n("el-option",{attrs:{value:"0.6",label:"60%"}}),e._v(" "),n("el-option",{attrs:{value:"0.7",label:"70%"}}),e._v(" "),n("el-option",{attrs:{value:"0.8",label:"80%"}}),e._v(" "),n("el-option",{attrs:{value:"0.9",label:"90%"}}),e._v(" "),n("el-option",{attrs:{value:"1",label:"全屏"}})],1)],1),e._v(" "),n("el-form-item",{directives:[{name:"show",rawName:"v-show",value:!e.currentTemplate.templateId,expression:"!currentTemplate.templateId"}],attrs:{label:"选择基础模板",prop:"lineType",disabled:e.formDisable}},[n("el-select",{attrs:{placeholder:"请选择"},model:{value:e.formData.baseTemplate,callback:function(t){e.$set(e.formData,"baseTemplate",t)},expression:"formData.baseTemplate"}},e._l(e.baseTemplate,function(e){return n("el-option",{key:e.value,attrs:{label:e.name,value:e.value}})}),1)],1),e._v(" "),n("el-form-item",{attrs:{label:"顺序",prop:"sort","label-width":"120px"}},[n("el-input",{attrs:{disabled:e.formDisable},model:{value:e.formData.sort,callback:function(t){e.$set(e.formData,"sort",e._n(t))},expression:"formData.sort"}})],1)],1),e._v(" "),n("div",{staticClass:"template-buttons"},[n("el-button",{on:{click:e.editable}},[e._v("编辑")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:e.formDisable,loading:e.saving},on:{click:function(t){return e.submitForm("template")}}},[e._v("保存")])],1)],1)};x._withStripped=!0;const w=_({render:x,staticRenderFns:[]},undefined,T,undefined,false,undefined,!1,void 0,void 0,void 0);var C={inject:["upsertLane","setTargetData","setExpanded"],props:{laneInfo:{type:Object},caseId:{type:String,default:""},formDisable:{type:Boolean}},data(){return{formData:Object.assign(this.laneInfo),rules:{sort:[{required:!0,message:"请输入泳道顺序",trigger:"blur"}]},saving:!1}},methods:{editable(){this.$emit("editable")},submitForm(e){this.$refs[e].validate(e=>{if(!e)return;if("function"!=typeof this.upsertLane)return void this.$message({type:"error",message:"没有配置泳道管理方法"});this.saving=!0;const t={...this.formData};t.caseId||(t.caseId=this.caseId);const n=this.upsertLane(t);n instanceof Promise?n.then(e=>{this.setTargetData(e)}).then(()=>{this.$message({type:"success",message:"保存成功"})}).finally(()=>{this.saving=!1}):this.saving=!1})}},computed:{},watch:{laneInfo:{deep:!0,handler:function(e){this.formData=Object.assign({},e)}}}};s(".kd-lane-lane-content {\n  display: flex;\n  flex-direction: column;\n  align-content: center;\n}\n.kd-lane-lane-content .template-buttons {\n  text-align: center;\n}");const A=C;var D=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"kd-lane-lane-content"},[n("el-form",{ref:"template",attrs:{rules:e.rules,model:e.formData,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"泳道顺序",prop:"sort"}},[n("el-input",{attrs:{disabled:e.formDisable},model:{value:e.formData.sort,callback:function(t){e.$set(e.formData,"sort",t)},expression:"formData.sort"}})],1)],1),e._v(" "),n("div",{staticClass:"template-buttons"},[n("el-button",{on:{click:e.editable}},[e._v("编辑")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:e.formDisable,loading:e.saving},on:{click:function(t){return e.submitForm("template")}}},[e._v("保存")])],1)],1)};D._withStripped=!0;const N=_({render:D,staticRenderFns:[]},undefined,A,undefined,false,undefined,!1,void 0,void 0,void 0);var k={inject:["upsertLine","setTargetData","setExpanded"],props:{template:{type:Object},formDisable:{type:Boolean},params:{type:Array}},mounted(){},data(){const e=(e,t,n)=>{isNaN(t)?n(new Error("请输入数字值")):n()};return{formData:Object.assign({},this.template),lines:[{name:"直线",value:"solid"},{name:"虚线",value:"dashed"},{name:"点线",value:"dotted"},{name:"面积",value:"area"}],lineWidthSliderMarks:{1:"1",2:"2",3:"3",4:"4"},rules:{min:[{required:!0,message:"请输入最小值",trigger:"blur"},{validator:e,trigger:"blur"}],lineSort:[{required:!0,message:"请输入曲线顺序（1-10）",trigger:"blur"},{type:"number",message:"顺序必须为数字值"}],max:[{required:!0,message:"请输入最大值",trigger:"blur"},{validator:e,trigger:"blur"}],lineSize:[{required:!0,message:"请选择曲线粗细",trigger:"blur"}],lineColor:[{required:!0,message:"请选择曲线颜色",trigger:"blur"}],lineType:[{required:!0,message:"请选择线型",trigger:"blur"}],paramId:[{required:!0,message:"请选择参数名称",trigger:"blur"}]}}},methods:{editable(){this.$emit("editable")},submitForm(e){this.$refs[e].validate().then(()=>{if(!(this.upsertLine instanceof Function))return Promise.reject(new Error("未配置线条设置函数"));{const e=this.upsertLine(this.formData);e instanceof Promise?e.then(e=>{this.setTargetData(e)}).then(()=>{this.$message({type:"success",message:"保存成功"})}).finally(()=>{this.saving=!1}):this.saving=!1}}).catch(e=>{console.log(e)})}},watch:{template:{immediate:!1,deep:!0,handler(e){this.formData=Object.assign({},e)}}}};s(".kd-lane-line-content {\n  width: 95%;\n  display: flex;\n  flex-direction: column;\n  align-content: center;\n}\n.kd-lane-line-content .template-buttons {\n  text-align: center;\n}");const L=k;var M=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"kd-lane-line-content"},[n("el-form",{ref:"template",attrs:{rules:e.rules,model:e.formData,disabled:e.formDisable}},[n("el-form-item",{attrs:{label:"参数名称",prop:"paramId","label-width":"120px"}},[n("el-select",{attrs:{filterable:"",placeholder:"请选择"},model:{value:e.formData.paramId,callback:function(t){e.$set(e.formData,"paramId",t)},expression:"formData.paramId"}},e._l(e.params,function(e){return n("el-option",{key:e.paramId,attrs:{label:e.paramName,value:e.paramId}})}),1)],1),e._v(" "),n("el-form-item",{attrs:{label:"最小值",prop:"min","label-width":"120px"}},[n("el-input",{model:{value:e.formData.min,callback:function(t){e.$set(e.formData,"min",t)},expression:"formData.min"}})],1),e._v(" "),n("el-form-item",{attrs:{label:"最大值",prop:"max","label-width":"120px"}},[n("el-input",{model:{value:e.formData.max,callback:function(t){e.$set(e.formData,"max",t)},expression:"formData.max"}})],1),e._v(" "),n("el-form-item",{attrs:{label:"曲线粗细",prop:"lineSize","label-width":"120px"}},[n("el-input",{attrs:{max:4,min:1,type:"number"},model:{value:e.formData.lineSize,callback:function(t){e.$set(e.formData,"lineSize",t)},expression:"formData.lineSize"}})],1),e._v(" "),n("el-form-item",{attrs:{label:"曲线颜色",prop:"lineColor","label-width":"120px"}},[n("el-color-picker",{model:{value:e.formData.lineColor,callback:function(t){e.$set(e.formData,"lineColor",t)},expression:"formData.lineColor"}})],1),e._v(" "),n("el-form-item",{attrs:{label:"线型",prop:"lineType","label-width":"120px"}},[n("el-select",{attrs:{placeholder:"请选择"},model:{value:e.formData.lineType,callback:function(t){e.$set(e.formData,"lineType",t)},expression:"formData.lineType"}},e._l(e.lines,function(e){return n("el-option",{key:e.value,attrs:{label:e.name,value:e.value}})}),1)],1),e._v(" "),n("el-form-item",{attrs:{label:"曲线顺序",prop:"lineSort","label-width":"120px"}},[n("el-input",{model:{value:e.formData.lineSort,callback:function(t){e.$set(e.formData,"lineSort",e._n(t))},expression:"formData.lineSort"}})],1),e._v(" "),e._e()],1),e._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:"SYSTEM_USER"!=e.template.createUser,expression:"template.createUser != 'SYSTEM_USER'"}],staticClass:"template-buttons"},[n("el-button",{on:{click:e.editable}},[e._v("编辑")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:e.formDisable},on:{click:function(t){return e.submitForm("template")}}},[e._v("保存")])],1)],1)};M._withStripped=!0;const R=_({render:M,staticRenderFns:[]},undefined,L,undefined,false,undefined,!1,void 0,void 0,void 0);var P={inject:["delTemplate","delLane","delLine"],provide(){return{setTargetData:this.setTargetData,setExpanded:this.setExpanded}},components:{LineEdit:R,TemplateEdit:w,LaneEdit:N},props:{contextItem:{type:Object,default:()=>{}},expended:{type:Object},caseId:{type:String,default:""},inputTempates:{type:Array,default:()=>[]},params:{type:Array,required:!0,default:()=>[]},paramsNameMap:{type:Object,default:()=>{},required:!0}},data:()=>({templateContentShow:!1,templateDisable:!1,laneContentShow:!1,lineContentShow:!1,templateInfo:{},laneInfo:{},lineInfo:{},dataType:"",curveConfigLoading:!1,expandedKeys:[],currentNodeKey:"",targetData:void 0,treeKey:""}),mounted(){},methods:{getLineDataLabel(e){if(!e)return"";const t=this.paramsNameMap[e.paramId];return t?t.paramName:e.paramId},setTargetData(e){this.targetData=e,this.setExpanded();switch(y(e)){case"template":this.templateContentShow=!0,this.laneContentShow=!1,this.lineContentShow=!1,this.templateDisable=!0,this.templateInfo=e;break;case"lane":this.templateContentShow=!1,this.laneContentShow=!0,this.lineContentShow=!1,this.templateDisable=!0,this.laneInfo=e;break;case"line":this.templateContentShow=!1,this.laneContentShow=!1,this.lineContentShow=!0,this.templateDisable=!0,this.lineInfo=e}},setExpanded(){const e=this.targetData;if(e){switch(y(e)){case"template":this.expandedKeys=[e.templateId],this.currentNodeKey=e.templateId;break;case"lane":this.expandedKeys=[e.laneId],this.currentNodeKey=e.laneId;break;case"line":this.expandedKeys=[e.lineId],this.currentNodeKey=e.lineId;break;default:this.expandedKeys=[],this.currentNodeKey=""}}else this.expandedKeys=[],this.currentNodeKey="";this.$refs.refTree&&this.$refs.refTree.setCurrentKey(this.currentNodeKey),this.treeKey=`treeKey${(new Date).getTime()}`},optionClicked(e){const{option:t={},item:n}=e;switch(t.key){case"delTemplate":this.askForDelTemplate(n);break;case"addLane":this.addLane(n);break;case"delLane":this.askForDelLane(n);break;case"addParam":this.addParam(n);break;case"delParam":this.delParam(n)}},hideContextMenu(){const e=this.$refs.vueSimpleContextMenu;e&&e.hideContextMenu()},showRightWindows(e,t,n){const a=this.judgeDataType(n);this.dataType=a,"SYSTEM_USER"!=t.createUser?this.$refs.vueSimpleContextMenu.showMenu(e,t):this.$message.warning("系统模板不能编辑")},clear(){this.expandedKeys=[],this.templateDisable=!0,this.templateContentShow=!1},editable(){this.templateDisable=!1},handleNodeClick(e){this.setTargetData(e)},judgeDataType(e){const{level:t,data:n={}}=e;return 1==t&&n.templateId?"template":2==t&&n.laneId&&n.templateId?"lane":3==t&&n.lineId?"line":null},addTemplate(){this.templateContentShow=!0,this.laneContentShow=!1,this.lineContentShow=!1,this.templateDisable=!1,this.templateInfo={isPublic:"0",baseTemplate:"",col1:"1"}},addLane(e){this.templateContentShow=!1,this.laneContentShow=!0,this.lineContentShow=!1,this.templateDisable=!1,this.laneInfo={templateId:e.templateId,isUsed:"1",sort:e.lanes.length+1}},addParam(e){this.templateContentShow=!1,this.laneContentShow=!1,this.lineContentShow=!0,this.templateDisable=!1,this.lineInfo={laneId:e.laneId,isUsed:"1",lineSize:2}},askForDelTemplate(e){this.$confirm("此操作将删除该模板, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(()=>(e.bsflag="1",this.curveConfigLoading=!0,this.delTemplate instanceof Function?this.delTemplate(e):Promise.reject(new Error("未配置删除模板函数")))).catch(e=>{this.$message.error(e.message||"删除失败")}).finally(()=>{this.curveConfigLoading=!1})},askForDelLane(e){this.$confirm("此操作将删除该泳道, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(()=>(e.bsflag="1",this.curveConfigLoading=!0,this.delLane instanceof Function?this.delLane(e):Promise.reject(new Error("未配置删除模板函数")))).catch(()=>{this.$message.error("删除失败")}).finally(()=>{this.curveConfigLoading=!1})},delParam(e){this.$confirm("此操作将删除该参数, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(()=>(e.bsflag="1",this.delLine instanceof Function?this.delLine(e):Promise.reject(new Error("未配置删除线条函数")))).catch(e=>{this.$message.error(e.message||"删除失败")})}},computed:{contextMenuOptions(){switch(this.dataType){case"template":return[{name:"新增泳道",key:"addLane"},{name:"删除模板",key:"delTemplate"}];case"lane":return[{name:"新增参数",key:"addParam"},{name:"删除泳道",key:"delLane"}];case"line":return[{name:"删除参数",key:"delParam"}];default:return[]}},treeData(){if(this.inputTempates){const e=[];return this.inputTempates.forEach(t=>{const n={...t,id:t.templateId,label:t.templateName};n.children=[],t.lanes||(t.lanes=[]),t.lanes.forEach((e,t)=>{const a={...e,id:e.laneId,label:`泳道${t+1}`};n.children.push(a),a.lines||(a.lines=[]),a.children=[],e.lines.forEach(e=>{const t={...e,id:e.lineId,label:e.lineName||e.paramId};t.label=this.getLineDataLabel(e),a.children.push(t)})}),e.push(n)}),e}return[]},userTemplate(){return this.treeData?[...this.treeData]:[]}},watch:{contextItem:{immediate:!0,deep:!0,handler(e){this.setTargetData(Object.assign({},e))}}},beforeDestroy(){}};s(".kd-lane-el-container {\n  height: 60vh;\n  border: 1px solid var(--kd-lane-container-border-color, #333);\n  width: 100%;\n}\n@media screen and (max-width: 1024px) {\n.kd-lane-el-container {\n    height: 70vh;\n}\n}\n.kd-lane-el-container .rtd-config-side {\n  border-right: 1px solid var(--kd-lane-container-border-color, #333);\n}\n.kd-lane-el-container .rtd-config-side-tree {\n  height: 90%;\n  overflow: auto;\n}\n.kd-lane-el-container .rtd-config-side-option {\n  text-align: center;\n}\n.kd-lane-el-container .rtd-config-main {\n  display: flex;\n  align-content: center;\n  justify-content: center;\n  width: 100%;\n}");const $=P;var O=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("el-container",{directives:[{name:"loading",rawName:"v-loading",value:e.curveConfigLoading,expression:"curveConfigLoading"}],staticClass:"kd-lane-el-container"},[n("el-aside",{staticClass:"rtd-config-side",attrs:{width:"20%"}},[n("el-tree",{key:e.treeKey,ref:"refTree",staticClass:"rtd-config-side-tree",attrs:{data:e.treeData,"expand-on-click-node":!1,"current-node-key":e.currentNodeKey,"default-expanded-keys":e.expandedKeys,"node-key":"id","highlight-current":""},on:{"node-click":e.handleNodeClick,"node-expand":e.hideContextMenu,"node-collapse":e.hideContextMenu},scopedSlots:e._u([{key:"default",fn:function(t){var a=t.node,r=t.data;return n("span",{staticClass:"custom-tree-node",on:{contextmenu:function(t){return t.preventDefault(),e.showRightWindows(t,r,a)}}},[n("span",[e._v(e._s(a.label))]),e._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:"1"==r.isPublic,expression:"data.isPublic == '1'"}],staticStyle:{"padding-left":"5px"}},[n("i",{staticClass:"el-icon-star-on"})])])}}])}),e._v(" "),n("div",{staticClass:"rtd-config-side-option"},[n("el-button",{on:{click:e.addTemplate}},[e._v("新增模板")])],1)],1),e._v(" "),n("el-main",{staticClass:"rtd-config-main"},[n("TemplateEdit",e._g({directives:[{name:"show",rawName:"v-show",value:e.templateContentShow,expression:"templateContentShow"}],attrs:{currentTemplate:e.templateInfo,"form-disable":e.templateDisable,userTemplate:e.userTemplate,caseId:e.caseId},on:{editable:e.editable}},e.$listeners)),e._v(" "),n("LaneEdit",e._g({directives:[{name:"show",rawName:"v-show",value:e.laneContentShow,expression:"laneContentShow"}],attrs:{laneInfo:e.laneInfo,"form-disable":e.templateDisable},on:{editable:e.editable}},e.$listeners)),e._v(" "),n("LineEdit",e._g({directives:[{name:"show",rawName:"v-show",value:e.lineContentShow,expression:"lineContentShow"}],attrs:{template:e.lineInfo,params:e.params,"form-disable":e.templateDisable},on:{editable:e.editable}},e.$listeners))],1),e._v(" "),n("VueSimpleContextMenu",{ref:"vueSimpleContextMenu",attrs:{"element-id":"kd-lane-chart-context-menu-2",options:e.contextMenuOptions},on:{"option-clicked":e.optionClicked}})],1)};O._withStripped=!0;const B=_({render:O,staticRenderFns:[]},undefined,$,undefined,false,undefined,!1,void 0,void 0,void 0);var j={props:{itemHeight:{type:Number,default:20},line:{type:Object,default:()=>{}},paramsNameMap:{type:Object,default:()=>{},required:!0}},methods:{getParamName(e){if(!e)return"";const t=this.paramsNameMap[e.paramId];return t?`${t.paramName}${t.paramUnit}`:""},toggleIsUsed(){const e={...this.line};"1"==e.isUsed||1==e.isUsed?e.isUsed="0":e.isUsed="1",this.$emit("updateLine",e)}},computed:{textColor(){return{color:this.line.lineColor}},headerItemStyle(){let e;return e="area"==this.line.lineType?{"box-shadow":`inset 0 0 8px 0px ${this.line.lineColor}`}:{"border-bottom":`2px ${this.line.lineType} ${this.line.lineColor}`},{height:`${this.itemHeight}px`,opacity:"1"==this.line.isUsed?1:.5,...e}}},watch:{}};s('@charset "UTF-8";\n.kd-lane-chart-container-header-item {\n  color: var(--kd-lane-container-header-item-color, #333);\n  border: unset;\n  position: relative;\n  cursor: pointer;\n}\n.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container {\n  height: 100%;\n  width: 100%;\n  font-size: 10px;\n  font-weight: bold;\n  position: relative;\n}\n.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .left {\n  position: absolute;\n  left: 0;\n  bottom: 2px;\n}\n.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .center {\n  position: absolute;\n  left: 50%;\n  bottom: 2px;\n  transform: translateX(-50%);\n  /* 文字不换行，超出显示省略号 */\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.kd-lane-chart-container-header-item .kd-lane-chart-container-text-container .right {\n  position: absolute;\n  right: 0;\n  bottom: 2px;\n}');const U=j;var V=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"kd-lane-chart-container-header-item",style:e.headerItemStyle,on:{click:e.toggleIsUsed}},[n("div",{staticClass:"kd-lane-chart-container-text-container"},[n("span",{staticClass:"left",style:e.textColor},[e._v(e._s(e.line.min))]),e._v(" "),n("span",{staticClass:"center"},[e._v(e._s(e.getParamName(e.line)))]),e._v(" "),n("span",{staticClass:"right",style:e.textColor},[e._v(e._s(e.line.max))])])])};V._withStripped=!0;const q=_({render:V,staticRenderFns:[]},undefined,U,undefined,false,undefined,!1,void 0,void 0,void 0);var K={name:"KdLaneChartContainer",provide(){return{upsertTemplate:this.upsertTemplate,delTemplate:this.delTemplate,upsertLane:this.upsertLane,delLane:this.delLane,upsertLine:this.upsertLine,delLine:this.delLine}},components:{HeaderItem:q,RealTimeCurveConfig:B},props:{config:{type:Object,required:!0,validator:function(e){if("object"!=typeof e||null===e)throw new Error("配置必须是一个对象");if(!("type"in e))throw new Error("配置必须包含 type 属性");if(!("caseId"in e)||!("versionCode"in e))throw new Error("配置必须包含 caseId, versionCode 属性");const{type:t}=e;if("local"===t){if(!("dataSource"in e)||null==e.dataSource)throw new Error("local 类型的配置必须包含 dataSource 属性");if(!("params"in e.dataSource))throw new Error("local 类型的配置 dataSource 必须包含 params 属性")}else{if("custom"!==t)throw new Error('type 必须是 "local" 或 "custom"');{const t=["getUserTemplates","upsertTemplate","delTemplate","upsertLane","delLane","upsertLine","delLine"];for(const n of t)if("function"!=typeof e[n])throw new Error(`${n} 必须是一个函数`)}}return!0}},headerPadding:{type:Number,default:4},headerItemHeight:{type:Number,default:20},itemGap:{type:Number,default:2},customMenuList:{type:Array,default:()=>[]}},data:()=>({treeTemplates:null,isLoading:!1,strategy:null,currentTemplate:{},curveConfigVisible:!1,params:[],contextItem:void 0}),created(){this.strategy=E.createStrategy(this.$props.config),this.loadConfig()},mounted(){},methods:{setExpanded(){this.$refs.curveConfig.setExpanded()},delLine(e){return this.strategy.delLine(e).then(()=>{const t=this.currentTemplate.lanes,n=t.findIndex(t=>t.laneId==e.laneId);if(n<0)for(const t of this.treeTemplates){const{lanes:n}=t;for(const t of n)if(t.laneId==e.laneId){const{lines:n}=t,a=n.findIndex(t=>t.lineId==e.lineId);a<0?console.warn("要删除的线条在当前泳道中不存在？"):n.splice(a,1);break}}else{const a=t[n].lines.findIndex(t=>t.lineId==e.lineId);a<0?console.warn("要删除的线条在当前泳道中不存在？"):t[n].lines.splice(a,1),this.onLineChange(e)}})},upsertLine(e){return this.strategy.upsertLine(e).then(e=>{const t=this.currentTemplate.lanes,n=t.findIndex(t=>t.laneId==e.laneId);if(!(n<0)){const a=t[n],r=a.lines,s=r.findIndex(t=>t.lineId==e.lineId);return s<0?r.push(e):this.$set(r,s,e),this.$set(t,n,a),f(a),this.onLineChange(e),e}for(const t of this.treeTemplates){const{lanes:n}=t;for(const t of n)if(t.laneId==e.laneId){const{lines:n}=t,a=n.findIndex(t=>t.lineId==e.lineId);a<0?n.push(e):this.$set(n,a,e),f(t);break}}})},delLane(e){return this.strategy.delLane(e).then(e=>{const{templateId:t}=e,n=this.treeTemplates.findIndex(e=>e.templateId==t);if(n<0)return void console.warn(`template_id not found: '${t}'`);const a=this.treeTemplates[n],r=a.lanes.findIndex(t=>t.laneId==e.laneId);a.lanes.splice(r,1),this.currentTemplate.templateId==t&&this.setDefaultAndNotify()})},upsertLane(e){return this.strategy.upsertLane(e).then(e=>{const t=this.treeTemplates.findIndex(t=>t.templateId==e.templateId);if(t<0)console.warn("template not found");else{const n=this.treeTemplates[t],a=n.lanes||[],r=a.findIndex(t=>t.laneId==e.laneId);r<0?a.push(e):this.$set(a,r,e),g(n.lanes),n.templateId===this.currentTemplate.templateId&&this.setDefaultAndNotify()}return e})},delTemplate(e){return this.strategy.deleteTemplate(e).then(()=>{const t=this.treeTemplates.findIndex(t=>t.templateId===e.templateId);this.treeTemplates.splice(t,1),e.templateId==this.currentTemplate.templateId&&this.setDefaultAndNotify()})},upsertTemplate(e){return this.strategy.upsertTemplate(e).then(e=>{"1"==e.isPublic&&this.treeTemplates.forEach(e=>{e.isPublic="0"});const t=this.treeTemplates.findIndex(t=>t.templateId===e.templateId);if(t>=0){const n=this.treeTemplates[t],a=Object.assign({},n,e);this.$set(this.treeTemplates,t,a)}else this.treeTemplates.push(e);return S(this.treeTemplates),this.setDefaultAndNotify(),e})},onParentContextMenu(e){const t=".kd-lane-chart-lane-header";if(!(e.target&&(e.target.classList.contains(t)||e.target.closest(t)))){e.preventDefault();const t=this.$refs.vueSimpleContextMenu;t&&t.hideContextMenu()}},showContextMenu(e,t){e.stopPropagation(),this.$refs.vueSimpleContextMenu.showMenu(e,t)},optionClicked(e){const{option:t,item:n}=e;this.contextItem=n;const a=this.customMenuList.findIndex(e=>e.key==t.key);if(a<0){if("editTemplate"==t.key)this.curveConfigVisible=!0;else if("restoreSetting"==t.key)return this.strategy.restoreSetting().then(()=>{this.loadConfig()})}else this.$emit("onCustomMenuClicked",e)},loadConfig(){this.isLoading=!0,this.strategy.getUserTemplates().then(e=>{const{templates:t=[],params:n=[]}=e;this.params=n,S(t),this.treeTemplates=t,this.setDefaultAndNotify()}).catch(e=>{console.error(`加载配置失败: ${this.$props.strategy.caseId},${this.$props.strategy.versionCode},${e.message}`)}).finally(()=>{this.isLoading=!1})},onLineChange(e){console.log("notify line change",e),this.$emit("line-change",e)},setDefaultAndNotify(){const e=this.treeTemplates.find(e=>"1"===e.isPublic);if(e)this.currentTemplate=e;else{const e=this.treeTemplates.find(e=>"SYSTEM_USER"==e.createUser);e?(e.isPublic="1",this.currentTemplate=e,this.strategy.upsertTemplate(e)):(this.treeTemplates[0].isPublic="1",this.currentTemplate=this.treeTemplates[0],this.strategy.upsertTemplate(this.currentTemplate))}this.$emit("template-change",this.currentTemplate)}},computed:{contextMenuOptions(){return"local"==this.config.type?[{name:"编辑模板",key:"editTemplate"},{name:"恢复默认",key:"restoreSetting"},...this.customMenuList]:[{name:"编辑模板",key:"template"},...this.customMenuList]},paramsNameMap(){const e={};for(const t of this.params)e[t.paramId]={paramName:t.paramName,paramUnit:t.paramUnit};return e},lineCount(){const{lanes:e=[]}=this.currentTemplate||{};return Math.max(...e.map(e=>e.lines?.length||0))},headerStyle(){const e={gap:`${this.itemGap}px`,padding:`${this.headerPadding}px`};if(this.currentTemplate){const{lanes:t=[]}=this.currentTemplate;if(t&&0!=t.length){const t=Math.max(0,this.lineCount-1);return{...e,height:this.lineCount*this.headerItemHeight+2*this.headerPadding+t*this.itemGap+"px","min-height":"60px"}}return{...e,height:"30%","min-height":"60px"}}return{...e,height:"30%","min-height":"60px"}},darwAreaStyle(){return{top:this.headerStyle.height}}}};s(".kd-lane-chart-container {\n  --border-color: var(--kd-lane-container-border-color, #333);\n  --context-background-color: var(--kd-lane-container-context-background-color, #ecf0f1);\n  --context-hover-color: var(--kd-lane-container-context-hover-color, #007aff);\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n  border: 1px solid var(--border-color);\n  display: flex;\n}\n.kd-lane-chart-container .kd-lane-chart-lane-slot-container, .kd-lane-chart-container .kd-lane-chart-lane-container {\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  z-index: 1;\n}\n.kd-lane-chart-container .kd-lane-chart-lane-slot-container .kd-lane-chart-lane-header, .kd-lane-chart-container .kd-lane-chart-lane-container .kd-lane-chart-lane-header {\n  padding: 4px;\n  max-height: 40%;\n  border-bottom: 1px solid var(--border-color);\n  overflow: hidden;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.kd-lane-chart-container .kd-lane-chart-lane-container {\n  flex: 1;\n}\n.kd-lane-chart-container .kd-lane-chart-lane-slot-container {\n  width: auto;\n}\n.kd-lane-chart-container .border-left {\n  border-left: 1px solid var(--border-color);\n}\n.kd-lane-chart-container .kd-lane-chart-container-draw-area {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 3;\n  border: none;\n}\n.kd-lane-chart-container .vue-simple-context-menu {\n  background-color: var(--context-background-color);\n  position: fixed;\n}\n.kd-lane-chart-container .vue-simple-context-menu .vue-simple-context-menu__item:hover {\n  background: var(--context-hover-color);\n}");const F=K;var H=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{directives:[{name:"loading",rawName:"v-loading",value:e.isLoading,expression:"isLoading"}],staticClass:"kd-lane-chart-container",on:{contextmenu:e.onParentContextMenu}},[e.currentTemplate&&e.currentTemplate.lanes&&e.currentTemplate.lanes.length>0?[e._l(e.currentTemplate.lanes||[],function(t,a){return[e.$scopedSlots["lane"+t.laneId]?n("div",{key:t.laneId,staticClass:"kd-lane-chart-lane-slot-container",class:{"border-left":0!=a}},[n("div",{staticClass:"kd-lane-chart-lane-header",style:e.headerStyle},[e._t("lane"+t.laneId,null,{lane:t})],2)]):e.$slots["lane"+t.laneId]?n("div",{key:""+t.laneId,staticClass:"kd-lane-chart-lane-slot-container",class:{"border-left":0!=a}},[n("div",{staticClass:"kd-lane-chart-lane-header",style:e.headerStyle},[e._t("lane"+t.laneId,null,{lane:t})],2)]):[n("div",{key:t.laneId,staticClass:"kd-lane-chart-lane-container",class:{"border-left":0!=a}},[n("div",{staticClass:"kd-lane-chart-lane-header",style:e.headerStyle,on:{contextmenu:function(n){return n.preventDefault(),e.showContextMenu(n,t)}}},e._l(t.lines||[],function(t){return n("HeaderItem",{key:t.lineId,attrs:{itemHeight:e.headerItemHeight,line:t,paramsNameMap:e.paramsNameMap},on:{updateLine:e.upsertLine},nativeOn:{contextmenu:function(n){return n.preventDefault(),e.showContextMenu(n,t)}}})}),1)])]]})]:[n("div",{staticClass:"kd-lane-chart-lane-container"},[n("div",{staticClass:"kd-lane-chart-lane-header",style:e.headerStyle,on:{contextmenu:function(t){return t.preventDefault(),e.showContextMenu.apply(null,arguments)}}})])],e._v(" "),n("div",{staticClass:"kd-lane-chart-container-draw-area",style:e.darwAreaStyle},[e._t("draw-slot")],2),e._v(" "),n("VueSimpleContextMenu",{ref:"vueSimpleContextMenu",attrs:{"element-id":"kd-lane-chart-context-menu",options:e.contextMenuOptions},on:{"option-clicked":e.optionClicked}}),e._v(" "),n("el-dialog",{attrs:{title:"泳道模板设置",visible:e.curveConfigVisible},on:{"update:visible":function(t){e.curveConfigVisible=t},opened:e.setExpanded}},[n("RealTimeCurveConfig",e._g({ref:"curveConfig",attrs:{inputTempates:e.treeTemplates,caseId:e.strategy.caseId,params:e.params,paramsNameMap:e.paramsNameMap,contextItem:e.contextItem}},e.$listeners))],1)],2)};H._withStripped=!0;const X=_({render:H,staticRenderFns:[]},undefined,F,undefined,false,undefined,!1,void 0,void 0,void 0),z=e=>{e.use(a.default),e.component(d.name,d),e.component(X.name,X)};return"undefined"!=typeof window&&window.Vue&&window.Vue.use(z),{install:z}});
 //# sourceMappingURL=index.min.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kd-lane-container",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "kd-lane-chart-container",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",