386 lines
18 KiB
HTML
386 lines
18 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>WebTools-Web开发者素材</title>
|
||
|
|
<link rel="icon" href="../../img/logo.png">
|
||
|
|
<script src="./js/jquery.js"></script>
|
||
|
|
<link rel="stylesheet" href="css/comon.css">
|
||
|
|
</head>
|
||
|
|
<script>
|
||
|
|
$(document).ready(function () {
|
||
|
|
let i = 1;
|
||
|
|
let j = 1;
|
||
|
|
$('.customer .table').css('marginTop', 0);
|
||
|
|
$('.news-wrap .news').css('marginTop', 0);
|
||
|
|
setInterval( () =>{
|
||
|
|
if( j === 9){
|
||
|
|
j = 1;
|
||
|
|
$('.news-wrap .news').animate({ marginTop: 0 }, 1000);
|
||
|
|
}else{
|
||
|
|
$('.news-wrap .news').animate({ marginTop: -'.2' * j + 'rem' }, 1000);
|
||
|
|
j++;
|
||
|
|
}
|
||
|
|
|
||
|
|
}, 2400 );
|
||
|
|
setInterval( () =>{
|
||
|
|
if( i === 9){
|
||
|
|
i = 1;
|
||
|
|
$('.customer .table').animate({ marginTop: 0 }, 1000);
|
||
|
|
}else{
|
||
|
|
$('.customer .table').animate({ marginTop: -'.2' * i - '.073' + 'rem' }, 1000);
|
||
|
|
i++;
|
||
|
|
}
|
||
|
|
|
||
|
|
}, 2400 )
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="loading">
|
||
|
|
<div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
|
||
|
|
</div>
|
||
|
|
<!-- 标题 -->
|
||
|
|
<div class="head-wrap">
|
||
|
|
<span class="focus"><img src="./images/focus.png"> 我的关注</span>
|
||
|
|
<span style="left: 6.5%"><img src="./images/watch.png"> 车间视频</span>
|
||
|
|
<h1><img src="images/logo.png">某集团大数据</h1>
|
||
|
|
<span style="right: 1.5rem">
|
||
|
|
<input type="text" placeholder = "请输入关键字">
|
||
|
|
<img src="./images/sch.png" style="position: relative; right: 0.5rem; top: 0.1rem">
|
||
|
|
</span>
|
||
|
|
<span style="right: 0"><img src=""> 2019-05-15 15:26:32</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 内容 -->
|
||
|
|
<div class="mainbox">
|
||
|
|
<ul class="clearfix">
|
||
|
|
|
||
|
|
<!-- 左侧内容 -->
|
||
|
|
<li>
|
||
|
|
<div class="boxall" style="height: 3rem">
|
||
|
|
<div class="alltitle">2019季度销售分析</div>
|
||
|
|
|
||
|
|
<div class="sycm" style="height: calc(3rem - 39px)">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="boxfoot"></div>
|
||
|
|
</div>
|
||
|
|
<div class="boxall" style="height: 2.75rem">
|
||
|
|
<div class="alltitle">2019季度订单情况</div>
|
||
|
|
<div class="sycm" style="height: calc(2.75rem - 39px)">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="boxfoot"></div>
|
||
|
|
</div>
|
||
|
|
<div class="boxall" style="height: 3.1rem">
|
||
|
|
<div class="alltitle">原材料价格波动TOP5</div>
|
||
|
|
<div class="sycm" style="height: calc(3.1rem - 39px)">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="boxfoot"></div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<!-- 中部内容 -->
|
||
|
|
<li>
|
||
|
|
<div class="news-wrap">
|
||
|
|
<ul class="news">
|
||
|
|
<li><h2>最新动态: 以必成之心，创未有之业——信泰创业20年•再出发! 2019-05-21</h2></li>
|
||
|
|
<li><h2>最新动态: 以必成之心，创未有之业——信泰创业20年•再出发! 2019-05-21</h2></li>
|
||
|
|
<li><h2>最新动态: 以必成之心，创未有之业——信泰创业20年•再出发! 2019-05-21</h2></li>
|
||
|
|
<li><h2>最新动态: 以必成之心，创未有之业——信泰创业20年•再出发! 2019-05-21</h2></li>
|
||
|
|
<li><h2>最新动态: 以必成之心，创未有之业——信泰创业20年•再出发! 2019-05-21</h2></li>
|
||
|
|
<li><h2>最新动态: 以必成之心，创未有之业——信泰创业20年•再出发! 2019-05-21</h2></li>
|
||
|
|
<li><h2>最新动态: 以必成之心，创未有之业——信泰创业20年•再出发! 2019-05-21</h2></li>
|
||
|
|
<li><h2>最新动态: 以必成之心，创未有之业——信泰创业20年•再出发! 2019-05-21</h2></li>
|
||
|
|
<li><h2>最新动态: 以必成之心，创未有之业——信泰创业20年•再出发! 2019-05-21</h2></li>
|
||
|
|
<li><h2>最新动态: 以必成之心，创未有之业——信泰创业20年•再出发! 2019-05-21</h2></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="bar" >
|
||
|
|
<div class="barbox">
|
||
|
|
<ul class="clearfix">
|
||
|
|
<li class="pulll_left" style="color: #fff">本年销售总额:</li>
|
||
|
|
<li class="pulll_left counter num">395,100,000 </li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="percent">
|
||
|
|
<div>87%</div>
|
||
|
|
</div>
|
||
|
|
<div class="map">
|
||
|
|
<div class="map1"><img src="images/lbx.png"></div>
|
||
|
|
<div class="map2"><img src="images/jt.png"></div>
|
||
|
|
<div class="map3"><img src="images/map.png"></div>
|
||
|
|
<div class="map4" id="map_1"></div>
|
||
|
|
</div>
|
||
|
|
<div class="boxall" style="height:1.7rem ;margin-top: -.2rem">
|
||
|
|
<div class="alltitle">PLM关键指标</div>
|
||
|
|
<div class="sycm" style="height: calc(1.7rem - 39px)">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="boxfoot"></div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<!-- 右侧内容 -->
|
||
|
|
<li>
|
||
|
|
<div class="boxall" style="height:1.7rem">
|
||
|
|
<div class="alltitle">当前生产关键指标</div>
|
||
|
|
<div class="sycm" style="height: calc(1.7rem - 39px)">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="boxfoot"></div>
|
||
|
|
</div>
|
||
|
|
<div class="boxall" style="height: 2.2rem">
|
||
|
|
<div class="alltitle">生产指标环比趋势</div>
|
||
|
|
<div class="sycm" style="height: calc(2.2rem - 39px)">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="boxfoot"></div>
|
||
|
|
</div>
|
||
|
|
<div class="boxall " style="height: 2.5rem;" >
|
||
|
|
<div class="alltitle">运营管理分析</div>
|
||
|
|
<div class="sycm" style="height: calc(2.5rem - 59px); border: 1px solid #1d2b5c;margin-top: 5px;">
|
||
|
|
<div class="customer" style="width: 30%">
|
||
|
|
<div class="customer-child" style = 'border-bottom: 1px solid #1d2b5c'>
|
||
|
|
<img src="./images/增长.svg" alt="">
|
||
|
|
<div>人员流动率: 5%</div>
|
||
|
|
</div>
|
||
|
|
<div class="customer-child">
|
||
|
|
<img src="./images/减少.svg" alt="">
|
||
|
|
<div>客户退货率: 5%</div>
|
||
|
|
</div>
|
||
|
|
</div><!--
|
||
|
|
--><div class="customer" style="width: 25%;border-left: 1px solid #1d2b5c;">
|
||
|
|
<h3 class="title">新增客户数</h3>
|
||
|
|
<div class="table-wrap">
|
||
|
|
<table class="table tb1" style="width: 100%; ">
|
||
|
|
<tr>
|
||
|
|
<td>1</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>2</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>3</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>4</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>5</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>6</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>7</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>8</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>9</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>10</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>11</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>12</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>13</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>14</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>15</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div><!--
|
||
|
|
--><div class="customer" style="width: 45%;border-left: 1px solid #1d2b5c;">
|
||
|
|
<h3 class="title">客户订单TOP5</h3>
|
||
|
|
<div class="table-wrap">
|
||
|
|
<table class="table tb2" style="width: 100%">
|
||
|
|
<tr>
|
||
|
|
<td>1</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>2</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>3</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>4</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>5</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>6</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>7</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>8</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>9</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>10</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>11</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>12</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>13</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>14</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>15</td>
|
||
|
|
<td>晋江</td>
|
||
|
|
<td>安踏</td>
|
||
|
|
<td>1000万</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="boxfoot"></div>
|
||
|
|
</div>
|
||
|
|
<div class="boxall" style="height: 2.3rem">
|
||
|
|
<div class="alltitle">当前库存情况</div>
|
||
|
|
<div class="sycm" style="height: calc(2.3rem - 39px)">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="boxfoot"></div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="back"></div>
|
||
|
|
<script src="../../js/echarts/echarts.min.js"></script>
|
||
|
|
<script src="../../js/echarts/china.js"></script>
|
||
|
|
<!-- <script type="text/javascript" src="js/area_echarts.js"></script> -->
|
||
|
|
<script language="JavaScript" src="js/js.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$(document).ready(function () {
|
||
|
|
myChart1.resize();
|
||
|
|
myChart2.resize();
|
||
|
|
myChart3.resize();
|
||
|
|
myChart4.resize();
|
||
|
|
myChart5.resize();
|
||
|
|
myChart6.resize();
|
||
|
|
myChart8.resize();
|
||
|
|
})
|
||
|
|
window.addEventListener("resize", function () {
|
||
|
|
myChart1.resize();
|
||
|
|
myChart2.resize();
|
||
|
|
myChart3.resize();
|
||
|
|
myChart4.resize();
|
||
|
|
myChart5.resize();
|
||
|
|
myChart6.resize();
|
||
|
|
myChart8.resize();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
|
||
|
|
<script type="text/javascript" src="js/jquery.countup.min.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
$('.counter').countUp();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|