From e31bd89e4c6c3d9c610f3155cfa87913a0ee47e4 Mon Sep 17 00:00:00 2001
From: fengachen <fengachen@syxysoft.com>
Date: Fri, 2 Sep 2022 10:43:54 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=BC=80=E5=8F=91=E3=80=91=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E7=BB=9F=E8=AE=A1=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/AllMoneyTenEcharts.vue    | 193 ++++++
 src/views/dashboard/Analysis.vue              | 614 +++---------------
 .../dashboard/DepartmentTotalEcharts.vue      | 193 ++++++
 src/views/dashboard/IncomeSortEcharts.vue     | 135 ++++
 src/views/dashboard/SingleMonthEcharts.vue    | 392 +++++++++++
 .../dashboard/SingleMonthTotalEcharts.vue     | 391 +++++++++++
 src/views/statisticalReport/statisticData.js  |  15 +
 7 files changed, 1405 insertions(+), 528 deletions(-)
 create mode 100644 src/views/dashboard/AllMoneyTenEcharts.vue
 create mode 100644 src/views/dashboard/DepartmentTotalEcharts.vue
 create mode 100644 src/views/dashboard/IncomeSortEcharts.vue
 create mode 100644 src/views/dashboard/SingleMonthEcharts.vue
 create mode 100644 src/views/dashboard/SingleMonthTotalEcharts.vue

