项目报表修改

src/components/echarts/Rose.vue

@@ -0,0 +1,128 @@
+<template>
+    <echartsBase :option="setOption"/>
+</template>
+
+<script setup>
+import echartsBase from './index.vue'
+import { nextTick, onMounted, ref, watch } from 'vue'
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: '管理费已支出与剩余预算曲线图'
+    },
+    color: {
+        type: Array,
+        default: () => (['#4095E5', '#C25750'])
+    },
+    unit: {
+        type: String,
+        default: '元'
+    },
+    datas: {
+        type: Array,
+        default: () => ([])
+    }
+})
+
+//初始变量
+const setOption = ref({})
+const titles = ref(props.title)
+const colors = ref(props.color)
+const units = ref(props.unit)
+const datas = ref(props.datas)
+
+//创建月份
+const monthData = ref([])
+for (let i = 1; i < 13; i++) {
+    monthData.value = [...monthData.value, i + '月']
+}
+
+watch(() => [
+    props.title,
+    props.color,
+    props.unit,
+], ([title, color, unit]) => {
+    titles.value = title
+    colors.value = color
+    units.value = unit
+    setOptions()
+})
+
+//深度监听数据变化
+watch(() => [
+    props.datas,
+], ([data]) => {
+    datas.value = data
+    setDataFormat()
+}, { deep: true })
+
+
+//处理数据
+const setDataFormat = () => {
+    const data = datas.value
+    let legend = [], series = [];
+    for (let i = 0; i < data.length; i++) {
+        if (data[i].name) {
+            legend.push(data[i].name)
+            series.push({
+                name: data[i].name,
+                type: 'line',
+                stack: 'Total',
+                areaStyle: {},
+                data: data[i].value
+            })
+        }
+    }
+    setOptions(legend, series)
+}
+
+
+//设置图表
+const setOptions = (legend = [], series = []) => {
+    setOption.value = {
+       legend: {
+        left: 'top',
+         orient: 'vertical',
+  },
+  toolbox: {
+    show: true,
+    feature: {
+      mark: { show: true },
+      dataView: { show: true, readOnly: false },
+      restore: { show: true },
+      saveAsImage: { show: true }
+    }
+  },
+  series: [
+    {
+      name: 'Nightingale Chart',
+      type: 'pie',
+      radius: [50, 250],
+      center: ['50%', '50%'],
+      roseType: 'area',
+      itemStyle: {
+        borderRadius: 8
+      },
+      data: [
+        { value: 40, name: '商务佣金' },
+        { value: 38, name: '业务招待费' },
+        { value: 32, name: '工资' },
+        { value: 30, name: '五险一金' },
+        { value: 28, name: '房租' },
+        { value: 26, name: '设备采购' },
+        { value: 22, name: '礼品费' },
+        { value: 18, name: '设备维护费' }
+      ]
+    }
+  ]
+    }
+}
+
+//渲染完成
+onMounted(() => {
+    nextTick(() => {
+        setDataFormat()
+    })
+})
+</script>

src/components/echarts/StackedDouble.vue

@@ -0,0 +1,122 @@
+<template>
+    <echartsBase :option="setOption"/>
+</template>
+
+<script setup>
+import { nextTick, onMounted, ref, watch } from 'vue'
+import echartsBase from './index.vue'
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: '管理费用项目分摊占比情况'
+    },
+    color: {
+        type: Array,
+        default: () => (['#5087EC', '#68BBC4'])
+    },
+    unit: {
+        type: String,
+        default: '元'
+    },
+    datas: {
+        type: Array,
+        default: () => ([])
+    },
+    ydata:{
+         type: Array,
+         default: () => ([])
+    },
+    xdata:{
+        type: Array,
+         default: () => ([])
+    },
+    legend:{
+      type: Array,
+       default: () => ([])
+    }
+})
+
+//初始变量
+const setOption = ref({})
+const titles = ref(props.title)
+const colors = ref(props.color)
+const units = ref(props.unit)
+const datas = ref(props.datas)
+const xdatas = ref(props.xdata)
+const ydatas = ref(props.ydata)
+const legends = ref(props.legend)
+
+watch(() => [
+    props.title,
+    props.color,
+    props.unit,
+    props.xdata,
+    props.ydata,
+    props.legend,
+], ([title, color, unit,xdata,ydata,legend]) => {
+    titles.value = title
+    colors.value = color
+    units.value = unit
+    xdatas.value=xdata
+    ydatas.value=ydata
+    legends.value=legend
+    setOptions()
+})
+
+//深度监听数据变化
+watch(() => [
+    props.datas,
+], ([data]) => {
+    datas.value = data
+    setOptions()
+}, { deep: true })
+
+
+//设置图表
+const setOptions = () => {
+    setOption.value = {
+        color: colors.value,
+        title: {
+    
+  },
+  tooltip: {
+    trigger: 'axis'
+  },
+  legend: {
+    // data: ['风险暂停计划', '正常计划',]
+     data:legends.value
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: {}
+    }
+  },
+  xAxis: {
+    type: 'category',
+    // boundaryGap: false,
+   
+    data:xdatas.value,
+  },
+  yAxis: {
+    type: 'value',
+    
+  },
+
+  series:ydatas.value
+}
+}
+
+//渲染完成
+onMounted(() => {
+    nextTick(() => {
+        setOptions()
+    })
+})
+</script>

