workorder_front/src/page/index/top/index.vue

<template>
  <div class="avue-top">
    <div class="top-left">
      {{ tag.label === "首页" ? "数据看板" : tag.label }}
    </div>
    <div class="top-right">
      <!-- <el-tooltip
        effect="dark"
        :content="$t('navbar.notice')"
        placement="bottom"
      >
        <div class="top-bar__item top-bar__item--show">
          <top-notice></top-notice>
        </div>
      </el-tooltip> -->
      <div class="avatar">
        <img :src="userInfo.avatar" alt="" width="56px" height="56px" style="border-radius:50%;"/>
      </div>
      <!-- <div style="margin-right:10px;">
        {{userInfo.real_name}}
      </div> -->
      <el-dropdown>
        <span class="el-dropdown-link">
          <span style="cursor:pointer;color:#000;">{{userInfo.real_name}}</span>
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link to="/info/index">{{
              $t("navbar.userinfo")
            }}</router-link>
          </el-dropdown-item>
          <el-dropdown-item
            v-if="this.website.switchMode"
            @click.native="switchDept"
            >{{ $t("navbar.switchDept") }}
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout" divided
            >{{ $t("navbar.logOut") }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { resetRouter } from "@/router/router";
import topNotice from "./top-notice";
export default {
  name: "top",
  data() {
    return {};
  },
  components: {
    topNotice,
  },
  created() {},
  computed: {
    ...mapGetters(["userInfo", "tag"]),
  },
  methods: {
    logout() {
      this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning",
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          resetRouter();
          process.env.NODE_ENV != "production" ? this.$router.push({path: '/newlogin'}) : window.location.href="http://jhoa.qd.gov.cn/Default.aspx";
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top-left {
  color: #273240;
  font-size: 30px;
  font-weight: 500;
}
.top-right {
  display: flex;
  align-items: center;
  .avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin-right: 18px;
    border: 2px solid #fff;
  }
  i {
    font-style: normal;
    font-size: 20px;
    color: #6e7e92;
    font-weight: 800;
  }
}
</style>