WholeProcessPlatform/frontend/src/modules/yanchengshuiwenChangeMod/index.vue

<!-- SidePanelItem.vue -->
<template>
  <SidePanelItem
    title="沿程水温变化"
    :prompt="prompts"
    :select="select"
    :datetimePicker="datetimePicker"
  >
    <div ref="chartRef" class="chart-container"></div>
  </SidePanelItem>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import type { ECharts } from "echarts";
import SidePanelItem from "@/components/SidePanelItem/index.vue";
import { getKendoListCust } from "@/api/sw";

// 定义组件名（便于调试和递归）
defineOptions({
  name: "yanchengshuiwenChangeMod",
});
// 选择器配置
const select = ref({
  show: true,
  value: undefined,
  options: [],
  picker: undefined,
  format: undefined,
});

// 日期选择器配置
const datetimePicker = ref({
  show: true,
  value: "2026-05-15 15",
  format: "YYYY-MM-DD HH",
  picker: "date" as const,
  options: [],
});
const prompts = ref({
  show: true,
  value: "注:最新数据时间为2026-04-08 23",
});

const chartRef = ref<HTMLElement | null>(null);
let chartInstance: ECharts | null = null;

// 静态数据 - 站点名称
const stationNames = ref([]);

// 静态数据 - 水温值 (°C)，班多无数据设为 null
const waterTemperatures = ref([]);

// 静态时间数据
const currentTime = "2026-04-08 23";

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;

  chartInstance = echarts.init(chartRef.value);

  const option = {
    title: {
      text: "水温(°C)",
      left: 5,
      top: 0,
      textStyle: {
        color: "#000000",
        fontSize: 12,
        fontWeight: "normal",
      },
    },
    tooltip: {
      trigger: "axis",
      formatter: (params: any) => {
        if (params && params.length > 0) {
          const data = params[0];
          // 过滤掉 null 值的数据点
          if (data.value !== null && data.value !== undefined) {
            return `${currentTime}<br/>${data.name}：${data.value}°C`;
          }
        }
        return "";
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "15%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: stationNames.value,
      boundaryGap: true,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#8f8f8f",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#333",
        fontSize: 12,
        margin: 8,
        interval: 0,
        formatter: (value: string, index: number) => {
          // 偶数索引（0, 2, 4, 6）的标签在上方
          // 奇数索引（1, 3, 5）的标签在下方
          // 通过添加空行实现上下错位
          if (index % 2 === 0) {
            return `${value}\n `; // 上方标签：文字 + 换行 + 空格占位
          } else {
            return ` \n${value}`; // 下方标签：空格占位 + 换行 + 文字
          }
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#e0e0e0",
          type: "solid",
        },
      },
    },
    yAxis: {
      type: "value",
      min: 0,
      // max: 10,
      interval: 2,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#8f8f8f",
        },
      },
      axisTick: {
        show: true,
        length: 3,
        lineStyle: {
          color: "#8f8f8f",
        },
      },
      axisLabel: {
        color: "#333",
        fontSize: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#e0e0e0",
          type: "solid",
        },
      },
    },
    series: [
      {
        name: "水温",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 6,
        lineStyle: {
          color: "#6ca4f7",
          width: 2,
        },
        itemStyle: {
          color: "#6ca4f7",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(108, 164, 247, 0.3)",
            },
            {
              offset: 1,
              color: "rgba(108, 164, 247, 0.05)",
            },
          ]),
        },
        data: waterTemperatures.value,
      },
    ],
  };

  chartInstance.setOption(option);
};

// 处理窗口大小变化
const handleResize = () => {
  chartInstance?.resize();
};

const init = async () => {
  const params = {
    filter: {
      logic: "and",
      filters: [
        { field: "rvcd", operator: "eq", dataType: "string", value: "SJLY1U" },
        { field: "tm", operator: "gte", dataType: "date", value: "2026-04-17 00:00:00" },
        { field: "tm", operator: "lte", dataType: "date", value: "2026-05-17 23:00:00" },
      ],
    },
    sort: [{ field: "sort", dir: "asc" }],
  };
  let res = await getKendoListCust(params);
  stationNames.value = res.data.data
    .filter((item: any) => item.sttp == "1")
    .map((item: any) => item.stnm);
  console.log(stationNames.value);

  waterTemperatures.value = res.data.data
    .filter((item: any) => item.sttp == "2")
    .map((item: any) => item.temperature);
  // waterTemperatures.value = res.data.data.map((item: any) => item.temperature);
  console.log(waterTemperatures.value);

  // 数据获取完成后，初始化或更新图表
  setTimeout(() => {
    if (!chartInstance) {
      initChart();
    } else {
      // 如果图表已存在，只更新数据
      chartInstance.setOption({
        xAxis: {
          data: stationNames.value,
        },
        series: [
          {
            data: waterTemperatures.value,
          },
        ],
      });
    }
    // 强制重绘，确保尺寸正确
    setTimeout(() => {
      chartInstance?.resize();
    }, 100);
  }, 50);
};

// 页面加载时执行的逻辑
onMounted(() => {
  // 延迟初始化，确保 DOM 渲染完成
  init();

  window.addEventListener("resize", handleResize);
});

// 组件卸载前清理
onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);
  chartInstance?.dispose();
});
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 252px;
}
</style>