简柏林 / thingskit-view · Commits

Commit 263e9ac3918d31c5d51ca5ccee67637034a1f3f5

Authored by xp.Huang
2 parents 771ef12d 62064562

Merge branch 'ft' into 'main_dev' 

fix:修复Teambition上的问题

See merge request yunteng/thingskit-view!42
Inline Side-by-side
Showing 13 changed files with 83 additions and 89 deletions
@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public' @@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
2 import { CreateComponentType } from '@/packages/index.d' 2 import { CreateComponentType } from '@/packages/index.d'
3 import { LeftCenterRightHeadConfig } from './index' 3 import { LeftCenterRightHeadConfig } from './index'
4 import cloneDeep from 'lodash/cloneDeep' 4 import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
5 6
6 export const option = { 7 export const option = {
7 dataset: '物联网平台数据统计', 8 dataset: '物联网平台数据统计',
@@ -20,6 +21,7 @@ export const option = { @@ -20,6 +21,7 @@ export const option = {
20 21
21 export default class Config extends PublicConfigClass implements CreateComponentType { 22 export default class Config extends PublicConfigClass implements CreateComponentType {
22 public key = LeftCenterRightHeadConfig.key 23 public key = LeftCenterRightHeadConfig.key
  24 + public attr = { ...chartInitConfig, zIndex: 1, w: 1920, h: 100 }
23 public chartConfig = cloneDeep(LeftCenterRightHeadConfig) 25 public chartConfig = cloneDeep(LeftCenterRightHeadConfig)
24 public option = cloneDeep(option) 26 public option = cloneDeep(option)
25 } 27 }
@@ -65,11 +65,8 @@ let nowData = ref('08:00:00') @@ -65,11 +65,8 @@ let nowData = ref('08:00:00')
65 let newData = ref('2021-2-3 08:00:00') 65 let newData = ref('2021-2-3 08:00:00')
66 66
67 let timer: any = null 67 let timer: any = null
68 -const { w, h } = toRefs(props.chartConfig.attr)  
69 68
70 -//修改默认宽高  
71 -props.chartConfig.attr.w = 1920  
72 -props.chartConfig.attr.h = 100 69 +const { w, h } = toRefs(props.chartConfig.attr)
73 70
74 watch( 71 watch(
75 () => props.chartConfig.option, 72 () => props.chartConfig.option,
@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public' @@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
2 import { CreateComponentType } from '@/packages/index.d' 2 import { CreateComponentType } from '@/packages/index.d'
3 import { LeftCenterRightHeadAnimatConfig } from './index' 3 import { LeftCenterRightHeadAnimatConfig } from './index'
4 import cloneDeep from 'lodash/cloneDeep' 4 import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
5 6
6 export const option = { 7 export const option = {
7 dataset: '我是标题', 8 dataset: '我是标题',
@@ -26,6 +27,7 @@ export const option = { @@ -26,6 +27,7 @@ export const option = {
26 27
27 export default class Config extends PublicConfigClass implements CreateComponentType { 28 export default class Config extends PublicConfigClass implements CreateComponentType {
28 public key = LeftCenterRightHeadAnimatConfig.key 29 public key = LeftCenterRightHeadAnimatConfig.key
  30 + public attr = { ...chartInitConfig, zIndex: 1, w: 1920, h: 130 }
29 public chartConfig = cloneDeep(LeftCenterRightHeadAnimatConfig) 31 public chartConfig = cloneDeep(LeftCenterRightHeadAnimatConfig)
30 public option = cloneDeep(option) 32 public option = cloneDeep(option)
31 } 33 }
@@ -64,10 +64,6 @@ const props = defineProps({ @@ -64,10 +64,6 @@ const props = defineProps({
64 } 64 }
65 }) 65 })
66 66
67 -//修改默认宽高  
68 -props.chartConfig.attr.w=1920  
69 -props.chartConfig.attr.h=130  
70 -  
71 const { w, h } = toRefs(props.chartConfig.attr) 67 const { w, h } = toRefs(props.chartConfig.attr)
72 68
73 const { animat, dataset } = toRefs(props.chartConfig.option) 69 const { animat, dataset } = toRefs(props.chartConfig.option)
@@ -15,6 +15,12 @@ const props = defineProps({ @@ -15,6 +15,12 @@ const props = defineProps({
15 sourceSrc: { 15 sourceSrc: {
16 type: String 16 type: String
17 }, 17 },
  18 + name: {
  19 + type: String
  20 + },
  21 + avatar: {
  22 + type: String
  23 + },
18 w: { 24 w: {
19 type: Number, 25 type: Number,
20 default: 300 26 default: 300
@@ -41,7 +47,8 @@ const options: VideoJsPlayerOptions = { @@ -41,7 +47,8 @@ const options: VideoJsPlayerOptions = {
41 preload: 'auto', // 预加载 47 preload: 'auto', // 预加载
42 autoplay: true, // 是否自动播放 48 autoplay: true, // 是否自动播放
43 fluid: false, // 自适应宽高 49 fluid: false, // 自适应宽高
44 - src: props.sourceSrc, // 要嵌入的视频源的源 URL 50 + poster: props?.avatar || '',
  51 + src: props?.sourceSrc || '', // 要嵌入的视频源的源 URL
45 muted: true, 52 muted: true,
46 userActions: { 53 userActions: {
47 hotkeys: true 54 hotkeys: true
@@ -6,29 +6,8 @@ import cloneDeep from 'lodash/cloneDeep' @@ -6,29 +6,8 @@ import cloneDeep from 'lodash/cloneDeep'
6 export const option = { 6 export const option = {
7 dataset: [ 7 dataset: [
8 { 8 {
9 - url: 'https://vcsplay.scjtonline.cn:8094/live/HD_664c01b9-4b67-11eb-bf78-3cd2e55e0a36.m3u8?auth_key=1681457689-0-0-a797d264f2889a388c52ff188fedf7dc' 9 + url: ''
10 }, 10 },
11 - {  
12 - url: 'https://vcsplay.scjtonline.cn:8196/live/HD_c53fd3cb-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681457668-0-0-7ef56e21fddd9ffb9740cbe499a1824c'  
13 - },  
14 - {  
15 - url: 'https://vcsplay.scjtonline.cn:8199/live/HD_53713154-1371-489a-a929-015cca5569fc.m3u8?auth_key=1681441451-0-0-4f1ebdcf28a71b7631c0028c099923c9'  
16 - },  
17 - {  
18 - url: 'https://vcsplay.scjtonline.cn:8195/live/HD_c54034ca-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681457640-0-0-3a53b856ac19c09273986e8281f3d727'  
19 - },  
20 - {  
21 - url: 'https://vcsplay.scjtonline.cn:8094/live/HD_664c01b9-4b67-11eb-bf78-3cd2e55e0a36.m3u8?auth_key=1681457689-0-0-a797d264f2889a388c52ff188fedf7dc'  
22 - },  
23 - {  
24 - url: 'https://vcsplay.scjtonline.cn:8196/live/HD_c53fd3cb-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681457668-0-0-7ef56e21fddd9ffb9740cbe499a1824c'  
25 - },  
26 - {  
27 - url: 'https://vcsplay.scjtonline.cn:8199/live/HD_53713154-1371-489a-a929-015cca5569fc.m3u8?auth_key=1681441451-0-0-4f1ebdcf28a71b7631c0028c099923c9'  
28 - },  
29 - {  
30 - url: 'https://vcsplay.scjtonline.cn:8195/live/HD_c54034ca-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681457640-0-0-3a53b856ac19c09273986e8281f3d727'  
31 - }  
32 ] as any, 11 ] as any,
33 // 自动播放的间隔（ms） 12 // 自动播放的间隔（ms）
34 interval: 5000, 13 interval: 5000,
@@ -2,7 +2,17 @@ @@ -2,7 +2,17 @@
2 <div class="banner-box" ref="root"> 2 <div class="banner-box" ref="root">
3 <div class="wrapper"> 3 <div class="wrapper">
4 <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty"> 4 <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
5 - <CameraItem ref="cameraRef" :key="item + index" :sourceSrc="item.url" :w="w" :h="h" :index="index" /> 5 + <CameraItem
  6 + ref="cameraRef"
  7 + :name="item.name"
  8 + :avatar="item.avatar"
  9 + :key="item + index"
  10 + :sourceSrc="item.url"
  11 + :w="w"
  12 + :h="h"
  13 + :index="index"
  14 + />
  15 + <span class="video-title">{{ item.name }}</span>
6 </div> 16 </div>
7 </div> 17 </div>
8 <a href="javascript:;" class="left" @click="changeSlide('left')"></a> 18 <a href="javascript:;" class="left" @click="changeSlide('left')"></a>
@@ -37,46 +47,48 @@ let interval = ref(4000) @@ -37,46 +47,48 @@ let interval = ref(4000)
37 47
38 const computedFunc = (initial: number, source: any) => { 48 const computedFunc = (initial: number, source: any) => {
39 if (initial < 0) initial = 0 49 if (initial < 0) initial = 0
40 - let len = source.length,  
41 - temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,  
42 - temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,  
43 - temp3 = initial,  
44 - temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,  
45 - temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2  
46 - return source.map((item: any, index: number) => {  
47 - let transform = `translate(-50%, -50%) scale(0.7)`,  
48 - zIndex = 0,  
49 - className = 'slide'  
50 - switch (index) {  
51 - case temp3:  
52 - transform = `translate(-50%, -50%) scale(1)`  
53 - className = ['slide', 'activate'] as any  
54 - zIndex = 3  
55 - break  
56 - case temp1:  
57 - transform = `translate(-80%, -50%) scale(0.7)`  
58 - zIndex = 1  
59 - break  
60 - case temp5:  
61 - transform = `translate(100%, -50%) scale(0.7)`  
62 - zIndex = 1  
63 - break  
64 - case temp2:  
65 - transform = `translate(-100%, -50%) scale(0.85)`  
66 - zIndex = 2  
67 - break  
68 - case temp4:  
69 - transform = `translate(58%, -50%) scale(0.85)`  
70 - zIndex = 2  
71 - break  
72 - }  
73 - item.sty = {  
74 - transform,  
75 - zIndex  
76 - }  
77 - item.className = className  
78 - return item  
79 - }) 50 + if (Array.isArray(source)) {
  51 + let len = source.length,
  52 + temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,
  53 + temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,
  54 + temp3 = initial,
  55 + temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
  56 + temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
  57 + return source?.map((item: any, index: number) => {
  58 + let transform = `translate(-50%, -50%) scale(0.7)`,
  59 + zIndex = 0,
  60 + className = 'slide'
  61 + switch (index) {
  62 + case temp3:
  63 + transform = `translate(-50%, -50%) scale(1)`
  64 + className = ['slide', 'activate'] as any
  65 + zIndex = 3
  66 + break
  67 + case temp1:
  68 + transform = `translate(-80%, -50%) scale(0.7)`
  69 + zIndex = 1
  70 + break
  71 + case temp5:
  72 + transform = `translate(100%, -50%) scale(0.7)`
  73 + zIndex = 1
  74 + break
  75 + case temp2:
  76 + transform = `translate(-100%, -50%) scale(0.85)`
  77 + zIndex = 2
  78 + break
  79 + case temp4:
  80 + transform = `translate(58%, -50%) scale(0.85)`
  81 + zIndex = 2
  82 + break
  83 + }
  84 + item.sty = {
  85 + transform,
  86 + zIndex
  87 + }
  88 + item.className = className
  89 + return item
  90 + })
  91 + }
80 } 92 }
81 93
82 watch( 94 watch(
@@ -143,12 +155,6 @@ function changeSlide(dir: string) { @@ -143,12 +155,6 @@ function changeSlide(dir: string) {
143 155
144 <style lang="scss" scoped> 156 <style lang="scss" scoped>
145 .banner-box { 157 .banner-box {
146 - width: 100%;  
147 - height: 100%;  
148 - // position: absolute;  
149 - top: 50%;  
150 - left: 50%;  
151 - transform: translate(-50%, -50%);  
152 .wrapper { 158 .wrapper {
153 width: 100%; 159 width: 100%;
154 height: 100%; 160 height: 100%;
@@ -162,6 +168,15 @@ function changeSlide(dir: string) { @@ -162,6 +168,15 @@ function changeSlide(dir: string) {
162 transform: translate(-50%, -50%); 168 transform: translate(-50%, -50%);
163 transition: 0.5s; 169 transition: 0.5s;
164 box-shadow: 0 0 4px black; 170 box-shadow: 0 0 4px black;
  171 + .video-title {
  172 + width: v-bind('w+"px"');
  173 + font-size: 30px;
  174 + color: white;
  175 + position: absolute;
  176 + bottom: 6%;
  177 + left: 10%;
  178 + z-index: 999;
  179 + }
165 } 180 }
166 } 181 }
167 .arrow { 182 .arrow {
@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public' @@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
2 import { CreateComponentType } from '@/packages/index.d' 2 import { CreateComponentType } from '@/packages/index.d'
3 import { Title1Config } from './index' 3 import { Title1Config } from './index'
4 import cloneDeep from 'lodash/cloneDeep' 4 import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
5 6
6 export const option = { 7 export const option = {
7 dataset: '我是标题', 8 dataset: '我是标题',
@@ -18,6 +19,7 @@ export const option = { @@ -18,6 +19,7 @@ export const option = {
18 19
19 export default class Config extends PublicConfigClass implements CreateComponentType { 20 export default class Config extends PublicConfigClass implements CreateComponentType {
20 public key = Title1Config.key 21 public key = Title1Config.key
  22 + public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
21 public chartConfig = cloneDeep(Title1Config) 23 public chartConfig = cloneDeep(Title1Config)
22 public option = cloneDeep(option) 24 public option = cloneDeep(option)
23 } 25 }
@@ -108,11 +108,6 @@ const props = defineProps({ @@ -108,11 +108,6 @@ const props = defineProps({
108 } 108 }
109 }) 109 })
110 110
111 -//修改默认宽高  
112 -props.chartConfig.attr.w=550  
113 -props.chartConfig.attr.h=60  
114 -  
115 -  
116 const { dataset, attribute } = toRefs(props.chartConfig.option) 111 const { dataset, attribute } = toRefs(props.chartConfig.option)
117 112
118 const { w, h } = toRefs(props.chartConfig.attr) 113 const { w, h } = toRefs(props.chartConfig.attr)
@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public' @@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
2 import { CreateComponentType } from '@/packages/index.d' 2 import { CreateComponentType } from '@/packages/index.d'
3 import { Title2Config } from './index' 3 import { Title2Config } from './index'
4 import cloneDeep from 'lodash/cloneDeep' 4 import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
5 6
6 export const option = { 7 export const option = {
7 dataset: '我是标题', 8 dataset: '我是标题',
@@ -18,6 +19,7 @@ export const option = { @@ -18,6 +19,7 @@ export const option = {
18 19
19 export default class Config extends PublicConfigClass implements CreateComponentType { 20 export default class Config extends PublicConfigClass implements CreateComponentType {
20 public key = Title2Config.key 21 public key = Title2Config.key
  22 + public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
21 public chartConfig = cloneDeep(Title2Config) 23 public chartConfig = cloneDeep(Title2Config)
22 public option = cloneDeep(option) 24 public option = cloneDeep(option)
23 } 25 }
@@ -76,9 +76,7 @@ const props = defineProps({ @@ -76,9 +76,7 @@ const props = defineProps({
76 }) 76 })
77 77
78 const { dataset, attribute } = toRefs(props.chartConfig.option) 78 const { dataset, attribute } = toRefs(props.chartConfig.option)
79 -//修改默认宽高  
80 -props.chartConfig.attr.w=550  
81 -props.chartConfig.attr.h=60 79 +
82 const { w, h } = toRefs(props.chartConfig.attr) 80 const { w, h } = toRefs(props.chartConfig.attr)
83 </script> 81 </script>
84 82
@@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public' @@ -2,6 +2,7 @@ import { PublicConfigClass } from '@/packages/public'
2 import { CreateComponentType } from '@/packages/index.d' 2 import { CreateComponentType } from '@/packages/index.d'
3 import { Title3Config } from './index' 3 import { Title3Config } from './index'
4 import cloneDeep from 'lodash/cloneDeep' 4 import cloneDeep from 'lodash/cloneDeep'
  5 +import { chartInitConfig } from '@/settings/designSetting'
5 6
6 export const option = { 7 export const option = {
7 dataset: '我是标题', 8 dataset: '我是标题',
@@ -31,6 +32,7 @@ export const option = { @@ -31,6 +32,7 @@ export const option = {
31 32
32 export default class Config extends PublicConfigClass implements CreateComponentType { 33 export default class Config extends PublicConfigClass implements CreateComponentType {
33 public key = Title3Config.key 34 public key = Title3Config.key
  35 + public attr = { ...chartInitConfig, zIndex: 1, w: 550, h: 60 }
34 public chartConfig = cloneDeep(Title3Config) 36 public chartConfig = cloneDeep(Title3Config)
35 public option = cloneDeep(option) 37 public option = cloneDeep(option)
36 } 38 }
@@ -117,9 +117,6 @@ const { dataset, attribute } = toRefs(props.chartConfig.option) @@ -117,9 +117,6 @@ const { dataset, attribute } = toRefs(props.chartConfig.option)
117 117
118 const { w, h } = toRefs(props.chartConfig.attr) 118 const { w, h } = toRefs(props.chartConfig.attr)
119 119
120 -//修改默认宽高  
121 -props.chartConfig.attr.w=550  
122 -props.chartConfig.attr.h=60  
123 </script> 120 </script>
124 121
125 <style lang="scss" scoped> 122 <style lang="scss" scoped>