Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/srs-police-aff...

shuishen

2023-01-05 14df8caf804c3ff43f7d04ffb553588cc62f9b36

Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/srs-police-affairs

 public/img/icon/clear.png

 public/img/icon/location.png

 src/components/map/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 17:00:30
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-01-04 16:05:36
 * @LastEditTime: 2022-12-30 13:59:43
 * @FilePath: \srs-police-affairs\src\components\map\index.vue
 * @Description: 公用地图组件
 * 
@@ -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>
@@ -171,7 +188,7 @@
            // global.viewer.addTerrain(terrain)

            // 天地图 影像
            baseLayers = global.viewer.imageryLayers.addImageryProvider(
            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'],
@@ -183,7 +200,7 @@


            // 上饶部署，内网使用的
            // baseLayers = global.viewer.imageryLayers.addImageryProvider(
            // global.viewer.imageryLayers.addImageryProvider(
            //     new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
            //         url: "http://10.141.11.11:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
            //         layer: "wmts_4326_361100",
@@ -547,7 +564,7 @@
                    outlineColor: global.DC.Color.WHITE, // 边框颜色
                    outlineWidth: 4, // 边框大小，
                    font: '16px sans-serif',
                    pixelOffset: { x: 0, y: -24 },
                    pixelOffset: { x: 0, y: -30 },
                    distanceDisplayCondition: distanceDisplayCondition
                })
                pointElement.attrParams = params

 src/components/select/index.vue

@@ -118,13 +118,13 @@
            justify-content: flex-start;
            align-items: center;
            line-height: 35px;
            background: rgba(33, 61, 106, 0.8); //下拉框默认背景
            background: rgba(35, 50, 167, 0.7); //下拉框默认背景
            cursor: pointer;
        }

        //鼠标移到下拉框时的背景
        div:hover {
            background: rgba(36, 120, 162, 0.8);
            background: rgba(45,92,200, 0.8);
            color: white;
        }


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

@@ -38,7 +38,8 @@
.el-table tr:hover {
    td {
        cursor: pointer;
        background-color: rgba(222, 176, 176, 0.2) !important;
        // background-color: rgba(222, 176, 176, 0.2) !important;
        background-color: rgba(29, 92, 228, 0.7) !important;
    }
}

@@ -116,7 +117,8 @@
    color: #fff;
    font-weight: 200;
    // background-color: $table-body-tr-n-color!important;
    background-color: rgba(8, 56, 185, .9) !important;
    // background-color: rgba(8, 56, 185, .9) !important;
    background-color: rgba(35, 50, 167, 0.85) !important;
}

.el-select-dropdown__list {
@@ -133,7 +135,7 @@
}

.el-select-dropdown__item:hover {
    background-color: #2d5cc8 !important;
    background-color: rgba(45,92,200, 0.95)!important;
}

.el-select-dropdown__item:onBlur {
@@ -397,7 +399,7 @@
.tree-search-popup {
    top: 135px !important;
    background: $tree-search-bg-color;
    border: 1px solid rgb(0, 92, 169);
    border: 1px solid rgba(35, 50, 167, 0.7);
    color: #fff;

    .select-tree-box {
@@ -424,5 +426,5 @@
    border: 10px solid;
    transform: translate(-50%, -100%);

    border-color: transparent transparent rgb(0, 92, 169) transparent;
    border-color: transparent transparent rgba(35, 50, 167, 0.7) transparent;
}

 src/styles/media/index.scss

@@ -813,16 +813,25 @@
                            height: countSizeVh(36);

                            input {
                                width: countSizeVw(380, 1920);
                                width: countSizeVw(400, 1920);
                                font-size: countSizeVh(18);
                                border: countSizeVh(1) solid rgb(0, 92, 169);
                                border-radius: countSizeVh(20) 0 0 countSizeVh(20);
                                // vertical-align: top;
                            }

                            .clear {
                                right: countSizeVw(70, 1920);
                                img {
                                    width: countSizeVh(16);
                                    height: countSizeVh(16);
                                    margin-top: countSizeVh(10);
                                }
                            }

                            button {
                                font-size: countSizeVh(24);
                                width: countSizeVw(80, 1920);
                                width: countSizeVw(60, 1920);
                                border: countSizeVh(1) solid rgb(0, 92, 169);
                                border-radius: 0 countSizeVh(20) countSizeVh(20) 0;
                            }
@@ -1019,6 +1028,56 @@
                                }
                            }
                        }

                        .search-content {
                            left: countSizeVw(760, 1920);
                            top: countSizeVh(40);
                            width: countSizeVw(460, 1920);
                            height: countSizeVh(36);

                            input {
                                width: countSizeVw(400, 1920);
                                font-size: countSizeVh(18);
                                border: countSizeVh(1) solid rgb(0, 92, 169);
                                border-radius: countSizeVh(20) 0 0 countSizeVh(20);
                                // vertical-align: top;
                            }

                            .clear {
                                right: countSizeVw(70, 1920);
                                img {
                                    width: countSizeVh(16);
                                    height: countSizeVh(16);
                                    margin-top: countSizeVh(10);
                                }
                            }

                            button {
                                font-size: countSizeVh(24);
                                width: countSizeVw(60, 1920);
                                border: countSizeVh(1) solid rgb(0, 92, 169);
                                border-radius: 0 countSizeVh(20) countSizeVh(20) 0;
                            }

                            button:active {
                                border: countSizeVh(1) solid rgb(0, 92, 169);
                            }
                        }

                        .searchExtensively-val-box {
                            top: countSizeVh(80);
                            left: countSizeVw(760, 1920);
                            width: countSizeVw(380, 1920);
                            max-height: countSizeVh(400);
                            border-radius: countSizeVh(10);

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

                    .video-page {
@@ -1160,6 +1219,56 @@

                                .el-table__empty-text {
                                    font-size: countSizeVh(16);
                                }
                            }

                            .search-content {
                                left: countSizeVw(760, 1920);
                                top: countSizeVh(40);
                                width: countSizeVw(460, 1920);
                                height: countSizeVh(36);
    
                                input {
                                    width: countSizeVw(400, 1920);
                                    font-size: countSizeVh(18);
                                    border: countSizeVh(1) solid rgb(0, 92, 169);
                                    border-radius: countSizeVh(20) 0 0 countSizeVh(20);
                                    // vertical-align: top;
                                }
    
                                .clear {
                                    right: countSizeVw(70, 1920);
                                    img {
                                        width: countSizeVh(16);
                                        height: countSizeVh(16);
                                        margin-top: countSizeVh(10);
                                    }
                                }
    
                                button {
                                    font-size: countSizeVh(24);
                                    width: countSizeVw(60, 1920);
                                    border: countSizeVh(1) solid rgb(0, 92, 169);
                                    border-radius: 0 countSizeVh(20) countSizeVh(20) 0;
                                }
    
                                button:active {
                                    border: countSizeVh(1) solid rgb(0, 92, 169);
                                }
                            }
    
                            .searchExtensively-val-box {
                                top: countSizeVh(80);
                                left: countSizeVw(760, 1920);
                                width: countSizeVw(380, 1920);
                                max-height: countSizeVh(400);
                                border-radius: countSizeVh(10);
    
                                &>div {
                                    div {
                                        padding: 0 countSizeVw(10, 1920);
                                        line-height: countSizeVh(36);
                                    }
                                }
                            }
                        }
