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.
407 lines
11 KiB
407 lines
11 KiB
1 month ago
|
<template>
|
||
|
|
<div class="overview-analysis-page slider-right">
|
||
|
|
<div class="search-box">
|
||
|
|
<div class="options-box">
|
||
|
|
<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>
|
||
|
|
<el-button class="search-btn !ml-12" type="primary" @click="handleSearch()">查询</el-button>
|
||
|
|
<el-button @click="resetSearch()">重置</el-button>
|
||
|
|
</div>
|
||
|
|
</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="flex">
|
||
|
|
<div class="echarts-box echarts-box-left" ref="flawProblemPieRef"></div>
|
||
|
|
<div class="echarts-box echarts-box-right" ref="flawProblemBarRef"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="echarts-box-list">
|
||
|
|
<div class="title">缺陷养护对比分析</div>
|
||
|
|
<div class="flex">
|
||
|
|
<div class="echarts-box echarts-box-left" ref="yhComparePieRef"></div>
|
||
|
|
<div class="echarts-box echarts-box-right" ref="yhCompareBarRef"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
|
||
|
|
import * as echarts from "echarts";
|
||
|
|
import { getV2PatrolStatisticChart } from "@/api/dike";
|
||
|
|
import { initCommonBarLineOptions, initCommonPieRingOptions, initCommonAngleAxisOptions } from "@/utils/echartsUtils";
|
||
|
|
|
||
|
|
const projectSum: any = ref();
|
||
|
|
const xcRecordsSum: any = ref();
|
||
|
|
const flawSum: any = ref();
|
||
|
|
const yhSum: any = ref();
|
||
|
|
const paramsData: any = ref({
|
||
|
|
wagaCode: null,
|
||
|
|
wagaName: null,
|
||
|
|
timeRange: [],
|
||
|
|
});
|
||
|
|
const flawProblemPieRef: any = ref();
|
||
|
|
const flawProblemBarRef: any = ref();
|
||
|
|
const yhComparePieRef: any = ref();
|
||
|
|
const yhCompareBarRef: any = ref();
|
||
|
|
let flawProblemPie: any = ref();
|
||
|
|
let flawProblemBar: any = ref();
|
||
|
|
let yhComparePie: any = ref();
|
||
|
|
let yhCompareBar: any = ref();
|
||
|
|
|
||
|
|
// 底层获取图表数据
|
||
|
|
function requestFunc(data: any) {
|
||
|
|
const { group } = data;
|
||
|
|
return getV2PatrolStatisticChart({
|
||
|
|
group,
|
||
|
|
startTime: paramsData.value.timeRange[0] ? paramsData.value.timeRange[0] + " 00:00:00" : null,
|
||
|
|
endTime: paramsData.value.timeRange[1] ? paramsData.value.timeRange[1] + " 23:59:59" : null,
|
||
|
|
adcd: paramsData.value.adcd,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function echartsResizeFunc() {
|
||
|
|
flawProblemPieRef.value?.resize();
|
||
|
|
flawProblemBarRef.value?.resize();
|
||
|
|
yhComparePieRef.value?.resize();
|
||
|
|
yhCompareBarRef.value?.resize();
|
||
|
|
}
|
||
|
|
// 获取页面数据
|
||
|
|
function getTableData() {
|
||
|
|
// 缺陷问题等级分析
|
||
|
|
requestFunc({ group: "C_16" }).then((res: any) => {
|
||
|
|
if (res) {
|
||
|
|
nextTick(() => {
|
||
|
|
// 柱形图
|
||
|
|
flawProblemBar.value?.dispose();
|
||
|
|
flawProblemBar.value = echarts.init(flawProblemBarRef.value);
|
||
|
|
flawProblemBar.value.setOption(
|
||
|
|
initCommonBarLineOptions({
|
||
|
|
data: res || {},
|
||
|
|
type: "line",
|
||
|
|
colors: ["#0099DF", "#36B29E", "#F29130", "#F45555"],
|
||
|
|
seriesOptions: {
|
||
|
|
barWidth: 20,
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
);
|
||
|
|
// 饼状图
|
||
|
|
flawProblemPie.value?.dispose();
|
||
|
|
flawProblemPie.value = echarts.init(flawProblemPieRef.value);
|
||
|
|
flawProblemPie.value.setOption(
|
||
|
|
initCommonPieRingOptions({
|
||
|
|
data: res || {},
|
||
|
|
colors: [
|
||
|
|
{
|
||
|
|
type: "linear",
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: "rgba(54, 163, 217, 0.1)", // 0% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: "rgba(54, 163, 217, 1)", // 100% 处的颜色
|
||
|
|
},
|
||
|
|
],
|
||
|
|
global: false, // 缺省为 false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "linear",
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: "rgba(54, 178, 158, 0.1)", // 0% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: "rgba(54, 178, 158, 1)", // 100% 处的颜色
|
||
|
|
},
|
||
|
|
],
|
||
|
|
global: false, // 缺省为 false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "linear",
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: "rgba(242, 145, 48, 0.1)", // 0% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: "rgba(242, 145, 48, 1)", // 100% 处的颜色
|
||
|
|
},
|
||
|
|
],
|
||
|
|
global: false, // 缺省为 false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "linear",
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: "rgba(244, 85, 85, 0.1)", // 0% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: "rgba(244, 85, 85, 1)", // 100% 处的颜色
|
||
|
|
},
|
||
|
|
],
|
||
|
|
global: false, // 缺省为 false
|
||
|
|
},
|
||
|
|
],
|
||
|
|
seriesOptions: {},
|
||
|
|
}),
|
||
|
|
);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// 缺陷养护对比分析
|
||
|
|
requestFunc({ group: "C_17" }).then((res: any) => {
|
||
|
|
if (res) {
|
||
|
|
if (res.yaxis?.length) {
|
||
|
|
yhSum.value = Number(
|
||
|
|
res.yaxis.flatMap((v: any) => v.series)?.find((v: any) => v.code === "DF_BD_YH_SUM")?.sum ?? null,
|
||
|
|
);
|
||
|
|
}
|
||
|
|
nextTick(() => {
|
||
|
|
// 柱形图
|
||
|
|
yhCompareBar.value?.dispose();
|
||
|
|
yhCompareBar.value = echarts.init(yhCompareBarRef.value);
|
||
|
|
yhCompareBar.value.setOption(
|
||
|
|
initCommonBarLineOptions({
|
||
|
|
data: res || {},
|
||
|
|
type: "bar",
|
||
|
|
colors: ["#0099DF", "#81B84A"],
|
||
|
|
seriesOptions: {
|
||
|
|
barWidth: 20,
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
);
|
||
|
|
// 饼状图
|
||
|
|
yhComparePie.value?.dispose();
|
||
|
|
yhComparePie.value = echarts.init(yhComparePieRef.value);
|
||
|
|
let options = initCommonAngleAxisOptions({
|
||
|
|
data: res || {},
|
||
|
|
colors: [
|
||
|
|
{
|
||
|
|
type: "linear",
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: "rgba(54, 163, 217, 1)", // 0% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: "rgba(54, 163, 217, 0.1)", // 100% 处的颜色
|
||
|
|
},
|
||
|
|
],
|
||
|
|
global: false, // 缺省为 false
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "linear",
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: "rgba(129, 184, 74, 1)", // 0% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: "rgba(129, 184, 74, 0.1)", // 100% 处的颜色
|
||
|
|
},
|
||
|
|
],
|
||
|
|
global: false, // 缺省为 false
|
||
|
|
},
|
||
|
|
],
|
||
|
|
seriesOptions: {},
|
||
|
|
});
|
||
|
|
yhComparePie.value.setOption(options);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// 项目统计总数
|
||
|
|
requestFunc({ group: "C_18" }).then((res: any) => {
|
||
|
|
if (res) {
|
||
|
|
if (res?.yaxis?.length) {
|
||
|
|
let newArr = res.yaxis.flatMap((v: any) => v.series);
|
||
|
|
projectSum.value = newArr
|
||
|
|
.map((v: any) => Number(v.sum ?? null))
|
||
|
|
.reduce((acc: number, cur: number) => {
|
||
|
|
return acc + cur;
|
||
|
|
}, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function handleSearch() {
|
||
|
|
getTableData();
|
||
|
|
}
|
||
|
|
function resetSearch() {
|
||
|
|
paramsData.value.timeRange = [];
|
||
|
|
paramsData.value.wagaCode = null;
|
||
|
|
getTableData();
|
||
|
|
}
|
||
|
|
onMounted(() => {
|
||
|
|
getTableData();
|
||
|
|
window.addEventListener("resize", echartsResizeFunc);
|
||
|
|
});
|
||
|
|
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
window.removeEventListener("resize", echartsResizeFunc);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.overview-analysis-page {
|
||
|
|
height: 100%;
|
||
|
|
.search-box {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 12px;
|
||
|
|
.options-box {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-box {
|
||
|
|
height: calc(100% - 32px);
|
||
|
|
padding: 24px;
|
||
|
|
overflow-y: auto;
|
||
|
|
.sum-box-list {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
gap: 16px;
|
||
|
|
margin-bottom: 12px;
|
||
|
|
.list-item {
|
||
|
|
width: 25%;
|
||
|
|
height: 102px;
|
||
|
|
border: 1px solid #36b29e;
|
||
|
|
border-radius: 10px;
|
||
|
|
position: relative;
|
||
|
|
padding: 16px 24px;
|
||
|
|
background: linear-gradient(180deg, #eafffc 0%, rgba(222, 255, 250, 0) 100%), #ffffff;
|
||
|
|
overflow: hidden;
|
||
|
|
&::after {
|
||
|
|
position: absolute;
|
||
|
|
content: "";
|
||
|
|
background: url("@/assets/img/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;
|
||
|
|
}
|
||
|
|
.flex {
|
||
|
|
display: flex;
|
||
|
|
gap: 16px;
|
||
|
|
.echarts-box-left {
|
||
|
|
flex-shrink: 0;
|
||
|
|
width: 224px;
|
||
|
|
}
|
||
|
|
.echarts-box-right {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|