master

分支 (1)

管理

管理

master

sales-kanban
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>艾登销售看板</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1971523_j01vigdin0o.css">
</head>

<body>
    <div class="viewport">
        <div class="header">
            <div class="date" id="date"><span id="year"></span></div>
        </div>
        <div class="main">
            <div class="column">
                <!-- 订单 -->
                <div class="order panel">
                    <div class="inner">
                        <!-- 数据 -->
                        <div class="data">
                            <div class="item">
                                <span>
                                    <i class="icon-dot" style="color: #006CFF;"></i>
                                    当日订单统计
                                </span>
                                <div class="dayOrder">
                                    <em>198</em><s>单</s>
                                    <em class="padding">308.3</em><i>万</i><b>元</b>
                                </div>
                            </div>
                            <div class="item">
                                <span>
                                    <i class="icon-dot" style="color: #00F6FF;"></i>
                                    当日回款统计
                                </span>
                                <div class="return">
                                    <em>120</em><s>单</s>
                                    <em class="padding">308.3</em><i>万</i><b>元</b>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 渠道 季度 -->
                <div class="wrap">
                    <div class="channel panel">
                        <div class="inner">
                            <h3>渠道分布</h3>
                            <div class="data">
                                <div class="item">
                                    <h4>98 <small>%</small></h4>
                                    <span>
                                        <i class="iconfont" style="font-size: .5rem;">&#xe63f;</i>
                                        门店
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>39 <small>%</small></h4>
                                    <span>
                                        <i class="iconfont" style="font-size: .583333rem;">&#xe98c;</i>
                                        工程
                                    </span>
                                </div>
                            </div>
                            <div class="data" style="float: left;">
                                <div class="item">
                                    <h4>98 <small>%</small></h4>
                                    <span>
                                        <i class="icon-bag" style="font-size: .5rem;"></i>
                                        零售
                                    </span>
                                </div>
                                <!-- <div class="item">
                                    <h4>39 <small>%</small></h4>
                                    <span>
                                        <i class="icon-bus"></i>
                                        火车站
                                    </span>
                                </div> -->
                            </div>
                        </div>
                    </div>
                    <div class="quarter panel">
                        <div class="inner">
                            <h3>一季度销售进度</h3>
                            <div class="chart">
                                <div class="box">
                                    <div class="gauge"></div>
                                    <div class="label">80<small> %</small></div>
                                </div>
                                <div class="data">
                                    <div class="item">
                                        <h4>1,348</h4>
                                        <span>
                                            <i class="icon-dot" style="color: #6DD2A6"></i>
                                            销售额(万元)
                                        </span>
                                    </div>
                                    <div class="item">
                                        <h4>150%</h4>
                                        <span>
                                            <i class="icon-dot" style="color: #6DD2A6"></i>
                                            同比增长
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 排行榜 -->
                <div class="top panel">
                    <div class="inner">
                        <div class="all">
                            <h3>全国热榜</h3>
                            <ul>
                                <li>
                                    <i class="icon-cup1" style="color: #FFA647;"></i>
                                    张小小
                                </li>
                                <li>
                                    <i class="icon-cup2" style="color: #7D9ABC;"></i>
                                    张小小
                                </li>
                                <li>
                                    <i class="icon-cup3" style="color: #F0A178FF;"></i>
                                    张小小
                                </li>
                            </ul>
                        </div>
                        <div class="province">
                            <h3>各省热榜</h3>
                            <div class="data">
                                <ul class="sup">
                                    <li>
                                        <span>北京</span>
                                        <span>25,179 <s class="icon-up"></s></span>
                                    </li>
                                    <li>
                                        <span>上海</span>
                                        <span>23,252 <s class="icon-down"></s></span>
                                    </li>
                                    <li>
                                        <span>浙江</span>
                                        <span>20,760 <s class="icon-up"></s></span>
                                    </li>
                                    <li>
                                        <span>河北</span>
                                        <span>23,252 <s class="icon-down"></s></span>
                                    </li>
                                    <li>
                                        <span>广州</span>
                                        <span>20,760 <s class="icon-up"></s></span>
                                    </li>
                                    <li>
                                        <span>江苏</span>
                                        <span>26,952 <s class="icon-down"></s></span>
                                    </li>
                                    <li>
                                        <span>浙江</span>
                                        <span>27,252 <s class="icon-up"></s></span>
                                    </li>
                                </ul>
                                <ul class="sub name">
                                    <li><span>张小小</span><span> 1986<s class="icon-up"></s></span></li>
                                    <li><span>张小小</span><span> 1986<s class="icon-up"></s></span></li>
                                    <li><span>张小小</span><span> 1986<s class="icon-up"></s></span></li>
                                    <li><span>张小小</span><span> 1986<s class="icon-up"></s></span></li>
                                    <li><span>张小小</span><span> 1986<s class="icon-up"></s></span></li>
                                    <li><span>张小小</span><span> 1986<s class="icon-up"></s></span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="column">
                <!-- 地图 -->
                <div class="map">
                    <h3>
                        销售区域分布
                    </h3>
                    <div class="chart">
                        <div class="geo"></div>
                    </div>
                </div>
                <!-- 回款 -->
                <div class="cloumn-footer">
                    <div class="cloumn-footer-inner">
                        <h3>回款统计</h3>
                        <p>单位：万</p>
                        <div class="bar"></div>
                    </div>
                </div>
            </div>
            <div class="column">
                <!--概览-->
                <div class="monthlyOrder panel">
                    <div class="inner">
                        <div class="salesOrder">
                            <div class="item">
                                <img src="images/order.png" alt="">
                                <div class="title">
                                    <p>本月订单</p>
                                    <p>19,800<s>单</s></p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="images/sale.png" alt="">
                                <div class="title">
                                    <p>本月销售额</p>
                                    <p>308.3<i>万</i><s>元</s></p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="images/return.png" alt="">
                                <div class="title">
                                    <p>本月回款</p>
                                    <p>308.3<i>万</i><s>元</s></p>
                                </div>
                            </div>
                        </div>
                        <div class="task">
                            <div id="waterChart" class="waterChart"></div>
                            <div class="total">
                                <p>本季销售任务：</p>
                                <span>19837</span><i>万</i><s>元</s>
                            </div>
                        </div>
                    </div>
                </div>
                <!--订单监控-->
                <div class="monitor panel">
                    <div class="inner">
                        <div class="tabs">
                            <a href="javascript:;" data-index="0" class="active">订单监控</a>
                            <!-- <a href="javascript:;" data-index="1">异常设备监控</a> -->
                        </div>
                        <div class="content" style="display: block;">
                            <div class="head">
                                <span class="col">时间</span>
                                <span class="col">客户</span>
                                <span class="col">金额</span>
                                <span class="col">状态</span>
                            </div>
                            <div class="marquee-view">
                                <div class="marquee">
                                    <div class="row">
                                        <span class="col">20180701 12:13:15</span>
                                        <span class="col">李科生</span>
                                        <span class="col">￥1000001</span>
                                        <span class="col">待付款</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190601 12:13:15</span>
                                        <span class="col">廖海潇</span>
                                        <span class="col">￥1000002</span>
                                        <span class="col">待付款</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190704 12:13:15</span>
                                        <span class="col">陈大伟</span>
                                        <span class="col">￥1000003</span>
                                        <span class="col">待付款</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190701 12:13:15</span>
                                        <span class="col">温月宴</span>
                                        <span class="col">￥1000005</span>
                                        <span class="col">待付款</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190701 12:13:15</span>
                                        <span class="col">王二</span>
                                        <span class="col">￥1000006</span>
                                        <span class="col">待付款</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190701 12:13:15</span>
                                        <span class="col">金思思</span>
                                        <span class="col">￥1000007</span>
                                        <span class="col">待付款</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190701 12:13:15</span>
                                        <span class="col">胡海</span>
                                        <span class="col">￥1000008</span>
                                        <span class="col">待付款</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190701 12:13:15</span>
                                        <span class="col">彭时鱼</span>
                                        <span class="col">￥1000009</span>
                                        <span class="col">待付款</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190710 12:13:15</span>
                                        <span class="col">房龙</span>
                                        <span class="col">￥1000010</span>
                                        <span class="col">待付款</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="content">
                            <div class="head">
                                <span class="col">异常时间</span>
                                <span class="col">设备地址</span>
                                <span class="col">异常代码</span>
                            </div>
                            <div class="marquee-view">
                                <div class="marquee">
                                    <div class="row">
                                        <span class="col">20190701</span>
                                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                        <span class="col">1000001</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190701</span>
                                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                        <span class="col">1000002</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190703</span>
                                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                        <span class="col">1000002</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190704</span>
                                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                        <span class="col">1000002</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190705</span>
                                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                        <span class="col">1000002</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190706</span>
                                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                        <span class="col">1000002</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190707</span>
                                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                        <span class="col">1000002</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190708</span>
                                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                        <span class="col">1000002</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190709</span>
                                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                        <span class="col">1000002</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                    <div class="row">
                                        <span class="col">20190710</span>
                                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                                        <span class="col">1000002</span>
                                        <span class="icon-dot"></span>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
                <!--点位-->
                <div class="point panel">
                    <div class="inner">
                        <h3>产品种类销售统计</h3>
                        <div class="chart">
                            <div class="pie"></div>
                            <div class="data">
                                <div class="item">
                                    <h4>320,11</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #006CFF"></i>
                                        销售额
                                    </span>
                                </div>
                                <div class="item">
                                    <h4>320,11</h4>
                                    <span>
                                        <i class="icon-dot" style="color: #00F6FF"></i>
                                        本月新增
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
<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="http://echarts.baidu.com/resource/echarts-liquidfill-1.0.4/dist/echarts-liquidfill.js"></script>
<script src="./js/index.js"></script>
<script src="./js/china.js"></script>
<script src="./js/mymap.js"></script>


</html>