irrigation-component

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 HHss','yyyy-mm-dd HHss']
tmCurrent	String	当前时间	格式为'yyyy-mm-dd HHss'（无数据时请传''空字符串)

事件

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 HHss','yyyy-mm-dd HHss']
tmCurrent	String	当前时间	格式为'yyyy-mm-dd HHss'（无数据时请传''空字符串)

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 HHss','yyyy-mm-dd HHss']
tmCurrent	String	当前时间	格式为'yyyy-mm-dd HHss'（无数据时请传''空字符串)
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 HHss','yyyy-mm-dd HHss']
tmCurrent	String	当前时间	格式为'yyyy-mm-dd HHss'（无数据时请传''空字符串)
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属性详情

crossSectionData属性	类型（默认值）	描述	备注
stageInfo	Array	水位信息	格式为[{name: '水位流量关系曲线', z: ['113.000', '113.500',...]}] 其中 name为曲线名称 z为水位数据
z	String	当前水位	无数据时请传''空字符串
q	String	当前流量	无数据时请传''空字符串
zWarn	String	警戒水位	无数据时请传''空字符串
zGuarantee	String	保证水位	无数据时请传''空字符串
section	Array	断面数据	无数据时请传[]空数组 格式为[{ elevation: 175.882, startingDistance: 0.0, remark: '起点' },{ elevation: 175.892, startingDistance: 4.078, remark: null }]

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 HHss' 无数据时请传''
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 HHss' 无数据时请传''
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 HHss' 无数据时请传''
color	String	标题字体颜色	格式为'#ffffff' 无数据时请传''或者null

雨量同期对比组件-RainfallSynchronization

参数

属性	类型（默认值）	描述	备注
rainData	Object	雨量同期数据	其中对象包含的属性为下表字段 对象中的属性除了时间（tm）若不需要可以不传
searchShow	Boolean	是否展示查询框	用于外层div较小时
commonlyTM	Boolean	是否展示常用时间
beginTime	String	开始时间	无数据是传''空字符串
endTime	String	结束时间	无数据是传''空字符串

rainData属性详情

rainData属性	类型（默认值）	描述	备注
historyMax	Array	历史同期降雨	无数据时请传[]空数组
lastSamePeriod	Array	去年同期降雨	无数据时请传[]空数组
currentValue	Array	当前降雨	无数据时请传[]空数组
tm	Array	时间	无数据时请传[]空数组 数组内格式为['yyyy-mm-dd HHss','yyyy-mm-dd HHss']

闸门状态组件-SluiceStatus

参数

属性	类型（默认值）	描述	备注
sluiceData	Array	闸门状态数据
sluiceTitle	String	站点名称

sluiceData属性详情

sluiceData属性	类型（默认值）	描述	备注
Height	String	闸门开度	10为100%
STCD	String	站点编码
TM	String	时间

河道纵剖面组件-RiverLongitudinalProfile

参数

属性	类型（默认值）	描述	备注
riverData	Object	河道纵剖面数据

riverData属性详情

riverData属性	类型（默认值）	描述	备注
name	String	断面点名称
elevation	Array	河底高程
leftElevation	Array	左岸高程
rightElevation	Array	右岸高程
waterLever	Array	水位信息
markPoint	Array	河道站点位样式信息	[{ name:'',value:'',xAxis:6,yAxis:254.469,itemStyle:{color:'#00effe'} }]

河道纵剖面组件(动态水位)-RiverLongitudinalProfileDynamic

参数

属性	类型（默认值）	描述	备注
riverData	Object	河道纵剖面数据

riverData属性详情

riverData属性	类型（默认值）	描述	备注
name	String	断面点名称
elevation	Array	河底高程
leftElevation	Array	左岸高程
rightElevation	Array	右岸高程
waterLever	Array	水位信息	{tm: '2021-07-18 0800',z: [] tm：时间 z:当前时间对应的各个站点的水位信息
markPoint	Array	河道站点位样式信息	[{ name:'',value:'',xAxis:6,yAxis:254.469,itemStyle:{color:'#00effe'} }]

行政区站点状态统计组件-DistrictStatistics

参数

属性	类型（默认值）	描述	备注
districtData	Array	行政区站点状态数据	[ {highRisk:2,mediumRisk:2,name:'济南市',lowRisk:12,noRisk:8,adcd:'370100'} ]
styleInfo	Array	行政区统计状态类别数据	[ {name: '超警戒',key: 'highRisk',color: '#FF0000',}]

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	Array	水库纳雨能力数据	[{ limitLevel1:2,limitLevel2:2,name:'济南市',limitLevel3:12,designLevel1:8,designLevel2:8,designLevel3:2,adcd:'370100' }]

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.