jihe-hs/ruoyi-ui/src/views/JiHeExpressway/components/HeaderMenu/UserArea.vue

<template>
  <div class="operations">
    <div class="opCon">
       <div class="menu_recent" @click="onSwitchRecent">
          <i class="iconfont icon-menuactive" v-if="menu.isRecentOpen"></i>
          <i class="iconfont icon-menu" v-else></i>
        </div>
      <el-dropdown class="userBox">
        <span class="user">
          <img
            class="icon head"
            src="@/assets/jihe/images/user/author.png"
            alt=""
          />
          <p class="title">
            <span class="txt">admin</span
            ><i class="menuIcon el-icon-arrow-down el-icon--right"></i>
          </p>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link to="/user/profile">
              <el-dropdown-item>个人中心</el-dropdown-item>
            </router-link>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!-- <div class="config">
        <img class="icon" src="@/assets/jihe/images/user/set.png" alt="" />
      </div> -->
      <div class="logout" @click="logout">
        <img class="icon" src="@/assets/jihe/images/user/out.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapMutations } from "vuex";
import Breadcrumb from "@/components/Breadcrumb";
import Hamburger from "@/components/Hamburger";
import Screenfull from "@/components/Screenfull";
import SizeSelect from "@/components/SizeSelect";
import Search from "@/components/HeaderSearch";
import RuoYiGit from "@/components/RuoYi/Git";
// import BigScreen from '@/components/bigScreen'
import RuoYiDoc from "@/components/RuoYi/Doc";
export default {
  data() {
    return {
      dialogShow: false,
      warningList: [],
      unReadWarningList: [],
      warnTypes: [
        { value: 0, label: "遥测越限" },
        { value: 1, label: "遥信告警" },
        { value: 2, label: "通道告警" },
        { value: 3, label: "其他事项" },
      ],
      dealStatuss: [
        { value: "", label: "全部" },
        { value: 0, label: "未处理" },
        { value: 1, label: "处理中" },
        { value: 2, label: "已处理" },
        { value: 3, label: "已忽略" },
      ],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceCode: "",
      },
      visible: false,
      recordForm: {},
    };
  },
  components: {
    Breadcrumb,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search,
    RuoYiGit,
    // BigScreen,
    RuoYiDoc,
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
    ...mapState(["menu"]),
    setting: {
      get() {
        return this.$store.state.settings.showSettings;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "showSettings",
          value: val,
        });
      },
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav;
      },
    },
    sideTheme: {
      get() {
        return this.$store.state.settings.sideTheme;
      },
    },
  },
  methods: {
    ...mapMutations("menu", ["openRecent", "closeRecent"]),
    onSwitchRecent(){
      if(this.menu.isRecentOpen){
        this.closeRecent();
      }else{
        this.openRecent();
      }
    },
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            //location.href = '/index';
            location.reload();
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.operations {
  display: flex;
  justify-content: flex-end;
  .opCon {
    width: 100%;
    max-width: 160px;
    display: flex;
    flex-direction: row;
    height: 16px;
    justify-content: space-between;
    align-items: center;
    .menu_recent{ cursor: pointer;
      .iconfont{
        font-size: 16px;
      }
    }
    .icon {
      height: 16px;
      width: 16px;
      object-fit: contain;
      cursor: pointer;
    }
    .userBox {
      flex: 1;
      .user {
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
        .head {
          width: 16px;
        }
        .title {
          flex: 1;
          width: 0;
          display: flex;
          flex-direction: row;
          color: #fff;
          display: flex;
          .txt {
            flex: 1;
            width: 0;
            text-align: center;
            white-space: nowrap;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .menuIcon {
            line-height: 16px;
          }
        }
      }
    }
    & > * {
      padding: 0 5px;
      border-right: 1px solid rgba($color: #fff, $alpha: 0.1);
      &:last-child {
        border: none;
      }
    }
  }
}
</style>