<template>
	<div class="box_main">
		<div class="pl_box3_main">
			<div class="ps_box1_list">
				<div class="ps_box1_list_font1">
					<div v-show="props.boxdata.name">{{props.boxdata.name}}</div>
					<div>日处理水量</div>
				</div>
				<div class="ps_box1_list_bg">
					<div class="ps_box1_list_bg2" :style="{width: props.boxdata.rate + '%'}"></div>
					<div class="ps_box1_list_mark" :style="{left: props.boxdata.rate + '%'}">{{props.boxdata.rate}}%</div>
				</div>
				<div class="ps_box1_list_font1">{{props.boxdata.value}}m³</div>
			</div>
			<div class="pl_box3_title">
				<div class="pl_box3_title_item">
					<img class="pl_img" src="/src/assets/imgs/pl_box_icon.png" alt="">
					<div>累计抽排量</div>
					<div class="pl_box3_title_font">{{props.boxdata.total}}</div>
					<div>万m³</div>
				</div>
				<div class="pl_box3_title_item">
					<img class="pl_img" src="/src/assets/imgs/pl_box_icon.png" alt="">
					<div>前水池水位</div>
					<div :class="props.boxdata.water>8?'pl_box3_title_font':'pl_box3_title_font2'">{{props.boxdata.water}}</div>
					<div>m</div>
				</div>
			</div>
			<div class="pl_box3_title">
				<div class="pl_box3_title_items" v-for="(item,index) in props.boxdata.pump" :key="index">
					<img class="ps_img" :src="item.src" alt="">
					<div>{{item.name}}</div>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		computed,
		nextTick
	} from "vue";
	import * as echarts from "echarts";
	export default {
		props: {
			boxdata: {
				type: Object,
				default () {}
			},
		},
		setup(props) {
			const AllData = reactive({
				
			})
			
			onMounted(() => {
				
			});
			return {
				props,
				...toRefs(AllData),
			};
		},
		computed: {},
		methods: {},
	};
</script>

<style lang="less" scoped>
	.ps_img{
		height: 50px;
		width: 50px;
	}
	.ps_box1_list {
		height: 20px;
		width: 100%;
		margin-top: 10px;
		color: #7EC7E9;
		font-size: 16px;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		display: flex;
		align-items: center;
	
		.ps_box1_list_bg {
			margin: 0 3% 0 1%;
			display: flex;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 2px;
			height: 10px;
			width: 60%;
			position: relative;
	
			.ps_box1_list_mark {
				position: absolute;
				font-size: 17px;
				color: #FFFFFF;
				width: 47px;
				height: 24px;
				text-align: center;
				line-height: 24px;
				background: #024052;
				border-radius: 2px;
				bottom: -25px;
				margin-left: -23px;
			}
	
			.ps_box1_list_bg2 {
				height: 100%;
				background: linear-gradient(-87deg, #4CFFFF, #2F5FE9);
				border-radius: 2px;
			}
		}
	
		.ps_box1_list_font1 {
			height: 50px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: column;
		}
	}
	.pl_box3_main {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	
		.pl_box3_title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			text-align: center;
	
			.pl_box3_title_font {
				font-size: 18px;
				font-family: DIN;
				font-weight: bold;
				color: #11F3F6;
			}
	
			.pl_box3_title_font2 {
				font-size: 18px;
				font-family: DIN;
				font-weight: bold;
				color: #D3503F;
			}
	
			.pl_box3_title_items {
				display: flex;
				align-items: center;
				justify-content: space-around;
				flex-direction: column;
				width: 18%;
				height: 90px;
			}
	
			.pl_box3_title_items:hover {
				background: rgba(55, 55, 55, 0.68);
				cursor: pointer;
			}
	
			.pl_box3_title_item {
				display: flex;
				width: 40%;
				align-items: center;
				justify-content: space-around;
			}
		}
	}
</style>