Featurematching.vue

<template>
    <a-form :model="queryForm" layout="inline">
        <a-form-item label="集团：" style="padding: 5px 0">
            <a-select v-model:value="queryForm.account_id"
                      style="width: 280px"
                      @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: 280px"
                      :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.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">
		    <el-input-number class="thresholdInput" size="small" :controls='false' :min="1" :max="100" v-model="queryForm.customScore "></el-input-number>
		</a-form-item>
		
        <a-form-item label="选择日期：" style="padding: 5px 0">
            <a-date-picker v-model:value="queryForm.countdate" style="width: 280px"/>
        </a-form-item>
		<a-form-item label="选择文件：" style="padding: 5px 0">
		    <a-upload :file-list="fileList" :before-upload="beforeUpload" :multiple="false" @remove="handleRemove" action=''>
			  <a-button>
				<upload-outlined></upload-outlined>
				选择文件
			  </a-button>
			</a-upload>
			{{fileName}}
		</a-form-item>
        <a-form-item style="padding: 5px 0">
            <a-button type="primary" @click="queryData">搜索</a-button>
        </a-form-item>
    </a-form>
	<div v-loading="isLoading">
		<div class="resultContent" :style="{'height':contentHeight+'px'}">
		    <el-row :gutter="20">
		        <el-col :span="3" v-for="item in resultList">
		            <div class="itemBox">
						<div>{{ item.id }}</div>
		                <el-image :src="item.picture_url"
		                          :fit="'fill'"
		                          class="single-image">
		                </el-image>
						<p class="featureNum">{{item.featureNum?(item.featureNum).toFixed(2):0}}</p>
		            </div>
		        </el-col>
		    </el-row>
		</div>
	</div>
</template>

<script>
import {reactive, ref, toRaw} from 'vue'
import {ElMessage} from 'element-plus'
import moment from 'moment'
import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi'
import {isArray} from '@/PublicUtil/Judgment'
import {formatDate, formatTime} from '@/PublicUtil/PublicUtil'
import api from '@/views/Featurematching/api'
import ResultDisplay from '@/component/ResultDisplay/ResultDisplay'

export default {
    components: {
        ResultDisplay,
    },
    setup() {
        const resultList = ref([])
        // sequence
        const accountList = ref([])
        const plazaList = ref([])
		const isLoading = ref(false)
        const queryForm = reactive(
            {
                account_id: [],
                plaza_id: [],
                picType: '1',
                countdate: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'),
				customScore:75,
				feature:''
            }
        )
		const fileList = ([]);
		const fileName = ref('')
		const beforeUpload= function(file) {
			fileName.value = file.name
		  fileList.value = file;
		  return false;
		};
		const handleRemove=function(file) {
		  const index = fileList.value.indexOf(file);
		  const newFileList = fileList.value.slice();
		  newFileList.splice(index, 1);
		  fileList.value = newFileList;
		};
        const onAccountChange = function() {
            getPlazaList()
        }
        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,
                                }
                            )
                        }
                    }
                }
            )
        }

        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,
                                }
                            )
                        }
                    }
                }
            )
        }

        const queryData = function() {
            const rawData = toRaw(queryForm)
			isLoading.value= true
   //          const data = {
			// 	plaza_id: rawData.plaza_id,
			// 	feature: rawData.feature,
			// 	pic_type : rawData.picType,
			// 	countdate: moment(rawData.countdate).format('YYYY-MM-DD'),
			// 	ip:window._baseImgUrl,
			// 	customScore:rawData.customScore
			// }
			const formData = new FormData();
			formData.append('featureFile',fileList.value)
			formData.append('plaza_id',rawData.plaza_id)
			formData.append('pic_type',rawData.picType)
			formData.append('countdate',moment(rawData.countdate).format('YYYY-MM-DD'))
			formData.append('ip',window._baseImgUrl)
			formData.append('customScore',rawData.customScore)
			api.getFindByFeature(formData).then((r) => {
					if(r.msg_code==200 ){
						if(r.data && r.data.length>0){
							r.data.forEach(item=>{
								if (item.picture_url) {
								    item.picture_url = window._baseImgUrl + item.picture_url
								}
							})
							resultList.value = r.data
						}
					}else{
						ElMessage({
							message: r.msg_info,
							type: 'warning'
						});
					}
					isLoading.value= false
				}
			)
        }

        const __main = function() {
            getAccountList()
        }

        __main()

        return {
            // sequence
            accountList,
            plazaList,
            resultList,
			fileList,
            queryForm,
			fileName,
            onAccountChange,
			queryData,
			beforeUpload,
			handleRemove,
			isLoading
        }
    }
}
</script>

<style scoped>
	.single-image{
		width: 200px;
		height: 300px;
	}
	.itemBox{
		position: relative;
		margin: 0 5px;
		cursor: pointer;
	}
	.featureNum{
	    position: absolute;
	    top: 25px;
	    left: 15px;
	    color: red;
	    font-weight: 900;
	    font-size: 16px;
	}
</style>