中医地域图谱获取数据bug

杨磊

2024-06-06 97bf10af44f4f289dbca8349bf22cd9b0d508272

 src/pages/territory/territory.vue

@@ -4,7 +4,7 @@
    <headNav :idIndex="idIndex" text="中医地域医谱" style="z-index: 999" />
    <view
      class="flex flex-center"
      style="width: 100%; margin: 0.2rem 0 0.34rem; justify-content: flex-start"
      style="width: 100%; margin: 20px 0 34px; justify-content: flex-start"
    >
      <advancedSearch
        class="Search"
@@ -14,7 +14,7 @@
        :keyword="keyword"
      />
      <ul class="flex">
        <li style="" v-for="(item, index) in dynasty" :key="item.id">
        <li v-for="(item, index) in dynasty" :key="item.id">
          <view
            @click="SchoolClick(item.id)"
            class="flex flex-center font-family school"
@@ -113,7 +113,7 @@
    </el-card>
    <!-- echarts里面的数据点击后弹框 -->

    <div class="mapBox">
    <div class="mapBox" id="mapBox" v-loading="mapLoading">
      <div id="map"></div>
      <el-card
        class="box-card echartsTrue"
@@ -220,14 +220,14 @@
import { loadBMap } from "@/static/map.js";
import L from "leaflet";
import "leaflet.chinatmsproviders";

