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

964a42af · haojie · daf04614 · 964a42af · 964a42af · 964a42af
Commit 964a42af authored Sep 08, 2023 by haojie
10 changed files
--- a/src/App.vue
+++ b/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数据');
  }
 };

--- a/src/components/CustomizationStatus/index.less
+++ b/src/components/CustomizationStatus/index.less
@@ -8,5 +8,8 @@
    flex-direction: column;
    justify-content: center;
    align-items: center;
+    & > * {
+      margin: 4px 0;
+    }
  }
 }
--- a/src/components/CustomizationStatus/index.tsx
+++ b/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:

--- a/src/components/upload/index.less
+++ b/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;

--- a/src/components/upload/index.tsx
+++ b/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.url = props.modelValue;
-        Curfile.status = 2;
+        curfile.status = 2;
      } else if (type == 'progress') {
-        Curfile.status = 1;
+        curfile.status = 1;
      } else {
-        Curfile.url = '';
+        curfile.url = '';
-        Curfile.status = 0;
+        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;
+      curfile.url = url;
-      submitUrl(Curfile.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>

--- a/src/pages/faceTransplant/components/header.vue
+++ b/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;
+            }
+          }
+        }
      }
    }
  }

--- a/src/pages/faceTransplant/components/record.vue
+++ b/src/pages/faceTransplant/components/record.vue
 <template>
  <div class="face-transplant-record">
+    <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="" />
@@ -22,19 +23,21 @@
            >
          </div>
        </div>
-      <CustomizationStatus :status="item.audit_status"></CustomizationStatus>
+        <CustomizationStatus :status="item.audit_status">
+          <template #progressTip> <div class="progress-tips">该过程需要10～24小时</div> </template>
+        </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 { pyDownloadVideo } from '@/utils/pyqt';
-import { downloadMp4 } from '@/utils/tool';
-// import useNotify from '@/hooks/useNotify';
-// const { showNotifyPlugin } = useNotify();
 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);
+  pyDownloadVideo({
-  downloadMp4(url);
+    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;
  }

--- a/src/pages/faceTransplant/index.vue
+++ b/src/pages/faceTransplant/index.vue
 <template>
-  <div class="">
  <Customizable
+    class="face-transplant-izable"
    :video="true"
    :submit="submit"
    :icon="getIcon()"
@@ -17,7 +17,6 @@
      </CustomTabPanel>
    </CustomTabs>
  </Customizable>
-  </div>
 </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>
--- a/src/pages/home/components/myDigtalPeople.vue
+++ b/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) {
+  pyDownloadVideo({
-    // 通知python合并视频并
-    callPyjsInWindow('downLoadVideoToLocal', {
    list: list,
    id: item.id,
  });
-    show_message('正在下载中，请等待', 'info');
-  } else {
-    show_message('没有视频');
-  }
 };
 const startLive = (item: any) => {

--- a/src/utils/pyqt.ts
+++ b/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');
+};