Compare commits
No commits in common. "master" and "V2.2.0-alpha" have entirely different histories.
master
...
V2.2.0-alp
|
|
@ -1,28 +0,0 @@
|
||||||
---
|
|
||||||
name: Bug report
|
|
||||||
about: 提交Bug反馈
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- 请确定这是一个Bug反馈，而不是一个需求反馈或问题求助，否则ISSUE可能被关闭 -->
|
|
||||||
<!-- 请提供可供复现Bug的必要条件，否则ISSUE可能被关闭 -->
|
|
||||||
<!-- 创建Bug反馈前请确定你的DataV是最新版的 -->
|
|
||||||
|
|
||||||
## Bug report
|
|
||||||
|
|
||||||
#### 出现Bug的组件？
|
|
||||||
|
|
||||||
#### 组件配置数据？
|
|
||||||
<!-- (config等props，若无配置请忽略) -->
|
|
||||||
|
|
||||||
#### 控制台错误输出？
|
|
||||||
<!-- (若无错误输出请忽略) -->
|
|
||||||
|
|
||||||
#### 期望情况？
|
|
||||||
|
|
||||||
#### 实际情况？
|
|
||||||
|
|
||||||
#### 其他相关信息
|
|
||||||
|
|
||||||
- DataV版本
|
|
||||||
- 浏览器版本
|
|
||||||
- 其他
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
---
|
|
||||||
name: Feature request
|
|
||||||
about: 新特性建议
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- 创建新特性建议前请确定你的DataV是最新版的 -->
|
|
||||||
|
|
||||||
## Feature request
|
|
||||||
|
|
||||||
#### 这个特性解决了什么问题？
|
|
||||||
|
|
||||||
#### 这个特性的实现形式？
|
|
||||||
|
|
||||||
#### 是否愿意为此特性提交PR？
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
---
|
|
||||||
name: Component request
|
|
||||||
about: 新组件建议
|
|
||||||
---
|
|
||||||
|
|
||||||
<!-- 创建新组件建议前请确定你的DataV是最新版的 -->
|
|
||||||
<!-- (将[ ]修改为[x]) -->
|
|
||||||
|
|
||||||
## Component request
|
|
||||||
|
|
||||||
#### 新组件的类型？
|
|
||||||
|
|
||||||
* [ ] 边框
|
|
||||||
* [ ] 装饰
|
|
||||||
* [ ] 图表
|
|
||||||
* [ ] 其他
|
|
||||||
|
|
||||||
#### 这个组件的功能描述 (边框及装饰类，请提供样图)？
|
|
||||||
|
|
||||||
#### 是否愿意为此组件提交PR？
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
<!-- (将[ ]修改为[x]) -->
|
|
||||||
|
|
||||||
**该PR的类型是？** (至少选择一个)
|
|
||||||
|
|
||||||
- [ ] Bug修复
|
|
||||||
- [ ] 新特性
|
|
||||||
- [ ] 新组件
|
|
||||||
|
|
||||||
**该PR是否向下兼容?** (选择任一)
|
|
||||||
|
|
||||||
- [ ] 是
|
|
||||||
- [ ] 否
|
|
||||||
|
|
||||||
如果为否，请描述冲突情况:
|
|
||||||
|
|
||||||
**涉及到的ISSUE:**
|
|
||||||
|
|
||||||
- [ ] 该PR如果涉及到某个ISSUE, 请在PR标题中描述出来 (例如. `fix #xxx[,#xxx]`, "xxx"为ISSUE序号)
|
|
||||||
|
|
||||||
**是否在Chrome浏览器下进行过测试？**
|
|
||||||
|
|
||||||
- [ ] 是
|
|
||||||
- [ ] 否
|
|
||||||
|
|
||||||
如果这是一个**新特性**或**新组件**相关的PR，请提供如下信息
|
|
||||||
|
|
||||||
- [ ] 添加该特性或组件的原因
|
|
||||||
- [ ] 文档应该修改哪些信息
|
|
||||||
- [ ] 测试相关
|
|
||||||
|
|
||||||
提交**新特性**或**新组件**前请先发起一个相关的ISSUE请求
|
|
||||||
|
|
||||||
**其他信息:**
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
.DS_Store
|
.DS_Store
|
||||||
node_modules
|
node_modules
|
||||||
package-lock.json
|
/dist
|
||||||
/deploy/config.js
|
/.svn
|
||||||
|
/DataV
|
||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
.env.local
|
.env.local
|
||||||
|
|
@ -11,7 +12,6 @@ package-lock.json
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
yarn.lock
|
|
||||||
|
|
||||||
# Editor directories and files
|
# Editor directories and files
|
||||||
.idea
|
.idea
|
||||||
|
|
|
||||||
362
CHANGELOG.md
362
CHANGELOG.md
|
|
@ -1,365 +1,3 @@
|
||||||
# 2.10.0-alpha (2020-09-09)
|
|
||||||
|
|
||||||
### New
|
|
||||||
|
|
||||||
- **decoration12:** New decoration(Radar scan).
|
|
||||||
|
|
||||||
### Optmization
|
|
||||||
|
|
||||||
- **decoration** add `dur` configuration.
|
|
||||||
- **activeRingChart** add `digitalFlopUnit` configuration.
|
|
||||||
|
|
||||||
# 2.9.9-alpha (2020-08-25)
|
|
||||||
|
|
||||||
### Optmization
|
|
||||||
|
|
||||||
- **borderBox:** Canonical class name.
|
|
||||||
- **autoResize(mixin):** Add exception prompt.
|
|
||||||
|
|
||||||
# 2.9.8-alpha (2020-08-20)
|
|
||||||
|
|
||||||
### Optmization
|
|
||||||
|
|
||||||
- **scrollRankingBoard:** Add value formatter.
|
|
||||||
|
|
||||||
# 2.9.7-alpha (2020-08-19)
|
|
||||||
|
|
||||||
### Optmization
|
|
||||||
|
|
||||||
- **scrollBoard:** Optimize the update effect of updateRows.
|
|
||||||
|
|
||||||
# 2.9.6-alpha (2020-08-05)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **scrollBoard:** Carousel is abnormal when carousel is page.
|
|
||||||
- **scrollRankingBoard:** Carousel is abnormal when carousel is page.
|
|
||||||
|
|
||||||
# 2.9.5-alpha (2020-08-05)
|
|
||||||
|
|
||||||
### Optmization
|
|
||||||
|
|
||||||
- **scrollBoard:** Reduce redundant node rendering.
|
|
||||||
- **scrollRankingBoard:** Reduce redundant node rendering.
|
|
||||||
- **scrollBoard:** Add api to update row data.
|
|
||||||
|
|
||||||
# 2.9.4-alpha (2020-07-03)
|
|
||||||
|
|
||||||
### Optmization
|
|
||||||
|
|
||||||
- **scrollBoard:** Optimize key value [(#8)](https://github.com/DataV-Team/DataV-React/issues/8).
|
|
||||||
|
|
||||||
# 2.9.3-alpha (2020-07-02)
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **uuid:** Optimization of `-` in uuid will cause abnormal svg animation [(#108)](https://github.com/DataV-Team/DataV/issues/108).
|
|
||||||
|
|
||||||
# 2.9.2-alpha (2020-06-16)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **scrollBoard:** reset animationIndex when config upate.
|
|
||||||
|
|
||||||
# 2.9.1-alpha (2020-06-16)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **scrollRankingBoard:** Calculation optimization of negative values [(#101)](https://github.com/DataV-Team/DataV/pull/101).
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **digitalFlop:** add number formatter.
|
|
||||||
|
|
||||||
# 2.9.0-alpha (2020-06-10)
|
|
||||||
|
|
||||||
### ScrollBoard
|
|
||||||
|
|
||||||
- **hoverPause:** add `hoverPause` configuration [(#96)](https://github.com/DataV-Team/DataV/pull/96).
|
|
||||||
- **mouseover:** add `mouseover` event [(#96)](https://github.com/DataV-Team/DataV/pull/96).
|
|
||||||
|
|
||||||
# 2.8.4-alpha (2020-05-25)
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **uuid:** Use uuid to produce unique id.
|
|
||||||
|
|
||||||
# 2.8.3-alpha (2020-05-06)
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **activeRingChart:** add `showOriginValue` configuration.
|
|
||||||
- **capsuleChart:** add `showValue` configuration.
|
|
||||||
|
|
||||||
# 2.8.2-alpha (2020-05-06)
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **borderBox8:** add `reverse` configuration.
|
|
||||||
|
|
||||||
# 2.8.1-alpha (2020-05-03)
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **digitalFlop:** Use `\n` to start a newline.
|
|
||||||
- **digitalFlop:** `rowGap` configuration.
|
|
||||||
|
|
||||||
# 2.7.4-alpha (2020-04-15)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **capsuleChart:** Calculate exception when min value is less 5 [(#59)](https://github.com/DataV-Team/DataV/pull/59).
|
|
||||||
|
|
||||||
# 2.7.3-alpha (2020-01-16)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **activeRingChart:** `parseInt` precision lost.
|
|
||||||
|
|
||||||
# 2.7.2-alpha (2020-01-10)
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **ativeRingChart:** Add digitalFlopToFixed configuration.
|
|
||||||
|
|
||||||
# 2.7.1-alpha (2020-01-08)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **flylineChartEnhanced:** Exception when relative is false.
|
|
||||||
|
|
||||||
# 2.7.0-alpha (2020-01-05)
|
|
||||||
|
|
||||||
### New
|
|
||||||
|
|
||||||
- **flylineChartEnhanced:** Enhanced flylineChart [(#12)](https://github.com/DataV-Team/DataV/issues/12).
|
|
||||||
|
|
||||||
# 2.6.0-alpha (2019-12-25)
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **scrollRankingBoard:** Configurable auto-sequencing [(#35)](https://github.com/DataV-Team/DataV/pull/35).
|
|
||||||
- **scrollRankingBoard:** Render name using `v-html` [(#36)](https://github.com/DataV-Team/DataV/pull/36).
|
|
||||||
|
|
||||||
# 2.5.0-alpha (2019-12-06)
|
|
||||||
|
|
||||||
### Feature
|
|
||||||
|
|
||||||
- **borderBox & decoration:** **Configurable** colors.
|
|
||||||
```html
|
|
||||||
<!-- Example -->
|
|
||||||
<dv-border-box-1 :color="['red', 'green']" />
|
|
||||||
<dv-decoration-1 :color="['red', 'green']" />
|
|
||||||
```
|
|
||||||
- **scrollBoard:** Configurable index header [(#33)](https://github.com/DataV-Team/DataV/pull/33).
|
|
||||||
|
|
||||||
### New
|
|
||||||
|
|
||||||
- **borderBox11**
|
|
||||||
- **borderBox12**
|
|
||||||
- **borderBox13**
|
|
||||||
- **decoration11**
|
|
||||||
|
|
||||||
# 2.4.8-alpha (2019-11-12)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **scrollBoard:** After updating props, the carousel speed is abnormal [(#25)](https://github.com/jiaming743/DataV/issues/16),[(#20)](https://github.com/jiaming743/DataV/issues/25).
|
|
||||||
- **scrollRankingBorad:** After updating props, the carousel speed is abnormal[(#25)](https://github.com/jiaming743/DataV/issues/16),[(#20)](https://github.com/jiaming743/DataV/issues/25).
|
|
||||||
|
|
||||||
# 2.4.7-alpha (2019-10-24)
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **charts:** Optimize memory leaks.
|
|
||||||
- **digitalFlop:** Optimize memory leaks.
|
|
||||||
|
|
||||||
# 2.4.6-alpha (2019-10-24)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **activeRingChart:** Optimize memory leaks [(#16)](https://github.com/jiaming743/DataV/issues/16),[(#20)](https://github.com/jiaming743/DataV/issues/20).
|
|
||||||
|
|
||||||
# 2.4.5-alpha (2019-09-24)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **activeRingChart:** Calculation exception due to data value being 0 [(#17)](https://github.com/jiaming743/DataV/issues/17).
|
|
||||||
|
|
||||||
# 2.4.4-alpha (2019-09-05)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **scrollBoard:** Header column width is abnormal when row data is empty.
|
|
||||||
|
|
||||||
# 2.4.3-alpha (2019-09-04)
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **scrollRankingBoard:** Add a unit configuration item.
|
|
||||||
|
|
||||||
# 2.4.2-alpha (2019-08-30)
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **capsuleChart:** Class name compatibility optimization.
|
|
||||||
|
|
||||||
# 2.4.1-alpha (2019-08-29)
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **capsuleChart:** Adaptive display unit.
|
|
||||||
|
|
||||||
# 2.4.0-alpha (2019-08-29)
|
|
||||||
|
|
||||||
### New
|
|
||||||
|
|
||||||
- **borderBox10**
|
|
||||||
- **capsuleChart**
|
|
||||||
|
|
||||||
# 2.3.9-alpha (2019-08-27)
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **percentPond:** Compatibility enhancement.
|
|
||||||
|
|
||||||
# 2.3.8-alpha (2019-08-27)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **percentPond:** Style compatibility and gradient exceptions.
|
|
||||||
|
|
||||||
# 2.3.7-alpha (2019-08-26)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **borderBox1:** Parent container setting `text-align: center` to cause display exception [(#6)](https://github.com/jiaming743/DataV/issues/6).
|
|
||||||
|
|
||||||
# 2.3.6-alpha (2019-08-24)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **borderBox1:** Animation exception caused by incompatible syntax and spelling mistake [(#4)](https://github.com/jiaming743/DataV/issues/4)[(#5)](https://github.com/jiaming743/DataV/pull/5).
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **svg:** Svg animation compatibility enhancement.
|
|
||||||
|
|
||||||
# 2.3.5-alpha (2019-08-22)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **activeRingChart:** Color configuration does not take effect [(#3)](https://github.com/jiaming743/DataV/pull/3).
|
|
||||||
|
|
||||||
# 2.3.4-alpha (2019-08-15)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **package.json:** Import exception caused by incorrect entry path configuration.
|
|
||||||
|
|
||||||
# 2.3.3-alpha (2019-07-22)
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
- **waterPondLevel:** Potential namespace conflict.
|
|
||||||
- **digitalFlop:** Potential namespace conflict.
|
|
||||||
|
|
||||||
# 2.3.2-alpha (2019-07-05)
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **decoration:** Explicitly set the SVG width and height to enhance stability.
|
|
||||||
- **Introduced on demand**
|
|
||||||
|
|
||||||
```js
|
|
||||||
import { borderBox1 } from '@jiaminghi/data-view'
|
|
||||||
|
|
||||||
Vue.use(borderBox1)
|
|
||||||
```
|
|
||||||
|
|
||||||
# 2.3.1-alpha (2019-07-04)
|
|
||||||
|
|
||||||
### Perfect
|
|
||||||
|
|
||||||
- **charts:** Enhanced style compatibility.
|
|
||||||
- **scrollBoard:** Enhanced style compatibility.
|
|
||||||
- **fullScreenContainer:** Fix potential rendering exceptions.
|
|
||||||
- **mixin:** Strengthen `autoResize` stability.
|
|
||||||
|
|
||||||
# 2.3.0-alpha (2019-07-04)
|
|
||||||
|
|
||||||
### Directory Structure Change
|
|
||||||
|
|
||||||
* **before**
|
|
||||||
|
|
||||||
```
|
|
||||||
.
|
|
||||||
├── components
|
|
||||||
│ ├── borderBox1
|
|
||||||
│ │ └── index.vue
|
|
||||||
│ ├── borderBox2
|
|
||||||
│ │ └── index.vue
|
|
||||||
│ ├── etc.
|
|
||||||
│ └── index.js
|
|
||||||
├── mixins
|
|
||||||
│ └── autoResize.js
|
|
||||||
├── util
|
|
||||||
│ └── index.js
|
|
||||||
│
|
|
||||||
├── index.js
|
|
||||||
│
|
|
||||||
├── package.json // main: 'index.js'
|
|
||||||
└── etc.
|
|
||||||
```
|
|
||||||
|
|
||||||
* **after**
|
|
||||||
|
|
||||||
```
|
|
||||||
.
|
|
||||||
├── lib // After compilation
|
|
||||||
│ ├── components
|
|
||||||
│ │ ├── borderBox1
|
|
||||||
│ │ | ├── src
|
|
||||||
│ │ | | ├── main.vue
|
|
||||||
│ │ | | └── main.css
|
|
||||||
│ │ | └── index.js
|
|
||||||
│ │ ├── etc.
|
|
||||||
│ │ └── index.js
|
|
||||||
│ ├── mixin
|
|
||||||
│ │ └── autoResize.js
|
|
||||||
│ ├── util
|
|
||||||
│ │ └── index.js
|
|
||||||
│ └── index.js
|
|
||||||
│
|
|
||||||
├── publish // For pre-publish process
|
|
||||||
│
|
|
||||||
├── src // For development environments
|
|
||||||
│ ├── components
|
|
||||||
│ │ ├── borderBox1
|
|
||||||
│ │ | ├── src
|
|
||||||
│ │ | | └── main.vue
|
|
||||||
│ │ | └── index.js
|
|
||||||
│ │ ├── etc.
|
|
||||||
│ │ └── index.js
|
|
||||||
│ ├── mixin
|
|
||||||
│ │ └── autoResize.js
|
|
||||||
│ ├── util
|
|
||||||
│ │ └── index.js
|
|
||||||
│ └── index.js
|
|
||||||
│
|
|
||||||
├── package.json // main: '/lib/index.js'
|
|
||||||
├── publish.js
|
|
||||||
└── etc.
|
|
||||||
```
|
|
||||||
|
|
||||||
- **Introduced on demand**
|
|
||||||
|
|
||||||
```js
|
|
||||||
import borderBox1 from '@jiaminghi/data-view/lib/components/borderBox1'
|
|
||||||
|
|
||||||
Vue.use(borderBox1)
|
|
||||||
```
|
|
||||||
|
|
||||||
# 2.2.0-alpha (2019-06-29)
|
# 2.2.0-alpha (2019-06-29)
|
||||||
|
|
||||||
### New
|
### New
|
||||||
|
|
|
||||||
2
LICENSE
2
LICENSE
|
|
@ -1,6 +1,6 @@
|
||||||
The MIT License (MIT)
|
The MIT License (MIT)
|
||||||
|
|
||||||
Copyright (c) 2019-present, DataV-Team
|
Copyright (c) 2019-present, JiaMing
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
|
|
||||||
BIN
QQGroup.png
BIN
QQGroup.png
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
70
README.md
70
README.md
|
|
@ -1,76 +1,20 @@
|
||||||
[ENGLISH](./README_EN.md)
|
<h1 align="center">DataV</h1>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<img src="./icon.png">
|
<a href="https://github.com/jiaming743/datav/blob/master/LICENSE">
|
||||||
</p>
|
<img src="https://img.shields.io/github/license/jiaming743/datav.svg" alt="LICENSE" />
|
||||||
<h1 align="center">DataV</h1>
|
|
||||||
<p align="center">
|
|
||||||
<a href="https://github.com/DataV-Team/datav/blob/master/LICENSE">
|
|
||||||
<img src="https://img.shields.io/github/license/DataV-Team/datav.svg" alt="LICENSE" />
|
|
||||||
</a>
|
</a>
|
||||||
<a href="https://www.npmjs.com/package/@jiaminghi/data-view">
|
<a href="https://www.npmjs.com/package/@jiaminghi/datav">
|
||||||
<img src="https://img.shields.io/npm/v/@jiaminghi/data-view.svg" alt="LICENSE" />
|
<img src="https://img.shields.io/npm/v/@jiaminghi/data-view.svg" alt="LICENSE" />
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
## DataV是干什么的?
|
<h2 align="center">Vue large screen data display component library</h2>
|
||||||
|
|
||||||
* DataV是一个基于**Vue**的数据可视化组件库（当然也有[React版本](https://github.com/DataV-Team/DataV-React)）
|
### Install with npm
|
||||||
* 提供用于提升页面视觉效果的**SVG**边框和装饰
|
|
||||||
* 提供常用的**图表**如折线图等
|
|
||||||
* 飞线图/轮播表等其他组件
|
|
||||||
|
|
||||||
### npm安装
|
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
$ npm install @jiaminghi/data-view
|
$ npm install @jiaminghi/data-view
|
||||||
```
|
```
|
||||||
|
|
||||||
### 使用
|
Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue'
|
|
||||||
import DataV from '@jiaminghi/data-view'
|
|
||||||
|
|
||||||
Vue.use(DataV)
|
|
||||||
|
|
||||||
// 按需引入
|
|
||||||
import { borderBox1 } from '@jiaminghi/data-view'
|
|
||||||
Vue.use(borderBox1)
|
|
||||||
```
|
|
||||||
|
|
||||||
详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).
|
|
||||||
|
|
||||||
### UMD版
|
|
||||||
|
|
||||||
`UMD`版可直接使用`script`标签引入，`UMD`版文件位于项目`dist`目录下，引入后将自动把所有组件注册为**Vue全局组件**，引入`DataV`前请确保已引入`Vue`。
|
|
||||||
|
|
||||||
[UMD版使用示例](./umdExample.html)
|
|
||||||
|
|
||||||
### TODO
|
|
||||||
|
|
||||||
* **地图组件**
|
|
||||||
* **TS**重构组件库底层依赖
|
|
||||||
|
|
||||||
### 致谢
|
|
||||||
|
|
||||||
组件库的开发基于个人学习和兴趣，由于技术水平及经验的限制，组件尚有许多不完善之处，如有BUG可及时提交[issue](https://github.com/DataV-Team/DataV/issues/new?template=bug_report.md)或添加反馈群进行反馈，也欢迎提供指正和建议，感谢各位的支持。
|
|
||||||
|
|
||||||
### 反馈
|
|
||||||
|
|
||||||
|
|
||||||
### Demo
|
|
||||||
|
|
||||||
Demo页面使用了全屏组件，请F11全屏后查看。
|
|
||||||
|
|
||||||
* [施工养护综合数据](http://datav.jiaminghi.com/demo/construction-data/index.html)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
* [机电运维管理台](http://datav.jiaminghi.com/demo/manage-desk/index.html)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
* [机电设备电子档案](http://datav.jiaminghi.com/demo/electronic-file/index.html)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
87
README_EN.md
87
README_EN.md
|
|
@ -1,87 +0,0 @@
|
||||||
[中文](./README.md)
|
|
||||||
|
|
||||||
<p align="center">
|
|
||||||
<img src="./icon.png">
|
|
||||||
</p>
|
|
||||||
<h1 align="center">DataV</h1>
|
|
||||||
<p align="center">
|
|
||||||
<a href="https://github.com/DataV-Team/datav/blob/master/LICENSE">
|
|
||||||
<img src="https://img.shields.io/github/license/DataV-Team/datav.svg" alt="LICENSE" />
|
|
||||||
</a>
|
|
||||||
<a href="https://www.npmjs.com/package/@jiaminghi/data-view">
|
|
||||||
<img src="https://img.shields.io/npm/v/@jiaminghi/data-view.svg" alt="LICENSE" />
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
## What is DataV?
|
|
||||||
|
|
||||||
* DataV is a data **visualization** components library based on **Vue**（Of course there are also [React versions](https://github.com/DataV-Team/DataV-React)）.
|
|
||||||
* Provide cool **SVG** borders and decorations.
|
|
||||||
* Provide common **charts** such as line chart, etc..
|
|
||||||
* flying line chart, carousel table and etc.
|
|
||||||
|
|
||||||
### Install with npm
|
|
||||||
|
|
||||||
```shell
|
|
||||||
$ npm install @jiaminghi/data-view
|
|
||||||
```
|
|
||||||
|
|
||||||
### use
|
|
||||||
|
|
||||||
```js
|
|
||||||
import Vue from 'vue'
|
|
||||||
import DataV from '@jiaminghi/data-view'
|
|
||||||
|
|
||||||
Vue.use(DataV)
|
|
||||||
|
|
||||||
// Introduced on demand
|
|
||||||
import { borderBox1 } from '@jiaminghi/data-view'
|
|
||||||
Vue.use(borderBox1)
|
|
||||||
```
|
|
||||||
|
|
||||||
Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).
|
|
||||||
|
|
||||||
### UMD version
|
|
||||||
|
|
||||||
The `UMD` version can be directly imported using the `script` tag. The `UMD` version file is located in the project `dist` directory. After import, all components will be automatically registered as **Vue global components**. Be sure to introduce `Vue` before introducing `DataV`.
|
|
||||||
|
|
||||||
[UMD version usage example](./umdExample.html)
|
|
||||||
|
|
||||||
### React version
|
|
||||||
|
|
||||||
The reaction version is already under development, so stay tuned
|
|
||||||
|
|
||||||
### Questionnaire
|
|
||||||
|
|
||||||
React version of the component library and feedback[Questionnaire](https://www.wjx.cn/jq/45326197.aspx)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### TODO
|
|
||||||
|
|
||||||
* **Map Component**
|
|
||||||
* Refactor underlying dependencies using **TS**.
|
|
||||||
|
|
||||||
### Acknowledgement
|
|
||||||
|
|
||||||
The development of the component library is based on personal learning and interest. Due to technical level and experience limitations, there are still many imperfections in the components. If there are errors, you can submit [issue](https://github.com/DataV-team/DataV/issues/new?template=bug_report.md) in time or add feedback groups for feedback. Welcome to provide corrections and suggestions. Thank you for your support.
|
|
||||||
|
|
||||||
### Feedback
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Demo
|
|
||||||
|
|
||||||
The Demo page uses the full-screen component, please view it after F11 full screen.
|
|
||||||
|
|
||||||
* [Construction Data](http://datav.jiaminghi.com/demo/construction-data/index.html)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
* [Manage-Desk](http://datav.jiaminghi.com/demo/manage-desk/index.html)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
* [Electronic-File](http://datav.jiaminghi.com/demo/electronic-file/index.html)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
import Vue from 'vue'
|
|
||||||
import datav from '../src/index'
|
|
||||||
|
|
||||||
Vue.use(datav)
|
|
||||||
211
build/index.js
211
build/index.js
|
|
@ -1,211 +0,0 @@
|
||||||
const { copyDir, fileForEach, readFile, writeFile, unlinkDirFileByExtname, dirForEach } = require('@jiaminghi/fs')
|
|
||||||
const print = require('./plugin/print')
|
|
||||||
const path = require('path')
|
|
||||||
const exec = require('./plugin/exec')
|
|
||||||
|
|
||||||
const PACKAGE_SRC = './src'
|
|
||||||
const COMPILE_SRC = './lib'
|
|
||||||
const COMPONENTS_DIR = '/components'
|
|
||||||
const ENTRANCE = '/index.js'
|
|
||||||
const libName = 'datav'
|
|
||||||
|
|
||||||
async function start () {
|
|
||||||
// Compile for NPM
|
|
||||||
|
|
||||||
const copyPackage = await copyDir(PACKAGE_SRC, COMPILE_SRC)
|
|
||||||
|
|
||||||
if (!copyPackage) {
|
|
||||||
print.error('Exception in file copy!')
|
|
||||||
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
print.success('Complete file copy!')
|
|
||||||
|
|
||||||
const abstract = await abstractLessFromVue()
|
|
||||||
|
|
||||||
if (!abstract) {
|
|
||||||
print.error('Exception in less file extraction!')
|
|
||||||
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
print.success('Complete less file extraction!')
|
|
||||||
|
|
||||||
await compileLessToCss()
|
|
||||||
|
|
||||||
print.success('Complete less compilation to css!')
|
|
||||||
|
|
||||||
const unlink = await unlinkDirFileByExtname(COMPILE_SRC, ['.less'])
|
|
||||||
|
|
||||||
if (!unlink) {
|
|
||||||
print.error('Exception in less file deletion!')
|
|
||||||
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
print.success('Complete less file deletion!')
|
|
||||||
|
|
||||||
const addImport = await addCssImport()
|
|
||||||
|
|
||||||
if (!addImport) {
|
|
||||||
print.error('Exception in adding css import statement!')
|
|
||||||
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
print.success('Finish adding css import statement!')
|
|
||||||
|
|
||||||
const componentsExport = await addComponentsExport()
|
|
||||||
|
|
||||||
if (!componentsExport) {
|
|
||||||
print.error('Exception in adding components export statement!')
|
|
||||||
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
print.success('Finish adding components export statement!')
|
|
||||||
|
|
||||||
// Compile for UMD version
|
|
||||||
const rollupCompile = await exec(`rollup -c build/rollup.config.js`)
|
|
||||||
|
|
||||||
if (!rollupCompile) {
|
|
||||||
print.error('Exception in rollupCompile')
|
|
||||||
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
print.tip('After rollupCompile')
|
|
||||||
|
|
||||||
const terser = await exec(`rollup -c build/rollup.terser.config.js`)
|
|
||||||
|
|
||||||
if (!terser) {
|
|
||||||
print.error('Exception in terser')
|
|
||||||
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
print.tip('After terser')
|
|
||||||
|
|
||||||
print.yellow('-------------------------------------')
|
|
||||||
print.success(' DataV Lib Compile Success! ')
|
|
||||||
print.yellow('-------------------------------------')
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
async function abstractLessFromVue () {
|
|
||||||
let abstractSuccess = true
|
|
||||||
|
|
||||||
await fileForEach(COMPILE_SRC, async src => {
|
|
||||||
if (path.extname(src) !== '.vue') return
|
|
||||||
|
|
||||||
let template = await readFile(src)
|
|
||||||
|
|
||||||
let style = template.match(/<style[ \S\n\r]*/g)
|
|
||||||
if (style) style = style[0]
|
|
||||||
if (!style) return
|
|
||||||
|
|
||||||
style = style.replace(/<style[ a-z="']*>(\n|\r)?|<\/style>/g, '')
|
|
||||||
style = style.replace(/[\n\r]*$/, '')
|
|
||||||
|
|
||||||
const styleSrc = src.replace('.vue', '.less')
|
|
||||||
let write = await writeFile(styleSrc, style)
|
|
||||||
|
|
||||||
if (!write) {
|
|
||||||
print.error(styleSrc + ' write error!')
|
|
||||||
|
|
||||||
abstractSuccess = false
|
|
||||||
}
|
|
||||||
|
|
||||||
template = template.replace(/<style[ \S\n\r]*/g, '')
|
|
||||||
template = template.replace(/[\n\r]*$/, '')
|
|
||||||
write = await writeFile(src, template)
|
|
||||||
|
|
||||||
if (!write) {
|
|
||||||
print.error(src + ' rewrite error!')
|
|
||||||
|
|
||||||
abstractSuccess = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return abstractSuccess
|
|
||||||
}
|
|
||||||
|
|
||||||
async function compileLessToCss () {
|
|
||||||
let compileSuccess = true
|
|
||||||
|
|
||||||
await fileForEach(COMPILE_SRC, async src => {
|
|
||||||
if (path.extname(src) !== '.less') return
|
|
||||||
|
|
||||||
src = src.replace('./', '')
|
|
||||||
|
|
||||||
const execString = `lessc ${src} ${src.replace('less', 'css')}`
|
|
||||||
|
|
||||||
print.yellow(execString, {
|
|
||||||
maxBuffer: 1024 ** 5
|
|
||||||
})
|
|
||||||
|
|
||||||
const compile = await exec(execString)
|
|
||||||
|
|
||||||
if (!compile) {
|
|
||||||
print.error(execString + ' Error!')
|
|
||||||
|
|
||||||
compileSuccess = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return compileSuccess
|
|
||||||
}
|
|
||||||
|
|
||||||
async function addCssImport () {
|
|
||||||
let importSuccess = true
|
|
||||||
|
|
||||||
await fileForEach(COMPILE_SRC + COMPONENTS_DIR, async src => {
|
|
||||||
if (path.extname(src) !== '.js') return
|
|
||||||
|
|
||||||
let content = await readFile(src)
|
|
||||||
|
|
||||||
if (content.search(/import[ \S]* from '[\S]*\.vue'/) === -1) return
|
|
||||||
|
|
||||||
content = `import './src/main.css'\n` + content
|
|
||||||
|
|
||||||
let write = await writeFile(src, content)
|
|
||||||
|
|
||||||
if (!write) {
|
|
||||||
print.error(src + ' write import error!')
|
|
||||||
|
|
||||||
importSuccess = false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return importSuccess
|
|
||||||
}
|
|
||||||
|
|
||||||
async function addComponentsExport () {
|
|
||||||
const components = []
|
|
||||||
|
|
||||||
await dirForEach(COMPILE_SRC + COMPONENTS_DIR, src => {
|
|
||||||
components.push(src.split('/').slice(-1)[0])
|
|
||||||
})
|
|
||||||
|
|
||||||
const importString = components.reduce((all, current) => {
|
|
||||||
return all + '\n' + `export { default as ${current} } from '.${COMPONENTS_DIR}/${current}/index'`
|
|
||||||
}, '/**\n * EXPORT COMPONENTS\n */') + '\n'
|
|
||||||
|
|
||||||
const targetSrc = COMPILE_SRC + ENTRANCE
|
|
||||||
|
|
||||||
let content = await readFile(targetSrc)
|
|
||||||
|
|
||||||
content = importString + content
|
|
||||||
|
|
||||||
let write = await writeFile(targetSrc, content)
|
|
||||||
|
|
||||||
return write
|
|
||||||
}
|
|
||||||
|
|
||||||
async function compileUMDVersion () {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
start()
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
const { exec } = require('child_process')
|
|
||||||
|
|
||||||
function doExec (execString, maxBuffer = 1024 ** 5) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
exec(execString, {
|
|
||||||
maxBuffer
|
|
||||||
}, err => {
|
|
||||||
if (err) {
|
|
||||||
console.error(err)
|
|
||||||
|
|
||||||
resolve(false)
|
|
||||||
} else {
|
|
||||||
resolve(true)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = doExec
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
const print = {
|
|
||||||
log (info) {
|
|
||||||
console.log(info)
|
|
||||||
},
|
|
||||||
warn (info) {
|
|
||||||
console.log('\033[31;33m' + info + '\033[0m')
|
|
||||||
},
|
|
||||||
error (info) {
|
|
||||||
console.log('\033[31;40m' + info + '\033[0m')
|
|
||||||
},
|
|
||||||
tip (info) {
|
|
||||||
console.log('\033[40;32m' + info + '\033[0m')
|
|
||||||
},
|
|
||||||
success (info) {
|
|
||||||
console.log('\033[42;30m' + info + '\033[0m')
|
|
||||||
},
|
|
||||||
yellow (info) {
|
|
||||||
console.log('\033[31;33m' + info + '\033[0m')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = print
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
import resolve from 'rollup-plugin-node-resolve'
|
|
||||||
import vue from 'rollup-plugin-vue'
|
|
||||||
import commonjs from 'rollup-plugin-commonjs'
|
|
||||||
import babel from 'rollup-plugin-babel'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
input: 'build/entry.js',
|
|
||||||
output: {
|
|
||||||
format: 'umd',
|
|
||||||
file: 'dist/datav.map.vue.js',
|
|
||||||
name: 'datav'
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
resolve(),
|
|
||||||
babel({
|
|
||||||
exclude: 'node_modules/**'
|
|
||||||
}),
|
|
||||||
commonjs(),
|
|
||||||
vue(),
|
|
||||||
],
|
|
||||||
external: ['Vue']
|
|
||||||
}
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
import resolve from 'rollup-plugin-node-resolve'
|
|
||||||
import vue from 'rollup-plugin-vue'
|
|
||||||
import commonjs from 'rollup-plugin-commonjs'
|
|
||||||
import babel from 'rollup-plugin-babel'
|
|
||||||
import { terser } from "rollup-plugin-terser"
|
|
||||||
|
|
||||||
export default {
|
|
||||||
input: 'build/entry.js',
|
|
||||||
output: {
|
|
||||||
format: 'umd',
|
|
||||||
file: 'dist/datav.min.vue.js',
|
|
||||||
name: 'datav'
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
resolve(),
|
|
||||||
babel({
|
|
||||||
exclude: 'node_modules/**'
|
|
||||||
}),
|
|
||||||
commonjs(),
|
|
||||||
vue(),
|
|
||||||
terser(),
|
|
||||||
],
|
|
||||||
external: ['Vue']
|
|
||||||
}
|
|
||||||
|
|
@ -11,14 +11,14 @@
|
||||||
<script>
|
<script>
|
||||||
import Charts from '@jiaminghi/charts'
|
import Charts from '@jiaminghi/charts'
|
||||||
|
|
||||||
import dvDigitalFlop from '../../digitalFlop/src/main.vue'
|
import dvDigitalFlop from '../digitalFlop'
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvActiveRingChart',
|
name: 'ActiveRingChart',
|
||||||
components: {
|
components: {
|
||||||
dvDigitalFlop
|
dvDigitalFlop
|
||||||
},
|
},
|
||||||
|
|
@ -28,7 +28,7 @@ export default {
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data () {
|
||||||
return {
|
return {
|
||||||
defaultConfig: {
|
defaultConfig: {
|
||||||
/**
|
/**
|
||||||
|
|
@ -47,7 +47,7 @@ export default {
|
||||||
activeRadius: '55%',
|
activeRadius: '55%',
|
||||||
/**
|
/**
|
||||||
* @description Ring data
|
* @description Ring data
|
||||||
* @type {Array<Object>}
|
* @type {Array}
|
||||||
* @default data = [{ name: '', value: 0 }]
|
* @default data = [{ name: '', value: 0 }]
|
||||||
*/
|
*/
|
||||||
data: [{ name: '', value: 0 }],
|
data: [{ name: '', value: 0 }],
|
||||||
|
|
@ -64,10 +64,9 @@ export default {
|
||||||
*/
|
*/
|
||||||
activeTimeGap: 3000,
|
activeTimeGap: 3000,
|
||||||
/**
|
/**
|
||||||
* @description Ring color (hex|rgb|rgba|color keywords)
|
* @description Ring color (hex|rgb|rgba)
|
||||||
* @type {Array<String>}
|
* @type {Array<String>}
|
||||||
* @default color = [Charts Default Color]
|
* @default color = [Charts Default Color]
|
||||||
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
|
|
||||||
*/
|
*/
|
||||||
color: [],
|
color: [],
|
||||||
/**
|
/**
|
||||||
|
|
@ -78,16 +77,6 @@ export default {
|
||||||
fontSize: 25,
|
fontSize: 25,
|
||||||
fill: '#fff'
|
fill: '#fff'
|
||||||
},
|
},
|
||||||
/**
|
|
||||||
* @description Digital flop toFixed
|
|
||||||
* @type {Number}
|
|
||||||
*/
|
|
||||||
digitalFlopToFixed: 0,
|
|
||||||
/**
|
|
||||||
* @description Digital flop unit
|
|
||||||
* @type {String}
|
|
||||||
*/
|
|
||||||
digitalFlopUnit: '',
|
|
||||||
/**
|
/**
|
||||||
* @description CRender animationCurve
|
* @description CRender animationCurve
|
||||||
* @type {String}
|
* @type {String}
|
||||||
|
|
@ -99,13 +88,7 @@ export default {
|
||||||
* @type {String}
|
* @type {String}
|
||||||
* @default animationFrame = 50
|
* @default animationFrame = 50
|
||||||
*/
|
*/
|
||||||
animationFrame: 50,
|
animationFrame: 50
|
||||||
/**
|
|
||||||
* @description showOriginValue
|
|
||||||
* @type {Boolean}
|
|
||||||
* @default showOriginValue = false
|
|
||||||
*/
|
|
||||||
showOriginValue: false
|
|
||||||
},
|
},
|
||||||
|
|
||||||
mergedConfig: null,
|
mergedConfig: null,
|
||||||
|
|
@ -118,48 +101,33 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
digitalFlop() {
|
digitalFlop () {
|
||||||
const { mergedConfig, activeIndex } = this
|
const { mergedConfig, activeIndex } = this
|
||||||
|
|
||||||
if (!mergedConfig) return {}
|
if (!mergedConfig) return {}
|
||||||
|
|
||||||
const {
|
const { digitalFlopStyle, data } = mergedConfig
|
||||||
digitalFlopStyle,
|
|
||||||
digitalFlopToFixed,
|
|
||||||
data,
|
|
||||||
showOriginValue,
|
|
||||||
digitalFlopUnit
|
|
||||||
} = mergedConfig
|
|
||||||
|
|
||||||
const value = data.map(({ value }) => value)
|
const value = data.map(({ value }) => value)
|
||||||
|
|
||||||
let displayValue
|
const sum = value.reduce((all, v) => all + v, 0)
|
||||||
|
|
||||||
if (showOriginValue) {
|
const percent = parseInt(value[activeIndex] / sum * 100)
|
||||||
displayValue = value[activeIndex]
|
|
||||||
} else {
|
|
||||||
const sum = value.reduce((all, v) => all + v, 0)
|
|
||||||
|
|
||||||
const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
|
|
||||||
|
|
||||||
displayValue = percent
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
content: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
|
content: '{nt}%',
|
||||||
number: [displayValue],
|
number: [percent],
|
||||||
style: digitalFlopStyle,
|
style: digitalFlopStyle
|
||||||
toFixed: digitalFlopToFixed
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
ringName() {
|
ringName () {
|
||||||
const { mergedConfig, activeIndex } = this
|
const { mergedConfig, activeIndex } = this
|
||||||
|
|
||||||
if (!mergedConfig) return ''
|
if (!mergedConfig) return ''
|
||||||
|
|
||||||
return mergedConfig.data[activeIndex].name
|
return mergedConfig.data[activeIndex].name
|
||||||
},
|
},
|
||||||
fontSize() {
|
fontSize () {
|
||||||
const { mergedConfig } = this
|
const { mergedConfig } = this
|
||||||
|
|
||||||
if (!mergedConfig) return ''
|
if (!mergedConfig) return ''
|
||||||
|
|
@ -168,7 +136,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
config() {
|
config () {
|
||||||
const { animationHandler, mergeConfig, setRingOption } = this
|
const { animationHandler, mergeConfig, setRingOption } = this
|
||||||
|
|
||||||
clearTimeout(animationHandler)
|
clearTimeout(animationHandler)
|
||||||
|
|
@ -181,7 +149,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
init () {
|
||||||
const { initChart, mergeConfig, setRingOption } = this
|
const { initChart, mergeConfig, setRingOption } = this
|
||||||
|
|
||||||
initChart()
|
initChart()
|
||||||
|
|
@ -190,29 +158,26 @@ export default {
|
||||||
|
|
||||||
setRingOption()
|
setRingOption()
|
||||||
},
|
},
|
||||||
initChart() {
|
initChart () {
|
||||||
const { $refs } = this
|
const { $refs } = this
|
||||||
|
|
||||||
this.chart = new Charts($refs['active-ring-chart'])
|
this.chart = new Charts($refs['active-ring-chart'])
|
||||||
},
|
},
|
||||||
mergeConfig() {
|
mergeConfig () {
|
||||||
const { defaultConfig, config } = this
|
const { defaultConfig, config } = this
|
||||||
|
|
||||||
this.mergedConfig = deepMerge(
|
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||||
deepClone(defaultConfig, true),
|
|
||||||
config || {}
|
|
||||||
)
|
|
||||||
},
|
},
|
||||||
setRingOption() {
|
setRingOption () {
|
||||||
const { getRingOption, chart, ringAnimation } = this
|
const { getRingOption, chart, ringAnimation } = this
|
||||||
|
|
||||||
const option = getRingOption()
|
const option = getRingOption()
|
||||||
|
|
||||||
chart.setOption(option, true)
|
chart.setOption(option)
|
||||||
|
|
||||||
ringAnimation()
|
ringAnimation()
|
||||||
},
|
},
|
||||||
getRingOption() {
|
getRingOption () {
|
||||||
const { mergedConfig, getRealRadius } = this
|
const { mergedConfig, getRealRadius } = this
|
||||||
|
|
||||||
const radius = getRealRadius()
|
const radius = getRealRadius()
|
||||||
|
|
@ -230,11 +195,10 @@ export default {
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
]
|
||||||
color: mergedConfig.color
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getRealRadius(active = false) {
|
getRealRadius (active = false) {
|
||||||
const { mergedConfig, chart } = this
|
const { mergedConfig, chart } = this
|
||||||
|
|
||||||
const { radius, activeRadius, lineWidth } = mergedConfig
|
const { radius, activeRadius, lineWidth } = mergedConfig
|
||||||
|
|
@ -245,15 +209,14 @@ export default {
|
||||||
|
|
||||||
let realRadius = active ? activeRadius : radius
|
let realRadius = active ? activeRadius : radius
|
||||||
|
|
||||||
if (typeof realRadius !== 'number')
|
if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius
|
||||||
realRadius = (parseInt(realRadius) / 100) * maxRadius
|
|
||||||
|
|
||||||
const insideRadius = realRadius - halfLineWidth
|
const insideRadius = realRadius - halfLineWidth
|
||||||
const outSideRadius = realRadius + halfLineWidth
|
const outSideRadius = realRadius + halfLineWidth
|
||||||
|
|
||||||
return [insideRadius, outSideRadius]
|
return [insideRadius, outSideRadius]
|
||||||
},
|
},
|
||||||
ringAnimation() {
|
ringAnimation () {
|
||||||
let { activeIndex, getRingOption, chart, getRealRadius } = this
|
let { activeIndex, getRingOption, chart, getRealRadius } = this
|
||||||
|
|
||||||
const radius = getRealRadius()
|
const radius = getRealRadius()
|
||||||
|
|
@ -271,7 +234,7 @@ export default {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
chart.setOption(option, true)
|
chart.setOption(option)
|
||||||
|
|
||||||
const { activeTimeGap } = option.series[0]
|
const { activeTimeGap } = option.series[0]
|
||||||
|
|
||||||
|
|
@ -286,12 +249,12 @@ export default {
|
||||||
}, activeTimeGap)
|
}, activeTimeGap)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted () {
|
||||||
const { init } = this
|
const { init } = this
|
||||||
|
|
||||||
init()
|
init()
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy () {
|
||||||
const { animationHandler } = this
|
const { animationHandler } = this
|
||||||
|
|
||||||
clearTimeout(animationHandler)
|
clearTimeout(animationHandler)
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
<template>
|
||||||
|
<div class="dv-border-box-1" :ref="ref">
|
||||||
|
<svg
|
||||||
|
width="150px"
|
||||||
|
height="150px"
|
||||||
|
:key="item"
|
||||||
|
v-for="item in border"
|
||||||
|
:class="`${item} border`"
|
||||||
|
>
|
||||||
|
<polygon
|
||||||
|
fill="#4fd2dd"
|
||||||
|
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="fill"
|
||||||
|
values="#4fd2dd;#235fa7;#4fd2dd"
|
||||||
|
dur=".5s"
|
||||||
|
begin="0s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</polygon>
|
||||||
|
<polygon
|
||||||
|
fill="#235fa7"
|
||||||
|
points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="fill"
|
||||||
|
values="#235fa7;#4fd2dd;#235fa7"
|
||||||
|
dur=".5s"
|
||||||
|
begin="0s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</polygon>
|
||||||
|
<polygon
|
||||||
|
fill="#4fd2dd"
|
||||||
|
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="fill"
|
||||||
|
values="#4fd2dd;#235fa7;#transparent"
|
||||||
|
dur="1s"
|
||||||
|
begin="0s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</polygon>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="border-box-content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'BorderBox1',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
ref: 'border-box-1',
|
||||||
|
|
||||||
|
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.dv-border-box-1 {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.border {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-top {
|
||||||
|
right: 0px;
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-bottom {
|
||||||
|
bottom: 0px;
|
||||||
|
transform: rotateX(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-bottom {
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
transform: rotateX(180deg) rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-box-content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<template>
|
||||||
|
<div class="dv-border-box-2" :ref="ref">
|
||||||
|
<svg class="dv-border-svg-container">
|
||||||
|
<polyline class="dv-bb2-line1"
|
||||||
|
:points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`" />
|
||||||
|
<polyline class="dv-bb2-line2"
|
||||||
|
:points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`" />
|
||||||
|
<circle cx="11" cy="11" r="1" />
|
||||||
|
<circle :cx="width - 11" cy="11" r="1" />
|
||||||
|
<circle :cx="width - 11" :cy="height - 11" r="1" />
|
||||||
|
<circle cx="11" :cy="height - 11" r="1" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="border-box-content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BorderBox2',
|
||||||
|
mixins: [autoResize],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
ref: 'border-box-2'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.dv-border-box-2 {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.dv-border-svg-container {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
|
||||||
|
polyline {
|
||||||
|
fill: none;
|
||||||
|
stroke-width: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
circle {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb2-line1 {
|
||||||
|
stroke: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb2-line2 {
|
||||||
|
stroke: fade(#fff, 60);
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-box-content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<div class="dv-border-box-3" :ref="ref">
|
||||||
|
<svg class="dv-border-svg-container">
|
||||||
|
<polyline class="dv-bb3-line1"
|
||||||
|
:points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`" />
|
||||||
|
<polyline class="dv-bb3-line2"
|
||||||
|
:points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`" />
|
||||||
|
<polyline class="dv-bb3-line2"
|
||||||
|
:points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`" />
|
||||||
|
<polyline class="dv-bb3-line2"
|
||||||
|
:points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="border-box-content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BorderBox3',
|
||||||
|
mixins: [autoResize],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
ref: 'border-box-3'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.dv-border-box-3 {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.dv-border-svg-container {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
|
||||||
|
polyline {
|
||||||
|
fill: none;
|
||||||
|
stroke: #2862b7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb3-line1 {
|
||||||
|
stroke-width: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb3-line2 {
|
||||||
|
stroke-width: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-box-content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,141 @@
|
||||||
|
<template>
|
||||||
|
<div class="dv-border-box-4" :ref="ref">
|
||||||
|
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`">
|
||||||
|
<polyline class="dv-bb4-line-1" :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
|
||||||
|
10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"/>
|
||||||
|
<polyline class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
|
||||||
|
14, ${height - 100}`" />
|
||||||
|
<polyline class="dv-bb4-line-3" :points="`7, ${height - 40} 7, ${height - 75}`" />
|
||||||
|
<polyline class="dv-bb4-line-4" :points="`28, 24 13, 41 13, 64`" />
|
||||||
|
<polyline class="dv-bb4-line-5" :points="`5, 45 5, 140`" />
|
||||||
|
<polyline class="dv-bb4-line-6" :points="`14, 75 14, 180`" />
|
||||||
|
<polyline class="dv-bb4-line-7" :points="`55, 11 147, 11 167, 26 250, 26`" />
|
||||||
|
<polyline class="dv-bb4-line-8" :points="`158, 5 173, 16`" />
|
||||||
|
<polyline class="dv-bb4-line-9" :points="`200, 17 ${width - 10}, 17`" />
|
||||||
|
<polyline class="dv-bb4-line-10" :points="`385, 17 ${width - 10}, 17`" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="border-box-content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BorderBox4',
|
||||||
|
mixins: [autoResize],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
ref: 'border-box-4'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
reverse: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.dv-border-box-4 {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.dv-reverse {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-border-svg-container {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
|
||||||
|
polyline {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sred {
|
||||||
|
stroke: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sblue {
|
||||||
|
stroke: fade(blue, 80);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw1 {
|
||||||
|
stroke-width: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sw3 {
|
||||||
|
stroke-width: 3px;
|
||||||
|
stroke-linecap: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb4-line-1 {
|
||||||
|
.sred;
|
||||||
|
.sw1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb4-line-2 {
|
||||||
|
.sblue;
|
||||||
|
.sw1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb4-line-3 {
|
||||||
|
.sred;
|
||||||
|
.sw3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb4-line-4 {
|
||||||
|
.sred;
|
||||||
|
.sw3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb4-line-5 {
|
||||||
|
.sred;
|
||||||
|
.sw1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb4-line-6 {
|
||||||
|
.sblue;
|
||||||
|
.sw1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb4-line-7 {
|
||||||
|
.sblue;
|
||||||
|
.sw1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb4-line-8 {
|
||||||
|
.sblue;
|
||||||
|
.sw3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb4-line-9 {
|
||||||
|
.sred;
|
||||||
|
.sw3;
|
||||||
|
stroke-dasharray: 100 250;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb4-line-10 {
|
||||||
|
.sblue;
|
||||||
|
.sw1;
|
||||||
|
stroke-dasharray: 80 270;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-box-content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
<template>
|
||||||
|
<div class="dv-border-box-5" :ref="ref">
|
||||||
|
<svg :class="`dv-svg-container ${reverse && 'dv-reverse'}`">
|
||||||
|
<polyline class="dv-bb5-line-1" :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
|
||||||
|
${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`" />
|
||||||
|
<polyline class="dv-bb5-line-2" :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
|
||||||
|
${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`" />
|
||||||
|
<polyline class="dv-bb5-line-3" :points="`50, 13 ${width - 35}, 13`" />
|
||||||
|
<polyline class="dv-bb5-line-4" :points="`15, 20 ${width - 35}, 20`" />
|
||||||
|
<polyline class="dv-bb5-line-5" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
|
||||||
|
<polyline class="dv-bb5-line-6" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="border-box-content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BorderBox5',
|
||||||
|
mixins: [autoResize],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
ref: 'border-box-5'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
reverse: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.dv-border-box-5 {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.dv-reverse {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-svg-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
polyline {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb5-line-1 {
|
||||||
|
stroke-width: 1;
|
||||||
|
stroke: fade(#fff, 35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb5-line-2 {
|
||||||
|
stroke: fade(#fff, 20);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb5-line-3, .dv-bb5-line-6 {
|
||||||
|
stroke-width: 5;
|
||||||
|
stroke: fade(#fff, 15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb5-line-4, .dv-bb5-line-5 {
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke: fade(#fff, 15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-box-content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
<template>
|
||||||
|
<div class="dv-border-box-6" :ref="ref">
|
||||||
|
<svg class="dv-svg-container">
|
||||||
|
<circle cx="5" cy="5" r="2"/>
|
||||||
|
<circle :cx="width - 5" cy="5" r="2" />
|
||||||
|
<circle :cx="width - 5" :cy="height - 5" r="2" />
|
||||||
|
<circle cx="5" :cy="height - 5" r="2" />
|
||||||
|
<polyline :points="`10, 4 ${width - 10}, 4`" />
|
||||||
|
<polyline :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
|
||||||
|
<polyline :points="`5, 70 5, ${height - 70}`" />
|
||||||
|
<polyline :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
|
||||||
|
<polyline :points="`3, 10, 3, 50`" />
|
||||||
|
<polyline :points="`7, 30 7, 80`" />
|
||||||
|
<polyline :points="`${width - 3}, 10 ${width - 3}, 50`" />
|
||||||
|
<polyline :points="`${width - 7}, 30 ${width - 7}, 80`" />
|
||||||
|
<polyline :points="`3, ${height - 10} 3, ${height - 50}`" />
|
||||||
|
<polyline :points="`7, ${height - 30} 7, ${height - 80}`" />
|
||||||
|
<polyline :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
|
||||||
|
<polyline :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="border-box-content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BorderBox6',
|
||||||
|
mixins: [autoResize],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
ref: 'border-box-6'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.dv-border-box-6 {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.dv-svg-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
circle {
|
||||||
|
fill: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
polyline {
|
||||||
|
fill: none;
|
||||||
|
stroke-width: 1;
|
||||||
|
stroke: fade(#fff, 35);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-box-content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
<template>
|
||||||
|
<div class="dv-border-box-7" :ref="ref">
|
||||||
|
<svg class="dv-svg-container">
|
||||||
|
<polyline class="dv-bb7-line-width-2" :points="`0, 25 0, 0 25, 0`" />
|
||||||
|
<polyline class="dv-bb7-line-width-2" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
|
||||||
|
<polyline class="dv-bb7-line-width-2" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
|
||||||
|
<polyline class="dv-bb7-line-width-2" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
|
||||||
|
|
||||||
|
<polyline class="dv-bb7-line-width-5" :points="`0, 10 0, 0 10, 0`" />
|
||||||
|
<polyline class="dv-bb7-line-width-5" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
|
||||||
|
<polyline class="dv-bb7-line-width-5" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
|
||||||
|
<polyline class="dv-bb7-line-width-5" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="border-box-content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BorderBox7',
|
||||||
|
mixins: [autoResize],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
ref: 'border-box-7'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
@color: fade(gray, 30);
|
||||||
|
|
||||||
|
.dv-border-box-7 {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: inset 0 0 40px fade(@color, 30);
|
||||||
|
border: 1px solid @color;
|
||||||
|
|
||||||
|
.dv-svg-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
polyline {
|
||||||
|
fill: none;
|
||||||
|
stroke-linecap: round;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb7-line-width-2 {
|
||||||
|
stroke: @color;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dv-bb7-line-width-5 {
|
||||||
|
stroke: fade(gray, 50);
|
||||||
|
stroke-width: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-box-content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
<template>
|
||||||
|
<div class="dv-border-box-8" :ref="ref">
|
||||||
|
<svg class="dv-svg-container">
|
||||||
|
<defs>
|
||||||
|
<path
|
||||||
|
:id="path"
|
||||||
|
:d="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
|
||||||
|
fill="transparent"
|
||||||
|
/>
|
||||||
|
<radialGradient
|
||||||
|
:id="gradient"
|
||||||
|
cx="50%" cy="50%" r="50%"
|
||||||
|
>
|
||||||
|
<stop
|
||||||
|
offset="0%" stop-color="#fff"
|
||||||
|
stop-opacity="1"
|
||||||
|
/>
|
||||||
|
<stop
|
||||||
|
offset="100%" stop-color="#fff"
|
||||||
|
stop-opacity="0"
|
||||||
|
/>
|
||||||
|
</radialGradient>
|
||||||
|
|
||||||
|
<mask :id="mask">
|
||||||
|
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
|
||||||
|
<animateMotion
|
||||||
|
dur="3s"
|
||||||
|
:path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
|
||||||
|
rotate="auto"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</circle>
|
||||||
|
</mask>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<use
|
||||||
|
stroke="#235fa7"
|
||||||
|
stroke-width="1"
|
||||||
|
:xlink:href="`#${path}`"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<use
|
||||||
|
stroke="#4fd2dd"
|
||||||
|
stroke-width="3"
|
||||||
|
:xlink:href="`#${path}`"
|
||||||
|
:mask="`url(#${mask})`"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="stroke-dasharray"
|
||||||
|
:from="`0, ${length}`"
|
||||||
|
:to="`${length}, 0`"
|
||||||
|
dur="3s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</use>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="border-box-content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'BorderBox8',
|
||||||
|
mixins: [autoResize],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
ref: 'border-box-8',
|
||||||
|
path: `border-box-8-path-${(new Date()).getTime()}`,
|
||||||
|
gradient: `border-box-8-gradient-${(new Date()).getTime()}`,
|
||||||
|
mask: `border-box-8-mask-${(new Date()).getTime()}`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
length () {
|
||||||
|
const { width, height } = this
|
||||||
|
|
||||||
|
return (width + height - 5) * 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.dv-border-box-8 {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-box-content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,42 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dv-border-box-9" :ref="ref">
|
<div class="dv-border-box-9" :ref="ref">
|
||||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
<svg class="dv-svg-container">
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
|
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
<animate
|
<stop offset="0%" stop-color="#11eefd" />
|
||||||
attributeName="x1"
|
<stop offset="100%" stop-color="#0078d2" />
|
||||||
values="0%;100%;0%"
|
|
||||||
dur="10s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<animate
|
|
||||||
attributeName="x2"
|
|
||||||
values="100%;0%;100%"
|
|
||||||
dur="10s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<stop offset="0%" :stop-color="mergedColor[0]">
|
|
||||||
<animate
|
|
||||||
attributeName="stop-color"
|
|
||||||
:values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
|
|
||||||
dur="10s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</stop>
|
|
||||||
<stop offset="100%" :stop-color="mergedColor[1]">
|
|
||||||
<animate
|
|
||||||
attributeName="stop-color"
|
|
||||||
:values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
|
|
||||||
dur="10s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</stop>
|
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
|
|
||||||
<mask :id="maskId">
|
<mask :id="maskId">
|
||||||
|
|
@ -105,15 +73,6 @@
|
||||||
</mask>
|
</mask>
|
||||||
</defs>
|
</defs>
|
||||||
|
|
||||||
<polygon :fill="backgroundColor" :points="`
|
|
||||||
15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
|
|
||||||
${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
|
|
||||||
${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
|
|
||||||
${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
|
|
||||||
${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10} ${width * 0.92 + 2}, ${height - 6}
|
|
||||||
11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
|
|
||||||
`" />
|
|
||||||
|
|
||||||
<rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
|
<rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
|
@ -124,57 +83,18 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import autoResize from '../../../mixin/autoResize'
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
import { uuid } from '../../../util/index'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvBorderBox9',
|
name: 'BorderBox9',
|
||||||
mixins: [autoResize],
|
mixins: [autoResize],
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
const id = uuid()
|
|
||||||
return {
|
return {
|
||||||
ref: 'border-box-9',
|
ref: 'border-box-9',
|
||||||
|
|
||||||
gradientId: `border-box-9-gradient-${id}`,
|
gradientId: `border-box-9-gradient-${(new Date()).getTime()}`,
|
||||||
maskId: `border-box-9-mask-${id}`,
|
maskId: `border-box-9-mask-${(new Date()).getTime()}`
|
||||||
|
|
||||||
defaultColor: ['#11eefd', '#0078d2'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -185,7 +105,7 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.dv-border-svg-container {
|
svg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -1,18 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dv-charts-container" :ref="ref">
|
<div class="dv-charts-container" :ref="ref">
|
||||||
<div class="charts-canvas-container" :ref="chartRef" />
|
<div class="charts" :ref="chartRef" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { uuid } from '../../../util/index'
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
import autoResize from '../../../mixin/autoResize'
|
|
||||||
|
|
||||||
import Charts from '@jiaminghi/charts'
|
import Charts from '@jiaminghi/charts'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvCharts',
|
name: 'Charts',
|
||||||
mixins: [autoResize],
|
mixins: [autoResize],
|
||||||
props: {
|
props: {
|
||||||
option: {
|
option: {
|
||||||
|
|
@ -21,10 +19,9 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
const id = uuid()
|
|
||||||
return {
|
return {
|
||||||
ref: `charts-container-${id}`,
|
ref: `charts-container-${(new Date()).getTime()}`,
|
||||||
chartRef: `chart-${id}`,
|
chartRef: `chart-${(new Date()).getTime()}`,
|
||||||
|
|
||||||
chart: null
|
chart: null
|
||||||
}
|
}
|
||||||
|
|
@ -33,11 +30,9 @@ export default {
|
||||||
option () {
|
option () {
|
||||||
let { chart, option } = this
|
let { chart, option } = this
|
||||||
|
|
||||||
if (!chart) return
|
|
||||||
|
|
||||||
if (!option) option = {}
|
if (!option) option = {}
|
||||||
|
|
||||||
chart.setOption(option, true)
|
chart.setOption(option)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -72,7 +67,7 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.charts-canvas-container {
|
.charts {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -40,14 +40,14 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import autoResize from '../../../mixin/autoResize'
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvConicalColumnChart',
|
name: 'ConicalColumnChart',
|
||||||
mixins: [autoResize],
|
mixins: [autoResize],
|
||||||
props: {
|
props: {
|
||||||
config: {
|
config: {
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<rect
|
<rect
|
||||||
v-if="Math.random() > 0.6"
|
v-if="Math.random() > 0.6"
|
||||||
:key="i"
|
:key="i"
|
||||||
:fill="mergedColor[0]"
|
fill="#fff"
|
||||||
:x="point[0] - halfPointSideLength"
|
:x="point[0] - halfPointSideLength"
|
||||||
:y="point[1] - halfPointSideLength"
|
:y="point[1] - halfPointSideLength"
|
||||||
:width="pointSideLength"
|
:width="pointSideLength"
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
<animate
|
<animate
|
||||||
v-if="Math.random() > 0.6"
|
v-if="Math.random() > 0.6"
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
:values="`${mergedColor[0]};transparent`"
|
values="#fff;transparent"
|
||||||
dur="1s"
|
dur="1s"
|
||||||
:begin="Math.random() * 2"
|
:begin="Math.random() * 2"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
|
|
||||||
<rect
|
<rect
|
||||||
v-if="rects[0]"
|
v-if="rects[0]"
|
||||||
:fill="mergedColor[1]"
|
fill="#0de7c2"
|
||||||
:x="rects[0][0] - pointSideLength"
|
:x="rects[0][0] - pointSideLength"
|
||||||
:y="rects[0][1] - pointSideLength"
|
:y="rects[0][1] - pointSideLength"
|
||||||
:width="pointSideLength * 2"
|
:width="pointSideLength * 2"
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
|
|
||||||
<rect
|
<rect
|
||||||
v-if="rects[1]"
|
v-if="rects[1]"
|
||||||
:fill="mergedColor[1]"
|
fill="#0de7c2"
|
||||||
:x="rects[1][0] - 40"
|
:x="rects[1][0] - 40"
|
||||||
:y="rects[1][1] - pointSideLength"
|
:y="rects[1][1] - pointSideLength"
|
||||||
:width="40"
|
:width="40"
|
||||||
|
|
@ -85,21 +85,11 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import autoResize from '../../../mixin/autoResize'
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvDecoration1',
|
name: 'Decoration1',
|
||||||
mixins: [autoResize],
|
mixins: [autoResize],
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
const pointSideLength = 2.5
|
const pointSideLength = 2.5
|
||||||
|
|
||||||
|
|
@ -118,18 +108,7 @@ export default {
|
||||||
|
|
||||||
points: [],
|
points: [],
|
||||||
|
|
||||||
rects: [],
|
rects: []
|
||||||
|
|
||||||
defaultColor: ['#fff', '#0de7c2'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -181,17 +160,7 @@ export default {
|
||||||
const { calcSVGData } = this
|
const { calcSVGData } = this
|
||||||
|
|
||||||
calcSVGData()
|
calcSVGData()
|
||||||
},
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -2,13 +2,13 @@
|
||||||
<div class="dv-decoration-10" :ref="ref">
|
<div class="dv-decoration-10" :ref="ref">
|
||||||
<svg :width="width" :height="height">
|
<svg :width="width" :height="height">
|
||||||
<polyline
|
<polyline
|
||||||
:stroke="mergedColor[1]"
|
stroke="rgba(0, 194, 255, 0.3)"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
:points="`0, ${height / 2} ${width}, ${height / 2}`"
|
:points="`0, ${height / 2} ${width}, ${height / 2}`"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<polyline
|
<polyline
|
||||||
:stroke="mergedColor[0]"
|
stroke="rgba(0, 194, 255, 1)"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
:points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
|
:points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
|
||||||
:stroke-dasharray="`0, ${width * 0.2}`"
|
:stroke-dasharray="`0, ${width * 0.2}`"
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
</polyline>
|
</polyline>
|
||||||
|
|
||||||
<polyline
|
<polyline
|
||||||
:stroke="mergedColor[0]"
|
stroke="rgba(0, 194, 255, 1)"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
:points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`"
|
:points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`"
|
||||||
:stroke-dasharray="`0, ${width * 0.6}`"
|
:stroke-dasharray="`0, ${width * 0.6}`"
|
||||||
|
|
@ -55,7 +55,7 @@
|
||||||
</polyline>
|
</polyline>
|
||||||
|
|
||||||
<polyline
|
<polyline
|
||||||
:stroke="mergedColor[0]"
|
stroke="rgba(0, 194, 255, 1)"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
:points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
|
:points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
|
||||||
:stroke-dasharray="`0, ${width * 0.2}`"
|
:stroke-dasharray="`0, ${width * 0.2}`"
|
||||||
|
|
@ -77,65 +77,65 @@
|
||||||
/>
|
/>
|
||||||
</polyline>
|
</polyline>
|
||||||
|
|
||||||
<circle cx="2" :cy="height / 2" r="2" :fill="mergedColor[1]">
|
<circle cx="2" :cy="height / 2" r="2" fill="#03709f">
|
||||||
<animate
|
<animate
|
||||||
:id="animationId1"
|
:id="animationId1"
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
:values="`${mergedColor[1]};${mergedColor[0]}`"
|
values="#03709f;#00c2ff"
|
||||||
:begin="`0s;${animationId7}.end`"
|
:begin="`0s;${animationId7}.end`"
|
||||||
dur="0.3s"
|
dur="0.3s"
|
||||||
fill="freeze"
|
fill="freeze"
|
||||||
/>
|
/>
|
||||||
</circle>
|
</circle>
|
||||||
|
|
||||||
<circle :cx="width * 0.2" :cy="height / 2" r="2" :fill="mergedColor[1]">
|
<circle :cx="width * 0.2" :cy="height / 2" r="2" fill="#03709f">
|
||||||
<animate
|
<animate
|
||||||
:id="animationId3"
|
:id="animationId3"
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
:values="`${mergedColor[1]};${mergedColor[0]}`"
|
values="#03709f;#00c2ff"
|
||||||
:begin="`${animationId2}.end`"
|
:begin="`${animationId2}.end`"
|
||||||
dur="0.3s"
|
dur="0.3s"
|
||||||
fill="freeze"
|
fill="freeze"
|
||||||
/>
|
/>
|
||||||
<animate
|
<animate
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
:values="`${mergedColor[1]};${mergedColor[1]}`"
|
values="#03709f;#03709f"
|
||||||
dur="0.01s"
|
dur="0.01s"
|
||||||
:begin="`${animationId7}.end`"
|
:begin="`${animationId7}.end`"
|
||||||
fill="freeze"
|
fill="freeze"
|
||||||
/>
|
/>
|
||||||
</circle>
|
</circle>
|
||||||
|
|
||||||
<circle :cx="width * 0.8" :cy="height / 2" r="2" :fill="mergedColor[1]">
|
<circle :cx="width * 0.8" :cy="height / 2" r="2" fill="#03709f">
|
||||||
<animate
|
<animate
|
||||||
:id="animationId5"
|
:id="animationId5"
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
:values="`${mergedColor[1]};${mergedColor[0]}`"
|
values="#03709f;#00c2ff"
|
||||||
:begin="`${animationId4}.end`"
|
:begin="`${animationId4}.end`"
|
||||||
dur="0.3s"
|
dur="0.3s"
|
||||||
fill="freeze"
|
fill="freeze"
|
||||||
/>
|
/>
|
||||||
<animate
|
<animate
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
:values="`${mergedColor[1]};${mergedColor[1]}`"
|
values="#03709f;#03709f"
|
||||||
dur="0.01s"
|
dur="0.01s"
|
||||||
:begin="`${animationId7}.end`"
|
:begin="`${animationId7}.end`"
|
||||||
fill="freeze"
|
fill="freeze"
|
||||||
/>
|
/>
|
||||||
</circle>
|
</circle>
|
||||||
|
|
||||||
<circle :cx="width - 2" :cy="height / 2" r="2" :fill="mergedColor[1]">
|
<circle :cx="width - 2" :cy="height / 2" r="2" fill="#03709f">
|
||||||
<animate
|
<animate
|
||||||
:id="animationId7"
|
:id="animationId7"
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
:values="`${mergedColor[1]};${mergedColor[0]}`"
|
values="#03709f;#00c2ff"
|
||||||
:begin="`${animationId6}.end`"
|
:begin="`${animationId6}.end`"
|
||||||
dur="0.3s"
|
dur="0.3s"
|
||||||
fill="freeze"
|
fill="freeze"
|
||||||
/>
|
/>
|
||||||
<animate
|
<animate
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
:values="`${mergedColor[1]};${mergedColor[1]}`"
|
values="#03709f;#03709f"
|
||||||
dur="0.01s"
|
dur="0.01s"
|
||||||
:begin="`${animationId7}.end`"
|
:begin="`${animationId7}.end`"
|
||||||
fill="freeze"
|
fill="freeze"
|
||||||
|
|
@ -146,58 +146,23 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import autoResize from '../../../mixin/autoResize'
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
import { uuid } from '../../../util/index'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvDecoration10',
|
name: 'Decoration9',
|
||||||
mixins: [autoResize],
|
mixins: [autoResize],
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
const id = uuid()
|
|
||||||
return {
|
return {
|
||||||
ref: 'decoration-10',
|
ref: 'decoration-10',
|
||||||
|
|
||||||
animationId1: `d10ani1${id}`,
|
animationId1: `d10ani1${(new Date()).getTime()}`,
|
||||||
animationId2: `d10ani2${id}`,
|
animationId2: `d10ani2${(new Date()).getTime()}`,
|
||||||
animationId3: `d10ani3${id}`,
|
animationId3: `d10ani3${(new Date()).getTime()}`,
|
||||||
animationId4: `d10ani4${id}`,
|
animationId4: `d10ani4${(new Date()).getTime()}`,
|
||||||
animationId5: `d10ani5${id}`,
|
animationId5: `d10ani5${(new Date()).getTime()}`,
|
||||||
animationId6: `d10ani6${id}`,
|
animationId6: `d10ani6${(new Date()).getTime()}`,
|
||||||
animationId7: `d10ani7${id}`,
|
animationId7: `d10ani7${(new Date()).getTime()}`
|
||||||
|
|
||||||
defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dv-decoration-2" :ref="ref">
|
<div class="dv-decoration-2" :ref="ref">
|
||||||
<svg :width="`${width}px`" :height="`${height}px`">
|
<svg :width="`${width}px`" :height="`${height}px`">
|
||||||
<rect :x="x" :y="y" :width="w" :height="h" :fill="mergedColor[0]">
|
<rect :x="x" :y="y" :width="w" :height="h" fill="#3faacb">
|
||||||
<animate
|
<animate
|
||||||
:attributeName="reverse ? 'height' : 'width'"
|
:attributeName="reverse ? 'height' : 'width'"
|
||||||
from="0"
|
from="0"
|
||||||
:to="reverse ? height : width"
|
:to="reverse ? height : width"
|
||||||
:dur="`${dur}s`"
|
dur="6s"
|
||||||
calcMode="spline"
|
calcMode="spline"
|
||||||
keyTimes="0;1"
|
keyTimes="0;1"
|
||||||
keySplines=".42,0,.58,1"
|
keySplines=".42,0,.58,1"
|
||||||
|
|
@ -14,15 +14,15 @@
|
||||||
/>
|
/>
|
||||||
</rect>
|
</rect>
|
||||||
|
|
||||||
<rect :x="x" :y="y" width="1" height="1" :fill="mergedColor[1]">
|
<rect :x="x" :y="y" width="1" height="1" fill="#fff">
|
||||||
<animate
|
<animate
|
||||||
:attributeName="reverse ? 'y' : 'x'"
|
:attributeName="reverse ? 'y' : 'x'"
|
||||||
from="0"
|
from="0"
|
||||||
:to="reverse ? height : width"
|
:to="reverse ? height : width"
|
||||||
:dur="`${dur}s`"
|
dur="6s"
|
||||||
calcMode="spline"
|
calcMode="spline"
|
||||||
keyTimes="0;1"
|
keyTimes="0;1"
|
||||||
keySplines="0.42,0,0.58,1"
|
keySplines=".42,0,.58,1"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
/>
|
/>
|
||||||
</rect>
|
</rect>
|
||||||
|
|
@ -31,27 +31,15 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import autoResize from '../../../mixin/autoResize'
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvDecoration2',
|
name: 'Decoration2',
|
||||||
mixins: [autoResize],
|
mixins: [autoResize],
|
||||||
props: {
|
props: {
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
reverse: {
|
reverse: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
|
||||||
dur: {
|
|
||||||
type: Number,
|
|
||||||
default: 6
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
|
|
@ -62,19 +50,10 @@ export default {
|
||||||
y: 0,
|
y: 0,
|
||||||
|
|
||||||
w: 0,
|
w: 0,
|
||||||
h: 0,
|
h: 0
|
||||||
|
|
||||||
defaultColor: ['#3faacb', '#fff'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
},
|
|
||||||
reverse () {
|
reverse () {
|
||||||
const { calcSVGData } = this
|
const { calcSVGData } = this
|
||||||
|
|
||||||
|
|
@ -106,17 +85,7 @@ export default {
|
||||||
const { calcSVGData } = this
|
const { calcSVGData } = this
|
||||||
|
|
||||||
calcSVGData()
|
calcSVGData()
|
||||||
},
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
>
|
>
|
||||||
<rect
|
<rect
|
||||||
:key="i"
|
:key="i"
|
||||||
:fill="mergedColor[0]"
|
fill="#7acaec"
|
||||||
:x="point[0] - halfPointSideLength"
|
:x="point[0] - halfPointSideLength"
|
||||||
:y="point[1] - halfPointSideLength"
|
:y="point[1] - halfPointSideLength"
|
||||||
:width="pointSideLength"
|
:width="pointSideLength"
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
<animate
|
<animate
|
||||||
v-if="Math.random() > 0.6"
|
v-if="Math.random() > 0.6"
|
||||||
attributeName="fill"
|
attributeName="fill"
|
||||||
:values="`${mergedColor.join(';')}`"
|
values="#7acaec;transparent"
|
||||||
:dur="Math.random() + 1 + 's'"
|
:dur="Math.random() + 1 + 's'"
|
||||||
:begin="Math.random() * 2"
|
:begin="Math.random() * 2"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
|
|
@ -28,21 +28,11 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import autoResize from '../../../mixin/autoResize'
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvDecoration3',
|
name: 'Decoration3',
|
||||||
mixins: [autoResize],
|
mixins: [autoResize],
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
const pointSideLength = 7
|
const pointSideLength = 7
|
||||||
|
|
||||||
|
|
@ -59,18 +49,7 @@ export default {
|
||||||
pointSideLength,
|
pointSideLength,
|
||||||
halfPointSideLength: pointSideLength / 2,
|
halfPointSideLength: pointSideLength / 2,
|
||||||
|
|
||||||
points: [],
|
points: []
|
||||||
|
|
||||||
defaultColor: ['#7acaec', 'transparent'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -112,17 +91,7 @@ export default {
|
||||||
const { calcSVGData } = this
|
const { calcSVGData } = this
|
||||||
|
|
||||||
calcSVGData()
|
calcSVGData()
|
||||||
},
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
<template>
|
||||||
|
<div class="dv-decoration-4" :ref="ref">
|
||||||
|
<div
|
||||||
|
:class="`container ${reverse ? 'reverse' : 'normal'}`"
|
||||||
|
:style="reverse ? `width:${width}px;height:5px` : `width:5px;height:${height}px;`"
|
||||||
|
>
|
||||||
|
<svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
|
||||||
|
<polyline
|
||||||
|
stroke="rgba(255, 255, 255, 0.3)"
|
||||||
|
:points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`"
|
||||||
|
/>
|
||||||
|
<polyline
|
||||||
|
class="bold-line"
|
||||||
|
stroke="rgba(255, 255, 255, 0.3)"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-dasharray="20, 80"
|
||||||
|
stroke-dashoffset="-30"
|
||||||
|
:points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Decoration4',
|
||||||
|
mixins: [autoResize],
|
||||||
|
props: ['reverse'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
ref: 'decoration-4'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.dv-decoration-4 {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.normal {
|
||||||
|
height: 0% !important;
|
||||||
|
animation: ani-height 3s ease-in-out infinite;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reverse {
|
||||||
|
width: 0% !important;
|
||||||
|
animation: ani-width 3s ease-in-out infinite;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ani-height {
|
||||||
|
70% {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ani-width {
|
||||||
|
70% {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<svg :width="width" :height="height">
|
<svg :width="width" :height="height">
|
||||||
<polyline
|
<polyline
|
||||||
fill="transparent"
|
fill="transparent"
|
||||||
:stroke="mergedColor[0]"
|
stroke="#3f96a5"
|
||||||
stroke-width="3"
|
stroke-width="3"
|
||||||
:points="line1Points"
|
:points="line1Points"
|
||||||
>
|
>
|
||||||
|
|
@ -12,17 +12,17 @@
|
||||||
attributeType="XML"
|
attributeType="XML"
|
||||||
:from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
|
:from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
|
||||||
:to="`0, 0, ${line1Length}, 0`"
|
:to="`0, 0, ${line1Length}, 0`"
|
||||||
:dur="`${dur}s`"
|
dur="1.2s"
|
||||||
begin="0s"
|
begin="0s"
|
||||||
calcMode="spline"
|
calcMode="spline"
|
||||||
keyTimes="0;1"
|
keyTimes="0;1"
|
||||||
keySplines="0.4,1,0.49,0.98"
|
keySplines=".4,1,.49,.98"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
/>
|
/>
|
||||||
</polyline>
|
</polyline>
|
||||||
<polyline
|
<polyline
|
||||||
fill="transparent"
|
fill="transparent"
|
||||||
:stroke="mergedColor[1]"
|
stroke="#3f96a5"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
:points="line2Points"
|
:points="line2Points"
|
||||||
>
|
>
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
attributeType="XML"
|
attributeType="XML"
|
||||||
:from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
|
:from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
|
||||||
:to="`0, 0, ${line2Length}, 0`"
|
:to="`0, 0, ${line2Length}, 0`"
|
||||||
:dur="`${dur}s`"
|
dur="1.2s"
|
||||||
begin="0s"
|
begin="0s"
|
||||||
calcMode="spline"
|
calcMode="spline"
|
||||||
keyTimes="0;1"
|
keyTimes="0;1"
|
||||||
|
|
@ -44,27 +44,13 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import autoResize from '../../../mixin/autoResize'
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
import { getPolylineLength } from '@jiaminghi/charts/lib/util'
|
import { getPolylineLength } from '@jiaminghi/charts/lib/util'
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvDecoration5',
|
name: 'Decoration5',
|
||||||
mixins: [autoResize],
|
mixins: [autoResize],
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
dur: {
|
|
||||||
type: Number,
|
|
||||||
default: 1.2
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
ref: 'decoration-5',
|
ref: 'decoration-5',
|
||||||
|
|
@ -73,18 +59,7 @@ export default {
|
||||||
line2Points: '',
|
line2Points: '',
|
||||||
|
|
||||||
line1Length: 0,
|
line1Length: 0,
|
||||||
line2Length: 0,
|
line2Length: 0
|
||||||
|
|
||||||
defaultColor: ['#3f96a5', '#3f96a5'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -122,17 +97,7 @@ export default {
|
||||||
const { calcSVGData } = this
|
const { calcSVGData } = this
|
||||||
|
|
||||||
calcSVGData()
|
calcSVGData()
|
||||||
},
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
>
|
>
|
||||||
<rect
|
<rect
|
||||||
:key="i"
|
:key="i"
|
||||||
:fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
|
fill="#7acaec"
|
||||||
:x="point[0] - halfRectWidth"
|
:x="point[0] - halfRectWidth"
|
||||||
:y="point[1] - heights[i] / 2"
|
:y="point[1] - heights[i] / 2"
|
||||||
:width="rectWidth"
|
:width="rectWidth"
|
||||||
|
|
@ -16,9 +16,9 @@
|
||||||
attributeName="y"
|
attributeName="y"
|
||||||
:values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
|
:values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
|
||||||
:dur="`${randoms[i]}s`"
|
:dur="`${randoms[i]}s`"
|
||||||
keyTimes="0;0.5;1"
|
keyTimes="0;.5;1"
|
||||||
calcMode="spline"
|
calcMode="spline"
|
||||||
keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
|
keySplines=".42,0,.58,1;.42,0,.58,1"
|
||||||
begin="0s"
|
begin="0s"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
/>
|
/>
|
||||||
|
|
@ -26,9 +26,9 @@
|
||||||
attributeName="height"
|
attributeName="height"
|
||||||
:values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
|
:values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
|
||||||
:dur="`${randoms[i]}s`"
|
:dur="`${randoms[i]}s`"
|
||||||
keyTimes="0;0.5;1"
|
keyTimes="0;.5;1"
|
||||||
calcMode="spline"
|
calcMode="spline"
|
||||||
keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
|
keySplines=".42,0,.58,1;.42,0,.58,1"
|
||||||
begin="0s"
|
begin="0s"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
/>
|
/>
|
||||||
|
|
@ -39,23 +39,13 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import autoResize from '../../../mixin/autoResize'
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
import { randomExtend } from '../../../util'
|
import { randomExtend } from '../../util'
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvDecoration6',
|
name: 'Decoration6',
|
||||||
mixins: [autoResize],
|
mixins: [autoResize],
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
const rectWidth = 7
|
const rectWidth = 7
|
||||||
|
|
||||||
|
|
@ -75,18 +65,7 @@ export default {
|
||||||
points: [],
|
points: [],
|
||||||
heights: [],
|
heights: [],
|
||||||
minHeights: [],
|
minHeights: [],
|
||||||
randoms: [],
|
randoms: []
|
||||||
|
|
||||||
defaultColor: ['#7acaec', '#7acaec'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -137,17 +116,7 @@ export default {
|
||||||
const { calcSVGData } = this
|
const { calcSVGData } = this
|
||||||
|
|
||||||
calcSVGData()
|
calcSVGData()
|
||||||
},
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -4,13 +4,13 @@
|
||||||
<polyline
|
<polyline
|
||||||
stroke-width="4"
|
stroke-width="4"
|
||||||
fill="transparent"
|
fill="transparent"
|
||||||
:stroke="mergedColor[0]"
|
stroke="#1dc1f5"
|
||||||
points="10, 0 19, 10 10, 20"
|
points="10, 0 19, 10 10, 20"
|
||||||
/>
|
/>
|
||||||
<polyline
|
<polyline
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
fill="transparent"
|
fill="transparent"
|
||||||
:stroke="mergedColor[1]"
|
stroke="#1dc1f5"
|
||||||
points="2, 0 11, 10 2, 20"
|
points="2, 0 11, 10 2, 20"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
@ -19,13 +19,13 @@
|
||||||
<polyline
|
<polyline
|
||||||
stroke-width="4"
|
stroke-width="4"
|
||||||
fill="transparent"
|
fill="transparent"
|
||||||
:stroke="mergedColor[0]"
|
stroke="#1dc1f5"
|
||||||
points="11, 0 2, 10 11, 20"
|
points="11, 0 2, 10 11, 20"
|
||||||
/>
|
/>
|
||||||
<polyline
|
<polyline
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
fill="transparent"
|
fill="transparent"
|
||||||
:stroke="mergedColor[1]"
|
stroke="#1dc1f5"
|
||||||
points="19, 0 10, 10 19, 20"
|
points="19, 0 10, 10 19, 20"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
@ -33,44 +33,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvDecoration7',
|
name: 'Decoration7'
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
defaultColor: ['#1dc1f5', '#1dc1f5'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -1,22 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dv-decoration-8" :ref="ref">
|
<div class="dv-decoration-8" :ref="ref">
|
||||||
<svg :width="width" :height="height">
|
<svg>
|
||||||
<polyline
|
<polyline
|
||||||
:stroke="mergedColor[0]"
|
stroke="#3f96a5"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
fill="transparent"
|
fill="transparent"
|
||||||
:points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
|
:points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<polyline
|
<polyline
|
||||||
:stroke="mergedColor[0]"
|
stroke="#3f96a5"
|
||||||
stroke-width="2"
|
stroke-width="2"
|
||||||
fill="transparent"
|
fill="transparent"
|
||||||
:points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
|
:points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<polyline
|
<polyline
|
||||||
:stroke="mergedColor[1]"
|
stroke="#3f96a5"
|
||||||
fill="transparent"
|
fill="transparent"
|
||||||
stroke-width="3"
|
stroke-width="3"
|
||||||
:points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
|
:points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
|
||||||
|
|
@ -26,20 +26,12 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import autoResize from '../../../mixin/autoResize'
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvDecoration8',
|
name: 'Decoration8',
|
||||||
mixins: [autoResize],
|
mixins: [autoResize],
|
||||||
props: {
|
props: {
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
reverse: {
|
reverse: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
|
@ -47,18 +39,7 @@ export default {
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
ref: 'decoration-8',
|
ref: 'decoration-8'
|
||||||
|
|
||||||
defaultColor: ['#3f96a5', '#3f96a5'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -68,17 +49,7 @@ export default {
|
||||||
if (!reverse) return pos
|
if (!reverse) return pos
|
||||||
|
|
||||||
return width - pos
|
return width - pos
|
||||||
},
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
cy="50"
|
cy="50"
|
||||||
r="45"
|
r="45"
|
||||||
fill="transparent"
|
fill="transparent"
|
||||||
:stroke="mergedColor[1]"
|
stroke="rgba(3, 166, 224, 0.5)"
|
||||||
stroke-width="10"
|
stroke-width="10"
|
||||||
stroke-dasharray="80, 100, 30, 100"
|
stroke-dasharray="80, 100, 30, 100"
|
||||||
>
|
>
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
attributeName="transform"
|
attributeName="transform"
|
||||||
type="rotate"
|
type="rotate"
|
||||||
values="0 50 50;360 50 50"
|
values="0 50 50;360 50 50"
|
||||||
:dur="`${dur}s`"
|
dur="3s"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
/>
|
/>
|
||||||
</circle>
|
</circle>
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
cy="50"
|
cy="50"
|
||||||
r="45"
|
r="45"
|
||||||
fill="transparent"
|
fill="transparent"
|
||||||
:stroke="mergedColor[0]"
|
stroke="rgba(3, 166, 224, 0.8)"
|
||||||
stroke-width="6"
|
stroke-width="6"
|
||||||
stroke-dasharray="50, 66, 100, 66"
|
stroke-dasharray="50, 66, 100, 66"
|
||||||
>
|
>
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
attributeName="transform"
|
attributeName="transform"
|
||||||
type="rotate"
|
type="rotate"
|
||||||
values="0 50 50;-360 50 50"
|
values="0 50 50;-360 50 50"
|
||||||
:dur="`${dur}s`"
|
dur="3s"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
/>
|
/>
|
||||||
</circle>
|
</circle>
|
||||||
|
|
@ -46,7 +46,7 @@
|
||||||
cy="50"
|
cy="50"
|
||||||
r="38"
|
r="38"
|
||||||
fill="transparent"
|
fill="transparent"
|
||||||
:stroke="fade(mergedColor[1] || defaultColor[1], 30)"
|
stroke="rgba(3, 166, 224, 0.2)"
|
||||||
stroke-width="1"
|
stroke-width="1"
|
||||||
stroke-dasharray="5, 1"
|
stroke-dasharray="5, 1"
|
||||||
/>
|
/>
|
||||||
|
|
@ -55,15 +55,15 @@
|
||||||
v-for="(foo, i) in new Array(20).fill(0)"
|
v-for="(foo, i) in new Array(20).fill(0)"
|
||||||
:key="i"
|
:key="i"
|
||||||
:xlink:href="`#${polygonId}`"
|
:xlink:href="`#${polygonId}`"
|
||||||
:stroke="mergedColor[1]"
|
stroke="rgba(3, 166, 224, 0.6)"
|
||||||
:fill="Math.random() > 0.4 ? 'transparent' : mergedColor[0]"
|
:fill="Math.random() > 0.4 ? 'transparent' : 'rgba(3, 166, 224, 0.8)'"
|
||||||
>
|
>
|
||||||
<animateTransform
|
<animateTransform
|
||||||
attributeName="transform"
|
attributeName="transform"
|
||||||
type="rotate"
|
type="rotate"
|
||||||
values="0 50 50;360 50 50"
|
values="0 50 50;360 50 50"
|
||||||
:dur="`${dur}s`"
|
dur="3s"
|
||||||
:begin="`${i * dur / 20}s`"
|
:begin="`${i * 0.15}s`"
|
||||||
repeatCount="indefinite"
|
repeatCount="indefinite"
|
||||||
/>
|
/>
|
||||||
</use>
|
</use>
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
cy="50"
|
cy="50"
|
||||||
r="26"
|
r="26"
|
||||||
fill="transparent"
|
fill="transparent"
|
||||||
:stroke="fade(mergedColor[1] || defaultColor[1], 30)"
|
stroke="rgba(3, 166, 224, 0.2)"
|
||||||
stroke-width="1"
|
stroke-width="1"
|
||||||
stroke-dasharray="5, 1"
|
stroke-dasharray="5, 1"
|
||||||
/>
|
/>
|
||||||
|
|
@ -84,49 +84,20 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import autoResize from '../../../mixin/autoResize'
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
import { uuid } from '../../../util/index'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
import { fade } from '@jiaminghi/color'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvDecoration9',
|
name: 'Decoration9',
|
||||||
mixins: [autoResize],
|
mixins: [autoResize],
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
dur: {
|
|
||||||
type: Number,
|
|
||||||
default: 3
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
data () {
|
||||||
const id = uuid()
|
|
||||||
return {
|
return {
|
||||||
ref: 'decoration-9',
|
ref: 'decoration-9',
|
||||||
|
|
||||||
polygonId: `decoration-9-polygon-${id}`,
|
polygonId: `decoration-9-polygon-${(new Date()).getTime()}`,
|
||||||
|
|
||||||
svgWH: [100, 100],
|
svgWH: [100, 100],
|
||||||
|
|
||||||
svgScale: [1, 1],
|
svgScale: [1, 1]
|
||||||
|
|
||||||
defaultColor: ['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -146,18 +117,7 @@ export default {
|
||||||
const { calcScale } = this
|
const { calcScale } = this
|
||||||
|
|
||||||
calcScale()
|
calcScale()
|
||||||
},
|
}
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
},
|
|
||||||
fade
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -14,7 +14,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvDigitalFlop',
|
name: 'DigitalFlop',
|
||||||
props: {
|
props: {
|
||||||
config: {
|
config: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
|
@ -23,7 +23,7 @@ export default {
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
renderer: null,
|
render: null,
|
||||||
|
|
||||||
defaultConfig: {
|
defaultConfig: {
|
||||||
/**
|
/**
|
||||||
|
|
@ -53,12 +53,6 @@ export default {
|
||||||
* @example textAlign = 'center' | 'left' | 'right'
|
* @example textAlign = 'center' | 'left' | 'right'
|
||||||
*/
|
*/
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
/**
|
|
||||||
* @description rowGap
|
|
||||||
* @type {Number}
|
|
||||||
@default rowGap = 0
|
|
||||||
*/
|
|
||||||
rowGap: 0,
|
|
||||||
/**
|
/**
|
||||||
* @description Text style configuration
|
* @description Text style configuration
|
||||||
* @type {Object} {CRender Class Style}
|
* @type {Object} {CRender Class Style}
|
||||||
|
|
@ -67,11 +61,6 @@ export default {
|
||||||
fontSize: 30,
|
fontSize: 30,
|
||||||
fill: '#3de7c9'
|
fill: '#3de7c9'
|
||||||
},
|
},
|
||||||
/**
|
|
||||||
* @description Number formatter
|
|
||||||
* @type {Null|Function}
|
|
||||||
*/
|
|
||||||
formatter: undefined,
|
|
||||||
/**
|
/**
|
||||||
* @description CRender animationCurve
|
* @description CRender animationCurve
|
||||||
* @type {String}
|
* @type {String}
|
||||||
|
|
@ -111,7 +100,7 @@ export default {
|
||||||
initRender () {
|
initRender () {
|
||||||
const { $refs } = this
|
const { $refs } = this
|
||||||
|
|
||||||
this.renderer = new CRender($refs['digital-flop'])
|
this.render = new CRender($refs['digital-flop'])
|
||||||
},
|
},
|
||||||
mergeConfig () {
|
mergeConfig () {
|
||||||
const { defaultConfig, config } = this
|
const { defaultConfig, config } = this
|
||||||
|
|
@ -119,14 +108,14 @@ export default {
|
||||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||||
},
|
},
|
||||||
initGraph () {
|
initGraph () {
|
||||||
const { getShape, getStyle, renderer, mergedConfig } = this
|
const { getShape, getStyle, render, mergedConfig } = this
|
||||||
|
|
||||||
const { animationCurve, animationFrame } = mergedConfig
|
const { animationCurve, animationFrame } = mergedConfig
|
||||||
|
|
||||||
const shape = getShape()
|
const shape = getShape()
|
||||||
const style = getStyle()
|
const style = getStyle()
|
||||||
|
|
||||||
this.graph = renderer.add({
|
this.graph = render.add({
|
||||||
name: 'numberText',
|
name: 'numberText',
|
||||||
animationCurve,
|
animationCurve,
|
||||||
animationFrame,
|
animationFrame,
|
||||||
|
|
@ -135,9 +124,9 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
getShape () {
|
getShape () {
|
||||||
const { number, content, toFixed, textAlign, rowGap, formatter } = this.mergedConfig
|
const { number, content, toFixed, textAlign } = this.mergedConfig
|
||||||
|
|
||||||
const [w, h] = this.renderer.area
|
const [w, h] = this.render.area
|
||||||
|
|
||||||
const position = [w / 2, h / 2]
|
const position = [w / 2, h / 2]
|
||||||
|
|
||||||
|
|
@ -148,9 +137,7 @@ export default {
|
||||||
number,
|
number,
|
||||||
content,
|
content,
|
||||||
toFixed,
|
toFixed,
|
||||||
position,
|
position
|
||||||
rowGap,
|
|
||||||
formatter
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getStyle () {
|
getStyle () {
|
||||||
|
|
@ -164,8 +151,6 @@ export default {
|
||||||
update () {
|
update () {
|
||||||
const { mergeConfig, mergeShape, getShape, getStyle, graph, mergedConfig } = this
|
const { mergeConfig, mergeShape, getShape, getStyle, graph, mergedConfig } = this
|
||||||
|
|
||||||
graph.animationEnd()
|
|
||||||
|
|
||||||
mergeConfig()
|
mergeConfig()
|
||||||
|
|
||||||
if (!graph) return
|
if (!graph) return
|
||||||
|
|
@ -153,12 +153,12 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||||
|
|
||||||
import { randomExtend, getPointDistance, uuid } from '../../../util/index'
|
import { randomExtend, getPointDistance } from '../../util/index'
|
||||||
|
|
||||||
import autoResize from '../../../mixin/autoResize'
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvFlylineChart',
|
name: 'PercentPond',
|
||||||
mixins: [autoResize],
|
mixins: [autoResize],
|
||||||
props: {
|
props: {
|
||||||
config: {
|
config: {
|
||||||
|
|
@ -171,14 +171,13 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
const id = uuid()
|
|
||||||
return {
|
return {
|
||||||
ref: 'dv-flyline-chart',
|
ref: 'dv-flyline-chart',
|
||||||
unique: Math.random(),
|
unique: Math.random(),
|
||||||
maskId: `flyline-mask-id-${id}`,
|
maskId: `flyline-mask-id-${(new Date()).getTime()}`,
|
||||||
maskCircleId: `mask-circle-id-${id}`,
|
maskCircleId: `mask-circle-id-${(new Date()).getTime()}`,
|
||||||
gradientId: `gradient-id-${id}`,
|
gradientId: `gradient-id-${(new Date()).getTime()}`,
|
||||||
gradient2Id: `gradient2-id-${id}`,
|
gradient2Id: `gradient2-id-${(new Date()).getTime()}`,
|
||||||
|
|
||||||
defaultConfig: {
|
defaultConfig: {
|
||||||
/**
|
/**
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
<template>
|
||||||
|
<div id="dv-full-screen-container" ref="full-screen-container">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'FullScreenContainer',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
scale: 0,
|
||||||
|
datavRoot: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init () {
|
||||||
|
const { initConfig, setAppScale, bindReSizeEventHandler } = this
|
||||||
|
|
||||||
|
initConfig()
|
||||||
|
|
||||||
|
setAppScale()
|
||||||
|
|
||||||
|
bindReSizeEventHandler()
|
||||||
|
},
|
||||||
|
initConfig () {
|
||||||
|
const { width, height } = screen
|
||||||
|
|
||||||
|
this.allWidth = width
|
||||||
|
|
||||||
|
const datavRoot = this.datavRoot = this.$refs['full-screen-container']
|
||||||
|
|
||||||
|
datavRoot.style.width = `${width}px`
|
||||||
|
datavRoot.style.height = `${height}px`
|
||||||
|
},
|
||||||
|
setAppScale () {
|
||||||
|
const { allWidth, datavRoot } = this
|
||||||
|
|
||||||
|
const currentWidth = document.body.clientWidth
|
||||||
|
|
||||||
|
datavRoot.style.transform = `scale(${currentWidth / allWidth})`
|
||||||
|
},
|
||||||
|
bindReSizeEventHandler () {
|
||||||
|
const { debounce, setAppScale } = this
|
||||||
|
|
||||||
|
if (!debounce) return
|
||||||
|
|
||||||
|
window.addEventListener('resize', debounce(100, setAppScale))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
const { init } = this
|
||||||
|
|
||||||
|
init()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#dv-full-screen-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
transform-origin: left top;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
import fullScreenContainer from './fullScreenContainer'
|
||||||
|
import loading from './loading/index.vue'
|
||||||
|
|
||||||
|
// border box
|
||||||
|
import borderBox1 from './borderBox1/index'
|
||||||
|
import borderBox2 from './borderBox2/index'
|
||||||
|
import borderBox3 from './borderBox3/index'
|
||||||
|
import borderBox4 from './borderBox4/index'
|
||||||
|
import borderBox5 from './borderBox5/index'
|
||||||
|
import borderBox6 from './borderBox6/index'
|
||||||
|
import borderBox7 from './borderBox7/index'
|
||||||
|
import borderBox8 from './borderBox8/index'
|
||||||
|
import borderBox9 from './borderBox9/index'
|
||||||
|
|
||||||
|
// decoration
|
||||||
|
import decoration1 from './decoration1/index'
|
||||||
|
import decoration2 from './decoration2/index'
|
||||||
|
import decoration3 from './decoration3/index'
|
||||||
|
import decoration4 from './decoration4/index'
|
||||||
|
import decoration5 from './decoration5/index'
|
||||||
|
import decoration6 from './decoration6/index'
|
||||||
|
import decoration7 from './decoration7/index'
|
||||||
|
import decoration8 from './decoration8/index'
|
||||||
|
import decoration9 from './decoration9/index'
|
||||||
|
import decoration10 from './decoration10/index'
|
||||||
|
|
||||||
|
// charts
|
||||||
|
import charts from './charts/index.vue'
|
||||||
|
|
||||||
|
import activeRingChart from './activeRingChart'
|
||||||
|
import waterLevelPond from './waterLevelPond/index.vue'
|
||||||
|
import percentPond from './percentPond/index.vue'
|
||||||
|
import flylineChart from './flylineChart'
|
||||||
|
import conicalColumnChart from './conicalColumnChart'
|
||||||
|
import digitalFlop from './digitalFlop'
|
||||||
|
import scrollBoard from './scrollBoard/index.vue'
|
||||||
|
import scrollRankingBoard from './scrollRankingBoard/index.vue'
|
||||||
|
|
||||||
|
export default function (Vue) {
|
||||||
|
Vue.component('dvFullScreenContainer', fullScreenContainer)
|
||||||
|
|
||||||
|
Vue.component('dvLoading', loading)
|
||||||
|
|
||||||
|
// border box
|
||||||
|
Vue.component('dvBorderBox1', borderBox1)
|
||||||
|
Vue.component('dvBorderBox2', borderBox2)
|
||||||
|
Vue.component('dvBorderBox3', borderBox3)
|
||||||
|
Vue.component('dvBorderBox4', borderBox4)
|
||||||
|
Vue.component('dvBorderBox5', borderBox5)
|
||||||
|
Vue.component('dvBorderBox6', borderBox6)
|
||||||
|
Vue.component('dvBorderBox7', borderBox7)
|
||||||
|
Vue.component('dvBorderBox8', borderBox8)
|
||||||
|
Vue.component('dvBorderBox9', borderBox9)
|
||||||
|
|
||||||
|
// decoration
|
||||||
|
Vue.component('dvDecoration1', decoration1)
|
||||||
|
Vue.component('dvDecoration2', decoration2)
|
||||||
|
Vue.component('dvDecoration3', decoration3)
|
||||||
|
Vue.component('dvDecoration4', decoration4)
|
||||||
|
Vue.component('dvDecoration5', decoration5)
|
||||||
|
Vue.component('dvDecoration6', decoration6)
|
||||||
|
Vue.component('dvDecoration7', decoration7)
|
||||||
|
Vue.component('dvDecoration8', decoration8)
|
||||||
|
Vue.component('dvDecoration9', decoration9)
|
||||||
|
Vue.component('dvDecoration10', decoration10)
|
||||||
|
|
||||||
|
// charts
|
||||||
|
Vue.component('dvCharts', charts)
|
||||||
|
|
||||||
|
Vue.component('dvActiveRingChart', activeRingChart)
|
||||||
|
Vue.component('dvWaterLevelPond', waterLevelPond)
|
||||||
|
Vue.component('dvPercentPond', percentPond)
|
||||||
|
Vue.component('dvFlylineChart', flylineChart)
|
||||||
|
Vue.component('dvConicalColumnChart', conicalColumnChart)
|
||||||
|
Vue.component('dvDigitalFlop', digitalFlop)
|
||||||
|
Vue.component('dvScrollBoard', scrollBoard)
|
||||||
|
Vue.component('dvScrollRankingBoard', scrollRankingBoard)
|
||||||
|
}
|
||||||
|
|
@ -59,7 +59,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'DvLoading'
|
name: 'Loading'
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -74,6 +74,7 @@ export default {
|
||||||
|
|
||||||
.loading-tip {
|
.loading-tip {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -4,13 +4,13 @@
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
|
<linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
<stop v-for="lc in linearGradient" :key="lc[0]"
|
<stop v-for="lc in linearGradient" :key="lc[0]"
|
||||||
:offset="`${lc[0]}%`"
|
:offset="lc[0]"
|
||||||
:stop-color="lc[1]" />
|
:stop-color="lc[1]" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
|
|
||||||
<linearGradient :id="gradientId2" x1="0%" y1="0%" :x2="gradient2XPos" y2="0%">
|
<linearGradient :id="gradientId2" x1="0%" y1="0%" :x2="gradient2XPos" y2="0%">
|
||||||
<stop v-for="lc in linearGradient" :key="lc[0]"
|
<stop v-for="lc in linearGradient" :key="lc[0]"
|
||||||
:offset="`${lc[0]}%`"
|
:offset="lc[0]"
|
||||||
:stop-color="lc[1]" />
|
:stop-color="lc[1]" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
|
|
@ -22,8 +22,8 @@
|
||||||
fill="transparent"
|
fill="transparent"
|
||||||
:stroke-width="mergedConfig ? mergedConfig.borderWidth : '0'"
|
:stroke-width="mergedConfig ? mergedConfig.borderWidth : '0'"
|
||||||
:stroke="`url(#${gradientId1})`"
|
:stroke="`url(#${gradientId1})`"
|
||||||
:width="rectWidth > 0 ? rectWidth : 0"
|
:width="rectWidth"
|
||||||
:height="rectHeight > 0 ? rectHeight : 0"
|
:height="rectHeight"
|
||||||
/>
|
/>
|
||||||
<polyline
|
<polyline
|
||||||
:stroke-width="polylineWidth"
|
:stroke-width="polylineWidth"
|
||||||
|
|
@ -44,14 +44,12 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { uuid } from '../../../util/index'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvPercentPond',
|
name: 'PercentPond',
|
||||||
props: {
|
props: {
|
||||||
config: {
|
config: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
|
@ -59,10 +57,9 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
const id = uuid()
|
|
||||||
return {
|
return {
|
||||||
gradientId1: `percent-pond-gradientId1-${id}`,
|
gradientId1: `percent-pond-gradientId1-${(new Date()).getTime()}`,
|
||||||
gradientId2: `percent-pond-gradientId2-${id}`,
|
gradientId2: `percent-pond-gradientId2-${(new Date()).getTime()}`,
|
||||||
|
|
||||||
width: 0,
|
width: 0,
|
||||||
height: 0,
|
height: 0,
|
||||||
|
|
@ -75,10 +72,9 @@ export default {
|
||||||
*/
|
*/
|
||||||
value: 0,
|
value: 0,
|
||||||
/**
|
/**
|
||||||
* @description Colors (hex|rgb|rgba|color keywords)
|
* @description Colors (Hex|rgb|rgba)
|
||||||
* @type {Array<String>}
|
* @type {Array<String>}
|
||||||
* @default colors = ['#00BAFF', '#3DE7C9']
|
* @default colors = ['#00BAFF', '#3DE7C9']
|
||||||
* @example colors = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
|
|
||||||
*/
|
*/
|
||||||
colors: ['#3DE7C9', '#00BAFF'],
|
colors: ['#3DE7C9', '#00BAFF'],
|
||||||
/**
|
/**
|
||||||
|
|
@ -236,13 +232,13 @@ export default {
|
||||||
|
|
||||||
await $nextTick()
|
await $nextTick()
|
||||||
|
|
||||||
const { clientWidth, clientHeight } = $refs['percent-pond']
|
const dom = $refs['percent-pond']
|
||||||
|
|
||||||
this.width = clientWidth
|
this.width = dom.clientWidth
|
||||||
this.height = clientHeight
|
this.height = dom.clientHeight
|
||||||
},
|
},
|
||||||
mergeConfig () {
|
mergeConfig () {
|
||||||
const { config, defaultConfig } = this
|
let { config, defaultConfig } = this
|
||||||
|
|
||||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||||
}
|
}
|
||||||
|
|
@ -253,4 +249,22 @@ export default {
|
||||||
init()
|
init()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.dv-percent-pond {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
polyline {
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-anchor: middle;
|
||||||
|
dominant-baseline: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dv-scroll-board" :ref="ref">
|
<div class="dv-scroll-board" :ref="ref">
|
||||||
<div class="header" v-if="header.length && mergedConfig" :style="`background-color: ${mergedConfig.headerBGC};`">
|
<div class="header" v-if="header.length && mergedConfig">
|
||||||
<div
|
<div
|
||||||
class="header-item"
|
class="header-item"
|
||||||
v-for="(headerItem, i) in header"
|
v-for="(headerItem, i) in header"
|
||||||
:key="`${headerItem}${i}`"
|
:key="headerItem + i"
|
||||||
:style="`
|
:style="`
|
||||||
|
background-color: ${mergedConfig.headerBGC};
|
||||||
height: ${mergedConfig.headerHeight}px;
|
height: ${mergedConfig.headerHeight}px;
|
||||||
line-height: ${mergedConfig.headerHeight}px;
|
line-height: ${mergedConfig.headerHeight}px;
|
||||||
width: ${widths[i]}px;
|
width: ${widths[i]}px;
|
||||||
|
|
@ -18,12 +19,12 @@
|
||||||
<div
|
<div
|
||||||
v-if="mergedConfig"
|
v-if="mergedConfig"
|
||||||
class="rows"
|
class="rows"
|
||||||
:style="`height: ${height - (header.length ? mergedConfig.headerHeight : 0)}px;`"
|
:style="`height: calc(100% - ${header.length ? mergedConfig.headerHeight : 0}px);`"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="row-item"
|
class="row-item"
|
||||||
v-for="(row, ri) in rows"
|
v-for="(row, ri) in rows"
|
||||||
:key="`${row.toString()}${row.scroll}`"
|
:key="row.toString() + row.scroll"
|
||||||
:style="`
|
:style="`
|
||||||
height: ${heights[ri]}px;
|
height: ${heights[ri]}px;
|
||||||
line-height: ${heights[ri]}px;
|
line-height: ${heights[ri]}px;
|
||||||
|
|
@ -33,13 +34,11 @@
|
||||||
<div
|
<div
|
||||||
class="ceil"
|
class="ceil"
|
||||||
v-for="(ceil, ci) in row.ceils"
|
v-for="(ceil, ci) in row.ceils"
|
||||||
:key="`${ceil}${ri}${ci}`"
|
:key="ceil + ri + ci"
|
||||||
:style="`width: ${widths[ci]}px;`"
|
:style="`width: ${widths[ci]}px;`"
|
||||||
:align="aligns[ci]"
|
:align="aligns[ci]"
|
||||||
v-html="ceil"
|
v-html="ceil"
|
||||||
@click="emitEvent('click', ri, ci, row, ceil)"
|
@click="emitEvent(ri, ci, row, ceil)"
|
||||||
@mouseenter="handleHover(true, ri, ci, row, ceil)"
|
|
||||||
@mouseleave="handleHover(false)"
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -48,14 +47,14 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import autoResize from '../../../mixin/autoResize'
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvScrollBoard',
|
name: 'ScrollBoard',
|
||||||
mixins: [autoResize],
|
mixins: [autoResize],
|
||||||
props: {
|
props: {
|
||||||
config: {
|
config: {
|
||||||
|
|
@ -136,26 +135,13 @@ export default {
|
||||||
* @default index = false
|
* @default index = false
|
||||||
*/
|
*/
|
||||||
index: false,
|
index: false,
|
||||||
/**
|
|
||||||
* @description index Header
|
|
||||||
* @type {String}
|
|
||||||
* @default indexHeader = '#'
|
|
||||||
*/
|
|
||||||
indexHeader: '#',
|
|
||||||
/**
|
/**
|
||||||
* @description Carousel type
|
* @description Carousel type
|
||||||
* @type {String}
|
* @type {String}
|
||||||
* @default carousel = 'single'
|
* @default carousel = 'single'
|
||||||
* @example carousel = 'single' | 'page'
|
* @example carousel = 'single' | 'page'
|
||||||
*/
|
*/
|
||||||
carousel: 'single',
|
carousel: 'single'
|
||||||
/**
|
|
||||||
* @description Pause scroll when mouse hovered
|
|
||||||
* @type {Boolean}
|
|
||||||
* @default hoverPause = true
|
|
||||||
* @example hoverPause = true | false
|
|
||||||
*/
|
|
||||||
hoverPause: true
|
|
||||||
},
|
},
|
||||||
|
|
||||||
mergedConfig: null,
|
mergedConfig: null,
|
||||||
|
|
@ -176,11 +162,7 @@ export default {
|
||||||
|
|
||||||
animationIndex: 0,
|
animationIndex: 0,
|
||||||
|
|
||||||
animationHandler: '',
|
animationHandler: ''
|
||||||
|
|
||||||
updater: 0,
|
|
||||||
|
|
||||||
needCalc: false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
@ -189,24 +171,10 @@ export default {
|
||||||
|
|
||||||
stopAnimation()
|
stopAnimation()
|
||||||
|
|
||||||
this.animationIndex = 0
|
|
||||||
|
|
||||||
calcData()
|
calcData()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleHover(enter, ri, ci, row, ceil){
|
|
||||||
const { mergedConfig, emitEvent, stopAnimation, animation } = this
|
|
||||||
|
|
||||||
if (enter) emitEvent('mouseover', ri, ci, row, ceil)
|
|
||||||
if (!mergedConfig.hoverPause) return
|
|
||||||
|
|
||||||
if (enter) {
|
|
||||||
stopAnimation()
|
|
||||||
} else {
|
|
||||||
animation(true)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
afterAutoResizeMixinInit () {
|
afterAutoResizeMixinInit () {
|
||||||
const { calcData } = this
|
const { calcData } = this
|
||||||
|
|
||||||
|
|
@ -248,7 +216,7 @@ export default {
|
||||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||||
},
|
},
|
||||||
calcHeaderData () {
|
calcHeaderData () {
|
||||||
let { header, index, indexHeader} = this.mergedConfig
|
let { header, index } = this.mergedConfig
|
||||||
|
|
||||||
if (!header.length) {
|
if (!header.length) {
|
||||||
this.header = []
|
this.header = []
|
||||||
|
|
@ -258,7 +226,7 @@ export default {
|
||||||
|
|
||||||
header = [...header]
|
header = [...header]
|
||||||
|
|
||||||
if (index) header.unshift(indexHeader)
|
if (index) header.unshift('#')
|
||||||
|
|
||||||
this.header = header
|
this.header = header
|
||||||
},
|
},
|
||||||
|
|
@ -269,7 +237,7 @@ export default {
|
||||||
data = data.map((row, i) => {
|
data = data.map((row, i) => {
|
||||||
row = [...row]
|
row = [...row]
|
||||||
|
|
||||||
const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</span>`
|
const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</spand>`
|
||||||
|
|
||||||
row.unshift(indexTag)
|
row.unshift(indexTag)
|
||||||
|
|
||||||
|
|
@ -293,16 +261,11 @@ export default {
|
||||||
calcWidths () {
|
calcWidths () {
|
||||||
const { width, mergedConfig, rowsData } = this
|
const { width, mergedConfig, rowsData } = this
|
||||||
|
|
||||||
const { columnWidth, header } = mergedConfig
|
const { columnWidth } = mergedConfig
|
||||||
|
|
||||||
const usedWidth = columnWidth.reduce((all, w) => all + w, 0)
|
const usedWidth = columnWidth.reduce((all, w) => all + w, 0)
|
||||||
|
|
||||||
let columnNum = 0
|
const columnNum = rowsData[0] ? rowsData[0].ceils.length : 0
|
||||||
if (rowsData[0]) {
|
|
||||||
columnNum = rowsData[0].ceils.length
|
|
||||||
} else if (header.length) {
|
|
||||||
columnNum = header.length
|
|
||||||
}
|
|
||||||
|
|
||||||
const avgWidth = (width - usedWidth) / (columnNum - columnWidth.length)
|
const avgWidth = (width - usedWidth) / (columnNum - columnWidth.length)
|
||||||
|
|
||||||
|
|
@ -337,15 +300,7 @@ export default {
|
||||||
this.aligns = deepMerge(aligns, align)
|
this.aligns = deepMerge(aligns, align)
|
||||||
},
|
},
|
||||||
async animation (start = false) {
|
async animation (start = false) {
|
||||||
const { needCalc, calcHeights, calcRowsData } = this
|
let { avgHeight, animationIndex, mergedConfig, rowsData, animation } = this
|
||||||
|
|
||||||
if (needCalc) {
|
|
||||||
calcRowsData()
|
|
||||||
calcHeights()
|
|
||||||
this.needCalc = false
|
|
||||||
}
|
|
||||||
|
|
||||||
let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this
|
|
||||||
|
|
||||||
const { waitTime, carousel, rowNum } = mergedConfig
|
const { waitTime, carousel, rowNum } = mergedConfig
|
||||||
|
|
||||||
|
|
@ -353,21 +308,17 @@ export default {
|
||||||
|
|
||||||
if (rowNum >= rowLength) return
|
if (rowNum >= rowLength) return
|
||||||
|
|
||||||
if (start) {
|
if (start) await new Promise(resolve => setTimeout(resolve, waitTime))
|
||||||
await new Promise(resolve => setTimeout(resolve, waitTime))
|
|
||||||
if (updater !== this.updater) return
|
|
||||||
}
|
|
||||||
|
|
||||||
const animationNum = carousel === 'single' ? 1 : rowNum
|
const animationNum = carousel === 'single' ? 1 : rowNum
|
||||||
|
|
||||||
let rows = rowsData.slice(animationIndex)
|
let rows = rowsData.slice(animationIndex)
|
||||||
rows.push(...rowsData.slice(0, animationIndex))
|
rows.push(...rowsData.slice(0, animationIndex))
|
||||||
|
|
||||||
this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
|
this.rows = rows
|
||||||
this.heights = new Array(rowLength).fill(avgHeight)
|
this.heights = new Array(rowLength).fill(avgHeight)
|
||||||
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 300))
|
await new Promise(resolve => setTimeout(resolve, 300))
|
||||||
if (updater !== this.updater) return
|
|
||||||
|
|
||||||
this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
|
this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
|
||||||
|
|
||||||
|
|
@ -380,36 +331,21 @@ export default {
|
||||||
this.animationHandler = setTimeout(animation, waitTime - 300)
|
this.animationHandler = setTimeout(animation, waitTime - 300)
|
||||||
},
|
},
|
||||||
stopAnimation () {
|
stopAnimation () {
|
||||||
const { animationHandler, updater } = this
|
const { animationHandler } = this
|
||||||
|
|
||||||
this.updater = (updater + 1) % 999999
|
|
||||||
|
|
||||||
if (!animationHandler) return
|
if (!animationHandler) return
|
||||||
|
|
||||||
clearTimeout(animationHandler)
|
clearTimeout(animationHandler)
|
||||||
},
|
},
|
||||||
emitEvent (type, ri, ci, row, ceil) {
|
emitEvent (ri, ci, row, ceil) {
|
||||||
const { ceils, rowIndex } = row
|
const { ceils, rowIndex } = row
|
||||||
|
|
||||||
this.$emit(type, {
|
this.$emit('click', {
|
||||||
row: ceils,
|
row: ceils,
|
||||||
ceil,
|
ceil,
|
||||||
rowIndex,
|
rowIndex,
|
||||||
columnIndex: ci
|
columnIndex: ci
|
||||||
})
|
})
|
||||||
},
|
|
||||||
updateRows(rows, animationIndex) {
|
|
||||||
const { mergedConfig, animationHandler, animation } = this
|
|
||||||
|
|
||||||
this.mergedConfig = {
|
|
||||||
...mergedConfig,
|
|
||||||
data: [...rows]
|
|
||||||
}
|
|
||||||
|
|
||||||
this.needCalc = true
|
|
||||||
|
|
||||||
if (typeof animationIndex === 'number') this.animationIndex = animationIndex
|
|
||||||
if (!animationHandler) animation(true)
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
destroyed () {
|
destroyed () {
|
||||||
|
|
@ -421,20 +357,20 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
.text {
|
||||||
|
padding: 0 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
.dv-scroll-board {
|
.dv-scroll-board {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
.text {
|
|
||||||
padding: 0 10px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
@ -8,8 +8,8 @@
|
||||||
>
|
>
|
||||||
<div class="ranking-info">
|
<div class="ranking-info">
|
||||||
<div class="rank">No.{{ item.ranking }}</div>
|
<div class="rank">No.{{ item.ranking }}</div>
|
||||||
<div class="info-name" v-html="item.name" />
|
<div class="info-name">{{ item.name }}</div>
|
||||||
<div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
|
<div class="ranking-value">{{ item.value }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ranking-column">
|
<div class="ranking-column">
|
||||||
|
|
@ -25,14 +25,14 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import autoResize from '../../../mixin/autoResize'
|
import autoResize from '../../mixins/autoResize.js'
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvScrollRankingBoard',
|
name: 'ScrollRankingBoard',
|
||||||
mixins: [autoResize],
|
mixins: [autoResize],
|
||||||
props: {
|
props: {
|
||||||
config: {
|
config: {
|
||||||
|
|
@ -69,26 +69,7 @@ export default {
|
||||||
* @default carousel = 'single'
|
* @default carousel = 'single'
|
||||||
* @example carousel = 'single' | 'page'
|
* @example carousel = 'single' | 'page'
|
||||||
*/
|
*/
|
||||||
carousel: 'single',
|
carousel: 'single'
|
||||||
/**
|
|
||||||
* @description Value unit
|
|
||||||
* @type {String}
|
|
||||||
* @default unit = ''
|
|
||||||
* @example unit = 'ton'
|
|
||||||
*/
|
|
||||||
unit: '',
|
|
||||||
/**
|
|
||||||
* @description Auto sort by value
|
|
||||||
* @type {Boolean}
|
|
||||||
* @default sort = true
|
|
||||||
*/
|
|
||||||
sort: true,
|
|
||||||
/**
|
|
||||||
* @description Value formatter
|
|
||||||
* @type {Function}
|
|
||||||
* @default valueFormatter = null
|
|
||||||
*/
|
|
||||||
valueFormatter: null
|
|
||||||
},
|
},
|
||||||
|
|
||||||
mergedConfig: null,
|
mergedConfig: null,
|
||||||
|
|
@ -101,9 +82,7 @@ export default {
|
||||||
|
|
||||||
animationIndex: 0,
|
animationIndex: 0,
|
||||||
|
|
||||||
animationHandler: '',
|
animationHandler: ''
|
||||||
|
|
||||||
updater: 0
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
|
@ -149,29 +128,19 @@ export default {
|
||||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||||
},
|
},
|
||||||
calcRowsData () {
|
calcRowsData () {
|
||||||
let { data, rowNum, sort } = this.mergedConfig
|
let { data, rowNum } = this.mergedConfig
|
||||||
|
|
||||||
sort && data.sort(({ value: a }, { value: b }) => {
|
data.sort(({ value: a }, { value: b }) => {
|
||||||
if (a > b) return -1
|
if (a > b) return -1
|
||||||
if (a < b) return 1
|
if (a < b) return 1
|
||||||
if (a === b) return 0
|
if (a === b) return 0
|
||||||
})
|
})
|
||||||
|
|
||||||
const value = data.map(({ value }) => value)
|
const value = data.map(({ value }) => value)
|
||||||
|
|
||||||
const min = Math.min(...value) || 0
|
|
||||||
|
|
||||||
// abs of min
|
|
||||||
const minAbs = Math.abs(min)
|
|
||||||
|
|
||||||
const max = Math.max(...value) || 0
|
const max = Math.max(...value) || 0
|
||||||
|
|
||||||
// abs of max
|
data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: row.value / max * 100 }))
|
||||||
const maxAbs = Math.abs(max)
|
|
||||||
|
|
||||||
const total = max + minAbs
|
|
||||||
|
|
||||||
data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: (row.value + minAbs) / total * 100 }))
|
|
||||||
|
|
||||||
const rowLength = data.length
|
const rowLength = data.length
|
||||||
|
|
||||||
|
|
@ -196,7 +165,7 @@ export default {
|
||||||
if (!onresize) this.heights = new Array(data.length).fill(avgHeight)
|
if (!onresize) this.heights = new Array(data.length).fill(avgHeight)
|
||||||
},
|
},
|
||||||
async animation (start = false) {
|
async animation (start = false) {
|
||||||
let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this
|
let { avgHeight, animationIndex, mergedConfig, rowsData, animation } = this
|
||||||
|
|
||||||
const { waitTime, carousel, rowNum } = mergedConfig
|
const { waitTime, carousel, rowNum } = mergedConfig
|
||||||
|
|
||||||
|
|
@ -204,21 +173,17 @@ export default {
|
||||||
|
|
||||||
if (rowNum >= rowLength) return
|
if (rowNum >= rowLength) return
|
||||||
|
|
||||||
if (start) {
|
if (start) await new Promise(resolve => setTimeout(resolve, waitTime))
|
||||||
await new Promise(resolve => setTimeout(resolve, waitTime))
|
|
||||||
if (updater !== this.updater) return
|
|
||||||
}
|
|
||||||
|
|
||||||
const animationNum = carousel === 'single' ? 1 : rowNum
|
const animationNum = carousel === 'single' ? 1 : rowNum
|
||||||
|
|
||||||
let rows = rowsData.slice(animationIndex)
|
let rows = rowsData.slice(animationIndex)
|
||||||
rows.push(...rowsData.slice(0, animationIndex))
|
rows.push(...rowsData.slice(0, animationIndex))
|
||||||
|
|
||||||
this.rows = rows.slice(0, rowNum + 1)
|
this.rows = rows
|
||||||
this.heights = new Array(rowLength).fill(avgHeight)
|
this.heights = new Array(rowLength).fill(avgHeight)
|
||||||
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 300))
|
await new Promise(resolve => setTimeout(resolve, 300))
|
||||||
if (updater !== this.updater) return
|
|
||||||
|
|
||||||
this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
|
this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
|
||||||
|
|
||||||
|
|
@ -231,14 +196,12 @@ export default {
|
||||||
this.animationHandler = setTimeout(animation, waitTime - 300)
|
this.animationHandler = setTimeout(animation, waitTime - 300)
|
||||||
},
|
},
|
||||||
stopAnimation () {
|
stopAnimation () {
|
||||||
const { animationHandler, updater } = this
|
const { animationHandler } = this
|
||||||
|
|
||||||
this.updater = (updater + 1) % 999999
|
|
||||||
|
|
||||||
if (!animationHandler) return
|
if (!animationHandler) return
|
||||||
|
|
||||||
clearTimeout(animationHandler)
|
clearTimeout(animationHandler)
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
destroyed () {
|
destroyed () {
|
||||||
const { stopAnimation } = this
|
const { stopAnimation } = this
|
||||||
|
|
@ -301,13 +264,13 @@ export default {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
background: radial-gradient(rgb(40, 248, 255) 5%, transparent 80%);
|
background: radial-gradient(rgb(40, 248, 255) 5%, transparent 80%);
|
||||||
animation: shine 3s ease-in-out infinite alternate;
|
animation: shine 3s ease-in-out infinite;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shine {
|
@keyframes shine {
|
||||||
80% {
|
85% {
|
||||||
left: 0%;
|
left: 0%;
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
}
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dv-water-pond-level">
|
<div class="dv-water-pond-level">
|
||||||
<svg v-if="renderer">
|
<svg v-if="render">
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="0%" y2="100%">
|
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||||
<stop v-for="lc in svgBorderGradient" :key="lc[0]"
|
<stop v-for="lc in svgBorderGradient" :key="lc[0]"
|
||||||
|
|
@ -10,27 +10,28 @@
|
||||||
</defs>
|
</defs>
|
||||||
|
|
||||||
<text
|
<text
|
||||||
|
v-if="render"
|
||||||
:stroke="`url(#${gradientId})`"
|
:stroke="`url(#${gradientId})`"
|
||||||
:fill="`url(#${gradientId})`"
|
:fill="`url(#${gradientId})`"
|
||||||
:x="renderer.area[0] / 2 + 8"
|
:x="render.area[0] / 2 + 8"
|
||||||
:y="renderer.area[1] / 2 + 8"
|
:y="render.area[1] / 2 + 8"
|
||||||
>
|
>
|
||||||
{{ details }}
|
{{ details }}
|
||||||
</text>
|
</text>
|
||||||
|
|
||||||
<ellipse v-if="!shape || shape === 'round'"
|
<ellipse v-if="!shape || shape === 'round'"
|
||||||
:cx="renderer.area[0] / 2 + 8"
|
:cx="render.area[0] / 2 + 8"
|
||||||
:cy="renderer.area[1] / 2 + 8"
|
:cy="render.area[1] / 2 + 8"
|
||||||
:rx="renderer.area[0] / 2 + 5"
|
:rx="render.area[0] / 2 + 5"
|
||||||
:ry="renderer.area[1] / 2 + 5"
|
:ry="render.area[1] / 2 + 5"
|
||||||
:stroke="`url(#${gradientId})`" />
|
:stroke="`url(#${gradientId})`" />
|
||||||
|
|
||||||
<rect v-else
|
<rect v-else
|
||||||
x="2" y="2"
|
x="2" y="2"
|
||||||
:rx="shape === 'roundRect' ? 10 : 0"
|
:rx="shape === 'roundRect' ? 10 : 0"
|
||||||
:ry="shape === 'roundRect' ? 10 : 0"
|
:ry="shape === 'roundRect' ? 10 : 0"
|
||||||
:width="renderer.area[0] + 12"
|
:width="render.area[0] + 12"
|
||||||
:height="renderer.area[1] + 12"
|
:height="render.area[1] + 12"
|
||||||
:stroke="`url(#${gradientId})`" />
|
:stroke="`url(#${gradientId})`" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
|
@ -39,8 +40,6 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { uuid } from '../../../util/index'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||||
|
|
@ -48,15 +47,14 @@ import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||||
import CRender from '@jiaminghi/c-render'
|
import CRender from '@jiaminghi/c-render'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvWaterLevelPond',
|
name: 'waterLevelPond',
|
||||||
props: {
|
props: {
|
||||||
config: Object,
|
config: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
const id = uuid()
|
|
||||||
return {
|
return {
|
||||||
gradientId: `water-level-pond-${id}`,
|
gradientId: `water-level-pond-${(new Date()).getTime()}`,
|
||||||
|
|
||||||
defaultConfig: {
|
defaultConfig: {
|
||||||
/**
|
/**
|
||||||
|
|
@ -92,10 +90,9 @@ export default {
|
||||||
*/
|
*/
|
||||||
waveOpacity: 0.4,
|
waveOpacity: 0.4,
|
||||||
/**
|
/**
|
||||||
* @description Colors (hex|rgb|rgba|color keywords)
|
* @description Colors (Hex|rgb|rgba)
|
||||||
* @type {Array<String>}
|
* @type {Array<String>}
|
||||||
* @default colors = ['#00BAFF', '#3DE7C9']
|
* @default colors = ['#00BAFF', '#3DE7C9']
|
||||||
* @example colors = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
|
|
||||||
*/
|
*/
|
||||||
colors: ['#3DE7C9', '#00BAFF'],
|
colors: ['#3DE7C9', '#00BAFF'],
|
||||||
/**
|
/**
|
||||||
|
|
@ -108,7 +105,7 @@ export default {
|
||||||
|
|
||||||
mergedConfig: {},
|
mergedConfig: {},
|
||||||
|
|
||||||
renderer: null,
|
render: null,
|
||||||
|
|
||||||
svgBorderGradient: [],
|
svgBorderGradient: [],
|
||||||
|
|
||||||
|
|
@ -141,9 +138,9 @@ export default {
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
config () {
|
config () {
|
||||||
const { calcData, renderer } = this
|
const { calcData, render } = this
|
||||||
|
|
||||||
renderer.delAllGraph()
|
render.delAllGraph()
|
||||||
|
|
||||||
this.waves = []
|
this.waves = []
|
||||||
|
|
||||||
|
|
@ -163,7 +160,7 @@ export default {
|
||||||
initRender () {
|
initRender () {
|
||||||
const { $refs } = this
|
const { $refs } = this
|
||||||
|
|
||||||
this.renderer = new CRender($refs['water-pond-level'])
|
this.render = new CRender($refs['water-pond-level'])
|
||||||
},
|
},
|
||||||
calcData () {
|
calcData () {
|
||||||
const { mergeConfig, calcSvgBorderGradient, calcDetails } = this
|
const { mergeConfig, calcSvgBorderGradient, calcDetails } = this
|
||||||
|
|
@ -208,12 +205,12 @@ export default {
|
||||||
this.details = formatter.replace('{value}', maxValue)
|
this.details = formatter.replace('{value}', maxValue)
|
||||||
},
|
},
|
||||||
addWave () {
|
addWave () {
|
||||||
const { renderer, getWaveShapes, getWaveStyle, drawed } = this
|
const { render, getWaveShapes, getWaveStyle, drawed } = this
|
||||||
|
|
||||||
const shapes = getWaveShapes()
|
const shapes = getWaveShapes()
|
||||||
const style = getWaveStyle()
|
const style = getWaveStyle()
|
||||||
|
|
||||||
this.waves = shapes.map(shape => renderer.add({
|
this.waves = shapes.map(shape => render.add({
|
||||||
name: 'smoothline',
|
name: 'smoothline',
|
||||||
animationFrame: 300,
|
animationFrame: 300,
|
||||||
shape,
|
shape,
|
||||||
|
|
@ -222,11 +219,11 @@ export default {
|
||||||
}))
|
}))
|
||||||
},
|
},
|
||||||
getWaveShapes () {
|
getWaveShapes () {
|
||||||
const { mergedConfig, renderer, mergeOffset } = this
|
const { mergedConfig, render, mergeOffset } = this
|
||||||
|
|
||||||
const { waveNum, waveHeight, data } = mergedConfig
|
const { waveNum, waveHeight, data } = mergedConfig
|
||||||
|
|
||||||
const [w, h] = renderer.area
|
const [w, h] = render.area
|
||||||
|
|
||||||
const pointsNum = waveNum * 4 + 4
|
const pointsNum = waveNum * 4 + 4
|
||||||
|
|
||||||
|
|
@ -252,9 +249,9 @@ export default {
|
||||||
return [x + ox, y + oy]
|
return [x + ox, y + oy]
|
||||||
},
|
},
|
||||||
getWaveStyle () {
|
getWaveStyle () {
|
||||||
const { renderer, mergedConfig } = this
|
const { render, mergedConfig } = this
|
||||||
|
|
||||||
const h = renderer.area[1]
|
const h = render.area[1]
|
||||||
|
|
||||||
return {
|
return {
|
||||||
gradientColor: mergedConfig.colors,
|
gradientColor: mergedConfig.colors,
|
||||||
|
|
@ -279,13 +276,13 @@ export default {
|
||||||
ctx.fill()
|
ctx.fill()
|
||||||
},
|
},
|
||||||
async animationWave (repeat = 1) {
|
async animationWave (repeat = 1) {
|
||||||
const { waves, renderer, animation } = this
|
const { waves, render, animation } = this
|
||||||
|
|
||||||
if (animation) return
|
if (animation) return
|
||||||
|
|
||||||
this.animation = true
|
this.animation = true
|
||||||
|
|
||||||
const w = renderer.area[0]
|
const w = render.area[0]
|
||||||
|
|
||||||
waves.forEach(graph => {
|
waves.forEach(graph => {
|
||||||
graph.attr('style', { translate: [0, 0] })
|
graph.attr('style', { translate: [0, 0] })
|
||||||
|
|
@ -295,11 +292,11 @@ export default {
|
||||||
}, true)
|
}, true)
|
||||||
})
|
})
|
||||||
|
|
||||||
await renderer.launchAnimation()
|
await render.launchAnimation()
|
||||||
|
|
||||||
this.animation = false
|
this.animation = false
|
||||||
|
|
||||||
if (!renderer.graphs.length) return
|
if (!render.graphs.length) return
|
||||||
|
|
||||||
this.animationWave(repeat + 1)
|
this.animationWave(repeat + 1)
|
||||||
}
|
}
|
||||||
|
|
@ -310,9 +307,9 @@ export default {
|
||||||
init()
|
init()
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
const { renderer } = this
|
const { render } = this
|
||||||
|
|
||||||
renderer.delAllGraph()
|
render.delAllGraph()
|
||||||
|
|
||||||
this.waves = []
|
this.waves = []
|
||||||
}
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB |
|
|
@ -1,81 +0,0 @@
|
||||||
const { fileForEach } = require('@jiaminghi/fs')
|
|
||||||
const Client = require('ftp')
|
|
||||||
const print = require('./plugin/print')
|
|
||||||
const { emptyDir, put } = require('./plugin/ftp')
|
|
||||||
const getNodeParams = require('./plugin/nodeParams')
|
|
||||||
|
|
||||||
let config = null
|
|
||||||
|
|
||||||
try {
|
|
||||||
config = require('./config')
|
|
||||||
} catch (err) {
|
|
||||||
void 0
|
|
||||||
}
|
|
||||||
|
|
||||||
const DIST_PATH = './dist/'
|
|
||||||
const FTP_PATH = './datav/'
|
|
||||||
|
|
||||||
const ftp = new Client()
|
|
||||||
|
|
||||||
ftp.on('ready', async foo => {
|
|
||||||
print.tip('FTP connected!')
|
|
||||||
|
|
||||||
const isEmpty = await emptyDir(ftp, FTP_PATH)
|
|
||||||
|
|
||||||
if (!isEmpty) {
|
|
||||||
print.error('Exception in emptyDir!')
|
|
||||||
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
let status = true
|
|
||||||
|
|
||||||
await fileForEach(DIST_PATH, async src => {
|
|
||||||
const destPath = FTP_PATH + src.split('/').slice(-1)[0]
|
|
||||||
|
|
||||||
print.tip('Upload: ' + destPath)
|
|
||||||
|
|
||||||
if (!await put(ftp, src, destPath)) {
|
|
||||||
status = false
|
|
||||||
|
|
||||||
print.error('Exception in upload ' + destPath)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
if (status) {
|
|
||||||
print.yellow('-------------------------------------')
|
|
||||||
print.success(' Automatic Deployment Success! ')
|
|
||||||
print.yellow('-------------------------------------')
|
|
||||||
}
|
|
||||||
|
|
||||||
ftp.destroy()
|
|
||||||
})
|
|
||||||
|
|
||||||
ftp.on('greeting', foo => {
|
|
||||||
print.tip('FTP greeting')
|
|
||||||
})
|
|
||||||
ftp.on('close', foo => {
|
|
||||||
print.tip('FTP close')
|
|
||||||
})
|
|
||||||
ftp.on('end', foo => {
|
|
||||||
print.tip('FTP end')
|
|
||||||
})
|
|
||||||
ftp.on('error', foo => {
|
|
||||||
print.tip('FTP error')
|
|
||||||
})
|
|
||||||
|
|
||||||
const { host, user, pass } = config || getNodeParams()
|
|
||||||
|
|
||||||
if (!host || !user || !pass) {
|
|
||||||
print.error('Upload Dist to FTP Missing Parameters!')
|
|
||||||
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
print.tip('Start Upload!')
|
|
||||||
|
|
||||||
ftp.connect({
|
|
||||||
host,
|
|
||||||
user,
|
|
||||||
password: pass
|
|
||||||
})
|
|
||||||
|
|
@ -1,99 +0,0 @@
|
||||||
async function getList (ftp, src) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
ftp.list(src, (err, list) => {
|
|
||||||
if (err) {
|
|
||||||
console.error(err)
|
|
||||||
|
|
||||||
resolve(false)
|
|
||||||
} else {
|
|
||||||
resolve(list)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async function rmDir (ftp, src, recusive = true) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
ftp.rmdir(src, recusive, err => {
|
|
||||||
if (err) {
|
|
||||||
console.error(err)
|
|
||||||
|
|
||||||
resolve(false)
|
|
||||||
} else {
|
|
||||||
resolve(true)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async function deleteFile (ftp, src) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
ftp.delete(src, err => {
|
|
||||||
if (err) {
|
|
||||||
console.error(err)
|
|
||||||
|
|
||||||
resolve(false)
|
|
||||||
} else {
|
|
||||||
resolve(true)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async function emptyDir (ftp, src, except = []) {
|
|
||||||
const list = await getList(ftp, src)
|
|
||||||
|
|
||||||
for (let i = 0, listNum = list.length; i < listNum; i++) {
|
|
||||||
const { type, name } = list[i]
|
|
||||||
|
|
||||||
if (type === 'd' && (name === '.' || name === '..')) continue
|
|
||||||
if (except.find(n => n === name)) continue
|
|
||||||
|
|
||||||
const fullSrc = `${src}${name}`
|
|
||||||
|
|
||||||
if (type === 'd') {
|
|
||||||
if (!await rmDir(ftp, fullSrc, true)) return false
|
|
||||||
} else {
|
|
||||||
if (!await deleteFile(ftp, fullSrc)) return false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
|
|
||||||
async function put (ftp, src, dest) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
ftp.put(src, dest, err => {
|
|
||||||
if (err) {
|
|
||||||
console.error(err)
|
|
||||||
|
|
||||||
resolve(false)
|
|
||||||
} else {
|
|
||||||
resolve(true)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
async function mkDir (ftp, src, recusive = true) {
|
|
||||||
return new Promise(resolve => {
|
|
||||||
ftp.mkdir(src, recusive, err => {
|
|
||||||
if (err) {
|
|
||||||
console.error(err)
|
|
||||||
|
|
||||||
resolve(false)
|
|
||||||
} else {
|
|
||||||
resolve(true)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
put,
|
|
||||||
rmDir,
|
|
||||||
mkDir,
|
|
||||||
getList,
|
|
||||||
emptyDir,
|
|
||||||
deleteFile
|
|
||||||
}
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
function getNodeParams () {
|
|
||||||
const params = {}
|
|
||||||
|
|
||||||
process.argv.slice(2).forEach(param => {
|
|
||||||
param = param.split('=')
|
|
||||||
|
|
||||||
params[param[0]] = param[1]
|
|
||||||
})
|
|
||||||
|
|
||||||
return params
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = getNodeParams
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
const print = {
|
|
||||||
log (info) {
|
|
||||||
console.log(info)
|
|
||||||
},
|
|
||||||
warn (info) {
|
|
||||||
console.log('\033[31;33m' + info + '\033[0m')
|
|
||||||
},
|
|
||||||
error (info) {
|
|
||||||
console.log('\033[31;40m' + info + '\033[0m')
|
|
||||||
},
|
|
||||||
tip (info) {
|
|
||||||
console.log('\033[40;32m' + info + '\033[0m')
|
|
||||||
},
|
|
||||||
success (info) {
|
|
||||||
console.log('\033[42;30m' + info + '\033[0m')
|
|
||||||
},
|
|
||||||
yellow (info) {
|
|
||||||
console.log('\033[31;33m' + info + '\033[0m')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = print
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,5 @@
|
||||||
|
import components from './components/index'
|
||||||
|
|
||||||
|
export default function (Vue) {
|
||||||
|
components(Vue)
|
||||||
|
}
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import './src/main.css'
|
|
||||||
import ActiveRingChart from './src/main.vue'
|
|
||||||
|
|
||||||
export default function (Vue) {
|
|
||||||
Vue.component(ActiveRingChart.name, ActiveRingChart)
|
|
||||||
}
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
.dv-active-ring-chart {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.dv-active-ring-chart .active-ring-chart-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-active-ring-chart .active-ring-info {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.dv-active-ring-chart .active-ring-info .dv-digital-flop {
|
|
||||||
width: 100px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
.dv-active-ring-chart .active-ring-info .active-ring-name {
|
|
||||||
width: 100px;
|
|
||||||
height: 30px;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
@ -1,300 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dv-active-ring-chart">
|
|
||||||
<div class="active-ring-chart-container" ref="active-ring-chart" />
|
|
||||||
<div class="active-ring-info">
|
|
||||||
<dv-digital-flop :config="digitalFlop" />
|
|
||||||
<div class="active-ring-name" :style="fontSize">{{ ringName }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Charts from '@jiaminghi/charts'
|
|
||||||
|
|
||||||
import dvDigitalFlop from '../../digitalFlop/src/main.vue'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DvActiveRingChart',
|
|
||||||
components: {
|
|
||||||
dvDigitalFlop
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
config: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
defaultConfig: {
|
|
||||||
/**
|
|
||||||
* @description Ring radius
|
|
||||||
* @type {String|Number}
|
|
||||||
* @default radius = '50%'
|
|
||||||
* @example radius = '50%' | 100
|
|
||||||
*/
|
|
||||||
radius: '50%',
|
|
||||||
/**
|
|
||||||
* @description Active ring radius
|
|
||||||
* @type {String|Number}
|
|
||||||
* @default activeRadius = '55%'
|
|
||||||
* @example activeRadius = '55%' | 110
|
|
||||||
*/
|
|
||||||
activeRadius: '55%',
|
|
||||||
/**
|
|
||||||
* @description Ring data
|
|
||||||
* @type {Array<Object>}
|
|
||||||
* @default data = [{ name: '', value: 0 }]
|
|
||||||
*/
|
|
||||||
data: [{ name: '', value: 0 }],
|
|
||||||
/**
|
|
||||||
* @description Ring line width
|
|
||||||
* @type {Number}
|
|
||||||
* @default lineWidth = 20
|
|
||||||
*/
|
|
||||||
lineWidth: 20,
|
|
||||||
/**
|
|
||||||
* @description Active time gap (ms)
|
|
||||||
* @type {Number}
|
|
||||||
* @default activeTimeGap = 3000
|
|
||||||
*/
|
|
||||||
activeTimeGap: 3000,
|
|
||||||
/**
|
|
||||||
* @description Ring color (hex|rgb|rgba|color keywords)
|
|
||||||
* @type {Array<String>}
|
|
||||||
* @default color = [Charts Default Color]
|
|
||||||
* @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
|
|
||||||
*/
|
|
||||||
color: [],
|
|
||||||
/**
|
|
||||||
* @description Digital flop style
|
|
||||||
* @type {Object}
|
|
||||||
*/
|
|
||||||
digitalFlopStyle: {
|
|
||||||
fontSize: 25,
|
|
||||||
fill: '#fff'
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* @description Digital flop toFixed
|
|
||||||
* @type {Number}
|
|
||||||
*/
|
|
||||||
digitalFlopToFixed: 0,
|
|
||||||
/**
|
|
||||||
* @description Digital flop unit
|
|
||||||
* @type {String}
|
|
||||||
*/
|
|
||||||
digitalFlopUnit: '',
|
|
||||||
/**
|
|
||||||
* @description CRender animationCurve
|
|
||||||
* @type {String}
|
|
||||||
* @default animationCurve = 'easeOutCubic'
|
|
||||||
*/
|
|
||||||
animationCurve: 'easeOutCubic',
|
|
||||||
/**
|
|
||||||
* @description CRender animationFrame
|
|
||||||
* @type {String}
|
|
||||||
* @default animationFrame = 50
|
|
||||||
*/
|
|
||||||
animationFrame: 50,
|
|
||||||
/**
|
|
||||||
* @description showOriginValue
|
|
||||||
* @type {Boolean}
|
|
||||||
* @default showOriginValue = false
|
|
||||||
*/
|
|
||||||
showOriginValue: false
|
|
||||||
},
|
|
||||||
|
|
||||||
mergedConfig: null,
|
|
||||||
|
|
||||||
chart: null,
|
|
||||||
|
|
||||||
activeIndex: 0,
|
|
||||||
|
|
||||||
animationHandler: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
digitalFlop() {
|
|
||||||
const { mergedConfig, activeIndex } = this
|
|
||||||
|
|
||||||
if (!mergedConfig) return {}
|
|
||||||
|
|
||||||
const {
|
|
||||||
digitalFlopStyle,
|
|
||||||
digitalFlopToFixed,
|
|
||||||
data,
|
|
||||||
showOriginValue,
|
|
||||||
digitalFlopUnit
|
|
||||||
} = mergedConfig
|
|
||||||
|
|
||||||
const value = data.map(({ value }) => value)
|
|
||||||
|
|
||||||
let displayValue
|
|
||||||
|
|
||||||
if (showOriginValue) {
|
|
||||||
displayValue = value[activeIndex]
|
|
||||||
} else {
|
|
||||||
const sum = value.reduce((all, v) => all + v, 0)
|
|
||||||
|
|
||||||
const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
|
|
||||||
|
|
||||||
displayValue = percent
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
content: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
|
|
||||||
number: [displayValue],
|
|
||||||
style: digitalFlopStyle,
|
|
||||||
toFixed: digitalFlopToFixed
|
|
||||||
}
|
|
||||||
},
|
|
||||||
ringName() {
|
|
||||||
const { mergedConfig, activeIndex } = this
|
|
||||||
|
|
||||||
if (!mergedConfig) return ''
|
|
||||||
|
|
||||||
return mergedConfig.data[activeIndex].name
|
|
||||||
},
|
|
||||||
fontSize() {
|
|
||||||
const { mergedConfig } = this
|
|
||||||
|
|
||||||
if (!mergedConfig) return ''
|
|
||||||
|
|
||||||
return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
config() {
|
|
||||||
const { animationHandler, mergeConfig, setRingOption } = this
|
|
||||||
|
|
||||||
clearTimeout(animationHandler)
|
|
||||||
|
|
||||||
this.activeIndex = 0
|
|
||||||
|
|
||||||
mergeConfig()
|
|
||||||
|
|
||||||
setRingOption()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
init() {
|
|
||||||
const { initChart, mergeConfig, setRingOption } = this
|
|
||||||
|
|
||||||
initChart()
|
|
||||||
|
|
||||||
mergeConfig()
|
|
||||||
|
|
||||||
setRingOption()
|
|
||||||
},
|
|
||||||
initChart() {
|
|
||||||
const { $refs } = this
|
|
||||||
|
|
||||||
this.chart = new Charts($refs['active-ring-chart'])
|
|
||||||
},
|
|
||||||
mergeConfig() {
|
|
||||||
const { defaultConfig, config } = this
|
|
||||||
|
|
||||||
this.mergedConfig = deepMerge(
|
|
||||||
deepClone(defaultConfig, true),
|
|
||||||
config || {}
|
|
||||||
)
|
|
||||||
},
|
|
||||||
setRingOption() {
|
|
||||||
const { getRingOption, chart, ringAnimation } = this
|
|
||||||
|
|
||||||
const option = getRingOption()
|
|
||||||
|
|
||||||
chart.setOption(option, true)
|
|
||||||
|
|
||||||
ringAnimation()
|
|
||||||
},
|
|
||||||
getRingOption() {
|
|
||||||
const { mergedConfig, getRealRadius } = this
|
|
||||||
|
|
||||||
const radius = getRealRadius()
|
|
||||||
|
|
||||||
mergedConfig.data.forEach(dataItem => {
|
|
||||||
dataItem.radius = radius
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'pie',
|
|
||||||
...mergedConfig,
|
|
||||||
outsideLabel: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
color: mergedConfig.color
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getRealRadius(active = false) {
|
|
||||||
const { mergedConfig, chart } = this
|
|
||||||
|
|
||||||
const { radius, activeRadius, lineWidth } = mergedConfig
|
|
||||||
|
|
||||||
const maxRadius = Math.min(...chart.render.area) / 2
|
|
||||||
|
|
||||||
const halfLineWidth = lineWidth / 2
|
|
||||||
|
|
||||||
let realRadius = active ? activeRadius : radius
|
|
||||||
|
|
||||||
if (typeof realRadius !== 'number')
|
|
||||||
realRadius = (parseInt(realRadius) / 100) * maxRadius
|
|
||||||
|
|
||||||
const insideRadius = realRadius - halfLineWidth
|
|
||||||
const outSideRadius = realRadius + halfLineWidth
|
|
||||||
|
|
||||||
return [insideRadius, outSideRadius]
|
|
||||||
},
|
|
||||||
ringAnimation() {
|
|
||||||
let { activeIndex, getRingOption, chart, getRealRadius } = this
|
|
||||||
|
|
||||||
const radius = getRealRadius()
|
|
||||||
const active = getRealRadius(true)
|
|
||||||
|
|
||||||
const option = getRingOption()
|
|
||||||
|
|
||||||
const { data } = option.series[0]
|
|
||||||
|
|
||||||
data.forEach((dataItem, i) => {
|
|
||||||
if (i === activeIndex) {
|
|
||||||
dataItem.radius = active
|
|
||||||
} else {
|
|
||||||
dataItem.radius = radius
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
chart.setOption(option, true)
|
|
||||||
|
|
||||||
const { activeTimeGap } = option.series[0]
|
|
||||||
|
|
||||||
this.animationHandler = setTimeout(foo => {
|
|
||||||
activeIndex += 1
|
|
||||||
|
|
||||||
if (activeIndex >= data.length) activeIndex = 0
|
|
||||||
|
|
||||||
this.activeIndex = activeIndex
|
|
||||||
|
|
||||||
this.ringAnimation()
|
|
||||||
}, activeTimeGap)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const { init } = this
|
|
||||||
|
|
||||||
init()
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
const { animationHandler } = this
|
|
||||||
|
|
||||||
clearTimeout(animationHandler)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import './src/main.css'
|
|
||||||
import BorderBox1 from './src/main.vue'
|
|
||||||
|
|
||||||
export default function (Vue) {
|
|
||||||
Vue.component(BorderBox1.name, BorderBox1)
|
|
||||||
}
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
.dv-border-box-1 {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-1 .border {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.dv-border-box-1 .right-top {
|
|
||||||
right: 0px;
|
|
||||||
transform: rotateY(180deg);
|
|
||||||
}
|
|
||||||
.dv-border-box-1 .left-bottom {
|
|
||||||
bottom: 0px;
|
|
||||||
transform: rotateX(180deg);
|
|
||||||
}
|
|
||||||
.dv-border-box-1 .right-bottom {
|
|
||||||
right: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
transform: rotateX(180deg) rotateY(180deg);
|
|
||||||
}
|
|
||||||
.dv-border-box-1 .border-box-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dv-border-box-1" :ref="ref">
|
|
||||||
<svg class="border" :width="width" :height="height">
|
|
||||||
<polygon :fill="backgroundColor" :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
|
|
||||||
38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
|
|
||||||
85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
|
|
||||||
${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
|
|
||||||
${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
|
|
||||||
${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
|
|
||||||
${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
|
|
||||||
${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<svg
|
|
||||||
width="150px"
|
|
||||||
height="150px"
|
|
||||||
:key="item"
|
|
||||||
v-for="item in border"
|
|
||||||
:class="`${item} border`"
|
|
||||||
>
|
|
||||||
<polygon
|
|
||||||
:fill="mergedColor[0]"
|
|
||||||
points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="fill"
|
|
||||||
:values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
|
|
||||||
dur="0.5s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</polygon>
|
|
||||||
<polygon
|
|
||||||
:fill="mergedColor[1]"
|
|
||||||
points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="fill"
|
|
||||||
:values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
|
|
||||||
dur="0.5s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</polygon>
|
|
||||||
<polygon
|
|
||||||
:fill="mergedColor[0]"
|
|
||||||
points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="fill"
|
|
||||||
:values="`${mergedColor[0]};${mergedColor[1]};transparent`"
|
|
||||||
dur="1s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</polygon>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="border-box-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import autoResize from '../../../mixin/autoResize'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DvBorderBox1',
|
|
||||||
mixins: [autoResize],
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
ref: 'border-box-1',
|
|
||||||
|
|
||||||
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
|
|
||||||
|
|
||||||
defaultColor: ['#4fd2dd', '#235fa7'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import './src/main.css'
|
|
||||||
import BorderBox10 from './src/main.vue'
|
|
||||||
|
|
||||||
export default function (Vue) {
|
|
||||||
Vue.component(BorderBox10.name, BorderBox10)
|
|
||||||
}
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
.dv-border-box-10 {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
.dv-border-box-10 .dv-border-svg-container {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.dv-border-box-10 .right-top {
|
|
||||||
right: 0px;
|
|
||||||
transform: rotateY(180deg);
|
|
||||||
}
|
|
||||||
.dv-border-box-10 .left-bottom {
|
|
||||||
bottom: 0px;
|
|
||||||
transform: rotateX(180deg);
|
|
||||||
}
|
|
||||||
.dv-border-box-10 .right-bottom {
|
|
||||||
right: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
transform: rotateX(180deg) rotateY(180deg);
|
|
||||||
}
|
|
||||||
.dv-border-box-10 .border-box-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
|
|
||||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
|
||||||
<polygon :fill="backgroundColor" :points="`
|
|
||||||
4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
|
|
||||||
4, ${height} 0, ${height - 4} 0, 4
|
|
||||||
`" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<svg
|
|
||||||
width="150px"
|
|
||||||
height="150px"
|
|
||||||
:key="item"
|
|
||||||
v-for="item in border"
|
|
||||||
:class="`${item} dv-border-svg-container`"
|
|
||||||
>
|
|
||||||
<polygon
|
|
||||||
:fill="mergedColor[1]"
|
|
||||||
points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="border-box-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import autoResize from '../../../mixin/autoResize'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DvBorderBox10',
|
|
||||||
mixins: [autoResize],
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
ref: 'border-box-10',
|
|
||||||
|
|
||||||
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
|
|
||||||
|
|
||||||
defaultColor: ['#1d48c4', '#d3e1f8'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import './src/main.css'
|
|
||||||
import BorderBox11 from './src/main.vue'
|
|
||||||
|
|
||||||
export default function (Vue) {
|
|
||||||
Vue.component(BorderBox11.name, BorderBox11)
|
|
||||||
}
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
.dv-border-box-11 {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-11 .dv-border-svg-container {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
.dv-border-box-11 .dv-border-svg-container > polyline {
|
|
||||||
fill: none;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.dv-border-box-11 .border-box-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,280 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dv-border-box-11" :ref="ref">
|
|
||||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
|
||||||
<defs>
|
|
||||||
<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
|
|
||||||
<feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
|
|
||||||
<feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
|
|
||||||
<feFlood :flood-color="mergedColor[1]" result="glowColor" />
|
|
||||||
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
|
|
||||||
<feMerge>
|
|
||||||
<feMergeNode in="softGlowColored"/>
|
|
||||||
<feMergeNode in="SourceGraphic"/>
|
|
||||||
</feMerge>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<polygon :fill="backgroundColor" :points="`
|
|
||||||
20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
|
|
||||||
${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
|
|
||||||
${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
|
|
||||||
20, ${height - 8} 8, ${height - 25} 8, 50
|
|
||||||
`" />
|
|
||||||
|
|
||||||
<polyline
|
|
||||||
:stroke="mergedColor[0]"
|
|
||||||
:filter="`url(#${filterId})`"
|
|
||||||
:points="`
|
|
||||||
${(width - titleWidth) / 2}, 30
|
|
||||||
20, 30 7, 50 7, ${50 + (height - 167) / 2}
|
|
||||||
13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
|
|
||||||
7, ${140 + (height - 167) / 2} 7, ${height - 27}
|
|
||||||
20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
|
|
||||||
${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
|
|
||||||
${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
|
|
||||||
${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
|
|
||||||
${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
|
|
||||||
${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
|
|
||||||
${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<polygon
|
|
||||||
:stroke="mergedColor[0]"
|
|
||||||
fill="transparent"
|
|
||||||
:points="`
|
|
||||||
${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
|
|
||||||
${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<polygon
|
|
||||||
:stroke="mergedColor[0]"
|
|
||||||
fill="transparent"
|
|
||||||
:points="`
|
|
||||||
${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
|
|
||||||
${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<polygon
|
|
||||||
:stroke="mergedColor[0]"
|
|
||||||
:fill="fade(mergedColor[1] || defaultColor[1], 30)"
|
|
||||||
:filter="`url(#${filterId})`"
|
|
||||||
:points="`
|
|
||||||
${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
|
|
||||||
${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
|
|
||||||
${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<polygon
|
|
||||||
:filter="`url(#${filterId})`"
|
|
||||||
:fill="mergedColor[0]"
|
|
||||||
opacity="1"
|
|
||||||
:points="`
|
|
||||||
${(width - titleWidth) / 2 - 10}, 37 ${(width - titleWidth) / 2 - 31}, 37
|
|
||||||
${(width - titleWidth) / 2 - 25}, 46 ${(width - titleWidth) / 2 - 4}, 46
|
|
||||||
`"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="opacity"
|
|
||||||
values="1;0.7;1"
|
|
||||||
dur="2s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</polygon>
|
|
||||||
|
|
||||||
|
|
||||||
<polygon
|
|
||||||
:filter="`url(#${filterId})`"
|
|
||||||
:fill="mergedColor[0]"
|
|
||||||
opacity="0.7"
|
|
||||||
:points="`
|
|
||||||
${(width - titleWidth) / 2 - 40}, 37 ${(width - titleWidth) / 2 - 61}, 37
|
|
||||||
${(width - titleWidth) / 2 - 55}, 46 ${(width - titleWidth) / 2 - 34}, 46
|
|
||||||
`"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="opacity"
|
|
||||||
values="0.7;0.4;0.7"
|
|
||||||
dur="2s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</polygon>
|
|
||||||
|
|
||||||
<polygon
|
|
||||||
:filter="`url(#${filterId})`"
|
|
||||||
:fill="mergedColor[0]"
|
|
||||||
opacity="0.5"
|
|
||||||
:points="`
|
|
||||||
${(width - titleWidth) / 2 - 70}, 37 ${(width - titleWidth) / 2 - 91}, 37
|
|
||||||
${(width - titleWidth) / 2 - 85}, 46 ${(width - titleWidth) / 2 - 64}, 46
|
|
||||||
`"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="opacity"
|
|
||||||
values="0.5;0.2;0.5"
|
|
||||||
dur="2s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</polygon>
|
|
||||||
|
|
||||||
<polygon
|
|
||||||
:filter="`url(#${filterId})`"
|
|
||||||
:fill="mergedColor[0]"
|
|
||||||
opacity="1"
|
|
||||||
:points="`
|
|
||||||
${(width + titleWidth) / 2 + 30}, 37 ${(width + titleWidth) / 2 + 9}, 37
|
|
||||||
${(width + titleWidth) / 2 + 3}, 46 ${(width + titleWidth) / 2 + 24}, 46
|
|
||||||
`"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="opacity"
|
|
||||||
values="1;0.7;1"
|
|
||||||
dur="2s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</polygon>
|
|
||||||
|
|
||||||
<polygon
|
|
||||||
:filter="`url(#${filterId})`"
|
|
||||||
:fill="mergedColor[0]"
|
|
||||||
opacity="0.7"
|
|
||||||
:points="`
|
|
||||||
${(width + titleWidth) / 2 + 60}, 37 ${(width + titleWidth) / 2 + 39}, 37
|
|
||||||
${(width + titleWidth) / 2 + 33}, 46 ${(width + titleWidth) / 2 + 54}, 46
|
|
||||||
`"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="opacity"
|
|
||||||
values="0.7;0.4;0.7"
|
|
||||||
dur="2s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</polygon>
|
|
||||||
|
|
||||||
<polygon
|
|
||||||
:filter="`url(#${filterId})`"
|
|
||||||
:fill="mergedColor[0]"
|
|
||||||
opacity="0.5"
|
|
||||||
:points="`
|
|
||||||
${(width + titleWidth) / 2 + 90}, 37 ${(width + titleWidth) / 2 + 69}, 37
|
|
||||||
${(width + titleWidth) / 2 + 63}, 46 ${(width + titleWidth) / 2 + 84}, 46
|
|
||||||
`"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="opacity"
|
|
||||||
values="0.5;0.2;0.5"
|
|
||||||
dur="2s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</polygon>
|
|
||||||
|
|
||||||
<text
|
|
||||||
class="dv-border-box-11-title"
|
|
||||||
:x="`${width / 2}`"
|
|
||||||
y="32"
|
|
||||||
fill="#fff"
|
|
||||||
font-size="18"
|
|
||||||
text-anchor="middle"
|
|
||||||
dominant-baseline="middle"
|
|
||||||
>
|
|
||||||
{{ title }}
|
|
||||||
</text>
|
|
||||||
|
|
||||||
<polygon
|
|
||||||
:fill="mergedColor[0]"
|
|
||||||
:filter="`url(#${filterId})`"
|
|
||||||
:points="`
|
|
||||||
7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
|
|
||||||
11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<polygon
|
|
||||||
:fill="mergedColor[0]"
|
|
||||||
:filter="`url(#${filterId})`"
|
|
||||||
:points="`
|
|
||||||
${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
|
|
||||||
${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="border-box-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import autoResize from '../../../mixin/autoResize'
|
|
||||||
import { uuid } from '../../../util/index'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
import { fade } from '@jiaminghi/color'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DvBorderBox11',
|
|
||||||
mixins: [autoResize],
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
titleWidth: {
|
|
||||||
type: Number,
|
|
||||||
default: 250
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
const id = uuid()
|
|
||||||
return {
|
|
||||||
ref: 'border-box-11',
|
|
||||||
filterId: `border-box-11-filterId-${id}`,
|
|
||||||
|
|
||||||
defaultColor: ['#8aaafb', '#1f33a2'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
},
|
|
||||||
fade
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import './src/main.css'
|
|
||||||
import BorderBox12 from './src/main.vue'
|
|
||||||
|
|
||||||
export default function (Vue) {
|
|
||||||
Vue.component(BorderBox12.name, BorderBox12)
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
.dv-border-box-12 {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-12 .dv-border-svg-container {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
.dv-border-box-12 .border-box-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,148 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dv-border-box-12" :ref="ref">
|
|
||||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
|
||||||
<defs>
|
|
||||||
<filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
|
|
||||||
<feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken" />
|
|
||||||
<feGaussianBlur in="thicken" stdDeviation="2" result="blurred" />
|
|
||||||
<feFlood :flood-color="fade(mergedColor[1] || defaultColor[1], 70)" result="glowColor">
|
|
||||||
<animate
|
|
||||||
attributeName="flood-color"
|
|
||||||
:values="`
|
|
||||||
${fade(mergedColor[1] || defaultColor[1], 70)};
|
|
||||||
${fade(mergedColor[1] || defaultColor[1], 30)};
|
|
||||||
${fade(mergedColor[1] || defaultColor[1], 70)};
|
|
||||||
`"
|
|
||||||
dur="3s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</feFlood>
|
|
||||||
<feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
|
|
||||||
<feMerge>
|
|
||||||
<feMergeNode in="softGlowColored"/>
|
|
||||||
<feMergeNode in="SourceGraphic"/>
|
|
||||||
</feMerge>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<path
|
|
||||||
v-if="width && height"
|
|
||||||
:fill="backgroundColor"
|
|
||||||
stroke-width="2"
|
|
||||||
:stroke="mergedColor[0]"
|
|
||||||
:d="`
|
|
||||||
M15 5 L ${width - 15} 5 Q ${width - 5} 5, ${width - 5} 15
|
|
||||||
L ${width - 5} ${height - 15} Q ${width - 5} ${height - 5}, ${width - 15} ${height - 5}
|
|
||||||
L 15, ${height - 5} Q 5 ${height - 5} 5 ${height - 15} L 5 15
|
|
||||||
Q 5 5 15 5
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<path
|
|
||||||
stroke-width="2"
|
|
||||||
fill="transparent"
|
|
||||||
stroke-linecap="round"
|
|
||||||
:filter="`url(#${filterId})`"
|
|
||||||
:stroke="mergedColor[1]"
|
|
||||||
:d="`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<path
|
|
||||||
stroke-width="2"
|
|
||||||
fill="transparent"
|
|
||||||
stroke-linecap="round"
|
|
||||||
:filter="`url(#${filterId})`"
|
|
||||||
:stroke="mergedColor[1]"
|
|
||||||
:d="`M ${width - 20} 5 L ${width - 15} 5 Q ${width - 5} 5 ${width - 5} 15 L ${width - 5} 20`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<path
|
|
||||||
stroke-width="2"
|
|
||||||
fill="transparent"
|
|
||||||
stroke-linecap="round"
|
|
||||||
:filter="`url(#${filterId})`"
|
|
||||||
:stroke="mergedColor[1]"
|
|
||||||
:d="`
|
|
||||||
M ${width - 20} ${height - 5} L ${width - 15} ${height - 5}
|
|
||||||
Q ${width - 5} ${height - 5} ${width - 5} ${height - 15}
|
|
||||||
L ${width - 5} ${height - 20}
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<path
|
|
||||||
stroke-width="2"
|
|
||||||
fill="transparent"
|
|
||||||
stroke-linecap="round"
|
|
||||||
:filter="`url(#${filterId})`"
|
|
||||||
:stroke="mergedColor[1]"
|
|
||||||
:d="`
|
|
||||||
M 20 ${height - 5} L 15 ${height - 5}
|
|
||||||
Q 5 ${height - 5} 5 ${height - 15}
|
|
||||||
L 5 ${height - 20}
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="border-box-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import autoResize from '../../../mixin/autoResize'
|
|
||||||
import { uuid } from '../../../util/index'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
import { fade } from '@jiaminghi/color'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DvBorderBox12',
|
|
||||||
mixins: [autoResize],
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
const id = uuid()
|
|
||||||
return {
|
|
||||||
ref: 'border-box-12',
|
|
||||||
filterId: `borderr-box-12-filterId-${id}`,
|
|
||||||
|
|
||||||
defaultColor: ['#2e6099', '#7ce7fd'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
},
|
|
||||||
fade
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import './src/main.css'
|
|
||||||
import BorderBox13 from './src/main.vue'
|
|
||||||
|
|
||||||
export default function (Vue) {
|
|
||||||
Vue.component(BorderBox13.name, BorderBox13)
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
.dv-border-box-13 {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-13 .dv-border-svg-container {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
.dv-border-box-13 .border-box-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,92 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dv-border-box-13" :ref="ref">
|
|
||||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
|
||||||
<path
|
|
||||||
:fill="backgroundColor"
|
|
||||||
:stroke="mergedColor[0]"
|
|
||||||
:d="`
|
|
||||||
M 5 20 L 5 10 L 12 3 L 60 3 L 68 10
|
|
||||||
L ${width - 20} 10 L ${width - 5} 25
|
|
||||||
L ${width - 5} ${height - 5} L 20 ${height - 5}
|
|
||||||
L 5 ${height - 20} L 5 20
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<path
|
|
||||||
fill="transparent"
|
|
||||||
stroke-width="3"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-dasharray="10, 5"
|
|
||||||
:stroke="mergedColor[0]"
|
|
||||||
:d="`M 16 9 L 61 9`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<path
|
|
||||||
fill="transparent"
|
|
||||||
:stroke="mergedColor[1]"
|
|
||||||
:d="`M 5 20 L 5 10 L 12 3 L 60 3 L 68 10`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<path
|
|
||||||
fill="transparent"
|
|
||||||
:stroke="mergedColor[1]"
|
|
||||||
:d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="border-box-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import autoResize from '../../../mixin/autoResize'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DvBorderBox13',
|
|
||||||
mixins: [autoResize],
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
ref: 'border-box-13',
|
|
||||||
|
|
||||||
defaultColor: ['#6586ec', '#2cf7fe'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import './src/main.css'
|
|
||||||
import BorderBox2 from './src/main.vue'
|
|
||||||
|
|
||||||
export default function (Vue) {
|
|
||||||
Vue.component(BorderBox2.name, BorderBox2)
|
|
||||||
}
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
.dv-border-box-2 {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-2 .dv-border-svg-container {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
.dv-border-box-2 .dv-border-svg-container > polyline {
|
|
||||||
fill: none;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.dv-border-box-2 .border-box-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dv-border-box-2" :ref="ref">
|
|
||||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
|
||||||
<polygon :fill="backgroundColor" :points="`
|
|
||||||
7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
|
|
||||||
`" />
|
|
||||||
|
|
||||||
<polyline
|
|
||||||
:stroke="mergedColor[0]"
|
|
||||||
:points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
|
|
||||||
/>
|
|
||||||
<polyline
|
|
||||||
:stroke="mergedColor[1]"
|
|
||||||
:points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
|
|
||||||
/>
|
|
||||||
<circle :fill="mergedColor[0]" cx="11" cy="11" r="1" />
|
|
||||||
<circle :fill="mergedColor[0]" :cx="width - 11" cy="11" r="1" />
|
|
||||||
<circle :fill="mergedColor[0]" :cx="width - 11" :cy="height - 11" r="1" />
|
|
||||||
<circle :fill="mergedColor[0]" cx="11" :cy="height - 11" r="1" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="border-box-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import autoResize from '../../../mixin/autoResize'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DvBorderBox2',
|
|
||||||
mixins: [autoResize],
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
ref: 'border-box-2',
|
|
||||||
|
|
||||||
defaultColor: ['#fff', 'rgba(255, 255, 255, 0.6)'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import './src/main.css'
|
|
||||||
import BorderBox3 from './src/main.vue'
|
|
||||||
|
|
||||||
export default function (Vue) {
|
|
||||||
Vue.component(BorderBox3.name, BorderBox3)
|
|
||||||
}
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
.dv-border-box-3 {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-3 .dv-border-svg-container {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
.dv-border-box-3 .dv-border-svg-container > polyline {
|
|
||||||
fill: none;
|
|
||||||
}
|
|
||||||
.dv-border-box-3 .dv-bb3-line1 {
|
|
||||||
stroke-width: 3;
|
|
||||||
}
|
|
||||||
.dv-border-box-3 .dv-bb3-line2 {
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.dv-border-box-3 .border-box-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dv-border-box-3" :ref="ref">
|
|
||||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
|
||||||
<polygon :fill="backgroundColor" :points="`
|
|
||||||
23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}
|
|
||||||
`" />
|
|
||||||
|
|
||||||
<polyline class="dv-bb3-line1"
|
|
||||||
:stroke="mergedColor[0]"
|
|
||||||
:points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
|
|
||||||
/>
|
|
||||||
<polyline class="dv-bb3-line2"
|
|
||||||
:stroke="mergedColor[1]"
|
|
||||||
:points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`"
|
|
||||||
/>
|
|
||||||
<polyline class="dv-bb3-line2"
|
|
||||||
:stroke="mergedColor[1]"
|
|
||||||
:points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`"
|
|
||||||
/>
|
|
||||||
<polyline class="dv-bb3-line2"
|
|
||||||
:stroke="mergedColor[1]"
|
|
||||||
:points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="border-box-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import autoResize from '../../../mixin/autoResize'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DvBorderBox3',
|
|
||||||
mixins: [autoResize],
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
ref: 'border-box-3',
|
|
||||||
|
|
||||||
defaultColor: ['#2862b7', '#2862b7'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import './src/main.css'
|
|
||||||
import BorderBox4 from './src/main.vue'
|
|
||||||
|
|
||||||
export default function (Vue) {
|
|
||||||
Vue.component(BorderBox4.name, BorderBox4)
|
|
||||||
}
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
.dv-border-box-4 {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .dv-reverse {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .dv-border-svg-container {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .dv-border-svg-container > polyline {
|
|
||||||
fill: none;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .sw1 {
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .sw3 {
|
|
||||||
stroke-width: 3px;
|
|
||||||
stroke-linecap: round;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .dv-bb4-line-1 {
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .dv-bb4-line-2 {
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .dv-bb4-line-3 {
|
|
||||||
stroke-width: 3px;
|
|
||||||
stroke-linecap: round;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .dv-bb4-line-4 {
|
|
||||||
stroke-width: 3px;
|
|
||||||
stroke-linecap: round;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .dv-bb4-line-5 {
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .dv-bb4-line-6 {
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .dv-bb4-line-7 {
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .dv-bb4-line-8 {
|
|
||||||
stroke-width: 3px;
|
|
||||||
stroke-linecap: round;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .dv-bb4-line-9 {
|
|
||||||
stroke-width: 3px;
|
|
||||||
stroke-linecap: round;
|
|
||||||
stroke-dasharray: 100 250;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .dv-bb4-line-10 {
|
|
||||||
stroke-width: 1;
|
|
||||||
stroke-dasharray: 80 270;
|
|
||||||
}
|
|
||||||
.dv-border-box-4 .border-box-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dv-border-box-4" :ref="ref">
|
|
||||||
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
|
||||||
<polygon :fill="backgroundColor" :points="`
|
|
||||||
${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
|
|
||||||
16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}
|
|
||||||
`" />
|
|
||||||
|
|
||||||
<polyline class="dv-bb4-line-1"
|
|
||||||
:stroke="mergedColor[0]"
|
|
||||||
:points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
|
|
||||||
10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"
|
|
||||||
/>
|
|
||||||
<polyline
|
|
||||||
:stroke="mergedColor[1]"
|
|
||||||
class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
|
|
||||||
14, ${height - 100}`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<polyline class="dv-bb4-line-3" :stroke="mergedColor[0]" :points="`7, ${height - 40} 7, ${height - 75}`" />
|
|
||||||
<polyline class="dv-bb4-line-4" :stroke="mergedColor[0]" :points="`28, 24 13, 41 13, 64`" />
|
|
||||||
<polyline class="dv-bb4-line-5" :stroke="mergedColor[0]" :points="`5, 45 5, 140`" />
|
|
||||||
<polyline class="dv-bb4-line-6" :stroke="mergedColor[1]" :points="`14, 75 14, 180`" />
|
|
||||||
<polyline class="dv-bb4-line-7" :stroke="mergedColor[1]" :points="`55, 11 147, 11 167, 26 250, 26`" />
|
|
||||||
<polyline class="dv-bb4-line-8" :stroke="mergedColor[1]" :points="`158, 5 173, 16`" />
|
|
||||||
<polyline class="dv-bb4-line-9" :stroke="mergedColor[0]" :points="`200, 17 ${width - 10}, 17`" />
|
|
||||||
<polyline class="dv-bb4-line-10" :stroke="mergedColor[1]" :points="`385, 17 ${width - 10}, 17`" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="border-box-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import autoResize from '../../../mixin/autoResize'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DvBorderBox4',
|
|
||||||
mixins: [autoResize],
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
reverse: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
ref: 'border-box-4',
|
|
||||||
|
|
||||||
defaultColor: ['red', 'rgba(0,0,255,0.8)'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import './src/main.css'
|
|
||||||
import BorderBox5 from './src/main.vue'
|
|
||||||
|
|
||||||
export default function (Vue) {
|
|
||||||
Vue.component(BorderBox5.name, BorderBox5)
|
|
||||||
}
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
.dv-border-box-5 {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-5 .dv-reverse {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
.dv-border-box-5 .dv-border-svg-container {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-5 .dv-border-svg-container > polyline {
|
|
||||||
fill: none;
|
|
||||||
}
|
|
||||||
.dv-border-box-5 .dv-bb5-line-1,
|
|
||||||
.dv-border-box-5 .dv-bb5-line-2 {
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.dv-border-box-5 .dv-bb5-line-3,
|
|
||||||
.dv-border-box-5 .dv-bb5-line-6 {
|
|
||||||
stroke-width: 5;
|
|
||||||
}
|
|
||||||
.dv-border-box-5 .dv-bb5-line-4,
|
|
||||||
.dv-border-box-5 .dv-bb5-line-5 {
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
.dv-border-box-5 .border-box-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dv-border-box-5" :ref="ref">
|
|
||||||
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
|
||||||
<polygon :fill="backgroundColor" :points="`
|
|
||||||
10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
|
|
||||||
`" />
|
|
||||||
|
|
||||||
<polyline
|
|
||||||
class="dv-bb5-line-1"
|
|
||||||
:stroke="mergedColor[0]"
|
|
||||||
:points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
|
|
||||||
${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`"
|
|
||||||
/>
|
|
||||||
<polyline
|
|
||||||
class="dv-bb5-line-2"
|
|
||||||
:stroke="mergedColor[1]"
|
|
||||||
:points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
|
|
||||||
${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`"
|
|
||||||
/>
|
|
||||||
<polyline class="dv-bb5-line-3" :stroke="mergedColor[1]" :points="`50, 13 ${width - 35}, 13`" />
|
|
||||||
<polyline class="dv-bb5-line-4" :stroke="mergedColor[1]" :points="`15, 20 ${width - 35}, 20`" />
|
|
||||||
<polyline class="dv-bb5-line-5" :stroke="mergedColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
|
|
||||||
<polyline class="dv-bb5-line-6" :stroke="mergedColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="border-box-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import autoResize from '../../../mixin/autoResize'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DvBorderBox5',
|
|
||||||
mixins: [autoResize],
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
reverse: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
ref: 'border-box-5',
|
|
||||||
|
|
||||||
defaultColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import './src/main.css'
|
|
||||||
import BorderBox6 from './src/main.vue'
|
|
||||||
|
|
||||||
export default function (Vue) {
|
|
||||||
Vue.component(BorderBox6.name, BorderBox6)
|
|
||||||
}
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
.dv-border-box-6 {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-6 .dv-border-svg-container {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-6 .dv-border-svg-container > polyline {
|
|
||||||
fill: none;
|
|
||||||
stroke-width: 1;
|
|
||||||
}
|
|
||||||
.dv-border-box-6 .border-box-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dv-border-box-6" :ref="ref">
|
|
||||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
|
||||||
<polygon :fill="backgroundColor" :points="`
|
|
||||||
9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
|
|
||||||
`" />
|
|
||||||
|
|
||||||
<circle :fill="mergedColor[1]" cx="5" cy="5" r="2"/>
|
|
||||||
<circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
|
|
||||||
<circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
|
|
||||||
<circle :fill="mergedColor[1]" cx="5" :cy="height - 5" r="2" />
|
|
||||||
<polyline :stroke="mergedColor[0]" :points="`10, 4 ${width - 10}, 4`" />
|
|
||||||
<polyline :stroke="mergedColor[0]" :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
|
|
||||||
<polyline :stroke="mergedColor[0]" :points="`5, 70 5, ${height - 70}`" />
|
|
||||||
<polyline :stroke="mergedColor[0]" :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
|
|
||||||
<polyline :stroke="mergedColor[0]" :points="`3, 10, 3, 50`" />
|
|
||||||
<polyline :stroke="mergedColor[0]" :points="`7, 30 7, 80`" />
|
|
||||||
<polyline :stroke="mergedColor[0]" :points="`${width - 3}, 10 ${width - 3}, 50`" />
|
|
||||||
<polyline :stroke="mergedColor[0]" :points="`${width - 7}, 30 ${width - 7}, 80`" />
|
|
||||||
<polyline :stroke="mergedColor[0]" :points="`3, ${height - 10} 3, ${height - 50}`" />
|
|
||||||
<polyline :stroke="mergedColor[0]" :points="`7, ${height - 30} 7, ${height - 80}`" />
|
|
||||||
<polyline :stroke="mergedColor[0]" :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
|
|
||||||
<polyline :stroke="mergedColor[0]" :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="border-box-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import autoResize from '../../../mixin/autoResize.js'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DvBorderBox6',
|
|
||||||
mixins: [autoResize],
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
ref: 'border-box-6',
|
|
||||||
|
|
||||||
defaultColor: ['rgba(255, 255, 255, 0.35)', 'gray'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import './src/main.css'
|
|
||||||
import BorderBox7 from './src/main.vue'
|
|
||||||
|
|
||||||
export default function (Vue) {
|
|
||||||
Vue.component(BorderBox7.name, BorderBox7)
|
|
||||||
}
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
.dv-border-box-7 {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-7 .dv-border-svg-container {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-7 .dv-border-svg-container > polyline {
|
|
||||||
fill: none;
|
|
||||||
stroke-linecap: round;
|
|
||||||
}
|
|
||||||
.dv-border-box-7 .dv-bb7-line-width-2 {
|
|
||||||
stroke-width: 2;
|
|
||||||
}
|
|
||||||
.dv-border-box-7 .dv-bb7-line-width-5 {
|
|
||||||
stroke-width: 5;
|
|
||||||
}
|
|
||||||
.dv-border-box-7 .border-box-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
|
|
||||||
<template>
|
|
||||||
<div
|
|
||||||
class="dv-border-box-7"
|
|
||||||
:style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
|
|
||||||
:ref="ref"
|
|
||||||
>
|
|
||||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
|
||||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
|
|
||||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
|
|
||||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
|
|
||||||
<polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
|
|
||||||
|
|
||||||
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, 10 0, 0 10, 0`" />
|
|
||||||
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
|
|
||||||
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
|
|
||||||
<polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="border-box-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import autoResize from '../../../mixin/autoResize'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DvBorderBox7',
|
|
||||||
mixins: [autoResize],
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
ref: 'border-box-7',
|
|
||||||
|
|
||||||
defaultColor: ['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import './src/main.css'
|
|
||||||
import BorderBox8 from './src/main.vue'
|
|
||||||
|
|
||||||
export default function (Vue) {
|
|
||||||
Vue.component(BorderBox8.name, BorderBox8)
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
.dv-border-box-8 {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-8 .dv-border-svg-container {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
}
|
|
||||||
.dv-border-box-8 .border-box-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,142 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dv-border-box-8" :ref="ref">
|
|
||||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
|
||||||
<defs>
|
|
||||||
<path
|
|
||||||
:id="path"
|
|
||||||
:d="pathD"
|
|
||||||
fill="transparent"
|
|
||||||
/>
|
|
||||||
<radialGradient
|
|
||||||
:id="gradient"
|
|
||||||
cx="50%" cy="50%" r="50%"
|
|
||||||
>
|
|
||||||
<stop
|
|
||||||
offset="0%" stop-color="#fff"
|
|
||||||
stop-opacity="1"
|
|
||||||
/>
|
|
||||||
<stop
|
|
||||||
offset="100%" stop-color="#fff"
|
|
||||||
stop-opacity="0"
|
|
||||||
/>
|
|
||||||
</radialGradient>
|
|
||||||
|
|
||||||
<mask :id="mask">
|
|
||||||
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
|
|
||||||
<animateMotion
|
|
||||||
:dur="`${dur}s`"
|
|
||||||
:path="pathD"
|
|
||||||
rotate="auto"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</circle>
|
|
||||||
</mask>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
|
|
||||||
|
|
||||||
<use
|
|
||||||
:stroke="mergedColor[0]"
|
|
||||||
stroke-width="1"
|
|
||||||
:xlink:href="`#${path}`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<use
|
|
||||||
:stroke="mergedColor[1]"
|
|
||||||
stroke-width="3"
|
|
||||||
:xlink:href="`#${path}`"
|
|
||||||
:mask="`url(#${mask})`"
|
|
||||||
>
|
|
||||||
<animate
|
|
||||||
attributeName="stroke-dasharray"
|
|
||||||
:from="`0, ${length}`"
|
|
||||||
:to="`${length}, 0`"
|
|
||||||
:dur="`${dur}s`"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</use>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="border-box-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import autoResize from '../../../mixin/autoResize'
|
|
||||||
import { uuid } from '../../../util/index'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DvBorderBox8',
|
|
||||||
mixins: [autoResize],
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
dur: {
|
|
||||||
type: Number,
|
|
||||||
default: 3
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent'
|
|
||||||
},
|
|
||||||
reverse: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
const id = uuid()
|
|
||||||
return {
|
|
||||||
ref: 'border-box-8',
|
|
||||||
path: `border-box-8-path-${id}`,
|
|
||||||
gradient: `border-box-8-gradient-${id}`,
|
|
||||||
mask: `border-box-8-mask-${id}`,
|
|
||||||
|
|
||||||
defaultColor: ['#235fa7', '#4fd2dd'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
length () {
|
|
||||||
const { width, height } = this
|
|
||||||
|
|
||||||
return (width + height - 5) * 2
|
|
||||||
},
|
|
||||||
pathD () {
|
|
||||||
const { reverse, width, height } = this
|
|
||||||
|
|
||||||
if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
|
|
||||||
|
|
||||||
return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import './src/main.css'
|
|
||||||
import BorderBox9 from './src/main.vue'
|
|
||||||
|
|
||||||
export default function (Vue) {
|
|
||||||
Vue.component(BorderBox9.name, BorderBox9)
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
.dv-border-box-9 {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.dv-border-box-9 .dv-border-svg-container {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0px;
|
|
||||||
top: 0px;
|
|
||||||
}
|
|
||||||
.dv-border-box-9 .border-box-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,180 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="dv-border-box-9" :ref="ref">
|
|
||||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
|
||||||
<defs>
|
|
||||||
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
||||||
<animate
|
|
||||||
attributeName="x1"
|
|
||||||
values="0%;100%;0%"
|
|
||||||
dur="10s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<animate
|
|
||||||
attributeName="x2"
|
|
||||||
values="100%;0%;100%"
|
|
||||||
dur="10s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<stop offset="0%" :stop-color="mergedColor[0]">
|
|
||||||
<animate
|
|
||||||
attributeName="stop-color"
|
|
||||||
:values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
|
|
||||||
dur="10s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</stop>
|
|
||||||
<stop offset="100%" :stop-color="mergedColor[1]">
|
|
||||||
<animate
|
|
||||||
attributeName="stop-color"
|
|
||||||
:values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
|
|
||||||
dur="10s"
|
|
||||||
begin="0s"
|
|
||||||
repeatCount="indefinite"
|
|
||||||
/>
|
|
||||||
</stop>
|
|
||||||
</linearGradient>
|
|
||||||
|
|
||||||
<mask :id="maskId">
|
|
||||||
<polyline
|
|
||||||
stroke="#fff"
|
|
||||||
stroke-width="3"
|
|
||||||
fill="transparent"
|
|
||||||
:points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`"
|
|
||||||
/>
|
|
||||||
<polyline
|
|
||||||
fill="#fff"
|
|
||||||
:points="
|
|
||||||
`8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3
|
|
||||||
${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<polyline
|
|
||||||
stroke="#fff"
|
|
||||||
stroke-width="3"
|
|
||||||
fill="transparent"
|
|
||||||
:points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`"
|
|
||||||
/>
|
|
||||||
<polyline
|
|
||||||
fill="#fff"
|
|
||||||
:points="`
|
|
||||||
${width * 0.52}, 3 ${width * 0.58}, 3
|
|
||||||
${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
<polyline
|
|
||||||
fill="#fff"
|
|
||||||
:points="`
|
|
||||||
${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1}
|
|
||||||
${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<polyline
|
|
||||||
stroke="#fff"
|
|
||||||
stroke-width="3"
|
|
||||||
fill="transparent"
|
|
||||||
:points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`"
|
|
||||||
/>
|
|
||||||
<polyline
|
|
||||||
fill="#fff"
|
|
||||||
:points="`
|
|
||||||
8, ${height * 0.55} 8, ${height * 0.7}
|
|
||||||
2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<polyline
|
|
||||||
stroke="#fff"
|
|
||||||
stroke-width="3"
|
|
||||||
fill="transparent"
|
|
||||||
:points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.35}`"
|
|
||||||
/>
|
|
||||||
<polyline
|
|
||||||
fill="#fff"
|
|
||||||
:points="`
|
|
||||||
${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.8}
|
|
||||||
${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${width * 0.92 + 7}, ${height - 9}
|
|
||||||
`"
|
|
||||||
/>
|
|
||||||
</mask>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<polygon :fill="backgroundColor" :points="`
|
|
||||||
15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
|
|
||||||
${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
|
|
||||||
${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
|
|
||||||
${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
|
|
||||||
${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10} ${width * 0.92 + 2}, ${height - 6}
|
|
||||||
11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
|
|
||||||
`" />
|
|
||||||
|
|
||||||
<rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="border-box-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import autoResize from '../../../mixin/autoResize'
|
|
||||||
import { uuid } from '../../../util/index'
|
|
||||||
|
|
||||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
|
||||||
|
|
||||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DvBorderBox9',
|
|
||||||
mixins: [autoResize],
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: Array,
|
|
||||||
default: () => ([])
|
|
||||||
},
|
|
||||||
backgroundColor: {
|
|
||||||
type: String,
|
|
||||||
default: 'transparent'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
const id = uuid()
|
|
||||||
return {
|
|
||||||
ref: 'border-box-9',
|
|
||||||
|
|
||||||
gradientId: `border-box-9-gradient-${id}`,
|
|
||||||
maskId: `border-box-9-mask-${id}`,
|
|
||||||
|
|
||||||
defaultColor: ['#11eefd', '#0078d2'],
|
|
||||||
|
|
||||||
mergedColor: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
color () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
mergeColor () {
|
|
||||||
const { color, defaultColor } = this
|
|
||||||
|
|
||||||
this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { mergeColor } = this
|
|
||||||
|
|
||||||
mergeColor()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue