{% extends "appCenter/bigData/bigDataTemp.html" %}

{% block title %}
<title>数据可视化</title>
{% endblock %}

{% block bigdatalink %}
<!-- <link rel="stylesheet" href="{{ pathPrefix }}/plugins/ion-rangeSsider/css/normalize.css">
<link rel="stylesheet" href="{{ pathPrefix }}/plugins/ion-rangeSsider/css/ion.rangeSlider.css"> -->
<link rel="stylesheet" href="{{ pathPrefix }}/plugins/bootstraptable/bootstrap-table.css">
<!-- <link rel="stylesheet" href="{{ pathPrefix }}/plugins/ion-rangeSsider/css/ion.rangeSlider.skinNice.css"> -->
<link rel="stylesheet" href="{{ pathPrefix }}/css/appCenter/themeSlice/themeManage.css">
<link rel="stylesheet" href="{{ pathPrefix }}/css/appCenter/bigData/bigData.css">
{% endblock %}

{% block bigdatascript %}
<script src="{{ pathPrefix }}/plugins/vue/vue.js"></script>
<!-- <script src="{{ pathPrefix }}/plugins/ion-rangeSsider/ion.rangeSlider.min.js"></script> -->
<!-- <script src="{{ pathPrefix }}/js/scale.js"></script> -->
<!-- <script src="{{ pathPrefix }}/js/theme.js"></script> -->
{% endblock %}

{% block bigdatacentent %}
<div class="bigDataContent" style="position: relative;">
    <div id="bigDataAPI">
        <div class="title"><span class="fa fa-info-circle"></span></span>如何制作图表</div>
        <div class="content">
            <ul class="infoWrap" style="border:none;">
                <li class="fs11">①点击 <img class="setTipIconSmall" src="{{ pathPrefix }}/images/bigData/setTip1.png" /> 新增图表。</li>
                <li class="fs11 mtop_5">②点击 <img class="setTipIconSmall" src="{{ pathPrefix }}/images/bigData/setTip2.png" /> 删除选中 <img src="{{ pathPrefix }}/images/bigData/setTip3.png" /> 图表。</li>
                <li class="color3497da fontweight600 mtop_5">视频演示<span class="fa fa-video-camera showVideoBtn"></span></li>                
            </ul>            
        </div>
    </div>        
    <div id="u_box" class="themes_option" style="min-height:calc(100vh - 101px) !important;">
        <div v-if="!noData" class="list_page bg_fff p_20" style="position: relative;">
            <div class="row">
                <div class="col-lg-3">
                    <h6 v-cloak style="position: absolute;top:0px;">数据图表列表</h6>
                </div>
                <div class="col-lg-9">
                    <div class="row text-right share_top_sear">
                        <div class="col-lg-12">
                            <a class="btn btn-custom glyphicon glyphicon-plus" href="{{ pathPrefix }}/bigdata/shownew?params=create" style="padding:3px 10px;" data-toggle="tooltip"
                                data-placement="bottom" title="新增图表"></a>
                            <button id="delete" class="btn btn-custom glyphicon glyphicon-trash" :disabled="isDelete"
                                data-toggle="tooltip" data-placement="bottom" title="删除图表" @click="showDeleteModal"></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="position: absolute;top:60px;">
                <div class="col-lg-6 mtop_10" style="width:200px;">图表数量<span class="mleft_10" id="total">{total}</span></div>
            </div>            
            <table id="chartListTable" style="cursor: pointer;"></table>            
        </div>
        <div v-if="noData" class="list_page bg_fff p_20 text-center" style="min-height: calc(100vh - 101px);display:none;">
            <img src="{{ pathPrefix }}images/bigData/data_bg.png" alt="">
            <p class="fs16 mtop_20">空空如也，快去建立可视化图表吧</p>
            <p class="fs16 mtop_20" style="margin-bottom:30px;">
                <button class="btn btn-custom btn-new" style="border:1px solid #4287CD !important;">
                    <a href="{{ pathPrefix }}/bigdata/shownew?params=create">新增图表</a>
                </button>
            </p>
        </div>

        <div class="modal fade isDelete" style="background: rgba(0,0,0,0.3);" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
            <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 aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                    </div>
                    <div class="modal-body">
                        是否删除这条数据？
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary" data-dismiss="modal"@click="toDelete">删除</button>
                      <button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">取消</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- <div class="showVideoWrap">
        <span class="hideVideoWrap">x</span>
        <img src="../../../images/bigData/bigDataGif1.gif" alt="">
    </div> -->

</div>
<!-- <script src="{{ pathPrefix }}/plugins/bootstrap/js/bootstrap-pager.js"></script> -->
<script src="{{ pathPrefix }}/plugins/bootstraptable/bootstrap-table.js"></script>
<script src="{{ pathPrefix }}/plugins/bootstraptable/bootstrap-table-zh-CN.js"></script>
<script src="{{ pathPrefix }}/js/appCenter/bigData/common.js"></script>
<script src="{{ pathPrefix }}/js/appCenter/bigData/bigData_show.js"></script>
{% endblock %}