visual-vue-v1/bak/resource/html/01vehicles/03/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="numbergd/globle.css">
    <!--<link rel="stylesheet" href="clusterer/clusterer.css"/>  &lt;!&ndash;聚合地图样式&ndash;&gt;-->
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="header">
    <li class="left"></li>
    <li class="right"></li>
    <li class="center"></li>
    <!--<li class="date">2018-01-01 18:00:00</li>-->
</div>
<div class="main">
    <div class="layout-left">
        <div class="item">
            <div class="left-1 corner">
                <div class="carCount">
                    <li class="title">视频车辆统计</li>
                    <div class="labelLeft">
                        <ul>
                            <li class="videoCar">视频车辆总数(辆)</li>
                            <li class="videoCarCount">1,200,450</li>
                        </ul>
                        <ul>
                            <li class="videoCar">视频车辆总数(辆)</li>
                            <li class="videoCarCount">1,200,450</li>
                        </ul>
                    </div>
                    <div class="chartsRight" id="test5"></div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="left-2 corner">
                <div class="inner">
                    <li class="title">车辆在线统计</li>
                    <div class="onlineRatio"  id="test2"></div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="left-3 corner">
                <li class="title">流量统计</li>
                <div class="flowCount">
                    <ul>
                        <li class="today"></li>
                        <li class="legend">今日定位数量(条)</li>
                        <li class="amount">123,456</li>
                    </ul>
                    <ul>
                        <li class="month"></li>
                        <li class="legend">本月累计定位数量(条)</li>
                        <li class="amount">123,456,789</li>
                    </ul>
                </div>

            </div>
        </div>
    </div>

    <div class="layout-right">
        <div class="item">
            <div class="right-1 corner">
                <li class="title">班线客车</li>
                <div class="carTypeCount">
                    <ul>
                        <li class="accountItem">营运车辆数：<span>1200</span></li>
                        <li class="accountItem">入网车辆数：<span>1200</span></li>
                        <li class="accountItem">车辆上线率：<span>80</span>%</li>
                        <li class="accountItem">营运车辆数：<span>1200</span></li>
                        <li class="accountItem">入网车辆数：<span>1200</span></li>
                        <li class="accountItem">车辆上线率：<span>80</span>%</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="right-2 corner">
                <li class="title">旅游包车</li>
                <div class="carTypeCount">
                    <ul>
                        <li class="accountItem">营运车辆数：<span>1200</span></li>
                        <li class="accountItem">入网车辆数：<span>1200</span></li>
                        <li class="accountItem">车辆上线率：<span>80%</span></li>
                        <li class="accountItem">营运车辆数：<span>1200</span></li>
                        <li class="accountItem">入网车辆数：<span>1200</span></li>
                        <li class="accountItem">车辆上线率：<span>80%</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="right-2 corner">
                <li class="title">危险品运输车</li>
                <div class="carTypeCount">
                    <ul>
                        <li class="accountItem">营运车辆数：<span>1200</span></li>
                        <li class="accountItem">入网车辆数：<span>1200</span></li>
                        <li class="accountItem">车辆上线率：<span>80%</span></li>
                        <li class="accountItem">营运车辆数：<span>1200</span></li>
                        <li class="accountItem">入网车辆数：<span>1200</span></li>
                        <li class="accountItem">车辆上线率：<span>80%</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="layout-center">
        <div class="item" style="height: 66.6%;">
            <div class="echarts-tool">
                <form action="" class="layui-form">
                    <div class="layui-inline">
                        <label>车型：</label>
                        <div class="layui-input-inline">
                            <select name="warn" lay-verify="">
                                <option value="010">全部全部全部</option>
                                <option value="011">车型1</option>
                                <option value="012">车型2</option>
                                <option value="012">车型3</option>
                                <option value="012">车型4</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label>方向：</label>
                        <div class="layui-input-inline">
                            <select name="warn" lay-verify="">
                                <option value="010">出省</option>
                                <option value="011">入省</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="move" id="test3"></div>
        </div>
        <div class="item">
            <div class="center-2 corner">
                <li class="title">地市车辆</li>
                <div class="test4" id="test4" style="width: 100%;height: 100%">
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/echarts/echarts.min.js"></script>
<script src="../../js/layui/layui.js"></script>
<script src="../../js/echarts/china.js"></script>
<script src="js/main.js"></script>
<script>
    $('.layout-left,.layout-right,.layout-center').css({'height':$(window).height()-58,'min-height':'540px'});
    $(window).resize(function () {
        $('.layout-left,.layout-right,.layout-center').css({'height':$(window).height()-58,'min-height':'540px'});
    });
</script>
<!--<script src="http://webapi.amap.com/maps?v=1.4.6&key=d86f44f58592518cbcd2a4e4c3b7e662&plugin=AMap.MarkerClusterer"></script> &lt;!&ndash;聚合地图key&ndash;&gt;-->
<!--<script type="text/javascript" src="clusterer/addToolbar.js"></script>    &lt;!&ndash;基础控件&ndash;&gt;-->
<!--<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>        &lt;!&ndash;ui控件库&ndash;&gt;-->
<!--<script src="http://a.amap.com/jsapi_demos/static/china.js"></script>    &lt;!&ndash;中国地图&ndash;&gt;-->
<!--<script src="clusterer/clusterer.js"></script>-->
</body>
</html>