Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary

YM

2024-06-05 2f20896b721a91bd08ae5e4b2988479101c7faa0

 src/pages/territory/territory.vue

@@ -33,7 +33,6 @@
            "
          >
            <view
              class=""
              :style="{ background: item.color }"
              style="
                margin-right: 0.07rem;
@@ -42,7 +41,7 @@
                border-radius: 50%;
              "
            ></view>
            <view class="" style="color: #2c2c2c; font-size: 0.12rem">{{
            <view style="color: #2c2c2c; font-size: 0.12rem">{{
              item.name
            }}</view>
          </view>
@@ -57,7 +56,7 @@
        height: 3.2rem;
        width: 3rem;
        position: fixed;
        z-index: 999999999999;
        z-index: 99;
        left: 1rem;
        top: 2.2rem;
      "
@@ -76,7 +75,21 @@
          >关闭</el-button
        >
      </div>
      <view class="" style="overflow: auto; height: 2.5rem">
      <view style="overflow: auto; height: 2.5rem">
        <div
          v-if="!loading && SearchArr.length == 0"
          style="
            position: absolute;
            top: 30%;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 0.2rem;
            color: #666;
          "
        >
          暂无搜索数据
        </div>
        <ul
          class="information"
          v-for="(item, index) in SearchArr"
@@ -99,58 +112,70 @@
      </view>
    </el-card>
    <!-- echarts里面的数据点击后弹框 -->
    <el-card
      class="box-card echartsTrue"
      v-show="isEchTrue"
      style="
        overflow: inherit;
        width: 3rem;
        position: fixed;
        z-index: 999999999999;
      "
      :style="{ top: isTop, left: isLeft }"
    >
      <div slot="header" class="clearfix">
        <span v-if="currentMark">{{
          currentMark.name ? currentMark.name : "-"
        }}</span>

    <div class="mapBox">
      <div id="map"></div>
      <el-card
        class="box-card echartsTrue"
        v-show="isEchTrue"
        style="overflow: inherit; width: 3rem; position: absolute; z-index: 999"
        :style="{ top: isTop, left: isLeft }"
      >
        <div slot="header" class="clearfix">
          <span v-if="currentMark">{{
            currentMark.name ? currentMark.name : "-"
          }}</span>
          <el-button
            style="
              float: right;
              padding: 3px 0;
              font-size: 0.12rem;
              color: #597aa5;
            "
            @click="isEchTrue = false"
            type="text"
            >关闭</el-button
          >
        </div>
        <ul class="information" v-if="currentMark">
          <li>
            姓名:
            {{ currentMark.name ? currentMark.name : "-" }}
          </li>
          <li>别名: {{ currentMark.nikeName ? currentMark.nikeName : "-" }}</li>
          <li>
            籍贯: {{ currentMark.nativePlace ? currentMark.nativePlace : "-" }}
          </li>
          <li>医学分科: {{ currentMark.barnch ? currentMark.barnch : "-" }}</li>
          <li>小传: {{ currentMark.medical ? currentMark.medical : "-" }}</li>
        </ul>
        <el-button
          class="flex"
          @click="viewMoreClick"
          style="
            float: right;
            width: 100%;
            padding: 3px 0;
            font-size: 0.12rem;
            color: #597aa5;
          "
          @click="isEchTrue = false"
          type="text"
          >关闭</el-button
          >查看更多>></el-button
        >
      </div>
      <ul class="information" v-if="currentMark">
        <li>
          姓名:
          {{ currentMark.name ? currentMark.name : "-" }}
        </li>
        <li>别名: {{ currentMark.nikeName ? currentMark.nikeName : "-" }}</li>
        <li>
          籍贯: {{ currentMark.nativePlace ? currentMark.nativePlace : "-" }}
        </li>
        <li>医学分科: {{ currentMark.barnch ? currentMark.barnch : "-" }}</li>
        <li>小传: {{ currentMark.medical ? currentMark.medical : "-" }}</li>
      </ul>
      <el-button
        class="flex"
        @click="viewMoreClick"
        style="width: 100%; padding: 3px 0; font-size: 0.12rem; color: #597aa5"
        type="text"
        >查看更多>></el-button
      >
    </el-card>
    <div id="map"></div>
      </el-card>
    </div>

    <!-- 朝代 -->
    <view
      class="flex flex-center"
      style="width: 100%; position: fixed; bottom: 0.33rem; left: 0"
      style="
        width: 100%;
        position: fixed;
        bottom: 0.33rem;
        left: 0;
        right: 0;
        z-index: 99;
        overflow: auto;
      "
    >
      <ul class="flex">
        <li
@@ -167,9 +192,10 @@
          <view
            class="flex flex-center font-family"
            style="
              padding: 0.05rem 0.19rem;
              min-width: 0.6rem;
              height: 0.3rem;
              line-height: 0.3rem;
              text-align: center;
              color: #fff;
              font-size: 0.14rem;
              margin-top: 0.03rem;
@@ -193,13 +219,15 @@
<script>
import { loadBMap } from "@/static/map.js";
import L from "leaflet";
import "leaflet.chinatmsproviders";

import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import "leaflet.chinatmsproviders";
import { getRetrieval, getDynasty } from "@/api/index.js";
export default {
  data() {
    return {
      loading: true,
      // echarts元素点击时出来的弹窗和坐标
      keyword: "",
      isEchTrue: false,
@@ -374,7 +402,6 @@
  },
  onLoad(options) {
    this.idIndex = options.id;
    console.log("optionsoptionsoptions", options.id);
  },
  mounted() {
    this.getDynastyList();
@@ -384,60 +411,86 @@
  methods: {
    getDynastyList() {
      getDynasty().then((res) => {
        console.log(res, "123123");
        this.dynasty1 = res.list;
      });
    },
    showCard(info) {
      console.log(info);
      console.log(this.markerList);
      console.log(this.map);
      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%";
      });
    },
    getDataList() {
      getRetrieval({ keyword: this.keyword, dynasty: this.dynasty1Color }).then(
        (res) => {
          if (res.object) {
            let markerList = [];
            const listData = res.object.personList;
            console.log(listData, "listData");
            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.SearchArr = [];
      this.loading = true;
      // 这里改成了分页的接口，需要调用多次取出所有数据

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

      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 });
                }
              });
            }
            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.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([]);
        }
      );
      });
    },

    onMapMoveEnd() {
      console.log("地图拖动了");
      this.isEchTrue = false;
    },
    //初始化地图
    initMap(markerList) {
      console.log(markerList, "markerList");
      this.isEchTrue = false;
      if (this.map) {
        this.map.remove();
@@ -445,8 +498,13 @@
      var map = L.map("map", {
        preferCanvas: true,
        attributionControl: false,
      }).setView([39.91667, 116.41667], 3);

      }).setView([34.3227, 108.5525], 5);
      map.on("moveend", this.onMapMoveEnd);
      map.on("zoomend", function () {
        var zoomLevel = map.getZoom(); // 获取当前地图的缩放级别
        console.log("当前地图缩放级别为:", zoomLevel);
        this.isEchTrue = false;
      });
      L.tileLayer
        .chinaProvider("TianDiTu.Normal.Map", {
          key: "76bc34ead7e30e663a4eded8aeaf5860",
@@ -462,7 +520,7 @@
      });

      let icon = L.divIcon({
        html: "<div class='map-circle-name'></div>",
        html: "<div class='map-circle-name '></div>",
        iconSize: [80, 80],
        className: "map-circle",
      });
