|
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>
|
<template>
|
||||||
<div class="visualization-container">
|
<div class="visualization-container">
|
||||||
<MapView></MapView>
|
<navigationBar></navigationBar>
|
||||||
|
|
||||||
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { MapView } from './components/index.js'
|
import { navigationBar } from "./components/index.js";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.visualization-container {
|
.visualization-container {
|
||||||
height: 100%;
|
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>
|
</style>
|
||||||
|
|||||||