1

YM

2024-06-05 bdddcb1dca5c692316edd8231395283e8de9f910

 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"
@@ -112,54 +112,58 @@
      </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" id="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"
@@ -414,6 +418,22 @@
      const item = this.markerList.find((f) => f.id == info.id);
      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,
          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 = [];
@@ -467,9 +487,14 @@
        }
      });
    },

    onMapMoveEnd() {
      console.log("地图拖动了");
      this.isEchTrue = false;
    },
    //初始化地图
    initMap(markerList) {
      console.log(markerList,'markerList');
      console.log(markerList, "markerList");
      this.isEchTrue = false;
      if (this.map) {
        this.map.remove();
@@ -477,8 +502,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",
@@ -541,24 +571,18 @@
            icon: icon
          }).addTo(map);
          temp_mark.on("click", (e) => {
            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 / 2 +
                "px";
              this.isLeft =
                e.containerPoint.x -
                document.querySelector(".echartsTrue").offsetWidth / 2 +
                "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);
          });
        }
      }
@@ -665,6 +689,7 @@
  /* 右边透明 */
  border-top: 0.2rem solid #fff;
  /* 顶部红色 */
  z-index: 999;
}

::v-deep .el-card__header {
@@ -763,6 +788,12 @@
  margin-left: 0.19rem;
}

.mapBox {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
#map {
  height: 100%;
  width: 100%;