@@ -11,8 +11,8 @@ import { ComputedRef } from "vue";
1111import HistoryList from " @/components/HistoryList.vue" ;
1212import { champDict } from " @@/const/lolDataConfig" ;
1313
14- const props = defineProps <{ teams: TeamMemberInfo [] }>();
15- const { teams } = toRefs (props );
14+ const props = defineProps <{ teams: TeamMemberInfo []; teamUpInfo : Array < Array < string >> }>();
15+ const { teams, teamUpInfo } = toRefs (props );
1616
1717use ([TooltipComponent , GridComponent , BarChart , CanvasRenderer ]);
1818
@@ -26,6 +26,8 @@ const teamMap = computed(() => {
2626 );
2727});
2828
29+ const colorGroup = [" rgba(252,132,80,0.66)" , " rgba(123,239,255,0.81)" , " rgba(255,255,255,0.8)" ];
30+
2931const championImageUrlMap = computed (() => {
3032 return teams .value .reduce (
3133 (p , c ) => {
@@ -78,19 +80,41 @@ const option = computed(() => {
7880 }) || [],
7981 axisLabel: {
8082 interval: 0 ,
81- color: " rgba(255,255,255,0.8)" ,
83+ color : function (value , index ) {
84+ const cIndex = teamUpInfo .value .findIndex ((group ) =>
85+ group .find ((puuid ) => puuid === teams .value [index ! ]?.puuid )
86+ );
87+ if (cIndex !== - 1 ) {
88+ return colorGroup [cIndex ];
89+ } else {
90+ return colorGroup [2 ];
91+ }
92+ },
8293 formatter : function (value , index ) {
83- if (teams .value [index ].championId ) {
84- return ` {${teams .value [index ].championId ! }|}\n {value|${value }} ` ;
94+ const member = teams .value [index ];
95+ let str;
96+ if (member .championId ) {
97+ str = ` {${member .championId ! }|}\n {value|${value }} ` ;
8598 } else {
86- return ` {value|${value }} ` ;
99+ str = ` {value|${value }} ` ;
100+ }
101+ if (member .summonerInfo .privacy === " PRIVATE" ) {
102+ str += ` \n {private|生涯隐藏}}` ;
87103 }
104+ return str ;
88105 },
89106 rich: {
90107 ... championImageUrlMap .value ,
91108 value: {
92109 lineHeight: 30 ,
93110 align: " center"
111+ },
112+ private: {
113+ lineHeight: 30 ,
114+ align: " center" ,
115+ borderWidth: 2 ,
116+ borderColor: " rgba(245,112,45,0.73)" ,
117+ borderRadius: 2
94118 }
95119 }
96120 },
@@ -144,28 +168,38 @@ function handleClick(event: any) {
144168 </script >
145169
146170<template >
147- <v-chart class =" w-full h-full" :option =" option" @click =" handleClick" />
148- <n-modal
149- v-model:show =" showDetail"
150- preset =" card"
151- class =" team-member-history-modal"
152- :title =" showSummonerName"
153- style ="
154- margin-top : 10px ;
155- width : 95% ;
156- height : 85vh ;
157- display : flex ;
158- flex-flow : column ;
159- background : rgb (22 27 43 / 95% );
160- backdrop-filter : blur (4px );
161- border : 1px solid rgb (122 122 122 / 58% );
162- border-radius : 8px ;
163- overflow : hidden ;
164- " >
165- <div class =" flex flex-1 flex-col h-0" style =" font-size : 12px " >
166- <HistoryList :match-history-list =" historyListData" ></HistoryList >
171+ <div class =" flex flex-1 flex-col w-full h-full" >
172+ <div class =" flex flex-row items-center gap-5 justify-center" v-if =" teamUpInfo.length > 0" >
173+ <template v-for =" (color , i ) in colorGroup " :key =" i " >
174+ <div v-if =" i + 1 <= teamUpInfo.length" class =" flex flex-row items-center gap-1" >
175+ <div :style =" { backgroundColor: color, width: '10px', height: '10px' }" ></div >
176+ <span >组队{{ i + 1 }}</span >
177+ </div >
178+ </template >
167179 </div >
168- </n-modal >
180+ <v-chart class =" flex-1" :option =" option" @click =" handleClick" />
181+ <n-modal
182+ v-model:show =" showDetail"
183+ preset =" card"
184+ class =" team-member-history-modal"
185+ :title =" showSummonerName"
186+ style ="
187+ margin-top : 10px ;
188+ width : 95% ;
189+ height : 85vh ;
190+ display : flex ;
191+ flex-flow : column ;
192+ background : rgb (22 27 43 / 95% );
193+ backdrop-filter : blur (4px );
194+ border : 1px solid rgb (122 122 122 / 58% );
195+ border-radius : 8px ;
196+ overflow : hidden ;
197+ " >
198+ <div class =" flex flex-1 flex-col h-0" style =" font-size : 12px " >
199+ <HistoryList :match-history-list =" historyListData" ></HistoryList >
200+ </div >
201+ </n-modal >
202+ </div >
169203</template >
170204
171205<style scoped></style >
0 commit comments