ClusterResult.vue

<template>
    <div class="containter">
        <a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '70px' } }">
            <a-form-item label="集团：" style="padding: 5px 0">
                <a-select v-model:value="queryForm.account_id"
                          style="width: 240px"
                          mode="multiple"
                          :maxTagCount="1"
                          @change="onAccountChange"
                          :options="accountList"
                          optionFilterProp="label"
                          show-search
                >
                </a-select>
            </a-form-item>
            <a-form-item label="广场：" style="padding: 5px 0">
                <a-select v-model:value="queryForm.plaza_id"
                          style="width: 240px"
                          mode="multiple"
                          :maxTagCount="1"
                          @change="onPlazaChange"
                          :options="plazaList"
                          optionFilterProp="label"
                          show-search
                >
                </a-select>
            </a-form-item>
            <a-form-item label="出入类型：" style="padding: 5px 0">
                <a-select v-model:value="queryForm.type" style="width: 240px">
                    <a-select-option :value="0">全场</a-select-option>
                    <a-select-option :value="1">广场出入口</a-select-option>
                    <a-select-option :value="2">楼层出入口</a-select-option>
                    <a-select-option :value="3">店铺出入口</a-select-option>
                    <a-select-option :value="4">其他</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="区域信息：" style="padding: 5px 0">
                <a-select v-model:value="queryForm.zone_id"
                          style="width: 240px"
                          mode="multiple"
                          :maxTagCount="1"
                          @change="onZoneChange"
                          :options="zoneList"
                          optionFilterProp="label"
                          show-search
                >
                </a-select>
            </a-form-item>
            <a-form-item label="监控点：" style="padding: 5px 0">
                <a-select v-model:value="queryForm.gate_id"
                          style="width: 240px"
                          mode="multiple"
                          :maxTagCount="1"
                          :options="gateList"
                          optionFilterProp="label"
                          show-search
                >

                </a-select>
            </a-form-item>
            <a-form-item label="方向：" style="padding: 5px 0">
                <a-select v-model:value="queryForm.direction"
                          mode="multiple"
                          :maxTagCount="1"
                          style="width: 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="2">过店</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="抓拍类型：" style="padding: 5px 0">
                <a-select v-model:value="queryForm.picType" style="width: 240px">
                    <a-select-option :value="1">半身照</a-select-option>
                    <a-select-option :value="2">全身照</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="人员类型：" style="padding: 5px 0">
                <a-select v-model:value="queryForm.personType"
                          mode="multiple"
                          :maxTagCount="1"
                          style="width: 240px">
                    <a-select-option :value="1">店员</a-select-option>
                    <a-select-option :value="0">顾客</a-select-option>
                    <a-select-option :value="-99">未知</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="年龄类型：" style="padding: 5px 0">
                <a-select v-model:value="queryForm.childAdult"
                          mode="multiple"
                          :maxTagCount="1"
                          style="width: 240px">
                    <a-select-option :value="1">成人</a-select-option>
                    <a-select-option :value="0">儿童</a-select-option>
                    <a-select-option :value="-1">未知</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="选择日期：" style="padding: 5px 0">
                <a-date-picker v-model:value="queryForm.date" :format="'YYYY-MM-DD'" style="width: 240px"/>
            </a-form-item>
            <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.endTime" style="width: 140px"/>
            </a-form-item>
            <a-form-item label="图片数量：" style="padding: 5px 0">
                <a-input v-model:value="queryForm.minPic" style="width: 129px"/>
                至
                <a-input v-model:value="queryForm.maxPic" style="width: 129px"/>
            </a-form-item>
            <a-form-item style="padding: 5px 0">
                <a-button type="primary" @click="clickSearch" :loading="isLoading">查询</a-button>
            </a-form-item>
        	<a-form-item style="padding: 5px 0">
        			<a-button type="primary" @click="comparativeFun">特征对比</a-button>
        	</a-form-item>
        	<a-form-item style="padding: 5px 0">
        			<a-button type="primary" @click="singleComparativeFun">单张特征对比</a-button>
        	</a-form-item>
        	<a-form-item style="padding: 5px 0">
        			<a-button type="primary" @click="clerkComparativeFun">店员特征对比</a-button>
        	</a-form-item>
        </a-form>

        <div v-loading="isLoading">
            <div class="resultContent" :style="{'height':contentHeight+'px'}">
                <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>
                                <!--修正组类型数据-->
                                <a-popconfirm
                                    title="将从本组中剔除，您确认吗？"
                                    ok-text="是"
                                    cancel-text="否"
                                    @confirm="deletePersonRecord(person)"
                                >
                                  <a-tooltip placement="bottom">
                                    <template #title>按住cmd或alt键可多选</template>
                                    <span class="expandWord">剔除</span>
                                  </a-tooltip>
                                </a-popconfirm>
                                <a-tooltip placement="bottom">
                                  <template #title>按住cmd或alt键可多选</template>
                                  <span class="expandWord" @click="movePersonRecord(person)">移动</span>
                                </a-tooltip>
                                <span class="expandWord" @click='updatePersonInfoByGroup(person)'>类型修正</span>
                                <span class="expandWord" @click='searchPersonInfoByGroup(person)'>搜索</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"
                                        :class="[(currentItemId==item.id)?'actived':'', isSelectedPerson(item.id)?'actived-red':'']"
                                        @click="handleClick(item, $event)"
                                    >
                                        <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>
            <a-pagination
                v-model:current="pageNum"
                v-model:pageSize="pageSize"
                :total="total"
                :show-total="total => `共 ${total} 条`"
                :pageSizeOptions="['10', '20', '40', '80']"
                @change="onPageNumChange"
                @showSizeChange="onPageSizeChange"
                show-size-changer
                show-quick-jumper
                style="text-align:center;margin-top: 10px;"
            />
        </div>
    </div>
    <!-- <imgDialog ref='imgModelRef'></imgDialog> -->
	<DetailDialog ref="DetailDialogRef" />
	<DetailDialogComparison ref="DetailDialogComparisonRef" />
	<singleImgComparisonDialog ref="singleImgComparisonRef"></singleImgComparisonDialog>

  <PersonGroupEditor ref='personGroupEditorRef' @refresh="handleRefresh" />
  <PersonGroupMover ref='personGroupMoverRef' :data-list="dataList" @refresh="handleRefresh" />
  <PersonGroupDialog ref='personGroupDialogRef' :query-form="queryForm" @refresh="handleRefresh" />
