AI编写的“黑科技风格、自动刷新”的看板页面

以下的 index.html 、 script.js 和 styles.css 文件，实现一个具有黑科技风格、自动刷新的能源管理系统实时监控看板。
在这里插入图片描述

html页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工厂能源管理系统实时监控看板</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <h1>工厂能源管理系统实时监控看板</h1>
        <div id="timeDisplay"></div>
    </header>
    <div class="container">
        <div id="powerConsumptionChart" class="chart"></div>
        <div id="energyTypeChart" class="chart"></div>
        <div id="energyEfficiencyChart" class="chart"></div>
        <div id="productionLineChart" class="chart"></div>
        <div id="equipmentChart" class="chart"></div>
        <div id="dailyPowerChart" class="chart"></div>
        <div id="monthlyGasChart" class="chart"></div>
        <div id="equipmentEfficiencyChart" class="chart"></div>
        <div id="lineComparisonChart" class="chart"></div>
    </div>
    <script src="script.js"></script>
    <script>
        // 显示当前时间
        function updateTime() {
            const timeDisplay = document.getElementById('timeDisplay');
            const now = new Date();
            const timeString = now.toLocaleString();
            timeDisplay.textContent = `当前时间: ${timeString}`;
        }
        // 初始显示时间
        updateTime();
        // 每秒更新一次时间
        setInterval(updateTime, 1000);

        // 1000 毫秒自动刷新图表
        setInterval(() => {
            if (window.initCharts) {
                window.initCharts();
            }
        }, 1000);
    </script>
</body>
</html>

javascript脚本


// 模拟数据
const mockData = {
    powerConsumption: [
        { time: '00:00', value: 120 },
        { time: '01:00', value: 110 },
        { time: '02:00', value: 105 },
        { time: '03:00', value: 98 },
        { time: '04:00', value: 90 },
        { time: '05:00', value: 85 },
        { time: '06:00', value: 95 },
        { time: '07:00', value: 110 },
        { time: '08:00', value: 130 },
        { time: '09:00', value: 150 },
        { time: '10:00', value: 160 },
        { time: '11:00', value: 165 },
        { time: '12:00', value: 160 }
    ],
    energyType: [
        { name: '电力', value: 700 },
        { name: '天然气', value: 300 },
        { name: '蒸汽', value: 200 }
    ],
    energyEfficiency: [
        { time: '00:00', value: 0.85 },
        { time: '01:00', value: 0.86 },
        { time: '02:00', value: 0.84 },
        { time: '03:00', value: 0.83 },
        { time: '04:00', value: 0.82 },
        { time: '05:00', value: 0.81 },
        { time: '06:00', value: 0.83 },
        { time: '07:00', value: 0.85 },
        { time: '08:00', value: 0.87 },
        { time: '09:00', value: 0.89 },
        { time: '10:00', value: 0.9 },
        { time: '11:00', value: 0.91 },
        { time: '12:00', value: 0.9 }
    ], 
    productionLines: [
        { name: '生产线1', power: 300, gas: 150 },
        { name: '生产线2', power: 250, gas: 120 },
        { name: '生产线3', power: 350, gas: 180 }
    ],
    equipments: [
        { name: '设备A', power: 120, gas: 60 },
        { name: '设备B', power: 100, gas: 50 },
        { name: '设备C', power: 130, gas: 70 },
        { name: '设备D', power: 100, gas: 50 }
    ],
    dailyPower: [
        { day: '周一', power: 1000 },
        { day: '周二', power: 1100 },
        { day: '周三', power: 1050 },
        { day: '周四', power: 1200 },
        { day: '周五', power: 1300 },
        { day: '周六', power: 800 },
        { day: '周日', power: 700 }
    ],
    monthlyGas: [
        { month: '1月', gas: 3000 },
        { month: '2月', gas: 3200 },
        { month: '3月', gas: 3500 },
        { month: '4月', gas: 3300 },
        { month: '5月', gas: 3600 },
        { month: '6月', gas: 3400 },
        { month: '7月', gas: 3700 },
        { month: '8月', gas: 3800 },
        { month: '9月', gas: 3500 },
        { month: '10月', gas: 3600 },
        { month: '11月', gas: 3400 },
        { month: '12月', gas: 3300 }
    ],
    equipmentEfficiency: [
        { name: '设备A', efficiency: 0.85 },
        { name: '设备B', efficiency: 0.88 },
        { name: '设备C', efficiency: 0.9 },
        { name: '设备D', efficiency: 0.87 }
    ],
    lineComparison: [
        { name: '生产线1', power: 300, gas: 150 },
        { name: '生产线2', power: 250, gas: 120 },
        { name: '生产线3', power: 350, gas: 180 }
    ]
};

// 初始化用电量图表
function initPowerConsumptionChart() {
    const chartDom = document.getElementById('powerConsumptionChart');
    const myChart = echarts.init(chartDom);
    const option = {
        title: {
            text: '电力消耗图表',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: mockData.powerConsumption.map(item => item.time)
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: mockData.powerConsumption.map(item => item.value),
            type: 'line'
        }]
    };
    myChart.setOption(option);
}

