<template>
	<div>
		<div class="box_top">
			<div class="one" v-for="item in addnumber">
				<div class="box_content">
					<div class="box_title">
						<i>●</i><span>{{item.area}}</span>
					</div>
					<div class="box_number">年用水:{{item.value1}}m³</div>
					<div class="box_number">月用水:{{item.value2}}m³</div>
					<div class="box_number">日用水:{{item.value3}}m³</div>
				</div>
			</div>
		</div>
		<div class="box_bottom">
			<div class="left">
				<div class="top_leftcontent">
					<div class="box_text">年度能用水趋势</div>
					<div ref="Combuild" class="chartOne"></div>
				</div>
				<div class="bottom_leftcontent">
					<select  v-model="this.select"
					  @change="selectArea($event)">
					    <option v-for="item in this.selectData"
					        :key="item.value"
					        :value="item.name">
					        {{item.name}}
					     </option>
					 </select>
					 <div ref="Pumproom" class="chartEight"></div>
				</div>
			</div>
			<div class="right">
				<div class="top_rightcontent">
					<div class="box_text">水表设备概览</div>
					<div class="block">
						<div ref="watermeter" class="chartTwo"></div>
						<div class="line">
							<div class="watercount" 
							style="font-size:20px;font-weight: bold;" v-for="item in pieData">
							{{item.name}}
							 <span style="font-size:30px;margin-left:12px;">{{item.value}}个</span>
							<i class="el-icon-view" @click="preview(item)" style="margin-left: 0.3125rem;"></i>
							</div>
							
							<div class="wateradd"  v-for="item in statusData" >
								<div style="font-size: 0.7rem;">{{item.equipmentName}}</div>
								<div class="content_border">
								  <div class="number">{{item.wlheight}}m</div>
								  <div class="pictureCirle"></div>
								  <div class="value">水位值</div>
								</div>
								<div class="content_border">
								  <div class="numberone">
								    <span>{{item.switchStatus}}</span>
								  </div>
								  <div class="pictureCirle"></div>
								  <div class="value">状态</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="bottom_rightcontent">
					<div class="box_text">水表实时数据列表</div>
					<table>
					  <tr>
						<th>水表设备名称</th>
						<th>用水量(m³)</th>
						<th>当前时间</th>
					  </tr>
					  <tr v-for="item in this.addData">
						<td>{{item.equipmentName}}</td>
						<td>{{item.waterfall}}</td>
						<td>{{item.time}}</td>
					  </tr>
					</table>
				</div>
			</div>
		</div>
		<!-- 弹窗 -->
			<el-dialog :title="title" :visible.sync="openSpecific" append-to-body  class="pop-content">	
			<div v-for="item in this.popData" class="popLine">
				设备名称:<span>{{item}}</span>
			</div>
			</el-dialog>
		
	</div>
</template>

