FeatureComparisonVerification.vue

<template>
    <a-row style='height: 100%;' :gutter="10">
        <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 format="HH:mm:ss" valueFormat="HH:mm:ss" v-model:value="queryForm.startTime" style="width: 100px" />
                    <a-time-picker format="HH:mm:ss" valueFormat="HH:mm:ss" v-model:value="queryForm.endTime" style="width: 100px" />
                </a-form-item>
                <a-form-item style="padding: 5px 0">
                    <a-button type="primary" @click="clickSearch" :loading="isLoading">查询</a-button>
                </a-form-item>
            </a-form>
            <div v-loading="isLoading">
                <el-row v-for="row in pagedTableDataList">
                    <el-col class="col" :span="6" v-for="(item,index) in row" :key="index">
                        <div @click='chooseItem(item)' class="colItem" :class="currentItemId==item.id?'actived':''">
                            <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>
                    </el-col>
                </el-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" class='imgBox1'>
            <div class="imgBox1_top1">
                <p v-if="featureList.length>0" style="margin-left: 15px;">
                    <a-button type="primary" style="float: right;" @click="fullScreen('imgBox1_top1')" >全屏</a-button>
                    <span>{{featureList[0].person_unid}}</span>
                    <span style="float: right;margin-right: 15px;">共{{featureList.length}}张</span>
                </p>
                 
                <el-row class="imgBox1_top" :gutter="10" v-loading="isLoadingFeature">
                     <el-col :span="6" class="itemBox" v-for="item in featureList">
                         <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>
                         <span class="el-icon-delete  delete" @click="deleteImage(item,$event)"></span>
                         <p class="featureNum">{{item.featureNum?(item.featureNum).toFixed(2):0}}</p>
                         <div>时间:{{ item.counttime }}</div>
                         <div>方向:{{ formatDirection(item.direction) }}</div>
                         <div>地点:{{ item.gate_name }}</div>
                     </el-col>
                     <a-empty v-if='featureList.length==0' style='margin: 0 auto;'></a-empty>
                </el-row>
            </div>
            <div class="imgBox2_top" >
                <div class="btns">
                    <p v-if='comparisonList.length>0' style="margin-left: 15px;float: left">
                        <span>{{comparisonList[0].person_unid}}</span>
                        <span syle="margin-left:30px">共{{comparisonList.length}}张</span>
                    </p>
                    阈值：<el-input-number class="thresholdInput" size="small" :controls='false' :min="1" :max="100" v-model="threshold"></el-input-number>
                    <a-button type="primary" @click="reComparison" >重新比对</a-button>
                    <a-button type="primary" @click="reComparisonFeature" >重提特征比对</a-button>
                    <a-button type="primary" @click="fullScreen('imgBox2_top')" >全屏</a-button>
                </div>
                <el-row :gutter="10" v-loading="isLoadingComparison" class='imgBox2'>
                     <el-col :span="6" class="itemBox" v-for="item in comparisonList">
                         <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>
                         <span class="el-icon-plus  add" v-if="boxObj.person_unid != item.person_unid" @click="addImage(item,$event)"></span>
                         <p class="featureNum">{{item.featureNum?(item.featureNum).toFixed(2):0}}</p>
                         <div>时间:{{ item.counttime }}</div>
                         <div>方向:{{ formatDirection(item.direction) }}</div>
                         <div>地点:{{ item.gate_name }}</div>
                     </el-col>
                     <a-empty v-if='comparisonList.length==0' style='margin: 0 auto;'></a-empty>
                </el-row>
            </div>
        </a-col>
    </a-row>
    <el-dialog v-model="centerDialogVisible" v-if="centerDialogVisible" title="body1" >
        <el-image :src="otherPictureUrl" :fit="'contain'" class="single-image">
        </el-image>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="centerDialogVisible = false">关闭</el-button>
          </span>
        </template>
    </el-dialog>
    <!-- 特征比对 -->
    <el-dialog v-model="featureDialogVisible" custom-class="imgDialog" v-if="featureDialogVisible" title="特征比对" width="90%" top='50px'>
        <el-row class="featureBox" :gutter="10">
             <el-col :span="3" class="itemBox" v-for="item in featureList">
                 <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>
                 <span class="el-icon-delete  delete" @click="deleteImage(item,$event)"></span>
                 <p class="featureNum">{{item.featureNum?(item.featureNum).toFixed(2):0}}</p>
                 <div>时间:{{ item.counttime }}</div>
                 <div>方向:{{ formatDirection(item.direction) }}</div>
                 <div>地点:{{ item.gate_name }}</div>
             </el-col>
             <a-empty v-if='featureList.length==0' style='margin: 0 auto;'></a-empty>
        </el-row>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="featureDialogVisible = false">关闭</el-button>
          </span>
        </template>
    </el-dialog>
    <!-- 特征重新比对 -->
    <el-dialog v-model="refeatureDialogVisible" custom-class="imgDialog" v-if="refeatureDialogVisible" title="特征比对" width="90%" top='50px'>
        <div class="btns featureBoxBtns ">
            阈值：<el-input-number class="thresholdInput" size="small" :controls='false' :min="1" :max="100" v-model="threshold"></el-input-number>
            <a-button type="primary" @click="reComparison" >重新比对</a-button>
            <a-button type="primary" @click="reComparisonFeature" >重提特征比对</a-button>
        </div>
        <el-row :gutter="10" class='featureBox'>
             <el-col :span="3" class="itemBox" v-for="item in comparisonList">
                 <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>
                 <span class="el-icon-plus  add" v-if="boxObj.person_unid != item.person_unid" @click="addImage(item,$event)"></span>
                 <p class="featureNum">{{item.featureNum?(item.featureNum).toFixed(2):0}}</p>
                 <div>时间:{{ item.counttime }}</div>
                 <div>方向:{{ formatDirection(item.direction) }}</div>
                 <div>地点:{{ item.gate_name }}</div>
             </el-col>
             <a-empty v-if='comparisonList.length==0' style='margin: 0 auto;'></a-empty>
        </el-row>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="refeatureDialogVisible = false">关闭</el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script>
    import {
        computed,
        reactive,
        ref,
        toRaw
    } from 'vue'
    import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi'
    import featureApi from '@/views/FeatureComparisonVerification/api.js'
    import {
        isArray
    } from '@/PublicUtil/Judgment'
    import moment from 'moment'
    import {
        filterEmptyValueInObject,
        formatDate,
        formatTime,
        getPagedList
    } from '@/PublicUtil/PublicUtil'
    import {ElMessage} from 'element-plus'
    export default {
        setup() {
            // scalar
            const pageNum = ref(1)
            const pageSize = ref(10)
            const total = ref()
            const isLoading = ref(false)
            const centerDialogVisible = ref(false)
            const featureDialogVisible = ref(false)
            const refeatureDialogVisible = ref(false)
            const otherPictureUrl = ref()
            // sequence
            const dataList = ref([])
            const accountList = ref([])
            const plazaList = ref([])
            const zoneList = ref([])
            const gateList = ref([])
            const featureList = ref([])
            const comparisonList = ref([])
            const boxObj = ref({})
            const currentItemId = ref()
            const isLoadingFeature = ref(false)
            const threshold = ref(75)
            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: '00:00:00',
                endTime: '23:59:59',
            })
            const searchCondition = ref({})
            if(window.localStorage.getItem('searchCondition')){
                searchCondition.value = JSON.parse(window.localStorage.getItem('searchCondition'));
                queryForm.type = searchCondition.value.type;
                queryForm.zone_id = searchCondition.value.zone_id;
                queryForm.gate_id = searchCondition.value.gate_id;
                queryForm.direction = searchCondition.value.direction;
                queryForm.picType = searchCondition.value.picType;
                queryForm.date = searchCondition.value.date;
                queryForm.startTime = searchCondition.value.startTime;
                queryForm.endTime = searchCondition.value.endTime;
            }
            // 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(1)
                // getZoneList()
                // getGateList()
            }

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

            const onZoneChange = function() {
                getGateList()
            }

            const getPlazaList = function(val) {
                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){
                                if(!val&&searchCondition.value.plaza_id && searchCondition.value.plaza_id.length>0){
                                    queryForm.plaza_id = searchCondition.value.plaza_id
                                }else{
                                    queryForm.plaza_id.push(plazaList.value[0].value)
                                }
								getZoneList(1)
								getGateList(1)
								confirmSearch()
							}
                        }
                    }
                )
            }

            const getZoneList = function(val) {
                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,
                                })
                            }
                            if(zoneList.value.length){
                                if(val&&searchCondition.value.zone_id && searchCondition.value.zone_id.length>0){
                                    queryForm.zone_id = searchCondition.value.zone_id
                                }else{
                                    queryForm.zone_id = []
                                }
                            }else{
                                queryForm.zone_id = []
                            }
                        }
                    }
                )
            }

            const getGateList = function(val) {
                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,
                                })
                            }
                            if(gateList.value.length){
                                if(val&&searchCondition.value.gate_id && searchCondition.value.gate_id.length>0){
                                    queryForm.gate_id = searchCondition.value.gate_id
                                }else{
                                    queryForm.gate_id = []
                                }
                            }else{
                                queryForm.gate_id = []
                            }
                        }
                    }
                )
            }

            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){
								if(searchCondition.value.account_id && searchCondition.value.account_id.length>0){
								    queryForm.account_id = searchCondition.value.account_id
								}else{
								    queryForm.account_id.push(accountList.value[0].value)
								}
								getPlazaList()
							}
                        }
                    }
                )
            }
			const clickSearch = function() {
				pageNum.value = 1
				confirmSearch()
			}
            const confirmSearch = function() {
                isLoading.value = true
                const rawData = toRaw(queryForm)
                console.log(rawData)
                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) + ' ' + rawData.startTime,
                    endTime: formatDate(rawData.date) + ' ' + rawData.endTime,
                    page: pageNum.value - 1,
                    pageSize: pageSize.value,
                })
                const storageData = filterEmptyValueInObject(
                    {
                        account_id: rawData.account_id,
                        type: rawData.type,
                        plaza_id: rawData.plaza_id,
                        zone_id: rawData.zone_id,
                        gate_id: rawData.gate_id,
                        direction: rawData.direction,
                        picType: rawData.picType,
                        personType: rawData.personType,
                        date: rawData.date,
                        startTime: rawData.startTime,
                        endTime: rawData.endTime,
                    }
                )
								let searchCondition = JSON.parse(window.localStorage.getItem('searchCondition'));
                let newSearchCondition = {
                	...searchCondition,
                	...storageData
                }
                window.localStorage.setItem('searchCondition',JSON.stringify(newSearchCondition))
                snapshotRecordApi.getSnapshotRecordList(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
                    }
                )
            }

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

                        break
                    }
                }
            }
            const __main = function() {
                getAccountList()
            }
            
            const chooseItem = function(data){
                isLoadingFeature.value = true
                currentItemId.value = data.id
                const rawData = toRaw(queryForm)
                let parmas = {
                    person_unid:data.person_unid,
                    pic_type:rawData.picType,
                    countdate:formatDate(rawData.date),
                    pic_id:data.id,
                    ip:window._baseImgUrl
                }
                boxObj.value = data;
                featureList.value = []
                comparisonList.value = []
                featureApi.getPersonContrastList(parmas).then((r) => {
                        isLoadingFeature.value = false
                        if (r.data&&isArray(r.data.personList)) {
                            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
                                }
                            })
                            featureList.value = r.data.personList
                        }
                    }
                )
            }
            const isLoadingComparison = ref(false)
            const reComparison = function(){
                const rawData = toRaw(queryForm)
                if(!boxObj.value.id){
                    ElMessage(
                        {
                            message: `请选择左侧列表`,
                            type: 'warning'
                        }
                    )
                    return
                }
                isLoadingComparison.value = true
                let parmas = {
                    plaza_id:boxObj.value.mall_id,
                    pic_type:rawData.picType,
                    countdate:formatDate(rawData.date),
                    pic_id:boxObj.value.id,
                    ip:window._baseImgUrl,
                    customScore:threshold.value?threshold.value:75
                }
                comparisonList.value = []
                featureApi.getAllPersonContrastList(parmas).then((r) => {
                    isLoadingComparison.value = false
                        if (isArray(r.data)) {
                           if(r.data.length>0){
                               r.data.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
                                   }
                               })
                               comparisonList.value = r.data
                           }
                        }
                    }
                )
            }
            const reComparisonFeature = function(){
                const rawData = toRaw(queryForm)
                if(!boxObj.value.id){
                    ElMessage(
                        {
                            message: `请选择左侧列表`,
                            type: 'warning'
                        }
                    )
                    return
                }
                isLoadingComparison.value = true
                let parmas = {
                    plaza_id:boxObj.value.mall_id,
                    pic_type:rawData.picType,
                    countdate:formatDate(rawData.date),
                    pic_id:boxObj.value.id,
                    ip:window._baseImgUrl
                }
                comparisonList.value = []
                featureApi.getNewPersonContrastList(parmas).then((r) => {
                    isLoadingComparison.value = false
                        if (isArray(r.data)) {
                           if(r.data.length>0){
                               r.data.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
                                   }
                               })
                               comparisonList.value = r.data
                           }
                        }
                    }
                )
            }
            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){
                    centerDialogVisible.value = true;
                    let url = item.picture_url
                    otherPictureUrl.value = url.split('0.jpg')[0]+'1.jpg'
                }else{
                    ElMessage(
                        {
                            message: `该图片没有特征`,
                            type: 'warning'
                        }
                    )
                    return
                }
            }
            const deleteImage = function(item,event){
                event.stopPropagation()
                featureApi.updateImage({
                    'personUnid':item.unid,
                    'id':item.id,
                    'unid':item.unid,
                    'countdate':item.counttime?item.counttime:'',
                }).then((r) => {
                    if(r.msg_code==200){
                        ElMessage(
                            {
                                message: `删除成功`,
                                type: 'success'
                            }
                        )
                        featureList.value.forEach((itemObj,index)=>{
                            if(itemObj.unid==item.unid){
                                featureList.value.splice(index,1)
                            }
                        })
                    }
                })
            }
            const addImage = function(data,event){
                event.stopPropagation()
               
                featureApi.updateImage({
                    'personUnid':boxObj.value.person_unid,
                    'id':data.id,
                    'unid':data.unid,
                    'countdate':data.counttime?data.counttime:'',
                }).then((r) => {
                    if(r.msg_code==200){
                        ElMessage(
                            {
                                message: `增加成功`,
                                type: 'success'
                            }
                        )
                        comparisonList.value.forEach(item=>{
                            if(item.unid==data.unid){
                                item.person_unid = boxObj.value.person_unid
                            }
                        })
                    }
                })
            }
            __main()
            const fullScreen = function(className){
                if(className=='imgBox2_top'){
                    refeatureDialogVisible.value = true
                }else{
                    featureDialogVisible.value = true
                }
            }
            // const 
            return {
                // scalar
                isLoading,
                pageNum,
                pageSize,
                total,
                isLoadingFeature,
                isLoadingComparison,
                currentItemId,
                centerDialogVisible,
                otherPictureUrl,
                featureDialogVisible,
                refeatureDialogVisible,
                // sequence
                accountList,
                plazaList,
                zoneList,
                gateList,
                pagedTableDataList,
                featureList,
                comparisonList,
                // mapping
                boxObj,
                threshold,
                queryForm,
                // function
                onPageNumChange,
                onPageSizeChange,
                onAccountChange,
                onPlazaChange,
                onZoneChange,
                confirmSearch,
                formatDirection,
                chooseItem,
                reComparison,
                reComparisonFeature,
                downloadFile,
                openImage,
                deleteImage,
                addImage,
                fullScreen,
				clickSearch
            }
        }
    }
