|
|
|
|
@ -282,6 +282,7 @@ |
|
|
|
|
'is-distribution': panel?.variant === 'distribution', |
|
|
|
|
'is-capacity': panel?.variant === 'capacity', |
|
|
|
|
'is-rank-bar': panel?.variant === 'rankBar', |
|
|
|
|
'is-park-bar': panel?.variant === 'parkBar', |
|
|
|
|
'is-race-bar': isRaceBarVariant, |
|
|
|
|
'is-few-rows': isRaceBarVariant && chartRows.length <= 3, |
|
|
|
|
'is-degradation': panel?.variant === 'degradation', |
|
|
|
|
@ -1211,7 +1212,7 @@ function stackItemSegments(item) { |
|
|
|
|
if (!total) return [] |
|
|
|
|
return stackSegments.value.map((segment, index) => { |
|
|
|
|
const value = Number(values[segment.key]) || 0 |
|
|
|
|
const percentBase = props.panel?.variant === "dual" || props.panel?.sharedScale === true |
|
|
|
|
const percentBase = props.panel?.variant === "dual" || props.panel?.variant === "parkSlim" || props.panel?.sharedScale === true |
|
|
|
|
? stackColumnMaxTotal.value |
|
|
|
|
: total |
|
|
|
|
return { |
|
|
|
|
@ -1388,7 +1389,7 @@ function stackColumnTotalPrefix(item) { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function showStackColumnValue() { |
|
|
|
|
return props.panel?.showValue === true || props.panel?.variant === "dual" |
|
|
|
|
return props.panel?.showValue === true || props.panel?.variant === "dual" || props.panel?.variant === "parkSlim" |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function normalizeSearch(value) { |
|
|
|
|
@ -5979,6 +5980,184 @@ function columnGradient(index, item = {}) { |
|
|
|
|
-webkit-line-clamp: 1; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.is-variant-parkSlim { |
|
|
|
|
grid-template-rows: 24px minmax(0, 1fr); |
|
|
|
|
gap: 2px; |
|
|
|
|
padding: 7px 22px 8px; |
|
|
|
|
|
|
|
|
|
.business-stack-legend { |
|
|
|
|
justify-content: center; |
|
|
|
|
gap: 22px; |
|
|
|
|
padding-right: 0; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
color: rgba(245, 253, 255, 0.88); |
|
|
|
|
font-size: 11px; |
|
|
|
|
line-height: 16px; |
|
|
|
|
font-weight: 700; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
i { |
|
|
|
|
width: 7px; |
|
|
|
|
height: 7px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
box-shadow: 0 0 3px currentColor; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.business-stack-unit { |
|
|
|
|
margin-left: 6px; |
|
|
|
|
color: rgba(235, 252, 255, 0.78); |
|
|
|
|
font-size: 11px; |
|
|
|
|
font-weight: 700; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.business-stack-chart { |
|
|
|
|
position: relative; |
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)); |
|
|
|
|
gap: 28px; |
|
|
|
|
padding: 4px 10px 0; |
|
|
|
|
|
|
|
|
|
&:before { |
|
|
|
|
content: ""; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 8px; |
|
|
|
|
right: 8px; |
|
|
|
|
top: 26px; |
|
|
|
|
bottom: 43px; |
|
|
|
|
background: |
|
|
|
|
repeating-linear-gradient( |
|
|
|
|
to bottom, |
|
|
|
|
rgba(194, 238, 246, 0.14) 0 1px, |
|
|
|
|
transparent 1px 22px |
|
|
|
|
); |
|
|
|
|
pointer-events: none; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.business-stack-item { |
|
|
|
|
position: relative; |
|
|
|
|
z-index: 1; |
|
|
|
|
grid-template-rows: 18px minmax(70px, 1fr) 42px; |
|
|
|
|
min-width: 0; |
|
|
|
|
overflow: visible; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.business-stack-total { |
|
|
|
|
align-self: end; |
|
|
|
|
color: rgba(250, 254, 255, 0.96); |
|
|
|
|
font-family: var(--screen-font-number, D-DIN, Arial, sans-serif); |
|
|
|
|
font-size: 12px; |
|
|
|
|
line-height: 16px; |
|
|
|
|
font-weight: 800; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
text-shadow: 0 0 5px rgba(255, 255, 255, 0.2); |
|
|
|
|
|
|
|
|
|
em { |
|
|
|
|
margin-left: 2px; |
|
|
|
|
color: rgba(235, 252, 255, 0.72); |
|
|
|
|
font-family: var(--screen-font-ui, "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", Arial, sans-serif); |
|
|
|
|
font-size: 10px; |
|
|
|
|
font-style: normal; |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.business-stack-track { |
|
|
|
|
position: relative; |
|
|
|
|
align-self: end; |
|
|
|
|
width: 18px; |
|
|
|
|
height: 100%; |
|
|
|
|
min-height: 66px; |
|
|
|
|
max-height: 100px; |
|
|
|
|
overflow: visible; |
|
|
|
|
border: 0; |
|
|
|
|
background: linear-gradient(180deg, rgba(48, 220, 255, 0.1), rgba(48, 220, 255, 0.035)); |
|
|
|
|
box-shadow: none; |
|
|
|
|
|
|
|
|
|
&:before { |
|
|
|
|
content: ""; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 50%; |
|
|
|
|
bottom: 0; |
|
|
|
|
width: 38px; |
|
|
|
|
height: 1px; |
|
|
|
|
background: linear-gradient(90deg, transparent, rgba(180, 248, 255, 0.35), transparent); |
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:after { |
|
|
|
|
content: ""; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 50%; |
|
|
|
|
bottom: -5px; |
|
|
|
|
width: 34px; |
|
|
|
|
height: 7px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
background: radial-gradient(ellipse at center, rgba(48, 220, 255, 0.22), rgba(48, 220, 255, 0) 72%); |
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
pointer-events: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
i { |
|
|
|
|
position: relative; |
|
|
|
|
display: block; |
|
|
|
|
min-height: 3px; |
|
|
|
|
box-shadow: |
|
|
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.28), |
|
|
|
|
0 0 3px color-mix(in srgb, currentColor 32%, transparent); |
|
|
|
|
|
|
|
|
|
&:first-child { |
|
|
|
|
border-radius: 0 0 8px 8px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:last-child { |
|
|
|
|
border-radius: 8px 8px 0 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&:last-child:before { |
|
|
|
|
content: ""; |
|
|
|
|
position: absolute; |
|
|
|
|
left: 2px; |
|
|
|
|
right: 2px; |
|
|
|
|
top: -4px; |
|
|
|
|
height: 6px; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
background: rgba(238, 255, 255, 0.82); |
|
|
|
|
box-shadow: 0 0 4px rgba(238, 255, 255, 0.36); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.business-stack-item span { |
|
|
|
|
align-self: center; |
|
|
|
|
width: 18px; |
|
|
|
|
height: 40px; |
|
|
|
|
color: rgba(250, 254, 255, 0.92); |
|
|
|
|
font-size: 12px; |
|
|
|
|
font-weight: 700; |
|
|
|
|
line-height: 16px; |
|
|
|
|
letter-spacing: 0; |
|
|
|
|
text-align: center; |
|
|
|
|
writing-mode: vertical-rl; |
|
|
|
|
text-orientation: upright; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
overflow: visible; |
|
|
|
|
-webkit-line-clamp: unset; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.business-stack-item.is-active { |
|
|
|
|
.business-stack-track i { |
|
|
|
|
animation: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
span, |
|
|
|
|
strong { |
|
|
|
|
color: #ffffff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.business-stack-legend { |
|
|
|
|
|