Merge branch 'ft' into 'main_dev'

pref: 修改摄像头和大标题

See merge request yunteng/thingskit-view!41

 <template>
   <div class="go-text-box">
-    <n-grid :style="{'background-image': 'url('+option.configOption.bgSrc+')'}" class="go-n-grid" :x-gap="12" :y-gap="3"
-            :cols="3" layout-shift-disabled>
+    <n-grid
+      :style="{ 'background-image': 'url(' + option.configOption.bgSrc + ')', height: h + 'px' }"
+      class="go-n-grid"
+      :x-gap="12"
+      :y-gap="3"
+      :cols="3"
+      layout-shift-disabled
+    >
       <n-grid-item>
         <!--        占位-->
         <div></div>
       </n-grid-item>
       <n-grid-item>
         <span
-            style="position:relative"
-            :style="{ top:option.configOption.y+'px',marginLeft:option.configOption.x+'px',color: option.configOption.textColor, fontSize: option.configOption.fontSize + 'px' }">{{
-            option.configOption.dataset
-          }}</span>
+          style="position: relative"
+          :style="{
+            top: option.configOption.y + 'px',
+            marginLeft: option.configOption.x + 'px',
+            color: option.configOption.textColor,
+            fontSize: option.configOption.fontSize + 'px'
+          }"
+          >{{ option.configOption.dataset }}</span
+        >
       </n-grid-item>
       <n-grid-item>
-        <span style="position:relative" v-if="option.configOption.showRight"
-              :style="{ top:option.configOption.yT+'px',marginLeft:option.configOption.xT+'px',color: option.configOption.textRightSizeColor, fontSize: option.configOption.textRightFontSize + 'px' }">{{
-            newData
-          }}</span>
+        <span
+          style="position: relative"
+          v-if="option.configOption.showRight"
+          :style="{
+            top: option.configOption.yT + 'px',
+            marginLeft: option.configOption.xT + 'px',
+            color: option.configOption.textRightSizeColor,
+            fontSize: option.configOption.textRightFontSize + 'px'
+          }"
+          >{{ newData }}</span
+        >
       </n-grid-item>
     </n-grid>
   </div>
 </template>
 <script setup lang="ts">
