{% extends "index/baseTemp.html" %} 

{% block title %}
<title>大屏展示</title>
{% endblock %} 

{% block blink %}
<link rel="stylesheet" href="{{ pathPrefix }}/plugins/Cesium/Widgets/widgets.css" />
<link rel="stylesheet" href="{{ pathPrefix }}/css/systemScreen/systemScreen.css"> 
{% endblock %} 

{% block bscript %}
<script src="{{ pathPrefix }}/plugins/Cesium/Cesium.js"></script>
<script src="{{ pathPrefix }}/plugins/echarts/echarts4.min.js"></script>
<script src="{{ pathPrefix }}/data/json/systemScreenMap/geojson.js"></script>
<script src="{{ pathPrefix }}/js/systemScreen/map3d.js"></script>
<script src="{{ pathPrefix }}/js/systemScreen/systemScreen.js"></script>
<script src="{{ pathPrefix }}/js/systemScreen/systemScreenChart.js"></script>
{% endblock %} 

{% block centent %}
<div class="indexWrap">
<div class="index-top">
    <div class="index-left"><i></i><span class="time"></span><span><br></span></div>
    <div class="index-right"><i></i><span id="company"><br></span></div>
    <div class="index-con">
        <div class="index-con-wrap">
            <div class="screen-name"></div>
        </div>
    </div>
</div>

<!--left begin-->
<div class="left-content">
    <div class="con-wrap">
        <div class="con-item bg_color" style="position: relative; margin-bottom: 10px;padding:10px 20px 20px 20px">
            <div class="jo_place">
                <div class="jo_zs"></div>
                <div class="jo_zx"></div>
                <div class="jo_ys"></div>
                <div class="jo_yx"></div>
            </div>            
            <div class="item-title">数据类型</div>
            <div class="boxWrap" style="height:250px;"></div>
            <div class="boxIndex" style="text-align: center;position: absolute;bottom:15px;left:35%;"></div>

            <!-- 每行2个 -->
            <!-- <div class="datatype_box">
                <div class="datatype_tot_box clearfix">
                    <div class="datatype_top_t clearfix">
                        <div class="data_types_icon" style="background:#e67497">
                            <i class="fa fa-film"></i>
                        </div>
                        <ul>
                            <li>多媒体</li>
                            <li style="color:#e67497">720</li>
                        </ul>
                    </div>
                    <div class="datatype_top_t clearfix">
                        <div class="data_types_icon" style="background:#a48ad4">
                            <i class="fa fa-object-group"></i>
                        </div>
                        <ul>
                            <li>矢量要素</li>
                            <li style="color:#a48ad4">19920</li>
                        </ul>
                    </div>
                </div>
                <div class="datatype_child_box clearfix">
                    <div class="datatype_child_left clearfix">
                        <ul>
                            <li>视频文件</li>
                            <li>56</li>
                        </ul>
                        <ul>
                            <li>图像文件</li>
                            <li>4808</li>
                        </ul>
                        <ul>
                            <li>视频流数据</li>
                            <li>765</li>
                        </ul>
                        <ul>
                            <li>--</li>
                            <li>0</li>
                        </ul>
                    </div>
                    <div class="line_first"><img src="../../images/screen/line_first.png"></div>
                    <div class="datatype_child_right clearfix">
                        <ul>
                            <li>Geotable文件</li>
                            <li>3675</li>
                        </ul>
                        <ul>
                            <li>Shape文件</li>
                            <li>5629</li>
                        </ul>
                        <ul>
                            <li>--</li>
                            <li>0</li>
                        </ul>
                        <ul>
                            <li>--</li>
                            <li>0</li>
                        </ul>
                    </div>
                </div>
                    <div class="datatype_top_t clearfix">
                        <div class="data_types_icon" style="background:#05b553">
                            <i class="fa fa-joomla"></i>
                        </div>
                        <ul>
                            <li>卫星数据</li>
                            <li style="color:#05b553">19920</li>
                        </ul>
                    </div>
                </div>
                <div class="datatype_child_box clearfix">
                    <div class="datatype_child_left clearfix">
                        <ul>
                            <li>高分一号</li>
                            <li>56</li>
                        </ul>
                        <ul>
                            <li>高分二号</li>
                            <li>480</li>
                        </ul>
                        <ul>
                            <li>高分三号</li>
                            <li>765</li>
                        </ul>
                        <ul>
                            <li>资源一号</li>
                            <li>56</li>
                        </ul>
                        <ul>
                            <li>资源二号</li>
                            <li>480</li>
                        </ul>
                        <ul>
                            <li>海洋一号</li>
                            <li>765</li>
                        </ul>
                        <ul>
                            <li>海洋二号</li>
                            <li>480</li>
                        </ul>
                        <ul>
                            <li>北斗一号</li>
                            <li>765</li>
                        </ul>
                    </div>
                </div>
            </div> -->
        </div>
    </div>

    <!-- 左下方 -->
    <div class="con-wrap">
        <div class="con-item">
            <div class="static_box bg_color">
                <div class="jo_place">
                    <div class="jo_zs"></div>
                    <div class="jo_zx"></div>
                    <div class="jo_ys"></div>
                    <div class="jo_yx"></div>
                </div>                
                <div id="chartMap" style=" width: 472px; height: 512px;"></div>
                <div class="static_data_box clearfix">
                    <div class="static_data">
                        <h4 class="static_data_percent">80%</h4>
                        <p>覆盖率</p>  
                    </div>
                    <div class="static_data">
                        <h4 class="static_data_area">100<span></span></h4>
                        <p>平方公里</p>
                    </div>
                    <div class="static_data">
                        <h4 class="static_data_count">15</h4>
                        <p>数据量</p> 
                    </div>
                </div>
                <!-- 左下 -->
                <div class="static_some clearfix">
                    <p class="static_some_address">全国</p>
                    <div class="static_some_detail">
                        <div class="clearfix">
                            <p>覆盖率</p>
                            <p class="provincePercent">0%</p>
                        </div>
                        <div class="clearfix">
                            <p>覆盖面积</p>
                            <p class="provinceArea">0</p>
                        </div>
                        <div class="clearfix">
                            <p>数据量</p>
                            <p class="provinceCount">0</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--left end-->
