hycw-ui/src/layout/components/Top/index.vue

<template>
  <div class="Top-wrapper">
    <div class="top-title">配网安全精益管理辅助应用</div>
    <div class="profile">
      <div class="right-menu">
        <template v-if="device !== 'mobile'">
          <el-tooltip
            class="back"
            effect="dark"
            content="首页"
            placement="bottom"
          >
            <i
              @click="() => $router.push('/index')"
              class="el-icon-full-screen back-icon"
            ></i>
          </el-tooltip>
          <search id="header-search" class="right-menu-item" />
          <screenfull id="screenfull" class="right-menu-item hover-effect" />
          <el-tooltip content="布局大小" effect="dark" placement="bottom">
            <size-select
              id="size-select"
              class="right-menu-item hover-effect"
            />
          </el-tooltip>
          <span @click="routePush">
            <el-badge :value="value == 0 ? '' : value" class="hasWaitTask">
              <el-icon class="el-icon-message-solid"></el-icon>
              <div @click="routePush"></div>
            </el-badge>
          </span>
        </template>

        <el-dropdown
          class="avatar-container right-menu-item hover-effect"
          trigger="click"
          style="margin-left: 10px"
        >
          <div class="avatar-wrapper">
            <span style="margin-right: 4px">{{ user.name }}</span>
            <i style="font-size: 20px" class="el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/user/profile">
              <el-dropdown-item>个人中心</el-dropdown-item>
            </router-link>
            <el-dropdown-item @click.native="setting = true">
              <span>布局设置</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--        <span style="font-size: 16px;color: #ffffff">{{this.$store.state.user.orgName}}</span>-->
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import Search from "@/components/HeaderSearch";
import Screenfull from "@/components/Screenfull";
import SizeSelect from "@/components/SizeSelect";

export default {
  name: "Top",
  components: { Search, Screenfull, SizeSelect },
  data() {
    return {
      title: process.env.VUE_APP_TITLE,
      value: this.$store.state.user.waitta,
    };
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
    ...mapState(["user"]),
    setting: {
      get() {
        return this.$store.state.settings.showSettings;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "showSettings",
          value: val,
        });
      },
    },
  },
  watch: {
    "this.$store.state.user.waitta"(newvalue, oldvalue) {
      this.value = newvalue;
    },
  },
  mounted() {
    console.log(this.$store.state.user, "--------------");
  },
  methods: {
    routePush() {
      console.log(this.$router);
      this.$router.push({
        path: "/commission/index",
      });
    },
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            //启用isc登陆前
            // location.href = '/index';
            //启用isc登陆后
            window.location.replace(
              "http://10.223.57.127:17089/isc_sso/logout?service=http://25.212.177.102:19888/pdm?token=isc"
            );
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
.back-icon {
  cursor: pointer;
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  margin-right: 10px;
}
.Top-wrapper {
  width: 100%;
  height: 80px;
  background-image: url("../../../assets/images/top-bg.png");
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .top-title {
    font-size: 1.6rem;
    color: white;
  }

  .profile {
    .right-menu {
      &:focus {
        outline: none;
      }
      .right-menu-item {
        display: inline-block;
        padding: 0 8px;
        height: 100%;
        font-size: 18px;
        color: #fff;
        vertical-align: text-bottom;

        &.hover-effect {
          cursor: pointer;
          transition: background 0.3s;

          &:hover {
            background: rgba(0, 0, 0, 0.025);
          }
        }
      }

      .avatar-container {
        margin-right: 25px;

        .avatar-wrapper {
          margin-top: 5px;
          position: relative;

          .user-avatar {
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 10px;
          }

          .el-icon-caret-bottom {
            cursor: pointer;
            position: absolute;
            right: -20px;
            top: 0px;
            font-size: 12px;
          }
        }
      }
    }
  }
}
.hasWaitTask {
  // color: #34ada1;
  color: #fff;
  cursor: pointer;
}
</style>