From 63935d892e682e18d4a4adc0f3d9f51b8eb79383 Mon Sep 17 00:00:00 2001
From: Min5203 <2318556978@qq.com>
Date: Wed, 26 Jan 2022 14:44:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BB=9F=E8=AE=A1=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84=E9=A5=BC=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BarEcharts.vue      | 130 +++++++++++++++++++++++++++++
 components/RingEcharts.vue     | 148 +++++++++++++++++++++++++++++++++
 nuxt.config.ts                 |   5 +-
 pages/Initiate-application.vue |  39 ---------
 pages/applicant.vue            |  12 ---
 pages/index.vue                |  84 +++++++++++++++++--
 6 files changed, 357 insertions(+), 61 deletions(-)
 create mode 100644 components/BarEcharts.vue
 create mode 100644 components/RingEcharts.vue

diff --git a/components/BarEcharts.vue b/components/BarEcharts.vue
new file mode 100644
index 0000000..ea31046
--- /dev/null
+++ b/components/BarEcharts.vue
@@ -0,0 +1,130 @@
+<template>
+<div id="barEcharts" style="width:370px;height:300px"></div>
+</template>
+<script setup>
+import{onMounted} from 'vue';
+
+onMounted(()=>{
+  const myChart = echarts.init(document.getElementById('barEcharts'));
+  const option = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      // Use axis to trigger tooltip
+      type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+    },
+  },
+  legend: {
+    icon: 'circle',
+    orient: 'horizontal',
+    itemGap: 40,
+    itemWidth: 14,
+    itemHeight: 14,
+    textStyle: {
+      fontSize: 14,
+      color: '#858585',
+      fontWeight: 400,
+      padding: [4, 0, 0, 0],
+    },
+    data: ['A', 'B', 'P', 'E'],
+  },
+  color: ['#7E84A3', '#FF914C', '#5189F8', '#3FC7BB'],
+  grid: {
+    left: '3%',
+    right: '0',
+    bottom: '5%',
+    containLabel: false,
+  },
+  xAxis: {
+    type: 'category',
+    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      show: true,
+    },
+    axisLine: {
+      show: false,
+    },
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      lineStyle: {
+        color: '#F3F4F5',
+      },
+    },
+  },
+  series: [
+    {
+      name: 'E',
+      type: 'bar',
+      stack: 'total',
+      label: {
+        show: true,
+        color: '#FFFFFF',
+        formatter: function (e) {
+          return e.value ? e.seriesName : '';
+        }
+      },
+      itemStyle: {
+        borderRadius: [0, 0, 4, 4],
+      },
+      barWidth: 20,
+      emphasis: {
+        focus: 'series',
+      },
+      data: [320, 80, 301, 334, 390, 330, 320, 390, 330, 320, 390, 390],
+    },
+    {
+      name: 'P',
+      type: 'bar',
+      stack: 'total',
+      label: {
+        show: true,
+        color: '#FFFFFF',
+        formatter: '{a}',
+      },
+      emphasis: {
+        focus: 'series',
+      },
+      data: [120, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330],
+    },
+    {
+      name: 'B',
+      type: 'bar',
+      stack: 'total',
+      label: {
+        show: true,
+        color: '#FFFFFF',
+        formatter: '{a}',
+      },
+      emphasis: {
+        focus: 'series',
+      },
+      data: [18, 66, 191, 234, 290, 330, 310, 182, 191, 234, 290, 330],
+    },
+    {
+      name: 'A',
+      type: 'bar',
+      stack: 'total',
+      label: {
+        show: true,
+        color: '#FFFFFF',
+        formatter: '{a}',
+      },
+      itemStyle: {
+        borderRadius: [4, 4, 0, 0],
+      },
+      emphasis: {
+        focus: 'series',
+      },
+      data: [150, 212, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330],
+    },
+  ],
+};
+
+  myChart.setOption(option);
+})
+</script>
diff --git a/components/RingEcharts.vue b/components/RingEcharts.vue
new file mode 100644
index 0000000..781c268
--- /dev/null
+++ b/components/RingEcharts.vue
@@ -0,0 +1,148 @@
+<template>
+  <!-- <div id="yield-chart"></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: () => {} } });
+
+onMounted(()=>{
+  if(props.id){
+      var myChart = echarts.init(document.getElementById(props.id));
+  }
+
+  //
+  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
+        },
+    ];
+  const option = {
+    title: {
+        text: 100,
+        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
+                },
+            }
+        },
+        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 +
+                            '} '
+                        )
+                    }
+                }
+            }
+        }
+    },
+    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
+                    }
+                }
+            },
+        },
+        labelLine: {
+            normal: {
+                show: true
+            }
+        }
+    }]
+};
+myChart.setOption(option);
+
+})
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index b7b03f4..0f62890 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -27,6 +27,9 @@ export default defineNuxtConfig({
         href:"https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.min.css",
       },
     ],
-    script: [{ src: 'https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.7/dayjs.min.js' }],
+    script: [
+      { src: 'https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.7/dayjs.min.js' },
+      {src:'https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.common.js'}
+    ],
   },
 });
