sunkuosheng il y a 9 mois
Parent
commit
263a6d8bbc

+ 1 - 1
ruoyi-ui/.env.development

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = Observed Known on Classroom
+VUE_APP_TITLE = OKC课堂智慧分析系统
 
 # 开发环境配置
 ENV = 'development'

+ 1 - 1
ruoyi-ui/.env.production

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = Observed Known on Classroom
+VUE_APP_TITLE = OKC课堂智慧分析系统
 
 # 生产环境配置
 ENV = 'production'

+ 1 - 1
ruoyi-ui/.env.staging

@@ -1,5 +1,5 @@
 # 页面标题
-VUE_APP_TITLE = Observed Known on Classroom
+VUE_APP_TITLE = OKC课堂智慧分析系统
 
 NODE_ENV = production
 

+ 1 - 1
ruoyi-ui/src/layout/components/Sidebar/Logo.vue

@@ -35,7 +35,7 @@ export default {
   },
   data() {
     return {
-      title: '人工智能课堂事理图谱分析平台',
+      title: 'OKC课堂智慧分析系统',
       logo: logoImg
     }
   }

+ 1 - 0
ruoyi-ui/src/store/getters.js

@@ -15,5 +15,6 @@ const getters = {
   topbarRouters:state => state.permission.topbarRouters,
   defaultRoutes:state => state.permission.defaultRoutes,
   sidebarRouters:state => state.permission.sidebarRouters,
+  isAdmin:state => state.user.isAdmin,
 }
 export default getters

+ 8 - 1
ruoyi-ui/src/store/modules/user.js

@@ -7,10 +7,14 @@ const user = {
     name: '',
     avatar: '',
     roles: [],
-    permissions: []
+    permissions: [],
+    isAdmin:'',
   },
 
   mutations: {
+    SET_ISADMIN: (state, admin) => {
+      state.isAdmin = admin
+    },
     SET_TOKEN: (state, token) => {
       state.token = token
     },
@@ -54,10 +58,13 @@ const user = {
           const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
           if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
             commit('SET_ROLES', res.roles)
+
+
             commit('SET_PERMISSIONS', res.permissions)
           } else {
             commit('SET_ROLES', ['ROLE_DEFAULT'])
           }
+          commit('SET_ISADMIN', user.admin)
           commit('SET_NAME', user.userName)
           commit('SET_AVATAR', avatar)
           resolve(res)

+ 132 - 16
ruoyi-ui/src/views/editor/courseEdit.vue

@@ -2,10 +2,9 @@
 	<div class="app-container">
 		<el-row class="mb8">
 			<el-button
-				class="text-btn"
-				type="text" icon="el-icon-document-add"
+        style="color: #30D2BE;"
 				@click="handleAdd" v-hasPermi="['okc:videoPro:edit']"
-			/>
+      >新建课堂</el-button>
 			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
 		</el-row>
 
@@ -42,9 +41,9 @@
 						@click="handleImport(item)" v-hasPermi="['okc:videoPro:export']"
 					>导入打点
 					</el-button>
-					<br>
+					<br v-if="item.createUserId !== '0'&&isAdmin">
 					<el-button
-						v-if="item.createUserId !== '0'"
+						v-if="item.createUserId !== '0'&&isAdmin"
 						type="text" icon="el-icon-edit-outline"
 						@click="handleEdit(item)" v-hasPermi="['okc:videoPro:export']"
 					>文档编辑
@@ -125,19 +124,37 @@
 						</td>
 						<td>
 							<el-form-item label="课程教室类型" prop="classroomType">
-								<el-input v-model="videoForm.classroomType" placeholder="请输入课程教室类型"></el-input>
+                <el-autocomplete
+                  style="width: 100%;"
+                  v-model="videoForm.classroomType"
+                  :fetch-suggestions="(queryString, cb)=>querySearch(queryString, cb,classroomTypeOpt)"
+                  placeholder="请输入课程教室类型"
+                ></el-autocomplete>
+								<!--<el-input v-model="videoForm.classroomType" placeholder="请输入课程教室类型"></el-input>-->
 							</el-form-item>
 						</td>
 					</tr>
 					<tr>
 						<td>
 							<el-form-item label="学科" prop="branch">
-								<el-input v-model="videoForm.branch" placeholder="请输入学科"></el-input>
+                <el-autocomplete
+                  style="width: 100%;"
+                  v-model="videoForm.branch"
+                  :fetch-suggestions="(queryString, cb)=>querySearch(queryString, cb,branchOpt)"
+                  placeholder="请输入学科"
+                ></el-autocomplete>
+								<!--<el-input v-model="videoForm.branch" placeholder="请输入学科"></el-input>-->
 							</el-form-item>
 						</td>
 						<td>
 							<el-form-item label="课程学年" prop="session">
-								<el-input v-model="videoForm.session" placeholder="请输入课程学年"></el-input>
+                <el-autocomplete
+                  style="width: 100%;"
+                  v-model="videoForm.session"
+                  :fetch-suggestions="(queryString, cb)=>querySearch(queryString, cb,sessionOpt)"
+                  placeholder="请输入课程学年"
+                ></el-autocomplete>
+								<!--<el-input v-model="videoForm.session" placeholder="请输入课程学年"></el-input>-->
 							</el-form-item>
 						</td>
 					</tr>
@@ -149,7 +166,13 @@
 						</td>
 						<td>
 							<el-form-item label="教师职称" prop="teacherTitle">
-								<el-input v-model="videoForm.teacherTitle" placeholder="请输入教师职称"></el-input>
+                <el-autocomplete
+                  style="width: 100%;"
+                  v-model="videoForm.teacherTitle"
+                  :fetch-suggestions="(queryString, cb)=>querySearch(queryString, cb,teacherTitleOpt)"
+                  placeholder="请输入教师职称"
+                ></el-autocomplete>
+								<!--<el-input v-model="videoForm.teacherTitle" placeholder="请输入教师职称"></el-input>-->
 							</el-form-item>
 						</td>
 					</tr>
@@ -161,13 +184,21 @@
 						</td>
 						<td>
 							<el-form-item label="所在地区" prop="region">
-								<el-input v-model="videoForm.region" placeholder="请输入所在地区"></el-input>
+                <el-select v-model="videoForm.region" placeholder="请选择所在地区" style="width: 100%">
+                  <el-option
+                    v-for="item in regionOpt"
+                    :key="item.value"
+                    :label="item.value"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+								<!--<el-input v-model="videoForm.region" placeholder="请输入所在地区"></el-input>-->
 							</el-form-item>
 						</td>
 					</tr>
 					<tr>
 						<td colspan="2">
-							<el-form-item label="课程视频文件" prop="videoUrl">
+							<el-form-item label="课程视频文件" prop="fileName">
 								<el-input class="video-ipt" type="text" v-model="videoForm.fileName" disabled />
 								<el-button
 									type="info"
@@ -355,7 +386,7 @@
 import yuxStorage from '@/utils/yux-storage'
 import { listVideoPro, delVideoPro, addVideoPro, updateVideoPro } from '@/api/okc/videoPro'
 import { getToken } from '@/utils/auth'
-
+import { mapGetters } from 'vuex'
 var Base64 = Base64 || require('@/utils/base64').Base64
 
 export default {
@@ -372,6 +403,82 @@ export default {
 			videoFile: null,
 			vLoading: false,
 			videoIdForImport: null,
+      classroomTypeOpt:[
+        {value:'传统教室'},
+        {value:'智慧教室'},
+        {value:'双师课堂'}
+      ],
+      branchOpt:[
+        {value:'语文'},
+        {value:'数学'},
+        {value:'英语'},
+        {value:'物理'},
+        {value:'化学'},
+        {value:'生物'},
+        {value:'政治'},
+        {value:'历史'},
+        {value:'地理'},
+        {value:'信息技术'},
+        {value:'人工智能'},
+      ],
+      sessionOpt:[
+        {value:'小学'},
+        {value:'初中'},
+        {value:'高中'},
+        {value:'大学'},
+      ],
+      teacherTitleOpt:[
+        {value:'助教'},
+        {value:'讲师'},
+        {value:'副教授'},
+        {value:'教授'},
+      ],
+      regionOpt:[
+        {value:'吉林省'},
+        {value:'北京市'},
+        {value:'天津市'},
+        {value:'河北省'},
+        {value:'山西省'},
+        {value:'内蒙古'},
+        {value:'辽宁省'},
+        {value:'黑龙江省'},
+        {value:'上海市'},
+        {value:'江苏省'},
+        {value:'浙江省'},
+        {value:'安徽省'},
+        {value:'福建省'},
+        {value:'江西省'},
+        {value:'山东省'},
+        {value:'河南省'},
+        {value:'湖北省'},
+        {value:'湖南省'},
+        {value:'广东省'},
+        {value:'广西'},
+        {value:'海南省'},
+        {value:'重庆市'},
+        {value:'四川省'},
+        {value:'贵州省'},
+        {value:'云南省'},
+        {value:'西藏'},
+        {value:'陕西省'},
+        {value:'甘肃省'},
+        {value:'青海省'},
+        {value:'宁夏'},
+        {value:'新疆'},
+        {value:'台湾省'},
+        {value:'澳门'},
+        {value:'香港'},
+      ],
+      querySearch(queryString, cb,restaurants) {
+        let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
+        // 调用 callback 返回建议列表的数据
+        cb(results);
+      },
+      createFilter(queryString) {
+        return (restaurant) => {
+          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+        };
+      },
 			videoRules: {
 				region: [
 					{ required: true, message: '所在地区不能为空', trigger: 'blur' }
@@ -395,8 +502,11 @@ export default {
 					{ required: true, message: '课程名称及主题不能为空', trigger: 'blur' }
 				],
 				classroomType: [
-					{ required: true, message: '课程教室类型不能为空', trigger: 'blur' }
-				]
+					{ required: true, message: '课程教室类型不能为空', trigger: 'change' }
+				],
+        fileName:[
+          { required: true, message: '请导入mp4格式的视频文件', trigger: 'blur' }
+        ]
 			},
 			// 用户导入参数
 			upload: {
@@ -483,6 +593,11 @@ export default {
 			quill: null
 		}
 	},
+  computed: {
+    ...mapGetters([
+      'isAdmin',
+    ]),
+  },
 	created() {
 		this.getList()
 	},
@@ -499,7 +614,8 @@ export default {
 
 		/** 新增按钮操作 */
 		handleAdd() {
-			this.reset()
+			// this.reset()
+      this.videoForm.fileName='';
 			this.open = true
 			this.title = '新建课堂分析项目'
 		},
@@ -545,7 +661,7 @@ export default {
 		// 取消按钮
 		cancel() {
 			this.open = false
-			this.reset()
+			// this.reset()
 		},
 		// 表单重置
 		reset() {

+ 24 - 5
ruoyi-ui/src/views/editor/index.vue

@@ -2,15 +2,21 @@
 	<div class="container">
 		<!--<h3 class="project-name">项目名称:{{}}</h3>-->
 		<el-tabs v-model="activeName" @tab-click="handleTab">
-			<el-tab-pane label="文档编辑" name="first">
+			<el-tab-pane label="文档编辑" name="first" v-if="isAdmin">
 				<documentEdit></documentEdit>
 			</el-tab-pane>
-			<el-tab-pane label="课程分析" name="second">
+			<el-tab-pane label="OKC课堂分析" name="second">
 				<courseEdit></courseEdit>
 			</el-tab-pane>
-			<el-tab-pane label="上传表格" name="third">
+			<el-tab-pane label="上传表格" name="third" v-if="isAdmin">
 				<excelEdit></excelEdit>
 			</el-tab-pane>
+      <el-tab-pane label="教师发展助手" name="five">
+
+      </el-tab-pane>
+      <el-tab-pane label="图谱分析平台" name="six">
+
+      </el-tab-pane>
 		</el-tabs>
 	</div>
 </template>
@@ -18,7 +24,7 @@
 import documentEdit from '@/views/editor/documentEdit.vue'
 import courseEdit from '@/views/editor/courseEdit.vue'
 import excelEdit from '@/views/editor/excelEdit.vue'
-
+import { mapGetters } from 'vuex'
 export default {
 	name: 'Editor',
 	components: { documentEdit, courseEdit, excelEdit },
@@ -28,6 +34,11 @@ export default {
 			activeName: 'second',
 		}
 	},
+  computed: {
+    ...mapGetters([
+      'isAdmin',
+    ]),
+  },
 	mounted() {
 		if(sessionStorage.getItem('currentTab')){
 			this.activeName = sessionStorage.getItem('currentTab')
@@ -35,7 +46,15 @@ export default {
 	},
 	methods: {
 		handleTab(tab){
-			sessionStorage.setItem('currentTab',tab.name)
+		  if(tab.name=='five')
+      {
+        window.open('https://appbuilder.baidu.com/s/wYF9D', '_blank');
+      }else if(tab.name=='six'){
+        // window.open('https://www.google.com/', '_blank');
+      }else{
+        sessionStorage.setItem('currentTab',tab.name)
+      }
+
 		},
 	},
 }

+ 6 - 3
ruoyi-ui/src/views/login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">人工智能课堂事理图谱分析平台</h3>
+      <h3 class="title">OKC课堂智慧分析系统</h3>
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
@@ -65,7 +65,6 @@
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from '@/utils/jsencrypt'
-
 export default {
   name: "Login",
   data() {
@@ -141,7 +140,11 @@ export default {
             Cookies.remove('rememberMe');
           }
           this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+            if(this.loginForm.username=='admin'){
+              this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+            }else{
+              this.$router.push({ name: 'Editor', query: { id: '90700384842c486fa7620bd10873284f' } })
+            }
           }).catch(() => {
             this.loading = false;
             if (this.captchaEnabled) {

+ 1 - 1
ruoyi-ui/src/views/register.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="register">
     <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
-      <h3 class="title">人工智能课堂事理图谱分析平台</h3>
+      <h3 class="title">OKC课堂智慧分析系统</h3>
       <el-form-item prop="username">
         <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />

+ 323 - 207
ruoyi-ui/src/views/videoAnalysis/index.vue

@@ -1,14 +1,69 @@
 <template>
-	<div class="app-container home">
-		<video class="video" ref="video" :controls="showCtrl"></video>
-
-		<!--视频左边工具图标-->
-		<div class="v-tools tool-wrap">
-			<!--v-hasPermi="['okc:videoPro:remove']"-->
-			<el-button v-if="!disabled" class="tool-btn" plain circle icon="el-icon-plus" size="mini" @click="changeProject" />
-			<el-button class="tool-btn" plain circle icon="el-icon-edit" size="mini" @click="openDrawer('draw')" />
-			<el-button class="tool-btn" plain circle icon="el-icon-upload2" size="mini" @click="openDrawer('export')" />
-		</div>
+	<div class="app-container home" style="display: flex">
+    <div class="box_left">
+      <div class="titleStyle">
+        课堂标记
+      </div>
+      <el-divider></el-divider>
+      <el-form label-width="80px">
+        <el-form-item label="课堂行为">
+          <el-select v-model="workForm.behavior" placeholder="请选择课堂行为">
+            <el-option v-for="dict in dict.type.behavier"  :key="dict.value"  :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="教学媒体">
+          <el-select v-model="workForm.media" placeholder="请选择教学媒体">
+            <el-option v-for="dict in dict.type.media"  :key="dict.value"  :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="TPACK">
+          <el-select v-model="workForm.tpack" placeholder="请选择TPACK">
+            <el-option v-for="dict in dict.type.tpack"  :key="dict.value"  :label="dict.label" :value="dict.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input  type="textarea" v-model="radios.comments" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div class="btBox">
+        <el-button
+          class="btSize"
+          :loading="wLoading"
+          type="primary" @click="submitWorkForm"
+        >
+          {{ workForm.id ? '提交修改' : '提交' }}
+        </el-button>
+      </div>
+
+    </div>
+    <div class="box_right">
+      <video class="video" id="video" ref="video"  controlslist="nodownload"  disablePictureInPicture   oncontextmenu = "return false"  :controls="showCtrl"></video>
+      <!--视频上方中间时间-->
+      <p class="duration">持续时间区间:{{ formatTime(startTime)}} - {{formatTime(endTime)}}</p>
+
+      <!--视频右边工具图标-->
+      <div class="v-okc tool-wrap">
+        <!--v-hasPermi="['okc:videoPro:remove']"-->
+        <el-button v-if="!disabled" class="tool-btn" plain circle icon="el-icon-plus"  @click="changeProject" />
+        <el-button class="tool-btn" plain circle icon="el-icon-edit"  @click="openDrawer('draw')" />
+        <el-button class="tool-btn" plain circle icon="el-icon-upload2"  @click="openDrawer('export')" />
+      </div>
+
+      <!--视频左边工具图标-->
+      <div class="v-tools tool-wrap">
+        <el-button style="color: #30D2BE;" @click="openStudy">操作教程</el-button>
+        <el-button style="color: #30D2BE;" @click="getStartTime">区间开始</el-button>
+        <el-button style="color: #30D2BE;" @click="getEndTime">区间截取</el-button>
+        <el-button style="color: #30D2BE;" @click="showHistory">历史记录</el-button>
+        <!--<el-button class="tool-btn" plain circle size="mini" @click="getStartTime"><i class="iconfont icon-kssj"></i></el-button>-->
+        <!--<el-button class="tool-btn" plain circle size="mini" @click="getEndTime"><i class="iconfont icon-jssj"></i></el-button>-->
+        <!--<el-button class="tool-btn" plain circle size="mini" title="课堂标记" @click="openDrawer('point')"><i class="iconfont icon-deploy-point"></i>-->
+        <!--</el-button>-->
+        <!--<el-button class="tool-btn" plain circle size="mini" title="历史记录" @click="showHistory"><i class="iconfont icon-lishijilu"></i>-->
+        <!--</el-button>-->
+      </div>
+
+    </div>
 
 		<!--显示图表弹出框-->
 		<el-dialog class="big-dialog" custom-class="draw-dialog" :title="drawTit" :visible.sync="drawDialog" close-on-click-modal :destroy-on-close="true">
@@ -99,18 +154,7 @@
 			</div>
 		</el-dialog>
 
-		<!--视频上方中间时间-->
-		<p class="duration">持续时间单元:{{ timeTranslate(startTime) }} - {{ timeTranslate(endTime) }}</p>
 
-		<!--视频右边工具图标-->
-		<div class="v-okc tool-wrap">
-			<el-button class="tool-btn" plain circle size="mini" @click="getStartTime"><i class="iconfont icon-kssj"></i></el-button>
-			<el-button class="tool-btn" plain circle size="mini" @click="getEndTime"><i class="iconfont icon-jssj"></i></el-button>
-			<el-button class="tool-btn" plain circle size="mini" @click="openDrawer('point')"><i class="iconfont icon-deploy-point"></i>
-			</el-button>
-			<el-button class="tool-btn" plain circle size="mini" @click="showHistory"><i class="iconfont icon-lishijilu"></i>
-			</el-button>
-		</div>
 
 		<el-dialog class="point-dialog" :title="pointTit" :visible.sync="pointDialog" width="100%" close-on-click-modal>
 			<el-radio-group v-show="curIdx === 0" v-model="radios.behavior">
@@ -127,7 +171,9 @@
 				<el-button size="mini" @click="submitRadios">确定</el-button>
 			</div>
 		</el-dialog>
+   <el-dialog title="操作教程" :visible.sync="isStudy" width="100%" close-on-click-modal>
 
+   </el-dialog>
 		<!--自定义视频控件-->
 		<!--<div class="v-ctrl" v-show="showCtrl">-->
 		<!--	<el-button class="v-btn" size="small" icon="el-icon-d-arrow-left" circle plain @click="back"></el-button>-->
@@ -152,7 +198,7 @@
 			</ul>
 			<el-button
 				v-if="drawerType === 'point'"
-				class="submit-btn" :loading="wLoading" size="mini"
+				class="submit-btn" :loading="wLoading"
 				type="primary" @click="submitWorkForm"
 			>
 				{{ workForm.id ? '提交修改' : '提交' }}
@@ -183,8 +229,8 @@
 		</el-dialog>
 		<!-- 历史记录-->
 		<el-dialog title="历史记录" :visible.sync="historyDialog" width="75%" close-on-click-modal>
-			<el-button type="info" plain size="mini" @click="deleteLastRecord">撤回最后单元</el-button>
-			<el-button type="info" plain size="mini" @click="changeCurrentRecord">修改当前单元</el-button>
+			<el-button type="info" plain  @click="deleteLastRecord">撤回最后单元</el-button>
+			<el-button type="info" plain  @click="changeCurrentRecord">修改当前单元</el-button>
 			<br>
 			<br>
 			<el-scrollbar wrapClass="scrollbar-wrap">
@@ -216,6 +262,7 @@ export default {
 	dicts: ['behavier', 'media', 'tpack'],
 	data() {
 		return {
+      isStudy:false,
 			videoState: '暂停',
 			keys: [],    // exportCurve columns 的dataIndex所需值
 
@@ -256,7 +303,7 @@ export default {
 			pointList: [
 				{ name: '课堂行为', value: '' },
 				{ name: '教学媒体', value: '' },
-				{ name: '内容知识', value: '' },
+				{ name: 'TPACK', value: '' },
 				{ name: '备注', value: '' }
 			],
 			drawParams: {
@@ -277,7 +324,7 @@ export default {
 			isCheckedAll: false,
 			btnText: '全  选',
 
-			// 课堂行为记录弹出框
+			// 课堂课堂标记弹出框
 			pointDialog: false,
 			pointTit: '',
 			// 开始截取时间
@@ -380,11 +427,21 @@ export default {
 		this.getVideoProInfo()
 		this.getHistoryList()   //在created获取历史记录,是导出编码记录也需要
 		this.getRcList()
+
 	},
+  mounted(){
+	  let that=this;
+    document.getElementById("video").addEventListener('pause', function () { //暂停
+      that.getEndTime()
+    });
+  },
 	beforeMount() {
 		this.projectDialogWidth = window.innerWidth > 750 ? '500px' : '96%'
 	},
 	methods: {
+    openStudy(){
+      this.isStudy=true;
+    },
 		// 获取项目视频信息
 		getVideoProInfo() {
 			if (localStorage.getItem('id')) {
@@ -575,7 +632,7 @@ export default {
 			} else if (!this.workForm.media) {
 				this.$modal.msgError('教学媒体不能为空!')
 			} else if (!this.workForm.tpack) {
-				this.$modal.msgError('内容知识不能为空!')
+				this.$modal.msgError('TPACK不能为空!')
 			} else {
 				this.wLoading = true
 				const data = {
@@ -603,6 +660,7 @@ export default {
 						this.startTime = this.endTime
 						this.endTime = 0
 						this.resetWorkForm()
+            this.playVideo()
 					}).then(() => {
 						this.wLoading = false
 						this.drawerVisible = false
@@ -611,6 +669,15 @@ export default {
 			}
 
 		},
+    playVideo(){
+      // 解决:Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()
+      let playPromise = this.$refs.video.play()
+      if (playPromise !== undefined) {
+      	playPromise.then(() => {
+      		this.$refs.video.play()
+      	}).catch(() => {})
+      }
+    },
 
 		// workForm表单重置
 		resetWorkForm() {
@@ -688,7 +755,7 @@ export default {
 				this.drawerList = this.exportList
 				this.drawerType = 'export'
 			} else {
-				this.drawerTitle = '行为记录'
+				this.drawerTitle = '课堂标记'
 				this.drawerList = this.pointList
 				this.drawerType = 'point'
 				this.drawerDirection = 'rtl'
@@ -716,12 +783,12 @@ export default {
 		// 关闭drawer
 		closeDrawer() {
 			// 解决:Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()
-			let playPromise = this.$refs.video.play()
-			if (playPromise !== undefined) {
-				playPromise.then(() => {
-					this.$refs.video.play()
-				}).catch(() => {})
-			}
+			// let playPromise = this.$refs.video.play()
+			// if (playPromise !== undefined) {
+			// 	playPromise.then(() => {
+			// 		this.$refs.video.play()
+			// 	}).catch(() => {})
+			// }
 		},
 		/*-----------------el-drawer组件 end----------------------*/
 
@@ -872,8 +939,8 @@ export default {
 
 		/*-----------------绘图 & 导出 end----------------------*/
 
-		/*-----------------行为记录point start--------------------*/
-		// 课堂行为记录
+		/*-----------------课堂标记point start--------------------*/
+		// 课堂标记
 		handlePoint(index) {
 			this.pointTit = this.pointList[index].name
 			this.radios.behavior = this.workForm.behavior
@@ -900,7 +967,7 @@ export default {
 			}
 			this.pointDialog = false
 		},
-		/*-----------------行为记录point start--------------------*/
+		/*-----------------课堂标记point start--------------------*/
 
 		// 时间格式转化
 		timeTranslate(time) {
@@ -922,8 +989,30 @@ export default {
 			timeStr += m + ':' + s + ms
 			return timeStr
 		},
-
-		// 生成guid
+     formatTime(time) {
+		  console.log(time,'<---------时间')
+       let timeInMilliseconds=time*1000;
+       // 将毫秒转换为分、秒和毫秒
+       var milliseconds = timeInMilliseconds % 1000;
+       var seconds = Math.floor((timeInMilliseconds / 1000) % 60);
+       var minutes = Math.floor((timeInMilliseconds / 1000 / 60));
+
+       // 将数字转换为字符串,并确保它们都是两位数
+       minutes = minutes < 10 ? '0' + minutes : minutes;
+       seconds = seconds < 10 ? '0' + seconds : seconds;
+       // milliseconds = Math.floor(milliseconds / 100); // 转换为十分之一秒
+       // milliseconds = milliseconds < 10 ? '0' + milliseconds : milliseconds;
+       milliseconds=parseInt(milliseconds)
+        if(milliseconds < 10){
+          milliseconds='00'+milliseconds
+        }else if (milliseconds < 100){
+          milliseconds='0'+milliseconds
+        }
+       // 返回格式化的时间字符串
+       // return minutes + ':' + seconds + ':' +  milliseconds;
+       return minutes + ':' + seconds + ':' + milliseconds;
+},
+    // 生成guid
 		guid() {
 			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
 				var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8)
@@ -1049,186 +1138,206 @@ export default {
 	width: 100%;
 	background-color: #000;
 	position: relative;
+.box_left{
+  width: 15%;
+  height: 100%;
+  .titleStyle{
+    color: white;
+    font-size: 23px;
+  }
+  .btBox{
+    display: flex;
+    justify-content: center;
+    .btSize{
+      width: 100px;
+    }
+  }
+}
+  .box_right{
+    width: 85%;
+    height: 100%;
+    position: relative;
+    video {
+      width: 100%;
+      background-color: #000;
 
-	video {
-		width: 100%;
-		background-color: #000;
-
-		&:focus-visible {
-			outline: none;
-		}
-	}
-
-	.duration {
-		position: absolute;
-		top: 1%;
-		width: 100%;
-		margin: 0;
-		text-align: center;
-		color: $theme-fontColor;
-	}
-
-	::v-deep .tool-wrap {
-		display: flex;
-		flex-direction: column;
-		position: absolute;
-		top: 1%;
-
-		.el-button {
-			margin: 8px 5px;
-			background-color: $theme-dialog;
-			padding: 10px;
-			border: none;
-
-			&:hover {
-				background-color: #464646;
-			}
-
-			i {
-				font-size: 14px;
-				font-weight: bold;
-				color: $theme-fontColor;
-			}
-		}
-	}
-
-	::v-deep .v-ctrl {
-		position: absolute;
-		bottom: 4.5%;
-		left: 50%;
-		transform: translateX(-50%,);
-
-		.v-btn {
-			background-color: transparent;
-			border: none;
-
-			i {
-				font-size: 16px;
-				font-weight: bold;
-				color: $theme-fontColor;
-			}
-
-			&:hover {
-				background-color: $theme-dialog;
-			}
-		}
-	}
-
-	::v-deep .v-tools {
-		left: 10px;
-	}
-
-	::v-deep .v-okc {
-		right: 10px;
-	}
-
-	::v-deep .el-drawer__wrapper {
-		position: absolute;
-
-		.v-drawer {
-			min-width: 166px !important;
-			background-color: $theme-dialog;
-
-			.options {
-				list-style-type: none;
-				margin: 0;
-				padding: 0;
-
-				li {
-					font-size: 14px;
-					padding: 6px 0;
-					cursor: pointer;
-					word-break: break-all;
-					transition: all .5s;
-
-					&.active {
-						padding-left: 15px;
-						color: $theme-activeColor;
-					}
-
-					&:hover {
-						color: $theme-activeColor;
-					}
-				}
-			}
-
-			.el-drawer__header {
-				color: $theme-fontColor;
-				margin-bottom: 20px;
-				padding: 10px;
-				border-bottom: 1px solid rgba(255, 255, 255, .4);
-			}
-
-			.el-drawer__body {
-				color: $theme-fontColor;
-				padding: 0 10px;
-			}
-		}
-
-		.submit-btn {
-			float: right;
-			margin-top: 15px;
-		}
-	}
-
-	::v-deep .draw-dialog {
-		background-color: #f3f3f3;
-
-		.el-dialog__header {
-			padding-bottom: 0;
-
-			.el-dialog__title {
-				color: $theme-bgColor;
-			}
+      &:focus-visible {
+        outline: none;
+      }
+    }
 
-			.el-dialog__headerbtn .el-dialog__close {
-				color: $theme-bgColor;
-			}
-		}
 
-		.el-dialog__body {
-			padding: 20px;
-		}
+  }
 
-		.el-button-group {
-			margin-bottom: 1%;
-		}
-
-		.img-wrap {
-			display: flex;
-			justify-content: space-between;
-			flex-wrap: wrap;
-			text-align: center;
+}
+.duration {
+  position: absolute;
+  top: 1%;
+  width: 100%;
+  margin: 0;
+  text-align: center;
+  color: $theme-fontColor;
+}
 
-			div {
-				background-color: #fff;
-				margin: 0.25% 0;
+::v-deep .tool-wrap {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 1%;
+
+  .el-button {
+    margin: 8px 5px;
+    background-color: $theme-dialog;
+    padding: 10px;
+    border: none;
+
+    &:hover {
+      background-color: #464646;
+    }
+
+    i {
+      font-size: 14px;
+      font-weight: bold;
+      color: $theme-fontColor;
+    }
+  }
+}
 
-				span {
-					display: block;
-					padding: 1% 0;
-				}
-			}
+::v-deep .v-ctrl {
+  position: absolute;
+  bottom: 4.5%;
+  left: 50%;
+  transform: translateX(-50%,);
+
+  .v-btn {
+    background-color: transparent;
+    border: none;
+
+    i {
+      font-size: 16px;
+      font-weight: bold;
+      color: $theme-fontColor;
+    }
+
+    &:hover {
+      background-color: $theme-dialog;
+    }
+  }
+}
 
-			.avg {
-				width: 49.75%;
-			}
+::v-deep .v-tools {
+  left: 10px;
+}
 
-			.left {
-				width: 39.5%;
-			}
+::v-deep .v-okc {
+  right: 10px;
+}
 
-			.right {
-				width: 60%;
-			}
-		}
-	}
+::v-deep .el-drawer__wrapper {
+  position: absolute;
+
+  .v-drawer {
+    min-width: 166px !important;
+    background-color: $theme-dialog;
+
+    .options {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        font-size: 14px;
+        padding: 6px 0;
+        cursor: pointer;
+        word-break: break-all;
+        transition: all .5s;
+
+        &.active {
+          padding-left: 15px;
+          color: $theme-activeColor;
+        }
+
+        &:hover {
+          color: $theme-activeColor;
+        }
+      }
+    }
+
+    .el-drawer__header {
+      color: $theme-fontColor;
+      margin-bottom: 20px;
+      padding: 10px;
+      border-bottom: 1px solid rgba(255, 255, 255, .4);
+    }
+
+    .el-drawer__body {
+      color: $theme-fontColor;
+      padding: 0 10px;
+    }
+  }
+
+  .submit-btn {
+    float: right;
+    margin-top: 15px;
+  }
+}
 
-	::v-deep .v-modal {
-		position: absolute;
-	}
+::v-deep .draw-dialog {
+  background-color: #f3f3f3;
+
+  .el-dialog__header {
+    padding-bottom: 0;
+
+    .el-dialog__title {
+      color: $theme-bgColor;
+    }
+
+    .el-dialog__headerbtn .el-dialog__close {
+      color: $theme-bgColor;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 20px;
+  }
+
+  .el-button-group {
+    margin-bottom: 1%;
+  }
+
+  .img-wrap {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    text-align: center;
+
+    div {
+      background-color: #fff;
+      margin: 0.25% 0;
+
+      span {
+        display: block;
+        padding: 1% 0;
+      }
+    }
+
+    .avg {
+      width: 49.75%;
+    }
+
+    .left {
+      width: 39.5%;
+    }
+
+    .right {
+      width: 60%;
+    }
+  }
 }
 
+::v-deep .v-modal {
+  position: absolute;
+}
 .projectForm {
 	.video-ipt {
 		width: 74.5%;
@@ -1365,6 +1474,13 @@ export default {
 // 隐藏video 全屏按钮
 video::-webkit-media-controls-fullscreen-button {
 	display: none !important;
+}
+  .tool-btn{
+    width: 50px;
+    height: 50px;
+  }
+  .tool-wrap .el-button i{
+  font-size: 18px !important;
 }
 </style>