调整

YM

2024-05-27 0edf94722a0dcc338567fec7df76b2e0acd39b92

 src/pages/territory/territory.vue

@@ -19,7 +19,7 @@
            @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;
@@ -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>
@@ -76,7 +75,7 @@
          >关闭</el-button
        >
      </div>
      <view class="" style="overflow: auto; height: 2.5rem">
      <view style="overflow: auto; height: 2.5rem">
        <ul
          class="information"
          v-for="(item, index) in SearchArr"
@@ -150,7 +149,15 @@
    <!-- 朝代 -->
    <view
      class="flex flex-center"
      style="width: 100%; position: fixed; bottom: 0.33rem; left: 0; z-index: 99;"
      style="
        width: 100%;
        position: fixed;
        bottom: 0.33rem;
        left: 0;
        right: 0;
        z-index: 99;
        overflow: auto;
      "
    >
      <ul class="flex">
        <li
@@ -167,9 +174,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;
@@ -178,7 +186,7 @@
            "
            :style="{
              marginRight: index === dynasty1.length - 1 ? '0' : '0.03rem',
              background: dynasty1Color == item.id ? '#244A7B' : '#597AA5',
              background: dynasty1Color == item.id ? '#244A7B' : '#597AA5'
            }"
          >
            {{ item.dynastyChs }}
@@ -193,9 +201,10 @@
<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() {
@@ -209,25 +218,25 @@
      information: [
        {
          label: "姓名",
          content: "李时珍",
          content: "李时珍"
        },
        {
          label: "别名",
          content: "东丽先生",
          content: "东丽先生"
        },
        {
          label: "籍贯",
          content: "湖北",
          content: "湖北"
        },
        {
          label: "医学分科",
          content: "中药,针灸",
          content: "中药,针灸"
        },
        {
          label: "小传",
          content:
            "李时珍(约1518年~1593 年)， 字东璧， 晚年自号濒湖山人， 湖广黄州府薪州(今湖北省薪春县) 人， 明代著名医药学家。 与“ 医圣” 万密斋齐名， 古有“ 万密斋的方， 李时珍的药” 之说。 后为楚干府...",
        },
            "李时珍(约1518年~1593 年)， 字东璧， 晚年自号濒湖山人， 湖广黄州府薪州(今湖北省薪春县) 人， 明代著名医药学家。 与“ 医圣” 万密斋齐名， 古有“ 万密斋的方， 李时珍的药” 之说。 后为楚干府..."
        }
      ],
      // 下面的朝代1
      dynasty1Color: "",
@@ -235,78 +244,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,
@@ -315,43 +324,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,
@@ -361,20 +370,19 @@
          id: 1,
          name: "李时珍",
          birthAndDeath: "1518-1593",
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北",
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北"
        },
        {
          id: 2,
          name: "李时珍",
          birthAndDeath: "1518-1593",
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北",
        },
      ],
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北"
        }
      ]
    };
  },
  onLoad(options) {
    this.idIndex = options.id;
    console.log("optionsoptionsoptions", options.id);
  },
  mounted() {
    this.getDynastyList();
@@ -384,14 +392,10 @@
  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);
@@ -402,7 +406,6 @@
          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) {
@@ -419,7 +422,6 @@
                });
              }
            }
            console.log(markerList, "markerList");
            this.initMap(markerList);
            this.SearchArr = markerList.map((item) => ({
              birthAndDeath: item?.BIRTH_YEAR[0]?.content1
@@ -429,7 +431,7 @@
                : "-",
              name: item?.NAME[0]?.content1,
              source: "-",
              id: item.id,
              id: item.id
            }));
            this.markerList = markerList;
          }
@@ -444,27 +446,27 @@
      }
      var map = L.map("map", {
        preferCanvas: true,
        attributionControl: false,
        attributionControl: false
      }).setView([39.91667, 116.41667], 3);

      L.tileLayer
        .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>",
        html: "<div class='map-circle-name '></div>",
        iconSize: [80, 80],
        className: "map-circle",
        className: "map-circle"
      });
      this.map = map;
      if (markerList.length) {
@@ -498,12 +500,12 @@
              break;
          }
          let icon = L.divIcon({
            html: `<div class='${currentClassName}'></div>`,
            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) => {
            this.isEchTrue = true;
@@ -512,7 +514,7 @@
              nikeName: item?.ALIAS[0]?.content2,
              nativePlace: item?.content1,
              barnch: item?.MEDICAL_BRANCH[0]?.content1,
              medical: item?.MEDICAL_EXPERTISE[0]?.content1,
              medical: item?.MEDICAL_EXPERTISE[0]?.content1
            };
            this.$nextTick(() => {
              this.isTop =
@@ -531,7 +533,6 @@

    // 点击下面的朝代按钮
    dynastyBottomClick(id) {
      console.log(id);
      this.dynasty1Color = id;
      this.getDataList();
    },
@@ -543,16 +544,14 @@
      this.getDataList();
    },
    // 点击上面的朝代按钮
    SchoolClick(id) {
      console.log(id);
    },
    SchoolClick(id) {},
    // 查看更多>>
    viewMoreClick() {
      uni.navigateTo({
        url: "/pages/character/detail",
        url: "/pages/character/detail"
      });
    },
  },
    }
  }
};
</script>

@@ -738,4 +737,30 @@
  font-size: 14px !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>