<template>
|
<div class="navbar">
|
<hamburger
|
:is-active="sidebar.opened"
|
class="hamburger-container"
|
@toggleClick="toggleSideBar"
|
/>
|
|
<breadcrumb class="breadcrumb-container" />
|
<!-- 切换城市移到这边 -->
|
|
<div class="right-menu">
|
<ul>
|
<li>
|
<!-- <el-cascader
|
v-model="newRegion"
|
:options="options"
|
:props="{ checkStrictly: true }"
|
clearable
|
change-on-select
|
placeholder="切换城市"
|
/> -->
|
<!-- <el-cascader
|
v-model="newRegion"
|
placeholder="选择省/市/区"
|
:options="options"
|
:props="{ checkStrictly: true }"
|
clearable
|
change-on-select
|
style="flex:1"
|
/> -->
|
</li>
|
<!-- <li>
|
<div style="background: #409eff;color: #fff;margin: 5px;border-radius: 5px;cursor: pointer;font-size: 14px;" @click="getRegionApi">查询</div>
|
</li>-->
|
<!-- <li style="color:#eee" class="clickHover" @click="logout">
|
<i class="iconfont icontuichu" /> 退出系统
|
</li> -->
|
<!-- <li style="color:#eee">欢迎 {{ monitorPointName }}！</li> -->
|
</ul>
|
<div style="position: relative">
|
<!-- <el-badge :value="'99+'" class="item">-->
|
<!-- <img-->
|
<!-- src="../../assets/images/news.png"-->
|
<!-- alt=""-->
|
<!-- @click="showNews"-->
|
<!-- >-->
|
<!-- </el-badge>-->
|
<!-- <div v-if="showNewsFlag" style="position: absolute;right: -70px;top: 30px;z-index: 2">-->
|
<!-- <span class="sanjiao" />-->
|
<!-- <ul class="newsText">-->
|
<!-- <li class="paging">-->
|
<!-- <el-pagination-->
|
<!-- background-->
|
<!-- @current-change="handleCurrentChange"-->
|
<!-- :current-page="currentPage"-->
|
<!-- :page-sizes="[100, 200, 300, 400]"-->
|
<!-- :page-size="100"-->
|
<!-- layout="prev, pager, next"-->
|
<!-- :total="1000">-->
|
<!-- </el-pagination>-->
|
<!-- </li>-->
|
<!-- <li class="text_item ">-->
|
<!-- <span class="date">-->
|
<!-- <b style="position:relative;top:-10px;font-size: 14px;top: -6px; left: 4px;">10/11</b>-->
|
<!-- <b style="font-size: 10px;position: relative;top: -44px;left: 10px;">2021</b>-->
|
<!-- </span>-->
|
<!-- <span style="display: inline-block;float:right;width: 330px;height: 48px;">-->
|
<!-- <span style="position: relative;top: -10px;font-size: 14px;font-weight: 700;padding: 0">-->
|
<!-- <!– <el-badge is-dot>【{{item}}时数据提醒】</el-badge>–>-->
|
<!-- <span>【1时数据提醒】</span>-->
|
<!-- <span style="display: inline-block ; float: right; font-size: 12px;color: #66b1ff; line-height: 16px;padding-top: 8px;">-->
|
<!-- <img src="../../assets/images/copy.png" alt="" style="vertical-align: middle">-->
|
<!-- <span style="display: inline-block; vertical-align: middle;margin-top: 1px;font-weight: 300">复制</span>-->
|
<!-- </span>-->
|
<!-- </span>-->
|
<!-- <span-->
|
<!-- style="display:inline-block;-->
|
<!-- height: 24px;-->
|
<!-- width:100%;-->
|
<!-- line-height:16px;-->
|
<!-- font-size: 10px;-->
|
<!-- color: grey;-->
|
<!-- vertical-align: top ;-->
|
<!-- position: relative;-->
|
<!-- top:-28px;padding: 0 6px;-->
|
<!-- margin-top: 2px;"-->
|
<!-- >-->
|
<!-- <span style="display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">-->
|
<!-- 11时，我市AQI：28，等级：优。与10时相比，PM10：21微克/立方米，下降11；PM2.5：11微克/立方米，下降2；O3：88微克/立方米，上升16；TVOC总量：0.404毫克/立方米。-->
|
<!-- </span>-->
|
<!-- <span style="display: block">当前天气状况：温度27℃，湿度42%，东北风1~2级。</span>-->
|
<!-- <span style="display: block;float: right">（七星瓢虫专家组）</span>-->
|
<!-- </span>-->
|
<!-- </span>-->
|
<!-- </li>-->
|
<!-- <li v-for="item in 5" class="text_item">-->
|
<!-- <span class="date">-->
|
<!-- <b style="position:relative;top:-10px;font-size: 14px;top: -6px; left: 4px;">10/11</b>-->
|
<!-- <b style="font-size: 10px;position: relative;top: -44px;left: 10px;">2021</b>-->
|
<!-- </span>-->
|
<!-- <span style="display: inline-block;float:right;width: 330px;height: 48px;">-->
|
<!-- <span style="position: relative;top: -10px;font-size: 14px;font-weight: 700;padding: 0">-->
|
<!-- <el-badge is-dot>【{{ item }}时数据提醒】</el-badge>-->
|
<!-- <!– <span>【{{item}}时数据提醒】</span>–>-->
|
<!-- </span>-->
|
<!-- <span-->
|
<!-- style="display:inline-block;-->
|
<!-- height: 24px;-->
|
<!-- width:100%;-->
|
<!-- line-height:24px;-->
|
<!-- font-size: 12px;-->
|
<!-- color: grey;-->
|
<!-- vertical-align: top ;-->
|
<!-- position: relative;-->
|
<!-- top:-28px;padding: 0 6px;overflow: hidden;text-overflow: ellipsis;-->
|
<!-- white-space: nowrap;"-->
|
<!-- >-->
|
<!-- <span style="display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">-->
|
<!-- 11时，我市AQI：28，等级：优。与10时相比，PM10：21微克/立方米，下降11；PM2.5：11微克/立方米，下降2；O3：88微克/立方米，上升16；TVOC总量：0.404毫克/立方米。-->
|
<!-- </span>-->
|
<!-- <span style="display: block">当前天气状况：温度27℃，湿度42%，东北风1~2级。</span>-->
|
<!-- <span style="display: block;float: right">（七星瓢虫专家组）</span>-->
|
<!-- </span>-->
|
<!-- </span>-->
|
<!-- </li>-->
|
<!-- </ul>-->
|
<!-- </div>-->
|
</div>
|
<el-dropdown style="color:#eee" class="avatar-container clickHover" trigger="click">
|
<div class="avatar-wrapper" style="margin-top:0">
|
<div style="color:#eee;padding: 0 0 0 10px;">欢迎 {{ monitorPointName }}！</div>
|
<i style="top:20px" class="el-icon-caret-bottom" />
|
</div>
|
<el-dropdown-menu slot="dropdown" class="user-dropdown" style="margin-top: 0;padding-top: 0;">
|
<router-link to="/">
|
<el-dropdown-item v-for="(item, key) in dropMenus" :key="key">
|
<router-link :to="'/dropDown/'+item.path">
|
{{ item.meta.title }}
|
</router-link>
|
</el-dropdown-item>
|
</router-link>
|
<!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
|
<el-dropdown-item>Github</el-dropdown-item>
|
</a> -->
|
<el-dropdown-item divided style="margin: 0">
|
<span style="display:block;" @click="logout">退出系统</span>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Cookies from 'js-cookie'
|
import { mapGetters } from 'vuex'
|
import Breadcrumb from '@/components/Breadcrumb'
|
import Hamburger from '@/components/Hamburger'
|
|
export default {
|
components: {
|
Breadcrumb,
|
Hamburger
|
},
|
data() {
|
return {
|
currentPage: 1, // 当前页
|
showNewsFlag: false, // 用于判断是否显示消息气泡
|
options: [],
|
newRegion: [],
|
logo: require('@/assets/images/LOGO.png'),
|
monitorPointName: Cookies.get('monitorPointName'),
|
dropMenus: []
|
}
|
},
|
computed: {
|
...mapGetters(['sidebar', 'avatar'])
|
},
|
watch: {
|
newRegion(newVal, oldVal) {
|
|
if (newVal.length === 3) {
|
this.$store.state.regionCode = this.newRegion[this.newRegion.length - 1]
|
console.log(this.$store.state.regionCode)
|
}
|
}
|
},
|
beforeCreate() {
|
this.$store.state.type = 'Map'
|
this.$store.state.aside = true
|
},
|
created() {
|
const menus = this.$router.options.routes
|
for (let i = 0; i < menus.length; i++) {
|
|
if (menus[i].path === '/dropDown') {
|
this.dropMenus = menus[i].children
|
}
|
}
|
this.getRegion()
|
},
|
methods: {
|
// 分页
|
// handleSizeChange(val) {
|
// console.log(val)
|
// },
|
|
handleCurrentChange(val) {
|
console.log('---------------------------++++-------------------------------------')
|
console.log(val)
|
this.currentPage = val
|
},
|
// 点击消息铃铛显示气泡
|
// showNews() {
|
// this.showNewsFlag = !this.showNewsFlag
|
// console.log(this.showNewsFlag)
|
// },
|
getRegion() {
|
this.$request({
|
url: '/organization/getMapPath',
|
method: 'get',
|
params: {
|
organizationId: this.$store.state.orgId
|
}
|
}).then(res => {
|
const data = res.data
|
for (let i = 0; i < data.length; i++) {
|
this.options.push({
|
value: data[i].provinceCode,
|
label: data[i].provinceName
|
})
|
this.options[i].children = []
|
for (let j = 0; j < data[i].cities.length; j++) {
|
this.options[i].children.push({
|
value: data[i].cities[j].cityCode,
|
label: data[i].cities[j].cityName
|
})
|
this.options[i].children[j].children = []
|
for (let k = 0; k < data[i].cities[j].areas.length; k++) {
|
this.options[i].children[j].children.push({
|
value: data[i].cities[j].areas[k].areaCode,
|
label: data[i].cities[j].areas[k].areaName
|
})
|
}
|
}
|
}
|
})
|
.catch(err => {
|
console.log('请求Region失败')
|
console.log(err)
|
})
|
// console.log('请求Region结束')
|
},
|
|
handleCommand(command) {
|
// this.type = command
|
|
this.$store.state.type = command
|
if (this.$store.state.type === 'Map') {
|
console.log('是Map')
|
this.$store.state.aside = true
|
} else {
|
console.log('是LineChart')
|
this.$store.state.aside = false
|
}
|
|
// console.log(this.type)
|
// this.$message('click on item ' + command);
|
},
|
toggleSideBar() {
|
this.$store.dispatch('app/toggleSideBar')
|
this.$store.state.leftaSide = !this.$store.state.leftaSide
|
},
|
async logout() {
|
await this.$store.dispatch('user/logout')
|
this.$router.push(`/login`)
|
location.reload()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.navbar {
|
height: 50px;
|
//overflow: hidden;
|
position: relative;
|
background: #0f4567;
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
.hamburger-container {
|
line-height: 46px;
|
height: 100%;
|
float: left;
|
cursor: pointer;
|
transition: background 0.3s;
|
-webkit-tap-highlight-color: transparent;
|
|
&:hover {
|
background: rgba(0, 0, 0, 0.025);
|
}
|
}
|
|
.breadcrumb-container {
|
float: left;
|
}
|
|
.right-menu {
|
float: right;
|
height: 100%;
|
line-height: 50px;
|
display: flex;
|
|
&:focus {
|
outline: none;
|
}
|
|
.right-menu-item {
|
display: inline-block;
|
padding: 0 8px;
|
height: 100%;
|
font-size: 18px;
|
color: #5a5e66;
|
vertical-align: text-bottom;
|
|
&.hover-effect {
|
cursor: pointer;
|
transition: background 0.3s;
|
|
&:hover {
|
background: rgba(0, 0, 0, 0.025);
|
}
|
}
|
}
|
|
.avatar-container {
|
margin-right: 30px;
|
|
.avatar-wrapper {
|
margin-top: 5px;
|
position: relative;
|
|
.user-avatar {
|
cursor: pointer;
|
width: 40px;
|
height: 40px;
|
border-radius: 10px;
|
object-fit: contain;
|
}
|
|
.el-icon-caret-bottom {
|
cursor: pointer;
|
position: absolute;
|
right: -20px;
|
top: 25px;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
li {
|
list-style-type: none;
|
}
|
.right-menu > ul {
|
margin: 0;
|
line-height: 50px;
|
}
|
.right-menu > ul > li {
|
float: left;
|
// line-height: 18px;
|
padding: 0 15px;
|
cursor: pointer;
|
font-size: 14px;
|
}
|
.clickHover{
|
cursor: pointer;
|
&:hover{
|
background: #112f55;
|
}
|
}
|
.item {
|
margin-right: 30px;
|
padding-top: 4px;
|
}
|
.sanjiao {
|
display: block;
|
width: 0px;
|
height: 0px;
|
border-width: 10px 8px;
|
border-style: solid;
|
border-color: transparent transparent white;
|
position: relative;
|
left: 309.5px;
|
}
|
.newsText {
|
width: 425px;
|
background-color: #E7E7E7;
|
border: 0.5px solid rgba(231,231,231,0.8);
|
border-top: none;
|
box-shadow: -2px 0 3px -1px #E7E7E7, //左边阴影
|
0 2px 3px -1px #E7E7E7, //底部阴影
|
2px 0 3px -1px #E7E7E7; //右边阴影;
|
padding: 0;
|
margin: 0;
|
//box-shadow: 1px 0 4px 1px #E7E7E7;
|
}
|
.text_item {
|
width: 100%;
|
height: 62px;
|
background-color: white;
|
margin: 1px;
|
padding: 7px 15px;
|
}
|
.newsText > li:nth-child(2){
|
margin: 0px;
|
}
|
.activeItem {
|
width: 100%;
|
height: 130px;
|
background-color: white;
|
}
|
.text_item > .date {
|
display: inline-block;
|
width: 48px;
|
height: 48px;
|
background-color: #409EFD;
|
border-radius: 6px;
|
color: white;
|
}
|
.paging {
|
background-color: white;
|
width: 100%;
|
height: 40px;
|
padding: 5px 7px;
|
margin: 0px;
|
border-top: none;
|
}
|
/deep/.el-badge__content.is-fixed {
|
top: 14px
|
}
|
// .clickHover:hover {
|
// background: #112f55;
|
// }
|
}
|
</style>
|
