<template>
	<div class="home_manage">
		<div class="statistics">
			<ul>
				<li>
					<div class="liner">
						<div class="content">
							<span>{{statistics.users}}</span>个
							<a href="/system/user"><p>客户总数</p></a>
						</div>
						<div class="ornament">
							<i></i><i></i><i></i><i></i>
						</div>
					</div>
				</li>
				<li>
					<div class="liner">
						<div class="content">
							<span>{{statistics.projects}}</span>个
							<a href="/ProjectManage/index"><p>项目总数</p></a>
						</div>
						<div class="ornament">
							<i></i><i></i><i></i><i></i>
						</div>
					</div>
				</li>
				<li>
					<div class="liner">
						<div class="content">
							<span>{{statistics.device}}</span>个
							<a href="/DeviceManage/index"><p>终端总数</p></a>
						</div>
						<div class="ornament">
							<i></i><i></i><i></i><i></i>
						</div>
					</div>
				</li>
				<li>
					<div class="liner">
						<div class="content">
							<span>{{statistics.warning}}</span>个
							<a href="/Warning/index"><p>传感器总数</p></a>
						</div>
						<div class="ornament">
							<i></i><i></i><i></i><i></i>
						</div>
					</div>
				</li>

				<li>
					<div class="liner">
						<div class="content">
							<span>{{statistics.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>{{statistics.deviceOffline}}</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>{{statistics.userRegiester}}</span>个
							<a href="/system/user"><p>用户申请</p></a>
						</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">
				<h3>项目终端数量统计</h3>
				<div class="content" style="padding-top:10px;box-sizing: border-box;">
					<dl>
						<dd v-for="(item, index) in projectList" :key="index" style="display:flex;margin-top:10px;">
							<div style="width:10%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden; word-break: break-all;margin-left:40px;">{{item.projectName}}</div>
							<div style="width:75%;">
								<el-progress :stroke-width="20" :percentage="parseInt(item.sum)" :format="progressFormat"></el-progress>
							</div>
						</dd>
					</dl>
				</div>
			</div>
			<!-- <div class="c-right">
				<div class="cr-liner scrolling">
					<h3>传感器数目统计</h3>
					<div class="content">
						<dl>
							<dd v-for="(item, index) in numberOfSensorsList" :key="index" style="display:flex;margin-top:10px;">
								<div style="width:10%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden; word-break: break-all;">{{item.projectName}}</div>
								<div style="width:85%;">
									<el-progress :stroke-width="20" :percentage="item.num" :format="progressFormat"></el-progress>
								</div>
							</dd>
						</dl>
					</div>
				</div>
			</div> -->
		</div>

	</div>
</template>

<script>
import { Tools, HttpReq } from '@/assets/js/common.js';
import '@/assets/styles/common.css';

export default {
	name: 'Dashboard',
	components: {
	},
	data() {
		return {
			query:{
				page: 1,
				size: 10,
				total: 0,
				sort: 'date,desc'
			},
			numberOfSensorsList: [],
			projectList: [],
			statistics:{
				users:0,
				projects:0,
				device:0,
				warning:0,
				deviceOnline:0,
				deviceOffline:0,
				toDayWarning:0,
				userRegiester:0,
			},

		}
	},
	mounted() {
		var that = this;
		this.$nextTick(() => {
			this.loadData();
		})
	},
	methods: {
		loadData() {
			// this.reqUserCount();
			// this.reqWarningCount();
			// this.reqProjectInfo();
			// this.reqDeviceOnlineCount();
			// this.reqDeviceOfflineCount();
			// this.reqNotActiveCount();
			// this.reqTerminalsCount();
			//this.reqWarningInfo();
		},
		// 获取客户总数   获取终端总数
		reqUserCount(){
			HttpReq.plantFactory.getCustomerTotal().then((res) => {
				//console.log('获取客户总数',res);
				if(!res[0].id){
					this.statistics.users = 0;
					this.statistics.device = 0;
				}else{
					this.statistics.users = res[0].id;
					this.statistics.device = res[0].id;
				}
			})
		},
		//获取项目总数
		reqProjectInfo(){
			HttpReq.plantFactory.getProjectTotal().then((res) => {
				//console.log('获取项目总数',res);
				if(!res.count){
					this.statistics.projects = 0;
				}else{
					this.statistics.projects = res.count;
				}
			})
		},
		// 获取传感器总数
		reqWarningCount(){
			HttpReq.plantFactory.getSensorTotal().then((res) => {
				//console.log('获取传感器总数',res);
				if(!res.count){
					this.statistics.warning = 0;
				}else{
					this.statistics.warning = res.count;
				}
			})
		},
		// 获取设备在线
		reqDeviceOnlineCount(){
			HttpReq.plantFactory.getEquipmentOnlineTotal().then((res) => {
				//console.log('获取设备在线',res);
				if(!res[0].id){
					this.statistics.deviceOnline = 0;
				}else{
					this.statistics.deviceOnline = res[0].id;
				}
			})
		},
		// 获取设备离线
		reqDeviceOfflineCount(){
			HttpReq.plantFactory.getEquipmentOfflineTotal().then((res) => {
				//console.log('获取设备离线',res);
				if(!res[0].id){
					this.statistics.deviceOffline = 0;
				}else{
					this.statistics.deviceOffline = res[0].id;
				}
			})
		},
		//获取用户申请
		reqNotActiveCount(){
			HttpReq.plantFactory.getUserApplicationTotal().then((res) => {
				//console.log('获取用户申请',res);
				if(!res[0].id){
					this.statistics.userRegiester = 0;
				}else{
					this.statistics.userRegiester = 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) => {
				console.log(res);
				// if(res.head.code === '0000'){
				// 	var body = res.body || {};
				// 	this.numberOfSensorsList = body.list || [];
				// };
			})
		},
		progressFormat(number){
			return number + '个';
		},
	}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.home_manage{
		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:15px;height:15px;
					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 0 0 10px;font-weight:normal;font-size:16px;
				}
			}

			.c-left{
				width:90vw;height:100%;display:flex;flex-direction:column;

				dl{margin-top:.740vh;font-size:13px;}

				dd{
					display:flex;margin:0;padding:0;align-items:center;
				}

				.l-left{width:90px;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{
				position:relative;flex:1;height:100%;margin-left:.989vw;

				.cr-liner{position:absolute;top:0;left:0;height:100%;width:100%;display:flex;flex-direction:column;overflow-y:auto;}
			}

			.content{
				position:relative;flex:1;margin:0 10px;background-color:#00224e;

				.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,	td{border-bottom:1px solid #075257;}
				}
				.el-table::before{background-color:#075257;}
			}
		}

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