~admin/srs-police-affairs.git

parent: d2edd0ae | patch | commit | ignore whitespace

guanqb

2023-02-10 113936cb2dda9bd160ca624c308a7ff5bf8d4872

项目整体修改

7 files modified

	src/components/map/index.vue	49 ●●●●● patch \| view \| raw \| blame \| history
	src/styles/media/index.scss	34 ●●●●● patch \| view \| raw \| blame \| history
	src/views/activity/index.vue	69 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/components/leftContainer.vue	250 ●●●●● patch \| view \| raw \| blame \| history
	src/views/layout/index.vue	77 ●●●●● patch \| view \| raw \| blame \| history
	src/views/video/list.vue	139 ●●●●● patch \| view \| raw \| blame \| history
	src/views/video/region.vue	102 ●●●●● patch \| view \| raw \| blame \| history

 src/components/map/index.vue

@@ -15,20 +15,37 @@
        <!-- 全屏控制按钮 -->
        <div class="screen-full-btn">
            <el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark">
                <i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
                <i
                    class="fa fa-compress"
                    style="vertical-align: middle; cursor: pointer"
                    @click="fullscreenchange"
                ></i>
            </el-tooltip>
            <el-tooltip v-if="!isFullscreen" content="全屏" placement="bottom" effect="dark">
                <i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
                <i
                    class="fa fa-expand"
                    style="vertical-align: middle; cursor: pointer"
                    @click="fullscreenchange"
                ></i>
            </el-tooltip>
        </div>
        <!-- 切换矢量图按钮 -->
        <div class="image-switch-icon-btn" title="切换影像" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false">
        <div
            class="image-switch-icon-btn"
            title="切换影像"
            @mouseover="showImgBtn = true"
            @mouseleave="showImgBtn = false"
        >
            <div class="icon-box">
                <img src="/img/base_map.png" alt />
            </div>

            <div class="image-switch-img-btn" v-show="showImgBtn" @mouseover="showImgBtn = true"
                @mouseleave="showImgBtn = false">
            <div
                class="image-switch-img-btn"
                v-show="showImgBtn"
                @mouseover="showImgBtn = true"
                @mouseleave="showImgBtn = false"
            >
                <div class="img" @click="switchImg">
                    <span :class="{ on: imgtype == 0 }">影像</span>
                </div>
@@ -201,15 +218,15 @@
            that.switchImg()

            // 外网
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
            //         url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
            //         subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
            //         format: 'image/jpeg',
            //         show: true,
            //         maximumLevel: 18
            //     })
            // )
            global.viewer.imageryLayers.addImageryProvider(
                new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
                    url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
                    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                    format: 'image/jpeg',
                    show: true,
                    maximumLevel: 18
                })
            )

            // 设置地图初始位置，角度等
            global.viewer.camera.setView({
@@ -231,9 +248,9 @@
            global.viewer.addLayer(sqTitleLayer)
            let sqTileset = new global.DC.Tileset(
                // 内网
                'http://10.141.11.11:18080/sf3d/361102/model/wanda/tileset.json'
                // 'http://10.141.11.11:18080/sf3d/361102/model/wanda/tileset.json'
                // 外网
                // 'http://192.168.0.112:18080/sf3d/361102/model/wanda/tileset.json'
                'http://192.168.0.112:18080/sf3d/361102/model/wanda/tileset.json'
            )

            sqTileset.setHeight(-72)

 src/styles/media/index.scss

@@ -208,7 +208,7 @@

                            .person-box {
                                .back {
                                    top: countSizeVh(96);
                                    top: countSizeVh(102);
                                }
                            }
                        }
@@ -1958,8 +1958,8 @@
                        }

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

                        .el-dialog .el-dialog__body .item {
@@ -1967,6 +1967,10 @@
                            height: countSizeVh(36);
                            line-height: countSizeVh(36);
                            margin: 0 countSizeVw(10, 1920);
                        }

                        .el-dialog .el-dialog__body {
                            padding: 0 countSizeVh(10);
                        }

                        .el-dialog .el-dialog__body .item>div:first-child {
@@ -2048,18 +2052,26 @@
                        }

                        .el-table__header-wrapper {
                            height: countSizeVh(60);
                            line-height: countSizeVh(40);
                            height: countSizeVh(36);
                        }

                        .el-table .cell {
                            font-size: countSizeVh(16);
                            height: countSizeVh(40);
                            line-height: countSizeVh(40);
                        .el-table {

                            th,
                            td {
                                padding: 0;
                            }

                            .cell {
                                font-size: countSizeVh(16);
                                height: countSizeVh(36);
                                line-height: countSizeVh(36);
                                padding: 0;
                            }
                        }

                        .el-table__body-wrapper {
                            height: calc(100% - countSizeVh(80));
                            height: calc(100% - countSizeVh(36));
                        }
                    }

@@ -2820,7 +2832,7 @@

                        .person-box {
                            .back {
                                top: maxCountSizeVh(96);
                                top: maxCountSizeVh(102);
                            }
                        }
                    }

 src/views/activity/index.vue

@@ -286,7 +286,7 @@
            </div>
        </div>

        <div class="btn-box" v-show="isTrackBtnShow">
        <div class="btn-box" v-show="isTrackBtnShow&&polylineBtnSwitch">
            <ul>
                <li>
                    <button @click="play()">播放</button>
@@ -335,7 +335,7 @@
            </div>
        </div>

        <div class="item video5" v-show="polylineBtnSwitch">
        <div class="item video5" v-show="polylineBtnSwitch&&videoShow">
            <div class="select" v-show="isShowSelect.video5&&isHaveMonitor.video5">
                <el-select
                    size="small"
@@ -364,7 +364,7 @@
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video5">暂无数据</div>
        </div>
        <div class="item video6" v-show="polylineBtnSwitch">
        <div class="item video6" v-show="polylineBtnSwitch&&videoShow">
            <div class="select" v-show="isShowSelect.video6&&isHaveMonitor.video6">
                <el-select
                    size="small"
@@ -393,7 +393,7 @@
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video6">暂无数据</div>
        </div>
        <div class="item video7" v-show="polylineBtnSwitch">
        <div class="item video7" v-show="polylineBtnSwitch&&videoShow">
            <div class="select" v-show="isShowSelect.video7&&isHaveMonitor.video7">
                <el-select
                    size="small"
@@ -424,7 +424,7 @@
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video7">暂无数据</div>
        </div>
        <div class="item video8" v-show="polylineBtnSwitch">
        <div class="item video8" v-show="polylineBtnSwitch&&videoShow">
            <div class="select" v-show="isShowSelect.video8&&isHaveMonitor.video8">
                <el-select
                    size="small"
@@ -453,6 +453,7 @@
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video8">暂无数据</div>
        </div>
        <div class="deleteVideo" v-show="polylineBtnSwitch&&videoShow" @click="videoShow = false">关闭</div>

        <el-dialog
            :title="policeChooseTitle"