-import {PropType, toRefs, shallowReactive, watch, onMounted, onUnmounted, ref} from 'vue'
-import {CreateComponentType} from '@/packages/index.d'
-import {useChartDataFetch} from '@/hooks'
-import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
-import {option as configOption} from './config'
+import { PropType, toRefs, shallowReactive, watch, onMounted, onUnmounted, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
 
 const props = defineProps({
   chartConfig: {
@@ -47,42 +65,40 @@ 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=180
-
+props.chartConfig.attr.w = 1920
+props.chartConfig.attr.h = 100
 
 watch(
-    () => props.chartConfig.option,
-    (newData: any) => {
-      option.configOption = newData
-    },
-    {
-      immediate: true,
-      deep: false
-    }
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.configOption = newData
+  },
+  {
+    immediate: true,
+    deep: false
+  }
 )
 
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   option.configOption = newData
 })
 
-
 //TODO待封装 这里和原作者时间通用获取当前时间代码一样
 onMounted(() => {
-//格式化当前时间
+  //格式化当前时间
   timer = setInterval(() => {
-    const
-        weeks = {
-          "0": '星期日',
-          "1": '星期一',
-          "2": '星期二',
-          "3": '星期三',
-          "4": '星期四',
-          "5": '星期五',
-          "6": '星期六',
-        } as any
+    const weeks = {
+      '0': '星期日',
+      '1': '星期一',
+      '2': '星期二',
+      '3': '星期三',
+      '4': '星期四',
+      '5': '星期五',
+      '6': '星期六'
+    } as any
     const datetime = new Date()
     const year = datetime.getFullYear()
     const month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
@@ -90,7 +106,7 @@ onMounted(() => {
     const hh = datetime.getHours() // 时
     const mm = datetime.getMinutes() // 分
     const ss = datetime.getSeconds() // 分
-    let weekIndex = datetime.getDay();
+    let weekIndex = datetime.getDay()
     let time = ''
     if (hh < 10) time += '0'
     time += hh + ':'
@@ -106,14 +122,15 @@ onMounted(() => {
 onUnmounted(() => {
   clearInterval(timer)
 })
-
 </script>
 
 <style lang="scss" scoped>
 @include go('text-box') {
+  width: v-bind('w+"px"');
+  height: v-bind('h+"px"');
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: start;
+  justify-content: start;
   .n-gradient-text {
     white-space: initial;
   }

+<template>
+  <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
+    <video :id="`my-player${index}`" ref="videoRef" class="video-js my-video vjs-theme-city vjs-big-play-centered">
+      <source :src="sourceSrc" />
+    </video>
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, onUnmounted, watch } from 'vue'
+import videojs from 'video.js'
+import type { VideoJsPlayerOptions } from 'video.js'
+import 'video.js/dist/video-js.min.css'
+
+const props = defineProps({
+  sourceSrc: {
+    type: String
+  },
+  w: {
+    type: Number,
+    default: 300
+  },
+  h: {
+    type: Number,
+    default: 300
+  },
+  index: {
+    type: Number
+  }
+})
+
+// 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: props.sourceSrc, // 要嵌入的视频源的源 URL
+  muted: true,
+  userActions: {
+    hotkeys: true
+  }
+}
+
+// 初始化videojs
+const initVideo = () => {
+  if (videoRef.value) {
+    // 创建 video 实例
+    videoPlayer = videojs(videoRef.value, options)
+  }
+}
+
+watch(
+  () => props.sourceSrc,
+  (newData: any) => {
+    // props.sourceSrc = newData
+    videoPlayer?.src(newData) as any
+    videoPlayer?.play()
+  },
+  {
+    immediate: true
+  }
+)
+
+onMounted(() => {
+  initVideo()
+})
+
+onUnmounted(() => {
+  handleVideoDispose()
+})
+
+//播放
+const handleVideoPlay = () => videoPlayer?.play()
+
+const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
+//暂停
+defineExpose({
+  handleVideoPlay,
+  handleVideoDispose
+})
+</script>
+
+<style lang="scss" scoped>
+.go-content-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .my-video {
+    width: 100% !important;
+    height: 100% !important;
+    position: relative;
+  }
+}
+</style>

@@ -4,7 +4,36 @@ import { CameraConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  dataset: ''
+  dataset: [
+    {
+      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'
+    },
+    {
+      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,
+  autoplay: true,
+  effect: 'slide'
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

 <template>
-  <CollapseItem name="配置" :expanded="true">
+  <CollapseItem name="播放器配置" :expanded="true">
     <setting-item-box name="源地址" :alone="true">
+      <setting-item v-for="(item, index) in optionData.dataset" :key="index">
+        <n-input-group>
+          <n-input v-model:value="item.url" size="small" placeholder="请输入源地址"></n-input>
+          <n-button ghost @click="optionData.dataset.splice(index, 1)"> - </n-button>
+        </n-input-group>
+      </setting-item>
       <setting-item>
-        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+        <n-button v-if="optionData.dataset.length < 5" size="small" @click="optionData.dataset.push({ url: '' })">
+          +
+        </n-button>
       </setting-item>
     </setting-item-box>
   </CollapseItem>

 <template>
-  <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
-    <video  id="my-player" ref="videoRef" class="video-js my-video vjs-theme-city vjs-big-play-centered">
-      <source :src="dataset" />
-    </video>
+  <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" />
+      </div>
+    </div>
+    <a href="javascript:;" class="left" @click="changeSlide('left')"></a>
+    <a href="javascript:;" class="right" @click="changeSlide('right')"></a>
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, onMounted, ref, watch, toRefs, onUnmounted } from 'vue'
+import { PropType, watch, toRefs, shallowReactive, onMounted, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
-import videojs from 'video.js'
-import type { VideoJsPlayerOptions } from 'video.js'
 import 'video.js/dist/video-js.min.css'
+import { option as configOption } from './config'
+import CameraItem from './cameraItem.vue'
 
 const props = defineProps({
   chartConfig: {
@@ -21,66 +25,165 @@ const props = defineProps({
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
-const { dataset } = toRefs(props.chartConfig.option)
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
 
-// video标签
-const videoRef = ref<HTMLElement | null>(null)
+const cameraRef = ref<InstanceType<typeof CameraItem>>()
 
-// video实例对象
-let videoPlayer: videojs.Player | null = null
+let initial = ref(0)
 
-//options配置
-const options: VideoJsPlayerOptions = {
-  language: 'zh-CN', // 设置语言
-  controls: true, // 是否显示控制条
-  preload: 'auto', // 预加载
-  autoplay: true, // 是否自动播放
-  fluid: false, // 自适应宽高
-  src: dataset?.value, // 要嵌入的视频源的源 URL
-  muted:true,
-  userActions: {
-    hotkeys: true
-  }
-}
+let interval = ref(4000)
 
-// 初始化videojs
-const initVideo = () => {
-  if (videoRef.value) {
-    // 创建 video 实例
-    videoPlayer = videojs(videoRef.value, options)
-  }
+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
+  })
 }
 
-onMounted(() => {
-  initVideo()
-})
-
-onUnmounted(() => {
-  videoPlayer?.dispose()
-})
-
 watch(
   () => props.chartConfig.option.dataset,
   newData => {
-    props.chartConfig.option.dataset = newData
-    videoPlayer?.src(newData)
-    videoPlayer?.play()
+    option.dataset = newData
+    console.log(option.dataset)
   },
   {
-    immediate: true
+    immediate: true,
+    deep: true
   }
 )
+option.dataset = computedFunc(initial.value, option.dataset)
+
+watch(
+  () => initial.value,
+  newV => {
+    option.dataset = computedFunc(newV, option.dataset)
+  }
+)
+// 处理自动轮播
+let timer: any = null
+
+const autoPlay = () => {
+  timer = setInterval(() => {
+    initial.value++
+    if (initial.value >= option.dataset.length) {
+      initial.value = 0
+    }
+  }, interval.value)
+}
+
+// 鼠标移入移除效果
+let root = ref(null)
+
+onMounted(() => {
+  clearInterval(timer)
+  autoPlay()
+  const box: any = root.value
+  box.onmouseenter = () => clearInterval(timer)
+  box.onmouseleave = () => autoPlay()
+})
+
+// 点击左右按钮切换图片
+function changeVideo(dir: string) {
+  if (dir === 'left') {
+    // cameraRef.value?.handleVideoPlay()
+    clearInterval(timer)
+    initial.value++
+    initial.value >= option.dataset.length ? (initial.value = 0) : false
+    return
+  }
+  // cameraRef.value?.handleVideoDispose()
+  initial.value--
+  initial.value < 0 ? (initial.value = option.dataset.length - 1) : false
+}
+
+// 左右切换图片设置防抖效果
+function changeSlide(dir: string) {
+  changeVideo(dir)
+}
 </script>
 
 <style lang="scss" scoped>
-.go-content-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .my-video {
-    width: 100% !important;
-    height: 100% !important;
+.banner-box {
+  width: 100%;
+  height: 100%;
+  // position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  .wrapper {
+    width: 100%;
+    height: 100%;
     position: relative;
+    .slide {
+      width: 20%;
+      height: 100%;
+      position: absolute;
+      top: 50%;
+      left: 10%;
+      transform: translate(-50%, -50%);
+      transition: 0.5s;
+      box-shadow: 0 0 4px black;
+    }
+  }
+  .arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 9;
+    width: 50px;
+    height: 50px;
+    background-size: contain;
+    background-color: white;
+    opacity: 0.5;
+  }
+  a.left {
+    @extend .arrow;
+    background-image: url(./left.svg);
+    left: 0px;
+  }
+  a.right {
+    @extend .arrow;
+    background-image: url(./right.svg);
+    right: 0px;
   }
 }
 </style>

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="none"><path d="M10.26 3.2a.75.75 0 0 1 .04 1.06L6.773 8l3.527 3.74a.75.75 0 1 1-1.1 1.02l-4-4.25a.75.75 0 0 1 0-1.02l4-4.25a.75.75 0 0 1 1.06-.04z" fill="currentColor"></path></g></svg>
\ No newline at end of file

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="none"><path d="M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04z" fill="currentColor"></path></g></svg>
\ No newline at end of file

@@ -208,8 +208,16 @@ defineExpose({
       :disabled="true" />
 
   </SettingItemBox>
-
-  <SettingItemBox v-if="requestContentTypeRef === RequestContentTypeEnum.WEB_SOCKET">
+ <!-- 
+  /**
+   * ft 修改
+   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+   * 源代码 无
+   * 修改后代码 新增一句:item-right-style="{ gridTemplateColumns: '7fr 1fr' }"
+   * 优化普通和websocket表格长度不一样样式问题
+   */
+ -->
+  <SettingItemBox v-if="requestContentTypeRef === RequestContentTypeEnum.WEB_SOCKET" :item-right-style="{ gridTemplateColumns: '7fr 1fr' }">
     <NCard v-if="requestParamsTypeRef === RequestParamsTypeEnum.PARAMS" class="dynamic-form">
       <NScrollbar style="max-height: 400px;  box-sizing: border-box;">
         <DynamicForm ref="socketDynamicFormEl" :paramsItemList="getSelectedInterfaceParams" />