import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import { getRetrieval, getDynasty } from "@/api/index.js";
import { getRetrieval, getDynasty, getPreCount } from "@/api/index.js";
export default {
  data() {
    return {
      loading: true,
      mapLoading: true,
      // echarts元素点击时出来的弹窗和坐标
      keyword: "",
      isEchTrue: false,
@@ -418,72 +418,148 @@
      const item = this.markerList.find((f) => f.id == info.id);
      var latlng = L.latLng(item.yCoord, item.xCoord);
      this.map.setView(latlng, 10);
      this.isEchTrue = true;
      this.currentMark = {
        name: item?.WEAK_NAME[0]?.content1,
        nikeName: item?.ALIAS[0]?.content2,
        nativePlace: item?.content1,
        barnch: item?.MEDICAL_BRANCH[0]?.content1,
        medical: item?.MEDICAL_EXPERTISE[0]?.content1,
      };
      this.$nextTick(() => {
        this.isTop = "12%";
        this.isLeft = "41.1%";
      });
      setTimeout(() => {
        this.isEchTrue = true;
        this.currentMark = {
          name: item?.WEAK_NAME[0]?.content1,
          nikeName: item?.ALIAS[0]?.content2,
          nativePlace: item?.content1,
          barnch: item?.MEDICAL_BRANCH[0]?.content1,
          medical: item?.MEDICAL_EXPERTISE[0]?.content1,
        };
        this.$nextTick(() => {
          this.isTop =
            document.getElementById("mapBox").offsetHeight / 2 - 275 + "px";
          this.isLeft =
            document.getElementById("mapBox").offsetWidth / 2 - 171 + "px";
        });
      }, 300);
    },
    getDataList() {
      this.SearchArr = [];
      this.loading = true;
      this.mapLoading = true;
      // 这里改成了分页的接口，需要调用多次取出所有数据
      let times = 0;
      getPreCount({
        keyword: this.keyword,
        dynasty: this.dynasty1Color,
      }).then(async (res) => {
        const totalCount = res.object;
        console.log(totalCount, "totalCount");
        if (totalCount % 200 == 0) {
          times = totalCount / 200 - 1;
        } else {
          times = Math.floor(totalCount / 200);
        }
        console.log(times, "times");
        if (times == 0 || times < 0) times = 1;
        let markerList = [];
        for (let i = 1; i <= times; i++) {
          const curData = await this.getDataPageInfo(i);
          if (curData) {
            markerList = [...markerList, ...curData];
          }
          if (i == times) {
            console.log(markerList, "markerList");
            this.initMap(markerList);
            this.SearchArr = markerList.map((item) => ({
              birthAndDeath: item?.BIRTH_YEAR[0]?.content1
                ? item?.BIRTH_YEAR[0]?.content1 +
                  "-" +
                  item?.DEATH_YEAR[0]?.content1
                : "-",
              name: item?.NAME[0]?.content1,
              source: "-",
              id: item.id,
            }));
            this.markerList = markerList;
            this.loading = false;
            this.mapLoading = false;
          }
        }
      });

      // 问题：
      // 搜索结果不对
      // 点击地图标点出现弹框，拖动地图时应关闭弹框

      getRetrieval({
        keyword: this.keyword,
        dynasty: this.dynasty1Color,
        page: 1,
        pageSize: 1000,
      }).then((res) => {
        this.loading = false;
        if (res.object) {
          let markerList = [];
          const listData = res.object.personList;
          for (let i = 0; i < listData.length; i++) {
            const item = listData[i];
            if (item.NATIVE_PLACE?.length > 0) {
              item.NATIVE_PLACE.forEach((citem) => {
                if (citem.xCoord && citem.yCoord) {
                  const currentDynasty = this.dynasty1.find(
                    (f) => f.id == item.PERIOD[0].content1
                  );
                  if (currentDynasty) {
                    item.dynastyInfo = currentDynasty;
                  }
                  markerList.push({ ...citem, ...item });
                }
              });
            }
          }
          this.initMap(markerList);
          this.SearchArr = markerList.map((item) => ({
            birthAndDeath: item?.BIRTH_YEAR[0]?.content1
              ? item?.BIRTH_YEAR[0]?.content1 +
                "-" +
                item?.DEATH_YEAR[0]?.content1
              : "-",
            name: item?.NAME[0]?.content1,
            source: "-",
            id: item.id,
          }));
          this.markerList = markerList;
        } else {
          this.initMap([]);
        }
      });
      // getRetrieval({
      //   keyword: this.keyword,
      //   dynasty: this.dynasty1Color,
      //   page: 1,
      //   pageSize: 200,
      // }).then((res) => {
      //   this.loading = false;
      //   if (res.object) {
      //     let markerList = [];
      //     const listData = res.object.personList;
      //     for (let i = 0; i < listData.length; i++) {
      //       const item = listData[i];
      //       if (item.NATIVE_PLACE?.length > 0) {
      //         item.NATIVE_PLACE.forEach((citem) => {
      //           if (citem.xCoord && citem.yCoord) {
      //             const currentDynasty = this.dynasty1.find(
      //               (f) => f.id == item.PERIOD[0].content1
      //             );
      //             if (currentDynasty) {
      //               item.dynastyInfo = currentDynasty;
      //             }
      //             markerList.push({ ...citem, ...item });
      //           }
      //         });
      //       }
      //     }
      //     this.initMap(markerList);
      //     this.SearchArr = markerList.map((item) => ({
      //       birthAndDeath: item?.BIRTH_YEAR[0]?.content1
      //         ? item?.BIRTH_YEAR[0]?.content1 +
      //           "-" +
      //           item?.DEATH_YEAR[0]?.content1
      //         : "-",
      //       name: item?.NAME[0]?.content1,
      //       source: "-",
      //       id: item.id,
      //     }));
      //     this.markerList = markerList;
      //   } else {
      //     this.initMap([]);
      //   }
      // });
    },

    async getDataPageInfo(count) {
      const res = await getRetrieval({
        keyword: this.keyword,
        dynasty: this.dynasty1Color,
        page: count,
        pageSize: 200,
      });
      if (res.object) {
        let markerList = [];
        const listData = res.object.personList;
        for (let i = 0; i < listData.length; i++) {
          const item = listData[i];
          if (item.NATIVE_PLACE?.length > 0) {
            item.NATIVE_PLACE.forEach((citem) => {
              if (citem.xCoord && citem.yCoord) {
                const currentDynasty = this.dynasty1.find(
                  (f) => f.id == item.PERIOD[0].content1
                );
                if (currentDynasty) {
                  item.dynastyInfo = currentDynasty;
                }
                markerList.push({ ...citem, ...item });
              }
            });
          }
        }

        return markerList;
      } else {
        return [];
      }
    },
    onMapMoveEnd() {
      console.log("地图拖动了");
      this.isEchTrue = false;
@@ -567,25 +643,18 @@
            icon: icon,
          }).addTo(map);
          temp_mark.on("click", (e) => {
            console.log(e, "123123");
            this.isEchTrue = true;
            this.currentMark = {
              name: item?.WEAK_NAME[0]?.content1,
              nikeName: item?.ALIAS[0]?.content2,
              nativePlace: item?.content1,
              barnch: item?.MEDICAL_BRANCH[0]?.content1,
              medical: item?.MEDICAL_EXPERTISE[0]?.content1,
            };
            this.$nextTick(() => {
              this.isTop =
                e.containerPoint.y -
                document.querySelector(".echartsTrue").offsetHeight +
                "px";
              this.isLeft =
                e.containerPoint.x -
                document.querySelector(".echartsTrue").offsetWidth +
                "px";
            });
            setTimeout(() => {
              this.isEchTrue = true;
              this.currentMark = {
                name: item?.WEAK_NAME[0]?.content1,
                nikeName: item?.ALIAS[0]?.content2,
                nativePlace: item?.content1,
                barnch: item?.MEDICAL_BRANCH[0]?.content1,
                medical: item?.MEDICAL_EXPERTISE[0]?.content1,
              };
              this.isTop = e.containerPoint.y - 275 + "px";
              this.isLeft = e.containerPoint.x - 171 + "px";
            }, 300);
          });
        }
      }