<template>
	<div class="flex gap-10">
		<span class="textStyle">数据统计</span>
		<div class="dataCard" @click="goToAllDataPage">
			<div class="titleStyle">
				<span>数据统计</span>
			</div>
			<div class="wordStyle">
				<span>总数据量: {{ totalDataNumber }} 1230</span>
			</div>
			<div class="wordStyle">
				<span>采集的页面数量: {{ totalPageNumber }} 85</span>
			</div>
			<div class="wordStyle">
				<span>采集的目标数量: {{ totalTargetNumber }} 569</span>
			</div>
		</div>
		<div class="dataCard" @click="goToTaskRecordPage">
			<div class="titleStyle">
				<span>任务执行统计</span>
			</div>
			<div class="wordStyle">
				<span>任务执行成功统计: {{ successTask }} 36</span>
			</div>
			<div class="wordStyle">
				<span>任务执行失败统计: {{ failTask }} 0</span>
			</div>
			<div class="wordStyle">
				<span>任务异常数统计: {{ unusualTask }} 1</span>
			</div>
		</div>
		<div class="dataCard">
			<div class="titleStyle">
				<span>性能统计</span>
			</div>
			<div class="wordStyle">
				<span>平均成功率: {{ speed }} 98%</span>
			</div>
			<div class="wordStyle">
				<span>平均错误率: {{ errorRate }} 0%</span>
			</div>
			<div class="wordStyle">
				<span>平均异常率: {{ errorRate }} 2%</span>
			</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: {
			jump: 'yes',
			mode: '综合数据'
		}
	})
}

const goToTaskRecordPage = () => {
	router.push({
		path: '/osTaskRecord/list',
		query: {
			jump: 'yes',
			mode: '状态监控'
		}
	})
}


</script>

<style lang="scss" scoped>
.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: 360px;
	height: 100%;
	border-radius: 5px;
}

.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>
