From 65927f4ff5fb82db5ffca54c7ff315854a903fef Mon Sep 17 00:00:00 2001
From: huanghao1412 <huanghao1412@163.com>
Date: Sat, 3 Feb 2024 18:05:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Informations/Mores/Video/SelectItem.vue   | 30 +++++++++++
 .../Informations/Mores/Video/config.ts        |  7 +++
 .../Informations/Mores/Video/config.vue       | 53 +++++++++++++++++--
 .../components/Informations/Mores/index.ts    |  2 +-
 src/packages/components/Informations/index.ts |  4 +-
 .../components/ChartSetting/index.vue         |  2 +-
 6 files changed, 89 insertions(+), 9 deletions(-)
 create mode 100644 src/packages/components/Informations/Mores/Video/SelectItem.vue

diff --git a/src/packages/components/Informations/Mores/Video/SelectItem.vue b/src/packages/components/Informations/Mores/Video/SelectItem.vue
new file mode 100644
index 00000000..3fe8a8a7
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/packages/components/Informations/Mores/Video/config.ts b/src/packages/components/Informations/Mores/Video/config.ts
index 41db6a90..a67bfb05 100644
--- a/src/packages/components/Informations/Mores/Video/config.ts
+++ b/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)
diff --git a/src/packages/components/Informations/Mores/Video/config.vue b/src/packages/components/Informations/Mores/Video/config.vue
index 14a5accc..95916beb 100644
--- a/src/packages/components/Informations/Mores/Video/config.vue
+++ b/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="自定义源">
-        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+      <setting-item name="">
+        <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>
diff --git a/src/packages/components/Informations/Mores/index.ts b/src/packages/components/Informations/Mores/index.ts
index 572ab9e0..3ea0d133 100644
--- a/src/packages/components/Informations/Mores/index.ts
+++ b/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]
diff --git a/src/packages/components/Informations/index.ts b/src/packages/components/Informations/index.ts
index bcfbff79..055a34c1 100644
--- a/src/packages/components/Informations/index.ts
+++ b/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]
diff --git a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
index 21c7d96a..206ae7f0 100644
--- a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
+++ b/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>