财务统计图表数据对接及表格修改

apis/finance.js

@@ -11,13 +11,26 @@ export const apply = params => http.post(`${finance}/apply`, params);
 export const audit = params => http.post(`${finance}/audit`, params);
 
 // 查询申请详情
-export const getApplyDetail = params => http.post(`${finance}/getApplyDetail`, params);
+export const getApplyDetail = params =>
+  http.post(`${finance}/getApplyDetail`, params);
 
 // 通过任务id查看任务关联的财务信息
 export const getByTask = params => http.post(`${finance}/getByTask`, params);
 
 // 查看当前用户的费用申请历史信息（奖金）
-export const personalHistory = params => http.post(`${finance}/personalHistory`, params);
+export const personalHistory = params =>
+  http.post(`${finance}/personalHistory`, params);
 
 // 查询费用申请类型
 export const queryType = params => http.post(`${finance}/queryType`, params);
+
+// 任务支出统计
+export const taskExpense = params =>
+  http.post(`${finance}/taskExpense`, params);
+
+// 名目支出统计
+export const rowExpense = params => http.post(`${finance}/rowExpense`, params);
+
+// 成员财务统计
+export const memberFinance = params =>
+  http.post(`${finance}/memberFinance`, params);

components/Expenditure.vue

@@ -0,0 +1,168 @@
+<template>
+  <div v-if="data.info.length">
+    <div class="w-full overflow-x-scroll">
+      <table class="text-gray-500 mt-4 text-xs" v-if="props.id === 'taskTable'">
+        <tr class="bg-gray-100">
+          <td width="20%">任务名称</td>
+          <td width="16%">支出</td>
+          <td width="16%">占比</td>
+          <td width="16%">追加</td>
+          <td width="16%">操作</td>
+        </tr>
+        <tr v-for="item in data.info">
+          <td>{{ item.taskName }}</td>
+          <td>{{ item.money }}</td>
+          <td>{{ item.percentage }}%</td>
+          <td>
+            <div v-if="!item.showField" @click="item.showField = true">
+              {{ item.budget - 0 }}
+            </div>
+            <van-field
+              v-else
+              v-model="item.budget"
+              type="number"
+              class="input-box"
+              @change="handleUpdateBudget(item)"
+              @blur="item.showField = false"
+            />
+          </td>
+          <td>
+            <van-icon name="plus" @click="toApplication" />
+          </td>
+        </tr>
+      </table>
+      <table class="text-gray-500 mt-4 text-xs" v-if="props.id === 'nameTable'">
+        <tr class="bg-gray-100">
+          <td width="15%">任务名称</td>
+          <td width="16%">预算(元)</td>
+          <td width="16%">占比(元)</td>
+        </tr>
+        <tr v-for="item in data.info">
+          <td>{{ item.rowName }}</td>
+          <td>{{ item.percentage }}</td>
+          <td>{{ item.money }}</td>
+        </tr>
+      </table>
+    </div>
+    <div class="w-1/2 mt-4 ml-48">
+      <van-pagination
+        v-model="data.pageNum"
+        :items-per-page="data.pageSize"
+        :page-count="data.pages"
+        mode="simple"
+      />
+    </div>
+  </div>
+  <van-empty v-else description="暂无数据" />
+  <van-dialog
+    v-model:show="data.show"
+    title="追加预算"
+    show-cancel-button
+    @confirm="handleAdd"
+  >
+    <van-field
+      :border="data.border"
+      v-model="data.appendBudget"
+      type="textarea"
+      class="appendBudget"
+      placeholder="追加预算"
+    />
+  </van-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, nextTick } from 'vue';
+import { taskExpense, rowExpense } from 'apis/finance';
+import { addBudget } from 'apis/projectFinance';
+
+const projectId = useProjectId();
+const router = useRouter();
+
+const props = defineProps({
+  id: { type: Object, default: () => {} },
+});
+console.log('props.id: ', props.id);
+const data = reactive({
+  info: [],
+  pageNum: 1,
+  pageSize: 10,
+  pages: 0,
+  show: false,
+  appendBudget: '',
+  auditInfo: {},
+  border: true,
+});
+
+// 追加预算确认
+async function handleUpdateBudget(item) {
+  try {
+    const params = {
+      param: {
+        appendBudget: item.budget - 0,
+        financeId: item.financeId,
+        projectId: projectId.value,
+      },
+    };
+    await addBudget(params);
+  } catch (error) {
+    console.error('error: ', error);
+  }
+}
+
+// 操作,跳转到发起申请界面
+function toApplication() {
+  const routeValue = router.currentRoute.value;
+  const query = routeValue.query;
+  router.push({ path: '/Initiate-application', query });
+}
+
+// 获取echarts图表数据(任务支出)
+async function getTaskExpense() {
+  const params = { param: { projectId: projectId.value } };
+  const res = await taskExpense(params);
+  for (let i = 0; i < res.length; i++) {
+    res.showField = false;
+  }
+  data.info = res;
+}
+// 获取echarts图表数据(名目支出)
+async function getRowExpense() {
+  const params = { param: { projectId: projectId.value } };
+  const res = await rowExpense(params);
+  data.info = res;
+}
+function setData() {
+  if (props.id === 'taskTable') {
+    getTaskExpense();
+  } else if (props.id === 'nameTable') {
+    getRowExpense();
+  }
+}
+onMounted(() => {
+  nextTick(() => {
+    // handleFinanceOfProject();
+    setData();
+  });
+});
+</script>
+
+<style scoped lang="less">
+table {
+  width: 120%;
+  td {
+    border: 0.5px solid #ccc;
+    padding: 0.5rem;
+  }
+}
+.input-box {
+  padding: 0 !important;
+  border-bottom: 1px solid #ccc;
+}
+
+.appendBudget {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin: 5%;
+  width: 90%;
+}
+</style>

