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

杨磊

2024-07-26 652a4348e1b2e1b5253c562bd37e15e2c5518ea7

 src/pages/territory/territory.vue

@@ -1,7 +1,7 @@
<template>
  <view class="pageBox">
    <!-- 顶部导航 -->
    <headNav :idIndex="idIndex" text="中医地域医谱" style="z-index: 999" />
    <headNav :idIndex="idIndex" text="地域图谱" style="z-index: 999" />
    <view
      class="flex flex-center"
      style="width: 100%; margin: 20px 0 34px; justify-content: flex-start"
@@ -13,7 +13,7 @@
        :isAvancedTrue="false"
        :keyword="keyword"
      />
      <ul class="flex">
      <!-- <ul class="flex">
        <li v-for="(item, index) in dynasty" :key="item.id">
          <view
            @click="SchoolClick(item.id)"
@@ -46,7 +46,7 @@
            }}</view>
          </view>
        </li>
      </ul>
      </ul> -->
    </view>
    <!-- 搜索后的弹框 -->
    <el-card
@@ -75,7 +75,7 @@
          >关闭</el-button
        >
      </div>
      <view style="overflow: auto; height: 2.5rem">
      <view style="overflow: auto; height: 2.5rem" v-loading="loading">
        <div
          v-if="!loading && SearchArr.length == 0"
          style="
@@ -94,6 +94,7 @@
          class="information"
          v-for="(item, index) in SearchArr"
          :key="index"
          style="cursor: pointer"
          @click="showCard(item)"
        >
          <li style="font-size: 0.18rem; font-weight: 700">
