ComparisonCapturedPictures.vue

<template>
    <a-row>
        <a-col :span='14'>
            <a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '70px' } }">
                <a-form-item label="集团：" style="padding: 5px 0">
                    <a-select v-model:value="queryForm.account_id" style="width: 230px" mode="multiple" :maxTagCount="1"
                        @change="onAccountChange" :options="accountList" optionFilterProp="label" show-search>
                    </a-select>
                </a-form-item>
                <a-form-item label="广场：" style="padding: 5px 0">
                    <a-select v-model:value="queryForm.plaza_id" style="width: 230px" mode="multiple" :maxTagCount="1"
                        @change="onPlazaChange" :options="plazaList" optionFilterProp="label" show-search>
                    </a-select>
                </a-form-item>
                <a-form-item label="出入类型：" style="padding: 5px 0">
                    <a-select v-model:value="queryForm.type" style="width: 230px">
                        <a-select-option :value="0">全场</a-select-option>
                        <a-select-option :value="1">广场出入口</a-select-option>
                        <a-select-option :value="2">楼层出入口</a-select-option>
                        <a-select-option :value="3">店铺出入口</a-select-option>
                        <a-select-option :value="4">其他</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="区域信息：" style="padding: 5px 0" v-if='queryForm.type==0 || queryForm.type==3'>
                    <a-select v-model:value="queryForm.zone_id" style="width: 230px" mode="multiple" :maxTagCount="1"
                        @change="onZoneChange" :options="zoneList" optionFilterProp="label" show-search>
                    </a-select>
                </a-form-item>
                <a-form-item label="监控点：" style="padding: 5px 0">
                    <a-select v-model:value="queryForm.gate_id" style="width: 230px" mode="multiple" :maxTagCount="1"
                        :options="gateList" optionFilterProp="label" show-search>
                    </a-select>
                </a-form-item>
                <a-form-item label="方向：" style="padding: 5px 0">
                    <a-select v-model:value="queryForm.direction" mode="multiple" :maxTagCount="1" style="width: 230px">
                        <a-select-option :value="1">进</a-select-option>
                        <a-select-option :value="-1">出</a-select-option>
                        <a-select-option :value="0">横穿</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="抓拍类型：" style="padding: 5px 0">
                    <a-select v-model:value="queryForm.picType" style="width: 230px">
                        <a-select-option :value="1">半身照</a-select-option>
                        <a-select-option :value="2">全身照</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="人员类型：" style="padding: 5px 0">
                    <a-select v-model:value="queryForm.personType" mode="multiple" :maxTagCount="1"
                        style="width: 230px">
                        <a-select-option :value="1">店员</a-select-option>
                        <a-select-option :value="0">顾客</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="选择日期：" style="padding: 5px 0">
                    <a-date-picker v-model:value="queryForm.date" :format="'YYYY-MM-DD'" style="width: 230px" />
                </a-form-item>
                <a-form-item label="选择时间：" style="padding: 5px 0">
                    <a-time-picker v-model:value="queryForm.startTime" style="width: 120px" />
                    <a-time-picker v-model:value="queryForm.endTime" style="width: 120px" />
                </a-form-item>
                <a-form-item label="图片数量：" style="padding: 5px 0">
                    <a-input-number v-model:value="queryForm.minPic" :min="0" style="width: 100px"/>至
                    <a-input-number v-model:value="queryForm.maxPic" :min="0" style="width: 100px"/>
                </a-form-item>
                <a-form-item style="padding: 5px 0">
                    <a-button type="primary" @click="confirmSearch" :loading="isLoading">查询</a-button>
                </a-form-item>
            </a-form>
            <div v-loading="isLoading">
                <a-row v-for="row in pagedTableDataList">
                    <a-col class='colItem' :span="4" v-for="(item,index) in row">
                        <div style="margin: 0 5px" draggable="true" @dragstart="dragStart(item,$event)">
                            <el-image :src="item.picture_url" :fit="'fill'" class="single-image">
                            </el-image>
                            <div>时间:{{ item.counttime }}</div>
                            <div>类型:{{ formatPersonType(item.personType) }}</div>
                            <div>地点:{{ item.gate_name }}</div>
                        </div>
                    </a-col>
                </a-row>
                <a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total"
                    :show-total="total => `共 ${total} 条`" :pageSizeOptions="['10', '20']"
                    @change="onPageNumChange" @showSizeChange="onPageSizeChange" show-size-changer show-quick-jumper
                    style="text-align:center" />
            </div>
        </a-col>
        <a-col :span='10'>
            <div class="imgbox1">
                <div class="btns">
                    <a-button type="primary" @click="featureComparison" >特征对比</a-button>
                    <a-button type="primary" @click="shoperFeatureComparison" >店员特征对比</a-button>
                </div>
                <div class='comparsionBox' v-loading='isLoadingComparison'>
                   <p v-if='boxListLeft.length>0'><span>{{boxListLeft[0].person_unid}}</span> <span style="float: right;">共{{boxListLeft.length}}张</span></p>
                   <a-row @dragenter="dragEnter($event)" @dragleave="dragLeave($event)" @drop="dropLeft($event)"
                    @dragover="allowDrop($event)" >
                        <a-col :span="6" v-for="item in boxListLeft">
                            <div class="itemBox" :class="item.id==currentItemId?'actived':''" @click="clickItem(item)">
                                <el-image :src="item.picture_url" :fit="'fill'" class="single-image">
                                </el-image>
                                <span class="el-icon-document  downloadFile" @click="downloadFile(item,$event)"></span>
                                <span class="el-icon-picture-outline  openImage" @click="openImage(item,$event)"></span>
                                <div>时间:{{ item.counttime }}</div>
                                <div>方向:{{ formatDirection(item.direction) }}</div>
                                <div>地点:{{ item.gate_name }}</div>
                            </div>
                        </a-col>
                        <a-empty v-if='boxListLeft.length==0' description="拖拽图片到此处"></a-empty>
                   </a-row> 
                </div>
                <div class='comparsionBox' v-loading='isLoadingComparisonRight' style="margin-top: 15px;">
                    <p v-if='boxListRight.length>0'><span>{{boxListRight[0].person_unid}}</span> <span style="float: right;">共{{boxListRight.length}}张</span></p>
                    <a-row @dragenter="dragEnter($event)" @dragleave="dragLeave($event)" @drop="dropRight($event)"
                     @dragover="allowDrop($event)">
                         <a-col :span="6" v-for="item in boxListRight">
                             <div class="itemBox" :class="item.id==currentItemId?'actived':''" @click="clickItem(item)">
                                 <el-image :src="item.picture_url" :fit="'fill'" class="single-image">
                                 </el-image>
                                 <span class="el-icon-document  downloadFile" @click="downloadFile(item,$event)"></span>
                                 <span class="el-icon-picture-outline  openImage" @click="openImage(item,$event)"></span>
                                 <div>时间:{{ item.counttime }}</div>
                                 <div>方向:{{ formatDirection(item.direction) }}</div>
                                 <div>地点:{{ item.gate_name }}</div>
                             </div>
                         </a-col>
                         <a-empty v-if='boxListRight.length==0' description="拖拽图片到此处"></a-empty>
                    </a-row>
                </div>
            </div>
        </a-col>
    </a-row>
    <DetailDialog ref="DetailDialogRef" />
    <DetailDialogComparison ref="DetailDialogComparisonRef" />
    <imgOtherDialog ref="imgOtherDialogRef" />
