<template>
	<div class="flex gap-10">
		<span class="textStyle">任务统计</span>
		<div class="dataCard" @click="goToDSNTaskRecordPage">
			<div class="titleStyle">
				<span>DSN爬取任务</span>
			</div>
			<div class="wordStyle">
				<span>DSN爬虫任务数: {{ dsnTotalTaskNumber }} </span>
			</div>
			<div class="wordStyle">
				<span>任务执行成功统计: {{ dsnTaskSuccessNumber }} </span>
			</div>
			<div class="wordStyle">
				<span>任务执行失败统计: {{ dsnTaskFailNumber }} </span>
			</div>
			<div class="wordStyle">
				<span>错误率: {{ dsnErrorRate }} </span>
			</div>
		</div>
		<div class="dataCard" @click="goToITUTaskRecordPage">
			<div class="titleStyle">
				<span>ITU爬取任务</span>
			</div>
			<div class="wordStyle">
				<span>ITU爬虫任务数: {{ ituTotalTaskNumber }} </span>
			</div>
			<div class="wordStyle">
				<span>任务执行成功统计: {{ ituTaskSuccessNumber }} </span>
			</div>
			<div class="wordStyle">
				<span>任务执行失败统计: {{ ituTaskFailNumber }} </span>
			</div>
			<div class="wordStyle">
				<span>错误率: {{ ituErrorRate }} </span>
			</div>
		</div>
		<div class="dataCard" @click="goToSTTaskRecordPage">
			<div class="titleStyle">
				<span>ST爬取任务</span>
			</div>
			<div class="wordStyle">
				<span>ST爬虫任务数: {{ stTotalTaskNumber }} </span>
			</div>
			<div class="wordStyle">
				<span>任务执行成功统计: {{ stTaskSuccessNumber }} </span>
			</div>
			<div class="wordStyle">
				<span>采集速度: {{ stTaskFailNumber }} </span>
			</div>
			<div class="wordStyle">
				<span>错误率: {{ stErrorRate }} </span>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { getAllSpiderTaskStatistics } from '@/api/staticData';
import { onMounted,ref } from 'vue';
import { getSpiderTaskList } from '@/api/spiderTask'

const router = useRouter()

const dsnTotalTaskNumber = ref('')
const dsnTaskSuccessNumber = ref('')
const dsnTaskFailNumber = ref('')
const dsnErrorRate = ref('')
const ituTotalTaskNumber = ref('')
const ituTaskSuccessNumber = ref('')
const ituTaskFailNumber = ref('')
const ituErrorRate = ref('')
const stTotalTaskNumber = ref('')
const stTaskSuccessNumber = ref('')
const stTaskFailNumber = ref('')
const stErrorRate = ref('')


const goToDSNTaskRecordPage = () => {
	router.push({
		path: '/osTaskInformation/list',
		query: {
			spiderType: 'dsn_now',
			jump: 'yes',
			page: 'statusMonitor'
		}
	})
}
const goToITUTaskRecordPage = () => {
	router.push({
		path: '/osTaskInformation/list',
		query: {
			spiderType: 'itu_space_explorer',
			jump: 'yes',
			page: 'statusMonitor'

		}
	})
}
const goToSTTaskRecordPage = () => {
	router.push({
		path: '/osTaskInformation/list',
		query: {
			spiderType: 'api_spider',
			jump: 'yes',
			page: 'statusMonitor'
		}
	})
}

// 获取任务统计数据的方法
const getData = async () => {
	const res = await getAllSpiderTaskStatistics({})
	const dsnTask = await getSpiderTaskList({ spiders: 'dsn_now' })
	const ituTask = await getSpiderTaskList({ spiders: 'itu_space_explorer' })
	const stTask = await getSpiderTaskList({ spiders: 'api_spider' })	
	dsnTotalTaskNumber.value = dsnTask.data.length
	dsnTaskSuccessNumber.value = res.data.dsn_now.successCount
	dsnTaskFailNumber.value = res.data.dsn_now.failCount
	dsnErrorRate.value = res.data.dsn_now.errorRate
	ituTotalTaskNumber.value = ituTask.data.length
	ituTaskSuccessNumber.value = res.data.itu_space_explorer.successCount
	ituTaskFailNumber.value = res.data.itu_space_explorer.failCount
	ituErrorRate.value = res.data.itu_space_explorer.errorRate
	stTotalTaskNumber.value = stTask.data.length
	stTaskSuccessNumber.value = res.data.space_track.successCount
	stTaskFailNumber.value = res.data.space_track.failCount
	stErrorRate.value = res.data.space_track.errorRate
}
onMounted(() => {
	getData()
})
</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>
