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

shuishen

2022-12-29 b771e61301458de4ac0612fc26f0b9463dbe50fc

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

 src/router/axios.js

@@ -57,7 +57,7 @@
            // config.baseURL = 'http://192.168.0.115:18080/api'
            // 内网部署地址
            // config.baseURL = 'http://10.141.11.11:18185/api'
            config.baseURL = "http://192.168.0.109:18080/api"
            config.baseURL = "http://192.168.0.109:18185/api"
            // config.baseURL = 'http://192.168.0.106:1888/api'
        } else if (config.requestBaseUrl == "fengt") {
            config.baseURL = "http://10.141.11.11:18080"

 src/styles/media/index.scss

@@ -17,6 +17,8 @@

                    .title {
                        font-size: countSizeVh(24);
                        width: countSizeVw(450, 1920);
                        letter-spacing: countSizeVw(6, 1920);
                    }

                    .menu-list.left {

 src/views/video/list.vue

@@ -365,15 +365,7 @@
        },

        saveDraw () {
            if (this.drawInfo.data.length > 0) {
                if (this.saveFlag == false) {
                    this.$message({
                        message: '当前绘制信息已保存',
                        type: 'warning'
                    })

                    return
                }
            if (this.drawInfo.length != 0) {
                this.drawDialogVisible = true
                this.saveFlag = false
            } else {
@@ -416,6 +408,7 @@
                this.insertRegionSaveList(this.drawType, drawPositionStr, this.drawName, drawPositionLineStr)
                this.drawDialogVisible = false
                this.drawName = ''
                this.removeDrawLayer()
            }
        },


 src/views/video/region.vue

@@ -84,11 +84,11 @@
                </div>
            </div>
        </div>
        <div class="item video1" v-show="isShowVideo1">
        <div class="item video1" v-show="isShowVideo.video1">
            <div class="select" v-show="isShowSelect.video1" @mouseenter="enterSelectBox(1)">
                <el-select
                    size="small"
                    v-model="monitorType1"
                    v-model="monitor.type1"
                    @change="((val) => { navClick(val, 1) })"
                    placeholder="请选择"
                    ref="videoSelect1"
@@ -112,11 +112,11 @@
                ></video>
            </div>
        </div>
        <div class="item video2" v-show="isShowVideo2">
        <div class="item video2" v-show="isShowVideo.video2">
            <div class="select" v-show="isShowSelect.video2" @mouseenter="enterSelectBox(2)">
                <el-select
                    size="small"
                    v-model="monitorType2"
                    v-model="monitor.type2"
                    @change="((val) => { navClick(val, 2) })"
                    placeholder="请选择"
                    ref="videoSelect2"
@@ -140,11 +140,11 @@
                ></video>
            </div>
        </div>
        <div class="item video3" v-show="isShowVideo3">
        <div class="item video3" v-show="isShowVideo.video3">
            <div class="select" v-show="isShowSelect.video3" @mouseenter="enterSelectBox(3)">
                <el-select
                    size="small"
                    v-model="monitorType3"
                    v-model="monitor.type3"
                    @change="((val) => { navClick(val, 3) })"
                    placeholder="请选择"
                    ref="videoSelect3"
@@ -168,11 +168,11 @@
                ></video>
            </div>
        </div>
        <div class="item video4" v-show="isShowVideo4">
        <div class="item video4" v-show="isShowVideo.video4">
            <div class="select" v-show="isShowSelect.video4" @mouseenter="enterSelectBox(4)">
                <el-select
                    size="small"
                    v-model="monitorType4"
                    v-model="monitor.type4"
                    @change="((val) => { navClick(val, 4) })"
                    placeholder="请选择"
                    ref="videoSelect4"
@@ -196,11 +196,11 @@
                ></video>
            </div>
        </div>
        <div class="item video5" v-show="isShowVideo5">
        <div class="item video5" v-show="isShowVideo.video5">
            <div class="select" v-show="isShowSelect.video5" @mouseenter="enterSelectBox(5)">
                <el-select
                    size="small"
                    v-model="monitorType5"
                    v-model="monitor.type5"
                    @change="((val) => { navClick(val, 5) })"
                    placeholder="请选择"
                    ref="videoSelect5"
@@ -224,11 +224,11 @@
                ></video>
            </div>
        </div>
        <div class="item video6" v-show="isShowVideo6">
        <div class="item video6" v-show="isShowVideo.video6">
            <div class="select" v-show="isShowSelect.video6" @mouseenter="enterSelectBox(6)">
                <el-select
                    size="small"
                    v-model="monitorType6"
                    v-model="monitor.type6"
                    @change="((val) => { navClick(val, 6) })"
                    placeholder="请选择"
                    ref="videoSelect6"
@@ -252,11 +252,11 @@
                ></video>
            </div>
        </div>
        <div class="item video7" v-show="isShowVideo7">
        <div class="item video7" v-show="isShowVideo.video7">
            <div class="select" v-show="isShowSelect.video7" @mouseenter="enterSelectBox(7)">
                <el-select
                    size="small"
                    v-model="monitorType7"
                    v-model="monitor.type7"
                    v-show="isShowSelect.video7"
                    @change="((val) => { navClick(val, 7) })"
                    placeholder="请选择"
@@ -282,11 +282,11 @@
                ></video>
            </div>
        </div>
        <div class="item video8" v-show="isShowVideo8">
        <div class="item video8" v-show="isShowVideo.video8">
            <div class="select" v-show="isShowSelect.video8" @mouseenter="enterSelectBox(8)">
                <el-select
                    size="small"
                    v-model="monitorType8"
                    v-model="monitor.type8"
                    @change="((val) => { navClick(val, 8) })"
                    placeholder="请选择"
                    ref="videoSelect8"
@@ -365,14 +365,16 @@
            },
            saveRangeList: [],
            monitorOption: [],
            monitorType1: '',
            monitorType2: '',
            monitorType3: '',
            monitorType4: '',
            monitorType5: '',
            monitorType6: '',
            monitorType7: '',
            monitorType8: '',
            monitor: {
                type1: '',
                type2: '',
                type3: '',
                type4: '',
                type5: '',
                type6: '',
                type7: '',
                type8: '',
            },
            isShowSelect: {
                video1: false,
                video2: false,
@@ -383,19 +385,21 @@
                video7: false,
                video8: false,
            },
            isShowVideo1: false,
            isShowVideo2: false,
            isShowVideo3: false,
            isShowVideo4: false,
            isShowVideo5: false,
            isShowVideo6: false,
            isShowVideo7: false,
            isShowVideo8: false,
            isShowVideo: {
                video1: false,
                video2: false,
                video3: false,
                video4: false,
                video5: false,
                video6: false,
                video7: false,
                video8: false,
            },
        }
    },

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

