From 00af3f90d8dce10a689ca1d7a1246e6ec74caf1c Mon Sep 17 00:00:00 2001
From: mtrun <1262327911@qq.com>
Date: Thu, 31 Mar 2022 09:59:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=A3=85=E9=A5=B0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B601?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/chart/decorates/decorates01.png    | Bin 3387 -> 1965 bytes
 .../Decorates/Decorates/Decorates01/config.ts |   6 +-
 .../Decorates/Decorates01/config.vue          |  63 ++++++++++++++++++
 .../Decorates/Decorates/Decorates01/index.vue |  43 +++++++++---
 4 files changed, 100 insertions(+), 12 deletions(-)

diff --git a/src/assets/images/chart/decorates/decorates01.png b/src/assets/images/chart/decorates/decorates01.png
index 75dfbf6b0a8ee2e303de5dc2839aa07b4201a17e..9bc27e06f9af076d5b69a906a0b33fda5d72a668 100644
GIT binary patch
delta 1294
zcmdljwU&Q_J5!9CsfDA7xwEB{fu)I|p{uing_E(XnW3AjxrLdlvAL0wLPc(YudkI$
zesXDUYF>$_i>(q+L@y;X#R{s|5trV{i<t~y7MSBwq@++>5|o-|m4e#>3tW09>oYsm
z&+Rx?%)r2+;OXKRQgQ3e+>`m29Yoq~yXPL^jMZ>bU9<Lve$FC~h9iyI>3uOjj2|B8
z<#yLPxG-yJkYlFTZHrv7^M{I~Rz0|MVMkx#i}%(`&wJ1LX_TL46Wl&`Z^>oGovnq(
zTV$S2s8`5zQ8mmfT_I(9cTM^Kl<I>UmNuDQzE}Uw?OW5b&CZUuL_&QGWLzr$_?!{Q
zOz8O;{;qht2h)rX65`83pSNzRf7)p3WqK`Bc%{+VT`PR1>fOD%_P`b<H^<|Pe1dZ)
z&q(%-nRHcF@5qrmr#D*bdrf~o^H~44@2uH9AJqNqD@$K}`<(POY{$Me+xA_Y_wFTk
z@cFpu>uq&?V(atP*KJ$NCalM0R_ggt##M7&!MkPl*5Y~V0y=+(%NxIZHTUeJqt-`X
zy)Dc2?DL(z-rh7Zdb{+$H_qjsoR)73S#wFTKV)@ZkSv?gJvUE(R?}0l?|zs(HNP9N
zIVv!K{r=ilJ0^#=cNcutUM$w(85+M>{GH3y0O@T%d%5{pXSvR<Ka%3eZYsK_%W3CU
zBl$D?6+IVKXx)i2J<I#<mo@i$>G}5zw;$LWv}0q^A+@a$y+5~GcgtsN-y6r~VS0Dt
zj|8)>sJnMw@hvv76h7Lu^_pRqk>cY?R(v6cJ%maH*JRDkvvzR|lv<qSk?wMEnca-u
z<<>?bSJz*%knCy+JU=_G<a_<Hea_}57VqdxnJ`boBgvxQ>Z!pL-`Q6#TXib4Do<p3
z+F{K%fklDSK}dzsgJ}Ybr-Jc}2`BkP&gGknmxO<-3vh3ayS#hr|7G_M^S|38e{ui5
zpx*~?JlvS@ek1$+U;X(P|1<Gjs`g~}ufB1vInmU6o50fz-E4m)ZwQMm`g1>5sQ#Jq
zCtb~1YXfpcV%Dj?e9Ig6A+X@5UwO=%vj&Zc-=&1SyH-s+x@)b-F<s{=Db6MyJN?Ud
zZ}oT_=DM%CoTvHbL<#lAIo^j3{SovikNDS7!X7lSWmd~9mPb>aR3^0C=DnF@nk95e
z_J{hU32)qz=Cqt@2P&CxMON*h-VY9*w8DCEnU{QE&o!wqcrr}-7yYD=&&(?_+ko@O
z_ohuDvOA_26?<Omi=9*W_tZP(oC6EnWTL;>s7J)d{d=S`^MJRO=VkH3Et8GSwJtwj
zX?M_N|E5jnc6N4c{!&<2=&4qf@p$9E%ja8UlPA3EoAhpt@{;G3r}!eG>g&9&JM87V
z?p%NTamM|ZcfTD}i$2!u<R&fy4`_x-3@VO74Jx2eSKyp<;DzU*roVy{T3CO3lrv01
ziV>JX22XXLONpPwMeP4wIkq7E!ps^I^~sUaGk5hrteqkJn)4-Ju291gVaG-8e$6=t
zm6uO^2eiNiXoCTRQI#8e-FB`0fAd$l`WW54^Pkn?v~8MI<adM1b(jCC|52a+F+x25
ct3M+fL+_NyYU@&OgfIYsr>mdKI;Vst00%%d+yDRo

delta 2727
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

diff --git a/src/packages/components/Decorates/Decorates/Decorates01/config.ts b/src/packages/components/Decorates/Decorates/Decorates01/config.ts
index b0dac7e9..0a4fa87f 100644
--- a/src/packages/components/Decorates/Decorates/Decorates01/config.ts
+++ b/src/packages/components/Decorates/Decorates/Decorates01/config.ts
@@ -4,8 +4,10 @@ import { Decorates01Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  colors: ['#4fd2dd', '#235fa7'],
-  backgroundColor: '#00000000'
+  colors: ['#3faacb', '#fff'],
+  dur: 3,
+  lineHeight: 2,
+  endWidth: 5
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
diff --git a/src/packages/components/Decorates/Decorates/Decorates01/config.vue b/src/packages/components/Decorates/Decorates/Decorates01/config.vue
index 44a7bc22..2924d09a 100644
--- a/src/packages/components/Decorates/Decorates/Decorates01/config.vue
+++ b/src/packages/components/Decorates/Decorates/Decorates01/config.vue
@@ -1,6 +1,69 @@
 <template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox
+      :name="`颜色-${index + 1}`"
+      v-for="(item, index) in optionData.colors"
+      :key="index"
+    >
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.colors[index]"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button
+          size="small"
+          @click="optionData.colors[index] = option.colors[index]"
+        >
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="具体">
+      <SettingItem name="线条高度">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.lineHeight"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="末端长度">
+        <n-input-number
+          size="small"
+          v-model:value="optionData.endWidth"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+
+  <CollapseItem name="动画" :expanded="true">
+    <SettingItemBox name="速度">
+      <SettingItem>
+        <n-input-number
+          v-model:value="optionData.dur"
+          size="small"
+          :step="0.5"
+          :min="0.5"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/ChartItemSetting/index'
+import { option } from './config'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
 </script>
diff --git a/src/packages/components/Decorates/Decorates/Decorates01/index.vue b/src/packages/components/Decorates/Decorates/Decorates01/index.vue
index 363a64fd..66296e52 100644
--- a/src/packages/components/Decorates/Decorates/Decorates01/index.vue
+++ b/src/packages/components/Decorates/Decorates/Decorates01/index.vue
@@ -1,24 +1,47 @@
 <template>
-  <div>
-    装饰
-  </div>
+  <svg :width="w" :height="h">
+    <rect :x="rectX" :y="rectY" :width="w" :height="lineHeight" :fill="colors[0]">
+      <animate
+        attributeName="width"
+        from="0"
+        :to="w"
+        :dur="`${dur}s`"
+        calcMode="spline"
+        keyTimes="0;1"
+        keySplines=".42,0,.58,1"
+        repeatCount="indefinite"
+      />
+    </rect>
+
+    <rect :x="rectX" :y="rectY" :width="endWidth" :height="lineHeight" :fill="colors[1]">
+      <animate
+        attributeName="x"
+        from="0"
+        :to="w"
+        :dur="`${dur}s`"
+        calcMode="spline"
+        keyTimes="0;1"
+        keySplines="0.42,0,0.58,1"
+        repeatCount="indefinite"
+      />
+    </rect>
+  </svg>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
+import { PropType, computed, toRefs, reactive } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
-    required: true
-  }
+    required: true,
+  },
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
+const { colors, dur, endWidth, lineHeight } = toRefs(props.chartConfig.option)
 
+const rectX = computed(() => 0)
+const rectY = computed(() => h.value / 2)
 </script>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file