146 lines
4.7 KiB
Vue
146 lines
4.7 KiB
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>
|