xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
duanxiaohai 2024-07-24 15:20:51 +08:00
parent 213a9715a3 e6e2092913
commit 44385a2bf6
13 changed files with 289 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/common.css
View File

@ -64,5 +64,5 @@ body {
height: 1080px !important; height: 1080px !important;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
z-index: 101; z-index: -1;
} }

BIN
src/assets/images/map/xcbg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

52
src/components/header.vue
View File

@ -1,34 +1,34 @@
<template> <template>
<div class="header">
<!-- <img class="title" src="../assets/img_07.png" alt="" /> --> <teleport to="body">
<!-- <div class="time"> <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="date-display"></div>
<div id="clock" style="margin-top: 4px">加载中...</div> <div id="clock" style="margin-top: 4px">加载中...</div>
</div> --> </div> -->
<div class="header-menu"> <div class="header-menu">
<div class="header-menu-item header-menu-left"> <div class="header-menu-item header-menu-left">
<div <div :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'" v-for="item in data.urlLeft.slice(0, 4)"
:class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'" :key="item.name">
v-for="item in data.urlLeft.slice(0, 4)" <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
:key="item.name" </div>
> </div>
<div class="itemText" @click="to(item.url)">{{ item.name }}</div> <div class="header-menu-item header-menu-right">
</div> <div :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'" v-for="item in data.urlLeft.slice(4, 8)"
</div> :key="item.name">
<div class="header-menu-item header-menu-right"> <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
<div </div>
:class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'" </div>
v-for="item in data.urlLeft.slice(4, 8)"
:key="item.name"
>
<div class="itemText" @click="to(item.url)">{{ item.name }}</div>
</div> </div>
<img src="../assets/RightLine.gif" class="rightLineClass" />
<img src="../assets/RightLine.gif" class="leftLineClass" />
</div> </div>
</div> </div>
<img src="../assets/RightLine.gif" class="rightLineClass" />
<img src="../assets/RightLine.gif" class="leftLineClass" /> </teleport>
</div>
</template> </template>
<script setup> <script setup>
@ -103,7 +103,6 @@ const data = reactive({
], ],
nowTab: "/home/index", nowTab: "/home/index",
}); });
onMounted(() => { onMounted(() => {
// 初始调用 updateClock 以立即显示时间 // 初始调用 updateClock 以立即显示时间
updateClock(); updateClock();
@ -241,6 +240,7 @@ onMounted(() => {
right: -70px; right: -70px;
bottom: -50px; bottom: -50px;
} }
.leftLineClass { .leftLineClass {
position: absolute; position: absolute;
transform: scaleX(-1); transform: scaleX(-1);
@ -248,4 +248,8 @@ onMounted(() => {
bottom: -50px; bottom: -50px;
} }
} }
.header_content{
background: url("../assets/bgImg.png") no-repeat 0/100% 100%;
}
</style> </style>

1
src/view/analyze.vue
View File

@ -828,6 +828,7 @@ onBeforeUnmount(() => {
.module { .module {
display: flex; display: flex;
width: 100%; width: 100%;
margin-top: 112px;
} }
.left_bg { .left_bg {

1
src/view/education.vue
View File

@ -756,6 +756,7 @@ onMounted(() => {
.module { .module {
display: flex; display: flex;
width: 100%; width: 100%;
margin-top: 112px;
} }
.left_bg { .left_bg {

4
src/view/guide.vue
View File

@ -351,9 +351,12 @@ body {
height: 100%; height: 100%;
transform-style: preserve-3d; transform-style: preserve-3d;
transition: transform 0.1s ease-in-out; transition: transform 0.1s ease-in-out;
// background-color: skyblue;
} }
.image-wall { .image-wall {
// background-color: skyblue;
z-index: 99;
width: 80%; width: 80%;
height: 80%; height: 80%;
position: absolute; position: absolute;
@ -572,4 +575,5 @@ body {
} }
} }
} }
</style> </style>

27
src/view/home.vue
View File

@ -19,9 +19,27 @@ const reset_font = () => {
let width = document.documentElement.clientWidth || document.body.clientWidth; let width = document.documentElement.clientWidth || document.body.clientWidth;
let height = let height =
document.documentElement.clientHeight || document.body.clientHeight; document.documentElement.clientHeight || document.body.clientHeight;
console.log(width, height)
document.querySelector("#m").style.transformOrigin = "top left"; document.querySelector("#m").style.transformOrigin = "top left";
document.querySelector("#m").style.transform = document.querySelector("#m").style.transform =
"scale(" + width / 1920 + "," + height / 1080 + ")"; "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(() => { onMounted(() => {
reset_font(); reset_font();
@ -43,28 +61,33 @@ window.addEventListener("resize", function () {
// width: 100vw; // width: 100vw;
// overflow: hidden; // overflow: hidden;
} }
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
// color: #ccffff; // color: #ccffff;
} }
html { html {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#m { #m {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
// position: absolute; // position: absolute;
z-index: 101; z-index: -1;
} }
#emap { #emap {
width: 100%; width: 100%;
height: 980px; height: 980px;
@ -73,6 +96,7 @@ body {
left: 0; left: 0;
z-index: 100; z-index: 100;
} }
#container { #container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -81,6 +105,7 @@ body {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.main { .main {
* { * {
pointer-events: all; pointer-events: all;

1
src/view/hygiene.vue
View File

@ -407,6 +407,7 @@ const getData = async () => {
.module { .module {
display: flex; display: flex;
width: 100%; width: 100%;
margin-top: 112px;
} }
.yd_title { .yd_title {

1
src/view/sy.vue
View File

@ -1833,6 +1833,7 @@ onBeforeMount(async () => {
.module { .module {
display: flex; display: flex;
width: 100%; width: 100%;
margin-top: 112px;
} }
.yd_title { .yd_title {

382
src/view/sy_map.vue
View File

@ -1,90 +1,71 @@
<template> <template>
<div class="module"> <div class="module">
<div id="map" style="width: 100%; height: 100%"></div> <teleport to="body">
<div class="left"> <div id="map" style="width: 100vw; height: 100vh; "></div>
<div class="lyx"> <div class="left" style="width: 517px;">
<div class="title"> <div class="lyx">
<div class="title_name">{{ title_choose }}</div> <div class="title">
<div class="title_line"></div> <div class="title_name">{{ title_choose }}</div>
</div> <div class="title_line"></div>
<div class="content"> </div>
<div <div class="content">
class="content_item" <div class="content_item" v-for="(item, index) in personTotal" :class="{ choose: item.id == choose.person }"
v-for="(item, index) in personTotal" @click="changeRs(item.id)" :key="index">
:class="{ choose: item.id == choose.person }" <div class="content_item_name">{{ item.name }}</div>
@click="changeRs(item.id)" <div class="content_item_value">{{ item.value }}</div>
:key="index" </div>
>
<div class="content_item_name">{{ item.name }}</div>
<div class="content_item_value">{{ item.value }}</div>
</div> </div>
</div> </div>
</div> <div class="tsbq">
<div class="tsbq"> <div class="title">
<div class="title"> <div class="title_name">特殊标签</div>
<div class="title_name">特殊标签</div> <div class="title_line"></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> </div>
</div> <div class="content">
</div> <div class="content_item" v-for="(item, index) in tsbqTotal" :class="{ choose: item.id == choose.bq }"
</div> @click="changebq(item.id)" :key="index">
<div class="right"> <div class="content_item_name">{{ item.name }}</div>
<div class="jbggfwq"> <div class="content_item_value">{{ item.value }}</div>
<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> </div>
</div> </div>
<div class="zyys"> <div class="right" style="width: 517px;">
<div class="title"> <div class="jbggfwq">
<div class="title_name">资源要素</div> <div class="title">
<div class="title_line"></div> <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>
<div class="zyys_content"> <div class="zyys">
<div <div class="title">
class="zyys_content_item" <div class="title_name">资源要素</div>
v-for="(item, index) in yaosuTotal" <div class="title_line"></div>
:class="{ choose: item.id == choose.yaosu, wz: item.wz == true }" </div>
@click="changeys(item.id)" <div class="zyys_content">
:key="index" <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" /> <img :src="item.img" class="zyys_content_item_left" />
<div class="zyys_content_item_right">{{ item.name }}</div> <div class="zyys_content_item_right">{{ item.name }}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </teleport>
</div> </div>
</template> </template>
<script setup> <script setup>
import { import {
@ -126,6 +107,15 @@ import b3 from "@/assets/images/map/b3.png";
import b4 from "@/assets/images/map/b4.png"; import b4 from "@/assets/images/map/b4.png";
import b5 from "@/assets/images/map/b5.png"; import b5 from "@/assets/images/map/b5.png";
import b6 from "@/assets/images/map/b6.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 title_choose = ref("龙游县");
//村社颜色列表 //村社颜色列表
const colorList = [ const colorList = [
@ -157,6 +147,9 @@ const colorList = [
bg: "RGBA(27, 91, 55, 1)", bg: "RGBA(27, 91, 55, 1)",
}, },
]; ];
//中心点坐标
const center_now = ref([]);
const center_center = ref([119.178783, 29.034583]);
//地图设置 //地图设置
const mapTownCount = reactive([ const mapTownCount = reactive([
{ {
@ -334,9 +327,10 @@ const BMAP = () => {
const initMap = () => { const initMap = () => {
map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 }); map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
map.setMapType(BMAP_SATELLITE_MAP);
map.enableScrollWheelZoom(true); map.enableScrollWheelZoom(true);
map.setMapType(BMAP_EARTH_MAP); goMapCenter([119.178783, 29.034583], 11);
goMapCenter([119.178783, 29.034583], 12);
//加载乡镇信息 //加载乡镇信息
loadTown(); loadTown();
//渲染地块 //渲染地块
@ -382,26 +376,46 @@ const addPolygonCounty = () => {
fillOpacity: 0.7, fillOpacity: 0.7,
name: item.name, name: item.name,
}); });
map.addOverlay(polygon); 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 = () => { const addJd = () => {
mapTownCount.map((item) => { mapTownCount.map((item, index) => {
createCustomOverlayJd(item); createCustomOverlayJd(item, index);
}); });
}; };
//添加街道名2含数量 //添加街道名2含数量
const addJd2 = () => { const addJd2 = () => {
goMapCenter([119.178783, 29.034581], 12); if (center_now.value[0] == 119.178783) {
mapTownCount.map((item) => { goMapCenter([119.178783, 29.034581], 11);
createCustomOverlayJd2(item); }
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 = () => { const loadCs = () => {
@ -432,7 +446,7 @@ const addPolygonCountyCs = () => {
item.point[0].map((p) => points.push(new BMapGL.Point(...p))); item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
if (points.length) { if (points.length) {
//创建面 //创建面
let polygonCs = new BMapGL.Polygon(points, { cs_qk_arr.value[index] = new BMapGL.Polygon(points, {
strokeColor: fillColor, strokeColor: fillColor,
strokeWeight: 2, strokeWeight: 2,
strokeOpacity: 0.8, strokeOpacity: 0.8,
@ -440,12 +454,13 @@ const addPolygonCountyCs = () => {
fillOpacity: 0.7, fillOpacity: 0.7,
name: item.name, name: item.name,
}); });
map.addOverlay(polygonCs); map.addOverlay(cs_qk_arr.value[index]);
} }
}); });
}; };
// 添加地图上的街道名 // 添加地图上的街道名
const createCustomOverlayJd = (polygon) => {
const createCustomOverlayJd = (polygon, indexx) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
content.style.display = "flex"; content.style.display = "flex";
@ -464,7 +479,7 @@ const createCustomOverlayJd = (polygon) => {
div.setAttribute("name", this.properties.title); div.setAttribute("name", this.properties.title);
var title = document.createElement("div"); var title = document.createElement("div");
title.style.fontSize = "16px"; title.style.fontSize = "10px";
title.style.fontWeight = "600"; title.style.fontWeight = "600";
title.style.color = "#000000"; title.style.color = "#000000";
div.appendChild(title); div.appendChild(title);
@ -473,8 +488,10 @@ const createCustomOverlayJd = (polygon) => {
div.onclick = function () { div.onclick = function () {
let jdCenter = []; let jdCenter = [];
if (polygon.name == "溪口镇") { if (polygon.name == "溪口镇") {
title_choose.value = title_choose.value + `>${polygon.name}`; if (!title_choose.value.includes("溪口镇")) {
console.log(title_choose.value); title_choose.value = title_choose.value + `>${polygon.name}`;
}
chooseArr.value.push("jd_noNumber");
loadCs(); loadCs();
addPolygonCountyCs(); addPolygonCountyCs();
mapTownCount.map((item) => { mapTownCount.map((item) => {
@ -482,13 +499,21 @@ const createCustomOverlayJd = (polygon) => {
jdCenter = item.center; jdCenter = item.center;
} }
}); });
center_now.value = jdCenter;
addCs(); addCs();
goMapCenter(jdCenter, 14); 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; return content;
} }
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, { jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center), point: new BMapGL.Point(...polygon.center),
opacity: 0.5, opacity: 0.5,
offsetY: -10, offsetY: -10,
@ -497,10 +522,10 @@ const createCustomOverlayJd = (polygon) => {
type: "customOverlay", type: "customOverlay",
}, },
}); });
map.addOverlay(customOverlay); map.addOverlay(jdm_arr.value[indexx]);
}; };
// 添加地图上的街道名+(人数,标签) // 添加地图上的街道名+(人数,标签)
const createCustomOverlayJd2 = (polygon) => { const createCustomOverlayJd2 = (polygon, indexx) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
content.style.display = "flex"; content.style.display = "flex";
@ -520,7 +545,7 @@ const createCustomOverlayJd2 = (polygon) => {
div.setAttribute("name", this.properties.title); div.setAttribute("name", this.properties.title);
var title = document.createElement("div"); var title = document.createElement("div");
title.style.fontSize = "16px"; title.style.fontSize = "10px";
title.style.fontWeight = "600"; title.style.fontWeight = "600";
title.style.color = "#000000"; title.style.color = "#000000";
div.appendChild(title); div.appendChild(title);
@ -537,7 +562,6 @@ const createCustomOverlayJd2 = (polygon) => {
let jdCenter = []; let jdCenter = [];
if (polygon.name == "溪口镇") { if (polygon.name == "溪口镇") {
title_choose.value = title_choose.value + `>${polygon.name}`; title_choose.value = title_choose.value + `>${polygon.name}`;
console.log(title_choose.value);
loadCs(); loadCs();
addPolygonCountyCs(); addPolygonCountyCs();
mapTownCount.map((item) => { mapTownCount.map((item) => {
@ -551,7 +575,7 @@ const createCustomOverlayJd2 = (polygon) => {
}; };
return content; return content;
} }
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, { jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center), point: new BMapGL.Point(...polygon.center),
opacity: 0.5, opacity: 0.5,
offsetY: 0, offsetY: 0,
@ -561,22 +585,22 @@ const createCustomOverlayJd2 = (polygon) => {
type: "customOverlay", type: "customOverlay",
}, },
}); });
map.addOverlay(customOverlay); map.addOverlay(jdm_number_arr.value[indexx]);
}; };
//创建村社 //创建村社
const addCs = () => { const addCs = () => {
xkzCenter.map((item) => { xkzCenter.map((item, index) => {
createCs(item); createCs(item, index);
}); });
}; };
//创建村社 //创建村社(人数,标签)
const addCs2 = () => { const addCs2 = () => {
xkzCenter.map((item) => { xkzCenter.map((item, index) => {
createCs2(item); createCs2(item, index);
}); });
}; };
//添加村社+(人数,标签) //添加村社+(人数,标签)
const createCs2 = (polygon) => { const createCs2 = (polygon, indexx) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
content.style.display = "flex"; content.style.display = "flex";
@ -589,17 +613,17 @@ const createCs2 = (polygon) => {
div.style.whiteSpace = "nowrap"; div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none"; div.style.MozUserSelect = "none";
div.style.display = "flex"; div.style.display = "flex";
div.style.justifyContent = "center"; div.style.justifyContent = "space-between";
div.style.alignItems = "center"; div.style.alignItems = "center";
div.style.cursor = "pointer"; div.style.cursor = "pointer";
div.style.padding = "10px"; div.style.padding = "5px";
div.style.backgroundColor = "red"; div.style.minWidth = "100px";
div.style.borderRadius = "20%"; div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
div.style.transform = "translateY(50px)"; div.style.transform = "translateY(50px)";
div.setAttribute("name", this.properties.title); div.setAttribute("name", this.properties.title);
var title = document.createElement("div"); var title = document.createElement("div");
title.style.fontSize = "16px"; title.style.fontSize = "10px";
title.style.fontWeight = "600"; title.style.fontWeight = "600";
title.style.color = "#000000"; title.style.color = "#000000";
div.appendChild(title); div.appendChild(title);
@ -607,7 +631,7 @@ const createCs2 = (polygon) => {
content.appendChild(div); content.appendChild(div);
var number = document.createElement("div"); var number = document.createElement("div");
number.style.fontSize = "16px"; number.style.fontSize = "10px";
number.style.fontWeight = "600"; number.style.fontWeight = "600";
number.style.color = "rgba(0, 255, 189, 1)"; number.style.color = "rgba(0, 255, 189, 1)";
div.appendChild(number); div.appendChild(number);
@ -615,7 +639,7 @@ const createCs2 = (polygon) => {
content.appendChild(div); content.appendChild(div);
let img2 = document.createElement("img"); let img2 = document.createElement("img");
img2.style.width = "20px"; img2.style.width = "20px";
img2.style.height = "20px"; img2.style.height = "26px";
img2.src = this.properties.imgSrc2; img2.src = this.properties.imgSrc2;
content.appendChild(div); content.appendChild(div);
@ -624,7 +648,6 @@ const createCs2 = (polygon) => {
// let jdCenter = []; // let jdCenter = [];
// if (polygon.name == "溪口镇") { // if (polygon.name == "溪口镇") {
// title_choose.value = title_choose.value + `>${polygon.name}`; // title_choose.value = title_choose.value + `>${polygon.name}`;
// console.log(title_choose.value);
// loadCs(); // loadCs();
// addPolygonCountyCs(); // addPolygonCountyCs();
// mapTownCount.map((item) => { // mapTownCount.map((item) => {
@ -637,7 +660,7 @@ const createCs2 = (polygon) => {
// }; // };
return content; return content;
} }
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, { cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center), point: new BMapGL.Point(...polygon.center),
opacity: 0.5, opacity: 0.5,
offsetY: 0, offsetY: 0,
@ -648,10 +671,10 @@ const createCs2 = (polygon) => {
type: "customOverlay", type: "customOverlay",
}, },
}); });
map.addOverlay(customOverlay); map.addOverlay(cs_number_name_arr.value[indexx]);
}; };
//添加村社 //添加村社
const createCs = (polygon) => { const createCs = (polygon, indexx) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
content.style.display = "flex"; content.style.display = "flex";
@ -667,10 +690,14 @@ const createCs = (polygon) => {
div.style.justifyContent = "center"; div.style.justifyContent = "center";
div.style.alignItems = "center"; div.style.alignItems = "center";
div.style.cursor = "pointer"; 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); div.setAttribute("name", this.properties.title);
var title = document.createElement("div"); var title = document.createElement("div");
title.style.fontSize = "16px"; title.style.fontSize = "10px";
title.style.fontWeight = "600"; title.style.fontWeight = "600";
title.style.color = "#000000"; title.style.color = "#000000";
div.appendChild(title); div.appendChild(title);
@ -678,14 +705,14 @@ const createCs = (polygon) => {
content.appendChild(div); content.appendChild(div);
let img2 = document.createElement("img"); let img2 = document.createElement("img");
img2.style.width = "20px"; img2.style.width = "20px";
img2.style.height = "20px"; img2.style.height = "26px";
img2.src = this.properties.imgSrc2; img2.src = this.properties.imgSrc2;
content.appendChild(div); content.appendChild(div);
content.appendChild(img2); content.appendChild(img2);
return content; return content;
} }
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, { cs_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center), point: new BMapGL.Point(...polygon.center),
opacity: 0.5, opacity: 0.5,
offsetY: 0, offsetY: 0,
@ -695,16 +722,16 @@ const createCs = (polygon) => {
type: "customOverlay", type: "customOverlay",
}, },
}); });
map.addOverlay(customOverlay); map.addOverlay(cs_name_arr.value[indexx]);
}; };
//创建公共服务圈 //创建公共服务圈
const addggfwq = () => { const addggfwq = () => {
fwqList.value.map((item) => { fwqList.value.map((item, index) => {
createCustomOverlay(item); createCustomOverlay(item, index);
}); });
}; };
// 添加公共服务圈的图标 // 添加公共服务圈的图标
const createCustomOverlay = (polygon) => { const createCustomOverlay = (polygon, indexx) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
content.style.display = "flex"; content.style.display = "flex";
@ -752,7 +779,7 @@ const createCustomOverlay = (polygon) => {
return content; return content;
} }
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, { fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.point), point: new BMapGL.Point(...polygon.point),
opacity: 0.5, opacity: 0.5,
offsetY: 0, offsetY: 0,
@ -777,7 +804,7 @@ const createCustomOverlay = (polygon) => {
// border: "0", // border: "0",
// transform: "translateX(-50%)", // transform: "translateX(-50%)",
// }); // });
map.addOverlay(customOverlay); map.addOverlay(fwq_list_arr.value[indexx]);
}; };
//地图中点 //地图中点
@ -786,7 +813,6 @@ const goMapCenter = (point, zoom) => {
}; };
const removeAllPolygon = (e) => { const removeAllPolygon = (e) => {
let allOverlay = map.getOverlays(); let allOverlay = map.getOverlays();
console.log("allOverlay", allOverlay);
for (let i = 0; i < allOverlay.length; i++) { for (let i = 0; i < allOverlay.length; i++) {
map.removeOverlay(allOverlay[i]); map.removeOverlay(allOverlay[i]);
} }
@ -808,13 +834,19 @@ const chooseArr = ref([]);
const xuanran = () => { const xuanran = () => {
addPolygonCounty(); addPolygonCounty();
if (chooseArr.value.includes("person")) { if (chooseArr.value.includes("person")) {
console.log(3434);
addJd2(); addJd2();
if (chooseArr.value.includes("jd_noNumber")) {
addPolygonCountyCs();
addCs2();
chooseArr.value = chooseArr.value.filter(
(item) => item !== "jd_noNumber"
);
chooseArr.value.push("jd_number");
}
} else { } else {
addJd(); addJd();
} }
if (chooseArr.value.includes("fwq")) { if (chooseArr.value.includes("fwq")) {
console.log(5656);
addggfwq(); addggfwq();
} }
// if (!chooseArr.value.includes("person")) { // if (!chooseArr.value.includes("person")) {
@ -829,19 +861,51 @@ const choose = ref({
}); });
const changeRs = (id) => { const changeRs = (id) => {
if (choose.value.person == 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; choose.value.person = 9999;
removeAllPolygon("person"); jdm_number_arr.value.forEach((item, index) => {
xuanran(); 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(); addJd();
// if (chooseArr.value.includes("jd_number")) {
// removeAllPolygon("person");
// xuanran();
// loadCs();
// addPolygonCountyCs();
// addCs();
// } else {
// removeAllPolygon("person");
// xuanran();
// addJd();
// }
} else { } else {
console.log(2222222); // if(chooseArr.value.includes("jd_number")){
chooseArr.value.push("person"); // chooseArr.value = chooseArr.value.filter((item) => item !== "jd_number");
// chooseArr.value.push("jd_noNumber");
// }
// chooseArr.value.push("person");
choose.value.person = id; choose.value.person = id;
choose.value.bq = 9999; choose.value.bq = 9999;
removeAllPolygon("person"); jdm_arr.value.forEach((item, index) => {
xuanran(); 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) => { const changebq = (id) => {
@ -850,19 +914,20 @@ const changebq = (id) => {
}; };
const changeFwq = (id, list, center) => { const changeFwq = (id, list, center) => {
if (choose.value.fwq == id) { 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; choose.value.fwq = 9999;
removeAllPolygon("fwq"); // removeAllPolygon("fwq");
xuanran(); fwq_list_arr.value.forEach((item, index) => {
map.removeOverlay(fwq_list_arr.value[index]);
});
// xuanran();
} else { } else {
console.log(9999); // chooseArr.value.push("fwq");
chooseArr.value.push("fwq");
choose.value.fwq = id; choose.value.fwq = id;
fwqList.value = list; fwqList.value = list;
removeAllPolygon("fwq"); // removeAllPolygon("fwq");
xuanran(); addggfwq();
console.log(1111111111, center); // xuanran();
setTimeout(() => { setTimeout(() => {
goMapCenter(center, 17); goMapCenter(center, 17);
}, 500); }, 500);
@ -877,7 +942,6 @@ const changeFwq = (id, list, center) => {
// fwqList.value.map((item) => { // fwqList.value.map((item) => {
// createCustomOverlay(item); // createCustomOverlay(item);
// }); // });
// console.log(fwqList.value);
}; };
const changeys = (id) => { const changeys = (id) => {
choose.value.yaosu = id; choose.value.yaosu = id;
@ -1573,6 +1637,7 @@ onMounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
margin-top: 112px;
} }
#id { #id {
@ -1587,17 +1652,13 @@ onMounted(() => {
bottom: 0; bottom: 0;
width: 520px; width: 520px;
height: 960px; height: 960px;
background: linear-gradient( background: linear-gradient(270deg,
270deg,
rgba(0, 52, 131, 0.69) 0%, rgba(0, 52, 131, 0.69) 0%,
rgba(0, 32, 83, 0.77) 50%, rgba(0, 32, 83, 0.77) 50%,
rgba(0, 60, 131, 0.74) 100% rgba(0, 60, 131, 0.74) 100%),
), radial-gradient(128% 99% at 100% 46%,
radial-gradient(
128% 99% at 100% 46%,
rgba(0, 48, 125, 0.29) 0%, 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); box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
padding: 30px 26px; padding: 30px 26px;
@ -1755,17 +1816,13 @@ onMounted(() => {
bottom: 0; bottom: 0;
width: 520px; width: 520px;
height: 960px; height: 960px;
background: linear-gradient( background: linear-gradient(270deg,
270deg,
rgba(0, 52, 131, 0.69) 0%, rgba(0, 52, 131, 0.69) 0%,
rgba(0, 32, 83, 0.77) 50%, rgba(0, 32, 83, 0.77) 50%,
rgba(0, 60, 131, 0.74) 100% rgba(0, 60, 131, 0.74) 100%),
), radial-gradient(128% 99% at 100% 46%,
radial-gradient(
128% 99% at 100% 46%,
rgba(0, 48, 125, 0.29) 0%, 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); box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
padding: 30px 26px; padding: 30px 26px;
@ -1815,8 +1872,10 @@ onMounted(() => {
background: rgba(124, 151, 180, 0.8); background: rgba(124, 151, 180, 0.8);
// padding: 10px; // padding: 10px;
margin-bottom: 4px; margin-bottom: 4px;
position: relative; /* 必须设置 position 属性以便伪元素定位 */ position: relative;
/* 必须设置 position 属性以便伪元素定位 */
} }
.jbggfwq_content_item_right_item::after { .jbggfwq_content_item_right_item::after {
content: ""; content: "";
display: block; display: block;
@ -1827,6 +1886,7 @@ onMounted(() => {
top: 14px; top: 14px;
right: 0px; right: 0px;
} }
:nth-child(4n).jbggfwq_content_item_right_item::after { :nth-child(4n).jbggfwq_content_item_right_item::after {
opacity: 0; opacity: 0;
} }

1
src/view/sy_table.vue
View File

@ -316,6 +316,7 @@ const rowState = (row) => {
.module { .module {
width: 100%; width: 100%;
display: flex; display: flex;
margin-top: 112px;
.displayFlex { .displayFlex {
height: 100%; height: 100%;
display: flex; display: flex;

1
src/view/work.vue
View File

@ -495,6 +495,7 @@ onBeforeUnmount(() => {
.module { .module {
display: flex; display: flex;
width: 100%; width: 100%;
margin-top: 112px;
} }
.left_bg { .left_bg {

1
src/view/yl.vue
View File

@ -703,6 +703,7 @@ const getData = () => {
.module { .module {
display: flex; display: flex;
width: 100%; width: 100%;
margin-top: 112px;
} }
.yd_title { .yd_title {