优化

package-lock.json

@@ -254,6 +254,11 @@
       "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "dev": true
     },
+    "amfe-flexible": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
+      "integrity": "sha512-L2VfvDzoETBjhRptg5u/IUuzHSuxm22JpSRb404p/TBGeRfwWmmNEbB+TFPIP/sS/+pbM18bCFH9QnMojLuPNw=="
+    },
     "anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
@@ -860,6 +865,11 @@
         "source-map-js": "^1.0.2"
       }
     },
+    "postcss-pxtorem": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.0.0.tgz",
+      "integrity": "sha512-ZRXrD7MLLjLk2RNGV6UA4f5Y7gy+a/j1EqjAfp9NdcNYVjUMvg5HTYduTjSkKBkRkfqbg/iKrjMO70V4g1LZeg=="
+    },
     "proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",

package.json

@@ -8,9 +8,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "amfe-flexible": "^2.2.1",
     "axios": "^1.4.0",
     "echarts": "^5.4.3",
     "element-plus": "^2.3.9",
+    "postcss-pxtorem": "^6.0.0",
     "vue": "^3.2.25",
     "vue3-video-play": "^1.3.1-beta.6"
   },

src/assets/css/home.scss

@@ -0,0 +1,48 @@
+.container {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+
+    .header {
+        position: absolute;
+        z-index: 555;
+        margin-bottom: 20px;
+
+        width: 100%;
+        top: 0;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+.el-container {
+    height: 938px;
+    overflow: hidden;
+}
+
+// 点击模型弹出框
+.model-detail {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 10px;
+
+    span {
+        font-size: 16px;
+
+        width: 160px;
+        font-family: Microsoft YaHei UI;
+
+        // border: 1px solid red;
+        margin: 6px;
+        font-weight: 400;
+
+        .title {
+            color: #000;
+            font-weight: 700;
+        }
+    }
+}

src/assets/css/left.scss

@@ -0,0 +1,222 @@
+ .left {
+     position: absolute;
+     width: 412px;
+     height: 900px;
+     top: 111px;
+     z-index: 300;
+     flex-shrink: 0;
+     border-radius: 2px;
+     background: rgba(125, 125, 125, 0.17);
+     backdrop-filter: blur(30.5px);
+     color: #FFF;
+     font-size: 14px;
+     overflow: hidden;
+     left: 30px;
+     display: flex;
+     flex-direction: column;
+     padding: 11px 10px 15px 10px; //教室分类统计
+
+     .left_top {
+         box-sizing: border-box;
+         width: 392px;
+         height: 261px;
+         //  border: 2px solid darkcyan;
+
+         .list {
+             display: flex;
+             flex-direction: column;
+             justify-content: center;
+             width: 180px;
+             margin-left: 23.2px;
+             margin-right: 28px;
+
+             .item {
+                 width: 100%;
+                 display: flex;
+                 align-items: center;
+                 padding-top: 16px;
+                 padding-bottom: 11px;
+                 border-bottom: 1px dotted rgba(255, 255, 255, 0.33);
+                 font-size: 12px;
+                 font-family: Microsoft YaHei;
+
+                 i {
+                     display: inline-block;
+                     width: 8px;
+                     height: 8px;
+                     border-radius: 4px;
+                     margin-right: 6px;
+                 }
+
+                 .descr {
+                     display: flex;
+                     justify-content: space-between;
+                     width: 100%;
+                 }
+
+             }
+         }
+     }
+
+     // 本周课程统计
+     .left-center {
+         // border: 1px solid sienna;
+         box-sizing: border-box;
+         height: 219px;
+         width: 392px;
+         height: 219px;
+         //  border: 2px solid #5F7BDC;
+
+         .count {
+             display: flex;
+             flex-direction: column;
+             align-items: center;
+             justify-content: space-around;
+             height: 108px;
+             // border: 1px solid sandybrown;
+             width: 93px;
+             box-sizing: border-box;
+             // margin-top: 42px;
+             margin: 40px 16px 39px 22px;
+
+             img {
+                 width: 22px;
+                 height: 22px;
+             }
+
+             .text {
+                 font-size: 12px;
+                 line-height: 20px;
+             }
+
+             // width: 70px;
+
+             // text-align: center;
+             // justify-content: space-around;
+             // margin: 24px 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;
+             // }
+         }
+     }
+
+     // 智慧教室使用明细
+     .left-bottom {
+         flex: 1;
+         overflow: hidden;
+         box-sizing: border-box;
+         width: 392px;
+         //  height: 219px;
+         //  border: 2px solid #5F7BDC;
+
+         .content {
+             box-sizing: border-box;
+             padding: 10px;
+             padding-top: 0;
+             height: 100%;
+             overflow: hidden;
+         }
+
+         .title {
+             margin-bottom: 20px;
+         }
+
+         .table {
+             width: 100%;
+
+             .th {
+                 font-weight: 700;
+                 display: flex;
+                 width: 100%;
+
+                 .long {
+                     width: 500px;
+                 }
+             }
+
+             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;
+             }
+         }
+     }
+
+ }
+
+ // 通用标题
+ .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;
+     margin: 11px 22px 0 10px;
+
+     .text {
+         color: #FFF;
+         font-family: PingFang SC;
+         font-size: 14px;
+         padding-left: 18px;
+         letter-spacing: 1px;
+     }
+ }
+
+ // 通用content
+ .content {
+     display: flex;
+     width: 100%;
+     overflow: hidden;
+     justify-content: space-evenly;
+
+ }

