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

Merge branch 'feature/system'

Browse Source
This commit is contained in:
WIN-VB61HI6M32L\Administrator 2024-10-22 15:38:43 +08:00
commit acf083a10b
13 changed files with 272 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -1,3 +1,3 @@
VITE_API_BASEURL = "https://192.168.0.206:8060"
VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
VITE_FILE_API_BASEURL = "https://cgems.cvilux-group.com:8088"
VITE_FORGE_BASEURL = "http://localhost:5173"

4
.env.production
View File

@ -1,3 +1,3 @@
VITE_API_BASEURL = "https://192.168.0.206:8060"
VITE_FILE_API_BASEURL = "https://cgems.cvilux-group.com:8088"
VITE_API_BASEURL = "https://ibms-cvilux-api.production.mjmtech.com.tw"
VITE_FILE_API_BASEURL = "https://ibms-cvilux.production.mjmtech.com.tw"
VITE_FORGE_BASEURL = "http://202.39.218.221:8080/file/netzero"

12
src/components/forge/ForgeForSystem.vue
View File

@ -33,7 +33,7 @@ const updateHeatBarIsShow = (isShow) => {
heat_bar_isShow.value = isShow;
};
const { updateDataVisualization, createSprites, hideAllObjects } = useForgeSprite()
const { updateDataVisualization, createSprites, hideAllObjects, forgeClickListener } = useForgeSprite()
const forgeDom = ref(null);
@ -162,9 +162,13 @@ const initForge = async () => {
"Autodesk.Viewing.GEOMETRY_LOADED_EVENT",
viewer.isLoadDone()
);
// updateForgeViewer(viewer);
// createSprites()
hideAllObjects();
if (viewer.isLoadDone()) {
// updateForgeViewer(viewer);
hideAllObjects();
createSprites();
forgeClickListener();
}
})
};

108
src/components/navbar/NavbarItem.vue
View File

