73 lines
2.2 KiB
HTML
73 lines
2.2 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">API</span>
|
|
<input v-model="apiBase" style="min-width:220px;">
|
|
<span class="label">搜索驿来特场站</span>
|
|
<input v-model="searchKeyword" placeholder="输入名称或地址关键字" style="min-width:220px;">
|
|
<button @click="loadStations">查询场站</button>
|
|
<div class="controls-spacer"></div>
|
|
<span class="label">当前场站：{{ selectedStation ? selectedStation.station_name : "未选择" }}</span>
|
|
<button @click="startAiStream" :disabled="!selectedStation || aiLoading">AI价差分析</button>
|
|
</div>
|
|
<div class="station-list">
|
|
<div class="station-list-header">驿来特场站列表</div>
|
|
<table class="station-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:32%;">场站名称</th>
|
|
<th style="width:48%;">地址</th>
|
|
<th style="width:10%;">当前价</th>
|
|
<th style="width:10%;">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="s in stations" :key="s.station_hash" class="station-row" :class="{active:selectedStation && selectedStation.station_hash===s.station_hash}" @click="selectStation(s)">
|
|
<td>{{ s.station_name }}</td>
|
|
<td>{{ s.address }}</td>
|
|
<td>{{ formatCell(s.current_price) }}</td>
|
|
<td><button @click.stop="selectStation(s)" :disabled="loading">查看价差</button></td>
|
|
</tr>
|
|
<tr v-if="stations.length===0">
|
|
<td colspan="4">暂无数据，请先查询场站</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="chart"></div>
|
|
<div class="price-table" v-if="priceTableColumns.length">
|
|
<div class="price-table-title">24 小时分时电价表（元/度）</div>
|
|
<table class="price-table-inner">
|
|
<thead>
|
|
<tr>
|
|
<th v-for="col in priceTableColumns" :key="col">{{ col }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(row,idx) in priceTableRows" :key="idx">
|
|
<td v-for="(cell,j) in row" :key="j">{{ formatCell(cell) }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="right-panel">
|
|
<div class="ai-title">AI 辅助分析</div>
|
|
<div class="ai-box">{{ aiText || placeholder }}</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>
|