2579 lines
64 KiB
Vue
2579 lines
64 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>
|
||
<span v-if="title_jd" @click="to_jd(title_jd)"
|
||
>>{{ title_jd }}</span
|
||
>
|
||
<span v-if="title_cs">>{{ title_cs }}</span>
|
||
</div>
|
||
<div class="title_line"></div>
|
||
</div>
|
||
<div class="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_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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tsbq">
|
||
<div class="title">
|
||
<div class="title_name">特殊标签</div>
|
||
<div class="title_line"></div>
|
||
</div>
|
||
<div class="content">
|
||
<div
|
||
class="content_item"
|
||
v-for="(item, index) in tsbqTotal"
|
||
:class="{ choose: item.id == choose.person }"
|
||
@click="buten2(item)"
|
||
:key="index"
|
||
>
|
||
<div class="content_item_name">{{ item.name }}</div>
|
||
<div class="content_item_value">{{ item.rksl }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right" style="width: 517px">
|
||
<div class="jbggfwq">
|
||
<div class="title">
|
||
<div class="title_name">基本公共服务圈</div>
|
||
<div class="title_line"></div>
|
||
</div>
|
||
<div class="jbggfwq_content">
|
||
<div
|
||
class="jbggfwq_content_item"
|
||
v-for="(item, index) in jbfwqTotal"
|
||
:key="index"
|
||
>
|
||
<div class="jbggfwq_content_item_left">{{ item.name }}</div>
|
||
<div class="jbggfwq_content_item_right">
|
||
<div
|
||
class="jbggfwq_content_item_right_item"
|
||
v-for="itemm in item.child"
|
||
:class="{ choose: itemm.id == choose.fwq }"
|
||
@click="
|
||
changeFwq(
|
||
itemm.id,
|
||
itemm.fwqList,
|
||
itemm.center,
|
||
item.name,
|
||
itemm.name
|
||
)
|
||
"
|
||
>
|
||
{{ itemm.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="zyys">
|
||
<div class="title">
|
||
<div class="title_name">资源要素</div>
|
||
<div class="title_line"></div>
|
||
</div>
|
||
<div class="zyys_content">
|
||
<div
|
||
class="zyys_content_item"
|
||
v-for="(item, index) in yaosuTotal"
|
||
:class="{ choose: item.id == choose.yaosu, wz: item.wz == true }"
|
||
@click="changeys(item.id)"
|
||
:key="index"
|
||
>
|
||
<img :src="item.img" class="zyys_content_item_left" />
|
||
<div class="zyys_content_item_right">{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</teleport>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
onMounted,
|
||
onBeforeMount,
|
||
onBeforeUnmount,
|
||
computed,
|
||
defineProps,
|
||
watch,
|
||
nextTick,
|
||
} from "vue";
|
||
import 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 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 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 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 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: "大街村",
|
||
},
|
||
],
|
||
},
|
||
]); //存放地图上服务圈数据
|
||
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();
|
||
|
||
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;
|
||
};
|
||
//点击人口数
|
||
const buten = async (item) => {
|
||
getData(item.id, item.age);
|
||
getDatas("溪口镇", item.age);
|
||
};
|
||
//点击特殊标签
|
||
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;
|
||
}
|
||
});
|
||
});
|
||
}
|
||
});
|
||
};
|
||
//特殊标签
|
||
//获取特殊标签
|
||
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) => {
|
||
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 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) {
|
||
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();
|
||
addPolygonCountyCs();
|
||
mapTownCount.map((item) => {
|
||
if (item.name == item_name) {
|
||
jdCenter = item.center;
|
||
}
|
||
});
|
||
goMapCenter(jdCenter, 13);
|
||
}
|
||
// }
|
||
};
|
||
//------------------------------
|
||
//-------乡镇街道级别---------
|
||
//加载乡镇信息
|
||
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("溪口镇", "");
|
||
}
|
||
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);
|
||
}
|
||
}
|
||
}
|
||
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],
|
||
});
|
||
}
|
||
} else {
|
||
xkzDk.push({
|
||
name: v.properties.name,
|
||
point: v.geometry.coordinates[0],
|
||
});
|
||
}
|
||
}
|
||
};
|
||
//添加村社区块
|
||
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);
|
||
}
|
||
});
|
||
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);
|
||
});
|
||
}, 400);
|
||
}
|
||
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(() => {
|
||
reset_font();
|
||
initMap();
|
||
getData();
|
||
getDataBq();
|
||
BMAP();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .anchorBL {
|
||
display: none;
|
||
}
|
||
|
||
.module {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
margin-top: 112px;
|
||
}
|
||
|
||
#id {
|
||
z-index: 10;
|
||
}
|
||
|
||
//左侧弹框
|
||
.left {
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 520px;
|
||
height: 960px;
|
||
background: linear-gradient(
|
||
270deg,
|
||
rgba(0, 52, 131, 0.69) 0%,
|
||
rgba(0, 32, 83, 0.77) 50%,
|
||
rgba(0, 60, 131, 0.74) 100%
|
||
),
|
||
radial-gradient(
|
||
128% 99% at 100% 46%,
|
||
rgba(0, 48, 125, 0.29) 0%,
|
||
rgba(0, 61, 134, 0.42) 100%
|
||
);
|
||
box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
|
||
backdrop-filter: blur(3px);
|
||
padding: 30px 26px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
z-index: 12;
|
||
overflow: hidden;
|
||
|
||
//人口数
|
||
.lyx {
|
||
.content {
|
||
box-sizing: border-box;
|
||
margin-top: 20px;
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: space-between;
|
||
color: #ffffff;
|
||
height: 450px;
|
||
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.5);
|
||
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-right: 5px;
|
||
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 26px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
z-index: 12;
|
||
overflow: hidden;
|
||
|
||
.jbggfwq {
|
||
.jbggfwq_content {
|
||
height: 550px;
|
||
overflow: auto;
|
||
margin-top: 15px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.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;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
|
||
.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 {
|
||
margin-top: 25px;
|
||
.zyys_content {
|
||
margin-top: 20px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-flow: row wrap;
|
||
|
||
.zyys_content_item {
|
||
cursor: pointer;
|
||
margin-bottom: 15px;
|
||
color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 110px;
|
||
height: 42px;
|
||
background: rgba(124, 151, 180, 0.8);
|
||
|
||
.zyys_content_item_left {
|
||
width: 18px;
|
||
height: 18px;
|
||
margin-right: 3px;
|
||
}
|
||
|
||
.zyys_content_item_right {
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.wz {
|
||
width: 150px;
|
||
}
|
||
|
||
.choose {
|
||
background-image: url(@/assets/images/map/choose.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
.title_name {
|
||
cursor: pointer;
|
||
display: flex;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 34px;
|
||
font-weight: 900;
|
||
// line-height: 44px;
|
||
letter-spacing: 4px;
|
||
margin-bottom: 15px;
|
||
background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #00ffff 100%);
|
||
/* 使文字没有背景颜色的背景 */
|
||
background-clip: text;
|
||
/* 为了兼容性，添加渐变背景到IE */
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
|
||
span {
|
||
display: block;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 34px;
|
||
font-weight: 900;
|
||
// line-height: 44px;
|
||
letter-spacing: 4px;
|
||
margin-bottom: 15px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
#ffffff 0%,
|
||
#ffffff 40%,
|
||
#00ffff 100%
|
||
);
|
||
/* 使文字没有背景颜色的背景 */
|
||
background-clip: text;
|
||
/* 为了兼容性，添加渐变背景到IE */
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
|
||
.title_line {
|
||
height: 4px;
|
||
width: 100%;
|
||
border-top: 1px solid #ffffff;
|
||
border-bottom: 2px dashed #ffffff;
|
||
}
|
||
}
|
||
</style>
|