panyuyi
1 month ago
3 changed files with 376 additions and 2 deletions
@ -0,0 +1,231 @@ |
|||
<template> |
|||
<div class="overview-analysis-page slider-right"> |
|||
<TopBackTitle :showBackBtn="false"></TopBackTitle> |
|||
|
|||
<div class="slider-right-body"> |
|||
<div class="top-search"> |
|||
<span class="ml-10">巡查周期：</span> |
|||
<el-date-picker |
|||
v-model="paramsData.timeRange" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
value-format="yyyy-MM-dd" |
|||
></el-date-picker> |
|||
<span class="ml-10">工程：</span> |
|||
<el-select |
|||
:disabled="!canEdit" |
|||
class="w-240" |
|||
size="small" |
|||
remote |
|||
filterable |
|||
reserve-keyword |
|||
:remote-method="handleGetRemoteDikeMethod" |
|||
@focus="handleGetRemoteDikeMethod('')" |
|||
@change="handleChangeDike" |
|||
v-model="paramsData.dikeCode" |
|||
placeholder="请选择堤防" |
|||
> |
|||
<el-option |
|||
v-for="item in dikeList" |
|||
:key="item.id" |
|||
:label="item.dikeName" |
|||
:value="item.dikeCode" |
|||
></el-option> |
|||
</el-select> |
|||
<el-button |
|||
class="search-btn !ml-16" |
|||
type="success" |
|||
@click="handleSearch()" |
|||
>查询</el-button |
|||
> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
</div> |
|||
|
|||
<div class="content-box"> |
|||
<div class="sum-box-list"> |
|||
<div class="list-item"> |
|||
<div class="item-title">巡查项目总数(个)</div> |
|||
<div class="item-value"> |
|||
{{ proSum == null ? "-" : proSum }} |
|||
</div> |
|||
</div> |
|||
<div class="list-item"> |
|||
<div class="item-title">巡查记录总数(个)</div> |
|||
<div class="item-value"> |
|||
{{ proSum == null ? "-" : proSum }} |
|||
</div> |
|||
</div> |
|||
<div class="list-item"> |
|||
<div class="item-title">巡查缺陷总数(个)</div> |
|||
<div class="item-value"> |
|||
{{ proSum == null ? "-" : proSum }} |
|||
</div> |
|||
</div> |
|||
<div class="list-item"> |
|||
<div class="item-title">缺陷养护总数(个)</div> |
|||
<div class="item-value"> |
|||
{{ proSum == null ? "-" : proSum }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="echarts-box-list"> |
|||
<div class="title">巡查记录分析</div> |
|||
<div class="flex"> |
|||
<div class="echarts-box echarts-box-left" ref="proEchartLeft"></div> |
|||
<div |
|||
class="echarts-box echarts-box-left" |
|||
ref="proEchartRight" |
|||
></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="echarts-box-list"> |
|||
<div class="title">巡查分析</div> |
|||
<div class="echarts-box" ref="patrolEchart"></div> |
|||
</div> |
|||
|
|||
<div class="echarts-box-list"> |
|||
<div class="title">缺陷和养护对比</div> |
|||
<div class="echarts-box" ref="compareEchart"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import TopBackTitle from "@/components/TopBackTitle/index.vue"; |
|||
import { cascaderLazyLoad } from "@/utils/elUtils"; |
|||
|
|||
import { getV2PatrolStatisticChart, getRunProjectList } from "@/api/dike"; |
|||
|
|||
export default { |
|||
components: { |
|||
TopBackTitle, |
|||
}, |
|||
data() { |
|||
return { |
|||
dikeList: [], |
|||
paramsData: { |
|||
timeRange: [], |
|||
adcd: [], |
|||
}, |
|||
areasOptionProps: { |
|||
emitPath: false, |
|||
checkStrictly: true, //选择任意一级 |
|||
expandTrigger: "hover", |
|||
lazy: true, |
|||
lazyLoad: cascaderLazyLoad, |
|||
}, |
|||
}; |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
handleGetRemoteDikeMethod(query) { |
|||
getRunProjectList({ |
|||
pageSize: 10, |
|||
pageNum: 1, |
|||
data: { |
|||
dikeName: query, |
|||
}, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.dikeList = res.records; |
|||
} |
|||
}); |
|||
}, |
|||
getTableData() { |
|||
getV2PatrolStatisticChart().then((res) => {}); |
|||
}, |
|||
handleSearch() {}, |
|||
resetSearch() { |
|||
this.paramsData.timeRange = []; |
|||
this.paramsData.adcd = []; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.overview-analysis-page { |
|||
.slider-right-body { |
|||
padding: 0; |
|||
.top-search { |
|||
padding: 24px; |
|||
border-bottom: 1px solid #ccc; |
|||
} |
|||
|
|||
.content-box { |
|||
padding: 24px; |
|||
.sum-box-list { |
|||
display: flex; |
|||
.list-item { |
|||
width: 25%; |
|||
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-list { |
|||
.title { |
|||
padding-left: 10px; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
margin-top: 12px; |
|||
margin-bottom: 12px; |
|||
position: relative; |
|||
&::before { |
|||
content: " "; |
|||
width: 4px; |
|||
height: 4px; |
|||
background: #36b29e; |
|||
position: absolute; |
|||
left: 1px; |
|||
top: 50%; |
|||
margin-top: -2px; |
|||
transform: rotate(45deg); |
|||
} |
|||
} |
|||
|
|||
.echarts-box { |
|||
width: 100%; |
|||
height: 224px; |
|||
border: 1px solid #f0f0f0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue