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

guanqb

2022-11-07 c5bfaceb1038c226cd3b04c7f94373ee3d3c5967

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

 src/components/map/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-07 10:21:15
 * @LastEditTime: 2022-11-07 14:42:51
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -13,18 +13,10 @@
        <!-- 全屏控制按钮 -->
        <div class="screen-full-btn">
            <el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark">
                <i
                    class="fa fa-compress"
                    style="vertical-align: middle; cursor: pointer"
                    @click="fullscreenchange"
                ></i>
                <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
            </el-tooltip>
            <el-tooltip v-if="!isFullscreen" content="全屏" placement="bottom" effect="dark">
                <i
                    class="fa fa-expand"
                    style="vertical-align: middle; cursor: pointer"
                    @click="fullscreenchange"
                ></i>
                <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
            </el-tooltip>
        </div>
    </div>
@@ -156,8 +148,18 @@
                })
            )



            // 上饶部署，内网使用的
            //   global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            //       url: "http://36.14.131.101:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
            //       layer: "wmts_4326_361100",
            //       style: "default",
            //       format: "image/png",
            //       tileMatrixSetID: "c",
            //       tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
            //       tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
            //     })
            //   );

            // 加载顺丰底图
            // global.viewer.imageryLayers.addImageryProvider(

 src/styles/dc/index.scss

@@ -45,7 +45,7 @@
}

.dc-location-bar.homebottom {
    bottom: 310px !important;
    bottom: 360px !important;
}

