grgw_vue_2025/src/views/staticList/GlfyljxList.vue

<template>
<div class="container2">
  <div ref="cityChartRef" style="width: 100%; height: 600px;"></div>
</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { cqglfgswd,getStaticList } from '/@/api/dashboard/api';

/* ---- dom refs ---- */
const cityChartRef = ref<HTMLElement | null>(null);
/* ---- echarts instances & options ---- */
let cityChart: echarts.ECharts | null = null;
let cityOption: any = null;
/* ---- helpers ---- */
function safeNum(v: any) {
  if (v === null || v === undefined || v === '') return null;
  const n = Number(v);
  return Number.isNaN(n) ? null : n;
}
function sortByTime(arr: any[]) {
  return [...arr].sort((a, b) => {
    const ta = new Date(a.datatime || a.view032 || '').getTime();
    const tb = new Date(b.datatime || b.view032 || '').getTime();
    return (isNaN(ta) ? 0 : ta) - (isNaN(tb) ? 0 : tb);
  });
}

function splitByRegion(data: any[]) {
  const city = data.filter(d => String(d.regionType).includes('郊县'));
  return { city: sortByTime(city) };
}
function buildXAxis(records: any[], key = 'view028') {
  return records.map((r: any) => {
    return ((r[key] ?? '').toString().replace(/锅炉房/g, '')).trim();
  });
}

/* ---- build options（折线改为直线 smooth: false） ---- */
function prepareOptions(records: any[]) {
  console.log("🚀 ~ prepareOptions ~ records:", records)
  const { city } = splitByRegion(records);
  console.log("🚀 ~ prepareOptions ~ city:", city)

  const cityX = buildXAxis(city, 'view028');
  console.log("🚀 ~ prepareOptions ~ cityX:", cityX)
  const citySW = city.map((r: any) => safeNum(r.view007));
  const cityHW = city.map((r: any) => safeNum(r.view008));
  cityOption = {
    title: { text: '郊县锅炉房供/回水压力', left: 'center', top: 10 },
    tooltip: { trigger: 'axis' },
    legend: { top: 36, left: 'center' },
    grid: { left: '6%', right: '4%', bottom: 70, top: 70, containLabel: true },
    xAxis: { type: 'category', data: cityX, axisLabel: { rotate: 0 } },
    yAxis: { type: 'value', name: 'MPa' },
    series: [
      { name: '供水压力', type: 'line', data: citySW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } },
      { name: '回水压力', type: 'line', data: cityHW, smooth: false, showSymbol: false, lineStyle: { type: 'solid' } }
    ],
    color: ['#176AB3', '#2F9E8A'] // 更稳重的直线配色
  };
}

/* ---- lazy init & resize ---- */
let resizeAdded = false;
function ensureResize() {
  if (resizeAdded) return;
  const onResize = () => {
    cityChart?.resize();
  };
  window.addEventListener('resize', onResize);
  onUnmounted(() => window.removeEventListener('resize', onResize));
  resizeAdded = true;
}

/* ---- load data ---- */
async function loadData() {
  try {
    // 1. 获取参数
    // 2. 获取图表数据
    const r = await cqglfgswd();
    const records = r?.data ?? [];
    prepareOptions(records);

    // 3. 等 DOM 更新完
    await nextTick();
    cityChart = echarts.init(cityChartRef.value);
    cityChart?.setOption(cityOption, true);

    // 5. 窗口自适应
    ensureResize();
  } catch (err) {
    console.error('load error', err);
  }
}


onMounted(() => {
  loadData();
});
</script>

<style scoped lang="less">
.container2 {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: calc(100vh - 120px); /* 需要设置容器高度 */
  background: white;
}
</style>