<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试数据显示</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        .data-display { background-color: #f5f5f5; padding: 20px; margin-top: 20px; border-radius: 5px; }
        .device { margin: 10px 0; padding: 10px; background-color: #fff; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div class="container">
        <h1>测试数据显示</h1>
        
        <div id="app">
            <div class="data-summary">
                <h2>汇总数据</h2>
                <p>稼动率: {{ (summary.utilization * 100).toFixed(1) }}%</p>
                <p>总产量: {{ summary.totalCount }}</p>
                <p>不良数量: {{ summary.badCount }}</p>
            </div>
            
            <div class="data-display">
                <h2>设备列表</h2>
                <div v-for="device in deviceDetails" :key="device.deviceName" class="device">
                    <p>设备名称: {{ device.deviceName }}</p>
                    <p>状态: {{ device.status }}</p>
                    <p>稼动率: {{ (device.utilization * 100).toFixed(1) }}%</p>
                </div>
            </div>
            
            <div class="data-display">
                <h2>时间轴数据</h2>
                <p v-if="deviceStatusHistory.length === 0">暂无数据</p>
                <div v-for="record in deviceStatusHistory.slice(0, 10)" :key="record.startTime" class="device">
                    <p>{{ record.deviceName }} - {{ record.status }} - {{ new Date(record.startTime).toLocaleString() }}</p>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    summary: { utilization: 0, totalCount: 0, badCount: 0 },
                    deviceDetails: [],
                    deviceStatusHistory: []
                }
            },
            mounted() {
                this.generateMockData();
                console.log('数据已生成:', { summary: this.summary, deviceDetails: this.deviceDetails, historyLength: this.deviceStatusHistory.length });
            },
            methods: {
                generateMockData() {
                    const now = new Date();
                    
                    // 生成模拟的设备数据
                    this.deviceDetails = [
                        { deviceName: 'local', utilization: 0.0, totalCount: 0, badCount: 0, status: '关机', runningTime: 0 },
                        { deviceName: '12', utilization: 0.0, totalCount: 0, badCount: 0, status: '关机', runningTime: 0 },
                        { deviceName: '44', utilization: 0.0, totalCount: 0, badCount: 0, status: '关机', runningTime: 0 },
                        { deviceName: 'WW', utilization: 1.0, totalCount: 1, badCount: 0, status: '运行', runningTime: 24 },
                        { deviceName: '123', utilization: 0.0, totalCount: 0, badCount: 0, status: '关机', runningTime: 0 }
                    ];
                    
                    // 生成汇总数据
                    const utilData = [];
                    const countData = [];
                    const badData = [];
                    
                    for (let i = 0; i < 24; i++) {
                        utilData.push(Math.random() * 0.5 + 0.3); // 30%-80%的稼动率
                        countData.push(Math.floor(Math.random() * 20));
                        badData.push(Math.floor(Math.random() * 5));
                    }
                    
                    this.summary = {
                        utilization: utilData.reduce((a, b) => a + b, 0) / utilData.length,
                        totalCount: countData.reduce((a, b) => a + b, 0),
                        badCount: badData.reduce((a, b) => a + b, 0)
                    };
                    
                    // 生成模拟的状态历史记录
                    this.generateMockStatusHistory();
                },
                generateMockStatusHistory() {
                    this.deviceStatusHistory = [];
                    const statuses = ['运行', '报警', '闲置', '关机'];
                    const now = new Date();
                    
                    if (this.deviceDetails && this.deviceDetails.length > 0) {
                        this.deviceDetails.forEach(device => {
                            let startTime = new Date(now.getTime() - 24 * 60 * 60 * 1000); // 24小时前
                            const deviceHistory = [];
                            
                            // 生成3-5个状态变更记录
                            const recordCount = Math.floor(Math.random() * 3) + 3;
                            
                            for (let i = 0; i < recordCount; i++) {
                                const status = statuses[Math.floor(Math.random() * statuses.length)];
                                const duration = Math.floor(Math.random() * 180) + 60; // 1-3小时
                                const endTime = new Date(startTime.getTime() + duration * 60 * 1000);
                                
                                deviceHistory.push({
                                    deviceId: device.deviceName,
                                    deviceName: device.deviceName,
                                    status: status,
                                    startTime: startTime.toISOString(),
                                    endTime: i === recordCount - 1 ? now.toISOString() : endTime.toISOString(),
                                    duration: duration * 60
                                });
                                
                                startTime = endTime;
                            }
                            
                            // 添加到总历史记录中
                            this.deviceStatusHistory = this.deviceStatusHistory.concat(deviceHistory);
                        });
                    }
                }
            }
        })
    </script>
</body>
</html>