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 accountInfo"
          v-show="$store.state.userInfo.accountType != 1"
        >
          <!-- <i class="el-icon-user-solid"></i> -->
          <el-image
            v-if="$store.state.userInfo.avatar"
            :src="$store.state.FILEURL + $store.state.userInfo.avatar"
            style="width: 40px;height: 40px;border-radius: 50%;"
          >
            <div slot="error" class="image-slot">
              <el-avatar
                size="large"
                icon="el-icon-user-solid"
              ></el-avatar>
            </div>
          </el-image>
          <el-avatar size="large" icon="el-icon-user-solid" v-else></el-avatar>
          <div style="margin-left: 10px">
            <p>{{ $store.state.userInfo.companyName }}</p>
            <!-- 横琴和鹤洲不需要客服电话-->
            <p v-if="projectType == 'common' || projectType == 'zjsj'">
              客服电话：{{ $store.state.userInfo.customerServicePhone }}
            </p>
            <p
              v-if="
                projectType == 'hengqin' &&
                $store.state.currentProDetail != null
              "
            >
              入场码：{{ $store.state.currentProDetail.placeCode }}
            </p>
          </div>
        </div>
        <!-- <div class="flex2" style="margin-top:20px">
          客服电话：{{$store.state.userInfo.customerServicePhone}}
        </div> -->
        <div
          class="flex2 wrap"
          v-if="![1, 11].includes($store.state.userInfo.accountType)"
        >
          <!-- <div class="width_100">
                <img src="@/assets/images/sjzx.png" width="15px" height="15px" />
                <span>数据中心</span>
          </div>-->

          <!--  企业前台 -->
          <div
            class="width_100"
            @click="goto5()"
            v-if="
              $route.path.indexOf('/firm/projectManage') == -1 &&
              ![5, 6, 10].includes($store.state.userInfo.accountType)
            "
            :title="enterpriseFront"
          >
            <!-- <img src="@/assets/images/xmht.png" width="15px" height="15px" /> -->
            <img
              src="@/assets/images/headerImg/companyIcon1.png"
              width="15px"
              height="15px"
            />
            <span>{{ enterpriseFront }}</span>
          </div>
          <!-- // 企业后台 -->
          <div
            class="width_100"
            @click="goto2"
            v-if="
              $route.path.indexOf('/companyAdmin/companyDiagram') == -1 &&
              ![5, 6, 10].includes($store.state.userInfo.accountType)
            "
            :title="enterpriseBackground"
          >
            <!-- <img src="@/assets/images/yyht.png" width="15px" height="15px" /> -->
            <img
              src="@/assets/images/headerImg/companyIcon2.png"
              width="15px"
              height="15px"
            />
            <!-- <span>{{$t('message.companyDiagram.operatingCenter')}}</span> -->
            <!-- <span>企业后台</span> -->
            <span>{{ enterpriseBackground }}</span>
          </div>
          <!--  项目后台 -->
          <div
            class="width_100"
            @click="goProjectBackstage"
            v-if="
              $route.path.indexOf('/projectIndex') == -1 &&
              $store.state.userInfo.enterProjectBackType === 0
            "
            :title="projectBackground"
          >
            <!-- <img src="@/assets/images/xmht.png" width="15px" height="15px" /> -->
            <img
              src="@/assets/images/headerImg/projectIcon1.png"
              width="15px"
              height="15px"
            />
            <!--  $t("message.companyDiagram.projectBackEnd") -->
            <span>{{ projectBackground }} </span>
          </div>
          <!--  设备中台 -->
          <div
            class="width_100"
            @click="goDevcenter"
            v-if="
              seeEquipment === 0 &&
              $route.path.indexOf('/equipmentCenterIndx') == -1
            "
            :title="equipmentChina"
          >
            <!-- <img src="@/assets/images/xmht.png" width="15px" height="15px" /> -->
            <img
              src="@/assets/images/headerImg/equipIcon1.png"
              width="15px"
              height="15px"
            />
            <!-- <span>{{ $t("message.companyDiagram.devCenter") }}</span> -->
            <span>{{ equipmentChina }}</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"
            v-if="dataCenter1 != 1"
            :title="dataCenter"
          >
            <!-- <img src="@/assets/images/zlzx.png" width="15px" height="15px" /> -->
            <img
              src="@/assets/images/headerImg/documentIcon1.png"
              width="15px"
              height="15px"
            />
            <!-- <span>{{ $t("message.docManage.fileCenter") }}</span> -->
            <span>{{ dataCenter }}</span>
          </div>
          <!--  项目前台 -->
          <div
            class="width_100"
            @click="goto6()"
            v-if="
              $route.path.indexOf('/firm/projectManage') == -1 &&
              $store.state.userInfo.systemLogoConfig.isShowProjectFront == 1 &&
              [5, 6].includes($store.state.userInfo.accountType)
            "
            :title="projectFront"
          >
            <img src="@/assets/images/xmht.png" width="15px" height="15px" />
            <span>{{ projectFront }}</span>
          </div>
        </div>

        <div class="flex2 logout">
          <span @click="loginOut">{{ $t("message.login.logout") }}</span>
          <span @click="updatePw">修改密码</span>
        </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" v-if="COMPANY == 'hengtong'">
            <!-- {{ $store.state.userInfo.menuAuthority.roleName }} -->
            公司管理员
          </p>
          <p class="color_fff" v-else>
            {{ headerConfiguration }}
          </p>
        </div>
        <i class="el-icon-arrow-down" style="color: #fff"></i>
      </span>
    </el-popover>
  </div>
