emms_web/src/views/report/dashboardPage/dashboard8/components/TodayOps.vue

<template>
  <div class="card">
    <div class="card-header">
      <div class="card-title">
        <span class="card-title-icon">
          <Icon icon="fa-solid:gauge-high" />
        </span>
        <span>今日开机率/稼动率</span>
      </div>
      <span class="chip">{{ currentLineName }}</span>
    </div>
    <div class="card-body">
      <div id="chart-today" class="chart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useChart, colors } from '../utils'

const { init, instance } = useChart('chart-today')

const lineMetrics = [
  { name: '产线A', run: 88, avail: 82 },
  { name: '产线B', run: 86, avail: 80 },
  { name: '产线C', run: 90, avail: 84 },
  { name: '产线D', run: 85, avail: 79 },
  { name: '产线E', run: 87, avail: 81 },
  { name: '产线F', run: 92, avail: 86 }
]

const currentLineName = ref(lineMetrics[0].name)
let timer: ReturnType<typeof setInterval> | null = null
let currentLineIndex = 0

const gaugeOption = (run: number, avail: number) => {
  return {
    backgroundColor: 'transparent',
    tooltip: { show: true },
    series: [
      {
        type: 'gauge',
        center: ['50%', '60%'],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 100,
        splitNumber: 10,
        radius: '88%',
        axisLine: { lineStyle: { width: 8, color: [[1, 'rgba(30,144,255,0.18)']] } },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        pointer: { show: false },
        progress: { show: true, width: 8, itemStyle: { color: colors.blue } },
        detail: { formatter: '{value}%', color: '#fff', fontSize: 26, offsetCenter: ['0%', '-5%'] },
        title: { show: true, color: '#a8b7d8', fontSize: 12, offsetCenter: ['0%', '-25%'] },
        data: [{ value: run, name: '开机率' }]
      },
      {
        type: 'gauge',
        center: ['50%', '60%'],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 100,
        radius: '68%',
        axisLine: { lineStyle: { width: 8, color: [[1, 'rgba(16,185,129,0.18)']] } },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        pointer: { show: false },
        progress: { show: true, width: 8, itemStyle: { color: colors.green } },
        detail: { formatter: '{value}%', color: '#fff', fontSize: 20, offsetCenter: ['0%', '45%'] },
        title: { show: true, color: '#a8b7d8', fontSize: 12, offsetCenter: ['0%', '25%'] },
        data: [{ value: avail, name: '稼动率' }]
      }
    ]
  }
}

onMounted(() => {
  const chart = init()
  if (!chart) return

  // Initial render
  chart.setOption(gaugeOption(lineMetrics[0].run, lineMetrics[0].avail))

  // Start rotation
  timer = setInterval(() => {
    currentLineIndex = (currentLineIndex + 1) % lineMetrics.length
    const item = lineMetrics[currentLineIndex]
    currentLineName.value = item.name
    
    // Update chart
    const c = instance()
    if (c) {
      c.setOption(gaugeOption(item.run, item.avail))
    }
  }, 3000)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped>
.card {
  background: linear-gradient(135deg, rgba(15,23,42,0.96), rgba(15,23,42,0.88));
  border-radius: 10px;
  border: 1px solid rgba(30,64,175,0.85);
  box-shadow:
    0 18px 45px rgba(15,23,42,0.95),
    0 0 0 1px rgba(15,23,42,1),
    inset 0 0 0 1px rgba(56,189,248,0.05);
  padding: 10px 10px 10px 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card::before,
.card::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid rgba(56,189,248,0.75);
  opacity: 0.6;
  pointer-events: none;
}

.card::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}

.card::after {
  right: -1px;
  bottom: -1px;
  border-left: none;
  border-top: none;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(41, 54, 95, 0.9);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #e5f0ff;
}

.card-title-icon {
  color: #22d3ee;
}

.card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chip {
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.5);
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15,23,42,0.75);
  color: #94a3b8;
  font-size: 12px;
}

.chart {
  width: 100%;
  height: 100%;
  min-height: 180px;
}

@media (max-width: 1600px) {
  .chart { min-height: 160px; }
}
</style>