|
|
@@ -31,12 +31,6 @@
|
|
|
v-if="isLocationCell(cell) && isCellVisible(cell)"
|
|
|
class="cell-content"
|
|
|
>
|
|
|
- <div
|
|
|
- class="category-badge"
|
|
|
- :style="getCategoryStyle(cell)"
|
|
|
- >
|
|
|
- {{ getHeatLabel(cell) }}
|
|
|
- </div>
|
|
|
<div class="loc-group">
|
|
|
{{ cell.locGroup1 }}
|
|
|
</div>
|
|
|
@@ -188,64 +182,8 @@ const DEPTH_CATEGORY_MAP: Record<number, string> = {
|
|
|
3: 'C'
|
|
|
}
|
|
|
|
|
|
-const CATEGORY_THEME_MAP_DARK: Record<string, { solid: string; soft: string; text: string }> = {
|
|
|
- A: {
|
|
|
- solid: '#1f7a3f',
|
|
|
- soft: 'rgba(31, 122, 63, 0.18)',
|
|
|
- text: '#f3fff7'
|
|
|
- },
|
|
|
- B: {
|
|
|
- solid: '#2f5fd7',
|
|
|
- soft: 'rgba(47, 95, 215, 0.18)',
|
|
|
- text: '#f5f8ff'
|
|
|
- },
|
|
|
- C: {
|
|
|
- solid: '#b8921f',
|
|
|
- soft: 'rgba(184, 146, 31, 0.2)',
|
|
|
- text: '#161200'
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const CATEGORY_THEME_MAP_LIGHT: Record<string, { solid: string; soft: string; text: string }> = {
|
|
|
- A: {
|
|
|
- solid: '#1f7a3f',
|
|
|
- soft: 'rgba(31, 122, 63, 0.12)',
|
|
|
- text: '#ffffff'
|
|
|
- },
|
|
|
- B: {
|
|
|
- solid: '#2f5fd7',
|
|
|
- soft: 'rgba(47, 95, 215, 0.12)',
|
|
|
- text: '#ffffff'
|
|
|
- },
|
|
|
- C: {
|
|
|
- solid: '#b8921f',
|
|
|
- soft: 'rgba(184, 146, 31, 0.18)',
|
|
|
- text: '#1f1f1f'
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const INACTIVE_CATEGORY_THEME_DARK = {
|
|
|
- solid: '#5f6b7a',
|
|
|
- soft: 'rgba(95, 107, 122, 0.16)',
|
|
|
- text: '#eef4f8'
|
|
|
-}
|
|
|
-
|
|
|
-const INACTIVE_CATEGORY_THEME_LIGHT = {
|
|
|
- solid: '#8a97a5',
|
|
|
- soft: 'rgba(138, 151, 165, 0.18)',
|
|
|
- text: '#ffffff'
|
|
|
-}
|
|
|
-
|
|
|
const themeClass = computed(() => (props.themeMode === 'light' ? 'theme-light' : 'theme-dark'))
|
|
|
|
|
|
-const categoryThemeMap = computed(() =>
|
|
|
- props.themeMode === 'light' ? CATEGORY_THEME_MAP_LIGHT : CATEGORY_THEME_MAP_DARK
|
|
|
-)
|
|
|
-
|
|
|
-const inactiveCategoryTheme = computed(() =>
|
|
|
- props.themeMode === 'light' ? INACTIVE_CATEGORY_THEME_LIGHT : INACTIVE_CATEGORY_THEME_DARK
|
|
|
-)
|
|
|
-
|
|
|
const groupBorderColor = computed(() => (props.themeMode === 'light' ? '#6f7a86' : '#ffffff'))
|
|
|
|
|
|
const LOCATION_ATTRIBUTE_LABEL_MAP: Record<string, string> = {
|
|
|
@@ -421,9 +359,7 @@ const gridStyle = computed(() => {
|
|
|
: 60
|
|
|
const compactSize = Math.min(baseCellWidth, baseCellHeight)
|
|
|
|
|
|
- const showBadge = compactSize > 38 ? 'inline-flex' : 'none'
|
|
|
const showGroup = compactSize > 58 ? 'block' : 'none'
|
|
|
- const badgeFontSize = Math.max(compactSize <= 42 ? 7 : compactSize <= 56 ? 8 : 9, 8)
|
|
|
const textFontSize = Math.max(compactSize <= 56 ? 8 : 9, 8)
|
|
|
const idFontSize = Math.max(
|
|
|
compactSize <= 34 ? 8 : compactSize <= 42 ? 9 : compactSize <= 56 ? 9 : 10,
|
|
|
@@ -440,10 +376,8 @@ const gridStyle = computed(() => {
|
|
|
gridTemplateRows: rowScales
|
|
|
.map((scale) => `${(baseCellHeight * scale).toFixed(2)}px`)
|
|
|
.join(' '),
|
|
|
- '--cell-badge-font-size': `${badgeFontSize}px`,
|
|
|
'--cell-group-font-size': `${textFontSize}px`,
|
|
|
'--cell-id-font-size': `${idFontSize}px`,
|
|
|
- '--cell-badge-display': showBadge,
|
|
|
'--cell-group-display': showGroup,
|
|
|
'--cell-content-gap': `${contentGap}px`,
|
|
|
'--cell-content-padding': `${contentPadding}px`,
|
|
|
@@ -589,10 +523,6 @@ const getCellClass = (cell: MapCell) => {
|
|
|
return classNames
|
|
|
}
|
|
|
|
|
|
-const getHeatLabel = (cell: GridCell) => {
|
|
|
- return cell.category
|
|
|
-}
|
|
|
-
|
|
|
const hasAbnormalLocationAttribute = (cell: GridCell) => {
|
|
|
return Boolean(cell.locationAttribute && cell.locationAttribute !== 'OK')
|
|
|
}
|
|
|
@@ -633,17 +563,6 @@ const getCellTitle = (cell: GridCell | null) => {
|
|
|
].join('\n')
|
|
|
}
|
|
|
|
|
|
-const getCategoryStyle = (cell: GridCell) => {
|
|
|
- const theme =
|
|
|
- props.categoryColorVisibility[cell.category] === false
|
|
|
- ? inactiveCategoryTheme.value
|
|
|
- : categoryThemeMap.value[cell.category]
|
|
|
- return {
|
|
|
- background: theme?.solid || '#5f6b7a',
|
|
|
- color: theme?.text || '#fff'
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
const tooltipLines = computed(() => {
|
|
|
return getCellTitle(hoveredCell.value)
|
|
|
.split('\n')
|
|
|
@@ -1080,18 +999,6 @@ onBeforeUnmount(() => {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
-.category-badge {
|
|
|
- display: var(--cell-badge-display, inline-flex);
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 2px 8px;
|
|
|
- border-radius: 10px;
|
|
|
- font-size: var(--cell-badge-font-size, 10px);
|
|
|
- font-weight: bold;
|
|
|
- line-height: 1;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
-
|
|
|
.loc-group {
|
|
|
display: var(--cell-group-display, -webkit-box);
|
|
|
font-size: var(--cell-group-font-size, 10px);
|