SnapshotRecord.vue

<template>
    <a-form :model="queryAlarmEventForm" layout="inline">
        <a-form-item label="集团：">
            <a-select v-model:value="queryAlarmEventForm.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="queryAlarmEventForm.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="queryAlarmEventForm.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="queryAlarmEventForm.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="queryAlarmEventForm.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="queryAlarmEventForm.direction" style="width: 200px">
                <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="抓怕类型：">
            <a-select v-model:value="queryAlarmEventForm.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="queryAlarmEventForm.personType" 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-range-picker
                v-model:value="queryAlarmEventForm.time"
                :show-time="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
            />
        </a-form-item>
        <a-form-item>
            <a-button type="primary" @click="onSubmit">查询</a-button>
        </a-form-item>
    </a-form>

    <el-pagination @current-change="onPageNumChange"
                   @size-change="onPageSizeChange"
                   :current-page="pageNum"
                   :page-size="pageSize"
                   :total="total"
                   :page-sizes="[12, 24, 36, 48]"
                   layout="total, sizes, prev, pager, next, jumper"
                   style="text-align:center"
    >
    </el-pagination>
</template>

<script>
import {reactive, ref} from 'vue'
import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi'
import {isArray} from '@/PublicUtil/Judgment'

export default {
    setup() {
        // scalar
        const pageNum = ref(1)
        const pageSize = ref(12)
        const total = ref()
        const accountList = ref([])
        const plazaList = ref([])
        const zoneList = ref([])
        const gateList = ref([])
        const queryAlarmEventForm = reactive(
            {
                account_id: [],
                plaza_id: [],
                zone_id: [],
                gate_id: [],
                type: 0,
                direction: '',
                picType: '',
                personType: '',
                startTime: '',
                endTime: '',

                time: '',
            }
        )
        // function
        const onPageNumChange = function(num) {
            pageNum.value = num
            getPeopleImageFolderList()

        }
        const onPageSizeChange = function(size) {
            pageNum.value = 1
            pageSize.value = size
            getPeopleImageFolderList()
        }

        const getPeopleImageFolderList = function() {

        }

        const onSubmit = function() {

        }

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

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

        const onZoneChange = function() {
            getGateList()
        }

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

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

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

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

        const initialize = function() {
            getAccountList()
        }

        initialize()

        return {
            // scalar
            pageNum,
            pageSize,
            total,
            // sequence
            // mapping
            accountList,
            plazaList,
            zoneList,
            gateList,
            queryAlarmEventForm,
            // function
            onPageNumChange,
            onPageSizeChange,
            onSubmit,
            onAccountChange,
            onPlazaChange,
            onZoneChange,
        }
    }
}
</script>

<style scoped>

</style>