@@ -104,6 +105,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"
@@ -115,12 +117,102 @@

    <div class="mapBox" id="mapBox" v-loading="mapLoading">
      <div id="map"></div>
      <el-card
        class="box-card echartsTrue"
        v-show="isEchTrue"
      <div
        class="markerDataListBox"
        v-if="isEchTrue"
        style="overflow: inherit; width: 3rem; position: absolute; z-index: 999"
        :style="{ top: isTop, left: isLeft }"
      >
        <div class="markerDataList">
          <div class="markerDataContentBox">
            <div v-if="currentMark.length == 1">
              <ul class="information">
                <li>
                  姓名:
                  {{ currentMark[0].name ? currentMark[0].name : "-" }}
                </li>
                <li>
                  别名:
                  {{ currentMark[0].nikeName ? currentMark[0].nikeName : "-" }}
                </li>
                <li>
                  籍贯:
                  {{
                    currentMark[0].nativePlace
                      ? currentMark[0].nativePlace
                      : "-"
                  }}
                </li>
                <li>
                  医学分科:
                  {{ currentMark[0].barnch ? currentMark[0].barnch : "-" }}
                </li>
                <li
                  class="medicalLi"
                  :title="currentMark[0].medical ? currentMark[0].medical : '-'"
                >
                  小传:
                  {{ currentMark[0].medical ? currentMark[0].medical : "-" }}
                </li>
              </ul>
              <el-button
                class="flex"
                @click="viewMoreClick(currentMark[0])"
                style="
                  width: 100%;
                  padding: 3px 0;
                  font-size: 0.12rem;
                  color: #597aa5;
                "
                type="text"
                >查看更多>></el-button
              >
            </div>
            <el-collapse v-else>
              <el-collapse-item
                v-for="(item, index) in currentMark"
                :name="index"
                :key="index"
              >
                <template slot="title">
                  <div class="titleImg">
                    <i class="el-icon-user"></i>
                  </div>
                  <span>{{ item.name }}</span>
                </template>
                <ul class="information">
                  <li>
                    姓名:
                    {{ item.name ? item.name : "-" }}
                  </li>
                  <li>别名: {{ item.nikeName ? item.nikeName : "-" }}</li>
                  <li>籍贯: {{ item.nativePlace ? item.nativePlace : "-" }}</li>
                  <li>医学分科: {{ item.barnch ? item.barnch : "-" }}</li>
                  <li
                    class="medicalLi"
                    :title="item.medical ? item.medical : '-'"
                  >
                    小传: {{ item.medical ? item.medical : "-" }}
                  </li>
                </ul>
                <el-button
                  class="flex"
                  @click="viewMoreClick(item)"
                  style="
                    width: 100%;
                    padding: 3px 0;
                    font-size: 0.12rem;
                    color: #597aa5;
                  "
                  type="text"
                  >查看更多>></el-button
                >
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
      <!-- <el-card class="box-card echartsTrue" v-show="isEchTrue">
        <div slot="header" class="clearfix">
          <span v-if="currentMark">{{
            currentMark.name ? currentMark.name : "-"
@@ -147,7 +239,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"
@@ -161,7 +258,7 @@
          type="text"
          >查看更多>></el-button
        >
      </el-card>
      </el-card> -->
    </div>

    <!-- 朝代 -->
@@ -204,7 +301,7 @@
            "
            :style="{
              marginRight: index === dynasty1.length - 1 ? '0' : '0.03rem',
              background: dynasty1Color == item.id ? '#244A7B' : '#597AA5',
              background: dynasty1Color == item.id ? '#244A7B' : '#597AA5'
            }"
          >
            {{ item.dynastyChs }}
@@ -217,12 +314,16 @@
<!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=5USVDAhhS4ssz44HLq3gNPZai7naXf4Q&callback=initializeMap"></script> -->
<!-- 5USVDAhhS4ssz44HLq3gNPZai7naXf4Q -->
<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 { getRetrieval, getDynasty, getPreCount } from "@/api/index.js";
import {
  getRetrieval,
  getDynasty,
  getPreCount,
  getDynastyData
} from "@/api/index.js";

export default {
  data() {
    return {
@@ -233,171 +334,95 @@
      isEchTrue: false,
      isLeft: 0,
      isTop: 0,
      // 用户信息
      information: [
        {
          label: "姓名",
          content: "李时珍",
        },
        {
          label: "别名",
          content: "东丽先生",
        },
        {
          label: "籍贯",
          content: "湖北",
        },
        {
          label: "医学分科",
          content: "中药,针灸",
        },
        {
          label: "小传",
          content:
            "李时珍(约1518年~1593 年)， 字东璧， 晚年自号濒湖山人， 湖广黄州府薪州(今湖北省薪春县) 人， 明代著名医药学家。 与“ 医圣” 万密斋齐名， 古有“ 万密斋的方， 李时珍的药” 之说。 后为楚干府...",
        },
      ],
      // 下面的朝代1
      dynasty1Color: "",
      dynasty1: [
        {
          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,
      // 朝代
      dynasty: [
        {
          name: "夏",
          color: "#90BBD8",
          id: 1,
        },
        {
          name: "商",
          color: "#EDD28B",
          id: 2,
        },
        {
          name: "西周",
          color: "#CF746D",
          id: 3,
        },
        {
          name: "秦",
          color: "#9CC27A",
          id: 4,
        },
        {
          name: "汉",
          color: "#5B6CB9",
          id: 5,
        },
        {
          name: "隋",
          color: "#8860A8",
          id: 6,
        },
        {
          name: "唐",
          color: "#DE8E66",
          id: 7,
        },
        {
          name: "明",
          color: "#DE8E66",
          id: 8,
        },
      ],
      // 搜索后是否显示弹框
      isSearch: false,
      currentMark: null,
      SearchArr: [
        {
          id: 1,
          name: "李时珍",
          birthAndDeath: "1518-1593",
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北",
        },
        {
          id: 2,
          name: "李时珍",
          birthAndDeath: "1518-1593",
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北",
        },
      ],
      SearchArr: [],
      zoomLevel: 5,
      oldMarkList: [],
      aggregatedData: [],
      openData: null
    };
  },
  onLoad(options) {
@@ -405,36 +430,26 @@
  },
  mounted() {
    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);
      this.openData = 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,
          nikeName: item?.ALIAS[0]?.content2,
          nativePlace: item?.content1,
          barnch: item?.MEDICAL_BRANCH[0]?.content1,
          medical: item?.MEDICAL_EXPERTISE[0]?.content1,
          id: item.id,
        };
        this.$nextTick(() => {
          this.isTop =
            document.getElementById("mapBox").offsetHeight / 2 - 275 + "px";
          this.isLeft =
            document.getElementById("mapBox").offsetWidth / 2 - 171 + "px";
        });
      }, 300);
      this.map.setView(latlng, 12);
    },
    getDataList() {
      this.SearchArr = [];
@@ -444,7 +459,7 @@
      let times = 0;
      getPreCount({
        keyword: this.keyword,
        dynasty: this.dynasty1Color,
        dynasty: this.dynasty1Color
      }).then(async (res) => {
        const totalCount = res.object;
        if (totalCount % 200 == 0) {
@@ -460,8 +475,15 @@
          if (curData) {
            markerList = [...markerList, ...curData];
          }
          if (i == 1) {
            this.mapLoading = false;
            this.markerList = markerList;
            this.initMap();
          } else {
            this.handleMapIcon(this.markerList);
          }

          if (i == times) {
            this.initMap(markerList);
            this.SearchArr = markerList.map((item) => ({
              birthAndDeath: item?.BIRTH_YEAR[0]?.content1
                ? item?.BIRTH_YEAR[0]?.content1 +
@@ -470,61 +492,15 @@
                : "-",
              name: item?.NAME[0]?.content1,
              source: "-",
              id: item.id,
              nativPlace: item?.NATIVE_PLACE[0].content1,
              id: item.id
            }));
            this.markerList = markerList;
            this.loading = false;
            this.mapLoading = false;
            this.markerList = markerList;
            this.handleMapIcon(this.markerList);
          }
        }
      });

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

      // getRetrieval({
      //   keyword: this.keyword,
      //   dynasty: this.dynasty1Color,
      //   page: 1,
      //   pageSize: 200,
      // }).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 });
      //           }
      //         });
      //       }
      //     }
      //     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([]);
      //   }
      // });
    },

    async getDataPageInfo(count) {
@@ -532,7 +508,7 @@
        keyword: this.keyword,
        dynasty: this.dynasty1Color,
        page: count,
        pageSize: 200,
        pageSize: 200
      });
      if (res.object) {
        let markerList = [];
@@ -561,109 +537,204 @@
    },
    onMapMoveEnd() {
      console.log("地图拖动了");
      this.isEchTrue = false;
      if (this.openData) {
        this.handleMapIcon(this.markerList);
      } else {
        this.isEchTrue = false;
      }
    },
    //初始化地图
    initMap(markerList) {
      console.log(markerList, "markerList");
    initMap() {
      this.isEchTrue = false;
      if (this.map) {
        this.map.remove();
      }
      var map = L.map("map", {
        preferCanvas: true,
        attributionControl: false,
      }).setView([34.3227, 108.5525], 5);
        attributionControl: false
      }).setView([34.3227, 108.5525], this.zoomLevel);
      map.on("moveend", this.onMapMoveEnd);
      map.on("zoomend", function () {
      map.on("zoomend", () => {
        var zoomLevel = map.getZoom(); // 获取当前地图的缩放级别
        console.log("当前地图缩放级别为:", zoomLevel);
        this.zoomLevel = zoomLevel;
        this.isEchTrue = false;
        this.handleMapIcon(this.markerList);
      });
      L.tileLayer
        .chinaProvider("TianDiTu.Normal.Map", {
          key: "76bc34ead7e30e663a4eded8aeaf5860",
          maxZoom: 18,
          minZoom: 3,
          minZoom: 3
        })
        .addTo(map);
      L.tileLayer
        .chinaProvider("TianDiTu.Normal.Annotion", {
          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]，我是去一半值，取一半值调出来的
      });

      let icon = L.divIcon({
        html: "<div class='map-circle-name '></div>",
        iconSize: [80, 80],
        className: "map-circle",
      });
      this.map = map;
      if (markerList.length) {
        for (let i = 0; i < markerList.length; i++) {
          const item = markerList[i];
          let currentClassName = "map-circle-name";
          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;
            }
          }
      this.handleMapIcon(this.markerList);
    },

          let icon = L.divIcon({
            html: `<div class='${currentClassName} ripple'></div>`,
            iconSize: [80, 80],
            className: "map-circle",
          });
          const temp_mark = L.marker([item.yCoord, item.xCoord], {
            icon: icon,
          }).addTo(map);
          temp_mark.on("click", (e) => {
            setTimeout(() => {
              this.isEchTrue = true;
              this.currentMark = {
                name: item?.WEAK_NAME[0]?.content1,
    handleMapIcon(data) {
      if (this.oldMarkList.length) {
        for (let j = 0; j < this.oldMarkList.length; j++) {
          const oldMark = this.oldMarkList[j];
          oldMark.remove();
        }
        this.oldMarkList = [];
      }
      // 按层级处理数据合并和icon的渲染
      // 获取天地图比例尺(地图1cm:实际cm)
      const scale = {
        1: 295829355.45456564,
        2: 147914677.72728282,
        3: 73957338.863641411,
        4: 36978669.431820706,
        5: 18489334.715910353,
        6: 9244667.3579551764,
        7: 4622333.6789775882,
        8: 2311166.8394887941,
        9: 1155583.419744397,
        10: 577791.70987219852,
        11: 288895.85493609926,
        12: 144447.92746804963,
        13: 72223.963734024815,
        14: 36111.981867012408,
        15: 18055.990933506204,
        16: 9027.9954667531019,
        17: 4513.997733376551,
        18: 2256.9988666882755,
        19: 1128.4994333441377,
        20: 564.24971667206887
      };
      // 根据比例尺计算当前地图1厘米的经纬度差值
      const cmData = scale[this.zoomLevel] / 100; // 将厘米转换为米
      const longitudeToM = 92064.1; // 1经度对应米
      const latitudeToM = 111195.1; // 1纬度对应米
      const longitudeRange = cmData / longitudeToM; // 地图1cm的经度差
      const latitudeRange = cmData / latitudeToM; // 地图1cm的纬度差
      console.log("longitudeRange", longitudeRange);
      console.log("latitudeRange", latitudeRange);
      // 根据经纬度差值将地图一厘米内所有点合并并记录数量
      const aggregatedData = [];
      for (let i = 0; i < data.length; i++) {
        const item = data[i];
        // 判断当前点是否存在在1cm内的相关数据
        const mateData = aggregatedData.find(
          (aItem) =>
            Math.abs(aItem.mainX - item.xCoord) < longitudeRange &&
            Math.abs(aItem.mainY - item.yCoord) < latitudeRange
        );
        if (!mateData) {
          // 无匹配数据时，将当前点坐标设为中心点坐标，虹吸合并周围1cm内的点
          const obj = {
            mainX: item.xCoord,
            mainY: item.yCoord,
            contentX: "",
            contentY: "",
            xList: [],
            yList: [],
            data: []
          };
          obj.xList.push(item.xCoord);
          obj.yList.push(item.yCoord);
          obj.data.push(item);
          aggregatedData.push(obj);
        } else {
          // 有匹配数据时，将当前点进行合并
          mateData.xList.push(item.xCoord);
          mateData.yList.push(item.yCoord);
          mateData.data.push(item);
        }
      }
      // 根据聚合经度和纬度列表的最大最小值，取中心点坐标
      for (let j = 0; j < aggregatedData.length; j++) {
        const aggregatedItem = aggregatedData[j];
        const maxX = Math.max(...aggregatedItem.xList);
        const minX = Math.min(...aggregatedItem.xList);
        const maxY = Math.max(...aggregatedItem.yList);
        const minY = Math.min(...aggregatedItem.yList);
        aggregatedItem.contentX = (maxX - minX) / 2 + minX;
        aggregatedItem.contentY = (maxY - minY) / 2 + minY;

        // 添加标记
        let icon = L.divIcon({
          html: `<div class='ripple' style='box-shadow: 0 0 20px ${
            aggregatedItem.data.length > 30 ? 30 : aggregatedItem.data.length
          }px #cc2edf78;'>${
            aggregatedItem.data.length < 100
              ? aggregatedItem.data.length
              : "99+"
          }</div>`,
          iconSize: [30, 30],
          className: "map-circle"
        });
        const temp_mark = L.marker(
          [aggregatedItem.contentY, aggregatedItem.contentX],
          {
            icon: icon
          }
        );
        this.oldMarkList.push(temp_mark);
        temp_mark.addTo(this.map);
        temp_mark.on("click", (e) => {
          setTimeout(() => {
            this.isEchTrue = true;
            this.currentMark = aggregatedItem.data.map((item) => {
              return {
                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,
                id: item.id,
                medical: item?.BIOGRAPHY,
                id: item.id
              };
              this.isTop = e.containerPoint.y - 275 + "px";
              this.isLeft = e.containerPoint.x - 171 + "px";
            }, 300);
          });
        }
            });
            this.isTop = e.containerPoint.y - 435 + "px";
            this.isLeft = e.containerPoint.x - 180 + "px";
          }, 300);
        });
      }
      console.log("aggregatedData", aggregatedData);
      this.aggregatedData = aggregatedData;
      if (this.openData) {
        setTimeout(() => {
          if (this.openData) {
            let aggregated = null;
            for (let i = 0; i < this.aggregatedData.length; i++) {
              const aggregatedItem = this.aggregatedData[i];
              const d = aggregatedItem.data.find(
                (f) => f.id == this.openData.id
              );
              if (d) {
                aggregated = aggregatedItem;
              }
            }
            this.currentMark = aggregated.data.map((item) => {
              return {
                name: item?.NAME[0]?.content1,
                nikeName: item?.ALIAS[0]?.content2,
                nativePlace: item?.content1,
                barnch: item?.MEDICAL_BRANCH[0]?.content1,
                medical: item?.BIOGRAPHY,
                id: item.id
              };
            });
            this.isEchTrue = true;
            this.$nextTick(() => {
              this.isTop =
                document.getElementById("mapBox").offsetHeight / 2 - 435 + "px";
              this.isLeft =
                document.getElementById("mapBox").offsetWidth / 2 - 180 + "px";
            });
          }

          this.openData = null;
        }, 300);
      }
    },

