zc

src/api/classifyGradeDetail.js

@@ -0,0 +1,35 @@
+import axios from "../utils/request";
+let {get, post,baseUrl} = axios
+
+//基础
+export const requestUrl = baseUrl;
+
+//获取楼栋数据(无权限)
+export const getNoAuthTreeList = data => get(
+    "/laboratory/buildFloor/getNoAuthTreeList",
+    data
+);
+
+//获取楼层数据(无权限)
+export const getBuildOrFloorDetailList = data => get(
+    "/laboratory/buildFloor/getBuildOrFloorDetailList",
+    data
+);
+
+//获取实验室列表数据(无权限)
+export const getNoAuthList = data => get(
+    "/laboratory/buildFloorLayout/getNoAuthList",
+    data
+);
+
+//获取分类数据(无权限)
+export const classIfIedListAll = data => get(
+    "/laboratory/classified/listAll",
+    data
+);
+
+//获取分级数据(无权限)
+export const classTypeListAll = data => get(
+    "/laboratory/classtype/listAll",
+    data
+);

src/utils/request.js

@@ -1,5 +1,16 @@
 import axios from "axios";
 import qs from "qs";
+import { Message, Loading } from 'element-ui'
+let loadingInstance = {};
+let options = {
+    spinner:"",
+    background: 'rgba(255, 255, 255, 0.1)'
+};
+let loadingCount = 0;
+/*
+
+
+*/
 
 axios.defaults.baseURL = window.location.href.split('://')[0]+'://' +process.env.VUE_APP_BASE_API //测试
 
@@ -23,37 +34,64 @@ axios.defaults.withCredentials = false;
 
 // 允许跨域
 axios.defaults.headers.post["Access-Control-Allow-Origin-Type"] = "*";
