jxkg_new_ui_teacher.git

parent: 8c0f29a3 | 补丁 | 提交 | ignore whitespace

ZhangXianQiang

2024-06-20 95a27fe55990ca151cbe08f99cbeb669b4cb9dd8

fix:修改在线培训

6个文件已修改

	public/index.html	35 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/router.js	13 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/meet/index.vue	49 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/train/data-list/index.vue	98 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/train/index.vue	35 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	vue.config.js	19 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 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>

 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',

 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>

 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>

 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>

 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();
  }
}
};

			@@ -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>

			@@ -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',

			@@ -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>

			@@ -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>

			@@ -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>

			@@ -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();
			}
			}
			};