Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
F
fk-spider-web
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
周田
fk-spider-web
Commits
ea172f23
Commit
ea172f23
authored
Jan 19, 2026
by
liucan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix:修改状态监控数字显示格式
parent
e584b822
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
175 additions
and
161 deletions
+175
-161
formatExactLargeNum.ts
src/utils/formatExactLargeNum.ts
+16
-13
esDataTab.vue
src/views/os-dataDisplay/components/esDataTab.vue
+0
-0
dataCard.vue
src/views/os-status/components/dataCard.vue
+79
-70
taskCard.vue
src/views/os-status/components/taskCard.vue
+0
-0
index.vue
src/views/os-taskRecord/index.vue
+80
-78
No files found.
src/utils/formatExactLargeNum.ts
View file @
ea172f23
const
formatExactLargeNum
=
(
num
:
number
|
string
|
null
)
=>
{
if
(
num
===
null
||
num
===
undefined
)
return
""
;
if
(
typeof
num
!==
"number"
&&
typeof
num
!==
"string"
)
return
num
;
if
(
num
===
null
||
num
===
undefined
)
return
''
if
(
typeof
num
!==
'number'
&&
typeof
num
!==
'string'
)
return
num
const
parsedNum
=
typeof
num
===
"string"
?
Number
(
num
.
replace
(
/,/g
,
""
))
:
num
;
const
parsedNum
=
typeof
num
===
'string'
?
Number
(
num
.
replace
(
/,/g
,
''
))
:
num
if
(
isNaN
(
parsedNum
))
return
num
;
if
(
isNaN
(
parsedNum
))
return
num
// 如果大于 100 万 或大于 1 亿,使用科学计数法
if
(
Math
.
abs
(
parsedNum
)
>
1
_000_000
)
{
return
parsedNum
.
toExponential
(
2
);
const
absNum
=
Math
.
abs
(
parsedNum
)
if
(
absNum
>=
100
_000_000
)
{
return
(
parsedNum
/
100
_000_000
).
toFixed
(
2
)
+
'亿'
}
else
if
(
absNum
>=
10
_000
)
{
return
(
parsedNum
/
10
_000
).
toFixed
(
2
)
+
'万'
}
else
{
return
parsedNum
.
toLocaleString
(
"en-US"
,
{
return
parsedNum
.
toLocaleString
(
'en-US'
,
{
useGrouping
:
true
,
maximumFractionDigits
:
0
,
minimumFractionDigits
:
0
,
})
;
maximumFractionDigits
:
2
,
minimumFractionDigits
:
0
})
}
}
;
}
export
default
formatExactLargeNum
;
export
default
formatExactLargeNum
src/views/os-dataDisplay/components/esDataTab.vue
View file @
ea172f23
This diff is collapsed.
Click to expand it.
src/views/os-status/components/dataCard.vue
View file @
ea172f23
...
...
@@ -9,21 +9,21 @@
<div
class=
"wordStyle"
>
<span>
总数据量(条):
</span>
<span
class=
"total-num"
v-if=
"totalDataNumber !== null"
>
{{
formatExactLargeNum
(
totalDataNumber
)
??
"--"
formatExactLargeNum
(
totalDataNumber
)
??
'--'
}}
</span>
<span
class=
"loading"
v-else
></span>
</div>
<div
class=
"wordStyle"
>
<span>
采集的页面数量(个):
</span>
<span
class=
"total-num"
v-if=
"totalPageNumber !== null"
>
{{
formatExactLargeNum
(
totalPageNumber
)
??
"--"
}}
</span
{{
formatExactLargeNum
(
totalPageNumber
)
??
'--'
}}
</span
>
<span
class=
"loading"
v-else
></span>
</div>
<div
class=
"wordStyle"
>
<span>
采集的目标数量(个):
</span>
<span
class=
"total-num"
v-if=
"totalTargetNumber !== null"
>
{{
formatExactLargeNum
(
totalTargetNumber
)
??
"--"
}}
</span
{{
formatExactLargeNum
(
totalTargetNumber
)
??
'--'
}}
</span
>
<span
class=
"loading"
v-else
></span>
</div>
...
...
@@ -36,17 +36,12 @@
<div
class=
"items"
>
<div
class=
"wordStyle"
>
<span>
任务执行成功统计(个):
</span>
<span
class=
"total-num"
v-if=
"successTask !== null"
>
{{
formatExactLargeNum
(
successTask
)
??
"--"
}}
</span>
<span
class=
"total-num"
v-if=
"successTask !== null"
>
{{
formatExactLargeNum
(
successTask
)
??
'--'
}}
</span>
<span
class=
"loading"
v-else
></span>
</div>
<div
class=
"wordStyle"
>
<span>
任务执行失败统计(个):
</span>
<span
class=
"total-num"
v-if=
"failTask !== null"
>
{{
formatExactLargeNum
(
failTask
)
??
"--"
}}
</span>
<span
class=
"loading"
v-else
></span>
</div>
<div
class=
"wordStyle"
>
<span>
任务异常数统计(个):
</span>
<span
class=
"total-num"
v-if=
"unusualTask !== null"
>
{{
formatExactLargeNum
(
unusualTask
)
??
"--"
}}
</span>
<span
class=
"total-num"
v-if=
"failTask !== null"
>
{{
formatExactLargeNum
(
failTask
)
??
'--'
}}
</span>
<span
class=
"loading"
v-else
></span>
</div>
</div>
...
...
@@ -58,17 +53,16 @@
<div
class=
"items"
>
<div
class=
"wordStyle"
>
<span>
平均成功率:
</span>
<span
class=
"total-num"
v-if=
"speed !== null"
>
{{
speed
??
"--"
}}
</span>
<span
class=
"total-num"
v-if=
"speed !== null"
>
{{
`${Number(Math.floor(speed * 100) / 100).toFixed(2)
}
%`
}}
<
/spa
n
>
<
span
class
=
"loading"
v
-
else
><
/span
>
<
/div
>
<
div
class
=
"wordStyle"
>
<
span
>
平均错误率
:
<
/span
>
<span
class=
"total-num"
v-if=
"errorRate !== null"
>
{{
errorRate
??
"--"
}}
</span>
<span
class=
"loading"
v-else
></span>
</div>
<div
class=
"wordStyle"
>
<span>
平均异常率:
</span>
<span
class=
"total-num"
v-if=
"unusualRate !== null"
>
{{
unusualRate
??
"--"
}}
</span>
<
span
class
=
"total-num"
v
-
if
=
"errorRate !== null"
>
{{
`${Number(Math.ceil(errorRate * 100) / 100).toFixed(2)
}
%`
}}
<
/span
>
<
span
class
=
"loading"
v
-
else
><
/span
>
<
/div
>
<
/div
>
...
...
@@ -77,73 +71,73 @@
<
/template
>
<
script
lang
=
"ts"
setup
>
import
{
useRouter
}
from
"vue-router"
;
import
{
getStatsDataList
,
getSpiderTaskList
,
getPerformanceList
}
from
"@/api/staticData"
;
import
{
onMounted
,
ref
}
from
"vue"
;
import
formatExactLargeNum
from
"@/utils/formatExactLargeNum"
;
import
{
useSlideStateStore
}
from
"@/store/slideState"
;
import
{
storeToRefs
}
from
"pinia"
;
const
slideStateStore
=
useSlideStateStore
()
;
const
{
slideState
}
=
storeToRefs
(
slideStateStore
)
;
const
router
=
useRouter
()
;
const
totalDataNumber
=
ref
(
null
)
;
const
totalPageNumber
=
ref
(
null
)
;
const
totalTargetNumber
=
ref
(
null
)
;
const
successTask
=
ref
(
null
)
;
const
failTask
=
ref
(
null
)
;
const
unusualTask
=
ref
(
null
)
;
const
speed
=
ref
(
null
)
;
const
errorRate
=
ref
(
null
)
;
const
unusualRate
=
ref
(
null
)
;
import
{
useRouter
}
from
'vue-router'
import
{
getStatsDataList
,
getSpiderTaskList
,
getPerformanceList
}
from
'@/api/staticData'
import
{
onMounted
,
ref
}
from
'vue'
import
formatExactLargeNum
from
'@/utils/formatExactLargeNum'
import
{
useSlideStateStore
}
from
'@/store/slideState'
import
{
storeToRefs
}
from
'pinia'
const
slideStateStore
=
useSlideStateStore
()
const
{
slideState
}
=
storeToRefs
(
slideStateStore
)
const
router
=
useRouter
()
const
totalDataNumber
=
ref
(
null
)
const
totalPageNumber
=
ref
(
null
)
const
totalTargetNumber
=
ref
(
null
)
const
successTask
=
ref
(
null
)
const
failTask
=
ref
(
null
)
const
unusualTask
=
ref
(
null
)
const
speed
=
ref
(
null
)
const
errorRate
=
ref
(
null
)
const
unusualRate
=
ref
(
null
)
const
goToAllDataPage
=
()
=>
{
router
.
push
({
path
:
"/osDataDisplay/list"
,
path
:
'/osDataDisplay/list'
,
query
:
{
jump
:
"yes"
,
mode
:
"DSN数据"
,
}
,
})
;
}
;
jump
:
'yes'
,
mode
:
'DSN数据'
}
}
)
}
const
goToTaskRecordPage
=
()
=>
{
router
.
push
({
path
:
"/osTaskRecord/list"
,
path
:
'/osTaskRecord/list'
,
query
:
{
jump
:
"yes"
,
mode
:
"状态监控"
,
}
,
})
;
}
;
jump
:
'yes'
,
mode
:
'状态监控'
}
}
)
}
// 获取数据统计数据的方法
const
getData
=
async
()
=>
{
const
staticData
=
await
getStatsDataList
({})
;
const
spiderTask
=
await
getSpiderTaskList
({})
;
const
performance
=
await
getPerformanceList
({})
;
totalDataNumber
.
value
=
staticData
.
data
.
totalData
;
totalPageNumber
.
value
=
staticData
.
data
.
ituPage
;
totalTargetNumber
.
value
=
staticData
.
data
.
spaceTrackItemCount
;
successTask
.
value
=
spiderTask
.
data
.
successCount
;
failTask
.
value
=
spiderTask
.
data
.
failCount
;
unusualTask
.
value
=
spiderTask
.
data
.
exceptionCount
;
speed
.
value
=
performance
.
data
.
success
;
errorRate
.
value
=
performance
.
data
.
error
;
unusualRate
.
value
=
performance
.
data
.
exception
;
}
;
const
staticData
=
await
getStatsDataList
({
}
)
const
spiderTask
=
await
getSpiderTaskList
({
}
)
const
performance
=
await
getPerformanceList
({
}
)
totalDataNumber
.
value
=
staticData
.
data
.
totalData
totalPageNumber
.
value
=
staticData
.
data
.
ituPage
totalTargetNumber
.
value
=
staticData
.
data
.
spaceTrackItemCount
successTask
.
value
=
spiderTask
.
data
.
successCount
failTask
.
value
=
spiderTask
.
data
.
failCount
unusualTask
.
value
=
spiderTask
.
data
.
exceptionCount
speed
.
value
=
performance
.
data
.
success
errorRate
.
value
=
performance
.
data
.
error
unusualRate
.
value
=
performance
.
data
.
exception
}
//sidebarStatus
onMounted
(()
=>
{
getData
()
;
})
;
getData
()
}
)
<
/script
>
<
style
lang
=
"scss"
scoped
>
.
dataCard
{
background-image
:
url(
"@/assets/picture/box2.png"
)
;
background
-
image
:
url
(
'@/assets/picture/box2.png'
);
background
-
size
:
100
%
100
%
;
background
-
repeat
:
no
-
repeat
;
// background: #c6ebfc;
...
...
@@ -221,22 +215,37 @@ onMounted(() => {
aspect
-
ratio
:
2
;
margin
-
right
:
30
px
;
--
_g
:
no
-
repeat
radial
-
gradient
(
circle
closest
-
side
,
#
4
edaff
90
%
,
#
0000
);
background
:
var
(
--_g
)
0%
50%
,
var
(
--_g
)
50%
50%
,
var
(
--_g
)
100%
50%
;
background
:
var
(
--
_g
)
0
%
50
%
,
var
(
--
_g
)
50
%
50
%
,
var
(
--
_g
)
100
%
50
%
;
background
-
size
:
calc
(
100
%
/ 3
)
50%
;
animation
:
l3
1
s
infinite
linear
;
}
@
keyframes
l3
{
20
%
{
background-position
:
0%
0%
,
50%
50%
,
100%
50%
;
background
-
position
:
0
%
0
%
,
50
%
50
%
,
100
%
50
%
;
}
40
%
{
background-position
:
0%
100%
,
50%
0%
,
100%
50%
;
background
-
position
:
0
%
100
%
,
50
%
0
%
,
100
%
50
%
;
}
60
%
{
background-position
:
0%
50%
,
50%
100%
,
100%
0%
;
background
-
position
:
0
%
50
%
,
50
%
100
%
,
100
%
0
%
;
}
80
%
{
background-position
:
0%
50%
,
50%
50%
,
100%
100%
;
background
-
position
:
0
%
50
%
,
50
%
50
%
,
100
%
100
%
;
}
}
<
/style
>
src/views/os-status/components/taskCard.vue
View file @
ea172f23
This diff is collapsed.
Click to expand it.
src/views/os-taskRecord/index.vue
View file @
ea172f23
...
...
@@ -50,27 +50,32 @@
:cell-style="{ textAlign: 'center' }"
>
<el-table-column
property=
"number"
label=
"序号"
width=
"55"
type=
"index"
/>
<el-table-column
label=
"任务名称"
show-overflow-tooltip
>
<template
#
default=
"scope"
>
{{
JSON
.
parse
(
scope
.
row
.
options
).
jobName
}}
</
template
>
</el-table-column>
<el-table-column
property=
"spider"
label=
"所属爬虫"
show-overflow-tooltip
/>
<el-table-column
property=
"schedule_mode"
label=
"调度模式"
show-overflow-tooltip
/>
<el-table-column
property=
"run_status"
label=
"调度状态"
show-overflow-tooltip
>
<
template
#
default=
"scope"
>
{{
"已完成"
}}
{{
scope
.
row
.
status
?
'已完成'
:
'未完成'
}}
</
template
>
</el-table-column>
<el-table-column
label=
"错误消息"
show-overflow-tooltip
>
<!-- 当错误消息为空时默认值为'-' -->
<
template
#
default=
"scope"
>
{{
scope
.
row
.
message
||
"-"
}}
{{
scope
.
row
.
message
||
'-'
}}
</
template
>
</el-table-column>
<el-table-column
property=
"run_status"
label=
"运行状态"
show-overflow-tooltip
>
<
template
#
default=
"scope"
>
{{
scope
.
row
.
run_status
===
"unknown"
?
"已结束"
:
scope
.
row
.
run_status
}}
{{
scope
.
row
.
run_status
===
'unknown'
?
'已结束'
:
scope
.
row
.
run_status
}}
</
template
>
</el-table-column>
<el-table-column
label=
"运行耗时/ms"
>
<
template
#
default=
"scope"
>
{{
scope
.
row
.
duration
==
0
?
"-"
:
scope
.
row
.
duration
}}
{{
scope
.
row
.
duration
==
0
?
'-'
:
scope
.
row
.
duration
}}
</
template
>
</el-table-column>
<el-table-column
property=
"create_time"
label=
"采集时间"
width=
"200"
show-overflow-tooltip
/>
...
...
@@ -90,126 +95,123 @@
</template>
<
script
setup
lang=
"ts"
>
import
{
ref
,
onMounted
}
from
"vue"
;
import
Pagination
from
"@/components/pagination/index.vue"
;
import
{
useRoute
}
from
"vue-router"
;
import
{
useRouter
}
from
"vue-router"
;
import
{
getSpiderTaskRecord
}
from
"@/api/spiderTask.ts"
;
import
{
ElMessage
}
from
"element-plus"
;
import
MenuTitle
from
"@/components/MenuTitle.vue"
;
import
TableSearch
from
"@/components/TableSearch.vue"
;
import
{
ref
,
onMounted
}
from
'vue'
import
Pagination
from
'@/components/pagination/index.vue'
import
{
useRoute
}
from
'vue-router'
import
{
useRouter
}
from
'vue-router'
import
{
getSpiderTaskRecord
}
from
'@/api/spiderTask.ts'
import
MenuTitle
from
'@/components/MenuTitle.vue'
import
TableSearch
from
'@/components/TableSearch.vue'
//时间处理库
import
dayjs
from
"dayjs"
;
import
dayjs
from
'dayjs'
// ElConfigProvider 组件
import
{
ElConfigProvider
}
from
"element-plus"
;
import
{
ElConfigProvider
}
from
'element-plus'
// 引入中文包
import
zhCn
from
"element-plus/es/locale/lang/zh-cn"
;
defineOptions
({
name
:
"Pagination"
});
import
zhCn
from
'element-plus/es/locale/lang/zh-cn'
defineOptions
({
name
:
'Pagination'
})
// 更改分页文字
zhCn
.
el
.
pagination
.
total
=
"共 `{total} 条`"
;
zhCn
.
el
.
pagination
.
goto
=
"跳至"
;
zhCn
.
el
.
pagination
.
pagesize
=
"条/页"
;
zhCn
.
el
.
pagination
.
pageClassifier
=
"页"
;
const
route
=
useRoute
()
;
const
router
=
useRouter
()
;
zhCn
.
el
.
pagination
.
total
=
'共 `{total} 条`'
zhCn
.
el
.
pagination
.
goto
=
'跳至'
zhCn
.
el
.
pagination
.
pagesize
=
'条/页'
zhCn
.
el
.
pagination
.
pageClassifier
=
'页'
const
route
=
useRoute
()
const
router
=
useRouter
()
//初始数据为近七天
const
timeValue
=
ref
<
string
[]
>
([])
;
const
tableData
=
ref
([])
;
const
timeValue
=
ref
<
string
[]
>
([])
const
tableData
=
ref
([])
const
pageObj
=
ref
({
total
:
10
,
pageSize
:
10
,
pageNo
:
1
,
pagerCount
:
5
,
})
;
pagerCount
:
5
})
const
goToStatus
=
()
=>
{
if
(
route
.
query
.
mode
===
"状态监控"
)
{
if
(
route
.
query
.
mode
===
'状态监控'
)
{
router
.
push
({
path
:
"/osStatus/list"
,
})
;
path
:
'/osStatus/list'
})
}
else
{
router
.
push
({
path
:
"/osTaskInformation/list"
,
})
;
path
:
'/osTaskInformation/list'
})
}
}
;
}
const
spideOptions
=
[
{
label
:
"dsn_now"
,
value
:
"dsn_now"
,
label
:
'dsn_now'
,
value
:
'dsn_now'
},
{
label
:
"itu_space_expolorer"
,
value
:
"itu_space_expolorer"
,
label
:
'itu_space_expolorer'
,
value
:
'itu_space_expolorer'
},
{
label
:
"space_track"
,
value
:
"space_track"
,
label
:
'space_track'
,
value
:
'space_track'
},
{
label
:
"es_track_transmission"
,
value
:
"es_track_transmission"
,
}
,
]
;
label
:
'es_track_transmission'
,
value
:
'es_track_transmission'
}
]
//表单loading标记
const
tableLoading
=
ref
(
false
)
;
const
tableLoading
=
ref
(
false
)
//重置查询
const
resetQuery
=
()
=>
{
timeValue
.
value
=
[]
;
spidername
.
value
=
""
;
getData
()
;
}
;
timeValue
.
value
=
[]
spidername
.
value
=
''
getData
()
}
// 获取任务执行记录列表
const
getData
=
async
()
=>
{
let
resTime
:
any
[]
=
[]
;
resTime
.
push
(
dayjs
().
subtract
(
7
,
"day"
).
format
(
"YYYY-MM-DD HH:mm:ss"
));
resTime
.
push
(
dayjs
().
format
(
"YYYY-MM-DD HH:mm:ss"
));
let
resTime
:
any
[]
=
[]
resTime
.
push
(
dayjs
().
subtract
(
7
,
'day'
).
format
(
'YYYY-MM-DD HH:mm:ss'
))
resTime
.
push
(
dayjs
().
format
(
'YYYY-MM-DD HH:mm:ss'
))
tableLoading
.
value
=
true
;
tableLoading
.
value
=
true
const
res
=
await
getSpiderTaskRecord
({
page
:
pageObj
.
value
.
pageNo
,
size
:
pageObj
.
value
.
pageSize
,
status
:
"total"
,
times
:
resTime
,
})
;
pageObj
.
value
.
total
=
res
.
data
.
total
;
tableData
.
value
=
res
.
data
.
list
;
tableLoading
.
value
=
false
;
}
;
status
:
'total'
,
times
:
resTime
})
pageObj
.
value
.
total
=
res
.
data
.
total
tableData
.
value
=
res
.
data
.
list
tableLoading
.
value
=
false
}
const
spidername
=
ref
(
""
);
const
spidername
=
ref
(
''
)
//查询数据的方法
const
searchData
=
async
()
=>
{
let
resTime
:
any
[]
=
[]
;
let
resTime
:
any
[]
=
[]
if
(
timeValue
.
value
.
length
!==
0
)
{
const
startTime
=
timeValue
.
value
[
0
]
;
const
endTime
=
timeValue
.
value
[
1
]
;
resTime
.
push
(
dayjs
(
startTime
).
format
(
"YYYY-MM-DD HH:mm:ss"
));
resTime
.
push
(
dayjs
(
endTime
).
format
(
"YYYY-MM-DD HH:mm:ss"
));
const
startTime
=
timeValue
.
value
[
0
]
const
endTime
=
timeValue
.
value
[
1
]
resTime
.
push
(
dayjs
(
startTime
).
format
(
'YYYY-MM-DD HH:mm:ss'
))
resTime
.
push
(
dayjs
(
endTime
).
format
(
'YYYY-MM-DD HH:mm:ss'
))
}
tableLoading
.
value
=
true
;
tableLoading
.
value
=
true
const
res
=
await
getSpiderTaskRecord
({
page
:
pageObj
.
value
.
pageNo
,
size
:
pageObj
.
value
.
pageSize
,
status
:
"total"
,
status
:
'total'
,
spider
:
spidername
.
value
,
times
:
resTime
,
});
pageObj
.
value
.
total
=
res
.
data
.
total
;
tableData
.
value
=
res
.
data
.
list
;
console
.
log
(
tableData
.
value
);
tableLoading
.
value
=
false
;
};
times
:
resTime
})
pageObj
.
value
.
total
=
res
.
data
.
total
tableData
.
value
=
res
.
data
.
list
tableLoading
.
value
=
false
}
onMounted
(()
=>
{
getData
()
;
})
;
getData
()
})
</
script
>
<
style
scoped
>
...
...
@@ -218,7 +220,7 @@ onMounted(() => {
}
/* 工具栏样式 */
.toolbarStyle
{
background-image
:
url(
"@/assets/picture/box3.png"
)
;
background-image
:
url(
'@/assets/picture/box3.png'
)
;
background-size
:
100%
100%
;
background-repeat
:
no-repeat
;
}
...
...
@@ -244,7 +246,7 @@ onMounted(() => {
}
.backStyle
{
background-image
:
url(
"@/assets/picture/back.png"
)
;
background-image
:
url(
'@/assets/picture/back.png'
)
;
background-size
:
100%
100%
;
background-repeat
:
no-repeat
;
height
:
5vh
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment