From 121b97b5ce9864bea0afc5da66674258ec58ff0b Mon Sep 17 00:00:00 2001
From: jiangweiguo <1578967617@qq.com>
Date: Thu, 23 May 2024 13:56:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8A=A5=E8=A1=A8=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 src/api/bs/chart.js                           |  58 ++++
 src/components/UploadFile/index.vue           |   2 +-
 src/router/modules/reportForms.js             |  14 +
 src/router/routes.js                          |   4 +-
 .../myNewClaim/components/UserList.vue        | 224 +++++++-------
 src/views/home/index.scss                     |   3 +-
 src/views/home/index.vue                      | 159 +++++-----
 .../myReportForms/components/LineChart.vue    | 126 ++++++++
 .../myReportForms/components/RoundChart.vue   |  99 +++++++
 src/views/reportForms/myReportForms/index.vue | 273 ++++++++++++++++++
 11 files changed, 789 insertions(+), 174 deletions(-)
 create mode 100644 src/api/bs/chart.js
 create mode 100644 src/router/modules/reportForms.js
 create mode 100644 src/views/reportForms/myReportForms/components/LineChart.vue
 create mode 100644 src/views/reportForms/myReportForms/components/RoundChart.vue
 create mode 100644 src/views/reportForms/myReportForms/index.vue

diff --git a/package.json b/package.json
index 4f11f8b..d3cbc1b 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.5",
     "dingtalk-jsapi": "^2.15.2",
+    "echarts": "^5.5.0",
     "exif-js": "^2.3.0",
     "html2canvas": "^1.4.1",
     "js-base64": "^3.7.5",
