From 25077b91ca28febc9a285f074fbd28657e31e6ab Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Sun, 18 Sep 2022 13:07:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=94=AF=E6=8C=81=E6=B7=B7=E5=90=88?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E8=A7=86=E9=A2=91=E8=83=8C=E6=99=AF=E9=80=8F?=
 =?UTF-8?q?=E6=98=8E)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Informations/Mores/Video/config.ts        | 21 ++++++
 .../Informations/Mores/Video/config.vue       | 64 +++++++++++++++++
 .../Informations/Mores/Video/index.ts         | 14 ++++
 .../Informations/Mores/Video/index.vue        | 69 +++++++++++++++++++
 .../components/Informations/Mores/index.ts    |  3 +-
 .../components/EditShapeBox/index.vue         |  4 ++
 6 files changed, 174 insertions(+), 1 deletion(-)
 create mode 100644 src/packages/components/Informations/Mores/Video/config.ts
 create mode 100644 src/packages/components/Informations/Mores/Video/config.vue
 create mode 100644 src/packages/components/Informations/Mores/Video/index.ts
 create mode 100644 src/packages/components/Informations/Mores/Video/index.vue

diff --git a/src/packages/components/Informations/Mores/Video/config.ts b/src/packages/components/Informations/Mores/Video/config.ts
new file mode 100644
index 00000000..43c38cc1
--- /dev/null
+++ b/src/packages/components/Informations/Mores/Video/config.ts
@@ -0,0 +1,21 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { VideoConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  // 视频路径
+  dataset: '',
+  // 适应方式
+  fit: 'contain',
+  // 圆角
+  borderRadius: 0,
+  // 透明度
+  opacity: 1
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  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
new file mode 100644
index 00000000..7ece81b8
--- /dev/null
+++ b/src/packages/components/Informations/Mores/Video/config.vue
@@ -0,0 +1,64 @@
+<template>
+  <collapse-item name="属性" :expanded="true">
+    <setting-item-box name="路径" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+      </setting-item>
+      <setting-item>
+        <n-upload action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f" @finish="handleFinish">
+          <n-button size="small">本地上传</n-button>
+        </n-upload>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="样式">
+      <setting-item name="类型">
+        <n-select v-model:value="optionData.fit" size="small" :options="fitList"></n-select>
+      </setting-item>
+      <setting-item name="圆角">
+        <n-input-number
+          v-model:value="optionData.borderRadius"
+          size="small"
+          :min="0"
+          placeholder="圆角"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+// 适应类型
+const fitList = [
+  {
+    value: 'fill',
+    label: 'fill'
+  },
+  {
+    value: 'contain',
+    label: 'contain'
+  },
+  {
+    value: 'cover',
+    label: 'cover'
+  },
+  {
+    value: 'scale-down',
+    label: 'scale-down'
+  },
+  {
+    value: 'none',
+    label: 'none'
+  }
+]
+</script>
diff --git a/src/packages/components/Informations/Mores/Video/index.ts b/src/packages/components/Informations/Mores/Video/index.ts
new file mode 100644
index 00000000..01998cb7
--- /dev/null
+++ b/src/packages/components/Informations/Mores/Video/index.ts
@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/informations/photo.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const VideoConfig: ConfigType = {
+  key: 'Video',
+  chartKey: 'VVideo',
+  conKey: 'VCVideo',
+  title: '视频',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  image
+}
diff --git a/src/packages/components/Informations/Mores/Video/index.vue b/src/packages/components/Informations/Mores/Video/index.vue
new file mode 100644
index 00000000..2a4c0ac2
--- /dev/null
+++ b/src/packages/components/Informations/Mores/Video/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <div :style="getStyle(borderRadius)">
+    <video
+      class="video-background"
+      preload="auto"
+      loop
+      playsinline
+      autoplay
+      muted
+      src="https://video.699pic.com/videos/76/09/36/b_D4DKnb48qdCI1631760936.mp4"
+      :width="w"
+      :height="h"
+    ></video>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, shallowReactive, watch, toRefs } from 'vue'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
+
+const option = shallowReactive({
+  dataset: ''
+})
+
+const getStyle = (radius: number) => {
+  return {
+    borderRadius: `${radius}px`,
+    overflow: 'hidden'
+  }
+}
+
+// 编辑更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
+</script>
+
+<style lang="scss" scoped>
+.video-background {
+  object-fit: cover;
+  mix-blend-mode: screen;
+  opacity: 1;
+}
+</style>
diff --git a/src/packages/components/Informations/Mores/index.ts b/src/packages/components/Informations/Mores/index.ts
index eb12db36..19648094 100644
--- a/src/packages/components/Informations/Mores/index.ts
+++ b/src/packages/components/Informations/Mores/index.ts
@@ -1,4 +1,5 @@
 import { TextCloudConfig } from './TextCloud/index'
 import { ImageConfig } from './Image/index'
+import { VideoConfig } from './Video/index'
 
-export default [ImageConfig, TextCloudConfig]
+export default [ImageConfig, VideoConfig, TextCloudConfig]
diff --git a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
index dc521ad8..93450fed 100644
--- a/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
+++ b/src/views/chart/ContentEdit/components/EditShapeBox/index.vue
@@ -69,6 +69,10 @@ const select = computed(() => {
 @include go(shape-box) {
   position: absolute;
   cursor: move;
+
+  // 混合模式
+  mix-blend-mode: screen;
+
   /* 锚点 */
   .shape-point {
     z-index: 1;