Skip to content

李君 / carrefour

Go to a project
Commit 36b5d045 by 李君
Options

通道详情

1 parent 86d1e2a6
Inline Side-by-side
Showing 3 changed files with 417 additions and 2 deletions
src/api/queueManagementApi.js
......@@ -98,7 +98,11 @@ const queueManagementApi = {
updateAlarmRules(params, config) {
return req('PUT', `/d-cashier-alarm-rule/${params.id}`, params, config)
},
// 排队详情
getqueueDetailList(params, config) {
return req('get', `/d-cashier-channel-minute-count-data/page`, params, config)
},
}
......
src/router/modules/queueManagement.js
......@@ -91,7 +91,14 @@ const queueManagementRouterMap = {
permissionPath: 'alarmEvent'
},
component: () => import('@/views/queueManagement/alarmEvent/'),
}
},{
name: 'queueDetail',
path: '/queueManagement/queueDetail',
meta: {
permissionPath: 'queueDetail'
},
component: () => import('@/views/queueManagement/queueDetail/'),
},
]
}
......
src/views/queueManagement/queueDetail/index.vue 0 → 100644
<template>
<div class="clerk-wrapper queueManagementContainer">
<div class="header manage-head-wrapper">
<el-form ref="form" class="boxShadow searchFormSocial" inline>
<el-form-item :label="$t('table.mall')">
<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-select>
</el-form-item>
<el-form-item :label="$t('table.areaName')">
<el-select v-model="searchForm.cashierAreaId" :placeholder="$t('pholder.areaSelect')" @change="areaChange">
<el-option v-for="item in areaListData" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item :label="$t('Lane Type')">
<el-select v-model="searchForm.counterType" clearable :placeholder="$t('pholder.selectLane')" @change="counterTypeChange">
<el-option :label="$t('pholder.all')" value="" />
<el-option v-for="item in counterTypeData" :key="item.key" :label="item.value" :value="item.key" />
</el-select>
</el-form-item>
<el-form-item :label="$t('table.laneName')">
<ul class="condition-box">
<li class="condition-item">
<div class="condition-item-option">
<el-select v-model="searchForm.channelIds" filterable :placeholder="$t('pholder.select')" class="mall-sel-box" multiple
:reserve-keyword="true" collapse-tags @change="channelChangeHandle">
<div :class="isMallSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('Mall', channelListData)">
<span class="custom-checkbox__input">
<span class="custom-checkbox__inner"></span>
</span>
<span style="padding-left: 5px;">{{$t('allPages.all')}}</span>
</div>
<el-option v-for="item in channelListData" :key="item.id" :label="item.name" :value="item.id">
<span class="custom-checkbox__input">
<span class="custom-checkbox__inner"></span>
</span>
<span style="padding-left: 5px;">{{ item.name }}</span>
</el-option>
</el-select>
</div>
</li>
</ul>
<!-- <el-select v-model="searchForm.channelIds" clearable :placeholder="$t('pholder.selectLane')">
<el-option :label="$t('pholder.all')" value="" />
<el-option v-for="item in channelListData" :key="item.id" :label="item.name" :value="item.id" />
</el-select> -->
</el-form-item>
<el-form-item :label="$t('table.granularity')" class="granularity">
<el-select v-model="searchForm.granularityMinute" filterable :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 :label="$t('table.date')">
<el-date-picker
v-model="searchForm.countDate"
type="daterange"
:range-separator="$t('dialog.to')"
:start-placeholder="$t('table.startTime')"
:end-placeholder="$t('table.endTime')">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" class="search-btn" size="mini" plain @click="searchFun">{{$t('button.search')}}</el-button>
</el-form-item>
</el-form>
</div>
<div class="manage-content">
<div class="asis-table-content boxShadow" v-loading="loading">
<el-table
:data="tableData"
:max-height="tableHeight"
style="width: 100%;"
ref="row_table"
v-loading="loading"
class="clerk-manage-table"
header-row-class-name="manage-tab-head"
>
<el-table-column label="Date" align="center" type="counttime" width="100">
<template slot-scope="{row}">
<span>{{row.countdate.substring(0,10)}}</span>
</template>
</el-table-column>
<el-table-column label="Time" align="center" prop="counttime" width="80">
<template slot-scope="{row}">
<span>{{row.counttime.substring(11)}}</span>
</template>
</el-table-column>
<el-table-column label="Lane" align="center" prop="cashierChannelId" :formatter="landFormat"></el-table-column>
<el-table-column label="Average Customers in Queue" align="center" prop="queueLength" width="170">
<template slot="header">
<p class="cell_title">Average Customers</p>
<p class="cell_title">in Queue</p>
</template>
</el-table-column>
<el-table-column label="Carts & Baskets" align="center" prop="cartsBaskets"></el-table-column>
<el-table-column label="Average Waiting Time" align="center" prop="avgWaitingTime" width="120">
<template slot="header">
<p class="cell_title">Average</p>
<p class="cell_title">Waiting Time</p>
</template>
<template slot-scope="{row}">
<span>{{timeFormat(row.avgWaitingTime)}}</span>
</template>
</el-table-column>
<el-table-column label="Average Service Time" align="center" prop="serviceTime" width="120">
<template slot="header">
<p class="cell_title">Average</p>
<p class="cell_title">Service Time</p>
</template>
<template slot-scope="{row}">
<span>{{timeFormat(row.serviceTime)}}</span>
</template>
</el-table-column>
<el-table-column label="Average Queuing Time" align="center" prop="queueTime" width="120">
<template slot="header">
<p class="cell_title">Average</p>
<p class="cell_title">Queuing Time</p>
</template>
<template slot-scope="{row}">
<span>{{timeFormat(row.queueTime)}}</span>
</template>
</el-table-column>
<el-table-column label="Estimated Waiting Time" align="center" prop="predictedWaitingTime" width="120">
<template slot="header">
<p class="cell_title">Estimated</p>
<p class="cell_title">Waiting Time</p>
</template>
<template slot-scope="{row}">
<span>{{timeFormat(row.predictedWaitingTime)}}</span>
</template>
</el-table-column>
<el-table-column label="Customers Served" align="center" prop="customersServed" width="120">
<template slot="header">
<p class="cell_title">Customers</p>
<p class="cell_title">Served</p>
</template>
</el-table-column>
<el-table-column label="Customers Served Per Hour" align="center" prop="throughput" width="150">
<template slot="header">
<p class="cell_title">Customers Served</p>
<p class="cell_title">Per Hour</p>
</template>
</el-table-column>
<el-table-column label="Customers Abandoned the Queue" align="center" prop="abandonQueue" 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 label="Open Counters" align="center" prop="isOpen">
<template slot-scope="{row}">
<span>{{row.isOpen==1?'open':'close'}}</span>
</template>
</el-table-column>
</el-table>
<el-pagination
class="manage-pagination-box"
background
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
@size-change="sizeChange"
@current-change="cerrentChange"
layout="sizes, prev, pager, next, slot"
:total="total"
>
<span
class="slot-ele-total"
>{{$t('table.pageHead')}} {{ total }} {{$t('table.pageTail')}}</span>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
export default {
data() {
return {
granularityListData:[
{
value: 1,
label: '1min'
}, {
value: 5,
label: '5min'
}, {
value: 10,
label: '10min'
},{
value: 15,
label: '15min'
}
],
counterTypeData:[],
mallListForTerm:[],
channelListData:[],
areaListData:[],
tableData: [],
total: 0,
pageSize: 10,
currentPage: 1,
pagesizeArr: [10, 20, 50, 100],
loading: false,
searchForm: {
mallId: '',
cashierAreaId: '',
granularityMinute:10,
channelIds: '',
counterType:'',
countDate: [new Date(),new Date()],
},
isMallSelAll:false,
}
},
mounted() {
this.getCounterType()
this.getMallListForTerm()
},
computed: {
tableHeight() {
const windowInnerHeight = window.innerHeight;
return windowInnerHeight - windowInnerHeight * 0.24;
},
},
methods: {
timeFormat(val){
if(val>60){
return Math.floor(val/60)+'min'+(val%60) +'s'
}else{
return val +'s'
}
},
// 通道类型
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;
});
})
},
// 广场
getMallListForTerm() {
this.mallListForTerm = [];
this.searchForm.mallId = "";
this.$api.base.mall({
accountId: this.$cookie.get('accountId'),
status_arr: "1,3"
}).then(data => {
let result = data.data;
if (result.data.length) {
if (this.getSessionLocal("mallId")) {
this.searchForm.mallId = Number(this.getSessionLocal("mallId"));
} else {
this.searchForm.mallId = result.data[0].id;
this.setSessionLocal("mallId", this.searchForm.mallId);
}
this.mallListForTerm = result.data;
}
this.getAreaList();
})
},
mallChange(val) {
this.setSessionLocal("mallId", val);
this.searchForm.cashierAreaId = ''
this.searchForm.channelIds = []
this.areaListData = [];
this.channelListData = [];
this.getAreaList(val)
},
// 区域
getAreaList(val) {
this.areaListData = [];
this.$api.queueManagementApi.getAreaList({
mallId: this.searchForm.mallId,
pageNum: 1,
pageSize: 999999
}).then(res => {
let result = res.data;
if (result.code == 200) {
if (result.data.list && result.data.list.length > 0) {
this.searchForm.cashierAreaId = result.data.list[0].id
this.areaListData = result.data.list;
this.getChannelList()
}
}
})
},
areaChange() {
this.searchForm.channelIds = []
this.getChannelList()
},
counterTypeChange(){
this.searchForm.channelIds = []
this.getChannelList()
},
// 通道
getChannelList() {
this.channelListData = [];
this.$api.queueManagementApi.getChannelList({
areaId: this.searchForm.cashierAreaId,
counterType:this.searchForm.counterType,
pageNum: 1,
pageSize: 999999
}).then(res => {
let result = res.data;
if (result.code == 200) {
if (result.data.list && result.data.list.length > 0) {
this.channelListData = result.data.list;
this.getTableData()
}
}
})
},
channelChangeHandle(){
this.isMallSelAll = this.changeHandle(this.searchForm.channelIds, this.channelListData)
},
selAllHandle(selType, option) {
let selectAll = 'is' + selType + 'SelAll';
let selectVal = 'channelIds';
if (this[selectAll]) {
this[selectAll] = false;
this.searchForm.channelIds = [];
} else {
this[selectAll] = true;
this.searchForm.channelIds = [];
option.forEach(item => {
this.searchForm.channelIds.push(item.id);
})
}
},
landFormat(row, column, cellValue){
let result = ''
this.channelListData.forEach(item=>{
if(item.id==cellValue){
result = item.name
}
})
return result
},
searchFun(){
this.currentPage = 1;
this.getTableData()
},
getTableData() {
this.loading = true;
this.tableData = [];
this.$api.queueManagementApi.getqueueDetailList({
mallId: this.searchForm.mallId,
cashierAreaId: this.searchForm.cashierAreaId,
channelIds: this.searchForm.channelIds.toString(),
counterType: this.searchForm.counterType,
startDate: moment(this.searchForm.countDate[0]).format('YYYY-MM-DD'),
endDate:moment(this.searchForm.countDate[1]).format('YYYY-MM-DD'),
granularityMinute:this.searchForm.granularityMinute,
pageNum: this.currentPage,
pageSize: this.pageSize
}).then(res => {
let result = res.data;
if(result.code==200){
this.tableData = result.data.list;
this.total = result.data.total;
}
this.loading = false;
})
},
sizeChange(val) {
this.pageSize = val;
this.getTableData();
},
cerrentChange(val) {
if (this.currentPage != val) {
this.currentPage = val;
this.getTableData();
}
},
}
}
</script>
<style scoped="scoped" lang="less">
/deep/.el-select{
width: 170px;
}
.granularity{
/deep/.el-select{
width: 130px;
}
}
/deep/.el-form-item__label{
width: auto !important;
min-width: 60px;
}
/deep/.el-date-editor{
width: 220px !important;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!