<template>
	<div class="boxmain" @mouseout="mouseOut()">
		<div class="one_level cicle" @mouseenter="mouseEnter()">
			<div class="pop" v-show="select">
				<div>设备:<span>{{this.highwaterList.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList.waterfall}}</span>m³</div>
			</div>
		</div>
		<div class="two_level cicle" @mouseenter="mouseEnter1()">
			<div class="pop1" v-show="select1" >
				<div>设备:<span>{{this.highwaterList1.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList1.waterfall}}</span>m³</div>
			</div>
		</div>
		<div class="three_level cicle"  @mouseenter="mouseEnter2()">
			<div class="pop1" v-show="select2">
				<div>设备:<span>{{this.highwaterList2.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList2.waterfall}}</span>m³</div>
			</div>
		</div>
		<div class="four_level cicle" @mouseenter="mouseEnter3()">
			<div class="pop1" v-show="select3" >
				<div>设备:<span>{{this.highwaterList3.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList3.waterfall}}</span>m³</div>
			</div>
		</div>
		<div class="five_level cicle" @mouseenter="mouseEnter4()">
			<div class="pop1" v-show="select4" >
				<div>设备:<span>{{this.highwaterList4.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList4.waterfall}}</span>m³</div>
			</div>
		</div>
		<div class="six_level cicle" @mouseenter="mouseEnter5()">
			<div class="pop1" v-show="select5" >
				<div>设备:<span>{{this.highwaterList5.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList5.waterfall}}</span>m³</div>
			</div>
		</div>
		<div class="seven_level cicle" @mouseenter="mouseEnter6()">
			<div class="pop1" v-show="select6">
				<div>设备:<span>{{this.highwaterList6.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList6.waterfall}}</span>m³</div>
			</div>
		</div>
		
		<div class="eight_level cicle" @mouseenter="mouseEnter7()">
			<div class="pop1" v-show="select7" >
				<div>设备:<span>{{this.highwaterList7.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList7.waterfall}}</span>m³</div>
			</div>
		</div>
		
		<!-- new -->
		<div class="new_level1 cicle" @mouseenter="mouseEnternew1()">
			<div class="pop1" v-show="selectnew1" >
				<div>设备:<span>{{this.highwaterListnew1.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterListnew1.waterfall}}</span>m³</div>
			</div>
		</div>
		<div class="new_level2 cicle" @mouseenter="mouseEnternew2()">
			<div class="pop1" v-show="selectnew2" >
				<div>设备:<span>{{this.highwaterListnew2.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterListnew2.waterfall}}</span>m³</div>
			</div>
		</div>
		<div class="new_level3 cicle" @mouseenter="mouseEnternew3()">
			<div class="pop1" v-show="selectnew3" >
				<div>设备:<span>{{this.highwaterListnew3.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterListnew3.waterfall}}</span>m³</div>
			</div>
		</div>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		<div class="nine_level cicle" @mouseenter="mouseEnter8()">
			<div class="pop1" v-show="select8" >
				<div>设备:<span>{{this.highwaterList8.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList8.waterfall}}</span>m³</div>
			</div>
		</div>
		<div class="ten_level cicle" @mouseenter="mouseEnter9()">
			<div class="pop1" v-show="select9" >
				<div>设备:<span>{{this.highwaterList9.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList9.waterfall}}</span>m³</div>
			</div>
		</div>
		<div class="eleven_level cicle" @mouseenter="mouseEnter10()">
			<div class="pop1" v-show="select10">
				<div>设备:<span>{{this.highwaterList10.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList10.waterfall}}</span>m³</div>
			</div>
		</div>
		<div class="twelve_level cicle" @mouseenter="mouseEnter11()">
			<div class="pop1" v-show="select11" >
				<div>设备:<span>{{this.highwaterList11.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList11.waterfall}}</span>m³</div>
			</div>
		</div>
		
		<div class="thirteen_level cicle" @mouseenter="mouseEnter12()">
			<div class="pop1" v-show="select12">
				<div>设备:<span>{{this.highwaterList12.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList12.waterfall}}</span>m³</div>
			</div>
		</div>
		
		<div class="fourteen_level cicle" @mouseenter="mouseEnter13()">
			<div class="pop1" v-show="select13" >
				<div>设备:<span>{{this.highwaterList13.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList13.waterfall}}</span>m³</div>
			</div>
		</div>
		<div class="fifteen_level cicle" @mouseenter="mouseEnter14()">
			<div class="pop1" v-show="select14">
				<div>设备:<span>{{this.highwaterList14.equipmentName}}</span></div>
				<div>本日用水量:<span>{{this.highwaterList14.waterfall}}</span>m³</div>
			</div>
		</div>
		
	</div>
</template>

<script>

import {highWater} from "@/api/project/chq";