@@ -1606,6 +1715,56 @@
                                }
                            }
                        }

                        .search-content {
                            left: countSizeVw(760, 1920);
                            top: countSizeVh(40);
                            width: countSizeVw(460, 1920);
                            height: countSizeVh(36);

                            input {
                                width: countSizeVw(400, 1920);
                                font-size: countSizeVh(18);
                                border: countSizeVh(1) solid rgb(0, 92, 169);
                                border-radius: countSizeVh(20) 0 0 countSizeVh(20);
                                // vertical-align: top;
                            }

                            .clear {
                                right: countSizeVw(70, 1920);
                                img {
                                    width: countSizeVh(16);
                                    height: countSizeVh(16);
                                    margin-top: countSizeVh(10);
                                }
                            }

                            button {
                                font-size: countSizeVh(24);
                                width: countSizeVw(60, 1920);
                                border: countSizeVh(1) solid rgb(0, 92, 169);
                                border-radius: 0 countSizeVh(20) countSizeVh(20) 0;
                            }

                            button:active {
                                border: countSizeVh(1) solid rgb(0, 92, 169);
                            }
                        }

                        .searchExtensively-val-box {
                            top: countSizeVh(80);
                            left: countSizeVw(760, 1920);
                            width: countSizeVw(380, 1920);
                            max-height: countSizeVh(400);
                            border-radius: countSizeVh(10);

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


 src/styles/scssFile.scss

@@ -4,7 +4,7 @@



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

$el-dialog-bg-color: $bg-one-color;


 src/views/activity/index.vue

@@ -14,7 +14,7 @@
        <div v-show="boxShow" class="container-content">
            <div class="title">安保活动</div>
            <div class="search-box">
                <div>
                <!-- <div>
                    <div class="category">活动类型：</div>
                    <div class="category-value">
                        <el-select
@@ -32,7 +32,7 @@
                            ></el-option>
                        </el-select>
                    </div>
                </div>
                </div>-->

                <div>
                    <div class="category">选择时间：</div>
@@ -320,6 +320,29 @@
            </ul>
        </div>

        <div class="search-content">
            <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>
            <button @click="searchExtensivelyClick" class="el-icon-search"></button>
        </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>
        </div>

        <el-dialog
            :title="policeChooseTitle"
            :modal="false"
@@ -346,6 +369,7 @@

<script>
import { getSecurityList, getPoliceList, getCarList, addCarAndRange, addActivityPolice, getSecurityPoliceList, getSecurityCarList, updateActivityPolice, updateActivityCar, getServiceDictionary, getActivityType, addSecurityPlot, getSecurityPlotList, updateSecurityPlot } from '@/api/activity/index.js'
import { getSearchExtensively } from '@/api/dept/index.js'

let analyseLayer = null
let analysePolygon = null
@@ -533,6 +557,9 @@
            showingSecurityId: '',
            policeIconIsCreated: false,
            policeIconId: {},
            searchExtensivelyValue: '',
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],
        }
    },
    created () {
@@ -1252,6 +1279,100 @@
                this.getSecurityPlotList(this.securityId)
            })
        },

        // 大搜
        getSearchExtensively (ak, region, query) {
            getSearchExtensively(ak, region, query).then(res => {
                this.searchExtensivelyArray = res.data.result
            })
        },

        searchExtensivelyClick () {
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            this.searchExtensivelyValBoxShow = false
            if (this.searchExtensivelyArray.length > 0) {
                this.$EventBus.$emit('toPosition', {
                    siteJd: `${this.searchExtensivelyArray[0].location.lng}`,
                    siteWd: `${this.searchExtensivelyArray[0].location.lat}`,
                    siteGd: 200,
                })
                this.searchExtensivelyValue = this.searchExtensivelyArray[0].name
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'searchLayer',
                    type: 'VectorLayer'
                })
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'searchLayer',
                    type: 'label',
                    params: {
                        lng: `${this.searchExtensivelyArray[0].location.lng}`,
                        lat: `${this.searchExtensivelyArray[0].location.lat}`,
                        alt: 0,
                        text: this.searchExtensivelyArray[0].name
                    },
                })
            }
        },

        searchExtensivelyChange () {
            if (this.searchExtensivelyValue == '') {
                this.searchExtensivelyValBoxShow = false
                this.isShowClearBtn = false
                this.searchExtensivelyArray = []
            } else {
                this.searchExtensivelyValBoxShow = true
                this.isShowClearBtn = true
                this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            }
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
        },

        searchExtensivelyVlaClick (item) {
            this.searchExtensivelyValBoxShow = false
            this.searchExtensivelyValue = item.name
            this.$EventBus.$emit('toPosition', {
                siteJd: `${item.location.lng}`,
                siteWd: `${item.location.lat}`,
                siteGd: 200,
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: 'label',
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 0,
                    text: item.name
                }
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: "billboard",
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 0,
                    url: '/img/icon/location.png'
                },
            })
        },

        searchExtensivelyFocus () {
            this.searchExtensivelyValBoxShow = true
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
        },

        clearSearchValue () {
            this.searchExtensivelyValue = ''
            this.searchExtensivelyChange()
        },
    },

    destroyed () {
@@ -1282,6 +1403,11 @@
        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'newCarDrawLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'searchLayer',
            type: 'label'
        })

        analyseLayer.clear()
