v3_yyz/src/components/home.vue

<template>
    <div class="container">
        <div class="header">
            <img src="../assets/img/head.png" alt="" />
        </div>
        <el-container>
            <el-aside width="412px" class="left">
                <div class="title">
                    <div class="text">教室分类统计</div>
                </div>
                <div class="content">
                    <div id="myChart" :style="{ width: '200px', height: '200px' }"></div>
                    <div class="list">
                        <div class="item"> <span></span> <span>基础型</span> <span>40%</span></div>
                        <div class="item"> <span></span><span>扩展型</span><span>30%</span></div>
                        <div class="item"> <span></span><span>其他</span><span>35%</span></div>

                    </div>
                </div>
                <div class="title">
                    <div class="text">本周课程统计</div>
                </div>
                <div class="content">
                    <div class="count" v-for="(item, index) in classCount" :key="index">
                        <el-progress type="circle" :percentage="25" :color="item.color">
                            <img :src="'src/assets/img/' + item.imgnumber + '.png'" alt="">
                        </el-progress>
                        <div class="number"><span> {{ item.number }}</span>(节)</div>
                        <div class="text">{{ item.text }}</div>
                    </div>
                </div>
                <div class="title">
                    <div class="text">智慧教室使用明细</div>
                </div>
                <div class="content">
                    <div class="table">
                        <ul class="th">
                            <li>教室</li>
                            <li>使用状态</li>
                            <li class="long">实到/应到人数</li>
                            <li>到课率</li>
                            <li>操作</li>
                        </ul>

                        <el-scrollbar height="400px">
                            <ul v-for="item in classRoom">
                                <li>
                                    {{ item.class }}
                                </li>
                                <li>{{ item.status }}</li>
                                <li>{{ item.people }}</li>
                                <li>{{ item.percentage }}</li>
                                <li>
                                    <el-button size="small" class="look" @click="handleRoom">操作</el-button>
                                </li>
                            </ul>
                        </el-scrollbar>

                    </div>
                </div>
            </el-aside>
            <el-aside width="412px" class="right">
                <div class="title">
                    <div class="text">物联设备统计</div>
                </div>
                <div class="content">
                    <div class="img">
                        <span>120</span>
                        <img src="../assets/img/d1.png" alt="">
                        <span>总数(个)</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; 40
                                <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; 71
                                <span>(个)</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="title">
                    <div class="text">物联设备类型统计</div>
                </div>
                <div class="contentwrap">

                    <div class="count" v-for="(item, index) in interDevice" :key="index">
                        <div class="number"><span> {{ item.number }}</span>(节)</div>
                        <el-progress type="circle" :percentage="100" :color="item.color">
                            <img :src="'src/assets/img/' + item.icon + '.png'" alt="">
                        </el-progress>
                        <div class="text">{{ item.text }}</div>
                    </div>
                </div>
                <div class="title">
                    <div class="text">智慧教室实时监控</div>
                </div>
                <div class="content">
                    <div class="monitor">
                        <p>多屏互动教室</p>
                        <div class="interactclass">
                            <div class="room"><span>互动教室1</span>
                                <img src="../assets/img/rb1.png" alt="">
                            </div>
                            <div class="room"><span>互动教室2</span>
                                <img src="../assets/img/rb2.png" alt="">
                            </div>
                        </div>
                        <p>多屏智慧教室</p>
                        <div class="interactclass">
                            <div class="room"><span>智慧教室1</span>
                                <img src="../assets/img/rb1.png" alt="">
                            </div>
                            <div class="room"><span>智慧教室2</span>
                                <img src="../assets/img/rb2.png" alt="">
                            </div>
                        </div>
                        <el-pagination layout="prev, pager, next" :total="50" />

                    </div>
                </div>
            </el-aside>
        </el-container>
        <el-dialog v-model="centerDialogVisible" title="Warning" width="30%" align-center>
            <span>Open the dialog from the center from the screen</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="centerDialogVisible = false">
                        Confirm
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import * as echarts from "echarts";
import { toRefs, reactive, onMounted, ref } from 'vue';
import { ElScrollbar, ElPagination, ElDialog } from "element-plus";
export default ({
    name: 'Histogram',
    components: { ElScrollbar, ElPagination, ElDialog },
    setup() {
        const pieData = reactive([{
            value: 1048,
            name: '基础型'
        },
        {
            value: 735,
            name: '扩展型'
        },
        {
            value: 580,
            name: '其他'
        }])
        const classPie = reactive({
            option: {
                color: ['#4ED2E4', '#5E91F6', '#67F0A8'],
                tooltip: {
                    trigger: 'item'
                },

                grid: {
                    x: '10',
                    y: '234'
                },
                series: [{
                    type: 'pie',
                    radius: ['40%', '60%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'center',
                        color: '#fff',
                        formatter: () => { // 格式化要展示的文本
                            return `总计\n\n1430间`
                        },
                        // formatter: '{total|' + 200 + '}' + '\n\r' + '{active|共发布活动}',
                        // 等着获取了数据在给样式
                        rich: {
                            total: {
                                fontSize: 35,
                                fontFamily: "微软雅黑",
                                color: '#454c5c'
                            },
                            active: {
                                fontFamily: "微软雅黑",
                                fontSize: 16,
                                color: '#6c7a89',
                                lineHeight: 30,
                            },
                        }


                    },

                    // emphasis: {
                    //     label: {
                    //         show: true,
                    //         fontSize: 40,
                    //         fontWeight: 'bold'
                    //     }
                    // },
                    labelLine: {
                        show: false
                    },
                    data: pieData

                }]
            },
        })
        const initeCharts = () => {
            let myChart = echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.setOption(classPie.option)
        }

        // 本周课程统计数据
        const classCount = ref([
            {
                number: 112,
                text: '应上课程',
                imgnumber: "1",
                color: '#f56c6c',
                percentage: 20
            },
            {
                number: 473,
                text: '实上课程',
                imgnumber: "2",
                color: '#e6a23c'
            },
            {
                number: 1352,
                text: '应到学生数',
                imgnumber: "3",
                color: '#5cb87a',
            },
            {
                number: 2532,
                text: '实到学生数',

                imgnumber: "4",
                color: '#1989fa',
            }
        ])
        // 智慧教室使用数据
        const classRoom = ref([

            {
                class: '法医实验室',
                status: '在用',
                people: '35/40',
                percentage: '50%',
            },
            {
                class: '法医实验室',
                status: '在用',
                people: '35/40',
                percentage: '50%',
            },
            {
                class: '法医实验室',
                status: '在用',
                people: '35/40',
                percentage: '50%',
            },
            {
                class: '法医实验室',
                status: '在用',
                people: '35/40',
                percentage: '50%',
            },
            {
                class: '法医实验室',
                status: '在用',
                people: '35/40',
                percentage: '50%',
            },
            {
                class: '法医实验室',
                status: '在用',
                people: '35/40',
                percentage: '50%',
            },
            {
                class: '法医实验室',
                status: '在用',
                people: '35/40',
                percentage: '50%',
            },
            {
                class: '法医实验室',
                status: '在用',
                people: '35/40',
                percentage: '50%',
            },
            {
                class: '法医实验室',
                status: '在用',
                people: '35/40',
                percentage: '50%',
            },
            {
                class: '法医实验室',
                status: '在用',
                people: '35/40',
                percentage: '50%',
            },
            {
                class: '法医实验室',
                status: '在用',
                people: '35/40',
                percentage: '50%',
            },
            {
                class: '法医实验室',
                status: '在用',
                people: '35/40',
                percentage: '50%',
            },

        ])
        // 物联设备类型统计
        const interDevice = ref([
            {
                number: 98,
                color: "#63ABFF",
                icon: 'r1',
                text: "显示系统"
            },
            {
                number: 185,
                color: "#63FFC7",
                icon: 'r2',
                text: "控制设备"
            },
            {
                number: 58,
                color: "#918EFF",
                icon: 'r3',
                text: "音频设备"
            },
            {
                number: 68,
                color: "#00C8E3",
                icon: 'r4',
                text: "录播设备"
            },
            {
                number: 189,
                color: "#FFBB54",
                icon: 'r5',
                text: "环境设备"
            },
            {
                number: 98,
                color: "#00CF78",
                icon: 'r6',
                text: "安全管理"
            },

        ])
        // 位置弹框
        let centerDialogVisible = ref(false)

        const handleRoom = function () {
            console.log("查看当前教室使用情况", 'adsfasdfasdfa')
            centerDialogVisible.value = true
        }
        onMounted(() => {
            initeCharts()
        })
        return {
            ...toRefs(classPie),
            classCount,
            classRoom,
            centerDialogVisible,
            interDevice,
            handleRoom
        }
    },
})

