Merge branch 'ft' into 'main_dev'

fix:修复Teambition上的问题

See merge request yunteng/thingskit-view!42

@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { LeftCenterRightHeadConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
 
 export const option = {
   dataset: '物联网平台数据统计',
@@ -20,6 +21,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = LeftCenterRightHeadConfig.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 1920, h: 100 }
   public chartConfig = cloneDeep(LeftCenterRightHeadConfig)
   public option = cloneDeep(option)
 }

@@ -65,11 +65,8 @@ let nowData = ref('08:00:00')
 let newData = ref('2021-2-3 08:00:00')
 
 let timer: any = null
-const { w, h } = toRefs(props.chartConfig.attr)
 
-//修改默认宽高
-props.chartConfig.attr.w = 1920
-props.chartConfig.attr.h = 100
+const { w, h } = toRefs(props.chartConfig.attr)
 
 watch(
   () => props.chartConfig.option,

@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { LeftCenterRightHeadAnimatConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
 
 export const option = {
   dataset: '我是标题',
@@ -26,6 +27,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = LeftCenterRightHeadAnimatConfig.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 1920, h: 130 }
   public chartConfig = cloneDeep(LeftCenterRightHeadAnimatConfig)
   public option = cloneDeep(option)
 }

@@ -64,10 +64,6 @@ const props = defineProps({
   }
 })
 
-//修改默认宽高
-props.chartConfig.attr.w=1920
-props.chartConfig.attr.h=130
-
 const { w, h } = toRefs(props.chartConfig.attr)
 
 const { animat, dataset } = toRefs(props.chartConfig.option)

