<template>
	<div class="dashboard-container home_user">
		<div class="statistics">
			<ul>
				<li>
					<div class="liner">
						<div class="content">
							<span>{{statistic.deviceSum}}</span>个
							<p>终端总数</p>
						</div>
						<div class="ornament">
							<i></i><i></i><i></i><i></i>
						</div>
					</div>
				</li>
				<li>
					<div class="liner">
						<div class="content">
							<span>{{statistic.sensorSum}}</span>个
							<p>传感器总数</p>
						</div>
						<div class="ornament">
							<i></i><i></i><i></i><i></i>
						</div>
					</div>
				</li>
				<li>
					<div class="liner">
						<div class="content">
							<span>{{statistic.deviceOnline}}</span>个
							<p>设备在线</p>
						</div>
						<div class="ornament">
							<i></i><i></i><i></i><i></i>
						</div>
					</div>
				</li>
				<li>
					<div class="liner">
						<div class="content">
							<span>{{statistic.deviceOffline}}</span>个
							<p>设备离线</p>
						</div>
						<div class="ornament">
							<i></i><i></i><i></i><i></i>
						</div>
					</div>
				</li>
			</ul>
		</div>

		<div class="panel-bottom">
			<div class="c-left">
				<div class="panle_div">
					<div class="panel-liner">
						<h3>项目终端数量统计</h3>
						<div class="panel-content">
							<div class="scrolling">
								<dl class="content-within">
									<dd v-for="(item, index) in projectList" :key="index">
										<div class="l-left">{{item.projectName}}</div>
										<div class="l-right">
											<el-progress :stroke-width="20" :percentage="item.num" :format="progressFormat"></el-progress>
										</div>
									</dd>
								</dl>
							</div>
						</div>
					</div>
				</div>
				<!-- <div class="panle_div">
					<div class="panel-liner">
						<h3>传感器数目统计</h3>
						<div class="panel-content">
							<div class="scrolling">
								<dl class="content-within">
									<dd v-for="(item, index) in numberOfSensorsList" :key="index">
										<div class="l-left">{{item.projectName}}</div>
										<div class="l-right">
											<el-progress :stroke-width="20" :percentage="item.num" :format="progressFormat"></el-progress>
										</div>
									</dd>
								</dl>
							</div>
						</div>
					</div>
				</div> -->
			</div>
			<div class="c-right">
				<div class="right-within">
					<div class="content-fix">
						<el-carousel :interval="5000" arrow="always">
							<el-carousel-item v-for="(item,index) in defaultRotationImg" :key="index">
								<div class="in-box">
									<img :src="item.base64">
								</div>
							</el-carousel-item>
						</el-carousel>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Tools, HttpReq } from '@/assets/js/common.js';
import pointIcon from '@/assets/images/point.png';

