From 9bdf42a057b4cb9791432e212489ddc2937f9958 Mon Sep 17 00:00:00 2001
From: tnt group <dodu@live.cn>
Date: Mon, 19 Sep 2022 17:43:15 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8E=BB=E6=8E=89=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E8=B5=84=E6=BA=90=EF=BC=8C=E9=BB=98=E8=AE=A4=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E6=9C=AC=E5=9C=B0=E8=B5=84=E6=BA=90=EF=BC=8C=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Informations/Mores/Video/config.ts        | 16 ++---
 .../Informations/Mores/Video/config.vue       | 68 +++++++++++--------
 .../Informations/Mores/Video/index.vue        |  3 +-
 3 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/src/packages/components/Informations/Mores/Video/config.ts b/src/packages/components/Informations/Mores/Video/config.ts
index c3c9474a..bfeabf00 100644
--- a/src/packages/components/Informations/Mores/Video/config.ts
+++ b/src/packages/components/Informations/Mores/Video/config.ts
@@ -2,23 +2,21 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { VideoConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
-
-export const VideoList = [
-  { label: '数字楼宇', value: 'https://video.699pic.com/videos/76/09/36/b_D4DKnb48qdCI1631760936.mp4' },
-  { label: '旋转魔方', value: 'https://video.699pic.com/videos/90/02/69/b_YjJAJZMT6vRK1554900269.mp4' },
-  { label: '旋转地球', value: 'https://video.699pic.com/videos/32/13/12/b_7dng21IHECP51553321312.mp4' },
-  { label: '声音示例', value: 'https://video.699pic.com/videos/80/62/39/a_qmbxMqNvK9jr1583806239.mp4' }
-]
+import video from '@/assets/videos/earth.mp4'
 
 export const option = {
   // 视频路径
-  dataset: '',
+  dataset: video,
   // 循环播放
   loop: true,
   // 自动播放
   autoplay: true,
   // 静音
-  muted: true
+  muted: true,
+  // 适应方式
+  fit: 'contain',
+  // 圆角
+  borderRadius: 10
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
diff --git a/src/packages/components/Informations/Mores/Video/config.vue b/src/packages/components/Informations/Mores/Video/config.vue
index 512fc26a..1b8a5f71 100644
--- a/src/packages/components/Informations/Mores/Video/config.vue
+++ b/src/packages/components/Informations/Mores/Video/config.vue
@@ -3,27 +3,9 @@
 <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>
       </setting-item>
-      <setting-item name="使用内置视频">
-        <n-select
-          v-model:value="optionData.dataset"
-          size="small"
-          placeholder="自定义或选择内置视频"
-          clearable
-          :options="VideoList"
-        ></n-select>
-      </setting-item>
-      <!-- <setting-item>
-        <n-upload
-          action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
-          accept="video/*"
-          @finish="finishHandleFinish"
-        >
-          <n-button size="small">本地上传</n-button>
-        </n-upload>
-      </setting-item> -->
     </setting-item-box>
 
     <setting-item-box name="控制">
@@ -37,24 +19,56 @@
         <n-checkbox v-model:checked="optionData.muted" size="small">静音</n-checkbox>
       </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, VideoList } from './config'
+import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 
-// eslint-disable-next-line no-unused-vars
-const props = defineProps({
+// 适应类型
+const fitList = [
+  {
+    value: 'fill',
+    label: 'fill'
+  },
+  {
+    value: 'contain',
+    label: 'contain'
+  },
+  {
+    value: 'cover',
+    label: 'cover'
+  },
+  {
+    value: 'scale-down',
+    label: 'scale-down'
+  },
+  {
+    value: 'none',
+    label: 'none'
+  }
+]
+
+defineProps({
   optionData: {
     type: Object as PropType<typeof option>,
     required: true
   }
 })
-
-// eslint-disable-next-line no-unused-vars
-const finishHandleFinish = () => {
-  // console.log()
-}
 </script>
diff --git a/src/packages/components/Informations/Mores/Video/index.vue b/src/packages/components/Informations/Mores/Video/index.vue
index 25805a87..ba016d2c 100644
--- a/src/packages/components/Informations/Mores/Video/index.vue
+++ b/src/packages/components/Informations/Mores/Video/index.vue
@@ -64,7 +64,8 @@ watch(
 <style lang="scss" scoped>
 @include go('video') {
   display: block;
-  object-fit: cover;
   mix-blend-mode: screen;
+  object-fit: v-bind('option.fit');
+  border-radius: v-bind('option.borderRadius');
 }
 </style>