样式调整

钟日健

2023-01-04 7e03e0254e5667d0a4edb95a6562ccdfbd06df74

样式调整

 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/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>
@@ -1347,7 +1347,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 +1428,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) {

 src/views/house/index.vue

@@ -1466,8 +1466,9 @@
                                        width: 84px;
                                        height: 26px;
                                        border-radius: 13px;
                                        background: #202434;
                                        // background: #202434;
                                        cursor: default;
                                        border: 0.0925925926vh solid #fff;
                                    }

                                    & > .on {
@@ -1586,7 +1587,7 @@
            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;

 src/views/police/index.vue

@@ -14,49 +14,29 @@
        <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%">
@@ -67,20 +47,10 @@

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

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

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

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

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

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

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

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

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

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

            <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>

        <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 :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>
@@ -398,7 +281,7 @@
let track = null

export default {
    data () {
    data() {
        return {
            navType: 1,
            currentPage: 1,
@@ -439,7 +322,7 @@
            carListSaveDate: [],
        }
    },
    created () {
    created() {
        this.getCarList(this.carCurrentPage, this.carPagesize)

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

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

        this.navClick(1)
@@ -468,7 +351,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
@@ -477,7 +360,7 @@
            })
        },

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

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

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

@@ -578,22 +461,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 = []
@@ -615,7 +498,7 @@
            }
        },

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

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

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

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

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

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

        // 处理时间补零操作
        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
@@ -779,7 +662,7 @@
        },
    },

    destroyed () {
    destroyed() {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'carLayers',
            type: 'VectorLayer'
@@ -837,7 +720,7 @@
            align-items: center;
            justify-content: space-around;

            & > div {
            &>div {
                flex: 1;
            }
        }
@@ -859,8 +742,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;
                }

@@ -905,7 +789,7 @@
                border-radius: 10px;
                overflow-y: auto;

                & > div {
                &>div {
                    height: 100%;
                    padding: 0 10px;
                    line-height: 36px;
@@ -943,7 +827,12 @@

        .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 +849,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 {
@@ -985,18 +874,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;
                    }
                }

 src/views/video/list.vue

@@ -13,16 +13,13 @@
    <div class="list 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 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>
@@ -35,74 +32,40 @@
                <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%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            @cell-click="rowClick"
                        >
                        <el-table :data="monitoringList" style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                            <el-table-column 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>
        <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>
@@ -118,7 +81,7 @@
let graphicLayer = null

export default {
    data () {
    data() {
        return {
            currentPage: 1,
            pagesize: 15,
@@ -144,11 +107,11 @@
        }
    },

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

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

@@ -158,7 +121,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)
@@ -172,7 +135,7 @@
            })
        },

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

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

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

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

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

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

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

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

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

        draw (type) {
        draw(type) {

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

@@ -312,7 +275,7 @@

        },

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

        // 修改范围
        setRegion (range) {
        setRegion(range) {
            graphicLayer.addPolyLineGon(range, (lastEventData) => {
                console.log('数据更新')
                this.drawInfo = lastEventData
@@ -330,19 +293,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 => {
@@ -364,7 +327,7 @@
            })
        },

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

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

        insertRegionSaveList (type, positions, name, patrol) {
        insertRegionSaveList(type, positions, name, patrol) {
            insertRegionSaveList(type, positions, name, patrol).then(res => {
                if (res.data.success) {
                    this.$message({
@@ -429,7 +392,7 @@
        },
    },

    destroyed () {
    destroyed() {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'monitoringLayers',
            type: 'VectorLayer'
@@ -466,8 +429,10 @@

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


            input {
                flex: 1;
@@ -475,8 +440,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;
            }

@@ -521,7 +487,7 @@
            border-radius: 10px;
            overflow-y: auto;

            & > div {
            &>div {
                height: 100%;
                padding: 0 10px;
                line-height: 36px;
@@ -540,6 +506,11 @@
            .el-button {
                flex: 1;
            }

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

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

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

 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;