|
|
|
@ -2,80 +2,68 @@ |
|
|
|
<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" |
|
|
|
<div class="table-box font-14"> |
|
|
|
<el-row> |
|
|
|
<el-col :span="10"> |
|
|
|
<div> |
|
|
|
<span>所属流域: </span> |
|
|
|
<el-select |
|
|
|
class="w-180" |
|
|
|
v-model="paramsData.basin" |
|
|
|
placeholder="请选择" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
> |
|
|
|
</el-cascader> |
|
|
|
<span>-</span> |
|
|
|
<el-option |
|
|
|
v-for="item in basinList" |
|
|
|
:key="item.dictValue" |
|
|
|
:label="item.dictLabel" |
|
|
|
:value="item.dictValue" |
|
|
|
></el-option> |
|
|
|
</el-select> |
|
|
|
<span class="ml-10">行政区划: </span> |
|
|
|
<el-cascader |
|
|
|
class="w-180" |
|
|
|
:options="areasOptions" |
|
|
|
v-model="paramsData.endArea" |
|
|
|
v-model="paramsData.xzqh" |
|
|
|
:props="areasOptionProps" |
|
|
|
placeholder="请选择" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
> |
|
|
|
</el-cascader> |
|
|
|
|
|
|
|
<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> |
|
|
|
</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> |
|
|
|
</el-col> |
|
|
|
<el-col :span="14"> |
|
|
|
<div class="flex justify-between"> |
|
|
|
<div class="statistic-item"> |
|
|
|
<div>10天内低于分洪水位次数（个）</div> |
|
|
|
<div class="font-24 mt-10">3</div> |
|
|
|
</div> |
|
|
|
<div class="line"></div> |
|
|
|
<div class="statistic-item"> |
|
|
|
<div>10天内低于分洪水位次数（个）</div> |
|
|
|
<div class="font-24 mt-10">3</div> |
|
|
|
</div> |
|
|
|
<div class="line"></div> |
|
|
|
<div class="statistic-item"> |
|
|
|
<div>10天内低于分洪水位次数（个）</div> |
|
|
|
<div class="font-24 mt-10">3</div> |
|
|
|
</div> |
|
|
|
<div class="line"></div> |
|
|
|
<div class="statistic-item"> |
|
|
|
<div>10天内低于分洪水位次数（个）</div> |
|
|
|
<div class="font-24 mt-10">3</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { getAreasData } from "@/api/areas/index"; |
|
|
|
import { regionData, codeToText, TextToCode } from "element-china-area-data"; |
|
|
|
import * as echarts from "echarts"; |
|
|
|
|
|
|
|
import { getAreasData } from "@/api/areas/index"; |
|
|
|
import { getDikeWaterRainProjectList } from "@/api/dike"; |
|
|
|
|
|
|
|
export default { |
|
|
|
@ -92,16 +80,15 @@ export default { |
|
|
|
total: 0, |
|
|
|
}, |
|
|
|
paramsData: { |
|
|
|
startArea: "", |
|
|
|
endArea: "", |
|
|
|
dikeGrad: "", |
|
|
|
dikeName: "", |
|
|
|
basin: "", |
|
|
|
xzqh: "", |
|
|
|
}, |
|
|
|
areasOptions: [], |
|
|
|
searchDikeName: "", |
|
|
|
dikeTypeList: [], // 堤防类型列表 |
|
|
|
dikeGradList: [], // 堤防级别列表 |
|
|
|
tableData: [], |
|
|
|
basinList: [], // 流域字典 |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
@ -123,8 +110,8 @@ export default { |
|
|
|
pageNum: this.pageData.pageNum, |
|
|
|
pageSize: this.pageData.pageSize, |
|
|
|
data: { |
|
|
|
dikeType: this.dikeType || "", |
|
|
|
dikeName: this.searchDikeName || "", |
|
|
|
basin: this.paramsData.basin || "", |
|
|
|
xzqh: this.paramsData.xzqh, |
|
|
|
}, |
|
|
|
}).then((res) => { |
|
|
|
if (res) { |
|
|
|
@ -133,6 +120,82 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
barInit() { |
|
|
|
let chartDom = this.$refs.barEle; |
|
|
|
let myChart = echarts.init(chartDom); |
|
|
|
let option = { |
|
|
|
title: { |
|
|
|
// text: "World Population", |
|
|
|
}, |
|
|
|
color: ["#38A0FF", "#4CCA73", "#FBD437"], |
|
|
|
tooltip: { |
|
|
|
trigger: "axis", |
|
|
|
axisPointer: { |
|
|
|
type: "shadow", |
|
|
|
}, |
|
|
|
}, |
|
|
|
// legend: { |
|
|
|
// orient: "horizontal", |
|
|
|
// bottom: "2%", |
|
|
|
// icon: "circle", |
|
|
|
// }, |
|
|
|
grid: { |
|
|
|
left: "3%", |
|
|
|
right: "4%", |
|
|
|
top: "10%", |
|
|
|
bottom: "10%", |
|
|
|
containLabel: true, |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: "category", |
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
alignWithLabel: true, |
|
|
|
}, |
|
|
|
data: this.barChartData.name, |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
type: "value", |
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false, |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
//网格线 |
|
|
|
show: true, //是否显示 |
|
|
|
lineStyle: { |
|
|
|
//网格线样式 |
|
|
|
// color: "#0735a2", //网格线颜色 |
|
|
|
// width: 1, //网格线的加粗程度 |
|
|
|
type: "dashed", //网格线类型 |
|
|
|
}, |
|
|
|
}, |
|
|
|
minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。 |
|
|
|
max: function (value) { |
|
|
|
return value.max + Math.ceil(0.2 * value.max); |
|
|
|
}, |
|
|
|
// boundaryGap: [0, 1], |
|
|
|
}, |
|
|
|
|
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: "完成率（%）", |
|
|
|
type: "bar", |
|
|
|
data: [], |
|
|
|
barMaxWidth: "10%", |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
|
|
|
|
option && myChart.setOption(option); |
|
|
|
window.addEventListener("resize", function () { |
|
|
|
myChart.resize(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 重置搜索条件 |
|
|
|
resetSearch() { |
|
|
|
this.searchDikeName = ""; |
|
|
|
@ -210,19 +273,20 @@ export default { |
|
|
|
margin-top: 24px; |
|
|
|
padding: 16px; |
|
|
|
background-color: white; |
|
|
|
} |
|
|
|
|
|
|
|
.top-search { |
|
|
|
margin-bottom: 8px; |
|
|
|
|
|
|
|
.search-input { |
|
|
|
width: 202px; |
|
|
|
margin-right: 10px; |
|
|
|
.statistic-item { |
|
|
|
padding: 20px; |
|
|
|
border-radius: 4px; |
|
|
|
background: linear-gradient(to bottom, #ffe4d2 0%, #fff7f1 100%); |
|
|
|
} |
|
|
|
.line { |
|
|
|
width: 2px; |
|
|
|
background: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.table { |
|
|
|
height: calc(680px - 34px); |
|
|
|
} |
|
|
|
.w-180 { |
|
|
|
width: 180px !important; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
panyuyi
1 year ago