irrigation-component
水利小工具 :)
此项目新增功能模块规范
步骤
1.在/src/components 下新创建文件夹(小驼峰),文件夹下新建同名vue组件(大驼峰)
2.修改index.js与main.js 将自己的组件引入
规范
1.组件传参,需要考虑用户不传参的默认值,根据具体情况,可以在prop中写入default或者在代码中写入判断
LegendDynamic 图例
参数
如非特殊标明,均可非必填
属性 | 类型 | 描述 | 备注 |
---|
expendAll | boolean(true) | 是否需要全部展开按钮 |
checkbox | object | 内置折叠面板是否有复选框 | {rainStation: true,Reservoirs: true,smallReservoirs: true,hydrometricStation: true,waterLevelStation: true,riskLevel: true,isosurface: true,} |
legendAbbr | boolean(true) | 是否需要缩略图标 | 非必填 |
imgAbbr | string | 缩略图标图片路径 |
legendWidth | number | 整个图例宽度 |
liWidth | number | 每项图例的宽度 | 通过调节 legendWidth 与 liWidth 可控制每行多少个图例 |
legendBorder | boolean(true) | 是否需要图例外部的边框样式 |
legendTool | boolean(true) | 是否需要标题栏 |
legendTitle | string | 标题名称 |
closeBtn | boolean(true) | 是否需要关闭按钮 |
commonList | Object(默认全部展示非选中) | 下方多选折叠面板 | 详细格式见下方,不传展示全部面板,传空对象则为空 |
commonLegendShow | boolean(true) | 是否展示下方折叠面板 |
legendList | array | 自定义图标数组 | 详细格式如下 |
collapseList | array | 折叠面板图标数组 | (绑定方式为v-model:collapseList="collapseList")每新增一个折叠面板,数组中多一个对象,collapseList每个对象中的legendList同下 |
数据格式:
collapseList:[{
title: "风险等级",
key:"riskLevel",
checked: false,
checkbox:true,//是否需要复选框
indeterminate:true,//是否部分选中状态(为true时,优先级在checked上)
legendList: [],//写法同legendList
},
{
title: "风险等级",
key:"riskLevel",
checked: false,
checkbox:false,
legendList: [],//写法同legendList
}],
其中legendList格式如下:
属性 | 类型(默认值) | 描述 | 备注 |
---|
src | string | 每项图例左侧是图片 | src/colorCircular/colorBlock/value此四个属性可单独或同时使用 |
colorCircular | string | 每项图例左侧是圆形色块 | 同上 |
colorBlock | string | 每项图例左侧是方形色块 | 同上 |
value | string | 每项图例左侧是文字 | 同上 |
unchecked | boolean(true) | 是否选中图片 | 当以上src/colorCircular/colorBlock属性存在时,额外提供此参数实现点击图例置灰及显示的功能(true:图片路径为 src,false:图片路径为unCheckedSrc) |
uncheckedSrc | string | 非选中的图片路径 | 当同时存在src及unchecked参数时,需要此属性展示未选择展示图片 |
change | boolean | 是否需要切换图例图片 | 参数为false时,点击图例图片不会切换,默认可以不传 |
其中commonList格式如下:
属性 | 类型(默认值) | 描述 | 备注 |
---|
rainStation | Array | 雨量站 | 共六项,图例是否选中默认值,false,true,true,false,true,false,true为未选中灰色,true为选中彩色,若数组数量不对,则全置为灰色 |
Reservoirs | Array | 大中型水库 | 共四项 |
smallReservoirs | Array | 小型水库 | 共四项 |
hydrometricStation | Array | 水文站 | 共三项 |
waterLevelStation | Array | 水位站 | 共三项 |
riskLevel | Array | 风险等级 | 共三项 |
isosurface | Array | 等值面 | 共六项 |
插槽
left //在图例外层提供插槽
content //在图例标题栏与内容直接提供插槽
事件
closeLegend //关闭图标点击事件
legendAbbrClick //缩略图图标点击事件
liClick //单项图例点击事件
checkItem //折叠面板多选按钮点击事件
雨量过程图组件-AccumulatedRainfall
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
rainData | Object | 雨量过程数据 | 其中对象包含的属性为下表字段 对象中的属性除了时间(tm)若不需要可以不传 |
searchShow | Boolean | 是否展示查询框 | 用于外层div较小时 |
commonlyTM | Boolean | 是否展示常用时间 | |
beginTime | String | 开始时间 | 无数据是传''空字符串 |
endTime | String | 结束时间 | 无数据是传''空字符串 |
isPart | Boolean | 是否部分展示 | 为true时 默认展示前六条数据 |
rainData属性详情
rainData属性 | 类型(默认值) | 描述 | 备注 |
---|
drp | Array | 降雨量 | 无数据时请传[]空数组 |
totalDrp | Array | 累计降雨量 | 无数据时请传[]空数组 |
drpForecast | Array | 预报降雨量 | 无数据时请传[]空数组 |
totalDrpForecast | Array | 预报累计降雨量 | 无数据时请传[]空数组 |
tm | Array | 时间 | 无数据时请传[]空数组 数组内格式为'yyyy-mm-dd HH:mm:ss','yyyy-mm-dd HH:mm:ss' |
tmCurrent | String | 当前时间 | 格式为'yyyy-mm-dd HH:mm:ss'(无数据时请传''空字符串) |
事件
timeChange // 时间选择事件,必需声明,返回数据格式为 ['开始时间','结束时间']
雨量过程图组件-AccumulatedRainfallV2
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
rainData | Object | 雨量过程数据 | 其中对象包含的属性为下表字段 对象中的属性除了时间(tm)若不需要可以不传 |
searchShow | Boolean | 是否展示查询框 | 用于外层div较小时 |
query | Object | 查询条件 | |
shortcuts | String | 结束时间 | 无数据是传''空字符串 |
isPart | Boolean/Number | 是否部分展示 | 为数字时 默认展示前n条数据 |
shotcutParse2Range | Function | shortcut选中后转化为时间范围的换算方法,默认为当前时刻向前推算选中的时长 | function(value: Number): beginTime, endDate {} |
beforeRender | Function | 该方法在调用 echart.setOption 之前调用,接受到的参数是组装好的echarts options数据,返回的数据会被传入到 echart.setOption 中,支持返回一个 Promise ,resolve的参数会被传入到 echart.setOption 中。 | 用来对echarts配置进行修改,从而实现组件的特殊化定制; |
query属性
| 属性 | 类型(默认值) |描述|备注|
| ---- | ---- | ---- | ---- |
|query.beginTime| String| 结束时间| 无数据是传''空字符串 |
|query.endTime| String| 结束时间| 无数据是传''空字符串 |
shortcuts属性
| 属性 | 类型(默认值) |描述|备注|
| ---- | ---- | ---- | ---- |
|value| String| 值| |
|label| String| 显示文字| |
rainData属性详情
rainData属性 | 类型(默认值) | 描述 | 备注 |
---|
drp | Array | 降雨量 | 无数据时请传[]空数组 |
totalDrp | Array | 累计降雨量 | 无数据时请传[]空数组 |
drpForecast | Array | 预报降雨量 | 无数据时请传[]空数组 |
totalDrpForecast | Array | 预报累计降雨量 | 无数据时请传[]空数组 |
tm | Array | 时间 | 无数据时请传[]空数组 数组内格式为'yyyy-mm-dd HH:mm:ss','yyyy-mm-dd HH:mm:ss' |
tmCurrent | String | 当前时间 | 格式为'yyyy-mm-dd HH:mm:ss'(无数据时请传''空字符串) |
slot插槽
| 插槽名 | 说明 |
| ---- | ----------- |
|query| 自定义筛选的条件,作用域回传 query, shortcuts|
事件
timeChange // 时间选择事件,必需声明,返回数据格式为 ['开始时间','结束时间']
水位流量过程线组件-StageDischargeLine
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
stageDischargeData | Object | 水位流量过程数据 | 其中对象包含的属性为下表字段 对象中的属性除了时间(tm)若不需要可以不传 |
searchShow | Boolean | 是否展示查询框 | 用于外层div较小时 |
commonlyTM | Boolean | 是否展示常用时间 | |
isFacing | Boolean | 是否贴到Y轴 | |
beginTime | String | 开始时间 | 无数据是传''空字符串 |
endTime | String | 结束时间 | 无数据是传''空字符串 |
selectLegend | Object | 图例选中状态 | 自定义图例选中状态格式{'api预报水位': false, '预报水位': true} 默认为全部选中状态 |
precision | Number | 水位线y轴在取整时舍进位的精度,非必传默认值为5 | 比如最高水位xMax传入211.36,会根据精度换算到215 |
beforeRender | Function | 该方法在调用 echart.setOption 之前调用,接受到的参数是组装好的echarts options数据,返回的数据会被传入到 echart.setOption 中,支持返回一个 Promise ,resolve的参数会被传入到 echart.setOption 中。 | 用来对echarts配置进行修改,从而实现组件的特殊化定制; |
validProps | Function | 该方法在接收到stageDischargeData和其发生改变时执行,接收参数是 stageDischargeData。 | 组件内增加了对 保证水位 和 警戒水位的验证,未传入用 ElMessage 给出警告提示(该方法为了快速支持已引用部分的快速验证)。为了实现组件默认支持全部验证又允许部分组件对某一项进行验证。 |
stageDischargeData属性详情
stageDischargeData属性 | 类型(默认值) | 描述 | 备注 |
---|
drp | Array | 降雨量 | 无数据时请传[]空数组 |
drpForecast | Array | 预报降雨量 | 无数据时请传[]空数组 |
z | Array | 监测水位 | 无数据时请传[]空数组 |
q | Array | 监测流量 | 无数据时请传[]空数组 |
zForecast | Array | 预报水位 | 无数据时请传[]空数组 |
zForecastAPI | Array | api预报水位 | 无数据时请传[]空数组 |
zForecastXAJ | Array | 新安江预报水位 | 无数据时请传[]空数组 |
zForecastSKBY | Array | 时空变源预报水位 | 无数据时请传[]空数组 |
qForecast | Array | 预报流量 | 无数据时请传[]空数组 |
qForecastAPI | Array | api预报流量 | 无数据时请传[]空数组 |
qForecastXAJ | Array | 新安江预报流量 | 无数据时请传[]空数组 |
qForecastSKBY | Array | 时空变源预报流量 | 无数据时请传[]空数组 |
tm | Array | 时间 | 无数据时请传[]空数组 数组内格式为'yyyy-mm-dd HH:mm:ss','yyyy-mm-dd HH:mm:ss' |
tmCurrent | String | 当前时间 | 格式为'yyyy-mm-dd HH:mm:ss'(无数据时请传''空字符串) |
zWarn | String | 警戒水位 | 无数据时请传''空字符串 |
zGuarantee | String | 保证水位 | 无数据时请传''空字符串 |
zMax | String | 水位轴最大水位 | 无数据时请传''空字符串 |
zMin | String | 水位轴最小水位 | 无数据时请传''空字符串 |
事件
timeChange // 时间选择事件,必需声明,返回数据格式为 ['开始时间','结束时间']
水库水位流量过程线组件-StageDischargeLineReservoir
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
stageDischargeData | Object | 水位流量过程数据 | 其中对象包含的属性为下表字段 对象中的属性除了时间(tm)若不需要可以不传 |
searchShow | Boolean | 是否展示查询框 | 用于外层div较小时 |
commonlyTM | Boolean | 是否展示常用时间 | |
isFacing | Boolean | 是否贴到Y轴 | |
beginTime | String | 开始时间 | 无数据是传''空字符串 |
endTime | String | 结束时间 | 无数据是传''空字符串 |
selectLegend | Object | 图例选中状态 | 自定义图例选中状态格式{'api预报水位': false, '预报水位': true} 默认为全部选中状态 |
axleInfo | Array | y轴位置信息 | { type: 'z',position: 'left',offset: 0 },{ type: 'q',position: 'right',offset: 0 },{ type: 'rain',position: 'right',offset: 45,nameLocation: 'start' }, |
precision | Number | 水位线y轴在取整时舍进位的精度,非必传默认值为5 | 比如最高水位xMax传入211.36,会根据精度换算到215 |
beforeRender | Function | 该方法在调用 echart.setOption 之前调用,接受到的参数是组装好的echarts options数据,返回的数据会被传入到 echart.setOption 中,支持返回一个 Promise ,resolve的参数会被传入到 echart.setOption 中。 | 用来对echarts配置进行修改,从而实现组件的特殊化定制; |
validProps | Function | 该方法在接收到stageDischargeData和其发生改变时执行,接收参数是 stageDischargeData。 | 组件内增加了对 汛限水位、允许壅高水位 和 警戒水位的验证,未传入用 ElMessage 给出警告提示(该方法为了快速支持已引用部分的快速验证)。为了实现组件默认支持全部验证又允许部分组件对某一项进行验证。 |
stageDischargeData属性详情
stageDischargeData属性 | 类型(默认值) | 描述 | 备注 |
---|
drp | Array | 面降雨量 | 无数据时请传[]空数组 |
z | Array | 库水位 | 无数据时请传[]空数组 |
qIn | Array | 入库流量 | 无数据时请传[]空数组 |
qOut | Array | 出库流量 | 无数据时请传[]空数组 |
zForecast | Array | 预报库水位 | 无数据时请传[]空数组 |
qInForecast | Array | 预报入库流量 | 无数据时请传[]空数组 |
qOutForecast | Array | 预报出库流量 | 无数据时请传[]空数组 |
tm | Array | 时间 | 无数据时请传[]空数组 数组内格式为'yyyy-mm-dd HH:mm:ss','yyyy-mm-dd HH:mm:ss' |
tmCurrent | String | 当前时间 | 格式为'yyyy-mm-dd HH:mm:ss'(无数据时请传''空字符串) |
zLimit | String | 汛限水位 | 无数据时请传''空字符串 |
zDesign / allRaiseLev | String | 允许壅高水位 | 无数据时请传''空字符串 |
zCheck / warningStag | String | 警戒水位 | 无数据时请传''空字符串 |
allMaxLev | String | 允许最高水位 | 无数据时请传''空字符串 |
zMax | String | 水位轴最大水位 | 无数据时请传''空字符串 |
zMin | String | 水位轴最小水位 | 无数据时请传''空字符串 |
axleInfo属性详情
axleInfo属性 | 类型(默认值) | 描述 | 备注 |
---|
type | String | y轴类型 | z: 水位 q: 流量 rain: 雨量 必填 |
position | String | y轴位置 | left: 左边 right: 右边 必填 |
offset | Number | 偏移距离 | 默认0 非必填 |
nameLocation | String | 标签位置 | start: 轴开始位置 end: 轴结束位置 |
事件
timeChange // 时间选择事件,必需声明,返回数据格式为 ['开始时间','结束时间']
断面横剖面组件-CrossSection
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
crossSectionData | Object | 断面横剖面数据 | 其中对象包含的属性为下表字段 |
crossSectionData属性详情
section数组中对象属性详情
属性 | 类型(默认值) | 描述 | 备注 |
---|
startingDistance | Number | 起点距 | |
elevation | Number | 高程 | |
remark | String | 备注 | 无数据时请传''空字符串 |
水位流量关系曲线组件-StageDischargeRelation
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
stageDischargeData | Object | 水位流量关系曲线数据 | 其中对象包含的属性为下表字段 |
stageDischargeData属性详情
stageDischargeData属性 | 类型(默认值) | 描述 | 备注 |
---|
stageInfo | Array | 水位信息 | 格式为[{name: '水位流量关系曲线', z: '113.000', '113.500',...}] 其中 name为曲线名称 z为水位数据 |
q | Array | 流量 | 无数据时请传[]空数组 |
zWarn | String | 警戒水位 | 无数据时请传''空字符串 |
zGuarantee | String | 保证水位 | 无数据时请传''空字符串 |
水位库容曲线组件-StorageCurve
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
storageCurveData | Object | 水位库容曲线数据 | 其中对象包含的属性为下表字段 |
storageCurveData属性详情
storageCurveData属性 | 类型(默认值) | 描述 | 备注 |
---|
z | Array | 水位 | 无数据时请传[]空数组 |
capacity | Array | 库容 | 无数据时请传[]空数组 |
unit | Object | 水位库容单位 | 默认: { z: "m", capacity: "万m³" } |
水库剖面图组件-ReservoirProfile
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
profileData | Object | 水库剖面数据 | 其中对象包含的属性为下表字段 |
titleShow | Boolean | 是否展示标题 | |
profileData属性详情
profileData属性 | 类型(默认值) | 描述 | 备注 |
---|
z | Number | 当前水位 | 无数据时请传0 |
zForecast | Number | 预报最高水位 | 无数据时请传0 |
maxZ | Number | 最高水位 | 无数据时请传0 |
zCheck | Number | 警戒水位 | 无数据时请传0 |
zDesign | Number | 允许壅高水位 | 无数据时请传0 |
crestElevation | Number | 坝顶高程 | 无数据时请传0 |
zLimit | Number | 汛限水位 | 无数据时请传0 |
zDead | Number | 死水位 | 无数据时请传0 |
zNormal | Number | 正常蓄水位 | 无数据时请传0 |
zXunqianLimit | Number | 汛前水位 | 无数据时请传0 |
zXunzhongLimit | Number | 汛中水位 | 无数据时请传0 |
zXunmoLimit | Number | 汛末水位 | 无数据时请传0 |
timeForecast | String | 预报最高水位时间 | 格式为'yyyy-mm-dd HH:mm:ss' 无数据时请传'' |
color | String | 标题字体颜色 | 格式为'#ffffff' 无数据时请传''或者null |
水库剖面图组件-ReservoirCrossSection
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
profileData | Object | 水库剖面数据 | 其中对象包含的属性为下表字段 |
titleShow | Boolean | 是否展示标题 | |
profileData属性详情
profileData属性 | 类型(默认值) | 描述 | 备注 |
---|
z | Number | 当前水位 | 无数据时请传0 |
zForecast | Number | 预报最高水位 | 无数据时请传0 |
zCheck | Number | 警戒水位 | 无数据时请传0 |
zDesign | Number | 允许壅高水位 | 无数据时请传0 |
crestElevation | Number | 坝顶高程 | 无数据时请传0 |
zLimit | Number | 汛限水位 | 无数据时请传0 |
timeForecast | String | 预报最高水位时间 | 格式为'yyyy-mm-dd HH:mm:ss' 无数据时请传'' |
color | String | 标题字体颜色 | 格式为'#ffffff' 无数据时请传''或者null |
水库剖面图组件-ReservoirCrossSectionImg
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
profileData | Object | 水库剖面数据 | 其中对象包含的属性为下表字段 |
titleShow | Boolean | 是否展示标题 | |
profileData属性详情
profileData属性 | 类型(默认值) | 描述 | 备注 |
---|
z | Number | 当前水位 | 无数据时请传0 |
zForecast | Number | 预报最高水位 | 无数据时请传0 |
zCheck | Number | 警戒水位 | 无数据时请传0 |
zDesign | Number | 允许壅高水位 | 无数据时请传0 |
crestElevation | Number | 坝顶高程 | 无数据时请传0 |
zLimit | Number | 汛限水位 | 无数据时请传0 |
zAllow | Number | 允许最高水位 | 无数据时请传0 |
pondage | Number | 蓄水量 | 无数据时请传0 |
control | Number | 防洪库容 | 无数据时请传0 |
retention | Number | 拦洪库容 | 无数据时请传0 |
regulation | Number | 调洪库容 | 无数据时请传0 |
timeForecast | String | 预报最高水位时间 | 格式为'yyyy-mm-dd HH:mm:ss' 无数据时请传'' |
color | String | 标题字体颜色 | 格式为'#ffffff' 无数据时请传''或者null |
雨量同期对比组件-RainfallSynchronization
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
rainData | Object | 雨量同期数据 | 其中对象包含的属性为下表字段 对象中的属性除了时间(tm)若不需要可以不传 |
searchShow | Boolean | 是否展示查询框 | 用于外层div较小时 |
commonlyTM | Boolean | 是否展示常用时间 | |
beginTime | String | 开始时间 | 无数据是传''空字符串 |
endTime | String | 结束时间 | 无数据是传''空字符串 |
rainData属性详情
闸门状态组件-SluiceStatus
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
sluiceData | Array | 闸门状态数据 | |
sluiceTitle | String | 站点名称 | |
sluiceData属性详情
sluiceData属性 | 类型(默认值) | 描述 | 备注 |
---|
Height | String | 闸门开度 | 10为100% |
STCD | String | 站点编码 | |
TM | String | 时间 | |
河道纵剖面组件-RiverLongitudinalProfile
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
riverData | Object | 河道纵剖面数据 | |
riverData属性详情
河道纵剖面组件(动态水位)-RiverLongitudinalProfileDynamic
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
riverData | Object | 河道纵剖面数据 | |
riverData属性详情
行政区站点状态统计组件-DistrictStatistics
参数
districtData属性详情
districtData属性 | 类型(默认值) | 描述 | 备注 |
---|
highRisk | Number | 超警戒 | 可自定义属性名称 |
mediumRisk | Number | 超允许壅高 | 可自定义属性名称 |
lowRisk | Number | 超汛限 | 可自定义属性名称 |
noRisk | Number | 正常 | 可自定义属性名称 |
name | String | 行政区名称 | |
adcd | String | 行政区编码 | |
styleInfo属性详情
styleInfo属性 | 类型(默认值) | 描述 | 备注 |
---|
name | String | 属性名称 | |
key | String | 属于key值 | 对应districtData中自定义的属于名称 |
color | String | 系列颜色 | |
fontColor | String | 系列label文字颜色 | |
事件
distClick // 行政区点击事件,必需声明,返回数据格式为 {adnm: 行政区名称,adcd: 行政区编码}
水库纳雨能力统计组件-RainfallCapacityStatistics
参数
rainfallCapacityData属性详情
rainfallCapacityData属性 | 类型(默认值) | 描述 | 备注 |
---|
limitLevel1 | Number | 距汛限水位小于100mm | |
limitLevel2 | Number | 距汛限水位100mm~200mm | |
limitLevel3 | Number | 距汛限水位大于200mm | |
designLevel1 | Number | 距允许壅高水位小于100mm | |
designLevel2 | Number | 距允许壅高水位100mm~200mm | |
designLevel3 | Number | 距允许壅高水位大于200mm | |
name | String | 行政区名称 | |
adcd | String | 行政区编码 | |
事件
distClick // 行政区点击事件,必需声明,返回数据格式为 {adnm: 行政区名称,adcd: 行政区编码}
调度对比组件-CompareLineCustom
参数
属性 | 类型(默认值) | 描述 | 备注 |
---|
currentDispatchList | Array | 调度数据 | |
compareLineData | Array | 过程线数据 | |
pmt | Number | 过程线类型 | 1 水库 2 河道站 |
lengendWidth | Number | 水库图例宽度 | |
lengendWidthRiver | Number | 河道站图例宽度 | |
panelWidth | Number | 面板宽度 | |
offsetLeft2 | Number | 水库图例左边距 | |
offsetLeft2River | Number | 河道站图例左边距 | |
drpLeft | Number | 面降雨量图例左边距 | |
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Customize configuration
See Configuration Reference.