104 lines
4.8 KiB
HTML
104 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>分时电价分析 - 驿来特AI智能大脑</title>
|
|
<link rel="stylesheet" href="css/dashboard.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header class="dashboard-header">
|
|
<a href="index.html" class="dashboard-title">⚡ 驿来特AI智能大脑</a>
|
|
<a href="index.html" class="home-link">↩ 返回首页</a>
|
|
|
|
<div class="controls">
|
|
<button class="btn-primary" @click="exportAllPrices" :disabled="exporting">
|
|
<span v-if="!exporting">📊 导出分时段电价表</span>
|
|
<span v-else>⏳ 导出中...</span>
|
|
</button>
|
|
<button class="btn-primary" @click="exportAiReport" :disabled="exportingReport || !aiText" :title="!aiText ? '请先生成AI分析报告' : ''">
|
|
<span v-if="!exportingReport">📑 导出分析报告</span>
|
|
<span v-else>⏳ 生成中...</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="main-content">
|
|
<!-- Left Panel: Table & Trends -->
|
|
<div class="left-panel">
|
|
<div class="station-list">
|
|
<div class="station-list-header">
|
|
📊 供应商实时价格对比
|
|
</div>
|
|
<div class="station-table-container">
|
|
<table class="station-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 80px;">时间</th>
|
|
<th v-for="op in operators" :key="op.value">{{ op.label }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="row in priceTableRows" :key="row.hour">
|
|
<td style="font-weight: bold; color: #94a3b8;">{{ row.hour }}</td>
|
|
<td v-for="val in row.values" :key="val.operator" :style="{ color: getPriceColor(val.price) }">
|
|
{{ formatCell(val.price) }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trend Section -->
|
|
<div class="trend-section">
|
|
<div class="station-list-header" style="display: flex; justify-content: space-between; align-items: center;">
|
|
<span>📉 供应商价格变动趋势 (最近{{ trendDays }}天)</span>
|
|
<div style="display: flex; gap: 8px;">
|
|
<button class="btn-primary" style="padding: 2px 8px; font-size: 11px;" @click="trendDays = 3; loadTrendData()">3天</button>
|
|
<button class="btn-primary" style="padding: 2px 8px; font-size: 11px;" @click="trendDays = 7; loadTrendData()">7天</button>
|
|
</div>
|
|
</div>
|
|
<div id="trendChart" style="flex: 1; width: 100%; min-height: 250px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Panel: Chart & AI -->
|
|
<div class="right-panel">
|
|
<div style="display:flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
|
<div class="ai-title">📈 价格趋势对比</div>
|
|
<div style="display:flex; gap:8px;">
|
|
<button class="btn-primary" style="padding: 4px 12px; font-size: 12px;" @click="chartType = 'line'; renderChart()">折线图</button>
|
|
<button class="btn-primary" style="padding: 4px 12px; font-size: 12px;" @click="chartType = 'bar'; renderChart()">柱状图</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="chart"></div>
|
|
|
|
<div style="height: 16px;"></div>
|
|
|
|
<div class="ai-title">
|
|
<span>🤖 AI 调价策略建议</span>
|
|
</div>
|
|
<div class="ai-box" ref="aiBoxRef">
|
|
<div v-if="!aiText && !aiLoading" style="text-align: center; color: #64748b; margin-top: 40px;">
|
|
<span class="loading-dots">AI 正在深度分析中</span>
|
|
</div>
|
|
<div v-else class="markdown-body" v-html="renderedAiText"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/vue.global.js"></script>
|
|
<script src="js/axios.min.js"></script>
|
|
<script src="js/echarts.min.js"></script>
|
|
<!-- Markdown & LaTeX Support -->
|
|
<link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
|
|
<script src="https://gcore.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
|
|
<script src="https://gcore.jsdelivr.net/npm/marked@12.0.0/lib/marked.umd.js"></script>
|
|
<script src="js/dashboard.js"></script>
|
|
</body>
|
|
</html>
|