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

apis/finance.js

@@ -1,23 +1,36 @@
-import http from 'apis/axios';
+import http from 'apis/axios';
-
+
-const apiUrl = import.meta.env.VITE_API_URL;
+const apiUrl = import.meta.env.VITE_API_URL;
-const ptccsens = `${apiUrl}/ptccsens/v1.0`;
+const ptccsens = `${apiUrl}/ptccsens/v1.0`;
-const finance = `${ptccsens}/finance`;
+const finance = `${ptccsens}/finance`;
-
+
-// 发起申请
+// 发起申请
-export const apply = params => http.post(`${finance}/apply`, params);
+export const apply = params => http.post(`${finance}/apply`, params);
-
+
-// 审批
+// 审批
-export const audit = params => http.post(`${finance}/audit`, 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);
+// 通过任务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 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

@@ -1,148 +1,201 @@
 <template>
   <!-- <div id="yield-chart"></div> -->
-  <div :id="props.id" style="width:400px;height:260px"></div>
+  <div :id="props.id" style="width: 400px; height: 260px"></div>
 </template>
 
-
 <script setup>
-import { onMounted} from 'vue';
+import { onMounted } from 'vue';
-const props = defineProps({ id: { type: Object, default: () => {} } });
+import { taskExpense, rowExpense, memberFinance } from 'apis/finance';
+import { list } from 'postcss';
+const projectId = useProjectId();
 
