Merge remote-tracking branch 'origin/dev_新疆_大罗素马铃薯new' into dev_新疆_大罗素马铃薯new

云

2026-06-23 62b4b7af6fb8dea23cf14b0709156871a3c144af

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,253 @@
<template>
  <div>
    <!-- é¡¶éƒ¨ç»Ÿè®¡å¡ç‰‡ -->
    <div class="stats-cards">
      <div v-for="(item, index) in statItems" :key="item.name" class="stat-card" :style="{ animationDelay: `${index * 0.15}s` }">
        <div class="card-icon-wrapper">
          <img src="@/assets/BI/icon@2x.png" alt="图标" class="card-icon" />
          <div class="icon-ring"></div>
        </div>
        <div class="card-content">
          <span class="card-label">{{ item.name }}</span>
          <span class="card-value">
            <span class="value-number">{{ item.value }}</span>
          </span>
          <div class="card-compare" :class="compareClass(Number(item.rate))">
            <el-tooltip content="今日单日检验数相对昨日单日检验数的增长率" placement="top">
              <span>{{ item.name === '总检验数' ? '日环比' : '同比' }}</span>
            </el-tooltip>
            <span class="compare-value">{{ formatPercent(item.rate) }}</span>
            <span class="compare-icon">{{ Number(item.rate) >= 0 ? '↑' : '↓' }}</span>
          </div>
        </div>
        <!-- å¡ç‰‡åº•éƒ¨å…‰çº¿ -->
        <div class="card-glow"></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: 20px;
  width: 100%;
  overflow: hidden;
}

.stat-card {
  flex: 1;
  min-width: 0;
  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;
  padding-right: 10px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  animation: cardFadeIn 0.6s ease-out both;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* å¡ç‰‡åº•éƒ¨å‘光效果 */
.card-glow {
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent);
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

.card-icon-wrapper {
  position: relative;
  width: 70px;
  height: 70px;
  min-width: 70px;
  margin: 0 12px 0 8px;
}

.card-icon {
  width: 70px;
  height: 70px;
  position: relative;
  z-index: 2;
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* å›¾æ ‡å¤–圈光环 */
.icon-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 50%;
  animation: ringRotate 8s linear infinite;
}

@keyframes ringRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.card-value {
  font-weight: 500;
  font-size: 32px;
  line-height: 1.2;
  background: linear-gradient(360deg, #008bfd 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  overflow: hidden;
  white-space: nowrap;
}

.value-number {
  display: inline-block;
  animation: countUp 1s ease-out;
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.card-compare {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #d0e7ff;
  white-space: nowrap;
  flex-wrap: nowrap;
}

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

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

.compare-icon {
  font-size: 14px;
  position: relative;
  top: -1px;
  animation: arrowBounce 1s ease-in-out infinite;
}

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

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

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