src/assets/css/right.scss

@@ -0,0 +1,269 @@
+// 通用标题
+.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;
+    margin: 11px 22px 0 10px;
+
+    .text {
+        color: #FFF;
+        font-family: PingFang SC;
+        padding-left: 18px;
+        letter-spacing: 1px;
+    }
+}
+
+// 通用content
+.content {
+    display: flex;
+    width: 100%;
+    overflow: hidden;
+    justify-content: space-evenly;
+
+}
+
+.right {
+    position: absolute;
+    width: 412px;
+    height: 900px;
+    top: 111px;
+    z-index: 300;
+    flex-shrink: 0;
+    border-radius: 2px;
+    background: rgba(125, 125, 125, 0.17);
+    backdrop-filter: blur(30.5px);
+    color: #FFF;
+    font-size: 14px;
+    // overflow: hidden;
+    right: 20px;
+    // border: 2px solid salmon;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    height: 900px;
+    overflow: hidden;
+    padding: 11px 10px 15px 10px;
+
+}
+
+// 物联设备统计
+.right_top {
+    // border: 3px solid darkcyan;
+    height: 267px;
+    // border: 2px solid darkcyan;
+    box-sizing: border-box;
+
+    .logo {
+        // border: 2px solid firebrick;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 134px;
+        height: 175px;
+        margin: 30px 0 20px 10px;
+
+        img {
+            width: 87px;
+            height: 88px;
+        }
+
+        .animate {
+            width: 87px;
+            height: 88px;
+            margin-bottom: -55px;
+            animation: myfirst 1.5s infinite;
+        }
+
+        span {
+            color: rgba(255, 255, 255, 0.76);
+            font-family: PingFang SC;
+            font-weight: 400;
+            line-height: 21px;
+
+            &:first-child {
+                color: #fff;
+                font-size: 20px;
+                font-weight: 900;
+                line-height: 30px;
+            }
+
+            b {
+                color: #fff;
+                font-size: 16px;
+                font-weight: 400;
+            }
+        }
+
+    }
+
+    .list {
+        // border: 2px solid darkcyan;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-evenly;
+        padding-top: 20px;
+
+        .item_r {
+            display: flex;
+            align-items: center;
+            width: 100%;
+            margin-bottom: 10px;
+
+            // border: 1px solid forestgreen;
+            img {
+                width: 39px;
+                height: 39px;
+                flex-shrink: 0;
+                // border: 1px solid darkgoldenrod;
+                margin-right: 12px;
+            }
+
+            .percent {
+                width: 132px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.47);
+                // margin: 10px;
+                padding-bottom: 7px;
+                font-size: 16px;
+
+                span {
+                    font-size: 12px;
+                    color: #fff;
+                    opacity: .76;
+                }
+            }
+        }
+    }
+}
+
+// 物联网设备统计动画
+@keyframes myfirst {
+    0% {
+        transform: translate(0, 0);
+    }
+
+    50% {
+        transform: translate(0, -8px);
+    }
+
+    100% {
+        transform: translate(0, 0);
+    }
+}
+
+// 物联设备类型统计
+.right_center {
+    height: 314px;
+    // border: 3px solid darkcyan;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .contentwrap {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 10px 0;
+        height: 222px;
+        overflow: hidden;
+        // border: 2px solid sandybrown;
+
+        .count {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 6px;
+            text-align: center;
+            // border: 2px solid darkkhaki;
+            width: 110px;
+        }
+    }
+}
+
+
+// 智慧教室实时监控     
+.right_bottom {
+    flex: 1;
+    box-sizing: border-box;
+    // border: 3px solid darkcyan;
+    // height: 332px;
+
+    .monitorContent {
+
+        .monitor {
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            background: rgba(0, 0, 0, 0.2);
+            padding: 10px;
+            width: 364px;
+            height: 268px;
+            margin: 0 auto;
+            margin-top: 10px;
+            // padding-bottom: 0;
+
+            // border: 1px solid red;
+
+            .interactclass {
+                display: flex;
+                justify-content: space-around;
+
+                .room {
+                    position: relative;
+                    width: 170px;
+                    height: 94px;
+                    // background: saddlebrown;
+                    margin-top: 10px;
+                    cursor: pointer;
+
+                    &:first-child {
+                        margin-right: 10px;
+                    }
+
+                    span {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                    }
+                }
+            }
+        }
+
+        .el-carousel__indicators--horizontal {
+            display: none;
+            bottom: 6%;
+        }
+
+        // .el-carousel__container {
+        //     height: 248px;
+        // }
+
+        // .el-carousel__indicators .el-carousel__indicators--horizontal {
+        //     display: none;
+        // }
+
+        .el-pagination {
+            justify-content: center;
+            --el-pagination-bg-color: 'tranparent';
+            --el-pagination-text-color: '#fff'
+        }
+
+        .el-pagination button {
+            color: #fff;
+        }
+
+        .el-pagination button:disabled {
+            background: none;
+            color: '#fff';
+        }
+
+        .el-pagination button:hover {
+            color: '#fff';
+        }
+
+        .el-pager li {
+            color: #fff;
+        }
+    }
+}

