视频巡查设备离线显示

guanqb

2023-02-16 539fe44209f3dd5d48c0bbeccc1eef0aa3ba862c

视频巡查设备离线显示

 src/views/house/index.vue

@@ -1179,6 +1179,7 @@

        chooseUnit (value) {
            this.floorsType = 1
            this.floorChoosed = []
            this.unitHouseChoosed = this.allHouseFloorList[this.unitValue - 1]
            document.querySelector(".floor-num").style.left = '0px'
            this.lastFloorShow = false

 src/views/video/region.vue

@@ -115,6 +115,7 @@
                    style="object-fit: fill"
                ></video>
            </div>
            <div class="outline" v-show="isShowOutline.video1">设备离线</div>
        </div>
        <div class="item video2" v-show="isShowVideo.video2">
            <div class="close" @click="isShowVideo.video2 = false">
@@ -146,6 +147,7 @@
                    style="object-fit: fill"
                ></video>
            </div>
            <div class="outline" v-show="isShowOutline.video2">设备离线</div>
        </div>
        <div class="item video3" v-show="isShowVideo.video3">
            <div class="close" @click="isShowVideo.video3 = false">
@@ -177,6 +179,7 @@
                    style="object-fit: fill"
                ></video>
            </div>
            <div class="outline" v-show="isShowOutline.video3">设备离线</div>
        </div>
        <div class="item video4" v-show="isShowVideo.video4">
            <div class="close" @click="isShowVideo.video4 = false">
@@ -208,6 +211,7 @@
                    style="object-fit: fill"
                ></video>
            </div>
            <div class="outline" v-show="isShowOutline.video4">设备离线</div>
        </div>
        <div class="item video5" v-show="isShowVideo.video5">
            <div class="close" @click="isShowVideo.video5 = false">
@@ -239,6 +243,7 @@
                    style="object-fit: fill"
                ></video>
            </div>
            <div class="outline" v-show="isShowOutline.video5">设备离线</div>
        </div>
        <div class="item video6" v-show="isShowVideo.video6">
            <div class="close" @click="isShowVideo.video6 = false">
@@ -270,6 +275,7 @@
                    style="object-fit: fill"
                ></video>
            </div>
            <div class="outline" v-show="isShowOutline.video6">设备离线</div>
        </div>
        <div class="item video7" v-show="isShowVideo.video7">
            <div class="close" @click="isShowVideo.video7 = false">
@@ -303,6 +309,7 @@
                    style="object-fit: fill"
                ></video>
            </div>
            <div class="outline" v-show="isShowOutline.video7">设备离线</div>
        </div>
        <div class="item video8" v-show="isShowVideo.video8">
            <div class="close" @click="isShowVideo.video8 = false">
@@ -334,6 +341,7 @@
                    style="object-fit: fill"
                ></video>
            </div>
            <div class="outline" v-show="isShowOutline.video8">设备离线</div>
        </div>
        <div class="deleteVideo" v-show="isShowVideo.video1" @click="deleteVideo">关闭</div>

@@ -426,6 +434,16 @@
            saveRangeID: '',
            valChoosed: '',
            argsChoosed: '',
            isShowOutline: {
                video1: false,
                video2: false,
                video3: false,
                video4: false,
                video5: false,
                video6: false,
                video7: false,
                video8: false,
            }
        }
    },

@@ -518,7 +536,9 @@
            this.argsChoosed = args

            this.monitor[`type${args}`] = this.monitorOption[val].item.name

            if (this.monitorOption[val].item.status == 0) {
                this.isShowOutline[`video${args}`] = true
            }
            this.getDevices(this.monitorOption[val].item.channelId).then(res => {

                this.playVideoList(`flvPlayer${args}`, `${res}`, `videoElement${args}`)
@@ -676,13 +696,15 @@
                this.monitorOption = []

                monitorData.forEach((item, index) => {

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

                    if (index < 8) {
                        const ind = index + 1
                        this.isShowVideo[`video${ind}`] = true
                        this.monitor[`type${ind}`] = item.name
                        if (item.status == 0) {
                            this.isShowOutline[`video${ind}`] = true
                        }

                        this.getDevices(item.channelId).then(res => {

@@ -1035,7 +1057,7 @@
            cursor: pointer;
        }
        .close:hover {
            background-color: #65b1ff;
            color: #65b1ff;
        }

        .select {
@@ -1049,6 +1071,16 @@
            height: 100%;
            padding: 1%;
        }

        .outline {
            position: absolute;
            color: #eee;
            letter-spacing: 2px;
            font-size: 24px;
            width: 100%;
            text-align: center;
            top: 40%;
        }
    }

    .new-item-width {