diff --git a/src/views/dashboard/AllMoneyTenEcharts.vue b/src/views/dashboard/AllMoneyTenEcharts.vue
new file mode 100644
index 0000000..2cea34d
--- /dev/null
+++ b/src/views/dashboard/AllMoneyTenEcharts.vue
@@ -0,0 +1,193 @@
+<!--企业合同金额前十-->
+<template>
+  <div class="container">
+    <div class="title">企业客户统计（合同额前十）</div>
+    <div class="echarts-box" id="allMoney"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {JeroListMixin} from '@/mixins/JeroListMixin'
+import {getAction} from '@api/manage'
+
+export default {
+  name: 'AllMoneyTenEcharts',
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      disableMixinCreated: true,
+      url: {
+        list: '/statistics/allProjectStatistics/listDepartment',
+      },
+      // 给定当年作为来款年份默认查询条件
+      queryParam: {
+        year: new Date().getFullYear().toString()
+      },
+      lastQueryParam: {
+        year: new Date().getFullYear().toString()
+      },
+      echartsData: {
+        allMoney: [],
+        confirmAmount: [],
+      }
+    }
+  },
+  mounted() {
+    this.loadData(1)
+  },
+  methods: {
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let params = this.getQueryParams()//查询条件
+      this.loading = true
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          this.initEcharts(res.result.pageList.records)
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+        this.loading = false
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    initEcharts(data) {
+      console.log(data)
+      // 处理 x轴数据
+      let xData = data.reduce((pre, val) => {
+        return pre.concat(val.departName || '')
+      }, [])
+      // 处理y轴数据
+      data.map(item => {
+        this.echartsData.allMoney.push(item.allMoney)
+        this.echartsData.confirmAmount.push(item.confirmAmount)
+      })
+
+      let chartDom = document.getElementById('allMoney')
+      let myChart = echarts.init(chartDom)
+      let option
+
+      option = {
+        color:['#069F99','#FFA17A'],
+        grid: {
+          left: '0%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        legend: {
+          right: '2%'
+        },
+        tooltip:{
+          trigger: 'axis',
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = ''
+            params.forEach(item => {
+              dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <div>
+            <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${item.color};border-radius: 3px"></span>
+            <span style="color:#666">${item.seriesName}</span>
+</div>
+            <div style="color:#333;">${item.data}</div>
+          </div>
+        </div>`
+            })
+            return dataStr
+          }
+        },
+        xAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#F5F5F5'
+            }
+          },
+          axisLabel: {
+            show: true,
+            color: '#999'
+          },
+          // 刻度线设置
+          axisTick: {
+            show: false
+          },
+          type: 'category',
+          data: xData
+        },
+        yAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#F5F5F5'
+            }
+          },
+          axisLabel: {
+            show: true,
+            color: '#8E8E95'
+          },
+          type: 'value',
+          splitLine: {
+            lineStyle: {
+              color: '#F5F5F5',
+              type: 'dashed'
+            }
+          },
+        },
+        series: [
+          {
+            name:'合同金额',
+            data: this.echartsData.allMoney,
+            type: 'bar',
+            itemStyle:{
+              borderRadius:[8,8,0,0]
+            }
+          },
+          {
+            name:'确认收入金额',
+            data: this.echartsData.confirmAmount,
+            type: 'bar',
+            itemStyle:{
+              borderRadius:[8,8,0,0]
+            }
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.container {
+  padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+}
+.title {
+  text-align: left;
+  font-weight: 500;
+  color: #333;
+  font-size: 20px;
+}
+
+.echarts-box {
+  width: 100%;
+  height: 400px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/Analysis.vue b/src/views/dashboard/Analysis.vue
index 9d0718e..27f84b6 100644
--- a/src/views/dashboard/Analysis.vue
+++ b/src/views/dashboard/Analysis.vue
@@ -1,573 +1,131 @@
 <template>
   <div style="min-width: 1100px">
-<!--    <div class="page-top">-->
-<!--      &lt;!&ndash;    工作区&ndash;&gt;-->
-<!--      <a-card :bordered="false" class="workspace">-->
-<!--        &lt;!&ndash;      标题&ndash;&gt;-->
-<!--        <div class="home-part-title"><img src="@/assets/imgs/icon/icon_workspace.png"/>工作区</div>-->
-<!--        <div class="divider"></div>-->
+    <!-- 其他人展示消息-->
+    <template v-if="roleCoe">
+      <user-announcement-list :is-show-seach="true"></user-announcement-list>
+      <div class="download">
+        点击下载<span class="primary-color" @click="downloadManual">管理端使用手册</span>
+        <span style="margin-left: 10px">技术支持电话：022-84379290</span>
+      </div>
+    </template>
+    <!--    所领导 部门领导展示统计图 -->
+    <template v-else>
+      <!--    全所收入统计 单月-->
+      <single-month-echarts class="single-month"></single-month-echarts>
+      <!-- 全所收入统计 单月-->
 
-<!--        <div class="workspace-container">-->
-<!--          <div class="workspace-item" @click="workspaceJump('/projectManagement/InternationalSeminar')">-->
-<!--            <img src="@/assets/imgs/homePage/international-symposium.png"/>-->
-<!--            <div class="workspace-item-text">国际研讨会</div>-->
-<!--          </div>-->
-<!--          <div class="workspace-item" @click="workspaceJump('/businessManagement/BusinessManagement')">-->
-<!--            <img src="@/assets/imgs/homePage/company-management.png"/>-->
-<!--            <div class="workspace-item-text">单位/开票信息审核</div>-->
-<!--          </div>-->
-<!--          <div class="workspace-item" @click="workspaceJump('/projectManagement/GeneralProjectManagement')">-->
-<!--            <img src="@/assets/imgs/homePage/general-project.png"/>-->
-<!--            <div class="workspace-item-text">普通项目</div>-->
-<!--          </div>-->
-<!--          <div class="workspace-item" @click="workspaceJump('/projectManagement/WorkingGroupProjectManagement')">-->
-<!--            <img src="@/assets/imgs/homePage/working-group-project.png"/>-->
-<!--            <div class="workspace-item-text">工作组项目</div>-->
-<!--          </div>-->
-<!--          <div class="workspace-item" @click="workspaceJump('/projectManagement/OtherMeeting')">-->
-<!--            <img src="@/assets/imgs/homePage/other-meeting.png"/>-->
-<!--            <div class="workspace-item-text">其他会议</div>-->
-<!--          </div>-->
-<!--          <div class="workspace-item" @click="workspaceJump('/contractManagement/RevenueContractList')">-->
-<!--            <img src="@/assets/imgs/homePage/income-contract.png"/>-->
-<!--            <div class="workspace-item-text">收入合同</div>-->
-<!--          </div>-->
-<!--          <div class="workspace-item" @click="workspaceJump('/projectManagement/CommitteeMaintenance')">-->
-<!--            <img src="@/assets/imgs/homePage/committee-maintenance.png"/>-->
-<!--            <div class="workspace-item-text">分标委维护</div>-->
-<!--          </div>-->
-<!--        </div>-->
+      <!-- 全所收入统计 累计-->
+      <single-month-total-echarts class="single-month-total m-t-10"></single-month-total-echarts>
+      <!-- 全所收入统计 累计-->
 
-<!--      </a-card>-->
+     <section class="wrap">
+       <!-- 科室总体统计 -->
+       <department-total-echarts class="depart-total m-t-10"></department-total-echarts>
+       <!-- 科室总体统计 -->
 
-<!--      &lt;!&ndash;    数据统计&ndash;&gt;-->
-<!--      <a-card :bordered="false" class="data-statistics">-->
-<!--        &lt;!&ndash;      标题&ndash;&gt;-->
-<!--        <div class="home-part-title"><img src="@/assets/imgs/icon/icon_data_statistics.png"/>数据统计</div>-->
-<!--        <div class="divider"></div>-->
+       <!-- 收入分类统计 -->
+       <income-sort-echarts class="income-sort m-t-10"></income-sort-echarts>
+       <!-- 收入分类统计 -->
+     </section>
 
-<!--        <div class="data-statistics-container">-->
-<!--          <div class="data-statistics-item bg-payment">-->
-<!--            <div class="item-left">-->
-<!--              本月新增收款项-->
-<!--            </div>-->
-<!--            <a-tooltip>-->
-<!--              <template slot="title">{{ statisticsData.nowMonthAddAmount }}</template>-->
-<!--              <div class="item-right">{{ statisticsData.nowMonthShowAddAmount }}</div>-->
-<!--            </a-tooltip>-->
-<!--          </div>-->
-
-<!--          <div class="data-statistics-item bg-account">-->
-<!--            <div class="item-left">-->
-<!--              本月到账(万元)-->
-<!--            </div>-->
-<!--            <a-tooltip>-->
-<!--              <template slot="title">{{ statisticsData.nowMonthAmount }}</template>-->
-<!--              <div class="item-right">{{ statisticsData.nowMonthShowAmount }}</div>-->
-<!--            </a-tooltip>-->
-<!--          </div>-->
-
-<!--          <div class="data-statistics-item bg-mail">-->
-<!--            <div class="item-left">-->
-<!--              本月邮寄项-->
-<!--            </div>-->
-<!--            <a-tooltip>-->
-<!--              <template slot="title">{{ statisticsData.nowMonthMail }}</template>-->
-<!--              <div class="item-right">{{ statisticsData.nowMonthShowMail }}</div>-->
-<!--            </a-tooltip>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </a-card>-->
-<!--    </div>-->
-
-<!--    <div>-->
-<!--      &lt;!&ndash;    统计报表&ndash;&gt;-->
-<!--      <a-card :bordered="false" class="statistical-reports">-->
-<!--        &lt;!&ndash;      标题&ndash;&gt;-->
-<!--        <div class="home-part-title"><img src="@/assets/imgs/icon/icon_home_report.png"/>统计报表</div>-->
-<!--        <div class="divider"></div>-->
-
-<!--        <div class="statistical-reports-container">-->
-<!--          &lt;!&ndash;          个人统计and科室统计&ndash;&gt;-->
-<!--          <div class="container-box">-->
-<!--            &lt;!&ndash;            个人统计&ndash;&gt;-->
-<!--            <div class="container-item">-->
-<!--              <div class="container-item-title">个人统计（前10）</div>-->
-<!--              <template v-if="personalData.length > 0">-->
-<!--                <div class="container-item-echarts" id="personalStatistics"></div>-->
-<!--              </template>-->
-<!--              <a-empty v-else/>-->
-<!--            </div>-->
-<!--            <div class="container-item">-->
-<!--              <div class="container-item-title">科室统计（前10）</div>-->
-<!--              <template v-if="departData.length > 0">-->
-<!--                <div class="container-item-echarts" id="departStatistics"></div>-->
-<!--              </template>-->
-<!--              <a-empty v-else/>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--          &lt;!&ndash;          工作组统计and企业统计&ndash;&gt;-->
-<!--          <div class="container-box">-->
-<!--            &lt;!&ndash;            个人统计&ndash;&gt;-->
-<!--            <div class="container-item">-->
-<!--              <div class="container-item-title">工作组统计（前10）</div>-->
-<!--              <template v-if="workingGroupData.length > 0">-->
-<!--                <div class="container-item-echarts" id="workingGroupStatistics"></div>-->
-<!--              </template>-->
-<!--              <a-empty v-else/>-->
-<!--            </div>-->
-<!--            <div class="container-item">-->
-<!--              <div class="container-item-title">企业统计（前10）</div>-->
-<!--              <template v-if="companyData.length > 0">-->
-<!--                <div class="container-item-echarts" id="companyStatistics"></div>-->
-<!--              </template>-->
-<!--              <a-empty v-else/>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </a-card>-->
-<!--    </div>-->
-    <user-announcement-list :is-show-seach="true"></user-announcement-list>
-    <div class="download">
-      点击下载<span class="primary-color" @click="downloadManual">管理端使用手册</span>
-      <span style="margin-left: 10px">技术支持电话：022-84379290</span>
-    </div>
+      <!-- 企业客户统计（合同额前十）-->
+      <all-money-ten-echarts class="all-money m-t-10"></all-money-ten-echarts>
+      <!-- 企业客户统计（合同额前十）-->
+    </template>
+    <!--    所领导 部门领导展示统计图 -->
 
   </div>
 </template>
 
 <script>
-import * as echarts from 'echarts'
-import { homePageStatistics, homePageDataStatistics } from '../../api/incomePaymentsApi'
 
 import UserAnnouncementList from '@views/system/UserAnnouncementList'
+import SingleMonthEcharts from '@views/dashboard/SingleMonthEcharts'
+import SingleMonthTotalEcharts from '@views/dashboard/SingleMonthTotalEcharts'
+import DepartmentTotalEcharts from '@views/dashboard/DepartmentTotalEcharts'
+import IncomeSortEcharts from '@views/dashboard/IncomeSortEcharts'
+import AllMoneyTenEcharts from '@views/dashboard/AllMoneyTenEcharts'
 
 export default {
   name: 'Analysis',
   components: {
-    UserAnnouncementList
+    UserAnnouncementList,
+    SingleMonthEcharts,
+    SingleMonthTotalEcharts,
+    DepartmentTotalEcharts,
+    IncomeSortEcharts,
+    AllMoneyTenEcharts
+  },
+  computed: {
+    // 所领导 部门负责人 还是其他角色
+    roleCoe() {
+      return false
+    }
   },
   data() {
-    return {
-      // 数据统计数据
-      statisticsData: {},
-      // 屏幕宽度
-      screenWidth: document.body.clientWidth,
-      // 个人统计
-      personalData: [],
-      // 科室统计
-      departData: [],
-      // 工作组统计
-      workingGroupData: [],
-      // 企业统计
-      companyData: [],
-      // echartsOption
-      option: {
-        legend: {
-          type: 'plain',
-          orient: 'vertical',
-          width: 20,
-          right: 10,
-          top: 20,
-          bottom: 20,
-          itemGap: 30, // 图例间距
-          itemWidth: 13,
-          data: [],
-          formatter: function (name) {
-            return name.length > 7 ? name.substr(0, 7) + '...' : name
-          },
-          tooltip: {
-            show: true
-          }
-        },
-        tooltip: {
-          trigger: 'item'
-        },
-        color: ['#117FFA', '#06A1B3', '#6D62FF', '#60C39A', '#31C5E1'],
-        series: [
-          {
-            type: 'pie',
-            radius: ['50%', '70%'],
-            left: 20,
-            width: '50%',
-            label: {
-              show: false,
-              position: 'center',
-              formatter: function (params) {
-                return params.name.length > 8 ? params.name.substr(0, 8) + '...' : params.name
-              }
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: '16',
-                fontWeight: 'bold'
-              }
-            },
-            labelLine: {
-              show: false
-            },
-            data: []
-          }
-        ]
-      }
-    }
+    return {}
   },
   created() {
-    // this.initDataStaticsData()
   },
   mounted() {
-    // this.getStatisticsData().then(() => {
-    //   this.initPersonalStatisticsEcharts()
-    //   this.initDepartStatisticsEcharts()
-    //   this.initWorkingGroupStatisticsEcharts()
-    //   this.initCompanyStatisticsEcharts()
-    // })
   },
   methods: {
-    // 下载使用手册
-    downloadManual(){
-      window.open('http://cwp.catarc.org.cn:8066/管理端使用手册.docx','_self')
+    downloadManual() {
+      window.open('http://cwp.catarc.org.cn:8066/管理端使用手册.docx', '_self')
     },
-    getStatisticsData() {
-      return new Promise(resolve => {
-        homePageStatistics().then(res => {
-          this.personalData = res.result.principalPeople
-          this.departData = res.result.depart
-          this.workingGroupData = res.result.payWorkingGroup
-          this.companyData = res.result.company
-          resolve()
-        })
-      })
-    },
-    initDataStaticsData() {
-      homePageDataStatistics().then(res => {
-        this.statisticsData = res.result
-        // 2021-09-28 author:fac 后端修改了返回的数据格式 我加了toString
-        this.statisticsData.nowMonthShowAddAmount = res.result.nowMonthAddAmount.toString().slice(0, 3)
-        this.statisticsData.nowMonthShowAmount = res.result.nowMonthAmount.toString().slice(0, 3)
-        this.statisticsData.nowMonthShowMail = res.result.nowMonthMail.toString().slice(0, 3)
-      })
-    },
-    /**
-     * 初始化个人统计echarts
-     */
-    initPersonalStatisticsEcharts() {
-      if (this.personalData.length === 0) {
-        return
-      }
-      let strData = this.personalData
-      let arr = []
-      strData.forEach(item => {
-        item.name = item.principalName
-        item.value = item.comeAllMoney
-        arr.push(item)
-      })
-      // IE不兼容的代码
-      // let strData = JSON.stringify(this.personalData)
-      // console.log(typeof strData)
-      // strData = strData.replaceAll('principalName', 'name').replaceAll('comeAllMoney', 'value')
-      // let arr = JSON.parse(strData)
-      arr.filter(tt => tt.value = Number(tt.value))
-      let legendData = []
-      arr.forEach(item => {
-        legendData.push(item.name)
-      })
-      let option = this.option
-      option.series[0].data = arr
-      option.legend.data = legendData
-      let personalBox = document.getElementById('personalStatistics')
-      let personalEchart = echarts.init(personalBox)
-      personalEchart.setOption(option)
-      window.addEventListener('resize', () => {
-        personalEchart.resize()
-      })
-    },
-    /**
-     * 初始化科室统计echarts
-     */
-    initDepartStatisticsEcharts() {
-      if (this.departData.length === 0) {
-        return
-      }
-      let strData = this.departData
-      let arr = []
-      strData.forEach(item => {
-        item.name = item.departName
-        item.value = item.comeAllMoney
-        arr.push(item)
-      })
-      // IE不兼容的代码
-      // let strData = JSON.stringify(this.departData)
-      // strData = strData.replaceAll('departName', 'name').replaceAll('comeAllMoney', 'value')
-      // let arr = JSON.parse(strData)
-      arr.filter(tt => tt.value = Number(tt.value))
-      let legendData = []
-      arr.forEach(item => {
-        legendData.push(item.name)
-      })
-      let option = this.option
-      option.series[0].data = arr
-      option.legend.data = legendData
-      let departBox = document.getElementById('departStatistics')
-      let departEchart = echarts.init(departBox)
-      departEchart.setOption(option)
-      window.addEventListener('resize', () => {
-        departEchart.resize()
-      })
-    },
-    /**
-     * 初始化工作组统计echarts
-     */
-    initWorkingGroupStatisticsEcharts() {
-      if (this.workingGroupData.length === 0) {
-        return
-      }
-      let strData = this.workingGroupData
-      let arr = []
-      strData.forEach(item => {
-        item.name = item.workGroup
-        item.value = item.comeAllMoney
-        arr.push(item)
-      })
-      // IE不兼容的代码
-      // let strData = JSON.stringify(this.workingGroupData)
-      // strData = strData.replaceAll('workGroup', 'name').replaceAll('comeAllMoney', 'value')
-      // let arr = JSON.parse(strData)
-      arr.filter(tt => tt.value = Number(tt.value))
-      let legendData = []
-      arr.forEach(item => {
-        legendData.push(item.name)
-      })
-      let option = this.option
-      option.series[0].data = arr
-      option.legend.data = legendData
-      let departBox = document.getElementById('workingGroupStatistics')
-      let departEchart = echarts.init(departBox)
-      departEchart.setOption(option)
-      window.addEventListener('resize', () => {
-        departEchart.resize()
-      })
-    },
-    /**
-     * 初始化企业统计echarts
-     */
-    initCompanyStatisticsEcharts() {
-      if (this.companyData.length === 0) {
-        return
-      }
-      let strData = this.companyData
-      let arr = []
-      strData.forEach(item => {
-        item.name = item.chargeCompanyName
-        item.value = item.comeAllMoney
-        arr.push(item)
-      })
-      // IE不兼容的代码
-      // let strData = JSON.stringify(this.companyData)
-      // strData = strData.replaceAll('chargeCompanyName', 'name').replaceAll('comeAllMoney', 'value')
-      // let arr = JSON.parse(strData)
-      arr.filter(tt => tt.value = Number(tt.value))
-      let legendData = []
-      arr.forEach(item => {
-        legendData.push(item.name)
-      })
-      console.log(arr)
-      let option = this.option
-      option.series[0].data = arr
-      option.legend.data = legendData
-      let departBox = document.getElementById('companyStatistics')
-      let departEchart = echarts.init(departBox)
-      departEchart.setOption(option)
-      window.addEventListener('resize', () => {
-        departEchart.resize()
-      })
-    },
-    /**
-     * 工作区按钮跳转
-     * @param path
-     */
-    workspaceJump(path) {
-      this.$router.push({
-        path: path
-      })
-    }
   }
 }
 </script>
 
-<style scoped lang="less">
-//上部分整体
-.page-top {
+<style lang="less" scoped>
+// 全所收入统计 单月
+.single-month,
+.single-month-total {
+  width: 100%;
+  height: 700px;
+  background: #fff;
+}
+
+.m-t-10 {
+  margin-top: 10px;
+}
+.wrap {
+  width: 100%;
+  height: auto;
   display: flex;
   justify-content: space-between;
 }
 
-//各部分的title
-.home-part-title {
-  font-size: 16px;
-  font-family: PingFang SC, PingFang SC-Medium;
-  font-weight: 500;
-  color: #666666;
-  display: flex;
-  align-items: center;
-
-  & > img {
-    margin-right: 10px;
-  }
+// 科室总体统计
+.depart-total {
+  width: 64%;
+  min-width: 650px;
+  height: auto;
+  background: #fff;
+}
+// 分类统计
+.income-sort {
+  margin-left: 8px;
+  width: 35%;
+  min-width: 350px;
+  height: auto;
+  background: #fff;
+}
+// 合同金额前十
+.all-money {
+  width: 100%;
+  height: auto;
+  background: #fff;
 }
 
-//标题下横线
-.divider {
-  height: 2px;
-  background-color: #F0F2F5;
-  margin: 20px -24px;
-}
-
-//工作区
-.workspace {
-  margin-right: 10px;
-  width: calc(50% - 10px);
-
-  &-container {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &-item {
-    width: 13%;
-    max-width: 80px;
-    height: 130px;
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    & > img {
-      display: inline-block;
-      max-height: 68px;
-      max-width: 68px;
-      object-fit: cover;
-    }
-
-    &-text {
-      max-width: 100%;
-      height: 40px;
-      line-height: 20px;
-      text-align: center;
-      margin-top: 15px;
-      font-size: 16px;
-      font-family: PingFang SC, PingFang SC-Regular;
-      font-weight: 400;
-      color: #666666;
-      word-break: break-all;
-    }
-  }
-}
-
-//数据统计
-.data-statistics {
-  margin-left: 10px;
-  width: calc(50% - 10px);
-
-  &-container {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  &-item {
-    width: calc(33% - 10px);
-    height: 130px;
-    border-radius: 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-  }
-
-  .item-left {
-    padding-left: 15px;
-    height: 100%;
-    padding-top: 45px;
-    font-size: 18px;
-    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
-    font-weight: 400;
-    color: #ffffff;
-  }
-
-  .item-right {
-    flex-shrink: 0;
-    padding-right: 10px;
-    cursor: pointer;
-    max-height: 105px;
-    font-size: 36px;
-    font-family: Acre, Acre-Medium;
-    font-weight: bold;
-    text-align: left;
-    color: #ffffff;
-    line-height: 45px;
-    //word-break: break-all;
-    overflow: hidden;
-    //display: -webkit-box;
-    //-webkit-box-orient: vertical;
-    //-webkit-line-clamp: 2;
-  }
-
-  .bg-payment {
-    background: url("../../assets/imgs/homePage/bg-payment.png") 100%;
-  }
-
-  .bg-account {
-    background: url("../../assets/imgs/homePage/bg-account.png") 100%;
-  }
-
-  .bg-mail {
-    background: url("../../assets/imgs/homePage/bg-mail.png") 100%;
-  }
-}
-
-//统计报表
-.statistical-reports {
-  margin-top: 20px;
-  display: flex;
-  flex-direction: column;
-
-  .container-box {
-    margin-bottom: 20px;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .container-item {
-    width: calc(50% - 10px);
-    box-shadow: -4px 0px 24px 24px rgba(51, 51, 51, 0.05);
-    border: 1px solid #f5f5f5;
-    border-radius: 8px;
-    background: #ffffff;
-    padding: 20px;
-    box-sizing: border-box;
-
-    &-title {
-      font-size: 16px;
-      font-family: PingFang SC, PingFang SC-Medium;
-      font-weight: 500;
-      color: #333333;
-    }
-
-    &-echarts {
-      //position: absolute;
-      width: 100%;
-      height: 250px;
-    }
-  }
-}
 .download {
   margin-top: 8px;
   font-size: 16px;
   text-align: center;
 }
+
 .primary-color {
-  color:#069F99;
+  color: #069F99;
   cursor: pointer;
 }
 </style>
diff --git a/src/views/dashboard/DepartmentTotalEcharts.vue b/src/views/dashboard/DepartmentTotalEcharts.vue
new file mode 100644
index 0000000..e4fea9a
--- /dev/null
+++ b/src/views/dashboard/DepartmentTotalEcharts.vue
@@ -0,0 +1,193 @@
+<!--科室总体统计-->
+<template>
+  <div class="container">
+    <div class="title">科室总体统计</div>
+    <div class="echarts-box" id="departmentTotal"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {JeroListMixin} from '@/mixins/JeroListMixin'
+import {getAction} from '@api/manage'
+
+export default {
+  name: 'DepartmentTotalEcharts',
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      disableMixinCreated: true,
+      url: {
+        list: '/statistics/allProjectStatistics/listDepartment',
+      },
+      // 给定当年作为来款年份默认查询条件
+      queryParam: {
+        year: new Date().getFullYear().toString()
+      },
+      lastQueryParam: {
+        year: new Date().getFullYear().toString()
+      },
+      echartsData: {
+        allMoney: [],
+        confirmAmount: [],
+      }
+    }
+  },
+  mounted() {
+    this.loadData(1)
+  },
+  methods: {
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let params = this.getQueryParams()//查询条件
+      this.loading = true
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          this.initEcharts(res.result.pageList.records)
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+        this.loading = false
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    initEcharts(data) {
+      console.log(data)
+      // 处理 x轴数据
+      let xData = data.reduce((pre, val) => {
+        return pre.concat(val.departName || '')
+      }, [])
+      // 处理y轴数据
+      data.map(item => {
+        this.echartsData.allMoney.push(item.allMoney)
+        this.echartsData.confirmAmount.push(item.confirmAmount)
+      })
+
+      let chartDom = document.getElementById('departmentTotal')
+      let myChart = echarts.init(chartDom)
+      let option
+
+      option = {
+        color:['#069F99','#FFA17A'],
+        grid: {
+          left: '0%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        legend: {
+          right: '2%'
+        },
+        tooltip:{
+          trigger: 'axis',
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = ''
+            params.forEach(item => {
+              dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <div>
+            <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${item.color};border-radius: 3px"></span>
+            <span style="color:#666">${item.seriesName}</span>
+</div>
+            <div style="color:#333;">${item.data}</div>
+          </div>
+        </div>`
+            })
+            return dataStr
+          }
+        },
+        xAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#F5F5F5'
+            }
+          },
+          axisLabel: {
+            show: true,
+            color: '#999'
+          },
+          // 刻度线设置
+          axisTick: {
+            show: false
+          },
+          type: 'category',
+          data: xData
+        },
+        yAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#F5F5F5'
+            }
+          },
+          axisLabel: {
+            show: true,
+            color: '#8E8E95'
+          },
+          type: 'value',
+          splitLine: {
+            lineStyle: {
+              color: '#F5F5F5',
+              type: 'dashed'
+            }
+          },
+        },
+        series: [
+          {
+            name:'合同金额',
+            data: this.echartsData.allMoney,
+            type: 'bar',
+            itemStyle:{
+              borderRadius:[8,8,0,0]
+            }
+          },
+          {
+            name:'确认收入金额',
+            data: this.echartsData.confirmAmount,
+            type: 'bar',
+            itemStyle:{
+              borderRadius:[8,8,0,0]
+            }
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.container {
+  padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+}
+.title {
+  text-align: left;
+  font-weight: 500;
+  color: #333;
+  font-size: 20px;
+}
+
+.echarts-box {
+  width: 100%;
+  height: 400px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/IncomeSortEcharts.vue b/src/views/dashboard/IncomeSortEcharts.vue
new file mode 100644
index 0000000..975fa30
--- /dev/null
+++ b/src/views/dashboard/IncomeSortEcharts.vue
@@ -0,0 +1,135 @@
+<!-- 分类统计-->
+<template>
+  <div class="container">
+    <div class="title">收入分类统计 </div>
+    <div class="operator">
+      <span @click="toggleEcharts('allMoney')" class="operator-left"  :class="{'active':activeIndex === 'allMoney'}">合同额</span>
+      <span @click="toggleEcharts('confirmAmount')" class="operator-right" :class="{'active':activeIndex === 'confirmAmount'}">收入额</span>
+    </div>
+    <div  class="echarts-box" id="incomeSort"> </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'IncomeSortEcharts',
+  data() {
+    return {
+      activeIndex:'allMoney'
+    }
+  },
+  mounted() {
+    this.initEcharts()
+  },
+  methods:{
+    toggleEcharts(key) {
+      this.activeIndex = key
+
+    },
+    initEcharts() {
+      let chartDom = document.getElementById('incomeSort')
+      let myChart = echarts.init(chartDom)
+      let option
+
+      option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          bottom:'2%',
+          left: 'center'
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['30%', '60%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 2
+            },
+            label: {
+              show: false,
+              position: 'center'
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: '40',
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              { value: 1048, name: 'Search Engine' },
+              { value: 735, name: 'Direct' },
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' }
+            ]
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.container {
+  position: relative;
+  padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+}
+.operator {
+  color: #069F99;
+  position: absolute;
+  user-select: none;
+  display: flex;
+  font-size: 12px;
+  justify-content: space-around;
+  align-items: center;
+  right: 20px;
+  top: 20px;
+  width: 120px;
+  height: 35px;
+  line-height: 35px;
+  border: 1px solid #069F99;
+  border-radius: 4px;
+  cursor: pointer;
+  &-left {
+    width: 50%;
+    text-align: center;
+  }
+  &-right {
+    width: 50%;
+    text-align: center;
+  }
+}
+.active {
+  background: #069F99;
+  color: #fff;
+}
+.echarts-box {
+  min-width: 300px;
+  width: 100%;
+  height: 400px;
+}
+.title {
+  text-align: left;
+  font-weight: 500;
+  color: #333;
+  font-size: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/SingleMonthEcharts.vue b/src/views/dashboard/SingleMonthEcharts.vue
new file mode 100644
index 0000000..a54173e
--- /dev/null
+++ b/src/views/dashboard/SingleMonthEcharts.vue
@@ -0,0 +1,392 @@
+<!--全所收入 单月统计echarts-->
+<template>
+  <div class="container">
+    <!--    echarts-->
+    <div class="title">全所收入统计 (单月)</div>
+    <div class="echarts-box" id="singleMonthEcharts"></div>
+    <!--    echarts-->
+
+    <!--   表格区域beign -->
+    <div style="width: 100%">
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="projectId"
+        :columns="columns"
+        :scroll="{x: 1500}"
+        :dataSource="dataSource"
+        :pagination="false"
+        :loading="loading"
+        @change="handleTableChange"
+        class="j-table-force-nowrap main-table">
+
+        <template slot="text" slot-scope="text">
+          <a-tooltip>
+            <template slot="title">{{ text }}</template>
+            <div class="table-text">{{ text }}</div>
+          </a-tooltip>
+        </template>
+
+        <template slot="allMoney" slot-scope="text">
+          <a-tooltip>
+            <template slot="title">{{ formatMoney(text) }}</template>
+            <div class="table-text">{{ formatMoney(text) }}</div>
+          </a-tooltip>
+        </template>
+      </a-table>
+    </div>
+    <!--   表格区域end -->
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {JeroListMixin} from '@/mixins/JeroListMixin'
+import {MonthData} from '@views/statisticalReport/statisticData'
+import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
+
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 150,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
+MonthData.map(tt => {
+  columns.push({
+    title: tt.name,
+    align: 'center',
+    width: 100,
+    dataIndex: tt.key,
+    scopedSlots: {customRender: 'allMoney'}
+  })
+})
+
+
+export default {
+  name: 'SingleMonthEcharts',
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      columns,
+      url: {
+        list: '/index/lineChartList'
+      },
+      disableMixinCreated:true,
+      echartsData:{
+        allMoney:[],
+        confirmAmount:[],
+        billMoney:[],
+        comeAllMoney:[]
+      }
+    }
+  },
+  mounted() {
+    this.loadData(1)
+  },
+  methods: {
+    formatMoney,
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let params = this.getQueryParams()//查询条件
+      this.loading = true
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          let dataSource = res.result
+          //  树形结构的数据 ，修改成table可以直接展示的数据，默认只有四行数据
+          let tableData = [
+            {indexName: '合同金额'},
+            {indexName: '确认收入金额'},
+            {indexName: '开票金额'},
+            {indexName: '到账金额'},
+          ]
+
+          dataSource.map((item, index) => {
+            let keyItem = MonthData.find(ele => Number(ele.value) === (index + 1))
+            if (keyItem) {
+              let key = keyItem.key
+              tableData[0][key] = item.allMoney // 合同金额
+              tableData[1][key] = item.confirmAmount // 确认收入金额
+              tableData[2][key] = item.billMoney // 开票金额
+              tableData[3][key] = item.comeAllMoney // 到账金额
+            }
+          })
+          this.initEchartsData(res.result)
+          // 初始化 echarts
+          this.initEcharts()
+          this.dataSource = tableData
+          console.log(this.dataSource)
+
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 将后端返回的数据 处理成 echarts需要的数据 格式
+    initEchartsData(data) {
+      data.map(item =>{
+        this.echartsData.allMoney.push(item.allMoney)
+        this.echartsData.confirmAmount.push(item.confirmAmount)
+        this.echartsData.billMoney.push(item.billMoney)
+        this.echartsData.comeAllMoney.push(item.comeAllMoney)
+      })
+    },
+    initEcharts() {
+      // 处理x轴数据
+      let xData = MonthData.reduce((pre, val) => {
+        return pre.concat(val.name)
+      }, [])
+
+      let chartDom = document.getElementById('singleMonthEcharts')
+      let myChart = echarts.init(chartDom)
+      let option
+
+      option = {
+        color: ['#069F99', '#FA9F79', '#728ECC', '#88C87E'],
+        tooltip: {
+          trigger: 'axis',
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = ''
+            params.forEach(item => {
+              dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#fff;border: 2px solid ${item.color};border-radius: 50%"></span>
+            <span>${item.seriesName}</span>
+            <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
+          </div>
+        </div>`
+            })
+            return dataStr
+          }
+        },
+        legend: {
+          data: ['合同金额', '确认收入金额', '开票金额', '到账金额'],
+          right: '2%'
+        },
+        grid: {
+          left: '0%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {},
+        xAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#F5F5F5'
+            }
+          },
+          axisLabel: {
+            show: true,
+            color: '#999999'
+          },
+          type: 'category',
+          boundaryGap: true,
+          // 刻度线设置
+          axisTick: {
+            show: false
+          },
+          data: xData
+        },
+        yAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#f2f2f2'
+            }
+          },
+          axisLabel: {
+            show: true,
+            color: '#8E8E95'
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#F5F5F5',
+              type: 'dashed'
+            }
+          },
+          type: 'value',
+          nameTextStyle: {
+            color: '#8E8E95'
+          },
+        },
+        series: [
+          {
+            name: '合同金额',
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData.allMoney,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#1BCDC6',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#1BCDC6'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            name: '确认收入金额',
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData.confirmAmount,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#EBAB91',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#EBAB91'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            name: '开票金额',
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData.billMoney,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#9CB7F2',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#9CB7F2'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            name: '到账金额',
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData.comeAllMoney,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#B6F1AC',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#B6F1AC'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+
+          },
+        ]
+      }
+
+      option && myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.container {
+  padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.title {
+  text-align: left;
+  font-weight: 500;
+  color: #333;
+  font-size: 20px;
+}
+
+.echarts-box {
+  width: 100%;
+  height: 400px;
+}
+
+/deep/ .ant-table-thead tr > th {
+  color: #050525;
+  font-weight: bold;
+  background: rgb(245,245,246);
+  border: none;
+}
+/deep/ .ant-table-tbody tr > td {
+  color: rgba(5, 5, 37, 0.8);
+  border: none;
+  border-bottom: 1px solid rgb(245,245,246);
+}
+
+/deep/ .ant-table-tbody tr > td:first-child {
+  color: #050525;
+  font-weight: bold;
+  background: rgb(245,245,246);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/SingleMonthTotalEcharts.vue b/src/views/dashboard/SingleMonthTotalEcharts.vue
new file mode 100644
index 0000000..28eda1e
--- /dev/null
+++ b/src/views/dashboard/SingleMonthTotalEcharts.vue
@@ -0,0 +1,391 @@
+<!--全所收入 累计统计echarts-->
+<template>
+  <div class="container">
+    <!--    echarts-->
+    <div class="title">全所收入统计 (累计)</div>
+    <div class="echarts-box" id="singleMonthTotalEcharts"></div>
+    <!--    echarts-->
+
+    <!--   表格区域beign -->
+    <div style="width: 100%">
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="projectId"
+        :columns="columns"
+        :scroll="{x: 1500}"
+        :dataSource="dataSource"
+        :pagination="false"
+        :loading="loading"
+        @change="handleTableChange"
+        class="j-table-force-nowrap main-table">
+
+        <template slot="text" slot-scope="text">
+          <a-tooltip>
+            <template slot="title">{{ text }}</template>
+            <div class="table-text">{{ text }}</div>
+          </a-tooltip>
+        </template>
+
+        <template slot="allMoney" slot-scope="text">
+          <a-tooltip>
+            <template slot="title">{{ formatMoney(text) }}</template>
+            <div class="table-text">{{ formatMoney(text) }}</div>
+          </a-tooltip>
+        </template>
+      </a-table>
+    </div>
+    <!--   表格区域end -->
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import {JeroListMixin} from '@/mixins/JeroListMixin'
+import {MonthDataTotal} from '@views/statisticalReport/statisticData'
+import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
+
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 150,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
+MonthDataTotal.map(tt => {
+  columns.push({
+    title: tt.name,
+    align: 'center',
+    width: 100,
+    dataIndex: tt.key,
+    scopedSlots: {customRender: 'allMoney'}
+  })
+})
+
+
+export default {
+  name: 'SingleMonthEcharts',
+  mixins: [JeroListMixin],
+  data() {
+    return {
+      columns,
+      url: {
+        list: '/index/cumulativeGraphList'
+      },
+      disableMixinCreated:true,
+      echartsData:{
+        allMoney:[],
+        confirmAmount:[],
+        billMoney:[],
+        comeAllMoney:[]
+      }
+    }
+  },
+  mounted() {
+    this.loadData(1)
+  },
+  methods: {
+    formatMoney,
+    loadData(arg) {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      //加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.ipagination.current = 1
+      }
+      let params = this.getQueryParams()//查询条件
+      this.loading = true
+      getAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          let dataSource = res.result
+          //  树形结构的数据 ，修改成table可以直接展示的数据，默认只有四行数据
+          let tableData = [
+            {indexName: '合同金额'},
+            {indexName: '确认收入金额'},
+            {indexName: '开票金额'},
+            {indexName: '到账金额'},
+          ]
+
+          dataSource.map((item, index) => {
+            let keyItem = MonthDataTotal.find(ele => Number(ele.value) === (index + 1))
+            if (keyItem) {
+              let key = keyItem.key
+              tableData[0][key] = item.allMoney // 合同金额
+              tableData[1][key] = item.confirmAmount // 确认收入金额
+              tableData[2][key] = item.billMoney // 开票金额
+              tableData[3][key] = item.comeAllMoney // 到账金额
+            }
+          })
+          this.initEchartsData(res.result)
+          // 初始化 echarts
+          this.initEcharts()
+          this.dataSource = tableData
+
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    // 将后端返回的数据 处理成 echarts需要的数据 格式
+    initEchartsData(data) {
+      data.map(item =>{
+        this.echartsData.allMoney.push(item.allMoney)
+        this.echartsData.confirmAmount.push(item.confirmAmount)
+        this.echartsData.billMoney.push(item.billMoney)
+        this.echartsData.comeAllMoney.push(item.comeAllMoney)
+      })
+    },
+    initEcharts() {
+      // 处理x轴数据
+      let xData = MonthDataTotal.reduce((pre, val) => {
+        return pre.concat(val.name)
+      }, [])
+
+      let chartDom = document.getElementById('singleMonthTotalEcharts')
+      let myChart = echarts.init(chartDom)
+      let option
+
+      option = {
+        color: ['#069F99', '#FA9F79', '#728ECC', '#88C87E'],
+        tooltip: {
+          trigger: 'axis',
+          formatter: params => {
+            // 获取xAxis data中的数据
+            let dataStr = ''
+            params.forEach(item => {
+              dataStr += `<div>
+          <div style="margin: 0 8px;">
+            <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#fff;border: 2px solid ${item.color};border-radius: 50%"></span>
+            <span>${item.seriesName}</span>
+            <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
+          </div>
+        </div>`
+            })
+            return dataStr
+          }
+        },
+        legend: {
+          data: ['合同金额', '确认收入金额', '开票金额', '到账金额'],
+          right: '2%'
+        },
+        grid: {
+          left: '0%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {},
+        xAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#F5F5F5'
+            }
+          },
+          axisLabel: {
+            show: true,
+            color: '#999999'
+          },
+          type: 'category',
+          boundaryGap: true,
+          // 刻度线设置
+          axisTick: {
+            show: false
+          },
+          data: xData
+        },
+        yAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#f2f2f2'
+            }
+          },
+          axisLabel: {
+            show: true,
+            color: '#8E8E95'
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#F5F5F5',
+              type: 'dashed'
+            }
+          },
+          type: 'value',
+          nameTextStyle: {
+            color: '#8E8E95'
+          },
+        },
+        series: [
+          {
+            name: '合同金额',
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData.allMoney,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#1BCDC6',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#1BCDC6'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            name: '确认收入金额',
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData.confirmAmount,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#EBAB91',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#EBAB91'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            name: '开票金额',
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData.billMoney,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#9CB7F2',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#9CB7F2'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+          },
+          {
+            name: '到账金额',
+            type: 'line',
+            showSymbol: false,
+            symbol: 'circle',
+            symbolSize: 8,
+            data: this.echartsData.comeAllMoney,
+            itemStyle: {
+              emphasis: {
+                color: '#fff',//拐点颜色
+                borderColor: '#B6F1AC',//拐点边框颜色
+                borderWidth: 2//拐点边框大小
+              }
+            },
+            areaStyle: {
+              opacity: 0.2,
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: '#B6F1AC'
+                },
+                {
+                  offset: 1,
+                  color: '#ffffff'
+                }
+              ])
+            },
+
+          },
+        ]
+      }
+
+      option && myChart.setOption(option)
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.container {
+  padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.title {
+  text-align: left;
+  font-weight: 500;
+  color: #333;
+  font-size: 20px;
+}
+
+.echarts-box {
+  width: 100%;
+  height: 400px;
+}
+
+/deep/ .ant-table-thead tr > th {
+  color: #050525;
+  font-weight: bold;
+  background: rgb(245,245,246);
+  border: none;
+}
+/deep/ .ant-table-tbody tr > td {
+  color: rgba(5, 5, 37, 0.8);
+  border: none;
+  border-bottom: 1px solid rgb(245,245,246);
+}
+
+/deep/ .ant-table-tbody tr > td:first-child {
+  color: #050525;
+  font-weight: bold;
+  background: rgb(245,245,246);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/statisticalReport/statisticData.js b/src/views/statisticalReport/statisticData.js
index bdde6b2..0cd4a3e 100644
--- a/src/views/statisticalReport/statisticData.js
+++ b/src/views/statisticalReport/statisticData.js
@@ -11,4 +11,19 @@ export const MonthData = [
   {name: '10月', value: '10', key: 'October'},
   {name: '11月', value: '11', key: 'November'},
   {name: '12月', value: '12', key: 'December'},
+]
+
+export const MonthDataTotal = [
+  {name: '1月累计', value: '01', key: 'January'},
+  {name: '2月累计', value: '02', key: 'February'},
+  {name: '3月累计', value: '03', key: 'March'},
+  {name: '4月累计', value: '04', key: 'April'},
+  {name: '5月累计', value: '05', key: 'May'},
+  {name: '6月累计', value: '06', key: 'June'},
+  {name: '7月累计', value: '07', key: 'July'},
+  {name: '8月累计', value: '08', key: 'August'},
+  {name: '9月累计', value: '09', key: 'September'},
+  {name: '10月累计', value: '10', key: 'October'},
+  {name: '11月累计', value: '11', key: 'November'},
+  {name: '12月累计', value: '12', key: 'December'},
 ]
\ No newline at end of file