<template>
|
<div class="wrapper">
|
<div class="main-header">
|
<div class="menu-list left">
|
<div class="time-box">{{ time }}</div>
|
<div
|
@mouseenter="item.childrenFlag = true"
|
@mouseleave="item.childrenFlag = false"
|
class="nav-list"
|
:class="{ on: currentUrl.indexOf(item.path) != -1 }"
|
@click="goToPath(item)"
|
v-for="(item, index) in menuLeftList"
|
:key="index"
|
>
|
<span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
|
<div class="sub-nav-list" v-show="item.children && item.childrenFlag">
|
<div
|
v-for="(subItem, subIndex) in item.children"
|
:key="subIndex"
|
@click="goToPath(subItem)"
|
>
|
{{
|
subItem.menuName
|
}}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="title">
|
<h3>军地协同救援示范应用</h3>
|
</div>
|
|
<!-- 菜单导航 -->
|
<div class="menu-list right">
|
<div
|
@mouseenter="item.childrenFlag = true"
|
@mouseleave="item.childrenFlag = false"
|
class="nav-list"
|
:class="{ on: currentUrl.indexOf(item.path) != -1 }"
|
@click="goToPath(item)"
|
v-for="(item, index) in menuRightList"
|
:key="index"
|
>
|
<span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
|
<div class="sub-nav-list" v-show="item.children && item.childrenFlag">
|
<div
|
v-for="(subItem, subIndex) in item.children"
|
:key="subIndex"
|
@click="goToPath(subItem)"
|
>
|
{{
|
subItem.menuName
|
}}
|
</div>
|
</div>
|
</div>
|
<div class="weather">
|
<span>{{ weather }}</span><span>{{ temperature}}℃</span>
|
</div>
|
<div class="userInfo">
|
<span>{{ userName }}</span>
|
<div class="exit"><img src="/img/exit.png" alt=""></div>
|
</div>
|
</div>
|
</div>
|
<div class="main-container">
|
<!-- 地图区域 -->
|
<map-box ref="modalForm">
|
<!-- 主体内容区域 -->
|
<div
|
slot="mainContent"
|
class="main-content"
|
id="MainContent"
|
>
|
<router-view ref="target-name"></router-view>
|
</div>
|
</map-box>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import mapBox from '@/components/map/index.vue'
|
import { getWeather } from '@/api/layout/index.js'
|
|
export default {
|
name: 'layout',
|
components: {
|
mapBox,
|
},
|
data(){
|
return {
|
menuLeftList: [
|
{
|
menuName: '综合设计',
|
path: '/layout/statistics'
|
},
|
{
|
menuName: '防火预警',
|
path: '/layout/fireWarning'
|
},
|
],
|
menuRightList: [
|
{
|
menuName: '军地协同',
|
path: '/layout/armyLocal',
|
childrenFlag: false,
|
// children: [
|
// {
|
// menuName: '视频预览',
|
// path: '/layout/video/list'
|
// }
|
// ]
|
},
|
{
|
menuName: '运维管理',
|
path: '/layout/management'
|
},
|
],
|
userOn: false,
|
isShowUserDetail: false,
|
currentUrl: '/layout/statistics',
|
time: "----年--月--日 --:--",
|
weather:'',
|
temperature:'',
|
userName:'管理员',
|
}
|
},
|
|
created(){
|
this.currentUrl = this.$route.path
|
},
|
|
methods:{
|
openUser () {
|
this.userOn = !this.userOn
|
this.isShowUserDetail = !this.isShowUserDetail
|
},
|
|
/**
|
* @description: 路由跳转的事件 通过给父元素绑定事件-子元素触发，并传入参数
|
* @param {*} e 子元素上绑定的的自定义属性
|
* @return {*} 没有返回值
|
*/
|
goToPath (params) {
|
if (params.children && params.children.length > 0) return
|
|
if (params.path) {
|
if (this.$route.path == params.path) return
|
this.$router.push(params.path)
|
} else {
|
params.childrenFlag = !params.childrenFlag
|
}
|
},
|
|
// 时间组件
|
currentTime() {
|
setInterval(this.getTime, 500);
|
},
|
|
// 天气组件
|
currentWeather(){
|
setInterval(this.getWeather, 60000);
|
},
|
|
// 时间组件
|
getTime() {
|
let yy = new Date().getFullYear();
|
let mm = new Date().getMonth() + 1;
|
let dd = new Date().getDate();
|
let hh = new Date().getHours();
|
let mf =
|
new Date().getMinutes() < 10
|
? "0" + new Date().getMinutes()
|
: new Date().getMinutes();
|
let ss =
|
new Date().getSeconds() < 10
|
? "0" + new Date().getSeconds()
|
: new Date().getSeconds();
|
this.time =
|
yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
|
},
|
|
|
},
|
|
mounted() {
|
this.currentTime();
|
|
getWeather().then(res=>{
|
this.weather = res.data.data.weather.weather
|
this.temperature = res.data.data.weather.temp
|
})
|
},
|
|
watch: {
|
$route: {
|
handler (newPath, oldPath) {
|
this.currentUrl = newPath.path
|
},
|
immediate: true
|
}
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.wrapper {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.main-header {
|
display: flex;
|
justify-content: space-between;
|
position: absolute;
|
width: 100%;
|
height: 60px;
|
line-height: 60px;
|
text-align: left;
|
font-size: 44px;
|
font-weight: bold;
|
background-color: $menu-tab-bg-color;
|
color: #fff;
|
z-index: 99;
|
|
&::after {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
z-index: -1;
|
opacity: 0.85;
|
}
|
|
.title {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 450px;
|
font-size: 24px;
|
overflow: hidden;
|
letter-spacing: 6px;
|
|
& > img {
|
height: 80%;
|
margin: 0 10px 0 10px;
|
}
|
}
|
|
.time-box {
|
font-size: 16px;
|
padding-right: 60px;
|
}
|
|
.menu-list.left {
|
margin-left: 10px;
|
// width: calc((100% - 450px)/2);
|
justify-content: space-between;
|
|
.nav-list {
|
background: $menu-tab-bg-color;
|
}
|
}
|
|
.menu-list.right {
|
margin-right: 72px;
|
// width: calc((100% - 450px)/2);
|
justify-content: space-between;
|
|
.nav-list {
|
background: $menu-tab-bg-color;
|
}
|
|
.weather {
|
width: 100px;
|
font-size: 16px;
|
span:first-child{
|
margin-right: 10px;
|
}
|
}
|
|
.userInfo {
|
font-size: 16px;
|
display: flex;
|
.exit {
|
margin-left: 10px;
|
}
|
}
|
}
|
|
.menu-list {
|
display: flex;
|
align-items: center;
|
|
& > .nav-list {
|
& > span.on {
|
color: #68f5f4;
|
}
|
}
|
|
.nav-list {
|
margin: 0 15px;
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 132px;
|
height: 36px;
|
font-size: 18px;
|
font-weight: bold;
|
letter-spacing: 0.5px;
|
cursor: pointer;
|
|
.sub-nav-list {
|
border-top: 14px solid transparent;
|
position: absolute;
|
top: 28px;
|
left: 72px;
|
width: 100%;
|
cursor: default;
|
z-index: 999;
|
|
div {
|
height: 36px;
|
text-align: center;
|
line-height: 36px;
|
font-size: 16px;
|
background: $menu-tab-bg-color;
|
cursor: pointer;
|
box-sizing: content-box;
|
}
|
|
div:first-child {
|
padding-top: 10px;
|
}
|
|
div:last-child {
|
padding-bottom: 10px;
|
}
|
|
div:hover {
|
background: $table-body-tr-2n-color !important;
|
}
|
}
|
}
|
|
.nav-list.on{
|
border-bottom: 2px solid #68f5f4;
|
}
|
}
|
|
.user-infor {
|
position: absolute;
|
top: 0;
|
right: 0;
|
width: 60px;
|
height: 60px;
|
line-height: 60px;
|
text-align: center;
|
font-size: 24px;
|
cursor: pointer;
|
|
.userIcon {
|
position: absolute;
|
top: 0;
|
right: 0;
|
left: 0;
|
bottom: 0;
|
margin: auto;
|
width: 40px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
background: $menu-tab-bg-color;
|
box-shadow: inset 0 0 10px $menu-tab-shadow;
|
border-radius: 50%;
|
}
|
|
.userIcon.on {
|
color: #68f5f4;
|
}
|
|
.userDetail {
|
width: 160px;
|
position: absolute;
|
top: 64px;
|
right: 4px;
|
background: $menu-tab-bg-color;
|
border-radius: 8px;
|
cursor: default;
|
|
.triangle {
|
position: absolute;
|
top: -16px;
|
right: 20px;
|
width: 0px;
|
height: 0px;
|
border: 8px solid #000;
|
border-top-color: transparent;
|
border-bottom-color: rgba(3, 82, 102, 0.8);
|
border-left-color: transparent;
|
border-right-color: transparent;
|
}
|
|
.userName {
|
margin-top: 4px;
|
width: 100%;
|
height: 32px;
|
line-height: 32px;
|
font-size: 14px;
|
font-weight: 500;
|
box-sizing: content-box;
|
color: #fff;
|
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
|
}
|
|
.userBtn {
|
margin-bottom: 4px;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
font-size: 16px;
|
font-weight: normal;
|
|
& > div {
|
margin-top: 4px;
|
width: 100px;
|
height: 32px;
|
line-height: 32px;
|
background-color: $menu-tab-bg-color;
|
border-radius: 4px;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
}
|
|
.main-container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
</style>
|
