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

向上的车轮2025-04-18 13:08

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

html页面

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脚本

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样式

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;
}
相关推荐
产业家5 分钟前
Sora 后思考：从 AI 工具到 AI 平台，产业 AGI 又近了一步
人工智能·chatgpt·agi
量化交易曾小健(金融号)9 分钟前
人大计算金融课程名称：《机器学习》（题库）/《大数据与机器学习》（非题库） 姜昊教授
人工智能
IT_陈寒16 分钟前
Redis 性能翻倍的 5 个隐藏技巧，99% 的开发者都不知道第3点！
前端·人工智能·后端
W_chuanqi19 分钟前
RDEx：一种效果驱动的混合单目标优化器，自适应选择与融合多种算子与策略
人工智能·算法·机器学习·性能优化
好奇龙猫20 分钟前
[AI学习：SPIN -win-安装SPIN-工具过程 SPIN win 电脑安装=accoda 环境-第四篇：代码修复]
人工智能·学习
Pocker_Spades_A29 分钟前
AI搜索自由：Perplexica+cpolar构建你的私人知识引擎
人工智能
~kiss~30 分钟前
图像的脉冲噪声和中值滤波
图像处理·人工智能·计算机视觉
居7然33 分钟前
DeepSeek-7B-chat 4bits量化 QLora 微调
人工智能·分布式·架构·大模型·transformer
卡奥斯开源社区官方35 分钟前
OpenAI万亿美元计划技术拆解：AI智能体的架构演进与商业化实践
人工智能
熊猫钓鱼>_>39 分钟前
AI驱动的专业报告撰写：从信息整合到洞察生成的全新范式
大数据·人工智能·百度
热门推荐
01BongoCat - 跨平台键盘猫动画工具02GitHub 镜像站点03UV安装并设置国内源04两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答05Linux下V2Ray安装配置指南06KGG转MP3工具|非KGM文件|解密音频07GitLab 零基础入门指南：从安装到项目管理全流程08荣耀手机2025年10月发布的新品Magic8比起Magic7，在硬件、性能、价格等上有什么区别，有什么优势09windows找不到gpedit.msc（本地组策略编辑器）10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）