InformationDisplay.vue 2.7 KB
<template>
    <div class="result-wrapper">
        <div class="result-header">结果展示</div>
        <div id="showDiv" class="scrollbar-wrapper" style="padding: 20px">

        </div>
    </div>
</template>

<script>
import $ from 'jquery'
import {computed, onMounted, onUpdated, watch} from 'vue'

export default {
    props: ['data'],
    setup(props, {emit}) {
        const data = props.data

        const informationList = computed(() => {
            return data
        })

        // function
        const renderResultToHtml = function(data, hasSccessDetail) {
            let text = "本次共执行job " +
                data.total +
                " 个,成功 " +
                data.success +
                " 个,失败 " +
                data.failed +
                " 个.</br>"
            if (data.failedJob && data.failedJob.length > 0)
            {
                text += "-----失败job详情-----</br>"
                text += data.failedJob.join("</br>")
                if (data.data)
                {
                    text += "</br>" + data.data
                }
            }
            if (data.successJob && data.successJob.length > 0)
            {
                text += "-----成功job详情-----</br>"
                text += data.successJob.join("</br>")
                if (hasSccessDetail)
                {
                    if (data.data)
                    {
                        console.log(data.data)
                        data.data.forEach(item => {
                            text +=
                                "</br>" +
                                " 设备序列号: " +
                                item.deviceSerialnum +
                                " 时间: " +
                                item.counttime +
                                " 进客流: " +
                                item.innum +
                                " 出客流: " +
                                item.outnum
                        })
                    }
                }
            }
            text += "</br>-----------------------------------------------"
            text += "</br>"
            text += "</br>"
            text += "</br>"
            $("#showDiv").append(text)
        }

        watch(
            () => {
                return informationList.value.toString()
            },
            (newData) => {
                $("#showDiv").empty()
                for (const item of informationList.value)
                {
                    renderResultToHtml(item)
                }
            }
        )

        return {
            informationList
        }
    }
}
</script>

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