DataRepair.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.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.gate_id"
                      style="width: 280px"
                      mode="multiple"
                      :maxTagCount="1"
                      @change="onGateChange"
            >
                <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.channel_id"
                      style="width: 280px"
                      mode="multiple"
                      :maxTagCount="1"
            >
                <a-select-option
                    v-for="item in channelList"
                    :value="item">
                    {{ item }}
                </a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label="修补日期:" style="padding: 5px 0">
            <a-date-picker v-model:value="queryForm.repairDate" style="width: 280px"/>
        </a-form-item>
        <a-form-item label="参考日期:" style="padding: 5px 0">
            <a-date-picker v-model:value="queryForm.referenceDate" style="width: 280px"/>
        </a-form-item>
        <a-form-item label="开始时间:" style="padding: 5px 0">
            <a-time-picker v-model:value="queryForm.startTime" style="width: 280px"/>
        </a-form-item>
        <a-form-item label="结束时间:" style="padding: 5px 0">
            <a-time-picker v-model:value="queryForm.endTime" style="width: 280px"/>
        </a-form-item>
        <a-form-item label="数据波动比例:" style="padding: 5px 0">
            <a-input v-model:value="queryForm.minFactor" style="width: 129px"/>
            至
            <a-input v-model:value="queryForm.maxFactor" style="width: 129px"/>
        </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-item style="padding: 5px 0">
            <a-button type="primary" @click="repair" :loading="isLoading">修补</a-button>
        </a-form-item>
    </a-form>

    <div style="display:flex; justify-content: flex-end;padding: 3px">
        <a-button @click="suspendRepair" type="primary">暂停修复</a-button>
    </div>
    <a-table :dataSource="dataList" v-loading="isLoading" :columns="columns" :pagination="false">
        <template #status="{ text }">
            <span :class="getClass(text)">{{ text }}</span>
        </template>
        <template #operation="{ record }">
            <div>
                <a-button @click="deleteRecord(record)" type="primary" danger>删除任务</a-button>
            </div>
        </template>
    </a-table>
</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 {filterEmptyValueInObject, formatDate, formatTime} from '@/PublicUtil/PublicUtil'
import dataRepairApi from '@/views/DataRepair/DataRepairApi'

const columns = [
    {
        title: '监控点名称',
        dataIndex: 'gatename',
        align: 'center',
    },
    {
        title: '设备号',
        dataIndex: 'deviceSerialnum',
        align: 'center',
    },
    {
        title: '通道号',
        dataIndex: 'channelSerialnum',
        align: 'center',
    },
    {
        title: '参考数据条数',
        dataIndex: 'sourceCount',
        align: 'center',
    },
    {
        title: '实际数据条数',
        dataIndex: 'targetCount',
        align: 'center',
    },
    {
        title: '参考数据量',
        dataIndex: 'sourceInnum',
        align: 'center',
    },
    {
        title: '实际数据量',
        dataIndex: 'targetInnum',
        align: 'center',
    },
    {
        title: '状态',
        dataIndex: 'status',
        align: 'center',
        slots: {
            customRender: 'status',
        },
    },
    {
        title: '操作',
        dataIndex: 'operation',
        align: 'center',
        slots: {
            customRender: 'operation',
        },
    },
]

