Skip to content

李君 / carrefour

Go to a project
Commit dec02d3b by 李君
Options

优化

1 parent 17b8f456
Inline Side-by-side
Showing 4 changed files with 142 additions and 55 deletions
src/views/Management/DeviceStatus/deviceStatus.vue
...@@ -385,7 +385,8 @@ export default { ...@@ -385,7 +385,8 @@ export default {
}, },
openDialogVideo(row){ openDialogVideo(row){
this.dialogVideoVisible = true; this.dialogVideoVisible = true;
this.openVideoDialogUrl = window._vionConfig.aiotUrl+"/#/videoIndex?id=" +row.serialnum console.log(window._vionConfig.aiotUrl+"/#/videoIndex?id=" +this.toCode(row.serialnum))
this.openVideoDialogUrl = window._vionConfig.aiotUrl+"/#/videoIndex?id=" +this.toCode(row.serialnum)
}, },
toCode(str1) { toCode(str1) {
let str = window.btoa(str1); let str = window.btoa(str1);
......
src/views/queueManagement/dataPlayback/index.vue
<template> <template>
<div class="clerk-wrapper queueManagementContainer"> <div class="clerk-wrapper queueManagementContainer">
<div class="header manage-head-wrapper"> <div class="header manage-head-wrapper">
<el-form class="boxShadow searchFormSocial" ref="form" label-width="100px" inline> <el-form class="boxShadow searchFormSocial" ref="form" label-width="90px" inline>
<el-form-item :label="$t('table.mall')"> <el-form-item :label="$t('table.mall')">
<el-select v-model="searchForm.mallId" filterable :placeholder="$t('pholder.select')" @change="mallChange"> <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-option v-for="item in mallListForTerm" :key="item.id" :label="item.name" :value="item.id" />
...@@ -18,6 +18,11 @@ ...@@ -18,6 +18,11 @@
<el-form-item> <el-form-item>
<el-time-picker is-range v-model="searchForm.time" :range-separator="$t('dialog.to')" :start-placeholder="$t('pholder.startDate')" :end-placeholder="$t('pholder.endDate')" placeholder="选择时间范围"> </el-time-picker> <el-time-picker is-range v-model="searchForm.time" :range-separator="$t('dialog.to')" :start-placeholder="$t('pholder.startDate')" :end-placeholder="$t('pholder.endDate')" placeholder="选择时间范围"> </el-time-picker>
</el-form-item> </el-form-item>
<el-form-item :label="$t('table.granularity')">
<el-select v-model="searchForm.granularity" :placeholder="$t('pholder.select')">
<el-option v-for="item in granularityListData" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<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="searchFun">{{$t('button.search')}}</el-button>
<el-button type="primary" class="search-btn" v-if="!playBtnShow" size="mini" plain @click="playFun">{{$t('button.play')}}</el-button> <el-button type="primary" class="search-btn" v-if="!playBtnShow" size="mini" plain @click="playFun">{{$t('button.play')}}</el-button>
...@@ -29,45 +34,68 @@ ...@@ -29,45 +34,68 @@
</el-form> </el-form>
</div> </div>
<div class="manage-content"> <div class="manage-content">
<div style="position:relative"> <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</div> <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_num">{{topData.customersInQueue}}</div>
<div class="aiot_title_item_unit">Customers</div> <!-- <div class="aiot_title_item_unit"></div> -->
</div> </div>
<div class="aiot_title_item"> <div class="aiot_title_item">
<div class="aiot_title_item_text">Average Waiting</div> <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 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">Predicted Waiting</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 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 class="aiot_title_item"> <div class="aiot_title_item">
<div class="aiot_title_item_text">Customers Served</div> <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>
<div class="aiot_title_item">
<div class="aiot_title_item_text">Average Queuing Time</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 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_num">{{topData.customersServedTillNow}}</div>
<div class="aiot_title_item_unit">Customers</div>
</div> </div>
</div>
<div class="aiot_title">
<div class="aiot_title_item"> <div class="aiot_title_item">
<div class="aiot_title_item_text">Throughput</div> <div class="aiot_title_item_text"> Carts</div>
<div class="aiot_title_item_num">{{topData.throughput}}</div> <div class="aiot_title_item_num">{{topData.carts}}</div>
<div class="aiot_title_item_unit">Customers/hour</div> </div>
<div class="aiot_title_item">
<div class="aiot_title_item_text"> Baskets</div>
<div class="aiot_title_item_num">{{topData.baskets}}</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>
<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</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>
<!-- <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">
<div class="aiot_title_item_text">Store Entry</div> <div class="aiot_title_item_text">Customers Served Per Hour</div>
<div class="aiot_title_item_num">{{topData.storeEntry}}</div> <div class="aiot_title_item_num">{{topData.throughput}}</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</div> <div class="aiot_title_item_text">Store Entry <span class="aiot_title_item_unit">(Customers)</span></div>
<div class="aiot_title_item_num">{{topData.storeExit}}</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_text">Store Exit <span class="aiot_title_item_unit">(Customers)</span></div>
<div class="aiot_title_item_num">{{topData.storeExit}}</div>
</div> -->
</div> </div>
</div> </div>
<div class="asis-table-content" v-loading="loading"> <div class="asis-table-content" v-loading="loading">
...@@ -79,7 +107,7 @@ ...@@ -79,7 +107,7 @@
</div> --> </div> -->
<!-- <div id="colorBox" v-show="progressShow"></div> --> <!-- <div id="colorBox" v-show="progressShow"></div> -->
</div> </div>
<el-row :gutter="10" class="chart"> <el-row class="chart" :gutter="5">
<el-col :span="12"> <el-col :span="12">
<div class="chart1"> <div class="chart1">
<div class="tabel_title"> <div class="tabel_title">
...@@ -139,8 +167,25 @@ ...@@ -139,8 +167,25 @@
customersInQueue: 0, customersInQueue: 0,
averageWaitingTime: [0, 0], averageWaitingTime: [0, 0],
predictedWaiting: [0, 0], predictedWaiting: [0, 0],
averageServiceTime: [0, 0],
averageQueuingTime: [0, 0],
customersServedTillNow: 0, customersServedTillNow: 0,
}, },
granularityListData:[
{
value: 1,
label: '1min'
}, {
value: 5,
label: '5min'
}, {
value: 10,
label: '10min'
},{
value: 15,
label: '15min'
}
],
optionTopConfig: { optionTopConfig: {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
...@@ -298,6 +343,8 @@ ...@@ -298,6 +343,8 @@
this.topData = data; this.topData = data;
this.topData.averageWaitingTime = [ Math.floor(data.averageWaitingTime / 60), data.averageWaitingTime % 60] this.topData.averageWaitingTime = [ Math.floor(data.averageWaitingTime / 60), data.averageWaitingTime % 60]
this.topData.predictedWaiting = [ Math.floor(data.predictedWaiting / 60), data.predictedWaiting % 60 ] 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 ]
} }
}) })
}, },
...@@ -568,12 +615,19 @@ ...@@ -568,12 +615,19 @@
</script> </script>
<style scoped="scoped" lang="less"> <style scoped="scoped" lang="less">
.queueManagementContainer{
position: relative;
}
.chart { .chart {
position: absolute;
top: 540px;
width: calc(100% - 20px);
.chartLine{ .chartLine{
width: 100%; width: 100%;
height: 300px; height: 305px;
} }
.chart1{ .chart1{
background-color: #fff;
width: calc(100% - 5px); width: calc(100% - 5px);
box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8); box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8);
} }
...@@ -600,7 +654,7 @@ ...@@ -600,7 +654,7 @@
padding: 5px 12px; padding: 5px 12px;
box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8); box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8);
margin-right: 10px; margin-right: 10px;
// margin-bottom: 10px; margin-bottom: 10px;
flex: 1; flex: 1;
&:last-child{ &:last-child{
margin-right: 5px; margin-right: 5px;
...@@ -651,13 +705,6 @@ ...@@ -651,13 +705,6 @@
line-height: 30px; line-height: 30px;
} }
#container{ #container{
margin-top: 10px;
margin-bottom: 7px; margin-bottom: 7px;
} }
#colorBox{
border: 1px solid #ccc;
margin-top: 10px;
height: 52px;
box-sizing: border-box;
}
</style> </style>
src/views/queueManagement/queueLive/index.vue
...@@ -10,46 +10,65 @@ ...@@ -10,46 +10,65 @@
</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">{{$t('home.customersInQueue')}}</div> --> <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</div>
<div class="aiot_title_item_num">{{topData.customersInQueue}}</div> <div class="aiot_title_item_num">{{topData.customersInQueue}}</div>
<div class="aiot_title_item_unit">Customers</div> <!-- <div class="aiot_title_item_unit"></div> -->
</div> </div>
<div class="aiot_title_item"> <div class="aiot_title_item">
<!-- <div class="aiot_title_item_text">{{$t('home.averagewaitingtime')}}</div> --> <div class="aiot_title_item_text">Average Waiting Time</div>
<div class="aiot_title_item_text">Average Waiting</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">{{$t('home.predictedwaiting')}}</div> --> <div class="aiot_title_item_text">Estimated Waiting Time</div>
<div class="aiot_title_item_text">Predicted Waiting</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 class="aiot_title_item"> <div class="aiot_title_item">
<!-- <div class="aiot_title_item_text">{{$t('home.customersServedTillNow')}}</div> --> <div class="aiot_title_item_text">Average Service Time</div>
<div class="aiot_title_item_text">Customers Served</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 class="aiot_title_item">
<div class="aiot_title_item_text">Average Queuing Time</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 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_num">{{topData.customersServedTillNow}}</div>
<div class="aiot_title_item_unit">Customers</div>
</div> </div>
</div>
<div class="aiot_title">
<div class="aiot_title_item"> <div class="aiot_title_item">
<div class="aiot_title_item_text">Throughput</div> <div class="aiot_title_item_text"> Carts</div>
<div class="aiot_title_item_num">{{topData.throughput}}</div> <div class="aiot_title_item_num">{{topData.carts}}</div>
<div class="aiot_title_item_unit">Customers/hour</div> </div>
<div class="aiot_title_item">
<div class="aiot_title_item_text"> Baskets</div>
<div class="aiot_title_item_num">{{topData.baskets}}</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>
<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</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>
<!-- <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">
<div class="aiot_title_item_text">Store Entry</div> <div class="aiot_title_item_text">Customers Served Per Hour</div>
<div class="aiot_title_item_num">{{topData.storeEntry}}</div> <div class="aiot_title_item_num">{{topData.throughput}}</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</div> <div class="aiot_title_item_text">Store Entry <span class="aiot_title_item_unit">(Customers)</span></div>
<div class="aiot_title_item_num">{{topData.storeExit}}</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_text">Store Exit <span class="aiot_title_item_unit">(Customers)</span></div>
<div class="aiot_title_item_num">{{topData.storeExit}}</div>
</div> -->
</div> </div>
</div> </div>
<div class="canvasContainer"> <div class="canvasContainer">
...@@ -107,7 +126,7 @@ ...@@ -107,7 +126,7 @@
</el-table-column> </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">
<template slot="header"> <template slot="header">
<p class="cell_title">Predicted</p> <p class="cell_title">Estimated</p>
<p class="cell_title">Waiting Time</p> <p class="cell_title">Waiting Time</p>
<!-- <p class="cell_unit">Time</p> --> <!-- <p class="cell_unit">Time</p> -->
</template> </template>
...@@ -121,10 +140,11 @@ ...@@ -121,10 +140,11 @@
<!-- <p class="cell_unit">Customers</p> --> <!-- <p class="cell_unit">Customers</p> -->
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="throughput" align="center" width="120" label="Throughput"> <el-table-column prop="throughput" align="center" width="160" label="Throughput">
<template slot="header"> <template slot="header">
<p class="cell_title">Throughput</p> <p class="cell_title">Customers Served</p>
<p class="cell_unit">Customers/hour</p> <p class="cell_title">Per Hour</p>
<!-- <p class="cell_unit">Customers/hour</p> -->
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="counterType" show-overflow-tooltip align="center" label="Lane Type" :formatter="formatCounterType" :filters="counterTypeData" <el-table-column prop="counterType" show-overflow-tooltip align="center" label="Lane Type" :formatter="formatCounterType" :filters="counterTypeData"
...@@ -170,6 +190,8 @@ export default { ...@@ -170,6 +190,8 @@ export default {
customersInQueue: 0, customersInQueue: 0,
averageWaitingTime: [0, 0], averageWaitingTime: [0, 0],
predictedWaiting: [0, 0], predictedWaiting: [0, 0],
averageServiceTime: [0, 0],
averageQueuingTime: [0, 0],
customersServedTillNow: 0, customersServedTillNow: 0,
}, //顶部数据 }, //顶部数据
canvas: null, //canvas实例 canvas: null, //canvas实例
...@@ -467,6 +489,17 @@ export default { ...@@ -467,6 +489,17 @@ export default {
totalCounters: data.totalCounters, totalCounters: data.totalCounters,
storeEntry: data.storeEntry, storeEntry: data.storeEntry,
storeExit: data.storeExit, storeExit: data.storeExit,
averageServiceTime: [
Math.floor(data.averageServiceTime / 60),
data.averageServiceTime % 60,
],
averageQueuingTime: [
Math.floor(data.averageQueuingTime / 60),
data.averageQueuingTime % 60,
],
carts: data.carts,
baskets: data.baskets,
customersAbandonedQueue: data.customersAbandonedQueue,
}; };
this.tableData = data.channelQueueDTOS; this.tableData = data.channelQueueDTOS;
} }
...@@ -648,6 +681,7 @@ export default { ...@@ -648,6 +681,7 @@ export default {
margin-bottom: 7px; margin-bottom: 7px;
} }
.aiot_content { .aiot_content {
position: relative;
height: 100%; height: 100%;
padding: 0 8px 0px 10px; padding: 0 8px 0px 10px;
overflow: hidden; overflow: hidden;
...@@ -683,8 +717,9 @@ export default { ...@@ -683,8 +717,9 @@ export default {
} }
.aiot_title_item_unit{ .aiot_title_item_unit{
font-size: 12px; font-size: 12px;
font-weight: 700; // font-weight: 700;
color: #2774e9; color: #2774e9;
margin-left: 5px;
} }
} }
.tabel_title { .tabel_title {
...@@ -727,8 +762,11 @@ export default { ...@@ -727,8 +762,11 @@ export default {
} }
} }
.aiot_bottom { .aiot_bottom {
position: absolute;
top: 450px;
width: 100%;
display: flex; display: flex;
height: calc(100% - 435px); height: calc(100% - 460px);
// margin-top: 5px; // margin-top: 5px;
.tabel { .tabel {
width: calc(55% - 10px); width: calc(55% - 10px);
...@@ -746,7 +784,7 @@ export default { ...@@ -746,7 +784,7 @@ export default {
.chart { .chart {
// overflow: hidden; // overflow: hidden;
width: 45%; width: 45%;
height: 100%;; height: 100%;
.chartLine{ .chartLine{
width: 100%; width: 100%;
height: calc(100% - 30px); height: calc(100% - 30px);
...@@ -756,6 +794,7 @@ export default { ...@@ -756,6 +794,7 @@ export default {
height: calc(50% - 5px); height: calc(50% - 5px);
box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8); box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8);
margin-bottom: 7px; margin-bottom: 7px;
background: #fff
} }
.chart2{ .chart2{
height: calc(50% - 7px); height: calc(50% - 7px);
......
src/views/queueManagement/queueStatistics/index.vue
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('table.laneName')"> <el-form-item :label="$t('table.laneName')">
<el-select v-model="searchForm.cashierChannelId" :placeholder="$t('pholder.selectLane')"> <el-select v-model="searchForm.cashierChannelId" clearable :placeholder="$t('pholder.selectLane')">
<el-option v-for="item in channelListData" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in channelListData" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!