首页

2021-09-26 11:29:51 +08:00
parent 9f534e2381
commit d23b5a7b29
3 changed files with 153 additions and 54 deletions
@@ -64,6 +64,10 @@ const dunningReminder = (param) => postAction('/project/payWorkingGroupSubitem/r
 const copyWorkingGroup = (param) => postAction('/project/payWorkingGroup/copy', param)
 // 校验登陆人是否可以操作工作组
 const checkoutWorkingGroupPrincipal = (param) => getAction('/project/payWorkingGroup/checkoutOperation', param)
+// 首页统计图接口
+const homePageStatistics = (param) => getAction('/statistics/principalPeople/firstPage', param)
+// 首页数据统计
+const homePageDataStatistics = (param) => getAction('/home/dataStatistics', param)

 export {
  getWorkingGroupById,
@@ -97,5 +101,7 @@ export {
  distributeMemberList,
  dunningReminder,
  copyWorkingGroup,
-  checkoutWorkingGroupPrincipal
+  checkoutWorkingGroupPrincipal,
+  homePageStatistics,
+  homePageDataStatistics
 }
@@ -49,11 +49,11 @@
        <div class="data-statistics-container">
          <div class="data-statistics-item bg-payment">
            <div class="item-left">
-             本月新增收款项
+              本月新增收款项
            </div>
            <a-tooltip>
-              <template slot="title">{{ indexStyle.toString() }}</template>
-              <div class="item-right">{{ indexStyle.toString().slice(0, 3) }}</div>
+              <template slot="title">{{ statisticsData.nowMonthAddAmount }}</template>
+              <div class="item-right">{{ statisticsData.nowMonthShowAddAmount }}</div>
            </a-tooltip>
          </div>

@@ -62,8 +62,8 @@
              本月到账(万元)
            </div>
            <a-tooltip>
-              <template slot="title"></template>
-              <div class="item-right"></div>
+              <template slot="title">{{ statisticsData.nowMonthAmount }}</template>
+              <div class="item-right">{{ statisticsData.nowMonthShowAmount }}</div>
            </a-tooltip>
          </div>

@@ -72,8 +72,8 @@
              本月邮寄项
            </div>
            <a-tooltip>
-              <template slot="title"></template>
-              <div class="item-right"></div>
+              <template slot="title">{{ statisticsData.nowMonthMail }}</template>
+              <div class="item-right">{{ statisticsData.nowMonthShowMail }}</div>
            </a-tooltip>
          </div>
        </div>
@@ -120,16 +120,26 @@

 <script>
 import * as echarts from 'echarts'
-
+import { homePageStatistics, homePageDataStatistics } from '../../api/incomePaymentsApi'

 export default {
  name: 'Analysis',
  components: {},
  data() {
    return {
-      indexStyle: 1111111111111,
+      // 数据统计数据
+      statisticsData: {},
      // 屏幕宽度
      screenWidth: document.body.clientWidth,
+      // 个人统计
+      personalData: [],
+      // 科室统计
+      departData: [],
+      // 工作组统计
+      workingGroupData: [],
+      // 企业统计
+      companyData: [],
+      // echartsOption
      option: {
        legend: {
          type: 'plain',
@@ -137,64 +147,159 @@ export default {
          right: 10,
          top: 20,
          bottom: 20,
-          itemGap: 20,
+          itemGap: 30, // 图例间距
          itemWidth: 15,
          data: ['Search Engine', 'Direct', 'Email', 'Union Ads', 'Video Ads', 'Search Engine1', 'Direct1', 'Email1', 'Union Ads1', 'Video Ads1']
        },
+        tooltip: {
+          trigger: 'item'
+        },
        color: ['#117FFA', '#06A1B3', '#6D62FF', '#60C39A', '#31C5E1'],
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
-            left: 0,
+            left: 20,
            width: '50%',
            label: {
-              show: true
+              show: false,
+              position: 'center'
            },
            emphasis: {
              label: {
-                show: true
+                show: true,
+                fontSize: '16',
+                fontWeight: 'bold'
              }
            },
            labelLine: {
-              show: true
+              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' },
-              { value: 1048, name: 'Search Engine1' },
-              { value: 735, name: 'Direct1' },
-              { value: 580, name: 'Email1' },
-              { value: 484, name: 'Union Ads1' },
-              { value: 300, name: 'Video Ads1' }
-            ]
+            data: []
          }
        ]
      }
    }
  },
-  watch: {
-    screenWidth(value) {
-      console.log(value)
-    }
+  created() {
+    this.initDataStaticsData()
  },
  mounted() {
-    setTimeout(() => {
+    this.getStatisticsData().then(() => {
      this.initPersonalStatisticsEcharts()
-    },0)
+      this.initDepartStatisticsEcharts()
+      this.initWorkingGroupStatisticsEcharts()
+      this.initCompanyStatisticsEcharts()
+    })
  },
  methods: {
+    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
+        this.statisticsData.nowMonthShowAddAmount = res.result.nowMonthAddAmount.slice(0, 3)
+        this.statisticsData.nowMonthShowAmount = res.result.nowMonthAmount.slice(0, 3)
+        this.statisticsData.nowMonthShowMail = res.result.nowMonthMail.toString().slice(0, 3)
+      })
+    },
+    /**
+     * 初始化个人统计echarts
+     */
    initPersonalStatisticsEcharts() {
+      let strData = JSON.stringify(this.personalData)
+      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(this.option)
+      personalEchart.setOption(option)
      window.addEventListener('resize', () => {
        personalEchart.resize()
      })
    },
+    /**
+     * 初始化科室统计echarts
+     */
+    initDepartStatisticsEcharts() {
+      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() {
+      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() {
+      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)
+      })
+      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
@@ -293,7 +398,6 @@ export default {
  }

  .item-left {
-    flex-shrink: 0;
    width: 60%;
    padding-left: 15px;
    height: 100%;
@@ -352,7 +456,8 @@ export default {
    border: 1px solid #f5f5f5;
    border-radius: 8px;
    background: #ffffff;
-    padding: 20px;box-sizing: border-box;
+    padding: 20px;
+    box-sizing: border-box;

    &-title {
      font-size: 16px;
@@ -364,7 +469,7 @@ export default {
    &-echarts {
      //position: absolute;
      width: 100%;
-      height: 200px;
+      height: 250px;
    }
  }
 }
@@ -148,16 +148,10 @@ export default {
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
-        }, {
-          title: '项目负责人',
+        },{
+          title: '来款项目',
          align: 'center',
-          dataIndex: 'principalName',
-          scopedSlots: { customRender: 'text' }
-        }, {
-          title: '来款单位',
-          align: 'center',
-          width: 160,
-          dataIndex: 'chargeCompanyName',
+          dataIndex: 'projectName',
          scopedSlots: { customRender: 'text' }
        }, {
          title: '应收金额',
@@ -187,15 +181,9 @@ export default {
          width: 100,
          align: 'center'
        }, {
-          title: '项目负责人',
+          title: '来款项目',
          align: 'center',
-          dataIndex: 'principalName',
-          scopedSlots: { customRender: 'text' }
-        }, {
-          title: '来款单位',
-          align: 'center',
-          width: 160,
-          dataIndex: 'chargeCompanyName',
+          dataIndex: 'projectName',
          scopedSlots: { customRender: 'text' }
        }, {
          title: '应收金额',