ggfwjsc/src/view/sy_mapcopy.vue

<template>
  <div class="module">
    <teleport to="body">
      <div id="map" style="width: 100vw; height: 100vh"></div>
      <div class="left" style="width: 517px">
        <div class="lyx">
          <div class="title">
            <div class="title_name">
              <span @click="csh()">龙游县</span>
              <span v-if="title_jd" @click="to_jd(title_jd)"
                >>{{ title_jd }}</span
              >
              <span v-if="title_cs">>{{ title_cs }}</span>
            </div>
            <div class="title_line"></div>
          </div>
          <div class="age-container">
            <div class="progress-wrapper">
              <div
                v-for="(item, index) in PopulationRatio"
                :class="[
                  'progress-container',
                  {
                    'above-line': index % 2 !== 0,
                    'below-line': index % 2 === 0,
                  },
                ]"
                :style="{
                  width: item.progress + '%',
                  backgroundColor: item.bgColor,
                }"
              >
                <span
                  :style="{ color: item.bgColor }"
                  :class="[
                    {
                      'above-line2': index % 2 !== 0,
                      'below-line2': index % 2 === 0,
                    },
                  ]"
                  >{{ item.progress + "%" }}</span
                >
                <span
                  style="color: #fff; white-space: nowrap"
                  :class="[
                    {
                      'above-line1': index % 2 !== 0,
                      'below-line1': index % 2 === 0,
                    },
                  ]"
                  >{{ item.age }}</span
                >
                <div
                  class="age-line"
                  :style="{
                    backgroundColor: item.bgColor,
                  }"
                ></div>
                <div
                  class="dot"
                  :style="{ backgroundColor: item.bgColor }"
                ></div>
              </div>
            </div>
          </div>

          <div class="content">
            <div
              class="content_item"
              v-for="(item, index) in personTotal"
              :class="{ choose: item.id == choose.person }"
              @click="buten(item)"
              :key="index"
            >
              <div class="content_item_name">{{ ageLess0(item.ages) }}</div>
              <div class="content_item_percent" v-if="item.ages != '总人口'">
                ({{ item.percent }}%)
              </div>
              <div class="content_item_value">
                {{ item.rksl }}
              </div>
            </div>
          </div>
        </div>
        <div class="tsbq">
          <div class="title">
            <div class="title_name">特殊标签</div>
            <div class="title_line"></div>
          </div>
          <div class="content">
            <div
              class="content_item"
              v-for="(item, index) in tsbqTotal"
              :class="{ choose: item.id == choose.person }"
              @click="buten2(item)"
              :key="index"
            >
              <div class="content_item_name">{{ item.name }}</div>
              <div class="content_item_value">{{ item.rksl }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right" style="width: 517px">
        <div class="jbggfwq">
          <div class="title">
            <div class="title_name">基本公共服务圈</div>
            <div class="title_line"></div>
          </div>
          <div class="jbggfwq_content">
            <div
              class="jbggfwq_content_item"
              v-for="(item, index) in jbfwqTotal"
              :key="index"
            >
              <div class="jbggfwq_content_item_left">{{ item.name }}</div>
              <div class="jbggfwq_content_item_right">
                <div
                  class="jbggfwq_content_item_right_item"
                  v-for="itemm in item.child"
                  :class="{ choose: itemm.id == choose.fwq }"
                  @click="changeFwq(itemm.id, item.name, itemm.name)"
                >
                  {{ itemm.name }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="zyys">
          <div class="title">
            <div class="title_name">资源要素</div>
            <div class="title_line"></div>
          </div>
          <div class="zyys_content">
            <div
              class="zyys_content_item"
              v-for="(item, index) in yaosuTotal"
              :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }"
              @click="changeys(item.id)"
              :key="index"
            >
              <img :src="item.img" class="zyys_content_item_left" />
              <div class="zyys_content_item_right">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </teleport>
  </div>
</template>
<script setup>
import {
  ref,
  reactive,
  onMounted,
  onBeforeMount,
  onBeforeUnmount,
  computed,
  defineProps,
  watch,
  nextTick,
} from "vue";
import { ElMessage } from "element-plus";
import tools from "@/utils/tools";
import initializeMap from "@/utils/mapInitializer.js";
import http from "@/utils/request.js";
import mapTown from "@/assets/json/ly.json";
// import xkz from "@/assets/json/xkz.json";
import cssj from "@/assets/json/cssj.json";
import j0 from "@/assets/images/map/j0.png";
import j1 from "@/assets/images/map/j1.png";
import j2 from "@/assets/images/map/j2.png";
import j3 from "@/assets/images/map/j3.png";
import j4 from "@/assets/images/map/j4.png";
import j5 from "@/assets/images/map/j5.png";
import j6 from "@/assets/images/map/j6.png";
import j7 from "@/assets/images/map/j7.png";
import j8 from "@/assets/images/map/j8.png";
import j9 from "@/assets/images/map/j9.png";
import j10 from "@/assets/images/map/j10.png";
import dwd from "@/assets/images/map/dwd.png";
import fwqbg1 from "@/assets/images/map/qlv.png";
import fwqbg2 from "@/assets/images/map/qlan.png";
import fwqbg3 from "@/assets/images/map/slan.png";
import fwqbg4 from "@/assets/images/map/slv.png";
import fwqbg5 from "@/assets/images/map/shuang.png";
import fwqbg6 from "@/assets/images/map/qqlv.png";
import b1 from "@/assets/images/map/bb1.png";
import b2 from "@/assets/images/map/b2.png";
import b3 from "@/assets/images/map/b3.png";
import b4 from "@/assets/images/map/b4.png";
import b5 from "@/assets/images/map/b5.png";
import b6 from "@/assets/images/map/b6.png";
import xcbg from "@/assets/images/map/xcbg.png";
import AED from "@/assets/images/map/AED.png";
//--------定义参数-------
//存放渲染的地块及图标的数组
const jdm_arr = ref([]); //街道名
const jdm_number_arr = ref([]); //街道名(+数量)
const fwq_list_arr = ref([]); //基本公共服务圈
const cs_qk_arr = ref([]); //社区彩色区块
const cs_name_arr = ref([]); //社区名
const cs_number_name_arr = ref([]); //社区名(+数量)
const cs_choose_arr = ref([]); //单点社区对应的区块(蓝色)
const cs_un_choose_arr = ref([]); //单点社区其他区块(灰色)
const cs_dd_arr = ref([]); //单点社区名
//存放村社区块
const csqk = ref({});
//头部标题
const title_choose = ref("");
const title_jd = ref("");
const title_cs = ref("");
//是否单点社区
const sfdd = ref(false);
const xuanzhongCs = ref([]);
//存放街道
const cfJd = ref("");
//存放村社
const cfCs = ref("");
//地图
var map = null;
//默认龙游县灰色地块
const mapTownDataDK = reactive([]);
//社区地块
const xkzDk = reactive([]);
//社区中心点
const xkzCenter = reactive([
  {
    name: "溪口村",
    center: [119.2002156322304, 28.83866363229786],
    number: "50",
  },
  {
    name: "扁石村",
    center: [119.18143177857742, 28.858795781247416],
    number: "50",
  },
  {
    name: "大垄村",
    center: [119.15947390269743, 28.856881986353613],
    number: "50",
  },
  {
    name: "枫林村",
    center: [119.2244601402551, 28.874916936765324],
    number: "50",
  },
  {
    name: "双港口村",
    center: [119.2112370831526, 28.873145674638753],
    number: "50",
  },
  {
    name: "灵上村",
    center: [119.18997199384468, 28.871170115155575],
    number: "50",
  },
  {
    name: "灵下村",
    center: [119.19215588030731, 28.890692457149832],
    number: "50",
  },
  {
    name: "下徐村",
    center: [119.13517530022014, 28.877528537725134],
    number: "50",
  },
  {
    name: "大沃口村",
    center: [119.17629950196843, 28.895987778606404],
    number: "50",
  },
  {
    name: "寺下村",
    center: [119.15115841066512, 28.913624042836545],
    number: "50",
  },
  {
    name: "大阳家村",
    center: [119.165141274073, 28.89860048623702],
    number: "50",
  },
  {
    name: "石角村",
    center: [119.12327500764461, 28.911094612057784],
    number: "50",
  },
  {
    name: "红罗村",
    center: [119.18884846618927, 28.911017362099795],
    number: "50",
  },
  {
    name: "冷水村",
    center: [119.19787638778016, 28.934598743672993],
    number: "50",
  },
  {
    name: "新溪社区",
    center: [119.184555, 28.853068],
    number: "50",
  },
]);
//村社颜色列表
const colorList = [
  {
    bg: "RGBA(52, 231, 134, 1)",
  },
  {
    bg: "RGBA(255, 206, 0, 1)",
  },
  {
    bg: "RGBA(186, 232, 128, 1)",
  },
  {
    bg: "RGBA(35, 146, 223, 1)",
  },
  {
    bg: "RGBA(60, 144, 252, 1)",
  },
  {
    bg: "RGBA(255, 142, 0, 1)",
  },
  {
    bg: "RGBA(137, 128, 0, 1)",
  },
  {
    bg: "RGBA(0, 207, 249, 1)",
  },
  {
    bg: "RGBA(27, 91, 55, 1)",
  },
];
//存放特殊标签中文对应的简写
const tsbq_id_total = ref([
  {
    name: "残疾人",
    id: "cjr",
  },
  {
    name: "低边",
    id: "dibian",
  },
  {
    name: "低保",
    id: "db",
  },
  {
    name: "高血压",
    id: "gxy",
  },
  {
    name: "糖尿病",
    id: "tnb",
  },
  {
    name: "退役军人",
    id: "tyjr",
  },
  {
    name: "困境儿童",
    id: "kjer",
  },
]);
//单选中社区区块
const chooseCsList = ref([]);
//单选未中社区区块
const unChooseList = ref([]);
const sqname = ref();
// const townName = ref();
//地图街道设置(存放数量)
const mapTownCount = reactive([
  {
    name: "龙洲街道",
    center: [119.1573083, 28.9799445],
    number: "1000",
  },
  {
    name: "东华街道",
    center: [119.209592, 28.9799445],
    number: "1000",
  },
  {
    name: "小南海镇",
    center: [119.119616, 29.07309],
    number: "1000",
  },
  {
    name: "湖镇镇",
    center: [119.2906892, 29.0386151],
    number: "1000",
  },
  {
    name: "溪口镇",
    center: [119.1859408, 28.8879474],
    number: "1000",
  },
  {
    name: "詹家镇",
    center: [119.1201732, 29.005175],
    number: "1000",
  },
  {
    name: "塔石镇",
    center: [119.1256669, 29.1373072],
    number: "1000",
  },
  {
    name: "横山镇",
    center: [119.1876111, 29.1903275],
    number: "1000",
  },
  {
    name: "模环乡",
    center: [119.237015, 29.120862],
    number: "1000",
  },
  {
    name: "石佛乡",
    center: [119.1002998, 29.2018674],
    number: "1000",
  },
  {
    name: "沐尘畲族乡",
    center: [119.1837169, 28.8014116],
    number: "1000",
  },
  {
    name: "罗家乡",
    center: [119.2453273, 28.9130851],
    number: "1000",
  },
  {
    name: "庙下乡",
    center: [119.1037175, 28.8089885],
    number: "1000",
  },
  {
    name: "大街乡",
    center: [119.2664362, 28.8432149],
    number: "1000",
  },
  {
    name: "社阳乡",
    center: [119.3109367, 28.9074754],
    number: "1000",
  },
]);
//选中
const choose = ref({
  person: "",
  fwq: 9999,
  yaosu: 9999,
});
//人口数
const personTotal = ref([
  {
    id: 0,
    name: "总人口",
    value: "1724114",
    ages: "总人口",
    age: "1000",
  },
]);
//人口数比例
const PopulationRatio = ref([
  {
    id: 0,
    age: "1-10岁",
    progress: 10, //进度条占比
    bgColor: "rgba(246, 214, 120, 1)",
  },
  {
    id: 1,
    age: "11-20岁",
    progress: 10, //进度条占比
    bgColor: "rgba(243, 254, 128, 1)",
  },
  {
    id: 2,
    age: "21-30岁",
    progress: 10, //进度条占比
    bgColor: "rgba(164, 241, 119, 1)",
  },
  {
    id: 3,
    age: "31-40岁",
    progress: 10, //进度条占比
    bgColor: "rgba(110, 255, 201, 1)",
  },
  {
    id: 4,
    age: "41-50岁",
    progress: 10, //进度条占比
    bgColor: "rgba(105, 201, 241, 1)",
  },
  {
    id: 5,
    age: "51-60岁",
    progress: 10, //进度条占比
    bgColor: "rgba(107, 138, 244, 1)",
  },
  {
    id: 6,
    age: "61-70岁",
    progress: 10, //进度条占比
    bgColor: "rgba(161, 128, 255, 1)",
  },
  {
    id: 7,
    age: "71-80岁",
    progress: 10, //进度条占比
    bgColor: "rgba(179, 238, 147, 1)",
  },
  {
    id: 8,
    age: "81-90岁",
    progress: 10, //进度条占比
    bgColor: "rgba(190, 255, 246, 1)",
  },
  {
    id: 9,
    age: "91-100岁",
    progress: 10, //进度条占比
    bgColor: "rgba(222, 173, 98, 1)",
  },
]);
//特殊标签
const tsbqTotal = ref([
  {
    id: 10,
    name: "退役军人",
    value: "26737",
  },
  {
    id: 20,
    name: "留守",
    value: "26737",
  },
  {
    id: 30,
    name: "困境儿童",
    value: "26737",
  },
  {
    id: 40,
    name: "特困",
    value: "26737",
  },
  {
    id: 0,
    name: "低边",
    value: "26737",
  },
  {
    id: 1,
    name: "低保",
    value: "26737",
  },
  {
    id: 2,
    name: "高血压",
    value: "26737",
  },
  {
    id: 3,
    name: "糖尿病",
    value: "26737",
  },
  {
    id: 4,
    name: "残疾人",
    value: "26737",
  },
]);
const data = reactive({
  serviceCircleList: [],
  fwqCoordinates: "", //服务圈中心坐标
  fwqCoordinates1: [], //服务圈中心坐标
  fwqCoordinates2: [], //服务圈中心坐标
});
//基本公共服务圈
const jbfwqTotal = ref([
  {
    id: 0,
    name: "东华街道",
    child: [
      {
        id: 100,
        name: "上圩头村",
      },
      {
        id: 200,
        name: "官村",
      },
      {
        id: 300,
        name: "下杨",
      },
      {
        id: 400,
        name: "灵江社区",
      },
      {
        id: 500,
        name: "文成社区",
      },
      {
        id: 600,
        name: "子鸣社区",
      },
    ],
  },
  {
    id: 1,
    name: "社阳乡",
    child: [
      {
        id: 11,
        name: "社阳村",
      },
    ],
  },
  {
    id: 2,
    name: "小南海镇",
    child: [
      {
        id: 21,
        name: "茶圩里村",
      },
      {
        id: 22,
        name: "团石村",
      },
      {
        id: 23,
        name: "箬塘",
      },
    ],
  },
  {
    id: 3,
    name: "庙下乡",
    child: [
      {
        id: 31,
        name: "庙下村",
      },
    ],
  },
  {
    id: 4,
    name: "溪口镇",
    child: [
      {
        id: 41,
        name: "新溪社区",
        center: [119.1845892, 28.8540481],
        fwqList: [],
      },
      {
        id: 42,
        name: "石角村",
      },
      {
        id: 43,
        name: "红罗村",
      },
    ],
  },
  {
    id: 5,
    name: "罗家乡",
    child: [
      {
        id: 51,
        name: "罗家村",
      },
    ],
  },
  {
    id: 6,
    name: "模环乡",
    child: [
      {
        id: 61,
        name: "模环村",
      },
      {
        id: 62,
        name: "金星社区",
      },
    ],
  },
  {
    id: 7,
    name: "横山镇",
    child: [
      {
        id: 71,
        name: "志棠村",
      },
      {
        id: 72,
        name: "横山集镇",
      },
      {
        id: 73,
        name: "后徐",
      },
    ],
  },
  {
    id: 8,
    name: "石佛乡",
    child: [
      {
        id: 81,
        name: "三和村",
      },
      {
        id: 82,
        name: "石佛村",
      },
      {
        id: 83,
        name: "三门源村",
      },
    ],
  },
  {
    id: 9,
    name: "詹家镇",
    child: [
      {
        id: 91,
        name: "芝江",
      },
      {
        id: 92,
        name: "马叶",
      },
      {
        id: 93,
        name: "詹家",
      },
    ],
  },
  {
    id: 10,
    name: "龙洲街道",
    child: [
      {
        id: 101,
        name: "官潭村",
      },
      {
        id: 102,
        name: "田铺村",
      },
      {
        id: 103,
        name: "半爿月村",
      },
      {
        id: 104,
        name: "寺后村",
      },
      {
        id: 105,
        name: "清廉社区",
      },
      {
        id: 106,
        name: "莲湖社区",
      },
      {
        id: 107,
        name: "河西街社区",
      },
      {
        id: 108,
        name: "阳光社区",
      },
      {
        id: 109,
        name: "翠光社区",
      },
    ],
  },
  {
    id: 11,
    name: "湖镇镇",
    child: [
      {
        id: 111,
        name: "新光村",
      },
      {
        id: 112,
        name: "七都村",
      },
      {
        id: 113,
        name: "下库村",
      },
      {
        id: 114,
        name: "下田畈村",
      },
    ],
  },
  {
    id: 12,
    name: "塔石镇",
    child: [
      {
        id: 121,
        name: "塔石",
      },
      {
        id: 122,
        name: "泽随",
      },
      {
        id: 123,
        name: "雅村",
      },
    ],
  },
  {
    id: 13,
    name: "沐尘畲族乡",
    child: [
      {
        id: 131,
        name: "沐尘村",
      },
    ],
  },
  {
    id: 14,
    name: "大街乡",
    child: [
      {
        id: 141,
        name: "大街村",
      },
    ],
  },
]); //存放地图上服务圈数据

var circle;
const fwqList = ref([]);

//资源要素
const yaosuTotal = ref([
  {
    id: 0,
    name: "体育场所",
    img: j0,
    wz: false,
  },

  {
    id: 1,
    name: "幼儿园",
    img: j1,
    wz: false,
  },
  {
    id: 2,
    name: "小学",
    img: j2,
    wz: false,
  },
  {
    id: 3,
    name: "初中",
    img: j3,
    wz: false,
  },
  {
    id: 4,
    name: "高中",
    img: j4,
    wz: false,
  },
  {
    id: 5,
    name: "医院",
    img: j5,
    wz: false,
  },
  {
    id: 6,
    name: "南孔书院",
    img: j6,
    wz: false,
  },
  {
    id: 7,
    name: "养老机构",
    img: j7,
    wz: false,
  },
  {
    id: 8,
    name: "汽车充电桩",
    img: j8,
    wz: true,
  },
  {
    id: 9,
    name: "卫生服务中心",
    img: j9,
    wz: true,
  },
  {
    id: 10,
    name: "AED",
    img: j10,
    wz: true,
  },
]);
// 鼠标点击添加点位
let currentMarker = null; // 用于保存当前标记的引用
//--------定义方法----------------------------------------
//地图初始化
const initMap = () => {
  map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
  map.setMapType(BMAP_SATELLITE_MAP);
  map.enableScrollWheelZoom(true);
  goMapCenter([119.178783, 29.034583], 11);

  //加载乡镇信息
  loadTown();
  //渲染地块
  addPolygonCounty();
  //添加街道名
  addJd();
};
//点击龙游县初始化
const csh = () => {
  clear();
  xkzDk.length = 0;
  map.removeEventListener("click", markera);
  if (currentMarker !== null) {
    map.removeOverlay(currentMarker);
  }
  goMapCenter([119.178783, 29.034583], 11);
  getData();
  getDataBq();
};
//清空村社的数据
const clear = () => {
  xuanzhongCs.value = [];
  sfdd.value = false;
  title_choose.value = "";
  title_jd.value = "";
  title_cs.value = "";
  cfJd.value = "";
  cfCs.value = "";

  cs_un_choose_arr.value.forEach((item, index) => {
    map.removeOverlay(cs_un_choose_arr.value[index]);
  });
  cs_choose_arr.value.forEach((item, index) => {
    map.removeOverlay(cs_choose_arr.value[index]);
  });
  cs_number_name_arr.value.forEach((item, index) => {
    map.removeOverlay(cs_number_name_arr.value[index]);
  });
  cs_name_arr.value.forEach((item, index) => {
    map.removeOverlay(cs_name_arr.value[index]);
  });
  cs_qk_arr.value.forEach((item, index) => {
    map.removeOverlay(cs_qk_arr.value[index]);
  });
  cs_dd_arr.value.forEach((item, index) => {
    map.removeOverlay(cs_dd_arr.value[index]);
  });
  cs_qk_arr.value = [];
  cs_name_arr.value = [];
  cs_number_name_arr.value = [];
  cs_choose_arr.value = [];
  cs_un_choose_arr.value = [];
  cs_dd_arr.value = [];
};
//定义地图中点
const goMapCenter = (point, zoom) => {
  map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
};
//0岁时,改为小于1岁
const ageLess0 = computed(() => {
  return function (item) {
    if (item == "0岁") {
      return "小于1岁";
    } else {
      return item;
    }
  };
});
//鼠标点击添加点位
const BMAP = () => {
  // 添加鼠标点击事件监听器
  map.addEventListener("click", markera);
};
const markera = (e) => {
  console.log(`"center":[${e.latlng.lng},${e.latlng.lat}],`);
  // 检查并移除当前标记
  if (currentMarker !== null) {
    map.removeOverlay(currentMarker);
  }
  // 创建新标记
  let icons = new BMapGL.Icon(AED, new BMapGL.Size(24, 62));
  var marker = new BMapGL.Marker(new BMapGL.Point(e.latlng.lng, e.latlng.lat), {
    icon: icons,
  });
  // 将新标记添加到地图中并更新当前标记引用
  map.addOverlay(marker);
  currentMarker = marker;
};
//点击人口数
const buten = async (item) => {
  getData(item.id, item.age);
  getDatas(cfJd.value, item.age);
};
//点击特殊标签
const buten2 = async (item) => {
  getDataBqs(cfJd.value, cfCs.value, item.id);
};
//人口
const getData = async (i, e) => {
  if (e == "9999") {
    e = "";
  }
  try {
    const res = await http.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`);
    if (res.code == 200) {
      if (cfJd.value == "") {
        personTotal.value = [
          {
            id: "9999",
            ages: "总人口",
            age: "",
            value: "res.data.total",
          },
          {
            id: "6666",
            name: "近一年死亡",
            value: "5650",
            ages: "近一年死亡",
            age: "1000",
            percent: "",
          },
        ];
        personTotal.value[0].rksl = res.data.total;
        personTotal.value[0].ages = "总人口";
        personTotal.value[1].rksl = res.data.swrs;
        personTotal.value[1].ages = "近一年死亡";
        personTotal.value[1].percent = res.data.swrsPercent;
        res.data.age.forEach((item, index) => {
          personTotal.value.push({
            id: index + 1,
            rksl: item.rksl,
            age: item.age + "",
            ages: item.age + "岁",
            percent: item.percent,
          });
        });
        // console.log(personTotal.value,"111");
      }
      mapTownCount.map((item) => {
        item.swrs = 0;
        res.data.townWwrs.map((items) => {
          if (items.xzjd == item.name) {
            item.swrs = items.swrs;
          }
        });
      });
      mapTownCount.map((item) => {
        item.number = 0;
        res.data.town.map((items) => {
          if (items.town == item.name) {
            item.number = items.rksl;
          }
        });
      });
      // 年龄百分比
      const agename = [
        "09Percent",
        "1019Percent",
        "2029Percent",
        "3039Percent",
        "4049Percent",
        "5059Percent",
        "6069Percent",
        "7079Percent",
        "8089Percent",
        "9099Percent",
        "100nlPercent",
      ];
      if (res.data.ageGroupsPercent) {
        console.log(PopulationRatio.value[0].progress);
        agename.forEach((key, index) => {
          if (PopulationRatio.value[index]) {
            PopulationRatio.value[index].progress =
              res.data.ageGroupsPercent[key];
          }
        });
      }
    }
  } catch (error) {
    console.error("Error fetching data:", error);
  }
  if (i) {
    changeRs(i);
  }
};
const getDatas = async (e, i) => {
  if (i == "9999") {
    i = "";
  }
  await http
    .get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`)
    .then((res) => {
      if (res.code == 200) {
        if (cfCs.value != "") {
        } else if (cfJd.value !== "") {
          personTotal.value = [
            {
              id: "9999",
              ages: "总人口",
              age: "",
              value: "res.data.total",
            },
            {
              id: "6666",
              name: "近一年死亡",
              value: "5650",
              ages: "近一年死亡",
              age: "1000",
              percent: "",
            },
          ];
          personTotal.value[0].rksl = res.data.total;
          personTotal.value[0].ages = "总人口";
          personTotal.value[1].rksl = res.data.swrs;
          personTotal.value[1].ages = "近一年死亡";
          personTotal.value[1].percent = res.data.swrsPercent;
          res.data.age.forEach((item, index) => {
            personTotal.value.push({
              id: index + 1,
              rksl: item.rksl,
              age: item.age + "",
              ages: item.age + "岁",
              percent: item.percent,
            });
          });
        }
        if (cfJd.value != "") {
          xkzCenter.map((item) => {
            // item.number = 0;
            res.data.committeeSwrs.map((items) => {
              if (items.csq == item.name) {
                item.swrs = items.swrs;
              }
            });
          });

          xkzCenter.map((item) => {
            item.number = 0;
            res.data.committee.map((items) => {
              if (items.committee == item.name) {
                item.number = items.rksl;
              }
            });
          });
        }

        cs_name_arr.value.forEach((item, index) => {
          map.removeOverlay(cs_name_arr.value[index]);
        });
        cs_number_name_arr.value.forEach((item, index) => {
          map.removeOverlay(cs_number_name_arr.value[index]);
        });
        cs_dd_arr.value.forEach((item, index) => {
          map.removeOverlay(cs_dd_arr.value[index]);
        });

        if (title_jd.value == "") {
        } else {
          if (sfdd.value) {
            if (choose.value.person == "") {
              cs_dd_arr.value.forEach((item, index) => {
                map.removeOverlay(cs_dd_arr.value[index]);
              });
              cs_dd_arr.value = [...xuanzhongCs.value];
              cs_dd_arr.value.map((item, index) => {
                DGcreateCs(item, index);
              });
            } else {
              cs_dd_arr.value.forEach((item, index) => {
                map.removeOverlay(cs_dd_arr.value[index]);
              });
              cs_dd_arr.value = [...xuanzhongCs.value];
              cs_dd_arr.value.map((item, index) => {
                DGcreateCs2(item, index);
              });
            }
          } else {
            if (choose.value.person == "") {
              addCs();
            } else {
              addCs2();
            }
          }
        }

         // 年龄百分比
      const agename = [
        "09Percent",
        "1019Percent",
        "2029Percent",
        "3039Percent",
        "4049Percent",
        "5059Percent",
        "6069Percent",
        "7079Percent",
        "8089Percent",
        "9099Percent",
        "100nlPercent",
      ];
      if (res.data.ageGroupsPercent) {
        console.log(PopulationRatio.value[0].progress);
        agename.forEach((key, index) => {
          if (PopulationRatio.value[index]) {
            PopulationRatio.value[index].progress =
              res.data.ageGroupsPercent[key];
          }
        });
      }
      
      }
    });
};
const getDatas2 = async (e, i, cs) => {
  if (
    i == "cjr" ||
    i == "dibian" ||
    i == "db" ||
    i == "gxy" ||
    i == "tnb" ||
    i == "tyjr" ||
    i == "kjer"
  ) {
    i = "";
  }
  await http
    .get(
      `/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}&committee=${cs}`
    )
    .then((res) => {
      if (res.code == 200) {
        personTotal.value = [
          {
            id: "9999",
            ages: "总人口",
            age: "",
            value: "res.data.total",
          },
          {
            id: "6666",
            name: "近一年死亡",
            value: "5650",
            ages: "近一年死亡",
            age: "1000",
          },
        ];
        personTotal.value[0].rksl = res.data.total;
        personTotal.value[0].ages = "总人口";
        personTotal.value[1].rksl = res.data.swrs;
        personTotal.value[1].ages = "近一年死亡";
        personTotal.value[1].percent = res.data.swrsPercent;
        res.data.age.forEach((item, index) => {
          personTotal.value.push({
            id: index + 1,
            rksl: item.rksl,
            age: item.age + "",
            ages: item.age + "岁",
            percent: item.percent,
          });
        });
        xkzCenter.map((item) => {
          item.swrs = 0;
          res.data.committeeSwrs.map((items) => {
            if (items.csq == item.name) {
              item.swrs = items.swrs;
            }
          });
        });
      }
    });
};
//特殊标签
//获取特殊标签
//特殊标签列表数据请求
const getDataBq = async (jd, cs) => {
  await http
    .get(`/api/ggfwyth/ysyzt/getTsbq?csq=${cs || ""}&xzjd=${jd || ""}`)
    .then((res) => {
      if (res.code == 200) {
        tsbqTotal.value.length = 0;
        for (let name in res.data) {
          let idd = "";
          for (let v = 0; v < tsbq_id_total.value.length; v++) {
            if (tsbq_id_total.value[v].name == name) {
              idd = tsbq_id_total.value[v].id;
            }
          }
          tsbqTotal.value.push({
            id: idd,
            name: name,
            rksl: res.data[name] || 0,
          });
        }
      }
    });
};
const getDataBqs = async (jd, cs, bq) => {
  await getDataBqJD(bq);
  getDataBqs2(cfJd.value, cfCs.value, bq);
  // await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
  //   if (res.code == 200) {
  //     mapTownCount.map((item) => {
  //       item.numbers = 0;
  //       res.data.map((items) => {
  //         if (items.xzjd == item.name) {
  //           item.numbers = items.rs;
  //         }
  //       });
  //     });
  //   }
  // });
};
//特殊标签获取街道内部人数
const getDataBqs2 = async (jd, cs, bq, f = true) => {
  //f用来判断执不执行changeRs2
  let data = {};
  let vv = 0;
  if (cs == "" && jd == "") {
    data = {
      tsbq: bq,
    };
    vv = 1;
  } else if (cs == "") {
    data = {
      xzjd: jd,
      tsbq: bq,
    };
    vv = 2;
  } else {
    data = {
      xzjd: jd,
      tsbq: bq,
      csq: cs,
    };
    vv = 3;
  }
  await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
    if (res.code == 200) {
      if (cfJd.value != "") {
        xkzCenter.map((item) => {
          item.numbers = 0;
          res.data.map((items) => {
            if (items.csq == item.name) {
              item.numbers = items.rs;
            }
          });
        });
      }

      if (f) {
        changeRs2(bq);
      }

      cs_name_arr.value.forEach((item, index) => {
        map.removeOverlay(cs_name_arr.value[index]);
      });
      cs_number_name_arr.value.forEach((item, index) => {
        map.removeOverlay(cs_number_name_arr.value[index]);
      });
      cs_dd_arr.value.forEach((item, index) => {
        map.removeOverlay(cs_dd_arr.value[index]);
      });
      if (title_jd.value == "") {
      } else {
        if (sfdd.value) {
          if (choose.value.person == "") {
            cs_dd_arr.value.forEach((item, index) => {
              map.removeOverlay(cs_dd_arr.value[index]);
            });
            cs_dd_arr.value = [...xuanzhongCs.value];
            cs_dd_arr.value.map((item, index) => {
              DGcreateCs(item, index);
            });
          } else {
            cs_dd_arr.value.forEach((item, index) => {
              map.removeOverlay(cs_dd_arr.value[index]);
            });
            cs_dd_arr.value = [...xuanzhongCs.value];
            cs_dd_arr.value.map((item, index) => {
              DGcreateCs2(item, index);
            });
          }
        } else {
          if (choose.value.person == "") {
            addCs();
          } else {
            addCs2();
          }
        }
      }
    }
  });
};
//特殊标签单独获取各个街道人数
const getDataBqJD = async (bq) => {
  let data = {};
  data = {
    tsbq: bq,
  };

  await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
    if (res.code == 200) {
      if (res?.data) {
        mapTownCount.map((item) => {
          item.numbers = 0;
          res.data.map((items) => {
            if (items.xzjd == item.name) {
              item.numbers = items.rs;
            }
          });
        });
      }
    }
  });
};
//人口，标签切换执行
const changeRs = (id) => {
  if (choose.value.person == id) {
    choose.value.person = "";
    jdm_number_arr.value.forEach((item, index) => {
      map.removeOverlay(jdm_number_arr.value[index]);
    });
    addJd();
  } else {
    choose.value.person = id;
    jdm_arr.value.forEach((item, index) => {
      map.removeOverlay(jdm_arr.value[index]);
    });
    jdm_number_arr.value.forEach((item, index) => {
      map.removeOverlay(jdm_number_arr.value[index]);
    });
    addJd2();
  }
};
const changeRs2 = (id) => {
  if (choose.value.person == id) {
    choose.value.person = "";
    jdm_number_arr.value.forEach((item, index) => {
      map.removeOverlay(jdm_number_arr.value[index]);
    });
    addJd();
  } else {
    choose.value.person = id;
    jdm_arr.value.forEach((item, index) => {
      map.removeOverlay(jdm_arr.value[index]);
    });
    jdm_number_arr.value.forEach((item, index) => {
      map.removeOverlay(jdm_number_arr.value[index]);
    });
    addJd2();
  }
};
//点击街道，回到街道
const to_jd = (item_name) => {
  clear();
  title_jd.value = item_name;
  map.removeEventListener("click", markera);
  if (currentMarker !== null) {
    map.removeOverlay(currentMarker);
  }

  // townName.value = item_name;
  // if (item_name == cfJd.value) {
  // } else {
  // console.log(111, choose.value.person);
  cfJd.value = item_name;
  let jdCenter = [];
  if (item_name == "溪口镇") {
    BMAP();
    if (choose.value.person == "") {
      getDatas("溪口镇", "");
    }

    getDataBq(cfJd.value, "");
    if (
      choose.value.person == "cjr" ||
      choose.value.person == "dibian" ||
      choose.value.person == "db" ||
      choose.value.person == "gxy" ||
      choose.value.person == "tnb" ||
      choose.value.person == "tyjr" ||
      choose.value.person == "kjer"
    ) {
      getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
      getDatas("溪口镇", "");
    } else if (choose.value.person != "") {
      if (choose.value.person == "9999") {
        getDatas("溪口镇", "");
      } else {
        if (choose.value.person == 1) {
          getDatas("溪口镇", "0"); //0岁传字符串
        } else {
          getDatas("溪口镇", choose.value.person - 1);
        }
      }
    }
    loadCs(item_name);
    addPolygonCountyCs();
    mapTownCount.map((item) => {
      if (item.name == item_name) {
        jdCenter = item.center;
      }
    });
    goMapCenter(jdCenter, 13);
  }
  // }
};
//--------公共服务圈-----------
//点击服务圈村
const changeFwq = async (id, name, names) => {
  if (choose.value.fwq == id) {
    choose.value.fwq = null;
    csh(); //地图初始化
    addPolygonCounty(); //添加地区
    fwq_list_arr.value.forEach((item, index) => {
      map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标
    });
    fwq_list_arr.value = [];
    map.removeOverlay(circle); // 清空服务圈 圆
    circle = null;
    // drawACircle("hide"); //隐藏服务圈  圆
  } else {
    csh();
    await getServiceCircle(names, name);
    if (fwqList.value.length !== 0) {
      fwq_list_arr.value.forEach((item, index) => {
        map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标
      });
      map.removeOverlay(circle); // 清空服务圈 圆
      circle = null;
      fwq_list_arr.value = [];
      choose.value.fwq = id;
      map.clearOverlays(); //清空地图上所有的覆盖物
      // choose.value.person = "";
      addggfwq(); //创建公共服务圈
      setTimeout(() => {
        goMapCenter([data.fwqCoordinates1, data.fwqCoordinates2], 16); //中心点缩放
      }, 500);
    } else {
      ElMessage.warning("无数据");
    }
  }
};
// 服务圈数据
const getServiceCircle = async (communityName, townName) => {
  try {
    const response = await http.get(
      `/api/ggfwyth/ysyzt/zyysxx?csq=${communityName}&xzjd=${townName}`
    );
    if (response.code === 200) {
      updateFwqList(response.data, townName, communityName);
    }
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};
//创建公共服务圈
const addggfwq = () => {
  if (fwqList.value.length !== 0) {
    data.fwqCoordinates1 = [];
    data.fwqCoordinates2 = [];
    fwqList.value.map((item, index) => {
      data.fwqCoordinates1.push(item.point[0]);
      data.fwqCoordinates2.push(item.point[1]);
      createCustomOverlay(item, index);
    });
    console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2);
    function calculateAverage(coordinates) {
      // const numericCoordinates = coordinates.map(Number); // 将字符串转换为数字
      const numericCoordinates = coordinates.map((coord) => {
        // 使用正则表达式去除非数字字符（保留小数点和负号）
        const cleanedCoord = coord.replace(/[^0-9.-]/g, "");
        return Number(cleanedCoord); // 将清理后的字符串转换为数字
      });
      const sum = numericCoordinates.reduce((acc, val) => acc + val, 0); // 计算总和
      const average = sum / numericCoordinates.length; // 计算平均值
      return parseFloat(average.toFixed(5)); // 保留5位小数并转换为数字
    }
    data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1);

    data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2);
    drawACircle();
  } else {
    ElMessage.warning("无数据");
  }
};
// 添加服务圈
const drawACircle = (v) => {
  // console.log("经纬度1", data.fwqCoordinates1, data.fwqCoordinates2);
  if (!circle) {
    var point = new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2);
    circle = new BMapGL.Circle(point, 1000, {
      strokeColor: "yellow",
      strokeWeight: 2,
      strokeOpacity: 0.8,
      fillOpacity: 0.1,
      strokeStyle: "dashed",
      zIndex: 99,
      // fillColor: "yellow",
    });
    map.addOverlay(circle);
  }
};
// 添加公共服务圈的图标
const createCustomOverlay = (polygon, indexx) => {
  // data.fwqCoordinates = polygon.point;
  function createLabelDOM() {
    var content = document.createElement("div");
    content.style.display = "flex";
    content.style.flexDirection = "column";
    content.style.alignItems = "center";
    content.style.height = "40px";
    content.style.width = "40px";
    content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);

    var div = document.createElement("div");
    div.style.color = "#ddd";
    div.style.padding = `${polygon.padding}`;
    div.style.whiteSpace = "nowrap";
    div.style.MozUserSelect = "none";
    div.style.fontSize = "12px";
    div.style.borderRadius = "10px";
    div.style.display = "flex";
    div.style.justifyContent = "center";
    div.style.alignItems = "center";
    div.style.background = `url(${polygon.img}) no-repeat 0/100% 100%`;
    div.style.cursor = "pointer";
    div.style.transform = `translate(${polygon.x}px,${polygon.y}px)`;
    div.setAttribute("name", this.properties.title);

    var title = document.createElement("div");
    title.style.fontSize = "14px";
    title.style.fontWeight = "700";
    title.style.marginLeft = "0px";
    title.style.color = `${polygon.textColor}`;
    div.appendChild(title);
    title.appendChild(document.createTextNode(this.properties.title));

    let img2 = document.createElement("img");
    img2.style.width = "20px";
    img2.style.height = "20px";
    img2.src = this.properties.imgSrc2;

    content.appendChild(div);
    content.appendChild(img2);

    // div.onclick = function () {
    //   addPolygonTown(this.getAttribute('name'))
    //   removeCustomOverlay()
    //   addStage(this.getAttribute('name'))
    //   state.mapStatus = 1
    // }

    return content;
  }
  fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
    point: new BMapGL.Point(...polygon.point),
    opacity: 0.5,
    offsetY: 0,
    properties: {
      title: polygon.name,
      imgSrc2: polygon.img2,
      type: "customOverlay",
    },
  });
  // var labelopts = {
  //   position: new BMapGL.Point(polygon.point[0], polygon.point[1]), // 指定文本标注所在的地理位置
  //   offset: new BMapGL.Size(0, -97), // 设置文本偏移量
  // };
  // var label = new BMapGL.Label(polygon.name, labelopts);
  // label.setStyle({
  //   color: "#fff",
  //   borderRadius: "1px",
  //   padding: "5px 13px",
  //   //  background: `url(${b1s}) no-repeat 0/100% 100%`,
  //   fontSize: "15px",
  //   lineHeight: "20px",
  //   border: "0",
  //   transform: "translateX(-50%)",
  // });
  map.addOverlay(fwq_list_arr.value[indexx]);
};
const updateFwqList = (data, townName, communityName) => {
  let updatedFwqList = [];
  jbfwqTotal.value.forEach((town) => {
    if (town.name === townName) {
      town.child.forEach((community) => {
        if (community.name === communityName) {
          updatedFwqList = data
            .filter(
              (item) => item.xzjd === townName && item.csq === communityName
            )
            .map((item) => ({
              x: 53,
              y: 0,
              img: fwqbg1,
              img2: b2,
              name: item.zyysmc,
              point: [item.jd, item.wd],
              padding: "4px 8px 10px",
              textColor: "#fff",
              bgColor: "#00b050",
            }));
          community.fwqList = updatedFwqList;
        }
      });
    }
  });
  fwqList.value = updatedFwqList;
  // console.log(jbfwqTotal.value[4].child[0], "乡镇");
};
//------------------------------
//-------乡镇街道级别---------
//加载乡镇信息
const loadTown = () => {
  for (let v of mapTown.features) {
    if (v.geometry.coordinates.length > 1) {
      for (let w in v.geometry.coordinates) {
        if (v.geometry.coordinates[w][0].length < 60) continue;
        mapTownDataDK.push({
          name: v.properties.name,
          point: v.geometry.coordinates[w][0],
        });
      }
    } else {
      mapTownDataDK.push({
        name: v.properties.name,
        point: v.geometry.coordinates[0],
      });
    }
  }
};
//添加地图区块
const addPolygonCounty = () => {
  map.clearOverlays();
  let fillColor = "#ffffff";
  mapTownDataDK.map((item) => {
    item.leg = 0;
    //地区的坐标范围
    let points = [];
    item.point.map((p) => points.push(new BMapGL.Point(...p)));
    if (points.length) {
      //创建面
      let polygon = new BMapGL.Polygon(points, {
        strokeColor: "#5E9AD2",
        strokeWeight: 2,
        strokeOpacity: 0.8,
        fillColor: fillColor,
        fillOpacity: 0.7,
        name: item.name,
        zIndex: 92,
      });

      map.addOverlay(polygon);
      polygon.addEventListener("click", () => {
        // townName.value = item.name;
        if (item.name == cfJd.value) {
        } else {
          // cs_qk_arr.value.forEach((item, index) => {
          //   map.removeOverlay(cs_qk_arr.value[index]);
          // });
          // cs_qk_arr.value.length=0;
          clear();
          xkzDk.length = 0;
          cfJd.value = item.name;
          let jdCenter = [];
          // if (item.name == "溪口镇") {
          BMAP();
          loadCs(item.name);
          addPolygonCountyCs();
          getDataBq(cfJd.value, "");
          if (choose.value.person == "") {
            getDatas(cfJd.value, "");
          }
          if (
            choose.value.person == "cjr" ||
            choose.value.person == "dibian" ||
            choose.value.person == "db" ||
            choose.value.person == "gxy" ||
            choose.value.person == "tnb" ||
            choose.value.person == "tyjr" ||
            choose.value.person == "kjer"
          ) {
            getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
            getDatas(cfJd.value, "");
          } else if (choose.value.person != "") {
            if (choose.value.person == "9999") {
              getDatas(cfJd.value, "");
            } else {
              if (choose.value.person == 1) {
                getDatas(cfJd.value, "0"); //0岁传字符串
              } else {
                getDatas(cfJd.value, choose.value.person - 1);
              }
            }
          }
          if (title_jd.value == item.name) {
          } else {
            title_jd.value = item.name;
          }

          mapTownCount.map((itemm) => {
            if (itemm.name == item.name) {
              jdCenter = itemm.center;
            }
          });
          goMapCenter(jdCenter, 13);
          // }
          // else {
          //   loadCs(item.name);
          //   addPolygonCountyCs();
          //   // map.removeEventListener("click", markera);
          //   // if (currentMarker !== null) {
          //   //   map.removeOverlay(currentMarker);
          //   // }
          //   // clear();
          //   // getData();
          //   // getDataBq();
          // }
        }
      });
    }
  });
};
//添加街道名
const addJd = () => {
  mapTownCount.map((item, index) => {
    createCustomOverlayJd(item, index);
  });
};
//添加街道名2含数量
const addJd2 = () => {
  nextTick(() => {
    mapTownCount.map((item, index) => {
      createCustomOverlayJd2(item, index);
    });
  });

  // if (center_now.value[0] == 119.178783) {
  //   goMapCenter([119.178783, 29.034581], 11);
  // }
};
// 添加地图上的街道名
const createCustomOverlayJd = (polygon, indexx) => {
  function createLabelDOM() {
    var content = document.createElement("div");
    content.style.display = "flex";
    content.style.flexDirection = "column";
    content.style.alignItems = "center";
    content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
    content.style.height = "20px";
    content.style.width = "20px";
    var div = document.createElement("div");
    div.style.color = "#333";
    div.style.whiteSpace = "nowrap";
    div.style.MozUserSelect = "none";
    div.style.display = "flex";
    div.style.justifyContent = "center";
    div.style.alignItems = "center";
    div.style.cursor = "pointer";
    div.setAttribute("name", this.properties.title);

    var title = document.createElement("div");
    title.style.fontSize = "10px";
    title.style.fontWeight = "600";
    title.style.color = "#000000";
    div.appendChild(title);
    title.appendChild(document.createTextNode(this.properties.title));
    content.appendChild(div);
    return content;
  }
  jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
    point: new BMapGL.Point(...polygon.center),
    opacity: 0.5,
    offsetY: -10,
    properties: {
      title: polygon.name,
      type: "customOverlay",
    },
  });
  map.addOverlay(jdm_arr.value[indexx]);
};
// 添加地图上的街道名+(人数,标签)
const createCustomOverlayJd2 = (polygon, indexx) => {
  function createLabelDOM() {
    var content = document.createElement("div");
    content.style.display = "flex";
    content.style.flexDirection = "column";
    content.style.alignItems = "center";
    content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
    content.style.height = "30px";
    content.style.width = "30px";
    var div = document.createElement("div");
    div.style.color = "#333";
    div.style.whiteSpace = "nowrap";
    div.style.MozUserSelect = "none";
    div.style.display = "flex";
    div.style.flexDirection = "column";
    div.style.justifyContent = "center";
    div.style.alignItems = "center";
    div.style.cursor = "pointer";
    div.setAttribute("name", this.properties.title);

    var title = document.createElement("div");
    title.style.fontSize = "10px";
    title.style.fontWeight = "600";
    title.style.color = "#000000";
    div.appendChild(title);
    title.appendChild(document.createTextNode(this.properties.title));
    content.appendChild(div);
    var number = document.createElement("div");
    number.style.fontSize = "12px";
    number.style.fontWeight = "600";
    number.style.color = "#FEFF6C";
    number.style.textShadow = "0px 2px 4px rgba(0,0,0,0.5)";
    div.appendChild(number);
    number.appendChild(document.createTextNode(this.properties.number));
    content.appendChild(div);
    // div.onclick = function () {
    //   let jdCenter = [];
    //   if (polygon.name == "溪口镇") {
    //     title_choose.value = title_choose.value + `>${polygon.name}`;
    //     loadCs();
    //     addPolygonCountyCs();
    //     mapTownCount.map((item) => {
    //       if (item.name == "溪口镇") {
    //         jdCenter = item.center;
    //       }
    //     });
    //     addCs2();
    //     goMapCenter(jdCenter, 14);
    //   }
    // };
    return content;
  }
  let num = "";
  if (choose.value.person == "6666") {
    console.log(1);
    num = "swrs";
  } else if (
    choose.value.person == "cjr" ||
    choose.value.person == "dibian" ||
    choose.value.person == "db" ||
    choose.value.person == "gxy" ||
    choose.value.person == "tnb" ||
    choose.value.person == "tyjr" ||
    choose.value.person == "kjer"
  ) {
    num = "numbers";
  } else {
    num = "number";
  }
  jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
    point: new BMapGL.Point(...polygon.center),
    opacity: 0.5,
    offsetY: 0,
    properties: {
      title: polygon.name,
      number: polygon[`${num}`],
      type: "customOverlay",
    },
  });
  map.addOverlay(jdm_number_arr.value[indexx]);
};
//------------------------------
//---------村社级别------------
//加载村社信息
const loadCs = (name) => {
  xkzCenter.length = 0;
  cssj.forEach((item, index) => {
    if (item.name == name) {
      csqk.value = item.sj;
    }
  });
  for (let v of csqk.value.features) {
    if (v.geometry.coordinates.length > 1) {
      for (let w in v.geometry.coordinates) {
        if (v.geometry.coordinates[w][0].length < 60) continue;
        xkzDk.push({
          name: v.properties.name,
          point: v.geometry.coordinates[w],
        });
      }
      xkzCenter.push({
        name: v.properties.name,
        center: v.properties.center,
      });
    } else {
      xkzDk.push({
        name: v.properties.name,
        point: v.geometry.coordinates[0],
      });
      xkzCenter.push({
        name: v.properties.name,
        center: v.properties.center,
      });
    }
  }
};
//添加村社区块
const addPolygonCountyCs = () => {
  console.log(11111111111111, xkzDk);
  xkzDk.map((item, index) => {
    let num = index % 9;
    let fillColor = colorList[num].bg;
    //地区的坐标范围
    let points = [];
    item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
    if (points.length) {
      //创建面
      cs_qk_arr.value[index] = new BMapGL.Polygon(points, {
        strokeColor: fillColor,
        strokeWeight: 2,
        strokeOpacity: 0.8,
        fillColor: fillColor,
        fillOpacity: 0.7,
        name: item.name,
        zIndex: 99,
      });
      map.addOverlay(cs_qk_arr.value[index]);
      cs_qk_arr.value[index].addEventListener("click", () => {
        console.log('名字',item.name);
      
        cfCs.value = item.name;
        title_cs.value = item.name;
        sfdd.value = true;
        xkzCenter.forEach((a, b) => {
          if (a.name == item.name) {
            cs_dd_arr.value.push(a);
            xuanzhongCs.value.push(a);
          }
        });
        chooseCsList.value.length = 0;
        unChooseList.value.length = 0;
        xkzDk.forEach((itemm, indexx) => {
          if (itemm.name == item.name) {
            chooseCsList.value.push(itemm);
          } else {
            unChooseList.value.push(itemm);
          }
        });
        cs_qk_arr.value.forEach((item, index) => {
          map.removeOverlay(cs_qk_arr.value[index]);
        });
        cs_name_arr.value.forEach((item, index) => {
          map.removeOverlay(cs_name_arr.value[index]);
        });
        cs_number_name_arr.value.forEach((item, index) => {
          map.removeOverlay(cs_number_name_arr.value[index]);
        });
        getDataBq(cfJd.value, cfCs.value);
        if (
          choose.value.person == "cjr" ||
          choose.value.person == "dibian" ||
          choose.value.person == "db" ||
          choose.value.person == "gxy" ||
          choose.value.person == "tnb" ||
          choose.value.person == "tyjr" ||
          choose.value.person == "kjer"
        ) {
          getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
        } else {
          //   getDataBqs(cfJd.value, cfCs.value);
        }
        //这段注意
        getDatas2(cfJd.value, choose.value.person, cfCs.value);
        addCsChoose();
        addCsUnChoose();
        if (choose.value.person == "") {
          cs_dd_arr.value.map((item, index) => {
            DGcreateCs(item, index);
          });
        } else {
          cs_dd_arr.value.map((item, index) => {
            DGcreateCs2(item, index);
          });
        }
      });
    }
  });
};
//添加选中社区
const addCsChoose = () => {
  chooseCsList.value.map((item, index) => {
    sqname.value = item.name;
    let fillColor = "blue";
    //地区的坐标范围
    let points = [];
    item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
    if (points.length) {
      //创建面
      cs_choose_arr.value[index] = new BMapGL.Polygon(points, {
        strokeColor: fillColor,
        strokeWeight: 2,
        strokeOpacity: 0.8,
        fillColor: fillColor,
        fillOpacity: 0.4,
        name: item.name,
        zIndex: 99,
      });
      map.addOverlay(cs_choose_arr.value[index]);
    }
  });
};
//添加未选中社区
const addCsUnChoose = () => {
  unChooseList.value.map((item, index) => {
    let fillColor = "RGBA(125, 140, 154, 1)";
    //地区的坐标范围
    let points = [];
    item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
    if (points.length) {
      //创建面
      cs_un_choose_arr.value[index] = new BMapGL.Polygon(points, {
        strokeColor: fillColor,
        strokeWeight: 2,
        strokeOpacity: 0.8,
        fillColor: fillColor,
        fillOpacity: 0.5,
        name: item.name,
        zIndex: 99,
      });
      map.addOverlay(cs_un_choose_arr.value[index]);
      cs_un_choose_arr.value[index].addEventListener("click", () => {
        cfCs.value = item.name;
        title_cs.value = cfCs.value;
        sfdd.value = true;
        cs_dd_arr.value.forEach((item, index) => {
          map.removeOverlay(cs_dd_arr.value[index]);
        });
        cs_un_choose_arr.value.forEach((item, index) => {
          map.removeOverlay(cs_un_choose_arr.value[index]);
        });
        cs_choose_arr.value.forEach((item, index) => {
          map.removeOverlay(cs_choose_arr.value[index]);
        });
        chooseCsList.value.length = 0;
        unChooseList.value.length = 0;
        cs_dd_arr.value = [];
        xuanzhongCs.value = [];
        xkzCenter.forEach((a, b) => {
          if (a.name == item.name) {
            cs_dd_arr.value.push(a);
            xuanzhongCs.value.push(a);
          }
        });
        xkzDk.forEach((itemm, indexx) => {
          if (itemm.name == item.name) {
            chooseCsList.value.push(itemm);
          } else {
            unChooseList.value.push(itemm);
          }
        });
        cs_un_choose_arr.value.forEach((item, index) => {
          map.removeOverlay(cs_qk_arr.value[index]);
        });
        // getDataBqs(cfJd.value, cfCs.value);
        getDataBq(cfJd.value, cfCs.value);
        getDatas2(cfJd.value, choose.value.person, cfCs.value);
        // if (
        //   choose.value.person == "cjr" ||
        //   choose.value.person == "dibian" ||
        //   choose.value.person == "db" ||
        //   choose.value.person == "gxy" ||
        //   choose.value.person == "tnb" ||
        //   choose.value.person == "tyjr" ||
        //   choose.value.person == "kjer"
        // ) {
        //   getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
        // }
        if (choose.value.person == "") {
          cs_dd_arr.value.map((item, index) => {
            DGcreateCs(item, index);
          });
        } else if (
          choose.value.person == "cjr" ||
          choose.value.person == "dibian" ||
          choose.value.person == "db" ||
          choose.value.person == "gxy" ||
          choose.value.person == "tnb" ||
          choose.value.person == "tyjr" ||
          choose.value.person == "kjer"
        ) {
          getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
        } else {
          setTimeout(() => {
            cs_dd_arr.value.map((item, index) => {
              DGcreateCs2(item, index);
            });
          }, 600);
        }
        addCsChoose();
        addCsUnChoose();
      });
    }
  });
};
//创建村社
const addCs = () => {
  xkzCenter.map((item, index) => {
    createCs(item, index);
  });
};
//创建村社(人数,标签)
const addCs2 = () => {
  xkzCenter.map((item, index) => {
    createCs2(item, index);
  });
};
//添加村社
const createCs = (polygon, indexx) => {
  function createLabelDOM() {
    var content = document.createElement("div");
    content.style.display = "flex";
    content.style.flexDirection = "column";
    content.style.alignItems = "center";
    content.style.height = "60px";
    content.style.width = "60px";
    content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);

    var div = document.createElement("div");
    div.style.color = "#333";
    div.style.whiteSpace = "nowrap";
    div.style.MozUserSelect = "none";
    div.style.display = "flex";
    div.style.justifyContent = "center";
    div.style.alignItems = "center";
    div.style.cursor = "pointer";
    div.style.padding = "5px";
    div.style.minWidth = "60px";
    div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
    div.style.transform = "translateY(50px)";
    div.setAttribute("name", this.properties.title);

    var title = document.createElement("div");
    title.style.fontSize = "10px";
    title.style.fontWeight = "600";
    title.style.color = "#000000";
    div.appendChild(title);
    title.appendChild(document.createTextNode(this.properties.title));
    content.appendChild(div);
    let img2 = document.createElement("img");
    img2.style.width = "20px";
    img2.style.height = "26px";
    img2.src = this.properties.imgSrc2;

    content.appendChild(div);
    content.appendChild(img2);
    return content;
  }
  cs_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
    point: new BMapGL.Point(...polygon.center),
    opacity: 0.5,
    offsetY: 0,
    properties: {
      title: polygon.name,
      imgSrc2: dwd,
      type: "customOverlay",
    },
  });
  map.addOverlay(cs_name_arr.value[indexx]);
};
//添加村社+(人数,标签)
const createCs2 = (polygon, indexx) => {
  function createLabelDOM() {
    var content = document.createElement("div");
    content.style.display = "flex";
    content.style.flexDirection = "column";
    content.style.alignItems = "center";
    content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
    content.style.height = "60px";
    content.style.width = "60px";
    var div = document.createElement("div");
    div.style.color = "#333";
    div.style.whiteSpace = "nowrap";
    div.style.MozUserSelect = "none";
    div.style.display = "flex";
    div.style.justifyContent = "space-between";
    div.style.alignItems = "center";
    div.style.cursor = "pointer";
    div.style.padding = "5px";
    div.style.minWidth = "90px";
    div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
    div.style.transform = "translateY(50px)";
    div.setAttribute("name", this.properties.title);

    var title = document.createElement("div");
    title.style.fontSize = "10px";
    title.style.fontWeight = "600";
    title.style.color = "#000000";
    div.appendChild(title);
    title.appendChild(document.createTextNode(this.properties.title));
    content.appendChild(div);

    var number = document.createElement("div");
    number.style.fontSize = "10px";
    number.style.fontWeight = "600";
    number.style.color = "black";
    div.appendChild(number);
    number.appendChild(document.createTextNode(this.properties.number));
    // content.appendChild(div);
    let img2 = document.createElement("img");
    img2.style.width = "20px";
    img2.style.height = "26px";
    img2.src = this.properties.imgSrc2;

    content.appendChild(div);
    content.appendChild(img2);
    return content;
  }
  let num = "";
  if (choose.value.person == "6666") {
    num = "swrs";
  } else if (
    choose.value.person == "cjr" ||
    choose.value.person == "dibian" ||
    choose.value.person == "db" ||
    choose.value.person == "gxy" ||
    choose.value.person == "tnb" ||
    choose.value.person == "tyjr" ||
    choose.value.person == "kjer"
  ) {
    num = "numbers";
  } else {
    num = "number";
  }
  cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
    point: new BMapGL.Point(...polygon.center),
    opacity: 0.5,
    offsetY: 0,
    properties: {
      title: polygon.name,
      number: polygon[`${num}`],
      imgSrc2: dwd,
      type: "customOverlay",
    },
  });
  map.addOverlay(cs_number_name_arr.value[indexx]);
};
//添加单个村社
const DGcreateCs = (polygon, indexx) => {
  function createLabelDOM() {
    var content = document.createElement("div");
    content.style.display = "flex";
    content.style.flexDirection = "column";
    content.style.alignItems = "center";
    content.style.height = "60px";
    content.style.width = "60px";
    content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);

    var div = document.createElement("div");
    div.style.color = "#333";
    div.style.whiteSpace = "nowrap";
    div.style.MozUserSelect = "none";
    div.style.display = "flex";
    div.style.justifyContent = "center";
    div.style.alignItems = "center";
    div.style.cursor = "pointer";
    div.style.padding = "5px";
    div.style.minWidth = "60px";
    div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
    div.style.transform = "translateY(50px)";
    div.setAttribute("name", this.properties.title);

    var title = document.createElement("div");
    title.style.fontSize = "10px";
    title.style.fontWeight = "600";
    title.style.color = "#000000";
    div.appendChild(title);
    title.appendChild(document.createTextNode(this.properties.title));
    content.appendChild(div);
    let img2 = document.createElement("img");
    img2.style.width = "20px";
    img2.style.height = "26px";
    img2.src = this.properties.imgSrc2;

    content.appendChild(div);
    content.appendChild(img2);
    return content;
  }
  cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
    point: new BMapGL.Point(...polygon.center),
    opacity: 0.5,
    offsetY: 0,
    properties: {
      title: polygon.name,
      imgSrc2: dwd,
      type: "customOverlay",
    },
  });
  map.addOverlay(cs_dd_arr.value[indexx]);
};
//添加单个村社(+数量)
const DGcreateCs2 = (polygon, indexx) => {
  console.log(choose.value.person, "单个村社", polygon);
  console.log("单个村社", polygon.name);
  console.log("单个村社", polygon.number);
  console.log("单个村社", polygon.swrs);
  function createLabelDOM() {
    var content = document.createElement("div");
    content.style.display = "flex";
    content.style.flexDirection = "column";
    content.style.alignItems = "center";
    content.style.height = "60px";
    content.style.width = "60px";
    content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);

    var div = document.createElement("div");
    div.style.color = "#333";
    div.style.whiteSpace = "nowrap";
    div.style.MozUserSelect = "none";
    div.style.display = "flex";
    div.style.justifyContent = "space-between";
    div.style.alignItems = "center";
    div.style.cursor = "pointer";
    div.style.padding = "5px";
    div.style.minWidth = "90px";
    div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
    div.style.transform = "translateY(50px)";
    div.setAttribute("name", this.properties.title);

    var title = document.createElement("div");
    title.style.fontSize = "10px";
    title.style.fontWeight = "600";
    title.style.color = "#000000";
    div.appendChild(title);
    title.appendChild(document.createTextNode(this.properties.title));
    content.appendChild(div);

    var number = document.createElement("div");
    number.style.fontSize = "10px";
    number.style.fontWeight = "600";
    number.style.color = "black";
    div.appendChild(number);
    number.appendChild(document.createTextNode(this.properties.number));
    content.appendChild(div);
    let img2 = document.createElement("img");
    img2.style.width = "20px";
    img2.style.height = "26px";
    img2.src = this.properties.imgSrc2;

    content.appendChild(div);
    content.appendChild(img2);
    return content;
  }
  let num = "";
  if (choose.value.person == "6666") {
    num = "swrs";
  } else if (
    choose.value.person == "cjr" ||
    choose.value.person == "dibian" ||
    choose.value.person == "db" ||
    choose.value.person == "gxy" ||
    choose.value.person == "tnb" ||
    choose.value.person == "tyjr" ||
    choose.value.person == "kjer"
  ) {
    num = "numbers";
  } else {
    num = "number";
  }
  cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
    point: new BMapGL.Point(...polygon.center),
    opacity: 0.5,
    offsetY: 0,
    properties: {
      title: polygon.name,
      number: polygon[`${num}`],
      imgSrc2: dwd,
      type: "customOverlay",
    },
  });
  map.addOverlay(cs_dd_arr.value[indexx]);
};
//适配
const reset_font = () => {
  let width = document.documentElement.clientWidth || document.body.clientWidth;
  let height =
    document.documentElement.clientHeight || document.body.clientHeight;
  document.querySelector(".header_content").style.transformOrigin = "top left";
  document.querySelector(".header_content").style.transform =
    "scale(" + width / 1920 + "," + height / 1080 + ")";
  if (document.querySelector(".left")) {
    document.querySelector(".left").style.transformOrigin = "bottom left";
    document.querySelector(".left").style.transform =
      "scale(" + width / 1920 + "," + height / 1080 + ")";
    document.querySelector(".right").style.transformOrigin = "bottom right";
    document.querySelector(".right").style.transform =
      "scale(" + width / 1920 + "," + height / 1080 + ")";
  }
};
onMounted(() => {
  tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
  reset_font();
  initMap();
  getData();
  getDataBq();
  BMAP();
});
</script>

