DataReplay.vue

<template>
    <a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '100px' } }">
        <a-form-item label="集团:" style="padding: 5px 0">
            <a-select v-model:value="queryForm.accountId" 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.mallId" style="width: 280px" :options="plazaList"
                optionFilterProp="label" show-search>
            </a-select>
        </a-form-item>
        <a-form-item label="日期:" style="padding: 5px 0">
            <a-date-picker v-model:value="queryForm.countdate" style="width: 280px" />
        </a-form-item>
        <a-form-item label="是否重提:" style="padding: 5px 0">
            <a-select v-model:value="queryForm.reExtractFeature" style="width: 280px">
                <a-select-option value="true">是</a-select-option>
                <a-select-option value="false">否</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label="是否重读:" style="padding: 5px 0">
            <a-select v-model:value="queryForm.reTrack" style="width: 280px">
                <a-select-option value="true">是</a-select-option>
                <a-select-option value="false">否</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item style="padding: 5px 0">
            <a-button type="primary" @click="preview" :loading="isLoading">添加任务</a-button>
        </a-form-item>
    </a-form>
   <a-table :dataSource="dataList" v-loading="isLoading" :columns="columns" rowKey='id' :pagination="false">
       <template #countdate="{ text }">
           <span >{{ moment(text).format('YYYY-MM-DD') }}</span>
       </template>
        <template #reExtractFeature="{ text }">
            <span >{{ text?"是":'否' }}</span>
        </template>
        <template #reTrack="{ text }">
            <span >{{ text?"是":'否' }}</span>
        </template>
    </a-table>
</template>

<script>
    import {
        reactive,
        ref,
        toRaw
    } from 'vue'
    import moment from 'moment'
    import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi'
    import {
        isArray
    } from '@/PublicUtil/Judgment'
    import {
        filterEmptyValueInObject,
        formatDate,
        formatTime
    } from '@/PublicUtil/PublicUtil'
    import dataReplayApi from '@/views/DataReplay/DataReplay.js'
    import {
        PlusOutlined
    } from '@ant-design/icons-vue'
    import {ElMessage} from 'element-plus'
    const columns = [
        {
            title: '广场名称',
            dataIndex: 'mallName',
            align: 'center',
        },
        {
            title: '重跑日期',
            dataIndex: 'countdate',
            align: 'center',
            slots: {
                customRender: 'countdate',
            },
        },
        {
            title: '是否重提特征',
            dataIndex: 'reExtractFeature',
            align: 'center',
            slots: {
                customRender: 'reExtractFeature',
            },
        },
        {
            title: '是否重读轨迹文件',
            dataIndex: 'reTrack',
            align: 'center',
            slots: {
                customRender: 'reTrack',
            },
        },
        {
            title: '数据总数',
            dataIndex: 'total',
            align: 'center',
        },
        {
            title: '已完成数',
            dataIndex: 'completedNum',
            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 dataList = ref([])

            const queryForm = reactive({
                accountId: '',
                mallId: '',
                countdate: moment().format('YYYY-MM-DD'),
                reExtractFeature:'true',
                reTrack:'true'
            })

            const onAccountChange = function() {
                getPlazaList()
            }

            const getPlazaList = function() {
                queryForm.mallId = ''
                plazaList.value = []
                snapshotRecordApi.getPlazaList({
                    account_id: queryForm.accountId.toString()
                }).then(
                    (r) => {
                        if (isArray(r)) {
                            for (const item of r) {
                                plazaList.value.push({
                                    value: item.id,
                                    label: item.name,
                                })
                            }
                            if(r&&r.length){
                                queryForm.mallId=r[0].id
                            }
                        }
                    }
                )
            }

            const getAccountList = function() {
                queryForm.accountId = ''
                accountList.value = []
                snapshotRecordApi.getAccountList().then(
                    (r) => {
                        if (isArray(r)) {
                            for (const item of r) {
                                accountList.value.push({
                                    value: item.id,
                                    label: item.name,
                                })
                            }
                            if(r&&r.length){
                                queryForm.accountId=r[0].id
                                getPlazaList()
                            }
                        }
                    }
                )
            }


            const preview = function() {
                isLoading.value = true
                const rawData = toRaw(queryForm)
                dataReplayApi.getRematch(filterEmptyValueInObject({
                    accountId: rawData.accountId.toString(),
                    mallId: rawData.mallId.toString(),
                    countdate: rawData.countdate,
                    reExtractFeature: rawData.reExtractFeature,
                    reTrack: rawData.reTrack,
                })).then(
                    (r) => {
                        isLoading.value = false
                        if(r.code==200){
                            ElMessage(
                                {
                                    message: `添加成功`,
                                    type: 'success'
                                }
                            )
                            return
                        }else{
                            ElMessage(
                                {
                                    message: r.msg,
                                    type: 'error'
                                }
                            )
                            return
                        }
                    }
                )
            }
            const getDataList = function(){
                dataReplayApi.getRematchList().then(
                    (r) => {
                        if (isArray(r)) {
                            dataList.value = r
                        }else{
                            dataList.value = []
                        }
                    }
                )
            }

            const __main = function() {
                getAccountList()
                getDataList()
            }
            __main()

            return {
                // scalar
                isLoading,
                // sequence
                accountList,
                plazaList,
                dataList,
                queryForm,
                columns,
                // function
                onAccountChange,
                preview,
                moment
            }
        }
    }
</script>

<style lang="less" scoped>
</style>