<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="icon" th:href="@{image/sgl.png}" sizes="32x32">
	<script th:src="@{/js/rem.js}"></script>
	<script th:src="@{/js/echarts/echarts.min.js}"></script>
	<script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/layui/jquery-3.4.1.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/rules.js}"></script>
	<script th:src="@{/js/echarts/echarts.min.js}"></script>
</head>
<style>
	.layui-inline{margin-top: 0px;}
	.layui-form .layui-form-label{height:42px;line-height: 42px;}
	.right{right:50px;float:right;}
	.layui-breadcrumb{height: 60px;line-height: 60px;}
	.layui-breadcrumb>a{font-size: 16px;}

	.titleDiv{height:220px;background: #f7f7f7;border-radius: 10px;}
	.titleDiv>.searchDiv{height: 60px;line-height: 60px;}
	.titleDiv>.allPre{height: 160px;}
	.fenge{height:10px;}
	.content{background: #f7f7f7;height: /*calc(100% - 230px)*/800px;}

	/*标题框卡片样式*/
	.titleDiv .chart{width: 50%;height: 100%;display: inline-block;float:left;position: relative;}
	.titleDiv .chart>div{background: #FFFFFF;top: 8px;left: 8px;right: 8px;bottom: 8px;position: absolute;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);transition: 0.3s;}
	.titleDiv .chart>div:hover {box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);}

	/*内容框 滚动条样式 上到下为 滚动条*/
	/*.content::-webkit-scrollbar {width: 10px;height: 1px;}*/
	/*.content::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #535353;}*/
	/*.content::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 10px;background: #EDEDED;}*/

	/*内容框卡片样式*/
	.content .chart{width: 50%;height: 50%;display: inline-block;float:left;position: relative;}
	.content .chart>div{background: #FFFFFF;top: 8px;left: 8px;right: 8px;bottom: 8px;position: absolute;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);transition: 0.3s;}
	.content .chart>div:hover {box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);}

	/*卡片内样式*/
	.cardTitle{line-height:30px;height:30px;text-align: left;font-size: 16px;display: inline-block;margin-left: 15px;margin-top: 10px;font-weight: bold;}
	.content-div{height:calc(100% - 40px);display: flex;align-items: center;}

	.content-div-nr{width: 50%;display: flex;height:60px;align-items: center;float: left;padding-left: 20px;}
	.content-div-nr .img{display: inline-block;width:60px;text-align: center;}
	.content-div-nr .img>img{width: 50px;height: 50px;}

	.font-div{display: inline-block;}
	.content-div-title{color:#999999;font-size: 14px;font-weight: bold;margin-bottom: 4px;}
	.content-div-sz{font-size: 17px;font-weight: bold;}

	.jyzl .content-div-sz{font-size: 30px;font-weight: bold;}

	.middle-div{height:60px;display: flex;align-items: center;}
	.bottom-div{height:44px;display: flex;align-items: center;}
	.bottom-div-nr{width: 50%;display: flex;height:44px;align-items: center;float: left;padding-left: 20px;}
	.middle-nr{flex-direction: column;align-items: flex-start;justify-content:space-around;}
	.bottom-div-sz{font-size: 20px;color:#608ced;margin-left: 20px;font-weight: bold;}

	.line-div{width: 1px;background: #f0f0f0;}
	.h40{height: 40px;}
	.h60{height: 60px;}

	.right-margin10{float: right;margin-right:10px;margin-top: 10px;}

	.pie-chart-box{justify-content:space-between;}
	.pie-chart-item{display: flex;width:50%;height: 100%;flex-direction: column;}
	.pie-chart-line{display: flex;width: 1px;height: 100%;background: #f0f0f0;}
	.ml{margin-left: 20px;height: 20px;line-height: 20px;}
	.pie-chart{height: calc(100% - 20px);width: 100%;}
</style>
<body style="margin:0;padding:0;height:100%;width:100%;position:absolute;" class="layui-layout-body">
	<div class="titleDiv">
		<div class="searchDiv">
			<div style="display: inline-block;">
				<form class="layui-form">
					<div class="layui-inline">
						<label class="layui-form-label">日期选择</label>
						<div class="layui-input-inline">
							<input type="text" class="layui-input formWidthTwo" id="searchDate" placeholder=" ~ " >
						</div>
					</div>
				</form>
			</div>
			<div class="layui-inline layui-breadcrumb" lay-separator="|">
				  <a href="#" onclick="setDay(1)">昨天</a>
				  <a href="#" onclick="setDay(7)">近7日</a>
				  <a href="#" onclick="setDay(15)">近15日</a>
				  <a href="#" onclick="setDay(30)">近30日</a>
			</div>
			<div class="layui-inline right">
				<button class="layui-btn layui-btn-sm layui-btn-normal" data-type="search" id="search" onclick="search()"><i class="layui-icon layui-icon-search"></i>查询</button>
			</div>
		</div>
		<div class="allPre ">
			<div class="chart">
				<div>
					<span class="cardTitle">对账总览</span>
					<div class="content-div">
						<div class="content-div-nr">
							<div class="img"><img src="/image/jishu.png"></div>
							<div class="font-div">
								<div class="content-div-title">单边账笔数</div>
								<div><span class="content-div-sz" id="DBZNum">0</span></div>
							</div>
						</div>
						<div class="content-div-nr">
							<div class="img"><img src="/image/rmb.png"></div>
							<div class="font-div">
								<div class="content-div-title">三方单边账总金额</div>
								<div>¥&nbsp;<span class="content-div-sz" id="DBZThirdMoney">0</span></div>
							</div>
						</div>
						<div class="content-div-nr">
							<div class="img"><img src="/image/rmb.png"></div>
							<div class="font-div">
								<div class="content-div-title">HIS单边账总金额</div>
								<div>¥&nbsp;<span class="content-div-sz" id="DBZHisMoney">0</span></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="chart jyzl">
				<div>
					<span class="cardTitle">交易总览</span>
					<div class="middle-div">
						<div class="content-div-nr middle-nr">
							<span class="content-div-title">交易笔数</span>
							<span class="content-div-sz" id="JYNum">0</span>
						</div>
						<div class="">
							<div class="line-div h60"></div>
						</div>
						<div class="content-div-nr middle-nr">
							<span class="content-div-title">交易金额</span>
							<span>¥&nbsp;<span class="content-div-sz" id="JYMoney">0</span></span>
						</div>
					</div>
					<div class="bottom-div">
						<div class="bottom-div-nr">
							<span class="content-div-title">日均笔数</span>
							<span class="bottom-div-sz" id="avgDayNum">0</span>
						</div>
						<div class="">
							<div class="line-div h40" ></div>
						</div>
						<div class="bottom-div-nr">
							<span class="content-div-title">日均金额</span>
							<span class="bottom-div-sz">¥&nbsp;<span id="avgDayMoney">0</span></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="fenge"></div>
	<div class="content">
		<div class="chart">
			<div>
				<span class="cardTitle">单边帐笔数趋势</span>
				<div class="content-div" id="DBZNumTrend">
				</div>
			</div>
		</div>
		<div class="chart">
			<div>
				<span class="cardTitle">交易趋势</span>
				<div class="layui-btn-group right-margin10">
					<button type="button" onclick="findjyqsChartsData(this,1)" class="layui-btn layui-btn-sm layui-btn-normal">笔数</button>
					<button type="button" onclick="findjyqsChartsData(this,2)" class="layui-btn layui-btn-primary layui-btn-sm layui-border-blue">金额</button>
				</div>
				<div class="content-div" id="JYQS"></div>
			</div>
		</div>
		<div class="chart">
			<div>
				<span class="cardTitle">单边账概率</span>
				<div class="content-div" id="DBZPro"></div>
			</div>
		</div>
		<div class="chart">
			<div>
				<span class="cardTitle">交易占比</span>
				<div class="layui-btn-group right-margin10">
					<button type="button" onclick="findjyzbChartsData(this,1)" class="layui-btn layui-btn-sm layui-btn-normal">笔数</button>
					<button type="button" onclick="findjyzbChartsData(this,2)" class="layui-btn layui-btn-primary layui-btn-sm layui-border-blue">金额</button>
				</div>
				<div class="content-div pie-chart-box">
					<div class="pie-chart-item">
						<span class="content-div-title ml">支付方式</span>
						<div class="pie-chart" id="pie1"></div>
					</div>
<!--					<div class="pie-chart-line"></div>
					<div class="pie-chart-item">
						<span class="content-div-title ml">场景</span>
						<div class="pie-chart" id="pie2"></div>
					</div>-->
					<div class="pie-chart-line"></div>
<!--					<div class="pie-chart-item">-->
					<!--						<span class="content-div-title ml">厂商</span>-->
					<!--						<div class="pie-chart" id="pie3"></div>-->
					<!--					</div>-->
				</div>
			</div>
		</div>
	</div>

</body>
<script th:inline="javascript">

	let layer,laydate,table,tree,form;

	layui.use(['element','table','laydate','layer','form','tree'], function() {
		layer = layui.layer;
		table = layui.table;
		laydate = layui.laydate;
		tree = layui.tree;
		form = layui.form;


		//时间控件
		laydate.render({
			elem: '#searchDate'
			,type: 'date'
			,range: '~'
		});

		setDay(1);
	});

	//设置日期选择框时间 并查询
	function setDay(num){
		let startTime = getBeforeDate(num);
		let endTime = getBeforeDate(1);
		$("#searchDate").val(startTime+" ~ "+endTime);

		search();
	}

	//查询
	function search(){

		let param=getParam();

		findDZData(param);
		findJYData(param);

		findDBZNum(param);
		findDBZPro(param);

		findjyqsChartsData(undefined,1);
		findjyzbChartsData(undefined,1);
	}

	//获取查询要用的参数
	function getParam(){
		//获取时间
		let date=$("#searchDate").val();
		let param={};
		if(date!=='') {
			let time = date.split("~");
			let startTime = time[0].trim();
			let endTime = time[1].trim();

			param.startTime = startTime;
			param.endTime = endTime;
		}

		return param;
	}

	//对账总览
	function findDZData(param){
		let url="/home/findDZData";
		AjaxPostJson(url,param,function(data){
			if (data.errCode==='0'){
				$("#DBZNum").text(data.unilateralNum);
				$("#DBZThirdMoney").text(data.third_unilateral);
				$("#DBZHisMoney").text(data.his_unilateral);
			}
		});
	}

	//交易总览
	function findJYData(param){
		let url="/home/findJYData";
		AjaxPostJson(url,param,function(data){
			if (data.errCode==='0'){
				$("#JYNum").text(data.allNum);
				$("#JYMoney").text(data.allMoney);
				$("#avgDayNum").text(data.avgNum);
				$("#avgDayMoney").text(data.avgMoney);
			}
		});
	}

	//查询单边账数量
	function findDBZNum(param){
		let url="/home/findDBZNum";
		AjaxPostJson(url,param,function(data){
			if (data.errCode==='0'){
				setDBZNumCharts(data);
			}
		});
	}

	//查询单边账概率
	function findDBZPro(param){
		let url="/home/findDBZPro";
		AjaxPostJson(url,param,function(data){
			if (data.errCode==='0'){
				setDBZProDate(data);
			}
		});
	}

	//交易趋势切换数据
	function findjyqsChartsData(elm,num){
		if(elm!==undefined){
			$(elm).removeClass("layui-btn-primary").removeClass("layui-border-blue").addClass("layui-btn-normal");
			$(elm).siblings().removeClass("layui-btn-normal").addClass("layui-btn-primary").addClass("layui-border-blue");
		}

		let url="/home/findjyqsChartsData";
		let param=getParam();
		param.num=num;
		AjaxPostJson(url,param,function(data){
			if (data.errCode==='0'){
				setJYQScharts(num,data);
			}
		});
	}

	//交易占比切换数据
	function findjyzbChartsData(elm,num){
		if(elm!==undefined) {
			$(elm).removeClass("layui-btn-primary").removeClass("layui-border-blue").addClass("layui-btn-normal");
			$(elm).siblings().removeClass("layui-btn-normal").addClass("layui-btn-primary").addClass("layui-border-blue");
		}
		let url="/home/findjyzbChartsData";
		let param=getParam();
		param.num=num;
		AjaxPostJson(url,param,function(data){
			if (data.errCode==='0'){
				setPieDate(data);
			}
		});

	}


	//echarts
	//单边账笔数趋势
	function setDBZNumCharts(data){
		let betweenDate=data.betweenDate;
		let numList=data.numList;

		let option = {
			tooltip: {
				trigger: 'axis'
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			color:["#5470c6"],
			xAxis: {
				type: 'category',
				data: betweenDate
			},
			yAxis: {
				name: '单位：笔',
				type: 'value'
			},
			series: [{
				data: numList,
				type: 'line'
			}]
		};

		let myChart = echarts.init(document.getElementById('DBZNumTrend'));
		myChart.setOption(option);
	}

	//交易趋势
	function setJYQScharts(num,data){

		let resultList=data.resultList;
		let allNum=[];
		for (let i = 0; i < resultList.length; i++) {

			let newObj = resultList[i];
			let countNum=newObj.data;
			for (let j = 0; j < countNum.length; j++) {
				if (allNum[j]){
					allNum[j]=(Number(allNum[j])+Number(countNum[j])).toFixed(num===1?0:2);
				}else{
					allNum[j]=Number(countNum[j]);
				}
			}
			resultList[i].type='line';
		}

		let seriesDate=[];
		seriesDate.push({name:"全部",data:allNum,type:"line"});
		seriesDate=seriesDate.concat(resultList);

		let legendData=seriesDate.map(obj=>{
			return obj.name;
		})

		let betweenDate=data.betweenDate;

		let name="";//单位
		if (num===1){
			name="单位：笔";
		}else{
			name="单位：元";
		}

		let option = {
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: legendData
			},
			xAxis: {
				type: 'category',
				data: betweenDate
			},
			yAxis: {
				name: name,
				type: 'value'
			},
			series: seriesDate
		};
		let myChart = echarts.init(document.getElementById('JYQS'));
		myChart.setOption(option);

	}

	//单边账概率
	function setDBZProDate(data){

		let resultList = data.resultList;
		for (let i = 0; i < resultList.length; i++) {
			resultList[i].type="line";
		}

		let legendData=resultList.map(obj=>{
			return obj.name;
		})

		let betweenDate=data.betweenDate;

		let option = {
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: legendData
			},
			xAxis: {
				type: 'category',
				data: betweenDate
			},
			yAxis: {
				name: '单位：占比',
				type: 'value',
				axisLabel: {
					formatter: '{value}%'
				}
			},
			series: resultList
		};
		let myChart = echarts.init(document.getElementById('DBZPro'));
		myChart.setOption(option);
	}

	//交易占比
	function setPieDate(data){

		let resultList = data.resultList;
		let allDataNum = data.allDataNum;
		for (let i = 0; i < resultList.length; i++) {
			resultList[i].value=(resultList[i].value/allDataNum*100).toFixed(2);
		}

		//饼图1 支付方式
		let pie1Date=resultList;

		let option = {
			legend: {
				bottom: '10%',
				left: 'center',
				formatter:function(val){
					let otherStr="";
					for (let i = 0;i<pie1Date.length;i++){
						if(pie1Date[i].name===val){
							otherStr=pie1Date[i].value+ '%';
							break;
						}
					}
					return '{name|'+val+otherStr+'}{c|}';
				},
				itemWidth: 10, //前面方块宽度
				itemHeight: 10, //前面方块高
				itemGap: 10, //纵向间隔
				textStyle: {
					rich: {
						name: {
							width:0.5*($('.pie-chart-item').width()-(2*30))
						},
					}
				}
			},
			series: [
				{
					type: 'pie',
					radius: ['30%', '60%'],
					center: ['50%','35%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '16',
						}
					},
					labelLine: {
						show: false
					},
					data: pie1Date
				}
			]
		};
		let myChart = echarts.init(document.getElementById('pie1'));
		myChart.setOption(option);

		//饼图2 场景
/*		let pie2Data=[];
		let option2 = {
			legend: {
				bottom: '10%',
				left: 'center',
				formatter:function(val){
					let otherStr="";
					for (let i = 0;i<pie1Date.length;i++){
						if(pie1Date[i].name===val){
							otherStr=pie1Date[i].value+ '%';
							break;
						}
					}
					return '{name|'+val+otherStr+'}{c|}';
				},
				itemWidth: 10,
				itemHeight: 10,
				itemGap: 10,
				textStyle: {
					rich: {
						name: {
							width: 75
						},
					}
				}
			},

			series: [
				{
					type: 'pie',
					radius: ['30%', '60%'],
					center: ['50%','35%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '16'
						}
					},
					labelLine: {
						show: false
					},
					data: pie2Data
				}
			]
		};
		let myChart2 = echarts.init(document.getElementById('pie2'));
		myChart2.setOption(option2);*/

		//饼图3 厂商
		let pie3Data=data.firmNumResultList;
		let option3 = {
			legend: {
				bottom: '10%',
				left: 'center',
				formatter:function(val){
					let otherStr="";
					for (let i = 0;i<pie1Date.length;i++){
						if(pie1Date[i].name===val){
							otherStr=pie1Date[i].value+ '%';
							break;
						}
					}
					return '{name|'+val+otherStr+'}{c|}';
				},
				itemWidth: 10,
				itemHeight: 10,
				itemGap: 10,
				textStyle: {
					rich: {
						name: {
							width: 75
						},
					}
				}
			},
			series: [
				{
					type: 'pie',
					radius: ['30%', '60%'],
					center: ['50%','35%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '16'
						}
					},
					labelLine: {
						show: false
					},
					data: pie3Data
				}
			]
		};
		let myChart3 = echarts.init(document.getElementById('pie3'));
		myChart3.setOption(option3);
	}



</script>
</html>