1

YM

2024-06-11 a4fe90ef374a9a3144fb8de5d7229dd11bfa7ff4

 src/pages/territory/territory.vue

@@ -1,19 +1,20 @@
<template>
  <view class="pageBox">
    <!-- 顶部导航 -->
    <headNav :idIndex="idIndex" text="中医地域医谱" />
    <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"
        placehold="输入姓名/别名/朝代/传主职业搜索"
        placehold="输入姓名/别名/时期/传主职业搜索"
        @onSearch="onSearch"
        :isAvancedTrue="false"
        :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"
@@ -32,7 +33,6 @@
            "
          >
            <view
              class=""
              :style="{ background: item.color }"
              style="
                margin-right: 0.07rem;
@@ -41,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>
@@ -56,7 +56,7 @@
        height: 3.2rem;
        width: 3rem;
        position: fixed;
        z-index: 999999999999;
        z-index: 99;
        left: 1rem;
        top: 2.2rem;
      "
@@ -75,11 +75,36 @@
          >关闭</el-button
        >
      </div>
      <view class="" style="overflow: auto; height: 2.5rem">
        <ul class="information" v-for="(item, index) in SearchArr" :key="index">
          <li style="font-size: 0.18rem; font-weight: 700">{{ item.name }}</li>
          <li>生卒年: {{ item.birthAndDeath }}</li>
          <li>来源: {{ item.source }}</li>
      <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"
          :key="index"
          @click="showCard(item)"
        >
          <li style="font-size: 0.18rem; font-weight: 700">
            {{ item.name ? item.name : "-" }}
          </li>
          <li>
            生卒年:
            {{ 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"
@@ -88,51 +113,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>{{ information[0].content }}</span>

    <div class="mapBox" id="mapBox" v-loading="mapLoading">
      <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">
        <li v-for="(item, index) in information" :key="index">
          {{ item.label }}: {{ item.content }}
        </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>
    <!-- echarts地图 -->
    <!-- <view id="main" style="width: 100vw; position: relative"></view> -->
    <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
@@ -144,14 +188,15 @@
            class="flex flex-center"
            style="height: 0.35rem; background-color: #fff; color: #244a7b"
          >
            {{ item.coord }}
            {{ item.start }}
          </view>
          <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;
@@ -163,7 +208,7 @@
              background: dynasty1Color == item.id ? '#244A7B' : '#597AA5',
            }"
          >
            {{ item.name }}
            {{ item.dynastyChs }}
          </view>
        </li>
      </ul>
@@ -175,12 +220,22 @@
<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,
  getDynastyData,
} from "@/api/index.js";
export default {
  data() {
    return {
      loading: true,
      mapLoading: true,
      // echarts元素点击时出来的弹窗和坐标
      keyword: "",
      isEchTrue: false,
      isLeft: 0,
      isTop: 0,
@@ -209,7 +264,7 @@
        },
      ],
      // 下面的朝代1
      dynasty1Color: 1,
      dynasty1Color: "",
      dynasty1: [
        {
          name: "夏朝",
@@ -292,12 +347,12 @@
      // 朝代
      dynasty: [
        {
          name: "夏朝",
          name: "夏",
          color: "#90BBD8",
          id: 1,
        },
        {
          name: "商朝",
          name: "商",
          color: "#EDD28B",
          id: 2,
        },
@@ -307,28 +362,34 @@
          id: 3,
        },
        {
          name: "秦朝",
          name: "秦",
          color: "#9CC27A",
          id: 4,
        },
        {
          name: "汉朝",
          name: "汉",
          color: "#5B6CB9",
          id: 5,
        },
        {
          name: "隋朝",
          name: "隋",
          color: "#8860A8",
          id: 6,
        },
        {
          name: "唐朝",
          name: "唐",
          color: "#DE8E66",
          id: 7,
        },
        {
          name: "明",
          color: "#DE8E66",
          id: 8,
        },
      ],
      // 搜索后是否显示弹框
      isSearch: false,
      currentMark: null,
      SearchArr: [
        {
          id: 1,
@@ -347,129 +408,360 @@
  },
  onLoad(options) {
    this.idIndex = options.id;
    console.log("optionsoptionsoptions", options.id);
  },
  mounted() {
    // this.$nextTick(() => {
    // loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => {
    //   this.innt();
    // });
    // })
    this.initMap();
    this.getDynastyList();

    this.getDataList();
    this.getHaveDataDynasty();
  },
  methods: {
    //初始化地图
    initMap() {
      // var map = L.map("map", {

      //   center: [34.26, 108.96],

      //   zoom: 4,

      //   maxZoom: 18, //最大缩放层级

      //   minZoom: 1, //最小缩放层级

      //   tileSize: 256, //切片大小

      //   attributionControl: false, // 移除右下角leaflet标识

      //   zoomControl: false, //禁用 + - 按钮

      //   maxBounds: bounds, //设置边界

      //   preferCanvas: true, //默认使用svg渲染，设置canvas渲染

      //   doubleClickZoom: false, //关闭双击缩放

      //   // dragging: false, //鼠标移动事件
      // });
      var map = L.map("map", {
        attributionControl: false,
        preferCanvas: true,
        withPopup: L.latLng(34.261, 108.96),
      }).setView([39.91667, 116.41667], 4);

      // L.tileLayer(
      //   "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
      // ).addTo(map);
      L.tileLayer(
        "http://t0.tianditu.gov.cn/vec_c/wmts?tk=36ef7d20eba483627b043f0909c493ee"
      ).addTo(map);

      L.tileLayer
        .wmts(
          "http://t{s}.tianditu.gov.cn/vec_c/wmts?tk=36ef7d20eba483627b043f0909c493ee",
          {
            layer: "vec", // 矢量图层
            style: "default",
            tilematrixset: "c", // 缩放级别
            format: "tiles",
            attribution: "Map Data &copy; 2023 Tencent",
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
    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);
      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);
    },
    getDataList() {
      this.SearchArr = [];
      this.loading = true;
      this.mapLoading = true;
      // 这里改成了分页的接口，需要调用多次取出所有数据
      let times = 0;
      getPreCount({
        keyword: this.keyword,
        dynasty: this.dynasty1Color,
      }).then(async (res) => {
        const totalCount = res.object;
        if (totalCount % 200 == 0) {
          times = totalCount / 200 - 1;
        } else {
          times = Math.floor(totalCount / 200);
        }
        console.log(times, "times");
        if (times == 0 || times < 0) times = 1;
        let markerList = [];
        for (let i = 1; i <= times; i++) {
          const curData = await this.getDataPageInfo(i);
          if (curData) {
            markerList = [...markerList, ...curData];
          }
        )
        .addTo(map);
          if (i == 1) {
            this.loading = false;
            this.mapLoading = false;
            this.markerList = markerList;
            this.initMap(markerList);
          } else {
            if (curData && curData.length) {
              for (let j = 0; j < curData.length; j++) {
                const ele = curData[j];
                let currentClassName = "map-circle-name";
                if (ele.dynastyInfo) {
                  switch (ele.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} ripple'></div>`,
                  iconSize: [80, 80],
                  className: "map-circle",
                });
                const temp_mark = L.marker([ele.yCoord, ele.xCoord], {
                  icon: icon,
                }).addTo(this.map);
                temp_mark.on("click", (e) => {
                  setTimeout(() => {
                    this.isEchTrue = true;
                    this.currentMark = {
                      name: ele?.WEAK_NAME[0]?.content1,
                      nikeName: ele?.ALIAS[0]?.content2,
                      nativePlace: ele?.content1,
                      barnch: ele?.MEDICAL_BRANCH[0]?.content1,
                      medical: ele?.MEDICAL_EXPERTISE[0]?.content1,
                      id: ele.id,
                    };
                    this.isTop = e.containerPoint.y - 275 + "px";
                    this.isLeft = e.containerPoint.x - 171 + "px";
                  }, 300);
                });
              }
            }
          }

          if (i == times) {
            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: "-",
              nativPlace: item?.NATIVE_PLACE[0].content1,
              id: item.id,
            }));
            this.markerList = markerList;
            // this.initMap(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) {
      const res = await getRetrieval({
        keyword: this.keyword,
        dynasty: this.dynasty1Color,
        page: count,
        pageSize: 200,
      });
      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 });
              }
            });
          }
        }

        return markerList;
      } else {
        return [];
      }
    },
    onMapMoveEnd() {
      console.log("地图拖动了");
      this.isEchTrue = false;
    },
    //初始化地图
    initMap(markerList) {
      console.log(markerList, "markerList");
      this.isEchTrue = false;
      if (this.map) {
        this.map.remove();
      }
      var map = L.map("map", {
        preferCanvas: true,
        attributionControl: false,
      }).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",
          maxZoom: 18,
          minZoom: 3,
        })
        .addTo(map);
      L.tileLayer
        .chinaProvider("TianDiTu.Normal.Annotion", {
          key: "76bc34ead7e30e663a4eded8aeaf5860",
          maxZoom: 18,
          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]，我是去一半值，取一半值调出来的
      });
      const marker1 = L.marker([34.261, 108.96], {
        icon: DefaultIcon1,
      }).addTo(map);
      L.marker([39.90609, 116.38543], {
        icon: DefaultIcon1,
      })
        .addTo(map)
        .bindPopup(this.popContent); //北京
      L.marker([29.55546, 106.5448], {
        icon: DefaultIcon1,
      }).addTo(map); // 重庆
      L.marker([30.56781, 114.30222], {
        icon: DefaultIcon1,
      }).addTo(map); //湖北
      L.marker([18.23522, 109.51085], {
        icon: DefaultIcon1,
      }).addTo(map); //海南

      marker1.on("click", (e) => {
        this.isEchTrue = true;
        console.log(document.querySelector(".echartsTrue").offsetWidth);
        console.log(document.querySelector(".echartsTrue").offsetHeight);
        this.$nextTick(() => {
          this.isTop =
            e.containerPoint.y -
            document.querySelector(".echartsTrue").offsetHeight / 2 +
            "px";
          this.isLeft =
            e.containerPoint.x -
            document.querySelector(".echartsTrue").offsetWidth / 2 +
            "px";
        });
      let icon = L.divIcon({
        html: "<div class='map-circle-name '></div>",
        iconSize: [80, 80],
        className: "map-circle",
      });
      this.map = map;
      if (this.markerList.length) {
        for (let i = 0; i < this.markerList.length; i++) {
          const item = this.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;
            }
          }

          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,
                nikeName: item?.ALIAS[0]?.content2,
                nativePlace: item?.content1,
                barnch: item?.MEDICAL_BRANCH[0]?.content1,
                medical: item?.MEDICAL_EXPERTISE[0]?.content1,
                id: item.id,
              };
              this.isTop = e.containerPoint.y - 275 + "px";
              this.isLeft = e.containerPoint.x - 171 + "px";
            }, 300);
          });
        }
      }
    },

    // 点击下面的朝代按钮
    dynastyBottomClick(id) {
      console.log(id);
      this.dynasty1Color = id;
      this.getDataList();
    },
    onSearch(val) {
      console.log(val);
      //
      this.isSearch = true;
      this.keyword = val.text;
      this.map.invalidateSize();

      this.getDataList();
    },
    // 点击上面的朝代按钮
    SchoolClick(id) {
      console.log(id);
    },
    SchoolClick(id) {},
    // 查看更多>>
    viewMoreClick() {
      uni.navigateTo({
        url: "/pages/character/detail",
        url: "/pages/character/detail?id=" + this.currentMark.id,
      });
    },
  },
@@ -477,6 +769,61 @@
</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%;
@@ -498,6 +845,7 @@
  /* 右边透明 */
  border-top: 0.2rem solid #fff;
  /* 顶部红色 */
  z-index: 999;
}

::v-deep .el-card__header {
@@ -596,10 +944,51 @@
  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: 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;
  }
} */

::v-deep .cleanupBtn{
  right: 60px !important;
}

::v-deep .widget_input{
  min-width: 240px !important;
}
</style>