.dc-zoom-controller.homebottom {

 src/views/activity/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-10-31 08:58:22
 * @LastEditTime: 2022-11-07 14:44:26
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 * 
@@ -18,12 +18,8 @@
                    <div class="category">活动类型：</div>
                    <div class="category-value">
                        <el-select size="small" v-model="activityType" placeholder="请选择">
                            <el-option
                                v-for="item in activityOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                            <el-option v-for="item in activityOptions" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </div>
                </div>
@@ -37,25 +33,16 @@
                <div>
                    <div class="category">选择时间：</div>
                    <div class="category-value">
                        <el-date-picker
                            size="small"
                            v-model="selectTime"
                            type="date"
                            placeholder="选择日期"
                            style="width:268px"
                        ></el-date-picker>
                        <el-date-picker size="small" v-model="selectTime" type="date" placeholder="选择日期"
                            style="width:268px"></el-date-picker>
                    </div>
                </div>
            </div>
            <div class="result-content">
                <div class="table-box">
                    <div
                        class="row-box"
                        :class="{ on: currentClickIndex === index }"
                    <div class="row-box" :class="{ on: currentClickIndex === index }"
                        v-for="(item, index) in activityList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        :key="index"
                        @click="goAbDetail(item, index)"
                    >
                        :key="index" @click="goAbDetail(item, index)">
                        <div class="row-title">常规安保</div>
                        <div class="row-content">
                            <div>
@@ -64,9 +51,7 @@
                            </div>
                            <div>
                                <div class="category">活动时间：</div>
                                <div
                                    class="category-value"
                                >2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                                <div class="category-value">2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
                            </div>
                            <div>
                                <div class="category">活动详情：</div>
@@ -76,15 +61,9 @@
                    </div>
                </div>
                <div class="pages">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="activityList.length"
                        :page-size="pagesize"
                        pager-count="3"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                    <el-pagination background layout="prev, pager, next" :total="activityList.length"
                        :page-size="pagesize" pager-count="3" :current-page="currentPage"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
@@ -131,13 +110,8 @@
        </div>

        <div class="second-container">
            <el-tree
                :data="treeData"
                show-checkbox
                node-key="id"
                @check="treeCheckClick"
                @node-click="treeNodeClick"
            ></el-tree>
            <el-tree :data="treeData" show-checkbox node-key="id" @check="treeCheckClick" @node-click="treeNodeClick">
            </el-tree>
        </div>

        <div v-show="dialogVisible" class="activity-details-box">
@@ -179,7 +153,7 @@
                <div class="category-value">保安部立即会同工程物料部派人分头前往各楼检查电梯运行状况，发现电梯关人立 即按照电梯困人应急预案施救。</div>
            </div>

            <div class="row-box">
            <!-- <div class="row-box">
                <div class="category">撤离路线：</div>
                <div class="category-value">
                    <el-switch
@@ -189,9 +163,9 @@
                        inactive-color="#ccc"
                    ></el-switch>
                </div>
            </div>
            </div> -->

            <div class="row-box">
            <!-- <div class="row-box">
                <div class="category">分析范围：</div>
                <div class="category-value">
                    <el-input
@@ -202,7 +176,7 @@
                        placeholder="请输入范围"
                    ></el-input>
                </div>
            </div>
            </div> -->
        </div>

        <div class="btn-box">
@@ -737,11 +711,11 @@
        .search-box {
            padding: 0 10px;

            & > div:first-child {
            &>div:first-child {
                margin-top: 0;
            }

            & > div {
            &>div {
                margin-top: 10px;
                display: flex;
                align-items: center;
@@ -815,7 +789,7 @@
                    font-size: 14px;

                    .row-content {
                        & > div {
                        &>div {
                            display: flex;
                            line-height: 28px;

@@ -945,7 +919,7 @@
            line-height: 28px;
            display: flex;

            & > div {
            &>div {
                text-align: left;
            }


 src/views/home/components/bottomContainer.vue

@@ -196,10 +196,6 @@
                cursor: pointer;
            }

            .beforetime:hover {
                text-decoration: underline;
            }

            .choosed {
                color: #fff;
            }

 src/views/home/components/leftContainer.vue

@@ -3,16 +3,9 @@
        <div class="person-box">
            <div class="title">
                <div>
                    <span
                        class="peopleTap"
                        :class="{ choosed: peopletype == 0 }"
                        @click="peopleTabClick(0)"
                    >现有人员</span>/
                    <span
                        class="peopleTap"
                        :class="{ choosed: peopletype == 1 }"
                        @click="peopleTabClick(1)"
                    >重点人员</span>
                    <span class="peopleTap" :class="{ choosed: peopletype == 0 }"
                        @click="peopleTabClick(0)">现有人员</span>/
                    <span class="peopleTap" :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
                </div>
                <div>
                    共
@@ -35,18 +28,13 @@
                </div>
            </div>
            <div id="PersonEcharts" class="echarts-box"></div>
            <div
                class="back"
                title="返回上一级"
                v-show="dataDeep == 2 && peopletype == 0"
                @click="backBegin"
            ></div>
            <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>
        </div>
        <div class="house-box">
            <div class="title">现有房屋</div>
            <div class="sub-tab">
                <div class="tab" :class="{ on: tabTypeTwo == 0 }" @click="houseTabClick(0)">
                    <div class="num">1822603户</div>
                    <div class="num">182万户</div>
                    <div class="num">实有房屋</div>
                </div>
                <div class="tab" :class="{ on: tabTypeTwo == 1 }" @click="houseTabClick(1)">
@@ -356,16 +344,23 @@
                            position: 'right', // 标签右对齐
                            distance: 0,// 标签距离柱条的距离
                            formatter: params => {
                                return params.data.realValue + '个'
                                let msg
                                if (params.data.realValue > 10000) {
                                    msg = (params.data.realValue / 10000).toFixed(2) + '万个'
                                } else {
                                    msg = params.data.realValue + '个'
                                }

                                return msg
                            }
                        }
                    }
                ],
                grid: {
                    x: 70,
                    y: 10,
                    x2: 10,
                    y2: 20
                    top: '2%',
                    left: '60',
                    right: '40',
                    bottom: '2%'
                },

            }
@@ -787,10 +782,6 @@
            cursor: pointer;
        }

        .peopleTap:hover {
            text-decoration: underline;
        }

        .choosed {
            color: #fff;
        }
@@ -823,6 +814,7 @@
        .back:hover {
            color: #43bafe;
        }

        .back::after {
            font-family: element-icons;
            content: '\e6ea';
@@ -870,7 +862,7 @@
                color: #fff;
            }

            & > div:nth-of-type(2) {
            &>div:nth-of-type(2) {
                font-size: 14px;
            }
        }
@@ -891,7 +883,7 @@
                border: 1px solid rgba(20, 50, 123, 1);
                cursor: pointer;

                & > div {
                &>div {
                    height: 26px;
                    line-height: 26px;
                }
@@ -907,7 +899,7 @@
            width: 100%;
        }

        .sub-tab + .echarts-box {
        .sub-tab+.echarts-box {
            margin-top: 10px;
        }
    }

 src/views/home/components/rightContainer.vue

@@ -4,16 +4,9 @@
            <div class="title">
                案件统计
                <div class="timer">
                    <el-date-picker
                        v-model="eventTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                    <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
            </div>
            <div id="EventChangeEcharts" class="echarts-box"></div>
@@ -21,28 +14,15 @@
        <div class="alert-box">
            <div class="title">
                <span style="margin-right:130px">安保活动</span>
                <span
                    class="activity"
                    :class="{ choosed: acttype == 0 }"
                    @click="actTabClick(0)"
                >正在进行</span>
                <span class="activity" :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>
                <span>/</span>
                <span
                    class="activity"
                    :class="{ choosed: acttype == 1 }"
                    @click="actTabClick(1)"
                >历史活动</span>
                <span class="activity" :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
            </div>
            <div id="peopleList" class="echarts-box">
                <el-table
                    :data="acttype == 0 ? underwayArr : historyArr"
                    style="width: 100%"
                <el-table :data="acttype == 0 ? underwayArr : historyArr" 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"
                    ref="activityTable"
                    @row-click="activityRowClick"
                >
                    :row-class-name="tableRowClassName" ref="activityTable" @row-click="activityRowClick">
                    <el-table-column prop="activityName" label="活动名称" width="100"></el-table-column>
                    <el-table-column prop="startTime" label="开始时间" width="100"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间" width="100"></el-table-column>
@@ -485,10 +465,6 @@
                cursor: pointer;
            }

            .activity:hover {
                text-decoration: underline;
            }

            .choosed {
                color: #fff;
            }
@@ -510,7 +486,7 @@
                border: 1px solid rgba(20, 50, 123, 1);
                cursor: pointer;

                & > div {
                &>div {
                    height: 26px;
                    line-height: 26px;
                }
@@ -525,7 +501,7 @@
            flex: 1;
        }

        .sub-tab + .echarts-box {
        .sub-tab+.echarts-box {
            margin-top: 10px;
        }


 src/views/home/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-03 16:10:17
 * @LastEditTime: 2022-11-07 15:05:40
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -11,29 +11,16 @@

<template>
    <div class="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"
            @changePoliceSituationType="changePoliceSituationType"
            @policeSituationChange="policeSituationChange"
        ></bottom-container>
        <bottom-container class="bottom-container" ref="bottomContainer"
            @changePoliceSituationType="changePoliceSituationType" @policeSituationChange="policeSituationChange">
        </bottom-container>

        <div class="center-container">
            <div class="layers-control-btn house">
@@ -60,72 +47,29 @@
        </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"
        >
            <iframe
                src="http://vr.jxpskj.com/JXSFKZQJ/QJ/"
                style="width: 100%; height: 100%;"
                frameborder="0"
            ></iframe>
        <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>
        </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="dialog-side">
                <div>
                    <div>活动名称:</div>
@@ -168,14 +112,8 @@
            </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="dialog-side">
                <div>
                    <div>责任人：</div>
@@ -198,14 +136,8 @@
            </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="dialog-side">
                <div>
                    <div>责任区负责人：</div>
@@ -228,91 +160,48 @@
            </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="equimentDetail">
                <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="policeStation" label="所属派出所"></el-table-column>
                            <el-table-column prop="area" 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>
@@ -321,20 +210,11 @@
            </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>
@@ -345,14 +225,8 @@
            </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="dialog-side">
                <div>
                    <div>所属派出所:</div>
@@ -1548,7 +1422,7 @@
        display: flex;
        position: fixed;
        left: 50%;
        bottom: 340px;
        bottom: 310px;
        transform: translate(-50%, 0);

        .layers-control-btn {
@@ -1709,9 +1583,7 @@
                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

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

        <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 @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                </div>
            </div>
        </div>

        <div class="result-content">
            <div class="housing-estate-info">
                <div class="housing-title">
                    {{housingData.name}}
                    {{ housingData.name }}
                    <div class="progress"></div>
                </div>
                <div class="housing-bg">
@@ -38,74 +35,50 @@
                <div class="housing-introduce">
                    <div>
                        <div class="l">分类属性：</div>
                        <div class="r">{{housingData.classify}}</div>
                        <div class="r">{{ housingData.classify }}</div>
                    </div>
                    <div>
                        <div class="l">所属辖区：</div>
                        <div class="r">{{housingData.area}}</div>
                        <div class="r">{{ housingData.area }}</div>
                    </div>
                    <div>
                        <div class="l">责任民警：</div>
                        <div class="r">{{housingData.principal}}</div>
                        <div class="r">{{ housingData.principal }}</div>
                    </div>
                    <div>
                        <div class="l">标准地址：</div>
                        <div class="r">{{housingData.address}}</div>
                        <div class="r">{{ housingData.address }}</div>
                    </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 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">
                    <div class="build-info">
                        <div class="nextBtn" @click="lastBtn" v-show="lastBtnShow==true">
                        <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 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>
@@ -190,18 +163,9 @@
                        <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="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>
@@ -210,18 +174,18 @@
                            <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>
                        </div>
@@ -229,24 +193,16 @@
                            <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>
                        </div>
@@ -256,61 +212,31 @@
                            </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 == 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"
                            >
                            <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 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"
                                    <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>
                                        :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>
@@ -318,39 +244,30 @@
                    </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 :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 :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 :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>
@@ -359,14 +276,10 @@
            </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 :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>
@@ -374,14 +287,10 @@
            </div>

            <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 :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>
@@ -389,83 +298,51 @@
            </div>
        </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
                style="display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; height: 100%;"
            >
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                style="display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; height: 100%;">
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>名称：</div>
                    <div>{{JWdetails.name}}</div>
                    <div>{{ JWdetails.name }}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>时间：</div>
                    <div>{{JWdetails.time}}</div>
                    <div>{{ JWdetails.time }}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>类型：</div>
                    <div>{{JWdetails.type}}</div>
                    <div>{{ JWdetails.type }}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>责任警员：</div>
                    <div>{{JWdetails.person}}</div>
                    <div>{{ JWdetails.person }}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>涉案金额：</div>
                    <div>{{JWdetails.money}}</div>
                    <div>{{ JWdetails.money }}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>所属辖区：</div>
                    <div>{{JWdetails.turnoutArea}}</div>
                    <div>{{ JWdetails.turnoutArea }}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>处理时长：</div>
                    <div>{{JWdetails.handlingTime}}</div>
                    <div>{{ JWdetails.handlingTime }}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>案件级别：</div>
                    <div>{{JWdetails.rank}}</div>
                    <div>{{ JWdetails.rank }}</div>
                </div>
            </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"
                :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                :cell-style="{'text-align':'center','borderColor':'#324e75'}"
            >
            <el-table :data="houseDate.householdsDate"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', '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>
@@ -815,12 +692,15 @@
            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;
@@ -832,6 +712,7 @@
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }

        button:active {
            background-color: rgb(0, 92, 169);
            border: 1px solid rgb(0, 92, 169);
@@ -853,7 +734,7 @@
        border-radius: 10px;
        overflow: hidden;

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

@@ -888,11 +769,9 @@
                    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;
                }
            }
@@ -903,7 +782,7 @@
            }

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

@@ -935,6 +814,7 @@
                border-bottom: 1px solid #33566c;
                cursor: pointer;
            }

            .choosed {
                background-color: rgba(0, 92, 169, 1);
            }
