<div class="wromdiv">
<Layout style="height: 100%" class="main">
<div class="headwrom">
<div class="head">
<div class="head-right-icon">
<i class="icon icon-news">
<i class="icon icon-delet">
<i class="icon icon-next">
<div class="left-nav">
<Menu active-key="1-2" theme="dark" :open-keys="['1']">
<Submenu key="1" class="submenuclss">
<template slot="title">
<i class="iconnav navicon-fx">
<span class="span-fx">防汛总览
<Menu-item key="1-1" @click.native="$router.push('/prevention')">巡视任务
<Menu-item key="1-2" @click.native="$router.push('/problem')">发现问题
<Menu-item key="1-3" @click.native="$router.push('/situation')">上报汛情
<Menu-item key="1-4" @click.native="$router.push('/Overflow')">溢水警告
<Menu-item key="1-5" @click.native="$router.push('/flood')">防汛报表
<Menu active-key="1-2" theme="dark" width="auto" :open-keys="['1']">
<Submenu key="2" class="submenuclss">
<template slot="title">
<i class="iconnav navicon-rw">
<span class="span-zy">
任务
<Menu-item key="2-1">1
<Menu-item key="2-2">2
<Menu active-key="1-2" theme="dark" width="auto" :open-keys="['1']">
<Submenu key="3" class="submenuclss">
<template slot="title">
<i class="iconnav navicon-zy">
<span class="span-zy">资源
<Menu-item key="3-1">1
<Menu-item key="3-2">2
<Menu active-key="1-2" theme="dark" width="auto" :open-keys="['1']">
<Submenu key="4" class="submenuclss" >
<template slot="title">
<i class="iconone icon-qx">
<span class="span-zy" @click.native="$router.push('/Cloudy')">多云转晴
<span class="span-zy">1-11°C
<Sider hide-trigger collapsible :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
<Content class="main-content-con">
<Layout class="main-layout-con">
<Content class="content-wrapper">
<keep-alive :include="cacheList">
<ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper">
import SideMenufrom './components/side-menu'
import HeaderBarfrom './components/header-bar'
import TagsNavfrom './components/tags-nav'
import Userfrom './components/user'
import ABackTopfrom './components/a-back-top'
import Fullscreenfrom './components/fullscreen'
import Languagefrom './components/language'
import ErrorStorefrom './components/error-store'
import { mapMutations, mapActions, mapGetters }from 'vuex'
import { getNewTagList, routeEqual }from '@/libs/util'
import routersfrom '@/router/routers'
// import minLogo from '@/assets/images/logo-min.jpg'
// import maxLogo from '@/assets/images/logo.jpg'
import './main.less'
export default {
name:'Main',
components: {
// 左侧导航组件
// SideMenu,
// 头部组件
// HeaderBar,
// Language,
// tab导航
// TagsNav,
Fullscreen,
ErrorStore,
// 登录组件
// User,
ABackTop
},
data () {
return {
collapsed:false,
// minLogo,
// maxLogo,
isFullscreen:false
}
},
computed: {
...mapGetters([
'errorCount'
]),
tagNavList () {
return this.$store.state.app.tagNavList
},
tagRouter () {
return this.$store.state.app.tagRouter
},
userAvatar () {
return this.$store.state.user.avatarImgPath
},
cacheList () {
const list = ['ParentView', ...this.tagNavList.length ?this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []]
return list
},
menuList () {
return this.$store.getters.menuList
},
local () {
return this.$store.state.app.local
},
hasReadErrorPage () {
return this.$store.state.app.hasReadErrorPage
},
unreadCount () {
return this.$store.state.user.unreadCount
}
},
methods: {
info () {
this.$Message.info('这是一条普通的提醒');
},
...mapMutations([
'setBreadCrumb',
'setTagNavList',
'addTag',
'setLocal',
'setHomeRoute',
'closeTag'
]),
...mapActions([
'handleLogin',
'getUnreadMessageCount'
]),
turnToPage (route) {
let { name, params, query } = {}
if (typeof route ==='string') name = route
else {
name = route.name
params = route.params
query = route.query
}
if (name.indexOf('isTurnByHref_') > -1) {
window.open(name.split('_')[1])
return
}
this.$router.push({
name,
params,
query
})
},
handleCollapsedChange (state) {
this.collapsed = state
},
handleCloseTag (res, type, route) {
if (type !=='others') {
if (type ==='all') {
this.turnToPage(this.$config.homeName)
}else {
if (routeEqual(this.$route, route)) {
this.closeTag(route)
}
}
}
this.setTagNavList(res)
},
handleClick (item) {
this.turnToPage(item)
}
},
watch: {
'$route' (newRoute) {
const { name, query, params, meta } = newRoute
this.addTag({
route: { name, query, params, meta },
type:'push'
})
this.setBreadCrumb(newRoute)
this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
this.$refs.sideMenu.updateOpenName(newRoute.name)
}
},
mounted () {
/**
* @description 初始化设置面包屑导航和标签导航
*/
this.setTagNavList()
this.setHomeRoute(routers)
const { name, params, query, meta } =this.$route
this.addTag({
route: { name, params, query, meta }
})
this.setBreadCrumb(this.$route)
// 设置初始语言
this.setLocal(this.$i18n.locale)
// 如果当前打开页面不在标签栏中，跳到homeName页
if (!this.tagNavList.find(item => item.name ===this.$route.name)) {
this.$router.push({
name:this.$config.homeName
})
}
// 获取未读消息条数
this.getUnreadMessageCount()
}
}
<style scoped>
.submenuclss{
position:relative;
left:1px;
}
/*.ivu-menu-submenu-title:hover{*/
/*background: white;*/
/*}*/
.ivu-icon{
opacity:0;
}
.foot-span{
position:relative;
top:350px;
left:30px;
}
.submenuclss{
position:relative;
left:10px;
}
/*@import '../../css/index.css';*/
/*左侧导航*/
.wromdiv{
background:url(../../image/bg-box_03.png)no-repeat center;
}
.left-nav{
height:2000px;
background:url(../../image/bg-box_03.png)no-repeat center;
}
dd{
color:white;
text-align:center;
}
dl{
margin:50px;
}
.iconnav{
display:inline-block;
vertical-align:middle;
}
.navicon-fx{
background:url(../../image/iconbig-overview.png)no-repeat;
width:82px;
height:82px;
}
.navicon-rw{
background:url(../../image/iconbig-task.png)no-repeat;
width:80px;
height:80px;
}
.navicon-zy{
background:url(../../image/iconbig-resource.png)no-repeat;
width:79px;
height:78px;
}
.span-fx{
font-size:20px;
}
.span-zy{
font-size:20px;
position:relative;
left:10px;
}
/*头部*/
.head-right-icon{
text-align:right;
height:48px;
line-height:48px;
}
.iconone{
display:inline-block;
vertical-align:middle;
}
.icon-qx{
background:url(../../image/weather-icon1.png)no-repeat;
width:80px;
height:95px;
}
.icon{
display:inline-block;
vertical-align:middle;
margin-right:40px;
}
.icon-news{
background:url(../../image/head-icon1.png)no-repeat;
width:37px;
height:32px;
}
.icon-delet{
background:url(../../image/head-icon2.png)no-repeat;
width:37px;
height:32px;
margin-top:10px;
}
.icon-next{
background:url(../../image/head-icon3.png)no-repeat;
width:37px;
height:32px;
margin-top:16px;
}
.headwrom{
height:94px;
background:url(../../image/bg-box_03.png)no-repeat center;
background-size:auto;
width:100%;
/*position: absolute;*/
/*top: 10px;*/
}
/*@import '../../css/index.css';*/
.head{
height:94px;
background:url(../../image/head_01.png)no-repeat center;
background-size:auto;
width:100%;
/*position: absolute;*/
/*top: 10px;*/
}
</style>
