<template>
	<div class="flx-center AIbase">
		<div class="base-div">
			<img src="@/assets/images/AIwaring/已安装AI设备工程.png" alt="" />
			<div class="flx-column ml-20">
				<span>{{ title.installed }}</span>
				<span class="number">{{ data.installNum }}</span>
			</div>
		</div>
		<div class="base-div">
			<img src="@/assets/images/AIwaring/AI设备安装覆盖率.png" alt="" />
			<div class="flx-column ml-20">
				<span>{{ title.rate }}</span>
				<span class="number">{{ data.useRate }}%</span>
			</div>
		</div>
		<div class="base-div">
			<img src="@/assets/images/AIwaring/累计AI预警次数.png" alt="" />
			<div class="flx-column ml-20">
				<span>{{ title.accumulate }}</span>
				<span class="number">{{ data.totalAlarm }}</span>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
defineProps<{
	data: any;
	title: {
		installed: string;
		rate: string;
		accumulate: string;
	};
}>();
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
