visual-vue-v1/bak/resource/html/01vehicles/01/index.html

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>WebTools-Web开发者素材</title>
    <meta name="keywords" content="vue,react,组件，插件,模板，echarts,数据可视化,微前端,后台管理系统,免费下载">
    <meta name="description" content="提供vue/react/组件,插件,echarts数据可视化、后台管理系统模板免费下载,微前端解决方案">
    <link rel="icon" href="../../img/logo.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" href="js/numbergd/globle.css">
    <link rel="stylesheet" href="css/show.css">
</head>
<body>
    <div class="header">
        <div class="inner">北斗车联网大数据服务平台</div>
    </div>
    <div class="main">
        <div class="right">
            <li class="title">企业车辆统计</li>
            <div class="itemWrap">
                <ul class="item">
                    <li class="comName">企业名称1</li>
                    <li class="ratio">
                        <span class="total" title="车辆总数"></span>
                        <span class="register" title="上线数">160</span>
                        <span class="online" title="在线数">100</span>
                        <span class="totalAmount" title="车辆总数">500</span>
                    </li>
                </ul>
                <ul class="item">
                    <li class="comName">企业名称1</li>
                    <li class="ratio">
                        <span class="total" title="车辆总数"></span>
                        <span class="register" title="上线数">160</span>
                        <span class="online" title="在线数">100</span>
                        <span class="totalAmount" title="车辆总数">500</span>
                    </li>
                </ul>
                <ul class="item">
                    <li class="comName">企业名称1</li>
                    <li class="ratio">
                        <span class="total" title="车辆总数"></span>
                        <span class="register" title="上线数">160</span>
                        <span class="online" title="在线数">100</span>
                        <span class="totalAmount" title="车辆总数">500</span>
                    </li>
                </ul>
                <ul class="item">
                    <li class="comName">企业名称1</li>
                    <li class="ratio">
                        <span class="total" title="车辆总数"></span>
                        <span class="register" title="上线数">160</span>
                        <span class="online" title="在线数">100</span>
                        <span class="totalAmount" title="车辆总数">500</span>
                    </li>
                </ul>
                <ul class="item">
                    <li class="comName">企业名称1</li>
                    <li class="ratio">
                        <span class="total" title="车辆总数"></span>
                        <span class="register" title="上线数">160</span>
                        <span class="online" title="在线数">100</span>
                        <span class="totalAmount" title="车辆总数">500</span>
                    </li>
                </ul>
                <ul class="item">
                    <li class="comName">企业名称1</li>
                    <li class="ratio">
                        <span class="total" title="车辆总数"></span>
                        <span class="register" title="上线数">160</span>
                        <span class="online" title="在线数">100</span>
                        <span class="totalAmount" title="车辆总数">500</span>
                    </li>
                </ul>
                <ul class="item">
                    <li class="comName">企业名称1</li>
                    <li class="ratio">
                        <span class="total" title="车辆总数"></span>
                        <span class="register" title="上线数">160</span>
                        <span class="online" title="在线数">100</span>
                        <span class="totalAmount" title="车辆总数">500</span>
                    </li>
                </ul>
                <ul class="item">
                    <li class="comName">企业名称1</li>
                    <li class="ratio">
                        <span class="total" title="车辆总数"></span>
                        <span class="register" title="上线数">160</span>
                        <span class="online" title="在线数">100</span>
                        <span class="totalAmount" title="车辆总数">500</span>
                    </li>
                </ul>
                <ul class="item">
                    <li class="comName">企业名称1</li>
                    <li class="ratio">
                        <span class="total" title="车辆总数"></span>
                        <span class="register" title="上线数">160</span>
                        <span class="online" title="在线数">100</span>
                        <span class="totalAmount" title="车辆总数">500</span>
                    </li>
                </ul>
                <ul class="item">
                    <li class="comName">企业名称1</li>
                    <li class="ratio">
                        <span class="total" title="车辆总数"></span>
                        <span class="register" title="上线数">160</span>
                        <span class="online" title="在线数">100</span>
                        <span class="totalAmount" title="车辆总数">500</span>
                    </li>
                </ul>
                <ul class="item">
                    <li class="comName">企业名称1</li>
                    <li class="ratio">
                        <span class="total" title="车辆总数"></span>
                        <span class="register" title="上线数">160</span>
                        <span class="online" title="在线数">100</span>
                        <span class="totalAmount" title="车辆总数">500</span>
                    </li>
                </ul>
                <ul class="item">
                    <li class="comName">企业名称1</li>
                    <li class="ratio">
                        <span class="total" title="车辆总数"></span>
                        <span class="register" title="上线数">160</span>
                        <span class="online" title="在线数">100</span>
                        <span class="totalAmount" title="车辆总数">500</span>
                    </li>
                </ul>
                <ul class="item">
                    <li class="comName">企业名称1</li>
                    <li class="ratio">
                        <span class="total" title="车辆总数"></span>
                        <span class="register" title="上线数">160</span>
                        <span class="online" title="在线数">100</span>
                        <span class="totalAmount" title="车辆总数">500</span>
                    </li>
                </ul>
                

            </div>
        </div>
        <div class="left">
            <div class="item-1">
                <div class="inner">
                    <div class="block block-1">
                        <div class="content">
                            <div class="com">
                                <ul>
                                    <li class="symbol"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-company"></use> </svg></li>
                                    <li class="label">接入企业</li>
                                    <li class="amount">1563 <span>(户)</span></li>
                                </ul>

                            </div>
                            <div class="car">
                                <ul>
                                    <li class="symbol"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-car_other_1-copy"></use> </svg></li>
                                    <li class="label">接入车辆</li>
                                    <li class="amount">624986<span>(辆)</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="block block-2">
                        <div class="content">
                            <div>
                                <div class="BOTTOM" id="test3"></div>
                                <li class="amount"><span>视频车辆</span>&nbsp;3487&nbsp;<span>(辆)</span></li>
                            </div>
                        </div>
                    </div>
                    <div class="block block-2">
                        <div class="content">
                            <div>
                                <!--<li class="TOP">报警车辆：<span  class="amount">12,345</span></li>-->
                                <div class="BOTTOM" id="test4"></div>
                                <li class="amount"><span>报警车辆</span>&nbsp;3487&nbsp;<span>(辆)</span></li>
                            </div>
                        </div>
                    </div>
                    <div class="block block-2">
                        <div class="content">
                            <div>
                                <!--<li class="TOP">上线车辆：<span class="amount">12,345</span> </li>-->
                                <div class="BOTTOM" id="test5"></div>
                                <li class="amount"><span>上线车辆</span>&nbsp;3487<span>(辆)</span></li>
                            </div>
                        </div>
                    </div>
                    <div class="block block-3">
                        <div class="content">
                            <div>
                                <!--<li class="TOP">在线车辆：<span class="amount">12,345</span> </li>-->
                                <div class="BOTTOM" id="test6"></div>
                                <li class="amount"><span>在线车辆</span>&nbsp;3487&nbsp;<span>(辆)</span></li>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item-2">
                <div class="block-1">
                    <li class="title">车辆类型占比</li>
                    <div class="inner" id="test2"></div>
                </div>
                <div class="block-2">
                    <li class="title">车辆类型统计</li>
                    <div class="inner" id="test1"></div>
                </div>
                <div class="block-3">
                    <div class="inner">
                        <li class="title">流量统计</li>
                        <div class="flowCount">
                            <ul class="firstChild" style="margin-bottom: 12px;">
                                <li class="flowLabel">
                                    <span class="symbol"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-day"></use></svg></span>
                                    <span class="label ">当日流量：</span>
                                </li>
                                <li id="dataNums1" class="flowAmount flowDay"></li>
                            </ul>
                            <ul>
                                <li class="flowLabel">
                                    <span class="symbol"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-month"></use></svg></span>
                                    <span class="label">本月流量：</span>
                                </li>
                                <li id="dataNums2" class="flowAmount flowTotal"></li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="bottom">
            <div class="block-4">
                <div class="inner">
                    <li class="title">Product Valuation</li>
                    <div class="container" id="test7"></div>
                </div>
            </div>
            <div class="block-5">
                <div class="inner">
                    <li class="title">Product Valuation</li>
                    <div class="container" id="test8"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../js/jquery.min.js"></script>
    <script>
        var data = {
            total: [200, 180, 190, 200, 90, 120, 150, 50, 100, 90, 146, 100, 99, 44],
            register: [190, 150, 190, 100, 90, 110, 100, 40, 80, 60, 120, 88, 70, 44],
            online: [30, 100, 180, 90, 30, 88, 67, 50, 40, 34, 45, 50, 70, 44]
        };
        $('.totalAmount').each(function(m, n) {
            $('.totalAmount').eq(m).text(data.total[m])
        });
        $('.total').each(function(m, n) {
            $('.total').eq(m).animate({
                'width': data.total[m]
            });
            $('.total').eq(m).text(data.total[m]);
        });
        $('.register').each(function(m, n) {
            $('.register').eq(m).animate({
                'width': data.register[m]
            });
            $('.register').eq(m).text(data.register[m]);
        });
        $('.online').each(function(m, n) {
            $('.online').eq(m).animate({
                'width': data.online[m]
            });
            $('.online').eq(m).text(data.online[m]);
        })
    </script>
    <script src="../../js/echarts/echarts.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/numbergd/num_1.js"></script>
    <script src="js/numbergd/num_2.js"></script>
    <script>
        $("#dataNums1").rollNum({
            deVal: 111111
        });
        $("#dataNums2").rollNum({
            deVal: 222222
        });
    </script>
    <script src="http://at.alicdn.com/t/font_610679_r9naue0mmo.js"></script>
</body>

</html>