简柏林 / thingskit-view · Commits

Commit 6a033c4933d74bf3855f34ac6ff1ba67f13a3bb8

Authored by xp.Huang
2 parents 1fca59cb cdc7df4b

Merge branch 'ft' into 'main_dev' 

pref: 优化部分组件配置和修改部分问题

See merge request yunteng/thingskit-view!100
Inline Side-by-side
Showing 39 changed files with 704 additions and 474 deletions
... ... @@ -7,7 +7,8 @@ enum Api {
7 7 DOWNLOAD = '/oss/download_file/',
8 8 AREALIST = '/area/list',
9 9 PLATFORM = '/platform/get',
10   - CONFIGURATION = '/configuration/center'
  10 + CONFIGURATION = '/configuration/center',
  11 + CONFIGURATION_SHARE = '/configuration/center/share/'
11 12 }
12 13
13 14 export const getDictItemByCode = (value: string) => {
... ... @@ -45,3 +46,10 @@ export const getPlatformInfo = () => defHttp.get({ url: Api.PLATFORM })
45 46 export const getConfigurationList = (params: object) => {
46 47 return defHttp.get({ url: `${Api.CONFIGURATION}`, params })
47 48 }
  49 +//组态设置是否公开或私有
  50 +export const setConfigurationIsShare = (params: string,isShare:boolean,data:object) => {
  51 + return defHttp.post({
  52 + url: `${Api.CONFIGURATION_SHARE}${params}?isShare=${isShare}`,
  53 + data
  54 + })
  55 +}
... ...
1 1 import { RequestContentTypeEnum } from "@/enums/external/httpEnum";
2 2 import { CreateComponentType } from "@/packages/index.d";
3   -import { useSocketStore } from "@/store/external/modules/socketStore";
4   -import { SocketReceiveMessageType } from "@/store/external/modules/socketStore.d";
  3 +import { useSocketStore} from "@/store/external/modules/socketStore";
  4 +import { SocketReceiveMessageType,SocketSendMessageType } from "@/store/external/modules/socketStore.d";
5 5 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
6 6 import { getJwtToken, getShareJwtToken } from "@/utils/external/auth";
7 7 import { useWebSocket, WebSocketResult } from "@vueuse/core";
8   -import { onMounted, unref } from "vue";
  8 +import {onMounted, ref, unref} from "vue";
9 9 import { ExtraRequestConfigType } from "@/store/external/modules/extraComponentInfo.d";
10 10 import { isShareMode } from "@/views/share/hook";
11 11
12 12
  13 +
13 14 interface SocketConnectionPoolType {
14 15 ws: WebSocketResult<SocketReceiveMessageType>
15 16 url: string
16 17 }
17 18
  19 +interface SaveHistoryWsMessage{
  20 + id: string
  21 + message: SocketSendMessageType
  22 +}
  23 +
18 24 const socketConnectionPool: SocketConnectionPoolType[] = []
19 25
  26 +const saveHistoryWsMessage=ref([] as SaveHistoryWsMessage[])
  27 +
20 28 const parse = (value: string) => {
21 29 try {
22 30 return JSON.parse(value)
... ... @@ -88,13 +96,45 @@ export const useChartDataSocket = () => {
88 96 const { subscribeMessage } = message
89 97 const { send, data } = getSocketInstance(request)
90 98 send(JSON.stringify(subscribeMessage))
  99 + /**
  100 + * 修改删除组件时，ws还在发送信息问题
  101 + */
  102 + saveHistoryWsMessage.value.push({
  103 + id: targetComponent.id,
  104 + message: subscribeMessage
  105 + })
  106 + //
91 107 return socketStore.getComponentValueByKeys(targetComponent, parse(unref(data)))
92 108 }
93 109
  110 + /**
  111 + * 修改删除组件时，ws还在发送信息问题
  112 + * @param targetComponent
  113 + */
  114 + //删除组件 发送断开消息
  115 + const disconnectWs=(targetComponent:CreateComponentType)=>{
  116 + try{
  117 + saveHistoryWsMessage.value.forEach((item)=>{
  118 + if(item.id===targetComponent.id){
  119 + const { request } = unref(targetComponent)
  120 + if((request.requestContentType as RequestContentTypeEnum) !== RequestContentTypeEnum.WEB_SOCKET)return
  121 + const { send } = getSocketInstance(request)
  122 + item.message.tsSubCmds[0].unsubscribe=true
  123 + send(JSON.stringify(item.message))
  124 + }
  125 + })
  126 + }catch (e) {
  127 + console.log(`
  128 + 错误位置：src/hooks/external/useChartDataSocket.ts
  129 + 错误原因：${e}
  130 + `)
  131 + }
  132 + }
94 133
95 134 return {
96 135 initial,
97   - sendMessage
  136 + sendMessage,
  137 + disconnectWs
98 138 }
99 139 }
100 140
... ...
... ... @@ -7,14 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '',
9 9 attribute: {
10   - colors: [
11   - '#19ecff',
12   - '#36F7FF',
13   - '#1FEEFF',
14   - '#19ECFF',
15   - '#9FFFFF',
16   - '#66FFFF',
17   - ],
  10 + bgColor1:'#19ECFF',
  11 + bgColor2:'#36F7FF',
  12 + bgColor3:'#1FEEFF',
  13 + bgColor4:'#9FFFFF',
  14 + bgColor5:'#66FFFF',
18 15 }
19 16 }
20 17
... ...
1 1 <template>
2 2 <CollapseItem name="配置" :expanded="true">
3   - <SettingItemBox
4   - :name="`装饰颜色-${index + 1}`"
5   - v-for="(item, index) in optionData.attribute.colors"
6   - :key="index"
7   - >
  3 + <SettingItemBox :name="`装饰1`">
8 4 <SettingItem name="颜色">
9   - <n-color-picker
10   - size="small"
11   - :modes="['hex']"
12   - v-model:value="optionData.attribute.colors[index]"
13   - ></n-color-picker>
  5 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
14 6 </SettingItem>
15 7 <SettingItem>
16   - <n-button size="small" @click="optionData.attribute.colors[index] = option.attribute.colors[index]">
17   - 恢复默认
18   - </n-button>
  8 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#19ECFF'"> 恢复默认 </n-button>
  9 + </SettingItem>
  10 + </SettingItemBox>
  11 + <SettingItemBox :name="`装饰2`">
  12 + <SettingItem name="颜色">
  13 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  14 + </SettingItem>
  15 + <SettingItem>
  16 + <n-button size="small" @click="optionData.attribute.bgColor2 = '#36F7FF'"> 恢复默认 </n-button>
  17 + </SettingItem>
  18 + </SettingItemBox>
  19 + <SettingItemBox :name="`装饰3`">
  20 + <SettingItem name="颜色">
  21 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  22 + </SettingItem>
  23 + <SettingItem>
  24 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#1FEEFF'"> 恢复默认 </n-button>
  25 + </SettingItem>
  26 + </SettingItemBox>
  27 + <SettingItemBox :name="`装饰4`">
  28 + <SettingItem name="颜色">
  29 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor4"></n-color-picker>
  30 + </SettingItem>
  31 + <SettingItem>
  32 + <n-button size="small" @click="optionData.attribute.bgColor4 = '#9FFFFF'"> 恢复默认 </n-button>
  33 + </SettingItem>
  34 + </SettingItemBox>
  35 + <SettingItemBox :name="`装饰5`">
  36 + <SettingItem name="颜色">
  37 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor5"></n-color-picker>
  38 + </SettingItem>
  39 + <SettingItem>
  40 + <n-button size="small" @click="optionData.attribute.bgColor5= '#66FFFF'"> 恢复默认 </n-button>
19 41 </SettingItem>
20 42 </SettingItemBox>
21 43 </CollapseItem>
... ...
... ... @@ -29,17 +29,17 @@
29 29 <g opacity="0.56" transform="translate(50 191) rotate(0)">
30 30 <path
31 31 id="椭圆形"
32   - :style="{fill: attribute.colors[0], opacity: 0.5}"
  32 + :style="{fill: attribute.bgColor1, opacity: 0.5}"
33 33 d="M255.253,52.5888c-1.16667,-1.91253 -2.59667,-3.8 -4.29,-5.6624l8.88,-8.072c2.20533,2.4266 4.09,4.92163 5.654,7.4851zM245.635,41.8709c-1.854,-1.53867 -3.88,-3.03637 -6.078,-4.4931l6.629,-10.0027c2.55667,1.6944 4.92767,3.4483 7.113,5.2617zM232.951,33.4091c-2.21467,-1.20953 -4.54367,-2.3739 -6.987,-3.4931l4.997,-10.9099c2.69933,1.2364 5.27967,2.52683 7.741,3.8713zM218.726,26.8647c-2.39467,-0.92887 -4.86567,-1.81297 -7.413,-2.6523l3.756,-11.3972c2.74333,0.90407 5.409,1.85793 7.997,2.8616zM203.848,21.943c-2.51,-0.70207 -5.07233,-1.3602 -7.687,-1.9744l2.744,-11.68201c2.778,0.65263 5.503,1.35264 8.175,2.10001zM188.166,18.2598c-2.538,-0.49047 -5.10933,-0.93957 -7.714,-1.3473l1.856,-11.85563c2.746,0.42981 5.45767,0.90345 8.135,1.42093zM172.485,15.8076c-2.67133,-0.3238 -5.36533,-0.6044 -8.082,-0.8418l1.045,-11.95442c2.85,0.24904 5.677,0.5435 8.481,0.88338zM156.51,14.4017c-2.674,-0.14913 -5.36033,-0.25677 -8.059,-0.3229l0.294,-11.99637c2.82333,0.06918 5.63433,0.18179 8.433,0.33783zM140.252,14.0058c-2.72533,0.018 -5.44067,0.07807 -8.146,0.1802l-0.452,-11.99151c2.82933,-0.10681 5.66867,-0.16963 8.518,-0.18846zM124.115,14.6123c-2.656,0.18367 -5.29333,0.40823 -7.912,0.6737l-1.21,-11.9388c2.746,-0.2784 5.511,-0.51383 8.295,-0.70628zM108.101,16.2467c-2.65133,0.3608 -5.27233,0.76387 -7.863,1.2092l-2.033,-11.82645c2.728,-0.46911 5.48733,-0.8935 8.278,-1.27319zM92.4227,18.9483c-2.67987,0.5642 -5.3112,1.17373 -7.894,1.8286l-2.9492,-11.63197c2.74113,-0.69498 5.5315,-1.34137 8.3711,-1.93918zM77.0008,22.8559c-2.5716,0.77107 -5.07473,1.58673 -7.5094,2.447l-3.9979,-11.3144c2.61707,-0.92473 5.30403,-1.8004 8.0609,-2.627zM62.126,28.1299c-2.47767,1.03173 -4.85403,2.1087 -7.1291,3.2309l-5.3083,-10.7621c2.50347,-1.2348 5.11157,-2.41703 7.8243,-3.5467zM48.1748,35.0426c-2.28713,1.35287 -4.42167,2.7487 -6.4036,4.1875l-7.0498,-9.7108c2.28573,-1.65933 4.73373,-3.26103 7.344,-4.8051zM35.9658,43.9745c-1.8764,1.7418 -3.51937,3.515 -4.9289,5.3196l-9.457,-7.3867c1.803,-2.3084 3.87697,-4.551 6.2219,-6.7278zM27.3622,55.1261c-0.99293,2.05987 -1.67283,4.1292 -2.0397,6.208l-11.8174,-2.0857c0.55893,-3.16687 1.57477,-6.2779 3.0475,-9.3331zM25.1762,67.7125c0.27313,2.09627 0.8639,4.18337 1.7723,6.2613l-10.9951,4.8069c-1.36433,-3.1206 -2.25653,-6.29327 -2.6766,-9.518zM30.3991,79.8654c1.34653,1.82767 2.93273,3.62567 4.7586,5.394l-8.3484,8.62c-2.30513,-2.23253 -4.3289,-4.53123 -6.0713,-6.8961zM40.8452,90.0861c1.9508,1.46533 4.0592,2.88813 6.3252,4.2684l-6.2425,10.2485c-2.59813,-1.58267 -5.02807,-3.22343 -7.2898,-4.9223zM53.9415,98.1118c2.26087,1.14507 4.6263,2.2448 7.0963,3.2992l-4.712,11.036c-2.71027,-1.15667 -5.31237,-2.36667 -7.8063,-3.63zM68.382,104.3c2.43567,0.882 4.94253,1.719 7.5206,2.511l-3.5232,11.471c-2.76693,-0.85 -5.46117,-1.74967 -8.0827,-2.699zM83.3729,108.926c2.56427,0.66733 5.1779,1.28967 7.8409,1.867l-2.5427,11.728c-2.82373,-0.612 -5.5973,-1.27267 -8.3207,-1.982zM99.0787,112.341c2.57687,0.45733 5.18497,0.87267 7.8243,1.246l-1.68,11.882c-2.77867,-0.39267 -5.52567,-0.83 -8.241,-1.312zM114.971,114.586c2.63267,0.28067 5.28533,0.51967 7.958,0.717l-0.885,11.967c-2.80133,-0.20667 -5.58267,-0.45733 -8.344,-0.752zM130.895,115.765c2.69733,0.11467 5.405,0.18733 8.123,0.218l-0.135,11.999c-2.84267,-0.032 -5.675,-0.10767 -8.497,-0.227zM147.226,115.948c2.706,-0.05333 5.4,-0.14867 8.082,-0.286l0.612,11.985c-2.80667,0.14333 -5.62533,0.243 -8.456,0.299zM163.228,115.134c2.70133,-0.22333 5.381,-0.489 8.039,-0.797l1.383,11.92c-2.78933,0.32333 -5.60067,0.602 -8.434,0.836zM179.27,113.269c2.61733,-0.39533 5.20167,-0.83233 7.753,-1.311l2.213,11.794c-2.69067,0.50467 -5.41467,0.96567 -8.172,1.383zM194.974,110.306c2.632,-0.60133 5.21267,-1.24667 7.742,-1.936l3.158,11.577c-2.69067,0.73333 -5.43333,1.41933 -8.228,2.058zM210.162,106.162c2.55867,-0.822 5.043,-1.689 7.453,-2.601l4.247,11.224c-2.60067,0.98333 -5.277,1.91733 -8.029,2.802zM224.914,100.559c2.45333,-1.09647 4.79633,-2.2381 7.029,-3.4249l5.633,10.5949c-2.474,1.316 -5.06267,2.578 -7.766,3.786zM238.611,93.2399c2.22333,-1.42993 4.28,-2.9014 6.17,-4.4144l7.5,9.3674c-2.214,1.77207 -4.60733,3.48543 -7.18,5.1401zM250.238,83.8526c1.73467,-1.82093 3.21667,-3.6684 4.446,-5.5424l10.033,6.5825c-1.626,2.479 -3.55567,4.89097 -5.789,7.2359zM257.727,72.2616c0.73667,-2.08967 1.15367,-4.1889 1.251,-6.2977l11.987,0.5523c-0.15133,3.2872 -0.79133,6.53193 -1.92,9.7342zM259,65c0,-2.1188 -0.32133,-4.2272 -0.964,-6.3252l11.473,-3.5153c0.994,3.24353 1.491,6.5237 1.491,9.8405z"
34 34 />
35 35 <path
36 36 id="椭圆形"
37   - :style="{fill: attribute.colors[0], opacity: 0.2}"
  37 + :style="{fill: attribute.bgColor1, opacity: 0.2}"
38 38 d="M236.007,55.489c-0.934,-1.54667 -2.07933,-3.07367 -3.436,-4.581l7.433,-6.6899c1.78067,1.9784 3.30167,4.0123 4.563,6.1017zM228.284,46.8008c-1.486,-1.24467 -3.10967,-2.45673 -4.871,-3.6362l5.564,-8.3092c2.05867,1.37867 3.968,2.8053 5.728,4.2799zM218.231,40.012c-1.83867,-1.01953 -3.77633,-2.00027 -5.813,-2.9422l4.198,-9.0763c2.25733,1.0442 4.412,2.13513 6.464,3.2728zM206.751,34.6508c-1.972,-0.7764 -4.00867,-1.5151 -6.11,-2.2161l3.164,-9.4861c2.26933,0.75707 4.47267,1.55623 6.61,2.3975zM194.536,30.5568c-2.026,-0.57313 -4.09433,-1.11083 -6.205,-1.6131l2.315,-9.7283c2.24733,0.53473 4.45133,1.10777 6.612,1.7191zM181.849,27.5393c-2.04933,-0.40173 -4.12633,-0.77013 -6.231,-1.1052l1.573,-9.8756c2.22133,0.35373 4.415,0.74293 6.581,1.1676zM169.182,25.5245c-2.16667,-0.26833 -4.352,-0.5015 -6.556,-0.6995l0.894,-9.9599c2.316,0.208 4.613,0.45307 6.891,0.7352zM156.246,24.3536c-2.16133,-0.12573 -4.33267,-0.21797 -6.514,-0.2767l0.269,-9.9964c2.28533,0.06153 4.56067,0.15817 6.826,0.2899zM143.1,24.0019c-2.20867,0.00927 -4.40933,0.05263 -6.602,0.1301l-0.353,-9.9938c2.29667,-0.08113 4.60133,-0.12653 6.914,-0.1362zM130.019,24.4619c-2.142,0.1428 -4.26933,0.31843 -6.382,0.5269l-0.982,-9.9517c2.218,-0.21887 4.45067,-0.40323 6.698,-0.5531zM117.062,25.7502c-2.152,0.28673 -4.27967,0.60783 -6.383,0.9633l-1.666,-9.8602c2.218,-0.37487 4.46067,-0.71337 6.728,-1.0155zM104.382,27.896c-2.178,0.4508 -4.31697,0.9385 -6.4169,1.4631l-2.4233,-9.7019c2.23153,-0.5574 4.50227,-1.07523 6.8122,-1.5535zM91.8416,31.026c-2.11333,0.6248 -4.171,1.28667 -6.173,1.9856l-3.2961,-9.4411c2.15447,-0.7522 4.3658,-1.46357 6.634,-2.1341zM79.6749,35.2844c-1.9798,0.8144 -3.88187,1.6643 -5.7062,2.5497l-4.3662,-8.9965c2.00907,-0.97507 4.09847,-1.90883 6.2682,-2.8013zM68.3041,40.8446c-1.8008,1.0496 -3.48867,2.13203 -5.0636,3.2473l-5.779,-8.1611c1.81567,-1.28567 3.7513,-2.5276 5.8069,-3.7258zM58.4772,47.8755c-1.54693,1.3896 -2.91103,2.80543 -4.0923,4.2475l-7.7359,-6.3369c1.5042,-1.83633 3.2194,-3.61963 5.1456,-5.3499zM51.2597,56.7907c-0.86167,1.6472 -1.47697,3.30223 -1.8459,4.9651l-9.7627,-2.1659c0.5604,-2.52587 1.4763,-5.004 2.7477,-7.4344zM49.0569,66.8916c0.13867,1.69473 0.53167,3.38227 1.179,5.0626l-9.3316,3.5948c-0.9924,-2.5762 -1.5971,-5.19007 -1.8141,-7.8416zM52.8216,76.7971c1.026,1.49813 2.2498,2.97423 3.6714,4.4283l-7.1505,6.9908c-1.8272,-1.86893 -3.4177,-3.7918 -4.7715,-5.7686zM60.9628,85.2102c1.5234,1.19727 3.17527,2.36177 4.9556,3.4935l-5.3646,8.4392c-2.06147,-1.3104 -3.9849,-2.6672 -5.7703,-4.0704zM71.2813,91.8061c1.83747,0.9696 3.7656,1.9015 5.7844,2.7957l-4.0498,9.1432c-2.22807,-0.98667 -4.36193,-2.01833 -6.4016,-3.095zM82.8557,96.968c2.0116,0.75793 4.0862,1.4773 6.2238,2.1581l-3.0349,9.5279c-2.30253,-0.73333 -4.54077,-1.50933 -6.7147,-2.328zM95.1087,100.898c2.05393,0.55533 4.1487,1.075 6.2843,1.559l-2.2077,9.753c-2.2708,-0.514 -4.49987,-1.067 -6.6872,-1.659zM107.811,103.778c2.07,0.38467 4.166,0.73567 6.288,1.053l-1.479,9.89c-2.23867,-0.33467 -4.451,-0.70533 -6.637,-1.112zM120.588,105.686c2.14733,0.246 4.312,0.45767 6.494,0.635l-0.81,9.967c-2.29133,-0.186 -4.56533,-0.40833 -6.822,-0.667zM133.499,106.741c2.17333,0.108 4.356,0.182 6.548,0.222l-0.185,9.999c-2.296,-0.04267 -4.58233,-0.12067 -6.859,-0.234zM146.693,106.983c2.19867,-0.02733 4.38867,-0.089 6.57,-0.185l0.438,9.991c-2.28533,0.1 -4.57967,0.16433 -6.883,0.193zM159.707,106.416c2.16533,-0.16267 4.31467,-0.35933 6.448,-0.59l1.073,9.942c-2.24067,0.242 -4.49767,0.44867 -6.771,0.62zM172.68,105.009c2.13467,-0.30467 4.244,-0.64333 6.328,-1.016l1.761,9.844c-2.19933,0.39333 -4.42433,0.75067 -6.675,1.072zM185.378,102.73c2.15267,-0.47 4.26567,-0.97633 6.339,-1.519l2.533,9.674c-2.206,0.57733 -4.45267,1.11567 -6.74,1.615zM197.758,99.4908c2.138,-0.66007 4.21567,-1.35847 6.233,-2.0952l3.43,9.3934c-2.176,0.79467 -4.414,1.547 -6.714,2.257zM209.867,95.0676c2.004,-0.86093 3.92267,-1.7587 5.756,-2.6933l4.541,8.9097c-2.02867,1.034 -4.14533,2.02467 -6.35,2.972zM221.112,89.3089c1.79067,-1.09773 3.45933,-2.22837 5.006,-3.3919l6.011,7.9913c-1.79933,1.35393 -3.72933,2.66257 -5.79,3.9259zM230.714,82.0141c1.47533,-1.42807 2.759,-2.88 3.851,-4.3558l8.039,5.9479c-1.41933,1.91793 -3.06433,3.78223 -4.935,5.5929zM237.368,72.9103c0.742,-1.6738 1.231,-3.3548 1.467,-5.043l9.904,1.3835c-0.36533,2.6138 -1.10833,5.1848 -2.229,7.713zM239,65.5c0,-1.70767 -0.25633,-3.40717 -0.769,-5.0985l9.569,-2.9017c0.8,2.63727 1.2,5.304 1.2,8.0002z"
39 39 />
40 40 <path
41 41 id="椭圆形"
42   - :style="{fill: attribute.colors[0], opacity: 1}"
  42 + :style="{fill: attribute.bgColor1, opacity: 1}"
43 43 d="M276.756,54.0128c-1.02333,-1.954 -2.28367,-3.89097 -3.781,-5.8109l11.038,-8.6111c2.016,2.584 3.731,5.22613 5.145,7.9264zM268.125,42.843c-1.71,-1.65413 -3.58967,-3.27597 -5.639,-4.8655l8.58,-11.0626c2.452,1.90187 4.71633,3.85713 6.793,5.8658zM256.266,33.5906c-2.10133,-1.353 -4.321,-2.66803 -6.659,-3.9451l6.71,-12.2871c2.63467,1.43887 5.14433,2.92617 7.529,4.4619zM242.64,26.1197c-2.29933,-1.07933 -4.681,-2.12033 -7.145,-3.123l5.277,-12.9676c2.69067,1.09487 5.29633,2.23393 7.817,3.4172zM228.123,20.1993c-2.454,-0.8678 -4.96833,-1.6969 -7.543,-2.4873l4.108,-13.38356c2.76267,0.84795 5.46333,1.73851 8.102,2.67168zM213.135,15.58c-2.54467,-0.6784 -5.133,-1.31873 -7.765,-1.921l3.122,-13.64736c2.794,0.63929 5.54367,1.31956 8.249,2.04081zM197.358,11.9703c-2.536,-0.4902 -5.101,-0.94503 -7.695,-1.3645l2.235,-13.82046c2.73533,0.44229 5.441,0.92207 8.117,1.43934zM181.748,9.44776c-2.68467,-0.35221 -5.39067,-0.66678 -8.118,-0.94369l1.414,-13.92841c2.86333,0.29072 5.705,0.62107 8.525,0.99106zM165.714,7.81089c-2.63933,-0.19469 -5.291,-0.35438 -7.955,-0.47908l0.654,-13.98469c2.79,0.13057 5.567,0.29781 8.331,0.50172zM149.667,7.0617c-2.052,-0.04113 -4.10767,-0.0617 -6.167,-0.0617l-2.065,0.00686l-0.046,-13.99992l2.111,-0.00694c2.15333,0 4.30233,0.0215 6.447,0.06451zM133.303,7.16919c-2.68667,0.08947 -5.362,0.21433 -8.026,0.37457l-0.841,-13.97475c2.78867,-0.16774 5.589,-0.29843 8.401,-0.39206zM117.395,8.12421c-2.71133,0.23666 -5.40367,0.51024 -8.077,0.82075l-1.615,-13.90649c2.80533,-0.32589 5.63033,-0.61297 8.475,-0.86123zM101.299,9.99598c-2.63007,0.38455 -5.2328,0.80502 -7.8082,1.26142l-2.4431,-13.78517c2.71427,-0.48103 5.4561,-0.92402 8.2255,-1.32895zM85.6583,12.7744c-2.68093,0.56453 -5.32067,1.16807 -7.9192,1.8106l-3.3604,-13.59076c2.75653,-0.68157 5.55483,-1.32137 8.3949,-1.91939zM70.13,16.6121c-2.54127,0.7274 -5.02907,1.49197 -7.4634,2.2937l-4.3793,-13.29742c2.6088,-0.85917 5.27207,-1.67774 7.9898,-2.45572zM55.2503,21.5264c-2.52327,0.95553 -4.96897,1.95037 -7.3371,2.9845l-5.6027,-12.8301c2.58093,-1.12703 5.2416,-2.20941 7.982,-3.24713zM40.8249,27.8419c-2.37013,1.199 -4.63297,2.43607 -6.7885,3.7112l-7.128,-12.0496c2.4202,-1.43167 4.95253,-2.81637 7.597,-4.1541zM27.6192,35.686c-2.1324,1.49947 -4.11127,3.03317 -5.9366,4.6011l-9.1223,-10.62c2.16833,-1.86253 4.50363,-3.6736 7.0059,-5.4332zM16.3974,45.3937c-1.6812,1.847 -3.14113,3.7162 -4.3798,5.6076l-11.7119,-7.6701c1.64505,-2.51193 3.55783,-4.9657 5.73833,-7.3613zM8.86227,57.02c-0.8222,2.08013 -1.37211,4.1679 -1.64973,6.2633l-13.87872,-1.8387c0.42835,-3.23313 1.26454,-6.4234 2.50859,-9.5708zM7.20605,69.6673c0.27336,2.09567 0.81905,4.18373 1.63708,6.2642l-13.029,5.123c-1.23837,-3.14947 -2.06853,-6.3416 -2.49048,-9.5764zM11.9872,81.9522c1.23547,1.8924 2.69243,3.7627 4.3709,5.6109l-10.36391,9.4122c-2.17819,-2.39847 -4.08817,-4.8551 -5.72994,-7.3699zM21.6371,92.6738c1.82367,1.56927 3.8011,3.10433 5.9323,4.6052l-8.0609,11.446c-2.5016,-1.76133 -4.83597,-3.57433 -7.0031,-5.439zM33.9839,101.416c2.15473,1.276 4.417,2.51433 6.7868,3.715l-6.3254,12.489c-2.64447,-1.33933 -5.17653,-2.72567 -7.5962,-4.159zM47.8579,108.465c2.36773,1.03533 4.8132,2.031 7.3364,2.987l-4.9625,13.091c-2.74053,-1.03867 -5.40113,-2.122 -7.9818,-3.25zM62.6072,114.075c2.4348,0.80267 4.9231,1.568 7.4649,2.296l-3.8568,13.459c-2.71847,-0.77933 -5.38237,-1.599 -7.9917,-2.459zM77.6787,118.4c2.5978,0.64333 5.23673,1.24733 7.9168,1.812l-2.8883,13.699c-2.8394,-0.59867 -5.63697,-1.239 -8.3927,-1.921zM93.4309,121.732c2.57473,0.45667 5.17677,0.87767 7.8061,1.263l-2.0287,13.852c-2.76893,-0.40533 -5.5102,-0.84867 -8.2238,-1.33zM109.255,124.048c2.674,0.31067 5.367,0.58467 8.079,0.822l-1.22,13.947c-2.84533,-0.24867 -5.671,-0.53633 -8.477,-0.863zM125.215,125.453c2.66333,0.16067 5.33833,0.286 8.025,0.376l-0.469,13.992c-2.81133,-0.094 -5.61133,-0.22533 -8.4,-0.394zM141.371,125.993l2.153,0.007c2.022,0 4.04833,-0.02 6.079,-0.06l0.278,13.997c-2.12333,0.042 -4.25833,0.063 -6.405,0.063l-2.153,-0.007zM157.696,125.671c2.66467,-0.124 5.31667,-0.283 7.956,-0.477l1.027,13.962c-2.764,0.20333 -5.541,0.37 -8.331,0.5zM173.566,124.502c2.728,-0.276 5.43467,-0.59 8.12,-0.942l1.818,13.882c-2.82067,0.36933 -5.663,0.699 -8.527,0.989zM189.602,122.404c2.59533,-0.41867 5.161,-0.873 7.697,-1.363l2.654,13.746c-2.67667,0.51667 -5.383,0.996 -8.119,1.438zM205.308,119.355c2.63267,-0.60133 5.222,-1.241 7.768,-1.919l3.602,13.528c-2.706,0.72067 -5.45633,1.40033 -8.251,2.039zM220.523,115.305c2.574,-0.78933 5.08833,-1.61733 7.543,-2.484l4.662,13.201c-2.63867,0.932 -5.33867,1.82133 -8.1,2.668zM235.438,110.027c2.464,-1.002 4.846,-2.042 7.146,-3.12l5.943,12.676c-2.52133,1.182 -5.12733,2.31967 -7.818,3.413zM249.555,103.383c2.33867,-1.276 4.559,-2.58993 6.661,-3.9418l7.573,11.7748c-2.38533,1.534 -4.89533,3.01967 -7.53,4.457zM262.439,95.0582c2.05133,-1.58807 3.93267,-3.20853 5.644,-4.8614l9.725,10.0712c-2.078,2.00667 -4.34367,3.95967 -6.797,5.859zM272.941,84.8416c1.50067,-1.91873 2.76433,-3.8547 3.791,-5.8079l12.392,6.515c-1.41867,2.69733 -3.137,5.3365 -5.155,7.9175zM279.157,72.8898c0.55733,-2.104 0.83833,-4.21727 0.843,-6.3398l14,0.0288c-0.00667,3.328 -0.443,6.6267 -1.309,9.8961zM280,66.5c0,-2.12293 -0.27667,-4.23673 -0.83,-6.3414l13.54,-3.5592c0.86,3.27113 1.29,6.57133 1.29,9.9006z"
44 44 />
45 45 </g>
... ... @@ -86,9 +86,9 @@
86 86 y2="100%"
87 87 gradientUnits="objectBoundingBox"
88 88 >
89   - <stop offset="0" :stop-color="attribute.colors[1]" stop-opacity="0" />
90   - <stop offset="0.6766349198750631" :stop-color="attribute.colors[2]" stop-opacity="0.8" />
91   - <stop offset="1" :stop-color="attribute.colors[3]" stop-opacity="1" />
  89 + <stop offset="0" :stop-color="attribute.bgColor2" stop-opacity="0" />
  90 + <stop offset="0.6766349198750631" :stop-color="attribute.bgColor3" stop-opacity="0.8" />
  91 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="1" />
92 92 </linearGradient>
93 93 <filter
94 94 id="filter_4"
... ... @@ -122,9 +122,9 @@
122 122 y2="100%"
123 123 gradientUnits="objectBoundingBox"
124 124 >
125   - <stop offset="0" :stop-color="attribute.colors[1]" stop-opacity="0" />
126   - <stop offset="0.6766349198750631" :stop-color="attribute.colors[2]" stop-opacity="0.8" />
127   - <stop offset="1" :stop-color="attribute.colors[3]" stop-opacity="1" />
  125 + <stop offset="0" :stop-color="attribute.bgColor2" stop-opacity="0" />
  126 + <stop offset="0.6766349198750631" :stop-color="attribute.bgColor3" stop-opacity="0.8" />
  127 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="1" />
128 128 </linearGradient>
129 129 <filter
130 130 id="filter_5"
... ... @@ -158,8 +158,8 @@
158 158 y2="74.82884987113394%"
159 159 gradientUnits="objectBoundingBox"
160 160 >
161   - <stop offset="0" :stop-color="attribute.colors[4]" stop-opacity="0" />
162   - <stop offset="1" :stop-color="attribute.colors[5]" stop-opacity="1" />
  161 + <stop offset="0" :stop-color="attribute.bgColor4" stop-opacity="0" />
  162 + <stop offset="1" :stop-color="attribute.bgColor5" stop-opacity="1" />
163 163 </linearGradient>
164 164 </defs>
165 165 </svg>
... ...
... ... @@ -7,17 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '',
9 9 attribute: {
10   - colors: [
11   - '#66ffff',
12   - '#025E81',
13   - '#16CCE0',
14   - '#025E81',
15   - '#16CCE0',
16   - '#17D4E7',
17   - '#082C51',
18   - '#17D4E7',
19   - '#082C51',
20   - ],
  10 + bgColor1:'#66ffff',
  11 + bgColor2:'#025E81',
  12 + bgColor3:'#16CCE0',
  13 + bgColor4:'#17D4E7',
  14 + bgColor5:'#082C51',
21 15 }
22 16 }
23 17
... ...
1 1 <template>
2 2 <CollapseItem name="配置" :expanded="true">
3   - <SettingItemBox
4   - :name="`装饰颜色-${index + 1}`"
5   - v-for="(item, index) in optionData.attribute.colors"
6   - :key="index"
7   - >
  3 + <SettingItemBox :name="`装饰1`">
