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

<div ng-controller="charts4Ctrl" 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="body">
        <div class="firstBox">
            <div class="degreeBox">
                <div class="boxTitle">满意度TOP5(上月)</div>
                <div id="satisfied" style="height: 254px;width:476px"></div>
            </div>
            <div class="peopleOnTimeBox">
                <div class="boxTitle">人员按时解决率TOP5(上月)</div>
                <div id="peopleOnTime" style="height: 254px;width:476px"></div>
            </div>
            <div class="faultBox">
                <div class="boxTitle">故障原因TOP5(上月)</div>
                <div id="fault" style="height: 254px;width:476px"></div>
            </div>
        </div>
        <div class="secondBox">
            <div class="sourceBox">
                <div class="boxTitle">事件来源占比(上月)</div>
                <div id="source" style="height: 254px;width:476px"></div>
            </div>
            <div class="responseBox">
                <div class="boxTitle">事件响应时长趋势</div>
                <div class="responseAverage">
                    <div></div>
                    <div>响应平均时长: {{allResponseAverageTime}}″</div>
                </div>
                <div id="response" style="height: 254px;width:476px"></div>
            </div>
            <div class="solveBox">
                <div class="boxTitle">事件解决时长趋势</div>
                <div class="solveAverage">
                    <div></div>
                    <div>解决平均时长: {{solveAverageTime}}″</div>
                </div>
                <div id="woll" style="height: 254px;width:476px"></div>
            </div>
        </div>
        <div class="thirdBox">
            <div class="headTwoBox">
                <div class="classificationBox">
                    <div class="boxTitle">近5年事件分类占比</div>
                    <!-- 雷达图 -->
                    <div id="classification" style="height: 243px;width:464px;margin-top:10px"></div>
                    <!-- 饼图轮播 -->
                    <!-- <div class="tab">
                        <div class="tabList" ng-class="classificationBoxTabList==0?'tabListOn':''">全部</div>
                        <div class="tabList" ng-class="classificationBoxTabList==1?'tabListOn':''">2015</div>
                        <div class="tabList" ng-class="classificationBoxTabList==2?'tabListOn':''">2016</div>
                        <div class="tabList" ng-class="classificationBoxTabList==3?'tabListOn':''">2017</div>
                        <div class="tabList" ng-class="classificationBoxTabList==4?'tabListOn':''">2018</div>
                        <div class="tabList" ng-class="classificationBoxTabList==5?'tabListOn':''">2019</div>
                    </div>
                    <div class="classificationSee">
                        <div class="classificationFlex">
                            <div id="classification1" style="height: 213px;width:464px"></div>
                            <div id="classification6" style="height: 213px;width:464px"></div>
                            <div id="classification5" style="height: 213px;width:464px"></div>
                            <div id="classification4" style="height: 213px;width:464px"></div>
                            <div id="classification3" style="height: 213px;width:464px"></div>
                            <div id="classification2" style="height: 213px;width:464px"></div>   
                            <div id="classification7" style="height: 213px;width:464px"></div>
                        </div>
                    </div> -->
                </div>
                <div class="ciyunty">
                    <div class="boxTitle">近5年事件分类词云图</div>
                    <div class="b_10_3">
                        <canvas width="350" height="270" id="myCanvas"></canvas>     
                        <div id="tags">
                            <a href="#" style="color:#ffb300;font-size:22px;font-weight:bold"></a>
                            <a href="#" style="color:#ffb300;font-size:22px;font-weight:bold"></a>
                            <a href="#" style="color:#ffb300;font-size:16px;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 class="incidentFiveAllBox">
                <div class="boxTitle">
                    <div>近5年事件统计</div>
                    <div class="incidentNum">事件总数:{{incidentFiveNumAll}}</div>
                </div>
                <div id="incidentFiveAll" style="height: 254px;width:938px"></div>
            </div>
            <div class="incidentFivePecentBox">
                <div class="boxTitle">近5年事件分类同比增幅</div>
                <div class="tab">
                    <!-- <div class="tabList" ng-class="incidentFivePecentBoxTabList==0?'tabListOn':''">全部</div> -->
                    <div class="tabList">&nbsp;&nbsp;</div>
                    <div class="tabList" ng-class="incidentFivePecentBoxTabList==0?'tabListOn':''">{{fenlei[0].category}}</div>
                    <div class="tabList" ng-class="incidentFivePecentBoxTabList==1?'tabListOn':''">{{fenlei[1].category}}</div>
                    <div class="tabList" ng-class="incidentFivePecentBoxTabList==2?'tabListOn':''">{{fenlei[2].category}}</div>
                    <div class="tabList" ng-class="incidentFivePecentBoxTabList==3?'tabListOn':''">{{fenlei[3].category}}</div>
                    <div class="tabList" ng-class="incidentFivePecentBoxTabList==4?'tabListOn':''">{{fenlei[4].category}}</div>
                </div>
                <div class="incidentFivePecentSee">
                    <div class="incidentFivePecentFlex">
                        <!-- <div id="incidentFivePecent1" style="height: 213px;width:1100px"></div> -->
                        <div id="incidentFivePecent2" style="height: 213px;width:920px"></div>
                        <div id="incidentFivePecent3" style="height: 213px;width:920px"></div>
                        <div id="incidentFivePecent4" style="height: 213px;width:920px"></div>
                        <div id="incidentFivePecent5" style="height: 213px;width:920px"></div>
                        <div id="incidentFivePecent6" style="height: 213px;width:920px"></div>
                        <div id="incidentFivePecent7" style="height: 213px;width:920px"></div>
                    </div>   
                </div>           
            </div>
        </div>
    </div>
