|  |  |  | 
|---|
|  |  |  | <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"> | 
|---|
|  |  |  | <el-dropdown v-if="isLogined" trigger="click"> | 
|---|
|  |  |  | <span class="el-dropdown-link"> | 
|---|
|  |  |  | <!-- <img v-if="userInfo != null" :src="userInfo.avatar == null ? `${require('@/assets/avatar/man.png')}` : userInfo.avatar" alt="">{{userInfo | displayName}}<i class="el-icon-arrow-down el-icon--right"></i> --> | 
|---|
|  |  |  | <img v-if="userInfo != null" style="width: 30px !important;" src="@/assets/avatar/man.png" alt="">{{userInfo | displayName}}<i class="el-icon-arrow-down el-icon--right"></i> | 
|---|
|  |  |  | <img | 
|---|
|  |  |  | v-if="userInfo != null" | 
|---|
|  |  |  | style="width: 30px !important" | 
|---|
|  |  |  | src="@/assets/avatar/man.png" | 
|---|
|  |  |  | alt="" | 
|---|
|  |  |  | />{{ userInfo | displayName | 
|---|
|  |  |  | }}<i class="el-icon-arrow-down el-icon--right"></i> | 
|---|
|  |  |  | </span> | 
|---|
|  |  |  | <el-dropdown-menu slot="dropdown"> | 
|---|
|  |  |  | <el-dropdown-item @click.native="changePwd">修改密码</el-dropdown-item> | 
|---|
|  |  |  | <el-dropdown-item @click.native="changePwd" | 
|---|
|  |  |  | >修改密码</el-dropdown-item | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item> | 
|---|
|  |  |  | </el-dropdown-menu> | 
|---|
|  |  |  | </el-dropdown> | 
|---|
|  |  |  | 
|---|
|  |  |  | @confirm="confirmChangePwd" | 
|---|
|  |  |  | @close="visible.changePwd = false" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-form :model="changePwdData.form" ref="changePwdDataForm" :rules="changePwdData.rules"> | 
|---|
|  |  |  | <el-form | 
|---|
|  |  |  | :model="changePwdData.form" | 
|---|
|  |  |  | ref="changePwdDataForm" | 
|---|
|  |  |  | :rules="changePwdData.rules" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-form-item label="原始密码" prop="oldPwd" required> | 
|---|
|  |  |  | <el-input v-model="changePwdData.form.oldPwd" type="password" placeholder="请输入原始密码" maxlength="30" show-password></el-input> | 
|---|
|  |  |  | <el-input | 
|---|
|  |  |  | v-model="changePwdData.form.oldPwd" | 
|---|
|  |  |  | type="password" | 
|---|
|  |  |  | placeholder="请输入原始密码" | 
|---|
|  |  |  | maxlength="30" | 
|---|
|  |  |  | show-password | 
|---|
|  |  |  | ></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="新密码" prop="newPwd" required> | 
|---|
|  |  |  | <el-input v-model="changePwdData.form.newPwd" type="password" placeholder="请输入新密码" maxlength="30" show-password></el-input> | 
|---|
|  |  |  | <el-input | 
|---|
|  |  |  | v-model="changePwdData.form.newPwd" | 
|---|
|  |  |  | type="password" | 
|---|
|  |  |  | placeholder="请输入新密码" | 
|---|
|  |  |  | maxlength="30" | 
|---|
|  |  |  | show-password | 
|---|
|  |  |  | ></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="确认新密码" prop="confirmPwd" required> | 
|---|
|  |  |  | <el-input v-model="changePwdData.form.confirmPwd" type="password" placeholder="请再次输入新密码" maxlength="30" show-password></el-input> | 
|---|
|  |  |  | <el-input | 
|---|
|  |  |  | v-model="changePwdData.form.confirmPwd" | 
|---|
|  |  |  | type="password" | 
|---|
|  |  |  | placeholder="请再次输入新密码" | 
|---|
|  |  |  | maxlength="30" | 
|---|
|  |  |  | show-password | 
|---|
|  |  |  | ></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | </el-form> | 
|---|
|  |  |  | </GlobalAlertWindow> | 
|---|
|  |  |  | 
|---|
|  |  |  | 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 }, | 
|---|
|  |  |  | 
|---|
|  |  |  | default: true | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | title: process.env.VUE_APP_TITLE, | 
|---|
|  |  |  | headerNavData: {}, | 
|---|
|  |  |  | visible: { | 
|---|
|  |  |  | // 修改密码 | 
|---|
|  |  |  | changePwd: false | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | computed: { | 
|---|
|  |  |  | ...mapState(['menuData', 'userInfo']), | 
|---|
|  |  |  | title () { | 
|---|
|  |  |  | return this.$route.meta.title | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // title () { | 
|---|
|  |  |  | //   return this.$route.meta.title | 
|---|
|  |  |  | // } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | filters: { | 
|---|
|  |  |  | // 展示名称 | 
|---|
|  |  |  | displayName (userInfo) { | 
|---|
|  |  |  | displayName(userInfo) { | 
|---|
|  |  |  | if (userInfo == null) { | 
|---|
|  |  |  | return '' | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | ...mapMutations(['setUserInfo', 'switchCollapseMenu', 'clearUserInfo']), | 
|---|
|  |  |  | // 修改密码 | 
|---|
|  |  |  | changePwd () { | 
|---|
|  |  |  | changePwd() { | 
|---|
|  |  |  | this.visible.changePwd = true | 
|---|
|  |  |  | this.$nextTick(() => { | 
|---|
|  |  |  | this.$refs.changePwdDataForm.resetFields() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getHeaderNav(type){ | 
|---|
|  |  |  | getAppHeaderNav(type).then(res => { | 
|---|
|  |  |  | window.open(res, "_blank"); | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 确定修改密码 | 
|---|
|  |  |  | confirmChangePwd () { | 
|---|
|  |  |  | confirmChangePwd() { | 
|---|
|  |  |  | if (this.isWorking.changePwd) { | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | this.visible.changePwd = false | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .catch(e => { | 
|---|
|  |  |  | this.$tip.apiFailed(e) | 
|---|
|  |  |  | //  this.$tip.apiFailed(e) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .finally(() => { | 
|---|
|  |  |  | this.isWorking.changePwd = false | 
|---|
|  |  |  | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 退出登录 | 
|---|
|  |  |  | logout () { | 
|---|
|  |  |  | logout() { | 
|---|
|  |  |  | logout() | 
|---|
|  |  |  | .then(() => { | 
|---|
|  |  |  | this.clearUserInfo() | 
|---|
|  |  |  | 
|---|
|  |  |  | window.location.reload() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .catch(e => { | 
|---|
|  |  |  | this.$tip.apiFailed(e) | 
|---|
|  |  |  | // this.$tip.apiFailed(e) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | <style scoped lang="scss"> | 
|---|
|  |  |  | @import "@/assets/style/variables.scss"; | 
|---|
|  |  |  | .common-header { | 
|---|
|  |  |  | background-color: #1457C7; | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | 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 { | 
|---|
|  |  |  | 
|---|
|  |  |  | .el-dropdown-menu { | 
|---|
|  |  |  | width: 140px; | 
|---|
|  |  |  | .el-dropdown-menu__item:hover { | 
|---|
|  |  |  | background: #E3EDFB; | 
|---|
|  |  |  | background: #e3edfb; | 
|---|
|  |  |  | color: $primary-color; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|