社区页面接口对接

guanqb

2022-12-12 93afe8d83665406daf63436795259644652aa6dc

社区页面接口对接

 src/api/dept/index.js

@@ -21,3 +21,103 @@
        method: 'get',
    })
}

/**
 * 获取指定行政区小区列表
 * @param {*} adcode
 * @returns
 */
export const getResidentialQuartersList = (adcode) => {
    return request({
        url: '/sf3d/area/list',
        method: 'get',
        params: {
            adcode
        }
    })
}

/**
 * 获取行政区指定责任区信息
 * @param {*} adcode
 * @returns
 */
export const getResidentialQuartersInfo = (area_id, adcode) => {
    return request({
        url: '/sf3d/area/info',
        method: 'get',
        params: {
            area_id,
            adcode
        }
    })
}


/**
 * 点查询
 * @param {*} adcode
 * @returns
 */
export const getAoiByPt = (lng, lat, height, adcode, tolerance) => {
    return request({
        url: '/sf3d/area/getAoiByPt',
        method: 'get',
        params: {
            lng,
            lat,
            height,
            adcode,
            tolerance
        }
    })
}

/**
 * 小区单元查询
 * @param {*} adcode
 * @returns
 */
export const getUnitbuild = (area_id, adcode) => {
    return request({
        url: '/sf3d/area/unitbuild',
        method: 'get',
        params: {
            area_id,
            adcode
        }
    })
}

/**
 * 楼栋单元户室查询
 * @param {*} adcode
 * @returns
 */
export const getHouses = (build_id, adcode) => {
    return request({
        url: '/sf3d/build/houses',
        method: 'get',
        params: {
            build_id,
            adcode
        }
    })
}

/**
 * 大搜
 * @param {*} adcode
 * @returns
 */
export const getSearchExtensively = (ak, region, query) => {
    return request({
        url: '/zhs/bs/search',
        method: 'get',
        params: {
            ak,
            region,
            query
        }
    })
}

 src/router/axios.js

@@ -27,7 +27,9 @@
    // baseURL: 'http://36.14.255.242:18080/api',
    // baseURL: 'http://192.168.0.102:1888/api',
    // baseURL: 'http://192.168.0.105:18080/api',
    baseURL: 'http://192.168.0.115:82',
    // baseURL: 'http://192.168.0.115:82',
    baseURL: 'http://192.168.0.112:18080',
    // baseURL: 'http://192.168.0.112:9091',
    // baseURL: 'http://192.168.0.106:1888/api',
    timeout: 600000 // request timeout
})

 src/views/home/index.vue

@@ -11,18 +11,31 @@

<template>
    <div class="home-page container">
        <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail" ref="leftContainer"></left-container>
        <left-container
            class="left-container"
            @showpeopledetail="showpeopledetail"
            @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail"
            ref="leftContainer"
        ></left-container>

        <right-container class="right-container" @showequimentdetail="showequimentdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData" @changeActivityType="changeActivityType"
            @activityChange="activityChange" ref="rightContainer"></right-container>
        <right-container
            class="right-container"
            @showequimentdetail="showequimentdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData"
            @changeActivityType="changeActivityType"
            @activityChange="activityChange"
            ref="rightContainer"
        ></right-container>

        <bottom-container class="bottom-container" ref="bottomContainer"
        <bottom-container
            class="bottom-container"
            ref="bottomContainer"
            @changePoliceSituationHistoryType="changePoliceSituationHistoryType"
            @changePoliceSituationTimeType="changePoliceSituationTimeType"
            @policeSituationChange="policeSituationChange"
            @policeSituationSiteClick="policeSituationSiteClick"></bottom-container>
            @policeSituationSiteClick="policeSituationSiteClick"
        ></bottom-container>

        <div class="center-container">
            <div class="layers-control-btn house">