src/components/echarts/StackedLine.vue

@@ -22,6 +22,18 @@ const props = defineProps({
     datas: {
         type: Array,
         default: () => ([])
+    },
+    ydata:{
+         type: Array,
+         default: () => ([])
+    },
+    xdata:{
+        type: Array,
+         default: () => ([])
+    },
+    legend:{
+      type: Array,
+       default: () => ([])
     }
 })
 
@@ -31,15 +43,24 @@ const titles = ref(props.title)
 const colors = ref(props.color)
 const units = ref(props.unit)
 const datas = ref(props.datas)
+const xdatas = ref(props.xdata)
+const ydatas = ref(props.ydata)
+const legends = ref(props.legend)
 
 watch(() => [
     props.title,
     props.color,
     props.unit,
-], ([title, color, unit]) => {
+    props.xdata,
+    props.ydata,
+    props.legend,
+], ([title, color, unit,xdata,ydata,legend]) => {
     titles.value = title
     colors.value = color
     units.value = unit
+    xdatas.value=xdata
+    ydatas.value=ydata
+    legends.value=legend
     setOptions()
 })
 
@@ -63,7 +84,8 @@ const setOptions = () => {
     trigger: 'axis'
   },
   legend: {
-    data: ['风险暂停计划', '正常计划',]
+    // data: ['风险暂停计划', '正常计划',]
+     data:legends.value
   },
   grid: {
     left: '3%',
@@ -79,25 +101,27 @@ const setOptions = () => {
   xAxis: {
     type: 'category',
     boundaryGap: false,
-    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+    // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+    data:xdatas.value,
   },
   yAxis: {
     type: 'value'
   },
-  series: [
-    {
-      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]
-    },
-  ]
+  // series: [
+  //   {
+  //     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]
+  //   },
+  // ]
+  series:ydatas.value
 }
 }
 

src/components/echarts/WordPopulation.vue

@@ -22,6 +22,18 @@ const props = defineProps({
     datas: {
         type: Array,
         default: () => ([])
+    },
+    name:{
+          type: String,
+         default: ''
+    },
+    ydata:{
+         type: Array,
+         default: () => ([])
+    },
+    xdata:{
+        type: Array,
+         default: () => ([])
     }
 })
 
@@ -31,15 +43,24 @@ const titles = ref(props.title)
 const colors = ref(props.color)
 const units = ref(props.unit)
 const datas = ref(props.datas)
+const xdatas = ref(props.xdata)
+const ydatas = ref(props.ydata)
+const names=ref(props.name)
 
 watch(() => [
     props.title,
     props.color,
     props.unit,
-], ([title, color, unit]) => {
+    props.name,
+    props.xdata,
+    props.ydata,
+], ([title, color, unit,name,xdata,ydata]) => {
     titles.value = title
     colors.value = color
     units.value = unit
+    names.value=name
+    xdatas.value=xdata
+    ydatas.value=ydata
     setOptions()
 })
 
