~xiaohui/daoAnOffice.git

			@@ -10,8 +10,6 @@
			## 开发中...可以提pr完善，框架已经搭建好




			## 项目描述


			@@ -42,19 +40,17 @@

			### 项目预览地址

			[https://www.daidaibg.com/bigscreen-vue3

			[](https://www.daidaibg.com/bigscreen)
			[https://www.daidaibg.com/bigscreen](https://www.daidaibg.com/bigscreen)

			### 项目仓库地址

			github地址

			[https://github.com/daidaibg/IofTV-Screen-Vue3](https://github.com/daidaibg/IofTV-Screen)
			[https://github.com/daidaibg/IofTV-Screen-Vue3](https://github.com/daidaibg/IofTV-Screen-Vue3)

			Gitee地址

			[https://gitee.com/daidaibg/IofTV-Screen-Vue3](https://gitee.com/daidaibg/IofTV-Screen)
			[https://gitee.com/daidaibg/IofTV-Screen-Vue3](https://gitee.com/daidaibg/IofTV-Screen-Vue3)

			### 采用自适应组件方式，

			@@ -114,13 +110,19 @@
			mockXHR()
			```

			## 自适应缩放组件
			##

			### 注意
			## 公用组件

			封装了除面条外个别用到的组件

			### 自适应缩放组件

			#### 注意

			采用Scale方式，会自动给组件父元素添加overflow:hidden

			### 使用
			#### 使用

			```vue
			<template>
			@@ -142,7 +144,9 @@
			}
			</script>
			```
			### API

			#### API

			\| 属性 \| 说明 \| 类型 \| 默认值 \|
			\| ------------ \| ------------------------------------------------------------ \| -------------------------------- \| ------ \|
			\| selfAdaption \| 是否进行自适应 \| Boolean \| true \|
			@@ -153,10 +157,6 @@
			\| fullScreen \| 全屏自适应，启用此配置项时会存在拉伸效果，同时autoScale失效，非必要情况下不建议开启 \| Boolean \| false \|
			\| boxStyle \| 修改容器样式，如居中展示时侧边背景色，符合Vue双向绑定style标准格式 \| Object \| null \|
			\| wrapperStyle \| 修改自适应区域样式，符合Vue双向绑定style标准格式 \| Object \| null \|

			## 公用组件

			封装了除面条外个别用到的组件


			### 外边框
			@@ -177,6 +177,94 @@
			\| :---: \| :--: \| :----: \| :----: \| :----: \|
			\| title \| 标头 \| - \| string \| - \|

			### CountUp 数字滚动

			以下属性同 coutup.js 配置项（same as countup.js properties）

			#### Props

			\| Name \| Type \| Default \| Description \|
			\| -------- \| ---------------- \| ------- \| ------------------------------------------------------------ \|
			\| endVal \| Number \\| String \| - \| 结束值 \|
			\| startVal \| Number \\| String \| 0 \| 起始值 \|
			\| duration \| Number \| 2.5 \| 动画时长，单位：秒 \|
			\| options \| Object \| - \| [countUp.js](https://github.com/inorganik/countUp.js) options 配置项 \|

			以下为组件特有属性（extension properties）

			\| Name \| Type \| Default \| Description \|
			\| -------- \| ----------------- \| ------- \| ----------------------------- \|
			\| autoplay \| Boolean \| true \| 是否自动计数 \|
			\| loop \| Boolean \\| Number \| false \| 循环次数，有限次数 / 无限循环 \|
			\| delay \| Number \| 0 \| loop 循环的间隔时间，单位：秒 \|

			#### 插槽（slots）

			\| Name \| Description \|
			\| ------ \| ----------- \|
			\| prefix \| 前缀 \|
			\| suffix \| 后缀 \|

			#### 事件（Events）

			\| Name \| Description \| return \|
			\| --------- \| -------------------------- \| ------------ \|
			\| @init \| CountUp 实例初始化完成触发 \| CountUp 实例 \|
			\| @finished \| 计数结束时触发 \| - \|

			#### countup.js 配置项说明
			```ts
			interface CountUpOptions {
			startVal?: number // number to start at (0) 开始数值，默认 0
			decimalPlaces?: number // number of decimal places (0) 小数点位数
			duration?: number // animation duration in seconds (2) 动画时长
			useGrouping?: boolean // example: 1,000 vs 1000 (true) 是否使用千分位
			useEasing?: boolean // ease animation (true) 是否开启动画过渡，默认动画函数为easeOutExpo
			smartEasingThreshold?: number // smooth easing for large numbers above this if useEasing (999)
			smartEasingAmount?: number // amount to be eased for numbers above threshold (333)
			separator?: string // grouping separator (',') 千分位分隔符
			decimal?: string // decimal ('.') 小数点分隔符
			// easingFn: easing function for animation (easeOutExpo) 动画函数
			easingFn?: (t: number, b: number, c: number, d: number) => number
			formattingFn?: (n: number) => string // this function formats result 格式化结果
			prefix?: string // text prepended to result 数值前缀
			suffix?: string // text appended to result 数值后缀
			numerals?: string[] // numeral glyph substitution 数字符号替换 0 - 9，例如替换为 [a,b,c,d,e,f,g,h,i,j]
			enableScrollSpy?: boolean // start animation when target is in view 在可视范围内才开始动画
			scrollSpyDelay?: number // delay (ms) after target comes into view 目标进入可视范围内后的延迟时间(毫秒)
			}
			```

			### 胶囊柱图

			#### Props

			\| 属性 \| 说明 \| 类型 \| 可选值 \| 默认值 \|
			\| :----: \| :------: \| :-------------: \| :-----------------------: \| :-----: \|
			\| data \| 柱数据 \| `Array<Object>` \| [data属性](#data属性) \| `[]` \|
			\| config \| 基础配置 \| Object \| [config属性](#config属性) \| `false` \|

			#### config属性

			\| 属性 \| 说明 \| 类型 \| 可选值 \| 默认值 \|
			\| :-------: \| :------: \| :-------------: \| :----: \| :-----: \|
			\| unit \| 单位 \| `String` \| --- \| `''` \|
			\| colors \| 环颜色 \| `Array<String>` \| [1] \| [2] \|
			\| showValue \| 显示数值 \| `Boolean` \| --- \| `false` \|

			#### 注释config注释

			[1] 颜色支持`hex\|rgb\|rgba\|颜色关键字`等四种类型。

			[2] 默认配色为`['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']`。

			#### data属性

			\| 属性 \| 说明 \| 类型 \| 可选值 \| 默认值 \|
			\| :---: \| :------: \| :------: \| :----: \| :----: \|
			\| name \| 柱名称 \| `String` \| --- \| --- \|
			\| value \| 柱对应值 \| `Number` \| --- \| --- \|

			## 中间地图

			### 南海显隐控制