diff --git a/ruoyi-ui/src/views/cesiumMap/index.vue b/ruoyi-ui/src/views/cesiumMap/index.vue index ae73214..125fde5 100644 --- a/ruoyi-ui/src/views/cesiumMap/index.vue +++ b/ruoyi-ui/src/views/cesiumMap/index.vue @@ -3,167 +3,154 @@
-
-
+
+ +
+ {{ isToolbarCollapsed ? '▶' : '◀' }} + 收起 +
+ + +
+
+ + + + + +
+ +
+ + + +
+ +
+ + + +
+
+ + +
- - -
- -
- -
- -
+
-
- -
-
-

属性设置

- -
- -
-
- - -
- -
- - - {{ selectedEntity.width }}px -
- -
- - - {{ (selectedEntity.opacity * 100).toFixed(0) }}% -
- -
- - -
- - -
-
- - - -
@@ -196,6 +183,7 @@ export default { return { viewer: null, scaleBar: null, + isToolbarCollapsed: false, // 绘制相关 drawingMode: null, // 'point', 'line', 'polygon', 'rectangle', 'circle' @@ -234,6 +222,10 @@ export default { }, methods: { + // 切换工具栏展开/收起 + toggleToolbar() { + this.isToolbarCollapsed = !this.isToolbarCollapsed + }, checkCesiumLoaded() { if (typeof Cesium === 'undefined') { console.error('Cesium未加载,请检查CDN链接'); @@ -1239,21 +1231,64 @@ export default { height: 100%; } -/* 主工具栏 */ +/* 主工具栏 - 修改后 */ .main-toolbar { position: absolute; top: 100px; right: 20px; z-index: 1000; display: flex; - flex-direction: column; - gap: 15px; background: rgba(255, 255, 255, 0.95); border-radius: 12px; - padding: 15px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + transition: all 0.3s ease; } +.main-toolbar.collapsed { + background: rgba(255, 255, 255, 0.9); +} + +/* 工具栏内容 */ +.toolbar-content { + display: flex; + flex-direction: column; + gap: 15px; + padding: 15px; + min-width: 180px; +} + +/* 收起按钮 */ +.collapse-btn { + display: flex; + align-items: center; + padding: 10px; + cursor: pointer; + background: #f8f9fa; + border-top-left-radius: 12px; + border-bottom-left-radius: 12px; + border-right: 1px solid #e9ecef; + transition: all 0.3s ease; + user-select: none; +} + +.collapse-btn:hover { + background: #e9ecef; +} + +.collapse-icon { + font-size: 14px; + font-weight: bold; + color: #495057; + margin-right: 5px; +} + +.collapse-text { + font-size: 12px; + color: #6c757d; + white-space: nowrap; +} + +/* 工具栏组 */ .toolbar-group { display: flex; flex-direction: column; @@ -1267,6 +1302,73 @@ export default { padding-bottom: 0; } +/* 收起时的最小化工具栏 */ +.toolbar-minimized { + display: flex; + flex-direction: column; + padding: 10px 8px; + gap: 8px; +} + +.min-tool-btn { + width: 36px; + height: 36px; + border: 2px solid #e9ecef; + border-radius: 8px; + background: white; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + color: #495057; + transition: all 0.3s ease; +} + +.min-tool-btn:hover { + background: #f8f9fa; + border-color: #4dabf7; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.min-tool-btn.active { + background: #4dabf7; + color: white; + border-color: #4dabf7; +} + +.min-tool-btn:disabled { + opacity: 0.5; + cursor: not-allowed; + transform: none !important; +} + +.min-tool-btn.danger { + color: #dc3545; +} + +.min-tool-btn.danger:hover { + background: #f8d7da; + border-color: #dc3545; +} + +.min-tool-btn.success { + color: #28a745; +} + +.min-tool-btn.success:hover { + background: #d4edda; + border-color: #28a745; +} + +.min-tool-separator { + height: 1px; + background: #e9ecef; + margin: 5px 0; +} + +/* 原来的工具按钮样式保持不变,但添加展开/收起状态的调整 */ .tool-btn { padding: 10px 15px; background: white; @@ -1330,6 +1432,8 @@ export default { white-space: nowrap; } +/* 其他样式保持不变... */ + /* 属性面板 */ .property-panel { position: absolute; @@ -1344,235 +1448,6 @@ export default { max-width: 300px; } -.panel-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 15px; - padding-bottom: 10px; - border-bottom: 1px solid #e9ecef; -} - -.panel-header h4 { - margin: 0; - color: #495057; - font-size: 16px; - font-weight: 600; -} - -.close-btn { - background: none; - border: none; - font-size: 20px; - color: #6c757d; - cursor: pointer; - width: 24px; - height: 24px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; -} - -.close-btn:hover { - background: #f8f9fa; - color: #495057; -} - -.panel-content { - display: flex; - flex-direction: column; - gap: 15px; -} - -.form-group { - display: flex; - flex-direction: column; - gap: 5px; -} - -.form-group label { - font-size: 12px; - font-weight: 500; - color: #6c757d; -} - -.form-group input[type="color"] { - width: 100%; - height: 36px; - border: 1px solid #dee2e6; - border-radius: 6px; - padding: 2px; - cursor: pointer; -} - -.form-group input[type="range"] { - flex: 1; - margin-right: 10px; -} - -.form-group input[type="text"] { - width: 100%; - padding: 8px 12px; - border: 1px solid #dee2e6; - border-radius: 6px; - font-size: 14px; -} - -.form-group span { - font-size: 12px; - color: #6c757d; - min-width: 40px; - text-align: right; -} - -.delete-btn { - padding: 10px; - background: #dc3545; - color: white; - border: none; - border-radius: 6px; - cursor: pointer; - font-size: 14px; - font-weight: 500; - transition: background 0.3s; - margin-top: 10px; -} - -.delete-btn:hover { - background: #c82333; -} - -/* 实体列表 */ -.entity-list { - position: absolute; - top: 220px; - right: 20px; - z-index: 1000; - background: rgba(255, 255, 255, 0.95); - border-radius: 12px; - padding: 15px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); - min-width: 250px; - max-height: 400px; - overflow-y: auto; -} - -.list-header { - margin-bottom: 15px; - padding-bottom: 10px; - border-bottom: 1px solid #e9ecef; -} - -.list-header h4 { - margin: 0 0 5px 0; - color: #495057; - font-size: 14px; - font-weight: 600; -} - -.list-header .hint { - font-size: 11px; - color: #6c757d; - font-style: italic; -} - -.entity-items { - display: flex; - flex-direction: column; - gap: 8px; -} - -.entity-item { - display: flex; - align-items: center; - padding: 10px; - background: #f8f9fa; - border-radius: 8px; - cursor: pointer; - transition: all 0.3s ease; - border: 2px solid transparent; -} - -.entity-item:hover { - background: #e3f2fd; - border-color: #4dabf7; -} - -.entity-item.active { - background: #4dabf7; - border-color: #4dabf7; -} - -.entity-item.active .entity-name, -.entity-item.active .entity-type, -.entity-item.active .entity-coord, -.entity-item.active .entity-points { - color: white; -} - -.entity-icon { - font-size: 20px; - margin-right: 12px; - width: 24px; - text-align: center; -} - -.entity-info { - flex: 1; - min-width: 0; -} - -.entity-name { - font-size: 13px; - font-weight: 500; - color: #495057; - margin-bottom: 3px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.entity-details { - display: flex; - justify-content: space-between; - font-size: 11px; - color: #6c757d; -} - -.entity-type { - background: #e9ecef; - padding: 2px 6px; - border-radius: 10px; - font-size: 10px; -} - -.entity-coord, -.entity-points { - font-family: 'Monaco', 'Menlo', monospace; -} - -.entity-delete { - width: 24px; - height: 24px; - border: none; - background: #dc3545; - color: white; - border-radius: 50%; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 16px; - opacity: 0.7; - transition: opacity 0.3s; - flex-shrink: 0; -} - -.entity-delete:hover { - opacity: 1; -} - /* 测量结果面板 */ .measurement-panel { position: absolute; @@ -1586,34 +1461,6 @@ export default { min-width: 200px; } -.measurement-content h5 { - margin: 0 0 10px 0; - color: #495057; - font-size: 14px; - font-weight: 600; -} - -.measurement-item { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 8px; - font-size: 13px; -} - -.measurement-item:last-child { - margin-bottom: 0; -} - -.measurement-item span { - color: #6c757d; -} - -.measurement-item strong { - color: #495057; - font-weight: 600; -} - /* 自定义比例尺样式 */ :deep(.scale-bar-container) { user-select: none; @@ -1632,4 +1479,21 @@ export default { :deep(.cesium-credit-textContainer) { display: none !important; } + +/* 响应式调整 */ +@media (max-width: 768px) { + .main-toolbar { + right: 10px; + top: 80px; + } + + .toolbar-content { + min-width: 150px; + } + + .tool-btn { + min-width: 100px; + padding: 8px 12px; + } +} \ No newline at end of file