418 lines
12 KiB
Vue
418 lines
12 KiB
Vue
<template>
|
||
<div
|
||
class="yuCeYuJing-page"
|
||
style="padding: 16px; background: #f5f7fa; min-height: 100vh"
|
||
>
|
||
<!-- 顶部标签 + 筛选栏 -->
|
||
<div class="top-bar">
|
||
<a-tabs v-model:activeKey="activeTab">
|
||
<a-tab-pane key="waterTemp" tab="水温预测" />
|
||
<a-tab-pane key="verticalTemp" tab="垂向水温预测" />
|
||
<a-tab-pane key="waterQuality" tab="水质预测" />
|
||
<a-tab-pane key="algae" tab="水华预测" />
|
||
</a-tabs>
|
||
<div style="display: flex; gap: 12px; align-items: center">
|
||
<a-select v-model:value="filter1" style="width: 160px">
|
||
<a-select-option value="hydropower">水电基地</a-select-option>
|
||
</a-select>
|
||
<a-select v-model:value="filter2" style="width: 160px">
|
||
<a-select-option value="jinshajiang">金沙江干流</a-select-option>
|
||
</a-select>
|
||
<a-select v-model:value="filter3" style="width: 140px">
|
||
<a-select-option value="lianghekou">两河口</a-select-option>
|
||
</a-select>
|
||
<a-select v-model:value="filter4" style="width: 200px">
|
||
<a-select-option value="station">两河口库尾水温站</a-select-option>
|
||
</a-select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 第一行三栏 -->
|
||
<a-row :gutter="16">
|
||
<a-col :span="16">
|
||
<a-row :gutter="16">
|
||
<!-- 基本信息 -->
|
||
<a-col :span="12">
|
||
<a-card title="基本信息" :bordered="false">
|
||
<div class="info-item">
|
||
<a-row :gutter="8" class="mb-2">
|
||
<a-col :span="8">
|
||
<div>测站名称：</div>
|
||
<span>盐锅峡入库水温站点</span></a-col
|
||
>
|
||
<a-col :span="16">
|
||
<div>所属流域：</div>
|
||
<span
|
||
>长江流域-金沙江干流-雅磨江干流-雅磨江干流中游</span
|
||
></a-col
|
||
>
|
||
</a-row>
|
||
<a-row :gutter="8" class="my-2">
|
||
<a-col :span="8">
|
||
<div>所属电站：</div>
|
||
<span>两河口</span></a-col
|
||
>
|
||
<a-col :span="16">
|
||
<div>站址：</div>
|
||
<span>甘肃省临夏回族自治州永靖县</span></a-col
|
||
>
|
||
</a-row>
|
||
<a-row :gutter="8" class="my-2">
|
||
<a-col :span="8">
|
||
<div>建成日期：</div>
|
||
<span>2023-07-01</span></a-col
|
||
>
|
||
<a-col :span="8">
|
||
<div>测站类型：</div>
|
||
<span>河道水温</span></a-col
|
||
>
|
||
<a-col :span="8">
|
||
<div>监测方式：</div>
|
||
<span>自动</span></a-col
|
||
>
|
||
</a-row>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
<!-- 算法信息 -->
|
||
<a-col :span="12">
|
||
<a-card title="算法信息" :bordered="false">
|
||
<div style="min-height: 90px"></div>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :span="24" class="mt-4">
|
||
<!-- 预测结果图表区域 -->
|
||
<a-card title="预测结果" :bordered="false">
|
||
<div class="chart-container">
|
||
<div style="display: flex; gap: 12px; align-items: center">
|
||
<a-range-picker
|
||
v-model:value="dateRange"
|
||
picker="day"
|
||
format="YYYY-MM-DD"
|
||
value-format="YYYY-MM-DD"
|
||
/>
|
||
<a-tabs v-model:activeKey="activeTabTime">
|
||
<a-tab-pane key="7day" tab="未来7天"></a-tab-pane>
|
||
<a-tab-pane key="15day" tab="未来15天"></a-tab-pane>
|
||
</a-tabs>
|
||
<a-button type="primary">开始预测</a-button>
|
||
</div>
|
||
<a-button type="primary">历史预测</a-button>
|
||
</div>
|
||
<!-- echarts容器 -->
|
||
<div
|
||
ref="chartRef"
|
||
style="width: 100%; height: calc(100vh - 506px)"
|
||
></div>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</a-col>
|
||
<!-- 预测分析 -->
|
||
<a-col :span="8">
|
||
<a-card
|
||
title="预测分析"
|
||
:body-style="{
|
||
padding: '10px 24px',
|
||
height: 'calc(100vh - 260px)',
|
||
overflowY: 'auto'
|
||
}"
|
||
:bordered="false"
|
||
>
|
||
<div style="font-size: 13px; line-height: 1.7">
|
||
<h4
|
||
style="
|
||
margin-bottom: 8px;
|
||
color: #005293;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
"
|
||
>
|
||
结果分析
|
||
</h4>
|
||
<p><strong>1.技术工艺与设施设备</strong></p>
|
||
<p>
|
||
人工繁育技术瓶颈：检查是否存在珍稀特有鱼类人工驯养和繁育技术不成熟的问题。部分鱼类的繁殖条件（如性腺发育、产卵行为）可能未被完全掌握。
|
||
</p>
|
||
<p>
|
||
设施设备与工艺缺陷：检查生产设备是否老化。同时，需评估温度控制系统、供水供电方案、循环水处理工艺等关键设施是否满足要求，是否存在设计缺陷。
|
||
</p>
|
||
<p>
|
||
养殖用水与模式：核查传统流水养殖模式是否效率低下、耗水过多，评估循环水养殖系统处理工艺的针对性是否不足。
|
||
</p>
|
||
|
||
<p><strong>2.运行管理与操作规范</strong></p>
|
||
<p>
|
||
亲本数量与质量：检查亲鱼（种鱼）数量是否充足、质量是否健康。亲本不足会直接影响苗种产量。
|
||
</p>
|
||
<p>
|
||
生产过程控制：核查苗种培育、鱼病防治、野化驯养等关键环节。温度和饵料控制不当、疾病爆发或鱼苗未经过野化训练，都会严重影响成活率和放流后的适应能力。
|
||
</p>
|
||
|
||
<h4
|
||
style="
|
||
margin-bottom: 8px;
|
||
color: #005293;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
"
|
||
>
|
||
意见建议
|
||
</h4>
|
||
<p><strong>1.加强科研攻关与技术升级</strong></p>
|
||
<p>
|
||
针对繁育技术瓶颈，联动科研单位加大投入进行攻关。同时，对老化或低效的生产设备进行更新换代，例如引入更高效的循环水处理系统。
|
||
</p>
|
||
|
||
<p><strong>2.优化运行管理与操作规范</strong></p>
|
||
<p>
|
||
强化亲本培育，确保有足够数量和质量健康的种鱼。细化生产流程管理，严格控制水温、饵料、疾病防治等关键环节。建立健全监测评估体系，对放流后的鱼苗进行标记回捕、跟踪监测，用数据指导后续工作。
|
||
</p>
|
||
|
||
<p><strong>3.推动外部环境改善与流域协同</strong></p>
|
||
<p>
|
||
积极与相关部门沟通，确保生态流量的足额下泄。在更大范围内，推动流域性的统筹规划，与上下游电站协同开展生态保护。同时，科学评估并修复或改善鱼类栖息地。
|
||
</p>
|
||
</div>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||
// 使用原生echarts引入方式
|
||
import * as echarts from 'echarts';
|
||
import dayjs from 'dayjs';
|
||
|
||
const activeTab = ref('waterTemp');
|
||
const filter1 = ref('水电基地');
|
||
const filter2 = ref('金沙江干流');
|
||
const filter3 = ref('两河口');
|
||
const filter4 = ref('两河口库尾水温站');
|
||
const dateRange = ref([
|
||
dayjs().startOf('month').format('YYYY-MM-DD'),
|
||
dayjs().endOf('month').format('YYYY-MM-DD')
|
||
]);
|
||
const activeTabTime = ref('7day');
|
||
|
||
const chartRef = ref(null);
|
||
let chartInstance = null;
|
||
|
||
// 初始化图表
|
||
const initChart = () => {
|
||
chartInstance = echarts.init(chartRef.value);
|
||
const option = {
|
||
tooltip: { trigger: 'axis' },
|
||
legend: {
|
||
data: [{ name: '历史水温' }, { name: '预测水温' }]
|
||
},
|
||
grid: { left: 40, right: 30, top: 60, bottom: 40 },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: [
|
||
'05-01',
|
||
'05-02',
|
||
'05-03',
|
||
'05-04',
|
||
'05-05',
|
||
'05-06',
|
||
'05-07',
|
||
'05-08',
|
||
'05-09',
|
||
'05-10',
|
||
'05-11',
|
||
'05-12',
|
||
'05-13',
|
||
'05-14',
|
||
'05-15',
|
||
'05-16',
|
||
'05-17',
|
||
'05-18',
|
||
'05-19',
|
||
'05-20'
|
||
]
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
min: 0,
|
||
max: 20
|
||
},
|
||
series: [
|
||
{
|
||
name: '历史水温',
|
||
type: 'line',
|
||
data: [
|
||
12.3,
|
||
10,
|
||
8.8,
|
||
10,
|
||
7.2,
|
||
6,
|
||
15,
|
||
11,
|
||
16,
|
||
8.6,
|
||
18,
|
||
15,
|
||
20.2,
|
||
null,
|
||
null,
|
||
null,
|
||
null,
|
||
null,
|
||
null,
|
||
null
|
||
],
|
||
lineStyle: { color: '#4086e8' },
|
||
itemStyle: { color: '#4086e8' },
|
||
symbol: 'circle',
|
||
symbolSize: 6
|
||
},
|
||
{
|
||
name: '预测水温',
|
||
type: 'line',
|
||
data: [
|
||
null,
|
||
null,
|
||
null,
|
||
null,
|
||
null,
|
||
null,
|
||
null,
|
||
null,
|
||
null,
|
||
null,
|
||
null,
|
||
null,
|
||
null,
|
||
18.2,
|
||
17.5,
|
||
16.2,
|
||
18.5,
|
||
18.6,
|
||
11,
|
||
16.3
|
||
],
|
||
lineStyle: { color: '#4086e8', type: 'dashed' },
|
||
itemStyle: { color: '#4086e8' },
|
||
symbol: 'circle',
|
||
symbolSize: 6
|
||
}
|
||
],
|
||
markLine: {
|
||
silent: true,
|
||
data: [{ xAxis: '05-14', lineStyle: { color: 'red', type: 'dashed' } }]
|
||
}
|
||
};
|
||
chartInstance.setOption(option);
|
||
};
|
||
|
||
// 窗口缩放自适应
|
||
const handleResize = () => {
|
||
chartInstance?.resize();
|
||
};
|
||
|
||
onMounted(async () => {
|
||
await nextTick();
|
||
initChart();
|
||
window.addEventListener('resize', handleResize);
|
||
});
|
||
|
||
// 销毁实例防止内存泄漏
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener('resize', handleResize);
|
||
if (chartInstance) {
|
||
chartInstance.dispose();
|
||
}
|
||
});
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.yuCeYuJing-page {
|
||
position: relative;
|
||
pointer-events: all;
|
||
z-index: 2000;
|
||
}
|
||
.top-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
}
|
||
:deep(.ant-tabs-nav) {
|
||
height: 32px;
|
||
margin-bottom: 0;
|
||
&::before {
|
||
display: none;
|
||
}
|
||
.ant-tabs-tab {
|
||
padding: 0px 10px;
|
||
border-radius: 4px;
|
||
margin-left: 0;
|
||
}
|
||
.ant-tabs-tab-active {
|
||
background: #ffffff !important;
|
||
}
|
||
.ant-tabs-ink-bar {
|
||
display: none;
|
||
}
|
||
.ant-tabs-nav-wrap {
|
||
height: 32px;
|
||
padding: 4px 6px;
|
||
border-radius: 4px;
|
||
margin-bottom: 0;
|
||
background: #f0f2f9;
|
||
}
|
||
}
|
||
:deep(.ant-card-head) {
|
||
min-height: 44px;
|
||
}
|
||
:deep(.ant-card-head-title) {
|
||
position: relative;
|
||
padding-left: 10px;
|
||
&::after {
|
||
position: absolute;
|
||
content: '';
|
||
left: 0;
|
||
top: 6px;
|
||
width: 4px;
|
||
height: 14px;
|
||
background: #005293;
|
||
}
|
||
}
|
||
.info-item {
|
||
.ant-col {
|
||
display: flex;
|
||
div {
|
||
flex-shrink: 0;
|
||
width: 72px;
|
||
text-align: right;
|
||
font-size: 14px;
|
||
color: rgb(148, 148, 148);
|
||
}
|
||
}
|
||
span {
|
||
font-size: 14px;
|
||
color: rgb(54, 54, 54);
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
.chart-container {
|
||
position: absolute;
|
||
left: 20%;
|
||
top: 10px;
|
||
width: 80%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 16px;
|
||
padding-right: 20px;
|
||
}
|
||
</style>
|