过鱼设施的接口对接
This commit is contained in:
王兴凯
commit
ed29837df1
@ -7,7 +7,7 @@ VITE_APP_TITLE = '水电水利建设项目全过程环境管理信息平台'
|
||||
VITE_APP_PORT = 3000
|
||||
VITE_APP_BASE_API = '/dev-api'
|
||||
# 本地环境
|
||||
VITE_APP_BASE_URL = 'http://localhost:8093'
|
||||
VITE_APP_BASE_URL = 'http://10.84.121.199:8093'
|
||||
# 测试环境
|
||||
# VITE_APP_BASE_URL = 'http://172.16.21.142:8093'
|
||||
# VITE_APP_BASE_URL = 'http://172.16.21.142:8096'
|
||||
@ -15,7 +15,7 @@ VITE_APP_BASE_URL = 'http://localhost:8093'
|
||||
# VITE_APP_BASE_URL = 'http://10.84.121.21:8093'
|
||||
# VITE_APP_BASE_URL = 'http://192.168.1.162:8093'
|
||||
|
||||
# 测试环境线上
|
||||
# 测试环境线上10.84.121.122:
|
||||
VITE_APP_TEST_ONLINE_URL = 'https://211.99.26.225:12122'
|
||||
|
||||
|
||||
|
||||
@ -15,3 +15,11 @@ export function buildGetKendoListCust(data: any) {
|
||||
data
|
||||
});
|
||||
}
|
||||
//过鱼总量
|
||||
export function yearGetYearFpStatistics(data: any) {
|
||||
return request({
|
||||
url: '/api/wmp-env-server/env/fp/run/qgc/year/GetYearFpStatistics',
|
||||
method: 'get',
|
||||
params:data
|
||||
});
|
||||
}
|
||||
@ -1,23 +1,23 @@
|
||||
<!-- SidePanelItem.vue -->
|
||||
<template>
|
||||
<SidePanelItem :title="title" :datetimePicker="datetimePicker">
|
||||
<div
|
||||
class="container"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<SidePanelItem :title="title" :datetimePicker="datetimePicker" @update-values="handlePanelChange1">
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading-container">
|
||||
<a-spin tip="加载中..." />
|
||||
</div>
|
||||
|
||||
<!-- 无数据状态 -->
|
||||
<div v-else-if="!hasData" class="empty-container">
|
||||
<a-empty description="暂无数据" />
|
||||
</div>
|
||||
|
||||
<!-- 正常显示图表 -->
|
||||
<div v-else class="container" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
|
||||
<!-- 跑马灯轨道容器 -->
|
||||
<div
|
||||
class="carousel-track"
|
||||
:class="{ 'no-transition': isTransitioning }"
|
||||
:style="{ transform: `translateX(-${currentIndex * 100}%)` }"
|
||||
>
|
||||
<div class="carousel-track" :class="{ 'no-transition': isTransitioning }"
|
||||
:style="{ transform: `translateX(-${currentIndex * 100}%)` }">
|
||||
<!-- 遍历所有图表项（包含克隆项） -->
|
||||
<div
|
||||
v-for="(item, index) in renderChartData"
|
||||
:key="index"
|
||||
class="carousel-item"
|
||||
>
|
||||
<div v-for="(item, index) in renderChartData" :key="index" class="carousel-item">
|
||||
<div class="pie-chart-container">
|
||||
<!-- 图表区域 -->
|
||||
<div :ref="el => setChartRef(el, index)" class="chart"></div>
|
||||
@ -31,21 +31,44 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, nextTick, watch } 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";
|
||||
|
||||
// API 数据类型定义
|
||||
interface FpFtpStatisticsVo {
|
||||
baseId: string;
|
||||
baseName: string;
|
||||
ftp: string;
|
||||
fishName: string;
|
||||
fcnt: number;
|
||||
}
|
||||
|
||||
interface BasinData {
|
||||
fpCount: number;
|
||||
baseId: string;
|
||||
baseName: string;
|
||||
fpFtpStatitcsVos: FpFtpStatisticsVo[];
|
||||
}
|
||||
|
||||
// 定义组件名（便于调试和递归）
|
||||
defineOptions({
|
||||
name: 'GYZLLB'
|
||||
});
|
||||
|
||||
const JidiSelectEventStore = useJidiSelectEventStore();
|
||||
const baseid = ref('');
|
||||
|
||||
const props = defineProps({
|
||||
title: { // 标题
|
||||
type: String,
|
||||
default: '过鱼总量'
|
||||
},
|
||||
});
|
||||
|
||||
const datetimePicker = ref({
|
||||
show: true,
|
||||
value: `${new Date().getFullYear() - 1}`, // 上一年
|
||||
@ -54,6 +77,14 @@ const datetimePicker = ref({
|
||||
options: []
|
||||
});
|
||||
|
||||
// 状态管理
|
||||
const loading = ref<boolean>(false);
|
||||
const hasData = ref<boolean>(true);
|
||||
|
||||
// 数据缓存
|
||||
const cachedApiData = ref<BasinData[]>([]); // 缓存 API 返回的全量数据
|
||||
const currentYear = ref<string>(''); // 当前选中的年份
|
||||
|
||||
// 图表相关
|
||||
interface ChartDataItem {
|
||||
title: string;
|
||||
@ -61,45 +92,7 @@ interface ChartDataItem {
|
||||
}
|
||||
|
||||
// 原始图表数据（多组数据用于跑马灯）
|
||||
const originalChartData = ref<ChartDataItem[]>(
|
||||
[
|
||||
{
|
||||
title: '过鱼总量统计 - 2025年',
|
||||
data: [
|
||||
{ name: '草鱼', value: 1250 },
|
||||
{ name: '鲢鱼', value: 980 },
|
||||
{ name: '鳙鱼', value: 760 },
|
||||
{ name: '青鱼', value: 540 },
|
||||
{ name: '鲤鱼', value: 430 },
|
||||
{ name: '鲫鱼', value: 320 },
|
||||
{ name: '其他', value: 280 }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '过鱼总量统计 - 2024年',
|
||||
data: [
|
||||
{ name: '草鱼1', value: 1250 },
|
||||
{ name: '鲢鱼1', value: 980 },
|
||||
{ name: '鳙鱼1', value: 760 },
|
||||
{ name: '青鱼1', value: 540 },
|
||||
{ name: '鲤鱼1', value: 430 },
|
||||
{ name: '鲫鱼1', value: 320 },
|
||||
{ name: '其他1', value: 280 }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '过鱼总量统计 - 2023年',
|
||||
data: [
|
||||
{ name: '草鱼2', value: 1250 },
|
||||
{ name: '鲢鱼2', value: 980 },
|
||||
{ name: '鳙鱼2', value: 760 },
|
||||
{ name: '青鱼2', value: 540 },
|
||||
{ name: '鲤鱼2', value: 430 },
|
||||
{ name: '鲫鱼2', value: 320 },
|
||||
{ name: '其他2', value: 280 }
|
||||
]
|
||||
}
|
||||
]);
|
||||
const originalChartData = ref<ChartDataItem[]>([]);
|
||||
|
||||
// 克隆首尾项后的渲染数组（用于无缝循环）
|
||||
const renderChartData = ref<ChartDataItem[]>([]);
|
||||
@ -110,6 +103,16 @@ const currentIndex = ref(1); // 从1开始，跳过克隆的首项
|
||||
// 定时器引用
|
||||
let timer: any = null;
|
||||
|
||||
/**
|
||||
* 停止自动轮播
|
||||
*/
|
||||
const stopAutoPlay = () => {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
timer = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 鼠标悬停状态
|
||||
const isHovering = ref(false);
|
||||
|
||||
@ -163,18 +166,18 @@ const generateRandomColor = (names: string[]): string[] => {
|
||||
const hue2rgb = (p: number, q: number, t: number) => {
|
||||
if (t < 0) t += 1;
|
||||
if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
if (t < 1 / 6) return p + (q - p) * 6 * t;
|
||||
if (t < 1 / 2) return q;
|
||||
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
|
||||
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
const p = 2 * l - q;
|
||||
|
||||
r = hue2rgb(p, q, h + 1/3);
|
||||
r = hue2rgb(p, q, h + 1 / 3);
|
||||
g = hue2rgb(p, q, h);
|
||||
b = hue2rgb(p, q, h - 1/3);
|
||||
b = hue2rgb(p, q, h - 1 / 3);
|
||||
}
|
||||
|
||||
const toHex = (x: number) => {
|
||||
@ -243,7 +246,7 @@ const updateChart = (index: number) => {
|
||||
{
|
||||
text: `${totalAmount}`,
|
||||
subtext: `总量(${unit})`,
|
||||
left: '34%',
|
||||
left: '29%',
|
||||
top: '45%',
|
||||
textAlign: 'center',
|
||||
textVerticalAlign: 'middle',
|
||||
@ -272,7 +275,7 @@ const updateChart = (index: number) => {
|
||||
pageIconInactiveColor: '#ccc',
|
||||
pageIconSize: 12,
|
||||
pageFormatter: '{current}/{total}',
|
||||
formatter: function(name: string) {
|
||||
formatter: function (name: string) {
|
||||
const found = chartData.data.find(item => item.name === name);
|
||||
const value = found ? found.value : '-';
|
||||
const maxLength = 7;
|
||||
@ -280,7 +283,7 @@ const updateChart = (index: number) => {
|
||||
return `${truncatedName} ${value}${unit}`;
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 13,
|
||||
fontSize: 12,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
@ -288,7 +291,7 @@ const updateChart = (index: number) => {
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
center: ['35%', '50%'],
|
||||
center: ['30%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 4,
|
||||
@ -433,6 +436,231 @@ onUnmounted(() => {
|
||||
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
/**
|
||||
* 构建单一流域的图表数据
|
||||
*/
|
||||
const buildSingleBasinChartData = (basin: BasinData, year: string): ChartDataItem => {
|
||||
return {
|
||||
title: `${basin.baseName}`,
|
||||
data: basin.fpFtpStatitcsVos.map((fish: FpFtpStatisticsVo) => ({
|
||||
name: fish.fishName,
|
||||
value: fish.fcnt
|
||||
}))
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 构建全部流域的图表数据（包含流域对比图和各流域鱼类分布图）
|
||||
*/
|
||||
const buildAllBasinsChartData = (apiData: BasinData[], year: string): ChartDataItem[] => {
|
||||
const charts: ChartDataItem[] = [];
|
||||
|
||||
// 1️⃣ 第一张：各流域总量对比图（使用 fpCount）
|
||||
const basinComparisonData = apiData
|
||||
.filter(basin => basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0)
|
||||
.map(basin => ({
|
||||
name: basin.baseName,
|
||||
value: basin.fpCount
|
||||
}));
|
||||
|
||||
if (basinComparisonData.length > 0) {
|
||||
charts.push({
|
||||
title: `总量`,
|
||||
data: basinComparisonData
|
||||
});
|
||||
}
|
||||
|
||||
// 2️⃣ 后续：每个流域的鱼类分布图（使用 fcnt）
|
||||
apiData.forEach(basin => {
|
||||
if (basin.fpFtpStatitcsVos && basin.fpFtpStatitcsVos.length > 0) {
|
||||
charts.push(buildSingleBasinChartData(basin, year));
|
||||
}
|
||||
});
|
||||
|
||||
return charts;
|
||||
};
|
||||
|
||||
/**
|
||||
* 重新构建图表实例（用于完全重建）
|
||||
*/
|
||||
const rebuildCharts = async () => {
|
||||
// 销毁旧图表实例
|
||||
chartInstances.value.forEach(instance => {
|
||||
if (instance) {
|
||||
instance.dispose();
|
||||
}
|
||||
});
|
||||
chartInstances.value = [];
|
||||
|
||||
// 重新初始化渲染数据
|
||||
initRenderData();
|
||||
|
||||
// 等待 DOM 更新
|
||||
await nextTick();
|
||||
|
||||
// 重新初始化所有图表
|
||||
setTimeout(() => {
|
||||
renderChartData.value.forEach((_, index) => {
|
||||
initChart(index);
|
||||
});
|
||||
}, 100);
|
||||
};
|
||||
|
||||
/**
|
||||
* 控制跑马灯的启停
|
||||
*/
|
||||
const controlCarousel = () => {
|
||||
// 判断是否需要停止跑马灯
|
||||
const shouldStop = baseid.value !== 'all' || originalChartData.value.length <= 1;
|
||||
|
||||
if (shouldStop) {
|
||||
stopAutoPlay(); // 停止轮播，但不重置 currentIndex
|
||||
} else {
|
||||
startAutoPlay(); // 启动轮播
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据当前 baseid 更新图表显示（不请求 API）
|
||||
*/
|
||||
const updateChartByBaseid = () => {
|
||||
if (!cachedApiData.value.length) {
|
||||
hasData.value = false;
|
||||
originalChartData.value = [];
|
||||
renderChartData.value = []; // 清空渲染数据
|
||||
stopAutoPlay(); // 停止轮播
|
||||
return;
|
||||
}
|
||||
|
||||
if (baseid.value === 'all') {
|
||||
// === 全部流域模式 ===
|
||||
originalChartData.value = buildAllBasinsChartData(cachedApiData.value, currentYear.value);
|
||||
} else {
|
||||
// === 单一流域模式 ===
|
||||
const targetBasin = cachedApiData.value.find(item => item.baseId === baseid.value);
|
||||
|
||||
if (!targetBasin || !targetBasin.fpFtpStatitcsVos || targetBasin.fpFtpStatitcsVos.length === 0) {
|
||||
hasData.value = false;
|
||||
originalChartData.value = [];
|
||||
renderChartData.value = []; // 清空渲染数据
|
||||
stopAutoPlay(); // 停止轮播
|
||||
return;
|
||||
}
|
||||
|
||||
originalChartData.value = [buildSingleBasinChartData(targetBasin, currentYear.value)];
|
||||
}
|
||||
|
||||
// 先构建渲染数据
|
||||
initRenderData();
|
||||
|
||||
// 再设置为有数据状态
|
||||
hasData.value = true;
|
||||
|
||||
// 等待 DOM 更新后初始化图表
|
||||
nextTick(() => {
|
||||
// 销毁旧图表实例
|
||||
chartInstances.value.forEach(instance => {
|
||||
if (instance) {
|
||||
instance.dispose();
|
||||
}
|
||||
});
|
||||
chartInstances.value = new Array(renderChartData.value.length).fill(null);
|
||||
chartRefs.value = new Array(renderChartData.value.length).fill(null);
|
||||
|
||||
setTimeout(() => {
|
||||
renderChartData.value.forEach((_, index) => {
|
||||
initChart(index);
|
||||
});
|
||||
}, 100);
|
||||
});
|
||||
|
||||
controlCarousel(); // 控制跑马灯启停
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取并处理图表数据
|
||||
*/
|
||||
const getechartsdata = async (yearOne: string) => {
|
||||
if (!baseid.value) {
|
||||
hasData.value = false;
|
||||
originalChartData.value = [];
|
||||
renderChartData.value = [];
|
||||
stopAutoPlay();
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果年份没变，且有缓存数据，直接使用缓存
|
||||
if (yearOne === currentYear.value && cachedApiData.value.length > 0) {
|
||||
updateChartByBaseid();
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const params = { year: yearOne };
|
||||
const res = await yearGetYearFpStatistics(params);
|
||||
// axios 返回的结构：res.data 才是真正的业务数据
|
||||
const responseData = res.data;
|
||||
if (!responseData || responseData.length === 0) {
|
||||
console.warn('无有效数据');
|
||||
hasData.value = false;
|
||||
originalChartData.value = [];
|
||||
renderChartData.value = [];
|
||||
cachedApiData.value = [];
|
||||
currentYear.value = '';
|
||||
stopAutoPlay();
|
||||
return;
|
||||
}
|
||||
// debugger
|
||||
// 缓存全量数据
|
||||
cachedApiData.value = responseData;
|
||||
currentYear.value = yearOne;
|
||||
// 根据 baseid 更新显示
|
||||
updateChartByBaseid();
|
||||
|
||||
} catch (error) {
|
||||
console.error('获取过鱼统计数据失败:', error);
|
||||
hasData.value = false;
|
||||
originalChartData.value = [];
|
||||
renderChartData.value = [];
|
||||
cachedApiData.value = [];
|
||||
currentYear.value = '';
|
||||
stopAutoPlay();
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handlePanelChange1 = (data: any) => {
|
||||
if (data.datetime) {
|
||||
getechartsdata(data.datetime); // 年份变化，请求 API
|
||||
} else {
|
||||
// 置空图表数据，并显示暂无数据
|
||||
hasData.value = false;
|
||||
originalChartData.value = [];
|
||||
renderChartData.value = []; // 清空渲染数据
|
||||
cachedApiData.value = []; // 清空缓存
|
||||
currentYear.value = '';
|
||||
stopAutoPlay(); // 停止轮播
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => JidiSelectEventStore.selectedItem,
|
||||
(newVal) => {
|
||||
if (newVal && newVal.wbsCode) {
|
||||
baseid.value = newVal.wbsCode;
|
||||
|
||||
// 切换流域时，不请求 API，只从缓存中筛选更新显示
|
||||
if (cachedApiData.value.length > 0) {
|
||||
updateChartByBaseid();
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -485,4 +713,22 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 加载状态样式
|
||||
.loading-container {
|
||||
width: 100%;
|
||||
height: 290px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// 空状态样式
|
||||
.empty-container {
|
||||
width: 100%;
|
||||
height: 290px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -81,8 +81,8 @@ const guoyuStatus = ref<any>([]);
|
||||
|
||||
const baseColumnsConfig: ColumnConfig[] = [
|
||||
{
|
||||
dataIndex: 'hbrvnm',
|
||||
key: 'hbrvnm',
|
||||
dataIndex: 'rvnm',
|
||||
key: 'rvnm',
|
||||
title: '流域',
|
||||
width: 120,
|
||||
fixed: 'left'
|
||||
|
||||
@ -256,8 +256,8 @@ const guoyuStatus = ref<any>([]);
|
||||
// --- 基础配置 ---
|
||||
const baseColumnsConfig: ColumnConfig[] = [
|
||||
{
|
||||
dataIndex: 'hbrvnm',
|
||||
key: 'hbrvnm',
|
||||
dataIndex: 'rvnm',
|
||||
key: 'rvnm',
|
||||
title: '流域',
|
||||
width: 120,
|
||||
fixed: 'left'
|
||||
|
||||
@ -258,8 +258,8 @@ import PreviewMedia from '@/components/previewMedia/index.vue';
|
||||
const baseUrl = import.meta.env.VITE_APP_ATTACHMENT_URL;
|
||||
let columns = ref([
|
||||
{
|
||||
dataIndex: 'hbrvnm',
|
||||
key: 'hbrvnm',
|
||||
dataIndex: 'rvnm',
|
||||
key: 'rvnm',
|
||||
title: '流域',
|
||||
width: 120,
|
||||
fixed: 'left'
|
||||
@ -515,8 +515,8 @@ const previewListIndex = ref(0);
|
||||
// 详情表格列定义（删除状态列）
|
||||
const detailColumns = ref([
|
||||
{
|
||||
dataIndex: 'hbrvnm',
|
||||
key: 'hbrvnm',
|
||||
dataIndex: 'rvnm',
|
||||
key: 'rvnm',
|
||||
title: '流域',
|
||||
width: 120,
|
||||
fixed: 'left'
|
||||
|
||||
Loading…
Reference in New Issue
Block a user