Skip to content

李君 / carrefour

Go to a project
Commit eaa5fd77 by 李君
Options

优化

1 parent d9f4bc34
Inline Side-by-side
Showing 3 changed files with 249 additions and 13 deletions
src/views/queueManagement/dataPlayback/index.vue
......@@ -115,6 +115,9 @@
<small>>{{warningNum}}</small><small class="colorBox colorBox_red"></small>
</p>
</div>
<div class="openBtn" @click="openDialog('table')">
<img src="../../../assets/sacle.png" >
</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" show-overflow-tooltip label='Lane' align="center" width="100">
......@@ -170,18 +173,86 @@
<div class="chart1">
<div class="tabel_title">
<span>{{laneName}} Time Predicted</span>
<div class="openBtn" @click="openDialog('chart1')">
<img src="../../../assets/sacle.png" >
</div>
</div>
<div id="chart_left" class="chartLine"></div>
</div>
<div class="chart1 chart2">
<div class="tabel_title">
<span>Customers Overview</span>
<div class="openBtn" @click="openDialog('chart1')">
<img src="../../../assets/sacle.png" >
</div>
</div>
<div id="chart_right" class="chartLine"></div>
</div>
</div>
</div>
</div>
<el-dialog :title="$t('button.details')" :visible.sync="dialogShow" v-if="dialogShow" width="80%" :close-on-click-modal='false' class="manage-dialog dialog_lj" :before-close="closeDialog">
<div v-if="openDialogType=='table'">
<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" :height='tableHeight' highlight-current-row @row-click="handleCurrentChange" row-key='laneId'>
<el-table-column prop="laneName" show-overflow-tooltip label='Lane' align="center" >
</el-table-column>
<el-table-column prop="customersInQueue" align="center" label="Customers in Queue">
<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">
<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" >
<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" >
<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" 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="throughput" align="center">
<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" label="Lane Type" :formatter="formatCounterType" :filters="counterTypeData"
:filter-method="filterTag"></el-table-column>
</el-table>
</div>
<div v-show="openDialogType=='chart1'">
<div class="dialogChart1" id="dialogChart1"></div>
</div>
<div v-show="openDialogType=='chart2'">
<div class="dialogChart2" id="dialogChart2"></div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog" class="dialog-btn">{{$t('dialog.close')}}</el-button>
</div>
</el-dialog>
</div>
</template>
......@@ -191,6 +262,8 @@
export default {
data() {
return {
dialogShow:false,
openDialogType:'',
laneName:'',
laneId: null,
isloading: false,
......@@ -342,7 +415,7 @@
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 - 245;
this.canvas.width = document.body.clientWidth - 255;
this.canvas.height = 280;
this.widthX = (1920 / this.canvas.width).toFixed(2);
this.heightX = (1080 / this.canvas.height).toFixed(2);
......@@ -355,8 +428,19 @@
},
computed: {
tableHeight() {
const windowInnerHeight = window.innerHeight;
return windowInnerHeight - windowInnerHeight * 0.24;
let windowHeight = window.innerHeight,
scale = 0.24
scale = windowHeight <= 720
? 0.4
: windowHeight <= 768
? 0.38
: windowHeight <= 900
? 0.36
: windowHeight <= 1080
? 0.24
: 0.24
return windowHeight - windowHeight * scale
},
},
beforeDestroy() {
......@@ -365,6 +449,24 @@
}
},
methods: {
openDialog(type){
this.dialogShow = true;
this.openDialogType = type;
if(type=='chart1'){
setTimeout(()=>{
this.dialog_chart_top = echarts.init(document.getElementById("dialogChart1"));
this.dialog_chart_top.setOption(this.optionTopConfig, true)
},500)
}else if(type=='chart2'){
setTimeout(()=>{
this.dialog_chart_bottom = echarts.init(document.getElementById("dialogChart2"));
this.dialog_chart_bottom.setOption(this.optionBottomConfig, true)
},500)
}
},
closeDialog(){
this.dialogShow = false;
},
tooltipFormat(parmas){
let htmls = "";
htmls = `<div><div style="font-size:14px;height:31px;line-height:31px;padding-left:15px;padding-right:15px;">${parmas[0].name}</div>`;
......@@ -718,7 +820,7 @@
position: relative;
height: 100%;
// padding: 0 8px 0px 10px;
overflow: hidden;
overflow-x: hidden;
display: flex;
flex-direction: column;
// justify-content: space-between;
......@@ -801,6 +903,7 @@
width: 100%;
display: flex;
height: calc(100% - 495px);
min-height: 390px;
// margin-top: 5px;
.tabel {
width: calc(55% - 10px);
......@@ -822,6 +925,7 @@
.chartLine{
width: 100%;
height: calc(100% - 30px);
min-height: 160px;
}
.chart1{
width: calc(100% - 5px);
......@@ -910,4 +1014,20 @@
text-align: center;
padding: 10px 0;
}
.openBtn{
width: 30px;
text-align: right;
padding-right: 15px;
cursor: pointer;
float: right;
color: #fff;
img{
width: 15px;
}
}
.dialogChart1,.dialogChart2{
width: 95%;
height: 400px;
margin: 0 auto;
}
</style>
src/views/queueManagement/queueLive/index.vue
......@@ -82,6 +82,9 @@
<small>>{{warningNum}}</small><small class="colorBox colorBox_red"></small>
</p>
</div>
<div class="openBtn" @click="openDialog('table')">
<img src="../../../assets/sacle.png" >
</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" show-overflow-tooltip label='Lane' align="center" width="100">
......@@ -137,20 +140,85 @@
<div class="chart1">
<div class="tabel_title">
<span>{{laneName}} Time Predicted</span>
<div class="openBtn" @click="openDialog('chart1')">
<img src="../../../assets/sacle.png" >
</div>
</div>
<div id="chart_top" class="chartLine"></div>
</div>
<div class="chart1 chart2">
<div class="tabel_title">
<span>Customers Overview</span>
<div class="openBtn" @click="openDialog('chart2')">
<img src="../../../assets/sacle.png" >
</div>
</div>
<div id="chart_bottom" class="chartLine"></div>
</div>
</div>
<!-- <div class="chart" v-else style="display:flex;alignItem:center;justifyContent:center;">
<img src="../../../assets/img/no_data.png" alt="" style="width:41px;height:42px">
</div> -->
</div>
<el-dialog :title="$t('button.details')" :visible.sync="dialogShow" v-if="dialogShow" width="80%" :close-on-click-modal='false' class="manage-dialog dialog_lj" :before-close="closeDialog">
<div v-if="openDialogType=='table'">
<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" :height='tableHeight' highlight-current-row @row-click="handleCurrentChange" row-key='laneId'>
<el-table-column prop="laneName" show-overflow-tooltip label='Lane' align="center" >
</el-table-column>
<el-table-column prop="customersInQueue" align="center" label="Customers in Queue">
<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">
<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" >
<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" >
<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" 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="throughput" align="center">
<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" label="Lane Type" :formatter="formatCounterType" :filters="counterTypeData"
:filter-method="filterTag"></el-table-column>
</el-table>
</div>
<div v-show="openDialogType=='chart1'">
<div class="dialogChart1" id="dialogChart1"></div>
</div>
<div v-show="openDialogType=='chart2'">
<div class="dialogChart2" id="dialogChart2"></div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog" class="dialog-btn">{{$t('dialog.close')}}</el-button>
</div>
</el-dialog>
</div>
</template>
......@@ -160,6 +228,8 @@ import moment from "moment";
export default {
data() {
return {
dialogShow:false,
openDialogType:'',
laneName:'',
isloading: false,
fullscreen: false, // 是否全屏
......@@ -328,11 +398,40 @@ export default {
},
computed: {
tableHeight() {
const windowInnerHeight = window.innerHeight;
return windowInnerHeight - windowInnerHeight * 0.24;
let windowHeight = window.innerHeight,
scale = 0.24
scale = windowHeight <= 720
? 0.4
: windowHeight <= 768
? 0.38
: windowHeight <= 900
? 0.36
: windowHeight <= 1080
? 0.24
: 0.24
return windowHeight - windowHeight * scale
},
},
methods: {
openDialog(type){
this.dialogShow = true;
this.openDialogType = type;
if(type=='chart1'){
setTimeout(()=>{
this.dialog_chart_top = echarts.init(document.getElementById("dialogChart1"));
this.dialog_chart_top.setOption(this.optionTopConfig, true)
},500)
}else if(type=='chart2'){
setTimeout(()=>{
this.dialog_chart_bottom = echarts.init(document.getElementById("dialogChart2"));
this.dialog_chart_bottom.setOption(this.optionBottomConfig, true)
},500)
}
},
closeDialog(){
this.dialogShow = false;
},
tooltipFormat(parmas){
let htmls = "";
htmls = `<div><div style="font-size:14px;height:31px;line-height:31px;padding-left:15px;padding-right:15px;">${parmas[0].name}</div>`;
......@@ -648,10 +747,15 @@ export default {
<style scoped="scoped" lang="less">
* {
margin: 0;
padding: 0;
// margin: 0;
// padding: 0;
box-sizing: border-box;
}
.dialogChart1,.dialogChart2{
width: 95%;
height: 400px;
margin: 0 auto;
}
.fulldiv{
padding-bottom: 35px !important;
}
......@@ -667,7 +771,7 @@ export default {
.aiot_content {
position: relative;
height: 100%;
overflow: hidden;
overflow-x: hidden;
display: flex;
padding: 0 8px 0px 10px;
flex-direction: column;
......@@ -751,6 +855,7 @@ export default {
width: 100%;
display: flex;
height: calc(100% - 460px);
min-height: 420px;
// margin-top: 5px;
.tabel {
width: calc(55% - 10px);
......@@ -772,6 +877,7 @@ export default {
.chartLine{
width: 100%;
height: calc(100% - 30px);
min-height: 180px;
}
.chart1{
width: calc(100% - 5px);
......@@ -828,5 +934,15 @@ h1 {
text-align: center;
padding: 10px 0;
}
.openBtn{
width: 30px;
text-align: right;
padding-right: 15px;
cursor: pointer;
float: right;
color: #fff;
img{
width: 15px;
}
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!