feat: 上传视频

src/enums/fileTypeEnum.ts

@@ -7,4 +7,7 @@ export enum FileTypeEnum {
   PNG = 'image/png',
   JPEG = 'image/jpeg',
   GIF = 'image/gif',
+  // 视频
+  MP4 = 'video/mp4',
+  WEBM = 'video/webm',
 }

src/packages/components/Informations/Mores/Video/config.ts

@@ -6,7 +6,7 @@ import video from '@/assets/videos/earth.mp4'
 
 export const option = {
   // 视频路径
-  dataset: 'https://goviewpro.tos-cn-beijing.volces.com/charts-img-db/charts-img-db_id_17bwi76fzta800.mp4',
+  dataset: '',
   datasetCustom: '',
   // 视频列表
   datasetList: [],

src/packages/components/Informations/Mores/Video/config.vue

@@ -2,6 +2,18 @@
 <!-- eslint-disable vue/no-mutating-props -->
 <template>
   <collapse-item name="视频" expanded>
+    <setting-item-box name="上传视频" alone>
+      <setting-item :name="`视频需小于 ${videoSize}M ，格式为 mp4/webm 的文件`">
+        <n-upload
+          v-model:file-list="uploadFileListRef"
+          :show-file-list="false"
+          :customRequest="customRequest"
+          :onBeforeUpload="beforeUploadHandle"
+        >
+          <n-button :loading="loading" size="small">上传视频</n-button>
+        </n-upload>
+      </setting-item>
+    </setting-item-box>
     <setting-item-box name="源" alone>
       <setting-item name="">
         <n-select v-model:value="optionData.dataset" :options="datasetList" :render-option="renderOption" size="small"></n-select>
@@ -12,11 +24,6 @@
         <n-input v-model:value="optionData.datasetCustom" size="small"></n-input>
       </setting-item>
     </setting-item-box>
-<!--    <setting-item-box name="混合模式" alone>-->
-<!--      <setting-item name="使用滤色选项可以去除黑色背景">-->
-<!--        <n-select v-model:value="chartStyles.blendMode" :options="BlendModeEnumList" size="small"></n-select>-->
-<!--      </setting-item>-->
-<!--    </setting-item-box>-->
     <setting-item-box name="控制">
       <setting-item>
         <n-checkbox v-model:checked="optionData.loop" size="small">循环播放</n-checkbox>
@@ -35,13 +42,17 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, ref, h, VNodeChild } from 'vue'
-import { SelectOption, SelectGroupOption } from 'naive-ui'
+import {PropType, ref, h, VNodeChild, nextTick} from 'vue'
+import type { Ref } from 'vue'
+import {SelectOption, SelectGroupOption, UploadCustomRequestOptions} from 'naive-ui'
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import SelectItem from './SelectItem.vue'
 import { PickCreateComponentType, BlendModeEnumList } from '@/packages/index.d'
-
+import {videoSize} from '@/settings/designSetting'
+import {fetchRouteParamsLocation} from "@/utils";
+import {uploadFile} from "@/api/path";
+import {FileTypeEnum} from "@/enums/fileTypeEnum";
 
 // 适应类型
 const fitList = [
@@ -78,11 +89,8 @@ const props = defineProps({
   }
 })
 
-const datasetList = ref([
-  'https://goviewpro.tos-cn-beijing.volces.com/charts-img-db/charts-img-db_id_17bwi76fzta800.mp4',
-  'https://goviewpro.tos-cn-beijing.volces.com/charts-img-db/charts-img-db_id_cqlw0qmjt4o00.mp4',
-  'https://easyv.assets.dtstack.com/data/video/105262/1634995/hieui98oid_1675409080094_4wtvy7l8fn.mp4'
-].map(_ => ({ label: _, value: _ })))
+type ItemType = { label: string, value: string }
+const datasetList: Ref<ItemType[]> = ref([].map(_ => ({ label: _, value: _ })))
 
 const renderOption = (info: {option: SelectOption}): VNodeChild => {
   return [
@@ -105,4 +113,63 @@ const renderOption = (info: {option: SelectOption}): VNodeChild => {
 const handleClick = (v: string) => {
   props.optionData.dataset = v
 }
+
+// 拿接口数据
+const uploadFileListRef = ref()
+const loading = ref(false)
+
+// 自定义上传操作
+const customRequest = (options: UploadCustomRequestOptions) => {
+  const { file } = options
+  nextTick(async () => {
+    if (file.file) {
+      // 修改名称
+      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_video.mp4`, {
+        type: file.file.type
+      })
+      let uploadParams = new FormData()
+      uploadParams.append('files', newNameFile)
+      loading.value = true
+      const uploadRes = await uploadFile(uploadParams)
+
+      if (uploadRes && uploadRes.errcode === '00000') {
+        if (uploadRes.data[0]) {
+          datasetList.value.push({
+            label: uploadRes.data[0],
+            value: uploadRes.data[0]
+          })
+          props.optionData.dataset = uploadRes.data[0]
+          window['$message'].success('添加视频成功!')
+        } else {
+          window['$message'].error('添加视频失败，请稍后重试！')
+        }
+        loading.value = false
+        return
+      }
+      loading.value = false
+      window['$message'].error('添加视频失败，请稍后重试！')
+    } else {
+      loading.value = false
+      window['$message'].error('添加视频失败，请稍后重试！')
+    }
+  })
+}
+
+// 上传视频前置处理
+//@ts-ignore
+const beforeUploadHandle = async ({ file }) => {
+  uploadFileListRef.value = []
+  const type = file.file.type
+  const size = file.file.size
+
+  if (size > 1024 * 1024 * videoSize) {
+    window['$message'].warning(`视频超出 ${videoSize}M 限制，请重新上传！`)
+    return false
+  }
+  if (type !== FileTypeEnum.MP4 && type !== FileTypeEnum.WEBM) {
+    window['$message'].warning('文件格式不符合，请重新上传！')
+    return false
+  }
+  return true
+}
 </script>

src/settings/designSetting.ts

@@ -52,6 +52,9 @@ export const carouselInterval = 4000
 // 工作台大屏背景图片大小限制（5M）
 export const backgroundImageSize = 5
 
+// 工作台视频组件大小限制（500M）
+export const videoSize = 500
+
 // 预览展示方式
 export const previewScaleType = PreviewScaleEnum.SCROLL_Y
 

src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -270,7 +270,6 @@ const clearColor = () => {
 // 自定义上传操作
 const customRequest = (options: UploadCustomRequestOptions) => {
   const { file } = options
-  console.log(file)
   nextTick(async () => {
     if (file.file) {
       // 修改名称