</script>

<style  lang="scss">
.container {
    margin: 0;
    padding: 0;
    overflow: hidden;

    .header {
        position: absolute;
        z-index: 555;
        margin-bottom: 20px;
        height: 80px;
        width: 100%;
        top: 22px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}

.el-container {
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 300;
    // border: 3px solid darkgreen;
    width: calc(100% - 30px);
    margin: 20px;
    padding-left: 12px;
    padding-top: 30px;
    height: 888px;

    overflow: hidden;
    color: #FFF;
    font-size: 14px;
    display: flex;
    justify-content: space-between;

    .left,
    .right {
        flex-shrink: 0;
        border-radius: 2px;
        background: rgba(125, 125, 125, 0.17);
        backdrop-filter: blur(30.5px);
        overflow: hidden;
    }

    .title {
        width: 380px;
        height: 32px;
        flex-shrink: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.17) 2.49%, rgba(255, 255, 255, 0.00) 98.69%);
        ;
        line-height: 32px;

        .text {
            color: #FFF;
            font-family: PingFang SC;
            font-size: 14px;
            padding-left: 18px;
            letter-spacing: 1px;
        }
    }

    // 教室分类统计
    .content {
        display: flex;
        justify-content: space-between;
        width: 100%;
        overflow: hidden;

        .list {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 200px;

            .item {
                width: 150px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 10px;
                padding-bottom: 6px;
                border-bottom: 1px dotted rgba(255, 255, 255, 0.33);
                font-size: 14px;

                span {
                    &:first-child {
                        width: 8px;
                        height: 8px;
                        border-radius: 4px;
                        background-color: firebrick;
                    }

                    &:nth-child(2n) {
                        display: inline-block;
                        text-align: left;
                        width: 50px;
                        // border: 2px solid darkcyan;
                        margin-left: -40px;
                    }

                }
            }
        }
    }

    // 本周课程统计
    .content {
        justify-content: space-evenly;

        .count {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 70px;
            height: 107px;
            text-align: center;
            justify-content: space-around;
            margin: 30px 0;
            padding: 20px;

            .el-progress-circle {
                width: 56px !important;
                height: 56px !important;

                .el-progress-circle__track {
                    stroke: rgba(255, 255, 255, 0.2);
                }

                .el-progress__text {
                    margin-top: 5px;
                }
            }

            .number {
                margin-top: 10px;
                margin-bottom: 5px;
                font-size: 12px;

                span {
                    font-size: 14px;
                    font-weight: bold;
                }
            }

            .text {
                font-size: 12px;
                line-height: 20px;
                width: 60px;
            }
        }
    }

    //智慧教室使用情况
    .content {
        // display: flex;
        // padding-right: 10px;
        // padding: 0;
        // border: 2px solid firebrick;

        .table {
            width: 100%;
            padding: 10px 10px;

            .th {
                font-weight: 700;
                display: flex;
                width: 100%;


                li {
                    .long {
                        width: 120px;
                        border: 1px solid purple;
                    }

                    // &:nth-child()
                    // width: 130px;
                    // 
                    // text-align: center !important;
                }
            }


            ul {
                display: flex;
                list-style: none;
                height: 40px;
                line-height: 40px;
                font-size: 12px;
                border-bottom: 1px dotted #fff;
                padding: 0;

                &:last-child {
                    margin-bottom: 10px;
                }

                li {
                    display: flex;
                    width: 100%;
                    align-items: center;
                    justify-content: space-around
                }
            }

            .el-button {
                background-color: #5F7BDC;
                color: #fff;
                border: none;
            }
        }
    }

    // 物联设备统计
    .content {
        .img {
            // border: 2px solid firebrick;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 10px;

            span {
                &:first-child {
                    font-size: 18px;
                    font-weight: bold;
                }

                &:last-child {
                    margin-top: 10px;
                    font-size: 16px;
                }
            }
        }

        .list {
            .item_r {
                display: flex;
                align-items: center;
                width: 100%;
                margin-bottom: 10px;
                // border: 1px solid forestgreen;

                img {
                    border-bottom: none;

                }

                .percent {
                    width: 120px;
                    border-bottom: 1px solid rgba(255, 255, 255, .73);
                    margin: 10px;
                    padding-bottom: 10px;
                    font-size: 16px;

                    span {
                        font-size: 12px;
                        color: #fff;
                        opacity: .76;
                    }
                }
            }
        }
    }

    // 物联设备类型统计
    .contentwrap {

        display: flex;
        flex-wrap: wrap;

        .count {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
            text-align: center;
            width: 110px;

            .el-progress-circle {
                width: 54.6px !important;
                height: 54.6px !important;

                .el-progress-circle__track {
                    stroke: rgba(255, 255, 255, 0.2);
                }

                margin: 5px 0;
            }

            .number {
                font-size: 12px;

                span {
                    font-size: 14px;
                    font-weight: bold;
                }
            }

            .text {
                width: 60px;
            }
        }
    }

    // 智慧教室实时监控
    .monitor {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 350px;
        background: rgba(0, 0, 0, 0.2);
        padding: 10px;
        // border: 1px solid fuchsia;

        p {
            margin-left: 5px;
            margin-top: 5px;
        }

        .interactclass {
            display: flex;
            justify-content: space-around;

            .room {
                position: relative;
                width: 170px;
                height: 94px;
                // background: saddlebrown;
                margin-top: 10px;

                span {
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
        }

        .el-pagination {
            justify-content: center;
            --el-pagination-bg-color: 'tranparent';
            --el-pagination-text-color: '#fff'


        }

        .el-pagination button:disabled {
            background: none;
            color: '#fff';
        }

        .el-pagination button:hover {
            color: '#fff';
        }

        .el-pager li {
            color: #fff;
        }
    }
}
</style>