<style lang="scss" scoped>
::v-deep .anchorBL {
  display: none;
}

.module {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  margin-top: 112px;
}

#id {
  z-index: 10;
}

//左侧弹框
.left {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 520px;
  height: 960px;
  background: linear-gradient(
      270deg,
      rgba(0, 52, 131, 0.69) 0%,
      rgba(0, 32, 83, 0.77) 50%,
      rgba(0, 60, 131, 0.74) 100%
    ),
    radial-gradient(
      128% 99% at 100% 46%,
      rgba(0, 48, 125, 0.29) 0%,
      rgba(0, 61, 134, 0.42) 100%
    );
  box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
  backdrop-filter: blur(3px);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  z-index: 12;
  overflow: hidden;

  //人口数
  .lyx {
    .content {
      box-sizing: border-box;
      margin-top: 20px;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      color: #ffffff;
      height: 350px;
      overflow: auto;

      .content_item {
        cursor: pointer;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px;
        padding-left: 24px;
        // padding-right: 5px;
        width: 48%;
        position: relative;
        // height: 57px;
        background-image: url(@/assets/images/map/unchoose.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 12px;
        font-size: 18px;
      }
      // .content_item_bg {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 40%;
      //   height: 100%;
      //   background: RGBA(53, 85, 114, 0.8);
      //   z-index: -1;
      // }
      .content_item:first-child {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px;
        padding-left: 24px;
        width: 100%;
        // height: 57px;
        background-image: url(@/assets/images/map/unchoose.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 12px;
      }

      .content_item:nth-child(2) {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px;
        padding-left: 24px;
        width: 100%;
        // height: 57px;
        background-image: url(@/assets/images/map/unchoose.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 12px;
      }

      .content_item_name {
        position: relative;
      }

      .content_item_name::before {
        content: "";
        position: absolute;
        width: 3px;
        height: 3px;
        background: #29ffc1;
        border: 3px solid rgba(0, 255, 189, 0.31);
        border-radius: 6px;
        top: 7.5px;
        left: -13px;
      }
      .content_item_percent {
        color: #6bfeff;
        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
      }
      .content_item_value {
        // display: flex;
      }

      .choose {
        background-image: url(@/assets/images/map/choose.png) !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
      }
    }

    .content::-webkit-scrollbar {
      display: none;
    }
  }

  //特殊标签
  .tsbq {
    margin-top: 40px;

    .content {
      box-sizing: border-box;
      margin-top: 20px;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      color: #ffffff;
      height: 220px;
      overflow: auto;

      .content_item {
        cursor: pointer;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px;
        padding-left: 24px;
        width: 48%;
        // height: 57px;
        background-image: url(@/assets/images/map/unchoose.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 12px;
        font-size: 18px;
      }

      // .content_item:last-child {
      //   box-sizing: border-box;
      //   display: flex;
      //   align-items: center;
      //   justify-content: space-between;
      //   padding: 24px;
      //   width: 100%;
      //   height: 57px;
      //   background-image: url(@/assets/images/map/unchoose.png);
      //   background-repeat: no-repeat;
      //   background-size: 100% 100%;
      //   margin-bottom: 12px;
      // }

      .content_item_name {
        position: relative;
      }

      .content_item_name::before {
        content: "";
        position: absolute;
        width: 3px;
        height: 3px;
        background: rgb(255, 226, 41);
        border: 3px solid rgba(255, 226, 41, 0.31);
        border-radius: 6px;
        top: 7.5px;
        left: -13px;
      }

      .choose {
        background-image: url(@/assets/images/map/choose.png) !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
      }
    }

    .content::-webkit-scrollbar {
      display: none;
    }
  }
}

//右侧弹框
.right {
  box-sizing: border-box;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 520px;
  height: 960px;
  background: linear-gradient(
      270deg,
      rgba(0, 52, 131, 0.69) 0%,
      rgba(0, 32, 83, 0.77) 50%,
      rgba(0, 60, 131, 0.74) 100%
    ),
    radial-gradient(
      128% 99% at 100% 46%,
      rgba(0, 48, 125, 0.29) 0%,
      rgba(0, 61, 134, 0.42) 100%
    );
  box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
  backdrop-filter: blur(3px);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  z-index: 12;
  overflow: hidden;

  .jbggfwq {
    .jbggfwq_content {
      height: 500px;
      overflow: auto;
      display: flex;
      flex-direction: column;
      margin-top: 15px;
      margin-bottom: 34px;

      .jbggfwq_content_item {
        margin-bottom: 5px;
        display: flex;
        // align-items: center;
        color: #ffffff;

        .jbggfwq_content_item_left {
          margin-right: 10px;
          width: 80px;
          height: 48px;
          line-height: 48px;
        }

        .jbggfwq_content_item_right {
          width: 370px;
          display: flex;
          flex-flow: row wrap;
          overflow: hidden;
          // border-radius: 6px;

          .jbggfwq_content_item_right_item {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            width: 92px;
            height: 48px;
            font-weight: 500;
            text-align: center;
            font-size: 16px;
            line-height: 28px;
            background: rgba(124, 151, 180, 0.8);
            // padding: 10px;
            margin-bottom: 4px;
            position: relative;
            /* 必须设置 position 属性以便伪元素定位 */
          }

          .jbggfwq_content_item_right_item::after {
            content: "";
            display: block;
            width: 1px;
            height: 18px;
            background-color: #fff;
            position: absolute;
            top: 14px;
            right: 0px;
          }

          :nth-child(4n).jbggfwq_content_item_right_item::after {
            opacity: 0;
          }

          :last-child.jbggfwq_content_item_right_item::after {
            opacity: 0;
          }

          .choose {
            background-image: url(@/assets/images/map/choose.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }

    .jbggfwq_content::-webkit-scrollbar {
      display: none;
    }
  }

  .zyys {
    .zyys_content {
      margin-top: 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      flex-flow: row wrap;

      .zyys_content_item {
        width: 110px;
        height: 54px;
        cursor: pointer;
        margin-bottom: 20px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(124, 151, 180, 0.8);

        .zyys_content_item_left {
          width: 18px;
          height: 18px;
          margin-right: 3px;
        }

        .zyys_content_item_right {
          font-weight: 500;
          font-size: 16px;
        }
      }

      .wz {
        width: 150px;
      }

      .choose {
        background-image: url(@/assets/images/map/choose.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}

.title {
  .title_name {
    cursor: pointer;
    display: flex;
    font-family: YouSheBiaoTiHei;
    font-size: 34px;
    font-weight: 900;
    // line-height: 44px;
    letter-spacing: 4px;
    margin-bottom: 15px;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #00ffff 100%);
    /* 使文字没有背景颜色的背景 */
    background-clip: text;
    /* 为了兼容性，添加渐变背景到IE */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    span {
      display: block;
      font-family: YouSheBiaoTiHei;
      font-size: 34px;
      font-weight: 900;
      // line-height: 44px;
      letter-spacing: 4px;
      margin-bottom: 15px;
      background: linear-gradient(
        180deg,
        #ffffff 0%,
        #ffffff 40%,
        #00ffff 100%
      );
      /* 使文字没有背景颜色的背景 */
      background-clip: text;
      /* 为了兼容性，添加渐变背景到IE */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .title_line {
    height: 4px;
    width: 100%;
    border-top: 1px solid #ffffff;
    border-bottom: 2px dashed #ffffff;
  }
}

.age-container {
  position: relative;
  width: 450px;
  height: 120px;
  display: flex;
  align-items: center;
  margin-top: 4px;

  .progress-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
  }

  .progress-container {
    position: relative;
    transition: width 0.3s ease;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.2);

    &.above-line {
      .dot {
        top: -20px;
      }

      .age-line {
        top: -30px;
      }

      span {
        &.above-line1 {
          top: -55px;
        }
      }

      &:nth-child(even) {
        .dot {
          top: -20px;
        }

        .age-line {
          top: -18px;
        }

        span {
          top: -40px;
        }
      }
    }

    &.below-line {
      .dot {
        top: 20px;
      }

      .age-line {
        top: 5px;
      }

      span {
        &.below-line1 {
          top: 40px;
        }
      }

      &:nth-child(odd) {
        .dot {
          top: 20px;
        }

        .age-line {
          top: 5px;
        }

        span {
          top: 26px;
        }
      }
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .age-line {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      height: 20px;
    }

    span {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 14px;

      &.above-line1 {
        top: -50px;
      }

      &.below-line1 {
        top: 50px;
      }
      &.above-line2 {
        top: -55px !important; //上面百分比
      }

      &.below-line2 {
        top: 40px !important ; //下面百分比
      }
    }
  }

  .progress-container:first-child {
    border-radius: 5px 0 0 5px;
  }

  .progress-container:last-child {
    border-radius: 0 5px 5px 0;
  }
}
</style>