1

guanqb

2023-03-02 0c02ac21d3a585fd8576369567a02812a7edc1bc

1

 src/styles/base/index.scss

@@ -1042,7 +1042,11 @@
            &>div {
                display: flex;
                justify-content: center;
                margin-bottom: 10px;
                margin-bottom: 2px;
            }

            .placeholder {
                height: 26px;
            }

            .value-name-box {

 src/styles/media/index.scss

@@ -2344,6 +2344,10 @@
                                    height: countSizeVh(26);
                                    padding-left: countSizeVw(10, 1920)
                                }

                                .placeholder {
                                    height: countSizeVh(26);
                                }
                            }
                        }
                    }

 src/views/video/region - 副本.vue

New file
@@ -0,0 +1,1315 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-02 16:11:51
 * @FilePath: \srs-police-affairs\src\views\video\region.vue
 * @Description: 辖区管理
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->

<template>
    <div class="region container">
        <div class="region-left-container">
            <div v-show="boxShow" class="container-content">
                <div class="search-box">
                    范围名称：
                    <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                    <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 class="list-show">
                    <div class="car-list">
                        <div class="list-box">
                            <el-table :data="saveRangeList" style="width: 100%"
                                :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
                                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                                <el-table-column prop="name" label="范围名称" min-width="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>-->
                                </el-table-column>
                                <el-table-column prop="id" label="操作" min-width="50%">
                                    <template slot-scope="scope">
                                        <el-button @click.stop="flytoRange(scope.row)" type="text" size="small" title="定位">
                                            <i class="el-icon-location"></i>
                                        </el-button>
                                        <el-button @click.stop="deleteRegionSaveList(scope.row.id)" type="text" size="small"
                                            title="删除">
                                            <i class="el-icon-delete"></i>
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="pages all-pagination-sty">
                            <el-pagination background layout="prev, pager, next" :page-size="pagesize"
                                :page-count="pagesCount" :current-page="currentPage"
                                @current-change="handleCurrentChange"></el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </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>
                        {{ item.label }}
                    </el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video1 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video1">
                <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>
                        {{ item.label }}
                    </el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video2 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video2">
                <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>
                        {{ item.label }}
                    </el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video3 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video3">
                <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>
                        {{ item.label }}
                    </el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video4 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video4">
                <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>
                        {{ item.label }}
                    </el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video5 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video5">
                <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>
                        {{ item.label }}
                    </el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video6 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video6">
                <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>
                        {{ item.label }}
                    </el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video7 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video7">
                <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>
                        {{ item.label }}
                    </el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video8 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video" v-show="!isShowOutline.video8">
                <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>

        <el-dialog title="修改范围" :modal="false" :visible.sync="editRangeVisible" :close-on-click-modal="true"
            class="edit-range-box">
            <div class="line">
                <div class="value-name-box">选择范围颜色：</div>
                <div class="pick-color-box">
                    <el-color-picker v-model="chooseRangeColor" :predefine="predefineColors" size="small">
                    </el-color-picker>
                </div>
            </div>
            <div v-show="!isLineRange" class="placeholder"></div>
            <div v-show="isLineRange">
                <div class="value-name-box">设置范围宽度：</div>
                <div class="input-width-box">
                    <input type="text" v-model="lineWidth" placeholder="请输入..." />
                </div>
                <div class="units">米</div>
            </div>
            <div>
                <el-button @click="saveRangeInfo">保存</el-button>
                <el-button @click="editRange">编辑</el-button>
                <el-button @click="deleteRange">删除</el-button>
                <el-button @click="editRangeVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import EntityDraw from "@/utils/EntityDraw.js"
import { listQuery, accurateSearch } from "@/utils/search.js"
import { getVideoList, getDevices, getRegionSaveList, deleteRegionSaveList, getRegionList, updataRegionSaveList } from '@/api/video/index.js'
import flvjs from 'flv.js'

// let graphicLayer = null
let rangeLayer = null
let rangeLineLayer = null
let plot = undefined

