Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit 9351d021 by 李君
Options

抓拍图片对比优化

1 parent 0b4aeb0c
Inline Side-by-side
Showing 4 changed files with 142 additions and 127 deletions
public/config.js
window._serverHost = ['localhost', '192.168.1.168'].includes(window.location.hostname) ? '36.112.68.214:9999' : window.location.host
window._baseUrl = ['localhost', '192.168.1.168'].includes(window.location.hostname) ? 'http://36.112.68.214:9999/tool/' : `http://${window._serverHost}/tool/`
window._baseImgUrl = ['localhost', '192.168.1.168'].includes(window.location.hostname) ? 'http://36.112.68.214:9999/' : `${window.location.origin}/`
window._baseImgUrl = ['localhost', '192.168.1.168'].includes(window.location.hostname) ? 'http://36.112.68.214:9999/images/' : `${window.location.origin}/images/`
const log = console.log.bind(console)
src/views/ComparisonCapturedPictures/ComparisonCapturedPictures.vue
<template>
<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: 280px" 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: 280px" 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: 280px">
<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: 280px" 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: 280px" 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: 280px">
<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: 280px">
<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: 280px">
<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-date-picker v-model:value="queryForm.date" :format="'YYYY-MM-DD'" style="width: 280px" />
</a-form-item>
<a-form-item label="选择时间：" style="padding: 5px 0">
<a-time-picker v-model:value="queryForm.startTime" style="width: 140px" />
<a-time-picker v-model:value="queryForm.endTime" style="width: 140px" />
</a-form-item>
<a-form-item label="图片数量：" style="padding: 5px 0">
<a-input-number v-model:value="queryForm.minPic" :min="0" style="width: 100px"/>至
<a-input-number v-model:value="queryForm.maxPic" :min="0" style="width: 100px"/>
</a-form-item>
<a-form-item style="padding: 5px 0">
<a-button type="primary" @click="confirmSearch" :loading="isLoading">查询</a-button>
</a-form-item>
</a-form>
<div v-loading="isLoading">
<a-row v-for="row in pagedTableDataList">
<a-col :span="3" v-for="(item,index) in row">
<div style="margin: 0 5px" draggable="true" @dragstart="dragStart(item,$event)" :class="item.id==currentItemId?'actived':''">
<el-image :src="item.picture_url" :fit="'fill'" class="single-image">
</el-image>
<div>时间:{{ item.counttime }}</div>
<div>类型:{{ formatPersonType(item.personType) }}</div>
<div>地点:{{ item.gate_name }}</div>
<a-row>
<a-col :span='14'>
<a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '70px' } }">
<a-form-item label="集团：" style="padding: 5px 0">
<a-select v-model:value="queryForm.account_id" style="width: 230px" mode="multiple" :maxTagCount="1"
@change="onAccountChange" :options="accountList" optionFilterProp="label" show-search>
</a-select>
</a-form-item>
<a-form-item label="广场：" style="padding: 5px 0">
<a-select v-model:value="queryForm.plaza_id" style="width: 230px" mode="multiple" :maxTagCount="1"
@change="onPlazaChange" :options="plazaList" optionFilterProp="label" show-search>
</a-select>
</a-form-item>
<a-form-item label="出入类型：" style="padding: 5px 0">
<a-select v-model:value="queryForm.type" style="width: 230px">
<a-select-option :value="0">全场</a-select-option>
<a-select-option :value="1">广场出入口</a-select-option>
<a-select-option :value="2">楼层出入口</a-select-option>
<a-select-option :value="3">店铺出入口</a-select-option>
<a-select-option :value="4">其他</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="区域信息：" style="padding: 5px 0" v-if='queryForm.type==0 || queryForm.type==3'>
<a-select v-model:value="queryForm.zone_id" style="width: 230px" mode="multiple" :maxTagCount="1"
@change="onZoneChange" :options="zoneList" optionFilterProp="label" show-search>
</a-select>
</a-form-item>
<a-form-item label="监控点：" style="padding: 5px 0">
<a-select v-model:value="queryForm.gate_id" style="width: 230px" mode="multiple" :maxTagCount="1"
:options="gateList" optionFilterProp="label" show-search>
</a-select>
</a-form-item>
<a-form-item label="方向：" style="padding: 5px 0">
<a-select v-model:value="queryForm.direction" mode="multiple" :maxTagCount="1" style="width: 230px">
<a-select-option :value="1">进</a-select-option>
<a-select-option :value="-1">出</a-select-option>
<a-select-option :value="0">横穿</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="抓拍类型：" style="padding: 5px 0">
<a-select v-model:value="queryForm.picType" style="width: 230px">
<a-select-option :value="1">半身照</a-select-option>
<a-select-option :value="2">全身照</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="人员类型：" style="padding: 5px 0">
<a-select v-model:value="queryForm.personType" mode="multiple" :maxTagCount="1"
style="width: 230px">
<a-select-option :value="1">店员</a-select-option>
<a-select-option :value="2">顾客</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="选择日期：" style="padding: 5px 0">
<a-date-picker v-model:value="queryForm.date" :format="'YYYY-MM-DD'" style="width: 230px" />
</a-form-item>
<a-form-item label="选择时间：" style="padding: 5px 0">
<a-time-picker v-model:value="queryForm.startTime" style="width: 120px" />
<a-time-picker v-model:value="queryForm.endTime" style="width: 120px" />
</a-form-item>
<a-form-item label="图片数量：" style="padding: 5px 0">
<a-input-number v-model:value="queryForm.minPic" :min="0" style="width: 100px"/>至
<a-input-number v-model:value="queryForm.maxPic" :min="0" style="width: 100px"/>
</a-form-item>
<a-form-item style="padding: 5px 0">
<a-button type="primary" @click="confirmSearch" :loading="isLoading">查询</a-button>
</a-form-item>
</a-form>
<div v-loading="isLoading">
<a-row v-for="row in pagedTableDataList">
<a-col class='colItem' :span="4" v-for="(item,index) in row">
<div style="margin: 0 5px" draggable="true" @dragstart="dragStart(item,$event)">
<el-image :src="item.picture_url" :fit="'fill'" class="single-image">
</el-image>
<div>时间:{{ item.counttime }}</div>
<div>类型:{{ formatPersonType(item.personType) }}</div>
<div>地点:{{ item.gate_name }}</div>
</div>
</a-col>
</a-row>
<a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total"
:show-total="total => `共 ${total} 条`" :pageSizeOptions="['10', '20']"
@change="onPageNumChange" @showSizeChange="onPageSizeChange" show-size-changer show-quick-jumper
style="text-align:center" />
</div>
</a-col>
<a-col :span='10'>
<div class="imgbox1">
<div class="btns">
<a-button type="primary" @click="featureComparison" >特征对比</a-button>
<a-button type="primary" @click="shoperFeatureComparison" >店员特征对比</a-button>
</div>
</a-col>
</a-row>
<a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total"
:show-total="total => `共 ${total} 条`" :pageSizeOptions="['16', '32']"
@change="onPageNumChange" @showSizeChange="onPageSizeChange" show-size-changer show-quick-jumper
style="text-align:center" />
</div>
<div class="imgbox1">
<div class="btns">
<a-button type="primary" @click="featureComparison" >特征对比</a-button>
<a-button type="primary" @click="shoperFeatureComparison" >店员特征对比</a-button>
</div>
<a-row :gutter="[16,16]">
<a-col :span='12'>
<div class='comparsionBox' v-loading='isLoadingComparison'>
<p v-if='boxListLeft.length>0'>共{{boxListLeft.length}}张</p>
<a-row @dragenter="dragEnter($event)" @dragleave="dragLeave($event)" @drop="dropLeft($event)"
@dragover="allowDrop($event)" >
<a-col :span="8" v-for="item in boxListLeft">
<div style="margin: 0 5px" >
<a-col :span="6" v-for="item in boxListLeft">
<div style="margin: 0 5px" :class="item.id==currentItemId?'actived':''" @click="clickItem(item)">
<el-image :src="item.picture_url" :fit="'fill'" class="single-image">
</el-image>
<div>时间:{{ item.counttime }}</div>
......@@ -104,15 +106,12 @@
<a-empty v-if='boxListLeft.length==0' description="拖拽图片到此处"></a-empty>
</a-row>
</div>
</a-col>
<a-col :span='12'>
<div class='comparsionBox' v-loading='isLoadingComparisonRight'>
<div class='comparsionBox' v-loading='isLoadingComparisonRight' style="margin-top: 15px;">
<p v-if='boxListRight.length>0'>共{{boxListRight.length}}张</p>
<a-row @dragenter="dragEnter($event)" @dragleave="dragLeave($event)" @drop="dropRight($event)"
@dragover="allowDrop($event)">
<a-col :span="8" v-for="item in boxListRight">
<div style="margin: 0 5px" >
<a-col :span="6" v-for="item in boxListRight">
<div style="margin: 0 5px" :class="item.id==currentItemId?'actived':''" @click="clickItem(item)">
<el-image :src="item.picture_url" :fit="'fill'" class="single-image">
</el-image>
<div>时间:{{ item.counttime }}</div>
......@@ -123,11 +122,11 @@
<a-empty v-if='boxListRight.length==0' description="拖拽图片到此处"></a-empty>
</a-row>
</div>
</a-col>
</a-row>
<DetailDialog ref="DetailDialogRef" />
<DetailDialogComparison ref="DetailDialogComparisonRef" />
</div>
</div>
</a-col>
</a-row>
<DetailDialog ref="DetailDialogRef" />
<DetailDialogComparison ref="DetailDialogComparisonRef" />
</template>
<script>
......@@ -160,7 +159,7 @@
setup() {
// scalar
const pageNum = ref(1)
const pageSize = ref(16)
const pageSize = ref(10)
const total = ref()
const isLoading = ref(false)
const isLoadingComparison = ref(false)
......@@ -177,7 +176,7 @@
const pagedTableDataList = computed(
() => {
return getPagedList(dataList.value, 8)
return getPagedList(dataList.value, 10)
}
)
......@@ -401,10 +400,14 @@
const allowDrop= function (event) {
event.preventDefault();
}
const clickItemObj = ref({})
const clickItem = function(item){
clickItemObj.value = item
currentItemId.value = item.id
}
const dropLeft= function (event) {
event.preventDefault();
boxObj.value = boxObjStart.value
currentItemId.value = boxObj.value.id
isLoadingComparison.value = true;
boxListLeft.value = [];
const rawData = toRaw(queryForm)
......@@ -443,7 +446,6 @@
event.preventDefault();
boxListRight.value = [];
boxObj.value = boxObjStart.value
currentItemId.value = boxObj.value.id
const rawData = toRaw(queryForm)
isLoadingComparisonRight.value = true
let parmas = {
......@@ -480,16 +482,16 @@
// 特征对比
const featureComparison = function(){
const rawData = toRaw(queryForm)
if(!boxObj.value.id){
if(!clickItemObj.value.id){
ElMessage(
{
message: `请拖拽图片到下方`,
message: `请选择拖拽的图片`,
type: 'warning'
}
)
return
}
if(!boxObj.value.picture_url){
if(!clickItemObj.value.picture_url){
ElMessage(
{
message: `该图片没有特征，请选择有效的图片`,
......@@ -499,28 +501,30 @@
return
}
let parmas = {
mall_id:boxObj.value.mall_id,
mall_id:clickItemObj.value.mall_id,
picType:rawData.picType,
pic_id:boxObj.value.id,
pic_id:clickItemObj.value.id,
countdate:formatDate(rawData.date)
}
parmas.persionlistLeft = boxListLeft.value
parmas.persionlistRight = boxListRight.value
DetailDialogComparisonRef.value.initDialog(boxObj.value,parmas);
console.log(clickItemObj.value)
console.log(parmas)
DetailDialogComparisonRef.value.initDialog(clickItemObj.value,parmas);
}
// 店员特征对比
const shoperFeatureComparison = function(){
const rawData = toRaw(queryForm)
if(!boxObj.value.id){
if(!clickItemObj.value.id){
ElMessage(
{
message: `请拖拽图片到下方`,
message: `请选择拖拽的图片`,
type: 'warning'
}
)
return
}
if(!boxObj.value.picture_url){
if(!clickItemObj.value.picture_url){
ElMessage(
{
message: `该图片没有特征，请选择有效的图片`,
......@@ -530,12 +534,13 @@
return
}
let parmas = {
plaza_id:boxObj.value.mall_id,
plaza_id:clickItemObj.value.mall_id,
pic_type:rawData.picType,
pic_id:boxObj.value.id,
ip:window._baseImgUrl
pic_id:clickItemObj.value.id,
ip:window._baseImgUrl,
countdate:formatDate(rawData.date)
}
DetailDialogRef.value.initDialog(boxObj.value,parmas);
DetailDialogRef.value.initDialog(clickItemObj.value,parmas);
}
__main()
......@@ -575,6 +580,7 @@
dropRight,
featureComparison,
shoperFeatureComparison,
clickItem,
// ref
DetailDialogRef,
DetailDialogComparisonRef
......@@ -601,6 +607,10 @@
margin-right: 10px;
}
}
.colItem{
flex: 0 0 20%;
max-width: 20%;
}
.comparsionBox{
padding-top: 5px;
border: 2px dashed #ccc;
......
src/views/ComparisonCapturedPictures/DetailDialogComparison.vue
......@@ -18,7 +18,7 @@
</a-col>
<a-col :span='20'>
<div v-loading='isLoadingTop' class='rowBox'>
<p v-if="dataListLeft">左侧<span style="float: right;margin-right: 25px;" v-if="dataListLeft.length">共{{dataListLeft.length}}张</span></p>
<p v-if="dataListLeft">上方<span style="float: right;margin-right: 25px;" v-if="dataListLeft.length">共{{dataListLeft.length}}张</span></p>
<a-row >
<a-col :span="6" v-for="(item,index) in dataListLeft" :key='index'>
<div style="margin: 0 5px" class="itemBox">
......@@ -33,7 +33,7 @@
</a-row>
</div>
<div v-loading='isLoadingBottom' class='rowBox'>
<p v-if="dataListRight">右侧<span style="float: right;margin-right: 25px;" v-if="dataListRight.length">共{{dataListRight.length}}张</span></p>
<p v-if="dataListRight">下方<span style="float: right;margin-right: 25px;" v-if="dataListRight.length">共{{dataListRight.length}}张</span></p>
<a-row>
<a-col :span="6" v-for="(item,index) in dataListRight" :key='index'>
<div style="margin: 0 5px" class="itemBox">
......@@ -83,6 +83,7 @@ export default {
countdate:parmas.countdate,
personList:parmas.persionlistLeft
}
console.log(parmasObj)
comparsionResultApi.getPersonContrastList(parmasObj).then((r) => {
isLoadingTop.value = false
if (r.data&&isArray(r.data.personList)) {
......
src/views/FeatureComparisonVerification/FeatureComparisonVerification.vue
......@@ -64,7 +64,7 @@
</a-form>
<div v-loading="isLoading">
<el-row v-for="row in pagedTableDataList">
<el-col :span="6" v-for="(item,index) in row" :key="index">
<el-col class="col" :span="6" v-for="(item,index) in row" :key="index">
<div style="margin: 0 5px" @click='chooseItem(item)' class="colItem" :class="currentItemId==item.id?'actived':''">
<el-image :src="item.picture_url" :fit="'fill'" class="single-image">
</el-image>
......@@ -75,7 +75,7 @@
</el-col>
</el-row>
<a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total"
:show-total="total => `共 ${total} 条`" :pageSizeOptions="['12', '24', '48', '192']"
:show-total="total => `共 ${total} 条`" :pageSizeOptions="['10', '20']"
@change="onPageNumChange" @showSizeChange="onPageSizeChange" show-size-changer show-quick-jumper
style="text-align:center" />
</div>
......@@ -83,7 +83,7 @@
<a-col :span="10" class='imgBox1'>
<p style="margin-left: 15px;" v-if='featureList.length>0'>共{{featureList.length}}张</p>
<el-row class="imgBox1_top" :gutter="10" v-loading="isLoadingFeature">
<el-col :span="8" class="itemBox" v-for="item in featureList">
<el-col :span="6" class="itemBox" v-for="item in featureList">
<el-image :src="item.picture_url" :fit="'fill'" class="single-image">
</el-image>
<p class="featureNum">{{(item.featureNum).toFixed(2)}}</p>
......@@ -100,7 +100,7 @@
<a-button type="primary" @click="reComparisonFeature" >重提特征比对</a-button>
</div>
<el-row :gutter="10" v-loading="isLoadingComparison" class='imgBox2'>
<el-col :span="8" class="itemBox" v-for="item in comparisonList">
<el-col :span="6" class="itemBox" v-for="item in comparisonList">
<el-image :src="item.picture_url" :fit="'fill'" class="single-image">
</el-image>
<p class="featureNum">{{(item.featureNum).toFixed(2)}}</p>
......@@ -140,7 +140,7 @@
setup() {
// scalar
const pageNum = ref(1)
const pageSize = ref(12)
const pageSize = ref(10)
const total = ref()
const isLoading = ref(false)
// sequence
......@@ -156,7 +156,7 @@
const isLoadingFeature = ref(false)
const pagedTableDataList = computed(
() => {
return getPagedList(dataList.value, 8)
return getPagedList(dataList.value, 10)
}
)
......@@ -519,6 +519,10 @@
padding-left: 5px;
}
}
.col{
flex: 0 0 20%;
max-width: 20%;
}
.actived{
border: 1px solid #1890ff;
}
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!