@@ -49,30 +62,69 @@
        </div>

        <div ref="RegionSelect" style="left: 0;" class="region-select">
            <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue"
                :options="policeStationOptions" :optionsName="'policeStationName'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="policeStationSelect"
                :checkValue="policeStationCheckValue"
                :options="policeStationOptions"
                :optionsName="'policeStationName'"
            ></map-select>

            <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions"
                :optionsName="'areaCheckName'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="areaSelect"
                :checkValue="areaCheckValue"
                :options="areaOptions"
                :optionsName="'areaCheckName'"
            ></map-select>

            <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue"
                :options="housingOptions" :optionsName="'housingsName'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="housingSelect"
                :checkValue="housingCheckValue"
                :options="housingOptions"
                :optionsName="'housingsName'"
            ></map-select>
        </div>

        <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true">
            <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                style="object-fit: fill"></video>
        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
        >
            <video
                src="/video/sp.mp4"
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                style="object-fit: fill"
            ></video>
        </el-dialog>

        <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose" :close-on-click-modal="true" class="panorama-details-box">
        <el-dialog
            :title="panoramaTitle"
            :modal="true"
            :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose"
            :close-on-click-modal="true"
            class="panorama-details-box"
        >
            <!--            <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe>-->
            <iframe :src="panoramaVrUrl" style="width: 100%; height: 100%;" frameborder="0" />
        </el-dialog>

        <el-dialog :title="activityTitle" :modal="true" :visible.sync="activityVisible"
            :before-close="activityBeforeClose" :close-on-click-modal="true" class="activity-details-box">
        <el-dialog
            :title="activityTitle"
            :modal="true"
            :visible.sync="activityVisible"
            :before-close="activityBeforeClose"
            :close-on-click-modal="true"
            class="activity-details-box"
        >
            <div class="item">
                <div>活动名称:</div>
                <div>{{ activityDetailArr.activityName }}</div>
@@ -107,8 +159,14 @@
            </div>
        </el-dialog>

        <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
            :close-on-click-modal="true" class="phone-details-box">
        <el-dialog
            :title="phoneTitle"
            :modal="true"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
            <div class="item">
                <div>责任人：</div>
                <div>{{ phoneDetails.person }}</div>
@@ -127,8 +185,14 @@
            </div>
        </el-dialog>

        <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="peopleBeforeClose"
            :close-on-click-modal="true" class="area-details-box">
        <el-dialog
            :title="peopleTitle"
            :modal="true"
            :visible.sync="peopleVisible"
            :before-close="peopleBeforeClose"
            :close-on-click-modal="true"
            class="area-details-box"
        >
            <div class="item">
                <div>责任区负责人：</div>
                <div>王某某</div>
@@ -147,30 +211,58 @@
            </div>
        </el-dialog>

        <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box">
        <el-dialog
            :title="equimentTitle"
            :modal="true"
            :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose"
            :close-on-click-modal="true"
            class="equiment-details-box"
        >
            <div class="equiment-detail">
                <div class="left">
                    <el-tree :data="jurisdictionData" :props="defaultProps" @node-click="jurisdictionNodeClick"
                        ref="tree" node-key="id"></el-tree>
                    <el-tree
                        :data="jurisdictionData"
                        :props="defaultProps"
                        @node-click="jurisdictionNodeClick"
                        ref="tree"
                        node-key="id"
                    ></el-tree>
                </div>
                <div class="right">
                    <div class="monitor" v-if="monitorContent">
                        <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                            style="object-fit: fill"></video>
                        <video
                            src="/video/sp.mp4"
                            autoplay
                            controls
                            width="100%"
                            height="100%"
                            ref="videoElement"
                            style="object-fit: fill"
                        ></video>
                    </div>
                    <div class="others" v-if="othersContent">
                        <el-table :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        <el-table
                            :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                            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"
                        >
                            <el-table-column prop="carID" label="车牌号" v-if="carArrShow"></el-table-column>
                            <el-table-column prop="carType" label="车型" v-if="carArrShow"></el-table-column>
                            <el-table-column prop="phoneID" label="手台号" v-if="phoneArrShow"></el-table-column>
                            <el-table-column prop="phoneType" label="手台机型" v-if="phoneArrShow"></el-table-column>
                            <el-table-column prop="recorderID" label="执法记录仪号" v-if="recorderArrShow"></el-table-column>
                            <el-table-column prop="recorderType" label="记录仪机型" v-if="recorderArrShow"></el-table-column>
                            <el-table-column
                                prop="recorderID"
                                label="执法记录仪号"
                                v-if="recorderArrShow"
                            ></el-table-column>
                            <el-table-column
                                prop="recorderType"
                                label="记录仪机型"
                                v-if="recorderArrShow"
                            ></el-table-column>
                            <el-table-column prop="id" label="设备号" v-if="stateArrShow"></el-table-column>
                            <el-table-column prop="equimentType" label="设备类型" v-if="stateArrShow"></el-table-column>
                            <el-table-column prop="policeStation" label="所属派出所"></el-table-column>
