Elephant 在「航空公司机队运营态势图」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：Elephant
  • 用例名称：航空公司机队运营态势图
  • 测试类型：网页生成
  • 评测维度：仪表盘

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名资深前端开发工程师，专注于数据可视化仪表板与航空领域 Web 应用开发。 回答要求： 1. 所有代码（HTML、CSS、JavaScript）必须写在同一个 HTML 文件中，可直接在浏览器打开运行，无需任何外部依赖或服务器环境。 2. 页面打开即呈现完整内容，必须内置模拟数据（至少 8 条航班记录），禁止依赖外部 API 或数据源。 3. 使用语义化 HTML 结构，CSS 采用 Flex 或 Grid 布局，确保页面在 1280px 以上宽度下布局整洁美观。 4. 地图区域使用内联 SVG 实现，在固定坐标系内绘制简化的中国地图轮廓或矩形区域，并用图标标注飞机位置。 5. 代码结构清晰，CSS 与 JS 分别集中在 <style> 和 <script> 标签内，变量命名语义化，关键逻辑添加注释。 6. 视觉风格遵循航空专业主题：深蓝色主色调、白色/浅灰辅助色，状态颜色严格区分（绿/黄/红）。

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

请设计一个航空公司机队运营态势仪表板（基础版），所有代码写在单个 HTML 文件中，浏览器直接打开即可运行。 ## 页面布局要求 页面分为三个主要区域，整体采用深蓝色航空主题配色： ### 1. 顶部导航栏 - 显示航空公司 Logo 文字（如「天翼航空 · 运营指挥中心」） - 显示当前日期与时间（使用 JavaScript 实时更新，每秒刷新） - 深蓝色背景（#0a1628），白色文字 ### 2. 机队概览卡片区（三张卡片横向排列） - **总飞机数**：显示机队总数量（如 42 架），配飞机图标 - **飞行中**：显示当前在空飞机数量（如 18 架），绿色高亮数字 - **地面待命**：显示地面飞机数量（如 24 架），蓝色高亮数字 - 卡片需有悬停效果（hover 时轻微上移或阴影加深） ### 3. 主内容区（左右两栏布局） **左栏：航班状态列表（占 55% 宽度）** - 表格展示至少 8 条航班记录，包含以下列： - 航班号（如 TY-1023） - 出发机场 → 到达机场（如 北京PEK → 上海SHA） - 计划起飞时间 - 预计到达时间 - 当前状态（正常 / 延误 / 取消） - 状态列用彩色标签展示：绿色=正常、黄色=延误、红色=取消 - 表格行交替背景色，鼠标悬停高亮 **右栏：飞机分布示意图（占 45% 宽度）** - 使用内联 SVG 绘制一个简化的矩形地图区域（代表中国大陆范围） - 在 SVG 内用✈符号或小三角形标注至少 6 个飞机位置 - 用不同颜色区分飞行中（绿色）与地面（灰色）的飞机 - 标注 4-6 个主要机场名称（北京、上海、广州、成都等） - SVG 区域有边框和浅色网格背景 ## 数据要求 - 所有数据为硬编码的 JavaScript 模拟数据 - 航班状态分布：正常 ≥ 4 条、延误 2-3 条、取消 1-2 条 - 概览卡片数字需与列表数据逻辑一致 ## 视觉规范 - 主色：深蓝 #0a1628，次色：#1e3a5f，强调色：#00aaff - 正常状态：#00c853（绿），延误状态：#ffab00（黄），取消状态：#ff3d00（红） - 字体：系统无衬线字体，标题加粗 - 整体背景：#0d1f3c（深蓝灰）

任务要求

AI 模型需要满足以下要求：

  1. 三张概览卡片（总飞机数、飞行中、地面待命）数据完整展示，数字与航班列表数据逻辑一致，卡片具有 hover 交互效果。
  2. 航班状态列表包含至少 8 条记录，覆盖全部三种状态（正常/延误/取消），状态标签使用规定的绿/黄/红三色彩色标签，表格具备交替行色与悬停高亮。
  3. SVG 地图区域正确渲染，包含至少 6 个飞机位置标注、4 个机场标签，飞行中与地面飞机用不同颜色区分。
  4. 顶部时钟使用 JavaScript 实时更新（每秒刷新），页面整体配色符合深蓝色航空主题规范（主色
  5. 页面在 1280px 宽度下三栏/两栏布局正确，无元素溢出或重叠，CSS 使用 Flex 或 Grid 实现响应式结构。
  6. 代码结构清晰：CSS 集中在 <style> 标签、JS 集中在 <script> 标签，模拟数据以数组/对象形式集中定义，关键逻辑有注释。

