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 1b086577
authored
Nov 02, 2022
by
李君
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
优化
1 parent
0e99bfad
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
311 additions
and
123 deletions
src/views/queueManagement/dataPlayback/index.vue
src/views/queueManagement/queueLive/index.vue
src/views/queueManagement/dataPlayback/index.vue
View file @
1b08657
...
...
@@ -39,17 +39,12 @@
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
>
Customers in Queue
<span
class=
"aiot_title_item_unit"
>
(Customers)
</span></div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
customersInQueue
}}
</div>
<!--
<div
class=
"aiot_title_item_unit"
></div>
-->
</div>
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
>
Average Waiting Time
</div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
averageWaitingTime
[
0
]
}}
<small
style=
"marginRight:5px"
>
min
</small>
{{
topData
.
averageWaitingTime
[
1
]
}}
<small
style=
"marginLeft:4px"
>
s
</small></div>
</div>
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
>
Estimated Waiting Time
</div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
predictedWaiting
[
0
]
}}
<small
style=
"marginRight:5px"
>
min
</small>
{{
topData
.
predictedWaiting
[
1
]
}}
<small
style=
"marginLeft:4px"
>
s
</small></div>
</div>
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
>
Average Service Time
</div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
averageServiceTime
[
0
]
}}
<small
style=
"marginRight:5px"
>
min
</small>
{{
topData
.
averageServiceTime
[
1
]
}}
<small
style=
"marginLeft:4px"
>
s
</small></div>
</div>
...
...
@@ -58,32 +53,36 @@
<div
class=
"aiot_title_item_num"
>
{{
topData
.
averageQueuingTime
[
0
]
}}
<small
style=
"marginRight:5px"
>
min
</small>
{{
topData
.
averageQueuingTime
[
1
]
}}
<small
style=
"marginLeft:4px"
>
s
</small></div>
</div>
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
>
Customers Served
<span
class=
"aiot_title_item_unit"
>
(Customers)
</span></div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
customersServedTillNow
}}
</div>
<div
class=
"aiot_title_item_text"
>
Estimated Waiting Time
</div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
predictedWaiting
[
0
]
}}
<small
style=
"marginRight:5px"
>
min
</small>
{{
topData
.
predictedWaiting
[
1
]
}}
<small
style=
"marginLeft:4px"
>
s
</small></div>
</div>
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
>
Open Counters
</div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
openCounters
}}
/
{{
topData
.
totalCounters
}}
</div>
</div>
</div>
<div
class=
"aiot_title"
>
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
>
Carts
&
Baskets
</div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
carts
}}
&
{{
topData
.
baskets
}}
</div>
<div
class=
"aiot_title_item_text"
>
Customers Served
<span
class=
"aiot_title_item_unit"
>
(Customers)
</span></div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
customersServedTillNow
}}
</div>
</div>
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
>
Customers Served Per Hour
</div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
throughput
}}
</div>
</div>
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
style=
"font-size: 13px !important;"
>
Customers Abandoned the Queue
</div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
customersAbandonedQueue
}}
</div>
</div>
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
>
Open Counter
s
</div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
openCounters
}}
/
{{
topData
.
totalCounter
s
}}
</div>
<div
class=
"aiot_title_item_text"
>
Carts
&
Basket
s
</div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
carts
}}
&
{{
topData
.
basket
s
}}
</div>
</div>
<!--
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
>
Crowded Counters
</div>
<div
class=
"aiot_title_item_num"
>
0
</div>
</div>
-->
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
>
Customers Served Per Hour
</div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
throughput
}}
</div>
</div>
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
>
Store Entry
<span
class=
"aiot_title_item_unit"
>
(Customers)
</span></div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
storeEntry
}}
</div>
<!--
<div
class=
"aiot_title_item_unit"
>
Customers
</div>
-->
...
...
@@ -103,24 +102,85 @@
</div>
-->
<!--
<div
id=
"colorBox"
v-show=
"progressShow"
></div>
-->
</div>
<el-row
class=
"chart"
:gutter=
"5"
>
<el-col
:span=
"12"
>
<div
class=
"aiot_bottom"
>
<div
class=
"tabel"
>
<div
class=
"tabel_title"
>
<!--
<span>
{{
$t
(
'home.queuingmonitoring'
)
}}
</span>
-->
<span>
Queue Monitoring
</span>
<div
class=
"lenged"
>
<p>
<small>
{{
safeingNum
}}
~
{{
warningNum
}}
</small><small
class=
"colorBox colorBox_yellow"
></small>
</p>
<p>
<small>
>
{{
warningNum
}}
</small><small
class=
"colorBox colorBox_red"
></small>
</p>
</div>
</div>
<el-table
:data=
"tableData"
style=
"width: 100%"
:row-class-name=
"tableRowClassName"
height=
'calc(100% - 30px)'
highlight-current-row
@
row-click=
"handleCurrentChange"
row-key=
'laneId'
>
<el-table-column
prop=
"laneName"
label=
'Lane'
align=
"center"
width=
"80"
>
</el-table-column>
<el-table-column
prop=
"customersInQueue"
align=
"center"
label=
"Customers in Queue"
width=
"90"
>
<template
slot=
"header"
>
<p
class=
"cell_title"
>
Customers
</p>
<p
class=
"cell_title"
>
in Queue
</p>
</
template
>
</el-table-column>
<el-table-column
prop=
"averageWaitingTime"
align=
"center"
label=
"AVG.Waiting Time"
width=
"100"
>
<
template
slot=
"header"
>
<p
class=
"cell_title"
>
AVG.Waiting
</p>
<p
class=
"cell_title"
>
Time
</p>
</
template
>
<
template
slot-scope=
"{row}"
>
<span>
{{
Math
.
floor
(
row
.
averageWaitingTime
/
60
)
}}
min
{{
row
.
averageWaitingTime
%
60
}}
s
</span>
</
template
>
</el-table-column>
<el-table-column
prop=
"predictedWaiting"
align=
"center"
label=
"Predicted Waiting Time"
width=
"110"
>
<
template
slot=
"header"
>
<p
class=
"cell_title"
>
Estimated
</p>
<p
class=
"cell_title"
>
Waiting Time
</p>
</
template
>
<
template
slot-scope=
"{row}"
>
<span>
{{
Math
.
floor
(
row
.
predictedWaiting
/
60
)
}}
min
{{
row
.
predictedWaiting
%
60
}}
s
</span>
</
template
>
</el-table-column>
<el-table-column
prop=
"customersServedTillNow"
align=
"center"
label=
"Customers Served"
width=
"80"
>
<
template
slot=
"header"
>
<p
class=
"cell_title"
>
Customers
</p>
<p
class=
"cell_title"
>
Served
</p>
</
template
>
</el-table-column>
<el-table-column
prop=
"throughput"
align=
"center"
width=
"160"
label=
"Throughput"
>
<
template
slot=
"header"
>
<p
class=
"cell_title"
>
Customers Served
</p>
<p
class=
"cell_title"
>
Per Hour
</p>
<!--
<p
class=
"cell_unit"
>
Customers/hour
</p>
-->
</
template
>
</el-table-column>
<el-table-column
prop=
"abandonQueue"
align=
"center"
width=
"180"
>
<
template
slot=
"header"
>
<p
class=
"cell_title"
>
Customers Abandoned
</p>
<p
class=
"cell_title"
>
the Queue
</p>
</
template
>
</el-table-column>
<el-table-column
prop=
"counterType"
show-overflow-tooltip
align=
"center"
width=
"120"
label=
"Lane Type"
:formatter=
"formatCounterType"
:filters=
"counterTypeData"
:filter-method=
"filterTag"
></el-table-column>
</el-table>
</div>
<div
class=
"chart"
v-loading=
'isloading'
>
<div
class=
"chart1"
>
<div
class=
"tabel_title"
>
<span>
Time Predicted
</span>
<span>
{{laneName}}
Time Predicted
</span>
</div>
<div
id=
"chart_left"
class=
"chartLine"
></div>
</div>
</el-col>
<el-col
:span=
"12"
>
<div
class=
"chart1 chart2"
>
<div
class=
"tabel_title"
>
<span>
Customers Overview
</span>
</div>
<div
id=
"chart_right"
class=
"chartLine"
></div>
</div>
</
el-col
>
</
el-row
>
</
div
>
</
div
>
</div>
</div>
</template>
...
...
@@ -131,6 +191,9 @@
export
default
{
data
()
{
return
{
laneName
:
''
,
isloading
:
false
,
tableData
:
[],
chart_left
:
null
,
chart_right
:
null
,
startTime
:
''
,
...
...
@@ -167,6 +230,9 @@
averageQueuingTime
:
[
0
,
0
],
customersServedTillNow
:
0
,
},
counterTypeData
:[],
warningNum
:
0
,
safeingNum
:
0
,
granularityListData
:[
{
value
:
1
,
...
...
@@ -270,12 +336,13 @@
},
mounted
()
{
this
.
getMallListForTerm
();
this
.
getCounterType
()
this
.
chart_left
=
echarts
.
init
(
document
.
getElementById
(
"chart_left"
));
this
.
chart_right
=
echarts
.
init
(
document
.
getElementById
(
"chart_right"
));
this
.
canvas
=
document
.
getElementById
(
"container"
);
this
.
ctx
=
this
.
canvas
.
getContext
(
"2d"
);
this
.
canvas
.
width
=
document
.
body
.
clientWidth
-
248
;
this
.
canvas
.
height
=
35
0
;
this
.
canvas
.
height
=
28
0
;
this
.
widthX
=
(
1920
/
this
.
canvas
.
width
).
toFixed
(
2
);
this
.
heightX
=
(
1080
/
this
.
canvas
.
height
).
toFixed
(
2
);
window
.
addEventListener
(
"resize"
,
()
=>
{
...
...
@@ -341,20 +408,23 @@
this
.
topData
.
predictedWaiting
=
[
Math
.
floor
(
data
.
predictedWaiting
/
60
),
data
.
predictedWaiting
%
60
]
this
.
topData
.
averageServiceTime
=
[
Math
.
floor
(
data
.
averageServiceTime
/
60
),
data
.
averageServiceTime
%
60
]
this
.
topData
.
averageQueuingTime
=
[
Math
.
floor
(
data
.
averageQueuingTime
/
60
),
data
.
averageQueuingTime
%
60
]
this
.
tableData
=
data
.
channelQueueDTOS
;
}
})
},
// 获取数据回放图表
async
getchart
()
{
this
.
isloading
=
true
;
let
res
=
await
this
.
$api
.
queueManagementApi
.
getchart
({
cashierAreaId
:
this
.
searchForm
.
cashierAreaId
,
mallId
:
this
.
searchForm
.
mallId
,
chartType
:
"line"
,
countDate
:
moment
(
this
.
searchForm
.
countDate
).
format
(
'YYYY-MM-DD'
),
});
this
.
isloading
=
false
;
let
{
code
,
data
}
=
res
.
data
;
if
(
code
==
200
)
{
this
.
isloading
=
false
;
this
.
optionTopConfig
.
xAxis
[
0
].
data
=
data
.
xaxis
.
data
;
this
.
optionTopConfig
.
series
=
data
.
series
;
this
.
optionTopConfig
.
legend
.
data
=
[]
...
...
@@ -415,9 +485,9 @@
mallChange
(
val
)
{
this
.
setSessionLocal
(
"mallId"
,
val
);
this
.
searchForm
.
cashierAreaId
=
''
this
.
channelNum
=
0
this
.
getAreaList
(
val
)
// this.channelNum = 0
this
.
getOpenTime
()
this
.
getAreaList
(
val
)
},
// 获取门店开门关闭时间
getOpenTime
(){
...
...
@@ -447,13 +517,17 @@
this
.
searchForm
.
cashierAreaId
=
result
.
data
.
list
[
0
].
id
this
.
areaListData
=
result
.
data
.
list
;
this
.
areaOneObj
=
result
.
data
.
list
[
0
]
this
.
getChannelList
()
this
.
warningNum
=
result
.
data
.
list
[
0
].
warnNum
this
.
safeingNum
=
result
.
data
.
list
[
0
].
safeNum
// this.getChannelList()
this
.
pic
=
new
Image
();
this
.
pic
.
src
=
this
.
areaListData
[
0
]
&&
window
.
_vionConfig
.
picUrl
+
this
.
areaListData
[
0
].
pic
;
this
.
pic
.
onload
=
()
=>
{
this
.
drawCirlce
();
};
setTimeout
(()
=>
{
this
.
searchFun
()
},
500
)
}
}
})
...
...
@@ -465,22 +539,22 @@
this
.
pic
.
onload
=
()
=>
{
this
.
drawCirlce
();
};
this
.
getChannelList
()
//
this.getChannelList()
this
.
searchFun
()
},
// 通道
getChannelList
()
{
this
.
$api
.
queueManagementApi
.
getChannelList
({
areaId
:
this
.
searchForm
.
cashierAreaId
,
pageNum
:
1
,
pageSize
:
999999
}).
then
(
res
=>
{
let
result
=
res
.
data
;
if
(
result
.
code
==
200
)
{
this
.
channelNum
=
result
.
data
.
list
.
length
}
})
},
//
getChannelList() {
//
this.$api.queueManagementApi.getChannelList({
//
areaId: this.searchForm.cashierAreaId,
//
pageNum: 1,
//
pageSize: 999999
//
}).then(res => {
//
let result = res.data;
//
if (result.code == 200) {
//
this.channelNum=result.data.list.length
//
}
//
})
//
},
playFun
(){
this
.
startTime
=
moment
(
this
.
searchForm
.
time
[
0
]).
format
(
'HH:mm:ss'
)
this
.
endTime
=
moment
(
this
.
searchForm
.
time
[
1
]).
format
(
'HH:mm:ss'
)
...
...
@@ -496,12 +570,8 @@
this
.
searchFun
()
this
.
getCountData
(
moment
(
openT
).
format
(
'HH:mm:ss'
))
this
.
getDistribution
(
moment
(
openT
).
format
(
'HH:mm:ss'
))
// document.getElementById("colorBox").innerHTML='';
this
.
playBtnShow
=
true
this
.
progressShow
=
true
;
// let num = (closeT-openT)/1000/60/this.searchForm.granularity;
// this.colorBoxWidth = (this.canvas.width/(num+1)).toFixed(2);
// this.colorBoxWidth = this.colorBoxWidth - 0.01
this
.
timeInterval
=
setInterval
(()
=>
{
openT
=
openT
+
1000
*
60
*
this
.
searchForm
.
granularity
...
...
@@ -522,15 +592,6 @@
this
.
playBtnShow
=
false
clearInterval
(
this
.
timeInterval
);
},
pushBox
(
color
){
var
boxParent
=
document
.
getElementById
(
"colorBox"
);
let
boxChild
=
document
.
createElement
(
"span"
);
boxChild
.
style
.
background
=
color
;
boxChild
.
style
.
width
=
this
.
colorBoxWidth
+
'px'
;
boxChild
.
style
.
height
=
"50px"
;
boxChild
.
style
.
display
=
"inline-block"
;
boxParent
.
appendChild
(
boxChild
);
},
searchFun
()
{
clearInterval
(
this
.
timeInterval
);
this
.
playBtnShow
=
false
;
...
...
@@ -563,17 +624,6 @@
...
red
.
map
((
item
)
=>
({
...
item
,
status
:
1
})),
...
green
.
map
((
item
)
=>
({
...
item
,
status
:
0
})),
];
if
(
time
){
// let color = ''
// if(red.length<=this.areaOneObj.safeNum*this.channelNum){
// color = 'green'
// }else if(red.length>this.areaOneObj.safeNum*this.channelNum && red.length<=this.areaOneObj.warnNum*this.channelNum){
// color = 'yellow'
// }else{
// color = 'red'
// }
// this.pushBox(color)
}
this
.
drawCirlce
();
}
},
...
...
@@ -607,6 +657,53 @@
this
.
ctx
.
fill
();
});
},
tableRowClassName
:
function
({
row
,
rowIndex
})
{
if
(
row
.
customersInQueue
>
this
.
warningNum
)
{
return
'danger-row'
;
}
else
if
(
row
.
customersInQueue
>
this
.
safeingNum
&&
row
.
customersInQueue
<=
this
.
warningNum
){
return
'warn-row'
;
}
else
{
return
'safe-row'
;
}
},
// 表格点击触发
handleCurrentChange
(
row
)
{
this
.
laneId
=
row
.
laneId
;
this
.
laneName
=
row
.
laneName
;
this
.
getchart
();
},
formatCounterType
(
row
,
column
,
cellValue
){
let
result
=
''
this
.
counterTypeData
.
forEach
(
item
=>
{
if
(
item
.
key
==
cellValue
){
result
=
item
.
value
}
})
return
result
},
getCounterType
(){
this
.
$api
.
base
.
dataDic
({
type
:
'counterType'
}).
then
(
res
=>
{
this
.
counterTypeData
=
res
.
data
.
data
.
map
(
item
=>
{
if
(
localStorage
.
getItem
(
'lang'
)
==
'en_US'
){
item
.
value
=
item
.
valueEn
;
}
item
.
text
=
item
.
value
return
item
;
});
})
},
filterTag
(
value
,
row
,
column
){
let
result
=
''
this
.
counterTypeData
.
forEach
(
item
=>
{
if
(
item
.
value
==
value
){
result
=
item
.
key
}
})
const
property
=
column
[
'property'
];
return
row
[
property
]
===
result
;
},
}
}
</
script
>
...
...
@@ -614,34 +711,15 @@
<
style
scoped=
"scoped"
lang=
"less"
>
.queueManagementContainer
{
position
:
relative
;
}
.chart
{
position
:
absolute
;
top
:
540px
;
width
:
calc
(
100%
-
20px
);
.chartLine{
width
:
100%
;
height
:
305px
;
}
.chart1
{
background-color
:
#fff
;
width
:
calc
(
100%
-
5px
);
box-shadow
:
0px
3px
12px
0px
rgba
(
196
,
200
,
207
,
0.8
);
}
}
.tabel_title
{
height
:
30px
;
color
:
#fff
;
padding-left
:
10px
;
line-height
:
30px
;
background-color
:
#2774e9
;
position
:
relative
;
span
{
display
:
inline-block
;
font-size
:
14px
;
font-weight
:
700
;
}
}
height
:
100%
;
padding
:
0
8px
0px
10px
;
overflow
:
hidden
;
display
:
flex
;
flex-direction
:
column
;
//
justify-content
:
space-between
;
color
:
#555
;
.aiot_title
{
display
:
flex
;
justify-content
:
space-around
;
...
...
@@ -670,10 +748,94 @@
}
.aiot_title_item_unit
{
font-size
:
12px
;
font-weight
:
700
;
//
font-weight
:
700
;
color
:
#2774e9
;
margin-left
:
5px
;
}
}
.tabel_title
{
//
display
:
flex
;
//
justify-content
:
space-between
;
height
:
30px
;
color
:
#fff
;
padding-left
:
10px
;
line-height
:
30px
;
background-color
:
#2774e9
;
position
:
relative
;
span
{
display
:
inline-block
;
font-size
:
14px
;
font-weight
:
700
;
}
.lenged
{
position
:
absolute
;
left
:
300px
;
top
:
0
;
p{
display
:
inline-block
;
margin-right
:
30px
;
small{
display
:
inline-block
;
}
.colorBox
{
margin-left
:
10px
;
width
:
25px
;
height
:
15px
;
vertical-align
:
middle
;
}
.colorBox_yellow
{
background-color
:
#FF9631
;
}
.colorBox_red
{
background-color
:
#FF4040
;
}
}
}
}
.aiot_bottom
{
position
:
absolute
;
top
:
485px
;
width
:
100%
;
display
:
flex
;
height
:
calc
(
100%
-
495px
);
//
margin-top
:
5px
;
.tabel
{
width
:
calc
(
55%
-
10px
);
height
:
calc
(
100%
-
5px
);
margin-right
:
10px
;
box-shadow
:
0px
3px
12px
0px
rgba
(
196
,
200
,
207
,
0.8
);
.cell-title{
font-weight
:
700
!important
;
}
.cell_unit
{
font-size
:
12px
;
font-weight
:
normal
!important
;
}
}
.chart
{
//
overflow
:
hidden
;
width
:
45%
;
height
:
100%
;
.chartLine{
width
:
100%
;
height
:
calc
(
100%
-
30px
);
}
.chart1
{
width
:
calc
(
100%
-
5px
);
height
:
calc
(
50%
-
5px
);
box-shadow
:
0px
3px
12px
0px
rgba
(
196
,
200
,
207
,
0.8
);
margin-bottom
:
7px
;
background
:
#fff
}
.chart2
{
height
:
calc
(
50%
-
7px
);
}
}
}
}
.aiot_title_item
{}
/
deep
/
.el-select
{
width
:
180px
;
}
...
...
@@ -704,4 +866,45 @@
#container
{
margin-bottom
:
7px
;
}
/
deep
/
.el-table
{
.el-table__cell{
padding
:
5px
0
!important
;
}
.cell
{
text-overflow
:
ellipsis
!important
;
}
.el-table__column-filter-trigger
i
{
color
:
#333
;
margin-left
:
10px
;
font-size
:
16px
;
}
th
.el-table__cell
{
background-color
:
#f5f7fa
!important
;
color
:
#333
;
}
tr
.danger-row
{
background-color
:
#FF4040
!important
;
color
:
#fff
;
}
tr
.warn-row
{
background-color
:
#FF9631
!important
;
color
:
black
;
}
tr
.el-table__row.danger-row
{
&:hover{
color
:
#333
!important
;
}
}
tr
.el-table__row.warn-row
{
&:hover{
color
:
#333
!important
;
}
}
}
h1
{
font-size
:
24px
;
font-weight
:
700
;
text-align
:
center
;
padding
:
10px
0
;
}
</
style
>
src/views/queueManagement/queueLive/index.vue
View file @
1b08657
...
...
@@ -12,7 +12,6 @@
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
>
Customers in Queue
<span
class=
"aiot_title_item_unit"
>
(Customers)
</span></div>
<div
class=
"aiot_title_item_num"
>
{{
topData
.
customersInQueue
}}
</div>
<!--
<div
class=
"aiot_title_item_unit"
></div>
-->
</div>
<div
class=
"aiot_title_item"
>
<div
class=
"aiot_title_item_text"
>
Average Waiting Time
</div>
...
...
@@ -85,55 +84,36 @@
</div>
</div>
<el-table
:data=
"tableData"
style=
"width: 100%"
:row-class-name=
"tableRowClassName"
height=
'calc(100% - 30px)'
highlight-current-row
@
row-click=
"handleCurrentChange"
row-key=
'laneId'
>
<!--
<el-table-column
prop=
"laneName"
:label=
"$t('table.laneName')"
width=
"100"
></el-table-column>
<el-table-column
prop=
"queueLength"
:label=
"$t('table.queueLength')"
width=
"130"
></el-table-column>
<el-table-column
prop=
"name"
:label=
"$t('home.averagewaitingtime')"
>
<template
slot-scope=
"
{row}">
<span>
{{
Math
.
floor
(
row
.
averageWaitingTime
/
60
)
}}
min
{{
row
.
averageWaitingTime
%
60
}}
s
</span>
</
template
>
</el-table-column>
<el-table-column
prop=
"address"
:label=
"$t('home.predictedwaiting')"
>
<
template
slot-scope=
"{row}"
>
<span>
{{
Math
.
floor
(
row
.
predictedWaiting
/
60
)
}}
min
{{
row
.
predictedWaiting
%
60
}}
s
</span>
</
template
>
</el-table-column>
-->
<el-table-column
prop=
"laneName"
label=
'Lane'
align=
"center"
width=
"100"
>
<!-- <template slot-scope="{row}">
<span v-if="row.customersInQueue>warningNum"><img style="width: 16px;" src="../../../assets/img/warning.png" alt=""></span>
<span>{{row.laneName}}</span>
</template> -->
<el-table-column
prop=
"laneName"
label=
'Lane'
align=
"center"
width=
"80"
>
</el-table-column>
<el-table-column
prop=
"customersInQueue"
align=
"center"
label=
"Customers in Queue"
width=
"
12
0"
>
<el-table-column
prop=
"customersInQueue"
align=
"center"
label=
"Customers in Queue"
width=
"
9
0"
>
<template
slot=
"header"
>
<p
class=
"cell_title"
>
Customers
</p>
<p
class=
"cell_title"
>
in Queue
</p>
<!--
<p
class=
"cell_unit"
>
Customers
</p>
-->
</
template
>
</el-table-column>
<el-table-column
prop=
"averageWaitingTime"
align=
"center"
label=
"AVG.Waiting Time"
>
<el-table-column
prop=
"averageWaitingTime"
align=
"center"
label=
"AVG.Waiting Time"
width=
"100"
>
<
template
slot=
"header"
>
<p
class=
"cell_title"
>
AVG.Waiting
</p>
<p
class=
"cell_title"
>
Time
</p>
<!--
<p
class=
"cell_unit"
>
Time
</p>
-->
</
template
>
<
template
slot-scope=
"{row}"
>
<span>
{{
Math
.
floor
(
row
.
averageWaitingTime
/
60
)
}}
min
{{
row
.
averageWaitingTime
%
60
}}
s
</span>
</
template
>
</el-table-column>
<el-table-column
prop=
"predictedWaiting"
align=
"center"
label=
"Predicted Waiting Time"
>
<el-table-column
prop=
"predictedWaiting"
align=
"center"
label=
"Predicted Waiting Time"
width=
"110"
>
<
template
slot=
"header"
>
<p
class=
"cell_title"
>
Estimated
</p>
<p
class=
"cell_title"
>
Waiting Time
</p>
<!--
<p
class=
"cell_unit"
>
Time
</p>
-->
</
template
>
<
template
slot-scope=
"{row}"
>
<span>
{{
Math
.
floor
(
row
.
predictedWaiting
/
60
)
}}
min
{{
row
.
predictedWaiting
%
60
}}
s
</span>
</
template
>
</el-table-column>
<el-table-column
prop=
"customersServedTillNow"
align=
"center"
label=
"Customers Served"
width=
"
16
0"
>
<el-table-column
prop=
"customersServedTillNow"
align=
"center"
label=
"Customers Served"
width=
"
8
0"
>
<
template
slot=
"header"
>
<p
class=
"cell_title"
>
Customers
Served
</p>
<
!--
<p
class=
"cell_unit"
>
Customers
</p>
--
>
<p
class=
"cell_title"
>
Customers
</p>
<
p
class=
"cell_title"
>
Served
</p
>
</
template
>
</el-table-column>
<el-table-column
prop=
"throughput"
align=
"center"
width=
"160"
label=
"Throughput"
>
...
...
@@ -143,7 +123,13 @@
<!--
<p
class=
"cell_unit"
>
Customers/hour
</p>
-->
</
template
>
</el-table-column>
<el-table-column
prop=
"counterType"
show-overflow-tooltip
align=
"center"
label=
"Lane Type"
:formatter=
"formatCounterType"
:filters=
"counterTypeData"
<el-table-column
prop=
"throughput"
align=
"center"
width=
"180"
>
<
template
slot=
"header"
>
<p
class=
"cell_title"
>
Customers Abandoned
</p>
<p
class=
"cell_title"
>
the Queue
</p>
</
template
>
</el-table-column>
<el-table-column
prop=
"counterType"
show-overflow-tooltip
align=
"center"
width=
"120"
label=
"Lane Type"
:formatter=
"formatCounterType"
:filters=
"counterTypeData"
:filter-method=
"filterTag"
></el-table-column>
</el-table>
</div>
...
...
@@ -679,7 +665,6 @@ export default {
.aiot_content
{
position
:
relative
;
height
:
100%
;
padding
:
0
8px
0px
10px
;
overflow
:
hidden
;
display
:
flex
;
flex-direction
:
column
;
...
...
@@ -800,10 +785,10 @@ export default {
}
/
deep
/
.el-table
{
.el-table__cell{
padding
:
5px
0
;
padding
:
5px
0
!important
;
}
.cell
{
text-overflow
:
ellipsis
!important
text-overflow
:
ellipsis
!important
;
}
.el-table__column-filter-trigger
i
{
color
:
#333
;
...
...
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