OKC change 0425

ruoyi-ui/src/api/okc/videoPro.js

@@ -44,20 +44,21 @@ export function delVideoPro(id) {
 }
 
 // 获取OKC图表
-export function getCharts(query) {
+export function getCharts(data) {
   return request({
     url: '/okc/videoPro/export/one/pro',
     method: 'post',
-    params: query
+    data: data
   })
 }
 
 // 一次性获取所有OKC图表
-export function getAllCharts(query) {
+export function getAllCharts(data) {
   return request({
     url: '/okc/videoPro/export/all/pro',
     method: 'post',
-    params: query
+    // params: query,
+    data: data
   })
 }
 

ruoyi-ui/src/views/okc/videoPlace/index.vue

@@ -13,19 +13,23 @@
 
 		<!--视频左边工具图标-->
 		<div class="v-tools tool-wrap">
-			<el-tooltip effect="dark" content="导入视频" placement="right">
-				<!--v-hasPermi="['okc:videoPro:remove']"-->
-				<el-button class="tool-btn" plain circle icon="el-icon-plus" size="mini" :disabled="disabled" @click="changeProject" />
-			</el-tooltip>
-			<el-tooltip effect="dark" content="绘制图表" placement="right">
-				<el-button class="tool-btn" plain circle icon="el-icon-edit" size="mini" @click="changeProject" />
-			</el-tooltip>
-			<el-tooltip effect="dark" content="导出图表" placement="right">
-				<el-button class="tool-btn" plain circle icon="el-icon-upload2" size="mini" @click="changeProject" />
-			</el-tooltip>
+			<!--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="openTD('draw')" />
+			<el-button class="tool-btn" plain circle icon="el-icon-upload2" size="mini" @click="openTD('export')" />
 		</div>
 
+		<el-drawer
+			custom-class="v-drawer" :modal-append-to-body="false"
+			:title="TD_title" :visible.sync="TD_visible" size="12%" direction="ltr"
+			@closed="closeTD"
+		>
+			<ul class="options">
+				<li v-for="(item,idx) in TD_list" :class="{active: idx === curIdx}" @click="handlerClick(TD_type,idx)" :key="idx">{{ item }}</li>
+			</ul>
+		</el-drawer>
 		<!--视频右边工具图标-->
+		<p class="duration">持续时间单元：{{ timeTranslate(startTime) }} - {{ timeTranslate(endTime) }}</p>
 		<div class="v-okc tool-wrap">
 			<el-tooltip effect="dark" content="开始截取" placement="left">
 				<el-button class="tool-btn" plain circle icon="el-icon-scissors" size="mini" @click="getStartTime"></el-button>
@@ -218,20 +222,13 @@ export default {
 	dicts: ['behavier', 'media', 'tpack'],
 	data() {
 		return {
-			showCtrl: false,
-			isDraw: false,
-			bCheckedList: [],
-			mCheckedList: [],
-			tCheckedList: [],
-			isCheckedAll: false,
-			btnText: '全  选',
-			projectDialogWidth: null,
 			videoState: '暂停',
+
 			// 导入视频按钮是否可用
 			disabled: true,
-
 			// 是否显示新建项目弹出框
 			projectDialog: false,
+			projectDialogWidth: null,
 			title: '',
 			// 新建项目表单参数
 			projectForm: {
@@ -250,6 +247,28 @@ export default {
 				]
 			},
 
+			// v-tools 绘图 & 导出 drawer
+			TD_title: null,
+			TD_visible: false,
+			TD_list: [],
+			TD_type: null,
+			curIdx: null,
+			drawList: ['RC曲线图', '课堂行为分析图', '教学媒体分析图', 'TPACK分析图', 'S-T分析图', 'Rt-Ch分析图'],
+			exportList: ['导出RC图', '导出RC值(分类)', '导出RC值(曲线值)', '导出编码记录', '导出频率和持续时间', '导出全部分析图'],
+			drawParams: {
+				id: null,
+				fileNameList: []
+			},
+
+			// 绘制RC曲线图
+			showCtrl: false,
+			isDraw: false,
+			bCheckedList: [],
+			mCheckedList: [],
+			tCheckedList: [],
+			isCheckedAll: false,
+			btnText: '全  选',
+
 			// 开始截取时间
 			startTime: 0,
 			// 结束截取时间
@@ -586,54 +605,102 @@ export default {
 
 
 		/*-----------------绘图 & 导出 start--------------------*/
-		// 绘图dropDown command事件
-		handleDraw(command) {
-			console.log(command)
-			switch (command) {
-				case 'rcChart':
+		// 开启TD(tools-drawer)
+		openTD(type) {
+			this.TD_visible = true
+			this.curIdx = null
+			this.$refs.video.pause()
+			if (type === 'draw') {
+				this.TD_title = '绘制图表'
+				this.TD_list = this.drawList
+				this.TD_type = 'draw'
+			} else if (type === 'export') {
+				this.TD_title = '导出图表'
+				this.TD_list = this.exportList
+				this.TD_type = 'export'
+			}
+		},
+		// 关闭TD(tools-drawer)
+		closeTD() {
+			this.$refs.video.play()
+		},
+
+		//TD(tools-drawer) list click event
+		handlerClick(type, idx) {
+			this.curIdx = idx
+			if (type === 'draw') {
+				this.handleDraw(idx)
+			} else if (type === 'export') {
+				this.handleExport(idx)
+			}
+		},
+
+		// 绘图事件
+		handleDraw(index) {
+			this.drawParams.id = localStorage.getItem('id')
+			switch (index) {
+				// ['RC曲线图', '课堂行为分析图', '教学媒体分析图', 'TPACK分析图', 'S-T分析图', 'Rt-Ch分析图']
+				// exportList: ['导出RC图', '导出RC值(分类)', '导出RC值(曲线值)', '导出编码记录', '导出频率和持续时间', '导出全部分析图'],
+				case 0:   // RC曲线图
 					this.drawRC()
 					break
-				case 'behavior':
-					this.drawBehavior()
+				case 1:   // 课堂行为分析图
+					this.drawParams.fileNameList = ['behavierPieFre.jpg', 'behavierBarFre.jpg', 'behavierPieDur.jpg', 'behavierBarDur.jpg']
+					getCharts(this.drawParams).then((res) => {
+						console.log('课堂行为分析图',res)
+					})
 					break
-				case 'meida':
-
+				case 2:   // 教学媒体分析图
+					this.drawParams.fileNameList = ['mediaPieFre.jpg', 'mediaBarFre.jpg', 'mediaPieDur.jpg', 'mediaBarDur.jpg']
+					getCharts(this.drawParams).then((res) => {
+						console.log('教学媒体分析图',res)
+					})
 					break
-				case 'tpack':
-
+				case 3:   // TPACK分析图
+					this.drawParams.fileNameList = ['tpackPieFre.jpg', 'tpackBarFre.jpg', 'tpackPieDur.jpg', 'tpackBarDur.jpg']
+					getCharts(this.drawParams).then((res) => {
+						console.log('TPACK分析图',res)
+					})
 					break
-				case 'S-T':
-
+				case 4:   // S-T分析图
+					this.drawParams.fileNameList = ['behavierLineFre.jpg', 'behavierLineDur.jpg']
+					getCharts(this.drawParams).then((res) => {
+						console.log('S-T分析图',res)
+					})
 					break
-				case 'Rt-Ch':
-
+				case 5:   // Rt-Ch分析图
+					this.drawParams.fileNameList = ['scatter.jpg']
+					getCharts(this.drawParams).then((res) => {
+						console.log('Rt-Ch分析图',res)
+					})
 					break
 			}
 		},
-		// 导出dropDown command事件
-		handleExport(command) {
-			console.log(command)
-			switch (command) {
-				case 'rcChart':
+		// 导出事件
+		handleExport(index) {
+			switch (index) {
+				case 0:
 
 					break
-				case 'category':
+				case 1:
 
 					break
-				case 'graph':
+				case 2:
 
 					break
-				case 'codeRecord':
+				case 3:
 					this.exportCode(this.history, '编码记录')
 					break
-				case 'frequency':
+				case 4:
 
 					break
-				case 'complete':
+				case 5:
 
 					break
 			}
 		},
+
+		/*-----------------绘图 RC曲线图 start--------------------*/
 		// echarts初始化
 		echartsInit(sourceData) {
 			var rcChart = this.echarts.init(document.getElementById('echarts-container'), null, { width: 1000, height: 450 })
@@ -704,23 +771,9 @@ export default {
 				}
 			})
 		},
-		drawBehavior() {
-			const params = {
-				videoId: localStorage.getItem('id'),
-				videoName: 'behavierPieFre.jpg'
-			}
-			getCharts(params).then((res) => {
-				console.log(res)
-			})
-		},
+		/*-----------------绘图 RC曲线图 end--------------------*/
 
 		/*-----------------绘图 & 导出end----------------------*/
-
-		videoTimeupdate(e) {
-			console.log(e)
-			e.target.setAttribute('controls', 'controls')
-		},
-
 		// 时间格式转化
 		timeTranslate(time) {
 			let timeArr = time.toString().split('.')
@@ -790,6 +843,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
+$fontColor: rgba(255, 255, 255, 0.85); //图标字体颜色
+$bgColor: #17171a; //弹出层背景色 drawer dialog btn
+
 .home {
 	height: 91vh;
 	width: 100%;
@@ -799,27 +855,41 @@ export default {
 	video {
 		width: 100%;
 		background-color: #000;
-		&:focus-visible{
+
+		&:focus-visible {
 			outline: none;
 		}
 	}
 
+	.duration {
+		position: absolute;
+		top: 1%;
+		width: 100%;
+		margin: 0;
+		text-align: center;
+		color: $fontColor;
+	}
+
 	::v-deep .tool-wrap {
 		display: flex;
 		flex-direction: column;
 		position: absolute;
 		top: 1%;
-		.el-button{
-			margin: 8px 5px;
-			background-color: rgb(23, 23, 26);
 
+		.el-button {
+			margin: 8px 5px;
+			background-color: $bgColor;
 			padding: 10px;
 			border: none;
-			i{
+
+			&:hover {
+				background-color: #464646;
+			}
+
+			i {
 				font-size: 14px;
 				font-weight: bold;
-				color: #fff;
-				opacity: .85;
+				color: $fontColor;
 			}
 		}
 	}
@@ -837,12 +907,11 @@ export default {
 			i {
 				font-size: 16px;
 				font-weight: bold;
-				color: #fff;
-				opacity: .85;
+				color: $fontColor;
 			}
 
 			&:hover {
-				background-color: rgb(23, 23, 26);
+				background-color: $bgColor;
 			}
 		}
 	}
@@ -854,6 +923,55 @@ export default {
 	::v-deep .v-okc {
 		right: 10px;
 	}
+
+	::v-deep .el-drawer__wrapper {
+		position: absolute;
+
+		.v-drawer {
+			min-width: 166px !important;
+			background-color: $bgColor;
+
+			.options {
+				list-style-type: none;
+				margin: 0;
+				padding: 0;
+
+				li {
+					font-size: 14px;
+					padding: 6px 0;
+					position: relative;
+					left: 0;
+					cursor: pointer;
+					transition: all .5s;
+
+					&.active {
+						left: 15px;
+						color: #82b9e1;
+					}
+
+					&:hover {
+						color: #82b9e1;
+					}
+				}
+			}
+
+			.el-drawer__header {
+				color: $fontColor;
+				margin-bottom: 20px;
+				padding: 10px;
+				border-bottom: 1px solid rgba(255, 255, 255, .4);
+			}
+
+			.el-drawer__body {
+				color: $fontColor;
+				padding: 0 10px;
+			}
+		}
+	}
+
+	::v-deep .v-modal {
+		position: absolute;
+	}
 }
 
 .projectForm {