微调样式

src/assets/css/left.scss

@@ -2,8 +2,8 @@
 .left {
      position: absolute;
      width: 412px;
-     height: 900px;
-     top: 111px;
+     height: 88vh;
+     top: 10vh;
      z-index: 300;
      flex-shrink: 0;
      border-radius: 2px;

src/assets/css/right.scss

@@ -1,3 +1,18 @@
+::v-deep .el-carousel__indicators{
+    display: none;
+    // width: 100%;
+    // display: flex;
+    // justify-content: center;
+    // transform: translateX(-50%);
+    // height: 20px;
+    // transform: translateY(10%);
+
+}
+::v-deep .el-carousel__arrow{
+    // display: none;
+    display: block;
+}
+
 // 通用标题
 .title {
     width: 380px;
@@ -28,8 +43,8 @@
 .right {
     position: absolute;
     width: 412px;
-    height: 900px;
-    top: 111px;
+    height: 80vh;
+    top: 10vh;
     z-index: 300;
     flex-shrink: 0;
     border-radius: 2px;
@@ -43,7 +58,7 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    height: 900px;
+    height: 88vh;
     overflow: hidden;
     padding: 11px 10px 15px 10px;
 

src/components/UeVideo.vue

@@ -1,6 +1,7 @@
 
 <template>
-  <div ref="video" id="player"></div>
+  <!-- <div  ref="video" id="player"></div> -->
+  <div style="background-color: rgba(36, 97, 72, 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/right.vue

@@ -66,8 +66,11 @@
                         <div class="interactclass">
 
                             <div class="room" v-for="(item, index) in item.activeMonitor.array" :key="index">
-                                <span>{{ item.title }}</span>
-                                <img :src="deviceImg + 'rb2.png'" alt="" @click="lookVideo(item)">
+                                <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>
                             </div>
                         </div>
 
@@ -75,7 +78,9 @@
                         <div class="interactclass">
                             <div class="room" v-for="(item, index) in item.activeMonitor.array1" :key="index">
                                 <span>{{ item.title }}</span>
-                                <img :src="deviceImg + 'rb2.png'" alt="" @click="lookVideo(item.src)">
+                                <div @click="lookVideo(item.src)">
+                                    <videoPlay  v-bind="videoData" />
+                                </div>
                             </div>
                         </div>
                     </el-carousel-item>
@@ -88,6 +93,7 @@
     <!-- 视频播放弹框 -->
     <el-dialog class="videoDialog" v-model="videoDialog" :title="dialogTitle" width="60%" align="center" top="4%">
         <videoPlay v-bind="videoData" />
+
         <!-- {{ videoData.src }} -->
     </el-dialog>
 </template>
@@ -98,7 +104,7 @@ 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 } from '../request/api';
+import { getDevice, getVideoUrl,getvideo } from '../request/api';
 
 
 export default ({
@@ -145,6 +151,7 @@ export default ({
             console.log("点击了播放视频", 12312312, "播放路径", item)
             getVideoUrl({ "rtsp": item.src }).then((res) => {
                 console.log("视频处理", res);
+                console.log("视频处理2", res.data.httpFlv);
 
                 videoData.src = res.data.httpFlv
             })
@@ -164,6 +171,15 @@ export default ({
 
         //获取页面数据
         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) {
@@ -175,7 +191,10 @@ export default ({
             //截取数组前6项
             interDevice.value = category.slice(0,6);
             // 互动教室
-            carouselData.value = monitor
+            carouselData.value = monitor.slice(0,5)
+
+            console.log('处理监控视频数据===',monitor).slice(0,1);
+
             //物联设备统计
             equipmentTotal.value = status
 

src/request/api.js

@@ -13,6 +13,9 @@ export const getClass = () => service.get("/wisdomClass/classroomStatistic")
 
 export const getDevice = () => service.get("/wisdomClass/deviceStatistic")
 
+//视频转码
+export const getvideo = (data) => service.post("/camera/getUrl",data)
+
 
 export const getClassDetail = (deviceCode) => service.get(`/wisdomClass/deviceDetail/${deviceCode}`)