Skip to content

C
confucius
Commit 2f7789bb authored by 罗超's avatar 罗超
Browse files
Options

匹配教室终端

parent 5b763858
Hide whitespace changes
Inline Side-by-side
Showing with 323 additions and 350 deletions
src/components/work/index.vue
View file @ 2f7789bb
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
<div class="col q-pt-md q-pr-md"> <div class="col q-pt-md q-pr-md">
<!-- <div class="row work_Top"> <!-- <div class="row work_Top">
<div class="text-h6 col"></div> <div class="text-h6 col"></div>
</div> --> </div> -->
<q-btn-group <q-btn-group
outline outline
......
src/pages/classroom/Scheduling.vue
View file @ 2f7789bb
...@@ -100,23 +100,13 @@ ...@@ -100,23 +100,13 @@
<q-dialog v-model="showVideo" @hide="clearVideo"> <q-dialog v-model="showVideo" @hide="clearVideo">
<q-card <q-card
class="my-card" class="my-card"
style="width:60vw !important;max-width:60vw !important;max-height:unset !important;" style="width:64vw !important;max-width:64vw !important;max-height:32vw !important;height:32vw !important;"
flat flat
> >
<!-- <q-card-section> <div
<div class="text-h6" v-if="currentRoom"> id="player-con"
{{ currentRoom.RoomName }} style="width:100%;height:100%;overflow:hidden;"
</div> ></div>
</q-card-section> -->
<q-card-section>
<video
id="my_video"
class="video-js vjs-default-skin"
controls
preload
v-if="showVideo"
></video>
</q-card-section>
</q-card> </q-card>
</q-dialog> </q-dialog>
</div> </div>
...@@ -125,8 +115,6 @@ ...@@ -125,8 +115,6 @@
<script> <script>
import { getUseClassRoomList } from "../../api/classroom/index"; import { getUseClassRoomList } from "../../api/classroom/index";
import * as signalR from "@aspnet/signalr"; import * as signalR from "@aspnet/signalr";
import videojs from "video.js";
import "videojs-contrib-hls";
export default { export default {
meta: { meta: {
title: "教室状态" title: "教室状态"
...@@ -139,6 +127,7 @@ export default { ...@@ -139,6 +127,7 @@ export default {
videoObj: null, videoObj: null,
currentRoom: null, currentRoom: null,
queryStatus: 0, queryStatus: 0,
player: null,
connection: "", //signalr连接 connection: "", //signalr连接
roomStatusList: [] //返回消息 roomStatusList: [] //返回消息
}; };
...@@ -174,31 +163,36 @@ export default { ...@@ -174,31 +163,36 @@ export default {
methods: { methods: {
changeViewStatusHandler() {}, changeViewStatusHandler() {},
clearVideo() { clearVideo() {
this.videoObj.dispose(); this.player.stop();
this.player.dispose();
this.showVideo = false; this.showVideo = false;
}, },
openVideo(item) { openVideo(item) {
this.showVideo = true; this.showVideo = true;
this.currentRoom = item; this.currentRoom = item;
let url = `http://47.96.12.235:5000/live/${item.RoomId}.m3u8`;
this.$nextTick(() => { this.$nextTick(() => {
this.videoObj = videojs("my_video", { this.initPlayer(url);
controls: true, //是否显示播放器控件
autoplay: true, //是否自动播放
sources: [
{
type: "application/x-mpegURL",
src: `http://47.96.12.235:5000/live/${item.RoomId}.m3u8`
}
]
});
this.videoObj.play();
setTimeout(() => {
document
.getElementById("my_video_html5_api")
.setAttribute("controls", "controls");
}, 2000);
}); });
}, },
initPlayer(url) {
this.player = new Aliplayer(
{
id: "player-con",
source: url,
width: "100%",
height: "100%",
autoplay: true,
isLive: true,
rePlay: false,
playsinline: true,
preload: true,
controlBarVisibility: "hover",
useH5Prism: true
},
function(player) {}
);
},
changeStatus() { changeStatus() {
this.initStatus(); this.initStatus();
if (this.roomStatusList && this.roomStatusList.length > 0) { if (this.roomStatusList && this.roomStatusList.length > 0) {
...@@ -300,23 +294,4 @@ export default { ...@@ -300,23 +294,4 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.video-js div,
.video-js button {
display: none !important;
}
.video-js {
width: 100%;
}
.video-js video {
width: 100%;
}
.video-js .no-video {
display: flex;
height: 100%;
font-size: 14px;
text-align: center;
justify-content: center;
align-items: center;
background: #000;
}
</style> </style>
src/pages/classroom/courseInfo.vue
View file @ 2f7789bb
<style scoped> <style scoped>
#player-con{ #player-con {
width: 100%; width: 100%;
height: 500px; height: 500px;
background-color: #eee; background-color: #eee;
} }
.no-video{ .no-video {
width: 800px; width: 800px;
height: 450px; height: 450px;
margin: 0 auto; margin: 0 auto;
background-color: #000; background-color: #000;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content:center; justify-content: center;
color: #fff; color: #fff;
font-size: 30px; font-size: 30px;
} }
.title{ .title {
color: #000000; color: #000000;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
margin-bottom: 20px; margin-bottom: 20px;
} }
.scheduInfo { .scheduInfo {
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 15px; padding: 15px;
background-color: #f2f4f7; background-color: #f2f4f7;
overflow: hidden; overflow: hidden;
} }
.scheduInfo .schedu_left {
width: 248px;
flex: 0 0 auto;
position: relative;
background-image: url(../../assets/images/sched_bg.png);
background-repeat: no-repeat;
background-size: 100% auto;
height: 100%;
}
.scheduInfo .okr-menu-active {
color: var(--q-color-primary);
font-weight: bold;
background: #ecf1ff;
}
.mySched { .scheduInfo .schedu_left {
border-radius: 8px; width: 248px;
overflow: hidden; flex: 0 0 auto;
height: 100%; position: relative;
background-color: #fff; background-image: url(../../assets/images/sched_bg.png);
} background-repeat: no-repeat;
background-size: 100% auto;
height: 100%;
}
.schedu_ImgDiv { .scheduInfo .okr-menu-active {
width: 68px; color: var(--q-color-primary);
height: 68px; font-weight: bold;
border-radius: 20px; background: #ecf1ff;
overflow: hidden; }
margin: 75px auto 0;
}
.schedu_ImgDiv img { .mySched {
width: 100%; border-radius: 8px;
height: 100%; overflow: hidden;
} height: 100%;
background-color: #fff;
}
.schedu_Name { .schedu_ImgDiv {
color: #fff; width: 68px;
font-size: 16px; height: 68px;
margin-top: 26px; border-radius: 20px;
text-align: center; overflow: hidden;
} margin: 75px auto 0;
}
.schedu_Status { .schedu_ImgDiv img {
font-size: 12px; width: 100%;
color: #fff; height: 100%;
text-align: center; }
margin-top: 15px;
}
.schedu_st { .schedu_Name {
display: inline-block; color: #fff;
width: 10px; font-size: 16px;
height: 10px; margin-top: 26px;
border-radius: 50%; text-align: center;
margin-right: 5px; }
position: relative;
top: 1px;
}
.zbz { .schedu_Status {
background-color: #00DB4E; font-size: 12px;
} color: #fff;
text-align: center;
margin-top: 15px;
}
.xxz { .schedu_st {
background-color: #DBDBDB; display: inline-block;
} width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
position: relative;
top: 1px;
}
.wdk { .zbz {
background-color: #FE4475; background-color: #00db4e;
} }
.clockon_Duty { .xxz {
width: 120px; background-color: #dbdbdb;
height: 34px; }
background: linear-gradient(90deg, #00BDD3, #00D761);
border-radius: 10px;
margin: 100px auto 24px;
text-align: center;
line-height: 31px;
color: #fff;
font-size: 14px;
cursor: pointer;
}
.sche_daka { .wdk {
font-size: 18px; background-color: #fe4475;
position: relative; }
left: 5px;
top: 2px;
}
.schedu_jiaojie { .clockon_Duty {
width: 120px; width: 120px;
height: 34px; height: 34px;
line-height: 34px; background: linear-gradient(90deg, #00bdd3, #00d761);
text-align: center; border-radius: 10px;
border-radius: 10px; margin: 100px auto 24px;
border: 1px solid #91AEFF; text-align: center;
color: #C4D4FF; line-height: 31px;
font-size: 14px; color: #fff;
margin: auto; font-size: 14px;
cursor: pointer; cursor: pointer;
} }
.scheInfo_rightTop { .sche_daka {
width: 100%; font-size: 18px;
/* height: 80px; */ position: relative;
padding: 20px 0; left: 5px;
background-color: #fff; top: 2px;
} }
.schScroll { .schedu_jiaojie {
background-color: #F6F8FA; width: 120px;
} height: 34px;
line-height: 34px;
text-align: center;
border-radius: 10px;
border: 1px solid #91aeff;
color: #c4d4ff;
font-size: 14px;
margin: auto;
cursor: pointer;
}
.scheInfo_Topflex { .scheInfo_rightTop {
display: flex; width: 100%;
/* width: 90%; */ /* height: 80px; */
/* height: 80px; */ padding: 20px 0;
align-items: center; background-color: #fff;
} }
.Sctop_Color { .schScroll {
font-size: 18px; background-color: #f6f8fa;
color: #000000; }
width: 246px;
text-align: center;
}
.Scotop_little { .scheInfo_Topflex {
color: #AAAAAA; display: flex;
font-size: 14px; /* width: 90%; */
margin-right: 15px; /* height: 80px; */
display: inline-block; align-items: center;
text-align: right; }
width: 60px;
}
.Scdu_benci::after { .Sctop_Color {
content: ""; font-size: 18px;
position: absolute; color: #000000;
height: 29px; width: 246px;
width: 2px; text-align: center;
background: #EBEBEB; }
right: 0;
}
.sche_mid { .Scotop_little {
display: flex; color: #aaaaaa;
width: 100%; font-size: 14px;
justify-content: space-between; margin-right: 15px;
} display: inline-block;
text-align: right;
width: 60px;
}
.sche_midList { .Scdu_benci::after {
width: 31.6%; content: "";
height: 300px; position: absolute;
background: #fff; height: 29px;
border-radius: 16px; width: 2px;
border: 1px solid #EBEBEB; background: #ebebeb;
box-shadow: 0px 1px 1px 0px #E4E7FB; right: 0;
overflow: hidden; }
font-family: 'MicrosoftYaHei';
position: relative;
}
.Sche_Bottom { .sche_mid {
margin: 26px 40px 0 40px; display: flex;
} width: 100%;
justify-content: space-between;
}
.scheList_TOP { .sche_midList {
width: 100%; width: 31.6%;
height: 107px; height: 300px;
border-radius: 16px; background: #fff;
overflow: hidden; border-radius: 16px;
position: relative; border: 1px solid #ebebeb;
} box-shadow: 0px 1px 1px 0px #e4e7fb;
overflow: hidden;
font-family: "MicrosoftYaHei";
position: relative;
}
.scheList_TOP img { .Sche_Bottom {
width: 100%; margin: 26px 40px 0 40px;
height: 100%; }
}
.word_sche { .scheList_TOP {
color: #fff; width: 100%;
font-size: 20px; height: 107px;
position: absolute; border-radius: 16px;
top: 25px; overflow: hidden;
left: 32px; position: relative;
} }
.word_scheNumber { .scheList_TOP img {
display: inline-block; width: 100%;
width: 36px; height: 100%;
height: 36px; }
color: #fff;
background-color: #FE4475;
position: absolute;
top: 30px;
left: 130px;
text-align: center;
line-height: 36px;
border-radius: 8px;
font-size: 25px;
}
.scheList_Bottom { .word_sche {
font-size: 14px; color: #fff;
color: #000000; font-size: 20px;
height: 46px; position: absolute;
padding-bottom: 10px; top: 25px;
border-bottom: 1px solid #F3F3F3; left: 32px;
} }
.sche_Dian { .word_scheNumber {
display: inline-block; display: inline-block;
width: 6px; width: 36px;
height: 6px; height: 36px;
background-color: #6D97FF; color: #fff;
border-radius: 50%; background-color: #fe4475;
margin-right: 10px; position: absolute;
} top: 30px;
left: 130px;
text-align: center;
line-height: 36px;
border-radius: 8px;
font-size: 25px;
}
.schScroll::-webkit-scrollbar { .scheList_Bottom {
display: none; font-size: 14px;
} color: #000000;
height: 46px;
padding-bottom: 10px;
border-bottom: 1px solid #f3f3f3;
}
.Sch_MainColor { .sche_Dian {
font-size: 18px; display: inline-block;
color: #000000; width: 6px;
height: 6px;
background-color: #6d97ff;
border-radius: 50%;
margin-right: 10px;
}
} .schScroll::-webkit-scrollbar {
display: none;
}
.Sch_MainColor {
font-size: 18px;
color: #000000;
}
</style> </style>
<template> <template>
...@@ -270,90 +268,90 @@ ...@@ -270,90 +268,90 @@
<div class="col scroll schScroll"> <div class="col scroll schScroll">
<schedulHead :dataList="dataList"></schedulHead> <schedulHead :dataList="dataList"></schedulHead>
<div class="Sche_Bottom"> <div class="Sche_Bottom">
<div class="title">课程录像</div> <div class="title">课程录像</div>
<div class="no-video" v-if="!dataList.VideoUrl">暂无视频</div> <div class="no-video" v-if="!dataList.VideoUrl">暂无视频</div>
<div id="player-con" v-if="dataList.VideoUrl"></div> <div id="player-con" v-if="dataList.VideoUrl"></div>
<schedulVisit :tabledata="dataList.GuestList"></schedulVisit> <schedulVisit :tabledata="dataList.GuestList"></schedulVisit>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {getTimeDetail} from '../../api/classroom/index' import { getTimeDetail } from "../../api/classroom/index";
import {getVideoPlayAuth,getVideoPlayUrl} from '../../api/classroom/video' import { getVideoPlayAuth, getVideoPlayUrl } from "../../api/classroom/video";
import schedulVisit from './components/schedul-visit' import schedulVisit from "./components/schedul-visit";
import schedulHead from './components/schedul-head' import schedulHead from "./components/schedul-head";
export default { export default {
props: {}, props: {},
components: { components: {
schedulVisit, schedulVisit,
schedulHead, schedulHead
}, },
data() { data() {
return { return {
dataList: {}, dataList: {},
player:null, player: null
} };
},
created() {
if (this.$route.query.id) {
this.id = this.$route.query.id;
}
},
mounted() {
this.getdata();
},
methods: {
getdata() {
getTimeDetail({ ID: this.id }).then(res => {
if (res.Code === 1) {
this.dataList = res.Data;
if (res.Data.VideoUrl) {
this.getAuth(res.Data.VideoUrl);
// this.$nextTick(() => {
// this.initPlayer(res.Data.VideoUrl);
// });
}
}
});
}, },
created() { //初始化视频播放器
if (this.$route.query.id) { initPlayer(url, cover, auth) {
this.id = this.$route.query.id; this.player = new Aliplayer(
} {
id: "player-con",
source: url,
width: "100%",
height: "500px",
autoplay: false,
isLive: false,
rePlay: false,
playsinline: true,
preload: true,
controlBarVisibility: "hover",
useH5Prism: true,
cover: cover,
playauth: auth
},
function(player) {}
);
}, },
mounted(){ getAuth(url) {
this.getdata(); getVideoPlayAuth({ strVid: url }).then(res => {
if (res.Code === 1 && res.Data.PlayAuth) {
this.getUrl(url, res.Data.PlayAuth);
}
});
}, },
methods: { getUrl(url, auth) {
getdata(){ getVideoPlayUrl({ strVid: url }).then(res => {
getTimeDetail({ID:this.id}).then(res=>{ if (res.Code === 1) {
if(res.Code===1){ this.initPlayer(res.Data.URL, res.Data.VideoImg, auth);
this.dataList=res.Data }
if(res.Data.VideoUrl){ });
this.getAuth(res.Data.VideoUrl) }
} }
} };
})
},
//初始化视频播放器
initPlayer(url,cover,auth){
this.player = new Aliplayer({
"id": "player-con",
"source": url,
"width": "100%",
"height": "500px",
"autoplay": true,
"isLive": false,
"rePlay": false,
"playsinline": true,
"preload": true,
"controlBarVisibility": "hover",
"useH5Prism": true,
"cover":cover,
"playauth":auth,
}, function (player) {
}
);
},
getAuth(url){
getVideoPlayAuth({strVid:url}).then(res=>{
if(res.Code===1&&res.Data.PlayAuth){
this.getUrl(url,res.Data.PlayAuth)
}
})
},
getUrl(url,auth){
getVideoPlayUrl({strVid:url}).then(res=>{
if(res.Code===1){
this.initPlayer(res.Data.URL,res.Data.VideoImg,auth)
}
})
}
},
}
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment