npm package: @jxstjh/damsec
Description: damsec section
Author: jsyang
Latest version: 0.3.6

# 大坝监测断面前端组件需求

### 背景

水利工程运维管理工作中，安装在前端的大坝安全监测设备，通过物联网平台将数据采集到平台后台，在前端展示时用文字及列表的方式能够将工况信息展示给用户，但是缺乏跟现场实际情况和设计图纸的比对，让信息展示效果不佳。现拟对监测断面场景进行归纳总结，将场景内的要素进行分类，要素属性做说明，技术人员生产一个可复用的js-sdk工具包，来实现场景展示。

> 参考效果2d：

[![zKAky4.png](https://s1.ax1x.com/2022/11/19/zKAky4.png)](https://imgse.com/i/zKAky4)
[![zKAsmj.png](https://s1.ax1x.com/2022/11/19/zKAsmj.png)](https://imgse.com/i/zKAsmj)

> 参考效果3d：
[![ppnMG4g.jpg](https://s1.ax1x.com/2023/03/09/ppnMG4g.jpg)](https://imgse.com/i/ppnMG4g)
[![ppnMt3j.jpg](https://s1.ax1x.com/2023/03/09/ppnMt3j.jpg)](https://imgse.com/i/ppnMt3j)
### 要素分析

* 背景
* 标题
* 主体内容
  * 大坝监测断面
  * 高程刻度尺
  * 河流
  * 监测设备
    * 管式渗压计
  * 标线
    * 坝轴线
    * 浸润线
    * 理论浸润线
    * 死水位线
* 图例

### 要素说明

#### 背景

背景图为一张静态图片，起到美化场景的作业。支持外部传入base64等格式的图片。

#### 大坝监测断面

断面信息包含：

* 断面名称
* 断面编码
* 坝体类型
* 断面所属大坝
* 断面所属水库
* 特征点集合

水库信息包含：

* 水库名称
* 水库编码
* 死水位
* 当前水位
* 设计洪水位
* 正常蓄水位

特征点信息包含：

* 特征点名称
* 特征点编码
* 起点距
* 高程

渗压计基本信息包含：

* 测点编码
* 测点主键
* 所属建筑物
* 桩号
* 坝轴距
* 管底高程
* 管口高程

渗压计监测信息包含：

* 测压管水位
* 温度


---

## PaintOpt
```ts
interface PaintOpt {
    title: string;
    featurePoints: FeaturePoint[],// 三维场景时,传入某一断面的特征点 不可传入多个断面特征点的集合
    lines: ResLines,
    osmometer?: Array<Osmometer>, // 三维场景入参时为所有的测压管 二维场景入参时为当前断面的测压管
    damLen?: number, // 大坝长度 单位m
}
interface FeaturePoint {  // 特征点
    redi: number; // 起点距
    poel: number; // 高程
    name: string; // 特征点名称
    code: string; // 特征点编码
    [key: string]: any;
}
interface ResLines { 
    rz: number; // 当前水位
    deadLev: number; // 死水位
    flLowLimLev?: number; // 主汛期限制水位
    normWatLev?: number; // 正常蓄水位
    uppLevFlco?: number; // 防洪高水位
    desLevFlco?: number; // 设计洪水位
    checkLevFlco?: number; // 校核洪水位
    [key: string]: any;
}
interface Osmometer { // 渗压计
    // 基础信息
    code: string, // 监测点编号
    num: string,// 桩号
    ofax: number, // 坝轴距
    tbtpel: number,// 管口高程
    tbbtel: number,// 管底高程
    lgtd?: string, // 经纬度
    lttd?: string, // 经纬度
    // 监测信息
    pztbwl?: number,//监测水位
    tm?: number,//温度
    mstm?: string, // 监测时间
};
```


### DamSection 示例入参

```javascript
        const mockOpt1 = {
            title: '黄金0+120监测断面',
            damLen:200,
            lines: {
                rz: 60.33,
                deadLev: 51.2, // 死水位
                desLevFlco: 66.2, // 设计洪水位
            },
            featurePoints: [
                {
                    "code": -6, // 特征点编码
                    "name": "上游", // 特征点名称
                    "redi": 0.00, // 起点距
                    "poel": 49.50 // 高程
                },
                {
                    "code": -5,
                    "name": "上游",
                    "redi": 9.00,
                    "poel": 54.00,
                },
                {
                    "code": -4,
                    "name": "上游",
                    "redi": 13.00,
                    "poel": 54.00,
                },
                {
                    "code": -3,
                    "name": "上游",
                    "redi": 65.96,
                    "poel": 67.24,
                },
                {
                    "code": -2,
                    "name": "上游",
                    "redi": 67.96,
                    "poel": 67.24,
                },
                {
                    "code": -1,
                    "name": "上游",
                    "redi": 107.43,
                    "poel": 79.46,
                },
                {
                    "code": 0,
                    "name": "坝轴线",
                    "redi": 110.43,
                    "poel": 79.46,
                },
                {
                    "code": 1,
                    "name": "下游",
                    "redi": 113.43,
                    "poel": 79.46,
                },
                {
                    "code": 2,
                    "name": "下游",
                    "redi": 152.39,
                    "poel": 64.00,
                },
                {
                    "code": 3,
                    "name": "下游",
                    "redi": 154.39,
                    "poel": 64.00,
                },
                {
                    "code": 4,
                    "name": "下游",
                    "redi": 191.37,
                    "poel": 49.50,
                },
                {
                    "code": 5,
                    "name": "下游",
                    "redi": 193.37,
                    "poel": 49.50,
                },
                {
                    "code": 6,
                    "name": "下游",
                    "redi": 195.37,
                    "poel": 48.00,
                },
            ],
            osmometer: [
                {
                    code: "UP11", // 监测点编号
                    num: "0+120", // 桩号
                    ofax: -5.50, // 坝轴距
                    tbtpel: 78.884, // 管口高程
                    tbbtel: 58.784, // 管底高程
                    pztbwl: 60.88, // 测压管水位
                    tm: 10.80, // 温度
                    mstm: "2022-12-03 12:00:00"
                }, {
                    code: "UP12",
                    num: "0+120",
                    ofax: 5.00,
                    tbtpel: 78.367,
                    tbbtel: 56.907,
                    pztbwl: 57.88, // 测压管水位
                    tm: 10.80, // 温度
                    mstm: "2022-12-03 12:00:00"
                },
                {
                    code: "UP13",
                    num: "0+120",
                    ofax: 40.00,
                    tbtpel: 64.995,
                    tbbtel: 53.345,
                    pztbwl: 54.88, // 测压管水位
                    tm: 10.80, // 温度
                    mstm: "2022-12-03 12:00:00"
                },
                {
                    code: "UP14",
                    num: "0+120",
                    ofax: 72.00,
                    tbtpel: 52.522,
                    tbbtel: 47.552,
                    mstm: "2022-12-03 12:00:00",
                    pztbwl: 49.28,
                    tm: 11.40, // 温度
                },
            ]
        }
        const dam2d = new jhdamsec.DamSection('box2d'); // dom id = box2d
        dam2d.painting(mockOpt1);
```
### Dam3dSection 示例入参

```javascript
   mockOpt2 = {
            title: '社上0+50监测断面',
            damLen: 155,
            lines: {
                rz: 158.31,
                deadLev: 151.2, // 死水位
                desLevFlco: 172.2, // 设计洪水位
            },
            featurePoints: [
                {
                    "code": -6,
                    "name": "上游坝底",
                    "redi": 0.00,
                    "poel": 136.00,
                },
                {
                    "code": -5,
                    "name": "上游马道1",
                    "redi": 84.00,
                    "poel": 160.00,
                },
                {
                    "code": -4,
                    "name": "上游马道2",
                    "redi": 97.00,
                    "poel": 160.00,
                },
                {
                    "code": -3,
                    "name": "上游马道3",
                    "redi": 135.50,
                    "poel": 171.00,
                },
                {
                    "code": -2,
                    "name": "上游马道4",
                    "redi": 137.00,
                    "poel": 171.00,
                },
                {
                    "code": -1,
                    "name": "上游坝顶",
                    "redi": 151.60,
                    "poel": 175.50,
                },
                {
                    "rscd": "360884001",
                    "hycncd": "101",
                    "code": 0,
                    "name": "坝轴",
                    "redi": 157.60,
                    "poel": 175.50,
                    "rsnm": "社上",
                    "hycnm": "一号坝"
                },
                {
                    "code": 1,
                    "name": "下游坝顶",
                    "redi": 163.60,
                    "poel": 175.50,
                },
                {
                    "code": 2,
                    "name": "下游马道1",
                    "redi": 178.20,
                    "poel": 169.00,
                },
                {
                    "code": 3,
                    "name": "下游马道2",
                    "redi": 180.20,
                    "poel": 169.00,
                },
                {
                    "code": 4,
                    "name": "下游马道3",
                    "redi": 202.70,
                    "poel": 160.00,
                },
                {
                    "code": 5,
                    "name": "下游马道4",
                    "redi": 204.70,
                    "poel": 160.00,
                },
                {
                    "code": 6,
                    "name": "下游马道5",
                    "redi": 231.70,
                    "poel": 151.00,
                },
                {
                    "code": 7,
                    "name": "下游马道6",
                    "redi": 234.70,
                    "poel": 151.00,
                },
                {
                    "code": 8,
                    "name": "下游马道7",
                    "redi": 250.90,
                    "poel": 140.20,
                },
                {
                    "code": 9,
                    "name": "下游马道8",
                    "redi": 253.40,
                    "poel": 140.20,
                },
                {
                    "code": 10,
                    "name": "坝脚",
                    "redi": 259.10,
                    "poel": 136.00,
                }
            ],
            osmometer: [
                {
                    code: "UP1-1", // 监测点编号
                    num: "0+025", // 桩号
                    ofax: -6, // 坝轴距
                    tbtpel: 175.1, // 管口高程
                    tbbtel: 137.43, // 管底高程
                    mstm: "2022-12-04 21:00:00",
                    pztbwl: 148.61,
                    tm: 21.2, // 温度
                }, {
                    code: "UP1-2", // 监测点编号
                    num: "0+025", // 桩号
                    ofax: 6, // 坝轴距
                    tbtpel: 174.94, // 管口高程
                    tbbtel: 138.44, // 管底高程
                    mstm: "2022-12-04 21:00:00",
                    pztbwl: 145.03,
                    tm: 21.7, // 温度
                }, {
                    code: "UP1-3", // 监测点编号
                    num: "0+025", // 桩号
                    ofax: 25, // 坝轴距
                    tbtpel: 168.09, // 管口高程
                    tbbtel: 137.51, // 管底高程
                    mstm: "2022-12-04 21:00:00",
                    pztbwl: 145.65,
                    tm: 21.1, // 温度
                },
                {
                    code: "UP1-4", // 监测点编号
                    num: "0+025", // 桩号
                    ofax: 50, // 坝轴距
                    tbtpel: 158.83, // 管口高程
                    tbbtel: 137.71, // 管底高程
                    mstm: "2022-12-04 21:00:00",
                    pztbwl: 144.95,
                    tm: 19.5, // 温度
                },
                {
                    code: "UP2-1", // 监测点编号
                    num: "0+075", // 桩号
                    ofax: -6, // 坝轴距
                    tbtpel: 175.1, // 管口高程
                    tbbtel: 137.43, // 管底高程
                    mstm: "2022-12-04 21:00:00",
                    pztbwl: 148.61,
                    tm: 21.2, // 温度
                }, {
                    code: "UP2-2", // 监测点编号
                    num: "0+075", // 桩号
                    ofax: 6, // 坝轴距
                    tbtpel: 174.94, // 管口高程
                    tbbtel: 138.44, // 管底高程
                    mstm: "2022-12-04 21:00:00",
                    pztbwl: 145.03,
                    tm: 21.7, // 温度
                }, {
                    code: "UP2-3", // 监测点编号
                    num: "0+075", // 桩号
                    ofax: 25, // 坝轴距
                    tbtpel: 168.09, // 管口高程
                    tbbtel: 137.51, // 管底高程
                    mstm: "2022-12-04 21:00:00",
                    pztbwl: 145.65,
                    tm: 21.1, // 温度
                },
                {
                    code: "UP2-4", // 监测点编号
                    num: "0+075", // 桩号
                    ofax: 50, // 坝轴距
                    tbtpel: 158.83, // 管口高程
                    tbbtel: 137.71, // 管底高程
                    mstm: "2022-12-04 21:00:00",
                    pztbwl: 144.95,
                    tm: 19.5, // 温度
                }, {
                    code: "UP3-1", // 监测点编号
                    num: "0+125", // 桩号
                    ofax: -6, // 坝轴距
                    tbtpel: 175.1, // 管口高程
                    tbbtel: 137.43, // 管底高程
                    mstm: "2022-12-04 21:00:00",
                    pztbwl: 148.61,
                    tm: 21.2, // 温度
                }, {
                    code: "UP3-2", // 监测点编号
                    num: "0+125", // 桩号
                    ofax: 6, // 坝轴距
                    tbtpel: 174.94, // 管口高程
                    tbbtel: 138.44, // 管底高程
                    mstm: "2022-12-04 21:00:00",
                    pztbwl: 148.03,
                    tm: 21.7, // 温度
                }, {
                    code: "UP3-3", // 监测点编号
                    num: "0+125", // 桩号
                    ofax: 25, // 坝轴距
                    tbtpel: 168.09, // 管口高程
                    tbbtel: 137.51, // 管底高程
                    mstm: "2022-12-04 21:00:00",
                    pztbwl: 147.65,
                    tm: 21.1, // 温度
                },
                {
                    code: "UP3-4", // 监测点编号
                    num: "0+125", // 桩号
                    ofax: 50, // 坝轴距
                    tbtpel: 158.83, // 管口高程
                    tbbtel: 137.71, // 管底高程
                    mstm: "2022-12-04 21:00:00",
                    pztbwl: 141.95,
                    tm: 19.5, // 温度
                },
            ]
        }
        const dam3d = new jhdamsec.Dam3dSection('box3d');
        setTimeout(() => {
            dam3d.control.autoRotate = false; // 场景自动旋转
        }, 5000)
        dam3d.painting(mockOpt2);
        dam3d.on('onOsmometerClick', (code, event) => {
            console.log(code, event)
        })
        dam3d.on('onModelClick', (code, event) => {
            console.log(code, event)
        })
        dam3d.on('onStaffGaugeClick', (code, event) => {
            console.log(code, event)
        })
```