@@ -178,20 +270,35 @@
                            <el-table-column prop="state" label="状态"></el-table-column>
                        </el-table>
                        <div class="pages">
                            <el-pagination background layout="prev, pager, next" :total="showArr.length"
                                :page-size="pagesize" pager-count="3" :current-page="currentPage"
                                @current-change="handleCurrentChange"></el-pagination>
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="showArr.length"
                                :page-size="pagesize"
                                pager-count="3"
                                :current-page="currentPage"
                                @current-change="handleCurrentChange"
                            ></el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose"
            :close-on-click-modal="true" class="land-details-box">
            <el-table :data="landDetailArr" style="width: 100%"
        <el-dialog
            :title="landTitle"
            :modal="true"
            :visible.sync="landVisible"
            :before-close="landBeforeClose"
            :close-on-click-modal="true"
            class="land-details-box"
        >
            <el-table
                :data="landDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column prop="housingEastate" label="小区名称" width="100"></el-table-column>
                <el-table-column prop="location" label="位置" width="140"></el-table-column>
                <el-table-column prop="area" label="面积" width="120"></el-table-column>
@@ -200,11 +307,20 @@
            </el-table>
        </el-dialog>

        <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box">
            <el-table :data="keyPersonDetailArr" style="width: 100%"
        <el-dialog
            :title="keyPersonTitle"
            :modal="true"
            :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose"
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
            <el-table
                :data="keyPersonDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column prop="type" label="重点人员类型"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
@@ -215,8 +331,14 @@
            </el-table>
        </el-dialog>

        <el-dialog :title="policeSituationTitle" :modal="true" :visible.sync="policeSituationVisible"
            :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box">
        <el-dialog
            :title="policeSituationTitle"
            :modal="true"
            :visible.sync="policeSituationVisible"
            :before-close="policeSituationBeforeClose"
            :close-on-click-modal="true"
            class="policeSituation-details-box"
        >
            <div class="item">
                <div>所属派出所:</div>
                <div>{{ policeSituationDetailArr.policeName }}</div>
@@ -259,6 +381,7 @@

<script>
import { getPanoramaList } from "@/api/panorama"
import { getResidentialQuartersList } from '@/api/dept/index.js'

let cylinderLayer = null
let circleLayer = null
@@ -360,7 +483,7 @@
import carList from '@/assets/data/car.js'
import phoneList from '@/assets/data/phone.js'
import monitoringList from '@/assets/data/monitoring.js'
import houseList from '@/assets/data/house.js'
// import houseList from '@/assets/data/house.js'
import areaOptionData from '@/assets/data/JurisdictionData/areaOptionData.js'
import policeStationOptions from '@/assets/data/JurisdictionData/policeStationOptions.js'
import housingDate from '@/assets/data/JurisdictionData/housingDate.js'
@@ -508,6 +631,7 @@
            policeSituationHistoryArr: [],
            policeSituationDetailArr: {},
            activityDetailArr: {},

        }
    },

@@ -517,7 +641,7 @@
        this.carList = carList
        this.phoneList = phoneList
        this.monitoringList = monitoringList
        this.houseList = houseList
        // this.houseList = houseList
        // this.areaOptionData = areaOptionData
        // this.policeStationOptions = policeStationOptions
        // this.housingDate = housingDate
@@ -528,6 +652,9 @@
        this.policeSituationRealtimeArr = realtimeArr
        this.policeSituationHistoryArr = policeSituationHistoryArr
        this.getPanoramaList()

        this.getResidentialQuartersList('361102')

    },

    mounted () {
@@ -595,6 +722,19 @@
                })
                return obj
            }
        },

        // 获取小区列表
        getResidentialQuartersList (adcode) {
            getResidentialQuartersList(adcode).then(res => {
                console.log(res.data.data, 111)
                let position = []
                res.data.data.forEach(item => {
                    position = JSON.parse(item.geom).coordinates
                    this.houseList.push({ name: `${item.aoi_name}`, lng: `${position[0]}`, lat: `${position[1]}`, alt: 100, url: '/img/icon/house.png' })
                })
                this.houseChange(true)
            })
        },

        policeStationSelect (item) {
@@ -1073,7 +1213,7 @@
                    cylinderLayer.addOverlay(cylinder)
                }
            })
            this.houseChange(true)
            // this.houseChange(true)
        },

        initAreaOptionLayer (item) {
@@ -1685,7 +1825,9 @@
                background-color: #66b1ff87;
            }

            :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
            :deep(.el-tree--highlight-current
                    .el-tree-node.is-current
                    > .el-tree-node__content) {
                background: #454545;
            }


 src/views/house/index.vue