评测结果

综合得分

该模型在此用例的得分为：92.9 分（满分 100 分），已通过

基础难度评测结果

  • 得分：92.9 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 航空公司机队运营态势仪表板 /* --- 全局与基础样式 --- */ :root { --bg-primary: #0d1f3c; --nav-bg: #0a1628; --card-bg: #153152; --border-color: #1e3a5f; --text-main: #ffffff; --text-secondary: #a0b0c0; --accent: #00aaff; --green: #00c853; --yellow: #ffab00; --red: #ff3d00; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-primary); color: var(--text-main); line-height: 1.6; } /* --- 布局容器 --- */ .dashboard { display: grid; grid-template-rows: auto 1fr; min-height: 100vh; gap: 20px; padding: 20px; } /* --- 1. 顶部导航栏 --- */ .top-nav { background-color: var(--nav-bg); padding: 15px 30px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .logo { font-size: 1.5rem; font-weight: bold; color: var(--text-main); } .datetime { font-size: 1rem; color: var(--text-secondary); font-family: monospace; } /* --- 2. 机队概览卡片区 --- */ .fleet-summary { display: flex; gap: 20px; padding: 20px 0; } .summary-card { flex: 1; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .summary-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); } .summary-card-icon { font-size: 2.5rem; margin-bottom: 10px; } .summary-card-value { font-size: 2rem; font-weight: bold; } .summary-card-label { font-size: 1rem; color: var(--text-secondary); } /* 状态颜色 */ .in-flight .summary-card-value { color: var(--green); } .on-ground .summary-card-value { color: var(--accent); } /* --- 3. 主内容区 --- */ .main-content { display: grid; grid-template-columns: 55% 45%; gap: 20px; height: 0; /* 关键：启用网格布局，1fr会失效，使用minmax控制 */ } .panel { background-color: var(--card-bg);...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【GEMINI】这是一个高质量的交付结果。模型不仅完全满足了所有硬性指标（如单文件运行、特定布局比例、数据分布要求），还在视觉表现力上超出了预期。代码组织严谨，模拟数据的处理逻辑合理，SVG 地图的实现方式（使用 JS 动态生成元素）体现了深厚的前端功底。 【KIMI】该航空公司机队运营监控仪表板整体设计专业，功能实现完整，代码结构清晰。视觉风格遵循航空专业主题，布局整洁美观。三大功能模块均满足要求，概览卡片、航班列表、SVG地图均完整实现，数据逻辑一致。页面交互响应流畅，时钟实时更新，卡片hover效果良好。代码结构合理，CSS/JS分离，数据集中定义，关键逻辑有注释。但在SVG地图的飞机动画实现上还有改进空间，建议优化飞机图标的动画效果，提升交互体验。

进阶难度评测结果

  • 得分：89.0 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 航空公司机队运营监控中心 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Microsoft YaHei', sans-serif; background: #0a1628; color: #e0e6ed; overflow-x: hidden; min-height: 100vh; } /* 顶部警报栏 */ .alert-bar { background: rgba(20, 30, 48, 0.95); border-bottom: 1px solid #1e90ff; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(10px); } .alert-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: bold; color: #ffd600; } .alert-count { background: #ff1744; border-radius: 10px; padding: 2px 8px; font-size: 12px; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .alert-list { display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; } .alert-item { background: rgba(255, 23, 68, 0.1); border-left: 3px solid #ff1744; padding: 8px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all 0.3s ease; display: flex; justify-content: space-between; align-items: center; } .alert-item:hover { background: rgba(255, 23, 68, 0.2); transform: translateX(-5px); } .alert-item .close-btn { background: none; border: none; color: #ff1744; cursor: pointer; font-size: 14px; opacity: 0.6; transition: opacity 0.3s; } .alert-item .close-btn:hover { opacity: 1; } /* 时间筛选器 */ .time-filter { display: flex; gap: 10px; margin: 20px 0; } .filter-btn { background: rgba(30, 144, 255, 0.1); border: 1px solid #1e90ff; color: #1e90ff; padding: 8px 20px; border-radius: 20px; cursor: pointer; transition: all 0.3s ease; font-size: 14px; } .filter-btn.active, .filter-btn:hover { background: #1e90ff; color: white; } /* 主布局 */ .main-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 20px; padding: 20px; max-width: 1920px; margin: 0 auto; } /* 卡片通用样式 */ .card { background: rgba(20, 30, 48, 0.8); border: 1px solid...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【GEMINI】这是一份非常优秀的高级前端开发实现。代码结构清晰，功能模块划分明确，完全满足了单文件运行、CDN 引入、模拟数据驱动等所有硬性要求。在数据逻辑上表现尤为突出，不仅实现了视觉上的动态，还通过 JavaScript 维护了真实的状态机（如机组筛选、警报队列）。视觉设计大气且符合行业特征，是一个可以直接投入演示的航空运营监控原型。 【KIMI】该实现在功能完整性、交互逻辑和视觉表现方面均表现良好，基本满足题目要求。核心功能模块实现完整，动态数据逻辑正确，交互响应流畅，视觉风格符合航空运营主题。但在细节处理和视觉效果上仍有提升空间，如优化弹窗关闭事件处理，进一步提升SVG地图的专业感。

困难难度评测结果

  • 得分：82.7 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 航空公司综合运营指挥中心 /* ========== 全局重置与基础样式 ========== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg-primary: #0a1628; --bg-secondary: #0d2137; --bg-card: #112240; --bg-card-hover: #173a68; --border-color: #1e3a5f; --accent-cyan: #00d4ff; --accent-orange: #ff6b35; --accent-green: #00e877; --accent-red: #ff3366; --accent-yellow: #ffcc00; --text-primary: #e0f0ff; --text-secondary: #88aabb; --text-dim: #557799; --shadow-glow: 0 0 12px rgba(0, 212, 255, 0.3); --font-main: 'Segoe UI', 'Microsoft YaHei', sans-serif; } html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-main); } /* ========== 顶部导航栏 ========== */ .top-nav { position: fixed; top: 0; left: 0; right: 0; height: 56px; background: linear-gradient(180deg, #0b1a30 0%, #0d2540 100%); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; z-index: 1000; box-shadow: 0 2px 16px rgba(0,0,0,0.5); } .top-nav .logo { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; color: var(--accent-cyan); letter-spacing: 1px; } .top-nav .logo svg { width: 28px; height: 28px; } .top-nav .status-bar { display: flex; align-items: center; gap: 28px; font-size: 12px; } .top-nav .status-item { display: flex; align-items: center; gap: 6px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; animation: pulse 2s infinite; } .status-dot.online { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); } .status-dot.warning { background: var(--accent-yellow); box-shadow: 0 0 6px var(--accent-yellow); } .status-dot.critical { background: var(--accent-red); box-shadow: 0 0 8px var(--accent-red); animation: blink 1s infinite; } .last-update { color: var(--text-dim); font-size: 11px; } .last-update span { color: var(--accent-cyan); font-weight: 600; } /* ========== 通知栏 ========== */ .alert-bar {...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【GEMINI】这是一个高质量的单文件可视化大屏方案。代码结构清晰，模块化程度高，成功整合了 ECharts 和 ECharts GL 实现复杂的 3D 地图交互。视觉效果极佳，完美契合航空指挥中心的主题。虽然在部分复杂交互逻辑（如航线插值动画、真实甘特图渲染）上做了简化处理，且部分数据量未完全达到 prompt 要求的上限，但作为一个独立运行的演示系统，其完整度和专业性非常出色。 【KIMI】代码整体上实现了航空公司综合运营指挥中心的核心功能和交互逻辑，界面布局合理，视觉设计专业。但在部分功能实现和交互逻辑上还有改进空间，如完善模拟数据自动更新逻辑，加强AI建议的逻辑可感知性等。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%