</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 imgDialog from '../imgDialog.vue'
import {ElMessage} from 'element-plus'
import DetailDialog from "../../ComparisonCapturedPictures/DetailDialog.vue";
import DetailDialogComparison from "../../ComparisonCapturedPictures/DetailDialogComparisonNew.vue";
import singleImgComparisonDialog from "../singleImgComparisonDialog.vue";
import PersonGroupEditor from "./PersonGroupEditor.vue";
import PersonGroupDialog from "./PersonGroupDialog.vue";
import PersonGroupMover from "./PersonGroupMover.vue";

export default {
    components:{
      PersonGroupEditor,
      PersonGroupDialog,
      PersonGroupMover,
      // imgDialog
		DetailDialog,
		DetailDialogComparison,
		singleImgComparisonDialog
    },
    setup() {
        // 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 DetailDialogRef = ref();
		const DetailDialogComparisonRef = ref();
		const singleImgComparisonRef = 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: '00:00:00',
                endTime: '23:59:59',
                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.childAdult = searchCondition.value.childAdult;
            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?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?queryForm.account_id.toString():'',
                    plaza_id: queryForm.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?queryForm.account_id.toString():'',
                    plaza_id: queryForm.plaza_id?queryForm.plaza_id.toString():'',
                    zone_id: queryForm.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 handleRefresh = function() {
      selectedPersonList.value = []
      confirmSearch()
    }
        const confirmSearch = function() {
            isLoading.value = true
            const rawData = toRaw(queryForm)
            const data = filterEmptyValueInObject(
                {
                    account_id: rawData.account_id?rawData.account_id.toString():'',
                    type: rawData.type,
                    plaza_id: rawData.plaza_id?rawData.plaza_id.toString():'',
                    zone_id: rawData.zone_id?rawData.zone_id.toString():'',
                    gate_id: rawData.gate_id?rawData.gate_id.toString():'',
                    direction: rawData.direction?rawData.direction.toString():'',
                    picType: rawData.picType,
                    personType: rawData.personType?rawData.personType.toString():'',
                    startTime: formatDate(rawData.date) + ' ' + rawData.startTime,
                    endTime: formatDate(rawData.date) + ' ' + rawData.endTime,
                    minPic: rawData.minPic,
                    maxPic: rawData.maxPic,
                    page: pageNum.value - 1,
                    pageSize: pageSize.value,
                    childAdult: rawData.childAdult?rawData.childAdult.toString():'',
                }
            )
            const storageData = filterEmptyValueInObject(
                {
                    account_id: rawData.account_id,
                    type: rawData.type,
                    plaza_id: rawData.plaza_id,
                    zone_id: rawData.zone_id,
                    gate_id: rawData.gate_id,
                    direction: rawData.direction,
                    picType: rawData.picType,
                    personType: rawData.personType,
										childAdult: rawData.childAdult,
                    date: rawData.date,
                    minPic: rawData.minPic,
                    maxPic: rawData.maxPic,
                    startTime: rawData.startTime,
                    endTime: rawData.endTime,
                }
            )
						let searchCondition = JSON.parse(window.localStorage.getItem('searchCondition'));
						let newSearchCondition = {
							...searchCondition,
							...storageData
						}
            window.localStorage.setItem('searchCondition',JSON.stringify(newSearchCondition))
            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 personGroupEditorRef = ref();
        // const isShowGroupEditor = ref(false)
        const updatePersonInfoByGroup = function(data) {
          console.log('updatePersonInfoByGroup', data)
          // isShowGroupEditor.value = true
          personGroupEditorRef.value.initDialog(data);
        }
        // 剔除人员
        const selectedPersonList = ref([])
        const deletePersonRecord = (data) => {
          console.log('deletePersonRecord', data)
          if (selectedPersonList.value.length < 1) {
            ElMessage({
              message: `至少选择一条数据`,
              type: 'error'
            })
            return
          }

          const unidList = selectedPersonList.value.map(item => item.unid)
          const params = {
            unid: unidList.join(','),
            personUnid: '',
          }
          clusterResultApi.updateRecognition(params).then(
              (r) => {
                if(r.msg_code==200){
                  ElMessage({
                    message: `剔除成功`,
                    type: 'success'
                  })
                  selectedPersonList.value = []
                  // 刷新列表
                  clickSearch()
                } else {
                  ElMessage({
                    message: `剔除失败`,
                    type: 'error'
                  })
                }
              }
          )
        }
        const isSelectedPerson = (id) => {
          return selectedPersonList.value.some(item => item.id === id)
        }
        // 移动人员
        const personGroupMoverRef = ref();
        const movePersonRecord = (data) => {
          console.log('movePersonRecord', data)
          if (selectedPersonList.value.length < 1) {
            ElMessage({
              message: `至少选择一条数据`,
              type: 'error'
            })
            return
          }

          personGroupMoverRef.value.initDialog(data, selectedPersonList.value);
        }
        // 查询组
        const personGroupDialogRef = ref();
        const searchPersonInfoByGroup = function(data) {
          console.log('searchPersonInfoByGroup', data)
          /* let parmas = {
            // person_unid: currobj.value.person_unid,
            pic_type: data.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);

          personGroupDialogRef.value.initDialog(data);
        }

        const downloadFile = function(url) {
            window.open(url)
        }
        const downloadTrajectoryFile = function(url){
            window.open(url)
        }
        const handleClick = function(data, event){
          console.log('handleClick', event)
          // 多选
          if (event.metaKey || event.altKey) {
            selectedPersonList.value.push(data)
          } else {
            currentItemId.value = data.id
            currobj.value = data;
            // 清空多选
            selectedPersonList.value = []
          }
        }
		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(item=>{
				if (item.checked && item.checked == true) {
					parmas.dataList.push(item)
				}
			})
			if(parmas.dataList && parmas.dataList.length > 0){
				DetailDialogComparisonRef.value.initDialog(currobj.value,parmas);
			}else{
				ElMessage(
					{
						message: `请选择聚类图片`,
						type: 'warning'
					}
				)
				return
			}
        }
		//单张特征对比
		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(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 clerkComparativeFun = 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 = {
					plaza_id:currobj.value.mall_id,
					pic_type:rawData.picType,
					pic_id:currobj.value.id,
					ip:window._baseImgUrl,
					countdate:formatDate(rawData.date)
			}
			DetailDialogRef.value.initDialog(currobj.value,parmas);
		}
        const contentHeight = ref(0)
        const __main = function() {
            getAccountList()
            contentHeight.value = window.innerHeight - 280
        }

        __main()

        return {
            // scalar
            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,
            updatePersonInfoByGroup,
            deletePersonRecord,
            movePersonRecord,
            searchPersonInfoByGroup,
            isSelectedPerson,
            selectedPersonList,
			clerkComparativeFun,
			singleComparativeFun,
            formatGender,
            downloadTrajectoryFile,
			clickSearch,
          handleRefresh,
            // ref
            // imgModelRef,
			DetailDialogRef,
      personGroupDialogRef,
      personGroupEditorRef,
			DetailDialogComparisonRef,
			singleImgComparisonRef,
      personGroupMoverRef,
        }
    }
}
</script>

<style lang="less" scoped>
@import "./ClusterResult";
.actived{
        border: 3px solid #1890ff;
    }
.actived-red {
  border: 3px solid red;
}
	.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: 500px;
    }
    .downBtn{
        color: #409EFF;
        font-size: 15px;
        cursor: pointer;
        display: inline-block;
        width: auto;
    }
    .downBtn1{
        float: right;
    }
</style>