项目统计修改

src/styles/static/project.scss

@@ -1,3 +1,10 @@
+.hc-sb-table .el-tabs .el-tabs__content {
+    padding: 0;
+    background: #f1f5f8;
+    border-radius: 0 10px 10px;
+    height: calc(100vh - 320px);
+    overflow-y: auto;
+}
 .hc-card-item-sub {
     position: relative;
     padding: 20px;

src/views/static/plan.vue

@@ -43,14 +43,15 @@
                 <el-col :span="12">
                     <HcCardItem ui="hac-bg-grey">
                         <div class="h-96">
-                            <WordPopulation isMonth name="任务完成率" :ydata="ydata"  :xdata="xdata" unit="%" />
+                            <StackedLine isMonth  :ydata="sydata"  :xdata="sxdata"  :legend="slegend"/>
                         </div>
                     </HcCardItem>
                 </el-col>
                 <el-col :span="12">
                     <HcCardItem ui="hac-bg-grey">
                         <div class="h-96">
-                            <StackedLine isMonth  :ydata="sydata"  :xdata="sxdata"  :legend="slegend"/>
+                           
+                            <WordPopulation isMonth name="任务完成率" :ydata="ydata"  :xdata="xdata" unit="%" />
                         </div>
                     </HcCardItem>
                 </el-col>
@@ -74,7 +75,6 @@
     {name:'人事部门',key:1},
  ])
  const personType=ref([
-    {name:'全部',key:''},
     {name:'张三',key:1},
     {name:'李四',key:2},
     {name:'王五',key:1},
@@ -95,7 +95,7 @@ const resetClick = () => {
 //计划统计图
 const planDatas = ref([
     {
-        name: '总计划',
+        name: '任务总量',
         value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
     },
     {
@@ -113,7 +113,7 @@ const planDatas1=ref([])
 const legend=ref(
     {
 		orient: 'horizontal',
-		data:['总计划','已完成','未完成'],
+		data:['任务总量','已完成','未完成'],
 		textStyle:{
         	fontSize: 14,//字体大小
             color: 'black'//字体颜色

src/views/static/project.vue

@@ -5,7 +5,7 @@
                 <el-col :span="6">
                     <HcGradientCard color="purple1">
                         <div class="hc-card-item-sub">
-                            <div class="item-sub-title">总支出</div>
+                            <div class="item-sub-title">截至目前总合同额</div>
                             <div class="item-sub-num">
                                 <span class="num">1200</span>
                                 <span class="text">万</span>
@@ -16,7 +16,7 @@
                 <el-col :span="6">
                     <HcGradientCard color="blue1">
                         <div class="hc-card-item-sub">
-                            <div class="item-sub-title">总合同额</div>
+                            <div class="item-sub-title">截至目前项目总测算成本</div>
                             <div class="item-sub-num">
                                 <span class="num">560</span>
                                 <span class="text">万</span>
@@ -27,7 +27,7 @@
                 <el-col :span="6">
                     <HcGradientCard color="red1">
                         <div class="hc-card-item-sub">
-                            <div class="item-sub-title">总回款收入</div>
+                            <div class="item-sub-title">截至目前总实际支出成本</div>
                             <div class="item-sub-num">
                                 <span class="num">90</span>
                                 <span class="text">万</span>
@@ -38,7 +38,7 @@
                 <el-col :span="6">
                     <HcGradientCard color="purple1">
                         <div class="hc-card-item-sub">
-                            <div class="item-sub-title">总盈亏</div>
+                            <div class="item-sub-title">截至目前总回款</div>
                             <div class="item-sub-num">
                                 <span class="num">125</span>
                                 <span class="text">万</span>
@@ -47,10 +47,10 @@
                     </HcGradientCard>
                 </el-col>
             </el-row>
-            <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick" class="mt-6">
+    <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick" class="mt-6">
                 <template #tab-image>
-                    <div class="bg-white p-2">
-                        <el-table :data="tableData" border style="width: 100%"
+                    <div class="bg-white p-2" style="height: 100%;">
+                        <el-table :data="tableData" border style="width: 100%; "
                                   v-if="!isProject"
                                   :span-method="spanMethod"
                                   :cell-style="columnStyle"
@@ -63,30 +63,32 @@
                                     </div>
                                 </template>
                             </el-table-column>
-                            <el-table-column prop="contract" label="合同额（万）" align="center"/>
-                            <el-table-column prop="cost" label="成本预算（万）" align="center"/>
-                            <el-table-column prop="disbursed" label="已支出成本（万）" align="center"/>
-                            <el-table-column prop="receive" label="已回款（万）" align="center"/>
-                            <el-table-column prop="uncollected" label="未回款（万）" align="center"/>
-                            <el-table-column prop="total" label="总计（万）" align="center"/>
+                            <el-table-column prop="contract" label="合同额" align="center"/>
+                            <el-table-column prop="cost" label="测算成本" align="center"/>
+                            <el-table-column prop="disbursed" label="实际已支出成本" align="center"/>
+                            <el-table-column prop="receive" label="实际已回款" align="center"/>
+                            <el-table-column prop="uncollected" label="未回款" align="center"/>
+                           
                         </el-table>
 
                         <div class="project_table" v-else>
                             <div class="project_table_title">
-                                <HcIcon name="arrow-left-double" class="goback_icon" @click="showAllexcel" v-if="isShowDetailtable===1"/>
+                                <HcIcon name="arrow-left-double" class="goback_icon" @click="showAllexcel" v-if="isShowDetailtable===1"/> 
                                 <HcIcon name="arrow-left-double" class="goback_icon" @click="showDetail" v-if="isShowDetailtable===2"/>
                                 <HcIcon name="arrow-left-double" class="goback_icon" @click="showPrice" v-if="isShowDetailtable===3"/>
-                                XXX项目
+                                <span  v-if="isShowDetailtable===1">XXX项目</span>
+                                <span v-if="isShowDetailtable===3">XXX项目>研发部</span>
+                                <span v-if="isShowDetailtable===2">XXX项目>研发部>产品-研发</span>
                             </div>
-                            <el-table :data="protableData" border style="width: 100%" v-if="isShowDetailtable===1">
+                            <el-table :data="protableData" border style="width: 100%; "   v-if="isShowDetailtable===3">
                                 <el-table-column prop="link" label="项目环节" align="center"/>
-                                <el-table-column prop="type" label="状态" align="center">
+                                <el-table-column prop="type" label="参与" align="center">
                                     <template #default="scope">
                                         <HcIcon name="checkbox-circle" class="text-green " v-if="scope.row.type==1"/>
                                         <HcIcon name="error-warning" class="text-red " v-else/>
                                     </template>
                                 </el-table-column>
-                                <el-table-column prop="cost" label="成本支出（万）" align="center"/>
+                                <el-table-column prop="cost" label="成本支出（元）" align="center"/>
                                 <el-table-column prop="timecost" label="时间成本（工作日）" align="center"/>
                                 <el-table-column prop="peoplecost" label="人员投入（人）" align="center"/>
                                 <el-table-column prop="detail" label="明细">
@@ -97,14 +99,15 @@
                                     </template>
                                 </el-table-column>
                             </el-table>
-                            <el-table :data="priceData" border style="width: 100%"
-                                      v-if="isShowDetailtable===2"
+                            <el-table :data="priceData" border style="width: 100%;"
+                                        v-if="isShowDetailtable===1"
                                       :span-method="pricespanMethod"
                                       :cell-style="pricecolumnStyle"
                                       :header-cell-style="pricetableHeaderColor"
                             >
                                 <el-table-column prop="pricetype" label="费用分类"/>
-                                <el-table-column prop="price" label="费用（元）" align="center"/>
+                                <el-table-column prop="price" label="测算费用（元）" align="center"/>
+                                <el-table-column prop="cost" label="实际费用（元）" align="center"/>
                                 <el-table-column prop="detail" label="费用明细" align="center">
                                     <template #default="scope">
                                         <div @click='rowpriceDetail(scope.row)'>
@@ -115,147 +118,36 @@
                                 <el-table-column prop="total" label="总计" align="center"/>
                             </el-table>
                             <el-table :data="costData" border style="width: 100%"
-                                      v-if="isShowDetailtable===3"
+                                    v-if="isShowDetailtable===2"
                                       :span-method="costspanMethod"
                                       :cell-style="costcolumnStyle"
                                       :header-cell-style="costtableHeaderColor"
                             >
-                                <el-table-column prop="costobject" label="成本投入对象"/>
+                                <el-table-column prop="costobject" label="费用分类"/>
                                 <el-table-column prop="price" label="费用（元）" align="center"/>
                                 <el-table-column prop="total" label="总计" align="center"/>
                             </el-table>
                         </div>
                     </div>
                 </template>
-                <template #tab-excel>
-                    <div style="position: relative; background-color: #EBF4F6;" v-if="!isProject">
-                        <HcCardItem ui="hac-card-item">
-                            <template #header>
-                                <div class="hac-card-title">项目回款/未回款统计</div>
-                            </template>
-                            <div class="hac-card-item-body">
-                                <el-row :gutter="14">
-                                    <el-col :span="4">
-                                        <div class="hac-row-total-item">
-                                            <div class="num">1234.33</div>
-                                            <div class="text">累计总回款</div>
-                                            <div class="text">占比34%</div>
-                                        </div>
-                                    </el-col>
-                                    <el-col :span="4">
-                                        <div class="hac-row-total-item">
-                                            <div class="num">123456</div>
-                                            <div class="text">累计剩余回款</div>
-                                            <div class="text">占比34%</div>
-                                        </div>
-                                    </el-col>
-                                    <el-col :span="4">
-                                        <div class="hac-row-total-item">
-                                            <div class="num">3</div>
-                                            <div class="text">累计总项目</div>
-                                            <div class="text">占比34%</div>
-                                        </div>
-                                    </el-col>
-                                </el-row>
-                            </div>
-                            <div class="hc-row-echarts-box" style="height: 300px;margin-top:10px" v-if="tabsKey==='excel'">
-                                <StackedDouble isMonth name="已回款" :ydata="costsydata" :xdata="costxdata" :legend="costlegend" unit="元"/>
-                            </div>
-                        </HcCardItem>
-                        <div class="hc-main-row" v-if="tabsKey==='excel'">
-                            <el-row :gutter="14" class="mt-4">
-                                <el-col :span="12">
-                                    <HcCardItem ui="hac-card-item">
-                                        <template #header>
-                                            <div class="hac-card-title">回款排行榜</div>
-                                        </template>
-                                        <div class="hc-row-echarts-box" style="height: 300px;">
-                                            <WordPopulation isMonth name="已回款" :ydata="ydata" :xdata="xdata" unit="元"/>
-                                        </div>
-                                    </HcCardItem>
-                                </el-col>
-                                <el-col :span="12">
-                                    <HcCardItem ui="hac-card-item">
-                                        <template #header>
-                                            <div class="hac-card-title">支出/回款对比</div>
-                                        </template>
-                                        <div class="hc-row-echarts-box" style="height: 300px;">
-                                            <StackedLine isMonth :ydata="sydata" :xdata="sxdata" :legend="slegend"/>
-                                        </div>
-                                    </HcCardItem>
-                                </el-col>
-                            </el-row>
-                        </div>
-                    </div>
-                    <div v-else>
-                        <div v-if="isShowDetailtable===1">
-                            <div class="hc-main-row" v-if="tabsKey==='excel'">
-                                <el-row :gutter="14">
-                                    <el-col :span="24">
-                                        <HcCardItem ui="hac-card-item">
-                                            <template #header>
-                                                <div class="hac-card-title">项目投入环节占比</div>
-                                            </template>
-                                            <div class="hc-row-echarts-box" style="height: 300px;width:50%">
-                                                <SimpleChart :datas="incomeStatisticsDatas " v-if="isShowDetailtable===1"/>
-                                            </div>
-                                        </HcCardItem>
-                                    </el-col>
-                                </el-row>
-                            </div>
-                        </div>
-                        <div v-if="isShowDetailtable===2">
-                            <div class="hc-main-row" v-if="tabsKey==='excel'">
-                                <el-row :gutter="14">
-                                    <el-col :span="24">
-                                        <HcCardItem ui="hac-card-item">
-                                            <template #header>
-                                                <div class="hac-card-title">费用分类占比统计</div>
-                                            </template>
-                                            <div class="hc-row-echarts-box" style="height: 500px;">
-                                                <Rose v-if="isShowDetailtable===2"/>
-                                            </div>
-                                        </HcCardItem>
-                                    </el-col>
-                                </el-row>
-                            </div>
-                        </div>
-                        <div v-if="isShowDetailtable===3">
-                            <div class="hc-main-row" v-if="tabsKey==='excel'">
-                                <el-row :gutter="14">
-                                    <el-col :span="24">
-                                        <HcCardItem ui="hac-card-item">
-                                            <template #header>
-                                                <div class="hac-card-title">投入对象成本</div>
-                                            </template>
-                                            <div class="hc-row-echarts-box" style="height: 300px;">
-                                                <WordPopulation isMonth name="费用" :ydata="costobjectydata" :xdata="xdata" unit="元"/>
-                                            </div>
-                                        </HcCardItem>
-                                    </el-col>
-                                </el-row>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </HcTabsSimple>
+    
+          
+            </HcTabsSimple> 
+         
+      
         </div>
     </el-scrollbar>
 </template>
 <script setup>
 import {ref} from "vue";
-import StackedLine from "~com/echarts/StackedLine.vue";
-import WordPopulation from "~com/echarts/WordPopulation.vue";
-import StackedDouble from "~com/echarts/StackedDouble.vue";
-import SimpleChart from "~com/echarts/SimpleChart.vue";
-import Rose from "~com/echarts/Rose.vue";
+
 import {getSpanMethod} from "~src/utils/el-table-span-method";
 
 //类型处理
 const tabsKey = ref('image')
 const tabsData = ref([
     {icon: 'bar-chart-box', label: '列表统计', key: 'image'},
-    {icon: 'image', label: '图形统计', key: 'excel'},
+    // {icon: 'image', label: '图形统计', key: 'excel'},
 ])
 
 const tabsClick = (key) => {
@@ -319,6 +211,61 @@ const protableData = ref([
     {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
     {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
     {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '2', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+    {link: '商机-演示沟通3333333333', type: '1', cost: '11111', timecost: '121312', peoplecost: 5},
+
+    
+    
+    
+
 ])
 const isProject = ref(false)
 const rowNameClick = (row) => {
@@ -331,7 +278,7 @@ const showAllexcel = () => {
 
 }
 const showDetail = () => {
-    isShowDetailtable.value = 1
+    isShowDetailtable.value = 3
 }
 const isShowDetailtable = ref()
 const rowDetail = () => {
@@ -341,10 +288,10 @@ const rowDetail = () => {
 //费用明细
 
 const priceData = ref([
-    {pricetype: '商务佣金', price: '2365', total: '8858'},
-    {pricetype: '商务佣金', price: '2365', total: '8858'},
-    {pricetype: '商务佣金', price: '2365', total: '8858'},
-    {pricetype: '商务佣金', price: '2365', total: '8858'},
+    {pricetype: '商务佣金', price: '2365',cost:'1010' ,total: '8858'},
+    {pricetype: '商务佣金', price: '2365',cost:'1010', total: '8858'},
+    {pricetype: '商务佣金', price: '2365',cost:'1010', total: '8858'},
+    {pricetype: '商务佣金', price: '2365',cost:'1010',total: '8858'},
 
 ])
 
@@ -353,14 +300,14 @@ const pricespanMethod = ref(
     getSpanMethod(priceData.value, ['id'], ['total'])
 )
 const pricecolumnStyle = ({row, column, rowIndex, columnIndex}) => {
-    if (columnIndex === 3) {
-        return {background: "rgba(64, 149, 229, 0.44)", fontSize: "24px"};
+    if (columnIndex === 4) {
+        return {background: "rgba(64, 149, 229, 0.44)", fontSize: "24px",};
 
     }
 }
 // 更改表头样式
 const pricetableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
-    if (columnIndex === 3) {
+    if (columnIndex === 4) {
         return {background: "rgba(64, 149, 229, 0.44)"};
     }
 }
@@ -368,7 +315,7 @@ const rowpriceDetail = () => {
     isShowDetailtable.value = 3
 }
 const showPrice = () => {
-    isShowDetailtable.value = 2
+    isShowDetailtable.value = 1
 }
 //成本明细cost
 
@@ -395,59 +342,20 @@ const costtableHeaderColor = ({row, column, rowIndex, columnIndex}) => {
         return {background: "rgba(64, 149, 229, 0.44)"};
     }
 }
-//图表数据
-const ydata = ref(['西环线', '封建路', '封建路', '封建路', '西环线', '西环线'])
-const costobjectydata = ref(['陆秀贤', '陆秀贤', '陆秀贤', '陆秀贤', '陆秀贤'])
-const xdata = ref([10000, 2568, 5698, 4235, 9963, 7785])
-const sydata = ref([
-    {
-        name: '已回款',
-        type: 'line',
-        stack: 'Total',
-        data: [120, 132, 101, 134, 90, 230, 210]
-    },
-    {
-        name: '已支出',
-        type: 'line',
-        stack: 'Total',
-        data: [220, 182, 191, 234, 290, 330, 310]
-    },
-])
-const costxdata = ref(['奉建路', '西环线', '宝北路', '宝北路', '宝北路', '宝北路', '宝北路',])
-const costlegend = ref(['已回款', '未回款',])
-const costsydata = ref([
-    {
-        name: '已回款',
-        type: 'bar',
-        stack: 'Total',
-        data: [120, 132, 101, 134, 90, 230, 210]
-    },
-    {
-        name: '未回款',
-        type: 'bar',
-        stack: 'Total',
-        data: [220, 182, 191, 234, 290, 330, 310]
-    },
-])
-const sxdata = ref(['奉建路', '西环线', '宝北路', '宝北路', '宝北路', '宝北路', '宝北路',])
-const slegend = ref(['已回款', '未回款',])
 
 
-//各项目收入占比统计
-const incomeStatisticsDatas = ref([
-    {value: 1048, name: '商机-沟通演示'},
-    {value: 735, name: '合同-服务范围洽谈'},
-    {value: 580, name: '产品-研发'},
-    {value: 484, name: '产品-配置'},
-    {value: 484, name: '产品-测试'},
-])
 </script>
 <style lang="scss" scoped>
 @import "~src/styles/static/project.scss";
+.project_table{
+    height: 100%;
+}
 .project_table_title {
     margin-top: 15px;
     margin-bottom: 15px;
+   
 }
+
 .goback_icon {
     font-size: 24px;
     cursor: pointer;