1

guanqb

2023-01-16 2c09a21ab22d9fbbf759f20849c8e4b722d5b1c8

1

 src/views/activity/index.vue

@@ -324,6 +324,233 @@
            </div>
        </div>

        <div class="item video1" v-show="isShowVideo.video1">
            <div class="select" v-show="isShowSelect.video1">
                <el-select
                    size="small"
                    v-model="monitor.type1"
                    @change="((val) => { navClick(val, 1) })"
                    placeholder="请选择"
                    ref="videoSelect1"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video
                    id="videoElement1"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video2" v-show="isShowVideo.video2">
            <div class="select" v-show="isShowSelect.video2">
                <el-select
                    size="small"
                    v-model="monitor.type2"
                    @change="((val) => { navClick(val, 2) })"
                    placeholder="请选择"
                    ref="videoSelect2"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video
                    id="videoElement2"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video3" v-show="isShowVideo.video3">
            <div class="select" v-show="isShowSelect.video3">
                <el-select
                    size="small"
                    v-model="monitor.type3"
                    @change="((val) => { navClick(val, 3) })"
                    placeholder="请选择"
                    ref="videoSelect3"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video
                    id="videoElement3"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video4" v-show="isShowVideo.video4">
            <div class="select" v-show="isShowSelect.video4">
                <el-select
                    size="small"
                    v-model="monitor.type4"
                    @change="((val) => { navClick(val, 4) })"
                    placeholder="请选择"
                    ref="videoSelect4"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video
                    id="videoElement4"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video5" v-show="isShowVideo.video5">
            <div class="select" v-show="isShowSelect.video5">
                <el-select
                    size="small"
                    v-model="monitor.type5"
                    @change="((val) => { navClick(val, 5) })"
                    placeholder="请选择"
                    ref="videoSelect5"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video
                    id="videoElement5"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video6" v-show="isShowVideo.video6">
            <div class="select" v-show="isShowSelect.video6">
                <el-select
                    size="small"
                    v-model="monitor.type6"
                    @change="((val) => { navClick(val, 6) })"
                    placeholder="请选择"
                    ref="videoSelect6"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video
                    id="videoElement6"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video7" v-show="isShowVideo.video7">
            <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"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video
                    id="videoElement7"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>
        <div class="item video8" v-show="isShowVideo.video8">
            <div class="select" v-show="isShowSelect.video8">
                <el-select
                    size="small"
                    v-model="monitor.type8"
                    @change="((val) => { navClick(val, 8) })"
                    placeholder="请选择"
                    ref="videoSelect8"
                >
                    <el-option
                        v-for="item in monitorOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </div>
            <div class="video">
                <video
                    id="videoElement8"
                    autoplay
                    controls
                    width="100%"
                    height="100%"
                    style="object-fit: fill"
                ></video>
            </div>
        </div>

        <el-dialog
            :title="policeChooseTitle"
            :modal="false"
@@ -546,14 +773,44 @@
            isHaveArrow: false,
            isHaveLine: false,
            //当前登录用户的数据
            userInfo:{},
            userInfo: {},
            isShowVideo: {
                video1: true,
                video2: true,
                video3: true,
                video4: true,
                video5: true,
                video6: true,
                video7: true,
                video8: true,
            },
            monitor: {
                type1: '',
                type2: '',
                type3: '',
                type4: '',
                type5: '',
                type6: '',
                type7: '',
                type8: '',
            },
            isShowSelect: {
                video1: true,
                video2: true,
                video3: true,
                video4: true,
                video5: true,
                video6: true,
                video7: true,
                video8: true,
            },
        }
    },
    created () {
        let userInfo = sessionStorage.getItem("userInfo");
        let userInfo = sessionStorage.getItem("userInfo")
        if (userInfo != null) {
          // 将JSON格式的对象解析为js对象
          this.userInfo= JSON.parse(userInfo);
            // 将JSON格式的对象解析为js对象
            this.userInfo = JSON.parse(userInfo)
        }

        // 获取下拉列表数据
@@ -795,11 +1052,11 @@
        getSecurityList (current, size, type, name, startTime, endTime) {
            this.loading()
            var deptId = ""
            if (this.userInfo.dept_id != '1123598813738675201'){
              deptId = this.userInfo.dept_id
            if (this.userInfo.dept_id != '1123598813738675201') {
                deptId = this.userInfo.dept_id
            }

            getSecurityList(current, size, type, name, startTime, endTime,deptId).then(res => {
            getSecurityList(current, size, type, name, startTime, endTime, deptId).then(res => {
                this.activityList = res.data.data.records.map(item => {
                    item.startTime = item.startTime.substring(0, 16)
                    item.endTime = item.endTime.substring(0, 16)
@@ -1884,5 +2141,63 @@
            }
        }
    }

    .item {
        background-color: $bg-color;
        position: absolute;
        z-index: 98;
        width: calc((1920 - 400) / 4 / 1920 * 100vw);
        height: calc((1080 - 60) / 3 / 1080 * 100vh);

        .select {
            position: absolute;
            top: 6%;
            width: 100%;
            z-index: 999;
        }

        .video {
            height: 100%;
            padding: 1%;
        }
    }

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

    .video2 {
        left: calc(400 / 1920 * 100vw);
    }

    .video3 {
        left: calc(400 / 1920 * 100vw);
        top: calc(340 / 1080 * 100vh);
    }

    .video4 {
        left: calc(1540 / 1920 * 100vw);
        top: calc(340 / 1080 * 100vh);
    }

    .video5 {
        left: calc(400 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }

    .video6 {
        left: calc(1540 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }

    .video7 {
        left: calc(780 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }

    .video8 {
        left: calc(1160 / 1920 * 100vw);
        top: calc(680 / 1080 * 100vh);
    }
}
</style>