Niko
/
sy-water-data-board-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 新增养护和防治的tab页

feature-v1.0.0
Befend 1 month ago
parent
6d258f2567
commit
c3cb967255
12 changed files with 1514 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      src/api/dike/index.ts
  2. 252
      src/utils/echartsUtils.ts
  3. 2
      src/views/Main/Dike/components/DataStatistics.vue
  4. 406
      src/views/Main/Dike/components/PestAnimalAnalysis.vue
  5. 406
      src/views/Main/Dike/components/StatisticsAnalysis.vue
  6. 15
      src/views/Main/Dike/index.vue
  7. 2
      src/views/Main/Reservoir/components/DataStatistics.vue
  8. 2
      src/views/Main/Reservoir/index.vue
  9. 2
      src/views/Main/Sluice/components/DataStatistics.vue
  10. 406
      src/views/Main/Sluice/components/StatisticsAnalysis.vue
  11. 12
      src/views/Main/Sluice/index.vue
  12. 18
      src/views/Main/index.vue

12
src/api/dike/index.ts
View File

@ -97,3 +97,15 @@ export function exportSwtz(query: any) {
}
});
}
// 获取巡查统计分析数据/run/statistic/chart
export function getV2PatrolStatisticChart(data: any) {
return request({
url: `/run/statistic/chart`,
method: "post",
data,
headers: {
shuili: 'water ' + shuili
}
});
}

252
src/utils/echartsUtils.ts
View File