@@ -15,6 +15,12 @@ const props = defineProps({
   sourceSrc: {
     type: String
   },
+  name: {
+    type: String
+  },
+  avatar: {
+    type: String
+  },
   w: {
     type: Number,
     default: 300
@@ -41,7 +47,8 @@ const options: VideoJsPlayerOptions = {
   preload: 'auto', // 预加载
   autoplay: true, // 是否自动播放
   fluid: false, // 自适应宽高
-  src: props.sourceSrc, // 要嵌入的视频源的源 URL
+  poster: props?.avatar || '',
+  src: props?.sourceSrc || '', // 要嵌入的视频源的源 URL
   muted: true,
   userActions: {
     hotkeys: true

@@ -6,29 +6,8 @@ import cloneDeep from 'lodash/cloneDeep'
 export const option = {
   dataset: [
     {
-      url: 'https://vcsplay.scjtonline.cn:8094/live/HD_664c01b9-4b67-11eb-bf78-3cd2e55e0a36.m3u8?auth_key=1681457689-0-0-a797d264f2889a388c52ff188fedf7dc'
+      url: ''
     },
-    {
-      url: 'https://vcsplay.scjtonline.cn:8196/live/HD_c53fd3cb-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681457668-0-0-7ef56e21fddd9ffb9740cbe499a1824c'
-    },
-    {
-      url: 'https://vcsplay.scjtonline.cn:8199/live/HD_53713154-1371-489a-a929-015cca5569fc.m3u8?auth_key=1681441451-0-0-4f1ebdcf28a71b7631c0028c099923c9'
-    },
-    {
-      url: 'https://vcsplay.scjtonline.cn:8195/live/HD_c54034ca-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681457640-0-0-3a53b856ac19c09273986e8281f3d727'
-    },
-    {
-      url: 'https://vcsplay.scjtonline.cn:8094/live/HD_664c01b9-4b67-11eb-bf78-3cd2e55e0a36.m3u8?auth_key=1681457689-0-0-a797d264f2889a388c52ff188fedf7dc'
-    },
-    {
-      url: 'https://vcsplay.scjtonline.cn:8196/live/HD_c53fd3cb-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681457668-0-0-7ef56e21fddd9ffb9740cbe499a1824c'
-    },
-    {
-      url: 'https://vcsplay.scjtonline.cn:8199/live/HD_53713154-1371-489a-a929-015cca5569fc.m3u8?auth_key=1681441451-0-0-4f1ebdcf28a71b7631c0028c099923c9'
-    },
-    {
-      url: 'https://vcsplay.scjtonline.cn:8195/live/HD_c54034ca-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681457640-0-0-3a53b856ac19c09273986e8281f3d727'
-    }
   ] as any,
   // 自动播放的间隔（ms）
   interval: 5000,

@@ -2,7 +2,17 @@
   <div class="banner-box" ref="root">
     <div class="wrapper">
       <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
-        <CameraItem ref="cameraRef" :key="item + index" :sourceSrc="item.url" :w="w" :h="h" :index="index" />
+        <CameraItem
+          ref="cameraRef"
+          :name="item.name"
+          :avatar="item.avatar"
+          :key="item + index"
+          :sourceSrc="item.url"
+          :w="w"
+          :h="h"
+          :index="index"
+        />
+        <span class="video-title">{{ item.name }}</span>
       </div>
     </div>
     <a href="javascript:;" class="left" @click="changeSlide('left')"></a>
@@ -37,46 +47,48 @@ let interval = ref(4000)
 
 const computedFunc = (initial: number, source: any) => {
   if (initial < 0) initial = 0
-  let len = source.length,
-    temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,
-    temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,
-    temp3 = initial,
-    temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
-    temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
-  return source.map((item: any, index: number) => {
-    let transform = `translate(-50%, -50%) scale(0.7)`,
-      zIndex = 0,
-      className = 'slide'
-    switch (index) {
-      case temp3:
-        transform = `translate(-50%, -50%) scale(1)`
-        className = ['slide', 'activate'] as any
-        zIndex = 3
-        break
-      case temp1:
-        transform = `translate(-80%, -50%) scale(0.7)`
-        zIndex = 1
-        break
-      case temp5:
-        transform = `translate(100%, -50%) scale(0.7)`
-        zIndex = 1
-        break
-      case temp2:
-        transform = `translate(-100%, -50%) scale(0.85)`
-        zIndex = 2
-        break
-      case temp4:
-        transform = `translate(58%, -50%) scale(0.85)`
-        zIndex = 2
-        break
-    }
-    item.sty = {
-      transform,
-      zIndex
-    }
-    item.className = className
-    return item
-  })
+  if (Array.isArray(source)) {
+    let len = source.length,
+      temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,
+      temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,
+      temp3 = initial,
+      temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
+      temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
+    return source?.map((item: any, index: number) => {
+      let transform = `translate(-50%, -50%) scale(0.7)`,
+        zIndex = 0,
+        className = 'slide'
+      switch (index) {
+        case temp3:
+          transform = `translate(-50%, -50%) scale(1)`
+          className = ['slide', 'activate'] as any
+          zIndex = 3
+          break
+        case temp1:
+          transform = `translate(-80%, -50%) scale(0.7)`
+          zIndex = 1
+          break
+        case temp5:
+          transform = `translate(100%, -50%) scale(0.7)`
+          zIndex = 1
+          break
+        case temp2:
+          transform = `translate(-100%, -50%) scale(0.85)`
+          zIndex = 2
+          break
+        case temp4:
+          transform = `translate(58%, -50%) scale(0.85)`
+          zIndex = 2
+          break
+      }
+      item.sty = {
+        transform,
+        zIndex
+      }
+      item.className = className
+      return item
+    })
+  }
 }
 
 watch(
@@ -143,12 +155,6 @@ function changeSlide(dir: string) {
 
 <style lang="scss" scoped>
 .banner-box {
-  width: 100%;
-  height: 100%;
-  // position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   .wrapper {
     width: 100%;
     height: 100%;
@@ -162,6 +168,15 @@ function changeSlide(dir: string) {
       transform: translate(-50%, -50%);
       transition: 0.5s;
       box-shadow: 0 0 4px black;
+      .video-title {
+        width: v-bind('w+"px"');
+        font-size: 30px;
+        color: white;
+        position: absolute;
+        bottom: 6%;
+        left: 10%;
+        z-index: 999;
+      }
     }
   }
   .arrow {

@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Title1Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
 
 export const option = {
   dataset: '我是标题',
@@ -18,6 +19,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Title1Config.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
   public chartConfig = cloneDeep(Title1Config)
   public option = cloneDeep(option)
 }

@@ -108,11 +108,6 @@ const props = defineProps({
   }
 })
 
-//修改默认宽高
-props.chartConfig.attr.w=550
-props.chartConfig.attr.h=60
-
-
 const { dataset, attribute } = toRefs(props.chartConfig.option)
 
 const { w, h } = toRefs(props.chartConfig.attr)

@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Title2Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
 
 export const option = {
   dataset: '我是标题',
@@ -18,6 +19,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Title2Config.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
   public chartConfig = cloneDeep(Title2Config)
   public option = cloneDeep(option)
 }

@@ -76,9 +76,7 @@ const props = defineProps({
 })
 
 const { dataset, attribute } = toRefs(props.chartConfig.option)
-//修改默认宽高
-props.chartConfig.attr.w=550
-props.chartConfig.attr.h=60
+
 const { w, h } = toRefs(props.chartConfig.attr)
 </script>
 

@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { Title3Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
 
 export const option = {
   dataset: '我是标题',
@@ -31,6 +32,7 @@ export const option = {
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
   public key = Title3Config.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
   public chartConfig = cloneDeep(Title3Config)
   public option = cloneDeep(option)
 }

@@ -117,9 +117,6 @@ const { dataset, attribute } = toRefs(props.chartConfig.option)
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
-//修改默认宽高
-props.chartConfig.attr.w=550
-props.chartConfig.attr.h=60
 </script>
 
 <style lang="scss" scoped>