<template>
|
<div class="app-container">
|
<!-- 搜索区域 -->
|
<div class="search_form">
|
<el-form :model="searchForm"
|
:inline="true">
|
<el-form-item label="统计维度:">
|
<el-radio-group v-model="statisticsType"
|
@change="handleTypeChange">
|
<el-radio-button label="day">按日统计</el-radio-button>
|
<el-radio-button label="month">按月统计</el-radio-button>
|
<el-radio-button label="year">按年统计</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="能耗用途:">
|
<el-select v-model="searchForm.energyType"
|
placeholder="全部"
|
clearable
|
style="width: 120px;"
|
@change="handleQuery">
|
<el-option label="全部"
|
value="全部" />
|
<el-option label="办公"
|
value="办公" />
|
<el-option label="生产"
|
value="生产" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="时间范围:">
|
<el-date-picker v-if="statisticsType === 'day'"
|
v-model="searchForm.dateRange"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="YYYY-MM-DD"
|
style="width: 240px;"
|
@change="handleQuery" />
|
<el-date-picker v-else-if="statisticsType === 'month'"
|
v-model="searchForm.monthRange"
|
type="monthrange"
|
range-separator="至"
|
start-placeholder="开始月份"
|
end-placeholder="结束月份"
|
value-format="YYYY-MM"
|
style="width: 240px;"
|
@change="handleQuery" />
|
<el-select v-else
|
v-model="searchForm.year"
|
placeholder="选择年份"
|
style="width: 140px;"
|
@change="handleQuery">
|
<el-option v-for="year in yearOptions"
|
:key="year"
|
:label="year + '年'"
|
:value="year" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary"
|
@click="handleQuery">查询</el-button>
|
<el-button @click="handleReset">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div>
|
<el-button type="success"
|
@click="handleExport">导出报表</el-button>
|
</div>
|
</div>
|
<!-- 统计概览卡片 -->
|
<div class="statistics-overview">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<div class="overview-card total-consumption">
|
<div class="overview-icon">
|
<el-icon>
|
<DataLine />
|
</el-icon>
|
</div>
|
<div class="overview-info">
|
<div class="overview-label">总能耗用量</div>
|
<div class="overview-value">{{ overview.totalConsumption }} <span class="unit">吨/度/m³</span></div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="overview-card total-amount">
|
<div class="overview-icon">
|
<el-icon>
|
<Money />
|
</el-icon>
|
</div>
|
<div class="overview-info">
|
<div class="overview-label">总能耗费用</div>
|
<div class="overview-value">¥{{ overview.totalAmount }}</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="overview-card avg-consumption">
|
<div class="overview-icon">
|
<el-icon>
|
<TrendCharts />
|
</el-icon>
|
</div>
|
<div class="overview-info">
|
<div class="overview-label">平均用量</div>
|
<div class="overview-value">{{ overview.avgConsumption }} <span class="unit">/{{ statisticsType === 'day' ? '日' : statisticsType === 'month' ? '月' : '年' }}</span></div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="overview-card compare-last">
|
<div class="overview-icon">
|
<el-icon>
|
<Histogram />
|
</el-icon>
|
</div>
|
<div class="overview-info">
|
<div class="overview-label">环比变化</div>
|
<div class="overview-value"
|
:class="overview.compareRate >= 0 ? 'up' : 'down'">
|
<el-icon v-if="overview.compareRate >= 0">
|
<ArrowUp />
|
</el-icon>
|
<el-icon v-else>
|
<ArrowDown />
|
</el-icon>
|
{{ Math.abs(overview.compareRate) }}%
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- 图表区域 -->
|
<div class="charts-container">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<div class="chart-card">
|
<div class="chart-title">能耗用量趋势</div>
|
<div ref="consumptionChart"
|
class="chart-content"></div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="chart-card">
|
<div class="chart-title">能耗费用趋势</div>
|
<div ref="amountChart"
|
class="chart-content"></div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20"
|
style="margin-top: 20px;">
|
<el-col :span="12">
|
<div class="chart-card">
|
<div class="chart-title">能耗类型占比</div>
|
<div ref="typeChart"
|
class="chart-content"></div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="chart-card">
|
<div class="chart-title">能耗类型费用占比</div>
|
<div ref="amountTypeChart"
|
class="chart-content"></div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<!-- 数据表格 -->
|
<div class="table-section">
|
<div class="section-title">详细数据</div>
|
<el-table :data="tableData"
|
v-loading="tableLoading"
|
border
|
stripe>
|
<el-table-column type="index"
|
label="序号"
|
width="60"
|
align="center" />
|
<el-table-column prop="timePeriod"
|
:label="timeColumnLabel"
|
align="center" />
|
<el-table-column prop="waterConsumption"
|
label="用水量(吨)"
|
align="right">
|
<template #default="scope">
|
<span class="consumption-value">{{ scope.row.waterConsumption }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="waterAmount"
|
label="水费(元)"
|
align="right">
|
<template #default="scope">
|
<span class="amount-value">{{ scope.row.waterAmount }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="electricityConsumption"
|
label="用电量(度)"
|
align="right">
|
<template #default="scope">
|
<span class="consumption-value">{{ scope.row.electricityConsumption }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="electricityAmount"
|
label="电费(元)"
|
align="right">
|
<template #default="scope">
|
<span class="amount-value">{{ scope.row.electricityAmount }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="gasConsumption"
|
label="用气量(m³)"
|
align="right">
|
<template #default="scope">
|
<span class="consumption-value">{{ scope.row.gasConsumption }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="gasAmount"
|
label="气费(元)"
|
align="right">
|
<template #default="scope">
|
<span class="amount-value">{{ scope.row.gasAmount }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="totalConsumption"
|
label="合计用量"
|
align="right">
|
<template #default="scope">
|
<span class="total-value">{{ scope.row.totalConsumption }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="totalAmount"
|
label="合计费用(元)"
|
align="right"
|
fixed="right">
|
<template #default="scope">
|
<span class="total-amount-value">¥{{ scope.row.totalAmount }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- 分页 -->
|
<div class="pagination-container">
|
<el-pagination v-model:current-page="page.current"
|
v-model:page-size="page.size"
|
:page-sizes="[10, 20, 50, 100]"
|
:total="page.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange" />
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted, computed, nextTick } from "vue";
|
import { ElMessage } from "element-plus";
|
import {
|
DataLine,
|
Money,
|
TrendCharts,
|
Histogram,
|
ArrowUp,
|
ArrowDown,
|
} from "@element-plus/icons-vue";
|
import * as echarts from "echarts";
|
import { energyConsumptionDetailStatistics } from "@/api/energyManagement/energyType";
|
|
// 统计维度：day-按日，month-按月，year-按年
|
const statisticsType = ref("day");
|
|
// 搜索表单
|
const searchForm = reactive({
|
energyType: "全部",
|
dateRange: (() => {
|
// 默认最近7天
|
const end = new Date();
|
const start = new Date();
|
start.setDate(start.getDate() - 6);
|
return [start.toISOString().split("T")[0], end.toISOString().split("T")[0]];
|
})(),
|
monthRange: (() => {
|
// 默认最近3个月
|
const end = new Date();
|
const start = new Date();
|
start.setMonth(start.getMonth() - 2);
|
return [start.toISOString().slice(0, 7), end.toISOString().slice(0, 7)];
|
})(),
|
year: new Date().getFullYear(),
|
});
|
|
// 年份选项
|
const yearOptions = computed(() => {
|
const currentYear = new Date().getFullYear();
|
const years = [];
|
for (let i = currentYear - 5; i <= currentYear; i++) {
|
years.push(i);
|
}
|
return years.reverse();
|
});
|
|
// 时间列标签
|
const timeColumnLabel = computed(() => {
|
const labels = {
|
day: "日期",
|
month: "月份",
|
year: "年份",
|
};
|
return labels[statisticsType.value];
|
});
|
|
// 统计概览
|
const overview = reactive({
|
totalConsumption: "25,680.5",
|
totalAmount: "45,280.60",
|
avgConsumption: "856.0",
|
compareRate: -5.2,
|
});
|
|
// 表格数据
|
const tableData = ref([]);
|
const tableLoading = ref(false);
|
|
// 分页
|
const page = reactive({
|
current: 1,
|
size: 10,
|
total: 0,
|
});
|
|
// 图表引用
|
const consumptionChart = ref(null);
|
const amountChart = ref(null);
|
const typeChart = ref(null);
|
const amountTypeChart = ref(null);
|
|
// 图表实例
|
let consumptionChartInstance = null;
|
let amountChartInstance = null;
|
let typeChartInstance = null;
|
let amountTypeChartInstance = null;
|
|
// 生成模拟数据
|
const generateMockData = () => {
|
const data = [];
|
const count =
|
statisticsType.value === "day"
|
? 30
|
: statisticsType.value === "month"
|
? 12
|
: 5;
|
|
for (let i = 0; i < count; i++) {
|
const waterConsumption = (Math.random() * 100 + 50).toFixed(2);
|
const waterAmount = (waterConsumption * 2.5).toFixed(2);
|
const electricityConsumption = (Math.random() * 500 + 200).toFixed(2);
|
const electricityAmount = (electricityConsumption * 0.8).toFixed(2);
|
const gasConsumption = (Math.random() * 200 + 100).toFixed(2);
|
const gasAmount = (gasConsumption * 3.0).toFixed(2);
|
|
let timePeriod;
|
if (statisticsType.value === "day") {
|
const date = new Date();
|
date.setDate(date.getDate() - i);
|
timePeriod = date.toISOString().split("T")[0];
|
} else if (statisticsType.value === "month") {
|
const date = new Date();
|
date.setMonth(date.getMonth() - i);
|
timePeriod = date.toISOString().slice(0, 7);
|
} else {
|
timePeriod = (new Date().getFullYear() - i).toString();
|
}
|
|
data.push({
|
timePeriod,
|
waterConsumption,
|
waterAmount,
|
electricityConsumption,
|
electricityAmount,
|
gasConsumption,
|
gasAmount,
|
totalConsumption: (
|
parseFloat(waterConsumption) +
|
parseFloat(electricityConsumption) +
|
parseFloat(gasConsumption)
|
).toFixed(2),
|
totalAmount: (
|
parseFloat(waterAmount) +
|
parseFloat(electricityAmount) +
|
parseFloat(gasAmount)
|
).toFixed(2),
|
});
|
}
|
return data.reverse();
|
};
|
|
// 初始化图表
|
const initCharts = () => {
|
nextTick(() => {
|
// 能耗用量趋势图
|
if (consumptionChart.value) {
|
consumptionChartInstance = echarts.init(consumptionChart.value);
|
updateConsumptionChart();
|
}
|
// 能耗费用趋势图
|
if (amountChart.value) {
|
amountChartInstance = echarts.init(amountChart.value);
|
updateAmountChart();
|
}
|
// 能耗类型占比图
|
if (typeChart.value) {
|
typeChartInstance = echarts.init(typeChart.value);
|
updateTypeChart();
|
}
|
// 能耗类型费用占比图
|
if (amountTypeChart.value) {
|
amountTypeChartInstance = echarts.init(amountTypeChart.value);
|
updateAmountTypeChart();
|
}
|
});
|
};
|
|
// 更新能耗用量趋势图
|
const updateConsumptionChart = () => {
|
const data = tableData.value;
|
const option = {
|
tooltip: {
|
trigger: "axis",
|
axisPointer: { type: "cross" },
|
},
|
legend: {
|
data: ["用水量", "用电量", "用气量"],
|
bottom: 0,
|
},
|
grid: {
|
left: "3%",
|
right: "4%",
|
bottom: "15%",
|
containLabel: true,
|
},
|
xAxis: {
|
type: "category",
|
data: data.map(item => item.timePeriod),
|
axisLabel: { rotate: statisticsType.value === "day" ? 45 : 0 },
|
},
|
yAxis: {
|
type: "value",
|
name: "用量",
|
},
|
series: [
|
{
|
name: "用水量",
|
type: "bar",
|
data: data.map(item => item.waterConsumption),
|
itemStyle: { color: "#409EFF" },
|
},
|
{
|
name: "用电量",
|
type: "bar",
|
data: data.map(item => item.electricityConsumption),
|
itemStyle: { color: "#E6A23C" },
|
},
|
{
|
name: "用气量",
|
type: "bar",
|
data: data.map(item => item.gasConsumption),
|
itemStyle: { color: "#67C23A" },
|
},
|
],
|
};
|
consumptionChartInstance.setOption(option);
|
};
|
|
// 更新能耗费用趋势图
|
const updateAmountChart = () => {
|
const data = tableData.value;
|
const option = {
|
tooltip: {
|
trigger: "axis",
|
axisPointer: { type: "cross" },
|
},
|
legend: {
|
data: ["水费", "电费", "气费"],
|
bottom: 0,
|
},
|
grid: {
|
left: "3%",
|
right: "4%",
|
bottom: "15%",
|
containLabel: true,
|
},
|
xAxis: {
|
type: "category",
|
data: data.map(item => item.timePeriod),
|
axisLabel: { rotate: statisticsType.value === "day" ? 45 : 0 },
|
},
|
yAxis: {
|
type: "value",
|
name: "费用(元)",
|
},
|
series: [
|
{
|
name: "水费",
|
type: "line",
|
data: data.map(item => item.waterAmount),
|
smooth: true,
|
itemStyle: { color: "#409EFF" },
|
},
|
{
|
name: "电费",
|
type: "line",
|
data: data.map(item => item.electricityAmount),
|
smooth: true,
|
itemStyle: { color: "#E6A23C" },
|
},
|
{
|
name: "气费",
|
type: "line",
|
data: data.map(item => item.gasAmount),
|
smooth: true,
|
itemStyle: { color: "#67C23A" },
|
},
|
],
|
};
|
amountChartInstance.setOption(option);
|
};
|
|
// 更新能耗类型占比图
|
const updateTypeChart = () => {
|
const data = tableData.value;
|
const totalWater = data.reduce(
|
(sum, item) => sum + parseFloat(item.waterConsumption),
|
0
|
);
|
const totalElectricity = data.reduce(
|
(sum, item) => sum + parseFloat(item.electricityConsumption),
|
0
|
);
|
const totalGas = data.reduce(
|
(sum, item) => sum + parseFloat(item.gasConsumption),
|
0
|
);
|
|
const option = {
|
tooltip: {
|
trigger: "item",
|
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
},
|
legend: {
|
orient: "vertical",
|
left: "left",
|
},
|
series: [
|
{
|
name: "能耗用量",
|
type: "pie",
|
radius: ["40%", "70%"],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 10,
|
borderColor: "#fff",
|
borderWidth: 2,
|
},
|
label: {
|
show: true,
|
formatter: "{b}: {d}%",
|
},
|
data: [
|
{
|
value: totalWater.toFixed(2),
|
name: "水",
|
itemStyle: { color: "#409EFF" },
|
},
|
{
|
value: totalElectricity.toFixed(2),
|
name: "电",
|
itemStyle: { color: "#E6A23C" },
|
},
|
{
|
value: totalGas.toFixed(2),
|
name: "气",
|
itemStyle: { color: "#67C23A" },
|
},
|
],
|
},
|
],
|
};
|
typeChartInstance.setOption(option);
|
};
|
|
// 更新能耗类型费用占比图
|
const updateAmountTypeChart = () => {
|
const data = tableData.value;
|
const totalWaterAmount = data.reduce(
|
(sum, item) => sum + parseFloat(item.waterAmount),
|
0
|
);
|
const totalElectricityAmount = data.reduce(
|
(sum, item) => sum + parseFloat(item.electricityAmount),
|
0
|
);
|
const totalGasAmount = data.reduce(
|
(sum, item) => sum + parseFloat(item.gasAmount),
|
0
|
);
|
|
const option = {
|
tooltip: {
|
trigger: "item",
|
formatter: "{a} <br/>{b}: ¥{c} ({d}%)",
|
},
|
legend: {
|
orient: "vertical",
|
left: "left",
|
},
|
series: [
|
{
|
name: "能耗费用",
|
type: "pie",
|
radius: "60%",
|
data: [
|
{
|
value: totalWaterAmount.toFixed(2),
|
name: "水费",
|
itemStyle: { color: "#409EFF" },
|
},
|
{
|
value: totalElectricityAmount.toFixed(2),
|
name: "电费",
|
itemStyle: { color: "#E6A23C" },
|
},
|
{
|
value: totalGasAmount.toFixed(2),
|
name: "气费",
|
itemStyle: { color: "#67C23A" },
|
},
|
],
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
},
|
},
|
},
|
],
|
};
|
amountTypeChartInstance.setOption(option);
|
};
|
|
// 统计维度切换
|
const handleTypeChange = () => {
|
// 重置时间范围
|
searchForm.dateRange = [];
|
searchForm.monthRange = [];
|
searchForm.year = new Date().getFullYear();
|
page.current = 1;
|
handleQuery();
|
};
|
|
// 查询
|
const handleQuery = () => {
|
tableLoading.value = true;
|
const params = {
|
type: "",
|
};
|
|
// 构造请求参数
|
if (searchForm.energyType != "全部") {
|
params.type = searchForm.energyType;
|
}
|
|
if (statisticsType.value === "day") {
|
if (searchForm.dateRange && searchForm.dateRange.length === 2) {
|
params.startDate = searchForm.dateRange[0];
|
params.endDate = searchForm.dateRange[1];
|
// 计算天数
|
const start = new Date(searchForm.dateRange[0]);
|
const end = new Date(searchForm.dateRange[1]);
|
params.days = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1;
|
}
|
} else if (statisticsType.value === "month") {
|
if (searchForm.monthRange && searchForm.monthRange.length === 2) {
|
params.startDate = searchForm.monthRange[0] + "-01";
|
params.endDate = searchForm.monthRange[1] + "-01";
|
// 计算月数
|
const start = new Date(searchForm.monthRange[0] + "-01");
|
const end = new Date(searchForm.monthRange[1] + "-01");
|
params.days =
|
(end.getFullYear() - start.getFullYear()) * 12 +
|
(end.getMonth() - start.getMonth()) +
|
1;
|
}
|
} else if (statisticsType.value === "year") {
|
params.startDate = searchForm.year + "-01-01";
|
params.endDate = searchForm.year + "-12-31";
|
params.days = 365;
|
}
|
|
// 调用接口获取数据
|
energyConsumptionDetailStatistics(params)
|
.then(res => {
|
if (res.code === 200) {
|
const data = res.data;
|
|
// 更新统计概览数据
|
overview.totalConsumption = data.totalEnergyConsumption || "0";
|
overview.totalAmount = data.totalEnergyCost || "0";
|
overview.avgConsumption = data.averageConsumption || "0";
|
overview.compareRate = data.changeVite || 0;
|
|
// 处理表格数据
|
tableData.value = data.energyCostDtos || [];
|
page.total = tableData.value.length || 0;
|
} else {
|
ElMessage.error(res.message || "获取数据失败");
|
tableData.value = [];
|
page.total = 0;
|
}
|
})
|
.catch(err => {
|
console.error("获取数据异常：", err);
|
ElMessage.error("系统异常，获取数据失败");
|
tableData.value = [];
|
page.total = 0;
|
})
|
.finally(() => {
|
tableLoading.value = false;
|
updateCharts();
|
});
|
};
|
|
// 更新所有图表
|
const updateCharts = () => {
|
nextTick(() => {
|
if (consumptionChartInstance) updateConsumptionChart();
|
if (amountChartInstance) updateAmountChart();
|
if (typeChartInstance) updateTypeChart();
|
if (amountTypeChartInstance) updateAmountTypeChart();
|
});
|
};
|
|
// 重置
|
const handleReset = () => {
|
searchForm.energyType = "全部";
|
// 重置为默认时间范围
|
const end = new Date();
|
const start = new Date();
|
|
// 默认最近7天
|
start.setDate(start.getDate() - 6);
|
searchForm.dateRange = [
|
start.toISOString().split("T")[0],
|
end.toISOString().split("T")[0],
|
];
|
|
// 默认最近3个月
|
start.setMonth(start.getMonth() - 2);
|
searchForm.monthRange = [
|
start.toISOString().slice(0, 7),
|
end.toISOString().slice(0, 7),
|
];
|
|
// 默认当前年份
|
searchForm.year = new Date().getFullYear();
|
|
page.current = 1;
|
handleQuery();
|
};
|
|
// 导出
|
const handleExport = () => {
|
ElMessage.success("报表导出成功");
|
};
|
|
// 分页大小变化
|
const handleSizeChange = val => {
|
page.size = val;
|
};
|
|
// 页码变化
|
const handleCurrentChange = val => {
|
page.current = val;
|
};
|
|
// 窗口大小变化时重新渲染图表
|
const handleResize = () => {
|
consumptionChartInstance && consumptionChartInstance.resize();
|
amountChartInstance && amountChartInstance.resize();
|
typeChartInstance && typeChartInstance.resize();
|
amountTypeChartInstance && amountTypeChartInstance.resize();
|
};
|
|
onMounted(() => {
|
handleQuery();
|
initCharts();
|
window.addEventListener("resize", handleResize);
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.app-container {
|
padding: 20px;
|
}
|
|
.search_form {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
padding: 15px;
|
background-color: #f5f7fa;
|
border-radius: 8px;
|
}
|
|
.statistics-overview {
|
margin-bottom: 20px;
|
}
|
|
.overview-card {
|
display: flex;
|
align-items: center;
|
padding: 20px;
|
border-radius: 8px;
|
background: #fff;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
&.total-consumption {
|
border-left: 4px solid #409eff;
|
}
|
|
&.total-amount {
|
border-left: 4px solid #67c23a;
|
}
|
|
&.avg-consumption {
|
border-left: 4px solid #e6a23c;
|
}
|
|
&.compare-last {
|
border-left: 4px solid #909399;
|
}
|
|
.overview-icon {
|
width: 50px;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: #f5f7fa;
|
border-radius: 50%;
|
margin-right: 15px;
|
|
.el-icon {
|
font-size: 24px;
|
color: #409eff;
|
}
|
}
|
|
.overview-info {
|
flex: 1;
|
|
.overview-label {
|
font-size: 14px;
|
color: #909399;
|
margin-bottom: 5px;
|
}
|
|
.overview-value {
|
font-size: 24px;
|
font-weight: bold;
|
color: #303133;
|
|
.unit {
|
font-size: 14px;
|
font-weight: normal;
|
color: #909399;
|
}
|
|
&.up {
|
color: #67c23a;
|
}
|
|
&.down {
|
color: #f56c6c;
|
}
|
|
.el-icon {
|
font-size: 16px;
|
vertical-align: middle;
|
}
|
}
|
}
|
}
|
|
.charts-container {
|
margin-bottom: 20px;
|
}
|
|
.chart-card {
|
background: #fff;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
padding: 20px;
|
|
.chart-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 15px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #ebeef5;
|
}
|
|
.chart-content {
|
height: 300px;
|
}
|
}
|
|
.table-section {
|
background: #fff;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
padding: 20px;
|
margin-bottom: 20px;
|
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 15px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #ebeef5;
|
}
|
}
|
|
.consumption-value {
|
font-weight: bold;
|
color: #409eff;
|
}
|
|
.amount-value {
|
font-weight: bold;
|
color: #67c23a;
|
}
|
|
.total-value {
|
font-weight: bold;
|
color: #e6a23c;
|
}
|
|
.total-amount-value {
|
font-weight: bold;
|
color: #f56c6c;
|
font-size: 14px;
|
}
|
|
.pagination-container {
|
display: flex;
|
justify-content: flex-end;
|
}
|
</style>
|
