过鱼设施，基础信息参数变化传递
This commit is contained in:
王兴凯
parent
e2b77507fd
commit
8739128085
@ -179,6 +179,30 @@ const columnsConfig = ref([
|
|||||||
type: 'fp_point',
|
type: 'fp_point',
|
||||||
columns: FPPointColumns
|
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',
|
type: 'fb_point',
|
||||||
columns: FBPointColumns
|
columns: FBPointColumns
|
||||||
|
|||||||
@ -361,27 +361,27 @@ const FPTabs: Array<any> =
|
|||||||
];
|
];
|
||||||
|
|
||||||
// // 过鱼设施在建状态
|
// // 过鱼设施在建状态
|
||||||
// const FPTabs1: Array<any> = [
|
const FPTabs1: Array<any> = [
|
||||||
// {
|
{
|
||||||
// name: '基础信息',
|
name: '基础信息',
|
||||||
// key: 'basicInfo',
|
key: 'basicInfo',
|
||||||
// type: 'basic',
|
type: 'basic',
|
||||||
// url: '/bbi/siteBipc/getSiteBasicInfo'
|
url: '/api/dec-lygk-base-server/base/msstbprpt/getStcdInfo'
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// name: '实时视频',
|
name: '实时视频',
|
||||||
// key: 'videoInfo',
|
key: 'videoInfo',
|
||||||
// type: 'video',
|
type: 'video',
|
||||||
// url: '/video/dataStcdFrame/getVideoMonitorList'
|
url: '/video/dataStcdFrame/getVideoMonitorList'
|
||||||
// },
|
},
|
||||||
// {
|
{
|
||||||
// name: '建设情况',
|
name: '建设情况',
|
||||||
// key: 'FishFacilityBuildState', //basicState
|
key: 'FishFacilityBuildState', //basicState
|
||||||
// type: 'FishFacilityBuildState', //basicState
|
type: 'FishFacilityBuildState', //basicState
|
||||||
// // url: "/env/fp/fpFacilities/getFpStcdConstructionInfo2",
|
// url: "/env/fp/fpFacilities/getFpStcdConstructionInfo2",
|
||||||
// url: '/wmp-env-server/env/fp/run/secondBuild/GetKendoListCust'
|
url: '/wmp-env-server/env/fp/run/secondBuild/GetKendoListCust'
|
||||||
// }
|
}
|
||||||
// ]
|
];
|
||||||
//鱼类增殖站 √
|
//鱼类增殖站 √
|
||||||
const FBTabs: Array<any> = [
|
const FBTabs: Array<any> = [
|
||||||
{
|
{
|
||||||
@ -675,13 +675,13 @@ const WQFBTabs: Array<any> = [
|
|||||||
key: 'WaterQuality',
|
key: 'WaterQuality',
|
||||||
type: 'WaterQuality',
|
type: 'WaterQuality',
|
||||||
default: true // 默认显示
|
default: true // 默认显示
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '实时视频',
|
|
||||||
key: 'videoInfo',
|
|
||||||
type: 'video',
|
|
||||||
url: '/video/dataStcdFrame/getVideoMonitorList'
|
|
||||||
}
|
}
|
||||||
|
// {
|
||||||
|
// name: '实时视频',
|
||||||
|
// key: 'videoInfo',
|
||||||
|
// type: 'video',
|
||||||
|
// url: '/video/dataStcdFrame/getVideoMonitorList'
|
||||||
|
// }
|
||||||
];
|
];
|
||||||
const WQTabs: Array<any> = [
|
const WQTabs: Array<any> = [
|
||||||
...WQFBTabs,
|
...WQFBTabs,
|
||||||
@ -770,7 +770,7 @@ const WTTabs1: Array<any> = [
|
|||||||
name: '监测数据',
|
name: '监测数据',
|
||||||
key: 'VerticalWaterTemperature',
|
key: 'VerticalWaterTemperature',
|
||||||
type: 'VerticalWaterTemperature',
|
type: 'VerticalWaterTemperature',
|
||||||
default: true // 默认显示
|
default: true // 默认显示
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -1277,57 +1277,67 @@ const handleTabs = (modaldata: any) => {
|
|||||||
case 'DW_4':
|
case 'DW_4':
|
||||||
case 'DW_5':
|
case 'DW_5':
|
||||||
return DWTabs;
|
return DWTabs;
|
||||||
// case 'FP': //todo，后续再删除多余代码
|
case 'FP': //todo，后续再删除多余代码
|
||||||
// case 'FP_1': //todo，后续再删除多余代码
|
case 'FP_1': //todo，后续再删除多余代码
|
||||||
// // case "FP_2": //todo，后续再删除多余代码
|
// case "FP_2": //todo，后续再删除多余代码
|
||||||
// case 'FP_3': //todo，后续再删除多余代码
|
case 'FP_3': //todo，后续再删除多余代码
|
||||||
// case 'FP_4': //todo，后续再删除多余代码
|
case 'FP_4': //todo，后续再删除多余代码
|
||||||
// // case "FP_5": //todo，后续再删除多余代码
|
// case "FP_5": //todo，后续再删除多余代码
|
||||||
// if (Session.getAppCode() === 'hbb') {
|
// // if (Session.getAppCode() === 'hbb') {
|
||||||
// // mway为2的时侯显示在线监测数据
|
// mway为2的时侯显示在线监测数据
|
||||||
// if (modaldata.bldsttCcode == '1' || modaldata.bldsttCcode == '0' || modaldata.bldstt == '1' || modaldata.bldstt == '0') {
|
if (
|
||||||
// return [
|
modaldata.bldsttCcode == '1' ||
|
||||||
// ...FPTabs1 //建设情况
|
modaldata.bldsttCcode == '0' ||
|
||||||
// ]
|
modaldata.bldstt == '1' ||
|
||||||
// } else {
|
modaldata.bldstt == '0'
|
||||||
// if (modaldata.mway != 2) {
|
) {
|
||||||
// return FPTabs.filter((item) => item.name !== '在线监测数据')
|
return [
|
||||||
// } else {
|
...FPTabs1 //建设情况
|
||||||
// return [
|
];
|
||||||
// ...FPTabs //有监测数据
|
} else {
|
||||||
// ]
|
if (modaldata.mway != 2) {
|
||||||
// }
|
return FPTabs.filter(item => item.name !== '在线监测数据');
|
||||||
// }
|
} else {
|
||||||
// } else {
|
return [
|
||||||
// if (modaldata.bldsttCcode == '1' || modaldata.bldsttCcode == '0' || modaldata.bldstt == '1' || modaldata.bldstt == '0') {
|
...FPTabs //有监测数据
|
||||||
// return [
|
];
|
||||||
// ...FPTabs1
|
}
|
||||||
// // {
|
}
|
||||||
// // name: "系统运行记录",
|
// } else {
|
||||||
// // key: "FishSystemRunState", //Normal1
|
// if (modaldata.bldsttCcode == '1' || modaldata.bldsttCcode == '0' || modaldata.bldstt == '1' || modaldata.bldstt == '0') {
|
||||||
// // type: "FishSystemRunState", //Normal
|
// return [
|
||||||
// // tabs: []
|
// ...FPTabs1
|
||||||
// // }
|
// // {
|
||||||
// ]
|
// // name: "系统运行记录",
|
||||||
// } else {
|
// // key: "FishSystemRunState", //Normal1
|
||||||
// return [
|
// // type: "FishSystemRunState", //Normal
|
||||||
// ...FPTabs
|
// // tabs: []
|
||||||
// // {
|
// // }
|
||||||
// // name: "系统运行记录",
|
// ]
|
||||||
// // key: "FishSystemRunState", //Normal1
|
// } else {
|
||||||
// // type: "FishSystemRunState", //Normal
|
// return [
|
||||||
// // tabs: []
|
// ...FPTabs
|
||||||
// // }
|
// // {
|
||||||
// ]
|
// // name: "系统运行记录",
|
||||||
// }
|
// // key: "FishSystemRunState", //Normal1
|
||||||
// }
|
// // type: "FishSystemRunState", //Normal
|
||||||
// case 'FP_2': //todo，后续再删除多余代码
|
// // tabs: []
|
||||||
// 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':
|
// case 'ZQ':
|
||||||
// return ZQTabs
|
// return ZQTabs
|
||||||
// case 'FB':
|
// case 'FB':
|
||||||
|
|||||||
@ -27,16 +27,61 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</SidePanelItem>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<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 * as echarts from 'echarts';
|
||||||
import type { ECharts } from 'echarts';
|
import type { ECharts } from 'echarts';
|
||||||
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
||||||
import { yearGetYearFpStatistics } from '@/api/gyss';
|
import { yearGetYearFpStatistics } from '@/api/gyss';
|
||||||
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
import { useJidiSelectEventStore } from "@/store/modules/jidiSelectEvent";
|
||||||
|
import type { ColumnsType } from 'ant-design-vue/es/table/Table';
|
||||||
|
|
||||||
// API 数据类型定义
|
// API 数据类型定义
|
||||||
interface FpFtpStatisticsVo {
|
interface FpFtpStatisticsVo {
|
||||||
@ -88,7 +133,8 @@ const currentYear = ref<string>(''); // 当前选中的年份
|
|||||||
// 图表相关
|
// 图表相关
|
||||||
interface ChartDataItem {
|
interface ChartDataItem {
|
||||||
title: string;
|
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;
|
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);
|
const chartInstance = echarts.init(chartRef);
|
||||||
chartInstances.value[index] = chartInstance;
|
chartInstances.value[index] = chartInstance;
|
||||||
|
|
||||||
|
// 添加点击事件监听
|
||||||
|
chartInstance.on('click', (params: any) => {
|
||||||
|
handleChartClick(renderChartData.value[index], index, params);
|
||||||
|
});
|
||||||
|
|
||||||
updateChart(index);
|
updateChart(index);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -443,6 +541,7 @@ onUnmounted(() => {
|
|||||||
const buildSingleBasinChartData = (basin: BasinData, year: string): ChartDataItem => {
|
const buildSingleBasinChartData = (basin: BasinData, year: string): ChartDataItem => {
|
||||||
return {
|
return {
|
||||||
title: `${basin.baseName}`,
|
title: `${basin.baseName}`,
|
||||||
|
baseid: basin.baseId, // 保存流域ID
|
||||||
data: basin.fpFtpStatitcsVos.map((fish: FpFtpStatisticsVo) => ({
|
data: basin.fpFtpStatitcsVos.map((fish: FpFtpStatisticsVo) => ({
|
||||||
name: fish.fishName,
|
name: fish.fishName,
|
||||||
value: fish.fcnt
|
value: fish.fcnt
|
||||||
@ -461,12 +560,14 @@ const buildAllBasinsChartData = (apiData: BasinData[], year: string): ChartDataI
|
|||||||
.filter(basin => basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0)
|
.filter(basin => basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0)
|
||||||
.map(basin => ({
|
.map(basin => ({
|
||||||
name: basin.baseName,
|
name: basin.baseName,
|
||||||
value: basin.fpCount
|
value: basin.fpCount,
|
||||||
|
baseId: basin.baseId // 添加流域ID，用于点击事件传参
|
||||||
}));
|
}));
|
||||||
|
|
||||||
if (basinComparisonData.length > 0) {
|
if (basinComparisonData.length > 0) {
|
||||||
charts.push({
|
charts.push({
|
||||||
title: `总量`,
|
title: `总量`,
|
||||||
|
baseid: 'all', // 标记为总量图表
|
||||||
data: basinComparisonData
|
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(
|
watch(
|
||||||
() => JidiSelectEventStore.selectedItem,
|
() => JidiSelectEventStore.selectedItem,
|
||||||
(newVal) => {
|
(newVal) => {
|
||||||
@ -661,6 +813,7 @@ watch(
|
|||||||
},
|
},
|
||||||
{ deep: true, immediate: true }
|
{ deep: true, immediate: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -731,4 +884,16 @@ watch(
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
.ant-descriptions {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-divider {
|
||||||
|
margin: 16px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user