Skip to content

李君 / carrefour

Go to a project
Commit eaa5fd77 by 李君
Options

优化

1 parent d9f4bc34
Inline Side-by-side
Showing 3 changed files with 250 additions and 14 deletions
src/views/queueManagement/dataPlayback/index.vue
...@@ -115,6 +115,9 @@ ...@@ -115,6 +115,9 @@
<small>>{{warningNum}}</small><small class="colorBox colorBox_red"></small> <small>>{{warningNum}}</small><small class="colorBox colorBox_red"></small>
</p> </p>
</div> </div>
<div class="openBtn" @click="openDialog('table')">
<img src="../../../assets/sacle.png" >
</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" show-overflow-tooltip label='Lane' align="center" width="100"> <el-table-column prop="laneName" show-overflow-tooltip label='Lane' align="center" width="100">
...@@ -170,18 +173,86 @@ ...@@ -170,18 +173,86 @@
<div class="chart1"> <div class="chart1">
<div class="tabel_title"> <div class="tabel_title">
<span>{{laneName}} Time Predicted</span> <span>{{laneName}} Time Predicted</span>
<div class="openBtn" @click="openDialog('chart1')">
<img src="../../../assets/sacle.png" >
</div>
</div> </div>
<div id="chart_left" class="chartLine"></div> <div id="chart_left" class="chartLine"></div>
</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 class="openBtn" @click="openDialog('chart1')">
<img src="../../../assets/sacle.png" >
</div>
</div> </div>
<div id="chart_right" class="chartLine"></div> <div id="chart_right" class="chartLine"></div>
</div> </div>
</div> </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> </div>
</template> </template>
...@@ -191,6 +262,8 @@ ...@@ -191,6 +262,8 @@
export default { export default {
data() { data() {
return { return {
dialogShow:false,
openDialogType:'',
laneName:'', laneName:'',
laneId: null, laneId: null,
isloading: false, isloading: false,
...@@ -342,7 +415,7 @@ ...@@ -342,7 +415,7 @@
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 - 245; this.canvas.width = document.body.clientWidth - 255;
this.canvas.height = 280; 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);
...@@ -355,8 +428,19 @@ ...@@ -355,8 +428,19 @@
}, },
computed: { computed: {
tableHeight() { tableHeight() {
const windowInnerHeight = window.innerHeight; let windowHeight = window.innerHeight,
return windowInnerHeight - windowInnerHeight * 0.24; 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() { beforeDestroy() {
...@@ -365,6 +449,24 @@ ...@@ -365,6 +449,24 @@
} }
}, },
methods: { 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){ tooltipFormat(parmas){
let htmls = ""; let htmls = "";
htmls = `<div><div style="font-size:14px;height:31px;line-height:31px;padding-left:15px;padding-right:15px;">${parmas[0].name}</div>`; htmls = `<div><div style="font-size:14px;height:31px;line-height:31px;padding-left:15px;padding-right:15px;">${parmas[0].name}</div>`;
...@@ -382,7 +484,7 @@ ...@@ -382,7 +484,7 @@
htmls += `<p style="font-size:13px;padding:4px 15px;">${item.marker} ${item.seriesName}: ${count}</p>`; htmls += `<p style="font-size:13px;padding:4px 15px;">${item.marker} ${item.seriesName}: ${count}</p>`;
} }
} }
}); });
htmls += "</div>"; htmls += "</div>";
return htmls; return htmls;
...@@ -718,7 +820,7 @@ ...@@ -718,7 +820,7 @@
position: relative; position: relative;
height: 100%; height: 100%;
// padding: 0 8px 0px 10px; // padding: 0 8px 0px 10px;
overflow: hidden; overflow-x: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// justify-content: space-between; // justify-content: space-between;
...@@ -801,6 +903,7 @@ ...@@ -801,6 +903,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
height: calc(100% - 495px); height: calc(100% - 495px);
min-height: 390px;
// margin-top: 5px; // margin-top: 5px;
.tabel { .tabel {
width: calc(55% - 10px); width: calc(55% - 10px);
...@@ -822,6 +925,7 @@ ...@@ -822,6 +925,7 @@
.chartLine{ .chartLine{
width: 100%; width: 100%;
height: calc(100% - 30px); height: calc(100% - 30px);
min-height: 160px;
} }
.chart1{ .chart1{
width: calc(100% - 5px); width: calc(100% - 5px);
...@@ -910,4 +1014,20 @@ ...@@ -910,4 +1014,20 @@
text-align: center; text-align: center;
padding: 10px 0; 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> </style>
src/views/queueManagement/queueLive/index.vue
...@@ -82,6 +82,9 @@ ...@@ -82,6 +82,9 @@
<small>>{{warningNum}}</small><small class="colorBox colorBox_red"></small> <small>>{{warningNum}}</small><small class="colorBox colorBox_red"></small>
</p> </p>
</div> </div>
<div class="openBtn" @click="openDialog('table')">
<img src="../../../assets/sacle.png" >
</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" show-overflow-tooltip label='Lane' align="center" width="100"> <el-table-column prop="laneName" show-overflow-tooltip label='Lane' align="center" width="100">
...@@ -137,20 +140,85 @@ ...@@ -137,20 +140,85 @@
<div class="chart1"> <div class="chart1">
<div class="tabel_title"> <div class="tabel_title">
<span>{{laneName}} Time Predicted</span> <span>{{laneName}} Time Predicted</span>
<div class="openBtn" @click="openDialog('chart1')">
<img src="../../../assets/sacle.png" >
</div>
</div> </div>
<div id="chart_top" class="chartLine"></div> <div id="chart_top" class="chartLine"></div>
</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 class="openBtn" @click="openDialog('chart2')">
<img src="../../../assets/sacle.png" >
</div>
</div> </div>
<div id="chart_bottom" class="chartLine"></div> <div id="chart_bottom" class="chartLine"></div>
</div> </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> </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> </div>
</template> </template>
...@@ -160,6 +228,8 @@ import moment from "moment"; ...@@ -160,6 +228,8 @@ import moment from "moment";
export default { export default {
data() { data() {
return { return {
dialogShow:false,
openDialogType:'',
laneName:'', laneName:'',
isloading: false, isloading: false,
fullscreen: false, // 是否全屏 fullscreen: false, // 是否全屏
...@@ -328,11 +398,40 @@ export default { ...@@ -328,11 +398,40 @@ export default {
}, },
computed: { computed: {
tableHeight() { tableHeight() {
const windowInnerHeight = window.innerHeight; let windowHeight = window.innerHeight,
return windowInnerHeight - windowInnerHeight * 0.24; 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: { 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){ tooltipFormat(parmas){
let htmls = ""; let htmls = "";
htmls = `<div><div style="font-size:14px;height:31px;line-height:31px;padding-left:15px;padding-right:15px;">${parmas[0].name}</div>`; 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 { ...@@ -648,10 +747,15 @@ export default {
<style scoped="scoped" lang="less"> <style scoped="scoped" lang="less">
* { * {
margin: 0; // margin: 0;
padding: 0; // padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.dialogChart1,.dialogChart2{
width: 95%;
height: 400px;
margin: 0 auto;
}
.fulldiv{ .fulldiv{
padding-bottom: 35px !important; padding-bottom: 35px !important;
} }
...@@ -667,7 +771,7 @@ export default { ...@@ -667,7 +771,7 @@ export default {
.aiot_content { .aiot_content {
position: relative; position: relative;
height: 100%; height: 100%;
overflow: hidden; overflow-x: hidden;
display: flex; display: flex;
padding: 0 8px 0px 10px; padding: 0 8px 0px 10px;
flex-direction: column; flex-direction: column;
...@@ -751,6 +855,7 @@ export default { ...@@ -751,6 +855,7 @@ export default {
width: 100%; width: 100%;
display: flex; display: flex;
height: calc(100% - 460px); height: calc(100% - 460px);
min-height: 420px;
// margin-top: 5px; // margin-top: 5px;
.tabel { .tabel {
width: calc(55% - 10px); width: calc(55% - 10px);
...@@ -772,6 +877,7 @@ export default { ...@@ -772,6 +877,7 @@ export default {
.chartLine{ .chartLine{
width: 100%; width: 100%;
height: calc(100% - 30px); height: calc(100% - 30px);
min-height: 180px;
} }
.chart1{ .chart1{
width: calc(100% - 5px); width: calc(100% - 5px);
...@@ -828,5 +934,15 @@ h1 { ...@@ -828,5 +934,15 @@ h1 {
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
} }
.openBtn{
width: 30px;
text-align: right;
padding-right: 15px;
cursor: pointer;
float: right;
color: #fff;
img{
width: 15px;
}
}
</style> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!