视频巡查修改

guanqb

2023-02-17 1ebf5c37bde4763f4f605cf2e653ad056c6b72a4

视频巡查修改

 src/styles/base/index.scss

@@ -863,6 +863,11 @@
                }
            }

            .units {
                width: 20px;
                height: 26px;
            }

        }
    }
}

 src/styles/media/index.scss

@@ -2198,6 +2198,11 @@
                                    }
                                }

                                .units {
                                    width: countSizeVw(20, 1920);
                                    height: countSizeVh(26);
                                }

                            }
                        }
                    }

 src/views/activity/index.vue

@@ -494,13 +494,14 @@
            class="edit-line-box"
        >
            <div>
                <div class="value-name-box">设置宽度：</div>
                <div class="value-name-box">设置缓冲范围：</div>
                <div class="input-width-box">
                    <input type="text" v-model="lineWidth" placeholder="请输入..." />
                </div>
                <div class="units">米</div>
            </div>
            <div>
                <div class="value-name-box">选择颜色：</div>
                <div class="value-name-box">选择范围颜色：</div>
                <div class="color-box">
                    <div
                        class="red-color"
@@ -515,6 +516,7 @@
                        @click="changeLineColor('#0000FF')"
                    >{{ chooseColor == '#0000FF'?'√':'' }}</div>
                </div>
                <div class="units"></div>
            </div>
            <div>
                <el-button @click="watchVideo">查看视频</el-button>
@@ -1338,6 +1340,7 @@
        // 分页页码变化事件
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
            this.currentClickIndex = -1
            this.getSecurityList(this.currentPage, this.pagesize)
        },