<!--right begin-->
<div class="right-content">
    <div class="con-wrap">
        <div class="con-item bg_color applyCenter">
            <div class="jo_place">
                <div class="jo_zs"></div>
                <div class="jo_zx"></div>
                <div class="jo_ys"></div>
                <div class="jo_yx"></div>
            </div>
            <div class="item-title">应用中心</div>
            <div class="apply_box">
                <div class="clearfix" id="appBox">
                    <ul>
                        <li class="cursorpointer"><img src="{{ pathPrefix }}/images/screen/daoru.png"><a class="toApply" href="{{ pathPrefix }}/import" target="_blank"></a></li>
                        <li>数据导入</li>
                    </ul>
                    <ul>
                        <li class="cursorpointer"><img src="{{ pathPrefix }}/images/screen/fenfa.png"><a class="toApply" href="{{ pathPrefix }}/distribute" target="_blank"></a></li>
                        <li>数据分发</li>
                    </ul>
                    <ul>
                        <li class="cursorpointer"><img src="{{ pathPrefix }}/images/screen/tongji.png"><a class="toApply" href="{{ pathPrefix }}/watchData" target="_blank"></a></li>
                        <li>数据统计</li>
                    </ul>
                    <ul>
                        <li class="cursorpointer"><img src="{{ pathPrefix }}/images/screen/fuwu.png"><a class="toApply" href="{{ pathPrefix }}/service" target="_blank"></a></li>
                        <li>专题服务</li>
                    </ul>
                    <ul>
                        <li class="cursorpointer"><img src="{{ pathPrefix }}/images/screen/jsuan.png"><a class="toApply" href="{{ pathPrefix }}/calc" target="_blank"></a></li>
                        <li>计算分析</li>
                    </ul>
                    <ul>
                        <li class="cursorpointer"><img src="{{ pathPrefix }}/images/screen/data.png"><a class="toApply" href="{{ pathPrefix }}/bigdata" target="_blank"></a></li>
                        <li>大数据分析</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="con-item bg_color">
           <div class="jo_place">
                <div class="jo_zs"></div>
                <div class="jo_zx"></div>
                <div class="jo_ys"></div>
                <div class="jo_yx"></div>
            </div>
            <div class="item-title">业务统计</div>
            <div class="work_static_box clearfix">
                <div class="work_static clearfix">
                    <p class="work_static_name">系统访问</p>
                    <div class="work_static_num">2330 <span>次</span></div>
                </div>
                <div class="work_static clearfix">
                    <p class="work_static_name">数据查询</p>
                    <div class="work_static_num">960 <span>次</span></div>
                </div>
                <div class="work_static clearfix">
                    <p class="work_static_name">数据下载</p>
                    <div class="work_static_num">567 <span>次</span></div>
                </div>
                <div class="work_static clearfix">
                    <p class="work_static_name">数据浏览</p>
                    <div class="work_static_num">1867 <span>次</span></div>
                </div>
            </div>
            <div id="chartLine" style="width:100%;height:230px;"></div>
        </div>
    </div>
    <!-- 右下方 -->
    <div class="con-wrap">
        <div class="con-item bg_color">
            <div class="jo_place">
                <div class="jo_zs"></div>
                <div class="jo_zx"></div>
                <div class="jo_ys"></div>
                <div class="jo_yx"></div>
            </div>
            <div class="item-title">平台资源</div>
            <div class="resource_box">
                <div class="resource_per clearfix">
                    <div class="resource_cpu"></div>
                    <div class="resource_ncun"></div>
                    <div class="resource_cchu"></div>
                    <div class="resource_pod"></div>
                </div>

                <div class="resource_detail clearfix">
                    <ul class="machine_total">
                        <li class="allCount">620<span>台</span></li>
                        <li>机器总数</li>
                    </ul>
                    <ul class="machine_normal">
                        <li class="defaultCount">100%</li>
                        <li>正常</li>
                    </ul>
                    <ul class="machine_ed">
                        <li class="usedCount">520<span>台</span></li>
                        <li>已使用</li>
                    </ul>
                    <ul class="machine_un">
                        <li class="warningCount">0<span>台</span></li>
                        <li>异常</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--right end-->
