ClusterResult.vue

<template>
    <a-form :model="queryClusterResultForm" layout="inline" :label-col="{span: 4}" :wrapper-col="{span: 14}">
        <a-form-item label="集团：">
            <a-select v-model:value="queryClusterResultForm.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="queryClusterResultForm.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="queryClusterResultForm.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="queryClusterResultForm.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="queryClusterResultForm.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="queryClusterResultForm.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="queryClusterResultForm.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="queryClusterResultForm.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-date-picker v-model:value="queryClusterResultForm.date" :format="'YYYY-MM-DD'"/>
        </a-form-item>
        <a-form-item label="选择时间：">
            <a-time-picker v-model:value="queryClusterResultForm.startTime"/>
            <a-time-picker v-model:value="queryClusterResultForm.endTime"/>
        </a-form-item>
        <a-form-item label="图片数量：">
            <a-input v-model:value="queryClusterResultForm.minPic" style="width: 100px"/>
            至
            <a-input v-model:value="queryClusterResultForm.maxPic" style="width: 100px"/>
        </a-form-item>
        <a-form-item>
            <a-button type="primary" @click="confirmSearch" :loading="isLoading">查询</a-button>
        </a-form-item>
    </a-form>

    <div v-loading="isLoading">
        <div v-for="person in dataList" style="margin: 10px 0;border: solid 1px black">
            人id:{{ '   ' + person.person_unid }}
            图片数量:{{ person.perrsonList.length }}
            <el-row v-for="row in getPagedList(person.perrsonList, 8)">
                <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="'fill'"
                                  class="single-image">
                        </el-image>
                        <div>时间:{{ item.counttime }}</div>
                        <div>方向:{{ formatDirection(item.direction) }}</div>
                        <div>地点:{{ item.gate_name }}</div>
                    </div>
                </el-col>
            </el-row>
        </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"
        />
    </div>
</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'

export default {
    setup() {
        // scalar
        const pageNum = ref(1)
        const pageSize = ref(10)
        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 queryClusterResultForm = reactive(
            {
                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'),
                minPic: 0,
                maxPic: 100,
            }
        )
        // function
        const onPageNumChange = function(num) {
            pageNum.value = num
            confirmSearch()
        }

        const onPageSizeChange = function(current, size) {
            pageNum.value = 1
            pageSize.value = size
            confirmSearch()
        }

        const onSubmit = function() {

        }

        const onAccountChange = function() {
            getPlazaList()
            getZoneList()
            getGateList()
        }

        const onPlazaChange = function() {
            getZoneList()
            getGateList()
        }

        const onZoneChange = function() {
            getGateList()
        }

        const getPlazaList = function() {
            queryClusterResultForm.plaza_id = []
            plazaList.value = []
            clusterResultApi.getPlazaList(
                {
                    account_id: queryClusterResultForm.account_id.toString()
                }
            ).then(
                (r) => {
                    if (isArray(r))
                    {
                        plazaList.value = r
                    }
                }
            )
        }

        const getZoneList = function() {
            queryClusterResultForm.zone_id = []
            zoneList.value = []
            clusterResultApi.getZoneList(
                {
                    account_id: queryClusterResultForm.account_id.toString(),
                    plaza_id: queryClusterResultForm.plaza_id.toString(),
                }
            ).then(
                (r) => {
                    if (isArray(r))
                    {
                        zoneList.value = r
                    }
                }
            )
        }

        const getGateList = function() {
            queryClusterResultForm.gate_id = []
            gateList.value = []
            clusterResultApi.getGateList(
                {
                    account_id: queryClusterResultForm.account_id.toString(),
                    plaza_id: queryClusterResultForm.plaza_id.toString(),
                    zone_id: queryClusterResultForm.zone_id.toString(),
                    type: queryClusterResultForm.type,
                }
            ).then(
                (r) => {
                    if (isArray(r.data))
                    {
                        gateList.value = r.data
                    }
                }
            )
        }

        const getAccountList = function() {
            queryClusterResultForm.account_id = []
            accountList.value = []
            clusterResultApi.getAccountList().then(
                (r) => {
                    if (isArray(r))
                    {
                        accountList.value = r
                    }
                }
            )
        }

        const confirmSearch = function() {
            isLoading.value = true
            const rawData = toRaw(queryClusterResultForm)
            const data = filterEmptyValueInObject(
                {
                    account_id: rawData.account_id.toString(),
                    type: rawData.type,
                    plaza_id: rawData.plaza_id.toString(),
                    zone_id: rawData.zone_id.toString(),
                    gate_id: rawData.gate_id.toString(),
                    direction: rawData.direction.toString(),
                    picType: rawData.picType,
                    personType: rawData.personType.toString(),
                    startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime),
                    endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime),
                    minPic: rawData.minPic,
                    maxPic: rawData.maxPic,
                    page: pageNum.value - 1,
                    pageSize: pageSize.value,
                }
            )

            clusterResultApi.getClusterResultList(data).then(
                (r) => {
                    isLoading.value = false
                    sortDataList(r.data.persons)
                    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 sortDataList = function(list) {
            list.sort(
                (a, b) => {
                    return (b.perrsonList.length - a.perrsonList.length)
                }
            )
        }

        const downloadFile = function(url) {
            window.open(url)
        }

        const __main = function() {
            getAccountList()
        }

        __main()

        return {
            // scalar
            isLoading,
            pageNum,
            pageSize,
            total,
            // sequence
            accountList,
            plazaList,
            zoneList,
            gateList,
            pagedTableDataList,
            dataList,
            // mapping
            queryClusterResultForm,
            // function
            onPageNumChange,
            onPageSizeChange,
            onSubmit,
            onAccountChange,
            onPlazaChange,
            onZoneChange,
            confirmSearch,
            formatDirection,
            downloadFile,
            getPagedList,
        }
    }
}
</script>

<style lang="less" scoped>
@import "./ClusterResult";
</style>