@@ -1347,7 +1473,7 @@
                    font-size: 12px;
                    text-indent: 1em;
                    color: #ffffff;
                    background-color: transparent;
                    background-color: rgba(24, 79, 202, 0.6);
                    border: 1px solid rgb(0, 92, 169);
                    border-radius: 5px 0 0 5px;
                }
@@ -1428,11 +1554,11 @@
                }

                .row-box:hover {
                    background-color: rgba(222, 176, 176, 0.2) !important;
                    background-color: rgba(29, 92, 228, 0.7) !important;
                }

                .row-box.on {
                    background-color: rgba(222, 176, 176, 0.2) !important;
                    background-color: rgba(29, 92, 228, 0.7) !important;
                }

                :deep(.el-dialog) {
@@ -1658,5 +1784,90 @@
            }
        }
    }

    .search-content {
        position: absolute;
        left: 760px;
        top: 40px;
        width: 460px;
        height: 36px;

        input {
            flex: 1;
            width: 400px;
            height: 100%;
            font-size: 18px;
            text-indent: 1em;
            color: #ffffff;
            background-color: rgba(24, 79, 202, 0.75);
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
            vertical-align: top;
        }

        input:focus {
            outline: none;
        }

        input::-webkit-input-placeholder {
            color: rgba(238, 238, 238, 0.7);
        }

        .clear {
            position: absolute;
            top: 0;
            right: 70px;
            cursor: pointer;
            img {
                width: 16px;
                height: 16px;
                margin-top: 10px;
            }
        }

        button {
            font-size: 24px;
            font-weight: 700;
            width: 60px;
            height: 100%;
            background-color: $table-body-tr-n-color;
            color: #fff;
            border: 1px solid rgb(0, 92, 169);
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }

        button:active {
            background-color: $table-body-tr-2n-color;
            border: 1px solid rgb(0, 92, 169);
        }
    }

    .searchExtensively-val-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 760px;
        width: 380px;
        max-height: 160px;
        text-align: left;
        color: #fff;
        background: $el-dialog-bg-color;
        z-index: 1111;
        border-radius: 10px;
        overflow: hidden;

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

            div {
                padding: 0 10px;
                line-height: 36px;
                cursor: pointer;
            }
        }
    }
}
</style>

 src/views/house/index.vue

@@ -195,7 +195,7 @@
                                <div class="one">
                                    <div>
                                        <div>160</div>
                                        <div>实有人口</div>
                                        <div>户籍人口</div>
                                    </div>
                                    <div>
                                        <div style="color:#FF796C">16</div>
