Skip to content

李君 / carrefour

Go to a project
Commit ac2b5c55 by 李君
Options

优化

1 parent 673d4701
Inline Side-by-side
Showing 3 changed files with 181 additions and 35 deletions
src/views/queueManagement/queueDetail/index.vue
......@@ -8,12 +8,12 @@
</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-select v-model="searchForm.cashierAreaId" class="laneType" :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-form-item :label="$t('Lane Type')" >
<el-select v-model="searchForm.counterType" class="laneType" 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>
......@@ -46,21 +46,24 @@
</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-select v-model="searchForm.granularityMinute" class="laneType" 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"
type="datetimerange"
:range-separator="$t('dialog.to')"
:start-placeholder="$t('table.startTime')"
:end-placeholder="$t('table.endTime')">
:end-placeholder="$t('table.endTime')"
:default-time="['08:00:00', '22:00:00']"
format='yyyy-MM-dd HH:mm:ss'>
</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-button type="primary" class="search-btn" size="mini" plain @click="exportFun">{{$t('button.export')}}</el-button>
</el-form-item>
</el-form>
</div>
......@@ -85,14 +88,20 @@
<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="Lane" align="center" prop="cashierChannelId" show-overflow-tooltip :formatter="landFormat"></el-table-column>
<el-table-column label="Lane Type" align="center" prop="counterType" :formatter="counterTypeFormat"></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="Carts & Baskets" align="center" prop="cartsBaskets" width="100">
<template slot="header">
<p class="cell_title">Carts</p>
<p class="cell_title">& Baskets</p>
</template>
</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>
......@@ -141,13 +150,17 @@
<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">
<el-table-column label="Customers Abandoned the Queue" align="center" prop="abandonQueue" width="185">
<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">
<el-table-column label="Open Counters" align="center" prop="isOpen" width="100">
<template slot="header">
<p class="cell_title">Open</p>
<p class="cell_title">Counters</p>
</template>
<template slot-scope="{row}">
<span>{{row.isOpen==1?'open':'close'}}</span>
</template>
......@@ -209,13 +222,14 @@
granularityMinute:10,
channelIds: '',
counterType:'',
countDate: [new Date(),new Date()],
countDate: ['',''],
},
isMallSelAll:false,
}
},
mounted() {
this.getCounterType()
this.searchForm.countDate = [moment(new Date()).format('YYYY-MM-DD')+' '+'08:00:00',moment(new Date()).format('YYYY-MM-DD')+' '+'23:00:00']
this.getMallListForTerm()
},
computed: {
......@@ -235,7 +249,15 @@
}else{
return '0'
}
},
counterTypeFormat(row, column, cellValue){
let result = ''
this.counterTypeData.forEach(item=>{
if(item.key==cellValue){
result = item.value
}
})
return result
},
// 通道类型
getCounterType(){
......@@ -362,8 +384,8 @@
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'),
startDate: moment(this.searchForm.countDate[0]).format('YYYY-MM-DD HH:mm:ss'),
endDate:moment(this.searchForm.countDate[1]).format('YYYY-MM-DD HH:mm:ss'),
granularityMinute:this.searchForm.granularityMinute,
pageNum: this.currentPage,
pageSize: this.pageSize
......@@ -386,24 +408,35 @@
this.getTableData();
}
},
exportFun(){
}
}
}
</script>
<style scoped="scoped" lang="less">
/deep/.el-select{
width: 170px;
}
.granularity{
/deep/.el-select{
width: 130px;
}
// /deep/.el-select{
// width: 150px;
// }
// .granularity{
// /deep/.el-select{
// width: 100px;
// }
// }
/deep/.el-table .cell{
// text-overflow: ellipsis !important
}
/deep/.el-form-item__label{
width: auto !important;
min-width: 60px;
}
// .laneType{
// /deep/.el-form-item__label{
// width: 80px !important;
// }
// }
/deep/.el-date-editor{
width: 220px !important;
width: 330px !important;
}
</style>
src/views/queueManagement/queueLive/index.vue
......@@ -3,6 +3,13 @@
<div style="position:relative">
<!-- <h1>{{$t('home.queueconfig')}}</h1> -->
<h1>Queuing Managment DashBoard</h1>
<div class="counterType">
<span>Lane Type</span>
<el-select v-model="counterType" class="laneType" 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>
</div>
<div style="position:absolute;right:10px;top:10px;fontSize:20px">
<span style="margin-right:10px;fontSize:14px">{{$t('table.updateTime')}}：{{updateTime}}</span>
<i v-if="fullscreen" @click="exitFullScreen()" class="el-icon-rank" style="cursor:pointer"></i>
......@@ -157,8 +164,9 @@
<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-column prop="counterType" show-overflow-tooltip align="center" width="120" label="Lane Type" :formatter="formatCounterType"></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'>
......@@ -288,6 +296,7 @@ export default {
time2: null,
time3: null,
tableData: [],
counterType:'',
counterTypeData:[],
optionTopConfig: {
tooltip: {
......@@ -528,6 +537,10 @@ export default {
const property = column['property'];
return row[property] === result;
},
counterTypeChange(){
this.getDistribution();
this.getStatistics();
},
showFullScreen() {
this.fullscreen = true;
var full = document.getElementById("fulldiv");
......@@ -584,6 +597,7 @@ export default {
let res = await this.$api.queueManagementApi.getStatistics({
cashierAreaId: this.regionId,
mallId: this.mallId,
counterType:this.counterType
});
let { code, data } = res.data;
if (code == 200) {
......@@ -625,6 +639,7 @@ export default {
try {
let res = await this.$api.queueManagementApi.getdistribution({
cashierAreaId: this.regionId,
counterType:this.counterType
});
let { code, data } = res.data;
if (code == 200) {
......@@ -655,6 +670,7 @@ export default {
chartType: "line",
// countDate: moment().format("YYYY-MM-DD"),
cashierChannelId: this.laneId,
counterType:this.counterType
});
this.isloading = false;
let { code, data } = res.data;
......@@ -809,6 +825,18 @@ export default {
// padding: 0;
box-sizing: border-box;
}
/deep/.counterType{
position: absolute;
right: 300px;
top: 10px;
span{
display: inline-block;
vertical-align: middle;
}
.el-select{
width: 150px !important;
}
}
/deep/tr.current-row{
background-color: #3bb8ff !important;
td.el-table__cell{
......
src/views/queueManagement/queueStatistics/index.vue
......@@ -12,13 +12,40 @@
<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" class="laneType" 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')">
<el-select v-model="searchForm.cashierChannelId" clearable :placeholder="$t('pholder.selectLane')">
<ul class="condition-box">
<li class="condition-item">
<div class="condition-item-option">
<el-select v-model="searchForm.cashierChannelIds" 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.cashierChannelId" clearable :placeholder="$t('pholder.selectLane')">
<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 :label="$t('table.granularity')">
<el-select v-model="searchForm.minuteGranularity" filterable :placeholder="$t('pholder.select')">
<el-select v-model="searchForm.minuteGranularity" class="granularity" 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>
......@@ -70,6 +97,7 @@
export default {
data() {
return {
counterTypeData:[],
granularityListData:[
{
value: 1,
......@@ -93,10 +121,11 @@
searchForm: {
mallId: '',
cashierAreaId: '',
cashierChannelId: '',
cashierChannelIds: [],
countDate: new Date(),
minuteGranularity:10
},
isMallSelAll:false,
isTabChart: false,
tabHeadData: [],
tabOps: [],
......@@ -148,8 +177,9 @@
"export-data-dialog": exportData,
},
mounted() {
this.chart = echarts.init(document.getElementById('bdBarChart'));
this.getMallListForTerm();
this.getCounterType()
this.chart = echarts.init(document.getElementById('bdBarChart'));
this.getMallListForTerm();
},
computed: {
tableHeight() {
......@@ -188,6 +218,20 @@
htmls += "</div>";
return htmls;
},
// 通道类型
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;
});
})
},
indexFormatter({ $index, row }) {
const { createRow, tabOps } = this
const realDataLen = tabOps.length
......@@ -217,7 +261,7 @@
mallChange(val) {
this.setSessionLocal("mallId", val);
this.searchForm.cashierAreaId = ''
this.searchForm.cashierChannelId = ''
this.searchForm.cashierChannelIds = []
this.areaListData = [];
this.channelListData = [];
this.getAreaList(val)
......@@ -242,14 +286,20 @@
})
},
areaChange() {
this.searchForm.cashierChannelId = ''
this.searchForm.cashierChannelIds = []
this.getChannelList()
},
counterTypeChange(){
this.isMallSelAll = false
this.searchForm.cashierChannelIds = []
this.getChannelList()
},
// 通道
getChannelList() {
this.channelListData = [];
this.$api.queueManagementApi.getChannelList({
areaId: this.searchForm.cashierAreaId,
counterType:this.searchForm.counterType,
pageNum: 1,
pageSize: 999999
}).then(res => {
......@@ -261,6 +311,23 @@
}
})
},
channelChangeHandle(){
this.isMallSelAll = this.changeHandle(this.searchForm.cashierChannelIds, this.channelListData)
},
selAllHandle(selType, option) {
let selectAll = 'is' + selType + 'SelAll';
let selectVal = 'cashierChannelIds';
if (this[selectAll]) {
this[selectAll] = false;
this.searchForm.cashierChannelIds = [];
} else {
this[selectAll] = true;
this.searchForm.cashierChannelIds = [];
option.forEach(item => {
this.searchForm.cashierChannelIds.push(item.id);
})
}
},
searchFun() {
this.getData()
},
......@@ -270,7 +337,15 @@
this.loading = true;
this.searchForm.countDate = moment(this.searchForm.countDate).format('YYYY-MM-DD')
this.searchForm.chartType = this.isTabChart ? "table" : "line"
this.$api.queueManagementApi.getchart(this.searchForm).then(res => {
let parmas = {
mallId:this.searchForm.mallId,
cashierAreaId:this.searchForm.cashierAreaId,
minuteGranularity:this.searchForm.minuteGranularity,
countDate:moment(this.searchForm.countDate).format('YYYY-MM-DD'),
chartType:this.isTabChart ? "table" : "line",
cashierChannelIds:this.searchForm.cashierChannelIds.toString()
}
this.$api.queueManagementApi.getchart(parmas).then(res => {
this.loading = false;
if(res.data.code==200){
let resData = res.data.data;
......@@ -330,7 +405,7 @@
},
exportDataHandle(title) {
const { queuingUrl } = window._vionConfig;
let params =`cashierAreaId=${this.searchForm.cashierAreaId}&cashierChannelId=${this.searchForm.cashierChannelId}&countDate=${moment(this.searchForm.countDate).format('YYYY-MM-DD')}&chartType=${this.searchForm.chartType}&mallId=${this.searchForm.mallId}`
let params =`cashierAreaId=${this.searchForm.cashierAreaId}&cashierChannelIds=${this.searchForm.cashierChannelIds.toString()}&countDate=${moment(this.searchForm.countDate).format('YYYY-MM-DD')}&chartType=${this.searchForm.chartType}&mallId=${this.searchForm.mallId}`
const downloadUrl = `${queuingUrl}/queuing/chart/export?${params}&localLanguage=${localStorage.getItem("lang")}&authorization=${this.$cookie.get("atoken")}&title=${encodeURI(title)}`;
window.open(downloadUrl)
}
......@@ -340,6 +415,16 @@
<style scoped="scoped" lang="less">
/deep/.el-select{
width: 180px !important;
width: 170px !important;
}
/deep/.el-date-editor{
width: 170px !important;
}
/deep/.granularity.el-select{
width: 120px !important;
}
/deep/.el-form-item__label{
width: auto !important;
min-width: 60px;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!