@@ -16,26 +16,50 @@
                <!-- <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                <button @click="searchClick" class="el-icon-search"></button>-->

                <el-popover ref="popover" placement="bottom" trigger="click" :visible-arrow="false"
                    popper-class="tree-search-popup">
                <el-popover
                    ref="popover"
                    placement="bottom"
                    trigger="click"
                    :visible-arrow="false"
                    popper-class="tree-search-popup"
                >
                    <el-input placeholder="请输入搜索条件" v-model="filterText"></el-input>

                    <el-tree style="width: 360px; height: 400px; overflow: auto;" class="select-tree-box"
                        :data="testData" :props="defaultProps" ref="popupTree" @current-change="currentChangeHandle"
                        :default-expand-all="defaultExpandAll" :accordion="accordion"
                        :highlight-current="highlightCurrent" :expand-on-click-node="true" check-strictly
                        :filter-node-method="filterNode"></el-tree>
                    <el-tree
                        style="width: 360px; height: 400px; overflow: auto;"
                        class="select-tree-box"
                        :data="testData"
                        :props="defaultProps"
                        ref="popupTree"
                        @current-change="currentChangeHandle"
                        :default-expand-all="defaultExpandAll"
                        :accordion="accordion"
                        :highlight-current="highlightCurrent"
                        :expand-on-click-node="true"
                        check-strictly
                        :filter-node-method="filterNode"
                    ></el-tree>
                </el-popover>

                <el-input slot="reference" v-model="prop" v-popover:popover :readonly="true" placeholder="请输入搜索条件"
                    style="cursor: pointer;"></el-input>
                <el-input
                    slot="reference"
                    v-model="prop"
                    v-popover:popover
                    :readonly="true"
                    placeholder="请输入搜索条件"
                    style="cursor: pointer;"
                ></el-input>
            </div>

            <div v-show="searchValBoxShow" class="search-val-box">
                <div>
                    <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">
                    <div
                        @click="searchVlaClick(item)"
                        v-for="(item, index) in searchArray"
                        :key="index"
                    >
                        {{
                                item.name
                        item.name
                        }}
                    </div>
                </div>
@@ -71,17 +95,48 @@
                </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
                        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
                            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="floor-content" v-show="subNavType == 1">
