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