完成第三方天气接口对接

完成黄淮学院教室统计数据定时刷新
完成黄淮学院物联网设备统计数据定时刷新
根据新ui界面调整首页UI界面（80%）
制作教室搜索功能静态
制作教室搜索下拉框

src/assets/css/home.scss

@@ -3,21 +3,43 @@
     padding: 0;
     overflow: hidden;
     width: 100%;
-    height: 100%;
+    height: 100vh;
+    background-position: center !important;
+    background-size: cover !important;
+    position: relative;
+    
 
-    .header {
-        position: absolute;
-        z-index: 555;
-        margin-bottom: 20px;
-        height: 70px;
-        width: 100%;
-        top: 10px;
+    // .header {
+    //     position: absolute;
+    //     z-index: 555;
+    //     margin-bottom: 20px;
+    //     height: 70px;
+    //     width: 100%;
+    //     top: 10px;
 
-        img {
-            width: 100%;
-            height: 100%;
-        }
-    }
+    //     img {
+    //         width: 100%;
+    //         height: 100%;
+    //     }
+    //     .weather{
+    //         position: absolute;
+    //         right: 10px;
+    //         top: 50%;
+    //         transform: translateY(-50%);
+    //         display: flex;
+    //         align-items: center;
+    //         .right-weatherInfo{
+    //             display: flex;
+    //             align-items: center;
+    //             .info{
+    //                 flex: 1;
+    //                 .temp{
+                       
+    //                 }
+    //             }
+    //         }
+    //     }
+    // }
 }
 
 .el-container {

src/assets/css/left.scss

@@ -1,277 +1,484 @@
-
 .left {
-     position: absolute;
-     width: 412px;
-     height: 86vh;
-     top: 11.5vh;
-     z-index: 9;
-     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: 25px;
-     display: flex;
-     flex-direction: column;
-     padding: 11px 10px 15px 10px; //教室分类统计
-
-     .left_top {
-         box-sizing: border-box;
-         width: 392px;
-         height: 250px;
-         //  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: 208px;
-         //  border: 2px solid #5F7BDC;
-
-         .count {
-             display: flex;
-             flex-direction: column;
-             align-items: center;
-             justify-content: space-around;
-             height: 100%;
-             // border: 1px solid sandybrown;
-             //  width: 93px;
-             box-sizing: border-box;
-             // margin-top: 42px;
-             margin: 33px 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: 5px;
-         }
-
-
-         .table {
-             width: 100%;
-
-             .th {
-                 font-weight: 700;
-                 display: flex;
-                 width: 100%;
-
-                 .long {
-                     width: 500px;
-                 }
-             }
-
-             ul {
-                 display: flex;
-                 list-style: none;
-                 height: 48px;
-                 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;
-                     word-wrap: break-word;
-                 }
-             }
-
-             .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%;
+    position: absolute;
+    width: 412px;
+    height: 86vh;
+    top: 8vh;
+    z-index: 9;
+    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: 25px;
+    display: flex;
+    flex-direction: column;
+    padding: 11px 10px 15px 10px; //教室分类统计
+
+    .left_top {
+        box-sizing: border-box;
+        width: 392px;
+        height: 250px;
+        //  border: 2px solid darkcyan;
+
+        .list {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            width: 180px;
+            margin-left: 23.2px;
+            margin-right: 28px;
+            height: 140px;
+
+            .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;
+                border-right: 2px solid #00EB7D;
+
+                background: rgba(69, 110, 172, 0.31);
+                margin-bottom: 10px;
+                padding: 6px 12px;
+
+                i {
+                    display: inline-block;
+                    width: 8px;
+                    height: 8px;
+                    border-radius: 4px;
+                    margin-right: 6px;
+                }
+
+
+                .descr {
+                    margin-left: 4px;
+                    display: flex;
+                    justify-content: space-between;
+                    width: 100%;
+                }
+
+            }
+        }
+    }
+
+    // 本周课程统计
+    .left-center {
+        // border: 1px solid sienna;
+        box-sizing: border-box;
+        height: 219px;
+        width: 392px;
+        height: 208px;
+
+        //  border: 2px solid #5F7BDC;
+        .content {
+            display: flex;
+
+            .count {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: space-around;
+                height: 100%;
+                // border: 1px solid sandybrown;
+                //  width: 93px;
+                box-sizing: border-box;
+                // margin-top: 42px;
+                // margin: 33px 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;
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+
+        .title {
+            margin-bottom: 5px;
+        }
+
+        .usering-free-container {
+            padding-left: 20px;
+            padding-right: 20px;
+            margin-top: 16px;
+
+            .usering-free {
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 6px;
+
+                .usering-box {
+                    position: relative;
+                    padding-left: 10px;
+
+                    &::before {
+                        position: absolute;
+                        left: 0px;
+                        top: 50%;
+                        transform: translateY(-50%);
+                        display: block;
+                        content: "";
+                        width: 2px;
+                        height: 8px;
+                        border-radius: 1px;
+                        background: #1BCDFF;
+
+                    }
+
+                    .text {
+                        color: #fff;
+
+                        /* text/pc/03-55-Regular */
+                        font-family: "Alibaba PuHuiTi 2.0";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: 400;
+                        line-height: normal;
+
+                        .num {
+                            color: #1BCDFF;
+                            /* text/pc/03-55-Regular */
+                            font-family: "Alibaba PuHuiTi 2.0";
+                            font-size: 12px;
+                            font-style: normal;
+                            font-weight: 400;
+                            line-height: normal;
+                        }
+                    }
+                }
+
+                .free-box {
+                    position: relative;
+                    padding-right: 10px;
+
+                    &::after {
+                        position: absolute;
+                        right: 0px;
+                        top: 50%;
+                        transform: translateY(-50%);
+                        display: block;
+                        content: "";
+                        width: 2px;
+                        height: 8px;
+                        border-radius: 1px;
+                        background: #20E5B7;
+
+                    }
+
+                    .text {
+                        color: #fff;
+
+                        /* text/pc/03-55-Regular */
+                        font-family: "Alibaba PuHuiTi 2.0";
+                        font-size: 12px;
+                        font-style: normal;
+                        font-weight: 400;
+                        line-height: normal;
+
+                        .num {
+                            color: #20E5B7;
+                            /* text/pc/03-55-Regular */
+                            font-family: "Alibaba PuHuiTi 2.0";
+                            font-size: 12px;
+                            font-style: normal;
+                            font-weight: 400;
+                            line-height: normal;
+                        }
+                    }
+                }
+            }
+        }
+
+        .search-container {
+            display: flex;
+            margin-top: 16px;
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+
+
+        .table {
+            width: 100%;
+           
+            .dropdown-container {
+                display: flex;
+                justify-content: space-between;
+                padding: 6px 8px;
+                border-bottom: 1px solid #234F6A;
+
+                .dropdown-name {
+                    color: rgba(255, 255, 255, 0.80);
+
+                    /* text/pc/03-55-Regular */
+                    font-family: "Alibaba PuHuiTi 2.0";
+                    font-size: 12px;
+                    font-style: normal;
+                    font-weight: 400;
+                    line-height: normal;
+                    cursor: pointer;
+
+                }
+
+            }
+
+            .th {
+                font-weight: 700;
+                display: flex;
+                width: 100%;
+
+                .long {
+                    width: 500px;
+                }
+            }
+
+            .list-item {
+
+
+                font-size: 12px;
+                // border-bottom: 1px dotted #fff;
+                padding: 8px;
+                border-radius: 6px;
+                border: 1px solid #164B7C;
+                background: rgba(26, 86, 154, 0.28);
+                margin-bottom: 15px;
+
+                .class-status-btn-container {
+                    display: flex;
+                    justify-content: space-between;
+                    width: 100%;
+                    align-items: center;
+
+                    .left-class-status {
+                        display: flex;
+                    }
+
+                    .right-btn {
+                        display: flex;
+                        padding: 4px 16px;
+                        justify-content: center;
+                        align-items: center;
+                        gap: 10px;
+                        border-radius: 2px;
+                        background: #0082D3;
+
+
+
+
+                        color: #FFF;
+
+                        /* text/pc/02-55-Regular */
+                        font-family: "Alibaba PuHuiTi 2.0";
+                        font-size: 14px;
+                        font-style: normal;
+                        font-weight: 400;
+                        line-height: normal;
+                    }
+                }
+
+                .position-type-container {
+                    display: flex;
+                    justify-content: space-between;
+                    margin-top: 20px;
+
+                    div {
+                        flex: 1;
+                    }
+                }
+
+                .course-person-rate-container {
+                    display: flex;
+                    margin-top: 8px;
+
+                    .course {
+                        flex: 1;
+                    }
+
+                    .person-rate-container {
+                        flex: 2;
+                    }
+
+                    .person-rate-container {
+                        display: flex;
+                    }
+                }
+
+                // &:last-child {
+                //     margin-bottom: 10px;
+                // }
+
+                // li {
+                //     display: flex;
+                //     width: 100%;
+                //     align-items: center;
+                //     justify-content: space-around;
+                //     word-wrap: break-word;
+                // }
+            }
+
+            .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;
+    //    max-width: 100%;
+    //    height: auto;
+    width: 439px;
+    height: 40px;
+    flex-shrink: 0;
+    background-size: cover !important;
+    padding-left: 78px;
+
+    .text {
+        color: #FFF;
+
+        font-family: FZCuHeiSongS-B-GB;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 40px;
+        height: 40px;
+
+    }
+}
+
+// 通用content
+.content {
+    display: flex;
+    width: 100%;
     //  overflow: hidden;
-     justify-content: space-evenly;
-
- }
-
- // 点击模型弹出框
- .model-detail {
-     display: flex;
-     justify-content: space-between;
-     flex-wrap: wrap;
-     //  padding: 10px;
-     //  border: 2px solid firebrick;
-     border-radius: 10px;
-
-     span {
-         font-size: 15.5px;
-         width: 175px;
-         font-family: Microsoft YaHei UI;
-         // border: 1px solid red;
-         margin:  6px 0 6px 4px;
-         font-weight: 400;
-         //  padding: 0;
-
-         .title {
-             color: #000;
-             font-weight: 700;
-         }
-
-         .green {
-             color: #00C767;
-         }
-
-         .red {
-             color: #DB4A36;
-         }
-     }
- }
-
- .scroll::-webkit-scrollbar {
-     width: 5px;
-     height: 5px;
-     background-color: transparent;
-     border-radius: 3px;
- }
-
- .scroll::-webkit-scrollbar-thumb {
-     background-color: #999;
-     border-radius: 3px;
- }
-
- .jiaos{
+    justify-content: space-evenly;
+
+}
+
+// 点击模型弹出框
+.model-detail {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    //  padding: 10px;
+    //  border: 2px solid firebrick;
+    border-radius: 10px;
+
+    span {
+        font-size: 15.5px;
+        width: 175px;
+        font-family: Microsoft YaHei UI;
+        // border: 1px solid red;
+        margin: 6px 0 6px 4px;
+        font-weight: 400;
+        //  padding: 0;
+
+        .title {
+            color: #000;
+            font-weight: 700;
+        }
+
+        .green {
+            color: #00C767;
+        }
+
+        .red {
+            color: #DB4A36;
+        }
+    }
+}
+
+.scroll::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+    background-color: transparent;
+    border-radius: 3px;
+}
+
+.scroll::-webkit-scrollbar-thumb {
+    background-color: #999;
+    border-radius: 3px;
+}
+
+.jiaos {
     // background-color: antiquewhite;
     // color: #000;
     // overflow-wrap: break-word; 
@@ -281,5 +488,26 @@
     text-align: center;
     flex-wrap: wrap;
     line-height: 16px;
-    
+
+}
+
+:deep(.el-progress-bar__outer) {
+    background-color: #E5BE20;
+}
+
+:deep(.el-button) {
+    width: 36px;
+    height: 36px;
+}
+
+:deep(.el-input__wrapper) {
+    background: rgba(5, 67, 117, 0.34);
+    margin-right: 8px;
+    border-radius: 2px;
+
+}
+
+:deep(.el-tooltip__trigger:focus-visible) {
+    outline: unset;
+
 }

src/assets/css/right.scss

@@ -33,21 +33,36 @@
 
 // 通用标题
 .title {
-    width: 380px;
-    height: 32px;
+    //  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;
+    //    max-width: 100%;
+    //    height: auto;
+    width: 439px;
+    height: 40px;
     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;
+    background-size: cover !important;
+    padding-left: 78px;
 
     .text {
         color: #FFF;
-        font-family: PingFang SC;
-        padding-left: 18px;
-        letter-spacing: 1px;
+
+        font-family: FZCuHeiSongS-B-GB;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 40px;
+        height: 40px;
+
     }
 }
+.title-mt{
+    margin-top: 42px;
+}
 
 // 通用content
 .content {
@@ -63,12 +78,12 @@
     position: absolute;
     width: 412px;
 
-    top: 11.5vh;
+    top: 8vh;
     z-index: 9;
     flex-shrink: 0;
     border-radius: 2px;
-    background: rgba(125, 125, 125, 0.17);
-    backdrop-filter: blur(30.5px);
+    // background: rgba(125, 125, 125, 0.17);
+    // backdrop-filter: blur(30.5px);
     color: #FFF;
     font-size: 14px;
     // overflow: hidden;

src/components/Header.vue

@@ -0,0 +1,198 @@
+<template>
+  <div
+    class="header"
+    :style="{ background: `url(${headImg}) no-repeat center` }"
+  >
+    <img class="logo" :src="headLogo" alt="" />
+    <div class="title">智慧教室IOC平台</div>
+    <!-- <img :src="headImg" alt="" /> -->
+    <!-- <div></div> -->
+
+    <div class="weather">
+      <div class="left-time">
+        <div class="time">{{ currentTime }}</div>
+        <div class="year">{{ getCurrentYMD }}</div>
+      </div>
+      <el-divider direction="vertical" />
+      <div class="right-weatherInfo">
+        <img class="weather-icon" :src="sun" alt="" />
+        <div class="info">
+          <div class="text">{{ weatherInfo.text }}</div>
+          <div class="temp">{{ weatherInfo.temp }} <span>°C</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script setup>
+import { ref, computed, onBeforeUnmount, onUnmounted, onMounted } from "vue";
+import axios from "axios";
+
+onMounted(() => {
+  // 开启时间定时器获取当前时间
+  starttimeInterval();
+
+  // 获取天气信息
+  getWeatherInfo();
+});
+
+// 获取当前年月日计算属性
+const getCurrentYMD = computed(() => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, "0");
+  const day = String(now.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+});
+
+// 获取当前时间   umbRQyjXTsyAsbzT4zLI3GNgnPrTBYGD
+let currentTime = ref(new Date().toLocaleTimeString());
+let timeInterval = ref(null);
+const starttimeInterval = () => {
+  clearTimeout(timeInterval.value);
+  timeInterval.value = setInterval(() => {
+    currentTime.value = new Date().toLocaleTimeString();
+  }, 1000);
+};
+
+let weatherInfo = ref({});
+
+const getWeatherInfo = (latitude, Longitude) => {
+  const key = "UFwchof57SfCeYaiWXj1F2XBx0w8hKtB";
+  //https://api.map.baidu.com/weather/v1/?location=${latitude},${Longitude}&data_type=all&ak=${key}
+  axios
+    .get(
+      `https://api.map.baidu.com/weather/v1/?district_id=222405&data_type=all&ak=${key}`
+    )
+    .then((res) => {
+      weatherInfo.value = res.data.result.now;
+      console.log("天气信息", res.data.result.now);
+    });
+};
+
+onBeforeUnmount(() => {
+  clearTimeout(timeInterval.value);
+});
+onUnmounted(() => {
+  clearTimeout(timeInterval.value);
+});
+
+const headImg = ref("./img/head.png");
+const headLogo = ref("./img/logo.png");
+const sun = ref("./img/sun.png");
+</script>
+<style scoped lang="scss">
+.header {
+  position: absolute;
+  z-index: 555;
+  margin-bottom: 20px;
+  height: 70px;
+  width: 100%;
+  display: flex;
+  background-size: cover !important;
+  background-position: center !important;
+  background-repeat: no-repeat !important;
+  .logo {
+    width: 162px;
+    height: 50px;
+    position: absolute;
+    left: 28px;
+    top: 50%;
+    transform: translateY(-50%);
+    
+  }
+  .title {
+    flex: 1;
+    text-align: center;
+
+    color: #fff;
+
+    font-family: FZCuHeiSongS-B-GB;
+    font-size: 40px;
+    font-weight: 400;
+    line-height: 70px;
+    letter-spacing: 8px;
+  }
+
+  .weather {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    height: 38px;
+    .left-time {
+        margin-right: 12px;
+        height: 38px;
+      .time {
+        color: #bfdfff;
+        text-shadow: 0px 1px 3px rgba(5, 12, 25, 0.54);
+        font-family: PangMenZhengDao;
+        font-size: 24px;
+        font-style: normal;
+        font-weight: 600;
+      }
+      .year {
+        color: #bfdfff;
+
+        text-align: right;
+        text-shadow: 0px 1px 3px rgba(5, 12, 25, 0.54);
+        font-family: PangMenZhengDao;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+      }
+    }
+    .right-weatherInfo {
+      display: flex;
+      align-items: center;
+      height: 38px;
+      .weather-icon {
+        width: 30px;
+        height: 30px;
+      }
+      .info {
+        flex: 1;
+        margin-left: 12px;
+        height: 38px;
+        .text {
+          color: #bfdfff;
+
+          text-shadow: 0px 1px 3px rgba(5, 12, 25, 0.54);
+          /* text/pc/03-55-Regular */
+          font-family: "Alibaba PuHuiTi 2.0";
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: normal;
+        }
+        .temp {
+          color: #bfdfff;
+
+          text-shadow: 0px 1px 3px rgba(5, 12, 25, 0.54);
+          font-family: PangMenZhengDao;
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: normal;
+          span {
+            color: #bfdfff;
+            font-family: "Alibaba PuHuiTi 2.0";
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: normal;
+          }
+        }
+      }
+    }
+  }
+}
+:deep(.el-divider--vertical){
+    height: 34px;
+}
+</style>

src/components/home.vue

@@ -1,12 +1,12 @@
 <template>
-    <div class="container">
-        <div class="header">
-            <img :src="headImg" alt="" />
-        </div>
+    <div class="container" :style="{background: `url(${backgroundImg})` }">
+        <img src="bgShadow" alt="" style="position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;">
+        
+        <Header />
         <el-container>
             <Left ref="childRef" @childMethod="childMethod"></Left>
             <right></right>
-            <div ref="linedomRef" style="width:1px;height:1px;position: absolute;z-index: 228;background:#ccc;">
+            <div ref="linedomRef" style="width:1px;height:1px;position: absolute;top:0px;left:0px;z-index: 228;background:#ccc;">
             </div>
 
         </el-container>
@@ -63,7 +63,7 @@
 </template>
 
 <script>
-import { reactive, onMounted, ref, toRefs, onBeforeUnmount, getCurrentInstance, nextTick } from 'vue';
+import { reactive, onMounted, ref, toRefs, onBeforeUnmount, getCurrentInstance, nextTick,computed,onUnmounted } from 'vue';
 import { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem, ElMessage } from "element-plus";
 import "vue3-video-play/dist/style.css";
 import { addResponseEventListener } from "../webrtcVideo.js";
@@ -80,9 +80,12 @@ import {
 
 import { getVideoUrl } from '../request/api';
 
+import Header from './Header.vue';
+
+
 export default ({
     name: 'Histogram',
-    components: { Login, Left, Right, ElScrollbar, ElPagination, ElDialog, videoPlay, ElCarousel, ElCarouselItem, CircleProgress },
+    components: { Login, Left, Right, ElScrollbar, ElPagination, ElDialog, videoPlay, ElCarousel, ElCarouselItem, CircleProgress,Header },
   
     setup() {
         const titleDialog = ref("")
@@ -354,13 +357,63 @@ export default ({
             window.addEventListener('resize', windowSize);
             // window.addEventListener('click', windowSize);
             // addResponseEventListener("widowSizeChange", windoChangeFunction);
+        })
+        // // 获取当前年月日计算属性
+
+        // const getCurrentYMD =  computed(()=>{
+        //     const now = new Date();
+        //     const year = now.getFullYear();
+        //     const month = String(now.getMonth() + 1).padStart(2, '0');
+        //     const day = String(now.getDate()).padStart(2, '0');
+        //     return `${year}-${month}-${day}`;
+        // })
+
+        // // 获取当前时间   umbRQyjXTsyAsbzT4zLI3GNgnPrTBYGD
+        // let currentTime = ref(new Date().toLocaleTimeString());
+        // let timeInterval =ref(null)
+        // const starttimeInterval =()=>{
+        //     clearTimeout(timeInterval.value)
+        //     timeInterval.value = setInterval(() => {
+        //     currentTime.value = new Date().toLocaleTimeString();
+        // }, 1000);
+        // }
+
+        // let weatherInfo =ref({});
+        
+        // const getWeatherInfo =(latitude,Longitude)=>{
+        //     const key ="UFwchof57SfCeYaiWXj1F2XBx0w8hKtB";
+        //     //https://api.map.baidu.com/weather/v1/?location=${latitude},${Longitude}&data_type=all&ak=${key}
+        //     axios.get(`https://api.map.baidu.com/weather/v1/?district_id=222405&data_type=all&ak=${key}`).then(res=>{
+        //         weatherInfo.value = res.data.result.now;
+        //         console.log("天气信息",res.data.result.now)
+        //     })
+        // }
+        
+        
+
 
 
 
-        })
+
+
+        // onBeforeUnmount(() => {
+        //     clearTimeout(timeInterval.value)
+        // })
+        // onUnmounted(() => {
+        //     clearTimeout(timeInterval.value)
+        // })
+
+
+
+
+        
+
+        
 
     
-        const headImg = ref('./img/head.png')
+        // const headImg = ref('./img/head.png')
+        const backgroundImg = ref('./img/test_bg.png')
+        const bgShadow = ref('./img/bg-shadow.png')
         return {
             centerDialogVisible,
             interDevice,
@@ -376,12 +429,15 @@ export default ({
             lineContainer,
             classDeviceInfo,
             mouseClick,
-            headImg,
             titleDialog,
             orientation,
             childMethod,
-            childRef
-    
+            childRef,
+            // getCurrentYMD,
+            // currentTime,
+            // weatherInfo,
+            backgroundImg,
+            bgShadow
         }
     },
 })

src/components/left.vue

@@ -1,370 +1,589 @@
 <template>
-    <el-aside class="left">
-
-        <div class="left_top">
-            <div class="title">
+  <el-aside class="left">
+    <div class="left_top">
+      <!-- <div class="title">
                 <div class="text">教室分类统计</div>
+            </div> -->
+      <div class="title" :style="{ background: `url(${frame})` }">
+        <div class="text">教室分类统计</div>
+      </div>
+
+      <div class="content">
+        <div
+          id="myChart"
+          style="width: 140px; height: 140px; margin: 0px 0 30px 18px"
+        ></div>
+        <div class="list">
+          <div class="item" v-for="(item, index) in classRoomCount">
+            <!-- <i :style="{ backgroundColor: item.color }"></i> -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              v-if="index === 0"
+            >
+              <path
+                d="M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM4.55 7C4.55 8.3531 5.6469 9.45 7 9.45C8.3531 9.45 9.45 8.3531 9.45 7C9.45 5.6469 8.3531 4.55 7 4.55C5.6469 4.55 4.55 5.6469 4.55 7Z"
+                fill="#00BBFF"
+              />
+            </svg>
+            <svg
+              v-if="index === 1"
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+            >
+              <path
+                d="M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM4.55 7C4.55 8.3531 5.6469 9.45 7 9.45C8.3531 9.45 9.45 8.3531 9.45 7C9.45 5.6469 8.3531 4.55 7 4.55C5.6469 4.55 4.55 5.6469 4.55 7Z"
+                fill="#00EB7D"
+              />
+            </svg>
+            <svg
+              v-if="index === 2"
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+            >
+              <path
+                d="M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM4.55 7C4.55 8.3531 5.6469 9.45 7 9.45C8.3531 9.45 9.45 8.3531 9.45 7C9.45 5.6469 8.3531 4.55 7 4.55C5.6469 4.55 4.55 5.6469 4.55 7Z"
+                fill="#FFBB00"
+              />
+            </svg>
+            <div class="descr">
+              <span>{{ item.name }}</span>
+              <span>{{ item.value }}</span>
             </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>
-        <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="item.text" text-position="bottom">
-                        <img :src="leftimg + item.imgnumber + '.png'" alt="">
-                    </CircleProgress>
-                    <div class="text">{{ item.text }}</div>
-
-                </div>
-            </div>
+      </div>
+    </div>
+    <div class="left-center">
+      <div class="title" :style="{ background: `url(${frame})` }">
+        <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="item.text"
+            text-position="bottom"
+          >
+            <img :src="leftimg + 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 class="left-bottom">
+      <div class="title" :style="{ background: `url(${frame})` }">
+        <div class="text">教室使用明细</div>
+      </div>
+      <div class="usering-free-container">
+        <div class="usering-free">
+          <div class="usering-box">
+            <div class="text">使用中72.56% <span class="num">657间</span></div>
+          </div>
+          <div class="free-box">
+            <div class="text">
+              空闲中：28.44% <span class="num">657间</span>
             </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: 342px;overflow: scroll;" class="scroll">
-                        <ul v-for="item in classRoom" @mouseenter="testMove" @mouseleave="testMend">
-                            <li class="jiaos"> {{ item.class }} </li>
-                            <li>{{ item.status }}</li>
-                            <li >{{ item.people || '—'}}</li>
-                            <li >{{ item.percentage ?item.percentage: '—' }}</li>
-                      
-                            <li>
-                                <el-button size="small" v-if="item.leaf" class="look" @click.prevent="handleRoom(item)">查看</el-button>
-                            </li>
-
-                        </ul>
-
-                    </div>
-
+          </div>
+        </div>
+        <el-progress :percentage="72.56" :show-text="false" color="#1BCEFF" />
+      </div>
+      <div class="search-container">
+        <el-input v-model="searchData" placeholder="请输入大楼名称、教室名称" />
+        <el-button type="primary" :icon="Search" @click="searchHandel" />
+      </div>
+
+      <div class="content" style="height: 100%; overflow: hidden">
+        <div class="table">
+          <div class="dropdown-container">
+            <el-dropdown trigger="click" @click="clickdropdown">
+              <span class="dropdown-name">
+                全部大楼
+                <Edit style="width: 1em; height: 1em; margin-right: 8px" />
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item>一号大楼</el-dropdown-item>
+                  <el-dropdown-item>二号大楼</el-dropdown-item>
+                  <el-dropdown-item>三号大楼</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <el-dropdown trigger="click">
+              <span class="dropdown-name">
+                全部类型
+                <el-icon>
+                  <arrow-down />
+                </el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item>一号大楼</el-dropdown-item>
+                  <el-dropdown-item>二号大楼</el-dropdown-item>
+                  <el-dropdown-item>三号大楼</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <el-dropdown trigger="click">
+              <span class="dropdown-name">
+                全部楼层
+                <el-icon>
+                  <arrow-down />
+                </el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item>一号大楼</el-dropdown-item>
+                  <el-dropdown-item>二号大楼</el-dropdown-item>
+                  <el-dropdown-item>三号大楼</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+            <el-dropdown trigger="click">
+              <span class="dropdown-name">
+                全部状态
+                <el-icon>
+                  <arrow-down />
+                </el-icon>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item>一号大楼</el-dropdown-item>
+                  <el-dropdown-item>二号大楼</el-dropdown-item>
+                  <el-dropdown-item>三号大楼</el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+
+          <!-- <ul class="th">
+            <li>教室</li>
+            <li>使用状态</li>
+            <li class="long">实到/应到人数</li>
+            <li>到课率</li>
+            <li>操作</li>
+          </ul> -->
+          <div
+            ref="testMain"
+            style="height: 342px; overflow: scroll; margin-top: 8px"
+            class="scroll"
+          >
+            <div
+              v-for="item in classRoom"
+              @mouseenter="testMove"
+              @mouseleave="testMend"
+              class="list-item"
+            >
+              <div class="class-status-btn-container">
+                <div class="left-class-status">
+                  <div>{{ item.class }}</div>
+                  <!-- <div>{{ item?.status }}</div> -->
+                  <!-- <el-tag effect="Plain">Tag 1</el-tag> -->
+                </div>
+                <div class="right-btn" @click.prevent="handleRoom(item)">
+                  查看
+                </div>
+              </div>
+              <div class="position-type-container">
+                <div>位置：1号教学楼A201</div>
+                <div>类型：智慧教室</div>
+              </div>
+              <div class="course-person-rate-container">
+                <div class="course">课程：软件测试</div>
+                <div class="person-rate-container">
+                  <div>实到/应到：40/48</div>
+                  <div>到课率：90%</div>
                 </div>
+              </div>
+              <!-- <div class="jiaos">{{ item.class }}</div>
+              <div>{{ item?.status }}</div>
+              <div>{{ item.people || "—" }}</div>
+              <div>{{ item.percentage ? item.percentage : "—" }}</div>
+
+              <div>
+                <el-button
+                  size="small"
+                  v-if="item.leaf"
+                  class="look"
+                  @click.prevent="handleRoom(item)"
+                  >查看</el-button
+                >
+              </div> -->
             </div>
+          </div>
         </div>
-
-
-         
-     
-    </el-aside>
-
-
-
-        <div  ref="popoverRef" v-if="roomVisible" style="background-color: rgba(245, 246, 248, 0.9); border-radius: 10px;position: absolute; top: 10vh; left: 50%; width: 366px;z-index: 999; transform: translateX(-50%);">
-
-         
+      </div>
+    </div>
+  </el-aside>
+
+  <div
+    ref="popoverRef"
+    v-if="roomVisible"
+    style="
+      background-color: rgba(245, 246, 248, 0.9);
+      border-radius: 10px;
+      position: absolute;
+      top: 10vh;
+      left: 50%;
+      width: 366px;
+      z-index: 999;
+      transform: translateX(-50%);
+    "
+  >
     <div class="model-detail">
-        <span><span class="title">教室状态: </span>
-            <span :class="classInfo.online ? 'green' : 'red'">{{ classInfo &&
-                classInfo.status }}</span>
+      <span
+        ><span class="title">教室状态: </span>
+        <span :class="classInfo.online ? 'green' : 'red'">{{
+          classInfo && classInfo?.status
+        }}</span>
+      </span>
+
+      <span
+        ><span class="title">班级: </span>
+        <span style="width: 105px; display: inline-flex">{{
+          classInfo && classInfo.className
+        }}</span>
+      </span>
+      <span
+        ><span class="title">课程名称: </span>
+        <span style="width: 94px; display: inline-flex">{{
+          classInfo && classInfo.courseName
+        }}</span>
+      </span>
+      <span
+        ><span class="title">应到人数: </span
+        >{{ classInfo && classInfo.expected }}</span
+      >
+      <span
+        ><span class="title">教室: </span>
+        <span style="width: 120px; display: inline-flex">
+          {{ classInfo && classInfo.class }}
         </span>
-
-
-
-        <span><span class="title">班级: </span>  <span style="width: 105px; display: inline-flex;">{{ classInfo && classInfo.className }}</span> </span>
-        <span><span class="title">课程名称: </span>   <span style="width: 94px; display: inline-flex;">{{ classInfo && classInfo.courseName }}</span>    </span>
-        <span><span class="title">应到人数: </span>{{ classInfo && classInfo.expected }}</span>
-        <span><span class="title">教室: </span>  <span style=";width: 120px; display: inline-flex;"> {{ classInfo && classInfo.class }} </span>     </span>
-        <span><span class="title">实到人数: </span>{{ classInfo && classInfo.actual }}</span>
-        <span><span class="title">老师: </span>{{ classInfo && classInfo.teacher }}</span>
+      </span>
+      <span
+        ><span class="title">实到人数: </span
+        >{{ classInfo && classInfo.actual }}</span
+      >
+      <span
+        ><span class="title">老师: </span
+        >{{ classInfo && classInfo.teacher }}</span
+      >
     </div>
-
-    </div>
-
-
-
+  </div>
 </template>
 
 <script >
-
-
-
 import * as echarts from "echarts";
-import { reactive, onMounted, ref, onBeforeUnmount, onUnmounted, nextTick, getCurrentInstance } from 'vue';
-import { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem } from "element-plus";
-import { getClass } from '../request/api'
-import CircleProgress from './CircleProgress.vue';
-import { callUIInteraction }
-    from "../webrtcVideo";
-
-export default ({
-
-    name: 'Histogram',
-    components: { ElScrollbar, ElPagination, ElDialog, ElCarousel, ElCarouselItem, CircleProgress },
-    setup(_, { emit }) {
-        // 教室分类统计
-        const classRoomCount = ref([])
-
-        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\n${roomtotle.value}间`
-                        },
-
-                        // 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: classRoomCount
-
-                }]
+import {
+  reactive,
+  onMounted,
+  ref,
+  onBeforeUnmount,
+  onUnmounted,
+  nextTick,
+  getCurrentInstance,
+} from "vue";
+import {
+  ElScrollbar,
+  ElPagination,
+  ElDialog,
+  ElCarousel,
+  ElCarouselItem,
+  ElIcon,
+} from "element-plus";
+import { Search, ArrowDown } from "@element-plus/icons-vue";
+
+import { getClass } from "../request/api";
+import CircleProgress from "./CircleProgress.vue";
+import { callUIInteraction } from "../webrtcVideo";
+
+export default {
+  name: "Histogram",
+  components: {
+    ElScrollbar,
+    ElPagination,
+    ElDialog,
+    ElCarousel,
+    ElCarouselItem,
+    CircleProgress,
+  },
+  setup(_, { emit }) {
+    // 教室分类统计
+    const classRoomCount = ref([]);
+
+    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\n${roomtotle.value}间`;
+              },
+
+              // formatter: '{total|' + 200 + '}' + '\n\r' + '{active|共发布活动}',
+              // 等着获取了数据在给样式
+              // rich: {
+              //     total: {
+              //         fontSize: 35,
+              //         fontFamily: "微软雅黑",
+              //         color: '#454c5c'
+              //     },
+              //     active: {
+              //         fontFamily: "微软雅黑",
+              //         fontSize: 16,
+              //         color: '#6c7a89',
+              //         lineHeight: 30,
+              //     },
+              // }
             },
-        })
-        const initeCharts = () => {
-            let myChart = echarts.init(document.getElementById('myChart'))
-            // 绘制图表
-            console.log("绘制图表", classPie.option)
-            myChart.setOption(classPie.option)
-        }
-
-
-        // 物联设备类型统计
-        const interDevice = ref([])
-
-        const roomVisible = ref(false)
-
-        //消失面板
-        const clearPanel=()=>{
-            roomVisible.value = false;
-        }
-
-        const popoverRef = ref(null)
-        const triggerRef = ref({
-            getBoundingClientRect() {
-                // console.log("positon----方法返回元素的大小及其相对于视口的位置", position.value)
-                return position.value
+            labelLine: {
+              show: false,
             },
-        })
-        // 点击某个模型跟随移动
-        const mousemoveHandler = (x, y) => {
-            position.value = DOMRect.fromRect({
-                width: 0,
-                height: 0,
-                x: x,
-                y: y,
-            })
-        }
-        const position = ref({
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-        })
-        let classInfo = ref({})
-        const handleRoom = function (item) {
-
-
-            //查看前隐藏
-            let a1=document.getElementById('popoverRef')
-            a1.style.display = "none"
-
-            emit('childMethod');
-
-        console.log('kankanitem',item);
-       setTimeout(() => {
+            data: classRoomCount,
+          },
+        ],
+      },
+    });
+    const initeCharts = () => {
+      let myChart = echarts.init(document.getElementById("myChart"));
+      // 绘制图表
+      console.log("绘制图表", classPie.option);
+      myChart.setOption(classPie.option);
+    };
+
+    // 物联设备类型统计
+    const interDevice = ref([]);
+
+    const roomVisible = ref(false);
+
+    //消失面板
+    const clearPanel = () => {
+      roomVisible.value = false;
+    };
+
+    const popoverRef = ref(null);
+    const triggerRef = ref({
+      getBoundingClientRect() {
+        // console.log("positon----方法返回元素的大小及其相对于视口的位置", position.value)
+        return position.value;
+      },
+    });
+    // 点击某个模型跟随移动
+    const mousemoveHandler = (x, y) => {
+      position.value = DOMRect.fromRect({
+        width: 0,
+        height: 0,
+        x: x,
+        y: y,
+      });
+    };
+    const position = ref({
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+    });
+    let classInfo = ref({});
+    const handleRoom = function (item) {
+      //查看前隐藏
+      let a1 = document.getElementById("popoverRef");
+      a1.style.display = "none";
+
+      emit("childMethod");
+
+      console.log("kankanitem", item);
+      setTimeout(() => {
         roomVisible.value = true;
-            classInfo.value = item;
-         
-            classInfo.value.online = classInfo.value.status == "在用" ? true : false
-       }, 2400);
-    
-            mousemoveHandler(1000, 60)
-
-            let meg =item
-
-
-            // let a2 =`roomName=${item.class}`
-           
-            console.log("meg是多少",meg);
-
-
-            callUIInteraction(meg)
-   
-        }
-
-
-
-
-        // 本周课程统计数据
-        const classCount = ref([])
-        // 智慧教室使用数据
-        const classRoom = ref([])
-        const roomtotle = ref([])
-
-
-
-
-        const getClassData = async () => {
-            let res = await getClass()
-            console.log("res----教室分类统计", res)
-            let { course, classroomDetail, category } = res.data;
-            classRoomCount.value = category;
-
-            //获取教室总数
-            roomtotle.value= category.reduce((accumulator, currentValue) => accumulator + currentValue.value, 0);
-            console.log('categorycategory',roomtotle);
-
-            if (classRoomCount.value) {
-                initeCharts()
-            }
-            classCount.value = course;
-            console.log("看一下颜色", classCount.value)
-            classRoom.value = classroomDetail
-
-        }
-
-        let timer = ref(null)
-        let testMain = ref(null)
-        onMounted(() => {
-
-            getClassData()
-            start()
-        })
-
-
-        onBeforeUnmount(() => {
-            clearTimeout(timer.value)
-        })
-        onUnmounted(() => {
-            clearTimeout(timer.value)
-        })
-
-
-        function testMove() {
-            clearTimeout(timer.value)
-        }
+        classInfo.value = item;
+
+        classInfo.value.online =
+          classInfo.value?.status == "在用" ? true : false;
+      }, 2400);
+
+      mousemoveHandler(1000, 60);
+
+      let meg = item;
+
+      // let a2 =`roomName=${item.class}`
+
+      console.log("meg是多少", meg);
+
+      callUIInteraction(meg);
+    };
+
+    // 本周课程统计数据
+    const classCount = ref([]);
+    // 智慧教室使用数据
+    const classRoom = ref([]);
+    const roomtotle = ref([]);
+
+    const getClassData = async () => {
+      let res = await getClass();
+
+      let { course, classroomDetail, category } = res.data;
+      classRoomCount.value = category;
+
+      //获取教室总数
+      roomtotle.value = category.reduce(
+        (accumulator, currentValue) => accumulator + currentValue.value,
+        0
+      );
+
+      if (classRoomCount.value) {
+        initeCharts();
+      }
+      classCount.value = course;
+
+      classRoom.value = classroomDetail;
+      // 开启教师统计数据刷新
+      starttimeInterval();
+    };
+
+    let timer = ref(null);
+    let testMain = ref(null);
+    onMounted(() => {
+      getClassData();
+      start();
+    });
+
+    onBeforeUnmount(() => {
+      clearTimeout(timer.value);
+      //清除教师统计数据刷新定时器
+      clearTimeout(classRoomInterval.value);
+    });
+    onUnmounted(() => {
+      clearTimeout(timer.value);
+      //清除教师统计数据刷新定时器
+      clearTimeout(classRoomInterval.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)
-                }
-            }
+    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;
         }
