From e895212fa4215c50ce79ce4b448e064caf394776 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 03 七月 2025 17:35:46 +0800
Subject: [PATCH] 2025.7.3 动态溯源（待完成）
---
src/components/grid/GridSearch.vue | 161 ++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 126 insertions(+), 35 deletions(-)
diff --git a/src/components/grid/GridSearch.vue b/src/components/grid/GridSearch.vue
index c9d90a6..406818d 100644
--- a/src/components/grid/GridSearch.vue
+++ b/src/components/grid/GridSearch.vue
@@ -7,31 +7,117 @@
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>
+ <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>
@@ -44,21 +130,17 @@
const dialogVisible = ref(false);
+const activeName = ref('first');
+
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
+ gridCell: gridStore.selectedGridCellAndDataDetail.gridCell,
+ gridDataDetail: gridStore.selectedGridCellAndDataDetail.gridDataDetail,
+ extData: gridStore.selectedGridCellAndDataDetail.extData
};
} else {
- return {
- cellIndex: '/',
- longitude: '/',
- latitude: '/',
- pm25: '/'
- };
+ return undefined;
}
});
@@ -66,9 +148,18 @@
() => 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>
--
Gitblit v1.9.3