huanghai/aiData
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2026-01-20 07:31:23 +08:00
parent b20b778f5d
commit 6263487425
5 changed files with 483 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
static/index.html
View File

@@ -4,55 +4,75 @@
<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">
<div class="left-panel">
<div class="controls">
<span class="label">选择供应商</span>
<select v-model="selectedOperator" @change="loadOperatorPrices">
<option v-for="op in operators" :key="op.value" :value="op.value">{{ op.label }}</option>
</select>
<button @click="loadAllOperatorsPrices" :disabled="loading">查询四家最新24小时电价</button>
<div class="controls-spacer"></div>
<button @click="exportAllPrices" :disabled="exporting">一键导出各供应商电价</button>
</div>
<div class="station-list">
<div class="station-list-header">四家供应商24小时平均电价对比</div>
<table class="station-table">
<thead>
<tr>
<th style="width:20%;">小时</th>
<th v-for="op in operators" :key="op.value" style="width:20%;">{{ op.label }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, idx) in priceTableRows" :key="idx">
<td>{{ row.hour }}</td>
<td v-for="cell in row.values" :key="cell.operator">{{ formatCell(cell.price) }}</td>
</tr>
<tr v-if="priceTableRows.length===0">
<td :colspan="operators.length + 1">暂无数据，请先查询</td>
</tr>
</tbody>
</table>
</div>
<div id="chart"></div>
</div>
<div class="right-panel">
<div class="ai-title">AI 辅助分析</div>
<div class="ai-box">
<div class="ai-question">
<div class="label">默认问题</div>
<div class="question-text">
请根据爬取的各供应商分时电价等信息，对各司的定价策略，
与我司（驿来特）的定价策略进行综合对比，分析我司可能存在的潜在问题。
</div>
</div>
<button @click="startAiAnalysis" :disabled="aiLoading">发起AI综合分析</button>
<div class="ai-result">{{ aiText || placeholder }}</div>
</div>
</div>
<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>
</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>