FeatureLibraryRebuild.vue

<template>
    <a-form :model="queryForm" layout="inline">
        <a-form-item label="集团：">
            <!-- mode="multiple" -->
            <a-select v-model:value="queryForm.account_id"
                      style="width: 280px"
                      
                      :maxTagCount="1"
                      @change="onAccountChange"
                      :options="accountList"
                      optionFilterProp="label"
                      show-search
            >
            </a-select>
        </a-form-item>
        <a-form-item label="广场：">
            <!-- mode="multiple" -->
            <a-select v-model:value="queryForm.plaza_id"
                      style="width: 280px"
                      
                      :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-option :value="3">人员库重建</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label="选择日期：" v-if="queryForm.featureRevisitType != 3">
            <a-date-picker v-model:value="queryForm.date"/>
        </a-form-item>
        <a-form-item>
            <a-button type="primary" @click="searchList" style="margin-right: 10px;">查询</a-button>
            <a-button type="primary" @click="initializeWebSocket">开始</a-button>
        </a-form-item>
    </a-form>
    <el-row :gutter="20" style="margin-top: 15px;">
        <el-col :span="8">
            <el-table :data="libraryList" :max-height="700" border>
                <el-table-column
                        prop="poolId"
                        label="库名称"
                        align="center">
                      </el-table-column>
                      <el-table-column
                        prop="personCount"
                        label="数量"
                        align="center"
                        width="120">
                      </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="16">
            <ResultDisplay :data="resultList" :key="resultList"></ResultDisplay>
        </el-col>
    </el-row>
    
</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 ResultDisplay from '@/component/ResultDisplay1/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 libraryList = ref([])
        const searchList = function(){
            libraryList.value = []
            const rawData = toRaw(queryForm)
            featureLibraryRebuildApi.getLibraryList(
                {
                    mallIds: rawData.plaza_id.toString(),
                    countDate:rawData.featureRevisitType==3?formatDate(new Date()):formatDate(rawData.date),
                    personType:rawData.featureRevisitType
                }
            ).then(
                (r) => {
                    if(r.data&&r.data.length>0){
                        libraryList.value = r.data[0].poolList
                    }
                }
            )
        }
        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(`${window._socketUrl}/recal/schedule/rebuildFeatureLib${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: `rebuildFeatureLib${rawData.featureRevisitType}`,
                        startDate: formatDate(rawData.date) + ' ' + '00:00:00',
                        endDate: formatDate(rawData.date) + ' ' + '23:59:59',
                    }
                    featureLibraryRebuildApi.getStaffResult(data)
                    break
                }
                case 2:
                {
                    const data = {
                        mallIds: [rawData.plaza_id],
                        scheduleType: `rebuildFeatureLib${rawData.featureRevisitType}`,
                        startDate: formatDate(rawData.date) + ' ' + '00:00:00',
                        endDate: formatDate(rawData.date) + ' ' + '23:59:59',
                    }
                    featureLibraryRebuildApi.getCustomResult(data)
                    break
                }
                case 3:
                {
                    const data = {
                        mallIds: [rawData.plaza_id],
                        scheduleType: `rebuildFeatureLib${rawData.featureRevisitType}`,
                    }
                    featureLibraryRebuildApi.getPersonResult(data)
                    break
                }
            }
        }

        const __main = function() {
            getAccountList()
        }

        __main()

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

<style scoped>

</style>