export default {
    inject: ['userInfo'],

    data () {
        return {
            currentPage: 1,
            pagesize: 13,
            pagesCount: 1,
            monitoringList: [],
            dialogTitle: '',
            dialogVisible: false,
            searchValue: '',
            searchArray: [],
            searchValBoxShow: false,
            boxShow: true,
            flvPlayer: null,
            flvListPlayer: {
                flvPlayer1: null,
                flvPlayer2: null,
                flvPlayer3: null,
                flvPlayer4: null,
                flvPlayer5: null,
                flvPlayer6: null,
                flvPlayer7: null,
                flvPlayer8: null,
            },
            saveRangeList: [],
            monitorOption: [],
            monitor: {
                type1: '',
                type2: '',
                type3: '',
                type4: '',
                type5: '',
                type6: '',
                type7: '',
                type8: '',
            },
            isShowSelect: {
                video1: true,
                video2: true,
                video3: true,
                video4: true,
                video5: true,
                video6: true,
                video7: true,
                video8: true,
            },
            isShowVideo: {
                video1: false,
                video2: false,
                video3: false,
                video4: false,
                video5: false,
                video6: false,
                video7: false,
                video8: false,
            },
            saveRangeID: '',
            valChoosed: '',
            argsChoosed: '',
            isShowOutline: {
                video1: false,
                video2: false,
                video3: false,
                video4: false,
                video5: false,
                video6: false,
                video7: false,
                video8: false,
            },
            chooseRangeColor: '#FF0000',
            editRangeVisible: false,
            lineWidth: '',
            rangeOverlayData: {},
            isLineRange: false,
            isEndDrawPlot: true,
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, )',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%)',
                '#c7158577'
            ],
        }
    },

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

    },

    mounted () {
        this.$parent.$parent.$parent.resize('400px', true)
        // graphicLayer = new EntityDraw()
        this.$nextTick(() => {
            if (rangeLayer == null) {
                rangeLayer = new global.DC.VectorLayer('rangeLayer')
                global.viewer.addLayer(rangeLayer)
                plot = new global.DC.Plot(global.viewer)
            }
            if (rangeLineLayer == null) {
                rangeLineLayer = new global.DC.VectorLayer('rangeLineLayer')
                global.viewer.addLayer(rangeLineLayer)
            }
        })

    },

    methods: {
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
            this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)
        },

        // getVideoList (current, size) {
        //     getVideoList(current, size).then(res => {
        //         this.monitoringList = res.data.data.list
        //         this.initMonitoringIcon()
        //         this.getMonitorOption()
        //     })
        // },

        // getMonitorOption () {
        //     this.monitorOption = []
        //     this.monitoringList.forEach((item, index) => {
        //         let flvUrl = ''
        //         this.getDevices(item.deviceId).then(res => {
        //             flvUrl = res
        //             this.monitorOption.push({ value: `${index}`, label: `${item.name}`, flvUrl: `${flvUrl}` })
        //             if (index == this.monitoringList.length - 1) {
        //                 if (this.monitoringList.length < 6) {
        //                     this.monitor.type1 = this.monitorOption[0].label
        //                     this.monitor.type2 = this.monitorOption[0].label
        //                     this.monitor.type3 = this.monitorOption[0].label
        //                     this.monitor.type4 = this.monitorOption[0].label
        //                     this.monitor.type5 = this.monitorOption[0].label
        //                     this.monitor.type6 = this.monitorOption[0].label
        //                     for (let i = 0; i < 6; i++) {
        //                         this.playVideoList(`flvPlayer${i + 1}`, `${this.monitorOption[0].flvUrl}`, `videoElement${i + 1}`)
        //                     }

        //                 } else {
        //                     this.monitor.type1 = this.monitorOption[0].label
        //                     this.monitor.type2 = this.monitorOption[1].label
        //                     this.monitor.type3 = this.monitorOption[2].label
        //                     this.monitor.type4 = this.monitorOption[3].label
        //                     this.monitor.type5 = this.monitorOption[4].label
        //                     this.monitor.type6 = this.monitorOption[5].label
        //                     for (let i = 0; i < 6; i++) {
        //                         this.playVideoList(`flvPlayer${i + 1}`, `${this.monitorOption[i].flvUrl}`, `videoElement${i + 1}`)
        //                     }
        //                 }
        //             }
        //         })
        //     })
        // },

        playVideoList (flvItemPlayer, flvUrl, videoEleName) {
            if (this.flvListPlayer[flvItemPlayer] != null) {
                this.flvListPlayer[flvItemPlayer].pause()
                this.flvListPlayer[flvItemPlayer].unload()
                this.flvListPlayer[flvItemPlayer].detachMediaElement()
                this.flvListPlayer[flvItemPlayer].destroy()
                this.flvListPlayer[flvItemPlayer] = null
            }

            if (flvjs.isSupported() && flvUrl != 'nodata') {
                let videoElement = document.getElementById(videoEleName)
                this.flvListPlayer[flvItemPlayer] = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    hasAudio: false,
                    url: flvUrl
                })
                this.flvListPlayer[flvItemPlayer].attachMediaElement(videoElement)
                this.flvListPlayer[flvItemPlayer].load()
                this.flvListPlayer[flvItemPlayer].play()
            }
        },

        navClick (val, args) {
            if (this.valChoosed == val && this.argsChoosed == args) return
            this.valChoosed = val
            this.argsChoosed = args

            this.monitor[`type${args}`] = this.monitorOption[val].item.name
            if (this.monitorOption[val].item.status == 0) {
                this.isShowOutline[`video${args}`] = true
            }
            this.getDevices(this.monitorOption[val].item.channelId).then(res => {

                this.playVideoList(`flvPlayer${args}`, `${res}`, `videoElement${args}`)
            })
        },

        getRegionSaveList (current, size, deptId, name) {
            getRegionSaveList(current, size, deptId, name).then(res => {
                this.saveRangeList = res.data.data.records
                this.pagesCount = res.data.data.pages
                this.initRangeListLayer()
            })
        },

        deleteRegionSaveList (id) {
            deleteRegionSaveList(id).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '删除成功',
                        type: 'warning'
                    })
                    this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)
                } else {
                    this.$message({
                        message: '删除失败'
                    })
                }
            })
        },

        flytoRange (data) {
            this.$EventBus.$emit('flytoLayer', {
                polygonName: 'polygon' + data.id,
                duration: 3
            })

        },

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

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

            if (rangeLineLayer != null) {
                rangeLineLayer.clear()
            }

            this.saveRangeList.forEach(item => {
                console.log(item, 656565656)
                let positionStr = ''
                if (item.type == 1) {
                    let linePositionStr = ''
                    linePositionStr = item.positions.replace(/,/g, ';')
                    linePositionStr = linePositionStr.replace(/ /g, ',')
                    linePositionStr += ';'
                    let coords = global.DC.GeoTools.polylineBuffer(linePositionStr, 100)
                    let polygon = new global.DC.Polygon(coords)
                    let position = ''
                    polygon._positions.forEach(item => {
                        position += item._lng + ',' + item._lat + ';'
                    })
                    positionStr = position
                } else {
                    positionStr = this.convertPositionDate(item.positions, 'polygon')
                }
                let color = ''
                if (item.color == '') {
                    color = global.DC.Namespace.Cesium.Color.fromBytes(255, 0, 0, 150)
                } else {
                    let r = parseInt(item.color.slice(1, 3), 16)
                    let g = parseInt(item.color.slice(3, 5), 16)
                    let b = parseInt(item.color.slice(5, 7), 16)
                    color = global.DC.Namespace.Cesium.Color.fromBytes(r, g, b, 150)
                }
                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'rangeSaveLayer',
                    positions: positionStr,
                    material: color,
                    polygonName: 'polygon' + item.id,
                    params: item,
                    incident: this.overlayTypeClick
                })
            })

        },

        // 点击线面
        overlayTypeClick (e) {
            if (this.isEndDrawPlot == false) {
                this.$message({
                    message: '请先完成编辑',
                    type: 'error'
                })
            } else {
                this.rangeOverlayData = e.overlay
                this.lineWidth = e.overlay.attrParams.width != -1 ? e.overlay.attrParams.width : 100
                this.chooseRangeColor = e.overlay.attrParams.color != '' ? e.overlay.attrParams.color : '#FF0000'
                if (e.overlay.attrParams.type == 1) {
                    this.isLineRange = true
                } else {
                    this.isLineRange = false
                }
                this.editRangeVisible = true
            }
        },

        // 保存范围修改
        saveRangeInfo () {
            this.updataRegionSaveList({ id: this.rangeOverlayData.attrParams.id, color: this.chooseRangeColor, width: this.lineWidth })
            this.editRangeVisible = false
        },

        // 更新范围信息
        updataRegionSaveList (params) {
            this.isEndDrawPlot = true
            updataRegionSaveList(params).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '保存成功',
                        type: 'warning'
                    })
                } else {
                    this.$message({
                        message: '保存失败'
                    })
                }
                this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)
                this.editRangeVisible = false
            })
        },

        // 删除线面
        deleteRange () {
            deleteRegionSaveList(this.rangeOverlayData.attrParams.id).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '删除成功',
                        type: 'warning'
                    })
                    this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id)
                } else {
                    this.$message({
                        message: '删除失败'
                    })
                }
                this.editRangeVisible = false
            })
        },

        // 编辑线面
        editRange () {
            this.editRangeVisible = false
            this.isEndDrawPlot = false
            let overlayData = this.rangeOverlayData
            if (this.rangeOverlayData.attrParams.type == 1) {
                this.$EventBus.$emit('mapRemovePolygonLayer', {
                    layerName: 'rangeSaveLayer',
                    polygonName: 'polygon' + this.rangeOverlayData.attrParams.id,
                    type: 'VectorLayer'
                })
                overlayData = this.rangeOverlayData.attrParams.lineObj
            }
            plot.edit(overlayData, (e) => {
                let position = ''
                overlayData._positions.forEach(item => {
                    position += item._lng + ' ' + item._lat + ','
                })
                position = position.slice(0, position.length - 1)
                rangeLayer.addOverlay(overlayData)
                this.updataRegionSaveList({ id: this.rangeOverlayData.attrParams.id, color: this.chooseRangeColor, width: this.lineWidth, positions: position })
            })
        },

        convertPositionDate (data, type) {
            let positionStr = data
            if (type == 'polygon') {
                positionStr = positionStr.replace(/,/g, ";")
                positionStr = positionStr.replace(/ /g, ",")
                return positionStr
            } else {
                positionStr = data.slice(11, positionStr.length - 1)
                let positionArr = positionStr.split(",")
                let positionNewStr = ''
                positionArr.forEach(item => {
                    let lng = item.split(' ')[0]
                    let lat = item.split(' ')[1]
                    positionNewStr += lng + ',' + lat + ';'
                })
                return positionNewStr
            }
        },

        async getDevices (channelId) {
            let flvAddress = ''
            await getDevices(channelId).then(res => {
                if ('data' in res.data) {
                    flvAddress = res.data.data.flv
                } else {
                    flvAddress = 'nodata'
                }
            })
            return flvAddress
        },

        initMonitoringIcon () {
            this.monitoringList.forEach((item, index) => {
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'monitoringLayers',
                    type: "billboard",
                    params: {
                        name: item.name,
                        lng: item.longitude,
                        lat: item.latitude,
                        alt: 1,
                        url: '/img/icon/video.png',
                        // deviceId: item.deviceId
                    },
                    // incident: this.siteClick
                })

            })
        },

        rowClick (row) {
            if (this.saveRangeID == row.id) {
                let noShowVideo = {
                    video1: false,
                    video2: false,
                    video3: false,
                    video4: false,
                    video5: false,
                    video6: false,
                    video7: false,
                    video8: false
                }
                if (JSON.stringify(noShowVideo) != JSON.stringify(this.isShowVideo)) {
                    this.monitorOption.forEach((item, index) => {
                        if (index < 8) {
                            this.isShowVideo[`video${index + 1}`] = false
                        }
                    })
                } else {
                    this.monitorOption.forEach((item, index) => {
                        if (index < 8) {
                            this.isShowVideo[`video${index + 1}`] = true
                        }
                    })
                }
                this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'monitoringLayers',
                    type: 'VectorLayer'
                })
            } else {
                this.isShowVideo = {
                    video1: false,
                    video2: false,
                    video3: false,
                    video4: false,
                    video5: false,
                    video6: false,
                    video7: false,
                    video8: false
                }
                this.monitor = {
                    type1: '',
                    type2: '',
                    type3: '',
                    type4: '',
                    type5: '',
                    type6: '',
                    type7: '',
                    type8: ''
                }
                if (row.type == 2) {
                    getRegionList({
                        page: 1,
                        count: 20,
                        id: row.id
                    }).then(res => {
                        let monitorData = res.data.data.list

                        this.monitoringList = res.data.data.list
                        this.$EventBus.$emit('mapRemoveLayer', {
                            layerName: 'monitoringLayers',
                            type: 'VectorLayer'
                        })

                        this.initMonitoringIcon()

                        this.monitorOption = []

                        monitorData.forEach((item, index) => {
                            this.monitorOption.push({ value: index, label: item.name, item })

                            if (index < 8) {
                                const ind = index + 1
                                this.isShowVideo[`video${ind}`] = true
                                this.monitor[`type${ind}`] = item.name
                                if (item.status == 0) {
                                    this.isShowOutline[`video${ind}`] = true
                                }

                                this.getDevices(item.channelId).then(res => {
                                    this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`)
                                })
                            }
                        })
                    })
                } else {
                    let positionStr = row.positions.replace(/,/g, ';')
                    positionStr = positionStr.replace(/ /g, ',')
                    positionStr += ';'
                    let coords = global.DC.GeoTools.polylineBuffer(positionStr, row.width)
                    let polygon = new global.DC.Polygon(coords)
                    let position = ''
                    polygon._positions.forEach(item => {
                        position += item._lng + ',' + item._lat + ';'
                    })
                    getRegionList({
                        page: 1,
                        count: 20,
                        range: position
                    }).then(res => {
                        let monitorData = res.data.data.list

                        this.monitoringList = res.data.data.list
                        this.$EventBus.$emit('mapRemoveLayer', {
                            layerName: 'monitoringLayers',
                            type: 'VectorLayer'
                        })

                        this.initMonitoringIcon()

                        this.monitorOption = []

                        monitorData.forEach((item, index) => {
                            this.monitorOption.push({ value: index, label: item.name, item })

                            if (index < 8) {
                                const ind = index + 1
                                this.isShowVideo[`video${ind}`] = true
                                this.monitor[`type${ind}`] = item.name
                                if (item.status == 0) {
                                    this.isShowOutline[`video${ind}`] = true
                                }

                                this.getDevices(item.channelId).then(res => {
                                    this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`)
                                })
                            }
                        })
                    })
                }

            }
            this.saveRangeID = row.id
        },

        // async siteClick (e) {
        //     if (this.flvPlayer != null) {
        //         this.flvPlayer.pause()
        //         this.flvPlayer.unload()
        //         this.flvPlayer.detachMediaElement()
        //         this.flvPlayer.destroy()
        //         this.flvPlayer = null
        //     }

        //     this.dialogTitle = e.overlay.attrParams.name
        //     this.dialogVisible = true
        //     let flvUrl = ''
        //     await this.getDevices(e.overlay.attrParams.deviceId).then(res => {
        //         flvUrl = res
        //     })
        //     if (flvjs.isSupported() && flvUrl != 'nodata') {
        //         var videoElement = document.getElementById('videoElement')
        //         this.flvPlayer = flvjs.createPlayer({
        //             type: 'flv',
        //             isLive: true,
        //             hasAudio: false,
        //             url: flvUrl
        //         })
        //         this.flvPlayer.attachMediaElement(videoElement)
        //         this.flvPlayer.load()
        //         this.flvPlayer.play()
        //     }
        // },

        dialogBeforeClose () {
            this.dialogVisible = false
        },

        searchChange () {
            if (this.searchValue == '') {
                this.searchValBoxShow = false
                this.searchArray = []
                this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id, this.searchValue)
                this.$message({
                    message: '请输入搜索内容',
                    type: 'warning'
                })
            } else {
                this.searchArray = listQuery(this.saveRangeList, this.searchValue, 'name')
                this.searchValBoxShow = true
                this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id, this.searchValue)
            }
        },

        searchClick () {
            if (this.searchValue != '') {
                this.searchValBoxShow = false
                this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id, this.searchValue)
            } else {
                this.$message({
                    message: '请输入搜索内容',
                    type: 'warning'
                })
            }
        },

        searchVlaClick (item) {
            this.searchValBoxShow = false
            this.searchArray = []
            // this.monitoringList = [item]
            this.searchValue = item.name
            this.getRegionSaveList(this.currentPage, this.pagesize, this.userInfo.dept_id, this.searchValue)
        },

        // 大小重置
        boxResize (val) {
            this.boxShow = val
            if (!val) {
                let videoList = document.querySelectorAll('.item')
                videoList.forEach(item => {
                    item.classList.add('new-item-width')
                })
                document.querySelector('.video1').classList.add('new-video146-left')
                document.querySelector('.video1 video').load()
                document.querySelector('.video2').classList.add('new-video235-left')
                document.querySelector('.video3').classList.add('new-video235-left')
                document.querySelector('.video4').classList.add('new-video146-left')
                document.querySelector('.video5').classList.add('new-video235-left')
                document.querySelector('.video6').classList.add('new-video146-left')
                document.querySelector('.video7').classList.add('new-video7-left')
                document.querySelector('.video8').classList.add('new-video8-left')
            } else {
                let videoList = document.querySelectorAll('.item')
                videoList.forEach(item => {
                    item.classList.remove('new-item-width')
                })
                document.querySelector('.video1').classList.remove('new-video146-left')
                document.querySelector('.video2').classList.remove('new-video235-left')
                document.querySelector('.video3').classList.remove('new-video235-left')
                document.querySelector('.video4').classList.remove('new-video146-left')
                document.querySelector('.video5').classList.remove('new-video235-left')
                document.querySelector('.video6').classList.remove('new-video146-left')
                document.querySelector('.video7').classList.remove('new-video7-left')
                document.querySelector('.video8').classList.remove('new-video8-left')
            }
        },

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


        //#region
        // enterVideoBox (num) {
        //     for (let key in this.isShowSelect) {
        //         this.isShowSelect[key] = false
        //     }
        //     if (num == 1) {
        //         this.$refs.videoSelect1.blur()
        //     } else if (num == 2) {
        //         this.$refs.videoSelect2.blur()
        //     } else if (num == 3) {
        //         this.$refs.videoSelect3.blur()
        //     } else if (num == 4) {
        //         this.$refs.videoSelect4.blur()
        //     } else if (num == 5) {
        //         this.$refs.videoSelect5.blur()
        //     } else if (num == 6) {
        //         this.$refs.videoSelect6.blur()
        //     } else if (num == 7) {
        //         this.$refs.videoSelect7.blur()
        //     } else if (num == 8) {
        //         this.$refs.videoSelect8.blur()
        //     }
        //     this.isShowSelect[`video${num}`] = true
        // },

        // leaveVideoBox (num) {
        //     if (num == 1) {
        //         this.$refs.videoSelect1.blur()
        //     } else if (num == 2) {
        //         this.$refs.videoSelect2.blur()
        //     } else if (num == 3) {
        //         this.$refs.videoSelect3.blur()
        //     } else if (num == 4) {
        //         this.$refs.videoSelect4.blur()
        //     } else if (num == 5) {
        //         this.$refs.videoSelect5.blur()
        //     } else if (num == 6) {
        //         this.$refs.videoSelect6.blur()
        //     } else if (num == 7) {
        //         this.$refs.videoSelect7.blur()
        //     } else if (num == 8) {
        //         this.$refs.videoSelect8.blur()
        //     }
        //     this.isShowSelect[`video${num}`] = false
        // },

        // enterSelectBox (num) {
        //     this.isShowSelect[`video${num}`] = true
        // },
        // #endregion

    },

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

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

        // graphicLayer.destroy()

        if (rangeLineLayer != null) {
            rangeLineLayer.clear()
        }

        this.$parent.$parent.$parent.resize('0px')

        if (this.flvPlayer != null) {
            this.flvPlayer.pause()
            this.flvPlayer.unload()
            this.flvPlayer.detachMediaElement()
            this.flvPlayer.destroy()
            this.flvPlayer = null
        }

    }
}
</script>

