Skip to content
Toggle navigation
Projects
Groups
Snippets
Help
Toggle navigation
This project
Loading...
Sign in
李君
/
carrefour
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 0e66488b
authored
Oct 23, 2022
by
李君
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
设备时刻查询
1 parent
ccd7ea4a
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
347 additions
and
0 deletions
src/api/queueManagementApi.js
src/router/modules/queueManagement.js
src/views/queueManagement/dataPlaybackTime/index.vue
src/api/queueManagementApi.js
View file @
0e66488
...
...
@@ -58,6 +58,10 @@ const queueManagementApi = {
getSnapshotChart
(
params
,
config
)
{
return
req
(
'get'
,
`/queuing/snapshot/chart`
,
params
,
config
)
},
// 时刻回放
getDistributionDetail
(
params
,
config
)
{
return
req
(
'get'
,
`/queuing/distribution/detail`
,
params
,
config
)
},
}
...
...
src/router/modules/queueManagement.js
View file @
0e66488
...
...
@@ -67,6 +67,14 @@ const queueManagementRouterMap = {
permissionPath
:
'snapshotPredicted'
},
component
:
()
=>
import
(
'@/views/queueManagement/snapshotPredicted/'
),
},
{
name
:
'dataPlaybackTime'
,
path
:
'/queueManagement/dataPlaybackTime'
,
meta
:
{
permissionPath
:
'dataPlaybackTime'
},
component
:
()
=>
import
(
'@/views/queueManagement/dataPlaybackTime/'
),
}
]
...
...
src/views/queueManagement/dataPlaybackTime/index.vue
0 → 100644
View file @
0e66488
<
template
>
<div
class=
"clerk-wrapper queueManagementContainer"
>
<div
class=
"header manage-head-wrapper"
>
<el-form
class=
"boxShadow searchFormSocial"
ref=
"form"
label-width=
"100px"
inline
>
<el-form-item
:label=
"$t('table.mall')"
>
<el-select
v-model=
"searchForm.mallId"
filterable
:placeholder=
"$t('pholder.select')"
@
change=
"mallChange"
>
<el-option
v-for=
"item in mallListForTerm"
:key=
"item.id"
:label=
"item.name"
:value=
"item.id"
/>
</el-select>
</el-form-item>
<el-form-item
:label=
"$t('table.areaName')"
>
<el-select
v-model=
"searchForm.cashierAreaId"
:placeholder=
"$t('pholder.areaSelect')"
@
change=
"areaChange"
>
<el-option
v-for=
"item in areaListData"
:key=
"item.id"
:label=
"item.name"
:value=
"item.id"
/>
</el-select>
</el-form-item>
<el-form-item
:label=
"$t('table.deviceNum')"
>
<el-select
v-model=
"searchForm.serialNum"
:placeholder=
"$t('pholder.select')"
@
change=
"deviceChange"
>
<el-option
v-for=
"item in deviceList"
:key=
"item.serialnum"
:label=
"item.localIp+'——'+item.serialnum"
:value=
"item.serialnum"
/>
</el-select>
</el-form-item>
<el-form-item
:label=
"$t('table.date')"
>
<el-date-picker
type=
"date"
:placeholder=
"$t('pholder.date')"
v-model=
"searchForm.countDate"
></el-date-picker>
<el-time-picker
v-model=
"searchForm.time"
:placeholder=
"$t('pholder.date')"
>
</el-time-picker>
</el-form-item>
<el-form-item>
<el-button
type=
"primary"
class=
"search-btn"
size=
"mini"
plain
@
click=
"searchFun"
>
{{
$t
(
'button.search'
)
}}
</el-button>
<el-button
type=
"primary"
class=
"search-btn"
size=
"mini"
plain
@
click=
"playFun('reduce')"
>
{{
$t
(
'button.previous'
)
}}
</el-button>
<el-button
type=
"primary"
class=
"search-btn"
size=
"mini"
plain
@
click=
"playFun('add')"
>
{{
$t
(
'button.next'
)
}}
</el-button>
</el-form-item>
</el-form>
</div>
<div
class=
"manage-content"
>
<div
class=
"asis-table-content"
v-loading=
"loading"
>
<div
class=
"xy-container"
>
<canvas
id=
"editXycanvas"
class=
"xycanvas"
></canvas>
</div>
<canvas
id=
'container'
class=
"boxShadow"
></canvas>
</div>
</div>
</div>
</
template
>
<
script
>
import
moment
from
'moment'
export
default
{
data
()
{
return
{
editChannelImg
:
''
,
startTime
:
''
,
endTime
:
''
,
mallListForTerm
:
[],
areaListData
:
[],
areaOneObj
:{},
loading
:
false
,
searchForm
:
{
mallId
:
''
,
cashierAreaId
:
''
,
serialNum
:
''
,
countDate
:
new
Date
(),
time
:
new
Date
(),
},
canvas
:
null
,
//canvas实例
ctx
:
null
,
//ctx画笔
widthX
:
0
,
//缩放比例X
heightX
:
0
,
//缩放比例Y
dataList
:
[],
//点位坐标
pic
:
null
,
channelNum
:
0
,
deviceList
:[],
deviceObj
:{},
canvasDevice
:
null
,
//canvas实例
ctxDevice
:
null
,
openTime
:[]
}
},
mounted
()
{
this
.
getMallListForTerm
();
this
.
canvas
=
document
.
getElementById
(
"container"
);
this
.
ctx
=
this
.
canvas
.
getContext
(
"2d"
);
this
.
canvas
.
width
=
document
.
body
.
clientWidth
-
248
;
this
.
canvas
.
height
=
380
;
this
.
canvasDevice
=
document
.
getElementById
(
"editXycanvas"
);
this
.
ctxDevice
=
this
.
canvasDevice
.
getContext
(
"2d"
);
this
.
canvasDevice
.
width
=
640
;
this
.
canvasDevice
.
height
=
360
;
this
.
loading
=
true
;
},
computed
:
{
tableHeight
()
{
const
windowInnerHeight
=
window
.
innerHeight
;
return
windowInnerHeight
-
windowInnerHeight
*
0.24
;
},
},
methods
:
{
// 广场
getMallListForTerm
()
{
this
.
mallListForTerm
=
[];
this
.
searchForm
.
mallId
=
""
;
this
.
$api
.
base
.
mall
({
accountId
:
this
.
$cookie
.
get
(
'accountId'
),
status_arr
:
"1,3"
}).
then
(
data
=>
{
let
result
=
data
.
data
;
if
(
result
.
data
.
length
)
{
if
(
this
.
getSessionLocal
(
"mallId"
))
{
this
.
searchForm
.
mallId
=
Number
(
this
.
getSessionLocal
(
"mallId"
));
}
else
{
this
.
searchForm
.
mallId
=
result
.
data
[
0
].
id
;
this
.
setSessionLocal
(
"mallId"
,
this
.
searchForm
.
mallId
);
}
// this.getOpenTime()
this
.
mallListForTerm
=
result
.
data
;
}
this
.
getAreaList
(
this
.
searchForm
.
mallId
);
})
},
mallChange
(
val
)
{
this
.
setSessionLocal
(
"mallId"
,
val
);
this
.
searchForm
.
cashierAreaId
=
''
this
.
channelNum
=
0
this
.
getAreaList
(
val
)
// this.getOpenTime()
},
// 获取门店开门关闭时间
getOpenTime
(){
this
.
$api
.
base
.
getOpentimeList
({
mallId
:
this
.
searchForm
.
mallId
}).
then
(
res
=>
{
let
result
=
res
.
data
;
if
(
result
.
code
==
200
){
let
data
=
result
.
data
.
list
[
0
]
let
endTime
=
data
.
endTime
if
(
endTime
.
substring
(
10
)
==
'00:00:00'
){
endTime
=
endTime
.
substring
(
0
,
10
)
+
'23:59:59'
}
this
.
openTime
=
[
moment
(
data
.
startTime
).
format
(
'YYYY-MM-DD HH:mm:ss'
),
moment
(
endTime
).
format
(
'YYYY-MM-DD HH:mm:ss'
)]
}
})
},
// 区域
getAreaList
(
val
)
{
this
.
areaListData
=
[];
this
.
$api
.
queueManagementApi
.
getAreaList
({
mallId
:
val
,
pageNum
:
1
,
pageSize
:
999999
}).
then
(
res
=>
{
let
result
=
res
.
data
;
if
(
result
.
code
==
200
)
{
if
(
result
.
data
.
list
&&
result
.
data
.
list
.
length
>
0
)
{
this
.
searchForm
.
cashierAreaId
=
result
.
data
.
list
[
0
].
id
this
.
areaListData
=
result
.
data
.
list
;
this
.
areaOneObj
=
result
.
data
.
list
[
0
]
this
.
pic
=
new
Image
();
this
.
pic
.
src
=
this
.
areaListData
[
0
]
&&
window
.
_vionConfig
.
picUrl
+
this
.
areaListData
[
0
].
pic
;
this
.
pic
.
onload
=
()
=>
{
this
.
drawCirlce
();
};
this
.
getDeviceList
()
}
}
})
},
areaChange
(
val
){
this
.
areaOneObj
=
this
.
areaListData
.
find
(
item
=>
item
.
id
==
val
);
this
.
pic
=
new
Image
();
this
.
pic
.
src
=
this
.
areaOneObj
&&
window
.
_vionConfig
.
picUrl
+
this
.
areaOneObj
.
pic
;
this
.
pic
.
onload
=
()
=>
{
this
.
drawCirlce
();
};
this
.
getDeviceList
()
},
// 设备
getDeviceList
(){
this
.
$api
.
queueManagementApi
.
getDevices
({
areaId
:
this
.
searchForm
.
cashierAreaId
}).
then
(
res
=>
{
let
data
=
res
.
data
.
data
if
(
data
&&
data
.
length
>
0
){
data
.
forEach
(
item
=>
{
item
.
picUrl
=
window
.
_vionConfig
.
picUrl
+
"/snapshot/real/"
+
item
.
serialnum
+
"-01.jpg?t="
+
Date
.
parse
(
new
Date
())
/
1000
;
item
.
coordinate
&&
(
item
.
coordinate
=
JSON
.
parse
(
item
.
coordinate
))
})
this
.
searchForm
.
serialNum
=
data
[
0
].
serialnum
this
.
deviceList
=
data
;
this
.
deviceObj
=
this
.
deviceList
[
0
]
this
.
editChannelImg
=
new
Image
();
this
.
editChannelImg
.
src
=
this
.
deviceObj
.
picUrl
;
this
.
editChannelImg
.
onload
=
()
=>
{
this
.
drawCirlceDevice
();
};
this
.
searchFun
()
}
});
},
deviceChange
(
val
){
this
.
deviceList
.
forEach
(
item
=>
{
if
(
item
.
serialnum
==
val
){
this
.
deviceObj
==
{...
item
}
this
.
editChannelImg
=
new
Image
();
this
.
editChannelImg
.
src
=
this
.
deviceObj
.
picUrl
this
.
editChannelImg
.
onload
=
()
=>
{
this
.
drawCirlceDevice
();
};
}
})
},
playFun
(
type
){
let
openT
=
moment
(
this
.
searchForm
.
countDate
).
format
(
'YYYY-MM-DD'
)
+
' '
+
moment
(
this
.
searchForm
.
time
).
format
(
'HH:mm:ss'
);
let
currTime
=
new
Date
(
openT
).
getTime
()
console
.
log
(
currTime
)
if
(
type
==
'add'
){
this
.
searchForm
.
time
=
moment
(
currTime
+
3000
).
format
(
'YYYY-MM-DD HH:mm:ss'
);
this
.
getDistribution
(
moment
(
currTime
+
3000
).
format
(
'HH:mm:ss'
))
}
else
{
this
.
searchForm
.
time
=
moment
(
currTime
-
3000
).
format
(
'YYYY-MM-DD HH:mm:ss'
);
this
.
getDistribution
(
moment
(
currTime
-
3000
).
format
(
'HH:mm:ss'
))
}
},
searchFun
()
{
this
.
getDistribution
()
},
// 获取主页大屏人员点位分布
async
getDistribution
(
time
)
{
let
countDate
=
''
if
(
time
){
this
.
searchForm
.
countDate
=
moment
(
this
.
searchForm
.
countDate
).
format
(
'YYYY-MM-DD'
)
+
' '
+
time
}
else
{
this
.
searchForm
.
countDate
=
moment
(
this
.
searchForm
.
countDate
).
format
(
'YYYY-MM-DD'
)
+
' '
+
moment
(
this
.
searchForm
.
time
).
format
(
'HH:mm:ss'
)
}
let
parmas
=
{
cashierAreaId
:
this
.
searchForm
.
cashierAreaId
,
countDate
:
this
.
searchForm
.
countDate
,
serialNum
:
this
.
searchForm
.
serialNum
,
}
let
res
=
await
this
.
$api
.
queueManagementApi
.
getDistributionDetail
(
parmas
);
let
{
code
,
data
}
=
res
.
data
;
if
(
code
==
200
)
{
this
.
loading
=
false
;
let
red
=
data
.
red
?
data
.
red
:
[];
let
green
=
data
.
green
?
data
.
green
:
[];
this
.
dataList
=
[
...
red
.
map
((
item
)
=>
({
...
item
,
status
:
1
})),
...
green
.
map
((
item
)
=>
({
...
item
,
status
:
0
})),
];
this
.
drawCirlce
();
this
.
drawCirlceDevice
()
}
},
// 画圆点
drawCirlce
()
{
if
(
!
this
.
pic
)
return
false
;
this
.
ctx
.
clearRect
(
0
,
0
,
this
.
canvas
.
width
,
this
.
canvas
.
height
);
this
.
ctx
.
drawImage
(
this
.
pic
,
0
,
0
,
this
.
canvas
.
width
,
this
.
canvas
.
height
);
this
.
dataList
.
forEach
((
item
)
=>
{
if
(
item
.
status
==
1
)
{
this
.
ctx
.
fillStyle
=
"red"
;
}
else
{
this
.
ctx
.
fillStyle
=
"green"
;
}
this
.
ctx
.
beginPath
();
this
.
ctx
.
arc
(
(
item
.
rx
/
100
)
*
this
.
canvas
.
width
,
(
item
.
ry
/
100
)
*
this
.
canvas
.
height
,
5
,
0
,
2
*
Math
.
PI
);
this
.
ctx
.
fill
();
});
},
drawCirlceDevice
()
{
if
(
!
this
.
editChannelImg
)
return
false
;
this
.
ctxDevice
.
clearRect
(
0
,
0
,
this
.
canvasDevice
.
width
,
this
.
canvasDevice
.
height
);
this
.
ctxDevice
.
drawImage
(
this
.
editChannelImg
,
0
,
0
,
this
.
canvasDevice
.
width
,
this
.
canvasDevice
.
height
);
this
.
dataList
.
forEach
((
item
)
=>
{
if
(
item
.
status
==
1
)
{
this
.
ctxDevice
.
fillStyle
=
"red"
;
}
else
{
this
.
ctxDevice
.
fillStyle
=
"green"
;
}
this
.
ctxDevice
.
beginPath
();
this
.
ctxDevice
.
arc
(
(
item
.
x
/
1920
)
*
this
.
canvasDevice
.
width
,
(
item
.
y
/
1080
)
*
this
.
canvasDevice
.
height
,
5
,
0
,
2
*
Math
.
PI
);
this
.
ctxDevice
.
fill
();
});
},
}
}
</
script
>
<
style
scoped=
"scoped"
lang=
"less"
>
/
deep
/
.el-select
{
width
:
180px
;
}
/
deep
/
.el-date-editor
{
width
:
180px
;
}
/
deep
/
.el-date-editor--timerange.el-input__inner
{
width
:
220px
;
}
/
deep
/
.el-form-item__label
{
height
:
30px
;
line-height
:
30px
!important
;
}
/
deep
/
.el-form-item__content
{
height
:
30px
;
line-height
:
30px
;
}
/
deep
/
.el-date-editor
.el-range-separator
{
line-height
:
22px
;
}
.time-box1
{
width
:
100%
;
text-align
:
center
;
margin-top
:
5px
;
height
:
30px
;
line-height
:
30px
;
}
#container
{
margin-top
:
10px
;
margin-bottom
:
10px
;
}
#colorBox
{
border
:
1px
solid
#ccc
;
margin-top
:
10px
;
height
:
52px
;
box-sizing
:
border-box
;
}
</
style
>
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