From 95a27fe55990ca151cbe08f99cbeb669b4cb9dd8 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 20 六月 2024 17:07:16 +0800
Subject: [PATCH] fix:修改在线培训
---
vue.config.js | 19 ++-
public/index.html | 35 ++++--
src/views/train/data-list/index.vue | 98 +++++++++++++------
src/views/train/index.vue | 35 +++++-
src/views/meet/index.vue | 49 ++++++---
src/router.js | 13 +-
6 files changed, 170 insertions(+), 79 deletions(-)
diff --git a/public/index.html b/public/index.html
index 6148799..dc077a3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
+
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
@@ -14,13 +15,16 @@
height: 100%;
width: 100%;
}
+
body {
padding: 0;
margin: 0;
- height:100%;
+ height: 100%;
width: 100%;
}
</style>
+
+ <script src='https://ycl.easyblog.vip:8443/external_api.js'></script>
<script src='./admin/components/echarts/echarts.min.js'></script>
<script src='./admin/components/echarts/theme/macarons.js'></script>
@@ -35,19 +39,28 @@
<script>
var _hmt = _hmt || [];
(function () {
- var hm = document.createElement('script')
- hm.src = 'https://hm.baidu.com/hm.js?cd8218cd51f800ed2b73e5751cb3f4f9'
- var s = document.getElementsByTagName('script')[0]
- s.parentNode.insertBefore(hm, s)
+ var hm = document.createElement('script');
+ hm.src = 'https://hm.baidu.com/hm.js?cd8218cd51f800ed2b73e5751cb3f4f9';
+ var s = document.getElementsByTagName('script')[0];
+ s.parentNode.insertBefore(hm, s);
})()
</script>
+ <script>
+ window.onload = () => {
+ window.JitsiMeetExternalAPI = JitsiMeetExternalAPI;
+ }
+ </script>
+
</head>
+
<body>
-<noscript>
- <strong>We're sorry but vue-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-</noscript>
-<div id="app"></div>
-<!-- built files will be auto injected -->
+ <noscript>
+ <strong>We're sorry but vue-demo doesn't work properly without JavaScript enabled. Please enable it to
+ continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
</body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index f0ddcab..2f798d4 100644
--- a/src/router.js
+++ b/src/router.js
@@ -219,17 +219,18 @@
component: () => import('@/views/train/index'),
name: 'TrainListPage',
meta: { title: '鍦ㄧ嚎鍩硅', noCache: true }
- },
- {
- path: 'meet/index',
- component: () => import('@/views/meet/index'),
- name: 'meet',
- hidden: true
}
]
},
{
+ path: '/meet',
+ component: () => import('@/views/meet/index'),
+ meta: { title: '鍦ㄧ嚎鏁欏', noCache: true },
+ hidden: true
+ },
+
+ {
path: '/education',
component: Layout,
name: 'EducationPage',
diff --git a/src/views/meet/index.vue b/src/views/meet/index.vue
index 8b6e996..feea68f 100644
--- a/src/views/meet/index.vue
+++ b/src/views/meet/index.vue
@@ -1,24 +1,43 @@
<template>
- <body><div id="meet" /></body>
+ <div id="meet" ref="meet" />
</template>
-<script src='https://ycl.easyblog.vip:8443/external_api.js'></script>
<script>
-let api
-const initIframeAPI = () => {
- const domain = 'ycl.easyblog.vip:8443'
- const options = {
- roomName: 'test',
- width: 700,
- height: 700,
- parentNode: document.querySelector('#meet')
+let jitsiApi = null;
+export default {
+ mounted() {
+ const width = window.innerWidth;
+ const height = window.innerHeight;
+ const domain = 'ycl.easyblog.vip:8443';
+ const options = {
+ roomName: 'test',
+ width: width,
+ height: height,
+ parentNode: this.$refs.meet,
+ lang: 'zh_CN',
+ configOverwrite: {
+ prejoinConfig: {
+ enabled: false
+ },
+ whiteboard: {
+ enabled: true
+ }
+ },
+ toolbarButtons: ['whiteboard']
+ };
+ jitsiApi = new window.JitsiMeetExternalAPI(domain, options);
+
+ jitsiApi.addListener('readyToClose', () => {
+ window.close();
+ });
}
- api = new JitsiMeetExternalAPI(domain, options)
}
-window.onload = () => {
- initIframeAPI()
-}
</script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+#meet {
+ width: 100%;
+ height: 100%;
+}
+</style>
diff --git a/src/views/train/data-list/index.vue b/src/views/train/data-list/index.vue
index 965749d..a3e3a16 100644
--- a/src/views/train/data-list/index.vue
+++ b/src/views/train/data-list/index.vue
@@ -1,38 +1,40 @@
<template>
<div class="list-container w-full h-full">
- <div class="list-content w-full overflow-x-hidden">
- <el-row :gutter="20">
- <el-col :span="6" v-for="item in dataList" class="mb-5">
- <el-card shadow="hover" class="list-card cursor-pointer" :body-style="{ padding: 0 }">
- <div class="img-container w-full">
- <img src="@/assets/list-card-bg.jpg" class="w-full">
+ <div class="list-content w-full overflow-x-hidden">
+ <el-row :gutter="20">
+ <el-col :span="6" v-for="item in dataList" class="margin-col">
+ <el-card shadow="hover" class="list-card cursor-pointer" :body-style="{ padding: 0 }">
+ <div class="img-container w-full">
+ <img src="@/assets/list-card-bg.jpg" class="width-img">
+ </div>
+ <div class="item-info p-3">
+ <div class="info-title">{{ item.title }}</div>
+ <div class="info-teacher">
+ <div class="info-label">涓昏:</div>
+ <div class="info-text">{{ item.teacher }}</div>
</div>
- <div class="item-info p-3">
- <div class="info-title font-bold">{{ item.title }}</div>
- <div class="info-teacher flex text-sm text-gray-500">
- <div class="info-label">涓昏:</div>
- <div class="info-text">{{ item.teacher }}</div>
- </div>
- <div class="info-time flex text-sm text-gray-500">
- <div class="info-label">寮�濮嬫椂闂�:</div>
- <div class="info-text">{{ item.startTime }}</div>
- </div>
- <div class="info-time flex text-sm text-gray-500">
- <div class="info-label">缁撴潫鏃堕棿:</div>
- <div class="info-text">{{ item.endTime }}</div>
- </div>
+ <div class="info-time">
+ <div class="info-label">寮�濮嬫椂闂�:</div>
+ <div class="info-text">{{ item.startTime }}</div>
</div>
- <el-button size="mini" @click="start" >寮�濮嬩笂璇�</el-button>
- </el-card>
- </el-col>
- </el-row>
- </div>
+ <div class="info-time">
+ <div class="info-label">缁撴潫鏃堕棿:</div>
+ <div class="info-text">{{ item.endTime }}</div>
+ </div>
+ <div class="button-container">
+ <el-button @click="start">寮�濮嬩笂璇�</el-button>
+ </div>
+ </div>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
</div>
</template>
<script>
export default {
- data () {
+ data() {
return {
dataList: [
{
@@ -71,15 +73,18 @@
roomName: 'test'
}
]
- }
+ };
},
methods: {
- start(){
- // this.$router.push({path:'/train/meet/index'})
- window.open('https://ycl.easyblog.vip:8443/test');
+ start () {
+ let routeUrl = this.$router.resolve({
+ path: "/meet",
+ })
+ window.open(routeUrl.href, '_blank')
+ // window.open('https://ycl.easyblog.vip:8443/test');
}
}
-}
+};
</script>
<style lang="scss" scoped>
@@ -103,4 +108,35 @@
.list-card {
border-radius: 10px;
}
+
+.item-info {
+ padding: 12px;
+ color: #8a8a8a;
+}
+
+.info-title {
+ font-weight: bold;
+}
+
+.info-teacher {
+ display: flex;
+ font-size: 14px;
+}
+
+.info-time {
+ display: flex;
+}
+
+.margin-col {
+ margin-bottom: 20px;
+}
+
+.width-img {
+ width: 100%;
+}
+
+.button-container {
+ display: flex;
+ margin-top: 10px;
+}
</style>
diff --git a/src/views/train/index.vue b/src/views/train/index.vue
index b164d9f..a7551f7 100644
--- a/src/views/train/index.vue
+++ b/src/views/train/index.vue
@@ -1,12 +1,12 @@
<template>
- <div class="train-container w-screen h-screen bg-slate-50 flex flex-col items-center">
+ <div class="train-container ">
- <div class="list-container container grow relative">
+ <div class="list-container">
<div class="list-content absolute top-0 bottom-0 left-0 right-0 py-4">
- <div class="list-wrapper w-full h-full">
- <el-card clasdivs="h-full" :body-style="{ height: '100%' }">
- <div class="card-wrapper w-full h-full flex flex-col px-8 box-border">
- <div class="card-header flex justify-between items-center shrink-0">
+ <div class="list-wrapper">
+ <el-card :body-style="{ height: '100%' }">
+ <div class="card-wrapper">
+ <div class="card-header">
<div class="header-tab">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="鍏ㄩ儴" name="1"></el-tab-pane>
@@ -15,7 +15,7 @@
<el-tab-pane label="宸茬粨鏉�" name="4"></el-tab-pane>
</el-tabs>
</div>
- <div class="header-search flex items-center">
+ <div class="header-search">
<el-input v-model="searchText" placeholder="璇疯緭鍏ヨ�冭瘯鍚嶇О"/>
<el-button type="primary" class="ml-4">鎼滅储</el-button>
</div>
@@ -102,4 +102,25 @@
:deep(.el-tabs__nav-wrap:after) {
display: none;
}
+.train-container {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .list-container {
+ flex: 1;
+ position: relative;
+ }
+}
+.card-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-shrink: 0;
+}
+.header-search {
+ display: flex;
+ align-items: center;
+}
</style>
diff --git a/vue.config.js b/vue.config.js
index 43e9f92..cc6f74c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,8 +1,8 @@
-'use strict'
-const path = require('path')
+'use strict';
+const path = require('path');
-function resolve (dir) {
- return path.join(__dirname, dir)
+function resolve(dir) {
+ return path.join(__dirname, dir);
}
module.exports = {
@@ -19,7 +19,8 @@
hotOnly: false,
proxy: {
'/api': {
- target: 'http://localhost:8000',
+ // target: 'http://localhost:8000',
+ target: 'http://192.168.3.64:8000',
changeOrigin: true
}
}
@@ -31,12 +32,12 @@
filename: 'index.html'
}
},
- chainWebpack (config) {
+ chainWebpack(config) {
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
- .end()
+ .end();
config.module
.rule('icons')
.test(/\.svg$/)
@@ -47,6 +48,6 @@
.options({
symbolId: 'icon-[name]'
})
- .end()
+ .end();
}
-}
+};
--
Gitblit v1.8.0