销毁中删除图层

shuishen

2023-02-23 0aa4c5607e28dbe99b9a3eb29967269c17c8f057

销毁中删除图层

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-22 17:35:06
 * @LastEditTime: 2023-02-23 08:45:07
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -30,7 +30,7 @@
                <el-checkbox v-model="areaPolygonLayerShow" @change="areaPolygonChange">辖区</el-checkbox>
        </div>
        <!-- <div class="layers-control-btn house">
                            <el-checkbox v-model="houseLayerShow" @change="houseChange">小区</el-checkbox>
                                        <el-checkbox v-model="houseLayerShow" @change="houseChange">小区</el-checkbox>
            </div>-->
        <div class="layers-control-btn car">
                <el-checkbox v-model="carLayerShow" @change="carChange">警车</el-checkbox>
@@ -39,11 +39,11 @@
                <el-checkbox v-model="cameraLayerShow" @change="cameraChange">摄像头</el-checkbox>
            </div>
            <!-- <div class="layers-control-btn moitor">
                            <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>
                        </div>-->
                                        <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>
                                    </div>-->
            <!-- <div class="layers-control-btn panorama">
                            <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
                        </div>-->
                                        <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
                                    </div>-->
            <div class="layers-control-btn police-situation">
                <el-checkbox v-model="policeSituationLayerShow" @change="policeSituationChange">警情</el-checkbox>
            </div>
