From 8f41a4f8bb6570d7a4db1b1a8293e1eacb56990a Mon Sep 17 00:00:00 2001
From: Flex <q1406482700@163.com>
Date: 星期一, 07 四月 2025 10:57:45 +0800
Subject: [PATCH] 修改mov视频展示方式
---
easegen-front/src/views/digitalcourse/digitalhumans/LookDigitalHumansForm.vue | 271 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
easegen-front/src/views/digitalcourse/digitalhumans/index.vue | 16 ++
easegen-front/src/views/digitalcourse/digitalhumans/DigitalHumansForm.vue | 8 -
3 files changed, 284 insertions(+), 11 deletions(-)
diff --git a/easegen-front/src/views/digitalcourse/digitalhumans/DigitalHumansForm.vue b/easegen-front/src/views/digitalcourse/digitalhumans/DigitalHumansForm.vue
index 848ea7d..142f6f2 100644
--- a/easegen-front/src/views/digitalcourse/digitalhumans/DigitalHumansForm.vue
+++ b/easegen-front/src/views/digitalcourse/digitalhumans/DigitalHumansForm.vue
@@ -47,13 +47,6 @@
<el-form-item v-if="formData.useModel == 2" :label="t('digitalhumans.video')" prop="videoUrl">
<!-- 鍘熸湰鑷甫鐨勮棰戜笂浼� -->
<UploadFile v-if="!(formData.videoUrl || formData.fixVideoUrl)" v-model="formData.videoUrl" :fileType="['mp4','mov']" :limit="1" @on-success="handleFileSuccess('videoUrl', $event)"/>
- <!-- 鍚庢湡娣诲姞鐨勫幓闄ょ豢骞曠殑 -->
- <!-- <div v-if="!(formData.videoUrl || formData.fixVideoUrl)" >
- <CES2 @start="StartCes" @Thnd="End" msg="Welcome to Your Vue.js App"/>
- <div style="color: red;" v-show="isUploading" >
- 褰撳墠姝ｅ湪澶勭悊骞朵笂浼犱腑锛岃鑰愬績绛夊緟...
- </div>
- </div> -->
<!-- 鍘熻棰戞挱鏀惧櫒 -->
<!-- <video-player v-if="formData.videoUrl || formData.fixVideoUrl" :property="videoProperty"/> -->
<!-- 鏂扮殑瑙嗛鎾斁鍣� -->
@@ -105,7 +98,6 @@
import {VideoPlayerProperty} from "@/components/DiyEditor/components/mobile/VideoPlayer/config";
import { useUpload } from '@/components/UploadFile/src/useUpload'
import { el } from 'element-plus/es/locale';
-import CES2 from './CES2.vue'
import { any } from 'vue-types';
const { t } = useI18n() // 鍥介檯鍖�
diff --git a/easegen-front/src/views/digitalcourse/digitalhumans/LookDigitalHumansForm.vue b/easegen-front/src/views/digitalcourse/digitalhumans/LookDigitalHumansForm.vue
new file mode 100644
index 0000000..8064faf
--- /dev/null
+++ b/easegen-front/src/views/digitalcourse/digitalhumans/LookDigitalHumansForm.vue
@@ -0,0 +1,271 @@
+<template>
+ <Dialog :title="dialogTitle" v-model="dialogVisible">
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ label-width="120px"
+ v-loading="formLoading"
+ >
+ <el-form-item :label="t('digitalhumans.name')" prop="name">
+ <el-input v-model="formData.name" :placeholder="t('common.inputText') + t('digitalhumans.name')" />
+ </el-form-item>
+ <el-form-item :label="t('digitalhumans.code')" prop="code" v-if="false" > // 褰撳墠鏁板瓧浜鸿棰戠殑缂栫爜绫诲瀷
+ <el-input v-model="formData.code" :placeholder="t('common.inputText') + t('digitalhumans.code')" />
+ </el-form-item>
+ <el-form-item :label="t('digitalhumans.gender')" prop="gender">
+ <el-select v-model="formData.gender" :placeholder="t('common.selectText')+t('digitalhumans.gender')">
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item :label="t('digitalhumans.useModel')" prop="useModel" v-if="false" > //鏁板瓧浜烘ā寮忛�夋嫨妗�
+ <el-select v-model="formData.useModel" :placeholder="t('common.selectText')+t('digitalhumans.useModel')">
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.USE_MODEL)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="Number(dict.value)"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="鑳屾櫙鏍峰紡" prop="isTransparent">
+ <el-select v-model="formData.isTransparent" placeholder="璇烽�夋嫨鏄惁鍘婚櫎鑳屾櫙">
+ <el-option value="1" label="閫忔槑鑳屾櫙"/>
+ <el-option value="2" label="缁垮箷鑳屾櫙"/>
+ </el-select>
+ </el-form-item>
+ <el-form-item v-if="formData.useModel == 1" :label="t('digitalhumans.picture')" prop="pictureUrl">
+ <UploadImg v-if="formData" v-model="formData.fixPictureUrl" />
+ <UploadImg v-else v-model="formData.pictureUrl" />
+ </el-form-item>
+
+ <!-- <el-form-item v-if="formData.useModel == 2" :label="t('digitalhumans.video')" prop="videoUrl"> -->
+ <el-form-item v-if="false" :label="t('digitalhumans.video')" prop="videoUrl">
+ <!-- 鍘熸湰鑷甫鐨勮棰戜笂浼� -->
+ <UploadFile v-if="!(formData.videoUrl || formData.fixVideoUrl)" v-model="formData.videoUrl" :fileType="['mp4','mov']" :limit="1" @on-success="handleFileSuccess('videoUrl', $event)"/>
+ <!-- 鍘熻棰戞挱鏀惧櫒 -->
+ <!-- <video-player v-if="formData.videoUrl || formData.fixVideoUrl" :property="videoProperty"/> -->
+ <!-- 鏂扮殑瑙嗛鎾斁鍣� -->
+ <VideoPlayerMov v-if="formData.videoUrl || formData.fixVideoUrl" :property="videoProperty"/>
+ </el-form-item>
+ <!-- <el-form-item :label="鎶犲浘鏍囪瘑" prop="matting">
+ <el-select v-model="formData.matting" :placeholder="璇烽�夋嫨鎶犲浘鏍囪瘑">
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.DIGITALCOURSE_DIGITALHUMAN_MATTING)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>-->
+ <el-form-item :label="t('digitalhumans.posture')" prop="posture">
+ <el-select v-model="formData.posture" :placeholder="t('common.selectText') + t('digitalhumans.posture')">
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.DIGITALCOURSE_DIGITALHUMAN_POSTURE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item :label="t('digitalhumans.type')" prop="type">
+ <el-select v-model="formData.type" :placeholder="t('common.selectText') + t('digitalhumans.type')">
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.DIGITALCOURSE_DIGITALHUMAN_TYPE)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <el-button @click="submitForm" type="primary" :disabled="formLoading" :loading="isUploading" >{{t('common.ok')}}</el-button>
+ <el-button @click="dialogVisible = false">{{t('common.cancel')}}</el-button>
+ </template>
+ </Dialog>
+ </template>
+ <script setup lang="ts">
+ import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+ import * as DigitalHumansApi from '@/api/digitalcourse/digitalhumans'
+ import VideoPlayer from "@/components/DiyEditor/components/mobile/VideoPlayer/index.vue";
+ import VideoPlayerMov from "@/components/DiyEditor/components/mobile/VideoPlayer_mov/index.vue";
+ import {DiyComponent} from "@/components/DiyEditor/util";
+ import {VideoPlayerProperty} from "@/components/DiyEditor/components/mobile/VideoPlayer/config";
+ import { useUpload } from '@/components/UploadFile/src/useUpload'
+ import { el } from 'element-plus/es/locale';
+ import { any } from 'vue-types';
+
+ const { t } = useI18n() // 鍥介檯鍖�
+ const message = useMessage() // 娑堟伅寮圭獥
+
+ const { uploadUrl, httpRequest } = useUpload() //涓婁紶鏂规硶
+ const dialogVisible = ref(false) // 寮圭獥鐨勬槸鍚﹀睍绀�
+ const dialogTitle = ref('') // 寮圭獥鐨勬爣棰�
+ const formLoading = ref(false) // 琛ㄥ崟鐨勫姞杞戒腑锛�1锛変慨鏀规椂鐨勬暟鎹姞杞斤紱2锛夋彁浜ょ殑鎸夐挳绂佺敤
+ const formType = ref('') // 琛ㄥ崟鐨勭被鍨嬶細create - 鏂板锛泆pdate - 淇敼
+ const formData = ref({
+ id: undefined,
+ expireStatus: undefined,
+ finishTime: undefined,
+ gender: undefined,
+ matting: undefined,
+ name: undefined,
+ code: undefined,
+ pictureUrl: undefined,
+ posture: undefined,
+ snapshotHeight: undefined,
+ snapshotUrl: undefined,
+ snapshotWidth: undefined,
+ type: undefined,
+ useGeneralModel: undefined,
+ useModel: undefined,
+ status: undefined,
+ isTransparent: undefined,
+ })
+
+ // 褰撳墠鏄惁姝ｅ湪涓婁紶瑙嗛
+ const isUploading = ref(false)
+
+ const videoProperty = {
+ videoUrl: '',
+ posterUrl: '',
+ autoplay: false,
+ style: {
+ bgType: 'color',
+ bgColor: '#fff',
+ marginBottom: 8,
+ height: 300
+ }
+ } as DiyComponent<VideoPlayerProperty>
+
+ watch(()=> formData.value.videoUrl,(newVal,oldValue)=>{
+ if (newVal && newVal.length > 0){
+ videoProperty.videoUrl = formData.value.fixVideoUrl || newVal
+ }
+ })
+ const formRules = reactive({
+ gender: [{ required: true, message: '鎬у埆涓嶈兘涓虹┖', trigger: 'change' }],
+ name: [{ required: true, message: '鍚嶇О涓嶈兘涓虹┖', trigger: 'blur' }],
+ pictureUrl: [{ required: true, message: '鍥剧墖URL涓嶈兘涓虹┖', trigger: 'blur' }],
+ posture: [{ required: true, message: '濮垮娍涓嶈兘涓虹┖', trigger: 'change' }],
+ snapshotHeight: [{ required: true, message: '蹇収楂樺害涓嶈兘涓虹┖', trigger: 'blur' }],
+ snapshotUrl: [{ required: true, message: '蹇収URL涓嶈兘涓虹┖', trigger: 'blur' }],
+ snapshotWidth: [{ required: true, message: '蹇収瀹藉害涓嶈兘涓虹┖', trigger: 'blur' }],
+ type: [{ required: true, message: '绫诲瀷涓嶈兘涓虹┖', trigger: 'change' }],
+ useGeneralModel: [{ required: true, message: '浣跨敤閫氱敤妯″瀷涓嶈兘涓虹┖', trigger: 'change' }],
+ isTransparent: [{ required: true, message: '鏄惁鍘婚櫎鑳屾櫙涓嶈兘涓虹┖', trigger: 'change' }],
+ status: [{ required: true, message: '鐘舵�佷笉鑳戒负绌�', trigger: 'change' }],
+ videoUrl: [{ required: true, message: '瑙嗛涓嶈兘涓虹┖', trigger: 'blur' }]
+ })
+ const formRef = ref() // 琛ㄥ崟 Ref
+
+ const StartCes = () => {
+ console.log( " ----- 寮�濮� ----- " )
+ isUploading.value = true
+ }
+
+ const End = (res)=>{
+ const FileObject = {
+ file:res
+ }
+ httpRequest( FileObject ).then( response =>{
+ console.log(response)
+ formData.value.videoUrl = response.data;
+ } ).finally( res => {
+ isUploading.value = false
+ } )
+
+ }
+
+ /** 鎵撳紑寮圭獥 */
+ const open = async (type: string, id?: number) => {
+ dialogVisible.value = true
+ dialogTitle.value = t('action.' + type)
+ formType.value = type
+ resetForm()
+ // 淇敼鏃讹紝璁剧疆鏁版嵁
+ if (id) {
+ formLoading.value = true
+ try {
+ formData.value = await DigitalHumansApi.getDigitalHumans(id)
+ } finally {
+ formLoading.value = false
+ }
+ }else{
+ InitHumMODEL()
+ }
+ }
+ defineExpose({ open }) // 鎻愪緵 open 鏂规硶锛岀敤浜庢墦寮�寮圭獥
+
+ /** 鎻愪氦琛ㄥ崟 */
+ const emit = defineEmits(['success']) // 瀹氫箟 success 浜嬩欢锛岀敤浜庢搷浣滄垚鍔熷悗鐨勫洖璋�
+ const submitForm = async () => {
+ // 鏍￠獙琛ㄥ崟
+ await formRef.value.validate()
+ // 鎻愪氦璇锋眰
+ formLoading.value = true
+ try {
+ const data = formData.value as unknown as DigitalHumansApi.DigitalHumansVO
+ if (formType.value === 'create') {
+ await DigitalHumansApi.createDigitalHumans(data)
+ message.success(t('common.createSuccess'))
+ } else {
+ await DigitalHumansApi.updateDigitalHumans(data)
+ message.success(t('common.updateSuccess'))
+ }
+ dialogVisible.value = false
+ // 鍙戦�佹搷浣滄垚鍔熺殑浜嬩欢
+ emit('success')
+ } finally {
+ formLoading.value = false
+ }
+ }
+
+ /** 閲嶇疆琛ㄥ崟 */
+ const resetForm = () => {
+ formData.value = {
+ id: undefined,
+ expireStatus: undefined,
+ finishTime: undefined,
+ gender: undefined,
+ matting: undefined,
+ name: undefined,
+ code: undefined,
+ pictureUrl: undefined,
+ posture: undefined,
+ snapshotHeight: undefined,
+ snapshotUrl: undefined,
+ snapshotWidth: undefined,
+ type: undefined,
+ useGeneralModel: undefined,
+ useModel: undefined,
+ status: undefined,
+ }
+ formRef.value?.resetFields()
+ }
+ const handleFileSuccess = (fileType,response) => {
+ if (fileType === 'videoUrl') {
+ formData.value.videoUrl = response.data;
+ }
+ };
+
+ // 淇敼榛樿鐨勬暟瀛椾汉瑙嗛妯″紡涓鸿棰�
+
+ const InitHumMODEL = ()=>{
+ let ModelList = getIntDictOptions( DICT_TYPE.USE_MODEL )
+ for (let index = 0; index < ModelList.length; index++) {
+ const element = ModelList[index];
+ if( element.label === "瑙嗛" ){
+ formData.value.useModel = Number( element.value )
+ }
+ }
+ }
+
+ </script>
+
\ No newline at end of file
diff --git a/easegen-front/src/views/digitalcourse/digitalhumans/index.vue b/easegen-front/src/views/digitalcourse/digitalhumans/index.vue
index 3b6167f..e0ecd01 100644
--- a/easegen-front/src/views/digitalcourse/digitalhumans/index.vue
+++ b/easegen-front/src/views/digitalcourse/digitalhumans/index.vue
@@ -173,7 +173,7 @@
<el-button
link
type="primary"
- @click="openForm('detail', scope.row.id)"
+ @click="OpenLookformRef('detail', scope.row.id)"
v-hasPermi="['digitalcourse:digital-humans:delete']"
>
{{t('digitalhumans.view')}}
@@ -190,8 +190,10 @@
/>
</ContentWrap>
- <!-- 琛ㄥ崟寮圭獥锛氭坊鍔�/淇敼 -->
+ <!-- 琛ㄥ崟寮圭獥锛氭坊鍔� -->
<DigitalHumansForm ref="formRef" @success="getList" />
+ <!-- 琛ㄥ崟寮圭獥锛氫慨鏀� -->
+ <LookDigitalHumansForm ref="LookformRef" @success="getList" />
<!-- 澶勭悊 -->
<AuditForm ref="auditFormRef" @success="getList" />
</template>
@@ -203,6 +205,7 @@
import download from '@/utils/download'
import * as DigitalHumansApi from '@/api/digitalcourse/digitalhumans'
import DigitalHumansForm from './DigitalHumansForm.vue'
+import LookDigitalHumansForm from './LookDigitalHumansForm.vue'
import AuditForm from './AuditForm.vue'
import { useUserStoreWithOut } from '@/store/modules/user'
const userStore = useUserStoreWithOut() // 鐢ㄦ埛淇℃伅缂撳瓨
@@ -260,13 +263,20 @@
handleQuery()
}
-/** 娣诲姞/淇敼鎿嶄綔 */
+/** 娣诲姞鎿嶄綔 */
const formRef = ref()
const auditFormRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
+/* 淇敼鎿嶄綔 */
+const LookformRef = ref()
+const OpenLookformRef = ( type: string, id?:number ) => {
+ LookformRef.value.open( type, id )
+}
+
+
const openAuditForm = (type: string, id?: number) => {
auditFormRef.value.open(type, id)
}
--
Gitblit v1.9.3