@@ -90,18 +145,31 @@
                                <i class="el-icon-caret-left"></i>
                            </div>
                            <div class="build-outBox" ref="BuildOutBox">
                                <div class="build-box" style="left: 0px;"
                                    :style="{ width: `calc(${Math.ceil(villageHousesList.length / 10)} * (356 / 1920) * 100vw` }">
                                    <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
                                    class="build-box"
                                    style="left: 0px;"
                                    :style="{ width: `calc(${Math.ceil(buildingList.length / 10)} * (356 / 1920) * 100vw` }"
                                >
                                    <div
                                        class="ridgepole-list"
                                        v-for="index of Math.ceil(buildingList.length / 10)"
                                        :key="index"
                                    >
                                        <div
                                            v-for="(item, index) in buildingList.slice((index - 1) * 10, index * 10)"
                                            :key="index"
                                            @click="buildingClick(item)"
                                            :class="{ on: buildingChoosed.name == item.name }"
                                            :title="item.name"
                                        >{{ item.name }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="nextBtn rightBtn" @click="nextBtn">
                                <i v-show="nextBtnShow" class="el-icon-caret-right"></i>
                                <i
                                    v-show="buildingList.length > 10&&nextBtnShow"
                                    class="el-icon-caret-right"
                                ></i>
                            </div>
                        </div>

@@ -111,15 +179,16 @@
                            <div class="content">
                                <div>
                                    <div>电梯</div>
                                    <div>{{ ridgepoleNum.elevator == true ? '有' : '无' }}</div>
                                    <!-- <div>{{ ridgepoleNum.elevator == true ? '有' : '无' }}</div> -->
                                    <div>有</div>
                                </div>
                                <div>
                                    <div>楼层总数</div>
                                    <div>{{ ridgepoleNum.floorAll }}</div>
                                    <div>48</div>
                                </div>
                                <div>
                                    <div>户室总数</div>
                                    <div>{{ ridgepoleNum.familyRoom }}</div>
                                    <div>288</div>
                                </div>
                            </div>
                        </div>
@@ -129,26 +198,26 @@
                            <div class="content">
                                <div class="one">
                                    <div>
                                        <div>{{ ridgepoleNum.realityPerson }}</div>
                                        <div>160</div>
                                        <div>实有人口</div>
                                    </div>
                                    <div>
                                        <div style="color:#FF796C">{{ ridgepoleNum.emphasisPerson }}</div>
                                        <div style="color:#FF796C">16</div>
                                        <div>重点人口</div>
                                    </div>
                                </div>

                                <div class="two">
                                    <div>
                                        <div>{{ ridgepoleNum.kosekiPerson }}</div>
                                        <div>98</div>
                                        <div>户籍人口</div>
                                    </div>
                                    <div>
                                        <div style="color:#0E88FF">{{ ridgepoleNum.flowPerson }}</div>
                                        <div style="color:#0E88FF">20</div>
                                        <div>流动人口</div>
                                    </div>
                                    <div>
                                        <div style="color:#FEAC04">{{ ridgepoleNum.outsidePerson }}</div>
                                        <div style="color:#FEAC04">16</div>
                                        <div>境外人口</div>
                                    </div>
                                </div>
@@ -159,19 +228,19 @@

                            <div class="content">
                                <div>
                                    <div>{{ ridgepoleNum.houseAll }}</div>
                                    <div>288</div>
                                    <div>房屋总数</div>
                                </div>
                                <div>
                                    <div>{{ ridgepoleNum.rent }}</div>
                                    <div>120</div>
                                    <div>出租</div>
                                </div>
                                <div>
                                    <div>{{ ridgepoleNum.occupation }}</div>
                                    <div>160</div>
                                    <div>自住</div>
                                </div>
                                <div>
                                    <div>{{ ridgepoleNum.vacancy }}</div>
                                    <div>8</div>
                                    <div>空置</div>
                                </div>
                            </div>
@@ -181,10 +250,18 @@
                            <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
                                        size="small"
                                        v-model="unitValue"
                                        placeholder="请选择"
                                        @change="chooseUnit"
                                    >
                                        <el-option
                                            v-for="item in unitOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </div>
                            </div>
@@ -193,17 +270,20 @@
                                <div class="type-val">
                                    <div>
                                        <span
                                            style="width: 10px; height: 10px; background: #0E88FF; border-radius: 50%;"></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>
                                            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>
                                            style="width: 10px; height: 10px; background: #FEAC04; border-radius: 50%;"
                                        ></span>
                                        境外人口
                                    </div>
                                </div>
@@ -212,19 +292,27 @@
                                <div class="type">房屋图例</div>
                                <div class="type-val">
                                    <div>
                                        <span style="width: 14px; height: 8px; border: 1px solid #3A8B3A;"></span>
                                        <span
                                            style="width: 14px; height: 8px; border: 1px solid #3A8B3A;"
                                        ></span>
                                        出租
                                    </div>
                                    <div>
                                        <span style="width: 14px; height: 8px; border: 1px solid #2C77BB;"></span>
                                        <span
                                            style="width: 14px; height: 8px; border: 1px solid #2C77BB;"
                                        ></span>
                                        自住
                                    </div>
                                    <div>
                                        <span style="width: 14px; height: 8px; border: 1px solid #5C6169;"></span>
                                        <span
                                            style="width: 14px; height: 8px; border: 1px solid #5C6169;"
                                        ></span>
                                        空置
                                    </div>
                                    <div>
                                        <span style="width: 14px; height: 8px; border: 1px solid #CC9456;"></span>
                                        <span
                                            style="width: 14px; height: 8px; border: 1px solid #CC9456;"
                                        ></span>
                                        商业
                                    </div>
                                </div>
@@ -235,31 +323,40 @@
                                </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="{ on: floorsType == index }"
                                            @click="floorsType = index"
                                            v-for="index in Math.ceil(unitHouseChoosed.length/5)"
                                            :key="index"
                                        >{{unitHouseChoosed[index*5-5].floor_num}}-{{unitHouseChoosed[index*5 -1]?unitHouseChoosed[index*5 -1].floor_num:unitHouseChoosed[unitHouseChoosed.length-1].floor_num}}层</div>
                                    </div>
                                </div>
                                <div @click="nextFloorBtn" class="floorBtn rightFloorBtn" v-show="nextFloorShow">
                                <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
                                    v-for="(item, index) in unitHouseChoosed.slice((floorsType - 1) * 5, floorsType * 5)"
                                    :key="index"
                                >
                                    <div class="title">{{item.floor_num}}层：</div>
                                    <div class="detail">
                                        <div v-for="(value, index) in item" :key="index"
                                        <div
                                            v-for="(value, index) in item.floor_house"
                                            :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>
                                            :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]"
                                        >
                                            {{ value.house_num }}
                                            <div class="flow"></div>
                                            <div class="focus"></div>
                                            <div class="warning"></div>
                                        </div>
                                    </div>
                                </div>
