zhgdyun/src/components/account.vue

<template>
  <div class="header-btn">
    <el-popover
      placement="bottom"
      width="234"
      trigger="click"
      class="popover"
      @show="sendMsg"
      @hide="sendMsg2"
    >
      <div class="accountBox">
        <div class="flex2" v-show="$store.state.userInfo.accountType != 1">
          <!-- <i class="el-icon-user-solid"></i> -->
          <el-avatar size="large" icon="el-icon-user-solid"></el-avatar>
          <div style="margin-left:10px">
            <p>{{ $store.state.userInfo.companyName }}</p>
            <p>客服电话：{{$store.state.userInfo.customerServicePhone}}</p>
          </div>
        </div>
        <!-- <div class="flex2" style="margin-top:20px">
          客服电话：{{$store.state.userInfo.customerServicePhone}}
        </div> -->
        <div class="flex2 wrap" v-if="$store.state.userInfo.accountType != 1">
          <!-- <div class="width_100">
                <img src="@/assets/images/sjzx.png" width="15px" height="15px" />
                <span>数据中心</span>
              </div> -->
          <div
            class="width_100"
            @click="goProjectBackstage"
            v-if="
              $store.state.userInfo.accountType != 5 &&
              $store.state.userInfo.accountType != 6&&$store.state.userInfo.enterProjectBackType==0
            "
          >
            <img src="@/assets/images/xmht.png" width="15px" height="15px" />
            <span>{{ $t("message.companyDiagram.projectBackEnd") }}</span>
          </div>
          <div
            class="width_100"
            @click="goto2"
            v-if="
              $store.state.userInfo.accountType != 5 &&
              $store.state.userInfo.accountType != 6
            "
          >
            <img src="@/assets/images/yyht.png" width="15px" height="15px" />
            <!-- <span>{{$t('message.companyDiagram.operatingCenter')}}</span> -->
            <span>企业后台</span>
          </div>
          <div
            class="width_100"
            @click="goto4"
            v-if="
              ($store.state.userInfo.accountType == 5 ||
                $store.state.userInfo.accountType == 6) &&
              seeEquipment == 0&&$store.state.userInfo.styleType != 2
            "
          >
            <img src="@/assets/images/sbzt.png" width="15px" height="15px" />
            <span>{{ $t("message.companyDiagram.devCenter") }}</span>
          </div>
          <div class="width_100" @click="goto3">
            <img src="@/assets/images/zlzx.png" width="15px" height="15px" />
            <span>{{ $t("message.docManage.fileCenter") }}</span>
          </div>
        </div>
         
        <div class="flex2 logout" @click="loginOut">
          {{ $t("message.login.logout") }}
        </div>
      </div>
      <span slot="reference" class="flex3">
        <div style="margin-right: 8px">
          <p class="color_fff" style="margin-bottom: 0">{{ $store.state.userInfo.account }}</p>
          <!-- <p class="color_fff">{{$store.state.ACCOUNTTYPE[$store.state.userInfo.accountType-1]}}</p> -->
          <p class="color_fff">
            {{ $store.state.userInfo.menuAuthority.roleName }}
          </p>
        </div>
        <i class="el-icon-arrow-down" style="color: #fff"></i>
      </span>
    </el-popover>
  </div>
