@dhicn/devcore-ui

专为 DHI DevCore WebApp 开发的 Vue 3 组件库。提供地图、洪涝（Flood）和供水管网（WD）等业务场景的复用组件。

主要特性

• 基于 Vue 3：使用 Vue 3 Composition API 构建。
• TypeScript 支持：提供完整的类型定义及辅助函数支持。
• 地图组件：开箱即用的地图容器与时间轴动画播控组件。
• 行业定制：针对洪涝（Flood）和供水管网（WD）领域特定的展示场景，内置图表、表格等常用视图组件。

安装

你可以使用 npm, pnpm 或 yarn 进行安装：

npm install @dhicn/devcore-ui

pnpm add @dhicn/devcore-ui

yarn add @dhicn/devcore-ui

基础依赖 (模型基础开发套件)

模型基础开发套件(DevCore)定位为“在线仿真决策支持系统平台与 MIKE 系列模型之间交互的桥梁”，核心特征包括：

1. 上手简便：提供文档、演示与支持资源。
2. 业务广泛：覆盖洪涝、供排水、水环境等场景。
3. 执行高效：降低系统开发难度、缩短交付周期。

官网介绍

• DevCore 官网主页：https://online-products.dhichina.cn/dss-open-platform/devcore/
• 产品指南：https://online-products.dhichina.cn/dss-open-platform/devcore/product/background.html
• 帮助文档：https://online-products.dhichina.cn/dss-open-platform/devcore/help/demo.html
• 产品演示：https://online-products.dhichina.cn/dss-open-platform/dhi-devcore-webapp/
• 接口展示（MIKE+ Flood）：https://online-products.dhichina.cn/dss-open-platform/devcore/product/api/flood.html
• 接口展示（MIKE+ WD）：https://online-products.dhichina.cn/dss-open-platform/devcore/product/api/wd.html
• 接口展示（MIKE21）：https://online-products.dhichina.cn/dss-open-platform/devcore/product/api/m21.html
• 接口展示（MIKE3）：https://online-products.dhichina.cn/dss-open-platform/devcore/product/api/m3.html

同级依赖 (Peer Dependencies)

目前该组件库不包含以下依赖项的打包代码，请确保你的主项目 (Host App) 中已安装以下依赖：

npm install vue maplibre-gl @dhicn/chart tdesign-vue-next tdesign-icons-vue-next dayjs lodash-es

使用方法

引入组件和样式

在你的 Vue 3 项目中，引包及完整的样式文件（请使用 dist/devcore-ui.css 作为组件的样式引入路径）：

<script setup lang="ts">
  import { Map, FloodRainfallPlot } from '@dhicn/devcore-ui'

  // 引入组件库核心样式
  import '@dhicn/devcore-ui/dist/devcore-ui.css'
</script>

<template>
  <map />
  <FloodRainfallPlot />
</template>

引入 TypeScript 类型

本库同样也导出了针对地图、洪涝系统、管网系统的 TypeScript 命名空间类型定义：

import { FloodTypes, WDTypes } from '@dhicn/devcore-ui'

// 示例用法
const floodData: FloodTypes.SomeType = {
  /* ... */
}

组件库定位

devcore-ui 可以理解为 DevCore 业务域的“通用组件库”（类似领域版 Element UI），提供：

• 地图结果展示底座：Map、AnimationControl、LegendItem
• Flood 业务组件：FloodResultItem、FloodSinglePlot、FloodRiverProfile、FloodRainfallPlot/Table
• WD 业务组件：WDResultItem、WDSinglePlotPanel、WDPatternPlot/Table
• 辅助组件：ApiTips

组件本身不调用接口；接口请求与转换由业务层完成，再把标准化数据传给组件。

开发一个功能的标准模式

每个功能都建议按下面 4 步实现：

• 接口确定：确定“基础信息 + GIS + 结果”接口。
• 数据转换：转换为 devcore-ui 需要的结构（地图层、图例、图表）。
• 组件装配：使用 Map + 业务组件 组合页面。
• 事件回流：把切换、播放、点选事件回写到数据状态。

数据契约（必须统一）

地图结果契约

所有结果都统一到：

• GeoJSON.Feature.properties.r0
• GeoJSON.Feature.properties.r1
• ...

其中 r{index} 对应第 index 个时刻。

图例契约

{
  title: string
  min: number
  max: number
  minColor: string
  maxColor: string
  minText?: string
  maxText?: string
}

单点图表契约

{
  time: Date
  value: number
  category: string
  modelId: string
  type: string
}

二维内涝展示（Flood m2d）

功能实现

• 功能：二维内涝时序结果展示（可播放）。
• 接口：
  • /api/Basic/GetModelBasicInfo
  • /api/Basic/GetResultFiles
  • /api/M2DResult/GetDfsuBasicInfo
  • /api/M2DResult/GetItemResultData
• UI 组件：
  • Map
  • AnimationControl
  • LegendItem
  • FloodResultItem（用于切换到 m2d）

逻辑步骤

