WholeProcessPlatform/frontend/src/views/zhiNengFenXi/yuCeYuJing/index.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>