|  |  |  | 
|---|
|  |  |  | <div class="common-header"> | 
|---|
|  |  |  | <div class="header"> | 
|---|
|  |  |  | <div class="logo"> | 
|---|
|  |  |  | <div>{{ title }}</div> | 
|---|
|  |  |  | <div class="title">{{ title }}</div> | 
|---|
|  |  |  | <div class="list"> | 
|---|
|  |  |  | <div class="item active"> | 
|---|
|  |  |  | <div>服务中心</div> | 
|---|
|  |  |  | <div class="linellae"></div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="item" @click="getHeaderNav('0')">安防中心</div> | 
|---|
|  |  |  | <div class="item" @click="getHeaderNav('1')">消防中心</div> | 
|---|
|  |  |  | <div class="item" @click="getHeaderNav('2')">能管中心</div> | 
|---|
|  |  |  | <div class="item" @click="getHeaderNav('3')">驾驶舱</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <!-- <div class="title-en">Diagnosis of Intelligent Manufacturing Integrated Service Platfrom</div> --> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="user"> | 
|---|
|  |  |  | 
|---|
|  |  |  | import { mapState, mapMutations } from 'vuex' | 
|---|
|  |  |  | import GlobalAlertWindow from './GlobalAlertWindow' | 
|---|
|  |  |  | import { logout, updatePwd } from '@/api/system/common' | 
|---|
|  |  |  | import { getAppHeaderNav } from '@/api' | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: 'CommonHeader', | 
|---|
|  |  |  | components: { GlobalAlertWindow }, | 
|---|
|  |  |  | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | title: process.env.VUE_APP_TITLE, | 
|---|
|  |  |  | headerNavData: {}, | 
|---|
|  |  |  | visible: { | 
|---|
|  |  |  | // 修改密码 | 
|---|
|  |  |  | changePwd: false | 
|---|
|  |  |  | 
|---|
|  |  |  | this.$refs.changePwdDataForm.resetFields() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getHeaderNav(type){ | 
|---|
|  |  |  | getAppHeaderNav(type).then(res => { | 
|---|
|  |  |  | window.open(res, "_blank"); | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 确定修改密码 | 
|---|
|  |  |  | confirmChangePwd() { | 
|---|
|  |  |  | if (this.isWorking.changePwd) { | 
|---|
|  |  |  | 
|---|
|  |  |  | this.visible.changePwd = false | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .catch(e => { | 
|---|
|  |  |  | this.$tip.apiFailed(e) | 
|---|
|  |  |  | //  this.$tip.apiFailed(e) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .finally(() => { | 
|---|
|  |  |  | this.isWorking.changePwd = false | 
|---|
|  |  |  | 
|---|
|  |  |  | window.location.reload() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .catch(e => { | 
|---|
|  |  |  | this.$tip.apiFailed(e) | 
|---|
|  |  |  | // this.$tip.apiFailed(e) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | .common-header { | 
|---|
|  |  |  | background-color: #2080f7; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .list{ | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | margin-left: 60px; | 
|---|
|  |  |  | .item{ | 
|---|
|  |  |  | margin-right: 40px; | 
|---|
|  |  |  | font-size: 16px; | 
|---|
|  |  |  | font-weight: 400; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | justify-content: flex-start; | 
|---|
|  |  |  | height: 40px; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  | .linellae{ | 
|---|
|  |  |  | width: 64px; | 
|---|
|  |  |  | height: 2px; | 
|---|
|  |  |  | background: #FFFFFF; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .active{ | 
|---|
|  |  |  | font-weight: 500; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .header { | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | // background: #fff; | 
|---|
|  |  |  | 
|---|
|  |  |  | justify-content: space-between; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .logo { | 
|---|
|  |  |  | background: url("../../assets/images/top_ic_chilun@2x.png") no-repeat; | 
|---|
|  |  |  | /* background: url("../../assets/images/top_ic_chilun@2x.png") no-repeat; */ | 
|---|
|  |  |  | box-sizing: border-box; | 
|---|
|  |  |  | min-width: 280px; | 
|---|
|  |  |  | height: 70px; | 
|---|
|  |  |  | padding: 17px 30px; | 
|---|
|  |  |  | min-width: 360px; | 
|---|
|  |  |  | height: 56px; | 
|---|
|  |  |  | padding: 10px 30px; | 
|---|
|  |  |  | // flex-shrink: 0; | 
|---|
|  |  |  | line-height: 36px; | 
|---|
|  |  |  | font-size: 22px; | 
|---|
|  |  |  | font-weight: 600; | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | .title{ | 
|---|
|  |  |  | width: 200px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // display: inline; | 
|---|
|  |  |  | .title-en { | 
|---|
|  |  |  | font-size: 11px; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .user { | 
|---|
|  |  |  | width: 712px; | 
|---|
|  |  |  | width: 212px; | 
|---|
|  |  |  | box-sizing: border-box; | 
|---|
|  |  |  | height: 70px; | 
|---|
|  |  |  | height: 56px; | 
|---|
|  |  |  | padding-right: 25px; | 
|---|
|  |  |  | background: url("../../assets/images/top_ic_bolang@2x.png") no-repeat; | 
|---|
|  |  |  | flex-shrink: 0; | 
|---|
|  |  |  | text-align: right; | 
|---|
|  |  |  | .el-dropdown { | 
|---|
|  |  |  | top: 10px; | 
|---|
|  |  |  | top: 2px; | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | img { | 
|---|