diff --git a/src/api/bs/chart.js b/src/api/bs/chart.js
new file mode 100644
index 0000000..0e38dba
--- /dev/null
+++ b/src/api/bs/chart.js
@@ -0,0 +1,58 @@
+import request from '@/plugin/axios'
+
+// 申请单报表
+export function applyReportApi(query) {
+  return request({
+    url: 'bs/expense-apply/getreport',
+    method: 'get',
+    params: query,
+  })
+}
+// 申请单报表
+export function claimReportApi(query) {
+  return request({
+    url: 'bs/expense-claim/getreport',
+    method: 'get',
+    params: query,
+  })
+}
+
+// 报表
+export function gatherMsgApi(query) {
+  return request({
+    url: 'bs/statement/gathering ',
+    method: 'get',
+  })
+}
+
+// 申请单报表
+export function paymentMsgApi(query) {
+  return request({
+    url: 'bs/statement/payment',
+    method: 'get',
+  })
+}
+
+// 付款饼图
+export function paymentPieApi(query) {
+  return request({
+    url: '/bs/statement/paymentPie',
+    method: 'get',
+  })
+}
+// 收款饼图
+export function gatheringPieApi(query) {
+  return request({
+    url: '/bs/statement/gatheringPie',
+    method: 'get',
+  })
+}
+
+// 供应商柱状图
+export function paymentColumnarApi(query) {
+  return request({
+    url: '/bs/statement/paymentColumnar',
+    method: 'get',
+  })
+}
+
diff --git a/src/components/UploadFile/index.vue b/src/components/UploadFile/index.vue
index 69202d3..12505f9 100644
--- a/src/components/UploadFile/index.vue
+++ b/src/components/UploadFile/index.vue
@@ -143,7 +143,7 @@ export default {
       this.$loading(true, 'file')
       this.uploadFiles(newList)
         .then((res) => {
-          ;(res || []).map((item) => {
+          (res || []).map((item) => {
             this.list.push(item)
           })
           this.$loading(false, 'file')
diff --git a/src/router/modules/reportForms.js b/src/router/modules/reportForms.js
new file mode 100644
index 0000000..9406b01
--- /dev/null
+++ b/src/router/modules/reportForms.js
@@ -0,0 +1,14 @@
+import layoutHome from '../../layout/index.vue'
+
+const meta = { requiresAuth: true }
+
+export default {
+  path: '/reportForms',
+  name: 'reportForms',
+  meta,
+  redirect: { name: 'reportForms' },
+  component: layoutHome,
+  children: (pre => [
+    { path: '/myReportForms', name: `${pre}myReportForms`, component: () => import('@/views/reportForms/myReportForms'), meta: { cache: true, title: '我的报表' } },
+  ])('reportForms-')
+}
diff --git a/src/router/routes.js b/src/router/routes.js
index 9c42c7b..3b0ed5b 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -1,6 +1,7 @@
 import layoutHome from '../layout/index.vue'
 import company from './modules/company'
 import contract from './modules/contract'
+import reportForms from './modules/reportForms'
 export const frameInRoutes = [
   {
     path: '/',
@@ -13,7 +14,8 @@ export const frameInRoutes = [
     ])('home-')
   },
   company,
-  contract
+  contract,
+  reportForms
 ]
 
 export const frameOutRoutes = [
diff --git a/src/views/company/myNewClaim/components/UserList.vue b/src/views/company/myNewClaim/components/UserList.vue
index c82bd68..b92baef 100644
--- a/src/views/company/myNewClaim/components/UserList.vue
+++ b/src/views/company/myNewClaim/components/UserList.vue
@@ -1,39 +1,58 @@
 <template>
   <!-- 出差列表 -->
   <div>
-    <HeaderFilter :listType="listType" @onListQuery="handleListQuery" :paramProp="listQuery" />
-    <RMList :moreLoading.sync="moreLoading" :refreshing.sync="refreshing" :finished.sync="finished" @onLoad="handleLoad" @onRefresh="handleRefresh" isMore :tableList="tableList">
+    <HeaderFilter
+      :listType="listType"
+      @onListQuery="handleListQuery"
+      :paramProp="listQuery"
+    />
+    <RMList
+      :moreLoading.sync="moreLoading"
+      :refreshing.sync="refreshing"
+      :finished.sync="finished"
+      @onLoad="handleLoad"
+      @onRefresh="handleRefresh"
+      isMore
+      :tableList="tableList"
+    >
       <div>
-        <MyClaimListCard v-for="(item,index) in tableList" :key="item.id" :itemData="item" :listType="listType" @onUpdataInfo="handleUpdataInfo($event, index)" @onAllRefresh="handleAllRefresh" />
+        <MyClaimListCard
+          v-for="(item, index) in tableList"
+          :key="item.id"
+          :itemData="item"
+          :listType="listType"
+          @onUpdataInfo="handleUpdataInfo($event, index)"
+          @onAllRefresh="handleAllRefresh"
+        />
       </div>
     </RMList>
-    <div class="common-bottom-btns" style="bottom:8rem">
+    <div class="common-bottom-btns" style="bottom: 8rem">
       <div class="common-bottom-btn" @click="handleTopPage">
-        <img src="@/assets/images/icons/top.png" alt="">
+        <img src="@/assets/images/icons/top.png" alt="" />
         <span>回到顶部</span>
       </div>
     </div>
-    <div class='feedback-container'>
-      <div id='allBtns' class='float-btns' ref="allBtns">
-        <div class='help-wrap' @click="handApply(1)">
-          <img class='img' src="@/assets/images/tigongdan.png" />
+    <div class="feedback-container">
+      <div id="allBtns" class="float-btns" ref="allBtns">
+        <div class="help-wrap" @click="handApply(1)">
+          <img class="img" src="@/assets/images/tigongdan.png" />
           <span>出差报销</span>
         </div>
-        <div class='help-wrap' @click="handApply(2)">
-          <img class='img' src="@/assets/images/myworkrukou.png" />
+        <div class="help-wrap" @click="handApply(2)">
+          <img class="img" src="@/assets/images/myworkrukou.png" />
           <span>日常报销</span>
         </div>
       </div>
     </div>
-    <div class="common-bottom-btns" style="bottom:10rem">
+    <div class="common-bottom-btns" style="bottom: 10rem">
       <div class="common-bottom-btn" @click="handleToAdd">
-        <img src="@/assets/images/icons/add.png" alt="">
+        <img src="@/assets/images/icons/add.png" alt="" />
         <span>添加报销</span>
       </div>
     </div>
-    <div class="common-bottom-btns" style="bottom:6rem">
+    <div class="common-bottom-btns" style="bottom: 6rem">
       <div class="common-bottom-btn" @click="handleBack">
-        <img src="@/assets/images/icons/home.png" alt="">
+        <img src="@/assets/images/icons/home.png" alt="" />
         <span>返回首页</span>
       </div>
     </div>
@@ -42,25 +61,26 @@
 
 <script>
 // 咨询用户
-import { getScrollTop } from '@/utils'
+import { getScrollTop } from "@/utils";
 // import { getOrderListApi, getDataStatisticsApi, updateOrderSingleListApi } from '@/api/potentialGuest/order'
-import { mapState } from 'vuex'
+import { mapState } from "vuex";
 import { getExpenseClaimMyPage } from "@/api/bs/expenseClaim";
 export default {
   props: {
-    listType: String // EnrollmentOrder: 报名订单 EnrollmentCollection: 报名收款  ShiftRecord: 换班记录  WaitPay: 待支付
+    listType: String, // EnrollmentOrder: 报名订单 EnrollmentCollection: 报名收款  ShiftRecord: 换班记录  WaitPay: 待支付
   },
   components: {
-    HeaderFilter: () => import('@/views/company/myClaim/components/HeaderFilter.vue'),
-    RMList: () => import('@/components/ReComponents/RMList'),
-    MyClaimListCard: () => import('@/components/MyClaimListCard'),
+    HeaderFilter: () =>
+      import("@/views/company/myClaim/components/HeaderFilter.vue"),
+    RMList: () => import("@/components/ReComponents/RMList"),
+    MyClaimListCard: () => import("@/components/MyClaimListCard"),
   },
   data() {
     return {
       btnshow: false,
       show: false,
       billType: null,
-      demo: ['2210', '45646', '414'],
+      demo: ["2210", "45646", "414"],
       height: 0,
       moreLoading: false,
       refreshing: false,
@@ -84,88 +104,94 @@ export default {
         costDeptId: null,
         invoiceIds: null,
       },
-    }
+    };
   },
   computed: {
     ...mapState({
-      singlePageSize: state => state.common.setting.singlePageSize,
-      pageSize: state => state.common.setting.pageSize,
-    })
+      singlePageSize: (state) => state.common.setting.singlePageSize,
+      pageSize: (state) => state.common.setting.pageSize,
+    }),
   },
   activated() {
-    this.handleScrollInit()
+    this.handleScrollInit();
   },
   deactivated() {
-    window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener("scroll", this.handleScroll);
   },
   created() {
-    this.handleInit()
+    this.handleInit();
   },
   methods: {
     //  type 1 出差 2日常
     handApply(type) {
       this.$router.push({
-        path: '/claim',
+        path: "/claim",
         query: {
-          type: 'add',
-          billType: type == 1 ? 'CLBX' : 'RCBX'
-        }
-      })
-      this.billType = type == 1 ? 'CLBX' : 'RCBX'
+          type: "add",
+          billType: type == 1 ? "CLBX" : "RCBX",
+        },
+      });
+      this.billType = type == 1 ? "CLBX" : "RCBX";
     },
     handleCloseBtns() {
       this.$refs.allBtns.style.height = "0";
       this.btnshow = false;
     },
     handleBack() {
-      history.back()
+      history.back();
     },
     handleSetSingle(id) {
       return new Promise((resolve, reject) => {
         let listQuery = {
           pageNo: 1,
           pageSize: this.singlePageSize,
-        }
-        getExpenseClaimMyPage(listQuery).then((res) => {
-          let arr = (res.data && res.data.list || []).filter(item => item.id == id)
-          resolve(arr)
-        }).catch((err) => {
-          reject(err)
-        })
-      })
+        };
+        getExpenseClaimMyPage(listQuery)
+          .then((res) => {
+            let arr = ((res.data && res.data.list) || []).filter(
+              (item) => item.id == id
+            );
+            resolve(arr);
+          })
+          .catch((err) => {
+            reject(err);
+          });
+      });
     },
     handleUpdataInfo(id, index) {
-      this.$loading(true, 'singleReset')
-      this.handleSetSingle(id).then(arr => {
-        if (arr.length) {
-          this.tableList.splice(index, 1, arr[0])
-        }
-        this.$loading(false, 'singleReset')
-      }).catch(() => {
-        this.$loading(false, 'singleReset')
-      })
+      this.$loading(true, "singleReset");
+      this.handleSetSingle(id)
+        .then((arr) => {
+          if (arr.length) {
+            this.tableList.splice(index, 1, arr[0]);
+          }
+          this.$loading(false, "singleReset");
+        })
+        .catch(() => {
+          this.$loading(false, "singleReset");
+        });
     },
     handleListQuery(paramProp) {
       this.listQuery = {
         ...paramProp,
-      }
-      this.finished = false
-      this.handleRefresh()
+      };
+      this.finished = false;
+      this.handleRefresh();
     },
     handleScroll() {
-      getScrollTop().then(height => {
-        this.height = height
-      })
+      getScrollTop().then((height) => {
+        this.height = height;
+      });
     },
     handleScrollInit() {
-      window.addEventListener('scroll', this.handleScroll)
-      window.scrollTo(0, this.height)
+      window.addEventListener("scroll", this.handleScroll);
+      window.scrollTo(0, this.height);
       // this.handleInit()
     },
 
     handleScrollToTop() {
-      window.scrollTo(0, 0)
-      this.height = 0
+      window.scrollTo(0, 0);
+      this.height = 0;
     },
     handleToAdd() {
       this.btnshow = !this.btnshow;
@@ -177,58 +203,60 @@ export default {
     },
     handleAllRefresh() {
       // this.getTableList('refresh')
-      this.handleRefresh()
+      this.handleRefresh();
     },
     handleInit() {
-      this.getTableList('init')
+      this.getTableList("init");
     },
 
     handleTopPage() {
-      window.scrollTo(0, 0)
+      window.scrollTo(0, 0);
       this.$nextTick(() => {
-        this.height = 0
-      })
+        this.height = 0;
+      });
     },
     handleRefresh() {
-      this.listQuery.pageNo = 1
-      this.finished = false
-      this.getTableList('refresh')
+      this.listQuery.pageNo = 1;
+      this.finished = false;
+      this.getTableList("refresh");
     },
     handleLoad() {
-      this.listQuery.pageNo += 1
-      this.getTableList('more')
+      this.listQuery.pageNo += 1;
+      this.getTableList("more");
     },
 
     getTableList(val) {
       // const { shellIdsLocal, collegeInfoIdLocal, startDate, endDate, keyword, type, method, targets, usePersonId, teacherIds, chargePersonIds } = this.listQuery
       const query = {
-        ...this.listQuery
-      }
-      this.moreLoading = true
-      this.$loading(true, 'tableLoading')
-      getExpenseClaimMyPage(query).then(res => {
-        let resList = res.data && res.data.list || []
-        if (['init', 'refresh'].includes(val)) {
-          this.tableList = resList
-          this.handleScrollToTop()
-        } else {
-          this.tableList = this.tableList.concat(resList)
-        }
-        if (resList.length < this.pageSize) {
-          this.finished = true
-        }
-      }).finally(() => {
-        this.$nextTick(() => {
-          this.moreLoading = false
-          this.refreshing = false
-          this.$loading(false, 'tableLoading')
+        ...this.listQuery,
+      };
+      this.moreLoading = true;
+      this.$loading(true, "tableLoading");
+      getExpenseClaimMyPage(query)
+        .then((res) => {
+          let resList = (res.data && res.data.list) || [];
+          if (["init", "refresh"].includes(val)) {
+            this.tableList = resList;
+            this.handleScrollToTop();
+          } else {
+            this.tableList = this.tableList.concat(resList);
+          }
+          if (resList.length < this.pageSize) {
+            this.finished = true;
+          }
         })
-        // this.$loading(false, `cTableLoading_${this.listType}`)
-      })
+        .finally(() => {
+          this.$nextTick(() => {
+            this.moreLoading = false;
+            this.refreshing = false;
+            this.$loading(false, "tableLoading");
+          });
+          // this.$loading(false, `cTableLoading_${this.listType}`)
+        });
     },
-  }
-}
+  },
+};
 </script>
 <style scoped lang="scss">
