v3-big-data-web/src/views/courtyardManage/classifyGradeDetail.vue

<template>
    <div class="main">
        <Header/>
        <div class="main_t">
            <div class="main_t_t">
                <i class="main_t_t_l">当前位置：首页 &gt;</i>
                <i>实验室分类分级</i>
            </div>
            <div class="max-big-box">
                <div class="left-big-box">
                    <div class="max-building-box scrollbar-box">
                        <div class="for-building-box" v-if="item.buildFloorVoList[0]"
                             v-for="(item,index) in buildingOptions" :key="index">
                            <p :class="item.id == campusId?'check-item-color':''" class="item-name">{{item.name}}</p>
                            <div class="min-for-box" @click="buildingButton(index,minIndex)" v-if="minItem.buildFloorVoList[0]"
                                 v-for="(minItem,minIndex) in item.buildFloorVoList">
                                <p :class="minItem.id == buildingId?'check-item-back':''"></p>
                                <p :class="minItem.id == buildingId?'check-item-color':''">{{minItem.name}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="center-big-box">
                    <div class="center-map-big-box" ref="centerBox">
                        <div class="evacuation-shade-map-big-box"
                             v-if="newMapData"
                             :style="'width:'+newMapData.width+'px;height:'+newMapData.height+'px;transform: scale('+newMapData.zoomData+');margin-top:-'+newMapData.height/2+'px;margin-left:-'+newMapData.width/2+'px;'">
                            <div class="evacuation-shade-map-box"
                                 :style="'width:'+newMapData.width+'px;height:'+newMapData.height+'px;'">
                                <div class="evacuation-shade-map-for-box for-map-box-one"
                                     v-for="(item,index) in newMapData.mapList" :key="index" v-if="item.type == 1"
                                     :style="'background:'+item.classifiedColor+';top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                                    <div class="evacuation-shade-map-min-box">
                                        <!--名称/实验室名称-->
                                        <el-tooltip class="item" effect="dark"
                                                    :content="item.roomType != '1'?item.roomName:item.subName"
                                                    placement="top">
                                            <p class="map-for-name-p" :style="'margin-top:'+((item.h/2)-25)+'px;'">
                                                {{item.roomType != '1'?item.roomName:item.subName}}</p>
                                        </el-tooltip>
                                        <!--编号-->
                                        <el-tooltip class="item" effect="dark" :content="item.roomNum"
                                                    placement="top">
                                            <p class="map-for-num-p">{{item.roomNum}}</p>
                                        </el-tooltip>
                                    </div>
                                </div>
                                <div class="evacuation-shade-map-for-box for-map-box"
                                     v-for="(item,indexOne) in newMapData.mapList" :key="indexOne" v-if="item.type == 2"
                                     :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                                    <div class="evacuation-shade-map-min-box"></div>
                                </div>
                                <div class="evacuation-shade-map-for-box for-map-box-two"
                                     v-for="(item,indexTwo) in newMapData.mapList" :key="indexTwo" v-if="item.type == 3"
                                     @click="shadeCheckRoomClick(item)"
                                     :class="item.roomCheckType?'for-map-box-two-check':''"
                                     :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                                    <div class="evacuation-shade-map-min-box"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="center-bottom-max-big-box scrollbar-x-box">
                        <div class="center-bottom-for-big-box" v-if="mapData.mapList[0]"
                             :class="mapData.id==floorId?'checkFloor':''"
                             @click="floorCheck(bigIndex)"
                             v-for="(mapData,bigIndex) in floorList" :key="mapData.id">
                            <div class="center-bottom-for-min-box">
                                <div class="evacuation-shade-map-big-box"
                                     :style="'width:'+mapData.minWidth+'px;height:'+mapData.minHeight+'px;transform: scale('+mapData.minZoomData+');margin-top:-'+mapData.minHeight/2+'px;margin-left:-'+mapData.minWidth/2+'px;'">
                                    <div class="evacuation-shade-map-box"
                                         :style="'width:'+mapData.minWidth+'px;height:'+mapData.minHeight+'px;'">
                                        <div class="evacuation-shade-map-for-box "
                                             :class="item.type==1?'for-map-box-one':(item.type==2?'for-map-box':(item.type==3?'for-map-box-two':''))"
                                             v-for="(item,index) in mapData.mapList" :key="item.key" v-if="item.type == 1 || item.type == 2 || item.type == 3"
                                             :style="'background:'+item.classifiedColor+';top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                                            <div class="evacuation-shade-map-min-box" v-if="item.type == 1">
                                                <!--名称/实验室名称-->
                                                <p class="map-for-name-p" :style="'margin-top:'+((item.h/2)-25)+'px;'">
                                                    {{item.roomType == '-99'?item.roomName:item.subName}}</p>
                                                <!--编号-->
                                                <p class="map-for-num-p">{{item.roomNum}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="max-for-name-p">{{mapData.name}}</p>
                        </div>
                        <div class="center-bottom-for-big-box-position" ref="minForBox"></div>
                    </div>
                </div>
                <div class="right-big-box">
                    <div class="lv-max-box scrollbar-box">
                        <div class="lv-for-box" v-for="(item,index) in lvList" :key="index">
                            <p :style="'background:'+item.titleColor+';'"></p>
                            <p>{{item.titleName}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        getNoAuthTreeList,
        getBuildOrFloorDetailList,
        getNoAuthList,
        classTypeListAll
    } from "@/api/index";
    import {
        laboratoryLevelConfigGetLevelTitleList,
        laboratoryBigViewGetFloorListByBigView,
        laboratoryBuildLayoutGetTreeSonList,
        systemBuildingGetTreeList
    } from "@/api/index";
    import Header from '@/components/header.vue'

    export default {
        components: {
            Header
        },
        data() {
            return {
                //校区ID
                campusId:null,
                //楼栋数据
                buildingOptions:[],
                buildingId:null,
                //楼层数据
                floorList:[],
                floorId:null,
                //分级数据
                lvList: [],
                //大图缩放比例
                zoomData: null,
                //小图缩放比例
                minZoomData: null,
                //地图数据
                newMapData:null,
                //地图窗口尺寸
                mapBoxWidth:null,
                mapBoxHeight:null,
                //小地图窗口尺寸
                minMapBoxWidth:null,
                minMapBoxHeight:null,
            }
        },
        created() {

        },
        mounted() {
            this.systemBuildingGetTreeList();
            this.laboratoryLevelConfigGetLevelTitleList();
        },
        methods: {
            //楼栋选择
            buildingButton(index,minIndex){
                console.log('index==',index)
                console.log('minIndex==',minIndex)
                console.log('campusId==',this.campusId)
                console.log('buildingId==',this.buildingId)
                if(this.campusId == this.buildingOptions[index].id && this.buildingId == this.buildingOptions[index].buildFloorVoList[minIndex].id){

                }else{
                    this.laboratoryBigViewGetFloorListByBigView(this.buildingOptions[index].id,this.buildingOptions[index].buildFloorVoList[minIndex].id);
                }
            },
            //获取楼栋数据
            systemBuildingGetTreeList() {
                systemBuildingGetTreeList({}).then((response) => {
                    if (response.code == 200) {
                        let list = [{
                            floorNum: null,
                            groupName: null,
                            id: "101093843117592688",
                            imgUrl: null,
                            name: "南校区",
                            parentId: "0",
                            roomNum: null,
                            sortNo: 1,
                            type: 1,
                            buildFloorVoList:[{
                                "id": "101093843117592803",
                                "name": "农科楼(资源环境学院)",
                                "type": 2,
                                "imgUrl": null,
                                "parentId": "101093843117592688",
                                "sortNo": 1,
                                "floorNum": null,
                                "roomNum": null,
                                "groupName": null,
                                "buildFloorVoList": [{
                                    "id": "101093843117593020",
                                    "name": "1层",
                                    "type": 3,
                                    "imgUrl": null,
                                    "parentId": "101093843117592803",
                                    "sortNo": 1,
                                    "floorNum": null,
                                    "roomNum": null,
                                    "groupName": null,
                                    "buildFloorVoList": []
                                }, {
                                    "id": "101093843117593021",
                                    "name": "2层",
                                    "type": 3,
                                    "imgUrl": null,
                                    "parentId": "101093843117592803",
                                    "sortNo": 1,
                                    "floorNum": null,
                                    "roomNum": null,
                                    "groupName": null,
                                    "buildFloorVoList": []
                                }, {
                                    "id": "101093843117593022",
                                    "name": "9层",
                                    "type": 3,
                                    "imgUrl": null,
                                    "parentId": "101093843117592803",
                                    "sortNo": 1,
                                    "floorNum": null,
                                    "roomNum": null,
                                    "groupName": null,
                                    "buildFloorVoList": []
                                }, {
                                    "id": "101093843117593023",
                                    "name": "3层",
                                    "type": 3,
                                    "imgUrl": null,
                                    "parentId": "101093843117592803",
                                    "sortNo": 1,
                                    "floorNum": null,
                                    "roomNum": null,
                                    "groupName": null,
                                    "buildFloorVoList": []
                                }, {
                                    "id": "101093843117593024",
                                    "name": "4层",
                                    "type": 3,
                                    "imgUrl": null,
                                    "parentId": "101093843117592803",
                                    "sortNo": 1,
                                    "floorNum": null,
                                    "roomNum": null,
                                    "groupName": null,
                                    "buildFloorVoList": []
                                }, {
                                    "id": "101093843117593025",
                                    "name": "5层",
                                    "type": 3,
                                    "imgUrl": null,
                                    "parentId": "101093843117592803",
                                    "sortNo": 1,
                                    "floorNum": null,
                                    "roomNum": null,
                                    "groupName": null,
                                    "buildFloorVoList": []
                                }, {
                                    "id": "101093843117593026",
                                    "name": "6层",
                                    "type": 3,
                                    "imgUrl": null,
                                    "parentId": "101093843117592803",
                                    "sortNo": 1,
                                    "floorNum": null,
                                    "roomNum": null,
                                    "groupName": null,
                                    "buildFloorVoList": []
                                }, {
                                    "id": "101093843117593027",
                                    "name": "7层",
                                    "type": 3,
                                    "imgUrl": null,
                                    "parentId": "101093843117592803",
                                    "sortNo": 1,
                                    "floorNum": null,
                                    "roomNum": null,
                                    "groupName": null,
                                    "buildFloorVoList": []
                                }, {
                                    "id": "101093843117593028",
                                    "name": "8层",
                                    "type": 3,
                                    "imgUrl": null,
                                    "parentId": "101093843117592803",
                                    "sortNo": 1,
                                    "floorNum": null,
                                    "roomNum": null,
                                    "groupName": null,
                                    "buildFloorVoList": []
                                }]
                            }]
                        }];
                        // for(let i=0;i<response.data.length;i++){
                        //     let num = 0;
                        //     if(response.data[i].buildFloorVoList[0]){
                        //         for(let o=0;o<response.data[i].buildFloorVoList.length;o++){
                        //             if(response.data[i].buildFloorVoList[o].buildFloorVoList[0]){
                        //                 for(let x=0;x<response.data[i].buildFloorVoList[o].buildFloorVoList.length;x++){
                        //                     num++
                        //                 }
                        //             }
                        //         }
                        //     }
                        //     if(num != 0){
                        //         list.push(response.data[i]);
                        //     }
                        // }
                        this.$set(this,'buildingOptions',list);
                        if(list[0]){
                            this.laboratoryBigViewGetFloorListByBigView(list[0].id,list[0].buildFloorVoList[0].id);
                        }
                    }
                })
            },
            //获取楼层数据
            laboratoryBigViewGetFloorListByBigView(campusId,buildingId) {
                let self = this;
                this.$set(this,'mapBoxWidth',parseInt(this.$refs.centerBox.getBoundingClientRect().width));
                this.$set(this,'mapBoxHeight',parseInt(this.$refs.centerBox.getBoundingClientRect().height));
                this.$set(this,'minMapBoxWidth',parseInt(this.$refs.minForBox.getBoundingClientRect().width));
                this.$set(this,'minMapBoxHeight',parseInt(this.$refs.minForBox.getBoundingClientRect().height));
                laboratoryBigViewGetFloorListByBigView({id : buildingId}).then((response) => {
                    if (response.code == 200) {
                        let list = [];
                        console.log('response.data',response.data);
                        for(let i=0;i<response.data.length;i++){
                            if(response.data[i].buildLayoutVoList){
                                if(response.data[i].buildLayoutVoList[0]){
                                    this.$set(this,'floorId',null);
                                    let obj = {
                                        id:response.data[i].id,
                                        name:response.data[i].name,
                                        parentId:response.data[i].parentId,
                                        subNum:response.data[i].subNum,
                                        buildFloorLayoutVoList:response.data[i].buildLayoutVoList,
                                        checkType:i==0?true:false,
                                    }
                                    let minList = JSON.parse(response.data[i].labExitLineVo.layoutJoinData)
                                    for(let x=0;x<minList.length;x++){
                                        if(minList[x].type == '1'){
                                            for(let o=0;o<response.data[i].buildLayoutVoList.length;o++){
                                                if(minList[x].key == response.data[i].buildLayoutVoList[o].pointName){
                                                    minList[x].id = response.data[i].buildLayoutVoList[o].id;
                                                    minList[x].buildId = response.data[i].buildLayoutVoList[o].buildId;
                                                    minList[x].floorId = response.data[i].buildLayoutVoList[o].floorId;
                                                    minList[x].roomType = response.data[i].buildLayoutVoList[o].roomType;
                                                    minList[x].roomName = response.data[i].buildLayoutVoList[o].roomName;
                                                    minList[x].roomNum = response.data[i].buildLayoutVoList[o].roomNum;
                                                    minList[x].subName = response.data[i].buildLayoutVoList[o].subName;
                                                    minList[x].subId = response.data[i].buildLayoutVoList[o].subId;
                                                    minList[x].classifiedId = response.data[i].buildLayoutVoList[o].classifiedId?response.data[i].buildLayoutVoList[o].classifiedId:'';
                                                    minList[x].classifiedColor = response.data[i].buildLayoutVoList[o].levelColor?response.data[i].buildLayoutVoList[o].levelColor:'#093751';
                                                    minList[x].typeId = response.data[i].buildLayoutVoList[o].typeId?response.data[i].buildLayoutVoList[o].typeId:'';
                                                }
                                            }
                                        }
                                    }
                                    let minObj = this.calculateMapMax(minList,this.mapBoxHeight,this.mapBoxWidth);
                                    let minObjTwo = this.calculateMapMax(minList,this.minMapBoxHeight,this.minMapBoxWidth);
                                    obj.width = minObj.maxWidth;
                                    obj.height = minObj.maxHeight;
                                    obj.zoomData = minObj.zoomData;
                                    obj.minWidth = minObjTwo.maxWidth;
                                    obj.minHeight = minObjTwo.maxHeight;
                                    obj.minZoomData = minObjTwo.zoomData;
                                    obj.mapList = JSON.parse(JSON.stringify(minList));
                                    list.push(obj);
                                }
                            }
                        }
                        if(list[0]){
                            this.$set(this,'campusId',campusId);
                            this.$set(this,'buildingId',buildingId);
                            this.$set(this,'floorList',list);
                            this.$set(this,'floorId',list[0].id);
                            this.floorCheck(0)
                        }else{
                            this.$message({
                                type:'error',
                                message:'该楼栋下未配置楼层',
                                iconClass:'123',
                            });
                        }
                    }else{
                        this.$message({
                            type:'error',
                            message:'该楼栋下未配置楼层',
                            iconClass:'123',
                        });
                    }
                })
            },
            //选中楼层
            floorCheck(index){
                if(index != this.floorId){
                    this.$set(this,'newMapData',this.floorList[index]);
                    this.$set(this,'floorId',this.floorList[index].id);
                    this.$forceUpdate;
                }
            },
            //获取实验室数据
            getNoAuthList(){
                getNoAuthList().then((response) => {
                    if (response.code == 200) {

                    }
                })
            },
            //获取分级数据
            laboratoryLevelConfigGetLevelTitleList() {
                laboratoryLevelConfigGetLevelTitleList({}).then((response) => {
                    if (response.code == 200) {
                        this.$set(this, 'lvList', response.data);
                    }
                })
            },
            //返回按钮
            back() {
                this.$router.push('/home')
            },
            //计算布局最大尺寸
            calculateMapMax(list, height, width) {
                //基础参数
                let maxWidth = 0
                let maxHeight = 0
                let zoomData = 1;
                //参数处理
                for (let i = 0; i < list.length; i++) {
                    if ((list[i].x + list[i].w) > maxWidth) {
                        maxWidth = list[i].x + list[i].w
                    }
                    if ((list[i].y + list[i].h) > maxHeight) {
                        maxHeight = list[i].y + list[i].h
                    }
                }
                //处理等值数据
                if (maxHeight == height) {
                    maxHeight++
                }
                if (maxWidth == width) {
                    maxWidth++
                }
                //缩放判断
                let zoomNumOne = height / maxHeight;
                if (parseInt(this.accMul(zoomNumOne, maxHeight)) <= height && parseInt(this.accMul(zoomNumOne, maxWidth)) <= width) {
                    zoomData = zoomNumOne;
                }
                let zoomNumTwo = width / maxWidth;
                if (parseInt(this.accMul(zoomNumTwo, maxHeight)) <= height && parseInt(this.accMul(zoomNumTwo, maxWidth)) <= width) {
                    zoomData = zoomNumTwo;
                }
                return {maxWidth: maxWidth, maxHeight: maxHeight, zoomData: zoomData}
            },
            accMul(arg1, arg2) {
                var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
                try {
                    m += s1.split(".")[1].length
                } catch (e) {
                }
                try {
                    m += s2.split(".")[1].length
                } catch (e) {
                }
                return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
            },
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .main {
        width: 1920px;
        height: 1080px;
        /* background: url("../img/index_bg.png") no-repeat;
         background-size: 100% 100%;*/
        position: relative;
        left: 0;
        top: 0;
        z-index: 50;
        background: #062338;
        .main_t {
            width: 1852px;
            height: 955px;
            position: absolute;
            left: 34px;
            top: 86px;
            z-index: 200;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            background: #093751;
            margin-top:20px;
            .main_t_t {
                margin: 20px 0 0 18px;
                > i {
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 16px;
                }
                > i:nth-of-type(1) {

                }
                > i:nth-of-type(2) {
                    color: #1ED0F8;
                }
            }
            .max-big-box {
                flex: 1;
                display: flex;
                overflow: hidden;
                .left-big-box {
                    width: 270px;
                    height: 880px;
                    overflow: hidden;
                    margin-left:20px;
                    .max-building-box{
                        margin-top:80px;
                        margin-right:20px;
                        height: 800px;
                        .for-building-box:nth-child(1){
                            border:none;
                        }
                        .for-building-box{
                            margin-right:20px;
                            margin-bottom:20px;
                            border-top:1px dashed #1095FB;
                            .item-name{
                                margin-top:20px;
                                flex:1;
                                display:block;
                                overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;
                                color:#fff;
                                font-size:16px;
                                line-height:20px;
                                margin-bottom:20px;
                            }
                            .min-for-box{
                                cursor: pointer;
                                display: flex;;
                                margin-bottom:10px;
                                p:nth-child(1){
                                    width:10px;
                                    height:10px;
                                    margin:5px 10px 5px 20px;
                                    border-radius:50%;
                                }
                                p:nth-child(2){
                                    flex:1;
                                    display:block;
                                    overflow:hidden;
                                    text-overflow:ellipsis;
                                    white-space:nowrap;
                                    color:#fff;
                                    font-size:14px;
                                    line-height:20px;
                                }
                            }
                            .check-item-back{
                                background:#1ED0F8;
                            }
                            .check-item-color{
                                color:#1ED0F8!important;
                            }
                        }
                    }
                }
                .center-big-box {
                    /*background: #fff;*/
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                    overflow: hidden;
                    .center-map-big-box {
                        margin-top: 80px;
                        height: 600px;
                        /*background: #0E9EED;*/
                        position: relative;
                        .evacuation-shade-map-big-box {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            -webkit-user-select: none;
                            .evacuation-shade-map-box {
                                position: relative;
                                border: 1px dashed #fff;
                                overflow: hidden;
                                .evacuation-shade-map-for-box {
                                    position: absolute;
                                    display: flex;
                                    flex-direction: column;
                                    overflow: hidden;
                                    .evacuation-shade-map-min-box {
                                        height: 100%;
                                        position: relative;
                                        .map-for-name-p {
                                            padding: 0 10px;
                                            height: 20px;
                                            line-height: 20px;
                                            font-size: 16px;
                                            text-align: center;
                                            color: #fff;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                        }
                                        .map-for-num-p {
                                            margin-top:10px;
                                            padding: 0 10px;
                                            height: 20px;
                                            line-height: 20px;
                                            font-size: 16px;
                                            text-align: center;
                                            color: #fff;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;
                                        }
                                        .position-box {
                                            position: absolute;
                                            font-size: 14px;
                                            overflow: hidden;
                                        }
                                        .center-move-door-p-t {
                                            background: url("../../assets/image/icon_pmbjt_m.png") !important;
                                            background-size: 100% !important;
                                            transform: rotate(180deg);
                                        }
                                        .center-move-door-p-b {
                                            background: url("../../assets/image/icon_pmbjt_m.png") !important;
                                            background-size: 100% !important;
                                        }
                                        .center-move-door-p-l {
                                            background: url("../../assets/image/icon_pmbjt_m.png") !important;
                                            background-size: 100% !important;
                                            transform: rotate(90deg);
                                        }
                                        .center-move-door-p-r {
                                            background: url("../../assets/image/icon_pmbjt_m.png") !important;
                                            background-size: 100% !important;
                                            transform: rotateZ(270deg);
                                        }
                                    }
                                }
                                .for-map-box-one {
                                    /*background: rgba(7, 36, 54, 1px;*/
                                    border: 1px solid #fff;
                                }
                                .for-map-box {
                                    /*background: rgba(1,16,32,1px;*/
                                    /*background: rgba(6, 30, 48, 1px;*/
                                }
                                .for-map-box-two {
                                    /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 1px;*/
                                    background: url("../../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 0);
                                    background-size: 80px 80px;
                                }
                                .for-map-box-two-check {
                                    /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 1px;*/
                                    background: url("../../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 0);
                                    background-size: 80px 80px;
                                }
                                .room-type-one {
                                    //选中
                                    background: rgba(30, 118, 142, 0.4);
                                }
                                .room-type-two {
                                    //报警
                                    background: rgba(232, 0, 0, 0.4);
                                    box-shadow: 0 0 10px 1px #E80000 inset;
                                }
                                .room-type-three {
                                    //选中报警
                                    background: rgba(30, 118, 142, 0.4);
                                    box-shadow: 0 0 10px 1px #E80000 inset;
                                }
                                .room-type-noe {
                                    /*border:1px solid #666;*/
                                    /*background: rgba(102,102,102,0.6px;*/
                                }
                            }
                        }
                    }
                    .center-bottom-max-big-box{
                        margin-top:40px;
                        width:1270px;
                        height:220px;
                        white-space: nowrap;
                        .center-bottom-for-big-box:nth-child(1){
                            margin-left:0;
                        }
                        .center-bottom-for-big-box{
                            cursor: pointer;
                            margin-left:20px;
                            display: inline-block;
                            width:300px;
                            height:200px;
                            .center-bottom-for-min-box{
                                width:302px;
                                height:162px;
                                border:1px solid #666;
                                position: relative;
                                .evacuation-shade-map-big-box {
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    -webkit-user-select: none;
                                    .evacuation-shade-map-box {
                                        position: relative;
                                        overflow: hidden;
                                        .evacuation-shade-map-for-box {
                                            position: absolute;
                                            display: flex;
                                            flex-direction: column;
                                            overflow: hidden;
                                            .evacuation-shade-map-min-box {
                                                height: 100%;
                                                position: relative;
                                                .map-for-name-p {
                                                    padding: 0 10px;
                                                    height: 20px;
                                                    line-height: 20px;
                                                    font-size: 16px;
                                                    text-align: center;
                                                    color: #fff;
                                                    overflow: hidden;
                                                    text-overflow: ellipsis;
                                                    white-space: nowrap;
                                                }
                                                .map-for-num-p {
                                                    margin-top:10px;
                                                    padding: 0 10px;
                                                    height: 20px;
                                                    line-height: 20px;
                                                    font-size: 16px;
                                                    text-align: center;
                                                    color: #fff;
                                                    overflow: hidden;
                                                    text-overflow: ellipsis;
                                                    white-space: nowrap;
                                                }
                                                .position-box {
                                                    position: absolute;
                                                    font-size: 14px;
                                                    overflow: hidden;
                                                }
                                                .center-move-door-p-t {
                                                    background: url("../../assets/image/icon_pmbjt_m.png") !important;
                                                    background-size: 100% !important;
                                                    transform: rotate(180deg);
                                                }
                                                .center-move-door-p-b {
                                                    background: url("../../assets/image/icon_pmbjt_m.png") !important;
                                                    background-size: 100% !important;
                                                }
                                                .center-move-door-p-l {
                                                    background: url("../../assets/image/icon_pmbjt_m.png") !important;
                                                    background-size: 100% !important;
                                                    transform: rotate(90deg);
                                                }
                                                .center-move-door-p-r {
                                                    background: url("../../assets/image/icon_pmbjt_m.png") !important;
                                                    background-size: 100% !important;
                                                    transform: rotateZ(270deg);
                                                }
                                            }
                                        }
                                        .for-map-box-one {
                                            /*background: rgba(7, 36, 54, 1px;*/
                                            border: 1px solid #fff;
                                        }
                                        .for-map-box {
                                            /*background: rgba(1,16,32,1px;*/
                                            /*background: rgba(6, 30, 48, 1px;*/
                                        }
                                        .for-map-box-two {
                                            /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 1px;*/
                                            background: url("../../assets/image/icon_jjck.png") center center no-repeat rgba(6,35,56,0)!important;
                                            background-size: 80px 80px;
                                        }
                                        .for-map-box-two-check {
                                            /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 1px;*/
                                            background: url("../../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 0);
                                            background-size: 80px 80px;
                                        }
                                        .room-type-one {
                                            //选中
                                            background: rgba(30, 118, 142, 0.4);
                                        }
                                        .room-type-two {
                                            //报警
                                            background: rgba(232, 0, 0, 0.4);
                                            box-shadow: 0 0 10px 1px #E80000 inset;
                                        }
                                        .room-type-three {
                                            //选中报警
                                            background: rgba(30, 118, 142, 0.4);
                                            box-shadow: 0 0 10px 1px #E80000 inset;
                                        }
                                        .room-type-noe {
                                            /*border:1px solid #666;*/
                                            /*background: rgba(102,102,102,0.6px;*/
                                        }
                                    }
                                }
                            }
                            .max-for-name-p{
                                line-height:40px;
                                font-size:18px;
                                color:#fff;
                                text-align: center;
                                display:block;
                                overflow:hidden;
                                text-overflow:ellipsis;
                                white-space:nowrap;
                            }
                        }
                        .checkFloor{
                            .center-bottom-for-min-box{
                                border:1px solid #1ED0F8!important;
                            }
                            .max-for-name-p{
                                color:#1ED0F8!important;
                            }
                        }
                        .center-bottom-for-big-box-position{
                            position: absolute;
                            top:9999px;
                            left:9999px;
                            z-index: -100;
                            display: inline-block;
                            width:300px;
                            height:160px;
                        }
                    }
                }
                .right-big-box {
                    width: 290px;
                    height: 880px;
                    overflow: hidden;
                    .lv-max-box {
                        height: 800px;
                        margin-top: 80px;
                        margin-left: 100px;
                        .lv-for-box {
                            display: flex;
                            margin-bottom: 18px;
                            p:nth-child(1) {
                                width: 18px;
                                height: 18px;
                            }
                            p:nth-child(2) {
                                margin-left: 20px;
                                color: #fff;
                                font-size: 16px;
                            }
                        }
                    }
                }
                //滚动条
                .scrollbar-box{
                    overflow-y: scroll;
                }
                .scrollbar-box::-webkit-scrollbar{
                    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
                    height: 4px;
                }
                .scrollbar-box::-webkit-scrollbar-thumb{
                    border-radius: 5px;
                    -webkit-box-shadow: inset 0 0 5px #999;
                    background: #fff;
                }
                .scrollbar-box::-webkit-scrollbar-track{
                    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
                    border-radius: 0;
                    background: rgba(255,255,255,0);
                }
                .scrollbar-x-box{
                    overflow-y: hidden;
                    overflow-x: scroll;
                }
                .scrollbar-x-box::-webkit-scrollbar{
                    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
                    height: 4px;
                }
                .scrollbar-x-box::-webkit-scrollbar-thumb{
                    border-radius: 5px;
                    -webkit-box-shadow: inset 0 0 5px #999;
                    background: #fff;
                }
                .scrollbar-x-box::-webkit-scrollbar-track{
                    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
                    border-radius: 0;
                    background: rgba(255,255,255,0);
                }
            }
            .main_t_b {
                position: absolute;
                width: 1490px;
                height: 794px;
                margin-left: 282px;
                margin-top: 80px;
            }
        }

    }
</style>
<style lang="scss">
    li {
        list-style: none
    }

    i, em, b {
        font-style: normal;
        font-weight: 100;
    }

    body {
        margin: 0
    }
</style>