大坝监测断面前端组件需求
背景
水利工程运维管理工作中,安装在前端的大坝安全监测设备,通过物联网平台将数据采集到平台后台,在前端展示时用文字及列表的方式能够将工况信息展示给用户,但是缺乏跟现场实际情况和设计图纸的比对,让信息展示效果不佳。现拟对监测断面场景进行归纳总结,将场景内的要素进行分类,要素属性做说明,技术人员生产一个可复用的js-sdk工具包,来实现场景展示。
参考效果2d:
参考效果3d:
要素分析
要素说明
背景
背景图为一张静态图片,起到美化场景的作业。支持外部传入base64等格式的图片。
大坝监测断面
断面信息包含:
- 断面名称
- 断面编码
- 坝体类型
- 断面所属大坝
- 断面所属水库
- 特征点集合
水库信息包含:
- 水库名称
- 水库编码
- 死水位
- 当前水位
- 设计洪水位
- 正常蓄水位
特征点信息包含:
渗压计基本信息包含:
- 测点编码
- 测点主键
- 所属建筑物
- 桩号
- 坝轴距
- 管底高程
- 管口高程
渗压计监测信息包含:
PaintOpt
interface PaintOpt {
title: string;
featurePoints: FeaturePoint[],
lines: ResLines,
osmometer?: Array<Osmometer>,
damLen?: number,
}
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');
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)
})