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

<div ng-controller="charts1Ctrl" class="bgBody">
    <div class="head">
        <div class="time">
            {{jry_hours}}:{{getMinute(jry_minute)}}:{{getSecond(jry_second)}} {{jry_week}} {{jry_year}}年{{jry_month}}月{{jry_data}}日
        </div>
    </div>
    <div class="charts_body">
        <div class="charts_body_left">
            <div class="all_data">
                    <div>
                        处理中
                        <span class="num">{{incident_solveNowData}}&nbsp;<span>件</span></span>
                    </div>
                    <div>
                        已办结
                        <span class="num">{{incident_solveData}}&nbsp;<span>件</span></span>
                    </div>
                </div>
            <!-- 事件处理总数 -->
            <div>
                <div class="tit">
                    事件处理近五年统计分析图
                </div>
                <div id="incident_handle" style="height: 300px;width:900px"></div>
                <div class="table_tit">近五年事件增减趋势分析</div>
                <div class="table">
                    <div class="tab_head">
                        <div class="tab_one tab_one_head">年份</div>
                        <div class="tab_two tab_two_head">事件总数</div>
                        <div class="tab_three tab_three_head">同比增长或降低</div>
                        <div class="tab_four tab_four_head">网络故障报修</div>
                        <div class="tab_five tab_five_head">上网账号</div>
                        <div class="tab_six tab_six_head">邮箱问题</div>
                        <div class="tab_sevent tab_sevent_head">用户咨询服务</div>
                        <div class="tab_eight tab_eight_head">校园卡</div>
                    </div>
                    <div class="tab_list" ng-repeat="v in incident_handle_list">
                        <div class="tab_one">{{v.date}}</div>
                        <div class="tab_two">{{v.sum}}</div>
                        <div class="tab_three"><img src="assets/images/daping/shangzhang.png" alt="" ng-show="v.allzzl>0&&v.date!='2015'"><img src="assets/images/daping/xiajiang.png" alt="" ng-show="v.allzzl<0">&nbsp;&nbsp;{{v.allzzl}}%</div>
                        <div class="tab_three"><img src="assets/images/daping/shangzhang.png" alt="" ng-show="v.zzl0>0&&v.date!='2015'"><img src="assets/images/daping/xiajiang.png" alt="" ng-show="v.zzl0<0">&nbsp;&nbsp;{{v.zzl0}}%</div>
                        <div class="tab_three"><img src="assets/images/daping/shangzhang.png" alt="" ng-show="v.zzl1>0&&v.date!='2015'"><img src="assets/images/daping/xiajiang.png" alt="" ng-show="v.zzl1<0">&nbsp;&nbsp;{{v.zzl1}}%</div>
                        <div class="tab_three"><img src="assets/images/daping/shangzhang.png" alt="" ng-show="v.zzl2>0&&v.date!='2015'"><img src="assets/images/daping/xiajiang.png" alt="" ng-show="v.zzl2<0">&nbsp;&nbsp;{{v.zzl2}}%</div>
                        <div class="tab_three"><img src="assets/images/daping/shangzhang.png" alt="" ng-show="v.zzl3>0&&v.date!='2015'"><img src="assets/images/daping/xiajiang.png" alt="" ng-show="v.zzl3<0">&nbsp;&nbsp;{{v.zzl3}}%</div>
                        <div class="tab_three"><img src="assets/images/daping/shangzhang.png" alt="" ng-show="v.zzl4>0&&v.date!='2015'"><img src="assets/images/daping/xiajiang.png" alt="" ng-show="v.zzl4<0">&nbsp;&nbsp;{{v.zzl4}}%</div>
                    </div> 
                </div>
            </div>
        </div>
        <div class="charts_body_right">
            <div>
                <div class="tit">
                    工作组处理事件统计及占比
                </div>
                <div id="charts1_incident_group" style="height: 390px;width:462px"></div>
            </div>
            <div>
                <div class="tit">
                    人员处理事件TOP10
                </div>
                <div id="charts1_incident_people" style="height: 430px;width:390px"></div>
            </div>
            <div>
                <div class="tit_bot">
                    事件分类统计占比
                </div>
                <div id="charts1_incident_classification" style="height: 390px;width:417px"></div>
            </div>
            <div class="ball_box">
                <div class="tit_bot">
                    事件故障原因
                </div>
                <!-- <div id="container_ball" style="height: 305px;width:305px"></div> -->
                <div class="b_10_3">

                    <canvas width="350" height="350" id="myCanvas"></canvas>
                    
                    <div id="tags">
                        <a href="#" style="color:#ffb300;font-size:22px;font-weight:bold">端口模块问题</a>
                        <a href="#" style="color:#ff666e;font-size:22px">邮箱被锁定</a>
                        <a href="#" style="color:#00ccff;font-size:15px">认证问题</a>
                        <a href="#" style="color:#00ccff;font-size:15px">网线问题</a>                                                      
                        <a href="#" style="color:#00ccff;font-size:15px">水晶头问题</a>
                        <a href="#" style="color:#00ccff;font-size:15px">认证服务器问题</a>                         
                        <a href="#" style="color:#fff200;font-size:15px">交换机问题</a>
                    </div>
                </div>
            </div>          
        </div>
    </div> 
