index.vue

<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')" class="social">
                    <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="cameraCanvas" class="xycanvas"></canvas>
              </div>
                <canvas id='container' class="boxShadow"></canvas>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        data() {
            return {
              editChannelImg:'',
                mallListForTerm: [],
                areaListData: [],
                areaOneObj:{},
                loading: false,
                searchForm: {
                    mallId: '',
                    cashierAreaId: '',
                    serialNum:'',
                    countDate: new Date(),
                    time:new Date(),
                },
                canvas: null, //canvas实例
                ctx: null, //ctx画笔
                dataList: [], //点位坐标
                pic: null,
                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("cameraCanvas");
            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.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">
  .social{
    /deep/.el-form-item__label{
      width: auto !important;
      min-width: 100px;
    }
  }
    /deep/.el-select{
        width: 180px;
    }
    /deep/.el-date-editor{
        width: 180px !important;
    }
    /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>