feat: 增加视频组件

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

@@ -0,0 +1,30 @@
+<template>
+  <div class="SelectItem">
+    <video :src="props.imageUrl" autoplay loop muted playsinline type="video/mp4" style="height: 100%;width: 100%"></video>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps(['imageUrl'])
+</script>
+
+<style lang="scss" scoped>
+.SelectItem{
+  display: inline-block;
+  box-sizing: border-box;
+  height: 100px;
+  width: 100%;
+  margin: 5px;
+  background: #000;
+  border: 1px solid transparent;
+  &:nth-last-child(1) {
+    margin-bottom: 0;
+  }
+  &:nth-last-child(2) {
+    margin-bottom: 0;
+  }
+}
+.active{
+  border: 1px solid #51d6a9;
+}
+</style>

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

@@ -7,6 +7,8 @@ import video from '@/assets/videos/earth.mp4'
 export const option = {
   // 视频路径
   dataset: video,
+  // 视频列表
+  datasetList: [],
   // 循环播放
   loop: true,
   // 静音
@@ -18,6 +20,11 @@ export const option = {
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
+  constructor() {
+    super();
+    this.styles.filterShow = true
+    this.styles.blendMode = 'screen'
+  }
   public key = VideoConfig.key
   public chartConfig = cloneDeep(VideoConfig)
   public option = cloneDeep(option)

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

@@ -3,11 +3,18 @@
 <template>
   <collapse-item name="视频" expanded>
     <setting-item-box name="源" alone>
-      <setting-item name="自定义源">
+      <setting-item name="">
-        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+        <n-select v-model:value="optionData.dataset" :options="datasetList" :render-option="renderOption"></n-select>
+      </setting-item>
+<!--      <setting-item name="自定义源">-->
+<!--        <n-input v-model:value="optionData.dataset" 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"></n-select>
       </setting-item>
     </setting-item-box>
-
     <setting-item-box name="控制">
       <setting-item>
         <n-checkbox v-model:checked="optionData.loop" size="small">循环播放</n-checkbox>
@@ -26,9 +33,13 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, ref, h, VNodeChild } from 'vue'
+import { SelectOption, SelectGroupOption } 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'
+
 
 // 适应类型
 const fitList = [
@@ -54,10 +65,42 @@ const fitList = [
   }
 ]
 
-defineProps({
+const props = defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
     required: true
+  },
+  chartStyles: {
+    type: Object as PropType<Omit<PickCreateComponentType<'styles'>, 'animations'>>,
+    required: true
   }
 })
+
+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: _ })))
+
+const renderOption = (info: {option: SelectOption}): VNodeChild => {
+  return [
+    h(
+      SelectItem,
+      {
+        imageUrl: info.option.value,
+        onClick: () => handleClick(info.option.value as string),
+        class: {
+          active: info.option.value === props.optionData.dataset,
+        },
+        style: {
+          width: 'calc(50% - 10px)'
+        }
+      }
+    )
+  ]
+}
+
+const handleClick = (v: string) => {
+  props.optionData.dataset = v
+}
 </script>

src/packages/components/Informations/Mores/index.ts

@@ -4,4 +4,4 @@ import { IframeConfig } from './Iframe/index'
 import { VideoConfig } from './Video/index'
 import { WordCloudConfig } from './WordCloud/index'
 
-export default [ImageConfig, ImageCarouselConfig, VideoConfig, IframeConfig, WordCloudConfig]
+export default [VideoConfig]

src/packages/components/Informations/index.ts

@@ -1,6 +1,6 @@
 import Texts from './Texts'
 // import Inputs from './Inputs'
-// import Mores from './Mores'
+import Mores from './Mores'
 
 // export const InformationList = [...Texts, ...Inputs, ...Mores]
-export const InformationList = [...Texts]
+export const InformationList = [...Texts, ...Mores]

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

@@ -9,7 +9,7 @@
     <!-- 滤镜 -->
     <styles-setting :isGroup="targetData.isGroup" :chartStyles="targetData.styles"></styles-setting>
     <!-- 自定义配置项 -->
-    <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
+    <component :is="targetData.chartConfig.conKey" :optionData="targetData.option" :chartStyles="targetData.styles"></component>
   </div>
 </template>