toid-client/src/views/statistics/Spatiotemporal-distribution/index.vue

<template>
  <div class="spatiotemporal-distribution">
    <!-- 筛选条件 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="form" size="small">
        <el-form-item label="病原体名称">
          <!-- <el-input
            v-model="form.bytName"
            placeholder="请输入病原体名称"
            style="width: 180px"
            @keyup.enter="fetchAllData"
          /> -->
          <el-select
            v-model="form.bytName"
            filterable
            remote
            reserve-keyword
            placeholder="请输入病原体名称"
            :remote-method="queryInfo"
            :loading="loading"
            @change="handleSelect"
            style="flex: 1"
          >
            <el-option
              v-for="item in Assoptions"
              :key="item.id"
              :label="item.asmName"
              :value="item.asmName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="form.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 240px"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchAllData">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="charts-container">
      <!-- 子图二：分区条形图 -->
      <el-card class="chart-card">
        <div slot="header">地区分布条形图</div>
        <div ref="barChart" style="height: 320px"></div>
      </el-card>
    </div>

    <!-- 地图容器 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="map-card">
          <div slot="header">世界地图</div>
          <div ref="worldMapContainer" style="width: 100%; height: 600px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="map-card">
          <div slot="header">中国地图</div>
          <div ref="chinaMapContainer" style="width: 100%; height: 600px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import chinaJson from "echarts/map/json/china.json";
import worldJson from "echarts/map/json/world.json";

import {
  getbytzbInfo,
  getbytzzfbnfo,
  getsjbytztqkInfo,
  getzgbytztqkInfo,
  getAssemblyAccessionList,
} from "@/api/statistics/report";

echarts.registerMap("china", chinaJson);
echarts.registerMap("world", worldJson);