@ -18,9 +18,9 @@ const iniFroList = async () => {
res.data.map((d) =>
AUTHPAGES.find(({ authCode }) => authCode === d.authCode)
? {
...d,
...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
}
...d,
...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
}
: d
)
);
@ -71,85 +71,38 @@ onMounted(() => {
<template>
<ul class="px-1 menu-box my-2">
<li class="flex flex-col items-center justify-center">
<router-link
:to="{ name: 'dashboard' }"
class="flex flex-col justify-center items-center btn-group text-white"
>
<font-awesome-icon
:icon="['fas', 'home']"
size="2x"
class="w-10 m-auto"
/>
<router-link :to="{ name: 'dashboard' }" class="flex flex-col justify-center items-center btn-group text-white">
<font-awesome-icon :icon="['fas', 'home']" size="2x" class="w-10 m-auto" />
{{ $t("home") }}
</router-link>
</li>
<li
v-for="page in authPages"
class="flex flex-col items-center justify-center"
>
<a
v-if="page.authCode === 'PF1'"
@click="showDrawer"
class="flex flex-col justify-center items-center btn-group text-white cursor-pointer"
>
<font-awesome-icon
:icon="['fas', page.icon]"
size="2x"
class="w-10 m-auto"
/>
<li v-for="page in authPages" class="flex flex-col items-center justify-center">
<a v-if="page.authCode === 'PF1'" @click="showDrawer"
class="flex flex-col justify-center items-center btn-group text-white cursor-pointer">
<font-awesome-icon :icon="['fas', page.icon]" size="2x" class="w-10 m-auto" />
{{ page.subName }}
</a>
<router-link
v-else
:to="page.navigate"
type="link"
class="flex flex-col justify-center items-center btn-group text-white"
>
<font-awesome-icon
:icon="['fas', page.icon]"
size="2x"
class="w-10 m-auto"
/>
<router-link v-else :to="page.navigate" type="link"
class="flex flex-col justify-center items-center btn-group text-white">
<font-awesome-icon :icon="['fas', page.icon]" size="2x" class="w-10 m-auto" />
{{ page.subName }}
</router-link>
</li>
</ul>
<a-drawer
:width="250"
placement="left"
:open="open"
:closable="false"
@close="onClose"
class="sub-drawer"
:maskStyle="{ opacity: 0 }"
:bodyStyle="{ paddingLeft: 0, paddingRight: 0 }"
>
<a-menu
mode="inline"
theme="dark"
class="text-lg bg-transparent"
:openKeys="openKeys"
@openChange="handleOpenChange"
>
<a-sub-menu
v-for="main in buildingStore.mainSubSys"
:key="main.main_system_tag"
:title="main.full_name"
>
<a-menu-item
v-for="sub in main.history_Sub_systems"
:key="sub.sub_system_tag"
@click="() => onClose()"
>
<router-link
:to="{
name: 'sub_system',
params: {
main_system_id: main.main_system_tag,
sub_system_id: sub.sub_system_tag,
},
}"
>
<a-drawer :width="250" placement="left" :open="open" :closable="false" @close="onClose" class="sub-drawer"
:maskStyle="{ opacity: 0 }" :bodyStyle="{ paddingLeft: 0, paddingRight: 0 }">
<a-menu mode="inline" theme="dark" class="text-lg bg-transparent" :openKeys="openKeys"
@openChange="handleOpenChange">
<a-sub-menu v-for="main in buildingStore.mainSubSys" :key="main.main_system_tag" :title="main.full_name">
<a-menu-item v-for="sub in main.history_Sub_systems" :key="sub.sub_system_tag" @click="() => onClose()">
<router-link :to="{
name: 'sub_system',
params: {
main_system_id: main.main_system_tag,
sub_system_id: sub.sub_system_tag,
floor_id: 'main'
},
}">
{{ sub.full_name }}
</router-link>
</a-menu-item>
@ -166,17 +119,20 @@ onMounted(() => {
color: #35759d !important;
background-color: transparent !important;
}
:deep(.ant-menu-item:not(.ant-menu-item-selected)) {
:deep .ant-menu-item:not(.ant-menu-item-selected) {
&::before {
@apply absolute w-[15px] h-[15px] bottom-3.5 left-7 bg-no-repeat z-10 grayscale;
content: "";
background: url(@ASSET/img/chart-data-background03.svg) center center;
}
&:active {
background-color: transparent !important;
}
}
:deep(.ant-menu-item-selected) {
:deep .ant-menu-item-selected {
@apply bg-transparent relative;
&::before {
@ -184,9 +140,11 @@ onMounted(() => {
content: "";
background: url(@ASSET/img/chart-data-background03.svg) center center;
}
&:active {
background-color: transparent !important;
}
a {
color: #89d2ff !important;
text-shadow: 0px 0px 1px #fff;

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

@ -1,6 +1,8 @@
import { watch, inject, markRaw, ref } from "vue";
import { watch, inject, markRaw, ref, computed } from "vue";
import useAlarmStore from "@/stores/useAlarmStore";
import hexToRgb from "@/util/hexToRgb";
import { useRoute } from "vue-router";
import useSelectedFloor from "@/hooks/useSelectedFloor";
export default function useForgeSprite() {
const store = useAlarmStore();
@ -12,7 +14,7 @@ export default function useForgeSprite() {
forgeViewer.value = markRaw(viewer);
}
const dataVisualization = await NOP_VIEWER.loadExtension(
const dataVisualization = await viewer.loadExtension(
"Autodesk.DataVisualization"
);
dataVizExtn.value = markRaw(dataVisualization);
@ -20,41 +22,78 @@ export default function useForgeSprite() {
const onSpriteClicked = (event) => {
event.hasStopped = true;
const data = deviceList.value.find((d) => d.spriteDbId === event.dbId);
modalContent.value = data;
store.getDbIdStore(data.forge_dbid);
toggleModal(event.originalEvent);
console.log("onSpriteClicked", event);
// const data = deviceList.value.find((d) => d.spriteDbId === event.dbId);
// modalContent.value = data;
};
const { selectedFloor } = useSelectedFloor();
const showData = computed(() =>
selectedFloor.value?.key === "main"
? subscribeData.value
: subscribeData.value.filter(
({ floor_guid }) => floor_guid === selectedFloor.value?.key
) || []
);
// 創建 sprites
const createSprites = async () => {
const DataVizCore = Autodesk.DataVisualization.Core;
const viewableType = DataVizCore.ViewableType.SPRITE;
let spriteColor = new THREE.Color(0xffffff);
const BASEURL = import.meta.env.VITE_FORGE_BASEURL;
const spriteIconUrl = `${BASEURL}/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
subscribeData.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));
const viewable = new DataVizCore.SpriteViewable(
position,
style,
d.spriteDbId
);
viewableData.addViewable(viewable);
}
});
await viewableData.finish();
dataVizExtn.value.addViewables(viewableData);
if (dataVizExtn.value) {
dataVizExtn.value.removeAllViewables();
const DataVizCore = Autodesk.DataVisualization.Core;
const viewableType = DataVizCore.ViewableType.SPRITE;
let spriteColor = new THREE.Color(0xffffff);
const BASEURL = import.meta.env.VITE_FORGE_BASEURL;
const spriteIconUrl = `${BASEURL}/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
showData.value?.forEach((d, index) => {
if (d.device_coordinate_3d) {
console.log(d.device_coordinate_3d);
const position = d.device_coordinate_3d;
style.color = new THREE.Color(hexToRgb(d.device_normal_color));
const viewable = new DataVizCore.SpriteViewable(
position,
style,
d.spriteDbId
);
viewableData.addViewable(viewable);
}
});
// await viewableData.finish();
// dataVizExtn.value.addViewables(viewableData);
// console.log(dataVizExtn.value);
viewableData.finish().then(
() => {
dataVizExtn.value.addViewables(viewableData);
},
(error) => {
console.log(error);
}
);
}
};
forgeViewer.value.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);
watch(
() => showData,
() => {
forgeViewer.value?.isLoadDone() && createSprites();
},
{
deep: true,
}
);
const forgeClickListener = () => {
forgeViewer.value.addEventListener(
Autodesk.DataVisualization.Core.MOUSE_CLICK,
onSpriteClicked
);
forgeViewer.value.addEventListener(
Autodesk.Viewing.SELECTION_CHANGED_EVENT,
onSpriteClicked
@ -99,5 +138,6 @@ export default function useForgeSprite() {
createSprites,
updateDataVisualization,
hideAllObjects,
forgeClickListener,
};
}

17
src/hooks/useSelectedFloor.js Normal file
View File

@ -0,0 +1,17 @@
import { useRoute } from "vue-router";
import { computed, inject, ref, watch } from "vue";
function useSelectedFloor() {
const { currentFloor } = inject("system_deviceList");
const route = useRoute();
const selectedFloor = computed(() =>
currentFloor.value?.find(({ key }) => key == route.params.floor_id)
);
return {
selectedFloor,
currentFloor,
};
}
export default useSelectedFloor;

7
src/router/index.js
View File

@ -38,15 +38,10 @@ const router = createRouter({
component: System,
children: [
{
path: "",
path: ":floor_id",
name: "sub_system",
component: SystemMain,
},
{
path: "floor/:floor_id",
name: "floor",
component: SystemFloor,
},
],
},
{

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

@ -7,6 +7,10 @@ import ForgeForSystem from "@/components/forge/ForgeForSystem.vue";
import { getSystemDevices, getSystemRealTime } from "@/apis/system";
import SystemSubBar from './components/SystemSubBar.vue';
import SystemInfoModal from './components/SystemInfoModal.vue';
import SystemMain from "./SystemMain.vue";
import SystemMode from './components/SystemMode.vue';
import SystemFloor from './SystemFloor.vue';
import { twMerge } from 'tailwind-merge';
const buildingStore = useBuildingStore()
@ -41,7 +45,7 @@ const getData = async () => {
forge_dbid: parseInt(dev.forge_dbid),
device_coordinate_3d: dev.device_coordinate_3d
? JSON.parse(dev.device_coordinate_3d)
: { x: 0, y: 0 },
: null,
alarmMsg: "",
is_show: true,
currentColor: dev.device_normal_point_color,
@ -79,13 +83,18 @@ watch(raw_data, (newValue) => {
});
const updateDataByGas = (gas) => {
console.log(`updateDataByGas`, gas)
const update_values = raw_data.value.map((d) => (
{
...d,
device_list: d.device_list.filter(({ points }) => points.some(({ points: p }) => p === gas))
}
))
let update_values = []
if (gas === "all") {
update_values = raw_data.value
} else {
update_values = raw_data.value.map((d) => (
{
...d,
device_list: d.device_list.filter(({ points }) => points.some(({ points: p }) => p === gas))
}
))
}
data.value = update_values
subscribeData.value = getSubData(update_values);
}
@ -98,8 +107,8 @@ watch(() => buildingStore.selectedBuilding, (newBuilding) => {
deep: true,
})
watch(route, (newRoute, oldRoute) => {
if (buildingStore.selectedBuilding && newRoute.params.sub_system_id !== oldRoute?.params.sub_system_id) {
watch(() => route.params.sub_system_id, (newRoute, oldRoute) => {
if (buildingStore.selectedBuilding && newRoute !== oldRoute) {
getData()
}
})
@ -190,12 +199,18 @@ provide("system_selectedDevice", { selectedDeviceRealtime, selectedDevice, getCu
</div>
<SystemSubBar class="mt-2 mb-4" />
</div>
<div class="h-full max-h-[75vh] pr-2 overflow-y-auto relative">
<div class="h-full max-h-[75vh] pr-2 overflow-y-auto">
<RouterView />
</div>
</div>
<div class="col-span-1 h-full">
<ForgeForSystem :initialData="{}" />
<div class="col-span-1 h-full flex flex-col justify-between">
<SystemMode />
<div class="min-h-[75vh] relative">
<SystemFloor v-show="route.query.mode === '2D'" />
<div :class="twMerge('absolute h-full w-full', route.query.mode === '3D' ? 'opacity-100' : 'opacity-0')">
<ForgeForSystem :initialData="{}" />
</div>
</div>
</div>
</div>

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

@ -3,6 +3,8 @@ import { useRoute } from 'vue-router';
import EffectScatter from "@/components/chart/EffectScatter.vue";
import { computed, inject, ref, watch } from 'vue';
import { twMerge } from 'tailwind-merge';
import useSelectedFloor from "@/hooks/useSelectedFloor"
const route = useRoute()
const { currentFloor, subscribeData } = inject("system_deviceList")
@ -34,17 +36,17 @@ const defaultOption = (map, data = []) => ({
},
});
const selectedFloor = computed(() => currentFloor.value?.find(({ key }) => key == route.params.floor_id))
const { selectedFloor } = useSelectedFloor()
watch([selectedFloor, () => asset_floor_chart, subscribeData], ([newValue, newChart, newData]) => {
if (newValue && newChart.value) {
watch([selectedFloor, () => asset_floor_chart,], ([newValue, newChart], [oldValue]) => {
if (newValue && newChart.value && oldValue?.key !== newValue.key) {
asset_floor_chart.value.updateSvg(
{
full_name: newValue?.title,
path: `${FILE_BASEURL}/${newValue.map_url}`,
},
defaultOption(newValue?.title, newData.filter(d => d.device_coordinate && d.floor_guid === route.params.floor_id).map(d => [...d.device_coordinate.split(","), d]))
defaultOption(newValue?.title, subscribeData.value.filter(d => d.device_coordinate && d.floor_guid === route.params.floor_id).map(d => [...d.device_coordinate.split(","), d]))
);
newChart.value.chart.on("click", function (params) {
console.log(params, params.data[2])
@ -58,14 +60,25 @@ watch([selectedFloor, () => asset_floor_chart, subscribeData], ([newValue, newCh
immediate: true,
deep: true,
})
watch(subscribeData, (newData) => {
if (selectedFloor.value && asset_floor_chart.value) {
asset_floor_chart.value.chart.setOption({
series: {
data: newData.filter(d => d.device_coordinate && d.floor_guid === route.params.floor_id).map(d => [...d.device_coordinate.split(","), d]),
},
})
}
}, {
immediate: true,
deep: true,
})
</script>
<template>
<Loading class="absolute" />
<EffectScatter id="system_floor_chart" ref="asset_floor_chart" :class="twMerge('absolute z-50',
selectedFloor?.key ? 'opacity-100 bg-white' : 'opacity-0'
)
" />
<!-- <Loading class="absolute" /> -->
<EffectScatter id="system_floor_chart" ref="asset_floor_chart" class="min-h-[75vh] bg-white" />
<!-- <div class="text-lg" v-if="!currentFloor?.key">尚未上傳樓層平面圖</div> -->
</template>

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

@ -1,17 +1,26 @@
<script setup>
import { inject } from "vue"
import { computed, inject, watch } from "vue"
import useSelectedFloor from "@/hooks/useSelectedFloor"
const { data } = inject("system_deviceList")
const { getCurrentInfoModalData } = inject("system_selectedDevice")
const { selectedFloor } = useSelectedFloor()
const showData = computed(() => selectedFloor.value?.key === 'main' ? data.value : data.value.filter(({ floor_guid }) => floor_guid === selectedFloor.value?.key) || [])
watch(selectedFloor, (newValue) => {
console.log(newValue)
})
</script>
<template>
<!-- <InfoModal :data="currentInfoModalData" /> -->
<template v-if="data.length > 0">
<div class="equipment-show" v-for="d in data" :key="d.full_name">
<template v-if="showData.length > 0">
<div class="equipment-show" v-for="d in showData" :key="d.full_name">
<template v-if="d.device_list.length > 0">
<p class="title">{{ d.full_name }}</p>
<div class="grid grid-cols-3 gap-5">

21
src/views/system/components/SystemFloorBar.vue
View File

@ -19,7 +19,7 @@ const getFloors = async () => {
{
title: "All",
key: "main",
active: route.params.floor_id ? false : true,
active: route.params.floor_id === "main",
},
...data.floors.map((d, idx) => ({
title: d.full_name,
@ -36,20 +36,11 @@ const getFloors = async () => {
const onClick = (item) => {
changeActiveBtn(item)
if (item.key == "main") {
router.push({
name: 'sub_system', params: {
...route.params
}, query: { gas: route.query.gas }
})
} else {
router.push({
name: 'floor', params: {
...route.params, floor_id: item.key
}, query: { gas: route.query.gas }
})
}
router.push({
name: 'sub_system', params: {
...route.params, floor_id: item.key
}, query: { ...route.query, gas: route.query.gas }
})
}

47
src/views/system/components/SystemMode.vue Normal file
View File

@ -0,0 +1,47 @@
<script setup>
import useActiveBtn from "@/hooks/useActiveBtn"
import useSearchParam from "@/hooks/useSearchParam"
import ButtonConnectedGroup from "@/components/customUI/ButtonConnectedGroup.vue";
import { onMounted, watch } from "vue";
import { useRoute } from "vue-router"
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
const route = useRoute()
const { changeParams, searchParams } = useSearchParam();
watch(selectedBtn, (newValue) => {
console.log(newValue)
newValue && changeParams({ ...searchParams.value, mode: newValue.key })
}, {
deep: true,
immediate: true,
})
watch(() => route.params, (newValue, oldValue) => {
if (newValue.sub_system_id && newValue.floor_id) {
setItems([{
title: "2D",
key: "2D",
active: route.query.mode === "2D",
disabled: newValue.floor_id === "main"
}, {
title: "3D",
key: "3D",
active: route.query.mode === "3D" || !route.query.mode
}])
}
}, {
immediate: true,
})
</script>
<template>
<ButtonConnectedGroup :items="items" className="btn-xs rounded-md mb-5"
:onclick="(e, item) => changeActiveBtn(item)" />
</template>
<style lang='scss' scoped></style>

29
src/views/system/components/SystemSubBar.vue
View File

@ -11,24 +11,39 @@ const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
const route = useRoute()
watch(() => buildingStore, (newValue) => {
newValue.selectedSystem?.points?.length > 0 && setItems(newValue.selectedSystem.points.map(d => ({
title: d.full_name,
key: d.points,
active: route.query.gas ? route.query.gas === d.points : d.points === "Temp",
})))
newValue.selectedSystem?.points?.length > 0 && setItems([
{
title: "All",
key: "all",
active: route.query.gas === "all" || !route.query.gas,
},
...newValue.selectedSystem.points.map(d => ({
title: d.full_name,
key: d.points,
active: route.query.gas === d.points,
}))
])
}, {
deep: true,
immediate: true
})
const { changeParams } = useSearchParam();
const { changeParams, searchParams } = useSearchParam();
const onClick = (item) => {
changeParams({ gas: item.key })
changeActiveBtn(item)
updateDataByGas(item.key)
}
watch(selectedBtn, (newValue) => {
console.log(newValue)
newValue && changeParams({ ...searchParams.value, gas: newValue.key })
}, {
deep: true,
immediate: true,
})
</script>
<template>