综合运营：分支图BUG、跳转

feat:完善进度/总数

ruoyi-ui/src/views/oa/project/dashboard2/index.vue

@@ -158,9 +158,47 @@
             </div>
           </div>
 
-          <!-- 下：进度板块 — Tab1 进度明细表（默认）；Tab2 原思维导图 + 图例 -->
+          <!-- 下：进度板块 — 与进度中心(step) 同款的简要信息条 + Tab -->
           <div class="panel schedule-panel">
-            <el-tabs v-model="scheduleViewTab" class="schedule-panel-tabs">
+            <div v-if="currentProjectId" class="schedule-board-summary schedule-board-summary--pace-like">
+              <el-row>
+                <div>
+                  <el-row>
+                    <el-col :span="12">
+                      <div style="font-size: small;">
+                        <span style="color:#d0d0d0 ">项目名：</span>
+                        <el-popover placement="bottom" trigger="hover" width="800">
+                          <template slot="reference">
+                            <span style="color: #409eff;">{{ projectDisplayName }}</span>
+                          </template>
+                          <ProjectInfo :info="projectDetail || {}" />
+                        </el-popover>
+                      </div>
+                    </el-col>
+                    <el-col :span="12">
+                      <div style="font-size: small;">
+                        <span style="color:#d0d0d0 ">项目负责人：</span>
+                        <span>{{ projectManagerName }}</span>
+                      </div>
+                    </el-col>
+                    <el-col :span="12">
+                      <div style="font-size: small;">
+                        <span style="color:#d0d0d0 ">当前进度：</span>
+                        <span>{{ dashboardScheduleSummary }}</span>
+                      </div>
+                    </el-col>
+                    <el-col :span="12">
+                      <div style="font-size: small;">
+                        <span style="color:#d0d0d0 ">项目状态：</span>
+                        <span v-if="projectIsTop" style="color: #ff4d4f;">重点关注</span>
+                        <span v-else>一般项目</span>
+                      </div>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-row>
+            </div>
+            <el-tabs v-model="scheduleViewTab" class="schedule-panel-tabs" @tab-click="onScheduleTabClick">
               <el-tab-pane label="进度明细" name="list">
                 <!-- 进度数据：表格自然撑开高度，由 .progress-table-scroll 单独承担纵向/横向滚动 -->
                 <div class="progress-table-pane" v-loading="xmindLoading">
@@ -206,6 +244,7 @@
                         <el-empty :image-size="80" description="暂无进度步骤数据"></el-empty>
                       </div>
                       <xmind
+                        ref="dashboardMindXmind"
                         v-else-if="scheduleViewTab === 'mind'"
                         :list="stepList"
                         height="100%"
@@ -243,10 +282,11 @@
 <script>
 import { mapState } from 'vuex'
 import Xmind from '@/views/oa/project/pace/components/xmind.vue'
