add lib folder
This commit is contained in:
jiaming743
parent
e98f7caf96
commit
93bc3615ea
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import ActiveRingChart from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(ActiveRingChart.name, ActiveRingChart)
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
.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;
|
||||
}
|
||||
|
|
@ -0,0 +1,263 @@
|
|||
<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'
|
||||
|
||||
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}
|
||||
* @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)
|
||||
* @type {Array<String>}
|
||||
* @default color = [Charts Default Color]
|
||||
*/
|
||||
color: [],
|
||||
/**
|
||||
* @description Digital flop style
|
||||
* @type {Object}
|
||||
*/
|
||||
digitalFlopStyle: {
|
||||
fontSize: 25,
|
||||
fill: '#fff'
|
||||
},
|
||||
/**
|
||||
* @description CRender animationCurve
|
||||
* @type {String}
|
||||
* @default animationCurve = 'easeOutCubic'
|
||||
*/
|
||||
animationCurve: 'easeOutCubic',
|
||||
/**
|
||||
* @description CRender animationFrame
|
||||
* @type {String}
|
||||
* @default animationFrame = 50
|
||||
*/
|
||||
animationFrame: 50
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
||||
chart: null,
|
||||
|
||||
activeIndex: 0,
|
||||
|
||||
animationHandler: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
digitalFlop () {
|
||||
const { mergedConfig, activeIndex } = this
|
||||
|
||||
if (!mergedConfig) return {}
|
||||
|
||||
const { digitalFlopStyle, data } = mergedConfig
|
||||
|
||||
const value = data.map(({ value }) => value)
|
||||
|
||||
const sum = value.reduce((all, v) => all + v, 0)
|
||||
|
||||
const percent = parseInt(value[activeIndex] / sum * 100)
|
||||
|
||||
return {
|
||||
content: '{nt}%',
|
||||
number: [percent],
|
||||
style: digitalFlopStyle
|
||||
}
|
||||
},
|
||||
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)
|
||||
|
||||
ringAnimation()
|
||||
},
|
||||
getRingOption () {
|
||||
const { mergedConfig, getRealRadius } = this
|
||||
|
||||
const radius = getRealRadius()
|
||||
|
||||
mergedConfig.data.forEach(dataItem => {
|
||||
dataItem.radius = radius
|
||||
})
|
||||
|
||||
return {
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
...mergedConfig,
|
||||
outsideLabel: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
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)
|
||||
|
||||
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>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import BorderBox1 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(BorderBox1.name, BorderBox1)
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
.dv-border-box-1 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-1 .border {
|
||||
position: absolute;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div class="dv-border-box-1">
|
||||
<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: 'DvBorderBox1',
|
||||
data () {
|
||||
return {
|
||||
border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import BorderBox2 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(BorderBox2.name, BorderBox2)
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
.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 .dv-border-svg-container circle {
|
||||
fill: #fff;
|
||||
}
|
||||
.dv-border-box-2 .dv-bb2-line1 {
|
||||
stroke: #fff;
|
||||
}
|
||||
.dv-border-box-2 .dv-bb2-line2 {
|
||||
stroke: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
.dv-border-box-2 .border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div class="dv-border-box-2" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<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 '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvBorderBox2',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-2'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import BorderBox3 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(BorderBox3.name, BorderBox3)
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
.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;
|
||||
stroke: #2862b7;
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div class="dv-border-box-3" :ref="ref">
|
||||
<svg class="dv-border-svg-container" :width="width" :height="height">
|
||||
<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 '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvBorderBox3',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-3'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import BorderBox4 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(BorderBox4.name, BorderBox4)
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
.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 .sred {
|
||||
stroke: red;
|
||||
}
|
||||
.dv-border-box-4 .sblue {
|
||||
stroke: rgba(0, 0, 255, 0.8);
|
||||
}
|
||||
.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: red;
|
||||
stroke-width: 1;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-2 {
|
||||
stroke: rgba(0, 0, 255, 0.8);
|
||||
stroke-width: 1;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-3 {
|
||||
stroke: red;
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-4 {
|
||||
stroke: red;
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-5 {
|
||||
stroke: red;
|
||||
stroke-width: 1;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-6 {
|
||||
stroke: rgba(0, 0, 255, 0.8);
|
||||
stroke-width: 1;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-7 {
|
||||
stroke: rgba(0, 0, 255, 0.8);
|
||||
stroke-width: 1;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-8 {
|
||||
stroke: rgba(0, 0, 255, 0.8);
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-9 {
|
||||
stroke: red;
|
||||
stroke-width: 3px;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 100 250;
|
||||
}
|
||||
.dv-border-box-4 .dv-bb4-line-10 {
|
||||
stroke: rgba(0, 0, 255, 0.8);
|
||||
stroke-width: 1;
|
||||
stroke-dasharray: 80 270;
|
||||
}
|
||||
.dv-border-box-4 .border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div class="dv-border-box-4" :ref="ref">
|
||||
<svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<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 '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvBorderBox4',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-4'
|
||||
}
|
||||
},
|
||||
props: {
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import BorderBox5 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(BorderBox5.name, BorderBox5)
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
.dv-border-box-5 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-5 .dv-reverse {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.dv-border-box-5 .dv-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-5 .dv-svg-container polyline {
|
||||
fill: none;
|
||||
}
|
||||
.dv-border-box-5 .dv-bb5-line-1 {
|
||||
stroke-width: 1;
|
||||
stroke: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
.dv-border-box-5 .dv-bb5-line-2 {
|
||||
stroke: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.dv-border-box-5 .dv-bb5-line-3,
|
||||
.dv-border-box-5 .dv-bb5-line-6 {
|
||||
stroke-width: 5;
|
||||
stroke: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.dv-border-box-5 .dv-bb5-line-4,
|
||||
.dv-border-box-5 .dv-bb5-line-5 {
|
||||
stroke-width: 2;
|
||||
stroke: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
.dv-border-box-5 .border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div class="dv-border-box-5" :ref="ref">
|
||||
<svg :class="`dv-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
|
||||
<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 '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvBorderBox5',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-5'
|
||||
}
|
||||
},
|
||||
props: {
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import BorderBox6 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(BorderBox6.name, BorderBox6)
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
.dv-border-box-6 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-6 .dv-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-6 .dv-svg-container circle {
|
||||
fill: gray;
|
||||
}
|
||||
.dv-border-box-6 .dv-svg-container polyline {
|
||||
fill: none;
|
||||
stroke-width: 1;
|
||||
stroke: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
.dv-border-box-6 .border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="dv-border-box-6" :ref="ref">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<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 '../../../mixin/autoResize.js'
|
||||
|
||||
export default {
|
||||
name: 'DvBorderBox6',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-6'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import BorderBox7 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(BorderBox7.name, BorderBox7)
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
.dv-border-box-7 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: inset 0 0 40px rgba(128, 128, 128, 0.3);
|
||||
border: 1px solid rgba(128, 128, 128, 0.3);
|
||||
}
|
||||
.dv-border-box-7 .dv-svg-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-7 .dv-svg-container polyline {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
.dv-border-box-7 .dv-bb7-line-width-2 {
|
||||
stroke: rgba(128, 128, 128, 0.3);
|
||||
stroke-width: 2;
|
||||
}
|
||||
.dv-border-box-7 .dv-bb7-line-width-5 {
|
||||
stroke: rgba(128, 128, 128, 0.5);
|
||||
stroke-width: 5;
|
||||
}
|
||||
.dv-border-box-7 .border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div class="dv-border-box-7" :ref="ref">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<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 '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvBorderBox7',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-7'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import BorderBox8 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(BorderBox8.name, BorderBox8)
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.dv-border-box-8 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-8 svg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
.dv-border-box-8 .border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div class="dv-border-box-8" :ref="ref">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<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 '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvBorderBox8',
|
||||
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>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import BorderBox9 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(BorderBox9.name, BorderBox9)
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.dv-border-box-9 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-border-box-9 svg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
.dv-border-box-9 .border-box-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<div class="dv-border-box-9" :ref="ref">
|
||||
<svg class="dv-svg-container" :width="width" :height="height">
|
||||
<defs>
|
||||
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#11eefd" />
|
||||
<stop offset="100%" stop-color="#0078d2" />
|
||||
</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>
|
||||
|
||||
<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'
|
||||
|
||||
export default {
|
||||
name: 'DvBorderBox9',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
return {
|
||||
ref: 'border-box-9',
|
||||
|
||||
gradientId: `border-box-9-gradient-${(new Date()).getTime()}`,
|
||||
maskId: `border-box-9-mask-${(new Date()).getTime()}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import Charts from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Charts.name, Charts)
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.dv-charts-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-charts-container .charts-canvas-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div class="dv-charts-container" :ref="ref">
|
||||
<div class="charts-canvas-container" :ref="chartRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
import Charts from '@jiaminghi/charts'
|
||||
|
||||
export default {
|
||||
name: 'DvCharts',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
option: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: `charts-container-${(new Date()).getTime()}`,
|
||||
chartRef: `chart-${(new Date()).getTime()}`,
|
||||
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
option () {
|
||||
let { chart, option } = this
|
||||
|
||||
if (!chart) return
|
||||
|
||||
if (!option) option = {}
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { initChart } = this
|
||||
|
||||
initChart()
|
||||
},
|
||||
initChart () {
|
||||
const { $refs, chartRef, option } = this
|
||||
|
||||
const chart = this.chart = new Charts($refs[chartRef])
|
||||
|
||||
if (!option) return
|
||||
|
||||
chart.setOption(option)
|
||||
},
|
||||
onResize () {
|
||||
const { chart } = this
|
||||
|
||||
if (!chart) return
|
||||
|
||||
chart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import ConicalColumnChart from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(ConicalColumnChart.name, ConicalColumnChart)
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.dv-conical-column-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-conical-column-chart text {
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
<template>
|
||||
<div class="dv-conical-column-chart" :ref="ref">
|
||||
<svg :width="width" :height="height">
|
||||
<g
|
||||
v-for="(item, i) in column"
|
||||
:key="i"
|
||||
>
|
||||
<path
|
||||
:d="item.d"
|
||||
:fill="mergedConfig.columnColor"
|
||||
/>
|
||||
<text
|
||||
:style="`fontSize:${mergedConfig.fontSize}px`"
|
||||
:fill="mergedConfig.textColor"
|
||||
:x="item.x"
|
||||
:y="height - 4"
|
||||
>
|
||||
{{ item.name }}
|
||||
</text>
|
||||
<image
|
||||
v-if="mergedConfig.img.length"
|
||||
:xlink:href="mergedConfig.img[i % mergedConfig.img.length]"
|
||||
:width="mergedConfig.imgSideLength"
|
||||
:height="mergedConfig.imgSideLength"
|
||||
:x="item.x - mergedConfig.imgSideLength / 2"
|
||||
:y="item.y - mergedConfig.imgSideLength"
|
||||
/>
|
||||
<text
|
||||
v-if="mergedConfig.showValue"
|
||||
:style="`fontSize:${mergedConfig.fontSize}px`"
|
||||
:fill="mergedConfig.textColor"
|
||||
:x="item.x"
|
||||
:y="item.textY"
|
||||
>
|
||||
{{ item.value }}
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
</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: 'DvConicalColumnChart',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'conical-column-chart',
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Chart data
|
||||
* @type {Array<Object>}
|
||||
* @default data = []
|
||||
*/
|
||||
data: [],
|
||||
/**
|
||||
* @description Chart img
|
||||
* @type {Array<String>}
|
||||
* @default img = []
|
||||
*/
|
||||
img: [],
|
||||
/**
|
||||
* @description Chart font size
|
||||
* @type {Number}
|
||||
* @default fontSize = 12
|
||||
*/
|
||||
fontSize: 12,
|
||||
/**
|
||||
* @description Img side length
|
||||
* @type {Number}
|
||||
* @default imgSideLength = 30
|
||||
*/
|
||||
imgSideLength: 30,
|
||||
/**
|
||||
* @description Column color
|
||||
* @type {String}
|
||||
* @default columnColor = 'rgba(0, 194, 255, 0.4)'
|
||||
*/
|
||||
columnColor: 'rgba(0, 194, 255, 0.4)',
|
||||
/**
|
||||
* @description Text color
|
||||
* @type {String}
|
||||
* @default textColor = '#fff'
|
||||
*/
|
||||
textColor: '#fff',
|
||||
/**
|
||||
* @description Show value
|
||||
* @type {Boolean}
|
||||
* @default showValue = false
|
||||
*/
|
||||
showValue: false
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
||||
column: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
},
|
||||
onResize () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
},
|
||||
calcData () {
|
||||
const { mergeConfig, initData, calcSVGPath } = this
|
||||
|
||||
mergeConfig()
|
||||
|
||||
initData()
|
||||
|
||||
calcSVGPath()
|
||||
},
|
||||
mergeConfig () {
|
||||
const { defaultConfig, config } = this
|
||||
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
},
|
||||
initData () {
|
||||
const { mergedConfig } = this
|
||||
let { data } = mergedConfig
|
||||
|
||||
data = deepClone(data, true)
|
||||
|
||||
data.sort(({ value: a }, { value: b }) => {
|
||||
if (a > b) return -1
|
||||
if (a < b) return 1
|
||||
if (a === b) return 0
|
||||
})
|
||||
|
||||
const max = data[0] ? data[0].value : 10
|
||||
|
||||
data = data.map(item => ({
|
||||
...item,
|
||||
percent: item.value / max
|
||||
}))
|
||||
|
||||
mergedConfig.data = data
|
||||
},
|
||||
calcSVGPath () {
|
||||
const { mergedConfig, width, height } = this
|
||||
|
||||
const { imgSideLength, fontSize, data } = mergedConfig
|
||||
|
||||
const itemNum = data.length
|
||||
const gap = width / (itemNum + 1)
|
||||
|
||||
const useAbleHeight = height - imgSideLength - fontSize - 5
|
||||
const svgBottom = height - fontSize - 5
|
||||
|
||||
this.column = data.map((item, i) => {
|
||||
const { percent } = item
|
||||
|
||||
const middleXPos = gap * (i + 1)
|
||||
const leftXPos = gap * i
|
||||
const rightXpos = gap * (i + 2)
|
||||
|
||||
const middleYPos = svgBottom - useAbleHeight * percent
|
||||
const controlYPos = useAbleHeight * percent * 0.6 + middleYPos
|
||||
|
||||
const d = `
|
||||
M${leftXPos}, ${svgBottom}
|
||||
Q${middleXPos}, ${controlYPos} ${middleXPos},${middleYPos}
|
||||
M${middleXPos},${middleYPos}
|
||||
Q${middleXPos}, ${controlYPos} ${rightXpos},${svgBottom}
|
||||
L${leftXPos}, ${svgBottom}
|
||||
Z
|
||||
`
|
||||
|
||||
const textY = (svgBottom + middleYPos) / 2 + fontSize / 2
|
||||
|
||||
return {
|
||||
...item,
|
||||
d,
|
||||
x: middleXPos,
|
||||
y: middleYPos,
|
||||
textY
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import Decoration1 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Decoration1.name, Decoration1)
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.dv-decoration-1 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-decoration-1 svg {
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<div class="dv-decoration-1" :ref="ref">
|
||||
<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
|
||||
|
||||
<template
|
||||
v-for="(point, i) in points"
|
||||
>
|
||||
<rect
|
||||
v-if="Math.random() > 0.6"
|
||||
:key="i"
|
||||
fill="#fff"
|
||||
:x="point[0] - halfPointSideLength"
|
||||
:y="point[1] - halfPointSideLength"
|
||||
:width="pointSideLength"
|
||||
:height="pointSideLength"
|
||||
>
|
||||
<animate
|
||||
v-if="Math.random() > 0.6"
|
||||
attributeName="fill"
|
||||
values="#fff;transparent"
|
||||
dur="1s"
|
||||
:begin="Math.random() * 2"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</rect>
|
||||
</template>
|
||||
|
||||
<rect
|
||||
v-if="rects[0]"
|
||||
fill="#0de7c2"
|
||||
:x="rects[0][0] - pointSideLength"
|
||||
:y="rects[0][1] - pointSideLength"
|
||||
:width="pointSideLength * 2"
|
||||
:height="pointSideLength * 2"
|
||||
>
|
||||
<animate
|
||||
attributeName="width"
|
||||
:values="`0;${pointSideLength * 2}`"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="height"
|
||||
:values="`0;${pointSideLength * 2}`"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="x"
|
||||
:values="`${rects[0][0]};${rects[0][0] - pointSideLength}`"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="y"
|
||||
:values="`${rects[0][1]};${rects[0][1] - pointSideLength}`"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</rect>
|
||||
|
||||
<rect
|
||||
v-if="rects[1]"
|
||||
fill="#0de7c2"
|
||||
:x="rects[1][0] - 40"
|
||||
:y="rects[1][1] - pointSideLength"
|
||||
:width="40"
|
||||
:height="pointSideLength * 2"
|
||||
>
|
||||
<animate
|
||||
attributeName="width"
|
||||
values="0;40;0"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="x"
|
||||
:values="`${rects[1][0]};${rects[1][0] - 40};${rects[1][0]}`"
|
||||
dur="2s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration1',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
const pointSideLength = 2.5
|
||||
|
||||
return {
|
||||
ref: 'decoration-1',
|
||||
|
||||
svgWH: [200, 50],
|
||||
|
||||
svgScale: [1, 1],
|
||||
|
||||
rowNum: 4,
|
||||
rowPoints: 20,
|
||||
|
||||
pointSideLength,
|
||||
halfPointSideLength: pointSideLength / 2,
|
||||
|
||||
points: [],
|
||||
|
||||
rects: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
},
|
||||
calcSVGData () {
|
||||
const { calcPointsPosition, calcRectsPosition, calcScale } = this
|
||||
|
||||
calcPointsPosition()
|
||||
|
||||
calcRectsPosition()
|
||||
|
||||
calcScale()
|
||||
},
|
||||
calcPointsPosition () {
|
||||
const { svgWH, rowNum, rowPoints } = this
|
||||
|
||||
const [w, h] = svgWH
|
||||
|
||||
const horizontalGap = w / (rowPoints + 1)
|
||||
const verticalGap = h / (rowNum + 1)
|
||||
|
||||
let points = new Array(rowNum).fill(0).map((foo, i) =>
|
||||
new Array(rowPoints).fill(0).map((foo, j) => [
|
||||
horizontalGap * (j + 1), verticalGap * (i + 1)
|
||||
]))
|
||||
|
||||
this.points = points.reduce((all, item) => [...all, ...item], [])
|
||||
},
|
||||
calcRectsPosition () {
|
||||
const { points, rowPoints } = this
|
||||
|
||||
const rect1 = points[rowPoints * 2 - 1]
|
||||
const rect2 = points[rowPoints * 2 - 3]
|
||||
|
||||
this.rects = [rect1, rect2]
|
||||
},
|
||||
calcScale () {
|
||||
const { width, height, svgWH } = this
|
||||
|
||||
const [w, h] = svgWH
|
||||
|
||||
this.svgScale = [width / w, height / h]
|
||||
},
|
||||
onResize () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import Decoration10 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Decoration10.name, Decoration10)
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
.dv-decoration-10 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<div class="dv-decoration-10" :ref="ref">
|
||||
<svg :width="width" :height="height">
|
||||
<polyline
|
||||
stroke="rgba(0, 194, 255, 0.3)"
|
||||
stroke-width="2"
|
||||
:points="`0, ${height / 2} ${width}, ${height / 2}`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
stroke="rgba(0, 194, 255, 1)"
|
||||
stroke-width="2"
|
||||
:points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
|
||||
:stroke-dasharray="`0, ${width * 0.2}`"
|
||||
fill="freeze"
|
||||
>
|
||||
<animate
|
||||
:id="animationId2"
|
||||
attributeName="stroke-dasharray"
|
||||
:values="`0, ${width * 0.2};${width * 0.2}, 0;`"
|
||||
dur="3s"
|
||||
:begin="`${animationId1}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
:values="`${width * 0.2}, 0;0, ${width * 0.2}`"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
</polyline>
|
||||
|
||||
<polyline
|
||||
stroke="rgba(0, 194, 255, 1)"
|
||||
stroke-width="2"
|
||||
:points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`"
|
||||
:stroke-dasharray="`0, ${width * 0.6}`"
|
||||
>
|
||||
<animate
|
||||
:id="animationId4"
|
||||
attributeName="stroke-dasharray"
|
||||
:values="`0, ${width * 0.6};${width * 0.6}, 0`"
|
||||
dur="3s"
|
||||
:begin="`${animationId3}.end + 1s`"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
:values="`${width * 0.6}, 0;0, ${width * 0.6}`"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
</polyline>
|
||||
|
||||
<polyline
|
||||
stroke="rgba(0, 194, 255, 1)"
|
||||
stroke-width="2"
|
||||
:points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
|
||||
:stroke-dasharray="`0, ${width * 0.2}`"
|
||||
>
|
||||
<animate
|
||||
:id="animationId6"
|
||||
attributeName="stroke-dasharray"
|
||||
:values="`0, ${width * 0.2};${width * 0.2}, 0`"
|
||||
dur="3s"
|
||||
:begin="`${animationId5}.end + 1s`"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
:values="`${width * 0.2}, 0;0, ${width * 0.3}`"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
</polyline>
|
||||
|
||||
<circle cx="2" :cy="height / 2" r="2" fill="#03709f">
|
||||
<animate
|
||||
:id="animationId1"
|
||||
attributeName="fill"
|
||||
values="#03709f;#00c2ff"
|
||||
:begin="`0s;${animationId7}.end`"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle :cx="width * 0.2" :cy="height / 2" r="2" fill="#03709f">
|
||||
<animate
|
||||
:id="animationId3"
|
||||
attributeName="fill"
|
||||
values="#03709f;#00c2ff"
|
||||
:begin="`${animationId2}.end`"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
values="#03709f;#03709f"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle :cx="width * 0.8" :cy="height / 2" r="2" fill="#03709f">
|
||||
<animate
|
||||
:id="animationId5"
|
||||
attributeName="fill"
|
||||
values="#03709f;#00c2ff"
|
||||
:begin="`${animationId4}.end`"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
values="#03709f;#03709f"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle :cx="width - 2" :cy="height / 2" r="2" fill="#03709f">
|
||||
<animate
|
||||
:id="animationId7"
|
||||
attributeName="fill"
|
||||
values="#03709f;#00c2ff"
|
||||
:begin="`${animationId6}.end`"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
values="#03709f;#03709f"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration10',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
return {
|
||||
ref: 'decoration-10',
|
||||
|
||||
animationId1: `d10ani1${(new Date()).getTime()}`,
|
||||
animationId2: `d10ani2${(new Date()).getTime()}`,
|
||||
animationId3: `d10ani3${(new Date()).getTime()}`,
|
||||
animationId4: `d10ani4${(new Date()).getTime()}`,
|
||||
animationId5: `d10ani5${(new Date()).getTime()}`,
|
||||
animationId6: `d10ani6${(new Date()).getTime()}`,
|
||||
animationId7: `d10ani7${(new Date()).getTime()}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import Decoration2 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Decoration2.name, Decoration2)
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.dv-decoration-2 {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<template>
|
||||
<div class="dv-decoration-2" :ref="ref">
|
||||
<svg :width="`${width}px`" :height="`${height}px`">
|
||||
<rect :x="x" :y="y" :width="w" :height="h" fill="#3faacb">
|
||||
<animate
|
||||
:attributeName="reverse ? 'height' : 'width'"
|
||||
from="0"
|
||||
:to="reverse ? height : width"
|
||||
dur="6s"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
keySplines=".42,0,.58,1"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</rect>
|
||||
|
||||
<rect :x="x" :y="y" width="1" height="1" fill="#fff">
|
||||
<animate
|
||||
:attributeName="reverse ? 'y' : 'x'"
|
||||
from="0"
|
||||
:to="reverse ? height : width"
|
||||
dur="6s"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
keySplines=".42,0,.58,1"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</rect>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration2',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'decoration-2',
|
||||
|
||||
x: 0,
|
||||
y: 0,
|
||||
|
||||
w: 0,
|
||||
h: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
reverse () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
},
|
||||
calcSVGData () {
|
||||
const { reverse, width, height } = this
|
||||
|
||||
if (reverse) {
|
||||
this.w = 1
|
||||
this.h = height
|
||||
this.x = width / 2
|
||||
this.y = 0
|
||||
} else {
|
||||
this.w = width
|
||||
this.h = 1
|
||||
this.x = 0
|
||||
this.y = height / 2
|
||||
}
|
||||
},
|
||||
onResize () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import Decoration3 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Decoration3.name, Decoration3)
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.dv-decoration-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-decoration-3 svg {
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<div class="dv-decoration-3" :ref="ref">
|
||||
<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
|
||||
|
||||
<template
|
||||
v-for="(point, i) in points"
|
||||
>
|
||||
<rect
|
||||
:key="i"
|
||||
fill="#7acaec"
|
||||
:x="point[0] - halfPointSideLength"
|
||||
:y="point[1] - halfPointSideLength"
|
||||
:width="pointSideLength"
|
||||
:height="pointSideLength"
|
||||
>
|
||||
<animate
|
||||
v-if="Math.random() > 0.6"
|
||||
attributeName="fill"
|
||||
values="#7acaec;transparent"
|
||||
:dur="Math.random() + 1 + 's'"
|
||||
:begin="Math.random() * 2"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</rect>
|
||||
</template>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration3',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
const pointSideLength = 7
|
||||
|
||||
return {
|
||||
ref: 'decoration-3',
|
||||
|
||||
svgWH: [300, 35],
|
||||
|
||||
svgScale: [1, 1],
|
||||
|
||||
rowNum: 2,
|
||||
rowPoints: 25,
|
||||
|
||||
pointSideLength,
|
||||
halfPointSideLength: pointSideLength / 2,
|
||||
|
||||
points: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
},
|
||||
calcSVGData () {
|
||||
const { calcPointsPosition, calcScale } = this
|
||||
|
||||
calcPointsPosition()
|
||||
|
||||
calcScale()
|
||||
},
|
||||
calcPointsPosition () {
|
||||
const { svgWH, rowNum, rowPoints } = this
|
||||
|
||||
const [w, h] = svgWH
|
||||
|
||||
const horizontalGap = w / (rowPoints + 1)
|
||||
const verticalGap = h / (rowNum + 1)
|
||||
|
||||
let points = new Array(rowNum).fill(0).map((foo, i) =>
|
||||
new Array(rowPoints).fill(0).map((foo, j) => [
|
||||
horizontalGap * (j + 1), verticalGap * (i + 1)
|
||||
]))
|
||||
|
||||
this.points = points.reduce((all, item) => [...all, ...item], [])
|
||||
},
|
||||
calcScale () {
|
||||
const { width, height, svgWH } = this
|
||||
|
||||
const [w, h] = svgWH
|
||||
|
||||
this.svgScale = [width / w, height / h]
|
||||
},
|
||||
onResize () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import Decoration4 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Decoration4.name, Decoration4)
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
.dv-decoration-4 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-decoration-4 .container {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
.dv-decoration-4 .normal {
|
||||
height: 0% !important;
|
||||
animation: ani-height 3s ease-in-out infinite;
|
||||
left: 50%;
|
||||
margin-left: -2px;
|
||||
}
|
||||
.dv-decoration-4 .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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<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 '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration4',
|
||||
mixins: [autoResize],
|
||||
props: ['reverse'],
|
||||
data () {
|
||||
return {
|
||||
ref: 'decoration-4'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import Decoration5 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Decoration5.name, Decoration5)
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.dv-decoration-5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<div class="dv-decoration-5" :ref="ref">
|
||||
<svg :width="width" :height="height">
|
||||
<polyline
|
||||
fill="transparent"
|
||||
stroke="#3f96a5"
|
||||
stroke-width="3"
|
||||
:points="line1Points"
|
||||
>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
attributeType="XML"
|
||||
:from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
|
||||
:to="`0, 0, ${line1Length}, 0`"
|
||||
dur="1.2s"
|
||||
begin="0s"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
keySplines=".4,1,.49,.98"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polyline>
|
||||
<polyline
|
||||
fill="transparent"
|
||||
stroke="#3f96a5"
|
||||
stroke-width="2"
|
||||
:points="line2Points"
|
||||
>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
attributeType="XML"
|
||||
:from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
|
||||
:to="`0, 0, ${line2Length}, 0`"
|
||||
dur="1.2s"
|
||||
begin="0s"
|
||||
calcMode="spline"
|
||||
keyTimes="0;1"
|
||||
keySplines=".4,1,.49,.98"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</polyline>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
import { getPolylineLength } from '@jiaminghi/charts/lib/util'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration5',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
return {
|
||||
ref: 'decoration-5',
|
||||
|
||||
line1Points: '',
|
||||
line2Points: '',
|
||||
|
||||
line1Length: 0,
|
||||
line2Length: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
},
|
||||
calcSVGData () {
|
||||
const { width, height } = this
|
||||
|
||||
let line1Points = [
|
||||
[0, height * 0.2], [width * 0.18, height * 0.2], [width * 0.2, height * 0.4], [width * 0.25, height * 0.4],
|
||||
[width * 0.27, height * 0.6], [width * 0.72, height * 0.6], [width * 0.75, height * 0.4],
|
||||
[width * 0.8, height * 0.4], [width * 0.82, height * 0.2], [width, height * 0.2]
|
||||
]
|
||||
|
||||
let line2Points = [
|
||||
[width * 0.3, height * 0.8], [width * 0.7, height * 0.8]
|
||||
]
|
||||
|
||||
const line1Length = getPolylineLength(line1Points)
|
||||
const line2Length = getPolylineLength(line2Points)
|
||||
|
||||
line1Points = line1Points.map(point => point.join(',')).join(' ')
|
||||
line2Points = line2Points.map(point => point.join(',')).join(' ')
|
||||
|
||||
this.line1Points = line1Points
|
||||
this.line2Points = line2Points
|
||||
|
||||
this.line1Length = line1Length
|
||||
this.line2Length = line2Length
|
||||
},
|
||||
onResize () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import Decoration6 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Decoration6.name, Decoration6)
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.dv-decoration-6 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.dv-decoration-6 svg {
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<div class="dv-decoration-6" :ref="ref">
|
||||
<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
|
||||
<template
|
||||
v-for="(point, i) in points"
|
||||
>
|
||||
<rect
|
||||
:key="i"
|
||||
fill="#7acaec"
|
||||
:x="point[0] - halfRectWidth"
|
||||
:y="point[1] - heights[i] / 2"
|
||||
:width="rectWidth"
|
||||
:height="heights[i]"
|
||||
>
|
||||
<animate
|
||||
attributeName="y"
|
||||
:values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
|
||||
:dur="`${randoms[i]}s`"
|
||||
keyTimes="0;.5;1"
|
||||
calcMode="spline"
|
||||
keySplines=".42,0,.58,1;.42,0,.58,1"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="height"
|
||||
:values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
|
||||
:dur="`${randoms[i]}s`"
|
||||
keyTimes="0;.5;1"
|
||||
calcMode="spline"
|
||||
keySplines=".42,0,.58,1;.42,0,.58,1"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</rect>
|
||||
</template>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
import { randomExtend } from '../../../util'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration6',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
const rectWidth = 7
|
||||
|
||||
return {
|
||||
ref: 'decoration-6',
|
||||
|
||||
svgWH: [300, 35],
|
||||
|
||||
svgScale: [1, 1],
|
||||
|
||||
rowNum: 1,
|
||||
rowPoints: 40,
|
||||
|
||||
rectWidth,
|
||||
halfRectWidth: rectWidth / 2,
|
||||
|
||||
points: [],
|
||||
heights: [],
|
||||
minHeights: [],
|
||||
randoms: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
},
|
||||
calcSVGData () {
|
||||
const { calcPointsPosition, calcScale } = this
|
||||
|
||||
calcPointsPosition()
|
||||
|
||||
calcScale()
|
||||
},
|
||||
calcPointsPosition () {
|
||||
const { svgWH, rowNum, rowPoints } = this
|
||||
|
||||
const [w, h] = svgWH
|
||||
|
||||
const horizontalGap = w / (rowPoints + 1)
|
||||
const verticalGap = h / (rowNum + 1)
|
||||
|
||||
let points = new Array(rowNum).fill(0).map((foo, i) =>
|
||||
new Array(rowPoints).fill(0).map((foo, j) => [
|
||||
horizontalGap * (j + 1), verticalGap * (i + 1)
|
||||
]))
|
||||
|
||||
this.points = points.reduce((all, item) => [...all, ...item], [])
|
||||
const heights = this.heights = new Array(rowNum * rowPoints)
|
||||
.fill(0).map(foo =>
|
||||
Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h))
|
||||
|
||||
this.minHeights = new Array(rowNum * rowPoints)
|
||||
.fill(0).map((foo, i) => heights[i] * Math.random())
|
||||
|
||||
this.randoms = new Array(rowNum * rowPoints)
|
||||
.fill(0).map(foo => Math.random() + 1.5)
|
||||
},
|
||||
calcScale () {
|
||||
const { width, height, svgWH } = this
|
||||
|
||||
const [w, h] = svgWH
|
||||
|
||||
this.svgScale = [width / w, height / h]
|
||||
},
|
||||
onResize () {
|
||||
const { calcSVGData } = this
|
||||
|
||||
calcSVGData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import Decoration7 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Decoration7.name, Decoration7)
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.dv-decoration-7 {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<div class="dv-decoration-7">
|
||||
<svg width="21px" height="20px">
|
||||
<polyline
|
||||
stroke-width="4"
|
||||
fill="transparent"
|
||||
stroke="#1dc1f5"
|
||||
points="10, 0 19, 10 10, 20"
|
||||
/>
|
||||
<polyline
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
stroke="#1dc1f5"
|
||||
points="2, 0 11, 10 2, 20"
|
||||
/>
|
||||
</svg>
|
||||
<slot></slot>
|
||||
<svg width="21px" height="20px">
|
||||
<polyline
|
||||
stroke-width="4"
|
||||
fill="transparent"
|
||||
stroke="#1dc1f5"
|
||||
points="11, 0 2, 10 11, 20"
|
||||
/>
|
||||
<polyline
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
stroke="#1dc1f5"
|
||||
points="19, 0 10, 10 19, 20"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DvDecoration7'
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import Decoration8 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Decoration8.name, Decoration8)
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
.dv-decoration-8 {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div class="dv-decoration-8" :ref="ref">
|
||||
<svg :width="width" :height="height">
|
||||
<polyline
|
||||
stroke="#3f96a5"
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
:points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
stroke="#3f96a5"
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
:points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
stroke="#3f96a5"
|
||||
fill="transparent"
|
||||
stroke-width="3"
|
||||
:points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration8',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'decoration-8'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
xPos (pos) {
|
||||
const { reverse, width } = this
|
||||
|
||||
if (!reverse) return pos
|
||||
|
||||
return width - pos
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import Decoration9 from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Decoration9.name, Decoration9)
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
.dv-decoration-9 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.dv-decoration-9 svg {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div class="dv-decoration-9" :ref="ref">
|
||||
<svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
|
||||
<defs>
|
||||
<polygon :id="polygonId" points="15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5" />
|
||||
</defs>
|
||||
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="transparent"
|
||||
stroke="rgba(3, 166, 224, 0.5)"
|
||||
stroke-width="10"
|
||||
stroke-dasharray="80, 100, 30, 100"
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
values="0 50 50;360 50 50"
|
||||
dur="3s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="45"
|
||||
fill="transparent"
|
||||
stroke="rgba(3, 166, 224, 0.8)"
|
||||
stroke-width="6"
|
||||
stroke-dasharray="50, 66, 100, 66"
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
values="0 50 50;-360 50 50"
|
||||
dur="3s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="38"
|
||||
fill="transparent"
|
||||
stroke="rgba(3, 166, 224, 0.2)"
|
||||
stroke-width="1"
|
||||
stroke-dasharray="5, 1"
|
||||
/>
|
||||
|
||||
<use
|
||||
v-for="(foo, i) in new Array(20).fill(0)"
|
||||
:key="i"
|
||||
:xlink:href="`#${polygonId}`"
|
||||
stroke="rgba(3, 166, 224, 0.6)"
|
||||
:fill="Math.random() > 0.4 ? 'transparent' : 'rgba(3, 166, 224, 0.8)'"
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
values="0 50 50;360 50 50"
|
||||
dur="3s"
|
||||
:begin="`${i * 0.15}s`"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</use>
|
||||
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="26"
|
||||
fill="transparent"
|
||||
stroke="rgba(3, 166, 224, 0.2)"
|
||||
stroke-width="1"
|
||||
stroke-dasharray="5, 1"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvDecoration9',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
return {
|
||||
ref: 'decoration-9',
|
||||
|
||||
polygonId: `decoration-9-polygon-${(new Date()).getTime()}`,
|
||||
|
||||
svgWH: [100, 100],
|
||||
|
||||
svgScale: [1, 1]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcScale } = this
|
||||
|
||||
calcScale()
|
||||
},
|
||||
calcScale () {
|
||||
const { width, height, svgWH } = this
|
||||
|
||||
const [w, h] = svgWH
|
||||
|
||||
this.svgScale = [width / w, height / h]
|
||||
},
|
||||
onResize () {
|
||||
const { calcScale } = this
|
||||
|
||||
calcScale()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import DigitalFlop from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(DigitalFlop.name, DigitalFlop)
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.dv-digital-flop canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,184 @@
|
|||
<template>
|
||||
<div class="dv-digital-flop">
|
||||
<canvas ref="digital-flop" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CRender from '@jiaminghi/c-render'
|
||||
|
||||
import '@jiaminghi/charts/lib/extend/index'
|
||||
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
export default {
|
||||
name: 'DvDigitalFlop',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
renderer: null,
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Number for digital flop
|
||||
* @type {Array<Number>}
|
||||
* @default number = []
|
||||
* @example number = [10]
|
||||
*/
|
||||
number: [],
|
||||
/**
|
||||
* @description Content formatter
|
||||
* @type {String}
|
||||
* @default content = ''
|
||||
* @example content = '{nt}个'
|
||||
*/
|
||||
content: '',
|
||||
/**
|
||||
* @description Number toFixed
|
||||
* @type {Number}
|
||||
* @default toFixed = 0
|
||||
*/
|
||||
toFixed: 0,
|
||||
/**
|
||||
* @description Text align
|
||||
* @type {String}
|
||||
* @default textAlign = 'center'
|
||||
* @example textAlign = 'center' | 'left' | 'right'
|
||||
*/
|
||||
textAlign: 'center',
|
||||
/**
|
||||
* @description Text style configuration
|
||||
* @type {Object} {CRender Class Style}
|
||||
*/
|
||||
style: {
|
||||
fontSize: 30,
|
||||
fill: '#3de7c9'
|
||||
},
|
||||
/**
|
||||
* @description CRender animationCurve
|
||||
* @type {String}
|
||||
* @default animationCurve = 'easeOutCubic'
|
||||
*/
|
||||
animationCurve: 'easeOutCubic',
|
||||
/**
|
||||
* @description CRender animationFrame
|
||||
* @type {String}
|
||||
* @default animationFrame = 50
|
||||
*/
|
||||
animationFrame: 50
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
||||
graph: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
const { update } = this
|
||||
|
||||
update()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const { initRender, mergeConfig, initGraph } = this
|
||||
|
||||
initRender()
|
||||
|
||||
mergeConfig()
|
||||
|
||||
initGraph()
|
||||
},
|
||||
initRender () {
|
||||
const { $refs } = this
|
||||
|
||||
this.renderer = new CRender($refs['digital-flop'])
|
||||
},
|
||||
mergeConfig () {
|
||||
const { defaultConfig, config } = this
|
||||
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
},
|
||||
initGraph () {
|
||||
const { getShape, getStyle, renderer, mergedConfig } = this
|
||||
|
||||
const { animationCurve, animationFrame } = mergedConfig
|
||||
|
||||
const shape = getShape()
|
||||
const style = getStyle()
|
||||
|
||||
this.graph = renderer.add({
|
||||
name: 'numberText',
|
||||
animationCurve,
|
||||
animationFrame,
|
||||
shape,
|
||||
style
|
||||
})
|
||||
},
|
||||
getShape () {
|
||||
const { number, content, toFixed, textAlign } = this.mergedConfig
|
||||
|
||||
const [w, h] = this.renderer.area
|
||||
|
||||
const position = [w / 2, h / 2]
|
||||
|
||||
if (textAlign === 'left') position[0] = 0
|
||||
if (textAlign === 'right') position[0] = w
|
||||
|
||||
return {
|
||||
number,
|
||||
content,
|
||||
toFixed,
|
||||
position
|
||||
}
|
||||
},
|
||||
getStyle () {
|
||||
const { style, textAlign } = this.mergedConfig
|
||||
|
||||
return deepMerge(style, {
|
||||
textAlign,
|
||||
textBaseline: 'middle'
|
||||
})
|
||||
},
|
||||
update () {
|
||||
const { mergeConfig, mergeShape, getShape, getStyle, graph, mergedConfig } = this
|
||||
|
||||
mergeConfig()
|
||||
|
||||
if (!graph) return
|
||||
|
||||
const { animationCurve, animationFrame } = mergedConfig
|
||||
|
||||
const shape = getShape()
|
||||
const style = getStyle()
|
||||
|
||||
mergeShape(graph, shape)
|
||||
|
||||
graph.animationCurve = animationCurve
|
||||
graph.animationFrame = animationFrame
|
||||
|
||||
graph.animation('style', style, true)
|
||||
graph.animation('shape', shape)
|
||||
},
|
||||
mergeShape (graph, shape) {
|
||||
const cacheNum = graph.shape.number.length
|
||||
const shapeNum = shape.number.length
|
||||
|
||||
if (cacheNum !== shapeNum) graph.shape.number = shape.number
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { init } = this
|
||||
|
||||
init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import FlylineChart from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(FlylineChart.name, FlylineChart)
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
.dv-flyline-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.dv-flyline-chart polyline {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.dv-flyline-chart text {
|
||||
text-anchor: middle;
|
||||
dominant-baseline: middle;
|
||||
}
|
||||
|
|
@ -0,0 +1,492 @@
|
|||
<template>
|
||||
<div
|
||||
class="dv-flyline-chart"
|
||||
ref="dv-flyline-chart"
|
||||
:style="`background-image: url(${mergedConfig ? mergedConfig.bgImgUrl : ''})`"
|
||||
@click="consoleClickPos"
|
||||
>
|
||||
<svg v-if="mergedConfig" :width="width" :height="height">
|
||||
<defs>
|
||||
<radialGradient
|
||||
:id="gradientId"
|
||||
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>
|
||||
|
||||
<radialGradient
|
||||
:id="gradient2Id"
|
||||
cx="50%" cy="50%" r="50%"
|
||||
>
|
||||
<stop
|
||||
offset="0%" stop-color="#fff"
|
||||
stop-opacity="0"
|
||||
/>
|
||||
<stop
|
||||
offset="100%" stop-color="#fff"
|
||||
stop-opacity="1"
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<circle
|
||||
v-if="paths[0]"
|
||||
:id="`circle${paths[0].toString()}`"
|
||||
:cx="paths[0][2][0]"
|
||||
:cy="paths[0][2][1]"
|
||||
>
|
||||
<animate
|
||||
attributeName="r"
|
||||
:values="`1;${mergedConfig.halo.radius}`"
|
||||
:dur="mergedConfig.halo.duration / 10 + 's'"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="1;0"
|
||||
:dur="mergedConfig.halo.duration / 10 + 's'"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</defs>
|
||||
|
||||
<image
|
||||
v-if="paths[0]"
|
||||
:xlink:href="mergedConfig.centerPointImg.url"
|
||||
:width="mergedConfig.centerPointImg.width"
|
||||
:height="mergedConfig.centerPointImg.height"
|
||||
:x="paths[0][2][0] - mergedConfig.centerPointImg.width / 2"
|
||||
:y="paths[0][2][1] - mergedConfig.centerPointImg.height / 2"
|
||||
/>
|
||||
|
||||
<mask :id="`maskhalo${paths[0].toString()}`">
|
||||
<use
|
||||
v-if="paths[0]"
|
||||
:xlink:href="`#circle${paths[0].toString()}`"
|
||||
:fill="`url(#${gradient2Id})`"
|
||||
/>
|
||||
</mask>
|
||||
|
||||
<use
|
||||
v-if="paths[0] && mergedConfig.halo.show"
|
||||
:xlink:href="`#circle${paths[0].toString()}`"
|
||||
:fill="mergedConfig.halo.color"
|
||||
:mask="`url(#maskhalo${paths[0].toString()})`"
|
||||
/>
|
||||
|
||||
<g
|
||||
v-for="(path, i) in paths"
|
||||
:key="i"
|
||||
>
|
||||
<defs>
|
||||
<path
|
||||
:id="`path${path.toString()}`"
|
||||
:ref="`path${i}`"
|
||||
:d="`M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`"
|
||||
fill="transparent"
|
||||
/>
|
||||
</defs>
|
||||
|
||||
<use
|
||||
:xlink:href="`#path${path.toString()}`"
|
||||
:stroke-width="mergedConfig.lineWidth"
|
||||
:stroke="mergedConfig.orbitColor"
|
||||
/>
|
||||
|
||||
<use
|
||||
v-if="lengths[i]"
|
||||
:xlink:href="`#path${path.toString()}`"
|
||||
:stroke-width="mergedConfig.lineWidth"
|
||||
:stroke="mergedConfig.flylineColor"
|
||||
:mask="`url(#mask${unique}${path.toString()})`"
|
||||
>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
:from="`0, ${lengths[i]}`"
|
||||
:to="`${lengths[i]}, 0`"
|
||||
:dur="times[i] || 0"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</use>
|
||||
|
||||
<mask :id="`mask${unique}${path.toString()}`">
|
||||
<circle cx="0" cy="0" :r="mergedConfig.flylineRadius" :fill="`url(#${gradientId})`">
|
||||
<animateMotion
|
||||
:dur="times[i] || 0"
|
||||
:path="`M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`"
|
||||
rotate="auto"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</mask>
|
||||
|
||||
<image
|
||||
:xlink:href="mergedConfig.pointsImg.url"
|
||||
:width="mergedConfig.pointsImg.width"
|
||||
:height="mergedConfig.pointsImg.height"
|
||||
:x="path[0][0] - mergedConfig.pointsImg.width / 2"
|
||||
:y="path[0][1] - mergedConfig.pointsImg.height / 2"
|
||||
/>
|
||||
|
||||
<text
|
||||
:style="`fontSize:${mergedConfig.text.fontSize}px;`"
|
||||
:fill="mergedConfig.text.color"
|
||||
:x="path[0][0] + mergedConfig.text.offset[0]"
|
||||
:y="path[0][1] + mergedConfig.text.offset[1]"
|
||||
>
|
||||
{{ texts[i] }}
|
||||
</text>
|
||||
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import { randomExtend, getPointDistance } from '../../../util/index'
|
||||
|
||||
import autoResize from '../../../mixin/autoResize'
|
||||
|
||||
export default {
|
||||
name: 'DvFlylineChart',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
dev: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'dv-flyline-chart',
|
||||
unique: Math.random(),
|
||||
maskId: `flyline-mask-id-${(new Date()).getTime()}`,
|
||||
maskCircleId: `mask-circle-id-${(new Date()).getTime()}`,
|
||||
gradientId: `gradient-id-${(new Date()).getTime()}`,
|
||||
gradient2Id: `gradient2-id-${(new Date()).getTime()}`,
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Flyline chart center point
|
||||
* @type {Array<Number>}
|
||||
* @default centerPoint = [0, 0]
|
||||
*/
|
||||
centerPoint: [0, 0],
|
||||
/**
|
||||
* @description Flyline start points
|
||||
* @type {Array<Array<Number>>}
|
||||
* @default points = []
|
||||
* @example points = [[10, 10], [100, 100]]
|
||||
*/
|
||||
points: [],
|
||||
/**
|
||||
* @description Flyline width
|
||||
* @type {Number}
|
||||
* @default lineWidth = 1
|
||||
*/
|
||||
lineWidth: 1,
|
||||
/**
|
||||
* @description Orbit color
|
||||
* @type {String}
|
||||
* @default orbitColor = 'rgba(103, 224, 227, .2)'
|
||||
*/
|
||||
orbitColor: 'rgba(103, 224, 227, .2)',
|
||||
/**
|
||||
* @description Flyline color
|
||||
* @type {String}
|
||||
* @default orbitColor = '#ffde93'
|
||||
*/
|
||||
flylineColor: '#ffde93',
|
||||
/**
|
||||
* @description K value
|
||||
* @type {Number}
|
||||
* @default k = -0.5
|
||||
* @example k = -1 ~ 1
|
||||
*/
|
||||
k: -0.5,
|
||||
/**
|
||||
* @description Flyline curvature
|
||||
* @type {Number}
|
||||
* @default curvature = 5
|
||||
*/
|
||||
curvature: 5,
|
||||
/**
|
||||
* @description Flyline radius
|
||||
* @type {Number}
|
||||
* @default flylineRadius = 100
|
||||
*/
|
||||
flylineRadius: 100,
|
||||
/**
|
||||
* @description Flyline animation duration
|
||||
* @type {Array<Number>}
|
||||
* @default duration = [20, 30]
|
||||
*/
|
||||
duration: [20, 30],
|
||||
/**
|
||||
* @description Relative points position
|
||||
* @type {Boolean}
|
||||
* @default relative = true
|
||||
*/
|
||||
relative: true,
|
||||
/**
|
||||
* @description Back ground image url
|
||||
* @type {String}
|
||||
* @default bgImgUrl = ''
|
||||
* @example bgImgUrl = './img/bg.jpg'
|
||||
*/
|
||||
bgImgUrl: '',
|
||||
/**
|
||||
* @description Text configuration
|
||||
* @type {Object}
|
||||
*/
|
||||
text: {
|
||||
/**
|
||||
* @description Text offset
|
||||
* @type {Array<Number>}
|
||||
* @default offset = [0, 15]
|
||||
*/
|
||||
offset: [0, 15],
|
||||
/**
|
||||
* @description Text color
|
||||
* @type {String}
|
||||
* @default color = '#ffdb5c'
|
||||
*/
|
||||
color: '#ffdb5c',
|
||||
/**
|
||||
* @description Text font size
|
||||
* @type {Number}
|
||||
* @default fontSize = 12
|
||||
*/
|
||||
fontSize: 12
|
||||
},
|
||||
/**
|
||||
* @description Halo configuration
|
||||
* @type {Object}
|
||||
*/
|
||||
halo: {
|
||||
/**
|
||||
* @description Weather to show halo
|
||||
* @type {Boolean}
|
||||
* @default show = true
|
||||
* @example show = true | false
|
||||
*/
|
||||
show: true,
|
||||
/**
|
||||
* @description Halo animation duration (10 = 1s)
|
||||
* @type {Number}
|
||||
* @default duration = 30
|
||||
*/
|
||||
duration: 30,
|
||||
/**
|
||||
* @description Halo color
|
||||
* @type {String}
|
||||
* @default color = '#fb7293'
|
||||
*/
|
||||
color: '#fb7293',
|
||||
/**
|
||||
* @description Halo max radius
|
||||
* @type {Number}
|
||||
* @default radius = 120
|
||||
*/
|
||||
radius: 120
|
||||
},
|
||||
/**
|
||||
* @description Center point img configuration
|
||||
* @type {Object}
|
||||
*/
|
||||
centerPointImg: {
|
||||
/**
|
||||
* @description Center point img width
|
||||
* @type {Number}
|
||||
* @default width = 40
|
||||
*/
|
||||
width: 40,
|
||||
/**
|
||||
* @description Center point img height
|
||||
* @type {Number}
|
||||
* @default height = 40
|
||||
*/
|
||||
height: 40,
|
||||
/**
|
||||
* @description Center point img url
|
||||
* @type {String}
|
||||
* @default url = ''
|
||||
*/
|
||||
url: ''
|
||||
},
|
||||
/**
|
||||
* @description Points img configuration
|
||||
* @type {Object}
|
||||
* @default radius = 120
|
||||
*/
|
||||
pointsImg: {
|
||||
/**
|
||||
* @description Points img width
|
||||
* @type {Number}
|
||||
* @default width = 15
|
||||
*/
|
||||
width: 15,
|
||||
/**
|
||||
* @description Points img height
|
||||
* @type {Number}
|
||||
* @default height = 15
|
||||
*/
|
||||
height: 15,
|
||||
/**
|
||||
* @description Points img url
|
||||
* @type {String}
|
||||
* @default url = ''
|
||||
*/
|
||||
url: ''
|
||||
}
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
||||
paths: [],
|
||||
lengths: [],
|
||||
times: [],
|
||||
texts: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
},
|
||||
onResize () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
},
|
||||
async calcData () {
|
||||
const { mergeConfig, createFlylinePaths, calcLineLengths } = this
|
||||
|
||||
mergeConfig()
|
||||
|
||||
createFlylinePaths()
|
||||
|
||||
await calcLineLengths()
|
||||
|
||||
const { calcTimes, calcTexts } = this
|
||||
|
||||
calcTimes()
|
||||
|
||||
calcTexts()
|
||||
},
|
||||
mergeConfig () {
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
|
||||
const { points } = mergedConfig
|
||||
|
||||
mergedConfig.points = points.map(item => {
|
||||
if (item instanceof Array) {
|
||||
return { position: item, text: '' }
|
||||
}
|
||||
|
||||
return item
|
||||
})
|
||||
|
||||
this.mergedConfig = mergedConfig
|
||||
},
|
||||
createFlylinePaths () {
|
||||
const { getPath, mergedConfig, width, height } = this
|
||||
|
||||
let { centerPoint, points, relative } = mergedConfig
|
||||
|
||||
points = points.map(({ position }) => position)
|
||||
|
||||
if (relative) {
|
||||
centerPoint = [width * centerPoint[0], height * centerPoint[1]]
|
||||
points = points.map(([x, y]) => [width * x, height * y])
|
||||
}
|
||||
|
||||
this.paths = points.map(point => getPath(centerPoint, point))
|
||||
},
|
||||
getPath (center, point) {
|
||||
const { getControlPoint } = this
|
||||
|
||||
const controlPoint = getControlPoint(center, point)
|
||||
|
||||
return [point, controlPoint, center]
|
||||
},
|
||||
getControlPoint ([sx, sy], [ex, ey]) {
|
||||
const { getKLinePointByx, mergedConfig } = this
|
||||
|
||||
const { curvature, k } = mergedConfig
|
||||
|
||||
const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2]
|
||||
|
||||
const distance = getPointDistance([sx, sy], [ex, ey])
|
||||
|
||||
const targetLength = distance / curvature
|
||||
const disDived = targetLength / 2
|
||||
|
||||
let [dx, dy] = [mx, my]
|
||||
|
||||
do {
|
||||
dx += disDived
|
||||
dy = getKLinePointByx(k, [mx, my], dx)[1]
|
||||
} while (getPointDistance([mx, my], [dx, dy]) < targetLength)
|
||||
|
||||
return [dx, dy]
|
||||
},
|
||||
getKLinePointByx (k, [lx, ly], x) {
|
||||
const y = ly - k * lx + k * x
|
||||
|
||||
return [x, y]
|
||||
},
|
||||
async calcLineLengths () {
|
||||
const { $nextTick, paths, $refs } = this
|
||||
|
||||
await $nextTick()
|
||||
|
||||
this.lengths = paths.map((foo, i) => $refs[`path${i}`][0].getTotalLength())
|
||||
},
|
||||
calcTimes () {
|
||||
const { duration, points } = this.mergedConfig
|
||||
|
||||
this.times = points.map(foo => randomExtend(...duration) / 10)
|
||||
},
|
||||
calcTexts () {
|
||||
const { points } = this.mergedConfig
|
||||
|
||||
this.texts = points.map(({ text }) => text)
|
||||
},
|
||||
consoleClickPos ({ offsetX, offsetY }) {
|
||||
const { width, height, dev } = this
|
||||
|
||||
if (!dev) return
|
||||
|
||||
const relativeX = (offsetX / width).toFixed(2)
|
||||
const relativeY = (offsetY / height).toFixed(2)
|
||||
|
||||
console.warn(`dv-flyline-chart DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import FullScreenContainer from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(FullScreenContainer.name, FullScreenContainer)
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
#dv-full-screen-container {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
transform-origin: left top;
|
||||
z-index: 999;
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div id="dv-full-screen-container" :ref="ref">
|
||||
<template v-if="ready">
|
||||
<slot></slot>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autoResize from '../../../mixin/autoResize.js'
|
||||
|
||||
export default {
|
||||
name: 'DvFullScreenContainer',
|
||||
mixins: [autoResize],
|
||||
data () {
|
||||
return {
|
||||
ref: 'full-screen-container',
|
||||
allWidth: 0,
|
||||
scale: 0,
|
||||
datavRoot: '',
|
||||
ready: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { initConfig, setAppScale } = this
|
||||
|
||||
initConfig()
|
||||
|
||||
setAppScale()
|
||||
|
||||
this.ready = true
|
||||
},
|
||||
initConfig () {
|
||||
const { dom } = this
|
||||
const { width, height } = screen
|
||||
|
||||
this.allWidth = width
|
||||
|
||||
dom.style.width = `${width}px`
|
||||
dom.style.height = `${height}px`
|
||||
},
|
||||
setAppScale () {
|
||||
const { allWidth, dom } = this
|
||||
|
||||
const currentWidth = document.body.clientWidth
|
||||
|
||||
dom.style.transform = `scale(${currentWidth / allWidth})`
|
||||
},
|
||||
onResize () {
|
||||
const { setAppScale } = this
|
||||
|
||||
setAppScale()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import Loading from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(Loading.name, Loading)
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
.dv-loading {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.dv-loading .loading-tip {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<div class="dv-loading">
|
||||
<svg width="50px" height="50px">
|
||||
<circle
|
||||
cx="25"
|
||||
cy="25"
|
||||
r="20"
|
||||
fill="transparent"
|
||||
stroke-width="3"
|
||||
stroke-dasharray="31.415, 31.415"
|
||||
stroke="#02bcfe"
|
||||
stroke-linecap="round"
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
values="0, 25 25;360, 25 25"
|
||||
dur="1.5s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="stroke"
|
||||
values="#02bcfe;#3be6cb;#02bcfe"
|
||||
dur="3s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle
|
||||
cx="25"
|
||||
cy="25"
|
||||
r="10"
|
||||
fill="transparent"
|
||||
stroke-width="3"
|
||||
stroke-dasharray="15.7, 15.7"
|
||||
stroke="#3be6cb"
|
||||
stroke-linecap="round"
|
||||
>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
values="360, 25 25;0, 25 25"
|
||||
dur="1.5s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="stroke"
|
||||
values="#3be6cb;#02bcfe;#3be6cb"
|
||||
dur="3s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</svg>
|
||||
<div class="loading-tip">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DvLoading'
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import PercentPond from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(PercentPond.name, PercentPond)
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
.dv-percent-pond {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.dv-percent-pond polyline {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.dv-percent-pond text {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
text-anchor: middle;
|
||||
dominant-baseline: middle;
|
||||
}
|
||||
|
|
@ -0,0 +1,252 @@
|
|||
<template>
|
||||
<div class="dv-percent-pond" ref="percent-pond">
|
||||
<svg>
|
||||
<defs>
|
||||
<linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop v-for="lc in linearGradient" :key="lc[0]"
|
||||
:offset="lc[0]"
|
||||
:stop-color="lc[1]" />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient :id="gradientId2" x1="0%" y1="0%" :x2="gradient2XPos" y2="0%">
|
||||
<stop v-for="lc in linearGradient" :key="lc[0]"
|
||||
:offset="lc[0]"
|
||||
:stop-color="lc[1]" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect
|
||||
:x="mergedConfig ? mergedConfig.borderWidth / 2 : '0'"
|
||||
:y="mergedConfig ? mergedConfig.borderWidth / 2 : '0'"
|
||||
:rx="mergedConfig ? mergedConfig.borderRadius : '0'"
|
||||
:ry="mergedConfig ? mergedConfig.borderRadius : '0'"
|
||||
fill="transparent"
|
||||
:stroke-width="mergedConfig ? mergedConfig.borderWidth : '0'"
|
||||
:stroke="`url(#${gradientId1})`"
|
||||
:width="rectWidth"
|
||||
:height="rectHeight"
|
||||
/>
|
||||
<polyline
|
||||
:stroke-width="polylineWidth"
|
||||
:stroke-dasharray="mergedConfig ? mergedConfig.lineDash.join(',') : '0'"
|
||||
:stroke="`url(#${polylineGradient})`"
|
||||
:points="points"
|
||||
/>
|
||||
<text
|
||||
:stroke="mergedConfig ? mergedConfig.textColor : '#fff'"
|
||||
:fill="mergedConfig ? mergedConfig.textColor : '#fff'"
|
||||
:x="width / 2"
|
||||
:y="height / 2"
|
||||
>
|
||||
{{ details }}
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
export default {
|
||||
name: 'DvPercentPond',
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
gradientId1: `percent-pond-gradientId1-${(new Date()).getTime()}`,
|
||||
gradientId2: `percent-pond-gradientId2-${(new Date()).getTime()}`,
|
||||
|
||||
width: 0,
|
||||
height: 0,
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Value
|
||||
* @type {Number}
|
||||
* @default value = 0
|
||||
*/
|
||||
value: 0,
|
||||
/**
|
||||
* @description Colors (Hex|rgb|rgba)
|
||||
* @type {Array<String>}
|
||||
* @default colors = ['#00BAFF', '#3DE7C9']
|
||||
*/
|
||||
colors: ['#3DE7C9', '#00BAFF'],
|
||||
/**
|
||||
* @description Border width
|
||||
* @type {Number}
|
||||
* @default borderWidth = 3
|
||||
*/
|
||||
borderWidth: 3,
|
||||
/**
|
||||
* @description Gap between border and pond
|
||||
* @type {Number}
|
||||
* @default borderGap = 3
|
||||
*/
|
||||
borderGap: 3,
|
||||
/**
|
||||
* @description Line dash
|
||||
* @type {Array<Number>}
|
||||
* @default lineDash = [5, 1]
|
||||
*/
|
||||
lineDash: [5, 1],
|
||||
/**
|
||||
* @description Text color
|
||||
* @type {String}
|
||||
* @default textColor = '#fff'
|
||||
*/
|
||||
textColor: '#fff',
|
||||
/**
|
||||
* @description Border radius
|
||||
* @type {Number}
|
||||
* @default borderRadius = 5
|
||||
*/
|
||||
borderRadius: 5,
|
||||
/**
|
||||
* @description Local Gradient
|
||||
* @type {Boolean}
|
||||
* @default localGradient = false
|
||||
* @example localGradient = false | true
|
||||
*/
|
||||
localGradient: false,
|
||||
/**
|
||||
* @description Formatter
|
||||
* @type {String}
|
||||
* @default formatter = '{value}%'
|
||||
*/
|
||||
formatter: '{value}%'
|
||||
},
|
||||
|
||||
mergedConfig: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
rectWidth () {
|
||||
const { mergedConfig, width } = this
|
||||
|
||||
if (!mergedConfig) return 0
|
||||
|
||||
const { borderWidth } = mergedConfig
|
||||
|
||||
return width - borderWidth
|
||||
},
|
||||
rectHeight () {
|
||||
const { mergedConfig, height } = this
|
||||
|
||||
if (!mergedConfig) return 0
|
||||
|
||||
const { borderWidth } = mergedConfig
|
||||
|
||||
return height - borderWidth
|
||||
},
|
||||
points () {
|
||||
const { mergedConfig, width, height } = this
|
||||
|
||||
const halfHeight = height / 2
|
||||
|
||||
if (!mergedConfig) return `0, ${halfHeight} 0, ${halfHeight}`
|
||||
|
||||
const { borderWidth, borderGap, value } = mergedConfig
|
||||
|
||||
const polylineLength = (width - (borderWidth + borderGap) * 2) / 100 * value
|
||||
|
||||
return `
|
||||
${borderWidth + borderGap}, ${halfHeight}
|
||||
${borderWidth + borderGap + polylineLength}, ${halfHeight + 0.001}
|
||||
`
|
||||
},
|
||||
polylineWidth () {
|
||||
const { mergedConfig, height } = this
|
||||
|
||||
if (!mergedConfig) return 0
|
||||
|
||||
const { borderWidth, borderGap } = mergedConfig
|
||||
|
||||
return height - (borderWidth + borderGap) * 2
|
||||
},
|
||||
linearGradient () {
|
||||
const { mergedConfig } = this
|
||||
|
||||
if (!mergedConfig) return []
|
||||
|
||||
const { colors } = mergedConfig
|
||||
|
||||
const colorNum = colors.length
|
||||
|
||||
const colorOffsetGap = 100 / (colorNum - 1)
|
||||
|
||||
return colors.map((c, i) => [colorOffsetGap * i, c])
|
||||
},
|
||||
polylineGradient () {
|
||||
const { gradientId1, gradientId2, mergedConfig } = this
|
||||
|
||||
if (!mergedConfig) return gradientId2
|
||||
|
||||
if (mergedConfig.localGradient) return gradientId1
|
||||
|
||||
return gradientId2
|
||||
},
|
||||
gradient2XPos () {
|
||||
const { mergedConfig } = this
|
||||
|
||||
if (!mergedConfig) return '100%'
|
||||
|
||||
const { value } = mergedConfig
|
||||
|
||||
return `${200 - value}%`
|
||||
},
|
||||
details () {
|
||||
const { mergedConfig } = this
|
||||
|
||||
if (!mergedConfig) return ''
|
||||
|
||||
const { value, formatter } = mergedConfig
|
||||
|
||||
return formatter.replace('{value}', value)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
const { mergeConfig } = this
|
||||
|
||||
mergeConfig()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async init () {
|
||||
const { initWH, config, mergeConfig } = this
|
||||
|
||||
await initWH()
|
||||
|
||||
if (!config) return
|
||||
|
||||
mergeConfig()
|
||||
},
|
||||
async initWH () {
|
||||
const { $nextTick, $refs } = this
|
||||
|
||||
await $nextTick()
|
||||
|
||||
const dom = $refs['percent-pond']
|
||||
|
||||
this.width = dom.clientWidth
|
||||
this.height = dom.clientHeight
|
||||
},
|
||||
mergeConfig () {
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { init } = this
|
||||
|
||||
init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import ScrollBoard from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(ScrollBoard.name, ScrollBoard)
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
.dv-scroll-board {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
.dv-scroll-board .text {
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.dv-scroll-board .header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 15px;
|
||||
}
|
||||
.dv-scroll-board .header .header-item {
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.dv-scroll-board .rows {
|
||||
overflow: hidden;
|
||||
}
|
||||
.dv-scroll-board .rows .row-item {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.dv-scroll-board .rows .ceil {
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.dv-scroll-board .rows .index {
|
||||
border-radius: 3px;
|
||||
padding: 0px 3px;
|
||||
}
|
||||
|
|
@ -0,0 +1,356 @@
|
|||
<template>
|
||||
<div class="dv-scroll-board" :ref="ref">
|
||||
<div class="header" v-if="header.length && mergedConfig" :style="`background-color: ${mergedConfig.headerBGC};`">
|
||||
<div
|
||||
class="header-item"
|
||||
v-for="(headerItem, i) in header"
|
||||
:key="headerItem + i"
|
||||
:style="`
|
||||
height: ${mergedConfig.headerHeight}px;
|
||||
line-height: ${mergedConfig.headerHeight}px;
|
||||
width: ${widths[i]}px;
|
||||
`"
|
||||
:align="aligns[i]"
|
||||
v-html="headerItem"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="mergedConfig"
|
||||
class="rows"
|
||||
:style="`height: ${height - (header.length ? mergedConfig.headerHeight : 0)}px;`"
|
||||
>
|
||||
<div
|
||||
class="row-item"
|
||||
v-for="(row, ri) in rows"
|
||||
:key="row.toString() + row.scroll"
|
||||
:style="`
|
||||
height: ${heights[ri]}px;
|
||||
line-height: ${heights[ri]}px;
|
||||
background-color: ${mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
|
||||
`"
|
||||
>
|
||||
<div
|
||||
class="ceil"
|
||||
v-for="(ceil, ci) in row.ceils"
|
||||
:key="ceil + ri + ci"
|
||||
:style="`width: ${widths[ci]}px;`"
|
||||
:align="aligns[ci]"
|
||||
v-html="ceil"
|
||||
@click="emitEvent(ri, ci, row, ceil)"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</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: 'DvScrollBoard',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'scroll-board',
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Board header
|
||||
* @type {Array<String>}
|
||||
* @default header = []
|
||||
* @example header = ['column1', 'column2', 'column3']
|
||||
*/
|
||||
header: [],
|
||||
/**
|
||||
* @description Board data
|
||||
* @type {Array<Array>}
|
||||
* @default data = []
|
||||
*/
|
||||
data: [],
|
||||
/**
|
||||
* @description Row num
|
||||
* @type {Number}
|
||||
* @default rowNum = 5
|
||||
*/
|
||||
rowNum: 5,
|
||||
/**
|
||||
* @description Header background color
|
||||
* @type {String}
|
||||
* @default headerBGC = '#00BAFF'
|
||||
*/
|
||||
headerBGC: '#00BAFF',
|
||||
/**
|
||||
* @description Odd row background color
|
||||
* @type {String}
|
||||
* @default oddRowBGC = '#003B51'
|
||||
*/
|
||||
oddRowBGC: '#003B51',
|
||||
/**
|
||||
* @description Even row background color
|
||||
* @type {String}
|
||||
* @default evenRowBGC = '#003B51'
|
||||
*/
|
||||
evenRowBGC: '#0A2732',
|
||||
/**
|
||||
* @description Scroll wait time
|
||||
* @type {Number}
|
||||
* @default waitTime = 2000
|
||||
*/
|
||||
waitTime: 2000,
|
||||
/**
|
||||
* @description Header height
|
||||
* @type {Number}
|
||||
* @default headerHeight = 35
|
||||
*/
|
||||
headerHeight: 35,
|
||||
/**
|
||||
* @description Column width
|
||||
* @type {Array<Number>}
|
||||
* @default columnWidth = []
|
||||
*/
|
||||
columnWidth: [],
|
||||
/**
|
||||
* @description Column align
|
||||
* @type {Array<String>}
|
||||
* @default align = []
|
||||
* @example align = ['left', 'center', 'right']
|
||||
*/
|
||||
align: [],
|
||||
/**
|
||||
* @description Show index
|
||||
* @type {Boolean}
|
||||
* @default index = false
|
||||
*/
|
||||
index: false,
|
||||
/**
|
||||
* @description Carousel type
|
||||
* @type {String}
|
||||
* @default carousel = 'single'
|
||||
* @example carousel = 'single' | 'page'
|
||||
*/
|
||||
carousel: 'single'
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
||||
header: [],
|
||||
|
||||
rowsData: [],
|
||||
|
||||
rows: [],
|
||||
|
||||
widths: [],
|
||||
|
||||
heights: [],
|
||||
|
||||
avgHeight: 0,
|
||||
|
||||
aligns: [],
|
||||
|
||||
animationIndex: 0,
|
||||
|
||||
animationHandler: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
const { stopAnimation, calcData } = this
|
||||
|
||||
stopAnimation()
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
},
|
||||
onResize () {
|
||||
const { mergedConfig, calcWidths, calcHeights } = this
|
||||
|
||||
if (!mergedConfig) return
|
||||
|
||||
calcWidths()
|
||||
|
||||
calcHeights()
|
||||
},
|
||||
calcData () {
|
||||
const { mergeConfig, calcHeaderData, calcRowsData } = this
|
||||
|
||||
mergeConfig()
|
||||
|
||||
calcHeaderData()
|
||||
|
||||
calcRowsData()
|
||||
|
||||
const { calcWidths, calcHeights, calcAligns } = this
|
||||
|
||||
calcWidths()
|
||||
|
||||
calcHeights()
|
||||
|
||||
calcAligns()
|
||||
|
||||
const { animation } = this
|
||||
|
||||
animation(true)
|
||||
},
|
||||
mergeConfig () {
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
},
|
||||
calcHeaderData () {
|
||||
let { header, index } = this.mergedConfig
|
||||
|
||||
if (!header.length) {
|
||||
this.header = []
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
header = [...header]
|
||||
|
||||
if (index) header.unshift('#')
|
||||
|
||||
this.header = header
|
||||
},
|
||||
calcRowsData () {
|
||||
let { data, index, headerBGC, rowNum } = this.mergedConfig
|
||||
|
||||
if (index) {
|
||||
data = data.map((row, i) => {
|
||||
row = [...row]
|
||||
|
||||
const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</spand>`
|
||||
|
||||
row.unshift(indexTag)
|
||||
|
||||
return row
|
||||
})
|
||||
}
|
||||
|
||||
data = data.map((ceils, i) => ({ ceils, rowIndex: i }))
|
||||
|
||||
const rowLength = data.length
|
||||
|
||||
if (rowLength > rowNum && rowLength < 2 * rowNum) {
|
||||
data = [...data, ...data]
|
||||
}
|
||||
|
||||
data = data.map((d, i) => ({ ...d, scroll: i }))
|
||||
|
||||
this.rowsData = data
|
||||
this.rows = data
|
||||
},
|
||||
calcWidths () {
|
||||
const { width, mergedConfig, rowsData } = this
|
||||
|
||||
const { columnWidth } = mergedConfig
|
||||
|
||||
const usedWidth = columnWidth.reduce((all, w) => all + w, 0)
|
||||
|
||||
const columnNum = rowsData[0] ? rowsData[0].ceils.length : 0
|
||||
|
||||
const avgWidth = (width - usedWidth) / (columnNum - columnWidth.length)
|
||||
|
||||
const widths = new Array(columnNum).fill(avgWidth)
|
||||
|
||||
this.widths = deepMerge(widths, columnWidth)
|
||||
},
|
||||
calcHeights (onresize = false) {
|
||||
const { height, mergedConfig, header } = this
|
||||
|
||||
const { headerHeight, rowNum, data } = mergedConfig
|
||||
|
||||
let allHeight = height
|
||||
|
||||
if (header.length) allHeight -= headerHeight
|
||||
|
||||
const avgHeight = allHeight / rowNum
|
||||
|
||||
this.avgHeight = avgHeight
|
||||
|
||||
if (!onresize) this.heights = new Array(data.length).fill(avgHeight)
|
||||
},
|
||||
calcAligns () {
|
||||
const { header, mergedConfig } = this
|
||||
|
||||
const columnNum = header.length
|
||||
|
||||
let aligns = new Array(columnNum).fill('left')
|
||||
|
||||
const { align } = mergedConfig
|
||||
|
||||
this.aligns = deepMerge(aligns, align)
|
||||
},
|
||||
async animation (start = false) {
|
||||
let { avgHeight, animationIndex, mergedConfig, rowsData, animation } = this
|
||||
|
||||
const { waitTime, carousel, rowNum } = mergedConfig
|
||||
|
||||
const rowLength = rowsData.length
|
||||
|
||||
if (rowNum >= rowLength) return
|
||||
|
||||
if (start) await new Promise(resolve => setTimeout(resolve, waitTime))
|
||||
|
||||
const animationNum = carousel === 'single' ? 1 : rowNum
|
||||
|
||||
let rows = rowsData.slice(animationIndex)
|
||||
rows.push(...rowsData.slice(0, animationIndex))
|
||||
|
||||
this.rows = rows
|
||||
this.heights = new Array(rowLength).fill(avgHeight)
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 300))
|
||||
|
||||
this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
|
||||
|
||||
animationIndex += animationNum
|
||||
|
||||
const back = animationIndex - rowLength
|
||||
if (back >= 0) animationIndex = back
|
||||
|
||||
this.animationIndex = animationIndex
|
||||
this.animationHandler = setTimeout(animation, waitTime - 300)
|
||||
},
|
||||
stopAnimation () {
|
||||
const { animationHandler } = this
|
||||
|
||||
if (!animationHandler) return
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
},
|
||||
emitEvent (ri, ci, row, ceil) {
|
||||
const { ceils, rowIndex } = row
|
||||
|
||||
this.$emit('click', {
|
||||
row: ceils,
|
||||
ceil,
|
||||
rowIndex,
|
||||
columnIndex: ci
|
||||
})
|
||||
}
|
||||
},
|
||||
destroyed () {
|
||||
const { stopAnimation } = this
|
||||
|
||||
stopAnimation()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import ScrollRankingBoard from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(ScrollRankingBoard.name, ScrollRankingBoard)
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
.dv-scroll-ranking-board {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dv-scroll-ranking-board .row-item {
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dv-scroll-ranking-board .ranking-info {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
.dv-scroll-ranking-board .ranking-info .rank {
|
||||
width: 40px;
|
||||
color: #1370fb;
|
||||
}
|
||||
.dv-scroll-ranking-board .ranking-info .info-name {
|
||||
flex: 1;
|
||||
}
|
||||
.dv-scroll-ranking-board .ranking-column {
|
||||
border-bottom: 2px solid rgba(19, 112, 251, 0.5);
|
||||
margin-top: 5px;
|
||||
}
|
||||
.dv-scroll-ranking-board .ranking-column .inside-column {
|
||||
position: relative;
|
||||
height: 6px;
|
||||
background-color: #1370fb;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dv-scroll-ranking-board .ranking-column .shine {
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
top: 2px;
|
||||
height: 2px;
|
||||
width: 50px;
|
||||
transform: translateX(-100%);
|
||||
background: radial-gradient(#28f8ff 5%, transparent 80%);
|
||||
animation: shine 3s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes shine {
|
||||
80% {
|
||||
left: 0%;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
<template>
|
||||
<div class="dv-scroll-ranking-board" :ref="ref">
|
||||
<div
|
||||
class="row-item"
|
||||
v-for="(item, i) in rows"
|
||||
:key="item.toString() + item.scroll"
|
||||
:style="`height: ${heights[i]}px;`"
|
||||
>
|
||||
<div class="ranking-info">
|
||||
<div class="rank">No.{{ item.ranking }}</div>
|
||||
<div class="info-name">{{ item.name }}</div>
|
||||
<div class="ranking-value">{{ item.value }}</div>
|
||||
</div>
|
||||
|
||||
<div class="ranking-column">
|
||||
<div
|
||||
class="inside-column"
|
||||
:style="`width: ${item.percent}%;`"
|
||||
>
|
||||
<div class="shine" />
|
||||
</div>
|
||||
</div>
|
||||
</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: 'DvScrollRankingBoard',
|
||||
mixins: [autoResize],
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
ref: 'scroll-ranking-board',
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Board data
|
||||
* @type {Array<Object>}
|
||||
* @default data = []
|
||||
*/
|
||||
data: [],
|
||||
/**
|
||||
* @description Row num
|
||||
* @type {Number}
|
||||
* @default rowNum = 5
|
||||
*/
|
||||
rowNum: 5,
|
||||
/**
|
||||
* @description Scroll wait time
|
||||
* @type {Number}
|
||||
* @default waitTime = 2000
|
||||
*/
|
||||
waitTime: 2000,
|
||||
/**
|
||||
* @description Carousel type
|
||||
* @type {String}
|
||||
* @default carousel = 'single'
|
||||
* @example carousel = 'single' | 'page'
|
||||
*/
|
||||
carousel: 'single'
|
||||
},
|
||||
|
||||
mergedConfig: null,
|
||||
|
||||
rowsData: [],
|
||||
|
||||
rows: [],
|
||||
|
||||
heights: [],
|
||||
|
||||
animationIndex: 0,
|
||||
|
||||
animationHandler: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
const { stopAnimation, calcData } = this
|
||||
|
||||
stopAnimation()
|
||||
|
||||
calcData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterAutoResizeMixinInit () {
|
||||
const { calcData } = this
|
||||
|
||||
calcData()
|
||||
},
|
||||
onResize () {
|
||||
const { mergedConfig, calcHeights } = this
|
||||
|
||||
if (!mergedConfig) return
|
||||
|
||||
calcHeights(true)
|
||||
},
|
||||
calcData () {
|
||||
const { mergeConfig, calcRowsData } = this
|
||||
|
||||
mergeConfig()
|
||||
|
||||
calcRowsData()
|
||||
|
||||
const { calcHeights } = this
|
||||
|
||||
calcHeights()
|
||||
|
||||
const { animation } = this
|
||||
|
||||
animation(true)
|
||||
},
|
||||
mergeConfig () {
|
||||
let { config, defaultConfig } = this
|
||||
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
|
||||
},
|
||||
calcRowsData () {
|
||||
let { data, rowNum } = this.mergedConfig
|
||||
|
||||
data.sort(({ value: a }, { value: b }) => {
|
||||
if (a > b) return -1
|
||||
if (a < b) return 1
|
||||
if (a === b) return 0
|
||||
})
|
||||
|
||||
const value = data.map(({ value }) => value)
|
||||
|
||||
const max = Math.max(...value) || 0
|
||||
|
||||
data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: row.value / max * 100 }))
|
||||
|
||||
const rowLength = data.length
|
||||
|
||||
if (rowLength > rowNum && rowLength < 2 * rowNum) {
|
||||
data = [...data, ...data]
|
||||
}
|
||||
|
||||
data = data.map((d, i) => ({ ...d, scroll: i }))
|
||||
|
||||
this.rowsData = data
|
||||
this.rows = data
|
||||
},
|
||||
calcHeights (onresize = false) {
|
||||
const { height, mergedConfig } = this
|
||||
|
||||
const { rowNum, data } = mergedConfig
|
||||
|
||||
const avgHeight = height / rowNum
|
||||
|
||||
this.avgHeight = avgHeight
|
||||
|
||||
if (!onresize) this.heights = new Array(data.length).fill(avgHeight)
|
||||
},
|
||||
async animation (start = false) {
|
||||
let { avgHeight, animationIndex, mergedConfig, rowsData, animation } = this
|
||||
|
||||
const { waitTime, carousel, rowNum } = mergedConfig
|
||||
|
||||
const rowLength = rowsData.length
|
||||
|
||||
if (rowNum >= rowLength) return
|
||||
|
||||
if (start) await new Promise(resolve => setTimeout(resolve, waitTime))
|
||||
|
||||
const animationNum = carousel === 'single' ? 1 : rowNum
|
||||
|
||||
let rows = rowsData.slice(animationIndex)
|
||||
rows.push(...rowsData.slice(0, animationIndex))
|
||||
|
||||
this.rows = rows
|
||||
this.heights = new Array(rowLength).fill(avgHeight)
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve, 300))
|
||||
|
||||
this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
|
||||
|
||||
animationIndex += animationNum
|
||||
|
||||
const back = animationIndex - rowLength
|
||||
if (back >= 0) animationIndex = back
|
||||
|
||||
this.animationIndex = animationIndex
|
||||
this.animationHandler = setTimeout(animation, waitTime - 300)
|
||||
},
|
||||
stopAnimation () {
|
||||
const { animationHandler } = this
|
||||
|
||||
if (!animationHandler) return
|
||||
|
||||
clearTimeout(animationHandler)
|
||||
}
|
||||
},
|
||||
destroyed () {
|
||||
const { stopAnimation } = this
|
||||
|
||||
stopAnimation()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import './src/main.css'
|
||||
import WaterLevelPond from './src/main.vue'
|
||||
|
||||
export default function (Vue) {
|
||||
Vue.component(WaterLevelPond.name, WaterLevelPond)
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
.dv-water-pond-level {
|
||||
position: relative;
|
||||
}
|
||||
.dv-water-pond-level svg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
.dv-water-pond-level text {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
text-anchor: middle;
|
||||
dominant-baseline: middle;
|
||||
}
|
||||
.dv-water-pond-level ellipse,
|
||||
.dv-water-pond-level rect {
|
||||
fill: none;
|
||||
stroke-width: 3;
|
||||
}
|
||||
.dv-water-pond-level canvas {
|
||||
margin-top: 8px;
|
||||
margin-left: 8px;
|
||||
width: calc(100% - 16px);
|
||||
height: calc(100% - 16px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -0,0 +1,317 @@
|
|||
<template>
|
||||
<div class="dv-water-pond-level">
|
||||
<svg v-if="renderer">
|
||||
<defs>
|
||||
<linearGradient :id="gradientId" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop v-for="lc in svgBorderGradient" :key="lc[0]"
|
||||
:offset="lc[0]"
|
||||
:stop-color="lc[1]" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<text
|
||||
v-if="renderer"
|
||||
:stroke="`url(#${gradientId})`"
|
||||
:fill="`url(#${gradientId})`"
|
||||
:x="renderer.area[0] / 2 + 8"
|
||||
:y="renderer.area[1] / 2 + 8"
|
||||
>
|
||||
{{ details }}
|
||||
</text>
|
||||
|
||||
<ellipse v-if="!shape || shape === 'round'"
|
||||
:cx="renderer.area[0] / 2 + 8"
|
||||
:cy="renderer.area[1] / 2 + 8"
|
||||
:rx="renderer.area[0] / 2 + 5"
|
||||
:ry="renderer.area[1] / 2 + 5"
|
||||
:stroke="`url(#${gradientId})`" />
|
||||
|
||||
<rect v-else
|
||||
x="2" y="2"
|
||||
:rx="shape === 'roundRect' ? 10 : 0"
|
||||
:ry="shape === 'roundRect' ? 10 : 0"
|
||||
:width="renderer.area[0] + 12"
|
||||
:height="renderer.area[1] + 12"
|
||||
:stroke="`url(#${gradientId})`" />
|
||||
</svg>
|
||||
|
||||
<canvas ref="water-pond-level" :style="`border-radius: ${radius};`" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'
|
||||
|
||||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
|
||||
|
||||
import CRender from '@jiaminghi/c-render'
|
||||
|
||||
export default {
|
||||
name: 'DvWaterLevelPond',
|
||||
props: {
|
||||
config: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
gradientId: `water-level-pond-${(new Date()).getTime()}`,
|
||||
|
||||
defaultConfig: {
|
||||
/**
|
||||
* @description Data
|
||||
* @type {Array<Number>}
|
||||
* @default data = []
|
||||
* @example data = [60, 40]
|
||||
*/
|
||||
data: [],
|
||||
/**
|
||||
* @description Shape of wanter level pond
|
||||
* @type {String}
|
||||
* @default shape = 'rect'
|
||||
* @example shape = 'rect' | 'roundRect' | 'round'
|
||||
*/
|
||||
shape: 'rect',
|
||||
/**
|
||||
* @description Water wave number
|
||||
* @type {Number}
|
||||
* @default waveNum = 3
|
||||
*/
|
||||
waveNum: 3,
|
||||
/**
|
||||
* @description Water wave height (px)
|
||||
* @type {Number}
|
||||
* @default waveHeight = 40
|
||||
*/
|
||||
waveHeight: 40,
|
||||
/**
|
||||
* @description Wave opacity
|
||||
* @type {Number}
|
||||
* @default waveOpacity = 0.4
|
||||
*/
|
||||
waveOpacity: 0.4,
|
||||
/**
|
||||
* @description Colors (Hex|rgb|rgba)
|
||||
* @type {Array<String>}
|
||||
* @default colors = ['#00BAFF', '#3DE7C9']
|
||||
*/
|
||||
colors: ['#3DE7C9', '#00BAFF'],
|
||||
/**
|
||||
* @description Formatter
|
||||
* @type {String}
|
||||
* @default formatter = '{value}%'
|
||||
*/
|
||||
formatter: '{value}%'
|
||||
},
|
||||
|
||||
mergedConfig: {},
|
||||
|
||||
renderer: null,
|
||||
|
||||
svgBorderGradient: [],
|
||||
|
||||
details: '',
|
||||
|
||||
waves: [],
|
||||
|
||||
animation: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
radius () {
|
||||
const { shape } = this.mergedConfig
|
||||
|
||||
if (shape === 'round') return '50%'
|
||||
|
||||
if (shape === 'rect') return '0'
|
||||
|
||||
if (shape === 'roundRect') return '10px'
|
||||
|
||||
return '0'
|
||||
},
|
||||
shape () {
|
||||
const { shape } = this.mergedConfig
|
||||
|
||||
if (!shape) return 'rect'
|
||||
|
||||
return shape
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config () {
|
||||
const { calcData, renderer } = this
|
||||
|
||||
renderer.delAllGraph()
|
||||
|
||||
this.waves = []
|
||||
|
||||
setTimeout(calcData, 0)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const { initRender, config, calcData } = this
|
||||
|
||||
initRender()
|
||||
|
||||
if (!config) return
|
||||
|
||||
calcData()
|
||||
},
|
||||
initRender () {
|
||||
const { $refs } = this
|
||||
|
||||
this.renderer = new CRender($refs['water-pond-level'])
|
||||
},
|
||||
calcData () {
|
||||
const { mergeConfig, calcSvgBorderGradient, calcDetails } = this
|
||||
|
||||
mergeConfig()
|
||||
|
||||
calcSvgBorderGradient()
|
||||
|
||||
calcDetails()
|
||||
|
||||
const { addWave, animationWave } = this
|
||||
|
||||
addWave()
|
||||
|
||||
animationWave()
|
||||
},
|
||||
mergeConfig () {
|
||||
const { config, defaultConfig } = this
|
||||
|
||||
this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config)
|
||||
},
|
||||
calcSvgBorderGradient () {
|
||||
const { colors } = this.mergedConfig
|
||||
|
||||
const colorNum = colors.length
|
||||
|
||||
const colorOffsetGap = 100 / (colorNum - 1)
|
||||
|
||||
this.svgBorderGradient = colors.map((c, i) => [colorOffsetGap * i, c])
|
||||
},
|
||||
calcDetails () {
|
||||
const { data, formatter } = this.mergedConfig
|
||||
|
||||
if (!data.length) {
|
||||
this.details = ''
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
const maxValue = Math.max(...data)
|
||||
|
||||
this.details = formatter.replace('{value}', maxValue)
|
||||
},
|
||||
addWave () {
|
||||
const { renderer, getWaveShapes, getWaveStyle, drawed } = this
|
||||
|
||||
const shapes = getWaveShapes()
|
||||
const style = getWaveStyle()
|
||||
|
||||
this.waves = shapes.map(shape => renderer.add({
|
||||
name: 'smoothline',
|
||||
animationFrame: 300,
|
||||
shape,
|
||||
style,
|
||||
drawed
|
||||
}))
|
||||
},
|
||||
getWaveShapes () {
|
||||
const { mergedConfig, renderer, mergeOffset } = this
|
||||
|
||||
const { waveNum, waveHeight, data } = mergedConfig
|
||||
|
||||
const [w, h] = renderer.area
|
||||
|
||||
const pointsNum = waveNum * 4 + 4
|
||||
|
||||
const pointXGap = w / waveNum / 2
|
||||
|
||||
return data.map(v => {
|
||||
let points = new Array(pointsNum).fill(0).map((foo, j) => {
|
||||
const x = w - pointXGap * j
|
||||
|
||||
const startY = (1 - v / 100) * h
|
||||
|
||||
const y = j % 2 === 0 ? startY : startY - waveHeight
|
||||
|
||||
return [x, y]
|
||||
})
|
||||
|
||||
points = points.map(p => mergeOffset(p, [pointXGap * 2, 0]))
|
||||
|
||||
return { points }
|
||||
})
|
||||
},
|
||||
mergeOffset ([x, y], [ox, oy]) {
|
||||
return [x + ox, y + oy]
|
||||
},
|
||||
getWaveStyle () {
|
||||
const { renderer, mergedConfig } = this
|
||||
|
||||
const h = renderer.area[1]
|
||||
|
||||
return {
|
||||
gradientColor: mergedConfig.colors,
|
||||
gradientType: 'linear',
|
||||
gradientParams: [0, 0, 0, h],
|
||||
gradientWith: 'fill',
|
||||
opacity: mergedConfig.waveOpacity,
|
||||
translate: [0, 0]
|
||||
}
|
||||
},
|
||||
drawed ({ shape: { points } }, { ctx, area }) {
|
||||
const firstPoint = points[0]
|
||||
const lastPoint = points.slice(-1)[0]
|
||||
|
||||
const h = area[1]
|
||||
|
||||
ctx.lineTo(lastPoint[0], h)
|
||||
ctx.lineTo(firstPoint[0], h)
|
||||
|
||||
ctx.closePath()
|
||||
|
||||
ctx.fill()
|
||||
},
|
||||
async animationWave (repeat = 1) {
|
||||
const { waves, renderer, animation } = this
|
||||
|
||||
if (animation) return
|
||||
|
||||
this.animation = true
|
||||
|
||||
const w = renderer.area[0]
|
||||
|
||||
waves.forEach(graph => {
|
||||
graph.attr('style', { translate: [0, 0] })
|
||||
|
||||
graph.animation('style', {
|
||||
translate: [w, 0]
|
||||
}, true)
|
||||
})
|
||||
|
||||
await renderer.launchAnimation()
|
||||
|
||||
this.animation = false
|
||||
|
||||
if (!renderer.graphs.length) return
|
||||
|
||||
this.animationWave(repeat + 1)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { init } = this
|
||||
|
||||
init()
|
||||
},
|
||||
beforeDestroy () {
|
||||
const { renderer } = this
|
||||
|
||||
renderer.delAllGraph()
|
||||
|
||||
this.waves = []
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
/**
|
||||
* EXPORT COMPONENTS
|
||||
*/
|
||||
export { default as activeRingChart } from './components/activeRingChart/index'
|
||||
export { default as borderBox1 } from './components/borderBox1/index'
|
||||
export { default as borderBox2 } from './components/borderBox2/index'
|
||||
export { default as borderBox3 } from './components/borderBox3/index'
|
||||
export { default as borderBox4 } from './components/borderBox4/index'
|
||||
export { default as borderBox5 } from './components/borderBox5/index'
|
||||
export { default as borderBox6 } from './components/borderBox6/index'
|
||||
export { default as borderBox7 } from './components/borderBox7/index'
|
||||
export { default as borderBox8 } from './components/borderBox8/index'
|
||||
export { default as borderBox9 } from './components/borderBox9/index'
|
||||
export { default as charts } from './components/charts/index'
|
||||
export { default as conicalColumnChart } from './components/conicalColumnChart/index'
|
||||
export { default as decoration1 } from './components/decoration1/index'
|
||||
export { default as decoration10 } from './components/decoration10/index'
|
||||
export { default as decoration2 } from './components/decoration2/index'
|
||||
export { default as decoration3 } from './components/decoration3/index'
|
||||
export { default as decoration4 } from './components/decoration4/index'
|
||||
export { default as decoration5 } from './components/decoration5/index'
|
||||
export { default as decoration6 } from './components/decoration6/index'
|
||||
export { default as decoration7 } from './components/decoration7/index'
|
||||
export { default as decoration8 } from './components/decoration8/index'
|
||||
export { default as decoration9 } from './components/decoration9/index'
|
||||
export { default as digitalFlop } from './components/digitalFlop/index'
|
||||
export { default as flylineChart } from './components/flylineChart/index'
|
||||
export { default as fullScreenContainer } from './components/fullScreenContainer/index'
|
||||
export { default as loading } from './components/loading/index'
|
||||
export { default as percentPond } from './components/percentPond/index'
|
||||
export { default as scrollBoard } from './components/scrollBoard/index'
|
||||
export { default as scrollRankingBoard } from './components/scrollRankingBoard/index'
|
||||
export { default as waterLevelPond } from './components/waterLevelPond/index'
|
||||
/**
|
||||
* IMPORT COMPONENTS
|
||||
*/
|
||||
import fullScreenContainer from './components/fullScreenContainer/index'
|
||||
import loading from './components/loading/index'
|
||||
|
||||
// border box
|
||||
import borderBox1 from './components/borderBox1/index'
|
||||
import borderBox2 from './components/borderBox2/index'
|
||||
import borderBox3 from './components/borderBox3/index'
|
||||
import borderBox4 from './components/borderBox4/index'
|
||||
import borderBox5 from './components/borderBox5/index'
|
||||
import borderBox6 from './components/borderBox6/index'
|
||||
import borderBox7 from './components/borderBox7/index'
|
||||
import borderBox8 from './components/borderBox8/index'
|
||||
import borderBox9 from './components/borderBox9/index'
|
||||
|
||||
// decoration
|
||||
import decoration1 from './components/decoration1/index'
|
||||
import decoration2 from './components/decoration2/index'
|
||||
import decoration3 from './components/decoration3/index'
|
||||
import decoration4 from './components/decoration4/index'
|
||||
import decoration5 from './components/decoration5/index'
|
||||
import decoration6 from './components/decoration6/index'
|
||||
import decoration7 from './components/decoration7/index'
|
||||
import decoration8 from './components/decoration8/index'
|
||||
import decoration9 from './components/decoration9/index'
|
||||
import decoration10 from './components/decoration10/index'
|
||||
|
||||
// charts
|
||||
import charts from './components/charts/index'
|
||||
|
||||
import activeRingChart from './components/activeRingChart'
|
||||
import waterLevelPond from './components/waterLevelPond/index'
|
||||
import percentPond from './components/percentPond/index'
|
||||
import flylineChart from './components/flylineChart'
|
||||
import conicalColumnChart from './components/conicalColumnChart'
|
||||
import digitalFlop from './components/digitalFlop'
|
||||
import scrollBoard from './components/scrollBoard/index'
|
||||
import scrollRankingBoard from './components/scrollRankingBoard/index'
|
||||
|
||||
/**
|
||||
* USE COMPONENTS
|
||||
*/
|
||||
export default function (Vue) {
|
||||
Vue.use(fullScreenContainer)
|
||||
Vue.use(loading)
|
||||
|
||||
// border box
|
||||
Vue.use(borderBox1)
|
||||
Vue.use(borderBox2)
|
||||
Vue.use(borderBox3)
|
||||
Vue.use(borderBox4)
|
||||
Vue.use(borderBox5)
|
||||
Vue.use(borderBox6)
|
||||
Vue.use(borderBox7)
|
||||
Vue.use(borderBox8)
|
||||
Vue.use(borderBox9)
|
||||
|
||||
// decoration
|
||||
Vue.use(decoration1)
|
||||
Vue.use(decoration2)
|
||||
Vue.use(decoration3)
|
||||
Vue.use(decoration4)
|
||||
Vue.use(decoration5)
|
||||
Vue.use(decoration6)
|
||||
Vue.use(decoration7)
|
||||
Vue.use(decoration8)
|
||||
Vue.use(decoration9)
|
||||
Vue.use(decoration10)
|
||||
|
||||
// charts
|
||||
Vue.use(charts)
|
||||
|
||||
Vue.use(activeRingChart)
|
||||
Vue.use(waterLevelPond)
|
||||
Vue.use(percentPond)
|
||||
Vue.use(flylineChart)
|
||||
Vue.use(conicalColumnChart)
|
||||
Vue.use(digitalFlop)
|
||||
Vue.use(scrollBoard)
|
||||
Vue.use(scrollRankingBoard)
|
||||
}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import { debounce, observerDomResize } from '../util/index'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dom: '',
|
||||
|
||||
width: 0,
|
||||
height: 0,
|
||||
|
||||
debounceInitWHFun: '',
|
||||
|
||||
domObserver: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async autoResizeMixinInit () {
|
||||
const { initWH, getDebounceInitWHFun, bindDomResizeCallback, afterAutoResizeMixinInit } = this
|
||||
|
||||
await initWH(false)
|
||||
|
||||
getDebounceInitWHFun()
|
||||
|
||||
bindDomResizeCallback()
|
||||
|
||||
if (typeof afterAutoResizeMixinInit === 'function') afterAutoResizeMixinInit()
|
||||
},
|
||||
initWH (resize = true) {
|
||||
const { $nextTick, $refs, ref, onResize } = this
|
||||
|
||||
return new Promise(resolve => {
|
||||
$nextTick(e => {
|
||||
const dom = this.dom = $refs[ref]
|
||||
|
||||
this.width = dom.clientWidth
|
||||
this.height = dom.clientHeight
|
||||
|
||||
if (typeof onResize === 'function' && resize) onResize()
|
||||
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
},
|
||||
getDebounceInitWHFun () {
|
||||
const { initWH } = this
|
||||
|
||||
this.debounceInitWHFun = debounce(100, initWH)
|
||||
},
|
||||
bindDomResizeCallback () {
|
||||
const { dom, debounceInitWHFun } = this
|
||||
|
||||
this.domObserver = observerDomResize(dom, debounceInitWHFun)
|
||||
|
||||
window.addEventListener('resize', debounceInitWHFun)
|
||||
},
|
||||
unbindDomResizeCallback () {
|
||||
let { domObserver, debounceInitWHFun } = this
|
||||
|
||||
domObserver.disconnect()
|
||||
domObserver.takeRecords()
|
||||
domObserver = null
|
||||
|
||||
window.removeEventListener('resize', debounceInitWHFun)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const { autoResizeMixinInit } = this
|
||||
|
||||
autoResizeMixinInit()
|
||||
},
|
||||
beforeDestroy () {
|
||||
const { unbindDomResizeCallback } = this
|
||||
|
||||
unbindDomResizeCallback()
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
export function randomExtend (minNum, maxNum) {
|
||||
if (arguments.length === 1) {
|
||||
return parseInt(Math.random() * minNum + 1, 10)
|
||||
} else {
|
||||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
|
||||
}
|
||||
}
|
||||
|
||||
export function debounce (delay, callback) {
|
||||
let lastTime
|
||||
|
||||
return function () {
|
||||
clearTimeout(lastTime)
|
||||
|
||||
const [that, args] = [this, arguments]
|
||||
|
||||
lastTime = setTimeout(() => {
|
||||
callback.apply(that, args)
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
|
||||
export function observerDomResize (dom, callback) {
|
||||
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
|
||||
|
||||
const observer = new MutationObserver(callback)
|
||||
|
||||
observer.observe(dom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
|
||||
|
||||
return observer
|
||||
}
|
||||
|
||||
export function getPointDistance (pointOne, pointTwo) {
|
||||
const minusX = Math.abs(pointOne[0] - pointTwo[0])
|
||||
|
||||
const minusY = Math.abs(pointOne[1] - pointTwo[1])
|
||||
|
||||
return Math.sqrt(minusX * minusX + minusY * minusY)
|
||||
}
|
||||
Loading…
Reference in New Issue