Merge branch 'dev_New' of http://114.132.189.42:9002/r/product-inventory-ma...

spring

昨天 b12b55a5ee1b34b5a3f9d21533fa9fc909207285

 src/views/reportAnalysis/qualityAnalysis/components/center-top.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,147 @@
<template>
  <div>
    <!-- é¡¶éƒ¨ç»Ÿè®¡å¡ç‰‡ -->
    <div class="stats-cards">
      <div v-for="item in statItems" :key="item.name" class="stat-card">
        <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
        <div class="card-content">
          <span class="card-label">{{ item.name }}</span>
          <span class="card-value">{{ item.value }}</span>
          <div class="card-compare" :class="compareClass(Number(item.rate))">
            <span>同比</span>
            <span class="compare-value">{{ formatPercent(item.rate) }}</span>
            <span class="compare-icon">{{ Number(item.rate) >= 0 ? '↑' : '↓' }}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { qualityInspectionCount } from '@/api/viewIndex.js'

const statItems = ref([])

const formatPercent = (val) => {
  const num = Number(val) || 0
  return `${num.toFixed(2)}%`
}

const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')

const fetchData = () => {
  qualityInspectionCount()
    .then((res) => {
      if (res.code === 200 && res.data) {
        const data = res.data

        statItems.value = [
          {
            name: '总检验数',
            value: data.totalCount ?? 0,
            rate: data.totalCountGrowthRate ?? 0,
          },
          {
            name: '今日待完成数',
            value: data.todayPendingCount ?? 0,
            rate: data.todayPendingCountGrowthRate ?? 0,
          },
          {
            name: '今日已完成数',
            value: data.todayCompletedCount ?? 0,
            rate: data.todayCompletedCountGrowthRate ?? 0,
          },
        ]
      }
    })
    .catch((err) => {
      console.error('获取质量检验统计失败:', err)
    })
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.stats-cards {
  display: flex;
  gap: 30px;
}

.stat-card {
  flex: 1;
  display: flex;
  align-items: center;
  background-image: url('@/assets/BI/border@2x.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 142px;
}

.card-icon {
  width: 100px;
  height: 100px;
  margin: 20px 20px 0 10px;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-value {
  font-weight: 500;
  font-size: 40px;
  background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-label {
  font-weight: 400;
  font-size: 16px;
  color: rgba(208, 231, 255, 0.7);
}

.card-compare {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #d0e7ff;
}

.card-compare>span:first-child {
  font-size: 13px;
  opacity: 0.8;
}

.compare-value {
  font-weight: 600;
}

.compare-icon {
  font-size: 14px;
  position: relative;
  top: -1px;
  /* è½»å¾®ä¸Šç§»ï¼Œè®©ç®­å¤´ä¸Žæ–‡å­—垂直居中对齐 */
}

.compare-up .compare-value,
.compare-up .compare-icon {
  color: #00c853;
}

.compare-down .compare-value,
.compare-down .compare-icon {
  color: #ff5252;
}
</style>