视频播放逻辑调整

shuishen

2023-02-28 9f37b5460c10f683d7e10a63b0ec2bb9d9fdca66

视频播放逻辑调整

 src/views/activity/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-28 15:07:24
 * @LastEditTime: 2023-02-28 16:14:37
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 *
@@ -22,11 +22,11 @@
                            v-model="activityType"
                            placeholder="请选择"
                            @change="activityTypeChange"
                                                                                >
                                                                                    <el-option
                                                                                        v-for="item in activityOptions"
                                                                                        :key="item.dictKey"
                                                                                        :label="item.dictValue"
                                                                                                                                                >
                                                                                                                                                    <el-option
                                                                                                                                                        v-for="item in activityOptions"
                                                                                                                                                        :key="item.dictKey"
                                                                                                                                                        :label="item.dictValue"
                                :value="item.dictKey"
                                class="activity-option"
                            ></el-option>
@@ -38,12 +38,12 @@
                    <div class="category">选择时间：</div>
                    <div class="category-value">
                        <!-- <el-date-picker
                                                                                    size="small"
                                                                                    v-model="selectTime"
                                                                                    type="date"
                                                                                    placeholder="选择日期"
                                                                                    style="width:268px"
                                                                                ></el-date-picker>-->
                                                                                                                                                    size="small"
                                                                                                                                                    v-model="selectTime"
                                                                                                                                                    type="date"
                                                                                                                                                    placeholder="选择日期"
                                                                                                                                                    style="width:268px"
                                                                                                                                                ></el-date-picker>-->
                        <el-date-picker v-model="selectTime" type="daterange" align="right" unlink-panels
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
@@ -141,10 +141,10 @@
                    <ul>
                        <li>
                            <!-- <el-button
                                                                                    title="路线绘制"
                                                                                    @click="draw('billboard', 'policeman')"
                                                                                    icon="el-icon-my-route"
                                                                                    ></el-button>-->
                                                                                                                                                    title="路线绘制"
                                                                                                                                                    @click="draw('billboard', 'policeman')"
                                                                                                                                                    icon="el-icon-my-route"
                                                                                                                                                    ></el-button>-->
                            <button @click="draw('polyline', 'policecar')" title="巡逻路线">
                                <img src="../../../public/img/icon/route1.png" style="height:100%" />
                            </button>
@@ -277,9 +277,9 @@
            </div>
        </div>

        <div class="item video5" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video5">
                <el-select size="small" v-model="monitor.type5" @change="((val) => { navClick(val, 5) })" placeholder="请选择"
        <div class="item video1" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video1">
                <el-select size="small" v-model="monitor.type1" @change="((val) => { navClick(val, 1) })" placeholder="请选择"
                    ref="videoSelect5">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
                        class="activity-video-option-css">
@@ -288,14 +288,14 @@
                    </el-option>
                </el-select>
            </div>
            <div class="video" v-show="isHaveMonitor.video5">
            <div class="video" v-show="isHaveMonitor.video1">
                <video id="videoElement5" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video5">设备离线</div>
            <div class="no-video" v-show="!isHaveMonitor.video1">设备离线</div>
        </div>
        <div class="item video6" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video6">
                <el-select size="small" v-model="monitor.type6" @change="((val) => { navClick(val, 6) })" placeholder="请选择"
        <div class="item video2" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video2">
                <el-select size="small" v-model="monitor.type2" @change="((val) => { navClick(val, 2) })" placeholder="请选择"
                    ref="videoSelect6">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
                        class="activity-video-option-css">
