3110 lines
78 KiB
Vue
3110 lines
78 KiB
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>
|
||
</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_value">
|
||
{{ item.rksl }}人
|
||
<div class="content_item_percent" v-if="item.ages != '总人口'">
|
||
({{ item.percent }}%)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tsbq">
|
||
<div class="title">
|
||
<div class="title_name"><span>特殊标签</span></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"><span> 基本公共服务圈</span></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"><span> 资源要素</span></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 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 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 15px;
|
||
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_value {
|
||
display: flex;
|
||
.content_item_percent {
|
||
margin-left: 2px;
|
||
color: #6bfeff;
|
||
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
|
||
.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 15px;
|
||
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 {
|
||
background-image: url(@/assets/images/map/map_title_bg.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
.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: 30px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: 45px !important ; //下面百分比
|
||
}
|
||
}
|
||
}
|
||
|
||
.progress-container:first-child {
|
||
border-radius: 5px 0 0 5px;
|
||
}
|
||
|
||
.progress-container:last-child {
|
||
border-radius: 0 5px 5px 0;
|
||
}
|
||
}
|
||
</style>
|