gz-att-web/src/views/dashboard/topTwo.vue

<template>
    <div class="content">
        <div class="content-box">
            <div class="title-box">
                <div style="margin-left: 10px;font-size: 22px;font-weight: bold;">当月轮休、临时外出异常情况</div>
            </div>
            <div class="list-box">
                <div class="listItem" style="background-color: #FFF7F1;" @click="toggleDialog(10)">
                    <div><img src="../../assets/img/take.png" width="24" height="24" alt=""></div>
                    <div>已处理数据</div>
                    <h2>{{pageData.processedData}}</h2>
                </div>
                <div class="listItem" style="background-color: #F7F8FA;" @click="toggleDialog(11)">
                    <div><img src="../../assets/img/unTake.png" width="24" height="24" alt=""></div>
                    <div>未处理数据</div>
                    <h2>{{pageData.unProcessedData}}</h2>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { getHomePageData } from '@/api/dashboard'
export default {
    components: {

    },
    name: 'topOne',
    props: {
        pageData: {
            // required: true,
            type: Object,
            default:{

            }
        },

    },
    data() {
        return {
            pieCharts: null,
            // pageData:{},
        }
    },
    created() {

    },
    mounted() {
        // this.getInitData()
    },
    methods: {
        toggleDialog(v) {
            if(v==10){
                this.$emit('openDialog', { order: v, isExamine:'0'})
            }else if(v==11){
                this.$emit('openDialog', { order: v, isExamine:'1'})
            }

        },
    },
}
</script>

<style lang="scss" scoped>
.content{
    width: 100%;
    height: 100%;
    padding-top: 20px;
    .content-box{
        width: 100%;
        height: 100%;
        padding: 10px;
        background-color: #fff;
        border-radius: 10px;
    }
    .title-box{
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;

    }
    .list-box{
        width: 100%;
        height: 250px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .listItem{
            width: 80%;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 20px;
            cursor: pointer;
        }
    }


}

</style>