@@ -304,30 +304,30 @@
                    </el-option>
                </el-select>
            </div>
            <div class="video" v-show="isHaveMonitor.video6">
            <div class="video" v-show="isHaveMonitor.video2">
                <video id="videoElement6" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video6">设备离线</div>
            <div class="no-video" v-show="!isHaveMonitor.video2">设备离线</div>
        </div>
        <div class="item video7" v-show="videoShow">
            <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"
        <div class="item video3" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video3">
                <el-select size="small" v-model="monitor.type3" v-show="isShowSelect.video3"
                    @change="((val) => { navClick(val, 3) })" placeholder="请选择" ref="videoSelect7">
                    <el-option v-show="isShowSelect.video3" v-for="item in monitorOption" :key="item.value"
                        :label="item.label" :value="item.value" class="activity-video-option-css">
                        <div class="video-status" :style="{ background: (item.status == 0 ? '#adadad' : '#4ccc7d') }"></div>
                        {{ item.label }}
                    </el-option>
                </el-select>
            </div>
            <div class="video" v-show="isHaveMonitor.video7">
            <div class="video" v-show="isHaveMonitor.video3">
                <video id="videoElement7" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video7">设备离线</div>
            <div class="no-video" v-show="!isHaveMonitor.video3">设备离线</div>
        </div>
        <div class="item video8" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video8">
                <el-select size="small" v-model="monitor.type8" @change="((val) => { navClick(val, 8) })" placeholder="请选择"
        <div class="item video4" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video4">
                <el-select size="small" v-model="monitor.type4" @change="((val) => { navClick(val, 4) })" placeholder="请选择"
                    ref="videoSelect8">
                    <el-option v-for="item in monitorOption" :key="item.value" :label="item.label" :value="item.value"
                        class="activity-video-option-css">
@@ -336,10 +336,10 @@
                    </el-option>
                </el-select>
            </div>
            <div class="video" v-show="isHaveMonitor.video8">
            <div class="video" v-show="isHaveMonitor.video4">
                <video id="videoElement8" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
            </div>
            <div class="no-video" v-show="!isHaveMonitor.video8">设备离线</div>
            <div class="no-video" v-show="!isHaveMonitor.video4">设备离线</div>
        </div>
        <div class="deleteVideo" v-show="videoShow" @click="closeVideo">关闭</div>

@@ -617,16 +617,16 @@
            userInfo: {},
            monitorOption: [],
            monitor: {
                type5: '',
                type6: '',
                type7: '',
                type8: '',
                type1: '',
                type2: '',
                type3: '',
                type4: '',
            },
            isShowSelect: {
                video5: true,
                video6: true,
                video7: true,
                video8: true,
                video1: true,
                video2: true,
                video3: true,
                video4: true,
            },
            flvListPlayer: {
                flvPlayer5: null,
@@ -635,11 +635,14 @@
                flvPlayer8: null,
            },
            isHaveMonitor: {
                video5: false,
                video6: false,
                video7: false,
                video8: false,
                video1: false,
                video2: false,
                video3: false,
                video4: false,
            },
            valChoosed: '',
            argsChoosed: '',

            isShowActivityClearBtn: false,
            videoShow: false,
            lineEditVisible: false,
@@ -1501,19 +1504,19 @@
                videoList.forEach(item => {
                    item.classList.add('item-new-width')
                })
                document.querySelector('.video5').classList.add('video5-new-left')
                document.querySelector('.video6').classList.add('video6-new-left')
                document.querySelector('.video7').classList.add('video7-new-left')
                document.querySelector('.video8').classList.add('video8-new-left')
                document.querySelector('.video1').classList.add('video1-new-left')
                document.querySelector('.video2').classList.add('video2-new-left')
                document.querySelector('.video3').classList.add('video3-new-left')
                document.querySelector('.video4').classList.add('video4-new-left')
            } else {
                let videoList = document.querySelectorAll('.item')
                videoList.forEach(item => {
                    item.classList.remove('item-new-width')
                })
                document.querySelector('.video5').classList.remove('video5-new-left')
                document.querySelector('.video6').classList.remove('video6-new-left')
                document.querySelector('.video7').classList.remove('video7-new-left')
                document.querySelector('.video8').classList.remove('video8-new-left')
                document.querySelector('.video1').classList.remove('video1-new-left')
                document.querySelector('.video2').classList.remove('video2-new-left')
                document.querySelector('.video3').classList.remove('video3-new-left')
                document.querySelector('.video4').classList.remove('video4-new-left')
            }
        },

