63 lines
2.0 KiB
HTML
63 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>多供应商分时电价分析大屏</title>
|
|
<link rel="stylesheet" href="css/app.css">
|
|
</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>
|
|
</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>
|