eomsangdonandClaude Opus 5
ac4e22f623
누가토량 곡선은 "얼마가 남는가"만 말한다. 어디 흙을 어디로 얼마나 옮기는지를 뽑아내는 계층을 얹었다 — 평형선, 운반 블록, 운반토량 Q, 평균운반거리 L, EA/RR/BR 안분, 장비 선정. 작도 규칙 근거는 clouds-daily.tistory.com/249 와 교과서 표준 작도법이다 (참고 도면 3공구의 수치·작도는 근거로 삼지 않았다). 평형선을 0선 하나로 고정하면 임도처럼 절토가 우세한 노선에서 사토가 전부 종점 한 덩어리로 몰린다. 그래서 곡선을 왼쪽부터 훑으며 커서를 옮기고, 성토가 절토를 다 못 받는 자리에서 평형선을 계단으로 옮긴다. 구간이 겹치지도 비지도 않고 단차의 합이 최종 누가토량과 정확히 맞는다. - 신규 _UI_MassHaul_Balance.ts: computeHaulPlan() 순수 계산기 - 신규 _UI_MassHaul_Balance_View.ts: 계단형 평형선 + 반종거 수평선 + 육각 balloon - MassHaulPoint에 cut_rr_m3/cut_br_m3 추가 (블록별 암종 안분 입력) - EARTHWORK_HAUL_EQUIPMENT_LIMITS_M을 context 응답으로 노출 (프론트 사본 없음) - massHaulPayload에 haul_plan 직렬화 (B08 인계) 검증: 수동 6종 + 무작위 100건에서 보존·안분합·L 범위·구간 무결성 성립. 렌더 스모크 4개 크기 NaN 0건. 영구저장소 프로젝트(26측점) 실측 시 블록 6개, 토취 75.4㎥가 최종 누가토량 -75.4㎥와 일치. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
270 lines
7.9 KiB
CSS
270 lines
7.9 KiB
CSS
/* =============================================================================
|
|
* B06_wf3_ProfileCross_UI_Style_MassHaul.css
|
|
* 유토곡선(Mass Haul Diagram) 스타일 — 곡선·오버레이 범례·요약줄.
|
|
* 700줄 제한 대응으로 _UI_Style_Cross.css에서 분리(종·횡단 도면 본체는 원본 유지).
|
|
*
|
|
* 곡선이 여러 개라 읽는 규칙을 둘로 나눈다:
|
|
* 색 = 산출 기준 (횡단 = 브랜드 보라 / 종단 = 성공색 초록)
|
|
* 선모양 = 환산 방식 (실선 = 지반유형별 / 파선 = 토사 단일 / 점선 = 환산 없음)
|
|
* 색상은 theme.css 변수만 쓴다. 횡단 기준의 보라는 참고 도면의 자주색에 대응한다.
|
|
* ========================================================================== */
|
|
|
|
/* 범례는 유토곡선 **우측 상단에 겹친다**. 단 가로 스크롤 컨테이너 **밖**에서 절대 위치로
|
|
띄운다 — 안에 넣으면 컨테이너 폭 계산에 끼어들어 종단면도와 측점 세로선이 어긋난다.
|
|
세로 위치(top)는 종단면도 높이에 맞춰 렌더러가 인라인으로 넣는다. */
|
|
.b06-masshaul__legend {
|
|
position: absolute;
|
|
right: var(--spacing-8);
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
gap: var(--spacing-4);
|
|
}
|
|
|
|
.b06-masshaul__legend-item {
|
|
display: inline-flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
padding: var(--spacing-4) var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-pills);
|
|
background: var(--color-surface-raised);
|
|
color: var(--color-text-body);
|
|
font-size: var(--text-caption);
|
|
line-height: 1.2;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b06-masshaul__legend-item.is-off {
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* 스와치는 곡선을 그대로 축소한 것 — 색과 선모양이 그래프와 같아야 범례 구실을 한다. */
|
|
.b06-masshaul__legend-swatch {
|
|
width: 18px;
|
|
height: 0;
|
|
border-top: 2px solid var(--color-royal-amethyst);
|
|
}
|
|
|
|
.b06-masshaul__legend-item--longitudinal .b06-masshaul__legend-swatch {
|
|
border-top-color: var(--color-success);
|
|
}
|
|
|
|
.b06-masshaul__legend-item--soil_only .b06-masshaul__legend-swatch {
|
|
border-top-style: dashed;
|
|
}
|
|
|
|
.b06-masshaul__legend-item--natural .b06-masshaul__legend-swatch {
|
|
border-top-style: dotted;
|
|
}
|
|
|
|
.b06-masshaul__legend-item.is-off .b06-masshaul__legend-swatch {
|
|
border-top-color: var(--color-smoke);
|
|
}
|
|
|
|
.b06-masshaul__curve {
|
|
fill: none;
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 2;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.b06-masshaul__curve--longitudinal {
|
|
stroke: var(--color-success);
|
|
}
|
|
|
|
/* 곡선과 0선 사이 — 절토 우세/성토 우세 구간을 한눈에 가르는 옅은 면.
|
|
여러 곡선에 겹쳐 칠하면 서로 가리므로 렌더러가 맨 앞 곡선 하나에만 붙인다. */
|
|
.b06-masshaul__band {
|
|
fill: var(--color-royal-amethyst);
|
|
opacity: 0.12;
|
|
stroke: none;
|
|
}
|
|
|
|
.b06-masshaul__band--longitudinal {
|
|
fill: var(--color-success);
|
|
}
|
|
|
|
/* 0선: 절토 우세와 성토 우세의 경계라 격자보다 진하게. 어떤 노선에서도 반드시 보인다. */
|
|
.b06-masshaul__zero {
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1.2;
|
|
stroke-dasharray: 4 3;
|
|
}
|
|
|
|
.b06-masshaul__zero-tick {
|
|
fill: var(--color-text-secondary);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
/* 그래프 이름표 배경 — 이름이 곡선 위에 놓이므로 불투명하게 깐다. */
|
|
.b06-masshaul__name-plate {
|
|
fill: var(--color-surface);
|
|
stroke: none;
|
|
}
|
|
|
|
.b06-masshaul__summary {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8) var(--spacing-16);
|
|
padding: var(--spacing-8) var(--spacing-16);
|
|
border-top: 1px solid var(--color-border);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.b06-masshaul__chip {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b06-masshaul__chip em {
|
|
font-style: normal;
|
|
}
|
|
|
|
.b06-masshaul__chip strong {
|
|
color: var(--color-text-body);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 요약 수치가 어느 곡선의 것인지 밝히는 꼬리표. */
|
|
.b06-masshaul__basis {
|
|
margin-inline-start: auto;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* 선택 측점이 곡선의 어디인지 찍는 점 — 말풍선과 시선을 잇는다. */
|
|
.b06-masshaul__focus {
|
|
fill: var(--color-royal-amethyst);
|
|
stroke: var(--color-surface);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
/* 선택 측점 구간 물량 말풍선. 렌더러가 곡선이 지나지 않는 자리를 골라 놓지만, 배치가
|
|
빡빡한 화면에서도 곡선이 비쳐 보이도록 배경을 완전 불투명으로 두지 않는다. */
|
|
.b06-masshaul__callout > rect {
|
|
fill: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b06-masshaul__callout-tail {
|
|
fill: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b06-masshaul__callout-leader {
|
|
stroke: var(--color-royal-amethyst);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 3 2;
|
|
}
|
|
|
|
.b06-masshaul__callout-text {
|
|
fill: var(--color-text-body);
|
|
font-size: 11px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* =============================================================================
|
|
* 토량 분배(평형선) 레이어
|
|
*
|
|
* 곡선(보라)과 구분되도록 계열을 통째로 바꾼다: 평형선·운반 표시는 경고색(황토),
|
|
* 사토는 위험색, 토취는 성공색. 곡선 위에 겹치므로 선을 얇게 두고 balloon만 불투명하다.
|
|
* ========================================================================== */
|
|
|
|
/* 평형선 — 블록마다 수평. 곡선보다 얇지만 실선이라 격자와 구분된다. */
|
|
.b06-balance__line {
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
/* 계단의 수직 연결선 — 사토·토취가 나는 자리라 파선으로 "옮겨 갔음"을 드러낸다. */
|
|
.b06-balance__riser {
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1.2;
|
|
stroke-dasharray: 3 2;
|
|
}
|
|
|
|
/* 종거(평형선 → 정점) = 운반토량 Q의 눈금. */
|
|
.b06-balance__ordinate {
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 2 3;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* 반종거 수평선 = 평균운반거리 L의 눈금. 화살촉이 운반 방향이다. */
|
|
.b06-balance__haul {
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1.6;
|
|
}
|
|
|
|
.b06-balance__haul-arrow {
|
|
fill: var(--color-warning);
|
|
stroke: none;
|
|
}
|
|
|
|
.b06-balance__leader {
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 3 2;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* 육각 balloon — 곡선 위에 놓이므로 배경을 거의 불투명하게 깐다. */
|
|
.b06-balance__balloon-shape {
|
|
fill: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
|
|
stroke: var(--color-warning);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
.b06-balance__balloon-text {
|
|
fill: var(--color-text-body);
|
|
font-size: 9px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 사토·토취 단차. 남는 흙(사토)과 모자란 흙(토취)을 색으로 갈라 둔다. */
|
|
.b06-balance__step-arrow {
|
|
stroke-width: 1.4;
|
|
}
|
|
|
|
.b06-balance__residual--spoil .b06-balance__step-arrow,
|
|
.b06-balance__residual--spoil .b06-balance__residual-text {
|
|
stroke: var(--color-danger);
|
|
fill: var(--color-danger);
|
|
}
|
|
|
|
.b06-balance__residual--borrow .b06-balance__step-arrow,
|
|
.b06-balance__residual--borrow .b06-balance__residual-text {
|
|
stroke: var(--color-success);
|
|
fill: var(--color-success);
|
|
}
|
|
|
|
.b06-balance__residual--spoil .b06-balance__step-head {
|
|
fill: var(--color-danger);
|
|
stroke: none;
|
|
}
|
|
|
|
.b06-balance__residual--borrow .b06-balance__step-head {
|
|
fill: var(--color-success);
|
|
stroke: none;
|
|
}
|
|
|
|
.b06-balance__residual-text {
|
|
stroke: none;
|
|
font-size: 9px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 범례에서 분배 레이어는 곡선이 아니라 평형선 계열임을 스와치로 알린다. */
|
|
.b06-masshaul__legend-item--balance .b06-masshaul__legend-swatch {
|
|
border-top-color: var(--color-warning);
|
|
border-top-style: dashed;
|
|
}
|