+import ProjectInfo from '@/components/fad-service/ProjectInfo/index.vue'
 
 export default {
   name: 'OaProjectDashboard2',
-  components: { Xmind },
+  components: { Xmind, ProjectInfo },
   dicts: ['sys_work_type', 'sys_sort_grade'],
   data () {
     return {
@@ -265,8 +305,31 @@ export default {
       'projectTotal',
       'taskQuery',
       'taskList',
-      'stepList'
+      'stepList',
+      'projectDetail'
     ]),
+    projectDisplayName () {
+      const p = this.projectDetail
+      return (p && p.projectName) ? String(p.projectName) : ''
+    },
+    projectManagerName () {
+      const p = this.projectDetail
+      return (p && p.functionary) ? String(p.functionary) : ''
+    },
+    projectIsTop () {
+      const p = this.projectDetail
+      if (!p) return false
+      const top = p.isTop
+      return top === true || top === 1 || top === '1'
+    },
+    /** 与 pace/step 中 scheduleSummary 文案规则一致 */
+    dashboardScheduleSummary () {
+      const list = this.stepList || []
+      const totalCount = list.length
+      const completedCount = list.filter((item) => item.status === 2).length
+      const pendingCount = list.filter((item) => item.status === 1).length
+      return `已完成（${completedCount}）+ 待验收（${pendingCount}） / 总节点数（${totalCount}）`
+    },
     filteredTaskList () {
       const list = this.taskList || []
       const code = (this.taskQuery.projectCode || '').trim().toLowerCase()
@@ -304,6 +367,19 @@ export default {
     this.getProjectList()
   },
   methods: {
+    /** 进度导图挂在 Tab 内，切换为可见后触发 ECharts 重新测量，避免线上画布宽/高为 0 */
+    onScheduleTabClick (tab) {
+      if (!tab || tab.name !== 'mind') return;
+      this.$nextTick(() => {
+        requestAnimationFrame(() => {
+          const comp = this.$refs.dashboardMindXmind;
+          if (comp && typeof comp.scheduleResize === 'function') {
+            comp.scheduleResize();
+          }
+        });
+      });
+    },
+
     async getProjectList () {
       this.projectLoading = true
       try {
@@ -360,6 +436,16 @@ export default {
       } finally {
         this.pageLoading = false
         this.xmindLoading = false
+        if (this.scheduleViewTab === 'mind') {
+          this.$nextTick(() => {
+            requestAnimationFrame(() => {
+              const comp = this.$refs.dashboardMindXmind
+              if (comp && typeof comp.scheduleResize === 'function') {
+                comp.scheduleResize()
+              }
+            })
+          })
+        }
       }
     },
 
@@ -666,16 +752,18 @@ export default {
   padding: 0;
 }
 
-.schedule-panel-tabs {
-  flex: 1 1 0%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  
+.schedule-board-summary--pace-like {
+  flex-shrink: 0;
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid #ebeef5;
 }
 
-/* Element Tabs 根节点参与纵向 flex，才能把剩余高度交给内容区 */
-.schedule-panel-tabs :deep(.el-tabs) {
+/*
+ * schedule-panel-tabs 与 .el-tabs 在同一 DOM 节点上，不能用「.schedule-panel-tabs :deep(.el-tabs)」后代选择器（永远匹配不到）。
+ * 生产包合并 CSS 后，Element 全局 .el-tabs 可能后加载并盖住单独的 .schedule-panel-tabs，导致 flex 丢失。
+ * 使用双类选择器提高命中与优先级。
+ */
+.schedule-panel-tabs.el-tabs {
   flex: 1 1 0%;
   min-height: 0;
   display: flex;
@@ -683,13 +771,13 @@ export default {
   height: 100%;
 }
 
-.schedule-panel-tabs :deep(.el-tabs__header) {
+.schedule-panel-tabs.el-tabs :deep(.el-tabs__header) {
   margin-bottom: 0;
   padding: 0 12px;
   flex-shrink: 0;
 }
 
-.schedule-panel-tabs :deep(.el-tabs__content) {
+.schedule-panel-tabs.el-tabs :deep(.el-tabs__content) {
   flex: 1 1 0%;
   min-height: 0;
   overflow: hidden;
@@ -699,9 +787,11 @@ export default {
 }
 
 /* 当前激活的 pane 占满内容区高度，子元素才能算出可滚动区域 */
-.schedule-panel-tabs :deep(.el-tab-pane) {
+.schedule-panel-tabs.el-tabs :deep(.el-tab-pane) {
   flex: 1 1 0%;
   min-height: 0;
+  min-width: 0;
+  width: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -710,6 +800,8 @@ export default {
 .schedule-tab-pane-inner {
   flex: 1 1 0%;
   min-height: 0;
+  min-width: 0;
+  width: 100%;
   height: 100%;
   box-sizing: border-box;
   display: flex;
@@ -719,19 +811,24 @@ export default {
 .schedule-tab-pane-inner--mind {
   min-height: 280px;
   overflow: hidden;
+  width: 100%;
+  min-width: 0;
 }
 
-/* 进度明细 Tab：占满下方板块；内部仅滚动区参与滚动 */
+/* 进度明细 Tab：表格与面板四边留白，避免贴边 */
 .progress-table-pane {
   flex: 1 1 0%;
   min-height: 0;
   width: 100%;
-  height:300px;
+  height: 300px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  padding: 8px 12px 10px;
-  
+  padding: 14px 18px 18px;
+}
+
+.progress-table-pane :deep(.el-empty) {
+  padding: 24px 8px;
 }
 
 .progress-table-scroll {
@@ -740,6 +837,8 @@ export default {
   min-width: 0;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
+  /* 表格与滚动容器边缘再留一线间距，滚动条不压表格边框 */
+  padding: 2px 4px 4px 2px;
 }
 
 .progress-step-el-table {
@@ -751,7 +850,10 @@ export default {
   flex-direction: row;
   align-items: stretch;
   flex: 1;
+  flex-basis: 0;
   min-height: 0;
+  min-width: 0;
+  width: 100%;
 }
 
 .task-table-wrap {
@@ -804,7 +906,7 @@ export default {
 }
 
 .xmind-wrap {
-  flex: 1;
+  flex: 1 1 0%;
   min-width: 0;
   position: relative;
   padding: 0;

ruoyi-ui/src/views/oa/project/pace/components/xmind.vue

@@ -106,7 +106,9 @@ export default {
       return {
         width: '100%',
         height: this.height,
-        minHeight: this.dashboardMode ? '300px' : '240px'
+        minHeight: this.dashboardMode ? '300px' : '240px',
+        /* 看板嵌在横向 flex 内，避免 min-width:auto 把可用宽压成 0 */
+        ...(this.dashboardMode ? { minWidth: 0, boxSizing: 'border-box' } : {})
       }
     }
   },
@@ -118,37 +120,92 @@ export default {
       clickEvent: null, // 新增：存储点击事件句柄，用于销毁解绑
       users: [],
       supplierList: [],
+      chartResizeObserver: null,
+      chartResizeObserverRaf: null
     };
   },
   watch: {
-    // 监听列表数据变化，自动更新图表
     list: {
       deep: true,
       handler () {
-        if (this.chartInstance) {
+        this.$nextTick(() => {
           this.initChart();
-        }
+        });
       }
     }
   },
   mounted () {
     this.initChart();
-    this.$nextTick(() => this.resizeChart());
+    this.deferResizeChart();
     window.addEventListener('resize', this.resizeChart);
+    this.$nextTick(() => {
+      this.bindChartResizeObserver();
+    });
   },
   beforeDestroy () {
     window.removeEventListener('resize', this.resizeChart);
-    // 新增：解绑Echarts点击事件，防止内存泄漏
+    this.unbindChartResizeObserver();
     if (this.chartInstance && this.clickEvent) {
       this.chartInstance.off('click', this.clickEvent);
     }
-    // 销毁图表实例，防止内存泄漏
     this.chartInstance?.dispose();
   },
   methods: {
-    // 优化：增加防抖处理-窗口自适应，避免频繁触发
     resizeChart () {
-      this.chartInstance?.resize()
+      this.chartInstance?.resize();
+    },
+
+    /**
+     * 供综合看板在切换 Tab 后调用：Tab 从 display:none 变为可见后需重新测量画布。
+     */
+    scheduleResize () {
+      this.deferResizeChart();
+    },
+
+    /**
+     * el-tab / flex 布局下首帧常为 0 宽高，生产环境更明显；延迟到布局稳定后再 resize。
+     */
+    deferResizeChart () {
+      this.$nextTick(() => {
+        this.$nextTick(() => {
+          requestAnimationFrame(() => {
+            this.resizeChart();
+            requestAnimationFrame(() => this.resizeChart());
+          });
+        });
+      });
+    },
+
+    bindChartResizeObserver () {
+      if (!this.dashboardMode || typeof ResizeObserver === 'undefined') {
+        return;
+      }
+      const el = this.$refs.chart;
+      if (!el) {
+        return;
+      }
+      this.unbindChartResizeObserver();
+      this.chartResizeObserver = new ResizeObserver(() => {
+        if (this.chartResizeObserverRaf != null) {
+          cancelAnimationFrame(this.chartResizeObserverRaf);
+        }
+        this.chartResizeObserverRaf = requestAnimationFrame(() => {
+          this.chartResizeObserverRaf = null;
+          this.resizeChart();
+        });
+      });
+      this.chartResizeObserver.observe(el);
+    },
+
+    unbindChartResizeObserver () {
+      if (this.chartResizeObserverRaf != null) {
+        cancelAnimationFrame(this.chartResizeObserverRaf);
+        this.chartResizeObserverRaf = null;
+      }
+      if (this.chartResizeObserver) {
+        this.chartResizeObserver.disconnect();
+        this.chartResizeObserver = null;
+      }
     },
 
     handleSubmit () {
@@ -288,11 +345,13 @@ export default {
       };
     },
 
-    // 初始化图表
     initChart () {
-      // 初始化图表实例
+      const dom = this.$refs.chart;
+      if (!dom) {
+        return;
+      }
       if (!this.chartInstance) {
-        this.chartInstance = echarts.init(this.$refs.chart);
+        this.chartInstance = echarts.init(dom);
       }
       // 重要：先解绑已有点击事件，防止多次绑定导致弹窗多次触发
       if (this.clickEvent) {
@@ -422,8 +481,8 @@ export default {
           }
         ]
       };
-      // 渲染图表
       this.chartInstance?.setOption(option, true);
+      this.deferResizeChart();
 
       this.clickEvent = (params) => {
         const data = params.data;
@@ -461,12 +520,16 @@ export default {
   flex-direction: column;
   height: 100%;
   min-height: 0;
+  width: 100%;
+  min-width: 0;
 }
 
 /* 与综合看板折线图区域一致：白底、细边框、轻圆角 */
 .xmind-box--dashboard .xmind-container {
   flex: 1;
   min-height: 0;
+  min-width: 0;
+  width: 100%;
   background: #fff;
   border: 1px solid #ebeef5;
   border-radius: 6px;