</template>

<script>
    import {
        computed,
        reactive,
        ref,
        toRaw
    } from 'vue'
    import comparsionResultApi from '@/views/ComparisonCapturedPictures/api'
    import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi'
    import {
        isArray
    } from '@/PublicUtil/Judgment'
    import moment from 'moment'
    import {
        filterEmptyValueInObject,
        formatDate,
        formatTime,
        getPagedList
    } from '@/PublicUtil/PublicUtil'
    import {ElMessage} from 'element-plus'
    import DetailDialog from "./DetailDialog.vue";
    import DetailDialogComparison from "./DetailDialogComparison.vue";
    import imgOtherDialog from "./imgOtherDialog.vue";
    export default {
        components: {
          DetailDialog,
          DetailDialogComparison,
          imgOtherDialog
        },
        setup() {
            // scalar
            const pageNum = ref(1)
            const pageSize = ref(10)
            const total = ref()
            const isLoading = ref(false)
            const isLoadingComparison = ref(false)
            const isLoadingComparisonRight = ref(false)
            // sequence
            const dataList = ref([])
            const accountList = ref([])
            const plazaList = ref([])
            const zoneList = ref([])
            const gateList = ref([])
            // ref
            const DetailDialogRef = ref();
            const DetailDialogComparisonRef = ref();
            const imgOtherDialogRef = ref()
            const pagedTableDataList = computed(
                () => {
                    return getPagedList(dataList.value, 10)
                }
            )

            const queryForm = reactive({
                account_id: [],
                plaza_id: [],
                zone_id: [],
                gate_id: [],
                type: 0,
                direction: [1, -1, 0],
                picType: 2,
                personType: [1, 0],
                date: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'),
                startTime: moment('00:00:00', 'HH:mm:ss'),
                endTime: moment('23:59:59', 'HH:mm:ss'),
                minPic:'',
                maxPic:'',
            })
            // function
            const onPageNumChange = function(num) {
                pageNum.value = num
                confirmSearch()
            }

            const onPageSizeChange = function(current, size) {
                pageNum.value = 1
                pageSize.value = size
                confirmSearch()
            }

            const onAccountChange = function() {
                getPlazaList()
                // getZoneList()
                // getGateList()
            }

            const onPlazaChange = function() {
                getZoneList()
                getGateList()
            }

            const onZoneChange = function() {
                getGateList()
            }

            const getPlazaList = function() {
                queryForm.plaza_id = []
                plazaList.value = []
                snapshotRecordApi.getPlazaList({
                    account_id: queryForm.account_id.toString()
                }).then(
                    (r) => {
                        if (isArray(r)) {
                            for (const item of r) {
                                plazaList.value.push({
                                    value: item.id,
                                    label: item.name,
                                })
                            }
							if(plazaList.value.length>0){
								queryForm.plaza_id.push(plazaList.value[0].value)
								getZoneList()
								getGateList()
								confirmSearch()
							}
                        }
                    }
                )
            }

            const getZoneList = function() {
                queryForm.zone_id = []
                zoneList.value = []
                snapshotRecordApi.getZoneList({
                    account_id: queryForm.account_id.toString(),
                    plaza_id: queryForm.plaza_id.toString(),
                }).then(
                    (r) => {
                        if (isArray(r)) {
                            for (const item of r) {
                                zoneList.value.push({
                                    value: item.id,
                                    label: item.name,
                                })
                            }
                        }
                    }
                )
            }

            const getGateList = function() {
                queryForm.gate_id = []
                gateList.value = []
                snapshotRecordApi.getGateList({
                    account_id: queryForm.account_id.toString(),
                    plaza_id: queryForm.plaza_id.toString(),
                    zone_id: queryForm.zone_id.toString(),
                    type: queryForm.type,
                }).then(
                    (r) => {
                        if (isArray(r.data)) {
                            for (const item of r.data) {
                                gateList.value.push({
                                    value: item.id,
                                    label: item.name,
                                })
                            }
                        }
                    }
                )
            }

            const getAccountList = function() {
                queryForm.account_id = []
                accountList.value = []
                snapshotRecordApi.getAccountList().then(
                    (r) => {
                        if (isArray(r)) {
                            for (const item of r) {
                                accountList.value.push({
                                    value: item.id,
                                    label: item.name,
                                })
                            }
							if(accountList.value.length){
								queryForm.account_id.push(accountList.value[0].value)
								getPlazaList(1)
							}
                        }
                    }
                )
            }

            const confirmSearch = function() {
                const rawData = toRaw(queryForm)
                if(rawData.minPic>rawData.maxPic){
                    ElMessage(
                        {
                            message: `请输入正确的图片数量范围`,
                            type: 'warning'
                        }
                    )
                    return
                }
                isLoading.value = true
                const data = filterEmptyValueInObject({
                    account_id: rawData.account_id.toString(),
                    type: rawData.type,
                    plaza_id: rawData.plaza_id.toString(),
                    zone_id: rawData.zone_id.toString(),
                    gate_id: rawData.gate_id.toString(),
                    direction: rawData.direction.toString(),
                    picType: rawData.picType,
                    personType: rawData.personType.toString(),
                    startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime),
                    endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime),
                    minPic:rawData.minPic,
                    maxPic:rawData.maxPic,
                    page: pageNum.value - 1,
                    pageSize: pageSize.value,
                })

                comparsionResultApi.getPersonGroupList(data).then(
                    (r) => {
                        isLoading.value = false
                        r.data.persons.forEach((item) => {
                            if (item.features_url) {
                                item.features_url = window._baseImgUrl + item.features_url
                            }
                            if (item.picture_url) {
                                item.picture_url = window._baseImgUrl + item.picture_url
                            }
                        })
                        dataList.value = r.data.persons
                        total.value = r.data.pageNum
                        // boxListLeft.value = []
                        // boxListRight.value = []
                        // boxObj.value = {}
                    }
                )
            }

            const formatDirection = function(number) {
                switch (number) {
                    case 1: {
                        return '进'
                    }
                    case -1: {
                        return '出'
                    }
                    case 0: {
                        return '横穿'
                    }
                    default: {

                        break
                    }
                }
            }
            const formatPersonType = function(number){
                switch (number) {
                    case 1: {
                        return '店员'
                    }
                    case 0: {
                        return '顾客'
                    }
                    default: {
                
                        break
                    }
                }
            }
            const __main = function() {
                getAccountList()
            }
            let boxObjStart = ref({})
            let boxObj = ref({})
            let boxListLeft = ref([])
            let boxListRight = ref([])
            const currentItemId = ref()
            const dragStart= function (item,event) {
                boxObjStart.value = item
            }
            const dragEnter= function (event) {
                console.log('进入')
            }
            const dragLeave= function (event) {
                console.log('出去')
            }
            const allowDrop= function (event) {
                event.preventDefault();
            }
            const clickItemObj = ref({})
            const clickItem = function(item){
                clickItemObj.value = item
                currentItemId.value = item.id
            }
            const dropLeft= function (event) {
                event.preventDefault();
                boxObj.value = boxObjStart.value
                isLoadingComparison.value = true;
                boxListLeft.value = [];
                const rawData = toRaw(queryForm)
                let parmas = {
                    account_id: rawData.account_id.toString(),
                    plaza_id: rawData.plaza_id.toString(),
                    zone_id: rawData.zone_id.toString(),
                    gate_id: rawData.gate_id.toString(),
                    type: rawData.type,
                    direction: rawData.direction.toString(),
                    picType: rawData.picType,
                    personType: rawData.personType.toString(),
                    startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime),
                    endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime),
                    person_unid:boxObj.value.person_unid,
                }
                comparsionResultApi.getPersonsDetailList(parmas).then((r) => {
                    isLoadingComparison.value = false
                        if (r.msg_code==200 && isArray(r.data.personList)) {
                           if(r.data.personList.length>0){
                               r.data.personList.forEach((item) => {
                                   if (item.features_url) {
                                       item.features_url = window._baseImgUrl + item.features_url
                                   }
                                   if (item.picture_url) {
                                       item.picture_url = window._baseImgUrl + item.picture_url
                                   }
                               })
                               boxListLeft.value = r.data.personList
                           }
                        }
                    }
                )
            }
            const dropRight= function (event) {
                event.preventDefault();
                boxListRight.value = [];
                boxObj.value = boxObjStart.value
                const rawData = toRaw(queryForm)
                isLoadingComparisonRight.value = true
                let parmas = {
                    account_id: rawData.account_id.toString(),
                    plaza_id: rawData.plaza_id.toString(),
                    zone_id: rawData.zone_id.toString(),
                    gate_id: rawData.gate_id.toString(),
                    type: rawData.type,
                    direction: rawData.direction.toString(),
                    picType: rawData.picType,
                    personType: rawData.personType.toString(),
                    startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime),
                    endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime),
                    person_unid:boxObj.value.person_unid,
                }
                comparsionResultApi.getPersonsDetailList(parmas).then((r) => {
                    isLoadingComparisonRight.value = false
                        if (r.msg_code==200 && isArray(r.data.personList)) {
                           if(r.data.personList.length>0){
                               r.data.personList.forEach((item) => {
                                   if (item.features_url) {
                                       item.features_url = window._baseImgUrl + item.features_url
                                   }
                                   if (item.picture_url) {
                                       item.picture_url = window._baseImgUrl + item.picture_url
                                   }
                               })
                               boxListRight.value = r.data.personList
                           }
                        }
                    }
                )
            }
            // 特征对比
            const featureComparison = function(){
                const rawData = toRaw(queryForm)
                if(!clickItemObj.value.id){
                    ElMessage(
                        {
                            message: `请选择拖拽的图片`,
                            type: 'warning'
                        }
                    )
                    return
                }
                if(!clickItemObj.value.picture_url){
                    ElMessage(
                        {
                            message: `该图片没有特征，请选择有效的图片`,
                            type: 'warning'
                        }
                    )
                    return
                }
                let parmas = {
                    mall_id:clickItemObj.value.mall_id,
                    picType:rawData.picType,
                    pic_id:clickItemObj.value.id,
                    countdate:formatDate(rawData.date)
                }
                parmas.persionlistLeft = boxListLeft.value
                parmas.persionlistRight = boxListRight.value
                DetailDialogComparisonRef.value.initDialog(clickItemObj.value,parmas);
            }
            // 店员特征对比
            const shoperFeatureComparison = function(){
                const rawData = toRaw(queryForm)
                if(!clickItemObj.value.id){
                    ElMessage(
                        {
                            message: `请选择拖拽的图片`,
                            type: 'warning'
                        }
                    )
                    return
                }
                if(!clickItemObj.value.picture_url){
                    ElMessage(
                        {
                            message: `该图片没有特征，请选择有效的图片`,
                            type: 'warning'
                        }
                    )
                    return
                }
                let parmas = {
                    plaza_id:clickItemObj.value.mall_id,
                    pic_type:rawData.picType,
                    pic_id:clickItemObj.value.id,
                    ip:window._baseImgUrl,
                    countdate:formatDate(rawData.date)
                }
                DetailDialogRef.value.initDialog(clickItemObj.value,parmas);
            }
            const downloadFile = function(item,event){
                event.stopPropagation()
                if(item.features_url){
                    window.open(item.features_url)
                }else{
                    ElMessage(
                        {
                            message: `该图片没有特征`,
                            type: 'warning'
                        }
                    )
                    return
                }
                
            }
            const openImage = function(item,event){
                event.stopPropagation()
                if(item.features_url){
                    let url = item.picture_url
                    imgOtherDialogRef.value.initDialog(url.split('0.jpg')[0]+'1.jpg')
                }else{
                    ElMessage(
                        {
                            message: `该图片没有特征`,
                            type: 'warning'
                        }
                    )
                    return
                }
            }
            __main()

            return {
                // scalar
                isLoading,
                pageNum,
                pageSize,
                total,
                isLoadingComparison,
                isLoadingComparisonRight,
                currentItemId,
                // sequence
                accountList,
                plazaList,
                zoneList,
                gateList,
                pagedTableDataList,
                boxListLeft,
                boxListRight,
                // mapping
                queryForm,
                // function
                onPageNumChange,
                onPageSizeChange,
                onAccountChange,
                onPlazaChange,
                onZoneChange,
                confirmSearch,
                formatDirection,
                formatPersonType,
                dragStart,
                dragEnter,
                dragLeave,
                allowDrop,
                dropLeft,
                dropRight,
                featureComparison,
                shoperFeatureComparison,
                clickItem,
                downloadFile,
                openImage,
                // ref
                DetailDialogRef,
                DetailDialogComparisonRef,
                imgOtherDialogRef
            }
        }
    }
</script>
<style scoped="scoped" lang="less">
    .single-image {
        height: 300px;
        width: 100%;
    }
    .actived{
        border: 1px solid #1890ff;
    }
    .imgbox1{
        
        margin-top: 20px;
        .btns{
            margin-top: 10px;
            margin-bottom: 10px;
        }
        button{
            margin-right: 10px;
        }
    }
    .colItem{
        flex: 0 0 20%;
        max-width: 20%;
    }
    .itemBox{
        margin: 0 5px;
        position: relative;
        .downloadFile{
           position: absolute;
           color: #1890ff;
           font-size: 32px;
           top: 0;
           right: 0;
           cursor: pointer;
        }
        .openImage{
            position: absolute;
            color: #1890ff;
            font-size: 32px;
            top: 0;
            right: 30px;
            cursor: pointer;
        }
    }
    .comparsionBox{
        padding-top: 5px;
        border: 2px dashed #ccc;
        height: 430px;
        overflow-y: auto;
        p{
            // text-align: right;
            margin-right: 20px;
            margin-left: 20px;
        }
        .ant-empty{
            margin: 0 auto;
            margin-top: 50px;
        }
    }
</style>