<template>
  <div class="chart-container">
    <div ref="factoryChart" class="chart" />
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'FactoryStatus',
  data() {
    return {
      chart: null,
      factoryData: []
    }
  },
  mounted() {
    this.initChart()
    this.getFactoryData()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.factoryChart)
      this.setOptions()
    },
    async getFactoryData() {
      // TODO: 调用获取工厂数据的API
      // 模拟数据
      this.factoryData = [
        { name: '工厂1', value: 85, max: 100 },
        { name: '工厂2', value: 70, max: 100 },
        { name: '工厂3', value: 90, max: 100 },
        { name: '工厂4', value: 60, max: 100 },
        { name: '工厂5', value: 75, max: 100 },
        { name: '工厂6', value: 80, max: 100 },
        { name: '工厂7', value: 65, max: 100 },
        { name: '工厂8', value: 95, max: 100 }
      ]
      this.setOptions()
    },
    setOptions() {
      const indicator = this.factoryData.map(item => ({
        name: item.name,
        max: item.max
      }))
      
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        radar: {
          indicator: indicator,
          radius: '65%'
        },
        series: [{
          type: 'radar',
          data: [{
            value: this.factoryData.map(item => item.value),
            name: '产能利用率',
            itemStyle: {
              color: '#409EFF'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(64,158,255,0.5)'
              }, {
                offset: 1,
                color: 'rgba(64,158,255,0.1)'
              }])
            }
          }]
        }]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 100%;
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style> 