@@ -682,71 +753,16 @@
    // 点击上面的朝代按钮
    SchoolClick(id) {},
    // 查看更多>>
    viewMoreClick() {
    viewMoreClick(data) {
      uni.navigateTo({
        url: "/pages/character/detail?id=" + this.currentMark.id,
        url: "/pages/character/detail?id=" + data.id
      });
    },
  },
    }
  }
};
</script>

<style>
::v-deep .map-circle-name {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(144, 187, 216);
}
::v-deep .map-circle-xia {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(144, 187, 216);
}
::v-deep .map-circle-shang {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(237, 210, 139);
}
::v-deep .map-circle-zhou {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(207, 116, 109);
}
::v-deep .map-circle-qin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(156, 194, 122);
}
::v-deep .map-circle-han {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(91, 108, 185);
}
::v-deep .map-circle-sui {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(136, 96, 168);
}
::v-deep .map-circle-tang {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(136, 96, 168);
}
::v-deep .map-circle-ming {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(222, 142, 102);
}

.pageBox {
  width: 100%;
  height: 100%;
@@ -754,21 +770,69 @@
  flex-direction: column;
}

.echartsTrue::before {
.markerDataListBox {
  width: 360px !important;
  height: 400px;
}

.markerDataListBox::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  bottom: -0.18rem;
  left: 1.2rem;
  bottom: -18px;
  left: 160px;
  /* background-color: red; */
  border-left: 0.2rem solid transparent;
  border-left: 20px solid transparent;
  /* 左边透明 */
  border-right: 0.2rem solid transparent;
  border-right: 20px solid transparent;
  /* 右边透明 */
  border-top: 0.2rem solid #fff;
  border-top: 20px solid #fff;
  /* 顶部红色 */
  z-index: 999;
}

.markerDataList {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px 0 #000;
}

.markerDataList ::v-deep .el-collapse-item {
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
}

::v-deep .el-collapse-item__header.is-active {
  border-bottom-color: #ebeef5;
}

::v-deep .el-collapse-item__header {
  padding-left: 10px;
  font-size: 16px;
}

.markerDataContentBox {
  width: 100%;
  height: 100%;
  overflow: auto !important;
  padding: 6px;
  box-sizing: border-box;
}

.titleImg {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #4c48fb;
  color: #fff;
  margin-right: 10px;
  text-align: center;
  line-height: 24px;
}

::v-deep .el-card__header {
@@ -778,6 +842,14 @@
  padding: 0.08rem 0.13rem;
  font-size: 0.14rem;
  font-weight: 600;
}

::v-deep .el-collapse-item__content {
  padding-bottom: 10px;
}

.markerDataContentBox .information {
  padding: 20px;
}

.information li {
@@ -882,36 +954,36 @@
}

::v-deep .ripple {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: #4c48fb;
  color: #fff;
  text-align: center;
  line-height: 30px;
}

::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 {
/* @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>