itsm-pc-handle/assets/views/system/selfDefinedReport/selfDefinedReport.html

<style>
    .ctrl {
        padding: 0 10px;
        box-sizing: border-box;
    }

    .box {
        background: #f5f5f5;
        padding-bottom: 20px;
    }

    .aside .SQLcontent {
        background: #fff;
        border-right: 1px solid black;
    }

    p.title {
        font-size: 15px;
        color: #333;
        line-height: 32px
    }

    .content {
        width: 100%;
        min-height: 588px;
        background: #fff;
        border: 1px solid #DCDCDC;
        border-radius: 5px;
        overflow: hidden;
    }

    .content>.btn {
        text-align: center;
        line-height: 32px;
        background: #f5f5f5 !important;
        border-radius: 0 !important;
        border-right: 1px solid #DCDCDC;
    }

    .content>.btn:nth-child(3) {
        border-right: none;
    }

    .content>.btn:hover {
        color: #3da3df;
    }

    .reportbox {
        padding: 10px 20px;
    }

    .sqlBox {
        width: 100%;
        height: 280px;
        border-radius: 5px;
    }

    .sqlBox textarea {
        height: 100%;
        width: 100%;
        resize: none;
        font-size: 17px;
    }

    .showDesign {
        margin-top: 10px;
    }

    .footer {
        text-align: center;
    }

    .preview {
        margin: 50px;
    }

    .footer .btn {
        border: 1px solid #DCDCDC;
        color: #333;
        width: 80px;
        height: 40px;
        line-height: 32px;
    }

    .btn:hover {
        color: #3da3df;
    }

    .contentHead{
        height: 60px;
        padding-top: 14px;
        padding-left: 10px;
        background: #f3f3f3;
    }
    .iconfont{
        font-size: 13px !important;
    }
    .demoincident{
        font-size: 14px;
        color: #333;
    }
    .from,.to{
        display: inline-block;
    }
    .panel-title.text-dark{
        display: inline-block;
        height: 48px;
        line-height: 48px;
        vertical-align: top;
        color: #999;
    }
    .btns{
        display: inline-block;
        vertical-align: top !important;
        line-height: 50px;
        margin-left: 30px;
    }
    .btns button{
        margin: 0;
        height: 28px !important;
    }
    .tableTitle{
        font-size: 14px;
        line-height: 60px;
        color: #333;
        text-align: center;
    }
    .table{
       width: 845px;
       margin: 0 auto; 
    }
    .ctrl #grid{
        height: 280px !important;
    }
    .table .ui-grid-viewport.ng-isolate-scope{
        height: 240px !important;
    }
    .table .ui-grid-pager-panel.ng-scope{
        display: none;
    }
    .echart{
        width: 100%;
        height: 500px;
    }
</style>
<section id="page-title">
    <div class="row">
        <div class="col-sm-8">
            <h1 class="mainTitle">自定义报表</h1>
        </div>
    </div>
</section>
<div ng-controller="selfDefinedReportCtrl" class="ctrl">
    <div class="row box">
        <div class="aside col-xs-3">
            <p class="title">报表类型：</p>
            <div class="content">
                <div class="add btn col-xs-4" ng-click='redact(0)'>新增</div>
                <div class="edit btn col-xs-4" ng-click='redact(1)'>修改</div>
                <div class="del btn col-xs-4" ng-click='redact(2)'>删除</div>
                <div class="box-tree col-xs-12">
                    <span ng-if="doing_async">...加载中...</span>
                    <abn-tree tree-data="my_data" tree-control="my_tree" on-select="my_tree_handler(branch)"
                        expand-level="2" icon-leaf="iconfont icon-fenlei" icon-expand="ti-plus" icon-collapse="ti-minus"></abn-tree>
                </div>
            </div>
        </div>
        <div class="col-xs-9" style="overflow:hidden;" ng-init="myStyle={'height':'620px'}" ng-style="myStyle"  >
            <p class="title">报表内容：</p>
            <div ng-if="!haveSave" class=" content reportbox">
                <p class="title">SQL: </p>
                <div class="sqlBox">
                    <textarea name="" id="" cols="30" rows="10" ng-model='pageData.sqlContent'></textarea>
                </div>
                <p class="title showDesign">展示图形：</p>
                <div class="pull-left  selectzise">
                    <ui-select class="pull-left" style="width:132px;" ng-model="pageData.chartType" theme="bootstrap"
                        ng-change="onChange($select.selected)">
                        <ui-select-match placeholder="">
                            {{$select.selected.value}}
                        </ui-select-match>
                        <ui-select-choices repeat="item in designType | filter: $select.value">
                            <div ng-bind-html="item.value | highlight: $select.value"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div>
                <div style=" border: 1px solid #DCDCDC;border-radius: 5px;min-height: 588px;">
                    <div style="display:inline-block;">
                        <div class="from form-group incidentsearch">
                            <div class="pull-right">
                                <div class="control-label pull-left margin-top-5 margin-right-5"><label class="demoincident">登记时间</label>:</div>
                                <input type="text" id="input1" class="form-control pull-right incidentsearchsize" style="width:132px !important;border-color: #dedede;"
                                    datepicker-popuptime="yyyy-MM-dd" ng-model="pageData.acceptDate" max-date="pageData.acceptDateEnd"
                                    is-open="startOpened" hour-time=true ng-init="startOpened = false" close-text="关闭"
                                    ng-click="startOpen($event)" placeholder="" />
                            </div>
                        </div>
                        <span class="panel-title text-dark">至</span>
                        <div class="to form-group incidentsearch">
                            <div class="pull-left">
                                <input type="text" id="input2" class="form-control selectzise pull-right incidentsearchsize" style="width:132px !important;border-color: #dedede;"
                                    datepicker-popuptime="yyyy-MM-dd" ng-model="pageData.acceptDateEnd" hour-time=true
                                    min-date="pageData.acceptDate" is-open="endOpened" ng-init="endOpened = false"
                                    close-text="关闭" ng-click="endOpen($event)" placeholder="" />
                            </div>
                        </div>
                        <div class="btns">
                            <button class="btn btn-searchbutton steelbutton " ng-click="chiceIncident(pageData)" type="button">搜索</button>
                            <button class="btn btn-default " ng-click="export()" ladda="ldloading.zoom_in" data-style="zoom-in"><span
                                    translate="sidebar.nav.configuremanagerdb.LISTButton.EXPORT ">Export
                                    Data</span></button>
                        </div>
                    </div>
                    <div class="tableBox">
                        <p class="tableTitle">不同类型事件数量占比</p>
                        <div class="table">
                            <div id="grid" ui-grid="gridOptions " ui-grid-pagination external-scopes="$scope "
                                ui-grid-resize-columns ui-grid-auto-resize class="grid "></div>
                        </div>
                        <div ng-if="echartsLength<=15" class="echart">
                            <div id="main" style="width: 100%;height: 500px; padding: 0;margin-top: 25px; border-width: 0; "></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="footer" ng-if="!haveSave">
        <div class='btn save' ng-click="save()">保存</div>
        <div class='btn preview' ng-click='preview()'>预览</div>
        <div class='btn cancel'>取消</div>
    </div>
</div>


</div>