财务统计柱状图

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: '办公费',

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 class="bg-white p-4 mt-5 text-gray-500 flex-col">
-        <div>
+          <div>
-          <span class="font-semibold" id="finance-statistical">财务统计</span> <span class="ml-2 text-xs">财务明细统计查看</span>
+            <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">
+<style lang="less" scoped>
-.van-nav-bar__content{
-  background-color:#eee
-}
-.van-icon-arrow-left:before{
-  color: #000;
-}
 .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>

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;
 }