Skip to content

李君 / carrefour

Go to a project
Commit 4f6ae776 by 李君
Options

排队首页指标说明

1 parent 2f62b669
Inline Side-by-side
Showing 1 changed file with 70 additions and 13 deletions
src/views/queueManagement/queueLive/index.vue
...@@ -17,46 +17,89 @@ ...@@ -17,46 +17,89 @@
</div> </div>
<div class="aiot_title"> <div class="aiot_title">
<div class="aiot_title_item"> <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_text">
Customers in Queue<span class="aiot_title_item_unit">(Customers)</span>
<el-tooltip class="activetip" effect="light" content="Number of people currently queuing" placement="right">
<span class="el-icon-warning-outline"></span>
</el-tooltip>
</div>
<div class="aiot_title_item_num">{{topData.customersInQueue}}</div> <div class="aiot_title_item_num">{{topData.customersInQueue}}</div>
</div> </div>
<div class="aiot_title_item"> <div class="aiot_title_item">
<div class="aiot_title_item_text"> Carts & Baskets</div> <div class="aiot_title_item_text">
Carts & Baskets
<el-tooltip class="activetip" effect="light" content="Number of shopping carts and shopping baskets in the current queue" placement="right">
<span class="el-icon-warning-outline"></span>
</el-tooltip>
</div>
<div class="aiot_title_item_num">{{topData.carts}}</div> <div class="aiot_title_item_num">{{topData.carts}}</div>
</div> </div>
<div class="aiot_title_item"> <div class="aiot_title_item">
<div class="aiot_title_item_text">Average Waiting Time</div> <div class="aiot_title_item_text">
Average Waiting Time
<el-tooltip class="activetip" effect="light" content="Average time from queuing to checkout" placement="right">
<span class="el-icon-warning-outline"></span>
</el-tooltip>
</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 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>
<div class="aiot_title_item"> <div class="aiot_title_item">
<div class="aiot_title_item_text">Average Service Time</div> <div class="aiot_title_item_text">Average Service Time
<el-tooltip class="activetip" effect="light" content="Average checkout time" placement="right">
<span class="el-icon-warning-outline"></span>
</el-tooltip>
</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 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> </div>
<div class="aiot_title_item"> <div class="aiot_title_item">
<div class="aiot_title_item_text">Average Queuing Time</div> <div class="aiot_title_item_text">Average Queuing Time
<el-tooltip class="activetip" effect="light" content="Average time of customer queuing" placement="right">
<span class="el-icon-warning-outline"></span>
</el-tooltip>
</div>
<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 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>
<div class="aiot_title_item"> <div class="aiot_title_item">
<div class="aiot_title_item_text">Estimated Waiting Time</div> <div class="aiot_title_item_text">Estimated Waiting Time
<el-tooltip class="activetip" effect="light" content="Estimated time of a customer from queuing to checkout" placement="right">
<span class="el-icon-warning-outline"></span>
</el-tooltip>
</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 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>
</div> </div>
<div class="aiot_title"> <div class="aiot_title">
<div class="aiot_title_item"> <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_text">Customers Served <span class="aiot_title_item_unit">(Customers)</span>
<el-tooltip class="activetip" effect="light" content="Number of check-out customers on the current day" placement="right">
<span class="el-icon-warning-outline"></span>
</el-tooltip>
</div>
<div class="aiot_title_item_num">{{topData.customersServedTillNow}}</div> <div class="aiot_title_item_num">{{topData.customersServedTillNow}}</div>
</div> </div>
<div class="aiot_title_item"> <div class="aiot_title_item">
<div class="aiot_title_item_text">Customers Served Per Hour</div> <div class="aiot_title_item_text">Customers Served Per Hour
<el-tooltip class="activetip" effect="light" content="Number of check-out customers in the last hour" placement="right">
<span class="el-icon-warning-outline"></span>
</el-tooltip>
</div>
<div class="aiot_title_item_num">{{topData.throughput}}</div> <div class="aiot_title_item_num">{{topData.throughput}}</div>
</div> </div>
<div class="aiot_title_item"> <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_text" style="font-size: 13px !important;"> Customers Abandoned the Queue
<el-tooltip class="activetip" effect="light" content="Number of customers in the queue who abandoned checkout" placement="right">
<span class="el-icon-warning-outline"></span>
</el-tooltip>
</div>
<div class="aiot_title_item_num">{{topData.customersAbandonedQueue}}</div> <div class="aiot_title_item_num">{{topData.customersAbandonedQueue}}</div>
</div> </div>
<div class="aiot_title_item"> <div class="aiot_title_item">
<div class="aiot_title_item_text">Open Counters</div> <div class="aiot_title_item_text">Open Counters
<el-tooltip class="activetip" effect="light" content="Counters in service/ counters in total" placement="right">
<span class="el-icon-warning-outline"></span>
</el-tooltip>
</div>
<div class="aiot_title_item_num">{{topData.openCounters}}/{{topData.totalCounters}}</div> <div class="aiot_title_item_num">{{topData.openCounters}}/{{topData.totalCounters}}</div>
</div> </div>
...@@ -65,12 +108,20 @@ ...@@ -65,12 +108,20 @@
<div class="aiot_title_item_num">0</div> <div class="aiot_title_item_num">0</div>
</div> --> </div> -->
<div class="aiot_title_item"> <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_text">Store Entry <span class="aiot_title_item_unit">(Customers)</span>
<el-tooltip class="activetip" effect="light" content="Incoming customer flow of stores on current day" placement="right">
<span class="el-icon-warning-outline"></span>
</el-tooltip>
</div>
<div class="aiot_title_item_num">{{topData.storeEntry}}</div> <div class="aiot_title_item_num">{{topData.storeEntry}}</div>
<!-- <div class="aiot_title_item_unit">Customers</div> --> <!-- <div class="aiot_title_item_unit">Customers</div> -->
</div> </div>
<div class="aiot_title_item"> <div class="aiot_title_item">
<div class="aiot_title_item_text">Store Exit <span class="aiot_title_item_unit">(Customers)</span></div> <div class="aiot_title_item_text">Store Exit <span class="aiot_title_item_unit">(Customers)</span>
<el-tooltip class="activetip" effect="light" content="Outgoing customer flow of the store on current day" placement="right">
<span class="el-icon-warning-outline"></span>
</el-tooltip>
</div>
<div class="aiot_title_item_num">{{topData.storeExit}}</div> <div class="aiot_title_item_num">{{topData.storeExit}}</div>
</div> </div>
</div> </div>
...@@ -825,6 +876,12 @@ export default { ...@@ -825,6 +876,12 @@ export default {
// padding: 0; // padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.activetip{
cursor: pointer;
float: right;
line-height: 20px;
font-size: 16px;
}
/deep/.counterType{ /deep/.counterType{
position: absolute; position: absolute;
right: 300px; right: 300px;
...@@ -917,7 +974,7 @@ export default { ...@@ -917,7 +974,7 @@ export default {
.aiot_title_item_text { .aiot_title_item_text {
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
margin-right: 10px; // margin-right: 10px;
} }
.aiot_title_item_num { .aiot_title_item_num {
font-size: 26px; font-size: 26px;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!