@@ -699,6 +700,7 @@
                video8: false,
            },
            isShowActivityClearBtn: false,
            videoShow: false,
        }
    },
    created () {
@@ -1187,6 +1189,7 @@
        // 切换轨迹播放控件
        switchBtnChange (e) {
            this.isTrackBtnShow = e
            this.videoShow = e
            this.getSecurityCarList(this.showingSecurityId, this.policeSwitch, this.polylineBtnSwitch)
        },

@@ -1210,6 +1213,8 @@
        // 关闭活动详情弹窗
        closeActivityDetails () {
            this.dialogVisible = false
            this.polylineBtnSwitch = false
            this.isTrackBtnShow = false
            this.currentClickIndex = ''
            analyseLayer.clear()
            arrowsListLayer.clear()
@@ -1339,6 +1344,23 @@
        // 大小重置
        boxResize (val) {
            this.boxShow = val
            if (!val) {
                // this.isTrackBtnShow = false
                this.polylineBtnSwitch = false
                let videoList = document.querySelectorAll('.item')
                videoList.forEach(item => {
                    item.classList.add('newtop')
                })
                document.querySelector('.btn-box ').classList.add('btn-box-new-top')
                document.querySelector('.deleteVideo').classList.add('deleteVideo-new-top')
            } else {
                let videoList = document.querySelectorAll('.item')
                videoList.forEach(item => {
                    item.classList.remove('newtop')
                })
                document.querySelector('.btn-box ').classList.remove('btn-box-new-top')
                document.querySelector('.deleteVideo').classList.remove('deleteVideo-new-top')
            }
        },

        // 选择警员取消按钮
@@ -1625,7 +1647,6 @@
                this.flvListPlayer[flvItemPlayer].play()
            }
        },


    },

@@ -2044,12 +2065,17 @@
    }

    .btn-box {
        position: fixed;
        bottom: calc(360 / 1080 * 100vh);
        left: 50%;
        transform: translate(-40%, 0);
        // position: fixed;
        // bottom: calc(360 / 1080 * 100vh);
        position: absolute;
        top: calc(620 / 1080 * 100vh);
        // left: 50%;
        left: calc(780 / 1920 * 100vw);
        // transform: translate(-40%, 0);
        z-index: 100;
        min-height: 40px;
        padding: 10px 10px 0 10px;
        white-space: nowrap;
        border-radius: 10px;
        color: #fff;
        user-select: none;
@@ -2070,6 +2096,10 @@
                }
            }
        }
    }

    .btn-box-new-top {
        top: calc(680 / 1080 * 100vh);
    }

    .search-content {
@@ -2211,5 +2241,24 @@
        left: calc(1540 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }

    .newtop {
        top: calc(740 / 1080 * 100vh);
    }

    .deleteVideo {
        position: absolute;
        width: 60px;
        height: 26px;
        line-height: 26px;
        background-color: #eee;
        left: calc(1856 / 1920 * 100vw);
        top: calc(650 / 1080 * 100vh);
        cursor: pointer;
        z-index: 100;
    }
    .deleteVideo-new-top {
        top: calc(710 / 1080 * 100vh);
    }
}
</style>

 src/views/home/components/leftContainer.vue

@@ -13,19 +13,27 @@
                    </div>-->
                </div>
                <div class="sub-tab" v-show="peopletype == 0">
                    <div class="tab" :class="{ 'select-on-tab': tabType == 0 }" @click="personTabClick(0)">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabType == 0 }"
                        @click="personTabClick(0)"
                    >
                        <div class="tab-title-small">户籍人口:</div>
                        <div class="tab-title-small">
                            {{
                                personAll.total ? personAll.total : 0
                            personAll.total ? personAll.total : 0
                            }}人
                        </div>
                    </div>
                    <div class="tab" :class="{ 'select-on-tab': tabType == 1 }" @click="personTabClick(1)">
                    <div
                        class="tab"
                        :class="{ 'select-on-tab': tabType == 1 }"
                        @click="personTabClick(1)"
                    >
                        <div class="tab-title-small">重点人员:</div>
                        <div class="tab-title-small">
                            {{
                                personAll.emphasisNum ? personAll.emphasisNum : 0
                            personAll.emphasisNum ? personAll.emphasisNum : 0
                            }}人
                        </div>
                    </div>
@@ -35,41 +43,68 @@
                    </div>-->
                </div>
                <div id="PersonEcharts" class="echarts-box"></div>
                <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0 && showBack"
                    @click="backBegin"></div>
                <div
                    class="back"
                    title="返回上一级"
                    v-show="dataDeep == 2 && peopletype == 0 && showBack"
                    @click="backBegin"
                ></div>
            </div>

            <svg class="border-svg">
                <defs>
                    <path id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    <path
                        id="border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                        d="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                    c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                    c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                    c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                    c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z" fill="transparent" />
                    <radialGradient id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c" cx="50%" cy="50%"
                        r="50%">
                    c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                        fill="transparent"
                    />
                    <radialGradient
                        id="border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c"
                        cx="50%"
                        cy="50%"
                        r="50%"
                    >
                        <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                        <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                    </radialGradient>
                    <mask id="border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c">
                        <circle cx="0" cy="0" r="150"
                            fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)">
                            <animateMotion dur="8s"
                        <circle
                            cx="0"
                            cy="0"
                            r="150"
                            fill="url(#border-box-8-gradient-974b4d7cfafa444396861ca1d1173c8c)"
                        >
                            <animateMotion
                                dur="8s"
                                path="M0.27,0.03c52.66,0,105.34,0,158,0c1.67,2,3.33,4,5,6c1,0.33,2,0.67,3,1c1.33,1.67,2.67,3.33,4,5
                        c16,0,32,0,48,0c53.66,0,107.34,0,161,0c1.13,1.72,0.63,1.36,3,2c0,0.67,0,1.33,0,2c0.67,0,1.33,0,2,0
                        c0.01,104.58,0.01,206.44,0,309c-1.43,0.78-4.01,2.77-5,4c-12,0-24,0-36,0c-2.67-3.33-5.33-6.67-8-10c-21,0-42,0-63,0
                        c-1.08,2.32-2.35,4.25-4,6c-0.67,0.33-1.33,0.67-2,1c-0.33,1-0.67,2-1,3c-20,0-40,0-60,0c-66.66,0-133.34,0-200,0
                        c-1.28-1.57-2.76-2.25-4-4c-0.33,0-0.67,0-1,0c0-8.67,0-17.33,0-26c0-19.66,0-39.34,0-59C0.27,160.04,0.27,80.02,0.27,0.03z"
                                rotate="auto" repeatCount="indefinite" />
                                rotate="auto"
                                repeatCount="indefinite"
                            />
                        </circle>
                    </mask>
                </defs>

                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                </use>
            </svg>
        </div>
@@ -77,11 +112,19 @@
            <div class="box">
                <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">{{ realHouseNum?realHouseNum: 0 }}栋</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">{{ keyPlaceNum?keyPlaceNum: 0 }}栋</div>
                    </div>
@@ -90,10 +133,19 @@
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                </use>
            </svg>
        </div>
