Commit cda6a183f5b14c8facbbdc9975bf3cc305f2978e
Merge branch 'ft' into 'main_dev'
perf(external/Composes): 修复组合下的所有颜色可以恢复默认颜色 See merge request yunteng/thingskit-view!46
Showing
7 changed files
with
54 additions
and
39 deletions
@@ -59,6 +59,11 @@ | @@ -59,6 +59,11 @@ | ||
59 | <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textColor"></n-color-picker> | 59 | <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textColor"></n-color-picker> |
60 | </setting-item> | 60 | </setting-item> |
61 | </setting-item-box> | 61 | </setting-item-box> |
62 | + <setting-item-box name="颜色"> | ||
63 | + <SettingItem> | ||
64 | + <n-button size="small" @click="optionData.textColor = '#00f6ff'"> 恢复默认 </n-button> | ||
65 | + </SettingItem> | ||
66 | + </setting-item-box> | ||
62 | <setting-item-box name="位置x轴"> | 67 | <setting-item-box name="位置x轴"> |
63 | <setting-item name="字体位置x轴"> | 68 | <setting-item name="字体位置x轴"> |
64 | <n-input-number v-model:value="optionData.x" size="small" placeholder="字体位置"></n-input-number> | 69 | <n-input-number v-model:value="optionData.x" size="small" placeholder="字体位置"></n-input-number> |
@@ -96,6 +101,11 @@ | @@ -96,6 +101,11 @@ | ||
96 | <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textRightSizeColor"></n-color-picker> | 101 | <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textRightSizeColor"></n-color-picker> |
97 | </setting-item> | 102 | </setting-item> |
98 | </setting-item-box> | 103 | </setting-item-box> |
104 | + <setting-item-box name="颜色"> | ||
105 | + <SettingItem> | ||
106 | + <n-button size="small" @click="optionData.textRightSizeColor = '#ffffff'"> 恢复默认 </n-button> | ||
107 | + </SettingItem> | ||
108 | + </setting-item-box> | ||
99 | </collapse-item> | 109 | </collapse-item> |
100 | </template> | 110 | </template> |
101 | 111 |
@@ -5,7 +5,7 @@ | @@ -5,7 +5,7 @@ | ||
5 | <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.colors[index]"></n-color-picker> | 5 | <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.colors[index]"></n-color-picker> |
6 | </SettingItem> | 6 | </SettingItem> |
7 | <SettingItem> | 7 | <SettingItem> |
8 | - <n-button size="small" @click="optionData.animat.colors[index] = optionData.animat.colors[index]"> | 8 | + <n-button size="small" @click="optionData.animat.colors[index] = option.animat.colors[index]"> |
9 | 恢复默认 | 9 | 恢复默认 |
10 | </n-button> | 10 | </n-button> |
11 | </SettingItem> | 11 | </SettingItem> |
@@ -47,6 +47,12 @@ | @@ -47,6 +47,12 @@ | ||
47 | <setting-item name="结束值"> | 47 | <setting-item name="结束值"> |
48 | <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.gradient.to"></n-color-picker> | 48 | <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animat.gradient.to"></n-color-picker> |
49 | </setting-item> | 49 | </setting-item> |
50 | + <SettingItem> | ||
51 | + <n-button size="small" @click="optionData.animat.gradient.from = '#0000FFFF'"> 恢复默认1 </n-button> | ||
52 | + </SettingItem> | ||
53 | + <SettingItem> | ||
54 | + <n-button size="small" @click="optionData.animat.gradient.to = '#00FF00FF'"> 恢复默认2 </n-button> | ||
55 | + </SettingItem> | ||
50 | <setting-item name="偏移角度"> | 56 | <setting-item name="偏移角度"> |
51 | <n-input-number | 57 | <n-input-number |
52 | v-model:value="optionData.animat.gradient.deg" | 58 | v-model:value="optionData.animat.gradient.deg" |
@@ -7,13 +7,14 @@ import { chartInitConfig } from '@/settings/designSetting' | @@ -7,13 +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: ['#0559A3', '#0654A3', '#2AFFFF', '#2AFFFF','#2affff',' #2affff','#16d9d9'], | 10 | + linearColors: ['#0559A3', '#0654A3', '#2AFFFF', '#2AFFFF', '#2affff', ' #2affff', '#16d9d9'], |
11 | fontSize: 20, | 11 | fontSize: 20, |
12 | fontPos: { | 12 | fontPos: { |
13 | x: 0, | 13 | x: 0, |
14 | y: 20 | 14 | y: 20 |
15 | }, | 15 | }, |
16 | - fontColor: '#2AFFFF' | 16 | + fontColor: '#2AFFFF', |
17 | + lineColor: '#2AFFFF' | ||
17 | } | 18 | } |
18 | } | 19 | } |
19 | 20 |
@@ -7,15 +7,18 @@ | @@ -7,15 +7,18 @@ | ||
7 | <SettingItem name="大小"> | 7 | <SettingItem name="大小"> |
8 | <n-input-number v-model:value="optionData.attribute.fontSize" /> | 8 | <n-input-number v-model:value="optionData.attribute.fontSize" /> |
9 | </SettingItem> | 9 | </SettingItem> |
10 | - <SettingItem name="颜色"> | ||
11 | - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker> | ||
12 | - </SettingItem> | ||
13 | <SettingItem name="x轴位置"> | 10 | <SettingItem name="x轴位置"> |
14 | <n-input-number v-model:value="optionData.attribute.fontPos.x" /> | 11 | <n-input-number v-model:value="optionData.attribute.fontPos.x" /> |
15 | </SettingItem> | 12 | </SettingItem> |
16 | <SettingItem name="y轴位置"> | 13 | <SettingItem name="y轴位置"> |
17 | <n-input-number v-model:value="optionData.attribute.fontPos.y" /> | 14 | <n-input-number v-model:value="optionData.attribute.fontPos.y" /> |
18 | </SettingItem> | 15 | </SettingItem> |
16 | + <SettingItem name="颜色"> | ||
17 | + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker> | ||
18 | + </SettingItem> | ||
19 | + <SettingItem> | ||
20 | + <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button> | ||
21 | + </SettingItem> | ||
19 | </SettingItemBox> | 22 | </SettingItemBox> |
20 | <SettingItemBox | 23 | <SettingItemBox |
21 | :name="`装饰颜色-${index + 1}`" | 24 | :name="`装饰颜色-${index + 1}`" |
@@ -30,14 +33,19 @@ | @@ -30,14 +33,19 @@ | ||
30 | ></n-color-picker> | 33 | ></n-color-picker> |
31 | </SettingItem> | 34 | </SettingItem> |
32 | <SettingItem> | 35 | <SettingItem> |
33 | - <n-button | ||
34 | - size="small" | ||
35 | - @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]" | ||
36 | - > | 36 | + <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]"> |
37 | 恢复默认 | 37 | 恢复默认 |
38 | </n-button> | 38 | </n-button> |
39 | </SettingItem> | 39 | </SettingItem> |
40 | </SettingItemBox> | 40 | </SettingItemBox> |
41 | + <SettingItemBox :name="`装饰颜色8`"> | ||
42 | + <SettingItem name="颜色"> | ||
43 | + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.lineColor"></n-color-picker> | ||
44 | + </SettingItem> | ||
45 | + <SettingItem> | ||
46 | + <n-button size="small" @click="optionData.attribute.lineColor = '#2AFFFF'"> 恢复默认 </n-button> | ||
47 | + </SettingItem> | ||
48 | + </SettingItemBox> | ||
41 | </CollapseItem> | 49 | </CollapseItem> |
42 | </template> | 50 | </template> |
43 | 51 | ||
@@ -46,7 +54,6 @@ import { PropType } from 'vue' | @@ -46,7 +54,6 @@ import { PropType } from 'vue' | ||
46 | import { option } from './config' | 54 | import { option } from './config' |
47 | import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' | 55 | import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' |
48 | 56 | ||
49 | - | ||
50 | defineProps({ | 57 | defineProps({ |
51 | optionData: { | 58 | optionData: { |
52 | type: Object as PropType<typeof option>, | 59 | type: Object as PropType<typeof option>, |
@@ -26,11 +26,7 @@ | @@ -26,11 +26,7 @@ | ||
26 | opacity="1" | 26 | opacity="1" |
27 | :d="`M0,${h} L${w},${h} L${w},0 L0,0 L0,${h} Z`" | 27 | :d="`M0,${h} L${w},${h} L${w},0 L0,0 L0,${h} Z`" |
28 | /> | 28 | /> |
29 | - <g | ||
30 | - opacity="1" | ||
31 | - :transform="`translate(34 ${(h/2)-26/2 | ||
32 | - }) rotate(0 46 13)`" | ||
33 | - > | 29 | + <g opacity="1" :transform="`translate(34 ${h / 2 - 26 / 2}) rotate(0 46 13)`"> |
34 | <text> | 30 | <text> |
35 | <tspan | 31 | <tspan |
36 | :x="attribute.fontPos.x" | 32 | :x="attribute.fontPos.x" |
@@ -49,15 +45,12 @@ | @@ -49,15 +45,12 @@ | ||
49 | <path | 45 | <path |
50 | id="矩形 21" | 46 | id="矩形 21" |
51 | fill-rule="evenodd" | 47 | fill-rule="evenodd" |
52 | - style="fill: #2affff" | 48 | + :style="{ fill: attribute.lineColor }" |
53 | transform="translate(0 0) rotate(0 0.5 15)" | 49 | transform="translate(0 0) rotate(0 0.5 15)" |
54 | opacity="1" | 50 | opacity="1" |
55 | - :d="`M0,${h}L1,${h }L1,0L0,0L0,${h}Z`" | 51 | + :d="`M0,${h}L1,${h}L1,0L0,0L0,${h}Z`" |
56 | /> | 52 | /> |
57 | - <g | ||
58 | - opacity="1" | ||
59 | - :transform="`translate(14 ${(h/2)-8/2}) rotate(0 6.5 7)`" | ||
60 | - > | 53 | + <g opacity="1" :transform="`translate(14 ${h / 2 - 8 / 2}) rotate(0 6.5 7)`"> |
61 | <path | 54 | <path |
62 | id="矩形 22" | 55 | id="矩形 22" |
63 | fill-rule="evenodd" | 56 | fill-rule="evenodd" |
@@ -83,7 +76,7 @@ | @@ -83,7 +76,7 @@ | ||
83 | :d="`M6,0L0,7L5,7L11,0L6,0Z `" | 76 | :d="`M6,0L0,7L5,7L11,0L6,0Z `" |
84 | /> | 77 | /> |
85 | </g> | 78 | </g> |
86 | - <g opacity="1" :transform="`translate(396 ${(h/2)-2/2}) rotate(0 46.5 13.5)`"> | 79 | + <g opacity="1" :transform="`translate(396 ${h / 2 - 2 / 2}) rotate(0 46.5 13.5)`"> |
87 | <path | 80 | <path |
88 | id="并集" | 81 | id="并集" |
89 | fill-rule="evenodd" | 82 | fill-rule="evenodd" |
@@ -7,15 +7,18 @@ | @@ -7,15 +7,18 @@ | ||
7 | <SettingItem name="大小"> | 7 | <SettingItem name="大小"> |
8 | <n-input-number v-model:value="optionData.attribute.fontSize" /> | 8 | <n-input-number v-model:value="optionData.attribute.fontSize" /> |
9 | </SettingItem> | 9 | </SettingItem> |
10 | - <SettingItem name="颜色"> | ||
11 | - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker> | ||
12 | - </SettingItem> | ||
13 | <SettingItem name="x轴位置"> | 10 | <SettingItem name="x轴位置"> |
14 | <n-input-number v-model:value="optionData.attribute.fontPos.x" /> | 11 | <n-input-number v-model:value="optionData.attribute.fontPos.x" /> |
15 | </SettingItem> | 12 | </SettingItem> |
16 | <SettingItem name="y轴位置"> | 13 | <SettingItem name="y轴位置"> |
17 | <n-input-number v-model:value="optionData.attribute.fontPos.y" /> | 14 | <n-input-number v-model:value="optionData.attribute.fontPos.y" /> |
18 | </SettingItem> | 15 | </SettingItem> |
16 | + <SettingItem name="颜色"> | ||
17 | + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker> | ||
18 | + </SettingItem> | ||
19 | + <SettingItem> | ||
20 | + <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button> | ||
21 | + </SettingItem> | ||
19 | </SettingItemBox> | 22 | </SettingItemBox> |
20 | <SettingItemBox | 23 | <SettingItemBox |
21 | :name="`装饰颜色-${index + 1}`" | 24 | :name="`装饰颜色-${index + 1}`" |
@@ -30,10 +33,7 @@ | @@ -30,10 +33,7 @@ | ||
30 | ></n-color-picker> | 33 | ></n-color-picker> |
31 | </SettingItem> | 34 | </SettingItem> |
32 | <SettingItem> | 35 | <SettingItem> |
33 | - <n-button | ||
34 | - size="small" | ||
35 | - @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]" | ||
36 | - > | 36 | + <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]"> |
37 | 恢复默认 | 37 | 恢复默认 |
38 | </n-button> | 38 | </n-button> |
39 | </SettingItem> | 39 | </SettingItem> |
@@ -46,7 +46,6 @@ import { PropType } from 'vue' | @@ -46,7 +46,6 @@ import { PropType } from 'vue' | ||
46 | import { option } from './config' | 46 | import { option } from './config' |
47 | import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' | 47 | import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' |
48 | 48 | ||
49 | - | ||
50 | defineProps({ | 49 | defineProps({ |
51 | optionData: { | 50 | optionData: { |
52 | type: Object as PropType<typeof option>, | 51 | type: Object as PropType<typeof option>, |
@@ -7,15 +7,18 @@ | @@ -7,15 +7,18 @@ | ||
7 | <SettingItem name="大小"> | 7 | <SettingItem name="大小"> |
8 | <n-input-number v-model:value="optionData.attribute.fontSize" /> | 8 | <n-input-number v-model:value="optionData.attribute.fontSize" /> |
9 | </SettingItem> | 9 | </SettingItem> |
10 | - <SettingItem name="颜色"> | ||
11 | - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker> | ||
12 | - </SettingItem> | ||
13 | <SettingItem name="x轴位置"> | 10 | <SettingItem name="x轴位置"> |
14 | <n-input-number v-model:value="optionData.attribute.fontPos.x" /> | 11 | <n-input-number v-model:value="optionData.attribute.fontPos.x" /> |
15 | </SettingItem> | 12 | </SettingItem> |
16 | <SettingItem name="y轴位置"> | 13 | <SettingItem name="y轴位置"> |
17 | <n-input-number v-model:value="optionData.attribute.fontPos.y" /> | 14 | <n-input-number v-model:value="optionData.attribute.fontPos.y" /> |
18 | </SettingItem> | 15 | </SettingItem> |
16 | + <SettingItem name="颜色"> | ||
17 | + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.fontColor"></n-color-picker> | ||
18 | + </SettingItem> | ||
19 | + <SettingItem name="颜色"> | ||
20 | + <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button> | ||
21 | + </SettingItem> | ||
19 | </SettingItemBox> | 22 | </SettingItemBox> |
20 | <SettingItemBox | 23 | <SettingItemBox |
21 | :name="`装饰颜色-${index + 1}`" | 24 | :name="`装饰颜色-${index + 1}`" |
@@ -30,10 +33,7 @@ | @@ -30,10 +33,7 @@ | ||
30 | ></n-color-picker> | 33 | ></n-color-picker> |
31 | </SettingItem> | 34 | </SettingItem> |
32 | <SettingItem> | 35 | <SettingItem> |
33 | - <n-button | ||
34 | - size="small" | ||
35 | - @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]" | ||
36 | - > | 36 | + <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]"> |
37 | 恢复默认 | 37 | 恢复默认 |
38 | </n-button> | 38 | </n-button> |
39 | </SettingItem> | 39 | </SettingItem> |
@@ -46,7 +46,6 @@ import { PropType } from 'vue' | @@ -46,7 +46,6 @@ import { PropType } from 'vue' | ||
46 | import { option } from './config' | 46 | import { option } from './config' |
47 | import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' | 47 | import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' |
48 | 48 | ||
49 | - | ||
50 | defineProps({ | 49 | defineProps({ |
51 | optionData: { | 50 | optionData: { |
52 | type: Object as PropType<typeof option>, | 51 | type: Object as PropType<typeof option>, |