简柏林 / thingskit-view · Commits

Commit 8b2124be4a8be876ad22d7e13f792d26fee05640

Authored by fengwotao
1 parent ccc68f80

fix(src/packages/): 优化小组件下小标题6右边配置装饰

Inline Side-by-side
Showing 3 changed files with 94 additions and 67 deletions
@@ -7,33 +7,14 @@ import { chartInitConfig } from '@/settings/designSetting' @@ -7,33 +7,14 @@ import { chartInitConfig } from '@/settings/designSetting'
7 export const option = { 7 export const option = {
8 dataset: '我是标题', 8 dataset: '我是标题',
9 attribute: { 9 attribute: {
10 - linearColors: [  
11 - '#0C4370',  
12 - '#0557A0',  
13 - '#2AFFFF',  
14 - '#2AFFFF',  
15 - '#2AFFFF',  
16 - '#2AFFFF',  
17 - '#ffcc33',  
18 - '#ffcc33',  
19 - '#25e4ea',  
20 - '#73faff',  
21 - '#73faff',  
22 - '#2affff',  
23 - '#2affff',  
24 - '#2affff',  
25 - '#2affff',  
26 - '#2affff',  
27 - '#2affff',  
28 - '#2affff',  
29 - '#2affff',  
30 - '#2affff',  
31 - '#2affff',  
32 - '#2affff',  
33 - '#2affff',  
34 - '#2affff',  
35 - '#009696'  
36 - ], 10 + bgColor1:'#0C4370',
  11 + bgColor2:'#0557A0',
  12 + bgColor3:'#2AFFFF',
  13 + bgColor4:'#ffcc33',
  14 + bgColor5:'#25e4ea',
  15 + bgColor6:'#73faff',
  16 + bgColor7:'#2affff',
  17 + bgColor8:'#009696',
37 fontSize: 20, 18 fontSize: 20,
38 fontPos: { 19 fontPos: {
39 x: 0, 20 x: 0,
@@ -20,22 +20,68 @@ @@ -20,22 +20,68 @@
20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button> 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 </SettingItem> 21 </SettingItem>
22 </SettingItemBox> 22 </SettingItemBox>
23 - <SettingItemBox  
24 - :name="`装饰颜色-${index + 1}`"  
25 - v-for="(item, index) in optionData.attribute.linearColors"  
26 - :key="index"  
27 - >  
28 - <SettingItem name="颜色">  
29 - <n-color-picker  
30 - size="small"  
31 - :modes="['hex']"  
32 - v-model:value="optionData.attribute.linearColors[index]"  
33 - ></n-color-picker>  
34 - </SettingItem>  
35 - <SettingItem>  
36 - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">  
37 - 恢复默认  
38 - </n-button> 23 + <SettingItemBox :name="`左边装饰`">
  24 + <SettingItem name="颜色">
  25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
  26 + </SettingItem>
  27 + <SettingItem>
  28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#0C4370'"> 恢复默认 </n-button>
  29 + </SettingItem>
  30 + </SettingItemBox>
  31 + <SettingItemBox :name="`中间装饰`">
  32 + <SettingItem name="颜色">
  33 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  34 + </SettingItem>
  35 + <SettingItem>
  36 + <n-button size="small" @click="optionData.attribute.bgColor2 = '#0557A0'"> 恢复默认 </n-button>
  37 + </SettingItem>
  38 + </SettingItemBox>
  39 + <SettingItemBox :name="`上下边线装饰`">
  40 + <SettingItem name="颜色">
  41 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  42 + </SettingItem>
  43 + <SettingItem>
  44 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#2AFFFF'"> 恢复默认 </n-button>
  45 + </SettingItem>
  46 + </SettingItemBox>
  47 + <SettingItemBox :name="`圆形装饰`">
  48 + <SettingItem name="颜色">
  49 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor4"></n-color-picker>
  50 + </SettingItem>
  51 + <SettingItem>
  52 + <n-button size="small" @click="optionData.attribute.bgColor4 = '#ffcc33'"> 恢复默认 </n-button>
  53 + </SettingItem>
  54 + </SettingItemBox>
  55 + <SettingItemBox :name="`圆形装饰`">
  56 + <SettingItem name="颜色">
  57 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor5"></n-color-picker>
  58 + </SettingItem>
  59 + <SettingItem>
  60 + <n-button size="small" @click="optionData.attribute.bgColor5 = '#25e4ea'"> 恢复默认 </n-button>
  61 + </SettingItem>
  62 + </SettingItemBox>
  63 + <SettingItemBox :name="`圆形装饰`">
  64 + <SettingItem name="颜色">
  65 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor6"></n-color-picker>
  66 + </SettingItem>
  67 + <SettingItem>
  68 + <n-button size="small" @click="optionData.attribute.bgColor6 = '#73faff'"> 恢复默认 </n-button>
  69 + </SettingItem>
  70 + </SettingItemBox>
  71 + <SettingItemBox :name="`其他装饰1`">
  72 + <SettingItem name="颜色">
  73 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor7"></n-color-picker>
  74 + </SettingItem>
  75 + <SettingItem>
  76 + <n-button size="small" @click="optionData.attribute.bgColor7 = '#2affff'"> 恢复默认 </n-button>
  77 + </SettingItem>
  78 + </SettingItemBox>
  79 + <SettingItemBox :name="`其他装饰2`">
  80 + <SettingItem name="颜色">
  81 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor8"></n-color-picker>
  82 + </SettingItem>
  83 + <SettingItem>
  84 + <n-button size="small" @click="optionData.attribute.bgColor8= '#009696'"> 恢复默认 </n-button>
39 </SettingItem> 85 </SettingItem>
40 </SettingItemBox> 86 </SettingItemBox>
41 </CollapseItem> 87 </CollapseItem>
@@ -9,16 +9,16 @@ @@ -9,16 +9,16 @@
9 > 9 >
10 <defs> 10 <defs>
11 <linearGradient id="subtitle6_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 11 <linearGradient id="subtitle6_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
12 - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />  
13 - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" /> 12 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  13 + <stop offset="1" :stop-color="attribute.bgColor2" stop-opacity="0" />
14 </linearGradient> 14 </linearGradient>
15 <linearGradient id="subtitle6_linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 15 <linearGradient id="subtitle6_linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
16 - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />  
17 - <stop offset="0.9988" :stop-color="attribute.linearColors[3]" stop-opacity="0" /> 16 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  17 + <stop offset="0.9988" :stop-color="attribute.bgColor3" stop-opacity="0" />
18 </linearGradient> 18 </linearGradient>
19 <linearGradient id="subtitle6_linear_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox"> 19 <linearGradient id="subtitle6_linear_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
20 - <stop offset="0" :stop-color="attribute.linearColors[4]" stop-opacity="1" />  
21 - <stop offset="0.9988" :stop-color="attribute.linearColors[5]" stop-opacity="0" /> 20 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  21 + <stop offset="0.9988" :stop-color="attribute.bgColor3" stop-opacity="0" />
22 </linearGradient> 22 </linearGradient>
23 </defs> 23 </defs>
24 <g opacity="1" transform="translate(0 0) rotate(0 246 15)"> 24 <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
@@ -66,46 +66,46 @@ @@ -66,46 +66,46 @@
66 <path 66 <path
67 id="圆形 18" 67 id="圆形 18"
68 fill-rule="evenodd" 68 fill-rule="evenodd"
69 - :style="{ fill: attribute.linearColors[6] }" 69 + :style="{ fill: attribute.bgColor4 }"
70 transform="translate(6 6) rotate(0 3 3)" 70 transform="translate(6 6) rotate(0 3 3)"
71 opacity="1" 71 opacity="1"
72 d="M3,0C1.34,0 0,1.34 0,3C0,4.66 1.34,6 3,6C4.66,6 6,4.66 6,3C6,1.34 4.66,0 3,0Z " 72 d="M3,0C1.34,0 0,1.34 0,3C0,4.66 1.34,6 3,6C4.66,6 6,4.66 6,3C6,1.34 4.66,0 3,0Z "
73 /> 73 />
74 <path 74 <path
75 id="圆形 18" 75 id="圆形 18"
76 - :style="{ stroke: attribute.linearColors[7], strokeWidth: 1, strokeOpacity: 1 }" 76 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 1 }"
77 transform="translate(3 3) rotate(0 6 6)" 77 transform="translate(3 3) rotate(0 6 6)"
78 d="M6,0C2.69,0 0,2.69 0,6C0,9.31 2.69,12 6,12C9.31,12 12,9.31 12,6C12,2.69 9.31,0 6,0Z " 78 d="M6,0C2.69,0 0,2.69 0,6C0,9.31 2.69,12 6,12C9.31,12 12,9.31 12,6C12,2.69 9.31,0 6,0Z "
79 /> 79 />
80 <path 80 <path
81 id="圆形 18" 81 id="圆形 18"
82 - :style="{ stroke: attribute.linearColors[8], strokeWidth: 1, strokeOpacity: 0.18 }" 82 + :style="{ stroke: attribute.bgColor5, strokeWidth: 1, strokeOpacity: 0.18 }"
83 transform="translate(0 0) rotate(0 9 9)" 83 transform="translate(0 0) rotate(0 9 9)"
84 d="M9,0C4.03,0 0,4.03 0,9C0,13.97 4.03,18 9,18C13.97,18 18,13.97 18,9C18,4.03 13.97,0 9,0Z " 84 d="M9,0C4.03,0 0,4.03 0,9C0,13.97 4.03,18 9,18C13.97,18 18,13.97 18,9C18,4.03 13.97,0 9,0Z "
85 /> 85 />
86 <path 86 <path
87 id="圆形 18" 87 id="圆形 18"
88 - :style="{ stroke: attribute.linearColors[9], strokeWidth: 1, strokeOpacity: 1 }" 88 + :style="{ stroke: attribute.bgColor6, strokeWidth: 1, strokeOpacity: 1 }"
89 transform="translate(0 0) rotate(0 4.5 4.5)" 89 transform="translate(0 0) rotate(0 4.5 4.5)"
90 d="M9,0C4.03,0 0,4.03 0,9 " 90 d="M9,0C4.03,0 0,4.03 0,9 "
91 /> 91 />
92 <path 92 <path
93 id="圆形 18" 93 id="圆形 18"
94 - :style="{ stroke: attribute.linearColors[10], strokeWidth: 1, strokeOpacity: 1 }" 94 + :style="{ stroke: attribute.bgColor6, strokeWidth: 1, strokeOpacity: 1 }"
95 transform="translate(9 9) rotate(180 4.5 4.5)" 95 transform="translate(9 9) rotate(180 4.5 4.5)"
96 d="M9,0C4.03,0 0,4.03 0,9 " 96 d="M9,0C4.03,0 0,4.03 0,9 "
97 /> 97 />
98 </g> 98 </g>
99 <path 99 <path
100 id="路径 14" 100 id="路径 14"
101 - :style="{ stroke: attribute.linearColors[11], strokeWidth: 0.5, strokeOpacity: 1 }" 101 + :style="{ stroke: attribute.bgColor7, strokeWidth: 0.5, strokeOpacity: 1 }"
102 :transform="`translate(28 ${h / 2 - 8 / 2 + 8}) rotate(0 230.25 4)`" 102 :transform="`translate(28 ${h / 2 - 8 / 2 + 8}) rotate(0 230.25 4)`"
103 :d="`M0,3 L7.49,8 L321.99,8 L332.25,0 L396.37,0 L401.44,4 L460.5,4 `" 103 :d="`M0,3 L7.49,8 L321.99,8 L332.25,0 L396.37,0 L401.44,4 L460.5,4 `"
104 /> 104 />
105 <path 105 <path
106 id="并集" 106 id="并集"
107 fill-rule="evenodd" 107 fill-rule="evenodd"
108 - :style="{ fill: attribute.linearColors[12] }" 108 + :style="{ fill: attribute.bgColor7 }"
109 :transform="`translate(375 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`" 109 :transform="`translate(375 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
110 opacity="0.5" 110 opacity="0.5"
111 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z " 111 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
@@ -113,7 +113,7 @@ @@ -113,7 +113,7 @@
113 <path 113 <path
114 id="并集" 114 id="并集"
115 fill-rule="evenodd" 115 fill-rule="evenodd"
116 - :style="{ fill: attribute.linearColors[13] }" 116 + :style="{ fill: attribute.bgColor7 }"
117 :transform="`translate(380 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`" 117 :transform="`translate(380 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
118 opacity="0.5" 118 opacity="0.5"
119 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z " 119 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
@@ -121,7 +121,7 @@ @@ -121,7 +121,7 @@
121 <path 121 <path
122 id="并集" 122 id="并集"
123 fill-rule="evenodd" 123 fill-rule="evenodd"
124 - :style="{ fill: attribute.linearColors[14] }" 124 + :style="{ fill: attribute.bgColor7 }"
125 :transform="`translate(385 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`" 125 :transform="`translate(385 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
126 opacity="0.5" 126 opacity="0.5"
127 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z " 127 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
@@ -129,7 +129,7 @@ @@ -129,7 +129,7 @@
129 <path 129 <path
130 id="并集" 130 id="并集"
131 fill-rule="evenodd" 131 fill-rule="evenodd"
132 - :style="{ fill: attribute.linearColors[15] }" 132 + :style="{ fill: attribute.bgColor7 }"
133 :transform="`translate(390 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`" 133 :transform="`translate(390 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
134 opacity="0.5" 134 opacity="0.5"
135 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z " 135 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
@@ -137,7 +137,7 @@ @@ -137,7 +137,7 @@
137 <path 137 <path
138 id="并集" 138 id="并集"
139 fill-rule="evenodd" 139 fill-rule="evenodd"
140 - :style="{ fill: attribute.linearColors[16] }" 140 + :style="{ fill: attribute.bgColor7 }"
141 :transform="`translate(395 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`" 141 :transform="`translate(395 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
142 opacity="0.5" 142 opacity="0.5"
143 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z " 143 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
@@ -145,7 +145,7 @@ @@ -145,7 +145,7 @@
145 <path 145 <path
146 id="并集" 146 id="并集"
147 fill-rule="evenodd" 147 fill-rule="evenodd"
148 - :style="{ fill: attribute.linearColors[17] }" 148 + :style="{ fill: attribute.bgColor7}"
149 :transform="`translate(400 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`" 149 :transform="`translate(400 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
150 opacity="0.5" 150 opacity="0.5"
151 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z " 151 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
@@ -153,7 +153,7 @@ @@ -153,7 +153,7 @@
153 <path 153 <path
154 id="并集" 154 id="并集"
155 fill-rule="evenodd" 155 fill-rule="evenodd"
156 - :style="{ fill: attribute.linearColors[18] }" 156 + :style="{ fill: attribute.bgColor7 }"
157 :transform="`translate(405 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`" 157 :transform="`translate(405 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
158 opacity="0.5" 158 opacity="0.5"
159 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z " 159 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
@@ -161,7 +161,7 @@ @@ -161,7 +161,7 @@
161 <path 161 <path
162 id="矩形 47" 162 id="矩形 47"
163 fill-rule="evenodd" 163 fill-rule="evenodd"
164 - :style="{ fill: attribute.linearColors[19] }" 164 + :style="{ fill: attribute.bgColor7 }"
165 :transform="`translate(346 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`" 165 :transform="`translate(346 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
166 opacity="1" 166 opacity="1"
167 d="M0,7L2,7L11,0L9,0L0,7Z " 167 d="M0,7L2,7L11,0L9,0L0,7Z "
@@ -169,7 +169,7 @@ @@ -169,7 +169,7 @@
169 <path 169 <path
170 id="矩形 47" 170 id="矩形 47"
171 fill-rule="evenodd" 171 fill-rule="evenodd"
172 - :style="{ fill: attribute.linearColors[20] }" 172 + :style="{ fill: attribute.bgColor7 }"
173 :transform="`translate(342 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`" 173 :transform="`translate(342 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
174 opacity="0.8" 174 opacity="0.8"
175 d="M0,7L2,7L11,0L9,0L0,7Z " 175 d="M0,7L2,7L11,0L9,0L0,7Z "
@@ -177,7 +177,7 @@ @@ -177,7 +177,7 @@
177 <path 177 <path
178 id="矩形 47" 178 id="矩形 47"
179 fill-rule="evenodd" 179 fill-rule="evenodd"
180 - :style="{ fill: attribute.linearColors[21] }" 180 + :style="{ fill: attribute.bgColor7 }"
181 :transform="`translate(338 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`" 181 :transform="`translate(338 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
182 opacity="0.6" 182 opacity="0.6"
183 d="M0,7L2,7L11,0L9,0L0,7Z " 183 d="M0,7L2,7L11,0L9,0L0,7Z "
@@ -185,14 +185,14 @@ @@ -185,14 +185,14 @@
185 <path 185 <path
186 id="矩形 47" 186 id="矩形 47"
187 fill-rule="evenodd" 187 fill-rule="evenodd"
188 - :style="{ fill: attribute.linearColors[22] }" 188 + :style="{ fill: attribute.bgColor7 }"
189 :transform="`translate(334 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`" 189 :transform="`translate(334 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
190 opacity="0.4" 190 opacity="0.4"
191 d="M0,7L2,7L11,0L9,0L0,7Z " 191 d="M0,7L2,7L11,0L9,0L0,7Z "
192 /> 192 />
193 <path 193 <path
194 id="路径 15" 194 id="路径 15"
195 - :style="{ stroke: attribute.linearColors[23], strokeWidth: 1, strokeOpacity: 1 }" 195 + :style="{ stroke: attribute.bgColor8, strokeWidth: 1, strokeOpacity: 1 }"
196 :transform="`translate(426 ${h / 2 - 4 / 2 + 3.5}) rotate(0 30.999999999999993 2)`" 196 :transform="`translate(426 ${h / 2 - 4 / 2 + 3.5}) rotate(0 30.999999999999993 2)`"
197 d="M0,4L25,4L33.5,0L62,0 " 197 d="M0,4L25,4L33.5,0L62,0 "
198 /> 198 />