• 查询模型信息与结果文件，确定 flood 结果文件（dfsu）。
• 查询 2D 基础网格并构造 polygon FeatureCollection。
• 查询 2D 时序结果并写入 properties.r{index}，同时统计 legend，交给 Map + AnimationControl + LegendItem。

接口结构 -> 页面结构转换

• 接口输入（示意）

result = {
  [time: string]: number[]
}
m2dGis.features = GeoJSON.Feature[]

• 转换规则

for each feature i:
  for each time tIdx:
    feature.properties[`r${tIdx}`] = normalize(result[time][i])

• 页面输出

resultSet = {
  resultItem: 'm2d',
  timeList: string[],
  currentIndex: 0,
  layerId: 'MODEL_M2D'
}
legend = { title, min, max, minColor, maxColor }

一维河道结果展示（Flood 1D）

功能实现

• 功能：河道水位/流量时序结果展示。
• 接口：
  • /api/v1/mikeplusflood/river/geojson
  • /api/M1DResult/GetLinkResultByItem
• UI 组件：
  • Map
  • AnimationControl
  • LegendItem
  • FloodResultItem

逻辑步骤

• 获取河网 GIS（水位/流量两类）。
• 获取链路结果并按 muid + chainage 对齐到河道要素。
• 写入 r{index} + 生成 legend，并通过 FloodResultItem 切换结果类型。

接口结构 -> 页面结构转换

• 接口输入

LinkTsResult[] = [{ muid, chainage, timeSeries:[{dt, value}] }]
RiverFeature.properties.ModelFeatureId = `${muid},${chainage}`

• 转换

resultMap[`${muid},${chainage}`] -> feature.properties.r{index}

• 页面输出

• modelLayer[MODEL_M1D].geojson

• legend

• resultSet.timeList

单点查询（Flood/WD）

Flood 单点查询

功能实现

• 功能：点击河道/二维面，查看单点时序。
• 接口：
  • /api/M1DResult/GetLinkTSResult
  • /api/M2DResult/GetItemResultDataByElement
• UI 组件：
  • FloodSinglePlot

逻辑步骤

• 地图点击后记录 HighlightPoint（含 ModelFeatureId/Type/坐标）。
• 按点位类型调用 1D 或 2D 单点接口。
• 转换成统一图表结构，传入 FloodSinglePlot。

接口结构 -> 页面结构转换

TsPairObject[] ({dt,value})
=> {
  time: dayjs(dt).toDate(),
  value: toFixed(value),
  category: `${ModelFeatureId}-${ResultCN}`,
  modelId: ModelFeatureId,
  type: ResultType
}

WD 单点查询

功能实现

• 功能：点击节点/管段，联查压力/流量/流速。
• 接口：
  • /api/MikeWDMain/GetModelResult（按 wdDataType 分次调用）
• UI 组件：
  • WDSinglePlotPanel

逻辑步骤

• 按点位类型分组：junctions、pipes。
• junction 查询 pressure；pipes 查询 flow + velocity。
• 合并后按 type 在 WDSinglePlotPanel 内分图显示。

接口结构 -> 页面结构转换

result.retValue[].values[]
=> {
  time: dayjs(dt).toDate(),
  value: toFixed(value) | abs(toFixed(value)),
  category: muid,
  modelId: muid,
  type: pressure|flow|velocity
}

WD 结果（pressure/flow/velocity）

功能实现

• 功能：管网压力/流量/流速地图播放。
• 接口：
  • /api/MikeWDMain/GetModelInfo
  • /api/MikeWDNetwork/GetAllJunctions
  • /api/MikeWDNetwork/GetAllPipes
  • /api/MikeWDMain/GetModelResult
• UI 组件：
  • Map
  • AnimationControl
  • LegendItem
  • WDResultItem

逻辑步骤

• 获取网络 GIS，并缓存各网络类型 muids。
• 根据结果类型（pressure/flow/velocity）调用结果接口并写入 r{index}。
• 计算分位图例（P10/P90）并更新 resultSet，驱动播放与渲染。

接口结构 -> 页面结构转换

retValue: [{ featureMUID, values:[{dt,value}] }]
+ network gis feature.properties.muid
=> feature.properties.r{index}
=> legend(min,max,minColor,maxColor)

编辑类功能（Rainfall / Pattern）

Flood 边界降雨编辑

• 功能：编辑降雨序列并可视化。
• 接口：/api/RainfallRunoff/GetBoundaryConditionInfo + 更新/运行接口。
• 组件：FloodRainfallTable + FloodRainfallPlot。
• 页面：用户自定义

逻辑步骤：

• 加载边界 tsData。
• 表格编辑回写数组。
• 图表实时展示并提交运行。

WD Pattern 编辑

• 功能：编辑 Pattern（relativeTime/multiplier）。
• 接口：/api/MikeWDPattern/GetAllPatterns + 更新/运行接口。
• 组件：WDPatternTable + WDPatternPlot。
• 页面：用户自定义

逻辑步骤：

• 加载 Pattern 列表与 activePattern。
• 表格编辑 multiplier。
• 图表按 duration 显示并提交运行。