@@ -219,7 +219,7 @@
                                </div>-->
                            </div>
                        </div>
                        <div class="house-info">
                        <!-- <div class="house-info">
                            <div class="title">房屋情况</div>

                            <div class="content">
@@ -227,7 +227,7 @@
                                    <div>288</div>
                                    <div>房屋总数</div>
                                </div>
                                <!-- <div>
                                <div>
                                    <div>120</div>
                                    <div>出租</div>
                                </div>
@@ -238,9 +238,9 @@
                                <div>
                                    <div>8</div>
                                    <div>空置</div>
                                </div>-->
                                </div>
                            </div>
                        </div>
                        </div>-->
                        <div class="house-element-info">
                            <!-- 选择单元 -->
                            <div class="condo">
@@ -439,6 +439,9 @@
                type="text"
                placeholder="请输入搜索条件"
            />
            <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
                <img src="../../../public/img/icon/clear.png" alt />
            </div>
            <button @click="searchExtensivelyClick" class="el-icon-search"></button>
        </div>
        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
@@ -710,6 +713,7 @@
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],
            searchExtensivelyValue: '',
            isShowClearBtn: false,
        }
    },
    watch: {
@@ -966,21 +970,39 @@
                    siteJd: `${this.searchExtensivelyArray[0].location.lng}`,
                    siteWd: `${this.searchExtensivelyArray[0].location.lat}`,
                    siteGd: 200,
                    siteHeading: -3,
                    sitePitch: -45
                })
                this.searchExtensivelyValue = this.searchExtensivelyArray[0].name
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'searchLayer',
                    type: 'VectorLayer'
                })
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'searchLayer',
                    type: 'label',
                    params: {
                        lng: `${this.searchExtensivelyArray[0].location.lng}`,
                        lat: `${this.searchExtensivelyArray[0].location.lat}`,
                        alt: 0,
                        text: this.searchExtensivelyArray[0].name
                    },
                })
            }
        },

        searchExtensivelyChange () {
            if (this.searchExtensivelyValue == '') {
                this.searchExtensivelyValBoxShow = false
                this.isShowClearBtn = false
                this.searchExtensivelyArray = []
            } else {
                this.searchExtensivelyValBoxShow = true
                this.isShowClearBtn = true
                this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            }
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
        },

        searchExtensivelyVlaClick (item) {
@@ -989,11 +1011,11 @@
            this.$EventBus.$emit('toPosition', {
                siteJd: `${item.location.lng}`,
                siteWd: `${item.location.lat}`,
                siteGd: 10000
                siteGd: 200,
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'label'
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
@@ -1003,15 +1025,29 @@
                    lat: `${item.location.lat}`,
                    alt: 0,
                    text: item.name
                }
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: "billboard",
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 0,
                    url: '/img/icon/location.png'
                },
                // distanceDisplayCondition: { "near": 0, "far": 200000 }
            })
        },

        searchExtensivelyFocus () {
            this.searchExtensivelyValBoxShow = true
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
        }
        },

        clearSearchValue () {
            this.searchExtensivelyValue = ''
            this.searchExtensivelyChange()
        },
    },

    destroyed () {
@@ -1020,6 +1056,10 @@
        // })

        this.$parent.$parent.resize('0px')
        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'searchLayer',
            type: 'label'
        })
    }
}
</script>
@@ -1483,6 +1523,7 @@
                                        border-radius: 13px;
                                        // background: #202434;
                                        cursor: default;
                                        border: 0.0925925926vh solid #fff;
                                    }

                                    & > .on {
@@ -1596,12 +1637,12 @@

        input {
            flex: 1;
            width: 380px;
            width: 400px;
            height: 100%;
            font-size: 18px;
            text-indent: 1em;
            color: #ffffff;
            background-color: $table-body-tr-2n-color;
            background-color: rgba(24, 79, 202, 0.75);
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
            vertical-align: top;
@@ -1615,10 +1656,22 @@
            color: rgba(238, 238, 238, 0.7);
        }

        .clear {
            position: absolute;
            top: 0;
            right: 70px;
            cursor: pointer;
            img {
                width: 16px;
                height: 16px;
                margin-top: 10px;
            }
        }

        button {
            font-size: 24px;
            font-weight: 700;
            width: 80px;
            width: 60px;
            height: 100%;
            background-color: $table-body-tr-n-color;
            color: #fff;

 src/views/police/index.vue

@@ -254,88 +254,114 @@
            </div>

            <div class="track-box" v-show="detailFlag">
                <div class="back-btn" @click="goBack" title="轨迹">详细资料及轨迹查询</div>
                <ul v-show="navType == 1">
                    <li>
                        <div>车辆型号：</div>
                        <div>SC7103</div>
                    </li>
                <div class="track-box-info">
                    <div class="back-btn" @click="goBack" title="轨迹">详细资料及轨迹查询</div>
                    <ul v-show="navType == 1">
                        <li>
                            <div>车辆型号：</div>
                            <div>SC7103</div>
                        </li>

                    <li>
                        <div>责任人：</div>
                        <div>高德光</div>
                    </li>
                        <li>
                            <div>责任人：</div>
                            <div>高德光</div>
                        </li>

                    <li>
                        <div>出场日期：</div>
                        <div>2019-12-02 00:00:00</div>
                    </li>
                        <li>
                            <div>出场日期：</div>
                            <div>2019-12-02 00:00:00</div>
                        </li>

                    <li>
                        <div>厂商：</div>
                        <div>重庆长安铃木汽车有限公司</div>
                    </li>
                        <li>
                            <div>厂商：</div>
                            <div>重庆长安铃木汽车有限公司</div>
                        </li>

                    <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>
                        </div>
                    </li>
                        <li>
                            <div>选择时间：</div>
                            <div class="datetime">
                                <el-date-picker
                                    v-model="trackTime"
                                    type="daterange"
                                    unlink-panels
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    size="mini"
                                    :editable="false"
                                    end-placeholder="结束日期"
                                ></el-date-picker>
                            </div>
                        </li>

                    <li>
                        <el-button type="text" @click="lookTrack">查看轨迹</el-button>
                    </li>
                </ul>
                        <li>
                            <el-button type="text" @click="lookTrack">查看轨迹</el-button>
                        </li>
                    </ul>

                <ul v-show="navType == 2">
                    <li>
                        <div>型号：</div>
                        <div>350m</div>
                    </li>
                    <ul v-show="navType == 2">
                        <li>
                            <div>型号：</div>
                            <div>350m</div>
                        </li>

                    <li>
                        <div>责任人：</div>
                        <div>高德光</div>
                    </li>
                        <li>
                            <div>责任人：</div>
                            <div>高德光</div>
                        </li>

                    <li>
                        <div>出场日期：</div>
                        <div>2019-12-02 00:00:00</div>
                    </li>
                        <li>
                            <div>出场日期：</div>
                            <div>2019-12-02 00:00:00</div>
                        </li>

                    <li>
                        <div>厂商：</div>
                        <div>摩托罗拉</div>
                    </li>
                        <li>
                            <div>厂商：</div>
                            <div>摩托罗拉</div>
                        </li>

                    <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>
                        </div>
                    </li>
                        <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>
                            </div>
                        </li>

                    <li>
                        <el-button type="text" @click="lookTrack">查看轨迹</el-button>
                    </li>
                </ul>
                        <li>
                            <el-button type="text" @click="lookTrack">查看轨迹</el-button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="search-content">
            <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>
            <button @click="searchExtensivelyClick" class="el-icon-search"></button>
        </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>
        </div>

@@ -393,6 +419,8 @@
import dtList from '@/assets/data/dt.js'
import { getHistoricalTrack } from '@/api/police/index.js'
import { getCarList } from '@/api/police/index.js'
import { getSearchExtensively } from '@/api/dept/index.js'


let tc = null
let track = null
@@ -437,6 +465,10 @@
            typeValue: '1',
            boxShow: true,
            carListSaveDate: [],
            searchExtensivelyValue: '',
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],

        }
    },
    created () {
@@ -777,6 +809,100 @@
            })
            return positionArr
        },

        // 大搜
        getSearchExtensively (ak, region, query) {
            getSearchExtensively(ak, region, query).then(res => {
                this.searchExtensivelyArray = res.data.result
            })
        },

        searchExtensivelyClick () {
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            this.searchExtensivelyValBoxShow = false
            if (this.searchExtensivelyArray.length > 0) {
                this.$EventBus.$emit('toPosition', {
                    siteJd: `${this.searchExtensivelyArray[0].location.lng}`,
                    siteWd: `${this.searchExtensivelyArray[0].location.lat}`,
                    siteGd: 200,
                })
                this.searchExtensivelyValue = this.searchExtensivelyArray[0].name
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'searchLayer',
                    type: 'VectorLayer'
                })
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'searchLayer',
                    type: 'label',
                    params: {
                        lng: `${this.searchExtensivelyArray[0].location.lng}`,
                        lat: `${this.searchExtensivelyArray[0].location.lat}`,
                        alt: 0,
                        text: this.searchExtensivelyArray[0].name
                    },
                })
            }
        },

        searchExtensivelyChange () {
            if (this.searchExtensivelyValue == '') {
                this.searchExtensivelyValBoxShow = false
                this.isShowClearBtn = false
                this.searchExtensivelyArray = []
            } else {
                this.searchExtensivelyValBoxShow = true
                this.isShowClearBtn = true
                this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            }
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
        },

        searchExtensivelyVlaClick (item) {
            this.searchExtensivelyValBoxShow = false
            this.searchExtensivelyValue = item.name
            this.$EventBus.$emit('toPosition', {
                siteJd: `${item.location.lng}`,
                siteWd: `${item.location.lat}`,
                siteGd: 200,
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: 'label',
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 0,
                    text: item.name
                }
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: "billboard",
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 0,
                    url: '/img/icon/location.png'
                },
            })
        },

        searchExtensivelyFocus () {
            this.searchExtensivelyValBoxShow = true
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
        },

        clearSearchValue () {
            this.searchExtensivelyValue = ''
            this.searchExtensivelyChange()
        },
    },

    destroyed () {
@@ -803,6 +929,11 @@
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'polylineLayer',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'searchLayer',
            type: 'label'
        })

        tc.pause()
