171 lines
3.7 KiB
Vue
171 lines
3.7 KiB
Vue
<script setup>
|
|
import Table from "@/components/customUI/Table.vue";
|
|
import EnergyDataCahrt from "./EnergyDataCahrt.vue";
|
|
import { inject, computed, watch, ref, onMounted } from "vue";
|
|
import { useI18n } from "vue-i18n";
|
|
import { useRoute } from "vue-router";
|
|
|
|
const { t } = useI18n();
|
|
const route = useRoute();
|
|
const { tableData } = inject("energy_table_data");
|
|
const routeType = ref(1);
|
|
const processedTableData = ref([]); // 使用 ref 來儲存處理後的數據
|
|
|
|
// 處理計算邏輯的函數
|
|
const processData = (data) => {
|
|
if (!data || !Array.isArray(data) || data.length === 0) {
|
|
return [];
|
|
}
|
|
return data ? [...data] : [];
|
|
};
|
|
|
|
// 使用 watch 來監聽 tableData 和 routeType 的變化
|
|
watch(
|
|
tableData,
|
|
(newTableData) => {
|
|
processedTableData.value = processData(newTableData);
|
|
},
|
|
{ immediate: true } // 立即執行一次
|
|
);
|
|
|
|
const columns = computed(() => {
|
|
const columnMap = {
|
|
1: [
|
|
{
|
|
title: t("assetManagement.department"),
|
|
key: "department_name",
|
|
},
|
|
{
|
|
title: t("energy.floor"),
|
|
key: "floor_name",
|
|
},
|
|
{
|
|
title: t("history.device_name"),
|
|
key: "device_name",
|
|
filter: true,
|
|
},
|
|
{
|
|
title: t("assetManagement.point"),
|
|
key: "item_name",
|
|
},
|
|
{
|
|
title: t("energy.maximum"),
|
|
key: "maxValue",
|
|
},
|
|
{
|
|
title: t("energy.maximum_time"),
|
|
key: "maxTime",
|
|
},
|
|
{
|
|
title: t("energy.minimum"),
|
|
key: "minValue",
|
|
},
|
|
{
|
|
title: t("energy.minimum_time"),
|
|
key: "minTime",
|
|
},
|
|
{
|
|
title: t("energy.average_value"),
|
|
key: "averageValue",
|
|
},
|
|
],
|
|
2: [
|
|
{
|
|
title: t("assetManagement.department"),
|
|
key: "department_name",
|
|
},
|
|
{
|
|
title: t("energy.floor"),
|
|
key: "floor_name",
|
|
},
|
|
{
|
|
title: t("history.device_name"),
|
|
key: "device_name",
|
|
filter: true,
|
|
},
|
|
{
|
|
title: t("history.start_time"),
|
|
key: "startTime",
|
|
},
|
|
{
|
|
title: t("energy.start_value"),
|
|
key: "startValue",
|
|
},
|
|
{
|
|
title: t("history.end_time"),
|
|
key: "endTime",
|
|
filter: true,
|
|
},
|
|
{
|
|
title: t("energy.end_value"),
|
|
key: "endValue",
|
|
},
|
|
{
|
|
title: t("energy.difference"),
|
|
key: "diffValue",
|
|
},
|
|
],
|
|
3: [
|
|
{
|
|
title: t("assetManagement.department"),
|
|
key: "department_name",
|
|
},
|
|
{
|
|
title: t("energy.floor"),
|
|
key: "floor_name",
|
|
},
|
|
{
|
|
title: t("history.device_name"),
|
|
key: "device_name",
|
|
filter: true,
|
|
},
|
|
{
|
|
title: t("energy.power_consumption"),
|
|
key: "value",
|
|
},
|
|
{
|
|
title: t("history.start_time"),
|
|
key: "startTime",
|
|
},
|
|
{
|
|
title: t("history.end_time"),
|
|
key: "endTime",
|
|
},
|
|
{
|
|
title: t("energy.electricity_classification"),
|
|
key: "elecType",
|
|
},
|
|
{
|
|
title: t("energy.ranking"),
|
|
key: "rank",
|
|
},
|
|
],
|
|
};
|
|
return columnMap[routeType.value] || columnMap[1];
|
|
});
|
|
|
|
watch(
|
|
() => route.params.type,
|
|
(newType) => {
|
|
const type = parseInt(newType);
|
|
if (!isNaN(type) && type >= 1 && type <= 3) {
|
|
routeType.value = type;
|
|
} else {
|
|
routeType.value = 1;
|
|
}
|
|
tableData.value = [];
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<Table :columns="columns" :dataSource="processedTableData">
|
|
<template #beforeTable>
|
|
<EnergyDataCahrt v-if="route.params.type == 1" class="mb-10" />
|
|
</template>
|
|
</Table>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|