时间财务统计图

apis/projectFinance.js

@@ -27,3 +27,7 @@ export const queryProjectFinance = params =>
 // 修改任务或项目的预算和奖金信息
 export const updateFinance = params =>
   http.post(`${projectFinance}/updateFinance`, params);
+
+// 时间财务图统计
+export const timeFinancialChart = params =>
+  http.post(`${projectFinance}/timeFinancialChart`, params);

components/BarEcharts.vue

@@ -1,113 +1,144 @@
 <template>
-<div id="barEcharts" style="width:380px;height:350px"></div>
+  <div id="barEcharts" style="width: 380px; height: 350px"></div>
 </template>
 <script setup>
-import{onMounted} from 'vue';
+import { onMounted } from 'vue';
+import { timeFinancialChart } from 'apis/projectFinance';
 
-onMounted(()=>{
-  const myChart = echarts.init(document.getElementById('barEcharts'));
-  const option = {
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      type: 'shadow',
-    },
-  },
-  legend: {
-    top:10,
-    right:0,
-    icon: 'circle',
-    orient: 'horizontal',
-    itemGap: 10,
-    itemWidth: 10,
-    itemHeight: 14,
-    textStyle: {
-      fontSize: 14,
-      color: '#858585',
-      fontWeight: 400,
-    },
+const projectId = useProjectId();
 
-  },
-  data: ['任务一', '任务二', '任务三', '任务四'],
-  color: ['#7E84A3', '#FF914C', '#5189F8', '#3FC7BB'],
-  grid: {
-    left: '10%',
-    right: '0',
-    bottom: '5%',
-    containLabel: false,
-  },
-  xAxis: {
-    type: 'category',
-    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
-    axisTick: {
-      show: false,
-    },
-    axisLabel: {
-      show: true,
-    },
-    axisLine: {
-      show: false,
-    },
-  },
-  yAxis: {
-    type: 'value',
-    splitLine: {
-      lineStyle: {
-        color: '#F3F4F5',
-      },
-    },
-  },
-  series: [
-    {
-      name: '任务四',
+const data = reactive({
+  timeList: [],
+  taskNameList: [],
+});
+
+async function getChartData() {
+  try {
+    const params = { param: { projectId: projectId.value } };
+    const res = await timeFinancialChart(params);
+    console.log('res:', res);
+    return processing(res);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+function processing(list) {
+  let timeList = [
+    null,
+    null,
+    null,
+    null,
+    null,
+    null,
+    null,
+    null,
+    null,
+    null,
+    null,
+    null,
+  ];
+  for (let i = 0; i < list.length; i++) {
+    for (let j = 0; j < list[i].data.length; j++) {
+      const m = list[i].data[j].time - 0;
+      timeList[m - 1] = m + '月';
+    }
+  }
+  for (let i = 0; i < timeList.length; i++) {
+    if (!timeList[i]) {
+      timeList.splice(i, 1);
+      i -= 1;
+    }
+  }
+  let series = [];
+  let taskNameList = [];
+  for (let i = 0; i < list.length; i++) {
+    let data = [];
+    taskNameList.push(list[i].name);
+    for (let k = 0; k < timeList.length; k++) {
+      data.push(null);
+    }
+    for (let k = 0; k < list[i].data.length; k++) {
+      for (let m = 0; m < timeList.length; m++) {
+        if (list[i].data[k].time - 0 + '月' === timeList[m]) {
+          data[m] = list[i].data[k].expend - 0;
+        }
+      }
+    }
+    let obj = {
+      name: list[i].name,
       type: 'bar',
       stack: 'total',
       label: {
         show: false,
         color: '#FFFFFF',
       },
-      itemStyle: {
-        borderRadius: [0, 0, 0, 0],
-      },
       barWidth: 12,
-      data: [320, 80, 301, 334, 390, 330, 320, 390, 330, 320, 390, 390],
+      data: data,
+    };
+    series.push(obj);
+  }
+  data.timeList = timeList;
+  data.taskNameList = taskNameList;
+  console.log('series: ', series);
+  return series;
+}
+
+onMounted(async () => {
+  const myChart = echarts.init(document.getElementById('barEcharts'));
+  const series = await getChartData();
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
     },
-    {
-      name: '任务三',
-      type: 'bar',
-      stack: 'total',
-      label: {
-        show: false,
-        color: '#FFFFFF',
+    legend: {
+      top: 10,
+      right: 0,
+      icon: 'circle',
+      orient: 'horizontal',
+      itemGap: 10,
+      itemWidth: 10,
+      itemHeight: 14,
+      textStyle: {
+        fontSize: 14,
+        color: '#858585',
+        fontWeight: 400,
       },
-      data: [120, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330],
     },
-    {
-      name: '任务二',
-      type: 'bar',
-      stack: 'total',
-      label: {
+    data: data.taskNameList,
+    color: ['#7E84A3', '#FF914C', '#5189F8', '#3FC7BB'],
+    grid: {
+      left: '15%',
+      right: '0',
+      bottom: '5%',
+      containLabel: false,
+    },
+    xAxis: {
+      type: 'category',
+      data: data.timeList,
+      axisTick: {
         show: false,
-        color: '#FFFFFF',
       },
-      data: [18, 66, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330],
-    },
-    {
-      name: '任务一',
-      type: 'bar',
-      stack: 'total',
-      label: {
+      axisLabel: {
+        show: true,
+      },
+      axisLine: {
         show: false,
-        color: '#FFFFFF',
       },
-      itemStyle: {
-        borderRadius: [0, 0, 0, 0],
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          color: '#F3F4F5',
+        },
       },
-      data: [150, 212, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330],
     },
-  ],
-};
-
+    series: series,
+  };
   myChart.setOption(option);
-})
+});
 </script>

components/Expenditure.vue

@@ -27,7 +27,7 @@
             />
           </td>
           <td>
-            <van-icon name="plus" @click="toApplication" />
+            <van-icon name="plus" @click="toApplication(item)" />
           </td>
         </tr>
       </table>
@@ -110,9 +110,11 @@ async function handleUpdateBudget(item) {
 }
 
 // 操作,跳转到发起申请界面
-function toApplication() {
+function toApplication(item) {
   const routeValue = router.currentRoute.value;
   const query = routeValue.query;
+  query.tn = item.taskName;
+  // console.log('query: ', query);
   router.push({ path: '/Initiate-application', query });
 }
 

pages/index.vue

@@ -111,7 +111,7 @@
             <RingEcharts class="w-full h-full" id="memberEcharts" />
           </div>
           <!-- 时间财务图 -->
-          <div class="h-72 overflow-hidden">
+          <div>
             <div>
               <span
                 class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"