xlcp-frontend/src/views/Dashboard/components/ScoreAssessment/Index.vue

<template>
  <div class="score-assessment-container">
    <!-- 标题栏 -->
    <div class="score-header">
      <span class="header-title">计分考核</span>
      <div class="header-icon"></div>
    </div>

    <!-- 内容区域 -->
    <div class="score-content">
      <!-- 表头 -->
      <div class="score-table-header">
        <div class="header-cell">
          <div class="required-star"></div>
          <span>考核年月</span>
        </div>
        <div class="header-cell">加/扣</div>
        <div class="header-cell">最终分</div>
        <div class="header-cell">等级</div>
      </div>

      <!-- 数据列表 -->
      <div class="score-table-body">
        <div v-for="(item, index) in scoreData" :key="index" class="score-table-row">
          <div class="row-cell cell-date">
            <div class="row-icon"></div>
            <div>{{ item.date }}</div>
          </div>
          <div class="row-cell cell-score" :class="item.scoreType">
            {{ item.score }}
          </div>
          <div class="row-cell cell-final">{{ item.finalScore }}</div>
          <div class="row-cell cell-level">
            <span class="level-badge" :class="`level-${item.level}`">
              {{ item.levelText }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

defineOptions({ name: 'ScoreAssessment' })

interface ScoreItem {
  date: string
  score: string
  scoreType: 'positive' | 'negative'
  finalScore: number
  level: 'excellent' | 'good' | 'poor'
  levelText: string
}

// 计分考核数据 - 使用 ref 存储
const scoreData = ref<ScoreItem[]>([])

// 可以通过 props 接收外部数据
const props = withDefaults(
  defineProps<{
    data?: ScoreItem[]
  }>(),
  {
    data: () => []
  }
)

// 监听 props 数据变化
watch(
  () => props.data,
  (newData) => {
    if (newData && newData.length > 0) {
      scoreData.value = newData.map((item:any) => (
        {
          ...item, 
          level: item?.level === '良好' ? 'good' : 
          item?.level === '较差' ? 'poor' : 'exllent'
        }
      ))
    }
  },
  { immediate: true, deep: true }
)
</script>

<style scoped lang="scss">
.score-assessment-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  padding: 4px 8px 16px;
  border: 1px solid rgba(56, 102, 141, 0.3);
}

// 标题栏
.score-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.header-title {
  font-size: 14px;
  margin-right: 6px;
  color: white;
  font-weight: bold;
}

.header-icon {
  width: 18px;
  height: 18px;
  background: url('@/assets/imgs/dashboard/pie.svg') no-repeat center center;
  background-size: 100% 100%;
}

// 内容区域
.score-content {
  flex: 1 1 0;
  // min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

// 表头
.score-table-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  padding: 10px 12px;
}

.header-cell {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  display: flex;
  align-items: center;
}

.required-star {
  background: url('@/assets/imgs/dashboard/icon-require.svg') no-repeat center center;
  background-size: 100% 100%;
  width: 10px;
  height: 10px;
  margin-right: 4px;
}

// 表格主体
.score-table-body {
  flex: 1 1 0;
  // min-height: 0;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0px;
  }
}

.score-table-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  padding: 4px 12px;
}

.row-icon {
  background: url('@/assets/imgs/dashboard/icon-arrow.svg') no-repeat center center;
  background-size: 100% 100%;
  width: 10px;
  height: 10px;
  margin-right: 4px;
}

.row-cell {
  font-size: 11px;
  color: #ffffff;
  display: flex;
  align-items: center;
}

.cell-date {
  color: #ffffff;
  font-weight: 400;
}

.cell-score {
  &.positive {
    color: #10c896;
    text-shadow: 0 0 4px rgba(16, 200, 150, 0.3);
  }

  &.negative {
    color: #ff6b6b;
    text-shadow: 0 0 4px rgba(255, 107, 107, 0.3);
  }
}

.cell-final {
  color: #ffd700;
  text-shadow: 0 0 4px rgba(255, 215, 0, 0.3);
}

.cell-level {
  display: flex;
  align-items: center;
}

.level-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  color: #ffffff;
  white-space: nowrap;
  font-size: 12px;
  background: #51869290;
  border: 1px solid #518692;

  &.level-good {
    background: #47363390;
    border: 1px solid #473633;
  }

  &.level-poor {
    background: #33131f90;
    border: 1px solid #33131f;
  }
}
</style>