@axiom-lattice/gateway 2.1.39 → 2.1.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +8 -8
- package/CHANGELOG.md +15 -0
- package/dist/index.js +464 -170
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +415 -118
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -3
- package/public/sdk/README.md +695 -0
- package/public/sdk/dashboard-engine-skill.md +1122 -0
- package/public/sdk/dashboard-single-file-spec.md +357 -0
- package/public/sdk/data-query-sdk-skill.md +307 -0
- package/public/sdk/data-query-sdk.d.ts +252 -0
- package/public/sdk/data-query-sdk.js +970 -0
- package/public/sdk/occupancy-dashboard.html +363 -0
- package/public/sdk/test-dashboard.html +690 -0
- package/src/__tests__/data-query.test.ts +77 -0
- package/src/controllers/data-query.ts +236 -0
- package/src/controllers/metrics-configs.ts +29 -25
- package/src/controllers/workspace.ts +95 -1
- package/src/index.ts +11 -0
- package/src/routes/index.ts +11 -0
- package/src/schemas/data-query.ts +69 -0
- package/src/schemas/index.ts +3 -0
- package/src/services/agent_task_consumer.ts +2 -0
|
@@ -0,0 +1,363 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>门店经营分析看板</title>
|
|
8
|
+
|
|
9
|
+
<!-- Google Fonts -->
|
|
10
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
11
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
12
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
13
|
+
|
|
14
|
+
<!-- Tailwind CSS -->
|
|
15
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
16
|
+
|
|
17
|
+
<!-- ECharts -->
|
|
18
|
+
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
|
19
|
+
|
|
20
|
+
<!-- Lucide Icons -->
|
|
21
|
+
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
|
|
22
|
+
|
|
23
|
+
<!-- Data Query SDK -->
|
|
24
|
+
<script src="http://localhost:4001/sdk/data-query-sdk.js"></script>
|
|
25
|
+
|
|
26
|
+
<style>
|
|
27
|
+
body {
|
|
28
|
+
font-family: 'Inter', sans-serif;
|
|
29
|
+
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.glass-card {
|
|
33
|
+
background: rgba(255, 255, 255, 0.8);
|
|
34
|
+
backdrop-filter: blur(10px);
|
|
35
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.loading-skeleton {
|
|
39
|
+
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
40
|
+
background-size: 200% 100%;
|
|
41
|
+
animation: loading 1.5s infinite;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@keyframes loading {
|
|
45
|
+
0% {
|
|
46
|
+
background-position: 200% 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
100% {
|
|
50
|
+
background-position: -200% 0;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.kpi-card {
|
|
55
|
+
transition: all 0.3s ease;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.kpi-card:hover {
|
|
59
|
+
transform: translateY(-2px);
|
|
60
|
+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.chart-container {
|
|
64
|
+
height: 300px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.positive {
|
|
68
|
+
color: #10b981;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.negative {
|
|
72
|
+
color: #ef4444;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.neutral {
|
|
76
|
+
color: #6b7280;
|
|
77
|
+
}
|
|
78
|
+
</style>
|
|
79
|
+
</head>
|
|
80
|
+
|
|
81
|
+
<body class="min-h-screen">
|
|
82
|
+
<div class="container mx-auto px-4 py-8 max-w-7xl">
|
|
83
|
+
<!-- Header -->
|
|
84
|
+
<div class="mb-8">
|
|
85
|
+
<h1 class="text-3xl font-bold text-gray-900 mb-2">门店经营分析看板</h1>
|
|
86
|
+
<p class="text-gray-600">实时监控门店经营指标，助力数据驱动决策</p>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<!-- Filters -->
|
|
90
|
+
<div class="glass-card rounded-xl shadow-md p-6 mb-8">
|
|
91
|
+
<div class="flex flex-wrap gap-4 items-center">
|
|
92
|
+
<div class="flex items-center gap-2">
|
|
93
|
+
<i data-lucide="calendar" class="w-5 h-5 text-gray-500"></i>
|
|
94
|
+
<label class="text-sm font-medium text-gray-700">时间范围:</label>
|
|
95
|
+
<select id="timeRange"
|
|
96
|
+
class="px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
97
|
+
<option value="2025-12">2025年12月</option>
|
|
98
|
+
<option value="2025-11">2025年11月</option>
|
|
99
|
+
<option value="2025-q4">2025年Q4</option>
|
|
100
|
+
<option value="2025">2025年全年</option>
|
|
101
|
+
</select>
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
<div class="flex items-center gap-2">
|
|
105
|
+
<i data-lucide="filter" class="w-5 h-5 text-gray-500"></i>
|
|
106
|
+
<label class="text-sm font-medium text-gray-700">门店:</label>
|
|
107
|
+
<select id="shopFilter"
|
|
108
|
+
class="px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
|
109
|
+
<option value="all">全部门店</option>
|
|
110
|
+
</select>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<button id="refreshBtn"
|
|
114
|
+
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center gap-2">
|
|
115
|
+
<i data-lucide="refresh-cw" class="w-4 h-4"></i>
|
|
116
|
+
刷新数据
|
|
117
|
+
</button>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<!-- Tier 1: Hero Metrics -->
|
|
122
|
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
123
|
+
<!-- Occupancy Rate KPI -->
|
|
124
|
+
<div class="kpi-card glass-card rounded-xl shadow-md p-6">
|
|
125
|
+
<div class="flex items-center justify-between mb-4">
|
|
126
|
+
<div>
|
|
127
|
+
<p class="text-sm font-medium text-gray-600">整体出租率</p>
|
|
128
|
+
<p class="text-3xl font-bold text-gray-900" id="occupancyRate">--</p>
|
|
129
|
+
</div>
|
|
130
|
+
<div class="p-3 bg-green-100 rounded-full">
|
|
131
|
+
<i data-lucide="home" class="w-6 h-6 text-green-600"></i>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
<div class="flex items-center justify-between">
|
|
135
|
+
<span class="text-sm text-gray-500">环比</span>
|
|
136
|
+
<span id="occupancyRateChange" class="text-sm font-medium">--</span>
|
|
137
|
+
</div>
|
|
138
|
+
<div id="occupancyRateSparkline" class="h-12 mt-2"></div>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<!-- Total Revenue KPI -->
|
|
142
|
+
<div class="kpi-card glass-card rounded-xl shadow-md p-6">
|
|
143
|
+
<div class="flex items-center justify-between mb-4">
|
|
144
|
+
<div>
|
|
145
|
+
<p class="text-sm font-medium text-gray-600">总租金收入</p>
|
|
146
|
+
<p class="text-3xl font-bold text-gray-900" id="totalRevenue">--</p>
|
|
147
|
+
</div>
|
|
148
|
+
<div class="p-3 bg-blue-100 rounded-full">
|
|
149
|
+
<i data-lucide="dollar-sign" class="w-6 h-6 text-blue-600"></i>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
<div class="flex items-center justify-between">
|
|
153
|
+
<span class="text-sm text-gray-500">环比</span>
|
|
154
|
+
<span id="totalRevenueChange" class="text-sm font-medium">--</span>
|
|
155
|
+
</div>
|
|
156
|
+
<div id="totalRevenueSparkline" class="h-12 mt-2"></div>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
<!-- Average Rent KPI -->
|
|
160
|
+
<div class="kpi-card glass-card rounded-xl shadow-md p-6">
|
|
161
|
+
<div class="flex items-center justify-between mb-4">
|
|
162
|
+
<div>
|
|
163
|
+
<p class="text-sm font-medium text-gray-600">平均租金单价</p>
|
|
164
|
+
<p class="text-3xl font-bold text-gray-900" id="avgRent">--</p>
|
|
165
|
+
</div>
|
|
166
|
+
<div class="p-3 bg-purple-100 rounded-full">
|
|
167
|
+
<i data-lucide="trending-up" class="w-6 h-6 text-purple-600"></i>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
<div class="flex items-center justify-between">
|
|
171
|
+
<span class="text-sm text-gray-500">环比</span>
|
|
172
|
+
<span id="avgRentChange" class="text-sm font-medium">--</span>
|
|
173
|
+
</div>
|
|
174
|
+
<div id="avgRentSparkline" class="h-12 mt-2"></div>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
|
|
178
|
+
<!-- Tier 2: Trend Analysis -->
|
|
179
|
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
180
|
+
<!-- Monthly Occupancy Trend -->
|
|
181
|
+
<div class="glass-card rounded-xl shadow-md p-6">
|
|
182
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
|
183
|
+
<i data-lucide="trending-up" class="w-5 h-5"></i>
|
|
184
|
+
月度出租率趋势
|
|
185
|
+
</h3>
|
|
186
|
+
<div id="occupancyTrend" class="chart-container"></div>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
189
|
+
<!-- Shop Performance Comparison -->
|
|
190
|
+
<div class="glass-card rounded-xl shadow-md p-6">
|
|
191
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
|
192
|
+
<i data-lucide="bar-chart-2" class="w-5 h-5"></i>
|
|
193
|
+
门店出租率对比
|
|
194
|
+
</h3>
|
|
195
|
+
<div id="shopComparison" class="chart-container"></div>
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
<!-- Tier 3: Diagnostic Details -->
|
|
200
|
+
<div class="glass-card rounded-xl shadow-md p-6 mb-8">
|
|
201
|
+
<h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
|
202
|
+
<i data-lucide="table" class="w-5 h-5"></i>
|
|
203
|
+
门店经营健康度详情
|
|
204
|
+
</h3>
|
|
205
|
+
<div class="overflow-x-auto">
|
|
206
|
+
<table class="min-w-full divide-y divide-gray-200">
|
|
207
|
+
<thead class="bg-gray-50">
|
|
208
|
+
<tr>
|
|
209
|
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
210
|
+
门店名称</th>
|
|
211
|
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
212
|
+
出租率</th>
|
|
213
|
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
214
|
+
租金收入</th>
|
|
215
|
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
216
|
+
平均租金</th>
|
|
217
|
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
218
|
+
流失率</th>
|
|
219
|
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
220
|
+
续租率</th>
|
|
221
|
+
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
222
|
+
综合评分</th>
|
|
223
|
+
</tr>
|
|
224
|
+
</thead>
|
|
225
|
+
<tbody id="shopTable" class="bg-white divide-y divide-gray-200">
|
|
226
|
+
<tr>
|
|
227
|
+
<td colspan="7" class="px-6 py-4 text-center text-gray-500">加载中...</td>
|
|
228
|
+
</tr>
|
|
229
|
+
</tbody>
|
|
230
|
+
</table>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
<script>
|
|
236
|
+
// Initialize SDK
|
|
237
|
+
const sdk = new DataQuerySDK({
|
|
238
|
+
baseURL: 'http://localhost:4001',
|
|
239
|
+
serverKey: 'bjy_demo',
|
|
240
|
+
datasourceId: '1'
|
|
241
|
+
});
|
|
242
|
+
|
|
243
|
+
// Utility functions
|
|
244
|
+
function formatCurrency(value) {
|
|
245
|
+
return new Intl.NumberFormat('zh-CN', {
|
|
246
|
+
style: 'currency',
|
|
247
|
+
currency: 'CNY',
|
|
248
|
+
minimumFractionDigits: 0,
|
|
249
|
+
maximumFractionDigits: 0
|
|
250
|
+
}).format(value);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
function formatPercentage(value) {
|
|
254
|
+
return (value * 100).toFixed(1) + '%';
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
function getChangeClass(change) {
|
|
258
|
+
if (change > 0) return 'positive';
|
|
259
|
+
if (change < 0) return 'negative';
|
|
260
|
+
return 'neutral';
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
function formatChange(change) {
|
|
264
|
+
const sign = change > 0 ? '+' : '';
|
|
265
|
+
return sign + formatPercentage(change);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
// Data adaptation function
|
|
269
|
+
function adaptToECharts(sdkResponse) {
|
|
270
|
+
const header = sdkResponse.data.columns.map(c => c.name);
|
|
271
|
+
return [header, ...sdkResponse.data.rows];
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
// Initialize charts
|
|
275
|
+
let occupancyTrendChart = null;
|
|
276
|
+
let shopComparisonChart = null;
|
|
277
|
+
|
|
278
|
+
function initCharts() {
|
|
279
|
+
occupancyTrendChart = echarts.init(document.getElementById('occupancyTrend'));
|
|
280
|
+
shopComparisonChart = echarts.init(document.getElementById('shopComparison'));
|
|
281
|
+
|
|
282
|
+
// Resize charts on window resize
|
|
283
|
+
window.addEventListener('resize', () => {
|
|
284
|
+
occupancyTrendChart.resize();
|
|
285
|
+
shopComparisonChart.resize();
|
|
286
|
+
});
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
// Load hero metrics
|
|
290
|
+
async function loadHeroMetrics() {
|
|
291
|
+
try {
|
|
292
|
+
// Load occupancy rate data
|
|
293
|
+
const occupancyData = await sdk.query({
|
|
294
|
+
metrics: ['occupancy_rate'],
|
|
295
|
+
groupBy: ['date__month'],
|
|
296
|
+
filters: [{
|
|
297
|
+
dimension: 'date',
|
|
298
|
+
operator: 'BETWEEN',
|
|
299
|
+
values: ['2025-01-01', '2025-12-31']
|
|
300
|
+
}],
|
|
301
|
+
orderBy: [{ field: 'date__month', direction: 'ASC' }]
|
|
302
|
+
});
|
|
303
|
+
|
|
304
|
+
const latestOccupancy = occupancyData.data.rows[occupancyData.data.rows.length - 1][1];
|
|
305
|
+
const previousOccupancy = occupancyData.data.rows[occupancyData.data.rows.length - 2][1];
|
|
306
|
+
const occupancyChange = latestOccupancy - previousOccupancy;
|
|
307
|
+
|
|
308
|
+
document.getElementById('occupancyRate').textContent = formatPercentage(latestOccupancy);
|
|
309
|
+
document.getElementById('occupancyRateChange').textContent = formatChange(occupancyChange);
|
|
310
|
+
document.getElementById('occupancyRateChange').className = `text-sm font-medium ${getChangeClass(occupancyChange)}`;
|
|
311
|
+
|
|
312
|
+
// Create sparkline
|
|
313
|
+
const sparklineData = occupancyData.data.rows.map(row => [row[0], row[1]]);
|
|
314
|
+
const sparklineChart = echarts.init(document.getElementById('occupancyRateSparkline'));
|
|
315
|
+
sparklineChart.setOption({
|
|
316
|
+
dataset: { source: [['month', 'rate'], ...sparklineData] },
|
|
317
|
+
xAxis: { type: 'category', show: false },
|
|
318
|
+
yAxis: { type: 'value', show: false },
|
|
319
|
+
series: [{
|
|
320
|
+
type: 'line',
|
|
321
|
+
smooth: true,
|
|
322
|
+
areaStyle: { opacity: 0.3, color: '#10b981' },
|
|
323
|
+
symbol: 'none',
|
|
324
|
+
lineStyle: { color: '#10b981', width: 2 }
|
|
325
|
+
}],
|
|
326
|
+
grid: { left: 0, right: 0, top: 0, bottom: 0 }
|
|
327
|
+
});
|
|
328
|
+
|
|
329
|
+
// Load total revenue data
|
|
330
|
+
const revenueData = await sdk.query({
|
|
331
|
+
metrics: ['total_rent_amount'],
|
|
332
|
+
groupBy: ['date__month'],
|
|
333
|
+
filters: [{
|
|
334
|
+
dimension: 'date',
|
|
335
|
+
operator: 'BETWEEN',
|
|
336
|
+
values: ['2025-01-01', '2025-12-31']
|
|
337
|
+
}],
|
|
338
|
+
orderBy: [{ field: 'date__month', direction: 'ASC' }]
|
|
339
|
+
});
|
|
340
|
+
|
|
341
|
+
const latestRevenue = revenueData.data.rows[revenueData.data.rows.length - 1][1];
|
|
342
|
+
const previousRevenue = revenueData.data.rows[revenueData.data.rows.length - 2][1];
|
|
343
|
+
const revenueChange = (latestRevenue - previousRevenue) / previousRevenue;
|
|
344
|
+
|
|
345
|
+
document.getElementById('totalRevenue').textContent = formatCurrency(latestRevenue);
|
|
346
|
+
document.getElementById('totalRevenueChange').textContent = formatChange(revenueChange);
|
|
347
|
+
document.getElementById('totalRevenueChange').className = `text-sm font-medium ${getChangeClass(revenueChange)}`;
|
|
348
|
+
|
|
349
|
+
// Create revenue sparkline
|
|
350
|
+
const revenueSparklineData = revenueData.data.rows.map(row => [row[0], row[1]]);
|
|
351
|
+
const revenueSparklineChart = echarts.init(document.getElementById('totalRevenueSparkline'));
|
|
352
|
+
revenueSparklineChart.setOption({
|
|
353
|
+
dataset: { source: [['month', 'revenue'], ...revenueSparklineData] },
|
|
354
|
+
xAxis: { type: 'category', show: false },
|
|
355
|
+
yAxis: { type: 'value', show: false },
|
|
356
|
+
series: [{
|
|
357
|
+
type: 'line',
|
|
358
|
+
smooth: true,
|
|
359
|
+
areaStyle: { opacity: 0.3, color: '#3b82f6' },
|
|
360
|
+
symbol: 'none',
|
|
361
|
+
lineStyle: { color: '#3b82f6', width: 2 }
|
|
362
|
+
}],
|
|
363
|
+
grid: { left: 0, right: 0, top: 0, bottom
|