Skip to content

罗鑫霖 / vion-tools

Go to a project
Commit c0fabd49 by 李乾广
Options

增加事件图

1 parent 3687a857
Inline Side-by-side
Showing 1 changed file with 1249 additions and 1248 deletions
src/views/SnapshotCluster/ClusterResult/ClusterResult.vue
<template> <template>
<div class="containter"> <div class="containter">
<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="集团：" style="padding: 5px 0"> <a-form-item label="集团：" style="padding: 5px 0">
<a-select v-model:value="queryForm.account_id" <a-select v-model:value="queryForm.account_id"
style="width: 240px" style="width: 240px"
@change="onAccountChange" @change="onAccountChange"
:options="accountList" :options="accountList"
optionFilterProp="label" optionFilterProp="label"
show-search show-search
> >
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="广场：" style="padding: 5px 0"> <a-form-item label="广场：" style="padding: 5px 0">
<a-select v-model:value="queryForm.plaza_id" <a-select v-model:value="queryForm.plaza_id"
style="width: 240px" style="width: 240px"
@change="onPlazaChange" @change="onPlazaChange"
:options="plazaList" :options="plazaList"
optionFilterProp="label" optionFilterProp="label"
show-search show-search
> >
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="出入类型：" style="padding: 5px 0"> <a-form-item label="出入类型：" style="padding: 5px 0">
<a-select v-model:value="queryForm.type" style="width: 240px"> <a-select v-model:value="queryForm.type" style="width: 240px">
<a-select-option :value="0">全场</a-select-option> <a-select-option :value="0">全场</a-select-option>
<a-select-option :value="1">广场出入口</a-select-option> <a-select-option :value="1">广场出入口</a-select-option>
<a-select-option :value="2">楼层出入口</a-select-option> <a-select-option :value="2">楼层出入口</a-select-option>
<a-select-option :value="3">店铺出入口</a-select-option> <a-select-option :value="3">店铺出入口</a-select-option>
<a-select-option :value="4">其他</a-select-option> <a-select-option :value="4">其他</a-select-option>
<a-select-option :value="5">不以广场出入口开始</a-select-option> <a-select-option :value="5">不以广场出入口开始</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="区域信息：" style="padding: 5px 0"> <a-form-item label="区域信息：" style="padding: 5px 0">
<a-select v-model:value="queryForm.zone_id" <a-select v-model:value="queryForm.zone_id"
style="width: 240px" style="width: 240px"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
@change="onZoneChange" @change="onZoneChange"
:options="zoneList" :options="zoneList"
optionFilterProp="label" optionFilterProp="label"
show-search show-search
> >
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="监控点：" style="padding: 5px 0"> <a-form-item label="监控点：" style="padding: 5px 0">
<a-select v-model:value="queryForm.gate_id" <a-select v-model:value="queryForm.gate_id"
style="width: 240px" style="width: 240px"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
:options="gateList" :options="gateList"
optionFilterProp="label" optionFilterProp="label"
show-search show-search
> >
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="事件类型：" style="padding: 5px 0"> <a-form-item label="事件类型：" style="padding: 5px 0">
<a-select v-model:value="queryForm.direction" <a-select v-model:value="queryForm.direction"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
style="width: 240px"> style="width: 240px">
<a-select-option :value="1">进</a-select-option> <a-select-option :value="1">进</a-select-option>
<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-option :value="0">横穿</a-select-option>
<a-select-option :value="2">过店</a-select-option> <a-select-option :value="2">过店</a-select-option>
<a-select-option :value="9">收银</a-select-option> <a-select-option :value="9">收银</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="抓拍类型：" style="padding: 5px 0"> <a-form-item label="抓拍类型：" style="padding: 5px 0">
<a-select v-model:value="queryForm.picType" style="width: 240px"> <a-select v-model:value="queryForm.picType" style="width: 240px">
<a-select-option :value="1">半身照</a-select-option> <a-select-option :value="1">半身照</a-select-option>
<a-select-option :value="2">全身照</a-select-option> <a-select-option :value="2">全身照</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="人员类型：" style="padding: 5px 0"> <a-form-item label="人员类型：" style="padding: 5px 0">
<a-select v-model:value="queryForm.personType" <a-select v-model:value="queryForm.personType"
mode="multiple" mode="multiple"
:options="personTypeList" :options="personTypeList"
optionFilterProp="label" optionFilterProp="label"
:maxTagCount="1" :maxTagCount="1"
style="width: 240px"> style="width: 240px">
</a-select> </a-select>
</a-form-item> </a-form-item>
<!--<a-form-item label="年龄类型：" style="padding: 5px 0"> <!--<a-form-item label="年龄类型：" style="padding: 5px 0">
<a-select v-model:value="queryForm.childAdult" <a-select v-model:value="queryForm.childAdult"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
style="width: 240px"> style="width: 240px">
<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-option :value="0">儿童</a-select-option>
<a-select-option :value="-1">未知</a-select-option> <a-select-option :value="-1">未知</a-select-option>
</a-select> </a-select>
</a-form-item>--> </a-form-item>-->
<a-form-item label="年龄类型：" style="padding: 5px 0"> <a-form-item label="年龄类型：" style="padding: 5px 0">
<a-select v-model:value="queryForm.childAdult" <a-select v-model:value="queryForm.childAdult"
mode="multiple" mode="multiple"
:maxTagCount="1" :maxTagCount="1"
style="width: 240px"> style="width: 240px">
<a-select-option <a-select-option
v-for="item in childAdultAgeOptions" v-for="item in childAdultAgeOptions"
:key="item.value" :key="item.value"
:value="item.value" :value="item.value"
>{{item.label}}</a-select-option> >{{item.label}}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item label="设备序列号：" style="padding: 5px 0;" class="label-width-wu"> <a-form-item label="设备序列号：" style="padding: 5px 0;" class="label-width-wu">
<a-input v-model:value="queryForm.deviceSerialNum" style="width: 240px"/> <a-input v-model:value="queryForm.deviceSerialNum" style="width: 240px"/>
</a-form-item> </a-form-item>
<a-form-item label="人ID：" style="padding: 5px 0"> <a-form-item label="人ID：" style="padding: 5px 0">
<a-input v-model:value="queryForm.personUnid" style="width: 240px"/> <a-input v-model:value="queryForm.personUnid" 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-date-picker v-model:value="queryForm.date" :format="'YYYY-MM-DD'" :allowClear="false" style="width: 240px"/> <a-date-picker v-model:value="queryForm.date" :format="'YYYY-MM-DD'" :allowClear="false" 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 format="HH:mm:ss" valueFormat="HH:mm:ss" 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 format="HH:mm:ss" valueFormat="HH:mm:ss" 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"/>
至 至
<a-input v-model:value="queryForm.maxPic" style="width: 129px"/> <a-input v-model:value="queryForm.maxPic" style="width: 129px"/>
</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>
</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="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-form-item style="padding: 5px 0">
<a-button type="primary" @click="singleComparativeFun">单张特征对比</a-button> <a-button type="primary" @click="singleComparativeFun">单张特征对比</a-button>
</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="clerkComparativeFun">店员特征对比</a-button> <a-button type="primary" @click="clerkComparativeFun">店员特征对比</a-button>
</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="personnelComparativeFun">人员特征对比</a-button> <a-button type="primary" @click="personnelComparativeFun">人员特征对比</a-button>
</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="updatePersonInfoByGroup">类型修正</a-button> <a-button type="primary" @click="updatePersonInfoByGroup">类型修正</a-button>
</a-form-item> </a-form-item>
<a-form-item style="padding: 0px 5px;border: 1px solid #ccc;border-radius: 6px;"> <a-form-item style="padding: 0px 5px;border: 1px solid #ccc;border-radius: 6px;">
<a-button type="primary" @click="handleMutipleOperation">{{mutipleOperationText}}</a-button> <a-button type="primary" @click="handleMutipleOperation">{{mutipleOperationText}}</a-button>
<i class="el-icon-arrow-right" style="margin: 0px 10px;"></i> <i class="el-icon-arrow-right" style="margin: 0px 10px;"></i>
<el-button type="text" :disabled="!isMultipleOperation" @click="movePersonRecord(person)">移动</el-button> <el-button type="text" :disabled="!isMultipleOperation" @click="movePersonRecord(person)">移动</el-button>
<!-- <a-popconfirm <!-- <a-popconfirm
title="将从本组中剔除，您确认吗？" title="将从本组中剔除，您确认吗？"
ok-text="是" ok-text="是"
cancel-text="否" cancel-text="否"
" "
> >
</a-popconfirm> --> </a-popconfirm> -->
<el-button type="text" :disabled="!isMultipleOperation" @click="deletePersonRecord(person)">剔除</el-button> <el-button type="text" :disabled="!isMultipleOperation" @click="deletePersonRecord(person)">剔除</el-button>
<a-popconfirm <a-popconfirm
title="是否添加至店员库" title="是否添加至店员库"
ok-text="是" ok-text="是"
cancel-text="否" cancel-text="否"
@confirm="addShopkeeper(person)" @confirm="addShopkeeper(person)"
> >
<el-button type="text" :disabled="!isMultipleOperation">添加店员库</el-button> <el-button type="text" :disabled="!isMultipleOperation">添加店员库</el-button>
</a-popconfirm> </a-popconfirm>
<el-button type="text" :disabled="!isMultipleOperation" @click="addPersonnelPool(person)">添加人员库</el-button> <el-button type="text" :disabled="!isMultipleOperation" @click="addPersonnelPool(person)">添加人员库</el-button>
<a-popconfirm <a-popconfirm
title="将彻底删除，您确认吗？" title="将彻底删除，您确认吗？"
ok-text="是" ok-text="是"
cancel-text="否" cancel-text="否"
@confirm="deleteRealPersonRecord(person)" @confirm="deleteRealPersonRecord(person)"
> >
<el-button type="text" :disabled="!isMultipleOperation">删除</el-button> <el-button type="text" :disabled="!isMultipleOperation">删除</el-button>
</a-popconfirm> </a-popconfirm>
</a-form-item> </a-form-item>
</a-form> </a-form>
<div v-loading="isLoading"> <div v-loading="isLoading">
<div class="resultContent" :style="{'height':contentHeight+'px'}"> <div class="resultContent" :style="{'height':contentHeight+'px'}">
<template v-for="person in dataList"> <template v-for="person in dataList">
<div class="classBox" :class="person.expand?'expand':''"> <div class="classBox" :class="person.expand?'expand':''">
<div :class="person.checked?'checked':''"> <div :class="person.checked?'checked':''">
<div class="boxInfo"> <div class="boxInfo">
<span class="iconExpand" v-show="!person.expand">▶</span> <span class="iconExpand" v-show="!person.expand">▶</span>
<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> <span class="expandWord" @click='expandChange(person)'>{{person.expand?'收起':'展开'}}</span>
<!--修正组类型数据--> <!--修正组类型数据-->
<!-- <span class="expandWord" @click='updatePersonInfoByGroup(person)'>类型修正</span> --> <!-- <span class="expandWord" @click='updatePersonInfoByGroup(person)'>类型修正</span> -->
<span class="expandWord" @click='uploadGroupData(person)'>上传数据</span> <span class="expandWord" @click='uploadGroupData(person)'>上传数据</span>
<span class="expandWord" @click='searchPersonInfoByGroup(person)'>搜索</span> <span class="expandWord" @click='searchPersonInfoByGroup(person)'>搜索</span>
<el-checkbox class="checkBox" v-model="person.checked" @change='checkChange(person)'></el-checkbox> <el-checkbox class="checkBox" v-model="person.checked" @change='checkChange(person)'></el-checkbox>
人id:{{ ' ' + person.person_unid }} 人id:{{ ' ' + person.person_unid }}
图片数量:{{ person.perrsonList.length }} 图片数量:{{ person.perrsonList.length }}
</div> <span style="margin-left: 20px;">当前显示：{{person.imageDisplayType?'事件图':'抓拍图'}}</span> <span style="color: #1890ff;margin-left: 20px;cursor: pointer;" @click='toggleImageDisplayType(person)'>{{person.imageDisplayType?'切换显示抓拍图':'切换显示事件图'}}</span>
<el-row v-for="row in getPagedList(person.perrsonList, 8)"> </div>
<el-col :span="3" v-for="item in row"> <el-row v-for="row in getPagedList(person.perrsonList, 8)">
<div <el-col :span="3" v-for="item in row">
style="margin: 0 5px" <div
:class="[(currentItemId==item.id)?'actived':'', isSelectedPerson(item.id)?'actived-red':'']" style="margin: 0 5px"
@click="handleClick(item, $event)" :class="[(currentItemId==item.id)?'actived':'', isSelectedPerson(item.id)?'actived-red':'']"
> @click="handleClick(item, $event)"
<div style=""> >
<span @click="downloadTrajectoryFile(item.track_url)" <div style="">
class="downBtn"> <span @click="downloadTrajectoryFile(item.track_url)"
轨迹 class="downBtn">
</span> 轨迹
<span @click="downloadFile(item.features_url)" </span>
class="downBtn downBtn1"> <span @click="downloadFile(item.features_url)"
特征 class="downBtn downBtn1">
</span> 特征
</div> </span>
<el-image :src="item.picture_url" </div>
:fit="'fill'" <el-image v-if="person.imageDisplayType" :src="item.eventPic" :fit="'fill'" class="single-image"></el-image> <el-image v-else :src="item.picture_url" :fit="'fill'" class="single-image"></el-image>
class="single-image"> <div>时间:{{ item.counttime }}</div>
</el-image> <div>人员类型:{{ personTypeStr(item.person_type)}}({{ formatChildAdult(item.childAdult) }})</div>
<div>时间:{{ item.counttime }}</div> <div>性别:{{ formatGender(item.gender) }}({{item.age}})</div>
<div>人员类型:{{ personTypeStr(item.person_type)}}({{ formatChildAdult(item.childAdult) }})</div> <div class="direction" :class="'direction'+item.direction">事件类型:{{ formatDirection(item.direction) }}</div>
<div>性别:{{ formatGender(item.gender) }}({{item.age}})</div> <div>地点:{{ item.gate_name }}</div>
<div class="direction" :class="'direction'+item.direction">事件类型:{{ formatDirection(item.direction) }}</div> </div>
<div>地点:{{ item.gate_name }}</div> </el-col>
</div> </el-row>
</el-col> </div>
</el-row> </div>
</div> </template>
</div> </div>
</template> <a-pagination
</div> v-model:current="pageNum"
<a-pagination v-model:pageSize="pageSize"
v-model:current="pageNum" :total="total"
v-model:pageSize="pageSize" :show-total="total => `共 ${total} 条`"
:total="total" :pageSizeOptions="['10', '20', '40', '80']"
:show-total="total => `共 ${total} 条`" @change="onPageNumChange"
:pageSizeOptions="['10', '20', '40', '80']" @showSizeChange="onPageSizeChange"
@change="onPageNumChange" show-size-changer
@showSizeChange="onPageSizeChange" show-quick-jumper
show-size-changer style="text-align:center;margin-top: 10px;"
show-quick-jumper />
style="text-align:center;margin-top: 10px;" </div>
/> </div>
</div> <!-- <imgDialog ref='imgModelRef'></imgDialog> -->
</div> <DetailDialog ref="DetailDialogRef" />
<!-- <imgDialog ref='imgModelRef'></imgDialog> --> <PersonnelDialog ref="personnelDialogRef" />
<DetailDialog ref="DetailDialogRef" /> <DetailDialogComparison ref="DetailDialogComparisonRef" />
<PersonnelDialog ref="personnelDialogRef" /> <singleImgComparisonDialog ref="singleImgComparisonRef"></singleImgComparisonDialog>
<DetailDialogComparison ref="DetailDialogComparisonRef" />
<singleImgComparisonDialog ref="singleImgComparisonRef"></singleImgComparisonDialog> <PersonGroupEditor ref='personGroupEditorRef' @refresh="handleEditorRefresh" />
<UploadGroupDataEditor ref='uploadGroupDataEditorRef' @refresh="handleEditorRefresh" />
<PersonGroupEditor ref='personGroupEditorRef' @refresh="handleEditorRefresh" /> <PersonGroupMover ref='personGroupMoverRef' :data-params="currentSearchCondition" :data-list="dataList" @refresh="handleRefresh" />
<UploadGroupDataEditor ref='uploadGroupDataEditorRef' @refresh="handleEditorRefresh" /> <AddPersonnelPool ref='personnelPoolRef' :data-params="currentSearchCondition" @refresh="handleRefresh" />
<PersonGroupMover ref='personGroupMoverRef' :data-params="currentSearchCondition" :data-list="dataList" @refresh="handleRefresh" /> <PersonGroupDialog ref='personGroupDialogRef' :query-form="queryForm" @refresh="handleRefresh" />
<AddPersonnelPool ref='personnelPoolRef' :data-params="currentSearchCondition" @refresh="handleRefresh" /> </template>
<PersonGroupDialog ref='personGroupDialogRef' :query-form="queryForm" @refresh="handleRefresh" />
</template> <script>
import {computed, reactive, ref, toRaw} from 'vue'
<script> import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
import {computed, reactive, ref, toRaw} from 'vue' import {isArray} from '@/PublicUtil/Judgment'
import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi' import moment from 'moment'
import {isArray} from '@/PublicUtil/Judgment' import {filterEmptyValueInObject, formatDate, formatTime, getPagedList} from '@/PublicUtil/PublicUtil'
import moment from 'moment' // import imgDialog from '../imgDialog.vue'
import {filterEmptyValueInObject, formatDate, formatTime, getPagedList} from '@/PublicUtil/PublicUtil' import {ElMessage} from 'element-plus'
// import imgDialog from '../imgDialog.vue' import DetailDialog from "../../ComparisonCapturedPictures/DetailDialog.vue";
import {ElMessage} from 'element-plus' import PersonnelDialog from "../../ComparisonCapturedPictures/PersonnelDialog.vue";
import DetailDialog from "../../ComparisonCapturedPictures/DetailDialog.vue"; import DetailDialogComparison from "../../ComparisonCapturedPictures/DetailDialogComparisonNew.vue";
import PersonnelDialog from "../../ComparisonCapturedPictures/PersonnelDialog.vue"; import singleImgComparisonDialog from "../singleImgComparisonDialog.vue";
import DetailDialogComparison from "../../ComparisonCapturedPictures/DetailDialogComparisonNew.vue"; import PersonGroupEditor from "./PersonGroupEditor.vue";
import singleImgComparisonDialog from "../singleImgComparisonDialog.vue"; import UploadGroupDataEditor from "./UploadGroupDataEditor.vue";
import PersonGroupEditor from "./PersonGroupEditor.vue"; import PersonGroupDialog from "./PersonGroupDialog.vue";
import UploadGroupDataEditor from "./UploadGroupDataEditor.vue"; import PersonGroupMover from "./PersonGroupMover.vue";
import PersonGroupDialog from "./PersonGroupDialog.vue"; import AddPersonnelPool from "./AddPersonnelPool.vue";
import PersonGroupMover from "./PersonGroupMover.vue";
import AddPersonnelPool from "./AddPersonnelPool.vue"; export default {
components:{
export default { PersonGroupEditor,
components:{ UploadGroupDataEditor,
PersonGroupEditor, PersonGroupDialog,
UploadGroupDataEditor, PersonGroupMover,
PersonGroupDialog, AddPersonnelPool,
PersonGroupMover, // imgDialog
AddPersonnelPool, DetailDialog,
// imgDialog PersonnelDialog,
DetailDialog, DetailDialogComparison,
PersonnelDialog, singleImgComparisonDialog
DetailDialogComparison, },
singleImgComparisonDialog setup() {
}, // scalar
setup() { const pageNum = ref(1)
// scalar const pageSize = ref(10)
const pageNum = ref(1) const total = ref()
const pageSize = ref(10) const isLoading = ref(false)
const total = ref() const currobj = ref({})
const isLoading = ref(false) const currentItemId = ref()
const currobj = ref({}) // sequence
const currentItemId = ref() const dataList = ref([])
// sequence const accountList = ref([])
const dataList = ref([]) const plazaList = ref([])
const accountList = ref([]) const personTypeList = ref([])
const plazaList = ref([]) const zoneList = ref([])
const personTypeList = ref([]) const gateList = ref([])
const zoneList = ref([]) // const imgModelRef = ref();
const gateList = ref([]) const pagedTableDataList = computed(
// const imgModelRef = ref(); () => {
const pagedTableDataList = computed( return getPagedList(dataList.value, 8)
() => { }
return getPagedList(dataList.value, 8) )
} const DetailDialogRef = ref();
) const personnelDialogRef = ref();
const DetailDialogRef = ref(); const DetailDialogComparisonRef = ref();
const personnelDialogRef = ref(); const singleImgComparisonRef = ref()
const DetailDialogComparisonRef = ref(); const queryForm = reactive(
const singleImgComparisonRef = ref() {
const queryForm = reactive( account_id: '',
{ plaza_id: '',
account_id: '', zone_id: [],
plaza_id: '', gate_id: [],
zone_id: [], type: 0,
gate_id: [], direction: [1, -1, 0],
type: 0, picType: 2,
direction: [1, -1, 0], personType: [],
picType: 2, date: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'),
personType: [], startTime: '00:00:00',
date: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'), endTime: '23:59:59',
startTime: '00:00:00', minPic: 0,
endTime: '23:59:59', maxPic: 100,
minPic: 0, childAdult:[],
maxPic: 100, deviceSerialNum:'',
childAdult:[], }
deviceSerialNum:'', )
} const searchCondition = ref({})
) if(window.localStorage.getItem('searchCondition')){
const searchCondition = ref({}) searchCondition.value = JSON.parse(window.localStorage.getItem('searchCondition'));
if(window.localStorage.getItem('searchCondition')){ console.log(13,searchCondition.value)
searchCondition.value = JSON.parse(window.localStorage.getItem('searchCondition')); queryForm.type = searchCondition.value.type;
console.log(13,searchCondition.value) queryForm.zone_id = searchCondition.value.zone_id;
queryForm.type = searchCondition.value.type; queryForm.gate_id = searchCondition.value.gate_id;
queryForm.zone_id = searchCondition.value.zone_id; queryForm.direction = searchCondition.value.direction;
queryForm.gate_id = searchCondition.value.gate_id; queryForm.childAdult = searchCondition.value.childAdult;
queryForm.direction = searchCondition.value.direction; queryForm.picType = searchCondition.value.picType;
queryForm.childAdult = searchCondition.value.childAdult; queryForm.date = searchCondition.value.date;
queryForm.picType = searchCondition.value.picType; queryForm.startTime = searchCondition.value.startTime;
queryForm.date = searchCondition.value.date; queryForm.endTime = searchCondition.value.endTime;
queryForm.startTime = searchCondition.value.startTime; queryForm.minPic = searchCondition.value.minPic||0;
queryForm.endTime = searchCondition.value.endTime; queryForm.maxPic = searchCondition.value.maxPic||100;
queryForm.minPic = searchCondition.value.minPic||0; queryForm.deviceSerialNum = searchCondition.value.deviceSerialNum;
queryForm.maxPic = searchCondition.value.maxPic||100; }
queryForm.deviceSerialNum = searchCondition.value.deviceSerialNum; // function
} const onPageNumChange = function(num) {
// function pageNum.value = num
const onPageNumChange = function(num) { confirmSearch()
pageNum.value = num }
confirmSearch()
} const onPageSizeChange = function(current, size) {
pageNum.value = 1
const onPageSizeChange = function(current, size) { pageSize.value = size
pageNum.value = 1 confirmSearch()
pageSize.value = size }
confirmSearch()
} const onAccountChange = function() {
getPlazaList(1)
const onAccountChange = function() { // getZoneList()
getPlazaList(1) // getGateList()
// getZoneList() }
// getGateList()
} const onPlazaChange = function() {
reqPersonType()
const onPlazaChange = function() { getZoneList()
reqPersonType() getGateList()
getZoneList() }
getGateList()
} const onZoneChange = function() {
getGateList()
const onZoneChange = function() { }
getGateList()
} const getPlazaList = function(val) {
queryForm.plaza_id = ''
const getPlazaList = function(val) { plazaList.value = []
queryForm.plaza_id = '' clusterResultApi.getPlazaList(
plazaList.value = [] {
clusterResultApi.getPlazaList( account_id: queryForm.account_id
{ }
account_id: queryForm.account_id ).then(
} (r) => {
).then( if (isArray(r))
(r) => { {
if (isArray(r)) for (const item of r)
{ {
for (const item of r) plazaList.value.push(
{ {
plazaList.value.push( value: item.id,
{ label: item.name,
value: item.id, }
label: item.name, )
} }
) if(plazaList.value.length>0){
} if(!val&&searchCondition.value.plaza_id && searchCondition.value.plaza_id.length>0){
if(plazaList.value.length>0){ queryForm.plaza_id = searchCondition.value.plaza_id[0]
if(!val&&searchCondition.value.plaza_id && searchCondition.value.plaza_id.length>0){ }else{
queryForm.plaza_id = searchCondition.value.plaza_id[0] queryForm.plaza_id = plazaList.value[0].value
}else{ }
queryForm.plaza_id = plazaList.value[0].value reqPersonType(1)
} getZoneList(1)
reqPersonType(1) getGateList(1)
getZoneList(1) }
getGateList(1) }
} }
} )
} }
)
} const getZoneList = function(val) {
zoneList.value = []
const getZoneList = function(val) { clusterResultApi.getZoneList(
zoneList.value = [] {
clusterResultApi.getZoneList( account_id: queryForm.account_id,
{ plaza_id: queryForm.plaza_id,
account_id: queryForm.account_id, }
plaza_id: queryForm.plaza_id, ).then(
} (r) => {
).then( if (isArray(r))
(r) => { {
if (isArray(r)) for (const item of r)
{ {
for (const item of r) zoneList.value.push(
{ {
zoneList.value.push( value: item.id,
{ label: item.name,
value: item.id, }
label: item.name, )
} }
) if(zoneList.value.length){
} if(val&&searchCondition.value.zone_id && searchCondition.value.zone_id.length>0){
if(zoneList.value.length){ queryForm.zone_id = searchCondition.value.zone_id
if(val&&searchCondition.value.zone_id && searchCondition.value.zone_id.length>0){ }else{
queryForm.zone_id = searchCondition.value.zone_id queryForm.zone_id = []
}else{ }
queryForm.zone_id = [] }else{
} queryForm.zone_id = []
}else{ }
queryForm.zone_id = [] }
} }
} )
} }
)
} const getGateList = function(val) {
gateList.value = []
const getGateList = function(val) { clusterResultApi.getGateList(
gateList.value = [] {
clusterResultApi.getGateList( account_id: queryForm.account_id,
{ plaza_id: queryForm.plaza_id,
account_id: queryForm.account_id, zone_id: queryForm.zone_id?queryForm.zone_id.toString():'',
plaza_id: queryForm.plaza_id, type: queryForm.type,
zone_id: queryForm.zone_id?queryForm.zone_id.toString():'', }
type: queryForm.type, ).then(
} (r) => {
).then( if (isArray(r.data))
(r) => { {
if (isArray(r.data)) for (const item of r.data)
{ {
for (const item of r.data) gateList.value.push(
{ {
gateList.value.push( value: item.id,
{ label: item.name,
value: item.id, }
label: item.name, )
} }
) if(gateList.value.length){
} if(val&&searchCondition.value.gate_id && searchCondition.value.gate_id.length>0){
if(gateList.value.length){ queryForm.gate_id = searchCondition.value.gate_id
if(val&&searchCondition.value.gate_id && searchCondition.value.gate_id.length>0){ }else{
queryForm.gate_id = searchCondition.value.gate_id queryForm.gate_id = []
}else{ }
queryForm.gate_id = [] }else{
} queryForm.gate_id = []
}else{ }
queryForm.gate_id = [] }
} }
} )
} }
)
} const getAccountList = function() {
queryForm.account_id = ''
const getAccountList = function() { accountList.value = []
queryForm.account_id = '' clusterResultApi.getAccountList().then(
accountList.value = [] (r) => {
clusterResultApi.getAccountList().then( if (isArray(r))
(r) => { {
if (isArray(r)) for (const item of r)
{ {
for (const item of r) accountList.value.push(
{ {
accountList.value.push( value: item.id,
{ label: item.name,
value: item.id, }
label: item.name, )
} }
) if(accountList.value.length){
} if(searchCondition.value.account_id && searchCondition.value.account_id.length>0){
if(accountList.value.length){ queryForm.account_id = searchCondition.value.account_id[0]
if(searchCondition.value.account_id && searchCondition.value.account_id.length>0){ }else{
queryForm.account_id = searchCondition.value.account_id[0] queryForm.account_id = accountList.value[0].value
}else{ }
queryForm.account_id = accountList.value[0].value getPlazaList()
} }
getPlazaList() }
} }
} )
} }
) const clickSearch = function() {
} pageNum.value = 1
const clickSearch = function() { confirmSearch()
pageNum.value = 1 }
confirmSearch() const handleRefresh = function() {
} isMultipleOperation.value = false
const handleRefresh = function() { selectedPersonList.value = []
isMultipleOperation.value = false confirmSearch()
selectedPersonList.value = [] }
confirmSearch() const handleEditorRefresh = function() {
} isMultipleOperation.value = false
const handleEditorRefresh = function() { selectedPersonList.value = []
isMultipleOperation.value = false confirmSearch(1)
selectedPersonList.value = [] }
confirmSearch(1) const currentSearchCondition = ref()
} const confirmSearch = function(type) {
const currentSearchCondition = ref() isLoading.value = true
const confirmSearch = function(type) { const rawData = toRaw(queryForm)
isLoading.value = true const data = filterEmptyValueInObject(
const rawData = toRaw(queryForm) {
const data = filterEmptyValueInObject( account_id: rawData.account_id,
{ type: rawData.type,
account_id: rawData.account_id, plaza_id: rawData.plaza_id,
type: rawData.type, zone_id: rawData.zone_id?rawData.zone_id.toString():'',
plaza_id: rawData.plaza_id, gate_id: rawData.gate_id?rawData.gate_id.toString():'',
zone_id: rawData.zone_id?rawData.zone_id.toString():'', direction: rawData.direction?rawData.direction.toString():'',
gate_id: rawData.gate_id?rawData.gate_id.toString():'', picType: rawData.picType,
direction: rawData.direction?rawData.direction.toString():'', personType: rawData.personType?rawData.personType.toString():'',
picType: rawData.picType, startTime: formatDate(rawData.date) + ' ' + rawData.startTime,
personType: rawData.personType?rawData.personType.toString():'', endTime: formatDate(rawData.date) + ' ' + rawData.endTime,
startTime: formatDate(rawData.date) + ' ' + rawData.startTime, minPic: rawData.minPic,
endTime: formatDate(rawData.date) + ' ' + rawData.endTime, maxPic: rawData.maxPic,
minPic: rawData.minPic, page: pageNum.value - 1,
maxPic: rawData.maxPic, pageSize: pageSize.value,
page: pageNum.value - 1, // childAdult: rawData.childAdult?rawData.childAdult.toString():'',
pageSize: pageSize.value, // 查询条件
// childAdult: rawData.childAdult?rawData.childAdult.toString():'', age: rawData.childAdult?rawData.childAdult.toString():'',
// 查询条件 personUnid: rawData.personUnid,
age: rawData.childAdult?rawData.childAdult.toString():'', deviceSerialNum: rawData.deviceSerialNum,
personUnid: rawData.personUnid, }
deviceSerialNum: rawData.deviceSerialNum, )
} const storageData = filterEmptyValueInObject(
) {
const storageData = filterEmptyValueInObject( account_id: [rawData.account_id],
{ type: rawData.type,
account_id: [rawData.account_id], plaza_id: [rawData.plaza_id],
type: rawData.type, zone_id: rawData.zone_id,
plaza_id: [rawData.plaza_id], gate_id: rawData.gate_id,
zone_id: rawData.zone_id, direction: rawData.direction,
gate_id: rawData.gate_id, picType: rawData.picType,
direction: rawData.direction, personType: rawData.personType,
picType: rawData.picType, childAdult: rawData.childAdult,
personType: rawData.personType, date: rawData.date,
childAdult: rawData.childAdult, minPic: rawData.minPic,
date: rawData.date, maxPic: rawData.maxPic,
minPic: rawData.minPic, startTime: rawData.startTime,
maxPic: rawData.maxPic, endTime: rawData.endTime,
startTime: rawData.startTime, deviceSerialNum: rawData.deviceSerialNum,
endTime: rawData.endTime, }
deviceSerialNum: rawData.deviceSerialNum, )
} let searchCondition = JSON.parse(window.localStorage.getItem('searchCondition'));
) let newSearchCondition = {
let searchCondition = JSON.parse(window.localStorage.getItem('searchCondition')); ...searchCondition,
let newSearchCondition = { ...storageData
...searchCondition, }
...storageData window.localStorage.setItem('searchCondition',JSON.stringify(newSearchCondition))
} clusterResultApi.getClusterResultList(data).then(
window.localStorage.setItem('searchCondition',JSON.stringify(newSearchCondition)) (r) => {
clusterResultApi.getClusterResultList(data).then( isLoading.value = false
(r) => { sortDataList(r.data.persons)
isLoading.value = false r.data.persons.forEach((itemPerson)=>{
sortDataList(r.data.persons) itemPerson.checked = false
r.data.persons.forEach((itemPerson)=>{ itemPerson.expand = false
itemPerson.checked = false itemPerson.perrsonList.forEach((item)=>{
itemPerson.expand = false if (item.features_url) {
itemPerson.perrsonList.forEach((item)=>{ item.features_url = window._baseImgUrl + item.features_url
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.picture_url) { }
item.picture_url = window._baseImgUrl + item.picture_url if (item.eventPic) { item.eventPic = window._baseImgUrl + item.eventPic }
} if (item.track_url) {
if (item.track_url) { item.track_url = window._baseImgUrl + item.track_url
item.track_url = window._baseImgUrl + item.track_url }
} })
}) })
}) dataList.value = r.data.persons
dataList.value = r.data.persons total.value = r.data.pageNum
total.value = r.data.pageNum if(!type) {
if(!type) { document.getElementsByClassName('resultContent')[0].scrollTop = 0
document.getElementsByClassName('resultContent')[0].scrollTop = 0 }
} currentSearchCondition.value = data
currentSearchCondition.value = data }
} )
) }
} const personTypeStr = function(val){
const personTypeStr = function(val){ return (personTypeList.value.filter(v => v.value == val)[0] || {label:'--'}).label
return (personTypeList.value.filter(v => v.value == val)[0] || {label:'--'}).label }
} const childAdultAgeOptions = ref([
const childAdultAgeOptions = ref([ { value: 0, label: '婴儿' },
{ value: 0, label: '婴儿' }, { value: 1, label: '儿童' },
{ value: 1, label: '儿童' }, { value: 2, label: '少年' },
{ value: 2, label: '少年' }, { value: 3, label: '青年' },
{ value: 3, label: '青年' }, { value: 4, label: '中年' },
{ value: 4, label: '中年' }, { value: 5, label: '老年' },
{ value: 5, label: '老年' }, { value: -1, label: '未知' },
{ value: -1, label: '未知' }, ])
]) const childAdultOptions = ref([
const childAdultOptions = ref([ { value: 0, label: '儿童' },
{ value: 0, label: '儿童' }, { value: 1, label: '成人' },
{ value: 1, label: '成人' }, { value: -1, label: '未知' },
{ value: -1, label: '未知' }, ])
]) const formatChildAdult = function(val) {
const formatChildAdult = function(val) { const targetitem = childAdultOptions.value.find(item => item.value === val)
const targetitem = childAdultOptions.value.find(item => item.value === val) if (targetitem) return targetitem.label
if (targetitem) return targetitem.label else return '未知'
else return '未知' }
} const formatGender = function(number){
const formatGender = function(number){ switch (number)
switch (number) {
{ case 1:
case 1: {
{ return '男'
return '男' }
} case -1:
case -1: {
{ return '未知'
return '未知' }
} case 0:
case 0: {
{ return '女'
return '女' }
} default:
default: {
{
break
break }
} }
} }
} const formatDirection = function(number) {
const formatDirection = function(number) { switch (number)
switch (number) {
{ case 1:
case 1: {
{ return '进'
return '进' }
} case -1:
case -1: {
{ return '出'
return '出' }
} case 9:
case 9: {
{ return '收银'
return '收银' }
} case 2:
case 2: {
{ return '过店'
return '过店' }
} case 0:
case 0: {
{ return '横穿'
return '横穿' }
} default:
default: {
{
break
break }
} }
} }
} 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 reqPersonType = (val) => {
const reqPersonType = (val) => { personTypeList.value = []
personTypeList.value = [] clusterResultApi.getPersonType({plaza_id:queryForm.plaza_id}).then(
clusterResultApi.getPersonType({plaza_id:queryForm.plaza_id}).then( (r) => {
(r) => { console.log(1122,r)
console.log(1122,r) if (isArray(r)) {
if (isArray(r)) { let personType = []
let personType = [] for (const item of r){
for (const item of r){ personType.push(item.id)
personType.push(item.id) personTypeList.value.push({
personTypeList.value.push({ value: item.id,
value: item.id, label: item.name,
label: item.name, })
}) }
} if(personTypeList.value.length>0){
if(personTypeList.value.length>0){ queryForm.personType = personType
queryForm.personType = personType }
} }
} if(val) {
if(val) { confirmSearch()
confirmSearch() }
} }
} )
) };
};
// 人员类型修正
// 人员类型修正 const personGroupEditorRef = ref();
const personGroupEditorRef = ref(); // const isShowGroupEditor = ref(false)
// const isShowGroupEditor = ref(false) const updatePersonInfoByGroup = function() {
const updatePersonInfoByGroup = function() { let par = {
let par = { person_unids:[],
person_unids:[], perrsonList:[],
perrsonList:[], personTypeList:personTypeList.value
personTypeList:personTypeList.value }
} dataList.value.forEach(item=>{
dataList.value.forEach(item=>{ if (item.checked && item.checked == true) {
if (item.checked && item.checked == true) { par.person_unids.push(item.person_unid)
par.person_unids.push(item.person_unid) par.perrsonList = (par.perrsonList.length==0&&item.perrsonList.length > 0)?item.perrsonList:par.perrsonList;
par.perrsonList = (par.perrsonList.length==0&&item.perrsonList.length > 0)?item.perrsonList:par.perrsonList; }
} })
}) console.log('updatePersonInfoByGroup', par)
console.log('updatePersonInfoByGroup', par) if(par.person_unids.length>0) {
if(par.person_unids.length>0) { personGroupEditorRef.value.initDialog(par);
personGroupEditorRef.value.initDialog(par); }else{
}else{ ElMessage(
ElMessage( {
{ message: `请选择聚类图片`,
message: `请选择聚类图片`, type: 'warning'
type: 'warning' }
} )
) return
return }
} }
}
// 上传数据
// 上传数据 const uploadGroupDataEditorRef = ref();
const uploadGroupDataEditorRef = ref(); const uploadGroupData = function(data) {
const uploadGroupData = function(data) { let par = {
let par = { personUnid:data.person_unid,
personUnid:data.person_unid, countdate: moment(this.queryForm.date).format('YYYY-MM-DD'),
countdate: moment(this.queryForm.date).format('YYYY-MM-DD'), }
} uploadGroupDataEditorRef.value.initDialog(par);
uploadGroupDataEditorRef.value.initDialog(par); }
} // 批量操作
// 批量操作 const isMultipleOperation = ref(false)
const isMultipleOperation = ref(false) const handleMutipleOperation = () => {
const handleMutipleOperation = () => { // 在当前组操作，批量按钮
// 在当前组操作，批量按钮 if (isMultipleOperation.value) {
if (isMultipleOperation.value) { // 已经是多选状态
// 已经是多选状态 isMultipleOperation.value = false
isMultipleOperation.value = false selectedPersonList.value = []
selectedPersonList.value = [] } else {
} else { // 非多选状态
// 非多选状态 isMultipleOperation.value = true
isMultipleOperation.value = true }
} }
} const mutipleOperationText = computed(() => {
const mutipleOperationText = computed(() => { if (isMultipleOperation.value) {
if (isMultipleOperation.value) { return '取消操作'
return '取消操作' } else {
} else { return '批量操作'
return '批量操作' }
} })
}) // 切换图片显示类型 const toggleImageDisplayType = function(person){ person.imageDisplayType = !person.imageDisplayType }
const isSelectedPerson = (id) => { const isSelectedPerson = (id) => {
return selectedPersonList.value.some(item => item.id === id) return selectedPersonList.value.some(item => item.id === id)
} }
// 剔除人员 // 剔除人员
const selectedPersonList = ref([]) // 批量操作，选中的图片 const selectedPersonList = ref([]) // 批量操作，选中的图片
const deletePersonRecord = () => { const deletePersonRecord = () => {
console.log('deletePersonRecord', selectedPersonList) console.log('deletePersonRecord', selectedPersonList)
if (selectedPersonList.value.length < 1) { if (selectedPersonList.value.length < 1) {
ElMessage({ ElMessage({
message: `至少选择一条数据`, message: `至少选择一条数据`,
type: 'error' type: 'error'
}) })
return return
} }
const unidList = selectedPersonList.value.map(item => item.unid) const unidList = selectedPersonList.value.map(item => item.unid)
const params = { const params = {
unid: unidList.join(','), unid: unidList.join(','),
personUnid: '', personUnid: '',
countdate: selectedPersonList.value[0].counttime countdate: selectedPersonList.value[0].counttime
} }
clusterResultApi.updateRecognition(params).then( clusterResultApi.updateRecognition(params).then(
(r) => { (r) => {
if(r.msg_code==200){ if(r.msg_code==200){
ElMessage({ ElMessage({
message: `剔除成功`, message: `剔除成功`,
type: 'success' type: 'success'
}) })
selectedPersonList.value = [] selectedPersonList.value = []
// 刷新列表 // 刷新列表
handleRefresh() handleRefresh()
} else { } else {
ElMessage({ ElMessage({
message: `剔除失败`, message: `剔除失败`,
type: 'error' type: 'error'
}) })
} }
} }
) )
} }
// 删除人员 // 删除人员
const deleteRealPersonRecord = () => { const deleteRealPersonRecord = () => {
console.log('deletePersonRecord', selectedPersonList) console.log('deletePersonRecord', selectedPersonList)
if (selectedPersonList.value.length < 1) { if (selectedPersonList.value.length < 1) {
ElMessage({ ElMessage({
message: `至少选择一条数据`, message: `至少选择一条数据`,
type: 'error' type: 'error'
}) })
return return
} }
const strIdList = selectedPersonList.value.map(item => item.id).join(',') const strIdList = selectedPersonList.value.map(item => item.id).join(',')
const params = { const params = {
id: strIdList, id: strIdList,
} }
clusterResultApi.deleteRecognition(params).then( clusterResultApi.deleteRecognition(params).then(
(r) => { (r) => {
if(r.msg_code==200){ if(r.msg_code==200){
ElMessage({ ElMessage({
message: `删除成功`, message: `删除成功`,
type: 'success' type: 'success'
}) })
selectedPersonList.value = [] selectedPersonList.value = []
// 刷新列表 // 刷新列表
handleRefresh() handleRefresh()
} else { } else {
ElMessage({ ElMessage({
message: `删除失败`, message: `删除失败`,
type: 'error' type: 'error'
}) })
} }
} }
) )
} }
// 添加店员库 // 添加店员库
const addShopkeeper = () => { const addShopkeeper = () => {
console.log('addShopkeeper', selectedPersonList) console.log('addShopkeeper', selectedPersonList)
if (selectedPersonList.value.length < 1) { if (selectedPersonList.value.length < 1) {
ElMessage({ ElMessage({
message: `至少选择一条数据`, message: `至少选择一条数据`,
type: 'error' type: 'error'
}) })
return return
} }
const strIdList = selectedPersonList.value.map(item => item.unid) const strIdList = selectedPersonList.value.map(item => item.unid)
const rawData = toRaw(queryForm) const rawData = toRaw(queryForm)
const params = { const params = {
unids: strIdList, unids: strIdList,
mallId:selectedPersonList.value[0].mall_id, mallId:selectedPersonList.value[0].mall_id,
countdate:formatDate(rawData.date) + ' 00:00:00', countdate:formatDate(rawData.date) + ' 00:00:00',
} }
clusterResultApi.addDataToShopkeeper(params).then( clusterResultApi.addDataToShopkeeper(params).then(
(r) => { (r) => {
if(r.msg_code==200){ if(r.msg_code==200){
ElMessage({ ElMessage({
message: `添加成功`, message: `添加成功`,
type: 'success' type: 'success'
}) })
selectedPersonList.value = [] selectedPersonList.value = []
// 刷新列表 // 刷新列表
handleRefresh() handleRefresh()
} else { } else {
ElMessage({ ElMessage({
message: `添加失败`, message: `添加失败`,
type: 'error' type: 'error'
}) })
} }
} }
) )
} }
// 添加人员库 // 添加人员库
const personnelPoolRef = ref(); const personnelPoolRef = ref();
const addPersonnelPool = () => { const addPersonnelPool = () => {
console.log('addPersonnelPool') console.log('addPersonnelPool')
if (selectedPersonList.value.length < 1) { if (selectedPersonList.value.length < 1) {
ElMessage({ ElMessage({
message: `至少选择一条数据`, message: `至少选择一条数据`,
type: 'error' type: 'error'
}) })
return return
} }
personnelPoolRef.value.initDialog(selectedPersonList.value); personnelPoolRef.value.initDialog(selectedPersonList.value);
} }
// 移动人员 // 移动人员
const personGroupMoverRef = ref(); const personGroupMoverRef = ref();
const movePersonRecord = () => { const movePersonRecord = () => {
console.log('movePersonRecord') console.log('movePersonRecord')
if (selectedPersonList.value.length < 1) { if (selectedPersonList.value.length < 1) {
ElMessage({ ElMessage({
message: `至少选择一条数据`, message: `至少选择一条数据`,
type: 'error' type: 'error'
}) })
return return
} }
personGroupMoverRef.value.initDialog(selectedPersonList.value); personGroupMoverRef.value.initDialog(selectedPersonList.value);
} }
// 查询组 // 查询组
const personGroupDialogRef = ref(); const personGroupDialogRef = ref();
const searchPersonInfoByGroup = function(data) { const searchPersonInfoByGroup = function(data) {
console.log('searchPersonInfoByGroup', data) console.log('searchPersonInfoByGroup', data)
/* let parmas = { /* let parmas = {
// person_unid: currobj.value.person_unid, // person_unid: currobj.value.person_unid,
pic_type: data.picType, pic_type: data.picType,
endTime:formatDate(rawData.date) + ' ' + rawData.endTime, endTime:formatDate(rawData.date) + ' ' + rawData.endTime,
startTime:formatDate(rawData.date) + ' ' + rawData.startTime, 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,
plaza_id:currobj.value.mall_id plaza_id:currobj.value.mall_id
} */ } */
// singleImgComparisonRef.value.initDialog(parmas); // singleImgComparisonRef.value.initDialog(parmas);
personGroupDialogRef.value.initDialog(data); personGroupDialogRef.value.initDialog(data);
} }
const downloadFile = function(url) { const downloadFile = function(url) {
window.open(url) window.open(url)
} }
const downloadTrajectoryFile = function(url){ const downloadTrajectoryFile = function(url){
window.open(url) window.open(url)
} }
const handleClick = function(data, event){ const handleClick = function(data, event){
console.log('handleClick', data, event) console.log('handleClick', data, event)
// 多选。只有设置为多选状态的组，才可以选中 // 多选。只有设置为多选状态的组，才可以选中
if (isMultipleOperation.value) { if (isMultipleOperation.value) {
// 如果已选中，则取消。若未选中，则增加 // 如果已选中，则取消。若未选中，则增加
const isExist = selectedPersonList.value.find(item => item.id === data.id) const isExist = selectedPersonList.value.find(item => item.id === data.id)
if (isExist) { if (isExist) {
selectedPersonList.value = selectedPersonList.value.filter(item => item.id !== data.id) selectedPersonList.value = selectedPersonList.value.filter(item => item.id !== data.id)
} else { } else {
selectedPersonList.value.push(data) selectedPersonList.value.push(data)
} }
} else { } else {
currentItemId.value = data.id currentItemId.value = data.id
currobj.value = data; currobj.value = data;
// 清空多选 // 清空多选
selectedPersonList.value = [] selectedPersonList.value = []
} }
} }
const checkChange = function(data){ const checkChange = function(data){
console.log(data) console.log(data)
} }
const expandChange = function(data){ const expandChange = function(data){
dataList.value.forEach(item=>{ dataList.value.forEach(item=>{
if (data.person_unid == item.person_unid) { if (data.person_unid == item.person_unid) {
item.expand = !item.expand item.expand = !item.expand
} }
}) })
} }
// 特征对比 // 特征对比
const comparativeFun = function(){ const comparativeFun = function(){
const rawData = toRaw(queryForm) const rawData = toRaw(queryForm)
if(!currobj.value.id){ if(!currobj.value.id){
ElMessage( ElMessage(
{ {
message: `请选择图片`, message: `请选择图片`,
type: 'warning' type: 'warning'
} }
) )
return return
} }
if(!currobj.value.picture_url){ if(!currobj.value.picture_url){
ElMessage( ElMessage(
{ {
message: `该图片没有特征，请选择有效的图片`, message: `该图片没有特征，请选择有效的图片`,
type: 'warning' type: 'warning'
} }
) )
return return
} }
let parmas = { let parmas = {
mall_id:currobj.value.mall_id, mall_id:currobj.value.mall_id,
picType:rawData.picType, picType:rawData.picType,
pic_id:currobj.value.id, pic_id:currobj.value.id,
countdate:formatDate(rawData.date), countdate:formatDate(rawData.date),
dataList:[] dataList:[]
} }
dataList.value.forEach(item=>{ dataList.value.forEach(item=>{
if (item.checked && item.checked == true) { if (item.checked && item.checked == true) {
parmas.dataList.push(item) parmas.dataList.push(item)
} }
}) })
if(parmas.dataList && parmas.dataList.length > 0){ if(parmas.dataList && parmas.dataList.length > 0){
DetailDialogComparisonRef.value.initDialog(currobj.value,parmas); DetailDialogComparisonRef.value.initDialog(currobj.value,parmas);
}else{ }else{
ElMessage( ElMessage(
{ {
message: `请选择聚类图片`, message: `请选择聚类图片`,
type: 'warning' type: 'warning'
} }
) )
return return
} }
} }
//单张特征对比 //单张特征对比
const singleComparativeFun = function(){ const singleComparativeFun = function(){
if(!currobj.value.id){ if(!currobj.value.id){
ElMessage( ElMessage(
{ {
message: `请选择图片`, message: `请选择图片`,
type: 'warning' type: 'warning'
} }
) )
return return
} }
if(!currobj.value.picture_url){ if(!currobj.value.picture_url){
ElMessage( ElMessage(
{ {
message: `该图片没有特征，请选择有效的图片`, message: `该图片没有特征，请选择有效的图片`,
type: 'warning' type: 'warning'
} }
) )
return return
} }
const rawData = toRaw(queryForm) const rawData = toRaw(queryForm)
console.log(queryForm) console.log(queryForm)
console.log(rawData) 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, endTime:formatDate(rawData.date) + ' ' + rawData.endTime,
startTime:formatDate(rawData.date) + ' ' + rawData.startTime, 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,
plaza_id:currobj.value.mall_id plaza_id:currobj.value.mall_id
} }
singleImgComparisonRef.value.initDialog(parmas); singleImgComparisonRef.value.initDialog(parmas);
} }
// 店员特征对比 // 店员特征对比
const clerkComparativeFun = function(){ const clerkComparativeFun = function(){
const rawData = toRaw(queryForm) const rawData = toRaw(queryForm)
if(!currobj.value.id){ if(!currobj.value.id){
ElMessage( ElMessage(
{ {
message: `请选择图片进行对比`, message: `请选择图片进行对比`,
type: 'warning' type: 'warning'
} }
) )
return return
} }
if(!currobj.value.picture_url){ if(!currobj.value.picture_url){
ElMessage( ElMessage(
{ {
message: `该图片没有特征，请选择有效的图片`, message: `该图片没有特征，请选择有效的图片`,
type: 'warning' type: 'warning'
} }
) )
return return
} }
let parmas = { let parmas = {
plaza_id:currobj.value.mall_id, plaza_id:currobj.value.mall_id,
pic_type:rawData.picType, pic_type:rawData.picType,
pic_id:currobj.value.id, pic_id:currobj.value.id,
ip:window._baseImgUrl, ip:window._baseImgUrl,
countdate:formatDate(rawData.date) countdate:formatDate(rawData.date)
} }
DetailDialogRef.value.initDialog(currobj.value,parmas); DetailDialogRef.value.initDialog(currobj.value,parmas);
} }
// 人员特征对比 // 人员特征对比
const personnelComparativeFun = function(){ const personnelComparativeFun = function(){
const rawData = toRaw(queryForm) const rawData = toRaw(queryForm)
if(!currobj.value.id){ if(!currobj.value.id){
ElMessage( ElMessage(
{ {
message: `请选择图片进行对比`, message: `请选择图片进行对比`,
type: 'warning' type: 'warning'
} }
) )
return return
} }
if(!currobj.value.picture_url){ if(!currobj.value.picture_url){
ElMessage( ElMessage(
{ {
message: `该图片没有特征，请选择有效的图片`, message: `该图片没有特征，请选择有效的图片`,
type: 'warning' type: 'warning'
} }
) )
return return
} }
let parmas = { let parmas = {
plaza_id:currobj.value.mall_id, plaza_id:currobj.value.mall_id,
pic_type:rawData.picType, pic_type:rawData.picType,
pic_id:currobj.value.id, pic_id:currobj.value.id,
ip:window._baseImgUrl, ip:window._baseImgUrl,
countdate:formatDate(rawData.date) countdate:formatDate(rawData.date)
} }
personnelDialogRef.value.initDialog(currobj.value,parmas); personnelDialogRef.value.initDialog(currobj.value,parmas);
} }
const contentHeight = ref(0) const contentHeight = ref(0)
const __main = function() { const __main = function() {
getAccountList() getAccountList()
contentHeight.value = window.innerHeight - 280 contentHeight.value = window.innerHeight - 280
} }
__main() __main()
return { return {
// scalar // scalar
isLoading, isLoading,
pageNum, pageNum,
pageSize, pageSize,
total, total,
currentItemId, currentItemId,
currobj, currobj,
// sequence // sequence
accountList, accountList,
plazaList, plazaList,
personTypeList, personTypeList,
zoneList, zoneList,
gateList, gateList,
pagedTableDataList, pagedTableDataList,
dataList, dataList,
contentHeight, contentHeight,
// mapping // mapping
queryForm, queryForm,
// function // function
onPageNumChange, onPageNumChange,
onPageSizeChange, onPageSizeChange,
onAccountChange, onAccountChange,
onPlazaChange, onPlazaChange,
onZoneChange, onZoneChange,
confirmSearch, confirmSearch,
formatDirection, formatDirection,
downloadFile, downloadFile,
getPagedList, getPagedList,
handleClick, handleClick,
comparativeFun, comparativeFun,
checkChange, checkChange,
expandChange, expandChange,
updatePersonInfoByGroup, updatePersonInfoByGroup,
uploadGroupData, toggleImageDisplayType,
deletePersonRecord, uploadGroupData,
addPersonnelPool, deletePersonRecord,
movePersonRecord, addPersonnelPool,
searchPersonInfoByGroup, movePersonRecord,
isSelectedPerson, searchPersonInfoByGroup,
selectedPersonList, isSelectedPerson,
clerkComparativeFun, selectedPersonList,
personnelComparativeFun, clerkComparativeFun,
singleComparativeFun, personnelComparativeFun,
personTypeStr, singleComparativeFun,
formatGender, personTypeStr,
downloadTrajectoryFile, formatGender,
clickSearch, downloadTrajectoryFile,
handleRefresh, clickSearch,
handleEditorRefresh, handleRefresh,
currentSearchCondition, handleEditorRefresh,
// ref currentSearchCondition,
// imgModelRef, // ref
DetailDialogRef, // imgModelRef,
personnelDialogRef, DetailDialogRef,
personGroupDialogRef, personnelDialogRef,
personGroupEditorRef, personGroupDialogRef,
uploadGroupDataEditorRef, personGroupEditorRef,
DetailDialogComparisonRef, uploadGroupDataEditorRef,
singleImgComparisonRef, DetailDialogComparisonRef,
personGroupMoverRef, singleImgComparisonRef,
personnelPoolRef, personGroupMoverRef,
reqPersonType, personnelPoolRef,
reqPersonType,
isMultipleOperation,
handleMutipleOperation, isMultipleOperation,
mutipleOperationText, handleMutipleOperation,
deleteRealPersonRecord, mutipleOperationText,
addShopkeeper, deleteRealPersonRecord,
childAdultAgeOptions, addShopkeeper,
childAdultOptions, childAdultAgeOptions,
formatChildAdult childAdultOptions,
} formatChildAdult
} }
} }
</script> }
</script>
<style lang="less" scoped>
@import "./ClusterResult"; <style lang="less" scoped>
.actived{ @import "./ClusterResult";
border: 3px solid #1890ff; .actived{
} border: 3px solid #1890ff;
.actived-red { }
border: 3px solid red; .actived-red {
} border: 3px solid red;
.checkBox{ }
margin-left: 10px; .checkBox{
} margin-left: 10px;
.boxInfo{ }
line-height: 28px; .boxInfo{
margin-bottom: 10px; line-height: 28px;
} margin-bottom: 10px;
.classBox{ }
margin: 10px 0; .classBox{
border: solid 1px black; margin: 10px 0;
height: 485px; border: solid 1px black;
overflow-y: hidden; height: 485px;
} overflow-y: hidden;
.expand{ }
height: auto; .expand{
overflow: auto; height: auto;
} overflow: auto;
.expandWord{ }
color: #1890ff; .expandWord{
margin-right: 5px; color: #1890ff;
cursor: pointer; margin-right: 5px;
float: right; cursor: pointer;
} float: right;
.iconExpand{ }
cursor: pointer; .iconExpand{
float: right; cursor: pointer;
color: #1890ff; float: right;
margin-right: 20px; color: #1890ff;
} margin-right: 20px;
.checked{ }
background-color: #bbb; .checked{
} background-color: #bbb;
.resultContent{ }
overflow: auto; .resultContent{
min-height: 500px; overflow: auto;
} min-height: 500px;
.downBtn{ }
color: #409EFF; .downBtn{
font-size: 15px; color: #409EFF;
cursor: pointer; font-size: 15px;
display: inline-block; cursor: pointer;
width: auto; display: inline-block;
} width: auto;
.downBtn1{ }
float: right; .downBtn1{
} float: right;
.multiple-operation { }
display: inline-block; .multiple-operation {
margin-left: 20px; display: inline-block;
} margin-left: 20px;
}
</style>
<style type="text/css"> </style>
.label-width-wu .ant-form-item-label{ <style type="text/css">
width: 84px!important; .label-width-wu .ant-form-item-label{
} width: 84px!important;
</style> }
</style>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!