Commit b20fbafe57b734e50a0e41cf6f9d50722a58db62
1 parent
8ec013fe
feat(src/packages): 重写信息里的视频组件,支持自定义上传
Showing
5 changed files
with
178 additions
and
0 deletions
| 1 | +import { PublicConfigClass } from '@/packages/public' | ||
| 2 | +import { CreateComponentType } from '@/packages/index.d' | ||
| 3 | +import { OverrideVideoConfig } from './index' | ||
| 4 | +import cloneDeep from 'lodash/cloneDeep' | ||
| 5 | +import video from '@/assets/videos/earth.mp4' | ||
| 6 | + | ||
| 7 | +export const option = { | ||
| 8 | + // 视频路径 | ||
| 9 | + dataset: video, | ||
| 10 | + // 循环播放 | ||
| 11 | + loop: true, | ||
| 12 | + // 静音 | ||
| 13 | + muted: true, | ||
| 14 | + // 适应方式 | ||
| 15 | + fit: 'contain', | ||
| 16 | + // 圆角 | ||
| 17 | + borderRadius: 10 | ||
| 18 | +} | ||
| 19 | + | ||
| 20 | +export default class Config extends PublicConfigClass implements CreateComponentType { | ||
| 21 | + public key = OverrideVideoConfig.key | ||
| 22 | + public chartConfig = cloneDeep(OverrideVideoConfig) | ||
| 23 | + public option = cloneDeep(option) | ||
| 24 | +} |
| 1 | +<!-- eslint-disable vue/multi-word-component-names --> | ||
| 2 | +<!-- eslint-disable vue/no-mutating-props --> | ||
| 3 | +<template> | ||
| 4 | + <collapse-item name="视频" expanded> | ||
| 5 | + <setting-item-box name="源" alone> | ||
| 6 | + <FileUpload :max="1" :threeSupportFileFormat="supportVideoType" @fileStaticUri="handleFileStaticUri" /> | ||
| 7 | + </setting-item-box> | ||
| 8 | + <setting-item-box name="控制"> | ||
| 9 | + <setting-item> | ||
| 10 | + <n-checkbox v-model:checked="optionData.loop" size="small">循环播放</n-checkbox> | ||
| 11 | + </setting-item> | ||
| 12 | + <setting-item> | ||
| 13 | + <n-checkbox v-model:checked="optionData.muted" size="small">静音</n-checkbox> | ||
| 14 | + </setting-item> | ||
| 15 | + </setting-item-box> | ||
| 16 | + | ||
| 17 | + <setting-item-box name="样式"> | ||
| 18 | + <setting-item name="类型"> | ||
| 19 | + <n-select v-model:value="optionData.fit" size="small" :options="fitList"></n-select> | ||
| 20 | + </setting-item> | ||
| 21 | + </setting-item-box> | ||
| 22 | + </collapse-item> | ||
| 23 | +</template> | ||
| 24 | + | ||
| 25 | +<script setup lang="ts"> | ||
| 26 | +import { PropType } from 'vue' | ||
| 27 | +import { option } from './config' | ||
| 28 | +import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' | ||
| 29 | +import FileUpload from '../../../Composes/Mores/ThreeDimensional/components/FileUpload.vue' | ||
| 30 | +import type { UploadFileInfo } from 'naive-ui' | ||
| 31 | + | ||
| 32 | +//视频类型 | ||
| 33 | +const supportVideoType = ['mp4'] | ||
| 34 | + | ||
| 35 | +// 适应类型 | ||
| 36 | +const fitList = [ | ||
| 37 | + { | ||
| 38 | + value: 'fill', | ||
| 39 | + label: 'fill' | ||
| 40 | + }, | ||
| 41 | + { | ||
| 42 | + value: 'contain', | ||
| 43 | + label: 'contain' | ||
| 44 | + }, | ||
| 45 | + { | ||
| 46 | + value: 'cover', | ||
| 47 | + label: 'cover' | ||
| 48 | + }, | ||
| 49 | + { | ||
| 50 | + value: 'scale-down', | ||
| 51 | + label: 'scale-down' | ||
| 52 | + }, | ||
| 53 | + { | ||
| 54 | + value: 'none', | ||
| 55 | + label: 'none' | ||
| 56 | + } | ||
| 57 | +] | ||
| 58 | + | ||
| 59 | +const props = defineProps({ | ||
| 60 | + optionData: { | ||
| 61 | + type: Object as PropType<typeof option>, | ||
| 62 | + required: true | ||
| 63 | + } | ||
| 64 | +}) | ||
| 65 | + | ||
| 66 | +const handleFileStaticUri = (value: UploadFileInfo[]) => { | ||
| 67 | + props.optionData.dataset = value[0]?.url as string | ||
| 68 | +} | ||
| 69 | +</script> |
| 1 | +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' | ||
| 2 | +import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d' | ||
| 3 | +import { useWidgetKey } from '@/packages/external/useWidgetKey' | ||
| 4 | + | ||
| 5 | +const { key, conKey, chartKey } = useWidgetKey('OverrideVideo', true) | ||
| 6 | + | ||
| 7 | +export const OverrideVideoConfig: ConfigType = { | ||
| 8 | + key, | ||
| 9 | + chartKey, | ||
| 10 | + conKey, | ||
| 11 | + title: '自定义视频', | ||
| 12 | + category: ChatCategoryEnum.MORE, | ||
| 13 | + categoryName: ChatCategoryEnumName.MORE, | ||
| 14 | + package: PackagesCategoryEnum.INFORMATIONS, | ||
| 15 | + chartFrame: ChartFrameEnum.COMMON, | ||
| 16 | + image: 'video.png' | ||
| 17 | +} |
| 1 | +<!-- eslint-disable vue/multi-word-component-names --> | ||
| 2 | +<template> | ||
| 3 | + <!-- 重要:需要设置 crossOrigin="anonymous",否则保存画板缩略图会失败 --> | ||
| 4 | + <video | ||
| 5 | + ref="vVideoRef" | ||
| 6 | + class="go-video" | ||
| 7 | + preload="auto" | ||
| 8 | + crossOrigin="anonymous" | ||
| 9 | + playsinline | ||
| 10 | + autoplay | ||
| 11 | + :loop="option.loop" | ||
| 12 | + :muted="option.muted" | ||
| 13 | + :width="w" | ||
| 14 | + :height="h" | ||
| 15 | + :src="option.dataset" | ||
| 16 | + controls | ||
| 17 | + ></video> | ||
| 18 | +</template> | ||
| 19 | + | ||
| 20 | +<script setup lang="ts"> | ||
| 21 | +import { PropType, toRefs, shallowReactive, watch, ref } from 'vue' | ||
| 22 | +import { useChartDataFetch } from '@/hooks' | ||
| 23 | +import { CreateComponentType } from '@/packages/index.d' | ||
| 24 | +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' | ||
| 25 | +import { option as configOption } from './config' | ||
| 26 | + | ||
| 27 | +const props = defineProps({ | ||
| 28 | + chartConfig: { | ||
| 29 | + type: Object as PropType<CreateComponentType>, | ||
| 30 | + required: true | ||
| 31 | + } | ||
| 32 | +}) | ||
| 33 | + | ||
| 34 | +const { w, h } = toRefs(props.chartConfig.attr) | ||
| 35 | +let option = shallowReactive({ ...configOption }) | ||
| 36 | + | ||
| 37 | +// 预览更新 | ||
| 38 | +const vVideoRef = ref(null) | ||
| 39 | +useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { | ||
| 40 | + option = newData | ||
| 41 | +}) | ||
| 42 | + | ||
| 43 | +// 编辑更新 | ||
| 44 | +watch( | ||
| 45 | + () => props.chartConfig.option, | ||
| 46 | + (newData: any) => { | ||
| 47 | + option = newData | ||
| 48 | + if (!vVideoRef.value) return | ||
| 49 | + const video: any = vVideoRef.value | ||
| 50 | + video.loop = option.loop | ||
| 51 | + video.muted = option.muted | ||
| 52 | + video.play() | ||
| 53 | + }, | ||
| 54 | + { | ||
| 55 | + immediate: true, | ||
| 56 | + deep: true | ||
| 57 | + } | ||
| 58 | +) | ||
| 59 | +</script> | ||
| 60 | + | ||
| 61 | +<style lang="scss" scoped> | ||
| 62 | +@include go('video') { | ||
| 63 | + display: block; | ||
| 64 | + object-fit: v-bind('option.fit'); | ||
| 65 | +} | ||
| 66 | +</style> |
| @@ -20,6 +20,7 @@ import { OverrideProcessConfig } from '@/packages/components/external/Charts/Mor | @@ -20,6 +20,7 @@ import { OverrideProcessConfig } from '@/packages/components/external/Charts/Mor | ||
| 20 | import { OverridePieCircleConfig } from '@/packages/components/external/Charts/Pies/OverridePieCircle' | 20 | import { OverridePieCircleConfig } from '@/packages/components/external/Charts/Pies/OverridePieCircle' |
| 21 | import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Maps/OverrideMapBase' | 21 | import { OverrideMapBaseConfig } from '@/packages/components/external/Charts/Maps/OverrideMapBase' |
| 22 | import { OverrideILoadConfigurationframeConfig } from '@/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe' | 22 | import { OverrideILoadConfigurationframeConfig } from '@/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe' |
| 23 | +import { OverrideVideoConfig } from '@/packages/components/external/Informations/Mores/OverrideVideo' | ||
| 23 | 24 | ||
| 24 | export function useInjectLib(packagesList: EPackagesType) { | 25 | export function useInjectLib(packagesList: EPackagesType) { |
| 25 | packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList | 26 | packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList |
| @@ -43,6 +44,7 @@ export function useInjectLib(packagesList: EPackagesType) { | @@ -43,6 +44,7 @@ export function useInjectLib(packagesList: EPackagesType) { | ||
| 43 | addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig) | 44 | addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverridePieCircleConfig) |
| 44 | addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapBaseConfig) | 45 | addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideMapBaseConfig) |
| 45 | addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideILoadConfigurationframeConfig) | 46 | addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideILoadConfigurationframeConfig) |
| 47 | + addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideVideoConfig) | ||
| 46 | } | 48 | } |
| 47 | 49 | ||
| 48 | /** | 50 | /** |