| | |
| | | <div class="kpi-left"> |
| | | <div class="kpi-label">总能耗成本</div> |
| | | <div class="kpi-value"> |
| | | ¥{{ formatMoney(animatedOverview.totalCost) }} |
| | | ¥{{ formatMoney(animatedOverview.totalEnergyCost) }} |
| | | </div> |
| | | <div class="kpi-meta"> |
| | | <span |
| | |
| | | <button |
| | | class="kpi-action" |
| | | type="button" |
| | | @click="copyKpi('totalCost')" |
| | | @click="copyKpi('totalEnergyCost')" |
| | | > |
| | | 复制 |
| | | </button> |
| | |
| | | <div class="kpi-left"> |
| | | <div class="kpi-label">生产能耗成本</div> |
| | | <div class="kpi-value"> |
| | | ¥{{ formatMoney(animatedOverview.productionCost) }} |
| | | ¥{{ formatMoney(animatedOverview.productEnergyCost) }} |
| | | </div> |
| | | <div class="kpi-meta"> |
| | | <span |
| | |
| | | <button |
| | | class="kpi-action" |
| | | type="button" |
| | | @click="copyKpi('productionCost')" |
| | | @click="copyKpi('productEnergyCost')" |
| | | > |
| | | 复制 |
| | | </button> |
| | |
| | | <div class="kpi-left"> |
| | | <div class="kpi-label">办公能耗成本</div> |
| | | <div class="kpi-value"> |
| | | ¥{{ formatMoney(animatedOverview.officeCost) }} |
| | | ¥{{ formatMoney(animatedOverview.officeEnergyCost) }} |
| | | </div> |
| | | <div class="kpi-meta"> |
| | | <span |
| | |
| | | <button |
| | | class="kpi-action" |
| | | type="button" |
| | | @click="copyKpi('officeCost')" |
| | | @click="copyKpi('officeEnergyCost')" |
| | | > |
| | | 复制 |
| | | </button> |
| | |
| | | <div class="kpi-left"> |
| | | <div class="kpi-label">平均成本</div> |
| | | <div class="kpi-value"> |
| | | ¥{{ formatMoney(animatedOverview.avgCost) }} |
| | | ¥{{ formatMoney(animatedOverview.averageEnergyCost) }} |
| | | <span class="kpi-unit" |
| | | >/{{ statisticsType === "day" ? "日" : "月" }}</span |
| | | > |
| | |
| | | <button |
| | | class="kpi-action" |
| | | type="button" |
| | | @click="copyKpi('avgCost')" |
| | | @click="copyKpi('averageEnergyCost')" |
| | | > |
| | | 复制 |
| | | </button> |
| | |
| | | sortable="custom" |
| | | /> |
| | | <el-table-column |
| | | prop="energyType" |
| | | prop="energyTyep" |
| | | label="能耗类型" |
| | | width="100" |
| | | align="center" |
| | |
| | | filter-placement="bottom-end" |
| | | > |
| | | <template #default="scope"> |
| | | <el-tag :type="getEnergyTypeType(scope.row.energyType)"> |
| | | {{ scope.row.energyType }} |
| | | <el-tag :type="getEnergyTypeType(scope.row.energyTyep)"> |
| | | {{ scope.row.energyTyep }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | filter-placement="bottom-end" |
| | | > |
| | | <template #default="scope"> |
| | | <el-tag :type="scope.row.type === '生产' ? 'primary' : 'info'"> |
| | | <el-tag :type="scope.row.type === '生产' ? 'primary' : 'warning'"> |
| | | {{ scope.row.type }} |
| | | </el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="consumption" label="用量" align="right"> |
| | | <el-table-column prop="dosage" label="用量" align="right"> |
| | | <template #default="scope"> |
| | | <span class="consumption-value">{{ |
| | | formatNumber(scope.row.consumption, 2) |
| | | formatNumber(scope.row.dosage, 2) |
| | | }}</span> |
| | | <span class="consumption-unit">{{ scope.row.unit }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="price" |
| | | prop="unitPrice" |
| | | label="单价(元)" |
| | | align="right" |
| | | sortable="custom" |
| | | > |
| | | <template #default="scope"> |
| | | <span class="price-value">{{ |
| | | formatNumber(scope.row.price, 2) |
| | | formatNumber(scope.row.unitPrice, 2) |
| | | }}</span> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | } from "@element-plus/icons-vue"; |
| | | import * as echarts from "echarts"; |
| | | // import { energyCostStatistics } from "@/api/costAccounting/energyCosts"; |
| | | import { energyConsumptionDetailStatistics } from "@/api/energyManagement/energyType"; |
| | | import { energyConsumptionDetailAccount } from "@/api/energyManagement/energyType"; |
| | | // 统计维度:day-按日,month-按月 |
| | | const statisticsType = ref("day"); |
| | | |
| | |
| | | |
| | | // 统计概览 |
| | | const overview = reactive({ |
| | | totalCost: "0.00", |
| | | productionCost: "0.00", |
| | | officeCost: "0.00", |
| | | avgCost: "0.00", |
| | | totalEnergyCost: "0.00", |
| | | productEnergyCost: "0.00", |
| | | officeEnergyCost: "0.00", |
| | | averageEnergyCost: "0.00", |
| | | }); |
| | | |
| | | const selectedKpi = ref("all"); // all | production | office |
| | | const animatedOverview = reactive({ |
| | | totalCost: 0, |
| | | productionCost: 0, |
| | | officeCost: 0, |
| | | avgCost: 0, |
| | | totalEnergyCost: 0, |
| | | productEnergyCost: 0, |
| | | officeEnergyCost: 0, |
| | | averageEnergyCost: 0, |
| | | }); |
| | | |
| | | const formatMoney = (v) => { |
| | |
| | | watch( |
| | | () => ({ ...overview }), |
| | | (val) => { |
| | | animateNumber("totalCost", Number.parseFloat(val.totalCost)); |
| | | animateNumber("productionCost", Number.parseFloat(val.productionCost)); |
| | | animateNumber("officeCost", Number.parseFloat(val.officeCost)); |
| | | animateNumber("avgCost", Number.parseFloat(val.avgCost)); |
| | | animateNumber("totalEnergyCost", Number.parseFloat(val.totalEnergyCost)); |
| | | animateNumber("productEnergyCost", Number.parseFloat(val.productEnergyCost)); |
| | | animateNumber("officeEnergyCost", Number.parseFloat(val.officeEnergyCost)); |
| | | animateNumber("averageEnergyCost", Number.parseFloat(val.averageEnergyCost)); |
| | | }, |
| | | { deep: true, immediate: true } |
| | | ); |
| | |
| | | |
| | | const copyKpi = async (field) => { |
| | | const map = { |
| | | totalCost: animatedOverview.totalCost, |
| | | productionCost: animatedOverview.productionCost, |
| | | officeCost: animatedOverview.officeCost, |
| | | avgCost: animatedOverview.avgCost, |
| | | totalEnergyCost: animatedOverview.totalEnergyCost, |
| | | productEnergyCost: animatedOverview.productEnergyCost, |
| | | officeEnergyCost: animatedOverview.officeEnergyCost, |
| | | averageEnergyCost: animatedOverview.averageEnergyCost, |
| | | }; |
| | | const raw = map[field]; |
| | | const text = `¥${formatMoney(raw)}`; |
| | |
| | | { text: "办公", value: "办公" }, |
| | | ]; |
| | | |
| | | const filterEnergyType = (value, row) => row.energyType === value; |
| | | const filterEnergyType = (value, row) => row.energyTyep === value; |
| | | const filterEnergyPurpose = (value, row) => row.type === value; |
| | | |
| | | // 分页 |
| | |
| | | } |
| | | |
| | | // 调用接口获取数据 |
| | | energyConsumptionDetailStatistics(params) |
| | | energyConsumptionDetailAccount(params) |
| | | .then((res) => { |
| | | if (res.code === 200) { |
| | | const data = res.data; |
| | | overview.totalCost = data.totalEnergyConsumption || "0"; |
| | | overview.productionCost = data.totalEnergyCost || "0"; |
| | | overview.avgCost = data.averageConsumption || "0"; |
| | | overview.officeCost = data.changeVite || 0; |
| | | overview.totalEnergyCost = data.totalEnergyCost || "0"; |
| | | overview.productEnergyCost = data.productEnergyCost || "0"; |
| | | overview.officeEnergyCost = data.officeEnergyCost || "0"; |
| | | overview.averageEnergyCost = data.averageEnergyCost || "0"; |
| | | |
| | | // 处理表格数据 |
| | | tableData.value = data.energyCostDtos || []; |
| | | tableData.value = data.energyConsumptionDetailDtoList || []; |
| | | page.total = tableData.value.length || 0; |
| | | } else { |
| | | ElMessage.error(res.message || "获取数据失败"); |
| | | tableData.value = []; |
| | | page.total = 0; |
| | | overview.totalCost = "0.00"; |
| | | overview.productionCost = "0.00"; |
| | | overview.officeCost = "0.00"; |
| | | overview.avgCost = "0.00"; |
| | | overview.totalEnergyCost = "0.00"; |
| | | overview.productEnergyCost = "0.00"; |
| | | overview.officeEnergyCost = "0.00"; |
| | | overview.averageEnergyCost = "0.00"; |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | ElMessage.error("获取数据异常"); |
| | | tableData.value = []; |
| | | page.total = 0; |
| | | overview.totalCost = "0.00"; |
| | | overview.productionCost = "0.00"; |
| | | overview.officeCost = "0.00"; |
| | | overview.avgCost = "0.00"; |
| | | overview.totalEnergyCost = "0.00"; |
| | | overview.productEnergyCost = "0.00"; |
| | | overview.officeEnergyCost = "0.00"; |
| | | overview.averageEnergyCost = "0.00"; |
| | | }) |
| | | .finally(() => { |
| | | tableLoading.value = false; |