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 | /** |