@@ -859,8 +990,9 @@
                    font-size: 18px;
                    text-indent: 1em;
                    color: #ffffff;
                    background-color: transparent;
                    border: 1px solid rgb(0, 92, 169);
                    background-color: rgba(24, 79, 202, 0.6);
                    // border: 1px solid rgb(0, 92, 169);
                    border: 1px solid rgb(24, 79, 202);
                    border-radius: 20px 0 0 20px;
                }

@@ -943,7 +1075,11 @@

        .track-box {
            height: calc(100% - 50px);
            background: rgba(20, 50, 123, 1);
            // background: rgba(20, 50, 123, 1);

            .track-box-info {
                background: rgba(8, 56, 185, 0.5);
            }

            .back-btn {
                position: relative;
@@ -960,14 +1096,14 @@
                font-family: element-icons;
                height: 28px;
                line-height: 28px;
                color: #388ae7;
                color: #fff;
                position: absolute;
                top: 4px;
                left: 8px;
            }

            .back-btn:hover::before {
                color: #5a9eeb;
                color: #fff;
            }

            ul {
@@ -1021,5 +1157,90 @@
            }
        }
    }

    .search-content {
        position: absolute;
        left: 760px;
        top: 40px;
        width: 460px;
        height: 36px;

        input {
            flex: 1;
            width: 400px;
            height: 100%;
            font-size: 18px;
            text-indent: 1em;
            color: #ffffff;
            background-color: rgba(24, 79, 202, 0.75);
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
            vertical-align: top;
        }

        input:focus {
            outline: none;
        }

        input::-webkit-input-placeholder {
            color: rgba(238, 238, 238, 0.7);
        }

        .clear {
            position: absolute;
            top: 0;
            right: 70px;
            cursor: pointer;
            img {
                width: 16px;
                height: 16px;
                margin-top: 10px;
            }
        }

        button {
            font-size: 24px;
            font-weight: 700;
            width: 60px;
            height: 100%;
            background-color: $table-body-tr-n-color;
            color: #fff;
            border: 1px solid rgb(0, 92, 169);
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }

        button:active {
            background-color: $table-body-tr-2n-color;
            border: 1px solid rgb(0, 92, 169);
        }
    }

    .searchExtensively-val-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 760px;
        width: 380px;
        max-height: 160px;
        text-align: left;
        color: #fff;
        background: $el-dialog-bg-color;
        z-index: 1111;
        border-radius: 10px;
        overflow: hidden;

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

            div {
                padding: 0 10px;
                line-height: 36px;
                cursor: pointer;
            }
        }
    }
}
</style>

 src/views/video/list.vue

