时间财务统计图

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,11 +1,92 @@
 <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 projectId = useProjectId();
+
+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',
+      },
+      barWidth: 12,
+      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',
@@ -14,8 +95,8 @@ onMounted(()=>{
       },
     },
     legend: {
-    top:10,
-    right:0,
+      top: 10,
+      right: 0,
       icon: 'circle',
       orient: 'horizontal',
       itemGap: 10,
@@ -26,19 +107,18 @@ onMounted(()=>{
         color: '#858585',
         fontWeight: 400,
       },
-
     },
-  data: ['任务一', '任务二', '任务三', '任务四'],
+    data: data.taskNameList,
     color: ['#7E84A3', '#FF914C', '#5189F8', '#3FC7BB'],
     grid: {
-    left: '10%',
+      left: '15%',
       right: '0',
       bottom: '5%',
       containLabel: false,
     },
     xAxis: {
       type: 'category',
-    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+      data: data.timeList,
       axisTick: {
         show: false,
       },
@@ -57,57 +137,8 @@ onMounted(()=>{
         },
       },
     },
-  series: [
-    {
-      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],
-    },
-    {
-      name: '任务三',
-      type: 'bar',
-      stack: 'total',
-      label: {
-        show: false,
-        color: '#FFFFFF',
-      },
-      data: [120, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330],
-    },
-    {
-      name: '任务二',
-      type: 'bar',
-      stack: 'total',
-      label: {
-        show: false,
-        color: '#FFFFFF',
-      },
-      data: [18, 66, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330],
-    },
-    {
-      name: '任务一',
-      type: 'bar',
-      stack: 'total',
-      label: {
-        show: false,
-        color: '#FFFFFF',
-      },
-      itemStyle: {
-        borderRadius: [0, 0, 0, 0],
-      },
-      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"