export default {
  data() {
    return {
		select:false,
		highwaterList:{},
		select1:false,
		highwaterList1:{},
		select2:false,
		highwaterList2:{},
		select3:false,
		highwaterList3:{},
		select4:false,
		highwaterList4:{},
		select5:false,
		highwaterList5:{},
		select6:false,
		highwaterList6:{},
		select7:false,
		highwaterList7:{},
		selectnew1:false,
		highwaterListnew1:{},
		selectnew2:false,
		highwaterListnew2:{},
		selectnew3:false,
		highwaterListnew3:{},
		select8:false,
		highwaterList8:{},
		select9:false,
		highwaterList9:{},
		select10:false,
		highwaterList10:{},
		select11:false,
		highwaterList11:{},
		select12:false,
		highwaterList12:{},
		select13:false,
		highwaterList13:{},
		select14:false,
		highwaterList14:{}
    };
  },

   methods: {
	   // 1.
	 mouseEnter() {
		 this.select = true;
		 var param ={
		    equipmentName:'生活区一级计量', 
		}
		  highWater(param).then((res) => {
		   var body = res.data||{};
		   this.highwaterList=body;
		  });
		  
	 },
	 //2.
	 mouseEnter1() {
	 		 this.select1 = true;
	 		 var param ={
	 		    equipmentName:'采场一级计量', 
	 		}
	 		  highWater(param).then((res) => {
	 		   var body = res.data||{};
	 		   this.highwaterList1=body;
	 		  });
	 		  
	 },
	
	 //3.
	 mouseEnter2() {
	 		 this.select2 = true;
	 		 var param ={
	 		    equipmentName:'职工餐厅', 
	 		}
	 		  highWater(param).then((res) => {
	 		   var body = res.data||{};
	 		   this.highwaterList2=body;
	 		  });
	 		  
	 },
	
	//
	 mouseEnter3() {
	 		 this.select3 = true;
	 		 var param ={
	 		    equipmentName:'职工宿舍1', 
	 		}
	 		  highWater(param).then((res) => {
	 		   var body = res.data||{};
	 		   this.highwaterList3=body;
	 		  });
	 		  
	 },
	
	 //
	 mouseEnter4() {
	 		 this.select4 = true;
	 		 var param ={
	 		    equipmentName:'职工浴室', 
	 		}
	 		  highWater(param).then((res) => {
	 		   var body = res.data||{};
	 		   this.highwaterList4=body;
	 		  });
	 		  
	 },
	
	 //
	 mouseEnter5() {
	 		 this.select5 = true;
	 		 var param ={
	 		    equipmentName:'锅炉房', 
	 		}
	 		  highWater(param).then((res) => {
	 		   var body = res.data||{};
	 		   this.highwaterList5=body;
	 		  });
	 		  
	 },
	
	 //
	 mouseEnter6() {
		 this.select6 = true;
		 var param ={
			equipmentName:'综合楼', 
		}
		highWater(param).then((res) => {
			var body = res.data||{};
			this.highwaterList6=body;
		});	  
	 },
	
	 //
	 mouseEnter7() {
	 		 this.select7 = true;
	 		 var param ={
	 			equipmentName:'办公楼', 
	 		}
	 		highWater(param).then((res) => {
	 			var body = res.data||{};
	 			this.highwaterList7=body;
	 		});	  
	 },
	 
	 //new
	 
	 
	 
	 mouseEnternew1() {
	 		 this.selectnew1 = true;
	 		 var param ={
	 			equipmentName:'职工宿舍2', 
	 		}
	 		highWater(param).then((res) => {
	 			var body = res.data||{};
	 			this.highwaterListnew1=body;
	 		});	  
	 },
	 
	 mouseEnternew2() {
	 		 this.selectnew2 = true;
	 		 var param ={
	 			equipmentName:'生活区内绿化', 
	 		}
	 		highWater(param).then((res) => {
	 			var body = res.data||{};
	 			this.highwaterListnew2=body;
	 		});	  
	 },
	 mouseEnternew3() {
	 		 this.selectnew3 = true;
	 		 var param ={
	 			equipmentName:'生活区', 
	 		}
	 		highWater(param).then((res) => {
	 			var body = res.data||{};
	 			this.highwaterListnew3=body;
	 		});	  
	 },
	 //
	 mouseEnter8() {
	 		 this.select8 = true;
	 		 var param ={
	 			equipmentName:'复垦区绿化区', 
	 		}
	 		highWater(param).then((res) => {
	 			var body = res.data||{};
	 			this.highwaterList8=body;
	 		});	  
	 },
	
	 //
	 mouseEnter9() {
	 		 this.select9 = true;
	 		 var param ={
	 			equipmentName:'出煤系统区', 
	 		}
	 		highWater(param).then((res) => {
	 			var body = res.data||{};
	 			this.highwaterList9=body;
	 		});	  
	 },
	
	 //
	 mouseEnter10() {
	 		 this.select10 = true;
	 		 var param ={
	 			equipmentName:'洒水车', 
	 		}
	 		highWater(param).then((res) => {
	 			var body = res.data||{};
	 			this.highwaterList10=body;
	 		});	  
	 },
	
	 //
	 mouseEnter11() {
	 		 this.select11 = true;
	 		 var param ={
	 			equipmentName:'高位复垦区绿化', 
	 		}
	 		highWater(param).then((res) => {
	 			var body = res.data||{};
	 			this.highwaterList11=body;
	 		});	  
	 },
	
	 //
	 mouseEnter12() {
	 		 this.select12 = true;
	 		 var param ={
	 			equipmentName:'锅炉房回水', 
	 		}
	 		highWater(param).then((res) => {
	 			var body = res.data||{};
	 			this.highwaterList12=body;
	 		});	  
	 },
	
	 //
	 mouseEnter13() {
	 		 this.select13= true;
	 		 var param ={
	 			equipmentName:'生活区外绿化', 
	 		}
	 		highWater(param).then((res) => {
	 			var body = res.data||{};
	 			this.highwaterList13=body;
	 		});	  
	 },
	
	 //
	 mouseEnter14() {
	 		 this.select14= true;
	 		 var param ={
	 			equipmentName:'撒水降尘', 
	 		}
	 		highWater(param).then((res) => {
	 			var body = res.data||{};
	 			this.highwaterList14=body;
	 		});	  
	 },
	 mouseOut() {
		this.select = false;
		this.select1 = false;
		this.select2 = false;
		this.select3 = false;
		this.select4 = false;
		this.select5 = false;
		this.select6 = false;
		this.select7 = false;
		this.select8 = false;
		this.select9 = false;
		this.select10 = false;
		this.select11 = false;
		this.select12 = false;
		this.select13 = false;
		this.select14 = false;
		this.selectnew1 = false;
		this.selectnew2 = false;
		this.selectnew3 = false;
	 },
 }
};
</script>
<style>
	.boxmain{
		width: 100%;
		height: 58.1875rem;
		background:no-repeat  url('~@/assets/images/newtz.png');
		margin-left: 15%;
		margin-top: 1%;
		position: relative;
		display: inline-block;
	}
	.cicle{
		width: 14px;
		height: 14px;
		border-radius: 50%;
	}
	.one_level{
	  background-color: #fa063a;
	  position: absolute;
	  top: 18.5rem;
	  left: 12.5rem;
	}
	.pop {
	    width:10rem;
	    height:5rem;
	    background-color:#fff;
		opacity: 1;
	    border-radius: 3px;
		display:flex;
		flex-direction: column;
		justify-content: space-around;
	    position: relative;
		top:17px;
	    right: 75px;
	}
	.pop1 {
	    width:10rem;
	    height:5rem;
	    background-color:#fff;
		opacity: 1;
	    border-radius: 3px;
		display:flex;
		flex-direction: column;
		justify-content: space-around;
	    position: relative;
		top:17px;
	    right: 75px;
	}
	.two_level{
		background-color: #fa063a;
		position: absolute;
		top: 39.5rem;
		left: 12.5rem;
	}
	.three_level{
		background-color: #0ada6c;
		position: absolute;
		top: 4.5rem;
		left: 30.5rem;
	}
	.four_level{
		background-color: #0ada6c;
		position: absolute;
		top: 7.9rem;
		left: 30.5rem;
	}
	.five_level{
		background-color: #0ada6c;
		position: absolute;
		top: 10.9rem;
		left: 30.5rem;
	}
	.six_level{
		background-color: #0ada6c;
		position: absolute;
		top: 14.3rem;
		left: 30.5rem;
	}
	.seven_level{
		background-color: #0ada6c;
		position: absolute;
		top: 17.5rem;
		left: 30.5rem;
	}
	/* new */
	
	
	
	
	
	.new_level1{
		background-color: #0ada6c;
		position: absolute;
		top: 23.7rem;
		left: 30.5rem;
	}
	.new_level2{
		background-color: #0ada6c;
		position: absolute;
		top: 29rem;
		left: 30.5rem;
	}
	.new_level3{
		background-color: #0ada6c;
		position: absolute;
		top: 34.8rem;
		left: 30.5rem;
	}
	
	
	
	
	
	
	
	
	.eight_level{
		background-color: #0ada6c;
		position: absolute;
		top: 20.5rem;
		left: 30.5rem;
	}
	.nine_level{
		background-color: #0ada6c;
		position: absolute;
		top: 39.5rem;
		left: 30.5rem;
	}
	.ten_level{
		background-color: #0ada6c;
		position: absolute;
		top: 43.5rem;
		left: 30.5rem;
	}
	.eleven_level{
		background-color: #0ada6c;
		position: absolute;
		top: 47.5rem;
		left: 30.5rem;
	}
	.twelve_level{
		background-color: #0ada6c;
		position: absolute;
		top: 51.5rem;
		left: 30.5rem;
	}
	.thirteen_level{
		background-color: #1d9ddd;
		position: absolute;
		top: 33rem;
		left: 43.2rem;
	}
	.fourteen_level{
		background-color: #1d9ddd;
		position: absolute;
		top: 36.4rem;
		left: 43.2rem;
	}
	.fifteen_level{
		background-color: #1d9ddd;
		position: absolute;
		top: 17.5rem;
	    left: 58.6rem;
	}
</style>