@ -0,0 +1,252 @@
// 通用接口结构，渲染折线图或柱形图
export const initCommonBarLineOptions = ({
data = {} as any,
type = "line" as any,
colors = ["#36b29e", "#29CCCC", "#0099df", "#81b84a"] as any,
seriesOptions = {} as any,
}) => {
const { markLine, xaxis, yaxis } = data as any;
let series: any = [];
let yAxis: any = [];
if (yaxis && yaxis.length) {
yAxis = yaxis.map((v: any) => {
return {
type: "value",
name: `${v.name}(${v.unit})`,
nameLocation: "end",
};
});
yaxis.forEach((v: any, i: any) => {
if (v.series?.length) {
v.series.forEach((v2: any) => {
series.push({
type: type || "line",
smooth: true,
yAxisIndex: i,
name: v2.name,
data: v2.data,
...seriesOptions,
});
});
}
});
}
if (markLine && markLine.length && series.length) {
let seriesItem = series.find((v: any) => v.yAxisIndex === 1) || series[0];
let markLineData = markLine.map((v: any, i: any) => {
return {
name: v.name,
yAxis: v.value,
label: {
color: colors[i] || "red",
},
lineStyle: {
color: colors[i] || "red",
},
};
});
seriesItem.markLine = {
symbol: "none",
label: {
show: true,
position: "insideEndTop",
formatter: "{b}",
},
lineStyle: {
width: 2,
type: "solid",
color: colors[0] || "red",
},
data: markLineData,
};
}
return {
color: colors,
title: {
// text: "统计",
},
legend: {
orient: "horizontal",
top: "2%",
},
grid: {
left: "5%",
right: "10%",
bottom: "10%",
top: "20%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#283b56",
},
},
},
xAxis: [
{
type: "category",
name: "",
position: "bottom",
axisLine: {
onZero: false,
show: true,
},
axisTick: {
alignWithLabel: true,
},
data: xaxis || [],
},
],
yAxis: yAxis,
series: series,
};
};
// 通用接口结构，渲染饼图环形图
export const initCommonPieRingOptions = ({
data = {} as any,
colors = ["#36b29e", "#29CCCC", "#0099df", "#81b84a"] as any,
seriesOptions = {} as any,
}) => {
const { title, yaxis } = data as any;
let series: any = [];
let currentSum: any = 0;
if (yaxis && yaxis.length) {
let newSeries = yaxis.flatMap((v: any) => v.series);
let data = newSeries.map((v: any) => {
currentSum += Number(v.sum ?? null);
return {
name: v.name,
value: v.sum,
};
});
series.push({
type: "pie",
center: ["50%", "50%"],
radius: ["55%", "65%"],
name: title,
data: data,
label: {
show: false,
},
...seriesOptions,
});
}
return {
color: colors,
title: {
text: currentSum,
top: "center",
left: "center",
textStyle: {
fontSize: 16,
fontWeight: "bold",
},
subtext: title,
subtextStyle: {
fontSize: 12,
},
},
tooltip: {
trigger: "item",
},
legend: {
orient: "horizontal",
top: "2%",
},
grid: {
left: "10%",
right: "10%",
bottom: "10%",
top: "30%",
},
series: series,
};
};
// 极坐标
export const initCommonAngleAxisOptions = ({
data = {} as any,
colors = ["#36b29e", "#29CCCC", "#0099df", "#81b84a"] as any,
seriesOptions = {} as any,
}) => {
const { title, yaxis } = data as any;
let radiusAxisData: any = [];
let seriesData: any = [];
let maxVal = 0;
if (yaxis && yaxis.length) {
let newSeries = yaxis.flatMap((v: any) => v.series);
newSeries.forEach((v: any, i: any) => {
radiusAxisData.push(v.name);
seriesData.push({
value: Number(v.sum ?? null),
itemStyle: {
color: colors[i],
},
});
});
// 设置这个极坐标的最大值，防止占满
maxVal = Math.max(...newSeries.map((v: any) => Number(v.sum ?? null))) * 1.25;
}
return {
color: colors,
title: [
{
show: false,
text: title || "",
},
],
polar: {
radius: ["50%", "80%"],
},
angleAxis: {
max: maxVal,
startAngle: 90,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
radiusAxis: {
show: true,
zlevel: 10,
type: "category",
data: radiusAxisData,
axisLabel: {
interval: 0, // 强制显示所有标签
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: false,
},
},
tooltip: {},
series: {
type: "bar",
data: seriesData,
coordinateSystem: "polar",
label: {
show: false,
position: "middle",
formatter: "{b}: {c}",
},
...seriesOptions,
},
};
};

2
src/views/Main/Dike/components/DataStatistics.vue
View File

@ -1,4 +1,4 @@
<!-- 数据统计 -->
<!-- 监测数据 -->
<template>
<div class="data-statistics">
<div class="search-box">

406
src/views/Main/Dike/components/PestAnimalAnalysis.vue
View File

@ -0,0 +1,406 @@
<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_DW_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_DW_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_DW_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>

406
src/views/Main/Dike/components/StatisticsAnalysis.vue
View File

@ -0,0 +1,406 @@
<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>

15
src/views/Main/Dike/index.vue
View File

@ -16,15 +16,18 @@
<el-tab-pane label="基础信息" name="1" lazy>
<BaseInfo ref="baseInfoRef" :resCode="resCode" @getResInfo="handleGetResInfo"></BaseInfo>
</el-tab-pane>
<el-tab-pane label="数据统计" name="2" lazy>
<el-tab-pane label="监测数据" name="2" lazy>
<DataStatistics ref="dataStatisticsRef" :resCode="resCode"></DataStatistics>
</el-tab-pane>
<el-tab-pane label="监测预警" name="5" lazy>
<el-tab-pane label="监测预警" name="3" lazy>
<MonitorWarning ref="monitorWarning" :resCode="resCode"></MonitorWarning>
</el-tab-pane>
<!-- <el-tab-pane label="视频分析" name="6" lazy>
<VideoAnalysis ref="videoAnalysis" :resCode="resCode"></VideoAnalysis>
</el-tab-pane> -->
<el-tab-pane label="巡查养护统计" name="4" lazy>
<StatisticsAnalysis ref="statAnalysis" :resCode="resCode"></StatisticsAnalysis>
</el-tab-pane>
<el-tab-pane :label="`有害动物防治统计`" name="5" lazy>
<PestAnimalAnalysis ref="statAnalysis" :resCode="resCode"></PestAnimalAnalysis>
</el-tab-pane>
</el-tabs>
</div>
</div>
@ -34,6 +37,8 @@ import { ref, watch, onMounted } from "vue";
import BaseInfo from "./components/BaseInfo.vue";
import DataStatistics from "./components/DataStatistics.vue";
import MonitorWarning from "./components/MonitorWarning.vue";
import StatisticsAnalysis from "./components/StatisticsAnalysis.vue";
import PestAnimalAnalysis from "./components/PestAnimalAnalysis.vue";
import { Close } from "@element-plus/icons-vue";
import DO from "@/assets/map/dike_one.png";
import DTT from "@/assets/map/dike_two_three.png";

2
src/views/Main/Reservoir/components/DataStatistics.vue
View File

@ -1,4 +1,4 @@
<!-- 数据统计 -->
<!-- 监测数据 -->
<template>
<div class="data-statistics">
<div class="search-box">

2
src/views/Main/Reservoir/index.vue
View File

@ -16,7 +16,7 @@
<el-tab-pane label="基础信息" name="1" lazy>
<BaseInfo ref="baseInfoRef" :resCode="resCode" @getResInfo="handleGetResInfo"></BaseInfo>
</el-tab-pane>
<el-tab-pane label="数据统计" name="2" lazy>
<el-tab-pane label="监测数据" name="2" lazy>
<DataStatistics ref="dataStatisticsRef" :resCode="resCode"></DataStatistics>
</el-tab-pane>
<el-tab-pane label="监测预警" name="5" lazy>

2
src/views/Main/Sluice/components/DataStatistics.vue
View File

@ -1,4 +1,4 @@
<!-- 数据统计 -->
<!-- 监测数据 -->
<template>
<div class="data-statistics">
<div class="search-box">

406
src/views/Main/Sluice/components/StatisticsAnalysis.vue
View File

@ -0,0 +1,406 @@
<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_SZ_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_SZ_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 === "SZ_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_SZ_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>

12
src/views/Main/Sluice/index.vue
View File

@ -16,15 +16,15 @@
<el-tab-pane label="基础信息" name="1" lazy>
<BaseInfo ref="baseInfoRef" :resCode="resCode" @getResInfo="handleGetResInfo"></BaseInfo>
</el-tab-pane>
<el-tab-pane label="数据统计" name="2" lazy>
<el-tab-pane label="监测数据" name="2" lazy>
<DataStatistics ref="dataStatisticsRef" :resCode="resCode"></DataStatistics>
</el-tab-pane>
<el-tab-pane label="监测预警" name="5" lazy>
<el-tab-pane label="监测预警" name="3" lazy>
<MonitorWarning ref="monitorWarning" :resCode="resCode"></MonitorWarning>
</el-tab-pane>
<!-- <el-tab-pane label="视频分析" name="6" lazy>
<VideoAnalysis ref="videoAnalysis" :resCode="resCode"></VideoAnalysis>
</el-tab-pane> -->
<el-tab-pane label="巡查养护统计" name="4" lazy>
<StatisticsAnalysis ref="statAnalysis" :resCode="resCode"></StatisticsAnalysis>
</el-tab-pane>
</el-tabs>
</div>
</div>
@ -34,12 +34,12 @@ import { ref, watch, onMounted } from "vue";
import BaseInfo from "./components/BaseInfo.vue";
import DataStatistics from "./components/DataStatistics.vue";
import MonitorWarning from "./components/MonitorWarning.vue";
import StatisticsAnalysis from "./components/StatisticsAnalysis.vue";
import { Close } from "@element-plus/icons-vue";
import SB from "@/assets/map/sluice_big.png";
import SM from "@/assets/map/sluice_middle.png";
import SS from "@/assets/map/sluice_small.png";
// import VideoAnalysis from "./components/VideoAnalysis.vue";
const props = defineProps({
data: {
type: Object,

18
src/views/Main/index.vue
View File

@ -95,8 +95,10 @@ onMounted(() => {
reservoirData.value = data;
});
window.$bus.$on("close-reservoir-dialog", () => {
window.$bus.$emit("open-left-panel");
window.$bus.$emit("open-right-panel");
if (!showSluice.value && !showDike.value) {
window.$bus.$emit("open-left-panel");
window.$bus.$emit("open-right-panel");
}
showReservoir.value = false;
reservoirData.value = {};
});
@ -108,8 +110,10 @@ onMounted(() => {
sluiceData.value = data;
});
window.$bus.$on("close-sluice-dialog", () => {
window.$bus.$emit("open-left-panel");
window.$bus.$emit("open-right-panel");
if (!showReservoir.value && !showDike.value) {
window.$bus.$emit("open-left-panel");
window.$bus.$emit("open-right-panel");
}
showSluice.value = false;
sluiceData.value = {};
});
@ -121,8 +125,10 @@ onMounted(() => {
dikeData.value = data;
});
window.$bus.$on("close-dike-dialog", () => {
window.$bus.$emit("open-left-panel");
window.$bus.$emit("open-right-panel");
if (!showSluice.value && !showReservoir.value) {
window.$bus.$emit("open-left-panel");
window.$bus.$emit("open-right-panel");
}
showDike.value = false;
dikeData.value = {};
});

Write Preview
Loading…
Cancel
Save