FLL
ca43557416
Some checks are pending
Gitea Actions Demo / Explore-Gitea-Actions (push) Waiting to run
337 lines
8.6 KiB
Vue
337 lines
8.6 KiB
Vue
<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';
|
||
import FloorTree from "#/views/property/electricEnergy/elctricitySituation/floor-tree.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(()=>{
|
||
//day
|
||
const chartDay = document.getElementById('day');
|
||
const myChartDay = echarts.init(chartDay);
|
||
const optionDay = {
|
||
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: ['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'
|
||
}
|
||
],
|
||
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
|
||
],
|
||
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, 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: [
|
||
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);
|
||
|
||
// 鼠标悬停时激活缩放
|
||
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>
|
||
|
||
<template>
|
||
<div class="box">
|
||
<div class="left"><FloorTree></FloorTree></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: 16px;">
|
||
<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: 16px;">
|
||
<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>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.box{
|
||
display: grid;
|
||
grid-template-columns: 1fr 3fr;
|
||
gap: 16px;
|
||
padding: 16px;
|
||
}
|
||
</style>
|