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;
}相关文章：
AI编写的“黑科技风格、自动刷新”的看板页面
以下的 index.html 、 script.js 和 styles.css 文件，实现一个具有黑科技风格、自动刷新的能源管理系统实时监控看板。 html页面 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name&q…...
11-DevOps-Jenkins Pipeline流水线作业
前面已经完成了，通过在Jenkins中创建自由风格的工程，在界面上的配置，完成了发布、构建的过程。 这种方式的缺点就是如果要在另一台机器上进行同样的配置，需要一项一项去填写，不方便迁移，操作比较麻烦。 解…...
23种设计模式-结构型模式之外观模式（Java版本）
Java 外观模式（Facade Pattern）详解 🧭 什么是外观模式？ 外观模式是结构型设计模式之一，为子系统中的一组接口提供一个统一的高层接口，使得子系统更易使用。 就像是酒店前台，帮你处理入住、叫…...
【JavaWeb后端开发03】MySQL入门
文章目录 1. 前言1.1 引言1.2 相关概念 2. MySQL概述2.1 安装2.2 连接2.2.1 介绍2.2.2 企业使用方式(了解) 2.3 数据模型2.3.1 **关系型数据库（RDBMS）**2.3.2 数据模型 3. SQL语句3.1 DDL语句3.1.1 数据库操作3.1.1.1 查询数据库3.1.1.2 创建数据库3.1.1…...
Github 热点项目 Jumpserver开源堡垒机让服务器管理效率翻倍
Jumpserver今日喜提160星，总星飙至2.6万！这个开源堡垒机有三大亮点：① 像哆啦A梦的口袋，支持多云服务器一站式管理；② 安全审计功能超硬核，操作记录随时可回放；③ 网页终端无需装插件࿰…...
第七届传智杯全国IT技能大赛程序设计赛道 国赛（总决赛）—— （B组）题解
1.小苯的木棍切割 【解析】首先我们先对数列排序，找到其中最小的数，那么我们就保证了对于任意一个第i1个的值都会大于第i个的值那么第i2个的值也比第i个大，那么我们第i1次切木棍的时候一定会当第i个的值就变为了0的，第i1减去的应该…...
Netty前置基础知识之BIO、NIO以及AIO理论详细解析和实战案例
前言 Netty是什么？ Netty 是一个基于 Java 的 高性能异步事件驱动网络应用框架，主要用于快速开发可维护的协议服务器和客户端。它简化了网络编程的复杂性，特别适合构建需要处理海量并发连接、低延迟和高吞吐量的分布式系统。 1)Netty 是…...
开源身份和访问管理（IAM）解决方案:Keycloak
一、Keycloak介绍 1、什么是 Keycloak？ Keycloak 是一个开源的身份和访问管理（Identity and Access Management - IAM）解决方案。它旨在为现代应用程序和服务提供安全保障，简化身份验证和授权过程。Keycloak 提供了集中式的用户…...
深入理解 TCP 协议 | 流量、拥塞及错误控制机制
注：本文为 “TCP 协议” 相关文章合辑。 原文为繁体，注意术语描述差异。 略作重排，如有内容异常，请看原文。 作者在不同的文章中互相引用其不同文章，一并汇总于此。 可从本文右侧目录直达本文主题相关的部分ÿ…...
VSCode远程图形化GDB
VSCode远程图形化GDB 摘要一、安装VSCode1、使用.exe安装包安装VSCode2、VSCode 插件安装3、VSCode建立远程连接 二、core dump找bug1、开启core文件2、永久生效的方法3、编写测试程序4、运行结果5、查看core段错误位置6、在程序中开启core dump并二者core文件大小 三、gdbserv…...
软件工程师中级考试-上午知识点总结（上）
我总结的这些都是每年的考点，必须要记下来的。 1. 计算机系统基础 1.1 码 符号位0表示正数，符号位1表示负数。补码：简化运算部件的设计，最适合进行数字加减运算。移码：与前几种不同，1表示，0表…...
Python+CoppeliaSim+ZMQ remote API控制机器人跳舞
这是一个使用Python和CoppeliaSim（V-REP）控制ASTI人型机器人进行舞蹈动作的演示项目。 项目描述 本项目展示了如何使用Python通过ZeroMQ远程API与CoppeliaSim仿真环境进行交互，控制ASTI人型机器人执行预定义的舞蹈动作序列。项目包含完整的机…...
基于FreeRTOS和STM32的微波炉
一、项目简介 使用STM32F103C8T6、舵机、继电器、加热片、蜂鸣器、两个按键、LCD及DHT11传感器等硬件。进一步，结合FreeRTOS和状态机等软件实现了一个微波炉系统；实现的功能包含：人机交互、时间及功率设置、异常情况处理及固件升级等。 二、…...
维度建模工具箱 提纲与总结
这里写自定义目录标题 基本概念事实表和维度表BI(Business Intelligence) 产品 事实表事实表的粒度事实表的种类 维度表建模技术基本原则避免用自然键作为维度表的主键，而要使用类似自增的整数键避免过度规范化避免变成形同事实表的维度表 SCD(Slowly Changed Dimen…...
【沉浸式求职学习day21】【常用类分享，完结！】
沉浸式求职学习 String类（完结） 和 equals的区别 StringBuffer日期类DateCalendar File类 String类（完结） 上次讲了一些创建String类实例的方法。 今天要分享的第一个点是常考的关于String的面试题 和 equals的区别 首先是&…...
国防科大清华城市空间无人机导航推理！GeoNav：赋予多模态大模型地理空间推理能力，实现语言指令导向的空中目标导航
作者： Haotian Xu 1 ^{1} 1, Yue Hu 1 ^{1} 1, Chen Gao 2 ^{2} 2, Zhengqiu Zhu 1 ^{1} 1, Yong Zhao 1 ^{1} 1, Yong Li 2 ^{2} 2, Quanjun Yin 1 ^{1} 1单位： 1 ^{1} 1国防科技大学系统工程学院， 2 ^{2} 2清华大学论文标题：Geo…...
uniapp打ios包
uniapp在windows电脑下申请证书并打包上架 前言 该开发笔记记录了在window系统下，在苹果开发者网站生成不同证书，进行uniapp打包调试和上线发布，对window用户友好 注：苹果打包涉及到两种证书：开发证书 和 分发证书 …...
Redis 的指令执行方式：Pipeline、事务与 Lua 脚本的对比
Pipeline 客户端将多条命令打包发送，服务器顺序执行并一次性返回所有结果。可以减少网络往返延迟（RTT）以提升吞吐量。 需要注意的是，Pipeline 中的命令按顺序执行，但中间可能被其他客户端的命令打断。 典型场景&…...
（14）VTK C++开发示例 --- 将点投影到平面上
文章目录 1. 概述2. CMake链接VTK3. main.cpp文件4. 演示效果 更多精彩内容👉内容导航 👈👉VTK开发 👈 1. 概述 计算一个点在一个平面上的投影。 vtkPlane 是 VTK（Visualization Toolkit）库中的一个类&…...
快速搭建 Cpolar 内网穿透（Mac 系统）
1、Cpolar快速入门教程（官方） 链接地址：Cpolar 快速入门 2、官方教程详解 本地安装homebrew /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"这个是从 git 上拉取的&#x…...
【Flink SQL实战】 UTC 时区格式的 ISO 时间转东八区时间
文章目录 一、原始数据格式二、解决方案三、其他要求 在实际开发中，我们常常会遇到此类情况：数据源里的时间格式是类似 2025-04-21T09:23:16.025Z 这种带 TimeZone 标识的 ISO 8601 格式，而我们需要在 Flink SQL 中将其转换成北京时间显示。 …...
动态监控进程
1.介绍: top和ps命令很相似,它们都是用来显示正在执行的进程,top和ps最大的不同之处,在于top在执行中可以更新正在执行的进程. 2.基本语法： top [选项] 选项说明 ⭐️僵死进程：内存没有释放,但是进程已经停止工作了,需要及时清理 交互操作说明 应用案…...
HADOOP 3.4.1安装和搭建（尚硅谷版~）
目录 1.配置模版虚拟机 2.克隆虚拟机 3.在hadoop102安装JDK 4.完全分布式运行模式 1.配置模版虚拟机 1.安装模板虚拟机，IP地址192.168.10.100、主机名称hadoop100、内存2G、硬盘20G（有需求的可以配置4G内存，50G硬盘） 2.hado…...
第 4 篇：平稳性 - 时间序列分析的基石
第 4 篇：平稳性 - 时间序列分析的基石 在上一篇中，我们学习了如何将时间序列分解为趋势、季节性和残差。我们看到，很多真实世界的时间序列（比如 CO2 浓度）都包含明显的趋势（长期向上或向下）和/…...
DeepSeek赋能Nuclei：打造网络安全检测的“超级助手”
引言 各位少侠，周末快乐，幸会幸会！ 今天唠一个超酷的技术组合——用AI大模型给Nuclei开挂，提升漏洞检测能力！ 想象一下，当出现新漏洞时，少侠们经常需要根据Nuclei模板，手动扒漏洞文章…...
分享一个python启动文件脚本（django示例）
今天给大家分享一个python启动文件脚本 在日常开发中，我们常常需要运行多条命令来完成“静态收集”“数据库迁移”“启动服务”……如果把这些命令整合到一个脚本里就好了 一、整体流程概览 #mermaid-svg-wA6UnfATaUOfJoPn {font-family:"trebuchet ms"…...
从0到1彻底掌握Trae：手把手带你实战开发AI Chatbot，提升开发效率的必备指南！
我正在参加Trae「超级体验官」创意实践征文， 本文所使用的 Trae 免费下载链接： www.trae.ai/?utm_source… 前言 大家好，我是小Q，字节跳动近期推出了一款 AI IDE—— Trae，由国人团队开发，并且限时免费体…...
3200温控板电路解析
提示：文章 文章目录 前言一、背景二、2.12.2 三、3.1 总结 前言 前期疑问： 本文目标： 一、背景 最近重温3200温控板电路设计和芯片选型 3200代码仓 二、 2.1 按照顺序整理，主要是依靠自己想到的来整理 1、传感器是pt1000&…...
opencv图片颜色识别，颜色的替换
图片颜色识别 1. RGB颜色空间2. 颜色加法2.1使用numpy对图像进行加法2.2使用opencv加法（cv2.add） 3 颜色加权加法（cv2.addWeighted()）4. HSV颜色空间5. 制作掩膜4. 与运算（cv2.bitwise_and）5.颜色的替换7 R…...
B实验-12
需要注意版本、页面源代码 两个文件一个目录：phpinfo robots phpmyadmin 实验12 靶机1 一个key在phpmyadmin，一个key在回收站 用两个扫描目录的工具扫，nmap给python版 情况1：弱口令 root root root 123456 …...