@@ -267,30 +364,39 @@
                        </div>
                    </div>
                    <div class="come-out-content" v-show="subNavType == 2">
                        <el-table :data="comeoutArr" style="width: 100%"
                        <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">
                            :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%"
                        <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">
                            :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%"
                        <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">
                            :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>
@@ -299,10 +405,14 @@
                </div>

                <div class="police-info" v-show="navType == 1">
                    <el-table :data="arr" style="width: 100%"
                    <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">
                        :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>
@@ -310,10 +420,14 @@
                </div>

                <div class="warning-info" v-show="navType == 2">
                    <el-table :data="warningArray" style="width: 100%"
                    <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">
                        :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>
@@ -321,13 +435,16 @@
                </div>
            </div>
        </div>
        <!-- 
        <transition name="special-animal">
        <!-- <transition name="special-animal"></transition>-->

        </transition>-->

        <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>
@@ -362,12 +479,21 @@
            </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>
@@ -396,15 +522,15 @@

<script>
import { listQuery, accurateSearch } from "@/utils/search.js"
import villageHousesList from '@/assets/data/villageHouse.js'
import housingData from '@/assets/data/housingData.js'
import { getResidentialQuartersList, getResidentialQuartersInfo, getSearchExtensively, getAoiByPt, getUnitbuild, getHouses } from '@/api/dept/index.js'

