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"
                    @click="goLink(item.url)"
                >
                    {{ item.title }}
                </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 = [
    {
        title: "民意感知",
        url: 'http://65.47.6.114:8001'
    },
    {
        title: '视频督察',
        url: 'http://65.47.26.34'
    },
    {
        title: '情指行', 
        url: 'http://65.32.34.30/home/ui/#/'
    },
    {
        title: '执法办案',
        url: 'http://65.47.4.100:8080'
    }
];

function goLink(url) {
    window.open(url)
}

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>