|
|
|
@ -2,164 +2,139 @@ |
|
|
|
<template> |
|
|
|
<div class="patrol-manage-page"> |
|
|
|
<div class="top-title">水雨情智能分析</div> |
|
|
|
<div class="table-box"> |
|
|
|
<div class="top-search"> |
|
|
|
<span>起/终点所在地：</span> |
|
|
|
<el-cascader |
|
|
|
:options="areasOptions" |
|
|
|
v-model="paramsData.startArea" |
|
|
|
:props="areasOptionProps" |
|
|
|
placeholder="请选择" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
> |
|
|
|
</el-cascader> |
|
|
|
<span>-</span> |
|
|
|
<el-cascader |
|
|
|
:options="areasOptions" |
|
|
|
v-model="paramsData.endArea" |
|
|
|
:props="areasOptionProps" |
|
|
|
placeholder="请选择" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
> |
|
|
|
</el-cascader> |
|
|
|
<div class="container"> |
|
|
|
<div class="title">智能分析</div> |
|
|
|
<div class="tabulation"> |
|
|
|
<div class="aside"> |
|
|
|
<div class="aside-header"> |
|
|
|
<span>水闸</span> |
|
|
|
<div class="tabel-search"> |
|
|
|
<el-select v-model="basin" placeholder="所属流域" size="mini"> |
|
|
|
<el-option v-for="item in basinOptions" :key="item.value" :label="item.label" :value="item.value"> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
|
|
|
|
<span class="ml-12">堤防名称：</span> |
|
|
|
<el-input |
|
|
|
class="search-input" |
|
|
|
v-model="searchDikeName" |
|
|
|
placeholder="请输入" |
|
|
|
></el-input> |
|
|
|
<el-button class="!ml-10" type="success" @click="getTableData()" |
|
|
|
>搜索</el-button |
|
|
|
> |
|
|
|
<el-button @click="resetSearch()">重置</el-button> |
|
|
|
<el-cascader |
|
|
|
:options="regionOptions" |
|
|
|
v-model="region" |
|
|
|
:props="areasOptionProps" |
|
|
|
placeholder="行政区划" |
|
|
|
clearable |
|
|
|
size="mini" |
|
|
|
@change="handleRegionChange" |
|
|
|
> |
|
|
|
</el-cascader> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="aside-body"> |
|
|
|
<el-table |
|
|
|
:data="tableData" |
|
|
|
border |
|
|
|
style="width: 100%" |
|
|
|
highlight-current-row |
|
|
|
@current-change="handleRowChange" |
|
|
|
> |
|
|
|
<el-table-column prop="date" label="闸名"> </el-table-column> |
|
|
|
<el-table-column prop="name" label="水位/m"> </el-table-column> |
|
|
|
<el-table-column prop="address" label="距离警戒水位/m"> </el-table-column> |
|
|
|
<el-table-column prop="address" label="排雨量/mm"> </el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<div class="aside-footer"> |
|
|
|
<span |
|
|
|
>共 <em class="em">{{ pageConfig.total }}</em> 条信息</span |
|
|
|
> |
|
|
|
<el-pagination |
|
|
|
background |
|
|
|
layout="prev, pager, next" |
|
|
|
:page-size="pageConfig.pageSize" |
|
|
|
:current-page="pageConfig.pageNum" |
|
|
|
:total="pageConfig.total" |
|
|
|
:pager-count="5" |
|
|
|
@current-change="getSluiceStatisticalList" |
|
|
|
> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="analysis"> |
|
|
|
<div class="top"> |
|
|
|
<div class="card"> |
|
|
|
<span>10天内低于分洪水位次数(个)</span> |
|
|
|
<span class="data">{{ analysisData.belowPeakCount }}</span> |
|
|
|
</div> |
|
|
|
<div class="card"> |
|
|
|
<span>10天内高于警戒水位次数(个)</span> |
|
|
|
<span class="data">{{ analysisData.exceedWarningCount }}</span> |
|
|
|
</div> |
|
|
|
<div class="card"> |
|
|
|
<span>24小时内降雨量超过50mm/h次数(个)</span> |
|
|
|
<span class="data">{{ analysisData.exceedRainfallCount }}</span> |
|
|
|
</div> |
|
|
|
<div class="card"> |
|
|
|
<span>10天内当天总过闸流量高于100m³次数(个)</span> |
|
|
|
<span class="data">{{ analysisData.exceedGateFlowCount }}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="statistical-chart"></div> |
|
|
|
<div class="statistical-chart"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-table class="mt-16" height="625" :data="tableData" border> |
|
|
|
<el-table-column type="index" align="center" label="序号" width="80" /> |
|
|
|
<el-table-column prop="dikeName" align="center" label="堤防名称" /> |
|
|
|
<el-table-column prop="dikeGrad" align="center" label="堤防级别"> |
|
|
|
<template #default="{ row }">{{ |
|
|
|
getDikeGrad(row.dikeGrad) |
|
|
|
}}</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="dikeType" align="center" label="堤防类别" /> |
|
|
|
<el-table-column prop="dikeLen" align="center" label="堤防长度" /> |
|
|
|
<el-table-column prop="project" align="center" label="起/终点所在地" /> |
|
|
|
<el-table-column |
|
|
|
prop="engineeringManagementUnit" |
|
|
|
align="center" |
|
|
|
label="工程管理单位" |
|
|
|
/> |
|
|
|
<el-table-column prop="operate" align="center" label="操作"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<!-- <el-button type="text" size="small">处置</el-button> --> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<el-pagination |
|
|
|
background |
|
|
|
class="pagination" |
|
|
|
style="margin-top: 16px; margin-right: 16px; float: right" |
|
|
|
:current-page="pageData.pageNum" |
|
|
|
:page-sizes="pageData.pageSizes" |
|
|
|
layout="total, prev, pager, next, sizes, jumper" |
|
|
|
:total="pageData.total" |
|
|
|
@size-change="getTableData()" |
|
|
|
> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { getAreasData } from "@/api/areas/index"; |
|
|
|
import { regionData, codeToText, TextToCode } from "element-china-area-data"; |
|
|
|
|
|
|
|
import { getDikeWaterRainProjectList } from "@/api/dike"; |
|
|
|
|
|
|
|
import { |
|
|
|
getSluiceStatisticalListApi, |
|
|
|
getSluiceExceedApi, |
|
|
|
getRainfallAndGateFlowApi, |
|
|
|
getWaterLevelInfoApi |
|
|
|
} from '@/api/sluice/index.js'; |
|
|
|
import { getAreasData } from '@/api/areas/index.js'; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
dialogVisible: false, |
|
|
|
basin: '', // 流域 |
|
|
|
region: '', // 行政区划 |
|
|
|
basinOptions: [], // 流域选项 |
|
|
|
regionOptions: [], // 行政区划选项 |
|
|
|
areasOptionProps: { |
|
|
|
emitPath: false, |
|
|
|
checkStrictly: true, //选择任意一级 |
|
|
|
checkStrictly: true //选择任意一级 |
|
|
|
}, |
|
|
|
pageData: { |
|
|
|
pageNum: 1, |
|
|
|
tableData: [], |
|
|
|
|
|
|
|
pageConfig: { |
|
|
|
pageSize: 10, |
|
|
|
total: 0, |
|
|
|
}, |
|
|
|
paramsData: { |
|
|
|
startArea: "", |
|
|
|
endArea: "", |
|
|
|
dikeGrad: "", |
|
|
|
dikeName: "", |
|
|
|
pageNum: 1, |
|
|
|
total: 100 |
|
|
|
}, |
|
|
|
areasOptions: [], |
|
|
|
searchDikeName: "", |
|
|
|
dikeTypeList: [], // 堤防类型列表 |
|
|
|
dikeGradList: [], // 堤防级别列表 |
|
|
|
tableData: [], |
|
|
|
analysisData: { |
|
|
|
belowPeakCount: 0, // 低于分洪水位次数 |
|
|
|
exceedWarningCount: 0, // 高于警戒水位次数 |
|
|
|
exceedRainfallCount: 0, // 降雨量超过50mm/h次数 |
|
|
|
exceedGateFlowCount: 0 // 当天总过闸流量高于100m³次数 |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getDicts("embankment_level").then((response) => { |
|
|
|
this.dikeGradList = response.data; |
|
|
|
}); |
|
|
|
this.getDicts("embankment_type").then((response) => { |
|
|
|
this.dikeTypeList = response.data; |
|
|
|
}); |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getTableData(); |
|
|
|
this.getTreeData(); |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
// 获取列表信息 |
|
|
|
getTableData() { |
|
|
|
getDikeWaterRainProjectList({ |
|
|
|
pageNum: this.pageData.pageNum, |
|
|
|
pageSize: this.pageData.pageSize, |
|
|
|
// 获取水闸统计列表 |
|
|
|
getSluiceStatisticalList() { |
|
|
|
const params = { |
|
|
|
pageSize: this.pageConfig.pageSize, |
|
|
|
pageNum: this.pageConfig.pageNum, |
|
|
|
data: { |
|
|
|
dikeType: this.dikeType || "", |
|
|
|
dikeName: this.searchDikeName || "", |
|
|
|
}, |
|
|
|
}).then((res) => { |
|
|
|
if (res) { |
|
|
|
this.tableData = res.records; |
|
|
|
this.pageData.total = res.total; |
|
|
|
basin: this.basin, |
|
|
|
adcd: this.region //区域筛选 |
|
|
|
} |
|
|
|
}; |
|
|
|
getSluiceStatisticalListApi(params).then((res) => { |
|
|
|
this.tableData = res.data; |
|
|
|
this.pageConfig.total = res.total; |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 重置搜索条件 |
|
|
|
resetSearch() { |
|
|
|
this.searchDikeName = ""; |
|
|
|
this.getTableData(); |
|
|
|
}, |
|
|
|
// 水雨情监测 |
|
|
|
handleGoReport(row) { |
|
|
|
this.$router.push({ |
|
|
|
path: "inspectionPlan", |
|
|
|
query: { |
|
|
|
dikeCode: row.dikeCode, |
|
|
|
dikeName: row.dikeName, |
|
|
|
}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 智能分析 |
|
|
|
handleGoAnalyse(row) { |
|
|
|
this.$router.push({ |
|
|
|
path: "inspectionRecords", |
|
|
|
query: { |
|
|
|
dikeCode: row.dikeCode, |
|
|
|
dikeName: row.dikeName, |
|
|
|
}, |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 获取地区树数据 |
|
|
|
getTreeData() { |
|
|
|
// 获取行政区划选项数据 |
|
|
|
getAreasOptions() { |
|
|
|
getAreasData().then((items) => { |
|
|
|
if (items?.data) { |
|
|
|
let res = []; |
|
|
|
@ -168,7 +143,7 @@ export default { |
|
|
|
if (i.parentid === pid) { |
|
|
|
const newItem = { |
|
|
|
label: i.name, |
|
|
|
value: i.id, |
|
|
|
value: i.id |
|
|
|
}; |
|
|
|
if (i.layer != 3) newItem.children = []; |
|
|
|
res.push(newItem); |
|
|
|
@ -177,17 +152,44 @@ export default { |
|
|
|
} |
|
|
|
}; |
|
|
|
getChildren(res, items.data[0].parentid); |
|
|
|
this.areasOptions = res; |
|
|
|
this.regionOptions = res; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
getDikeGrad(key) { |
|
|
|
return ( |
|
|
|
this.dikeGradList?.filter((v) => v.dictValue === key)?.[0]?.dictLabel || |
|
|
|
key |
|
|
|
); |
|
|
|
// 流域改变 |
|
|
|
handleRegionChange() { |
|
|
|
this.pageConfig.pageNum = 1; |
|
|
|
this.getSluiceStatisticalList(); |
|
|
|
}, |
|
|
|
// 选择一个水闸数据行 |
|
|
|
handleRowChange(row) { |
|
|
|
getSluiceExceedApi(440607000036).then((res) => { |
|
|
|
if (!res.success) return; |
|
|
|
const data = res.data; |
|
|
|
this.analysisData = { |
|
|
|
belowPeakCount: data.belowPeakCount, // 低于分洪水位次数 |
|
|
|
exceedWarningCount: data.exceedWarningCount, // 高于警戒水位次数 |
|
|
|
exceedRainfallCount: data.exceedRainfallCount, // 降雨量超过50mm/h次数 |
|
|
|
exceedGateFlowCount: data.exceedGateFlowCount // 当天总过闸流量高于100m³次数 |
|
|
|
}; |
|
|
|
}); |
|
|
|
getRainfallAndGateFlowApi(440607000036).then((res) => { |
|
|
|
if (!res.success) return; |
|
|
|
const data = res.data.rainfallAndGateFlowMap; //{2024-03-04:{rainfall: '0.0', gateFlow: '0.0'}......} |
|
|
|
}); |
|
|
|
|
|
|
|
getWaterLevelInfoApi(440607000036).then((res) => { |
|
|
|
if (!res.success) return; |
|
|
|
const data = res.data.waterLevelMap; // {2024-03-04:{waterLevel: '0.0', floodLevel: '12', warningLevel: '38'}.....} |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
this.getSluiceStatisticalList(); |
|
|
|
this.getAreasOptions(); |
|
|
|
this.handleRowChange(); |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
|
|
@ -204,24 +206,129 @@ export default { |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
.table-box { |
|
|
|
.container { |
|
|
|
width: 100%; |
|
|
|
min-height: calc(100vh - 56px - 64px); |
|
|
|
margin-top: 24px; |
|
|
|
padding: 16px; |
|
|
|
padding: 24px; |
|
|
|
background-color: white; |
|
|
|
|
|
|
|
.top-search { |
|
|
|
margin-bottom: 8px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 16px; |
|
|
|
flex-grow: 1; |
|
|
|
.title { |
|
|
|
color: rgba(0, 0, 0, 0.9); |
|
|
|
font-family: Source Han Sans; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 500; |
|
|
|
line-height: 24px; |
|
|
|
letter-spacing: 0em; |
|
|
|
|
|
|
|
.search-input { |
|
|
|
width: 202px; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
padding-left: 12px; |
|
|
|
border-left: 3px solid #31a08e; |
|
|
|
} |
|
|
|
.tabulation { |
|
|
|
display: flex; |
|
|
|
gap: 16px; |
|
|
|
flex: 1; |
|
|
|
align-items: stretch; |
|
|
|
.aside { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
flex: 560; |
|
|
|
.aside-header { |
|
|
|
height: 56px; |
|
|
|
border-radius: 8px 8px 0px 0px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 12px 16px; |
|
|
|
.tabel-search { |
|
|
|
height: 32px; |
|
|
|
display: flex; |
|
|
|
gap: 16px; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
.aside-body { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
.aside-footer { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
span { |
|
|
|
font-family: 思源黑体; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 14; |
|
|
|
color: rgba(0, 0, 0, 0.4); |
|
|
|
.em { |
|
|
|
color: rgba(0, 0, 0, 0.6); |
|
|
|
font-weight: 500; |
|
|
|
font-size: 14; |
|
|
|
text-decoration: underline; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.analysis { |
|
|
|
flex: 1008; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 24px; |
|
|
|
align-items: stretch; |
|
|
|
padding-bottom: 20px; |
|
|
|
.top { |
|
|
|
height: 126px; |
|
|
|
display: flex; |
|
|
|
gap: 16px; |
|
|
|
.card { |
|
|
|
position: relative; |
|
|
|
flex: 1; |
|
|
|
box-sizing: border-box; |
|
|
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); |
|
|
|
background: linear-gradient(180deg, #eafffc 0%, rgba(222, 255, 250, 0) 100%), #ffffff; |
|
|
|
border-radius: 8px; |
|
|
|
border: 1px solid #9fd3ca; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 8px; |
|
|
|
padding: 16px 24px; |
|
|
|
|
|
|
|
font-family: 思源黑体; |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 350; |
|
|
|
line-height: 24px; |
|
|
|
letter-spacing: 0em; |
|
|
|
color: rgba(0, 0, 0, 0.9); |
|
|
|
|
|
|
|
.data { |
|
|
|
font-family: 思源黑体; |
|
|
|
font-size: 32px; |
|
|
|
font-weight: 500; |
|
|
|
line-height: normal; |
|
|
|
letter-spacing: 0em; |
|
|
|
color: #31a08e; |
|
|
|
} |
|
|
|
|
|
|
|
.table { |
|
|
|
height: calc(680px - 34px); |
|
|
|
img { |
|
|
|
position: absolute; |
|
|
|
bottom: 5px; |
|
|
|
right: -5px; |
|
|
|
width: 74px; |
|
|
|
height: 74px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.statistical-chart { |
|
|
|
flex: 1; |
|
|
|
padding: 24px; |
|
|
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); |
|
|
|
border: 1px solid #e5e5e5; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
yantingyu
1 year ago