@@ -471,34 +529,37 @@
        for (let i = 0; i < markerList.length; i++) {
          const item = markerList[i];
          let currentClassName = "map-circle-name";
          switch (item.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;
          if (item.dynastyInfo) {
            switch (item.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}'></div>`,
            html: `<div class='${currentClassName} ripple'></div>`,
            iconSize: [80, 80],
            className: "map-circle",
          });
@@ -506,6 +567,7 @@
            icon: icon,
          }).addTo(map);
          temp_mark.on("click", (e) => {
            console.log(e, "123123");
            this.isEchTrue = true;
            this.currentMark = {
              name: item?.WEAK_NAME[0]?.content1,
@@ -517,11 +579,11 @@
            this.$nextTick(() => {
              this.isTop =
                e.containerPoint.y -
                document.querySelector(".echartsTrue").offsetHeight / 2 +
                document.querySelector(".echartsTrue").offsetHeight +
                "px";
              this.isLeft =
                e.containerPoint.x -
                document.querySelector(".echartsTrue").offsetWidth / 2 +
                document.querySelector(".echartsTrue").offsetWidth +
                "px";
            });
          });
@@ -531,7 +593,6 @@

    // 点击下面的朝代按钮
    dynastyBottomClick(id) {
      console.log(id);
      this.dynasty1Color = id;
      this.getDataList();
    },
@@ -543,9 +604,7 @@
      this.getDataList();
    },
    // 点击上面的朝代按钮
    SchoolClick(id) {
      console.log(id);
    },
    SchoolClick(id) {},
    // 查看更多>>
    viewMoreClick() {
      uni.navigateTo({
@@ -633,6 +692,7 @@
  /* 右边透明 */
  border-top: 0.2rem solid #fff;
  /* 顶部红色 */
  z-index: 999;
}

::v-deep .el-card__header {
@@ -731,11 +791,43 @@
  margin-left: 0.19rem;
}

.mapBox {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
#map {
  height: 600px;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  font-size: 14px !important;
  /* z-index: -1 !important; */
  z-index: 10 !important;
}

::v-deep .ripple {
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}

::v-deep .ripple::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%; /* Ensure it covers the entire parent */
  height: 150%;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: ripple-animation 1s infinite linear;
}

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