export default {
    setup() {
        // scalar
        const isLoading = ref(false)
        const isSuspended = ref(false)
        // sequence
        const resultList = ref([])
        const accountList = ref([])
        const plazaList = ref([])
        const zoneList = ref([])
        const gateList = ref([])
        const channelList = ref([])
        const dataList = ref([])

        const queryForm = reactive(
            {
                account_id: [],
                plaza_id: [],
                gate_id: [],
                channel_id: [],
                repairDate: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'),
                referenceDate: 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'),
                minFactor: 0,
                maxFactor: 1,
            }
        )

        const onAccountChange = function() {
            getPlazaList()

            queryForm.gate_id = []
            gateList.value = []

            queryForm.channel_id = []
            channelList.value = []
        }

        const onPlazaChange = function() {
            getGateList()
            queryForm.channel_id = []
            channelList.value = []
        }

        const onGateChange = function() {
            getChannelList()
        }

        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 getAccountList = function() {
            queryForm.account_id = []
            accountList.value = []
            snapshotRecordApi.getAccountList().then(
                (r) => {
                    if (isArray(r))
                    {
                        accountList.value = r
                    }
                }
            )
        }

        const getGateList = async function() {
            queryForm.gate_id = []
            gateList.value = []

            let tempList = []
            for (const account of queryForm.account_id)
            {
                for (const plaza of queryForm.plaza_id)
                {
                    const r = await dataRepairApi.getGateList(
                        {
                            accountIds: account,
                            mallIds: plaza,
                        }
                    )

                    if (isArray(r))
                    {
                        tempList.push(...r)
                    }
                }
            }

            gateList.value = [...new Set(tempList)]
        }

        const getChannelList = async function() {
            queryForm.channel_id = []
            channelList.value = []

            let tempList = []
            for (const gate of queryForm.gate_id)
            {
                const r = await dataRepairApi.getChannelList(
                    {
                        gateId: gate,
                    }
                )

                if (isArray(r))
                {
                    tempList.push(...r)
                }
            }
            channelList.value = tempList
        }

        const floatToPercent = function(floatNum) {
            if (!floatNum)
            {
                return 0
            }
            let formatNum = Math.floor(floatNum * 100)
            return formatNum >= 100 ? 100 : formatNum
        }

        const preview = async function() {
            isLoading.value = true
            isSuspended.value = false
            dataList.value = []
            const rawData = toRaw(queryForm)
            for (const channelId of rawData.channel_id)
            {
                if (isSuspended.value === true)
                {
                    isLoading.value = false
                    return
                }
                const data = filterEmptyValueInObject(
                    {
                        channelSerialnum: channelId,
                        maxFactor: rawData.maxFactor,
                        minFactor: rawData.minFactor,
                        targetStartDate: formatDate(rawData.repairDate) + ' ' + formatTime(rawData.startTime),
                        targetEndDate: formatDate(rawData.repairDate) + ' ' + formatTime(rawData.endTime),
                        sourceStartDate: formatDate(rawData.referenceDate) + ' ' + formatTime(rawData.startTime),
                        sourceEndDate: formatDate(rawData.referenceDate) + ' ' + formatTime(rawData.endTime),
                    }
                )

                const r = await dataRepairApi.preview(data)

                if (r.msg_code === 200)
                {
                    r.data.status = '已修复'
                }
                else
                {
                    r.data.status = '未执行'
                }
                dataList.value.push(r.data)
            }
            isLoading.value = false
            isSuspended.value = false
        }

        const repair = async function() {
            isLoading.value = true
            isSuspended.value = true
            dataList.value = []
            const rawData = toRaw(queryForm)
            for (const channelId of rawData.channel_id)
            {
                if (isSuspended.value === true)
                {
                    isLoading.value = false
                    return
                }
                const data = filterEmptyValueInObject(
                    {
                        channelSerialnum: channelId,
                        maxFactor: rawData.maxFactor,
                        minFactor: rawData.minFactor,
                        targetStartDate: formatDate(rawData.repairDate) + ' ' + formatTime(rawData.startTime),
                        targetEndDate: formatDate(rawData.repairDate) + ' ' + formatTime(rawData.endTime),
                        sourceStartDate: formatDate(rawData.referenceDate) + ' ' + formatTime(rawData.startTime),
                        sourceEndDate: formatDate(rawData.referenceDate) + ' ' + formatTime(rawData.endTime),
                    }
                )

                const r = await dataRepairApi.repair(data)
                if (r.msg_code === 200)
                {
                    r.data.status = '已修复'
                }
                else
                {
                    r.data.status = '未执行'
                }
                dataList.value.push(r.data)
            }
            isLoading.value = false
            isSuspended.value = false
        }

        const getClass = function(text) {
            switch (text)
            {
                case '已修复':
                {
                    return 'success'
                }
                case '未执行':
                {
                    return 'failed'
                }
                default:
                {
                    break
                }
            }
        }

        const deleteRecord = function({channelSerialnum}) {
            dataList.value = dataList.value.filter(
                item => item.channelSerialnum !== channelSerialnum
            )

            queryForm.channel_id = queryForm.channel_id.filter(
                item => item !== channelSerialnum
            )
        }

        const suspendRepair = function() {
            if (isLoading.value === true)
            {
                isSuspended.value = true
            }
        }

        const __main = function() {
            getAccountList()
        }

        __main()

        return {
            // scalar
            isLoading,
            // sequence
            accountList,
            plazaList,
            zoneList,
            gateList,
            channelList,
            resultList,
            dataList,
            queryForm,
            columns,
            // function
            onAccountChange,
            onPlazaChange,
            onGateChange,
            preview,
            repair,
            getClass,
            deleteRecord,
            suspendRepair,
        }
    }
}
</script>

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