8 4 <SettingItem name="颜色">
9   - <n-color-picker
10   - size="small"
11   - :modes="['hex']"
12   - v-model:value="optionData.attribute.colors[index]"
13   - ></n-color-picker>
  5 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
14 6 </SettingItem>
15 7 <SettingItem>
16   - <n-button size="small" @click="optionData.attribute.colors[index] = option.attribute.colors[index]">
17   - 恢复默认
18   - </n-button>
  8 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#66ffff'"> 恢复默认 </n-button>
  9 + </SettingItem>
  10 + </SettingItemBox>
  11 + <SettingItemBox :name="`装饰2`">
  12 + <SettingItem name="颜色">
  13 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  14 + </SettingItem>
  15 + <SettingItem>
  16 + <n-button size="small" @click="optionData.attribute.bgColor2= '#025E81'"> 恢复默认 </n-button>
  17 + </SettingItem>
  18 + </SettingItemBox>
  19 + <SettingItemBox :name="`装饰3`">
  20 + <SettingItem name="颜色">
  21 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  22 + </SettingItem>
  23 + <SettingItem>
  24 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#16CCE0'"> 恢复默认 </n-button>
  25 + </SettingItem>
  26 + </SettingItemBox>
  27 + <SettingItemBox :name="`装饰4`">
  28 + <SettingItem name="颜色">
  29 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor4"></n-color-picker>
  30 + </SettingItem>
  31 + <SettingItem>
  32 + <n-button size="small" @click="optionData.attribute.bgColor4= '#17D4E7'"> 恢复默认 </n-button>
  33 + </SettingItem>
  34 + </SettingItemBox>
  35 + <SettingItemBox :name="`装饰5`">
  36 + <SettingItem name="颜色">
  37 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor5"></n-color-picker>
  38 + </SettingItem>
  39 + <SettingItem>
  40 + <n-button size="small" @click="optionData.attribute.bgColor5 = '#082C51'"> 恢复默认 </n-button>
