Skip to content

L
live-management-web
Commit 964a42af by haojie
Options

新增图片和视频上传后的显示

parent daf04614
Showing with 169 additions and 87 deletions
src/App.vue
......@@ -29,15 +29,13 @@ const mode = computed(() => {
// };
const onMessage = (params: string) => {
console.log('接收到值了');
console.log(params);
if (typeof params === 'string') {
params = JSON.parse(params);
}
if (Object.keys(params).length) {
show_message(params.value, params.type);
} else {
console.log('没有数据');
console.log('没有onMessage数据');
}
};
......
src/components/CustomizationStatus/index.less
......@@ -8,5 +8,8 @@
flex-direction: column;
justify-content: center;
align-items: center;
& > * {
margin: 4px 0;
}
}
}
src/components/CustomizationStatus/index.tsx
......@@ -9,7 +9,7 @@ export default defineComponent({
default: 1,
},
},
setup(props, ctx) {
setup(props, { slots }) {
const imgs = {
underReview: new URL('../../assets/svg/custom/underReview.svg', import.meta.url).href,
auditFailure: new URL('../../assets/svg/custom/auditFailure.svg', import.meta.url).href,
......@@ -37,6 +37,7 @@ export default defineComponent({
<div class="status">
<img src={imgs.progress} />
<div>进行中</div>
{slots.progressTip?.()}
</div>
);
case LIVE_AUDIT_STATUS.LIVE_AUDIT_STATUS_FINISH:
......
src/components/upload/index.less
......@@ -87,12 +87,19 @@
flex-direction: column;
width: 100%;
height: 100%;
& > * {
margin: 4px;
}
.icon {
img {
width: 100px;
height: 100px;
}
}
.image-file {
width: 200px;
height: 200px;
}
.file-name {
font-size: @size-16;
color: #888fa1;
......
src/components/upload/index.tsx
......@@ -11,7 +11,7 @@ import {
} from 'tdesign-vue-next';
import { getUserCookie } from '@/utils/api/userApi';
import request from '@/utils/otherRequest';
import { getFileSuffix, isDev, show_message } from '@/utils/tool';
import { getFileSuffix, show_message, getFirstFrameOfVideo } from '@/utils/tool';
import { v4 } from 'uuid';
import Button from '../Button.vue';
......@@ -44,6 +44,14 @@ export default defineComponent({
type: Boolean,
default: false,
},
showImage: {
type: Boolean,
default: false,
},
showFirstFrame: {
type: Boolean,
default: false,
},
oldName: {
type: String,
default: '',
......@@ -53,10 +61,11 @@ export default defineComponent({
setup(props, { emit }) {
const files = ref([]);
// 文件地址
const Curfile = reactive({
const curfile = reactive({
url: props.modelValue,
status: 0,
oldName: '',
firstFrame: '',
});
const actionUrl = ref('');
// 上传进度条
......@@ -79,13 +88,14 @@ export default defineComponent({
// 修改上传状态
const changeUploadStatus = (type: 'success' | 'wait' | 'progress' = 'success') => {
if (type == 'success') {
Curfile.url = props.modelValue;
Curfile.status = 2;
curfile.url = props.modelValue;
curfile.status = 2;
} else if (type == 'progress') {
Curfile.status = 1;
curfile.status = 1;
} else {
Curfile.url = '';
Curfile.status = 0;
curfile.url = '';
curfile.status = 0;
curfile.firstFrame = '';
files.value = [];
}
};
......@@ -93,7 +103,7 @@ export default defineComponent({
// 提交url
const submitUrl = (url: string) => {
emit('update:modelValue', url);
emit('change', url, props.id, Curfile.oldName);
emit('change', url, props.id, curfile.oldName);
};
// 获取文件尺寸
......@@ -146,20 +156,24 @@ export default defineComponent({
MessagePlugin.error(`文件 ${file.name} 上传失败`);
};
// 上传成功回调
const UploadSuccessCallback = (uuid: any, url: any) => {
const UploadSuccessCallback = async (uuid: any, url: any) => {
if (props.showFirstFrame) {
let first = await getFirstFrameOfVideo(url);
curfile.firstFrame = URL.createObjectURL(first);
}
// 关闭定时器
window.clearInterval(percentageInterval);
MessagePlugin.success('上传成功');
// 将将完整url传给父组件
Curfile.url = url;
submitUrl(Curfile.url);
curfile.url = url;
submitUrl(curfile.url);
changeUploadStatus('success');
};
// 上传失败回调
const UploadErrorCallback = () => {
// 关闭定时器
window.clearInterval(percentageInterval);
submitUrl(Curfile.url);
submitUrl(curfile.url);
MessagePlugin.warning('上传失败');
changeUploadStatus('wait');
};
......@@ -167,10 +181,10 @@ export default defineComponent({
const ExtranetUpload = (file: any) => {
openpercentage();
// 上传中状态
Curfile.status = 1;
curfile.status = 1;
return new Promise<RequestMethodResponse>((resolve) => {
if (props.showOldName) {
Curfile.oldName = file.name;
curfile.oldName = file.name;
}
const uuid = v4();
let url = '';
......@@ -205,7 +219,7 @@ export default defineComponent({
UploadSuccessCallback(uuid, url);
resolve({
status: 'success',
response: { url: Curfile.url },
response: { url: curfile.url },
});
} else {
UploadErrorCallback();
......@@ -232,7 +246,7 @@ export default defineComponent({
(v) => {
if (v) {
// 状态成功
Curfile.url = v;
curfile.url = v;
changeUploadStatus('success');
} else {
changeUploadStatus('wait');
......@@ -298,7 +312,10 @@ export default defineComponent({
<div class="icon">
{props.uploadInfo.successIcon ? <img src={props.uploadInfo.successIcon} alt="" /> : ''}
</div>
<div class="file-name">{Curfile.oldName ? Curfile.oldName : props.oldName}</div>
{props.showFirstFrame ? <img class="image-file" src={curfile.firstFrame} alt="" /> : ''}
{props.showImage ? <img class="image-file" src={curfile.url} alt="" /> : ''}
<div class="file-name">{curfile.oldName ? curfile.oldName : props.oldName}</div>
<Button class="reset-submit" theme="green" onClick={reStart}>
{props.uploadInfo.successButtonLabel ?? '重新上传'}
</Button>
......@@ -307,9 +324,9 @@ export default defineComponent({
};
// 获取当前上传状态
const currentUploadStatus = () => {
if (Curfile.status == 0) {
if (curfile.status == 0) {
return notUploadHtml();
} else if (Curfile.status == 1) {
} else if (curfile.status == 1) {
// 上传中
return UploadingHtml();
} else {
......@@ -322,13 +339,13 @@ export default defineComponent({
<div class="custom-real-upload">
<div class="real-upload-content">
{/* <div class="custom-real-upload-component">{currentUploadStatus()}</div> */}
<div class="custom-real-upload-component" v-show={Curfile.status == 0}>
<div class="custom-real-upload-component" v-show={curfile.status == 0}>
{notUploadHtml()}
</div>
<div class="custom-real-upload-component" v-show={Curfile.status == 1}>
<div class="custom-real-upload-component" v-show={curfile.status == 1}>
{UploadingHtml()}
</div>
<div class="custom-real-upload-component" v-show={Curfile.status == 2}>
<div class="custom-real-upload-component" v-show={curfile.status == 2}>
{UploadSuccess()}
</div>
</div>
......
src/pages/faceTransplant/components/header.vue
......@@ -5,6 +5,7 @@
<Upload
class="face-transplant-reset-upload"
v-model="videoFile"
:showFirstFrame="true"
:config="ossConfig"
:accept="videoAccept"
:uploadInfo="videoUploadInfo"
......@@ -15,6 +16,8 @@
<Upload
class="face-transplant-reset-upload"
v-model="imageFile"
:showImage="true"
:showOldName="true"
:config="ossConfig"
:accept="imageAccept"
:uploadInfo="imageUploadInfo"
......@@ -22,7 +25,7 @@
</div>
</div>
<div class="face-transplant-footer">
<Button theme="opacity" class="face-transplant-footer-reset">重置</Button>
<Button theme="opacity" class="face-transplant-footer-reset" @click="onReset">重置</Button>
<Button theme="green" class="face-transplant-create" @click="openDialog">生成</Button>
</div>
<ConfirmDialog v-model="confirmDialogVisible" title="确定生成吗？" @confirm="confirm"></ConfirmDialog>
......@@ -70,6 +73,12 @@ const openDialog = () => {
confirmDialogVisible.value = true;
};
// 重置
const onReset = () => {
videoFile.value = '';
imageFile.value = '';
};
// 确定生成
const confirm = async () => {
try {
......@@ -111,6 +120,22 @@ onMounted(() => {
background-color: transparent;
border: 2px dashed #9f9f9f;
height: 500px;
.real-upload-content {
height: 300px;
.custom-real-upload-component {
height: 100%;
.t-upload__dragger {
height: 100%;
}
.t-upload__trigger {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
}
}
}
}
......
src/pages/faceTransplant/components/record.vue
<template>
<div class="face-transplant-record">
<div class="record-items" v-for="item in list" :key="item.id">
<div class="left">
<img :src="item.cover_url" alt="" />
</div>
<div class="center">
<div class="name">
名称:
<span>{{ item.name }}</span>
</div>
<div class="create">
创建时间:
<span>{{ item.created_at }}</span>
<template v-if="list.length">
<div class="record-items" v-for="item in list" :key="item.id">
<div class="left">
<img :src="item.cover_url" alt="" />
</div>
<div class="download-box">
<Button
theme="green"
:class="['download-button', item.audit_status != 3 ? 'download-button__disabled' : '']"
@click="onDownloadVideo(item)"
>下载</Button
>
<div class="center">
<div class="name">
名称:
<span>{{ item.name }}</span>
</div>
<div class="create">
创建时间:
<span>{{ item.created_at }}</span>
</div>
<div class="download-box">
<Button
theme="green"
:class="['download-button', item.audit_status != 3 ? 'download-button__disabled' : '']"
@click="onDownloadVideo(item)"
>下载</Button
>
</div>
</div>
<CustomizationStatus :status="item.audit_status">
<template #progressTip> <div class="progress-tips">该过程需要10～24小时</div> </template>
</CustomizationStatus>
</div>
<CustomizationStatus :status="item.audit_status"></CustomizationStatus>
</div>
</template>
<template v-else>
<div class="record-empty">没有生成记录</div>
</template>
</div>
</template>
<script lang="tsx" setup>
import CustomizationStatus from '@/components/CustomizationStatus';
import Button from '@/components/Button.vue';
import { callPyjsInWindow } from '@/utils/pyqt';
import { downloadMp4 } from '@/utils/tool';
// import useNotify from '@/hooks/useNotify';
// const { showNotifyPlugin } = useNotify();
import { pyDownloadVideo } from '@/utils/pyqt';
const props = withDefaults(
defineProps<{
......@@ -54,19 +57,33 @@ const onDownloadVideo = (item: any) => {
// 通知python下载视频
let url =
'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-22c130e428-cab2-4e1e-8904-88054d84bc1b.mp4';
callPyjsInWindow('downloadVideo', url);
downloadMp4(url);
pyDownloadVideo({
list: [url],
id: `change_face_${item.id}`,
});
};
</script>
<style lang="less">
@import '@/style/variables.less';
.face-transplant-record {
height: 100%;
border-radius: 0px 6px 0px 0px;
background: #303030;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.04);
min-height: 200px;
padding: 20px;
.record-empty {
height: 100%;
display: flex;
justify-content: center;
font-weight: bold;
font-size: @size-18;
color: white;
align-items: center;
}
.progress-tips {
font-size: @size-16;
}
& > :not(:first-child) {
margin-top: 12px;
}
......
src/pages/faceTransplant/index.vue
<template>
<div class="">
<Customizable
:video="true"
:submit="submit"
:icon="getIcon()"
:uploadInfo="uploadInfo"
:dialogInfo="dialogInfo"
:label="navigationLabels.faceTransplant"
>
<template #header>
<Header></Header>
</template>
<CustomTabs v-model="currentTab" theme="dark2" class="custom-tabs-flex">
<CustomTabPanel name="1" label="生成记录">
<Record :list="personList.list" :loading="loading"></Record>
</CustomTabPanel>
</CustomTabs>
</Customizable>
</div>
<Customizable
class="face-transplant-izable"
:video="true"
:submit="submit"
:icon="getIcon()"
:uploadInfo="uploadInfo"
:dialogInfo="dialogInfo"
:label="navigationLabels.faceTransplant"
>
<template #header>
<Header></Header>
</template>
<CustomTabs v-model="currentTab" theme="dark2" class="custom-tabs-flex">
<CustomTabPanel name="1" label="生成记录">
<Record :list="personList.list" :loading="loading"></Record>
</CustomTabPanel>
</CustomTabs>
</Customizable>
</template>
<script lang="tsx">
......@@ -105,4 +104,13 @@ onMounted(() => {
});
</script>
<style lang="less"></style>
<style lang="less">
.face-transplant-izable {
.izable-page-tabs {
overflow: unset !important;
.custom-tab-panel {
height: 100%;
}
}
}
</style>
src/pages/home/components/myDigtalPeople.vue
......@@ -63,7 +63,7 @@ import routerConfig from '@/router/tool';
import { onUpdateLiveTask } from '@/service/Common';
import { getLiveTask, deleteLiveTask, liveVideoDownload } from '@/utils/api/userApi';
import { isDev, show_message } from '@/utils/tool';
import { callPyjsInWindow, injectWindow } from '@/utils/pyqt';
import { callPyjsInWindow, injectWindow, pyDownloadVideo } from '@/utils/pyqt';
import { jumpToCreateLivePage } from '@/router/jump';
const props = withDefaults(
......@@ -126,16 +126,10 @@ const getVideoList = async (id: any) => {
// 下载数字人视频
const downLoadVideo = async (item: any) => {
let list = await getVideoList(item.id);
if (list) {
// 通知python合并视频并
callPyjsInWindow('downLoadVideoToLocal', {
list: list,
id: item.id,
});
show_message('正在下载中，请等待', 'info');
} else {
show_message('没有视频');
}
pyDownloadVideo({
list: list,
id: item.id,
});
};
const startLive = (item: any) => {
......
src/utils/pyqt.ts
import { show_message } from './tool';
export const initPyqtToWindow = (key: string = '') => {
if (key) {
window[key] = {};
......@@ -70,3 +72,13 @@ export const writeLog = (value: any) => {
window.pyjs['writeLog'](JSON.stringify(value));
}
};
// 下载视频
export const pyDownloadVideo = (value: { list: string[]; id: string | number }) => {
if (!value.list || !value.list.length) {
show_message('没有要下载的文件');
return;
}
callPyjsInWindow('downLoadVideoToLocal', value);
show_message('正在下载中，请等待', 'info');
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment