Commit 8d1bc60b615913a328f6df6eefb4baf9887a2fa1

Authored by fengwotao
1 parent 66d7fcfc

perf(external/Componse): 新增摄像头

@@ -43,6 +43,7 @@ @@ -43,6 +43,7 @@
43 "qs": "^6.11.0", 43 "qs": "^6.11.0",
44 "screenfull": "^6.0.1", 44 "screenfull": "^6.0.1",
45 "three": "^0.145.0", 45 "three": "^0.145.0",
  46 + "video.js": "^7.20.3",
46 "vue": "^3.2.31", 47 "vue": "^3.2.31",
47 "vue-demi": "^0.13.1", 48 "vue-demi": "^0.13.1",
48 "vue-i18n": "^9.2.2", 49 "vue-i18n": "^9.2.2",
@@ -52,6 +53,7 @@ @@ -52,6 +53,7 @@
52 "vuedraggable": "^4.1.0" 53 "vuedraggable": "^4.1.0"
53 }, 54 },
54 "devDependencies": { 55 "devDependencies": {
  56 + "@types/video.js": "^7.3.49",
55 "@commitlint/cli": "^17.0.2", 57 "@commitlint/cli": "^17.0.2",
56 "@commitlint/config-conventional": "^17.0.2", 58 "@commitlint/config-conventional": "^17.0.2",
57 "@types/node": "^16.11.26", 59 "@types/node": "^16.11.26",
  1 +import { PublicConfigClass } from '@/packages/public'
  2 +import { CreateComponentType } from '@/packages/index.d'
  3 +import { CameraConfig } from './index'
  4 +import cloneDeep from 'lodash/cloneDeep'
  5 +
  6 +export const option = {
  7 + dataset: 'http://113.204.115.250:83/openUrl/4itVrfG/live.m3u8'
  8 +}
  9 +
  10 +export default class Config extends PublicConfigClass implements CreateComponentType {
  11 + public key = CameraConfig.key
  12 + public chartConfig = cloneDeep(CameraConfig)
  13 + public option = cloneDeep(option)
  14 +}
  1 +<template>
  2 + <CollapseItem name="配置" :expanded="true">
  3 + <setting-item-box name="源地址" :alone="true">
  4 + <setting-item>
  5 + <n-input v-model:value="optionData.dataset" size="small"></n-input>
  6 + </setting-item>
  7 + </setting-item-box>
  8 + </CollapseItem>
  9 +</template>
  10 +
  11 +<script setup lang="ts">
  12 +import { PropType } from 'vue'
  13 +import { option } from './config'
  14 +import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
  15 +
  16 +defineProps({
  17 + optionData: {
  18 + type: Object as PropType<typeof option>,
  19 + required: true
  20 + }
  21 +})
  22 +</script>
src/packages/components/external/Composes/Mores/Camera/index.ts renamed from src/packages/components/external/Composes/Mores/DateTime/index.ts
@@ -3,15 +3,15 @@ import { EPackagesCategoryEnum } from '@/packages/components/external/types' @@ -3,15 +3,15 @@ import { EPackagesCategoryEnum } from '@/packages/components/external/types'
3 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' 3 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
4 import { useWidgetKey } from '@/packages/external/useWidgetKey' 4 import { useWidgetKey } from '@/packages/external/useWidgetKey'
5 5
6 -const { key, chartKey, conKey } = useWidgetKey('DateTime')  
7 -export const DateTimeConfig: ConfigType = {  
8 - key,  
9 - chartKey,  
10 - conKey,  
11 - title: '日期时间',  
12 - category: ChatCategoryEnum.MORE,  
13 - categoryName: ChatCategoryEnumName.MORE,  
14 - package: EPackagesCategoryEnum.COMPOSES,  
15 - chartFrame: ChartFrameEnum.NAIVE_UI,  
16 - image: 'dateTime.png', 6 +const { key, chartKey, conKey } = useWidgetKey('Camera')
  7 +export const CameraConfig: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '摄像头',
  12 + category: ChatCategoryEnum.MORE,
  13 + categoryName: ChatCategoryEnumName.MORE,
  14 + package: EPackagesCategoryEnum.COMPOSES,
  15 + chartFrame: ChartFrameEnum.NAIVE_UI,
  16 + image: 'dateTime.png'
17 } 17 }
  1 +<template>
  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">
  4 + <source :src="props.chartConfig.option.dataset" />
  5 + </video>
  6 + </div>
  7 +</template>
  8 +<script setup lang="ts">
  9 +import { PropType, onMounted, ref, watch, toRefs } from 'vue'
  10 +import { CreateComponentType } from '@/packages/index.d'
  11 +import videojs from 'video.js'
  12 +import type { VideoJsPlayerOptions } from 'video.js'
  13 +import 'video.js/dist/video-js.min.css'
  14 +
  15 +const props = defineProps({
  16 + chartConfig: {
  17 + type: Object as PropType<CreateComponentType>,
  18 + required: true
  19 + }
  20 +})
  21 +
  22 +const { w, h } = toRefs(props.chartConfig.attr)
  23 +
  24 +// video标签
  25 +const videoRef = ref<HTMLElement | null>(null)
  26 +
  27 +// video实例对象
  28 +let videoPlayer: videojs.Player | null = null
  29 +
  30 +// 初始化videojs
  31 +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) {
  44 + // 创建 video 实例
  45 + videoPlayer = videojs(videoRef.value, options, onPlayerReady)
  46 + }
  47 +}
  48 +
  49 +// video初始化完成的回调函数
  50 +const onPlayerReady = () => {}
  51 +
  52 +onMounted(() => {
  53 + initVideo()
  54 +})
  55 +
  56 +watch(
  57 + () => props.chartConfig.option.dataset,
  58 + newData => {
  59 + console.log(newData)
  60 + props.chartConfig.option.dataset = newData
  61 + initVideo()
  62 + }
  63 +)
  64 +</script>
  65 +
  66 +<style lang="scss" scoped>
  67 +.go-content-box {
  68 + display: flex;
  69 + align-items: center;
  70 + justify-content: center;
  71 + .my-video {
  72 + width: 100% !important;
  73 + height: 100% !important;
  74 + position: relative;
  75 + }
  76 +}
  77 +</style>
1 -<template>  
2 - <div class="go-content-box" >  
3 - <n-date-picker class="content" @confirm="handleOnConfirm" v-bind={...attribute} v-model:value="dataset" type="datetimerange" />  
4 - </div>  
5 -</template>  
6 -<script setup lang="ts">  
7 -import { PropType, toRefs } from 'vue'  
8 -import { CreateComponentType } from '@/packages/index.d'  
9 -  
10 -const props = defineProps({  
11 - chartConfig: {  
12 - type: Object as PropType<CreateComponentType>,  
13 - required: true  
14 - }  
15 -})  
16 -  
17 -//修改默认宽高距离位置  
18 -props.chartConfig.attr.w = 600  
19 -props.chartConfig.attr.h = 100  
20 -props.chartConfig.attr.x = 200  
21 -props.chartConfig.attr.y = 200  
22 -  
23 -const { dataset,attribute }= toRefs(props.chartConfig.option)  
24 -  
25 -const { w, h } = toRefs(props.chartConfig.attr)  
26 -  
27 -const handleOnConfirm=(values:[number, number])=>{  
28 - window['$message'].success(`您选中了时间段[${values}]`)  
29 -}  
30 -  
31 -  
32 -  
33 -</script>  
34 -  
35 -<style lang="scss" scoped>  
36 -.go-content-box {  
37 - display: flex;  
38 - align-items: center;  
39 - justify-content: center;  
40 - .content{  
41 - width:v-bind('w + "px"');  
42 - height:v-bind('h + "px"');  
43 - }  
44 -}  
45 -</style>  
src/packages/components/external/Composes/Mores/Title1/config.ts renamed from src/packages/components/external/Composes/Mores/DateTime/config.ts
1 import { PublicConfigClass } from '@/packages/public' 1 import { PublicConfigClass } from '@/packages/public'
2 import { CreateComponentType } from '@/packages/index.d' 2 import { CreateComponentType } from '@/packages/index.d'
3 -import { DateTimeConfig } from './index' 3 +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 /** 7 /**
8 * Naive UI Date Picker部分属性 8 * Naive UI Date Picker部分属性
9 */ 9 */
10 - dataset:[Date.now(), Date.now()],  
11 - attribute:{  
12 - //是否支持清除  
13 - clearable:false,  
14 - //是否禁用  
15 - disabled:false,  
16 - //尺寸  
17 - size:'medium'  
18 - } 10 + dataset: '我是标题'
19 } 11 }
20 12
21 export default class Config extends PublicConfigClass implements CreateComponentType { 13 export default class Config extends PublicConfigClass implements CreateComponentType {
22 - public key = DateTimeConfig.key  
23 - public chartConfig = cloneDeep(DateTimeConfig) 14 + public key = Title1Config.key
  15 + public chartConfig = cloneDeep(Title1Config)
24 public option = cloneDeep(option) 16 public option = cloneDeep(option)
25 } 17 }
src/packages/components/external/Composes/Mores/Title1/config.vue renamed from src/packages/components/external/Composes/Mores/DateTime/config.vue
1 <template> 1 <template>
2 - <CollapseItem name="日期时间配置" :expanded="true">  
3 - <SettingItemBox name="属性">  
4 - <SettingItem name="是否支持清除">  
5 - <n-switch v-model:value="optionData.attribute.clearable" />  
6 - </SettingItem>  
7 - <SettingItem name="是否禁用">  
8 - <n-switch v-model:value="optionData.attribute.disabled" />  
9 - </SettingItem>  
10 - <SettingItem name="尺寸">  
11 - <n-select v-model:value="optionData.attribute.size" :options="options" /> 2 + <CollapseItem name="配置" :expanded="true">
  3 + <SettingItemBox name="标题">
  4 + <SettingItem name="标题">
  5 + <n-input v-model:value="optionData.dataset" />