@@ -411,51 +415,48 @@

        },

        getVideoList (current, size) {
            getVideoList(current, size).then(res => {
                this.monitoringList = res.data.data.list
                this.initMonitoringIcon()
                this.getMonitorOption()
            })
        },
        // 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.monitorType1 = this.monitorOption[0].label
                            this.monitorType2 = this.monitorOption[0].label
                            this.monitorType3 = this.monitorOption[0].label
                            this.monitorType4 = this.monitorOption[0].label
                            this.monitorType5 = this.monitorOption[0].label
                            this.monitorType6 = this.monitorOption[0].label
                            for (let i = 0; i < 6; i++) {
                                this.playVideoList(`flvPlayer${i + 1}`, `${this.monitorOption[0].flvUrl}`, `videoElement${i + 1}`)
                            }
        // 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.monitorType1 = this.monitorOption[0].label
                            this.monitorType2 = this.monitorOption[1].label
                            this.monitorType3 = this.monitorOption[2].label
                            this.monitorType4 = this.monitorOption[3].label
                            this.monitorType5 = this.monitorOption[4].label
                            this.monitorType6 = this.monitorOption[5].label
                            for (let i = 0; i < 6; i++) {
                                this.playVideoList(`flvPlayer${i + 1}`, `${this.monitorOption[i].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) {
@@ -561,9 +562,9 @@
            return positionNewStr
        },

        async getDevices (id) {
        async getDevices (id, channelId) {
            let flvAddress = ''
            await getDevices(id).then(res => {
            await getDevices(id, channelId).then(res => {
                if ('data' in res.data) {
                    flvAddress = res.data.data.flv
                } else {
@@ -573,72 +574,107 @@
            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: 100,
                        url: '/img/icon/video.png',
                        deviceId: item.deviceId
                    },
                    incident: this.siteClick
                })
        // 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: 100,
        //                 url: '/img/icon/video.png',
        //                 deviceId: item.deviceId
        //             },
        //             incident: this.siteClick
        //         })

            })
        },
        //     })
        // },

        rowClick (row) {
            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: ''
            }
            let positionStr = ''
            positionStr = row.positions.slice(11, positionStr.length - 1)
            let positionArr = []
            positionArr = positionStr.split(",").slice(0, positionArr.length - 1)
            positionArr = positionStr.split(",")
            let positionNewStr = ''
            positionArr.forEach(item => {
                let lng = item.split(' ')[0]
                let lat = item.split(' ')[1]
                positionNewStr += lng + ',' + lat + ';'
            })
            console.log(positionNewStr, 333)
            getRegionList(1, 15, positionStr).then(res => {
                // let data = res.data.data.list
                console.log(res, 123)

            })
        },

        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
            getRegionList(1, 15, positionNewStr).then(res => {
                let monitorData = res.data.data.list
                console.log(res.data.data.list, 123)
                this.monitorOption = []
                monitorData.forEach((item, index) => {
                    let flvUrl = ''
                    this.getDevices(item.deviceId, item.channelId).then(res => {
                        flvUrl = res
                        this.monitorOption.push({ value: `${index}`, label: `${item.name}`, flvUrl: `${flvUrl}` })
                        if (index == monitorData.length - 1) {
                            this.monitorOption.forEach((itemm, indexx) => {
                                if (indexx < 8) {
                                    this.isShowVideo[`video${indexx + 1}`] = true
                                    this.monitor[`type${indexx + 1}`] = itemm.label
                                    this.playVideoList(`flvPlayer${indexx + 1}`, `${itemm.flvUrl}`, `videoElement${indexx + 1}`)
                                }
                            })
                        }
                    })
                })
                this.flvPlayer.attachMediaElement(videoElement)
                this.flvPlayer.load()
                this.flvPlayer.play()
            }
            })
        },

        // 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
@@ -675,7 +711,7 @@
        searchVlaClick (item) {
            this.searchValBoxShow = false
            this.searchArray = []
            this.monitoringList = [item]
            // this.monitoringList = [item]
            this.searchValue = item.name
            this.getRegionSaveList(this.currentPage, this.pagesize, this.searchValue)
        },
@@ -943,23 +979,6 @@
    .video8 {
        left: calc(1160 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }

    .video1,
    .video2,
    .video3,
    .video4 {
        .video {
            padding-bottom: 0;
        }
    }

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

    .video8 .video {
        padding: 1% 0 1% 1%;
    }
}
</style>