performance-test/src/components/HeaderCom.vue

<template>
  <div class="header">
    <div class="header-logo">
      <img src="@/assets/logo.png" slot="reference" />
      <h2 class="conversion">中能智能</h2>
    </div>
    <div class="personalCenter">
      <p class="current-time">{{ currentDate }}</p>
      <el-popover
        placement="bottom"
        width="220"
        trigger="click"
        style="cursor: pointer"
      >
        <img src="@/assets/portrait.png" slot="reference" />
        <div>
          <div class="cursor-pointer boxmini">
            <p>账号：admin</p>
          </div>
          <el-divider></el-divider>
          <div class="cursor-pointer boxmini">
            <p>岗位：超级管理员</p>
          </div>
          <el-divider></el-divider>
          <div class="cursor-pointer boxmini">
            <p>角色：超级管理员</p>
          </div>
          <el-divider></el-divider>
          <div class="cursor-pointer boxmini">
            <p>主题切换：</p>
            <el-select
              v-model="currentTheme"
              placeholder="Select theme"
              @change="changeTheme"
              size="mini"
            >
              <el-option
                v-for="item in colorData"
                :label="item.lable"
                :value="item.value"
              >
                <span style="float: left">{{ item.lable }}</span>
                <el-color-picker
                  v-model="item.color"
                  size="mini"
                  style="float: right"
                >
                </el-color-picker>
              </el-option>
            </el-select>
          </div>
          <el-divider></el-divider>
          <div class="cursor-pointer boxmini" @click="skip(1)">
            <p class="logout">退出登录</p>
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { userLogout } from "@/api/system";
export default {
  data() {
    return {
      currentDate: "",
      currentTheme: this.$store.state.themes.theme,
      colorData: [
        { lable: "Light", value: "light", color: "#f90" },
        { lable: "Dark", value: "dark", color: "#1f2d3d" },
        { lable: "Green", value: "green", color: "#008080" },
        { lable: "Blue", value: "blue", color: "#409eff" },
      ],
    };
  },
  components: {},
  watch: {
    "$store.state.themes.theme": {
      handler(newTheme) {
        console.log(newTheme, "newTheme");
        this.currentTheme = newTheme;
      },
      immediate: true,
    },
  },

  mounted() {
    this.updateCurrentDateTime();
    setInterval(this.updateCurrentDateTime, 1000);
  },

  methods: {
    changeTheme(theme) {
      this.$store.dispatch("switchTheme", theme);
    },
    updateCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, "0");
      const day = now.getDate().toString().padStart(2, "0");
      const hours = now.getHours().toString().padStart(2, "0");
      const minutes = now.getMinutes().toString().padStart(2, "0");
      const seconds = now.getSeconds().toString().padStart(2, "0");

      // 设置当前时间数据
      this.currentDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    skip() {
      this.$emit("setLoding", true);
      userLogout({
        phone: this.$store.state.auth.userInfo.userInfo.userPhone,
      })
        .then((res) => {
          this.$store.commit("auth/RESET_USER_STATE");
          this.$router.push("/login");
        })
        .catch(() => {
          this.$emit("setLoding", false);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background: #fff;
  padding: 0 20px;

  .header-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h2 {
      padding-left: 10px;
      font-weight: 600;
    }

    img {
      width: 40px;
      height: 40px;
    }
  }

  .el-breadcrumb {
    font-size: 16px;
    font-weight: 600;
    color: rgb(143, 143, 143);
    flex: 1;
  }

  .personalCenter {
    display: flex;
    align-items: center;

    .current-time {
      font-size: 12px;
      padding-right: 10px;
    }

    .remind {
      cursor: pointer;
      margin-right: 24px;
    }
  }
}

.boxmini {
  display: flex;

  p {
    font-size: 14px;
    font-weight: 600;
    width: 120px !important;
  }

  .logout {
    color: #ff0000;
    text-align: center;
    width: 100%;
  }
}

.el-divider--horizontal {
  margin: 5px 0;
}
</style>