1

shuishen

2022-12-08 beff0515a461d7c5b6d2a525a6b7321fb21f7e10

1

 public/img/box - 副本/2.png

 public/img/box - 副本/22222222.png

 public/img/box - 副本/4.png

 public/img/box - 副本/55.png

 public/img/box - 副本/bottom-box.png

 public/img/box - 副本/bottom-box1.png

 public/img/box - 副本/box-bg.png

 public/img/box - 副本/box-bg1.png

 public/img/box - 副本/title-bg.png

 public/img/box - 副本/title-bg2.png

 public/img/box/bottom-box.png

 public/img/box/box-bg.png

 public/img/box/title-bg.png

 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-08 14:25:31
 * @LastEditTime: 2022-12-08 10:02:24
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -13,40 +13,23 @@
        <!-- 全屏控制按钮 -->
        <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
            class="image-switch-icon-btn"
            title="切换影像"
            @mouseover="showImgBtn = true"
            @mouseleave="showImgBtn = false"
        >
        <div class="image-switch-icon-btn" title="切换影像" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false">
            <img src="/img/base_map.png" alt />
        </div>
        <div
            class="image-switch-img-btn"
            v-show="showImgBtn"
            @mouseover="showImgBtn = true"
            @mouseleave="showImgBtn = false"
        >
        <div class="image-switch-img-btn" v-show="showImgBtn" @mouseover="showImgBtn = true"
            @mouseleave="showImgBtn = false">
            <div class="img" @click="switchImg">
                <span :class="{on:imgtype == 0}">影像</span>
                <span :class="{ on: imgtype == 0 }">影像</span>
            </div>
            <div class="elec" @click="switchElec">
                <span :class="{on:imgtype == 1}">矢量</span>
                <span :class="{ on: imgtype == 1 }">矢量</span>
            </div>
        </div>

@@ -192,7 +175,7 @@
            // 上饶部署，内网使用的
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            //         url: "http://36.14.131.101:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
            //         url: "http://192.168.0.112:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
            //         layer: "wmts_4326_361100",
            //         style: "default",
            //         format: "image/png",

 src/styles/dc/index.scss

@@ -144,11 +144,10 @@
        background-size: 100% 100%;
        width: 80px;
        height: 60px;
        border: 2px solid  $table-header-bg-color;
        border: 2px solid $table-header-bg-color;

        span {
            position: absolute;
            font-size: 16px;
            right: 2px;
            bottom: 2px;
            padding: 0 2px;
@@ -176,6 +175,6 @@
}

.image-switch-img-btn.shrink-btn {
    left: 448px !important;
    bottom: 176px!important;
    left: 448px;
    bottom: 176px;
}

 src/styles/element-ui/element-ui.scss

@@ -88,7 +88,7 @@
    color: #fff;
    font-weight: 200;
    // background-color: $table-body-tr-n-color!important;
    background-color:rgba(9, 53, 182,0.93)!important;
    background-color: rgba(9, 53, 182, 0.93) !important;
}

.el-select-dropdown__list {
@@ -243,7 +243,8 @@
    line-height: 27px;
}

.el-year-table td .cell,.el-month-table td .cell  {
.el-year-table td .cell,
.el-month-table td .cell {
    color: #fff;
}

@@ -277,7 +278,7 @@
    border-top: 2px solid #293f6f !important;
}