@@ -101,11 +153,19 @@
            <div class="box">
                <div class="title">现有地</div>
                <div class="sub-tab" v-show="isAllPoliceStation">
                    <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">{{ villageNum?villageNum: 0 }}个</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">{{ areaNum?areaNum: 0 }}个</div>
                    </div>
@@ -121,10 +181,19 @@
            </div>

            <svg class="border-svg">
                <use stroke-width="2" xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)" stroke="#4fd2dd">
                    <animate attributeName="stroke-dasharray" from="0, 1442" to="1442, 0" dur="8s"
                        repeatCount="indefinite" />
                <use
                    stroke-width="2"
                    xlink:href="#border-box-8-path-974b4d7cfafa444396861ca1d1173c8c"
                    mask="url(#border-box-8-mask-974b4d7cfafa444396861ca1d1173c8c)"
                    stroke="#4fd2dd"
                >
                    <animate
                        attributeName="stroke-dasharray"
                        from="0, 1442"
                        to="1442, 0"
                        dur="8s"
                        repeatCount="indefinite"
                    />
                </use>
            </svg>
        </div>
@@ -156,104 +225,10 @@
            peopletype: 0,
            tabTypeTwo: 0,
            tabTypeThree: 0,
            peopleArr: [
                { 'name': '黄XX', 'sex': '男', 'age': '34', 'address': 'XXXXXXXXX' },
                { 'name': '李某某', 'sex': '女', 'age': '34', 'address': 'XXXXXXXXX' },
                { 'name': '刘AA', 'sex': '女', 'age': '34', 'address': 'XXXXXXXXX' },
                { 'name': '张三', 'sex': '男', 'age': '34', 'address': 'XXXXXXXXX' }
            ],
            peopleTitle: '',
            peopleVisible: false,
            keyPersonDetailArr: [
                { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
                { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
                { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区4', 'type': '在逃人员' },
                { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '重大刑事犯罪前科人员' },
                { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区2', 'type': '肇事肇祸精神病人' },
                { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区3', 'type': '重点上访人员' },
                { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区4', 'type': '涉恐人员' },
                { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '涉稳人员' },
                { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区2', 'type': '涉毒人员' },
                { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区3', 'type': '在逃人员' },
                { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区4', 'type': '重大刑事犯罪前科人员' },
                { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
                { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
                { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
                { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
                { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
                { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区2', 'type': '在逃人员' },
                { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
                { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
                { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重点上访人员' },
                { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
                { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
                { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区4', 'type': '在逃人员' },
                { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重大刑事犯罪前科人员' },
                { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
                { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
                { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
                { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区4', 'type': '涉稳人员' },
                { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
                { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区2', 'type': '在逃人员' },
                { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
                { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
                { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '重点上访人员' },
                { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区2', 'type': '涉恐人员' },
                { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
                { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '在逃人员' },
                { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区2', 'type': '重大刑事犯罪前科人员' },
                { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区3', 'type': '肇事肇祸精神病人' },
                { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区4', 'type': '重点上访人员' }
            ],
            dataDeep: 1,
            keyPersonOption: {},
            keyPersonSelectArr: [
                { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
                { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
                { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区4', 'type': '在逃人员' },
                { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '重大刑事犯罪前科人员' },
                { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区2', 'type': '肇事肇祸精神病人' },
                { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区3', 'type': '重点上访人员' },
                { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区4', 'type': '涉恐人员' },
                { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '涉稳人员' },
                { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区2', 'type': '涉毒人员' },
                { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区3', 'type': '在逃人员' },
                { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区4', 'type': '重大刑事犯罪前科人员' },
                { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
                { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
                { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
                { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
                { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
                { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区2', 'type': '在逃人员' },
                { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
                { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
                { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重点上访人员' },
                { name: '章某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区1', 'type': '涉恐人员' },
                { name: '史某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区2', 'type': '涉稳人员' },
                { name: '周某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '倪某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区4', 'type': '在逃人员' },
                { name: '郭某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '江光所', 'housingEastate': '责任区5', 'type': '重大刑事犯罪前科人员' },
                { name: '张某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区1', 'type': '肇事肇祸精神病人' },
                { name: '李某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区2', 'type': '重点上访人员' },
                { name: '王某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区3', 'type': '涉恐人员' },
                { name: '孙某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '车站所', 'housingEastate': '责任区4', 'type': '涉稳人员' },
                { name: '唐某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区1', 'type': '涉毒人员' },
                { name: '钟某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区2', 'type': '在逃人员' },
                { name: '赵某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区3', 'type': '重大刑事犯罪前科人员' },
                { name: '黄某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '沙溪所', 'housingEastate': '责任区4', 'type': '肇事肇祸精神病人' },
                { name: '薛某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区1', 'type': '重点上访人员' },
                { name: '贾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区2', 'type': '涉恐人员' },
                { name: '邓某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉稳人员' },
                { name: '高某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '灵溪所', 'housingEastate': '责任区3', 'type': '涉毒人员' },
                { name: '肖某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区1', 'type': '在逃人员' },
                { name: '曾某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区2', 'type': '重大刑事犯罪前科人员' },
                { name: '原某某', sex: '女', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区3', 'type': '肇事肇祸精神病人' },
                { name: '谢某某', sex: '男', 'address': 'XXXXXX', 'phone': '132XXXX6666', 'policeStation': '北门所', 'housingEastate': '责任区4', 'type': '重点上访人员' }
            ],
            keyPersonSelectSaveArr: [],
            areaNum: '',
            villageNum: '',
@@ -461,7 +436,7 @@
                        borderColor: 'rgba(8, 56, 185, 0.9)',
                        textStyle: {
                            color: '#fff',
                            fontSize: fontSize(14)
                            fontSize: fontSize(12)
                        }
                    },
                    xAxis: {
@@ -472,7 +447,7 @@
                            color: "#fff",
                            interval: 0,
                            rotate: 45,
                            fontSize: fontSize(12)
                            fontSize: fontSize(10)
                        },
                        axisLine: {
                            lineStyle: {
@@ -488,7 +463,7 @@
                        },
                        axisLabel: {
                            color: "#fff",
                            fontSize: fontSize(14)
                            fontSize: fontSize(12)
                        }
                    },
                    series: [
@@ -532,7 +507,7 @@
                        top: '4%',
                        left: '2%',
                        right: '2%',
                        bottom: '4%',
                        bottom: '1%',
                        containLabel: true
                    },
                }
@@ -549,21 +524,6 @@
        backBegin () {
            this.dataDeep = 1
            this.initPersonEcharts()
            // let xDate, yDate, colors
            // if (this.tabType == 0) {
            //     xDate = ['车站所', '沙溪所', '灵溪所', '北门所', '江光所', '水南所', '秦峰所', '茅家岭所', '西市所', '朝阳所']
            //     yDate = [881, 2211, 6414, 4321, 1232, 881, 2211, 6414, 4321, 1232]
            //     colors = ['#06B5D7', '#44C0C1', '#71C8B1']
            // } else if (this.tabType == 1) {
            //     xDate = ['湖北', '上海', '北京', '广东', '浙江']
            //     yDate = [6414, 4231, 2211, 1231, 881]
            //     colors = ['#ef9faa', '#f7bfc6', '#fedade']
            // } else if (this.tabType == 2) {
            //     xDate = ['日本', '美国', '俄罗斯', '英国', '印度']
            //     yDate = [881, 1231, 2211, 4321, 6414]
            //     colors = ['#7d65c0', '#a47db4', '#e0a8c5']
            // }
            // homePersonmyChart.setOption(this.initPersonOptions(xDate, yDate, colors), true)
        },

        /**
@@ -1193,7 +1153,7 @@
                color: #fff;
            }

            &>div:nth-of-type(2) {
            & > div:nth-of-type(2) {
                font-size: 14px;
            }
        }
@@ -1221,7 +1181,7 @@
                align-items: center;
                justify-content: center;

                &>div {
                & > div {
                    height: 22px;
                    line-height: 22px;
                    white-space: nowrap;

 src/views/layout/index.vue

@@ -12,13 +12,23 @@
    <div class="wrapper">
        <div class="main-header">
            <div class="menu-list left">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuLeftList"
                    :key="index"
                >
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                            {{
                                subItem.menuName
                            subItem.menuName
                            }}
                        </div>
                    </div>
@@ -31,13 +41,23 @@

            <!-- 菜单导航 -->
            <div class="menu-list right">
                <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
                    @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
                <div
                    @mouseenter="item.childrenFlag = true"
                    @mouseleave="item.childrenFlag = false"
                    class="nav-list"
                    @click="goToPath(item)"
                    v-for="(item, index) in menuRightList"
                    :key="index"
                >
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                        <div
                            v-for="(subItem, subIndex) in item.children"
                            :key="subIndex"
                            @click="goToPath(subItem)"
                        >
                            {{
                                subItem.menuName
                            subItem.menuName
                            }}
                        </div>
                    </div>
@@ -78,15 +98,25 @@
            <!-- 地图区域 -->
            <map-box ref="modalForm">
                <!-- 主体内容区域 -->
                <div slot="mainContent" class="main-content" id="MainContent"
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
                <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 slot="showButton" 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>
                    :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
                    id="FlexibleBtn"
                    type="primary"
                    @click="flexibelClick"
                ></el-button>
            </map-box>
        </div>
    </div>
@@ -142,8 +172,9 @@
                    menuName: '运维管理',
                    openExternal: true,
                    // 内网
                    path: 'http://10.141.11.11:8081/#/'
                    // path: 'http://192.168.0.109:1888/#/security/security'
                    // path: 'http://10.141.11.11:8081/#/'
                    // 外网
                    path: 'http://192.168.0.109:1888/#/security/security'
                }
            ],

@@ -329,7 +360,7 @@
            overflow: hidden;
            letter-spacing: 6px;

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

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

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

            &>.nav-list {

            & > .nav-list {
                // color: rgba(32, 106, 181, 1);
                // border-bottom: 2px solid #409eff;
                &>span.on {
                & > span.on {
                    color: rgba(252, 189, 86, 1);
                }
            }
@@ -502,7 +532,7 @@
                    justify-content: space-around;
                    padding-top: 4px;

                    &>div {
                    & > div {
                        width: 100px;
                        height: 40px;
                        background-color: rgba(168, 222, 255, 0.6);
@@ -544,7 +574,8 @@
    position: fixed;
    top: 50%;
    left: 0px;
    z-index: 11;
    // z-index: 11;
    z-index: 99;
    width: 32px;
    height: 64px;
    color: #fff;

 src/views/video/list.vue

@@ -14,7 +14,12 @@
        <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="请输入搜索条件"
                />
            </div>

            <div class="draw-btn">
@@ -31,49 +36,93 @@
                <button @click="changeRange" class="btn">确定</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="down-tree">
                <el-scrollbar>
                    <el-tree v-show="searchLazyFlag" :props="props" :load="loadNode" lazy
                        @node-click="treeClick"></el-tree>
                    <el-tree
                        v-show="searchLazyFlag"
                        :props="props"
                        :load="loadNode"
                        lazy
                        @node-click="treeClick"
                    ></el-tree>

                    <el-tree v-show="searchLazyFlag == false" :data="searchTreeData" :props="defaultProps"
                        :default-expand-all="true" @node-click="treeClick"></el-tree>
                    <el-tree
                        v-show="searchLazyFlag == false"
                        :data="searchTreeData"
                        :props="defaultProps"
                        :default-expand-all="true"
                        @node-click="treeClick"
                    ></el-tree>
                </el-scrollbar>
            </div>

            <div class="list-show" v-if="false">
                <div class="car-list">
                    <div class="list-box">
                        <el-table :data="monitoringList" style="width: 100%"
                        <el-table
                            :data="monitoringList"
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                            <el-table-column :show-overflow-tooltip="true" prop="name" label="点位名称"
                                min-width="35%"></el-table-column>
                            <el-table-column :show-overflow-tooltip="true" prop="pTZTypeText" label="点位类型"
                                min-width="35%"></el-table-column>
                            <el-table-column :show-overflow-tooltip="true" prop="status" label="状态" min-width="30%">
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            @cell-click="rowClick"
                        >
                            <el-table-column
                                :show-overflow-tooltip="true"
                                prop="name"
                                label="点位名称"
                                min-width="35%"
                            ></el-table-column>
                            <el-table-column
                                :show-overflow-tooltip="true"
                                prop="pTZTypeText"
                                label="点位类型"
                                min-width="35%"
                            ></el-table-column>
                            <el-table-column
                                :show-overflow-tooltip="true"
                                prop="status"
                                label="状态"
                                min-width="30%"
                            >
                                <template slot-scope="scope">
                                    <div class="state-box" :class="{ online: scope.row.status == '1' }"></div>
                                    <div
                                        class="state-box"
                                        :class="{ online: scope.row.status == '1' }"
                                    ></div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="pages">
                        <el-pagination background layout="prev, pager, next" :page-size="pagesize"
                            :page-count="pagesCount" :current-page="currentPage" pager-count="5"
                            @current-change="handleCurrentChange"></el-pagination>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :page-size="pagesize"
                            :page-count="pagesCount"
                            :current-page="currentPage"
                            pager-count="5"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <div class="search-content">
            <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus"
                type="text" placeholder="请输入搜索条件" />
            <input
                v-model="searchExtensivelyValue"
                @input="searchExtensivelyChange"
                @focus="searchExtensivelyFocus"
                type="text"
                placeholder="请输入搜索条件"
            />
            <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
                <img src="../../../public/img/icon/clear.png" alt />
            </div>
@@ -81,17 +130,39 @@
        </div>
        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
            <div>
                <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray"
                    :key="index">{{ item.name }}</div>
                <div
                    @click="searchExtensivelyVlaClick(item)"
                    v-for="(item, index) in searchExtensivelyArray"
                    :key="index"
                >{{ item.name }}</div>
            </div>
        </div>

        <el-dialog :title="dialogTitle" :modal="false" :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="false"
            :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>
        <el-dialog :title="drawDialogTitle" :modal="false" :visible.sync="drawDialogVisible"
            :before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box">
        <el-dialog
            :title="drawDialogTitle"
            :modal="false"
            :visible.sync="drawDialogVisible"
            :before-close="drawDialogBeforeClose"
            :close-on-click-modal="true"
            class="video-draw-box"
        >
            <input type="text" v-model="drawName" placeholder="请输入绘制线或面的名称" />
            <button @click="saveDrawInfo">保存</button>
        </el-dialog>
@@ -279,9 +350,9 @@
                this.searchTreeData = []
                getSearchTreeDevices({
                    // 内网
                    deviceId: '36110000002009999000',
                    // deviceId: '36110000002009999000',
                    // 外网
                    // deviceId: '34020000002000000003',
                    deviceId: '34020000002000000003',
                    parentId: '361102',
                    deptId: this.userInfo.dept_id,
                    name: this.searchValue.trim()
@@ -554,9 +625,9 @@

            await getTreeDevices({
                // 内网
                deviceId: '36110000002009999000',
                // deviceId: '36110000002009999000',
                // 外网
                // deviceId: '34020000002000000003',
                deviceId: '34020000002000000003',
                parentId,
                deptId: this.userInfo.dept_id,
                type,
@@ -708,7 +779,7 @@
            border-radius: 10px;
            overflow-y: auto;

            &>div {
            & > div {
                height: 100%;
                padding: 0 10px;
                line-height: 36px;
@@ -782,7 +853,7 @@
        .list-show {
            flex: 1;

            &>div {
            & > div {
                height: 100%;
                display: flex;
                flex-direction: column;
@@ -905,7 +976,7 @@
        border-radius: 10px;
        overflow: hidden;

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


 src/views/video/region.vue

@@ -311,6 +311,7 @@
                ></video>
            </div>
        </div>
        <div class="deleteVideo" v-show="isShowVideo.video1" @click="deleteVideo">关闭</div>

        <el-dialog
            :title="dialogTitle"
@@ -605,7 +606,7 @@
        },

        rowClick (row) {
            if (this.saveRangeID == row.id) return
            // if (this.saveRangeID == row.id) return
            this.saveRangeID = row.id

            this.isShowVideo = {
@@ -638,7 +639,7 @@
                let lat = item.split(' ')[1]
                positionNewStr += lng + ',' + lat + ';'
            })
            getRegionList(1, 15, positionNewStr).then(res => {
            getRegionList(1, 150, positionNewStr).then(res => {
                let monitorData = res.data.data.list
                console.log(res.data.data.list, 123)
                this.monitoringList = res.data.data.list
@@ -741,6 +742,49 @@
        // 大小重置
        boxResize (val) {
            this.boxShow = val
            if (!val) {
                let videoList = document.querySelectorAll('.item')
                videoList.forEach(item => {
                    item.classList.add('new-item-width')
                })
                document.querySelector('.video1').classList.add('new-video146-left')
                document.querySelector('.video1 video').load()
                document.querySelector('.video2').classList.add('new-video235-left')
                document.querySelector('.video3').classList.add('new-video235-left')
                document.querySelector('.video4').classList.add('new-video146-left')
                document.querySelector('.video5').classList.add('new-video235-left')
                document.querySelector('.video6').classList.add('new-video146-left')
                document.querySelector('.video7').classList.add('new-video7-left')
                document.querySelector('.video8').classList.add('new-video8-left')
                document.querySelector('.deleteVideo').classList.add('deleteVideo-new-left')
            } else {
                let videoList = document.querySelectorAll('.item')
                videoList.forEach(item => {
                    item.classList.remove('new-item-width')
                })
                document.querySelector('.video1').classList.remove('new-video146-left')
                document.querySelector('.video2').classList.remove('new-video235-left')
                document.querySelector('.video3').classList.remove('new-video235-left')
                document.querySelector('.video4').classList.remove('new-video146-left')
                document.querySelector('.video5').classList.remove('new-video235-left')
                document.querySelector('.video6').classList.remove('new-video146-left')
                document.querySelector('.video7').classList.remove('new-video7-left')
                document.querySelector('.video8').classList.remove('new-video8-left')
                document.querySelector('.deleteVideo').classList.remove('deleteVideo-new-left')
            }
        },

        deleteVideo () {
            this.isShowVideo = {
                video1: false,
                video2: false,
                video3: false,
                video4: false,
                video5: false,
                video6: false,
                video7: false,
                video8: false
            }
        },

        // enterVideoBox (num) {
@@ -949,7 +993,8 @@

    .item {
        background-color: $bg-color;
        position: absolute;
        // position: absolute;
        position: fixed;
        z-index: 98;
        width: calc((1920 - 400) / 4 / 1920 * 100vw);
        height: calc((1080 - 60) / 3 / 1080 * 100vh);
@@ -967,42 +1012,81 @@
        }
    }

    .new-item-width {
        width: 25vw;
    }
    .new-video235-left {
        left: 0 !important;
    }
    .new-video146-left {
        left: 75vw !important;
    }
    .new-video7-left {
        left: 25vw !important;
    }
    .new-video8-left {
        left: 50vw !important;
    }

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

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

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

    .video4 {
        left: calc(1540 / 1920 * 100vw);
        top: calc(340 / 1080 * 100vh);
        // top: calc(340 / 1080 * 100vh);
        top: calc(400 / 1080 * 100vh);
    }

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

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

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

    .video8 {
        left: calc(1160 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
        // top: calc(680 / 1080 * 100vh);
        top: calc(740 / 1080 * 100vh);
    }
    .deleteVideo {
        // position: absolute;
        position: fixed;
        width: 60px;
        height: 26px;
        line-height: 26px;
        background-color: #eee;
        left: calc(1480 / 1920 * 100vw);
        top: calc(70 / 1080 * 100vh);
        cursor: pointer;
        z-index: 99;
    }
    .deleteVideo-new-left {
        left: calc(1380 / 1920 * 100vw);
    }
}
</style>

			@@ -15,20 +15,37 @@
			<!-- 全屏控制按钮 -->
			<div class="screen-full-btn">
			<el-tooltip v-if="isFullscreen" content="缩放" placement="bottom" effect="dark">
			<i class="fa fa-compress" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
			<i
			class="fa fa-compress"
			style="vertical-align: middle; cursor: pointer"
			@click="fullscreenchange"
			></i>
			</el-tooltip>
			<el-tooltip v-if="!isFullscreen" content="全屏" placement="bottom" effect="dark">
			<i class="fa fa-expand" style="vertical-align: middle; cursor: pointer" @click="fullscreenchange"></i>
			<i
			class="fa fa-expand"
			style="vertical-align: middle; cursor: pointer"
			@click="fullscreenchange"
			></i>
			</el-tooltip>
			</div>
			<!-- 切换矢量图按钮 -->
			<div class="image-switch-icon-btn" title="切换影像" @mouseover="showImgBtn = true" @mouseleave="showImgBtn = false">
			<div
			class="image-switch-icon-btn"
			title="切换影像"
			@mouseover="showImgBtn = true"
			@mouseleave="showImgBtn = false"
			>
			<div class="icon-box">
			<img src="/img/base_map.png" alt />
			</div>

			<div class="image-switch-img-btn" v-show="showImgBtn" @mouseover="showImgBtn = true"
			@mouseleave="showImgBtn = false">
			<div
			class="image-switch-img-btn"
			v-show="showImgBtn"
			@mouseover="showImgBtn = true"
			@mouseleave="showImgBtn = false"
			>
			<div class="img" @click="switchImg">
			<span :class="{ on: imgtype == 0 }">影像</span>
			</div>
			@@ -201,15 +218,15 @@
			that.switchImg()

			// 外网
			// global.viewer.imageryLayers.addImageryProvider(
			// new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
			// url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
			// subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
			// format: 'image/jpeg',
			// show: true,
			// maximumLevel: 18
			// })
			// )
			global.viewer.imageryLayers.addImageryProvider(
			new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
			url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
			subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
			format: 'image/jpeg',
			show: true,
			maximumLevel: 18
			})
			)

			// 设置地图初始位置，角度等
			global.viewer.camera.setView({
			@@ -231,9 +248,9 @@
			global.viewer.addLayer(sqTitleLayer)
			let sqTileset = new global.DC.Tileset(
			// 内网
			'http://10.141.11.11:18080/sf3d/361102/model/wanda/tileset.json'
			// 'http://10.141.11.11:18080/sf3d/361102/model/wanda/tileset.json'
			// 外网
			// 'http://192.168.0.112:18080/sf3d/361102/model/wanda/tileset.json'
			'http://192.168.0.112:18080/sf3d/361102/model/wanda/tileset.json'
			)

			sqTileset.setHeight(-72)

			@@ -208,7 +208,7 @@

			.person-box {
			.back {
			top: countSizeVh(96);
			top: countSizeVh(102);
			}
			}
			}
			@@ -1958,8 +1958,8 @@
			}

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

			.el-dialog .el-dialog__body .item {
			@@ -1967,6 +1967,10 @@
			height: countSizeVh(36);
			line-height: countSizeVh(36);
			margin: 0 countSizeVw(10, 1920);
			}

			.el-dialog .el-dialog__body {
			padding: 0 countSizeVh(10);
			}

			.el-dialog .el-dialog__body .item>div:first-child {
			@@ -2048,18 +2052,26 @@
			}

			.el-table__header-wrapper {
			height: countSizeVh(60);
			line-height: countSizeVh(40);
			height: countSizeVh(36);
			}

			.el-table .cell {
			font-size: countSizeVh(16);
			height: countSizeVh(40);
			line-height: countSizeVh(40);
			.el-table {

			th,
			td {
			padding: 0;
			}

			.cell {
			font-size: countSizeVh(16);
			height: countSizeVh(36);
			line-height: countSizeVh(36);
			padding: 0;
			}
			}

			.el-table__body-wrapper {
			height: calc(100% - countSizeVh(80));
			height: calc(100% - countSizeVh(36));
			}
			}

			@@ -2820,7 +2832,7 @@

			.person-box {
			.back {
			top: maxCountSizeVh(96);
			top: maxCountSizeVh(102);
			}
			}
			}

			@@ -286,7 +286,7 @@
			</div>
			</div>

			<div class="btn-box" v-show="isTrackBtnShow">
			<div class="btn-box" v-show="isTrackBtnShow&&polylineBtnSwitch">
			<ul>
			<li>
			<button @click="play()">播放</button>
			@@ -335,7 +335,7 @@
			</div>
			</div>

			<div class="item video5" v-show="polylineBtnSwitch">
			<div class="item video5" v-show="polylineBtnSwitch&&videoShow">
			<div class="select" v-show="isShowSelect.video5&&isHaveMonitor.video5">
			<el-select
			size="small"
			@@ -364,7 +364,7 @@
			</div>
			<div class="no-video" v-show="!isHaveMonitor.video5">暂无数据</div>
			</div>
			<div class="item video6" v-show="polylineBtnSwitch">
			<div class="item video6" v-show="polylineBtnSwitch&&videoShow">
			<div class="select" v-show="isShowSelect.video6&&isHaveMonitor.video6">
			<el-select
			size="small"
			@@ -393,7 +393,7 @@
			</div>
			<div class="no-video" v-show="!isHaveMonitor.video6">暂无数据</div>
			</div>
			<div class="item video7" v-show="polylineBtnSwitch">
			<div class="item video7" v-show="polylineBtnSwitch&&videoShow">
			<div class="select" v-show="isShowSelect.video7&&isHaveMonitor.video7">
			<el-select
			size="small"
			@@ -424,7 +424,7 @@
			</div>
			<div class="no-video" v-show="!isHaveMonitor.video7">暂无数据</div>
			</div>
			<div class="item video8" v-show="polylineBtnSwitch">
			<div class="item video8" v-show="polylineBtnSwitch&&videoShow">
			<div class="select" v-show="isShowSelect.video8&&isHaveMonitor.video8">
			<el-select
			size="small"
			@@ -453,6 +453,7 @@
			</div>
			<div class="no-video" v-show="!isHaveMonitor.video8">暂无数据</div>
			</div>
			<div class="deleteVideo" v-show="polylineBtnSwitch&&videoShow" @click="videoShow = false">关闭</div>

			<el-dialog
			:title="policeChooseTitle"
			@@ -699,6 +700,7 @@
			video8: false,
			},
			isShowActivityClearBtn: false,
			videoShow: false,
			}
			},
			created () {
			@@ -1187,6 +1189,7 @@
			// 切换轨迹播放控件
			switchBtnChange (e) {
			this.isTrackBtnShow = e
			this.videoShow = e
			this.getSecurityCarList(this.showingSecurityId, this.policeSwitch, this.polylineBtnSwitch)
			},

			@@ -1210,6 +1213,8 @@
			// 关闭活动详情弹窗
			closeActivityDetails () {
			this.dialogVisible = false
			this.polylineBtnSwitch = false
			this.isTrackBtnShow = false
			this.currentClickIndex = ''
			analyseLayer.clear()
			arrowsListLayer.clear()
			@@ -1339,6 +1344,23 @@
			// 大小重置
			boxResize (val) {
			this.boxShow = val
			if (!val) {
			// this.isTrackBtnShow = false
			this.polylineBtnSwitch = false
			let videoList = document.querySelectorAll('.item')
			videoList.forEach(item => {
			item.classList.add('newtop')
			})
			document.querySelector('.btn-box ').classList.add('btn-box-new-top')
			document.querySelector('.deleteVideo').classList.add('deleteVideo-new-top')
			} else {
			let videoList = document.querySelectorAll('.item')
			videoList.forEach(item => {
			item.classList.remove('newtop')
			})
			document.querySelector('.btn-box ').classList.remove('btn-box-new-top')
			document.querySelector('.deleteVideo').classList.remove('deleteVideo-new-top')
			}
			},

			// 选择警员取消按钮
			@@ -1625,7 +1647,6 @@
			this.flvListPlayer[flvItemPlayer].play()
			}
			},


			},

			@@ -2044,12 +2065,17 @@
			}

			.btn-box {
			position: fixed;
			bottom: calc(360 / 1080 * 100vh);
			left: 50%;
			transform: translate(-40%, 0);
			// position: fixed;
			// bottom: calc(360 / 1080 * 100vh);
			position: absolute;
			top: calc(620 / 1080 * 100vh);
			// left: 50%;
			left: calc(780 / 1920 * 100vw);
			// transform: translate(-40%, 0);
			z-index: 100;
			min-height: 40px;
			padding: 10px 10px 0 10px;
			white-space: nowrap;
			border-radius: 10px;
			color: #fff;
			user-select: none;
			@@ -2070,6 +2096,10 @@
			}
			}
			}
			}

			.btn-box-new-top {
			top: calc(680 / 1080 * 100vh);
			}

			.search-content {
			@@ -2211,5 +2241,24 @@
			left: calc(1540 / 1920 * 100vw);
			top: calc(680 / 1080 * 100vh);
			}

			.newtop {
			top: calc(740 / 1080 * 100vh);
			}

			.deleteVideo {
			position: absolute;
			width: 60px;
			height: 26px;
			line-height: 26px;
			background-color: #eee;
			left: calc(1856 / 1920 * 100vw);
			top: calc(650 / 1080 * 100vh);
			cursor: pointer;
			z-index: 100;
			}
			.deleteVideo-new-top {
			top: calc(710 / 1080 * 100vh);
			}
			}
			</style>

			@@ -12,13 +12,23 @@
			<div class="wrapper">
			<div class="main-header">
			<div class="menu-list left">
			<div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
			@click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index">
			<div
			@mouseenter="item.childrenFlag = true"
			@mouseleave="item.childrenFlag = false"
			class="nav-list"
			@click="goToPath(item)"
			v-for="(item, index) in menuLeftList"
			:key="index"
			>
			<span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
			<div class="sub-nav-list" v-show="item.children && item.childrenFlag">
			<div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
			<div
			v-for="(subItem, subIndex) in item.children"
			:key="subIndex"
			@click="goToPath(subItem)"
			>
			{{
			subItem.menuName
			subItem.menuName
			}}
			</div>
			</div>
			@@ -31,13 +41,23 @@

			<!-- 菜单导航 -->
			<div class="menu-list right">
			<div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
			@click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
			<div
			@mouseenter="item.childrenFlag = true"
			@mouseleave="item.childrenFlag = false"
			class="nav-list"
			@click="goToPath(item)"
			v-for="(item, index) in menuRightList"
			:key="index"
			>
			<span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span>
			<div class="sub-nav-list" v-show="item.children && item.childrenFlag">
			<div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
			<div
			v-for="(subItem, subIndex) in item.children"
			:key="subIndex"
			@click="goToPath(subItem)"
			>
			{{
			subItem.menuName
			subItem.menuName
			}}
			</div>
			</div>
			@@ -78,15 +98,25 @@
			<!-- 地图区域 -->
			<map-box ref="modalForm">
			<!-- 主体内容区域 -->
			<div slot="mainContent" class="main-content" id="MainContent"
			:class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
			<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 slot="showButton" 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>
			:icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
			id="FlexibleBtn"
			type="primary"
			@click="flexibelClick"
			></el-button>
			</map-box>
			</div>
			</div>
			@@ -142,8 +172,9 @@
			menuName: '运维管理',
			openExternal: true,
			// 内网
			path: 'http://10.141.11.11:8081/#/'
			// path: 'http://192.168.0.109:1888/#/security/security'
			// path: 'http://10.141.11.11:8081/#/'
			// 外网
			path: 'http://192.168.0.109:1888/#/security/security'
			}
			],

			@@ -329,7 +360,7 @@
			overflow: hidden;
			letter-spacing: 6px;

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

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

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

			&>.nav-list {

			& > .nav-list {
			// color: rgba(32, 106, 181, 1);
			// border-bottom: 2px solid #409eff;
			&>span.on {
			& > span.on {
			color: rgba(252, 189, 86, 1);
			}
			}
			@@ -502,7 +532,7 @@
			justify-content: space-around;
			padding-top: 4px;

			&>div {
			& > div {
			width: 100px;
			height: 40px;
			background-color: rgba(168, 222, 255, 0.6);
			@@ -544,7 +574,8 @@
			position: fixed;
			top: 50%;
			left: 0px;
			z-index: 11;
			// z-index: 11;
			z-index: 99;
			width: 32px;
			height: 64px;
			color: #fff;

			@@ -14,7 +14,12 @@
			<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="请输入搜索条件"
			/>
			</div>

			<div class="draw-btn">
			@@ -31,49 +36,93 @@
			<button @click="changeRange" class="btn">确定</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="down-tree">
			<el-scrollbar>
			<el-tree v-show="searchLazyFlag" :props="props" :load="loadNode" lazy
			@node-click="treeClick"></el-tree>
			<el-tree
			v-show="searchLazyFlag"
			:props="props"
			:load="loadNode"
			lazy
			@node-click="treeClick"
			></el-tree>

			<el-tree v-show="searchLazyFlag == false" :data="searchTreeData" :props="defaultProps"
			:default-expand-all="true" @node-click="treeClick"></el-tree>
			<el-tree
			v-show="searchLazyFlag == false"
			:data="searchTreeData"
			:props="defaultProps"
			:default-expand-all="true"
			@node-click="treeClick"
			></el-tree>
			</el-scrollbar>
			</div>

			<div class="list-show" v-if="false">
			<div class="car-list">
			<div class="list-box">
			<el-table :data="monitoringList" style="width: 100%"
			<el-table
			:data="monitoringList"
			style="width: 100%"
			:header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
			:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
			<el-table-column :show-overflow-tooltip="true" prop="name" label="点位名称"
			min-width="35%"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" prop="pTZTypeText" label="点位类型"
			min-width="35%"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" prop="status" label="状态" min-width="30%">
			:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
			@cell-click="rowClick"
			>
			<el-table-column
			:show-overflow-tooltip="true"
			prop="name"
			label="点位名称"
			min-width="35%"
			></el-table-column>
			<el-table-column
			:show-overflow-tooltip="true"
			prop="pTZTypeText"
			label="点位类型"
			min-width="35%"
			></el-table-column>
			<el-table-column
			:show-overflow-tooltip="true"
			prop="status"
			label="状态"
			min-width="30%"
			>
			<template slot-scope="scope">
			<div class="state-box" :class="{ online: scope.row.status == '1' }"></div>
			<div
			class="state-box"
			:class="{ online: scope.row.status == '1' }"
			></div>
			</template>
			</el-table-column>
			</el-table>
			</div>
			<div class="pages">
			<el-pagination background layout="prev, pager, next" :page-size="pagesize"
			:page-count="pagesCount" :current-page="currentPage" pager-count="5"
			@current-change="handleCurrentChange"></el-pagination>
			<el-pagination
			background
			layout="prev, pager, next"
			:page-size="pagesize"
			:page-count="pagesCount"
			:current-page="currentPage"
			pager-count="5"
			@current-change="handleCurrentChange"
			></el-pagination>
			</div>
			</div>
			</div>
			</div>

			<div class="search-content">
			<input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus"
			type="text" placeholder="请输入搜索条件" />
			<input
			v-model="searchExtensivelyValue"
			@input="searchExtensivelyChange"
			@focus="searchExtensivelyFocus"
			type="text"
			placeholder="请输入搜索条件"
			/>
			<div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
			<img src="../../../public/img/icon/clear.png" alt />
			</div>
			@@ -81,17 +130,39 @@
			</div>
			<div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
			<div>
			<div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray"
			:key="index">{{ item.name }}</div>
			<div
			@click="searchExtensivelyVlaClick(item)"
			v-for="(item, index) in searchExtensivelyArray"
			:key="index"
			>{{ item.name }}</div>
			</div>
			</div>

			<el-dialog :title="dialogTitle" :modal="false" :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="false"
			: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>
			<el-dialog :title="drawDialogTitle" :modal="false" :visible.sync="drawDialogVisible"
			:before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box">
			<el-dialog
			:title="drawDialogTitle"
			:modal="false"
			:visible.sync="drawDialogVisible"
			:before-close="drawDialogBeforeClose"
			:close-on-click-modal="true"
			class="video-draw-box"
			>
			<input type="text" v-model="drawName" placeholder="请输入绘制线或面的名称" />
			<button @click="saveDrawInfo">保存</button>
			</el-dialog>
			@@ -279,9 +350,9 @@
			this.searchTreeData = []
			getSearchTreeDevices({
			// 内网
			deviceId: '36110000002009999000',
			// deviceId: '36110000002009999000',
			// 外网
			// deviceId: '34020000002000000003',
			deviceId: '34020000002000000003',
			parentId: '361102',
			deptId: this.userInfo.dept_id,
			name: this.searchValue.trim()
			@@ -554,9 +625,9 @@

			await getTreeDevices({
			// 内网
			deviceId: '36110000002009999000',
			// deviceId: '36110000002009999000',
			// 外网
			// deviceId: '34020000002000000003',
			deviceId: '34020000002000000003',
			parentId,
			deptId: this.userInfo.dept_id,
			type,
			@@ -708,7 +779,7 @@
			border-radius: 10px;
			overflow-y: auto;

			&>div {
			& > div {
			height: 100%;
			padding: 0 10px;
			line-height: 36px;
			@@ -782,7 +853,7 @@
			.list-show {
			flex: 1;

			&>div {
			& > div {
			height: 100%;
			display: flex;
			flex-direction: column;
			@@ -905,7 +976,7 @@
			border-radius: 10px;
			overflow: hidden;

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

			@@ -311,6 +311,7 @@
			></video>
			</div>
			</div>
			<div class="deleteVideo" v-show="isShowVideo.video1" @click="deleteVideo">关闭</div>

			<el-dialog
			:title="dialogTitle"
			@@ -605,7 +606,7 @@
			},

			rowClick (row) {
			if (this.saveRangeID == row.id) return
			// if (this.saveRangeID == row.id) return
			this.saveRangeID = row.id

			this.isShowVideo = {
			@@ -638,7 +639,7 @@
			let lat = item.split(' ')[1]
			positionNewStr += lng + ',' + lat + ';'
			})
			getRegionList(1, 15, positionNewStr).then(res => {
			getRegionList(1, 150, positionNewStr).then(res => {
			let monitorData = res.data.data.list
			console.log(res.data.data.list, 123)
			this.monitoringList = res.data.data.list
			@@ -741,6 +742,49 @@
			// 大小重置
			boxResize (val) {
			this.boxShow = val
			if (!val) {
			let videoList = document.querySelectorAll('.item')
			videoList.forEach(item => {
			item.classList.add('new-item-width')
			})
			document.querySelector('.video1').classList.add('new-video146-left')
			document.querySelector('.video1 video').load()
			document.querySelector('.video2').classList.add('new-video235-left')
			document.querySelector('.video3').classList.add('new-video235-left')
			document.querySelector('.video4').classList.add('new-video146-left')
			document.querySelector('.video5').classList.add('new-video235-left')
			document.querySelector('.video6').classList.add('new-video146-left')
			document.querySelector('.video7').classList.add('new-video7-left')
			document.querySelector('.video8').classList.add('new-video8-left')
			document.querySelector('.deleteVideo').classList.add('deleteVideo-new-left')
			} else {
			let videoList = document.querySelectorAll('.item')
			videoList.forEach(item => {
			item.classList.remove('new-item-width')
			})
			document.querySelector('.video1').classList.remove('new-video146-left')
			document.querySelector('.video2').classList.remove('new-video235-left')
			document.querySelector('.video3').classList.remove('new-video235-left')
			document.querySelector('.video4').classList.remove('new-video146-left')
			document.querySelector('.video5').classList.remove('new-video235-left')
			document.querySelector('.video6').classList.remove('new-video146-left')
			document.querySelector('.video7').classList.remove('new-video7-left')
			document.querySelector('.video8').classList.remove('new-video8-left')
			document.querySelector('.deleteVideo').classList.remove('deleteVideo-new-left')
			}
			},

			deleteVideo () {
			this.isShowVideo = {
			video1: false,
			video2: false,
			video3: false,
			video4: false,
			video5: false,
			video6: false,
			video7: false,
			video8: false
			}
			},

			// enterVideoBox (num) {
			@@ -949,7 +993,8 @@

			.item {
			background-color: $bg-color;
			position: absolute;
			// position: absolute;
			position: fixed;
			z-index: 98;
			width: calc((1920 - 400) / 4 / 1920 * 100vw);
			height: calc((1080 - 60) / 3 / 1080 * 100vh);
			@@ -967,42 +1012,81 @@
			}
			}

			.new-item-width {
			width: 25vw;
			}
			.new-video235-left {
			left: 0 !important;
			}
			.new-video146-left {
			left: 75vw !important;
			}
			.new-video7-left {
			left: 25vw !important;
			}
			.new-video8-left {
			left: 50vw !important;
			}

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

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

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

			.video4 {
			left: calc(1540 / 1920 * 100vw);
			top: calc(340 / 1080 * 100vh);
			// top: calc(340 / 1080 * 100vh);
			top: calc(400 / 1080 * 100vh);
			}

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

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

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

			.video8 {
			left: calc(1160 / 1920 * 100vw);
			top: calc(680 / 1080 * 100vh);
			// top: calc(680 / 1080 * 100vh);
			top: calc(740 / 1080 * 100vh);
			}
			.deleteVideo {
			// position: absolute;
			position: fixed;
			width: 60px;
			height: 26px;
			line-height: 26px;
			background-color: #eee;
			left: calc(1480 / 1920 * 100vw);
			top: calc(70 / 1080 * 100vh);
			cursor: pointer;
			z-index: 99;
			}
			.deleteVideo-new-left {
			left: calc(1380 / 1920 * 100vw);
			}
			}
			</style>