This commit is contained in:
commit
c289d2c327
|
|
@ -64,5 +64,5 @@ body {
|
|||
height: 1080px !important;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: 101;
|
||||
z-index: -1;
|
||||
}
|
||||
|
|
@ -1,4 +1,7 @@
|
|||
<template>
|
||||
|
||||
<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">
|
||||
|
|
@ -8,20 +11,14 @@
|
|||
|
||||
<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="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="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>
|
||||
|
|
@ -29,6 +26,9 @@
|
|||
<img src="../assets/RightLine.gif" class="rightLineClass" />
|
||||
<img src="../assets/RightLine.gif" class="leftLineClass" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -69,12 +69,12 @@ let menuIf = ref(true);
|
|||
const data = reactive({
|
||||
urlLeft: [
|
||||
{
|
||||
name: "要素一张图",
|
||||
url: "/home/index/map",
|
||||
name: "评估模型",
|
||||
url: "/home/index/table",
|
||||
},
|
||||
{
|
||||
name: "指标模型模块",
|
||||
url: "/home/index/table",
|
||||
name: "要素一张图",
|
||||
url: "/home/index/map",
|
||||
},
|
||||
{
|
||||
name: "总体概览",
|
||||
|
|
@ -103,7 +103,6 @@ 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 {
|
||||
|
|
|
|||
|
|
@ -145,11 +145,11 @@ const tabData = reactive({
|
|||
tabNum: 0,
|
||||
tabList: [
|
||||
{
|
||||
name: "要素一张图",
|
||||
name: "评估模型",
|
||||
img: tab7,
|
||||
},
|
||||
{
|
||||
name: "指标模型模块",
|
||||
name: "要素一张图",
|
||||
img: tab8,
|
||||
},
|
||||
{
|
||||
|
|
@ -180,11 +180,11 @@ const tabData = reactive({
|
|||
scenList: [
|
||||
{
|
||||
img: png1,
|
||||
url: "/home/index/map",
|
||||
url: "/home/index/table",
|
||||
},
|
||||
{
|
||||
img: png1,
|
||||
url: "/home/index/table",
|
||||
url: "/home/index/map",
|
||||
},
|
||||
{
|
||||
img: png1,
|
||||
|
|
@ -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;
|
||||
|
|
@ -571,4 +574,5 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,9 +19,23 @@ 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 + ")";
|
||||
|
||||
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 +57,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 +92,7 @@ body {
|
|||
left: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -81,6 +101,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,7 +1,8 @@
|
|||
<template>
|
||||
<div class="module">
|
||||
<div id="map" style="width: 100%; height: 100%"></div>
|
||||
<div class="left">
|
||||
<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>
|
||||
|
|
@ -39,7 +40,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right" style="width: 517px;" >
|
||||
<div class="jbggfwq">
|
||||
<div class="title">
|
||||
<div class="title_name">基本公共服务圈</div>
|
||||
|
|
@ -84,7 +85,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
|
|
@ -256,17 +260,17 @@ const xkzDk = reactive([]);
|
|||
const xkzCenter = reactive([
|
||||
{
|
||||
name: "溪口村",
|
||||
center: [119.204344, 28.862394],
|
||||
center: [119.175728, 28.846981],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "扁石村",
|
||||
center: [119.183549, 28.858],
|
||||
center: [119.158971, 28.856232],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "大垅村",
|
||||
center: [119.170309, 28.862776],
|
||||
center: [119.175309, 28.862776],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
|
|
@ -276,22 +280,22 @@ const xkzCenter = reactive([
|
|||
},
|
||||
{
|
||||
name: "双港口村",
|
||||
center: [119.211353, 28.869576],
|
||||
center: [119.211353, 28.872576],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "灵上村",
|
||||
center: [119.177185, 28.874582],
|
||||
center: [119.175805, 28.868218],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "灵下村",
|
||||
center: [119.175233, 28.878677],
|
||||
center: [119.168797, 28.871674],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "下徐村",
|
||||
center: [119.177544, 28.882818],
|
||||
center: [119.175667, 28.878136],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
|
|
@ -301,7 +305,7 @@ const xkzCenter = reactive([
|
|||
},
|
||||
{
|
||||
name: "寺下村",
|
||||
center: [119.1718, 28.89816],
|
||||
center: [119.1648, 28.90016],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
|
|
@ -311,17 +315,17 @@ const xkzCenter = reactive([
|
|||
},
|
||||
{
|
||||
name: "石角村",
|
||||
center: [119.141602, 28.919005],
|
||||
center: [119.125078, 28.912612],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "红罗村",
|
||||
center: [119.206318, 28.913218],
|
||||
center: [119.184318, 28.913218],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "冷水村",
|
||||
center: [119.213226, 28.93395],
|
||||
center: [119.193226, 28.93395],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
|
|
@ -333,9 +337,10 @@ const xkzCenter = reactive([
|
|||
var map = null;
|
||||
const initMap = () => {
|
||||
map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
|
||||
map.enableScrollWheelZoom(true);
|
||||
map.setMapType(BMAP_SATELLITE_MAP);
|
||||
goMapCenter([119.178783, 29.034583], 12);
|
||||
map.enableScrollWheelZoom(true);
|
||||
goMapCenter([119.178783, 29.034583], 11);
|
||||
|
||||
//加载乡镇信息
|
||||
loadTown();
|
||||
//渲染地块
|
||||
|
|
@ -380,15 +385,30 @@ 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, index) => {
|
||||
createCustomOverlayJd(item, index);
|
||||
|
|
@ -397,13 +417,13 @@ const addJd = () => {
|
|||
//添加街道名2含数量
|
||||
const addJd2 = () => {
|
||||
if (center_now.value[0] == 119.178783) {
|
||||
goMapCenter([119.178783, 29.034581], 12);
|
||||
goMapCenter([119.178783, 29.034581], 11);
|
||||
}
|
||||
mapTownCount.map((item, index) => {
|
||||
createCustomOverlayJd2(item, index);
|
||||
});
|
||||
if (center_now.value[0] == 119.178783) {
|
||||
goMapCenter([119.178783, 29.034581], 12);
|
||||
goMapCenter([119.178783, 29.034581], 11);
|
||||
}
|
||||
};
|
||||
//加载村社信息
|
||||
|
|
@ -468,7 +488,7 @@ const createCustomOverlayJd = (polygon, indexx) => {
|
|||
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);
|
||||
|
|
@ -534,7 +554,7 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
|
|||
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);
|
||||
|
|
@ -559,7 +579,6 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
|
|||
}
|
||||
});
|
||||
addCs2();
|
||||
center_now.value = jdCenter;
|
||||
goMapCenter(jdCenter, 14);
|
||||
}
|
||||
};
|
||||
|
|
@ -606,10 +625,10 @@ const createCs2 = (polygon, indexx) => {
|
|||
div.style.justifyContent = "space-between";
|
||||
div.style.alignItems = "center";
|
||||
div.style.cursor = "pointer";
|
||||
div.style.padding = "10px";
|
||||
div.style.padding = "5px";
|
||||
div.style.minWidth = "100px";
|
||||
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
|
||||
div.style.transform = "translateY(70px)";
|
||||
div.style.transform = "translateY(50px)";
|
||||
div.setAttribute("name", this.properties.title);
|
||||
|
||||
var title = document.createElement("div");
|
||||
|
|
@ -680,14 +699,14 @@ const createCs = (polygon, indexx) => {
|
|||
div.style.justifyContent = "center";
|
||||
div.style.alignItems = "center";
|
||||
div.style.cursor = "pointer";
|
||||
div.style.padding = "10px";
|
||||
div.style.padding = "5px";
|
||||
div.style.minWidth = "60px";
|
||||
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
|
||||
div.style.transform = "translateY(70px)";
|
||||
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);
|
||||
|
|
@ -695,7 +714,7 @@ const createCs = (polygon, indexx) => {
|
|||
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);
|
||||
|
|
@ -1627,6 +1646,7 @@ onMounted(() => {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
margin-top: 112px;
|
||||
}
|
||||
|
||||
#id {
|
||||
|
|
@ -1856,13 +1876,33 @@ onMounted(() => {
|
|||
|
||||
.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;
|
||||
// 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;
|
||||
}
|
||||
|
||||
.choose {
|
||||
|
|
|
|||
|
|
@ -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