</template>
<script>
export default {
  data() {
    return {
      COMPANY: COMPANY,
      projectType: "",
      loginData: "",
      dataCenter1: "",
      seeEquipment: "",
      projectBackground: "项目后台",
      enterpriseBackground: "企业后台",
      headerConfiguration: "公司管理员", //标头配置
      enterpriseFront: "企业前台", //企业前台
      equipmentChina: "设备中台", //设备中台
      dataCenter: "资料中心", //资料中心
      projectFront: "项目前台", //项目前台
    };
  },
  watch: {
    userInfo(newValue) {
      // console.log('新值',newValue);
      this.seeEquipment = newValue.seeEquipment;
    },
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  created() {
    this.projectType = PROJECT_TYPE;
    this.loginData = JSON.parse(localStorage.getItem("systemInfo"));
    this.seeEquipment = this.$store.state.userInfo.seeEquipment;
    console.log("seeEquipment------", this.seeEquipment);
    console.log(" this.loginData===================", this.loginData);
    if (this.loginData.headerConfiguration != "") {
      this.headerConfiguration = this.loginData.headerConfiguration;
    }
    if (this.loginData.projectBackground != "") {
      this.projectBackground = this.loginData.projectBackground;
    }
    if (this.loginData.enterpriseBackground != "") {
      this.enterpriseBackground = this.loginData.enterpriseBackground;
    }
    if (this.loginData.equipmentChina != "") {
      this.equipmentChina = this.loginData.equipmentChina;
    }
    if (this.loginData.dataCenter != "") {
      this.dataCenter = this.loginData.dataCenter;
    }
    if (this.loginData.enterpriseFront != "") {
      this.enterpriseFront = this.loginData.enterpriseFront;
    }
    if (this.loginData.projectFront != "") {
      this.projectFront = this.loginData.projectFront;
    }
  },
  mounted() {
    console.log("this.$store.state.userInfo", this.$store.state.userInfo);
    // console.log('项目后台',this.projectBackground)
    // console.log('企业后台',this.enterpriseBackground)
  },
  methods: {
    // 修改密码
    updatePw() {
      this.$router.push({
        path: "/userCenter/userConfig",
      });
    },
    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");
    },
    goto5() {
      window.open("/index.html#/firm/projectManage", "_self");
    },
    goto6() {
      window.open("/index.html#/firm/projectFront", "_self");
    },
    loginOut() {
      this.$store.currentProDetail = {};
      // this.$store.commit('setUserInfo', null)
      this.$store.commit("setMapBackArr", []);
      this.$store.commit("setMoudle", null);
      this.$store.commit("setProDetail", null);
      this.$store.commit("setProjectSn", "");
      this.$store.commit("setGroupTreeList", []);
      this.$store.commit("setSelectedGroupSn", 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") {
        window.open("/index.html#/login", "_self");
      } else {
        //企业退出拼接sn
        const baseUrl = "/#"; // 设置新的登录地址的基础URL
        const query =
          "?&headquartersSn=" + this.$store.state.userInfo.headquartersSn; // 设置要拼接的参数
        const loginUrl = `${baseUrl}/login${query}`; // 拼接登录地址
        console.log(this.$route.path.indexOf("/projectIndex") == 0, "退出登录");
        window.open(loginUrl, "_self");
        // this.$router.go();
        // if( this.$route.path.indexOf('/projectIndex') == 0 ) {
        //   this.$router.go();
        // }
      }
      // this.$router.push('/')
      window._paq.push(["trackEvent", "点击", "退出登录", "退出登录"]);
    },

    //去项目后台
    goProjectBackstage() {
      var url = window.location.href;
      let routeUrl = "";
      let type = this.$store.state.userInfo.accountType;
      // 判断当前页面是不是设备中台
      if (url.indexOf("equipmentCenter.html") != -1) {
        // 南昌项目打开的是/index.html#/ 的页面
        if (COMPANY == "nanchang") {
          window.open("/index.html#/projectList", "_self");
        } else {
          window.open("/#/projectList", "_self");
        }
      }
      if (type == 5 || type == 6 || type == 10) {
        window.open("/index.html#/projectIndex", "_self");
      } else {
        routeUrl = this.$router.resolve({
          path: "/projectList",
        });
      }
      window.open(routeUrl.href, "_self");
      window._paq.push(["trackEvent", "点击", "项目后台", "进入项目后台"]);
    },
    //去设备中台
    goDevcenter(value) {
      let routeUrl = "";
      let type = this.$store.state.userInfo.accountType;
      //  this.$store.commit("setProjectSn", value.projectSn);
      if (type == 5 || type == 6 || type == 10) {
        window.open("/equipmentCenter.html#/equipmentCenterIndx", "_self");
        window._paq.push(["trackEvent", "点击", "设备中台", "进入设备中台"]);
      } else {
        routeUrl = this.$router.resolve({
          path: "/projectList",
        });
        // routeUrl = this.$router.resolve({
        //   path: '/equipmentCenterIndx'
        // })
        window.open(routeUrl.href, "_self");
      }
    },
    // 去设备中台
    // goDevcenter(){
    //   window.open('/equipmentCenter.html#/equipmentCenterIndx', "_self");
    //   var url = window.location.href;
    //   let routeUrl = '';
    //   // 判断当前页面是不是设备中台
    //   if (url.indexOf("equipmentCenter.html") != -1) {
    //     // 南昌项目打开的是/index.html#/ 的页面
    //     if(COMPANY == 'nanchang') {
    //       window.open("/index.html#/equipmentCenterIndx", "_self");
    //     }else{
    //       window.open("/#/equipmentCenterIndx", "_self");
    //     }
    //   } else {
    //     routeUrl = this.$router.resolve({
    //       path: "/equipmentCenterIndx",
    //     });
    //   }
    //   window.open(routeUrl.href, "_self");
    //   window._paq.push(['trackEvent', '点击', '设备中台','进入设备中台' ])
    // }
  },
};
</script>
<style lang="less" scoped>
.accountBox {
  padding: 10px 10px 0;
}
.accountInfo {
  margin-bottom: 17px;
}
.logout {
  justify-content: space-around;
  cursor: pointer;
  color: #4a8ef7;
  border-top: 1px solid rgba(47, 57, 92, 0.1);
  padding-top: 10px;
  // &: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);
  padding-top: 10px;
}
.width_100 {
  width: 105px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  cursor: pointer;
  span {
    width: 80px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  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>