zuel-itsm-3.0.2/assets/views/watch/watch.html

<style type="text/css">
    /*#tu_1{
    width: 60%;
    height: 350px;
    background: url('assets/images/tu-9.png') no-repeat center center;
    background-size: 100% 100%;

}*/
    
    #tu_2 {
        width: 39%;
        height: 320px;
        background: url('assets/images/tu-5.png') no-repeat center center;
        background-size: 100% 100%;
        float: right;
        font-size: 5px;
        /*margin-top: -350px;*/
    }
    
    #tu_4 {
        width: 39%;
        height: 320px;
        background: url('assets/images/tu-6.png') no-repeat center center;
        background-size: 100% 100%;
        float: right;
        margin-top: -270px;
    }
    
    #tu_3 {
        width: 60%;
        height: 80px;
        background: url('assets/images/tu-12.png') no-repeat center center;
        background-size: 100% 100%;
        margin-right: -40%;
    }
    
    #tu_5 {
        width: 60%;
        height: 180px;
    }
    
    #tu_1 li,
    #tu_2 li {
        font-size: 10px;
        -webkit-transform: scale(0.8);
    }
    
    #tu_3 li {
        text-align: center;
        float: left;
    }
    
    #tu_5 li {
        font-size: 10px;
        -webkit-transform: scale(1);
        float: left;
    }
    
    h2 {
        font-size: 25px;
        -webkit-transform: scale(1.4);
    }
</style>
<section id="page-title">
    <div class="row">
        <div class="col-sm-8">
            <h1 class="mainTitle">监控列表</h1><span class="mainDescription">监控列表,点击操作处理任务</span></div>
    </div>
</section>
<div ng-controller="watchCtrl">
    <!--  <div id="tu_1">
        <ul class="menu" ng-repeat="item in aptu"  >
            <li style="position: absolute;top:{{item.y}}px;left:{{ item.x}}px; float:left; list-style:none;"> 
                <img src="assets/images/red.png" style="width:8px;background-color: {{item.color}};" ng-mouseover="loadhover(item.id,item.shortname,item.x,item.y)" ng-mouseout="loadout()" ng-click="loadClient(item.id,item.shortname,item.x,item.y)" > {{item.shortname}}
            </li >  
        </ul>
    </div> -->

    <div id="tu_2" class="com">
        <li style="float:left;margin-top:44px;overflow:hidden;  list-style:none;width:33%;white-space: nowrap;text-overflow: ellipsis; ">
            <div ng-repeat="item in apcpu"> {{item.id}}
                <div style=" width:{{item.per}}px;height: 10px;background-color: {{ item.color}};">
                    <div style="margin-left:105px;"> {{item.per}}% </div>
                </div>
            </div>

        </li>

        <li style="float:left;overflow:hidden;margin-top:46px;list-style:none;list-style:none;width:33%;white-space: nowrap;text-overflow: ellipsis; ">
            <div ng-repeat="item in apnei">{{item.id}}
                <div style=" width:{{ item.per}}px;height: 10px;background-color: {{ item.color}};;">
                    <div style="margin-left:105px">{{item.per}}%</div>
                </div>
            </div>
        </li>
        <li style="float:left;overflow:hidden; margin-top:46px;list-style:none; list-style:none;width:33%;white-space: nowrap;text-overflow: ellipsis; ">
            <div ng-repeat="item in apchu">{{item.id}}
                <div style=" width:{{ item.per}}px;height: 10px;background-color: {{ item.color}};;">
                    <div style="margin-left:105px">{{item.per}}%</div>
                </div>
            </div>
        </li>
    </div>
    <!-- 故障列表 start-->

    <div id="tu_3">
        <ul style="width:100%; list-style:none;">
            <li style=" margin-top:9%; width:5% ;margin-left:-35px ">ID </li>
            <li style="width:20%;margin-top:9%;"> 发生时间 </li>
            <li style="width:25%;margin-top:9%;">告警源</li>
            <li style=" width:5%;margin-top:9%;margin-left:5px   ">状态 </li>
            <li style=" width:15%;margin-top:9%;"> 描叙 </li>
            <li style=" width:10%;margin-top:9%;">类型 </li>
            <li style=" width:10%;margin-top:9%;"> 等级 </li>
            <li style="width:10%;margin-top:9%;margin-left:10px ">数据来源 </li>
        </ul>
    </div>
    <div id="tu_5" style="overflow:auto; height:530px;">

        <ul ng-repeat="item in apList" style="width:100%; float:left;list-style:none; ">
            <button ng-click="details(item.id,item.from); " style="width:110%;height:30px;margin-left:-45px;">
                <li style=" width:5%;margin-left:0px;  ">{{item.id}}</li> 
                <li style=" width:20%;">{{item.time}}</li> 
                <li style="  width:25%;overflow:hidden; white-space: nowrap;text-overflow: ellipsis;">{{item.jing}} </li> 
                <li style="  width:5%;font-color:{{color}} ">{{item.statu}}</li> 
                <!-- <li style="width:15%;overflow:hidden; white-space: nowrap;text-overflow: ellipsis;"> {{item.text}} </li>  -->
                <li style=" margin-left:1px;    width:10% ;overflow:hidden; white-space: nowrap;text-overflow: ellipsis;  ">{{item.lei}}</li> 
                <li style="  width:9%   ">{{item.ji}}</li> 
                <li style="   width:10% ;float:right; ">{{item.from}}</li>  
              </button>
        </ul>

    </div>
    <!-- 故障列表 end -->
    <div id="tu_4">
        <li style="float:left;list-style:none;width:33%">
            <div id="tradeNum" style="margin-top:60%; margin-left:5%;"></div>
            <div ng-repeat="item in apjiao" style="margin-top:10px;margin-left:5%;">
                <div>总交易量：{{item.all}} </div>
                <div>交易成功量：{{item.success}}</div>
                <div>交易失败量：{{item.fail}}</div>
        </li>
        <li style="float:left;list-style:none;width:33%">
            <div ng-repeat="item in apjiao" style="margin-top:100%; margin-left:35%;">
                <h2>{{item.time}}ms</h2>
            </div>
        </li>

        <li style="float:left;list-style:none;width:33%">
            <div ng-repeat="item in apjiao" style="margin-top:100%; margin-left:25%;">
                <h2> {{item .lv}}%</h2>
            </div>
        </li>
        </div>
    </div>