Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

guanqb

2022-11-10 97a3015dd7a6727f646485ec26c1268c0eaee0a0

Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

 src/components/shrink/index.vue

New file
@@ -0,0 +1,70 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-11-09 13:51:23
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-09 16:31:43
 * @FilePath: \srs-police-affairs\src\components\shrink\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->
<template>
    <div class="shrink-box" @click="shrinkClick">
        {{ str }}
    </div>
</template>

<script>
export default {
    name: 'shrink',
    data () {
        return {
            str: '<<',
        }
    },
    methods: {
        shrinkClick () {
            this.$parent.contentShow = !this.$parent.contentShow
            if (this.$parent.contentShow == true) {
                this.str = '<<'
                document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                document.querySelector('.screen-full-btn').classList.remove('shrink-btn')

            } else {
                this.str = '>>'
                document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
                document.querySelector('.screen-full-btn').classList.add('shrink-btn')
            }
        }
    },

    beforeDestroy () {
        document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
        document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
    }
}
</script>

<style lang="scss" scoped>
.shrink-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 99;

    width: 36px;
    height: 88px;
    line-height: 88px;
    text-align: center;

    background: $bg-color;
    color: #fff;

    border-radius: 0 10px 10px 0;

    cursor: pointer;
}
</style>

 src/styles/base/index.scss

@@ -70,9 +70,9 @@
        .el-dialog__body {
            flex: 1;
            display: flex;
            align-items: center; 
            justify-content: center; 
            width: 100%; 
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
    }
@@ -98,18 +98,19 @@
            flex: 1;
            display: flex;
            flex-direction: row;
            flex-wrap:wrap;
            flex-wrap: wrap;
            justify-self: flex-start;
            align-content: flex-start;

            .item {
                display: flex;
                flex-direction:row;
                flex-direction: row;
                width: calc(50% - 20px);
                height: 36px;
                line-height: 36px;
                margin: 0 10px;
                text-align: left;

                &>div:first-child {
                    width: 100px;
                    text-align: justify;
@@ -117,7 +118,7 @@
                    text-align-last: justify;
                    margin-right: 20px;
                }
    

                &>div:nth-of-type(2) {
                    width: calc(100% - 120px);
                }
@@ -176,17 +177,19 @@
            flex: 1;
            display: flex;
            flex-direction: row;
            flex-wrap:wrap;
            flex-wrap: wrap;
            justify-self: flex-start;
            align-content: flex-start;

            .item {
                display: flex;
                flex-direction:row;
                flex-direction: row;
                width: calc(50% - 20px);
                height: 36px;
                line-height: 36px;
                margin: 0 10px;
                text-align: left;

                &>div:first-child {
                    width: 100px;
                    text-align: justify;
@@ -194,15 +197,15 @@
                    text-align-last: justify;
                    margin-right: 20px;
                }
    

                &>div:nth-of-type(2) {
                    width: calc(100% - 120px);
                }
            }
        }
        }
    }

        

}

