版本升级

删除冗余的renderer判断

CHANGELOG.md

@@ -1,8 +1,71 @@
+# 2.10.0-alpha (2020-09-09)
+
+### New
+
+- **decoration12:** New decoration(Radar scan).
+
+### Optmization
+
+- **decoration** add `dur` configuration.
+- **activeRingChart** add `digitalFlopUnit` configuration.
+
+# 2.9.9-alpha (2020-08-25)
+
+### Optmization
+
+- **borderBox:** Canonical class name.
+- **autoResize(mixin):** Add exception prompt.
+
+# 2.9.8-alpha (2020-08-20)
+
+### Optmization
+
+- **scrollRankingBoard:** Add value formatter.
+
+# 2.9.7-alpha (2020-08-19)
+
+### Optmization
+
+- **scrollBoard:** Optimize the update effect of updateRows.
+
+# 2.9.6-alpha (2020-08-05)
+
+### Bug Fixes
+
+- **scrollBoard:** Carousel is abnormal when carousel is page.
+- **scrollRankingBoard:** Carousel is abnormal when carousel is page.
+
+# 2.9.5-alpha (2020-08-05)
+
+### Optmization
+
+- **scrollBoard:** Reduce redundant node rendering.
+- **scrollRankingBoard:** Reduce redundant node rendering.
+- **scrollBoard:** Add api to update row data.
+
+# 2.9.4-alpha (2020-07-03)
+
+### Optmization
+
+- **scrollBoard:** Optimize key value [(#8)](https://github.com/DataV-Team/DataV-React/issues/8).
+
+# 2.9.3-alpha (2020-07-02)
+
+### Perfect
+
+- **uuid:** Optimization of `-` in uuid will cause abnormal svg animation [(#108)](https://github.com/DataV-Team/DataV/issues/108).
+
+# 2.9.2-alpha (2020-06-16)
+
+### Bug Fixes
+
+- **scrollBoard:** reset animationIndex when config upate.
+
 # 2.9.1-alpha (2020-06-16)
 
-### BugFixes
+### Bug Fixes
 
-- **scrollRankingBoard:** Calculation optimization of negative values. [(#101)](https://github.com/DataV-Team/DataV/pull/101).
+- **scrollRankingBoard:** Calculation optimization of negative values [(#101)](https://github.com/DataV-Team/DataV/pull/101).
 
 ### Perfect
 
@@ -106,7 +169,7 @@
 
 # 2.4.7-alpha (2019-10-24)
 
-### perfect
+### Perfect
 
 - **charts:** Optimize memory leaks.
 - **digitalFlop:** Optimize memory leaks.

lib/components/activeRingChart/src/main.vue

@@ -83,6 +83,11 @@ export default {
          * @type {Number}
          */
         digitalFlopToFixed: 0,
+        /**
+         * @description Digital flop unit
+         * @type {String}
+         */
+        digitalFlopUnit: '',
         /**
          * @description CRender animationCurve
          * @type {String}
@@ -122,7 +127,8 @@ export default {
         digitalFlopStyle,
         digitalFlopToFixed,
         data,
-        showOriginValue
+        showOriginValue,
+        digitalFlopUnit
       } = mergedConfig
 
       const value = data.map(({ value }) => value)
@@ -140,7 +146,7 @@ export default {
       }
 
       return {
-        content: showOriginValue ? '{nt}' : '{nt}%',
+        content: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
         number: [displayValue],
         style: digitalFlopStyle,
         toFixed: digitalFlopToFixed

lib/components/borderBox10/src/main.css

@@ -4,7 +4,7 @@
   height: 100%;
   border-radius: 6px;
 }
-.dv-border-box-10 .border {
+.dv-border-box-10 .dv-border-svg-container {
   position: absolute;
   display: block;
 }

lib/components/borderBox10/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
-    <svg class="border" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <polygon :fill="backgroundColor" :points="`
         4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
         4, ${height} 0, ${height - 4} 0, 4
@@ -12,7 +12,7 @@
       height="150px"
       :key="item"
       v-for="item in border"
-      :class="`${item} border`"
+      :class="`${item} dv-border-svg-container`"
     >
       <polygon
         :fill="mergedColor[1]"

lib/components/borderBox11/src/main.css

@@ -10,7 +10,7 @@
   top: 0px;
   left: 0px;
 }
-.dv-border-box-11 .dv-border-svg-container polyline {
+.dv-border-box-11 .dv-border-svg-container > polyline {
   fill: none;
   stroke-width: 1;
 }

lib/components/borderBox2/src/main.css

@@ -10,7 +10,7 @@
   top: 0px;
   left: 0px;
 }
-.dv-border-box-2 .dv-border-svg-container polyline {
+.dv-border-box-2 .dv-border-svg-container > polyline {
   fill: none;
   stroke-width: 1;
 }

lib/components/borderBox3/src/main.css

@@ -10,7 +10,7 @@
   top: 0px;
   left: 0px;
 }
-.dv-border-box-3 .dv-border-svg-container polyline {
+.dv-border-box-3 .dv-border-svg-container > polyline {
   fill: none;
 }
 .dv-border-box-3 .dv-bb3-line1 {

lib/components/borderBox4/src/main.css

@@ -13,7 +13,7 @@
   top: 0px;
   left: 0px;
 }
-.dv-border-box-4 .dv-border-svg-container polyline {
+.dv-border-box-4 .dv-border-svg-container > polyline {
   fill: none;
 }
 .dv-border-box-4 .sw1 {

lib/components/borderBox5/src/main.css

@@ -6,14 +6,14 @@
 .dv-border-box-5 .dv-reverse {
   transform: rotate(180deg);
 }
-.dv-border-box-5 .dv-svg-container {
+.dv-border-box-5 .dv-border-svg-container {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
 }
-.dv-border-box-5 .dv-svg-container polyline {
+.dv-border-box-5 .dv-border-svg-container > polyline {
   fill: none;
 }
 .dv-border-box-5 .dv-bb5-line-1,

lib/components/borderBox5/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-5" :ref="ref">
-    <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+    <svg :class="`dv-border-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
       <polygon :fill="backgroundColor" :points="`
         10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
       `" />

lib/components/borderBox6/src/main.css

@@ -3,14 +3,14 @@
   width: 100%;
   height: 100%;
 }
-.dv-border-box-6 .dv-svg-container {
+.dv-border-box-6 .dv-border-svg-container {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
 }
-.dv-border-box-6 .dv-svg-container polyline {
+.dv-border-box-6 .dv-border-svg-container > polyline {
   fill: none;
   stroke-width: 1;
 }

lib/components/borderBox6/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-6" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <polygon :fill="backgroundColor" :points="`
         9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
       `" />

lib/components/borderBox7/src/main.css

@@ -3,14 +3,14 @@
   width: 100%;
   height: 100%;
 }
-.dv-border-box-7 .dv-svg-container {
+.dv-border-box-7 .dv-border-svg-container {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
 }
-.dv-border-box-7 .dv-svg-container polyline {
+.dv-border-box-7 .dv-border-svg-container > polyline {
   fill: none;
   stroke-linecap: round;
 }

lib/components/borderBox7/src/main.vue

@@ -5,7 +5,7 @@
     :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
     :ref="ref"
   >
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />

lib/components/borderBox8/src/main.css

@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
 }
-.dv-border-box-8 svg {
+.dv-border-box-8 .dv-border-svg-container {
   position: absolute;
   width: 100%;
   height: 100%;

lib/components/borderBox8/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-8" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <defs>
         <path
           :id="path"

lib/components/borderBox9/src/main.css

@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
 }
-.dv-border-box-9 svg {
+.dv-border-box-9 .dv-border-svg-container {
   position: absolute;
   width: 100%;
   height: 100%;

lib/components/borderBox9/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-9" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <defs>
         <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
           <animate

lib/components/decoration12/index.js

@@ -0,0 +1,6 @@
+import './src/main.css'
+import Decoration12 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration12.name, Decoration12)
+}

lib/components/decoration12/src/main.css

@@ -0,0 +1,16 @@
+.dv-decoration-12 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.dv-decoration-12 .decoration-content {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

lib/components/decoration12/src/main.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="dv-decoration-12" :ref="ref">
+    <svg :width="width" :height="height">
+      <defs>
+        <g :id="gId">
+          <path
+            :stroke="pathColor[i]"
+            :stroke-width="width / 2"
+            fill="transparent"
+            v-for="(d, i) in pathD"
+            :key="d"
+            :d="d"
+          />
+        </g>
+
+        <radialGradient
+          :id="gradientId"
+          cx="50%" cy="50%" r="50%"
+        >
+          <stop offset="0%" stop-color="transparent" stop-opacity="1" />
+          <stop offset="100%" :stop-color="fade(mergedColor[1] || defaultColor[1], 30)" stop-opacity="1" />
+        </radialGradient>
+      </defs>
+
+      <circle
+        v-for="r in circleR"
+        :key="r"
+        :r="r"
+        :cx="x"
+        :cy="y"
+        :stroke="mergedColor[1]"
+        :stroke-width="0.5"
+        fill="transparent"
+      />
+
+      <circle
+        r="1"
+        :cx="x"
+        :cy="y"
+        stroke="transparent"
+        :fill="`url(#${gradientId})`"
+      >
+        <animate
+          attributeName="r"
+          :values="`1;${width / 2}`"
+          :dur="`${haloDur}s`"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          :dur="`${haloDur}s`"
+          repeatCount="indefinite"
+        />
+      </circle>
+
+      <circle
+        r="2"
+        :cx="x"
+        :cy="y"
+        :fill="mergedColor[1]"
+      />
+
+      <g v-if="showSplitLine">
+        <polyline
+          v-for="p in splitLinePoints"
+          :key="p"
+          :points="p"
+          :stroke="mergedColor[1]"
+          :stroke-width="0.5"
+          opacity="0.5"
+        />
+      </g>
+
+      <path
+        v-for="d in arcD"
+        :key="d"
+        :d="d"
+        :stroke="mergedColor[1]"
+        stroke-width="2"
+        fill="transparent"
+      />
+
+      <use :xlink:href="`#${gId}`">
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          :values="`0, ${x} ${y};360, ${x} ${y}`"
+          :dur="`${scanDur}s`"
+          repeatCount="indefinite"
+        />
+      </use>
+    </svg>
+
+    <div class="decoration-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone, getCircleRadianPoint } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
+
+export default {
+  name: 'DvDecoration12',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    /**
+     * @description Scan animation dur
+     */
+    scanDur: {
+      type: Number,
+      default: 3
+    },
+    /**
+     * @description Halo animation dur
+     */
+    haloDur: {
+      type: Number,
+      default: 2
+    }
+  },
+  data () {
+    const id = uuid()
+    return {
+      ref: 'decoration-12',
+      gId: `decoration-12-g-${id}`,
+      gradientId: `decoration-12-gradient-${id}`,
+
+      defaultColor: ['#2783ce', '#2cf7fe'],
+
+      mergedColor: [],
+
+      pathD: [],
+
+      pathColor: [],
+
+      circleR: [],
+
+      splitLinePoints: [],
+
+      arcD: [],
+
+      segment: 30,
+
+      sectorAngle: Math.PI / 3,
+
+      ringNum: 3,
+
+      ringWidth: 1,
+
+      showSplitLine: true
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  computed: {
+    x () {
+      const { width } = this
+
+      return width / 2
+    },
+    y () {
+      const { height } = this
+
+      return height / 2
+    }
+  },
+  methods: {
+    init () {
+      const { mergeColor, calcPathD, calcPathColor, calcCircleR, calcSplitLinePoints, calcArcD } = this
+
+      mergeColor()
+
+      calcPathD()
+
+      calcPathColor()
+
+      calcCircleR()
+
+      calcSplitLinePoints()
+
+      calcArcD()
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    calcPathD () {
+      const { x, y, width, segment, sectorAngle } = this
+
+      const startAngle = -Math.PI / 2
+      const angleGap = sectorAngle / segment
+      const r = width / 4
+      let lastEndPoints = getCircleRadianPoint(x, y, r, startAngle)
+
+      this.pathD = new Array(segment)
+        .fill('')
+        .map((_, i) => {
+          const endPoints = getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map(_ => _.toFixed(5))
+          const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`
+          lastEndPoints = endPoints
+
+          return d
+        })
+    },
+    calcPathColor () {
+      const { mergedColor: [color], segment } = this
+
+      const colorGap = 100 / (segment - 1)
+
+      this.pathColor = new Array(segment)
+        .fill(color)
+        .map((_, i) => fade(color, 100 - i * colorGap))
+    },
+    calcCircleR () {
+      const { segment, ringNum, width, ringWidth } = this
+
+      const radiusGap = (width / 2 - ringWidth / 2) / ringNum
+
+      this.circleR = new Array(ringNum)
+        .fill(0)
+        .map((_, i) => radiusGap * (i + 1))
+    },
+    calcSplitLinePoints () {
+      const { x, y, width } = this
+
+      const angleGap = Math.PI / 6
+      const r = width / 2
+
+      this.splitLinePoints = new Array(6)
+        .fill('')
+        .map((_, i) => {
+          const startAngle = angleGap * (i + 1)
+          const endAngle = startAngle + Math.PI
+          const startPoint = getCircleRadianPoint(x, y, r, startAngle)
+          const endPoint = getCircleRadianPoint(x, y, r, endAngle)
+
+          return `${startPoint.join(',')} ${endPoint.join(',')}`
+        })
+    },
+    calcArcD () {
+      const { x, y, width } = this
+
+      const angleGap = Math.PI / 6
+      const r = width / 2 - 1
+
+      this.arcD = new Array(4)
+        .fill('')
+        .map((_, i) => {
+          const startAngle = angleGap * (3 * i + 1)
+          const endAngle = startAngle + angleGap
+          const startPoint = getCircleRadianPoint(x, y, r, startAngle)
+          const endPoint = getCircleRadianPoint(x, y, r, endAngle)
+
+          return `M${startPoint.join(',')} A${x}, ${y} 0 0 1 ${endPoint.join(',')}`
+        })
+    },
+    afterAutoResizeMixinInit () {
+      const { init } = this
+
+      init()
+    },
+    fade
+  }
+}
+</script>

lib/components/decoration2/src/main.vue

@@ -6,7 +6,7 @@
           :attributeName="reverse ? 'height' : 'width'"
           from="0"
           :to="reverse ? height : width"
-          dur="6s"
+          :dur="`${dur}s`"
           calcMode="spline"
           keyTimes="0;1"
           keySplines=".42,0,.58,1"
@@ -19,7 +19,7 @@
           :attributeName="reverse ? 'y' : 'x'"
           from="0"
           :to="reverse ? height : width"
-          dur="6s"
+          :dur="`${dur}s`"
           calcMode="spline"
           keyTimes="0;1"
           keySplines="0.42,0,0.58,1"
@@ -48,6 +48,10 @@ export default {
     reverse: {
       type: Boolean,
       default: false
+    },
+    dur: {
+      type: Number,
+      default: 6
     }
   },
   data () {

lib/components/decoration3/src/main.vue

@@ -2,25 +2,11 @@
   <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="mergedColor[0]"
-          :x="point[0] - halfPointSideLength"
-          :y="point[1] - halfPointSideLength"
-          :width="pointSideLength"
-          :height="pointSideLength"
-        >
-          <animate
-            v-if="Math.random() > 0.6"
-            attributeName="fill"
-            :values="`${mergedColor.join(';')}`"
-            :dur="Math.random() + 1 + 's'"
-            :begin="Math.random() * 2"
-            repeatCount="indefinite"
-          />
+      <template v-for="(point, i) in points" :key="i">
+        <rect :fill="mergedColor[0]" :x="point[0] - halfPointSideLength" :y="point[1] - halfPointSideLength"
+          :width="pointSideLength" :height="pointSideLength">
+          <animate v-if="Math.random() > 0.6" attributeName="fill" :values="`${mergedColor.join(';')}`"
+            :dur="Math.random() + 1 + 's'" :begin="Math.random() * 2" repeatCount="indefinite" />
         </rect>
       </template>
     </svg>
@@ -28,101 +14,101 @@
 </template>
 
 <script>
-import autoResize from '../../../mixin/autoResize'
+  import autoResize from '../../../mixin/autoResize'
 
-import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+  import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
-import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+  import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
-export default {
-  name: 'DvDecoration3',
-  mixins: [autoResize],
-  props: {
-    color: {
-      type: Array,
-      default: () => ([])
-    }
-  },
-  data () {
-    const pointSideLength = 7
+  export default {
+    name: 'DvDecoration3',
+    mixins: [autoResize],
+    props: {
+      color: {
+        type: Array,
+        default: () => ([])
+      }
+    },
+    data() {
+      const pointSideLength = 7
 
-    return {
-      ref: 'decoration-3',
+      return {
+        ref: 'decoration-3',
 
-      svgWH: [300, 35],
+        svgWH: [300, 35],
 
-      svgScale: [1, 1],
+        svgScale: [1, 1],
 
-      rowNum: 2,
-      rowPoints: 25,
+        rowNum: 2,
+        rowPoints: 25,
 
-      pointSideLength,
-      halfPointSideLength: pointSideLength / 2,
+        pointSideLength,
+        halfPointSideLength: pointSideLength / 2,
 
-      points: [],
+        points: [],
 
-      defaultColor: ['#7acaec', 'transparent'],
+        defaultColor: ['#7acaec', 'transparent'],
 
-      mergedColor: []
-    }
-  },
-  watch: {
-    color () {
+        mergedColor: []
+      }
+    },
+    watch: {
+      color() {
+        const { mergeColor } = this
+
+        mergeColor()
+      }
+    },
+    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()
+      },
+      mergeColor() {
+        const { color, defaultColor } = this
+
+        this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+      }
+    },
+    mounted() {
       const { mergeColor } = this
 
       mergeColor()
     }
-  },
-  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()
-    },
-    mergeColor () {
-      const { color, defaultColor } = this
-
-      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
-    }
-  },
-  mounted () {
-    const { mergeColor } = this
-
-    mergeColor()
   }
-}
 </script>

lib/components/decoration4/src/main.css

@@ -10,12 +10,12 @@
   flex: 1;
 }
 .dv-decoration-4 .normal {
-  animation: ani-height 3s ease-in-out infinite;
+  animation: ani-height ease-in-out infinite;
   left: 50%;
   margin-left: -2px;
 }
 .dv-decoration-4 .reverse {
-  animation: ani-width 3s ease-in-out infinite;
+  animation: ani-width ease-in-out infinite;
   top: 50%;
   margin-top: -2px;
 }

lib/components/decoration4/src/main.vue

@@ -2,7 +2,7 @@
   <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;`"
+      :style="reverse ? `width:${width}px;height:5px;animation-duration:${dur}s` : `width:5px;height:${height}px;animation-duration:${dur}s`"
     >
       <svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
         <polyline
@@ -40,6 +40,10 @@ export default {
     reverse: {
       type: Boolean,
       default: false
+    },
+    dur: {
+      type: Number,
+      default: 3
     }
   },
   data () {

lib/components/decoration5/src/main.vue

@@ -12,7 +12,7 @@
           attributeType="XML"
           :from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
           :to="`0, 0, ${line1Length}, 0`"
-          dur="1.2s"
+          :dur="`${dur}s`"
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
@@ -31,7 +31,7 @@
           attributeType="XML"
           :from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
           :to="`0, 0, ${line2Length}, 0`"
-          dur="1.2s"
+          :dur="`${dur}s`"
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
@@ -59,6 +59,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    dur: {
+      type: Number,
+      default: 1.2
     }
   },
   data () {

lib/components/decoration6/src/main.vue

@@ -1,37 +1,16 @@
 <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="mergedColor[Math.random() > 0.5 ? 0 : 1]"
-          :x="point[0] - halfRectWidth"
-          :y="point[1] - heights[i] / 2"
-          :width="rectWidth"
-          :height="heights[i]"
-        >
-          <animate
-            attributeName="y"
+      <template v-for="(point, i) in points" :key="i">
+        <rect :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]" :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;0.5;1"
-            calcMode="spline"
-            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
-            begin="0s"
-            repeatCount="indefinite"
-          />
-          <animate
-            attributeName="height"
-            :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
-            :dur="`${randoms[i]}s`"
-            keyTimes="0;0.5;1"
-            calcMode="spline"
-            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
-            begin="0s"
-            repeatCount="indefinite"
-          />
+            :dur="`${randoms[i]}s`" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
+            begin="0s" repeatCount="indefinite" />
+          <animate attributeName="height" :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
+            :dur="`${randoms[i]}s`" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
+            begin="0s" repeatCount="indefinite" />
         </rect>
       </template>
     </svg>
@@ -39,115 +18,115 @@
 </template>
 
 <script>
-import autoResize from '../../../mixin/autoResize'
+  import autoResize from '../../../mixin/autoResize'
 
-import { randomExtend } from '../../../util'
+  import { randomExtend } from '../../../util'
 
-import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+  import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
-import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+  import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
-export default {
-  name: 'DvDecoration6',
-  mixins: [autoResize],
-  props: {
-    color: {
-      type: Array,
-      default: () => ([])
-    }
-  },
-  data () {
-    const rectWidth = 7
+  export default {
+    name: 'DvDecoration6',
+    mixins: [autoResize],
+    props: {
+      color: {
+        type: Array,
+        default: () => ([])
+      }
+    },
+    data() {
+      const rectWidth = 7
 
-    return {
-      ref: 'decoration-6',
+      return {
+        ref: 'decoration-6',
 
-      svgWH: [300, 35],
+        svgWH: [300, 35],
 
-      svgScale: [1, 1],
+        svgScale: [1, 1],
 
-      rowNum: 1,
-      rowPoints: 40,
+        rowNum: 1,
+        rowPoints: 40,
 
-      rectWidth,
-      halfRectWidth: rectWidth / 2,
+        rectWidth,
+        halfRectWidth: rectWidth / 2,
 
-      points: [],
-      heights: [],
-      minHeights: [],
-      randoms: [],
+        points: [],
+        heights: [],
+        minHeights: [],
+        randoms: [],
 
-      defaultColor: ['#7acaec', '#7acaec'],
+        defaultColor: ['#7acaec', '#7acaec'],
 
-      mergedColor: []
-    }
-  },
-  watch: {
-    color () {
+        mergedColor: []
+      }
+    },
+    watch: {
+      color() {
+        const { mergeColor } = this
+
+        mergeColor()
+      }
+    },
+    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()
+      },
+      mergeColor() {
+        const { color, defaultColor } = this
+
+        this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+      }
+    },
+    mounted() {
       const { mergeColor } = this
 
       mergeColor()
     }
-  },
-  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()
-    },
-    mergeColor () {
-      const { color, defaultColor } = this
-
-      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
-    }
-  },
-  mounted () {
-    const { mergeColor } = this
-
-    mergeColor()
   }
-}
 </script>

lib/components/scrollBoard/src/main.vue

@@ -4,7 +4,7 @@
       <div
         class="header-item"
         v-for="(headerItem, i) in header"
-        :key="headerItem + i"
+        :key="`${headerItem}${i}`"
         :style="`
           height: ${mergedConfig.headerHeight}px;
           line-height: ${mergedConfig.headerHeight}px;
@@ -23,7 +23,7 @@
       <div
         class="row-item"
         v-for="(row, ri) in rows"
-        :key="row.toString() + row.scroll"
+        :key="`${row.toString()}${row.scroll}`"
         :style="`
           height: ${heights[ri]}px;
           line-height: ${heights[ri]}px;
@@ -33,7 +33,7 @@
         <div
           class="ceil"
           v-for="(ceil, ci) in row.ceils"
-          :key="ceil + ri + ci"
+          :key="`${ceil}${ri}${ci}`"
           :style="`width: ${widths[ci]}px;`"
           :align="aligns[ci]"
           v-html="ceil"
@@ -178,7 +178,9 @@ export default {
 
       animationHandler: '',
 
-      updater: 0
+      updater: 0,
+
+      needCalc: false
     }
   },
   watch: {
@@ -187,6 +189,8 @@ export default {
 
       stopAnimation()
 
+      this.animationIndex = 0
+
       calcData()
     }
   },
@@ -333,6 +337,14 @@ export default {
       this.aligns = deepMerge(aligns, align)
     },
     async animation (start = false) {
+      const { needCalc, calcHeights, calcRowsData } = this
+
+      if (needCalc) {
+        calcRowsData()
+        calcHeights()
+        this.needCalc = false
+      }
+
       let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this
 
       const { waitTime, carousel, rowNum } = mergedConfig
@@ -351,7 +363,7 @@ export default {
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows
+      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
@@ -385,6 +397,19 @@ export default {
         rowIndex,
         columnIndex: ci
       })
+    },
+    updateRows(rows, animationIndex) {
+      const { mergedConfig, animationHandler, animation } = this
+
+      this.mergedConfig = {
+        ...mergedConfig,
+        data: [...rows]
+      }
+
+      this.needCalc = true
+
+      if (typeof animationIndex === 'number') this.animationIndex = animationIndex
+      if (!animationHandler) animation(true)
     }
   },
   destroyed () {

lib/components/scrollRankingBoard/src/main.vue

@@ -9,7 +9,7 @@
       <div class="ranking-info">
         <div class="rank">No.{{ item.ranking }}</div>
         <div class="info-name" v-html="item.name" />
-        <div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
+        <div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
       </div>
 
       <div class="ranking-column">
@@ -82,7 +82,13 @@ export default {
          * @type {Boolean}
          * @default sort = true
          */
-        sort: true
+        sort: true,
+        /**
+         * @description Value formatter
+         * @type {Function}
+         * @default valueFormatter = null
+         */
+        valueFormatter: null
       },
 
       mergedConfig: null,
@@ -208,7 +214,7 @@ export default {
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows
+      this.rows = rows.slice(0, rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
@@ -232,7 +238,7 @@ export default {
       if (!animationHandler) return
 
       clearTimeout(animationHandler)
-    }
+    },
   },
   destroyed () {
     const { stopAnimation } = this

lib/index.js

@@ -21,6 +21,7 @@ export { default as conicalColumnChart } from './components/conicalColumnChart/i
 export { default as decoration1 } from './components/decoration1/index'
 export { default as decoration10 } from './components/decoration10/index'
 export { default as decoration11 } from './components/decoration11/index'
+export { default as decoration12 } from './components/decoration12/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'
@@ -71,6 +72,7 @@ import decoration8 from './components/decoration8/index'
 import decoration9 from './components/decoration9/index'
 import decoration10 from './components/decoration10/index'
 import decoration11 from './components/decoration11/index'
+import decoration12 from './components/decoration12/index'
 
 // charts
 import charts from './components/charts/index'
@@ -120,6 +122,7 @@ export default function (Vue) {
   Vue.use(decoration9)
   Vue.use(decoration10)
   Vue.use(decoration11)
+  Vue.use(decoration12)
 
   // charts
   Vue.use(charts)

lib/mixin/autoResize.js

@@ -29,11 +29,17 @@ export default {
       const { $nextTick, $refs, ref, onResize } = this
 
       return new Promise(resolve => {
-        $nextTick(e => {
+        $nextTick(_ => {
           const dom = this.dom = $refs[ref]
 
-          this.width = dom.clientWidth
-          this.height = dom.clientHeight
+          this.width = dom ? dom.clientWidth : 0
+          this.height = dom ? dom.clientHeight : 0
+
+          if (!dom) {
+            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
+          } else if (!this.width || !this.height) {
+            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
+          }
 
           if (typeof onResize === 'function' && resize) onResize()
 
@@ -56,6 +62,8 @@ export default {
     unbindDomResizeCallback () {
       let { domObserver, debounceInitWHFun } = this
 
+      if (!domObserver) return
+
       domObserver.disconnect()
       domObserver.takeRecords()
       domObserver = null

lib/util/index.js

@@ -38,10 +38,10 @@ export function getPointDistance (pointOne, pointTwo) {
   return Math.sqrt(minusX * minusX + minusY * minusY)
 }
 
-export function uuid () {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+export function uuid (hasHyphen) {
+  return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
 		const r = Math.random() * 16 | 0
 		const v = c == 'x' ? r : (r & 0x3 | 0x8)
 		return v.toString(16)
-	})
+  })
 }

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "@jiaminghi/data-view",
-  "version": "2.9.1",
-  "author": "JiaMing <743192023@qq.com>",
+  "name": "@ykxiao/demu-mes-data-v",
+  "version": "1.0.1",
+  "author": "Longlong <long@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "lib/index.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/DataV-Team/DataV.git"
+    "url": "https://git.tool.dwoodauto.com/ykxiao/DemuMesDataV.git"
   },
   "scripts": {
     "build": "node build/index.js",

src/components/activeRingChart/src/main.vue

@@ -83,6 +83,11 @@ export default {
          * @type {Number}
          */
         digitalFlopToFixed: 0,
+        /**
+         * @description Digital flop unit
+         * @type {String}
+         */
+        digitalFlopUnit: '',
         /**
          * @description CRender animationCurve
          * @type {String}
@@ -122,7 +127,8 @@ export default {
         digitalFlopStyle,
         digitalFlopToFixed,
         data,
-        showOriginValue
+        showOriginValue,
+        digitalFlopUnit
       } = mergedConfig
 
       const value = data.map(({ value }) => value)
@@ -140,7 +146,7 @@ export default {
       }
 
       return {
-        content: showOriginValue ? '{nt}' : '{nt}%',
+        content: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
         number: [displayValue],
         style: digitalFlopStyle,
         toFixed: digitalFlopToFixed

src/components/borderBox10/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
-    <svg class="border" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <polygon :fill="backgroundColor" :points="`
         4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
         4, ${height} 0, ${height - 4} 0, 4
@@ -12,7 +12,7 @@
       height="150px"
       :key="item"
       v-for="item in border"
-      :class="`${item} border`"
+      :class="`${item} dv-border-svg-container`"
     >
       <polygon
         :fill="mergedColor[1]"
@@ -86,7 +86,7 @@ export default {
   height: 100%;
   border-radius: 6px;
 
-  .border {
+  .dv-border-svg-container {
     position: absolute;
     display: block;
   }

src/components/borderBox11/src/main.vue

@@ -292,7 +292,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
       stroke-width: 1;
     }

src/components/borderBox2/src/main.vue

@@ -89,7 +89,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
       stroke-width: 1;
     }

src/components/borderBox3/src/main.vue

@@ -93,7 +93,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
     }
   }

src/components/borderBox4/src/main.vue

@@ -105,7 +105,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
     }
   }

src/components/borderBox5/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-5" :ref="ref">
-    <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+    <svg :class="`dv-border-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
       <polygon :fill="backgroundColor" :points="`
         10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
       `" />
@@ -94,14 +94,14 @@ export default {
     transform: rotate(180deg);
   }
 
-  .dv-svg-container {
+  .dv-border-svg-container {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
 
-    polyline {
+    & > polyline {
       fill: none;
     }
   }

src/components/borderBox6/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-6" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <polygon :fill="backgroundColor" :points="`
         9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
       `" />
@@ -86,14 +86,14 @@ export default {
   width: 100%;
   height: 100%;
 
-  .dv-svg-container {
+  .dv-border-svg-container {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
 
-    polyline {
+    & > polyline {
       fill: none;
       stroke-width: 1;
     }

src/components/borderBox7/src/main.vue

@@ -5,7 +5,7 @@
     :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
     :ref="ref"
   >
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
@@ -80,14 +80,14 @@ export default {
   width: 100%;
   height: 100%;
 
-  .dv-svg-container {
+  .dv-border-svg-container {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
 
-    polyline {
+    & > polyline {
       fill: none;
       stroke-linecap: round;
     }

src/components/borderBox8/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-8" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <defs>
         <path
           :id="path"
@@ -147,7 +147,7 @@ export default {
   width: 100%;
   height: 100%;
 
-  svg {
+  .dv-border-svg-container {
     position: absolute;
     width: 100%;
     height: 100%;

src/components/borderBox9/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-9" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <defs>
         <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
           <animate
@@ -185,7 +185,7 @@ export default {
   width: 100%;
   height: 100%;
 
-  svg {
+  .dv-border-svg-container {
     position: absolute;
     width: 100%;
     height: 100%;

src/components/decoration12/index.js

@@ -0,0 +1,5 @@
+import Decoration12 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration12.name, Decoration12)
+}

src/components/decoration12/src/main.vue

@@ -0,0 +1,304 @@
+<template>
+  <div class="dv-decoration-12" :ref="ref">
+    <svg :width="width" :height="height">
+      <defs>
+        <g :id="gId">
+          <path
+            :stroke="pathColor[i]"
+            :stroke-width="width / 2"
+            fill="transparent"
+            v-for="(d, i) in pathD"
+            :key="d"
+            :d="d"
+          />
+        </g>
+
+        <radialGradient
+          :id="gradientId"
+          cx="50%" cy="50%" r="50%"
+        >
+          <stop offset="0%" stop-color="transparent" stop-opacity="1" />
+          <stop offset="100%" :stop-color="fade(mergedColor[1] || defaultColor[1], 30)" stop-opacity="1" />
+        </radialGradient>
+      </defs>
+
+      <circle
+        v-for="r in circleR"
+        :key="r"
+        :r="r"
+        :cx="x"
+        :cy="y"
+        :stroke="mergedColor[1]"
+        :stroke-width="0.5"
+        fill="transparent"
+      />
+
+      <circle
+        r="1"
+        :cx="x"
+        :cy="y"
+        stroke="transparent"
+        :fill="`url(#${gradientId})`"
+      >
+        <animate
+          attributeName="r"
+          :values="`1;${width / 2}`"
+          :dur="`${haloDur}s`"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="opacity"
+          values="1;0"
+          :dur="`${haloDur}s`"
+          repeatCount="indefinite"
+        />
+      </circle>
+
+      <circle
+        r="2"
+        :cx="x"
+        :cy="y"
+        :fill="mergedColor[1]"
+      />
+
+      <g v-if="showSplitLine">
+        <polyline
+          v-for="p in splitLinePoints"
+          :key="p"
+          :points="p"
+          :stroke="mergedColor[1]"
+          :stroke-width="0.5"
+          opacity="0.5"
+        />
+      </g>
+
+      <path
+        v-for="d in arcD"
+        :key="d"
+        :d="d"
+        :stroke="mergedColor[1]"
+        stroke-width="2"
+        fill="transparent"
+      />
+
+      <use :xlink:href="`#${gId}`">
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          :values="`0, ${x} ${y};360, ${x} ${y}`"
+          :dur="`${scanDur}s`"
+          repeatCount="indefinite"
+        />
+      </use>
+    </svg>
+
+    <div class="decoration-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone, getCircleRadianPoint } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
+
+export default {
+  name: 'DvDecoration12',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    /**
+     * @description Scan animation dur
+     */
+    scanDur: {
+      type: Number,
+      default: 3
+    },
+    /**
+     * @description Halo animation dur
+     */
+    haloDur: {
+      type: Number,
+      default: 2
+    }
+  },
+  data () {
+    const id = uuid()
+    return {
+      ref: 'decoration-12',
+      gId: `decoration-12-g-${id}`,
+      gradientId: `decoration-12-gradient-${id}`,
+
+      defaultColor: ['#2783ce', '#2cf7fe'],
+
+      mergedColor: [],
+
+      pathD: [],
+
+      pathColor: [],
+
+      circleR: [],
+
+      splitLinePoints: [],
+
+      arcD: [],
+
+      segment: 30,
+
+      sectorAngle: Math.PI / 3,
+
+      ringNum: 3,
+
+      ringWidth: 1,
+
+      showSplitLine: true
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  computed: {
+    x () {
+      const { width } = this
+
+      return width / 2
+    },
+    y () {
+      const { height } = this
+
+      return height / 2
+    }
+  },
+  methods: {
+    init () {
+      const { mergeColor, calcPathD, calcPathColor, calcCircleR, calcSplitLinePoints, calcArcD } = this
+
+      mergeColor()
+
+      calcPathD()
+
+      calcPathColor()
+
+      calcCircleR()
+
+      calcSplitLinePoints()
+
+      calcArcD()
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    calcPathD () {
+      const { x, y, width, segment, sectorAngle } = this
+
+      const startAngle = -Math.PI / 2
+      const angleGap = sectorAngle / segment
+      const r = width / 4
+      let lastEndPoints = getCircleRadianPoint(x, y, r, startAngle)
+
+      this.pathD = new Array(segment)
+        .fill('')
+        .map((_, i) => {
+          const endPoints = getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map(_ => _.toFixed(5))
+          const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`
+          lastEndPoints = endPoints
+
+          return d
+        })
+    },
+    calcPathColor () {
+      const { mergedColor: [color], segment } = this
+
+      const colorGap = 100 / (segment - 1)
+
+      this.pathColor = new Array(segment)
+        .fill(color)
+        .map((_, i) => fade(color, 100 - i * colorGap))
+    },
+    calcCircleR () {
+      const { segment, ringNum, width, ringWidth } = this
+
+      const radiusGap = (width / 2 - ringWidth / 2) / ringNum
+
+      this.circleR = new Array(ringNum)
+        .fill(0)
+        .map((_, i) => radiusGap * (i + 1))
+    },
+    calcSplitLinePoints () {
+      const { x, y, width } = this
+
+      const angleGap = Math.PI / 6
+      const r = width / 2
+
+      this.splitLinePoints = new Array(6)
+        .fill('')
+        .map((_, i) => {
+          const startAngle = angleGap * (i + 1)
+          const endAngle = startAngle + Math.PI
+          const startPoint = getCircleRadianPoint(x, y, r, startAngle)
+          const endPoint = getCircleRadianPoint(x, y, r, endAngle)
+
+          return `${startPoint.join(',')} ${endPoint.join(',')}`
+        })
+    },
+    calcArcD () {
+      const { x, y, width } = this
+
+      const angleGap = Math.PI / 6
+      const r = width / 2 - 1
+
+      this.arcD = new Array(4)
+        .fill('')
+        .map((_, i) => {
+          const startAngle = angleGap * (3 * i + 1)
+          const endAngle = startAngle + angleGap
+          const startPoint = getCircleRadianPoint(x, y, r, startAngle)
+          const endPoint = getCircleRadianPoint(x, y, r, endAngle)
+
+          return `M${startPoint.join(',')} A${x}, ${y} 0 0 1 ${endPoint.join(',')}`
+        })
+    },
+    afterAutoResizeMixinInit () {
+      const { init } = this
+
+      init()
+    },
+    fade
+  }
+}
+</script>
+
+<style lang="less">
+.dv-decoration-12 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .decoration-content {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

src/components/decoration2/src/main.vue

@@ -6,7 +6,7 @@
           :attributeName="reverse ? 'height' : 'width'"
           from="0"
           :to="reverse ? height : width"
-          dur="6s"
+          :dur="`${dur}s`"
           calcMode="spline"
           keyTimes="0;1"
           keySplines=".42,0,.58,1"
@@ -19,7 +19,7 @@
           :attributeName="reverse ? 'y' : 'x'"
           from="0"
           :to="reverse ? height : width"
-          dur="6s"
+          :dur="`${dur}s`"
           calcMode="spline"
           keyTimes="0;1"
           keySplines="0.42,0,0.58,1"
@@ -48,6 +48,10 @@ export default {
     reverse: {
       type: Boolean,
       default: false
+    },
+    dur: {
+      type: Number,
+      default: 6
     }
   },
   data () {

src/components/decoration4/src/main.vue

@@ -2,7 +2,7 @@
   <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;`"
+      :style="reverse ? `width:${width}px;height:5px;animation-duration:${dur}s` : `width:5px;height:${height}px;animation-duration:${dur}s`"
     >
       <svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
         <polyline
@@ -40,6 +40,10 @@ export default {
     reverse: {
       type: Boolean,
       default: false
+    },
+    dur: {
+      type: Number,
+      default: 3
     }
   },
   data () {
@@ -87,13 +91,13 @@ export default {
   }
 
   .normal {
-    animation: ani-height 3s ease-in-out infinite;
+    animation: ani-height ease-in-out infinite;
     left: 50%;
     margin-left: -2px;
   }
 
   .reverse {
-    animation: ani-width 3s ease-in-out infinite;
+    animation: ani-width ease-in-out infinite;
     top: 50%;
     margin-top: -2px;
   }

src/components/decoration5/src/main.vue

@@ -12,7 +12,7 @@
           attributeType="XML"
           :from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
           :to="`0, 0, ${line1Length}, 0`"
-          dur="1.2s"
+          :dur="`${dur}s`"
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
@@ -31,7 +31,7 @@
           attributeType="XML"
           :from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
           :to="`0, 0, ${line2Length}, 0`"
-          dur="1.2s"
+          :dur="`${dur}s`"
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
@@ -59,6 +59,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
+    },
+    dur: {
+      type: Number,
+      default: 1.2
     }
   },
   data () {

src/components/scrollBoard/src/main.vue

@@ -4,7 +4,7 @@
       <div
         class="header-item"
         v-for="(headerItem, i) in header"
-        :key="headerItem + i"
+        :key="`${headerItem}${i}`"
         :style="`
           height: ${mergedConfig.headerHeight}px;
           line-height: ${mergedConfig.headerHeight}px;
@@ -23,7 +23,7 @@
       <div
         class="row-item"
         v-for="(row, ri) in rows"
-        :key="row.toString() + row.scroll"
+        :key="`${row.toString()}${row.scroll}`"
         :style="`
           height: ${heights[ri]}px;
           line-height: ${heights[ri]}px;
@@ -33,7 +33,7 @@
         <div
           class="ceil"
           v-for="(ceil, ci) in row.ceils"
-          :key="ceil + ri + ci"
+          :key="`${ceil}${ri}${ci}`"
           :style="`width: ${widths[ci]}px;`"
           :align="aligns[ci]"
           v-html="ceil"
@@ -178,7 +178,9 @@ export default {
 
       animationHandler: '',
 
-      updater: 0
+      updater: 0,
+
+      needCalc: false
     }
   },
   watch: {
@@ -187,6 +189,8 @@ export default {
 
       stopAnimation()
 
+      this.animationIndex = 0
+
       calcData()
     }
   },
@@ -333,6 +337,14 @@ export default {
       this.aligns = deepMerge(aligns, align)
     },
     async animation (start = false) {
+      const { needCalc, calcHeights, calcRowsData } = this
+
+      if (needCalc) {
+        calcRowsData()
+        calcHeights()
+        this.needCalc = false
+      }
+
       let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this
 
       const { waitTime, carousel, rowNum } = mergedConfig
@@ -351,7 +363,7 @@ export default {
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows
+      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
@@ -385,6 +397,19 @@ export default {
         rowIndex,
         columnIndex: ci
       })
+    },
+    updateRows(rows, animationIndex) {
+      const { mergedConfig, animationHandler, animation } = this
+
+      this.mergedConfig = {
+        ...mergedConfig,
+        data: [...rows]
+      }
+
+      this.needCalc = true
+
+      if (typeof animationIndex === 'number') this.animationIndex = animationIndex
+      if (!animationHandler) animation(true)
     }
   },
   destroyed () {

src/components/scrollRankingBoard/src/main.vue

@@ -9,7 +9,7 @@
       <div class="ranking-info">
         <div class="rank">No.{{ item.ranking }}</div>
         <div class="info-name" v-html="item.name" />
-        <div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
+        <div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
       </div>
 
       <div class="ranking-column">
@@ -82,7 +82,13 @@ export default {
          * @type {Boolean}
          * @default sort = true
          */
-        sort: true
+        sort: true,
+        /**
+         * @description Value formatter
+         * @type {Function}
+         * @default valueFormatter = null
+         */
+        valueFormatter: null
       },
 
       mergedConfig: null,
@@ -208,7 +214,7 @@ export default {
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows
+      this.rows = rows.slice(0, rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
@@ -232,7 +238,7 @@ export default {
       if (!animationHandler) return
 
       clearTimeout(animationHandler)
-    }
+    },
   },
   destroyed () {
     const { stopAnimation } = this

src/components/waterLevelPond/src/main.vue

@@ -10,7 +10,6 @@
       </defs>
 
       <text
-        v-if="renderer"
         :stroke="`url(#${gradientId})`"
         :fill="`url(#${gradientId})`"
         :x="renderer.area[0] / 2 + 8"

src/index.js

@@ -31,6 +31,7 @@ import decoration8 from './components/decoration8/index'
 import decoration9 from './components/decoration9/index'
 import decoration10 from './components/decoration10/index'
 import decoration11 from './components/decoration11/index'
+import decoration12 from './components/decoration12/index'
 
 // charts
 import charts from './components/charts/index'
@@ -80,6 +81,7 @@ export default function (Vue) {
   Vue.use(decoration9)
   Vue.use(decoration10)
   Vue.use(decoration11)
+  Vue.use(decoration12)
 
   // charts
   Vue.use(charts)

src/mixin/autoResize.js

@@ -29,11 +29,17 @@ export default {
       const { $nextTick, $refs, ref, onResize } = this
 
       return new Promise(resolve => {
-        $nextTick(e => {
+        $nextTick(_ => {
           const dom = this.dom = $refs[ref]
 
-          this.width = dom.clientWidth
-          this.height = dom.clientHeight
+          this.width = dom ? dom.clientWidth : 0
+          this.height = dom ? dom.clientHeight : 0
+
+          if (!dom) {
+            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
+          } else if (!this.width || !this.height) {
+            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
+          }
 
           if (typeof onResize === 'function' && resize) onResize()
 
@@ -56,6 +62,8 @@ export default {
     unbindDomResizeCallback () {
       let { domObserver, debounceInitWHFun } = this
 
+      if (!domObserver) return
+
       domObserver.disconnect()
       domObserver.takeRecords()
       domObserver = null

src/util/index.js

@@ -38,10 +38,10 @@ export function getPointDistance (pointOne, pointTwo) {
   return Math.sqrt(minusX * minusX + minusY * minusY)
 }
 
-export function uuid () {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+export function uuid (hasHyphen) {
+  return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
 		const r = Math.random() * 16 | 0
 		const v = c == 'x' ? r : (r & 0x3 | 0x8)
 		return v.toString(16)
-	})
+  })
 }