</div>
<style>
    #myCanvas{
        margin-top: 15px
    }
    .bgBody{
        width: 1920px;
        height: 1080px;
        background: url(assets/images/daping/bg_04.png);
        background-size: cover;
        display: flex;
        flex-direction:column
    }
    .head{
        padding: 25px 30px;
        display: flex;
        justify-content:flex-end;
        align-items: center
    }
    .head .time{
        color: white;
        font-size: 32px;
    }
    .body{
        width: 100%;
        display: flex;
        margin-top: 6px
    }
    .firstBox{
        width: 478px;
    }
    .firstBox>div{
        height: 311px;
    }
    .firstBox .degreeBox .boxTitle{
        color: white;
        font-size: 22px;
        padding-left: 24px;
        padding-top: 25px;
    }
    .firstBox .peopleOnTimeBox .boxTitle{
        color: white;
        font-size: 22px;
        padding-left: 24px;
        padding-top: 25px;
    }
    .firstBox .faultBox .boxTitle{
        color: white;
        font-size: 22px;
        padding-left: 24px;
        padding-top: 30px;
    }
    .secondBox{
        width: 478px;
    }
    .secondBox>div{
        height: 311px;       
    }
    .secondBox .sourceBox .boxTitle{
        color: white;
        font-size: 22px;
        padding-left: 24px;
        padding-top: 25px;
    }
    .secondBox .responseBox{
        position: relative;
    }
    .secondBox .responseBox .boxTitle{
        color: white;
        font-size: 22px;
        padding-left: 24px;
        padding-top: 25px;
        
    }
    .secondBox .solveBox{
        position: relative;
    }
    .secondBox .solveBox .boxTitle{
        color: white;
        font-size: 22px;
        padding-left: 24px;
        padding-top: 30px;
    }
    .thirdBox{
        width: 954px
    }
    .headTwoBox{
        width: 100%;
        display: flex
    }
    .headTwoBox>div{
        width: 472px;
        height: 319px;
    }
    .headTwoBox .boxTitle{
        font-size: 22px;
        color: white;
        padding-left: 21px;
        padding-top: 24px;
    }
    .ciyunty{
        position: relative;
    }
    .classificationBox .tab{
        display: flex;
        justify-content:space-between;
        border-bottom: 1px #118178 solid;
        margin:0 28px 0 28px;
        height: 40px;
        align-items: center;
        color: #118178;
        font-size: 14px
    }
    .classificationBox .tabListOn{
        border-bottom: 2px #118178 solid;
        color: white
    }
    .classificationBox .tabList{
        padding: 0 10px;
        height: 38px;
        line-height: 38px;
        /* border-bottom: 2px #118178 solid; */
    }
    /* 词云图 */
    .b_10_3 {
		overflow: hidden; text-align:center;
		background:transparent;
        position: absolute;
        left: 61px;
        top: 25px;
        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;
    }
    .incidentFiveAllBox{
        height: 315px;
    }
    .incidentFiveAllBox .boxTitle{
        font-size: 22px;
        color: white;
        padding-left: 21px;
        padding-top: 17px;
        padding-right: 28px;
        display: flex;
        justify-content:space-between;
        align-items: center
    }
    .incidentFiveAllBox .boxTitle .incidentNum{
        font-size: 16px
    }
    .incidentFivePecentBox{
        height: 315px;
    }
    .incidentFivePecentBox .boxTitle{
        font-size: 22px;
        color: white;
        padding-left: 21px;
        padding-top: 17px;
    }
    .incidentFivePecentBox .tab{
        display: flex;
        justify-content:space-between;
        border-bottom: 1px #118178 solid;
        margin:0 28px 0 28px;
        height: 40px;
        align-items: center;
        color: #118178;
        font-size: 14px
    }
    .incidentFivePecentBox .tabList{
        padding: 0 10px;
        height: 38px;
        line-height: 38px;
    }
    .incidentFivePecentBox .tabListOn{
        border-bottom: 2px #118178 solid;
        color: white
    }
    .incidentFivePecentSee{
        width: 920px;
        height: 213px;
        overflow: hidden;
        position: relative;
    }
    .incidentFivePecentFlex{
        width: 6440px;
        height: 213px;
        display: flex;
        position: absolute;
        left: 0;
        top: 0
    }
    .incidentFivePecentFlex>div{
        margin-top: 7px
    }
    .classificationSee{
        width: 464px;
        height: 213px;
        overflow: hidden;
        position: relative
    }
    .classificationFlex{
        width: 3248px;
        height: 213px;
        display: flex;
        position: absolute;
        left: 0;
        top: 0
    }
    .responseAverage{
        display: flex;
        align-items: center;
        position: absolute;
        left: 30px;
        top: 76px;
    }
    .responseAverage div:nth-child(1){
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #0ca7a7;
        margin-right: 10px
    }
    .responseAverage div:nth-child(2){
        font-size: 14px;
        color: white
    }
    .solveAverage{
        display: flex;
        align-items: center;
        position: absolute;
        left: 30px;
        top: 76px;
    }
    .solveAverage div:nth-child(1){
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #f98f3b;
        margin-right: 10px
    }
    .solveAverage div:nth-child(2){
        font-size: 14px;
        color: white
    }
</style>