// 初始化能源类型图表
function initEnergyTypeChart() {
    const chartDom = document.getElementById('energyTypeChart');
    const myChart = echarts.init(chartDom);
    const option = {
        title: {
            text: '能源类型图表',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '能源类型',
                type: 'pie',
                radius: '50%',
                data: mockData.energyType,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
}

// 初始化能源效率图表
function initEnergyEfficiencyChart() {
    const chartDom = document.getElementById('energyEfficiencyChart');
    const myChart = echarts.init(chartDom);
    const option = {
        title: {
            text: '能源效率图表',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: mockData.energyEfficiency.map(item => item.time)
        },
        yAxis: {
            type: 'value',
            min: 0.8,
            max: 0.95
        },
        series: [{
            data: mockData.energyEfficiency.map(item => item.value),
            type: 'line'
        }]
    };
    myChart.setOption(option);
}

// 初始化生产线图表
function initProductionLineChart() {
    const chartDom = document.getElementById('productionLineChart');
    const myChart = echarts.init(chartDom);
    const option = {
        title: {
            text: '按生产线统计电力和气使用量',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: mockData.productionLines.map(item => item.name)
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: mockData.productionLines.map(item => item.power),
            type: 'bar'
        }]
    };
    myChart.setOption(option);
}

// 初始化设备图表
function initEquipmentChart() {
    const chartDom = document.getElementById('equipmentChart');
    const myChart = echarts.init(chartDom);
    const option = {
        title: {
            text: '按设备统计电力和气使用量',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: mockData.equipments.map(item => item.name)
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: mockData.equipments.map(item => item.power),
            type: 'bar'
        }]
    };
    myChart.setOption(option);
}

// 新增每日电力使用量图表
function initDailyPowerChart() {
    const chartDom = document.getElementById('dailyPowerChart');
    const myChart = echarts.init(chartDom);
    const option = {
        title: {
            text: '每日电力使用量',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: mockData.dailyPower.map(item => item.day)
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: mockData.dailyPower.map(item => item.power),
            type: 'bar'
        }]
    };
    myChart.setOption(option);
}

// 新增每月气使用量图表
function initMonthlyGasChart() {
    const chartDom = document.getElementById('monthlyGasChart');
    const myChart = echarts.init(chartDom);
    const option = {
        title: {
            text: '每月气使用量',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: mockData.monthlyGas.map(item => item.month)
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: mockData.monthlyGas.map(item => item.gas),
            type: 'line'
        }]
    };
    myChart.setOption(option);
}

// 新增设备效率图表
function initEquipmentEfficiencyChart() {
    const chartDom = document.getElementById('equipmentEfficiencyChart');
    const myChart = echarts.init(chartDom);
    const option = {
        title: {
            text: '设备效率',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            data: mockData.equipmentEfficiency.map(item => item.name)
        },
        yAxis: {
            type: 'value',
            min: 0.8,
            max: 0.95
        },
        series: [{
            data: mockData.equipmentEfficiency.map(item => item.efficiency),
            type: 'bar'
        }]
    };
    myChart.setOption(option);
}

// 新增生产线对比图表
function initLineComparisonChart() {
    const chartDom = document.getElementById('lineComparisonChart');
    const myChart = echarts.init(chartDom);
    const option = {
        title: {
            text: '生产线电力和气对比',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data: ['电力', '气']
        },
        xAxis: {
            type: 'category',
            data: mockData.lineComparison.map(item => item.name)
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '电力',
                type: 'bar',
                data: mockData.lineComparison.map(item => item.power)
            },
            {
                name: '气',
                type: 'bar',
                data: mockData.lineComparison.map(item => item.gas)
            }
        ]
    };
    myChart.setOption(option);
}

// 更新初始化所有图表的函数
function initCharts() {
    initPowerConsumptionChart();
    initEnergyTypeChart();
    initEnergyEfficiencyChart();
    initProductionLineChart();
    initEquipmentChart();
    initDailyPowerChart();
    initMonthlyGasChart();
    initEquipmentEfficiencyChart();
    initLineComparisonChart();
}

// 页面加载完成后初始化图表
window.onload = initCharts;

css样式


/* 全局样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Orbitron', sans-serif;
    background-color: #000;
    color: #0f0;
    min-height: 100vh;
    overflow-x: hidden;
}

/* 表头样式 */
header {
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px 0;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
    border-bottom: 2px solid #0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

header h1 {
    text-align: center;
    font-size: 2.5rem;
    text-shadow: 0 0 15px #0f0, 0 0 30px #0f0;
    letter-spacing: 3px;
    animation: neonGlow 1.5s ease-in-out infinite alternate;
}

@keyframes neonGlow {
    from {
        text-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 30px #0f0;
    }
    to {
        text-shadow: 0 0 20px #0f0, 0 0 40px #0f0, 0 0 60px #0f0;
    }
}

/* 时间显示样式 */
#timeDisplay {
    text-align: center;
    font-size: 1.2rem;
    text-shadow: 0 0 10px #0f0;
}

/* 图表容器样式 */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 30px;
}

.chart {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border: 2px solid #0f0;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
    height: 400px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.chart::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, rgba(0, 255, 0, 0.1), rgba(0, 255, 0, 0.3));
    transform-origin: bottom right;
    animation: rotate 6s linear infinite;
    opacity: 0.3;
}

.chart::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: #000;
    border-radius: 10px;
}

.chart:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 30px rgba(0, 255, 0, 0.5);
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 图表内容区域，确保内容显示在遮罩之上 */
.chart > * {
    position: relative;
    z-index: 10;
}