cfc/cfc-web/src/views/admin/EnergySandbox.vue

<template>
  <div class="page-container admin-page">
    <el-card>
      <div slot="header">
        <span>五维能量沙盘</span>
        <el-button
          type="primary"
          size="small"
          style="float: right"
          @click="loadData"
          :loading="loading"
        >
          刷新
        </el-button>
      </div>
      <p class="page-desc">展示家庭在身、心、智、行、富五个维度的能量评分及综合指数</p>
    </el-card>

    <!-- 家庭能量总览 -->
    <el-card class="section-card" v-loading="loading">
      <div slot="header">
        <span>家庭能量总览</span>
      </div>
      <el-row :gutter="16">
        <el-col :span="4" v-for="item in dimensionList" :key="item.key">
          <div class="metric-card" :style="{ borderTopColor: item.color }">
            <div class="metric-name">{{ item.label }}</div>
            <div class="metric-score">
              <el-tag :color="item.color" effect="dark" size="medium" class="score-tag">
                {{ sandboxData[item.key] != null ? sandboxData[item.key] : '-' }}
              </el-tag>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 家庭成员数据 -->
    <el-card class="section-card" v-loading="loading">
      <div slot="header">
        <span>家庭成员数据</span>
        <el-input v-model="memberKeyword" placeholder="搜索成员姓名..." prefix-icon="el-icon-search" size="small" clearable style="float: right; width: 200px;" />
      </div>
      <el-table :data="filteredMembers" border style="width: 100%" :max-height="tableHeight">
        <el-table-column prop="memberType" label="成员类型" width="100"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column prop="bodyScore" label="身" width="80" align="center">
          <template slot-scope="scope">
            <el-tag size="small" color="#67C23A" effect="dark">{{ scope.row.bodyScore != null ? scope.row.bodyScore : '-' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="mindScore" label="心" width="80" align="center">
          <template slot-scope="scope">
            <el-tag size="small" color="#9B59B6" effect="dark">{{ scope.row.mindScore != null ? scope.row.mindScore : '-' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="wisdomScore" label="智" width="80" align="center">
          <template slot-scope="scope">
            <el-tag size="small" color="#409EFF" effect="dark">{{ scope.row.wisdomScore != null ? scope.row.wisdomScore : '-' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="actionScore" label="行" width="80" align="center">
          <template slot-scope="scope">
            <el-tag size="small" color="#E6A23C" effect="dark">{{ scope.row.actionScore != null ? scope.row.actionScore : '-' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="wealthScore" label="富" width="80" align="center">
          <template slot-scope="scope">
            <el-tag size="small" color="#F0C929" effect="dark">{{ scope.row.wealthScore != null ? scope.row.wealthScore : '-' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="overallScore" label="综合" width="80" align="center">
          <template slot-scope="scope">
            <el-tag size="small" color="#6366F1" effect="dark">{{ scope.row.overallScore != null ? scope.row.overallScore : '-' }}</el-tag>
          </template>
        </el-table-column>
        <template slot="empty">
          <span>暂无数据</span>
        </template>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getFamilyEnergySandbox } from '@/api/energy'

export default {
  name: 'EnergySandbox',
  data() {
    return {
      loading: false,
      memberKeyword: '',
      sandboxData: {
        bodyScore: null,
        mindScore: null,
        wisdomScore: null,
        actionScore: null,
        wealthScore: null,
        overallScore: null,
        members: []
      },
      dimensionList: [
        { key: 'bodyScore', label: '身', color: '#67C23A' },
        { key: 'mindScore', label: '心', color: '#9B59B6' },
        { key: 'wisdomScore', label: '智', color: '#409EFF' },
        { key: 'actionScore', label: '行', color: '#E6A23C' },
        { key: 'wealthScore', label: '富', color: '#F0C929' },
        { key: 'overallScore', label: '综合', color: '#6366F1' }
      ]
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 280
    },
    filteredMembers() {
      const members = this.sandboxData.members || []
      if (!this.memberKeyword) return members
      const kw = this.memberKeyword.toLowerCase()
      return members.filter(m => m.name && m.name.toLowerCase().includes(kw))
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      this.loading = true
      try {
        const res = await getFamilyEnergySandbox()
        if (res.data) {
          this.sandboxData = {
            bodyScore: res.data.bodyScore,
            mindScore: res.data.mindScore,
            wisdomScore: res.data.wisdomScore,
            actionScore: res.data.actionScore,
            wealthScore: res.data.wealthScore,
            overallScore: res.data.overallScore,
            members: res.data.members || []
          }
        }
      } catch (error) {
        this.$message.error(error.message || '加载五维能量数据失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.page-desc {
  color: #909399;
  font-size: 13px;
  margin: 0;
}

.section-card {
  margin-top: 16px;
}

.metric-card {
  background: #f8fafc;
  border-radius: 8px;
  border-top: 3px solid #ddd;
  padding: 16px 8px;
  text-align: center;
}

.metric-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 10px;
}

.metric-score {
  display: flex;
  justify-content: center;
}

.score-tag {
  font-size: 18px;
  font-weight: 700;
  min-width: 48px;
  text-align: center;
}
</style>