@@ -1989,6 +1989,8 @@

        // cylinderLayer != null && cylinderLayer != undefined && cylinderLayer != '' && cylinderLayer.remove()



        this.$store.commit('SET_DETAILSPOPUP', {
            showBox: false,
            showBtn: false
@@ -1997,6 +1999,11 @@
        global.viewer.dataSources.removeAll()

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

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

 src/views/house/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-22 15:12:21
 * @LastEditTime: 2023-02-23 08:46:15
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -13,50 +13,21 @@
    <div class="house-page container">
        <div v-show="boxShow" class="container-content">
            <div v-show="contentShow" class="search-box">
                <el-popover
                    ref="popover"
                    placement="bottom"
                    trigger="manual"
                    v-model="searchTreeShowFlag"
                    popper-class="tree-search-popup"
                    @mousedown.native="preventFocusLost"
                >
                    <el-tree
                        v-show="searchLazyFlag == true"
                        ref="popupTree"
                        style="overflow: auto;"
                        class="select-tree-box"
                        :load="loadNode"
                        :lazy="true"
                        :props="props"
                        @current-change="currentChangeHandle"
                        @mousedown.native="preventFocusLost"
                    ></el-tree>
                <el-popover ref="popover" placement="bottom" trigger="manual" v-model="searchTreeShowFlag"
                    popper-class="tree-search-popup" @mousedown.native="preventFocusLost">
                    <el-tree v-show="searchLazyFlag == true" ref="popupTree" style="overflow: auto;" class="select-tree-box"
                        :load="loadNode" :lazy="true" :props="props" @current-change="currentChangeHandle"
                        @mousedown.native="preventFocusLost"></el-tree>

                    <el-tree
                        v-show="searchLazyFlag == false"
                        :empty-text="treeEmptyText"
                        ref="popupTree"
                        style="overflow: auto;"
                        class="select-tree-box"
                        :data="searchTreeData"
                        :props="defaultProps"
                        :default-expand-all="true"
                        @current-change="currentChangeHandle"
                        @mousedown.native="preventFocusLost"
                    ></el-tree>
                    <el-tree v-show="searchLazyFlag == false" :empty-text="treeEmptyText" ref="popupTree"
                        style="overflow: auto;" class="select-tree-box" :data="searchTreeData" :props="defaultProps"
                        :default-expand-all="true" @current-change="currentChangeHandle"
                        @mousedown.native="preventFocusLost"></el-tree>
                </el-popover>

                <el-input
                    ref="searchTreeInput"
                    v-model="searchTreeName"
                    @input="searchInputTree"
                    @focus="searchTreeShowFlag = true"
                    @blur="searchTreeShowFlag = false"
                    v-popover:popover
                    placeholder="请输入搜索条件"
                    style="cursor: pointer;"
                ></el-input>
                <el-input ref="searchTreeInput" v-model="searchTreeName" @input="searchInputTree"
                    @focus="searchTreeShowFlag = true" @blur="searchTreeShowFlag = false" v-popover:popover
                    placeholder="请输入搜索条件" style="cursor: pointer;"></el-input>
            </div>

            <div v-show="contentShow" class="result-content" ref="resultContentBox">
@@ -68,15 +39,9 @@
                    <div class="housing-bg">
                        <div class="block">
                            <el-carousel height="150px">
                                <el-carousel-item
                                    v-for="(item, index) in villageInfo.pic_url_list"
                                    :key="index"
                                >
                                    <el-image
                                        style=" height: 100%"
                                        :src="item"
                                        :preview-src-list="villageInfo.pic_url_list"
                                    ></el-image>
                                <el-carousel-item v-for="(item, index) in villageInfo.pic_url_list" :key="index">
                                    <el-image style=" height: 100%" :src="item"
                                        :preview-src-list="villageInfo.pic_url_list"></el-image>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
@@ -102,42 +67,16 @@
                </div>

                <div class="nav-tab" ref="navTabBox">
                    <div
                        class="nav"
                        :class="navType == 0 ? 'choosed' : ''"
                        @click="navClick"
                        data-type="0"
                    >基本信息</div>
                    <div
                        class="nav"
                        :class="navType == 1 ? 'choosed' : ''"
                        @click="navClick"
                        data-type="1"
                    >报警信息</div>
                    <div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick" data-type="0">基本信息</div>
                    <div class="nav" :class="navType == 1 ? 'choosed' : ''" @click="navClick" data-type="1">报警信息</div>
                </div>

                <div class="base-info" v-show="navType == 0">
                    <div class="sub-nav-list">
                        <div
                            class="sub-nav"
                            :class="{ on: subNavType == 1 }"
                            @click="subNavType = 1"
                        >楼栋</div>
                        <div
                            class="sub-nav"
                            :class="{ on: subNavType == 2 }"
                            @click="subNavType = 2"
                        >出入口</div>
                        <div
                            class="sub-nav"
                            :class="{ on: subNavType == 3 }"
                            @click="subNavType = 3"
                        >停车场</div>
                        <div
                            class="sub-nav"
                            :class="{ on: subNavType == 4 }"
                            @click="subNavType = 4"
                        >商业</div>
                        <div class="sub-nav" :class="{ on: subNavType == 1 }" @click="subNavType = 1">楼栋</div>
                        <div class="sub-nav" :class="{ on: subNavType == 2 }" @click="subNavType = 2">出入口</div>
                        <div class="sub-nav" :class="{ on: subNavType == 3 }" @click="subNavType = 3">停车场</div>
                        <div class="sub-nav" :class="{ on: subNavType == 4 }" @click="subNavType = 4">商业</div>
                    </div>

                    <div class="floor-content" v-show="subNavType == 1">
@@ -148,30 +87,20 @@
                            <div class="build-outBox" ref="BuildOutBox">
                                <div class="build-box" style="left: 0px;">
                                    <!-- :style="{ width: `calc(${Math.ceil(buildingList.length / 10)} * (356 / 1920) * 100vw` }" -->
                                    <div
                                        class="ridgepole-list"
                                        v-for="index of Math.ceil(buildingList.length / 10)"
                                        :key="index"
                                    >
                                        <div
                                            v-for="(item, index) in buildingList.slice((index - 1) * 10, index * 10)"
                                            :key="index"
                                            @click="buildingClick(item)"
                                            :class="{ on: buildingChoosed.name == item.name }"
                                            :title="item.name"
                                        >
                                    <div class="ridgepole-list" v-for="index of Math.ceil(buildingList.length / 10)"
                                        :key="index">
                                        <div v-for="(item, index) in buildingList.slice((index - 1) * 10, index * 10)"
                                            :key="index" @click="buildingClick(item)"
                                            :class="{ on: buildingChoosed.name == item.name }" :title="item.name">
                                            {{
                                            item.name
                                                item.name
                                            }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="nextBtn rightBtn" @click="nextBtn">
                                <i
                                    v-show="buildingList.length > 10 && nextBtnShow"
                                    class="el-icon-caret-right"
                                ></i>
                                <i v-show="buildingList.length > 10 && nextBtnShow" class="el-icon-caret-right"></i>
                            </div>
                        </div>

@@ -197,23 +126,23 @@
                            <div class="title">人口情况</div>

                            <div class="content">
                                <div class="one">
                                    <div @click="goTOPeopleDetail(1)">
                                        <div>{{ peopleInfo.registeredPopulation }}</div>
                                        <div>户籍人口</div>
                                    </div>
                                    <div @click="goTOPeopleDetail(2)">
                                        <div style="color:#FF796C">{{ peopleInfo.KeyPopulation }}</div>
                                        <div>重点人口</div>
                                    </div>
                            <div class="one">
                                <div @click="goTOPeopleDetail(1)">
                                    <div>{{ peopleInfo.registeredPopulation }}</div>
                                    <div>户籍人口</div>
                                </div>
                                <!-- 
                                <div @click="goTOPeopleDetail(2)">
                                    <div style="color:#FF796C">{{ peopleInfo.KeyPopulation }}</div>
                                    <div>重点人口</div>
                                </div>
                            </div>
                            <!-- 
                                <div class="two">
                                    <div>
                                        <div>98</div>
                                        <div>户籍人口</div>
                                    </div>
                                    <div>
                                            <div>户籍人口</div>
                                        </div>
                                        <div>
                                        <div style="color:#0E88FF">20</div>
                                        <div>流动人口</div>
                                    </div>
@@ -222,9 +151,9 @@
                                        <div>境外人口</div>
                                    </div>
                                </div>-->
                            </div>
                        </div>
                        <!-- <div class="house-info">
                    </div>
                    <!-- <div class="house-info">
                            <div class="title">房屋情况</div>

                            <div class="content">
@@ -235,39 +164,29 @@
                                <div>
                                    <div>120</div>
                                    <div>出租</div>
                                    </div>
                                    <div>
                                        <div>160</div>
                                        <div>自住</div>
                                    </div>
                                    <div>
                                        <div>8</div>
                                        <div>空置</div>
                                    </div>
                                </div>
                                <div>
                                    <div>160</div>
                                    <div>自住</div>
                                </div>
                                <div>
                                    <div>8</div>
                                    <div>空置</div>
                                </div>
                            </div>
                        </div>-->
                            </div>-->
                        <div class="house-element-info" v-if="isShowHouseBox">
                            <!-- 选择单元 -->
                            <div class="condo" v-show="isShowUnitChoose">
                                <div class="type">选择单元</div>
                                <div class="type-select">
                                    <el-select
                                        size="small"
                                        v-model="unitValue"
                                        placeholder="请选择"
                                        @change="chooseUnit"
                                    >
                                        <el-option
                                            v-for="item in unitOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                            class="unit-option"
                                        ></el-option>
                                    </el-select>
                                </div>
                        <!-- 选择单元 -->
                        <div class="condo" v-show="isShowUnitChoose">
                            <div class="type">选择单元</div>
                            <div class="type-select">
                                <el-select size="small" v-model="unitValue" placeholder="请选择" @change="chooseUnit">
                                    <el-option v-for="item in unitOptions" :key="item.value" :label="item.label"
                                        :value="item.value" class="unit-option"></el-option>
                                </el-select>
                            </div>
                            <!-- <div class="legend">
                        </div>
                        <!-- <div class="legend">
                                <div class="type">人口图例</div>
                                <div class="type-val">
                                    <div>
@@ -300,76 +219,55 @@
                                    <div>
                                        <span class="zizhu"></span>
                                        自住
                                        </div>
                                        <div>
                                            <span class="kongzhi"></span>
                                            空置
                                        </div>
                                        <div>
                                            <span class="shangye"></span>
                                            商业
                                        </div>
                                    </div>
                                    <div>
                                        <span class="kongzhi"></span>
                                        空置
                                    </div>
                                    <div>
                                        <span class="shangye"></span>
                                        商业
                                    </div>
                                </div>
                            </div>-->
                            <el-main
                                v-loading="pictLoading"
                                element-loading-background="rgba(17, 38, 163, .1)"
                                element-loading-text="数据正在加载中"
                                element-loading-spinner="el-icon-loading"
                                v-show="isShowHouseBox"
                            >
                                </div>-->
                            <el-main v-loading="pictLoading" element-loading-background="rgba(17, 38, 163, .1)"
                                element-loading-text="数据正在加载中" element-loading-spinner="el-icon-loading"
                                v-show="isShowHouseBox">
                                <div class="floor-outBox">
                                    <div
                                        @click="lastFloorBtn"
                                        class="floorBtn"
                                        v-show="lastFloorShow"
                                    >
                                    <div @click="lastFloorBtn" class="floorBtn" v-show="lastFloorShow">
                                        <i class="el-icon-caret-left"></i>
                                    </div>
                                    <div class="floor-box">
                                        <div class="floor-num" style="left: 0">
                                            <div
                                                :class="{ on: floorsType == index }"
                                                @click="floorsType = index"
                                                v-for="index in Math.ceil(unitHouseChoosed.length / 5)"
                                                :key="index"
                                            >
                                            <div :class="{ on: floorsType == index }" @click="floorsType = index"
                                                v-for="index in Math.ceil(unitHouseChoosed.length / 5)" :key="index">
                                                {{ unitHouseChoosed[index * 5 - 5].floor_num }}-{{
                                                unitHouseChoosed[index *
                                                5
                                                - 1]? unitHouseChoosed[index * 5
                                                - 1].floor_num : unitHouseChoosed[unitHouseChoosed.length - 1].floor_num
                                                    unitHouseChoosed[index *
                                                    5
                                                    - 1] ? unitHouseChoosed[index * 5
                                                        - 1].floor_num : unitHouseChoosed[unitHouseChoosed.length - 1].floor_num
                                                }}层
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        @click="nextFloorBtn"
                                        class="floorBtn rightFloorBtn"
                                        v-show="nextFloorShow"
                                    >
                                    <div @click="nextFloorBtn" class="floorBtn rightFloorBtn" v-show="nextFloorShow">
                                        <i class="el-icon-caret-right"></i>
                                    </div>
                                </div>

                                <div class="floor-detail">
                                    <div
                                        v-for="(item, index) in unitHouseChoosed.slice((floorsType - 1) * 5, floorsType * 5)"
                                        :key="index"
                                    >
                            <div class="floor-detail">
                                <div v-for="(item, index) in unitHouseChoosed.slice((floorsType - 1) * 5, floorsType * 5)"
                                        :key="index">
                                        <div class="title">{{ item.floor_num }}层：</div>
                                        <div class="detail">
                                            <div
                                                v-for="(value, index) in item.floor_house"
                                                :key="index"
                                            <div v-for="(value, index) in item.floor_house" :key="index"
                                                @click="residentDetailsClick(value)"
                                                :class="{ on: floorChoosed == value.properties.fojcu }"
                                            >
                                                :class="{ on: floorChoosed == value.properties.fojcu }">
                                                <!-- :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]" -->
                                                {{ value.properties.fojcu }}
                                                <!-- <div class="flow"></div>
                                            <div class="focus"></div>
                                                <div class="warning"></div>-->
                                                <div class="focus"></div>
                                                    <div class="warning"></div>-->
                                            </div>
                                        </div>
                                    </div>
@@ -379,60 +277,36 @@
                    </div>

                    <div class="come-out-content" v-show="subNavType == 2">
                        <el-table
                            :data="comeOutData"
                            style="width: 100%"
                        <el-table :data="comeOutData" style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName"
                            @row-click="deepDataRowClick($event, 'comeOut')"
                        >
                            <el-table-column
                                prop="name"
                                label="名称"
                                width="180"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            :row-class-name="tableRowClassName" @row-click="deepDataRowClick($event, 'comeOut')">
                            <el-table-column prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="x" label="经度" width="100"></el-table-column>
                            <el-table-column prop="y" label="纬度" width="100"></el-table-column>
                        </el-table>
                    </div>

                    <div class="park-content" v-show="subNavType == 3">
                        <el-table
                            :data="parkingLotData"
                            style="width: 100%"
                        <el-table :data="parkingLotData" style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName"
                            @row-click="deepDataRowClick($event, 'park')"
                        >
                            <el-table-column
                                prop="name"
                                label="名称"
                                width="180"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            :row-class-name="tableRowClassName" @row-click="deepDataRowClick($event, 'park')">
                            <el-table-column prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="x" label="经度" width="100"></el-table-column>
                            <el-table-column prop="y" label="纬度" width="100"></el-table-column>
                        </el-table>
                    </div>

                    <div class="business-content" v-show="subNavType == 4">
                        <el-table
                            :data="businessData"
                            style="width: 100%"
                        <el-table :data="businessData" style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            :row-class-name="tableRowClassName"
                            @row-click="deepDataRowClick($event, 'business')"
                        >
                            <el-table-column
                                prop="name"
                                label="名称"
                                width="180"
                                :show-overflow-tooltip="true"
                            ></el-table-column>
                            :row-class-name="tableRowClassName" @row-click="deepDataRowClick($event, 'business')">
                            <el-table-column prop="name" label="名称" width="180"
                                :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="x" label="经度" width="100"></el-table-column>
                            <el-table-column prop="y" label="纬度" width="100"></el-table-column>
                        </el-table>
@@ -440,62 +314,35 @@
                </div>

                <div class="police-info" v-if="navType == 1" ref="policeTableBox">
                    <el-table
                        :data="callPoliceData"
                        style="width: 100%"
                        :height="currentTableHeight"
                    <el-table :data="callPoliceData" style="width: 100%" :height="currentTableHeight"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName"
                        @row-click="clickData"
                    >
                        <el-table-column
                            prop="JJDWMC"
                            :show-overflow-tooltip="true"
                            label="接警单位"
                            min-width="34%"
                        ></el-table-column>
                        :row-class-name="tableRowClassName" @row-click="clickData">
                        <el-table-column prop="JJDWMC" :show-overflow-tooltip="true" label="接警单位"
                            min-width="34%"></el-table-column>
                        <el-table-column label="报警时间" min-width="26%">
                            <template slot-scope="scope">
                                <span>{{ scope.row.BJSJ.substring(0, 10) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="JJYXM"
                            :show-overflow-tooltip="true"
                            label="接警员"
                            min-width="20%"
                        ></el-table-column>
                        <el-table-column
                            prop="BJRXM"
                            :show-overflow-tooltip="true"
                            label="报警人"
                            min-width="20%"
                        ></el-table-column>
                        <el-table-column prop="JJYXM" :show-overflow-tooltip="true" label="接警员"
                            min-width="20%"></el-table-column>
                        <el-table-column prop="BJRXM" :show-overflow-tooltip="true" label="报警人"
                            min-width="20%"></el-table-column>
                    </el-table>

                    <div class="pages" ref="ElPagination">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :page-size="callPolicePage.pageSize"
                            :page-count="callPolicePage.count"
                            :current-page="callPolicePage.currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <el-pagination background layout="prev, pager, next" :page-size="callPolicePage.pageSize"
                            :page-count="callPolicePage.count" :current-page="callPolicePage.currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- <transition name="special-animal"></transition>-->
        <div class="search-content">
            <input
                v-model="searchExtensivelyValue"
                @input="searchExtensivelyChange"
                @focus="searchExtensivelyFocus"
                type="text"
                placeholder="请输入搜索条件"
            />
            <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus"
                type="text" placeholder="请输入搜索条件" />
            <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
                <img src="../../../public/img/icon/clear.png" alt />
            </div>
@@ -503,23 +350,13 @@
        </div>
        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
            <div>
                <div
                    @click="searchExtensivelyVlaClick(item)"
                    v-for="(item, index) in searchExtensivelyArray"
                    :key="index"
                >{{ item.name }}</div>
                <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray" :key="index">
                    {{ item.name }}</div>
            </div>
        </div>

        <el-dialog
            title="报警信息"
            :modal="true"
            :visible.sync="policeSituationVisible"
            :append-to-body="true"
            :before-close="policeSituationBeforeClose"
            :close-on-click-modal="true"
            class="policeSituation-details-box"
        >
        <el-dialog title="报警信息" :modal="true" :visible.sync="policeSituationVisible" :append-to-body="true"
            :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box">
            <div class="box">
                <div class="item">
                    <div>接警单位编号:</div>
@@ -580,34 +417,19 @@
            </div>
        </el-dialog>

        <el-dialog
            :title="residentDetailsTitle"
            :modal="false"
            :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose"
            :close-on-click-modal="true"
            class="resident-details-box"
            width="24%"
        >
            <el-table
                :data="houseDate"
        <el-dialog :title="residentDetailsTitle" :modal="false" :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose" :close-on-click-modal="true" class="resident-details-box" width="24%">
            <el-table :data="houseDate"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
            >
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }">
                <el-table-column prop="realName" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column prop="cardNo" label="身份证号"></el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog
            :title="keyPersonTitle"
            :modal="false"
            :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose"
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
        <el-dialog :title="keyPersonTitle" :modal="false" :visible.sync="keyPersonVisible"
            :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box">
            <div class="header">
                <div>
                    姓名：
@@ -618,21 +440,14 @@
                    <input type="text" v-model="callPhone" placeholder="请输入联系电话" />
                </div>
                <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button>
                <el-button
                    type="primary"
                    icon="el-icon-delete"
                    @click="clearPeopleDetailSearchValue"
                >清空</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
            </div>
            <el-table
                :data="personDetailArr"
                style="width: 100%"
            <el-table :data="personDetailArr" style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                <el-table-column label="序号" type="index" width="50" align="center">
                    <template slot-scope="scope">
                        <span>{{(peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index + 1}}</span>
                        <span>{{ (peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="zdryxl" label="重点人员类型" v-if="keyPeopleType == 2"></el-table-column>
@@ -644,14 +459,9 @@
                <el-table-column prop="areaName" label="所属责任区"></el-table-column>
            </el-table>
            <div class="pages" ref="tablePagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="peoplePage.pageSize"
                    :total="peoplePage.total"
                    :current-page="peoplePage.currentPage"
                    @current-change="peopleHandleCurrentChange"
                ></el-pagination>
                <el-pagination background layout="prev, pager, next" :page-size="peoplePage.pageSize"
                    :total="peoplePage.total" :current-page="peoplePage.currentPage"
                    @current-change="peopleHandleCurrentChange"></el-pagination>
            </div>
        </el-dialog>
    </div>
@@ -1588,11 +1398,11 @@
        })

        this.$parent.$parent.resize('0px')
        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'searchLayer',
            type: 'VectorLayer'
        })
        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'deepDataLayer',
            type: 'VectorLayer'
        })
@@ -1685,7 +1495,7 @@
            border-radius: 10px;
            overflow: hidden;

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

@@ -1720,11 +1530,9 @@
                        left: 10px;
                        right: 10px;
                        bottom: 4px;
                        background: linear-gradient(
                            135deg,
                            rgb(33 150 243 / 74%),
                            rgb(254 254 254 / 0%)
                        );
                        background: linear-gradient(135deg,
                                rgb(33 150 243 / 74%),
                                rgb(254 254 254 / 0%));
                        z-index: -1;
                    }
                }
