Skip to content

E
energyai_vue
Commit 4570a0ad authored by xiexingan's avatar xiexingan
Browse files
Options

菜单调整

parent ce7b8490
Hide whitespace changes
Inline Side-by-side
Showing with 257 additions and 374 deletions
src/layout/header-aside/layout.vue
View file @ 4570a0ad
<template> <template>
<div <div class="d2-layout-header-aside-group" :style="styleLayoutMainGroup" :class="{ grayMode: grayActive }">
class="d2-layout-header-aside-group" <!-- 半透明遮罩 -->
:style="styleLayoutMainGroup" <div class="d2-layout-header-aside-mask"></div>
:class="{ grayMode: grayActive }" <!-- 主体内容 -->
> <div class="d2-layout-header-aside-content" flex="dir:top">
<!-- 半透明遮罩 --> <!-- 顶栏 -->
<div class="d2-layout-header-aside-mask"></div> <div class="d2-theme-header" flex-box="0" flex>
<!-- 主体内容 --> <div class="logo-group" :style="{width: asideWidth}" flex-box="0">
<div class="d2-layout-header-aside-content" flex="dir:top"> <img src="./imgs/logo2x.png">
<!-- 顶栏 -->
<div class="d2-theme-header" flex-box="0" flex>
<div class="logo-group" flex-box="0">
<img class="img-logo-all" src="./imgs/logo2x.png" />
</div>
<d2-menu-header class="menu-header" flex-box="1" />
<!-- 顶栏右侧 -->
<div>
<div class="d2-header-right">
<div class="time-container">
<!-- 当前时间 -->
<div class="current-time">{{ time | formatDate }}</div>
<div class="current-date">{{ time | formatDate2 }}</div>
</div>
<div class="subway-container">
<div class="subway-info">
<span :class="station.length < 6 ? 'lineFeed' : ''">{{
station
}}</span>
<!-- <div class="out-img">
</div> -->
</div>
<div class="user-img"><img src="./imgs/subway.png" /></div>
</div>
<d2-header-theme />
<!-- 主题 -->
<el-badge
class="msg-img"
:value="countNum == 0 ? '' : countNum > 99 ? '99+' : countNum"
type="danger"
>
<div title="报警中心" style="cursor: pointer" @click="toAlarms">
<img src="./imgs/msg.png" />
</div>
</el-badge>
<d2-header-user />
<div
title="退出"
class="msg-img"
style="cursor: pointer;"
@click="logOff"
>
<img src="./imgs/out.png" />
</div>
<!-- <div class="subway-container" @click="logOff">
<div class="user-img"><img src="./imgs/user.png" /></div>
<div class="subway-info">
<d2-header-user class="subway-title" />
<div class="out-img">
<img src="./imgs/out.png" />
<span>退出</span>
</div> </div>
</div> <div style='width:100%;'>
</div> --> <div flex-box="1"></div>
</div> <!-- 顶栏右侧 -->
<!-- <div width="95%" style="float:right;margin-right:6%"> <div class="d2-header-right">
<font color="#C5CBD2" size="2"> <div class="time-container">
{{ <div class="current-time">{{ time | formatDate }}</div>
station <div class="current-date">{{ time | formatDate2 }}</div>
? "欢迎访问" + station + "轨道交通综合安防平台！" </div>
: "请先登录" <div class="subway-container">
}} <div class="subway-info">
</font> <span :class="station.length < 6 ? 'lineFeed' : ''">{{station }}</span>
</div> --> </div>
</div> <div class="user-img"><img src="./imgs/subway.png" /></div>
</div> </div>
<!-- 下面 主体 --> <d2-header-theme />
<div class="d2-theme-container" flex-box="1" flex> <el-badge class="msg-img" :value="countNum == 0 ? '' : countNum > 99 ? '99+' : countNum" type="danger">
<!-- 主体 侧边栏 --> <div title="报警中心" style="cursor: pointer" @click="toAlarms">
<!-- <div <img src="./imgs/msg.png" />
flex-box="0" </div>
ref="aside" </el-badge>
class="d2-theme-container-aside" <d2-header-user />
:style="{ <div title="退出" class="msg-img" style="cursor: pointer;" @click="logOff">
width: asideCollapse ? asideWidthCollapse : asideWidth, <img src="./imgs/out.png" />
</div>
</div>
</div>
</div>
<!-- 下面 主体 -->
<div class="d2-theme-container" flex-box="1" flex>
<!-- 主体 侧边栏 -->
<div flex-box="0" ref="aside" class="d2-theme-container-aside" :style="{
width:asideWidth,
opacity: this.searchActive ? 0.5 : 1 opacity: this.searchActive ? 0.5 : 1
}" }">
> <d2-menu-side />
<d2-menu-side /> </div>
</div>--> <!-- 主体 -->
<!-- 主体 --> <div class="d2-theme-container-main" flex-box="1" flex>
<div class="d2-theme-container-main" flex-box="1" flex> <!-- 内容 -->
<!-- 内容 --> <transition name="fade-scale">
<transition name="fade-scale"> <div class="d2-theme-container-main-layer" flex="dir:top">
<div class="d2-theme-container-main-layer" flex="dir:top"> <!-- 页面 -->
<sys v-if="$route.matched[0].name == 'sys'"></sys> <div class="d2-theme-container-main-body" flex-box="1" style="background-color: white">
<monitor v-if="$route.matched[0].name == 'monitor'"></monitor> <!-- <bim></bim> -->
<access v-if="$route.matched[0].name == 'access'"></access> <keep-alive :include="keepAlive">
<police v-if="$route.matched[0].name == 'police'"></police> <router-view />
<inspect v-if="$route.matched[0].name == 'inspect'"></inspect> </keep-alive>
<patrol v-if="$route.matched[0].name == 'patrol'"></patrol> </div>
<eme v-if="$route.matched[0].name == 'em'"></eme> </div>
<eq v-if="$route.matched[0].name == 'eq'"></eq> </transition>
<plan v-if="$route.matched[0].name == 'plan'"></plan> </div>
<linkage v-if="$route.matched[0].name == 'linkage'"></linkage> </div>
<alarms v-if="$route.matched[0].name == 'alarms'"></alarms> <div style="z-index:9999!important;user-select:none;" class="mfooter">
<!-- 线路级 --> Copyright (C) 2009-2010. XXXXX信息工程有限公司 蜀ICP备1202XXXX号-1
<rEme v-if="$route.matched[0].name == 'routes-em'"></rEme> 电话：86-028-689XXXX 传真：86-028-6893XXXX
<rSys v-if="$route.matched[0].name == 'routes-sys'"></rSys>
<rPlan v-if="$route.matched[0].name == 'routes-plan'"></rPlan>
<rEq v-if="$route.matched[0].name == 'routes-eq'"></rEq>
<rAna v-if="$route.matched[0].name == 'routes-analysis'"></rAna>
<!-- 页面 -->
<div
class="d2-theme-container-main-body"
flex-box="1"
style="background-color: white"
>
<!-- <bim></bim> -->
<keep-alive :include="keepAlive">
<router-view />
</keep-alive>
</div>
</div> </div>
</transition>
</div> </div>
</div>
<!-- <el-button @click="drawer = true" type="primary" >
点我打开
</el-button>
<el-drawer
title="我是标题"
direction="btt"
:visible.sync="drawer"
:with-header="false">
<span>我来啦!</span>
</el-drawer> -->
<div style="z-index:9999!important;user-select:none;" class="mfooter">
Copyright (C) 2009-2010. XXXXX信息工程有限公司 蜀ICP备1202XXXX号-1
电话：86-028-689XXXX 传真：86-028-6893XXXX
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { mapState, mapGetters, mapActions } from 'vuex' import { mapState, mapGetters, mapActions } from 'vuex'
import mixinSearch from './mixins/search' import mixinSearch from './mixins/search'
import util from '@/libs/util.js'
export default { export default {
name: 'd2-layout-header-aside', name: 'd2-layout-header-aside',
mixins: [mixinSearch], mixins: [mixinSearch],
components: { components: {
'd2-menu-side': () => import('./components/menu-side'), 'd2-menu-side': () => import('./components/menu-side'),
'd2-menu-header': () => import('./components/menu-header'), 'd2-menu-header': () => import('./components/menu-header'),
'd2-header-theme': () => import('./components/header-theme'), 'd2-header-theme': () => import('./components/header-theme'),
'd2-header-user': () => import('./components/header-user'), 'd2-header-user': () => import('./components/header-user')
sys: () => import('../../pages/sys/index.vue'),
// monitor: () => import('../../pages/monitor/index.vue'),
// access: () => import('../../pages/access/index.vue'),
// police: () => import('../../pages/police/index.vue'),
// inspect: () => import('../../pages/inspect/index.vue'),
// patrol: () => import('../../pages/patrol/index.vue'),
// eme: () => import('../../pages/em/index.vue'),
// eq: () => import('../../pages/eq/index.vue'),
// plan: () => import('../../pages/plan/index.vue'),
// linkage: () => import('../../pages/linkage/index.vue'),
// alarms: () => import('../../pages/alarms/index.vue'),
bim: () => import('./components/bim'),
},
data() {
return {
drawer: false,
// [侧边栏宽度] 正常状态
asideWidth: '220px',
// [侧边栏宽度] 折叠状态
asideWidthCollapse: '65px',
time: new Date(),
timer: null,
logTimeout: null,
countNum: 0,
station: '',
}
},
mounted() {
this.getStation()
this.getDate()
this.countNum = this.size
},
filters: {
formatDate: function(value) {
let date = new Date(value)
let h = date.getHours()
h = h < 10 ? '0' + h : h
let m = date.getMinutes()
m = m < 10 ? '0' + m : m
let s = date.getSeconds()
s = s < 10 ? '0' + s : s
return ` ${h}:${m}:${s}`
},
formatDate2: function(value) {
let date = new Date(value)
let y = date.getFullYear()
let MM = date.getMonth() + 1
MM = MM < 10 ? '0' + MM : MM
let d = date.getDate()
d = d < 10 ? '0' + d : d
let week = date.getDay()
let weeks = ['日', '一', '二', '三', '四', '五', '六']
let getWeek = '星期' + weeks[week]
// return `${y}/${MM}/${d} ${getWeek} `
return `${MM}/${d} ${getWeek} `
},
},
computed: {
...mapState('d2admin', {
keepAlive: (state) => state.page.keepAlive,
grayActive: (state) => state.gray.active,
transitionActive: (state) => state.transition.active,
asideCollapse: (state) => state.menu.asideCollapse,
}),
...mapState('d2admin/menu', ['header']),
...mapState('d2admin/toast', ['size']),
...mapGetters('d2admin', {
themeActiveSetting: 'theme/activeSetting',
}),
/**
* @description 最外层容器的背景图片样式
*/
styleLayoutMainGroup() {
return {
// ...(this.themeActiveSetting.backgroundImage
// ? {
// backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
// }
// : {})
}
}, },
}, data() {
watch: { return {
size(val) { drawer: false,
this.countNum = val // [侧边栏宽度] 正常状态
asideWidth: '256px',
// [侧边栏宽度] 折叠状态
asideWidthCollapse: '65px',
time: new Date(),
timer: null,
logTimeout: null,
countNum: 0,
station: ''
}
}, },
}, mounted() {
methods: { this.getStation()
...mapActions('d2admin/account', ['logout']), this.getDate()
/** this.countNum = this.size
* @description 登出
*/
logOff() {
this.logout({
vm: this,
confirm: true,
})
}, },
getDate() { filters: {
let _this = this formatDate: function (value) {
this.timer = setInterval(() => { let date = new Date(value)
_this.time = new Date() let h = date.getHours()
}, 1000) h = h < 10 ? '0' + h : h
let m = date.getMinutes()
m = m < 10 ? '0' + m : m
let s = date.getSeconds()
s = s < 10 ? '0' + s : s
return ` ${h}:${m}:${s}`
},
formatDate2: function (value) {
let date = new Date(value)
let y = date.getFullYear()
let MM = date.getMonth() + 1
MM = MM < 10 ? '0' + MM : MM
let d = date.getDate()
d = d < 10 ? '0' + d : d
let week = date.getDay()
let weeks = ['日', '一', '二', '三', '四', '五', '六']
let getWeek = '星期' + weeks[week]
// return `${y}/${MM}/${d} ${getWeek} `
return `${MM}/${d} ${getWeek} `
}
}, },
// out() {
// this.$router.push('/') computed: {
// }, ...mapState('d2admin', {
toAlarms() { keepAlive: (state) => state.page.keepAlive,
this.header.forEach((res) => { grayActive: (state) => state.gray.active,
if (res.path === '/alarms') { transitionActive: (state) => state.transition.active,
this.$router.push({ path: res.list[0].path }) asideCollapse: (state) => state.menu.asideCollapse
}),
...mapState('d2admin/menu', ['header']),
...mapState('d2admin/toast', ['size']),
...mapGetters('d2admin', {
themeActiveSetting: 'theme/activeSetting'
}),
/**
* @description 最外层容器的背景图片样式
*/
styleLayoutMainGroup() {
return {
// ...(this.themeActiveSetting.backgroundImage
// ? {
// backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
// }
// : {})
}
} }
})
}, },
//读取站点名称 watch: {
getStation() { size(val) {
this.station = JSON.parse(localStorage.getItem('sysSystem')).name this.countNum = val
if (!this.station || this.station == 'undefined') { }
setTimeout(this.getStation, 3000)
}
}, },
}, methods: {
...mapActions('d2admin/menu', ['asideCollapseToggle']),
/**
* 接收点击切换侧边栏的按钮
*/
handleToggleAside() {
console.log(111111)
this.asideCollapseToggle()
},
...mapActions('d2admin/account', ['logout']),
/**
* @description 登出
*/
logOff() {
this.logout({
vm: this,
confirm: true
})
},
getDate() {
let _this = this
this.timer = setInterval(() => {
_this.time = new Date()
}, 1000)
},
// out() {
// this.$router.push('/')
// },
toAlarms() {
this.header.forEach((res) => {
if (res.path === '/alarms') {
this.$router.push({ path: res.list[0].path })
}
})
},
//读取站点名称
getStation() {
this.station = JSON.parse(localStorage.getItem('sysSystem')).name
if (!this.station || this.station == 'undefined') {
setTimeout(this.getStation, 3000)
}
}
}
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.lineFeed { .lineFeed {
line-height: 36px; line-height: 36px;
padding-top: 0px !important; padding-top: 0px !important;
} }
.time-container { .time-container {
width: 93px; width: 93px;
text-align: right; text-align: right;
// border:1px solid red; // border:1px solid red;
padding: 2px; padding: 2px;
.current-time { .current-time {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
.current-date { .current-date {
font-size: 12px; font-size: 12px;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
} }
} }
.msg-img { .msg-img {
margin-right: 10px; margin-right: 10px;
img { img {
width: 37px; width: 37px;
height: 36px; height: 36px;
vertical-align: middle; vertical-align: middle;
} }
} }
.subway-container { .subway-container {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 10px; margin-right: 10px;
.user-img { .user-img {
img { img {
width: 37px; width: 37px;
height: 36px; height: 36px;
vertical-align: middle; vertical-align: middle;
}
} }
}
.subway-info { .subway-info {
width: 84px; width: 84px;
height: 36px; height: 36px;
background: url(./imgs/subwayBg.png); background: url(./imgs/subwayBg.png);
background-size: 100% 100%; background-size: 100% 100%;
transform: translateX(12px); transform: translateX(12px);
text-align: right; text-align: right;
span { span {
display: inline-block; display: inline-block;
height: 36px; height: 36px;
padding-top: 2px; padding-top: 2px;
padding-right: 16px; padding-right: 16px;
font-size: 12px; font-size: 12px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
}
} }
}
} }
.drop-down img { .drop-down img {
transform: translateX(-15px); transform: translateX(-15px);
} }
.d2-theme-header { .d2-theme-header {
height: 90px !important; height: 90px !important;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative !important; position: relative !important;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07) !important; box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.07) !important;
background-image: url(./imgs/d2menu2x.png); background-image: url(./imgs/d2menu2x.png);
background-size: 100% 100% !important; background-size: 100% 100% !important;
} }
// 菜单 // 菜单
.menu-header { .menu-header {
width: 100%; width: 100%;
height: 90px; height: 90px;
}
// 头部右侧
.d2-header-right {
// height: 90px !important;
// line-height: 90px !important;
} }
//container //container
.d2-theme-container { .d2-theme-container {
transform: translateY(60px); transform: translateY(60px);
} }
// 菜单样式
// .theme-tx1 .d2-theme-header .el-menu .el-menu-item {
// border-bottom: 4px solid rgba(255, 255, 255, 0) !important;
// color: rgba(255, 255, 255, 0.75) !important;
// }
// .theme-tx1 .d2-theme-header .el-menu .el-menu-item:focus {
// color: rgba(255, 255, 255, 1) !important;
// border-bottom: 4px solid #35aff8 !important;
// background: rgba(255, 255, 255, 0.1) !important;
// box-shadow: #35aff8 0 0 10px inset !important;
// }
// .theme-tx1 .d2-theme-header .el-menu .el-menu-item.is-active {
// color: rgba(255, 255, 255, 1) !important;
// border-bottom: 4px solid #35aff8 !important;
// background: rgba(255, 255, 255, 0.1) !important;
// box-shadow: #35aff8 0 0 10px inset !important;
// }
// .theme-tx1 .d2-theme-header .el-menu .el-menu-item:hover {
// color: rgba(255, 255, 255, 1) !important;
// border-bottom: 4px solid #35aff8 !important;
// background: rgba(255, 255, 255, 0.1) !important;
// box-shadow: #35aff8 0 0 10px inset !important;
// }
// 注册主题 // 注册主题
@import '~@/assets/style/theme/register.scss'; @import "~@/assets/style/theme/register.scss";
// 左上角logo // 左上角logo
.d2-layout-header-aside-group .d2-layout-header-aside-group
.d2-layout-header-aside-content .d2-layout-header-aside-content
.d2-theme-header .d2-theme-header
.logo-group .logo-group
img { img {
height: 40px; height: 40px;
padding: 0 20px 0 10px; padding: 0 20px 0 10px;
width: 300px; width: 300px;
vertical-align: middle; vertical-align: middle;
} }
.mfooter { .mfooter {
width: 100%; width: 100%;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
// background: #2d3a4b;
/*position: fixed;*/
/*top: 0;*/
} }
</style> </style>
src/pages/ol/demo/index.vue
View file @ 4570a0ad
...@@ -652,7 +652,7 @@ export default { ...@@ -652,7 +652,7 @@ export default {
this.treeData && this.treeData &&
this.treeData.length > 0 this.treeData.length > 0
) { ) {
this.defaultExpandedKeys = [data.nodes[0].id] // this.defaultExpandedKeys = [data.nodes[0].id]
} }
this.initStation(this.checkedData.sId) this.initStation(this.checkedData.sId)
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment