diff --git a/src/views/AssetManagement/components/AssetTableModalRightInfo.vue b/src/views/AssetManagement/components/AssetTableModalRightInfo.vue
index 06a1e44..f4a86c2 100644
--- a/src/views/AssetManagement/components/AssetTableModalRightInfo.vue
+++ b/src/views/AssetManagement/components/AssetTableModalRightInfo.vue
@@ -2,6 +2,8 @@
import { onMounted, ref, inject, onBeforeMount, watch, computed } from "vue";
import EffectScatter from "@/components/chart/EffectScatter.vue";
import useBuildingStore from "@/stores/useBuildingStore";
+import AssetTableModalLeftInfoIoT from "./AssetTableModalLeftInfoIoT.vue";
+import AssetTableModalLeftInfoGraph from "./AssetTableModalLeftInfoGraph.vue";
import * as yup from "yup";
import { twMerge } from "tailwind-merge";
import { useI18n } from "vue-i18n";
@@ -115,7 +117,7 @@ const getCoordinate = (position) => {
-
+
-
+
+
{
/>
+
diff --git a/src/views/energyManagement/components/EnergyHistoryTable/EnergyActionButton.vue b/src/views/energyManagement/components/EnergyHistoryTable/EnergyActionButton.vue
index 6c06d2e..eff1440 100644
--- a/src/views/energyManagement/components/EnergyHistoryTable/EnergyActionButton.vue
+++ b/src/views/energyManagement/components/EnergyHistoryTable/EnergyActionButton.vue
@@ -40,9 +40,15 @@ const submit = async (e, type = "") => {
if (type === "export") {
const res = await getHistoryExportData({
- type: searchParams.value.selectedType,
...params,
...searchParams.value,
+ Type:
+ route.params.type != 1
+ ? 2
+ : searchParams.value.Type
+ ? searchParams.value.Type
+ : 1,
+ table_type: route.params.type,
}).catch((err) => {
isToastOpen.value = {
open: true,
diff --git a/src/views/energyManagement/components/EnergyHistoryTable/EnergyDataTable.vue b/src/views/energyManagement/components/EnergyHistoryTable/EnergyDataTable.vue
index 9e1b7ac..ec0aa70 100644
--- a/src/views/energyManagement/components/EnergyHistoryTable/EnergyDataTable.vue
+++ b/src/views/energyManagement/components/EnergyHistoryTable/EnergyDataTable.vue
@@ -132,7 +132,7 @@ const columns = computed(() => {
key: "endTime",
},
{
- title: t("energy.ectricity_classification"),
+ title: t("energy.electricity_classification"),
key: "elecType",
},
{
diff --git a/src/views/energyManagement/components/EnergyReport/EnergyReportTable.vue b/src/views/energyManagement/components/EnergyReport/EnergyReportTable.vue
index eda12c3..4cc8c73 100644
--- a/src/views/energyManagement/components/EnergyReport/EnergyReportTable.vue
+++ b/src/views/energyManagement/components/EnergyReport/EnergyReportTable.vue
@@ -35,9 +35,23 @@ const columns = computed(() => {
if (tableData.value && tableData.value.length > 0) {
const firstDataItem = tableData.value[0];
if (firstDataItem && firstDataItem.data) {
- firstDataItem.data.forEach((item, index) => {
+
+ const sortedData = [...firstDataItem.data].sort((a, b) =>
+ dayjs(a.time).valueOf() - dayjs(b.time).valueOf()
+ );
+
+ sortedData.forEach((item, index) => {
let formatString = "MM/DD"; // 預設格式
switch (route.params.type) {
+ case "1":
+ formatString = "MM/DD";
+ break;
+ case "2":
+ // 取得該週的開始與結束日期
+ const startOfWeek = dayjs(item.time).startOf('week');
+ const endOfWeek = dayjs(item.time).endOf('week');
+ formatString = `${startOfWeek.format("MM/DD")}-${endOfWeek.format("MM/DD")}`;
+ break;
case "3":
formatString = "YYYY/MM";
break;
@@ -45,7 +59,7 @@ const columns = computed(() => {
formatString = "YYYY";
break;
default:
- formatString = "MM/DD"; // case 1 和 case 2 都是 "MM-DD"
+ formatString = "MM/DD ";
break;
}
const formattedTime = dayjs(item.time).format(formatString);
@@ -73,8 +87,13 @@ const dataSource = computed(() => {
return tableData.value.map((item) => {
let subtotalValue = 0;
const newData = {}; // 用於儲存 data 的值，方便 Table 組件讀取
- if (item.data && item.data.length > 0) {
- item.data.forEach((dataItem, index) => {
+
+ const sortedData = [...item.data].sort((a, b) =>
+ dayjs(a.time).valueOf() - dayjs(b.time).valueOf()
+ );
+
+ if (sortedData && sortedData.length > 0) {
+ sortedData.forEach((dataItem, index) => {
const value = parseFloat(dataItem.value || 0);
subtotalValue += value;
// 將值儲存在 newData 中，key 與 columns 中的 key 對應
diff --git a/src/views/graphManagement/components/GraphModal.vue b/src/views/graphManagement/components/GraphModal.vue
index 9bb45a7..5a9e9e9 100644
--- a/src/views/graphManagement/components/GraphModal.vue
+++ b/src/views/graphManagement/components/GraphModal.vue
@@ -126,7 +126,7 @@ watch(
- {{ $t("assetManagement.add_floor_text") }}
-
+
{
{
+ if (device.full_name === 'SmartSocket-AA001') return 'red';
+ if (device.full_name === 'SmartSocket-AA003' || device.full_name === 'SmartSocket-AA004') return 'gray';
+ const realtimeDevice = realtimeData.value?.find(
+ (item) => item.device_number === device.device_number
+ );
+ const state = realtimeDevice?.state || '';
+ if (state === 'offnormal' || state === '') return device.device_close_color || '#999';
+ return device.device_normal_color || '#009100';
+};
+
const defaultOption = (map, data = []) => {
return {
animation: false,
@@ -38,13 +51,7 @@ const defaultOption = (map, data = []) => {
...sameOption,
symbolSize: 10,
itemStyle: {
- color: (params) =>
- params.data[2].full_name === "SmartSocket-AA001"
- ? "red"
- : params.data[2].full_name === "SmartSocket-AA003" ||
- params.data[2].full_name === "SmartSocket-AA004"
- ? "gray"
- : params.data[2].device_normal_color || "#009100",
+ color: (params) => getDeviceRealtimeColor(params.data[2]),
},
data,
},
@@ -52,19 +59,33 @@ const defaultOption = (map, data = []) => {
...sameOption,
symbolSize: 20,
itemStyle: {
- color: (params) =>
- params.data[2].full_name === "SmartSocket-AA001"
- ? "red"
- : params.data[2].full_name === "SmartSocket-AA003" ||
- params.data[2].full_name === "SmartSocket-AA004"
- ? "gray"
- : params.data[2].device_normal_color || "#009100",
+ color: (params) => getDeviceRealtimeColor(params.data[2]),
},
data: [],
},
],
};
};
+// 監聽 realtimeData 變化，刷新地圖顏色
+watch(
+ realtimeData,
+ () => {
+ setTimeout(() => {
+ if (
+ selectedFloor.value &&
+ asset_floor_chart.value &&
+ asset_floor_chart.value.chart &&
+ asset_floor_chart.value.chart.isDisposed() === false
+ ) {
+ asset_floor_chart.value.chart.setOption(
+ defaultOption(selectedFloor.value?.title, selectedData.value),
+ true
+ );
+ }
+ }, 0);
+ },
+ { deep: true }
+);
const { selectedFloor } = useSelectedFloor();
@@ -130,18 +151,23 @@ watch(
if (
selectedFloor.value &&
asset_floor_chart.value &&
- asset_floor_chart.value.chart
+ asset_floor_chart.value.chart &&
+ asset_floor_chart.value.chart.isDisposed() === false
) {
const selected = allData.value.filter((d) => d[2].is2DActive);
const unSelected = allData.value.filter((d) => !d[2].is2DActive);
- asset_floor_chart.value.chart.setOption({
- series: [
- { data: unSelected },
- {
- data: selected,
- },
- ],
- });
+ setTimeout(() => {
+ if (asset_floor_chart.value?.chart && !asset_floor_chart.value.chart.isDisposed()) {
+ asset_floor_chart.value.chart.setOption({
+ series: [
+ { data: unSelected },
+ {
+ data: selected,
+ },
+ ],
+ });
+ }
+ }, 0);
}
},
{
@@ -168,14 +194,18 @@ watch(
const unSelected = selectedData.value.filter((d) => !d[2].is2DActive);
console.log("allData.value", allData.value, selected, unSelected);
- asset_floor_chart.value.chart.setOption({
- series: [
- { data: unSelected },
- {
- data: selected,
- },
- ],
- });
+ setTimeout(() => {
+ if (asset_floor_chart.value?.chart && !asset_floor_chart.value.chart.isDisposed()) {
+ asset_floor_chart.value.chart.setOption({
+ series: [
+ { data: unSelected },
+ {
+ data: selected,
+ },
+ ],
+ });
+ }
+ }, 0);
}
},
{
diff --git a/src/views/system/components/SystemCard.vue b/src/views/system/components/SystemCard.vue
index c65e72b..9dc64df 100644
--- a/src/views/system/components/SystemCard.vue
+++ b/src/views/system/components/SystemCard.vue
@@ -5,11 +5,39 @@ import useSystemShowData from "@/hooks/useSystemShowData";
const { getCurrentInfoModalData, selected_dbid } = inject(
"system_selectedDevice"
);
-const { subscribeData } = inject("system_deviceList");
+const { subscribeData, realtimeData } = inject("system_deviceList");
const { showData } = useSystemShowData();
const FILE_BASEURL = window.env?.VITE_FILE_API_BASEURL;
+
+// 根據設備編號取得即時狀態
+const getDeviceRealtimeState = (deviceNumber) => {
+ const realtimeDevice = realtimeData.value?.find(
+ (item) => item.device_number === deviceNumber
+ );
+ return realtimeDevice?.state || '';
+};
+
+// 狀態顏色
+const getDeviceStatusColor = (device) => {
+ if (device.full_name === 'SmartSocket-AA001') return 'red';
+ if (device.full_name === 'SmartSocket-AA003' || device.full_name === 'SmartSocket-AA004') return 'gray';
+ const state = getDeviceRealtimeState(device.device_number);
+ if (state === 'offnormal' || state === '') return device.device_close_color || '#9D9D9D';
+ return device.device_normal_color || '#009100';
+};
+
+// 狀態文字
+const getDeviceStatusText = (device) => {
+ if (device.full_name === 'SmartSocket-AA001') return 'Error';
+ if (device.full_name === 'SmartSocket-AA003' || device.full_name === 'SmartSocket-AA004') return 'Offline';
+ const state = getDeviceRealtimeState(device.device_number);
+ if (state === 'offnormal' || state === '') return 'Offline';
+ if (state === 'normal') return 'Online';
+ return state || device.device_status || 'Online';
+};
+
const fitToView = (forge_dbid, spriteDbId) => {
selected_dbid.value = [forge_dbid, spriteDbId];
};
@@ -32,7 +60,7 @@ const cancelDialog = () => {
frameborder="0"
class="w-full h-full"
>
-
+
@@ -72,25 +100,10 @@ const cancelDialog = () => {
{
+ if (device.full_name === 'SmartSocket-AA001') return 'red';
+ if (device.full_name === 'SmartSocket-AA003' || device.full_name === 'SmartSocket-AA004') return 'gray';
+ const realtimeDevice = realtimeData.value?.find(
+ (item) => item.device_number === device.device_number
+ );
+ const state = realtimeDevice?.state || '';
+ if (state === 'offnormal' || state === '') return device.device_close_color || '#999';
+ return device.device_normal_color || '#009100';
+};
+
const defaultOption = (map, data = []) => {
return {
animation: false,
@@ -38,13 +51,7 @@ const defaultOption = (map, data = []) => {
...sameOption,
symbolSize: 10,
itemStyle: {
- color: (params) =>
- params.data[2].full_name === "SmartSocket-AA001"
- ? "red"
- : params.data[2].full_name === "SmartSocket-AA003" ||
- params.data[2].full_name === "SmartSocket-AA004"
- ? "gray"
- : params.data[2].device_normal_color || "#009100",
+ color: (params) => getDeviceRealtimeColor(params.data[2]),
},
data,
},
@@ -52,19 +59,33 @@ const defaultOption = (map, data = []) => {
...sameOption,
symbolSize: 20,
itemStyle: {
- color: (params) =>
- params.data[2].full_name === "SmartSocket-AA001"
- ? "red"
- : params.data[2].full_name === "SmartSocket-AA003" ||
- params.data[2].full_name === "SmartSocket-AA004"
- ? "gray"
- : params.data[2].device_normal_color || "#009100",
+ color: (params) => getDeviceRealtimeColor(params.data[2]),
},
data: [],
},
],
};
};
+// 監聽 realtimeData 變化，刷新地圖顏色
+watch(
+ realtimeData,
+ () => {
+ setTimeout(() => {
+ if (
+ selectedFloor.value &&
+ asset_floor_chart.value &&
+ asset_floor_chart.value.chart &&
+ asset_floor_chart.value.chart.isDisposed() === false
+ ) {
+ asset_floor_chart.value.chart.setOption(
+ defaultOption(selectedFloor.value?.title, selectedData.value),
+ true
+ );
+ }
+ }, 0);
+ },
+ { deep: true }
+);
const { selectedFloor } = useSelectedFloor();
@@ -130,18 +151,23 @@ watch(
if (
selectedFloor.value &&
asset_floor_chart.value &&
- asset_floor_chart.value.chart
+ asset_floor_chart.value.chart &&
+ asset_floor_chart.value.chart.isDisposed() === false
) {
const selected = allData.value.filter((d) => d[2].is2DActive);
const unSelected = allData.value.filter((d) => !d[2].is2DActive);
- asset_floor_chart.value.chart.setOption({
- series: [
- { data: unSelected },
- {
- data: selected,
- },
- ],
- });
+ setTimeout(() => {
+ if (asset_floor_chart.value?.chart && !asset_floor_chart.value.chart.isDisposed()) {
+ asset_floor_chart.value.chart.setOption({
+ series: [
+ { data: unSelected },
+ {
+ data: selected,
+ },
+ ],
+ });
+ }
+ }, 0);
}
},
{
@@ -168,14 +194,18 @@ watch(
const unSelected = selectedData.value.filter((d) => !d[2].is2DActive);
console.log("allData.value", allData.value, selected, unSelected);
- asset_floor_chart.value.chart.setOption({
- series: [
- { data: unSelected },
- {
- data: selected,
- },
- ],
- });
+ setTimeout(() => {
+ if (asset_floor_chart.value?.chart && !asset_floor_chart.value.chart.isDisposed()) {
+ asset_floor_chart.value.chart.setOption({
+ series: [
+ { data: unSelected },
+ {
+ data: selected,
+ },
+ ],
+ });
+ }
+ }, 0);
}
},
{
diff --git a/src/views/system/components/SystemCard.vue b/src/views/system/components/SystemCard.vue
index c65e72b..9dc64df 100644
--- a/src/views/system/components/SystemCard.vue
+++ b/src/views/system/components/SystemCard.vue
@@ -5,11 +5,39 @@ import useSystemShowData from "@/hooks/useSystemShowData";
const { getCurrentInfoModalData, selected_dbid } = inject(
"system_selectedDevice"
);
-const { subscribeData } = inject("system_deviceList");
+const { subscribeData, realtimeData } = inject("system_deviceList");
const { showData } = useSystemShowData();
const FILE_BASEURL = window.env?.VITE_FILE_API_BASEURL;
+
+// 根據設備編號取得即時狀態
+const getDeviceRealtimeState = (deviceNumber) => {
+ const realtimeDevice = realtimeData.value?.find(
+ (item) => item.device_number === deviceNumber
+ );
+ return realtimeDevice?.state || '';
+};
+
+// 狀態顏色
+const getDeviceStatusColor = (device) => {
+ if (device.full_name === 'SmartSocket-AA001') return 'red';
+ if (device.full_name === 'SmartSocket-AA003' || device.full_name === 'SmartSocket-AA004') return 'gray';
+ const state = getDeviceRealtimeState(device.device_number);
+ if (state === 'offnormal' || state === '') return device.device_close_color || '#9D9D9D';
+ return device.device_normal_color || '#009100';
+};
+
+// 狀態文字
+const getDeviceStatusText = (device) => {
+ if (device.full_name === 'SmartSocket-AA001') return 'Error';
+ if (device.full_name === 'SmartSocket-AA003' || device.full_name === 'SmartSocket-AA004') return 'Offline';
+ const state = getDeviceRealtimeState(device.device_number);
+ if (state === 'offnormal' || state === '') return 'Offline';
+ if (state === 'normal') return 'Online';
+ return state || device.device_status || 'Online';
+};
+
const fitToView = (forge_dbid, spriteDbId) => {
selected_dbid.value = [forge_dbid, spriteDbId];
};
@@ -32,7 +60,7 @@ const cancelDialog = () => {
frameborder="0"
class="w-full h-full"
>
-
+
@@ -72,25 +100,10 @@ const cancelDialog = () => {
{{ $t("system.status") }}:
- {{
- device.full_name === "SmartSocket-AA001"
- ? "Error"
- : device.full_name === "SmartSocket-AA003" ||
- device.full_name === "SmartSocket-AA004"
- ? "Offline"
- : device.device_status || 'Online'
- }}
+ {{ getDeviceStatusText(device) }}