feat(live): downlaod

src/api/scene/list.ts

@@ -1,12 +1,18 @@
 import { defHttp } from '/@/utils/http/axios';
-import { PageParams, RentListGetResultModel, SceneEditParam, SceneDownloadParam } from './model';
+import {
+  PageParams,
+  RentListGetResultModel,
+  SceneEditParam,
+  SceneDownloadParam,
+  getDownloadProcessModel,
+} from './model';
 import { Result } from '/#/axios';
 
 enum Api {
   pageList = '/zfb-api/zfb/scene/pageList',
   generateSceneEditToken = '/zfb-api/zfb/api/platform/generateSceneEditToken',
   downloadSceneData = '/zfb-api/zfb/scene/downloadSceneData',
-  getDownloadProcess = '/zfb-api/zfb/scene/getDownloadProcess"',
+  getDownloadProcess = '/zfb-api/zfb/scene/getDownloadProcess',
 }
 
 /**
@@ -33,7 +39,7 @@ export const downloadSceneDataAPi = (params: SceneDownloadParam) =>
     },
   });
 export const getDownloadProcessApi = (params: SceneDownloadParam) =>
-  defHttp.get<RentListGetResultModel>({
+  defHttp.get<getDownloadProcessModel>({
     url: Api.getDownloadProcess,
     params,
     headers: {

src/api/scene/model.ts

@@ -51,8 +51,13 @@ export interface SceneLiveItem {
   updateUserId: number;
 }
 
+export interface SceneProccessItem {
+  precent?: number;
+}
+
 /**
  * @description: Request list return value
  */
-export type RentListGetResultModel = BasicFetchResult<DeviceListItem>;
+export type RentListGetResultModel = BasicFetchResult<SceneLiveItem>;
 export type LiveListGetResultModel = BasicFetchResult<SceneLiveItem>;
+export type GetDownloadProcessModel = BasicFetchResult<SceneProccessItem>;

src/locales/lang/zh-CN/routes/scenes.ts

@@ -17,6 +17,7 @@ export default {
   downloadScene: '下载场景',
   downloadSceneConfirm: '是否确认下载场景',
   editor: '打开编辑器',
+  cancelDownload: '取消下载',
   roleType: {
     0: '公司管理员',
     1: '公司员工',

src/views/scenes/downloadModal.vue

@@ -0,0 +1,137 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    :title="t('routes.scenes.downloadScene')"
+    :showCancelBtn="false"
+    :okText="t('routes.scenes.cancelDownload')"
+    @ok="handleSubmit"
+    @cancel="cancelDownload"
+  >
+    <div class="pt-20px">
+      <BasicForm @register="registerForm">
+        <template #label="{ model, field }">
+          {{ model[field] }}
+        </template>
+        <template #process> {{ downloadInfo.process }} % </template>
+        <template #status> {{ downloadInfo.status }} </template>
+      </BasicForm>
+    </div>
+    <template #centerFooter>
+      <!-- <a-button>xxxx</a-button> -->
+    </template>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, ref, watch } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
+  // import { BasicTable, useTable, BasicColumn, FormSchema } from '/@/components/Table';
+  // import { useMessage } from '/@/hooks/web/useMessage';
+  // import { checkUserAddAble } from '/@/api/corporation/modal';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { getDownloadProcessApi } from '/@/api/scene/list';
+  // import { bindAnchorListParam } from '/@/api/scene/model';
+  // import { Time } from '/@/components/Time';
+  // import { useUserStore } from '/@/store/modules/user';
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'sceneName',
+      label: '场景名称:',
+      component: 'Input',
+      slot: 'label',
+    },
+    {
+      field: 'process',
+      label: '下载进度:',
+      component: 'Input',
+      slot: 'process',
+    },
+    {
+      field: 'status',
+      label: '状态：',
+      component: 'Input',
+      slot: 'status',
+    },
+  ];
+
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    props: {
+      userData: { type: Object },
+    },
+    emits: ['register', 'success'],
+    setup() {
+      const { t } = useI18n();
+      // const { createMessage } = useMessage();
+      const sceneNum = ref('');
+      const downloadInfo = reactive<Recordable>({});
+      downloadInfo.timer = null;
+      downloadInfo.process = 0;
+      downloadInfo.status = '下载中';
+
+      const [registerForm, { setFieldsValue }] = useForm({
+        schemas: schemas,
+        labelWidth: 120,
+        showActionButtonGroup: false,
+
+        actionColOptions: {
+          span: 24,
+        },
+        // submitFunc: handleSubmit,
+      });
+      const [register, { closeModal }] = useModalInner((data) => {
+        data && onDataReceive(data);
+      });
+
+      function onDataReceive(data) {
+        console.log('Data Received', data, data.num);
+
+        setFieldsValue({
+          ...data,
+        });
+
+        sceneNum.value = data.num;
+      }
+      const handleSubmit = async () => {
+        try {
+          cancelDownload();
+          closeModal();
+        } catch (error) {}
+      };
+      async function getDownloadInfo(sceneNum: string) {
+        downloadInfo.timer = setInterval(async () => {
+          const res = await getDownloadProcessApi({ sceneNum });
+          console.log('res', res);
+          const percent = res.percent;
+          downloadInfo.process = percent;
+        }, 2000);
+      }
+      function cancelDownload() {
+        clearInterval(downloadInfo.timer);
+        sceneNum.value = '';
+      }
+      watch(
+        () => sceneNum.value,
+        () => {
+          console.log('sceneNum', sceneNum.value);
+          if (sceneNum.value) {
+            getDownloadInfo(sceneNum.value);
+          }
+        },
+      );
+
+      return {
+        t,
+        register,
+        schemas,
+        handleSubmit,
+        closeModal,
+        registerForm,
+        downloadInfo,
+        cancelDownload,
+      };
+    },
+  });
+</script>

