nizongfeng
/
ZZCX_yii


			
				
					
						
						
							
							<?php
/**
 * Created by PhpStorm.
 * User: Steven
 * Date: 2017/2/24
 * Time: 10:43
 */
use \backend\modules\motorcade\assets\monitorAsset;

monitorAsset::addCss($this, '/css/gps/default.css');
monitorAsset::addCss($this, '/css/gps/monitor.css');
monitorAsset::addCss($this, '/css/gps/myProgress.css');
monitorAsset::addCss($this, '/css/gps/progressbar.css');
monitorAsset::addCss($this, '/css/gps/normalize.css');
monitorAsset::addCss($this, '/css/gps/bootstrap.min.css');
monitorAsset::addCss($this, '/css/gps/bootstrap-datetimepicker.min.css');
monitorAsset::addCss($this, '/css/gps/module.css');
monitorAsset::addCss($this, '/css/gps/vehicle-real-time.css');
monitorAsset::addCss_other($this, '/zzcx/css/loader.css');
monitorAsset::addCss_other($this, '/global/plugins/bootstrap-toastr/toastr.css');
/*monitorAsset::addCss_other($this, '/layouts/layout4/css/themes/default.min.css');
monitorAsset::addCss_other($this, '/layouts/layout4/css/layout.min.css');*/
monitorAsset::addScript($this, '/js/gps/jquery3.1.1.min.js');
monitorAsset::addScript($this, '/js/gps/jquery.progressbar.js');
monitorAsset::addScript($this, '/js/gps/circles.js');
monitorAsset::addScript($this, '/js/gps/bootstrap.min.js');
monitorAsset::addScript($this, '/js/gps/bootstrap-datetimepicker.min.js');
monitorAsset::addScript($this, '/js/gps/module.js');
monitorAsset::addScript($this, '/js/gps/common.js');
monitorAsset::addScript($this, '/js/gps/vehicle-real-time.js');
monitorAsset::addScript_other($this, '/global/plugins/bootstrap-toastr/toastr.js');
?>

<!--
	作者：fuhongcheng_fhc@163.com
	时间：2017-02-12
	描述：车辆实时监控
-->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>车辆实时位置</title>
</head>

