完成走航融合模块

riku

2025-04-17 9ca85dc3bd39864daf9528d746f4bc6a0963a4c0

 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>