export default {
    data () {
        return {
            contentShow: true,
            ridgepoleNum: {},
            ridgepoleNum1: {},
            unitOptions: [{ value: 1, label: '1单元' }],
            unitValue: 1,
            searchHouse: '',
            navType: 0,
            arr: [
@@ -476,25 +602,7 @@
            businessArr: [{ name: '商铺1', position: '北门', type: '超市' }, { name: '商铺2', position: '南门', type: '水果店' }, { name: '商铺3', position: '西门', type: '快递站' }],
            arrTitle: [{ title: '警务名称' }, { title: '警务时间' }, { title: '警务类型' }, { title: '责任警员' }, { title: '涉案金额' }, { title: '所属辖区' }, { title: '处理时长' }, { title: '案件级别' }],
            dialogVisible: false,
            villageHousesList: [],
            JWdetails: {},
            apartmentOptions: [{
                value: '1',
                label: '1单元'
            }, {
                value: '2',
                label: '2单元'
            }, {
                value: '3',
                label: '3单元'
            }, {
                value: '4',
                label: '4单元'
            }, {
                value: '5',
                label: '5单元'
            }],
            apartmentValue: '1',
            residentDetailsTitle: '',
            residentDetailsShow: false,
            lastBtnShow: false,
@@ -503,9 +611,7 @@
            subNavType: 1,
            lastFloorShow: false,
            nextFloorShow: true,
            levelList: [],
            houseDate: {},

            housingData: {
                name: '信美家园',
                img: '/img/housing/one.jpg',
@@ -514,12 +620,10 @@
                principal: '王敦顿',
                address: '江西省上饶市市广信区信美路18号'
            },

            searchValue: '',
            searchArray: [],
            searchValBoxShow: false,
            boxShow: false,

            // 下拉搜索
            filterText: "",
            testData: [
@@ -587,6 +691,9 @@
            defaultExpandAll: false,
            accordion: true,
            highlightCurrent: true,
            buildingList: [],
            buildingChoosed: {},
            unitHouseChoosed: [],
        }
    },
    watch: {
@@ -596,10 +703,11 @@
        },
    },
    created () {
        this.villageHousesList = villageHousesList
        this.ridgepoleNum = this.villageHousesList[0]
        this.ridgepoleNum1 = this.villageHousesList[0]
        this.levelList = this.ridgepoleNum1.unit[0].storey
        // this.getResidentialQuartersList('361102')
        this.getResidentialQuartersInfo('6E5271B45D1611EAB6183C15FB00027B', '361102')
        // this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', '万达')
        // this.getAoiByPt('117.9471794', '28.4474852', '361100', '0', '361102', '10')
        // this.getUnitbuild('6E513C5E5D1611EAB6183C15FB00027B', '361102')
    },
    mounted () {
        this.$parent.resize('400px', true)
@@ -622,11 +730,78 @@
        })
    },
    updated () {

    },

    methods: {
        navClick (e) {
            this.navType = e.target.dataset.type
        },

        // 获取小区列表
        getResidentialQuartersList (adcode) {
            getResidentialQuartersList(adcode).then(res => {
                console.log(res, 111)
            })
        },

        // 获取小区楼栋信息
        getResidentialQuartersInfo (areaId, adcode) {
            getResidentialQuartersInfo(areaId, adcode).then(res => {
                this.housingData.name = res.data.data.aoi_name
                res.data.data.build.forEach(item => {
                    let position = JSON.parse(item.center).coordinates
                    this.buildingList.push({ name: `${item.build_name}`, siteJd: `${position[0]}`, siteWd: `${position[1]}`, siteGd: 360, build_id: `${item.build_id}` })
                })
                console.log('buildingList', this.buildingList)
                this.buildingChoosed = this.buildingList[1]
                this.getHouses(this.buildingList[1].build_id, '361102')
            })
        },

        // 大搜
        getSearchExtensively (ak, region, query) {
            getSearchExtensively(ak, region, query).then(res => {
                console.log(res, 333)
            })
        },

        // 点查询
        getAoiByPt (lng, lat, height, adcode, tolerance) {
            getAoiByPt(lng, lat, height, adcode, tolerance).then(res => {
                console.log(res, 444)
            })
        },

        // 楼栋单元查询
        getUnitbuild (area_id, adcode) {
            getUnitbuild(area_id, adcode).then(res => {
                console.log(res, 555)
            })
        },

        // 楼栋单元楼层户室查询
        getHouses (build_id, adcode) {
            getHouses(build_id, adcode).then(res => {
                this.unitHouseChoosed = res.data.data.unit[this.unitValue - 1].house
                let houseFloorList = []
                this.unitHouseChoosed.forEach(item => {
                    if (houseFloorList.indexOf(Number(item.floor_num)) === -1) {
                        houseFloorList.push(Number(item.floor_num))
                    }
                })
                houseFloorList = houseFloorList.sort((a, b) => {
                    return a - b
                })
                let newArr = []
                houseFloorList.forEach(floor => {
                    let houseArr = this.unitHouseChoosed.filter(item => {
                        return Number(item.floor_num) == floor
                    })
                    newArr.push({ floor_num: floor, floor_house: houseArr })
                })
                this.unitHouseChoosed = newArr
                console.log('this.unitHouseChoosed', this.unitHouseChoosed)
            })
        },

        tableRowClassName ({ row, rowIndex }) {
@@ -654,18 +829,13 @@
        },

        buildingClick (item) {
            if (item.name == this.ridgepoleNum.name) return
            this.ridgepoleNum = item

            this.ridgepoleNum.siteJd = item.lng
            this.ridgepoleNum.siteWd = item.lat
            this.ridgepoleNum.siteGd = item.alt

            this.$EventBus.$emit('toPosition', this.ridgepoleNum)
            this.buildingChoosed = item
            this.getHouses(item.build_id, '361102')
            this.$EventBus.$emit('toPosition', item)
            this.floorsType = 1
            document.querySelector(".floor-num").style.left = '0px'
            this.lastFloorShow = false
            this.apartmentValue = '1'
            this.unitValue = '1'
        },

        nextBtn () {
@@ -712,7 +882,6 @@
            this.floorsType = 1
            document.querySelector(".floor-num").style.left = '0px'
            this.lastFloorShow = false
            this.levelList = this.ridgepoleNum1.unit[value - 1].storey
        },

        isHaveLiudong (arr) {
@@ -762,8 +931,7 @@

        //对树节点进行筛选时执行的方法
        filterNode (value, data) {
            console.log(value)
            console.log(data)
            console.log(value, data)
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
@@ -771,9 +939,8 @@
        // 点击选中
        currentChangeHandle (current, currentNode) {
            console.log(current, currentNode)

            this.$refs[`popover`].doClose()
        }
        },
    },

    destroyed () {
@@ -859,7 +1026,7 @@
            border-radius: 10px;
            overflow: hidden;

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

@@ -894,9 +1061,11 @@
                        left: 10px;
                        right: 10px;
                        bottom: 4px;
                        background: linear-gradient(135deg,
                                rgb(33 150 243 / 74%),
                                rgb(254 254 254 / 0%));
                        background: linear-gradient(
                            135deg,
                            rgb(33 150 243 / 74%),
                            rgb(254 254 254 / 0%)
                        );
                        z-index: -1;
                    }
                }
