Browse Source

项目大屏调整

ellisran 6 days atrás
parent
commit
a989785a81

+ 10 - 0
app/public/css/main.css

@@ -2804,6 +2804,16 @@ animation:shake 1s .2s ease both;}
 @media(max-width:1200px){.gy-header{flex-wrap:wrap}.gy-nav{order:3;width:100%;justify-content:center}.gy-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}.gy-card{min-height:270px}.gy-summary,.gy-progress,.gy-investment,.gy-building{grid-column:span 2}.gy-planned,.gy-finished{height:300px}.gy-ratio{height:300px}.gy-progress{height:330px}.gy-screen:fullscreen .gy-grid{grid-template-rows:auto}}
 @media(max-width:650px){.gy-screen{padding:10px}.gy-brand strong{font-size:15px}.gy-mark{display:none}.gy-nav{gap:5px}.gy-nav button{padding:8px 12px}.gy-grid{display:flex;flex-direction:column}.gy-card{padding:12px}.gy-stats{grid-template-columns:repeat(2,1fr)}.gy-stat{padding:14px}.gy-stat strong{font-size:30px}.gy-fullscreen{padding:8px}.gy-title h2{font-size:15px}}
 
+.gy-preview-dialog{--gy-card:#343a40;color:#edf3fa}
+.gy-preview-dialog .modal-dialog{width:90vw;max-width:1600px;margin-left:auto;margin-right:auto}
+.gy-preview-dialog .modal-content{background:var(--gy-card);border-color:#627589;border-radius:6px}
+.gy-preview-dialog .modal-body{max-height:70vh}
+.gy-preview-dialog .modal-header{border-bottom-color:#48515a}
+.gy-preview-dialog .modal-title .small{color:#aab6c3}
+.gy-preview-dialog .gy-preview-dialog-table{border:1px solid #4a545e;background:var(--gy-card)}
+.gy-preview-dialog .close{color:inherit;text-shadow:none}
+.gy-preview-dialog .gy-preview-table .gy-ellipsis{white-space:normal;overflow-wrap:anywhere}
+
 /* Fill the available screen; short windows scroll inside the dark container. */
 /* Keep both header rows together, without collapsed-border gaps during scrolling. */
 .gy-preview-table{border-collapse:separate;border-spacing:0;table-layout:fixed}

+ 20 - 0
app/public/js/project_screen_guangyuan.js

@@ -3,6 +3,7 @@
 (function () {
     const root = document.getElementById('gy-screen');
     if (!root) return;
+    const previewDialog = document.getElementById('gy-preview-dialog');
     window.gyLoadProject = loadProject;
     window.gyRenderProjectTree = renderProjectTree;
     initScrollVisibility();
@@ -37,6 +38,8 @@
     } else document.getElementById('gy-message').textContent = '图表资源加载失败,请刷新页面。';
     document.getElementById('gy-preview-tab').addEventListener('click', () => switchPanel('preview'));
     document.getElementById('gy-events-tab').addEventListener('click', () => switchPanel('events'));
+    document.getElementById('gy-preview-expand').addEventListener('click', showPreview);
+    $(previewDialog).on('hidden.bs.modal', () => document.getElementById('gy-preview-expand').focus());
     document.getElementById('gy-fullscreen').addEventListener('click', toggleFullscreen);
     document.addEventListener('fullscreenchange', syncFullscreen);
     document.addEventListener('webkitfullscreenchange', syncFullscreen);
@@ -63,6 +66,7 @@
             tab.setAttribute('aria-selected', String(key === panel));
         });
         document.getElementById('gy-progress-hint').textContent = panel === 'preview' ? '阶段批复日期' : '最近更新 · 20条';
+        document.getElementById('gy-preview-expand').hidden = panel !== 'preview';
     }
     function resizeCharts() {
         if (root.querySelector('.gy-grid').hidden) return;
@@ -87,6 +91,7 @@
         const button = document.getElementById('gy-fullscreen');
         button.textContent = active ? '⛶ 退出全屏' : '⛶ 全屏显示';
         button.setAttribute('aria-pressed', String(active));
+        syncPreviewDialogContainer();
         requestAnimationFrame(resizeCharts);
     }
 
@@ -176,4 +181,19 @@
             return `<button type="button" class="gy-project-row${active ? ' active' : ''}" style="--gy-depth:${depth}" ${projectAttribute}="${escapeText(node.id)}" aria-pressed="${active}"><span class="gy-project-marker" aria-hidden="true">${index === nodes.length - 1 ? '└' : '├'}</span><span>${escapeText(node.name)}</span></button>`;
         }).join('');
     }
+    function showPreview() {
+        document.getElementById('gy-preview-dialog-content').innerHTML = renderPreview(data);
+        syncPreviewDialogContainer();
+        $(previewDialog).modal('show');
+        syncPreviewDialogContainer();
+    }
+    function syncPreviewDialogContainer() {
+        const fullscreen = document.fullscreenElement || document.webkitFullscreenElement;
+        const container = fullscreen === root ? root : document.body;
+        if (previewDialog.parentElement !== container) container.appendChild(previewDialog);
+        const modal = $(previewDialog).data('bs.modal');
+        if (modal && modal._backdrop && modal._backdrop.parentElement !== container) {
+            container.appendChild(modal._backdrop);
+        }
+    }
 })();

File diff suppressed because it is too large
+ 8 - 1
app/view/project_screen/guangyuan.ejs


+ 13 - 0
app/view/project_screen/guangyuan_modal.ejs

@@ -11,3 +11,16 @@
         </div>
     </div>
 </div>
+<div id="gy-preview-dialog" class="modal fade gy-preview-dialog" tabindex="-1" role="dialog" aria-labelledby="gy-preview-dialog-title" aria-hidden="true">
+    <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 id="gy-preview-dialog-title" class="modal-title">进度预览<span class="small font-weight-normal ml-3">阶段批复日期</span></h5>
+                <button class="close" type="button" data-dismiss="modal" aria-label="关闭进度预览"><span aria-hidden="true">&times;</span></button>
+            </div>
+            <div class="modal-body d-flex overflow-hidden p-3">
+                <div id="gy-preview-dialog-content" class="gy-scroll gy-preview-dialog-table rounded" tabindex="0" role="region" aria-label="全部项目进度表格"></div>
+            </div>
+        </div>
+    </div>
+</div>