129 lines
3.6 KiB
Vue
129 lines
3.6 KiB
Vue
<script setup>
|
|
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")
|
|
const { getCurrentInfoModalData } = inject("system_selectedDevice")
|
|
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
|
|
|
|
const asset_floor_chart = ref(null);
|
|
const sameOption = {
|
|
type: "effectScatter",
|
|
coordinateSystem: "geo",
|
|
geoIndex: 0,
|
|
encode: {
|
|
tooltip: 2,
|
|
},
|
|
}
|
|
const defaultOption = (map, data = []) => {
|
|
return {
|
|
animation: false,
|
|
tooltip: {},
|
|
geo: {
|
|
tooltip: {
|
|
show: false,
|
|
},
|
|
map,
|
|
roam: true, // 一定要关闭拖拽
|
|
},
|
|
series: [
|
|
{
|
|
...sameOption,
|
|
symbolSize: 10,
|
|
itemStyle: {
|
|
color: data?.[0]?.[3]?.device_normal_color || "#009100",
|
|
},
|
|
data,
|
|
},
|
|
{
|
|
...sameOption,
|
|
symbolSize: 20,
|
|
itemStyle: {
|
|
color: data?.[0]?.[3]?.device_normal_color || "#009100",
|
|
},
|
|
data: [],
|
|
}
|
|
],
|
|
}
|
|
|
|
};
|
|
|
|
const { selectedFloor } = useSelectedFloor()
|
|
|
|
const allData = ref([])
|
|
|
|
watch([selectedFloor, () => asset_floor_chart,], ([newValue, newChart], [oldValue]) => {
|
|
if (newValue && newChart.value && oldValue?.key !== newValue.key && newValue.map_url) {
|
|
asset_floor_chart.value.updateSvg(
|
|
{
|
|
full_name: newValue?.title,
|
|
path: `${FILE_BASEURL}/${newValue.map_url}`,
|
|
},
|
|
|
|
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])
|
|
getCurrentInfoModalData(params.event, {
|
|
left: params.event.offsetX
|
|
, top: params.event.offsetY
|
|
}, params.data[2])
|
|
|
|
let values = [...subscribeData.value].map(d => ({ ...d, is2DActive: d.forge_dbid === params.data[2].forge_dbid }))
|
|
subscribeData.value = values;
|
|
|
|
const selected = allData.value.filter((d => d[2].device_number === params.data[2].device_number))
|
|
const unSelected = allData.value.filter((d => d[2].device_number !== params.data[2].device_number))
|
|
newChart.value.chart.setOption({
|
|
series: [
|
|
{ data: unSelected }, {
|
|
data: selected,
|
|
}
|
|
]
|
|
})
|
|
|
|
});
|
|
|
|
|
|
}
|
|
}, {
|
|
immediate: true,
|
|
deep: true,
|
|
})
|
|
|
|
watch(subscribeData, (newData) => {
|
|
let values = newData?.filter(d => d.device_coordinate && d.floor_guid === route.params.floor_id).map(d => [...d.device_coordinate.split(","), d])
|
|
allData.value = values;
|
|
if (selectedFloor.value && asset_floor_chart.value && asset_floor_chart.value.chart) {
|
|
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,
|
|
}
|
|
]
|
|
})
|
|
console.log(asset_floor_chart.value.chart.getOption())
|
|
}
|
|
}, {
|
|
immediate: true,
|
|
deep: true,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- <Loading class="absolute" /> -->
|
|
<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>
|
|
|
|
<style lang='scss' scoped></style>
|