@@ -1869,30 +1872,54 @@
            this.searchClick()
        },


        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.isHaveMonitor[`video${args}`] = true
            }

            this.getDevices(this.monitorOption[val].item.channelId).then(res => {
                this.playVideoList(`flvPlayer${args}`, `${res}`, `videoElement${args}`)
            })
        },

        /**
         * @description: 获取视频播放列表
         * @param {*} positionNewStr
         * @return {*}
         */
        getRegionList (positionNewStr) {
            getRegionList({ page: 1, count: 15, range: positionNewStr }).then(res => {
                let monitorData = res.data.data.list
                this.initMonitoringIcon(monitorData)
                this.monitorOption = []
                monitorData.forEach((item, index) => {
                    let flvAddress = ''
                    getDevices(item.channelId).then(res => {
                        if ('data' in res.data) {
                            flvAddress = res.data.data.flv
                        } else {
                            flvAddress = 'nodata'
                        }
                        this.monitorOption.push({ value: `${index}`, label: `${item.name}`, flvUrl: `${flvAddress}`, status: `${item.status}` })
                        if (index == monitorData.length - 1) {
                            this.monitorOption.forEach((itemm, indexx) => {
                                if (indexx < 4) {
                                    this.isHaveMonitor[`type${indexx + 5}`] = true
                                    this.monitor[`type${indexx + 5}`] = itemm.label
                                    this.playVideoList(`flvPlayer${indexx + 5}`, `${itemm.flvUrl}`, `videoElement${indexx + 5}`)
                                }
                            })
                        }
                    })

                    this.monitorOption.push({ value: `${index}`, label: `${item.name}`, status: `${item.status}`, item })

                    if (index < 4) {
                        const ind = index + 1

                        this.monitor[`type${ind}`] = item.name
                        this.isHaveMonitor[`video${ind}`] = true

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

                            this.playVideoList(`flvPlayer${ind}`, `${flvAddress}`, `videoElement${ind}`)
                        })
                    }

                })
            })
@@ -1940,7 +1967,7 @@
            const chunkLine = this.$turf.lineChunk(line, 0.1)
            let newPostion = chunkLine.features.reduce((pre, cur) =>
                pre.concat(cur.geometry.coordinates)
            , [])
                , [])
            newPostion = newPostion.filter((item, index) => index == newPostion.lastIndexOf(item))

            this.getRegionList(this.polygonPosition)
@@ -1952,10 +1979,18 @@

            tc = new global.DC.TrackController(global.viewer)

            track = new global.DC.Track(newPostion, 100)
            /**
             * @description: 
             * @param {*} position 当前行驶位置信息
             * @param {*} isLast 是否为最后一个点位
             * @return {*}
             */
            track = new global.DC.Track(newPostion, 100, (position, isLast) => {

            })

            track.setModel('/model/qiche.gltf', {
                scale: 0.5
                scale: 0.8
            })

            tc.addTrack(track)
@@ -2745,7 +2780,7 @@
        width: 25vw;
    }

    .video5 {
    .video1 {
        left: calc(400 / 1920 * 100vw);

        .video {
@@ -2757,7 +2792,7 @@
        }
    }

    .video6 {
    .video2 {
        left: calc(780 / 1920 * 100vw);

        .video {
@@ -2769,7 +2804,7 @@
        }
    }

    .video7 {
    .video3 {
        left: calc(1160 / 1920 * 100vw);

        .video {
@@ -2781,23 +2816,23 @@
        }
    }

    .video8 {
    .video4 {
        left: calc(1540 / 1920 * 100vw);
    }

    .video5-new-left {
    .video1-new-left {
        left: 0;
    }

    .video6-new-left {
    .video2-new-left {
        left: 25vw;
    }

    .video7-new-left {
    .video3-new-left {
        left: 50vw;
    }

    .video8-new-left {
    .video4-new-left {
        left: 75vw;
    }