You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
347 lines
9.4 KiB
347 lines
9.4 KiB
<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"
|
|
size="small"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="yyyy-MM-dd"
|
|
></el-date-picker>
|
|
<span class="ml-10">行政区划：</span>
|
|
<el-cascader
|
|
v-model="paramsData.adcd"
|
|
:props="areasOptionProps"
|
|
placeholder="请选择行政区划"
|
|
clearable
|
|
size="small"
|
|
>
|
|
</el-cascader>
|
|
<el-button
|
|
class="search-btn !ml-16"
|
|
size="small"
|
|
type="success"
|
|
@click="handleSearch()"
|
|
>查询</el-button
|
|
>
|
|
<el-button @click="resetSearch()" size="small">重置</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">
|
|
{{ projectSum == null ? "-" : projectSum }}
|
|
</div>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="item-title">巡查记录总数(个)</div>
|
|
<div class="item-value">
|
|
{{ xcRecordsSum == null ? "-" : xcRecordsSum }}
|
|
</div>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="item-title">巡查缺陷总数(个)</div>
|
|
<div class="item-value">
|
|
{{ flawSum == null ? "-" : flawSum }}
|
|
</div>
|
|
</div>
|
|
<div class="list-item">
|
|
<div class="item-title">缺陷养护总数(个)</div>
|
|
<div class="item-value">
|
|
{{ yhSum == null ? "-" : yhSum }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="echarts-box-list">
|
|
<div class="title">工程分布</div>
|
|
<div class="echarts-box" ref="proEchart"></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 * as echarts from "echarts";
|
|
import TopBackTitle from "@/components/TopBackTitle/index.vue";
|
|
import { cascaderLazyLoad } from "@/utils/elUtils";
|
|
|
|
import { getV2PatrolStatisticChart } from "@/api/dike";
|
|
|
|
import { initCommonBarLineOptions } from "@/utils/echartsUtils";
|
|
|
|
export default {
|
|
components: {
|
|
TopBackTitle,
|
|
},
|
|
data() {
|
|
return {
|
|
projectSum: null,
|
|
xcRecordsSum: null,
|
|
flawSum: null,
|
|
yhSum: null,
|
|
tabsList: [],
|
|
paramsData: {
|
|
timeRange: [],
|
|
adcd: null,
|
|
},
|
|
areasOptionProps: {
|
|
emitPath: false,
|
|
checkStrictly: true, //选择任意一级
|
|
expandTrigger: "hover",
|
|
lazy: true,
|
|
lazyLoad: cascaderLazyLoad,
|
|
},
|
|
proEchartInstance: null,
|
|
patrolEchartInstance: null,
|
|
compareEchartInstance: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getTableData();
|
|
window.addEventListener("resize", this.echartsResizeFunc);
|
|
},
|
|
beforeMounted() {
|
|
window.removeEventListener("resize", this.echartsResizeFunc);
|
|
},
|
|
methods: {
|
|
// 底层获取图表数据
|
|
requestFunc({ group }) {
|
|
return getV2PatrolStatisticChart({
|
|
group,
|
|
startTime: this.paramsData.timeRange[0]
|
|
? this.paramsData[0] + " 00:00:00"
|
|
: null,
|
|
endTime: this.paramsData.timeRange[1]
|
|
? this.paramsData[1] + " 23:59:59"
|
|
: null,
|
|
adcd: this.paramsData.adcd,
|
|
});
|
|
},
|
|
// 渲染echarts图表
|
|
|
|
renderEcharts({
|
|
group,
|
|
echartsInstanceName,
|
|
echartsDomName,
|
|
echartsOptions,
|
|
}) {
|
|
return new Promise((r, j) => {
|
|
this.requestFunc({
|
|
group,
|
|
})
|
|
.then((res) => {
|
|
if (res.data) {
|
|
this.$nextTick(() => {
|
|
if (this[echartsInstanceName])
|
|
this[echartsInstanceName].dispose();
|
|
this[echartsInstanceName] = echarts.init(
|
|
this.$refs[echartsDomName]
|
|
);
|
|
this[echartsInstanceName].setOption(
|
|
initCommonBarLineOptions({
|
|
...echartsOptions,
|
|
data: res.data || {},
|
|
})
|
|
);
|
|
});
|
|
}
|
|
r(res);
|
|
})
|
|
.catch((err) => {
|
|
j(err);
|
|
});
|
|
});
|
|
},
|
|
echartsResizeFunc() {
|
|
if (this.proEchartInstance) this.proEchartInstance.resize();
|
|
if (this.patrolEchartInstance) this.patrolEchartInstance.resize();
|
|
if (this.compareEchartInstance) this.compareEchartInstance.resize();
|
|
},
|
|
// 获取页面数据
|
|
getTableData() {
|
|
// 渲染工程分布
|
|
this.renderEcharts({
|
|
group: "C_SZ_1",
|
|
echartsInstanceName: "proEchartInstance",
|
|
echartsDomName: "proEchart",
|
|
echartsOptions: {
|
|
type: "bar",
|
|
seriesOptions: {
|
|
itemStyle: {
|
|
color: "#36B29E",
|
|
},
|
|
barWidth: 20,
|
|
},
|
|
},
|
|
}).then((res) => {
|
|
if (res.data) {
|
|
// 渲染图表和统计总数
|
|
if (res.data?.yaxis?.length) {
|
|
let num = res.data.yaxis[0]?.series.find(
|
|
(v) => v.code === "SZ_PROJECT_ADCD_SUM"
|
|
)?.sum;
|
|
this.projectSum = Number(num ?? null);
|
|
}
|
|
}
|
|
});
|
|
// 获取巡查分析数据
|
|
this.renderEcharts({
|
|
group: "C_SZ_2",
|
|
echartsInstanceName: "patrolEchartInstance",
|
|
echartsDomName: "patrolEchart",
|
|
echartsOptions: {
|
|
type: "bar",
|
|
colors: ["#29CCCC", "#0099DF"],
|
|
seriesOptions: {
|
|
barWidth: 20,
|
|
stack: "one",
|
|
},
|
|
},
|
|
}).then((res) => {
|
|
if (res.data) {
|
|
// 渲染图表和统计总数
|
|
if (res.data?.yaxis?.length) {
|
|
this.xcRecordsSum = res.data.yaxis
|
|
.flatMap((item) => item.series)
|
|
.flatMap((v) => Number(v.sum ?? null))
|
|
.reduce((acc, cur) => acc + cur, 0);
|
|
}
|
|
}
|
|
});
|
|
// 获取巡查分析数据
|
|
this.renderEcharts({
|
|
group: "C_SZ_3",
|
|
echartsInstanceName: "compareEchartInstance",
|
|
echartsDomName: "compareEchart",
|
|
echartsOptions: {
|
|
type: "bar",
|
|
colors: ["#81B84A", "#0099DF"],
|
|
seriesOptions: {
|
|
barWidth: 20,
|
|
},
|
|
},
|
|
}).then((res) => {
|
|
if (res.data) {
|
|
// 渲染图表和统计总数
|
|
if (res.data?.yaxis?.length) {
|
|
let newArr = res.data.yaxis.flatMap((v) => v.series);
|
|
let num1 = newArr.find((v) => v.code === "SZ_QX_ADCD_SUM")?.sum;
|
|
this.flawSum = Number(num1 ?? null);
|
|
let num2 = newArr.find((v) => v.code === "SZ_YH_ADCD_SUM")?.sum;
|
|
this.yhSum = Number(num2 ?? null);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
handleSearch() {
|
|
this.getTableData();
|
|
},
|
|
resetSearch() {
|
|
this.paramsData.timeRange = [];
|
|
this.paramsData.adcd = null;
|
|
this.getTableData();
|
|
},
|
|
},
|
|
};
|
|
</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>
|
|
|