suzhou-jichuang-lanhai
/
NanTong-police
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

处理标题，以及弹窗回顶问题

Browse Source
main
许宏杰 3 weeks ago
parent b5c9467802
commit 77ee40e2d1
4 changed files with 291 additions and 234 deletions
Show Stats Download Patch File Download Diff File

103
index.html
Unescape View File

@ -1,25 +1,66 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit" />
<meta name="renderer" content="webkit"> <meta
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> name="viewport"
<link rel="icon" href="/favicon.ico"> content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<link rel="icon" href="/favicon.ico" />
<title>若依管理系统</title> <title>若依管理系统</title>
<link href="https://zwyth.ntgaj.cn:8008/map3d/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" /> <!--引入mars3d库lib 莱斯服务器-->
<script src="https://zwyth.ntgaj.cn:8008/map3d/Cesium/Cesium.js" type="text/javascript"></script> <!-- <link
<!--引入mars3d库lib--> href="https://zwyth.ntgaj.cn:8008/map3d/Cesium/Widgets/widgets.css"
<script src="https://zwyth.ntgaj.cn:8008/map3d/turf.min.js" type="text/javascript"></script> rel="stylesheet"
<link href="https://zwyth.ntgaj.cn:8008/map3d/mars3d/mars3d.css" rel="stylesheet" type="text/css" /> type="text/css"
<script src="https://zwyth.ntgaj.cn:8008/map3d/mars3d/mars3d.js" type="text/javascript"></script> />
<link
href="https://zwyth.ntgaj.cn:8008/map3d/mars3d/mars3d.css"
rel="stylesheet"
type="text/css"
/>
<script
src="https://zwyth.ntgaj.cn:8008/map3d/Cesium/Cesium.js"
type="text/javascript"
></script>
<script
src="https://zwyth.ntgaj.cn:8008/map3d/turf.min.js"
type="text/javascript"
></script>
<script
src="https://zwyth.ntgaj.cn:8008/map3d/mars3d/mars3d.js"
type="text/javascript"
></script> -->
<!--引入mars3d库lib 官方服务-->
<link
href="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"
type="text/css"
/>
<script
src="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Cesium.js"
type="text/javascript"
></script>
<link
href="https://registry.npmmirror.com/mars3d/latest/files/mars3d.css"
rel="stylesheet"
type="text/css"
/>
<script
src="https://registry.npmmirror.com/mars3d/latest/files/mars3d.js"
type="text/javascript"
></script>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> <!--[if lt IE 11
]><script>
window.location.href = "/html/ie.html";
</script><!
[endif]-->
<style> <style>
html, html,
body, body,
@ -55,7 +96,7 @@
margin: -75px 0 0 -75px; margin: -75px 0 0 -75px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border: 3px solid transparent;
border-top-color: #FFF; border-top-color: #fff;
-webkit-animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite; -ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite;
@ -73,7 +114,7 @@
bottom: 5px; bottom: 5px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border: 3px solid transparent;
border-top-color: #FFF; border-top-color: #fff;
-webkit-animation: spin 3s linear infinite; -webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite; -moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite; -o-animation: spin 3s linear infinite;
@ -90,7 +131,7 @@
bottom: 15px; bottom: 15px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border: 3px solid transparent;
border-top-color: #FFF; border-top-color: #fff;
-moz-animation: spin 1.5s linear infinite; -moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite; -o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite; -ms-animation: spin 1.5s linear infinite;
@ -98,7 +139,6 @@
animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;
} }
@-webkit-keyframes spin { @-webkit-keyframes spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
@ -127,13 +167,12 @@
} }
} }
#loader-wrapper .loader-section { #loader-wrapper .loader-section {
position: fixed; position: fixed;
top: 0; top: 0;
width: 51%; width: 51%;
height: 100%; height: 100%;
background: #7171C6; background: #7171c6;
z-index: 1000; z-index: 1000;
-webkit-transform: translateX(0); -webkit-transform: translateX(0);
-ms-transform: translateX(0); -ms-transform: translateX(0);
@ -148,21 +187,20 @@
right: 0; right: 0;
} }
.loaded #loader-wrapper .loader-section.section-left { .loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%); -webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%); -ms-transform: translateX(-100%);
transform: translateX(-100%); transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
} }
.loaded #loader-wrapper .loader-section.section-right { .loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%); -webkit-transform: translateX(100%);
-ms-transform: translateX(100%); -ms-transform: translateX(100%);
transform: translateX(100%); transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
} }
.loaded #loader { .loaded #loader {
@ -189,8 +227,8 @@
} }
#loader-wrapper .load_title { #loader-wrapper .load_title {
font-family: 'Open Sans'; font-family: "Open Sans";
color: #FFF; color: #fff;
font-size: 19px; font-size: 19px;
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -205,13 +243,13 @@
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
font-size: 13px; font-size: 13px;
color: #FFF; color: #fff;
opacity: 0.5; opacity: 0.5;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div id="loader-wrapper"> <div id="loader-wrapper">
<div id="loader"></div> <div id="loader"></div>
@ -221,6 +259,5 @@
</div> </div>
</div> </div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