src/views/scenes/list.vue

@@ -5,6 +5,7 @@
       <template #cover="{ record }">
         <TableImg :size="150" :simpleShow="true" :imgList="[record.cover]" />
       </template>
+
       <template #action="{ record }">
         <TableAction
           :actions="[
@@ -29,6 +30,7 @@
         />
       </template>
     </BasicTable>
+    <DownloadModal @register="registerDownloadModal" />
   </div>
 </template>
 <script lang="ts">
@@ -42,18 +44,21 @@
     TableImg,
   } from '/@/components/Table';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { useModal } from '/@/components/Modal';
   // import { uploadApi } from '/@/api/sys/upload';
-  // import { Switch } from 'ant-design-vue';
+  // import { Progress } from 'ant-design-vue';
   // import { h } from 'vue';
-  import { ListApi, generateSceneEditTokenApi } from '/@/api/scene/list';
+  import { ListApi, generateSceneEditTokenApi, downloadSceneDataAPi } from '/@/api/scene/list';
   import { useI18n } from '/@/hooks/web/useI18n';
 
   import { useUserStore } from '/@/store/modules/user';
+  import DownloadModal from './downloadModal.vue';
 
   export default defineComponent({
-    components: { BasicTable, TableAction, TableImg },
+    components: { BasicTable, TableAction, TableImg, DownloadModal },
     setup() {
       const { createMessage } = useMessage();
+      const [registerDownloadModal, { openModal: openDownloadModal }] = useModal();
       const { t } = useI18n();
 
       const columns: BasicColumn[] = [
@@ -101,13 +106,13 @@
           width: 180,
         },
 
-        {
-          title: t('routes.scenes.process'),
-          dataIndex: '',
-          width: 180,
-          slots: { customRender: 'process' },
-          ifShow: false,
-        },
+        // {
+        //   title: t('routes.scenes.process'),
+        //   dataIndex: '',
+        //   width: 180,
+        //   slots: { customRender: 'process' },
+        //   ifShow: false,
+        // },
 
         {
           title: t('common.operation'),
@@ -193,7 +198,10 @@
       }
 
       async function handleDownloadScene(record: Recordable) {
-        console.log('record', record);
+        await downloadSceneDataAPi({
+          sceneNum: record.sceneName,
+        });
+        await openDownloadModal(true, record);
       }
       return {
         registerTable,
@@ -201,6 +209,7 @@
         t,
         openSceneEditor,
         handleDownloadScene,
+        registerDownloadModal,
       };
     },
   });