1

YM

2024-06-05 bdddcb1dca5c692316edd8231395283e8de9f910

1

 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,12 +14,12 @@
        :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"
            :style="{
              marginRight: index === dynasty.length - 1 ? '0' : '0.03rem',
              marginRight: index === dynasty.length - 1 ? '0' : '0.03rem'
            }"
            style="
              font-weight: 500;
@@ -113,7 +113,7 @@
    </el-card>
    <!-- echarts里面的数据点击后弹框 -->

    <div class="mapBox">
    <div class="mapBox" id="mapBox">
      <div id="map"></div>
      <el-card
        class="box-card echartsTrue"
@@ -204,7 +204,7 @@
            "
            :style="{
              marginRight: index === dynasty1.length - 1 ? '0' : '0.03rem',
              background: dynasty1Color == item.id ? '#244A7B' : '#597AA5',
              background: dynasty1Color == item.id ? '#244A7B' : '#597AA5'
            }"
          >
            {{ item.dynastyChs }}
@@ -237,25 +237,25 @@
      information: [
        {
          label: "姓名",
          content: "李时珍",
          content: "李时珍"
        },
        {
          label: "别名",
          content: "东丽先生",
          content: "东丽先生"
        },
        {
          label: "籍贯",
          content: "湖北",
          content: "湖北"
        },
        {
          label: "医学分科",
          content: "中药,针灸",
          content: "中药,针灸"
        },
        {
          label: "小传",
          content:
            "李时珍(约1518年~1593 年)， 字东璧， 晚年自号濒湖山人， 湖广黄州府薪州(今湖北省薪春县) 人， 明代著名医药学家。 与“ 医圣” 万密斋齐名， 古有“ 万密斋的方， 李时珍的药” 之说。 后为楚干府...",
        },
            "李时珍(约1518年~1593 年)， 字东璧， 晚年自号濒湖山人， 湖广黄州府薪州(今湖北省薪春县) 人， 明代著名医药学家。 与“ 医圣” 万密斋齐名， 古有“ 万密斋的方， 李时珍的药” 之说。 后为楚干府..."
        }
      ],
      // 下面的朝代1
      dynasty1Color: "",
@@ -263,78 +263,78 @@
        {
          name: "夏朝",
          coord: "2070BC",
          id: 1,
          id: 1
        },
        {
          name: "商朝",
          id: 2,
          coord: "1600BC",
          coord: "1600BC"
        },
        {
          name: "西周",
          id: 3,
          coord: "1600BC",
          coord: "1600BC"
        },
        {
          name: "春秋战国",
          id: 4,
          coord: "770BC",
          coord: "770BC"
        },
        {
          name: "秦朝",
          id: 5,
          coord: "221BC",
          coord: "221BC"
        },
        {
          name: "汉朝",
          id: 6,
          coord: "202BC",
          coord: "202BC"
        },
        {
          name: "三国两晋南北朝",
          id: 7,
          coord: "184",
          coord: "184"
        },
        {
          name: "隋朝",
          id: 8,
          coord: "581",
          coord: "581"
        },
        {
          name: "唐朝",
          id: 9,
          coord: "618",
          coord: "618"
        },
        {
          name: "五代十国",
          id: 10,
          coord: "907",
          coord: "907"
        },
        {
          name: "辽夏金",
          id: 11,
          coord: "907",
          coord: "907"
        },
        {
          name: "宋朝",
          id: 12,
          coord: "960",
          coord: "960"
        },
        {
          name: "元朝",
          id: 13,
          coord: "1271",
          coord: "1271"
        },
        {
          name: "明朝",
          id: 14,
          coord: "1368",
          coord: "1368"
        },
        {
          name: "清朝",
          id: 15,
          coord: "1636",
        },
          coord: "1636"
        }
      ],
      // 标题顶部栏需要的东西
      idIndex: 0,
@@ -343,43 +343,43 @@
        {
          name: "夏",
          color: "#90BBD8",
          id: 1,
          id: 1
        },
        {
          name: "商",
          color: "#EDD28B",
          id: 2,
          id: 2
        },
        {
          name: "西周",
          color: "#CF746D",
          id: 3,
          id: 3
        },
        {
          name: "秦",
          color: "#9CC27A",
          id: 4,
          id: 4
        },
        {
          name: "汉",
          color: "#5B6CB9",
          id: 5,
          id: 5
        },
        {
          name: "隋",
          color: "#8860A8",
          id: 6,
          id: 6
        },
        {
          name: "唐",
          color: "#DE8E66",
          id: 7,
          id: 7
        },
        {
          name: "明",
          color: "#DE8E66",
          id: 8,
        },
          id: 8
        }
      ],
      // 搜索后是否显示弹框
      isSearch: false,
@@ -389,15 +389,15 @@
          id: 1,
          name: "李时珍",
          birthAndDeath: "1518-1593",
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北",
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北"
        },
        {
          id: 2,
          name: "李时珍",
          birthAndDeath: "1518-1593",
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北",
        },
      ],
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北"
        }
      ]
    };
  },
  onLoad(options) {
@@ -418,18 +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);
      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 = [];
@@ -444,7 +448,7 @@
        keyword: this.keyword,
        dynasty: this.dynasty1Color,
        page: 1,
        pageSize: 1000,
        pageSize: 1000
      }).then((res) => {
        this.loading = false;
        if (res.object) {
@@ -475,7 +479,7 @@
              : "-",
            name: item?.NAME[0]?.content1,
            source: "-",
            id: item.id,
            id: item.id
          }));
          this.markerList = markerList;
        } else {
@@ -497,7 +501,7 @@
      }
      var map = L.map("map", {
        preferCanvas: true,
        attributionControl: false,
        attributionControl: false
      }).setView([34.3227, 108.5525], 5);
      map.on("moveend", this.onMapMoveEnd);
      map.on("zoomend", function () {
@@ -509,20 +513,20 @@
        .chinaProvider("TianDiTu.Normal.Map", {
          key: "76bc34ead7e30e663a4eded8aeaf5860",
          maxZoom: 18,
          minZoom: 3,
          minZoom: 3
        })
        .addTo(map);
      let DefaultIcon1 = L.icon({
        iconUrl: this.icoName,
        iconSize: [24, 41], //  图标的大小    【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
        iconAnchor: [24, 41], //  图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
        popupAnchor: [1, -24], // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
        popupAnchor: [1, -24] // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
      });

      let icon = L.divIcon({
        html: "<div class='map-circle-name '></div>",
        iconSize: [80, 80],
        className: "map-circle",
        className: "map-circle"
      });
      this.map = map;
      if (markerList.length) {
@@ -561,31 +565,24 @@
          let icon = L.divIcon({
            html: `<div class='${currentClassName} ripple'></div>`,
            iconSize: [80, 80],
            className: "map-circle",
            className: "map-circle"
          });
          const temp_mark = L.marker([item.yCoord, item.xCoord], {
            icon: icon,
            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);
          });
        }
      }
@@ -608,10 +605,10 @@
    // 查看更多>>
    viewMoreClick() {
      uni.navigateTo({
        url: "/pages/character/detail",
        url: "/pages/character/detail"
      });
    },
  },
    }
  }
};
</script>