PeopleReContrast.vue

<template>
    <a-form :model="queryForm" layout="inline">
        <a-form-item label="集团：">
            <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="广场：">
            <a-select v-model:value="queryForm.plaza_id"
                      style="width: 280px"
                      mode="multiple"
                      :maxTagCount="1"
                      :options="plazaList"
                      optionFilterProp="label"
                      show-search
            >
            </a-select>
        </a-form-item>
        <a-form-item label="比对类型：">
            <a-select v-model:value="queryForm.featureRevisitType" 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="选择日期：">
            <a-date-picker v-model:value="queryForm.date" style="width: 280px"/>
        </a-form-item>
        <a-form-item>
            <a-button type="primary" @click="initializeWebSocket">开始</a-button>
        </a-form-item>
    </a-form>

    <ResultDisplay :data="resultList" :key="resultList"></ResultDisplay>
</template>

<script>
import featureLibraryRebuildApi from '@/views/FeatureLibraryRebuild/FeatureLibraryRebuildApi'
import {reactive, ref, toRaw} from 'vue'
import moment from 'moment'
import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi'
import {isArray} from '@/PublicUtil/Judgment'
import {formatDate, formatTime} from '@/PublicUtil/PublicUtil'
import peopleReContrastApi from '@/views/PeopleReContrast/PeopleReContrastApi'
import ResultDisplay from '@/component/ResultDisplay/ResultDisplay'

export default {
    components: {
        ResultDisplay,
    },
    setup() {
        let webSocket = undefined
        const resultList = ref([])
        // sequence
        const accountList = ref([])
        const plazaList = ref([])
        const zoneList = ref([])
        const gateList = ref([])

        const queryForm = reactive(
            {
                account_id: [],
                plaza_id: [],
                featureRevisitType: 1,
                date: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'),
            }
        )

        const onAccountChange = function() {
            getPlazaList()
        }

        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 floatToPercent = function(floatNum) {
            if (!floatNum)
            {
                return 0
            }
            let formatNum = Math.floor(floatNum * 100)
            return formatNum >= 100 ? 100 : formatNum
        }

        const dealMessage = function(message) {
            // scheduleType
            const {dates, mallIds, mallNames, status, stepCount, scheduleType, counter} = message
            let resObj = {}
            resObj.dates = dates
            resObj.mallIds = mallIds
            resObj.mallNames = mallNames
            resObj.status = status
            resObj.progress = floatToPercent(stepCount)
            resObj.totalNum = 0
            resObj.totalPage = 0
            resObj.current = 0
            resObj.curPageSize = 0
            resObj.currentPage = 0
            resObj.scheduleType = scheduleType
            if (counter)
            {
                // dataNum dateMallNum step totalData totalDate totalMall totalMallDateProduct allDataCount
                resObj.totalNum = counter.allDataCount
                resObj.totalPage = counter.totalMallDateProduct
                resObj.current = counter.dataNum
                resObj.curPageSize = counter.totalData
                resObj.currentPage = counter.dateMallNum
            }
            if (resultList.value.length)
            {
                const isSameScheduleType = resultList.value.some(item => item.scheduleType === scheduleType)
                isSameScheduleType
                    ? resultList.value.forEach(item => {
                        //
                        item.progress = floatToPercent(stepCount)
                        if (counter)
                        {
                            item.totalNum = counter.allDataCount
                            item.totalPage = counter.totalMallDateProduct
                            item.current = counter.dataNum
                            item.curPageSize = counter.totalData
                            item.currentPage = counter.dateMallNum
                        }
                    })
                    : resultList.value.push(resObj)
                resObj = {}
            }
            else
            {
                resultList.value.push(resObj)
                resObj = {}
            }
        }

        const initializeWebSocket = function() {
            if (webSocket !== undefined)
            {
                webSocket.close()
            }
            resultList.value = []

            webSocket = new WebSocket(`ws://${window._serverHost}/recal/schedule/rematchPerson${queryForm.featureRevisitType}`)

            webSocket.onopen = queryData

            webSocket.onmessage = function(event) {
                let message = JSON.parse(event.data)
                dealMessage(message)
                if (message.stepCount === 1)
                {
                    webSocket.close()
                }
            }
        }

        const queryData = function() {
            const rawData = toRaw(queryForm)
            switch (rawData.featureRevisitType)
            {
                case 1:
                {
                    const data = {
                        mallIds: rawData.plaza_id,
                        scheduleType: `rematchPerson${rawData.featureRevisitType}`,
                        startDate: formatDate(rawData.date) + ' ' + '00:00:00',
                        endDate: formatDate(rawData.date) + ' ' + '23:59:59',
                    }
                    peopleReContrastApi.getStaffResult(data)
                    break
                }
                case 2:
                {
                    const data = {
                        mallIds: rawData.plaza_id,
                        scheduleType: `rematchPerson${rawData.featureRevisitType}`,
                        startDate: formatDate(rawData.date) + ' ' + '00:00:00',
                        endDate: formatDate(rawData.date) + ' ' + '23:59:59',
                    }
                    peopleReContrastApi.getCustomResult(data)
                    break
                }
            }
        }

        const __main = function() {
            getAccountList()
        }

        __main()

        return {
            // sequence
            accountList,
            plazaList,
            zoneList,
            gateList,
            resultList,
            queryForm,
            onAccountChange,
            initializeWebSocket,
        }
    }
}
</script>

<style scoped>

</style>