调整样式

package-lock.json

@@ -679,9 +679,9 @@
       }
     },
     "hls.js": {
-      "version": "1.4.10",
-      "resolved": "https://registry.npmmirror.com/hls.js/-/hls.js-1.4.10.tgz",
-      "integrity": "sha512-wAVSj4Fm2MqOHy5+BlYnlKxXvJlv5IuZHjlzHu18QmjRzSDFQiUDWdHs5+NsFMQrgKEBwuWDcyvaMC9dUzJ5Uw=="
+      "version": "1.4.12",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.4.12.tgz",
+      "integrity": "sha512-1RBpx2VihibzE3WE9kGoVCtrhhDWTzydzElk/kyRbEOLnb1WIE+3ZabM/L8BqKFTCL3pUy4QzhXgD1Q6Igr1JA=="
     },
     "immutable": {
       "version": "4.3.2",
@@ -1033,7 +1033,7 @@
     },
     "throttle-debounce": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
       "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
     },
     "to-regex-range": {
@@ -1220,7 +1220,7 @@
     },
     "vue3-video-play": {
       "version": "1.3.1-beta.6",
-      "resolved": "https://registry.npmmirror.com/vue3-video-play/-/vue3-video-play-1.3.1-beta.6.tgz",
+      "resolved": "https://registry.npmjs.org/vue3-video-play/-/vue3-video-play-1.3.1-beta.6.tgz",
       "integrity": "sha512-Olrx2/LNAds7fuor/yX9ZKT9sOcwcfTt2g2YbbCrEaAmZ5Tb0hwBr5z+/CoLwELzzRzXCHPmWWoT0Wm5W/Nwpw==",
       "requires": {
         "hls.js": "^1.0.10",

src/assets/css/left.scss

@@ -2,8 +2,8 @@
 .left {
      position: absolute;
      width: 412px;
-     height: 88vh;
-     top: 10vh;
+     height: 86vh;
+     top: 11.5vh;
      z-index: 300;
      flex-shrink: 0;
      border-radius: 2px;
@@ -12,7 +12,7 @@
      color: #FFF;
      font-size: 14px;
      overflow: hidden;
-     left: 30px;
+     left: 25px;
      display: flex;
      flex-direction: column;
      padding: 11px 10px 15px 10px; //教室分类统计
@@ -20,7 +20,7 @@
      .left_top {
          box-sizing: border-box;
          width: 392px;
-         height: 261px;
+         height: 250px;
          //  border: 2px solid darkcyan;
 
          .list {
@@ -65,7 +65,7 @@
          box-sizing: border-box;
          height: 219px;
          width: 392px;
-         height: 219px;
+         height: 208px;
          //  border: 2px solid #5F7BDC;
 
          .count {
@@ -73,7 +73,7 @@
              flex-direction: column;
              align-items: center;
              justify-content: space-around;
-             height: 108px;
+             height: 100%;
              // border: 1px solid sandybrown;
              //  width: 93px;
              box-sizing: border-box;
@@ -147,7 +147,7 @@
          }
 
          .title {
-             margin-bottom: 20px;
+             margin-bottom: 5px;
          }
 
 

src/assets/css/right.scss

@@ -8,11 +8,29 @@
     // transform: translateY(10%);
 
 }
+.vue3VideoPlay {
+    pointer-events: none;
+}
 ::v-deep .el-carousel__arrow{
     // display: none;
     display: block;
 }
 
+::v-deep  .el-carousel__arrow--left{
+
+    left: -7px;
+    top: 54%;
+}
+::v-deep  .el-carousel__arrow--right{
+
+    right: -7px;
+    top: 54%;
+}
+::v-deep .el-carousel {
+
+    --el-carousel-arrow-size:0.1375rem
+}
+
 // 通用标题
 .title {
     width: 380px;
@@ -37,14 +55,15 @@
     width: 100%;
     overflow: hidden;
     justify-content: space-evenly;
+    margin-top: 2.5vh;
 
 }
 
 .right {
     position: absolute;
     width: 412px;
-    height: 80vh;
-    top: 10vh;
+
+    top: 11.5vh;
     z-index: 300;
     flex-shrink: 0;
     border-radius: 2px;
@@ -53,12 +72,12 @@
     color: #FFF;
     font-size: 14px;
     // overflow: hidden;
-    right: 20px;
+    right: 25px;
     // border: 2px solid salmon;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    height: 88vh;
+    height: 86vh;
     overflow: hidden;
     padding: 11px 10px 15px 10px;
 
@@ -67,7 +86,7 @@
 // 物联设备统计
 .right_top {
     // border: 3px solid darkcyan;
-    height: 267px;
+    height: 30%;
     // border: 2px solid darkcyan;
     box-sizing: border-box;
 
@@ -78,7 +97,7 @@
         align-items: center;
         width: 134px;
         height: 175px;
-        margin: 30px 0 20px 10px;
+        align-content: center;
 
         img {
             width: 87px;
@@ -171,17 +190,18 @@
 
 // 物联设备类型统计
 .right_center {
-    height: 314px;
+    height: 33%;
     // border: 3px solid darkcyan;
     box-sizing: border-box;
-    overflow: hidden;
+    // overflow: hidden;
 
     .contentwrap {
         display: flex;
         flex-wrap: wrap;
-        margin: 10px 0;
-        height: 222px;
+
+        height: 90%;
         overflow: hidden;
+        align-content: center;
         // border: 2px solid sandybrown;
 
         .count {
@@ -202,45 +222,56 @@
     flex: 1;
     box-sizing: border-box;
     // border: 3px solid darkcyan;
-    // height: 332px;
+    height: 33%;
 
     .monitorContent {
+        margin-top: -6px;
 
         .monitor {
             box-sizing: border-box;
             display: flex;
             flex-direction: column;
+            
             background: rgba(0, 0, 0, 0.2);
             padding: 10px;
             width: 364px;
-            height: 268px;
-            margin: 0 auto;
-            margin-top: 10px;
-            // padding-bottom: 0;
+            height: 25vh;
+            margin: 2vh auto;
+    
+
 
             // border: 1px solid red;
 
             .interactclass {
                 display: flex;
-                justify-content: space-around;
+                justify-content: space-evenly;
 
                 .room {
+
+           
                     position: relative;
-                    width: 170px;
-                    height: 94px;
+                    width: 155px;
+                    height: 8vh;
+                    padding: 0;
+                    margin: 0;
                     // background: saddlebrown;
-                    margin-top: 10px;
+                    // margin-top: 10px;
                     cursor: pointer;
 
-                    &:first-child {
-                        margin-right: 10px;
-                    }
+                    // &:first-child {
+                    //     margin-right: 10px;
+                    // }
 
                     span {
                         position: absolute;
                         top: 0;
-                        left: 10px;
+                
+                        font-size: 11px;
+                    
+                        text-indent: 5px;
                         width: 80px;
+                        height: 18px;
+                        line-height: 17px;
                         background-color: rgba(0, 0, 0, 0.38);
                     }
                 }

src/components/UeVideo.vue

@@ -1,7 +1,7 @@
 
 <template>
   <!-- <div  ref="video" id="player"></div> -->
-  <div style="background-color: rgba(36, 97, 72, 0.667); width: 100vw;height: 100vh;position: absolute;" ></div>
+  <div style="background-color: rgba(156, 167, 84, 0.667); width: 100vw;height: 100vh;position: absolute;" ></div>
   <Login :class="loginShow ? '' : 'hidden'"></Login>
   <home></home>
   <!-- <div @click="toUE" style="position: absolute;top: 5%; left: 50%;background-color: darkcyan;z-index: 200">向UE发信息</div> -->

src/components/left.vue

@@ -48,12 +48,13 @@
                         <li>到课率</li>
                         <li>操作</li>
                     </ul>
-                    <div ref="testMain" style="height: 310px;overflow: scroll;" class="scroll">
+                    <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 }}</li>
+                            <li >{{ item.people || '—'}}</li>
+                            <li >{{ item.percentage ?item.percentage: '—' }}</li>
+                      
                             <li>
                                 <el-button size="small" class="look" @click.prevent="handleRoom(item)">查看</el-button>
                             </li>

src/components/right.vue

@@ -62,24 +62,53 @@
             <div class="monitorContent">
                 <el-carousel class="monitor">
                     <el-carousel-item v-for="(item, index) in carouselData" :key="index">
-                        <p>{{ item.activeMonitor.title }}</p>
+                        <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 @click="lookVideo(item.src)">
-                                    <videoPlay  v-bind="videoData" />
+                                <div  style="background-color: aquamarine;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>
 
-                        <p style="margin-top: 5px;">{{ item.activeMonitor.title1 }}</p>
+                        <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>{{ item.title }}</span>
-                                <div @click="lookVideo(item.src)">
-                                    <videoPlay  v-bind="videoData" />
+                                <span  style="z-index: 99;">{{ item.title }}</span>
+                                <!-- <br>
+                                <div>
+                                    {{ item.src }}
+                                </div> -->
+                                <div style="background-color: aquamarine;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"
+                                   />
+                                    </div>
+                            
                                 </div>
                             </div>
                         </div>
@@ -91,7 +120,7 @@
     </el-aside>
 
     <!-- 视频播放弹框 -->
-    <el-dialog class="videoDialog" v-model="videoDialog" :title="dialogTitle" width="60%" align="center" top="4%">
+    <el-dialog class="videoDialog" v-model="videoDialog" :title="dialogTitle" width="54.5%" align="center" top="10%">
         <videoPlay v-bind="videoData" />
 
         <!-- {{ videoData.src }} -->
@@ -99,17 +128,17 @@
 </template>
 
 <script >
-import { reactive, onMounted, ref, } from 'vue';
+import { reactive, onMounted, ref, nextTick } 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 CircleProgress from './CircleProgress.vue';
 import { getDevice, getVideoUrl,getvideo } from '../request/api';
 
 
 export default ({
     name: 'Histogram',
-    components: { videoPlay, ElCarousel, ElCarouselItem, CircleProgress },
+    components: { videoPlay, ElCarousel, ElCarouselItem,  },
     setup() {
         // 视频数据
         const videoData = reactive({
@@ -143,18 +172,21 @@ export default ({
         });
         //视频播放弹框
         const videoDialog = ref(false)
+
+        // const  videoshow = ref(true)
         const dialogTitle = ref("")
         // 播放视频
         const lookVideo = function (item) {
             videoDialog.value = true;
             dialogTitle.value = item.title
+            videoData.src = item.scr
             console.log("点击了播放视频", 12312312, "播放路径", item)
-            getVideoUrl({ "rtsp": item.src }).then((res) => {
-                console.log("视频处理", res);
-                console.log("视频处理2", res.data.httpFlv);
+            // getVideoUrl({ "rtsp": item.src }).then((res) => {
+            //     console.log("视频处理", res);
+            //     console.log("视频处理2", res.data.httpFlv);
 
-                videoData.src = res.data.httpFlv
-            })
+            //     videoData.src = res.data.httpFlv
+            // })
             // videoData.src = src
 
         }
@@ -174,11 +206,11 @@ export default ({
 
 
             //视频转码
-            getvideo({
-             "rtsp": "rtsp://admin:admin@10.116.255.67:554",
-            }).then((res)=>{
-                console.log('sadnuq21',res);
-            })
+            // getvideo({
+            //  "rtsp": "rtsp://admin:admin@10.116.255.67:554",
+            // }).then((res)=>{
+            //     console.log('sadnuq21',res);
+            // })
 
             let res = await getDevice()
             console.log('s12312123',res);
@@ -191,9 +223,49 @@ export default ({
             //截取数组前6项
             interDevice.value = category.slice(0,6);
             // 互动教室
-            carouselData.value = monitor.slice(0,5)
+            carouselData.value = monitor
+
+            console.log('处理监控视频数据===',monitor);
+
+            monitor.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('sadnuq21',res.data.httpFlv);
+                        array.src='http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
+                    })
+
+                    
+                })
+                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'
+                    })
+                })
+
+
+            })
+
+            setTimeout(() => {
+                console.log('sado2');
+                // videoshow=true
+                // console.log('sadhui21',videoshow);
+            }, 3000);
 
-            console.log('处理监控视频数据===',monitor).slice(0,1);
+                setTimeout(() => {
+                    console.log('处理后监控视频数据===',monitor);
+                }, 2000);
 
             //物联设备统计
             equipmentTotal.value = status

src/main.js

@@ -5,8 +5,14 @@ import 'amfe-flexible'
 // import { ElMessage } from 'element-plus'
 import 'element-plus/dist/index.css'
 
+import vue3videoPlay from 'vue3-video-play' // 引入组件
+import 'vue3-video-play/dist/style.css' // 引入css
+
+
+
 const app = createApp(App)
 console.log("全局的app", app)
+app.use(vue3videoPlay)
 // app.config.globalProperties.$message = ElMessage;
 // app.use(ElMessage)
 app.mount("#app")