| | |
| | | value="气" /> |
| | | </el-select> |
| | | </el-form-item> --> |
| | | <el-form-item label="能耗用途"> |
| | | <!-- <el-form-item label="能耗用途"> |
| | | <el-select |
| | | v-model="searchForm.type" |
| | | placeholder="" |
| | |
| | | <el-option label="生产" value="生产" /> |
| | | <el-option label="办公" value="办公" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-form-item> --> |
| | | <el-form-item label="时间范围"> |
| | | <el-date-picker |
| | | v-if="statisticsType === 'day'" |
| | |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :xs="24" :lg="12"> |
| | | <!-- <el-col :xs="24" :lg="12"> |
| | | <el-card class="chart-card" shadow="never"> |
| | | <template #header> |
| | | <div class="chart-head"> |
| | |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | </el-col> --> |
| | | </el-row> |
| | | </div> |
| | | </transition> |
| | |
| | | </template> |
| | | <el-table-column type="index" label="序号" width="60" align="center" /> |
| | | <el-table-column |
| | | prop="timePeriod" |
| | | prop="meterReadingDate" |
| | | :label="timeColumnLabel" |
| | | align="center" |
| | | sortable="custom" |
| | |
| | | // 搜索表单 |
| | | const searchForm = reactive({ |
| | | // energyType: "", |
| | | type: "", |
| | | // type: "", |
| | | dateRange: (() => { |
| | | // 默认最近7天 |
| | | const end = new Date(); |
| | |
| | | const rows = Array.isArray(tableData.value) ? tableData.value : []; |
| | | const byTime = new Map(); |
| | | for (const r of rows) { |
| | | const t = r?.timePeriod ?? ""; |
| | | const t = r?.meterReadingDate ?? ""; |
| | | if (!t) continue; |
| | | if (!byTime.has(t)) byTime.set(t, { total: 0, production: 0, office: 0 }); |
| | | const bucket = byTime.get(t); |
| | |
| | | }, |
| | | xAxis: { |
| | | type: "category", |
| | | data: data.map((item) => item.timePeriod), |
| | | data: data.map((item) => item.meterReadingDate), |
| | | axisLabel: { |
| | | rotate: statisticsType.value === "day" ? 45 : 0, |
| | | color: "rgba(15, 23, 42, 0.62)", |
| | |
| | | const params = { |
| | | days: 0, |
| | | // energyType: searchForm.energyType || undefined, |
| | | type: searchForm.type || undefined, |
| | | // type: searchForm.type || undefined, |
| | | pageNum: page.current, |
| | | pageSize: page.size, |
| | | }; |
| | |
| | | .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; |
| | | overview.totalCost = data.totalEnergyConsumption || "0"; |
| | | overview.productionCost = data.totalEnergyCost || "0"; |
| | | overview.avgCost = data.averageConsumption || "0"; |
| | | overview.officeCost = data.changeVite || 0; |
| | | |
| | | // 处理表格数据 |
| | | tableData.value = data.energyCostDtos || []; |
| | |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.error("获取数据异常:", err); |
| | | // 【假数据(Mock)已禁用】接口异常时不再生成随机假数据,避免误用到生产数据链路 |
| | | ElMessage.error("获取数据异常"); |
| | | tableData.value = []; |
| | | page.total = 0; |
| | |
| | | } |
| | | |
| | | .filter-form { |
| | | flex: 1 1 auto; |
| | | flex: 0.1 1 auto; |
| | | min-width: 0; |
| | | } |
| | | |