clerkcamera.vue

<template>
    <div class="camera-wrapper">
        <el-header height="70px">
            <span class="behavior-title">{{ repTitle }}{{$t('Behavior.clerkcamera')}}</span>
            <span class="more-option-wrapper" @click="showCollapse">
                <span class="more-option-text">{{$t('Behavior.moreOp')}}</span>
                <i :class="moreOptVisible ? 'el-icon-arrow-down more-option-arrow' : 'el-icon-arrow-down more-option-arrow more-option-up'"></i>
            </span>
        </el-header>
        <clerk-option v-show="moreOptVisible" @emitParams="getPatams" @emitTitle="getTitle" @startLoading="startLoad"></clerk-option>
        <div class="element-main behavior-main">
            <!-- main -->
            <div class="behavior-table-page">
                <div class="behavior-table">
                    <el-table :data="tableData" :max-height="tableHeight" style="width: 100%;" v-loading="loading" header-row-class-name="behavior-thead" v-if="false">
                        <el-table-column :label="$t('table.order')" align="center" prop="seriesNum" width="100"></el-table-column>
                        <el-table-column :label="$t('table.name')" align="center" prop="name"></el-table-column>
                        <el-table-column :label="$t('table.age')" align="center" prop="age"></el-table-column>
                        <el-table-column :label="$t('table.gender')" align="center" prop="gender" :formatter="genderFormatter"></el-table-column>
                        <el-table-column :label="$t('table.time')" align="center" prop="counttime"></el-table-column>
                        <el-table-column :label="$t('table.monitorSiteName')" align="center" prop="gateName"></el-table-column>
                        <el-table-column :label="$t('table.faceMap')" align="center">
                            <template slot-scope="scope">
                                <el-popover
                                    placement="left"
                                    title=""
                                    trigger="hover">
                                    <div class="face-img-box" slot="reference">
                                        <!-- <img :src="dealImg(scope.row.facePic)" width="50" height="50" @mouseover="picPopover($event, scope)" @mouseout="mouseOut" alt=""> -->
                                        <img :src="dealImg(scope.row)" width="50" height="50" alt="" class="face-img" @error="dealErrImg" />
                                    </div>
                                    <img :src="dealImg(scope.row)" width="200" height="200" :alt="dealImg(scope.row)" @error="dealErrImg" />                                    
                                </el-popover>
                            </template>
                        </el-table-column>
                    <!-- <el-table-column label="人体图" align="center" prop="bodyPic"></el-table-column> -->
                    </el-table>
                    <ul class="shotpic-wrapper" :style="{'max-height': tableHeight}" v-loading="loading">
                            <li v-if="tableData.length == 0" style="text-align: center; margin: 10px 0; color: #909399;">{{ $t('echartsTitle.noData') }}</li>
                            <li class="shotpic-item" v-for="(item, index) in tableData" :key="index">
                                <div class="shotpic-img">
                                    <span class="shotpic-date">{{ item.counttime }}</span>
                                    <img :src="dealImg(item)" @error="dealErrImg" :style="imgStyle"/>
                                </div>
                                <p class="shotpic-info">
                                    <span class="">{{ item.name }}</span>
                                    <!-- <span class="shotpic-text__right">{{$t('table.gender')}}: {{ genderFormatter('','',item.gender) }}</span> -->
                                </p>
                                <p class="shotpic-info">
                                    <span class="ellipsis" style="display:inline-block;width:100%" :title="gateName[item.gateId]">{{ gateName[item.gateId] }}</span>
                                    <!-- <span class="shotpic-text__left">{{$t('table.age')}}: {{ item.age }}</span> -->
                                    <!-- <span class="shotpic-text__right">{{$t('table.expression')}}: {{ item.mood }}</span> -->
                                </p>
                            </li>
                        </ul> 
                </div>
                <div class="page-wrapper">
                    <!-- <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-sizes="pageArr"
                        :page-size="pageSize"
                        :total="totalPage"
                        background
                        layout="sizes, prev, pager, next">
                    </el-pagination> -->
                    <el-pagination
                      background
                      :current-page="currentPage"
                      :page-sizes="pageArr"
                      :page-size="pageSize"
                      @size-change="sizeChange"
                      @current-change="handleCurrentChange"
                      layout="sizes, prev, pager, next, slot, jumper"
                      :total="totalPage">
                        <span class="slot-pagination-ele slot-ele-total">{{$t('table.pageHead')}} {{ totalPage }} {{$t('table.pageTail')}}</span>
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- <div class="pic-popover" v-if="popoverVisible" :style="popPosition">
            <div style="width: 200px; height: 200px; margin: 0 auto;">
                <img :src="hoverPic" width="200" height="200" alt="">
            </div>
        </div> -->
    </div>
