<template>
|
<CardDialog
|
v-model="dialogVisible"
|
title="网格信息"
|
draggable
|
:modal="false"
|
width="300px"
|
>
|
<template #default>
|
<div v-if="data">
|
<DescriptionsList>
|
<DescriptionsListItem
|
label="网格编号"
|
:content="data.gridCell.cellIndex"
|
/>
|
<DescriptionsListItem
|
label="经纬度"
|
:content="data.gridCell.longitude + ', ' + data.gridCell.latitude"
|
/>
|
<!-- <DescriptionsListItem label="四至范围" content="/" /> -->
|
</DescriptionsList>
|
|
<el-tabs v-model="activeName">
|
<el-tab-pane label="网格数据" name="first">
|
<DescriptionsList>
|
<DescriptionsListItem
|
label="VOC"
|
:content="data.gridDataDetail.voc + ' μg/m³'"
|
/>
|
<DescriptionsListItem
|
label="H2S"
|
:content="data.gridDataDetail.h2s + ' μg/m³'"
|
/>
|
<!-- <DescriptionsListItem label="NO" :content="data.gridDataDetail.no + ' μg/m³'" /> -->
|
<DescriptionsListItem
|
label="NO2"
|
:content="data.gridDataDetail.no2 + ' μg/m³'"
|
/>
|
<DescriptionsListItem
|
label="CO"
|
:content="data.gridDataDetail.co + ' μg/m³'"
|
/>
|
<DescriptionsListItem
|
label="SO2"
|
:content="data.gridDataDetail.so2 + ' μg/m³'"
|
/>
|
<DescriptionsListItem
|
label="O3"
|
:content="data.gridDataDetail.o3 + ' μg/m³'"
|
/>
|
<DescriptionsListItem
|
label="PM25"
|
:content="data.gridDataDetail.pm25 + ' μg/m³'"
|
/>
|
<DescriptionsListItem
|
label="PM10"
|
:content="data.gridDataDetail.pm10 + ' μg/m³'"
|
/>
|
<DescriptionsListItem
|
label="温度"
|
:content="data.gridDataDetail.temperature + ' ℃'"
|
/>
|
<DescriptionsListItem
|
label="湿度"
|
:content="data.gridDataDetail.humidity + ' %'"
|
/>
|
<DescriptionsListItem
|
label="风速"
|
:content="data.gridDataDetail.windSpeed + ' m/s'"
|
/>
|
<DescriptionsListItem
|
label="风向"
|
:content="data.gridDataDetail.windDirection + ' °'"
|
/>
|
</DescriptionsList>
|
</el-tab-pane>
|
<template v-if="data.gridDataDetail.mixData">
|
<el-tab-pane
|
v-for="(d, i) in data.gridDataDetail.originDataList"
|
:key="i"
|
:label="d.dataId"
|
:name="`origin-${i}`"
|
>
|
<DescriptionsList>
|
<DescriptionsListItem label="VOC" :content="d.voc + ' μg/m³'" />
|
<DescriptionsListItem label="H2S" :content="d.h2s + ' μg/m³'" />
|
<!-- <DescriptionsListItem label="NO" :content="d.no + ' μg/m³'" /> -->
|
<DescriptionsListItem label="NO2" :content="d.no2 + ' μg/m³'" />
|
<DescriptionsListItem label="CO" :content="d.co + ' μg/m³'" />
|
<DescriptionsListItem label="SO2" :content="d.so2 + ' μg/m³'" />
|
<DescriptionsListItem label="O3" :content="d.o3 + ' μg/m³'" />
|
<DescriptionsListItem
|
label="PM25"
|
:content="d.pm25 + ' μg/m³'"
|
/>
|
<DescriptionsListItem
|
label="PM10"
|
:content="d.pm10 + ' μg/m³'"
|
/>
|
<DescriptionsListItem
|
label="温度"
|
:content="d.temperature + ' ℃'"
|
/>
|
<DescriptionsListItem
|
label="湿度"
|
:content="d.humidity + ' %'"
|
/>
|
<DescriptionsListItem
|
label="风速"
|
:content="d.windSpeed + ' m/s'"
|
/>
|
<DescriptionsListItem
|
label="风向"
|
:content="d.windDirection + ' °'"
|
/>
|
</DescriptionsList>
|
</el-tab-pane>
|
</template>
|
</el-tabs>
|
</div>
|
</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 activeName = ref('first');
|
|
const data = computed(() => {
|
if (gridStore.selectedGridCellAndDataDetail) {
|
return {
|
gridCell: gridStore.selectedGridCellAndDataDetail.gridCell,
|
gridDataDetail: gridStore.selectedGridCellAndDataDetail.gridDataDetail,
|
extData: gridStore.selectedGridCellAndDataDetail.extData
|
};
|
} else {
|
return undefined;
|
}
|
});
|
|
watch(
|
() => gridStore.selectedGridCellAndDataDetail,
|
(nv, ov) => {
|
if (nv != ov) {
|
activeName.value = 'first';
|
dialogVisible.value = true;
|
}
|
},
|
{ deep: true }
|
);
|
</script>
|
<style scoped>
|
:deep(.el-tabs__item) {
|
color: rgba(221, 221, 221, 0.806);
|
}
|
:deep(.is-active) {
|
color: #f0ff1d;
|
}
|
</style>
|