@@ -13,6 +13,7 @@
    <div class="list container">
        <div v-show="boxShow" class="container-content">
            <div class="search-box">
                设备名称：
                <input
                    v-model="searchValue"
                    @input="searchChange"
@@ -23,6 +24,7 @@
            </div>

            <div class="draw-btn">
                操作名称：
                <el-button type="primary" size="mini" @click="draw('polygon')">绘制面</el-button>
                <el-button type="primary" size="mini" @click="draw('polyline')">绘制线</el-button>
                <el-button type="primary" size="mini" @click="removeDrawLayer">清除</el-button>
@@ -48,7 +50,7 @@
                        <el-table
                            :data="monitoringList"
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :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"
                        >
@@ -75,6 +77,29 @@
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <div class="search-content">
            <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>
            <button @click="searchExtensivelyClick" class="el-icon-search"></button>
        </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>
        </div>

@@ -113,6 +138,7 @@
import EntityDraw from "@/utils/EntityDraw.js"
import { listQuery, accurateSearch } from "@/utils/search.js"
import { getVideoList, getDevices, getRegionList, insertRegionSaveList } from '@/api/video/index.js'
import { getSearchExtensively } from '@/api/dept/index.js'
import flvjs from 'flv.js'

let graphicLayer = null
@@ -140,7 +166,10 @@
            drawName: '',
            drawInfo: [],
            drawType: 1,
            saveFlag: true
            saveFlag: true,
            searchExtensivelyValue: '',
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],
        }
    },

