Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

shuishen

2022-12-10 c0903b46a4cac7895851d2aeecefecb04c5cc071

Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

 src/api/activity/index.js

@@ -6,14 +6,13 @@
 * @param {*}   
 * @returns 
 */
export const getSecurityList = (type, name, startTime, endTime, requestBaseUrl = 'outside') => {
export const getSecurityList = (current, size, type, name, startTime, endTime) => {
    return request({
        url: `/security/security/page`,
        method: 'get',
        requestBaseUrl,
        params: {
            current: 1,
            size: 100,
            current,
            size,
            type,
            name,
            startTime,
@@ -27,11 +26,10 @@
 * @param {*} params  
 * @returns 
 */
export const getCarList = (params, requestBaseUrl = 'outside') => {
export const getCarList = (params) => {
    return request({
        url: `/policecar/policecar/all`,
        method: 'get',
        requestBaseUrl,
        params: params
    })
}
@@ -41,11 +39,10 @@
 * @param {*} params  
 * @returns 
 */
export const getPoliceList = (params, requestBaseUrl = 'outside') => {
export const getPoliceList = (params) => {
    return request({
        url: `/policeman/policeman/all`,
        method: 'get',
        requestBaseUrl,
        params: params
    })
}
@@ -58,11 +55,10 @@
 * @param {*} type  范围类型
 * @returns 
 */
export const addCarAndRange = (carId, position, securityId, type, requestBaseUrl = 'outside') => {
export const addCarAndRange = (carId, position, securityId, type) => {
    return request({
        url: `/securityManageCar/securityManageCar/save`,
        method: 'post',
        requestBaseUrl,
        params: {
            carId,
            position,
@@ -78,11 +74,10 @@
 * @param {*} id 数据唯一标识
 * @returns 
 */
export const updateActivityCar = (id, carId, requestBaseUrl = 'outside') => {
export const updateActivityCar = (id, carId) => {
    return request({
        url: `/securityManageCar/securityManageCar/update`,
        method: 'post',
        requestBaseUrl,
        params: {
            id,
            carId,
@@ -98,11 +93,10 @@
 * @param {*} type  范围类型
 * @returns 
 */
export const addActivityPolice = (policemanId, position, securityId, type, requestBaseUrl = 'outside') => {
export const addActivityPolice = (policemanId, position, securityId, type) => {
    return request({
        url: `/securityManage/securityManage/save`,
        method: 'post',
        requestBaseUrl,
        params: {
            policemanId,
            position,
@@ -118,11 +112,10 @@
 * @param {*} id 数据唯一标识
 * @returns 
 */
export const updateActivityPolice = (id, policemanId, requestBaseUrl = 'outside') => {
export const updateActivityPolice = (id, policemanId) => {
    return request({
        url: `/securityManage/securityManage/update`,
        method: 'post',
        requestBaseUrl,
        params: {
            id,
            policemanId,
@@ -135,11 +128,10 @@
 * @param {*} securityId  活动ID
 * @returns 
 */
export const getSecurityPoliceList = (securityId, requestBaseUrl = 'outside') => {
export const getSecurityPoliceList = (securityId) => {
    return request({
        url: `/securityManage/securityManage/all`,
        method: 'get',
        requestBaseUrl,
        params: {
            securityId
        }
@@ -152,11 +144,10 @@
 * @param {*} securityId  活动ID
 * @returns 
 */
export const getSecurityCarList = (securityId, requestBaseUrl = 'outside') => {
export const getSecurityCarList = (securityId) => {
    return request({
        url: `/securityManageCar/securityManageCar/all`,
        method: 'get',
        requestBaseUrl,
        params: {
            securityId
        }

 src/api/dept/index.js

@@ -15,10 +15,9 @@
 * @param {*} params
 * @returns
 */
export const getPoliceStationList = (requestBaseUrl = 'outside') => {
export const getPoliceStationList = () => {
    return request({
        url: '/blade-system/dept/getAllPoliceStation',
        requestBaseUrl,
        method: 'get',
    })
}

 src/api/home/index.js

@@ -6,11 +6,10 @@
 * @param {*}   
 * @returns 
 */
export const getSchedulingList = (requestBaseUrl = 'outside') => {
export const getSchedulingList = () => {
    return request({
        url: `/scheduling/scheduling/page`,
        method: 'get',
        requestBaseUrl,
        params: {
            current: 1,
            size: 100,

 src/api/panorama/index.js

@@ -15,10 +15,9 @@
 * @param {*} params
 * @returns
 */
export const getPanoramaList = (requestBaseUrl = 'outside') => {
export const getPanoramaList = () => {
    return request({
        url: '/panorama/panorama/all',
        requestBaseUrl,
        method: 'get',
    })
}

 src/api/police/index.js

@@ -15,10 +15,11 @@
 * @param {*} params  包含 start 开始时间 -- end  结束时间  --   channelId 设备编号
 * @returns 
 */
export const getHistoricalTrack = (params) => {
export const getHistoricalTrack = (params, requestBaseUrl = 'outside') => {
    return request({
        url: `/position/history/${params.channelId}`,
        method: 'get',
        requestBaseUrl,
        params: params
    })
}
@@ -29,13 +30,14 @@
 * @param {*} count 每页数量
 * @returns 
 */
export const getCarList = (params = {}, requestBaseUrl = 'outside') => {
export const getCarList = (page, count, serialNumber) => {
    return request({
        url: '/policecar/policecar/page',
        method: 'get',
        requestBaseUrl,
        params: {
            ...params,
            page,
            count,
            serialNumber
        }
    })
}

 src/api/video/index.js

@@ -18,7 +18,7 @@
 * @param {*} params 暂时不用传
 * @returns 
 */
export const getVideoList = (page = 1, count = 10, name, params = {}, requestBaseUrl = '') => {
export const getVideoList = (page, count, name, params = {}, requestBaseUrl = 'outside') => {
    return request({
        url: '/device/query/devices',
        method: 'get',
@@ -27,8 +27,7 @@
            page,
            count,
            name,
            ...params,
            requestBaseUrl
            ...params
        }
    })
}
@@ -38,7 +37,7 @@
 * @param {*} equipmentNumber 设备编号
 * @returns 
 */
export const getDevices = (equipmentNumber, requestBaseUrl = '') => {
export const getDevices = (equipmentNumber, requestBaseUrl = 'outside') => {
    return request({
        url: `/play/start/${equipmentNumber}/${equipmentNumber}`,
        method: 'get',
@@ -53,7 +52,7 @@
 * @param {*} params 包含参数 range 参数值参考 116.292735,40.0717; 116.476708, 40.083625; 116.476708, 40.083625; 116.292735, 40.0717
 * @returns 
 */
export const getRegionList = (page = 1, count = 15, range, requestBaseUrl = '',) => {
export const getRegionList = (page = 1, count = 15, range, requestBaseUrl = 'outside') => {
    return request({
        url: '/device/query/SpatialQueryList',
        method: 'get',
@@ -72,11 +71,10 @@
 * @param {*} positions 坐标
 * @param {*} name 名称
 */
export const updateRegionSaveList = (type, positions, name, requestBaseUrl = 'outside') => {
export const updateRegionSaveList = (type, positions, name) => {
    return request({
        url: '/range/range/updatee',
        method: 'post',
        requestBaseUrl,
        params: {
            type,
            positions,
@@ -91,15 +89,15 @@
 * @param {*} positions 坐标
 * @param {*} name 名称
 */
export const insertRegionSaveList = (type, positions, name, requestBaseUrl = 'outside') => {
export const insertRegionSaveList = (type, positions, name, patrol) => {
    return request({
        url: '/range/range/insertes',
        method: 'post',
        requestBaseUrl,
        params: {
            type,
            positions,
            name
            name,
            patrol
        }
    })
}
@@ -109,11 +107,10 @@
 * @param {*} current 当前页
 * @param {*} size 每页数据数量
 */
export const getRegionSaveList = (current, size, name, requestBaseUrl = 'outside') => {
export const getRegionSaveList = (current, size, name) => {
    return request({
        url: '/range/range/page',
        method: 'get',
        requestBaseUrl,
        params: {
            current,
            size,
@@ -124,13 +121,12 @@

/**
 * 历史线面数据删除
 * @param {*} ids 序号
 * @param {*} id 序号
 */
export const deleteRegionSaveList = (ids = 1, requestBaseUrl = 'outside') => {
export const deleteRegionSaveList = (ids) => {
    return request({
        url: '/range/range/remove',
        method: 'post',
        requestBaseUrl,
        params: {
            ids
        }

 src/router/axios.js

@@ -21,6 +21,8 @@
// import { Message } from 'element-ui'
// import * as auth from '@/utils/auth'


// 调用后台管理的
const service = axios.create({
    // baseURL: 'http://36.14.255.242:18080/api',
    // baseURL: 'http://192.168.0.102:1888/api',
@@ -42,10 +44,11 @@
service.interceptors.request.use(
    (config) => {

        // 调用监控平台的
        if (config.requestBaseUrl == 'outside') {
            // config.baseURL = 'http://192.168.0.102:1888/api'
            // config.baseURL = 'http://192.168.0.105:80/api'
            config.baseURL = 'http://192.168.0.115:82'
            config.baseURL = 'http://192.168.0.115:18080/api'
            // config.baseURL = 'http://192.168.0.106:1888/api'
        }


 src/utils/EntityDraw.js

@@ -244,10 +244,6 @@
        this.terminateShape()
    }

    getLastEventData () {
        return this.lastEventData
    }

    terminateShape () {
        this.activeShapePoints.pop()

@@ -292,7 +288,10 @@

            this.drawPolygonLayer.addOverlay(polygon)

            this.lastEventData = this.drawCompletePosition
            this.lastEventData = {
                type: 'polygon',
                data: this.drawCompletePosition
            }

            this.cb(this.lastEventData)
        }
@@ -366,7 +365,11 @@

        this.drawPolyLineGonLayer.addOverlay(polygon)

        this.lastEventData = coords
        this.lastEventData = {
            type: 'line',
            data: coords,
            lineData: this.drawCompletePosition
        }

        cb(this.lastEventData)
    }

 src/views/activity/index.vue

@@ -71,7 +71,7 @@
                    <div
                        class="row-box"
                        :class="{ on: currentClickIndex === index }"
                        v-for="(item, index) in activityList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        v-for="(item, index) in activityList"
                        :key="index"
                        @click="activityListClick(item, index)"
                    >
@@ -102,9 +102,8 @@
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="activityList.length"
                        :page-size="pagesize"
                        pager-count="3"
                        :page-count="pagesCount"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
@@ -277,6 +276,9 @@
export default {
    data () {
        return {
            currentPage: 1,
            pagesize: 4,
            pagesCount: 1,
            activityOptions: [{
                value: '1',
                label: '教育活动'
@@ -304,8 +306,6 @@
            searchActivity: '',
            selectTime: '',
            navType: 0,
            currentPage: 1,
            pagesize: 4,
            treeData: [{
                id: 1,
                label: '数据地图',
@@ -465,7 +465,7 @@
    created () {
        this.getPoliceList()
        this.getCarList()
        this.getSecurityList()
        this.getSecurityList(this.currentPage, this.pagesize)
    },
    mounted () {

@@ -517,7 +517,7 @@
                startTime = this.selectTime[0]
                endTime = this.selectTime[1]
            }
            this.getSecurityList(this.activityType, this.searchActivity, startTime, endTime)
            this.getSecurityList(this.currentPage, this.pagesize, this.activityType, this.searchActivity, startTime, endTime)
        },

        // 下拉选择值变化
@@ -528,7 +528,7 @@
                startTime = this.selectTime[0]
                endTime = this.selectTime[1]
            }
            this.getSecurityList(this.activityType, this.searchActivity, startTime, endTime)
            this.getSecurityList(this.currentPage, this.pagesize, this.activityType, this.searchActivity, startTime, endTime)
        },

        // 时间选中值触发
@@ -539,7 +539,7 @@
                startTime = this.selectTime[0]
                endTime = this.selectTime[1]
            }
            this.getSecurityList(this.activityType, this.searchActivity, startTime, endTime)
            this.getSecurityList(this.currentPage, this.pagesize, this.activityType, this.searchActivity, startTime, endTime)
        },

        // 获取活动警员分布信息
@@ -639,9 +639,10 @@
        },

        // 获取活动列表
        getSecurityList (type, name, startTime, endTime) {
            getSecurityList(type, name, startTime, endTime).then(res => {
        getSecurityList (current, size, type, name, startTime, endTime) {
            getSecurityList(current, size, type, name, startTime, endTime).then(res => {
                this.activityList = res.data.data.records
                this.pagesCount = res.data.data.pages
                this.addActivityPoint()
            })
        },
@@ -867,6 +868,7 @@
        // 分页页码变化事件
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
            this.getSecurityList(this.currentPage, this.pagesize)
        },

        // 关闭活动详情弹窗

 src/views/police/index.vue

@@ -44,7 +44,7 @@

                <div class="list" v-show="navType == 1">
                    <el-table
                        :data="carList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        :data="carList"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
@@ -84,9 +84,8 @@
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="carList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :page-count="carPagesCount"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
@@ -397,6 +396,9 @@
            navType: 1,
            currentPage: 1,
            pagesize: 13,
            carCurrentPage: 1,
            carPagesize: 13,
            carPagesCount: 1,
            carList: [],
            dtList: [],
            phoneList: [],
@@ -431,7 +433,7 @@
        }
    },
    created () {
        this.getCarList()
        this.getCarList(this.carCurrentPage, this.carPagesize)

        this.dtList = dtList
        this.phoneList = phoneList
@@ -455,11 +457,14 @@
    methods: {
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
            this.carCurrentPage = currentPage
            this.getCarList(this.carCurrentPage, this.carPagesize)
        },

        getCarList (serialNumber) {
            getCarList({ current: 1, size: 10, serialNumber: serialNumber }).then(res => {
                console.log(res.data.data.records, 6666)
        getCarList (current, size, serialNumber) {
            getCarList(current, size, serialNumber).then(res => {
                console.log(res.data.data, 6666)
                this.carPagesCount = res.data.data.pages
                this.carListSaveDate = res.data.data.records
                this.carList = res.data.data.records
            })
@@ -606,7 +611,7 @@
        searchClick () {
            this.searchValBoxShow = false
            if (this.navType == 1) {
                this.getCarList(this.searchValue)
                this.getCarList(this.carCurrentPage, this.carPagesize, this.searchValue)
            } else if (this.navType == 2) {
                this.phoneList = accurateSearch(phoneList, this.searchValue, 'name')
            } else if (this.navType == 3) {

 src/views/video/list.vue

@@ -46,7 +46,7 @@
                <div class="car-list">
                    <div class="list-box">
                        <el-table
                            :data="monitoringList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                            :data="monitoringList"
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
@@ -60,9 +60,8 @@
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="monitoringList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :page-count="pagesCount"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
@@ -115,6 +114,7 @@
        return {
            currentPage: 1,
            pagesize: 13,
            pagesCount: 1,
            monitoringList: [],
            monitoringSaveList: [],
            dialogTitle: '',
@@ -137,7 +137,7 @@
    },

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

    mounted () {
@@ -148,10 +148,12 @@
    methods: {
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
            this.getVideoList(this.currentPage, this.pagesize)
        },

        getVideoList (page, count, name) {
            getVideoList(page, count, name).then(res => {
        getVideoList (current, size, name) {
            getVideoList(current, size, name).then(res => {
                this.pagesCount = res.data.data.pages
                this.monitoringList = res.data.data.list
                this.monitoringSaveList = res.data.data.list
                this.$EventBus.$emit('mapRemoveLayer', {
@@ -246,7 +248,7 @@
            if (this.searchValue == '') {
                this.searchValBoxShow = false
                this.searchArray = []
                this.getVideoList(1, 10, this.searchValue)
                this.getVideoList(this.currentPage, this.pagesize, this.searchValue)
                this.$message({
                    message: '请输入搜索内容',
                    type: 'warning'
@@ -254,14 +256,14 @@
            } else {
                this.searchArray = listQuery(this.monitoringSaveList, this.searchValue, 'name')
                this.searchValBoxShow = true
                this.getVideoList(1, 10, this.searchValue)
                this.getVideoList(this.currentPage, this.pagesize, this.searchValue)
            }
        },

        searchClick () {
            if (this.searchValue != '') {
                this.searchValBoxShow = false
                this.getVideoList(1, 10, this.searchValue)
                this.getVideoList(this.currentPage, this.pagesize, this.searchValue)
            } else {
                this.$message({
                    message: '请输入搜索内容',
@@ -275,7 +277,7 @@
            this.searchArray = []
            this.monitoringList = [item]
            this.searchValue = item.name
            this.getVideoList(1, 10, this.searchValue)
            this.getVideoList(this.currentPage, this.pagesize, this.searchValue)
        },

        draw (type) {
@@ -289,8 +291,7 @@
            }
            const that = this
            graphicLayer.activate(type, (lastEventData) => {
                console.log('数据更新')
                console.log('lastEventData', lastEventData)
                console.log('数据更新lastEventData', lastEventData)
                this.drawInfo = lastEventData
                this.getRegionList(type, JSON.stringify(lastEventData))
            })
@@ -330,14 +331,14 @@
        getRegionList (type, data) {
            let positionStr = ''
            if (type == 'polyline') {
                JSON.parse(data).forEach(item => {
                JSON.parse(data).data.forEach(item => {
                    positionStr = positionStr + item[0] + ',' + item[1] + ';'
                })
            } else {
                JSON.parse(data).forEach(item => {
                JSON.parse(data).data.forEach(item => {
                    positionStr = positionStr + item.lng + ',' + item.lat + ';'
                })
                positionStr = positionStr + JSON.parse(data)[0].lng + ',' + JSON.parse(data)[0].lat + ';'
                positionStr = positionStr + JSON.parse(data).data[0].lng + ',' + JSON.parse(data).data[0].lat + ';'
            }
            getRegionList(1, 15, positionStr).then(res => {
                this.monitoringList = res.data.data.list
@@ -350,7 +351,7 @@
        },

        saveDraw () {
            if (this.drawInfo.length > 0) {
            if (this.drawInfo.data.length > 0) {
                if (this.saveFlag == false) {
                    this.$message({
                        message: '当前绘制信息已保存',
@@ -369,6 +370,7 @@
            }
        },

        // 保存绘制的线面
        saveDrawInfo () {
            if (this.drawName == '') {
                this.$message({
@@ -377,30 +379,45 @@
                })
            } else {
                let drawPositionStr = ''
                let drawPositionLineStr = ''

                if (this.drawType == 1) {
                    this.drawInfo.forEach(item => {
                    this.drawInfo.data.forEach(item => {
                        drawPositionStr += item[0] + ' ' + item[1] + ','
                    })

                    this.drawInfo.lineData.forEach(item => {
                        drawPositionLineStr += item.lng + ' ' + item.lat + ','
                    })
                    drawPositionStr = drawPositionStr.slice(0, drawPositionStr.length - 1)
                    drawPositionLineStr = drawPositionLineStr.slice(0, drawPositionLineStr.length - 1)

                } else {
                    this.drawInfo.forEach(item => {
                    this.drawInfo.data.forEach(item => {
                        drawPositionStr += item.lng + ' ' + item.lat + ','
                    })

                    drawPositionStr += this.drawInfo[0].lng + ' ' + this.drawInfo[0].lat
                    drawPositionStr += this.drawInfo.data[0].lng + ' ' + this.drawInfo.data[0].lat
                }
                this.insertRegionSaveList(this.drawType, drawPositionStr, this.drawName)

                console.log('参', drawPositionStr)
                this.insertRegionSaveList(this.drawType, drawPositionStr, this.drawName, drawPositionLineStr)
                this.drawDialogVisible = false
                this.drawName = ''
            }
        },

        insertRegionSaveList (type, positions, name) {
            insertRegionSaveList(type, positions, name).then(res => {
                this.$message({
                    message: '保存成功'
                })
        insertRegionSaveList (type, positions, name, patrol) {
            insertRegionSaveList(type, positions, name, patrol).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '保存成功',
                        type: 'warning'
                    })
                } else {
                    this.$message({
                        message: '保存失败'
                    })
                }

            })
        },
    },

 src/views/video/region.vue

@@ -35,7 +35,7 @@
                    <div class="car-list">
                        <div class="list-box">
                            <el-table
                                :data="saveRangeList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                                :data="saveRangeList"
                                style="width: 100%"
                                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
@@ -74,9 +74,8 @@
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="monitoringList.length"
                                :page-size="pagesize"
                                pager-count="3"
                                :page-count="pagesCount"
                                :current-page="currentPage"
                                @current-change="handleCurrentChange"
                            ></el-pagination>
@@ -85,232 +84,230 @@
                </div>
            </div>
        </div>
        <div class="right-container">
            <div class="item">
                <div class="select" v-show="isShowSelect.video1" @mouseenter="enterSelectBox(1)">
                    <el-select
                        size="small"
                        v-model="monitorType1"
                        @change="((val)=>{navClick(val,1)})"
                        placeholder="请选择"
                        ref="videoSelect1"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video" @mouseenter="enterVideoBox(1)" @mouseleave="leaveVideoBox(1)">
                    <video
                        id="videoElement1"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
        <div class="item video1">
            <div class="select" v-show="isShowSelect.video1" @mouseenter="enterSelectBox(1)">
                <el-select
                    size="small"
                    v-model="monitorType1"
                    @change="((val)=>{navClick(val,1)})"
                    placeholder="请选择"
                    ref="videoSelect1"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="item b-c-left">
                <div class="select" v-show="isShowSelect.video2" @mouseenter="enterSelectBox(2)">
                    <el-select
                        size="small"
                        v-model="monitorType2"
                        @change="((val)=>{navClick(val,2)})"
                        placeholder="请选择"
                        ref="videoSelect2"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video" @mouseenter="enterVideoBox(2)" @mouseleave="leaveVideoBox(2)">
                    <video
                        id="videoElement2"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            <div class="video" @mouseenter="enterVideoBox(1)" @mouseleave="leaveVideoBox(1)">
                <video
                    id="videoElement1"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
            <div class="item b-c-right">
                <div class="select" v-show="isShowSelect.video3" @mouseenter="enterSelectBox(3)">
                    <el-select
                        size="small"
                        v-model="monitorType3"
                        @change="((val)=>{navClick(val,3)})"
                        placeholder="请选择"
                        ref="videoSelect3"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video" @mouseenter="enterVideoBox(3)" @mouseleave="leaveVideoBox(3)">
                    <video
                        id="videoElement3"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
        </div>
        <div class="item video2">
            <div class="select" v-show="isShowSelect.video2" @mouseenter="enterSelectBox(2)">
                <el-select
                    size="small"
                    v-model="monitorType2"
                    @change="((val)=>{navClick(val,2)})"
                    placeholder="请选择"
                    ref="videoSelect2"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="item">
                <div class="select" v-show="isShowSelect.video4" @mouseenter="enterSelectBox(4)">
                    <el-select
                        size="small"
                        v-model="monitorType4"
                        @change="((val)=>{navClick(val,4)})"
                        placeholder="请选择"
                        ref="videoSelect4"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video" @mouseenter="enterVideoBox(4)" @mouseleave="leaveVideoBox(4)">
                    <video
                        id="videoElement4"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            <div class="video" @mouseenter="enterVideoBox(2)" @mouseleave="leaveVideoBox(2)">
                <video
                    id="videoElement2"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
            <div class="item c-left">
                <div class="select" v-show="isShowSelect.video5" @mouseenter="enterSelectBox(5)">
                    <el-select
                        size="small"
                        v-model="monitorType5"
                        @change="((val)=>{navClick(val,5)})"
                        placeholder="请选择"
                        ref="videoSelect5"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video" @mouseenter="enterVideoBox(5)" @mouseleave="leaveVideoBox(5)">
                    <video
                        id="videoElement5"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
        </div>
        <div class="item video3">
            <div class="select" v-show="isShowSelect.video3" @mouseenter="enterSelectBox(3)">
                <el-select
                    size="small"
                    v-model="monitorType3"
                    @change="((val)=>{navClick(val,3)})"
                    placeholder="请选择"
                    ref="videoSelect3"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="item c-right">
                <div class="select" v-show="isShowSelect.video6" @mouseenter="enterSelectBox(6)">
                    <el-select
                        size="small"
                        v-model="monitorType6"
                        @change="((val)=>{navClick(val,6)})"
                        placeholder="请选择"
                        ref="videoSelect6"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video" @mouseenter="enterVideoBox(6)" @mouseleave="leaveVideoBox(6)">
                    <video
                        id="videoElement6"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            <div class="video" @mouseenter="enterVideoBox(3)" @mouseleave="leaveVideoBox(3)">
                <video
                    id="videoElement3"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
            <div class="item t-left">
                <div class="select" v-show="isShowSelect.video7" @mouseenter="enterSelectBox(7)">
                    <el-select
                        size="small"
                        v-model="monitorType7"
        </div>
        <div class="item video4">
            <div class="select" v-show="isShowSelect.video4" @mouseenter="enterSelectBox(4)">
                <el-select
                    size="small"
                    v-model="monitorType4"
                    @change="((val)=>{navClick(val,4)})"
                    placeholder="请选择"
                    ref="videoSelect4"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(4)" @mouseleave="leaveVideoBox(4)">
                <video
                    id="videoElement4"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video5">
            <div class="select" v-show="isShowSelect.video5" @mouseenter="enterSelectBox(5)">
                <el-select
                    size="small"
                    v-model="monitorType5"
                    @change="((val)=>{navClick(val,5)})"
                    placeholder="请选择"
                    ref="videoSelect5"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(5)" @mouseleave="leaveVideoBox(5)">
                <video
                    id="videoElement5"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video6">
            <div class="select" v-show="isShowSelect.video6" @mouseenter="enterSelectBox(6)">
                <el-select
                    size="small"
                    v-model="monitorType6"
                    @change="((val)=>{navClick(val,6)})"
                    placeholder="请选择"
                    ref="videoSelect6"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(6)" @mouseleave="leaveVideoBox(6)">
                <video
                    id="videoElement6"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video7">
            <div class="select" v-show="isShowSelect.video7" @mouseenter="enterSelectBox(7)">
                <el-select
                    size="small"
                    v-model="monitorType7"
                    v-show="isShowSelect.video7"
                    @change="((val)=>{navClick(val,7)})"
                    placeholder="请选择"
                    ref="videoSelect7"
                >
                    <el-option
                        v-show="isShowSelect.video7"
                        @change="((val)=>{navClick(val,7)})"
                        placeholder="请选择"
                        ref="videoSelect7"
                    >
                        <el-option
                            v-show="isShowSelect.video7"
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video" @mouseenter="enterVideoBox(7)" @mouseleave="leaveVideoBox(7)">
                    <video
                        id="videoElement7"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="item t-right">
                <div class="select" v-show="isShowSelect.video8" @mouseenter="enterSelectBox(8)">
                    <el-select
                        size="small"
                        v-model="monitorType8"
                        @change="((val)=>{navClick(val,8)})"
                        placeholder="请选择"
                        ref="videoSelect8"
                    >
                        <el-option
                            v-for="item in monitorOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="video" @mouseenter="enterVideoBox(8)" @mouseleave="leaveVideoBox(8)">
                    <video
                        id="videoElement8"
                        autoplay
                        controls
                        width="100%"
                        height="100%"
                        style="object-fit: fill"
                    ></video>
                </div>
            <div class="video" @mouseenter="enterVideoBox(7)" @mouseleave="leaveVideoBox(7)">
                <video
                    id="videoElement7"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video8">
            <div class="select" v-show="isShowSelect.video8" @mouseenter="enterSelectBox(8)">
                <el-select
                    size="small"
                    v-model="monitorType8"
                    @change="((val)=>{navClick(val,8)})"
                    placeholder="请选择"
                    ref="videoSelect8"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(8)" @mouseleave="leaveVideoBox(8)">
                <video
                    id="videoElement8"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>

@@ -347,6 +344,7 @@
        return {
            currentPage: 1,
            pagesize: 13,
            pagesCount: 1,
            monitoringList: [],
            dialogTitle: '',
            dialogVisible: false,
@@ -389,26 +387,24 @@
    },

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

    mounted () {
        this.$parent.$parent.resize('400px', true)
        graphicLayer = new EntityDraw()
        document.querySelector('.right-container').style.width = document.body.offsetWidth - 400 + 'px'
        window.onresize = () => {
            document.querySelector('.right-container').style.width = document.body.offsetWidth - 400 + 'px'
        }
    },

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

        },

        getVideoList () {
            getVideoList(1, 10).then(res => {
        getVideoList (current, size) {
            getVideoList(current, size).then(res => {
                this.monitoringList = res.data.data.list
                this.initMonitoringIcon()
                this.getMonitorOption()
@@ -478,20 +474,29 @@

        navClick (val, args) {
            this.playVideoList(`flvPlayer${args}`, `${this.monitorOption[val].flvUrl}`, `videoElement${args}`)
            console.log(val, args)
        },

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

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

@@ -509,7 +514,7 @@
                type: 'VectorLayer'
            })
            this.saveRangeList.forEach(item => {
                let positionStr = this.convertPositionDate(item.positions)
                let positionStr = this.convertPositionDate(item.positions, 'polygon')
                let polygonName = 'polygon' + item.id
                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'rangeLayer',
@@ -519,15 +524,26 @@
                    ),
                    polygonName: polygonName
                })
                if (item.type == '1') {
                    let positionStr = this.convertPositionDate(item.patrol, 'line')
                    this.$EventBus.$emit('layerPolylineAdd', {
                        layerName: 'rangeLayer',
                        positions: positionStr,
                        material: global.DC.Color.YELLOW.withAlpha(0.8),
                        width: 1,
                    })
                }
            })

        },

        convertPositionDate (data) {
        convertPositionDate (data, type) {
            let positionStr = data
            positionStr = data.slice(11, positionStr.length - 1)
            let positionArr = positionStr.split(",")
            positionArr = positionArr.slice(0, positionArr.length - 1)
            if (type == 'polygon') {
                positionArr = positionArr.slice(0, positionArr.length - 1)
            }
            let positionNewStr = ''
            positionArr.forEach(item => {
                let lng = item.split(' ')[0]
@@ -617,23 +633,22 @@
            if (this.searchValue == '') {
                this.searchValBoxShow = false
                this.searchArray = []
                this.getRegionSaveList(this.searchValue)
                this.getRegionSaveList(this.currentPage, this.pagesize, this.searchValue)
                this.$message({
                    message: '请输入搜索内容',
                    type: 'warning'
                })
                // this.monitoringList = monitoringList
            } else {
                this.searchArray = listQuery(this.saveRangeList, this.searchValue, 'name')
                this.searchValBoxShow = true
                this.getRegionSaveList(this.searchValue)
                this.getRegionSaveList(this.currentPage, this.pagesize, this.searchValue)
            }
        },

        searchClick () {
            if (this.searchValue != '') {
                this.searchValBoxShow = false
                this.getRegionSaveList(this.searchValue)
                this.getRegionSaveList(this.currentPage, this.pagesize, this.searchValue)
            } else {
                this.$message({
                    message: '请输入搜索内容',
@@ -647,7 +662,7 @@
            this.searchArray = []
            this.monitoringList = [item]
            this.searchValue = item.name
            this.getRegionSaveList(this.searchValue)
            this.getRegionSaveList(this.currentPage, this.pagesize, this.searchValue)
        },

        // 大小重置
@@ -680,7 +695,6 @@
        },

        leaveVideoBox (num) {
            this.isShowSelect[`video${num}`] = false
            if (num == 1) {
                this.$refs.videoSelect1.blur()
            } else if (num == 2) {
@@ -698,7 +712,7 @@
            } else if (num == 8) {
                this.$refs.videoSelect8.blur()
            }

            this.isShowSelect[`video${num}`] = false
        },

        enterSelectBox (num) {
@@ -858,71 +872,70 @@
        }
    }

    .right-container {
    .item {
        background-color: $bg-color;
        position: absolute;
        bottom: 0;
        z-index: 98;
        display: flex;
        flex-wrap: wrap;
        height: 33.33%;
        left: 400px;
        width: calc((1920 - 400) / 4 / 1920 * 100vw);
        height: calc((1080 - 60) / 3 / 1080 * 100vh);

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

        .video {
            height: 100%;
            background-color: $bg-color;
            position: relative;
            padding: 1%;
        }
    }
    .video1 {
        left: calc(1540 / 1920 * 100vw);
    }
    .video2 {
        left: calc(400 / 1920 * 100vw);
    }
    .video3 {
        left: calc(400 / 1920 * 100vw);
        top: calc(340 / 1080 * 100vh);
    }

            .select {
                position: absolute;
                top: 6%;
                width: 100%;
                z-index: 999;
            }
    .video4 {
        left: calc(1540 / 1920 * 100vw);
        top: calc(340 / 1080 * 100vh);
    }
    .video5 {
        left: calc(400 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }
    .video6 {
        left: calc(1540 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }
    .video7 {
        left: calc(780 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }
    .video8 {
        left: calc(1160 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }

            .video {
                height: 100%;
                padding: 1%;
            }
    .video1,
    .video2,
    .video3,
    .video4 {
        .video {
            padding-bottom: 0;
        }

        .c-left {
            position: absolute;
            bottom: 100%;
            left: 0;
        }

        .c-right {
            position: absolute;
            bottom: 100%;
            right: 0;
        }
        .t-left {
            position: absolute;
            bottom: 200%;
            left: 0;
        }

        .t-right {
            position: absolute;
            bottom: 200%;
            right: 0;
        }

        .c-left,
        .c-right,
        .t-left,
        .t-right {
            .video {
                padding-bottom: 0;
            }
        }
        .b-c-left .video {
            padding: 1% 0;
        }
        .b-c-right .video {
            padding: 1% 0 1% 1%;
        }
    }
    .video7 .video {
        padding: 1% 0;
    }
    .video8 .video {
        padding: 1% 0 1% 1%;
    }
}
</style>