@@ -1735,7 +1543,7 @@
                }

                .housing-introduce {
                    & > div {
                    &>div {
                        padding: 0 10px;
                        display: flex;

@@ -1798,7 +1606,7 @@
                    }
                }

                & > .floor-content {
                &>.floor-content {
                    .build-info {
                        display: flex;
                        position: relative;
@@ -1847,7 +1655,7 @@
                                    flex-wrap: wrap;
                                    width: 356px;

                                    & > div {
                                    &>div {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
@@ -1881,7 +1689,7 @@
                        .content {
                            display: flex;

                            & > div {
                            &>div {
                                height: 26px;
                                line-height: 26px;
                                flex: 1;
@@ -1889,11 +1697,11 @@
                                justify-content: center;
                                border-right: 1px solid #50555f;

                                & > div {
                                &>div {
                                    cursor: pointer;
                                }

                                & > div:last-child {
                                &>div:last-child {
                                    margin-left: 14px;
                                    font-size: 18px;
                                    font-weight: bold;
@@ -1901,11 +1709,11 @@
                                }
                            }

                            & > div:first-child {
                            &>div:first-child {
                                width: 30%;
                            }

                            & > div:last-child {
                            &>div:last-child {
                                border: none;
                            }
                        }
@@ -1930,10 +1738,10 @@
                                display: flex;
                                justify-content: space-around;

                                & > div {
                                &>div {
                                    flex: 1;

                                    & > div:first-child {
                                    &>div:first-child {
                                        height: 30px;
                                        line-height: 30px;
                                        font-size: 18px;
@@ -1941,7 +1749,7 @@
                                        color: #499d99;
                                    }

                                    & > div:last-child {
                                    &>div:last-child {
                                        height: 26px;
                                        line-height: 26px;
                                    }
@@ -1956,8 +1764,8 @@
                            justify-content: space-around;
                            background: rgba(8, 56, 185, 0.5);

                            & > div {
                                & > div:first-child {
                            &>div {
                                &>div:first-child {
                                    height: 30px;
                                    line-height: 30px;
                                    font-size: 18px;
@@ -1995,6 +1803,7 @@
                    }

                    .house-element-info {

                        .condo,
                        .legend {
                            display: flex;
@@ -2017,12 +1826,12 @@
                                display: flex;
                                flex: 1;

                                & > div {
                                &>div {
                                    flex: 1;
                                    display: flex;
                                    align-items: center;

                                    & > span {
                                    &>span {
                                        margin: 0 10px;
                                        width: 14px;
                                        height: 8px;
@@ -2089,7 +1898,7 @@
                                    left: 0;
                                    transition: all 1s;

                                    & > div {
                                    &>div {
                                        margin: 0 4px;
                                        display: flex;
                                        justify-content: center;
@@ -2102,7 +1911,7 @@
                                        border: 0.0925925926vh solid #fff;
                                    }

                                    & > .on {
                                    &>.on {
                                        border: 1px solid orange;
                                        color: orange;
                                    }
@@ -2114,7 +1923,7 @@
                            margin-top: 14px;
                            height: 220px;

                            & > div {
                            &>div {
                                margin: 8px;
                                height: 36px;
                                line-height: 36px;
@@ -2128,7 +1937,7 @@
                                    flex: 1;
                                    display: flex;

                                    & > div {
                                    &>div {
                                        margin: 0 4px;
                                        position: relative;
                                        width: 68px;
@@ -2152,38 +1961,34 @@
                                        }

                                        .focus {
                                            top: calc(
                                                (100% - 18px) / 4 * 2 + 6px
                                            );
                                            top: calc((100% - 18px) / 4 * 2 + 6px);
                                            background: rgb(255, 121, 108);
                                        }

                                        .warning {
                                            top: calc(
                                                (100% - 18px) / 4 * 3 + 12px
                                            );
                                            top: calc((100% - 18px) / 4 * 3 + 12px);
                                            background: rgb(254, 172, 4);
                                        }
                                    }

                                    & > .on {
                                    &>.on {
                                        color: orange;
                                        border-color: orange !important;
                                    }

                                    & > .chuzu {
                                    &>.chuzu {
                                        border: 1px solid #3a8b3a;
                                    }

                                    & > .zizhu {
                                    &>.zizhu {
                                        border: 1px solid #2c77bb;
                                    }

                                    & > .kongzhi {
                                    &>.kongzhi {
                                        border: 1px solid #5c6169;
                                    }

                                    & > .shangye {
                                    &>.shangye {
                                        border: 1px solid #cc9456;
                                    }
                                }
@@ -2304,7 +2109,7 @@
        border-radius: 10px;
        overflow: hidden;

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

@@ -2334,11 +2139,9 @@
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: linear-gradient(
        135deg,
        rgba(252, 252, 252, 0.108),
        rgb(254, 254, 254)
    );
    background: linear-gradient(135deg,
            rgba(252, 252, 252, 0.108),
            rgb(254, 254, 254));
    animation: prog 3s ease infinite;
}


 src/views/police/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-21 16:54:24
 * @LastEditTime: 2023-02-23 08:46:42
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @Description: 辖区管理
 * 
@@ -14,84 +14,40 @@
        <div v-show="boxShow" class="container-content">
            <div class="switch-box" v-show="!detailFlag">
                资源类别：
                <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" v-if="!detailFlag">
                <div class="search-box">
                    资源名称：
                    <input
                        v-model="searchValue"
                        @input="searchChange"
                        type="text"
                        placeholder="请输入…"
                    />
                    <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入…" />
                </div>

                <div class="list" ref="tableBox">
                    <el-table
                        :data="equimentTableData"
                    <el-table :data="equimentTableData"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', borderColor: '#324e75' }"
                        :cell-style="{ 'text-align': 'center', borderColor: '#324e75', cursor: 'pointer' }"
                        :height="currentTableHeight"
                    >
                        <el-table-column
                            prop="newName"
                            :show-overflow-tooltip="true"
                            label="名称"
                            :min-width="typeValue == 0 ? '56%' : '68%'"
                        ></el-table-column>
                        <el-table-column
                            prop="status"
                            label="状态"
                            :min-width="typeValue == 0 ? '14%' : '14%'"
                        >
                        :height="currentTableHeight">
                        <el-table-column prop="newName" :show-overflow-tooltip="true" label="名称"
                            :min-width="typeValue == 0 ? '56%' : '68%'"></el-table-column>
                        <el-table-column prop="status" label="状态" :min-width="typeValue == 0 ? '14%' : '14%'">
                            <template slot-scope="scope">
                                <div class="state-box" :class="{ online: scope.row.status == '1' }"></div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            align="center"
                            :min-width="typeValue == 0 ? '30%' : '18%'"
                        >
                        <el-table-column label="操作" align="center" :min-width="typeValue == 0 ? '30%' : '18%'">
                            <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
                                    v-show="navType == 0"
                                    @click="equipmentTrack(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                <el-button v-show="navType == 0" @click="equipmentTrack(scope.row)" type="text" size="small"
                                    title="轨迹">
                                    <i class="el-icon-position"></i>
                                </el-button>
                                <el-button
                                    @click="play(scope.row)"
                                    type="text"
                                    size="small"
                                    title="播放视频"
                                >
                                <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                    <i class="el-icon-video-play"></i>
                                </el-button>
                            </template>
@@ -99,15 +55,9 @@
                    </el-table>

                    <div class="pages" ref="tablePagination">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :page-size="equimentPage.pageSize"
                            :page-count="equimentPage.count"
                            :pager-count="4"
                            :current-page="equimentPage.currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <el-pagination background layout="prev, pager, next" :page-size="equimentPage.pageSize"
                            :page-count="equimentPage.count" :pager-count="4" :current-page="equimentPage.currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>
            </div>
@@ -135,8 +85,8 @@
                            <div>状态：</div>
                            <div>
                                {{
                                currentSelectEquipment.status ? (currentSelectEquipment.status == 0 ? '离线' : '在线') :
                                ''
                                    currentSelectEquipment.status ? (currentSelectEquipment.status == 0 ? '离线' : '在线') :
                                    ''
                                }}
                            </div>
                        </li>
@@ -144,16 +94,9 @@
                        <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>

@@ -166,13 +109,8 @@
        </div>

        <div class="search-content">
            <input
                v-model="searchExtensivelyValue"
                @input="searchExtensivelyChange"
                @focus="searchExtensivelyFocus"
                type="text"
                placeholder="请输入搜索条件"
            />
            <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus"
                type="text" placeholder="请输入搜索条件" />
            <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
                <img src="../../../public/img/icon/clear.png" alt />
            </div>
@@ -181,31 +119,15 @@

        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
            <div>
                <div
                    @click="searchExtensivelyVlaClick(item)"
                    v-for="(item, index) in searchExtensivelyArray"
                    :key="index"
                >{{ item.name }}</div>
                <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray" :key="index">
                    {{ item.name }}</div>
            </div>
        </div>

        <el-dialog
            :title="dialogTitle"
            :modal="false"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                id="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 autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement"
                style="object-fit: fill"></video>
        </el-dialog>
    </div>
</template>
@@ -723,7 +645,7 @@
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'searchLayer',
            type: 'VectorLayer'
        })
@@ -760,7 +682,7 @@
            align-items: center;
            justify-content: space-around;

            & > div {
            &>div {
                flex: 1;
            }
        }
@@ -873,18 +795,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;
                    }
                }
@@ -986,7 +908,7 @@
        border-radius: 10px;
        overflow: hidden;

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


 src/views/policeInfor/index.vue

@@ -14,84 +14,40 @@
        <div v-show="boxShow" class="container-content">
            <div class="switch-box" v-show="!detailFlag">
                资源类别：
                <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" v-if="!detailFlag">
                <div class="search-box">
                    资源名称：
                    <input
                        v-model="searchValue"
                        @input="searchChange"
                        type="text"
                        placeholder="请输入…"
                    />
                    <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入…" />
                </div>

                <div class="list" ref="tableBox">
                    <el-table
                        :data="equimentTableData"
                    <el-table :data="equimentTableData"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', borderColor: '#324e75' }"
                        :cell-style="{ 'text-align': 'center', borderColor: '#324e75', cursor: 'pointer' }"
                        :height="currentTableHeight"
                    >
                        <el-table-column
                            prop="newName"
                            :show-overflow-tooltip="true"
                            label="名称"
                            :min-width="typeValue == 0 ? '56%' : '68%'"
                        ></el-table-column>
                        <el-table-column
                            prop="status"
                            label="状态"
                            :min-width="typeValue == 0 ? '14%' : '14%'"
                        >
                        :height="currentTableHeight">
                        <el-table-column prop="newName" :show-overflow-tooltip="true" label="名称"
                            :min-width="typeValue == 0 ? '56%' : '68%'"></el-table-column>
                        <el-table-column prop="status" label="状态" :min-width="typeValue == 0 ? '14%' : '14%'">
                            <template slot-scope="scope">
                                <div class="state-box" :class="{ online: scope.row.status == '1' }"></div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            align="center"
                            :min-width="typeValue == 0 ? '30%' : '18%'"
                        >
                        <el-table-column label="操作" align="center" :min-width="typeValue == 0 ? '30%' : '18%'">
                            <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
                                    v-show="navType == 0"
                                    @click="equipmentTrack(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                <el-button v-show="navType == 0" @click="equipmentTrack(scope.row)" type="text" size="small"
                                    title="轨迹">
                                    <i class="el-icon-position"></i>
                                </el-button>
                                <el-button
                                    @click="play(scope.row)"
                                    type="text"
                                    size="small"
                                    title="播放视频"
                                >
                                <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                    <i class="el-icon-video-play"></i>
                                </el-button>
                            </template>
@@ -99,15 +55,9 @@
                    </el-table>

                    <div class="pages" ref="tablePagination">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :page-size="equimentPage.pageSize"
                            :page-count="equimentPage.count"
                            :pager-count="4"
                            :current-page="equimentPage.currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                        <el-pagination background layout="prev, pager, next" :page-size="equimentPage.pageSize"
                            :page-count="equimentPage.count" :pager-count="4" :current-page="equimentPage.currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>
            </div>
@@ -135,8 +85,8 @@
                            <div>状态：</div>
                            <div>
                                {{
                                currentSelectEquipment.status ? (currentSelectEquipment.status == 0 ? '离线' : '在线') :
                                ''
                                    currentSelectEquipment.status ? (currentSelectEquipment.status == 0 ? '离线' : '在线') :
                                    ''
                                }}
                            </div>
                        </li>
@@ -144,16 +94,9 @@
                        <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>

@@ -166,13 +109,8 @@
        </div>

        <div class="search-content">
            <input
                v-model="searchExtensivelyValue"
                @input="searchExtensivelyChange"
                @focus="searchExtensivelyFocus"
                type="text"
                placeholder="请输入搜索条件"
            />
            <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus"
                type="text" placeholder="请输入搜索条件" />
            <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
                <img src="../../../public/img/icon/clear.png" alt />
            </div>
@@ -181,31 +119,15 @@

        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
            <div>
                <div
                    @click="searchExtensivelyVlaClick(item)"
                    v-for="(item, index) in searchExtensivelyArray"
                    :key="index"
                >{{ item.name }}</div>
                <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray" :key="index">
                    {{ item.name }}</div>
            </div>
        </div>

        <el-dialog
            :title="dialogTitle"
            :modal="false"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                id="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 autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement"
                style="object-fit: fill"></video>
        </el-dialog>
    </div>
</template>
@@ -723,7 +645,7 @@
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'searchLayer',
            type: 'VectorLayer'
        })
@@ -760,7 +682,7 @@
            align-items: center;
            justify-content: space-around;

            & > div {
            &>div {
                flex: 1;
            }
        }
@@ -873,18 +795,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;
                    }
                }
@@ -986,7 +908,7 @@
        border-radius: 10px;
        overflow: hidden;

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


 src/views/video/list.vue

@@ -14,71 +14,48 @@
        <div v-show="boxShow" class="container-content">
            <div class="search-box">
                点位名称：
                <input
                    v-model="searchValue"
                    @input="searchChange"
                    type="text"
                    placeholder="请输入…"
                />
            </div>
                <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入…" />
        </div>

            <div class="draw-btn">
                搜索范围：
                <el-button type="primary" size="mini" @click="draw('polygon')">绘制面</el-button>
        <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>
                <!-- <el-button type="primary" size="mini" @click="saveDraw">保存</el-button> -->
                <el-button type="primary" size="mini" @click="draww('polyline')">绘制测试</el-button>
            </div>
            <!-- <div class="range-input" v-show="inputpopup">
                <div class="close" @click="closeRangeInput"></div>
                <h3>请输入距离</h3>
                <input type="text" v-model="range" />
                <button @click="changeRange" class="btn">确定</button>
            </div>-->
                        <div class="close" @click="closeRangeInput"></div>
                        <h3>请输入距离</h3>
                        <input type="text" v-model="range" />
                        <button @click="changeRange" class="btn">确定</button>
                    </div>-->

            <div class="down-tree">
                <el-scrollbar>
                    <el-tree
                        v-show="searchLazyFlag"
                        :props="props"
                        :load="loadNode"
                        lazy
                        node-key="id"
                        @node-click="treeClick"
                        :default-expanded-keys="defaultExpandedKeys"
                    >
                    <el-tree v-show="searchLazyFlag" :props="props" :load="loadNode" lazy node-key="id"
                        @node-click="treeClick" :default-expanded-keys="defaultExpandedKeys">
                        <span class="custom-tree-node" slot-scope="node">
                            <i
                                v-show="node.data.leaf"
                                class="status-box"
                                :class="{ online: Number(node.data.status) === 1 }"
                            ></i>
                            <i v-show="node.data.leaf" class="status-box"
                                :class="{ online: Number(node.data.status) === 1 }"></i>

                            <span>
                                {{
                                node.data.name
                                    node.data.name
                                }}
                            </span>
                        </span>
                    </el-tree>

                    <el-tree
                        v-show="searchLazyFlag == false"
                        :data="searchTreeData"
                        :props="defaultProps"
                        :default-expand-all="true"
                        @node-click="treeClick"
                    >
                    <el-tree v-show="searchLazyFlag == false" :data="searchTreeData" :props="defaultProps"
                        :default-expand-all="true" @node-click="treeClick">
                        <span class="custom-tree-node" slot-scope="node">
                            <i
                                class="status-box"
                                :class="{ online: Number(node.data.status) === 1 }"
                            ></i>
                            <i class="status-box" :class="{ online: Number(node.data.status) === 1 }"></i>

                            <span>
                                {{
                                node.data.name
                                    node.data.name
                                }}
                            </span>
                        </span>
@@ -88,13 +65,8 @@
        </div>

        <div class="search-content">
            <input
                v-model="searchExtensivelyValue"
                @input="searchExtensivelyChange"
                @focus="searchExtensivelyFocus"
                type="text"
                placeholder="请输入搜索条件"
            />
            <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus"
                type="text" placeholder="请输入搜索条件" />
            <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
                <img src="../../../public/img/icon/clear.png" alt />
            </div>
@@ -103,39 +75,17 @@

        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
            <div>
                <div
                    @click="searchExtensivelyVlaClick(item)"
                    v-for="(item, index) in searchExtensivelyArray"
                    :key="index"
                >{{ item.name }}</div>
                <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray" :key="index">
                    {{ item.name }}</div>
            </div>
        </div>

        <el-dialog
            :title="dialogTitle"
            :modal="false"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                id="videoElement"
                autoplay
                controls
                width="100%"
                height="100%"
                style="object-fit: fill"
            ></video>
        <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video id="videoElement" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
        </el-dialog>
        <el-dialog
            :title="drawDialogTitle"
            :modal="false"
            :visible.sync="drawDialogVisible"
            :before-close="drawDialogBeforeClose"
            :close-on-click-modal="true"
            class="video-draw-box"
        >
        <el-dialog :title="drawDialogTitle" :modal="false" :visible.sync="drawDialogVisible"
            :before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box">
            <div>
                <div>名称：</div>
                <input type="text" v-model="drawName" placeholder="请输入绘制线的名称" />
@@ -226,7 +176,7 @@

    mounted () {
        this.$parent.$parent.$parent.resize('400px', true)
        this.$nextTick(()=>{
        this.$nextTick(() => {
            if (drawPlotLayers == null) {
                drawPlotLayers = new global.DC.VectorLayer('drawPlotLayers')
                global.viewer.addLayer(drawPlotLayers)
@@ -335,7 +285,7 @@
            graphicLayer.activate(type, (lastEventData) => {
                flag = true
                this.drawInfo = lastEventData
                console.log(1111,JSON.stringify(lastEventData));
                console.log(1111, JSON.stringify(lastEventData))
                this.getRegionList(type, JSON.stringify(lastEventData))
                this.drawDialogVisible = true

@@ -350,7 +300,7 @@

        },

        draww(type){
        draww (type) {
            if (type == 'polyline') {
                this.inputpopup = true
                this.drawType = 1
@@ -358,20 +308,20 @@
                this.inputpopup = false
                this.drawType = 2
            }
            plot && plot.draw(type,overlay => {
              if(overlay){
                drawPlotLayers.addOverlay(overlay)
                plot.edit(overlay)
            plot && plot.draw(type, overlay => {
                if (overlay) {
                    drawPlotLayers.addOverlay(overlay)
                    plot.edit(overlay, (e) => {
                        console.log('overlay',overlay);
                        document.oncontextmenu = function () {
                           return false
                        }
                    })
                    plot.edit(overlay)
                    if (overlay) {
                        drawPlotLayers.addOverlay(overlay)
                        plot.edit(overlay, (e) => {
                            console.log('overlay', overlay)
                            document.oncontextmenu = function () {
                                return false
                            }
                        })
                    }
                }
              }
            })
        },

@@ -665,7 +615,7 @@
            return resolve(data)
        },

 treeClick (node) {
        treeClick (node) {
            if (node.parent == true) return

            const { longitude, latitude } = node
@@ -743,17 +693,17 @@
            type: 'VectorLayer'
        })

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

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

        this.$EventBus.$emit('mapClearLayer', {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'treeValAllLayer',
            type: 'VectorLayer'
        })
@@ -844,7 +794,7 @@
            border-radius: 10px;
            overflow-y: auto;

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

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

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


 src/views/video/region.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-17 10:34:59
 * @LastEditTime: 2023-02-23 08:47:38
 * @FilePath: \srs-police-affairs\src\views\video\region.vue
 * @Description: 辖区管理
 * 
@@ -15,56 +15,35 @@
            <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>
                    <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                    </div>
            </div>

                <div class="list-show">
            <div class="list-show">
                    <div class="car-list">
                        <div class="list-box">
                            <el-table
                                :data="saveRangeList"
                                style="width: 100%"
                            <el-table :data="saveRangeList" style="width: 100%"
                                :header-cell-style="{ 'text-align': 'center', 'background-color': '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="50%"></el-table-column>
                                <el-table-column prop="extent" label="长度/km" min-width="50%">
                                    <!-- <template slot-scope="scope">
                                        <span>{{ scope.row.extent }}</span>
                                        <span>千米</span>
                                    </template>-->
                                                <span>{{ scope.row.extent }}</span>
                                                <span>千米</span>
                                            </template>-->
                                </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>
@@ -72,14 +51,9 @@
                            </el-table>
                        </div>
                        <div class="pages">
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                :page-size="pagesize"
                                :page-count="pagesCount"
                                :current-page="currentPage"
                                @current-change="handleCurrentChange"
                            ></el-pagination>
                            <el-pagination background layout="prev, pager, next" :page-size="pagesize"
                                :page-count="pagesCount" :current-page="currentPage"
                                @current-change="handleCurrentChange"></el-pagination>
                        </div>
                    </div>
                </div>
@@ -87,24 +61,12 @@
        </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"
                        class="video-option-css"
                    >
                        <div
                            class="video-status"
                            :style="{background:(item.item.status==0?'#adadad':'#4ccc7d')}"
                        ></div>
                <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"
                        class="video-option-css">
                        <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
                        </div>
                        {{ item.label }}
                    </el-option>
                </el-select>
@@ -113,37 +75,18 @@
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video1">
                <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 class="outline" v-show="isShowOutline.video1">设备离线</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"
                        class="video-option-css"
                    >
                        <div
                            class="video-status"
                            :style="{background:(item.item.status==0?'#adadad':'#4ccc7d')}"
                        ></div>
                <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"
                        class="video-option-css">
                        <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
                        </div>
                        {{ item.label }}
                    </el-option>
                </el-select>
@@ -152,37 +95,18 @@
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video2">
                <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 class="outline" v-show="isShowOutline.video2">设备离线</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"
                        class="video-option-css"
                    >
                        <div
                            class="video-status"
                            :style="{background:(item.item.status==0?'#adadad':'#4ccc7d')}"
                        ></div>
                <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"
                        class="video-option-css">
                        <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
                        </div>
                        {{ item.label }}
                    </el-option>
                </el-select>
@@ -191,37 +115,18 @@
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video3">
                <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 class="outline" v-show="isShowOutline.video3">设备离线</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"
                        class="video-option-css"
                    >
                        <div
                            class="video-status"
                            :style="{background:(item.item.status==0?'#adadad':'#4ccc7d')}"
                        ></div>
                <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"
                        class="video-option-css">
                        <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
                        </div>
                        {{ item.label }}
                    </el-option>
                </el-select>
@@ -230,37 +135,18 @@
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video4">
                <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 class="outline" v-show="isShowOutline.video4">设备离线</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"
                        class="video-option-css"
                    >
                        <div
                            class="video-status"
                            :style="{background:(item.item.status==0?'#adadad':'#4ccc7d')}"
                        ></div>
                <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"
                        class="video-option-css">
                        <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
                        </div>
                        {{ item.label }}
                    </el-option>
                </el-select>
@@ -269,37 +155,18 @@
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video5">
                <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 class="outline" v-show="isShowOutline.video5">设备离线</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"
                        class="video-option-css"
                    >
                        <div
                            class="video-status"
                            :style="{background:(item.item.status==0?'#adadad':'#4ccc7d')}"
                        ></div>
                <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"
                        class="video-option-css">
                        <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
                        </div>
                        {{ item.label }}
                    </el-option>
                </el-select>
@@ -308,39 +175,18 @@
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video6">
                <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 class="outline" v-show="isShowOutline.video6">设备离线</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"
                        class="video-option-css"
                    >
                        <div
                            class="video-status"
                            :style="{background:(item.item.status==0?'#adadad':'#4ccc7d')}"
                        ></div>
                <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" class="video-option-css">
                        <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
                        </div>
                        {{ item.label }}
                    </el-option>
                </el-select>
@@ -349,37 +195,18 @@
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video7">
                <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 class="outline" v-show="isShowOutline.video7">设备离线</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"
                        class="video-option-css"
                    >
                        <div
                            class="video-status"
                            :style="{background:(item.item.status==0?'#adadad':'#4ccc7d')}"
                        ></div>
                <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"
                        class="video-option-css">
                        <div class="video-status" :style="{ background: (item.item.status == 0 ? '#adadad' : '#4ccc7d') }">
                        </div>
                        {{ item.label }}
                    </el-option>
                </el-select>
@@ -388,35 +215,15 @@
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video8">
                <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 class="outline" v-show="isShowOutline.video8">设备离线</div>
        </div>
        <!-- <div class="deleteVideo" v-show="isShowVideo.video1" @click="deleteVideo">关闭</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>
@@ -1076,7 +883,7 @@
                border-radius: 10px;
                overflow-y: auto;

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

                & > div {
                &>div {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
@@ -1145,6 +952,7 @@
            cursor: pointer;
            align-items: center;
        }

        .close:hover {
            color: #65b1ff;
        }
@@ -1175,15 +983,19 @@
    .new-item-width {
        width: 25vw;
    }

    .new-video235-left {
        left: 0 !important;
    }

    .new-video146-left {
        left: 75vw !important;
    }

    .new-video7-left {
        left: 25vw !important;
    }

    .new-video8-left {
        left: 50vw !important;
    }
@@ -1191,6 +1003,7 @@
    .video1 {
        top: calc(60 / 1080 * 100vh);
        left: calc(1540 / 1920 * 100vw);

        .video {
            padding: 1% 1% 0 1%;
        }
@@ -1199,6 +1012,7 @@
    .video2 {
        top: calc(60 / 1080 * 100vh);
        left: calc(400 / 1920 * 100vw);

        .video {
            padding: 1% 1% 0 1%;
        }
@@ -1208,6 +1022,7 @@
        left: calc(400 / 1920 * 100vw);
        // top: calc(340 / 1080 * 100vh);
        top: calc(400 / 1080 * 100vh);

        .video {
            padding: 1% 1% 0 1%;
        }
@@ -1217,6 +1032,7 @@
        left: calc(1540 / 1920 * 100vw);
        // top: calc(340 / 1080 * 100vh);
        top: calc(400 / 1080 * 100vh);

        .video {
            padding: 1% 1% 0 1%;
        }
@@ -1238,6 +1054,7 @@
        left: calc(780 / 1920 * 100vw);
        // top: calc(680 / 1080 * 100vh);
        top: calc(740 / 1080 * 100vh);

        .video {
            padding: 1% 0 1% 0;
        }
@@ -1247,10 +1064,12 @@
        left: calc(1160 / 1920 * 100vw);
        // top: calc(680 / 1080 * 100vh);
        top: calc(740 / 1080 * 100vh);

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

    .deleteVideo {
        // position: absolute;
        position: fixed;
@@ -1264,8 +1083,8 @@
        cursor: pointer;
        z-index: 99;
    }

    .deleteVideo-new-left {
        left: calc(1380 / 1920 * 100vw);
    }
}
</style>
}</style>