anKeYuan-largeScreen-1080/src/components/LabStats/ChemicalsStats.vue

<template>
  <div class="ChemicalsStats panel-box">
    <div class="corner-deco tl"></div><div class="corner-deco tr"></div>
    <div class="corner-deco bl"></div><div class="corner-deco br"></div>
    <div class="panel-title">化学品库存动态统计</div>
    <div class="chem-panel-body">
      <div class="chem-stats-grid">

        <!-- 左上：存量总量，全满青色圆环 + 斜杠图标 -->
        <div class="chem-stat-item">
          <div class="chem-ring-wrap">
            <svg viewBox="0 0 44 44">
              <g transform="rotate(-90 22 22)">
                <circle class="ring-bg" cx="22" cy="22" r="17"/>
                <circle class="ring-fg" cx="22" cy="22" r="17" stroke="#48d7ff"
                  stroke-dasharray="106.8" stroke-dashoffset="0"/>
              </g>
              <text x="12" y="27" class="chem-ring-icon" fill="#48d7ff">&#x1F9EA;</text>
            </svg>
          </div>
          <div class="chem-stat-info">
            <div class="chem-stat-value" style="color:#48d7ff">{{ formatNum(stats.totalAmount) }}<span class="unit"> {{ stats.unit }}</span></div>
            <div class="chem-stat-label">存量化学品总量</div>
          </div>
        </div>

        <!-- 右上：管控类，橙红色圆环 + 百分比居中 -->
        <div class="chem-stat-item item-red">
          <div class="chem-ring-wrap">
            <svg viewBox="0 0 44 44">
              <g transform="rotate(-90 22 22)">
                <circle class="ring-bg" cx="22" cy="22" r="17"/>
                <circle class="ring-fg" cx="22" cy="22" r="17" stroke="#ff4d4f"
                  stroke-dasharray="106.8" :stroke-dashoffset="calcOffset(controlledPct)"/>
              </g>
              <text x="22" y="25" class="ring-pct" fill="#ff4d4f">{{ controlledPct }}%</text>
            </svg>
          </div>
          <div class="chem-stat-info">
            <div class="chem-stat-value" style="color:#ff4d4f">{{ formatNum(stats.controlledAmount) }}<span class="unit"> L</span></div>
            <div class="chem-stat-label">管控类化学品</div>
          </div>
        </div>

        <!-- 左下：非管控类，绿色圆环 + 百分比居中 -->
        <div class="chem-stat-item item-green">
          <div class="chem-ring-wrap">
            <svg viewBox="0 0 44 44">
              <g transform="rotate(-90 22 22)">
                <circle class="ring-bg" cx="22" cy="22" r="17"/>
                <circle class="ring-fg" cx="22" cy="22" r="17" stroke="#36d399"
                  stroke-dasharray="106.8" :stroke-dashoffset="calcOffset(uncontrolledPct)"/>
              </g>
              <text x="22" y="25" class="ring-pct" fill="#36d399">{{ uncontrolledPct }}%</text>
            </svg>
          </div>
          <div class="chem-stat-info">
            <div class="chem-stat-value" style="color:#36d399">{{ formatNum(stats.uncontrolledAmount) }}<span class="unit"> L</span></div>
            <div class="chem-stat-label">非管控类化学品</div>
          </div>
        </div>

        <!-- 右下：类目统计 -->
        <div class="chem-stat-item item-center">
          <div class="chem-stat-value" style="color:#ffb020;font-size:22px;">{{ stats.totalCategories }}</div>
          <div class="chem-stat-label">存量化学品总类目</div>
          <div class="chem-stat-sub">管控{{ stats.controlledCategories }}类 / 非管控{{ stats.uncontrolledCategories }}类</div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { getChemicalStats } from '@/api'

export default {
  name: 'ChemicalsStats',
  data() {
    return {
      stats: {
        totalAmount: 0, unit: 'L', controlledAmount: 0, uncontrolledAmount: 0,
        totalCategories: 0, controlledCategories: 0, uncontrolledCategories: 0
      },
      controlledPct: 0,
      uncontrolledPct: 0,
      timer: null
    }
  },
  async mounted() {
    await this.loadData()
    this.timer = setInterval(this.loadData, 5 * 60 * 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    formatNum(n) { return (n || 0).toLocaleString() },
    // r=17, circumference = 2*π*17 ≈ 106.8
    calcOffset(pct) {
      return (106.8 * (1 - pct / 100)).toFixed(1)
    },
    async loadData() {
      try {
        const d = await getChemicalStats()
        this.stats = {
          totalAmount: d.totalSurplus || 0,
          unit: d.totalUnit || 'L',
          controlledAmount: d.controlledSurplus || 0,
          uncontrolledAmount: d.uncontrolledSurplus || 0,
          totalCategories: d.totalCategoryCount || 0,
          controlledCategories: d.controlledCategoryCount || 0,
          uncontrolledCategories: d.uncontrolledCategoryCount || 0
        }
        this.controlledPct = d.controlledPercent || 0
        this.uncontrolledPct = d.uncontrolledPercent || 0
      } catch (e) {
        console.error('ChemicalsStats:', e)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.ChemicalsStats {
  display: flex;
  flex-direction: column;
}

.chem-panel-body {
  flex: 1;
  padding: 8px 10px 10px;
  min-height: 0;
  display: flex;
}

.chem-stats-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  z-index:3;
}

.chem-stat-item {
  background: rgba(2, 14, 46, 0.7);
  border: 1px solid rgba(72, 180, 255, 0.15);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;

  &.item-red   { border-color: rgba(255, 77, 79, 0.3); background: rgba(35, 6, 6, 0.7); }
  &.item-green { border-color: rgba(54, 211, 153, 0.3); background: rgba(4, 24, 16, 0.7); }
  &.item-center {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }
}

.chem-ring-wrap {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  margin-left:14px;
  svg { width: 100%; height: 100%; }
}

.ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 3.5;
}

.ring-fg {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease;
}

.ring-pct {
  font-size: 8.5px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
}

.chem-stat-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.chem-stat-value {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;

  .unit {
    font-size: 12px;
    font-weight: 400;
    color: #7eacc8;
  }
}

.chem-stat-label {
  font-size: 12px;
  color: #7eacc8;
}

.chem-stat-sub {
  font-size: 14px;
  color: rgba(126, 172, 200, 0.65);
}
</style>