|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 575 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
@ -1,2 +1,4 @@
|
||||
|
||||
export { default as MapView } from './map.vue'
|
||||
|
||||
|
||||
export { default as navigationBar } from './navigationBar.vue'
|
||||
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div class="navigation-container">
|
||||
<div class="navigation-title">
|
||||
<div class="text-gradient" :text="title">{{ title }}</div>
|
||||
</div>
|
||||
<div class="navigation-menus">
|
||||
<router-link
|
||||
v-for="(item, index) in formatRouter"
|
||||
:key="index"
|
||||
:to="item.path"
|
||||
custom
|
||||
v-slot="{ href, route, navigate, isActive, isExactActive }"
|
||||
>
|
||||
<a
|
||||
:href="href"
|
||||
@click="navigate"
|
||||
class="menu-item"
|
||||
:class="{ activeMenu: isActive }"
|
||||
>
|
||||
<svg-icon :icon-class="item.meta.icon" style="font-size: 18px" />
|
||||
<span>{{ item.meta.title }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<!-- <div
|
||||
class="menu-item"
|
||||
:class="currentIndex === index ? 'activeMenu' : ''"
|
||||
v-for="(item, index) in formatRouter"
|
||||
:key="index"
|
||||
@click="handlerSelect(index, item.meta)"
|
||||
>
|
||||
|
||||
<span>{{ item.meta.title }}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="navigation-time">{{ formattedDate }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onBeforeUnmount, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import moment from "moment";
|
||||
import "moment/locale/zh-cn"; // 导入中文语言包
|
||||
moment.locale("zh-cn", {
|
||||
weekdays: "星期一_星期二_星期三_星期四_星期五_星期六_星期日".split("_"),
|
||||
}); // 设置为中文
|
||||
|
||||
const router = useRouter();
|
||||
const { proxy } = getCurrentInstance();
|
||||
const title = "徐汇区智慧园林数据可视化驾驶舱";
|
||||
|
||||
let currentIndex = ref(4);
|
||||
|
||||
/**
|
||||
* 获取当前时间
|
||||
*/
|
||||
const formattedDate = computed(() => {
|
||||
return moment("2019-05-14").format("YYYY-MM-DD dddd");
|
||||
});
|
||||
|
||||
/**
|
||||
* 获取大屏路由信息
|
||||
*/
|
||||
const formatRouter = computed(() => {
|
||||
const menuList = router.options.routes.find(
|
||||
(item) => item.path === "/visualization"
|
||||
);
|
||||
console.log(menuList);
|
||||
if (menuList) {
|
||||
return menuList.children;
|
||||
}
|
||||
return [];
|
||||
});
|
||||
|
||||
/**
|
||||
* 菜单选中
|
||||
* @param index
|
||||
*/
|
||||
const handlerSelect = (index, item) => {
|
||||
if (item.disable) {
|
||||
proxy.$modal.msgWarning("功能开发中，敬请期待");
|
||||
return;
|
||||
}
|
||||
if (currentIndex.value !== index) {
|
||||
currentIndex.value = index;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navigation-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
background: linear-gradient(90deg, #08121c 0%, #275382 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.navigation-title {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 42px;
|
||||
background-image: url("@/assets/images/visualization/navigation-title.png");
|
||||
background-size: 100% 100%;
|
||||
.text-gradient {
|
||||
font-size: 36px;
|
||||
letter-spacing: 3px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
font-family: "Alimama ShuHeiTi-Bold";
|
||||
}
|
||||
|
||||
.text-gradient::before {
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
background: linear-gradient(to bottom, #ffffff 48%, #3c87c6 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-menus {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
margin: 0 10px;
|
||||
gap: 10px;
|
||||
|
||||
.menu-item {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
letter-spacing: 1px;
|
||||
font-weight: bold;
|
||||
font-family: "Alimama ShuHeiTi-Bold";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.activeMenu {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-time {
|
||||
padding-right: 35px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
font-family: "Alimama ShuHeiTi-Bold";
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +1,29 @@
|
||||
<template>
|
||||
<div class="visualization-container">
|
||||
<MapView></MapView>
|
||||
<navigationBar></navigationBar>
|
||||
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { MapView } from './components/index.js'
|
||||
import { navigationBar } from "./components/index.js";
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.visualization-container {
|
||||
height: 100%;
|
||||
background: RGBA(20, 25, 52, 1);
|
||||
}
|
||||
.visualization-child {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 25px;
|
||||
letter-spacing: 3px;
|
||||
font-weight: bold;
|
||||
font-family: "Alimama ShuHeiTi-Bold";
|
||||
}
|
||||
</style>
|
||||
|
||||