src/components/CircleProgress.vue

@@ -16,7 +16,9 @@
         </div>
     </div>
     <div class="bottomNumber" v-if="textPosition == 'bottom'">
-        {{ showProgress }} <span> (节)</span>
+        {{ showProgress }} <span v-if="showProgress
+            > 1000">(人)</span>
+        <span v-else>(节)</span>
     </div>
 </template>
 <script setup lang="ts">
@@ -34,11 +36,11 @@ const props = defineProps({
     },
     width: {
         type: String,
-        default: '60px',
+        default: '54.6px',
     },
     height: {
         type: String,
-        default: '60px',
+        default: '54.6px',
     },
     textPosition: {
         type: String,
@@ -48,7 +50,7 @@ const props = defineProps({
 });
 const { height, width, color, targetValue, textPosition } = toRefs(props);
 
-const showProgress = ref<number>(0);
+let showProgress = ref<number>(0);
 const addData = () => {
     if (targetValue.value === 0) return;
     let timer = setInterval(() => {
@@ -56,16 +58,22 @@ const addData = () => {
             clearInterval(timer), timer == null;
             return;
         }
+        // showProgress.value = showProgress.value + 200
+        // console.log(showProgress.value)
+        // console.log("targetValue.value", targetValue.value)
+        // showProgress.value = showProgress.value + 6
         ++showProgress.value;
-    }, 15);
+
+
+    }, 10);
 };
 onMounted(() => {
     addData();
 });
-const progressValue = ref<number>((showProgress.value / 360) * 250);
-
+// const progressValue = ref<number>((showProgress.value / 360) * 250);
+const progressValue = ref(0)
 watch(showProgress, (newValue: number) => {
-    progressValue.value = (newValue / 360) * 250;
+    progressValue.value = 360;
 });
 </script>
 <style lang="scss" scoped>

src/components/UeVideo.vue

@@ -2,15 +2,13 @@
 <template>
   <div ref="video" id="player"></div>
   <home></home>
-  <div @click="toUE" style="position: absolute;top: 5%; left: 50%;background-color: darkcyan;z-index: 200">向UE发信息</div>
+  <!-- <div @click="toUE" style="position: absolute;top: 5%; left: 50%;background-color: darkcyan;z-index: 200">向UE发信息</div> -->
 </template>
 
 <script>
 import { onMounted, ref } from "vue";
 import {
-  initLoad,
-  callUIInteraction,
-  addResponseEventListener,
+  initLoad
 } from "../webrtcVideo.js";
 import { ElButton, ElInput } from "element-plus";
 import Home from './home.vue'

src/components/left.vue

@@ -0,0 +1,327 @@
+<template>
+    <el-aside class="left">
+
+        <div class="left_top">
+            <div class="title">
+                <div class="text">教室分类统计</div>
+            </div>
+            <div class="content">
+                <div id="myChart" style="width:140px; height: 140px;margin:48px 0 30px 18px">
+                </div>
+                <div class="list">
+                    <div class="item" v-for="(item, index) in classRoomCount">
+                        <i :style="{ backgroundColor: item.color }"></i>
+                        <div class="descr">
+                            <span>{{ item.name }}</span>
+                            <span>{{ item.value }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="left-center">
+            <div class="title">
+                <div class="text">本周课程统计</div>
+            </div>
+            <div class="content">
+                <div class="count" v-for="(item, index) in classCount" :key="index">
+                    <CircleProgress :target-value="item.number" :color="item.color" text-position="bottom">
+                        <img :src="'src/assets/img/' + item.imgnumber + '.png'" alt="">
+                    </CircleProgress>
+                    <div class="text">{{ item.text }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="left-bottom">
+
+            <div class="title">
+                <div class="text">智慧教室使用明细</div>
+            </div>
+
+            <div class="content" style="height: 100%;overflow: hidden;">
+                <div class="table">
+                    <ul class="th">
+                        <li>教室</li>
+                        <li>使用状态</li>
+                        <li class="long">实到/应到人数</li>
+                        <li>到课率</li>
+                        <li>操作</li>
+                    </ul>
+                    <div ref="testMain" style="height: 310px;overflow: hidden;">
+                        <ul v-for="item in classRoom" @mouseenter="testMove" @mouseleave="testMend">
+                            <li>
+                                {{ item.class }}
+                            </li>
+                            <li>{{ item.status }}</li>
+                            <li>{{ item.people }}</li>
+                            <li>{{ item.percentage }}</li>
+                            <li>
+                                <el-button size="small" class="look" @click.prevent="handleRoom">查看</el-button>
+                            </li>
+
+                        </ul>
+
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+    </el-aside>
+</template>
+
+<script >
+import * as echarts from "echarts";
+import { reactive, onMounted, ref, toRefs, onBeforeUnmount, onUnmounted, nextTick, getCurrentInstance } from 'vue';
+import { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem, ElMessage } from "element-plus";
+import "vue3-video-play/dist/style.css";
+import {
+    callUIInteraction,
+    addResponseEventListener
+} from "../webrtcVideo.js";
+import { getClass } from '../request/api'
+import { videoPlay } from "vue3-video-play";
+import CircleProgress from './CircleProgress.vue';
+
+
+export default ({
+
+    name: 'Histogram',
+    components: { ElScrollbar, ElPagination, ElDialog, videoPlay, ElCarousel, ElCarouselItem, CircleProgress },
+    setup() {
+
+        const pieData = reactive([{
+            value: 1048,
+            name: '基础型'
+        },
+        {
+            value: 735,
+            name: '扩展型'
+        },
+        {
+            value: 580,
+            name: '其他'
+        }])
+        const classPie = reactive({
+            option: {
+                color: ['#4ED2E4', '#5E91F6', '#67F0A8'],
+                tooltip: {
+                    trigger: 'item',
+                    position: 'right'
+                },
+
+                series: [{
+                    type: 'pie',
+                    radius: ['60%', '90%'],
+                    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,
+                            },
+                        }
+
+
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    data: pieData
+
+                }]
+            },
+        })
+        const initeCharts = () => {
+            let myChart = echarts.init(document.getElementById('myChart'))
+            // 绘制图表
+            console.log("绘制图表", classPie.option)
+            myChart.setOption(classPie.option)
+        }
+
+
+
+
+
+        // 物联设备类型统计
+        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: "安全管理"
+            },
+
+        ])
+
+        const handleRoom = function () {
+            // 发送消息给UE
+            // console.log("查看当前教室使用情况", 'adsfasdfasdfa', ElMessage)
+            // ElMessage('this is a message.')
+
+            // ElMessage.success("xsxxx")
+            // callUIInteraction("open");
+            // addResponseEventListener("open", (data) => {
+            //     console.log("接收到的信息", data, typeof data,)
+            // })
+            // centerDialogVisible.value = true
+        }
+
+
+
+        // 教室分类统计
+        const classRoomCount = ref([
+            {
+                name: "基础性",
+                color: '#4ED2E4',
+                number: '40%'
+            },
+            {
+                name: "扩展型",
+                color: '#5E91F6',
+                number: '25%'
+            },
+            {
+                name: "其他",
+                color: '#67F0A8',
+                number: '45%'
+            }
+        ])
+        // 本周课程统计数据
+        const classCount = ref([])
+        // 智慧教室使用数据
+        const classRoom = ref([])
+
+
+        const getClassData = async () => {
+            let res = await getClass()
+            console.log("res----教室分类统计", res)
+            let { course, classroomDetail, category } = res.data;
+            classRoomCount.value = category
+            classCount.value = course
+            classRoom.value = classroomDetail
+
+        }
+
+        let timer = ref(null)
+        let testMain = ref(null)
+        onMounted(() => {
+            initeCharts()
+            getClassData()
+            start()
+        })
+
+
+        onBeforeUnmount(() => {
+            clearTimeout(timer.value)
+        })
+        onUnmounted(() => {
+            clearTimeout(timer.value)
+        })
+
+
+        function testMove() {
+            clearTimeout(timer.value)
+        }
+
+        function testMend() {
+            start()
+        }
+        //开启定时器方法
+        function start() {
+            //清除定时器
+            clearTimeout(timer.value)
+            //定时器触发周期
+            let speed = ref(75)
+            timer.value = setInterval(MarqueeTest, speed.value)
+        }
+        function MarqueeTest() {
+            let test1 = testMain.value
+
+            //判断组件是否渲染完成
+            if (test1.offsetHeight == 0) {
+                test1 = testMain.value
+            } else {
+                //如果列表数量过少不进行滚动
+                // console.log("test1", test1.scrollTop)
+                if (test1.childNodes.length < 6) {
+                    clearTimeout(timer.value)
+                    return;
+                }
+                //组件进行滚动
+                test1.scrollTop += 1
+
+                //判断滚动条是否滚动到底部
+                if (test1.scrollTop == (test1.scrollHeight - test1.clientHeight)) {
+                    //获取组件第一个节点
+                    let a = test1.childNodes[0]
+                    //删除节点
+                    test1.removeChild(a)
+                    //将该节点拼接到组件最后
+                    test1.append(a)
+                }
+            }
+        }
+        return {
+            classCount,
+            classRoom,
+            interDevice,
+            handleRoom,
+            testMend,
+            testMove,
+            testMain,
+            classRoomCount
+        }
+    },
+})
+
+</script>
+
+<style scoped lang="scss">
+@import '../assets/css/left.scss';
+</style>