-onMounted(()=>{
+const props = defineProps({
-  if(props.id){
+  id: { type: Object, default: () => {} },
-      var myChart = echarts.init(document.getElementById(props.id));
+});
+let oData = [
+  {
+    name: '办公费',
+    value: 36,
+    rate: 12,
+  },
+  {
+    name: '车辆费用',
+    value: 20,
+    rate: 20,
+  },
+  {
+    name: '差旅费33',
+    value: 15,
+    rate: -40,
+  },
+  {
+    name: '租赁费',
+    value: 10,
+    rate: -15,
+  },
+  {
+    name: '其他',
+    value: 9,
+    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) {
-  const data = [
+  let num = 0;
-        {
+  for (let i = 0; i < list.length; i++) {
-            name: '办公费',
+    num += list[i].value;
-            value: 36,
+  }
-            rate: 12
+  return num;
-        },
+}
-        {
+onMounted(async () => {
-            name: '车辆费用',
+  if (props.id) {
-            value: 20,
+    var myChart = echarts.init(document.getElementById(props.id));
-            rate: 20
+  }
-        },
+  const data = await setData();
-        {
+  const title = getTitleNum(data);
-            name: '差旅费',
-            value: 15,
-            rate: -40
-        },
-        {
-            name: '租赁费',
-            value: 10,
-            rate: -15
-        },
-        {
-            name: '其他',
-            value: 9,
-            rate: 12
-        },
-    ];
   const option = {
     title: {
-        text: 100,
+      text: title,
-        textStyle:{
+      textStyle: {
-            fontSize:17,
+        fontSize: 17,
-            color:"black"
+        color: 'black',
-        },
+      },
-        textAlign:"center",
+      textAlign: 'center',
-        x: '24%',
+      x: '24%',
-        y: '35%',
+      y: '35%',
     },
     legend: {
-        type: 'plain',
+      type: 'plain',
-        icon: 'circle',
+      icon: 'circle',
-        orient: 'vertical',
+      orient: 'vertical',
-        left: '55%',
+      left: '55%',
-        top: '15%',
+      top: '15%',
-        align: 'left',
+      align: 'left',
-        itemGap: 15,
+      itemGap: 15,
-        itemWidth: 10, // 设置宽度
+      itemWidth: 10, // 设置宽度
-        itemHeight: 10, // 设置高度
+      itemHeight: 10, // 设置高度
-        symbolKeepAspect: false,
+      symbolKeepAspect: false,
-        textStyle: {
+      textStyle: {
-            color: '#000',
+        color: '#000',
-            rich: {
+        rich: {
-                name: {
+          name: {
-                    verticalAlign: 'right',
+            verticalAlign: 'right',
-                    align: 'left',
+            align: 'left',
-                    width: 50,
+            width: 50,
-                    fontSize: 12
+            fontSize: 12,
-                },
+          },
-                value: {
+          value: {
-                    align: 'left',
+            align: 'left',
-                    width: 40,
+            width: 40,
-                    fontSize: 12
+            fontSize: 12,
-                },
+          },
-                count: {
+          count: {
-                    align: 'left',
+            align: 'left',
-                    width: 80,
+            width: 80,
-                    fontSize: 12
+            fontSize: 12,
-                },
+          },
-            }
         },
-        data: data.map(item => item.name),
+      },
-        formatter: function(name) {
+      data: data.map(item => item.name),
-            if (data && data.length) {
+      formatter: function (name) {
-                for (var i = 0; i < data.length; i++) {
+        if (data && data.length) {
-                    if (name === data[i].name) {
+          for (var i = 0; i < data.length; i++) {
-                        return (
+            if (name === data[i].name) {
-                            '{name| ' +
+              return (
-                            name +
+                '{name| ' +
-                            '}  | ' +
+                name +
-                            '{value| ' +
+                '}  | ' +
-                            data[i].value +
+                '{value| ' +
-                            '%}' +
+                data[i].percentage +
-                            '{count| ' +
+                '%}' +
-                            data[i].value +
+                '{count| ' +
-                            '} '
+                data[i].value +
-                        )
+                '} '
-                    }
+              );
-                }
             }
+          }
         }
+      },
     },
-    series: [{
+    series: [
+      {
         name: '数量',
         type: 'pie',
         radius: ['40%', '55%'],
         center: ['25%', '40%'],
         data: data,
         label: {
-            normal: {
+          normal: {
-                show: false,
+            show: false,
-                position: 'center',
+            position: 'center',
-                formatter: '{text|{c}}\n{b}',
+            formatter: '{text|{c}}\n{b}',
-                rich: {
+            rich: {
-                    text: {
+              text: {
-                        align: 'center',
+                align: 'center',
-                        verticalAlign: 'middle',
+                verticalAlign: 'middle',
-                        padding: 8,
+                padding: 8,
-                        fontSize: 30
+                fontSize: 30,
-                    },
+              },
-                    value: {
+              value: {
-                        align: 'center',
+                align: 'center',
-                        verticalAlign: 'middle',
+                verticalAlign: 'middle',
-                        fontSize: 20
+                fontSize: 20,
-                    }
+              },
-                }
             },
+          },
         },
         labelLine: {
-            normal: {
+          normal: {
-                show: true
+            show: true,
-            }
+          },
-        }
+        },
-    }]
+      },
-};
+    ],
-myChart.setOption(option);
+  };
-
+  myChart.setOption(option);
-})
+});
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

pages/index.vue

@@ -32,65 +32,93 @@
             <span class="font-semibold" id="finance-statistical">财务统计</span>
             <span class="ml-2">财务明细统计查看</span>
           </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="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>
             <!-- 任务支出统计的图表展示 -->
             <div v-show="taskState">
               <!-- <van-empty description="暂无图表数据信息" /> -->
-              <RingEcharts class="w-full h-full" id="taskEcharts"/>
+              <RingEcharts class="w-full h-full" id="taskEcharts" />
             </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 class="mt-5 flex justify-between">
-                <div>
+              <div>
-                  <span class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"></span>
+                <span
-                  <span>名目支出统计</span>
+                  class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"
-                </div>
+                ></span>
-                <div>
+                <span>名目支出统计</span>
-                  <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>
-              <!-- 名目支出统计的图表展示 -->
-              <div v-show="nameState">
-                <!-- <van-empty description="暂无图表数据信息" /> -->
-                <RingEcharts class="w-full h-full" id="nameEcharts"/>
               </div>
-              <!-- 名目支出统计的表格展示 -->
+              <div>
-              <div v-show="!nameState">
+                <van-button
-                <FinanceExamine />
+                  :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>
+            <!-- 名目支出统计的图表展示 -->
+            <div v-show="nameState">
+              <!-- <van-empty description="暂无图表数据信息" /> -->
+              <RingEcharts class="w-full h-full" id="nameEcharts" />
+            </div>
+            <!-- 名目支出统计的表格展示 -->
+            <div v-show="!nameState">
+              <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"/>
+            <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"></span>
+              <span
-                <span>时间财务图</span>
+                class="inline-block w-2 h-2 border-2 border-blue-400 rounded-full mr-3"
-              </div>
+              ></span>
-              <BarEcharts class="w-full h-full"  />
+              <span>时间财务图</span>
+            </div>
+            <BarEcharts class="w-full h-full" />
           </div>
         </div>
       </van-tab>
@@ -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">
@@ -160,14 +188,14 @@ async function scrollToElementByHash() {
   border-radius: 30px 0 0 30px;
   margin-bottom: 15px;
 }
-.button{
+.button {
   padding: 0px;
-  margin:0px;
+  margin: 0px;
 }
-.van-button--mini{
+.van-button--mini {
   padding: 0.5rem 1rem;
 }
-.van-button--mini+.van-button--mini{
+.van-button--mini + .van-button--mini {
   margin-left: 0px;
 }
 </style>