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;
}