Merge branch 'main' of git.zdool.com:xs/ggfwjsc
This commit is contained in:
duanxiaohai
commit
44385a2bf6
|
|
@ -64,5 +64,5 @@ body {
|
|||
height: 1080px !important;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 101;
|
||||
z-index: -1;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
|
|
@ -1,39 +1,39 @@
|
|||
<template>
|
||||
<div class="header">
|
||||
<!-- <img class="title" src="../assets/img_07.png" alt="" /> -->
|
||||
<!-- <div class="time">
|
||||
|
||||
<teleport to="body">
|
||||
<div class="header_content" style="position: absolute;z-index: 999;width: 1920px;">
|
||||
<div class="header">
|
||||
<!-- <img class="title" src="../assets/img_07.png" alt="" /> -->
|
||||
<!-- <div class="time">
|
||||
<div id="date-display"></div>
|
||||
<div id="clock" style="margin-top: 4px">加载中...</div>
|
||||
</div> -->
|
||||
|
||||
<div class="header-menu">
|
||||
<div class="header-menu-item header-menu-left">
|
||||
<div
|
||||
:class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'"
|
||||
v-for="item in data.urlLeft.slice(0, 4)"
|
||||
:key="item.name"
|
||||
>
|
||||
<div class="itemText" @click="to(item.url)">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-menu-item header-menu-right">
|
||||
<div
|
||||
:class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'"
|
||||
v-for="item in data.urlLeft.slice(4, 8)"
|
||||
:key="item.name"
|
||||
>
|
||||
<div class="itemText" @click="to(item.url)">{{ item.name }}</div>
|
||||
<div class="header-menu">
|
||||
<div class="header-menu-item header-menu-left">
|
||||
<div :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'" v-for="item in data.urlLeft.slice(0, 4)"
|
||||
:key="item.name">
|
||||
<div class="itemText" @click="to(item.url)">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-menu-item header-menu-right">
|
||||
<div :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'" v-for="item in data.urlLeft.slice(4, 8)"
|
||||
:key="item.name">
|
||||
<div class="itemText" @click="to(item.url)">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="../assets/RightLine.gif" class="rightLineClass" />
|
||||
<img src="../assets/RightLine.gif" class="leftLineClass" />
|
||||
</div>
|
||||
</div>
|
||||
<img src="../assets/RightLine.gif" class="rightLineClass" />
|
||||
<img src="../assets/RightLine.gif" class="leftLineClass" />
|
||||
</div>
|
||||
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, toRefs, onMounted, inject, nextTick, watch } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
const updateClock = () => {
|
||||
//获取当前时间
|
||||
const now = new Date();
|
||||
|
|
@ -102,8 +102,7 @@ const data = reactive({
|
|||
},
|
||||
],
|
||||
nowTab: "/home/index",
|
||||
});
|
||||
|
||||
});
|
||||
onMounted(() => {
|
||||
// 初始调用 updateClock 以立即显示时间
|
||||
updateClock();
|
||||
|
|
@ -241,6 +240,7 @@ onMounted(() => {
|
|||
right: -70px;
|
||||
bottom: -50px;
|
||||
}
|
||||
|
||||
.leftLineClass {
|
||||
position: absolute;
|
||||
transform: scaleX(-1);
|
||||
|
|
@ -248,4 +248,8 @@ onMounted(() => {
|
|||
bottom: -50px;
|
||||
}
|
||||
}
|
||||
|
||||
.header_content{
|
||||
background: url("../assets/bgImg.png") no-repeat 0/100% 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -828,6 +828,7 @@ onBeforeUnmount(() => {
|
|||
.module {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 112px;
|
||||
}
|
||||
|
||||
.left_bg {
|
||||
|
|
|
|||
|
|
@ -756,6 +756,7 @@ onMounted(() => {
|
|||
.module {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 112px;
|
||||
}
|
||||
|
||||
.left_bg {
|
||||
|
|
|
|||
|
|
@ -351,9 +351,12 @@ body {
|
|||
height: 100%;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.1s ease-in-out;
|
||||
// background-color: skyblue;
|
||||
}
|
||||
|
||||
.image-wall {
|
||||
// background-color: skyblue;
|
||||
z-index: 99;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
position: absolute;
|
||||
|
|
@ -572,4 +575,5 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,9 +19,27 @@ const reset_font = () => {
|
|||
let width = document.documentElement.clientWidth || document.body.clientWidth;
|
||||
let height =
|
||||
document.documentElement.clientHeight || document.body.clientHeight;
|
||||
|
||||
console.log(width, height)
|
||||
|
||||
document.querySelector("#m").style.transformOrigin = "top left";
|
||||
document.querySelector("#m").style.transform =
|
||||
"scale(" + width / 1920 + "," + height / 1080 + ")";
|
||||
|
||||
document.querySelector(".header_content").style.transformOrigin = "top left";
|
||||
document.querySelector(".header_content").style.transform =
|
||||
"scale(" + width / 1920 + "," + height / 1080 + ")";
|
||||
if(
|
||||
document.querySelector(".left").style){
|
||||
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();
|
||||
|
|
@ -43,28 +61,33 @@ window.addEventListener("resize", function () {
|
|||
// width: 100vw;
|
||||
// overflow: hidden;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
// color: #ccffff;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#m {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
// position: absolute;
|
||||
z-index: 101;
|
||||
z-index: -1;
|
||||
|
||||
}
|
||||
|
||||
#emap {
|
||||
width: 100%;
|
||||
height: 980px;
|
||||
|
|
@ -73,6 +96,7 @@ body {
|
|||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -81,6 +105,7 @@ body {
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main {
|
||||
* {
|
||||
pointer-events: all;
|
||||
|
|
|
|||
|
|
@ -407,6 +407,7 @@ const getData = async () => {
|
|||
.module {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 112px;
|
||||
}
|
||||
|
||||
.yd_title {
|
||||
|
|
|
|||
|
|
@ -1833,6 +1833,7 @@ onBeforeMount(async () => {
|
|||
.module {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 112px;
|
||||
}
|
||||
|
||||
.yd_title {
|
||||
|
|
|
|||
|
|
@ -1,90 +1,71 @@
|
|||
<template>
|
||||
<div class="module">
|
||||
<div id="map" style="width: 100%; height: 100%"></div>
|
||||
<div class="left">
|
||||
<div class="lyx">
|
||||
<div class="title">
|
||||
<div class="title_name">{{ title_choose }}</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="changeRs(item.id)"
|
||||
:key="index"
|
||||
>
|
||||
<div class="content_item_name">{{ item.name }}</div>
|
||||
<div class="content_item_value">{{ item.value }}</div>
|
||||
<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">{{ title_choose }}</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="changeRs(item.id)" :key="index">
|
||||
<div class="content_item_name">{{ item.name }}</div>
|
||||
<div class="content_item_value">{{ item.value }}</div>
|
||||
</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.bq }"
|
||||
@click="changebq(item.id)"
|
||||
:key="index"
|
||||
>
|
||||
<div class="content_item_name">{{ item.name }}</div>
|
||||
<div class="content_item_value">{{ item.value }}</div>
|
||||
<div class="tsbq">
|
||||
<div class="title">
|
||||
<div class="title_name">特殊标签</div>
|
||||
<div class="title_line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<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)"
|
||||
>
|
||||
{{ itemm.name }}
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content_item" v-for="(item, index) in tsbqTotal" :class="{ choose: item.id == choose.bq }"
|
||||
@click="changebq(item.id)" :key="index">
|
||||
<div class="content_item_name">{{ item.name }}</div>
|
||||
<div class="content_item_value">{{ item.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zyys">
|
||||
<div class="title">
|
||||
<div class="title_name">资源要素</div>
|
||||
<div class="title_line"></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)">
|
||||
{{ itemm.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 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>
|
||||
</div>
|
||||
</teleport>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
|
|
@ -126,6 +107,15 @@ 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";
|
||||
//删除
|
||||
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 title_choose = ref("龙游县");
|
||||
//村社颜色列表
|
||||
const colorList = [
|
||||
|
|
@ -157,6 +147,9 @@ const colorList = [
|
|||
bg: "RGBA(27, 91, 55, 1)",
|
||||
},
|
||||
];
|
||||
//中心点坐标
|
||||
const center_now = ref([]);
|
||||
const center_center = ref([119.178783, 29.034583]);
|
||||
//地图设置
|
||||
const mapTownCount = reactive([
|
||||
{
|
||||
|
|
@ -334,9 +327,10 @@ const BMAP = () => {
|
|||
|
||||
const initMap = () => {
|
||||
map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
|
||||
map.setMapType(BMAP_SATELLITE_MAP);
|
||||
map.enableScrollWheelZoom(true);
|
||||
map.setMapType(BMAP_EARTH_MAP);
|
||||
goMapCenter([119.178783, 29.034583], 12);
|
||||
goMapCenter([119.178783, 29.034583], 11);
|
||||
|
||||
//加载乡镇信息
|
||||
loadTown();
|
||||
//渲染地块
|
||||
|
|
@ -382,26 +376,46 @@ const addPolygonCounty = () => {
|
|||
fillOpacity: 0.7,
|
||||
name: item.name,
|
||||
});
|
||||
|
||||
map.addOverlay(polygon);
|
||||
polygon.addEventListener("click", () => {
|
||||
console.log(item.name);
|
||||
let jdCenter = [];
|
||||
if (item.name == "溪口镇") {
|
||||
title_choose.value = '龙游县'
|
||||
title_choose.value = title_choose.value + `>${item.name}`;
|
||||
console.log(title_choose.value);
|
||||
loadCs();
|
||||
addPolygonCountyCs();
|
||||
mapTownCount.map((item) => {
|
||||
if (item.name == "溪口镇") {
|
||||
jdCenter = item.center;
|
||||
}
|
||||
});
|
||||
goMapCenter(jdCenter, 14);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// mapTownCount.map((item) => {
|
||||
// createCustomOverlayJd(item);
|
||||
// });
|
||||
};
|
||||
//添加街道名
|
||||
|
||||
const addJd = () => {
|
||||
mapTownCount.map((item) => {
|
||||
createCustomOverlayJd(item);
|
||||
mapTownCount.map((item, index) => {
|
||||
createCustomOverlayJd(item, index);
|
||||
});
|
||||
};
|
||||
//添加街道名2含数量
|
||||
const addJd2 = () => {
|
||||
goMapCenter([119.178783, 29.034581], 12);
|
||||
mapTownCount.map((item) => {
|
||||
createCustomOverlayJd2(item);
|
||||
if (center_now.value[0] == 119.178783) {
|
||||
goMapCenter([119.178783, 29.034581], 11);
|
||||
}
|
||||
mapTownCount.map((item, index) => {
|
||||
createCustomOverlayJd2(item, index);
|
||||
});
|
||||
goMapCenter([119.178783, 29.034583], 12);
|
||||
if (center_now.value[0] == 119.178783) {
|
||||
goMapCenter([119.178783, 29.034581], 11);
|
||||
}
|
||||
};
|
||||
//加载村社信息
|
||||
const loadCs = () => {
|
||||
|
|
@ -432,7 +446,7 @@ const addPolygonCountyCs = () => {
|
|||
item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
|
||||
if (points.length) {
|
||||
//创建面
|
||||
let polygonCs = new BMapGL.Polygon(points, {
|
||||
cs_qk_arr.value[index] = new BMapGL.Polygon(points, {
|
||||
strokeColor: fillColor,
|
||||
strokeWeight: 2,
|
||||
strokeOpacity: 0.8,
|
||||
|
|
@ -440,12 +454,13 @@ const addPolygonCountyCs = () => {
|
|||
fillOpacity: 0.7,
|
||||
name: item.name,
|
||||
});
|
||||
map.addOverlay(polygonCs);
|
||||
map.addOverlay(cs_qk_arr.value[index]);
|
||||
}
|
||||
});
|
||||
};
|
||||
// 添加地图上的街道名
|
||||
const createCustomOverlayJd = (polygon) => {
|
||||
|
||||
const createCustomOverlayJd = (polygon, indexx) => {
|
||||
function createLabelDOM() {
|
||||
var content = document.createElement("div");
|
||||
content.style.display = "flex";
|
||||
|
|
@ -464,7 +479,7 @@ const createCustomOverlayJd = (polygon) => {
|
|||
div.setAttribute("name", this.properties.title);
|
||||
|
||||
var title = document.createElement("div");
|
||||
title.style.fontSize = "16px";
|
||||
title.style.fontSize = "10px";
|
||||
title.style.fontWeight = "600";
|
||||
title.style.color = "#000000";
|
||||
div.appendChild(title);
|
||||
|
|
@ -473,8 +488,10 @@ const createCustomOverlayJd = (polygon) => {
|
|||
div.onclick = function () {
|
||||
let jdCenter = [];
|
||||
if (polygon.name == "溪口镇") {
|
||||
title_choose.value = title_choose.value + `>${polygon.name}`;
|
||||
console.log(title_choose.value);
|
||||
if (!title_choose.value.includes("溪口镇")) {
|
||||
title_choose.value = title_choose.value + `>${polygon.name}`;
|
||||
}
|
||||
chooseArr.value.push("jd_noNumber");
|
||||
loadCs();
|
||||
addPolygonCountyCs();
|
||||
mapTownCount.map((item) => {
|
||||
|
|
@ -482,13 +499,21 @@ const createCustomOverlayJd = (polygon) => {
|
|||
jdCenter = item.center;
|
||||
}
|
||||
});
|
||||
center_now.value = jdCenter;
|
||||
addCs();
|
||||
goMapCenter(jdCenter, 14);
|
||||
}else{
|
||||
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]);
|
||||
});
|
||||
}
|
||||
};
|
||||
return content;
|
||||
}
|
||||
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||
jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||
point: new BMapGL.Point(...polygon.center),
|
||||
opacity: 0.5,
|
||||
offsetY: -10,
|
||||
|
|
@ -497,10 +522,10 @@ const createCustomOverlayJd = (polygon) => {
|
|||
type: "customOverlay",
|
||||
},
|
||||
});
|
||||
map.addOverlay(customOverlay);
|
||||
map.addOverlay(jdm_arr.value[indexx]);
|
||||
};
|
||||
// 添加地图上的街道名+(人数,标签)
|
||||
const createCustomOverlayJd2 = (polygon) => {
|
||||
const createCustomOverlayJd2 = (polygon, indexx) => {
|
||||
function createLabelDOM() {
|
||||
var content = document.createElement("div");
|
||||
content.style.display = "flex";
|
||||
|
|
@ -520,7 +545,7 @@ const createCustomOverlayJd2 = (polygon) => {
|
|||
div.setAttribute("name", this.properties.title);
|
||||
|
||||
var title = document.createElement("div");
|
||||
title.style.fontSize = "16px";
|
||||
title.style.fontSize = "10px";
|
||||
title.style.fontWeight = "600";
|
||||
title.style.color = "#000000";
|
||||
div.appendChild(title);
|
||||
|
|
@ -537,7 +562,6 @@ const createCustomOverlayJd2 = (polygon) => {
|
|||
let jdCenter = [];
|
||||
if (polygon.name == "溪口镇") {
|
||||
title_choose.value = title_choose.value + `>${polygon.name}`;
|
||||
console.log(title_choose.value);
|
||||
loadCs();
|
||||
addPolygonCountyCs();
|
||||
mapTownCount.map((item) => {
|
||||
|
|
@ -551,7 +575,7 @@ const createCustomOverlayJd2 = (polygon) => {
|
|||
};
|
||||
return content;
|
||||
}
|
||||
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||
jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||
point: new BMapGL.Point(...polygon.center),
|
||||
opacity: 0.5,
|
||||
offsetY: 0,
|
||||
|
|
@ -561,22 +585,22 @@ const createCustomOverlayJd2 = (polygon) => {
|
|||
type: "customOverlay",
|
||||
},
|
||||
});
|
||||
map.addOverlay(customOverlay);
|
||||
map.addOverlay(jdm_number_arr.value[indexx]);
|
||||
};
|
||||
//创建村社
|
||||
const addCs = () => {
|
||||
xkzCenter.map((item) => {
|
||||
createCs(item);
|
||||
xkzCenter.map((item, index) => {
|
||||
createCs(item, index);
|
||||
});
|
||||
};
|
||||
//创建村社
|
||||
//创建村社(人数,标签)
|
||||
const addCs2 = () => {
|
||||
xkzCenter.map((item) => {
|
||||
createCs2(item);
|
||||
xkzCenter.map((item, index) => {
|
||||
createCs2(item, index);
|
||||
});
|
||||
};
|
||||
//添加村社+(人数,标签)
|
||||
const createCs2 = (polygon) => {
|
||||
const createCs2 = (polygon, indexx) => {
|
||||
function createLabelDOM() {
|
||||
var content = document.createElement("div");
|
||||
content.style.display = "flex";
|
||||
|
|
@ -589,17 +613,17 @@ const createCs2 = (polygon) => {
|
|||
div.style.whiteSpace = "nowrap";
|
||||
div.style.MozUserSelect = "none";
|
||||
div.style.display = "flex";
|
||||
div.style.justifyContent = "center";
|
||||
div.style.justifyContent = "space-between";
|
||||
div.style.alignItems = "center";
|
||||
div.style.cursor = "pointer";
|
||||
div.style.padding = "10px";
|
||||
div.style.backgroundColor = "red";
|
||||
div.style.borderRadius = "20%";
|
||||
div.style.padding = "5px";
|
||||
div.style.minWidth = "100px";
|
||||
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 = "16px";
|
||||
title.style.fontSize = "10px";
|
||||
title.style.fontWeight = "600";
|
||||
title.style.color = "#000000";
|
||||
div.appendChild(title);
|
||||
|
|
@ -607,7 +631,7 @@ const createCs2 = (polygon) => {
|
|||
content.appendChild(div);
|
||||
|
||||
var number = document.createElement("div");
|
||||
number.style.fontSize = "16px";
|
||||
number.style.fontSize = "10px";
|
||||
number.style.fontWeight = "600";
|
||||
number.style.color = "rgba(0, 255, 189, 1)";
|
||||
div.appendChild(number);
|
||||
|
|
@ -615,7 +639,7 @@ const createCs2 = (polygon) => {
|
|||
content.appendChild(div);
|
||||
let img2 = document.createElement("img");
|
||||
img2.style.width = "20px";
|
||||
img2.style.height = "20px";
|
||||
img2.style.height = "26px";
|
||||
img2.src = this.properties.imgSrc2;
|
||||
|
||||
content.appendChild(div);
|
||||
|
|
@ -624,7 +648,6 @@ const createCs2 = (polygon) => {
|
|||
// let jdCenter = [];
|
||||
// if (polygon.name == "溪口镇") {
|
||||
// title_choose.value = title_choose.value + `>${polygon.name}`;
|
||||
// console.log(title_choose.value);
|
||||
// loadCs();
|
||||
// addPolygonCountyCs();
|
||||
// mapTownCount.map((item) => {
|
||||
|
|
@ -637,7 +660,7 @@ const createCs2 = (polygon) => {
|
|||
// };
|
||||
return content;
|
||||
}
|
||||
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||
cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||
point: new BMapGL.Point(...polygon.center),
|
||||
opacity: 0.5,
|
||||
offsetY: 0,
|
||||
|
|
@ -648,10 +671,10 @@ const createCs2 = (polygon) => {
|
|||
type: "customOverlay",
|
||||
},
|
||||
});
|
||||
map.addOverlay(customOverlay);
|
||||
map.addOverlay(cs_number_name_arr.value[indexx]);
|
||||
};
|
||||
//添加村社
|
||||
const createCs = (polygon) => {
|
||||
const createCs = (polygon, indexx) => {
|
||||
function createLabelDOM() {
|
||||
var content = document.createElement("div");
|
||||
content.style.display = "flex";
|
||||
|
|
@ -667,10 +690,14 @@ const createCs = (polygon) => {
|
|||
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 = "16px";
|
||||
title.style.fontSize = "10px";
|
||||
title.style.fontWeight = "600";
|
||||
title.style.color = "#000000";
|
||||
div.appendChild(title);
|
||||
|
|
@ -678,14 +705,14 @@ const createCs = (polygon) => {
|
|||
content.appendChild(div);
|
||||
let img2 = document.createElement("img");
|
||||
img2.style.width = "20px";
|
||||
img2.style.height = "20px";
|
||||
img2.style.height = "26px";
|
||||
img2.src = this.properties.imgSrc2;
|
||||
|
||||
content.appendChild(div);
|
||||
content.appendChild(img2);
|
||||
return content;
|
||||
}
|
||||
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||
cs_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||
point: new BMapGL.Point(...polygon.center),
|
||||
opacity: 0.5,
|
||||
offsetY: 0,
|
||||
|
|
@ -695,16 +722,16 @@ const createCs = (polygon) => {
|
|||
type: "customOverlay",
|
||||
},
|
||||
});
|
||||
map.addOverlay(customOverlay);
|
||||
map.addOverlay(cs_name_arr.value[indexx]);
|
||||
};
|
||||
//创建公共服务圈
|
||||
const addggfwq = () => {
|
||||
fwqList.value.map((item) => {
|
||||
createCustomOverlay(item);
|
||||
fwqList.value.map((item, index) => {
|
||||
createCustomOverlay(item, index);
|
||||
});
|
||||
};
|
||||
// 添加公共服务圈的图标
|
||||
const createCustomOverlay = (polygon) => {
|
||||
const createCustomOverlay = (polygon, indexx) => {
|
||||
function createLabelDOM() {
|
||||
var content = document.createElement("div");
|
||||
content.style.display = "flex";
|
||||
|
|
@ -752,7 +779,7 @@ const createCustomOverlay = (polygon) => {
|
|||
|
||||
return content;
|
||||
}
|
||||
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||
fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||
point: new BMapGL.Point(...polygon.point),
|
||||
opacity: 0.5,
|
||||
offsetY: 0,
|
||||
|
|
@ -777,7 +804,7 @@ const createCustomOverlay = (polygon) => {
|
|||
// border: "0",
|
||||
// transform: "translateX(-50%)",
|
||||
// });
|
||||
map.addOverlay(customOverlay);
|
||||
map.addOverlay(fwq_list_arr.value[indexx]);
|
||||
};
|
||||
|
||||
//地图中点
|
||||
|
|
@ -786,7 +813,6 @@ const goMapCenter = (point, zoom) => {
|
|||
};
|
||||
const removeAllPolygon = (e) => {
|
||||
let allOverlay = map.getOverlays();
|
||||
console.log("allOverlay", allOverlay);
|
||||
for (let i = 0; i < allOverlay.length; i++) {
|
||||
map.removeOverlay(allOverlay[i]);
|
||||
}
|
||||
|
|
@ -808,13 +834,19 @@ const chooseArr = ref([]);
|
|||
const xuanran = () => {
|
||||
addPolygonCounty();
|
||||
if (chooseArr.value.includes("person")) {
|
||||
console.log(3434);
|
||||
addJd2();
|
||||
if (chooseArr.value.includes("jd_noNumber")) {
|
||||
addPolygonCountyCs();
|
||||
addCs2();
|
||||
chooseArr.value = chooseArr.value.filter(
|
||||
(item) => item !== "jd_noNumber"
|
||||
);
|
||||
chooseArr.value.push("jd_number");
|
||||
}
|
||||
} else {
|
||||
addJd();
|
||||
}
|
||||
if (chooseArr.value.includes("fwq")) {
|
||||
console.log(5656);
|
||||
addggfwq();
|
||||
}
|
||||
// if (!chooseArr.value.includes("person")) {
|
||||
|
|
@ -829,19 +861,51 @@ const choose = ref({
|
|||
});
|
||||
const changeRs = (id) => {
|
||||
if (choose.value.person == id) {
|
||||
console.log(111111);
|
||||
chooseArr.value = chooseArr.value.filter((item) => item !== "person");
|
||||
// chooseArr.value = chooseArr.value.filter((item) => item !== "person");
|
||||
choose.value.person = 9999;
|
||||
removeAllPolygon("person");
|
||||
xuanran();
|
||||
jdm_number_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(jdm_number_arr.value[index]);
|
||||
});
|
||||
if (cs_number_name_arr.value) {
|
||||
cs_number_name_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_number_name_arr.value[index]);
|
||||
});
|
||||
cs_number_name_arr.value.length = 0;
|
||||
addCs();
|
||||
}
|
||||
addJd();
|
||||
// if (chooseArr.value.includes("jd_number")) {
|
||||
// removeAllPolygon("person");
|
||||
// xuanran();
|
||||
// loadCs();
|
||||
// addPolygonCountyCs();
|
||||
// addCs();
|
||||
// } else {
|
||||
// removeAllPolygon("person");
|
||||
// xuanran();
|
||||
// addJd();
|
||||
// }
|
||||
} else {
|
||||
console.log(2222222);
|
||||
chooseArr.value.push("person");
|
||||
// if(chooseArr.value.includes("jd_number")){
|
||||
// chooseArr.value = chooseArr.value.filter((item) => item !== "jd_number");
|
||||
// chooseArr.value.push("jd_noNumber");
|
||||
// }
|
||||
// chooseArr.value.push("person");
|
||||
choose.value.person = id;
|
||||
choose.value.bq = 9999;
|
||||
removeAllPolygon("person");
|
||||
xuanran();
|
||||
jdm_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(jdm_arr.value[index]);
|
||||
});
|
||||
if (cs_name_arr.value) {
|
||||
cs_name_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_name_arr.value[index]);
|
||||
});
|
||||
cs_name_arr.value.length = 0;
|
||||
addCs2();
|
||||
}
|
||||
addJd2();
|
||||
// removeAllPolygon("person");
|
||||
// xuanran();
|
||||
}
|
||||
};
|
||||
const changebq = (id) => {
|
||||
|
|
@ -850,19 +914,20 @@ const changebq = (id) => {
|
|||
};
|
||||
const changeFwq = (id, list, center) => {
|
||||
if (choose.value.fwq == id) {
|
||||
console.log(7878);
|
||||
chooseArr.value = chooseArr.value.filter((item) => item !== "fwq");
|
||||
// chooseArr.value = chooseArr.value.filter((item) => item !== "fwq");
|
||||
choose.value.fwq = 9999;
|
||||
removeAllPolygon("fwq");
|
||||
xuanran();
|
||||
// removeAllPolygon("fwq");
|
||||
fwq_list_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(fwq_list_arr.value[index]);
|
||||
});
|
||||
// xuanran();
|
||||
} else {
|
||||
console.log(9999);
|
||||
chooseArr.value.push("fwq");
|
||||
// chooseArr.value.push("fwq");
|
||||
choose.value.fwq = id;
|
||||
fwqList.value = list;
|
||||
removeAllPolygon("fwq");
|
||||
xuanran();
|
||||
console.log(1111111111, center);
|
||||
// removeAllPolygon("fwq");
|
||||
addggfwq();
|
||||
// xuanran();
|
||||
setTimeout(() => {
|
||||
goMapCenter(center, 17);
|
||||
}, 500);
|
||||
|
|
@ -877,7 +942,6 @@ const changeFwq = (id, list, center) => {
|
|||
// fwqList.value.map((item) => {
|
||||
// createCustomOverlay(item);
|
||||
// });
|
||||
// console.log(fwqList.value);
|
||||
};
|
||||
const changeys = (id) => {
|
||||
choose.value.yaosu = id;
|
||||
|
|
@ -1573,6 +1637,7 @@ onMounted(() => {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
margin-top: 112px;
|
||||
}
|
||||
|
||||
#id {
|
||||
|
|
@ -1587,17 +1652,13 @@ onMounted(() => {
|
|||
bottom: 0;
|
||||
width: 520px;
|
||||
height: 960px;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
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, 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%
|
||||
);
|
||||
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;
|
||||
|
|
@ -1755,17 +1816,13 @@ onMounted(() => {
|
|||
bottom: 0;
|
||||
width: 520px;
|
||||
height: 960px;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
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, 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%
|
||||
);
|
||||
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;
|
||||
|
|
@ -1815,8 +1872,10 @@ onMounted(() => {
|
|||
background: rgba(124, 151, 180, 0.8);
|
||||
// padding: 10px;
|
||||
margin-bottom: 4px;
|
||||
position: relative; /* 必须设置 position 属性以便伪元素定位 */
|
||||
position: relative;
|
||||
/* 必须设置 position 属性以便伪元素定位 */
|
||||
}
|
||||
|
||||
.jbggfwq_content_item_right_item::after {
|
||||
content: "";
|
||||
display: block;
|
||||
|
|
@ -1827,6 +1886,7 @@ onMounted(() => {
|
|||
top: 14px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
:nth-child(4n).jbggfwq_content_item_right_item::after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -316,6 +316,7 @@ const rowState = (row) => {
|
|||
.module {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: 112px;
|
||||
.displayFlex {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -495,6 +495,7 @@ onBeforeUnmount(() => {
|
|||
.module {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 112px;
|
||||
}
|
||||
|
||||
.left_bg {
|
||||
|
|
|
|||
|
|
@ -703,6 +703,7 @@ const getData = () => {
|
|||
.module {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-top: 112px;
|
||||
}
|
||||
|
||||
.yd_title {
|
||||
|
|
|
|||
Loading…
Reference in New Issue