142 lines
3.4 KiB
Vue
142 lines
3.4 KiB
Vue
|
<script lang="ts" setup>
|
|||
|
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|||
|
|
|
|||
|
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|||
|
|
import { onMounted, ref, defineExpose } from 'vue';
|
|||
|
|
import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';
|
|||
|
|
import dayjs from 'dayjs';
|
|||
|
|
import * as echarts from "echarts";
|
|||
|
|
const chartRef = ref<EchartsUIType>();
|
|||
|
|
const { renderEcharts } = useEcharts(chartRef);
|
|||
|
|
// 添加日期选择相关逻辑
|
|||
|
|
const selectedDate = ref<string>(dayjs().format('YYYY-MM'));
|
|||
|
|
// 获取当月天数
|
|||
|
|
const getDaysInMonth = (date: any) => {
|
|||
|
|
const year = parseInt(date.split('-')[0]);
|
|||
|
|
const month = parseInt(date.split('-')[1]);
|
|||
|
|
const daysInMonth = new Date(year, month, 0).getDate();
|
|||
|
|
return Array.from({ length: daysInMonth }, (_, i) => i + 1);
|
|||
|
|
};
|
|||
|
|
const getMeterRecordTrend = async (selectedDate: any) => {
|
|||
|
|
const res = await meterRecordTrend({
|
|||
|
|
day: dayjs().format('YYYY-MM-DD'),
|
|||
|
|
month: selectedDate.value,
|
|||
|
|
year: dayjs().format('YYYY'),
|
|||
|
|
meterType: 1,
|
|||
|
|
meterId: null,
|
|||
|
|
floorId: null,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 处理返回的数据
|
|||
|
|
const chartData = res.day.nowMonth.data || [];
|
|||
|
|
|
|||
|
|
// 创建一个映射，将日期和数值对应起来
|
|||
|
|
const dataMap: Record<string, string> = {};
|
|||
|
|
chartData.forEach(([day, value]: [string, string]) => {
|
|||
|
|
dataMap[day] = value;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 获取当月所有日期
|
|||
|
|
const days = getDaysInMonth(selectedDate.value);
|
|||
|
|
|
|||
|
|
// 为没有数据的日期填充0，构建完整的数据数组
|
|||
|
|
const seriesData = days.map((day) => {
|
|||
|
|
return parseFloat(dataMap[day.toString()] || '0');
|
|||
|
|
});
|
|||
|
|
renderEcharts({
|
|||
|
|
grid: {
|
|||
|
|
bottom: 125,
|
|||
|
|
containLabel: true,
|
|||
|
|
left: '2%',
|
|||
|
|
right: '8%',
|
|||
|
|
top: '8%',
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
areaStyle: {},
|
|||
|
|
data: seriesData,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#3ec6ff',
|
|||
|
|
},
|
|||
|
|
smooth: true,
|
|||
|
|
type: 'line',
|
|||
|
|
areaStyle: {
|
|||
|
|
color: new echarts.graphic.LinearGradient(
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
1, // 上→下
|
|||
|
|
[
|
|||
|
|
{ offset: 0, color: '#32B7E9' },
|
|||
|
|
{ offset: 1, color: 'rgba(50,183,233,0)' },
|
|||
|
|
],
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
tooltip: {
|
|||
|
|
axisPointer: {
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 1,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
trigger: 'axis',
|
|||
|
|
},
|
|||
|
|
// xAxis: {
|
|||
|
|
// axisTick: {
|
|||
|
|
// show: false,
|
|||
|
|
// },
|
|||
|
|
// boundaryGap: false,
|
|||
|
|
// data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
|
|||
|
|
// type: 'category',
|
|||
|
|
// },
|
|||
|
|
xAxis: {
|
|||
|
|
name: '月',
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
boundaryGap: false,
|
|||
|
|
data: days,
|
|||
|
|
splitLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
type: 'solid',
|
|||
|
|
width: 1,
|
|||
|
|
},
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
type: 'category',
|
|||
|
|
axisLabel: { color: '#fff' },
|
|||
|
|
},
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
name: 'KW.h',
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
// max: 800,
|
|||
|
|
splitArea: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
splitNumber: 4,
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: { color: '#fff' },
|
|||
|
|
splitLine: { lineStyle: { color: '#1e90ff22' } },
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
onMounted(async () => {
|
|||
|
|
getMeterRecordTrend(selectedDate);
|
|||
|
|
});
|
|||
|
|
// 暴露方法给父组件调用
|
|||
|
|
defineExpose({
|
|||
|
|
getMeterRecordTrend,
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<EchartsUI ref="chartRef" />
|
|||
|
|
</div>
|
|||
|
|
</template>
|