2
src/components/NavigationBar/index.vue
Unescape View File

@ -8,7 +8,7 @@
const props = defineProps({ const props = defineProps({
title: { title: {
type: String, type: String,
default: "南通市公安局政务服务实景三维地图", default: "政务服务实景三维地图",
}, },
}); });

2
src/router/index.js
Unescape View File

@ -166,7 +166,7 @@ export const dynamicRoutes = [
] ]
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(process.env.NODE_ENV === 'production' ? '/nantong-police/' : '/'),
routes: constantRoutes, routes: constantRoutes,
scrollBehavior(to, from, savedPosition) { scrollBehavior(to, from, savedPosition) {
if (savedPosition) { if (savedPosition) {

40
src/views/map.vue
Unescape View File

@ -90,7 +90,7 @@
width="30%" width="30%"
class="info-dialog" class="info-dialog"
> >
<div class="info-box"> <div class="info-box" ref="infoDialog">
<div class="info-title">基本信息</div> <div class="info-title">基本信息</div>
<div class="info-row"> <div class="info-row">
<div class="row-lable">地址：</div> <div class="row-lable">地址：</div>
@ -157,7 +157,7 @@
v-model="innerVisible" v-model="innerVisible"
class="info-dialog" class="info-dialog"
> >
<div class="info-box"> <div class="info-box" ref="businessDialog">
<div class="info-row"> <div class="info-row">
<div class="row-lable">业务名称：</div> <div class="row-lable">业务名称：</div>
<div class="row-value">{{ businessInfo.businessName }}</div> <div class="row-value">{{ businessInfo.businessName }}</div>
@ -221,7 +221,8 @@ import {
getbusinessById, getbusinessById,
getEnterpriseTree, getEnterpriseTree,
} from "@/api/mapApi"; } from "@/api/mapApi";
import { ref, reactive, onMounted, onUnmounted } from "vue"; import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
const baseUrl = import.meta.env.VITE_APP_BASE_API; const baseUrl = import.meta.env.VITE_APP_BASE_API;
let options = reactive({ let options = reactive({
scene: { scene: {
@ -253,10 +254,10 @@ let options = reactive({
enableCollisionDetection: false, // 允许进入地下 enableCollisionDetection: false, // 允许进入地下
}, },
}, },
control:{ control: {
toolbar:false, toolbar: false,
homeButton:false, homeButton: false,
zoom:false zoom: false,
}, },
terrain: { terrain: {
show: false, show: false,
@ -281,6 +282,8 @@ let options = reactive({
}, },
], ],
}); });
const infoDialog = ref(null);
const businessDialog = ref(null);
//地图图层 //地图图层
const mapModel = reactive(["二维地图", "三维地图"]); const mapModel = reactive(["二维地图", "三维地图"]);
//图标类型图层 //图标类型图层
@ -360,6 +363,10 @@ const handleInfoByyewu = async (id) => {
businessInfo = res.data; businessInfo = res.data;
innerVisible.value = true; innerVisible.value = true;
nextTick(() => {
scrollToTop(businessDialog.value);
});
}; };
/** /**
@ -478,6 +485,10 @@ const initMarker = (item, flyTo = false, markerLength = 0) => {
info = await getInfo(infoItem.id, infoItem.lonLat); info = await getInfo(infoItem.id, infoItem.lonLat);
queryParams.name = info.pointName; queryParams.name = info.pointName;
dialogVisible.value = true; dialogVisible.value = true;
nextTick(() => {
scrollToTop(infoDialog.value);
});
}); });
if (markerLength > 0) { if (markerLength > 0) {
@ -625,14 +636,11 @@ const changeModel = (index) => {
} }
}; };
/** /**
* 地图初始化完毕 * 地图初始化完毕
* @param mapInstance * @param mapInstance
*/ */
const mapLoad = (mapInstance) => { const mapLoad = (mapInstance) => {
map = mapInstance; map = mapInstance;
//创建marker图层 //创建marker图层
mapLayer.markerLayer = new mars3d.layer.GraphicLayer({ mapLayer.markerLayer = new mars3d.layer.GraphicLayer({
@ -661,6 +669,18 @@ const getdictList = async () => {
let res = await getdicts(); let res = await getdicts();
dictList = res.result; dictList = res.result;
}; };
/**
* 平滑滚动顶部
*/
const scrollToTop = (elementItem) => {
if (elementItem) {
elementItem.scrollTo({
top: 0,
behavior: "smooth",
});
}
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.map-container { .map-container {

Write Preview
Loading…
Cancel
Save