components/RingEcharts.vue

@@ -3,52 +3,106 @@
   <div :id="props.id" style="width: 400px; height: 260px"></div>
 </template>
 
-
 <script setup>
 import { onMounted } from 'vue';
-const props = defineProps({ id: { type: Object, default: () => {} } });
+import { taskExpense, rowExpense, memberFinance } from 'apis/finance';
-
+import { list } from 'postcss';
-onMounted(()=>{
+const projectId = useProjectId();
-  if(props.id){
-      var myChart = echarts.init(document.getElementById(props.id));
-  }
 
-  //
+const props = defineProps({
-  const data = [
+  id: { type: Object, default: () => {} },
+});
+let oData = [
   {
     name: '办公费',
     value: 36,
-            rate: 12
+    rate: 12,
   },
   {
     name: '车辆费用',
     value: 20,
-            rate: 20
+    rate: 20,
   },
   {
-            name: '差旅费',
+    name: '差旅费33',
     value: 15,
-            rate: -40
+    rate: -40,
   },
   {
     name: '租赁费',
     value: 10,
-            rate: -15
+    rate: -15,
   },
   {
     name: '其他',
     value: 9,
-            rate: 12
+    rate: 12,
   },
 ];
+// 获取echarts图表数据(任务支出)
+async function getTaskExpense() {
+  const params = { param: { projectId: projectId.value } };
+  const res = await taskExpense(params);
+  return changeData(res, 'taskName');
+}
+// 获取echarts图表数据(名目支出)
+async function getRowExpense() {
+  const params = { param: { projectId: projectId.value } };
+  const res = await rowExpense(params);
+  return changeData(res, 'rowName');
+}
+// 获取echarts图表数据(成员财务)
+async function getMemberFinance() {
+  const params = { param: { projectId: projectId.value } };
+  const res = await memberFinance(params);
+  return changeData(res, 'memberName');
+}
+// 修改数据为optionData
+function changeData(list, name) {
+  let optionsData = [];
+  for (let i = 0; i < list.length; i++) {
+    const data = {
+      name: list[i][name],
+      value: list[i].money - 0,
+      percentage: list[i].percentage,
+    };
+    optionsData.push(data);
+  }
+  return optionsData;
+}
+function setData() {
+  if (props.id === 'taskEcharts') {
+    return getTaskExpense();
+  } else if (props.id === 'nameEcharts') {
+    return getRowExpense();
+  } else if (props.id === 'memberEcharts') {
+    return getMemberFinance();
+  } else {
+    return oData;
+  }
+}
+
+function getTitleNum(list) {
+  let num = 0;
+  for (let i = 0; i < list.length; i++) {
+    num += list[i].value;
+  }
+  return num;
+}
+onMounted(async () => {
+  if (props.id) {
+    var myChart = echarts.init(document.getElementById(props.id));
+  }
+  const data = await setData();
+  const title = getTitleNum(data);
   const option = {
     title: {
-        text: 100,
+      text: title,
       textStyle: {
         fontSize: 17,
-            color:"black"
+        color: 'black',
       },
-        textAlign:"center",
+      textAlign: 'center',
       x: '24%',
       y: '35%',
     },
@@ -70,19 +124,19 @@ onMounted(()=>{
             verticalAlign: 'right',
             align: 'left',
             width: 50,
-                    fontSize: 12
+            fontSize: 12,
           },
           value: {
             align: 'left',
             width: 40,
-                    fontSize: 12
+            fontSize: 12,
           },
           count: {
             align: 'left',
             width: 80,
-                    fontSize: 12
+            fontSize: 12,
+          },
         },
-            }
       },
       data: data.map(item => item.name),
       formatter: function (name) {
@@ -94,18 +148,19 @@ onMounted(()=>{
                 name +
                 '}  | ' +
                 '{value| ' +
-                            data[i].value +
+                data[i].percentage +
                 '%}' +
                 '{count| ' +
                 data[i].value +
                 '} '
-                        )
+              );
-                    }
             }
           }
         }
       },