<!--satellite total data begin-->
<div class="satellite-total">
    <ul class="total-data clearfix">
        <li class="clearfix">
            <div><img src="{{ pathPrefix }}/images/screen/index_ico01.png"></div>
            <div class="index-num">
                <p><strong class="blue" id="stalliteNumber">8</strong>颗</p>
                <p>卫星数量</p>
            </div>
        </li> 
        <li class="clearfix">
            <div><img src="{{ pathPrefix }}/images/screen/index_ico02.png"></div>
            <div class="index-num">
                <p><strong class="green" id="sub_type_fsize_value_number">23</strong></p>
                <p>总数据容量</p>
            </div>
        </li>
        <li class="clearfix">
            <div><img src="{{ pathPrefix }}/images/screen/index_ico03.png"></div>
            <div class="index-num">
                <p><strong class="yellow" id="doc_content_number">29</strong>景</p>
                <p>总数据景数</p>
            </div>
        </li>
        <li class="clearfix">
            <div><img src="{{ pathPrefix }}/images/screen/index_ico04.png"></div>
            <div class="index-num">
                <p><strong class="pink">767</strong>km²</p>
                <p>数据累计面积</p>
            </div>
        </li>
    </ul>
</div>  
<!--satellite total data end-->
<div id="map"></div>
<!-- 三维地球切换图标 -->
<div id="sat_earth"><img src="{{ pathPrefix }}/images/screen/sw_sat.png" id="sat_earth_icon"></div>
<!-- 卫星系列 -->
<div id="buttons">
    <div class="clearfix" id="satelliteContent">
        <div class="sat_all_sel" data-toggle="tooltip" data-placement="right" title="全部系列"><input type="checkbox" id="sel_rangeNew" checked="checked" name="select"></div>
<!--         <div class="dropup">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                高分系列
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">高分一号</a></li>
                <li><a href="#">高分二号</a></li>
                <li><a href="#">高分三号</a></li>
            </ul>
        </div>
        <div class="dropup">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                资源系列
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">资源一号</a></li>
                <li><a href="#">资源二号</a></li>
            </ul>
        </div>
        <div class="dropup">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                环境系列
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">环境一号</a></li>
                <li><a href="#">环境二号</a></li>
            </ul>
        </div>
        <div class="dropup">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                北斗系列
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">北斗一号</a></li>
                <li><a href="#">北斗二号</a></li>
            </ul>
        </div>
        <div class="dropup">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                海洋系列
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">海洋一号</a></li>
            </ul>
        </div>
        <div class="dropup">
            <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                其他
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">xx一号</a></li>
                <li><a href="#">xx二号</a></li>
            </ul>
        </div> -->
    </div>
</div>

</div>

{% endblock %}