From 081f0729f4a6256e067f198d12b75f1161fb63bd Mon Sep 17 00:00:00 2001
From: Min5203 <2318556978@qq.com>
Date: Wed, 26 Jan 2022 16:12:31 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=9F=B1=E7=8A=B6=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BarEcharts.vue            | 57 ++++++++++------------------
 components/BonusCollection.vue       |  2 +-
 components/HistoricalApplication.vue |  2 +-
 components/RingEcharts.vue           |  5 ---
 pages/Initiate-application.vue       |  2 -
 pages/index.vue                      |  7 +++-
 6 files changed, 27 insertions(+), 48 deletions(-)

diff --git a/components/BarEcharts.vue b/components/BarEcharts.vue
index ea31046..ced2ee3 100644
--- a/components/BarEcharts.vue
+++ b/components/BarEcharts.vue
@@ -1,5 +1,5 @@
 <template>
-<div id="barEcharts" style="width:370px;height:300px"></div>
+<div id="barEcharts" style="width:380px;height:350px"></div>
 </template>
 <script setup>
 import{onMounted} from 'vue';
@@ -10,27 +10,28 @@ onMounted(()=>{
   tooltip: {
     trigger: 'axis',
     axisPointer: {
-      // Use axis to trigger tooltip
-      type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+      type: 'shadow',
     },
   },
   legend: {
+    top:10,
+    right:0,
     icon: 'circle',
     orient: 'horizontal',
-    itemGap: 40,
-    itemWidth: 14,
+    itemGap: 10,
+    itemWidth: 10,
     itemHeight: 14,
     textStyle: {
       fontSize: 14,
       color: '#858585',
       fontWeight: 400,
-      padding: [4, 0, 0, 0],
     },
-    data: ['A', 'B', 'P', 'E'],
+
   },
+  data: ['任务一', '任务二', '任务三', '任务四'],
   color: ['#7E84A3', '#FF914C', '#5189F8', '#3FC7BB'],
   grid: {
-    left: '3%',
+    left: '10%',
     right: '0',
     bottom: '5%',
     containLabel: false,
@@ -58,67 +59,49 @@ onMounted(()=>{
   },
   series: [
     {
-      name: 'E',
+      name: '任务四',
       type: 'bar',
       stack: 'total',
       label: {
-        show: true,
+        show: false,
         color: '#FFFFFF',
-        formatter: function (e) {
-          return e.value ? e.seriesName : '';
-        }
       },
       itemStyle: {
-        borderRadius: [0, 0, 4, 4],
-      },
-      barWidth: 20,
-      emphasis: {
-        focus: 'series',
+        borderRadius: [0, 0, 0, 0],
       },
+      barWidth: 12,
       data: [320, 80, 301, 334, 390, 330, 320, 390, 330, 320, 390, 390],
     },
     {
-      name: 'P',
+      name: '任务三',
       type: 'bar',
       stack: 'total',
       label: {
-        show: true,
+        show: false,
         color: '#FFFFFF',
-        formatter: '{a}',
-      },
-      emphasis: {
-        focus: 'series',
       },
       data: [120, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330],
     },
     {
-      name: 'B',
+      name: '任务二',
       type: 'bar',
       stack: 'total',
       label: {
-        show: true,
+        show: false,
         color: '#FFFFFF',
-        formatter: '{a}',
-      },
-      emphasis: {
-        focus: 'series',
       },
       data: [18, 66, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330],
     },
     {
-      name: 'A',
+      name: '任务一',
       type: 'bar',
       stack: 'total',
       label: {
-        show: true,
+        show: false,
         color: '#FFFFFF',
-        formatter: '{a}',
       },
       itemStyle: {
-        borderRadius: [4, 4, 0, 0],
-      },
-      emphasis: {
-        focus: 'series',
+        borderRadius: [0, 0, 0, 0],
       },
       data: [150, 212, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330],
     },
diff --git a/components/BonusCollection.vue b/components/BonusCollection.vue
index a5a4fa3..696c326 100644
--- a/components/BonusCollection.vue
+++ b/components/BonusCollection.vue
@@ -17,7 +17,7 @@
             {{ (+item.money / 100).toFixed(2) }}
           </td>
           <td>
-            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD HH:mm') }}
+            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD') }}
           </td>
           <td>
             {{ item.remark }}
diff --git a/components/HistoricalApplication.vue b/components/HistoricalApplication.vue
index 5ec705b..c2086fd 100644
--- a/components/HistoricalApplication.vue
+++ b/components/HistoricalApplication.vue
@@ -26,7 +26,7 @@
             /> -->
           </td>
           <td>
-            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD HH:mm') }}
+            {{ dayjs(item.submitTime - 0).format('YYYY/MM/DD') }}
           </td>
           <td>
             <!-- <div v-if="!item.showBonusEdit" @click="item.showBonusEdit = true"> -->
diff --git a/components/RingEcharts.vue b/components/RingEcharts.vue
index 781c268..07ec4a7 100644
--- a/components/RingEcharts.vue
+++ b/components/RingEcharts.vue
@@ -18,27 +18,22 @@ onMounted(()=>{
         {
             name: '办公费',
             value: 36,
-            rate: 12
         },
         {
             name: '车辆费用',
             value: 20,
-            rate: 20
         },
         {
             name: '差旅费',
             value: 15,
-            rate: -40
         },
         {
             name: '租赁费',
             value: 10,
-            rate: -15
         },
         {
             name: '其他',
             value: 9,
-            rate: 12
         },
     ];
   const option = {
diff --git a/pages/Initiate-application.vue b/pages/Initiate-application.vue
index c30c1f7..1d908c2 100644
--- a/pages/Initiate-application.vue
+++ b/pages/Initiate-application.vue
@@ -1,7 +1,5 @@
 <template>
   <div>
-    <!-- 导航返回上一页 -->
-    <van-nav-bar title="发起申请" left-arrow @click-left="onClickLeft" />
     <!-- 申请发票需要输入的数据 -->
     <div class="bg-white pb-3">
       <div class="text-gray-500 px-4 py-3 font-semibold">发票信息</div>
diff --git a/pages/index.vue b/pages/index.vue
index de2eda2..0e78d2c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -85,12 +85,15 @@
             <RingEcharts class="w-full h-full" id="memberEcharts"/>
           </div>
           <!-- 时间财务图 -->
-          <div class="h-72 overflow-hidden">
+          <div class="overflow-hidden">
               <div>
                 <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"  />
+              <BarEcharts class="w-full h-full mt-5"  />
+
+              <!-- 没有数据展示空组件 -->
+              <!-- <van-empty description="暂无图表数据信息" /> -->
           </div>
         </div>
       </van-tab>

From 5b4043ba091298eafc038f16d9d915f6a4b29bee Mon Sep 17 00:00:00 2001
From: Min5203 <2318556978@qq.com>
Date: Wed, 26 Jan 2022 16:39:02 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E8=B4=A2=E5=8A=A1=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E6=9F=B1=E7=8A=B6=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/RingEcharts.vue   |  3 +-
 pages/financial-approval.vue | 93 ++++++++++++++++++++++++++++++------
 pages/index.vue              |  4 --
 3 files changed, 80 insertions(+), 20 deletions(-)

diff --git a/components/RingEcharts.vue b/components/RingEcharts.vue
index 07ec4a7..4a49479 100644
--- a/components/RingEcharts.vue
+++ b/components/RingEcharts.vue
@@ -6,14 +6,13 @@
 
 <script setup>
 import { onMounted} from 'vue';
-const props = defineProps({ id: { type: Object, default: () => {} } });
+const props = defineProps({ id: { type: String, default: () => {} } });
 
 onMounted(()=>{
   if(props.id){
       var myChart = echarts.init(document.getElementById(props.id));
   }
 
-  //
   const data = [
         {
             name: '办公费',
diff --git a/pages/financial-approval.vue b/pages/financial-approval.vue
index d82c212..b90d81e 100644
--- a/pages/financial-approval.vue
+++ b/pages/financial-approval.vue
@@ -9,12 +9,77 @@
         <FinanceExamine />
       </div>
       <!-- 财务统计页面 -->
-      <div class="bg-white p-4 mt-5 flex text-gray-500 flex-col d_jump">
-        <div>
-          <span class="font-semibold" id="finance-statistical">财务统计</span> <span class="ml-2 text-xs">财务明细统计查看</span>
+       <div class="bg-white p-4 mt-5 text-gray-500 flex-col">
+          <div>
+            <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>任务支出统计</span>
+              </div>
+              <div>
+                <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"/>
+            </div>
+            <!-- 任务支出统计的表格展示 -->
+            <div v-show="!taskState">
+              <FinanceExamine />
+            </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>名目支出统计</span>
+                </div>
+                <div>
+                  <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 v-show="!nameState">
+                <FinanceExamine />
+              </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>成员财务图</span>
+            </div>
+            <RingEcharts class="w-full h-full" id="memberEcharts"/>
+          </div>
+          <!-- 时间财务图 -->
+          <div class="overflow-hidden">
+              <div>
+                <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 mt-5"  />
+
+              <!-- 没有数据展示空组件 -->
+              <!-- <van-empty description="暂无图表数据信息" /> -->
+          </div>
         </div>
-        <img src="public/statistics.png" class="w-full">
-      </div>
+
+
   <ul class="menu">
     <a href="#finance-audit">财务审批</a>
     <a href="#finance-statistical">财务统计</a>
@@ -31,8 +96,8 @@ export default {
 
 <script setup>
 import {ref} from 'vue'
-const active = ref(0);
-
+const taskState = ref(true);
+const nameState = ref(true);
 
 function onClickLeft(){
   console.log('返回上一页')
@@ -51,13 +116,7 @@ function jump(index) {
 }
 </script>
 
-<style lang="less">
-.van-nav-bar__content{
-  background-color:#eee
-}
-.van-icon-arrow-left:before{
-  color: #000;
-}
+<style lang="less" scoped>
 .menu{
   position: fixed;
   right: 0;
@@ -73,4 +132,10 @@ function jump(index) {
   border-radius: 30px 0 0 30px;
   margin-bottom: 15px;
 }
+.van-button--mini{
+  padding: 0.5rem 1rem;
+}
+.van-button--mini+.van-button--mini{
+  margin-left: 0px;
+}
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index 0e78d2c..06188be 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -163,10 +163,6 @@ async function scrollToElementByHash() {
   border-radius: 30px 0 0 30px;
   margin-bottom: 15px;
 }
-.button{
-  padding: 0px;
-  margin:0px;
-}
 .van-button--mini{
   padding: 0.5rem 1rem;
 }

From 1255bd667f2b430921139691ee6af02cefbc54e0 Mon Sep 17 00:00:00 2001
From: aBin <binbin0314@126.com>
Date: Wed, 26 Jan 2022 18:15:13 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E8=B4=A2=E5=8A=A1=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E6=95=B0=E6=8D=AE=E5=AF=B9=E6=8E=A5=E5=8F=8A?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apis/finance.js            |  59 +++++---
 components/Expenditure.vue | 168 +++++++++++++++++++++
 components/RingEcharts.vue | 295 ++++++++++++++++++++++---------------
 pages/index.vue            | 100 ++++++++-----
 4 files changed, 442 insertions(+), 180 deletions(-)
 create mode 100644 components/Expenditure.vue

diff --git a/apis/finance.js b/apis/finance.js
index df55123..be5f1f6 100644
--- a/apis/finance.js
+++ b/apis/finance.js
@@ -1,23 +1,36 @@
-import http from 'apis/axios';
-
-const apiUrl = import.meta.env.VITE_API_URL;
-const ptccsens = `${apiUrl}/ptccsens/v1.0`;
-const finance = `${ptccsens}/finance`;
-
-// 发起申请
-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);
-
-// 通过任务id查看任务关联的财务信息
-export const getByTask = params => http.post(`${finance}/getByTask`, params);
-
-// 查看当前用户的费用申请历史信息（奖金）
-export const personalHistory = params => http.post(`${finance}/personalHistory`, params);
-
-// 查询费用申请类型
-export const queryType = params => http.post(`${finance}/queryType`, params);
+import http from 'apis/axios';
+
+const apiUrl = import.meta.env.VITE_API_URL;
+const ptccsens = `${apiUrl}/ptccsens/v1.0`;
+const finance = `${ptccsens}/finance`;
+
+// 发起申请
+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);
+
+// 通过任务id查看任务关联的财务信息
+export const getByTask = params => http.post(`${finance}/getByTask`, 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);
diff --git a/components/Expenditure.vue b/components/Expenditure.vue
new file mode 100644
index 0000000..6407722
--- /dev/null
+++ b/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>
diff --git a/components/RingEcharts.vue b/components/RingEcharts.vue
index 781c268..d71c1a8 100644
--- a/components/RingEcharts.vue
+++ b/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';
-const props = defineProps({ id: { type: Object, default: () => {} } });
+import { onMounted } from 'vue';
+import { taskExpense, rowExpense, memberFinance } from 'apis/finance';
+import { list } from 'postcss';
+const projectId = useProjectId();
 
-onMounted(()=>{
-  if(props.id){
-      var myChart = echarts.init(document.getElementById(props.id));
+const props = defineProps({
+  id: { type: Object, default: () => {} },
+});
+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;
   }
+}
 
-  //
-  const data = [
-        {
-            name: '办公费',
-            value: 36,
-            rate: 12
-        },
-        {
-            name: '车辆费用',
-            value: 20,
-            rate: 20
-        },
-        {
-            name: '差旅费',
-            value: 15,
-            rate: -40
-        },
-        {
-            name: '租赁费',
-            value: 10,
-            rate: -15
-        },
-        {
-            name: '其他',
-            value: 9,
-            rate: 12
-        },
-    ];
+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,
-        textStyle:{
-            fontSize:17,
-            color:"black"
-        },
-        textAlign:"center",
-        x: '24%',
-        y: '35%',
+      text: title,
+      textStyle: {
+        fontSize: 17,
+        color: 'black',
+      },
+      textAlign: 'center',
+      x: '24%',
+      y: '35%',
     },
     legend: {
-        type: 'plain',
-        icon: 'circle',
-        orient: 'vertical',
-        left: '55%',
-        top: '15%',
-        align: 'left',
-        itemGap: 15,
-        itemWidth: 10, // 设置宽度
-        itemHeight: 10, // 设置高度
-        symbolKeepAspect: false,
-        textStyle: {
-            color: '#000',
-            rich: {
-                name: {
-                    verticalAlign: 'right',
-                    align: 'left',
-                    width: 50,
-                    fontSize: 12
-                },
-                value: {
-                    align: 'left',
-                    width: 40,
-                    fontSize: 12
-                },
-                count: {
-                    align: 'left',
-                    width: 80,
-                    fontSize: 12
-                },
-            }
+      type: 'plain',
+      icon: 'circle',
+      orient: 'vertical',
+      left: '55%',
+      top: '15%',
+      align: 'left',
+      itemGap: 15,
+      itemWidth: 10, // 设置宽度
+      itemHeight: 10, // 设置高度
+      symbolKeepAspect: false,
+      textStyle: {
+        color: '#000',
+        rich: {
+          name: {
+            verticalAlign: 'right',
+            align: 'left',
+            width: 50,
+            fontSize: 12,
+          },
+          value: {
+            align: 'left',
+            width: 40,
+            fontSize: 12,
+          },
+          count: {
+            align: 'left',
+            width: 80,
+            fontSize: 12,
+          },
         },
-        data: data.map(item => item.name),
-        formatter: function(name) {
-            if (data && data.length) {
-                for (var i = 0; i < data.length; i++) {
-                    if (name === data[i].name) {
-                        return (
-                            '{name| ' +
-                            name +
-                            '}  | ' +
-                            '{value| ' +
-                            data[i].value +
-                            '%}' +
-                            '{count| ' +
-                            data[i].value +
-                            '} '
-                        )
-                    }
-                }
+      },
+      data: data.map(item => item.name),
+      formatter: function (name) {
+        if (data && data.length) {
+          for (var i = 0; i < data.length; i++) {
+            if (name === data[i].name) {
+              return (
+                '{name| ' +
+                name +
+                '}  | ' +
+                '{value| ' +
+                data[i].percentage +
+                '%}' +
+                '{count| ' +
+                data[i].value +
+                '} '
+              );
             }
+          }
         }
+      },
     },
-    series: [{
+    series: [
+      {
         name: '数量',
         type: 'pie',
         radius: ['40%', '55%'],
         center: ['25%', '40%'],
         data: data,
         label: {
-            normal: {
-                show: false,
-                position: 'center',
-                formatter: '{text|{c}}\n{b}',
-                rich: {
-                    text: {
-                        align: 'center',
-                        verticalAlign: 'middle',
-                        padding: 8,
-                        fontSize: 30
-                    },
-                    value: {
-                        align: 'center',
-                        verticalAlign: 'middle',
-                        fontSize: 20
-                    }
-                }
+          normal: {
+            show: false,
+            position: 'center',
+            formatter: '{text|{c}}\n{b}',
+            rich: {
+              text: {
+                align: 'center',
+                verticalAlign: 'middle',
+                padding: 8,
+                fontSize: 30,
+              },
+              value: {
+                align: 'center',
+                verticalAlign: 'middle',
+                fontSize: 20,
+              },
             },
+          },
         },
         labelLine: {
-            normal: {
-                show: true
-            }
-        }
-    }]
-};
-myChart.setOption(option);
-
-})
+          normal: {
+            show: true,
+          },
+        },
+      },
+    ],
+  };
+  myChart.setOption(option);
+});
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/pages/index.vue b/pages/index.vue
index de2eda2..1dd6d91 100644
--- a/pages/index.vue
+++ b/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 :type="!taskState ? 'primary' : 'default'" size="mini" @click="taskState = false">表格</van-button>
+                <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>
-                  <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 :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 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>名目支出统计</span>
               </div>
-              <!-- 名目支出统计的表格展示 -->
-              <div v-show="!nameState">
-                <FinanceExamine />
+              <div>
+                <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 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>
-                <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"  />
+            <div>
+              <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" />
           </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>

From b2373db78bcb24eb692daab5c2af12dc1b8aaf2d Mon Sep 17 00:00:00 2001
From: aBin <binbin0314@126.com>
Date: Wed, 26 Jan 2022 18:27:18 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E8=B4=A2=E5=8A=A1=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0=E6=97=B6id=E4=B8=BA0=E9=99=90=E5=88=B6?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Expenditure.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Expenditure.vue b/components/Expenditure.vue
index 6407722..08cf6e6 100644
--- a/components/Expenditure.vue
+++ b/components/Expenditure.vue
@@ -18,7 +18,7 @@
               {{ item.budget - 0 }}
             </div>
             <van-field
-              v-else
+              v-else-if="financeId - 0 !== 0 && item.showField"
               v-model="item.budget"
               type="number"
               class="input-box"