<template>
    <div class="flex gap-10">
        <span class="textStyle">QB数据管理</span>
        <div class="dataCard" @click="goToAllDataPage">
            <div class="titleStyle">
                <span>综合数据</span>
            </div>
            <div class="iconStyle">
            </div>
        </div>
        <div class="dataCard" @click="goToDSNDataPage">
            <div class="titleStyle">
                <span>DSN数据</span>
            </div>
            <div class="iconStyle">
            </div>
        </div>
        <div class="dataCard" @click="goToITUDataPage">
            <div class="titleStyle">
                <span>ITU数据</span>
            </div>
            <div class="iconStyle">
            </div>
        </div>
        <div class="dataCard" @click="goToSTDataPage">
            <div class="titleStyle">
                <span>ST数据</span>
            </div>
            <div class="iconStyle">
            </div>
        </div>
    </div>

</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()

defineProps({
    totalDataNumber: {
        type: String,
        default: ''
    },
    totalPageNumber: {
        type: String,
        default: ''
    },
    totalTargetNumber: {
        type: String,
        default: ''
    },
    successTask: {
        type: String,
        default: ''
    },
    failTask: {
        type: String,
        default: ''
    },
    unusualTask: {
        type: String,
        default: ''
    },
    speed: {
        type: String,
        default: ''
    },
    errorRate: {
        type: String,
        default: ''
    }
})

const goToAllDataPage = () => {
    router.push({
        path: '/osDataDisplay/list',
        query: {
            mode: '综合数据',
            jump:'yes'
        }
    })
}
const goToDSNDataPage = () => {
    router.push({
        path: '/osDataDisplay/list',
        query: {
            mode: 'DSN数据',
            jump:'yes'
        }
    })
}
const goToITUDataPage = () => {
    router.push({
        path: '/osDataDisplay/list',
        query: {
            mode: 'ITU数据',
            jump:'yes'
        }
    })
}
const goToSTDataPage = () => {
    router.push({
        path: '/osDataDisplay/list',
        query: {
            mode: 'ST数据',
            jump:'yes'
        }
    })
}
</script>

<style lang="scss" scoped>
.iconStyle {
    background-image: url("@/assets/picture/wenjianjia.png");
    background-size: 100% 120%;
    background-repeat: no-repeat;
    margin-top: 3%;
    display: flex;
    // border: 1.5px solid rgb(193, 188, 188);
    height: 50%;
    width: 50%;
}

.dataCard {
    background-image: url("@/assets/picture/box2.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // background: #c6ebfc;
    // border: 1.5px solid rgb(193, 188, 188);
    width: 260px;
    height: 100%;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
}

.titleStyle {
    font-size: 30px;
    margin-top: 5%;
    color: #FFFFFF;
}

.wordStyle {
    font-size: 20px;
    color: #FFFFFF;
    margin-top: 2%;
}
.textStyle {
    writing-mode: vertical-lr;
    font-size: 26px;
    letter-spacing: 3px;
    margin-left: 0.5%;
    color: #FFFFFF;
    // display: flex;
}
</style>
