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

gx

This commit is contained in:
姚宇浩 2024-07-24 15:13:26 +08:00
parent 847bf45e98 fb012e3620
commit c289d2c327
12 changed files with 144 additions and 68 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;
} }

34
src/components/header.vue
View File

@ -1,4 +1,7 @@
<template> <template>
<teleport to="body">
<div class="header_content" style="position: absolute;z-index: 999;width: 1920px;">
<div class="header"> <div class="header">
<!-- <img class="title" src="../assets/img_07.png" alt="" /> --> <!-- <img class="title" src="../assets/img_07.png" alt="" /> -->
<!-- <div class="time"> <!-- <div class="time">
@ -8,20 +11,14 @@
<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)"
:key="item.name"
>
<div class="itemText" @click="to(item.url)">{{ item.name }}</div> <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
</div> </div>
</div> </div>
<div class="header-menu-item header-menu-right"> <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)"
:class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'" :key="item.name">
v-for="item in data.urlLeft.slice(4, 8)"
:key="item.name"
>
<div class="itemText" @click="to(item.url)">{{ item.name }}</div> <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
</div> </div>
</div> </div>
@ -29,6 +26,9 @@
<img src="../assets/RightLine.gif" class="rightLineClass" /> <img src="../assets/RightLine.gif" class="rightLineClass" />
<img src="../assets/RightLine.gif" class="leftLineClass" /> <img src="../assets/RightLine.gif" class="leftLineClass" />
</div> </div>
</div>
</teleport>
</template> </template>
<script setup> <script setup>
@ -69,12 +69,12 @@ let menuIf = ref(true);
const data = reactive({ const data = reactive({
urlLeft: [ urlLeft: [
{ {
name: "要素一张图", name: "评估模型",
url: "/home/index/map", url: "/home/index/table",
}, },
{ {
name: "指标模型模块", name: "要素一张图",
url: "/home/index/table", url: "/home/index/map",
}, },
{ {
name: "总体概览", name: "总体概览",
@ -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 {

12
src/view/guide.vue
View File

@ -145,11 +145,11 @@ const tabData = reactive({
tabNum: 0, tabNum: 0,
tabList: [ tabList: [
{ {
name: "要素一张图", name: "评估模型",
img: tab7, img: tab7,
}, },
{ {
name: "指标模型模块", name: "要素一张图",
img: tab8, img: tab8,
}, },
{ {
@ -180,11 +180,11 @@ const tabData = reactive({
scenList: [ scenList: [
{ {
img: png1, img: png1,
url: "/home/index/map", url: "/home/index/table",
}, },
{ {
img: png1, img: png1,
url: "/home/index/table", url: "/home/index/map",
}, },
{ {
img: png1, img: png1,
@ -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;
@ -571,4 +574,5 @@ body {
} }
} }
} }
</style> </style>

23
src/view/home.vue
View File

@ -19,9 +19,23 @@ 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 + ")";
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 +57,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 +92,7 @@ body {
left: 0; left: 0;
z-index: 100; z-index: 100;
} }
#container { #container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -81,6 +101,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 {

104
src/view/sy_map.vue
View File

@ -1,7 +1,8 @@
<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="left" style="width: 517px;">
<div class="lyx"> <div class="lyx">
<div class="title"> <div class="title">
<div class="title_name">{{ title_choose }}</div> <div class="title_name">{{ title_choose }}</div>
@ -39,7 +40,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="right"> <div class="right" style="width: 517px;" >
<div class="jbggfwq"> <div class="jbggfwq">
<div class="title"> <div class="title">
<div class="title_name">基本公共服务圈</div> <div class="title_name">基本公共服务圈</div>
@ -84,7 +85,10 @@
</div> </div>
</div> </div>
</div> </div>
</teleport>
</div> </div>
</template> </template>
<script setup> <script setup>
import { import {
@ -256,17 +260,17 @@ const xkzDk = reactive([]);
const xkzCenter = reactive([ const xkzCenter = reactive([
{ {
name: "溪口村", name: "溪口村",
center: [119.204344, 28.862394], center: [119.175728, 28.846981],
number: "50", number: "50",
}, },
{ {
name: "扁石村", name: "扁石村",
center: [119.183549, 28.858], center: [119.158971, 28.856232],
number: "50", number: "50",
}, },
{ {
name: "大垅村", name: "大垅村",
center: [119.170309, 28.862776], center: [119.175309, 28.862776],
number: "50", number: "50",
}, },
{ {
@ -276,22 +280,22 @@ const xkzCenter = reactive([
}, },
{ {
name: "双港口村", name: "双港口村",
center: [119.211353, 28.869576], center: [119.211353, 28.872576],
number: "50", number: "50",
}, },
{ {
name: "灵上村", name: "灵上村",
center: [119.177185, 28.874582], center: [119.175805, 28.868218],
number: "50", number: "50",
}, },
{ {
name: "灵下村", name: "灵下村",
center: [119.175233, 28.878677], center: [119.168797, 28.871674],
number: "50", number: "50",
}, },
{ {
name: "下徐村", name: "下徐村",
center: [119.177544, 28.882818], center: [119.175667, 28.878136],
number: "50", number: "50",
}, },
{ {
@ -301,7 +305,7 @@ const xkzCenter = reactive([
}, },
{ {
name: "寺下村", name: "寺下村",
center: [119.1718, 28.89816], center: [119.1648, 28.90016],
number: "50", number: "50",
}, },
{ {
@ -311,17 +315,17 @@ const xkzCenter = reactive([
}, },
{ {
name: "石角村", name: "石角村",
center: [119.141602, 28.919005], center: [119.125078, 28.912612],
number: "50", number: "50",
}, },
{ {
name: "红罗村", name: "红罗村",
center: [119.206318, 28.913218], center: [119.184318, 28.913218],
number: "50", number: "50",
}, },
{ {
name: "冷水村", name: "冷水村",
center: [119.213226, 28.93395], center: [119.193226, 28.93395],
number: "50", number: "50",
}, },
{ {
@ -333,9 +337,10 @@ const xkzCenter = reactive([
var map = null; var map = null;
const initMap = () => { const initMap = () => {
map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 }); map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
map.enableScrollWheelZoom(true);
map.setMapType(BMAP_SATELLITE_MAP); map.setMapType(BMAP_SATELLITE_MAP);
goMapCenter([119.178783, 29.034583], 12); map.enableScrollWheelZoom(true);
goMapCenter([119.178783, 29.034583], 11);
//加载乡镇信息 //加载乡镇信息
loadTown(); loadTown();
//渲染地块 //渲染地块
@ -380,15 +385,30 @@ 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, index) => { mapTownCount.map((item, index) => {
createCustomOverlayJd(item, index); createCustomOverlayJd(item, index);
@ -397,13 +417,13 @@ const addJd = () => {
//添加街道名2含数量 //添加街道名2含数量
const addJd2 = () => { const addJd2 = () => {
if (center_now.value[0] == 119.178783) { if (center_now.value[0] == 119.178783) {
goMapCenter([119.178783, 29.034581], 12); goMapCenter([119.178783, 29.034581], 11);
} }
mapTownCount.map((item, index) => { mapTownCount.map((item, index) => {
createCustomOverlayJd2(item, index); createCustomOverlayJd2(item, index);
}); });
if (center_now.value[0] == 119.178783) { 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); 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);
@ -534,7 +554,7 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
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);
@ -559,7 +579,6 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
} }
}); });
addCs2(); addCs2();
center_now.value = jdCenter;
goMapCenter(jdCenter, 14); goMapCenter(jdCenter, 14);
} }
}; };
@ -606,10 +625,10 @@ const createCs2 = (polygon, indexx) => {
div.style.justifyContent = "space-between"; 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.minWidth = "100px"; div.style.minWidth = "100px";
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; 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); div.setAttribute("name", this.properties.title);
var title = document.createElement("div"); var title = document.createElement("div");
@ -680,14 +699,14 @@ const createCs = (polygon, indexx) => {
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 = "10px"; div.style.padding = "5px";
div.style.minWidth = "60px"; div.style.minWidth = "60px";
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; 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); 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);
@ -695,7 +714,7 @@ const createCs = (polygon, indexx) => {
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);
@ -1627,6 +1646,7 @@ onMounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
margin-top: 112px;
} }
#id { #id {
@ -1856,13 +1876,33 @@ onMounted(() => {
.jbggfwq_content_item_right_item { .jbggfwq_content_item_right_item {
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box; box-sizing: border-box;
width: 92px;
height: 48px; height: 48px;
font-weight: 500; font-weight: 500;
text-align: center;
font-size: 16px; font-size: 16px;
line-height: 28px; line-height: 28px;
background: rgba(124, 151, 180, 0.8); 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 { .choose {

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 {