.el-date-picker__header-label{
.el-date-picker__header-label {
    color: #fff !important;
}

@@ -356,7 +357,7 @@

.el-table,
.el-table__expanded-cell {
    background-color: $table-body-tr-2n-color !important;
    background-color: $table-body-bg-color !important;
}

.tree-search-popup {

 src/styles/index.scss

@@ -3,4 +3,4 @@
@import "./icon/index.scss";
@import "./tool/index.scss";
@import "./element-ui/element-ui.scss";
// @import "./media/index.scss";
@import "./media/index.scss";

 src/styles/media/index.scss

@@ -40,76 +40,317 @@
                    }
                }

                .main-content {
                    top: countSizeVh(60);
                    height: calc(100% - countSizeVh(60));
                .main-containter {

                    .left-container,
                    .right-container {
                    .main-content {
                        top: countSizeVh(60);
                        width: countSizeVw(400, 1920);
                        height: calc(100% - countSizeVh(60));

                        .person-box,
                        .land-box,
                        .case-box,
                        .crowd-box {
                            height: countSizeVh(320);
                        }
                        .home-page {

                        .person-box,
                        .house-box,
                        .land-box,
                        .case-box,
                        .alert-box,
                        .crowd-box {
                            .left-container,
                            .right-container {
                                top: countSizeVh(60);
                                width: countSizeVw(400, 1920);
                                height: calc(100% - countSizeVh(60));

                            .title {
                                padding: 0 countSizeVw(18, 1920) 0 countSizeVw(18, 1920);
                                height: countSizeVh(54);
                                line-height: countSizeVh(54);
                                font-size: countSizeVh(16);
                            }
                                .person-box,
                                .land-box,
                                .case-box,
                                .crowd-box {
                                    height: countSizeVh(320);
                                }

                            .sub-title {
                                line-height: countSizeVh(36);
                            }
                                .person-box,
                                .house-box,
                                .land-box,
                                .case-box,
                                .alert-box,
                                .crowd-box {

                            .sub-tab {
                                padding: countSizeVh(10);
                                    .title {
                                        padding: 0 countSizeVw(18, 1920) 0 countSizeVw(18, 1920);
                                        height: countSizeVh(58);
                                        line-height: countSizeVh(58);
                                        font-size: countSizeVh(16);
                                    }

                                .tab {
                                    .sub-title {
                                        line-height: countSizeVh(36);
                                    }

                                    &>div {
                                        height: countSizeVh(22);
                                        line-height: countSizeVh(22);
                                    .sub-tab {
                                        padding: countSizeVh(10);

                                        .tab {

                                            &>div {
                                                height: countSizeVh(22);
                                                line-height: countSizeVh(22);
                                            }
                                        }
                                    }

                                }

                                .house-box,
                                .alert-box {

                                    .title {
                                        height: countSizeVh(62);
                                        line-height: countSizeVh(62);
                                    }
                                }
                            }

                        }
                            .bottom-container {
                                left: countSizeVw(400, 1920);
                                width: calc(100% - countSizeVw(400, 1920) * 2);
                                height: countSizeVh(320);
                            }

                        .house-box {
                            .region-select {
                                top: countSizeVh(20);
                            }

                            .title {
                                height: countSizeVh(54);
                                line-height: countSizeVh(54);
                            .center-container {
                                bottom: countSizeVh(340);

                                .layers-control-btn {
                                    width: countSizeVw(96, 1920);
                                    height: countSizeVh(40);
                                    border-radius: countSizeVh(20)
                                }
                            }

                            .el-checkbox__inner {
                                width: countSizeVh(20);
                                height: countSizeVh(20);
                            }

                            .el-checkbox__label {
                                font-size: countSizeVh(16) !important;
                            }
                        }

                        .house-page {
                            .container-content {

                                .search-box {
                                    height: countSizeVh(48);

                                    input {
                                        font-size: countSizeVh(18);
                                    }

                                    button {
                                        width: countSizeVw(80, 1920);
                                        font-size: countSizeVh(24);
                                    }
                                }

                                .search-val-box {
                                    top: countSizeVh(48);
                                    left: countSizeVw(6, 1920);
                                    width: calc(100% - 2 * countSizeVw(6, 1920));
                                    max-height: countSizeVh(160);
                                    border-radius: countSizeVh(10);

                                    &>div {
                                        div {
                                            padding: 0 countSizeVw(10, 1920);
                                            line-height: countSizeVh(36);
                                            cursor: pointer;
                                        }
                                    }
                                }

                                .result-content {
                                    height: calc(100% - countSizeVh(48));

                                    .housing-estate-info {

                                        .housing-title {
                                            padding: 0 countSizeVw(10, 1920);
                                            height: countSizeVh(40);
                                            line-height: countSizeVh(40);
                                            font-size: countSizeVh(28);

                                            &::after {
                                                top: countSizeVh(18);
                                                left: countSizeVw(10, 1920);
                                                right: countSizeVw(10, 1920);
                                                top: countSizeVh(4);
                                            }
                                        }

                                        .housing-bg {
                                            margin-top: countSizeVh(6);
                                            height: countSizeVh(200);
                                        }

                                        .housing-introduce {

                                            &>div {
                                                padding: 0 countSizeVw(10, 1920);

                                                .l {
                                                    width: countSizeVw(80, 1920);
                                                    line-height: countSizeVh(40);
                                                }

                                                .r {
                                                    line-height: countSizeVh(40);
                                                }
                                            }
                                        }
                                    }

                                    .nav-tab {

                                        .nav {
                                            height: countSizeVh(40);
                                            line-height: countSizeVh(40);
                                            border-bottom: countSizeVh(1) solid #33566c;
                                        }
                                    }

                                    .base-info {

                                        .sub-nav-list {
                                            padding: countSizeVw(14, 1920) 0;

                                            .sub-nav {
                                                width: countSizeVw(76, 1920);
                                                height: countSizeVh(26);
                                                line-height: countSizeVh(26);
                                                border-radius: countSizeVh(13);
                                            }

                                            .on {
                                                border: countSizeVh(1) solid #fff;
                                            }
                                        }
                                    }
                                }
                            }
                        }

                    }

                    .bottom-container {
                        left: countSizeVw(400, 1920);
                        width: calc(100% - countSizeVw(400, 1920) * 2);
                        height: countSizeVh(320);
                    }

                    .region-select {
                        top: countSizeVh(20);
                    .main-content.spread {
                        width: countSizeVw(400, 1920);
                    }
                }

                .flexible-btn {
                    padding: 0 countSizeVw(2, 1920);
                    width: countSizeVw(32, 1920);
                    height: countSizeVh(64);
                    line-height: countSizeVh(32);
                    border-radius: 0 countSizeVh(5) countSizeVh(5) 0;
                    box-shadow: countSizeVh(1) 0px countSizeVh(4) countSizeVh(1) $bg-color;
                }

                .flexible-btn.spread {
                    left: countSizeVw(400, 1920);
                }
            }
        }

        // 地图，控制按钮
        .screen-full-btn {
            left: countSizeVh(10);
            bottom: countSizeVh(10);
            width: countSizeVh(36);
            height: countSizeVh(36);
            font-size: countSizeVh(20);
        }

        .screen-full-btn.homebottom {
            left: countSizeVw(402, 1920) !important;
            bottom: countSizeVh(340);
        }

        .screen-full-btn.shrink-btn {
            left: countSizeVw(410, 1920) !important;
        }

        .dc-zoom-controller {
            left: countSizeVh(10) !important;
            bottom: countSizeVh(56) !important;
            width: countSizeVh(36) !important;

            &>div {
                width: countSizeVh(36) !important;
                height: countSizeVh(36) !important;

                svg {
                    width: countSizeVh(20) !important;
                    height: countSizeVh(20) !important;
                }
            }
        }

        .dc-zoom-controller.homebottom {
            left: countSizeVw(402, 1920) !important;
            bottom: countSizeVh(386) !important;
        }

        .dc-zoom-controller.shrink-btn {
            left: countSizeVw(410, 1920) !important;
        }

        .image-switch-icon-btn {
            left: countSizeVh(10);
            bottom: countSizeVh(178);
            width: countSizeVh(36);
            height: countSizeVh(36);
            font-size: countSizeVh(20);
        }

        .image-switch-icon-btn.iconbottom {
            left: countSizeVw(402, 1920) !important;
            bottom: countSizeVh(506) !important;
        }

        .image-switch-icon-btn.shrink-btn {
            left: countSizeVw(410, 1920) !important;
        }

        .dc-location-bar.homebottom {
            bottom: countSizeVh(390) !important;
        }

        .image-switch-img-btn {
            left: countSizeVw(46, 1920);
            bottom: countSizeVh(190);
            font-size: countSizeVh(20);
            border-radius: countSizeVh(5);

            .img,
            .elec {
                width: countSizeVh(80);
                height: countSizeVh(60);
                border: countSizeVh(2) solid $table-header-bg-color;

                span {
                    right: countSizeVh(2);
                    bottom: countSizeVh(2);
                    padding: 0 countSizeVh(2);
                }
            }
        }

        .image-switch-img-btn.imgbottom {
            left: countSizeVw(446, 1920);
            bottom: countSizeVh(480);
        }

        .image-switch-img-btn.shrink-btn {
            left: countSizeVw(454, 1920);
            bottom: countSizeVh(154);
        }
    }

}

 src/styles/scssFile.scss

@@ -1,4 +1,6 @@
$bg-color: rgba(9, 40, 199, 0.8);
$bg-one-color: rgba(35, 50, 167, 0.8);

$bg-color: $bg-one-color;

$tree-search-bg-color: rgba(9, 40, 199, 0.9);

@@ -16,13 +18,16 @@

$menu-tab-shadow: rgba(144, 202, 249, 0.8);

$table-header-bg-color: rgba(9, 40, 199, 0.8);

$table-body-bg-color: rgba(9, 40, 199, 0.8);

$table-body-tr-n-color: rgba(17, 38, 163, 0.8);
// 表格使用的颜色
$table-header-bg-color: rgba(9, 40, 199, 0.5);

$table-body-tr-2n-color: rgba(8, 56, 185, 0.8);
$table-body-bg-color: rgba(9, 40, 199, 0.5);

$table-body-tr-n-color: rgba(17, 38, 163, 0.5);

$table-body-tr-2n-color: rgba(8, 56, 185, 0.5);


@function countSizeVw($size, $vw) {

 src/views/home/index.vue

@@ -10,32 +10,19 @@
-->

<template>
    <div class="container">
        <left-container
            class="left-container"
            @showpeopledetail="showpeopledetail"
            @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail"
            ref="leftContainer"
        ></left-container>
    <div class="home-page 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">
@@ -62,69 +49,30 @@
        </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>
@@ -159,14 +107,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="item">
                <div>责任人：</div>
                <div>{{ phoneDetails.person }}</div>
@@ -185,14 +127,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="item">
                <div>责任区负责人：</div>
                <div>王某某</div>
@@ -211,58 +147,30 @@
            </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>
@@ -270,35 +178,20 @@
                            <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>
@@ -307,20 +200,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>
@@ -331,14 +215,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="item">
                <div>所属派出所:</div>
                <div>{{ policeSituationDetailArr.policeName }}</div>
@@ -1807,9 +1685,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-12-01 15:43:39
 * @LastEditTime: 2022-12-07 14:53:21
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -10,56 +10,32 @@
-->

<template>
    <div class="container">
    <div class="house-page container">
        <div v-show="boxShow" class="container-content">
            <div v-show="contentShow" class="search-box">
                <!-- <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>
@@ -95,48 +71,17 @@
                </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">
@@ -145,22 +90,13 @@
                                <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>
@@ -245,18 +181,10 @@
                            <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>
@@ -265,20 +193,17 @@
                                <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>
@@ -287,27 +212,19 @@
                                <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>
@@ -318,67 +235,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 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 == '商业' }]"
                                        >
                                            :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]">
                                            {{ value.Doorplate }}
                                            <div
                                                class="flow"
                                                v-show="isHaveLiudong(value.householdsDate)"
                                            ></div>
                                            <div
                                                class="focus"
                                                v-show="isHaveZhongdian(value.householdsDate)"
                                            ></div>
                                            <div
                                                class="warning"
                                                v-show="isHaveJingwai(value.householdsDate)"
                                            ></div>
                                            <div class="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>
@@ -386,39 +267,30 @@
                        </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>
@@ -427,14 +299,10 @@
                </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>
@@ -442,14 +310,10 @@
                </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>
@@ -462,14 +326,8 @@

        </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>
@@ -504,21 +362,12 @@
            </div>
        </el-dialog>

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

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

@@ -1041,11 +890,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;
                    }
                }
