<template>
|
<CardDialog
|
v-model="dialogVisible"
|
title="网格信息"
|
draggable
|
:modal="false"
|
width="300px"
|
>
|
<template #default>
|
<DescriptionsList v-if="data">
|
<DescriptionsListItem label="网格编号" :content="data.cellIndex" />
|
<DescriptionsListItem
|
label="经纬度"
|
:content="data.longitude + ', ' + data.latitude"
|
/>
|
<DescriptionsListItem label="PM2.5" :content="data.pm25 + ' μg/m³'" />
|
<DescriptionsListItem label="四至范围" content="/" />
|
</DescriptionsList>
|
</template>
|
<template #footer> </template>
|
</CardDialog>
|
</template>
|
<script setup>
|
import { ref, watch, computed } from 'vue';
|
import { useGridStore } from '@/stores/grid-info';
|
|
const gridStore = useGridStore();
|
|
const dialogVisible = ref(false);
|
|
const data = computed(() => {
|
if (gridStore.selectedGridCellAndDataDetail) {
|
return {
|
cellIndex: gridStore.selectedGridCellAndDataDetail.gridCell.cellIndex,
|
longitude: gridStore.selectedGridCellAndDataDetail.gridCell.longitude,
|
latitude: gridStore.selectedGridCellAndDataDetail.gridCell.latitude,
|
pm25: gridStore.selectedGridCellAndDataDetail.gridDataDetail.pm25
|
};
|
} else {
|
return {
|
cellIndex: '/',
|
longitude: '/',
|
latitude: '/',
|
pm25: '/'
|
};
|
}
|
});
|
|
watch(
|
() => gridStore.selectedGridCellAndDataDetail,
|
(nv, ov) => {
|
if (nv != ov) {
|
dialogVisible.value = true;
|
}
|
},
|
{ deep: true }
|
);
|
</script>
|
