<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据概况</title>
<link rel="stylesheet" href="css/wodry.css">
<link rel="stylesheet" href="css/survey.css">
<link rel="stylesheet" href="css/public.css">
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
$(function () {
$('.myscroll').myScroll({
speed: 60, //数值越大，速度越慢
rowHeight: 38 //li的高度
});
//自动轮播
var timer = setInterval(autoPlay, 3000);
function autoPlay(){
var $bannerUl=$('#banner ul'),$bannerLi=$('#banner ul li');
//动态获取ul的宽度
$bannerUl.css('width',$bannerLi.width()*$bannerLi.length);
$bannerUl.animate({
'marginLeft':-$bannerLi.width()
},500,function(){
$(this).animate({'marginLeft':0},0)
.find('li').eq(0).appendTo($(this));
//把每次移动后的第一个li放到ul的最后面
/*
* 由于把第一个li放到ul的最后面，就会把第二个li挤到第一个li的位置，但是我们又需要显示第二个li，
* 所以需要移动回原点，但是这个移动过程不能被看到，所以执行时间是0
*/
});
}
// 清除和设置定时器
$("#banner").mouseover(function(){
clearInterval(timer);
});
$("#banner").mouseout(function () {
timer = setInterval(autoPlay, 3000);
})
});
$(document).ready(function () {
var whei = $(window).width()
$("html").css({ fontSize: whei / 22 });
$(window).resize(function () {
var whei = $(window).width();
$("html").css({ fontSize: whei / 22 })
});
});
</script>
</head>
<body>
<div class="main">
<div class="header">
<div class="header-left fl" id="time"></div>
<div class="header-center fl">
<div class="header-title">
物流数据概况
</div>
<div class="header-img"></div>
</div>
<div class="header-right fl"></div>
<div class="header-bottom fl"></div>
</div>
<div class="center">
<div class="center-left fl">
<div class="left-top rightTop border">
<div class="title">基本信息</div>
<div class="top-list">
<span>
<b class="counter" id="countyCount">1</b>
<p>县服务中心</p>
</span>
<span>
<b class="counter" id="townCount">19</b>
<p>乡镇服务站</p>
</span>
<span>
<b class="counter" id="villageCount">290</b>
<p>村服务部</p>
</span>
<span class="last">
<b class="counter" id="userCount">2180</b>
<p>三级服务体系人员</p>
</span>
</div>
</div>
<div class="left-cen rightTop border">
<div class="title">店铺销售情况</div>
<div id="banner" class="banner">
<ul>
<li>
<div class="list clearfix">
<div class="listTxt">
<p> 商店名称：<span>华为旗舰店</span></p>
<p>销售金额：<span>5000万</span></p>
<p>所售商品：<span>电子产品、手机、电脑</span></p>
<p>店铺地区：<span>全国 </span></p>
<p>销售时间：<span>2020-11-11</span></p>
</div>
<div class="listImg"><img src="./images/touxiang.png"></div>
</div>
</li>
<li>
<div class="list clearfix">
<div class="listTxt">
<p> 商店名称：<span>小米旗舰店</span></p>
<p>销售金额：<span>4000万</span></p>
<p>所售商品：<span>电子产品</span></p>
<p>店铺地区：<span>全国 </span></p>
<p>销售时间：<span>2020-11-11</span></p>
</div>
<div class="listImg"><img src="./images/touxiang.png"></div>
</div>
</li>
<li>
<div class="list clearfix">
<div class="listTxt">
<p> 商店名称：<span>vivo旗舰店</span></p>
<p>销售金额：<span>3500万</span></p>
<p>所售商品：<span>电子产品</span></p>
<p>店铺地区：<span>全国 </span></p>
<p>销售时间：<span>2020-11-11</span></p>
</div>
<div class="listImg"><img src="./images/touxiang.png"></div>
</div>
</li>
<li>
<div class="list clearfix">
<div class="listTxt">
<p> 商店名称：<span>OPPO旗舰店</span></p>
<p>销售金额：<span>3000万</span></p>
<p>所售商品：<span>电子产品</span></p>
<p>店铺地区：<span>全国 </span></p>
<p>销售时间：<span>2020-11-11</span></p>
</div>
<div class="listImg"><img src="./images/touxiang.png"></div>
</div>
</li>
<!--<li><a href="#"><img src="./images/500x300-1.png" alt=""></a></li>
<li><a href="#"><img src="./images/500x300-2.png" alt=""></a></li>
<li><a href="#"><img src="./images/500x300-3.png" alt=""></a></li>-->
</ul>
</div>
</div>
<div class="left-bottom rightTop border">
<div class="title">商品分类占比</div>
<div class="bottom-b">
<div id="chart3" class="allnav"></div>
</div>
</div>
<div class="left-top rightTop border" style="margin-bottom:0px !important;">
<div class="title">基本信息</div>
<div class="top-list">
<span>
<b class="counter">1</b>
<p>县服务中心</p>
</span>
<span>
<b class="counter" >19</b>
<p>乡镇服务站</p>
</span>
<span>
<b class="counter" >290</b>
<p>村服务部</p>
</span>
<span class="last">
<b class="counter" >2180</b>
<p>三级服务体系人员</p>
</span>
</div>
</div>
</div>
<div class="center-cen fl">
<div class="cen-top">
<div class="top-title">
<ul>
<li>
<p>数量统计</p>
<span>3</span>
<span>6</span>
<span>5</span>
<b>个</b>
</li>
<li>
<p>同比上升</p>
<span>1</span>
<span>3</span>
<b>%</b>
</li>
</ul>
</div>
<div class="top-bottom">
<div id="diqu" class="allnav" style="height: 4.4rem"></div>
</div>
</div>
<div class="cen-bottom rightTop border">
<div class="title">订单情况</div>
<div class="bottom-b">
<div id="chart4" class="allnav"></div>
</div>
</div>
</div>
<div class="center-right fr">
<div class="right-top rightTop border">
<div class="title">各年龄段占比</div>
<div class="right-top-cent" >
<div id="shuiipin" class="allnav"></div>
</div>
</div>
<div class="right-cen border">
<div class="title">平台占比</div>
<div class="right-cen-cent">
<div id="chart2" class="allnav"></div>
</div>
</div>
<div class="right-bottom rightTop border">
<div class="title">全球贸易国家城市排行</div>
<div class="chat">
<div id="chart5" class="allnav"></div>
</div>
</div>
</div>
</div>
</div>
<div class="popup">
<a href="javascript:;" class="popupClose"></a>
<div class="summary">
<div class="summaryTop">
<div id="summaryPie1" class="summaryPie"></div>
<div id="summaryPie2" class="summaryPie"></div>
<div id="summaryPie3" class="summaryPie"></div>
</div>
<div class="summaryBottom">
<div class="summaryBar">
<div class="summaryTit">
<!-- <img src="images/tit1.png">-->
</div>
<div id="summaryBar"></div>
</div>
<div class="summaryLine">
<div class="summaryTit">
<!-- <img src="images/tit2.png">-->
</div>
<div id="summaryLine"></div>
</div>
</div>
</div>
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="js/wodry.min.js"></script>
<script src="js/fontscroll.js"></script>
<script src="js/survey.js"></script>
<script>
$('#chart3').on('click',function(){
$('.filterbg').show();
$('.popup').show();
$('.popup').width('3px');
$('.popup').animate({height: '76%'},400,function(){
$('.popup').animate({width: '82%'},400);
});
setTimeout(summaryShow,800);
});
$('.popupClose').on('click',function(){
$('.popupClose').css('display','none');
$('.summary').hide();
$('.popup').animate({width: '3px'},400,function(){
$('.popup').animate({height: 0},400);
});
setTimeout(summaryHide,800);
});
function summaryShow(){
$('.popupClose').css('display','block');
$('.summary').show();
setSummary();
};
function summaryHide(){
$('.filterbg').hide();
$('.popup').hide();
$('.popup').width(0);
};
</script>
</body>
</html>