| | |
| | | label="序号" |
| | | width="60" |
| | | align="center" /> |
| | | <el-table-column prop="timePeriod" |
| | | :label="timeColumnLabel" |
| | | align="center" /> |
| | | <el-table-column prop="meterReadingDate" |
| | | label="日期" |
| | | align="right"> |
| | | <template #default="scope"> |
| | | <span class="consumption-value">{{ scope.row.meterReadingDate }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="waterConsumption" |
| | | label="用水量(吨)" |
| | | align="right"> |
| | |
| | | <span class="consumption-value">{{ scope.row.waterConsumption }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="waterAmount" |
| | | <el-table-column prop="waterCost" |
| | | label="水费(元)" |
| | | align="right"> |
| | | <template #default="scope"> |
| | | <span class="amount-value">{{ scope.row.waterAmount }}</span> |
| | | <span class="amount-value">{{ scope.row.waterCost }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="electricityConsumption" |
| | |
| | | <span class="consumption-value">{{ scope.row.electricityConsumption }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="electricityAmount" |
| | | <el-table-column prop="electricityCost" |
| | | label="电费(元)" |
| | | align="right"> |
| | | <template #default="scope"> |
| | | <span class="amount-value">{{ scope.row.electricityAmount }}</span> |
| | | <span class="amount-value">{{ scope.row.electricityCost }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="gasConsumption" |
| | |
| | | <span class="consumption-value">{{ scope.row.gasConsumption }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="gasAmount" |
| | | <el-table-column prop="gasCost" |
| | | label="气费(元)" |
| | | align="right"> |
| | | <template #default="scope"> |
| | | <span class="amount-value">{{ scope.row.gasAmount }}</span> |
| | | <span class="amount-value">{{ scope.row.gasCost }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="totalConsumption" |
| | |
| | | align="right" |
| | | fixed="right"> |
| | | <template #default="scope"> |
| | | <span class="total-amount-value">¥{{ scope.row.totalAmount }}</span> |
| | | <span class="total-amount-value">¥{{ scope.row.totalCost }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | }, |
| | | xAxis: { |
| | | type: "category", |
| | | data: data.map(item => item.timePeriod), |
| | | data: data.map(item => item.meterReadingDate), |
| | | axisLabel: { rotate: statisticsType.value === "day" ? 45 : 0 }, |
| | | }, |
| | | yAxis: { |
| | |
| | | }, |
| | | xAxis: { |
| | | type: "category", |
| | | data: data.map(item => item.timePeriod), |
| | | data: data.map(item => item.meterReadingDate), |
| | | axisLabel: { rotate: statisticsType.value === "day" ? 45 : 0 }, |
| | | }, |
| | | yAxis: { |
| | |
| | | { |
| | | name: "水费", |
| | | type: "line", |
| | | data: data.map(item => item.waterAmount), |
| | | data: data.map(item => item.waterCost), |
| | | smooth: true, |
| | | itemStyle: { color: "#409EFF" }, |
| | | }, |
| | | { |
| | | name: "电费", |
| | | type: "line", |
| | | data: data.map(item => item.electricityAmount), |
| | | data: data.map(item => item.electricityCost), |
| | | smooth: true, |
| | | itemStyle: { color: "#E6A23C" }, |
| | | }, |
| | | { |
| | | name: "气费", |
| | | type: "line", |
| | | data: data.map(item => item.gasAmount), |
| | | data: data.map(item => item.gasCost), |
| | | smooth: true, |
| | | itemStyle: { color: "#67C23A" }, |
| | | }, |
| | |
| | | const updateAmountTypeChart = () => { |
| | | const data = tableData.value; |
| | | const totalWaterAmount = data.reduce( |
| | | (sum, item) => sum + parseFloat(item.waterAmount), |
| | | (sum, item) => sum + parseFloat(item.waterCost), |
| | | 0 |
| | | ); |
| | | const totalElectricityAmount = data.reduce( |
| | | (sum, item) => sum + parseFloat(item.electricityAmount), |
| | | (sum, item) => sum + parseFloat(item.electricityCost), |
| | | 0 |
| | | ); |
| | | const totalGasAmount = data.reduce( |
| | | (sum, item) => sum + parseFloat(item.gasAmount), |
| | | (sum, item) => sum + parseFloat(item.gasCost), |
| | | 0 |
| | | ); |
| | | |