ko.ko/CviLux_fe
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

2d圖預設與顯示 | 系統監控 : 根據realtime.value即時顯示狀態

Browse Source
This commit is contained in:
koko 2025-07-28 11:53:18 +08:00
parent e6939183fe
commit a7ed0340b7
7 changed files with 137 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/chart/EffectScatter.vue
View File

@ -1,6 +1,6 @@
<script setup>
import * as echarts from "echarts";
import { onMounted, ref, markRaw } from "vue";
import { onMounted, ref, markRaw, nextTick } from "vue";
import axios from "axios";
const props = defineProps({
@ -24,8 +24,9 @@ async function updateSvg(svg, option) {
} else {
clear();
}
axios.get(svg.path).then(({ data }) => {
axios.get(svg.path).then(async ({ data }) => {
echarts.registerMap(svg.full_name, { svg: data });
await nextTick();
chart.value.setOption(option);
if (props.getCoordinate) {
chart.value.getZr().on("click", function (params) {

46
src/hooks/forge/useForgeSprite.js
View File

@ -6,7 +6,7 @@ import useForgeHeatmap from "./useForgeHeatmap";
import useForgeFloor from "./useForgeFloor";
export default function useForgeSprite() {
const { subscribeData } = inject("system_deviceList");
const { subscribeData, realtimeData } = inject("system_deviceList");
const { getCurrentInfoModalData, clearSelectedDeviceInfo, selected_dbid } =
inject("system_selectedDevice");
const forgeViewer = ref(null);
@ -65,6 +65,23 @@ export default function useForgeSprite() {
const { flatSubData } = useSystemShowData();
// 根據設備取得即時狀態顏色
const getDeviceRealtimeColor = (d) => {
if (d.full_name === "SmartSocket-AA001") return "#ff0000";
if (
d.full_name === "SmartSocket-AA003" ||
d.full_name === "SmartSocket-AA004"
)
return "#888888";
const realtimeDevice = realtimeData?.value?.find(
(item) => item.device_number === d.device_number
);
const state = realtimeDevice?.state || "";
if (state === "offnormal" || state === "")
return d.device_close_color || "#999999";
return d.device_normal_color || "#009100";
};
// 創建 sprites
const createSprites = async () => {
if (dataVizExtn.value) {
@ -74,28 +91,25 @@ export default function useForgeSprite() {
let spriteColor = new THREE.Color(0xffffff);
const BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const spriteIconUrl = `${BASEURL}/dist/hotspot.svg`;
const style = new DataVizCore.ViewableStyle(
viewableType,
spriteColor,
spriteIconUrl
);
const viewableData = new DataVizCore.ViewableData();
viewableData.spriteSize = 24; // Sprites as points of size 24 x 24 pixels
flatSubData.value?.forEach((d, index) => {
if (d.device_coordinate_3d) {
const position = d.device_coordinate_3d;
style.color = new THREE.Color(hexToRgb(d.device_normal_color));
// 每個都 new 一個 style
const pointStyle = new DataVizCore.ViewableStyle(
viewableType,
new THREE.Color(hexToRgb(getDeviceRealtimeColor(d))),
spriteIconUrl
);
const viewable = new DataVizCore.SpriteViewable(
position,
style,
pointStyle,
d.spriteDbId
);
viewableData.addViewable(viewable);
}
});
// await viewableData.finish();
// dataVizExtn.value.addViewables(viewableData);
// console.log(dataVizExtn.value);
viewableData.finish().then(
() => {
dataVizExtn.value.addViewables(viewableData);
@ -107,6 +121,16 @@ export default function useForgeSprite() {
);
}
};
// 監聽 realtimeData 變化，重建 sprites
watch(
() => realtimeData?.value,
() => {
if (forgeViewer.value?.isLoadDone()) {
createSprites();
}
},
{ deep: true }
);
watch(
() => flatSubData,

6
src/views/dashboard/Dashboard.vue
View File

@ -18,7 +18,7 @@ const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
let intervalId = null;
const energyCostData = ref({});
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const imgBaseUrl = ref('');
const imgBaseUrl = ref("");
const formState = ref({
building_guid: null,
floor_guid: "all",
@ -35,7 +35,9 @@ watch(
(newBuilding) => {
if (newBuilding) {
formState.value.building_guid = newBuilding.building_guid;
imgBaseUrl.value = `${FILE_BASEURL}/upload/setting/previewImage/${newBuilding.building_guid}${store.previewImageExt}`;
imgBaseUrl.value = store.previewImageExt
? `${FILE_BASEURL}/upload/setting/previewImage/${newBuilding.building_guid}${store.previewImageExt}`
: "";
}
},
{ immediate: true, deep: true }

3
src/views/setting/components/ViewModeSetting.vue
View File

@ -3,6 +3,7 @@ import { onMounted, ref, inject, computed } from "vue";
import { useI18n } from "vue-i18n";
import { posttDashboard2D3D } from "@/apis/dashboard";
import useBuildingStore from "@/stores/useBuildingStore";
import { tr } from "date-fns/locale";
const { openToast, cancelToastOpen } = inject("app_toast");
const buildingStore = useBuildingStore();
@ -38,6 +39,8 @@ const onOk = async () => {
formData.append("is3DEnabled", formState.value.showForgeArea);
if (formState.value.lorf && formState.value.lorf.length > 0) {
formData.append("file", formState.value.lorf[0]);
}else {
formData.append("removePreviewImage", true);
}
const res = await posttDashboard2D3D(formData);
if (res.isSuccess) {

30
src/views/system/System.vue
View File

@ -1,6 +1,6 @@
<script setup>
import { RouterView, useRoute } from "vue-router";
import { computed, watch, provide, ref, onMounted, onBeforeUnmount } from "vue";
import { computed, watch, provide, ref, onMounted, onUnmounted } from "vue";
import SystemFloorBar from "./components/SystemFloorBar.vue";
import SystemDeptBar from "./components/SystemDeptBar.vue";
import useBuildingStore from "@/stores/useBuildingStore";
@ -42,7 +42,7 @@ const floors = ref([]);
const deptData = ref([]);
const companyOptions = ref([]);
const selected_dbid = ref([]);
const imgBaseUrl = ref('');
const imgBaseUrl = ref("");
const getFloors = async () => {
const res = await getAssetFloorList();
@ -130,7 +130,9 @@ watch(
(newBuilding) => {
if (Boolean(newBuilding)) {
getData();
imgBaseUrl.value = `${FILE_BASEURL}/upload/setting/previewImage/${newBuilding.building_guid}${buildingStore.previewImageExt}`;
imgBaseUrl.value = buildingStore.previewImageExt
? `${FILE_BASEURL}/upload/setting/previewImage/${newBuilding.building_guid}${buildingStore.previewImageExt}`
: "";
}
},
{
@ -173,7 +175,7 @@ const updateCurrentFloor = (floor) => {
};
const realtimeData = ref([]);
const timeId = ref(null);
let timeId = null;
const getAllDeviceRealtime = async () => {
// 立即執行一次
const fetchData = async () => {
@ -184,15 +186,22 @@ const getAllDeviceRealtime = async () => {
realtimeData.value = res.data;
};
await fetchData(); // 立即執行一次
if (timeId) {
clearInterval(timeId);
timeId = null;
}
// 然後設定每 10 秒更新一次
timeId.value = setInterval(fetchData, 10000);
timeId = setInterval(fetchData, 10 * 1000);
};
watch(
subscribeData,
(newValue) => {
timeId.value && clearInterval(timeId.value);
console.log("subscribeData changed:", newValue);
if (timeId) {
clearInterval(timeId);
}
newValue.length > 0 && getAllDeviceRealtime();
},
{ deep: true, immediate: true }
@ -273,8 +282,11 @@ provide("system_selectedDevice", {
deptData,
});
onBeforeUnmount(() => {
clearInterval(timeId.value);
onUnmounted(() => {
if (timeId) {
clearInterval(timeId);
timeId = null;
}
});
</script>

52
src/views/system/SystemFloor.vue
View File

@ -1,13 +1,13 @@
<script setup>
import { useRoute } from "vue-router";
import EffectScatter from "@/components/chart/EffectScatter.vue";
import { computed, inject, ref, watch } from "vue";
import { computed, inject, nextTick, ref, watch } from "vue";
import { twMerge } from "tailwind-merge";
import useSelectedFloor from "@/hooks/useSelectedFloor";
const route = useRoute();
const { currentFloor, subscribeData } = inject("system_deviceList");
const { currentFloor, subscribeData, realtimeData } = inject("system_deviceList");
const { getCurrentInfoModalData, selected_dbid } = inject(
"system_selectedDevice"
);
@ -22,6 +22,19 @@ const sameOption = {
tooltip: 2,
},
};
// 根據設備取得即時狀態顏色
const getDeviceRealtimeColor = (device) => {
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,32 @@ 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,
() => {
nextTick(() => {
if (
selectedFloor.value &&
asset_floor_chart.value &&
asset_floor_chart.value.chart
) {
asset_floor_chart.value.chart.setOption(
defaultOption(selectedFloor.value?.title, selectedData.value),
true
);
}
});
},
{ deep: true }
);
const { selectedFloor } = useSelectedFloor();

50
src/views/system/components/SystemCard.vue
View File

@ -5,11 +5,40 @@ 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 = import.meta.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 || 'gray';
return device.device_normal_color;
};
// 狀態文字
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];
};
@ -72,25 +101,10 @@ const cancelDialog = () => {
<div class="sec03">
<span
class="w-5 h-5 rounded-full"
:style="{
backgroundColor:
device.full_name === 'SmartSocket-AA001'
? 'red'
: device.full_name === 'SmartSocket-AA003' ||
device.full_name === 'SmartSocket-AA004'
? 'gray'
: device.device_normal_color,
}"
:style="{ backgroundColor: getDeviceStatusColor(device) }"
></span>
<span class="mx-2">{{ $t("system.status") }}:</span>
<span>{{
device.full_name === "SmartSocket-AA001"
? "Error"
: device.full_name === "SmartSocket-AA003" ||
device.full_name === "SmartSocket-AA004"
? "Offline"
: device.device_status || 'Online'
}}</span>
<span>{{ getDeviceStatusText(device) }}</span>
</div>
<button
class="btn-text border-0"