export default {
	name: 'Dashboard',
	components: {
	},
	data() {
		return {
			query:{
				page: 1,
				size: 10,
				total: 0,
				sort: 'date,desc'
			},
			numberOfSensorsList: [],
			projectList: [],
			carouselList:[],
			defaultRotationImg:[{base64:'../../static/images/banner/1.png'},{base64:'../../static/images/banner/2.jpg'},{base64:'../../static/images/banner/3.jpg'},{base64:'../../static/images/banner/4.jpg'}],
			statistic:{
				deviceSum:0,
				deviceOnline:0,
				deviceOffline:0,
				sensorSum:0,
			},
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.loadData()
		})
	},
	methods: {
		loadData() {
			this.reqSensorInfo();
			this.reqUserCount();
			this.reqDeviceOnlineCount();
			this.reqDeviceOfflineCount();
			this.reqTerminalsCount();
			//this.reqWarningInfo();

			this.reqDrawings();// 轮播图
		},
		// 获取客户总数   获取终端总数
		reqUserCount(){
			HttpReq.plantFactory.getCustomerTotal().then((res) => {
				//console.log('获取客户总数',res);
				if(!res[0].id){
					this.statistic.deviceSum = 0;
				}else{
					this.statistic.deviceSum = res[0].id;
				}
			})
		},
		//获取传感器总数
		reqSensorInfo(){
			HttpReq.plantFactory.getSensorTotal().then((res) => {
				//console.log('获取传感器总数',res);
				if(!res.count){
					this.statistic.sensorSum = 0;
				}else{
					this.statistic.sensorSum = res.count;
				}
			})
		},
		// 获取设备在线
		reqDeviceOnlineCount(){
			HttpReq.plantFactory.getEquipmentOnlineTotal().then((res) => {
				//console.log('获取设备在线',res);
				if(!res[0].id){
					this.statistic.deviceOnline = 0;
				}else{
					this.statistic.deviceOnline = res[0].id;
				}
			})
		},
		// 获取设备离线
		reqDeviceOfflineCount(){
			HttpReq.plantFactory.getEquipmentOfflineTotal().then((res) => {
				//console.log('获取设备离线',res);
				if(!res[0].id){
					this.statistic.deviceOffline = 0;
				}else{
					this.statistic.deviceOffline = res[0].id;
				}
			})
		},
		//获取项目终端数量统计表
		reqTerminalsCount(){
			HttpReq.plantFactory.getTerminalsStatisticsTotal().then((res) => {
				//console.log('获取项目终端数量统计表',res);
				if(!res){
					this.projectList = [];
				}else{
					this.projectList = res;
				}
			})
		},
		//获取传感器数目统计表
		reqWarningInfo(){
			HttpReq.plantFactory.getSensorTableList(param).then((res) => {
				if(res.head.code === '0000'){
					var body = res.body || {};
					this.warningTableList = body.list || [];
				};
			})
		},
		//轮播图
		reqDrawings(){
			let that = this;
			HttpReq.plantFactory.getRotationChart().then((res) => {
				//console.log(res);
				if(res.totalElements != 0){
					var body = res.content || {};
					var list = body.list;
					var len = list.length;
					function asyncLoop(i){
						if(i < len){
							that.getBannerCanvas(list[i]).then(() => {
								asyncLoop(++i)
							});
						}else{	// end
							that.carouselList = list
						};
					}(0);
				}else{
					this.carouselList = this.defaultRotationImg;
				};
			})
		},
		progressFormat(number){
			return number + '个';
		},
		/**
		  * 获取 img canvas
		  * @param: {string} basestr
		  * @return: canvas
		  * @author: Kimber
		  * @createtime: 2021/7/2
		  */
		getBannerCanvas(item){
			var canvas = document.createElement("canvas");
			var ctx = canvas.getContext("2d");
			return new Promise((resolve, reject) => {
				var img = new Image();
				img.src = item.content;
                img.onload = () => {
					var width = img.width, height = img.height;
					canvas.width = width;
					canvas.height = height;
					ctx.drawImage(img, 0, 0, width, height);
					this.subPoints(ctx, item.points).then(() => {
						item.base64 = canvas.toDataURL('image/jpeg');
						resolve(item.base64)
					});
                }
                img.onerror = (e) => {
                    reject(e)
                }
            })
		},
		subPoints(ctx, points){
			var img = new Image();
			img.src = pointIcon;
			return new Promise((resolve, reject) => {
                img.onload = () => {
					var width = img.width, height = img.height;
					for(var point of points){
						ctx.drawImage(img, point.x, point.y, width, height);
					};
					resolve()
                }
                img.onerror = (e) => {
					reject(e)
                }
            })
		},
	}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.home_user{
		flex:1;display:flex;position:relative;height:auto;margin:0 0 0 .833vh;height:100%;width:100%;color:#58dbff;
		flex-direction:column;

		.el-table__empty-block{background-color:#00344D}

		li{list-style:none;margin:0;padding:0;}

		.statistics{
			/* height:375px; */

			ul{margin:0;padding:0;display:grid;grid-template-columns:25% 25% 25% 25%;}

			li{
				border:1px solid #04defe;flex:5;margin:0 .937vw 1.666vh 0;height:169px;padding:5px;
				display:flex;

			}

			.liner{
				position:relative;width:100%;
				display:flex;align-items:center;justify-content:center;
			}

			.content{
				text-align:center;
				span{font-weight:bold;font-size:46px;display:inline-block;margin-right:.520vw;}
				p{margin:0;padding:0;width:8.802vw;line-height:38px;color:#fff;background-image:linear-gradient(to right, #006ae1, #16b7ff);border-radius:6px;}
			}

			.ornament{
				i{
					position:absolute;width:.781vw;height:.781vw;
					background:no-repeat center center url('~@/assets/images/layout/icon_1.png');
					background-size:100% 100%;
				}
				i:nth-child(1){top:0;left:0;}
				i:nth-child(2){top:0;right:0;transform:rotate(90deg);}
				i:nth-child(3){bottom:0;right:0;transform:rotate(180deg);}
				i:nth-child(4){bottom:0;left:0;transform:rotate(270deg);}
			}
		}

		.panel-bottom{
			margin-right:.937vw;
			height:100%;display:flex;

			>div{
				h3{
					line-height:40px;margin:0;padding:0 10px;font-weight:normal;font-size:16px;
				}
			}
			.c-left{
				width:30vw;height:100%;display:flex;flex-direction:column;

				.panle_div{border:1px solid #04d4f7;
					flex:1;height:36.018vh;margin-bottom:1.851vh;position:relative;
					.panel-liner{
						position:absolute;top:0;left:0;height:100%;width:100%;display:flex;flex-direction:column;
					}
					.panel-content{
						position:relative;flex:1;font-size:13px;

						.scrolling{position:absolute;top:0;left:0;height:100%;width:100%;overflow-y:auto;}
						.content-within{padding:0 .925vh;}
						.el-table th, .el-table td{color:#fff;background-color:#00224e;}
						.el-table--small th{padding:7px 0;}
						.el-table--small td{padding:5px 0;}
						.el-table th.is-leaf, .el-table td{border-bottom:1px solid #075257;}
						.el-table::before{background-color:#075257;}
					}
				}
				.panle_div:last-child{margin-bottom:0;}
				dl{margin-top:.740vh;font-size:13px;}
				dd{
					display:flex;height:38px;margin:0;padding:0;align-items:center;
				}
				.l-left{width:80px;text-align:right;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
				.l-right{flex:1;margin-left:10px;}
				.el-progress__text{color:#04defe;font-size:14px !important;}
			}

			.c-right{border:1px solid #04d4f7;
				flex:1;height:100%;margin-left:.989vw;display:flex;
				.right-within{position:relative;flex:1;margin:8px;}
				.content-fix{position:absolute;top:0;left:0;height:100%;width:100%;}
			}
		}

		.el-carousel{
			height:100%;
			.el-carousel__container{height:100%;}

			li{margin:0 3px;}

			.in-box {
				color: #475669;
				font-size: 18px;
				opacity: 0.75;
				height:100%;
				margin: 0;

				img{display:block;height:100%;width:100%;border:0;}
			}

			.el-carousel__item:nth-child(2n) {
				background-color: #99a9bf;
			}

			.el-carousel__item:nth-child(2n+1) {
				background-color: #d3dce6;
			}
		}

		.el-table{
			.alarm{color:#ff0000;}
			.normal{color:#b3b3b3;}
		}
	}
</style>
