Merge pull request #235 from webxmsj/fix-delredundant

删除冗余的renderer判断

CHANGELOG.md

@@ -1,3 +1,14 @@
+# 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

dist/datav.min.vue.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):t((e=e||self).Vue)}(this,(function(e){"use strict";function t(e,t){return 1===arguments.length?parseInt(Math.random()*e+1,10):parseInt(Math.random()*(t-e+1)+e,10)}function n(e,t){const n=Math.abs(e[0]-t[0]),r=Math.abs(e[1]-t[1]);return Math.sqrt(n*n+r*r)}function r(e){return(e?"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx":"xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx").replace(/[xy]/g,(function(e){const t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)}))}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var i={data:()=>({dom:"",width:0,height:0,debounceInitWHFun:"",domObserver:""}),methods:{async autoResizeMixinInit(){const{initWH:e,getDebounceInitWHFun:t,bindDomResizeCallback:n,afterAutoResizeMixinInit:r}=this;await e(!1),t(),n(),"function"==typeof r&&r()},initWH(e=!0){const{$nextTick:t,$refs:n,ref:r,onResize:i}=this;return new Promise(o=>{t(t=>{const a=this.dom=n[r];this.width=a.clientWidth,this.height=a.clientHeight,"function"==typeof i&&e&&i(),o()})})},getDebounceInitWHFun(){const{initWH:e}=this;this.debounceInitWHFun=function(e,t){let n;return function(){clearTimeout(n);const[r,i]=[this,arguments];n=setTimeout(()=>{t.apply(r,i)},e)}}(100,e)},bindDomResizeCallback(){const{dom:e,debounceInitWHFun:t}=this;this.domObserver=function(e,t){const n=new(window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver)(t);return n.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),n}(e,t),window.addEventListener("resize",t)},unbindDomResizeCallback(){let{domObserver:e,debounceInitWHFun:t}=this;e.disconnect(),e.takeRecords(),e=null,window.removeEventListener("resize",t)}},mounted(){const{autoResizeMixinInit:e}=this;e()},beforeDestroy(){const{unbindDomResizeCallback:e}=this;e()}},o={name:"DvFullScreenContainer",mixins:[i],data:()=>({ref:"full-screen-container",allWidth:0,scale:0,datavRoot:"",ready:!1}),methods:{afterAutoResizeMixinInit(){const{initConfig:e,setAppScale:t}=this;e(),t(),this.ready=!0},initConfig(){const{dom:e}=this,{width:t,height:n}=screen;this.allWidth=t,e.style.width=t+"px",e.style.height=n+"px"},setAppScale(){const{allWidth:e,dom:t}=this,n=document.body.clientWidth;t.style.transform=`scale(${n/e})`},onResize(){const{setAppScale:e}=this;e()}}};function a(e,t,n,r,i,o,a,s,l,d){"boolean"!=typeof a&&(l=s,s=a,a=!1);const c="function"==typeof n?n.options:n;let u;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=u):t&&(u=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(c.functional){const e=c.render;c.render=function(t,n){return u.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,u):[u]}return n}const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function l(e){return(e,t)=>function(e,t){const n=s?t.media||"default":e,r=c[n]||(c[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),void 0===d&&(d=document.head||document.getElementsByTagName("head")[0]),d.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(n),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const e=r.ids.size-1,t=document.createTextNode(n),i=r.element.childNodes;i[e]&&r.element.removeChild(i[e]),i.length?r.element.insertBefore(t,i[e]):r.element.appendChild(t)}}}(e,t)}let d;const c={};const u=o;var f=function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:this.ref,attrs:{id:"dv-full-screen-container"}},[this.ready?[this._t("default")]:this._e()],2)};f._withStripped=!0;const h=a({render:f,staticRenderFns:[]},(function(e){e&&e("data-v-2da16e2c_0",{source:"#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,eAAe;EACf,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,0BAA0B;EAC1B,YAAY;AACd",file:"main.vue",sourcesContent:["#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n"]},media:void 0})}),u,void 0,!1,void 0,!1,l,void 0,void 0);function p(e){e.component(h.name,h)}const g={namLine truncated
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):t((e=e||self).Vue)}(this,(function(e){"use strict";function t(e,t){return 1===arguments.length?parseInt(Math.random()*e+1,10):parseInt(Math.random()*(t-e+1)+e,10)}function n(e,t){const n=Math.abs(e[0]-t[0]),r=Math.abs(e[1]-t[1]);return Math.sqrt(n*n+r*r)}function r(e){return(e?"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx":"xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx").replace(/[xy]/g,(function(e){const t=16*Math.random()|0;return("x"==e?t:3&t|8).toString(16)}))}e=e&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e;var i={data:()=>({dom:"",width:0,height:0,debounceInitWHFun:"",domObserver:""}),methods:{async autoResizeMixinInit(){const{initWH:e,getDebounceInitWHFun:t,bindDomResizeCallback:n,afterAutoResizeMixinInit:r}=this;await e(!1),t(),n(),"function"==typeof r&&r()},initWH(e=!0){const{$nextTick:t,$refs:n,ref:r,onResize:i}=this;return new Promise(o=>{t(t=>{const a=this.dom=n[r];this.width=a?a.clientWidth:0,this.height=a?a.clientHeight:0,a?this.width&&this.height||console.warn("DataV: Component width or height is 0px, rendering abnormality may occur!"):console.warn("DataV: Failed to get dom node, component rendering may be abnormal!"),"function"==typeof i&&e&&i(),o()})})},getDebounceInitWHFun(){const{initWH:e}=this;this.debounceInitWHFun=function(e,t){let n;return function(){clearTimeout(n);const[r,i]=[this,arguments];n=setTimeout(()=>{t.apply(r,i)},e)}}(100,e)},bindDomResizeCallback(){const{dom:e,debounceInitWHFun:t}=this;this.domObserver=function(e,t){const n=new(window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver)(t);return n.observe(e,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0}),n}(e,t),window.addEventListener("resize",t)},unbindDomResizeCallback(){let{domObserver:e,debounceInitWHFun:t}=this;e&&(e.disconnect(),e.takeRecords(),e=null,window.removeEventListener("resize",t))}},mounted(){const{autoResizeMixinInit:e}=this;e()},beforeDestroy(){const{unbindDomResizeCallback:e}=this;e()}},o={name:"DvFullScreenContainer",mixins:[i],data:()=>({ref:"full-screen-container",allWidth:0,scale:0,datavRoot:"",ready:!1}),methods:{afterAutoResizeMixinInit(){const{initConfig:e,setAppScale:t}=this;e(),t(),this.ready=!0},initConfig(){const{dom:e}=this,{width:t,height:n}=screen;this.allWidth=t,e.style.width=t+"px",e.style.height=n+"px"},setAppScale(){const{allWidth:e,dom:t}=this,n=document.body.clientWidth;t.style.transform=`scale(${n/e})`},onResize(){const{setAppScale:e}=this;e()}}};function a(e,t,n,r,i,o,a,s,l,d){"boolean"!=typeof a&&(l=s,s=a,a=!1);const c="function"==typeof n?n.options:n;let u;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=u):t&&(u=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),u)if(c.functional){const e=c.render;c.render=function(t,n){return u.call(n),e(t,n)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,u):[u]}return n}const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function l(e){return(e,t)=>function(e,t){const n=s?t.media||"default":e,r=c[n]||(c[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),void 0===d&&(d=document.head||document.getElementsByTagName("head")[0]),d.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(n),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{const e=r.ids.size-1,t=document.createTextNode(n),i=r.element.childNodes;i[e]&&r.element.removeChild(i[e]),i.length?r.element.insertBefore(t,i[e]):r.element.appendChild(t)}}}(e,t)}let d;const c={};const u=o;var h=function(){var e=this.$createElement;return(this._self._c||e)("div",{ref:this.ref,attrs:{id:"dv-full-screen-container"}},[this.ready?[this._t("default")]:this._e()],2)};h._withStripped=!0;const f=a({render:h,staticRenderFns:[]},(function(e){e&&e("data-v-2da16e2c_0",{source:"#dv-full-screen-container {\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  overflow: hidden;\n  transform-origin: left top;\n  z-index: 999;\n}\n",map:{version:3,sources:["main.vue"],names:[],mappings:"AAAA;EACE,eAAe;EACf,QAAQ;EACR,SAAS;EACT,gBAAgB;EAChB,0BAA0B;EAC1B,YAAY;AACd",file:"main.vue",sourcesContent:["#dv-full-screen-container {\n  position: fLine truncated

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/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/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.width = dom ? dom.clientWidth : 0
-          this.height = dom.clientHeight
+          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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.9.9",
+  "version": "2.10.0",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "lib/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/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/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,7 +29,7 @@ export default {
       const { $nextTick, $refs, ref, onResize } = this
 
       return new Promise(resolve => {
-        $nextTick(e => {
+        $nextTick(_ => {
           const dom = this.dom = $refs[ref]
 
           this.width = dom ? dom.clientWidth : 0