qj-common 4.3.0 → 4.3.2

package/src/views/layout/components/Navbar.vue

@@ -1,661 +1,664 @@
-<template>
-  <div>
-    <el-menu class="navbar" mode="horizontal">
-      <!-- <hamburger
-        class="hamburger-container"
-        :toggleClick="toggleSideBar"
-        :isActive="sidebar.appNavOpen"
-      ></hamburger>
-      <breadcrumb></breadcrumb>-->
-      <slot></slot>
-      <div class="navbar-title">
-        <!-- <i class="icon-liebiaoxiangyou iconfont"></i> -->
-        <ul class="flex">
-          <li>{{ firstLevelMenu || '首页' }}</li>
-          <li v-if="secondLevelMenu">
-            <i>/</i>
-            {{ secondLevelMenu }}
-          </li>
-          <li v-if="thirdLevelMenu">
-            <i>/</i>
-            {{ thirdLevelMenu }}
-          </li>
-        </ul>
-      </div>
-      <div class="nav-head">
-        <el-popover placement="bottom-end" width="100" trigger="click">
-          <ul class="theme-color-box clearfix">
-            <li @click="themeClick('bda16f')" :class="[activeColor == 'bda16f' ? 'active' : '']" :style="{ background: '#bda16f' }"></li>
-            <li @click="themeClick('2c4158')" :class="[activeColor == '2c4158' ? 'active' : '']" :style="{ background: '#2c4158' }"></li>
-          </ul>
-          <!-- <el-button class="theme-box" slot="reference">主题</el-button> -->
-        </el-popover>
-
-        <div class="user_name">
-          <p class="user-bar">
-            <!-- <i class="user-icon"></i> -->
-            <!-- <span class="user_line"></span> -->
-            <!-- <i class="icon-yonghu-outline iconfont"></i> -->
-            <span class="user-remark" v-if="proappRemark && proappRemark.length > 0">
-              <el-popover placement="bottom" width="300" trigger="hover">
-                <p>{{ proappRemark[0] }}</p>
-                <img :src="proappRemark[1]" alt="" width="300px" />
-                <i slot="reference">{{ proappRemark[0] }} </i>
-              </el-popover>
-            </span>
-
-            <!-- <span class="user_line"></span> -->
-            <!-- <i class="icon-yonghu-outline iconfont"></i> -->
-            <el-badge
-              class="msg-icon"
-              v-if="proappEnvLayout && proappEnvLayout.tenantCode == '2021122100000001'"
-              is-dot
-              :hidden='unreadMessageNum==0'
-            >
-              <i class="el-icon-bell" @click="jumpToPage"></i>
-            </el-badge>
-            <span class="user-name" @click="lookInfo">
-              <i style="padding-right: 10px">{{ this.merberCompname }}</i>
-              {{ $store.state.user.name }}
-            </span>
-          </p>
-        </div>
-        <!-- <i class="set-icon"></i>
-        <i class="info-icon"></i>-->
-        <!-- <span class="spl_line"></span> -->
-        <div class="log_uot">
-          <i class="icon-tuichu1 iconfont" @click="logout"></i>
-          <!-- <span class="logout-text" @click="logout">退出</span>  -->
-        </div>
-      </div>
-      <el-dialog title="登录账户信息" :visible.sync="centerDialogVisible" width="23%" center>
-        <el-form label-width="100px" style="padding-bottom: 20px;">
-          <el-form-item label="登录名：">
-            {{ name }}
-          </el-form-item>
-          <el-form-item label="手机号：">
-            {{ phone | hidePhone }}
-          </el-form-item>
-          <el-form-item label="所属公司：">
-            {{ compony }}
-          </el-form-item>
-          <el-form-item label="角色：">
-            {{ role }}
-          </el-form-item>
-        </el-form>
-          <!-- <div>联系人：</div> -->
-          <!-- <img :src="proappRemark[1]" alt=""> -->
-        <!-- <div class="loginInfo-Block-left">
-          <div>登录名：</div>
-          <div>手机号：</div>
-          <div>所属公司：</div>
-          <div>角色：</div>
-        </div>
-        <div class="loginInfo-Block-right">
-          <div>{{ name }}</div>
-          <div>{{ phone | hidePhone }}</div>
-          <div>{{ compony }}</div>
-          <div>{{ role }}</div>
-        </div> -->
-      </el-dialog>
-      <!-- <el-dropdown class="avatar-container" trigger="click">
-      <div class="avatar-wrapper">
-        <img class="user-avatar" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80">
-        <i class="el-icon-caret-bottom"></i>
-      </div>
-      <el-dropdown-menu class="user-dropdown" slot="dropdown">
-        <router-link class="inlineBlock" to="/">
-          <el-dropdown-item>
-            Home
-          </el-dropdown-item>
-        </router-link>
-        <el-dropdown-item divided>
-          <span @click="logout" style="display:block;">LogOut</span>
-        </el-dropdown-item>
-      </el-dropdown-menu>
-      </el-dropdown>-->
-    </el-menu>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex';
-import Breadcrumb from '#/components/Breadcrumb';
-import Hamburger from '#/components/Hamburger';
-import { getUserserviceInfo, getSSOAuthInfo } from '../../../api/login';
-import axios from 'axios';
-import qs from 'qs';
-
-export default {
-  components: {
-    Breadcrumb,
-    Hamburger,
-  },
-  props: {
-    firstLevelMenu: String,
-    secondLevelMenu: String,
-    thirdLevelMenu: String,
-  },
-  data() {
-    return {
-      unreadMessageNum:0,
-      activeColor: '2c4158',
-      menuList: '',
-      menuCode:'',
-      merberCompname: '',
-      centerDialogVisible: false,
-      name: '',
-      phone: '',
-      compony: '',
-      role: '',
-      type: null,
-      ssoSubscriptionKey: '',
-      proappEnvLayout: '',
-      proappRemark: [],
-
-      gapTime: '',
-      beforeUnloadTime: '',
-      secDomainName: null,
-    };
-  },
-  computed: {
-    ...mapGetters(['sidebar']),
-  },
-  created() {
-    this.merberCompname = sessionStorage.getItem('personalInfo') ? JSON.parse(sessionStorage.getItem('personalInfo')).merberCompname : '';
-    this.proappEnvLayout = window.sessionStorage.getItem('proappEnvLayout') ? JSON.parse(window.sessionStorage.getItem('proappEnvLayout')) : '';
-
-    if (this.proappEnvLayout && this.proappEnvLayout.proappRemark) {
-      this.proappRemark = this.proappEnvLayout.proappRemark.split('>');
-    }
-
-    console.log(window.location.href, 'window.location.href本地路由');
-    if (window.location.href.indexOf('listDMkf') == -1) {
-        if(this.proappEnvLayout.tenantCode === '2019071800001392'){  // tenantCode 判断
-            let userId = sessionStorage.getItem('personalInfo') ? JSON.parse(sessionStorage.getItem('personalInfo')).userId : '';
-            getUserserviceInfo({
-                userId: userId,
-            }).then((res) => {
-                // console.log(res)
-                this.name = res.userRelname ? res.userRelname : res.userName;
-                this.phone = res.userOcode?res.userOcode:res.userPhone;
-                this.compony = res.userinfoCompname;
-                this.role = res.userRoleName;
-            });
-        }else{
-            let userId = sessionStorage.getItem('personalInfo') ? JSON.parse(sessionStorage.getItem('personalInfo')).userId : '';
-            getUserserviceInfo({
-                userId: userId,
-            }).then((res) => {
-                // console.log(res)
-                this.name = res.userNickname ? res.userNickname : res.userName;
-                this.phone = res.userPhone;
-                this.compony = res.userinfoCompname;
-                this.role = res.userRoleName;
-            });
-        }
-    }
-
-    if(this.proappEnvLayout && this.proappEnvLayout.tenantCode == '2021122100000001') this.watchLocalStorage()
-  },
-  mounted() {
-    // 监听 beforeunload 离开或者刷新页面触发
-    window.addEventListener('beforeunload', (e) => this.beforeunloadFn(e));
-    // 监听 unload
-    window.addEventListener('unload', (e) => this.unloadFn());
-
-    this.type = this.$route.query.type || null;
-    this.secDomainName = sessionStorage.getItem('secDomainName') ? sessionStorage.getItem('secDomainName') : null;
-  },
-  filters: {
-    hidePhone: function (value) {
-      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/; //判断为手机号的正则
-      if (!myreg.test(value)) {
-        return value;
-      } else {
-        return value.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
-      }
-    },
-  },
-  methods: {
-    /**
-     * 监听保存到本地的未读消息数量用来显示角标
-     */
-    watchLocalStorage(){
-      // 监听localStorage的变化
-      window.addEventListener('storage', event=>{
-        if (event.key === 'unreadMessageNum') {
-          // 处理数据变化的逻辑
-          this.unreadMessageNum = Number(event.newValue)
-        }
-      });
-    },
-    /**
-     * 跳转到消息列表页面
-     */
-    jumpToPage(){
-      location.href = '/paas/b2b-bus-pc-ayd/index.html#/msgList'
-    },
-    /**
-     * beforeunload function
-     */
-    beforeunloadFn() {
-      // 记录当前时间
-      this.beforeUnloadTime = new Date().getTime();
-    },
-
-    /**
-     * unload function
-     */
-    unloadFn() {
-      this.gapTime = new Date().getTime() - this.beforeUnloadTime;
-      if (this.gapTime < 5) {
-        //请求退出接口
-        this.logout();
-      }
-    },
-
-    lookInfo() {
-      // 这边修改导航用户登陆信息按钮
-      // location.href = `${
-      //   location.origin
-      // }/paas/buyer-manager/index.html#/operatorInfo`;
-      this.centerDialogVisible = true;
-      // console.log("我被调用了北鼻")
-    },
-    toggleSideBar() {
-      this.$store.commit('TOGGLE_SIDEBAR_APPNAV');
-    },
-    logout() {
-      window.localStorage.removeItem('pohcode');
-      this.menuList = window.sessionStorage.getItem('menuList') ? window.sessionStorage.getItem('menuList') : '';
-      this.menuCode = window.sessionStorage.getItem('menuCode') ? window.sessionStorage.getItem('menuCode') : '';
-      this.proappEnvLayout = window.sessionStorage.getItem('proappEnvLayout') ? window.sessionStorage.getItem('proappEnvLayout') : '';
-      // 获取 SSO 登出配置
-      this.ssoLogout();
-    },
-
-    /**
-     * SSO 登出操作
-     */
-    ssoLogout() {
-      getSSOAuthInfo({ oauthEnvCode: 'out' }).then((res) => {
-        let logoutUrl = '';
-        let paramsArr = [];
-        if (res.rows && res.rows.length > 0) {
-          let configs = res.rows;
-          let params = '';
-          configs.forEach((el) => {
-            if (el.oauthEnvconfigName == 'baseUrl') {
-              this.ssoBaseUrl = el.oauthEnvconfigValue;
-            } else {
-              params += `${el.oauthEnvconfigName}=${el.oauthEnvconfigValue}&`;
-              paramsArr.push({ name: el.oauthEnvconfigName, value: el.oauthEnvconfigValue });
-            }
-          });
-
-          // 拼接登出地址
-          logoutUrl = `${this.ssoBaseUrl}?${params.substring(0, params.length - 1)}`;
-          // P&G SSO logout 需要iframe
-          if (JSON.parse(this.proappEnvLayout).proappCode != '063') {
-            try {
-              var iframe = document.createElement('<iframe name="ifr"></iframe>');
-            } catch (e) {
-              var iframe = document.createElement('iframe');
-              iframe.name = 'ifr';
-            }
-            iframe.src = logoutUrl;
-            iframe.style = 'display: none';
-            document.body.appendChild(iframe);
-          }
-        }
-        console.log('logout---->params---->', paramsArr);
-        this.paasLogout(paramsArr);
-      });
-    },
-
-    // 九洲云腾退出登录
-    iDsManagerLogout(paramsArr) {
-      //创建form表单
-      var temp_form = document.createElement('form');
-
-      temp_form.action = this.ssoBaseUrl;
-
-      //如需打开新窗口，form的target属性要设置为'_blank'
-
-      temp_form.target = '_self';
-
-      temp_form.method = 'post';
-
-      temp_form.style.display = 'none';
-
-      //添加参数
-      for (var item in paramsArr) {
-        var opt = document.createElement('textarea');
-
-        opt.name = paramsArr[item].name;
-
-        opt.value = paramsArr[item].value;
-
-        temp_form.appendChild(opt);
-      }
-
-      document.body.appendChild(temp_form);
-
-      //提交数据
-
-      temp_form.submit();
-    },
-
-    // Paas 登出操作
-    paasLogout(paramsArr) {
-      // 调用 Paas 登出接口
-      this.$store.dispatch('LogOut').then((res) => {
-        window.sessionStorage.clear();
-        window.sessionStorage.setItem('menuList', this.menuList);
-        window.sessionStorage.setItem('menuCode', this.menuCode);
-        this.$store.dispatch('GetAppRouter').then((reg) => {
-          window.sessionStorage.setItem('menuList', JSON.stringify(reg));
-        });
-
-        this.$store.commit('ADD_MENU', []);
-        console.log('logout---->params---->', JSON.parse(this.proappEnvLayout).proappCode);
-        // 九洲云腾登出操作
-        // if (JSON.parse(this.proappEnvLayout).proappCode === '063') {
-        //   this.iDsManagerLogout(paramsArr);
-        // } else {
-        let path = '';
-        if (this.proappEnvLayout && this.proappEnvLayout != null && this.proappEnvLayout != '') {
-          path = JSON.parse(this.proappEnvLayout).proappEnvIndexr;
-        } else {
-          path = '/paas/index/index.html';
-        }
-        console.log(path, window.location.origin, 'logout');
-        if (window.location.origin) {
-          //this.secDomainName
-          if (this.secDomainName && this.secDomainName != 'null' && this.secDomainName != window.location.origin) {
-            window.location.href = `${this.secDomainName}${path}`;
-          } else {
-            window.location.href = `${window.location.origin}${path}`;
-          }
-          //无论url是什么，强制刷新页面，另外reload()有true和false参
-          window.location.reload()
-        } else {
-          window.location.href = path;
-          window.location.reload()
-        }
-        // }
-      });
-    },
-
-    themeClick(color) {
-      this.activeColor = color;
-      this.$emit('themeClick', color);
-    },
-  },
-
-  destroyed() {
-    window.removeEventListener('beforeunload', (e) => this.beforeunloadFn());
-    window.removeEventListener('unload', (e) => this.unloadFn());
-  },
-};
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.loginInfo-Block-left {
-  width: 39%;
-  height: 100%;
-  text-align: right;
-  display: inline-block;
-}
-.loginInfo-Block-left > div {
-  margin-bottom: 25px;
-}
-.loginInfo-Block-right {
-  width: 50%;
-  height: 100%;
-  display: inline-block;
-  img {
-    width: 120px;
-    height: 120px;
-  }
-}
-.loginInfo-Block-right > div {
-  margin-bottom: 25px;
-}
-.theme-color-box {
-  li {
-    width: 40px;
-    height: 20px;
-    border: 1px solid #e0e0e0;
-    cursor: pointer;
-    float: left;
-    margin: 5px;
-    opacity: 0.3;
-    &.active {
-      opacity: 1;
-    }
-  }
-}
-.user-bar {
-}
-.user-remark {
-  display: inline-block;
-  width: 530px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  float: left;
-  font-size: 12px;
-  cursor: pointer;
-  text-align: right;
-  padding-right: 20px;
-  position: relative;
-}
-
-.user-name {
-  font-size: 14px;
-  // line-height: 30px;
-  // margin-top: -1px;
-  // display: inline-block;
-  float: right;
-
-  cursor: pointer;
-}
-.nav-head {
-  flex: 1;
-  display: inline-flex;
-  justify-content: flex-end;
-  align-items: center;
-  color: #bbbbbb;
-  margin-right: 15px;
-  align-items:center
-  // font-weight: normal;
-  // transition: all 10s linear;
-  // i {
-  //   display: inline-block;
-  //   width: 18px;
-  //   height: 18px;
-  //   // margin-right: 25px;
-  //   cursor: pointer;
-  // }
-  // .user_name {
-  //   cursor: pointer;
-  //   margin-right: 15px;
-  //   p {
-  //     width: 100%;
-  //     line-height: 24px;
-  //     height: 24px;
-  //     display: inline-table;
-  //     // .user-icon {
-  //     //   vertical-align: middle;
-  //     //   background: url("../../../assets/nav/admin.png") no-repeat;
-  //     //   background-size: 80%;
-  //     // }
-  //     // .user_line {
-  //     //   border: 1px solid #f8f8f8;
-  //     //   margin: 0 5px;
-  //     // }
-  //   }
-  //   &:hover {
-  //     // .user-icon {
-  //     //   vertical-align: middle;
-  //     //   background-image: url("../../../assets/nav/admin-hover.png");
-  //     //   background-size: 100% 100%;
-  //     // }
-  //     p {
-  //       color: #409dff;
-  //     }
-  //   }
-  // }
-
-  .spl_line {
-    height: 40px;
-    border: 1px solid #f8f8f8;
-    line-height: 46px;
-    margin-right: 15px;
-  }
-  .log_uot {
-    // height: 24px;
-    // line-height: 24px;
-    // width: 24px;
-    cursor: pointer;
-    margin-left: 12px;
-    // .logout-icon {
-    //   vertical-align: middle;
-    //   background: url("../../../assets/nav/logout.png") no-repeat;
-    //   background-size: 80%;
-    // }
-    .logout-text {
-      position: absolute;
-      bottom: -15px;
-      font-size: 12px;
-    }
-    &:hover {
-      // .logout-icon {
-      //   vertical-align: middle;
-      //   background-image: url("../../../assets/nav/logout-hover.png");
-      //   background-size: 100% 100%;
-      // }
-      color: #409dff;
-      .logout-text {
-        color: #409dff;
-      }
-    }
-  }
-}
-.theme-box {
-  border: none;
-  background: none;
-  margin-right: 30px;
-  &:active {
-    background: none;
-    color: #409dff;
-  }
-  &:hover {
-    background: none;
-    color: #409dff;
-  }
-  &:focus {
-    background: none;
-    color: #409dff;
-  }
-  &:visited {
-    background: none;
-    color: #409dff;
-  }
-}
-// .logout-text:hover{
-//   font-weight: bold;
-//   color:#3ca1ec;
-// }
-// .logout-text{
-//   margin:0 25px 0 8px;cursor:pointer;
-// }
-// .nav-head i{
-//   display: inline-block;
-//   width: 18px;
-//   height: 18px;
-//   // margin-right: 25px;
-//   cursor: pointer;
-// }
-// .nav-head p{
-//    margin-right: 15px;
-// }
-
-.set-icon {
-  background-image: url('../../../assets/nav/set.png');
-  background-size: 100% 100%;
-}
-
-.info-icon {
-  background-image: url('../../../assets/nav/info.png');
-  background-size: 100% 100%;
-}
-.navbar {
-  height: 50px;
-  line-height: 50px;
-  display: flex;
-  box-sizing: border-box;
-  border-radius: 0 !important;
-  position: relative;
-  &-title {
-    font-size: 14px;
-    color: #333;
-    margin-left: 12px;
-    // cursor: pointer;
-    ul {
-      li:last-child {
-        color: #999;
-      }
-      i {
-        margin: 0 10px;
-        color: #999;
-      }
-    }
-  }
-  .hamburger-container {
-    line-height: 30px;
-    height: 30px;
-    float: left;
-    padding: 0 14px 0 20px;
-  }
-  .screenfull {
-    position: absolute;
-    right: 90px;
-    top: 16px;
-    color: red;
-  }
-  .avatar-container {
-    height: 46px;
-    display: inline-block;
-    position: absolute;
-    right: 35px;
-    .avatar-wrapper {
-      cursor: pointer;
-      margin-top: 5px;
-      position: relative;
-      .user-avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      .el-icon-caret-bottom {
-        position: absolute;
-        right: -20px;
-        top: 25px;
-        font-size: 12px;
-      }
-    }
-  }
-}
-/deep/ .msg-icon{
-  display:inline;
-  cursor: pointer;
-  margin-right:20px;
-  .el-badge__content.is-fixed{
-    top:4px;
-    right: 8px;
-  }
-}
-</style>
+<template>
+  <div>
+    <el-menu class="navbar" mode="horizontal">
+      <!-- <hamburger
+        class="hamburger-container"
+        :toggleClick="toggleSideBar"
+        :isActive="sidebar.appNavOpen"
+      ></hamburger>
+      <breadcrumb></breadcrumb>-->
+      <slot></slot>
+      <div class="navbar-title">
+        <!-- <i class="icon-liebiaoxiangyou iconfont"></i> -->
+        <ul class="flex">
+          <li>{{ firstLevelMenu || '首页' }}</li>
+          <li v-if="secondLevelMenu">
+            <i>/</i>
+            {{ secondLevelMenu }}
+          </li>
+          <li v-if="thirdLevelMenu">
+            <i>/</i>
+            {{ thirdLevelMenu }}
+          </li>
+        </ul>
+      </div>
+      <div class="nav-head">
+        <el-popover placement="bottom-end" width="100" trigger="click">
+          <ul class="theme-color-box clearfix">
+            <li @click="themeClick('bda16f')" :class="[activeColor == 'bda16f' ? 'active' : '']" :style="{ background: '#bda16f' }"></li>
+            <li @click="themeClick('2c4158')" :class="[activeColor == '2c4158' ? 'active' : '']" :style="{ background: '#2c4158' }"></li>
+          </ul>
+          <!-- <el-button class="theme-box" slot="reference">主题</el-button> -->
+        </el-popover>
+
+        <div class="user_name">
+          <p class="user-bar">
+            <!-- <i class="user-icon"></i> -->
+            <!-- <span class="user_line"></span> -->
+            <!-- <i class="icon-yonghu-outline iconfont"></i> -->
+            <span class="user-remark" v-if="proappRemark && proappRemark.length > 0">
+              <el-popover placement="bottom" width="300" trigger="hover">
+                <p>{{ proappRemark[0] }}</p>
+                <img :src="proappRemark[1]" alt="" width="300px" />
+                <i slot="reference">{{ proappRemark[0] }} </i>
+              </el-popover>
+            </span>
+
+            <!-- <span class="user_line"></span> -->
+            <!-- <i class="icon-yonghu-outline iconfont"></i> -->
+            <el-badge
+              class="msg-icon"
+              v-if="proappEnvLayout && proappEnvLayout.tenantCode == '2021122100000001'"
+              is-dot
+              :hidden='unreadMessageNum==0'
+            >
+              <i class="el-icon-bell" @click="jumpToPage"></i>
+            </el-badge>
+            <span class="user-name" @click="lookInfo">
+              <i style="padding-right: 10px">{{ this.merberCompname }}</i>
+              {{ $store.state.user.name }}
+            </span>
+          </p>
+        </div>
+        <!-- <i class="set-icon"></i>
+        <i class="info-icon"></i>-->
+        <!-- <span class="spl_line"></span> -->
+        <div class="log_uot">
+          <i class="icon-tuichu1 iconfont" @click="logout"></i>
+          <!-- <span class="logout-text" @click="logout">退出</span>  -->
+        </div>
+      </div>
+      <el-dialog title="登录账户信息" :visible.sync="centerDialogVisible" width="23%" center>
+        <el-form label-width="100px" style="padding-bottom: 20px;">
+          <el-form-item label="登录名：">
+            {{ name }}
+          </el-form-item>
+          <el-form-item label="手机号：">
+            {{ phone | hidePhone }}
+          </el-form-item>
+          <el-form-item label="所属公司：">
+            {{ compony }}
+          </el-form-item>
+          <el-form-item label="角色：">
+            {{ role }}
+          </el-form-item>
+        </el-form>
+          <!-- <div>联系人：</div> -->
+          <!-- <img :src="proappRemark[1]" alt=""> -->
+        <!-- <div class="loginInfo-Block-left">
+          <div>登录名：</div>
+          <div>手机号：</div>
+          <div>所属公司：</div>
+          <div>角色：</div>
+        </div>
+        <div class="loginInfo-Block-right">
+          <div>{{ name }}</div>
+          <div>{{ phone | hidePhone }}</div>
+          <div>{{ compony }}</div>
+          <div>{{ role }}</div>
+        </div> -->
+      </el-dialog>
+      <!-- <el-dropdown class="avatar-container" trigger="click">
+      <div class="avatar-wrapper">
+        <img class="user-avatar" src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80">
+        <i class="el-icon-caret-bottom"></i>
+      </div>
+      <el-dropdown-menu class="user-dropdown" slot="dropdown">
+        <router-link class="inlineBlock" to="/">
+          <el-dropdown-item>
+            Home
+          </el-dropdown-item>
+        </router-link>
+        <el-dropdown-item divided>
+          <span @click="logout" style="display:block;">LogOut</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+      </el-dropdown>-->
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import Breadcrumb from '#/components/Breadcrumb';
+import Hamburger from '#/components/Hamburger';
+import { getUserserviceInfo, getSSOAuthInfo } from '../../../api/login';
+import axios from 'axios';
+import qs from 'qs';
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger,
+  },
+  props: {
+    firstLevelMenu: String,
+    secondLevelMenu: String,
+    thirdLevelMenu: String,
+  },
+  data() {
+    return {
+      unreadMessageNum:0,
+      activeColor: '2c4158',
+      menuList: '',
+      menuCode:'',
+      merberCompname: '',
+      centerDialogVisible: false,
+      name: '',
+      phone: '',
+      compony: '',
+      role: '',
+      type: null,
+      ssoSubscriptionKey: '',
+      proappEnvLayout: '',
+      proappRemark: [],
+
+      gapTime: '',
+      beforeUnloadTime: '',
+      secDomainName: null,
+    };
+  },
+  computed: {
+    ...mapGetters(['sidebar']),
+  },
+  created() {
+    this.merberCompname = sessionStorage.getItem('personalInfo') ? JSON.parse(sessionStorage.getItem('personalInfo')).merberCompname : '';
+    this.proappEnvLayout = window.sessionStorage.getItem('proappEnvLayout') ? JSON.parse(window.sessionStorage.getItem('proappEnvLayout')) : '';
+
+    if (this.proappEnvLayout && this.proappEnvLayout.proappRemark) {
+      this.proappRemark = this.proappEnvLayout.proappRemark.split('>');
+    }
+
+    console.log(window.location.href, 'window.location.href本地路由');
+    if (window.location.href.indexOf('listDMkf') == -1) {
+        if(this.proappEnvLayout.tenantCode === '2019071800001392'){  // tenantCode 判断
+            let userId = sessionStorage.getItem('personalInfo') ? JSON.parse(sessionStorage.getItem('personalInfo')).userId : '';
+            getUserserviceInfo({
+                userId: userId,
+            }).then((res) => {
+                // console.log(res)
+                this.name = res.userRelname ? res.userRelname : res.userName;
+                this.phone = res.userOcode?res.userOcode:res.userPhone;
+                this.compony = res.userinfoCompname;
+                this.role = res.userRoleName;
+            });
+        }else{
+            let userId = sessionStorage.getItem('personalInfo') ? JSON.parse(sessionStorage.getItem('personalInfo')).userId : '';
+            getUserserviceInfo({
+                userId: userId,
+            }).then((res) => {
+                // console.log(res)
+                this.name = res.userNickname ? res.userNickname : res.userName;
+                this.phone = res.userPhone;
+                this.compony = res.userinfoCompname;
+                this.role = res.userRoleName;
+            });
+        }
+    }
+
+    if(this.proappEnvLayout && this.proappEnvLayout.tenantCode == '2021122100000001') this.watchLocalStorage()
+  },
+  mounted() {
+    // 监听 beforeunload 离开或者刷新页面触发
+    window.addEventListener('beforeunload', (e) => this.beforeunloadFn(e));
+    // 监听 unload
+    window.addEventListener('unload', (e) => this.unloadFn());
+
+    this.type = this.$route.query.type || null;
+    this.secDomainName = sessionStorage.getItem('secDomainName') ? sessionStorage.getItem('secDomainName') : null;
+  },
+  filters: {
+    hidePhone: function (value) {
+      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/; //判断为手机号的正则
+      if (!myreg.test(value)) {
+        return value;
+      } else {
+        return value.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
+      }
+    },
+  },
+  methods: {
+    /**
+     * 监听保存到本地的未读消息数量用来显示角标
+     */
+    watchLocalStorage(){
+      // 监听localStorage的变化
+      window.addEventListener('storage', event=>{
+        if (event.key === 'unreadMessageNum') {
+          // 处理数据变化的逻辑
+          this.unreadMessageNum = Number(event.newValue)
+        }
+      });
+    },
+    /**
+     * 跳转到消息列表页面
+     */
+    jumpToPage(){
+      location.href = '/paas/b2b-bus-pc-ayd/index.html#/msgList'
+    },
+    /**
+     * beforeunload function
+     */
+    beforeunloadFn() {
+      // 记录当前时间
+      this.beforeUnloadTime = new Date().getTime();
+    },
+
+    /**
+     * unload function
+     */
+    unloadFn() {
+      this.gapTime = new Date().getTime() - this.beforeUnloadTime;
+      if (this.gapTime < 5) {
+        //请求退出接口
+        this.logout();
+      }
+    },
+
+    lookInfo() {
+      // 这边修改导航用户登陆信息按钮
+      // location.href = `${
+      //   location.origin
+      // }/paas/buyer-manager/index.html#/operatorInfo`;
+      this.centerDialogVisible = true;
+      // console.log("我被调用了北鼻")
+    },
+    toggleSideBar() {
+      this.$store.commit('TOGGLE_SIDEBAR_APPNAV');
+    },
+    logout() {
+      window.localStorage.removeItem('pohcode');
+      this.menuList = window.sessionStorage.getItem('menuList') ? window.sessionStorage.getItem('menuList') : '';
+      this.menuCode = window.sessionStorage.getItem('menuCode') ? window.sessionStorage.getItem('menuCode') : '';
+      this.proappEnvLayout = window.sessionStorage.getItem('proappEnvLayout') ? window.sessionStorage.getItem('proappEnvLayout') : '';
+      // 获取 SSO 登出配置
+      this.ssoLogout();
+    },
+
+    /**
+     * SSO 登出操作
+     */
+    ssoLogout() {
+      getSSOAuthInfo({ oauthEnvCode: 'out' }).then((res) => {
+        let logoutUrl = '';
+        let paramsArr = [];
+        if (res.rows && res.rows.length > 0) {
+          let configs = res.rows;
+          let params = '';
+          configs.forEach((el) => {
+            if (el.oauthEnvconfigName == 'baseUrl') {
+              this.ssoBaseUrl = el.oauthEnvconfigValue;
+            } else {
+              params += `${el.oauthEnvconfigName}=${el.oauthEnvconfigValue}&`;
+              paramsArr.push({ name: el.oauthEnvconfigName, value: el.oauthEnvconfigValue });
+            }
+          });
+
+          // 拼接登出地址
+          logoutUrl = `${this.ssoBaseUrl}?${params.substring(0, params.length - 1)}`;
+          // P&G SSO logout 需要iframe
+          if (JSON.parse(this.proappEnvLayout).proappCode != '063') {
+            try {
+              var iframe = document.createElement('<iframe name="ifr"></iframe>');
+            } catch (e) {
+              var iframe = document.createElement('iframe');
+              iframe.name = 'ifr';
+            }
+            iframe.src = logoutUrl;
+            iframe.style = 'display: none';
+            document.body.appendChild(iframe);
+          }
+        }
+        console.log('logout---->params---->', paramsArr);
+        this.paasLogout(paramsArr);
+      });
+    },
+
+    // 九洲云腾退出登录
+    iDsManagerLogout(paramsArr) {
+      //创建form表单
+      var temp_form = document.createElement('form');
+
+      temp_form.action = this.ssoBaseUrl;
+
+      //如需打开新窗口，form的target属性要设置为'_blank'
+
+      temp_form.target = '_self';
+
+      temp_form.method = 'post';
+
+      temp_form.style.display = 'none';
+
+      //添加参数
+      for (var item in paramsArr) {
+        var opt = document.createElement('textarea');
+
+        opt.name = paramsArr[item].name;
+
+        opt.value = paramsArr[item].value;
+
+        temp_form.appendChild(opt);
+      }
+
+      document.body.appendChild(temp_form);
+
+      //提交数据
+
+      temp_form.submit();
+    },
+
+    // Paas 登出操作
+    paasLogout(paramsArr) {
+      // 调用 Paas 登出接口
+      this.$store.dispatch('LogOut').then((res) => {
+        window.sessionStorage.clear();
+        window.sessionStorage.setItem('menuList', this.menuList);
+        window.sessionStorage.setItem('menuCode', this.menuCode);
+        this.$store.dispatch('GetAppRouter').then((reg) => {
+          window.sessionStorage.setItem('menuList', JSON.stringify(reg));
+        });
+
+        this.$store.commit('ADD_MENU', []);
+        console.log('logout---->params---->', JSON.parse(this.proappEnvLayout).proappCode);
+        // 九洲云腾登出操作
+        // if (JSON.parse(this.proappEnvLayout).proappCode === '063') {
+        //   this.iDsManagerLogout(paramsArr);
+        // } else {
+        let path = '';
+        if (this.proappEnvLayout && this.proappEnvLayout != null && this.proappEnvLayout != '') {
+          path = JSON.parse(this.proappEnvLayout).proappEnvIndexr;
+        } else {
+          path = '/paas/index/index.html';
+        }
+        console.log(path, window.location.origin, 'logout');
+        if (window.location.origin) {
+          //this.secDomainName
+          if (this.secDomainName && this.secDomainName != 'null' && this.secDomainName != window.location.origin) {
+            window.location.href = `${this.secDomainName}${path}`;
+          } else {
+            window.location.href = `${window.location.origin}${path}`;
+          }
+          //无论url是什么，强制刷新页面，另外reload()有true和false参
+          window.location.reload()
+        } else {
+          window.location.href = path;
+          window.location.reload()
+        }
+        // }
+      });
+    },
+
+    themeClick(color) {
+      this.activeColor = color;
+      this.$emit('themeClick', color);
+    },
+  },
+
+  destroyed() {
+    window.removeEventListener('beforeunload', (e) => this.beforeunloadFn());
+    window.removeEventListener('unload', (e) => this.unloadFn());
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.flex{
+  display: flex;
+}
+.loginInfo-Block-left {
+  width: 39%;
+  height: 100%;
+  text-align: right;
+  display: inline-block;
+}
+.loginInfo-Block-left > div {
+  margin-bottom: 25px;
+}
+.loginInfo-Block-right {
+  width: 50%;
+  height: 100%;
+  display: inline-block;
+  img {
+    width: 120px;
+    height: 120px;
+  }
+}
+.loginInfo-Block-right > div {
+  margin-bottom: 25px;
+}
+.theme-color-box {
+  li {
+    width: 40px;
+    height: 20px;
+    border: 1px solid #e0e0e0;
+    cursor: pointer;
+    float: left;
+    margin: 5px;
+    opacity: 0.3;
+    &.active {
+      opacity: 1;
+    }
+  }
+}
+.user-bar {
+}
+.user-remark {
+  display: inline-block;
+  width: 530px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  float: left;
+  font-size: 12px;
+  cursor: pointer;
+  text-align: right;
+  padding-right: 20px;
+  position: relative;
+}
+
+.user-name {
+  font-size: 14px;
+  // line-height: 30px;
+  // margin-top: -1px;
+  // display: inline-block;
+  float: right;
+
+  cursor: pointer;
+}
+.nav-head {
+  flex: 1;
+  display: inline-flex;
+  justify-content: flex-end;
+  align-items: center;
+  color: #bbbbbb;
+  margin-right: 15px;
+  align-items:center
+  // font-weight: normal;
+  // transition: all 10s linear;
+  // i {
+  //   display: inline-block;
+  //   width: 18px;
+  //   height: 18px;
+  //   // margin-right: 25px;
+  //   cursor: pointer;
+  // }
+  // .user_name {
+  //   cursor: pointer;
+  //   margin-right: 15px;
+  //   p {
+  //     width: 100%;
+  //     line-height: 24px;
+  //     height: 24px;
+  //     display: inline-table;
+  //     // .user-icon {
+  //     //   vertical-align: middle;
+  //     //   background: url("../../../assets/nav/admin.png") no-repeat;
+  //     //   background-size: 80%;
+  //     // }
+  //     // .user_line {
+  //     //   border: 1px solid #f8f8f8;
+  //     //   margin: 0 5px;
+  //     // }
+  //   }
+  //   &:hover {
+  //     // .user-icon {
+  //     //   vertical-align: middle;
+  //     //   background-image: url("../../../assets/nav/admin-hover.png");
+  //     //   background-size: 100% 100%;
+  //     // }
+  //     p {
+  //       color: #409dff;
+  //     }
+  //   }
+  // }
+
+  .spl_line {
+    height: 40px;
+    border: 1px solid #f8f8f8;
+    line-height: 46px;
+    margin-right: 15px;
+  }
+  .log_uot {
+    // height: 24px;
+    // line-height: 24px;
+    // width: 24px;
+    cursor: pointer;
+    margin-left: 12px;
+    // .logout-icon {
+    //   vertical-align: middle;
+    //   background: url("../../../assets/nav/logout.png") no-repeat;
+    //   background-size: 80%;
+    // }
+    .logout-text {
+      position: absolute;
+      bottom: -15px;
+      font-size: 12px;
+    }
+    &:hover {
+      // .logout-icon {
+      //   vertical-align: middle;
+      //   background-image: url("../../../assets/nav/logout-hover.png");
+      //   background-size: 100% 100%;
+      // }
+      color: #409dff;
+      .logout-text {
+        color: #409dff;
+      }
+    }
+  }
+}
+.theme-box {
+  border: none;
+  background: none;
+  margin-right: 30px;
+  &:active {
+    background: none;
+    color: #409dff;
+  }
+  &:hover {
+    background: none;
+    color: #409dff;
+  }
+  &:focus {
+    background: none;
+    color: #409dff;
+  }
+  &:visited {
+    background: none;
+    color: #409dff;
+  }
+}
+// .logout-text:hover{
+//   font-weight: bold;
+//   color:#3ca1ec;
+// }
+// .logout-text{
+//   margin:0 25px 0 8px;cursor:pointer;
+// }
+// .nav-head i{
+//   display: inline-block;
+//   width: 18px;
+//   height: 18px;
+//   // margin-right: 25px;
+//   cursor: pointer;
+// }
+// .nav-head p{
+//    margin-right: 15px;
+// }
+
+.set-icon {
+  background-image: url('../../../assets/nav/set.png');
+  background-size: 100% 100%;
+}
+
+.info-icon {
+  background-image: url('../../../assets/nav/info.png');
+  background-size: 100% 100%;
+}
+.navbar {
+  height: 50px;
+  line-height: 50px;
+  display: flex;
+  box-sizing: border-box;
+  border-radius: 0 !important;
+  position: relative;
+  &-title {
+    font-size: 14px;
+    color: #333;
+    margin-left: 12px;
+    // cursor: pointer;
+    ul {
+      li:last-child {
+        color: #999;
+      }
+      i {
+        margin: 0 10px;
+        color: #999;
+      }
+    }
+  }
+  .hamburger-container {
+    line-height: 30px;
+    height: 30px;
+    float: left;
+    padding: 0 14px 0 20px;
+  }
+  .screenfull {
+    position: absolute;
+    right: 90px;
+    top: 16px;
+    color: red;
+  }
+  .avatar-container {
+    height: 46px;
+    display: inline-block;
+    position: absolute;
+    right: 35px;
+    .avatar-wrapper {
+      cursor: pointer;
+      margin-top: 5px;
+      position: relative;
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+      }
+      .el-icon-caret-bottom {
+        position: absolute;
+        right: -20px;
+        top: 25px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+/deep/ .msg-icon{
+  display:inline;
+  cursor: pointer;
+  margin-right:20px;
+  .el-badge__content.is-fixed{
+    top:4px;
+    right: 8px;
+  }
+}
+</style>