Skip to content

李君 / carrefour

Go to a project
Commit 0e66488b by 李君
Options

设备时刻查询

1 parent ccd7ea4a
Inline Side-by-side
Showing 3 changed files with 347 additions and 0 deletions
src/api/queueManagementApi.js
......@@ -58,6 +58,10 @@ const queueManagementApi = {
getSnapshotChart(params, config) {
return req('get', `/queuing/snapshot/chart`, params, config)
},
// 时刻回放
getDistributionDetail(params, config) {
return req('get', `/queuing/distribution/detail`, params, config)
},
}
......
src/router/modules/queueManagement.js
......@@ -67,6 +67,14 @@ const queueManagementRouterMap = {
permissionPath: 'snapshotPredicted'
},
component: () => import('@/views/queueManagement/snapshotPredicted/'),
},
{
name: 'dataPlaybackTime',
path: '/queueManagement/dataPlaybackTime',
meta: {
permissionPath: 'dataPlaybackTime'
},
component: () => import('@/views/queueManagement/dataPlaybackTime/'),
}
]
......
src/views/queueManagement/dataPlaybackTime/index.vue 0 → 100644
<template>
<div class="clerk-wrapper queueManagementContainer">
<div class="header manage-head-wrapper">
<el-form class="boxShadow searchFormSocial" ref="form" label-width="100px" inline>
<el-form-item :label="$t('table.mall')">
<el-select v-model="searchForm.mallId" filterable :placeholder="$t('pholder.select')" @change="mallChange">
<el-option v-for="item in mallListForTerm" :key="item.id" :label="item.name" :value="item.id" />
</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-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('table.deviceNum')">
<el-select v-model="searchForm.serialNum" :placeholder="$t('pholder.select')" @change="deviceChange">
<el-option v-for="item in deviceList" :key="item.serialnum" :label="item.localIp+'——'+item.serialnum" :value="item.serialnum" />
</el-select>
</el-form-item>
<el-form-item :label="$t('table.date')">
<el-date-picker type="date" :placeholder="$t('pholder.date')" v-model="searchForm.countDate"></el-date-picker>
<el-time-picker
v-model="searchForm.time"
:placeholder="$t('pholder.date')">
</el-time-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="playFun('reduce')">{{$t('button.previous')}}</el-button>
<el-button type="primary" class="search-btn" size="mini" plain @click="playFun('add')">{{$t('button.next')}}</el-button>
</el-form-item>
</el-form>
</div>
<div class="manage-content">
<div class="asis-table-content" v-loading="loading">
<div class="xy-container">
<canvas id="editXycanvas" class="xycanvas"></canvas>
</div>
<canvas id='container' class="boxShadow"></canvas>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
export default {
data() {
return {
editChannelImg:'',
startTime:'',
endTime:'',
mallListForTerm: [],
areaListData: [],
areaOneObj:{},
loading: false,
searchForm: {
mallId: '',
cashierAreaId: '',
serialNum:'',
countDate: new Date(),
time:new Date(),
},
canvas: null, //canvas实例
ctx: null, //ctx画笔
widthX: 0, //缩放比例X
heightX: 0, //缩放比例Y
dataList: [], //点位坐标
pic: null,
channelNum:0,
deviceList:[],
deviceObj:{},
canvasDevice: null, //canvas实例
ctxDevice:null,
openTime:[]
}
},
mounted() {
this.getMallListForTerm();
this.canvas = document.getElementById("container");
this.ctx = this.canvas.getContext("2d");
this.canvas.width = document.body.clientWidth - 248;
this.canvas.height = 380;
this.canvasDevice = document.getElementById("editXycanvas");
this.ctxDevice = this.canvasDevice.getContext("2d");
this.canvasDevice.width = 640;
this.canvasDevice.height = 360;
this.loading = true;
},
computed: {
tableHeight() {
const windowInnerHeight = window.innerHeight;
return windowInnerHeight - windowInnerHeight * 0.24;
},
},
methods: {
// 广场
getMallListForTerm() {
this.mallListForTerm = [];
this.searchForm.mallId = "";
this.$api.base.mall({
accountId: this.$cookie.get('accountId'),
status_arr: "1,3"
}).then(data => {
let result = data.data;
if (result.data.length) {
if (this.getSessionLocal("mallId")) {
this.searchForm.mallId = Number(this.getSessionLocal("mallId"));
} else {
this.searchForm.mallId = result.data[0].id;
this.setSessionLocal("mallId", this.searchForm.mallId);
}
// this.getOpenTime()
this.mallListForTerm = result.data;
}
this.getAreaList(this.searchForm.mallId);
})
},
mallChange(val) {
this.setSessionLocal("mallId", val);
this.searchForm.cashierAreaId = ''
this.channelNum = 0
this.getAreaList(val)
// this.getOpenTime()
},
// 获取门店开门关闭时间
getOpenTime(){
this.$api.base.getOpentimeList({mallId:this.searchForm.mallId}).then(res=>{
let result = res.data;
if(result.code==200){
let data = result.data.list[0]
let endTime = data.endTime
if(endTime.substring(10)=='00:00:00'){
endTime =endTime.substring(0,10)+ '23:59:59'
}
this.openTime = [moment(data.startTime).format('YYYY-MM-DD HH:mm:ss'),moment(endTime).format('YYYY-MM-DD HH:mm:ss')]
}
})
},
// 区域
getAreaList(val) {
this.areaListData = [];
this.$api.queueManagementApi.getAreaList({
mallId: val,
pageNum: 1,
pageSize: 999999
}).then(res => {
let result = res.data;
if (result.code == 200) {
if (result.data.list && result.data.list.length > 0) {
this.searchForm.cashierAreaId = result.data.list[0].id
this.areaListData = result.data.list;
this.areaOneObj = result.data.list[0]
this.pic = new Image();
this.pic.src =this.areaListData[0] && window._vionConfig.picUrl + this.areaListData[0].pic;
this.pic.onload = () => {
this.drawCirlce();
};
this.getDeviceList()
}
}
})
},
areaChange(val){
this.areaOneObj = this.areaListData.find(item=> item.id==val);
this.pic = new Image();
this.pic.src =this.areaOneObj && window._vionConfig.picUrl + this.areaOneObj.pic;
this.pic.onload = () => {
this.drawCirlce();
};
this.getDeviceList()
},
// 设备
getDeviceList(){
this.$api.queueManagementApi.getDevices({
areaId: this.searchForm.cashierAreaId
}).then(res=>{
let data = res.data.data
if(data&&data.length>0){
data.forEach(item=>{
item.picUrl = window._vionConfig.picUrl + "/snapshot/real/" + item.serialnum + "-01.jpg?t=" + Date.parse(new Date()) / 1000;
item.coordinate&&(item.coordinate=JSON.parse(item.coordinate))
})
this.searchForm.serialNum = data[0].serialnum
this.deviceList = data;
this.deviceObj =this.deviceList[0]
this.editChannelImg = new Image();
this.editChannelImg.src =this.deviceObj.picUrl;
this.editChannelImg.onload = () => {
this.drawCirlceDevice();
};
this.searchFun()
}
});
},
deviceChange(val){
this.deviceList.forEach(item=>{
if(item.serialnum==val){
this.deviceObj=={...item}
this.editChannelImg = new Image();
this.editChannelImg.src =this.deviceObj.picUrl
this.editChannelImg.onload = () => {
this.drawCirlceDevice();
};
}
})
},
playFun(type){
let openT = moment(this.searchForm.countDate).format('YYYY-MM-DD') +' '+moment(this.searchForm.time).format('HH:mm:ss');
let currTime = new Date(openT).getTime()
console.log(currTime)
if(type=='add'){
this.searchForm.time =moment(currTime+3000).format('YYYY-MM-DD HH:mm:ss');
this.getDistribution(moment(currTime+3000).format('HH:mm:ss'))
}else{
this.searchForm.time =moment(currTime-3000).format('YYYY-MM-DD HH:mm:ss');
this.getDistribution(moment(currTime-3000).format('HH:mm:ss'))
}
},
searchFun() {
this.getDistribution()
},
// 获取主页大屏人员点位分布
async getDistribution(time) {
let countDate = ''
if(time){
this.searchForm.countDate = moment(this.searchForm.countDate).format('YYYY-MM-DD') +' '+time
}else{
this.searchForm.countDate = moment(this.searchForm.countDate).format('YYYY-MM-DD') +' '+moment(this.searchForm.time).format('HH:mm:ss')
}
let parmas = {
cashierAreaId:this.searchForm.cashierAreaId,
countDate: this.searchForm.countDate,
serialNum: this.searchForm.serialNum,
}
let res = await this.$api.queueManagementApi.getDistributionDetail(parmas);
let { code, data } = res.data;
if (code == 200) {
this.loading = false;
let red = data.red ? data.red : [];
let green = data.green ? data.green : [];
this.dataList = [
...red.map((item) => ({ ...item, status: 1 })),
...green.map((item) => ({ ...item, status: 0 })),
];
this.drawCirlce();
this.drawCirlceDevice()
}
},
// 画圆点
drawCirlce() {
if (!this.pic) return false;
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.drawImage(this.pic, 0, 0, this.canvas.width, this.canvas.height);
this.dataList.forEach((item) => {
if (item.status == 1) {
this.ctx.fillStyle = "red";
} else {
this.ctx.fillStyle = "green";
}
this.ctx.beginPath();
this.ctx.arc(
(item.rx / 100) * this.canvas.width,
(item.ry / 100) * this.canvas.height,
5,
0,
2 * Math.PI
);
this.ctx.fill();
});
},
drawCirlceDevice() {
if (!this.editChannelImg) return false;
this.ctxDevice.clearRect(0, 0, this.canvasDevice.width, this.canvasDevice.height);
this.ctxDevice.drawImage(this.editChannelImg, 0, 0, this.canvasDevice.width, this.canvasDevice.height);
this.dataList.forEach((item) => {
if (item.status == 1) {
this.ctxDevice.fillStyle = "red";
} else {
this.ctxDevice.fillStyle = "green";
}
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();
});
},
}
}
</script>
<style scoped="scoped" lang="less">
/deep/.el-select{
width: 180px;
}
/deep/.el-date-editor{
width: 180px;
}
/deep/.el-date-editor--timerange.el-input__inner{
width: 220px;
}
/deep/.el-form-item__label{
height: 30px;
line-height: 30px !important;
}
/deep/.el-form-item__content{
height: 30px;
line-height: 30px;
}
/deep/.el-date-editor .el-range-separator{
line-height: 22px;
}
.time-box1{
width: 100%;
text-align: center;
margin-top: 5px;
height: 30px;
line-height: 30px;
}
#container{
margin-top: 10px;
margin-bottom: 10px;
}
#colorBox{
border: 1px solid #ccc;
margin-top: 10px;
height: 52px;
box-sizing: border-box;
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!