</div>
<style>
    .bgBody{
        width: 1920px;
        height: 1080px;
        background: url(assets/images/daping/bg_02.png);
        background-size: cover;
        display: flex;
        flex-direction:column
    }
    .bgBody .flle{
        float: left;
        margin-left: 20px;
        opacity: 0;
    }
    .head{
        padding: 25px 30px;
        display: flex;
        justify-content:flex-end;
        align-items: center
    }
    .head .time{
        color: white;
        font-size: 32px;
    }
    .charts_body{
        display: flex;
        justify-content:space-between;
        height: 100%;
    }
    .charts_body .charts_body_left{
        flex: 1;
        height: 100%;
    }
    .charts_body .charts_body_left .tit{
        color: white;
        font-size: 24px;
        margin-top: 51px;
        padding-left: 80px;
        padding-top: 9px;
    }
    .table_tit{
        color: white;
        font-size: 24px;
        margin-top: 42px;
        padding-left: 80px;
        padding-top: 9px;
    }
    .charts_body .charts_body_right .tit{
        color: white;
        font-size: 24px;
        margin-top: 38px;
        padding-left: 57px;
    }
    .charts_body .charts_body_right .ball_box{
        position: relative
    }
    .charts_body .charts_body_right .tit_bot{
        color: white;
        font-size: 24px;
        margin-top: 57px;
        padding-left: 57px;
    }
    .charts_body .charts_body_left .table{
        width: 880px;
        height: 330px;
        border: 1px transparent solid;
        margin-left: 40px;
        padding: 10px;
        margin-top: 29px;
        /* color: transparent */
    }
    .charts_body .charts_body_left .tab_head{
        padding: 10px 5px;
        background-color: rgba(255,255,255,0.2);
        display: flex;
        font-size: 16px
    }
    .charts_body .charts_body_left .tab_list{
        padding: 14px 5px;
        border-bottom: 1px rgb(255,255,255,0.6) solid;
        display: flex;
        font-size: 16px
    }
    .charts_body .charts_body_left .tab_one{
        /* color:rgba(255,255,255,0.6); */
        color:rgba(255,255,255)!important;
        width: 7%;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
    .charts_body .charts_body_left .tab_two{
        /* color:rgba(255,255,255,0.6); */
        color:rgba(255,255,255)!important;
        width: 9%;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
    .charts_body .charts_body_left .tab_three{
        /* color:rgba(255,255,255,0.6); */
        color:rgba(255,255,255)!important;
        width: 14%;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
    .charts_body .charts_body_left .tab_four{
        /* color:rgba(255,255,255,0.6); */
        color:rgba(255,255,255)!important;
        width: 14%;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
    .charts_body .charts_body_left .tab_five{
        /* color:rgba(255,255,255,0.6); */
        color:rgba(255,255,255)!important;
        width: 14%;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
    .charts_body .charts_body_left .tab_six{
        /* color:rgba(255,255,255,0.6); */
        color:rgba(255,255,255)!important;
        width: 14%;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
    .charts_body .charts_body_left .tab_sevent{
        /* color:rgba(255,255,255,0.6); */
        color:rgba(255,255,255)!important;
        width: 14%;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
    .charts_body .charts_body_left .tab_eight{
        /* color:rgba(255,255,255,0.6); */
        color:rgba(255,255,255)!important;
        width: 14%;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis 
    }
    .tab_one_head{
        color:rgba(255,255,255)!important;
    }
    .tab_two_head{
        color:rgba(255,255,255)!important;
    }
    .tab_three_head{
        color:rgba(255,255,255)!important;
    }
    .tab_four_head{
        color:rgba(255,255,255)!important;
    }
    .tab_five_head{
        color:rgba(255,255,255)!important;
    }
    .tab_six_head{
        color:rgba(255,255,255)!important;
    }
    .tab_sevent_head{
        color:rgba(255,255,255)!important;
    }
    .tab_eight_head{
        color:rgba(255,255,255)!important;
    }
    .charts_body .charts_body_right{
        flex: 1;
        height: 100%;
        display: flex;
        flex-wrap:wrap
    }
    .charts_body .charts_body_right>div{
        width: 470px;
        height: 483px;
    }
    #incident_handle{
        padding-left: 56px;
        margin-top: 20px;
    }
    #charts1_incident_group{
        margin-left: 27px;
        overflow: hidden;
    }
    #charts1_incident_people{
        margin-left: 36px
    }
    #charts1_incident_classification{
        margin-left: 32px;
        overflow: hidden;
        margin-top: -31px;
    }
    #container_ball{
        opacity: 0.6;
        position: absolute;
        left: 87px;
        top: 92px;
        z-index: 10;
    }
    #container_text_ball{
        position: absolute;
        left: 86px;
        top: 107px;
        z-index: 12;
    }
    .all_data{
        display: flex;
    }
    .all_data>div{
        width: 470px;
        color: white;
        height: 55px;
        font-size: 24px;
        padding-left: 71px;
        margin-top: 31px;
        display: flex;
        align-items: center;
        line-height: 55px
    }
    .all_data .num{
        display: inline-block;
        margin-left: 153px;
        font-size: 36px;
        color:white
    }
    .all_data .num span{
        font-size: 18px
    }
    /* 词云图 */
    .b_10_3 {
		overflow: hidden; text-align:center;
		background:transparent;
        position: absolute;
        left: 61px;
        top: 70px;
        z-index: 99999;
    }
    .b_10_3 span {
        float: left; font-size:16px; line-height:2em;
    }
    .b_10_3 span.bold {
        font-weight:bold;
    }
    .b_10_3 span:nth-child(1) {
        width: 35%;
        text-align: center;
    }
    .b_10_3 span:nth-child(2) {
        width: 30%;
        text-align: left;
    }
    .b_10_3 span:nth-child(3) {
        width: 35%;
        text-align: left;
    }
    .b_10_3 span:nth-child(4) {
        width: 35%;
        text-align: right;
    }
    .b_10_3 span:nth-child(5) {
        width: 25%;
        text-align: right;
    }
    .b_10_3 span:nth-child(6) {
        width: 25%;
        text-align: right;
    }
    .b_10_3 span:nth-child(7) {
        width: 50%;
        text-align: center;
    }
    .b_10_3 span:nth-child(8) {
        width: 30%;
        text-align: center;
    }
    .b_10_3 span:nth-child(9) {
        width: 50%;
        text-align: right;
    }
    .b_10_3 span:nth-child(10) {
        width: 40%;
        text-align: right;
    }
.ceshihaha{
    color:red;
    font-size: 32px
}
</style>