@@ -63,7 +84,15 @@ const setOptions = () => {
     trigger: 'axis',
     axisPointer: {
       type: 'shadow'
-    }
+    },
+    formatter:function(params){
+　　　　var relVal = params[0].name;
+　　　　for (var i = 0, l = params.length; i < l; i++) {
+　　　　　　relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value+units.value;
+　　　　}
+　　　　return relVal;
+　　}
+
   },
   legend: {},
   grid: {
@@ -75,28 +104,25 @@ const setOptions = () => {
   xAxis: {
     type: 'value',
     boundaryGap: [0, 0.01],
+   
+    axisLabel: {
+        formatter: `{value}`+units.value // 在每个x轴坐标都添加了单位
+    }
+   
   
   },
   yAxis: {
     type: 'category',
-    data: ['张三', '李四', '王五', '赵六', '陈琦', '五把'],
+    // data: ['张三', '李四', '王五', '赵六', '陈琦', '五把'],
+    data: ydatas.value,
    
   },
   series: [
     {
-      name: '任务完成率',
+      name: names.value,
       type: 'bar',
-      data: [10, 20, 40, 60, 80, 99],
-      itemStyle: {
-                    normal: {
-                        label: {
-                            show: true,
-                            formatter: function (a, b, c) {
-                                return a.data + "%";
-                            }
-                        }
-                    }
-     },
+    //   data: [10, 20, 40, 60, 80, 99],
+      data: xdatas.value,
       
     },
   

src/utils/el-table-span-method.js

@@ -0,0 +1,65 @@
+/**
+ * 合并相同数据，导出合并行所需的方法(只适合el-table)
+ * @param {Array} dataArray el-table表数据源
+ * @param {Array} mergeRowProp 合并行的列prop
+ * @param {Array} sameRuleRowProp 相同合并规则行的列prop
+ */
+ export function getSpanMethod(dataArray, mergeRowProp, sameRuleRowProp) {
+
+    /**
+     * 要合并行的数据
+     */
+    const rowspanNumObject = {};
+
+    //初始化 rowspanNumObject
+    mergeRowProp.map(item => {
+        rowspanNumObject[item] = new Array(dataArray.length).fill(1, 0, 1).fill(0, 1);
+        rowspanNumObject[`${item}-index`] = 0;
+    });
+
+    //计算相关的合并信息
+    for (let i = 1; i < dataArray.length; i++) {
+        mergeRowProp.map(key => {
+            const index = rowspanNumObject[`${key}-index`];
+            if (dataArray[i][key] === dataArray[i - 1][key]) {
+                rowspanNumObject[key][index]++;
+            } else {
+                rowspanNumObject[`${key}-index`] = i;
+                rowspanNumObject[key][i] = 1;
+            }
+
+        });
+    }
+
+    /**
+     * 添加同规则合并行的数据
+     */
+    if (sameRuleRowProp !== undefined) {
+        let k = Object.keys(rowspanNumObject).filter(key => {
+            if (!key.includes('index')) {
+                return key
+            }
+        })[0]
+        for (let prop of sameRuleRowProp) {
+            rowspanNumObject[prop] = rowspanNumObject[k]
+            rowspanNumObject[`${prop}-index`] = rowspanNumObject[`${k}-index`]
+            mergeRowProp.push(prop)
+        }
+    }
+
+    /**
+     * 导出合并方法
+     */
+    const spanMethod = function ({row, column, rowIndex, columnIndex}) {
+        if (mergeRowProp.includes(column['property'])) {
+            const rowspan = rowspanNumObject[column['property']][rowIndex];
+            if (rowspan > 0) {
+                return {rowspan: rowspan, colspan: 1}
+            }
+            return {rowspan: 0, colspan: 0}
+        }
+        return {rowspan: 1, colspan: 1}
+    };
+
+    return spanMethod;
+}

src/views/static/plan.vue

@@ -47,7 +47,7 @@
                     <HcCardItem ui="hac-card-item">
                         <HcCardItem ui="hac-card-item">
                             <div class="hc-row-echarts-box" style="height: 360px;">
-                                <WordPopulation isMonth />
+                                <WordPopulation isMonth name="任务完成率" :ydata="ydata"  :xdata="xdata" unit="%" />
                             </div>
                         </HcCardItem>
                     </HcCardItem>
@@ -55,7 +55,7 @@
                 <el-col :span="12">
                     <HcCardItem ui="hac-card-item">
                         <div class="hc-row-echarts-box" style="height: 360px;">
-                            <StackedLine isMonth />
+                            <StackedLine isMonth  :ydata="sydata"  :xdata="sxdata"  :legend="slegend"/>
                         </div>
                     </HcCardItem>
                 </el-col>
@@ -118,6 +118,8 @@ const planDatas = ref([
         value: [120, 132, 101, 134, 90, 230, 210, 210, 210, 210, 132, 101]
     },
 ])
+const ydata=ref( ['张三', '李四', '王五', '赵六', '陈琦', '五把'])
+const xdata=ref( [10, 20, 40, 60, 80, 99])
 const planDatas1=ref([])
 const legend=ref(
     {
@@ -129,6 +131,22 @@ const legend=ref(
         }
    	},
 )
+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 sxdata=ref(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'])
+const slegend=ref( ['风险暂停计划', '正常计划',])
 </script>
 <style lang="scss" scoped>
 @import "~src/styles/home/index.scss";

src/views/static/project.vue

@@ -78,14 +78,25 @@
                                     <span class="text-blue text-hover" @click="rowNameClick(row)">{{row.name}}</span>
                                 </template>
                             </HcTable> -->
-                            <el-table :data="tableData" border style="width: 100%" v-if="!isProject" :span-method="objectSpanMethod">
-                                <el-table-column prop="name" label="项目名称"  />
-                                <el-table-column prop="contract" label="合同额（万）"  />
-                                <el-table-column prop="cost" label="成本预算（万）"  />
-                                <el-table-column prop="disbursed" label="已支出成本（万）"  />
-                                <el-table-column prop="receive" label="已回款（万）"  />
-                                <el-table-column prop="uncollected" label="未回款（万）"  />
-                                <el-table-column prop="total" label="总计（万）"  />
+                            <el-table :data="tableData" border style="width: 100%" 
+                            v-if="!isProject" 
+                            :span-method="spanMethod" 
+                            :cell-style="columnStyle"
+                            :header-cell-style="tableHeaderColor"
+                            >
+                                <el-table-column prop="name" label="项目名称">
+                                   <template #default="scope">
+                                        <div @click='rowNameClick(scope.row)'>
+                                             <span class="text-blue text-hover" @click="rowNameClick(scope.row)"> {{scope.row.name}}</span>
+                                        </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>
                             <div class="project_table" v-else>
                                 <div class="project_table_title">
@@ -94,21 +105,61 @@
                                     <HcIcon name="arrow-left-double" class="goback_icon" @click="showPrice" v-if="isShowDetailtable===3"/>
                                     XXX项目
                                 </div>
-                                <HcTable :column="protableColumn" :datas="protableData" v-if="isShowDetailtable===1">
-                                    <template #detail="{row}">
-                                        <span class="text-blue text-hover" @click="rowDetail(row)">查看明细</span>
-                                    </template>
-                                </HcTable>
-                                <HcTable :column="priceColumn" :datas="priceData" v-if="isShowDetailtable===2">
-                                    <template #detail="{row}">
-                                        <span class="text-blue text-hover" @click="rowpriceDetail(row)">查看明细</span>
-                                    </template>
-                                </HcTable>
-                                <HcTable :column="costColumn" :datas="costData" v-if="isShowDetailtable===3">
-                                    <template #detail="{row}">
-                                        <span class="text-blue text-hover">成本明细</span>
-                                    </template>
-                                </HcTable>
+                                     <el-table :data="protableData" border style="width: 100%" 
+                                        v-if="isShowDetailtable===1"
+                                        >
+                                         
+                                            <el-table-column prop="link" 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="timecost" label="时间成本（工作日）"  align="center"  />
+                                            <el-table-column prop="peoplecost" label="人员投入（人）"  align="center"  />
+    
+                                            <el-table-column prop="detail" label="明细">
+                                            <template #default="scope">
+                                                    <div @click='rowDetail(scope.row)'>
+                                                        <span class="text-blue text-hover">查看明细</span>
+                                                    </div>
+                                             </template>
+                                            </el-table-column>
+                                    </el-table>
+                                   <el-table :data="priceData" border style="width: 100%" 
+                                    v-if="isShowDetailtable===2"
+                                    :span-method="pricespanMethod" 
+                                    :cell-style="pricecolumnStyle"
+                                    :header-cell-style="pricetableHeaderColor"
+                                    >
+                                    <el-table-column prop="pricetype" label="费用分类">
+                                    </el-table-column>
+                                    <el-table-column prop="price" label="费用（元）"  align="center"  />
+
+                                    <el-table-column prop="detail" label="费用明细"  align="center">
+                                            <template #default="scope">
+                                                    <div @click='rowpriceDetail(scope.row)'>
+                                                        <span class="text-blue text-hover">查看明细</span>
+                                                    </div>
+                                             </template>
+                                     </el-table-column>
+                                    <el-table-column prop="total" label="总计"  align="center"  />
+                                  </el-table>
+                
+                                      <el-table :data="costData" border style="width: 100%" 
+                                        v-if="isShowDetailtable===3"
+                                        :span-method="costspanMethod" 
+                                        :cell-style="costcolumnStyle"
+                                        :header-cell-style="costtableHeaderColor"
+                                        >
+                                        <el-table-column prop="costobject" label="成本投入对象">
+                                        </el-table-column>
+                                        <el-table-column prop="price" label="费用（元）"  align="center"  />
+
+                                        <el-table-column prop="total" label="总计"  align="center"  />
+                                  </el-table>
                             </div>
                           
                         </div>
@@ -147,11 +198,11 @@
                                         </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-8" >
@@ -161,8 +212,8 @@
                                                     <template #header>
                                                         <div class="hac-card-title">回款排行榜</div>
                                                     </template>
-                                                    <div class="hc-row-echarts-box" style="height: 360px;" >
-                                                        <WordPopulation isMonth />
+                                                    <div class="hc-row-echarts-box" style="height: 300px;" >
+                                                        <WordPopulation isMonth  name="已回款" :ydata="ydata"  :xdata="xdata" unit="元"/>
                                                     </div>
                                                 </HcCardItem>
                                        
@@ -170,10 +221,10 @@
                                         <el-col :span="12">
                                             <HcCardItem ui="hac-card-item">
                                                 <template #header>
-                                                        <div class="hac-card-title">支出回款对比</div>
+                                                        <div class="hac-card-title">支出/回款对比</div>
                                                 </template>
-                                                <div class="hc-row-echarts-box" style="height: 360px;">
-                                                    <StackedLine isMonth />
+                                                <div class="hc-row-echarts-box" style="height: 300px;">
+                                                    <StackedLine isMonth :ydata="sydata"  :xdata="sxdata"  :legend="slegend"/>
                                                 </div>
                                             </HcCardItem>
                                         </el-col>
@@ -181,7 +232,67 @@
                             </div>
                            
                         </div>
-                        <div v-else>11111</div>
+                        <div v-else  >
+                            <div v-if="isShowDetailtable===1">
+                                      <div class="hc-main-row" v-if="tabsKey==='excel'">
+                                        <el-row :gutter="14" class="mt-8" >
+                                                <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" class="mt-8" >
+                                                <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" class="mt-8" >
+                                                <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>
@@ -200,8 +311,14 @@ import ShouImg from "~src/assets/images/shou.png";
 import ZhiImg from "~src/assets/images/zhi.png";
 import Zhi1Img from "~src/assets/images/zhi1.png";
 import StackedLine from "~com/echarts/StackedLine.vue";
- import WordPopulation from "~com/echarts/WordPopulation.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";
 import {ref} from "vue";
+
+
 //类型处理
 const tabsKey = ref('image')
 const tabsData = ref([
@@ -212,37 +329,41 @@ const tabsData = ref([
 const tabsClick = (key) => {
     tabsKey.value = key
 }
-//合并
-const objectSpanMethod=()=>{
-    
-}
-const tableColumn = [
-    {key: 'name', name: '项目名称'},
-    {key: 'text', name: '合同额（万）'},
-    {key: 'text', name: '成本预算（万）'},
-    {key: 'text', name: '已支出成本（万）'},
-    {key: 'text', name: '已回款（万）'},
-    {key: 'text', name: '未回款（万）'},
-    {key: 'text', name: '总计（万）'},
-]
+
+
+
 const tableData = ref([
     {name: '延长高速公路大蒲柴河至烟筒山段PPP项目', contract: '222', cost: 'red',disbursed:'1111',receive:'1111',uncollected:'2222',total:10000},
     {name: '延长高速公路大蒲柴河至烟筒山段PPP项目', contract: '222', cost: 'red',disbursed:'1111',receive:'1111',uncollected:'2222',total:10000},
     {name: '延长高速公路大蒲柴河至烟筒山段PPP项目', contract: '222', cost: 'red',disbursed:'1111',receive:'1111',uncollected:'2222',total:10000},
 ])
-const protableColumn = [
-    {key: 'name', name: '项目环节'},
-    {key: 'text', name: '状态'},
-    {key: 'text', name: '成本支出（万）'},
-    {key: 'text', name: '时间成本（工作日）'},
-    {key: 'text', name: '人员投入（万）'},
-    {key: 'detail', name: '明细'},
-   
-]
+//合并
+const spanMethod=ref(
+      getSpanMethod(tableData.value,['id'],['total'])
+)
+const columnStyle = ({ row, column, rowIndex, columnIndex }) => {
+      // 状态列字体颜色
+      // columnIndex 列下标
+      // rowIndex 行下标
+      // row 行
+      // column 列
+     if ( columnIndex === 6) {
+        return {background:"rgba(64, 149, 229, 0.44)",fontSize:"24px" };
+      
+    }
+}
+// 更改表头样式
+const tableHeaderColor= ({ row, column, rowIndex, columnIndex })=> {
+   if (columnIndex ===6 ) {
+     return {background:"rgba(64, 149, 229, 0.44)" };
+   }
+}
+
 const protableData = ref([
-    {name: '名称1', text: '文本1', color: 'red'},
-    {name: '名称2', text: '文本2', color: 'blue'},
-    {name: '名称3', text: '文本3', color: '无'}
+    {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},
 ])
 const isProject=ref(false)
 const rowNameClick=(row)=>{
@@ -257,24 +378,37 @@ const showAllexcel=()=>{
 const showDetail=()=>{
     isShowDetailtable.value=1
 }
-const isShowDetailtable=ref(1)
+const isShowDetailtable=ref()
 const rowDetail=()=>{
     isShowDetailtable.value=2
 }
 
 //费用明细
 
-const priceColumn = [
-    {key: 'name', name: '费用分类'},
-    {key: 'text', name: '费用（元）'},
-    {key: 'detail', name: '费用明细'},
-   
-]
 const priceData = ref([
-    {name: '名称1', text: '文本1', color: 'red'},
-    {name: '名称2', text: '文本2', color: 'blue'},
-    {name: '名称3', text: '文本3', color: '无'}
+    {pricetype: '商务佣金', price: '2365', total: '8858'},
+    {pricetype: '商务佣金', price: '2365', total: '8858'},
+    {pricetype: '商务佣金', price: '2365', total: '8858'},
+    {pricetype: '商务佣金', price: '2365', total: '8858'},
+
 ])
+
+//合并
+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" };
+      
+    }
+}
+// 更改表头样式
+const pricetableHeaderColor= ({ row, column, rowIndex, columnIndex })=> {
+   if (columnIndex ===3 ) {
+     return {background:"rgba(64, 149, 229, 0.44)" };
+   }
+}
 const rowpriceDetail=()=>{
     isShowDetailtable.value=3
 }
@@ -282,17 +416,78 @@ const showPrice=()=>{
     isShowDetailtable.value=2
 }
 //成本明细cost
-const costColumn = [
-    {key: 'name', name: '成本投入对象'},
-    {key: 'text', name: '费用（元）'},
- 
-   
-]
+
 const costData = ref([
-    {name: '名称1', text: '文本1', color: 'red'},
-    {name: '名称2', text: '文本2', color: 'blue'},
+    {costobject: '陆秀贤', price: '2222', total: '45689'},
+    {costobject: '陆秀贤', price: '2222', total: '45689'},
+    {costobject: '陆秀贤', price: '2222', total: '45689'},
+    {costobject: '陆秀贤', price: '2222', total: '45689'},
    
 ])
+//合并
+const costspanMethod=ref(
+      getSpanMethod(costData.value,['id'],['total'])
+)
+const costcolumnStyle = ({ row, column, rowIndex, columnIndex }) => {
+     if ( columnIndex === 2) {
+        return {background:"rgba(64, 149, 229, 0.44)",fontSize:"24px" };
+      
+    }
+}
+// 更改表头样式
+const costtableHeaderColor= ({ row, column, rowIndex, columnIndex })=> {
+   if (columnIndex ===2 ) {
+     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";