<style scoped lang="scss">
.container {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;

    .region-left-container {
        position: relative;
        width: 100%;
        height: 100%;

        .container-content {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            color: #fff;
            background: $bg-color;

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

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

                input:focus {
                    outline: none;
                }

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

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

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

            .search-val-box {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 48px;
                left: 6px;
                width: calc(100% - 12px);
                max-height: 160px;
                text-align: left;
                color: #fff;
                background: $el-dialog-bg-color;
                z-index: 1111;
                border-radius: 10px;
                overflow-y: auto;

                &>div {
                    height: 100%;
                    padding: 0 10px;
                    line-height: 36px;
                    cursor: pointer;
                }
            }

            .list-show {
                flex: 1;

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

                    // background-color: #fff;
                    .list-box {
                        flex: 1;

                        .btn {
                            width: 60px;
                            height: 30px;
                            background-color: #65b1ff;
                            color: #fff;
                            border-radius: 4px;
                            cursor: pointer;
                            margin-top: 10px;
                        }

                        .btn:active {
                            background-color: rgb(0, 92, 169);
                            border: 1px solid rgb(0, 92, 169);
                        }
                    }
                }

                .pages {
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }

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

        .close {
            position: absolute;
            top: 0;
            right: 0;
            width: 32px;
            text-align: center;
            height: 100%;
            z-index: 999;
            display: flex;
            color: #fff;
            font-size: 22px;
            cursor: pointer;
            align-items: center;
        }

        .close:hover {
            color: #65b1ff;
        }

        .select {
            position: absolute;
            top: 6%;
            width: 100%;
            z-index: 999;
        }

        .video {
            height: 100%;
            padding: 1%;
        }

        .outline {
            position: absolute;
            color: #eee;
            letter-spacing: 2px;
            font-size: 24px;
            width: 100%;
            text-align: center;
            top: 40%;
        }
    }

    .new-item-width {
        width: 25vw;
    }

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

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

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

    .new-video8-left {
        left: 50vw !important;
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .video8 {
        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;
        width: 60px;
        height: 26px;
        line-height: 26px;
        color: #fff;
        background-color: $bg-color;
        left: calc(1480 / 1920 * 100vw);
        top: calc(70 / 1080 * 100vh);
        cursor: pointer;
        z-index: 99;
    }

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

 src/views/video/region.vue

@@ -235,6 +235,7 @@
                    </el-color-picker>
                </div>
            </div>
            <div v-show="!isLineRange" class="placeholder"></div>
            <div v-show="isLineRange">
                <div class="value-name-box">设置范围宽度：</div>
                <div class="input-width-box">