114 lines
3.4 KiB
Vue
114 lines
3.4 KiB
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>
|