@@ -947,7 +827,7 @@
                justify-content: space-around;

                .sub-nav {
                    padding: 0 15px;
                    width: 76px;
                    height: 26px;
                    line-height: 26px;
                    border-radius: 13px;
@@ -955,16 +835,15 @@
                    cursor: pointer;
                    color: rgb(223, 219, 219);
                }

                .on {
                    box-sizing: border-box;
                    border: 1px solid #fff;
                    background-color: #0158a2;
                    text-decoration: underline;
                    color: #fff;
                }
            }

            & > .floor-content {
            &>.floor-content {
                .build-info {
                    display: flex;
                    position: relative;
@@ -977,28 +856,34 @@
                        width: 20px;
                        height: 60px;
                        padding-top: 12px;

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

                    .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;
@@ -1007,7 +892,7 @@
                                flex-wrap: wrap;
                                width: 356px;

                                & > div {
                                &>div {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
@@ -1031,7 +916,7 @@
                    .content {
                        display: flex;

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

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

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

                        & > div:last-child {
                        &>div:last-child {
                            border: none;
                        }
                    }
@@ -1068,10 +953,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;
@@ -1079,7 +964,7 @@
                                    color: #499d99;
                                }

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

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

                .house-element-info {

                    .condo,
                    .legend {
                        display: flex;
@@ -1131,8 +1017,10 @@
                        .type {
                            width: 80px;
                        }

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

                            :deep(.el-input--suffix .el-input__inner) {
                                padding-right: 54px;
                            }
@@ -1142,45 +1030,52 @@
                            display: flex;
                            flex: 1;

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

                                & > span {
                                &>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;
@@ -1189,7 +1084,7 @@
                                left: 0;
                                transition: all 1s;

                                & > div {
                                &>div {
                                    margin: 0 4px;
                                    display: flex;
                                    justify-content: center;
@@ -1200,7 +1095,8 @@
                                    background: #202434;
                                    cursor: default;
                                }
                                & > .on {

                                &>.on {
                                    border: 1px solid orange;
                                    color: orange;
                                }
@@ -1211,7 +1107,7 @@
                    .floor-detail {
                        margin-top: 14px;

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

                                & > div {
                                &>div {
                                    margin: 0 4px;
                                    position: relative;
                                    width: 68px;
@@ -1258,16 +1154,20 @@
                                        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;
                                }
                            }
@@ -1276,6 +1176,7 @@
                }
            }
        }

        .police-info {
            .tableClass {
                margin: 0 auto;
@@ -1283,6 +1184,7 @@
                height: 400px;
                border-collapse: collapse;
            }

            .tableClass th,
            .tableClass td {
                width: 200px;
@@ -1308,11 +1210,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;
}


 src/views/lyout/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-03 15:07:12
 * @LastEditTime: 2022-11-07 15:10:23
 * @FilePath: \srs-police-affairs\src\views\lyout\index.vue
 * @Description: 
 * 
@@ -148,7 +148,7 @@
        }

        .menu-list {
            width: 800px;
            margin-right: 10px;
            display: flex;
            align-items: center;