chenhaojie
1 month ago
12 changed files with 1793 additions and 57 deletions
@ -0,0 +1,210 @@ |
|||
import { request } from '../axios'; |
|||
|
|||
// 获取场景列表
|
|||
export const getSceneListData = async (data: any) => { |
|||
return request({ |
|||
url: `/map/scene/sceneList`, |
|||
method: 'post', |
|||
data: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
data: { |
|||
id: '', |
|||
name: data.name |
|||
}, |
|||
params: { |
|||
order: 'asc', |
|||
orderBy: 'pub_date' |
|||
} |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 根据id获取图层树
|
|||
export const getLayerData = async (sceneId: any) => { |
|||
return request({ |
|||
url: `/map/scene/getLayerTree/${sceneId}`, |
|||
method: 'get' |
|||
}); |
|||
}; |
|||
|
|||
// 获取水库基础列表
|
|||
export const getReservoirBaseListData = (data: any) => { |
|||
return request({ |
|||
url: `/sk/base/list`, |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
}; |
|||
|
|||
// 获取水库测站基础列表
|
|||
export const getReservoirCZListData = (data: any) => { |
|||
return request({ |
|||
url: `/cz/base/list`, |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
}; |
|||
|
|||
// 获取测点列表 /cd/base/list
|
|||
export const getReservoirCDListData = (data: any) => { |
|||
return request({ |
|||
url: `/cd/base/list`, |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
}; |
|||
|
|||
|
|||
// 获取水库测站提交告警详情
|
|||
export const getReservoirCZAlarmDetailsData = (id: string | number) => { |
|||
return request({ |
|||
url: `/cz/base/${id}`, |
|||
method: 'get' |
|||
}); |
|||
}; |
|||
|
|||
// 水库基础信息详情
|
|||
export const getReservoirBaseDetailData = (id: string | number) => { |
|||
return request({ |
|||
url: `/sk/base/${id}`, |
|||
method: 'get' |
|||
}); |
|||
}; |
|||
// 获取水库代表站信息详情
|
|||
export const getReservoirFlagCZData = (id: string | number) => { |
|||
return request({ |
|||
url: `/sk/base/stcd/${id}`, |
|||
method: 'get' |
|||
}); |
|||
}; |
|||
// 水库特征信息详情
|
|||
export const getReservoirRsppDetailData = (id: string | number) => { |
|||
return request({ |
|||
url: `/sk/rspp/${id}`, |
|||
method: 'get' |
|||
}); |
|||
}; |
|||
|
|||
// 水库测站详情
|
|||
export const getReservoirCZDetailData = (id: string | number) => { |
|||
return request({ |
|||
url: `/cz/base/${id}`, |
|||
method: 'get' |
|||
}); |
|||
}; |
|||
|
|||
// 测站要素详情
|
|||
export const getReservoirCZElementDetailData = (data: any) => { |
|||
return request({ |
|||
url: `/cz/monitor/water`, |
|||
method: 'post', |
|||
data |
|||
}); |
|||
}; |
|||
|
|||
// 获取测站测点指标 /cz/monitor/index
|
|||
export const getReservoirMonitorIndexData = (data: any) => { |
|||
return request({ |
|||
url: `/cz/monitor/index`, |
|||
method: 'post', |
|||
data |
|||
}); |
|||
}; |
|||
|
|||
// 测站树结构
|
|||
export const getReservoirTreeDetailData = (data: any) => { |
|||
return request({ |
|||
url: `/cd/base/tree`, |
|||
method: 'get', |
|||
params: data |
|||
}); |
|||
}; |
|||
|
|||
// 获取测点列表
|
|||
export const getReservoirCZPointListData = (data: any) => { |
|||
return request({ |
|||
url: `/cd/base/list`, |
|||
method: 'post', |
|||
data |
|||
}); |
|||
}; |
|||
|
|||
// 获取水库测站echarts数据
|
|||
export const getReservoirCZEchartsData = (data: any) => { |
|||
return request({ |
|||
url: `/cz/monitor/chart`, |
|||
method: 'post', |
|||
data |
|||
}); |
|||
}; |
|||
|
|||
// 分页获取监测告警信息/cz/alarm/page
|
|||
export const getReservoirCZAlarmPageData = (data: any) => { |
|||
return request({ |
|||
url: `/cz/alarm/page`, |
|||
method: 'post', |
|||
data |
|||
}); |
|||
}; |
|||
|
|||
// 保存监测预警表单信息 /cz/monitor/config
|
|||
export const saveReservoirCZMonitorConfigData = (data: any) => { |
|||
return request({ |
|||
url: `/cz/monitor/config`, |
|||
method: 'post', |
|||
data |
|||
}); |
|||
}; |
|||
|
|||
// 获取监测预警表单信息 /cz/monitor/config/list/{stcd}
|
|||
export const getReservoirCZMonitorConfigData = (stcd: any) => { |
|||
return request({ |
|||
url: `/cz/monitor/config/list/${stcd}`, |
|||
method: 'get' |
|||
}); |
|||
}; |
|||
|
|||
// 获取echart数据 /cz/monitor/chart
|
|||
export const getReservoirCZMonitorEchartsData = (data: any) => { |
|||
return request({ |
|||
url: `/cz/monitor/chart`, |
|||
method: 'post', |
|||
data |
|||
}); |
|||
}; |
|||
|
|||
// 获取视频列表/safe/operation/Play
|
|||
export const getOperationPlay = (data: any) => { |
|||
return request({ |
|||
url: `/safe/operation/play`, |
|||
method: 'post', |
|||
data |
|||
}); |
|||
}; |
|||
|
|||
export const getVideoDataList = (data: any) => { |
|||
return request({ |
|||
url: `/safe/operation/reservoirList`, |
|||
method: 'post', |
|||
data |
|||
}); |
|||
}; |
|||
|
|||
// 水库实时监测--监测站树数据
|
|||
export const getReservoirMonitorTreeData = (id: string | number) => { |
|||
return request({ |
|||
url: `/sk/??`, |
|||
method: 'get' |
|||
}); |
|||
}; |
|||
|
|||
// 水库实时监测--降雨量等详情
|
|||
export const getReservoirRainDetailData = (id: string | number) => { |
|||
return request({ |
|||
url: `/sk/??`, |
|||
method: 'get' |
|||
}); |
|||
} |
|||
|
|||
|
|||
@ -0,0 +1,739 @@ |
|||
<template> |
|||
<div class="baseInfo-page"> |
|||
<el-tabs v-model="activeName" @tab-click="handleChangeTab"> |
|||
<el-tab-pane label="水库信息" name="1"> |
|||
<div>水库基本信息</div> |
|||
<el-descriptions |
|||
class="mt-16" |
|||
:column="3" |
|||
border |
|||
:labelStyle="{ |
|||
'text-align': 'left', |
|||
width: '120px', |
|||
height: '50px', |
|||
}" |
|||
:contentStyle="{ minWidth: '180px' }" |
|||
> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水库名称 </template> |
|||
{{ form.resName }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水库代码 </template> |
|||
{{ form.resCode }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水库注册登记号 </template> |
|||
{{ form.registerCode }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水库功能 </template> |
|||
{{ form.resAction }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水库类型 </template> |
|||
{{ form.resType }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水库状态 </template> |
|||
{{ form.resState }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 工程规模 </template> |
|||
{{ form.engScal }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 工程等别 </template> |
|||
{{ form.engGrad }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 曾用名 </template> |
|||
{{ form.oldName }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水库中心经度 </template> |
|||
{{ form.resCenLong }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水库中心纬度 </template> |
|||
{{ form.resCenLat }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 归口管理部门 </template> |
|||
{{ form.admDep }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水库主管部门 </template> |
|||
{{ form.cmun }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水库管理部门 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 所在行政区划 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 所在流域 </template> |
|||
{{ form.localBasin }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 所在河流 </template> |
|||
{{ form.localRiver }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水准基面 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 是否注册 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 左下角经度 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 左下角纬度 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 右上角经度 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 右上角纬度 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水库所在位置 </template> |
|||
{{ form.resLoc }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水库管理单位 </template> |
|||
{{ form.mnun }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 工程建设情况 </template> |
|||
{{ form.engStat }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 有效年份 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 主要建筑物级别 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 控制流域面积 </template> |
|||
{{ form.watShedArea }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 河道长度 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 河道比降 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 多年平均径流量 </template> |
|||
{{ form.avanrnam }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 多年平均降水量 </template> |
|||
{{ form.avanpram }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 多年平均流沙量 </template> |
|||
{{ form.avansdam }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 设计重现期 </template> |
|||
{{ form.dsrcin }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 设计洪峰流量 </template> |
|||
{{ form.dspkfl }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 设计1日洪水洪量(万m³) </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 设计3日洪水洪量(万m³) </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 校核重现期 </template> |
|||
{{ form.chrcin }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 校核洪峰流量 </template> |
|||
{{ form.chpkfl }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 校核洪水历时 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 校核洪水总量 </template> |
|||
{{ form.chflvl }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 设计洪水位 </template> |
|||
{{ form.dsfllv }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 校核洪水位 </template> |
|||
{{ form.chfllv }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 防洪高水位 </template> |
|||
{{ form.uppLevFlco }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 防洪限制水位库容 </template> |
|||
{{ form.flLowLimLevCap }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 正常蓄水位 </template> |
|||
{{ form.normWatLev }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 正常蓄水位相应水面面积 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 正常蓄水位相应库容 </template> |
|||
{{ form.normPoolStagCap }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 死水位 </template> |
|||
{{ form.deadLev }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 总库容 </template> |
|||
{{ form.totCap }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 调节库容 </template> |
|||
{{ form.storFlCap }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 死库容 </template> |
|||
{{ form.deadCap }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 防洪库容 </template> |
|||
{{ form.flcoCap }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 兴利库容 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 坝址控制流域面积 </template> |
|||
{{ form.watShedArea }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 地震基本烈度 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 地震动峰值加速度 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 设防地震烈度 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 集雨面积 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 下泄生态流量 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 数据来源 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 数据创建时间 </template> |
|||
{{ form.createTime }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 备注 </template> |
|||
{{ form.note }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
<el-descriptions |
|||
class="mt-16" |
|||
:column="2" |
|||
border |
|||
:labelStyle="{ |
|||
'text-align': 'left', |
|||
width: '120px', |
|||
height: '100px', |
|||
}" |
|||
:contentStyle="{ minWidth: '180px' }" |
|||
> |
|||
<el-descriptions-item :span="2"> |
|||
<template slot="label"> 水库概况 </template> |
|||
{{ form.resOv }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
<div class="mt-16">水库建设时间</div> |
|||
<el-descriptions |
|||
class="mt-16" |
|||
:column="2" |
|||
border |
|||
:labelStyle="{ |
|||
'text-align': 'left', |
|||
width: '120px', |
|||
height: '60px', |
|||
}" |
|||
:contentStyle="{ minWidth: '180px' }" |
|||
> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 开工时间 </template> |
|||
{{ form.startDate }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 完工时间 </template> |
|||
{{ form.compDate }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
<div class="mt-16">最近异常加固改造时间</div> |
|||
<el-descriptions |
|||
class="mt-16" |
|||
:column="2" |
|||
border |
|||
:labelStyle="{ |
|||
'text-align': 'left', |
|||
width: '120px', |
|||
height: '60px', |
|||
}" |
|||
:contentStyle="{ minWidth: '180px' }" |
|||
> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 更新时间 </template> |
|||
{{ form.updateTime }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="水文特征" name="2"> |
|||
<div>水库水文特征</div> |
|||
<el-descriptions |
|||
class="mt-16" |
|||
:column="3" |
|||
border |
|||
:labelStyle="{ |
|||
'text-align': 'left', |
|||
width: '120px', |
|||
height: '50px', |
|||
}" |
|||
:contentStyle="{ minWidth: '180px' }" |
|||
> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 控制流域面积(km²) </template> |
|||
{{ form.watShedArea }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 多年平均降雨量(mm) </template> |
|||
{{ form.avanpram }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 多年平均径流量(万m³) </template> |
|||
{{ form.avanrnam }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 多年平均输沙两(万t) </template> |
|||
{{ form.avansdam }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 多年平均最低气温(℃) </template> |
|||
{{ form.myavgmintp }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 多年平均蒸发量(mm) </template> |
|||
{{ form.avanev }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 多年平均含沙量(kg/m³) </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水库调节性能 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 正常蓄水位相应水面面积(km²) </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 防洪高水位(m) </template> |
|||
{{ form.uppLevFlco }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 死水位(m) </template> |
|||
{{ form.deadLev }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 橙色预警水位(m) </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 红色预警水位(m) </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 黄色预警水位(m) </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 汛期开始日期 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 汛期结束日期 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 水准基面 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 备注 </template> |
|||
{{ form.note }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
<div class="mt-16">设计洪水</div> |
|||
<el-descriptions |
|||
class="mt-16" |
|||
:column="3" |
|||
border |
|||
:labelStyle="{ |
|||
'text-align': 'left', |
|||
width: '120px', |
|||
height: '50px', |
|||
}" |
|||
:contentStyle="{ minWidth: '180px' }" |
|||
> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 校核洪峰流量(m³/s) </template> |
|||
{{ form.chpkfl }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 设计洪峰流量(m³/s) </template> |
|||
{{ form.dspkfl }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 设计洪水位(m) </template> |
|||
{{ form.dsfllv }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 校核洪水位(m) </template> |
|||
{{ form.chfllv }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 设计1日洪水洪量(万m³) </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 设计3日洪水洪量(万m³) </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 校核洪水历时(d) </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 洪水总量 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
<div class="mt-16">汛期限制水位</div> |
|||
<el-descriptions |
|||
class="mt-16" |
|||
:column="3" |
|||
border |
|||
:labelStyle="{ |
|||
'text-align': 'left', |
|||
width: '120px', |
|||
height: '50px', |
|||
}" |
|||
:contentStyle="{ minWidth: '180px' }" |
|||
> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 设计重现期 </template> |
|||
{{ form.dsrcin }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 河道比降 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 河道长度 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 汛期限制水位主汛期 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
<div class="mt-16">库容</div> |
|||
<el-descriptions |
|||
class="mt-16" |
|||
:column="3" |
|||
border |
|||
:labelStyle="{ |
|||
'text-align': 'left', |
|||
width: '120px', |
|||
height: '50px', |
|||
}" |
|||
:contentStyle="{ minWidth: '180px' }" |
|||
> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 兴利库容 </template> |
|||
{{ "" }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 总库容(m³) </template> |
|||
{{ form.totCap }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 防洪库容(m³) </template> |
|||
{{ form.flcoCap }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 调节库容(m³) </template> |
|||
{{ form.storFlCap }} |
|||
</el-descriptions-item> |
|||
<el-descriptions-item> |
|||
<template slot="label"> 死库容(m³) </template> |
|||
{{ form.deadCap }} |
|||
</el-descriptions-item> |
|||
</el-descriptions> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="库容曲线" name="3"> |
|||
<div class="chart-container" ref="lineChartRef"></div> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="责任人信息" name="4"> |
|||
<div>责任人信息</div> |
|||
<el-table class="mt-16" :data="dutyPersonList" border style="width: 100%"> |
|||
<el-table-column type="index" label="序号" width="60"> </el-table-column> |
|||
<el-table-column prop="dutyName" label="负责人" width="120"> </el-table-column> |
|||
<el-table-column prop="dutyType" label="负责人类别" width="120"> </el-table-column> |
|||
<el-table-column prop="phone" label="电话"> </el-table-column> |
|||
<el-table-column prop="manageUnit" label="单位"> </el-table-column> |
|||
<el-table-column prop="createTime" label="数据创建时间"> </el-table-column> |
|||
</el-table> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { ref, onMounted, watch } from "vue"; |
|||
import * as echarts from "echarts"; |
|||
import { getReservoirBaseDetailData, getReservoirRsppDetailData } from "@/api/reservoir"; |
|||
|
|||
const props = defineProps({ |
|||
resCode: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}); |
|||
let myChart = null; |
|||
let code = null; |
|||
const activeName = ref("1"); |
|||
let typeApi = { |
|||
["1"]: initBaseAndRsppInfo, |
|||
["2"]: initBaseAndRsppInfo, |
|||
["3"]: initEchart, |
|||
["4"]: null, |
|||
}; |
|||
const form = ref({}); |
|||
const dutyPersonList = ref([]); |
|||
const emits = defineEmits(["getResInfo"]); |
|||
function initBaseInfo() { |
|||
getReservoirBaseDetailData(props.resCode).then((res) => { |
|||
if (res?.data) { |
|||
form.value = { |
|||
...form.value, |
|||
...res.data, |
|||
}; |
|||
emits("getResInfo", res.data); |
|||
} |
|||
}); |
|||
} |
|||
function initRsppInfo() { |
|||
getReservoirRsppDetailData(props.resCode).then((res) => { |
|||
if (res?.data) { |
|||
Object.keys(res.data).forEach((key) => { |
|||
form.value[key] = res.data[key]; |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function initBaseAndRsppInfo() { |
|||
initBaseInfo(); |
|||
initRsppInfo(); |
|||
} |
|||
|
|||
function initData() { |
|||
activeName.value = "1"; |
|||
initBaseAndRsppInfo(); |
|||
} |
|||
const lineChartRef = ref(null); |
|||
function initEchart() { |
|||
let chartDom = lineChartRef.value; |
|||
if (!chartDom) return; |
|||
if (myChart) { |
|||
myChart.dispose(); |
|||
} |
|||
myChart = echarts.init(chartDom); |
|||
let option; |
|||
option = { |
|||
title: { |
|||
// text: "World Population", |
|||
}, |
|||
color: ["#38A0FF", "#4CCA73", "#FBD437"], |
|||
tooltip: { |
|||
trigger: "axis", |
|||
axisPointer: { |
|||
type: "cross", |
|||
label: { |
|||
backgroundColor: "#283b56", |
|||
}, |
|||
}, |
|||
}, |
|||
legend: { |
|||
orient: "horizontal", |
|||
bottom: "2%", |
|||
}, |
|||
grid: { |
|||
left: "10%", |
|||
right: "10%", |
|||
top: "10%", |
|||
bottom: "18%", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: "category", |
|||
name: "库容", |
|||
nameLocation: "middle", |
|||
nameGap: 20, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "green", |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
alignWithLabel: true, |
|||
}, |
|||
data: [], |
|||
}, |
|||
{ |
|||
type: "category", |
|||
name: "面积(km²)", |
|||
nameLocation: "middle", |
|||
position: "top", |
|||
nameGap: 20, |
|||
axisLine: { |
|||
onZero: false, |
|||
show: true, |
|||
lineStyle: { |
|||
// color: "red", |
|||
}, |
|||
}, |
|||
data: [], |
|||
}, |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: "value", |
|||
name: "水位(mm)", |
|||
position: "left", |
|||
nameLocation: "middle", |
|||
nameGap: 34, |
|||
axisLine: { |
|||
onZero: false, |
|||
show: true, |
|||
}, |
|||
axisLabel: { |
|||
formatter: "{value}", |
|||
}, |
|||
}, |
|||
// { |
|||
// type: "value", |
|||
// name: "test1", |
|||
// position: "right", |
|||
// nameLocation: "middle", |
|||
// axisLine: { |
|||
// onZero: false, |
|||
// show: true, |
|||
// color: "red", |
|||
// }, |
|||
// alignTicks: true, |
|||
// axisLabel: { |
|||
// formatter: "{value}?", |
|||
// }, |
|||
// }, |
|||
], |
|||
|
|||
series: [ |
|||
{ |
|||
type: "line", |
|||
color: "#0000f7", |
|||
name: "库容", |
|||
data: [], |
|||
}, |
|||
{ |
|||
type: "line", |
|||
color: "#00f400", |
|||
name: "面积", |
|||
data: [], |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
option && myChart.setOption(option); |
|||
window.addEventListener("resize", function () { |
|||
myChart.resize(); |
|||
}); |
|||
} |
|||
|
|||
function handleChangeTab() { |
|||
typeApi[activeName.value] && typeApi[activeName.value](code); |
|||
} |
|||
|
|||
watch( |
|||
() => props.resCode, |
|||
(val) => { |
|||
initData(); |
|||
}, |
|||
{ immediate: true }, |
|||
); |
|||
|
|||
onMounted(() => { |
|||
initData(); |
|||
}); |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.baseInfo-page { |
|||
padding: 0 12px; |
|||
|
|||
.chart-container { |
|||
width: 480px; |
|||
height: 480px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,411 @@ |
|||
<!-- 数据统计 --> |
|||
<template> |
|||
<div class="data-statistics"> |
|||
<div class="flex justify-between"> |
|||
<div class="flex items-center"> |
|||
<el-cascader |
|||
size="small" |
|||
v-model="cascaderArr" |
|||
:options="cascaderOptions" |
|||
:props="cascaderProps" |
|||
@change="handleChangeCascader" |
|||
></el-cascader> |
|||
<el-date-picker |
|||
size="small" |
|||
class="ml-12" |
|||
v-model="dateArr" |
|||
type="daterange" |
|||
range-separator="至" |
|||
value-format="yyyy-MM-dd" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
> |
|||
</el-date-picker> |
|||
<el-button size="small" type="primary" class="!ml-12" @click="handleSearch">查询</el-button> |
|||
</div> |
|||
|
|||
<el-radio-group size="small" v-model="showType" @change="handleChangeShowType"> |
|||
<el-radio-button label="1">指标</el-radio-button> |
|||
<el-radio-button label="2">图表</el-radio-button> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="mt-24"> |
|||
<!-- 指标 --> |
|||
<div v-if="showType === '1'"> |
|||
<div class="attributes-box" v-for="(item, index) in attributesList" :key="index"> |
|||
<div class="title">{{ item.group }}</div> |
|||
<div class="list-box"> |
|||
<div class="list-item" v-for="(item2, index2) in item.items" :key="index2"> |
|||
<div class="item-title">{{ item2.zhName }}({{ item2.unit }})</div> |
|||
<div class="item-value"> |
|||
{{ item2.value == null ? "-" : item2.value }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div v-if="!attributesList || !attributesList.length" class="pt-30 text-center">-暂无指标数据-</div> |
|||
</div> |
|||
<!-- 图表 --> |
|||
<div v-else-if="showType === '2'" class="echarts-box"> |
|||
<div class="echarts-dom-box"> |
|||
<div class="title">水库基本情况</div> |
|||
<div ref="echartsRef1" class="echarts-dom"></div> |
|||
</div> |
|||
<div class="echarts-dom-box"> |
|||
<div class="title">环境情况</div> |
|||
<div ref="echartsRef2" class="echarts-dom"></div> |
|||
</div> |
|||
<div class="echarts-dom-box"> |
|||
<div class="title">应变应力情况</div> |
|||
<div ref="echartsRef3" class="echarts-dom"></div> |
|||
</div> |
|||
<div class="echarts-dom-box"> |
|||
<div class="title">渗流压力情况</div> |
|||
<div ref="echartsRef4" class="echarts-dom"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { onMounted, ref, watch } from "vue"; |
|||
import { |
|||
getReservoirCZListData, |
|||
getReservoirCDListData, |
|||
getReservoirMonitorIndexData, |
|||
getReservoirCZMonitorEchartsData, |
|||
} from "@/api/reservoir"; |
|||
import * as echarts from "echarts"; |
|||
const props = defineProps({ |
|||
resCode: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}); |
|||
const cascaderOptions = ref([]); |
|||
const showType = ref("1"); |
|||
const cascaderArr = ref([]); |
|||
const dataArr = ref([]); |
|||
const cascaderProps = { |
|||
expandTrigger: "hover", |
|||
label: "stnm", |
|||
value: "stcd", |
|||
children: "children", |
|||
checkStrictly: true, |
|||
lazy: true, |
|||
lazyLoad(node, resolve) { |
|||
console.log("lazyLoad-node >>>>> ", node); |
|||
if (node && node.data && node.data.prjcd) { |
|||
getReservoirCDListData({ |
|||
stcd: node.data.prjcd, |
|||
}).then((res) => { |
|||
resolve(res.records); |
|||
}); |
|||
} else { |
|||
resolve([]); |
|||
} |
|||
}, |
|||
}; |
|||
const attributesList = ref([]); |
|||
let echart1 = null; |
|||
let echart2 = null; |
|||
let echart3 = null; |
|||
let echart4 = null; |
|||
const echartsRef1 = ref(); |
|||
const echartsRef2 = ref(); |
|||
const echartsRef3 = ref(); |
|||
const echartsRef4 = ref(); |
|||
|
|||
function getData() { |
|||
switch (showType.value) { |
|||
case "1": |
|||
console.log("dataArr.value >> ", dataArr.value); |
|||
// 处理获取指标数据 |
|||
getReservoirMonitorIndexData({ |
|||
startTime: dataArr.value ? dataArr.value[0] + " 00:00:00" : "", |
|||
endTime: dataArr.value ? dataArr.value[1] + " 23:59:59" : "", |
|||
group: "SK", |
|||
resCode: props.resCode, |
|||
stcd: cascaderArr.value[0] || "", |
|||
mpcd: cascaderArr.value[1] || "", |
|||
}).then((res) => { |
|||
attributesList.value = res.data; |
|||
}); |
|||
break; |
|||
case "2": |
|||
// 处理图表数据 |
|||
getEchartsData(); |
|||
break; |
|||
} |
|||
} |
|||
function initChart(data, chartInstance, echartRes) { |
|||
// 渲染echarts |
|||
if (!echartRes) { |
|||
return; |
|||
} |
|||
|
|||
if (chartInstance) { |
|||
chartInstance.dispose(); |
|||
} |
|||
let options = initLineOptions(data); |
|||
chartInstance = echarts.init(echartRes); |
|||
options && chartInstance.setOption(options); |
|||
} |
|||
// 折线图 |
|||
function initLineOptions(data: any) { |
|||
const { markLine, xaxis, yaxis } = data; |
|||
if (!xaxis || !yaxis || !yaxis.length) return {}; |
|||
let yAxis = yaxis.map((v) => { |
|||
return { |
|||
type: "value", |
|||
name: `${v.name}(${v.unit})`, |
|||
nameLocation: "end", |
|||
}; |
|||
}); |
|||
|
|||
let series = []; |
|||
yaxis.forEach((v, i) => { |
|||
if (v.series?.length) { |
|||
v.series.forEach((v2) => { |
|||
series.push({ |
|||
type: "line", |
|||
smooth: true, |
|||
yAxisIndex: i, |
|||
name: v2.name, |
|||
data: v2.data, |
|||
}); |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
if (markLine && markLine.length && series.length) { |
|||
let seriesItem = series.find((v) => v.yAxisIndex === 1) || series[0]; |
|||
let colors = ["#f8afaf", "#bae4dd"]; |
|||
let markLineData = markLine.map((v, i) => { |
|||
return { |
|||
name: v.name, |
|||
yAxis: v.value, |
|||
label: { |
|||
color: colors[i] || "red", |
|||
}, |
|||
lineStyle: { |
|||
color: colors[i] || "red", |
|||
}, |
|||
}; |
|||
}); |
|||
seriesItem.markLine = { |
|||
symbol: "none", |
|||
label: { |
|||
show: true, |
|||
position: "insideEndTop", |
|||
formatter: "{b}", |
|||
}, |
|||
lineStyle: { |
|||
width: 2, |
|||
type: "solid", |
|||
color: colors[0] || "red", |
|||
}, |
|||
data: markLineData, |
|||
}; |
|||
} |
|||
|
|||
return { |
|||
title: { |
|||
// text: "统计", |
|||
}, |
|||
legend: { |
|||
orient: "horizontal", |
|||
top: "2%", |
|||
}, |
|||
grid: { |
|||
left: "5%", |
|||
right: "10%", |
|||
bottom: "10%", |
|||
top: "20%", |
|||
containLabel: true, |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis", |
|||
axisPointer: { |
|||
type: "cross", |
|||
label: { |
|||
backgroundColor: "#283b56", |
|||
}, |
|||
}, |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: "category", |
|||
name: "时间", |
|||
position: "bottom", |
|||
axisLine: { |
|||
onZero: false, |
|||
show: true, |
|||
}, |
|||
axisTick: { |
|||
alignWithLabel: true, |
|||
}, |
|||
data: xaxis, |
|||
}, |
|||
], |
|||
yAxis: yAxis, |
|||
series: series, |
|||
}; |
|||
} |
|||
function getEchartsData() { |
|||
// 水库基本情况 |
|||
getReservoirCZMonitorEchartsData({ |
|||
startTime: dataArr.value ? dataArr.value[0] + " 00:00:00" : "", |
|||
endTime: dataArr.value ? dataArr.value[1] + " 23:59:59" : "", |
|||
resCode: props.resCode, |
|||
stcd: cascaderArr.value[0] || "", |
|||
mpcd: cascaderArr.value[1] || "", |
|||
elementType: "WATER_LEVEL", |
|||
}).then((res) => { |
|||
if (res.data) { |
|||
initChart(res.data, echart1, echartsRef1.value); |
|||
} |
|||
}); |
|||
// 环境情况 |
|||
getReservoirCZMonitorEchartsData({ |
|||
startTime: dataArr.value ? dataArr.value[0] + " 00:00:00" : "", |
|||
endTime: dataArr.value ? dataArr.value[1] + " 23:59:59" : "", |
|||
resCode: props.resCode, |
|||
stcd: cascaderArr.value[0] || "", |
|||
elementType: "ENV", |
|||
}).then((res) => { |
|||
if (res.data) { |
|||
initChart(res.data, echart2, echartsRef2.value); |
|||
} |
|||
}); |
|||
// 应变应力 |
|||
getReservoirCZMonitorEchartsData({ |
|||
startTime: dataArr.value ? dataArr.value[0] + " 00:00:00" : "", |
|||
endTime: dataArr.value ? dataArr.value[1] + " 23:59:59" : "", |
|||
resCode: props.resCode, |
|||
mpcd: cascaderArr.value[1] || "", |
|||
elementType: "C_STRESS", |
|||
}).then((res) => { |
|||
if (res.data) { |
|||
initChart(res.data, echart3, echartsRef3.value); |
|||
} |
|||
}); |
|||
// 渗流压力情况-没数据 |
|||
initChart([], echart4, echartsRef4.value); |
|||
} |
|||
function handleSearch() { |
|||
attributesList.value = []; |
|||
getData(); |
|||
} |
|||
function handleChangeCascader() {} |
|||
function handleChangeShowType() { |
|||
getData(); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
getReservoirCZListData({ |
|||
data: { |
|||
page: 1, |
|||
pageSize: 1000, |
|||
prjcd: props.resCode, |
|||
}, |
|||
}).then((res) => { |
|||
cascaderOptions.value = res.records; |
|||
}); |
|||
getData(); |
|||
}); |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.data-statistics { |
|||
.attributes-box { |
|||
margin-bottom: 16px; |
|||
.title { |
|||
padding-left: 10px; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
position: relative; |
|||
&::before { |
|||
content: " "; |
|||
width: 4px; |
|||
height: 4px; |
|||
background: #36b29e; |
|||
position: absolute; |
|||
left: 1px; |
|||
top: 50%; |
|||
margin-top: -2px; |
|||
transform: rotate(45deg); |
|||
} |
|||
} |
|||
.list-box { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-top: 10px; |
|||
|
|||
.list-item { |
|||
width: 236px; |
|||
height: 102px; |
|||
border: 1px solid #36b29e; |
|||
border-radius: 10px; |
|||
position: relative; |
|||
padding: 16px 24px; |
|||
margin-right: 16px; |
|||
margin-bottom: 12px; |
|||
background: linear-gradient(180deg, #eafffc 0%, rgba(222, 255, 250, 0) 100%), #ffffff; |
|||
overflow: hidden; |
|||
&::after { |
|||
position: absolute; |
|||
content: ""; |
|||
background: url("../../../../assets/image/icon-attr-bg.png") no-repeat center center; |
|||
width: 64px; |
|||
height: 64px; |
|||
right: -12px; |
|||
bottom: -12px; |
|||
} |
|||
.item-title { |
|||
font-size: 14px; |
|||
} |
|||
.item-value { |
|||
margin-top: 12px; |
|||
font-size: 32px; |
|||
color: #36b29e; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.echarts-box { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
.echarts-dom-box { |
|||
margin-bottom: 24px; |
|||
&:nth-child(2n) { |
|||
margin-left: 24px; |
|||
} |
|||
.title { |
|||
padding-left: 10px; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
position: relative; |
|||
margin-bottom: 12px; |
|||
&::before { |
|||
content: " "; |
|||
width: 4px; |
|||
height: 4px; |
|||
background: #36b29e; |
|||
position: absolute; |
|||
left: 1px; |
|||
top: 50%; |
|||
margin-top: -2px; |
|||
transform: rotate(45deg); |
|||
} |
|||
} |
|||
.echarts-dom { |
|||
width: 478px; |
|||
height: 260px; |
|||
border: 1px solid #f0f0f0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,179 @@ |
|||
<template> |
|||
<div class="monitor-warning"> |
|||
<div class="flex justify-between mt-12"> |
|||
<div class="flex items-center"> |
|||
<el-select class="w-150" size="mini" v-model="dateRange" @change="handleChangeDate"> |
|||
<el-option label="近1月" value="0"></el-option> |
|||
<el-option label="近1日" value="1"></el-option> |
|||
<el-option label="近7日" value="2"></el-option> |
|||
<el-option label="近3月" value="3"></el-option> |
|||
<el-option label="近1年" value="4"></el-option> |
|||
</el-select> |
|||
<span class="ml-10 mr-6">开始日期</span> |
|||
<el-date-picker |
|||
class="w-150" |
|||
size="mini" |
|||
type="date" |
|||
v-model="startDate" |
|||
placeholder="选择日期" |
|||
value-format="yyyy-MM-dd" |
|||
format="yyyy-MM-dd" |
|||
></el-date-picker> |
|||
<span class="ml-10 mr-6">结束日期</span> |
|||
<el-date-picker |
|||
class="w-150" |
|||
size="mini" |
|||
type="date" |
|||
v-model="endDate" |
|||
placeholder="选择日期" |
|||
value-format="yyyy-MM-dd" |
|||
format="yyyy-MM-dd" |
|||
></el-date-picker> |
|||
</div> |
|||
|
|||
<div class="flex items-center"> |
|||
<el-button type="primary" size="mini" @click="handleSearch">查询</el-button> |
|||
<el-button size="mini" @click="handleReset">重置</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="mt-10"> |
|||
<el-table :data="tableData" border> |
|||
<el-table-column label="测站名称"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.stnm }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="测站编码"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.stcd }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="测站类型"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.sttp }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="预警类型"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.alarmType }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="监测数据"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.monitorData }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="监测时间"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.monitorTime }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="预警值" width="100"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.alarmValue }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="预警时间"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.alarmTime }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<!-- <el-table-column label="操作" width="120"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="mini">告警处置</el-button> |
|||
<el-button type="text" size="mini">解除本次预警</el-button> |
|||
</template> |
|||
</el-table-column> --> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, reactive, onMounted, watch } from "vue"; |
|||
import dayjs from "dayjs"; |
|||
import { getReservoirCZAlarmPageData } from "@/api/reservoir"; |
|||
|
|||
const props = defineProps({ |
|||
resCode: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}); |
|||
const dateRange: any = ref("0"); |
|||
const startDate: any = ref(dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss")); |
|||
const endDate: any = ref(dayjs().format("YYYY-MM-DD HH:mm:ss")); |
|||
const tableData: any = ref([]); |
|||
const paramsData: any = ref({ |
|||
pageSize: 10, |
|||
pageNum: 1, |
|||
total: 0, |
|||
}); |
|||
const emit = defineEmits(["node-click"]); |
|||
watch( |
|||
() => props.resCode, |
|||
(val) => { |
|||
getTableData(val); |
|||
}, |
|||
{ immediate: true }, |
|||
); |
|||
|
|||
onMounted(() => { |
|||
getTableData(); |
|||
}); |
|||
|
|||
function getTableData() { |
|||
getReservoirCZAlarmPageData({ |
|||
startDate: startDate.value, |
|||
endDate: endDate.value, |
|||
pageSize: paramsData.value.pageSize, |
|||
pageNum: paramsData.value.pageNum, |
|||
}).then((res) => { |
|||
console.log("res >>>>> ", res); |
|||
tableData.value = res.records || []; |
|||
paramsData.value.total = res.total; |
|||
}); |
|||
} |
|||
function handleChangeDate(value) { |
|||
switch (value) { |
|||
case "0": |
|||
startDate.value = dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"); |
|||
endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss"); |
|||
break; |
|||
case "1": |
|||
startDate.value = dayjs().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss"); |
|||
endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss"); |
|||
break; |
|||
case "2": |
|||
startDate.value = dayjs().subtract(7, "day").format("YYYY-MM-DD HH:mm:ss"); |
|||
endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss"); |
|||
break; |
|||
case "3": |
|||
startDate.value = dayjs().subtract(3, "month").format("YYYY-MM-DD HH:mm:ss"); |
|||
endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss"); |
|||
break; |
|||
case "4": |
|||
startDate.value = dayjs().subtract(1, "year").format("YYYY-MM-DD HH:mm:ss"); |
|||
endDate.value = dayjs().format("YYYY-MM-DD HH:mm:ss"); |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
} |
|||
function handleSearch() { |
|||
tableData.value = []; |
|||
getTableData(); |
|||
} |
|||
function handleReset() { |
|||
dateRange.value = null; |
|||
startDate.value = null; |
|||
endDate.value = null; |
|||
paramsData.value.pageNum = 1; |
|||
tableData.value = []; |
|||
getTableData(); |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.monitor-warning { |
|||
} |
|||
</style> |
|||
@ -0,0 +1,94 @@ |
|||
<template> |
|||
<div class="video-analysis"> |
|||
<div class="videoSelect"> |
|||
<el-select placeholder="请选择视频" v-model="activeVideo" size="mini" style="width: 240px" @change="videoChange"> |
|||
<el-option v-for="item in videoList" :key="item" :label="item" :value="item" /> |
|||
</el-select> |
|||
</div> |
|||
<el-tabs v-model="activeName"> |
|||
<el-tab-pane label="实时视频" name="realTime"> |
|||
<div class="videoBox"> |
|||
<video style="width: 100%; height: 100%" :src="videoUrl" v-if="videoUrl"></video> |
|||
<div v-else class="videoNull"> |
|||
<div class="videoContent"> |
|||
<img src="@/assets/image/videoNull.png" /> |
|||
<span>暂无内容</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, onMounted } from "vue"; |
|||
import { getVideoDataList, getOperationPlay } from "@/api/reservoir"; |
|||
|
|||
const props = defineProps({ |
|||
resCode: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}); |
|||
const activeName = ref("realTime"); |
|||
const videoUrl = ref(""); |
|||
const activeVideo = ref(""); |
|||
const videoList = ref([]); |
|||
onMounted(() => { |
|||
getVideoDataList({ |
|||
pageNum: 1, |
|||
pageSize: 100, |
|||
resCode: props.resCode, |
|||
}).then((res) => { |
|||
if (res.data) { |
|||
videoList.value = res.data.cameraIds; |
|||
} |
|||
}); |
|||
}); |
|||
function videoChange(val) { |
|||
console.log("cameraId-watch >>>>> ", val); |
|||
getOperationPlay({ |
|||
cameraId: val, |
|||
}).then((res) => { |
|||
if (res.data) { |
|||
videoUrl.value = res.data.urlsMap.flvPlayUrl; |
|||
} |
|||
}); |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.video-analysis { |
|||
.videoBox { |
|||
height: 558px; |
|||
video { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.videoNull { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: #383838; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
.videoContent { |
|||
img { |
|||
width: 44px; |
|||
height: 35px; |
|||
margin-bottom: 8px; |
|||
} |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
color: rgba(255, 255, 255, 0.55); |
|||
} |
|||
} |
|||
} |
|||
.videoSelect { |
|||
position: absolute; |
|||
z-index: 12; |
|||
right: 0; |
|||
top: 5px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<div class="project-detail-wrapper"> |
|||
<div class="header">项目详情</div> |
|||
<div class="content"> |
|||
<el-tabs :tab-position="'left'" v-model="activeTab"> |
|||
<el-tab-pane label="基础信息" name="1" lazy> |
|||
<BaseInfo ref="baseInfoRef" :resCode="resCode" @getResInfo="handleGetResInfo"></BaseInfo> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="数据统计" name="2" lazy> |
|||
<DataStatistics ref="dataStatisticsRef" :resCode="resCode"></DataStatistics> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="监测预警" name="5" lazy> |
|||
<MonitorWarning ref="monitorWarning" :resCode="resCode"></MonitorWarning> |
|||
</el-tab-pane> |
|||
<!-- <el-tab-pane label="视频分析" name="6" lazy> |
|||
<VideoAnalysis ref="videoAnalysis" :resCode="resCode"></VideoAnalysis> |
|||
</el-tab-pane> --> |
|||
</el-tabs> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, defineOptions, defineEmits, defineProps, watch } from "vue"; |
|||
import BaseInfo from "./components/BaseInfo.vue"; |
|||
import DataStatistics from "./components/DataStatistics.vue"; |
|||
import MonitorWarning from "./components/MonitorWarning.vue"; |
|||
// import VideoAnalysis from "./components/VideoAnalysis.vue"; |
|||
const props = defineProps({ |
|||
data: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}); |
|||
const resCode = ref(""); |
|||
defineOptions({ |
|||
name: "ProjectDetail", |
|||
}); |
|||
const emits = defineEmits(["getResInfo"]); |
|||
const activeTab = ref("1"); |
|||
function handleGetResInfo(data: any) { |
|||
emits("getResInfo", data); |
|||
} |
|||
watch( |
|||
() => props.data, |
|||
(val) => { |
|||
if (val) { |
|||
debugger; |
|||
resCode.value = val.code; |
|||
} |
|||
}, |
|||
{ immediate: true }, |
|||
); |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.project-detail-wrapper { |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
width: 1000px; |
|||
min-height: 600px; |
|||
max-height: 800px; |
|||
transform: translate(-50%, -50%); |
|||
border-radius: 4px; |
|||
background: #fff; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue