SnapshotRecord.vue

<template>
    <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"
            >
                <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="广场：" style="padding: 5px 0">
            <a-select v-model:value="queryForm.plaza_id"
                      style="width: 280px"
                      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="出入类型：" 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">
                <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="监控点：" style="padding: 5px 0">
            <a-select v-model:value="queryForm.gate_id"
                      style="width: 280px"
                      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="方向：" 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="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>

        <a-pagination
            v-model:current="pageNum"
            v-model:pageSize="pageSize"
            :total="total"
            :show-total="total => `共 ${total} 条`"
            :pageSizeOptions="['24', '48', '96', '192']"
            @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 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(24)
        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 onSubmit = function() {

        }

        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))
                    {
                        plazaList.value = r
                    }
                }
            )
        }

        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))
                    {
                        zoneList.value = r
                    }
                }
            )
        }

        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))
                    {
                        gateList.value = r.data
                    }
                }
            )
        }

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

        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
                    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 downloadFile = function(url) {
            window.open(url)
        }

        const __main = function() {
            getAccountList()
        }

        __main()

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

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