@hbisty/qj-common 5.0.4 → 5.0.6

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

@@ -1,695 +1,765 @@
-<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,
-      commonShowMenuAction: ''
-    };
-  },
-  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') : '';
-      this.commonShowMenuAction = window.sessionStorage.getItem('commonShowMenuAction') ? window.sessionStorage.getItem('commonShowMenuAction') : ''
-      // 获取 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);
-        window.sessionStorage.setItem('commonShowMenuAction', this.commonShowMenuAction)
-        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>
+<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-badge
+          v-if="isTY()"
+          :value="totalUnreadCount"
+          :hidden="totalUnreadCount === 0"
+          :max="99"
+          class="msg-badge"
+        >
+          <div @click="openMsgDrawer">
+            <i
+              class="el-icon-message-solid msg-badge-icon"
+            ></i>
+            <span>消息</span>
+          </div>
+        </el-badge>
+
+        <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>
+    <!-- 站内信消息抽屉框 -->
+    <site-msg
+      :visible.sync="msgDrawerVisible"
+      @jump-to-product="handleJumpToProduct"
+      @unread-count-change="handleUnreadCountChange"
+    />
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import Breadcrumb from '#/components/Breadcrumb';
+import Hamburger from '#/components/Hamburger';
+import { getUserserviceInfo, getSSOAuthInfo } from '../../../api/login';
+import SiteMsg from '#/components/SiteMsg/index.vue'
+import { isTY } from '#/utils/auth';
+import axios from 'axios';
+import qs from 'qs';
+
+export default {
+  components: {
+    Breadcrumb,
+    Hamburger,
+    SiteMsg
+  },
+  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,
+      commonShowMenuAction: '',
+      msgDrawerVisible: false, // 站内信消息抽屉框是否显示
+      msgTotalUnread: 0, // 未读消息数量角标
+    };
+  },
+  computed: {
+    ...mapGetters(['sidebar']),
+    totalUnreadCount() {
+      return this.msgTotalUnread
+    }
+  },
+  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: {
+    isTY,
+    // 打开站内信消息抽屉框
+    openMsgDrawer() {
+      this.msgDrawerVisible = true
+    },
+    // 处理跳转事件
+    handleJumpToProduct(code) {
+      // this.$router.push({ path: '/product/pending-review', query: { code } })
+    },
+    // 处理未读消息数量变化
+    handleUnreadCountChange(count) {
+      this.msgTotalUnread = count
+    },
+    /**
+     * 监听保存到本地的未读消息数量用来显示角标
+     */
+    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') : '';
+      this.commonShowMenuAction = window.sessionStorage.getItem('commonShowMenuAction') ? window.sessionStorage.getItem('commonShowMenuAction') : ''
+      // 获取 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);
+        window.sessionStorage.setItem('commonShowMenuAction', this.commonShowMenuAction)
+        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>
+/**
+ * 站内消息角标
+ */
+.msg-badge {
+  padding-left: 16px;
+  cursor: pointer;
+  margin-right: 15px;
+  &:hover {
+    color: #409efe;
+  }
+  .msg-badge-icon {
+    font-size: 15px;
+    cursor: pointer;
+  }
+  span{
+    font-size: 14px;
+  }
+
+  /deep/ .el-badge__content {
+    top: 15px;
+    right: 5px;
+    font-size: 10px;
+    line-height: 14px;
+    height: 14px;
+    padding: 0 4px;
+  }
+}
+.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>