<body>
<div class="container" style="width: 100%;height: 100%;overflow: hidden;padding: 0;">
    <div class="topDiv" style="position: absolute;z-index: 9;top: 0px;width: 100%;">
        <div class="top_topDiv" style="border-bottom-left-radius: 15px !important;border-bottom-right-radius: 15px !important;height: 75px;border: 1px solid lightgray;padding-left: 26px;background: white;width: 500px;margin: 0 auto;box-shadow: 0 2px 8px 0 lightgrey;">
            <div style="padding-top: 18px">
                <span style="margin-left: 80px;">车辆：</span>
                <select class="select_screen carSelect">
                    <option value="">请选择</option>
                </select>
                <!--                <button type="button" class="btn btn-info searchBtn" style="margin-left: 30px;">查询</button>-->
            </div>
        </div>
        <div class="arrowDiv" style="text-align: center;width: 100%;top: 76px;z-index: 10;">
            <span class="arrow"></span>
        </div>
    </div>

    <!--地图-->
    <div id="allmap"></div>
    <!--右边表盘数据 -->
    <!--<div class="detail_box" style="width: 336px;height: 100%;position: absolute;right: 0;top: 0;">
        <div id="temp" style="width: 310px;height: 100%;background: yellow;float: right;"></div>
        <div class="right_arrow" style="width: 26px;height: 206px;background: burlywood;float: right;"></div>
    </div>-->
    <div class="right_all_div" style="width: 336px;height: 100%;position: absolute;right: 0;top: 0;display: none;z-index: 10">
        <div class="ub ub-ac an_div" style="text-align: center;height:100%;width: 38px;">
            <div class="right_arrow" style="">
            </div>
            <!--detail-- box begin-->
            <div class="detail_box" style="float: right;">
                <div class="detail_content">
                    <!--车辆运营概况-->
                    <div class="monitor">
                        <div style="padding-top: 45px; text-align: left">
                            <img src="/resource/img/monitor/carYunying.png" style="display: inline-block;">
                            <div class="div_title" style="display: inline-block">当前车辆运营状况</div>
                        </div>
                        <div class="monitor_chart">
                            <div class="circle_div ub" id="circle_div1" style="cursor: pointer" onclick="cli_panel(this)">
                                <div class="ub-f3" style="width: 1%;">
                                    <div class="circle" id="circles-1"></div>
                                </div>
                                <div class="ub-f3 ub ub-ac">
                                    <div>
                                        <div class="chanr_count_font ub-ver circles-1">0 / 0</div>
                                        <div class="chart_font ub-ver">当前出车车辆</div>
                                    </div>
                                </div>
                            </div>
                            <div class="circle_div ub" id="circle_div2" style="cursor: pointer" onclick="cli_panel(this)">
                                <div class="ub-f3" style="width: 1%;margin-top: 5px;">
                                    <div class="circle" id="circles-2"></div>
                                </div>
                                <div class="ub-f3 ub ub-ac">
                                    <div>
                                        <div class="chanr_count_font ub-ver circles-2">0 / 0</div>
                                        <div class="chart_font ub-ver">当前空闲车辆</div>
                                    </div>
                                </div>
                            </div>
                            <div class="circle_div ub" id="circle_div3" style="cursor: pointer" onclick="cli_panel(this)">
                                <div class="ub-f3" style="width: 1%;margin-top: 5px;">
                                    <div class="circle" id="circles-3"></div>
                                </div>
                                <div class="ub-f3 ub ub-ac">
                                    <div>
                                        <div class="chanr_count_font ub-ver circles-3">0 / 0</div>
                                        <div class="chart_font ub-ver">当前维修车辆</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--今日出车线路分布-->
                    <div class="distribution">
                        <div style="padding-top: 30px; text-align: left">
                            <img src="/resource/img/monitor/todayChuche.png" style="display: inline-block;">
                            <div class="div_title" style="display: inline-block">今日出车线路分布</div>
                        </div>

                        <div style="margin-top: 25px;margin-bottom: 10px;display: inline-block;">
                            <div class="float_left distribution_content">
                                <div class="distribution_small">省际</div>
                                <div class="distribution_big line_provice">0</div>
                            </div>
                            <div class="float_left distribution_content" style="margin-left: 20px;">
                                <div class="distribution_small">市际</div>
                                <div class="distribution_big line_city">0</div>
                            </div>
                            <div class="float_left distribution_content" style="margin-left: 20px;">
                                <div class="distribution_small">市内</div>
                                <div class="distribution_big line_city_inside">0</div>
                            </div>
                        </div>
                        <!--条形进度条-->
                        <div class="progress_div" style="clear: both;">

                        </div>
                    </div>
                    <!--车辆司机调度动态-->
                    <div class="info car_driver_dispatch">
                        <!--                        <div style="padding-top: 30px; text-align: left">-->
                        <!--                            <img src="/resource/img/monitor/carDispatch.png" style="display: inline-block;">-->
                        <!--                            <div class="div_title" style="display: inline-block">车辆司机调度动态</div>-->
                        <!--                            <div>-->
                        <!--                                <div class="ub">-->
                        <!--                                    <div class="ub-f1" style="text-align: left">沪DL6898</div>-->
                        <!--                                    <div class="ub-f1" style="text-align: right">2小时前</div>-->
                        <!--                                </div>-->
                        <!--                                <div class="ub">-->
                        <!--                                    <div class="ub-f1">出行信息：</div>-->
                        <!--                                    <div class="ub-f3">上海迪士尼-上海花园饭店，2017-02-24</div>-->
                        <!--                                </div>-->
                        <!--                                <div class="ub">-->
                        <!--                                    <div class="ub-f1">司机信息：</div>-->
                        <!--                                    <div class="ub-f3">德玛西亚</div>-->
                        <!--                                </div>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                    </div>
                </div>
            </div>
            <!--detail-- box end -->
        </div>
    </div>
</div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7GGxAR5VERdkfGTHRzIzDw4qzKk6hZk3"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>

</body>

</html>