12 </SettingItem> 6 </SettingItem>
13 </SettingItemBox> 7 </SettingItemBox>
14 </CollapseItem> 8 </CollapseItem>
@@ -25,19 +19,4 @@ defineProps({ @@ -25,19 +19,4 @@ defineProps({
25 required: true 19 required: true
26 } 20 }
27 }) 21 })
28 -  
29 -const options=[  
30 - {  
31 - label: "小型",  
32 - value: 'small',  
33 - },  
34 - {  
35 - label: '中等',  
36 - value: 'medium'  
37 - },  
38 - {  
39 - label: '大型',  
40 - value: 'large'  
41 - },  
42 -]  
43 </script> 22 </script>
  1 +import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
  2 +import { EPackagesCategoryEnum } from '@/packages/components/external/types'
  3 +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
  4 +import { useWidgetKey } from '@/packages/external/useWidgetKey'
  5 +
  6 +const { key, chartKey, conKey } = useWidgetKey('Title1')
  7 +export const Title1Config: ConfigType = {
  8 + key,
  9 + chartKey,
  10 + conKey,
  11 + title: '小标题1',
  12 + category: ChatCategoryEnum.MORE,
  13 + categoryName: ChatCategoryEnumName.MORE,
  14 + package: EPackagesCategoryEnum.COMPOSES,
  15 + chartFrame: ChartFrameEnum.NAIVE_UI,
  16 + image: 'dateTime.png'
  17 +}
  1 +<template>
  2 + <div class="go-content-box">
  3 + <svg
  4 + xmlns="http://www.w3.org/2000/svg"
  5 + xmlns:xlink="http://www.w3.org/1999/xlink"
  6 + width="492"
  7 + height="30"
  8 + viewBox="0 0 492 30"
  9 + fill="none"
  10 + >
  11 + <defs>
  12 + <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" />
  15 + </linearGradient>
  16 + <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" />
  19 + </linearGradient>
  20 + </defs>
  21 + <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
  22 + <path
  23 + id="矩形 20"
  24 + fill-rule="evenodd"
  25 + fill="url(#linear_0)"
  26 + transform="translate(0 0) rotate(0 246 15)"
  27 + opacity="1"
  28 + d="M0,30L492,30L492,0L0,0L0,30Z "
  29 + />
  30 + <g opacity="1" transform="translate(34 2) rotate(0 46 13)">
  31 + <text>
  32 + <tspan
  33 + x="0"
  34 + y="20"
  35 + font-size="20"
  36 + line-height="0"
  37 + fill="#2AFFFF"
  38 + opacity="1"
  39 + font-family="YouSheBiaoTiHei"
  40 + letter-spacing="0"
  41 + >
  42 + {{ dataset }}
  43 + </tspan>
  44 + </text>
  45 + </g>
  46 + <path
  47 + id="矩形 21"
  48 + fill-rule="evenodd"
  49 + style="fill: #2affff"
  50 + transform="translate(0 0) rotate(0 0.5 15)"
  51 + opacity="1"
  52 + d="M0,30L1,30L1,0L0,0L0,30Z "
  53 + />
  54 + <g opacity="1" transform="translate(14 8) rotate(0 6.5 7)">
  55 + <path
  56 + id="矩形 22"
  57 + fill-rule="evenodd"
  58 + style="fill: #2affff"
  59 + transform="translate(2 0) rotate(0 5.5 3.5)"
  60 + opacity="1"
  61 + d="M6,7L11,7L5,0L0,0L6,7Z "
  62 + />
  63 + <path
  64 + id="圆形 7"
  65 + fill-rule="evenodd"
  66 + style="fill: #2affff"
  67 + transform="translate(0 5) rotate(0 2 2)"
  68 + 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 "
  70 + />
  71 + <path
  72 + id="矩形 22"
  73 + fill-rule="evenodd"
  74 + style="fill: #16d9d9"
  75 + transform="translate(2 7) rotate(0 5.5 3.5)"
  76 + opacity="1"
  77 + d="M6,0L0,7L5,7L11,0L6,0Z "
  78 + />
  79 + </g>
  80 + <g opacity="1" transform="translate(396 2) rotate(0 46.5 13.5)">
  81 + <path
  82 + id="并集"
  83 + fill-rule="evenodd"
  84 + fill="url(#linear_1)"
  85 + transform="translate(0 0) rotate(0 46.5 13.5)"
  86 + opacity="1"
  87 + d="M1 0L1 1L0 1L0 2L1 2L1 3L2 3L2 2L3 2L3 1L2 1L2 0L1 0Z M7 0L7 1L6 1L6 2L7 2L7 3L8 3L8 2L9 2L9 1L8 1L8 0L7 0Z M13 0L13 1L12 1L12 2L13 2L13 3L14 3L14 2L15 2L15 1L14 1L14 0L13 0Z M19 0L19 1L18 1L18 2L19 2L19 3L20 3L20 2L21 2L21 1L20 1L20 0L19 0Z M25 0L25 1L24 1L24 2L25 2L25 3L26 3L26 2L27 2L27 1L26 1L26 0L25 0Z M31 0L31 1L30 1L30 2L31 2L31 3L32 3L32 2L33 2L33 1L32 1L32 0L31 0Z M37 0L37 1L36 1L36 2L37 2L37 3L38 3L38 2L39 2L39 1L38 1L38 0L37 0Z M43 0L43 1L42 1L42 2L43 2L43 3L44 3L44 2L45 2L45 1L44 1L44 0L43 0Z M49 0L49 1L48 1L48 2L49 2L49 3L50 3L50 2L51 2L51 1L50 1L50 0L49 0Z M55 0L55 1L54 1L54 2L55 2L55 3L56 3L56 2L57 2L57 1L56 1L56 0L55 0Z M61 0L61 1L60 1L60 2L61 2L61 3L62 3L62 2L63 2L63 1L62 1L62 0L61 0Z M67 0L67 1L66 1L66 2L67 2L67 3L68 3L68 2L69 2L69 1L68 1L68 0L67 0Z M73 0L73 1L72 1L72 2L73 2L73 3L74 3L74 2L75 2L75 1L74 1L74 0L73 0Z M79 0L79 1L78 1L78 2L79 2L79 3L80 3L80 2L81 2L81 1L80 1L80 0L79 0Z M85 0L85 1L84 1L84 2L85 2L85 3L86 3L86 2L87 2L87 1L86 1L86 0L85 0Z M91 0L91 1L90 1L90 2L91 2L91 3L92 3L92 2L93 2L93 1L92 1L92 0L91 0Z M1 6L1 7L0 7L0 8L1 8L1 9L2 9L2 8L3 8L3 7L2 7L2 6L1 6Z M7 6L7 7L6 7L6 8L7 8L7 9L8 9L8 8L9 8L9 7L8 7L8 6L7 6Z M13 6L13 7L12 7L12 8L13 8L13 9L14 9L14 8L15 8L15 7L14 7L14 6L13 6Z M19 6L19 7L18 7L18 8L19 8L19 9L20 9L20 8L21 8L21 7L20 7L20 6L19 6Z M25 6L25 7L24 7L24 8L25 8L25 9L26 9L26 8L27 8L27 7L26 7L26 6L25 6Z M31 6L31 7L30 7L30 8L31 8L31 9L32 9L32 8L33 8L33 7L32 7L32 6L31 6Z M37 6L37 7L36 7L36 8L37 8L37 9L38 9L38 8L39 8L39 7L38 7L38 6L37 6Z M43 6L43 7L42 7L42 8L43 8L43 9L44 9L44 8L45 8L45 7L44 7L44 6L43 6Z M49 6L49 7L48 7L48 8L49 8L49 9L50 9L50 8L51 8L51 7L50 7L50 6L49 6Z M55 6L55 7L54 7L54 8L55 8L55 9L56 9L56 8L57 8L57 7L56 7L56 6L55 6Z M61 6L61 7L60 7L60 8L61 8L61 9L62 9L62 8L63 8L63 7L62 7L62 6L61 6Z M67 6L67 7L66 7L66 8L67 8L67 9L68 9L68 8L69 8L69 7L68 7L68 6L67 6Z M73 6L73 7L72 7L72 8L73 8L73 9L74 9L74 8L75 8L75 7L74 7L74 6L73 6Z M79 6L79 7L78 7L78 8L79 8L79 9L80 9L80 8L81 8L81 7L80 7L80 6L79 6Z M85 6L85 7L84 7L84 8L85 8L85 9L86 9L86 8L87 8L87 7L86 7L86 6L85 6Z M91 6L91 7L90 7L90 8L91 8L91 9L92 9L92 8L93 8L93 7L92 7L92 6L91 6Z M1 12L1 13L0 13L0 14L1 14L1 15L2 15L2 14L3 14L3 13L2 13L2 12L1 12Z M7 12L7 13L6 13L6 14L7 14L7 15L8 15L8 14L9 14L9 13L8 13L8 12L7 12Z M13 12L13 13L12 13L12 14L13 14L13 15L14 15L14 14L15 14L15 13L14 13L14 12L13 12Z M19 12L19 13L18 13L18 14L19 14L19 15L20 15L20 14L21 14L21 13L20 13L20 12L19 12Z M25 12L25 13L24 13L24 14L25 14L25 15L26 15L26 14L27 14L27 13L26 13L26 12L25 12Z M31 12L31 13L30 13L30 14L31 14L31 15L32 15L32 14L33 14L33 13L32 13L32 12L31 12Z M37 12L37 13L36 13L36 14L37 14L37 15L38 15L38 14L39 14L39 13L38 13L38 12L37 12Z M43 12L43 13L42 13L42 14L43 14L43 15L44 15L44 14L45 14L45 13L44 13L44 12L43 12Z M49 12L49 13L48 13L48 14L49 14L49 15L50 15L50 14L51 14L51 13L50 13L50 12L49 12Z M55 12L55 13L54 13L54 14L55 14L55 15L56 15L56 14L57 14L57 13L56 13L56 12L55 12Z M61 12L61 13L60 13L60 14L61 14L61 15L62 15L62 14L63 14L63 13L62 13L62 12L61 12Z M67 12L67 13L66 13L66 14L67 14L67 15L68 15L68 14L69 14L69 13L68 13L68 12L67 12Z M73 12L73 13L72 13L72 14L73 14L73 15L74 15L74 14L75 14L75 13L74 13L74 12L73 12Z M79 12L79 13L78 13L78 14L79 14L79 15L80 15L80 14L81 14L81 13L80 13L80 12L79 12Z M85 12L85 13L84 13L84 14L85 14L85 15L86 15L86 14L87 14L87 13L86 13L86 12L85 12Z M91 12L91 13L90 13L90 14L91 14L91 15L92 15L92 14L93 14L93 13L92 13L92 12L91 12Z M1 18L1 19L0 19L0 20L1 20L1 21L2 21L2 20L3 20L3 19L2 19L2 18L1 18Z M7 18L7 19L6 19L6 20L7 20L7 21L8 21L8 20L9 20L9 19L8 19L8 18L7 18Z M13 18L13 19L12 19L12 20L13 20L13 21L14 21L14 20L15 20L15 19L14 19L14 18L13 18Z M19 18L19 19L18 19L18 20L19 20L19 21L20 21L20 20L21 20L21 19L20 19L20 18L19 18Z M25 18L25 19L24 19L24 20L25 20L25 21L26 21L26 20L27 20L27 19L26 19L26 18L25 18Z M31 18L31 19L30 19L30 20L31 20L31 21L32 21L32 20L33 20L33 19L32 19L32 18L31 18Z M37 18L37 19L36 19L36 20L37 20L37 21L38 21L38 20L39 20L39 19L38 19L38 18L37 18Z M43 18L43 19L42 19L42 20L43 20L43 21L44 21L44 20L45 20L45 19L44 19L44 18L43 18Z M49 18L49 19L48 19L48 20L49 20L49 21L50 21L50 20L51 20L51 19L50 19L50 18L49 18Z M55 18L55 19L54 19L54 20L55 20L55 21L56 21L56 20L57 20L57 19L56 19L56 18L55 18Z M61 18L61 19L60 19L60 20L61 20L61 21L62 21L62 20L63 20L63 19L62 19L62 18L61 18Z M67 18L67 19L66 19L66 20L67 20L67 21L68 21L68 20L69 20L69 19L68 19L68 18L67 18Z M73 18L73 19L72 19L72 20L73 20L73 21L74 21L74 20L75 20L75 19L74 19L74 18L73 18Z M79 18L79 19L78 19L78 20L79 20L79 21L80 21L80 20L81 20L81 19L80 19L80 18L79 18Z M85 18L85 19L84 19L84 20L85 20L85 21L86 21L86 20L87 20L87 19L86 19L86 18L85 18Z M91 18L91 19L90 19L90 20L91 20L91 21L92 21L92 20L93 20L93 19L92 19L92 18L91 18Z M1 24L1 25L0 25L0 26L1 26L1 27L2 27L2 26L3 26L3 25L2 25L2 24L1 24Z M7 24L7 25L6 25L6 26L7 26L7 27L8 27L8 26L9 26L9 25L8 25L8 24L7 24Z M13 24L13 25L12 25L12 26L13 26L13 27L14 27L14 26L15 26L15 25L14 25L14 24L13 24Z M19 24L19 25L18 25L18 26L19 26L19 27L20 27L20 26L21 26L21 25L20 25L20 24L19 24Z M25 24L25 25L24 25L24 26L25 26L25 27L26 27L26 26L27 26L27 25L26 25L26 24L25 24Z M31 24L31 25L30 25L30 26L31 26L31 27L32 27L32 26L33 26L33 25L32 25L32 24L31 24Z M37 24L37 25L36 25L36 26L37 26L37 27L38 27L38 26L39 26L39 25L38 25L38 24L37 24Z M43 24L43 25L42 25L42 26L43 26L43 27L44 27L44 26L45 26L45 25L44 25L44 24L43 24Z M49 24L49 25L48 25L48 26L49 26L49 27L50 27L50 26L51 26L51 25L50 25L50 24L49 24Z M55 24L55 25L54 25L54 26L55 26L55 27L56 27L56 26L57 26L57 25L56 25L56 24L55 24Z M61 24L61 25L60 25L60 26L61 26L61 27L62 27L62 26L63 26L63 25L62 25L62 24L61 24Z M67 24L67 25L66 25L66 26L67 26L67 27L68 27L68 26L69 26L69 25L68 25L68 24L67 24Z M73 24L73 25L72 25L72 26L73 26L73 27L74 27L74 26L75 26L75 25L74 25L74 24L73 24Z M79 24L79 25L78 25L78 26L79 26L79 27L80 27L80 26L81 26L81 25L80 25L80 24L79 24Z M85 24L85 25L84 25L84 26L85 26L85 27L86 27L86 26L87 26L87 25L86 25L86 24L85 24Z M91 24L91 25L90 25L90 26L91 26L91 27L92 27L92 26L93 26L93 25L92 25L92 24L91 24Z "
  88 + />
  89 + </g>
  90 + </g>
  91 + </svg>
  92 + </div>
  93 +</template>
  94 +<script setup lang="ts">
  95 +import { PropType, toRefs } from 'vue'
  96 +import { CreateComponentType } from '@/packages/index.d'
  97 +
  98 +const props = defineProps({
  99 + chartConfig: {
  100 + type: Object as PropType<CreateComponentType>,
  101 + required: true
  102 + }
  103 +})
  104 +
  105 +const { dataset } = toRefs(props.chartConfig.option)
  106 +
  107 +const { w, h } = toRefs(props.chartConfig.attr)
  108 +</script>
  109 +
  110 +<style lang="scss" scoped>
  111 +.go-content-box {
  112 + width: v-bind('w + "px"');
  113 + height: v-bind('h + "px"');
  114 + display: flex;
  115 + align-items: center;
  116 + justify-content: center;
  117 +}
  118 +</style>
1 import { ButtonConfig } from './Button/index' 1 import { ButtonConfig } from './Button/index'
2 -import { DateTimeConfig } from './DateTime/index' 2 +import { Title1Config } from './Title1/index'
3 import { TitleConfig } from './Title/index' 3 import { TitleConfig } from './Title/index'
  4 +import { CameraConfig } from './Camera/index'
4 5
5 -export default [ButtonConfig,DateTimeConfig,TitleConfig] 6 +export default [ButtonConfig, Title1Config, TitleConfig, CameraConfig]