@jxstjh/damsec
v0.3.6
Published
damsec section
Downloads
36
Keywords
Readme
大坝监测断面前端组件需求
背景
水利工程运维管理工作中，安装在前端的大坝安全监测设备，通过物联网平台将数据采集到平台后台，在前端展示时用文字及列表的方式能够将工况信息展示给用户，但是缺乏跟现场实际情况和设计图纸的比对，让信息展示效果不佳。现拟对监测断面场景进行归纳总结，将场景内的要素进行分类，要素属性做说明，技术人员生产一个可复用的js-sdk工具包，来实现场景展示。
参考效果2d：
参考效果3d：
要素分析
- 背景
- 标题
- 主体内容
- 大坝监测断面
- 高程刻度尺
- 河流
- 监测设备
- 管式渗压计
- 标线
- 坝轴线
- 浸润线
- 理论浸润线
- 死水位线
- 图例
要素说明
背景
背景图为一张静态图片，起到美化场景的作业。支持外部传入base64等格式的图片。
大坝监测断面
断面信息包含：
- 断面名称
- 断面编码
- 坝体类型
- 断面所属大坝
- 断面所属水库
- 特征点集合
水库信息包含：
- 水库名称
- 水库编码
- 死水位
- 当前水位
- 设计洪水位
- 正常蓄水位
特征点信息包含：
- 特征点名称
- 特征点编码
- 起点距
- 高程
渗压计基本信息包含：
- 测点编码
- 测点主键
- 所属建筑物
- 桩号
- 坝轴距
- 管底高程
- 管口高程
渗压计监测信息包含：
- 测压管水位
- 温度
PaintOpt
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 示例入参
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 示例入参
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)
})