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 @@ ...@@ -39,17 +39,12 @@
<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></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"></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</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">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_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 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>
...@@ -58,32 +53,36 @@ ...@@ -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 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">Customers Served <span class="aiot_title_item_unit">(Customers)</span></div> <div class="aiot_title_item_text">Estimated Waiting Time</div>
<div class="aiot_title_item_num">{{topData.customersServedTillNow}}</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> </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"> Carts & 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.carts}} & {{topData.baskets}}</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>
<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</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"> Carts & Baskets</div>
<div class="aiot_title_item_num">{{topData.openCounters}}/{{topData.totalCounters}}</div> <div class="aiot_title_item_num">{{topData.carts}} & {{topData.baskets}}</div>
</div> </div>
<!-- <div class="aiot_title_item"> <!-- <div class="aiot_title_item">
<div class="aiot_title_item_text">Crowded Counters</div> <div class="aiot_title_item_text">Crowded Counters</div>
<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">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_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_num">{{topData.storeEntry}}</div>
<!-- <div class="aiot_title_item_unit">Customers</div> --> <!-- <div class="aiot_title_item_unit">Customers</div> -->
...@@ -103,24 +102,85 @@ ...@@ -103,24 +102,85 @@
</div> --> </div> -->
<!-- <div id="colorBox" v-show="progressShow"></div> --> <!-- <div id="colorBox" v-show="progressShow"></div> -->
</div> </div>
<el-row class="chart" :gutter="5"> <div class="aiot_bottom">
<el-col :span="12"> <div class="tabel">
<div class="chart1"> <div class="tabel_title">
<div class="tabel_title"> <!-- <span>{{$t('home.queuingmonitoring')}}</span> -->
<span>Time Predicted</span> <span>Queue Monitoring</span>
</div> <div class="lenged">
<div id="chart_left" class="chartLine"></div> <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> </div>
</el-col> <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-col :span="12"> <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="chart1 chart2">
<div class="tabel_title"> <div class="tabel_title">
<span>Customers Overview</span> <span>Customers Overview</span>
</div> </div>
<div id="chart_right" class="chartLine"></div> <div id="chart_right" class="chartLine"></div>
</div> </div>
</el-col> </div>
</el-row> </div>
</div> </div>
</div> </div>
</template> </template>
...@@ -131,6 +191,9 @@ ...@@ -131,6 +191,9 @@
export default { export default {
data() { data() {
return { return {
laneName:'',
isloading: false,
tableData: [],
chart_left: null, chart_left: null,
chart_right: null, chart_right: null,
startTime:'', startTime:'',
...@@ -167,6 +230,9 @@ ...@@ -167,6 +230,9 @@
averageQueuingTime: [0, 0], averageQueuingTime: [0, 0],
customersServedTillNow: 0, customersServedTillNow: 0,
}, },
counterTypeData:[],
warningNum:0,
safeingNum:0,
granularityListData:[ granularityListData:[
{ {
value: 1, value: 1,
...@@ -270,12 +336,13 @@ ...@@ -270,12 +336,13 @@
}, },
mounted() { mounted() {
this.getMallListForTerm(); this.getMallListForTerm();
this.getCounterType()
this.chart_left = echarts.init(document.getElementById("chart_left")); this.chart_left = echarts.init(document.getElementById("chart_left"));
this.chart_right = echarts.init(document.getElementById("chart_right")); this.chart_right = echarts.init(document.getElementById("chart_right"));
this.canvas = document.getElementById("container"); this.canvas = document.getElementById("container");
this.ctx = this.canvas.getContext("2d"); this.ctx = this.canvas.getContext("2d");
this.canvas.width = document.body.clientWidth - 248; this.canvas.width = document.body.clientWidth - 248;
this.canvas.height = 350; this.canvas.height = 280;
this.widthX = (1920 / this.canvas.width).toFixed(2); this.widthX = (1920 / this.canvas.width).toFixed(2);
this.heightX = (1080 / this.canvas.height).toFixed(2); this.heightX = (1080 / this.canvas.height).toFixed(2);
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
...@@ -341,20 +408,23 @@ ...@@ -341,20 +408,23 @@
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.averageServiceTime = [ Math.floor(data.averageServiceTime / 60), data.averageServiceTime % 60 ]
this.topData.averageQueuingTime = [ Math.floor(data.averageQueuingTime / 60), data.averageQueuingTime % 60 ] this.topData.averageQueuingTime = [ Math.floor(data.averageQueuingTime / 60), data.averageQueuingTime % 60 ]
this.tableData = data.channelQueueDTOS;
} }
}) })
}, },
// 获取数据回放图表 // 获取数据回放图表
async getchart() { async getchart() {
this.isloading = true;
let res = await this.$api.queueManagementApi.getchart({ let res = await this.$api.queueManagementApi.getchart({
cashierAreaId: this.searchForm.cashierAreaId, cashierAreaId: this.searchForm.cashierAreaId,
mallId: this.searchForm.mallId, mallId: this.searchForm.mallId,
chartType: "line", chartType: "line",
countDate: moment(this.searchForm.countDate).format('YYYY-MM-DD'), countDate: moment(this.searchForm.countDate).format('YYYY-MM-DD'),
}); });
this.isloading = false;
let { code, data } = res.data; let { code, data } = res.data;
if (code == 200) { if (code == 200) {
this.isloading = false;
this.optionTopConfig.xAxis[0].data = data.xaxis.data; this.optionTopConfig.xAxis[0].data = data.xaxis.data;
this.optionTopConfig.series = data.series; this.optionTopConfig.series = data.series;
this.optionTopConfig.legend.data = [] this.optionTopConfig.legend.data = []
...@@ -415,9 +485,9 @@ ...@@ -415,9 +485,9 @@
mallChange(val) { mallChange(val) {
this.setSessionLocal("mallId", val); this.setSessionLocal("mallId", val);
this.searchForm.cashierAreaId = '' this.searchForm.cashierAreaId = ''
this.channelNum = 0 // this.channelNum = 0
this.getAreaList(val)
this.getOpenTime() this.getOpenTime()
this.getAreaList(val)
}, },
// 获取门店开门关闭时间 // 获取门店开门关闭时间
getOpenTime(){ getOpenTime(){
...@@ -447,13 +517,17 @@ ...@@ -447,13 +517,17 @@
this.searchForm.cashierAreaId = result.data.list[0].id this.searchForm.cashierAreaId = result.data.list[0].id
this.areaListData = result.data.list; this.areaListData = result.data.list;
this.areaOneObj = result.data.list[0] 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 = new Image();
this.pic.src =this.areaListData[0] && window._vionConfig.picUrl + this.areaListData[0].pic; this.pic.src =this.areaListData[0] && window._vionConfig.picUrl + this.areaListData[0].pic;
this.pic.onload = () => { this.pic.onload = () => {
this.drawCirlce(); this.drawCirlce();
}; };
this.searchFun() setTimeout(()=>{
this.searchFun()
},500)
} }
} }
}) })
...@@ -465,22 +539,22 @@ ...@@ -465,22 +539,22 @@
this.pic.onload = () => { this.pic.onload = () => {
this.drawCirlce(); this.drawCirlce();
}; };
this.getChannelList() // this.getChannelList()
this.searchFun() this.searchFun()
}, },
// 通道 // 通道
getChannelList() { // getChannelList() {
this.$api.queueManagementApi.getChannelList({ // this.$api.queueManagementApi.getChannelList({
areaId: this.searchForm.cashierAreaId, // areaId: this.searchForm.cashierAreaId,
pageNum: 1, // pageNum: 1,
pageSize: 999999 // pageSize: 999999
}).then(res => { // }).then(res => {
let result = res.data; // let result = res.data;
if (result.code == 200) { // if (result.code == 200) {
this.channelNum=result.data.list.length // this.channelNum=result.data.list.length
} // }
}) // })
}, // },
playFun(){ playFun(){
this.startTime = moment(this.searchForm.time[0]).format('HH:mm:ss') this.startTime = moment(this.searchForm.time[0]).format('HH:mm:ss')
this.endTime = moment(this.searchForm.time[1]).format('HH:mm:ss') this.endTime = moment(this.searchForm.time[1]).format('HH:mm:ss')
...@@ -496,12 +570,8 @@ ...@@ -496,12 +570,8 @@
this.searchFun() this.searchFun()
this.getCountData(moment(openT).format('HH:mm:ss')) this.getCountData(moment(openT).format('HH:mm:ss'))
this.getDistribution(moment(openT).format('HH:mm:ss')) this.getDistribution(moment(openT).format('HH:mm:ss'))
// document.getElementById("colorBox").innerHTML='';
this.playBtnShow = true this.playBtnShow = true
this.progressShow = 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(() => { this.timeInterval = setInterval(() => {
openT = openT + 1000 * 60 * this.searchForm.granularity openT = openT + 1000 * 60 * this.searchForm.granularity
...@@ -522,15 +592,6 @@ ...@@ -522,15 +592,6 @@
this.playBtnShow = false this.playBtnShow = false
clearInterval(this.timeInterval); 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() { searchFun() {
clearInterval(this.timeInterval); clearInterval(this.timeInterval);
this.playBtnShow = false; this.playBtnShow = false;
...@@ -563,17 +624,6 @@ ...@@ -563,17 +624,6 @@
...red.map((item) => ({ ...item, status: 1 })), ...red.map((item) => ({ ...item, status: 1 })),
...green.map((item) => ({ ...item, status: 0 })), ...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(); this.drawCirlce();
} }
}, },
...@@ -607,6 +657,53 @@ ...@@ -607,6 +657,53 @@
this.ctx.fill(); 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> </script>
...@@ -614,66 +711,131 @@ ...@@ -614,66 +711,131 @@
<style scoped="scoped" lang="less"> <style scoped="scoped" lang="less">
.queueManagementContainer{ .queueManagementContainer{
position: relative; position: relative;
}
.chart { position: relative;
position: absolute; height: 100%;
top: 540px; padding: 0 8px 0px 10px;
width: calc(100% - 20px); overflow: hidden;
.chartLine{ 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%; width: 100%;
height: 305px; display: flex;
} height: calc(100% - 495px);
.chart1{ // margin-top: 5px;
background-color: #fff; .tabel {
width: calc(100% - 5px); width: calc(55% - 10px);
box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8); height: calc(100% - 5px);
} margin-right: 10px;
} box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.8);
.tabel_title { .cell-title{
height: 30px; font-weight: 700 !important;
color: #fff; }
padding-left: 10px; .cell_unit{
line-height: 30px; font-size: 12px;
background-color: #2774e9; font-weight: normal !important;
position: relative; }
span { }
display: inline-block; .chart {
font-size: 14px; // overflow: hidden;
font-weight: 700; width: 45%;
} height: 100%;
} .chartLine{
.aiot_title { width: 100%;
display: flex; height: calc(100% - 30px);
justify-content: space-around; }
} .chart1{
.aiot_title_item { width: calc(100% - 5px);
text-align: center; height: calc(50% - 5px);
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-bottom: 7px;
margin-right: 10px; background: #fff
margin-bottom: 10px; }
flex: 1; .chart2{
&:last-child{ height: calc(50% - 7px);
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;
}
} }
.aiot_title_item {}
/deep/.el-select{ /deep/.el-select{
width: 180px; width: 180px;
} }
...@@ -704,4 +866,45 @@ ...@@ -704,4 +866,45 @@
#container{ #container{
margin-bottom: 7px; 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> </style>
src/views/queueManagement/queueLive/index.vue
...@@ -12,7 +12,6 @@ ...@@ -12,7 +12,6 @@
<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></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"></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</div>
...@@ -85,55 +84,36 @@ ...@@ -85,55 +84,36 @@
</div> </div>
</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 :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="laneName" label='Lane' align="center" width="80">
<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> </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"> <template slot="header">
<p class="cell_title">Customers</p> <p class="cell_title">Customers</p>
<p class="cell_title">in Queue</p> <p class="cell_title">in Queue</p>
<!-- <p class="cell_unit">Customers</p> -->
</template> </template>
</el-table-column> </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"> <template slot="header">
<p class="cell_title">AVG.Waiting</p> <p class="cell_title">AVG.Waiting</p>
<p class="cell_title">Time</p> <p class="cell_title">Time</p>
<!-- <p class="cell_unit">Time</p> -->
</template> </template>
<template slot-scope="{row}"> <template slot-scope="{row}">
<span>{{Math.floor(row.averageWaitingTime/60)}}min{{row.averageWaitingTime%60}}s</span> <span>{{Math.floor(row.averageWaitingTime/60)}}min{{row.averageWaitingTime%60}}s</span>
</template> </template>
</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" width="110">
<template slot="header"> <template slot="header">
<p class="cell_title">Estimated</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> -->
</template> </template>
<template slot-scope="{row}"> <template slot-scope="{row}">
<span>{{Math.floor(row.predictedWaiting/60)}}min{{row.predictedWaiting%60}}s</span> <span>{{Math.floor(row.predictedWaiting/60)}}min{{row.predictedWaiting%60}}s</span>
</template> </template>
</el-table-column> </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"> <template slot="header">
<p class="cell_title">Customers Served</p> <p class="cell_title">Customers</p>
<!-- <p class="cell_unit">Customers</p> --> <p class="cell_title">Served</p>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="throughput" align="center" width="160" label="Throughput"> <el-table-column prop="throughput" align="center" width="160" label="Throughput">
...@@ -143,7 +123,13 @@ ...@@ -143,7 +123,13 @@
<!-- <p class="cell_unit">Customers/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="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> :filter-method="filterTag"></el-table-column>
</el-table> </el-table>
</div> </div>
...@@ -679,7 +665,6 @@ export default { ...@@ -679,7 +665,6 @@ export default {
.aiot_content { .aiot_content {
position: relative; position: relative;
height: 100%; height: 100%;
padding: 0 8px 0px 10px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -800,10 +785,10 @@ export default { ...@@ -800,10 +785,10 @@ export default {
} }
/deep/.el-table{ /deep/.el-table{
.el-table__cell{ .el-table__cell{
padding: 5px 0; padding: 5px 0 !important;
} }
.cell{ .cell{
text-overflow:ellipsis !important text-overflow:ellipsis !important;
} }
.el-table__column-filter-trigger i{ .el-table__column-filter-trigger i{
color: #333; color: #333;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!