diff --git a/pages/Initiate-application.vue b/pages/Initiate-application.vue
index 66b35bf..54944e6 100644
--- a/pages/Initiate-application.vue
+++ b/pages/Initiate-application.vue
@@ -273,49 +273,10 @@ const billList = ref([
 const reviewerList = ref(['冯教授','周亮','李洪明','夏红','麦琪其','薇薇安','卫老师']);  //审核人数组
 const selected = ref(['冯教授']); //默认的审核人
 const showHistory = ref(true); // 根据数据判断是否有历史记录
-const applyData = ref([
-  {
-    applicant:'代用名1',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 1
-  },
-  {
-    applicant:'代用名2',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 2
-  },
-  {
-    applicant:'代用名1',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 3
-  },
-  {
-    applicant:'代用名2',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 3
-  },
-  {
-    applicant:'代用名1',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 1
-  },
-  {
-    applicant:'代用名2',
-    money:100,
-    time:'2021/12/31 12:31',
-    type: 2
-  }
-]);  //  申请的记录
 const isSuccess = ref(false)  // 上传票据是否成功
 const name = ref('')  // 提交人的姓名
 const applyMoney = ref(5000) // 手动输入时输入的申请的金额
 const titleHidden = ref(true) // 上传提示语隐藏
-const currentPage = ref(0) //当前显示页数
 const personalType = ref('个人申请')
 const personalCategory = ref('用款')
 
diff --git a/pages/applicant.vue b/pages/applicant.vue
index 15d6a23..16cf19a 100644
--- a/pages/applicant.vue
+++ b/pages/applicant.vue
@@ -9,16 +9,6 @@
             <Search class="px-4 pt-0"/>
             <FinanceManage class="px-4 mt-0"/>
         </div>
-        <!-- <div class="mt-8 bg-white">
-          <span class="p-4 pb-0 text-gray-500 font-semibold">历史申请</span>
-          <div v-if="isShow">
-            <Search />
-            <FinanceManage />
-          </div>
-          <div v-if="!isShow" class="no-data">
-              暂无历史记录
-          </div>
-        </div> -->
         <!-- 底部提交按钮部分 -->
         <div class="mt-20 px-10">
           <NuxtLink to="/Initiate-application">
@@ -26,8 +16,6 @@
           </NuxtLink>
         </div>
       </van-tab>
-
-
       <van-tab title="我的奖金">
         <div class="mt-8 bg-white">
             <div class="p-4 pb-0 text-gray-500 font-semibold">奖金领取记录</div>
diff --git a/pages/index.vue b/pages/index.vue
index 4357815..de2eda2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="mb-60">
-    <van-nav-bar title="资源管理" left-arrow @click-left="onClickLeft" />
     <van-tabs
       v-model:active="active"
       shrink
@@ -10,7 +9,7 @@
     >
       <van-tab title="财务管理">
         <!-- 财务管理页面 -->
-        <div class="bg-white p-4 mt-5 flex text-gray-500 flex-col d_jump">
+        <div class="bg-white p-4 mt-5 text-gray-500 flex-col">
           <div>
             <span class="font-semibold" id="finance-manage">财务管理</span>
             <span class="ml-2">对项目预算、奖金进行配置</span>
@@ -19,7 +18,7 @@
           <FinanceManage />
         </div>
         <!-- 财务审批页面 -->
-        <div class="bg-white p-4 mt-5 flex text-gray-500 flex-col d_jump">
+        <div class="bg-white p-4 mt-5 text-gray-500 flex-col">
           <div>
             <span class="font-semibold" id="finance-audit">财务审批</span>
             <span class="ml-2">对员工提交的申请进行审批</span>
@@ -28,12 +27,71 @@
           <FinanceExamine />
         </div>
         <!-- 财务统计页面 -->
-        <div class="bg-white p-4 mt-5 flex text-gray-500 flex-col d_jump">
+        <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>
-          <img src="public/statistics.png" class="w-full" />
+            <!-- 任务支出统计 -->
+          <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="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>
         </div>
       </van-tab>
       <van-tab title="角色管理">角色管理</van-tab>
@@ -58,6 +116,8 @@ export default {
 <script setup>
 import { ref, onMounted, nextTick } from 'vue';
 const active = ref(0);
+const taskState = ref(true);
+const nameState = ref(true);
 
 onMounted(async () => {
   scrollToElementByHash();
@@ -74,10 +134,6 @@ async function scrollToElementByHash() {
   window.pageYOffset = scrollDom.offsetTop;
 }
 
-function onClickLeft() {
-  console.log('返回上一页');
-}
-
 </script>
 
 <style lang="less">
@@ -104,4 +160,14 @@ function onClickLeft() {
   border-radius: 30px 0 0 30px;
   margin-bottom: 15px;
 }
+.button{
+  padding: 0px;
+  margin:0px;
+}
+.van-button--mini{
+  padding: 0.5rem 1rem;
+}
+.van-button--mini+.van-button--mini{
+  margin-left: 0px;
+}
 </style>