63 lines
1.5 KiB
Vue
63 lines
1.5 KiB
Vue
<script setup>
|
|
import { useRoute } from 'vue-router';
|
|
import EffectScatter from "@/components/chart/EffectScatter.vue";
|
|
import { inject, ref, watch } from 'vue';
|
|
import { twMerge } from 'tailwind-merge';
|
|
const route = useRoute()
|
|
|
|
const { currentFloor, subscribeData } = inject("system_deviceList")
|
|
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
|
|
|
|
const asset_floor_chart = ref(null);
|
|
const defaultOption = (map, data = []) => ({
|
|
tooltip: {},
|
|
geo: {
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
map,
|
|
roam: true, // 一定要关闭拖拽
|
|
},
|
|
series: {
|
|
type: "effectScatter",
|
|
coordinateSystem: "geo",
|
|
geoIndex: 0,
|
|
symbolSize: 10,
|
|
itemStyle: {
|
|
color: "#b02a02",
|
|
},
|
|
encode: {
|
|
tooltip: 2,
|
|
},
|
|
data,
|
|
},
|
|
});
|
|
|
|
watch([() => currentFloor, () => asset_floor_chart], ([newValue, newChart]) => {
|
|
if (newValue.value && newChart.value) {
|
|
asset_floor_chart.value.updateSvg(
|
|
{
|
|
full_name: newValue.value?.title,
|
|
path: `${FILE_BASEURL}/${newValue.value.map_url}`,
|
|
},
|
|
|
|
defaultOption(newValue.value?.title, subscribeData.value.filter(d => d.device_coordinate).map(d => JSON.parse(d.device_coordinate)))
|
|
);
|
|
|
|
}
|
|
}, {
|
|
immediate: true,
|
|
deep: true,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<EffectScatter id="system_floor_chart" ref="asset_floor_chart" :class="twMerge(
|
|
currentFloor?.key ? 'opacity-100' : 'opacity-0'
|
|
)
|
|
" />
|
|
<!-- <div class="text-lg" v-if="!currentFloor?.key">尚未上傳樓層平面圖</div> -->
|
|
</template>
|
|
|
|
<style lang='scss' scoped></style>
|