19 41 </SettingItem>
20 42 </SettingItemBox>
21 43 </CollapseItem>
... ...
... ... @@ -11,7 +11,7 @@
11 11 <g opacity="1" transform="translate(0 0) rotate(0)">
12 12 <path
13 13 id="椭圆形"
14   - :style="{ fill: attribute.colors[0], opacity: 1 }"
  14 + :style="{ fill: attribute.bgColor1, opacity: 1 }"
15 15 d="M139.621,136.251c-2.61,-2.04333 -5.588,-3.925 -8.934,-5.645l3.447,-6.71c3.772,1.938 7.15133,4.07633 10.138,6.415zM117.348,125.283c-3.40467,-1.03333 -6.94467,-1.89633 -10.62,-2.589l1.397,-7.413c3.944,0.74267 7.74833,1.67033 11.413,2.783zM92.22,120.92c-2.4356,-0.14533 -4.8863,-0.218 -7.3521,-0.218c-1.2664,0 -2.52947,0.01933 -3.7892,0.058l-0.2295,-7.541c1.3362,-0.04067 2.67577,-0.061 4.0187,-0.061c2.61553,0 5.21587,0.077 7.801,0.231zM66.4938,122.095c-3.67767,0.572 -7.24003,1.312 -10.6871,2.22l-1.9218,-7.295c3.69873,-0.97467 7.5155,-1.76767 11.4503,-2.379zM42.1309,129.118c-3.43633,1.55933 -6.54803,3.28567 -9.3351,5.179l-4.2389,-6.24c3.14287,-2.13533 6.6283,-4.07167 10.4563,-5.809zM22.907,143.636c-2.01593,2.854 -3.2796,5.77967 -3.791,8.777l-7.4364,-1.269c0.7032,-4.12133 2.39173,-8.075 5.0656,-11.861zM21.2625,164.572c1.45987,2.72667 3.54307,5.337 6.2496,7.831l-5.1119,5.548c-3.33127,-3.07 -5.9273,-6.34267 -7.7881,-9.818zM39.145,180.303c3.07327,1.57333 6.3896,2.97533 9.949,4.206l-2.466,7.13c-3.89267,-1.34667 -7.53267,-2.88667 -10.92,-4.62zM63.1185,188.187c3.54973,0.66533 7.17993,1.163 10.8906,1.493l-0.6688,7.514c-3.9524,-0.35133 -7.82277,-0.882 -11.6111,-1.592zM88.7721,190.097c3.68647,-0.11533 7.32063,-0.39367 10.9025,-0.835l0.9224,7.487c-3.80967,0.46933 -7.67247,0.76533 -11.5884,0.888zM114.041,186.516c3.61867,-0.958 7.05333,-2.08633 10.304,-3.385l2.799,7.006c-3.53467,1.412 -7.259,2.636 -11.173,3.672zM137.03,176.502c3.09067,-2.10867 5.693,-4.363 7.807,-6.763l5.661,4.986c-2.53133,2.874 -5.60333,5.54367 -9.216,8.009zM150.636,158.352c0.16,-0.97 0.24,-1.944 0.24,-2.922c0,-3.072 -0.78533,-6.09 -2.356,-9.054l6.666,-3.532c2.156,4.068 3.234,8.26333 3.234,12.586c0,1.39067 -0.11367,2.774 -0.341,4.15z"
16 16 />
17 17 <g opacity="1" transform="translate(0 0) rotate(0)" class="beat">
... ... @@ -58,8 +58,8 @@
58 58 y2="35.79683373280602%"
59 59 gradientUnits="objectBoundingBox"
60 60 >
61   - <stop offset="0" :stop-color="attribute.colors[1]" stop-opacity="1" />
62   - <stop offset="1" :stop-color="attribute.colors[2]" stop-opacity="1" />
  61 + <stop offset="0" :stop-color="attribute.bgColor2" stop-opacity="1" />
  62 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="1" />