@@ -2574,14 +2577,32 @@

    .video5 {
        left: calc(400 / 1920 * 100vw);
        .video {
            padding: 1% 0 1% 1%;
        }
        .no-video {
            margin: 1% 0 1% 1%;
        }
    }

    .video6 {
        left: calc(780 / 1920 * 100vw);
        .video {
            padding: 1% 0 1% 1%;
        }
        .no-video {
            margin: 1% 0 1% 1%;
        }
    }

    .video7 {
        left: calc(1160 / 1920 * 100vw);
        .video {
            padding: 1% 0 1% 1%;
        }
        .no-video {
            margin: 1% 0 1% 1%;
        }
    }

    .video8 {

 src/views/home/index.vue

@@ -1621,6 +1621,7 @@

                if (res.data.data.list.length > 0) {
                    this.equimentTableData = res.data.data.list
                    console.log(this.equimentTableData[0], 22323)

                    this.equimentPagingTotal = res.data.data.total
                } else {

 src/views/video/region.vue

@@ -86,9 +86,6 @@
            </div>
        </div>
        <div class="item video1" v-show="isShowVideo.video1">
            <div class="close" @click="isShowVideo.video1 = false">
                <i class="el-icon-close"></i>
            </div>
            <div class="select" v-show="isShowSelect.video1">
                <el-select
                    size="small"
@@ -104,6 +101,9 @@
                        :value="item.value"
                    ></el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video1 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video">
                <video
@@ -118,9 +118,6 @@
            <div class="outline" v-show="isShowOutline.video1">设备离线</div>
        </div>
        <div class="item video2" v-show="isShowVideo.video2">
            <div class="close" @click="isShowVideo.video2 = false">
                <i class="el-icon-close"></i>
            </div>
            <div class="select" v-show="isShowSelect.video2">
                <el-select
                    size="small"
@@ -136,6 +133,9 @@
                        :value="item.value"
                    ></el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video2 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video">
                <video
@@ -150,9 +150,6 @@
            <div class="outline" v-show="isShowOutline.video2">设备离线</div>
        </div>
        <div class="item video3" v-show="isShowVideo.video3">
            <div class="close" @click="isShowVideo.video3 = false">
                <i class="el-icon-close"></i>
            </div>
            <div class="select" v-show="isShowSelect.video3">
                <el-select
                    size="small"
@@ -168,6 +165,9 @@
                        :value="item.value"
                    ></el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video3 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video">
                <video
@@ -182,9 +182,6 @@
            <div class="outline" v-show="isShowOutline.video3">设备离线</div>
        </div>
        <div class="item video4" v-show="isShowVideo.video4">
            <div class="close" @click="isShowVideo.video4 = false">
                <i class="el-icon-close"></i>
            </div>
            <div class="select" v-show="isShowSelect.video4">
                <el-select
                    size="small"
@@ -200,6 +197,9 @@
                        :value="item.value"
                    ></el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video4 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video">
                <video
@@ -214,9 +214,6 @@
            <div class="outline" v-show="isShowOutline.video4">设备离线</div>
        </div>
        <div class="item video5" v-show="isShowVideo.video5">
            <div class="close" @click="isShowVideo.video5 = false">
                <i class="el-icon-close"></i>
            </div>
            <div class="select" v-show="isShowSelect.video5">
                <el-select
                    size="small"
@@ -232,6 +229,9 @@
                        :value="item.value"
                    ></el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video5 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video">
                <video
@@ -246,9 +246,6 @@
            <div class="outline" v-show="isShowOutline.video5">设备离线</div>
        </div>
        <div class="item video6" v-show="isShowVideo.video6">
            <div class="close" @click="isShowVideo.video6 = false">
                <i class="el-icon-close"></i>
            </div>
            <div class="select" v-show="isShowSelect.video6">
                <el-select
                    size="small"
@@ -264,6 +261,9 @@
                        :value="item.value"
                    ></el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video6 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video">
                <video
@@ -278,9 +278,6 @@
            <div class="outline" v-show="isShowOutline.video6">设备离线</div>
        </div>
        <div class="item video7" v-show="isShowVideo.video7">
            <div class="close" @click="isShowVideo.video7 = false">
                <i class="el-icon-close"></i>
            </div>
            <div class="select" v-show="isShowSelect.video7">
                <el-select
                    size="small"
@@ -298,6 +295,9 @@
                        :value="item.value"
                    ></el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video7 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video">
                <video
@@ -312,9 +312,6 @@
            <div class="outline" v-show="isShowOutline.video7">设备离线</div>
        </div>
        <div class="item video8" v-show="isShowVideo.video8">
            <div class="close" @click="isShowVideo.video8 = false">
                <i class="el-icon-close"></i>
            </div>
            <div class="select" v-show="isShowSelect.video8">
                <el-select
                    size="small"
@@ -330,6 +327,9 @@
                        :value="item.value"
                    ></el-option>
                </el-select>
                <div class="close" @click="isShowVideo.video8 = false">
                    <i class="el-icon-close"></i>
                </div>
            </div>
            <div class="video">
                <video
@@ -343,7 +343,7 @@
            </div>
            <div class="outline" v-show="isShowOutline.video8">设备离线</div>
        </div>
        <div class="deleteVideo" v-show="isShowVideo.video1" @click="deleteVideo">关闭</div>
        <!-- <div class="deleteVideo" v-show="isShowVideo.video1" @click="deleteVideo">关闭</div> -->

        <el-dialog
            :title="dialogTitle"
@@ -647,7 +647,7 @@
                        name: item.name,
                        lng: item.longitude,
                        lat: item.latitude,
                        alt: 100,
                        alt: 0,
                        url: '/img/icon/video.png',
                        // deviceId: item.deviceId
                    },
@@ -658,63 +658,94 @@
        },

        rowClick (row) {
            // if (this.saveRangeID == row.id) return
            this.saveRangeID = row.id

            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: ''
            }

            getRegionList(1, 20, row.id).then(res => {
                let monitorData = res.data.data.list

                this.monitoringList = res.data.data.list
                this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'monitoringLayers',
                    type: 'VectorLayer'
                })

                this.initMonitoringIcon()

                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 => {

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

                        })
            if (this.saveRangeID == row.id) {
                let videoClose = {
                    video1: false,
                    video2: false,
                    video3: false,
                    video4: false,
                    video5: false,
                    video6: false,
                    video7: false,
                    video8: false
                }
                if (this.isShowVideo == videoClose) {
                    this.isShowVideo = {
                        video1: true,
                        video2: true,
                        video3: true,
                        video4: true,
                        video5: true,
                        video6: true,
                        video7: true,
                        video8: true
                    }
                } else {
                    this.isShowVideo = {
                        video1: false,
                        video2: false,
                        video3: false,
                        video4: false,
                        video5: false,
                        video6: false,
                        video7: false,
                        video8: false
                    }
                }
            } else {
                console.log(123)
                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: ''
                }

                getRegionList(1, 20, row.id).then(res => {
                    let monitorData = res.data.data.list
                    this.monitoringList = res.data.data.list
                    this.$EventBus.$emit('mapRemoveLayer', {
                        layerName: 'monitoringLayers',
                        type: 'VectorLayer'
                    })

                    this.initMonitoringIcon()

                    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 => {
                                this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`)
                            })
                        }
                    })
                })
            })
            }
            this.saveRangeID = row.id
        },

        // async siteClick (e) {
@@ -1048,13 +1079,17 @@

        .close {
            position: absolute;
            top: 3%;
            left: 45%;
            width: 100%;
            top: 0;
            right: 0;
            width: 32px;
            text-align: center;
            height: 100%;
            z-index: 999;
            display: flex;
            color: #fff;
            font-size: 22px;
            cursor: pointer;
            align-items: center;
        }
        .close:hover {
            color: #65b1ff;