iot-front-ui/src/components/dashboard/portrait/personPortrait.vue

<script>
import api from "@/api/dashboard/apiDashboard";

import CoreData from "@/components/common/coreData.vue";
import PersonTrendChart from "@/components/dashboard/portrait/person/personTrendChart.vue";

export default {
    data() {
        let range = this.$util.dateUtil.getNearlyMonthRange();
        return {
            queryData: {
                companyId: '0',
                deptId: '0',
                timeRange: range
            },
            coreData: [
                {
                    type: 0,
                    title: '今日进入大楼(人)',
                    num: 0,
                    historyDesc: '环比',
                    historyNum: 0
                },
                {
                    type: 0,
                    title: '今日离开大楼(人)',
                    num: 0,
                    historyDesc: '环比',
                    historyNum: 0
                },
                {
                    type: 0,
                    title: '今日9点前进入大楼(人)',
                    num: 0,
                    historyDesc: '环比',
                    historyNum: 0
                },
                {
                    type: 0,
                    title: '楼内人员数量(人)',
                    num: 0,
                    historyDesc: '环比',
                    historyNum: 0
                },
                {
                    type: 1,
                    title: '值得关注',
                    showStar: true,
                    content: ''
                },
            ],
        }
    },
    props: {
        chartHeight: Number
    },
    components: {
        CoreData,
        PersonTrendChart,
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.getCoreData();
        },
        getCoreData() {
            api.getPersonCoreData(this.queryData).then(res => {
                this.coreData[0].num = res.list[0].value
                this.coreData[0].historyNum = res.list[0].compare
                this.coreData[1].num = res.list[1].value
                this.coreData[1].historyNum = res.list[1].compare
                this.coreData[2].num = res.list[2].value
                this.coreData[2].historyNum = res.list[2].compare
                this.coreData[3].num = res.list[3].value
                this.coreData[3].historyNum = res.list[3].compare
                this.coreData[4].content = res.worthAttention
            })
        },
    }
}
</script>

<template>
    <div class="personPortrait">
        <div class="portrait-coreData">
            <CoreData :data-list="coreData"></CoreData>
        </div>
        <div style="">
            <PersonTrendChart :height="chartHeight" :query-data="queryData"></PersonTrendChart>
        </div>
    </div>
</template>