Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit 6fc26dbd by tianlonglong
Options

修改字段名

1 parent ff23185a
Inline Side-by-side
Showing 5 changed files with 1033 additions and 1145 deletions
package-lock.json
This diff could not be displayed because it is too large.
src/Request/PublicAxiosInstance.js
...@@ -14,7 +14,7 @@ const axiosInstance = axios.create( ...@@ -14,7 +14,7 @@ const axiosInstance = axios.create(
// 请求拦截器 // 请求拦截器
axiosInstance.interceptors.request.use( axiosInstance.interceptors.request.use(
config => { config => {
// Cookies.set('atoken','33b0df7a-e5c6-49c3-b549-959179cd5904') Cookies.set('atoken','7150be77-f099-4a63-90c5-ef9cc6b51137')
if(!Cookies.get('atoken')){ if(!Cookies.get('atoken')){
ElMessage({ ElMessage({
message: `登录过期，请重新登录`, message: `登录过期，请重新登录`,
......
src/views/FeatureMatchingAccuracy/FeatureMatchingAccuracy.vue
<template> <template>
<div class="containter"> <div class="containter">
<el-row class="contentBox" v-loading="isLoading"> <el-row class="contentBox" v-loading="isLoading">
<el-col :span="7" class="box boxLeft"> <el-col :span="7" class="box boxLeft">
<a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '70px' } }"> <a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '70px' } }">
<a-form-item label="集团："> <a-form-item label="集团：">
<a-select v-model:value="queryForm.account_id" style="width: 150px" :options="accountList" @change="onAccountChange" optionFilterProp="label" show-search> <a-select v-model:value="queryForm.account_id" style="width: 150px" :options="accountList" @change="onAccountChange" optionFilterProp="label" show-search>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="广场："> <a-form-item label="广场：">
<a-select v-model:value="queryForm.plaza_id" style="width: 150px" :options="plazaList" @change="onMallChange" optionFilterProp="label" show-search> <a-select v-model:value="queryForm.plaza_id" style="width: 150px" :options="plazaList" @change="onMallChange" optionFilterProp="label" show-search>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-form> </a-form>
<div class="btns"> <div class="btns">
<a-button type="primary" @click="confirmSearch" class="btn">搜索</a-button> <a-button type="primary" @click="confirmSearch" class="btn">搜索</a-button>
<a-button type="primary" @click="addPersonFun" class="btn">新增注册人员</a-button> <a-button type="primary" @click="addPersonFun" class="btn">新增注册人员</a-button>
<!-- <a-button type="primary" @click="confirmSearch" class="btn">预览报告</a-button> --> <!-- <a-button type="primary" @click="confirmSearch" class="btn">预览报告</a-button> -->
</div> </div>
<el-table :data="resultList" @row-click='clickRow' :highlight-current-row='true' :rowKey="id" :height="contentHeight" style="width: 100%"> <el-table :data="resultList" @row-click='clickRow' :highlight-current-row='true' :rowKey="id" :height="contentHeight" style="width: 100%">
<!-- <el-table-column type="index" align="center" label="序号" width="80"> <!-- <el-table-column type="index" align="center" label="序号" width="80">
<template #default="scope"> <template #default="scope">
<span v-text="getIndex(scope.$index)"> </span> <span v-text="getIndex(scope.$index)"> </span>
</template> </template>
</el-table-column> --> </el-table-column> -->
<el-table-column prop="name" align="center" label="姓名"> <el-table-column prop="name" align="center" label="姓名">
</el-table-column> </el-table-column>
<el-table-column prop="regCount" align="center" label="注册图片数量"> <el-table-column prop="regCount" align="center" label="注册图片数量">
</el-table-column> </el-table-column>
<el-table-column prop="hitCount" align="center" label="命中目标数量"> <el-table-column prop="hitCount" align="center" label="命中目标数量">
</el-table-column> </el-table-column>
<el-table-column prop="content" align="center" label="操作" width="220"> <el-table-column prop="content" align="center" label="操作" width="220">
<template #default="scope"> <template #default="scope">
<el-button <el-button @click.stop @click="editRow(scope.row)" type="text" size="small" class="tab-btn">编辑</el-button>
@click.stop <el-button @click.stop @click="deleteRow(scope.row)" type="text" size="small" class="tab-btn">删除</el-button>
@click="editRow(scope.row)" <el-button @click.stop @click="addSamplePic(scope.row)" type="text" size="small" class="tab-btn">添加样本图</el-button>
type="text" <el-button @click.stop @click="hitDetail(scope.row)" type="text" size="small" class="tab-btn">命中详情</el-button>
size="small" </template>
class="tab-btn" </el-table-column>
>编辑</el-button> </el-table>
<el-button <a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total" :show-total="total => `共 ${total} 条`" :pageSizeOptions="['10', '20', '50']" @change="onPageNumChange" @showSizeChange="onPageSizeChange" show-size-changer show-quick-jumper style="text-align:center" />
@click.stop </el-col>
@click="deleteRow(scope.row)" <el-col :span="17" class="box boxRight">
type="text" <div style="margin-bottom: 10px;min-height:350px">
size="small" <a-tabs type="card" v-model:activeKey="activeKey">
class="tab-btn" <a-tab-pane key="1" tab="注册样本" class="regBox">
>删除</el-button> <div>注册样本图：{{regPictureList.length}}</div>
<el-button <el-row :gutter="10">
@click.stop <el-col :span="3" v-for="item in regPictureList">
@click="addSamplePic(scope.row)" <div style="cursor: pointer;" class='hitBox' @click="clickPicture(item,0)" :class="currentId==item.faceUnid?'active':''">
type="text" <el-image :src="item.picture_url" :fit="'fill'" class="single-image">
size="small" </el-image>
class="tab-btn" <span class="el-icon-delete delHitPic" @click.stop @click="delSamplePic(item)"></span>
>添加样本图</el-button> </div>
<el-button </el-col>
@click.stop </el-row>
@click="hitDetail(scope.row)" </a-tab-pane>
type="text" <a-tab-pane key="2" tab="命中目标" class="regBox">
size="small" <p>命中目标图：{{hitPictureList.length}}</p>
class="tab-btn" <el-row :gutter="10">
>命中详情</el-button> <el-col :span="3" v-for="item in hitPictureList">
</template> <div style="cursor: pointer;" class='hitBox' @click="clickPicture(item,1)" :class="currentId==item.faceUnid?'active':''">
</el-table-column> <el-image :src="item.picture_url" :fit="'fill'" class="single-image">
</el-table> </el-image>
<a-pagination <span class="el-icon-delete delHitPic" @click.stop @click="delHitPic(item)"></span>
v-model:current="pageNum" </div>
v-model:pageSize="pageSize" </el-col>
:total="total" </el-row>
:show-total="total => `共 ${total} 条`" </a-tab-pane>
:pageSizeOptions="['10', '20', '50']" </a-tabs>
@change="onPageNumChange" </div>
@showSizeChange="onPageSizeChange" <a-form :model="hitSearchObj" layout="inline" :label-col="{ style: { width: 'auto' } }">
show-size-changer <a-form-item label="监控点：" class="secondCondition">
show-quick-jumper <a-select v-model:value="hitSearchObj.gate_id" style="width: 250px" mode="multiple" :maxTagCount="1" :options="gateList" optionFilterProp="label" show-search>
style="text-align:center" </a-select>
/> </a-form-item>
</el-col> <a-form-item label="方向：" class="secondCondition">
<el-col :span="17" class="box boxRight"> <a-select v-model:value="hitSearchObj.direction" mode="multiple" :maxTagCount="1" style="width: 125px">
<div style="margin-bottom: 10px;min-height:350px"> <a-select-option :value="1">进</a-select-option>
<a-tabs type="card" v-model:activeKey="activeKey"> <a-select-option :value="-1">出</a-select-option>
<a-tab-pane key="1" tab="注册样本" class="regBox"> </a-select>
<div>注册样本图：{{regPictureList.length}}</div> </a-form-item>
<el-row :gutter="10"> <a-form-item label="分数：" class="secondCondition">
<el-col :span="3" v-for="item in regPictureList"> <a-input v-model:value="hitSearchObj.score" style="width: 50px;"></a-input>
<div style="cursor: pointer;" class='hitBox' @click="clickPicture(item)" :class="currentId==item.id?'active':''"> </a-form-item>
<el-image :src="item.picture_url" <a-form-item label="选择日期：" class="secondCondition">
:fit="'fill'" <a-date-picker v-model:value="hitSearchObj.date" :format="'YYYY-MM-DD'" style="width: 110px" />
class="single-image"> </a-form-item>
</el-image> <a-form-item label="选择时间：" class="secondCondition">
<span class="el-icon-delete delHitPic" @click.stop @click="delSamplePic(item)"></span> <a-time-picker v-model:value="hitSearchObj.startTime" style="width: 90px" />
</div> <a-time-picker v-model:value="hitSearchObj.endTime" style="width: 90px" />
</el-col> </a-form-item>
</el-row> <a-form-item class="secondCondition">
</a-tab-pane> <a-button type="primary" style="margin-right: 5px;" @click="searchPicture">查询</a-button>
<a-tab-pane key="2" tab="命中目标" class="regBox"> <!-- <a-button type="primary" @click="checkPicture">选中</a-button> -->
<p>命中目标图：{{hitPictureList.length}}</p> </a-form-item>
<el-row :gutter="10"> </a-form>
<el-col :span="3" v-for="item in hitPictureList"> <div class="identifyResult">
<div style="cursor: pointer;" class='hitBox' @click="clickPicture(item)" :class="currentId==item.id?'active':''"> <div>识别结果：{{identifyResultList.length}}</div>
<el-image :src="item.picture_url" <el-row :gutter="10" class="identifyResultTable" :style="{height:contentHeight-340+'px'}">
:fit="'fill'" <el-col :span="3" v-for="item in identifyResultList">
class="single-image"> <div class="pictureBox">
</el-image> <el-image :src="item.picture_url" :fit="'fill'" class="single-image">
<span class="el-icon-delete delHitPic" @click.stop @click="delHitPic(item)"></span> </el-image>
</div> <span class="score">{{item.featureNum}}</span>
</el-col> <div class="btnPic">
</el-row> <el-button type="primary" class="checkBox " @click="checkPicture(item)">选中</el-button>
</a-tab-pane> <el-button type="primary" class="checkBox text" @click="clickPicture(item)">以图搜图</el-button>
</a-tabs>
</div> </div>
<a-form :model="hitSearchObj" layout="inline" :label-col="{ style: { width: 'auto' } }">
<a-form-item label="监控点：" class="secondCondition"> <!-- <el-checkbox class="checkBox" v-model="item.checked"></el-checkbox> -->
<a-select v-model:value="hitSearchObj.gate_id" <!-- <span class="text" @click="clickPicture(item)">
style="width: 250px"
mode="multiple"
:maxTagCount="1"
:options="gateList"
optionFilterProp="label"
show-search
>
</a-select>
</a-form-item>
<a-form-item label="方向：" class="secondCondition">
<a-select v-model:value="hitSearchObj.direction"
mode="multiple"
:maxTagCount="1"
style="width: 125px">
<a-select-option :value="1">进</a-select-option>
<a-select-option :value="-1">出</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="分数：" class="secondCondition">
<a-input v-model:value="hitSearchObj.score" style="width: 50px;"></a-input>
</a-form-item>
<a-form-item label="选择日期：" class="secondCondition">
<a-date-picker v-model:value="hitSearchObj.date" :format="'YYYY-MM-DD'" style="width: 110px"/>
</a-form-item>
<a-form-item label="选择时间：" class="secondCondition">
<a-time-picker v-model:value="hitSearchObj.startTime" style="width: 90px"/>
<a-time-picker v-model:value="hitSearchObj.endTime" style="width: 90px"/>
</a-form-item>
<a-form-item class="secondCondition">
<a-button type="primary" style="margin-right: 5px;" @click="searchPicture">查询</a-button>
<!-- <a-button type="primary" @click="checkPicture">选中</a-button> -->
</a-form-item>
</a-form>
<div class="identifyResult">
<div>识别结果：{{identifyResultList.length}}</div>
<el-row :gutter="10" class="identifyResultTable" :style="{height:contentHeight-340+'px'}">
<el-col :span="3" v-for="item in identifyResultList">
<div class="pictureBox">
<el-image :src="item.picture_url"
:fit="'fill'"
class="single-image">
</el-image>
<span class="score">{{item.featureNum}}</span>
<div class="btnPic">
<el-button type="primary" class="checkBox " @click="checkPicture(item)">选中</el-button>
<el-button type="primary" class="checkBox text" @click="clickPicture(item)">以图搜图</el-button>
</div>
<!-- <el-checkbox class="checkBox" v-model="item.checked"></el-checkbox> -->
<!-- <span class="text" @click="clickPicture(item)">
<span class="el-icon-picture-outline iconPic"></span> <span class="el-icon-picture-outline iconPic"></span>
</span> --> </span> -->
</div> </div>
</el-col>
</el-row>
<a-pagination
v-model:current="pageNum_identify"
v-model:pageSize="pageSize_identify"
:total="total_identify"
:show-total="total => `共 ${total_identify} 条`"
:pageSizeOptions="['16', '32', '64']"
@change="onPageNumChange_identify"
@showSizeChange="onPageSizeChange_identify"
show-size-changer
show-quick-jumper
style="text-align:center"
/>
</div>
</el-col> </el-col>
</el-row> </el-row>
<addPersonConfig ref="addPersonConfigRef" @refreshParentTable = 'confirmSearch'></addPersonConfig> <a-pagination v-model:current="pageNum_identify" v-model:pageSize="pageSize_identify" :total="total_identify" :show-total="total => `共 ${total_identify} 条`" :pageSizeOptions="['16', '32', '64']" @change="onPageNumChange_identify" @showSizeChange="onPageSizeChange_identify"
<editPersonConfig ref="addSamplePicConfigRef" @refreshParentTable = 'confirmSearch'></editPersonConfig> show-size-changer show-quick-jumper style="text-align:center" />
<hitDetailDialog ref="hitDetailDialogRef" @refreshParentTable = 'confirmSearch'></hitDetailDialog> </div>
</div> </el-col>
</el-row>
<addPersonConfig ref="addPersonConfigRef" @refreshParentTable='confirmSearch'></addPersonConfig>
<editPersonConfig ref="addSamplePicConfigRef" @refreshParentTable='confirmSearch'></editPersonConfig>
<hitDetailDialog ref="hitDetailDialogRef" @refreshParentTable='confirmSearch'></hitDetailDialog>
</div>
</template> </template>
<script> <script>
import { import { reactive, ref, toRaw } from "vue";
reactive, import moment from "moment";
ref, import snapshotRecordApi from "@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi";
toRaw import { isArray } from "@/PublicUtil/Judgment";
} from 'vue' import {
import moment from 'moment' filterEmptyValueInObject,
import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi' formatDate,
import { formatTime,
isArray } from "@/PublicUtil/PublicUtil";
} from '@/PublicUtil/Judgment' import FeatureMatchingAccuracyApi from "@/views/FeatureMatchingAccuracy/FeatureMatchingAccuracyApi";
import { import { PlusOutlined } from "@ant-design/icons-vue";
filterEmptyValueInObject, import addPersonConfig from "./addPerson.vue";
formatDate, import editPersonConfig from "./editPerson.vue";
formatTime import hitDetailDialog from "./hitDetailDialog.vue";
} from '@/PublicUtil/PublicUtil' import { ElMessage, ElMessageBox } from "element-plus";
import FeatureMatchingAccuracyApi from '@/views/FeatureMatchingAccuracy/FeatureMatchingAccuracyApi' export default {
import { components: {
PlusOutlined addPersonConfig,
} from '@ant-design/icons-vue' editPersonConfig,
import addPersonConfig from './addPerson.vue' hitDetailDialog,
import editPersonConfig from './editPerson.vue' },
import hitDetailDialog from './hitDetailDialog.vue' setup() {
import {ElMessage,ElMessageBox} from 'element-plus' const accountList = ref([]);
export default { const plazaList = ref([]);
components:{ const queryForm = reactive({
addPersonConfig, account_id: "",
editPersonConfig, plaza_id: "",
hitDetailDialog });
}, const hitSearchObj = reactive({
setup() { gate_id: [],
const accountList = ref([]) score: 75,
const plazaList = ref([]) direction: [1, -1],
const queryForm = reactive({ date: moment(moment().format("YYYY-MM-DD"), "YYYY-MM-DD"),
account_id: '', startTime: moment("00:00:00", "HH:mm:ss"),
plaza_id: '', endTime: moment("23:59:59", "HH:mm:ss"),
}) });
const hitSearchObj = reactive({ const onAccountChange = function () {
gate_id: [], getPlazaList();
score:75, };
direction: [1, -1], // 获取商场门店
date: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'), const getPlazaList = function () {
startTime: moment('00:00:00', 'HH:mm:ss'), queryForm.plaza_id = "";
endTime: moment('23:59:59', 'HH:mm:ss'), plazaList.value = [];
}) snapshotRecordApi
const onAccountChange = function() { .getPlazaList({
getPlazaList() account_id: queryForm.account_id,
} })
// 获取商场门店 .then((r) => {
const getPlazaList = function() { if (isArray(r)) {
queryForm.plaza_id = '' for (const item of r) {
plazaList.value = [] plazaList.value.push({
snapshotRecordApi.getPlazaList({ value: item.id,
account_id: queryForm.account_id label: item.name,
}).then( });
(r) => {
if (isArray(r)) {
for (const item of r) {
plazaList.value.push({
value: item.id,
label: item.name,
})
}
queryForm.plaza_id = r[0].id
getGateList()
confirmSearch()
}
}
)
}
// 获取集团
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,
})
}
queryForm.account_id = r[0].id
getPlazaList()
}
}
)
}
const onMallChange = function(){
getGateList()
}
const gateList = ref([])
// 获取监控点
const getGateList = function() {
hitSearchObj.gate_id = []
gateList.value = []
snapshotRecordApi.getGateList(
{
account_id: queryForm.account_id,
plaza_id: queryForm.plaza_id,
type: 0,
}
).then(
(r) => {
if (isArray(r.data))
{
for (const item of r.data)
{
gateList.value.push(
{
value: item.id,
label: item.name,
}
)
}
}
}
)
}
const resultList = ref([])
const confirmSearch = function() {
pageNum.value = 1;
getTableData()
}
// 获取注册人员列表
const getTableData = function(){
resultList.value = []
const data = filterEmptyValueInObject(
{
pageNum:pageNum.value - 1,
pageSize:pageSize.value,
accountId: queryForm.account_id,
mallId: queryForm.plaza_id
}
)
FeatureMatchingAccuracyApi.getMatch(data).then(
(r) => {
if(r.msg_code==200){
resultList.value = r.data.records;
total.value = r.data.total;
}
}
)
}
const onPageNumChange = function(num) {
pageNum.value = num
confirmSearch()
}
const onPageSizeChange = function(current, size) {
pageNum.value = 1
pageSize.value = size
confirmSearch()
}
const isLoading = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref()
const contentHeight = ref(0)
const addPersonConfigRef = ref();
// 新增注册人员弹窗
const addPersonFun = function(){
addPersonConfigRef.value.initDialog({
account_id:queryForm.account_id,
plaza_id:queryForm.plaza_id,
type:'add'
});
}
// 编辑人员弹窗
const editRow = function(row){
addPersonConfigRef.value.initDialog({
account_id:row.accountId,
plaza_id:row.mallId,
type:'edit',
name:row.name,
description:row.description,
id:row.id,
});
}
// 删除人员
const deleteRow = function(row){
ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
isLoading.value = true;
FeatureMatchingAccuracyApi.delMatch(row).then(
(r) => {
isLoading.value = false;
if(r.msg_code==200){
ElMessage({
message: r.msg_info,
type: 'success'
})
confirmSearch()
}else{
ElMessage({
message: r.msg_info,
type: 'error'
})
return false;
}
}
)
})
}
// 命中详情
const hitDetailDialogRef = ref()
const hitDetail = function(row){
const data = filterEmptyValueInObject(
{
accountId: row.accountId,
mallId: row.mallId,
id:row.id
}
)
FeatureMatchingAccuracyApi.getMatchHitDetail(data).then(
(r) => {
if(r.msg_code==200){
let checkPersonId = ''
r.data.forEach(item=>{
if(item.personId == row.personUnid){
checkPersonId = item.personId;
}
item.expand = false;
item.records.forEach(record=>{
record.picture_url = window._baseImgUrl +'picture/' +record.bodyPath+record.bodyPic
})
})
hitDetailDialogRef.value.initDialog({
regId:row.id,
data:r.data,
checkPersonId:checkPersonId
})
}
}
)
}
// 添加注册样本图
const addSamplePicConfigRef = ref();
const addSamplePic = function(row){
FeatureMatchingAccuracyApi.getMatchOne(row).then(
(r) => {
if(r.msg_code==200){
addSamplePicConfigRef.value.initDialog(r.data);
}else{
ElMessage({
message: r.msg_info,
type: 'error'
})
return false;
}
}
)
}
// 注册样本图
const regPictureList = ref([])
const hitPictureList = ref([])
const regPersonId = ref()
const redPersonObj = ref({})
// 点击行获取注册样本图和命中目标
const clickRow = function(row){
isLoading.value = true;
redPersonObj.value = row;
regPersonId.value = row.id;
regPictureList.value = []
hitPictureList.value = []
FeatureMatchingAccuracyApi.getMatchOne(row).then(
(r) => {
isLoading.value = false;
if(r.msg_code==200){
if(r.data.faceList&&r.data.faceList.length>0){
r.data.faceList.forEach(item=>{
item.picture_url = window._baseImgUrl +'tool/picture/' +item.bodyPath+item.bodyPic
})
regPictureList.value = r.data.faceList
}
if(r.data.hitList&&r.data.hitList.length>0){
r.data.hitList.forEach(item=>{
item.picture_url = window._baseImgUrl +'tool/picture/' +item.bodyPath+item.bodyPic
})
hitPictureList.value = r.data.hitList
}
}
}
)
}
// 识别结果
const identifyResultList = ref([])
const pageNum_identify = ref(1)
const pageSize_identify = ref(10)
const total_identify = ref(0)
const onPageNumChange_identify = function(num) {
pageNum_identify.value = num
clickPicture()
}
const onPageSizeChange_identify = function(current, size) {
pageNum_identify.value = 1
pageSize_identify.value = size
clickPicture()
} }
const currentId = ref() queryForm.plaza_id = r[0].id;
// 点击图片以图搜图 getGateList();
const clickPicture = function(row){ confirmSearch();
const rawData = toRaw(hitSearchObj) }
// if(rawData.gate_id.length<1){ });
// ElMessage({ };
// message: '请选择监控点', // 获取集团
// type: 'warning' const getAccountList = function () {
// }) queryForm.account_id = "";
// return false; accountList.value = [];
// } snapshotRecordApi.getAccountList().then((r) => {
currentId.value = row.id if (isArray(r)) {
isLoading.value = true; for (const item of r) {
let data = filterEmptyValueInObject({ accountList.value.push({
accountId: queryForm.account_id, value: item.id,
mallId: queryForm.plaza_id, label: item.name,
gateId: rawData.gate_id.toString(), });
score: rawData.score, }
direction: rawData.direction.toString(), queryForm.account_id = r[0].id;
startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime), getPlazaList();
endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime), }
faceId: currentId.value, });
page: pageNum_identify.value - 1, };
pageSize: pageSize_identify.value, const onMallChange = function () {
regId:regPersonId.value getGateList();
}) };
FeatureMatchingAccuracyApi.getSearchByPic(data).then( const gateList = ref([]);
(r) => { // 获取监控点
isLoading.value = false; const getGateList = function () {
if(r.msg_code==200){ hitSearchObj.gate_id = [];
console.log(r.data.records) gateList.value = [];
r.data.records.forEach(item=>{ snapshotRecordApi
item.checked = false; .getGateList({
item.featureNum = item.featureNum.toFixed(2) account_id: queryForm.account_id,
item.picture_url = window._baseImgUrl +'picture/' +item.picture_path+item.picture_url plaza_id: queryForm.plaza_id,
}) type: 0,
identifyResultList.value = r.data.records })
total_identify.value = r.data.total .then((r) => {
} if (isArray(r.data)) {
} for (const item of r.data) {
) gateList.value.push({
} value: item.id,
const searchPicture = function(){ label: item.name,
if(!currentId.value){ });
ElMessage({
message: '请选择样本图',
type: 'warning'
})
return false;
}
clickPicture({id:currentId.value})
}
// 选中命中目标
const checkPicture = function(resData){
// let checkList = []
// identifyResultList.value.forEach(item=>{
// if(item.checked==true){
// checkList.push(item.id)
// }
// })
// if(checkList.length<1){
// ElMessage({
// message: '请选择识别结果图片',
// type: 'warning'
// })
// return false;
// }
// if(!regPersonId.value){
// ElMessage({
// message: '请选择注册人员',
// type: 'warning'
// })
// return false;
// }
isLoading.value = true;
FeatureMatchingAccuracyApi.addMatchHit({
id:regPersonId.value,
faceIds:[resData.id]
}).then(
(r) => {
isLoading.value = false;
if(r.msg_code==200){
ElMessage({
message: r.msg_info,
type: 'success'
})
getTableData()
clickRow(redPersonObj.value)
searchPicture()
}
}
)
}
// 删除命中目标图片
const delHitPic = function(row){
FeatureMatchingAccuracyApi.delMatchHit({
regId:regPersonId.value,
faceId:row.id
}).then(
(r) => {
isLoading.value = false;
if(r.msg_code==200){
ElMessage({
message: r.msg_info,
type: 'success'
})
getTableData()
clickRow(redPersonObj.value)
searchPicture()
}
}
)
}
// 删除样本图片
const delSamplePic = function(row){
FeatureMatchingAccuracyApi.delMatchSample({
regId:regPersonId.value,
faceId:row.id
}).then(
(r) => {
isLoading.value = false;
if(r.msg_code==200){
ElMessage({
message: r.msg_info,
type: 'success'
})
getTableData()
clickRow(redPersonObj.value)
}
}
)
}
const getIndex = function(val) {
return (pageNum.value - 1) * pageSize.value + val + 1
}
const __main = function() {
contentHeight.value = window.innerHeight - 200
getAccountList()
} }
__main() }
return { });
// sequence };
isLoading, const resultList = ref([]);
pageNum, const confirmSearch = function () {
pageSize, pageNum.value = 1;
total, getTableData();
contentHeight, };
accountList, // 获取注册人员列表
plazaList, const getTableData = function () {
resultList, resultList.value = [];
addPersonConfigRef, const data = filterEmptyValueInObject({
addSamplePicConfigRef, pageNum: pageNum.value - 1,
hitSearchObj, pageSize: pageSize.value,
gateList, accountId: queryForm.account_id,
activeKey: ref('1'), mallId: queryForm.plaza_id,
regPictureList, });
pageNum_identify, FeatureMatchingAccuracyApi.getMatch(data).then((r) => {
pageSize_identify, if (r.msg_code == 200) {
total_identify, resultList.value = r.data.records;
identifyResultList, total.value = r.data.total;
currentId, }
hitPictureList, });
hitDetailDialogRef, };
// mapping
queryForm, const onPageNumChange = function (num) {
onAccountChange, pageNum.value = num;
confirmSearch, confirmSearch();
onPageNumChange, };
onPageSizeChange,
addPersonFun, const onPageSizeChange = function (current, size) {
getIndex, pageNum.value = 1;
editRow, pageSize.value = size;
deleteRow, confirmSearch();
onMallChange, };
clickRow, const isLoading = ref(false);
searchPicture, const pageNum = ref(1);
clickPicture, const pageSize = ref(10);
onPageNumChange_identify, const total = ref();
onPageSizeChange_identify, const contentHeight = ref(0);
checkPicture, const addPersonConfigRef = ref();
delHitPic, // 新增注册人员弹窗
hitDetail, const addPersonFun = function () {
delSamplePic, addPersonConfigRef.value.initDialog({
addSamplePic account_id: queryForm.account_id,
plaza_id: queryForm.plaza_id,
type: "add",
});
};
// 编辑人员弹窗
const editRow = function (row) {
addPersonConfigRef.value.initDialog({
account_id: row.accountId,
plaza_id: row.mallId,
type: "edit",
name: row.name,
description: row.description,
id: row.id,
});
};
// 删除人员
const deleteRow = function (row) {
ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
isLoading.value = true;
FeatureMatchingAccuracyApi.delMatch(row).then((r) => {
isLoading.value = false;
if (r.msg_code == 200) {
ElMessage({
message: r.msg_info,
type: "success",
});
confirmSearch();
} else {
ElMessage({
message: r.msg_info,
type: "error",
});
return false;
}
});
});
};
// 命中详情
const hitDetailDialogRef = ref();
const hitDetail = function (row) {
const data = filterEmptyValueInObject({
accountId: row.accountId,
mallId: row.mallId,
id: row.id,
});
FeatureMatchingAccuracyApi.getMatchHitDetail(data).then((r) => {
if (r.msg_code == 200) {
let checkPersonId = "";
r.data.forEach((item) => {
if (item.personId == row.personUnid) {
checkPersonId = item.personId;
} }
item.expand = false;
item.records.forEach((record) => {
record.picture_url =
window._baseImgUrl +
"picture/" +
record.bodyPath +
record.bodyPic;
});
});
hitDetailDialogRef.value.initDialog({
regId: row.id,
data: r.data,
checkPersonId: checkPersonId,
});
} }
} });
};
// 添加注册样本图
const addSamplePicConfigRef = ref();
const addSamplePic = function (row) {
console.log(row,'888888')
FeatureMatchingAccuracyApi.getMatchOne(row).then((r) => {
if (r.msg_code == 200) {
addSamplePicConfigRef.value.initDialog(r.data);
} else {
ElMessage({
message: r.msg_info,
type: "error",
});
return false;
}
});
};
// 注册样本图
const regPictureList = ref([]);
const hitPictureList = ref([]);
const regPersonId = ref();
const redPersonObj = ref({});
// 点击行获取注册样本图和命中目标
const clickRow = function (row) {
isLoading.value = true;
redPersonObj.value = row;
regPersonId.value = row.id;
regPictureList.value = [];
hitPictureList.value = [];
FeatureMatchingAccuracyApi.getMatchOne(row).then((r) => {
isLoading.value = false;
if (r.msg_code == 200) {
if (r.data.faceList && r.data.faceList.length > 0) {
r.data.faceList.forEach((item) => {
item.picture_url =
window._baseImgUrl +
"tool/picture/" +item.picUrl
// item.bodyPath +
// item.bodyPic;
});
regPictureList.value = r.data.faceList;
console.log(regPictureList.value)
}
if (r.data.hitList && r.data.hitList.length > 0) {
r.data.hitList.forEach((item) => {
item.picture_url =
window._baseImgUrl +
"tool/picture/" +item.picUrl
// item.bodyPath +
// item.bodyPic;
});
hitPictureList.value = r.data.hitList;
}
}
});
};
// 识别结果
const identifyResultList = ref([]);
const pageNum_identify = ref(1);
const pageSize_identify = ref(10);
const total_identify = ref(0);
const onPageNumChange_identify = function (num) {
pageNum_identify.value = num;
// clickPicture();
clickPicture({ faceUnid: currentId.value });
};
const onPageSizeChange_identify = function (current, size) {
pageNum_identify.value = 1;
pageSize_identify.value = size;
// clickPicture();
clickPicture({ faceUnid: currentId.value });
};
const currentId = ref();
// 点击图片以图搜图
const clickPicture = function (row,type) {
console.log(row,'5555')
let types=null
if(type===0){
types=0
}else if(type===1){
types=1
}
const rawData = toRaw(hitSearchObj);
// if(rawData.gate_id.length<1){
// ElMessage({
// message: '请选择监控点',
// type: 'warning'
// })
// return false;
// }
currentId.value = row.faceUnid||row.unid;
// currentId.value = row.id;
isLoading.value = true;
let data = filterEmptyValueInObject({
accountId: queryForm.account_id,
mallId: queryForm.plaza_id,
gateId: rawData.gate_id.toString(),
score: rawData.score,
direction: rawData.direction.toString(),
startTime:
formatDate(rawData.date) + " " + formatTime(rawData.startTime),
endTime: formatDate(rawData.date) + " " + formatTime(rawData.endTime),
// faceId: currentId.value,
faceUnid: currentId.value,
type:types,
page: pageNum_identify.value - 1,
pageSize: pageSize_identify.value,
regId: regPersonId.value,
});
FeatureMatchingAccuracyApi.getSearchByPic(data).then((r) => {
isLoading.value = false;
if (r.msg_code == 200) {
console.log(r.data.records);
r.data.records.forEach((item) => {
item.checked = false;
item.featureNum = item.featureNum.toFixed(2);
item.picture_url =
window._baseImgUrl +
"picture/" +
item.picture_path +
item.picture_url;
});
identifyResultList.value = r.data.records;
total_identify.value = r.data.total;
}
});
};
const searchPicture = function () {
if (!currentId.value) {
ElMessage({
message: "请选择样本图",
type: "warning",
});
return false;
}
clickPicture({ faceUnid: currentId.value });
};
// 选中命中目标
const checkPicture = function (resData) {
// let checkList = []
// identifyResultList.value.forEach(item=>{
// if(item.checked==true){
// checkList.push(item.id)
// }
// })
// if(checkList.length<1){
// ElMessage({
// message: '请选择识别结果图片',
// type: 'warning'
// })
// return false;
// }
// if(!regPersonId.value){
// ElMessage({
// message: '请选择注册人员',
// type: 'warning'
// })
// return false;
// }
isLoading.value = true;
FeatureMatchingAccuracyApi.addMatchHit({
id: regPersonId.value,
// faceIds: [resData.id],
faceUnids: [resData.unid],
}).then((r) => {
isLoading.value = false;
if (r.msg_code == 200) {
ElMessage({
message: r.msg_info,
type: "success",
});
getTableData();
clickRow(redPersonObj.value);
searchPicture();
}
});
};
// 删除命中目标图片
const delHitPic = function (row) {
FeatureMatchingAccuracyApi.delMatchHit({
regId: regPersonId.value,
// faceId: row.id,
faceUnid: row.faceUnid,
}).then((r) => {
isLoading.value = false;
if (r.msg_code == 200) {
ElMessage({
message: r.msg_info,
type: "success",
});
getTableData();
clickRow(redPersonObj.value);
searchPicture();
}
});
};
// 删除样本图片
const delSamplePic = function (row) {
FeatureMatchingAccuracyApi.delMatchSample({
regId: regPersonId.value,
// faceId: row.id,
faceUnid:row.faceUnid
}).then((r) => {
isLoading.value = false;
if (r.msg_code == 200) {
ElMessage({
message: r.msg_info,
type: "success",
});
getTableData();
clickRow(redPersonObj.value);
}
});
};
const getIndex = function (val) {
return (pageNum.value - 1) * pageSize.value + val + 1;
};
const __main = function () {
contentHeight.value = window.innerHeight - 200;
getAccountList();
};
__main();
return {
// sequence
isLoading,
pageNum,
pageSize,
total,
contentHeight,
accountList,
plazaList,
resultList,
addPersonConfigRef,
addSamplePicConfigRef,
hitSearchObj,
gateList,
activeKey: ref("1"),
regPictureList,
pageNum_identify,
pageSize_identify,
total_identify,
identifyResultList,
currentId,
hitPictureList,
hitDetailDialogRef,
// mapping
queryForm,
onAccountChange,
confirmSearch,
onPageNumChange,
onPageSizeChange,
addPersonFun,
getIndex,
editRow,
deleteRow,
onMallChange,
clickRow,
searchPicture,
clickPicture,
onPageNumChange_identify,
onPageSizeChange_identify,
checkPicture,
delHitPic,
hitDetail,
delSamplePic,
addSamplePic,
};
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.active{ .active {
border : 2px solid #40a9ff border: 2px solid #40a9ff;
} }
.regBox{ .regBox {
height: 300px; height: 300px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
.hitBox{ .hitBox {
position: relative; position: relative;
} }
.delHitPic{ .delHitPic {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
color: #1890ff; color: #1890ff;
font-size: 28px; font-size: 28px;
} }
.secondCondition{ .secondCondition {
margin-right: 5px !important; margin-right: 5px !important;
} }
.identifyResultTable{ .identifyResultTable {
overflow-y: auto; overflow-y: auto;
} }
.pictureBox{ .pictureBox {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
} }
.btnPic{ .btnPic {
display: none; display: none;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
} }
.pictureBox:hover .btnPic{ .pictureBox:hover .btnPic {
display: block; display: block;
width: 100px; width: 100px;
height: 100px; height: 100px;
} }
.checkBox{ .checkBox {
width: 100px; width: 100px;
height: 30px; height: 30px;
margin-left: 0 !important; margin-left: 0 !important;
margin-bottom: 10px; margin-bottom: 10px;
// position: absolute; // position: absolute;
// left: 1px; // left: 1px;
// top: 0; // top: 0;
} }
.score{ .score {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 0; top: 0;
color: red; color: red;
font-weight: 900; font-weight: 900;
font-size: 18px; font-size: 18px;
} }
.iconPic{ .iconPic {
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 0px; top: 0px;
color: #1890ff; color: #1890ff;
font-size: 28px; font-size: 28px;
} }
.single-image{ .single-image {
width: 100%; width: 100%;
height: 200px; height: 200px;
} }
.containter { .containter {
height: 100%; height: 100%;
} }
.contentBox { .contentBox {
height: 100%; height: 100%;
} }
.box { .box {
height: 100%; height: 100%;
} }
.boxRight { .boxRight {
border-left: 5px solid #ccc; border-left: 5px solid #ccc;
padding-left: 5px; padding-left: 5px;
} }
.btns { .btns {
text-align: right; text-align: right;
margin-top: 10px; margin-top: 10px;
margin-right: 15px; margin-right: 15px;
} }
.btn { .btn {
margin-left: 10px; margin-left: 10px;
} }
</style> </style>
src/views/FeatureMatchingAccuracy/FeatureMatchingAccuracyApi.js
...@@ -67,7 +67,7 @@ class FeatureMatchingAccuracy { ...@@ -67,7 +67,7 @@ class FeatureMatchingAccuracy {
return axiosInstance.request( return axiosInstance.request(
{ {
method: 'DELETE', method: 'DELETE',
url: `/feature/match/hit/${data.regId}/${data.faceId}`, url: `/feature/match/hit/${data.regId}/${data.faceUnid}`,
} }
) )
} }
...@@ -92,7 +92,7 @@ class FeatureMatchingAccuracy { ...@@ -92,7 +92,7 @@ class FeatureMatchingAccuracy {
return axiosInstance.request( return axiosInstance.request(
{ {
method: 'DELETE', method: 'DELETE',
url: `/feature/match/${data.regId}/${data.faceId}`, url: `/feature/match/${data.regId}/${data.faceUnid}`,
} }
) )
} }
......
src/views/FeatureMatchingAccuracy/editPerson.vue
<template> <template>
<a-modal <a-modal title="添加注册样本图" v-model:visible="isVisible" width="1500px" :dialog-style="{ top: '20px',height:'90%' }" class="detail-modal" @cancel='onCancel()'>
title="添加注册样本图"
v-model:visible="isVisible"
width="1500px"
:dialog-style="{ top: '20px',height:'90%' }"
class="detail-modal"
@cancel = 'onCancel()'
>
<div style="height: 700px;"> <div style="height: 700px;">
<a-form :model="formObj" layout="inline" :label-col="{ style: { width: '100px' } }"> <a-form :model="formObj" layout="inline" :label-col="{ style: { width: '100px' } }">
<a-form-item class="pictures"> <a-form-item class="pictures">
<a-tabs type="card" v-model:activeKey="activeKey"> <a-tabs type="card" v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="本地上传"> <a-tab-pane key="1" tab="本地上传">
<a-upload <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" :multiple="false">
:file-list="fileList" <a-button>
:remove="handleRemove" <upload-outlined></upload-outlined>
:before-upload="beforeUpload" 上传文件
:multiple="false" </a-button>
> </a-upload>
<a-button> <a-button type="primary" :disabled="fileList.length === 0" :loading="loading" style="margin-top: 16px" @click="handleUpload">
<upload-outlined></upload-outlined> {{ loading ? '上传中' : '开始上传' }}
上传文件 </a-button>
</a-button> </a-tab-pane>
</a-upload> <a-tab-pane key="2" tab="抓拍记录图" class="resultPic">
<a-button <a-form-item label="监控点：" style="padding: 5px 0" class="secondCondition">
type="primary" <a-select v-model:value="formObj.gate_id" style="width: 270px" mode="multiple" :maxTagCount="1" :options="gateList" optionFilterProp="label" show-search>
:disabled="fileList.length === 0" </a-select>
:loading="loading" </a-form-item>
style="margin-top: 16px" <a-form-item label="方向：" style="padding: 5px 0" class="secondCondition">
@click="handleUpload" <a-select v-model:value="formObj.direction" mode="multiple" :maxTagCount="1" style="width: 200px">
> <a-select-option :value="1">进</a-select-option>
{{ loading ? '上传中' : '开始上传' }} <a-select-option :value="-1">出</a-select-option>
</a-button> </a-select>
</a-tab-pane> </a-form-item>
<a-tab-pane key="2" tab="抓拍记录图" class="resultPic"> <a-form-item label="选择日期：" style="padding: 5px 0" class="secondCondition">
<a-form-item label="监控点：" style="padding: 5px 0" class="secondCondition"> <a-date-picker v-model:value="formObj.date" :format="'YYYY-MM-DD'" style="width: 150px" />
<a-select v-model:value="formObj.gate_id" </a-form-item>
style="width: 270px" <a-form-item label="选择时间：" style="padding: 5px 0" class="secondCondition">
mode="multiple" <a-time-picker v-model:value="formObj.startTime" style="width: 100px" />
:maxTagCount="1" <a-time-picker v-model:value="formObj.endTime" style="width: 100px" />
:options="gateList" </a-form-item>
optionFilterProp="label" <a-form-item style="padding: 5px 0" class="secondCondition">
show-search <a-button type="primary" @click="picSearch" :loading="isLoading" style="margin-right: 10px;">查询</a-button>
> <!-- <a-button type="primary" @click="clickCheck" >选中</a-button> -->
</a-select> </a-form-item>
</a-form-item> <div class="resultContent" :style="{'height':contentHeight+'px'}">
<a-form-item label="方向：" style="padding: 5px 0" class="secondCondition"> <template v-for="person in dataList">
<a-select v-model:value="formObj.direction" <div class="classBox" :class="person.expand?'expand':''">
mode="multiple" <div>
:maxTagCount="1" <div class="boxInfo">
style="width: 200px"> <span class="iconExpand" v-show="!person.expand">▶</span>
<a-select-option :value="1">进</a-select-option> <span class="iconExpand" v-show="person.expand">▼</span>
<a-select-option :value="-1">出</a-select-option> <span class="expandWord" @click='expandChange(person)'>{{person.expand?'收起':'展开'}}</span>
</a-select> <span style="padding-left: 10px;">人id:{{ ' ' + person.person_unid }} 图片数量:{{ person.perrsonList.length }}</span>
</a-form-item> </div>
<a-form-item label="选择日期：" style="padding: 5px 0" class="secondCondition"> <el-row v-for="row in getPagedList(person.perrsonList, 8)">
<a-date-picker v-model:value="formObj.date" :format="'YYYY-MM-DD'" style="width: 150px"/> <el-col :span="3" v-for="item in row">
</a-form-item> <div style="margin: 0 5px" class="picBox">
<a-form-item label="选择时间：" style="padding: 5px 0" class="secondCondition"> <!-- <el-checkbox class="checkBox" v-model="item.checked"></el-checkbox> -->
<a-time-picker v-model:value="formObj.startTime" style="width: 100px"/> <el-image :src="item.picture_url" :fit="'fill'" class="single-image">
<a-time-picker v-model:value="formObj.endTime" style="width: 100px"/> </el-image>
</a-form-item> <el-button type="primary" :disabled="item.checked?true:false" class="checkBox" @click="onConfirm(item)">选中</el-button>
<a-form-item style="padding: 5px 0" class="secondCondition"> </div>
<a-button type="primary" @click="picSearch" :loading="isLoading" style="margin-right: 10px;">查询</a-button> </el-col>
<!-- <a-button type="primary" @click="clickCheck" >选中</a-button> --> </el-row>
</a-form-item> </div>
<div class="resultContent" :style="{'height':contentHeight+'px'}"> </div>
<template v-for="person in dataList"> </template>
<div class="classBox" :class="person.expand?'expand':''"> </div>
<div> <a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total" :show-total="total => `共 ${total} 条`" :pageSizeOptions="['10', '20', '40', '80']" @change="onPageNumChange" @showSizeChange="onPageSizeChange" show-size-changer show-quick-jumper
<div class="boxInfo"> style="text-align:center" />
<span class="iconExpand" v-show="!person.expand">▶</span> </a-tab-pane>
<span class="iconExpand" v-show="person.expand">▼</span> </a-tabs>
<span class="expandWord" @click='expandChange(person)'>{{person.expand?'收起':'展开'}}</span> </a-form-item>
<span style="padding-left: 10px;">人id:{{ ' ' + person.person_unid }} 图片数量:{{ person.perrsonList.length }}</span> </a-form>
</div>
<el-row v-for="row in getPagedList(person.perrsonList, 8)">
<el-col :span="3" v-for="item in row">
<div style="margin: 0 5px" class="picBox">
<!-- <el-checkbox class="checkBox" v-model="item.checked"></el-checkbox> -->
<el-image :src="item.picture_url"
:fit="'fill'"
class="single-image" >
</el-image>
<el-button type="primary" :disabled="item.checked?true:false" class="checkBox" @click="onConfirm(item)">选中</el-button>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
</div>
<a-pagination
v-model:current="pageNum"
v-model:pageSize="pageSize"
:total="total"
:show-total="total => `共 ${total} 条`"
:pageSizeOptions="['10', '20', '40', '80']"
@change="onPageNumChange"
@showSizeChange="onPageSizeChange"
show-size-changer
show-quick-jumper
style="text-align:center"
/>
</a-tab-pane>
</a-tabs>
</a-form-item>
</a-form>
</div> </div>
<template #footer> <template #footer>
<a-button @click="onCancel">返回</a-button> <a-button @click="onCancel">返回</a-button>
...@@ -116,301 +76,295 @@ ...@@ -116,301 +76,295 @@
</template> </template>
<script> <script>
import moment from 'moment' import moment from "moment";
import { reactive, ref,toRaw } from "vue"; import { reactive, ref, toRaw } from "vue";
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'; import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import {isArray } from '@/PublicUtil/Judgment' import { isArray } from "@/PublicUtil/Judgment";
import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi' import snapshotRecordApi from "@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi";
import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi' import clusterResultApi from "@/views/SnapshotCluster/ClusterResult/ClusterResultApi";
import FeatureMatchingAccuracyApi from '@/views/FeatureMatchingAccuracy/FeatureMatchingAccuracyApi' import FeatureMatchingAccuracyApi from "@/views/FeatureMatchingAccuracy/FeatureMatchingAccuracyApi";
import {filterEmptyValueInObject, formatDate, formatTime, getPagedList} from '@/PublicUtil/PublicUtil' import {
import {ElMessage} from 'element-plus' filterEmptyValueInObject,
formatDate,
formatTime,
getPagedList,
} from "@/PublicUtil/PublicUtil";
import { ElMessage } from "element-plus";
export default { export default {
components: { components: {
LoadingOutlined, LoadingOutlined,
PlusOutlined, PlusOutlined,
}, },
setup(props,context) { setup(props, context) {
const isVisible = ref(false); const isVisible = ref(false);
const pageNum = ref(1) const pageNum = ref(1);
const pageSize = ref(10) const pageSize = ref(10);
const total = ref() const total = ref();
const dataList = ref([]) const dataList = ref([]);
const formObj = reactive({ const formObj = reactive({
name: '', name: "",
dec: '', dec: "",
gate_id: [], gate_id: [],
direction: [1, -1], direction: [1, -1],
date: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'), date: moment(moment().format("YYYY-MM-DD"), "YYYY-MM-DD"),
startTime: moment('00:00:00', 'HH:mm:ss'), startTime: moment("00:00:00", "HH:mm:ss"),
endTime: moment('23:59:59', 'HH:mm:ss'), endTime: moment("23:59:59", "HH:mm:ss"),
id:'' id: "",
}) });
const isLoading = ref(false) const isLoading = ref(false);
const accountId = ref(''); const accountId = ref("");
const mallId = ref(''); const mallId = ref("");
const gateList = ref([]) const gateList = ref([]);
const checkGateList = ref([]) const checkGateList = ref([]);
const getGateList = function() { const getGateList = function () {
formObj.gate_id = [] formObj.gate_id = [];
gateList.value = [] gateList.value = [];
snapshotRecordApi.getGateList( snapshotRecordApi
{ .getGateList({
account_id: accountId.value, account_id: accountId.value,
plaza_id: mallId.value, plaza_id: mallId.value,
type: 0, type: 0,
} })
).then( .then((r) => {
(r) => { if (isArray(r.data)) {
if (isArray(r.data)) for (const item of r.data) {
{ gateList.value.push({
for (const item of r.data) value: item.id,
{ label: item.name,
gateList.value.push( });
{
value: item.id,
label: item.name,
}
)
}
picSearch()
}
} }
) picSearch();
} }
const disabledPicList = ref([]) });
const initDialog = function(parmas) { };
accountId.value = parmas.accountId; const disabledPicList = ref([]);
mallId.value = parmas.mallId; const initDialog = function (parmas) {
formObj.id = parmas.id; accountId.value = parmas.accountId;
getGateList() mallId.value = parmas.mallId;
disabledPicList.value = parmas.faceIds || [] formObj.id = parmas.id;
isVisible.value = true; getGateList();
disabledPicList.value = parmas.faceUnids || [];
console.log(parmas)
isVisible.value = true;
}; };
const onCancel = () => { const onCancel = () => {
if(isAdd.value){ if (isAdd.value) {
refreshParentTable() refreshParentTable();
} }
isVisible.value = false; isVisible.value = false;
}; };
const refreshParentTable = function(){ const refreshParentTable = function () {
context.emit('refreshParentTable') context.emit("refreshParentTable");
} };
const isAdd = ref(false) const isAdd = ref(false);
const onConfirm = function(resData){ const onConfirm = function (resData) {
const data = filterEmptyValueInObject( console.log(resData,'666666')
{ const data = filterEmptyValueInObject({
faceIds:[resData.id], // faceIds: [resData.id],
id:formObj.id faceUnids: [resData.unid],
} id: formObj.id,
) });
FeatureMatchingAccuracyApi.addMatchReg(data).then( FeatureMatchingAccuracyApi.addMatchReg(data).then((r) => {
(r) => { if (r.msg_code == 200) {
if(r.msg_code==200){ ElMessage({
ElMessage({ message: r.msg_info,
message: r.msg_info, type: "success",
type: 'success' });
}) isAdd.value = true;
isAdd.value = true; // disabledPicList.value.push(resData.id);
disabledPicList.value.push(resData.id) disabledPicList.value.push(resData.unid);
clickSearch() clickSearch();
}else{ } else {
ElMessage({ ElMessage({
message: r.msg_info, message: r.msg_info,
type: 'error' type: "error",
}) });
return false; return false;
} }
} });
) };
}
const loading = ref(false); const loading = ref(false);
const imageUrl = ref(''); const imageUrl = ref("");
const fileList = ref([]); const fileList = ref([]);
const beforeUpload = (file) => { const beforeUpload = (file) => {
fileList.value = [file]; fileList.value = [file];
return false; return false;
}; };
const handleRemove = (file) => { const handleRemove = (file) => {
const index = fileList.value.indexOf(file); const index = fileList.value.indexOf(file);
const newFileList = fileList.value.slice(); const newFileList = fileList.value.slice();
newFileList.splice(index, 1); newFileList.splice(index, 1);
fileList.value = newFileList; fileList.value = newFileList;
}; };
const handleUpload = function(){ const handleUpload = function () {
const formData = new FormData(); const formData = new FormData();
fileList.value.forEach((file) => { fileList.value.forEach((file) => {
formData.append('files[]', file); formData.append("files[]", file);
}); });
loading.value = true; loading.value = true;
} };
const sortDataList = function(list) { const sortDataList = function (list) {
list.sort( list.sort((a, b) => {
(a, b) => { return b.perrsonList.length - a.perrsonList.length;
return (b.perrsonList.length - a.perrsonList.length) });
} };
) const picSearch = function () {
} pageNum.value = 1;
const picSearch = function(){ clickSearch();
pageNum.value = 1 };
clickSearch() const clickSearch = function () {
} const rawData = toRaw(formObj);
const clickSearch = function(){ const data = filterEmptyValueInObject({
const rawData = toRaw(formObj) account_id: accountId.value,
const data = filterEmptyValueInObject( type: 0,
{ plaza_id: mallId.value,
account_id: accountId.value, gate_id: rawData.gate_id.toString(),
type: 0, direction: rawData.direction.toString(),
plaza_id: mallId.value, picType: 2,
gate_id: rawData.gate_id.toString(), personType: "1, 0,",
direction: rawData.direction.toString(), startTime:
picType: 2, formatDate(rawData.date) + " " + formatTime(rawData.startTime),
personType: '1, 0,', endTime: formatDate(rawData.date) + " " + formatTime(rawData.endTime),
startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime), page: pageNum.value - 1,
endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime), pageSize: pageSize.value,
page: pageNum.value - 1, });
pageSize: pageSize.value, clusterResultApi.getClusterResultList(data).then((r) => {
isLoading.value = false;
sortDataList(r.data.persons);
r.data.persons.forEach((itemPerson) => {
itemPerson.expand = false;
itemPerson.perrsonList.forEach((item) => {
if (disabledPicList.value.includes(item.unid)) {
item.checked = true;
} else {
item.checked = false;
} }
) if (item.picture_url) {
clusterResultApi.getClusterResultList(data).then( item.picture_url = window._baseImgUrl + item.picture_url;
(r) => {
isLoading.value = false
sortDataList(r.data.persons)
r.data.persons.forEach((itemPerson)=>{
itemPerson.expand = false
itemPerson.perrsonList.forEach((item)=>{
if(disabledPicList.value.includes(item.id)){
item.checked = true;
}else{
item.checked = false;
}
if (item.picture_url) {
item.picture_url = window._baseImgUrl + item.picture_url
}
})
})
dataList.value = r.data.persons
total.value = r.data.pageNum
document.getElementsByClassName('resultContent')[0].scrollTop = 0
} }
) });
} });
const onPageNumChange = function(num) { dataList.value = r.data.persons;
pageNum.value = num total.value = r.data.pageNum;
clickSearch() document.getElementsByClassName("resultContent")[0].scrollTop = 0;
} });
};
const onPageSizeChange = function(current, size) { const onPageNumChange = function (num) {
pageNum.value = 1 pageNum.value = num;
pageSize.value = size clickSearch();
clickSearch() };
}
const expandChange = function(data){ const onPageSizeChange = function (current, size) {
dataList.value.forEach(item=>{ pageNum.value = 1;
if (data.person_unid == item.person_unid) { pageSize.value = size;
item.expand = !item.expand clickSearch();
} };
}) const expandChange = function (data) {
} dataList.value.forEach((item) => {
const clickCheck = function(){ if (data.person_unid == item.person_unid) {
console.log(dataList.value) item.expand = !item.expand;
} }
});
};
const clickCheck = function () {
console.log(dataList.value);
};
return { return {
isVisible, isVisible,
formObj, formObj,
onCancel, onCancel,
onConfirm, onConfirm,
initDialog, initDialog,
activeKey: ref('2'), activeKey: ref("2"),
beforeUpload, beforeUpload,
loading, loading,
imageUrl, imageUrl,
fileList, fileList,
handleUpload, handleUpload,
handleRemove, handleRemove,
gateList, gateList,
isLoading, isLoading,
clickSearch, clickSearch,
onPageNumChange, onPageNumChange,
onPageSizeChange, onPageSizeChange,
total, total,
dataList, dataList,
pageNum, pageNum,
pageSize, pageSize,
getPagedList, getPagedList,
expandChange, expandChange,
clickCheck, clickCheck,
refreshParentTable, refreshParentTable,
picSearch, picSearch,
disabledPicList disabledPicList,
}; };
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.resultPic{ .resultPic {
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 0px 10px; padding: 0px 10px;
} }
.pictures{ .pictures {
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
} }
.secondCondition{ .secondCondition {
// max-width: 300px; // max-width: 300px;
display: inline-block; display: inline-block;
} }
.resultContent{ .resultContent {
overflow: auto; overflow: auto;
max-height: 540px; max-height: 540px;
min-height: 300px; min-height: 300px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.boxInfo{ .boxInfo {
line-height: 28px; line-height: 28px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.classBox{ .classBox {
margin: 7px 0; margin: 7px 0;
border: solid 1px black; border: solid 1px black;
height: 260px; height: 260px;
overflow-y: hidden; overflow-y: hidden;
} }
.expand{ .expand {
height: auto; height: auto;
overflow: auto; overflow: auto;
} }
.expandWord{ .expandWord {
color: #1890ff; color: #1890ff;
margin-right: 5px; margin-right: 5px;
cursor: pointer; cursor: pointer;
float: right; float: right;
} }
.iconExpand{ .iconExpand {
cursor: pointer; cursor: pointer;
float: right; float: right;
color: #1890ff; color: #1890ff;
margin-right: 20px; margin-right: 20px;
} }
.single-image{ .single-image {
width: 100%; width: 100%;
height: 220px; height: 220px;
} }
.picBox{ .picBox {
position: relative; position: relative;
} }
.picBox:hover .checkBox{ .picBox:hover .checkBox {
display: block; display: block;
} }
.checkBox{ .checkBox {
display: none; display: none;
width: 80px; width: 80px;
height: 30px; height: 30px;
position: absolute; position: absolute;
left: 0px; left: 0px;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: auto; margin: auto;
} }
</style> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!