-@import '~@/assets/style/new.scss';
+@import "~@/assets/style/new.scss";
 </style>
diff --git a/src/views/home/index.scss b/src/views/home/index.scss
index 37922bb..b5b42e5 100644
--- a/src/views/home/index.scss
+++ b/src/views/home/index.scss
@@ -1,6 +1,7 @@
 .home-box {
   // height: 100vh;
-  height: 85vh;
+  // height: 85vh;
+  height: 100%;
   background: #0088fe;
   padding: 0.6rem 0.6rem 0 0.6rem;
   position: relative;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 3429a99..3084a3e 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -55,11 +55,11 @@
 </template>
 
 <script>
-import { checkPermission } from '@/utils'
-import { getMyNotifyMessagePage } from '@/api/bs/waitToDo'
-import { Dialog } from 'vant'
+import { checkPermission } from "@/utils";
+import { getMyNotifyMessagePage } from "@/api/bs/waitToDo";
+import { Dialog } from "vant";
 export default {
-  name: 'home-index',
+  name: "home-index",
   components: {
     // withdraw: () => import('./components/withdraw.vue')
   },
@@ -71,60 +71,62 @@ export default {
   },
   computed: {
     permission_btns() {
-      return this.$store.getters.permission_btns
+      return this.$store.getters.permission_btns;
     },
     userInfo() {
-      return JSON.parse(window.localStorage.getItem('userInfo') || { dept: {} })
+      return JSON.parse(
+        window.localStorage.getItem("userInfo") || { dept: {} }
+      );
     },
   },
   created() {
-    console.log(this.$route.query, 'this.$router.query')
+    console.log(this.$route.query, "this.$router.query");
   },
   mounted() {
-    this.$forceCloseLoading()
-    this.handleFilterList()
-    this.handleInitList()
+    this.$forceCloseLoading();
+    this.handleFilterList();
+    this.handleInitList();
   },
   data() {
     return {
       roterList: [],
       isDot: false,
-    }
+    };
   },
 
   methods: {
     loginOut() {
       Dialog.confirm({
-        title: '提示',
-        message: '您确定要退出吗？',
+        title: "提示",
+        message: "您确定要退出吗？",
       }).then(() => {
-        this.$store.dispatch('common/user/out')
-      })
+        this.$store.dispatch("common/user/out");
+      });
     },
     handleInitList() {
-      let filterArr = ['QUOTATION_SHEET']
+      let filterArr = ["QUOTATION_SHEET"];
       getMyNotifyMessagePage({
         pageNo: 1,
         pageSize: 999,
       }).then((res) => {
-        let resList = (res.data && res.data.list) || []
+        let resList = (res.data && res.data.list) || [];
         let newArr = resList.filter(
           (item) => !filterArr.includes(item.billType)
-        )
+        );
         if (newArr.length) {
-          this.isDot = true
+          this.isDot = true;
         } else {
-          this.isDot = false
+          this.isDot = false;
         }
-      })
+      });
     },
     handleToWait() {
       this.$router.push({
-        path: '/waitToDo',
-      })
+        path: "/waitToDo",
+      });
     },
     handleFilterList() {
-      this.roterList = []
+      this.roterList = [];
       let arr = [
         {
           row: [
@@ -135,10 +137,10 @@ export default {
             //   show: this.permission_btns.includes('bs:expense-apply:create'),
             // },
             {
-              route: '/myNewTrips',
-              title: '我的申请',
-              icon: 'manager-o',
-              show: checkPermission('bs/myExpenseApply/index'),
+              route: "/myNewTrips",
+              title: "我的申请",
+              icon: "manager-o",
+              show: checkPermission("bs/myExpenseApply/index"),
             },
             /* {
               route: '/myTrips',
@@ -153,10 +155,10 @@ export default {
             //   show: this.permission_btns.includes('bs:expense-claim:create'),
             // },
             {
-              route: '/myNewClaim',
-              title: '我的报销',
-              icon: 'bookmark-o',
-              show: checkPermission('bs/myExpenseClaim/index'),
+              route: "/myNewClaim",
+              title: "我的报销",
+              icon: "bookmark-o",
+              show: checkPermission("bs/myExpenseClaim/index"),
             },
             /* {
               route: '/myClaim',
@@ -165,42 +167,42 @@ export default {
               show: checkPermission('bs/expenseClaim/index'),
             }, */
             {
-              route: '/myInvoice',
-              title: '我的发票',
-              icon: 'label-o',
-              show: checkPermission('bs/invoice/index'),
+              route: "/myInvoice",
+              title: "我的发票",
+              icon: "label-o",
+              show: checkPermission("bs/invoice/index"),
             },
           ],
-          title: '报销',
+          title: "报销",
         },
         {
           row: [
             {
-              route: '/myTrips',
-              title: '申请单',
-              icon: 'exchange',
-              show: checkPermission('bs/expenseApply/index'),
+              route: "/myTrips",
+              title: "申请单",
+              icon: "exchange",
+              show: checkPermission("bs/expenseApply/index"),
             },
             {
-              route: '/myClaim',
-              title: '报销单',
-              icon: 'qr-invalid',
-              show: checkPermission('bs/expenseClaim/index'),
+              route: "/myClaim",
+              title: "报销单",
+              icon: "qr-invalid",
+              show: checkPermission("bs/expenseClaim/index"),
             },
             {
-              route: '/corporateReceiptsApproval', //不要改
-              title: '对公收款审批',
-              icon: 'friends-o',
-              show: this.permission_btns.includes('bs:vendor-receipt:query'),
+              route: "/corporateReceiptsApproval", //不要改
+              title: "对公收款审批",
+              icon: "friends-o",
+              show: this.permission_btns.includes("bs:vendor-receipt:query"),
             },
             {
-              route: '/corporatePaymentApproval',
-              title: '对公付款审批',
-              icon: 'friends-o',
-              show: this.permission_btns.includes('bs:vendor-payment:query'),
+              route: "/corporatePaymentApproval",
+              title: "对公付款审批",
+              icon: "friends-o",
+              show: this.permission_btns.includes("bs:vendor-payment:query"),
             },
           ],
-          title: '审批',
+          title: "审批",
         },
         {
           row: [
@@ -231,53 +233,64 @@ export default {
               show: this.permission_btns.includes('procurement:payApply:list')
             }, */
             {
-              route: '/corporateReceipts',
-              title: '对公收款',
-              icon: 'friends-o',
-              show: this.permission_btns.includes('bs:vendor-receipt:query'),
+              route: "/corporateReceipts",
+              title: "对公收款",
+              icon: "friends-o",
+              show: this.permission_btns.includes("bs:vendor-receipt:query"),
             },
             {
-              route: '/corporatePayment',
-              title: '对公付款',
-              icon: 'friends-o',
-              show: this.permission_btns.includes('bs:vendor-payment:query'),
+              route: "/corporatePayment",
+              title: "对公付款",
+              icon: "friends-o",
+              show: this.permission_btns.includes("bs:vendor-payment:query"),
+            },
+          ],
+          title: "对公",
+        },
+        {
+          row: [
+            {
+              route: "/myReportForms",
+              title: "我的报表",
+              icon: "friends-o",
+              show: true,
             },
           ],
-          title: '对公',
+          title: "报表",
         },
-      ]
+      ];
       this.roterList = arr.map((item) => {
         return {
           ...item,
           row: item.row.filter((n) => n.show),
-        }
-      })
+        };
+      });
     },
     checkPermission,
     handelTo(route) {
       if (route) {
         if (
-          ['/trips', '/claim', '/supplier', '/custom', '/pay'].includes(route)
+          ["/trips", "/claim", "/supplier", "/custom", "/pay"].includes(route)
         ) {
           this.$router.push({
             path: route,
             query: {
-              type: 'add',
+              type: "add",
             },
-          })
+          });
         } else {
           this.$router.push({
             path: route,
-          })
+          });
         }
       } else {
-        this.$fm('模块正在中...')
+        this.$fm("模块正在中...");
       }
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>
diff --git a/src/views/reportForms/myReportForms/components/LineChart.vue b/src/views/reportForms/myReportForms/components/LineChart.vue
new file mode 100644
index 0000000..0d3beb2
--- /dev/null
+++ b/src/views/reportForms/myReportForms/components/LineChart.vue
@@ -0,0 +1,126 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+// import resize from '../mixins/resize'
+
+export default {
+  // mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "350px",
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+    chartData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.setOptions(this.chartData);
+    },
+    setOptions({ amountDataList } = {}) {
+      let newAmountDataList = amountDataList || [];
+      let xArr = [];
+      newAmountDataList.forEach((element) => {
+        xArr.push(element.date);
+      });
+      let yArr = [];
+      newAmountDataList.forEach((element) => {
+        yArr.push(element.num);
+      });
+      this.chart.setOption({
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: xArr,
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLine: {
+              //这是x轴文字颜色
+              lineStyle: {
+                color: "#333",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisLine: {
+              //这是y轴文字颜色
+              lineStyle: {
+                color: "#333",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            color: "#4E98FF",
+            name: "CNY",
+            type: "bar",
+            barWidth: "30%",
+            data: yArr,
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/reportForms/myReportForms/components/RoundChart.vue b/src/views/reportForms/myReportForms/components/RoundChart.vue
new file mode 100644
index 0000000..753ba0e
--- /dev/null
+++ b/src/views/reportForms/myReportForms/components/RoundChart.vue
@@ -0,0 +1,99 @@
+<template>
+  <div :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+// import resize from '../mixins/resize'
+
+export default {
+  // mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "350px",
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+    chartData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.setOptions(this.chartData);
+    },
+    setOptions({ feeTypeDataList } = {}) {
+      this.chart.setOption({
+        title: {
+          left: "center",
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+        },
+        series: [
+          {
+            label: {
+              formatter: "{b}：{c}",
+            },
+            name: "",
+            type: "pie",
+            radius: ["50%", "70%"],
+            color: ["#4DB6AC", "#B3E6B5", "#5F7BAC"],
+            data: feeTypeDataList,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/reportForms/myReportForms/index.vue b/src/views/reportForms/myReportForms/index.vue
new file mode 100644
index 0000000..e1a5fd3
--- /dev/null
+++ b/src/views/reportForms/myReportForms/index.vue
@@ -0,0 +1,273 @@
+<template>
+  <div class="common-list-contain">
+    <div class="common-form">
+      <van-form
+        ref="queryParams"
+        :show-error-message="false"
+        validate-trigger=""
+        :submit-on-enter="false"
+        label-width="8rem"
+      >
+        <div class="section"><span class="line"> </span> 查询条件</div>
+        <div class="trips-box">
+          <div class="item-box">
+            <RePick
+              v-model="bblx"
+              titleKey="label"
+              idKey="value"
+              label="报表类型"
+              :list="option1"
+              isRequrie
+              isCell
+              clearable
+            />
+            <RePick
+              v-model="ssdlx"
+              titleKey="label"
+              idKey="value"
+              label="申请单类型"
+              :list="option2"
+              isRequrie
+              isCell
+              clearable
+            />
+            <van-field
+              :value="queryParams.createTime"
+              label="日期"
+              placeholder="请选择"
+              @click="handleDateShow"
+              :right-icon="queryParams.createTime ? '' : 'arrow'"
+              input-align="right"
+              autosize
+              rows="1"
+              type="textarea"
+            >
+              <template v-if="queryParams.createTime" #button>
+                <van-icon
+                  name="clear"
+                  color="#C8C9CC"
+                  size="16"
+                  @click.stop="handleClear"
+                />
+              </template>
+            </van-field>
+            <div style="display: flex; justify-content: center">
+              <van-button
+                style="margin-right: 30px"
+                @click="handleConfirm"
+                type="primary"
+                size="normal"
+                >搜索</van-button
+              >
+              <van-button @click="handleDateReset">重置</van-button>
+            </div>
+          </div>
+        </div>
+      </van-form>
+    </div>
+
+    <!-- 费用统计 -->
+    <van-cell-group style="margin-top: 20px">
+      <van-cell title="费用统计" />
+      <div class="account-box">
+        <div class="item-box" v-for="(item, index) in accountList" :key="index">
+          <div class="box-tt">
+            <div>
+              <span>{{ item.tt }}</span>
+            </div>
+            <div>
+              CNY <span class="fw600">{{ item.m }}</span>
+            </div>
+            <div>
+              单据 <span class="fw600">{{ item.num }}</span> 笔
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-cell-group>
+
+    <van-cell-group style="margin-top: 20px">
+      <van-cell title="金额按月统计" />
+      <LineChart :chartData="chartData" />
+    </van-cell-group>
+
+    <van-cell-group style="margin-top: 20px">
+      <van-cell title="按费用类型统计" />
+      <RoundChart :chartData="chartData" />
+    </van-cell-group>
+
+    <!--行程时间范围选择 -->
+    <van-calendar
+      ref="vanCalendar"
+      allow-same-day
+      :maxDate="maxDate"
+      v-model="dateShow"
+      :min-date="minDate"
+      :default-date="defaultDate"
+      type="range"
+      color="#0088FE"
+      @confirm="handleDateSelect"
+    />
+
+    <div class="common-bottom-btns" style="bottom: 6rem">
+      <div class="common-bottom-btn" @click="handleBack">
+        <img src="@/assets/images/icons/home.png" alt="" />
+        <span>返回首页</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import { applyReportApi, claimReportApi } from "@/api/bs/chart";
+export default {
+  components: {
+    RePick: () => import("@/components/ReComponents/RePick"),
+    RoundChart: () => import("./components/RoundChart"),
+    LineChart: () => import("./components/LineChart"),
+  },
+  data() {
+    return {
+      // 报表类型
+      option1: [
+        {
+          value: "SQ",
+          label: "申请单",
+        },
+        {
+          value: "BX",
+          label: "费用单",
+        },
+      ],
+      // 申请单类型
+      option2: [
+        {
+          value: "RC",
+          label: "日常",
+        },
+        {
+          value: "CL",
+          label: "差旅",
+        },
+      ],
+      // 查询参数
+      bblx: "SQ",
+      ssdlx: "RC",
+      queryParams: {
+        billType: "RCSQ",
+        createTime: "",
+        startDate: null,
+        endDate: null,
+      },
+      minDate: new Date("2000/01/01"),
+      maxDate: new Date("2030/01/01"),
+      defaultDate: new Date(),
+      dateShow: false,
+      //   费用统计
+      accountList: [
+        {
+          m: 747.8,
+          num: 2,
+          tt: "合计",
+        },
+        {
+          tt: "流程中",
+          m: 747.8,
+          num: 2,
+        },
+      ],
+      chartData: {},
+    };
+  },
+  watch: {
+    ssdlx: {
+      handler(val) {
+        this.queryParams.billType = val + this.bblx;
+      },
+      immediate: true,
+    },
+    bblx: {
+      handler(val) {
+        this.queryParams.billType = this.ssdlx + val;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    // 转换日期
+    handleDateShow(obj) {
+      const { startTime, endTime } = obj;
+      this.$nextTick(() => {
+        this.$refs.vanCalendar && this.$refs.vanCalendar.reset();
+        this.dateShow = true;
+        if (startTime && endTime) {
+          this.defaultDate = [
+            dayjs(startTime).toDate(),
+            dayjs(endTime).toDate(),
+          ];
+        }
+      });
+    },
+    // 清除搜索日期
+    handleClear() {
+      this.queryParams.startDate = "";
+      this.queryParams.endDate = "";
+    },
+    // 选择日期
+    handleDateSelect(list) {
+      this.queryParams.startDate = dayjs(list[0]).format("YY/MM/DD");
+      this.queryParams.endDate = dayjs(list[1]).format("YY/MM/DD");
+      this.queryParams.createTime = `${dayjs(list[0]).format(
+        "YY/MM/DD"
+      )}~${dayjs(list[1]).format("YY/MM/DD")}`;
+      this.dateShow = false;
+    },
+    // 搜索
+    handleConfirm() {
+      let api = this.bblx == "SQ" ? applyReportApi : claimReportApi;
+      const { billType, startDate, endDate } = this.queryParams;
+      api({
+        billType,
+        startDate: startDate || null,
+        endDate: endDate || null,
+      }).then((res) => {
+        this.chartData = res.data || {};
+        this.accountList[0].m = this.chartData.totalAmount;
+        this.accountList[0].num = this.chartData.totalCount;
+        this.accountList[1].m = this.chartData.processAmount;
+        this.accountList[1].num = this.chartData.processCount;
+      });
+    },
+    // 重置搜索
+    handleDateReset() {
+      this.queryParams = {
+        billType: "RCSQ",
+        createTime: "",
+        startDate: null,
+        endDate: null,
+      };
+      this.handleConfirm();
+    },
+    handleBack() {
+      history.back();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "~@/assets/style/common/form.scss";
+/* .account-box {
+  display: flex;
+  justify-content: space-between;
+} */
+.box-tt {
+  padding: 10px 30px;
+  display: flex;
+  justify-content: space-between;
+  .fw600 {
+    font-weight: 600;
+  }
+}
+</style>