-//axios.defaults.headers.common["Authorization"] = 'Bearer f49d7770-515a-4661-8d07-fc07256c8165';//`Bearer ${localStorage.getItem('access_token')`;
-axios.defaults.headers.common["Authorization"] = 'Bearer '+localStorage.getItem('Authorization')+''
+axios.defaults.headers.common["Authorization"] = 'Bearer 82cfee09-b90a-425d-847d-747a4a6d33f9';//`Bearer ${localStorage.getItem('access_token')`;
+// axios.defaults.headers.common["Authorization"] = 'Bearer '+localStorage.getItem('Authorization')+''
 
 //设置超时
 axios.defaults.timeout = 15000;
 
 axios.interceptors.request.use(
     config => {
+        loadingInstance = Loading.service(options)
+        loadingCount ++;
         return config;
     },
     error => {
+        loadingCount --;
+        if(loadingCount===0){
+            loadingInstance.close();
+        }
         return Promise.reject(error);
     }
 );
 
 axios.interceptors.response.use(
     response => {
+        loadingCount --;
+        if(loadingCount===0) {
+            loadingInstance.close();
+        }
         if (response.status == 200) {
-            return Promise.resolve(response);
+            if(response.data.code == 200){
+                return Promise.resolve(response);
+            }else{
+                Message({
+                    message: response.data.msg,
+                    type: 'error',
+                    duration: 5 * 1000,
+                    offset:100
+                })
+            }
         } else {
-            return Promise.reject(response);
+            Message({
+                message: response.data.msg,
+                type: 'error',
+                duration: 5 * 1000,
+                offset:100
+            })
         }
     },
     error => {
-
-        console.log(JSON.stringify(error), '请求异常', {
-            confirmButtonText: '确定',
-            callback: (action) => {
-                console.log(action)
-            }
-        });
+        loadingCount --;
+        if(loadingCount===0){
+            loadingInstance.close();
+        }
+        Message({
+            message: error,
+            type: 'error',
+            duration: 5 * 1000,
+            offset:100
+        })
     }
 );
 export default {

src/views/classifyGradeDetail.vue

@@ -1,107 +1,614 @@
 <template>
-  <div class="main">
+    <div class="main">
         <Header/>
         <div class="main_t">
             <div class="main_t_t">
                 <i class="main_t_t_l">当前位置：首页 &gt;</i>
                 <i>实验室分类分级</i>
             </div>
-            <img class="main_t_b"  src="@/assets/image/img_sysbjt.png" />
+            <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="mapData"
+                             :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;transform: scale('+mapData.zoomData+');margin-top:-'+mapData.height/2+'px;margin-left:-'+mapData.width/2+'px;'">
+                            <div class="evacuation-shade-map-box"
+                                 :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;'">
+
+                                <!--:class="!item.planType && checkSubId ==item.subId ? 'room-type-one':(-->
+                                <!--item.planType && checkSubId !=item.subId ? 'room-type-two':(-->
+                                <!--item.planType && checkSubId ==item.subId ? 'room-type-three':(-->
+                                <!--!item.loginAdmin ? 'room-type-noe':''-->
+                                <!--)))"-->
+                                <div class="evacuation-shade-map-for-box for-map-box-one"
+                                     v-for="(item,index) in mapData.mapList" :key="index" v-if="item.type == 1"
+                                     :style="'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 == '-99'?item.roomName:item.subName"
+                                                    placement="top">
+                                            <p class="map-for-name-p" :style="'margin-top:'+((item.h/2)-20)+'px;'">
+                                                {{item.roomType == '-99'?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 class="position-box"
+                                             :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
+                                             v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
+                                             :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
+                                    </div>
+                                </div>
+                                <div class="evacuation-shade-map-for-box for-map-box"
+                                     v-for="(item,indexOne) in mapData.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 mapData.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>
+                <div class="right-big-box">
+                    <div class="lv-max-box">
+                        <div class="lv-for-box" v-for="(item,index) in lvList" :key="index">
+                            <p :style="'background:'+item.classifiedColor+';'"></p>
+                            <p>{{item.classifiedName}}</p>
+                        </div>
+                    </div>
+                </div>
+                <!--<img class="main_t_b" src="@/assets/image/img_sysbjt.png"/>-->
+            </div>
         </div>
     </div>
 </template>
 
 <script>
-import {} from "../api/http"
-import Header from '@/components/header.vue'
-export default {
-  components: {
-    Header
-  },
-  data() {
-    return {
-
-
-    }
-  },
-  methods: {
-    back(){
-      this.$router.push('/')
-    },
+    import {
+        getNoAuthTreeList,
+        getBuildOrFloorDetailList,
+        getNoAuthList,
+        classIfIedListAll,
+        classTypeListAll
+    } from "../api/classifyGradeDetail"
+    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,
+                //地图数据
+                mapData:null,
+                //地图窗口尺寸
+                mapBoxWidth:null,
+                mapBoxHeight:null,
+            }
+        },
+        created() {
 
+        },
+        mounted() {
+            this.getNoAuthTreeList();
+            this.classIfIedListAll();
+        },
+        methods: {
+            //楼栋选择
+            buildingButton(index,minIndex){
+                if(this.campusId != index && minIndex != this.buildingId){
+                    this.getBuildOrFloorDetailList(this.buildingOptions[index].id,this.buildingOptions[index].buildFloorVoList[minIndex].id);
+                }
+            },
+            //获取楼栋数据
+            getNoAuthTreeList() {
+                getNoAuthTreeList().then((response) => {
+                    if (response.code == 200) {
+                        let list = [];
+                        for(let i=0;i<response.data.length;i++){
+                            let num = 0;
+                            for(let o=0;o<response.data[i].buildFloorVoList.length;o++){
+                                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.getBuildOrFloorDetailList(list[0].id,list[0].buildFloorVoList[0].id);
+                        }
+                    }
+                })
+            },
+            //获取楼层数据
+            getBuildOrFloorDetailList(campusId,buildingId) {
+                this.$set(this,'mapBoxWidth',parseInt(this.$refs.centerBox.getBoundingClientRect().width));
+                this.$set(this,'mapBoxHeight',parseInt(this.$refs.centerBox.getBoundingClientRect().height));
+                getBuildOrFloorDetailList({parentId : 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].buildFloorLayoutVoList[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].buildFloorLayoutVoList,
+                                    checkType:i==0?true:false,
+                                }
+                                let minList = JSON.parse(response.data[i].exitLineVertexList[0].layoutJoinData)
+                                for(let x=0;x<minList.length;x++){
+                                    if(minList[x].type == '1'){
+                                        for(let o=0;o<response.data[i].buildFloorLayoutVoList.length;o++){
+                                            if(minList[x].key == response.data[i].buildFloorLayoutVoList[o].pointName){
+                                                minList[x].id = response.data[i].buildFloorLayoutVoList[o].id;
+                                                minList[x].buildId = response.data[i].buildFloorLayoutVoList[o].buildId;
+                                                minList[x].floorId = response.data[i].buildFloorLayoutVoList[o].floorId;
+                                                minList[x].roomType = response.data[i].buildFloorLayoutVoList[o].roomType;
+                                                minList[x].roomName = response.data[i].buildFloorLayoutVoList[o].roomName;
+                                                minList[x].roomNum = response.data[i].buildFloorLayoutVoList[o].roomNum;
+                                                minList[x].subName = response.data[i].buildFloorLayoutVoList[o].subName;
+                                                minList[x].subId = response.data[i].buildFloorLayoutVoList[o].subId;
+                                                minList[x].classifiedId = response.data[i].buildFloorLayoutVoList[o].classifiedId;
+                                                minList[x].typeId = response.data[i].buildFloorLayoutVoList[o].typeId;
+                                            }
+                                        }
+                                    }
+                                }
+                                let minObj = this.calculateMapMax(minList,this.mapBoxHeight,this.mapBoxWidth);
+                                obj.width = minObj.maxWidth;
+                                obj.height = minObj.maxHeight;
+                                obj.zoomData = minObj.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,'mapData',this.floorList[index]);
+                    this.$set(this,'floorId',this.floorList[index].id);
+                    this.$forceUpdate;
+                }
+            },
+            //获取实验室数据
+            getNoAuthList(){
+                getNoAuthList().then((response) => {
+                    if (response.code == 200) {
 
-  },
-  mounted() {
-  },
-
-
-}
+                    }
+                })
+            },
+            //获取分级数据
+            classIfIedListAll() {
+                classIfIedListAll().then((response) => {
+                    if (response.code == 200) {
+                        this.$set(this, 'lvList', response.data);
+                        console.log('res', response)
+                    }
+                })
+            },
+            //返回按钮
+            back() {
+                this.$router.push('/')
+            },
+            //计算布局最大尺寸
+            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;
+                    this.$set(this, 'zoomData', zoomNumOne);
+                    this.$set(this, 'minZoomData', zoomNumOne);
+                }
+                let zoomNumTwo = width / maxWidth;
+                if (parseInt(this.accMul(zoomNumTwo, maxHeight)) <= height && parseInt(this.accMul(zoomNumTwo, maxWidth)) <= width) {
+                    zoomData = zoomNumTwo;
+                    this.$set(this, 'zoomData', zoomNumTwo);
+                    this.$set(this, 'minZoomData', 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>
+    @function rw($px) {
+        @return $px*100/1920 *1vw;
+    }
 
-@function rw($px){
+    @function rh($px) {
+        @return $px*100/1080 *1vh;
+    }
 
-  @return $px*100/1920 *1vw;
-}
-@function rh($px){
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
 
-  @return $px*100/1080 *1vh;
-}
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-.main {
-  width: rw(1920);
-  height: rh(1080);
-  /* 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{
+    .main {
+        width: rw(1920);
+        height: rh(1080);
+        /* 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: rw(1852);
+            height: rh(975);
+            background: #062338;
+            position: absolute;
+            left: rw(34);
+            top: rh(86);
+            z-index: 200;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            .main_t_t {
+                margin: rh(20) 0 0 rw(18);
+                > i {
+                    font-size: rh(16);
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #FFFFFF;
+                    line-height: rh(16);
+                }
+                > i:nth-of-type(1) {
 
-    width: rw(1852);
-    height: rh(975);
-    background: #062338;
-    position: absolute;
-    left: rw(34);
-    top: rh(86);
-    z-index: 200;
-    .main_t_t{
-      margin: rh(20) 0 0 rw(18);
-      >i{
-        font-size: rh(16);
-        font-family: Microsoft YaHei;
-        font-weight: bold;
-        color: #FFFFFF;
-        line-height: rh(16);
-      }
-      >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: rw(290);
+                    height: rh(930);
+                    overflow: hidden;
+                    .max-building-box{
+                        margin-top:rh(80);
+                        margin-right:rw(40);
+                        height: rh(975);
+                        .for-building-box{
+                            margin-bottom:rh(20);
+                            .item-name{
+                                flex:1;
+                                display:block;
+                                overflow:hidden;
+                                text-overflow:ellipsis;
+                                white-space:nowrap;
+                                color:#fff;
+                                line-height:rh(20);
+                                margin-bottom:rh(20);
+                            }
+                            .min-for-box{
+                                cursor: pointer;
+                                display: flex;;
+                                margin-bottom:rh(10);
+                                p:nth-child(1){
+                                    width:rw(10);
+                                    height:rw(10);
+                                    margin:rh(5) rw(10) rh(5) rw(20);
+                                    border-radius:50%;
+                                }
+                                p:nth-child(2){
+                                    flex:1;
+                                    display:block;
+                                    overflow:hidden;
+                                    text-overflow:ellipsis;
+                                    white-space:nowrap;
+                                    color:#fff;
+                                    line-height:rh(20);
+                                }
+                            }
+                            .check-item-back{
+                                background:#1ED0F8;
+                            }
+                            .check-item-color{
+                                color:#1ED0F8!important;
+                            }
+                        }
+                    }
+                }
+                .center-big-box {
+                    /*background: #fff;*/
+                    flex: 1;
+                    .center-map-big-box {
+                        margin-top: rh(80);
+                        height: rh(600);
+                        /*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 #24D1F9;
+                                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: 14px;
+                                            text-align: center;
+                                            color: #24D1F9;
+                                            overflow: hidden;
+                                            text-overflow: ellipsis;
+                                            white-space: nowrap;
+                                        }
+                                        .map-for-num-p {
+                                            padding: 0 10px;
+                                            height: 20px;
+                                            line-height: 20px;
+                                            font-size: 14px;
+                                            text-align: center;
+                                            color: #24D1F9;
+                                            overflow: hidden;
+                                            text-overflow: ellipsis;
+                                            white-space: nowrap;
+                                        }
+                                        .user-num-box {
+                                            position: absolute;
+                                            left: 0;
+                                            display: flex;
+                                            img {
+                                                width: 20px;
+                                                height: 15px;
+                                                margin: 10px;
+                                            }
+                                            p {
+                                                line-height: 35px;
+                                                font-size: 14px;
+                                                color: #24D1F9;
+                                            }
+                                        }
+                                        .user-num-one {
+                                            top: 0;
+                                        }
+                                        .user-num-two {
+                                            bottom: 0;
+                                        }
+                                        .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, 1);
+                                    border: 1px solid #24D1F9;
+                                }
+                                .for-map-box {
+                                    /*background: rgba(1,16,32,1);*/
+                                    background: rgba(6, 30, 48, 1);
+                                }
+                                .for-map-box-two {
+                                    background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(5, 45, 43, 1);
+                                    background-size: 80px 80px;
+                                }
+                                .for-map-box-two-check {
+                                    background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 1);
+                                    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.6);*/
+                                }
+                            }
+                        }
+                    }
+                }
+                .right-big-box {
+                    width: rw(290);
+                    .lv-max-box {
+                        margin-top: rh(80);
+                        margin-left: rw(100);
+                        .lv-for-box {
+                            display: flex;
+                            margin-bottom: rh(18);
+                            p:nth-child(1) {
+                                width: rw(18);
+                                height: rh(18);
+                            }
+                            p:nth-child(2) {
+                                margin-left: rw(20);
+                                color: #fff;
+                                font-size: rh(16);
+                            }
+                        }
+                    }
+                }
+                //滚动条
+                .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);
+                }
+            }
+            .main_t_b {
+                position: absolute;
+                width: rw(1490);
+                height: rh(794);
+                margin-left: rw(282);
+                margin-top: rh(80);
+            }
+        }
 
-      }
-      >i:nth-of-type(2){
-        color: #1ED0F8;
-      }
-    }
-    .main_t_b{
-      width: rw(1490);
-      height: rh(794);
-      margin-left: rw(282);
-      margin-top:rh(80);
     }
-  }
-
-}
 </style>
 <style lang="scss">
-li{list-style:none}
-i,em,b{font-style:normal;font-weight:100;}
-body{margin: 0}
+    li {
+        list-style: none
+    }
+
+    i, em, b {
+        font-style: normal;
+        font-weight: 100;
+    }
+
+    body {
+        margin: 0
+    }
 </style>