<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备利用率简化版</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body { margin: 0; padding: 0; background-color: #0f172a; color: white; }
        .container { padding: 20px; }
        .kpi-card { background-color: #1e293b; border-radius: 4px; padding: 15px; margin-bottom: 15px; }
        .kpi-title { font-size: 12px; color: #94a3b8; margin-bottom: 5px; }
        .kpi-value { font-size: 18px; font-weight: bold; }
        .chart-container { width: 100%; height: 300px; background-color: #1e293b; border-radius: 4px; margin-bottom: 15px; }
    </style>
</head>
<body>
    <div id="app" class="container">
        <h1>设备利用率监控</h1>
        
        <!-- KPI指标卡片 -->
        <div class="kpi-card">
            <div class="kpi-title">平均稼动率</div>
            <div class="kpi-value">{{ (summary.utilization * 100).toFixed(1) }}%</div>
        </div>
        
        <div class="kpi-card">
            <div class="kpi-title">总产量</div>
            <div class="kpi-value">{{ summary.totalCount }} 件</div>
        </div>
        
        <div class="kpi-card">
            <div class="kpi-title">异常产量</div>
            <div class="kpi-value">{{ summary.badCount }} 件</div>
        </div>
        
        <!-- 图表容器 -->
        <div id="utilizationChart" class="chart-container"></div>
        
        <!-- 设备列表 -->
        <el-table :data="deviceDetails" style="width: 100%">
            <el-table-column prop="deviceName" label="设备名称" width="180"></el-table-column>
            <el-table-column prop="status" label="状态" width="100"></el-table-column>
            <el-table-column prop="utilization" label="稼动率">
                <template slot-scope="scope">{{ (scope.row.utilization * 100).toFixed(1) }}%</template>
            </el-table-column>
        </el-table>
    </div>
    
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    summary: {
                        utilization: 0.65,
                        totalCount: 350,
                        badCount: 15
                    },
                    deviceDetails: [
                        { deviceName: '设备A', utilization: 0.8, status: '运行' },
                        { deviceName: '设备B', utilization: 0.5, status: '报警' },
                        { deviceName: '设备C', utilization: 0.3, status: '闲置' },
                        { deviceName: '设备D', utilization: 0.0, status: '关机' }
                    ],
                    xDays: ['0:00', '4:00', '8:00', '12:00', '16:00', '20:00'],
                    dailyUtil: [0.5, 0.6, 0.7, 0.65, 0.75, 0.6],
                    chart: null
                }
            },
            mounted() {
                this.initChart();
                console.log('页面已初始化，数据:', { summary: this.summary, deviceCount: this.deviceDetails.length });
            },
            methods: {
                initChart() {
                    this.chart = echarts.init(document.getElementById('utilizationChart'));
                    this.chart.setOption({
                        title: { text: '稼动率趋势', textStyle: { color: "#fff" } },
                        tooltip: { trigger: 'axis' },
                        xAxis: { type: 'category', data: this.xDays, axisLabel: { color: "#bcd" } },
                        yAxis: { type: 'value', axisLabel: { formatter: '{value}%', color: "#bcd" } },
                        series: [{
                            type: 'line',
                            data: this.dailyUtil.map(v => v * 100),
                            lineStyle: { color: "#4db8ff" }
                        }]
                    });
                }
            }
        })
    </script>
</body>
</html>