@@ -427,12 +456,112 @@

            })
        },

        // 大搜
        getSearchExtensively (ak, region, query) {
            getSearchExtensively(ak, region, query).then(res => {
                this.searchExtensivelyArray = res.data.result
            })
        },

        searchExtensivelyClick () {
            console.log(111)
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            this.searchExtensivelyValBoxShow = false
            if (this.searchExtensivelyArray.length > 0) {
                this.$EventBus.$emit('toPosition', {
                    siteJd: `${this.searchExtensivelyArray[0].location.lng}`,
                    siteWd: `${this.searchExtensivelyArray[0].location.lat}`,
                    siteGd: 200,
                })
                this.searchExtensivelyValue = this.searchExtensivelyArray[0].name
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'searchLayer',
                    type: 'VectorLayer'
                })
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'searchLayer',
                    type: 'label',
                    params: {
                        lng: `${this.searchExtensivelyArray[0].location.lng}`,
                        lat: `${this.searchExtensivelyArray[0].location.lat}`,
                        alt: 0,
                        text: this.searchExtensivelyArray[0].name
                    },
                })
            }
        },

        searchExtensivelyChange () {
            if (this.searchExtensivelyValue == '') {
                this.searchExtensivelyValBoxShow = false
                this.isShowClearBtn = false
                this.searchExtensivelyArray = []
            } else {
                this.searchExtensivelyValBoxShow = true
                this.isShowClearBtn = true
                this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            }
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
        },

        searchExtensivelyVlaClick (item) {
            this.searchExtensivelyValBoxShow = false
            this.searchExtensivelyValue = item.name
            this.$EventBus.$emit('toPosition', {
                siteJd: `${item.location.lng}`,
                siteWd: `${item.location.lat}`,
                siteGd: 200,
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: 'label',
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 0,
                    text: item.name
                }
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: "billboard",
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 0,
                    url: '/img/icon/location.png'
                },
            })
        },

        searchExtensivelyFocus () {
            this.searchExtensivelyValBoxShow = true
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
        },

        clearSearchValue () {
            this.searchExtensivelyValue = ''
            this.searchExtensivelyChange()
        },
    },

    destroyed () {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'monitoringLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'searchLayer',
            type: 'label'
        })

        graphicLayer.destroy()
@@ -466,8 +595,9 @@

        .search-box {
            padding: 6px;
            height: 52px;
            height: 46px;
            display: flex;
            align-items: center;

            input {
                flex: 1;
@@ -475,8 +605,9 @@
                font-size: 18px;
                text-indent: 1em;
                color: #ffffff;
                background-color: transparent;
                border: 1px solid rgb(0, 92, 169);
                background-color: rgba(24, 79, 202, 0.6);
                // border: 1px solid rgb(0, 92, 169);
                border: 1px solid rgb(24, 79, 202);
                border-radius: 20px 0 0 20px;
            }

@@ -539,6 +670,11 @@

            .el-button {
                flex: 1;
            }

            :deep(.el-button--primary) {
                background-color: #1d5ce4;
                border-color: #1d5ce4;
            }
        }

@@ -623,5 +759,90 @@
            }
        }
    }

    .search-content {
        position: absolute;
        left: 760px;
        top: 40px;
        width: 460px;
        height: 36px;

        input {
            flex: 1;
            width: 400px;
            height: 100%;
            font-size: 18px;
            text-indent: 1em;
            color: #ffffff;
            background-color: rgba(24, 79, 202, 0.75);
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
            vertical-align: top;
        }

        input:focus {
            outline: none;
        }

        input::-webkit-input-placeholder {
            color: rgba(238, 238, 238, 0.7);
        }

        .clear {
            position: absolute;
            top: 0;
            right: 70px;
            cursor: pointer;
            img {
                width: 16px;
                height: 16px;
                margin-top: 10px;
            }
        }

        button {
            font-size: 24px;
            font-weight: 700;
            width: 60px;
            height: 100%;
            background-color: $table-body-tr-n-color;
            color: #fff;
            border: 1px solid rgb(0, 92, 169);
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }

        button:active {
            background-color: $table-body-tr-2n-color;
            border: 1px solid rgb(0, 92, 169);
        }
    }

    .searchExtensively-val-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 760px;
        width: 380px;
        max-height: 160px;
        text-align: left;
        color: #fff;
        background: $el-dialog-bg-color;
        z-index: 1111;
        border-radius: 10px;
        overflow: hidden;

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

            div {
                padding: 0 10px;
                line-height: 36px;
                cursor: pointer;
            }
        }
    }
}
</style>

 src/views/video/region.vue

@@ -14,33 +14,23 @@
        <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%"
                                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            <el-table :data="saveRangeList" 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"
                            >
                                @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 +40,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 +52,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 +62,104 @@
        </div>
        <div class="item video1" v-show="isShowVideo.video1">
            <div class="select" v-show="isShowSelect.video1">
                <el-select
                    size="small"
                    v-model="monitor.type1"
                    @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="monitor.type1" @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">
                <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="isShowVideo.video2">
            <div class="select" v-show="isShowSelect.video2">
                <el-select
                    size="small"
                    v-model="monitor.type2"
                    @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="monitor.type2" @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">
                <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="isShowVideo.video3">
            <div class="select" v-show="isShowSelect.video3">
                <el-select
                    size="small"
                    v-model="monitor.type3"
                    @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="monitor.type3" @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">
                <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="isShowVideo.video4">
            <div class="select" v-show="isShowSelect.video4">
                <el-select
                    size="small"
                    v-model="monitor.type4"
                    @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="monitor.type4" @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">
                <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="isShowVideo.video5">
            <div class="select" v-show="isShowSelect.video5">
                <el-select
                    size="small"
                    v-model="monitor.type5"
                    @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="monitor.type5" @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">
                <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="isShowVideo.video6">
            <div class="select" v-show="isShowSelect.video6">
                <el-select
                    size="small"
                    v-model="monitor.type6"
                    @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="monitor.type6" @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">
                <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="isShowVideo.video7">
            <div class="select" v-show="isShowSelect.video7">
                <el-select
                    size="small"
                    v-model="monitor.type7"
                    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="monitor.type7" 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">
                <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="isShowVideo.video8">
            <div class="select" v-show="isShowSelect.video8">
                <el-select
                    size="small"
                    v-model="monitor.type8"
                    @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="monitor.type8" @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">
                <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="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>
    </div>