<script>
import Vue from "vue";
import ElementUI from "element-ui";
Vue.use(ElementUI);
import * as echarts from "echarts";
import {allNumber,allMonth,allData,allSelect,allBar,allPie,allstatus,popUp} from "@/api/index.js";
export default {
	data() {
		return {
			addnumber:[],
			addmonth:[],
			addData:[],
			selectData:[],
			select:"",
			barData:[],
			pieData:[],
			statusData:[],
			openSpecific:false,
			title:'',
			name:'',
			popData:[]
		}
	},
  mounted(){
    allNumber().then(function(res){
      var body = res.data||[];
	  body = body.filter(item=>(item.area != '采场一级计量' && item.area != '生活区一级计量' && item.area != '污水处理厂'))
	  body = body.map(item=>{
		if(item.area === '景观水池'){
			item.area = '中转蓄水池'
		}
		if(item.area === '新污水处理厂一级计量'){
			item.area = '污水处理站一级计量'
		}
		return item
	  })
      this.addnumber = body;
    }.bind(this));
    allMonth().then(function(res){
      var body = res.data||[];
      this.addmonth = body;
    }.bind(this));
    allData().then(function(res){
      var body = res.data||[];
      this.addData = body;
    }.bind(this));
    allSelect().then(function(res){
      var body = res.data||[];
      this.selectData = body;
    this.select = this.selectData[0].name;
    this.selectArea({target:{value:this.select}});
    }.bind(this));
    allPie().then(function(res){
      var body = res.data||[];
      this.pieData = body;
    }.bind(this));
    allstatus().then(function(res){
      var body = res.data||[];
      this.statusData = body;
    }.bind(this));
    this.$nextTick(function(){
      setTimeout(()=>{
     this.echrtsOne();
     this.echrtsEight();
     this.echrtsTwo();
      },500)
    });
    this.sx = setInterval(() =>{
     allNumber().then(function(res){
       var body = res.data||[];
       this.addnumber = body;
     }.bind(this));
     allMonth().then(function(res){
       var body = res.data||[];
       this.addmonth = body;
     }.bind(this));
     allData().then(function(res){
       var body = res.data||[];
       this.addData = body;
     }.bind(this));
     allSelect().then(function(res){
       var body = res.data||[];
       this.selectData = body;
     this.select = this.selectData[0].name;
     this.selectArea({target:{value:this.select}});
     }.bind(this));
     allPie().then(function(res){
       var body = res.data||[];
       this.pieData = body;
     }.bind(this));
     allstatus().then(function(res){
       var body = res.data||[];
       this.statusData = body;
     }.bind(this));
     this.$nextTick(function(){
       setTimeout(()=>{
      this.echrtsOne();
      this.echrtsEight();
      this.echrtsTwo();
       },500)
     });
  },1000*1000)
  },
   destroyed () {
      clearInterval(this.sx)
  },
  methods: {
	  //弹窗
	  preview(val){
		  this.title = val.name||{};
		  this.openSpecific=true;
		  this.name = val.name;
		  var param ={
		       name: this.name,
		   }
		   popUp(param).then((res) => {
			   var body = res.data||[];
			   var filterArr = ['出煤系统',"一区队","采场一级计量","生活区一级计量",'生活区内西侧绿化', '生活区内东侧绿化']
			   body = body.filter((item)=>{
				return !filterArr.includes(item)
			   })
			   this.popData = body

		   });
	  },
	   // 
   selectArea(event) {
     this.select = event.target.value;
   	var param ={
         value:this.select,
     }
     allBar(param).then((res) => {
       var body = res.data||[];
       this.barData = body;
       this.echrtsEight()
     });
   },
	echrtsOne(){
    this.echartsCombuild =this.echartsCombuild|| echarts.init(this.$refs.Combuild);
		this.echartsCombuild.setOption({
			color: [ "#06fff6"],
			 tooltip: {
			      trigger: 'axis',
			      formatter: function(params) {
			        var name = params[0].name
			        var value = params[0].value
			        return name + ':' + value + 'm³'
			      },
				  backgroundColor : '#fff',
				  textStyle : {
				  		color : '#000'
				  		},
			    },
				legend: {
					top:'1%',
					right:'3%',
					data: ['总量'],
					textStyle:{
					  color: '#89c7ec',
					}
				},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
			type: 'category',
			boundaryGap: false,
			axisLine: {
				lineStyle: {
					color: '#d0efff',
					width: 1, //这里是为了突出显示加上的
				},
			},
			axisLabel: {
				interval: 0,
				rotate: 28,//倾斜度
			},
			axisTick: { show: false },
			data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
			//data:this.addmonth.time||[],
		},
		yAxis: {
			type: 'value',
			scale:true,
			min: (value) => {
				return value.min
			},
			max: (value) => {
				return value.max+5
			},
			name: "单位/m³",
			nameTextStyle:{
				//y轴上方单位的颜色
				color:'#fff'  
			},
			axisLabel: {
				formatter: '{value}',
				show: true,
			　　color: '#d0efff',
			},
		splitLine: {
		show: true,
			lineStyle:{
			type:'dashed',
			color: '#3b5287'
		}
		},
		},
		series: [
		{
			 name: '总量',
			type: 'line',
			stack: 'Total',
			data: this.addmonth.value||[],
			symbol:'triangle',
			symbolSize: 7,   //设定中心点的大小
		},

		]
		})
	},
	
	// 图二
	echrtsEight(){
     this.echartsPumproom =this.echartsPumproom|| echarts.init(this.$refs.Pumproom);
		this.echartsPumproom.setOption({
		 tooltip: {
			trigger: 'axis',
			axisPointer: {
			  type: 'cross',
			  crossStyle: {
				color: '#ffd635'
			  }
			}
		  },
		  legend: {
			top:'1%',
			right:'3%',
			data: ['总量'],
			textStyle:{
			  color: '#89c7ec',
			}
		  },
		  xAxis: [
			{
				type: 'category',
				axisTick: { show: false },
			   data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
			   //data:this.barData.time||[],
			   axisLine: {
				  show: false, //背景线条
				  lineStyle: {
					  color: '#CED5E1',
				  },
			  },
			  axisLabel: {
				show: true,
				color: '#d0efff',
				width: 1,
			  },
			  axisPointer: {
				type: 'shadow'
			  }
			}
		],
		  yAxis: [
			{
				name: "单位/m³",
				nameTextStyle:{
					//y轴上方单位的颜色
					color:'#fff'  
				},
			  type: 'value',
			  scale:true,
			 min: (value) => {
			    return 0
			  },
			  max: (value) => {
			    return value.max
			  },
			  axisLabel: {
				formatter: '{value}',
				show: true,
		　　　　 color: '#d0efff',
			  },
			splitLine: {
			show: true,
				lineStyle:{
				type:'dashed',
				color: '#3b5287'
			}
			},
			},
		  ],
		  series: [
			{
			  name: '总量',
			  type: 'bar',
			  color: {
				type: 'linear',
				x: 0, //右
				y: 0, //下
				x2: 0, //左
				y2: 1, //上
				colorStops: [
				  {
					offset: 0,
					color: '#0fa8fe' // 0% 处的颜色
				  },
				  {
					offset: 1,
					color: '#0868f6' // 100% 处的颜色
				  }
				]
			  },
			  // color: ['#09a7fb'],
			  barWidth : 18, //柱图宽度
			  tooltip: {
				valueFormatter: function (value) {
				  return value ;
				}
			  },
			  //data:[100,200,23,43,54,65,66,54,36,98,150,210]
			  data:this.barData.value||[]
			},

		 ]
		})
	},
	//图三
	echrtsTwo(){
     this.echartswatermeter =this.echartswatermeter|| echarts.init(this.$refs.watermeter);
	  this.echartswatermeter.setOption({
	  tooltip: {
	     trigger: 'item'
	   },
	   legend: {
	     top: '5%',
	     left: 'center',
		textStyle:{
			 color:'#fff'
		   }
	   },
	   series: [
	     {
	       name: '设备',
	       type: 'pie',
	       radius: ['40%', '60%'],
	       avoidLabelOverlap: false,
	       label: {
	         show: false,
	         position: 'center'
	       },
	       emphasis: {
	         label: {
	           show: true,
	           fontSize: 40,
	           fontWeight: 'bold'
	         }
	       },
	       labelLine: {
	         show: false
	       },
		   data:this.pieData,
		   itemStyle: {
			   normal: {
				 color: function (colors) {
				   var colorList = [
					 '#01aefb',
					  '#02e7fe',
					 '#f44c71',
				   ];
				   return colorList[colors.dataIndex];
				 }
			   },
			 }
	     }
	   ]
	 });
	},
  },  
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 35px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
.box_top{
	width: 100%;
	height: 11.125rem;
	display: flex;
	justify-content: space-around;
	align-items: center;
    margin-top: 20px;
	.one:nth-child(1){
		width:12rem;
		height: 11.125rem;
		border-radius: 7px;
		background-image:-webkit-linear-gradient(bottom,#4876ff,#5cacee);
		}
	.one:nth-child(2){
		width:12rem;
		height: 11.125rem;
		border-radius: 7px;
		background-image:-webkit-linear-gradient(bottom,#bd426e,#ff34b3);
	}
	 .one:nth-child(3){
		width:12rem;
		height: 11.125rem;
		border-radius: 7px;
		background-image:-webkit-linear-gradient(bottom,#278cac,#48d1cc);
	}
	.one:nth-child(4){
		width:12rem;
		height: 11.125rem;
		border-radius: 7px;
		background-image:-webkit-linear-gradient(bottom,#5d53ba,#9056b0);
	}
	.one:nth-child(5){
		width:12rem;
		height: 11.125rem;
		border-radius: 7px;
		background-image:-webkit-linear-gradient(bottom,#b75046,#ba7840);
	}
	.one:nth-child(6){
		width:12rem;
		height: 11.125rem;
		border-radius: 7px;
		background-image:-webkit-linear-gradient(bottom,#308f31,#60a061);
	}
	.one:nth-child(7){
		width:12rem;
		height: 11.125rem;
		border-radius: 7px;
		background-image:-webkit-linear-gradient(bottom,#00cdcd,#57e9e6);
	}
	.one:nth-child(8){
		width:12rem;
		height: 11.125rem;
		border-radius: 7px;
		background-image:-webkit-linear-gradient(bottom,#ff7f00,#ffa54f);
	}
}
.one{
	// width: 19.6875rem;
	width: 20rem !important;
	height: 100%;
}

.box_content{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.box_title{
	position: relative;
	width: 100%;
	height: 50%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	i{
		font-size: 20px; 
		color: #fff;
		font-style: normal;
		margin: 0px 8px 0px 8px;
		letter-spacing: 3px;
	}
	span{
		font-size: 16px;
		color: #fff;
		font-weight: bold;
	}
}
.box_number{
	width: 100%;
	height: 50%;
	display: flex;
	justify-content: flex-start;;
	align-items: center;
	font-size: 16px;
	color: #fff;
	font-weight: bold;
	letter-spacing: 2px;
	padding-left:20px;
}


.box_bottom{
	width:98%;
	height: 44rem;
	display: flex;
	justify-content:space-around;
	align-items: center;
	margin:15px 0px 0px 20px;
	.left{
		width: 61.375rem;
		height: 100%;
		display: flex;
		flex-direction: column;
		.top_leftcontent{
			width: 100%;
			height: 50%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background:no-repeat  url('~@/assets/images/right.png');
		}
		
		.bottom_leftcontent{
			width: 100%;
			height: 50%;
			background:no-repeat  url('~@/assets/images/right.png');
			margin-top: 15px;
		}
		.chartOne{
			width:93%;
			height:80%;
		}
		.chartEight{
			width:95%;
			height:16.3125rem;
		}
	}
	.box_text{
		width: 97%;
		height:1.875rem;
		color: #0db9e3;
		font-size: 18px;
		font-weight: bold;
		letter-spacing: 0.1875rem;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 15px;
		margin-top: 15px;
	}
	.right{
		width: 38%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.block{
		width:100%;
		height:90%;
		display: flex;
		justify-content:space-around;
	}
	.line{
		height:90%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items:center;
		.watercount{
			width:277px;
			height:65px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.watercount:nth-child(1){color:#02adfb;}
		.watercount:nth-child(2){color:#03feed;}
		.watercount:nth-child(3){color:#f54c74;}
	
		
	}
	.chartTwo{
		width:300px;
		height:300px;
	}
	.top_rightcontent{
		width: 100%;
		height: 50%;
		background:no-repeat  url('~@/assets/images/left.png');	
		background-size: 100% 100%;
	}
	.bottom_rightcontent{
		width: 100%;
		height: 50%;
		background:no-repeat  url('~@/assets/images/left.png');
		background-size: 100% 100%;
		margin-top: 15px;
		overflow-y: scroll!important;
	}
	table{
		width: 100%;
		height: 80%;
		margin-top: 10px;
	}
	th{
		height: 50px!important;
		color: #5ff;
	    background-color: #14285b;
	}
	td{
		height: 50px;
		text-align: center;
		color: #fff;
	}
	select{
		width:24.375rem;
		height: 2.5rem;
		background:no-repeat  url('~@/assets/images/checkselect.png');
		margin:10px 0px 0px 20px;
		border: none!important;
		color:#fff;
		font-size: 15px;
	}
	option{
		background-color: #041d55;
	}
	::-webkit-scrollbar {
	    width: 1px;
	    background-color: skyblue;
	}
    .wateradd{
		width: 17rem;
		height: 90px;
		border: 3px solid #ddd;
		border-radius: 5px;
	    border-image: linear-gradient(rgb(38, 108, 182),#fff) 30 30;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 0.25rem;
		font-size: 0.16rem;
		color: #fff;
		font-weight:bold;
		.content_border{
		    width: 33%;
		    height: 100%;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
		    align-items: center;
		
		  }
		  .numberone{
			width: 2rem;
		    height: 2rem;
		    border-radius:50%;
		    background-color:#fedb65;
		    color:#000000;
			font-size: 15px;
			font-weight: bold;
		    position: relative;
		    top:0.2rem;
			display: flex;
			justify-content: center;
			align-items: center;
		    span{
		      display: flex;
		      justify-content: center;
		      align-items: center;
			  line-height: rem;
		    }
		  }
		  .number{
		    font-size: 0.8rem;
		    color:#68feff;
		    font-weight: bold;
		    position: relative;
		    top:0.2rem;
		  }
		  .value{ 
		    font-size: 0.9rem;
			margin-top:2px;
		  }
		  .pictureCirle{
			width:2.875rem;
			height: 2.5625rem;
			background:no-repeat  url('~@/assets/images/overviewImage/cicle.png');  
			background-size: 100% 100%;
		  }
		  
	}
}
</style>
<style>
	.pop-content  .el-dialog{
	   width: 470px;
	   height: 460px;
	   background: url("~@/assets/images/alert.png");   
	 }
	.pop-content .el-dialog__header{
	   font-size: 35px;
	   font-family: Source Han Sans CN;
	   font-weight: bold;
	   line-height: 50px;
	   border-bottom: 1px solid #2af4fc;
	 }
	.pop-content .el-dialog__title{
	   color: #fff!important;	   
	 }
	 .pop-content .el-dialog__close{
		 color:#fff;
		 font-size: 25px;
	 }
	.pop-content .el-dialog__body{
	   overflow-y: scroll;
	  max-height: 22.25rem;
	 }
	 .pop-content ::-webkit-scrollbar {
   width: 1px;
   background-color: skyblue;
	 }
	 .popLine{
		width:100%;
		height: 2.5rem;
		color:#00ffff;
		font-size: 18px;
		font-weight: bold;
		letter-spacing: 5px;
	 }
</style>
