175 lines
7.8 KiB
HTML
175 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IOV Data Analysis Agent</title>
|
|
<link rel="stylesheet" href="/static/style.css?v=2.0">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<!-- Markdown Parser -->
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<i class="fa-solid fa-robot"></i>
|
|
<h1>IOV Agent</h1>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="main-nav">
|
|
<button class="nav-btn active" onclick="switchView('analysis')">
|
|
<i class="fa-solid fa-chart-line"></i> Analysis
|
|
</button>
|
|
<button class="nav-btn" onclick="switchView('tools')">
|
|
<i class="fa-solid fa-toolbox"></i> Data Tools
|
|
</button>
|
|
<button class="nav-btn" onclick="switchView('gallery')">
|
|
<i class="fa-solid fa-images"></i> Gallery
|
|
</button>
|
|
<button class="nav-btn" onclick="switchView('help')">
|
|
<i class="fa-solid fa-circle-question"></i> Help
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Analysis Controls (Visible only in Analysis View) -->
|
|
<div id="analysisControls" class="control-group-wrapper">
|
|
<div class="control-group">
|
|
<h3>1. Data Upload</h3>
|
|
<div class="upload-zone" id="uploadZone">
|
|
<i class="fa-solid fa-cloud-arrow-up"></i>
|
|
<p>Drag & Drop CSV/Excel</p>
|
|
<input type="file" id="fileInput" accept=".csv,.xlsx,.xls" multiple hidden>
|
|
<button class="btn secondary" onclick="document.getElementById('fileInput').click()">Select
|
|
Files</button>
|
|
<div id="fileList" class="file-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<h3>2. Analysis Config</h3>
|
|
<textarea id="requirementInput"
|
|
placeholder="Enter your analysis requirement here...">基于所有运维工单，整理一份工单健康度报告...</textarea>
|
|
<button id="startBtn" class="btn primary">
|
|
<i class="fa-solid fa-play"></i> Start Analysis
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-indicator">
|
|
<span id="statusDot" class="dot"></span>
|
|
<span id="statusText">Idle</span>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="main-content">
|
|
|
|
<!-- VIEW: ANALYSIS -->
|
|
<div id="viewAnalysis" class="view-section active">
|
|
<div class="tabs">
|
|
<button class="tab-btn active" onclick="switchTab('logs')">
|
|
<i class="fa-solid fa-terminal"></i> Live Logs
|
|
</button>
|
|
<button class="tab-btn" onclick="switchTab('report')">
|
|
<i class="fa-solid fa-file-invoice-dollar"></i> Report
|
|
</button>
|
|
<div style="margin-left: auto; display: flex; align-items: center;">
|
|
<button id="exportBtn" class="btn secondary"
|
|
style="padding: 0.4rem 1rem; font-size: 0.8rem; width: auto;" onclick="triggerExport()">
|
|
<i class="fa-solid fa-download"></i> Export Report (ZIP)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log View -->
|
|
<div id="logsTab" class="tab-content active">
|
|
<div class="terminal-window">
|
|
<pre id="logOutput">Waiting to start...</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report View -->
|
|
<div id="reportTab" class="tab-content">
|
|
<div id="reportContainer" class="markdown-body">
|
|
<div class="empty-state">
|
|
<i class="fa-solid fa-chart-simple"></i>
|
|
<p>No report generated yet.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VIEW: TOOLS -->
|
|
<div id="viewTools" class="view-section" style="display: none;">
|
|
<div class="tools-grid">
|
|
<!-- Tool Card 1: Merge Excel -->
|
|
<div class="tool-card">
|
|
<div class="tool-icon"><i class="fa-solid fa-file-csv"></i></div>
|
|
<h3>Excel to CSV Merger</h3>
|
|
<p>Merge multiple .xlsx files from the uploads directory into a single CSV for analysis.</p>
|
|
<div class="tool-actions">
|
|
<input type="text" id="mergeSource" value="uploads" placeholder="Source Directory"
|
|
class="input-sm">
|
|
<button class="btn secondary" onclick="triggerMerge()">
|
|
<i class="fa-solid fa-bolt"></i> Merge Now
|
|
</button>
|
|
</div>
|
|
<div id="mergeResult" class="tool-result"></div>
|
|
</div>
|
|
|
|
<!-- Tool Card 2: Sort CSV -->
|
|
<div class="tool-card">
|
|
<div class="tool-icon"><i class="fa-solid fa-arrow-down-a-z"></i></div>
|
|
<h3>Time Sorter</h3>
|
|
<p>Sort a CSV file by 'SendTime' or time column to fix ordering issues.</p>
|
|
<div class="tool-actions">
|
|
<input type="text" id="sortTarget" value="cleaned_data.csv" placeholder="Target Filename"
|
|
class="input-sm">
|
|
<button class="btn secondary" onclick="triggerSort()">
|
|
<i class="fa-solid fa-sort"></i> Sort Now
|
|
</button>
|
|
</div>
|
|
<div id="sortResult" class="tool-result"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VIEW: GALLERY -->
|
|
<div id="viewGallery" class="view-section" style="display: none;">
|
|
<div id="galleryContainer" class="gallery-grid">
|
|
<div class="empty-state">
|
|
<i class="fa-solid fa-images"></i>
|
|
<p>No images generated yet.<br>Start an analysis to see results here.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VIEW: HELP -->
|
|
<div id="viewHelp" class="view-section" style="display: none;">
|
|
<div class="help-header">
|
|
<h2>Troubleshooting Guide</h2>
|
|
<button class="btn secondary" onclick="fetchHelp()">Refresh</button>
|
|
</div>
|
|
<div id="helpContainer" class="markdown-body help-body">
|
|
<p>Loading guide...</p>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/static/script.js"></script>
|
|
</body>
|
|
|
|
</html> |