特征匹配

src/router/index.js

@@ -53,6 +53,10 @@ const menuRoute = [
                 path: 'DataReplay',
                 path: 'DataReplay',
                 component: () => import("@/views/DataReplay/DataReplay.vue"),
                 component: () => import("@/views/DataReplay/DataReplay.vue"),
             },
             },
+			{
+			    path: 'Featurematching',
+			    component: () => import("@/views/Featurematching/Featurematching.vue")
+			},
         ]
         ]
     },
     },
 ]
 ]

src/views/Featurematching/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 style="margin: 0 5px;cursor: pointer;" >
+						<div>id:{{ item.id }}</div>
+		                <el-image :src="item.picture_url"
+		                          :fit="'fill'"
+		                          class="single-image">
+		                </el-image>
+		            </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 && 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;
+	}
+</style>

src/views/Featurematching/api.js

+import axiosInstance from "@/Request/PublicAxiosInstance"
+class FeatureResultApi {
+    
+    getFindByFeature(data) {
+        return axiosInstance.request(
+            {
+                method: 'POST',
+                url: `/feature/findByFeature`,
+                data: data
+            }
+        )
+    }
+}
+
+const featureResultApi = new FeatureResultApi()
+
+export default featureResultApi
\ No newline at end of file

src/views/Main/Main.vue

@@ -91,6 +91,12 @@
                                 <span style="padding: 0 5px">数据重放</span>
                                 <span style="padding: 0 5px">数据重放</span>
                             </div>
                             </div>
                         </a-menu-item>
                         </a-menu-item>
+						<a-menu-item :key="'/Main/Featurematching'">
+								<div class="flex-vertical-center">
+									<img :src="require('./Icons/2.svg')" style="height: auto;width:20px"/>
+									<span style="padding: 0 5px">特征匹配</span>
+								</div>
+						</a-menu-item>
                     </a-menu>
                     </a-menu>
                 </el-aside>
                 </el-aside>
                 <el-main>
                 <el-main>