perf(src/views/chart): 优化多个摄像头，可以自动切换也可以手动切换

@@ -9,6 +9,7 @@ export enum sourceTypeEnum {
 }
 
 export const option = {
+  autoSwitch: false,
   dataset: [
     {
       byIdUrl: '', //通过接口获取的url
@@ -18,7 +19,7 @@ export const option = {
     }
   ] as any,
   // 自动播放的间隔（ms）
-  interval: 5000,
+  interval: 2000,
   autoplay: true,
   effect: 'slide',
   displayMode: 'singleGrid'

 <template>
   <CollapseItem name="播放器配置" :expanded="true">
+    <setting-item-box name="开启切换" :alone="true">
+      <setting-item>
+        <n-switch v-model:value="optionData.autoSwitch" size="small"></n-switch>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="间隔时长" :alone="true">
+      <setting-item>
+        <n-input-number v-model:value="optionData.interval" size="small"></n-input-number>
+      </setting-item>
+    </setting-item-box>
     <template v-for="(item, index) in optionData.dataset" :key="index">
       <setting-item-box name="源类型" :alone="true">
         <setting-item>

@@ -37,6 +37,8 @@ const isShowSvg = ref(false)
 
 const { w, h } = toRefs(props.chartConfig.attr)
 
+const { autoSwitch, interval } = toRefs(props.chartConfig.option)
+
 const option = shallowReactive({
   dataset: configOption.dataset
 })
@@ -45,8 +47,6 @@ const cameraRef = ref<InstanceType<typeof CameraItem>>()
 
 let initial = ref(0)
 
-let interval = ref(2500)
-
 const computedFunc = (initial: number, source: any) => {
   if (initial < 0) initial = 0
   if (Array.isArray(source)) {
@@ -130,10 +130,12 @@ let root = ref(null)
 
 onMounted(() => {
   clearInterval(timer)
-  autoPlay()
   const box: any = root.value
   box.onmouseenter = () => clearInterval(timer)
-  box.onmouseleave = () => autoPlay()
+  if (autoSwitch.value) {
+    autoPlay()
+    box.onmouseleave = () => autoPlay()
+  }
 })
 
 // 点击左右按钮切换图片