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] =?UTF-8?q?=E8=B4=A2=E5=8A=A1=E7=BB=9F=E8=AE=A1=E6=9F=B1?=
 =?UTF-8?q?=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;
 }