supervision-vue/src/views/Home.vue

<template>
    <div class="container">
        <el-row :gutter="18" class="mb-16">
            <el-col :span="18">
                <el-row :gutter="16">
                    <el-col
                        :span="6"
                        v-for="(item, index) in flowNumber"
                        :key="index"
                        @click="goQuery(item)"
                    >
                        <section class="flex column v-center overall-item pointer">
                            <div>
                                <icon
                                    :name="`local-icon-${item.icon}`"
                                    :size="87"
                                />
                            </div>
                            <div class="number">{{ item.total }}</div>
                            <span class="text">{{ item.name }}</span>
                        </section>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="6">
                <div class="mt-16">
                    <h2 class="text-bold">今日统计</h2>
                </div>
                <div class="flex wrap box">
                    <section class="flex column v-center daily-item pointer" v-for="item in todayNumber" :key="item.name" @click="goQuery2(item)">
                        <div class="number">{{ item.total }}</div>
                        <span>{{ item.name }}</span>
                    </section>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="18">
            <el-col :span="18">
                <home-work />
            </el-col>
            <el-col :span="6">
                <div class="mt-16">
                    <h2 class="text-bold">系统链接</h2>
                </div>
                <div class="external-links-item text-center text-bold mt-18 pointer" v-for="item in links" :key="item">{{ item }}</div>
            </el-col>
        </el-row>
    </div>

    
</template>
<script setup>
import { flowNumberAndTodayNumber } from '@/api/statistics'
const flowNumber = ref([])
const todayNumber = ref([])
flowNumberAndTodayNumber().then(data => {
    flowNumber.value = data.flowNumber;
    todayNumber.value = data.todayNumber;
})
const links = ['民意感知', '视频督察', '情指行', '执法办案']

const router = useRouter()
function goQuery(item) {
    if (item.icon === 'sign') {
        router.push('/query?processingStatus=signing')
    }
    if (item.icon === 'verify') {
        router.push('/query?processingStatus=processing')
    }
    if (item.icon === 'delay') {
        router.push('/query?extensionFlag=true')
    }
    if (item.icon === 'completedApprove') {
        router.push('/query?processingStatus=approval')
    }
}

function goQuery2(item) {
    if (item.name === '今日问题') {
        router.push('/query?crtTime=today')
    }
    if (item.name === '今日办结') {

    }
    if (item.name === '累计问题') {
        router.push('/query')
    }
    if (item.name === '累计办结') {
        router.push('/query?processingStatus=completed')
    }
}
</script>
<style lang="scss" scoped>
.overall-item {
    background: #f7f8fb;
    padding: 28px 0;
    border-radius: 15px;

    &:hover {
        .text {
            color: var(--primary-color);
            font-weight: 700;
        }
    }

    .number {
        font-size: 56px;
        font-weight: bold;
        color: #162582;
    }

    .text {
        font-size: 24px;
    }
}
.daily-item {
    width: 50%;
    padding: 12px 0;
    &:hover {
        span {
            color: var(--primary-color);
            font-weight: 700;
        }
    }
    .number {
        font-size: 38px;
        font-weight: bold;
        color: var(--primary-color);
    }
    span {
        font-size: 20px;
    }
}
.external-links-item {
    width: 386px;
    height: 90px;
    line-height: 90px;
    font-size: 24px;
    background: linear-gradient( 180deg, #E9EBFD 0%, #EBEDFF 100%);
    border: 1px solid #19257D;
    color: var(--primary-color);
}
</style>