FeatureComparisonVerification.vue

<template>
    <a-row>
        <a-col :span="14">
            <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: 280px" 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: 280px" 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: 280px">
                        <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: 280px" 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: 280px" 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: 280px">
                        <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="抓怕类型：" style="padding: 5px 0">
                    <a-select v-model:value="queryForm.picType" style="width: 280px">
                        <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: 280px">
                        <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-date-picker v-model:value="queryForm.date" :format="'YYYY-MM-DD'" style="width: 280px" />
                </a-form-item>
                <a-form-item label="选择时间：" style="padding: 5px 0">
                    <a-time-picker v-model:value="queryForm.startTime" style="width: 140px" />
                    <a-time-picker v-model:value="queryForm.endTime" style="width: 140px" />
                </a-form-item>
                <a-form-item style="padding: 5px 0">
                    <a-button type="primary" @click="confirmSearch" :loading="isLoading">查询</a-button>
                </a-form-item>
            </a-form>
            <div v-loading="isLoading">
                <el-row v-for="row in pagedTableDataList">
                    <el-col :span="6" v-for="item in row">
                        <div style="margin: 0 5px">
                            <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>

                <a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total"
                    :show-total="total => `共 ${total} 条`" :pageSizeOptions="['12', '24', '48', '192']"
                    @change="onPageNumChange" @showSizeChange="onPageSizeChange" show-size-changer show-quick-jumper
                    style="text-align:center" />
            </div>
        </a-col>
        <a-col :span="10">
            col-12
        </a-col>
    </a-row>

</template>

<script>
    import {
        computed,
        reactive,
        ref,
        toRaw
    } from 'vue'
    import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi'
    import {
        isArray
    } from '@/PublicUtil/Judgment'
    import moment from 'moment'
    import {
        filterEmptyValueInObject,
        formatDate,
        formatTime,
        getPagedList
    } from '@/PublicUtil/PublicUtil'

    export default {
        setup() {
            // scalar
            const pageNum = ref(1)
            const pageSize = ref(12)
            const 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 queryForm = 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'),
            })
            // 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()
                getZoneList()
                getGateList()
            }

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

            const onZoneChange = function() {
                getGateList()
            }

            const getPlazaList = function() {
                queryForm.plaza_id = []
                plazaList.value = []
                snapshotRecordApi.getPlazaList({
                    account_id: queryForm.account_id.toString()
                }).then(
                    (r) => {
                        if (isArray(r)) {
                            for (const item of r) {
                                plazaList.value.push({
                                    value: item.id,
                                    label: item.name,
                                })
                            }
                        }
                    }
                )
            }

            const getZoneList = function() {
                queryForm.zone_id = []
                zoneList.value = []
                snapshotRecordApi.getZoneList({
                    account_id: queryForm.account_id.toString(),
                    plaza_id: queryForm.plaza_id.toString(),
                }).then(
                    (r) => {
                        if (isArray(r)) {
                            for (const item of r) {
                                zoneList.value.push({
                                    value: item.id,
                                    label: item.name,
                                })
                            }
                        }
                    }
                )
            }

            const getGateList = function() {
                queryForm.gate_id = []
                gateList.value = []
                snapshotRecordApi.getGateList({
                    account_id: queryForm.account_id.toString(),
                    plaza_id: queryForm.plaza_id.toString(),
                    zone_id: queryForm.zone_id.toString(),
                    type: queryForm.type,
                }).then(
                    (r) => {
                        if (isArray(r.data)) {
                            for (const item of r.data) {
                                gateList.value.push({
                                    value: item.id,
                                    label: item.name,
                                })
                            }
                        }
                    }
                )
            }

            const getAccountList = function() {
                queryForm.account_id = []
                accountList.value = []
                snapshotRecordApi.getAccountList().then(
                    (r) => {
                        if (isArray(r)) {
                            for (const item of r) {
                                accountList.value.push({
                                    value: item.id,
                                    label: item.name,
                                })
                            }
                        }
                    }
                )
            }

            const confirmSearch = function() {
                isLoading.value = true
                const rawData = toRaw(queryForm)
                const data = filterEmptyValueInObject({
                    account_id: rawData.account_id.toString(),
                    type: rawData.type,
                    plaza_id: rawData.plaza_id.toString(),
                    zone_id: rawData.zone_id.toString(),
                    gate_id: rawData.gate_id.toString(),
                    direction: rawData.direction.toString(),
                    picType: rawData.picType,
                    personType: rawData.personType.toString(),

                    startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime),
                    endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime),
                    page: pageNum.value - 1,
                    pageSize: pageSize.value,
                })

                snapshotRecordApi.getSnapshotRecordList(data).then(
                    (r) => {
                        isLoading.value = false
                        r.data.persons.forEach((item) => {
                            let str = item.features_url.indexOf("/images/feature")
                            if (item.features_url) {
                                item.features_url = window.location.origin + item.features_url
                                    .substring(str)
                            }
                            let str1 = item.picture_url.indexOf("/images/picture")
                            if (item.picture_url) {
                                item.picture_url = window.location.origin + item.picture_url.substring(
                                    str1)
                            }
                        })
                        dataList.value = r.data.persons
                        total.value = r.data.pageNum
                    }
                )
            }

            const formatDirection = function(number) {
                switch (number) {
                    case 1: {
                        return '进'
                    }
                    case -1: {
                        return '出'
                    }
                    case 0: {
                        return '横穿'
                    }
                    default: {

                        break
                    }
                }
            }

            const __main = function() {
                getAccountList()
            }

            __main()

            return {
                // scalar
                isLoading,
                pageNum,
                pageSize,
                total,
                // sequence
                accountList,
                plazaList,
                zoneList,
                gateList,
                pagedTableDataList,
                // mapping
                queryForm,
                // function
                onPageNumChange,
                onPageSizeChange,
                onAccountChange,
                onPlazaChange,
                onZoneChange,
                confirmSearch,
                formatDirection,
            }
        }
    }
</script>
<style scoped="scoped">
    .single-image {
        height: 300px;
        width: 100%;
    }
</style>