</template>
<script>
export default {
  data() {
    return {
      seeEquipment: 1, //是否能查看设备中台，0是，1否
    };
  },
  mounted() {
    this.seeEquipment = this.$store.state.userInfo.seeEquipment;
  },
  methods: {
    sendMsg2() {
      this.$EventBus.$emit("controlVideoShowOrHide", "show");
    },
    sendMsg() {
      this.$EventBus.$emit("controlVideoShowOrHide", "hide");
    },
    goto2() {
      let menuList = [];
      var half = this.$store.state.userInfo.menuAuthority.moduleList;
      half.forEach((element) => {
        if (element.moduleType == 3) {
          menuList.push(element);
        }
      });
      if (menuList.length > 0) {
        this.$store.commit("setIsShowBackIndex", false);
        // let routeUrl = this.$router.resolve({
        //   path: menuList[0].modulePath,
        // });
        var url = window.location.href;
        let routeUrl = '';
        // 判断当前页面是不是设备中台
        if (url.indexOf("equipmentCenter.html") != -1) {
          window.open("/#" + menuList[0].modulePath, "_self");
          // 南昌项目打开的是/index.html#/ 的页面
          if(COMPANY == 'nanchang') {
            window.open("/index.html#" + menuList[0].modulePath, "_self");
          }else{
            window.open("/#" + menuList[0].modulePath, "_self");
          }
        } else {
          routeUrl = this.$router.resolve({
            path: menuList[0].modulePath,
          });
        }
        window.open(routeUrl.href, "_self");
        window._paq.push(['trackEvent', '点击', '企业后台','进入企业后台' ])
      } else {
        this.$message.warning("您没有企业后台的权限！");
      }
    },
    goto3() {
      // this.$router.push('/fileCenter')
      // let routeUrl = this.$router.resolve({
      //   path: "/fileCenter",
      // });
      var url = window.location.href;
      let routeUrl = '';
      // 判断当前页面是不是设备中台
      if (url.indexOf("equipmentCenter.html") != -1) {
        // 南昌项目打开的是/index.html#/ 的页面
        if(COMPANY == 'nanchang') {
          window.open("/index.html#/fileCenter", "_self");
        }else{
          window.open("/#/fileCenter", "_self");
        }
      } else {
        routeUrl = this.$router.resolve({
          path: "/fileCenter",
        });
      }
      window.open(routeUrl.href, "_self");
      window._paq.push(['trackEvent', '点击', '资料中心','进入资料中心' ])
    },
    goto4() {
      window.open("/equipmentCenter.html#/equipmentCenterIndx", "_blank");
    },

    loginOut() {
      this.$store.commit("setUserInfo", null);
      this.$store.commit("setMapBackArr", []);
      this.$store.commit("setMoudle", null);
      this.$store.commit("setProDetail", null);
      window.localStorage.removeItem('isIframe')
      window.localStorage.removeItem('soundList')
      let json = {
            name: '工作站',
            id: 1,
            url: '/projectV2/taskList',
            menuList: [{
                id: 100000,
                menuName: "任务清单",
                path: "/projectV2/taskList"
            }, {
                id: 100001,
                menuName: "通知公告",
                path: "/projectV2/noticeList"
            }, {
                id: 100002,
                menuName: "工作日程",
                path: "/projectV2/workerSchedule"
            }]
      }
      this.$store.commit("setCurModule", json);
      sessionStorage.clear();
      // this.$router.push('/login')
      if(COMPANY == 'nanchang' || COMPANY == '') {
        window.open('/index.html#/login', "_self");
      }else {
        window.open('/#/login', "_self");
      }
      // this.$router.push('/')
      window._paq.push(['trackEvent', '点击', '退出登录','退出登录' ])
    },

    //去项目后台
    goProjectBackstage() {
      var url = window.location.href;
      let routeUrl = '';
      // 判断当前页面是不是设备中台
      if (url.indexOf("equipmentCenter.html") != -1) {
        // 南昌项目打开的是/index.html#/ 的页面
        if(COMPANY == 'nanchang') {
          window.open("/index.html#/projectList", "_self");
        }else{
          window.open("/#/projectList", "_self");
        }
      } else {
        routeUrl = this.$router.resolve({
          path: "/projectList",
        });
      }
      window.open(routeUrl.href, "_self");
      window._paq.push(['trackEvent', '点击', '项目后台','进入项目后台' ])
    },
  },
};
</script>
<style lang="less" scoped>
.accountBox {
  padding: 10px 10px 0;
}
.logout {
  justify-content: center;
  cursor: pointer;
  &:hover {
    color: @--color-primary;
  }
}
.flex2 {
  display: flex;
  align-items: center;
  .width_100:nth-child(2n) {
    justify-content: flex-end;
  }
}
.flex3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
// .el-icon-user-solid {
//   font-size: 40px;
//   margin-right: 15px;
//   margin-top: -1px;
// }
.wrap {
  flex-wrap: wrap;
  border-top: 1px solid rgba(47, 57, 92, 0.1);
  border-bottom: 1px solid rgba(47, 57, 92, 0.1);
  margin: 17px 0 10px;
  padding-top: 10px;
}
.width_100 {
  width: 105px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  cursor: pointer;
  img,
  i {
    margin-right: 7px;
  }
  &:hover {
    color: @--color-primary;
  }
}
.color_fff {
  font-family: PingFangSC-Medium;
  font-size: 11px;
  color: #ffffff;
  letter-spacing: 0;
}
 
</style>
<style>
.el-popover{
  box-sizing: content-box !important;
}
</style>