zhengsl/WholeProcessPlatform
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

过鱼设施，基础信息参数变化传递

Browse Source
This commit is contained in:
王兴凯 2026-06-08 17:31:57 +08:00
parent e2b77507fd
commit 8739128085
3 changed files with 281 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/MapModal/components/BasicInfo.vue
View File

@ -179,6 +179,30 @@ const columnsConfig = ref([
type: 'fp_point',
columns: FPPointColumns
},
{
type: 'FP',
columns: FPPointColumns
},
{
type: 'FP_1',
columns: FPPointColumns
},
{
type: 'FP_2',
columns: FPPointColumns
},
{
type: 'FP_3',
columns: FPPointColumns
},
{
type: 'FP_4',
columns: FPPointColumns
},
{
type: 'FP_5',
columns: FPPointColumns
},
{
type: 'fb_point',
columns: FBPointColumns

120
frontend/src/components/MapModal/setting.config.ts
View File

@ -361,27 +361,27 @@ const FPTabs: Array<any> =
];
// // 过鱼设施在建状态
// const FPTabs1: Array<any> = [
// {
// name: '基础信息',
// key: 'basicInfo',
// type: 'basic',
// url: '/bbi/siteBipc/getSiteBasicInfo'
// },
// {
// name: '实时视频',
// key: 'videoInfo',
// type: 'video',
// url: '/video/dataStcdFrame/getVideoMonitorList'
// },
// {
// name: '建设情况',
// key: 'FishFacilityBuildState', //basicState
// type: 'FishFacilityBuildState', //basicState
// // url: "/env/fp/fpFacilities/getFpStcdConstructionInfo2",
// url: '/wmp-env-server/env/fp/run/secondBuild/GetKendoListCust'
// }
// ]
const FPTabs1: Array<any> = [
{
name: '基础信息',
key: 'basicInfo',
type: 'basic',
url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo'
},
{
name: '实时视频',
key: 'videoInfo',
type: 'video',
url: '/video/dataStcdFrame/getVideoMonitorList'
},
{
name: '建设情况',
key: 'FishFacilityBuildState', //basicState
type: 'FishFacilityBuildState', //basicState
// url: "/env/fp/fpFacilities/getFpStcdConstructionInfo2",
url: '/wmp-env-server/env/fp/run/secondBuild/GetKendoListCust'
}
];
//鱼类增殖站 √
const FBTabs: Array<any> = [
{
@ -675,13 +675,13 @@ const WQFBTabs: Array<any> = [
key: 'WaterQuality',
type: 'WaterQuality',
default: true // 默认显示
},
{
name: '实时视频',
key: 'videoInfo',
type: 'video',
url: '/video/dataStcdFrame/getVideoMonitorList'
}
// {
// name: '实时视频',
// key: 'videoInfo',
// type: 'video',
// url: '/video/dataStcdFrame/getVideoMonitorList'
// }
];
const WQTabs: Array<any> = [
...WQFBTabs,
@ -1277,27 +1277,32 @@ const handleTabs = (modaldata: any) => {
case 'DW_4':
case 'DW_5':
return DWTabs;
// case 'FP': //todo，后续再删除多余代码
// case 'FP_1': //todo，后续再删除多余代码
// // case "FP_2": //todo，后续再删除多余代码
// case 'FP_3': //todo，后续再删除多余代码
// case 'FP_4': //todo，后续再删除多余代码
// // case "FP_5": //todo，后续再删除多余代码
// if (Session.getAppCode() === 'hbb') {
// // mway为2的时侯显示在线监测数据
// if (modaldata.bldsttCcode == '1' || modaldata.bldsttCcode == '0' || modaldata.bldstt == '1' || modaldata.bldstt == '0') {
// return [
// ...FPTabs1 //建设情况
// ]
// } else {
// if (modaldata.mway != 2) {
// return FPTabs.filter((item) => item.name !== '在线监测数据')
// } else {
// return [
// ...FPTabs //有监测数据
// ]
// }
// }
case 'FP': //todo，后续再删除多余代码
case 'FP_1': //todo，后续再删除多余代码
// case "FP_2": //todo，后续再删除多余代码
case 'FP_3': //todo，后续再删除多余代码
case 'FP_4': //todo，后续再删除多余代码
// case "FP_5": //todo，后续再删除多余代码
// // if (Session.getAppCode() === 'hbb') {
// mway为2的时侯显示在线监测数据
if (
modaldata.bldsttCcode == '1' ||
modaldata.bldsttCcode == '0' ||
modaldata.bldstt == '1' ||
modaldata.bldstt == '0'
) {
return [
...FPTabs1 //建设情况
];
} else {
if (modaldata.mway != 2) {
return FPTabs.filter(item => item.name !== '在线监测数据');
} else {
return [
...FPTabs //有监测数据
];
}
}
// } else {
// if (modaldata.bldsttCcode == '1' || modaldata.bldsttCcode == '0' || modaldata.bldstt == '1' || modaldata.bldstt == '0') {
// return [
@ -1321,13 +1326,18 @@ const handleTabs = (modaldata: any) => {
// ]
// }
// }
// case 'FP_2': //todo，后续再删除多余代码
// case 'FP_5': //todo，后续再删除多余代码
// if (modaldata.bldsttCcode == '1' || modaldata.bldsttCcode == '0' || modaldata.bldstt == '1' || modaldata.bldstt == '0') {
// return FPTabs1
// } else {
// return FPTabs
// }
case 'FP_2': //todo，后续再删除多余代码
case 'FP_5': //todo，后续再删除多余代码
if (
modaldata.bldsttCcode == '1' ||
modaldata.bldsttCcode == '0' ||
modaldata.bldstt == '1' ||
modaldata.bldstt == '0'
) {
return FPTabs1;
} else {
return FPTabs;
}
// case 'ZQ':
// return ZQTabs
// case 'FB':

171
frontend/src/modules/GYZLLB/index.vue
View File

@ -27,16 +27,61 @@
</div>
</div>
</div>
<!-- 详情弹框 -->
<a-modal
v-model:open="modalVisible"
:title="modalTitle"
width="1650px"
:footer="null"
@cancel="handleModalClose"
>
<div class="modal-content">
<a-descriptions bordered :column="2" size="small">
<a-descriptions-item label="年份">
{{ modalData.year }}
</a-descriptions-item>
<a-descriptions-item label="流域/设施">
{{ modalData.basinName }}
</a-descriptions-item>
<a-descriptions-item label="鱼类总数">
<span style="color: #1890ff; font-weight: bold;">
{{ modalData.totalCount }} {{ getUnit() }}
</span>
</a-descriptions-item>
<a-descriptions-item label="">
{{ modalData.baseid }}
</a-descriptions-item>
</a-descriptions>
<a-divider orientation="left">鱼类分布详情</a-divider>
<a-table
:columns="fishColumns"
:data-source="modalData.fishList"
:pagination="false"
size="small"
:scroll="{ y: 300 }"
>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'percentage'">
{{ record.percentage }}%
</template>
</template>
</a-table>
</div>
</a-modal>
</SidePanelItem>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
import { ref, onMounted, onUnmounted, nextTick, watch, computed } from 'vue';
import * as echarts from 'echarts';
import type { ECharts } from 'echarts';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import { yearGetYearFpStatistics } from '@/api/gyss';
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
import type { ColumnsType } from 'ant-design-vue/es/table/Table';
// API 数据类型定义
interface FpFtpStatisticsVo {
@ -88,7 +133,8 @@ const currentYear = ref<string>(''); // 当前选中的年份
// 图表相关
interface ChartDataItem {
title: string;
data: Array<{ name: string; value: number }>;
baseid?: string; // 流域ID（用于标识该图表所属的流域）
data: Array<{ name: string; value: number; baseId?: string }>; // 扩展数据项，支持存储流域ID
}
// 原始图表数据（多组数据用于跑马灯）
@ -103,6 +149,52 @@ const currentIndex = ref(1); // 从1开始，跳过克隆的首项
// 定时器引用
let timer: any = null;
// 弹框相关状态
const modalVisible = ref(false);
const modalTitle = ref('');
const modalData = ref<{
year: string;
basinName: string;
baseid?: string; // 添加流域ID
totalCount: number;
fishTypes: number;
fishList: Array<{
name: string;
value: number;
percentage: string;
}>;
}>({
year: '',
basinName: '',
baseid: '',
totalCount: 0,
fishTypes: 0,
fishList: []
});
// 鱼类列表表格列定义
const fishColumns: ColumnsType = [
{
title: '鱼类名称',
dataIndex: 'name',
key: 'name',
width: 150
},
{
title: '数量',
dataIndex: 'value',
key: 'value',
width: 120,
customRender: ({ text }: any) => `${text} ${getUnit()}`
},
{
title: '占比',
dataIndex: 'percentage',
key: 'percentage',
width: 100
}
];
/**
* 停止自动轮播
*/
@ -216,6 +308,12 @@ const initChart = (index: number) => {
const chartInstance = echarts.init(chartRef);
chartInstances.value[index] = chartInstance;
// 添加点击事件监听
chartInstance.on('click', (params: any) => {
handleChartClick(renderChartData.value[index], index, params);
});
updateChart(index);
};
@ -443,6 +541,7 @@ onUnmounted(() => {
const buildSingleBasinChartData = (basin: BasinData, year: string): ChartDataItem => {
return {
title: `${basin.baseName}`,
baseid: basin.baseId, // 保存流域ID
data: basin.fpFtpStatitcsVos.map((fish: FpFtpStatisticsVo) => ({
name: fish.fishName,
value: fish.fcnt
@ -461,12 +560,14 @@ const buildAllBasinsChartData = (apiData: BasinData[], year: string): ChartDataI
.filter(basin => basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0)
.map(basin => ({
name: basin.baseName,
value: basin.fpCount
value: basin.fpCount,
baseId: basin.baseId // 添加流域ID，用于点击事件传参
}));
if (basinComparisonData.length > 0) {
charts.push({
title: `总量`,
baseid: 'all', // 标记为总量图表
data: basinComparisonData
});
}
@ -647,6 +748,57 @@ const handlePanelChange1 = (data: any) => {
}
};
/**
* 处理图表点击事件
* @param item 图表数据项
* @param index 图表索引
* @param params ECharts 点击事件参数（可选）
*/
const handleChartClick = (item: ChartDataItem, index: number, params?: any) => {
// 计算总数量和百分比
const totalCount = getTotalAmount(item.data);
const fishList = item.data.map(fish => ({
name: fish.name,
value: fish.value,
percentage: totalCount > 0 ? ((fish.value / totalCount) * 100).toFixed(2) : '0.00'
}));
// 确定流域ID
let clickedBaseId: string | undefined;
if (params && params.data && params.data.baseId) {
// 情况1：总量对比图，点击了某个流域的数据项
clickedBaseId = params.data.baseId;
} else if (item.baseid && item.baseid !== 'all') {
// 情况2：单一流域图，使用图表整体的 baseid
clickedBaseId = item.baseid;
} else {
// 情况3：总量图表但未获取到具体数据项的 baseId（理论上不应该发生）
clickedBaseId = item.baseid;
}
// 设置弹框数据
modalTitle.value = `${item.title} - 详情`;
modalData.value = {
year: currentYear.value || '-',
basinName: params?.name || item.title, // 优先使用被点击的数据项名称
baseid: clickedBaseId, // 保存正确的流域ID
totalCount: totalCount,
fishTypes: item.data.length,
fishList: fishList
};
// 打开弹框
modalVisible.value = true;
};
/**
* 关闭弹框
*/
const handleModalClose = () => {
modalVisible.value = false;
};
watch(
() => JidiSelectEventStore.selectedItem,
(newVal) => {
@ -661,6 +813,7 @@ watch(
},
{ deep: true, immediate: true }
);
</script>
<style lang="scss" scoped>
@ -731,4 +884,16 @@ watch(
align-items: center;
justify-content: center;
}
.modal-content {
.ant-descriptions {
margin-bottom: 16px;
}
.ant-divider {
margin: 16px 0;
font-size: 14px;
color: #333;
}
}
</style>