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 eaa5fd77
authored
Nov 03, 2022
by
李君
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
优化
1 parent
d9f4bc34
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
249 additions
and
13 deletions
src/assets/sacle.png
src/views/queueManagement/dataPlayback/index.vue
src/views/queueManagement/queueLive/index.vue
src/assets/sacle.png
0 → 100644
View file @
eaa5fd7
1.54 KB
src/views/queueManagement/dataPlayback/index.vue
View file @
eaa5fd7
...
...
@@ -115,6 +115,9 @@
<small>
>
{{
warningNum
}}
</small><small
class=
"colorBox colorBox_red"
></small>
</p>
</div>
<div
class=
"openBtn"
@
click=
"openDialog('table')"
>
<img
src=
"../../../assets/sacle.png"
>
</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"
show-overflow-tooltip
label=
'Lane'
align=
"center"
width=
"100"
>
...
...
@@ -170,18 +173,86 @@
<div
class=
"chart1"
>
<div
class=
"tabel_title"
>
<span>
{{laneName}} Time Predicted
</span>
<div
class=
"openBtn"
@
click=
"openDialog('chart1')"
>
<img
src=
"../../../assets/sacle.png"
>
</div>
</div>
<div
id=
"chart_left"
class=
"chartLine"
></div>
</div>
<div
class=
"chart1 chart2"
>
<div
class=
"tabel_title"
>
<span>
Customers Overview
</span>
<div
class=
"openBtn"
@
click=
"openDialog('chart1')"
>
<img
src=
"../../../assets/sacle.png"
>
</div>
</div>
<div
id=
"chart_right"
class=
"chartLine"
></div>
</div>
</div>
</div>
</div>
<el-dialog
:title=
"$t('button.details')"
:visible
.
sync=
"dialogShow"
v-if=
"dialogShow"
width=
"80%"
:close-on-click-modal=
'false'
class=
"manage-dialog dialog_lj"
:before-close=
"closeDialog"
>
<div
v-if=
"openDialogType=='table'"
>
<el-table
:data=
"tableData"
style=
"width: 100%"
:row-class-name=
"tableRowClassName"
:height=
'tableHeight'
highlight-current-row
@
row-click=
"handleCurrentChange"
row-key=
'laneId'
>
<el-table-column
prop=
"laneName"
show-overflow-tooltip
label=
'Lane'
align=
"center"
>
</el-table-column>
<el-table-column
prop=
"customersInQueue"
align=
"center"
label=
"Customers in Queue"
>
<
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"
>
<
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"
>
<
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"
>
<
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"
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=
"throughput"
align=
"center"
>
<
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"
label=
"Lane Type"
:formatter=
"formatCounterType"
:filters=
"counterTypeData"
:filter-method=
"filterTag"
></el-table-column>
</el-table>
</div>
<div
v-show=
"openDialogType=='chart1'"
>
<div
class=
"dialogChart1"
id=
"dialogChart1"
></div>
</div>
<div
v-show=
"openDialogType=='chart2'"
>
<div
class=
"dialogChart2"
id=
"dialogChart2"
></div>
</div>
<div
slot=
"footer"
class=
"dialog-footer"
>
<el-button
@
click=
"closeDialog"
class=
"dialog-btn"
>
{{$t('dialog.close')}}
</el-button>
</div>
</el-dialog>
</div>
</template>
...
...
@@ -191,6 +262,8 @@
export
default
{
data
()
{
return
{
dialogShow
:
false
,
openDialogType
:
''
,
laneName
:
''
,
laneId
:
null
,
isloading
:
false
,
...
...
@@ -342,7 +415,7 @@
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
-
2
4
5
;
this
.
canvas
.
width
=
document
.
body
.
clientWidth
-
2
5
5
;
this
.
canvas
.
height
=
280
;
this
.
widthX
=
(
1920
/
this
.
canvas
.
width
).
toFixed
(
2
);
this
.
heightX
=
(
1080
/
this
.
canvas
.
height
).
toFixed
(
2
);
...
...
@@ -355,8 +428,19 @@
},
computed
:
{
tableHeight
()
{
const
windowInnerHeight
=
window
.
innerHeight
;
return
windowInnerHeight
-
windowInnerHeight
*
0.24
;
let
windowHeight
=
window
.
innerHeight
,
scale
=
0.24
scale
=
windowHeight
<=
720
?
0.4
:
windowHeight
<=
768
?
0.38
:
windowHeight
<=
900
?
0.36
:
windowHeight
<=
1080
?
0.24
:
0.24
return
windowHeight
-
windowHeight
*
scale
},
},
beforeDestroy
()
{
...
...
@@ -365,6 +449,24 @@
}
},
methods
:
{
openDialog
(
type
){
this
.
dialogShow
=
true
;
this
.
openDialogType
=
type
;
if
(
type
==
'chart1'
){
setTimeout
(()
=>
{
this
.
dialog_chart_top
=
echarts
.
init
(
document
.
getElementById
(
"dialogChart1"
));
this
.
dialog_chart_top
.
setOption
(
this
.
optionTopConfig
,
true
)
},
500
)
}
else
if
(
type
==
'chart2'
){
setTimeout
(()
=>
{
this
.
dialog_chart_bottom
=
echarts
.
init
(
document
.
getElementById
(
"dialogChart2"
));
this
.
dialog_chart_bottom
.
setOption
(
this
.
optionBottomConfig
,
true
)
},
500
)
}
},
closeDialog
(){
this
.
dialogShow
=
false
;
},
tooltipFormat
(
parmas
){
let
htmls
=
""
;
htmls
=
`<div><div style="font-size:14px;height:31px;line-height:31px;padding-left:15px;padding-right:15px;">
${
parmas
[
0
].
name
}
</div>`
;
...
...
@@ -718,7 +820,7 @@
position
:
relative
;
height
:
100%
;
//
padding
:
0
8px
0px
10px
;
overflow
:
hidden
;
overflow
-x
:
hidden
;
display
:
flex
;
flex-direction
:
column
;
//
justify-content
:
space-between
;
...
...
@@ -801,6 +903,7 @@
width
:
100%
;
display
:
flex
;
height
:
calc
(
100%
-
495px
);
min-height
:
390px
;
//
margin-top
:
5px
;
.tabel
{
width
:
calc
(
55%
-
10px
);
...
...
@@ -822,6 +925,7 @@
.chartLine{
width
:
100%
;
height
:
calc
(
100%
-
30px
);
min-height
:
160px
;
}
.chart1
{
width
:
calc
(
100%
-
5px
);
...
...
@@ -910,4 +1014,20 @@
text-align
:
center
;
padding
:
10px
0
;
}
.openBtn
{
width
:
30px
;
text-align
:
right
;
padding-right
:
15px
;
cursor
:
pointer
;
float
:
right
;
color
:
#fff
;
img{
width
:
15px
;
}
}
.dialogChart1
,
.dialogChart2
{
width
:
95%
;
height
:
400px
;
margin
:
0
auto
;
}
</
style
>
src/views/queueManagement/queueLive/index.vue
View file @
eaa5fd7
...
...
@@ -82,6 +82,9 @@
<small>
>
{{
warningNum
}}
</small><small
class=
"colorBox colorBox_red"
></small>
</p>
</div>
<div
class=
"openBtn"
@
click=
"openDialog('table')"
>
<img
src=
"../../../assets/sacle.png"
>
</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"
show-overflow-tooltip
label=
'Lane'
align=
"center"
width=
"100"
>
...
...
@@ -137,20 +140,85 @@
<div
class=
"chart1"
>
<div
class=
"tabel_title"
>
<span>
{{laneName}} Time Predicted
</span>
<div
class=
"openBtn"
@
click=
"openDialog('chart1')"
>
<img
src=
"../../../assets/sacle.png"
>
</div>
</div>
<div
id=
"chart_top"
class=
"chartLine"
></div>
</div>
<div
class=
"chart1 chart2"
>
<div
class=
"tabel_title"
>
<span>
Customers Overview
</span>
<div
class=
"openBtn"
@
click=
"openDialog('chart2')"
>
<img
src=
"../../../assets/sacle.png"
>
</div>
</div>
<div
id=
"chart_bottom"
class=
"chartLine"
></div>
</div>
</div>
<!-- <div class="chart" v-else style="display:flex;alignItem:center;justifyContent:center;">
<img src="../../../assets/img/no_data.png" alt="" style="width:41px;height:42px">
</div> -->
</div>
<el-dialog
:title=
"$t('button.details')"
:visible
.
sync=
"dialogShow"
v-if=
"dialogShow"
width=
"80%"
:close-on-click-modal=
'false'
class=
"manage-dialog dialog_lj"
:before-close=
"closeDialog"
>
<div
v-if=
"openDialogType=='table'"
>
<el-table
:data=
"tableData"
style=
"width: 100%"
:row-class-name=
"tableRowClassName"
:height=
'tableHeight'
highlight-current-row
@
row-click=
"handleCurrentChange"
row-key=
'laneId'
>
<el-table-column
prop=
"laneName"
show-overflow-tooltip
label=
'Lane'
align=
"center"
>
</el-table-column>
<el-table-column
prop=
"customersInQueue"
align=
"center"
label=
"Customers in Queue"
>
<
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"
>
<
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"
>
<
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"
>
<
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"
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=
"throughput"
align=
"center"
>
<
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"
label=
"Lane Type"
:formatter=
"formatCounterType"
:filters=
"counterTypeData"
:filter-method=
"filterTag"
></el-table-column>
</el-table>
</div>
<div
v-show=
"openDialogType=='chart1'"
>
<div
class=
"dialogChart1"
id=
"dialogChart1"
></div>
</div>
<div
v-show=
"openDialogType=='chart2'"
>
<div
class=
"dialogChart2"
id=
"dialogChart2"
></div>
</div>
<div
slot=
"footer"
class=
"dialog-footer"
>
<el-button
@
click=
"closeDialog"
class=
"dialog-btn"
>
{{$t('dialog.close')}}
</el-button>
</div>
</el-dialog>
</div>
</template>
...
...
@@ -160,6 +228,8 @@ import moment from "moment";
export
default
{
data
()
{
return
{
dialogShow
:
false
,
openDialogType
:
''
,
laneName
:
''
,
isloading
:
false
,
fullscreen
:
false
,
// 是否全屏
...
...
@@ -328,11 +398,40 @@ export default {
},
computed
:
{
tableHeight
()
{
const
windowInnerHeight
=
window
.
innerHeight
;
return
windowInnerHeight
-
windowInnerHeight
*
0.24
;
let
windowHeight
=
window
.
innerHeight
,
scale
=
0.24
scale
=
windowHeight
<=
720
?
0.4
:
windowHeight
<=
768
?
0.38
:
windowHeight
<=
900
?
0.36
:
windowHeight
<=
1080
?
0.24
:
0.24
return
windowHeight
-
windowHeight
*
scale
},
},
methods
:
{
openDialog
(
type
){
this
.
dialogShow
=
true
;
this
.
openDialogType
=
type
;
if
(
type
==
'chart1'
){
setTimeout
(()
=>
{
this
.
dialog_chart_top
=
echarts
.
init
(
document
.
getElementById
(
"dialogChart1"
));
this
.
dialog_chart_top
.
setOption
(
this
.
optionTopConfig
,
true
)
},
500
)
}
else
if
(
type
==
'chart2'
){
setTimeout
(()
=>
{
this
.
dialog_chart_bottom
=
echarts
.
init
(
document
.
getElementById
(
"dialogChart2"
));
this
.
dialog_chart_bottom
.
setOption
(
this
.
optionBottomConfig
,
true
)
},
500
)
}
},
closeDialog
(){
this
.
dialogShow
=
false
;
},
tooltipFormat
(
parmas
){
let
htmls
=
""
;
htmls
=
`<div><div style="font-size:14px;height:31px;line-height:31px;padding-left:15px;padding-right:15px;">
${
parmas
[
0
].
name
}
</div>`
;
...
...
@@ -648,10 +747,15 @@ export default {
<
style
scoped=
"scoped"
lang=
"less"
>
*
{
margin
:
0
;
padding
:
0
;
//
margin
:
0
;
//
padding
:
0
;
box-sizing
:
border-box
;
}
.dialogChart1
,
.dialogChart2
{
width
:
95%
;
height
:
400px
;
margin
:
0
auto
;
}
.fulldiv
{
padding-bottom
:
35px
!important
;
}
...
...
@@ -667,7 +771,7 @@ export default {
.aiot_content
{
position
:
relative
;
height
:
100%
;
overflow
:
hidden
;
overflow
-x
:
hidden
;
display
:
flex
;
padding
:
0
8px
0px
10px
;
flex-direction
:
column
;
...
...
@@ -751,6 +855,7 @@ export default {
width
:
100%
;
display
:
flex
;
height
:
calc
(
100%
-
460px
);
min-height
:
420px
;
//
margin-top
:
5px
;
.tabel
{
width
:
calc
(
55%
-
10px
);
...
...
@@ -772,6 +877,7 @@ export default {
.chartLine{
width
:
100%
;
height
:
calc
(
100%
-
30px
);
min-height
:
180px
;
}
.chart1
{
width
:
calc
(
100%
-
5px
);
...
...
@@ -828,5 +934,15 @@ h1 {
text-align
:
center
;
padding
:
10px
0
;
}
.openBtn
{
width
:
30px
;
text-align
:
right
;
padding-right
:
15px
;
cursor
:
pointer
;
float
:
right
;
color
:
#fff
;
img{
width
:
15px
;
}
}
</
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