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