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

<div ng-controller="charts3Ctrl" class="bgBody">
    <div class="head">
        <!-- <img src="assets/images/daping/logo.png" alt=""><span class="zi">| 网络安全与信息化运维服务平台</span> -->
        <div class="headTit">网络与计算中心运维监控</div>
    </div>
    <div class="charts_body">
        <div class="left">
            <div class="chuliliucheng">
                <div class="title">事件处理流程</div>
                <span>微信报修</span>
                <span>来电</span>
                <span>来电留言</span>
                <span>告警</span>
                <span>其他来源</span>
                <span>微信运维</span>
                <span>电话回访</span>
                <span>运维系统</span>
                <span>其他方式</span>
            </div>

            <div class="slidesTop">
                <div class="slideBox1" ng-style="{'left':slideBoxLeft}">
                    <div class="body_left">
                        <!-- 呼叫中心来电趋势图 -->
                        <div class="qushitu">
                            <div class="tit">
                                呼叫中心来电统计图
                            </div>
                            <div class="zongji">
                                <span></span>
                                <span>呼叫中心来电数量:&nbsp;
                                    <span class="size24">{{allIncidentreport}}</span>
                                </span>
                            </div>
                            <div id="laidianqushitu" style="height: 210px;width:440px"></div>
                        </div>
                        <!-- 事件工单处理实时情况列表 -->
                        <div class="shijianbiao">
                            <div class="tit">
                                事件工单处理实时情况
                            </div>
                            <div class="table_box">
                                <div class="shijian_tables_box">
                                    <!-- 第一个列表 -->
                                    <div class="shijian_tables">
                                        <div class="table_head">
                                            <div class="tab_one">序号</div>
                                            <div class="tab_two">工单号</div>
                                            <div class="tab_three">处理人</div>
                                            <div class="tab_four">处理状态</div>
                                        </div>
                                        <div class="body">
                                            <div id='box'>
                                                <div id='box1'>
                                                    <div class="table_list list1" ng-repeat="v in incidentHandleList1">
                                                        <div class="tab_one">{{$index+1}}</div>
                                                        <div class="tab_two">{{v.incidentsign}}</div>
                                                        <div class="tab_three">{{v.name}}</div>
                                                        <div class="tab_four" ng-class="statusColor(v.status)"
                                                            ng-show="v.status!='接单'">
                                                            {{incident_status(v.status)}}</div>
                                                        <div class="tab_four" ng-class="statusColor(v.status)"
                                                            ng-show="v.status=='接单'">
                                                            接&nbsp;&nbsp;&nbsp;&nbsp;单</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="body_right">
                        <!-- 微信报修趋势图 -->
                        <div class="qushitu">
                            <div class="tit">
                                微信报修统计图
                            </div>
                            <div class="zongji">
                                <span class="bgYellow"></span>
                                <span>微信报修数量:&nbsp;{{wxAll}}</span>
                            </div>
                            <div id="baoxiuqushitu" style="height: 210px;width:440px"></div>
                        </div>
                        <!-- 微信报修详情列表 -->
                        <div class="baoxiubiao">
                            <div class="tit">
                                微信报修详情
                            </div>
                            <div class="table_box">
                                <div class="baoxiu_tables_box">
                                    <!-- 第一个列表 -->
                                    <div class="baoxiu_tables">
                                        <div class="table_head">
                                            <div class="tab_one">序号</div>
                                            <div class="tab_two alignLeft">报修内容</div>
                                            <div class="tab_three">报修人</div>
                                        </div>
                                        <div class="body">
                                            <div id="box2">
                                                <div id="box3">
                                                    <div class="table_list list2" ng-repeat="v in weChatList1">
                                                        <div class="tab_one">{{$index+1}}</div>
                                                        <div class="tab_two">{{v.description}}</div>
                                                        <div class="tab_three">{{v.name}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="slidesCenter">
                <div class="slideBox2">
                    <!-- 主校区 -->
                    <div class="body_center">
                        <div class="map_tit" ng-switch="slideBoxLeft3">
                            <span ng-switch-when="0">事件实时动态图-主校区</span>
                            <span ng-switch-when="1">近30天事件分布图-主校区</span>
                            <span ng-switch-when="2">近一年事件分布图-主校区</span>
                            <span ng-switch-when="3">事件实时动态图-同济校区</span>
                            <span ng-switch-when="4">近30天事件分布图-同济校区</span>
                            <span ng-switch-when="5">近一年事件分布图-同济校区</span>
                        </div>
                        <div class="map_pit">
                            <div id="viewDiv" style="width: 100%;height:100%;"></div>
                        </div>
                    </div>
                    <!-- <div class="body_center">
                        <div class="map_tit">主校区-近30天事件分布图</div>
                        <div class="map_pit">
                            <div id="viewDiv2" style="width: 100%;height:100%;"></div>
                        </div>
                    </div>
                    <div class="body_center">
                        <div class="map_tit">主校区-近一年事件分布图</div>
                        <div class="map_pit">
                            <div id="viewDiv3" style="width: 100%;height:100%;"></div>
                        </div>
                    </div> -->
                    <!-- 同济校区 -->
                    <!-- <div class="body_center">
                        <div class="map_tit">同济校区-事件实时动态图</div>
                        <div class="map_pit">
                            <div id="viewDiv4" style="width: 100%;height:100%;"></div>
                        </div>

                    </div>
                    <div class="body_center">
                        <div class="map_tit">同济校区-近30天事件分布图</div>
                        <div class="map_pit">
                            <div id="viewDiv5" style="width: 100%;height:100%;"></div>
                        </div>
                    </div>
                    <div class="body_center">
                        <div class="map_tit">同济校区-近一年事件分布图</div>
                        <div class="map_pit">
                            <div id="viewDiv6" style="width: 100%;height:100%;"></div>
                        </div>
                    </div> -->
                </div>
            </div>
            <div class="slidesRight">
                <div class="slideBox3">
                    <div class="workNum" ng-if="slideBoxLeft3 == 0 || slideBoxLeft3 == 3">
                        <div class="list">
                            <p>实时工单<span class="size12">（件）</span></p>
                            <p class="orange">{{incident_allData}}</p>
                        </div>
                        <div class="list">
                            <p>及时响应工单<span class="size12">（件）</span></p>
                            <p class="yellow">{{incident_responseData}}</p>
                        </div>
                        <div class="list">
                            <p>处理中工单<span class="size12">（件）</span></p>
                            <p class="green">{{incident_solveNowData}}</p>
                        </div>
                        <div class="list">
                            <p>已解决工单<span class="size12">（件）</span></p>
                            <p class="blue">{{incident_solvedData}}</p>
                        </div>
                    </div>
                    <div class="workNum" ng-if="slideBoxLeft3 == 1 || slideBoxLeft3 == 4">
                        <div class="list">
                            <p>建单总数<span class="size12">（件）</span></p>
                            <p class="orange">{{incident_total}}</p>
                        </div>
                        <div class="list">
                            <p>事件解决总时长<span class="size12">（小时）</span></p>
                            <p class="yellow">{{incident_solve_time}}</p>
                        </div>
                        <div class="list">
                            <p>已解决工单<span class="size12">（件）</span></p>
                            <p class="green">{{incident_solve_total}}</p>
                        </div>
                        <div class="list">
                            <p>满意度</p>
                            <p class="blue">{{incident_degree}}%</p>
                        </div>
                    </div>
                    <div class="workNum" ng-if="slideBoxLeft3 == 2 || slideBoxLeft3 == 5">
                        <div class="list">
                            <p>建单总数<span class="size12">（件）</span></p>
                            <p class="orange">{{incident_total}}</p>
                        </div>
                        <div class="list">
                            <p>事件解决总时长<span class="size12">（小时）</span></p>
                            <p class="yellow">{{incident_solve_time}}</p>
                        </div>
                        <div class="list">
                            <p>已解决工单<span class="size12">（件）</span></p>
                            <p class="green">{{incident_solve_total}}</p>
                        </div>
                        <div class="list">
                            <p>满意度</p>
                            <p class="blue">{{incident_degree}}%</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slidesBottom">
                <div class="slideBox4" ng-style="{'left':slideBoxLeft2}">
                    <div class="map_list">
                        <div class="title">当天事件详情</div>
                        <div class="map_list_head">
                            <div class="tab_one">
                                <span>序号</span> </div>
                            <div class="tab_one">
                                <span>姓名</span> </div>
                            <div class="tab_four">
                                <span>校区</span> </div>
                            <div class="tab_three">
                                <span>楼栋</span> </div>
                            <div class="tab_seven">
                                <span>处理问题</span>
                            </div>
                            <div class="tab_six alignCenter">
                                <span>状态</span> </div>
                        </div>
                        <div class="body1">
                            <div id="box4" class="map_list_body_poi">
                                <div id="box5" class="map_list_body">
                                    <div class="map_li list3" ng-repeat="(i,v) in placeList">
                                        <div class="tab_one">
                                            <span>{{i+1}}</span></div>
                                        <div class="tab_one">
                                            <span>{{v.name}}</span></div>
                                        <div class="tab_four">
                                            <span>{{v.area}}</span></div>
                                        <div class="tab_three">
                                            <span>{{v.place}}</span>
                                        </div>
                                        <div class="tab_seven">
                                            <span>{{v.title}}</span>
                                        </div>
                                        <div class="tab_six jusConCen">
                                            <div class='pulse18 pulseBox'
                                                ng-class="{'bgGrayPoint':v.statusid==5||v.statusid==6||v.statusid==7,'bgRedPoint':v.statusid!=5&&v.statusid!=6&&v.statusid!=7}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="map_list">
                        <div class="title">近30天事件详情</div>
                        <div class="map_list_head">
                            <div class="tab_one">
                                <span>序号</span> </div>
                            <div class="tab_one">
                                <span>校区</span> </div>
                            <div class="tab_four">
                                <span>楼栋</span> </div>
                            <div class="tab_three">
                                <span>事件总数</span> </div>
                            <div class="tab_two">
                                <span>高发类型top1</span> </div>
                            <div class="tab_two">
                                <span>高发类型top2</span> </div>
                        </div>
                        <div class="body1">
                            <div id="box8" class="map_list_body_poi">
                                <div id="box9" class="map_list_body">
                                    <div class="map_li list5" ng-repeat="(i,v) in areaMonthList">
                                        <div class="tab_one">
                                            <span>{{i+1}}</span> </div>
                                        <div class="tab_one">
                                            <span>{{v.area}}</span> </div>
                                        <div class="tab_four">
                                            <span>{{v.place}}</span> </div>
                                        <div class="tab_three">
                                            <span>{{v.sum}}</span> </div>
                                        <div class="tab_two">
                                            <span>{{v.category1}}</span> </div>
                                        <div class="tab_two">
                                            <span>{{v.category2}}</span> </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="map_list">
                        <div class="title">近一年事件详情</div>
                        <div class="map_list_head">
                            <div class="tab_one">
                                <span>序号</span> </div>
                            <div class="tab_one">
                                <span>校区</span> </div>
                            <div class="tab_four">
                                <span>楼栋</span> </div>
                            <div class="tab_three">
                                <span>事件总数</span></div>
                            <div class="tab_two">
                                <span>高发类型top1</span> </div>
                            <div class="tab_two">
                                <span>高发类型top2</span> </div>
                            <!-- <div class="tab_three">处理人员</div>
                            <div class="tab_four">处理时长</div>
                            <div class="tab_sevent">优先级</div> -->
                            <!-- <div class="tab_six">优先级</div> -->
                        </div>
                        <div class="body1">
                            <div id="box6" class="map_list_body_poi">
                                <div id="box7" class="map_list_body">
                                    <div class="map_li list4" ng-repeat="(i,v) in areaList">
                                        <div class="tab_one">
                                            <span>{{i+1}}</span> </div>
                                        <div class="tab_one">
                                            <span>{{v.area}}</span> </div>
                                        <div class="tab_four">
                                            <span>{{v.place}}</span> </div>
                                        <div class="tab_three">
                                            <span>{{v.sum}}</span> </div>
                                        <div class="tab_two">
                                            <span>{{v.category1}}</span> </div>
                                        <div class="tab_two">
                                            <span>{{v.category2}}</span> </div>
                                        <!-- <div class="tab_three">{{v.name}}</div>
                                        <div class="tab_four">{{v.minute}}</div>
                                        <div class="tab_sevent" ng-class="v.priority=='重大'?'zizhongda':'ziqita'">{{v.priority}} -->
                                    </div>
                                    <!-- <div class="tab_sevent" ng-class="v.priority=='重大'?'zizhongda':'ziqita'">{{v.priority}}</div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .bgBody {
        width: 1920px;
        height: 1080px;
        background: url(assets/images/daping/bg03.png);
        background-size: cover;
        display: flex;
        flex-direction: column
    }

    .bgBody .flle {
        float: left;
        margin-left: 20px;
        opacity: 0;
    }

    .head {
        padding: 51px 30px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
    }

    .headTit {
        position: absolute;
        font-size: 24px;
        color: #fff;
        left: 295px;
        top: 36px;
    }

    .head img {
        position: absolute;
        left: 27px;
        top: 25px;
    }

    .left {
        float: left;
        width: 484px;
        display: flex;
        flex-wrap: wrap;
    }

    .right {
        float: left;
        width: 1410px;
    }

    .head .zi {
        position: absolute;
        left: 277px;
        top: 34px;
        color: white;
        font-size: 25px;
        display: inline-block;
        width: 376px;
        height: 44px;
        background-color: rgb(15, 18, 53);
    }

    .alignLeft {
        text-align: left;
    }

    .alignRight {
        text-align: right;
    }

    .alignCenter {
        text-align: center;
    }

    .jusConCen {
        justify-content: center;
    }

    .padL10 {
        padding-left: 10px;
    }

    .size24 {
        font-size: 24px;
    }

    .size12 {
        font-size: 12px;
    }

    .all_data {
        display: flex;
    }

    .all_data>div {
        width: 470px;
        color: white;
        height: 55px;
        font-size: 24px;
        padding-left: 52px;
        margin-top: 20px;
        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
    }

    .charts_body {
        /* display: flex; */
        height: 616px;
        margin-top: 10px;
        padding-left: 19px;
    }

    .slidesTop {
        float: left;
        height: 616px;
        width: 484px;
        overflow: hidden;
        position: relative;
        margin-top: 18px;
    }

    .slideBox1 {
        width: 200%;
        height: 100%;
        position: relative;
        left: 0;
        /* transition: all 1s; */
        transition-timing-function: linear;
    }

    .slidesCenter {
        float: left;
        width: 1193px;
        height: 616px;
        overflow: hidden;
        /* overflow: auto; */
        position: relative;
        margin-left: 23px;
    }

    .slideBox2 {
        width: 600%;
        height: 100%;
        position: relative;
        left: 0;
        /* transition: all 1s; */
        transition-timing-function: linear;
    }

    .slidesRight {
        float: left;
        width: 191px;
        height: 616px;
        overflow: hidden;
        position: relative;
    }

    .slideBox3 {
        width: 600%;
        height: 100%;
        position: relative;
        left: 0;
        /* transition: all 1s; */
        transition-timing-function: linear;
    }

    .slidesBottom {
        float: left;
        width: 1387px;
        height: 300px;
        overflow: hidden;
        position: relative;
        margin-top: 18px;
        margin-left: 22px;
    }

    .slideBox4 {
        width: 300%;
        height: 100%;
        position: relative;
        left: 0;
        /* transition: all 1s; */
        transition-timing-function: linear;
    }

    .charts_body .body_left {
        width: 50%;
        height: 100%;
        position: absolute;
    }

    .charts_body .body_right {
        width: 50%;
        height: 100%;
        position: absolute;
        left: 50%;
    }

    .charts_body .body_center {
        /* margin-left: 7px; */
        width: 16.6666% !important;
        float: left;
        position: relative;
    }

    /*向上三角形左*/
    .triangle_border_up_left {
        width: 0;
        height: 0;
        border-width: 0 18px 48px;
        border-style: solid;
        border-color: transparent transparent #072E61;
        margin: 40px auto;
        position: absolute;
        left: 206px;
        top: -50px;
    }

    /*向上三角形右*/
    .triangle_border_up_right {
        width: 0;
        height: 0;
        border-width: 0 17px 48px;
        border-style: solid;
        border-color: transparent transparent #072E61;
        margin: 40px auto;
        position: absolute;
        left: 726px;
        top: -50px;
    }

    .body_center .pit {
        width: 99.4%;
        height: 92.8%;
        position: relative;
        margin-top: -48px;
        margin-left: 2px;
    }

    .body_center .pit .titImg {
        position: absolute;
        left: 41px;
        top: -5px;
    }

    .qushitu {
        position: relative;
    }

    .qushitu .tit {
        color: white;
        font-size: 21px;
        padding-left: 17px;
        margin-top: 19px;
    }

    .qushitu .zongji {
        display: flex;
        justify-content: flex-start;
        margin-top: 9px;
        padding-left: 17px;
        height: 30px;
        align-items: center;
    }

    .qushitu .zongji>span:nth-child(1) {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: rgb(34, 142, 215)
    }

    .qushitu .bgred {
        background-color: rgb(208, 64, 47) !important;
    }

    .qushitu .bgYellow {
        background-color: #eb9341 !important;
    }

    .qushitu .zongji span:nth-child(2) {
        display: inline-block;
        font-size: 18px;
        color: white;
        margin-left: 10px
    }

    .baoxiugradient {
        height: 323px;
        width: 60px;
        position: absolute;
        left: 240px;
        top: 104px;
        background: -webkit-linear-gradient(left, rgba(255, 194, 51, 0.3), transparent);
    }

    .baoxiubiao .tit {
        color: white;
        font-size: 21px;
        padding-left: 17px;
        margin-top: 32px;
    }

    .baoxiubiao .table_box {
        width: 484px;
        height: 245px;
        /* margin-left: 37px; */
        /* padding: 14px; */
        margin-top: 14px;
        border: 0;
        overflow: hidden;
        position: relative;
    }

    .baoxiubiao .baoxiu_tables {
        width: 484px;
        height: 231px;
        padding-left: 14px;
        padding-right: 14px;
        float: left;
    }

    .baoxiubiao .baoxiu_tables_box {
        /* width: 1242px;
        height: 339px; */
        position: absolute;
        left: 0;
        top: 0
    }

    .baoxiubiao .table_head {
        display: flex;
        height: 31px;
        align-items: center;
        font-size: 16px;
        color: white;
        min-height: 0;
        background: rgba(255, 255, 255, .2);
    }

    .baoxiubiao .table_list {
        display: flex;
        height: 40px;
        align-items: center;
        font-size: 16px;
        color: white;
        min-height: 0;
        border-bottom: 2px rgba(255, 255, 255, .2) solid;
    }

    .baoxiubiao .tab_one {
        text-align: center;
        width: 10%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .baoxiubiao .tab_two {
        /* text-align: center; */
        width: 70%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-left: 20px;
    }

    .baoxiubiao .tab_three {
        text-align: center;
        width: 20%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .baoxiubiao .table_list .tab_two {
        text-align: left;
        padding-left: 20px
    }

    .shijianbiao .tit {
        color: white;
        font-size: 21px;
        padding-left: 17px;
        margin-top: 32px;
    }

    .shijianbiao .table_box {
        width: 484px;
        height: 245px;
        /* margin-left: 51px; */
        /* padding: 14px; */
        margin-top: 14px;
        border: 0;
        overflow: hidden;
        position: relative;
    }

    .shijianbiao .shijian_tables {
        width: 484px;
        height: 231px;
        padding-left: 14px;
        padding-right: 14px;
        float: left;
    }

    .body {
        width: 100%;
        height: 200px;
        position: relative;
        overflow: hidden;
    }

    .body1 {
        width: 100%;
        height: 190px;
        position: relative;
        overflow: hidden;
    }

    #box,
    #box2,
    #box4,
    #box6,
    #box8 {
        width: 100%;
        margin-top: 0;
        position: absolute;
        top: 0;
    }

    .shijianbiao .shijian_tables_box {
        /* width: 1242px;
        height: 339px; */
        position: absolute;
        left: 0;
        top: 0
    }

    .shijianbiao .table_head {
        display: flex;
        height: 31px;
        align-items: center;
        font-size: 16px;
        color: white;
        min-height: 0;
        background: rgba(255, 255, 255, .2);
    }

    .shijianbiao .table_list {
        display: flex;
        height: 40px;
        align-items: center;
        font-size: 16px;
        color: white;
        min-height: 0;
        border-bottom: 2px rgba(255, 255, 255, .2) solid;
    }

    .shijianbiao .tab_one {
        text-align: center;
        width: 10%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .shijianbiao .tab_two {
        text-align: center;
        width: 40%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .shijianbiao .tab_three {
        text-align: center;
        width: 20%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .shijianbiao .tab_four {
        text-align: center;
        width: 30%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    #laidianqushitu {
        margin-left: 13px;
    }

    #baoxiuqushitu {
        margin-left: 13px;
    }

    .laidiangradient {
        height: 323px;
        width: 60px;
        position: absolute;
        left: 268px;
        top: 104px;
        background: -webkit-linear-gradient(left, rgba(243, 99, 108, 0.3), transparent);
    }

    #container,
    #containerMonth {
        width: 100%;
        float: left;
    }

    #container1 {
        width: 33%;
        height: 43%;
        float: right;
        position: absolute !important;
        right: 0;
        /* top: 28%; */
        bottom: 0;
        border-left: 1px #18f0ff solid;
        border-top: 1px #18f0ff solid;
    }

    .map_pit {
        width: 100%;
        height: 563px;
        /* margin-top: 81px; */
        /* margin-left: 56px; */
        position: relative;
        /* background: url(assets/images/daping/ditu.png) no-repeat; */
        /* background-size: cover; */
        /* background-color: #f1f1f5; */
    }

    .map_pit img {
        height: 100%;
    }

    .map_tit {
        text-align: left;
        color: white;
        font-size: 21px;
        padding-top: 24px;
        padding-left: 26px;
    }

    .map_list {
        height: 100%;
        width: 33.333%;
        padding-left: 25px;
        padding-right: 25px;
        position: relative;
        float: left;
        box-sizing: border-box;
    }

    .map_list .title {
        font-size: 20px;
        color: #fff;
        line-height: 60px;
    }

    .map_list .map_list_head {
        display: flex;
        height: 40px;
        line-height: 40px;
        color: white;
        font-size: 18px;
        border-top: 1px solid rgba(255, 255, 255, .2);
        border-bottom: 2px solid rgba(255, 255, 255, .2);
        background: rgba(255, 255, 255, .2);
        padding-left: 24px;
    }

    .map_list .map_list_head {
        display: flex;
        align-items: center;
    }

    /* .map_list .map_list_body_poi {
    } */

    .map_list .map_list_body_poi::-webkit-scrollbar {
        display: none
    }

    .map_list .map_li {
        display: flex;
        color: white;
        font-size: 16px;
        min-height: 63px;
        border-bottom: 2px solid rgba(255, 255, 255, .2);
        padding-left: 24px;
    }

    .map_list .map_li>div {
        display: flex;
        align-items: center;
    }

    .map_list .tab_one {
        width: 10%;
        /* overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis */
    }

    .map_list .tab_five {
        width: 25%;
        /* overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis */
    }

    .map_list .tab_two {
        width: 25%;
        /* overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis */
    }

    .map_list .tab_three {
        width: 13%;
        /* overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis */
        padding-right: 10px;
    }

    .map_list .tab_four {
        width: 13%;
        /* overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis */
    }

    .map_list .tab_six {
        width: 7%;
        /* overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; */
        /* padding-top: 5px */
    }

    .map_list .tab_seven {
        width: 40%;
        /* overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; */
        /* padding-top: 5px; */
    }

    .zizhongda {
        color: #ff6666 !important
    }

    /* .zichuliguo{
        color:#666666!important
    } */
    .ziqita {
        color: rgba(193, 196, 58, 1) !important
    }

    .jiedai {
        color: #ff6666 !important;
    }

    .chulizhong {
        color: #fff433 !important
    }

    .guanbi {
        color: #ffc233 !important
    }

    .qita {
        color: #18f0ff !important
    }

    .tongjixiaoqu {
        color: white;
        position: absolute;
        left: 58px;
        top: 230px;
        font-size: 20px;
        opacity: 0.6;
    }

    .zhuxiaoqu {
        color: white;
        position: absolute;
        left: 450px;
        bottom: 5px;
        font-size: 20px;
        opacity: 0.6;
    }

    .dongxiaoqu {
        color: white;
        position: absolute;
        right: 280px;
        bottom: 5px;
        font-size: 20px;
        opacity: 0.6;
    }

    /* 地图动点 */
    .pulseBox1:after {
        content: "";
        border-radius: 50%;
        height: 40px;
        width: 40px;
        position: absolute;
        margin: -14px 0 0 -14px;
        animation: pulsate 1s ease-out;
        animation-iteration-count: infinite;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-box-shadow: 0 0 1px 2px #eb934e;
        box-shadow: 0 0 1px 2px #eb934e;
        animation-delay: 1.1s;
    }
    .pulseBox:after {
        content: "";
        border-radius: 50%;
        height: 40px;
        width: 40px;
        position: absolute;
        margin: -13px 0 0 -13px;
        animation: pulsate 1s ease-out;
        animation-iteration-count: infinite;
        opacity: 0;
        filter: alpha(opacity=0);
        -webkit-box-shadow: 0 0 1px 2px rgba(193, 196, 58, 1);
        box-shadow: 0 0 1px 2px rgba(193, 196, 58, 1);
        animation-delay: 1.1s;
    }

    @keyframes pulsate {
        0% {
            transform: scale(0.1, 0.1);
            opacity: 0;
            filter: alpha(opacity=0);
        }

        50% {
            opacity: 1;
            -ms-filter: none;
            filter: none;
        }

        100% {
            transform: scale(1.2, 1.2);
            opacity: 0;
            filter: alpha(opacity=0);
        }
    }

    /* 重大 */
    .zhongda {
        background: rgb(208, 64, 47) !important;
    }

    .zhongda::after {
        -webkit-box-shadow: 0 0 1px 2px rgb(208, 64, 47) !important;
        box-shadow: 0 0 1px 2px rgb(208, 64, 47) !important;
    }

    /* 处理过 */
    .chuliguo {
        background: #666666 !important;
    }

    .chuliguo::after {
        -webkit-box-shadow: 0 0 1px 2px #666666 !important;
        box-shadow: 0 0 1px 2px #666666 !important;
    }

    /* 高 */
    .gao {
        background: rgb(249, 143, 59) !important;
    }

    .gao::after {
        -webkit-box-shadow: 0 0 1px 2px rgb(249, 143, 59) !important;
        box-shadow: 0 0 1px 2px rgb(249, 143, 59) !important;
    }

    /* 较高 */
    .jiaogao {
        background: #33ffc2 !important;
    }

    .jiaogao::after {
        -webkit-box-shadow: 0 0 1px 2px #33ffc2 !important;
        box-shadow: 0 0 1px 2px #33ffc2 !important;
    }

    /* 普通 */
    .putong {
        background: rgb(34, 142, 215) !important;
    }

    .putong::after {
        -webkit-box-shadow: 0 0 1px 2px rgb(34, 142, 215) !important;
        box-shadow: 0 0 1px 2px rgb(34, 142, 215) !important;
    }

    /* 1 */
    .pulse {
        background: rgba(193, 196, 58, 1);
        border-radius: 50%;
        height: 14px;
        width: 14px;
        position: absolute;
        left: 108px;
        top: 95px;
        margin: 11px 0px 0px -12px;
        z-index: 9999;
    }
    .pulse1 {
        background: rgba(193, 196, 58, 0);
        border: 1px solid #eb934e;
        border-radius: 50%;
        height: 14px;
        width: 14px;
        position: absolute;
        left: 108px;
        top: 95px;
        margin: 11px 0px 0px -12px;
        z-index: 9999;
    }
    /* 18 */
    .pulse18 {
        /* background: rgba(193, 196, 58, 1); */
        border-radius: 50%;
        height: 14px;
        width: 14px;
        z-index: 9999;
    }




    /* 最近解决事件详情坐标点的颜色 */

    .bgGrayPoint {
        background: rgb(102, 102, 102,1) !important;
        z-index: 1;
    }

    .bgGrayPoint::after {
        -webkit-box-shadow: 0 0 1px 2px rgb(102, 102, 102,1) !important;
        box-shadow: 0 0 1px 2px rgb(102, 102, 102) !important;
        z-index: 1;
    }

    .bgRedPoint {
        background: rgb(249, 143, 59) !important;
        z-index: 99999999999;
    }

    .bgRedPoint::after {
        -webkit-box-shadow: 0 0 1px 2px rgb(249, 143, 59) !important;
        box-shadow: 0 0 1px 2px rgb(249, 143, 59) !important;
        z-index: 99999999999;
    }
    .bgYellowPoint {
        background: yellow !important;
        z-index: 1;
    }

    .bgYellowPoint::after {
        -webkit-box-shadow: 0 0 1px 2px yellow !important;
        box-shadow: 0 0 1px 2px yellow !important;
        z-index: 1;
    }
    /* 各数据数量 */
    .workNum {
        width: 16.6666%;
        float: left;
        overflow: hidden;
        position: relative;
    }

    .workNum .list {
        width: 100%;
        height: 152px;
        text-align: center;
        color: #fff;
        padding-top: 50px;
    }

    .workNum .list p:nth-child(1) {
        font-size: 16px;
    }

    .workNum .list p:nth-child(2) {
        font-size: 30px;
    }

    p.orange {
        color: rgb(228, 128, 12);
    }

    p.yellow {
        color: rgb(223, 188, 60);
    }

    p.green {
        color: rgb(61, 148, 148);
    }

    p.blue {
        color: rgb(54, 120, 198);
    }



    /* 处理流程 */
    .chuliliucheng {
        float: left;
        width: 484px;
        height: 300px;
        background: url(assets/images/daping/image_liucheng.png) no-repeat;
        background-position: center 67px;
        background-size: 62%;
        position: relative;
    }

    .chuliliucheng .title {
        font-size: 20px;
        color: #fff;
        line-height: 60px;
        padding-left: 25px;
    }

    .chuliliucheng span {
        font-size: 14px;
        color: #fff;
        position: absolute;
    }

    .chuliliucheng span:nth-child(2) {
        left: 29px;
        top: 69px;
    }

    .chuliliucheng span:nth-child(3) {
        left: 29px;
        top: 115px;
    }

    .chuliliucheng span:nth-child(4) {
        left: 29px;
        top: 164px;
    }

    .chuliliucheng span:nth-child(5) {
        left: 29px;
        top: 212px;
    }

    .chuliliucheng span:nth-child(6) {
        left: 29px;
        top: 259px;
    }

    .chuliliucheng span:nth-child(7) {
        right: 30px;
        top: 69px;
    }

    .chuliliucheng span:nth-child(8) {
        right: 30px;
        top: 130px;
    }

    .chuliliucheng span:nth-child(9) {
        right: 30px;
        top: 202px;
    }

    .chuliliucheng span:nth-child(10) {
        right: 30px;
        top: 260px;
    }

    .activePoint:before {
        content: attr(data-haorooms);
    }

    .activePoint .rooms {
        position: absolute;
        top: -24px;
        left: 6px;
        color: white;
        font-size: 14px;
        width: 48px;
        height: 30px;
        text-align: center;
        border-radius: 10px 10px 10px 0;
        /* animation: glow 300ms ease-out infinite alternate; */
        padding: 3px;
        background:  #eb934e;
    }


    @keyframes glow {
        0% {
            border-color: red;
            /* box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 1px 0 #393; */
        }

        100% {
            border-color: yellow;
            /* box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 1px 0 #6f6; */
        }
    }
    .esri-ui-corner .esri-component{
        display: none;
    }
</style>