refactor(property): 1

This commit is contained in:
2025-09-14 21:46:33 +08:00
parent ede9049bc9
commit 3a3da25128
6 changed files with 371 additions and 185 deletions

View File

@@ -27,10 +27,10 @@ const getDaysInMonth = (date: any) => {
}; };
const getMeterRecordTrend = async (selectedDate: any, meterType: any) => { const getMeterRecordTrend = async (selectedDate: any, meterType: any) => {
const res = await meterRecordTrend({ const res = await meterRecordTrend({
day: dayjs().format('YYYY-MM-DD'),
month: selectedDate.value, month: selectedDate.value,
year: dayjs().format('YYYY'),
meterType: meterType.value, meterType: meterType.value,
day: null,
year: null,
meterId: null, meterId: null,
floorId: null, floorId: null,
}); });

View File

@@ -1,10 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref, nextTick } from 'vue';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { Dayjs } from 'dayjs';
import * as echarts from 'echarts';
import { Page } from '@vben/common-ui'; import { Page } from '@vben/common-ui';
import { DatePicker } from 'ant-design-vue'; import { DatePicker } from 'ant-design-vue';
import { onMounted, onUnmounted, ref } from 'vue';
import FloorTree from '../components/floor-tree.vue'; import FloorTree from '../components/floor-tree.vue';
import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord'; import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';
@@ -21,13 +21,24 @@ const disabledYear = (current: Dayjs) => {
return current && current > dayjs().endOf('year'); return current && current > dayjs().endOf('year');
}; };
onMounted(() => {
setTimeout(() => {
initChart();
}, 300);
window.addEventListener('resize', resizeChart);
});
onUnmounted(() => {
window.removeEventListener('resize', resizeChart);
});
const chartInstances = { const chartInstances = {
day: null as echarts.ECharts | null, day: null as echarts.ECharts | null,
month: null as echarts.ECharts | null, month: null as echarts.ECharts | null,
year: null as echarts.ECharts | null, year: null as echarts.ECharts | null,
}; };
onMounted(() => { function initChart() {
//day //day
const chartDay = document.getElementById('day'); const chartDay = document.getElementById('day');
chartInstances.day = echarts.init(chartDay); chartInstances.day = echarts.init(chartDay);
@@ -36,14 +47,10 @@ onMounted(() => {
show: true, show: true,
trigger: 'axis', trigger: 'axis',
}, },
legend: {
data: ['当日', '昨日'],
},
toolbox: { toolbox: {
show: true, show: true,
feature: { feature: {
magicType: { show: true, type: ['line', 'bar'] }, magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
}, },
}, },
calculable: true, calculable: true,
@@ -51,32 +58,6 @@ onMounted(() => {
{ {
type: 'category', type: 'category',
name: '时', name: '时',
data: [
'0:00',
'1:00',
'2:00',
'3:00',
'4:00',
'5:00',
'6:00',
'7:00',
'8:00',
'9:00',
'10:00',
'11:00',
'12:00',
'13:00',
'14:00',
'15:00',
'16:00',
'17:00',
'18:00',
'19:00',
'20:00',
'21:00',
'22:00',
'23:00',
],
}, },
], ],
yAxis: [ yAxis: [
@@ -95,14 +76,10 @@ onMounted(() => {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
}, },
legend: {
data: ['当月', '上月'],
},
toolbox: { toolbox: {
show: true, show: true,
feature: { feature: {
magicType: { show: true, type: ['line', 'bar'] }, magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
}, },
}, },
calculable: true, calculable: true,
@@ -110,10 +87,6 @@ onMounted(() => {
{ {
type: 'category', type: 'category',
name: '日', name: '日',
data: [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31,
],
}, },
], ],
yAxis: [ yAxis: [
@@ -140,14 +113,10 @@ onMounted(() => {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
}, },
legend: {
data: ['当年', '去年'],
},
toolbox: { toolbox: {
show: true, show: true,
feature: { feature: {
magicType: { show: true, type: ['line', 'bar'] }, magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
}, },
}, },
calculable: true, calculable: true,
@@ -155,7 +124,6 @@ onMounted(() => {
{ {
type: 'category', type: 'category',
name: '月', name: '月',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
}, },
], ],
yAxis: [ yAxis: [
@@ -228,7 +196,13 @@ onMounted(() => {
dataZoomSelectActive: false, dataZoomSelectActive: false,
}); });
}); });
}); }
function resizeChart() {
chartInstances.day && chartInstances.day.resize();
chartInstances.month && chartInstances.month.resize();
chartInstances.year && chartInstances.year.resize();
}
const hourTotal = ref<number>(); const hourTotal = ref<number>();
const dayTotal = ref<number>(); const dayTotal = ref<number>();
@@ -253,11 +227,18 @@ async function handleSelectFloor(selectedKeys, info) {
// 更新日数据图表 // 更新日数据图表
if (chartInstances.day && trend.hour) { if (chartInstances.day && trend.hour) {
const yesterday = currentDay.value
.clone()
.subtract(1, 'day')
.format('YYYY-MM-DD');
hourTotal.value = trend.hour.today.total; hourTotal.value = trend.hour.today.total;
chartInstances.day.setOption({ chartInstances.day.setOption({
legend: {
data: [yesterday, data.day],
},
series: [ series: [
{ {
name: '昨日', name: yesterday,
type: 'bar', type: 'bar',
data: trend.hour.yesterday.data || [], data: trend.hour.yesterday.data || [],
markPoint: { markPoint: {
@@ -271,7 +252,7 @@ async function handleSelectFloor(selectedKeys, info) {
}, },
}, },
{ {
name: '当日', name: data.day,
type: 'bar', type: 'bar',
data: trend.hour.today.data || [], data: trend.hour.today.data || [],
markPoint: { markPoint: {
@@ -290,11 +271,18 @@ async function handleSelectFloor(selectedKeys, info) {
// 更新月数据图表 // 更新月数据图表
if (chartInstances.month && trend.day) { if (chartInstances.month && trend.day) {
const lastMonth = currentDay.value
.clone()
.subtract(1, 'month')
.format('YYYY-MM');
dayTotal.value = trend.day.nowMonth.total; dayTotal.value = trend.day.nowMonth.total;
chartInstances.month.setOption({ chartInstances.month.setOption({
legend: {
data: [lastMonth, data.month],
},
series: [ series: [
{ {
name: '上月', name: lastMonth,
type: 'bar', type: 'bar',
data: trend.day.lastMonth.data || [], data: trend.day.lastMonth.data || [],
markPoint: { markPoint: {
@@ -308,7 +296,7 @@ async function handleSelectFloor(selectedKeys, info) {
}, },
}, },
{ {
name: '当月', name: data.month,
type: 'bar', type: 'bar',
data: trend.day.nowMonth.data || [], data: trend.day.nowMonth.data || [],
markPoint: { markPoint: {
@@ -327,11 +315,18 @@ async function handleSelectFloor(selectedKeys, info) {
// 更新年数据图表 // 更新年数据图表
if (chartInstances.year && trend.month) { if (chartInstances.year && trend.month) {
const lastYear = currentDay.value
.clone()
.subtract(1, 'year')
.format('YYYY');
monthTotal.value = trend.month.nowYear.total; monthTotal.value = trend.month.nowYear.total;
chartInstances.year.setOption({ chartInstances.year.setOption({
legend: {
data: [lastYear, data.year],
},
series: [ series: [
{ {
name: '去年', name: lastYear,
type: 'bar', type: 'bar',
data: trend.month.lastYear.data || [], data: trend.month.lastYear.data || [],
markPoint: { markPoint: {
@@ -345,7 +340,7 @@ async function handleSelectFloor(selectedKeys, info) {
}, },
}, },
{ {
name: '当年', name: data.year,
type: 'bar', type: 'bar',
data: trend.month.nowYear.data || [], data: trend.month.nowYear.data || [],
markPoint: { markPoint: {

View File

@@ -1,13 +1,23 @@
import type { FormSchemaGetter } from '#/adapter/form'; import type { FormSchemaGetter } from '#/adapter/form'
import type { VxeGridProps } from '#/adapter/vxe-table'; import type { VxeGridProps } from '#/adapter/vxe-table'
import {getDictOptions} from "#/utils/dict";
import dayjs from 'dayjs';
export const querySchema: FormSchemaGetter = () => [ export const querySchema: FormSchemaGetter = () => [
{ {
component: 'Select', component: 'Select',
componentProps: { componentProps: {
options: getDictOptions('pro_qoq_type'), options: [
{
label: '日',
value: '0',
},
{
label: '月',
value: '1',
},
{
label: '年',
value: '2',
},
],
}, },
fieldName: 'date', fieldName: 'date',
label: '日期', label: '日期',
@@ -16,47 +26,59 @@ export const querySchema: FormSchemaGetter = () => [
{ {
component: 'DatePicker', component: 'DatePicker',
componentProps: (formData) => { componentProps: (formData) => {
const type: 0 | 1 | 2 | 3 = formData.date ?? 0; const type: 0 | 1 | 2 = formData.date ?? 0
const today = dayjs();
const propsMap = { const propsMap = {
0: { 0: {
picker: 'date', picker: 'date',
format: 'YYYY-MM-DD', format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
showTime: false, showTime: false,
defaultValue: today.format('YYYY-MM-DD'),
}, },
1: { 1: {
picker: 'week',
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
showTime: false,
defaultValue: today.startOf('week').format('YYYY-MM-DD'),
},
2: {
picker: 'month', picker: 'month',
format: 'YYYY-MM', format: 'YYYY-MM',
valueFormat: 'YYYY-MM',
showTime: false, showTime: false,
defaultValue: today.format('YYYY-MM'),
}, },
3: { 2: {
picker: 'year', picker: 'year',
format: 'YYYY', format: 'YYYY',
valueFormat: 'YYYY',
showTime: false, showTime: false,
defaultValue: today.format('YYYY'),
}, },
}; }
return propsMap[type]; return propsMap[type]
}, },
fieldName: 'chioceDate', fieldName: 'chioceDate',
dependencies: { dependencies: {
triggerFields: ['date'], triggerFields: ['date'],
}, },
}, },
]; ]
export function initColumns(type: String) {
const columns: VxeGridProps['columns'] = [
{
title: '能源节点',
field: 'roomNumber',
},
{
title: type === '0' ? '当日用能(kw.h)' : type === '1' ? '当月用能(kw.h)' : '当年用能(kw.h)',
field: 'chargeItem',
},
{
title: type === '0' ? '昨日用能(kw.h)' : type === '1' ? '上月用能(kw.h)' : '去年用能(kw.h)',
field: 'chargeCycle',
},
{
title: '增加值(kw.h)',
field: 'startTime',
},
{
title: '环比(%)',
field: 'endTime',
},
]
return columns
}
export const columns: VxeGridProps['columns'] = [ export const columns: VxeGridProps['columns'] = [
{ {
title: '能源节点', title: '能源节点',
@@ -78,4 +100,4 @@ export const columns: VxeGridProps['columns'] = [
title: '环比(%)', title: '环比(%)',
field: 'endTime', field: 'endTime',
}, },
]; ]

View File

@@ -1,14 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { Page, type VbenFormProps } from '@vben/common-ui' import dayjs from 'dayjs';
import { import { onMounted, ref } from 'vue';
useVbenVxeGrid, import { cloneDeep } from '@vben/utils';
type VxeGridProps import { message } from 'ant-design-vue';
} from '#/adapter/vxe-table' import { initColumns, querySchema } from './data';
import { import FloorTree from '../components/floor-tree.vue';
paymentReviewList, import { Page, type VbenFormProps } from '@vben/common-ui';
} from '#/api/property/costManagement/paymentReview' import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { columns, querySchema } from './data' import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';
import FloorTree from "../components/floor-tree.vue"
const formOptions: VbenFormProps = { const formOptions: VbenFormProps = {
commonConfig: { commonConfig: {
@@ -19,45 +18,111 @@ const formOptions: VbenFormProps = {
}, },
schema: querySchema(), schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4', wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
} };
const gridOptions: VxeGridProps = { const gridOptions: VxeGridProps = {
checkboxConfig: { checkboxConfig: {
highlight: true, highlight: true,
reserve: true, reserve: true,
}, },
columns,
height: 'auto', height: 'auto',
keepSource: true, keepSource: true,
pagerConfig: {}, pagerConfig: {
enabled: false,
},
proxyConfig: { proxyConfig: {
ajax: { ajax: {
query: async ({ page }, formValues = {}) => { query: async ({ page }, formValues = {}) => {
return await paymentReviewList({ initColumnsTest(formValues);
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
})
}, },
}, },
}, },
rowConfig: { rowConfig: {
keyField: 'id', keyField: 'id',
}, },
id: 'property-paymentReview-index' id: 'property-paymentReview-index',
} };
const [BasicTable, tableApi] = useVbenVxeGrid({ const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions, formOptions,
gridOptions, gridOptions,
}); });
const dateType = ref<String>(null);
const chioceDate = ref<String>('');
const idArr = ref<string[]>(['1', '2']);
const levelNode = ref<any>(null);
function initColumnsTest(form: any) {
tableApi.setGridOptions({
columns: initColumns(form.date),
});
tableApi.reload();
dateType.value = form.date;
chioceDate.value =
form.date === '0'
? form.chioceDate.format('YYYY-MM-DD')
: form.date === '1'
? form.chioceDate.format('YYYY-MM')
: form.date === '2'
? form.chioceDate.format('YYYY')
: '';
}
async function handleSelectFloor(selectedKeys, info) {
if (selectedKeys.length === 0) {
return;
}
if (!chioceDate.value) {
message.warning('请选择时间');
return;
}
let data = {
day: null,
month: null,
year: null,
meterType: 1,
meterId: null,
floorId: null,
};
if (dateType.value === '0') {
data.day = chioceDate.value;
} else if (dateType.value === '1') {
data.month = chioceDate.value;
} else if (dateType.value === '2') {
data.year = chioceDate.value;
}
if (info.node.level == 3) {
data.floorId = selectedKeys[0];
} else {
data.meterId = selectedKeys[0];
}
const res = await meterRecordTrend(data);
if (dateType.value === '0') {
res.hour.forEach(element => {
});
} else if (dateType.value === '1') {
data.month = chioceDate.value;
} else if (dateType.value === '2') {
data.year = chioceDate.value;
}
}
</script> </script>
<template> <template>
<Page :auto-content-height="true"> <Page :auto-content-height="true">
<div class="flex h-full gap-[8px]"> <div class="flex h-full gap-[8px]">
<FloorTree class="w-[260px]"></FloorTree> <FloorTree class="w-[260px]" @select="handleSelectFloor"></FloorTree>
<BasicTable class="flex-1 overflow-hidden" table-title="用电环比分析列表" /> <BasicTable
class="flex-1 overflow-hidden"
table-title="用电环比分析列表"
/>
</div> </div>
</Page> </Page>
</template> </template>

View File

@@ -1,77 +1,60 @@
<script setup lang="ts"> <script setup lang="ts">
import * as echarts from 'echarts' import dayjs from 'dayjs';
import { onMounted, ref } from "vue" import * as echarts from 'echarts';
import type { Dayjs } from 'dayjs' import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs' import { Page } from '@vben/common-ui';
import { Page } from '@vben/common-ui' import { onMounted, onUnmounted, ref } from 'vue';
import { Table, DatePicker } from 'ant-design-vue' import { Table, DatePicker, message } from 'ant-design-vue';
import { SearchOutlined } from '@ant-design/icons-vue' import FloorTree from '../components/floor-tree.vue';
import FloorTree from "../components/floor-tree.vue" import { SearchOutlined } from '@ant-design/icons-vue';
import { meterRecordTrend } from '#/api/property/energyManagement/meterRecord';
const currentYear = ref<Dayjs>(dayjs()) const currentYear = ref<Dayjs>(dayjs());
const disabledYear = (current: Dayjs) => { const disabledYear = (current: Dayjs) => {
return current && current > dayjs().endOf('year') return current && current > dayjs().endOf('year');
} };
const chartInstances = {
year: null as echarts.ECharts | null,
};
onMounted(() => { onMounted(() => {
setTimeout(() => {
initChart();
}, 300);
window.addEventListener('resize', resizeChart);
});
onUnmounted(() => {
window.removeEventListener('resize', resizeChart);
});
function initChart() {
//year //year
const chartYear = document.getElementById('year') const chartYear = document.getElementById('year');
const myChartYear = echarts.init(chartYear) chartInstances.year = echarts.init(chartYear);
const optionYear = { const optionYear = {
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis',
},
legend: {
data: ['本期', '同期']
}, },
toolbox: { toolbox: {
show: true, show: true,
feature: { feature: {
magicType: { show: true, type: ['line', 'bar'] }, magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true }, },
}
}, },
calculable: true, calculable: true,
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
name: '月', name: '月',
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'] },
}
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: 'KW.h' name: 'KW.h',
}
],
series: [
{
name: '本期',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
}, },
{
name: '同期',
type: 'bar',
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
}
], ],
dataZoom: [ dataZoom: [
{ {
@@ -81,76 +64,197 @@ onMounted(() => {
filterMode: 'filter', filterMode: 'filter',
}, },
], ],
} };
optionYear && myChartYear.setOption(optionYear) optionYear && chartInstances.year.setOption(optionYear);
// 鼠标悬停时激活缩放 // 鼠标悬停时激活缩放
myChartYear.on('mouseover', { seriesIndex: 0 }, () => { chartInstances.year.on('mouseover', { seriesIndex: 0 }, () => {
myChartYear.dispatchAction({ chartInstances.year.dispatchAction({
type: 'takeGlobalCursor', type: 'takeGlobalCursor',
key: 'dataZoomSelect', key: 'dataZoomSelect',
dataZoomSelectActive: true, dataZoomSelectActive: true,
}) });
}) });
// 鼠标离开时取消缩放 // 鼠标离开时取消缩放
myChartYear.on('mouseout', { seriesIndex: 0 }, () => { chartInstances.year.on('mouseout', { seriesIndex: 0 }, () => {
myChartYear.dispatchAction({ chartInstances.year.dispatchAction({
type: 'takeGlobalCursor', type: 'takeGlobalCursor',
key: 'dataZoomSelect', key: 'dataZoomSelect',
dataZoomSelectActive: false, dataZoomSelectActive: false,
}) });
}) });
}) }
function resizeChart() {
chartInstances.year && chartInstances.year.clear();
}
const compareData = ref<any[]>(null);
const columns = [ const columns = [
{ {
title: '本期时间', title: '本期时间',
dataIndex: 'name', dataIndex: 'month',
}, },
{ {
title: '本期能耗(kw.h)', title: '本期能耗(kw.h)',
dataIndex: 'age', dataIndex: 'now',
}, },
{ {
title: '同比能耗(kw.h)', title: '同比能耗(kw.h)',
dataIndex: 'address', dataIndex: 'last',
}, },
{ {
title: '同比(%)', title: '同比(%)',
dataIndex: 'address', dataIndex: 'percent',
}, },
] ];
const data = [...Array(32)].map((_, i) => ({ const idArr = ref<string[]>([]);
key: i, const levelNode = ref<any>(null);
name: `${i + 1}`, async function handleSelectFloor(selectedKeys, info) {
age: '--', if (selectedKeys.length === 0 && idArr.value.length === 0) {
address: `--`, message.warning('请选择楼栋或电表');
})); return;
}
if (info != null) {
// 赋值节点层级
levelNode.value = info.node.level;
}
if (selectedKeys.length > 0) {
idArr.value = selectedKeys;
}
let data = {
year: currentYear.value.format('YYYY'),
day: null,
month: null,
meterType: 1,
meterId: null,
floorId: null,
};
if (levelNode.value == 3) {
data.floorId = selectedKeys.length > 0 ? selectedKeys[0] : idArr.value[0];
} else {
data.meterId = selectedKeys.length > 0 ? selectedKeys[0] : idArr.value[0];
}
const trend = await meterRecordTrend(data);
// 更新年数据图表
if (chartInstances.year && trend.month) {
const lastYear = currentYear.value
.clone()
.subtract(1, 'year')
.format('YYYY');
chartInstances.year.setOption({
legend: {
data: [lastYear, data.year],
},
series: [
{
name: lastYear,
type: 'bar',
data: trend.month.lastYear.data || [],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' },
],
},
markLine: {
data: [{ type: 'average', name: 'Avg' }],
},
},
{
name: data.year,
type: 'bar',
data: trend.month.nowYear.data || [],
markPoint: {
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' },
],
},
markLine: {
data: [{ type: 'average', name: 'Avg' }],
},
},
],
});
}
// 同比能耗
const lastYear = trend.month.lastYear.data || [];
const nowYear = trend.month.nowYear.data || [];
let tableData = [];
nowYear.forEach((now, i) => {
if (now[0] === lastYear[i][0]) {
let percent = (
((parseFloat(now[1]) - parseFloat(lastYear[i][1])) /
parseFloat(lastYear[i][1])) *
100
).toFixed(2);
tableData.push({
key: i,
month: `${i + 1}`,
now: parseInt(now[1]) === 0 ? '--' : now[1],
last: parseInt(lastYear[i][1]) === 0 ? '--' : lastYear[i][1],
percent:
parseInt(now[1]) !== 0 && parseInt(lastYear[i][1]) !== 0
? parseFloat(percent) >= 0
? percent + '↑'
: -percent + '↓'
: '--',
});
i;
}
});
compareData.value = tableData;
}
</script> </script>
<template> <template>
<Page :auto-content-height="true"> <Page :auto-content-height="true">
<div class="flex h-full gap-[8px]"> <div class="flex h-full gap-[8px]">
<FloorTree class="w-[260px]"></FloorTree> <FloorTree class="w-[260px]" @select="handleSelectFloor"></FloorTree>
<div class="flex-1 overflow-hidden"> <div class="flex-1 overflow-hidden">
<div style="background: #fff;border-radius: 8px;padding: 10px;margin-bottom: 16px;"> <div
style="
background: #fff;
border-radius: 8px;
padding: 10px;
margin-bottom: 16px;
height: 33%;
"
>
<div> <div>
年份 年份
<DatePicker style="margin: 0 10px;" v-model:value="currentYear" :disabled-date="disabledYear" picker="year" /> <DatePicker
<a-button type="primary"> style="margin: 0 10px"
v-model:value="currentYear"
:disabled-date="disabledYear"
picker="year"
/>
<a-button type="primary" @click="handleSelectFloor([], null)">
<template #icon> <template #icon>
<SearchOutlined /> <SearchOutlined />
</template> </template>
查询 查询
</a-button> </a-button>
</div> </div>
<div id="year" style="height: 250px;width: 100%;"></div> <div id="year" style="height: 100%; width: 100%"></div>
</div> </div>
<div> <div>
<Table style="border-radius: 8px;" :columns="columns" :data-source="data" :pagination="false" <Table
:scroll="{ y: '50vh' }" /> style="border-radius: 8px"
:columns="columns"
:data-source="compareData"
:pagination="false"
/>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -20,9 +20,9 @@ const getDaysInMonth = (date: any) => {
const emit = defineEmits(['getPowerDate']); const emit = defineEmits(['getPowerDate']);
const getMeterRecordTrend = async (selectedDate: any) => { const getMeterRecordTrend = async (selectedDate: any) => {
const res = await meterRecordTrend({ const res = await meterRecordTrend({
day: dayjs().format('YYYY-MM-DD'),
month: selectedDate.value, month: selectedDate.value,
year: dayjs().format('YYYY'), day: null,
year: null,
meterType: 1, meterType: 1,
meterId: null, meterId: null,
floorId: null, floorId: null,