performance-test/src/components/HeaderCom.vue

<template>
  <div class="header">
    <div class="header-logo">
      <!-- <img src="@/assets/datang.png" slot="reference" />
      <h2 class="conversion">中国大唐集团公司</h2> -->
    </div>
    <div class="personalCenter">
      <div id="header-page-tools" class="header-page-tools"></div>
      <!-- <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>
              账号：{{
                ($store.state.auth &&
                  $store.state.auth.userInfo &&
                  $store.state.auth.userInfo.userInfo &&
                  $store.state.auth.userInfo.userInfo.loginName) ||
                ""
              }}
            </p>
          </div>
          <el-divider></el-divider>
          <div class="cursor-pointer boxmini">
            <p>
              角色：{{
                ($store.state.auth &&
                  $store.state.auth.userInfo &&
                  $store.state.auth.userInfo.role &&
                  $store.state.auth.userInfo.role.roleDescription) ||
                ""
              }}
            </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, index) in colorData"
                :key="index"
                :label="item.lable"
                :value="item.value"
              >
                <span style="float: left">{{ item.lable }}</span>
                <el-color-picker
                  disabled
                  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">
            <p>图表主题：</p>
            <el-select
              size="mini"
              v-model="color1"
              @change="updateChartColor"
              placeholder="选择配色方案"
              style="width: 200px"
            >
              <el-option
                v-for="(scheme, index) in colorSchemes"
                :key="index"
                :label="scheme.label"
                :value="scheme.colors"
              >
                <!-- :style="getOptionStyle(scheme.colors)" -->
                <span
                  v-for="color in scheme.colors.slice(0, 8)"
                  :style="{
                    background: color,
                    width: '20px',
                    height: '20px',
                    display: 'inline-block',
                  }"
                ></span>
              </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";
import { mapActions } from "vuex";
import { colorSchemes } from "@/views/overview/js/colors";
export default {
  data() {
    return {
      color1: [], // 默认颜色
      // 配色方案列表（每个方案是一个颜色数组）
      colorSchemes: [...colorSchemes],
      currentDate: "",
      currentTheme: this.$store.state.themes.theme,
      colorData: [
        // { lable: "科技蓝", value: "tech-blue", color: "#1890ff" },
        { lable: "黄色", value: "light", color: "#82780ccf" },
        { lable: "深色", value: "dark", color: "#607d8b" },
        { lable: "绿色", value: "green", color: "#008080" },
        { lable: "蓝色", value: "blue", color: "#1B3B7F" },
      ],
    };
  },
  components: {},
  watch: {
    "$store.state.themes.theme": {
      handler(newTheme) {
        this.currentTheme = newTheme;
      },
      immediate: true,
    },
  },

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

  methods: {
    ...mapActions("themes", ["themeChange", "switchTheme"]),
    updateChartColor() {
      // console.log("this.color1", this.color1);
      this.themeChange(this.color1);
    },
    // 根据配色方案设置每个选项的样式
    getOptionStyle(scheme) {
      return {
        background: `linear-gradient(to right, ${scheme
          .slice(0, 8)
          .join(", ")})`,
        color: "#fff",
        height: "30px",
        lineHeight: "30px",
        borderRadius: "0px",
      };
    },
    changeTheme(theme) {
      this.$store.dispatch("themes/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.$router.push("/login");
          this.$store.commit("auth/RESET_USER_STATE");
        })
        .catch(() => {
          this.$emit("setLoding", false);
        });
    },
  },
};
</script>

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

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

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

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

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

  .personalCenter {
    display: flex;
    align-items: center;
    color: var(--text-cyan, #52c8f2);

    .header-page-tools {
      display: flex;
      align-items: center;
      margin-right: 16px;

      &:empty {
        display: none;
        margin-right: 0;
      }
    }

    .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;
}
::v-deep .el-color-picker__mask {
  background-color: rgba(255, 255, 255, 0) !important;
}
</style>