export default {
  name: "SpatiotemporalDistribution",
  data() {
    return {
      filters: {
        disease: "",
        subtype: "",
        branch: "",
        dateRange: [],
        region: [],
      },
      diseaseOptions: [],
      diseaseLoading: false,
      subtypeOptions: [],
      branchOptions: [],
      regionOptions: [],
      growthData: [],
      barData: [],
      pieData: [],
      worldMapData: [],
      chinaMapData: [],
      description: "",
      barChart: null,
      worldMapChart: null,
      chinaMapChart: null,
      form: {
        bytName: "",
        endDate: "",
        province: "",
        startDate: "",
        dateRange: [],
      },
      Assoptions: [],
      AssTimer: null,
      loading: false,
    };
  },
  mounted() {
    // this.fetchAllData();
    // 延迟初始化，确保容器尺寸正确
    this.$nextTick(() => {
      this.initCharts();
    });
  },
  methods: {
    // 搜索
    queryInfo(queryString) {
      if (this.ASSTimer) {
        clearTimeout(this.ASSTimer);
      }
      this.ASSTimer = setTimeout(() => {
        if (queryString.length > 0) {
          this.loading = true;
          getAssemblyAccessionList(queryString)
            .then((res) => {
              console.log("查询基因组序列编号", res);
              if (res.data && res.data.length > 0) {
                this.Assoptions = res.data;
              }
              this.loading = false;
            })
            .finally(() => {
              this.loading = false;
            });
        }
      }, 500);
    },
    handleSelect() {
      if (this.form.bytName) {
        this.fetchAllData();
      }
    },
    async fetchAllData() {
      if (this.form.dateRange.length > 0) {
        const [startDate, endDate] = this.form.dateRange;
        this.form.startDate = startDate;
        this.form.endDate = endDate;
      }

      // 获取数据
      try {
        const response2 = await getbytzzfbnfo(this.form);
        const response3 = await getsjbytztqkInfo(this.form);
        const response4 = await getzgbytztqkInfo(this.form);
        this.barData = response2.data;
        this.worldMapData = response3.data;
        this.chinaMapData = response4.data;
      } catch (error) {
        console.error("获取数据失败:", error);
        this.$message.error("获取数据失败，请稍后重试");
      }

      this.renderCharts();
    },
    initCharts() {
      this.barChart = echarts.init(this.$refs.barChart);
      this.worldMapChart = echarts.init(this.$refs.worldMapContainer);
      this.chinaMapChart = echarts.init(this.$refs.chinaMapContainer);
      window.addEventListener("resize", () => {
        this.barChart.resize();
        this.worldMapChart.resize();
        this.chinaMapChart.resize();
      });
    },
    renderCharts() {
      // 子图二：分区条形图
      const regions =
        this.barData.length > 0
          ? Object.keys(this.barData[0]).filter((key) => key !== "day")
          : [];
      const dates = this.barData.map((item) => item.day);

      const seriesData = regions.map((region) => ({
        name: region,
        type: "bar",
        data: this.barData.map((item) => item[region]),
      }));

      this.barChart.setOption({
        // 添加动画效果
        animationDuration: 1000,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: regions,
        },
        xAxis: {
          type: "category",
          data: dates,
          // 优化 x 轴线样式
          axisLine: {
            lineStyle: {
              color: "#999",
            },
          },
          // 优化 x 轴刻度线样式
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          name: "数量",
        },
        series: seriesData,
      });

      // 处理世界地图数据
      const processedWorldMapData = this.worldMapData.map((item) => {
        // const name = worldRegionMap[item.area] || item.area;
        const value = item.num || 0;
        return {
          name: item.eng,
          value,
          cnName: item.area,
        };
      });
      // 处理中国地图数据
      const processedChinaMapData = this.chinaMapData.map((item) => {
        // const name = chinaRegionMap[item.area] || item.area;
        const value = item.num || 0;
        return {
          name: item.area,
          value,
        };
      });

      // 检查数据是否为空
      if (processedWorldMapData.every((item) => item.value === 0)) {
        console.warn("世界地图数据值全部为 0");
      }
      if (processedChinaMapData.every((item) => item.value === 0)) {
        console.warn("中国地图数据值全部为 0");
      }

      // 世界地图配置
      this.worldMapChart.setOption({
        title: { text: "全球病毒分布", left: "center" },
        tooltip: {
          trigger: "item",
          formatter: (p) =>
            `${p.data?.cnName || p.data?.name}<br/>数量: ${p.value || "-"}`,
        },
        visualMap: {
          min: Math.min(...processedWorldMapData.map((item) => item.value)),
          max: Math.max(...processedWorldMapData.map((item) => item.value)),
          left: "left",
          top: "bottom",
          text: ["高", "低"],
          calculable: true,
          inRange: {
            color: ["#ffeeee", "#ffcccc", "#ff9999", "#ff6666", "#ff3333"],
          },
        },
        // geo: {
        //   map: 'world',
        //   roam: true,
        //   label: { show: false },
        //   itemStyle: {
        //     areaColor: '#f0f0f0',
        //     borderColor: '#999'
        //   },
        //   emphasis: {
        //     itemStyle: {
        //       areaColor: '#e0e0e0'
        //     }
        //   }
        // },
        series: [
          {
            type: "map",
            map: "world",
            data: processedWorldMapData,
            label: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                areaColor: "#e0e0e0",
              },
            },
          },
        ],
      });

      // 中国地图配置
      this.chinaMapChart.setOption({
        title: { text: "中国病毒分布", left: "center" },
        tooltip: {
          trigger: "item",
          formatter: (p) => `${p.name}<br/>数量: ${p.value || "-"}`,
        },
        visualMap: {
          min: Math.min(...processedChinaMapData.map((item) => item.value)),
          max: Math.max(...processedChinaMapData.map((item) => item.value)),
          left: "left",
          top: "bottom",
          text: ["高", "低"],
          calculable: true,
          inRange: {
            color: ["#ffeeee", "#ffcccc", "#ff9999", "#ff6666", "#ff3333"],
          },
        },
        // geo: {
        //   map: 'china',
        //   roam: true,
        //   label: { show: false },
        //   itemStyle: {
        //     areaColor: '#f0f0f0',
        //     borderColor: '#999'
        //   },
        //   emphasis: {
        //     itemStyle: {
        //       areaColor: '#e0e0e0'
        //     }
        //   }
        // },
        series: [
          {
            type: "map",
            map: "china",
            data: processedChinaMapData,
            label: {
              show: false,
            },
            emphasis: {
              itemStyle: {
                areaColor: "#e0e0e0",
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
.spatiotemporal-distribution {
  padding: 16px;
}
.filter-card {
  margin-bottom: 16px;
}
.charts-container {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.chart-card {
  flex: 1;
  min-width: 0;
}
.map-card {
  margin-bottom: 16px;
}
.desc-card {
  margin-bottom: 16px;
}
.desc-text {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}
</style>