63 63 </linearGradient>
64 64 <linearGradient
65 65 id="decorates09_linear_1"
... ... @@ -69,8 +69,8 @@
69 69 y2="10.637680716914133%"
70 70 gradientUnits="objectBoundingBox"
71 71 >
72   - <stop offset="0" :stop-color="attribute.colors[3]" stop-opacity="1" />
73   - <stop offset="1" :stop-color="attribute.colors[4]" stop-opacity="1" />
  72 + <stop offset="0" :stop-color="attribute.bgColor2" stop-opacity="1" />
  73 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="1" />
74 74 </linearGradient>
75 75 <linearGradient
76 76 id="decorates09_linear_2"
... ... @@ -80,8 +80,8 @@
80 80 y2="96.00644548395181%"
81 81 gradientUnits="objectBoundingBox"
82 82 >
83   - <stop offset="0" :stop-color="attribute.colors[5]" stop-opacity="1" />
84   - <stop offset="1" :stop-color="attribute.colors[6]" stop-opacity="1" />
  83 + <stop offset="0" :stop-color="attribute.bgColor4" stop-opacity="1" />
  84 + <stop offset="1" :stop-color="attribute.bgColor5" stop-opacity="1" />
85 85 </linearGradient>
86 86 <filter
87 87 id="decorates09_filter_5"
... ... @@ -115,8 +115,8 @@
115 115 y2="96.00644548395181%"
116 116 gradientUnits="objectBoundingBox"
117 117 >
118   - <stop offset="0" :stop-color="attribute.colors[7]" stop-opacity="1" />
119   - <stop offset="1" :stop-color="attribute.colors[8]" stop-opacity="1" />
  118 + <stop offset="0" :stop-color="attribute.bgColor4" stop-opacity="1" />
  119 + <stop offset="1" :stop-color="attribute.bgColor5" stop-opacity="1" />
120 120 </linearGradient>
121 121 <filter
122 122 id="decorates09_filter_6"
... ...
... ... @@ -7,20 +7,12 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '',
9 9 attribute: {
10   - colors: [
11   - '#22EB5F',
12   - '#C48613',
13   - '#FFFFFF',
14   - '#39EF71',
15   - '#FFFFFF',
16   - '#39EF71',
17   - '#CAFFE1',
18   - '#04E848',
19   - '#CAFFE1',
20   - '#04E848',
21   - '#CAFFE1',
22   - '#04E848'
23   - ]
  10 + bgColor1:'#22EB5F',
  11 + bgColor2:'#C48613',
  12 + bgColor3:'#FFFFFF',
  13 + bgColor4:'#39EF71',
  14 + bgColor5:'#CAFFE1',
  15 + bgColor6:'#04E848',
24 16 }
25 17 }
26 18
... ...
1 1 <template>
2 2 <CollapseItem name="配置" :expanded="true">
3   - <SettingItemBox
4   - :name="`装饰颜色-${index + 1}`"
5   - v-for="(item, index) in optionData.attribute.colors"
6   - :key="index"
7   - >
  3 + <SettingItemBox :name="`装饰1`">
8 4 <SettingItem name="颜色">
9   - <n-color-picker
10   - size="small"
11   - :modes="['hex']"
12   - v-model:value="optionData.attribute.colors[index]"
13   - ></n-color-picker>
  5 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
14 6 </SettingItem>
15 7 <SettingItem>
16   - <n-button size="small" @click="optionData.attribute.colors[index] = option.attribute.colors[index]">
17   - 恢复默认
18   - </n-button>
  8 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#22EB5F'"> 恢复默认 </n-button>
  9 + </SettingItem>
  10 + </SettingItemBox>
  11 + <SettingItemBox :name="`装饰2`">
  12 + <SettingItem name="颜色">
  13 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor2"></n-color-picker>
  14 + </SettingItem>
  15 + <SettingItem>
  16 + <n-button size="small" @click="optionData.attribute.bgColor2 = '#C48613'"> 恢复默认 </n-button>
  17 + </SettingItem>
  18 + </SettingItemBox>
  19 + <SettingItemBox :name="`装饰3`">
  20 + <SettingItem name="颜色">
  21 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor3"></n-color-picker>
  22 + </SettingItem>
  23 + <SettingItem>
  24 + <n-button size="small" @click="optionData.attribute.bgColor3 = '#FFFFFF'"> 恢复默认 </n-button>
  25 + </SettingItem>
  26 + </SettingItemBox>
  27 + <SettingItemBox :name="`装饰4`">
  28 + <SettingItem name="颜色">
  29 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor4"></n-color-picker>
  30 + </SettingItem>
  31 + <SettingItem>
  32 + <n-button size="small" @click="optionData.attribute.bgColor4 = '#39EF71'"> 恢复默认 </n-button>
  33 + </SettingItem>
  34 + </SettingItemBox>
  35 + <SettingItemBox :name="`装饰5`">
  36 + <SettingItem name="颜色">
  37 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor5"></n-color-picker>
  38 + </SettingItem>
  39 + <SettingItem>
  40 + <n-button size="small" @click="optionData.attribute.bgColor5 = '#CAFFE1'"> 恢复默认 </n-button>
  41 + </SettingItem>
  42 + </SettingItemBox>
  43 + <SettingItemBox :name="`装饰6`">
  44 + <SettingItem name="颜色">
  45 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor6"></n-color-picker>
  46 + </SettingItem>
  47 + <SettingItem>
  48 + <n-button size="small" @click="optionData.attribute.bgColor6 = '#04E848'"> 恢复默认 </n-button>
19 49 </SettingItem>
20 50 </SettingItemBox>
21 51 </CollapseItem>
... ...
... ... @@ -67,8 +67,8 @@
67 67 y2="97.23011363636364%"
68 68 gradientUnits="objectBoundingBox"
69 69 >
70   - <stop offset="0" :stop-color="attribute.colors[0]" stop-opacity="1" />
71   - <stop offset="1" :stop-color="attribute.colors[1]" stop-opacity="0" />
  70 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  71 + <stop offset="1" :stop-color="attribute.bgColor2" stop-opacity="0" />
72 72 </linearGradient>
73 73 <linearGradient
74 74 id="decorates10_linear_1"
... ... @@ -78,8 +78,8 @@
78 78 y2="39.858217592598066%"
79 79 gradientUnits="objectBoundingBox"
80 80 >
81   - <stop offset="0" :stop-color="attribute.colors[2]" stop-opacity="0.15" />
82   - <stop offset="1" :stop-color="attribute.colors[3]" stop-opacity="1" />
  81 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="0.15" />
  82 + <stop offset="1" :stop-color="attribute.bgColor4" stop-opacity="1" />
83 83 </linearGradient>
84 84 <linearGradient
85 85 id="decorates10_linear_2"
... ... @@ -89,8 +89,8 @@
89 89 y2="39.858217592598066%"
90 90 gradientUnits="objectBoundingBox"
91 91 >
92   - <stop offset="0" :stop-color="attribute.colors[4]" stop-opacity="0.15" />
93   - <stop offset="1" :stop-color="attribute.colors[5]" stop-opacity="1" />
  92 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="0.15" />
  93 + <stop offset="1" :stop-color="attribute.bgColor4" stop-opacity="1" />
94 94 </linearGradient>
95 95 <linearGradient
96 96 id="linear_3"
... ... @@ -100,8 +100,8 @@
100 100 y2="98.39106206293707%"
101 101 gradientUnits="objectBoundingBox"
102 102 >
103   - <stop offset="0" :stop-color="attribute.colors[6]" stop-opacity="1" />
104   - <stop offset="1" :stop-color="attribute.colors[7]" stop-opacity="1" />
  103 + <stop offset="0" :stop-color="attribute.bgColor5" stop-opacity="1" />
  104 + <stop offset="1" :stop-color="attribute.bgColor6" stop-opacity="1" />
105 105 </linearGradient>
106 106 <filter
107 107 id="decorates10_filter_6"
... ... @@ -135,8 +135,8 @@
135 135 y2="98.39106206293707%"
136 136 gradientUnits="objectBoundingBox"
137 137 >
138   - <stop offset="0" :stop-color="attribute.colors[8]" stop-opacity="1" />
139   - <stop offset="1" :stop-color="attribute.colors[9]" stop-opacity="1" />
  138 + <stop offset="0" :stop-color="attribute.bgColor5" stop-opacity="1" />
  139 + <stop offset="1" :stop-color="attribute.bgColor6" stop-opacity="1" />
140 140 </linearGradient>
141 141 <filter
142 142 id="decorates10_filter_7"
... ... @@ -170,8 +170,8 @@
170 170 y2="98.39106206293707%"
171 171 gradientUnits="objectBoundingBox"
172 172 >
173   - <stop offset="0" :stop-color="attribute.colors[10]" stop-opacity="1" />
174   - <stop offset="1" :stop-color="attribute.colors[11]" stop-opacity="1" />
  173 + <stop offset="0" :stop-color="attribute.bgColor5" stop-opacity="1" />
  174 + <stop offset="1" :stop-color="attribute.bgColor6" stop-opacity="1" />
175 175 </linearGradient>
176 176 <filter
177 177 id="decorates10_filter_8"
... ...
... ... @@ -7,14 +7,15 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '我是标题',
9 9 attribute: {
10   - linearColors: ['#0559A3', '#0654A3', '#2AFFFF', '#2AFFFF', '#2affff', ' #2affff', '#16d9d9'],
  10 + bgColor:'#0559A3',
  11 + bgRightColor:'#2AFFFF',
  12 + rect17:'#16D9D9',
11 13 fontSize: 20,
12 14 fontPos: {
13 15 x: 0,
14 16 y: 20
15 17 },
16 18 fontColor: '#2AFFFF',
17   - lineColor: '#2AFFFF'
18 19 }
19 20 }
20 21
... ...
... ... @@ -20,30 +20,28 @@
20 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 21 </SettingItem>
22 22 </SettingItemBox>
23   - <SettingItemBox
24   - :name="`装饰颜色-${index + 1}`"
25   - v-for="(item, index) in optionData.attribute.linearColors"
26   - :key="index"
27   - >
  23 + <SettingItemBox :name="`左边装饰`">
28 24 <SettingItem name="颜色">
29   - <n-color-picker
30   - size="small"
31   - :modes="['hex']"
32   - v-model:value="optionData.attribute.linearColors[index]"
33   - ></n-color-picker>
  25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor"></n-color-picker>
34 26 </SettingItem>
35 27 <SettingItem>
36   - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
37   - 恢复默认
38   - </n-button>
  28 + <n-button size="small" @click="optionData.attribute.bgColor = '#0559A3'"> 恢复默认 </n-button>
39 29 </SettingItem>
40 30 </SettingItemBox>
41   - <SettingItemBox :name="`装饰颜色8`">
  31 + <SettingItemBox :name="`右边装饰`">
42 32 <SettingItem name="颜色">
43   - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.lineColor"></n-color-picker>
  33 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgRightColor"></n-color-picker>
44 34 </SettingItem>
45 35 <SettingItem>
46   - <n-button size="small" @click="optionData.attribute.lineColor = '#2AFFFF'"> 恢复默认 </n-button>
  36 + <n-button size="small" @click="optionData.attribute.bgRightColor = '#2AFFFF'"> 恢复默认 </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.rect17"></n-color-picker>
  42 + </SettingItem>
  43 + <SettingItem>
  44 + <n-button size="small" @click="optionData.attribute.rect17 = '#16D9D9'"> 恢复默认 </n-button>
47 45 </SettingItem>
48 46 </SettingItemBox>
49 47 </CollapseItem>
... ...
... ... @@ -9,12 +9,12 @@
9 9 >
10 10 <defs>
11 11 <linearGradient id="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.bgColor" stop-opacity="1" />
  13 + <stop offset="1" :stop-color="attribute.bgColor" stop-opacity="0" />
14 14 </linearGradient>
15 15 <linearGradient id="linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
16   - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="0" />
17   - <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0.2" />
  16 + <stop offset="0" :stop-color="attribute.bgRightColor" stop-opacity="0" />
  17 + <stop offset="1" :stop-color="attribute.bgRightColor" stop-opacity="0.2" />
18 18 </linearGradient>
19 19 </defs>
20 20 <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
... ... @@ -45,7 +45,7 @@
45 45 <path
46 46 id="矩形 21"
47 47 fill-rule="evenodd"
48   - :style="{ fill: attribute.lineColor }"
  48 + :style="{ fill: attribute.bgRightColor }"
49 49 transform="translate(0 0) rotate(0 0.5 15)"
50 50 opacity="1"
51 51 :d="`M0,${h}L1,${h}L1,0L0,0L0,${h}Z`"
... ... @@ -54,7 +54,7 @@
54 54 <path
55 55 id="矩形 22"
56 56 fill-rule="evenodd"
57   - :style="{ fill: attribute.linearColors[4] }"
  57 + :style="{ fill: attribute.rect17 }"
