|
|
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>中山智能立体仓库可视化监控中心</title> <!-- ECharts --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script> <script src="/jeasyui/jquery.min.js"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Microsoft YaHei', Arial, sans-serif; background: linear-gradient(135deg, #0a1628 0%, #1e3a5f 50%, #0a1628 100%); color: #fff; overflow: hidden; height: 100vh; } .dashboard-container { width: 100%; height: 100vh; padding: 20px; display: flex; flex-direction: column; } /* 头部标题 */ .header { text-align: center; padding: 15px 0; background: linear-gradient(90deg, rgba(14, 116, 144, 0.2) 0%, rgba(14, 116, 144, 0.6) 50%, rgba(14, 116, 144, 0.2) 100%); border-bottom: 2px solid rgba(0, 204, 255, 0.5); margin-bottom: 20px; position: relative; } .header h1 { font-size: 32px; font-weight: bold; letter-spacing: 3px; background: linear-gradient(to right, #00d4ff, #00ffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px rgba(0, 212, 255, 0.5); } .header .subtitle { font-size: 14px; color: #7dd3fc; letter-spacing: 8px; margin-top: 5px; } .header .datetime { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); color: #7dd3fc; font-size: 14px; } /* 主内容区域 */ .main-content { flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 300px 1fr; gap: 20px; height: calc(100vh - 140px); } /* 卡片样式 */ .card { background: rgba(13, 35, 58, 0.7); border: 1px solid rgba(0, 204, 255, 0.3); border-radius: 8px; padding: 15px; backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #00d4ff, transparent); } .card-title { font-size: 16px; color: #00d4ff; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 204, 255, 0.2); display: flex; justify-content: space-between; align-items: center; } .card-title .en { font-size: 11px; color: #7dd3fc; font-weight: normal; letter-spacing: 1px; } /* 任务统计总览 */ .task-overview { grid-column: 1; grid-row: 1; } .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; } .stat-item { background: rgba(0, 100, 150, 0.2); padding: 15px; border-radius: 5px; border: 1px solid rgba(0, 204, 255, 0.3); text-align: center; } .stat-icon { font-size: 28px; margin-bottom: 8px; } .stat-label { font-size: 12px; color: #7dd3fc; margin-bottom: 5px; } .stat-value { font-size: 28px; font-weight: bold; color: #00d4ff; } .stat-percent { font-size: 14px; color: #4ade80; margin-top: 5px; } .status-row { display: flex; justify-content: space-around; margin-top: 10px; } .status-item { text-align: center; padding: 10px; background: rgba(0, 100, 150, 0.2); border-radius: 5px; flex: 1; margin: 0 5px; } .status-item .label { font-size: 11px; color: #7dd3fc; } .status-item .value { font-size: 22px; font-weight: bold; color: #fff; margin-top: 5px; } /* 库位利用率分析 */ .storage-utilization { grid-column: 2; grid-row: 1; } .util-header { display: flex; justify-content: space-around; margin-bottom: 15px; } .util-item { text-align: center; } .util-item .label { font-size: 12px; color: #7dd3fc; } .util-item .value { font-size: 24px; font-weight: bold; color: #00d4ff; margin-top: 5px; } .util-item .percent { font-size: 28px; color: #4ade80; } #storageChart { width: 100%; height: 180px; } /* 设备运行状态 */ .device-status { grid-column: 3; grid-row: 1; } .device-group { margin-bottom: 15px; } .device-group-title { font-size: 13px; color: #7dd3fc; margin-bottom: 8px; display: flex; align-items: center; } .device-group-title::before { content: '●'; margin-right: 5px; color: #00d4ff; } .device-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; margin-bottom: 5px; background: rgba(0, 100, 150, 0.2); border-radius: 4px; border-left: 3px solid transparent; } .device-item.working { border-left-color: #4ade80; } .device-item.idle { border-left-color: #fbbf24; } .device-item.charging { border-left-color: #3b82f6; } .device-name { font-size: 13px; color: #fff; } .device-info { display: flex; align-items: center; gap: 15px; } .device-status-badge { font-size: 11px; padding: 3px 8px; border-radius: 3px; display: flex; align-items: center; } .device-status-badge::before { content: '●'; margin-right: 4px; } .device-status-badge.working { background: rgba(74, 222, 128, 0.2); color: #4ade80; } .device-status-badge.idle { background: rgba(251, 191, 36, 0.2); color: #fbbf24; } .device-status-badge.charging { background: rgba(59, 130, 246, 0.2); color: #3b82f6; } .device-battery { font-size: 11px; color: #7dd3fc; } .device-tasks { font-size: 11px; color: #7dd3fc; } /* 趋势图表 */ .trend-chart { height: 100%; } #rawMaterialChart, #specifiedMaterialChart, #finishedGoodsChart { width: 100%; height: calc(100% - 45px); min-height: 250px; } /* 返回按钮 */ .back-btn { position: absolute; top: 20px; left: 20px; padding: 10px 20px; background: rgba(0, 100, 150, 0.5); border: 1px solid rgba(0, 204, 255, 0.5); border-radius: 5px; color: #00d4ff; text-decoration: none; font-size: 14px; transition: all 0.3s; z-index: 1000; } .back-btn:hover { background: rgba(0, 150, 200, 0.8); box-shadow: 0 0 15px rgba(0, 204, 255, 0.5); } </style></head><body> <a href="/" class="back-btn">← 返回主页</a> <div class="dashboard-container"> <!-- 头部 --> <div class="header"> <h1>中山智能立体仓库可视化监控中心</h1> <div class="subtitle">ZHONGSHAN INTELLIGENT 3D WAREHOUSE VISUALIZATION & MONITORING CENTER</div> <div class="datetime" id="datetime"></div> </div> <!-- 主内容 --> <div class="main-content"> <!-- 任务统计总览 --> <div class="card task-overview"> <div class="card-title"> <span>任务统计总览</span> <span class="en">TASK OVERVIEW</span> </div> <div class="stats-grid"> <div class="stat-item"> <div class="stat-icon">📋</div> <div class="stat-label">月度作业数</div> <div class="stat-value">2969</div> </div> <div class="stat-item"> <div class="stat-icon">📊</div> <div class="stat-label">当日作业数</div> <div class="stat-value">770</div> </div> </div> <div class="stats-grid"> <div class="stat-item"> <div class="stat-icon">📦</div> <div class="stat-label">出库作业</div> <div class="stat-value">1023</div> <div class="stat-percent">34%</div> </div> <div class="stat-item"> <div class="stat-icon">📥</div> <div class="stat-label">入库作业</div> <div class="stat-value">1946</div> <div class="stat-percent">65%</div> </div> </div> <div style="margin-top: 10px; padding: 10px; background: rgba(0, 100, 150, 0.2); border-radius: 5px;"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;"> <span style="font-size: 12px; color: #7dd3fc;">空托盘总数</span> <span style="font-size: 18px; font-weight: bold; color: #fbbf24;">148</span> </div> <div class="status-row"> <div class="status-item"> <div class="label">平托盘</div> <div class="value" style="color: #4ade80;">40</div> </div> <div class="status-item"> <div class="label">圆框托盘</div> <div class="value" style="color: #a78bfa;">59</div> </div> <div class="status-item"> <div class="label">钢托盘</div> <div class="value" style="color: #fb923c;">49</div> </div> </div> </div> </div> <!-- 库位利用率分析 --> <div class="card storage-utilization"> <div class="card-title"> <span>库位利用率分析</span> <span class="en">STORAGE UTILIZATION</span> </div> <div class="util-header"> <div class="util-item"> <div class="label">总库位数</div> <div class="value">1960</div> </div> <div class="util-item"> <div class="label">已使用</div> <div class="value">708</div> </div> <div class="util-item"> <div class="label">利用率</div> <div class="percent">36.1%</div> </div> </div> <div id="storageChart"></div> </div> <!-- 设备运行状态 --> <div class="card device-status"> <div class="card-title"> <span>设备运行状态</span> <span class="en">DEVICE STATUS</span> </div> <div class="device-group"> <div class="device-group-title">🤖 拣选机器人</div> <div class="device-item working"> <div class="device-name">机器人#1</div> <div class="device-info"> <div class="device-status-badge working">工作中</div> <div class="device-tasks">任务:2</div> </div> </div> <div class="device-item working"> <div class="device-name">机器人#2</div> <div class="device-info"> <div class="device-status-badge working">工作中</div> <div class="device-tasks">任务:4</div> </div> </div> </div> <div class="device-group"> <div class="device-group-title">🚗 AGV搬运车</div> <div class="device-item idle"> <div class="device-name">AGV#34703</div> <div class="device-info"> <div class="device-status-badge idle">空闲</div> <div class="device-battery">电量:84%</div> </div> </div> <div class="device-item working"> <div class="device-name">AGV#34705</div> <div class="device-info"> <div class="device-status-badge working">运行中</div> <div class="device-battery">电量:68%</div> <div class="device-tasks">任务:1</div> </div> </div> <div class="device-item working"> <div class="device-name">AGV#34706</div> <div class="device-info"> <div class="device-status-badge working">运行中</div> <div class="device-battery">电量:73%</div> <div class="device-tasks">任务:1</div> </div> </div> <div class="device-item charging"> <div class="device-name">AGV#34704</div> <div class="device-info"> <div class="device-status-badge charging">充电中</div> <div class="device-battery">电量:71%</div> <div class="device-tasks">任务:0</div> </div> </div> </div> </div> <!-- 原材料库存量趋势 --> <div class="card trend-chart"> <div class="card-title"> <span>原材料库存量趋势</span> <span class="en">RAW MATERIAL INVENTORY TREND</span> </div> <div id="rawMaterialChart"></div> </div> <!-- 规格料库存量趋势 --> <div class="card trend-chart"> <div class="card-title"> <span>规格料库存量趋势</span> <span class="en">SPECIFIED MATERIALS INVENTORY TREND</span> </div> <div id="specifiedMaterialChart"></div> </div> <!-- 产成品库存趋势 --> <div class="card trend-chart"> <div class="card-title"> <span>产成品库存趋势</span> <span class="en">FINISHED GOODS INVENTORY TREND</span> </div> <div id="finishedGoodsChart"></div> </div> </div> </div> <script> // 更新时间 function updateDateTime() { var now = new Date(); var year = now.getFullYear(); var month = String(now.getMonth() + 1).padStart(2, '0'); var day = String(now.getDate()).padStart(2, '0'); var hours = String(now.getHours()).padStart(2, '0'); var minutes = String(now.getMinutes()).padStart(2, '0'); var seconds = String(now.getSeconds()).padStart(2, '0'); var weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; var weekday = weekdays[now.getDay()]; document.getElementById('datetime').innerHTML = '● ' + year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds + ' ' + weekday; } updateDateTime(); setInterval(updateDateTime, 1000); // 等待页面加载完成后初始化图表 var storageChart, rawMaterialChart, specifiedMaterialChart, finishedGoodsChart; window.addEventListener('load', function() { initCharts(); }); function initCharts() { // 库位利用率饼图 storageChart = echarts.init(document.getElementById('storageChart')); var storageOption = { tooltip: { trigger: 'item', backgroundColor: 'rgba(0, 20, 40, 0.9)', borderColor: '#00d4ff', borderWidth: 1, textStyle: { color: '#fff' } }, legend: { orient: 'vertical', right: '10%', top: 'center', textStyle: { color: '#7dd3fc', fontSize: 11 }, itemWidth: 10, itemHeight: 10 }, series: [ { type: 'pie', radius: ['45%', '70%'], center: ['35%', '50%'], avoidLabelOverlap: false, label: { show: false }, labelLine: { show: false }, data: [ { value: 1252, name: '用库位数 (1252)', itemStyle: { color: '#1e3a5f' } }, { value: 268, name: '钢托盘 (268)', itemStyle: { color: '#00d4ff' } }, { value: 156, name: '圆框托盘 (156)', itemStyle: { color: '#a855f7' } }, { value: 284, name: '平托盘 (284)', itemStyle: { color: '#4ade80' } } ] } ] }; storageChart.setOption(storageOption); // 原材料库存量趋势 rawMaterialChart = echarts.init(document.getElementById('rawMaterialChart')); var rawMaterialOption = { grid: { left: '8%', right: '5%', bottom: '12%', top: '5%' }, xAxis: { type: 'category', data: ['1日', '3日', '5日', '7日', '9日', '11日', '13日', '15日', '17日', '19日', '21日', '23日', '25日', '27日', '29日', '31日'], axisLine: { lineStyle: { color: 'rgba(0, 204, 255, 0.3)' } }, axisLabel: { color: '#7dd3fc', fontSize: 10 } }, yAxis: { type: 'value', axisLine: { lineStyle: { color: 'rgba(0, 204, 255, 0.3)' } }, splitLine: { lineStyle: { color: 'rgba(0, 204, 255, 0.1)' } }, axisLabel: { color: '#7dd3fc', fontSize: 10 } }, series: [{ data: [10000, 50000, 100000, 200000, 300000, 400000, 500000, 600000, 650000, 700000, 750000, 800000, 850000, 900000, 920000, 950000], type: 'line', smooth: true, lineStyle: { color: '#00d4ff', width: 2 }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(0, 212, 255, 0.3)' }, { offset: 1, color: 'rgba(0, 212, 255, 0.05)' } ]) }, symbol: 'circle', symbolSize: 6, itemStyle: { color: '#00d4ff', borderColor: '#fff', borderWidth: 2 } }] }; rawMaterialChart.setOption(rawMaterialOption); // 规格料库存量趋势 specifiedMaterialChart = echarts.init(document.getElementById('specifiedMaterialChart')); var specifiedMaterialOption = { grid: { left: '8%', right: '5%', bottom: '12%', top: '5%' }, xAxis: { type: 'category', data: ['1日', '3日', '5日', '7日', '9日', '11日', '13日', '15日', '17日', '19日', '21日', '23日', '25日', '27日', '29日', '31日'], axisLine: { lineStyle: { color: 'rgba(0, 204, 255, 0.3)' } }, axisLabel: { color: '#7dd3fc', fontSize: 10 } }, yAxis: { type: 'value', axisLine: { lineStyle: { color: 'rgba(0, 204, 255, 0.3)' } }, splitLine: { lineStyle: { color: 'rgba(0, 204, 255, 0.1)' } }, axisLabel: { color: '#7dd3fc', fontSize: 10 } }, series: [{ data: [10000, 20000, 30000, 40000, 50000, 60000, 70000, 80000, 90000, 100000, 120000, 140000, 150000, 270000, 280000, 275000], type: 'line', smooth: true, lineStyle: { color: '#4ade80', width: 2 }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(74, 222, 128, 0.3)' }, { offset: 1, color: 'rgba(74, 222, 128, 0.05)' } ]) }, symbol: 'circle', symbolSize: 6, itemStyle: { color: '#4ade80', borderColor: '#fff', borderWidth: 2 } }] }; specifiedMaterialChart.setOption(specifiedMaterialOption); // 产成品库存趋势 finishedGoodsChart = echarts.init(document.getElementById('finishedGoodsChart')); var finishedGoodsOption = { grid: { left: '8%', right: '5%', bottom: '12%', top: '5%' }, xAxis: { type: 'category', data: ['1日', '3日', '5日', '7日', '9日', '11日', '13日', '15日', '17日', '19日', '21日', '23日', '25日', '27日', '29日', '31日'], axisLine: { lineStyle: { color: 'rgba(0, 204, 255, 0.3)' } }, axisLabel: { color: '#7dd3fc', fontSize: 10 } }, yAxis: { type: 'value', axisLine: { lineStyle: { color: 'rgba(0, 204, 255, 0.3)' } }, splitLine: { lineStyle: { color: 'rgba(0, 204, 255, 0.1)' } }, axisLabel: { color: '#7dd3fc', fontSize: 10 } }, series: [{ data: [500000, 1000000, 2000000, 3000000, 3500000, 4000000, 4500000, 5000000, 5500000, 6000000, 7000000, 10000000, 15000000, 20000000, 22000000, 24000000], type: 'line', smooth: true, lineStyle: { color: '#a855f7', width: 2 }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(168, 85, 247, 0.3)' }, { offset: 1, color: 'rgba(168, 85, 247, 0.05)' } ]) }, symbol: 'circle', symbolSize: 6, itemStyle: { color: '#a855f7', borderColor: '#fff', borderWidth: 2 } }] }; finishedGoodsChart.setOption(finishedGoodsOption); // 响应式调整 window.addEventListener('resize', function() { storageChart.resize(); rawMaterialChart.resize(); specifiedMaterialChart.resize(); finishedGoodsChart.resize(); }); // 定时刷新数据（模拟实时更新） setInterval(function() { // 这里可以添加AJAX请求获取实时数据 // 目前使用静态数据展示 }, 5000); } </script></body></html>
|
