<template>
|
<CardDialog
|
v-model="dialogVisible"
|
title="网格信息"
|
draggable
|
:modal="false"
|
width="300px"
|
>
|
<template #default>
|
<el-form
|
:inline="false"
|
ref="formRef"
|
label-position="right"
|
label-width="100px"
|
>
|
<el-form-item label="网格编号：">
|
<div>
|
{{ data.cellIndex }}
|
</div>
|
</el-form-item>
|
<el-form-item label="经纬度：">
|
<div>
|
{{ data.longitude + ', ' + data.latitude }}
|
</div>
|
</el-form-item>
|
<el-form-item label="PM2.5：">
|
<div>
|
{{ data.pm25 + ' μg/m³' }}
|
</div>
|
</el-form-item>
|
<el-form-item label="四至范围：">
|
<div>/</div>
|
</el-form-item>
|
</el-form>
|
</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>
|
