<template>
	<div class="home_manage">
		<div class="statistics">
			<ul>
				<li v-for="(item,index) in dataList" :key="index">
					<div class="liner">
						<div class="content">
              <span>{{item.online}}</span>在线
							<a href="/system/user"><p>{{item.name}}</p></a>
						</div>
						<div class="ornament">
							<i></i><i></i><i></i><i></i>
						</div>
					</div>
				</li>
        <li v-for="(item,index) in dataList" :key="index">
          <div class="liner">
            <div class="content">
              <span>{{item.count-item.online}}</span>离线
              <a href="/system/user"><p>{{item.name}}</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>-->

	</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'
			},
			dataList: []

		}
	},
	mounted() {
		this.$nextTick(() => {
			this.loadData();
		})
	},
	methods: {
		loadData() {
      HttpReq.truckDispatching.backgroundHomepage().then((res) => {
         console.log(res)
        this.dataList = res.data
      })
		},
		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>
