<template>
  <div class="stats-container">
    <dv-border-box-10>
      <div class="stat-title">区域/设备类指标</div>
      <div class="gauge-container">
        <div class="gauge">
          <div ref="onlineRateChart" class="gauge-chart"></div>
          <div class="gauge-value">58%</div>
          <div class="gauge-label">摄像头在线率</div>
        </div>
        <div class="gauge">
          <div ref="coverageChart" class="gauge-chart"></div>
          <div class="gauge-value">40%</div>
          <div class="gauge-label">算法部署覆盖率</div>
        </div>
      </div>
    </dv-border-box-10>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill' // 引入水波图扩展

const onlineRateChart = ref(null)
const coverageChart = ref(null)

onMounted(() => {
  // 水波图配置
  const createLiquidOption = (color) => ({
    series: [{
      type: 'liquidFill',
      radius: '70%',
      center: ['50%', '50%'],
      data: [0.338, 0.48], // 水波高度
      color: [color],
      backgroundStyle: {
        color: 'rgba(16, 42, 87, 0.5)',
        borderWidth: 1,
        borderColor: 'rgba(124, 208, 255, 0.3)'
      },
      outline: {
        show: false
      },
      label: {
        show: false
      },
      waveAnimation: true,
      animationDuration: 2000,
      animationEasing: 'linear',
      amplitude: 6,
      waveLength: '80%'
    }]
  })

  // 初始化图表
  const onlineRate = echarts.init(onlineRateChart.value)
  onlineRate.setOption(createLiquidOption('#3A8BFF'))

  const coverage = echarts.init(coverageChart.value)
  coverage.setOption(createLiquidOption('#FFA726'))

  window.addEventListener('resize', () => {
    onlineRate.resize()
    coverage.resize()
  })
})
</script>

<style scoped>
/* 样式保持不变 */
.stats-container {
    
  height: 30vh;
  box-sizing: border-box;
  padding: 15px 10px;
}

.border-box {
  height: 100%;
  border-radius: 4px;
  padding: 0px;
  box-sizing: border-box;
}

.stat-title {
  font-size: 16px;
  color: #7cd0ff;
  text-align: center;
  padding-top: 15px;
  font-weight: 500;
  letter-spacing: 1px;
}

.gauge-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: calc(100% - 40px);
}

.gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45%;
}

.gauge-chart {
  width: 120px;
  height: 120px;
}

.gauge-value {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin: 10px 0 5px;
}

.gauge-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}
</style>