Merge branch 'ybranch'

shuishen

2023-02-28 238d5f014f1ce245e3b92dca924d838035e9b99f

Merge branch 'ybranch'

 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:19:59
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 *
@@ -276,9 +276,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">
@@ -287,14 +287,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">
@@ -303,30 +303,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">
@@ -335,10 +335,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>

@@ -616,16 +616,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,
@@ -634,11 +634,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,
@@ -1529,19 +1532,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')
            }
        },

@@ -1915,31 +1918,62 @@
            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
            }

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


                this.playVideoList(`flvPlayer${args}`, `${flvAddress}`, `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 = ''

                    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.monitorOption.push({ value: `${index}`, label: `${item.name}`, flvUrl: `${flvAddress}`, status: `${item.status}` })
                        if (index == monitorData.length - 1) {
                            console.log('this.monitorOption',this.monitorOption);
                            this.monitorOption.forEach((itemm, indexx) => {
                                if (indexx < 4) {
                                    this.isHaveMonitor[`video${indexx + 5}`] = itemm.status == '0' ? false:true
                                    this.monitor[`type${indexx + 5}`] = itemm.label
                                    this.playVideoList(`flvPlayer${indexx + 5}`, `${itemm.flvUrl}`, `videoElement${indexx + 5}`)
                                }

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

                })
            })
@@ -1958,7 +1992,7 @@
        },

        playVideoList (flvItemPlayer, flvUrl, videoEleName) {
            console.log('flvUrl',flvUrl);
            console.log('flvUrl', flvUrl)
            if (this.flvListPlayer[flvItemPlayer] != null) {
                this.flvListPlayer[flvItemPlayer].pause()
                this.flvListPlayer[flvItemPlayer].unload()
@@ -2003,10 +2037,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)
@@ -2809,7 +2851,7 @@
        width: 25vw;
    }

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

        .video {
@@ -2821,7 +2863,7 @@
        }
    }

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

        .video {
@@ -2833,7 +2875,7 @@
        }
    }

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

        .video {
@@ -2845,23 +2887,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;
    }