-        const leftimg = ref("./img/")
-        return {
-            roomVisible,
-            classCount,
-            classRoom,
-            interDevice,
-            handleRoom,
-            testMend,
-            testMove,
-            testMain,
-            popoverRef,
-            classRoomCount,
-            triggerRef,
-            classInfo,
-            leftimg,
-            clearPanel
+        //组件进行滚动
+        test1.scrollTop += 1;
+
+        //判断滚动条是否滚动到底部
+        if (test1.scrollTop == test1.scrollHeight - test1.clientHeight) {
+          //获取组件第一个节点
+          let a = test1.childNodes[0];
+          //删除节点
+          test1.removeChild(a);
+          //将该节点拼接到组件最后
+          test1.append(a);
         }
-    },
-})
+      }
+    }
 
+    // 定时刷新教师统计数据
+    let classRoomInterval = ref(null);
+    const starttimeInterval = () => {
+      clearTimeout(classRoomInterval.value);
+      classRoomInterval.value = setInterval(() => {
+        getClassData();
+      }, 5000);
+    };
+
+    // 搜索
+    let searchData = ref("");
+    const searchHandel = () => {
+      console.log("搜索", searchData.value);
+    };
+
+    const leftimg = ref("./img/");
+    const frame = ref("./img/frame.png");
+    return {
+      roomVisible,
+      classCount,
+      classRoom,
+      interDevice,
+      handleRoom,
+      testMend,
+      testMove,
+      testMain,
+      popoverRef,
+      classRoomCount,
+      triggerRef,
+      classInfo,
+      leftimg,
+      clearPanel,
+      frame,
+      Search,
+      ArrowDown,
+      ElIcon,
+      searchData,
+      searchHandel,
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-@import '../assets/css/left.scss';
+@import "../assets/css/left.scss";
 </style>
 <style>
 .classpopover {
-    .el-popper__arrow {
-        top: 196px !important;
-    }
-
-    .el-popper[data-popper-placement^=bottom],
-    .el-popper__arrow::before {
-        border-left-color: transparent !important;
-        border-top-color: transparent !important;
-    }
+  .el-popper__arrow {
+    top: 196px !important;
+  }
+
+  .el-popper[data-popper-placement^="bottom"],
+  .el-popper__arrow::before {
+    border-left-color: transparent !important;
+    border-top-color: transparent !important;
+  }
 }
 
 .el-popper.is-light {
-    border-radius: 10px;
+  border-radius: 10px;
 }
 </style>

src/components/right.vue

@@ -1,349 +1,381 @@
 <template>
-    <el-aside class="right">
-        <div class="right_top">
-            <div class="title">
-                <div class="text">物联设备统计</div>
+  <el-aside class="right">
+    <div class="right_top">
+
+      <div class="title" :style="{ background: `url(${frame})` }">
+        <div class="text">物联设备统计</div>
+      </div>
+      <div class="content">
+        <div class="logo">
+          <span>{{ equipmentTotal.total }}</span>
+          <img class="animate" :src="d1img" alt="" />
+          <img :src="d12img" alt="" />
+          <span><b>总数</b>(个)</span>
+        </div>
+        <div class="list">
+          <div class="item_r">
+            <img :src="d2img" alt="" />
+            <div
+              class="percent"
+              style="display: flex; justify-content: space-between"
+            >
+              <a>在线</a> <a>{{ equipmentTotal.online }} <span>(个)</span> </a>
             </div>
-            <div class="content">
-                <div class="logo">
-                    <span>{{ equipmentTotal.total }}</span>
-                    <img class="animate" :src="d1img" alt="">
-                    <img :src="d12img" alt="">
-                    <span><b>总数</b>(个)</span>
-                </div>
-                <div class="list">
-                    <div class="item_r">
-                        <img :src="d2img" alt="">
-                        <div class="percent" style="display: flex;justify-content: space-between;">
-                            <a>在线</a> <a>{{ equipmentTotal.online }} <span>(个)</span> </a>
-                            
-                        </div>
-                    </div>
-                    <div class="item_r">
-                        <img :src="d3img" alt="">
-                        <div class="percent" style="display: flex;justify-content: space-between;">
-                            <a>离线</a> <a>{{ equipmentTotal.underline }} <span>(个)</span> </a>
-                             
-                    
-                        </div>
-                    </div>
-                </div>
+          </div>
+          <div class="item_r">
+            <img :src="d3img" alt="" />
+            <div
+              class="percent"
+              style="display: flex; justify-content: space-between"
+            >
+              <a>离线</a>
+              <a>{{ equipmentTotal.underline }} <span>(个)</span> </a>
             </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="deviceImg + item.icon + '.png'" alt="">
-                        <!-- <img :src="'src/assets/img/' + item.icon + '.png'" alt=""> -->
-                    </CircleProgress>
-
-                    <div  class="text">{{ item.text }}</div>
-
-                    <!-- <el-tooltip placement="bottom">
+      </div>
+    </div>
+
+    <div class="right_center">
+      <div class="title title-mt " :style="{ background: `url(${frame})` }">
+        <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="deviceImg + item.icon + '.png'" alt="" />
+            <!-- <img :src="'src/assets/img/' + item.icon + '.png'" alt=""> -->
+          </CircleProgress>
+
+          <div class="text">{{ item.text }}</div>
+
+          <!-- <el-tooltip placement="bottom">
                         <template    #content> multiple lines<br />second line </template>
                         <el-text style="width: 100px;" class="w-100px mb-2" truncated>
                             测试测试测试
                         </el-text>
                     </el-tooltip> -->
-            
-                </div>
-            </div>
         </div>
-
-        <div class="right_bottom">
-            <div class="title">
-                <div class="text">智慧教室实时监控</div>
+      </div>
+    </div>
+
+    <div class="right_bottom">
+      <div class="title title-mt" :style="{ background: `url(${frame})` }">
+        <div class="text">教室实时监控</div>
+      </div>
+
+      <div class="monitorContent">
+        <el-carousel class="monitor">
+          <el-carousel-item v-for="(item, index) in carouselData" :key="index">
+            <p style="margin-left: 12px; margin-bottom: 3px; font-size: 14px">
+              {{ item.activeMonitor?.title }}
+            </p>
+            <div class="interactclass">
+              <div
+                class="room"
+                v-for="(item, index) in item.activeMonitor?.array"
+                :key="index"
+              >
+                <span style="z-index: 99">{{ item?.title }}</span>
+                <!-- <img :src="deviceImg + 'rb2.png'" alt="" @click="lookVideo(item)"> -->
+                <div
+                  v-if="item.src"
+                  style="width: 100%; height: 100%"
+                  @click="lookVideo(item)"
+                >
+                  <div class="vue3VideoPlay">
+                    <vue3VideoPlay
+                      width="100%"
+                      height="8.8vh"
+                      style="object-fit: fill"
+                      :src="item.src"
+                      :type="videoData.type"
+                      :autoPlay="true"
+                      :control="false"
+                      :preload="meta"
+                    />
+                  </div>
+                </div>
+              </div>
             </div>
 
-            <div class="monitorContent">
-                <el-carousel class="monitor">
-                    <el-carousel-item v-for="(item, index) in carouselData" :key="index">
-                        <p style="margin-left: 12px; margin-bottom: 3px; font-size: 14px;">{{ item.activeMonitor.title }}</p>
-                        <div class="interactclass">
-                            <div class="room" v-for="(item, index) in item.activeMonitor.array" :key="index">
-                                <span style="z-index: 99;">{{ item.title }}</span>
-                                <!-- <img :src="deviceImg + 'rb2.png'" alt="" @click="lookVideo(item)"> -->
-                                <div v-if="item.src"  style="width: 100%;height: 100%;" @click="lookVideo(item)">
-                                    <div  class="vue3VideoPlay ">
-                                        <vue3VideoPlay 
-                                    
-                                    width="100%"
-                                    height="8.8vh"
-                                    style=" object-fit: fill"
-                                    :src="item.src"
-                                    :type="videoData.type"
-                                    :autoPlay="true"
-                                    :control="false"
-                                    :preload="meta"
-                                   />
-
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <p style="margin-top: 18px;margin-left: 12px;  margin-bottom: 3px; font-size: 14px; " >{{ item.activeMonitor.title1 }}</p>
-                        <div class="interactclass">
-                            <div class="room" v-for="(item, index) in item.activeMonitor.array1" :key="index">
-                                <span  style="z-index: 99;">{{ item.title }}</span>
-                                <!-- <br>
+            <p
+              style="
+                margin-top: 18px;
+                margin-left: 12px;
+                margin-bottom: 3px;
+                font-size: 14px;
+              "
+            >
+              {{ item.activeMonitor?.title1 }}
+            </p>
+            <div class="interactclass">
+              <div
+                class="room"
+                v-for="(item, index) in item.activeMonitor?.array1"
+                :key="index"
+              >
+                <span style="z-index: 99">{{ item?.title }}</span>
+                <!-- <br>
                                 <div>
                                     {{ item.src }}
                                 </div> -->
-                                <div style="width: 100%;height: 100%;" @click="lookVideo(item)">
-                                    <div  class="vue3VideoPlay ">
-                                        <vue3VideoPlay 
-                                    
-                                    width="100%"
-                                    height="9vh"
-                                    style="object-fit: fill"
-                                    :src="item.src"
-                                    :type="videoData.type"
-                                    :autoPlay="true"
-                                    :control="false"
-                                    :preload="meta"
-                                   />
-                                    </div>
-                            
-                                </div>
-                            </div>
-                        </div>
-                    </el-carousel-item>
-                </el-carousel>
+                <div style="width: 100%; height: 100%" @click="lookVideo(item)">
+                  <div class="vue3VideoPlay">
+                    <vue3VideoPlay
+                      width="100%"
+                      height="9vh"
+                      style="object-fit: fill"
+                      :src="item.src"
+                      :type="videoData.type"
+                      :autoPlay="true"
+                      :control="false"
+                      :preload="meta"
+                    />
+                  </div>
+                </div>
+              </div>
             </div>
-
-        </div>
-    </el-aside>
-
-    <!-- 视频播放弹框 -->
-    <el-dialog class="videoDialog" v-model="videoDialog" :title="dialogTitle" width="62%" align="center" top="8%" style="z-index: 2015;">
-        <videoPlay v-bind="videoData" />
-
-        <!-- {{ videoData.src }} -->
-    </el-dialog>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+    </div>
+  </el-aside>
+
+  <!-- 视频播放弹框 -->
+  <el-dialog
+    class="videoDialog"
+    v-model="videoDialog"
+    :title="dialogTitle"
+    width="62%"
+    align="center"
+    top="8%"
+    style="z-index: 2015"
+  >
+    <videoPlay v-bind="videoData" />
+
+    <!-- {{ videoData.src }} -->
+  </el-dialog>
 </template>
 
 <script >
-import { reactive, onMounted, ref, nextTick } from 'vue';
+import { reactive, onMounted, ref, nextTick, onBeforeUnmount } 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, getVideoUrl,getvideo } from '../request/api';
-
-
-export default ({
-    name: 'Histogram',
-    components: { videoPlay, ElCarousel, ElCarouselItem,  },
-    setup() {
-        // 视频数据
-        const videoData = reactive({
-            width: "100%", //播放器高度
-            height: "66.5vh", //播放器高度
-            color: "red", //主题色
-            // title: "互动教室", //视频名称
-            // src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
-            src: "",
-            type: "m3u8",
-            muted: true, //静音
-            webFullScreen: false,
-            // speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
-            autoPlay: true, //自动播放
-            loop: false, //循环播放
-            mirror: false, //镜像画面
-            ligthOff: false, //关灯模式
-            volume: 0.3, //默认音量大小
-            control: true, //是否显示控制
-            currentTime: 0,//跳转到固定播放时间
-            controlBtns: [
-                "audioTrack",
-                "quality",
-                "speedRate",
-                "volume",
-                "setting",
-                "pip",
-                "pageFullScreen",
-                "fullScreen",
-            ], //显示所有按钮,
+import { getDevice, getVideoUrl, getvideo } from "../request/api";
+
+export default {
+  name: "Histogram",
+  components: { videoPlay, ElCarousel, ElCarouselItem },
+  setup() {
+    // 视频数据
+    const videoData = reactive({
+      width: "100%", //播放器高度
+      height: "66.5vh", //播放器高度
+      color: "red", //主题色
+      // title: "互动教室", //视频名称
+      // src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
+      src: "",
+      type: "m3u8",
+      muted: true, //静音
+      webFullScreen: false,
+      // speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
+      autoPlay: true, //自动播放
+      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  videoshow = ref(true)
+    const dialogTitle = ref("");
+    // 播放视频
+    const lookVideo = function (item) {
+      videoDialog.value = true;
+      dialogTitle.value = item.title;
+      let copysrc = JSON.parse(JSON.stringify(item));
+      console.log("sadi2", copysrc);
+      // videoData.src = item.scr
+      videoData.src = copysrc.src;
+      console.log("kankna222", videoData.src);
+
+      // getVideoUrl({ "rtsp": item.src }).then((res) => {
+      //     console.log("视频处理", res);
+      //     console.log("视频处理2", res.data.httpFlv);
+
+      //     videoData.src = res.data.httpFlv
+      // })
+      // videoData.src = src
+    };
+    // 播放视频
+    const onPlay = function () {
+      console.log("播放视频");
+    };
+    // 物联设备
+    let equipmentTotal = ref({});
+    // 物联设备类型统计
+    let interDevice = ref([]);
+    // 智慧教室
+    let carouselData = ref([]);
+
+    //获取页面数据
+    const getDeviceData = async () => {
+      //视频转码
+      // getvideo({
+      //  "rtsp": "rtsp://admin:admin@10.116.255.67:554",
+      // }).then((res)=>{
+      //     console.log('sadnuq21',res);
+      // })
+
+      let res = await getDevice();
+      console.log("s12312123", res);
+      if (res.code !== 200) {
+        ElMessage.error("数据请求出错");
+      }
+      let { category, monitor, status } = res.data;
+      //物联设备统计
+      equipmentTotal.value = status;
+      // 物联设备类型数据
+      console.log("sadui12u31", category);
+      //截取数组前6项
+      interDevice.value = category;
+
+      // 互动教室
+      carouselData.value = monitor;
+
+      carouselData.value.map((res) => {
+        console.log("sadhi2", res.activeMonitor);
+
+        res.activeMonitor?.array.map((array) => {
+          //视频转码
+          getvideo({
+            rtsp: array.src,
+          }).then((res) => {
+            console.log("sadnuq21", res.data);
+            console.log("sadnuq2121", res.data.httpFlv);
+            // array.src='http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
+            array.src = res.data.httpFlv;
+          });
         });
-        //视频播放弹框
-        const videoDialog = ref(false)
-
-        // const  videoshow = ref(true)
-        const dialogTitle = ref("")
-        // 播放视频
-        const lookVideo = function (item) {
-            videoDialog.value = true;
-            dialogTitle.value = item.title
-            let copysrc=JSON.parse(JSON.stringify(item))
-            console.log('sadi2',copysrc);
-            // videoData.src = item.scr
-            videoData.src = copysrc.src
-            console.log('kankna222', videoData.src);
-
-            
-         
-            // getVideoUrl({ "rtsp": item.src }).then((res) => {
-            //     console.log("视频处理", res);
-            //     console.log("视频处理2", res.data.httpFlv);
-
-            //     videoData.src = res.data.httpFlv
-            // })
-            // videoData.src = src
-
-        }
-        // 播放视频
-        const onPlay = function () {
-            console.log("播放视频")
-        }
-        // 物联设备
-        let equipmentTotal = ref({})
-        // 物联设备类型统计
-        let interDevice = ref([])
-        // 智慧教室
-        let carouselData = ref([
-           
-        ])
-
-        //获取页面数据
-        const getDeviceData = async () => {
-
-
-            //视频转码
-            // getvideo({
-            //  "rtsp": "rtsp://admin:admin@10.116.255.67:554",
-            // }).then((res)=>{
-            //     console.log('sadnuq21',res);
-            // })
-
-            let res = await getDevice()
-            console.log('s12312123',res);
-            if (res.code !== 200) {
-                ElMessage.error("数据请求出错");
-            }
-            let { category, monitor, status } = res.data
-                  //物联设备统计
-                  equipmentTotal.value = status
-            // 物联设备类型数据
-            console.log('sadui12u31',category);
-            //截取数组前6项
-            interDevice.value = category;
-      
-             // 互动教室
-             carouselData.value = monitor;
-      
-             carouselData.value.map((res)=>{
-                console.log('sadhi2',res.activeMonitor);
-
-                res.activeMonitor.array.map(array =>{
-              
-                    //视频转码
-                    getvideo({
-                    "rtsp": array.src,
-                    }).then((res)=>{
-                        console.log('sadnuq21',res.data);
-                        console.log('sadnuq2121',res.data.httpFlv);
-                        // array.src='http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
-                       array.src=res.data.httpFlv
-                    })
-
-                    
-                })
-                res.activeMonitor.array1.map(array1 =>{
-                    console.log('asdui1231',array1);
-                       //视频转码
-                       getvideo({
-                    "rtsp": array1.src,
-                    }).then((res)=>{
-                        console.log('sadnuq212123s2',res.data);
-                        // array1.src='http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
-                       array1.src=res.data.httpFlv
-                    })
-                })
-
-
-            })
-
-                 
-
-
-
-                // setTimeout(() => {
-                //     console.log('处理后监控视频数据===',carouselData.value);
-                // }, 2000);
-
-      
-
-        }
-
-        onMounted(() => {
-            getDeviceData()
-        })
-        const d1img = ref('./img/d1_1.png');
-        const d12img = ref('./img/d1_2.png');
-        const d2img = ref('./img/d2.png');
-        const d3img = ref('./img/d3.png')
-        const deviceImg = ref('./img/')
-
-        return {
-            interDevice,
-            videoData,
-            onPlay,
-            videoDialog,
-            lookVideo,
-            carouselData,
-            equipmentTotal,
-            d1img,
-            d12img,
-            d2img,
-            d3img,
-            deviceImg,
-            dialogTitle
-        }
-    },
-})
-
+        res.activeMonitor?.array1.map((array1) => {
+          console.log("asdui1231", array1);
+          //视频转码
+          getvideo({
+            rtsp: array1.src,
+          }).then((res) => {
+            console.log("sadnuq212123s2", res.data);
+            // array1.src='http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
+            array1.src = res.data.httpFlv;
+          });
+        });
+      });
+
+      //开启物联网统计数据定时刷新
+      startdeviceInterval();
+
+      // setTimeout(() => {
+      //     console.log('处理后监控视频数据===',carouselData.value);
+      // }, 2000);
+    };
+
+    // 定时刷新物联网统计数据
+
+    let deviceInterval = ref(null);
+    const startdeviceInterval = () => {
+      //清除物联网统计数据刷新定时器
+      clearTimeout(deviceInterval.value);
+      deviceInterval.value = setInterval(() => {
+        getDeviceData();
+      }, 5000);
+    };
+
+    onMounted(() => {
+      getDeviceData();
+    });
+
+    onBeforeUnmount(() => {
+      //清除物联网统计数据刷新定时器
+      clearTimeout(deviceInterval.value);
+    });
+
+    const d1img = ref("./img/d1_1.png");
+    const d12img = ref("./img/d1_2.png");
+    const d2img = ref("./img/d2.png");
+    const d3img = ref("./img/d3.png");
+    const deviceImg = ref("./img/");
+    const frame = ref("./img/frame.png");
+
+    return {
+      interDevice,
+      videoData,
+      onPlay,
+      videoDialog,
+      lookVideo,
+      carouselData,
+      equipmentTotal,
+      d1img,
+      d12img,
+      d2img,
+      d3img,
+      deviceImg,
+      dialogTitle,
+      startdeviceInterval,
+      frame
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-@import '../assets/css/right.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__header {
+    height: 49px;
+    line-height: 49px;
+    padding: 0;
+    background-color: #1b67d9;
+    margin-right: 0;
+
+    .el-dialog__title {
+      color: #fff;
+      font-family: Inter;
     }
 
-    .el-dialog__body {
-        padding: 0 !important;
-    }
+    .el-dialog__headerbtn {
+      top: 0px;
 
+      i {
+        color: #fff;
+        font-size: 20px;
+        font-weight: bold;
+      }
+    }
+  }
 
+  .el-dialog__body {
+    padding: 0 !important;
+  }
 }
 </style>