srs-police-affairs.git

parent: df7c123c | patch | commit | ignore whitespace

shuishen

2022-11-03 a9549caef589501ae2044cf34056e3a5997e0577

优化项目

6 files modified

	src/styles/base/index.scss	192 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/components/bottomContainer.vue	147 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/components/leftContainer.vue	52 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/components/rightContainer.vue	67 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/index.vue	605 ●●●●● patch \| view \| raw \| blame \| history
	src/views/lyout/index.vue	37 ●●●●● patch \| view \| raw \| blame \| history

 src/styles/base/index.scss

@@ -116,6 +116,7 @@
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);

        .el-dialog__header {
            height: 56px;
            line-height: 56px;
@@ -123,23 +124,20 @@

        .el-dialog__body {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .dialog-container {
            flex: 1; 
            display: flex; 
            flex-direction:column; 
            width: 100%; 
            height: 100%;
        }

        .dialog-side {
            display: flex; 
            height: 36px; 
            display: flex;
            height: 36px;
            line-height: 36px;

            &>div:nth-of-type(1) {
                flex: 1; 
                display: flex; 
                justify-content:space-between;
                margin-right: 10px; 
                flex: 1;
                display: flex;
                justify-content: space-between;
                margin-right: 10px;
                text-align: left;

                &>div:first-child {
@@ -149,15 +147,17 @@
                    text-align-last: justify;
                    margin-right: 20px;
                }

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

            }

            &>div:nth-of-type(2) {
                flex: 1; 
                display: flex; 
                justify-content:space-between;
                flex: 1;
                display: flex;
                justify-content: space-between;
                text-align: left;

                &>div:first-child {
@@ -168,6 +168,7 @@
                    margin-right: 20px;

                }

                &>div:nth-of-type(2) {
                    width: calc(100% - 120px);
                }
@@ -186,6 +187,7 @@
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);

        .el-dialog__header {
            height: 56px;
            line-height: 56px;
@@ -193,22 +195,19 @@

        .el-dialog__body {
            flex: 1;
            .dialog-container {
                flex: 1; 
                display: flex; 
                flex-direction:column; 
                width: 100%; 
                height: 100%;
            }
            display: flex;
            flex-direction: column;

            .dialog-side {
                display: flex; 
                height: 36px; 
                display: flex;
                height: 36px;
                line-height: 36px;

                &>div:nth-of-type(1) {
                    flex: 1; 
                    display: flex; 
                    justify-content:space-between;
                    margin-right: 10px; 
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    margin-right: 10px;
                    text-align: left;

                    &>div:first-child {
@@ -218,15 +217,17 @@
                        text-align-last: justify;
                        margin-right: 20px;
                    }

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

                }

                &>div:nth-of-type(2) {
                    flex: 1; 
                    display: flex; 
                    justify-content:space-between;
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    text-align: left;

                    &>div:first-child {
@@ -237,6 +238,7 @@
                        margin-right: 20px;

                    }

                    &>div:nth-of-type(2) {
                        width: calc(100% - 120px);
                    }
@@ -248,37 +250,38 @@

.equiment-details-box {
    .el-dialog {
            margin: 0 !important;
            display: flex;
            flex-direction: column;
            width: 1000px;
            height: 600px;
            top: 50%;
            left: 50% !important;
            transform: translate(-50%, -50%);
    
            .el-dialog__body {
                flex: 1;
            }
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 1000px;
        height: 600px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);

        .el-dialog__body {
            flex: 1;
        }
    }
}

.land-details-box {
    .el-dialog {
            margin: 0 !important;
            display: flex;
            flex-direction: column;
            width: 630px;
            height: 300px;
            top: 50%;
            left: 50% !important;
            transform: translate(-50%, -50%);
    
            .el-dialog__body {
                flex: 1;
            }
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 630px;
        height: 300px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);

        .el-dialog__body {
            flex: 1;
        }
    }
}

.keyPerson-details-box {
    .el-dialog {
        margin: 0 !important;
@@ -295,6 +298,7 @@
        }
    }
}

.policeSituation-details-box {
    .el-dialog {
        margin: 0 !important;
@@ -313,22 +317,19 @@

        .el-dialog__body {
            flex: 1;
            .dialog-container {
                flex: 1; 
                display: flex; 
                flex-direction:column; 
                width: 100%; 
                height: 100%;
            }
            display: flex;
            flex-direction: column;

            .dialog-side {
                display: flex; 
                height: 36px; 
                display: flex;
                height: 36px;
                line-height: 36px;

                &>div:nth-of-type(1) {
                    flex: 1; 
                    display: flex; 
                    justify-content:space-between;
                    margin-right: 10px; 
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    margin-right: 10px;
                    text-align: left;

                    &>div:first-child {
@@ -338,15 +339,17 @@
                        text-align-last: justify;
                        margin-right: 20px;
                    }

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

                }

                &>div:nth-of-type(2) {
                    flex: 1; 
                    display: flex; 
                    justify-content:space-between;
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    text-align: left;

                    &>div:first-child {
@@ -357,17 +360,20 @@
                        margin-right: 20px;

                    }

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

            .dialog-content {
                display: flex; 
                height: 36px; 
                display: flex;
                height: 36px;
                line-height: 36px;
                flex-direction:row;
                flex-direction: row;
                text-align: left;

                &>div:first-child {
                    width: 100px;
                    text-align: justify;
@@ -376,6 +382,7 @@
                    margin-right: 20px;

                }

                &>div:nth-of-type(2) {
                    width: calc(100% - 120px);
                }
@@ -383,6 +390,7 @@
        }
    }
}

.activity-details-box {
    .el-dialog {
        margin: 0 !important;
@@ -401,22 +409,19 @@

        .el-dialog__body {
            flex: 1;
            .dialog-container {
                flex: 1; 
                display: flex; 
                flex-direction:column; 
                width: 100%; 
                height: 100%;
            }
            display: flex;
            flex-direction: column;

            .dialog-side {
                display: flex; 
                height: 36px; 
                display: flex;
                height: 36px;
                line-height: 36px;

                &>div:nth-of-type(1) {
                    flex: 1; 
                    display: flex; 
                    justify-content:space-between;
                    margin-right: 10px; 
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    margin-right: 10px;
                    text-align: left;

                    &>div:first-child {
@@ -426,15 +431,17 @@
                        text-align-last: justify;
                        margin-right: 20px;
                    }

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

                }

                &>div:nth-of-type(2) {
                    flex: 1; 
                    display: flex; 
                    justify-content:space-between;
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    text-align: left;

                    &>div:first-child {
@@ -445,6 +452,7 @@
                        margin-right: 20px;

                    }

                    &>div:nth-of-type(2) {
                        width: calc(100% - 120px);
                    }
@@ -452,4 +460,4 @@
            }
        }
    }
}
}

 src/views/home/components/bottomContainer.vue

@@ -1,22 +1,12 @@
<template>
    <div class="container">
        <div class="header">
            <div class="bottomTitle">
                <div class="leftBor"></div>
                <div class="topName">警情动态</div>
                <div class="rightBor"></div>
            <div class="bottom-title">
                警情动态
            </div>
            <div class="timeTab">
                <span
                    class="beforetime"
                    :class="{ choosed: timetype == 0 }"
                    @click="timeTabClick(0)"
                >周</span>
                <span
                    class="beforetime"
                    :class="{ choosed: timetype == 1 }"
                    @click="timeTabClick(1)"
                >月</span>
                <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span>
                <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span>
            </div>
        </div>

@@ -34,20 +24,10 @@
                    <span class="callContent">报警内容</span>
                </li>
            </ul>
            <vue-seamless-scroll
                :data="timetype == 0 ? policeSituationWeekArr : policeSituationMouthArr"
                class="warp"
                :style="{
                    height: currentTableHeight - 44 + 'px', width: '100%'
                }"
            >
            <vue-seamless-scroll :data="timetype == 0 ? policeSituationWeekArr : policeSituationMouthArr" class="warp">
                <ul class="item">
                    <li
                        v-for="(item, index) in (timetype == 0 ? policeSituationWeekArr : policeSituationMouthArr)"
                        :key="index"
                        :data-obj="JSON.stringify(item)"
                        class="row"
                    >
                    <li v-for="(item, index) in (timetype == 0 ? policeSituationWeekArr : policeSituationMouthArr)"
                        :key="index" :data-obj="JSON.stringify(item)" class="row">
                        <span class="num" v-text="item.num"></span>
                        <span class="type" v-text="item.type"></span>
                        <span class="state" v-text="item.state"></span>
@@ -61,57 +41,34 @@
                </ul>
            </vue-seamless-scroll>
        </div>

        <!-- <div class="body" ref="tableBox">
            <el-table :data="timetype == 0 ? policeSituationWeekArr : policeSituationMouthArr" 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"
                :height="currentTableHeight">
                <el-table-column prop="num" label="序号"></el-table-column>
                <el-table-column prop="type" label="警情类别"></el-table-column>
                <el-table-column prop="comingPhone" label="报警电话"></el-table-column>
                <el-table-column prop="dealTime" label="接警时间"></el-table-column>
                <el-table-column prop="dealPolice" label="经办民警"></el-table-column>
                <el-table-column prop="callPeople" label="报警人"></el-table-column>
                <el-table-column prop="callPhone" label="报警人联系人"></el-table-column>
                <el-table-column prop="callContent" label="报警内容"></el-table-column>
            </el-table>
        </div>-->
    </div>
</template>

<script>
let interTime
import vueSeamlessScroll from 'vue-seamless-scroll'
import weekArr from '@/assets/data/policeSituationArr/weekArr.js'
import mouthArr from '@/assets/data/policeSituationArr/mouthArr.js'


export default {
    data () {
        return {
            timetype: 0,
            policeSituationWeekArr: [],
            policeSituationMouthArr: [],
            currentTableHeight: 0,
            policeSituationMouthArr: []
        }
    },

    components: {
        vueSeamlessScroll
    },

    created () {
        this.policeSituationWeekArr = weekArr
        this.policeSituationMouthArr = mouthArr
    },

    mounted () {
        this.$nextTick(() => {
            // this.tableScroll()
            this.setDomStyle()
        })

        window.addEventListener('resize', this.setDomStyle)
    },

    methods: {
@@ -120,25 +77,6 @@
            this.$emit('changePoliceSituationType', type)
            this.$emit('policeSituationChange')

        },

        setDomStyle () {
            this.currentTableHeight = this.$refs.tableBox.offsetHeight
        },

        tableScroll () {
            // 拿到表格挂载后的真实DOM
            const divData = this.$refs.tableBox.querySelector('.el-table__body-wrapper')
            // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
            interTime = setInterval(() => {
                // 元素自增距离顶部1像素
                divData.scrollTop += 1
                // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
                if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
                    // 重置table距离顶部距离
                    divData.scrollTop = 0
                }
            }, 50)
        },

        selectPoliceSituatiionArr (name) {
@@ -183,11 +121,6 @@
            this.policeSituationClick(item)
        }

    },

    destroyed () {
        window.addEventListener('resize', this.setDomStyle)
        clearInterval(interTime)
    }
}
</script>
@@ -203,37 +136,43 @@
        width: 100%;
        height: 36px;

        .bottomTitle {
            display: flex;
            float: left;
            width: 34%;
            margin-left: 33%;
        .bottom-title::before {
            content: '';
            top: 0;
            left: 0;
            position: absolute;
            width: 0px;
            height: 0px;
            border: 18px solid #3366e2;
            border-bottom-color: transparent;
            border-left-color: transparent;
            transform: translate(-100%, 0);
        }

        .bottom-title {
            margin: 0 auto;
            position: absolute;
            left: 0;
            right: 0;
            width: 26%;
            height: 36px;
            line-height: 36px;
            color: #fff;
            text-align: center;
            background: #3366e2
        }

            .leftBor {
                width: 0px;
                height: 0px;
                border: 18px solid #3366e2;
                border-bottom-color: transparent;
                border-left-color: transparent;
            }

            .rightBor {
                width: 0px;
                height: 0px;
                border: 18px solid #3366e2;
                border-bottom-color: transparent;
                border-right-color: transparent;
            }

            .topName {
                width: calc(100% - 48px);
                background-color: #3366e2;
                letter-spacing: 2px;
            }
        .bottom-title::after {
            content: '';
            top: 0;
            right: 0;
            position: absolute;
            width: 0px;
            height: 0px;
            border: 18px solid #3366e2;
            border-bottom-color: transparent;
            border-right-color: transparent;
            transform: translate(100%, 0);
        }

        .timeTab {
@@ -276,6 +215,8 @@
        .warp {
            margin: 0 auto;
            overflow: hidden;
            width: 100%;
            height: calc(100% - 44px);
        }

        ul {
@@ -334,4 +275,4 @@
        }
    }
}
</style>
</style>

 src/views/home/components/leftContainer.vue

@@ -2,18 +2,9 @@
    <div class="container">
        <div class="person-box">
            <div class="title">
                <i></i>
                <span
                    class="peopleTap"
                    :class="{ choosed: peopletype == 0 }"
                    @click="peopleTabClick(0)"
                >现有人员</span>
                <span class="peopleTap" :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>
                <span>/</span>
                <span
                    class="peopleTap"
                    :class="{ choosed: peopletype == 1 }"
                    @click="peopleTabClick(1)"
                >重点人员</span>
                <span class="peopleTap" :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
                <span class="word before">共</span>
                <span class="peopleNum" :class="{ choosed: peopletype == 0 }">100</span>
                <span class="word">/</span>
@@ -39,18 +30,13 @@
            <div id="PersonEcharts" class="echarts-box" v-show="peopletype == 0"></div>
            <div id="keyPersonEcharts" class="peopleTable" v-show="peopletype == 1"></div>

            <div
                class="back"
                title="返回上一级"
                v-show="dataDeep == 2 && peopletype == 0"
                @click="backBegin"
            >
            <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin">
                <i class="el-icon-back"></i>
            </div>
        </div>
        <div class="house-box">
            <div class="title">
                <i></i> 现有房屋
                现有房屋
            </div>

            <div class="sub-tab">
@@ -68,7 +54,7 @@
        </div>
        <div class="land-box">
            <div class="title">
                <i></i> 现有地
                现有地
            </div>
            <div class="sub-tab">
                <div class="tab" :class="{ on: tabTypeThree == 0 }" @click="landTabClick(0)">
@@ -844,6 +830,19 @@
        display: flex;
        flex-direction: column;
        padding: 0 10px;

        .title::after {
            content: "";
            position: absolute;
            top: 6px;
            left: 0;
            width: 8px;
            height: 28px;
            border-radius: 4px;
            background: #43bafe;
            box-shadow: 0px 0px 8px 2px #43bafe;
        }

        .title {
            padding: 0 18px;
            position: relative;
@@ -851,17 +850,6 @@
            height: 40px;
            line-height: 40px;
            font-size: 20px;

            i {
                position: absolute;
                top: 6px;
                left: 0;
                width: 8px;
                height: 28px;
                border-radius: 4px;
                background: #43bafe;
                box-shadow: 0px 0px 8px 2px #43bafe;
            }

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

                & > div {
                &>div {
                    height: 26px;
                    line-height: 26px;
                }
@@ -901,7 +889,7 @@
            height: calc(100% - 104px);
        }

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

 src/views/home/components/rightContainer.vue

@@ -2,18 +2,11 @@
    <div class="container">
        <div class="case-box">
            <div class="title">
                <i></i> 案件统计
                案件统计
                <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>

@@ -21,30 +14,17 @@
        </div>
        <div class="alert-box">
            <div class="title">
                <i></i>

                <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>
@@ -54,7 +34,7 @@
        </div>
        <div class="crowd-box">
            <div class="title">
                <i></i> 现有设备
                现有设备
                <span class="regionTotal">{{ regionTotal }}个</span>
            </div>
            <div id="EquipmentEcharts" class="echarts-box"></div>
@@ -444,6 +424,18 @@
        flex-direction: column;
        padding: 0 10px;

        .title::after {
            content: "";
            position: absolute;
            top: 6px;
            left: 0;
            width: 8px;
            height: 28px;
            border-radius: 4px;
            background: #43bafe;
            box-shadow: 0px 0px 8px 2px #43bafe;
        }

        .title {
            padding: 0 18px;
            position: relative;
@@ -451,17 +443,6 @@
            height: 40px;
            line-height: 40px;
            font-size: 20px;

            i {
                position: absolute;
                top: 6px;
                left: 0;
                width: 8px;
                height: 28px;
                border-radius: 4px;
                background: #43bafe;
                box-shadow: 0px 0px 8px 2px #43bafe;
            }

            .timer {
                width: 250px;
@@ -508,7 +489,7 @@
                border: 1px solid rgba(20, 50, 123, 1);
                cursor: pointer;

                & > div {
                &>div {
                    height: 26px;
                    line-height: 26px;
                }
@@ -523,7 +504,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-10-26 09:02:31
 * @LastEditTime: 2022-11-03 15:19:45
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -11,24 +11,16 @@

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

        <div class="right-container">
            <right-container
                @showequimentdetail="showequimentdetail"
                @selectPoliceChangeEventData="selectPoliceChangeEventData"
                @changeActivityType="changeActivityType"
                @activityChange="activityChange"
                ref="rightContainer"
            ></right-container>
        </div>
        <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>

        <div class="center-container">
            <div class="layers-control-btn house">
@@ -54,285 +46,165 @@
            </div>
        </div>

        <div class="bottom-container">
            <bottom-container
                ref="bottomContainer"
                @changePoliceSituationType="changePoliceSituationType"
                @policeSituationChange="policeSituationChange"
            ></bottom-container>
        </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"
        >
            <div
                style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
            >
                <video
                    src="/video/sp.mp4"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    ref="videoElement"
                    style="object-fit: fill"
                ></video>
            </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>

        <el-dialog
            :title="panoramaTitle"
            :modal="true"
            :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose"
            :close-on-click-modal="true"
        >
            <div
                style="display: flex; align-items: center; justify-content: center; width: 100%; height: 480px;"
            >
                <iframe
                    src="http://vr.jxpskj.com/JXSFKZQJ/QJ/"
                    style="width: 100%; height: 100%;"
                    frameborder="0"
                ></iframe>
            </div>
        <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose" :close-on-click-modal="true">
            <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"
        >
            <div class="dialog-container">
                <div class="dialog-side">
                    <div>
                        <div>活动名称:</div>
                        <div>{{activityDetailArr.activityName}}</div>
                    </div>
                    <div>
                        <div>开始时间:</div>
                        <div>{{activityDetailArr.startTime}}</div>
                    </div>
        <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>
                    <div>{{ activityDetailArr.activityName }}</div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>结束时间:</div>
                        <div>{{activityDetailArr.endTime}}</div>
                    </div>
                    <div>
                        <div>规模:</div>
                        <div>{{activityDetailArr.scale}}</div>
                    </div>
                <div>
                    <div>开始时间:</div>
                    <div>{{ activityDetailArr.startTime }}</div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>所属派出所:</div>
                        <div>{{activityDetailArr.policeStationName}}</div>
                    </div>
                    <div>
                        <div>坐标:</div>
                        <div>{{activityDetailArr.position}}</div>
                    </div>
            </div>
            <div class="dialog-side">
                <div>
                    <div>结束时间:</div>
                    <div>{{ activityDetailArr.endTime }}</div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>经度:</div>
                        <div>{{activityDetailArr.lng}}</div>
                    </div>
                    <div>
                        <div>纬度:</div>
                        <div>{{activityDetailArr.lat}}</div>
                    </div>
                <div>
                    <div>规模:</div>
                    <div>{{ activityDetailArr.scale }}</div>
                </div>
            </div>
            <div class="dialog-side">
                <div>
                    <div>所属派出所:</div>
                    <div>{{ activityDetailArr.policeStationName }}</div>
                </div>
                <div>
                    <div>坐标:</div>
                    <div>{{ activityDetailArr.position }}</div>
                </div>
            </div>
            <div class="dialog-side">
                <div>
                    <div>经度:</div>
                    <div>{{ activityDetailArr.lng }}</div>
                </div>
                <div>
                    <div>纬度:</div>
                    <div>{{ activityDetailArr.lat }}</div>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            :title="phoneTitle"
            :modal="true"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
            <div class="dialog-container">
                <div class="dialog-side">
                    <div>
                        <div>责任人：</div>
                        <div>{{phoneDetails.person}}</div>
                    </div>
                    <div>
                        <div>联系方式：</div>
                        <div>{{phoneDetails.phoneID}}</div>
                    </div>
        <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>
                    <div>{{ phoneDetails.person }}</div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>手台类型：</div>
                        <div>{{phoneDetails.phoneType}}</div>
                    </div>
                    <div>
                        <div>所在地址：</div>
                        <div>{{phoneDetails.location}}</div>
                    </div>
                <div>
                    <div>联系方式：</div>
                    <div>{{ phoneDetails.phoneID }}</div>
                </div>
            </div>
            <div class="dialog-side">
                <div>
                    <div>手台类型：</div>
                    <div>{{ phoneDetails.phoneType }}</div>
                </div>
                <div>
                    <div>所在地址：</div>
                    <div>{{ phoneDetails.location }}</div>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            :title="peopleTitle"
            :modal="true"
            :visible.sync="peopleVisible"
            :before-close="peopleBeforeClose"
            :close-on-click-modal="true"
            class="area-details-box"
        >
            <div class="dialog-container">
                <div class="dialog-side">
                    <div>
                        <div>责任区负责人：</div>
                        <div>王某某</div>
                    </div>
                    <div>
                        <div>责任区人口：</div>
                        <div>10000</div>
                    </div>
        <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>
                    <div>王某某</div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>男女比例：</div>
                        <div>0.92:1</div>
                    </div>
                    <div>
                        <div>所在地址：</div>
                        <div>XXXXXXX</div>
                    </div>
                <div>
                    <div>责任区人口：</div>
                    <div>10000</div>
                </div>
            </div>
            <div class="dialog-side">
                <div>
                    <div>男女比例：</div>
                    <div>0.92:1</div>
                </div>
                <div>
                    <div>所在地址：</div>
                    <div>XXXXXXX</div>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            :title="equimentTitle"
            :modal="true"
            :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose"
            :close-on-click-modal="true"
            class="equiment-details-box"
        >
            <div
                style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
            >
                <div class="equimentDetail">
                    <div class="left">
                        <el-tree
                            :data="jurisdictionData"
                            :props="defaultProps"
                            @node-click="jurisdictionNodeClick"
                            ref="tree"
                            node-key="id"
                        ></el-tree>
        <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>
                </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>
                    </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>
                        </div>
                        <div class="others" v-if="othersContent">
                            <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"
                            >
                                <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="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>
                            </div>
                    <div class="others" v-if="othersContent">
                        <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">
                            <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="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>
                        </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%"
                :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                :cell-style="{'text-align':'center','borderColor':'#324e75', 'cursor':'pointer'}"
            >
        <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' }">
                <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>
@@ -341,20 +213,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%"
                :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                :cell-style="{'text-align':'center','borderColor':'#324e75', 'cursor':'pointer'}"
            >
        <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' }">
                <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>
@@ -365,69 +228,61 @@
            </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"
        >
            <div class="dialog-container">
                <div class="dialog-side">
                    <div>
                        <div>所属派出所:</div>
                        <div>{{policeSituationDetailArr.policeName}}</div>
                    </div>
                    <div>
                        <div>警情类别:</div>
                        <div>{{policeSituationDetailArr.type}}</div>
                    </div>
        <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>
                    <div>{{ policeSituationDetailArr.policeName }}</div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>警情状态:</div>
                        <div>{{policeSituationDetailArr.state}}</div>
                    </div>
                    <div>
                        <div>报警电话:</div>
                        <div>{{policeSituationDetailArr.comingPhone}}</div>
                    </div>
                <div>
                    <div>警情类别:</div>
                    <div>{{ policeSituationDetailArr.type }}</div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>接警时间:</div>
                        <div>{{policeSituationDetailArr.dealTime}}</div>
                    </div>
                    <div>
                        <div>经办民警:</div>
                        <div>{{policeSituationDetailArr.dealPolice}}</div>
                    </div>
            </div>
            <div class="dialog-side">
                <div>
                    <div>警情状态:</div>
                    <div>{{ policeSituationDetailArr.state }}</div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>报警人:</div>
                        <div>{{policeSituationDetailArr.callPeople}}</div>
                    </div>
                    <div>
                        <div>报警人联系人:</div>
                        <div>{{policeSituationDetailArr.callPhone}}</div>
                    </div>
                <div>
                    <div>报警电话:</div>
                    <div>{{ policeSituationDetailArr.comingPhone }}</div>
                </div>
                <div class="dialog-side">
                    <div>
                        <div>经度:</div>
                        <div>{{policeSituationDetailArr.lng}}</div>
                    </div>
                    <div>
                        <div>纬度:</div>
                        <div>{{policeSituationDetailArr.lat}}</div>
                    </div>
            </div>
            <div class="dialog-side">
                <div>
                    <div>接警时间:</div>
                    <div>{{ policeSituationDetailArr.dealTime }}</div>
                </div>
                <div class="dialog-content">
                    <div>报警内容:</div>
                    <div>{{policeSituationDetailArr.callContent}}</div>
                <div>
                    <div>经办民警:</div>
                    <div>{{ policeSituationDetailArr.dealPolice }}</div>
                </div>
            </div>
            <div class="dialog-side">
                <div>
                    <div>报警人:</div>
                    <div>{{ policeSituationDetailArr.callPeople }}</div>
                </div>
                <div>
                    <div>报警人联系人:</div>
                    <div>{{ policeSituationDetailArr.callPhone }}</div>
                </div>
            </div>
            <div class="dialog-side">
                <div>
                    <div>经度:</div>
                    <div>{{ policeSituationDetailArr.lng }}</div>
                </div>
                <div>
                    <div>纬度:</div>
                    <div>{{ policeSituationDetailArr.lat }}</div>
                </div>
            </div>
            <div class="dialog-content">
                <div>报警内容:</div>
                <div>{{ policeSituationDetailArr.callContent }}</div>
            </div>
        </el-dialog>
    </div>
@@ -498,6 +353,36 @@
            }]
    }
]

let positionColor = [
    global.DC.Namespace.Cesium.Color.fromBytes(
        3,
        255,
        13,
        100
    ),
    global.DC.Namespace.Cesium.Color.fromBytes(
        102, 176, 255,
        100
    ),
    global.DC.Namespace.Cesium.Color.fromBytes(
        230, 162, 60,
        100
    ),
    global.DC.Namespace.Cesium.Color.fromBytes(
        245, 108, 108,
        100
    ),
    global.DC.Namespace.Cesium.Color.fromBytes(
        139, 195, 74,
        100
    ),
    global.DC.Namespace.Cesium.Color.fromBytes(
        244, 67, 54,
        100
    )
]

let timer = []

import axios from "axios"
@@ -569,34 +454,7 @@
            areaOptions: [],
            housingOptions: [],
            JurisdictionData: [{ name: '全部' }],
            positionColor: [
                global.DC.Namespace.Cesium.Color.fromBytes(
                    3,
                    255,
                    13,
                    100
                ),
                global.DC.Namespace.Cesium.Color.fromBytes(
                    102, 176, 255,
                    100
                ),
                global.DC.Namespace.Cesium.Color.fromBytes(
                    230, 162, 60,
                    100
                ),
                global.DC.Namespace.Cesium.Color.fromBytes(
                    245, 108, 108,
                    100
                ),
                global.DC.Namespace.Cesium.Color.fromBytes(
                    139, 195, 74,
                    100
                ),
                global.DC.Namespace.Cesium.Color.fromBytes(
                    244, 67, 54,
                    100
                ),
            ],

            jurisdictionData: [{
                label: '车站派出所',
                id: '2',
@@ -678,6 +536,7 @@
            activityDetailArr: {},
        }
    },

    components: { leftContainer, rightContainer, bottomContainer },

    created () {
@@ -1114,7 +973,7 @@
                    this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'polygonLayer',
                        positions: str,
                        material: this.positionColor[index]
                        material: positionColor[index]
                    })
                    const center = this.getCenter(item.position)
                    this.$EventBus.$emit('layerPointAdd', {
@@ -1141,7 +1000,7 @@
                    this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'polygonLayer',
                        positions: str,
                        material: this.positionColor[index]
                        material: positionColor[index]
                    })
                    const center = this.getCenter(item.position)
                    this.$EventBus.$emit('layerPointAdd', {
@@ -1170,7 +1029,7 @@
                    this.$EventBus.$emit('layerPolygonAdd', {
                        layerName: 'polygonLayer',
                        positions: str,
                        material: this.positionColor[index],
                        material: positionColor[index],
                    })
                    const center = this.getCenter(item.position)
                    // this.$EventBus.$emit('layerPointAdd', {
@@ -1263,7 +1122,7 @@
            this.$EventBus.$emit('layerPolygonAdd', {
                layerName: 'polygonLayer',
                positions: str,
                material: this.positionColor[0]
                material: positionColor[0]
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'polygonLayer',
@@ -1576,6 +1435,7 @@
        height: calc(100% - 80px);
        background: $bg-color;
    }

    .center-container {
        display: flex;
        position: fixed;
@@ -1681,6 +1541,7 @@
                }
            }
        }

        .policeSituation {
            :deep(.el-checkbox__inner) {
                background: rgb(228, 63, 63);
@@ -1730,35 +1591,41 @@
            height: 100%;
            overflow: scroll;
            overflow-x: hidden !important;

            :deep(.el-tree) {
                background-color: transparent;
                color: #fff;
            }

            :deep(.el-tree-node__content:hover) {
                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;
            }

            :deep(.el-tree-node:focus > .el-tree-node__content) {
                background-color: #667a9d !important;
                color: #fff;
            }
        }

        .right {
            width: 70%;
            float: left;

            .monitor {
                width: 100%;
                height: 540px;
                background-color: #fff;
            }

            .others {
                width: 100%;
                height: 495px;
                background-color: red;

                .pages {
                    background-color: #14327b;
                    padding-bottom: 3px;

 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-10-25 16:42:04
 * @LastEditTime: 2022-11-03 15:07:12
 * @FilePath: \srs-police-affairs\src\views\lyout\index.vue
 * @Description: 
 * 
@@ -19,12 +19,9 @@

            <!-- 菜单导航 -->
            <div class="menu-list">
                <div class="nav-list" v-for="(item, index) in menuList" :key="index">
                    <div
                        class="nav"
                        :class="{on: currentUrl == item.path}"
                        @click="goToPath(item)"
                    >{{item.menuName}}</div>
                <div class="nav-list" :class="{ on: currentUrl == item.path }" @click="goToPath(item)"
                    v-for="(item, index) in menuList" :key="index">
                    {{ item.menuName }}
                </div>
            </div>

@@ -141,7 +138,8 @@
            // text-align: center;
            overflow: hidden;
            letter-spacing: 6px;
            & > img {

            &>img {
                // width: 100%;
                height: 80%;
                margin: 0 10px 0 10px;
@@ -154,11 +152,17 @@
            display: flex;
            align-items: center;

            .nav {
            .nav-list.on {
                // color: rgba(32, 106, 181, 1);
                border-bottom: 3px solid #409eff;
                box-sizing: border-box;
            }

            .nav-list {
                padding: 0 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                justify-content: center;
                height: 60px;
                font-size: 32px;
                font-weight: 400;
@@ -166,20 +170,9 @@
                border-bottom: 3px solid transparent;
            }

            .nav.on {
                // color: rgba(32, 106, 181, 1);
                border-bottom: 3px solid #409eff;
                box-sizing: border-box;
            }

            .nav:hover {
                // color: rgba(32, 106, 181, 1);
                // font-weight: bold;
            }
        }

        .user-infor {
        }
        .user-infor {}
    }

    .main-container {

			@@ -116,6 +116,7 @@
			top: 50%;
			left: 50% !important;
			transform: translate(-50%, -50%);

			.el-dialog__header {
			height: 56px;
			line-height: 56px;
			@@ -123,23 +124,20 @@

			.el-dialog__body {
			flex: 1;
			display: flex;
			flex-direction: column;
			}
			.dialog-container {
			flex: 1;
			display: flex;
			flex-direction:column;
			width: 100%;
			height: 100%;
			}

			.dialog-side {
			display: flex;
			height: 36px;
			display: flex;
			height: 36px;
			line-height: 36px;

			&>div:nth-of-type(1) {
			flex: 1;
			display: flex;
			justify-content:space-between;
			margin-right: 10px;
			flex: 1;
			display: flex;
			justify-content: space-between;
			margin-right: 10px;
			text-align: left;

			&>div:first-child {
			@@ -149,15 +147,17 @@
			text-align-last: justify;
			margin-right: 20px;
			}

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

			}

			&>div:nth-of-type(2) {
			flex: 1;
			display: flex;
			justify-content:space-between;
			flex: 1;
			display: flex;
			justify-content: space-between;
			text-align: left;

			&>div:first-child {
			@@ -168,6 +168,7 @@
			margin-right: 20px;

			}

			&>div:nth-of-type(2) {
			width: calc(100% - 120px);
			}
			@@ -186,6 +187,7 @@
			top: 50%;
			left: 50% !important;
			transform: translate(-50%, -50%);

			.el-dialog__header {
			height: 56px;
			line-height: 56px;
			@@ -193,22 +195,19 @@

			.el-dialog__body {
			flex: 1;
			.dialog-container {
			flex: 1;
			display: flex;
			flex-direction:column;
			width: 100%;
			height: 100%;
			}
			display: flex;
			flex-direction: column;

			.dialog-side {
			display: flex;
			height: 36px;
			display: flex;
			height: 36px;
			line-height: 36px;

			&>div:nth-of-type(1) {
			flex: 1;
			display: flex;
			justify-content:space-between;
			margin-right: 10px;
			flex: 1;
			display: flex;
			justify-content: space-between;
			margin-right: 10px;
			text-align: left;

			&>div:first-child {
			@@ -218,15 +217,17 @@
			text-align-last: justify;
			margin-right: 20px;
			}

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

			}

			&>div:nth-of-type(2) {
			flex: 1;
			display: flex;
			justify-content:space-between;
			flex: 1;
			display: flex;
			justify-content: space-between;
			text-align: left;

			&>div:first-child {
			@@ -237,6 +238,7 @@
			margin-right: 20px;

			}

			&>div:nth-of-type(2) {
			width: calc(100% - 120px);
			}
			@@ -248,37 +250,38 @@

			.equiment-details-box {
			.el-dialog {
			margin: 0 !important;
			display: flex;
			flex-direction: column;
			width: 1000px;
			height: 600px;
			top: 50%;
			left: 50% !important;
			transform: translate(-50%, -50%);

			.el-dialog__body {
			flex: 1;
			}
			margin: 0 !important;
			display: flex;
			flex-direction: column;
			width: 1000px;
			height: 600px;
			top: 50%;
			left: 50% !important;
			transform: translate(-50%, -50%);

			.el-dialog__body {
			flex: 1;
			}
			}
			}

			.land-details-box {
			.el-dialog {
			margin: 0 !important;
			display: flex;
			flex-direction: column;
			width: 630px;
			height: 300px;
			top: 50%;
			left: 50% !important;
			transform: translate(-50%, -50%);

			.el-dialog__body {
			flex: 1;
			}
			margin: 0 !important;
			display: flex;
			flex-direction: column;
			width: 630px;
			height: 300px;
			top: 50%;
			left: 50% !important;
			transform: translate(-50%, -50%);

			.el-dialog__body {
			flex: 1;
			}
			}
			}

			.keyPerson-details-box {
			.el-dialog {
			margin: 0 !important;
			@@ -295,6 +298,7 @@
			}
			}
			}

			.policeSituation-details-box {
			.el-dialog {
			margin: 0 !important;
			@@ -313,22 +317,19 @@

			.el-dialog__body {
			flex: 1;
			.dialog-container {
			flex: 1;
			display: flex;
			flex-direction:column;
			width: 100%;
			height: 100%;
			}
			display: flex;
			flex-direction: column;

			.dialog-side {
			display: flex;
			height: 36px;
			display: flex;
			height: 36px;
			line-height: 36px;

			&>div:nth-of-type(1) {
			flex: 1;
			display: flex;
			justify-content:space-between;
			margin-right: 10px;
			flex: 1;
			display: flex;
			justify-content: space-between;
			margin-right: 10px;
			text-align: left;

			&>div:first-child {
			@@ -338,15 +339,17 @@
			text-align-last: justify;
			margin-right: 20px;
			}

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

			}

			&>div:nth-of-type(2) {
			flex: 1;
			display: flex;
			justify-content:space-between;
			flex: 1;
			display: flex;
			justify-content: space-between;
			text-align: left;

			&>div:first-child {
			@@ -357,17 +360,20 @@
			margin-right: 20px;

			}

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

			.dialog-content {
			display: flex;
			height: 36px;
			display: flex;
			height: 36px;
			line-height: 36px;
			flex-direction:row;
			flex-direction: row;
			text-align: left;

			&>div:first-child {
			width: 100px;
			text-align: justify;
			@@ -376,6 +382,7 @@
			margin-right: 20px;

			}

			&>div:nth-of-type(2) {
			width: calc(100% - 120px);
			}
			@@ -383,6 +390,7 @@
			}
			}
			}

			.activity-details-box {
			.el-dialog {
			margin: 0 !important;
			@@ -401,22 +409,19 @@

			.el-dialog__body {
			flex: 1;
			.dialog-container {
			flex: 1;
			display: flex;
			flex-direction:column;
			width: 100%;
			height: 100%;
			}
			display: flex;
			flex-direction: column;

			.dialog-side {
			display: flex;
			height: 36px;
			display: flex;
			height: 36px;
			line-height: 36px;

			&>div:nth-of-type(1) {
			flex: 1;
			display: flex;
			justify-content:space-between;
			margin-right: 10px;
			flex: 1;
			display: flex;
			justify-content: space-between;
			margin-right: 10px;
			text-align: left;

			&>div:first-child {
			@@ -426,15 +431,17 @@
			text-align-last: justify;
			margin-right: 20px;
			}

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

			}

			&>div:nth-of-type(2) {
			flex: 1;
			display: flex;
			justify-content:space-between;
			flex: 1;
			display: flex;
			justify-content: space-between;
			text-align: left;

			&>div:first-child {
			@@ -445,6 +452,7 @@
			margin-right: 20px;

			}

			&>div:nth-of-type(2) {
			width: calc(100% - 120px);
			}
			@@ -452,4 +460,4 @@
			}
			}
			}
			}
			}

			@@ -1,22 +1,12 @@
			<template>
			<div class="container">
			<div class="header">
			<div class="bottomTitle">
			<div class="leftBor"></div>
			<div class="topName">警情动态</div>
			<div class="rightBor"></div>
			<div class="bottom-title">
			警情动态
			</div>
			<div class="timeTab">
			<span
			class="beforetime"
			:class="{ choosed: timetype == 0 }"
			@click="timeTabClick(0)"
			>周</span>
			<span
			class="beforetime"
			:class="{ choosed: timetype == 1 }"
			@click="timeTabClick(1)"
			>月</span>
			<span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span>
			<span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span>
			</div>
			</div>

			@@ -34,20 +24,10 @@
			<span class="callContent">报警内容</span>
			</li>
			</ul>
			<vue-seamless-scroll
			:data="timetype == 0 ? policeSituationWeekArr : policeSituationMouthArr"
			class="warp"
			:style="{
			height: currentTableHeight - 44 + 'px', width: '100%'
			}"
			>
			<vue-seamless-scroll :data="timetype == 0 ? policeSituationWeekArr : policeSituationMouthArr" class="warp">
			<ul class="item">
			<li
			v-for="(item, index) in (timetype == 0 ? policeSituationWeekArr : policeSituationMouthArr)"
			:key="index"
			:data-obj="JSON.stringify(item)"
			class="row"
			>
			<li v-for="(item, index) in (timetype == 0 ? policeSituationWeekArr : policeSituationMouthArr)"
			:key="index" :data-obj="JSON.stringify(item)" class="row">
			<span class="num" v-text="item.num"></span>
			<span class="type" v-text="item.type"></span>
			<span class="state" v-text="item.state"></span>
			@@ -61,57 +41,34 @@
			</ul>
			</vue-seamless-scroll>
			</div>

			<!-- <div class="body" ref="tableBox">
			<el-table :data="timetype == 0 ? policeSituationWeekArr : policeSituationMouthArr" 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"
			:height="currentTableHeight">
			<el-table-column prop="num" label="序号"></el-table-column>
			<el-table-column prop="type" label="警情类别"></el-table-column>
			<el-table-column prop="comingPhone" label="报警电话"></el-table-column>
			<el-table-column prop="dealTime" label="接警时间"></el-table-column>
			<el-table-column prop="dealPolice" label="经办民警"></el-table-column>
			<el-table-column prop="callPeople" label="报警人"></el-table-column>
			<el-table-column prop="callPhone" label="报警人联系人"></el-table-column>
			<el-table-column prop="callContent" label="报警内容"></el-table-column>
			</el-table>
			</div>-->
			</div>
			</template>

			<script>
			let interTime
			import vueSeamlessScroll from 'vue-seamless-scroll'
			import weekArr from '@/assets/data/policeSituationArr/weekArr.js'
			import mouthArr from '@/assets/data/policeSituationArr/mouthArr.js'


			export default {
			data () {
			return {
			timetype: 0,
			policeSituationWeekArr: [],
			policeSituationMouthArr: [],
			currentTableHeight: 0,
			policeSituationMouthArr: []
			}
			},

			components: {
			vueSeamlessScroll
			},

			created () {
			this.policeSituationWeekArr = weekArr
			this.policeSituationMouthArr = mouthArr
			},

			mounted () {
			this.$nextTick(() => {
			// this.tableScroll()
			this.setDomStyle()
			})

			window.addEventListener('resize', this.setDomStyle)
			},

			methods: {
			@@ -120,25 +77,6 @@
			this.$emit('changePoliceSituationType', type)
			this.$emit('policeSituationChange')

			},

			setDomStyle () {
			this.currentTableHeight = this.$refs.tableBox.offsetHeight
			},

			tableScroll () {
			// 拿到表格挂载后的真实DOM
			const divData = this.$refs.tableBox.querySelector('.el-table__body-wrapper')
			// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
			interTime = setInterval(() => {
			// 元素自增距离顶部1像素
			divData.scrollTop += 1
			// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
			if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
			// 重置table距离顶部距离
			divData.scrollTop = 0
			}
			}, 50)
			},

			selectPoliceSituatiionArr (name) {
			@@ -183,11 +121,6 @@
			this.policeSituationClick(item)
			}

			},

			destroyed () {
			window.addEventListener('resize', this.setDomStyle)
			clearInterval(interTime)
			}
			}
			</script>
			@@ -203,37 +136,43 @@
			width: 100%;
			height: 36px;

			.bottomTitle {
			display: flex;
			float: left;
			width: 34%;
			margin-left: 33%;
			.bottom-title::before {
			content: '';
			top: 0;
			left: 0;
			position: absolute;
			width: 0px;
			height: 0px;
			border: 18px solid #3366e2;
			border-bottom-color: transparent;
			border-left-color: transparent;
			transform: translate(-100%, 0);
			}

			.bottom-title {
			margin: 0 auto;
			position: absolute;
			left: 0;
			right: 0;
			width: 26%;
			height: 36px;
			line-height: 36px;
			color: #fff;
			text-align: center;
			background: #3366e2
			}

			.leftBor {
			width: 0px;
			height: 0px;
			border: 18px solid #3366e2;
			border-bottom-color: transparent;
			border-left-color: transparent;
			}

			.rightBor {
			width: 0px;
			height: 0px;
			border: 18px solid #3366e2;
			border-bottom-color: transparent;
			border-right-color: transparent;
			}

			.topName {
			width: calc(100% - 48px);
			background-color: #3366e2;
			letter-spacing: 2px;
			}
			.bottom-title::after {
			content: '';
			top: 0;
			right: 0;
			position: absolute;
			width: 0px;
			height: 0px;
			border: 18px solid #3366e2;
			border-bottom-color: transparent;
			border-right-color: transparent;
			transform: translate(100%, 0);
			}

			.timeTab {
			@@ -276,6 +215,8 @@
			.warp {
			margin: 0 auto;
			overflow: hidden;
			width: 100%;
			height: calc(100% - 44px);
			}

			ul {
			@@ -334,4 +275,4 @@
			}
			}
			}
			</style>
			</style>

			@@ -2,18 +2,9 @@
			<div class="container">
			<div class="person-box">
			<div class="title">
			<i></i>
			<span
			class="peopleTap"
			:class="{ choosed: peopletype == 0 }"
			@click="peopleTabClick(0)"
			>现有人员</span>
			<span class="peopleTap" :class="{ choosed: peopletype == 0 }" @click="peopleTabClick(0)">现有人员</span>
			<span>/</span>
			<span
			class="peopleTap"
			:class="{ choosed: peopletype == 1 }"
			@click="peopleTabClick(1)"
			>重点人员</span>
			<span class="peopleTap" :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
			<span class="word before">共</span>
			<span class="peopleNum" :class="{ choosed: peopletype == 0 }">100</span>
			<span class="word">/</span>
			@@ -39,18 +30,13 @@
			<div id="PersonEcharts" class="echarts-box" v-show="peopletype == 0"></div>
			<div id="keyPersonEcharts" class="peopleTable" v-show="peopletype == 1"></div>

			<div
			class="back"
			title="返回上一级"
			v-show="dataDeep == 2 && peopletype == 0"
			@click="backBegin"
			>
			<div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin">
			<i class="el-icon-back"></i>
			</div>
			</div>
			<div class="house-box">
			<div class="title">
			<i></i> 现有房屋
			现有房屋
			</div>

			<div class="sub-tab">
			@@ -68,7 +54,7 @@
			</div>
			<div class="land-box">
			<div class="title">
			<i></i> 现有地
			现有地
			</div>
			<div class="sub-tab">
			<div class="tab" :class="{ on: tabTypeThree == 0 }" @click="landTabClick(0)">
			@@ -844,6 +830,19 @@
			display: flex;
			flex-direction: column;
			padding: 0 10px;

			.title::after {
			content: "";
			position: absolute;
			top: 6px;
			left: 0;
			width: 8px;
			height: 28px;
			border-radius: 4px;
			background: #43bafe;
			box-shadow: 0px 0px 8px 2px #43bafe;
			}

			.title {
			padding: 0 18px;
			position: relative;
			@@ -851,17 +850,6 @@
			height: 40px;
			line-height: 40px;
			font-size: 20px;

			i {
			position: absolute;
			top: 6px;
			left: 0;
			width: 8px;
			height: 28px;
			border-radius: 4px;
			background: #43bafe;
			box-shadow: 0px 0px 8px 2px #43bafe;
			}

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

			& > div {
			&>div {
			height: 26px;
			line-height: 26px;
			}
			@@ -901,7 +889,7 @@
			height: calc(100% - 104px);
			}

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

			@@ -2,18 +2,11 @@
			<div class="container">
			<div class="case-box">
			<div class="title">
			<i></i> 案件统计
			案件统计
			<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>

			@@ -21,30 +14,17 @@
			</div>
			<div class="alert-box">
			<div class="title">
			<i></i>

			<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>
			@@ -54,7 +34,7 @@
			</div>
			<div class="crowd-box">
			<div class="title">
			<i></i> 现有设备
			现有设备
			<span class="regionTotal">{{ regionTotal }}个</span>
			</div>
			<div id="EquipmentEcharts" class="echarts-box"></div>
			@@ -444,6 +424,18 @@
			flex-direction: column;
			padding: 0 10px;

			.title::after {
			content: "";
			position: absolute;
			top: 6px;
			left: 0;
			width: 8px;
			height: 28px;
			border-radius: 4px;
			background: #43bafe;
			box-shadow: 0px 0px 8px 2px #43bafe;
			}

			.title {
			padding: 0 18px;
			position: relative;
			@@ -451,17 +443,6 @@
			height: 40px;
			line-height: 40px;
			font-size: 20px;

			i {
			position: absolute;
			top: 6px;
			left: 0;
			width: 8px;
			height: 28px;
			border-radius: 4px;
			background: #43bafe;
			box-shadow: 0px 0px 8px 2px #43bafe;
			}

			.timer {
			width: 250px;
			@@ -508,7 +489,7 @@
			border: 1px solid rgba(20, 50, 123, 1);
			cursor: pointer;

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

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

			@@ -2,7 +2,7 @@
			* @Author: shuishen 1109946754@qq.com
			* @Date: 2022-08-18 16:18:17
			* @LastEditors: shuishen 1109946754@qq.com
			* @LastEditTime: 2022-10-26 09:02:31
			* @LastEditTime: 2022-11-03 15:19:45
			* @FilePath: \srs-police-affairs\src\views\home\index.vue
			* @Description: 小区-栋-层-房屋
			*
			@@ -11,24 +11,16 @@

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

			<div class="right-container">
			<right-container
			@showequimentdetail="showequimentdetail"
			@selectPoliceChangeEventData="selectPoliceChangeEventData"
			@changeActivityType="changeActivityType"
			@activityChange="activityChange"
			ref="rightContainer"
			></right-container>
			</div>
			<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>

			<div class="center-container">
			<div class="layers-control-btn house">
			@@ -54,285 +46,165 @@
			</div>
			</div>

			<div class="bottom-container">
			<bottom-container
			ref="bottomContainer"
			@changePoliceSituationType="changePoliceSituationType"
			@policeSituationChange="policeSituationChange"
			></bottom-container>
			</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"
			>
			<div
			style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
			>
			<video
			src="/video/sp.mp4"
			autoplay
			controls
			width="100%"
			height="100%"
			ref="videoElement"
			style="object-fit: fill"
			></video>
			</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>

			<el-dialog
			:title="panoramaTitle"
			:modal="true"
			:visible.sync="panoramaVisible"
			:before-close="panoramaBeforeClose"
			:close-on-click-modal="true"
			>
			<div
			style="display: flex; align-items: center; justify-content: center; width: 100%; height: 480px;"
			>
			<iframe
			src="http://vr.jxpskj.com/JXSFKZQJ/QJ/"
			style="width: 100%; height: 100%;"
			frameborder="0"
			></iframe>
			</div>
			<el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible"
			:before-close="panoramaBeforeClose" :close-on-click-modal="true">
			<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"
			>
			<div class="dialog-container">
			<div class="dialog-side">
			<div>
			<div>活动名称:</div>
			<div>{{activityDetailArr.activityName}}</div>
			</div>
			<div>
			<div>开始时间:</div>
			<div>{{activityDetailArr.startTime}}</div>
			</div>
			<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>
			<div>{{ activityDetailArr.activityName }}</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>结束时间:</div>
			<div>{{activityDetailArr.endTime}}</div>
			</div>
			<div>
			<div>规模:</div>
			<div>{{activityDetailArr.scale}}</div>
			</div>
			<div>
			<div>开始时间:</div>
			<div>{{ activityDetailArr.startTime }}</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>所属派出所:</div>
			<div>{{activityDetailArr.policeStationName}}</div>
			</div>
			<div>
			<div>坐标:</div>
			<div>{{activityDetailArr.position}}</div>
			</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>结束时间:</div>
			<div>{{ activityDetailArr.endTime }}</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>经度:</div>
			<div>{{activityDetailArr.lng}}</div>
			</div>
			<div>
			<div>纬度:</div>
			<div>{{activityDetailArr.lat}}</div>
			</div>
			<div>
			<div>规模:</div>
			<div>{{ activityDetailArr.scale }}</div>
			</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>所属派出所:</div>
			<div>{{ activityDetailArr.policeStationName }}</div>
			</div>
			<div>
			<div>坐标:</div>
			<div>{{ activityDetailArr.position }}</div>
			</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>经度:</div>
			<div>{{ activityDetailArr.lng }}</div>
			</div>
			<div>
			<div>纬度:</div>
			<div>{{ activityDetailArr.lat }}</div>
			</div>
			</div>
			</el-dialog>

			<el-dialog
			:title="phoneTitle"
			:modal="true"
			:visible.sync="phoneVisible"
			:before-close="phoneBeforeClose"
			:close-on-click-modal="true"
			class="phone-details-box"
			>
			<div class="dialog-container">
			<div class="dialog-side">
			<div>
			<div>责任人：</div>
			<div>{{phoneDetails.person}}</div>
			</div>
			<div>
			<div>联系方式：</div>
			<div>{{phoneDetails.phoneID}}</div>
			</div>
			<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>
			<div>{{ phoneDetails.person }}</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>手台类型：</div>
			<div>{{phoneDetails.phoneType}}</div>
			</div>
			<div>
			<div>所在地址：</div>
			<div>{{phoneDetails.location}}</div>
			</div>
			<div>
			<div>联系方式：</div>
			<div>{{ phoneDetails.phoneID }}</div>
			</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>手台类型：</div>
			<div>{{ phoneDetails.phoneType }}</div>
			</div>
			<div>
			<div>所在地址：</div>
			<div>{{ phoneDetails.location }}</div>
			</div>
			</div>
			</el-dialog>

			<el-dialog
			:title="peopleTitle"
			:modal="true"
			:visible.sync="peopleVisible"
			:before-close="peopleBeforeClose"
			:close-on-click-modal="true"
			class="area-details-box"
			>
			<div class="dialog-container">
			<div class="dialog-side">
			<div>
			<div>责任区负责人：</div>
			<div>王某某</div>
			</div>
			<div>
			<div>责任区人口：</div>
			<div>10000</div>
			</div>
			<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>
			<div>王某某</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>男女比例：</div>
			<div>0.92:1</div>
			</div>
			<div>
			<div>所在地址：</div>
			<div>XXXXXXX</div>
			</div>
			<div>
			<div>责任区人口：</div>
			<div>10000</div>
			</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>男女比例：</div>
			<div>0.92:1</div>
			</div>
			<div>
			<div>所在地址：</div>
			<div>XXXXXXX</div>
			</div>
			</div>
			</el-dialog>

			<el-dialog
			:title="equimentTitle"
			:modal="true"
			:visible.sync="equimentVisible"
			:before-close="equimentBeforeClose"
			:close-on-click-modal="true"
			class="equiment-details-box"
			>
			<div
			style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
			>
			<div class="equimentDetail">
			<div class="left">
			<el-tree
			:data="jurisdictionData"
			:props="defaultProps"
			@node-click="jurisdictionNodeClick"
			ref="tree"
			node-key="id"
			></el-tree>
			<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>
			</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>
			</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>
			</div>
			<div class="others" v-if="othersContent">
			<el-table
			:data="showArr.slice((currentPage-1)pagesize,currentPagepagesize)"
			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="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="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>
			</div>
			<div class="others" v-if="othersContent">
			<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">
			<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="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>
			</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%"
			:header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
			:cell-style="{'text-align':'center','borderColor':'#324e75', 'cursor':'pointer'}"
			>
			<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' }">
			<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>
			@@ -341,20 +213,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%"
			:header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
			:cell-style="{'text-align':'center','borderColor':'#324e75', 'cursor':'pointer'}"
			>
			<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' }">
			<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>
			@@ -365,69 +228,61 @@
			</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"
			>
			<div class="dialog-container">
			<div class="dialog-side">
			<div>
			<div>所属派出所:</div>
			<div>{{policeSituationDetailArr.policeName}}</div>
			</div>
			<div>
			<div>警情类别:</div>
			<div>{{policeSituationDetailArr.type}}</div>
			</div>
			<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>
			<div>{{ policeSituationDetailArr.policeName }}</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>警情状态:</div>
			<div>{{policeSituationDetailArr.state}}</div>
			</div>
			<div>
			<div>报警电话:</div>
			<div>{{policeSituationDetailArr.comingPhone}}</div>
			</div>
			<div>
			<div>警情类别:</div>
			<div>{{ policeSituationDetailArr.type }}</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>接警时间:</div>
			<div>{{policeSituationDetailArr.dealTime}}</div>
			</div>
			<div>
			<div>经办民警:</div>
			<div>{{policeSituationDetailArr.dealPolice}}</div>
			</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>警情状态:</div>
			<div>{{ policeSituationDetailArr.state }}</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>报警人:</div>
			<div>{{policeSituationDetailArr.callPeople}}</div>
			</div>
			<div>
			<div>报警人联系人:</div>
			<div>{{policeSituationDetailArr.callPhone}}</div>
			</div>
			<div>
			<div>报警电话:</div>
			<div>{{ policeSituationDetailArr.comingPhone }}</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>经度:</div>
			<div>{{policeSituationDetailArr.lng}}</div>
			</div>
			<div>
			<div>纬度:</div>
			<div>{{policeSituationDetailArr.lat}}</div>
			</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>接警时间:</div>
			<div>{{ policeSituationDetailArr.dealTime }}</div>
			</div>
			<div class="dialog-content">
			<div>报警内容:</div>
			<div>{{policeSituationDetailArr.callContent}}</div>
			<div>
			<div>经办民警:</div>
			<div>{{ policeSituationDetailArr.dealPolice }}</div>
			</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>报警人:</div>
			<div>{{ policeSituationDetailArr.callPeople }}</div>
			</div>
			<div>
			<div>报警人联系人:</div>
			<div>{{ policeSituationDetailArr.callPhone }}</div>
			</div>
			</div>
			<div class="dialog-side">
			<div>
			<div>经度:</div>
			<div>{{ policeSituationDetailArr.lng }}</div>
			</div>
			<div>
			<div>纬度:</div>
			<div>{{ policeSituationDetailArr.lat }}</div>
			</div>
			</div>
			<div class="dialog-content">
			<div>报警内容:</div>
			<div>{{ policeSituationDetailArr.callContent }}</div>
			</div>
			</el-dialog>
			</div>
			@@ -498,6 +353,36 @@
			}]
			}
			]

			let positionColor = [
			global.DC.Namespace.Cesium.Color.fromBytes(
			3,
			255,
			13,
			100
			),
			global.DC.Namespace.Cesium.Color.fromBytes(
			102, 176, 255,
			100
			),
			global.DC.Namespace.Cesium.Color.fromBytes(
			230, 162, 60,
			100
			),
			global.DC.Namespace.Cesium.Color.fromBytes(
			245, 108, 108,
			100
			),
			global.DC.Namespace.Cesium.Color.fromBytes(
			139, 195, 74,
			100
			),
			global.DC.Namespace.Cesium.Color.fromBytes(
			244, 67, 54,
			100
			)
			]

			let timer = []

			import axios from "axios"
			@@ -569,34 +454,7 @@
			areaOptions: [],
			housingOptions: [],
			JurisdictionData: [{ name: '全部' }],
			positionColor: [
			global.DC.Namespace.Cesium.Color.fromBytes(
			3,
			255,
			13,
			100
			),
			global.DC.Namespace.Cesium.Color.fromBytes(
			102, 176, 255,
			100
			),
			global.DC.Namespace.Cesium.Color.fromBytes(
			230, 162, 60,
			100
			),
			global.DC.Namespace.Cesium.Color.fromBytes(
			245, 108, 108,
			100
			),
			global.DC.Namespace.Cesium.Color.fromBytes(
			139, 195, 74,
			100
			),
			global.DC.Namespace.Cesium.Color.fromBytes(
			244, 67, 54,
			100
			),
			],

			jurisdictionData: [{
			label: '车站派出所',
			id: '2',
			@@ -678,6 +536,7 @@
			activityDetailArr: {},
			}
			},

			components: { leftContainer, rightContainer, bottomContainer },

			created () {
			@@ -1114,7 +973,7 @@
			this.$EventBus.$emit('layerPolygonAdd', {
			layerName: 'polygonLayer',
			positions: str,
			material: this.positionColor[index]
			material: positionColor[index]
			})
			const center = this.getCenter(item.position)
			this.$EventBus.$emit('layerPointAdd', {
			@@ -1141,7 +1000,7 @@
			this.$EventBus.$emit('layerPolygonAdd', {
			layerName: 'polygonLayer',
			positions: str,
			material: this.positionColor[index]
			material: positionColor[index]
			})
			const center = this.getCenter(item.position)
			this.$EventBus.$emit('layerPointAdd', {
			@@ -1170,7 +1029,7 @@
			this.$EventBus.$emit('layerPolygonAdd', {
			layerName: 'polygonLayer',
			positions: str,
			material: this.positionColor[index],
			material: positionColor[index],
			})
			const center = this.getCenter(item.position)
			// this.$EventBus.$emit('layerPointAdd', {
			@@ -1263,7 +1122,7 @@
			this.$EventBus.$emit('layerPolygonAdd', {
			layerName: 'polygonLayer',
			positions: str,
			material: this.positionColor[0]
			material: positionColor[0]
			})
			this.$EventBus.$emit('layerPointAdd', {
			layerName: 'polygonLayer',
			@@ -1576,6 +1435,7 @@
			height: calc(100% - 80px);
			background: $bg-color;
			}

			.center-container {
			display: flex;
			position: fixed;
			@@ -1681,6 +1541,7 @@
			}
			}
			}

			.policeSituation {
			:deep(.el-checkbox__inner) {
			background: rgb(228, 63, 63);
			@@ -1730,35 +1591,41 @@
			height: 100%;
			overflow: scroll;
			overflow-x: hidden !important;

			:deep(.el-tree) {
			background-color: transparent;
			color: #fff;
			}

			:deep(.el-tree-node__content:hover) {
			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;
			}

			:deep(.el-tree-node:focus > .el-tree-node__content) {
			background-color: #667a9d !important;
			color: #fff;
			}
			}

			.right {
			width: 70%;
			float: left;

			.monitor {
			width: 100%;
			height: 540px;
			background-color: #fff;
			}

			.others {
			width: 100%;
			height: 495px;
			background-color: red;

			.pages {
			background-color: #14327b;
			padding-bottom: 3px;

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

			<!-- 菜单导航 -->
			<div class="menu-list">
			<div class="nav-list" v-for="(item, index) in menuList" :key="index">
			<div
			class="nav"
			:class="{on: currentUrl == item.path}"
			@click="goToPath(item)"
			>{{item.menuName}}</div>
			<div class="nav-list" :class="{ on: currentUrl == item.path }" @click="goToPath(item)"
			v-for="(item, index) in menuList" :key="index">
			{{ item.menuName }}
			</div>
			</div>

			@@ -141,7 +138,8 @@
			// text-align: center;
			overflow: hidden;
			letter-spacing: 6px;
			& > img {

			&>img {
			// width: 100%;
			height: 80%;
			margin: 0 10px 0 10px;
			@@ -154,11 +152,17 @@
			display: flex;
			align-items: center;

			.nav {
			.nav-list.on {
			// color: rgba(32, 106, 181, 1);
			border-bottom: 3px solid #409eff;
			box-sizing: border-box;
			}

			.nav-list {
			padding: 0 16px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			justify-content: center;
			height: 60px;
			font-size: 32px;
			font-weight: 400;
			@@ -166,20 +170,9 @@
			border-bottom: 3px solid transparent;
			}

			.nav.on {
			// color: rgba(32, 106, 181, 1);
			border-bottom: 3px solid #409eff;
			box-sizing: border-box;
			}

			.nav:hover {
			// color: rgba(32, 106, 181, 1);
			// font-weight: bold;
			}
			}

			.user-infor {
			}
			.user-infor {}
			}

			.main-container {