befly-admin-ui 1.46.0 → 1.48.0
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/components/pageTableDetail.vue +13 -26
- package/package.json +1 -1
- package/views/log/error/index.vue +11 -9
- package/views/projectStats/index.vue +71 -58
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
</div>
|
|
34
34
|
|
|
35
35
|
<div v-if="$Prop.isPagination" class="main-page">
|
|
36
|
-
<TPagination :current
|
|
36
|
+
<TPagination :current="$Data.pager.current" :page-size="$Const.pageLimit" :total="$Data.pager.total" :showPageSize="false" align="right" layout="total, prev, pager, next" @current-change="$Method.onPageChange" />
|
|
37
37
|
</div>
|
|
38
38
|
|
|
39
39
|
<slot name="dialogs" :reload="$Method.reload" :current-row="$Data.currentRow"></slot>
|
|
@@ -66,18 +66,10 @@ const $Prop = defineProps({
|
|
|
66
66
|
type: Boolean,
|
|
67
67
|
default: true
|
|
68
68
|
},
|
|
69
|
-
pageSize: {
|
|
70
|
-
type: Number,
|
|
71
|
-
default: 30
|
|
72
|
-
},
|
|
73
69
|
endpoints: {
|
|
74
70
|
type: Object,
|
|
75
71
|
default: undefined
|
|
76
72
|
},
|
|
77
|
-
paginationLayout: {
|
|
78
|
-
type: String,
|
|
79
|
-
default: "total, prev, pager, next, jumper"
|
|
80
|
-
},
|
|
81
73
|
autoLoad: {
|
|
82
74
|
type: Boolean,
|
|
83
75
|
default: true
|
|
@@ -96,6 +88,7 @@ const $From = {
|
|
|
96
88
|
};
|
|
97
89
|
|
|
98
90
|
const $Const = {
|
|
91
|
+
pageLimit: 30,
|
|
99
92
|
reservedSlotNames: ["toolLeft", "toolRight", "detail", "dialogs", "operation", "default"]
|
|
100
93
|
};
|
|
101
94
|
|
|
@@ -103,8 +96,7 @@ const $Data = reactive({
|
|
|
103
96
|
rows: [],
|
|
104
97
|
loading: false,
|
|
105
98
|
pager: {
|
|
106
|
-
|
|
107
|
-
limit: $Prop.pageSize,
|
|
99
|
+
current: 1,
|
|
108
100
|
total: 0
|
|
109
101
|
},
|
|
110
102
|
currentRow: null,
|
|
@@ -237,13 +229,13 @@ const $Method = {
|
|
|
237
229
|
const limitKey = listEndpoint.limitKey || "limit";
|
|
238
230
|
|
|
239
231
|
const data = {};
|
|
240
|
-
data[pageKey] = $Data.pager.
|
|
241
|
-
data[limitKey] = $
|
|
232
|
+
data[pageKey] = $Data.pager.current;
|
|
233
|
+
data[limitKey] = $Const.pageLimit;
|
|
242
234
|
|
|
243
235
|
if (listEndpoint.buildData) {
|
|
244
236
|
const extra = listEndpoint.buildData({
|
|
245
|
-
currentPage: $Data.pager.
|
|
246
|
-
limit: $
|
|
237
|
+
currentPage: $Data.pager.current,
|
|
238
|
+
limit: $Const.pageLimit
|
|
247
239
|
});
|
|
248
240
|
if (extra && typeof extra === "object") {
|
|
249
241
|
for (const key of Object.keys(extra)) {
|
|
@@ -263,9 +255,9 @@ const $Method = {
|
|
|
263
255
|
|
|
264
256
|
const allowPageFallback = options?.allowPageFallback !== false;
|
|
265
257
|
if (allowPageFallback && lists.length === 0 && total > 0) {
|
|
266
|
-
const lastPage = $Method.getLastPage(total, $
|
|
267
|
-
if ($Data.pager.
|
|
268
|
-
$Data.pager.
|
|
258
|
+
const lastPage = $Method.getLastPage(total, $Const.pageLimit);
|
|
259
|
+
if ($Data.pager.current > lastPage) {
|
|
260
|
+
$Data.pager.current = lastPage;
|
|
269
261
|
await $Method.loadList({
|
|
270
262
|
keepSelection: false,
|
|
271
263
|
allowPageFallback: false
|
|
@@ -292,22 +284,17 @@ const $Method = {
|
|
|
292
284
|
},
|
|
293
285
|
reload: async function (options) {
|
|
294
286
|
if (options?.resetPage) {
|
|
295
|
-
$Data.pager.
|
|
287
|
+
$Data.pager.current = 1;
|
|
296
288
|
}
|
|
297
289
|
await $Method.loadList({
|
|
298
290
|
keepSelection: options?.keepSelection,
|
|
299
291
|
allowPageFallback: true
|
|
300
292
|
});
|
|
301
293
|
},
|
|
302
|
-
onPageChange: function (
|
|
303
|
-
$Data.pager.
|
|
294
|
+
onPageChange: function (current) {
|
|
295
|
+
$Data.pager.current = current;
|
|
304
296
|
$Method.reload({ keepSelection: true });
|
|
305
297
|
},
|
|
306
|
-
onPageSizeChange: function (info) {
|
|
307
|
-
$Data.pager.limit = info.pageSize;
|
|
308
|
-
$Data.pager.currentPage = 1;
|
|
309
|
-
$Method.reload({ keepSelection: false });
|
|
310
|
-
},
|
|
311
298
|
onActiveChange: function (value, context) {
|
|
312
299
|
if (value.length === 0) {
|
|
313
300
|
if ($Data.activeRowKeys.length > 0) {
|
package/package.json
CHANGED
|
@@ -99,17 +99,19 @@ import { reactive } from "vue";
|
|
|
99
99
|
|
|
100
100
|
const $Data = reactive({
|
|
101
101
|
columns: withDefaultColumns([
|
|
102
|
-
{ colKey: "productName", title: "产品名称" },
|
|
102
|
+
{ colKey: "productName", title: "产品名称", width:120 },
|
|
103
103
|
{ colKey: "productCode", title: "产品代号", width: 150 },
|
|
104
|
-
|
|
104
|
+
|
|
105
|
+
{ colKey: "errorType", title: "错误类型", width: 120 },
|
|
106
|
+
{ colKey: "message", title: "错误信息", ellipsis: true },
|
|
107
|
+
{ colKey: "productVersion", title: "产品版本", width: 130 },
|
|
105
108
|
{ colKey: "pageName", title: "页面名称" },
|
|
106
109
|
{ colKey: "pagePath", title: "页面路径", width: 220, ellipsis: true },
|
|
107
|
-
|
|
108
|
-
{ colKey: "deviceType", title: "设备类型", width:
|
|
109
|
-
{ colKey: "browserName", title: "浏览器", width:
|
|
110
|
-
{ colKey: "osName", title: "操作系统", width:
|
|
111
|
-
{ colKey: "hitCount", title: "次数", width: 100 },
|
|
112
|
-
{ colKey: "message", title: "错误信息", ellipsis: true },
|
|
110
|
+
|
|
111
|
+
{ colKey: "deviceType", title: "设备类型", width: 100 },
|
|
112
|
+
{ colKey: "browserName", title: "浏览器", width: 100 },
|
|
113
|
+
{ colKey: "osName", title: "操作系统", width: 100 },
|
|
114
|
+
{ colKey: "hitCount", title: "次数", width: 100 },
|
|
113
115
|
{ colKey: "source", title: "来源", width: 100 },
|
|
114
116
|
{ colKey: "reportTime", title: "上报时间", width: 170 },
|
|
115
117
|
{ colKey: "firstReportTime", title: "首次上报", width: 170, detail: true },
|
|
@@ -122,7 +124,7 @@ const $Data = reactive({
|
|
|
122
124
|
{ colKey: "engineName", title: "渲染引擎", detail: true },
|
|
123
125
|
{ colKey: "cpuArchitecture", title: "CPU架构", detail: true },
|
|
124
126
|
{ colKey: "userAgent", title: "UA字符串", detail: true },
|
|
125
|
-
{ colKey: "detail", title: "错误详情", detail: true }
|
|
127
|
+
{ colKey: "detail", title: "错误详情", detail: true }
|
|
126
128
|
]),
|
|
127
129
|
endpoints: {
|
|
128
130
|
list: {
|
|
@@ -9,40 +9,51 @@
|
|
|
9
9
|
<div class="section-content">
|
|
10
10
|
<div class="project-row-list">
|
|
11
11
|
<div v-for="item in $Computed.productRows" :key="item.key" class="product-row">
|
|
12
|
-
<div class="
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
<
|
|
44
|
-
|
|
45
|
-
|
|
12
|
+
<div class="product-title">{{ $Method.formatProductTitle(item) }}</div>
|
|
13
|
+
|
|
14
|
+
<t-row :gutter="[16, 16]">
|
|
15
|
+
<t-col :xs="12" :sm="6" :md="4" :lg="2" class="metric-col">
|
|
16
|
+
<div class="metric-card">
|
|
17
|
+
<span class="metric-label">在线人数</span>
|
|
18
|
+
<strong class="metric-value-online">{{ item.onlineCount }}</strong>
|
|
19
|
+
</div>
|
|
20
|
+
</t-col>
|
|
21
|
+
|
|
22
|
+
<t-col :xs="12" :sm="6" :md="4" :lg="2" class="metric-col">
|
|
23
|
+
<div class="metric-card">
|
|
24
|
+
<span class="metric-label">今日访客</span>
|
|
25
|
+
<strong class="metric-value-visitor">{{ item.today }}</strong>
|
|
26
|
+
</div>
|
|
27
|
+
</t-col>
|
|
28
|
+
|
|
29
|
+
<t-col :xs="12" :sm="6" :md="4" :lg="2" class="metric-col">
|
|
30
|
+
<div class="metric-card">
|
|
31
|
+
<span class="metric-label">昨日访客</span>
|
|
32
|
+
<strong class="metric-value-visitor">{{ item.yesterday }}</strong>
|
|
33
|
+
</div>
|
|
34
|
+
</t-col>
|
|
35
|
+
|
|
36
|
+
<t-col :xs="12" :sm="6" :md="4" :lg="2" class="metric-col">
|
|
37
|
+
<div class="metric-card">
|
|
38
|
+
<span class="metric-label">前天访客</span>
|
|
39
|
+
<strong class="metric-value-visitor">{{ item.dayBeforeYesterday }}</strong>
|
|
40
|
+
</div>
|
|
41
|
+
</t-col>
|
|
42
|
+
|
|
43
|
+
<t-col :xs="12" :sm="6" :md="4" :lg="2" class="metric-col">
|
|
44
|
+
<div class="metric-card">
|
|
45
|
+
<span class="metric-label">近30天访客</span>
|
|
46
|
+
<strong class="metric-value-visitor">{{ item.recent30 }}</strong>
|
|
47
|
+
</div>
|
|
48
|
+
</t-col>
|
|
49
|
+
|
|
50
|
+
<t-col :xs="12" :sm="6" :md="4" :lg="2" class="metric-col">
|
|
51
|
+
<div class="metric-card">
|
|
52
|
+
<span class="metric-label">本月访客</span>
|
|
53
|
+
<strong class="metric-value-visitor">{{ item.month }}</strong>
|
|
54
|
+
</div>
|
|
55
|
+
</t-col>
|
|
56
|
+
</t-row>
|
|
46
57
|
</div>
|
|
47
58
|
</div>
|
|
48
59
|
</div>
|
|
@@ -52,6 +63,7 @@
|
|
|
52
63
|
|
|
53
64
|
<script setup>
|
|
54
65
|
import { ChartIcon } from "tdesign-icons-vue-next";
|
|
66
|
+
import { Col as TCol, Row as TRow } from "tdesign-vue-next";
|
|
55
67
|
import { computed, reactive } from "vue";
|
|
56
68
|
|
|
57
69
|
import { $Http } from "@/plugins/http.js";
|
|
@@ -77,6 +89,16 @@ const $Method = {
|
|
|
77
89
|
month: Number(visitItem?.month || 0)
|
|
78
90
|
};
|
|
79
91
|
},
|
|
92
|
+
formatProductTitle: function (row) {
|
|
93
|
+
const productName = row?.productName;
|
|
94
|
+
const productCode = row?.productCode;
|
|
95
|
+
|
|
96
|
+
if (productName && productCode) {
|
|
97
|
+
return `${productName}(${productCode})`;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
return productName || productCode || "-";
|
|
101
|
+
},
|
|
80
102
|
mapProjectRows: function (infoStatsData, onlineStatsData) {
|
|
81
103
|
const onlineMap = new Map();
|
|
82
104
|
|
|
@@ -137,14 +159,24 @@ $Method.fetchData();
|
|
|
137
159
|
.project-row-list {
|
|
138
160
|
display: flex;
|
|
139
161
|
flex-direction: column;
|
|
140
|
-
gap:
|
|
162
|
+
gap: 20px;
|
|
141
163
|
}
|
|
142
164
|
|
|
143
165
|
.product-row {
|
|
144
|
-
display:
|
|
145
|
-
|
|
146
|
-
gap:
|
|
147
|
-
|
|
166
|
+
display: flex;
|
|
167
|
+
flex-direction: column;
|
|
168
|
+
gap: 12px;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.product-title {
|
|
172
|
+
font-size: 16px;
|
|
173
|
+
font-weight: 700;
|
|
174
|
+
color: var(--text-primary);
|
|
175
|
+
line-height: 1.2;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.metric-col {
|
|
179
|
+
min-width: 0;
|
|
148
180
|
}
|
|
149
181
|
|
|
150
182
|
.metric-label {
|
|
@@ -157,12 +189,6 @@ $Method.fetchData();
|
|
|
157
189
|
color: var(--error-color);
|
|
158
190
|
}
|
|
159
191
|
|
|
160
|
-
.metric-value-name {
|
|
161
|
-
@include dashboardCard.dashboardCardMainValue();
|
|
162
|
-
|
|
163
|
-
text-align: left;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
192
|
.metric-card {
|
|
167
193
|
display: flex;
|
|
168
194
|
flex-direction: column;
|
|
@@ -173,7 +199,6 @@ $Method.fetchData();
|
|
|
173
199
|
|
|
174
200
|
gap: 8px;
|
|
175
201
|
justify-content: flex-start;
|
|
176
|
-
min-height: 100%;
|
|
177
202
|
padding: 12px;
|
|
178
203
|
}
|
|
179
204
|
|
|
@@ -184,16 +209,4 @@ $Method.fetchData();
|
|
|
184
209
|
text-align: left;
|
|
185
210
|
white-space: nowrap;
|
|
186
211
|
}
|
|
187
|
-
|
|
188
|
-
@media (max-width: 1280px) {
|
|
189
|
-
.product-row {
|
|
190
|
-
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
@media (max-width: 720px) {
|
|
195
|
-
.product-row {
|
|
196
|
-
grid-template-columns: 1fr;
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
212
|
</style>
|