简柏林 / thingskit-view · Commits

Commit 760dd9a89e6044220bfce2087f3fc3d3e5f6d234

Authored by xp.Huang
2 parents 49c465bf ab3e129b

Merge branch 'ft' into 'main_dev' 

perf(external/Componse): 修复摄像头更改源地址无法切换播放问题合并ww代码

See merge request yunteng/thingskit-view!28
Inline Side-by-side
Showing 8 changed files with 99 additions and 70 deletions
@@ -4,8 +4,8 @@ import { LeftCenterRightHeadAnimatConfig } from './index' @@ -4,8 +4,8 @@ import { LeftCenterRightHeadAnimatConfig } from './index'
4 import cloneDeep from 'lodash/cloneDeep' 4 import cloneDeep from 'lodash/cloneDeep'
5 5
6 export const option = { 6 export const option = {
  7 + dataset: '我是标题',
7 animat: { 8 animat: {
8 - text: '我是标题',  
9 colors: ['#00CED1', '#FAD400'], 9 colors: ['#00CED1', '#FAD400'],
10 x: 0, 10 x: 0,
11 y: 0, 11 y: 0,
@@ -30,7 +30,7 @@ @@ -30,7 +30,7 @@
30 <collapse-item name="信息" :expanded="true"> 30 <collapse-item name="信息" :expanded="true">
31 <setting-item-box name="文字" :alone="true"> 31 <setting-item-box name="文字" :alone="true">
32 <setting-item> 32 <setting-item>
33 - <n-input v-model:value="optionData.animat.text" size="small"></n-input> 33 + <n-input v-model:value="optionData.dataset" size="small"></n-input>
34 </setting-item> 34 </setting-item>
35 </setting-item-box> 35 </setting-item-box>
36 </collapse-item> 36 </collapse-item>
1 <template> 1 <template>
2 -<!-- 10  
3 -0,2 54,2 60,4 75,4 81,6 216,6 225,4 240,4 245.3,2 300,2  
4 -90,8 210,8  
5 -20  
6 -0,4 54,4 60,8 75,8 81,12 216,12 225,8 240,8 245.3,4 300,4  
7 -90,16 210,16  
8 -30  
9 -0,6 54,6 60,12 75,12 81,18 216,18 225,12 240,12 245.3,6 300,6  
10 -90,24 210,24  
11 -40  
12 -0,8 54,8 60,16 75,16 81,24 216,24 225,16 240,16 245.3,8 300,8 -->  
13 -<!-- 200 200  
14 -60,160 140,160 -->  
15 -  
16 <div class="go-animat"> 2 <div class="go-animat">
17 <div class="go-svg" :style="{ marginLeft: animat.x + 'px', marginTop: animat.y + 'px' }"> 3 <div class="go-svg" :style="{ marginLeft: animat.x + 'px', marginTop: animat.y + 'px' }">
18 <svg :width="w" :height="h"> 4 <svg :width="w" :height="h">
19 <polyline 5 <polyline
20 fill="transparent" 6 fill="transparent"
21 stroke-width="3" 7 stroke-width="3"
22 - :points="`0,${h / 5} ${w / 5.555555555555556},${h / 5} ${w / 5},${h/2.5} ${w / 4},${h/2.5} ${w / 3.703703703703704},${h/1.666666666666667} ${  
23 - w / 1.388888888888889  
24 - },${h/1.666666666666667} ${w / 1.333333333333333},${h/2.5} ${w / 1.25},${h/2.5} ${w / 1.219512195121951},${h / 5} ${w},${h / 5}`" 8 + :points="`0,${h / 5} ${w / 5.555555555555556},${h / 5} ${w / 5},${h / 2.5} ${w / 4},${h / 2.5} ${
  9 + w / 3.703703703703704
  10 + },${h / 1.666666666666667} ${w / 1.388888888888889},${h / 1.666666666666667} ${w / 1.333333333333333},${
  11 + h / 2.5
  12 + } ${w / 1.25},${h / 2.5} ${w / 1.219512195121951},${h / 5} ${w},${h / 5}`"
25 :stroke="animat.colors[0]" 13 :stroke="animat.colors[0]"
26 > 14 >
27 <animate 15 <animate
@@ -40,7 +28,7 @@ @@ -40,7 +28,7 @@
40 <polyline 28 <polyline
41 fill="transparent" 29 fill="transparent"
42 stroke-width="2" 30 stroke-width="2"
43 - :points="`${w / 3.333333333333333},${h/1.25} ${w / 1.428571428571429},${h/1.25}`" 31 + :points="`${w / 3.333333333333333},${h / 1.25} ${w / 1.428571428571429},${h / 1.25}`"
44 :stroke="animat.colors[1]" 32 :stroke="animat.colors[1]"
45 > 33 >
46 <animate 34 <animate
@@ -60,7 +48,7 @@ @@ -60,7 +48,7 @@
60 </div> 48 </div>
61 <div class="go-text" :style="{ top: animat.textPos.y + '%', left: animat.textPos.x + '%' }"> 49 <div class="go-text" :style="{ top: animat.textPos.y + '%', left: animat.textPos.x + '%' }">
62 <n-gradient-text :size="animat.size" :gradient="animat.gradient"> 50 <n-gradient-text :size="animat.size" :gradient="animat.gradient">
63 - {{ animat.text }} 51 + {{ dataset }}
64 </n-gradient-text> 52 </n-gradient-text>
65 </div> 53 </div>
66 </div> 54 </div>
@@ -78,7 +66,7 @@ const props = defineProps({ @@ -78,7 +66,7 @@ const props = defineProps({
78 66
79 const { w, h } = toRefs(props.chartConfig.attr) 67 const { w, h } = toRefs(props.chartConfig.attr)
80 68
81 -const { animat } = toRefs(props.chartConfig.option) 69 +const { animat, dataset } = toRefs(props.chartConfig.option)
82 </script> 70 </script>
83 71
84 <style lang="scss" scoped> 72 <style lang="scss" scoped>
@@ -4,7 +4,7 @@ import { CameraConfig } from './index' @@ -4,7 +4,7 @@ import { CameraConfig } from './index'
4 import cloneDeep from 'lodash/cloneDeep' 4 import cloneDeep from 'lodash/cloneDeep'
5 5
6 export const option = { 6 export const option = {
7 - dataset: 'http://113.204.115.250:83/openUrl/4itVrfG/live.m3u8' 7 + dataset: 'http://113.204.115.250:83/openUrl/vCJagUM/live.m3u8'
8 } 8 }
9 9
10 export default class Config extends PublicConfigClass implements CreateComponentType { 10 export default class Config extends PublicConfigClass implements CreateComponentType {
1 <template> 1 <template>
2 <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }"> 2 <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
3 <video id="my-player" ref="videoRef" class="video-js my-video"> 3 <video id="my-player" ref="videoRef" class="video-js my-video">
4 - <source :src="props.chartConfig.option.dataset" /> 4 + <source :src="dataset" />
5 </video> 5 </video>
6 </div> 6 </div>
7 </template> 7 </template>
8 <script setup lang="ts"> 8 <script setup lang="ts">
9 -import { PropType, onMounted, ref, watch, toRefs, unref } from 'vue' 9 +import { PropType, onMounted, ref, watch, toRefs, onUnmounted } from 'vue'
10 import { CreateComponentType } from '@/packages/index.d' 10 import { CreateComponentType } from '@/packages/index.d'
11 import videojs from 'video.js' 11 import videojs from 'video.js'
12 import type { VideoJsPlayerOptions } from 'video.js' 12 import type { VideoJsPlayerOptions } from 'video.js'
@@ -21,44 +21,49 @@ const props = defineProps({ @@ -21,44 +21,49 @@ const props = defineProps({
21 21
22 const { w, h } = toRefs(props.chartConfig.attr) 22 const { w, h } = toRefs(props.chartConfig.attr)
23 23
  24 +const { dataset } = toRefs(props.chartConfig.option)
  25 +
24 // video标签 26 // video标签
25 const videoRef = ref<HTMLElement | null>(null) 27 const videoRef = ref<HTMLElement | null>(null)
26 28
27 // video实例对象 29 // video实例对象
28 let videoPlayer: videojs.Player | null = null 30 let videoPlayer: videojs.Player | null = null
29 31
  32 +//options配置
  33 +const options: VideoJsPlayerOptions = {
  34 + language: 'zh-CN', // 设置语言
  35 + controls: true, // 是否显示控制条
  36 + preload: 'auto', // 预加载
  37 + autoplay: true, // 是否自动播放
  38 + fluid: false, // 自适应宽高
  39 + src: dataset?.value, // 要嵌入的视频源的源 URL
  40 + userActions: {
  41 + hotkeys: true
  42 + }
  43 +}
  44 +
30 // 初始化videojs 45 // 初始化videojs
31 const initVideo = () => { 46 const initVideo = () => {
32 - const options: VideoJsPlayerOptions = {  
33 - language: 'zh-CN', // 设置语言  
34 - controls: true, // 是否显示控制条  
35 - preload: 'auto', // 预加载  
36 - autoplay: true, // 是否自动播放  
37 - fluid: false, // 自适应宽高  
38 - src: props.chartConfig.option.dataset, // 要嵌入的视频源的源 URL  
39 - userActions: {  
40 - hotkeys: true  
41 - }  
42 - }  
43 if (videoRef.value) { 47 if (videoRef.value) {
44 // 创建 video 实例 48 // 创建 video 实例
45 - videoPlayer = videojs(unref(videoRef) as HTMLElement, options, onPlayerReady) 49 + videoPlayer = videojs(videoRef.value, options)
46 } 50 }
47 } 51 }
48 52
49 -// video初始化完成的回调函数  
50 -const onPlayerReady = () => {}  
51 -  
52 onMounted(() => { 53 onMounted(() => {
53 initVideo() 54 initVideo()
54 }) 55 })
55 56
  57 +onUnmounted(() => {
  58 + videoPlayer?.dispose()
  59 +})
  60 +
56 watch( 61 watch(
57 () => props.chartConfig.option.dataset, 62 () => props.chartConfig.option.dataset,
58 newData => { 63 newData => {
59 - console.log(newData)  
60 props.chartConfig.option.dataset = newData 64 props.chartConfig.option.dataset = newData
61 - initVideo() 65 + videoPlayer?.src(newData)
  66 + videoPlayer?.play()
62 } 67 }
63 ) 68 )
64 </script> 69 </script>
@@ -4,10 +4,16 @@ import { Title1Config } from './index' @@ -4,10 +4,16 @@ import { Title1Config } from './index'
4 import cloneDeep from 'lodash/cloneDeep' 4 import cloneDeep from 'lodash/cloneDeep'
5 5
6 export const option = { 6 export const option = {
7 - /**  
8 - * Naive UI Date Picker部分属性  
9 - */  
10 - dataset: '我是标题' 7 + dataset: '我是标题',
  8 + attribute: {
  9 + linearColors: ['#0559A3', '#0654A3', '#2AFFFF', '#2AFFFF','#2affff',' #2affff','#16d9d9'],
  10 + fontSize: 20,
  11 + fontPos: {
  12 + x: 0,
  13 + y: 20
  14 + },
  15 + fontColor: '#2AFFFF'
  16 + }
11 } 17 }
12 18
13 export default class Config extends PublicConfigClass implements CreateComponentType { 19 export default class Config extends PublicConfigClass implements CreateComponentType {
1 <template> 1 <template>
2 <CollapseItem name="配置" :expanded="true"> 2 <CollapseItem name="配置" :expanded="true">
3 <SettingItemBox name="标题"> 3 <SettingItemBox name="标题">
4 - <SettingItem name="标题"> 4 + <SettingItem name="内容">
5 <n-input v-model:value="optionData.dataset" /> 5 <n-input v-model:value="optionData.dataset" />
6 </SettingItem> 6 </SettingItem>
  7 + <SettingItem name="大小">
  8 + <n-input v-model:value="optionData.attribute.fontSize" />
  9 + </SettingItem>
  10 + <SettingItem name="颜色">
  11 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
  12 + </SettingItem>
  13 + <SettingItem name="x轴位置">
  14 + <n-input v-model:value="optionData.attribute.fontPos.x" />
  15 + </SettingItem>
  16 + <SettingItem name="y轴位置">
  17 + <n-input v-model:value="optionData.attribute.fontPos.y" />
  18 + </SettingItem>
  19 + </SettingItemBox>
  20 + <SettingItemBox
  21 + :name="`装饰颜色-${index + 1}`"
  22 + v-for="(item, index) in optionData.attribute.linearColors"
  23 + :key="index"
  24 + >
  25 + <SettingItem name="颜色">
  26 + <n-color-picker
  27 + size="small"
  28 + :modes="['hex']"
  29 + v-model:value="optionData.attribute.linearColors[index]"
  30 + ></n-color-picker>
  31 + </SettingItem>
  32 + <SettingItem>
  33 + <n-button
  34 + size="small"
  35 + @click="optionData.attribute.linearColors[index] = optionData.attribute.linearColors[index]"
  36 + >
  37 + 恢复默认
  38 + </n-button>
  39 + </SettingItem>
7 </SettingItemBox> 40 </SettingItemBox>
8 </CollapseItem> 41 </CollapseItem>
9 </template> 42 </template>
@@ -3,19 +3,18 @@ @@ -3,19 +3,18 @@
3 <svg 3 <svg
4 xmlns="http://www.w3.org/2000/svg" 4 xmlns="http://www.w3.org/2000/svg"
5 xmlns:xlink="http://www.w3.org/1999/xlink" 5 xmlns:xlink="http://www.w3.org/1999/xlink"
6 - width="492"  
7 - height="30"  
8 - viewBox="0 0 492 30" 6 + :width="w"
  7 + :height="h"
9 fill="none" 8 fill="none"
10 > 9 >
11 <defs> 10 <defs>
12 <linearGradient id="linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 11 <linearGradient id="linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
13 - <stop offset="0" stop-color="#0559A3" stop-opacity="1" />  
14 - <stop offset="1" stop-color="#0654A3" stop-opacity="0" /> 12 + <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
  13 + <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" />
15 </linearGradient> 14 </linearGradient>
16 <linearGradient id="linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 15 <linearGradient id="linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
17 - <stop offset="0" stop-color="#2AFFFF" stop-opacity="0" />  
18 - <stop offset="1" stop-color="#2AFFFF" stop-opacity="0.2" /> 16 + <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="0" />
  17 + <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0.2" />
19 </linearGradient> 18 </linearGradient>
20 </defs> 19 </defs>
21 <g opacity="1" transform="translate(0 0) rotate(0 246 15)"> 20 <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
@@ -25,16 +24,16 @@ @@ -25,16 +24,16 @@
25 fill="url(#linear_0)" 24 fill="url(#linear_0)"
26 transform="translate(0 0) rotate(0 246 15)" 25 transform="translate(0 0) rotate(0 246 15)"
27 opacity="1" 26 opacity="1"
28 - d="M0,30L492,30L492,0L0,0L0,30Z " 27 + :d="`M0,${h / 2.933333333333333} L${w},${h / 2.933333333333333} L${w},0 L0,0 L0,${h / 2.933333333333333} Z`"
29 /> 28 />
30 <g opacity="1" transform="translate(34 2) rotate(0 46 13)"> 29 <g opacity="1" transform="translate(34 2) rotate(0 46 13)">
31 <text> 30 <text>
32 <tspan 31 <tspan
33 - x="0"  
34 - y="20"  
35 - font-size="20" 32 + :x="attribute.fontPos.x"
  33 + :y="attribute.fontPos.y"
  34 + :font-size="attribute.fontSize"
36 line-height="0" 35 line-height="0"
37 - fill="#2AFFFF" 36 + :fill="attribute.fontColor"
38 opacity="1" 37 opacity="1"
39 font-family="YouSheBiaoTiHei" 38 font-family="YouSheBiaoTiHei"
40 letter-spacing="0" 39 letter-spacing="0"
@@ -49,32 +48,32 @@ @@ -49,32 +48,32 @@
49 style="fill: #2affff" 48 style="fill: #2affff"
50 transform="translate(0 0) rotate(0 0.5 15)" 49 transform="translate(0 0) rotate(0 0.5 15)"
51 opacity="1" 50 opacity="1"
52 - d="M0,30L1,30L1,0L0,0L0,30Z " 51 + :d="`M0,${h / 2.933333333333333}L1,${h / 2.933333333333333}L1,0L0,0L0,${h / 2.933333333333333}Z`"
53 /> 52 />
54 - <g opacity="1" transform="translate(14 8) rotate(0 6.5 7)"> 53 + <g opacity="1" :transform="`translate(14 8) rotate(0 6.5 7)`">
55 <path 54 <path
56 id="矩形 22" 55 id="矩形 22"
57 fill-rule="evenodd" 56 fill-rule="evenodd"
58 - style="fill: #2affff" 57 + :style="{ fill: attribute.linearColors[4] }"
59 transform="translate(2 0) rotate(0 5.5 3.5)" 58 transform="translate(2 0) rotate(0 5.5 3.5)"
60 opacity="1" 59 opacity="1"
61 - d="M6,7L11,7L5,0L0,0L6,7Z " 60 + :d="`M6,7 L11,7 L5,0 L0,0 L6,7 Z`"
62 /> 61 />
63 <path 62 <path
64 id="圆形 7" 63 id="圆形 7"
65 fill-rule="evenodd" 64 fill-rule="evenodd"
66 - style="fill: #2affff" 65 + :style="{ fill: attribute.linearColors[5] }"
67 transform="translate(0 5) rotate(0 2 2)" 66 transform="translate(0 5) rotate(0 2 2)"
68 opacity="1" 67 opacity="1"
69 - d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z " 68 + :d="`M2,0 C0.9,0 0,0.9 0,2 C0,3.1 0.9,4 2,4 C3.1,4 4,3.1 4,2 C4,0.9 3.1,0 2,0 Z`"
70 /> 69 />
71 <path 70 <path
72 id="矩形 22" 71 id="矩形 22"
73 fill-rule="evenodd" 72 fill-rule="evenodd"
74 - style="fill: #16d9d9" 73 + :style="{ fill: attribute.linearColors[6] }"
75 transform="translate(2 7) rotate(0 5.5 3.5)" 74 transform="translate(2 7) rotate(0 5.5 3.5)"
76 opacity="1" 75 opacity="1"
77 - d="M6,0L0,7L5,7L11,0L6,0Z " 76 + :d="`M6,0L0,7L5,7L11,0L6,0Z `"
78 /> 77 />
79 </g> 78 </g>
80 <g opacity="1" transform="translate(396 2) rotate(0 46.5 13.5)"> 79 <g opacity="1" transform="translate(396 2) rotate(0 46.5 13.5)">
@@ -102,15 +101,13 @@ const props = defineProps({ @@ -102,15 +101,13 @@ const props = defineProps({
102 } 101 }
103 }) 102 })
104 103
105 -const { dataset } = toRefs(props.chartConfig.option) 104 +const { dataset, attribute } = toRefs(props.chartConfig.option)
106 105
107 const { w, h } = toRefs(props.chartConfig.attr) 106 const { w, h } = toRefs(props.chartConfig.attr)
108 </script> 107 </script>
109 108
110 <style lang="scss" scoped> 109 <style lang="scss" scoped>
111 .go-content-box { 110 .go-content-box {
112 - width: v-bind('w + "px"');  
113 - height: v-bind('h + "px"');  
114 display: flex; 111 display: flex;
115 align-items: center; 112 align-items: center;
116 justify-content: center; 113 justify-content: center;