Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit 1f6327c1 by 李金轩
Options

ljx

1 parent a2828121
Inline Side-by-side
Showing 9 changed files with 542 additions and 127 deletions
src/PublicUtil/PublicUtil.js
......@@ -343,8 +343,9 @@ export const addSerialNumber = function(sourceData) {
// 把 date 对象转换为 0000-00-00 这种日期形式
export const formatDate = function(date) {
if (isDate(date))
{
return moment(date).format("YYYY-MM-DD")
}
return moment(date).format("YYYY-MM-DD")
}
export const formatTime = function(date) {
return moment(date).format("HH:mm:ss")
}
src/Request/PublicAxiosInstance.js
......@@ -15,7 +15,7 @@ axiosInstance.interceptors.request.use(
config => {
if (window.location.hostname === 'localhost')
{
config.headers.Authorization = '68e02bdc-5815-44e1-94c2-8a01d3270c4c'
config.headers.Authorization = 'c3b85226-4301-45fb-a087-4caf3194fc90'
}
else
{
......
src/views/SnapshotCluster/ClusterResult/ClusterResult.less 0 → 100644
.single-image {
height: 300px;
width: 100%;
}
src/views/SnapshotCluster/ClusterResult/ClusterResult.vue
<template>
<a-form :model="queryAlarmEventForm" layout="inline">
<a-form-item label="平台：">
<a-select v-model:value="queryAlarmEventForm.buildingId" style="width: 200px">
<a-select-option value="shanghai">Zone one</a-select-option>
<a-select-option value="beijing">Zone two</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="集团：">
<a-select v-model:value="queryAlarmEventForm.buildingId" style="width: 200px">
<a-select-option value="shanghai">Zone one</a-select-option>
<a-select-option value="beijing">Zone two</a-select-option>
<a-select v-model:value="queryAlarmEventForm.account_id"
style="width: 200px"
mode="multiple"
:maxTagCount="1"
@change="onAccountChange"
>
<a-select-option
v-for="item in accountList"
:value="item.id"
>
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="广场：">
<a-select v-model:value="queryAlarmEventForm.buildingId" style="width: 200px">
<a-select-option value="shanghai">Zone one</a-select-option>
<a-select-option value="beijing">Zone two</a-select-option>
<a-select v-model:value="queryAlarmEventForm.plaza_id"
style="width: 200px"
mode="multiple"
:maxTagCount="1"
@change="onPlazaChange"
>
<a-select-option
v-for="item in plazaList"
:value="item.id">
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="出入类型：">
<a-select v-model:value="queryAlarmEventForm.buildingId" style="width: 200px">
<a-select-option value="shanghai">Zone one</a-select-option>
<a-select-option value="beijing">Zone two</a-select-option>
<a-select v-model:value="queryAlarmEventForm.type" style="width: 200px">
<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="门店：">
<a-select v-model:value="queryAlarmEventForm.buildingId" style="width: 200px">
<a-select-option value="shanghai">Zone one</a-select-option>
<a-select-option value="beijing">Zone two</a-select-option>
<a-form-item label="区域信息：">
<a-select v-model:value="queryAlarmEventForm.zone_id"
style="width: 200px"
mode="multiple"
:maxTagCount="1"
@change="onZoneChange">
<a-select-option
v-for="item in zoneList"
:value="item.id"
>
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="监控点：">
<a-select v-model:value="queryAlarmEventForm.buildingId" style="width: 200px">
<a-select-option value="shanghai">Zone one</a-select-option>
<a-select-option value="beijing">Zone two</a-select-option>
<a-select v-model:value="queryAlarmEventForm.gate_id"
style="width: 200px"
mode="multiple"
:maxTagCount="1">
<a-select-option
v-for="item in gateList"
:value="item.id"
>
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="方向：">
<a-select v-model:value="queryAlarmEventForm.buildingId" style="width: 200px">
<a-select-option value="shanghai">Zone one</a-select-option>
<a-select-option value="beijing">Zone two</a-select-option>
<a-select v-model:value="queryAlarmEventForm.direction"
mode="multiple"
:maxTagCount="1"
style="width: 200px">
<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="抓怕类型：">
<a-select v-model:value="queryAlarmEventForm.buildingId" style="width: 200px">
<a-select-option value="shanghai">Zone one</a-select-option>
<a-select-option value="beijing">Zone two</a-select-option>
<a-select v-model:value="queryAlarmEventForm.picType" style="width: 200px">
<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="人员类型：">
<a-select v-model:value="queryAlarmEventForm.buildingId" style="width: 200px">
<a-select-option value="shanghai">Zone one</a-select-option>
<a-select-option value="beijing">Zone two</a-select-option>
<a-select v-model:value="queryAlarmEventForm.personType"
mode="multiple"
:maxTagCount="1"
style="width: 200px">
<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="选择日期：">
<a-range-picker
v-model:value="queryAlarmEventForm.time"
:show-time="{ format: 'HH:mm' }"
format="YYYY-MM-DD HH:mm"
/>
<a-date-picker v-model:value="queryAlarmEventForm.date" :format="'YYYY-MM-DD'"/>
</a-form-item>
<a-form-item label="选择时间：">
<a-time-picker v-model:value="queryAlarmEventForm.startTime"/>
<a-time-picker v-model:value="queryAlarmEventForm.endTime"/>
</a-form-item>
<a-form-item>
<a-button type="primary" @click="onSubmit">查询</a-button>
<a-button type="primary" @click="confirmSearch">查询</a-button>
</a-form-item>
</a-form>
<el-row>
<el-col :span="6">
<div>
<div class="folder-body">
<div class="folder-cover-image">
<el-image :fit="'contain'"
style="height: 300px;">
</el-image>
<div v-loading="isLoading">
<el-row v-for="row in pagedTableDataList">
<el-col :span="3" v-for="item in row">
<div style="margin: 0 5px">
<div style="display:flex; justify-content: flex-end ">
<span @click="downloadFile(item.features_url)"
style="color: #409EFF;font-size: 15px;cursor: pointer;">
下载特征值文件
</span>
</div>
<el-image :src="item.picture_url"
:fit="'contain'"
class="single-image">
</el-image>
<div>时间:{{ item.counttime }}</div>
<div>方向:{{ formatDirection(item.direction) }}</div>
<div>地点:{{ item.gate_name }}</div>
</div>
</div>
</el-col>
</el-row>
<el-pagination @current-change="onPageNumChange"
@size-change="onPageSizeChange"
:current-page="pageNum"
:page-size="pageSize"
:total="total"
:page-sizes="[12, 24, 36, 48]"
layout="total, sizes, prev, pager, next, jumper"
style="text-align:center"
>
</el-pagination>
</el-col>
</el-row>
<a-pagination
v-model:current="pageNum"
v-model:pageSize="pageSize"
:total="total"
:show-total="total => `共 ${total} 条`"
:pageSizeOptions="['24', '48', '96', '192']"
@change="onPageNumChange"
@showSizeChange="onPageSizeChange"
show-size-changer
show-quick-jumper
style="text-align:center"
/>
</div>
</template>
<script>
import {reactive, ref} from 'vue'
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'
export default {
setup() {
// scalar
const pageNum = ref(1)
const pageSize = ref(12)
const pageSize = ref(24)
const total = ref()
const isLoading = ref(false)
// sequence
const dataList = ref([])
const accountList = ref([])
const plazaList = ref([])
const zoneList = ref([])
const gateList = ref([])
const pagedTableDataList = computed(
() => {
return getPagedList(dataList.value, 8)
}
)
const queryAlarmEventForm = reactive(
{
projectId: 'jack',
buildingId: '',
floorId: '',
monitorPointId: '',
deviceNo: '',
startDate: '',
endDate: '',
sjlx: '',
typeId: '',
urgency: '',
time: '',
account_id: [],
plaza_id: [],
zone_id: [],
gate_id: [],
type: 0,
direction: [1, -1, 0],
picType: 2,
personType: [1, 2],
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'),
}
)
// function
const onPageNumChange = function(num) {
pageNum.value = num
getPeopleImageFolderList()
confirmSearch()
}
const onPageSizeChange = function(size) {
const onPageSizeChange = function(current, size) {
pageNum.value = 1
pageSize.value = size
getPeopleImageFolderList()
confirmSearch()
}
const getPeopleImageFolderList = function() {
const onSubmit = function() {
}
const onSubmit = function() {
const onAccountChange = function() {
getPlazaList()
getZoneList()
getGateList()
}
const onPlazaChange = function() {
getZoneList()
getGateList()
}
const onZoneChange = function() {
getGateList()
}
const getPlazaList = function() {
queryAlarmEventForm.plaza_id = []
plazaList.value = []
clusterResultApi.getPlazaList(
{
account_id: queryAlarmEventForm.account_id.toString()
}
).then(
(r) => {
if (isArray(r))
{
plazaList.value = r
}
}
)
}
const getZoneList = function() {
queryAlarmEventForm.zone_id = []
zoneList.value = []
clusterResultApi.getZoneList(
{
account_id: queryAlarmEventForm.account_id.toString(),
plaza_id: queryAlarmEventForm.plaza_id.toString(),
}
).then(
(r) => {
if (isArray(r))
{
zoneList.value = r
}
}
)
}
const getGateList = function() {
queryAlarmEventForm.gate_id = []
gateList.value = []
clusterResultApi.getGateList(
{
account_id: queryAlarmEventForm.account_id.toString(),
plaza_id: queryAlarmEventForm.plaza_id.toString(),
zone_id: queryAlarmEventForm.zone_id.toString(),
type: queryAlarmEventForm.type,
}
).then(
(r) => {
if (isArray(r.data))
{
gateList.value = r.data
}
}
)
}
const getAccountList = function() {
queryAlarmEventForm.account_id = []
accountList.value = []
clusterResultApi.getAccountList().then(
(r) => {
if (isArray(r))
{
accountList.value = r
}
}
)
}
const confirmSearch = function() {
isLoading.value = true
const rawData = toRaw(queryAlarmEventForm)
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),
page: pageNum.value - 1,
pageSize: pageSize.value,
}
)
clusterResultApi.getClusterResultList(data).then(
(r) => {
isLoading.value = false
dataList.value = r.data.persons
total.value = r.data.pageNum
}
)
}
const formatDirection = function(number) {
switch (number)
{
case 1:
{
return '进'
}
case 0:
{
return '出'
}
case 2:
{
return '横穿'
}
default:
{
break
}
}
}
const downloadFile = function(url) {
window.open(url)
}
const initialize = function() {
getAccountList()
}
initialize()
return {
// scalar
isLoading,
pageNum,
pageSize,
total,
// sequence
accountList,
plazaList,
zoneList,
gateList,
pagedTableDataList,
// mapping
queryAlarmEventForm,
// function
onPageNumChange,
onPageSizeChange,
onSubmit,
onAccountChange,
onPlazaChange,
onZoneChange,
confirmSearch,
formatDirection,
downloadFile,
}
}
}
</script>
<style scoped>
<style lang="less" scoped>
@import "./ClusterResult";
</style>
src/views/SnapshotCluster/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/faceRecord`,
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,
},
)
}
)
}
}
const clusterResultApi = new ClusterResultApi()
export default clusterResultApi
src/views/SnapshotCluster/SnapshotCluster.vue
......@@ -7,10 +7,10 @@
聚类结果
</a-menu-item>
</a-menu>
<div v-if="currentMenu[0] === '抓拍记录'">
<div v-show="currentMenu[0] === '抓拍记录'">
<SnapshotRecord></SnapshotRecord>
</div>
<div v-if="currentMenu[0] === '聚类结果'">
<div v-show="currentMenu[0] === '聚类结果'">
<ClusterResult></ClusterResult>
</div>
</template>
......
src/views/SnapshotCluster/SnapshotRecord/SnapshotRecord.less 0 → 100644
.single-image {
height: 300px;
width: 100%;
}
src/views/SnapshotCluster/SnapshotRecord/SnapshotRecord.vue
......@@ -66,10 +66,13 @@
</a-select>
</a-form-item>
<a-form-item label="方向：">
<a-select v-model:value="queryAlarmEventForm.direction" style="width: 200px">
<a-select v-model:value="queryAlarmEventForm.direction"
mode="multiple"
:maxTagCount="1"
style="width: 200px">
<a-select-option :value="1">进</a-select-option>
<a-select-option :value="0">出</a-select-option>
<a-select-option :value="2">横穿</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="抓怕类型：">
......@@ -79,50 +82,89 @@
</a-select>
</a-form-item>
<a-form-item label="人员类型：">
<a-select v-model:value="queryAlarmEventForm.personType" style="width: 200px">
<a-select v-model:value="queryAlarmEventForm.personType"
mode="multiple"
:maxTagCount="1"
style="width: 200px">
<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="选择日期：">
<a-range-picker
v-model:value="queryAlarmEventForm.time"
:show-time="{ format: 'HH:mm' }"
format="YYYY-MM-DD HH:mm"
/>
<a-date-picker v-model:value="queryAlarmEventForm.date" :format="'YYYY-MM-DD'"/>
</a-form-item>
<a-form-item label="选择时间：">
<a-time-picker v-model:value="queryAlarmEventForm.startTime"/>
<a-time-picker v-model:value="queryAlarmEventForm.endTime"/>
</a-form-item>
<a-form-item>
<a-button type="primary" @click="onSubmit">查询</a-button>
<a-button type="primary" @click="confirmSearch">查询</a-button>
</a-form-item>
</a-form>
<el-pagination @current-change="onPageNumChange"
@size-change="onPageSizeChange"
:current-page="pageNum"
:page-size="pageSize"
:total="total"
:page-sizes="[12, 24, 36, 48]"
layout="total, sizes, prev, pager, next, jumper"
style="text-align:center"
>
</el-pagination>
<div v-loading="isLoading">
<el-row v-for="row in pagedTableDataList">
<el-col :span="3" v-for="item in row">
<div style="margin: 0 5px">
<div style="display:flex; justify-content: flex-end ">
<span @click="downloadFile(item.features_url)"
style="color: #409EFF;font-size: 15px;cursor: pointer;">
下载特征值文件
</span>
</div>
<el-image :src="item.picture_url"
:fit="'contain'"
class="single-image">
</el-image>
<div>时间:{{ item.counttime }}</div>
<div>方向:{{ formatDirection(item.direction) }}</div>
<div>地点:{{ item.gate_name }}</div>
</div>
</el-col>
</el-row>
<a-pagination
v-model:current="pageNum"
v-model:pageSize="pageSize"
:total="total"
:show-total="total => `共 ${total} 条`"
:pageSizeOptions="['24', '48', '96', '192']"
@change="onPageNumChange"
@showSizeChange="onPageSizeChange"
show-size-changer
show-quick-jumper
style="text-align:center"
/>
</div>
</template>
<script>
import {reactive, ref} from 'vue'
import {computed, reactive, ref, toRaw} from 'vue'
import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi'
import {isArray} from '@/PublicUtil/Judgment'
import moment from 'moment'
import {filterEmptyValueInObject, formatDate, formatTime, getPagedList} from '@/PublicUtil/PublicUtil'
export default {
setup() {
// scalar
const pageNum = ref(1)
const pageSize = ref(12)
const pageSize = ref(24)
const total = ref()
const isLoading = ref(false)
// sequence
const dataList = ref([])
const accountList = ref([])
const plazaList = ref([])
const zoneList = ref([])
const gateList = ref([])
const pagedTableDataList = computed(
() => {
return getPagedList(dataList.value, 8)
}
)
const queryAlarmEventForm = reactive(
{
account_id: [],
......@@ -130,29 +172,24 @@ export default {
zone_id: [],
gate_id: [],
type: 0,
direction: '',
picType: '',
personType: '',
startTime: '',
endTime: '',
time: '',
direction: [1, -1, 0],
picType: 2,
personType: [1, 2],
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'),
}
)
// function
const onPageNumChange = function(num) {
pageNum.value = num
getPeopleImageFolderList()
confirmSearch()
}
const onPageSizeChange = function(size) {
const onPageSizeChange = function(current, size) {
pageNum.value = 1
pageSize.value = size
getPeopleImageFolderList()
}
const getPeopleImageFolderList = function() {
confirmSearch()
}
const onSubmit = function() {
......@@ -242,6 +279,62 @@ export default {
)
}
const confirmSearch = function() {
isLoading.value = true
const rawData = toRaw(queryAlarmEventForm)
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),
page: pageNum.value - 1,
pageSize: pageSize.value,
}
)
snapshotRecordApi.getSnapshotRecordList(data).then(
(r) => {
isLoading.value = false
dataList.value = r.data.persons
total.value = r.data.pageNum
}
)
}
const formatDirection = function(number) {
switch (number)
{
case 1:
{
return '进'
}
case 0:
{
return '出'
}
case 2:
{
return '横穿'
}
default:
{
break
}
}
}
const downloadFile = function(url) {
window.open(url)
}
const initialize = function() {
getAccountList()
}
......@@ -250,15 +343,17 @@ export default {
return {
// scalar
isLoading,
pageNum,
pageSize,
total,
// sequence
// mapping
accountList,
plazaList,
zoneList,
gateList,
pagedTableDataList,
// mapping
queryAlarmEventForm,
// function
onPageNumChange,
......@@ -267,11 +362,15 @@ export default {
onAccountChange,
onPlazaChange,
onZoneChange,
confirmSearch,
formatDirection,
downloadFile,
}
}
}
</script>
<style scoped>
<style lang="less" scoped>
@import "./SnapshotRecord";
</style>
src/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi.js
......@@ -2,6 +2,18 @@ import axiosInstance from "@/Request/PublicAxiosInstance"
import {filterEmptyValueInObject} from "@/PublicUtil/PublicUtil"
class SnapshotRecordApi {
getSnapshotRecordList(data) {
return axiosInstance.request(
{
method: 'GET',
url: `/faceRecognitions/faceRecord`,
params: filterEmptyValueInObject(
data
)
}
)
}
getAccountList() {
return axiosInstance.request(
{
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!