Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit d94b1f16 by 李君
Options

Merge branch 'master' of http://git.keliuyun.com:55676/luoxinlin/vion-tools 

# Conflicts:
#	src/Request/PublicAxiosInstance.js
2 parents 4a56a4e1 7b122e80
Inline Side-by-side
Showing 13 changed files with 1420 additions and 299 deletions
src/router/index.js
...@@ -33,6 +33,10 @@ const menuRoute = [ ...@@ -33,6 +33,10 @@ const menuRoute = [
path: 'SnapshotCluster1', path: 'SnapshotCluster1',
component: () => import("@/views/SnapshotCluster1/SnapshotCluster.vue"), component: () => import("@/views/SnapshotCluster1/SnapshotCluster.vue"),
}, },
{
path: 'SourceTrajectoryAnalysis',
component: () => import("@/views/SourceTrajectoryAnalysis/index.vue"),
},
{ {
path: 'EquipmentTimeErrorVerification', path: 'EquipmentTimeErrorVerification',
component: () => import("@/views/EquipmentTimeErrorVerification/EquipmentTimeErrorVerification.vue"), component: () => import("@/views/EquipmentTimeErrorVerification/EquipmentTimeErrorVerification.vue"),
......
src/views/ComparisonCapturedPictures/DetailDialogComparisonNew.vue
...@@ -170,7 +170,7 @@ export default { ...@@ -170,7 +170,7 @@ export default {
} }
const clickItem = function(data){ const clickItem = function(data){
clusterResultApi.getBodyPoint({'feature_url':data.features_url}).then((r) => { clusterResultApi.getBodyPoint({'feature_url':data.features_url}).then((r) => {
imgModelRef.value.initDialog(data.picture_url,r.data); imgModelRef.value.initDialog(data.unid, data.picture_url, r.data);
}) })
} }
return { return {
......
src/views/FeatureComparisonVerification/api.js
...@@ -17,7 +17,8 @@ class FeatureResultApi { ...@@ -17,7 +17,8 @@ class FeatureResultApi {
return axiosInstance.request( return axiosInstance.request(
{ {
method: 'GET', method: 'GET',
url: `/feature/allPersonContrast`, // url: `/feature/allPersonContrast`,
url: `/feature/allPersonContrastGroup`,
params: filterEmptyValueInObject( params: filterEmptyValueInObject(
data data
) )
......
src/views/Main/Main.vue
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</el-header> </el-header>
<el-main style="padding: 0"> <el-main style="padding: 0">
<el-container> <el-container>
<el-aside style="background: #001529" width="190px"> <el-aside style="background: #001529" width="200px">
<a-menu mode="inline" theme="dark" v-model:selectedKeys="selectedKeys" @click="onClick"> <a-menu mode="inline" theme="dark" v-model:selectedKeys="selectedKeys" @click="onClick">
<a-menu-item :key="'/Main/DataRerun'"> <a-menu-item :key="'/Main/DataRerun'">
<div class="flex-vertical-center"> <div class="flex-vertical-center">
...@@ -121,6 +121,12 @@ ...@@ -121,6 +121,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/SourceTrajectoryAnalysis'">
<div class="flex-vertical-center">
<img :src="require('./Icons/6.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>
......
src/views/SnapshotCluster/ClusterResult/ClusterResult.vue
...@@ -98,8 +98,8 @@ ...@@ -98,8 +98,8 @@
<a-date-picker v-model:value="queryForm.date" :format="'YYYY-MM-DD'" style="width: 240px"/> <a-date-picker v-model:value="queryForm.date" :format="'YYYY-MM-DD'" style="width: 240px"/>
</a-form-item> </a-form-item>
<a-form-item label="选择时间：" style="padding: 5px 0"> <a-form-item label="选择时间：" style="padding: 5px 0">
<a-time-picker v-model:value="queryForm.startTime" style="width: 140px"/> <a-time-picker format="HH:mm:ss" valueFormat="HH:mm:ss" v-model:value="queryForm.startTime" style="width: 140px"/>
<a-time-picker v-model:value="queryForm.endTime" style="width: 140px"/> <a-time-picker format="HH:mm:ss" valueFormat="HH:mm:ss" v-model:value="queryForm.endTime" style="width: 140px"/>
</a-form-item> </a-form-item>
<a-form-item label="图片数量：" style="padding: 5px 0"> <a-form-item label="图片数量：" style="padding: 5px 0">
<a-input v-model:value="queryForm.minPic" style="width: 129px"/> <a-input v-model:value="queryForm.minPic" style="width: 129px"/>
...@@ -234,8 +234,8 @@ export default { ...@@ -234,8 +234,8 @@ export default {
picType: 2, picType: 2,
personType: [1, 0], personType: [1, 0],
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: '00:00:00',
endTime: moment('23:59:59', 'HH:mm:ss'), endTime: '23:59:59',
minPic: 0, minPic: 0,
maxPic: 100, maxPic: 100,
childAdult:[], childAdult:[],
...@@ -250,8 +250,8 @@ export default { ...@@ -250,8 +250,8 @@ export default {
queryForm.direction = searchCondition.value.direction; queryForm.direction = searchCondition.value.direction;
queryForm.picType = searchCondition.value.picType; queryForm.picType = searchCondition.value.picType;
queryForm.date = searchCondition.value.date; queryForm.date = searchCondition.value.date;
queryForm.startTime = searchCondition.value.startTime; // queryForm.startTime = searchCondition.value.startTime;
queryForm.endTime = searchCondition.value.endTime; // queryForm.endTime = searchCondition.value.endTime;
queryForm.minPic = searchCondition.value.minPic||0; queryForm.minPic = searchCondition.value.minPic||0;
queryForm.maxPic = searchCondition.value.maxPic||100; queryForm.maxPic = searchCondition.value.maxPic||100;
} }
...@@ -432,8 +432,8 @@ export default { ...@@ -432,8 +432,8 @@ export default {
direction: rawData.direction.toString(), direction: rawData.direction.toString(),
picType: rawData.picType, picType: rawData.picType,
personType: rawData.personType.toString(), personType: rawData.personType.toString(),
startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime), startTime: formatDate(rawData.date) + ' ' + rawData.startTime,
endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime), endTime: formatDate(rawData.date) + ' ' + rawData.endTime,
minPic: rawData.minPic, minPic: rawData.minPic,
maxPic: rawData.maxPic, maxPic: rawData.maxPic,
page: pageNum.value - 1, page: pageNum.value - 1,
...@@ -454,8 +454,8 @@ export default { ...@@ -454,8 +454,8 @@ export default {
date: rawData.date, date: rawData.date,
minPic: rawData.minPic, minPic: rawData.minPic,
maxPic: rawData.maxPic, maxPic: rawData.maxPic,
startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime), startTime: rawData.startTime,
endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime), endTime: rawData.endTime,
} }
) )
window.localStorage.setItem('searchCondition',JSON.stringify(storageData)) window.localStorage.setItem('searchCondition',JSON.stringify(storageData))
...@@ -627,9 +627,13 @@ export default { ...@@ -627,9 +627,13 @@ export default {
return return
} }
const rawData = toRaw(queryForm) const rawData = toRaw(queryForm)
console.log(queryForm)
console.log(rawData)
let parmas = { let parmas = {
person_unid:currobj.value.person_unid, person_unid:currobj.value.person_unid,
pic_type:rawData.picType, pic_type:rawData.picType,
endTime:formatDate(rawData.date) + ' ' + rawData.endTime,
startTime:formatDate(rawData.date) + ' ' + rawData.startTime,
countdate:formatDate(rawData.date), countdate:formatDate(rawData.date),
pic_id:currobj.value.id, pic_id:currobj.value.id,
ip:window._baseImgUrl, ip:window._baseImgUrl,
......
src/views/SnapshotCluster/SnapshotRecord/SnapshotRecord.vue
...@@ -96,8 +96,8 @@ ...@@ -96,8 +96,8 @@
<a-date-picker v-model:value="queryForm.date" :format="'YYYY-MM-DD'" style="width: 280px"/> <a-date-picker v-model:value="queryForm.date" :format="'YYYY-MM-DD'" style="width: 280px"/>
</a-form-item> </a-form-item>
<a-form-item label="选择时间：" style="padding: 5px 0"> <a-form-item label="选择时间：" style="padding: 5px 0">
<a-time-picker v-model:value="queryForm.startTime" style="width: 140px"/> <a-time-picker format="HH:mm:ss" valueFormat="HH:mm:ss" v-model:value="queryForm.startTime" style="width: 140px"/>
<a-time-picker v-model:value="queryForm.endTime" style="width: 140px"/> <a-time-picker format="HH:mm:ss" valueFormat="HH:mm:ss" v-model:value="queryForm.endTime" style="width: 140px"/>
</a-form-item> </a-form-item>
<a-form-item style="padding: 5px 0"> <a-form-item style="padding: 5px 0">
<a-button type="primary" @click="clickSearch" :loading="isLoading">查询</a-button> <a-button type="primary" @click="clickSearch" :loading="isLoading">查询</a-button>
...@@ -105,6 +105,9 @@ ...@@ -105,6 +105,9 @@
<a-form-item style="padding: 5px 0"> <a-form-item style="padding: 5px 0">
<a-button type="primary" @click="comparativeFun">特征对比验证</a-button> <a-button type="primary" @click="comparativeFun">特征对比验证</a-button>
</a-form-item> </a-form-item>
<a-form-item style="padding: 5px 0">
<a-button type="primary" @click="singleComparativeFun">单张特征对比</a-button>
</a-form-item>
</a-form> </a-form>
<div v-loading="isLoading"> <div v-loading="isLoading">
...@@ -150,6 +153,7 @@ ...@@ -150,6 +153,7 @@
</div> </div>
<!-- <imgDialog ref='imgModelRef'></imgDialog> --> <!-- <imgDialog ref='imgModelRef'></imgDialog> -->
<DetailDialog ref="DetailDialogRef" /> <DetailDialog ref="DetailDialogRef" />
<singleImgComparisonDialog ref="singleImgComparisonRef"></singleImgComparisonDialog>
</template> </template>
<script> <script>
...@@ -161,10 +165,12 @@ import {filterEmptyValueInObject, formatDate, formatTime, getPagedList} from '@/ ...@@ -161,10 +165,12 @@ import {filterEmptyValueInObject, formatDate, formatTime, getPagedList} from '@/
// import imgDialog from '../imgDialog.vue' // import imgDialog from '../imgDialog.vue'
import {ElMessage} from 'element-plus' import {ElMessage} from 'element-plus'
import DetailDialog from "../../ComparisonCapturedPictures/DetailDialog.vue"; import DetailDialog from "../../ComparisonCapturedPictures/DetailDialog.vue";
import singleImgComparisonDialog from "../singleImgComparisonDialog.vue";
export default { export default {
components:{ components:{
// imgDialog , // imgDialog ,
DetailDialog DetailDialog,
singleImgComparisonDialog
}, },
setup() { setup() {
// scalar // scalar
...@@ -200,8 +206,8 @@ export default { ...@@ -200,8 +206,8 @@ export default {
picType: 2, picType: 2,
personType: [1, 0], personType: [1, 0],
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: '00:00:00',
endTime: moment('23:59:59', 'HH:mm:ss'), endTime: '23:59:59',
childAdult:[], childAdult:[],
} }
) )
...@@ -390,8 +396,8 @@ export default { ...@@ -390,8 +396,8 @@ export default {
direction: rawData.direction.toString(), direction: rawData.direction.toString(),
picType: rawData.picType, picType: rawData.picType,
personType: rawData.personType.toString(), personType: rawData.personType.toString(),
startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime), startTime: formatDate(rawData.date) + ' ' + rawData.startTime,
endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime), endTime: formatDate(rawData.date) + ' ' + rawData.endTime,
page: pageNum.value - 1, page: pageNum.value - 1,
pageSize: pageSize.value, pageSize: pageSize.value,
childAdult: rawData.childAdult.toString(), childAdult: rawData.childAdult.toString(),
...@@ -408,8 +414,8 @@ export default { ...@@ -408,8 +414,8 @@ export default {
picType: rawData.picType, picType: rawData.picType,
personType: rawData.personType, personType: rawData.personType,
date: rawData.date, date: rawData.date,
startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime), startTime:rawData.startTime,
endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime), endTime:rawData.endTime,
} }
) )
window.localStorage.setItem('searchCondition',JSON.stringify(storageData)) window.localStorage.setItem('searchCondition',JSON.stringify(storageData))
...@@ -512,6 +518,41 @@ export default { ...@@ -512,6 +518,41 @@ export default {
} }
DetailDialogRef.value.initDialog(currobj.value,parmas); DetailDialogRef.value.initDialog(currobj.value,parmas);
} }
//单张特征对比
const singleImgComparisonRef = ref()
const singleComparativeFun = function(){
if(!currobj.value.id){
ElMessage(
{
message: `请选择图片`,
type: 'warning'
}
)
return
}
if(!currobj.value.picture_url){
ElMessage(
{
message: `该图片没有特征，请选择有效的图片`,
type: 'warning'
}
)
return
}
const rawData = toRaw(queryForm)
console.log(rawData)
let parmas = {
person_unid:currobj.value.person_unid,
pic_type:rawData.picType,
endTime:formatDate(rawData.date) + ' ' + rawData.endTime,
startTime:formatDate(rawData.date) + ' ' + rawData.startTime,
countdate:formatDate(rawData.date),
pic_id:currobj.value.id,
ip:window._baseImgUrl,
plaza_id:currobj.value.mall_id
}
singleImgComparisonRef.value.initDialog(parmas);
}
const clickSearch = function() { const clickSearch = function() {
pageNum.value = 1 pageNum.value = 1
confirmSearch() confirmSearch()
...@@ -557,7 +598,9 @@ export default { ...@@ -557,7 +598,9 @@ export default {
clickSearch, clickSearch,
// ref // ref
DetailDialogRef, DetailDialogRef,
imgModelRef imgModelRef,
singleComparativeFun,
singleImgComparisonRef
} }
} }
} }
......
src/views/SnapshotCluster/imgDialog.vue
<template> <template>
<a-modal <a-modal
title="图片" :title="'图片' + ' ' + unidStr"
v-if='isVisible' v-if='isVisible'
v-model:visible="isVisible" v-model:visible="isVisible"
width="1200px" width="1200px"
...@@ -25,8 +25,11 @@ export default { ...@@ -25,8 +25,11 @@ export default {
const imgUrl = ref() const imgUrl = ref()
const canvas = ref() const canvas = ref()
const ctx = ref() const ctx = ref()
const initDialog = (url,data) => { const unidStr = ref('')
const initDialog = (unid,url,data) => {
console.log(unid,url,data,)
imgUrl.value = url imgUrl.value = url
unidStr.value = unid
isVisible.value = true; isVisible.value = true;
setTimeout(()=>{ setTimeout(()=>{
var imgscream=document.getElementById("img"); var imgscream=document.getElementById("img");
...@@ -56,6 +59,7 @@ export default { ...@@ -56,6 +59,7 @@ export default {
initDialog, initDialog,
isLoading, isLoading,
imgUrl, imgUrl,
unidStr,
detailData detailData
}; };
}, },
......
src/views/SnapshotCluster/singleImgComparisonDialog.vue
<template> <template>
<a-modal <a-modal title="单张图片特征对比" v-if='isVisible' v-model:visible="isVisible" width="1066px" height='90%'
title="单张图片特征对比" class="detail-modal">
v-if='isVisible' <el-row :gutter="20">
v-model:visible="isVisible" <el-col :span="12" class='imgBox1' v-loading='isLoading'>
width="1600px" <p class="title">
height='90%' <span class="name">现在聚类</span>
class="detail-modal" <span class="id">{{detailData.person_unid}}</span>
> <span class="num">{{featureList.length}}张</span>
<el-row :gutter="20"> </p>
<el-col :span="8" class='imgBox1' v-loading='isLoading'> <el-row :gutter="10" class="imgBox1_top">
<p class="title"> <el-col :span="8" class="itemBox" v-for="item in featureList">
<span class="name">现在聚类</span> <el-image :src="item.picture_url" :fit="'fill'" class="single-image" @click='clickItem(item)'>
<span class="id">{{detailData.person_unid}}</span> </el-image>
<span class="num">{{featureList.length}}张</span> <span class="el-icon-document downloadFile" @click="downloadFile(item,$event)"></span>
</p> <span class="el-icon-picture-outline openImage" @click="openImage(item,$event)"></span>
<el-row :gutter="10" class="imgBox1_top"> <p class="featureNum">{{(item.featureNum).toFixed(2)}}</p>
<el-col :span="8" class="itemBox" v-for="item in featureList"> <div>时间:{{ item.counttime }}</div>
<el-image :src="item.picture_url" :fit="'fill'" class="single-image" @click='clickItem(item)'> <div>人员类型:{{ item.person_type==1?'店员':'顾客' }}</div>
</el-image> <div class="direction" :class="'direction'+item.direction">方向:{{ formatDirection(item.direction) }}</div>
<span class="el-icon-document downloadFile" @click="downloadFile(item,$event)"></span> <div>地点:{{ item.gate_name }}</div>
<span class="el-icon-picture-outline openImage" @click="openImage(item,$event)"></span> </el-col>
<p class="featureNum">{{(item.featureNum).toFixed(2)}}</p> <a-empty v-if='featureList.length==0' style='margin: 0 auto;'></a-empty>
<div>时间:{{ item.counttime }}</div> </el-row>
<div>人员类型:{{ item.person_type==1?'店员':'顾客' }}</div> </el-col>
<div class="direction" :class="'direction'+item.direction">方向:{{ formatDirection(item.direction) }}</div> <el-col :span="12" class='imgBox1' v-loading='isLoading1'>
<div>地点:{{ item.gate_name }}</div> <p class="title">
</el-col> <span class="name">特征比对</span>
<a-empty v-if='featureList.length==0' style='margin: 0 auto;'></a-empty> <span class="num">{{comparisonList&&comparisonList.length > 0?comparisonList[0].numLength:0}}张</span>
</el-row> </p>
</el-col> <el-row class="imgBox1_top">
<el-col :span="8" class='imgBox1' v-loading='isLoading1'> <el-row :gutter="10" v-for="(one,ind) in comparisonList" style="width: 100%;border-radius: 5px;border:1px solid #ccc;margin: 0px 0px 5px!important;">
<p class="title"> <div style="height: 30px;line-height: 30px;width: 100%;padding-left: 5px;margin-bottom: 5px;">
<span class="name">特征比对</span> {{one.person_unid}}
<span class="num">{{comparisonList.length}}张</span> <span style="float: right;padding-right: 11px;" v-if="one.personList">{{one.personList.length}}张</span>
</p> </div>
<el-row :gutter="10" class="imgBox1_top"> <el-col :span="8" class="itemBox" v-for="(item,index) in one.personList">
<el-col :span="8" class="itemBox" v-for="item in comparisonList"> <el-image :src="item.picture_url" :fit="'fill'" class="single-image" @click='clickItem(item)'></el-image>
<el-image :src="item.picture_url" :fit="'fill'" class="single-image" @click='clickItem(item)'> <span class="el-icon-picture-outline openImage" @click="openImage(item,$event)"></span>
</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> <p class="featureNum">{{item.featureNum?(item.featureNum).toFixed(2):0}}</p>
<span class="el-icon-document downloadFile" @click="downloadFile(item,$event)"></span> <div>时间:{{ item.counttime }}</div>
<p class="featureNum">{{item.featureNum?(item.featureNum).toFixed(2):0}}</p> <div>人员类型:{{ item.person_type==1?'店员':'顾客' }}</div>
<div>时间:{{ item.counttime }}</div> <div class="direction" :class="'direction'+item.direction">方向:{{ formatDirection(item.direction) }}</div>
<div>人员类型:{{ item.person_type==1?'店员':'顾客' }}</div> <div>地点:{{ item.gate_name }}</div>
<div class="direction" :class="'direction'+item.direction">方向:{{ formatDirection(item.direction) }}</div> </el-col>
<div>地点:{{ item.gate_name }}</div> </el-row>
</el-col> <a-empty v-if='comparisonList.length==0' style='margin: 0 auto;'></a-empty>
<a-empty v-if='comparisonList.length==0' style='margin: 0 auto;'></a-empty> </el-row>
</el-row> </el-col>
</el-col> <!-- <el-col :span="8" class='imgBox1' v-loading='isLoading2'>
<el-col :span="8" class='imgBox1' v-loading='isLoading2'>
<p class="title"> <p class="title">
<span class="name">重提特征后比对</span> <span class="name">重提特征后比对</span>
<a-button class="id" type="primary" @click="reComparisonFeature" >重提特征比对</a-button> <a-button class="id" type="primary" @click="reComparisonFeature" >重提特征比对</a-button>
...@@ -69,251 +68,298 @@ ...@@ -69,251 +68,298 @@
</el-col> </el-col>
<a-empty v-if='reComparisonList.length==0' style='margin: 0 auto;'></a-empty> <a-empty v-if='reComparisonList.length==0' style='margin: 0 auto;'></a-empty>
</el-row> </el-row>
</el-col> </el-col> -->
</el-row> </el-row>
<template #footer> <template #footer>
<a-button @click="onCancel">返回</a-button> <a-button @click="onCancel">返回</a-button>
</template> </template>
</a-modal> </a-modal>
<imgDialog ref='imgModelRef'></imgDialog> <imgDialog ref='imgModelRef'></imgDialog>
<imgOtherDialog ref="imgOtherDialogRef" ></imgOtherDialog> <imgOtherDialog ref="imgOtherDialogRef"></imgOtherDialog>
</template> </template>
<script> <script>
import { reactive, ref, watch } from "vue"; import {
import featureApi from '@/views/FeatureComparisonVerification/api.js' reactive,
import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi' ref,
import {isArray} from '@/PublicUtil/Judgment' watch
import imgDialog from './imgDialog.vue' } from "vue";
import imgOtherDialog from "../ComparisonCapturedPictures/imgOtherDialog.vue"; import featureApi from '@/views/FeatureComparisonVerification/api.js'
export default { import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
components:{ import {
imgDialog, isArray
imgOtherDialog } from '@/PublicUtil/Judgment'
}, import imgDialog from './imgDialog.vue'
setup() { import imgOtherDialog from "../ComparisonCapturedPictures/imgOtherDialog.vue";
const isVisible = ref(false); export default {
const isLoading = ref(false); components: {
const isLoading1 = ref(false); imgDialog,
const isLoading2= ref(false); imgOtherDialog
const detailData = ref({}); },
const featureList = ref([]) setup() {
const imgModelRef = ref(); const isVisible = ref(false);
const imgOtherDialogRef = ref(); const isLoading = ref(false);
const comparisonList = ref([]) const isLoading1 = ref(false);
const reComparisonList = ref([]) const isLoading2 = ref(false);
const formatDirection = function(number) { const detailData = ref({});
switch (number) { const featureList = ref([])
case 1: { const imgModelRef = ref();
return '进' const imgOtherDialogRef = ref();
} const comparisonList = ref([])
case -1: { const reComparisonList = ref([])
return '出' const formatDirection = function(number) {
} switch (number) {
case 0: { case 1: {
return '横穿' return '进'
} }
default: { case -1: {
return '出'
break }
} case 0: {
} return '横穿'
} }
watch([featureList],(newVal,oldVal)=>{ default: {
},{deep:true}) break
const initDialog = (data) => { }
isLoading.value = true; }
isLoading1.value = true; }
isLoading2.value = false; watch([featureList], (newVal, oldVal) => {
detailData.value = data;
featureList.value = [] }, {
reComparisonList.value = [] deep: true
featureApi.getPersonContrastList(data).then((r) => { })
isLoading.value = false const initDialog = (data) => {
if (r.data&&isArray(r.data.personList)) { isLoading.value = true;
r.data.personList.forEach((item) => { isLoading1.value = true;
if (item.features_url) { isLoading2.value = false;
item.features_url = window._baseImgUrl + item.features_url detailData.value = data;
} featureList.value = []
if (item.picture_url) { reComparisonList.value = []
item.picture_url = window._baseImgUrl + item.picture_url let par = {
} person_unid:data.person_unid,
}) pic_type:data.pic_type,
featureList.value = r.data.personList countdate:data.countdate,
} pic_id:data.pic_id,
} ip:data.ip,
) plaza_id:data.plaza_id,
comparisonList.value = [] }
featureApi.getAllPersonContrastList(data).then((r) => { featureApi.getPersonContrastList(par).then((r1) => {
isLoading1.value = false isLoading.value = false
if (isArray(r.data)) { if (r1.data && isArray(r1.data.personList)) {
if(r.data.length>0){ r1.data.personList.forEach((item) => {
r.data.forEach((item) => { if (item.features_url) {
if (item.features_url) { item.features_url = window._baseImgUrl + item.features_url
item.features_url = window._baseImgUrl + item.features_url }
} if (item.picture_url) {
if (item.picture_url) { item.picture_url = window._baseImgUrl + item.picture_url
item.picture_url = window._baseImgUrl + item.picture_url }
} })
}) featureList.value = r1.data.personList
comparisonList.value = r.data }
} })
} comparisonList.value = []
} featureApi.getAllPersonContrastList(data).then((r) => {
) isLoading1.value = false
isVisible.value = true; if (isArray(r.data)) {
}; if (r.data.length > 0) {
const clickItem = function(data){ let numLength = 0
clusterResultApi.getBodyPoint({'feature_url':data.features_url}).then((r) => { r.data.forEach((item) => {
imgModelRef.value.initDialog(data.picture_url,r.data); if(item.personList&&item.personList.length>0) {
}) numLength += item.personList.length
} item.personList.forEach((one) => {
const reComparisonFeature = function(){ if (one.picture_url) {
isLoading2.value = true one.picture_url = window._baseImgUrl + one.picture_url
reComparisonList.value = [] }
featureApi.getNewPersonContrastList(detailData.value).then((r) => { if (one.features_url) {
isLoading2.value = false one.features_url = window._baseImgUrl + one.features_url
}
})
}
})
r.data[0].numLength = numLength
comparisonList.value = r.data
}
}
/* isLoading1.value = false
console.log(r)
if (isArray(r.data)) { if (isArray(r.data)) {
if(r.data.length>0){ if (r.data.length > 0) {
r.data.forEach((item) => { r.data.forEach((item) => {
if (item.features_url) { if (item.features_url) {
item.features_url = window._baseImgUrl + item.features_url item.features_url = window._baseImgUrl + item.features_url
} }
if (item.picture_url) { if (item.picture_url) {
item.picture_url = window._baseImgUrl + item.picture_url item.picture_url = window._baseImgUrl + item.picture_url
} }
}) })
reComparisonList.value = r.data comparisonList.value = r.data
} }
} */
})
isVisible.value = true;
};
const clickItem = function(data) {
console.log(data)
clusterResultApi.getBodyPoint({
'feature_url': data.features_url
}).then((r) => {
imgModelRef.value.initDialog(data.unid, data.picture_url, r.data);
})
}
const reComparisonFeature = function() {
isLoading2.value = true
reComparisonList.value = []
featureApi.getNewPersonContrastList(detailData.value).then((r) => {
isLoading2.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
}
})
reComparisonList.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()
const downloadFile = function(item,event){ if (item.features_url) {
event.stopPropagation() let url = item.picture_url
if(item.features_url){ imgOtherDialogRef.value.initDialog(url.split('0.jpg')[0] + '1.jpg')
window.open(item.features_url) } else {
}else{ ElMessage({
ElMessage( message: `该图片没有特征`,
{ type: 'warning'
message: `该图片没有特征`, })
type: 'warning' return
} }
) }
return const onCancel = () => {
} isVisible.value = false;
};
}
const openImage = function(item,event){
event.stopPropagation()
if(item.features_url){
let url = item.picture_url
imgOtherDialogRef.value.initDialog(url.split('0.jpg')[0]+'1.jpg')
}else{
ElMessage(
{
message: `该图片没有特征`,
type: 'warning'
}
)
return
}
}
const onCancel = () => {
isVisible.value = false;
};
return { return {
isVisible, isVisible,
onCancel, onCancel,
initDialog, initDialog,
isLoading, isLoading,
isLoading1, isLoading1,
isLoading2, isLoading2,
detailData, detailData,
featureList, featureList,
formatDirection, formatDirection,
downloadFile, downloadFile,
clickItem, clickItem,
imgModelRef, imgModelRef,
comparisonList, comparisonList,
reComparisonList, reComparisonList,
reComparisonFeature, reComparisonFeature,
openImage, openImage,
imgOtherDialogRef imgOtherDialogRef
}; };
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.single-image { .single-image {
height: 200px; height: 200px;
width: 150px; width: 150px;
cursor: pointer; cursor: pointer;
} }
.direction{
font-weight: 900; .direction {
background-color: red; font-weight: 900;
color: white; background-color: red;
} color: white;
.direction1{ }
background-color: green;
} .direction1 {
.direction0{ background-color: green;
background-color: orange; }
}
.title{ .direction0 {
background-color: orange;
}
.title {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
padding: 0; padding: 0;
.name{
.name {
font-weight: 900; font-weight: 900;
font-size: 18px; font-size: 18px;
} }
.id{
.id {
margin-left: 20px; margin-left: 20px;
} }
.num{
.num {
float: right; float: right;
margin-right: 15px; margin-right: 15px;
} }
} }
.imgBox1{
// border-left: 10px solid #efefef; .imgBox1 {
box-sizing: border-box; // border-left: 10px solid #efefef;
min-height: 100%; box-sizing: border-box;
.itemBox{ min-height: 100%;
position: relative;
} .itemBox {
.downloadFile{ position: relative;
position: absolute; }
color: #1890ff;
font-size: 32px; .downloadFile {
top: 0; position: absolute;
right: 10px; color: #1890ff;
cursor: pointer; font-size: 32px;
} top: 0;
.openImage{ right: 10px;
position: absolute; cursor: pointer;
color: #1890ff; }
font-size: 32px;
top: 0; .openImage {
left: 90px; position: absolute;
cursor: pointer; color: #1890ff;
} font-size: 32px;
.featureNum{ top: 0;
position: absolute; left: 90px;
top: 0; cursor: pointer;
left: 15px; }
color: red;
font-weight: 900; .featureNum {
font-size: 16px; position: absolute;
} top: 0;
left: 15px;
color: red;
font-weight: 900;
font-size: 16px;
}
}
.imgBox1_top {
min-height: 400px;
max-height: 600px;
overflow-y: auto;
} }
.imgBox1_top{ </style>
min-height: 400px;
max-height: 600px;
overflow-y: auto;
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/SourceTrajectoryAnalysis/ClusterResult/ClusterResult.less 0 → 100644
.single-image {
height: 300px;
width: 100%;
}
.direction{
font-weight: 900;
background-color: red;
color: white;
}
.direction1{
background-color: green;
}
.direction0{
background-color: orange;
}
src/views/SourceTrajectoryAnalysis/ClusterResult/ClusterResult.vue 0 → 100644
<template>
<a-modal title="轨迹详情" v-model:visible="isVisible" width="90%" class="detail-modal" style="top: 50px" :body-style="{padding:'10px 20px'}" :footer="false">
<a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '70px' } }">
<a-form-item style="padding: 5px 0">
<a-button type="primary" @click="comparativeFun">特征对比</a-button>
</a-form-item>
</a-form>
<div v-loading="isLoading" style="padding: 0 0 10px;">
<div class="resultContent">
<template v-for="person in dataList">
<div class="classBox" :class="person.expand?'expand':''">
<div :class="person.checked?'checked':''">
<div class="boxInfo">
<span class="iconExpand" v-show="!person.expand">▶</span>
<span class="iconExpand" v-show="person.expand">▼</span>
<span class="expandWord" @click='expandChange(person)'>{{person.expand?'收起':'展开'}}</span>
<el-checkbox class="checkBox" v-model="person.checked" @change='checkChange(person)'></el-checkbox>
人id:{{ ' ' + person.person_unid }}
图片数量:{{ person.perrsonList.length }}
</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" @click="handleClick(item)" :class="currentItemId==item.id?'actived':''">
<div style="">
<span @click="downloadTrajectoryFile(item.track_url)" class="downBtn">
轨迹
</span>
<span @click="downloadFile(item.features_url)" class="downBtn downBtn1">
特征
</span>
</div>
<el-image :src="item.picture_url" :fit="'fill'" class="single-image">
</el-image>
<div>时间:{{ item.counttime }}</div>
<div>
人员类型:{{ item.person_type==1?'店员':(item.person_type==0?'顾客':'未知') }}({{ item.childAdult==1?'成人':(item.childAdult==0?'儿童':'未知') }})
</div>
<div>性别:{{ formatGender(item.gender) }}({{item.age}})</div>
<div class="direction" :class="'direction'+item.direction">方向:{{ formatDirection(item.direction) }}
</div>
<div>地点:{{ item.gate_name }}</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
</div>
</div>
</a-modal>
<DetailDialogComparison ref="DetailDialogComparisonRef" />
</template>
<script>
import {
computed,
reactive,
ref,
toRaw
} from 'vue'
import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
import {
isArray
} from '@/PublicUtil/Judgment'
import moment from 'moment'
import {
filterEmptyValueInObject,
formatDate,
formatTime,
getPagedList
} from '@/PublicUtil/PublicUtil'
import {
ElMessage
} from 'element-plus'
import {
useRouter
} from 'vue-router'
import DetailDialogComparison from "../../ComparisonCapturedPictures/DetailDialogComparisonNew.vue";
export default {
components: {
DetailDialogComparison,
},
setup() {
const router = useRouter()
const isVisible = ref(false);
// scalar
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref()
const isLoading = ref(false)
const currobj = ref({})
const currentItemId = ref()
// sequence
const dataList = ref([])
const accountList = ref([])
const plazaList = ref([])
const zoneList = ref([])
const gateList = ref([])
// const imgModelRef = ref();
const pagedTableDataList = computed(
() => {
return getPagedList(dataList.value, 8)
}
)
const DetailDialogComparisonRef = ref();
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: moment('00:00:00', 'HH:mm:ss'),
endTime: moment('23:59:59', 'HH:mm:ss'),
minPic: 0,
maxPic: 100,
childAdult: [],
})
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;
queryForm.minPic = searchCondition.value.minPic || 0;
queryForm.maxPic = searchCondition.value.maxPic || 100;
}
// 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()
getGateList()
}
const onZoneChange = function() {
getGateList()
}
const getPlazaList = function(val) {
queryForm.plaza_id = []
plazaList.value = []
clusterResultApi.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) {
zoneList.value = []
clusterResultApi.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) {
gateList.value = []
clusterResultApi.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 = []
clusterResultApi.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)
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) + ' ' + formatTime(rawData.startTime),
endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime),
minPic: rawData.minPic,
maxPic: rawData.maxPic,
page: pageNum.value - 1,
pageSize: pageSize.value,
childAdult: rawData.childAdult.toString(),
})
const storageData = filterEmptyValueInObject({
account_id: rawData.account_id,
plaza_id: rawData.plaza_id,
zone_id: rawData.zone_id,
gate_id: rawData.gate_id,
date: rawData.date,
})
window.localStorage.setItem('searchCondition', JSON.stringify(storageData))
clusterResultApi.getClusterResultList(data).then(
(r) => {
isLoading.value = false
sortDataList(r.data.persons)
r.data.persons.forEach((itemPerson) => {
itemPerson.checked = false
itemPerson.expand = false
itemPerson.perrsonList.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
}
if (item.track_url) {
item.track_url = window._baseImgUrl + item.track_url
}
})
})
dataList.value = r.data.persons
total.value = r.data.pageNum
document.getElementsByClassName('resultContent')[0].scrollTop = 0
}
)
}
const formatGender = function(number) {
switch (number) {
case 1: {
return '男'
}
case -1: {
return '未知'
}
case 0: {
return '女'
}
default: {
break
}
}
}
const formatDirection = function(number) {
switch (number) {
case 1: {
return '进'
}
case -1: {
return '出'
}
case 0: {
return '横穿'
}
default: {
break
}
}
}
const sortDataList = function(list) {
list.sort(
(a, b) => {
return (b.perrsonList.length - a.perrsonList.length)
}
)
}
const downloadFile = function(url) {
window.open(url)
}
const downloadTrajectoryFile = function(url) {
window.open(url)
}
const handleClick = function(data) {
currentItemId.value = data.id
currobj.value = data;
// clusterResultApi.getBodyPoint({'feature_url':feature}).then(
// (r) => {
// imgModelRef.value.initDialog(url,r.data);
// }
// )
}
const checkChange = function(data) {
// console.log(data)
}
const expandChange = function(data) {
dataList.value.forEach(item => {
if (data.person_unid == item.person_unid) {
item.expand = !item.expand
}
})
}
// 特征对比
const comparativeFun = function() {
const rawData = toRaw(queryForm)
if (!currobj.value.id) {
ElMessage({
message: `请选择图片`,
type: 'warning'
})
return
}
if (!currobj.value.picture_url) {
ElMessage({
message: `该图片没有特征，请选择有效的图片`,
type: 'warning'
})
return
}
let parmas = {
mall_id: currobj.value.mall_id,
picType: rawData.picType,
pic_id: currobj.value.id,
countdate: formatDate(rawData.date),
dataList: []
}
dataList.value.forEach(itemData => {
if (itemData.checked && itemData.checked == true) {
parmas.dataList.push(itemData)
}
})
if (parmas.dataList && parmas.dataList.length > 0) {
DetailDialogComparisonRef.value.initDialog(currobj.value, parmas);
} else {
ElMessage({
message: `请选择聚类图片`,
type: 'warning'
})
return
}
}
const contentHeight = ref(0)
const initDialog = function(data) {
console.log(data)
queryForm.picType = data.picType
queryForm.date = moment(data.startTime).format('YYYY-MM-DD')
isVisible.value = true;
isLoading.value = true
clusterResultApi.getClusterResultList(data).then((r) => {
// console.log(r)
isLoading.value = false
sortDataList(r.data.persons)
r.data.persons.forEach((itemPerson) => {
itemPerson.checked = false
itemPerson.expand = false
itemPerson.perrsonList.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
}
if (item.track_url) {
item.track_url = window._baseImgUrl + item.track_url
}
})
})
dataList.value = r.data.persons
total.value = r.data.pageNum
document.getElementsByClassName('resultContent')[0].scrollTop = 0
})
contentHeight.value = window.innerHeight - 310
}
return {
// scalar
isVisible,
isLoading,
pageNum,
pageSize,
total,
currentItemId,
currobj,
// sequence
accountList,
plazaList,
zoneList,
gateList,
pagedTableDataList,
dataList,
contentHeight,
// mapping
queryForm,
// function
onPageNumChange,
onPageSizeChange,
onAccountChange,
onPlazaChange,
onZoneChange,
confirmSearch,
formatDirection,
downloadFile,
getPagedList,
handleClick,
comparativeFun,
checkChange,
expandChange,
formatGender,
downloadTrajectoryFile,
clickSearch,
DetailDialogComparisonRef,
initDialog,
}
}
}
</script>
<style lang="less" scoped>
@import "./ClusterResult";
.actived {
border: 3px solid #1890ff;
}
.checkBox {
margin-left: 10px;
}
.boxInfo {
line-height: 28px;
margin-bottom: 10px;
}
.classBox {
margin: 10px 0;
border: solid 1px black;
height: 485px;
overflow-y: hidden;
}
.expand {
height: auto;
overflow: auto;
}
.expandWord {
color: #1890ff;
margin-right: 5px;
cursor: pointer;
float: right;
}
.iconExpand {
cursor: pointer;
float: right;
color: #1890ff;
margin-right: 20px;
}
.checked {
background-color: #bbb;
}
.resultContent {
overflow: auto;
min-height: 520px;
max-height: 520px;
}
.downBtn {
color: #409EFF;
font-size: 15px;
cursor: pointer;
display: inline-block;
width: auto;
}
.downBtn1 {
float: right;
}
</style>
\ No newline at end of file \ No newline at end of file
src/views/SourceTrajectoryAnalysis/ClusterResult/ClusterResultApi.js 0 → 100644
import axiosInstance from "@/Request/PublicAxiosInstance"
import {filterEmptyValueInObject} from "@/PublicUtil/PublicUtil"
class ClusterResultApi {
getClusterResultList(data) {
return axiosInstance.request(
{
method: 'GET',
url: `/faceRecognitions/faceRecordGroup`,
params: filterEmptyValueInObject(
data
)
}
)
}
getAccountList() {
return axiosInstance.request(
{
method: 'GET',
url: `/accounts`,
}
)
}
getPlazaList(data) {
return axiosInstance.request(
{
method: 'GET',
url: `/malls`,
params: filterEmptyValueInObject(
{
accountIds: data.account_id
},
)
}
)
}
getZoneList(data) {
return axiosInstance.request(
{
method: 'GET',
url: `/zones/zoneList`,
params: filterEmptyValueInObject(
{
account_id: data.account_id,
plaza_id: data.plaza_id,
},
)
}
)
}
getGateList(data) {
return axiosInstance.request(
{
method: 'GET',
url: `/gates/gateByInfo`,
params: filterEmptyValueInObject(
{
account_id: data.account_id,
plaza_id: data.plaza_id,
zone_id: data.zone_id,
type: data.type,
},
)
}
)
}
getBodyPoint(data) {
return axiosInstance.request(
{
method: 'GET',
url: `/feature/bodyPoint`,
params: filterEmptyValueInObject(
data
)
}
)
}
}
const clusterResultApi = new ClusterResultApi()
export default clusterResultApi
src/views/SourceTrajectoryAnalysis/SourceTrajectoryAnalysisApi.js 0 → 100644
import axiosInstance from "@/Request/PublicAxiosInstance"
import {filterEmptyValueInObject} from "@/PublicUtil/PublicUtil"
class SourceTrajectoryAnalysisApi {
getList(data) {
return axiosInstance.request(
{
method: 'GET',
url: `/track/list`,
params: filterEmptyValueInObject(
data
)
}
)
}
}
const sourceTrajectoryAnalysisApi = new SourceTrajectoryAnalysisApi()
export default sourceTrajectoryAnalysisApi
src/views/SourceTrajectoryAnalysis/index.vue 0 → 100644
<template>
<a-form :model="queryForm" layout="inline">
<a-form-item label="集团：" style="padding: 5px 0;margin-bottom: 24px;">
<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;margin-bottom: 24px;">
<a-select v-model:value="queryForm.plaza_id" style="width: 280px" @change="onPlazaChange" :options="plazaList"
optionFilterProp="label" show-search>
</a-select>
</a-form-item>
<a-form-item label="区域信息：" style="padding: 5px 0;margin-bottom: 24px;">
<a-select v-model:value="queryForm.zone_id" style="width: 240px" @change="onZoneChange" :options="zoneList"
optionFilterProp="label" show-search>
</a-select>
</a-form-item>
<a-form-item label="日期:" style="padding: 5px 0;margin-bottom: 24px;">
<a-date-picker v-model:value="queryForm.countDate" style="width: 280px" />
</a-form-item>
<a-form-item style="padding: 5px 0;margin-bottom: 24px;">
<a-button type="primary" @click="search">查询</a-button>
</a-form-item>
</a-form>
<a-table :dataSource="dataList" v-loading="isLoading" :columns="[
{
title: 'person_unid',
dataIndex: 'personUnid',
align:'center',
slots: {
customRender: 'accountname',
},
},
{
title: '第一次出现的地点',
dataIndex: 'firstGateName',
align:'center',
},
{
title: '第一次出现的时间',
dataIndex: 'fistCountTime',
align:'center',
},
{
title: '进入时间',
dataIndex: 'inTime',
align:'center',
},
{
title: '离开时间',
dataIndex: 'outTime',
align:'center',
},
{
title: '停留时间(毫秒)',
dataIndex: 'residenceTime',
align:'center',
},
{
title: '最后一次出现的地点',
dataIndex: 'lastGateName',
align:'center',
},
{
title: '最后一次出现的时间',
dataIndex: 'lastCountTime',
align:'center',
},
{
title: '到过的店铺数量',
dataIndex: 'inZoneNum',
align:'center',
},
{
title: '是否多次进出',
dataIndex: 'manyTimes',
align:'center',
},
{
title: '操作',
dataIndex: 'operation',
align: 'center',
width:100,
slots: {
customRender: 'operation',
},
}
]" :pagination="false">
<template #operation="{ record }">
<div>
<a-button @click="showDetail(record)" type="primary">查看详情</a-button>
</div>
</template>
</a-table>
<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;margin-top: 10px;" />
<ClusterResult ref="ClusterResultRef" />
</template>
<script>
import moment from 'moment'
import {
isArray
} from '@/PublicUtil/Judgment'
import {
defineComponent,
ref,
toRaw,
reactive
} from 'vue'
import {
filterEmptyValueInObject,
formatDate
} from '@/PublicUtil/PublicUtil'
import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
import SourceTrajectoryAnalysisApi from '@/views/SourceTrajectoryAnalysis/SourceTrajectoryAnalysisApi'
import ClusterResult from '@/views/SourceTrajectoryAnalysis/ClusterResult/ClusterResult.vue'
export default defineComponent({
components: {
ClusterResult,
},
setup() {
const ClusterResultRef = ref();
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref()
const dataList = ref([])
const isLoading = ref(false)
const accountList = ref([])
const plazaList = ref([])
const zoneList = ref([])
const queryForm = reactive({
account_id: '',
plaza_id: '',
zone_id: '',
countDate: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD')
})
const searchCondition = ref({})
// if (window.localStorage.getItem('searchCondition')) {
// searchCondition.value = JSON.parse(window.localStorage.getItem('searchCondition'));
// queryForm.account_id = searchCondition.value.zone_id;
// queryForm.plaza_id = searchCondition.value.plaza_id;
// }
const getAccountList = function() {
queryForm.account_id = ''
accountList.value = []
clusterResultApi.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 = accountList.value[0].value
}
getPlazaList()
}
}
}
)
}
const onAccountChange = function() {
getPlazaList(1)
}
const getPlazaList = function(val) {
queryForm.plaza_id = ''
plazaList.value = []
if (!queryForm.account_id.toString()) {
return
}
clusterResultApi.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 = plazaList.value[0].value
}
getZoneList(1)
}
}
}
)
}
const onPlazaChange = function() {
getZoneList(1)
}
const getZoneList = function(val) {
queryForm.zone_id = ''
zoneList.value = []
clusterResultApi.getZoneList({
account_id: queryForm.account_id,
plaza_id: queryForm.plaza_id,
}).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 = zoneList.value[0].value
}
}
confirmSearch()
}
}
)
}
const onZoneChange = function() {
// confirmSearch()
}
const onPageNumChange = function(num) {
pageNum.value = num
confirmSearch()
}
const onPageSizeChange = function(current, size) {
pageNum.value = 1
pageSize.value = size
confirmSearch()
}
const confirmSearch = function() {
isLoading.value = true
const rawData = toRaw(queryForm)
const data = filterEmptyValueInObject({
page: pageNum.value - 1,
pageSize: pageSize.value,
countDate: formatDate(rawData.countDate),
zoneId: rawData.zone_id,
mallId: rawData.plaza_id,
})
dataList.value = [], total.value = 0
SourceTrajectoryAnalysisApi.getList(data).then(
(r) => {
isLoading.value = false
if (r.msg_code == 200) {
dataList.value = r.data.persons
total.value = r.data.pageNum
}
}
)
}
const search = function() {
pageNum.value = 1
pageSize.value = 10
confirmSearch()
}
const __main = function() {
getAccountList()
}
const showDetail = function(row) {
const rawData = toRaw(queryForm)
const data = filterEmptyValueInObject({
page: 0,
pageSize: 10,
account_id: rawData.account_id,
plaza_id: rawData.plaza_id,
type: 0,
picType: 2,
startTime:formatDate(rawData.countDate) + ' 00:00:00',
endTime:formatDate(rawData.countDate) + ' 23:59:59',
personUnid: row.personUnid,
direction: '-1,1',
})
// console.log(data)
ClusterResultRef.value.initDialog(data);
}
__main()
return {
ClusterResultRef,
accountList,
onAccountChange,
plazaList,
zoneList,
onPlazaChange,
onZoneChange,
queryForm,
pageNum,
pageSize,
total,
isLoading,
dataList,
onPageNumChange,
onPageSizeChange,
confirmSearch,
search,
showDetail
}
},
})
</script>
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!