@@ -907,7 +1076,7 @@
                }

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

@@ -970,7 +1139,7 @@
                    }
                }

                &>.floor-content {
                & > .floor-content {
                    .build-info {
                        display: flex;
                        position: relative;
@@ -1019,19 +1188,24 @@
                                    flex-wrap: wrap;
                                    width: 356px;

                                    &>div {
                                    & > div {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        margin: 6px 8px;
                                        width: 54px;
                                        height: 36px;
                                        line-height: 30px;
                                        border: 1px solid #ccc;
                                        cursor: pointer;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        display: block;

                                        &.on {
                                            color: orange;
                                            border-color: orange;
                                            border-color: orange !important;
                                        }
                                    }
                                }
@@ -1043,7 +1217,7 @@
                        .content {
                            display: flex;

                            &>div {
                            & > div {
                                height: 26px;
                                line-height: 26px;
                                flex: 1;
@@ -1051,7 +1225,7 @@
                                justify-content: center;
                                border-right: 1px solid #50555f;

                                &>div:last-child {
                                & > div:last-child {
                                    margin-left: 14px;
                                    font-size: 18px;
                                    font-weight: bold;
@@ -1059,11 +1233,11 @@
                                }
                            }

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

                            &>div:last-child {
                            & > div:last-child {
                                border: none;
                            }
                        }
@@ -1080,10 +1254,10 @@
                                display: flex;
                                justify-content: space-around;

                                &>div {
                                & > div {
                                    flex: 1;

                                    &>div:first-child {
                                    & > div:first-child {
                                        height: 30px;
                                        line-height: 30px;
                                        font-size: 18px;
@@ -1091,7 +1265,7 @@
                                        color: #499d99;
                                    }

                                    &>div:last-child {
                                    & > div:last-child {
                                        height: 26px;
                                        line-height: 26px;
                                    }
@@ -1105,8 +1279,8 @@
                            display: flex;
                            justify-content: space-around;

                            &>div {
                                &>div:first-child {
                            & > div {
                                & > div:first-child {
                                    height: 30px;
                                    line-height: 30px;
                                    font-size: 18px;
@@ -1134,7 +1308,6 @@
                    }

                    .house-element-info {

                        .condo,
                        .legend {
                            display: flex;
@@ -1157,12 +1330,12 @@
                                display: flex;
                                flex: 1;

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

                                    &>span {
                                    & > span {
                                        margin: 0 10px;
                                    }
                                }
@@ -1211,7 +1384,7 @@
                                    left: 0;
                                    transition: all 1s;

                                    &>div {
                                    & > div {
                                        margin: 0 4px;
                                        display: flex;
                                        justify-content: center;
@@ -1223,7 +1396,7 @@
                                        cursor: default;
                                    }

                                    &>.on {
                                    & > .on {
                                        border: 1px solid orange;
                                        color: orange;
                                    }
@@ -1233,8 +1406,9 @@

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

                            &>div {
                            & > div {
                                margin: 8px;
                                height: 36px;
                                line-height: 36px;
@@ -1248,7 +1422,7 @@
                                    flex: 1;
                                    display: flex;

                                    &>div {
                                    & > div {
                                        margin: 0 4px;
                                        position: relative;
                                        width: 68px;
@@ -1272,29 +1446,33 @@
                                        }

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

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

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

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

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

                                    &>.shangye {
                                    & > .shangye {
                                        border: 1px solid #cc9456;
                                    }
                                }
@@ -1338,9 +1516,11 @@
    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;
}