去掉进度条，设置定时刷新数据

public/config.js

@@ -9,7 +9,7 @@
 window.g = {
     // 获取数据请求地址
     // BASE_API: "https://weizhi.huanghuai.edu.cn/yyzioc-server/",//prod
-    BASE_API: "https://782y5867q3.vicp.fun/ioc-server/",//dev
+    BASE_API: "https://weizhi.huanghuai.edu.cn/jsioc-server/",//dev
     // BASE_API: "https://test.lqkj.top//cmioc3-server",
 
     // BASE_API: "http://192.168.4.219:12397/ioc-server",

public/ueapp.js

@@ -486,7 +486,7 @@ function addResponseEventListener(name, listener) {
 function removeResponseEventListener(name) {
     // console.log('ssss',responseEventListeners);
     // responseEventListeners.set(name, function () { });
-    
+
     responseEventListeners.remove(name);
 }
 
@@ -776,7 +776,7 @@ function onWebRtcAnswer(webRTCData) {
 
         statsText += `<div>Duration: ${timeFormat.format(runTimeHours)}:${timeFormat.format(runTimeMinutes)}:${timeFormat.format(runTimeSeconds)}</div>`;
         statsText += `<div>Video Resolution: ${aggregatedStats.hasOwnProperty('frameWidth') && aggregatedStats.frameWidth && aggregatedStats.hasOwnProperty('frameHeight') && aggregatedStats.frameHeight ?
-                aggregatedStats.frameWidth + 'x' + aggregatedStats.frameHeight : 'Chrome only'
+            aggregatedStats.frameWidth + 'x' + aggregatedStats.frameHeight : 'Chrome only'
             }</div>`;
         statsText += `<div>Received (${receivedBytesMeasurement}): ${numberFormat.format(receivedBytes)}</div>`;
         statsText += `<div>Frames Decoded: ${aggregatedStats.hasOwnProperty('framesDecoded') ? numberFormat.format(aggregatedStats.framesDecoded) : 'Chrome only'}</div>`;
@@ -933,7 +933,7 @@ function resizePlayerStyleToActualSize(playerElement) {
         styleTop = (Top > 0) ? Top : 0;
         styleLeft = (Left > 0) ? Left : 0;
         //Video is now 100% of the playerElement, so set the playerElement style
-        playerElement.style = "top: " + styleTop + "px; left: " + styleLeft + "px; width: " + styleWidth + "px; height: " + styleHeight + "px; cursor: " + styleCursor + "; " + styleAdditional;
+        playerElement.style = "top: " + styleTop + "px; left: " + styleLeft + "px; width: 100% ; height: 100%; cursor: " + styleCursor + "; " + styleAdditional;
     }
 }
 
@@ -1926,8 +1926,8 @@ function onConfig(config) {
 }
 
 function load(type) {
-    console.log("type",type);
-    
+    console.log("type", type);
+
     if (type == 0) {
         registerHoveringMouseEvents = function () { }
         registerLockedMouseEvents = function () { }

src/components/left.vue

@@ -7,60 +7,34 @@
       <div class="content">
         <div id="myChart"></div>
         <div class="list">
-          <div
-            class="item"
-            v-for="(item, index) in classRoomCount"
-            :key="index"
-            :style="{
-              borderRight:
-                index == 0
-                  ? '2px solid #0BF'
-                  : index == 1
+          <div class="item" v-for="(item, index) in classRoomCount" :key="index" :style="{
+            borderRight:
+              index == 0
+                ? '2px solid #0BF'
+                : index == 1
                   ? '2px solid #00EB7D'
                   : index == 2
-                  ? '2px solid #FB0'
-                  : '',
-            }"
-          >
+                    ? '2px solid #FB0'
+                    : '',
+          }">
             <!-- <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"
-            >
+            <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"
-              />
+                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"
-            >
+            <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"
-              />
+                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"
-            >
+            <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"
-              />
+                fill="#FFBB00" />
             </svg>
             <div class="descr">
               <span>{{ item.name }}</span>
@@ -76,13 +50,8 @@
       </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"
-            :index="index"
-            text-position="bottom"
-          >
+          <CircleProgress :target-value="item.number" :color="item.color" :text="item.text" :index="index"
+            text-position="bottom">
             <img :src="leftimg + item.imgnumber + '.png'" alt="" />
           </CircleProgress>
           <div class="text">{{ item.text }}</div>
@@ -105,36 +74,21 @@
           <div class="free-box">
             <div class="text">
               空闲中：{{ (100 - getPercentage).toFixed(2) || 0 }}%
-              <span class="num"
-                >{{ classRoom.length - occupiedClassroomsCount || 0 }}间</span
-              >
+              <span class="num">{{ classRoom.length - occupiedClassroomsCount || 0 }}间</span>
             </div>
           </div>
         </div>
-        <el-progress
-          :percentage="getPercentage"
-          :show-text="false"
-          color="#1BCEFF"
-        />
+        <el-progress :percentage="getPercentage" :show-text="false" color="#1BCEFF" />
       </div>
       <div class="search-container">
-        <el-input
-          v-model="searchData"
-          clearable
-          placeholder="请输入大楼名称、教室名称"
-        />
+        <el-input v-model="searchData" clearable 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"
-              @command="clickBuildingsropdown"
-              max-height="150"
-              popper-class="popper-class"
-            >
+            <el-dropdown trigger="click" @command="clickBuildingsropdown" max-height="150" popper-class="popper-class">
               <span class="dropdown-name">
                 <div class="cureet-text" :title="cureetBuild">{{ cureetBuild }}</div>
                 <el-icon class="el-icon--right">
@@ -144,20 +98,12 @@
               </span>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item
-                    :command="item.gis_building_code"
-                    v-for="(item, index) in buildings"
-                    :key="index"
-                    >{{ item.building_name }}</el-dropdown-item
-                  >
+                  <el-dropdown-item :command="item.gis_building_code" v-for="(item, index) in buildings" :key="index">{{
+                    item.building_name }}</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
-            <el-dropdown
-              trigger="click"
-              @command="clickCategoryTypedropdown"
-              max-height="150"
-            >
+            <el-dropdown trigger="click" @command="clickCategoryTypedropdown" max-height="150">
               <span class="dropdown-name">
                 {{ category || "全部类型" }}
                 <el-icon>
@@ -166,20 +112,12 @@
               </span>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item
-                    :command="item.category"
-                    v-for="(item, index) in categoryType"
-                    :key="index"
-                    >{{ item.category }}</el-dropdown-item
-                  >
+                  <el-dropdown-item :command="item.category" v-for="(item, index) in categoryType" :key="index">{{
+                    item.category }}</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
-            <el-dropdown
-              trigger="click"
-              @command="clickLeafsdropdown"
-              max-height="150"
-            >
+            <el-dropdown trigger="click" @command="clickLeafsdropdown" max-height="150">
               <span class="dropdown-name">
                 {{ cureetLeaf }}
                 <el-icon>
@@ -188,20 +126,12 @@
               </span>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item
-                    :command="item.leaf"
-                    v-for="(item, index) in leafs"
-                    :key="index"
-                    >{{ item.leaf_name }}</el-dropdown-item
-                  >
+                  <el-dropdown-item :command="item.leaf" v-for="(item, index) in leafs" :key="index">{{ item.leaf_name
+                    }}</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
-            <el-dropdown
-              trigger="click"
-              @command="clickStatusesdropdown"
-              max-height="150"
-            >
+            <el-dropdown trigger="click" @command="clickStatusesdropdown" max-height="150">
               <span class="dropdown-name">
                 {{ cureetStatus }}
                 <el-icon>
@@ -210,12 +140,8 @@
               </span>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item
-                    :command="item.status_code"
-                    v-for="(item, index) in statuses"
-                    :key="index"
-                    >{{ item.status_name }}</el-dropdown-item
-                  >
+                  <el-dropdown-item :command="item.status_code" v-for="(item, index) in statuses" :key="index">{{
+                    item.status_name }}</el-dropdown-item>
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
@@ -227,23 +153,13 @@
           > -->
           <!-- <div v-if="classRoomList.length > 0" style="width: 100%; height: 100%"> -->
           <div class="scroll-container" ref="scrollContainerRef">
-            <div
-              :style="{
-                height: scrollContainerHeight + 'px',
-                overflow: 'hidden',
-                paddingTop: '10px',
-              }"
-              v-if="classRoomList.length > 0"
-            >
-              <scroll
-                :content="classRoomList"
-                class="vue3-seamless-scroll"
-                :hover="true"
-                :wheel="true"
-                direction="top"
-                ref="scrollRef"
-                :mask="false"
-              >
+            <div :style="{
+              height: scrollContainerHeight + 'px',
+              overflow: 'hidden',
+              paddingTop: '10px',
+            }" v-if="classRoomList.length > 0">
+              <scroll :content="classRoomList" class="vue3-seamless-scroll" :hover="true" :wheel="true" direction="top"
+                ref="scrollRef" :mask="false">
                 <template #default="{ item }">
                   <div class="list-item">
                     <div class="class-status-btn-container">
@@ -271,10 +187,7 @@
                           <div v-if="item.actual != null">
                             实到/应到：{{ item.actual }}/{{ item.expected }}
                           </div>
-                          <div
-                            style="margin-left: 8px"
-                            v-if="item.actual != null"
-                          >
+                          <div style="margin-left: 8px" v-if="item.actual != null">
                             到课率：{{
                               (item.actual / item.expected).toFixed(2) * 100 ||
                               0
@@ -292,17 +205,14 @@
               <img :src="noData" alt="" srcset="">
             </div>
           </div>
-         
+
         </div>
         <!-- </div> -->
       </div>
     </div>
   </el-aside>
 
-  <div
-    ref="popoverRef"
-    v-if="roomVisible"
-    style="
+  <div ref="popoverRef" v-if="roomVisible" style="
       background-color: rgba(245, 246, 248, 0.9);
       border-radius: 10px;
       position: absolute;
@@ -311,51 +221,37 @@
       width: 366px;
       z-index: 999;
       transform: translateX(-50%);
-    "
-  >
+    ">
     <div class="model-detail">
-      <span
-        ><span class="title">教室状态: </span>
+      <span><span class="title">教室状态: </span>
         <span :class="classInfo.online ? 'green' : 'red'">{{
           classInfo && classInfo.status
         }}</span>
       </span>
 
-      <span
-        ><span class="title">班级: </span>
+      <span><span class="title">班级: </span>
         <span style="width: 105px; display: inline-flex">{{
           classInfo && classInfo.className
         }}</span>
       </span>
-      <span
-        ><span class="title">课程名称: </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><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 class="title">实到人数: </span>{{ classInfo && classInfo.actual }}</span>
+      <span><span class="title">老师: </span>{{ classInfo && classInfo.teacher }}</span>
     </div>
   </div>
 </template>
 
-<script >
+<script>
 import * as echarts from "echarts";
 import {
   reactive,
@@ -590,12 +486,14 @@ export default {
     };
     window.addEventListener("resize", function () {
       myChart.value.resize();
-      if(scrollContainerHeight.value){
+      if (scrollContainerHeight.value) {
         scrollContainerHeight.value = scrollContainerRef.value.clientHeight;
 
       }
     });
 
+
+
     // 物联设备类型统计
     const interDevice = ref([]);
 
@@ -701,6 +599,15 @@ export default {
       //获取教室列表数据
       getClassRoomList();
       scrollContainerHeight.value = scrollContainerRef.value.clientHeight;
+
+      setInterval(() => {
+        getClassData();
+        //start();
+        // 获取教师下拉选择数据
+        getClassSelections();
+        //获取教室列表数据
+        getClassRoomList();
+      }, 30000);
     });
 
     onBeforeUnmount(() => {
@@ -774,7 +681,7 @@ export default {
     const getPercentage = computed(() => {
       const total = classRoom.value.length;
       const occupied = occupiedClassroomsCount.value;
-      return (((occupied / total) * 100).toFixed(2))=='NaN'?0:(((occupied / total) * 100).toFixed(2)) ;
+      return (((occupied / total) * 100).toFixed(2)) == 'NaN' ? 0 : (((occupied / total) * 100).toFixed(2));
     });
 
     // 获取教师下拉选择
@@ -854,8 +761,8 @@ export default {
       });
       classRoomList.value = [];
       // setTimeout(() => {
-        classRoomList.value = res.data;
-        // scrollRef.value.reset()
+      classRoomList.value = res.data;
+      // scrollRef.value.reset()
       // }, 0);
     };
     let deviceDialog = ref(true);
@@ -922,7 +829,7 @@ export default {
 <style scoped lang="scss">
 @import "../assets/css/left.scss";
 </style>
-<style >
+<style>
 .classpopover {
   .el-popper__arrow {
     top: 196px !important;
@@ -945,27 +852,33 @@ export default {
   border-radius: 4px !important;
 
 }
+
 .el-dropdown-menu {
   background: rgba(1, 18, 35, 0.60) !important;
   border: none !important;
   border-radius: 4px !important;
-  padding: 2px  !important;
+  padding: 2px !important;
 }
+
 .el-dropdown-menu__item {
   color: rgba(255, 255, 255, 0.72);
   border-radius: 4px !important;
 }
+
 .popper__arrow::after {
   background: rgba(255, 255, 255, 0.12);
 }
+
 .el-dropdown-menu__item:not(.is-disabled):hover {
   background: rgba(255, 255, 255, 0.12);
   color: rgba(255, 255, 255, 0.75);
 }
+
 .el-dropdown-menu__item:not(.is-disabled):hover {
   background: rgba(255, 255, 255, 0.12) !important;
   color: #fff !important;
 }
+
 .el-dropdown-menu__item:not(.is-disabled):focus {
   background: rgba(255, 255, 255, 0.12) !important;
   color: #fff !important;
@@ -974,7 +887,8 @@ export default {
 .el-popper__arrow {
   display: none;
 }
-.el-input__inner{
+
+.el-input__inner {
   color: #fff !important;
 }
 </style>

src/components/right.vue

@@ -14,19 +14,13 @@
         <div class="list">
           <div class="item_r">
             <img :src="d2img" alt="" />
-            <div
-              class="percent"
-              style="display: flex; justify-content: space-between"
-            >
+            <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"
-            >
+            <div class="percent" style="display: flex; justify-content: space-between">
               <a>离线</a>
               <a>{{ equipmentTotal.underline }} <span>(个)</span> </a>
             </div>
@@ -41,12 +35,7 @@
       </div>
       <div class="contentwrap">
         <div class="count" v-for="(item, index) in interDevice" :key="index">
-          <countTo
-            :startVal="0"
-            :endVal="item.number"
-            :decimals="0"
-            :duration="3000"
-          ></countTo>
+          <countTo :startVal="0" :endVal="item.number" :decimals="0" :duration="3000"></countTo>
           <img :src="deviceImg + item.icon + '.png'" alt="" />
           <div class="text">{{ item?.text }}</div>
         </div>
@@ -60,130 +49,58 @@
 
       <!-- <div class="monitorContent" :style="{ background: `url(${videoBorder})` }"> -->
       <div class="monitorContent">
-        <img
-          @click="swiperRef.prev()"
-          class="change-left"
-          :src="swiperLeft"
-          alt=""
-          srcset=""
-        />
-        <el-carousel
-          class="swiper-container"
-          ref="swiperRef"
-          :autoplay="false"
-          indicator-position="none"
-          @change="monitorchange"
-          arrow="never"
-        >
+        <img @click="swiperRef.prev()" class="change-left" :src="swiperLeft" alt="" srcset="" />
+        <el-carousel class="swiper-container" ref="swiperRef" :autoplay="false" indicator-position="none"
+          @change="monitorchange" arrow="never">
           <!-- <img src="swiper-left" alt="" srcset=""> -->
 
-          <el-carousel-item
-            v-for="(item, index) in carouselData"
-            :key="index"
-            @click="lookVideo(item)"
-            style="height: 100%"
-          >
+          <el-carousel-item v-for="(item, index) in carouselData" :key="index" @click="lookVideo(item)"
+            style="height: 100%">
             <p style="margin-left: 12px; margin-bottom: 3px; font-size: 14px">
               {{ item.title }}
             </p>
             <div class="video-container" v-if="videoindex == index">
-              <VideoJs
-                style="height: 100%"
-                class="video"
-                :videoSrc="item.src"
-                autoPlay
-              />
+              <VideoJs style="height: 100%" class="video" :videoSrc="item.src" autoPlay />
             </div>
           </el-carousel-item>
         </el-carousel>
-        <img
-          class="video-border"
-          style="height: 100%; width: 100%"
-          :src="videoBorder"
-          alt=""
-          srcset=""
-        />
-        <img
-          @click="swiperRef.next()"
-          class="change-right"
-          :src="swiperRight"
-          alt=""
-          srcset=""
-        />
+        <img class="video-border" style="height: 100%; width: 100%" :src="videoBorder" alt="" srcset="" />
+        <img @click="swiperRef.next()" class="change-right" :src="swiperRight" alt="" srcset="" />
       </div>
     </div>
   </el-aside>
 
   <!-- 视频播放弹框 -->
-  <el-dialog
-    class="videoDialog"
-    v-model="videoDialog"
-    :title="dialogTitle"
-    width="62%"
-    align="center"
-    top="8%"
-    style="z-index: 2015; padding: 0"
-  >
+  <el-dialog class="videoDialog" v-model="videoDialog" :title="dialogTitle" width="62%" align="center" top="8%"
+    style="z-index: 2015; padding: 0">
     <videoPlay v-bind="videoData" />
 
     <!-- {{ videoData.src }} -->
   </el-dialog>
 
-  <el-dialog
-    custom-class="deviceDialog"
-    v-model="deviceDialog"
-    title="设备明细"
-    width="40%"
-    align="left"
-    top="30vh"
-    style="z-index: 2015; background: rgba(0, 0, 0, 0)"
-  >
-    <el-table
-      :data="deviceDetailsList"
-      border
-      height="100%"
-      style="width: 100%; background: rgba(0, 0, 0, 0)"
-    >
-      <el-table-column
-        align="center"
-        type="index"
-        label="序号"
-      ></el-table-column>
-      <el-table-column
-        align="center"
-        prop="name"
-        label="设备名称"
-      ></el-table-column>
+  <el-dialog custom-class="deviceDialog" v-model="deviceDialog" title="设备明细" width="40%" align="left" top="30vh"
+    style="z-index: 2015; background: rgba(0, 0, 0, 0)">
+    <el-table :data="deviceDetailsList" border height="100%" style="width: 100%; background: rgba(0, 0, 0, 0)">
+      <el-table-column align="center" type="index" label="序号"></el-table-column>
+      <el-table-column align="center" prop="name" label="设备名称"></el-table-column>
       <el-table-column align="center" prop="status" label="设备状态">
         <template #default="scope">
-          <div
-            :class="{
-              normal: scope.row.status == '正常',
-              error: scope.row.status == '异常',
-            }"
-          >
+          <div :class="{
+            normal: scope.row.status == '正常',
+            error: scope.row.status == '异常',
+          }">
             <div>{{ scope.row.status }}</div>
           </div>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button type="primary" size="mini" @click="lookDetails(scope.row)"
-            >详情</el-button
-          >
+          <el-button type="primary" size="mini" @click="lookDetails(scope.row)">详情</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <el-dialog
-      custom-class="deviceDetailsDialog"
-      v-model="isShowDeviceDetails"
-      title="详情"
-      width="15%"
-      align="left"
-      top="40vh"
-      style="z-index: 2019; background: rgba(0, 0, 0, 0)"
-      :modal="false"
-    >
+    <el-dialog custom-class="deviceDetailsDialog" v-model="isShowDeviceDetails" title="详情" width="15%" align="left"
+      top="40vh" style="z-index: 2019; background: rgba(0, 0, 0, 0)" :modal="false">
       <div class="details-container">
         <div>设备名称：多媒体设备</div>
         <div>设备状态：<span :style="{ online: true }">在线</span></div>
@@ -195,7 +112,7 @@
   </el-dialog>
 </template>
 
-<script >
+<script>
 import { reactive, onBeforeMount, ref, nextTick, onMounted } from "vue";
 import { ElCarousel, ElCarouselItem } from "element-plus";
 import "vue3-video-play/dist/style.css";
@@ -216,7 +133,14 @@ export default {
     VideoJs,
   },
   setup() {
-    onMounted(() => {});
+    onMounted(() => {
+
+      setInterval(() => {
+        getDeviceData();
+      }, 30000);
+
+
+    });
 
     const data = reactive({
       videoSrc:
@@ -442,7 +366,7 @@ export default {
 <style scoped lang="scss">
 @import "../assets/css/right.scss";
 </style>
-<style lang="scss" >
+<style lang="scss">
 .videoDialog {
   .el-dialog__header {
     height: 49px;
@@ -471,6 +395,7 @@ export default {
     padding: 0 !important;
   }
 }
+
 .deviceDialog {
   border-radius: 4px 4px 0px 0px;
 
@@ -499,16 +424,19 @@ export default {
       }
     }
   }
+
   .el-dialog__body {
     // padding: 10px !important;
     // background-color: rgba(0, 0, 0, 0.5) !important;
     background: rgba(6, 22, 30, 0.48) !important;
-    
 
-    padding:8px 10px;
+
+    padding: 8px 10px;
+
     .el-table {
       --el-table-border-color: #253f48;
       --el-table-row-hover-bg-color: rgba(0, 0, 0, 0.3);
+
       .normal {
         text-align: center;
         /* text/pc/02-55-Regular */
@@ -520,6 +448,7 @@ export default {
         display: flex;
         justify-content: center;
         align-items: center;
+
         div {
           width: 50px;
           height: 26px;
@@ -532,6 +461,7 @@ export default {
           // padding: 4px 6px;
         }
       }
+
       .error {
         text-align: center;
         /* text/pc/02-55-Regular */
@@ -543,6 +473,7 @@ export default {
         display: flex;
         justify-content: center;
         align-items: center;
+
         div {
           width: 50px;
           height: 26px;
@@ -556,18 +487,22 @@ export default {
         }
       }
     }
+
     .el-table th.el-table__cell {
       background: rgba(6, 22, 30, 0.48) !important;
-    
+
     }
+
     .el-table tr {
       background: rgba(6, 22, 30, 0.48) !important;
 
     }
+
     .el-table thead {
       background: rgba(6, 22, 30, 0.48) !important;
 
     }
+
     .el-table td.el-table__cell,
     .el-table th.el-table__cell.is-leaf {
       border-color: #253f48;
@@ -604,6 +539,7 @@ export default {
     padding: 10px !important;
     background: rgba(6, 22, 30, 0.85) !important;
     bortder-radius: 4px !important;
+
     .details-container {
       color: #fff;
 
@@ -625,6 +561,7 @@ export default {
 .el-tag .el-tag--success {
   --el-tag-text-color: #000;
 }
+
 .d-player-video {
   display: flex;
 }