58 58 transform="translate(2 0) rotate(0 5.5 3.5)"
59 59 opacity="1"
60 60 :d="`M6,7 L11,7 L5,0 L0,0 L6,7 Z`"
... ... @@ -62,7 +62,7 @@
62 62 <path
63 63 id="圆形 7"
64 64 fill-rule="evenodd"
65   - :style="{ fill: attribute.linearColors[5] }"
  65 + :style="{ fill: attribute.rect17 }"
66 66 transform="translate(0 5) rotate(0 2 2)"
67 67 opacity="1"
68 68 :d="`M2,0 C0.9,0 0,0.9 0,2 C0,3.1 0.9,4 2,4 C3.1,4 4,3.1 4,2 C4,0.9 3.1,0 2,0 Z`"
... ... @@ -70,7 +70,7 @@
70 70 <path
71 71 id="矩形 22"
72 72 fill-rule="evenodd"
73   - :style="{ fill: attribute.linearColors[6] }"
  73 + :style="{ fill: attribute.rect17 }"
74 74 transform="translate(2 7) rotate(0 5.5 3.5)"
75 75 opacity="1"
76 76 :d="`M6,0L0,7L5,7L11,0L6,0Z `"
... ...
... ... @@ -7,7 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '我是标题',
9 9 attribute: {
10   - linearColors: ['#21649C', '#060F1E', '#2AFFFF', '#000000', '#ffcc33', '#ffcc33'],
  10 + bgLeftColor1:'#21649C',
  11 + bgLeftColor2:'#060F1E',
  12 + bgLeftColor3:'#2AFFFF',
  13 + bgLeftColor4:'#000000',
  14 + rect19:'#FFCC33',
11 15 fontSize: 20,
12 16 fontPos: {
13 17 x: 0,
... ...
... ... @@ -20,22 +20,44 @@
20 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 21 </SettingItem>
22 22 </SettingItemBox>
23   - <SettingItemBox
24   - :name="`装饰颜色-${index + 1}`"
25   - v-for="(item, index) in optionData.attribute.linearColors"
26   - :key="index"
27   - >
  23 + <SettingItemBox :name="`左边装饰1`">
28 24 <SettingItem name="颜色">
29   - <n-color-picker
30   - size="small"
31   - :modes="['hex']"
32   - v-model:value="optionData.attribute.linearColors[index]"
33   - ></n-color-picker>
  25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgLeftColor1"></n-color-picker>
34 26 </SettingItem>
35 27 <SettingItem>
36   - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
37   - 恢复默认
38   - </n-button>
  28 + <n-button size="small" @click="optionData.attribute.bgLeftColor1 = '#21649C'"> 恢复默认 </n-button>
  29 + </SettingItem>
  30 + </SettingItemBox>
  31 + <SettingItemBox :name="`右边装饰1`">
  32 + <SettingItem name="颜色">
  33 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgLeftColor2"></n-color-picker>
  34 + </SettingItem>
  35 + <SettingItem>
  36 + <n-button size="small" @click="optionData.attribute.bgLeftColor2 = '#060F1E'"> 恢复默认 </n-button>
  37 + </SettingItem>
  38 + </SettingItemBox>
  39 + <SettingItemBox :name="`右边装饰3`">
  40 + <SettingItem name="颜色">
  41 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgLeftColor3"></n-color-picker>
  42 + </SettingItem>
  43 + <SettingItem>
  44 + <n-button size="small" @click="optionData.attribute.bgLeftColor3 = '#2AFFFF'"> 恢复默认 </n-button>
  45 + </SettingItem>
  46 + </SettingItemBox>
  47 + <SettingItemBox :name="`右边装饰4`">
  48 + <SettingItem name="颜色">
  49 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgLeftColor4"></n-color-picker>
  50 + </SettingItem>
  51 + <SettingItem>
  52 + <n-button size="small" @click="optionData.attribute.bgLeftColor4 = '#000000'"> 恢复默认 </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.rect19"></n-color-picker>
  58 + </SettingItem>
  59 + <SettingItem>
  60 + <n-button size="small" @click="optionData.attribute.rect19 = '#FFCC33'"> 恢复默认 </n-button>
39 61 </SettingItem>
40 62 </SettingItemBox>
41 63 </CollapseItem>
... ...
... ... @@ -3,12 +3,12 @@
3 3 <svg :width="w" :height="h" fill="none">
4 4 <defs xmlns="http://www.w3.org/2000/svg">
5 5 <linearGradient id="title2_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
6   - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
7   - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
  6 + <stop offset="0" :stop-color="attribute.bgLeftColor1" stop-opacity="1" />
  7 + <stop offset="1" :stop-color="attribute.bgLeftColor2" stop-opacity="1" />
8 8 </linearGradient>
9 9 <linearGradient id="title2_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
10   - <stop offset="0" :stop-color="attribute.linearColors[3]" stop-opacity="1" />
11   - <stop offset="1" :stop-color="attribute.linearColors[4]" stop-opacity="0" />
  10 + <stop offset="0" :stop-color="attribute.bgLeftColor3" stop-opacity="1" />
  11 + <stop offset="1" :stop-color="attribute.bgLeftColor4" stop-opacity="0" />
12 12 </linearGradient>
13 13 </defs>
14 14 <g opacity="1" transform="translate(0 0) rotate(0 160 15)">
... ... @@ -47,7 +47,7 @@
47 47 <path
48 48 id="矩形 title2_d"
49 49 fill-rule="evenodd"
50   - :style="{ fill: attribute.linearColors[4] }"
  50 + :style="{ fill: attribute.rect19 }"
51 51 :transform="`translate(9 ${h / 2 - 15 / 2}) rotate(0 3.5 7.5)`"
52 52 opacity="1"
53 53 d="M0,15L2,15L7,0L5,0L0,15Z "
... ... @@ -55,7 +55,7 @@
55 55 <path
56 56 id="矩形 title2_d"
57 57 fill-rule="evenodd"
58   - :style="{ fill: attribute.linearColors[5] }"
  58 + :style="{ fill: attribute.rect19}"
59 59 :transform="`translate(15 ${h / 2 - 15 / 2}) rotate(0 3.5 7.5)`"
60 60 opacity="1"
61 61 d="M0,15L2,15L7,0L5,0L0,15Z "
... ...
... ... @@ -7,20 +7,9 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '我是标题',
9 9 attribute: {
10   - linearColors: [
11   - '#21649C',
12   - '#060F1E',
13   - '#2AFFFF',
14   - '#2AFFFF',
15   - '#2AFFFF',
16   - '#2AFFFF',
17   - '#2affff',
18   - '#16d9d9',
19   - '#2affff',
20   - '#2affff',
21   - '#2affff',
22   - '#2affff'
23   - ],
  10 + bgColor1:'#21649C',
  11 + bgColor2:'#060F1E',
  12 + bgColor3:'#2AFFFF',
24 13 fontSize: 20,
25 14 fontPos: {
26 15 x: 0,
... ...
... ... @@ -20,22 +20,28 @@
20 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 21 </SettingItem>
22 22 </SettingItemBox>
23   - <SettingItemBox
24   - :name="`装饰颜色-${index + 1}`"
25   - v-for="(item, index) in optionData.attribute.linearColors"
26   - :key="index"
27   - >
  23 + <SettingItemBox :name="`左边装饰`">
28 24 <SettingItem name="颜色">
29   - <n-color-picker
30   - size="small"
31   - :modes="['hex']"
32   - v-model:value="optionData.attribute.linearColors[index]"
33   - ></n-color-picker>
  25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
34 26 </SettingItem>
35 27 <SettingItem>
36   - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
37   - 恢复默认
38   - </n-button>
  28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#21649C'"> 恢复默认 </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 = '#060F1E'"> 恢复默认 </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>
39 45 </SettingItem>
40 46 </SettingItemBox>
41 47 </CollapseItem>
... ...
... ... @@ -3,16 +3,16 @@
3 3 <svg :width="w" :height="h" fill="none">
4 4 <defs>
5 5 <linearGradient id="title3_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
6   - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
7   - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
  6 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  7 + <stop offset="1" :stop-color="attribute.bgColor2" stop-opacity="1" />
8 8 </linearGradient>
9 9 <linearGradient id="title3_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
10   - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />
11   - <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
  10 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  11 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
12 12 </linearGradient>
13 13 <linearGradient id="title3_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
14   - <stop offset="0" :stop-color="attribute.linearColors[4]" stop-opacity="1" />
15   - <stop offset="1" :stop-color="attribute.linearColors[5]" stop-opacity="0" />
  14 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  15 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
16 16 </linearGradient>
17 17 </defs>
18 18 <g opacity="1" transform="translate(-6.249999273677531e-8 0.5) rotate(0 160.00000003125 15.000000000000005)">
... ... @@ -54,13 +54,13 @@
54 54 />
55 55 <path
56 56 id="路径 5"
57   - :style="{ stroke: attribute.linearColors[10], strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
  57 + :style="{ stroke: attribute.bgColor3, strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
58 58 transform="translate(0 0.0005) rotate(0 2.000000062499999 0)"
59 59 d="M0,0L4,0 "
60 60 />
61 61 <path
62 62 id="路径 5"
63   - :style="{ stroke: attribute.linearColors[11], strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
  63 + :style="{ stroke: attribute.bgColor3, strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
64 64 :transform="`translate(0 ${h - 1}) rotate(0 2.000000062499999 0)`"
65 65 d="M0,0 L4,0 "
66 66 />
... ... @@ -68,7 +68,7 @@
68 68 <path
69 69 id="三角形 1"
70 70 fill-rule="evenodd"
71   - :style="{ fill: attribute.linearColors[6] }"
  71 + :style="{ fill: attribute.bgColor3 }"
72 72 transform="translate(4 0) rotate(0 6.598076211353316 4.5)"
73 73 opacity="1"
74 74 d="M2.8,9L13.2,9L0,0L2.8,9Z "
... ... @@ -76,7 +76,7 @@
76 76 <path
77 77 id="三角形 1"
78 78 fill-rule="evenodd"
79   - :style="{ fill: attribute.linearColors[7] }"
  79 + :style="{ fill: attribute.bgColor3 }"
80 80 transform="translate(4 9) rotate(0 6.598076211353316 4.5)"
81 81 opacity="1"
82 82 d="M13.2,0L2.8,0L0,9L13.2,0Z "
... ... @@ -84,7 +84,7 @@
84 84 <path
85 85 id="圆形 7"
86 86 fill-rule="evenodd"
87   - :style="{ fill: attribute.linearColors[8] }"
  87 + :style="{ fill: attribute.bgColor3 }"
88 88 transform="translate(0 7) rotate(0 2 2)"
89 89 opacity="1"
90 90 d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z "
... ... @@ -93,7 +93,7 @@
93 93 <path
94 94 id="矩形 17"
95 95 fill-rule="evenodd"
96   - :style="{ fill: attribute.linearColors[9] }"
  96 + :style="{ fill: attribute.bgColor3 }"
97 97 transform="translate(6.249999895402425e-8 2) rotate(0 0.5 13)"
98 98 opacity="1"
99 99 :d="`M0,${h - 5}L1,${h - 5}L1,0L0,0L0,${h - 5}Z`"
... ...
... ... @@ -7,18 +7,7 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '我是标题',
9 9 attribute: {
10   - linearColors: [
11   - '#2AFFFF',
12   - '#2AFFFF',
13   - '#2affff',
14   - '#2affff',
15   - '#2affff',
16   - '#2affff',
17   - '#2affff',
18   - '#2affff',
19   - '#2affff',
20   - '#2affff',
21   - ],
  10 + bgColor1:'#2AFFFF',
22 11 fontSize: 20,
23 12 fontPos: {
24 13 x: 0,
... ...
... ... @@ -20,22 +20,12 @@
20 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 21 </SettingItem>
22 22 </SettingItemBox>
23   - <SettingItemBox
24   - :name="`装饰颜色-${index + 1}`"
25   - v-for="(item, index) in optionData.attribute.linearColors"
26   - :key="index"
27   - >
  23 + <SettingItemBox :name="`装饰`">
28 24 <SettingItem name="颜色">
29   - <n-color-picker
30   - size="small"
31   - :modes="['hex']"
32   - v-model:value="optionData.attribute.linearColors[index]"
33   - ></n-color-picker>
  25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
34 26 </SettingItem>
35 27 <SettingItem>
36   - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
37   - 恢复默认
38   - </n-button>
  28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#2AFFFF'"> 恢复默认 </n-button>
39 29 </SettingItem>
40 30 </SettingItemBox>
41 31 </CollapseItem>
... ...
... ... @@ -9,14 +9,14 @@
9 9 >
10 10 <defs>
11 11 <linearGradient id="subtitle4_linear_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
12   - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="0.5" />
13   - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" />
  12 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="0.5" />
  13 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="0" />
14 14 </linearGradient>
15 15 </defs>
16 16 <g opacity="1" :transform="`translate(0 ${h / 2 - 10}) rotate(0 248 17.5)`">
17 17 <path
18 18 id="路径 13"
19   - :style="{ stroke: attribute.linearColors[2], strokeWidth: 1, strokeOpacity: 1 }"
  19 + :style="{ stroke: attribute.bgColor1, strokeWidth: 1, strokeOpacity: 1 }"
20 20 :transform="`translate(8 12) rotate(0 243.5 8)`"
21 21 :d="`M0,0 L14.01,16 L${w},16`"
22 22 />
... ... @@ -39,27 +39,27 @@
39 39 <path
40 40 id="圆形 15"
41 41 fill-rule="evenodd"
42   - :style="{ fill: attribute.linearColors[3] }"
  42 + :style="{ fill: attribute.bgColor1 }"
43 43 transform="translate(6 10) rotate(0 2.5 2.5)"
44 44 opacity="1"
45 45 d="M2.5,0C1.12,0 0,1.12 0,2.5C0,3.88 1.12,5 2.5,5C3.88,5 5,3.88 5,2.5C5,1.12 3.88,0 2.5,0Z "
46 46 />
47 47 <path
48 48 id="圆形 15"
49   - :style="{ stroke: attribute.linearColors[4], strokeWidth: 0.5, strokeOpacity: 0.5 }"
  49 + :style="{ stroke: attribute.bgColor1, strokeWidth: 0.5, strokeOpacity: 0.5 }"
50 50 transform="translate(3 7) rotate(0 5.5 5.5)"
51 51 d="M5.5,0C2.46,0 0,2.46 0,5.5C0,8.54 2.46,11 5.5,11C8.54,11 11,8.54 11,5.5C11,2.46 8.54,0 5.5,0Z "
52 52 />
53 53 <path
54 54 id="圆形 15"
55   - :style="{ stroke: attribute.linearColors[5], strokeWidth: 0.5, strokeOpacity: 0.19 }"
  55 + :style="{ stroke: attribute.bgColor1, strokeWidth: 0.5, strokeOpacity: 0.19 }"
56 56 transform="translate(0 4) rotate(0 8.5 8.5)"
57 57 d="M8.5,0C3.81,0 0,3.81 0,8.5C0,13.19 3.81,17 8.5,17C13.19,17 17,13.19 17,8.5C17,3.81 13.19,0 8.5,0Z "
58 58 />
59 59 <path
60 60 id="圆形 16"
61 61 fill-rule="evenodd"
62   - :style="{ fill: attribute.linearColors[6] }"
  62 + :style="{ fill: attribute.bgColor1 }"
63 63 transform="translate(2.5 12) rotate(0 1 1)"
64 64 opacity="1"
65 65 d="M1,0C0.45,0 0,0.45 0,1C0,1.55 0.45,2 1,2C1.55,2 2,1.55 2,1C2,0.45 1.55,0 1,0Z "
... ... @@ -67,7 +67,7 @@
67 67 <path
68 68 id="圆形 16"
69 69 fill-rule="evenodd"
70   - :style="{ fill: attribute.linearColors[7] }"
  70 + :style="{ fill: attribute.bgColor1 }"
71 71 transform="translate(12.5 12) rotate(0 1 1)"
72 72 opacity="1"
73 73 d="M1,0C0.45,0 0,0.45 0,1C0,1.55 0.45,2 1,2C1.55,2 2,1.55 2,1C2,0.45 1.55,0 1,0Z "
... ... @@ -75,7 +75,7 @@
75 75 <path
76 76 id="圆形 16"
77 77 fill-rule="evenodd"
78   - :style="{ fill: attribute.linearColors[8] }"
  78 + :style="{ fill: attribute.bgColor1 }"
79 79 transform="translate(8 6.5) rotate(0 1 1)"
80 80 opacity="1"
81 81 d="M1,0C0.45,0 0,0.45 0,1C0,1.55 0.45,2 1,2C1.55,2 2,1.55 2,1C2,0.45 1.55,0 1,0Z "
... ... @@ -83,7 +83,7 @@
83 83 <path
84 84 id="圆形 17"
85 85 fill-rule="evenodd"
86   - :style="{ fill: attribute.linearColors[9] }"
  86 + :style="{ fill: attribute.bgColor1 }"
87 87 :transform="`translate(${w - 5} 26) rotate(0 2 2)`"
88 88 opacity="1"
89 89 d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z "
... ...
... ... @@ -7,25 +7,9 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '我是标题',
9 9 attribute: {
10   - linearColors: [
11   - '#060F1E',
12   - '#032E52',
13   - '#060F1E',
14   - '#2affff',
15   - '#2affff',
16   - '#2affff',
17   - '#2affff',
18   - '#2affff',
19   - '#2affff',
20   - '#2affff',
21   - '#2affff',
22   - '#2affff',
23   - '#2affff',
24   - '#2affff',
25   - '#2affff',
26   - '#2affff',
27   - '#2affff'
28   - ],
  10 + bgColor1:'#060F1E',
  11 + bgColor2:'#032E52',
  12 + bgColor3:'#2affff',
29 13 fontSize: 20,
30 14 fontPos: {
31 15 x: 0,
... ...
... ... @@ -20,22 +20,28 @@
20 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 21 </SettingItem>
22 22 </SettingItemBox>
23   - <SettingItemBox
24   - :name="`装饰颜色-${index + 1}`"
25   - v-for="(item, index) in optionData.attribute.linearColors"
26   - :key="index"
27   - >
  23 + <SettingItemBox :name="`两侧装饰`">
28 24 <SettingItem name="颜色">
29   - <n-color-picker
30   - size="small"
31   - :modes="['hex']"
32   - v-model:value="optionData.attribute.linearColors[index]"
33   - ></n-color-picker>
  25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
34 26 </SettingItem>
35 27 <SettingItem>
36   - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
37   - 恢复默认
38   - </n-button>
  28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#060F1E'"> 恢复默认 </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 = '#032E52'"> 恢复默认 </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>
39 45 </SettingItem>
40 46 </SettingItemBox>
41 47 </CollapseItem>
... ...
... ... @@ -9,27 +9,27 @@
9 9 >
10 10 <defs>
11 11 <linearGradient id="subtitle5_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="0.498" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
14   - <stop offset="1" :stop-color="attribute.linearColors[2]" stop-opacity="1" />
  12 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  13 + <stop offset="0.498" :stop-color="attribute.bgColor2" stop-opacity="1" />
  14 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="1" />
15 15 </linearGradient>
16 16 <linearGradient id="subtitle5_linear_1" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox">
17   - <stop offset="0" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
18   - <stop offset="0.5313" :stop-color="attribute.linearColors[4]" stop-opacity="1" />
19   - <stop offset="0.9988" :stop-color="attribute.linearColors[5]" stop-opacity="0" />
  17 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="0" />
  18 + <stop offset="0.5313" :stop-color="attribute.bgColor3" stop-opacity="1" />
  19 + <stop offset="0.9988" :stop-color="attribute.bgColor3" stop-opacity="0" />
20 20 </linearGradient>
21 21 <linearGradient id="subtitle5_linear_2" x1="0%" y1="0%" x2="1%" y2="100%" gradientUnits="objectBoundingBox">
22   - <stop offset="0" :stop-color="attribute.linearColors[6]" stop-opacity="0" />
23   - <stop offset="0.5313" :stop-color="attribute.linearColors[7]" stop-opacity="1" />
24   - <stop offset="0.9988" :stop-color="attribute.linearColors[8]" stop-opacity="0" />
  22 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="0" />
  23 + <stop offset="0.5313" :stop-color="attribute.bgColor3" stop-opacity="1" />
  24 + <stop offset="0.9988" :stop-color="attribute.bgColor3" stop-opacity="0" />
25 25 </linearGradient>
26 26 <linearGradient id="subtitle5_linear_3" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
27   - <stop offset="0" :stop-color="attribute.linearColors[9]" stop-opacity="1" />
28   - <stop offset="1" :stop-color="attribute.linearColors[10]" stop-opacity="0" />
  27 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  28 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
29 29 </linearGradient>
30 30 <linearGradient id="subtitle5_linear_4" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
31   - <stop offset="0" :stop-color="attribute.linearColors[11]" stop-opacity="1" />
32   - <stop offset="1" :stop-color="attribute.linearColors[12]" stop-opacity="0" />
  31 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  32 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="0" />
33 33 </linearGradient>
34 34 </defs>
35 35 <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
... ... @@ -89,14 +89,14 @@
89 89 />
90 90 <path
91 91 id="多边形 1"
92   - :style="{stroke: attribute.linearColors[13], strokeWidth: 1,strokeOpacity: 1}"
  92 + :style="{stroke: attribute.bgColor3, strokeWidth: 1,strokeOpacity: 1}"
93 93 transform="translate(2.348076211353317 2.3480762113533187) rotate(30 6.415063509461105 6.4150635094611035)"
94 94 d="M6.42,0L0.86,3.21L0.86,9.62L6.42,12.83L11.97,9.62L11.97,3.21L6.42,0Z "
95 95 />
96 96 <path
97 97 id="圆形 8"
98 98 fill-rule="evenodd"
99   - :style="{ fill: attribute.linearColors[14] }"
  99 + :style="{ fill: attribute.bgColor3 }"
100 100 transform="translate(6.763139720814309 6.763139720814425) rotate(0 2 2)"
101 101 opacity="1"
102 102 d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z "
... ... @@ -118,14 +118,14 @@
118 118 />
119 119 <path
120 120 id="多边形 1"
121   - :style="{stroke: attribute.linearColors[15], strokeWidth: 1, strokeOpacity: 1}"
  121 + :style="{stroke: attribute.bgColor3, strokeWidth: 1, strokeOpacity: 1}"
122 122 transform="translate(28.07836663013154 2.3480762113533187) rotate(-30 6.415063509461105 6.4150635094611035)"
123 123 d="M0.86,9.62L6.42,12.83L11.97,9.62L11.97,3.21L6.42,0L0.86,3.21L0.86,9.62Z "
124 124 />
125 125 <path
126 126 id="圆形 8"
127 127 fill-rule="evenodd"
128   - :style="{ fill: attribute.linearColors[16] }"
  128 + :style="{ fill: attribute.bgColor3 }"
129 129 transform="translate(32.49343013959276 6.763139720814425) rotate(0 2 2)"
130 130 opacity="1"
131 131 d="M2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4Z "
... ...
... ... @@ -7,33 +7,14 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '我是标题',
9 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 18 fontSize: 20,
38 19 fontPos: {
39 20 x: 0,
... ...
... ... @@ -20,22 +20,68 @@
20 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 21 </SettingItem>
22 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 85 </SettingItem>
40 86 </SettingItemBox>
41 87 </CollapseItem>
... ...
... ... @@ -9,16 +9,16 @@
9 9 >
10 10 <defs>
11 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 14 </linearGradient>
15 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 18 </linearGradient>
19 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 22 </linearGradient>
23 23 </defs>
24 24 <g opacity="1" transform="translate(0 0) rotate(0 246 15)">
... ... @@ -66,46 +66,46 @@
66 66 <path
67 67 id="圆形 18"
68 68 fill-rule="evenodd"
69   - :style="{ fill: attribute.linearColors[6] }"
  69 + :style="{ fill: attribute.bgColor4 }"
70 70 transform="translate(6 6) rotate(0 3 3)"
71 71 opacity="1"
72 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 74 <path
75 75 id="圆形 18"
76   - :style="{ stroke: attribute.linearColors[7], strokeWidth: 1, strokeOpacity: 1 }"
  76 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 1 }"
77 77 transform="translate(3 3) rotate(0 6 6)"
78 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 80 <path
81 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 83 transform="translate(0 0) rotate(0 9 9)"
84 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 86 <path
87 87 id="圆形 18"
88   - :style="{ stroke: attribute.linearColors[9], strokeWidth: 1, strokeOpacity: 1 }"
  88 + :style="{ stroke: attribute.bgColor6, strokeWidth: 1, strokeOpacity: 1 }"
89 89 transform="translate(0 0) rotate(0 4.5 4.5)"
90 90 d="M9,0C4.03,0 0,4.03 0,9 "
91 91 />
92 92 <path
93 93 id="圆形 18"
94   - :style="{ stroke: attribute.linearColors[10], strokeWidth: 1, strokeOpacity: 1 }"
  94 + :style="{ stroke: attribute.bgColor6, strokeWidth: 1, strokeOpacity: 1 }"
95 95 transform="translate(9 9) rotate(180 4.5 4.5)"
96 96 d="M9,0C4.03,0 0,4.03 0,9 "
97 97 />
98 98 </g>
99 99 <path
100 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 102 :transform="`translate(28 ${h / 2 - 8 / 2 + 8}) rotate(0 230.25 4)`"
103 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 105 <path
106 106 id="并集"
107 107 fill-rule="evenodd"
108   - :style="{ fill: attribute.linearColors[12] }"
  108 + :style="{ fill: attribute.bgColor7 }"
109 109 :transform="`translate(375 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
110 110 opacity="0.5"
111 111 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
... ... @@ -113,7 +113,7 @@
113 113 <path
114 114 id="并集"
115 115 fill-rule="evenodd"
116   - :style="{ fill: attribute.linearColors[13] }"
  116 + :style="{ fill: attribute.bgColor7 }"
117 117 :transform="`translate(380 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
118 118 opacity="0.5"
119 119 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
... ... @@ -121,7 +121,7 @@
121 121 <path
122 122 id="并集"
123 123 fill-rule="evenodd"
124   - :style="{ fill: attribute.linearColors[14] }"
  124 + :style="{ fill: attribute.bgColor7 }"
125 125 :transform="`translate(385 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
126 126 opacity="0.5"
127 127 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
... ... @@ -129,7 +129,7 @@
129 129 <path
130 130 id="并集"
131 131 fill-rule="evenodd"
132   - :style="{ fill: attribute.linearColors[15] }"
  132 + :style="{ fill: attribute.bgColor7 }"
133 133 :transform="`translate(390 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
134 134 opacity="0.5"
135 135 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
... ... @@ -137,7 +137,7 @@
137 137 <path
138 138 id="并集"
139 139 fill-rule="evenodd"
140   - :style="{ fill: attribute.linearColors[16] }"
  140 + :style="{ fill: attribute.bgColor7 }"
141 141 :transform="`translate(395 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
142 142 opacity="0.5"
143 143 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
... ... @@ -145,7 +145,7 @@
145 145 <path
146 146 id="并集"
147 147 fill-rule="evenodd"
148   - :style="{ fill: attribute.linearColors[17] }"
  148 + :style="{ fill: attribute.bgColor7}"
149 149 :transform="`translate(400 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
150 150 opacity="0.5"
151 151 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
... ... @@ -153,7 +153,7 @@
153 153 <path
154 154 id="并集"
155 155 fill-rule="evenodd"
156   - :style="{ fill: attribute.linearColors[18] }"
  156 + :style="{ fill: attribute.bgColor7 }"
157 157 :transform="`translate(405 ${h / 2 - 3 / 2 + 10}) rotate(0 1.5 1.5)`"
158 158 opacity="0.5"
159 159 d="M1 1L1 0L2 0L2 1L3 1L3 2L2 2L2 3L1 3L1 2L0 2L0 1L1 1Z "
... ... @@ -161,7 +161,7 @@
161 161 <path
162 162 id="矩形 47"
163 163 fill-rule="evenodd"
164   - :style="{ fill: attribute.linearColors[19] }"
  164 + :style="{ fill: attribute.bgColor7 }"
165 165 :transform="`translate(346 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
166 166 opacity="1"
167 167 d="M0,7L2,7L11,0L9,0L0,7Z "
... ... @@ -169,7 +169,7 @@
169 169 <path
170 170 id="矩形 47"
171 171 fill-rule="evenodd"
172   - :style="{ fill: attribute.linearColors[20] }"
  172 + :style="{ fill: attribute.bgColor7 }"
173 173 :transform="`translate(342 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
174 174 opacity="0.8"
175 175 d="M0,7L2,7L11,0L9,0L0,7Z "
... ... @@ -177,7 +177,7 @@
177 177 <path
178 178 id="矩形 47"
179 179 fill-rule="evenodd"
180   - :style="{ fill: attribute.linearColors[21] }"
  180 + :style="{ fill: attribute.bgColor7 }"
181 181 :transform="`translate(338 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
182 182 opacity="0.6"
183 183 d="M0,7L2,7L11,0L9,0L0,7Z "
... ... @@ -185,14 +185,14 @@
185 185 <path
186 186 id="矩形 47"
187 187 fill-rule="evenodd"
188   - :style="{ fill: attribute.linearColors[22] }"
  188 + :style="{ fill: attribute.bgColor7 }"
189 189 :transform="`translate(334 ${h / 2 - 7 / 2 + 7.5}) rotate(0 5.5 3.5)`"
190 190 opacity="0.4"
191 191 d="M0,7L2,7L11,0L9,0L0,7Z "
192 192 />
193 193 <path
194 194 id="路径 15"
195   - :style="{ stroke: attribute.linearColors[23], strokeWidth: 1, strokeOpacity: 1 }"
  195 + :style="{ stroke: attribute.bgColor8, strokeWidth: 1, strokeOpacity: 1 }"
196 196 :transform="`translate(426 ${h / 2 - 4 / 2 + 3.5}) rotate(0 30.999999999999993 2)`"
197 197 d="M0,4L25,4L33.5,0L62,0 "
198 198 />
... ...
... ... @@ -7,21 +7,12 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '我是标题',
9 9 attribute: {
10   - linearColors: [
11   - '#21649C',
12   - '#060F1E',
13   - '#2284D5',
14   - '#000F1B',
15   - '#2affff',
16   - '#2affff',
17   - '#2affff',
18   - '#2affff',
19   - '#2affff',
20   - '#2affff',
21   - '#ffcc33',
22   - '#ffcc33',
23   - '#ffcc33',
24   - ],
  10 + bgColor1:'#21649C',
  11 + bgColor2:'#060F1E',
  12 + bgColor3:'#2284D5',
  13 + bgColor4:'#000F1B',
  14 + bgColor5:'#2affff',
  15 + bgColor6:'#ffcc33',
25 16 fontSize: 20,
26 17 fontPos: {
27 18 x: 0,
... ...
... ... @@ -20,22 +20,52 @@
20 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 21 </SettingItem>
22 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>
  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 = '#21649C'"> 恢复默认 </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 = '#060F1E'"> 恢复默认 </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 = '#2284D5'"> 恢复默认 </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 = '#000F1B'"> 恢复默认 </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 = '#2affff'"> 恢复默认 </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>
34 66 </SettingItem>
35 67 <SettingItem>
36   - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
37   - 恢复默认
38   - </n-button>
  68 + <n-button size="small" @click="optionData.attribute.bgColor6 = '#ffcc33'"> 恢复默认 </n-button>
39 69 </SettingItem>
40 70 </SettingItemBox>
41 71 </CollapseItem>
... ...
... ... @@ -16,12 +16,12 @@
16 16 y2="50%"
17 17 gradientUnits="objectBoundingBox"
18 18 >
19   - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
20   - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
  19 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="1" />
  20 + <stop offset="1" :stop-color="attribute.bgColor2" stop-opacity="1" />
21 21 </linearGradient>
22 22 <linearGradient id="subtitle7_linear_1" x1="0%" y1="50%" x2="87.75%" y2="50%" gradientUnits="objectBoundingBox">
23   - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />
24   - <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="1" />
  23 + <stop offset="0" :stop-color="attribute.bgColor3" stop-opacity="1" />
  24 + <stop offset="1" :stop-color="attribute.bgColor3" stop-opacity="1" />
25 25 </linearGradient>
26 26 </defs>
27 27 <g opacity="1" transform="translate(0 0) rotate(0 246 15.000499999999972)">
... ... @@ -62,7 +62,7 @@
62 62 <g opacity="1" :transform="`translate(7 ${h / 2 - 17 / 2 - 4}) rotate(0 9 9)`">
63 63 <rect
64 64 id="矩形 13"
65   - :style="{ stroke: attribute.linearColors[4], strokeWidth: 1, strokeOpacity: 1 }"
  65 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 1 }"
66 66 transform="translate(0 0) rotate(0 9 9)"
67 67 x="0.5"
68 68 y="0.5"
... ... @@ -72,20 +72,20 @@
72 72 />
73 73 <path
74 74 id="直线 1"
75   - :style="{ stroke: attribute.linearColors[5], strokeWidth: 1, strokeOpacity: 0.43 }"
  75 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 0.43 }"
76 76 transform="translate(1 1) rotate(0 8 8)"
77 77 d="M0,0L16,16 "
78 78 />
79 79 <path
80 80 id="直线 1"
81   - :style="{ stroke: attribute.linearColors[6], strokeWidth: 1, strokeOpacity: 0.43 }"
  81 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 0.43 }"
82 82 transform="translate(1 1) rotate(0 8 8)"
83 83 d="M16,0L0,16 "
84 84 />
85 85 <path
86 86 id="矩形 14"
87 87 fill-rule="evenodd"
88   - :style="{ fill: attribute.linearColors[7] }"
  88 + :style="{ fill: attribute.bgColor4 }"
89 89 transform="translate(5 5) rotate(0 4 4)"
90 90 opacity="1"
91 91 d="M0,8L8,8L8,0L0,0L0,8Z "
... ... @@ -93,20 +93,20 @@
93 93 </g>
94 94 <path
95 95 id="路径 4"
96   - :style="{ stroke: attribute.linearColors[8], strokeWidth: 1, strokeOpacity: 0.2 }"
  96 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 0.2 }"
97 97 :transform="`translate(0 ${h - 10}) rotate(0 221.50000000000003 3.5)`"
98 98 d="M0,7L435.04,7L443,0 "
99 99 />
100 100 <path
101 101 id="路径 4"
102   - :style="{ stroke: attribute.linearColors[9], strokeWidth: 1, strokeOpacity: 1 }"
  102 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 1 }"
103 103 :transform="`translate(0 ${h - 3}) rotate(0 17.5208019893046 0.0005)`"
104 104 d="M0,0L35.04,0 "
105 105 />
106 106 <path
107 107 id="矩形 15"
108 108 fill-rule="evenodd"
109   - :style="{ fill: attribute.linearColors[10] }"
  109 + :style="{ fill: attribute.bgColor6 }"
110 110 :transform="`translate(441 ${h - 10}) rotate(0 9.5 3.5)`"
111 111 opacity="0.2"
112 112 d="M0,7L12.09,7L19,0L6.91,0L0,7Z "
... ... @@ -114,7 +114,7 @@
114 114 <path
115 115 id="矩形 15"
116 116 fill-rule="evenodd"
117   - :style="{ fill: attribute.linearColors[11] }"
  117 + :style="{ fill: attribute.bgColor6 }"
118 118 :transform="`translate(457 ${h - 10}) rotate(0 9.5 3.5)`"
119 119 opacity="0.6"
120 120 d="M0,7L12.09,7L19,0L6.91,0L0,7Z "
... ... @@ -122,7 +122,7 @@
122 122 <path
123 123 id="矩形 15"
124 124 fill-rule="evenodd"
125   - :style="{ fill: attribute.linearColors[12] }"
  125 + :style="{ fill: attribute.bgColor6 }"
126 126 :transform="`translate(473 ${h - 10}) rotate(0 9.5 3.5)`"
127 127 opacity="1"
128 128 d="M0,7L12.09,7L19,0L6.91,0L0,7Z "
... ...
... ... @@ -7,16 +7,11 @@ import { chartInitConfig } from '@/settings/designSetting'
7 7 export const option = {
8 8 dataset: '我是标题',
9 9 attribute: {
10   - linearColors: [
11   - '#2AFFFF',
12   - '#2AFFFF',
13   - '#2AFFFF',
14   - '#2AFFFF',
15   - '#0084ff',
16   - '#0d4ea8',
17   - '#4592ff',
18   - '#ffcc33',
19   - ],
  10 + bgColor1:'#2AFFFF',
  11 + bgColor2:'#0084ff',
  12 + bgColor3:'#0d4ea8',
  13 + bgColor4:'#4592ff',
  14 + bgColor5:'#ffcc33',
20 15 fontSize: 20,
21 16 fontPos: {
22 17 x: 0,
... ...
... ... @@ -20,22 +20,44 @@
20 20 <n-button size="small" @click="optionData.attribute.fontColor = '#2AFFFF'"> 恢复默认 </n-button>
21 21 </SettingItem>
22 22 </SettingItemBox>
23   - <SettingItemBox
24   - :name="`装饰颜色-${index + 1}`"
25   - v-for="(item, index) in optionData.attribute.linearColors"
26   - :key="index"
27   - >
  23 + <SettingItemBox :name="`上下边线装饰`">
28 24 <SettingItem name="颜色">
29   - <n-color-picker
30   - size="small"
31   - :modes="['hex']"
32   - v-model:value="optionData.attribute.linearColors[index]"
33   - ></n-color-picker>
  25 + <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.bgColor1"></n-color-picker>
34 26 </SettingItem>
35 27 <SettingItem>
36   - <n-button size="small" @click="optionData.attribute.linearColors[index] = option.attribute.linearColors[index]">
37   - 恢复默认
38   - </n-button>
  28 + <n-button size="small" @click="optionData.attribute.bgColor1 = '#2affff'"> 恢复默认 </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 = '#0084ff'"> 恢复默认 </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 = '#0d4ea8'"> 恢复默认 </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 = '#4592ff'"> 恢复默认 </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 = '#ffcc33'"> 恢复默认 </n-button>
39 61 </SettingItem>
40 62 </SettingItemBox>
41 63 </CollapseItem>
... ...
... ... @@ -9,12 +9,12 @@
9 9 >
10 10 <defs>
11 11 <linearGradient id="subtitle8_linear_0" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
12   - <stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="0.5" />
13   - <stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="0" />
  12 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="0.5" />
  13 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="0" />
14 14 </linearGradient>
15 15 <linearGradient id="subtitle8_linear_1" x1="100%" y1="50%" x2="0%" y2="50%" gradientUnits="objectBoundingBox">
16   - <stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="0.5" />
17   - <stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
  16 + <stop offset="0" :stop-color="attribute.bgColor1" stop-opacity="0.5" />
  17 + <stop offset="1" :stop-color="attribute.bgColor1" stop-opacity="0" />
18 18 </linearGradient>
19 19 <filter
20 20 id="subtitle8_filter_14"
... ... @@ -55,7 +55,7 @@
55 55 <path
56 56 id="矩形 31"
57 57 fill-rule="evenodd"
58   - :style="{ fill: attribute.linearColors[4] }"
  58 + :style="{ fill: attribute.bgColor2 }"
59 59 transform="translate(17 1.9999999999999183) rotate(0 237.5 15)"
60 60 opacity="0.2"
61 61 :d="`M0,${h}L${w - 10},${h}L${w - 10},0L0,0L0,${h}Z `"
... ... @@ -79,7 +79,7 @@
79 79 <path
80 80 id="矩形 32"
81 81 fill-rule="evenodd"
82   - :style="{ fill: attribute.linearColors[5] }"
  82 + :style="{ fill: attribute.bgColor3 }"
83 83 :transform="`translate(4.979184719828627 ${
84 84 h / 2 - 34 / 2 + 6
85 85 }) rotate(-45 12.020815280171146 12.020815280171146)`"
... ... @@ -88,7 +88,7 @@
88 88 />
89 89 <rect
90 90 id="矩形 32"
91   - :style="{ stroke: attribute.linearColors[6], strokeWidth: 1, strokeOpacity: 1 }"
  91 + :style="{ stroke: attribute.bgColor4, strokeWidth: 1, strokeOpacity: 1 }"
92 92 :transform="`translate(4.979184719828627 ${
93 93 h / 2 - 34 / 2 + 6
94 94 }) rotate(-45 12.020815280171146 12.020815280171146)`"
... ... @@ -101,7 +101,7 @@
101 101 <path
102 102 id="圆形 10"
103 103 fill-rule="evenodd"
104   - :style="{ fill: attribute.linearColors[7] }"
  104 + :style="{ fill: attribute.bgColor5 }"
105 105 :transform="`translate(11.999999999999805 ${h / 2 - 34 / 2 + 12}) rotate(0 5 5)`"
106 106 opacity="1"
107 107 d="M5,0C2.24,0 0,2.24 0,5C0,7.76 2.24,10 5,10C7.76,10 10,7.76 10,5C10,2.24 7.76,0 5,0Z "
... ...
1   -import { PublicConfigClass } from '@/packages/public'
2   -import { CreateComponentType } from '@/packages/index.d'
3   -import { chartInitConfig } from '@/settings/designSetting'
4   -import { OverrideILoadConfigurationframeConfig } from './index'
  1 +import {PublicConfigClass} from '@/packages/public'
  2 +import {CreateComponentType} from '@/packages/index.d'
  3 +import {chartInitConfig} from '@/settings/designSetting'
  4 +import {OverrideILoadConfigurationframeConfig} from './index'
5 5 import cloneDeep from 'lodash/cloneDeep'
6 6
  7 +export const enum shareEnum {
  8 + PRIVATE_VIEW = "PRIVATE_VIEW",
  9 +}
  10 +
7 11 export const option = {
8   - // 网站路径
9   - dataset: '',
10   - // 圆角
11   - borderRadius: 10,
12   - pages: {
13   - page: 1,
14   - pageSize: 10
15   - },
16   - color: 'black'
  12 + // 网站路径
  13 + dataset: '',
  14 + // 圆角
  15 + borderRadius: 10,
  16 + pages: {
  17 + page: 1,
  18 + pageSize: 10
  19 + },
  20 + color: 'black',
  21 + isShare: false,
17 22 }
18 23
19 24 export default class Config extends PublicConfigClass implements CreateComponentType {
20   - public key = OverrideILoadConfigurationframeConfig.key
21   - public attr = { ...chartInitConfig, w: 1200, h: 800, zIndex: -1 }
22   - public chartConfig = cloneDeep(OverrideILoadConfigurationframeConfig)
23   - public option = cloneDeep(option)
  25 + public key = OverrideILoadConfigurationframeConfig.key
  26 + public attr = {...chartInitConfig, w: 1200, h: 800, zIndex: -1}
  27 + public chartConfig = cloneDeep(OverrideILoadConfigurationframeConfig)
  28 + public option = cloneDeep(option)
24 29 }
... ...
... ... @@ -2,16 +2,22 @@
2 2 <collapse-item name="属性" :expanded="true">
3 3 <setting-item-box name="路径" :alone="true">
4 4 <setting-item name="请选择要加载的组态">
5   - <n-select filterable size="small" v-model:value="optionData.dataset" :options="configurationOptions" />
  5 + <n-select label-in-value @change="handleUpdateValue" filterable size="small" v-model:value="optionData.dataset"
  6 + :options="configurationOptions"/>
  7 + </setting-item>
  8 + </setting-item-box>
  9 + <setting-item-box name="是否公开" :alone="true">
  10 + <setting-item name="">
  11 + <n-switch @change="handleChange" v-model:value="optionData.isShare" size="small"/>
6 12 </setting-item>
7 13 </setting-item-box>
8 14 <setting-item-box name="样式">
9 15 <setting-item name="圆角">
10 16 <n-input-number
11   - v-model:value="optionData.borderRadius"
12   - size="small"
13   - :min="0"
14   - placeholder="圆角"
  17 + v-model:value="optionData.borderRadius"
  18 + size="small"
  19 + :min="0"
  20 + placeholder="圆角"
15 21 ></n-input-number>
16 22 </setting-item>
17 23 </setting-item-box>
... ... @@ -21,11 +27,11 @@
21 27 </setting-item>
22 28 <setting-item name="页数">
23 29 <n-input-number
24   - disabled
25   - v-model:value="optionData.pages.pageSize"
26   - size="small"
27   - :min="10"
28   - placeholder="页数"
  30 + disabled
  31 + v-model:value="optionData.pages.pageSize"
  32 + size="small"
  33 + :min="10"
  34 + placeholder="页数"
29 35 ></n-input-number>
30 36 </setting-item>
31 37 </setting-item-box>
... ... @@ -34,17 +40,18 @@
34 40 <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
35 41 </SettingItem>
36 42 <SettingItem>
37   - <n-button size="small" @click="optionData.color = 'black'"> 恢复默认 </n-button>
  43 + <n-button size="small" @click="optionData.color = 'black'"> 恢复默认</n-button>
38 44 </SettingItem>
39 45 </setting-item-box>
40 46 </collapse-item>
41 47 </template>
42 48
43 49 <script setup lang="ts">
44   -import { PropType, onMounted, ref, watch } from 'vue'
45   -import { option } from './config'
46   -import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
47   -import { getConfigurationList } from '@/api/external/common/index'
  50 +import {PropType, onMounted, ref, watch} from 'vue'
  51 +import {option, shareEnum} from './config'
  52 +import {CollapseItem, SettingItemBox, SettingItem} from '@/components/Pages/ChartItemSetting'
  53 +import {getConfigurationList, setConfigurationIsShare} from '@/api/external/common/index'
  54 +import {SelectOption} from 'naive-ui'
48 55
49 56 const props = defineProps({
50 57 optionData: {
... ... @@ -55,25 +62,51 @@ const props = defineProps({
55 62
56 63 const configurationOptions = ref([])
57 64
  65 +const configurationId = ref('')
  66 +
58 67 const getConfigurationOptions = async (params: object) => {
59   - const { items } = await getConfigurationList(params)
  68 + const {items} = await getConfigurationList(params)
60 69 if (items) {
61   - configurationOptions.value = items.map((item: Record<string, string>) => ({ label: item.name, value: item.id }))
  70 + configurationOptions.value = items.map((item: SelectOption) => ({
  71 + label: item.name,
  72 + value: item.id,
  73 + viewType: item.viewType
  74 + }))
62 75 }
63 76 }
64 77
65 78 watch(
66   - () => props.optionData.pages,
67   - (newData: any) => {
68   - getConfigurationOptions({ page: newData.page, pageSize: newData.pageSize })
69   - },
70   - {
71   - deep: true,
72   - immediate: true
73   - }
  79 + () => props.optionData.pages,
  80 + (newData: any) => {
  81 + getConfigurationOptions({page: newData.page, pageSize: newData.pageSize})
  82 + },
  83 + {
  84 + deep: true,
  85 + immediate: true
  86 + }
74 87 )
75 88
76 89 onMounted(() => {
77   - getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize })
  90 + getConfigurationOptions({page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize})
78 91 })
  92 +
  93 +const handleUpdateValue = (value: string, options: SelectOption) => {
  94 + const {viewType} = options
  95 + configurationId.value = value
  96 + if (viewType === shareEnum.PRIVATE_VIEW) {
  97 + props.optionData.isShare = false
  98 + } else {
  99 + props.optionData.isShare = true
  100 + }
  101 +}
  102 +
  103 +const handleChange = async (value: boolean) => {
  104 + const res = await setConfigurationIsShare(!configurationId.value ? props.optionData.dataset : configurationId.value, value, {
  105 + isShare: value
  106 + })
  107 + if (res) {
  108 + window.$message.success('操作成功！')
  109 + await getConfigurationOptions({page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize})
  110 + }
  111 +}
79 112 </script>
... ...
1 1 import { defineStore } from "pinia";
2 2 import { KeyBoundComponentList, SocketComponentRecord, SocketReceiveMessageType, SocketSendMessageItemType, SocketSendMessageType, SocketStoreType, UnsubscribePoolType } from '@/store/external/modules/socketStore.d'
3   -import { CreateComponentType } from "@/packages/index.d";
  3 +import { CreateComponentGroupType, CreateComponentType } from "@/packages/index.d";
4 4 import { RequestContentTypeEnum } from "@/enums/external/httpEnum";
5 5 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
6 6 import { pinia } from '@/store'
... ... @@ -241,17 +241,41 @@ export const useSocketStore = defineStore({
241 241 * @param value
242 242 */
243 243 updateComponentById(id: string, value: SocketReceiveMessageType) {
244   - const targetComponent = this.getSocketComponentsRecord.find(item => item.componentId === id)
245   - const targetComponentIndex = chartEditStore.fetchTargetIndex(targetComponent?.componentId)
246   - const target = chartEditStore.componentList[targetComponentIndex] as CreateComponentType
247   - const _target = cloneDeep(target)
248   - const { filter } = _target
249   - const _value = this.getComponentValueByKeys(target, value)
250   - const { value: filterValue, reason, flag } = useFilterFn(filter, _value)
251   - _target.option.dataset = flag ? filterValue : reason
252   - // TODO 存在重复更新未变化的值
253   - // console.log({ _target })
254   - chartEditStore.updateComponentList(targetComponentIndex, _target)
  244 + /**
  245 + * 原来的代码
  246 + // const targetComponent = this.getSocketComponentsRecord.find(item => item.componentId === id)
  247 + // const targetComponentIndex = chartEditStore.fetchTargetIndex(targetComponent?.componentId)
  248 + // const target = chartEditStore.componentList[targetComponentIndex] as CreateComponentType
  249 + // const _target = cloneDeep(target)
  250 + // const { filter } = _target
  251 + // const _value = this.getComponentValueByKeys(target, value)
  252 + // const { value: filterValue, reason, flag } = useFilterFn(filter, _value)
  253 + // _target.option.dataset = flag ? filterValue : reason
  254 + // // TODO 存在重复更新未变化的值
  255 + // // console.log({ _target })
  256 + // chartEditStore.updateComponentList(targetComponentIndex, _target)
  257 + */
  258 +
  259 + /**
  260 + * 修改后的代码
  261 + * 修改ws绑定单个文本组件，然后有多个，并且进行分组，显示的信息为原始信息，而非过滤函数返回的信息
  262 + */
  263 + const target = chartEditStore.getComponentList?.reduce((prev: Array<CreateComponentType | CreateComponentGroupType>, acc) => {
  264 + acc?.isGroup ? (prev = [...(acc?.groupList as CreateComponentGroupType[])]) : prev?.push(acc)
  265 + return prev
  266 + }, [])
  267 + ?.filter(
  268 + item => (item?.request?.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET
  269 + )
  270 + target.forEach(item => {
  271 + if (item.id === id) {
  272 + const _value = this.getComponentValueByKeys(item, value)
  273 + const { filter } = item
  274 + const { value: filterValue, reason, flag } = useFilterFn(filter, _value)
  275 + item.option.dataset = flag ? filterValue : reason
  276 + }
  277 + })
  278 + //
255 279 },
256 280
257 281 /**
... ...
... ... @@ -31,6 +31,7 @@ import {
31 31
32 32 // THINGS_KIT 引入store解决报错 Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
33 33 import { pinia } from '@/store'
  34 +import {useChartDataSocket} from "@/hooks/external/useChartDataSocket";
34 35 const chartHistoryStore = useChartHistoryStore(pinia)
35 36 const settingStore = useSettingStore(pinia)
36 37
... ... @@ -316,6 +317,14 @@ export const useChartEditStore = defineStore({
316 317 const index = this.fetchTargetIndex(ids)
317 318 if (index !== -1) {
318 319 history.push(this.getComponentList[index])
  320 + /**
  321 + * THINGS_KIT 这里升级版本有冲突
  322 + * 修改ws绑定组件，然后删除这个组件，ws还在继续发送消息问题
  323 + * 修改代码在//之间，其余源码未做修改
  324 + */
  325 + const {disconnectWs}=useChartDataSocket()
  326 + disconnectWs(this.getComponentList[index])
  327 + //
319 328 this.componentList.splice(index, 1)
320 329 }
321 330 })
... ... @@ -512,7 +521,7 @@ export const useChartEditStore = defineStore({
512 521 item.id = getUUID()
513 522 })
514 523 }
515   -
  524 +
516 525 return e
517 526 }
518 527 const isCut = recordCharts.type === HistoryActionTypeEnum.CUT
... ...