feat(property): 添加电表趋势分析功能
This commit is contained in:
@@ -1,320 +1,423 @@
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts'
|
||||
import { onMounted, ref } from "vue"
|
||||
import type { Dayjs } from 'dayjs'
|
||||
import dayjs from 'dayjs'
|
||||
import { Page } from '@vben/common-ui'
|
||||
import { DatePicker } from 'ant-design-vue'
|
||||
import FloorTree from "../components/floor-tree.vue"
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, ref } from "vue";
|
||||
import type { Dayjs } from "dayjs";
|
||||
import dayjs from "dayjs";
|
||||
import { Page } from "@vben/common-ui";
|
||||
import { DatePicker } from "ant-design-vue";
|
||||
import FloorTree from "../components/floor-tree.vue";
|
||||
import { meterRecordTrend } from "#/api/property/energyManagement/meterRecord";
|
||||
|
||||
const currentDay = ref<Dayjs>(dayjs())
|
||||
const currentMonth = ref<Dayjs>(dayjs())
|
||||
const currentYear = ref<Dayjs>(dayjs())
|
||||
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')
|
||||
}
|
||||
return current && current > dayjs().endOf("day");
|
||||
};
|
||||
const disabledMonth = (current: Dayjs) => {
|
||||
return current && current > dayjs().endOf('month')
|
||||
}
|
||||
return current && current > dayjs().endOf("month");
|
||||
};
|
||||
const disabledYear = (current: Dayjs) => {
|
||||
return current && current > dayjs().endOf('year')
|
||||
}
|
||||
return current && current > dayjs().endOf("year");
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
//day
|
||||
const chartDay = document.getElementById('day')
|
||||
const myChartDay = echarts.init(chartDay)
|
||||
const chartDay = document.getElementById("day");
|
||||
const myChartDay = echarts.init(chartDay);
|
||||
const optionDay = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ['当日', '昨日']
|
||||
data: ["当日", "昨日"],
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
magicType: { show: true, type: ['line', 'bar'] },
|
||||
magicType: { show: true, type: ["line", "bar"] },
|
||||
restore: { show: true },
|
||||
}
|
||||
},
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
name: '时',
|
||||
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']
|
||||
}
|
||||
type: "category",
|
||||
name: "时",
|
||||
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: [
|
||||
{
|
||||
type: 'value',
|
||||
name: 'KW.h'
|
||||
}
|
||||
type: "value",
|
||||
name: "KW.h",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '当日',
|
||||
type: 'bar',
|
||||
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, 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: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
{ type: "max", name: "Max" },
|
||||
{ type: "min", name: "Min" },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '昨日',
|
||||
type: 'bar',
|
||||
name: "昨日",
|
||||
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
|
||||
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' }
|
||||
]
|
||||
{ type: "max", name: "Max" },
|
||||
{ type: "min", name: "Min" },
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
type: "inside",
|
||||
xAxisIndex: 0,
|
||||
zoomOnMouseWheel: true,
|
||||
filterMode: 'filter',
|
||||
filterMode: "filter",
|
||||
},
|
||||
],
|
||||
}
|
||||
optionDay && myChartDay.setOption(optionDay)
|
||||
};
|
||||
optionDay && myChartDay.setOption(optionDay);
|
||||
|
||||
//month
|
||||
const chartMonth = document.getElementById('month')
|
||||
const myChartMonth = echarts.init(chartMonth)
|
||||
const chartMonth = document.getElementById("month");
|
||||
const myChartMonth = echarts.init(chartMonth);
|
||||
const optionMonth = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ['当月', '上月']
|
||||
data: ["当月", "上月"],
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
magicType: { show: true, type: ['line', 'bar'] },
|
||||
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']
|
||||
}
|
||||
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'
|
||||
}
|
||||
type: "value",
|
||||
name: "KW.h",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '当月',
|
||||
type: 'bar',
|
||||
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
|
||||
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' }
|
||||
]
|
||||
{ type: "max", name: "Max" },
|
||||
{ type: "min", name: "Min" },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '上月',
|
||||
type: 'bar',
|
||||
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
|
||||
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' }
|
||||
]
|
||||
{ type: "max", name: "Max" },
|
||||
{ type: "min", name: "Min" },
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
type: "inside",
|
||||
xAxisIndex: 0,
|
||||
zoomOnMouseWheel: true,
|
||||
filterMode: 'filter',
|
||||
filterMode: "filter",
|
||||
},
|
||||
],
|
||||
}
|
||||
optionMonth && myChartMonth.setOption(optionMonth)
|
||||
};
|
||||
optionMonth && myChartMonth.setOption(optionMonth);
|
||||
|
||||
//year
|
||||
const chartYear = document.getElementById('year')
|
||||
const myChartYear = echarts.init(chartYear)
|
||||
const chartYear = document.getElementById("year");
|
||||
const myChartYear = echarts.init(chartYear);
|
||||
const optionYear = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ['当年', '去年']
|
||||
data: ["当年", "去年"],
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
magicType: { show: true, type: ['line', 'bar'] },
|
||||
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']
|
||||
}
|
||||
type: "category",
|
||||
name: "月",
|
||||
data: [
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: 'KW.h'
|
||||
}
|
||||
type: "value",
|
||||
name: "KW.h",
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '当年',
|
||||
type: 'bar',
|
||||
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,
|
||||
],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: 'max', name: 'Max' },
|
||||
{ type: 'min', name: 'Min' }
|
||||
]
|
||||
{ type: "max", name: "Max" },
|
||||
{ type: "min", name: "Min" },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '去年',
|
||||
type: 'bar',
|
||||
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.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' }
|
||||
]
|
||||
{ type: "max", name: "Max" },
|
||||
{ type: "min", name: "Min" },
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
type: "inside",
|
||||
xAxisIndex: 0,
|
||||
zoomOnMouseWheel: true,
|
||||
filterMode: 'filter',
|
||||
filterMode: "filter",
|
||||
},
|
||||
],
|
||||
};
|
||||
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,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function handleSelectFloor(selectedKeys, info) {
|
||||
let data = {
|
||||
day: currentDay.value.format("YYYY-MM-DD"),
|
||||
month: currentMonth.value.format("YYYY-MM"),
|
||||
year: currentYear.value.format("YYYY"),
|
||||
meterType: 1,
|
||||
};
|
||||
|
||||
if (info.node.level == 3) {
|
||||
data.floorId = selectedKeys[0];
|
||||
} else {
|
||||
data.meterId = selectedKeys[0];
|
||||
}
|
||||
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,
|
||||
})
|
||||
})
|
||||
})
|
||||
meterRecordTrend(data);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page :auto-content-height="true">
|
||||
<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 style="background: #fff;border-radius: 8px;padding: 10px;height: 33%">
|
||||
<div>
|
||||
<div style="display: flex;justify-content: space-between;">
|
||||
<DatePicker v-model:value="currentDay" :disabled-date="disabledDay" />当日能耗总值：125.04KW.h
|
||||
<DatePicker v-model:value="currentDay"
|
||||
:disabled-date="disabledDay" />当日能耗总值：125.04KW.h
|
||||
</div>
|
||||
</div>
|
||||
<div id="day" style="height: 100%;width: 100%;"></div>
|
||||
<div id="day"
|
||||
style="height: 100%;width: 100%;"></div>
|
||||
</div>
|
||||
<div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 16px;height: 33%">
|
||||
<div>
|
||||
<div style="display: flex;justify-content: space-between;">
|
||||
<DatePicker v-model:value="currentMonth" :disabled-date="disabledMonth" picker="month" />当月能耗总值：125.04KW.h
|
||||
<DatePicker v-model:value="currentMonth"
|
||||
:disabled-date="disabledMonth"
|
||||
picker="month" />当月能耗总值：125.04KW.h
|
||||
</div>
|
||||
</div>
|
||||
<div id="month" style="height: 100%;width: 100%;"></div>
|
||||
<div id="month"
|
||||
style="height: 100%;width: 100%;"></div>
|
||||
</div>
|
||||
<div style="background: #fff;border-radius: 8px;padding: 10px;margin-top: 16px;height: 33%">
|
||||
<div>
|
||||
<div style="display: flex;justify-content: space-between;">
|
||||
<DatePicker v-model:value="currentYear" :disabled-date="disabledYear" picker="year" />当年能耗总值：125.04KW.h
|
||||
<DatePicker v-model:value="currentYear"
|
||||
:disabled-date="disabledYear"
|
||||
picker="year" />当年能耗总值：125.04KW.h
|
||||
</div>
|
||||
</div>
|
||||
<div id="year" style="height: 100%;width: 100%;"></div>
|
||||
<div id="year"
|
||||
style="height: 100%;width: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user