ggfwjsc/src/view/sy_mapcopy.vue

2764 lines
71 KiB
Vue
Raw Normal View History

2024-07-26 17:58:29 +08:00
<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>
2024-07-30 13:24:58 +08:00
<span v-if="title_jd" @click="to_jd(title_jd)"
>>{{ title_jd }}</span
>
<span v-if="title_cs">>{{ title_cs }}</span>
2024-07-26 17:58:29 +08:00
</div>
<div class="title_line"></div>
</div>
<div class="content">
2024-07-30 13:24:58 +08:00
<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_bg"
v-if="index != 0 && index != 1"
></div>
<div class="content_item_value">
<div class="content_item_percent" v-if="item.ages != '总人口'">
{{ item.percent }}%
</div>
{{ item.rksl }}
</div>
2024-07-26 17:58:29 +08:00
</div>
</div>
</div>
<div class="tsbq">
<div class="title">
<div class="title_name">特殊标签</div>
<div class="title_line"></div>
</div>
<div class="content">
2024-07-30 13:24:58 +08:00
<div
class="content_item"
v-for="(item, index) in tsbqTotal"
:class="{ choose: item.id == choose.person }"
@click="buten2(item)"
:key="index"
>
2024-07-26 17:58:29 +08:00
<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">
2024-07-30 13:24:58 +08:00
<div
class="jbggfwq_content_item"
v-for="(item, index) in jbfwqTotal"
:key="index"
>
2024-07-26 17:58:29 +08:00
<div class="jbggfwq_content_item_left">{{ item.name }}</div>
<div class="jbggfwq_content_item_right">
2024-07-30 13:24:58 +08:00
<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)"
>
2024-07-26 17:58:29 +08:00
{{ 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">
2024-07-30 13:24:58 +08:00
<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"
>
2024-07-26 17:58:29 +08:00
<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";
2024-07-30 13:24:58 +08:00
import { ElMessage } from "element-plus";
import tools from "@/utils/tools";
import initializeMap from "@/utils/mapInitializer.js";
2024-07-26 17:58:29 +08:00
import http from "@/utils/request.js";
import mapTown from "@/assets/json/ly.json";
import xkz from "@/assets/json/xkz.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";
2024-07-30 13:24:58 +08:00
//--------定义参数-------
//存放渲染的地块及图标的数组
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([]); //单点社区名
//头部标题
2024-07-26 17:58:29 +08:00
const title_choose = ref("");
2024-07-30 13:24:58 +08:00
const title_jd = ref("");
const title_cs = ref("");
2024-07-26 17:58:29 +08:00
//是否单点社区
const sfdd = ref(false);
const xuanzhongCs = ref([]);
//存放街道
const cfJd = ref("");
//存放村社
const cfCs = ref("");
2024-07-30 13:24:58 +08:00
//地图
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",
},
]);
2024-07-26 17:58:29 +08:00
//村社颜色列表
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",
},
{
2024-07-30 13:24:58 +08:00
name: "困境儿童",
2024-07-26 17:58:29 +08:00
id: "kjer",
},
]);
2024-07-30 13:24:58 +08:00
//单选中社区区块
2024-07-26 17:58:29 +08:00
const chooseCsList = ref([]);
2024-07-30 13:24:58 +08:00
//单选未中社区区块
2024-07-26 17:58:29 +08:00
const unChooseList = ref([]);
const sqname = ref();
2024-07-30 13:24:58 +08:00
// const townName = ref();
//地图街道设置(存放数量)
2024-07-26 17:58:29 +08:00
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",
},
]);
2024-07-30 13:24:58 +08:00
//选中
const choose = ref({
person: "",
fwq: 9999,
yaosu: 9999,
});
//人口数
const personTotal = ref([
2024-07-26 17:58:29 +08:00
{
2024-07-30 13:24:58 +08:00
id: 0,
name: "总人口",
value: "1724114",
ages: "总人口",
age: "1000",
2024-07-26 17:58:29 +08:00
},
2024-07-30 13:24:58 +08:00
]);
//特殊标签
const tsbqTotal = ref([
2024-07-26 17:58:29 +08:00
{
2024-07-30 13:24:58 +08:00
id: 10,
name: "退役军人",
value: "26737",
2024-07-26 17:58:29 +08:00
},
{
2024-07-30 13:24:58 +08:00
id: 20,
name: "留守",
value: "26737",
2024-07-26 17:58:29 +08:00
},
{
2024-07-30 13:24:58 +08:00
id: 30,
name: "困境儿童",
value: "26737",
2024-07-26 17:58:29 +08:00
},
{
2024-07-30 13:24:58 +08:00
id: 40,
name: "特困",
value: "26737",
2024-07-26 17:58:29 +08:00
},
{
2024-07-30 13:24:58 +08:00
id: 0,
name: "低边",
value: "26737",
2024-07-26 17:58:29 +08:00
},
{
2024-07-30 13:24:58 +08:00
id: 1,
name: "低保",
value: "26737",
2024-07-26 17:58:29 +08:00
},
{
2024-07-30 13:24:58 +08:00
id: 2,
name: "高血压",
value: "26737",
2024-07-26 17:58:29 +08:00
},
{
2024-07-30 13:24:58 +08:00
id: 3,
name: "糖尿病",
value: "26737",
2024-07-26 17:58:29 +08:00
},
{
2024-07-30 13:24:58 +08:00
id: 4,
name: "残疾人",
value: "26737",
2024-07-26 17:58:29 +08:00
},
2024-07-30 13:24:58 +08:00
]);
const data = reactive({
serviceCircleList: [],
fwqCoordinates: "", //服务圈中心坐标
fwqCoordinates1: [], //服务圈中心坐标
fwqCoordinates2: [], //服务圈中心坐标
});
//基本公共服务圈
const jbfwqTotal = ref([
2024-07-26 17:58:29 +08:00
{
2024-07-30 13:24:58 +08:00
id: 0,
name: "东华街道",
child: [
{
id: 100,
name: "上圩头村",
},
{
id: 200,
name: "官村",
},
{
id: 300,
name: "下杨",
},
{
id: 400,
name: "灵江社区",
},
{
id: 500,
name: "文成社区",
},
{
id: 600,
name: "子鸣社区",
},
],
2024-07-26 17:58:29 +08:00
},
{
2024-07-30 13:24:58 +08:00
id: 1,
name: "社阳乡",
child: [
{
id: 11,
name: "社阳村",
},
],
2024-07-26 17:58:29 +08:00
},
{
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],
2024-07-30 13:24:58 +08:00
fwqList: [],
2024-07-26 17:58:29 +08:00
},
{
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: "大街村",
},
],
},
]); //存放地图上服务圈数据
2024-07-30 13:36:02 +08:00
2024-07-30 13:24:58 +08:00
var circle;
2024-07-26 17:58:29 +08:00
const fwqList = ref([]);
2024-07-30 13:24:58 +08:00
2024-07-26 17:58:29 +08:00
//资源要素
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,
},
]);
2024-07-30 13:24:58 +08:00
// 鼠标点击添加点位
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();
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) => {
// 检查并移除当前标记
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;
};
//点击人口数
2024-07-26 17:58:29 +08:00
const buten = async (item) => {
getData(item.id, item.age);
getDatas("溪口镇", item.age);
};
2024-07-30 13:24:58 +08:00
//点击特殊标签
const buten2 = async (item) => {
getDataBqs(cfJd.value, cfCs.value, item.id);
};
//人口
const getData = async (i, e) => {
if (e == "9999") {
e = "";
}
await http
.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
.then((res) => {
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);
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;
}
});
});
}
});
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,
});
});
}
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 {
console.log("hhhhh", xkzCenter);
if (choose.value.person == "") {
addCs();
} else {
addCs2();
}
}
}
}
});
};
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;
}
});
});
}
});
2024-07-26 17:58:29 +08:00
};
2024-07-30 13:24:58 +08:00
//特殊标签
//获取特殊标签
//特殊标签列表数据请求
const getDataBq = async (jd, cs) => {
2024-07-26 17:58:29 +08:00
await http
2024-07-30 13:24:58 +08:00
.get(`/api/ggfwyth/ysyzt/getTsbq?csq=${cs || ""}&xzjd=${jd || ""}`)
2024-07-26 17:58:29 +08:00
.then((res) => {
if (res.code == 200) {
2024-07-30 13:24:58 +08:00
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,
2024-07-26 17:58:29 +08:00
});
}
2024-07-30 13:24:58 +08:00
}
});
};
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) {
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 {
// console.log("hhhhh", xkzCenter);
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) {
2024-07-26 17:58:29 +08:00
mapTownCount.map((item) => {
2024-07-30 13:24:58 +08:00
item.numbers = 0;
res.data.map((items) => {
2024-07-26 17:58:29 +08:00
if (items.xzjd == item.name) {
2024-07-30 13:24:58 +08:00
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();
addPolygonCountyCs();
mapTownCount.map((item) => {
if (item.name == item_name) {
jdCenter = item.center;
}
});
goMapCenter(jdCenter, 13);
}
// }
};
2024-07-30 13:36:02 +08:00
//--------公共服务圈-----------
//点击服务圈村
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);
});
function calculateAverage(coordinates) {
const numericCoordinates = coordinates.map(Number); // 将字符串转换为数字
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("经纬度", 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], "乡镇");
};
2024-07-30 13:24:58 +08:00
//------------------------------
//-------乡镇街道级别---------
//加载乡镇信息
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 {
cfJd.value = item.name;
let jdCenter = [];
if (item.name == "溪口镇") {
console.log(444444444, choose.value.person);
BMAP();
getDataBq(cfJd.value, "");
if (choose.value.person == "") {
getDatas("溪口镇", "");
2024-07-26 17:58:29 +08:00
}
2024-07-30 13:24:58 +08:00
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);
}
}
2024-07-26 17:58:29 +08:00
}
2024-07-30 13:24:58 +08:00
if (title_jd.value == item.name) {
} else {
title_jd.value = item.name;
}
loadCs();
addPolygonCountyCs();
mapTownCount.map((item) => {
if (item.name == "溪口镇") {
jdCenter = item.center;
}
});
goMapCenter(jdCenter, 13);
} else {
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 = () => {
for (let v of xkz.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][0],
2024-07-26 17:58:29 +08:00
});
}
2024-07-30 13:24:58 +08:00
} else {
xkzDk.push({
name: v.properties.name,
point: v.geometry.coordinates[0],
});
}
2024-07-26 17:58:29 +08:00
}
};
2024-07-30 13:24:58 +08:00
//添加村社区块
const addPolygonCountyCs = () => {
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", () => {
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);
}
2024-07-26 17:58:29 +08:00
});
2024-07-30 13:24:58 +08:00
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]);
2024-07-26 17:58:29 +08:00
});
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]);
});
2024-07-30 13:24:58 +08:00
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);
2024-07-26 17:58:29 +08:00
} else {
2024-07-30 13:24:58 +08:00
// getDataBqs(cfJd.value, cfCs.value);
2024-07-26 17:58:29 +08:00
}
2024-07-30 13:24:58 +08:00
//这段注意
getDatas2(cfJd.value, choose.value.person, cfCs.value);
addCsChoose();
addCsUnChoose();
if (choose.value.person == "") {
cs_dd_arr.value.map((item, index) => {
DGcreateCs(item, index);
2024-07-26 17:58:29 +08:00
});
2024-07-30 13:24:58 +08:00
} else {
cs_dd_arr.value.map((item, index) => {
DGcreateCs2(item, index);
2024-07-26 17:58:29 +08:00
});
2024-07-30 13:24:58 +08:00
}
});
}
});
2024-07-26 17:58:29 +08:00
};
2024-07-30 13:24:58 +08:00
//添加选中社区
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);
2024-07-26 17:58:29 +08:00
}
2024-07-30 13:24:58 +08:00
});
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);
2024-07-26 17:58:29 +08:00
});
2024-07-30 13:24:58 +08:00
} 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);
});
}, 400);
2024-07-26 17:58:29 +08:00
}
2024-07-30 13:24:58 +08:00
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]);
2024-07-26 17:58:29 +08:00
};
2024-07-30 13:24:58 +08:00
//添加村社+(人数,标签)
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);
2024-07-26 17:58:29 +08:00
2024-07-30 13:24:58 +08:00
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";
2024-07-26 17:58:29 +08:00
} else {
2024-07-30 13:24:58 +08:00
num = "number";
2024-07-26 17:58:29 +08:00
}
2024-07-30 13:24:58 +08:00
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);
2024-07-26 17:58:29 +08:00
2024-07-30 13:24:58 +08:00
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",
},
2024-07-26 17:58:29 +08:00
});
2024-07-30 13:24:58 +08:00
map.addOverlay(cs_dd_arr.value[indexx]);
2024-07-26 17:58:29 +08:00
};
2024-07-30 13:24:58 +08:00
//添加单个村社(+数量)
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";
2024-07-26 17:58:29 +08:00
} else {
2024-07-30 13:24:58 +08:00
num = "number";
2024-07-26 17:58:29 +08:00
}
2024-07-30 13:24:58 +08:00
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",
},
2024-07-26 17:58:29 +08:00
});
2024-07-30 13:24:58 +08:00
map.addOverlay(cs_dd_arr.value[indexx]);
2024-07-26 17:58:29 +08:00
};
2024-07-30 13:24:58 +08:00
//适配
2024-07-26 17:58:29 +08:00
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(() => {
2024-07-30 13:24:58 +08:00
tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
2024-07-26 17:58:29 +08:00
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;
2024-07-30 13:24:58 +08:00
background: linear-gradient(
270deg,
2024-07-26 17:58:29 +08:00
rgba(0, 52, 131, 0.69) 0%,
rgba(0, 32, 83, 0.77) 50%,
2024-07-30 13:24:58 +08:00
rgba(0, 60, 131, 0.74) 100%
),
radial-gradient(
128% 99% at 100% 46%,
2024-07-26 17:58:29 +08:00
rgba(0, 48, 125, 0.29) 0%,
2024-07-30 13:24:58 +08:00
rgba(0, 61, 134, 0.42) 100%
);
2024-07-26 17:58:29 +08:00
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: 450px;
overflow: auto;
.content_item {
cursor: pointer;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
2024-07-30 13:24:58 +08:00
padding: 18px;
padding-left: 24px;
padding-right: 5px;
2024-07-26 17:58:29 +08:00
width: 48%;
2024-07-30 13:24:58 +08:00
position: relative;
// height: 57px;
2024-07-26 17:58:29 +08:00
background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 12px;
2024-07-30 13:24:58 +08:00
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;
2024-07-26 17:58:29 +08:00
}
.content_item:first-child {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
2024-07-30 13:24:58 +08:00
padding: 18px;
padding-left: 24px;
2024-07-26 17:58:29 +08:00
width: 100%;
2024-07-30 13:24:58 +08:00
// height: 57px;
2024-07-26 17:58:29 +08:00
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;
2024-07-30 13:24:58 +08:00
padding: 18px;
padding-left: 24px;
2024-07-26 17:58:29 +08:00
width: 100%;
2024-07-30 13:24:58 +08:00
// height: 57px;
2024-07-26 17:58:29 +08:00
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;
}
2024-07-30 13:24:58 +08:00
.content_item_value {
display: flex;
.content_item_percent {
margin-right: 5px;
color: #6bfeff;
text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
}
}
2024-07-26 17:58:29 +08:00
.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;
2024-07-30 13:24:58 +08:00
padding: 18px;
padding-left: 24px;
2024-07-26 17:58:29 +08:00
width: 48%;
2024-07-30 13:24:58 +08:00
// height: 57px;
2024-07-26 17:58:29 +08:00
background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 12px;
2024-07-30 13:24:58 +08:00
font-size: 18px;
2024-07-26 17:58:29 +08:00
}
// .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;
2024-07-30 13:24:58 +08:00
background: linear-gradient(
270deg,
2024-07-26 17:58:29 +08:00
rgba(0, 52, 131, 0.69) 0%,
rgba(0, 32, 83, 0.77) 50%,
2024-07-30 13:24:58 +08:00
rgba(0, 60, 131, 0.74) 100%
),
radial-gradient(
128% 99% at 100% 46%,
2024-07-26 17:58:29 +08:00
rgba(0, 48, 125, 0.29) 0%,
2024-07-30 13:24:58 +08:00
rgba(0, 61, 134, 0.42) 100%
);
2024-07-26 17:58:29 +08:00
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 {
2024-07-30 13:36:02 +08:00
height: 500px;
2024-07-26 17:58:29 +08:00
overflow: auto;
display: flex;
flex-direction: column;
2024-07-30 13:36:02 +08:00
margin-top: 15px;
margin-bottom: 34px;
2024-07-26 17:58:29 +08:00
.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;
2024-07-30 13:36:02 +08:00
// border-radius: 6px;
2024-07-26 17:58:29 +08:00
.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 {
2024-07-30 13:36:02 +08:00
width: 110px;
height: 54px;
2024-07-26 17:58:29 +08:00
cursor: pointer;
2024-07-30 13:36:02 +08:00
margin-bottom: 20px;
2024-07-26 17:58:29 +08:00
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%;
}
}
}
}
2024-07-30 13:36:02 +08:00
2024-07-26 17:58:29 +08:00
.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;
2024-07-30 13:24:58 +08:00
background: linear-gradient(
180deg,
#ffffff 0%,
#ffffff 40%,
#00ffff 100%
);
2024-07-26 17:58:29 +08:00
/* 使文字没有背景颜色的背景 */
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;
}
}
</style>