</template>

<script>
import clerkOption from './common/option/clerkCameraOpt'
import defaultImg from '@/assets/img/behavior/default.png'
import femaleImg from '@/assets/img/behavior/female.png'
import maleImg from '@/assets/img/behavior/male.png'
export default {
    data () {
        return {
            params:{
                url:'',
                param:'',
            },
            moreOptVisible: false,
            tableData: [],
            defaultImg: defaultImg,
            // picApiUrl: window._vionConfig.apiUrl + '/faceRecognitions/face/',
            currentPage: 1,
            pageArr: [45, 90, 135],
            pageSize: 45,
            totalPage: 0,
            // popoverVisible: false,
            // hoverPic: '',
            // popPosition: {},
            repTitle: '',
            loading: true,
            tableHeight: 0,
            emitData: {},
            gateName: {},
            imgStyle:{},
        }
    },
    components: {
        'clerk-option': clerkOption
    },
    created() {
        // this.tableHeight = this.moreOptVisible ? $(window).height() - 300 : $(window).height() - 200;
        this.tableHeight = this.computedWinH('px');
        window.addEventListener('resize', () => {
            this.tableHeight = this.computedWinH('px');
            this.moreOptVisible = false;
            this.showCollapse();
        })
    },
    mounted() {
        this.showCollapse();
    },
    methods: {
        showCollapse() {
            // 获取上面元素的高度
            let headerH = '', titleH = '', collapseH = '', mt = '';
                headerH = this.getStyleFn('.el-header', 'height');
                titleH = this.getStyleFn('.camera-wrapper .el-header', 'height');
            if(this.moreOptVisible) {
                mt = headerH + titleH + 8 + 'px';
                $('.behavior-main').animate({ marginTop: mt });
                this.moreOptVisible = false;
            } else {
                this.moreOptVisible = true;
                setTimeout(() => {
                    if(document.documentMode) {
                        collapseH = this.getStyleFn('.behavior-more-option', 'height');
                        collapseH = collapseH + this.getStyleFn('.behavior-more-option', 'paddingTop') + this.getStyleFn('.behavior-more-option', 'paddingBottom')
                    }else{
                        collapseH = this.getStyleFn('.behavior-more-option', 'height');
                    }
                    mt = headerH + titleH + collapseH + 8 + 'px';
                    $('.behavior-main').animate({ marginTop: mt });
                }, 100);
            }
        },
        getGate(mall_id) {
            this.$api.management.gate({
                mallId: mall_id,
                status: 1,
            })
            .then(res => {
                let result = res.data.data;
                result.forEach(item => {
                    this.gateName[item.id] = item.name;
                })
                window.sessionStorage.setItem('gateNameObj',JSON.stringify(this.gateName))
            })
            .catch(err => { })
        },
        setStaffDic(mall_id) {
            this.$api.management.staff({
                mallId: mall_id,
                // _t: Date.parse(new Date()) / 1000
            })
            .then(res => {
                let result = res.data;
                result.data.forEach(item => {
                    this.setSessionLocal('staff-' + item.personUnid, item.name);
                });
                this.getTableData();
            })
        },
        getTableData () {
            // this.loading = true;
            // this.tableData = [];
            this.$api.flowReport.captureRecord(this.emitData)
            .then(res => {
                let result = res.data;
                if(result.code == 200) {
                    // this.$emit('conditionData', result.data);
                    this.tableData = [];
                    this.totalPage = result.data.total;
                    result.data.list.forEach((item, index) => {
                        item.pic = this.dealImage(item);
                        item.facePic = item.pic ? item.pic : '0';
                        item.seriesNum = (this.currentPage - 1) * this.pageSize + index + 1;
                        let isStaff = this.getSessionLocal('staff', item.personUnid);
                        item.name = isStaff ? isStaff : '未知';
                        item.gateId = item.gateId;
                    })
                    this.tableData = result.data.list;
                    setTimeout(() => {
                        this.loading = false;
                        let boxWidth = $('.shotpic-img').width()
                        if(boxWidth) {
                            this.imgStyle = {'height': boxWidth + 'px'}
                        }
                        window.addEventListener('resize', () => {
                            let boxWidth = $('.shotpic-img').width()
                            if(boxWidth) {
                                this.imgStyle = {
                                    'height': boxWidth + 'px'
                                }
                            }
                        })
                    }, 100);
                } else {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: this.$t('message.captureFailed') + result.msg
                    })
                }
            })
            .catch(err => {
                this.catchErrorHandle(err)
            })
        },
        dealDate(counttime) {
            var date=counttime.split(' ')[0];
            var year=date.split('-')[0];
            var month=date.split('-')[1];
            var day=date.split('-')[2];
            var dateStr=year+month+day;
            return dateStr
        },
        dealImg(row) {
            let img_path;
            if(row.facePic === '0'){
                if(row.gender  == '1'){
                    img_path = maleImg
                }else if(row.gender  == '0'){
                    img_path = femaleImg
                }else{
                    img_path = defaultImg
                }
            }else{
                img_path = window._vionConfig.picUrl + '/picture/' + row.facePic
            }
            return img_path;
        },
        dealErrImg(e) {
            let ev = e || window.event;
            ev.target.src = defaultImg;
        },
        genderFormatter(row, column, cellValue) {
            let genderStr = '', localStr = '';
            localStr = this.$t('dictionary.' + this.getSessionLocal('gender', cellValue));
            genderStr = localStr ? localStr : '--';
            return genderStr;
        },
        handleSizeChange(val) {
            // this.currentPage = 1;
            this.emitData.pageSize = val;
            this.pageSize = val;
            this.loading = true;
            this.getTableData();
            // this.$refs.searchRef.searchHandle(1, val);
        },
        handleCurrentChange(val) {
            if (this.currentPage != val) {
                this.emitData.page = val;
                this.currentPage = val;
                this.loading = true;
				this.getTableData();
			} else {
                this.emitData.page = val;
                this.currentPage = val;
                this.loading = true;
				this.getTableData();
            }
            // this.$refs.searchRef.searchHandle(val, this.pageSize);
        },
        changeCurpage(num, size) {
            // this.loading = true;
            this.currentPage = num;
        },
        sizeChange(val) {
            this.pageSize = val;
            this.emitData['pageSize'] = val;
            this.loading = true;
			this.getTableData();
		},
        getTitle(tit) {
            this.repTitle = tit;
        },
        startLoad(isCurrentPage) {
            if(isCurrentPage === 'camera') {
                // this.tableData = [];
                this.loading = true;
            }
        },
        getPatams(param) {
            this.pageSize = param.pageSize;
            this.currentPage = param.page;
            this.emitData = param;
            let gateName = window.sessionStorage.getItem('gateNameObj')
            if(gateName){
                this.gateName = JSON.parse(gateName)
            }else{
                this.getGate(param.mallId);
            }
            this.setStaffDic(param.mallId);
        },
    }
}
</script>

<style scoped>
    .camera-wrapper {
        width: 100%;
    }

    .behavior-thead th {
        height: 80px !important;
    }
    
    .face-img-box {
        position: relative;
        width: 50px;
        height: 50px;
        border: 1px solid #dcdcdc;
        margin: 0px auto;
        cursor: zoom-in;
    }

    .pic-popover {
        margin: 5px 0;
        padding: 10px;
        background: #fff;
        border: 1px solid #ebeef5;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border-radius: 4px;
    }
    .download-text{
        margin-left: 980px;
    }

    .face-img {
        width: 50px;
        height: 50px;
    }

    .slot-ele-total {
        margin-right: 10px;
        font-weight: 400;
        color: #606266;
        float: left;
    }
</style>