视频点击优化

guanqb

2023-01-03 b869e4a94658abcaa7200c8b51909d9c95003fef

视频点击优化

 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:18185/api"
            config.baseURL = "http://192.168.0.129: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/views/activity/index.vue

@@ -703,8 +703,10 @@
                type: 'VectorLayer'
            })
            getSecurityCarList(securityId).then(res => {
                console.log(res.data.data, 3333)
                res.data.data.forEach(item => {
                    if (item.type == 1) {
                        console.log(item, 124)
                        let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
                        this.$EventBus.$emit('layerPolylineAdd', {
                            layerName: 'newCarDrawLayers',
@@ -1055,6 +1057,7 @@
        drawArrow (type) {
            arrowPlot && arrowPlot.draw(type, overlay => {
                if (overlay) {
                    console.log(overlay._positions, 123)
                    drawArrowLayers.addOverlay(overlay)
                    plot.edit(overlay)
                }

 src/views/video/region.vue

@@ -85,7 +85,7 @@
            </div>
        </div>
        <div class="item video1" v-show="isShowVideo.video1">
            <div class="select" v-show="isShowSelect.video1" @mouseenter="enterSelectBox(1)">
            <div class="select" v-show="isShowSelect.video1">
                <el-select
                    size="small"
                    v-model="monitor.type1"
@@ -101,7 +101,7 @@
                    ></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(1)" @mouseleave="leaveVideoBox(1)">
            <div class="video">
                <video
                    id="videoElement1"
                    autoplay
@@ -113,7 +113,7 @@
            </div>
        </div>
        <div class="item video2" v-show="isShowVideo.video2">
            <div class="select" v-show="isShowSelect.video2" @mouseenter="enterSelectBox(2)">
            <div class="select" v-show="isShowSelect.video2">
                <el-select
                    size="small"
                    v-model="monitor.type2"
@@ -129,7 +129,7 @@
                    ></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(2)" @mouseleave="leaveVideoBox(2)">
            <div class="video">
                <video
                    id="videoElement2"
                    autoplay
@@ -141,7 +141,7 @@
            </div>
        </div>
        <div class="item video3" v-show="isShowVideo.video3">
            <div class="select" v-show="isShowSelect.video3" @mouseenter="enterSelectBox(3)">
            <div class="select" v-show="isShowSelect.video3">
                <el-select
                    size="small"
                    v-model="monitor.type3"
@@ -157,7 +157,7 @@
                    ></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(3)" @mouseleave="leaveVideoBox(3)">
            <div class="video">
                <video
                    id="videoElement3"
                    autoplay
@@ -169,7 +169,7 @@
            </div>
        </div>
        <div class="item video4" v-show="isShowVideo.video4">
            <div class="select" v-show="isShowSelect.video4" @mouseenter="enterSelectBox(4)">
            <div class="select" v-show="isShowSelect.video4">
                <el-select
                    size="small"
                    v-model="monitor.type4"
@@ -185,7 +185,7 @@
                    ></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(4)" @mouseleave="leaveVideoBox(4)">
            <div class="video">
                <video
                    id="videoElement4"
                    autoplay
@@ -197,7 +197,7 @@
            </div>
        </div>
        <div class="item video5" v-show="isShowVideo.video5">
            <div class="select" v-show="isShowSelect.video5" @mouseenter="enterSelectBox(5)">
            <div class="select" v-show="isShowSelect.video5">
                <el-select
                    size="small"
                    v-model="monitor.type5"
@@ -213,7 +213,7 @@
                    ></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(5)" @mouseleave="leaveVideoBox(5)">
            <div class="video">
                <video
                    id="videoElement5"
                    autoplay
@@ -225,7 +225,7 @@
            </div>
        </div>
        <div class="item video6" v-show="isShowVideo.video6">
            <div class="select" v-show="isShowSelect.video6" @mouseenter="enterSelectBox(6)">
            <div class="select" v-show="isShowSelect.video6">
                <el-select
                    size="small"
                    v-model="monitor.type6"
@@ -241,7 +241,7 @@
                    ></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(6)" @mouseleave="leaveVideoBox(6)">
            <div class="video">
                <video
                    id="videoElement6"
                    autoplay
@@ -253,7 +253,7 @@
            </div>
        </div>
        <div class="item video7" v-show="isShowVideo.video7">
            <div class="select" v-show="isShowSelect.video7" @mouseenter="enterSelectBox(7)">
            <div class="select" v-show="isShowSelect.video7">
                <el-select
                    size="small"
                    v-model="monitor.type7"
@@ -271,7 +271,7 @@
                    ></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(7)" @mouseleave="leaveVideoBox(7)">
            <div class="video">
                <video
                    id="videoElement7"
                    autoplay
@@ -283,7 +283,7 @@
            </div>
        </div>
        <div class="item video8" v-show="isShowVideo.video8">
            <div class="select" v-show="isShowSelect.video8" @mouseenter="enterSelectBox(8)">
            <div class="select" v-show="isShowSelect.video8">
                <el-select
                    size="small"
                    v-model="monitor.type8"
@@ -299,7 +299,7 @@
                    ></el-option>
                </el-select>
            </div>
            <div class="video" @mouseenter="enterVideoBox(8)" @mouseleave="leaveVideoBox(8)">
            <div class="video">
                <video
                    id="videoElement8"
                    autoplay
@@ -376,14 +376,14 @@
                type8: '',
            },
            isShowSelect: {
                video1: false,
                video2: false,
                video3: false,
                video4: false,
                video5: false,
                video6: false,
                video7: false,
                video8: false,
                video1: true,
                video2: true,
                video3: true,
                video4: true,
                video5: true,
                video6: true,
                video7: true,
                video8: true,
            },
            isShowVideo: {
                video1: false,
@@ -395,6 +395,9 @@
                video7: false,
                video8: false,
            },
            saveRangeID: '',
            valChoosed: '',
            argsChoosed: '',
        }
    },

@@ -482,6 +485,9 @@
        },

        navClick (val, args) {
            if (this.valChoosed == val && this.argsChoosed == args) return
            this.valChoosed = val
            this.argsChoosed = args
            this.playVideoList(`flvPlayer${args}`, `${this.monitorOption[val].flvUrl}`, `videoElement${args}`)
        },

@@ -574,26 +580,29 @@
            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) {
            if (this.saveRangeID == row.id) return
            this.saveRangeID = row.id

            this.isShowVideo = {
                video1: false,
                video2: false,
@@ -627,6 +636,7 @@
            getRegionList(1, 15, positionNewStr).then(res => {
                let monitorData = res.data.data.list
                console.log(res.data.data.list, 123)
                this.monitoringList = res.data.data.list
                this.monitorOption = []
                monitorData.forEach((item, index) => {
                    let flvUrl = ''
@@ -721,54 +731,54 @@
            this.boxShow = val
        },

        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
        },
        // 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
        },
        // 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
        },
        // enterSelectBox (num) {
        //     this.isShowSelect[`video${num}`] = true
        // },

    },


 vue.config.js

@@ -153,7 +153,7 @@
        proxy: {
            "/api": {
                // target用于配置你允许访问数据的计算机名称，即是你的api接口的服务器地址
                target: "http://192.168.0.125:82",
                target: "http://192.168.0.126:82",
                // ws: true, //启用webSocket
                changeOrigin: true, //开启代理跨域
                pathRewrite: {