-    series: [{
+    },
+    series: [
+      {
         name: '数量',
         type: 'pie',
         radius: ['40%', '55%'],
@@ -121,28 +176,26 @@ onMounted(()=>{
                 align: 'center',
                 verticalAlign: 'middle',
                 padding: 8,
-                        fontSize: 30
+                fontSize: 30,
               },
               value: {
                 align: 'center',
                 verticalAlign: 'middle',
-                        fontSize: 20
+                fontSize: 20,
-                    }
+              },
-                }
+            },
           },
         },
         labelLine: {
           normal: {
-                show: true
+            show: true,
-            }
+          },
-        }
+        },
-    }]
+      },
+    ],
   };
   myChart.setOption(option);
-
+});
-})
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

pages/index.vue

@@ -36,12 +36,24 @@
           <div class="h-64 overflow-hidden">
             <div class="mt-5 flex justify-between">
               <div>
-                <span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
+                <span
+                  class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"
+                ></span>
                 <span>任务支出统计</span>
               </div>
               <div>
-                <van-button :type="taskState ? 'primary' : 'default'" size="mini" @click="taskState = true">图表</van-button>
+                <van-button
-                <van-button :type="!taskState ? 'primary' : 'default'" size="mini" @click="taskState = false">表格</van-button>
+                  :type="taskState ? 'primary' : 'default'"
+                  size="mini"
+                  @click="taskState = true"
+                  >图表</van-button
+                >
+                <van-button
+                  :type="!taskState ? 'primary' : 'default'"
+                  size="mini"
+                  @click="taskState = false"
+                  >表格</van-button
+                >
               </div>
             </div>
             <!-- 任务支出统计的图表展示 -->
@@ -51,19 +63,31 @@
             </div>
             <!-- 任务支出统计的表格展示 -->
             <div v-show="!taskState">
-              <FinanceExamine />
+              <Expenditure class="w-full h-full" id="taskTable" />
             </div>
           </div>
           <!-- 名目支出统计 -->
           <div class="h-64 overflow-hidden">
             <div class="mt-5 flex justify-between">
               <div>
-                  <span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
+                <span
+                  class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"
+                ></span>
                 <span>名目支出统计</span>
               </div>
               <div>
-                  <van-button :type="nameState ? 'primary' : 'default'" size="mini" @click="nameState = true">图表</van-button>
+                <van-button
-                  <van-button :type="!nameState ? 'primary' : 'default'" size="mini" @click="nameState = false">表格</van-button>
+                  :type="nameState ? 'primary' : 'default'"
+                  size="mini"
+                  @click="nameState = true"
+                  >图表</van-button
+                >
+                <van-button
+                  :type="!nameState ? 'primary' : 'default'"
+                  size="mini"
+                  @click="nameState = false"
+                  >表格</van-button
+                >
               </div>
             </div>
             <!-- 名目支出统计的图表展示 -->
@@ -73,13 +97,15 @@
             </div>
             <!-- 名目支出统计的表格展示 -->
             <div v-show="!nameState">
-                <FinanceExamine />
+              <Expenditure class="w-full h-full" id="nameTable" />
             </div>
           </div>
           <!-- 成员财务图 -->
           <div class="h-64 overflow-hidden">
             <div>
-              <span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
+              <span
+                class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"
+              ></span>
               <span>成员财务图</span>
             </div>
             <RingEcharts class="w-full h-full" id="memberEcharts" />
@@ -87,7 +113,9 @@
           <!-- 时间财务图 -->
           <div class="h-72 overflow-hidden">
             <div>
-                <span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
+              <span
+                class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"
+              ></span>
               <span>时间财务图</span>
             </div>
             <BarEcharts class="w-full h-full" />
@@ -115,6 +143,7 @@ export default {
 
 <script setup>
 import { ref, onMounted, nextTick } from 'vue';
+
 const active = ref(0);
 const taskState = ref(true);
 const nameState = ref(true);
@@ -133,7 +162,6 @@ async function scrollToElementByHash() {
   document.documentElement.scrollTop = scrollDom.offsetTop;
   window.pageYOffset = scrollDom.offsetTop;
 }
-
 </script>
 
 <style lang="less">