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

481
index.html
Unescape View File

@ -1,226 +1,263 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<link rel="icon" href="/favicon.ico" />
<title>若依管理系统</title>
<!--引入mars3d库lib 莱斯服务器-->
<!-- <link
href="https://zwyth.ntgaj.cn:8008/map3d/Cesium/Widgets/widgets.css"
rel="stylesheet"
type="text/css"
/>
<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> -->
<head> <!--引入mars3d库lib 官方服务-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link
<meta name="renderer" content="webkit"> href="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Widgets/widgets.css"
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> rel="stylesheet"
<link rel="icon" href="/favicon.ico"> type="text/css"
<title>若依管理系统</title> />
<link href="https://zwyth.ntgaj.cn:8008/map3d/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" /> <script
<script src="https://zwyth.ntgaj.cn:8008/map3d/Cesium/Cesium.js" type="text/javascript"></script> src="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Cesium.js"
<!--引入mars3d库lib--> type="text/javascript"
<script src="https://zwyth.ntgaj.cn:8008/map3d/turf.min.js" type="text/javascript"></script> ></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/mars3d/mars3d.js" type="text/javascript"></script> <link
href="https://registry.npmmirror.com/mars3d/latest/files/mars3d.css"
rel="stylesheet"
type="text/css"
/>
<script
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> src="https://registry.npmmirror.com/mars3d/latest/files/mars3d.js"
<style> type="text/javascript"
html, ></script>
body,
#app { <!--[if lt IE 11
height: 100%; ]><script>
margin: 0px; window.location.href = "/html/ie.html";
padding: 0px; </script><!
} [endif]-->
<style>
.chromeframe { html,
margin: 0.2em 0; body,
background: #ccc; #app {
color: #000; height: 100%;
padding: 0.2em 0; margin: 0px;
} padding: 0px;
}
#loader-wrapper {
position: fixed; .chromeframe {
top: 0; margin: 0.2em 0;
left: 0; background: #ccc;
width: 100%; color: #000;
height: 100%; padding: 0.2em 0;
z-index: 999999; }
}
#loader-wrapper {
#loader { position: fixed;
display: block; top: 0;
position: relative; left: 0;
left: 50%; width: 100%;
top: 50%; height: 100%;
width: 150px; z-index: 999999;
height: 150px; }
margin: -75px 0 0 -75px;
border-radius: 50%; #loader {
border: 3px solid transparent; display: block;
border-top-color: #FFF; position: relative;
-webkit-animation: spin 2s linear infinite; left: 50%;
-ms-animation: spin 2s linear infinite; top: 50%;
-moz-animation: spin 2s linear infinite; width: 150px;
-o-animation: spin 2s linear infinite; height: 150px;
animation: spin 2s linear infinite; margin: -75px 0 0 -75px;
z-index: 1001; border-radius: 50%;
} border: 3px solid transparent;
border-top-color: #fff;
#loader:before { -webkit-animation: spin 2s linear infinite;
content: ""; -ms-animation: spin 2s linear infinite;
position: absolute; -moz-animation: spin 2s linear infinite;
top: 5px; -o-animation: spin 2s linear infinite;
left: 5px; animation: spin 2s linear infinite;
right: 5px; z-index: 1001;
bottom: 5px; }
border-radius: 50%;
border: 3px solid transparent; #loader:before {
border-top-color: #FFF; content: "";
-webkit-animation: spin 3s linear infinite; position: absolute;
-moz-animation: spin 3s linear infinite; top: 5px;
-o-animation: spin 3s linear infinite; left: 5px;
-ms-animation: spin 3s linear infinite; right: 5px;
animation: spin 3s linear infinite; bottom: 5px;
} border-radius: 50%;
border: 3px solid transparent;
#loader:after { border-top-color: #fff;
content: ""; -webkit-animation: spin 3s linear infinite;
position: absolute; -moz-animation: spin 3s linear infinite;
top: 15px; -o-animation: spin 3s linear infinite;
left: 15px; -ms-animation: spin 3s linear infinite;
right: 15px; animation: spin 3s linear infinite;
bottom: 15px; }
border-radius: 50%;
border: 3px solid transparent; #loader:after {
border-top-color: #FFF; content: "";
-moz-animation: spin 1.5s linear infinite; position: absolute;
-o-animation: spin 1.5s linear infinite; top: 15px;
-ms-animation: spin 1.5s linear infinite; left: 15px;
-webkit-animation: spin 1.5s linear infinite; right: 15px;
animation: spin 1.5s linear infinite; bottom: 15px;
} border-radius: 50%;
border: 3px solid transparent;
border-top-color: #fff;
@-webkit-keyframes spin { -moz-animation: spin 1.5s linear infinite;
0% { -o-animation: spin 1.5s linear infinite;
-webkit-transform: rotate(0deg); -ms-animation: spin 1.5s linear infinite;
-ms-transform: rotate(0deg); -webkit-animation: spin 1.5s linear infinite;
transform: rotate(0deg); animation: spin 1.5s linear infinite;
} }
100% { @-webkit-keyframes spin {
-webkit-transform: rotate(360deg); 0% {
-ms-transform: rotate(360deg); -webkit-transform: rotate(0deg);
transform: rotate(360deg); -ms-transform: rotate(0deg);
} transform: rotate(0deg);
} }
@keyframes spin { 100% {
0% { -webkit-transform: rotate(360deg);
-webkit-transform: rotate(0deg); -ms-transform: rotate(360deg);
-ms-transform: rotate(0deg); transform: rotate(360deg);
transform: rotate(0deg); }
} }
100% { @keyframes spin {
-webkit-transform: rotate(360deg); 0% {
-ms-transform: rotate(360deg); -webkit-transform: rotate(0deg);
transform: rotate(360deg); -ms-transform: rotate(0deg);
} transform: rotate(0deg);
} }
100% {
#loader-wrapper .loader-section { -webkit-transform: rotate(360deg);
position: fixed; -ms-transform: rotate(360deg);
top: 0; transform: rotate(360deg);
width: 51%; }
height: 100%; }
background: #7171C6;
z-index: 1000; #loader-wrapper .loader-section {
-webkit-transform: translateX(0); position: fixed;
-ms-transform: translateX(0); top: 0;
transform: translateX(0); width: 51%;
} height: 100%;
background: #7171c6;
#loader-wrapper .loader-section.section-left { z-index: 1000;
left: 0; -webkit-transform: translateX(0);
} -ms-transform: translateX(0);
transform: translateX(0);
#loader-wrapper .loader-section.section-right { }
right: 0;
} #loader-wrapper .loader-section.section-left {
left: 0;
}
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%); #loader-wrapper .loader-section.section-right {
-ms-transform: translateX(-100%); right: 0;
transform: translateX(-100%); }
-webkit-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.000); .loaded #loader-wrapper .loader-section.section-left {
} -webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
.loaded #loader-wrapper .loader-section.section-right { transform: translateX(-100%);
-webkit-transform: translateX(100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-ms-transform: translateX(100%); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transform: translateX(100%); }
-webkit-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.000); .loaded #loader-wrapper .loader-section.section-right {
} -webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
.loaded #loader { transform: translateX(100%);
opacity: 0; -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transition: all 0.3s ease-out; transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s ease-out; }
}
.loaded #loader {
.loaded #loader-wrapper { opacity: 0;
visibility: hidden; -webkit-transition: all 0.3s ease-out;
-webkit-transform: translateY(-100%); transition: all 0.3s ease-out;
-ms-transform: translateY(-100%); }
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
.no-js #loader-wrapper {
display: none;
}
.no-js h1 {
color: #222222;
}
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span {
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #FFF;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源，请耐心等待</div>
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html> .loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
.no-js #loader-wrapper {
display: none;
}
.no-js h1 {
color: #222222;
}
#loader-wrapper .load_title {
font-family: "Open Sans";
color: #fff;
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span {
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #fff;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源，请耐心等待</div>
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</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