</script>
<style scoped="scoped" lang="less">
    .itemBox{
        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;
        }
        .delete{
            position: absolute;
            color: red;
            font-size: 32px;
            top: 0;
            right: 60px;
            cursor: pointer;
        }
        .add{
            position: absolute;
            color: #1890ff;
            font-size: 32px;
            top: 0;
            right: 60px;
            cursor: pointer;
        }
        .featureNum{
            position: absolute;
            top: 0;
            left: 15px;
            color: red;
            font-weight: 900;
            font-size: 16px;
        }
    }
    .single-image {
        height: 300px;
        width: 100%;
    }
    .imgBox1{
        border-left: 10px solid #efefef;
        box-sizing: border-box;
        min-height: 100%;
    }
    .imgBox2{
        min-height: 400px;
        max-height: 500px;
        overflow-y: auto;
    }
    .imgBox1_top{
        width: 100%;
        min-height: 400px;
        max-height: 500px;
        overflow-y: auto;
    }
    .imgBox2_top{
        border-top: 10px solid #efefef;
        .btns{
            text-align: right;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        button{
            margin-right: 10px;
            padding: 4px 7px;
        }
    }
    .colItem{
        position: relative;
        cursor: pointer;
        margin: 0 5px;
        div{
           padding-left: 5px;
        }
        .downloadFile{
           position: absolute;
           color: #1890ff;
           font-size: 32px;
           top: 0;
           right: 0;
        }
        .openImage{
            position: absolute;
            color: #1890ff;
            font-size: 32px;
            top: 0;
            right: 30px;
            cursor: pointer;
        }
    }
    .col{
        flex: 0 0 20%;
        max-width: 20%;
    }
    .actived{
        border: 1px solid #1890ff;
    }
    .thresholdInput{
        width: 60px;
        // margin-right: 15px;
        /deep/.el-input__inner{
            text-align: left;
        }
    }
    .featureBox{
        height: 600px;
    }
    .featureBoxBtns{
        margin-bottom: 10px;
        button{
            margin-left: 15px;
        }
    }
</style>