@@ -1056,7 +903,7 @@
                }

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

@@ -1119,7 +966,7 @@
                    }
                }

                & > .floor-content {
                &>.floor-content {
                    .build-info {
                        display: flex;
                        position: relative;
@@ -1168,7 +1015,7 @@
                                    flex-wrap: wrap;
                                    width: 356px;

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

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

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

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

                            & > div:last-child {
                            &>div:last-child {
                                border: none;
                            }
                        }
@@ -1229,10 +1076,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;
@@ -1240,7 +1087,7 @@
                                        color: #499d99;
                                    }

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

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

                    .house-element-info {

                        .condo,
                        .legend {
                            display: flex;
@@ -1305,12 +1153,12 @@
                                display: flex;
                                flex: 1;

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

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

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

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

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

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

                                        .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;
                                    }
                                }
@@ -1490,11 +1334,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-12-01 15:48:04
 * @LastEditTime: 2022-12-07 08:49:30
 * @FilePath: \srs-police-affairs\src\views\lyout\index.vue
 * @Description: 
 * 
@@ -13,23 +13,13 @@
        <div class="main-header">
            <!-- <div class="title"></div> -->
            <div class="menu-list left">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuLeftList"
                    :key="index"
                >
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                            {{
                            subItem.menuName
                                    subItem.menuName
                            }}
                        </div>
                    </div>
@@ -43,23 +33,13 @@

            <!-- 菜单导航 -->
            <div class="menu-list right">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuRightList"
                    :key="index"
                >
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                            {{
                            subItem.menuName
                                    subItem.menuName
                            }}
                        </div>
                    </div>
@@ -79,23 +59,15 @@
            <mapBox ref="modalForm" />

            <!-- 主体内容区域 -->
            <div
                class="main-content"
                id="MainContent"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
            >
            <div class="main-content" id="MainContent"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
                <router-view ref="target-name"></router-view>
            </div>

            <el-button
                v-show="leftShow"
                class="flexible-btn"
            <el-button v-show="leftShow" class="flexible-btn"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
                id="FlexibleBtn"
                type="primary"
                @click="flexibelClick"
            ></el-button>
                :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
                @click="flexibelClick"></el-button>
        </div>
    </div>
</template>
@@ -289,7 +261,7 @@
            background-size: 100% 100%;
            background-repeat: no-repeat;
            z-index: -1;
            opacity: 0.8;
            opacity: 0.85;
        }

        .title {
@@ -308,7 +280,7 @@
            overflow: hidden;
            letter-spacing: 6px;

            & > img {
            &>img {
                // width: 100%;
                height: 80%;
                margin: 0 10px 0 10px;
@@ -324,7 +296,7 @@
                // border-radius: 10px 16px 10px 16px;
                transform: skew(58deg);

                & > span {
                &>span {
                    transform: skew(-58deg);
                }
            }
@@ -338,7 +310,7 @@
                // border-radius: 16px 10px 16px 10px;
                transform: skew(-58deg);

                & > span {
                &>span {
                    transform: skew(58deg);
                }
            }
@@ -348,10 +320,11 @@
            display: flex;
            align-items: center;

            & > .nav-list {
            &>.nav-list {

                // color: rgba(32, 106, 181, 1);
                // border-bottom: 2px solid #409eff;
                & > span.on {
                &>span.on {
                    color: rgba(252, 189, 86, 1);
                }
            }