gold-vue/src/views/workspace/index.vue

<template>
  <!-- 头部 -->
  <el-header class="header">
    <div class="title">数据总览</div>
  </el-header>
  <div style="height: 100vh;">
    <el-row class="cards">
      <el-col :span="14">
        <GoldManagement/>
      </el-col>
      <!-- 右上格子：占12列 -->
      <el-col :span="10">
        <CashManagement/>
      </el-col>
    </el-row>
    <el-row class="graphs">
      <el-col :span="24">
        <div v-if="loading">加载中...</div>
        <GoldGraphMarkets v-else-if="GraphFlag" />
        <GoldGraph v-else />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import GoldManagement from "@/components/workspace/GoldManagement.vue"
import CashManagement from "@/components/workspace/CashManagement.vue"
import GoldGraphMarkets from "@/components/workspace/GoldGraphMarkets.vue";
import API from "@/util/http.js";
import {onMounted, ref} from "vue";
import GoldGraph from "@/components/workspace/GoldGraph.vue";

const GraphFlag = ref();
const loading = ref(true); // 新增加载状态

const getAdminData = async function () {
  try {
    loading.value = true; // 开始加载
    const result = await API({url: '/admin/userinfo', data: {}});
    GraphFlag.value = result.markets !== '总部' && result.markets !== '研发部' && result.markets !== 'headquarters'

    ;
    console.log("GraphFlag",GraphFlag.value);
  } catch (error) {
    console.log('请求失败', error);
  } finally {
    loading.value = false; // 无论成功失败都结束加载
  }
};

onMounted(async () => {
  await getAdminData()
})
</script>

<style scoped>

.header {
  /* 将纯色背景替换为线性渐变 */
  background: linear-gradient(
      90deg,
      rgba(228, 240, 252, 1) 20%,
      rgba(190, 218, 247, 1) 50%,
      rgba(228, 240, 252, 1) 100%
  );
  height: 6vh;
  border-radius: 12px;
  margin-bottom: 4px;
  box-shadow: 0 2px 5px rgba(8, 4, 4, 0.1);
  /* 添加阴影增强层次感 */
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  width: 136px;
  color: #040a2d;
  font-family: "PingFang SC";
  font-size: 34px;
  font-style: normal;
  font-weight: 900;
  line-height: 31.79px;
  text-align: center;
}

.graphs {
  padding-bottom: 10px;
}
</style>