fix:单项目管理的成本模块

src/views/project/project-manage/single-project/components/cost-manage/cost-analysis/components/OrgStructChart/index.vue

@@ -3,19 +3,11 @@
 </template>
 
 <script setup>
-  import { ref, onMounted, onBeforeUnmount } from 'vue';
+  import { ref, onMounted, onBeforeUnmount,watch } from 'vue';
   import { Graph, Node, Point } from '@antv/x6';
-  // 组件挂载后初始化图表
-  onMounted(() => {
-    console.log("434343");
-    
-    registerChartElements();
-    initChart();
-  });
 
   const containerRef = ref(null);
   let graph = null;
-
   // 注册节点和边的类型
   const registerChartElements = () => {
     Graph.registerNode(
@@ -117,7 +109,7 @@
         },
         name: {
           text: name,
-          fontSize: 16,
+          fontSize: 13,
           fontFamily: 'Arial',
           letterSpacing: 0,
         },
@@ -190,8 +182,8 @@
     });
 
     // 图表数据
-    const male = 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*kUy8SrEDp6YAAAAAAAAAAAAAARQnAQ';
-    const female = 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*f6hhT75YjkIAAAAAAAAAAAAAARQnAQ';
+    const male = 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A  *kUy8SrEDp6YAAAAAAAAAAAAAARQnAQ';
+    const female = 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A  *f6hhT75YjkIAAAAAAAAAAAAAARQnAQ';
 
     // 创建节点
     const bart1 = createNode(100, 70, '项目合同额(元)', '2000,00.00', male);
@@ -249,6 +241,12 @@
     graph.zoomToFit({ padding: 20, maxScale: 1 });
   };
 
+  // 组件挂载后初始化图表
+  onMounted(() => {
+    registerChartElements();
+    initChart();
+  });
+
   // 组件卸载前清理图表
   onBeforeUnmount(() => {
     if (graph) {
@@ -256,13 +254,12 @@
       graph = null;
     }
   });
