MinutePassenger.vue

<template>
    <a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '80px' } }">
        <a-form-item label="集团:" style="padding: 5px 0">
            <a-select v-model:value="queryForm.account_id"
                      style="width: 280px"
                      @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"
                      @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.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.personType"
                      mode="multiple"
                      :maxTagCount="1"
                      style="width: 280px">
                <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-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>
    <a-table :dataSource="dataList" v-loading="isLoading" :columns="columns" :pagination="false">
    </a-table>
</template>

<script>
import {reactive, ref, toRaw} from 'vue'
import moment from 'moment'
import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi'
import minuteApi from '@/views/MinutePassenger/MinutePassenger.js'
import {isArray} from '@/PublicUtil/Judgment'
import {filterEmptyValueInObject, formatDate, formatTime} from '@/PublicUtil/PublicUtil'
import dataRepairApi from '@/views/DataRepair/DataRepairApi'
import {PlusOutlined} from '@ant-design/icons-vue'

const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        align: 'center',
        width: 100
    },
    {
        title: '统计时间',
        dataIndex: 'dateTime',
        align: 'center',
    },
    {
        title: '进客流',
        dataIndex: 'in',
        align: 'center',
    },
    {
        title: '出客流',
        dataIndex: 'out',
        align: 'center',
    },
    // {
    //     title: '横穿',
    //     dataIndex: 'pass',
    //     align: 'center',
    // }
]

export default {
    components: {
        PlusOutlined,
        VNodes: (_, {attrs}) => {
            return attrs.vnodes
        },
    },
    setup() {
        // scalar
        const isLoading = ref(false)
        const isSuspended = ref(false)
        // sequence
        const accountList = ref([])
        const plazaList = ref([])
        const zoneList = ref([])
        const gateList = ref([])
        const dataList = ref([])

        const queryForm = reactive(
            {
                account_id: [],
                plaza_id: [],
                gate_id: [],
                personType: [1, 0],
                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'),
            }
        )

        const onAccountChange = function() {
            getPlazaList()
            queryForm.gate_id = []
            gateList.value = []
        }

        const onPlazaChange = 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 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 getGateList = async function() {
            queryForm.gate_id = []
            gateList.value = []
            snapshotRecordApi.getGateList(
                {
                    account_id: queryForm.account_id.toString(),
                    plaza_id: queryForm.plaza_id.toString(),
                    type: 0,
                }
            ).then(
                (r) => {
                    if (isArray(r.data))
                    {
                        for (const item of r.data)
                        {
                            queryForm.gate_id.push(item.id)
                            gateList.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(),
                    plaza_id: rawData.plaza_id.toString(),
                    gate_id: rawData.gate_id.toString(),
                    personType: rawData.personType.toString(),
                    startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime),
                    endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime),
                }
            )
            
            minuteApi.getMinuteList(data).then(
                (r) => {
                    isLoading.value = false
                    r.forEach((item,index)=>{
                        item.index = index+1
                    })
                    dataList.value = r
                }
            )
        }
        const __main = function() {
            getAccountList()
        }
        __main()
        return {
            // scalar
            isLoading,
            // sequence
            accountList,
            plazaList,
            zoneList,
            gateList,
            dataList,
            queryForm,
            columns,
            // function
            onAccountChange,
            onPlazaChange,
            confirmSearch
        }
    }
}
</script>

<style lang="less" scoped>
    .success {
        color: #26ff29;
    }
    
    .failed {
        color: red;
    }
</style>