v3_yyz/src/components/right.vue

<template>
    <el-aside class="right">
        <div class="right_top">
            <div class="title">
                <div class="text">物联设备统计</div>
            </div>
            <div class="content">
                <div class="logo">
                    <span>{{ equipmentTotal.total }}</span>
                    <img class="animate" src="../assets/img/d1_1.png" alt="">
                    <img src="../assets/img/d1_2.png" alt="">
                    <span><b>总数</b>(个)</span>
                </div>
                <div class="list">
                    <div class="item_r">
                        <img src="../assets/img/d2.png" alt="">
                        <div class="percent">
                            在线&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ equipmentTotal.online }}
                            <span>(个)</span>
                        </div>
                    </div>
                    <div class="item_r">
                        <img src="../assets/img/d3.png" alt="">
                        <div class="percent">
                            离线&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ equipmentTotal.underline }}
                            <span>(个)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="right_center">
            <div class="title">
                <div class="text">物联设备类型统计</div>
            </div>
            <div class="contentwrap">
                <div class="count" v-for="(item, index) in interDevice" :key="index">
                    <CircleProgress :target-value="item.number" :color="item.color" text-position="top">
                        <img :src="'src/assets/img/' + item.icon + '.png'" alt="">
                    </CircleProgress>
                    <div class="text">{{ item.text }}</div>
                </div>
            </div>
        </div>

        <div class="right_bottom">
            <div class="title">
                <div class="text">智慧教室实时监控</div>
            </div>

            <div class="monitorContent">
                <el-carousel class="monitor">
                    <el-carousel-item v-for="(item, index) in carouselData" :key="index">
                        <div class="interactclass">
                            <div class="room" v-for="(item, index) in item.activeMonitor.array" :key="index">
                                <span>{{ item.title }}</span>
                                <img :src="'src/assets/img/' + 'rb2' + '.png'" alt="" @click="lookVideo(item.src)">
                            </div>
                        </div>

                        <p>{{ item.activeMonitor.title }}</p>
                        <div class="interactclass">
                            <div class="room" v-for="(item, index) in item.activeMonitor.array" :key="index">
                                <span>{{ item.title }}</span>
                                <img :src="'src/assets/img/' + 'rb2' + '.png'" alt="" @click="lookVideo(item.src)">
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>

        </div>
    </el-aside>

    <!-- 视频播放弹框 -->
    <el-dialog class="videoDialog" v-model="videoDialog" title="互动教师1" width="60%" align="center" top="4%">
        <videoPlay v-bind="videoData" @play="onPlay" />
    </el-dialog>
</template>

<script >
import { reactive, onMounted, ref, } from 'vue';
import { ElCarousel, ElCarouselItem } from "element-plus";
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
import CircleProgress from './CircleProgress.vue';
import { getDevice } from '../request/api';

export default ({
    name: 'Histogram',
    components: { videoPlay, ElCarousel, ElCarouselItem, CircleProgress },
    setup() {
        // 视频数据
        const videoData = reactive({
            width: "100%", //播放器高度
            height: "100%", //播放器高度
            color: "red", //主题色
            title: "互动教室", //视频名称
            src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
            muted: false, //静音
            webFullScreen: false,
            // speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
            autoPlay: false, //自动播放
            loop: false, //循环播放
            mirror: false, //镜像画面
            ligthOff: false, //关灯模式
            volume: 0.3, //默认音量大小
            control: true, //是否显示控制
            currentTime: 0,//跳转到固定播放时间
            controlBtns: [
                "audioTrack",
                "quality",
                "speedRate",
                "volume",
                "setting",
                "pip",
                "pageFullScreen",
                "fullScreen",
            ], //显示所有按钮,
        });
        //视频播放弹框
        const videoDialog = ref(false)
        // 播放视频
        const lookVideo = function (src) {
            videoDialog.value = true;
            // console.log("点击了播放视频", 12312312, "播放路径", src)
            videoData.src = src

        }
        // 播放视频
        const onPlay = function () {
            console.log("播放视频")
        }
        // 物联设备
        let equipmentTotal = ref({})
        //智慧教室实时监控---数据
        // const carouselData = ref([
        //     {
        //         activeMonitor: {
        //             title: "多屏互动教室",
        //             array: [
        //                 {
        //                     title: "互动教室22",
        //                     poster: 'rb1',
        //                     src: '',
        //                 },
        //                 {
        //                     title: "互动教室22",
        //                     poster: 'rb2',
        //                     src: '',
        //                 }
        //             ]
        //         },
        //         wisdomMonitor:
        //         {
        //             title: "多屏智慧教室",
        //             array: [
        //                 {
        //                     title: "智慧教室11",
        //                     poster: 'rb1',
        //                     src: '',
        //                 },
        //                 {
        //                     title: "智慧教室11",
        //                     poster: 'rb2',
        //                     src: '',
        //                 }
        //             ]
        //         }
        //     },
        //     {
        //         activeMonitor: {
        //             title: "多屏互动教室",
        //             array: [
        //                 {
        //                     title: "互动教室33",
        //                     poster: 'rb1',
        //                     src: '',
        //                 },
        //                 {
        //                     title: "互动教室33",
        //                     poster: 'rb2',
        //                     src: '',
        //                 }
        //             ]
        //         },

        //         wisdomMonitor:
        //         {
        //             title: "多屏智慧教室",
        //             array: [
        //                 {
        //                     title: "智慧教室22",
        //                     poster: 'rb1',
        //                     src: '',
        //                 },
        //                 {
        //                     title: "智慧教室22",
        //                     poster: 'rb2',
        //                     src: '',
        //                 }
        //             ]
        //         }
        //     }

        // ]);
        // 物联设备类型统计
        let interDevice = ref([])
        // 智慧教室
        let carouselData = ref([])

        //获取页面数据
        const getDeviceData = async () => {
            let res = await getDevice()
            if (res.code !== 200) {
                ElMessage.error("数据请求出错");
            }
            let { category, monitor, status } = res.data
            // 物联设备类型数据
            interDevice.value = category;
            // 互动教室
            carouselData.value = monitor
            //物联设备统计
            equipmentTotal.value = status

        }

        onMounted(() => {
            getDeviceData()

        })
        return {
            interDevice,
            videoData,
            onPlay,
            videoDialog,
            lookVideo,
            carouselData,
            equipmentTotal
        }
    },
})

</script>

<style scoped lang="scss">
@import '../assets/css/right.scss';
</style>
<style lang="scss">
.videoDialog {
    .el-dialog__header {
        height: 49px;
        line-height: 49px;
        padding: 0;
        background-color: #1B67D9;
        margin-right: 0;

        .el-dialog__title {
            color: #FFF;
            font-family: Inter;
        }

        .el-dialog__headerbtn {
            top: 0px;

            i {
                color: #fff;
                font-size: 20px;
                font-weight: bold;
            }

        }

    }

    .el-dialog__body {
        padding: 0 !important;
    }


}
</style>