Skip to content
Toggle navigation
Projects
Groups
Snippets
Help
Toggle navigation
This project
Loading...
Sign in
罗鑫霖
/
vion-tools
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Settings
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit 57a5e9d7
authored
Nov 09, 2023
by
李乾广
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
增加店铺客流来源轨迹分析页面
1 parent
39163ce7
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
1024 additions
and
1 deletions
src/router/index.js
src/views/Main/Main.vue
src/views/SourceTrajectoryAnalysis/ClusterResult/ClusterResult.less
src/views/SourceTrajectoryAnalysis/ClusterResult/ClusterResult.vue
src/views/SourceTrajectoryAnalysis/ClusterResult/ClusterResultApi.js
src/views/SourceTrajectoryAnalysis/SourceTrajectoryAnalysisApi.js
src/views/SourceTrajectoryAnalysis/index.vue
src/router/index.js
View file @
57a5e9d
...
...
@@ -34,6 +34,10 @@ const menuRoute = [
component
:
()
=>
import
(
"@/views/SnapshotCluster1/SnapshotCluster.vue"
),
},
{
path
:
'SourceTrajectoryAnalysis'
,
component
:
()
=>
import
(
"@/views/SourceTrajectoryAnalysis/index.vue"
),
},
{
path
:
'EquipmentTimeErrorVerification'
,
component
:
()
=>
import
(
"@/views/EquipmentTimeErrorVerification/EquipmentTimeErrorVerification.vue"
),
},
...
...
src/views/Main/Main.vue
View file @
57a5e9d
...
...
@@ -17,7 +17,7 @@
</el-header>
<el-main
style=
"padding: 0"
>
<el-container>
<el-aside
style=
"background: #001529"
width=
"
19
0px"
>
<el-aside
style=
"background: #001529"
width=
"
20
0px"
>
<a-menu
mode=
"inline"
theme=
"dark"
v-model:selectedKeys=
"selectedKeys"
@
click=
"onClick"
>
<a-menu-item
:key=
"'/Main/DataRerun'"
>
<div
class=
"flex-vertical-center"
>
...
...
@@ -121,6 +121,12 @@
<span
style=
"padding: 0 5px"
>
抓拍聚类删除
</span>
</div>
</a-menu-item>
<a-menu-item
:key=
"'/Main/SourceTrajectoryAnalysis'"
>
<div
class=
"flex-vertical-center"
>
<img
:src=
"require('./Icons/6.svg')"
style=
"height: auto;width:20px"
/>
<span
style=
"padding: 0 5px"
>
店铺客流来源轨迹分析
</span>
</div>
</a-menu-item>
</a-menu>
</el-aside>
<el-main>
...
...
src/views/SourceTrajectoryAnalysis/ClusterResult/ClusterResult.less
0 → 100644
View file @
57a5e9d
.single-image {
height: 300px;
width: 100%;
}
.direction{
font-weight: 900;
background-color: red;
color: white;
}
.direction1{
background-color: green;
}
.direction0{
background-color: orange;
}
src/views/SourceTrajectoryAnalysis/ClusterResult/ClusterResult.vue
0 → 100644
View file @
57a5e9d
<
template
>
<a-modal
title=
"轨迹详情"
v-model:visible=
"isVisible"
width=
"90%"
class=
"detail-modal"
style=
"top: 50px"
:body-style=
"
{padding:'10px 20px'}" :footer="false">
<a-form
:model=
"queryForm"
layout=
"inline"
:label-col=
"
{ style: { width: '70px' } }">
<a-form-item
style=
"padding: 5px 0"
>
<a-button
type=
"primary"
@
click=
"comparativeFun"
>
特征对比
</a-button>
</a-form-item>
</a-form>
<div
v-loading=
"isLoading"
style=
"padding: 0 0 10px;"
>
<div
class=
"resultContent"
>
<template
v-for=
"person in dataList"
>
<div
class=
"classBox"
:class=
"person.expand?'expand':''"
>
<div
:class=
"person.checked?'checked':''"
>
<div
class=
"boxInfo"
>
<span
class=
"iconExpand"
v-show=
"!person.expand"
>
▶
</span>
<span
class=
"iconExpand"
v-show=
"person.expand"
>
▼
</span>
<span
class=
"expandWord"
@
click=
'expandChange(person)'
>
{{
person
.
expand
?
'收起'
:
'展开'
}}
</span>
<el-checkbox
class=
"checkBox"
v-model=
"person.checked"
@
change=
'checkChange(person)'
></el-checkbox>
人id:
{{
' '
+
person
.
person_unid
}}
图片数量:
{{
person
.
perrsonList
.
length
}}
</div>
<el-row
v-for=
"row in getPagedList(person.perrsonList, 8)"
>
<el-col
:span=
"3"
v-for=
"item in row"
>
<div
style=
"margin: 0 5px"
@
click=
"handleClick(item)"
:class=
"currentItemId==item.id?'actived':''"
>
<div
style=
""
>
<span
@
click=
"downloadTrajectoryFile(item.track_url)"
class=
"downBtn"
>
轨迹
</span>
<span
@
click=
"downloadFile(item.features_url)"
class=
"downBtn downBtn1"
>
特征
</span>
</div>
<el-image
:src=
"item.picture_url"
:fit=
"'fill'"
class=
"single-image"
>
</el-image>
<div>
时间:
{{
item
.
counttime
}}
</div>
<div>
人员类型:
{{
item
.
person_type
==
1
?
'店员'
:(
item
.
person_type
==
0
?
'顾客'
:
'未知'
)
}}
(
{{
item
.
childAdult
==
1
?
'成人'
:(
item
.
childAdult
==
0
?
'儿童'
:
'未知'
)
}}
)
</div>
<div>
性别:
{{
formatGender
(
item
.
gender
)
}}
(
{{
item
.
age
}}
)
</div>
<div
class=
"direction"
:class=
"'direction'+item.direction"
>
方向:
{{
formatDirection
(
item
.
direction
)
}}
</div>
<div>
地点:
{{
item
.
gate_name
}}
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</
template
>
</div>
</div>
</a-modal>
<DetailDialogComparison
ref=
"DetailDialogComparisonRef"
/>
</template>
<
script
>
import
{
computed
,
reactive
,
ref
,
toRaw
}
from
'vue'
import
clusterResultApi
from
'@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
import
{
isArray
}
from
'@/PublicUtil/Judgment'
import
moment
from
'moment'
import
{
filterEmptyValueInObject
,
formatDate
,
formatTime
,
getPagedList
}
from
'@/PublicUtil/PublicUtil'
import
{
ElMessage
}
from
'element-plus'
import
{
useRouter
}
from
'vue-router'
import
DetailDialogComparison
from
"../../ComparisonCapturedPictures/DetailDialogComparisonNew.vue"
;
export
default
{
components
:
{
DetailDialogComparison
,
},
setup
()
{
const
router
=
useRouter
()
const
isVisible
=
ref
(
false
);
// scalar
const
pageNum
=
ref
(
1
)
const
pageSize
=
ref
(
10
)
const
total
=
ref
()
const
isLoading
=
ref
(
false
)
const
currobj
=
ref
({})
const
currentItemId
=
ref
()
// sequence
const
dataList
=
ref
([])
const
accountList
=
ref
([])
const
plazaList
=
ref
([])
const
zoneList
=
ref
([])
const
gateList
=
ref
([])
// const imgModelRef = ref();
const
pagedTableDataList
=
computed
(
()
=>
{
return
getPagedList
(
dataList
.
value
,
8
)
}
)
const
DetailDialogComparisonRef
=
ref
();
const
queryForm
=
reactive
({
account_id
:
[],
plaza_id
:
[],
zone_id
:
[],
gate_id
:
[],
type
:
0
,
direction
:
[
1
,
-
1
,
0
],
picType
:
2
,
personType
:
[
1
,
0
],
date
:
moment
(
moment
().
format
(
'YYYY-MM-DD'
),
'YYYY-MM-DD'
),
startTime
:
moment
(
'00:00:00'
,
'HH:mm:ss'
),
endTime
:
moment
(
'23:59:59'
,
'HH:mm:ss'
),
minPic
:
0
,
maxPic
:
100
,
childAdult
:
[],
})
const
searchCondition
=
ref
({})
if
(
window
.
localStorage
.
getItem
(
'searchCondition'
))
{
searchCondition
.
value
=
JSON
.
parse
(
window
.
localStorage
.
getItem
(
'searchCondition'
));
queryForm
.
type
=
searchCondition
.
value
.
type
;
queryForm
.
zone_id
=
searchCondition
.
value
.
zone_id
;
queryForm
.
gate_id
=
searchCondition
.
value
.
gate_id
;
queryForm
.
direction
=
searchCondition
.
value
.
direction
;
queryForm
.
picType
=
searchCondition
.
value
.
picType
;
queryForm
.
date
=
searchCondition
.
value
.
date
;
queryForm
.
startTime
=
searchCondition
.
value
.
startTime
;
queryForm
.
endTime
=
searchCondition
.
value
.
endTime
;
queryForm
.
minPic
=
searchCondition
.
value
.
minPic
||
0
;
queryForm
.
maxPic
=
searchCondition
.
value
.
maxPic
||
100
;
}
// function
const
onPageNumChange
=
function
(
num
)
{
pageNum
.
value
=
num
confirmSearch
()
}
const
onPageSizeChange
=
function
(
current
,
size
)
{
pageNum
.
value
=
1
pageSize
.
value
=
size
confirmSearch
()
}
const
onAccountChange
=
function
()
{
getPlazaList
(
1
)
// getZoneList()
// getGateList()
}
const
onPlazaChange
=
function
()
{
getZoneList
()
getGateList
()
}
const
onZoneChange
=
function
()
{
getGateList
()
}
const
getPlazaList
=
function
(
val
)
{
queryForm
.
plaza_id
=
[]
plazaList
.
value
=
[]
clusterResultApi
.
getPlazaList
({
account_id
:
queryForm
.
account_id
.
toString
()
}).
then
(
(
r
)
=>
{
if
(
isArray
(
r
))
{
for
(
const
item
of
r
)
{
plazaList
.
value
.
push
({
value
:
item
.
id
,
label
:
item
.
name
,
})
}
if
(
plazaList
.
value
.
length
>
0
)
{
if
(
!
val
&&
searchCondition
.
value
.
plaza_id
&&
searchCondition
.
value
.
plaza_id
.
length
>
0
)
{
queryForm
.
plaza_id
=
searchCondition
.
value
.
plaza_id
}
else
{
queryForm
.
plaza_id
.
push
(
plazaList
.
value
[
0
].
value
)
}
getZoneList
(
1
)
getGateList
(
1
)
confirmSearch
()
}
}
}
)
}
const
getZoneList
=
function
(
val
)
{
zoneList
.
value
=
[]
clusterResultApi
.
getZoneList
({
account_id
:
queryForm
.
account_id
.
toString
(),
plaza_id
:
queryForm
.
plaza_id
.
toString
(),
}).
then
(
(
r
)
=>
{
if
(
isArray
(
r
))
{
for
(
const
item
of
r
)
{
zoneList
.
value
.
push
({
value
:
item
.
id
,
label
:
item
.
name
,
})
}
if
(
zoneList
.
value
.
length
)
{
if
(
val
&&
searchCondition
.
value
.
zone_id
&&
searchCondition
.
value
.
zone_id
.
length
>
0
)
{
queryForm
.
zone_id
=
searchCondition
.
value
.
zone_id
}
else
{
queryForm
.
zone_id
=
[]
}
}
else
{
queryForm
.
zone_id
=
[]
}
}
}
)
}
const
getGateList
=
function
(
val
)
{
gateList
.
value
=
[]
clusterResultApi
.
getGateList
({
account_id
:
queryForm
.
account_id
.
toString
(),
plaza_id
:
queryForm
.
plaza_id
.
toString
(),
zone_id
:
queryForm
.
zone_id
.
toString
(),
type
:
queryForm
.
type
,
}).
then
(
(
r
)
=>
{
if
(
isArray
(
r
.
data
))
{
for
(
const
item
of
r
.
data
)
{
gateList
.
value
.
push
({
value
:
item
.
id
,
label
:
item
.
name
,
})
}
if
(
gateList
.
value
.
length
)
{
if
(
val
&&
searchCondition
.
value
.
gate_id
&&
searchCondition
.
value
.
gate_id
.
length
>
0
)
{
queryForm
.
gate_id
=
searchCondition
.
value
.
gate_id
}
else
{
queryForm
.
gate_id
=
[]
}
}
else
{
queryForm
.
gate_id
=
[]
}
}
}
)
}
const
getAccountList
=
function
()
{
queryForm
.
account_id
=
[]
accountList
.
value
=
[]
clusterResultApi
.
getAccountList
().
then
(
(
r
)
=>
{
if
(
isArray
(
r
))
{
for
(
const
item
of
r
)
{
accountList
.
value
.
push
({
value
:
item
.
id
,
label
:
item
.
name
,
})
}
if
(
accountList
.
value
.
length
)
{
if
(
searchCondition
.
value
.
account_id
&&
searchCondition
.
value
.
account_id
.
length
>
0
)
{
queryForm
.
account_id
=
searchCondition
.
value
.
account_id
}
else
{
queryForm
.
account_id
.
push
(
accountList
.
value
[
0
].
value
)
}
getPlazaList
()
}
}
}
)
}
const
clickSearch
=
function
()
{
pageNum
.
value
=
1
confirmSearch
()
}
const
confirmSearch
=
function
()
{
isLoading
.
value
=
true
const
rawData
=
toRaw
(
queryForm
)
const
data
=
filterEmptyValueInObject
({
account_id
:
rawData
.
account_id
.
toString
(),
type
:
rawData
.
type
,
plaza_id
:
rawData
.
plaza_id
.
toString
(),
zone_id
:
rawData
.
zone_id
.
toString
(),
gate_id
:
rawData
.
gate_id
.
toString
(),
direction
:
rawData
.
direction
.
toString
(),
picType
:
rawData
.
picType
,
personType
:
rawData
.
personType
.
toString
(),
startTime
:
formatDate
(
rawData
.
date
)
+
' '
+
formatTime
(
rawData
.
startTime
),
endTime
:
formatDate
(
rawData
.
date
)
+
' '
+
formatTime
(
rawData
.
endTime
),
minPic
:
rawData
.
minPic
,
maxPic
:
rawData
.
maxPic
,
page
:
pageNum
.
value
-
1
,
pageSize
:
pageSize
.
value
,
childAdult
:
rawData
.
childAdult
.
toString
(),
})
const
storageData
=
filterEmptyValueInObject
({
account_id
:
rawData
.
account_id
,
plaza_id
:
rawData
.
plaza_id
,
zone_id
:
rawData
.
zone_id
,
gate_id
:
rawData
.
gate_id
,
date
:
rawData
.
date
,
})
window
.
localStorage
.
setItem
(
'searchCondition'
,
JSON
.
stringify
(
storageData
))
clusterResultApi
.
getClusterResultList
(
data
).
then
(
(
r
)
=>
{
isLoading
.
value
=
false
sortDataList
(
r
.
data
.
persons
)
r
.
data
.
persons
.
forEach
((
itemPerson
)
=>
{
itemPerson
.
checked
=
false
itemPerson
.
expand
=
false
itemPerson
.
perrsonList
.
forEach
((
item
)
=>
{
if
(
item
.
features_url
)
{
item
.
features_url
=
window
.
_baseImgUrl
+
item
.
features_url
}
if
(
item
.
picture_url
)
{
item
.
picture_url
=
window
.
_baseImgUrl
+
item
.
picture_url
}
if
(
item
.
track_url
)
{
item
.
track_url
=
window
.
_baseImgUrl
+
item
.
track_url
}
})
})
dataList
.
value
=
r
.
data
.
persons
total
.
value
=
r
.
data
.
pageNum
document
.
getElementsByClassName
(
'resultContent'
)[
0
].
scrollTop
=
0
}
)
}
const
formatGender
=
function
(
number
)
{
switch
(
number
)
{
case
1
:
{
return
'男'
}
case
-
1
:
{
return
'未知'
}
case
0
:
{
return
'女'
}
default
:
{
break
}
}
}
const
formatDirection
=
function
(
number
)
{
switch
(
number
)
{
case
1
:
{
return
'进'
}
case
-
1
:
{
return
'出'
}
case
0
:
{
return
'横穿'
}
default
:
{
break
}
}
}
const
sortDataList
=
function
(
list
)
{
list
.
sort
(
(
a
,
b
)
=>
{
return
(
b
.
perrsonList
.
length
-
a
.
perrsonList
.
length
)
}
)
}
const
downloadFile
=
function
(
url
)
{
window
.
open
(
url
)
}
const
downloadTrajectoryFile
=
function
(
url
)
{
window
.
open
(
url
)
}
const
handleClick
=
function
(
data
)
{
currentItemId
.
value
=
data
.
id
currobj
.
value
=
data
;
// clusterResultApi.getBodyPoint({'feature_url':feature}).then(
// (r) => {
// imgModelRef.value.initDialog(url,r.data);
// }
// )
}
const
checkChange
=
function
(
data
)
{
// console.log(data)
}
const
expandChange
=
function
(
data
)
{
dataList
.
value
.
forEach
(
item
=>
{
if
(
data
.
person_unid
==
item
.
person_unid
)
{
item
.
expand
=
!
item
.
expand
}
})
}
// 特征对比
const
comparativeFun
=
function
()
{
const
rawData
=
toRaw
(
queryForm
)
if
(
!
currobj
.
value
.
id
)
{
ElMessage
({
message
:
`请选择图片`
,
type
:
'warning'
})
return
}
if
(
!
currobj
.
value
.
picture_url
)
{
ElMessage
({
message
:
`该图片没有特征,请选择有效的图片`
,
type
:
'warning'
})
return
}
let
parmas
=
{
mall_id
:
currobj
.
value
.
mall_id
,
picType
:
rawData
.
picType
,
pic_id
:
currobj
.
value
.
id
,
countdate
:
formatDate
(
rawData
.
date
),
dataList
:
[]
}
dataList
.
value
.
forEach
(
itemData
=>
{
if
(
itemData
.
checked
&&
itemData
.
checked
==
true
)
{
parmas
.
dataList
.
push
(
itemData
)
}
})
if
(
parmas
.
dataList
&&
parmas
.
dataList
.
length
>
0
)
{
DetailDialogComparisonRef
.
value
.
initDialog
(
currobj
.
value
,
parmas
);
}
else
{
ElMessage
({
message
:
`请选择聚类图片`
,
type
:
'warning'
})
return
}
}
const
contentHeight
=
ref
(
0
)
const
initDialog
=
function
(
data
)
{
console
.
log
(
data
)
queryForm
.
picType
=
data
.
picType
queryForm
.
date
=
moment
(
data
.
startTime
).
format
(
'YYYY-MM-DD'
)
isVisible
.
value
=
true
;
isLoading
.
value
=
true
clusterResultApi
.
getClusterResultList
(
data
).
then
((
r
)
=>
{
// console.log(r)
isLoading
.
value
=
false
sortDataList
(
r
.
data
.
persons
)
r
.
data
.
persons
.
forEach
((
itemPerson
)
=>
{
itemPerson
.
checked
=
false
itemPerson
.
expand
=
false
itemPerson
.
perrsonList
.
forEach
((
item
)
=>
{
if
(
item
.
features_url
)
{
item
.
features_url
=
window
.
_baseImgUrl
+
item
.
features_url
}
if
(
item
.
picture_url
)
{
item
.
picture_url
=
window
.
_baseImgUrl
+
item
.
picture_url
}
if
(
item
.
track_url
)
{
item
.
track_url
=
window
.
_baseImgUrl
+
item
.
track_url
}
})
})
dataList
.
value
=
r
.
data
.
persons
total
.
value
=
r
.
data
.
pageNum
document
.
getElementsByClassName
(
'resultContent'
)[
0
].
scrollTop
=
0
})
contentHeight
.
value
=
window
.
innerHeight
-
310
}
return
{
// scalar
isVisible
,
isLoading
,
pageNum
,
pageSize
,
total
,
currentItemId
,
currobj
,
// sequence
accountList
,
plazaList
,
zoneList
,
gateList
,
pagedTableDataList
,
dataList
,
contentHeight
,
// mapping
queryForm
,
// function
onPageNumChange
,
onPageSizeChange
,
onAccountChange
,
onPlazaChange
,
onZoneChange
,
confirmSearch
,
formatDirection
,
downloadFile
,
getPagedList
,
handleClick
,
comparativeFun
,
checkChange
,
expandChange
,
formatGender
,
downloadTrajectoryFile
,
clickSearch
,
DetailDialogComparisonRef
,
initDialog
,
}
}
}
</
script
>
<
style
lang=
"less"
scoped
>
@import
"./ClusterResult"
;
.actived
{
border
:
3px
solid
#1890ff
;
}
.checkBox
{
margin-left
:
10px
;
}
.boxInfo
{
line-height
:
28px
;
margin-bottom
:
10px
;
}
.classBox
{
margin
:
10px
0
;
border
:
solid
1px
black
;
height
:
485px
;
overflow-y
:
hidden
;
}
.expand
{
height
:
auto
;
overflow
:
auto
;
}
.expandWord
{
color
:
#1890ff
;
margin-right
:
5px
;
cursor
:
pointer
;
float
:
right
;
}
.iconExpand
{
cursor
:
pointer
;
float
:
right
;
color
:
#1890ff
;
margin-right
:
20px
;
}
.checked
{
background-color
:
#bbb
;
}
.resultContent
{
overflow
:
auto
;
min-height
:
520px
;
max-height
:
520px
;
}
.downBtn
{
color
:
#409EFF
;
font-size
:
15px
;
cursor
:
pointer
;
display
:
inline-block
;
width
:
auto
;
}
.downBtn1
{
float
:
right
;
}
</
style
>
\ No newline at end of file
src/views/SourceTrajectoryAnalysis/ClusterResult/ClusterResultApi.js
0 → 100644
View file @
57a5e9d
import
axiosInstance
from
"@/Request/PublicAxiosInstance"
import
{
filterEmptyValueInObject
}
from
"@/PublicUtil/PublicUtil"
class
ClusterResultApi
{
getClusterResultList
(
data
)
{
return
axiosInstance
.
request
(
{
method
:
'GET'
,
url
:
`/faceRecognitions/faceRecordGroup`
,
params
:
filterEmptyValueInObject
(
data
)
}
)
}
getAccountList
()
{
return
axiosInstance
.
request
(
{
method
:
'GET'
,
url
:
`/accounts`
,
}
)
}
getPlazaList
(
data
)
{
return
axiosInstance
.
request
(
{
method
:
'GET'
,
url
:
`/malls`
,
params
:
filterEmptyValueInObject
(
{
accountIds
:
data
.
account_id
},
)
}
)
}
getZoneList
(
data
)
{
return
axiosInstance
.
request
(
{
method
:
'GET'
,
url
:
`/zones/zoneList`
,
params
:
filterEmptyValueInObject
(
{
account_id
:
data
.
account_id
,
plaza_id
:
data
.
plaza_id
,
},
)
}
)
}
getGateList
(
data
)
{
return
axiosInstance
.
request
(
{
method
:
'GET'
,
url
:
`/gates/gateByInfo`
,
params
:
filterEmptyValueInObject
(
{
account_id
:
data
.
account_id
,
plaza_id
:
data
.
plaza_id
,
zone_id
:
data
.
zone_id
,
type
:
data
.
type
,
},
)
}
)
}
getBodyPoint
(
data
)
{
return
axiosInstance
.
request
(
{
method
:
'GET'
,
url
:
`/feature/bodyPoint`
,
params
:
filterEmptyValueInObject
(
data
)
}
)
}
}
const
clusterResultApi
=
new
ClusterResultApi
()
export
default
clusterResultApi
src/views/SourceTrajectoryAnalysis/SourceTrajectoryAnalysisApi.js
0 → 100644
View file @
57a5e9d
import
axiosInstance
from
"@/Request/PublicAxiosInstance"
import
{
filterEmptyValueInObject
}
from
"@/PublicUtil/PublicUtil"
class
SourceTrajectoryAnalysisApi
{
getList
(
data
)
{
return
axiosInstance
.
request
(
{
method
:
'GET'
,
url
:
`/track/list`
,
params
:
filterEmptyValueInObject
(
data
)
}
)
}
}
const
sourceTrajectoryAnalysisApi
=
new
SourceTrajectoryAnalysisApi
()
export
default
sourceTrajectoryAnalysisApi
src/views/SourceTrajectoryAnalysis/index.vue
0 → 100644
View file @
57a5e9d
<
template
>
<a-form
:model=
"queryForm"
layout=
"inline"
>
<a-form-item
label=
"集团:"
style=
"padding: 5px 0;margin-bottom: 24px;"
>
<a-select
v-model:value=
"queryForm.account_id"
style=
"width: 280px"
@
change=
"onAccountChange"
:options=
"accountList"
optionFilterProp=
"label"
show-search
>
</a-select>
</a-form-item>
<a-form-item
label=
"广场:"
style=
"padding: 5px 0;margin-bottom: 24px;"
>
<a-select
v-model:value=
"queryForm.plaza_id"
style=
"width: 280px"
@
change=
"onPlazaChange"
:options=
"plazaList"
optionFilterProp=
"label"
show-search
>
</a-select>
</a-form-item>
<a-form-item
label=
"区域信息:"
style=
"padding: 5px 0;margin-bottom: 24px;"
>
<a-select
v-model:value=
"queryForm.zone_id"
style=
"width: 240px"
@
change=
"onZoneChange"
:options=
"zoneList"
optionFilterProp=
"label"
show-search
>
</a-select>
</a-form-item>
<a-form-item
label=
"日期:"
style=
"padding: 5px 0;margin-bottom: 24px;"
>
<a-date-picker
v-model:value=
"queryForm.countDate"
style=
"width: 280px"
/>
</a-form-item>
<a-form-item
style=
"padding: 5px 0;margin-bottom: 24px;"
>
<a-button
type=
"primary"
@
click=
"search"
>
查询
</a-button>
</a-form-item>
</a-form>
<a-table
:dataSource=
"dataList"
v-loading=
"isLoading"
:columns=
"[
{
title: 'person_unid',
dataIndex: 'personUnid',
align:'center',
slots: {
customRender: 'accountname',
},
},
{
title: '第一次出现的地点',
dataIndex: 'firstGateName',
align:'center',
},
{
title: '第一次出现的时间',
dataIndex: 'fistCountTime',
align:'center',
},
{
title: '进入时间',
dataIndex: 'inTime',
align:'center',
},
{
title: '离开时间',
dataIndex: 'outTime',
align:'center',
},
{
title: '停留时间(毫秒)',
dataIndex: 'residenceTime',
align:'center',
},
{
title: '最后一次出现的地点',
dataIndex: 'lastGateName',
align:'center',
},
{
title: '最后一次出现的时间',
dataIndex: 'lastCountTime',
align:'center',
},
{
title: '到过的店铺数量',
dataIndex: 'inZoneNum',
align:'center',
},
{
title: '是否多次进出',
dataIndex: 'manyTimes',
align:'center',
},
{
title: '操作',
dataIndex: 'operation',
align: 'center',
width:100,
slots: {
customRender: 'operation',
},
}
]" :pagination="false">
<template
#
operation=
"
{ record }">
<div>
<a-button
@
click=
"showDetail(record)"
type=
"primary"
>
查看详情
</a-button>
</div>
</
template
>
</a-table>
<a-pagination
v-model:current=
"pageNum"
v-model:pageSize=
"pageSize"
:total=
"total"
:show-total=
"total => `共 ${total} 条`"
:pageSizeOptions=
"['10', '20']"
@
change=
"onPageNumChange"
@
showSizeChange=
"onPageSizeChange"
show-size-changer
show-quick-jumper
style=
"text-align:center;margin-top: 10px;"
/>
<ClusterResult
ref=
"ClusterResultRef"
/>
</template>
<
script
>
import
moment
from
'moment'
import
{
isArray
}
from
'@/PublicUtil/Judgment'
import
{
defineComponent
,
ref
,
toRaw
,
reactive
}
from
'vue'
import
{
filterEmptyValueInObject
,
formatDate
}
from
'@/PublicUtil/PublicUtil'
import
clusterResultApi
from
'@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
import
SourceTrajectoryAnalysisApi
from
'@/views/SourceTrajectoryAnalysis/SourceTrajectoryAnalysisApi'
import
ClusterResult
from
'@/views/SourceTrajectoryAnalysis/ClusterResult/ClusterResult.vue'
export
default
defineComponent
({
components
:
{
ClusterResult
,
},
setup
()
{
const
ClusterResultRef
=
ref
();
const
pageNum
=
ref
(
1
)
const
pageSize
=
ref
(
10
)
const
total
=
ref
()
const
dataList
=
ref
([])
const
isLoading
=
ref
(
false
)
const
accountList
=
ref
([])
const
plazaList
=
ref
([])
const
zoneList
=
ref
([])
const
queryForm
=
reactive
({
account_id
:
''
,
plaza_id
:
''
,
zone_id
:
''
,
countDate
:
moment
(
moment
().
format
(
'YYYY-MM-DD'
),
'YYYY-MM-DD'
)
})
const
searchCondition
=
ref
({})
// if (window.localStorage.getItem('searchCondition')) {
// searchCondition.value = JSON.parse(window.localStorage.getItem('searchCondition'));
// queryForm.account_id = searchCondition.value.zone_id;
// queryForm.plaza_id = searchCondition.value.plaza_id;
// }
const
getAccountList
=
function
()
{
queryForm
.
account_id
=
''
accountList
.
value
=
[]
clusterResultApi
.
getAccountList
().
then
(
(
r
)
=>
{
if
(
isArray
(
r
))
{
for
(
const
item
of
r
)
{
accountList
.
value
.
push
({
value
:
item
.
id
,
label
:
item
.
name
,
})
}
if
(
accountList
.
value
.
length
)
{
if
(
searchCondition
.
value
.
account_id
&&
searchCondition
.
value
.
account_id
.
length
>
0
)
{
queryForm
.
account_id
=
searchCondition
.
value
.
account_id
}
else
{
queryForm
.
account_id
=
accountList
.
value
[
0
].
value
}
getPlazaList
()
}
}
}
)
}
const
onAccountChange
=
function
()
{
getPlazaList
(
1
)
}
const
getPlazaList
=
function
(
val
)
{
queryForm
.
plaza_id
=
''
plazaList
.
value
=
[]
if
(
!
queryForm
.
account_id
.
toString
())
{
return
}
clusterResultApi
.
getPlazaList
({
account_id
:
queryForm
.
account_id
.
toString
()
}).
then
(
(
r
)
=>
{
if
(
isArray
(
r
))
{
for
(
const
item
of
r
)
{
plazaList
.
value
.
push
({
value
:
item
.
id
,
label
:
item
.
name
,
})
}
if
(
plazaList
.
value
.
length
>
0
)
{
if
(
!
val
&&
searchCondition
.
value
.
plaza_id
&&
searchCondition
.
value
.
plaza_id
.
length
>
0
)
{
queryForm
.
plaza_id
=
searchCondition
.
value
.
plaza_id
}
else
{
queryForm
.
plaza_id
=
plazaList
.
value
[
0
].
value
}
getZoneList
(
1
)
}
}
}
)
}
const
onPlazaChange
=
function
()
{
getZoneList
(
1
)
}
const
getZoneList
=
function
(
val
)
{
queryForm
.
zone_id
=
''
zoneList
.
value
=
[]
clusterResultApi
.
getZoneList
({
account_id
:
queryForm
.
account_id
,
plaza_id
:
queryForm
.
plaza_id
,
}).
then
(
(
r
)
=>
{
if
(
isArray
(
r
))
{
for
(
const
item
of
r
)
{
zoneList
.
value
.
push
({
value
:
item
.
id
,
label
:
item
.
name
,
})
}
if
(
zoneList
.
value
.
length
)
{
if
(
val
&&
searchCondition
.
value
.
zone_id
&&
searchCondition
.
value
.
zone_id
.
length
>
0
)
{
queryForm
.
zone_id
=
searchCondition
.
value
.
zone_id
}
else
{
queryForm
.
zone_id
=
zoneList
.
value
[
0
].
value
}
}
confirmSearch
()
}
}
)
}
const
onZoneChange
=
function
()
{
// confirmSearch()
}
const
onPageNumChange
=
function
(
num
)
{
pageNum
.
value
=
num
confirmSearch
()
}
const
onPageSizeChange
=
function
(
current
,
size
)
{
pageNum
.
value
=
1
pageSize
.
value
=
size
confirmSearch
()
}
const
confirmSearch
=
function
()
{
isLoading
.
value
=
true
const
rawData
=
toRaw
(
queryForm
)
const
data
=
filterEmptyValueInObject
({
page
:
pageNum
.
value
-
1
,
pageSize
:
pageSize
.
value
,
countDate
:
formatDate
(
rawData
.
countDate
),
zoneId
:
rawData
.
zone_id
,
mallId
:
rawData
.
plaza_id
,
})
dataList
.
value
=
[],
total
.
value
=
0
SourceTrajectoryAnalysisApi
.
getList
(
data
).
then
(
(
r
)
=>
{
isLoading
.
value
=
false
if
(
r
.
msg_code
==
200
)
{
dataList
.
value
=
r
.
data
.
persons
total
.
value
=
r
.
data
.
pageNum
}
}
)
}
const
search
=
function
()
{
pageNum
.
value
=
1
pageSize
.
value
=
10
confirmSearch
()
}
const
__main
=
function
()
{
getAccountList
()
}
const
showDetail
=
function
(
row
)
{
const
rawData
=
toRaw
(
queryForm
)
const
data
=
filterEmptyValueInObject
({
page
:
0
,
pageSize
:
10
,
account_id
:
rawData
.
account_id
,
plaza_id
:
rawData
.
plaza_id
,
type
:
0
,
picType
:
2
,
startTime
:
formatDate
(
rawData
.
countDate
)
+
' 00:00:00'
,
endTime
:
formatDate
(
rawData
.
countDate
)
+
' 23:59:59'
,
personUnid
:
row
.
personUnid
,
direction
:
'-1,1'
,
})
// console.log(data)
ClusterResultRef
.
value
.
initDialog
(
data
);
}
__main
()
return
{
ClusterResultRef
,
accountList
,
onAccountChange
,
plazaList
,
zoneList
,
onPlazaChange
,
onZoneChange
,
queryForm
,
pageNum
,
pageSize
,
total
,
isLoading
,
dataList
,
onPageNumChange
,
onPageSizeChange
,
confirmSearch
,
search
,
showDetail
}
},
})
</
script
>
\ No newline at end of file
Write
Preview
Markdown
is supported
Attach a file
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 post a comment