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

系統監控: 熱圖修改多篩選、2D圖路徑有才讀、系統小卡圖示圖片顯示

Browse Source
This commit is contained in:
koko 2024-11-08 10:51:33 +08:00
parent 5cb8e7da6e
commit f95f4cee85
6 changed files with 28 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -12,11 +12,11 @@
<title>Cvilux EMS</title>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
<script type="text/javascript" src="/requirejs/config.js"></script>
<script
<!-- <script type="text/javascript" src="/requirejs/config.js"></script> -->
<!-- <script
type="text/javascript"
src="/module/js/com/tridium/js/ext/require/require.min.js?"
></script>
></script> -->
</head>
<body>
<div id="app"></div>

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

@ -171,7 +171,7 @@ onMounted(() => {
<style lang="scss" scoped>
/**menu**/
.menu-box {
@apply flex flex-wrap lg:flex-row flex-col items-start lg:justify-center relative z-0 h-[100vh] lg:h-full w-60 lg:w-auto;
@apply flex flex-wrap lg:flex-row flex-col items-start lg:justify-center relative z-0 h-full w-60 lg:w-auto;
}
.menu-box .btn-group {

5
src/hooks/forge/useForgeHeatmap.js
View File

@ -55,7 +55,7 @@ export default function useForgeHeatmap() {
);
const createHeatMap = async () => {
if (!dataVizExtn.value) return;
if (route.query?.gas === "all" || !route.query?.gas || !dataVizExtn.value) return;
const heatMapName = `iot_heatmap_${route.query?.gas}`;
console.log("createHeatMap", heatMapName);
const {
@ -67,8 +67,7 @@ export default function useForgeHeatmap() {
const shadingGroup = new SurfaceShadingGroup(`${heatMapName}`);
const rooms = new Map();
const roomSet = new Set(data.value.map(({ room_dbid }) => room_dbid));
const roomSet = new Set(data.value.filter(({ device_coordinate_3d }) => device_coordinate_3d).map(({ room_dbid }) => room_dbid));
// 每個room是一個node
[...roomSet].forEach((roomDbId) => {
if (!roomDbId) {

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

@ -56,8 +56,8 @@ const getData = async () => {
building_tag: buildingStore.selectedBuilding?.building_tag,
})
const devices = res.data.map(d => ({
...d,
key: d.full_name,
...d,
key: d.full_name,
device_list: d.device_list.map((dev, index) => ({
...dev,
forge_dbid: parseInt(dev.forge_dbid),
@ -117,19 +117,17 @@ const updateDataByGas = (gas) => {
subscribeData.value = getSubData(update_values);
}
watch(() => buildingStore.selectedBuilding, (newBuilding) => {
if (Boolean(newBuilding)) {
getData()
watch(
[() => buildingStore.selectedBuilding, () => route.params.sub_system_id],
([newBuilding, newRoute], [oldBuilding, oldRoute]) => {
if (newBuilding && newRoute && newRoute !== oldRoute) {
getData();
}
}, {
},
{
deep: true,
})
watch(() => route.params.sub_system_id, (newRoute, oldRoute) => {
if (buildingStore.selectedBuilding && newRoute !== oldRoute) {
getData()
}
})
);
onMounted(() => {
getFloors();
@ -219,7 +217,7 @@ provide("system_selectedDevice", { selectedDeviceRealtime, selectedDevice, getCu
<SystemInfoModal :data="selectedDevice" />
<SystemFloorBar />
<div class="grid grid-cols-2 gap-5 mt-8 mb-4">
<div class="col-span-1 h-[79vh] flex flex-col justify-start">
<div class="col-span-1 h-[calc(100vh-170px)] flex flex-col justify-start">
<div>
<div class="flex mb-4 items-center">
<span class="flex items-center mr-3" v-if="statusList?.device_normal_text">

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

@ -53,7 +53,7 @@ return {
const { selectedFloor } = useSelectedFloor()
watch([selectedFloor, () => asset_floor_chart,], ([newValue, newChart], [oldValue]) => {
if (newValue && newChart.value && oldValue?.key !== newValue.key) {
if (newValue && newChart.value && oldValue?.key !== newValue.key && newValue.map_url) {
asset_floor_chart.value.updateSvg(
{
full_name: newValue?.title,
@ -76,7 +76,7 @@ watch([selectedFloor, () => asset_floor_chart,], ([newValue, newChart], [oldValu
})
watch(subscribeData, (newData) => {
if (selectedFloor.value && asset_floor_chart.value) {
if (selectedFloor.value && asset_floor_chart.value && asset_floor_chart.value.chart) {
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]),
@ -91,7 +91,7 @@ watch(subscribeData, (newData) => {
<template>
<!-- <Loading class="absolute" /> -->
<EffectScatter id="system_floor_chart" ref="asset_floor_chart" class="min-h-[75vh] bg-white" />
<EffectScatter id="system_floor_chart" ref="asset_floor_chart" class="min-h-full bg-white" />
<!-- <div class="text-lg" v-if="!currentFloor?.key">尚未上傳樓層平面圖</div> -->
</template>

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

@ -5,6 +5,7 @@ import useSystemShowData from "@/hooks/useSystemShowData"
const { getCurrentInfoModalData } = inject("system_selectedDevice")
const { showData } = useSystemShowData()
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const fitToView = (forge_dbid) => {
@ -27,7 +28,7 @@ const fitToView = (forge_dbid) => {
<div class="item h-full cursor-pointer" @click="() => fitToView(device.forge_dbid)">
<div class="left h-full flex flex-wrap justify-center">
<div class="sec02 w-full">
<img v-if="device.device_image_url" :src="device.device_image_url" alt="" >
<img v-if="device.device_image_url" :src="`${FILE_BASEURL}/upload/device_icon/${device.device_image}`" :alt="device.device_image" >
<span v-else></span>
<span>{{ device.full_name }}</span>
</div>
@ -112,6 +113,12 @@ const fitToView = (forge_dbid) => {
z-index: 1;
}
.equipment-show .item .sec02 img{
margin-right: 10px;
width: 2rem !important;
height: 2rem;
}
.equipment-show .item .sec02 span:nth-child(1) {
background-color: #31afdf;
border: 3px solid #fff;