Merge branch 'ft' into 'main_dev'

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

See merge request yunteng/thingskit-view!28

@@ -4,8 +4,8 @@ import { LeftCenterRightHeadAnimatConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
+  dataset: '我是标题',
   animat: {
-    text: '我是标题',
     colors: ['#00CED1', '#FAD400'],
     x: 0,
     y: 0,

@@ -30,7 +30,7 @@
   <collapse-item name="信息" :expanded="true">
     <setting-item-box name="文字" :alone="true">
       <setting-item>
-        <n-input v-model:value="optionData.animat.text" size="small"></n-input>
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
       </setting-item>
     </setting-item-box>
   </collapse-item>

 <template>
-<!-- 10
-0,2  54,2  60,4  75,4  81,6  216,6  225,4  240,4  245.3,2  300,2
-90,8 210,8
-20
-0,4  54,4 60,8 75,8 81,12 216,12 225,8 240,8 245.3,4 300,4
-90,16 210,16
-30
-0,6 54,6 60,12 75,12 81,18 216,18 225,12 240,12 245.3,6 300,6
-90,24 210,24
-40
-0,8 54,8 60,16 75,16 81,24 216,24 225,16 240,16 245.3,8 300,8 -->
-<!-- 200 200
-60,160 140,160 -->
-
   <div class="go-animat">
     <div class="go-svg" :style="{ marginLeft: animat.x + 'px', marginTop: animat.y + 'px' }">
       <svg :width="w" :height="h">
         <polyline
           fill="transparent"
           stroke-width="3"
-          :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}  ${
-            w / 1.388888888888889
-          },${h/1.666666666666667} ${w / 1.333333333333333},${h/2.5}   ${w / 1.25},${h/2.5}   ${w / 1.219512195121951},${h / 5}  ${w},${h / 5}`"
+          :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}  ${w / 1.388888888888889},${h / 1.666666666666667} ${w / 1.333333333333333},${
+            h / 2.5
+          }   ${w / 1.25},${h / 2.5}   ${w / 1.219512195121951},${h / 5}  ${w},${h / 5}`"
           :stroke="animat.colors[0]"
         >
           <animate
@@ -40,7 +28,7 @@
         <polyline
           fill="transparent"
           stroke-width="2"
-          :points="`${w / 3.333333333333333},${h/1.25} ${w / 1.428571428571429},${h/1.25}`"
+          :points="`${w / 3.333333333333333},${h / 1.25} ${w / 1.428571428571429},${h / 1.25}`"
           :stroke="animat.colors[1]"
         >
           <animate
@@ -60,7 +48,7 @@
     </div>
     <div class="go-text" :style="{ top: animat.textPos.y + '%', left: animat.textPos.x + '%' }">
       <n-gradient-text :size="animat.size" :gradient="animat.gradient">
-        {{ animat.text }}
+        {{ dataset }}
       </n-gradient-text>
     </div>
   </div>
@@ -78,7 +66,7 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
-const { animat } = toRefs(props.chartConfig.option)
+const { animat, dataset } = toRefs(props.chartConfig.option)
 </script>
 
 <style lang="scss" scoped>

@@ -4,7 +4,7 @@ import { CameraConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  dataset: 'http://113.204.115.250:83/openUrl/4itVrfG/live.m3u8'
+  dataset: 'http://113.204.115.250:83/openUrl/vCJagUM/live.m3u8'
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

 <template>
   <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
     <video id="my-player" ref="videoRef" class="video-js my-video">
-      <source :src="props.chartConfig.option.dataset" />
+      <source :src="dataset" />
     </video>
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, onMounted, ref, watch, toRefs, unref } from 'vue'
+import { PropType, onMounted, ref, watch, toRefs, onUnmounted } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import videojs from 'video.js'
 import type { VideoJsPlayerOptions } from 'video.js'
@@ -21,44 +21,49 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
+const { dataset } = toRefs(props.chartConfig.option)
+
 // video标签
 const videoRef = ref<HTMLElement | null>(null)
 
 // video实例对象
 let videoPlayer: videojs.Player | null = null
 
+//options配置
+const options: VideoJsPlayerOptions = {
+  language: 'zh-CN', // 设置语言
+  controls: true, // 是否显示控制条
+  preload: 'auto', // 预加载
+  autoplay: true, // 是否自动播放
+  fluid: false, // 自适应宽高
+  src: dataset?.value, // 要嵌入的视频源的源 URL
+  userActions: {
+    hotkeys: true
+  }
+}
+
 // 初始化videojs
 const initVideo = () => {
-  const options: VideoJsPlayerOptions = {
-    language: 'zh-CN', // 设置语言
-    controls: true, // 是否显示控制条
-    preload: 'auto', // 预加载
-    autoplay: true, // 是否自动播放
-    fluid: false, // 自适应宽高
-    src: props.chartConfig.option.dataset, // 要嵌入的视频源的源 URL
-    userActions: {
-      hotkeys: true
-    }
-  }
   if (videoRef.value) {
     // 创建 video 实例
-    videoPlayer = videojs(unref(videoRef) as HTMLElement, options, onPlayerReady)
+    videoPlayer = videojs(videoRef.value, options)
   }
 }
 
-// video初始化完成的回调函数
-const onPlayerReady = () => {}
-
 onMounted(() => {
   initVideo()
 })
 
+onUnmounted(() => {
+  videoPlayer?.dispose()
+})
+
 watch(
   () => props.chartConfig.option.dataset,
   newData => {
-    console.log(newData)
     props.chartConfig.option.dataset = newData
-    initVideo()
+    videoPlayer?.src(newData)
+    videoPlayer?.play()
   }
 )
 </script>

@@ -4,10 +4,16 @@ import { Title1Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  /**
-   * Naive UI Date Picker部分属性
-   */
-  dataset: '我是标题'
+  dataset: '我是标题',
+  attribute: {
+    linearColors: ['#0559A3', '#0654A3', '#2AFFFF', '#2AFFFF','#2affff',' #2affff','#16d9d9'],
+    fontSize: 20,
+    fontPos: {
+      x: 0,
+      y: 20
+    },
+    fontColor: '#2AFFFF'
+  }
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

 <template>
   <CollapseItem name="配置" :expanded="true">
     <SettingItemBox name="标题">
-      <SettingItem name="标题">
+      <SettingItem name="内容">
         <n-input v-model:value="optionData.dataset" />
       </SettingItem>
+      <SettingItem name="大小">
+        <n-input v-model:value="optionData.attribute.fontSize" />
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="x轴位置">
+        <n-input v-model:value="optionData.attribute.fontPos.x" />
+      </SettingItem>
+      <SettingItem name="y轴位置">
+        <n-input v-model:value="optionData.attribute.fontPos.y" />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox
+      :name="`装饰颜色-${index + 1}`"
+      v-for="(item, index) in optionData.attribute.linearColors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.attribute.linearColors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.attribute.linearColors[index] = optionData.attribute.linearColors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
     </SettingItemBox>
   </CollapseItem>
 </template>

@@ -3,19 +3,18 @@
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
-      width="492"
-      height="30"
-      viewBox="0 0 492 30"
+      :width="w"
+      :height="h"
       fill="none"
     >
       <defs>
         <linearGradient id="linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
-          <stop offset="0" stop-color="#0559A3" stop-opacity="1" />
-          <stop offset="1" stop-color="#0654A3" stop-opacity="0" />
+          <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
+          <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" />
         </linearGradient>
         <linearGradient id="linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
-          <stop offset="0" stop-color="#2AFFFF" stop-opacity="0" />
-          <stop offset="1" stop-color="#2AFFFF" stop-opacity="0.2" />
+          <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="0" />
+          <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0.2" />
         </linearGradient>
       </defs>
       <g opacity="1" transform="translate(0 0)  rotate(0 246 15)">
@@ -25,16 +24,16 @@
           fill="url(#linear_0)"
           transform="translate(0 0)  rotate(0 246 15)"
           opacity="1"
-          d="M0,30L492,30L492,0L0,0L0,30Z "
+          :d="`M0,${h / 2.933333333333333} L${w},${h / 2.933333333333333} L${w},0 L0,0 L0,${h / 2.933333333333333} Z`"
         />
         <g opacity="1" transform="translate(34 2)  rotate(0 46 13)">
           <text>
             <tspan
-              x="0"
-              y="20"
-              font-size="20"
+              :x="attribute.fontPos.x"
+              :y="attribute.fontPos.y"
+              :font-size="attribute.fontSize"
               line-height="0"
-              fill="#2AFFFF"
+              :fill="attribute.fontColor"
               opacity="1"
               font-family="YouSheBiaoTiHei"
               letter-spacing="0"
@@ -49,32 +48,32 @@
           style="fill: #2affff"
           transform="translate(0 0)  rotate(0 0.5 15)"
           opacity="1"
-          d="M0,30L1,30L1,0L0,0L0,30Z "
+          :d="`M0,${h / 2.933333333333333}L1,${h / 2.933333333333333}L1,0L0,0L0,${h / 2.933333333333333}Z`"
         />
-        <g opacity="1" transform="translate(14 8)  rotate(0 6.5 7)">
+        <g opacity="1" :transform="`translate(14 8)  rotate(0 6.5 7)`">
           <path
             id="矩形 22"
             fill-rule="evenodd"
-            style="fill: #2affff"
+            :style="{ fill: attribute.linearColors[4] }"
             transform="translate(2 0)  rotate(0 5.5 3.5)"
             opacity="1"
-            d="M6,7L11,7L5,0L0,0L6,7Z "
+            :d="`M6,7 L11,7 L5,0 L0,0 L6,7 Z`"
           />
           <path
             id="圆形 7"
             fill-rule="evenodd"
-            style="fill: #2affff"
+            :style="{ fill: attribute.linearColors[5] }"
             transform="translate(0 5)  rotate(0 2 2)"
             opacity="1"
-            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 "
+            :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`"
           />
           <path
             id="矩形 22"
             fill-rule="evenodd"
-            style="fill: #16d9d9"
+            :style="{ fill: attribute.linearColors[6] }"
             transform="translate(2 7)  rotate(0 5.5 3.5)"
             opacity="1"
-            d="M6,0L0,7L5,7L11,0L6,0Z "
+            :d="`M6,0L0,7L5,7L11,0L6,0Z `"
           />
         </g>
         <g opacity="1" transform="translate(396 2)  rotate(0 46.5 13.5)">
@@ -102,15 +101,13 @@ const props = defineProps({
   }
 })
 
-const { dataset } = toRefs(props.chartConfig.option)
+const { dataset, attribute } = toRefs(props.chartConfig.option)
 
 const { w, h } = toRefs(props.chartConfig.attr)
 </script>
 
 <style lang="scss" scoped>
 .go-content-box {
-  width: v-bind('w + "px"');
-  height: v-bind('h + "px"');
   display: flex;
   align-items: center;
   justify-content: center;