<template>
  <div class="screen-container">
    <!-- 顶部标题 -->
    <div class="header">
      <h1>微工厂设备</h1>
    </div>
    
    <div class="content">
      <!-- 左侧设备列表 -->
      <div class="left-panel">
        <div class="panel-title">
          <span class="icon">▶</span>
          设备列表
        </div>
        <div class="device-list">
          <div class="device-item" v-for="device in deviceList" :key="device.code">
            <span>{{ device.name }}</span>
            <span>{{ device.code }}</span>
            <span class="status" :class="device.status"></span>
          </div>
        </div>
        
        <!-- 左侧产量统计图表 -->
        <div class="chart-container">
          <div class="panel-title">
            <span class="icon">▶</span>
            产量统计
          </div>
          <div ref="productionChart" style="height: 200px;"></div>
        </div>
        
        <!-- 设备利用率图表 -->
        <div class="chart-container">
          <div class="panel-title">
            <span class="icon">▶</span>
            设备利用率
          </div>
          <div ref="utilizationChart" style="height: 200px;"></div>
        </div>
      </div>

      <!-- 中间主要内容区 -->
      <div class="center-panel">
        <div class="status-overview">
          <div class="status-item">
            <div class="label">工作数量</div>
            <div class="value">3台</div>
          </div>
          <div class="status-item">
            <div class="label">待机数量</div>
            <div class="value">2台</div>
          </div>
          <div class="status-item">
            <div class="label">停机数量</div>
            <div class="value">2台</div>
          </div>
          <div class="status-item">
            <div class="label">设备类型</div>
            <div class="value">7种</div>
          </div>
        </div>
        
        <!-- 中央圆环图 -->
        <div class="status-center">
          <div ref="centerChart" class="center-chart"></div>
          <!-- 添加状态标签 -->
          <div class="status-labels">
            <div class="label-item" style="position: absolute; left: 10%; top: 50%; transform: translateY(-50%);">工作频率</div>
            <div class="label-item" style="position: absolute; right: 10%; top: 50%; transform: translateY(-50%);">停机频率</div>
            <div class="label-item" style="position: absolute; left: 30%; top: 20%;">3台</div>
            <div class="label-item" style="position: absolute; right: 30%; top: 20%;">2台</div>
            <div class="label-item" style="position: absolute; left: 30%; bottom: 20%;">2台</div>
            <div class="label-item" style="position: absolute; right: 30%; bottom: 20%;">7种</div>
          </div>
        </div>
        
        <!-- 用电监测 -->
        <div class="power-monitoring">
          <div class="panel-title">用电监测</div>
          <div class="power-charts">
            <div ref="powerChart1" class="power-chart"></div>
            <div ref="powerChart2" class="power-chart"></div>
            <div ref="powerChart3" class="power-chart"></div>
          </div>
        </div>
      </div>

      <!-- 右侧统计信息 -->
      <div class="right-panel">
        <div class="production-stats">
          <div class="panel-title">当月计划生产的产品类型及计划产量</div>
          <div class="stats-list">
            <div class="stats-item" v-for="(item, index) in productionStats" :key="index">
              <span>产品{{ index + 1 }}</span>
              <div ref="productionProgress" class="progress-chart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 设备列表数据
const deviceList = ref([
  { name: '电子系统机', code: 'W01', status: 'working' },
  { name: '电脑喷头检测机', code: 'W02', status: 'standby' },
  { name: '自动打磨头机机', code: 'W03', status: 'stopped' },
  // ... 其他设备
])

// 图表实例引用
const productionChart = ref(null)
const utilizationChart = ref(null)
const centerChart = ref(null)
const powerChart1 = ref(null)
const powerChart2 = ref(null)
const powerChart3 = ref(null)

// 初始化图表
onMounted(() => {
  initProductionChart()
  initUtilizationChart()
  initCenterChart()
  initPowerCharts()
})

// 初始化产量统计图表
const initProductionChart = () => {
  const chart = echarts.init(productionChart.value)
  chart.setOption({
    // ... 配置产量统计图表选项
  })
}

// 初始化设备利用率图表
const initUtilizationChart = () => {
  const chart = echarts.init(utilizationChart.value)
  chart.setOption({
    // ... 配置设备利用率图表选项
  })
}

// 初始化中央圆环图
const initCenterChart = () => {
  const chart = echarts.init(centerChart.value)
  chart.setOption({
    series: [{
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      pointer: { show: false },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          color: '#58D9F9'
        }
      },
      axisLine: {
        lineStyle: {
          width: 40
        }
      },
      splitLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
      data: [{
        value: 82.43,
        name: '完成率',
        title: { offsetCenter: ['0%', '0%'] },
        detail: { offsetCenter: ['0%', '30%'] }
      }]
    }]
  })
}

// 初始化用电监测图表
const initPowerCharts = () => {
  [powerChart1, powerChart2, powerChart3].forEach((chartRef, index) => {
    const chart = echarts.init(chartRef.value)
    chart.setOption({
      // ... 配置用电监测图表选项
    })
  })
}
</script>

<style scoped>
.screen-container {
  width: 1920px;
  height: 1080px;
  background-color: #001529;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
}

.header {
  text-align: center;
  padding: 20px 0;
}

.content {
  display: flex;
  height: calc(100% - 100px);
  gap: 20px;
}

.left-panel, .right-panel {
  width: 400px;
  background-color: rgba(0, 21, 41, 0.7);
  padding: 20px;
}

.center-panel {
  flex: 1;
  background-color: rgba(0, 21, 41, 0.7);
  padding: 20px;
}

.panel-title {
  font-size: 18px;
  margin-bottom: 20px;
  color: #58D9F9;
}

.device-list {
  margin-bottom: 20px;
}

.device-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.status.working { background-color: #52c41a; }
.status.standby { background-color: #faad14; }
.status.stopped { background-color: #f5222d; }

.status-overview {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}

.status-item {
  text-align: center;
}

.center-chart {
  height: 400px;
  margin: 30px 0;
}

.power-monitoring {
  margin-top: 30px;
}

.power-charts {
  display: flex;
  justify-content: space-between;
}

.power-chart {
  width: 30%;
  height: 200px;
}

.stats-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.progress-chart {
  height: 40px;
}

.status-center {
  position: relative;
  height: 400px; /* 调整大小以适应圆环图 */
}

.status-labels .label-item {
  color: #fff;
  font-size: 16px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
</style>
