环比，趋势
This commit is contained in:
parent
5fbf10b139
commit
d7f982949a
@ -1,11 +1,28 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import {onMounted} from "vue";
|
import {onMounted, ref} from "vue";
|
||||||
|
import type { Dayjs } from 'dayjs';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import { DatePicker } from 'ant-design-vue';
|
||||||
|
|
||||||
|
const currentDay = ref<Dayjs>(dayjs());
|
||||||
|
const currentMonth = ref<Dayjs>(dayjs());
|
||||||
|
const currentYear = ref<Dayjs>(dayjs());
|
||||||
|
const disabledDay = (current: Dayjs) => {
|
||||||
|
return current && current > dayjs().endOf('day');
|
||||||
|
};
|
||||||
|
const disabledMonth = (current: Dayjs) => {
|
||||||
|
return current && current > dayjs().endOf('month');
|
||||||
|
};
|
||||||
|
const disabledYear = (current: Dayjs) => {
|
||||||
|
return current && current > dayjs().endOf('year');
|
||||||
|
};
|
||||||
|
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
const chartDom = document.getElementById('main');
|
//day
|
||||||
const myChart = echarts.init(chartDom);
|
const chartDay = document.getElementById('day');
|
||||||
const option = {
|
const myChartDay = echarts.init(chartDay);
|
||||||
|
const optionDay = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis'
|
trigger: 'axis'
|
||||||
},
|
},
|
||||||
@ -24,7 +41,7 @@ onMounted(()=>{
|
|||||||
{
|
{
|
||||||
type: 'category',
|
type: 'category',
|
||||||
name:'时',
|
name:'时',
|
||||||
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09: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: [
|
||||||
@ -38,7 +55,7 @@ onMounted(()=>{
|
|||||||
name: '当日',
|
name: '当日',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: [
|
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
|
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 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: {
|
markPoint: {
|
||||||
data: [
|
data: [
|
||||||
@ -50,6 +67,146 @@ onMounted(()=>{
|
|||||||
{
|
{
|
||||||
name: '昨日',
|
name: '昨日',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
|
data: [
|
||||||
|
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 152.2, 48.7, 18.8, 6.0, 2.3, 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: [
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
xAxisIndex: 0,
|
||||||
|
zoomOnMouseWheel: true,
|
||||||
|
filterMode: 'filter',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
optionDay && myChartDay.setOption(optionDay);
|
||||||
|
|
||||||
|
//month
|
||||||
|
const chartMonth = document.getElementById('month');
|
||||||
|
const myChartMonth = echarts.init(chartMonth);
|
||||||
|
const optionMonth = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['当月', '上月']
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true,
|
||||||
|
feature: {
|
||||||
|
magicType: { show: true, type: ['line', 'bar'] },
|
||||||
|
restore: { show: true },
|
||||||
|
}
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
name:'日',
|
||||||
|
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
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, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
|
||||||
|
],
|
||||||
|
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, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
|
||||||
|
],
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ type: 'max', name: 'Max' },
|
||||||
|
{ type: 'min', name: 'Min' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
xAxisIndex: 0,
|
||||||
|
zoomOnMouseWheel: true,
|
||||||
|
filterMode: 'filter',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
optionMonth && myChartMonth.setOption(optionMonth);
|
||||||
|
|
||||||
|
//year
|
||||||
|
const chartYear = document.getElementById('year');
|
||||||
|
const myChartYear = echarts.init(chartYear);
|
||||||
|
const optionYear = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['当年', '去年']
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true,
|
||||||
|
feature: {
|
||||||
|
magicType: { show: true, type: ['line', 'bar'] },
|
||||||
|
restore: { show: true },
|
||||||
|
}
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
name:'月',
|
||||||
|
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
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: [
|
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
|
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||||
],
|
],
|
||||||
@ -60,24 +217,119 @@ onMounted(()=>{
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
xAxisIndex: 0,
|
||||||
|
zoomOnMouseWheel: true,
|
||||||
|
filterMode: 'filter',
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
option && myChart.setOption(option);
|
optionYear && myChartYear.setOption(optionYear);
|
||||||
})
|
|
||||||
|
|
||||||
|
// 鼠标悬停时激活缩放
|
||||||
|
myChartDay.on('mouseover', { seriesIndex: 0 }, () => {
|
||||||
|
myChartDay.dispatchAction({
|
||||||
|
type: 'takeGlobalCursor',
|
||||||
|
key: 'dataZoomSelect',
|
||||||
|
dataZoomSelectActive: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 鼠标离开时取消缩放
|
||||||
|
myChartDay.on('mouseout', { seriesIndex: 0 }, () => {
|
||||||
|
myChartDay.dispatchAction({
|
||||||
|
type: 'takeGlobalCursor',
|
||||||
|
key: 'dataZoomSelect',
|
||||||
|
dataZoomSelectActive: false,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 鼠标悬停时激活缩放
|
||||||
|
myChartYear.on('mouseover', { seriesIndex: 0 }, () => {
|
||||||
|
myChartYear.dispatchAction({
|
||||||
|
type: 'takeGlobalCursor',
|
||||||
|
key: 'dataZoomSelect',
|
||||||
|
dataZoomSelectActive: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 鼠标离开时取消缩放
|
||||||
|
myChartYear.on('mouseout', { seriesIndex: 0 }, () => {
|
||||||
|
myChartYear.dispatchAction({
|
||||||
|
type: 'takeGlobalCursor',
|
||||||
|
key: 'dataZoomSelect',
|
||||||
|
dataZoomSelectActive: false,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 鼠标悬停时激活缩放
|
||||||
|
myChartMonth.on('mouseover', { seriesIndex: 0 }, () => {
|
||||||
|
myChartMonth.dispatchAction({
|
||||||
|
type: 'takeGlobalCursor',
|
||||||
|
key: 'dataZoomSelect',
|
||||||
|
dataZoomSelectActive: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 鼠标离开时取消缩放
|
||||||
|
myChartMonth.on('mouseout', { seriesIndex: 0 }, () => {
|
||||||
|
myChartMonth.dispatchAction({
|
||||||
|
type: 'takeGlobalCursor',
|
||||||
|
key: 'dataZoomSelect',
|
||||||
|
dataZoomSelectActive: false,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="box">
|
||||||
<div>
|
<div class="left" style="background: red"></div>
|
||||||
<div>
|
<div class="right">
|
||||||
|
<div style="background: #fff;border-radius: 8px;padding: 10px">
|
||||||
|
<div>
|
||||||
|
<div style="display: flex;justify-content: space-between;">
|
||||||
|
<DatePicker
|
||||||
|
v-model:value="currentDay"
|
||||||
|
:disabled-date="disabledDay"
|
||||||
|
/>当日能耗总值：125.04KW.h</div>
|
||||||
|
</div>
|
||||||
|
<div id="day" style="height: 250px;width: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
<div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 10px;">
|
||||||
|
<div>
|
||||||
|
<div style="display: flex;justify-content: space-between;">
|
||||||
|
<DatePicker
|
||||||
|
v-model:value="currentMonth"
|
||||||
|
:disabled-date="disabledMonth"
|
||||||
|
picker="month"
|
||||||
|
/>当月能耗总值：125.04KW.h</div>
|
||||||
|
</div>
|
||||||
|
<div id="month" style="height: 250px;width: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
<div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 10px;">
|
||||||
|
<div>
|
||||||
|
<div style="display: flex;justify-content: space-between;">
|
||||||
|
<DatePicker
|
||||||
|
v-model:value="currentYear"
|
||||||
|
:disabled-date="disabledYear"
|
||||||
|
picker="year"
|
||||||
|
/>当年能耗总值：125.04KW.h</div>
|
||||||
|
</div>
|
||||||
|
<div id="year" style="height: 250px;width: 100%;"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="main" style="height: 400px;width: 100%"></div>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.box{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 3fr;
|
||||||
|
gap: 30px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,81 @@
|
|||||||
|
import type { FormSchemaGetter } from '#/adapter/form';
|
||||||
|
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||||
|
import {getDictOptions} from "#/utils/dict";
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
|
export const querySchema: FormSchemaGetter = () => [
|
||||||
|
{
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: {
|
||||||
|
options: getDictOptions('pro_qoq_type'),
|
||||||
|
},
|
||||||
|
fieldName: 'date',
|
||||||
|
label: '日期',
|
||||||
|
defaultValue: '0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: (formData) => {
|
||||||
|
const type: 0 | 1 | 2 | 3 = formData.date ?? 0;
|
||||||
|
const today = dayjs();
|
||||||
|
const propsMap = {
|
||||||
|
0: {
|
||||||
|
picker: 'date',
|
||||||
|
format: 'YYYY-MM-DD',
|
||||||
|
valueFormat: 'YYYY-MM-DD',
|
||||||
|
showTime: false,
|
||||||
|
defaultValue: today.format('YYYY-MM-DD'),
|
||||||
|
},
|
||||||
|
1: {
|
||||||
|
picker: 'week',
|
||||||
|
format: 'YYYY-MM-DD',
|
||||||
|
valueFormat: 'YYYY-MM-DD',
|
||||||
|
showTime: false,
|
||||||
|
defaultValue: today.startOf('week').format('YYYY-MM-DD'),
|
||||||
|
},
|
||||||
|
2: {
|
||||||
|
picker: 'month',
|
||||||
|
format: 'YYYY-MM',
|
||||||
|
valueFormat: 'YYYY-MM',
|
||||||
|
showTime: false,
|
||||||
|
defaultValue: today.format('YYYY-MM'),
|
||||||
|
},
|
||||||
|
3: {
|
||||||
|
picker: 'year',
|
||||||
|
format: 'YYYY',
|
||||||
|
valueFormat: 'YYYY',
|
||||||
|
showTime: false,
|
||||||
|
defaultValue: today.format('YYYY'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return propsMap[type];
|
||||||
|
},
|
||||||
|
fieldName: 'chioceDate',
|
||||||
|
dependencies: {
|
||||||
|
triggerFields: ['date'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const columns: VxeGridProps['columns'] = [
|
||||||
|
{
|
||||||
|
title: '能源节点',
|
||||||
|
field: 'roomNumber',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '当月用能(kw.h)',
|
||||||
|
field: 'chargeItem',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '上月用能(kw.h)',
|
||||||
|
field: 'chargeCycle',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '增加值(kw.h)',
|
||||||
|
field: 'startTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '环比(%)',
|
||||||
|
field: 'endTime',
|
||||||
|
},
|
||||||
|
];
|
||||||
@ -1,11 +1,72 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { Page, type VbenFormProps } from '@vben/common-ui';
|
||||||
|
import {
|
||||||
|
useVbenVxeGrid,
|
||||||
|
type VxeGridProps
|
||||||
|
} from '#/adapter/vxe-table';
|
||||||
|
import {
|
||||||
|
paymentReviewList,
|
||||||
|
} from '#/api/property/costManagement/paymentReview';
|
||||||
|
import { columns, querySchema } from './data';
|
||||||
|
|
||||||
|
const formOptions: VbenFormProps = {
|
||||||
|
commonConfig: {
|
||||||
|
labelWidth: 30,
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
schema: querySchema(),
|
||||||
|
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||||
|
};
|
||||||
|
|
||||||
|
const gridOptions: VxeGridProps = {
|
||||||
|
checkboxConfig: {
|
||||||
|
highlight: true,
|
||||||
|
reserve: true,
|
||||||
|
},
|
||||||
|
columns,
|
||||||
|
height: 'auto',
|
||||||
|
keepSource: true,
|
||||||
|
pagerConfig: {},
|
||||||
|
proxyConfig: {
|
||||||
|
ajax: {
|
||||||
|
query: async ({ page }, formValues = {}) => {
|
||||||
|
return await paymentReviewList({
|
||||||
|
pageNum: page.currentPage,
|
||||||
|
pageSize: page.pageSize,
|
||||||
|
...formValues,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rowConfig: {
|
||||||
|
keyField: 'id',
|
||||||
|
},
|
||||||
|
id: 'property-paymentReview-index'
|
||||||
|
};
|
||||||
|
|
||||||
|
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||||
|
formOptions,
|
||||||
|
gridOptions,
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="left" style="background: red;margin: 16px 0 16px 16px"></div>
|
||||||
|
<div class="right">
|
||||||
|
<Page :auto-content-height="true">
|
||||||
|
<BasicTable table-title="用电环比分析列表"/>
|
||||||
|
</Page>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.box{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 3fr;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
81
apps/web-antd/src/views/property/waterPower/waterQOQ/data.ts
Normal file
81
apps/web-antd/src/views/property/waterPower/waterQOQ/data.ts
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
import type { FormSchemaGetter } from '#/adapter/form';
|
||||||
|
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||||
|
import {getDictOptions} from "#/utils/dict";
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
|
export const querySchema: FormSchemaGetter = () => [
|
||||||
|
{
|
||||||
|
component: 'Select',
|
||||||
|
componentProps: {
|
||||||
|
options: getDictOptions('pro_qoq_type'),
|
||||||
|
},
|
||||||
|
fieldName: 'date',
|
||||||
|
label: '日期',
|
||||||
|
defaultValue: '0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'DatePicker',
|
||||||
|
componentProps: (formData) => {
|
||||||
|
const type: 0 | 1 | 2 | 3 = formData.date ?? 0;
|
||||||
|
const today = dayjs();
|
||||||
|
const propsMap = {
|
||||||
|
0: {
|
||||||
|
picker: 'date',
|
||||||
|
format: 'YYYY-MM-DD',
|
||||||
|
valueFormat: 'YYYY-MM-DD',
|
||||||
|
showTime: false,
|
||||||
|
defaultValue: today.format('YYYY-MM-DD'),
|
||||||
|
},
|
||||||
|
1: {
|
||||||
|
picker: 'week',
|
||||||
|
format: 'YYYY-MM-DD',
|
||||||
|
valueFormat: 'YYYY-MM-DD',
|
||||||
|
showTime: false,
|
||||||
|
defaultValue: today.startOf('week').format('YYYY-MM-DD'),
|
||||||
|
},
|
||||||
|
2: {
|
||||||
|
picker: 'month',
|
||||||
|
format: 'YYYY-MM',
|
||||||
|
valueFormat: 'YYYY-MM',
|
||||||
|
showTime: false,
|
||||||
|
defaultValue: today.format('YYYY-MM'),
|
||||||
|
},
|
||||||
|
3: {
|
||||||
|
picker: 'year',
|
||||||
|
format: 'YYYY',
|
||||||
|
valueFormat: 'YYYY',
|
||||||
|
showTime: false,
|
||||||
|
defaultValue: today.format('YYYY'),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return propsMap[type];
|
||||||
|
},
|
||||||
|
fieldName: 'chioceDate',
|
||||||
|
dependencies: {
|
||||||
|
triggerFields: ['date'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const columns: VxeGridProps['columns'] = [
|
||||||
|
{
|
||||||
|
title: '能源节点',
|
||||||
|
field: 'roomNumber',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '当月用能(t)',
|
||||||
|
field: 'chargeItem',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '上月用能(t)',
|
||||||
|
field: 'chargeCycle',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '增加值(t)',
|
||||||
|
field: 'startTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '环比(%)',
|
||||||
|
field: 'endTime',
|
||||||
|
},
|
||||||
|
];
|
||||||
@ -1,11 +1,72 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { Page, type VbenFormProps } from '@vben/common-ui';
|
||||||
|
import {
|
||||||
|
useVbenVxeGrid,
|
||||||
|
type VxeGridProps
|
||||||
|
} from '#/adapter/vxe-table';
|
||||||
|
import {
|
||||||
|
paymentReviewList,
|
||||||
|
} from '#/api/property/costManagement/paymentReview';
|
||||||
|
import { columns, querySchema } from './data';
|
||||||
|
|
||||||
|
const formOptions: VbenFormProps = {
|
||||||
|
commonConfig: {
|
||||||
|
labelWidth: 30,
|
||||||
|
componentProps: {
|
||||||
|
allowClear: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
schema: querySchema(),
|
||||||
|
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||||
|
};
|
||||||
|
|
||||||
|
const gridOptions: VxeGridProps = {
|
||||||
|
checkboxConfig: {
|
||||||
|
highlight: true,
|
||||||
|
reserve: true,
|
||||||
|
},
|
||||||
|
columns,
|
||||||
|
height: 'auto',
|
||||||
|
keepSource: true,
|
||||||
|
pagerConfig: {},
|
||||||
|
proxyConfig: {
|
||||||
|
ajax: {
|
||||||
|
query: async ({ page }, formValues = {}) => {
|
||||||
|
return await paymentReviewList({
|
||||||
|
pageNum: page.currentPage,
|
||||||
|
pageSize: page.pageSize,
|
||||||
|
...formValues,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rowConfig: {
|
||||||
|
keyField: 'id',
|
||||||
|
},
|
||||||
|
id: 'property-paymentReview-index'
|
||||||
|
};
|
||||||
|
|
||||||
|
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||||
|
formOptions,
|
||||||
|
gridOptions,
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="left" style="background: red;margin: 16px 0 16px 16px"></div>
|
||||||
|
<div class="right">
|
||||||
|
<Page :auto-content-height="true">
|
||||||
|
<BasicTable table-title="用电环比分析列表"/>
|
||||||
|
</Page>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.box{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 3fr;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,11 +1,233 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import {onMounted, ref} from "vue";
|
||||||
|
import type { Dayjs } from 'dayjs';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import { DatePicker } from 'ant-design-vue';
|
||||||
|
|
||||||
|
const currentMonth = ref<Dayjs>(dayjs());
|
||||||
|
const currentYear = ref<Dayjs>(dayjs());
|
||||||
|
const disabledMonth = (current: Dayjs) => {
|
||||||
|
return current && current > dayjs().endOf('month');
|
||||||
|
};
|
||||||
|
const disabledYear = (current: Dayjs) => {
|
||||||
|
return current && current > dayjs().endOf('year');
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(()=>{
|
||||||
|
//month
|
||||||
|
const chartMonth = document.getElementById('month');
|
||||||
|
const myChartMonth = echarts.init(chartMonth);
|
||||||
|
const optionMonth = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['当月', '上月']
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true,
|
||||||
|
feature: {
|
||||||
|
magicType: { show: true, type: ['line', 'bar'] },
|
||||||
|
restore: { show: true },
|
||||||
|
}
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
name:'日',
|
||||||
|
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name:'t'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '当月',
|
||||||
|
type: 'bar',
|
||||||
|
data: [
|
||||||
|
2.0, 4.9, 7.0, 23.2, 25.6, 0.0, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 2.0, 0.0, 7.0, 23.2, 0.0, 76.7, 135.6, 162.2, 32.6, 0.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
|
||||||
|
],
|
||||||
|
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, 0.0, 48.7, 18.8, 6.0, 2.3, 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 0.0, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
|
||||||
|
],
|
||||||
|
markPoint: {
|
||||||
|
data: [
|
||||||
|
{ type: 'max', name: 'Max' },
|
||||||
|
{ type: 'min', name: 'Min' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
}
|
||||||
|
],
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
xAxisIndex: 0,
|
||||||
|
zoomOnMouseWheel: true,
|
||||||
|
filterMode: 'filter',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
optionMonth && myChartMonth.setOption(optionMonth);
|
||||||
|
|
||||||
|
//year
|
||||||
|
const chartYear = document.getElementById('year');
|
||||||
|
const myChartYear = echarts.init(chartYear);
|
||||||
|
const optionYear = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['当年', '去年']
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
show: true,
|
||||||
|
feature: {
|
||||||
|
magicType: { show: true, type: ['line', 'bar'] },
|
||||||
|
restore: { show: true },
|
||||||
|
}
|
||||||
|
},
|
||||||
|
calculable: true,
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
name:'月',
|
||||||
|
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name:'t'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
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: [
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
xAxisIndex: 0,
|
||||||
|
zoomOnMouseWheel: true,
|
||||||
|
filterMode: 'filter',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
optionYear && myChartYear.setOption(optionYear);
|
||||||
|
|
||||||
|
// 鼠标悬停时激活缩放
|
||||||
|
myChartYear.on('mouseover', { seriesIndex: 0 }, () => {
|
||||||
|
myChartYear.dispatchAction({
|
||||||
|
type: 'takeGlobalCursor',
|
||||||
|
key: 'dataZoomSelect',
|
||||||
|
dataZoomSelectActive: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 鼠标离开时取消缩放
|
||||||
|
myChartYear.on('mouseout', { seriesIndex: 0 }, () => {
|
||||||
|
myChartYear.dispatchAction({
|
||||||
|
type: 'takeGlobalCursor',
|
||||||
|
key: 'dataZoomSelect',
|
||||||
|
dataZoomSelectActive: false,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 鼠标悬停时激活缩放
|
||||||
|
myChartMonth.on('mouseover', { seriesIndex: 0 }, () => {
|
||||||
|
myChartMonth.dispatchAction({
|
||||||
|
type: 'takeGlobalCursor',
|
||||||
|
key: 'dataZoomSelect',
|
||||||
|
dataZoomSelectActive: true,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 鼠标离开时取消缩放
|
||||||
|
myChartMonth.on('mouseout', { seriesIndex: 0 }, () => {
|
||||||
|
myChartMonth.dispatchAction({
|
||||||
|
type: 'takeGlobalCursor',
|
||||||
|
key: 'dataZoomSelect',
|
||||||
|
dataZoomSelectActive: false,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="left" style="background: red"></div>
|
||||||
|
<div class="right">
|
||||||
|
<div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 10px;">
|
||||||
|
<div>
|
||||||
|
<div style="display: flex;justify-content: space-between;">
|
||||||
|
<DatePicker
|
||||||
|
v-model:value="currentMonth"
|
||||||
|
:disabled-date="disabledMonth"
|
||||||
|
picker="month"
|
||||||
|
/>当月能耗总值：30.00t</div>
|
||||||
|
</div>
|
||||||
|
<div id="month" style="height: 250px;width: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
<div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 10px;">
|
||||||
|
<div>
|
||||||
|
<div style="display: flex;justify-content: space-between;">
|
||||||
|
<DatePicker
|
||||||
|
v-model:value="currentYear"
|
||||||
|
:disabled-date="disabledYear"
|
||||||
|
picker="year"
|
||||||
|
/>当年能耗总值：59.00t</div>
|
||||||
|
</div>
|
||||||
|
<div id="year" style="height: 250px;width: 100%;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.box{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 3fr;
|
||||||
|
gap: 30px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user