sailun
/
sailun-agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>title</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
		<link href="../../b/css/bootstrap.min.css" rel="stylesheet">
		<!--<link href="../../b/css/base.css" rel="stylesheet">-->
		<link href="../../b/css/style.css" rel="stylesheet">
		<style>
			body {
				width: 100% !important;
				overflow: hidden;
			}
			.bar {
				width: 100% !important;
				height: 170px;
			}
			.box-content {
				border: 0px solid #fff;
				margin-top: -30px;
			}
			.quan {
				width: 100%;
				height: 180px !important;
				margin-top: 20px;
				margin-left: -50px;
			}
			.text-right {
				position: absolute;
				right: 10%;
				top: 20%;
			}
			.aui-table-title ul, .aui-table-content ul, .aui-table-page ul {
				display: flex;
				display: -webkit-flex;
			}
			.aui-table-title ul li, .aui-table-content ul li, .aui-table-page ul li {
				flex: 1;
				text-align: center;
				color: #fff;
				padding: 8px 0;
				font-size: 0.6rem;
			}
			.aui-table-content ul {
				border-bottom: 1px solid #fff;
			}
			.aui-table-content ul li {
				border-right: 1px solid #fff;
				color: #007f86;
				font-size: 0.6rem;
			}
			.demo {
				background-color: #007f86;
			}
			.demo2 {
				background-color: #b5b6b6;
			}
			.aui-table-page ul li:first-of-type {
				flex: 2;
				text-align: center;
			}
			input[type=number] {
				-moz-appearance: textfield;
			}
			input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}
			.aui-page-input {
				width: 80% !important;
				background-color: #fff !important;
				height: 1.1rem !important;
				padding: 0px 5px !important;
				font-size: 0.7rem !important;
				margin-top: -2px !important;
			}
			/* 筛选条件 */
			.aui-tiaojian {
				padding: 5px 10px;
				border: 1px solid #ddd;
				width: 98%;
				margin-left: 1%;
				border-radius: 5px;
				margin: 2% 0;
			}
			.aui-tiaojian .aui-tiaojian-item {
				padding: 5px;
			}
			.aui-tiaojian .aui-tiaojian-item:first-of-type {
				border-bottom: 1px solid #ddd;
			}
			.aui-tiaojian .aui-tiaojian-item em {
				padding: 1px 5px;
				background-color: #009944;
				margin-left: 5px;
				color: #fff;
				font-size: 0.6rem;
			}
			.aui-tiaojian .aui-tiaojian-item em .aui-icon-close {
				font-size: 0.6rem;
				margin-left: 10px
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="aui-bar aui-bar-btn" style="width:80%;margin-top: 10px;margin-bottom: 10px">
				<div class="aui-bar-btn-item aui-active">
					出入库分析
				</div>
				<div class="aui-bar-btn-item">
					成本利润分析
				</div>
			</div>
			<!-- 出入库分析 -->
			<div class="tab-content" id="ss1">
				<div id="xmzt">
					<div class="container-fluid">
						<canvas id="xiangmuzhitou" class="col-lg-12 xiangmuzhitou_height bar"></canvas>
					</div>
				</div>
				<div class="content-title"></div>
				<div class="row">
					<div class="col-lg-12">
						<div class="box float-e-margins">
							<div class="box-title">
								<h5>出入库分析</h5>
								<small class="pull-right"><i>数据截止至：2019-07-01 00:00:00</i></small>
							</div>
							<div class="box-content">
								<div class="row">
									<div class="col-sm-3">
										<ul class="list-group clear-list m-t-md m-b-none">
											<li class="list-group-item fist-item">
												入库成本金额<span class="pull-right num"> 0.00 </span>
											</li>
											<li class="list-group-item">
												成本比例 <span class="pull-right num"> 0.00 % </span>
											</li>
											<li class="list-group-item">
												用户本金损失金额 <span class="pull-right num"> 0.00 </span>
											</li>
											<li class="list-group-item">
												用户本金损失比例 <span class="pull-right num"> 0.00 % </span>
											</li>
											<li class="list-group-item">
												合作渠道代偿金额 <span class="pull-right num"> 42,393,865.88 </span>
											</li>
											<li class="list-group-item">
												项目展期 <span class="pull-right num"> 0.00 </span>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 第二个 -->
			<div class="tab-content" id="ss2">
				<div class="row">
					<div class="col-lg-3 col-sm-6">
						<div class="box float-e-margins">
							<div class="box-content" style="background-color: transparent;">
								<div class="echart-chart">
									<canvas id="baozhangfangshifenbu" class="col-lg-8 xiangmuzhitou_height quan"></canvas>
									<div class="text-right">
										<ul class="list-unstyled">
											<li>
												<a href="#">奥森</a>&nbsp;<span class="glyphicon glyphicon-minus color_4FC1E9"></span>
											</li>
											<li>
												<a href="#">奥森</a>&nbsp;<span class="glyphicon glyphicon-minus color_F89135"></span>
											</li>
											<li>
												<a href="#">奥森</a>&nbsp;<span class="glyphicon glyphicon-minus color_F8585B"></span>
											</li>
											<li>
												<a href="#">奥森</a>&nbsp;<span class="glyphicon glyphicon-minus color_FFDC89"></span>
											</li>
											<li>
												<a href="#">奥森</a>&nbsp;<span class="glyphicon glyphicon-minus color_66CC66"></span>
											</li>
											<li>
												<a href="#">奥森</a>&nbsp;<span class="glyphicon glyphicon-minus color_596373"></span>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="aui-tiaojian"></div>
				<!-- 库存表格展示 -->
				<div class="aui-table-title demo">
					<ul>
						<li>
							品牌
						</li>
						<li>
							型号
						</li>
						<li>
							库存
						</li>
					</ul>
				</div>
				<div class="aui-table-content demo2">
					<ul >
						<li>
							奥森
						</li>
						<li>
							YC-02
						</li>
						<li>
							5
						</li>
					</ul>
					<ul >
						<li>
							奥森
						</li>
						<li>
							YC-02
						</li>
						<li>
							5
						</li>
					</ul>
					<ul >
						<li>
							奥森
						</li>
						<li>
							YC-02
						</li>
						<li>
							5
						</li>
					</ul>
					<ul >
						<li>
							奥森
						</li>
						<li>
							YC-02
						</li>
						<li>
							5
						</li>
					</ul>
					<ul >
						<li>
							奥森
						</li>
						<li>
							YC-02
						</li>
						<li>
							5
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/aui-tab.js" ></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<!-- Js -->
	<script src="../../b/js/jquery-1.8.0.min.js"></script>
	<script src="../../b/js/bootstrap.min.js"></script>
	<script src="../../b/js/setting.js"></script>
	<script src="../../b/js/Chart.min.js"></script>
	<script src="../../b/js/echarts-all.js"></script>
	<script type="text/javascript">
		apiready = function() {
		};
		var bar = document.querySelectorAll(".aui-bar-btn");
		if (bar) {
			for (var i = 0; i < bar.length; i++) {
				var d = bar[i];
				var tab = new auiTab({
					element : bar[i],
					repeatClick : true
				}, function(ret) {
					var lo = document.querySelectorAll(".tab-content");
					for (var i = 0; i < lo.length; i++) {
						lo[i].style.display = 'none';
					}
					//  ret.index  1开始
					document.getElementById("ss" + ret.index).style.display = "block";
				});
			}
		}
	</script>
</html>