grgw_vue_xz_2025/src/views/staticList/XzGlfsllList.vue

<template>
<div style="background-color: #fff;padding:14px;height: 100%;">
  <a-row :span="24" style="margin-top:10px;">
    <a-col :span="4" style="padding-left: 30px;">
      <a-select ref="select"
                placeholder="选择锅炉房"
                v-model:value="queryParam.sourceId"
                style="width: 155px;"
                @focus="focus"
                @change="handleChange">
        <a-select-option :value="item.sourceId" v-for="item in heatsource" :key="item.id">{{item.sourceName}}</a-select-option>
      </a-select>
    </a-col>
    <a-col :span="4" hidden>
      <a-date-picker v-model:value="queryParam.startDate" value-format="YYYY-MM"  picker="month" placeholder="请选择时间" @change="handleChange" />
    </a-col>
    <a-col :span="24" >
      <div ref="cityChartRef" style="width: 100%; height: 600px;"></div>
    </a-col>
  </a-row>
</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, nextTick, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { cqglfgswd,getStaticNowList } from '/@/api/dashboard/api';
import { heatsourcelist } from "@/views/base/simconfig/Simconfig.api";
import dayjs from 'dayjs';
import { useUserStore } from '/@/store/modules/user';
const { userInfo } = useUserStore();

/* ---- dom refs ---- */
const cityChartRef = ref<HTMLElement | null>(null);
/* ---- echarts instances & options ---- */
let cityChart: echarts.ECharts | null = null;
let cityOption: any = null;
const queryParam = ref<any>({sourceId: userInfo.sourceId});

/* ---- 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);
  });
}

const heatsource = ref();
async function getHeatsource(){
  heatsource.value = await heatsourcelist({sourceId: userInfo.sourceId});
}

async function handleChange(){
  loadData();
}
function splitByRegion(data: any[]) {
  // const city = data.filter(d => String(d.regionType).includes('乡镇'));
  return { city: sortByTime(data) };
}
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[]) {
  const { city } = splitByRegion(records);

  const cityX = buildXAxis(city, 'datatime');
  const citySW = city.map((r: any) => safeNum(r.view037));
  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,formatter: (val: string) => val.replace(' ', '\n') } },
    yAxis: { type: 'value', name: 'm³/h' },
    series: [
      { name: '水流量', type: 'line', data: citySW, 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() {
  console.log("🚀 ~ loadData ~ queryParam.value:", queryParam.value)
  queryParam.value.startTime = dayjs(queryParam.value.startDate).format('YYMM');
  try {
    // 1. 获取参数
    // 2. 获取图表数据
    const r = await getStaticNowList(queryParam.value);
    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( async () => {
  await getHeatsource()
  var list = heatsource.value
  queryParam.value.sourceId = list[0].sourceId
  queryParam.value.startDate =  dayjs().format('YYYY-MM');
  loadData();
});
</script>

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