1

guanqb

2022-12-28 61c7e0e749e4de2a2090a8c670c69a1eb4fe3a42

1

 src/App.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 15:58:10
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-10 09:13:07
 * @LastEditTime: 2022-12-28 08:56:50
 * @FilePath: \srs-police-affairs\src\App.vue
 * @Description: app.vue
 * 
@@ -14,10 +14,27 @@
    </div>
</template>

<script>
export default {
    data () {
        return {
            currentWidth: 0,
            currentHeight: 0,
        }
    },

    created () {
        if (window.screen.availWidth) {
            this.currentWidth = window.screen.availWidth + 'px'
            this.currentHeight = window.screen.availHeight + 'px'
        }
    }
}
</script>

<style lang="scss">
#app {
    width: 100%;
    height: 100%;

    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

 src/components/map/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-12-26 09:18:51
 * @LastEditTime: 2022-12-28 10:24:21
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -10,6 +10,8 @@
-->
<template>
    <div class="viewer-box" id="viewer-container">
        <slot ref="mainContent" name="mainContent"></slot>
        <slot name="showButton"></slot>
        <!-- 全屏控制按钮 -->
        <div class="screen-full-btn">
            <el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark">
@@ -382,8 +384,8 @@
    methods: {
        // 模型的点击事件
        tilesetClick (e) {
            if (this.$route.path != "/lyout/house") {
                this.$router.push({ path: '/lyout/house', query: { searchName: 'xxx小区' } })
            if (this.$route.path != "/layout/house") {
                this.$router.push({ path: '/layout/house', query: { searchName: 'xxx小区' } })
            }
        },
        switchImg () {

 src/router/page/index.js

@@ -9,7 +9,7 @@
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const lyout = () => import('../../views/lyout/index.vue')
const layout = () => import('../../views/layout/index.vue')
const home = () => import('../../views/home/index.vue')
const house = () => import('../../views/house/index.vue')
const police = () => import('../../views/police/index.vue')
@@ -31,15 +31,15 @@
    },
    {
        path: '/',
        redirect: '/lyout'
        redirect: '/layout'
    },
    {
        path: '/lyout',
        redirect: '/lyout/home',
        path: '/layout',
        redirect: '/layout/home',
        meta: {
            title: '导航菜单'
        },
        component: lyout,
        component: layout,
        children: [
            {
                path: 'home',

 src/styles/media/index.scss

@@ -61,8 +61,6 @@
                }

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

                    .home-page {

@@ -209,15 +207,6 @@
                                }

                            }

                            .house-box,
                            .alert-box {

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

                        .bottom-container {
@@ -287,17 +276,19 @@
                        }

                        .region-select {
                            top: countSizeVh(20);
                            top: countSizeVh(80);
                            width: countSizeVw(640, 1920);
                            height: countSizeVh(36);

                            .selects-container .selects-box .text {
                                font-size: countSizeVh(15);
                            }

                            .selects-container .select-options div {
                                height: countSizeVh(36);
                                line-height: countSizeVh(36);
                            }

                            .selects-container .issel{
                                height:countSizeVh(170)!important;
                            }
@@ -725,7 +716,10 @@
                                        }

                                    }
                                    &>.come-out-content,&>.park-content,&>.business-content{

                                    &>.come-out-content,
                                    &>.park-content,
                                    &>.business-content {
                                        .el-table__header-wrapper {
                                            height: countSizeVh(48);
        
@@ -734,9 +728,11 @@
                                                width: countSizeVw(400,1920)!important;
                                            }
                                        }

                                        .el-table__body{
                                            width: countSizeVw(400,1920)!important;
                                        }

                                        .el-table .el-table__cell {
                                            padding: 0;
                                        }
@@ -760,7 +756,8 @@
                                    }
                                }

                                .police-info ,.warning-info{
                                .police-info,
                                .warning-info {
                                    .tableClass {
                                        width: countSizeVw(600, 1920);
                                        height: countSizeVh(400);
@@ -770,6 +767,7 @@
                                    .tableClass td {
                                        width: countSizeVw(200, 1920);
                                    }

                                    .el-table__header-wrapper {
                                        height: countSizeVh(48);
    
@@ -778,9 +776,11 @@
                                            width: countSizeVw(400,1920)!important;
                                        }
                                    }

                                    .el-table__body{
                                        width: countSizeVw(400,1920)!important;
                                    }

                                    .el-table .el-table__cell {
                                        padding: 0;
                                    }
@@ -1517,23 +1517,27 @@
                                .category {
                                    width: countSizeVw(96, 1920);
                                }

                                .el-switch{
                                    font-size: countSizeVh(14);
                                    height: countSizeVh(12);
                                    line-height: countSizeVh(12);
                                }

                                .el-switch__core{
                                    height: countSizeVw(14, 1920);
                                    width: countSizeVw(30, 1920)!important;
                                    border-radius: countSizeVw(10, 1920);
                                    border: countSizeVh(1) solid #DCDFE6;
                                }

                                .el-switch__core:after{
                                    top: countSizeVh(1) ;
                                    left: countSizeVh(1) ;
                                    width: countSizeVw(12, 1920);
                                    height: countSizeVw(12, 1920);
                                }

                                .el-switch.is-checked .el-switch__core::after{
                                    margin-left:countSizeVw(18, 1920)!important;
                                }
@@ -1605,13 +1609,16 @@
                            font-size: countSizeVh(16);
                        }
                     }

                     .resident-details-box {
                        .el-dialog {
                         width: countSizeVw(320, 1920);
                        }

                        .el-dialog__header span{
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body{
                            font-size: countSizeVh(16);
                        }
@@ -1621,234 +1628,291 @@
                            right:  countSizeVw(10, 1920);
                        }
                     }

                      .panorama-details-box{
                        .el-dialog {
                           width: countSizeVw(960, 1920);
                           height: countSizeVh(600);
                        }

                        .el-dialog__header span{
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body{
                            font-size: countSizeVh(16);
                        }

                        .el-dialog__header button{
                            font-size: countSizeVh(18);
                            right:  countSizeVw(10, 1920);
                        }
                      } 

                      .phone-details-box{
                        .el-dialog {
                            width: countSizeVw(720, 1920);
                            height: countSizeVh(400);
                            font-size: countSizeVh(16);
                        }

                        .el-dialog__header span{
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body{
                            font-size: countSizeVh(16);
                        }

                        .el-dialog__header button{
                            font-size: countSizeVh(18);
                            right:  countSizeVw(10, 1920);
                        }

                        .el-dialog .el-dialog__header {
                            height: countSizeVh(56);
                            line-height: countSizeVh(56);
                        }

                        .el-dialog .el-dialog__body .item {
                            width: calc(50% - countSizeVw(20, 1920));
                            height: countSizeVh(36);
                            line-height: countSizeVh(36);
                            margin: 0 countSizeVw(10, 1920);
                        }

                        .el-dialog .el-dialog__body .item > div:first-child {
                            width: countSizeVw(100, 1920);
                            margin-right: countSizeVw(20, 1920);
                        }

                        .el-dialog .el-dialog__body .item > div:nth-of-type(2) {
                            width: calc(100% - countSizeVw(120, 1920));
                        }
                      }

                      .area-details-box{
                        .el-dialog__header span{
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body{
                            font-size: countSizeVh(16);
                        }

                        .el-dialog__header button{
                            font-size: countSizeVh(18);
                            right:  countSizeVw(10, 1920);
                        }

                        .el-dialog {
                            width: countSizeVw(700, 1920);
                            height: countSizeVh(400);
                        }

                        .el-dialog .el-dialog__header {
                            height: countSizeVh(56);
                            line-height: countSizeVh(56);
                        }    

                        .el-dialog .el-dialog__body .item {
                            width: calc(50% - countSizeVw(20, 1920));
                            height: countSizeVh(36);
                            line-height: countSizeVh(36);
                            margin: 0 countSizeVw(10, 1920);
                        }

                        .el-dialog .el-dialog__body .item > div:first-child {
                            width: countSizeVw(100, 1920);
                            margin-right: countSizeVw(20, 1920);
                        }

                        .el-dialog .el-dialog__body .item > div:nth-of-type(2) {
                            width: calc(100% - countSizeVw(120, 1920));
                        }
                      } 

                      .equiment-details-box {
                        .el-dialog__header span{
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body{
                            font-size: countSizeVh(16);
                        }

                        .el-dialog__header button{
                            font-size: countSizeVh(18);
                            right:  countSizeVw(10, 1920);
                        }

                        .el-dialog {
                           width: countSizeVw(1000, 1920);
                           height: countSizeVh(600);
                      }
                      }

                      .land-details-box {
                        .el-dialog__header span{
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body{
                            font-size: countSizeVh(16);
                        }

                        .el-dialog__header button{
                            font-size: countSizeVh(18);
                            right:  countSizeVw(10, 1920);
                        }

                        .el-dialog {
                           width: countSizeVw(630, 1920);
                           height: countSizeVh(300);
                      }
                      }

                      .keyPerson-details-box {
                        .el-dialog__header span{
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body{
                            font-size: countSizeVh(16);
                        }

                        .el-dialog__header button{
                            font-size: countSizeVh(18);
                            right:  countSizeVw(10, 1920);
                        }

                        .el-dialog {
                           width: countSizeVw(1000, 1920);
                           height: countSizeVh(700);
                      }
                      }

                      .policeSituation-details-box {
                        .el-dialog__header span{
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body{
                            font-size: countSizeVh(16);
                        }

                        .el-dialog__header button{
                            font-size: countSizeVh(18);
                            right:  countSizeVw(10, 1920);
                        }

                        .el-dialog {
                           width: countSizeVw(800, 1920);
                           height: countSizeVh(500);
                        }

                        .el-dialog .el-dialog__header {
                           height: countSizeVh(56);
                           line-height: countSizeVh(56);
                        }

                        .el-dialog .el-dialog__body .item {
                           width: calc(50% - countSizeVw(20, 1920));
                           height: countSizeVh(36);
                           line-height: countSizeVh(36);
                           margin: 0 countSizeVw(10, 1920);
                        }

                        .el-dialog .el-dialog__body .item > div:first-child {
                           width: countSizeVw(100, 1920);
                           margin-right: countSizeVw(20, 1920);
                        }

                        .el-dialog .el-dialog__body .item > div:nth-of-type(2) {
                           width: calc(100% - countSizeVw(120, 1920));
                        }

                        .el-dialog .el-dialog__body .dialog-content {
                           height: countSizeVh(36);
                           line-height: countSizeVh(36);
                           margin-left: countSizeVw(10, 1920);
                        }

                        .el-dialog .el-dialog__body .dialog-content > div:first-child {
                           width: countSizeVw(100, 1920);
                           margin-right: countSizeVw(20, 1920);
                        }

                        .el-dialog .el-dialog__body .dialog-content > div:nth-of-type(2) {
                           width: calc(100% - countSizeVw(120, 1920));
                        }
                      }

                      .activity-details-box {
                        .el-dialog__header span{
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body{
                            font-size: countSizeVh(16);
                        }

                        .el-dialog__header button{
                            font-size: countSizeVh(18);
                            right:  countSizeVw(10, 1920);
                        }

                        .el-dialog {
                            width: countSizeVw(640, 1920);
                            height: countSizeVh(400);
                        }

                        .el-dialog .el-dialog__header {
                            height: countSizeVh(56);
                            line-height: countSizeVh(56);
                        }

                        .el-dialog .el-dialog__body .item {
                            width: calc(50% - countSizeVw(20, 1920));
                            height: countSizeVh(36);
                            line-height: countSizeVh(36);
                            margin: 0 countSizeVw(10, 1920);
                        }

                        .el-dialog .el-dialog__body .item > div:first-child {
                            margin-right: countSizeVw(20, 1920);
                        }

                        .el-dialog .el-dialog__body .item > div:nth-of-type(2) {
                            width: calc(100% - countSizeVw(120, 1920));
                        }
                      }

                      .video-draw-box {
                        .el-dialog__header span{
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body{
                            font-size: countSizeVh(16);
                        }

                        .el-dialog__header button{
                            font-size: countSizeVh(18);
                            right:  countSizeVw(10, 1920);
                        }

                        .el-dialog {
                            width: countSizeVw(320, 1920);
                            height: countSizeVh(180);
                        }

                        .el-dialog .el-dialog__body input {
                            height: countSizeVh(30);
                            font-size: countSizeVh(16);
                            border: countSizeVh(1) solid #005ca9;
                        }

                        .el-dialog .el-dialog__body button {
                            width: countSizeVw(60, 1920);
                            height: countSizeVh(30);
@@ -1856,13 +1920,16 @@
                            margin-top: countSizeVh(10);
                        }
                      }

                      .choose-police-box {
                        .el-dialog__header span{
                            font-size: countSizeVh(18);
                        }

                        .el-dialog .el-dialog__body{
                            font-size: countSizeVh(16);
                        }

                        .el-dialog__header button{
                            font-size: countSizeVh(18);
                            right:  countSizeVw(10, 1920);
@@ -2024,7 +2091,11 @@
                }

                .main-content.spread {
                    position: absolute;
                    top: countSizeVh(60);
                    width: countSizeVw(400, 1920);
                    height: calc(100% - countSizeVh(60));
                    z-index: 99;
                }

                .flexible-btn {
@@ -2326,8 +2397,6 @@
                }

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

                    .left-container,
                    .right-container {
@@ -2372,14 +2441,6 @@
                                }
                            }
                        }

                        .house-box {

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

                    .bottom-container {
@@ -2389,7 +2450,7 @@
                    }

                    .region-select {
                        top: maxCountSizeVh(20);
                        top: maxCountSizeVh(80);
                    }
                }
            }

 src/views/activity/index.vue

@@ -475,7 +475,7 @@
    mounted () {


        this.$parent.resize('400px', true)
        this.$parent.$parent.resize('400px', true)

        this.$nextTick(() => {
            if (analyseLayer == null) {
@@ -1073,7 +1073,7 @@
        this.removeAll()
        tc.clear()

        this.$parent.resize('0px')
        this.$parent.$parent.resize('0px')
    }
}
</script>

 src/views/home/components/leftContainer.vue

@@ -13,38 +13,21 @@
                </div>
            </div>
            <div class="sub-tab" v-show="peopletype == 0">
                <div
                    class="tab3"
                    :class="{ 'select-on-tab': tabType == 0 }"
                    @click="personTabClick(0)"
                >
                <div class="tab3" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                    <div class="num">164.57万人</div>
                    <div class="type">户籍人口</div>
                </div>
                <div
                    class="tab3"
                    :class="{ 'select-on-tab': tabType == 1 }"
                    @click="personTabClick(1)"
                >
                <div class="tab3" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                    <div class="num">17.52万人</div>
                    <div class="type">流动人口</div>
                </div>
                <div
                    class="tab3"
                    :class="{ 'select-on-tab': tabType == 2 }"
                    @click="personTabClick(2)"
                >
                <div class="tab3" :class="{ 'select-on-tab': tabType == 2 }" @click="personTabClick(2)">
                    <div class="num">91995人</div>
                    <div class="type">境外人口</div>
                </div>
            </div>
            <div id="PersonEcharts" class="echarts-box"></div>
            <div
                class="back"
                title="返回上一级"
                v-show="dataDeep == 2 && peopletype == 0"
                @click="backBegin"
            ></div>
            <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>

            <!-- <svg viewBox="0 0 384 329" width="100%" height="100%" style="position: absolute; top: 0; left: 0;">
                <defs>
@@ -65,19 +48,11 @@
        <div class="house-box" style="position: relative;">
            <div class="title">现有房屋</div>
            <div class="sub-tab">
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeTwo == 0 }"
                    @click="houseTabClick(0)"
                >
                <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 0 }" @click="houseTabClick(0)">
                    <div class="tab-title-small">实有房屋:</div>
                    <div class="tab-title-small">182万户</div>
                </div>
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeTwo == 1 }"
                    @click="houseTabClick(1)"
                >
                <div class="tab" :class="{ 'select-on-tab': tabTypeTwo == 1 }" @click="houseTabClick(1)">
                    <div class="tab-title-small">关注场所:</div>
                    <div class="tab-title-small">634个</div>
                </div>
@@ -95,19 +70,11 @@
        <div class="land-box" style="position: relative;">
            <div class="title">现有地</div>
            <div class="sub-tab">
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeThree == 0 }"
                    @click="landTabClick(0)"
                >
                <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 0 }" @click="landTabClick(0)">
                    <div class="tab-title-small">小区:</div>
                    <div class="tab-title-small">634个</div>
                </div>
                <div
                    class="tab"
                    :class="{ 'select-on-tab': tabTypeThree == 1 }"
                    @click="landTabClick(1)"
                >
                <div class="tab" :class="{ 'select-on-tab': tabTypeThree == 1 }" @click="landTabClick(1)">
                    <div class="tab-title-small">责任区:</div>
                    <div class="tab-title-small">634个</div>
                </div>

 src/views/home/components/rightContainer.vue

@@ -195,11 +195,12 @@
                    trigger: 'item',
                    confine: true,
                    formatter: function (params) {
                        console.log(params, 555)
                        let tipHtml = ``
                        if ('carCount' in params.data) {
                            tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><br /><strong style="margin-left:10px;color:#5c7bd9">占比：${params.percent}%</strong><br /><span style="color:#5470c6">警车：${params.data.carCount}台</span><br /><span style="margin-left:10px;color:#91cc75">监控：${params.data.monitorCount}台</span><br /><span style="color:#fac858">手台：${params.data.phoneCount}台</span><br /><span style="margin-left:10px;color:#ee6666">手持记录仪：${params.data.recorderCount}台</span>`
                            tipHtml = `${params.marker} <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong><br /><strong style="margin-left:10px;color:#5c7bd9">占比：${params.percent}%</strong><br /><span style="color:#5470c6">警车：${params.data.carCount}台</span><br /><span style="margin-left:10px;color:#91cc75">监控：${params.data.monitorCount}台</span><br /><span style="color:#fac858">手台：${params.data.phoneCount}台</span><br /><span style="margin-left:10px;color:#ee6666">手持记录仪：${params.data.recorderCount}台</span>`
                        } else {
                            tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><br /><span style="color:#4caf50">正常：${params.data.working}台</span><br /><span style="color:#2979ff">故障：${params.data.fault}台</span><br /><span style="margin-left:10px;color:#5c7bd9">设备故障率：${Math.floor(params.data.fault / (params.data.working + params.data.fault) * 100)}%</span><br />`
                            tipHtml = `${params.marker} <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong><br /><span style="color:#4caf50">正常：${params.data.working}台</span><br /><span style="color:#2979ff">故障：${params.data.fault}台</span><br /><span style="margin-left:10px;color:#5c7bd9">设备故障率：${Math.floor(params.data.fault / (params.data.working + params.data.fault) * 100)}%</span><br />`
                        }
                        return tipHtml
                    },
@@ -212,8 +213,8 @@
                graphic: {
                    type: "text",
                    // left: "36.5%",
                    left: "40%",
                    top: "48%",
                    top: "40%",
                    left: "center",
                    style: {
                        text: "设备总数",
                        textAlign: "center",
@@ -224,8 +225,8 @@
                },
                title: {
                    text: `${this.regionTotal}`,
                    left: "42%",
                    top: "56%",
                    top: "52%",
                    left: "center",
                    textStyle: {
                        color: "#27D9C8",
                        fontSize: fontSize(20),
@@ -237,8 +238,9 @@
                    {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['47%', '57%'],
                        radius: ['90%', '136%'],
                        top: 'middle',
                        left: 'center',
                        data: dataArr,
                        avoidLabelOverlap: false,
                        labelLine: {
@@ -282,13 +284,7 @@
                            }
                        }
                    }
                ],
                grid: {
                    x: 10,
                    y: 10,
                    x2: 10,
                    y2: 20
                },
                ]
            }
        },


 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-12-13 15:10:42
 * @LastEditTime: 2022-12-28 10:26:55
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -702,7 +702,7 @@
        },

        houseSiteClick (e) {
            this.$router.push({ path: '/lyout/house', query: { searchName: 'xxx小区' } })
            this.$router.push({ path: '/layout/house', query: { searchName: 'xxx小区' } })
        },

        carChange (e) {
@@ -1518,7 +1518,7 @@
    .left-container {
        display: flex;
        flex-direction: column;
        position: fixed;
        position: absolute;
        top: 60px;
        left: 0;
        width: 400px;
@@ -1529,7 +1529,7 @@
    .right-container {
        display: flex;
        flex-direction: column;
        position: fixed;
        position: absolute;
        top: 60px;
        right: 0;
        width: 400px;
@@ -1540,7 +1540,7 @@

    .center-container {
        display: flex;
        position: fixed;
        position: absolute;
        left: 50%;
        bottom: 318px;
        transform: translate(-50%, 0);
@@ -1661,7 +1661,7 @@
    }

    .bottom-container {
        position: fixed;
        position: absolute;
        left: 400px;
        bottom: 8px;
        height: 300px;
@@ -1673,7 +1673,7 @@
    .region-select {
        display: flex;
        position: absolute;
        top: 20px;
        top: 80px;
        width: 640px;
        height: 36px;
        z-index: 99;

 src/views/house/index.vue

@@ -597,7 +597,7 @@
        // this.getUnitbuild('6E513C5E5D1611EAB6183C15FB00027B', '361102')
    },
    mounted () {
        this.$parent.resize('400px', true)
        this.$parent.$parent.resize('400px', true)

        this.$nextTick(() => {
            this.searchHouse = this.$route.query.searchName
@@ -867,7 +867,7 @@
        //     titlesetName: 'sdTilesetLayer'
        // })

        this.$parent.resize('0px')
        this.$parent.$parent.resize('0px')
    }
}
</script>

 src/views/layout/index.vue

File was renamed from src/views/lyout/index.vue
@@ -2,8 +2,8 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-12-27 09:33:59
 * @FilePath: \srs-police-affairs\src\views\lyout\index.vue
 * @LastEditTime: 2022-12-28 10:08:37
 * @FilePath: \srs-police-affairs\src\views\layout\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
@@ -17,9 +17,7 @@
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                            {{
        subItem.menuName
}}
                            {{ subItem.menuName }}
                        </div>
                    </div>
                </div>
@@ -36,9 +34,7 @@
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                            {{
        subItem.menuName
}}
                            {{ subItem.menuName }}
                        </div>
                    </div>
                </div>
@@ -76,18 +72,18 @@

        <div class="main-container">
            <!-- 地图区域 -->
            <mapBox ref="modalForm" />

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

            <el-button v-show="leftShow" class="flexible-btn"
                <el-button slot="showButton" v-show="leftShow" class="flexible-btn"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
                @click="flexibelClick"></el-button>
            </map-box>
        </div>
    </div>
</template>
@@ -100,37 +96,37 @@
            menuLeftList: [
                {
                    menuName: '首页',
                    path: '/lyout/home'
                    path: '/layout/home'
                },
                {
                    menuName: '社区感知',
                    path: '/lyout/house'
                    path: '/layout/house'
                },
                {
                    menuName: '警力资源',
                    path: '/lyout/police'
                    path: '/layout/police'

                }
            ],
            menuRightList: [
                {
                    menuName: '视频监控',
                    path: '/lyout/video',
                    path: '/layout/video',
                    childrenFlag: false,
                    children: [
                        {
                            menuName: '列表查询',
                            path: '/lyout/video/list'
                            path: '/layout/video/list'
                        },
                        {
                            menuName: '空间查询',
                            path: '/lyout/video/region'
                            path: '/layout/video/region'
                        }
                    ]
                },
                {
                    menuName: '安保活动',
                    path: '/lyout/activity'
                    path: '/layout/activity'
                },
                {
                    menuName: '运维管理',
@@ -145,7 +141,7 @@

            boxWidth: 0,

            currentUrl: '/lyout/home',
            currentUrl: '/layout/home',
            userOn: false,
            isShowUserDetail: false,
            user: {}
@@ -154,7 +150,7 @@

    created () {
        this.currentUrl = this.$route.path
        this.init();
        this.init()
    },

    watch: {
@@ -169,7 +165,7 @@
                    document.querySelector('.image-switch-img-btn').classList.remove('shrink-btn')
                })

                if (this.currentUrl == '/lyout/home') {
                if (this.currentUrl == '/layout/home') {
                    this.leftShow = false
                } else {
                    this.leftShow = true
@@ -184,7 +180,7 @@

    methods: {
        init(){
            this.user = this.$store.state.user.userInfo;
            this.user = this.$store.state.user.userInfo
        },
        //登出
        goTOLogout () {
@@ -514,12 +510,6 @@
        position: relative;
        width: 100%;
        height: 100%;

        .main-content {
            position: absolute;
            top: 60px;
            height: calc(100% - 60px);
        }

        .main-content.spread {
            width: 400px;

 src/views/login/index.vue

@@ -126,14 +126,14 @@
                        lock: true,
                        text: '登录中,请稍后。。。',
                        spinner: "el-icon-loading"
                    });
                    })
                    this.$store.dispatch("LoginByUsername", this.loginForm).then((res) => {
                        //跳转首页
                        this.$router.push({ path: "/lyout/home" });
                        loading.close();
                        this.$router.push({ path: "/layout/home" })
                        loading.close()
                    }).catch(() => {
                        loading.close();
                    });
                        loading.close()
                    })
                }
            })
        }
@@ -142,8 +142,6 @@
</script>

<style scoped lang="scss">


.login-btn{
    background-color: #409EFF;
    border-radius: 2px;

 src/views/police/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-12-15 10:33:21
 * @LastEditTime: 2022-12-28 10:21:32
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @Description: 辖区管理
 * 
@@ -13,48 +13,28 @@
    <div class="police-page container">
        <div v-show="boxShow" class="container-content">
            <div class="switch-box">
                <el-select
                    v-model="typeValue"
                    @change="navClick"
                    placeholder="请选择"
                    class="type-select-css"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        class="option-css"
                    ></el-option>
                <el-select v-model="typeValue" @change="navClick" placeholder="请选择" class="type-select-css">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                        class="option-css"></el-option>
                </el-select>
            </div>

            <div class="list-show" ref="tableBox" v-show="!detailFlag">
                <div class="search-box" ref="tableSearchBox">
                    <input
                        v-model="searchValue"
                        @input="searchChange"
                        type="text"
                        placeholder="请输入搜索条件"
                    />
                    <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                    <button @click="searchClick" class="el-icon-search"></button>
                </div>

                <div v-show="searchValBoxShow" class="search-val-box">
                    <div
                        @click="searchVlaClick(item)"
                        v-for="(item, index) in searchArray"
                        :key="index"
                    >{{ item.name }}</div>
                    <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                    </div>
                </div>

                <div class="list" v-show="navType == 1">
                    <el-table
                        :data="carList"
                    <el-table :data="carList"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight"
                    >
                        :height="currentTableHeight">
                        <el-table-column prop="serialNumber" label="编号" min-width="25%"></el-table-column>
                        <el-table-column prop="carType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="status" label="状态" min-width="25%">
@@ -65,20 +45,10 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -86,25 +56,18 @@
                    </el-table>

                    <div class="pages">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :page-size="pagesize"
                            :page-count="carPagesCount"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <el-pagination background layout="prev, pager, next" :page-size="pagesize"
                            :page-count="carPagesCount" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>

                <div class="list" v-show="navType == 2">
                    <el-table
                        :data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table :data="phoneList.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', 'cursor': 'pointer' }"
                        :height="currentTableHeight"
                    >
                        :height="currentTableHeight">
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="25%">
@@ -115,20 +78,10 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -136,26 +89,18 @@
                    </el-table>

                    <div class="pages">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="phoneList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <el-pagination background layout="prev, pager, next" :total="phoneList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>

                <div class="list" v-show="navType == 3">
                    <el-table
                        :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table :data="dtList.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', 'cursor': 'pointer' }"
                        :height="currentTableHeight"
                    >
                        :height="currentTableHeight">
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="dtType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="25%">
@@ -166,20 +111,10 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -187,26 +122,18 @@
                    </el-table>

                    <div class="pages">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="dtList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <el-pagination background layout="prev, pager, next" :total="dtList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>

                <div class="list" v-show="navType == 4">
                    <el-table
                        :data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table :data="zfList.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', 'cursor': 'pointer' }"
                        :height="currentTableHeight"
                    >
                        :height="currentTableHeight">
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column label="状态" min-width="25%">
@@ -217,20 +144,10 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button
                                    @click="rowClick(scope.row)"
                                    type="text"
                                    size="small"
                                    title="定位"
                                >
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -238,15 +155,9 @@
                    </el-table>

                    <div class="pages">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="zfList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <el-pagination background layout="prev, pager, next" :total="zfList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>
            </div>
@@ -277,15 +188,9 @@
                    <li>
                        <div>选择时间：</div>
                        <div class="datetime">
                            <el-date-picker
                                v-model="trackTime"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                size="mini"
                                :editable="false"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                            <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" size="mini" :editable="false"
                                end-placeholder="结束日期"></el-date-picker>
                        </div>
                    </li>

@@ -318,15 +223,9 @@
                    <li>
                        <div>选择时间：</div>
                        <div class="datetime">
                            <el-date-picker
                                v-model="trackTime"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                size="mini"
                                :editable="false"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                            <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" size="mini" :editable="false"
                                end-placeholder="结束日期"></el-date-picker>
                        </div>
                    </li>

@@ -337,33 +236,14 @@
            </div>
        </div>

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

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

    },
    mounted () {
        this.$parent.resize('400px', true)
        this.$parent.$parent.resize('400px', true)

        this.navClick(1)

@@ -809,7 +689,7 @@

        window.removeEventListener('resize', this.setTableHeight)

        this.$parent.resize('0px')
        this.$parent.$parent.resize('0px')
    }
}
</script>

 src/views/video/list.vue

@@ -149,7 +149,7 @@
    },

    mounted () {
        this.$parent.$parent.resize('400px', true)
        this.$parent.$parent.$parent.resize('400px', true)
        graphicLayer = new EntityDraw()
    },

@@ -440,7 +440,7 @@

        graphicLayer.destroy()

        this.$parent.$parent.resize('0px')
        this.$parent.$parent.$parent.resize('0px')

        if (this.flvPlayer != null) {
            this.flvPlayer.pause()

 src/views/video/region.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-12-01 15:43:56
 * @LastEditTime: 2022-12-28 10:22:01
 * @FilePath: \srs-police-affairs\src\views\video\region.vue
 * @Description: 辖区管理
 * 
@@ -14,33 +14,22 @@
        <div class="region-left-container">
            <div v-show="boxShow" class="container-content">
                <div class="search-box">
                    <input
                        v-model="searchValue"
                        @input="searchChange"
                        type="text"
                        placeholder="请输入搜索条件"
                    />
                    <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                    <button @click="searchClick" class="el-icon-search"></button>
                </div>

                <div v-show="true" class="search-val-box">
                    <div
                        @click="searchVlaClick(item)"
                        v-for="(item, index) in searchArray"
                        :key="index"
                    >{{ item.name }}</div>
                    <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                    </div>
                </div>

                <div class="list-show">
                    <div class="car-list">
                        <div class="list-box">
                            <el-table
                                :data="saveRangeList"
                                style="width: 100%"
                            <el-table :data="saveRangeList" style="width: 100%"
                                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                                @cell-click="rowClick"
                            >
                                @cell-click="rowClick">
                                <el-table-column prop="name" label="范围名称" min-width="50%"></el-table-column>
                                <el-table-column prop="type" label="范围类型" min-width="50%">
                                    <template slot-scope="scope">
@@ -50,20 +39,11 @@
                                </el-table-column>
                                <el-table-column prop="id" label="操作" min-width="50%">
                                    <template slot-scope="scope">
                                        <el-button
                                            @click="flytoRange(scope.row)"
                                            type="text"
                                            size="small"
                                            title="定位"
                                        >
                                        <el-button @click="flytoRange(scope.row)" type="text" size="small" title="定位">
                                            <i class="el-icon-location"></i>
                                        </el-button>
                                        <el-button
                                            @click="deleteRegionSaveList(scope.row.id)"
                                            type="text"
                                            size="small"
                                            title="删除"
                                        >
                                        <el-button @click="deleteRegionSaveList(scope.row.id)" type="text" size="small"
                                            title="删除">
                                            <i class="el-icon-delete"></i>
                                        </el-button>
                                    </template>
@@ -71,14 +51,9 @@
                            </el-table>
                        </div>
                        <div class="pages">
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                :page-size="pagesize"
                                :page-count="pagesCount"
                                :current-page="currentPage"
                                @current-change="handleCurrentChange"
                            ></el-pagination>
                            <el-pagination background layout="prev, pager, next" :page-size="pagesize"
                                :page-count="pagesCount" :current-page="currentPage"
                                @current-change="handleCurrentChange"></el-pagination>
                        </div>
                    </div>
                </div>
@@ -86,247 +61,104 @@
        </div>
        <div class="item video1" v-show="isShowVideo1">
            <div class="select" v-show="isShowSelect.video1" @mouseenter="enterSelectBox(1)">
                <el-select
                    size="small"
                    v-model="monitorType1"
                    @change="((val)=>{navClick(val,1)})"
                    placeholder="请选择"
                    ref="videoSelect1"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                <el-select size="small" v-model="monitorType1" @change="((val) => { navClick(val, 1) })" placeholder="请选择"
                    ref="videoSelect1">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(1)" @mouseleave="leaveVideoBox(1)">
                <video
                    id="videoElement1"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
                <video id="videoElement1" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
        </div>
        <div class="item video2" v-show="isShowVideo2">
            <div class="select" v-show="isShowSelect.video2" @mouseenter="enterSelectBox(2)">
                <el-select
                    size="small"
                    v-model="monitorType2"
                    @change="((val)=>{navClick(val,2)})"
                    placeholder="请选择"
                    ref="videoSelect2"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                <el-select size="small" v-model="monitorType2" @change="((val) => { navClick(val, 2) })" placeholder="请选择"
                    ref="videoSelect2">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(2)" @mouseleave="leaveVideoBox(2)">
                <video
                    id="videoElement2"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
                <video id="videoElement2" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
        </div>
        <div class="item video3" v-show="isShowVideo3">
            <div class="select" v-show="isShowSelect.video3" @mouseenter="enterSelectBox(3)">
                <el-select
                    size="small"
                    v-model="monitorType3"
                    @change="((val)=>{navClick(val,3)})"
                    placeholder="请选择"
                    ref="videoSelect3"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                <el-select size="small" v-model="monitorType3" @change="((val) => { navClick(val, 3) })" placeholder="请选择"
                    ref="videoSelect3">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(3)" @mouseleave="leaveVideoBox(3)">
                <video
                    id="videoElement3"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
                <video id="videoElement3" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
        </div>
        <div class="item video4" v-show="isShowVideo4">
            <div class="select" v-show="isShowSelect.video4" @mouseenter="enterSelectBox(4)">
                <el-select
                    size="small"
                    v-model="monitorType4"
                    @change="((val)=>{navClick(val,4)})"
                    placeholder="请选择"
                    ref="videoSelect4"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                <el-select size="small" v-model="monitorType4" @change="((val) => { navClick(val, 4) })" placeholder="请选择"
                    ref="videoSelect4">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(4)" @mouseleave="leaveVideoBox(4)">
                <video
                    id="videoElement4"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
                <video id="videoElement4" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
        </div>
        <div class="item video5" v-show="isShowVideo5">
            <div class="select" v-show="isShowSelect.video5" @mouseenter="enterSelectBox(5)">
                <el-select
                    size="small"
                    v-model="monitorType5"
                    @change="((val)=>{navClick(val,5)})"
                    placeholder="请选择"
                    ref="videoSelect5"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                <el-select size="small" v-model="monitorType5" @change="((val) => { navClick(val, 5) })" placeholder="请选择"
                    ref="videoSelect5">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(5)" @mouseleave="leaveVideoBox(5)">
                <video
                    id="videoElement5"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
                <video id="videoElement5" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
        </div>
        <div class="item video6" v-show="isShowVideo6">
            <div class="select" v-show="isShowSelect.video6" @mouseenter="enterSelectBox(6)">
                <el-select
                    size="small"
                    v-model="monitorType6"
                    @change="((val)=>{navClick(val,6)})"
                    placeholder="请选择"
                    ref="videoSelect6"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                <el-select size="small" v-model="monitorType6" @change="((val) => { navClick(val, 6) })" placeholder="请选择"
                    ref="videoSelect6">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(6)" @mouseleave="leaveVideoBox(6)">
                <video
                    id="videoElement6"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
                <video id="videoElement6" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
        </div>
        <div class="item video7" v-show="isShowVideo7">
            <div class="select" v-show="isShowSelect.video7" @mouseenter="enterSelectBox(7)">
                <el-select
                    size="small"
                    v-model="monitorType7"
                    v-show="isShowSelect.video7"
                    @change="((val)=>{navClick(val,7)})"
                    placeholder="请选择"
                    ref="videoSelect7"
                >
                    <el-option
                        v-show="isShowSelect.video7"
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                <el-select size="small" v-model="monitorType7" v-show="isShowSelect.video7"
                    @change="((val) => { navClick(val, 7) })" placeholder="请选择" ref="videoSelect7">
                    <el-option v-show="isShowSelect.video7" v-for="item in monitorOption" :key="item.value"
                        :label="item.label" :value="item.value"></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(7)" @mouseleave="leaveVideoBox(7)">
                <video
                    id="videoElement7"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
                <video id="videoElement7" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
        </div>
        <div class="item video8" v-show="isShowVideo8">
            <div class="select" v-show="isShowSelect.video8" @mouseenter="enterSelectBox(8)">
                <el-select
                    size="small"
                    v-model="monitorType8"
                    @change="((val)=>{navClick(val,8)})"
                    placeholder="请选择"
                    ref="videoSelect8"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                <el-select size="small" v-model="monitorType8" @change="((val) => { navClick(val, 8) })" placeholder="请选择"
                    ref="videoSelect8">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(8)" @mouseleave="leaveVideoBox(8)">
                <video
                    id="videoElement8"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
                <video id="videoElement8" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
        </div>

        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                id="videoElement"
                autoplay
                controls
                width="100%"
                height="100%"
                style="object-fit: fill"
            ></video>
        <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video id="videoElement" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
        </el-dialog>
    </div>
</template>
@@ -400,7 +232,7 @@
    },

    mounted () {
        this.$parent.$parent.resize('400px', true)
        this.$parent.$parent.$parent.resize('400px', true)
        graphicLayer = new EntityDraw()
    },

@@ -742,7 +574,7 @@

        graphicLayer.destroy()

        this.$parent.$parent.resize('0px')
        this.$parent.$parent.$parent.resize('0px')

        if (this.flvPlayer != null) {
            this.flvPlayer.pause()
@@ -899,12 +731,15 @@
            padding: 1%;
        }
    }

    .video1 {
        left: calc(1540 / 1920 * 100vw);
    }

    .video2 {
        left: calc(400 / 1920 * 100vw);
    }

    .video3 {
        left: calc(400 / 1920 * 100vw);
        top: calc(340 / 1080 * 100vh);
@@ -914,18 +749,22 @@
        left: calc(1540 / 1920 * 100vw);
        top: calc(340 / 1080 * 100vh);
    }

    .video5 {
        left: calc(400 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }

    .video6 {
        left: calc(1540 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }

    .video7 {
        left: calc(780 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }

    .video8 {
        left: calc(1160 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
@@ -939,9 +778,11 @@
            padding-bottom: 0;
        }
    }

    .video7 .video {
        padding: 1% 0;
    }

    .video8 .video {
        padding: 1% 0 1% 1%;
    }