| | |
|---|
| | | viewPolygon() |
|---|
| | | activeShapeId.value = null |
|---|
| | | pointList = [] |
|---|
| | | currentShapeType.value = 'polygon' |
|---|
| | | const defaultAreaType = getDetectAreaTypeKey() |
|---|
| | | if (defaultAreaType) { |
|---|
| | | activeAreaType.value = defaultAreaType |
|---|
| | | const firstShape = shapeList.value[0] |
|---|
| | | const initialType = firstShape?.drawType || 'polygon' |
|---|
| | | currentShapeType.value = initialType |
|---|
| | | if (initialType === 'buffer') { |
|---|
| | | activeAreaType.value = bufferAreaTypeValue.split(',') |
|---|
| | | } else if (firstShape?.areaType) { |
|---|
| | | activeAreaType.value = firstShape.areaType |
|---|
| | | } else { |
|---|
| | | const defaultAreaType = getDetectAreaTypeKey() |
|---|
| | | if (defaultAreaType) { |
|---|
| | | activeAreaType.value = defaultAreaType |
|---|
| | | } |
|---|
| | | } |
|---|
| | | clearActiveTool() |
|---|
| | | startDraw('polygon') |
|---|
| | | startDraw(initialType) |
|---|
| | | } else { |
|---|
| | | await loadDetail() |
|---|
| | | viewPolygon() |
|---|
| | |
|---|
| | | right: 16px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | gap: 10px; |
|---|
| | | padding: 10px 8px; |
|---|
| | | background: rgba(19, 28, 36, 0.75); |
|---|
| | | gap: 14px; |
|---|
| | | padding: 32px 14px; |
|---|
| | | background: rgba(26, 25, 25, 0.6); |
|---|
| | | border-radius: 8px 8px 8px 8px; |
|---|
| | | backdrop-filter: blur(4px); |
|---|
| | | border-radius: 8px; |
|---|
| | | box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tool-btn { |
|---|
| | | padding: 0; |
|---|
| | | padding: 0 !important; |
|---|
| | | width: 46px; |
|---|
| | | height: 46px; |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: center; |
|---|
| | | gap: 6px; |
|---|
| | | background: rgba(255, 255, 255, 0.08); |
|---|
| | | border: 1px solid rgba(255, 255, 255, 0.18); |
|---|
| | | border-radius: 8px; |
|---|
| | | color: #ffffff; |
|---|
| | | font-size: 12px; |
|---|
| | | line-height: 1; |
|---|
| | | border: none !important; |
|---|
| | | box-shadow: none; |
|---|
| | | cursor: pointer; |
|---|
| | | transition: all 0.2s ease; |
|---|
| | | overflow: hidden; |
|---|
| | | background: transparent !important; |
|---|
| | | box-sizing: border-box; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tool-btn:hover { |
|---|
| | | border-color: rgba(255, 255, 255, 0.35); |
|---|
| | | transform: translateY(-1px); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tool-btn.active { |
|---|
| | | border-color: rgba(40, 79, 227, 0.9); |
|---|
| | | box-shadow: 0 0 0 1px rgba(40, 79, 227, 0.45), 0 6px 14px rgba(40, 79, 227, 0.35); |
|---|
| | | background: rgba(40, 79, 227, 0.18); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tool-btn:active { |
|---|
| | | transform: translateY(0); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tool-btn.danger { |
|---|
| | | border-color: rgba(255, 112, 112, 0.6); |
|---|
| | | color: #ffb3b3; |
|---|
| | | border: 2px solid #FFFFFF !important; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tool-icon { |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tool-icon-image { |
|---|
| | | width: 36px; |
|---|
| | | height: 36px; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .tool-icon.polygon { |
|---|
