385 lines
17 KiB
HTML
385 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>神东煤炭综采工作面数据管理与AI分析系统</title>
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
</head>
|
||
<body>
|
||
<!-- 顶部导航栏 -->
|
||
<nav class="navbar">
|
||
<div class="navbar-brand">
|
||
<span class="logo">⛏️</span>
|
||
<span class="title">神东煤炭综采工作面数据管理与AI分析系统</span>
|
||
</div>
|
||
<div class="navbar-menu">
|
||
<a href="#dashboard" class="active" data-page="dashboard">首页概览</a>
|
||
<a href="#collect" data-page="collect">数据采集</a>
|
||
<a href="#monitor" data-page="monitor">实时监测</a>
|
||
<a href="#analysis" data-page="analysis">AI分析</a>
|
||
<a href="#report" data-page="report">报告生成</a>
|
||
</div>
|
||
<div class="navbar-info">
|
||
<span id="current-time"></span>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主内容区 -->
|
||
<main class="main-content">
|
||
|
||
<!-- 首页概览 -->
|
||
<section id="dashboard" class="page active">
|
||
<div class="page-header">
|
||
<h1>系统概览</h1>
|
||
<p class="subtitle">综采工作面设备运行状态总览</p>
|
||
</div>
|
||
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">🏭</div>
|
||
<div class="stat-info">
|
||
<div class="stat-value" id="unit-count">0</div>
|
||
<div class="stat-label">工作面数量</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">📊</div>
|
||
<div class="stat-info">
|
||
<div class="stat-value" id="tag-count">0</div>
|
||
<div class="stat-label">监测点总数</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">🔄</div>
|
||
<div class="stat-info">
|
||
<div class="stat-value" id="total-collects">0</div>
|
||
<div class="stat-label">总采集次数</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">📅</div>
|
||
<div class="stat-info">
|
||
<div class="stat-value" id="today-collects">0</div>
|
||
<div class="stat-label">今日采集</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon">📝</div>
|
||
<div class="stat-info">
|
||
<div class="stat-value" id="data-total">0</div>
|
||
<div class="stat-label">总数据量</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 工作面详细统计 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>工作面统计</h2>
|
||
<button class="btn btn-sm btn-primary" onclick="loadAllStats()">刷新</button>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="unit-stats-table" class="data-table-container">
|
||
<p>加载中...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 原工作面列表和采集状态移到下方 -->
|
||
<div class="dashboard-grid">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>工作面列表</h2>
|
||
<button class="btn btn-sm btn-primary" onclick="loadUnits()">刷新</button>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="unit-list" class="unit-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>最新采集状态</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="collect-status" class="collect-status">
|
||
<p>暂无采集记录</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 数据采集 -->
|
||
<section id="collect" class="page">
|
||
<div class="page-header">
|
||
<h1>数据采集</h1>
|
||
<p class="subtitle">从工业以太网采集综采工作面实时数据</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>单工作面采集</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<form id="collect-form" class="form-inline">
|
||
<div class="form-group">
|
||
<label>选择工作面</label>
|
||
<select id="collect-unit" class="form-select" required>
|
||
<option value="">请选择工作面</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>设备类型（可选）</label>
|
||
<select id="collect-device" class="form-select">
|
||
<option value="">全部设备</option>
|
||
<option value="采煤机">采煤机</option>
|
||
<option value="刮板输送机">刮板输送机</option>
|
||
<option value="液压支架">液压支架</option>
|
||
<option value="乳化液泵站">乳化液泵站</option>
|
||
<option value="开关">开关</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group form-group-btn">
|
||
<label> </label>
|
||
<button type="submit" class="btn btn-primary" id="collect-btn">
|
||
<span class="btn-text">开始采集</span>
|
||
<span class="btn-loading" style="display:none">采集中...</span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>批量采集</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<p>对所有工作面进行一次全量数据采集。</p>
|
||
<button class="btn btn-warning" onclick="collectAll()" id="collect-all-btn">
|
||
全量采集
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>采集日志</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="collect-log" class="log-container">
|
||
<p class="log-info">等待采集...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 实时监测 -->
|
||
<section id="monitor" class="page">
|
||
<div class="page-header">
|
||
<h1>实时监测</h1>
|
||
<p class="subtitle">查看工作面设备实时运行数据</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>选择监测工作面</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="form-inline">
|
||
<div class="form-group">
|
||
<label>工作面</label>
|
||
<select id="monitor-unit" class="form-select" onchange="loadRealtimeData()">
|
||
<option value="">请选择工作面</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>设备筛选</label>
|
||
<select id="monitor-filter" class="form-select" onchange="filterRealtimeData()">
|
||
<option value="">全部设备</option>
|
||
<option value="采煤机">采煤机</option>
|
||
<option value="三机">三机</option>
|
||
<option value="泵站">泵站</option>
|
||
<option value="开关">开关</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>搜索</label>
|
||
<input type="text" id="monitor-search" class="form-input"
|
||
placeholder="搜索标签名称..." oninput="filterRealtimeData()">
|
||
</div>
|
||
<div class="form-group form-group-btn">
|
||
<label> </label>
|
||
<button class="btn btn-primary" onclick="loadRealtimeData()">刷新数据</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>实时数据</h2>
|
||
<span id="monitor-time" class="badge badge-info"></span>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="realtime-data" class="data-table-container">
|
||
<p>请选择工作面查看实时数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AI分析 -->
|
||
<section id="analysis" class="page">
|
||
<div class="page-header">
|
||
<h1>AI智能分析</h1>
|
||
<p class="subtitle">利用AI大模型进行故障诊断和趋势分析</p>
|
||
</div>
|
||
|
||
<div class="analysis-grid">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>🔧 故障诊断</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<p class="desc">对当前实时数据进行故障识别、原因分析和维修建议。</p>
|
||
<form id="fault-form" class="form-vertical">
|
||
<div class="form-group">
|
||
<label>选择工作面</label>
|
||
<select id="fault-unit" class="form-select" required>
|
||
<option value="">请选择工作面</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>选择AI模型</label>
|
||
<select id="fault-model" class="form-select">
|
||
<option value="">默认模型</option>
|
||
</select>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary" id="fault-btn">
|
||
开始诊断
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>📈 趋势分析</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<p class="desc">对历史数据进行趋势分析，预测设备状态变化。</p>
|
||
<form id="trend-form" class="form-vertical">
|
||
<div class="form-group">
|
||
<label>选择工作面</label>
|
||
<select id="trend-unit" class="form-select" required>
|
||
<option value="">请选择工作面</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>时间范围</label>
|
||
<div class="time-range">
|
||
<input type="datetime-local" id="trend-start" class="form-input" required>
|
||
<span>至</span>
|
||
<input type="datetime-local" id="trend-end" class="form-input" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>选择AI模型</label>
|
||
<select id="trend-model" class="form-select">
|
||
<option value="">默认模型</option>
|
||
</select>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary" id="trend-btn">
|
||
开始分析
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据摘要区域 -->
|
||
<div class="card" id="data-summary-card" style="display:none;">
|
||
<div class="card-header">
|
||
<h2>📋 AI分析数据摘要</h2>
|
||
<span class="badge badge-info" id="summary-data-count"></span>
|
||
</div>
|
||
<div class="card-body">
|
||
<p class="desc">以下是本次AI分析所使用的数据摘要（已使用中文名称）：</p>
|
||
<div id="data-summary-content" class="data-summary-content"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>分析结果</h2>
|
||
<button class="btn btn-sm btn-secondary" onclick="copyResult()">复制结果</button>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="analysis-result" class="analysis-result">
|
||
<p class="text-muted">分析结果将在此显示...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 报告生成 -->
|
||
<section id="report" class="page">
|
||
<div class="page-header">
|
||
<h1>报告生成</h1>
|
||
<p class="subtitle">生成设备运维分析报告，支持Word格式导出</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>生成Word报告</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<form id="report-form" class="form-inline">
|
||
<div class="form-group">
|
||
<label>选择工作面</label>
|
||
<select id="report-unit" class="form-select" required>
|
||
<option value="">请选择工作面</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>报告类型</label>
|
||
<select id="report-type" class="form-select">
|
||
<option value="full">完整报告（数据+AI分析）</option>
|
||
<option value="data">数据报告</option>
|
||
<option value="ai">AI分析报告</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group form-group-btn">
|
||
<label> </label>
|
||
<button type="submit" class="btn btn-success" id="report-btn">
|
||
生成报告
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2>AI分析报告预览</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="report-preview" class="report-preview">
|
||
<p class="text-muted">报告预览将在此显示...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="footer">
|
||
<p>神东煤炭集团 | 综采工作面数据管理与AI分析系统 | 大柳塔煤矿</p>
|
||
</footer>
|
||
|
||
<script src="/static/js/app.js"></script>
|
||
</body>
|
||
</html> |