src/components/right.vue

@@ -0,0 +1,283 @@
+<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>

src/main.js

@@ -1,12 +1,14 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-
+import 'amfe-flexible'
 // 全局引入弹出框
-import { ElMessage } from 'element-plus'
+// import { ElMessage } from 'element-plus'
+import 'element-plus/dist/index.css'
 
 const app = createApp(App)
 console.log("全局的app", app)
-app.config.globalProperties.$message = ElMessage
+// app.config.globalProperties.$message = ElMessage;
+// app.use(ElMessage)
 app.mount("#app")
 
 // createApp(App).mount('#app')

src/request/api.js

@@ -1,4 +1,8 @@
 import { get, post } from './http'
 
 
-export const testApi = p => post(`https://test.lqkj.top/wsngt-server/system/sysuser/bind/ticket?userCode${p}`)
+export const testApi = p => post(`https://test.lqkj.top/wsngt-server/system/sysuser/bind/ticket?userCode${p}`)
+
+export const getClass = () => get("http://192.168.4.219:12397/ioc-server/wisdomClass/classroomStatistic")
+
+export const getDevice = () => get("http://192.168.4.219:12397/ioc-server/wisdomClass/deviceStatistic")

src/request/http.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-
+import { ElMessage } from 'element-plus';
 
 // 请求超时时间
 axios.defaults.timeout = 10000
@@ -24,7 +24,7 @@ axios.interceptors.response.use(
     response => {
         console.log("response", response)
         if (response.status === 200) {
-            return Promise.resolve(response)
+            return Promise.resolve(response.data)
         } else {
             return Promise.reject(response)
         }

vite.config.js

@@ -3,8 +3,22 @@ import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import postCssPxToRem from "postcss-pxtorem";
 
 // https://vitejs.dev/config/
+// export default defineConfig({
+//   plugins: [
+//     vue(),
+
+//     Components({
+//       resolvers: [ElementPlusResolver()]
+//     }),
+//     AutoImport({
+//       resolvers: [ElementPlusResolver()]
+//     })
+//   ]
+
+// })
 export default defineConfig({
   plugins: [
     vue(),
@@ -14,6 +28,17 @@ export default defineConfig({
     AutoImport({
       resolvers: [ElementPlusResolver()]
     })
-  ]
-
+  ],
+  css: {
+    postcss:
+    {
+      plugins:
+        [postCssPxToRem({
+          rootValue: 192,
+          // 1rem，根据 设计稿宽度/10 进行设置
+          propList: ['*']
+          // 需要转换的属性，这里选择全部都进行转换
+        })]
+    }
+  }
 })