-
 </script>
 
 <style scoped>
   .org-chart-container {
     width: 100%;
-    height: 385px;
+    height: 485px;
     border: 1px solid #e5e7eb;
     border-radius: 6px;
     overflow: hidden;

src/views/project/project-manage/single-project/components/cost-manage/cost-analysis/index.vue

@@ -1,25 +1,17 @@
 <template>
   <div class="link-company">
     <div class="link-flow">
-      <bs-catalog title="成本分析">
-        <template #content>
-          <div class="link-company-content">
-            <org-struct-chart ref="orgStructChartRef" />
-          </div>
-        </template>
-      </bs-catalog>
+        <org-struct-chart ref="orgStructChartRef" />
     </div>
   </div>
 </template>
 <script setup>
   import { onMounted } from 'vue';
   import OrgStructChart from './components/OrgStructChart/index.vue';
-  import BsCatalog from '/@/components/Catalog/index.vue';
-  
-    
-    onMounted(() => {
-      console.log('CostAnalysis component is mounted');
-    });
+
+  onMounted(() => {
+    console.log('CostAnalysis component is mounted');
+  });
 </script>
 
 <style scoped lang="scss">
@@ -30,6 +22,8 @@
     .link-flow {
       border-radius: 8px;
       flex: 1;
+      width: 100%;
+      height: 100%;
       .link-company-content {
         width: 100%;
         position: relative;

src/views/project/project-manage/single-project/components/cost-manage/index.vue

@@ -9,8 +9,8 @@
     </div>
   </div>
   <div style="background: white; margin-top: 10px; padding: 10px">
-    <a-button type="primary" style="margin: 10px 0 10px 0" @click="open = true"> 成本分析 </a-button>
-    <a-table :columns="columns" :data-source="tableData" bordered :row-class-name="() => 'custom-row'" :scroll="{ y: 400 }">
+    <!-- <a-button type="primary" style="margin: 10px 0 10px 0" @click="open = true"> 成本分析 </a-button> -->
+    <a-table :columns="columns" :data-source="tableData" bordered :scroll="{ y: 550 }" :pagination="false">
       <template #money="{ text, record, index }">
         <div class="editable-cell">
           <div v-if="isEditable(record.age1) && editableData[index]" class="editable-cell-input-wrapper">
@@ -18,33 +18,34 @@
             <check-outlined class="editable-cell-icon-check" @click="save(index)" />
           </div>
           <div v-else class="editable-cell-text-wrapper">
-            {{ text}}
+            {{ text }}
             <edit-outlined v-if="isEditable(record.age1)" class="editable-cell-icon" @click="edit(index)" />
           </div>
         </div>
       </template>
     </a-table>
     <a-drawer v-model:open="open" width="1300" placement="right" title="成本分析">
-      <CostAnalysis />
+      <OrgStructChart :visible="open" />
       <Echar />
     </a-drawer>
   </div>
 </template>
 
 <script setup>
-  import { ref, reactive } from 'vue';
+  import { ref, reactive, watch } from 'vue';
   import { cloneDeep } from 'lodash-es';
-  import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';
-  import CostAnalysis from './cost-analysis/index.vue';
+
+  import OrgStructChart from './cost-analysis/components/OrgStructChart/index.vue';
   import Echar from './echar.vue';
 
-  const dashboardItems = [
-    { title: '任务总数', value: 12, unit: '个' },
-    { title: '预计人天', value: 12, unit: '人天' },
-    { title: '累计发生人天', value: 12, unit: '天' },
-    { title: '超预计人天数', value: 12, unit: '天' },
-    { title: '超期任务数', value: 12, unit: '个' },
-  ];
+  const dashboardItems = ref([
+    { title: '总合同额', value: 12, unit: '万' },
+    { title: '预估总成本', value: 12, unit: '万' },
+    { title: '实时总成本', value: 12, unit: '万' },
+    { title: '总成本偏差', value: 12, unit: '万' },
+    { title: '项目净利润', value: 12, unit: '万' },
+    { title: '公司净收入', value: 12, unit: '万' },
+  ]);
 
   const open = ref(false);
 
@@ -88,7 +89,7 @@
     if (index === 1 || index === 2 || index === 3) return { rowSpan: 0 };
     if (index === 4) return { rowSpan: 2 };
     if (index === 5) return { rowSpan: 0 };
-    if (index === 7) return { rowSpan: 3 };
+    if (index === 7) return { rowSpan: 4 };
     if (index === 8 || index === 9 || index === 10) return { rowSpan: 0 };
     return {};
   };
@@ -103,26 +104,25 @@
       align: 'center',
       slots: { customRender: 'money' },
     },
-    { title: '实际成本(元)', dataIndex: 'phone', align: 'center', customCell: getRowSpan },
-    { title: '成本偏差额(元)', dataIndex: 'age1', align: 'center' },
-    { title: '总预算成本(元)', dataIndex: 'age1', align: 'center' },
-    { title: '实际总成本(元)', dataIndex: 'age1', align: 'center' },
-    { title: '实际总成本偏差(元)', dataIndex: 'age1', align: 'center' },
+    { title: '成本偏差额(元)', dataIndex: 'age1', align: 'center', customCell: getRowSpan },
+    { title: '总预算成本(元)', dataIndex: 'age1', align: 'center', customCell: getRowSpan },
+    { title: '实际总成本(元)', dataIndex: 'age1', align: 'center', customCell: getRowSpan },
+    { title: '实际总成本偏差(元)', dataIndex: 'age1', align: 'center', customCell: getRowSpan },
   ];
 </script>
 
 <style scoped lang="less">
   .dashboard {
     display: flex;
-    gap: 70px;
+    gap: 10px;
     align-items: center;
-    justify-content: center;
+    // justify-content: center;
     padding: 10px;
     background: white;
   }
   .dashboard-card {
-    width: 180px;
-    height: 100px;
+    width: 130px;
+    height: 70px;
     background: #f5f8ff;
     border: 1px solid #d3dfff;
     border-radius: 10px;
@@ -149,52 +149,49 @@
     color: #666;
   }
 
-  .custom-row td {
-    padding: 16px !important;
+  ::v-deep .ant-table-tbody {
+    line-height: 3px;
+    tr {
+      td {
+        line-height: 22px;
+        padding: 6px 2px 7px 2px;
+      }
+    }
   }
 
   .editable-cell {
-  position: relative;
-
-  .editable-cell-input-wrapper,
-  .editable-cell-text-wrapper {
-    padding-right: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .editable-cell-text-wrapper {
-    padding: 5px 24px 5px 5px;
-  }
+    position: relative;
+
+    .editable-cell-input-wrapper,
+    .editable-cell-text-wrapper {
+      padding-right: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
 
-  .editable-cell-icon,
-  .editable-cell-icon-check {
-    position: absolute;
-    right: 0;
-    width: 20px;
-    cursor: pointer;
-  }
+    .editable-cell-text-wrapper {
+      padding: 5px 24px 5px 5px;
+    }
 
-  .editable-cell-icon {
-    margin-top: 4px;
-    display: none;
-  }
+    .editable-cell-icon,
+    .editable-cell-icon-check {
+      position: absolute;
+      right: 0;
+      width: 20px;
+      cursor: pointer;
+    }
 
-  .editable-cell-icon-check {
-    line-height: 28px;
-  }
+    .editable-cell-icon-check {
+      line-height: 28px;
+    }
 
-  .editable-cell-icon:hover,
-  .editable-cell-icon-check:hover {
-    color: #108ee9;
-  }
+    .editable-cell-icon-check:hover {
+      color: #108ee9;
+    }
 
-  .editable-add-btn {
-    margin-bottom: 8px;
+    .editable-add-btn {
+      margin-bottom: 8px;
+    }
   }
-}
-.editable-cell:hover .editable-cell-icon {
-  display: inline-block;
-}
 </style>