新疆马铃薯 1.删除按钮添加操作权限

gaoluyang

2026-06-22 5ee2390929e041409ec1fde9829c8261fc050a33

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

@@ -2,21 +2,26 @@
  <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 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">{{ item.value }}</span>
          <span class="card-value">
            <span class="value-number">{{ item.value }}</span>
          </span>
          <div class="card-compare" :class="compareClass(Number(item.rate))">
            <span>同比</span>
            <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>

@@ -25,7 +30,7 @@

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

const statItems = ref([])

@@ -37,18 +42,32 @@
const compareClass = (val) => (val >= 0 ? 'compare-up' : 'compare-down')

const fetchData = () => {
  salesPurchaseStorageProductCount()
  qualityInspectionCount()
    .then((res) => {
      if (res.code === 200 && Array.isArray(res.data)) {
        statItems.value = res.data.map((item) => ({
          name: item.name,
          value: item.value,
          rate: item.rate,
        }))
      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)
      console.error('获取质量检验统计失败:', err)
    })
}

@@ -60,11 +79,14 @@
<style scoped>
.stats-cards {
  display: flex;
  gap: 30px;
  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');
@@ -72,45 +94,134 @@
  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: 100px;
  height: 100px;
  margin: 20px 20px 0 10px;
  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: 10px;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.card-value {
  font-weight: 500;
  font-size: 40px;
  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: 19px;
  font-size: 14px;
  color: rgba(208, 231, 255, 0.7);
  white-space: nowrap;
}

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

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

@@ -121,7 +232,13 @@
.compare-icon {
  font-size: 14px;
  position: relative;
  top: -1px; /* 轻微上移，让箭头与文字垂直居中对齐 */
  top: -1px;
  animation: arrowBounce 1s ease-in-out infinite;
}

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

.compare-up .compare-value,
@@ -133,5 +250,4 @@
.compare-down .compare-icon {
  color: #ff5252;
}

</style>