Skip to content

李君 / carrefour

Go to a project
Commit dbb8ff2c by 李君
Options

优化

1 parent 40765cc0
Inline Side-by-side
Showing 5 changed files with 169 additions and 31 deletions
src/views/Behavior/common/option/queueRecordsOption.vue
......@@ -35,15 +35,24 @@
></el-option>
</el-select>
</div>
<!-- 日期时间 -->
<div class="test-opt-time mr20">
<span class="labelName">trackType</span>
<el-select v-model="trackType" class="mall-opt" filterable :placeholder="$t('pholder.select')" @change="chooseTrackType">
<el-option value="" :label="$t('pholder.all')"></el-option>
<el-option v-for="item in trackTypeOpt" :label="item.name" :value="item.id" :key="item.value"></el-option>
</el-select>
</div>
<!-- 日期时间 -->
<div class="test-opt-time mr20 timeHr">
<span class="labelName">{{$t('table.date')}}</span>
<el-date-picker
v-model="countDate"
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', '23:00:00']">
</el-date-picker>
</div>
<!-- trackTime -->
......@@ -103,6 +112,25 @@ export default {
pageLimit: 45,
typeList: [],
accountId: this.$cookie.get('accountId'),
trackType:'',
trackTypeOpt:[
{
name:'complete',
id:0,
},
{
name:'abandonQueue',
id:1,
},
{
name:'disappearInMid',
id:2,
},
{
name:'appearInMid',
id:3,
}
]
}
},
computed: {
......@@ -209,6 +237,10 @@ export default {
chooseType() {
this.clickHandle()
},
chooseTrackType(){
this.$forceUpdate()
this.clickHandle()
},
chooseTime() {
this.clickHandle()
},
......@@ -230,6 +262,7 @@ export default {
serviceTimeEnd:this.serviceTimeEnd,
queueTimeStart:this.queueTimeStart,
queueTimeEnd:this.queueTimeEnd,
trackType:this.trackType
}
Object.keys(_params).forEach(item=>{
if (_params[item] === '' || _params[item] === undefined || _params[item] === null || _params[item] === 'null')
......
src/views/Behavior/queueRecords.vue
......@@ -72,11 +72,30 @@
:close-on-click-modal="false"
class="manage-dialog"
:before-close="closeDialog"
width="1000"
:title="$t('button.showTrack')"
>
<div v-loading='canvasLoading' style="width: 100%;text-align: center;padding: 40px 0;height: 100%;">
<div v-loading='canvasLoading' style="width: 100%;padding: 40px 0;height: 100%;">
<canvas id="cameraCanvas" class="xycanvas"></canvas>
<ul class="recordDetail">
<li class="info">
<span class="info_name">{{$t('table.personTypeName')}}</span><span class="info_value">{{personTypeFormatter(recordObj.personType)}}</span>
</li>
<li class="info">
<span class="info_name">trackType</span><span class="info_value">{{trackTypeFormatter(recordObj.trackType)}}</span>
</li>
<li class="info">
<span class="info_name">{{$t('table.date')}}</span><span class="info_value">{{recordObj.counttime}}</span>
</li>
<li class="info">
<span class="info_name">trackTime</span><span class="info_value">{{Math.floor(recordObj.trackTime/60)}}min{{recordObj.trackTime%60}}s</span>
</li>
<li class="info">
<span class="info_name">serviceTime</span><span class="info_value">{{Math.floor(recordObj.serviceTime/60)}}min{{recordObj.serviceTime%60}}s</span>
</li>
<li class="info">
<span class="info_name">queueTime</span><span class="info_value">{{Math.floor(recordObj.queueTime/60)}}min{{recordObj.queueTime%60}}s</span>
</li>
</ul>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="isShowAll = false" class="dialog-btn">{{ $t('dialog.close') }}</el-button>
......@@ -98,6 +117,25 @@ export default {
},
data() {
return {
trackTypeOpt:[
{
name:'complete',
id:0,
},
{
name:'abandonQueue',
id:1,
},
{
name:'disappearInMid',
id:2,
},
{
name:'appearInMid',
id:3,
}
],
recordObj:{},
canvasLoading:true,
cmeraImage:'',
canvasDevice: null, //canvas实例
......@@ -204,12 +242,17 @@ export default {
const matched = this.personTypeList.find(item => item.id === personType)
return matched && matched.name || (visibleNew ? this.$t('table.newCustomer') : this.$t("dictionary.custom"))
},
trackTypeFormatter(personType, visibleNew) {
const matched = this.trackTypeOpt.find(item => item.id === personType)
return matched && matched.name
},
showAllImg(item) {
this.recordObj = item;
let picUrl = window._vionConfig.picUrl + "/snapshot/real/" + item.channelSerialnum + ".jpg?t=" + Date.parse(new Date()) / 1000;
this.isShowAll = true;
this.canvasLoading = true;
this.$api.queueManagementApi.getTrajectory({
personId:item.personUnid,
id:item.id,
countTime:item.counttime
}).then(res => {
let result = res.data;
......@@ -227,20 +270,35 @@ export default {
drawCirlceDevice(result){
this.ctxDevice.clearRect(0, 0, this.canvasDevice.width, this.canvasDevice.height);
this.ctxDevice.drawImage(this.cmeraImage, 0, 0, this.canvasDevice.width, this.canvasDevice.height);
let dataList = result.data;
let dataList = result.data.track;
this.canvasLoading = false
dataList.forEach((item) => {
this.ctxDevice.fillStyle = "red";
if(dataList.length<2){
dataList.forEach((item) => {
this.ctxDevice.fillStyle = "red";
this.ctxDevice.beginPath();
this.ctxDevice.arc(
(item.x / 1920) * this.canvasDevice.width,
(item.y / 1080) * this.canvasDevice.height,
5,
0,
2 * Math.PI
);
this.ctxDevice.fill();
});
}else{
this.ctxDevice.beginPath();
this.ctxDevice.arc(
(item.x / 1920) * this.canvasDevice.width,
(item.y / 1080) * this.canvasDevice.height,
5,
0,
2 * Math.PI
);
this.ctxDevice.fill();
});
this.ctxDevice.strokeStyle = 'red';
this.ctxDevice.lineWidth = 5
dataList.forEach((item,index)=>{
if(index==0){
this.ctxDevice.moveTo((item.x / 1920) * this.canvasDevice.width, (item.y / 1080) * this.canvasDevice.height)
}else{
this.ctxDevice.lineTo((item.x / 1920) * this.canvasDevice.width, (item.y / 1080) * this.canvasDevice.height)
}
})
this.ctxDevice.closePath();
this.ctxDevice.stroke();
}
},
closeDialog() {
this.isShowAll = false;
......@@ -257,10 +315,10 @@ export default {
},
handleCurrentChange(val) {
if (this.currentPage != val) {
this.emitData.page = val;
this.emitData.pageNum = val;
this.currentPage = val;
} else {
this.emitData.page = val;
this.emitData.pageNum = val;
this.currentPage = val;
// this.loading = true;
}
......@@ -278,7 +336,7 @@ export default {
},
getPatams(param) {
this.pageSize = param.pageSize;
this.currentPage = param.page;
this.currentPage = param.pageNum;
this.emitData = Object.assign('',param)
this.getTableData();
},
......@@ -287,9 +345,27 @@ export default {
</script>
<style scoped lang="less">
.recordDetail,.xycanvas{
display: inline-block;
vertical-align: top;
}
.recordDetail{
width: 300px;
font-size: 14px;
margin-left: 20px;
.info{
margin-bottom: 8px;
.info_name,.info_value{
display: inline-block;
}
.info_name{
width: 120px;
}
}
}
.manage-dialog{
/deep/.el-dialog{
width: 1200px;
width: 1400px;
height: 700px;
}
}
......
src/views/queueManagement/basicPassengerFlow/index.vue
......@@ -24,7 +24,7 @@
</span>
</h3>
<div class="asis-table-content" v-loading="loading">
<el-table v-show="isTabChart" class="asis-table baseasis-table" id="domBaseTrafficFlow" :data="tabOps" header-row-class-name="asis-table-head" style="width: 100%" :max-height="tableHeight">
<el-table show-summary v-show="isTabChart" class="asis-table baseasis-table" id="domBaseTrafficFlow" :data="tabOps" header-row-class-name="asis-table-head" style="width: 100%" :max-height="tableHeight">
<el-table-column v-if="tabOps.length" type="index" :label="$t('table.order')" align="center" width="80">
<template slot-scope="scope">
<span>{{ indexFormatter(scope) }}</span>
......
src/views/queueManagement/dataPlayback/index.vue
......@@ -18,7 +18,9 @@
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', '23:00:00']"
>
</el-date-picker>
<!-- <el-date-picker type="date" :placeholder="$t('pholder.date')" v-model="searchForm.countDate"></el-date-picker> -->
</el-form-item>
......@@ -126,7 +128,7 @@
<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 :data="tableData" ref="laneTable" 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>
<el-table-column prop="customersInQueue" align="center" label="Customers in Queue" width="80">
......@@ -785,9 +787,16 @@
},
// 表格点击触发
handleCurrentChange(row) {
this.laneId = row.laneId;
this.laneName = row.laneName;
this.getchart();
if(this.laneId == row.laneId){
this.laneId = null;
this.laneName = null;
this.$refs.laneTable.setCurrentRow()
this.getchart();
}else{
this.laneId = row.laneId;
this.laneName = row.laneName;
this.getchart();
}
},
formatCounterType(row, column, cellValue){
let result = ''
......@@ -983,6 +992,12 @@
#container{
margin-bottom: 7px;
}
/deep/tr.current-row{
background-color: #3bb8ff !important;
td.el-table__cell{
background-color: #3bb8ff !important;
}
}
/deep/.el-table{
.el-table__cell{
padding: 5px 0 !important;
......
src/views/queueManagement/queueLive/index.vue
......@@ -86,7 +86,7 @@
<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 :data="tableData" ref="laneTable" 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>
<el-table-column prop="customersInQueue" align="center" label="Customers in Queue" width="80">
......@@ -704,9 +704,17 @@ export default {
},
// 表格点击触发
handleCurrentChange(row) {
this.laneId = row.laneId;
this.laneName = row.laneName;
this.getchart();
if(this.laneId == row.laneId){
this.laneId = null;
this.laneName = null;
this.$refs.laneTable.setCurrentRow()
this.getchart();
}else{
this.laneId = row.laneId;
this.laneName = row.laneName;
this.getchart();
}
},
//动态设置canvas的宽度
setCanvasWidth() {
......@@ -755,6 +763,12 @@ export default {
// padding: 0;
box-sizing: border-box;
}
/deep/tr.current-row{
background-color: #3bb8ff !important;
td.el-table__cell{
background-color: #3bb8ff !important;
}
}
.dialogChart1,.dialogChart2{
width: 95%;
height: 400px;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!