</template>
@@ -340,7 +173,7 @@
let graphicLayer = null

export default {
    data () {
    data() {
        return {
            currentPage: 1,
            pagesize: 13,
@@ -401,12 +234,12 @@
        }
    },

    created () {
    created() {
        // this.getVideoList(1, 100)
        this.getRegionSaveList(this.currentPage, this.pagesize)
    },

    mounted () {
    mounted() {
        this.$parent.$parent.$parent.resize('400px', true)
        graphicLayer = new EntityDraw()
    },
@@ -461,7 +294,7 @@
        //     })
        // },

        playVideoList (flvItemPlayer, flvUrl, videoEleName) {
        playVideoList(flvItemPlayer, flvUrl, videoEleName) {
            if (this.flvListPlayer[flvItemPlayer] != null) {
                this.flvListPlayer[flvItemPlayer].pause()
                this.flvListPlayer[flvItemPlayer].unload()
@@ -484,14 +317,14 @@
            }
        },

        navClick (val, args) {
        navClick(val, args) {
            if (this.valChoosed == val && this.argsChoosed == args) return
            this.valChoosed = val
            this.argsChoosed = args
            this.playVideoList(`flvPlayer${args}`, `${this.monitorOption[val].flvUrl}`, `videoElement${args}`)
        },

        getRegionSaveList (current, size, name) {
        getRegionSaveList(current, size, name) {
            getRegionSaveList(current, size, name).then(res => {
                this.saveRangeList = res.data.data.records
                this.pagesCount = res.data.data.pages
@@ -499,7 +332,7 @@
            })
        },

        deleteRegionSaveList (id) {
        deleteRegionSaveList(id) {
            deleteRegionSaveList(id).then(res => {
                if (res.data.success) {
                    this.$message({
@@ -515,7 +348,7 @@
            })
        },

        flytoRange (data) {
        flytoRange(data) {
            this.$EventBus.$emit('flytoLayer', {
                polygonName: 'polygon' + data.id,
                duration: 3
@@ -523,7 +356,7 @@

        },

        initRangeListLayer () {
        initRangeListLayer() {
            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'rangeLayer',
                type: 'VectorLayer'
@@ -552,7 +385,7 @@

        },

        convertPositionDate (data, type) {
        convertPositionDate(data, type) {
            let positionStr = data
            positionStr = data.slice(11, positionStr.length - 1)
            let positionArr = positionStr.split(",")
@@ -568,7 +401,7 @@
            return positionNewStr
        },

        async getDevices (id, channelId) {
        async getDevices(id, channelId) {
            let flvAddress = ''
            await getDevices(id, channelId).then(res => {
                if ('data' in res.data) {
@@ -580,7 +413,7 @@
            return flvAddress
        },

        initMonitoringIcon () {
        initMonitoringIcon() {
            this.monitoringList.forEach((item, index) => {
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'monitoringLayers',
@@ -599,7 +432,7 @@
            })
        },

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

@@ -686,11 +519,11 @@
        //     }
        // },

        dialogBeforeClose () {
        dialogBeforeClose() {
            this.dialogVisible = false
        },

        searchChange () {
        searchChange() {
            if (this.searchValue == '') {
                this.searchValBoxShow = false
                this.searchArray = []
@@ -706,7 +539,7 @@
            }
        },

        searchClick () {
        searchClick() {
            if (this.searchValue != '') {
                this.searchValBoxShow = false
                this.getRegionSaveList(this.currentPage, this.pagesize, this.searchValue)
@@ -718,7 +551,7 @@
            }
        },

        searchVlaClick (item) {
        searchVlaClick(item) {
            this.searchValBoxShow = false
            this.searchArray = []
            // this.monitoringList = [item]
@@ -727,7 +560,7 @@
        },

        // 大小重置
        boxResize (val) {
        boxResize(val) {
            this.boxShow = val
        },

@@ -782,7 +615,7 @@

    },

    destroyed () {
    destroyed() {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'monitoringLayers',
            type: 'VectorLayer'
@@ -831,8 +664,9 @@

            .search-box {
                padding: 6px;
                height: 52px;
                height: 46px;
                display: flex;
                align-items: center;

                input {
                    flex: 1;
@@ -840,8 +674,9 @@
                    font-size: 18px;
                    text-indent: 1em;
                    color: #ffffff;
                    background-color: transparent;
                    border: 1px solid rgb(0, 92, 169);
                    background-color: rgba(24,79,202,0.6);
                    // border: 1px solid rgb(0, 92, 169);
                    border: 1px solid rgb(24, 79, 202);
                    border-radius: 20px 0 0 20px;
                }

@@ -886,7 +721,7 @@
                border-radius: 10px;
                overflow-y: auto;

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

                & > div {
                &>div {
                    height: 100%;
                    display: flex;
                    flex-direction: column;