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

    {% block title %}
    <title>大数据仪表盘</title>
    {% endblock %}

    {% block link %}
    <link href="{{ pathPrefix }}/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{ pathPrefix }}/plugins/color/css/colpick.css" rel="stylesheet">
    <link href="{{ pathPrefix }}/css/appCenter/bigData/bigData.css" rel="stylesheet">
    <link href="{{ pathPrefix }}/css/appCenter/bigData/bigDataGroup.css" rel="stylesheet">
    {% endblock %}

    {% block bscript %}    
    <script src="{{ pathPrefix }}/plugins/jquery-3.2.1.min.js"></script>
    <script src="{{ pathPrefix }}/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="{{ pathPrefix }}/plugins/bootstrap/js/bootstrap-pager.js"></script>
    <!-- <script type="text/javascript" src="{{ pathPrefix }}/plugins/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="{{ pathPrefix }}/plugins/echarts/bigdataEcharts/echarts-gl.min.js"></script>
    <script type="text/javascript" src="{{ pathPrefix }}/plugins/echarts/bigdataEcharts/ecStat.min.js"></script>
    <script type="text/javascript" src="{{ pathPrefix }}/plugins/echarts/bigdataEcharts/dataTool.min.js"></script>
    <script type="text/javascript" src="{{ pathPrefix }}/plugins/echarts/bigdataEcharts/china.js"></script>
    <script type="text/javascript" src="{{ pathPrefix }}/plugins/echarts/bigdataEcharts/world.js"></script>
    <script type="text/javascript" src="{{ pathPrefix }}/plugins/echarts/bigdataEcharts/v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM.js"></script>
    <script type="text/javascript" src="{{ pathPrefix }}/plugins/echarts/bigdataEcharts/bmap.min.js"></script>
    <script type="text/javascript" src="{{ pathPrefix }}/plugins/echarts/bigdataEcharts/simplex.js"></script> -->
    <script src="{{ pathPrefix }}/plugins/ol4/ol.js"></script>
    <script src="{{ pathPrefix }}/plugins/mapv/mapv.min.js"></script> 
    <script src="{{ pathPrefix }}/plugins/iclient9-openlayers-es6/iclient9-openlayers-es6.min.js"></script>
    <script src="{{ pathPrefix }}/js/common/map2dTools.js"></script>
    <script type="text/javascript" src="{{ pathPrefix }}/plugins/echarts/echarts4.min.js"></script>
    <script type="text/javascript" src="{{ pathPrefix }}/plugins/echarts/bigdataEcharts/echarts-gl.min.js"></script>    
    <script type="text/javascript" src="{{ pathPrefix }}/plugins/color/js/colpick.js"></script>    
    <script src="{{ pathPrefix }}/plugins/echarts/bigdataEcharts/ol3Echarts.min.js"></script>
    <script src="{{ pathPrefix }}/plugins/echarts/bigdataEcharts/sqt.js"></script>   
    {% endblock %}

    {% block centent %}
    <div class="views">
        <div class="container bg" style="opacity: 0;">
            <div class="bDTop">
                <div class="row bDTopWrap">
                    <div class="bDTopShow">
                        <div class="col-lg-5 col-xs-5 mtop_5">
                            <button class="btn btn-custom" id="closebDTop"><span class="glyphicon glyphicon-menu-right color4CAF50"></span></button>                        
                            <span class="pleft_15">                             
                                <button class="btn btn-custom" data-toggle="modal" id="todataListWrap"><span class="glyphicon glyphicon-plus color3497da"></span>添加图表</button>
                                <button class="btn btn-custom" data-toggle="modal" id="touploadBg"><span class="glyphicon glyphicon-picture color4CAF50"></span>更换背景</button>                                                    
                                <!-- <span class="colorfff" style="font-size:11px;">（添加数据进行组合）</span> -->
                            </span>
                            <button class="btn btn-custom getWidget" data-style="time" data-index="w1" title="添加时间小部件"><span class="glyphicon glyphicon-time color3497da"></span></button>
                            <button class="btn btn-custom getWidget" data-toggle="modal" id="toaddTextDialog" data-style="text" data-index="w2" title="添加文本"><span class="glyphicon glyphicon-list-alt color3497da"></span></button>                        
                            <button class="btn btn-custom getSm" data-toggle="modal" id="sourceMaterialDialog" title="添加素材"><span class="glyphicon glyphicon-briefcase color3497da"></span></button>                        
                        </div>                   
                        <!-- <div class="col-lg-3 col-xs-3 text-left">
                            <div class="input-group">
                            <span class="input-group-addon" style="background: #fff;color:#333;" id="basic-addon3">组合名称：</span>
                            <input type="text" class="form-control" style="background: transparent;border:none;font-size:14px;text-indent: 15px;" id="dBTitle" placeholder="请输入您的组合名称">
                            </div>
                        </div> -->
                        <!-- <div class="col-lg-4 col-xs-5 text-right mtop_5">
                        <span class="colorfff colorText" style="position:relative;top:-6px;">换肤：</span>
                        <span class="colorBtn" title="科技蓝"></span>
                        <span class="colorBtn" title="清新绿"></span>
                        <span class="colorBtn" title="质感黑"></span>
                        <span class="colorBtn" title="深空蓝"></span>
                        <span class="colorBtn" title="时空紫"></span>
                        </div>                                                          -->
                        <div class="col-lg-7 col-xs-7 text-right mtop_5">
                            <span style="position: relative;top:3px;left:-20px;">
                                <span class="colorfff colorText" style="position:relative;top:-6px;">换肤：</span>
                                <span class="colorBtn" title="科技蓝" data-type="blueF"></span>
                                <span class="colorBtn" title="清新绿" data-type="greenF"></span>
                                <span class="colorBtn" title="质感黑" data-type="opacityF"></span>
                                <span class="colorBtn" title="深空蓝" data-type="blackF"></span>
                                <span class="colorBtn" title="时空紫" data-type="violetF"></span>
                            </span>
                            <span style="position: relative;top:-5px;">
                                <button class="btn btn-custom" data-toggle="modal" id="saveInfo"><span class="glyphicon glyphicon-ok color3497da"></span>保存</button>
                                <button class="btn btn-custom" id="cancelBtn"><span class="glyphicon glyphicon-trash color3497da"></span>取消</button>
                            </span>                                            
                        </div>                   
                    </div>                
                </div>  
            </div>
            <div class="right" id="chartContent">
            
            </div>                  
        </div>
        <!-- 选择数据列表 -->
        <div class="modal fade dataListWrap" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" style="z-index:9999;">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove colorfff"></span></button>
                        <h4 class="modal-title colorfff">添加图表</h4>
                    </div>
                    <div class="p_20">
                        <!-- Nav tabs -->
                        <!-- <ul class="nav nav-pills" role="tablist">
                            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">选择可视化数据</a></li>
                            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">选择小部件</a></li>
                        </ul> -->
                        
                        <!-- Tab panes -->
                        <div class="tab-content mtop_20">
                            <div role="tabpanel" class="tab-pane active" id="home">
                                <ul class="uilist">
                                <!-- 动态生成Visualize单例列表 -->
                                </ul>
                                <div class="row pageTipWrap">
                                <span class="col-xs-6 colorfff mtop_10">数据总数量<span class="mleft_10" id="totalNum">${res.total}</span></span>
                                <div class="text-right col-xs-6" id="example"><ul id="pageLimit" style="cursor: pointer;"></ul></div>
                                </div>                                                                              
                            </div>
                        </div> 
                    </div>               
                </div>
            </div>
        </div>

        <!-- 上传背景图片 -->
        <div class="modal fade uploadBg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove colorfff"></span></button>
                        <h4 class="modal-title colorfff fs16">请上传你所需要的背景图片</h4>
                    </div>
                    <div class="p_15">
                    <p class="colorccc fs14">提示：请上传1920*1080的高清背景图片</p>
                    <div class="input-group" style="width:100%;border-radius:3px;">
                        <input type="text" id="uploadUrl" class="form-control" placeholder="请上传图片" readonly="readonly">                     
                        <span class="btn btn-custom fileinput-button" style="padding:5px 10px;">
                            <span>上传</span>
                            <input type="file" id="uploadImgBtn" multiple="multiple" accept="image/x-png, image/jpg, image/jpeg, image/gif" />
                        </span>
                    </div>
                    <div>
                        <img id="uploadtImgWrap" class="w100 h100 mtop_10" src="{{ pathPrefix }}/" alt="">
                        <button id="uploadSure" class="btn btn-info btn-block mtop_10 none">应用背景</button>
                    </div>                  
                    </div>               
                </div>
            </div>
        </div>

        <!-- 添加文本 -->
        <div class="modal fade addTextDialog" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content" style="padding:5px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove colorfff"></span></button>
                    <h4 class="modal-title colorfff fs16">添加文本小部件</h4>
                </div>
                <div>
                    <div class="input-group mtop_10">
                        <span class="input-group-addon textindent10 colorfff" style="background: #4287CD;">文本高度：</span>
                        <input type="number" class="form-control fs14 textindent10" placeholder="请输入文本高度" id="widgetH">
                    </div>
                    <div class="input-group mtop_10">
                        <span class="input-group-addon textindent10 colorfff" style="background: #4287CD;">文本宽度：</span>
                        <input type="number" class="form-control fs14 textindent10" placeholder="请输入文本宽度" id="widgetW">
                    </div>
                    <div class="input-group mtop_10">
                        <span class="input-group-addon textindent10 colorfff" style="background: #4287CD;">文本颜色：</span>
                        <span style="position: relative;top:-5px;color:#fff;margin:0px 10px 0px 11px;">#ff6600</span>                    
                        <span id="textColorPicker"></span>
                    </div>
                    <div class="input-group mtop_10">
                        <span class="input-group-addon textindent10 colorfff" style="background: #4287CD;">字体大小：</span>
                        <input type="number" class="form-control fs14 textindent10" placeholder="请输入字体大小" id="widgetF">
                    </div>                                                   
                </div>
                <div class="inputWrap mtop_10" id="textInput">
                    <div class="editBtn">
                    <button class="btn btn-info" id="textSule" style="background: #4287CD;">确定</button>
                    <button class="btn btn-default" id="textCancel">取消</button>
                    </div>
                    <textarea name="widgetValue" id="widgetValue" maxlength="200" placeholder="请输入您要添加的文本内容（限200字）"></textarea>
                </div>               
            </div>
        </div>
        </div>

        <!-- 添加素材 -->
        <div class="modal fade addSmWrap" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content" style="padding:5px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove colorfff"></span></button>
                        <h4 class="modal-title colorfff fs16">添加素材</h4>
                    </div>
                    <div class="content">
                        <div id="tSvg"></div>
                        <div class="row" id="bSvg"></div>
                        <div class="row" id="cSvg"></div>                                                                                          
                    </div>               
                </div>
            </div>
        </div>

        <!-- 设置边框 -->
        <div class="modal fade setBorderDialog" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content" style="padding:5px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove colorfff"></span></button>
                        <h4 class="modal-title colorfff fs16">设置边框</h4>
                    </div>
                    <div class="content">
                        <div class="input-group mtop_10">
                            <span class="input-group-addon textindent10 colorfff" style="background: #4287CD;">边框样式：</span>
                            <select id="borderStyle" style="width:100%;height:33px;padding-left:10px;">
                                <option value="solid" selected>实线</option>
                                <option value="dotted">点线</option>
                                <option value="double">双线</option>
                                <option value="dashed">虚线</option>
                            </select>
                        </div>
                        <div class="input-group mtop_10">
                            <span class="input-group-addon textindent10 colorfff" style="background: #4287CD;">边框大小：</span>
                            <input type="number" class="form-control fs14 textindent10" placeholder="请输入文本宽度" id="borderWidth">
                        </div>
                        <div class="input-group mtop_10">
                            <span class="input-group-addon textindent10 colorfff" style="background: #4287CD;">边框颜色：</span>
                            <span style="position: relative;top:-5px;color:#fff;margin:0px 10px 0px 11px;">#ff6600</span>                    
                            <span id="borderColor"></span>
                        </div>
                        <div>
                            <button id="toSettingBorder" class="btn btn-info btn-block mtop_10" style="background: #4287CD;">确定</button>
                        </div>                                                                                                             
                    </div>               
                </div>
            </div>
        </div>

        <!-- 设置背景 -->
        <div class="modal fade setBgDialog" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content" style="padding:5px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove colorfff"></span></button>
                        <h4 class="modal-title colorfff fs16">设置边框</h4>
                    </div>
                    <div class="content">
                        <div class="input-group mtop_10">
                            <span class="input-group-addon textindent10 colorfff" style="background: #4287CD;">背景颜色：</span>
                            <span style="position: relative;top:-5px;color:#fff;margin:0px 10px 0px 11px;">#ff6600</span>                    
                            <span id="bgColor"></span>
                        </div>                    
                        <div class="input-group mtop_10">
                            <span class="input-group-addon textindent10 colorfff" style="background: #4287CD;">透明度值：</span>
                            <input type="number" class="form-control fs14 textindent10" min="1" max="100" value="100" oninput="if(value.length>3 && value>=100)value=100" id="bgOpacity">
                            <span style="position: absolute;top:8px;right:130px;color:#fff;">%</span> 
                        </div>
                        <div>
                            <button id="toSettingBg" class="btn btn-info btn-block mtop_10" style="background: #4287CD;">确定</button>
                        </div>                                                                                                             
                    </div>               
                </div>
            </div>
        </div>

        <!-- 保存数据 -->
        <div class="modal fade saveInfoDialog" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog" role="document" style="width:400px;z-index: 6666;">
                <div class="modal-content" style="padding:5px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove colorfff"></span></button>
                        <h4 class="modal-title colorfff fs16">添加信息</h4>
                    </div>
                    <div>
                        <div class="input-group mtop_10">
                        <span class="input-group-addon" style="background: #fff;color:#333;">标题：</span>
                        <input type="text" class="form-control fs14" style="background: transparent;border:none;font-size:14px;text-indent: 10px;" id="dBTitle" placeholder="请输入仪表盘标题">
                        </div>
                        <div class="mtop_10" style="border:1px solid #ccc;border-radius:3px;">
                            <textarea class="form-control fs14" id="descriptionValue" name="descriptionValue" rows="5" style="min-width: 90%" maxlength="200" placeholder="请输入您要添加的仪表盘描述（限200字）"></textarea>
                        </div>
                        <div class="mtop_10">
                            <button class="btn btn-info btn-block" id="saveBtn">保存</button>                      
                        </div>                                                   
                    </div>               
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="{{ pathPrefix }}/js/appCenter/bigData/common.js"></script>
    <script type="text/javascript" src="{{ pathPrefix }}/js/appCenter/bigData/html2canvas.min.js"></script>           
    <script type="text/javascript" src="{{ pathPrefix }}/js/appCenter/bigData/bigData_group_edit.js"></script>
{% endblock  %}