.area-details-box {
@@ -225,18 +228,19 @@
            flex: 1;
            display: flex;
            flex-direction: row;
            flex-wrap:wrap;
            flex-wrap: wrap;
            justify-self: flex-start;
            align-content: flex-start;

            .item {
                display: flex;
                flex-direction:row;
                flex-direction: row;
                width: calc(50% - 20px);
                height: 36px;
                line-height: 36px;
                margin: 0 10px;
                text-align: left;

                &>div:first-child {
                    width: 100px;
                    text-align: justify;
@@ -244,7 +248,7 @@
                    text-align-last: justify;
                    margin-right: 20px;
                }
    

                &>div:nth-of-type(2) {
                    width: calc(100% - 120px);
                }
@@ -324,18 +328,19 @@
            flex: 1;
            display: flex;
            flex-direction: row;
            flex-wrap:wrap;
            flex-wrap: wrap;
            justify-self: flex-start;
            align-content: flex-start;

            .item {
                display: flex;
                flex-direction:row;
                flex-direction: row;
                width: calc(50% - 20px);
                height: 36px;
                line-height: 36px;
                margin: 0 10px;
                text-align: left;

                &>div:first-child {
                    width: 100px;
                    text-align: justify;
@@ -343,7 +348,7 @@
                    text-align-last: justify;
                    margin-right: 20px;
                }
    

                &>div:nth-of-type(2) {
                    width: calc(100% - 120px);
                }
@@ -394,17 +399,19 @@
            flex: 1;
            display: flex;
            flex-direction: row;
            flex-wrap:wrap;
            flex-wrap: wrap;
            justify-self: flex-start;
            align-content: flex-start;

            .item {
                display: flex;
                flex-direction:row;
                flex-direction: row;
                width: calc(50% - 20px);
                height: 36px;
                line-height: 36px;
                margin: 0 10px;
                text-align: left;

                &>div:first-child {
                    width: 100px;
                    text-align: justify;
@@ -419,4 +426,18 @@
            }
        }
    }
}

.special-animal-enter-active {
    transition: all .2s ease;
}

.special-animal-leave-active {
    transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.special-animal-enter,
.special-animal-leave-to {
    transform: translateX(-100%);
    opacity: 0;
}

 src/styles/dc/index.scss

@@ -28,6 +28,8 @@
    z-index: 101 !important;
    background-color: $bg-color !important;

    transition: all .3s;

    &>div {
        display: flex;
        align-items: center;
@@ -68,6 +70,7 @@
    z-index: 99;
    background-color: $bg-color !important;

    transition: all .3s;

    // &.hover-effect {
    //     cursor: pointer;
@@ -81,4 +84,12 @@

.screen-full-btn.homebottom {
    bottom: 310px;
}

.dc-zoom-controller.shrink-btn {
    left: 20px !important;
}

.screen-full-btn.shrink-btn {
    left: 20px !important;
}

 src/views/house/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-07 15:16:54
 * @LastEditTime: 2022-11-09 16:28:42
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -11,409 +11,318 @@

<template>
    <div class="container">
        <div class="search-box">
            <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
            <button @click="searchClick" class="el-icon-search"></button>
        </div>
        <div :style="{
            width: `${contentShow ? '400px' : '0'}`
        }" class="container-content">

        <div v-show="searchValBoxShow" class="search-val-box">
            <div>
                <div
                    @click="searchVlaClick(item)"
                    v-for="(item, index) in searchArray"
                    :key="index"
                >{{ item.name }}</div>
            <div v-show="contentShow" class="search-box">
                <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                <button @click="searchClick" class="el-icon-search"></button>
            </div>
        </div>

        <div class="result-content">
            <div class="housing-estate-info">
                <div class="housing-title">
                    {{ housingData.name }}
                    <div class="progress"></div>
                </div>
                <div class="housing-bg">
                    <img style="width: 100%; height: 100%;" :src="housingData.img" alt />
                </div>
                <div class="housing-introduce">
                    <div>
                        <div class="l">分类属性：</div>
                        <div class="r">{{ housingData.classify }}</div>
                    </div>
                    <div>
                        <div class="l">所属辖区：</div>
                        <div class="r">{{ housingData.area }}</div>
                    </div>
                    <div>
                        <div class="l">责任民警：</div>
                        <div class="r">{{ housingData.principal }}</div>
                    </div>
                    <div>
                        <div class="l">标准地址：</div>
                        <div class="r">{{ housingData.address }}</div>
            <div v-show="searchValBoxShow" class="search-val-box">
                <div>
                    <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{
                            item.name
                    }}
                    </div>
                </div>
            </div>

            <div class="nav-tab">
                <div
                    class="nav"
                    :class="navType == 0 ? 'choosed' : ''"
                    @click="navClick"
                    data-type="0"
                >基本信息</div>
                <div
                    class="nav"
                    :class="navType == 1 ? 'choosed' : ''"
                    @click="navClick"
                    data-type="1"
                >警务信息</div>
                <div
                    class="nav"
                    :class="navType == 2 ? 'choosed' : ''"
                    @click="navClick"
                    data-type="2"
                >预警信息</div>
            </div>

            <div class="base-info" v-show="navType == 0">
                <div class="sub-nav-list">
                    <div class="sub-nav" :class="{ on: subNavType == 1 }" @click="subNavType = 1">楼栋</div>
                    <div
                        class="sub-nav"
                        :class="{ on: subNavType == 2 }"
                        @click="subNavType = 2"
                    >出入口</div>
                    <div
                        class="sub-nav"
                        :class="{ on: subNavType == 3 }"
                        @click="subNavType = 3"
                    >停车场</div>
                    <div class="sub-nav" :class="{ on: subNavType == 4 }" @click="subNavType = 4">商业</div>
            <div v-show="contentShow" class="result-content">
                <div class="housing-estate-info">
                    <div class="housing-title">
                        {{ housingData.name }}
                        <div class="progress"></div>
                    </div>
                    <div class="housing-bg">
                        <img style="width: 100%; height: 100%;" :src="housingData.img" alt />
                    </div>
                    <div class="housing-introduce">
                        <div>
                            <div class="l">分类属性：</div>
                            <div class="r">{{ housingData.classify }}</div>
                        </div>
                        <div>
                            <div class="l">所属辖区：</div>
                            <div class="r">{{ housingData.area }}</div>
                        </div>
                        <div>
                            <div class="l">责任民警：</div>
                            <div class="r">{{ housingData.principal }}</div>
                        </div>
                        <div>
                            <div class="l">标准地址：</div>
                            <div class="r">{{ housingData.address }}</div>
                        </div>
                    </div>
                </div>

                <div class="floor-content" v-show="subNavType == 1">
                    <div class="build-info">
                        <div class="nextBtn" @click="lastBtn" v-show="lastBtnShow == true">
                            <i class="el-icon-caret-left"></i>
                        </div>
                        <div class="build-outBox">
                            <div
                                class="build-box"
                                style="left: 0px;"
                                :style="{ width: Math.ceil(villageHousesList.length / 10) * 356 + 'px' }"
                            >
                                <div
                                    class="ridgepole-list"
                                    v-for="index of Math.ceil(villageHousesList.length / 10)"
                                    :key="index"
                                >
                                    <div
                                        v-for="(item, index) in villageHousesList.slice((index - 1) * 10, index * 10)"
                                        :key="index"
                                        @click="buildingClick(item)"
                                        :class="{ on: ridgepoleNum.name == item.name }"
                                    >{{ item.name }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="nextBtn rightBtn" @click="nextBtn">
                            <i v-show="nextBtnShow" class="el-icon-caret-right"></i>
                        </div>
                <div class="nav-tab">
                    <div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick" data-type="0">基本信息
                    </div>
                    <div class="nav" :class="navType == 1 ? 'choosed' : ''" @click="navClick" data-type="1">警务信息
                    </div>
                    <div class="nav" :class="navType == 2 ? 'choosed' : ''" @click="navClick" data-type="2">预警信息
                    </div>
                </div>

                <div class="base-info" v-show="navType == 0">
                    <div class="sub-nav-list">
                        <div class="sub-nav" :class="{ on: subNavType == 1 }" @click="subNavType = 1">楼栋</div>
                        <div class="sub-nav" :class="{ on: subNavType == 2 }" @click="subNavType = 2">出入口</div>
                        <div class="sub-nav" :class="{ on: subNavType == 3 }" @click="subNavType = 3">停车场</div>
                        <div class="sub-nav" :class="{ on: subNavType == 4 }" @click="subNavType = 4">商业</div>
                    </div>

                    <div class="ridgepole-info">
                        <div class="title">楼栋信息</div>

                        <div class="content">
                            <div>
                                <div>电梯</div>
                                <div>{{ ridgepoleNum.elevator == true ? '有' : '无' }}</div>
                            </div>
                            <div>
                                <div>楼层总数</div>
                                <div>{{ ridgepoleNum.floorAll }}</div>
                            </div>
                            <div>
                                <div>户室总数</div>
                                <div>{{ ridgepoleNum.familyRoom }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="people-info">
                        <div class="title">人口情况</div>

                        <div class="content">
                            <div class="one">
                                <div>
                                    <div>{{ ridgepoleNum.realityPerson }}</div>
                                    <div>实有人口</div>
                                </div>
                                <div>
                                    <div style="color:#FF796C">{{ ridgepoleNum.emphasisPerson }}</div>
                                    <div>重点人口</div>
                                </div>
                            </div>

                            <div class="two">
                                <div>
                                    <div>{{ ridgepoleNum.kosekiPerson }}</div>
                                    <div>户籍人口</div>
                                </div>
                                <div>
                                    <div style="color:#0E88FF">{{ ridgepoleNum.flowPerson }}</div>
                                    <div>流动人口</div>
                                </div>
                                <div>
                                    <div style="color:#FEAC04">{{ ridgepoleNum.outsidePerson }}</div>
                                    <div>境外人口</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="house-info">
                        <div class="title">房屋情况</div>

                        <div class="content">
                            <div>
                                <div>{{ ridgepoleNum.houseAll }}</div>
                                <div>房屋总数</div>
                            </div>
                            <div>
                                <div>{{ ridgepoleNum.rent }}</div>
                                <div>出租</div>
                            </div>
                            <div>
                                <div>{{ ridgepoleNum.occupation }}</div>
                                <div>自住</div>
                            </div>
                            <div>
                                <div>{{ ridgepoleNum.vacancy }}</div>
                                <div>空置</div>
                            </div>
                        </div>
                    </div>
                    <div class="house-element-info">
                        <!-- 选择单元 -->
                        <div class="condo">
                            <div class="type">选择单元</div>
                            <div class="type-select">
                                <el-select
                                    size="small"
                                    v-model="apartmentValue"
                                    placeholder="请选择"
                                    @change="chooseUnit"
                                >
                                    <el-option
                                        v-for="item in ridgepoleNum1.unit"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="legend">
                            <div class="type">人口图例</div>
                            <div class="type-val">
                                <div>
                                    <span
                                        style="width: 10px; height: 10px; background: #0E88FF; border-radius: 50%;"
                                    ></span>
                                    流动人口
                                </div>
                                <div>
                                    <span
                                        style="width: 10px; height: 10px; background: #FF796C; border-radius: 50%;"
                                    ></span>
                                    重点人员
                                </div>
                                <div>
                                    <span
                                        style="width: 10px; height: 10px; background: #FEAC04; border-radius: 50%;"
                                    ></span>
                                    境外人口
                                </div>
                            </div>
                        </div>
                        <div class="legend">
                            <div class="type">房屋图例</div>
                            <div class="type-val">
                                <div>
                                    <span
                                        style="width: 14px; height: 8px; border: 1px solid #3A8B3A;"
                                    ></span> 出租
                                </div>
                                <div>
                                    <span
                                        style="width: 14px; height: 8px; border: 1px solid #2C77BB;"
                                    ></span> 自住
                                </div>
                                <div>
                                    <span
                                        style="width: 14px; height: 8px; border: 1px solid #5C6169;"
                                    ></span> 空置
                                </div>
                                <div>
                                    <span
                                        style="width: 14px; height: 8px; border: 1px solid #CC9456;"
                                    ></span> 商业
                                </div>
                            </div>
                        </div>
                        <div class="floor-outBox">
                            <div @click="lastFloorBtn" class="floorBtn" v-show="lastFloorShow">
                    <div class="floor-content" v-show="subNavType == 1">
                        <div class="build-info">
                            <div class="nextBtn" @click="lastBtn" v-show="lastBtnShow == true">
                                <i class="el-icon-caret-left"></i>
                            </div>
                            <div class="floor-box">
                                <div class="floor-num" style="left: 0">
                                    <div
                                        :class="{ on: floorsType == 1 }"
                                        @click="floorsType = 1"
                                    >1~5层</div>
                                    <div
                                        :class="{ on: floorsType == 2 }"
                                        @click="floorsType = 2"
                                    >6~10层</div>
                                    <div
                                        :class="{ on: floorsType == 3 }"
                                        @click="floorsType = 3"
                                    >11~15层</div>
                                    <div
                                        :class="{ on: floorsType == 4 }"
                                        @click="floorsType = 4"
                                    >16~20层</div>
                                    <div
                                        :class="{ on: floorsType == 5 }"
                                        @click="floorsType = 5"
                                    >21~25层</div>
                                    <div
                                        :class="{ on: floorsType == 6 }"
                                        @click="floorsType = 6"
                                    >26~30层</div>
                            <div class="build-outBox">
                                <div class="build-box" style="left: 0px;"
                                    :style="{ width: Math.ceil(villageHousesList.length / 10) * 356 + 'px' }">
                                    <div class="ridgepole-list"
                                        v-for="index of Math.ceil(villageHousesList.length / 10)" :key="index">
                                        <div v-for="(item, index) in villageHousesList.slice((index - 1) * 10, index * 10)"
                                            :key="index" @click="buildingClick(item)"
                                            :class="{ on: ridgepoleNum.name == item.name }">{{ item.name }}</div>
                                    </div>
                                </div>
                            </div>
                            <div
                                @click="nextFloorBtn"
                                class="floorBtn rightFloorBtn"
                                v-show="nextFloorShow"
                            >
                                <i class="el-icon-caret-right"></i>
                            <div class="nextBtn rightBtn" @click="nextBtn">
                                <i v-show="nextBtnShow" class="el-icon-caret-right"></i>
                            </div>
                        </div>

                        <div class="floor-detail">
                            <div
                                v-for="(item, index) in levelList.slice((floorsType - 1) * 5, floorsType * 5)"
                                :key="index"
                            >
                                <div class="title">{{ index + 1 + (floorsType - 1) * 5 }}层：</div>
                                <div class="detail">
                                    <div
                                        v-for="(value, index) in item"
                                        :key="index"
                                        @click="residentDetailsClick(value)"
                                        :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]"
                                    >
                                        {{ value.Doorplate }}
                                        <div
                                            class="flow"
                                            v-show="isHaveLiudong(value.householdsDate)"
                                        ></div>
                                        <div
                                            class="focus"
                                            v-show="isHaveZhongdian(value.householdsDate)"
                                        ></div>
                                        <div
                                            class="warning"
                                            v-show="isHaveJingwai(value.householdsDate)"
                                        ></div>
                        <div class="ridgepole-info">
                            <div class="title">楼栋信息</div>

                            <div class="content">
                                <div>
                                    <div>电梯</div>
                                    <div>{{ ridgepoleNum.elevator == true ? '有' : '无' }}</div>
                                </div>
                                <div>
                                    <div>楼层总数</div>
                                    <div>{{ ridgepoleNum.floorAll }}</div>
                                </div>
                                <div>
                                    <div>户室总数</div>
                                    <div>{{ ridgepoleNum.familyRoom }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="people-info">
                            <div class="title">人口情况</div>

                            <div class="content">
                                <div class="one">
                                    <div>
                                        <div>{{ ridgepoleNum.realityPerson }}</div>
                                        <div>实有人口</div>
                                    </div>
                                    <div>
                                        <div style="color:#FF796C">{{ ridgepoleNum.emphasisPerson }}</div>
                                        <div>重点人口</div>
                                    </div>
                                </div>

                                <div class="two">
                                    <div>
                                        <div>{{ ridgepoleNum.kosekiPerson }}</div>
                                        <div>户籍人口</div>
                                    </div>
                                    <div>
                                        <div style="color:#0E88FF">{{ ridgepoleNum.flowPerson }}</div>
                                        <div>流动人口</div>
                                    </div>
                                    <div>
                                        <div style="color:#FEAC04">{{ ridgepoleNum.outsidePerson }}</div>
                                        <div>境外人口</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="house-info">
                            <div class="title">房屋情况</div>

                            <div class="content">
                                <div>
                                    <div>{{ ridgepoleNum.houseAll }}</div>
                                    <div>房屋总数</div>
                                </div>
                                <div>
                                    <div>{{ ridgepoleNum.rent }}</div>
                                    <div>出租</div>
                                </div>
                                <div>
                                    <div>{{ ridgepoleNum.occupation }}</div>
                                    <div>自住</div>
                                </div>
                                <div>
                                    <div>{{ ridgepoleNum.vacancy }}</div>
                                    <div>空置</div>
                                </div>
                            </div>
                        </div>
                        <div class="house-element-info">
                            <!-- 选择单元 -->
                            <div class="condo">
                                <div class="type">选择单元</div>
                                <div class="type-select">
                                    <el-select size="small" v-model="apartmentValue" placeholder="请选择"
                                        @change="chooseUnit">
                                        <el-option v-for="item in ridgepoleNum1.unit" :key="item.value"
                                            :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </div>
                            </div>
                            <div class="legend">
                                <div class="type">人口图例</div>
                                <div class="type-val">
                                    <div>
                                        <span
                                            style="width: 10px; height: 10px; background: #0E88FF; border-radius: 50%;"></span>
                                        流动人口
                                    </div>
                                    <div>
                                        <span
                                            style="width: 10px; height: 10px; background: #FF796C; border-radius: 50%;"></span>
                                        重点人员
                                    </div>
                                    <div>
                                        <span
                                            style="width: 10px; height: 10px; background: #FEAC04; border-radius: 50%;"></span>
                                        境外人口
                                    </div>
                                </div>
                            </div>
                            <div class="legend">
                                <div class="type">房屋图例</div>
                                <div class="type-val">
                                    <div>
                                        <span style="width: 14px; height: 8px; border: 1px solid #3A8B3A;"></span>
                                        出租
                                    </div>
                                    <div>
                                        <span style="width: 14px; height: 8px; border: 1px solid #2C77BB;"></span>
                                        自住
                                    </div>
                                    <div>
                                        <span style="width: 14px; height: 8px; border: 1px solid #5C6169;"></span>
                                        空置
                                    </div>
                                    <div>
                                        <span style="width: 14px; height: 8px; border: 1px solid #CC9456;"></span>
                                        商业
                                    </div>
                                </div>
                            </div>
                            <div class="floor-outBox">
                                <div @click="lastFloorBtn" class="floorBtn" v-show="lastFloorShow">
                                    <i class="el-icon-caret-left"></i>
                                </div>
                                <div class="floor-box">
                                    <div class="floor-num" style="left: 0">
                                        <div :class="{ on: floorsType == 1 }" @click="floorsType = 1">1~5层</div>
                                        <div :class="{ on: floorsType == 2 }" @click="floorsType = 2">6~10层</div>
                                        <div :class="{ on: floorsType == 3 }" @click="floorsType = 3">11~15层</div>
                                        <div :class="{ on: floorsType == 4 }" @click="floorsType = 4">16~20层</div>
                                        <div :class="{ on: floorsType == 5 }" @click="floorsType = 5">21~25层</div>
                                        <div :class="{ on: floorsType == 6 }" @click="floorsType = 6">26~30层</div>
                                    </div>
                                </div>
                                <div @click="nextFloorBtn" class="floorBtn rightFloorBtn" v-show="nextFloorShow">
                                    <i class="el-icon-caret-right"></i>
                                </div>
                            </div>

                            <div class="floor-detail">
                                <div v-for="(item, index) in levelList.slice((floorsType - 1) * 5, floorsType * 5)"
                                    :key="index">
                                    <div class="title">{{ index + 1 + (floorsType - 1) * 5 }}层：</div>
                                    <div class="detail">
                                        <div v-for="(value, index) in item" :key="index"
                                            @click="residentDetailsClick(value)"
                                            :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]">
                                            {{ value.Doorplate }}
                                            <div class="flow" v-show="isHaveLiudong(value.householdsDate)"></div>
                                            <div class="focus" v-show="isHaveZhongdian(value.householdsDate)"></div>
                                            <div class="warning" v-show="isHaveJingwai(value.householdsDate)"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="come-out-content" v-show="subNavType == 2">
                        <el-table :data="comeoutArr" style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName">
                            <el-table-column prop="name" label="名称" width="130"></el-table-column>
                            <el-table-column prop="position" label="位置" width="150"></el-table-column>
                            <el-table-column prop="type" label="类别" width="120"></el-table-column>
                        </el-table>
                    </div>
                    <div class="park-content" v-show="subNavType == 3">
                        <el-table :data="parkArr" style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName">
                            <el-table-column prop="name" label="名称" width="130"></el-table-column>
                            <el-table-column prop="position" label="位置" width="150"></el-table-column>
                            <el-table-column prop="type" label="类别" width="120"></el-table-column>
                        </el-table>
                    </div>
                    <div class="business-content" v-show="subNavType == 4">
                        <el-table :data="businessArr" style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName">
                            <el-table-column prop="name" label="名称" width="130"></el-table-column>
                            <el-table-column prop="position" label="位置" width="150"></el-table-column>
                            <el-table-column prop="type" label="类别" width="120"></el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="come-out-content" v-show="subNavType == 2">
                    <el-table
                        :data="comeoutArr"
                        style="width: 100%"

                <div class="police-info" v-show="navType == 1">
                    <el-table :data="arr" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName"
                    >
                        :row-class-name="tableRowClassName" @row-click="clickData">
                        <el-table-column prop="name" label="名称" width="130"></el-table-column>
                        <el-table-column prop="position" label="位置" width="150"></el-table-column>
                        <el-table-column prop="time" label="时间" width="150"></el-table-column>
                        <el-table-column prop="type" label="类别" width="120"></el-table-column>
                    </el-table>
                </div>
                <div class="park-content" v-show="subNavType == 3">
                    <el-table
                        :data="parkArr"
                        style="width: 100%"

                <div class="warning-info" v-show="navType == 2">
                    <el-table :data="warningArray" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName"
                    >
                        :row-class-name="tableRowClassName" @row-click="clickData">
                        <el-table-column prop="name" label="名称" width="130"></el-table-column>
                        <el-table-column prop="position" label="位置" width="150"></el-table-column>
                        <el-table-column prop="type" label="类别" width="120"></el-table-column>
                    </el-table>
                </div>
                <div class="business-content" v-show="subNavType == 4">
                    <el-table
                        :data="businessArr"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName"
                    >
                        <el-table-column prop="name" label="名称" width="130"></el-table-column>
                        <el-table-column prop="position" label="位置" width="150"></el-table-column>
                        <el-table-column prop="time" label="时间" width="150"></el-table-column>
                        <el-table-column prop="type" label="类别" width="120"></el-table-column>
                    </el-table>
                </div>
            </div>

            <div class="police-info" v-show="navType == 1">
                <el-table
                    :data="arr"
                    style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName"
                    @row-click="clickData"
                >
                    <el-table-column prop="name" label="名称" width="130"></el-table-column>
                    <el-table-column prop="time" label="时间" width="150"></el-table-column>
                    <el-table-column prop="type" label="类别" width="120"></el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 
        <transition name="special-animal">

            <div class="warning-info" v-show="navType == 2">
                <el-table
                    :data="warningArray"
                    style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName"
                    @row-click="clickData"
                >
                    <el-table-column prop="name" label="名称" width="130"></el-table-column>
                    <el-table-column prop="time" label="时间" width="150"></el-table-column>
                    <el-table-column prop="type" label="类别" width="120"></el-table-column>
                </el-table>
            </div>
        </transition> -->
        <div class="container-btn">
            <shrink></shrink>
        </div>

        <el-dialog
            title="信息详情"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            :close-on-click-modal="true"
            class="police-affairs-details-box"
        >
        <el-dialog title="信息详情" :modal="true" :visible.sync="dialogVisible" :before-close="handleClose"
            :close-on-click-modal="true" class="police-affairs-details-box">
            <div class="item">
                <div>名称：</div>
                <div>{{ JWdetails.name }}</div>
@@ -448,21 +357,12 @@
            </div>
        </el-dialog>

        <el-dialog
            :title="residentDetailsTitle"
            :modal="true"
            :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose"
            :close-on-click-modal="true"
            class="resident-details-box"
            width="30%"
        >
        <el-dialog :title="residentDetailsTitle" :modal="true" :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose" :close-on-click-modal="true" class="resident-details-box" width="30%">
            <h3 style="text-align:left;margin:10px 0 10px 0">户主信息</h3>
            <el-table
                :data="houseDate.householdsDate"
            <el-table :data="houseDate.householdsDate"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
            >
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }">
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="peopleType" label="重点人员"></el-table-column>
                <el-table-column prop="nation" label="民族"></el-table-column>
@@ -495,9 +395,9 @@
import housingData from '@/assets/data/housingData.js'

export default {

    data () {
        return {
            contentShow: true,
            ridgepoleNum: {},
            ridgepoleNum1: {},
            searchHouse: '',
@@ -780,394 +680,200 @@

<style scoped lang="scss">
.container {
    display: flex;
    position: relative;
    width: 400px;
    height: 100%;
    color: #fff;
    background: $bg-color;
    background: transparent;

    li {
        list-style: none;
    }

    .search-box {
        padding: 5px;
        height: 48px;
        display: flex;

        input {
            flex: 1;
            height: 100%;
            font-size: 18px;
            text-indent: 1em;
            color: #ffffff;
            background-color: transparent;
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
        }

        input:focus {
            outline: none;
        }

        input::-webkit-input-placeholder {
            color: rgba(238, 238, 238, 0.7);
        }

        button {
            font-size: 24px;
            font-weight: 700;
            width: 80px;
            height: 100%;
            background-color: rgb(0, 92, 169);
            color: #fff;
            border: 1px solid rgb(0, 92, 169);
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }

        button:active {
            background-color: rgb(0, 92, 169);
            border: 1px solid rgb(0, 92, 169);
        }
    }

    .search-val-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 48px;
        left: 6px;
        width: calc(100% - 12px);
        max-height: 160px;
        text-align: left;
    &-content {
        height: 100%;
        color: #fff;
        background: rgba(16, 29, 74, 0.9);
        z-index: 1111;
        border-radius: 10px;
        overflow: hidden;
        background: $bg-color;
        transition: all .3s;

        & > div {
            height: 100%;
        li {
            list-style: none;
        }

        .search-box {
            padding: 5px;
            height: 48px;
            display: flex;

            input {
                flex: 1;
                height: 100%;
                font-size: 18px;
                text-indent: 1em;
                color: #ffffff;
                background-color: transparent;
                border: 1px solid rgb(0, 92, 169);
                border-radius: 20px 0 0 20px;
            }

            input:focus {
                outline: none;
            }

            input::-webkit-input-placeholder {
                color: rgba(238, 238, 238, 0.7);
            }

            button {
                font-size: 24px;
                font-weight: 700;
                width: 80px;
                height: 100%;
                background-color: rgb(0, 92, 169);
                color: #fff;
                border: 1px solid rgb(0, 92, 169);
                cursor: pointer;
                border-radius: 0 20px 20px 0;
            }

            button:active {
                background-color: rgb(0, 92, 169);
                border: 1px solid rgb(0, 92, 169);
            }
        }

        .search-val-box {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 48px;
            left: 6px;
            width: calc(100% - 12px);
            max-height: 160px;
            text-align: left;
            color: #fff;
            background: rgba(16, 29, 74, 0.9);
            z-index: 1111;
            border-radius: 10px;
            overflow: hidden;

            &>div {
                height: 100%;
                overflow-y: auto;

                div {
                    padding: 0 10px;
                    line-height: 36px;
                    cursor: pointer;
                }
            }
        }

        .result-content {
            height: calc(100% - 48px);
            overflow-x: hidden;
            overflow-y: auto;

            div {
                padding: 0 10px;
                line-height: 36px;
                cursor: pointer;
            }
        }
    }

    .result-content {
        height: calc(100% - 48px);
        overflow-x: hidden;
        overflow-y: auto;

        .housing-estate-info {
            .housing-title {
                padding: 0 10px;
                position: relative;
                height: 40px;
                text-align: left;
                line-height: 40px;
                font-size: 28px;
                font-weight: bold;
                z-index: 1;

                &::after {
                    content: '';
                    position: absolute;
                    top: 18px;
                    left: 10px;
                    right: 10px;
                    bottom: 4px;
                    background: linear-gradient(
                        135deg,
                        rgb(33 150 243 / 74%),
                        rgb(254 254 254 / 0%)
                    );
                    z-index: -1;
                }
            }

            .housing-bg {
                margin-top: 6px;
                height: 200px;
            }

            .housing-introduce {
                & > div {
            .housing-estate-info {
                .housing-title {
                    padding: 0 10px;
                    display: flex;
                    position: relative;
                    height: 40px;
                    text-align: left;
                    line-height: 40px;
                    font-size: 28px;
                    font-weight: bold;
                    z-index: 1;

                    .l {
                        display: flex;
                        justify-content: flex-start;
                        flex-wrap: nowrap;
                        width: 80px;
                        line-height: 40px;
                    &::after {
                        content: '';
                        position: absolute;
                        top: 18px;
                        left: 10px;
                        right: 10px;
                        bottom: 4px;
                        background: linear-gradient(135deg,
                                rgb(33 150 243 / 74%),
                                rgb(254 254 254 / 0%));
                        z-index: -1;
                    }
                }

                    .r {
                        flex: 1;
                        text-align: left;
                        line-height: 40px;
                .housing-bg {
                    margin-top: 6px;
                    height: 200px;
                }

                .housing-introduce {
                    &>div {
                        padding: 0 10px;
                        display: flex;

                        .l {
                            display: flex;
                            justify-content: flex-start;
                            flex-wrap: nowrap;
                            width: 80px;
                            line-height: 40px;
                        }

                        .r {
                            flex: 1;
                            text-align: left;
                            line-height: 40px;
                        }
                    }
                }
            }
        }

        .nav-tab {
            display: flex;
            justify-content: space-around;

            .nav {
                flex: 1;
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #33566c;
                cursor: pointer;
            }

            .choosed {
                background-color: rgba(0, 92, 169, 1);
            }
        }

        .base-info {
            .sub-nav-list {
                padding: 14px 0;
            .nav-tab {
                display: flex;
                justify-content: space-around;

                .sub-nav {
                    width: 76px;
                    height: 26px;
                    line-height: 26px;
                    border-radius: 13px;
                    background: #0158a2;
                .nav {
                    flex: 1;
                    height: 40px;
                    line-height: 40px;
                    border-bottom: 1px solid #33566c;
                    cursor: pointer;
                    color: rgb(223, 219, 219);
                }

                .on {
                    border: 1px solid #fff;
                    background-color: #0158a2;
                    color: #fff;
                .choosed {
                    background-color: rgba(0, 92, 169, 1);
                }
            }

            & > .floor-content {
                .build-info {
            .base-info {
                .sub-nav-list {
                    padding: 14px 0;
                    display: flex;
                    position: relative;
                    align-items: center;
                    height: 100px;
                    justify-content: space-around;

                    .nextBtn {
                        position: absolute;
                        left: 1px;
                        width: 20px;
                        height: 60px;
                        padding-top: 12px;

                        i {
                            font-size: 30px;
                            margin-left: -5px;
                        }
                    .sub-nav {
                        width: 76px;
                        height: 26px;
                        line-height: 26px;
                        border-radius: 13px;
                        background: #0158a2;
                        cursor: pointer;
                        color: rgb(223, 219, 219);
                    }

                    .rightBtn {
                        left: 369px;
                    }

                    .nextBtn :hover {
                        color: #0158a2;
                    }

                    .build-outBox {
                        position: absolute;
                        left: 18px;
                        width: 356px;
                        height: 100px;
                        overflow: hidden;

                        .build-box {
                            display: flex;
                            position: absolute;
                            left: 0;
                            transition: all 1s;

                            .ridgepole-list {
                                display: flex;
                                flex-wrap: wrap;
                                justify-content: center;
                                display: flex;
                                flex-wrap: wrap;
                                width: 356px;

                                & > div {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    margin: 6px 8px;
                                    width: 54px;
                                    height: 36px;
                                    border: 1px solid #ccc;
                                    cursor: pointer;

                                    &.on {
                                        color: orange;
                                        border-color: orange;
                                    }
                                }
                            }
                        }
                    .on {
                        border: 1px solid #fff;
                        background-color: #0158a2;
                        color: #fff;
                    }
                }

                .ridgepole-info {
                    .content {
                        display: flex;

                        & > div {
                            height: 26px;
                            line-height: 26px;
                            flex: 1;
                            display: flex;
                            justify-content: center;
                            border-right: 1px solid #50555f;

                            & > div:last-child {
                                margin-left: 14px;
                                font-size: 18px;
                                font-weight: bold;
                                color: #297ad1;
                            }
                        }

                        & > div:first-child {
                            width: 30%;
                        }

                        & > div:last-child {
                            border: none;
                        }
                    }
                }

                .people-info {
                    .content {
                        .two {
                            margin-top: 16px;
                        }

                        .one,
                        .two {
                            display: flex;
                            justify-content: space-around;

                            & > div {
                                flex: 1;

                                & > div:first-child {
                                    height: 30px;
                                    line-height: 30px;
                                    font-size: 18px;
                                    font-weight: bold;
                                    color: #499d99;
                                }

                                & > div:last-child {
                                    height: 26px;
                                    line-height: 26px;
                                }
                            }
                        }
                    }
                }

                .house-info {
                    .content {
                        display: flex;
                        justify-content: space-around;

                        & > div {
                            & > div:first-child {
                                height: 30px;
                                line-height: 30px;
                                font-size: 18px;
                                font-weight: bold;
                                color: #499d99;
                            }
                        }
                    }

                    border-bottom: 1px dashed #ccc;
                }

                .ridgepole-info,
                .people-info,
                .house-info {
                    .title {
                        height: 40px;
                        line-height: 40px;
                        text-align: left;
                    }

                    .content {
                        padding: 10px 0;
                    }
                }

                .house-element-info {
                    .condo,
                    .legend {
                        display: flex;
                        align-items: center;
                        height: 36px;

                        .type {
                            width: 80px;
                        }

                        .type-select {
                            margin-left: 20px;

                            :deep(.el-input--suffix .el-input__inner) {
                                padding-right: 54px;
                            }
                        }

                        .type-val {
                            display: flex;
                            flex: 1;

                            & > div {
                                flex: 1;
                                display: flex;
                                align-items: center;

                                & > span {
                                    margin: 0 10px;
                                }
                            }
                        }
                    }

                    .floor-outBox {
                &>.floor-content {
                    .build-info {
                        display: flex;
                        position: relative;
                        height: 26px;
                        margin-top: 9px;
                        align-items: center;
                        height: 100px;

                        .floorBtn {
                        .nextBtn {
                            position: absolute;
                            left: 30px;
                            top: -2px;
                            left: 1px;
                            width: 20px;
                            height: 26px;
                            height: 60px;
                            padding-top: 12px;

                            i {
                                font-size: 30px;
@@ -1175,136 +881,342 @@
                            }
                        }

                        .floorBtn :hover {
                        .rightBtn {
                            left: 369px;
                        }

                        .nextBtn :hover {
                            color: #0158a2;
                        }

                        .rightFloorBtn {
                            left: 350px;
                        }

                        .floor-box {
                            width: 252px;
                            height: 26px;
                        .build-outBox {
                            position: absolute;
                            left: 18px;
                            width: 356px;
                            height: 100px;
                            overflow: hidden;
                            left: 67px;

                            .floor-num {
                            .build-box {
                                display: flex;
                                align-items: center;
                                position: absolute;
                                width: 504px;
                                left: 0;
                                transition: all 1s;

                                & > div {
                                    margin: 0 4px;
                                .ridgepole-list {
                                    display: flex;
                                    flex-wrap: wrap;
                                    justify-content: center;
                                    align-items: center;
                                    width: 84px;
                                    height: 26px;
                                    border-radius: 13px;
                                    background: #202434;
                                    cursor: default;
                                }
                                    display: flex;
                                    flex-wrap: wrap;
                                    width: 356px;

                                & > .on {
                                    border: 1px solid orange;
                                    color: orange;
                                    &>div {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        margin: 6px 8px;
                                        width: 54px;
                                        height: 36px;
                                        border: 1px solid #ccc;
                                        cursor: pointer;

                                        &.on {
                                            color: orange;
                                            border-color: orange;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .floor-detail {
                        margin-top: 14px;

                        & > div {
                            margin: 8px;
                            height: 36px;
                            line-height: 36px;
                    .ridgepole-info {
                        .content {
                            display: flex;

                            .title {
                                width: 50px;
                            }

                            .detail {
                            &>div {
                                height: 26px;
                                line-height: 26px;
                                flex: 1;
                                display: flex;
                                justify-content: center;
                                border-right: 1px solid #50555f;

                                & > div {
                                    margin: 0 4px;
                                    position: relative;
                                    width: 68px;
                                    height: 36px;
                                    border: 1px solid #ccc;
                                    cursor: pointer;
                                &>div:last-child {
                                    margin-left: 14px;
                                    font-size: 18px;
                                    font-weight: bold;
                                    color: #297ad1;
                                }
                            }

                                    .flow,
                                    .focus,
                                    .warning {
                                        position: absolute;
                                        right: 4px;
                                        width: 6px;
                                        height: 6px;
                                        border-radius: 50%;
                            &>div:first-child {
                                width: 30%;
                            }

                            &>div:last-child {
                                border: none;
                            }
                        }
                    }

                    .people-info {
                        .content {
                            .two {
                                margin-top: 16px;
                            }

                            .one,
                            .two {
                                display: flex;
                                justify-content: space-around;

                                &>div {
                                    flex: 1;

                                    &>div:first-child {
                                        height: 30px;
                                        line-height: 30px;
                                        font-size: 18px;
                                        font-weight: bold;
                                        color: #499d99;
                                    }

                                    .flow {
                                        top: calc((100% - 18px) / 4);
                                        background: rgb(14, 136, 255);
                                    }

                                    .focus {
                                        top: calc((100% - 18px) / 4 * 2 + 6px);
                                        background: rgb(255, 121, 108);
                                    }

                                    .warning {
                                        top: calc((100% - 18px) / 4 * 3 + 12px);
                                        background: rgb(254, 172, 4);
                                    &>div:last-child {
                                        height: 26px;
                                        line-height: 26px;
                                    }
                                }
                            }
                        }
                    }

                                & > .chuzu {
                                    border: 1px solid #3a8b3a;
                    .house-info {
                        .content {
                            display: flex;
                            justify-content: space-around;

                            &>div {
                                &>div:first-child {
                                    height: 30px;
                                    line-height: 30px;
                                    font-size: 18px;
                                    font-weight: bold;
                                    color: #499d99;
                                }
                            }
                        }

                        border-bottom: 1px dashed #ccc;
                    }

                    .ridgepole-info,
                    .people-info,
                    .house-info {
                        .title {
                            height: 40px;
                            line-height: 40px;
                            text-align: left;
                        }

                        .content {
                            padding: 10px 0;
                        }
                    }

                    .house-element-info {

                        .condo,
                        .legend {
                            display: flex;
                            align-items: center;
                            height: 36px;

                            .type {
                                width: 80px;
                            }

                            .type-select {
                                margin-left: 20px;

                                :deep(.el-input--suffix .el-input__inner) {
                                    padding-right: 54px;
                                }
                            }

                            .type-val {
                                display: flex;
                                flex: 1;

                                &>div {
                                    flex: 1;
                                    display: flex;
                                    align-items: center;

                                    &>span {
                                        margin: 0 10px;
                                    }
                                }
                            }
                        }

                        .floor-outBox {
                            display: flex;
                            position: relative;
                            height: 26px;
                            margin-top: 9px;

                            .floorBtn {
                                position: absolute;
                                left: 30px;
                                top: -2px;
                                width: 20px;
                                height: 26px;

                                i {
                                    font-size: 30px;
                                    margin-left: -5px;
                                }
                            }

                            .floorBtn :hover {
                                color: #0158a2;
                            }

                            .rightFloorBtn {
                                left: 350px;
                            }

                            .floor-box {
                                width: 252px;
                                height: 26px;
                                position: absolute;
                                overflow: hidden;
                                left: 67px;

                                .floor-num {
                                    display: flex;
                                    align-items: center;
                                    position: absolute;
                                    width: 504px;
                                    left: 0;
                                    transition: all 1s;

                                    &>div {
                                        margin: 0 4px;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        width: 84px;
                                        height: 26px;
                                        border-radius: 13px;
                                        background: #202434;
                                        cursor: default;
                                    }

                                    &>.on {
                                        border: 1px solid orange;
                                        color: orange;
                                    }
                                }
                            }
                        }

                        .floor-detail {
                            margin-top: 14px;

                            &>div {
                                margin: 8px;
                                height: 36px;
                                line-height: 36px;
                                display: flex;

                                .title {
                                    width: 50px;
                                }

                                & > .zizhu {
                                    border: 1px solid #2c77bb;
                                }
                                .detail {
                                    flex: 1;
                                    display: flex;

                                & > .kongzhi {
                                    border: 1px solid #5c6169;
                                }
                                    &>div {
                                        margin: 0 4px;
                                        position: relative;
                                        width: 68px;
                                        height: 36px;
                                        border: 1px solid #ccc;
                                        cursor: pointer;

                                & > .shangye {
                                    border: 1px solid #cc9456;
                                        .flow,
                                        .focus,
                                        .warning {
                                            position: absolute;
                                            right: 4px;
                                            width: 6px;
                                            height: 6px;
                                            border-radius: 50%;
                                        }

                                        .flow {
                                            top: calc((100% - 18px) / 4);
                                            background: rgb(14, 136, 255);
                                        }

                                        .focus {
                                            top: calc((100% - 18px) / 4 * 2 + 6px);
                                            background: rgb(255, 121, 108);
                                        }

                                        .warning {
                                            top: calc((100% - 18px) / 4 * 3 + 12px);
                                            background: rgb(254, 172, 4);
                                        }
                                    }

                                    &>.chuzu {
                                        border: 1px solid #3a8b3a;
                                    }

                                    &>.zizhu {
                                        border: 1px solid #2c77bb;
                                    }

                                    &>.kongzhi {
                                        border: 1px solid #5c6169;
                                    }

                                    &>.shangye {
                                        border: 1px solid #cc9456;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .police-info {
            .tableClass {
                margin: 0 auto;
                width: 600px;
                height: 400px;
                border-collapse: collapse;
            }
            .police-info {
                .tableClass {
                    margin: 0 auto;
                    width: 600px;
                    height: 400px;
                    border-collapse: collapse;
                }

            .tableClass th,
            .tableClass td {
                width: 200px;
                .tableClass th,
                .tableClass td {
                    width: 200px;
                }
            }
        }
    }

    &-btn {
        position: relative;
        width: 36px;
        height: 100%;
    }

}

.progress {
@@ -1324,11 +1236,9 @@
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: linear-gradient(
        135deg,
        rgba(252, 252, 252, 0.108),
        rgb(254, 254, 254)
    );
    background: linear-gradient(135deg,
            rgba(252, 252, 252, 0.108),
            rgb(254, 254, 254));
    animation: prog 3s ease infinite;
}