警员、列表、活动添加大搜

guanqb

2023-01-05 047d3a65248b4301c6708f7f9b8a84f6b70a4f66

警员、列表、活动添加大搜

 src/components/map/index.vue

@@ -564,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/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/views/activity/index.vue

@@ -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: rgba(24, 79, 202, 0.6);;
                    background-color: rgba(24, 79, 202, 0.6);
                    border: 1px solid rgb(0, 92, 169);
                    border-radius: 5px 0 0 5px;
                }
@@ -1428,7 +1554,7 @@
                }

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

                .row-box.on {
@@ -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

@@ -970,8 +970,6 @@
                    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', {
@@ -1661,12 +1659,13 @@
        .clear {
            position: absolute;
            top: 0;
            right: 90px;
            font-size: 30px;
            height: 100%;
            line-height: 100%;
            color: #a8a8a8;
            right: 70px;
            cursor: pointer;
            img {
                width: 16px;
                height: 16px;
                margin-top: 10px;
            }
        }

        button {

 src/views/police/index.vue

@@ -14,29 +14,49 @@
        <div v-show="boxShow" class="container-content">
            <div class="switch-box">
                资源类别：
                <el-select v-model="typeValue" @change="navClick" placeholder="请选择" class="type-select-css">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                        class="option-css"></el-option>
                <el-select
                    v-model="typeValue"
                    @change="navClick"
                    placeholder="请选择"
                    class="type-select-css"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        class="option-css"
                    ></el-option>
                </el-select>
            </div>

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

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

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

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

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

                <div class="list" v-show="navType == 2">
                    <el-table :data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table
                        :data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight">
                        :height="currentTableHeight"
                    >
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="25%">
@@ -80,10 +117,20 @@

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

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

                <div class="list" v-show="navType == 3">
                    <el-table :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table
                        :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight">
                        :height="currentTableHeight"
                    >
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="dtType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="25%">
@@ -113,10 +168,20 @@

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

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

                <div class="list" v-show="navType == 4">
                    <el-table :data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table
                        :data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                        :height="currentTableHeight">
                        :height="currentTableHeight"
                    >
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column label="状态" min-width="25%">
@@ -146,10 +219,20 @@

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

                    <div class="pages">
                        <el-pagination background layout="prev, pager, next" :total="zfList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="zfList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
            </div>
@@ -191,9 +280,16 @@
                        <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>
                                <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>

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

@@ -237,18 +339,59 @@
                        </li>
                    </ul>
                </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 src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                style="object-fit: fill"></video>
        <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="dialogTitle"
            :modal="false"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                src="/video/sp.mp4"
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                style="object-fit: fill"
            ></video>
        </el-dialog>

        <el-dialog :title="phoneTitle" :modal="false" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
            :close-on-click-modal="true" class="phone-details-box">
        <el-dialog
            :title="phoneTitle"
            :modal="false"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
            <div class="item">
                <div>责任人：</div>
                <div>{{ phoneDetails.person }}</div>
@@ -276,12 +419,14 @@
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

export default {
    data() {
    data () {
        return {
            navType: 1,
            currentPage: 1,
@@ -320,9 +465,13 @@
            typeValue: '1',
            boxShow: true,
            carListSaveDate: [],
            searchExtensivelyValue: '',
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],

        }
    },
    created() {
    created () {
        this.getCarList(this.carCurrentPage, this.carPagesize)

        this.dtList = dtList
@@ -337,7 +486,7 @@
        window.addEventListener('resize', this.setTableHeight)

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

        this.navClick(1)
@@ -351,7 +500,7 @@
            this.getCarList(this.carCurrentPage, this.carPagesize)
        },

        getCarList(current, size, serialNumber) {
        getCarList (current, size, serialNumber) {
            getCarList(current, size, serialNumber).then(res => {
                console.log(res.data.data, 6666)
                this.carPagesCount = res.data.data.pages
@@ -360,7 +509,7 @@
            })
        },

        navClick(type) {
        navClick (type) {
            if (!type) { type = 1 }
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polylineLayer',
@@ -443,7 +592,7 @@
            }
        },

        rowClick(row) {
        rowClick (row) {
            this.$EventBus.$emit('toPosition', {
                layerName: 'carLayers',
                siteJd: row.lng,
@@ -451,7 +600,7 @@
            })
        },

        siteClick(e) {
        siteClick (e) {
            this.dialogTitle = e.overlay.attrParams.name
            this.dialogVisible = true

@@ -461,22 +610,22 @@
            }
        },

        phoneSiteClick(e) {
        phoneSiteClick (e) {
            this.phoneTitle = e.overlay.attrParams.name
            this.phoneDetails = e.overlay.attrParams
            this.phoneVisible = true
        },

        dialogBeforeClose() {
        dialogBeforeClose () {
            this.$refs.videoElement.pause()
            this.dialogVisible = false
        },

        phoneBeforeClose() {
        phoneBeforeClose () {
            this.phoneVisible = false
        },

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

        searchClick() {
        searchClick () {
            this.searchValBoxShow = false
            if (this.navType == 1) {
                this.getCarList(this.carCurrentPage, this.carPagesize, this.searchValue)
@@ -511,7 +660,7 @@
            }
        },

        searchVlaClick(item) {
        searchVlaClick (item) {
            this.searchValBoxShow = false
            this.searchArray = []
            if (this.navType == 1) {
@@ -525,11 +674,11 @@
            }
        },

        carDetail(row) {
        carDetail (row) {
            this.detailFlag = true
        },

        goBack() {
        goBack () {
            this.detailFlag = !this.detailFlag
            this.trackTime = []

@@ -543,7 +692,7 @@
            tc.removeTrack(track)
        },

        async lookTrack() {
        async lookTrack () {
            if (this.trackTime.length == 0) {
                this.$message({ message: "请选择开始时间", duration: 2000 })
                return
@@ -640,29 +789,123 @@
        },

        // 处理时间补零操作
        disposeTime(s) {
        disposeTime (s) {
            return s < 10 ? "0" + s : s
        },

        setTableHeight() {
        setTableHeight () {
            this.currentTableHeight = this.$refs.tableBox.offsetHeight - this.$refs.tableSearchBox.offsetHeight
        },

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

        async getHistoricalTrack(id) {
        async getHistoricalTrack (id) {
            let positionArr = []
            await getHistoricalTrack({ channelId: id }).then(res => {
                positionArr = res.data.data
            })
            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() {
    destroyed () {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'carLayers',
            type: 'VectorLayer'
@@ -686,6 +929,11 @@
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'polylineLayer',
            type: 'VectorLayer'
        })

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

        tc.pause()
@@ -720,7 +968,7 @@
            align-items: center;
            justify-content: space-around;

            &>div {
            & > div {
                flex: 1;
            }
        }
@@ -789,7 +1037,7 @@
                border-radius: 10px;
                overflow-y: auto;

                &>div {
                & > div {
                    height: 100%;
                    padding: 0 10px;
                    line-height: 36px;
@@ -828,7 +1076,6 @@
        .track-box {
            height: calc(100% - 50px);
            // background: rgba(20, 50, 123, 1);


            .track-box-info {
                background: rgba(8, 56, 185, 0.5);
@@ -874,18 +1121,18 @@
                color: #fff;
                border-bottom: 1px solid #fff;

                &>div {
                & > div {
                    text-align: center;
                }

                &>div:first-child {
                & > div:first-child {
                    flex: 2;
                }

                &>div:last-child {
                & > div:last-child {
                    flex: 6;

                    &>div {
                    & > div {
                        width: 100% !important;
                    }
                }
@@ -910,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

@@ -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="请输入搜索条件"
                />
                <button @click="searchClick" class="el-icon-search"></button>
            </div>

@@ -32,40 +37,97 @@
                <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="list-show">
                <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">
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            @cell-click="rowClick"
                        >
                            <el-table-column prop="name" label="设备名称" min-width="35%"></el-table-column>
                            <el-table-column prop="pTZTypeText" label="设备类型" min-width="35%"></el-table-column>
                            <el-table-column 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"
                            @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>
        </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>
        <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="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>
@@ -76,12 +138,13 @@
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

export default {
    data() {
    data () {
        return {
            currentPage: 1,
            pagesize: 15,
@@ -103,15 +166,18 @@
            drawName: '',
            drawInfo: [],
            drawType: 1,
            saveFlag: true
            saveFlag: true,
            searchExtensivelyValue: '',
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],
        }
    },

    created() {
    created () {
        this.getVideoList(this.currentPage, this.pagesize)
    },

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

@@ -121,7 +187,7 @@
            this.getVideoList(this.currentPage, this.pagesize)
        },

        getVideoList(current, size, name) {
        getVideoList (current, size, name) {
            getVideoList(current, size, name).then(res => {
                this.pagesCount = res.data.data.pages
                console.log(res, 22222)
@@ -135,7 +201,7 @@
            })
        },

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

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

        rowClick(row) {
        rowClick (row) {
            this.$EventBus.$emit('toPosition', {
                layerName: 'monitoringLayers',
                siteJd: row.longitude,
@@ -178,7 +244,7 @@
            })
        },

        async siteClick(e) {
        async siteClick (e) {
            if (this.flvPlayer != null) {
                this.flvPlayer.pause()
                this.flvPlayer.unload()
@@ -207,16 +273,16 @@
            }
        },

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

        drawDialogBeforeClose() {
        drawDialogBeforeClose () {
            this.drawDialogVisible = false
            this.drawName = ''
        },

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

        searchClick() {
        searchClick () {
            if (this.searchValue != '') {
                this.searchValBoxShow = false
                this.getVideoList(this.currentPage, this.pagesize, this.searchValue)
@@ -244,7 +310,7 @@
            }
        },

        searchVlaClick(item) {
        searchVlaClick (item) {
            this.searchValBoxShow = false
            this.searchArray = []
            this.monitoringList = [item]
@@ -252,7 +318,7 @@
            this.getVideoList(this.currentPage, this.pagesize, this.searchValue)
        },

        draw(type) {
        draw (type) {

            if (graphicLayer == null) graphicLayer = new EntityDraw()

@@ -275,7 +341,7 @@

        },

        removeDrawLayer() {
        removeDrawLayer () {
            this.inputpopup = false
            this.monitoringList = this.monitoringSaveList
            graphicLayer.clearLayer()
@@ -284,7 +350,7 @@
        },

        // 修改范围
        setRegion(range) {
        setRegion (range) {
            graphicLayer.addPolyLineGon(range, (lastEventData) => {
                console.log('数据更新')
                this.drawInfo = lastEventData
@@ -293,19 +359,19 @@
        },

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

        changeRange() {
        changeRange () {
            this.setRegion(this.range)
        },

        closeRangeInput() {
        closeRangeInput () {
            this.inputpopup = false
        },

        getRegionList(type, data) {
        getRegionList (type, data) {
            let positionStr = ''
            if (type == 'polyline') {
                JSON.parse(data).data.forEach(item => {
@@ -327,7 +393,7 @@
            })
        },

        saveDraw() {
        saveDraw () {
            if (this.drawInfo.length != 0) {
                this.drawDialogVisible = true
                this.saveFlag = false
@@ -340,7 +406,7 @@
        },

        // 保存绘制的线面
        saveDrawInfo() {
        saveDrawInfo () {
            if (this.drawName == '') {
                this.$message({
                    message: '请输入名称',
@@ -375,7 +441,7 @@
            }
        },

        insertRegionSaveList(type, positions, name, patrol) {
        insertRegionSaveList (type, positions, name, patrol) {
            insertRegionSaveList(type, positions, name, patrol).then(res => {
                if (res.data.success) {
                    this.$message({
@@ -390,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() {
    destroyed () {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'monitoringLayers',
            type: 'VectorLayer'
        })

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

        graphicLayer.destroy()
@@ -432,7 +598,6 @@
            height: 46px;
            display: flex;
            align-items: center;


            input {
                flex: 1;
@@ -487,7 +652,7 @@
            border-radius: 10px;
            overflow-y: auto;

            &>div {
            & > div {
                height: 100%;
                padding: 0 10px;
                line-height: 36px;
@@ -508,9 +673,9 @@
            }

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

        .range-input {
@@ -561,7 +726,7 @@
        .list-show {
            flex: 1;

            &>div {
            & > div {
                height: 100%;
                display: flex;
                flex-direction: column;
@@ -594,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>