87 lines
3.5 KiB
HTML
87 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>多供应商分时电价分析大屏</title>
|
|
<link rel="stylesheet" href="css/app.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.0/marked.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header class="dashboard-header">
|
|
<div class="dashboard-title">⚡ 充电站电价分析驾驶舱</div>
|
|
<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">
|
|
<div class="left-panel">
|
|
<div class="station-list">
|
|
<div class="station-list-header">全网供应商24小时电价监控</div>
|
|
<div class="station-table-container">
|
|
<table class="station-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:15%;">时段</th>
|
|
<th v-for="op in operators" :key="op.value" :style="{width: (85/operators.length) + '%'}">{{ op.label }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(row, idx) in priceTableRows" :key="idx">
|
|
<td style="font-family: monospace; color: var(--text-secondary);">{{ row.hour }}</td>
|
|
<td v-for="cell in row.values" :key="cell.operator" :style="{color: getPriceColor(cell.price)}">
|
|
{{ formatCell(cell.price) }}
|
|
</td>
|
|
</tr>
|
|
<tr v-if="priceTableRows.length===0">
|
|
<td :colspan="operators.length + 1" style="text-align:center; padding: 32px; color: var(--text-secondary);">
|
|
数据加载中...
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div id="chart"></div>
|
|
</div>
|
|
|
|
<div class="right-panel">
|
|
<div class="ai-title">智能决策分析助手</div>
|
|
<div class="ai-box" ref="aiBoxRef">
|
|
<div class="ai-question">
|
|
<div class="label">当前分析任务</div>
|
|
<div class="question-text">
|
|
请根据爬取的各供应商分时电价等信息，对各司的定价策略，
|
|
与我司（驿来特）的定价策略进行综合对比，分析我司可能存在的潜在问题。
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin: 10px 0;">
|
|
<button class="btn-primary" @click="startAiAnalysis" :disabled="aiLoading" style="width: 100%;">
|
|
{{ aiLoading ? '✨ AI 正在深入分析...' : '🚀 发起 AI 综合诊断' }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="ai-result" v-html="renderedAiText || placeholder" style="opacity: 0.9;"></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>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|