Skip to content

李君 / carrefour

Go to a project
Commit 1b086577 by 李君
Options

优化

1 parent 0e99bfad
Inline Side-by-side
Showing 2 changed files with 345 additions and 157 deletions
src/views/queueManagement/dataPlayback/index.vue
......@@ -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 Counters</div>
<div class="aiot_title_item_num">{{topData.openCounters}}/{{topData.totalCounters}}</div>
<div class="aiot_title_item_text"> Carts & Baskets</div>
<div class="aiot_title_item_num">{{topData.carts}} & {{topData.baskets}}</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="chart1">
<div class="tabel_title">
<span>Time Predicted</span>
</div>
<div id="chart_left" class="chartLine"></div>
<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-col>
<el-col :span="12">
<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>{{laneName}} Time Predicted</span>
</div>
<div id="chart_left" class="chartLine"></div>
</div>
<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 = 350;
this.canvas.height = 280;
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();
};
this.searchFun()
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,66 +711,131 @@
<style scoped="scoped" lang="less">
.queueManagementContainer{
position: relative;
}
.chart {
position: absolute;
top: 540px;
width: calc(100% - 20px);
.chartLine{
position: relative;
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;
}
.aiot_title_item {
text-align: center;
padding: 5px 12px;
box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8);
margin-right: 10px;
margin-bottom: 10px;
flex: 1;
&:last-child{
margin-right: 5px;
}
.aiot_title_item_text {
font-size: 14px;
font-weight: 700;
margin-right: 10px;
}
.aiot_title_item_num {
font-size: 26px;
font-weight: 700;
color: #2774e9;
min-width: 110px;
margin: 0 0 5px 0;
}
.aiot_title_item_unit{
font-size: 12px;
// 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%;
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;
}
}
.aiot_title {
display: flex;
justify-content: space-around;
}
.aiot_title_item {
text-align: center;
padding: 5px 12px;
box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8);
margin-right: 10px;
margin-bottom: 10px;
flex: 1;
&:last-child{
margin-right: 5px;
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_text {
font-size: 14px;
font-weight: 700;
margin-right: 10px;
}
.aiot_title_item_num {
font-size: 26px;
font-weight: 700;
color: #2774e9;
min-width: 110px;
margin: 0 0 5px 0;
}
.aiot_title_item_unit{
font-size: 12px;
font-weight: 700;
color: #2774e9;
}
}
.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
......@@ -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="120">
<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>
<!-- <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="160">
<el-table-column prop="customersServedTillNow" align="center" label="Customers Served" width="80">
<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;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!