YZProjectCloud/yanzhu-ui-vue3/src/views/manage/videoMonitor/list.vue

<template>
    <div class="video-monitor-list">
        <el-form ref="videoMonitorRef" label-width="120px" v-if="!data.currentPrjId">
            <el-form-item label="项目名称">
                <el-select :disabled="data.currentPrjId != '' || data.type == 'edit'" v-model="data.selPrjId"
                    placeholder="请选择项目" clearable style="width:150px;" @change="loadData()">
                    <el-option v-for="prj in data.projects" :key="prj.id" :label="prj.projectName" :value="prj.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <el-row v-if="data.selPrjId" style="height: 100%;">
            <el-col :span="4" class="video-name-list">
                <div class="video-title command" @click="showAllVideo">设备列表</div>
                <div class="video-list">
                    <div v-for="it in data.videoMonitors" :key="it.id" class="video-item command"
                        :class="it.active ? 'is-active' : ''" @click="doSelectItem(it)">
                        <svg-icon class-name="video-icon" icon-class="video" /> {{ it.monitorName }}
                    </div>
                </div>
            </el-col>
            <el-col :span="20" :key="data.elKey" style="height: 100%;">
                <template v-if="data.showMode == 'sigle'">
                    <iframe v-if="data.selVideo" frameborder="0" :src="data.selVideo.iframeSrc"
                        style="width:100%;height:100%;" id="ysOpenDevice" allowfullscreen>
                    </iframe>
                </template>
                <div v-if="data.showMode == 'all'" style="height: 100%;" class="all-mode">
                    <div class="all-header">
                        <svg-icon class-name="icon-screen command" @click="changeSize(2)"
                            :class="data.showSize == 2 ? 'is-active' : ''" icon-class="4screen" />
                        <svg-icon class-name="icon-screen command" @click="changeSize(4)"
                            :class="data.showSize != 2 ? 'is-active' : ''" icon-class="9screen" />
                    </div>
                    <div class="all-list" :class="data.showSize == 2 ? 'mode1' : 'mode2'">
                        <div class="all-item" v-for="it in data.showList" :key="it.id">
                            <iframe frameborder="0" :src="it.iframeSrc" style="width:100%;height:100%;"
                                id="ysOpenDevice" allowfullscreen>
                            </iframe>
                        </div>
                    </div>
                    <div class="all-pager">
                        <el-pagination background :page-size="data.showSize" :current-page="data.showIndex"
                            @current-change="handleCurrentChange" layout="prev, pager, next" :total="data.total" />
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup name="VideoMonitorList">
import { findMyProjectList } from "@/api/publics";
import {
    listVideoMonitor,
    getYsToken
} from "@/api/manage/videoMonitor";
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const { proxy } = getCurrentInstance();
const data = reactive({
    prjInfo: null,
    projects: [],
    selPrjId: '',
    currentPrjId: '',
    comId: '',
    videoMonitors: [],
    selVideo: null,
    elKey: 0,
    showMode: 'sigle',
    total: 0,
    showSize: 2,
    showIndex: 1,
    showList: [],
})
function loadVideo(it) {
    getYsToken(it.id).then(d => {
        it.accessToken = d.msg;
        it.iframeSrc = 'https://open.ys7.com/ezopen/h5/iframe?url=' + it.url + '&autoplay=1&accessToken=' + d.msg + '&t=' + (+new Date());

    })
}
function changeSize(n) {
    data.showSize = n;
    data.showIndex = 1;
    showAllData();
}
function doSelectItem(it) {
    if (it.active) {
        return;
    }
    data.showMode = "sigle";
    if(data.selVideo){
        data.selVideo.active = false;
    }
    data.selVideo = it;
    data.selVideo.active = true;
    loadVideo(data.selVideo);
}
function showAllVideo() {
    data.selVideo.active = false;
    data.selVideo = null;
    data.showMode = "all";
    data.showSize = 2;
    data.showIndex = 1;
    showAllData();
}
function handleCurrentChange(n) {
    data.showIndex = n;
    showAllData();
}
function showAllData() {
    var start = (data.showIndex - 1) * data.showSize;
    var end = start + data.showSize;
    data.showList = [];
    for (var i = start; i < end && i < data.videoMonitors.length; i++) {
        data.showList.push(data.videoMonitors[i]);
        loadVideo(data.videoMonitors[i])
    }
    data.elKey++;
}
function loadData() {
    let objs = data.projects.filter(d => d.id == data.selPrjId);
    if (objs.length == 0) {
        data.videoMonitors = [];
        return;
    }
    listVideoMonitor({
        pageNum: 1, pageSize: 100,
        projectId: objs[0].id,
        comId: objs[0].comId
    }).then(d => {
        data.total = d.total;
        data.videoMonitors = (d.rows || []).map(it => {
            it.active = false;
            return it;
        });
        data.selVideo = data.videoMonitors.length > 0 ? data.videoMonitors[0] : null;
        if (data.selVideo) {
            data.selVideo.active = true;
            loadVideo(data.selVideo);
        }
    });
}
/** 查询项目列表 */
function getProjectList() {
    findMyProjectList({ pageNum: 1, pageSize: 100 }).then(response => {
        data.projects = response.rows;
        if (userStore.currentPrjId) {
            data.currentPrjId = userStore.currentPrjId;
            data.selPrjId = userStore.currentPrjId;
            data.comId = userStore.currentComId
            loadData();
        }
    });
}
getProjectList();
</script>

<style lang="scss">
.video-monitor-list {
    height: 100%;
    position: absolute;
    width: 100%;
    padding: 12px;

    .video-name-list {
        height: 100%;
        background: #fff;
        box-shadow: 2px 2px 10px #ddd;
        margin-bottom: 30px;
        word-wrap: break-word;
        border-radius: 10px;
        border: 1px solid #ddd;

        .video-icon {
            fill: #ccc;
        }

        .video-title {
            line-height: 40px;
            background: #e0d5d588;
            border-radius: 10px 10px 0px 0px;
            text-align: center;
        }

        .video-list {
            line-height: 30px;

            .video-item {
                padding: 0px 10px;

                &.is-active {
                    background: #87cefa88;
                }
            }
        }

    }

    .all-mode {
        .all-header {
            text-align: right;

            .icon-screen {
                height: 40px;
                width: 40px;
                background: #BFC3C5;
                fill: #fff;
                margin-left: 10px;

                &.is-active {
                    background: #445A65;
                    fill: #4D91FE;
                }
            }
        }

        .all-list {
            display:grid;
            grid-gap: 10px;
            height: calc(100% - 80px);
            &.mode1{
                grid-template-columns: 50% 50%;    
                grid-template-rows: 50% 50%; 
                .all-item{
                   
                }          
            }
            &.mode2{
                grid-template-columns: 33% 33% 33%; 
                grid-template-rows: 33% 33% 33%; 
                .all-item{
                   
                }                  
            }

           
        }

        .all-pager {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

}
</style>