地域图谱显示小传-

杨磊

2024-06-12 db966eb618d50a472fa6d882445eda2912be3c62

 src/pages/territory/territory.vue

@@ -104,6 +104,7 @@
            {{ item.birthAndDeath ? item.birthAndDeath : "-" }}
          </li>
          <li>来源: {{ item.source ? item.source : "-" }}</li>
          <li>籍贯: {{ item.nativPlace ? item.nativPlace : "-" }}</li>
          <li
            v-if="SearchArr.length - 1 !== index"
            style="margin: 0.1rem 0; border-bottom: 1px solid #d8d8d8"
@@ -147,7 +148,12 @@
            籍贯: {{ currentMark.nativePlace ? currentMark.nativePlace : "-" }}
          </li>
          <li>医学分科: {{ currentMark.barnch ? currentMark.barnch : "-" }}</li>
          <li>小传: {{ currentMark.medical ? currentMark.medical : "-" }}</li>
          <li
            class="medicalLi"
            :title="currentMark.medical ? currentMark.medical : '-'"
          >
            小传: {{ currentMark.medical ? currentMark.medical : "-" }}
          </li>
        </ul>
        <el-button
          class="flex"
@@ -222,7 +228,12 @@
import "leaflet.chinatmsproviders";
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import { getRetrieval, getDynasty, getPreCount } from "@/api/index.js";
import {
  getRetrieval,
  getDynasty,
  getPreCount,
  getDynastyData,
} from "@/api/index.js";
export default {
  data() {
    return {
@@ -407,29 +418,38 @@
    this.getDynastyList();

    this.getDataList();
    this.getHaveDataDynasty();
  },
  methods: {
    getHaveDataDynasty() {
      getDynastyData().then((res) => {
        console.log(res, "getHaveDataDynasty");
      });
    },
    getDynastyList() {
      getDynasty().then((res) => {
        this.dynasty1 = res.list;
        console.log("dynasty1", res.list);
      });
    },
    showCard(info) {
      const item = this.markerList.find((f) => f.id == info.id);
      console.log(item, "item");
      var latlng = L.latLng(item.yCoord, item.xCoord);
      this.map.setView(latlng, 10);
      setTimeout(() => {
        this.isEchTrue = true;
        this.currentMark = {
          name: item?.WEAK_NAME[0]?.content1,
          name: item?.NAME[0]?.content1,
          nikeName: item?.ALIAS[0]?.content2,
          nativePlace: item?.content1,
          barnch: item?.MEDICAL_BRANCH[0]?.content1,
          medical: item?.MEDICAL_EXPERTISE[0]?.content1,
          medical: item?.BIOGRAPHY,
          id: item.id,
        };
        this.$nextTick(() => {
          this.isTop =
            document.getElementById("mapBox").offsetHeight / 2 - 275 + "px";
            document.getElementById("mapBox").offsetHeight / 2 - 295 + "px";
          this.isLeft =
            document.getElementById("mapBox").offsetWidth / 2 - 171 + "px";
        });
@@ -446,7 +466,6 @@
        dynasty: this.dynasty1Color,
      }).then(async (res) => {
        const totalCount = res.object;
        console.log(totalCount, "totalCount");
        if (totalCount % 200 == 0) {
          times = totalCount / 200 - 1;
        } else {
@@ -460,9 +479,72 @@
          if (curData) {
            markerList = [...markerList, ...curData];
          }
          if (i == times) {
            console.log(markerList, "markerList");
          if (i == 1) {
            this.loading = false;
            this.mapLoading = false;
            this.markerList = markerList;
            this.initMap(markerList);
          } else {
            if (curData && curData.length) {
              for (let j = 0; j < curData.length; j++) {
                const ele = curData[j];
                let currentClassName = "map-circle-name";
                if (ele.dynastyInfo) {
                  switch (ele.dynastyInfo.dynastyChs) {
                    case "夏":
                      currentClassName = "map-circle-xia";
                      break;
                    case "商":
                      currentClassName = "map-circle-shang";
                      break;
                    case "西周":
                      currentClassName = "map-circle-zhou";
                      break;
                    case "秦":
                      currentClassName = "map-circle-qin";
                      break;
                    case "汉":
                      currentClassName = "map-circle-han";
                      break;
                    case "隋":
                      currentClassName = "map-circle-sui";
                      break;
                    case "唐":
                      currentClassName = "map-circle-tang";
                      break;
                    case "明":
                      currentClassName = "map-circle-ming";
                      break;
                  }
                }
                let icon = L.divIcon({
                  html: `<div class='${currentClassName} ripple'></div>`,
                  iconSize: [80, 80],
                  className: "map-circle",
                });
                const temp_mark = L.marker([ele.yCoord, ele.xCoord], {
                  icon: icon,
                }).addTo(this.map);
                temp_mark.on("click", (e) => {
                  setTimeout(() => {
                    this.isEchTrue = true;
                    this.currentMark = {
                      name: ele?.NAME[0]?.content1,
                      nikeName: ele?.ALIAS[0]?.content2,
                      nativePlace: ele?.content1,
                      barnch: ele?.MEDICAL_BRANCH[0]?.content1,
                      medical: ele?.BIOGRAPHY,
                      id: ele.id,
                    };
                    this.isTop = e.containerPoint.y - 295 + "px";
                    this.isLeft = e.containerPoint.x - 171 + "px";
                  }, 300);
                });
              }
            }
          }

          if (i == times) {
            this.SearchArr = markerList.map((item) => ({
              birthAndDeath: item?.BIRTH_YEAR[0]?.content1
                ? item?.BIRTH_YEAR[0]?.content1 +
@@ -471,11 +553,11 @@
                : "-",
              name: item?.NAME[0]?.content1,
              source: "-",
              nativPlace: item?.NATIVE_PLACE[0].content1,
              id: item.id,
            }));
            this.markerList = markerList;
            this.loading = false;
            this.mapLoading = false;
            // this.initMap(markerList);
          }
        }
      });
@@ -588,6 +670,13 @@
          minZoom: 3,
        })
        .addTo(map);
      L.tileLayer
        .chinaProvider("TianDiTu.Normal.Annotion", {
          key: "76bc34ead7e30e663a4eded8aeaf5860",
          maxZoom: 18,
          minZoom: 3,
        })
        .addTo(map);
      let DefaultIcon1 = L.icon({
        iconUrl: this.icoName,
        iconSize: [24, 41], //  图标的大小    【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
@@ -601,9 +690,9 @@
        className: "map-circle",
      });
      this.map = map;
      if (markerList.length) {
        for (let i = 0; i < markerList.length; i++) {
          const item = markerList[i];
      if (this.markerList.length) {
        for (let i = 0; i < this.markerList.length; i++) {
          const item = this.markerList[i];
          let currentClassName = "map-circle-name";
          if (item.dynastyInfo) {
            switch (item.dynastyInfo.dynastyChs) {
@@ -650,9 +739,10 @@
                nikeName: item?.ALIAS[0]?.content2,
                nativePlace: item?.content1,
                barnch: item?.MEDICAL_BRANCH[0]?.content1,
                medical: item?.MEDICAL_EXPERTISE[0]?.content1,
                medical: item?.BIOGRAPHY,
                id: item.id,
              };
              this.isTop = e.containerPoint.y - 275 + "px";
              this.isTop = e.containerPoint.y - 295 + "px";
              this.isLeft = e.containerPoint.x - 171 + "px";
            }, 300);
          });
@@ -677,7 +767,7 @@
    // 查看更多>>
    viewMoreClick() {
      uni.navigateTo({
        url: "/pages/character/detail",
        url: "/pages/character/detail?id=" + this.currentMark.id,
      });
    },
  },
@@ -893,18 +983,27 @@
  animation: ripple-animation 1s infinite linear;
}

@keyframes ripple-animation {
/* @keyframes ripple-animation {
  to {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}
} */

::v-deep .cleanupBtn{
::v-deep .cleanupBtn {
  right: 60px !important;
}

::v-deep .widget_input{
::v-deep .widget_input {
  min-width: 240px !important;
}

.medicalLi {
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>