itsm-pc-handle/assets/views/dashboard/dashboard.html

<style>
    * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    [ng-drag] {
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    [ng-drag] {
        width: 100%;
        height: 300px;
        /*background: rgba(255, 0, 0, 0.5);*/
        /*color: white;*/
        /*text-align: center;*/
        /*padding-top: 40px;*/
        display: block;
        cursor: move;
    }
    /*[ng-drag].one {
        background: rgba(255, 0, 0, 0.5);
    }

    [ng-drag].two {
        background: rgba(0, 255, 0, 0.5);
    }

    [ng-drag].three {
        background: rgba(0, 0, 255, 0.5);
    }
    */

    [ng-drag].dragging {
        opacity: 0.5;
    }

    [ng-drop] {
        /*background: rgba(0, 0, 0, 0.25);*/
        /*text-align: center;*/
        display: block;
        position: relative;
        /*padding: 20px;*/
        /*width: 100%;*/
        /*height: 320px;*/
        float: left;
        margin-bottom: 10px;
    }

    [ng-drop].drag-enter {
        border: solid 3px red;
    }

    [ng-drop] span.title {
        display: block;
        /*position: absolute;*/
        top: 50%;
        left: 50%;
        width: 200px;
        /*height: 20px;*/
        margin-left: -100px;
        /*margin-top: -10px;*/
    }
    /* [ng-drop] div {
        position: relative;
    } */

    .draglist {
        display: inline-block;
        margin: 0 auto;
    }

    .StepTitle {
        padding-bottom: 5px;
    }

    .slide {
        width: 200px;
        height: 49px;
        margin: 0 auto;
        margin-top: -120px;
        overflow: hidden;
        display: inline;
    }

    .slide ul {
        text-align: left;
        margin: 0px;
        padding: 0px;
        width: 220px;
        height: 49px;
    }

    .slide li {
        height: 49px;
        line-height: 49px;
        text-align: left;
        padding: 0 10px;
        padding-top: 10px;
        font-size: 16px;
        list-style: none;
        cursor: pointer;
    }

    .slide li:hover {
        background: red;
    }
</style>
<div ng-controller="DashboardCtrl">
    <section id="page-title">
        <div class="row">
            <!-- <i class="iconfont icon-bianji pull-left"></i> -->
            <div class="col-sm-8">
                <h1 class="mainTitle">仪表盘<i tooltip='可打开大屏页面' tooltip-placement="right" class="fa  ti-help-alt margin-left-10 fontcolor-five pointfont"></i></h1>
            </div>
        </div>
    </section>
    <div>
        <div class="container-fluid container-dash bg-white">
            <div class="col-sm-12">
                <!-- <div class="col-sm-3 borderrou-8">
                    <div class="margin-right-5">
                        <div class="panel panel-white row dashhover" ng-click="largedash('lefttop')">
                            <div class="dashpad-top-bottom-28">
                                <span class="text-center pull-left" style="width:80px">
                                <div style="width:100%">
                                <img  src="assets/images/icon_shouye_zongti.png" />
                            </div>
                            </span>
                                <span class="fontsizes-14">
                                <p class="StepTitle" style="font-weight: bold;padding-top:0px;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">运维事件总体视图</p>
                                <p class="text-small" style="color:black;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                                    运维事件总体视图大屏展示
                                </p>
                            </span>
                            </div>
                        </div>
                    </div>
                </div> -->
                <!-- <div class="col-sm-3 borderrou-8">
                    <div class="margin-right-5 margin-left-5">
                        <div class="panel panel-white row dashhover" ng-click="largedash('leftbottom')">
                            <div class=" dashpad-top-bottom-28">
                                <span class="text-center pull-left" style="width:80px">
                                        <div style="width:100%">
                                        <img  src="assets/images/icon_shouye_liebiao.png" />
                                    </div>
                                    </span>
                                <span class="fontsizes-14">
                                        <p class="StepTitle" style="font-weight: bold;padding-top:0px;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">工单列表</p>
                                        <p class="text-small" style="color:black;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                                                工单列表大屏展示
                                        </p>
                                    </span>
                            </div>
                        </div>
                    </div>
                </div> -->
                <!-- <div class="col-sm-3 borderrou-8">
                    <div class="margin-right-5 margin-left-5">
                        <div class="panel panel-white row dashhover " ng-click="largedash('righttop')">
                            <div class=" dashpad-top-bottom-28">
                                <span class="text-center pull-left" style="width:80px">
                                            <div style="width:100%">
                                            <img  src="assets/images/icon_shouye_zhou.png" />
                                        </div>
                                        </span>
                                <span class="fontsizes-14">
                                            <p class="StepTitle" style="font-weight: bold;padding-top:0px;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">事件周统计</p>
                                            <p class="text-small" style="color:black;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                                                    事件周统计图大屏展示
                                            </p>
                                        </span>
                            </div>
                        </div>
                    </div>
                </div> -->
                <!-- <div class="col-sm-3 borderrou-8">
                    <div class="margin-left-5">
                        <div class="panel panel-white row dashhover" ng-click="largedash('rightbottom')">
                            <div class="dashpad-top-bottom-28">
                                <span class="text-center pull-left" style="width:80px">
                                        <div style="width:100%">
                                        <img  src="assets/images/icon_shouye_yue.png" />
                                    </div>
                                    </span>
                                <span class="fontsizes-14">
                                        <p class="StepTitle" style="font-weight: bold;padding-top:0px;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">事件月统计</p>
                                        <p class="text-small" style="color:black;display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                                                事件月统计图大屏展示
                                        </p>
                                    </span>
                            </div>
                        </div>
                    </div>
                </div> -->
                <!-- <div class="col-sm-3">
                    <div class="panel panel-white no-radius text-center" ng-click="largedash('leftbottom')">
                        <a class="panel-body">
                            <img src="assets/images/list.png" />
                            <h2 class="StepTitle" style="font-weight: bold;">工单列表</h2>
                            <p class="text-small" style="color:black">
                                工单列表大屏展示
                            </p>
                        </a>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="panel panel-white no-radius text-center" ng-click="largedash('righttop')">
                        <a class="panel-body">
                            <img src="assets/images/week.png" />
                            <h2 class="StepTitle" style="font-weight: bold;">事件周统计</h2>
                            <p class="text-small" style="color:black">
                                事件周统计图大屏展示
                            </p>
                        </a>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="panel panel-white no-radius text-center" ng-click="largedash('rightbottom')">
                        <a class="panel-body">
                            <img src="assets/images/month.png" />
                            <h2 class="StepTitle" style="font-weight: bold;">事件月统计</h2>
                            <p class="text-small" style="color:black">
                                事件月统计图大屏展示
                            </p>
                        </a>
                    </div>
                </div> -->
            </div>
        </div>
        <form ng-submit="vm.submit(vm.model,'expand-right')">
            <div class="margin-top-10 margin-bottom-10">
                <!-- <div class="col-sm-3 margin-bottom-10" ng-if="!roleidcode">
                    <div class="row">
                        <div class="margin-right-5">
                            <div class="bg-wechatdash text-center" ng-click="inWechat()">
                                <div class="fontsizes-18 dashpad-15 fontcolor-six fontweight-600">
                                    <div>微信报障:<span class="fontsizes-28">{{dashboardcount.wechatWarningCount}}</span></div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 margin-bottom-10" ng-if="!roleidcode">
                    <div class="row">
                        <div class="margin-right-5 margin-left-5">
                            <div class="bg-wechatdash text-center" ng-click="inIncident()">
                                <div class="fontsizes-18 dashpad-15 fontcolor-six fontweight-600">
                                    <div>事件管理:<span class="fontsizes-28">{{dashboardcount.incidentCount}}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 margin-bottom-10" ng-if="!roleidcode">
                    <div class="row">
                        <div class="margin-right-5 margin-left-5">
                            <div class="bg-wechatdash text-center" ng-click="inInspect()">
                                <div class="fontsizes-18 dashpad-15 fontcolor-six fontweight-600">
                                    <div>巡检管理:<span class="fontsizes-28">{{dashboardcount.inspectionCount}}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3 margin-bottom-10" ng-if="!roleidcode">
                    <div class="row">
                        <div class="margin-left-5">
                            <div class="bg-wechatdash text-center" ng-click="inKnowledge()">
                                <div class="fontsizes-18 dashpad-15 fontcolor-six fontweight-600">
                                    <div>知识库管理:<span class="fontsizes-28">{{dashboardcount.knowledgedata}}</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
            <div ng-repeat="field in vm.fields" ng-if="!field.hide" ng-drop="true" class={{field.className}} ng-drop-success="onDropComplete($index, $data,$event)">
                <div>
                    <!-- <div class="headfont listheader margin-left-15 margin-right-15" ng-class="{{field.className}}">{{field.templateOptions.label}}
                        <span class="dropdown pull-right" dropdown on-toggle="toggled(open)">
                            <a href class="dropdown-toggle" dropdown-toggle ng-click="more(field)">
                            <i class="ti-settings margin-right-5"></i>更多
                            </a>
                        </span>
                    </div> -->
                    <div formly-field="" removeClass class="formly-field ng-scope ng-isolate-scope formly-field-ui-ngtable row" options="field" model="field.model || field" original-model="field" fields="field" ng-if="vm.fields.length" form="theFormlyForm" form-id="formly_1"
                        form-state="options.formState" form-options="options" index="$index">
                    </div>
                </div>
            </div>
            <!--<div class="col-xs-12 margin-top-30 margin-bottom-30">
                <button type="button" ladda="ldloading.sm" class="col-md-offset-10 btn btn-primary ladda-button" translate="form.button.SUBMIT" ng-click="submit(vm)">Submit</button>
            </div>-->


            <!--<formly-form model="vm.model" fields="vm.fields" options="vm.options" form="vm.form" ng-if="vm.fields.length">
                <div></div>
                <div class="col-xs-12 margin-top-30 margin-bottom-30">

                </div>
            </formly-form>-->
        </form>
    </div>
</div>
<!-- ng-disabled="disablebton " -->