From 90c795efac5156dd5989a8fc20859db82eb0bbde Mon Sep 17 00:00:00 2001
From: fengachen <373943794@qq.com>
Date: Thu, 15 Sep 2022 17:21:57 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BF=AE=E6=94=B9=E3=80=91=E4=B8=89?=
 =?UTF-8?q?=E5=B9=B4=E5=86=85=E7=BB=9F=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/AllMoneyTenEcharts.vue    |   9 +
 src/views/dashboard/Analysis.vue              |  42 ++-
 .../dashboard/DepartmentTotalEcharts.vue      |  11 +-
 src/views/dashboard/IncomeSortEcharts.vue     |   3 +-
 src/views/dashboard/ThreeYearEcharts.vue      | 326 ++++++++++++++++++
 5 files changed, 375 insertions(+), 16 deletions(-)
 create mode 100644 src/views/dashboard/ThreeYearEcharts.vue

diff --git a/src/views/dashboard/AllMoneyTenEcharts.vue b/src/views/dashboard/AllMoneyTenEcharts.vue
index 3918ea3..f30d2da 100644
--- a/src/views/dashboard/AllMoneyTenEcharts.vue
+++ b/src/views/dashboard/AllMoneyTenEcharts.vue
@@ -137,6 +137,15 @@ export default {
      * 处理表头
      * */
     initColumns(data) {
+      this.columns = [
+        {
+          title: '',
+          align: 'center',
+          width: 100,
+          dataIndex: 'indexName',
+          scopedSlots: {customRender: 'text'}
+        },
+      ]
       data.map((item, index) => {
         let dataIndex = 'key' + index
         this.columns.push({
diff --git a/src/views/dashboard/Analysis.vue b/src/views/dashboard/Analysis.vue
index 3e6b490..b892ac7 100644
--- a/src/views/dashboard/Analysis.vue
+++ b/src/views/dashboard/Analysis.vue
@@ -15,19 +15,24 @@
       <single-month-total-echarts class="single-month-total "></single-month-total-echarts>
       <!-- 全所收入统计 累计-->
 
-      <!--    全所收入统计 单月-->
+      <!--  全所收入统计 单月-->
       <single-month-echarts class="single-month m-t-10"></single-month-echarts>
       <!-- 全所收入统计 单月-->
 
-     <section class="wrap">
-       <!-- 科室总体统计 -->
-       <department-total-echarts class="depart-total m-t-10"></department-total-echarts>
-       <!-- 科室总体统计 -->
+      <section class="wrap">
+        <!--三年统计 -->
+        <three-year-echarts class="depart-total m-t-10"></three-year-echarts>
+        <!-- 三年统计 -->
 
-       <!-- 收入分类统计 -->
-       <income-sort-echarts class="income-sort m-t-10"></income-sort-echarts>
-       <!-- 收入分类统计 -->
-     </section>
+        <!-- 收入分类统计 -->
+        <income-sort-echarts class="income-sort m-t-10"></income-sort-echarts>
+        <!-- 收入分类统计 -->
+      </section>
+
+
+      <!-- 科室总体统计 -->
+      <department-total-echarts class="three-year m-t-10"></department-total-echarts>
+      <!-- 科室总体统计 -->
 
       <!-- 企业客户统计（合同额前十）-->
       <all-money-ten-echarts class="all-money m-t-10"></all-money-ten-echarts>
@@ -46,6 +51,7 @@ import SingleMonthTotalEcharts from '@views/dashboard/SingleMonthTotalEcharts'
 import DepartmentTotalEcharts from '@views/dashboard/DepartmentTotalEcharts'
 import IncomeSortEcharts from '@views/dashboard/IncomeSortEcharts'
 import AllMoneyTenEcharts from '@views/dashboard/AllMoneyTenEcharts'
+import ThreeYearEcharts from '@views/dashboard/ThreeYearEcharts'
 
 export default {
   name: 'Analysis',
@@ -55,12 +61,13 @@ export default {
     SingleMonthTotalEcharts,
     DepartmentTotalEcharts,
     IncomeSortEcharts,
-    AllMoneyTenEcharts
+    AllMoneyTenEcharts,
+    ThreeYearEcharts
   },
   computed: {
     // 所领导 部门负责人 还是其他角色
     roleCoe() {
-      return !(this.$store.getters.userInfo.roleCode.includes('bmfzr') ||  this.$store.getters.userInfo.roleCode.includes('sld') ||  this.$store.getters.userInfo.roleCode.includes('admin'))
+      return !(this.$store.getters.userInfo.roleCode.includes('bmfzr') || this.$store.getters.userInfo.roleCode.includes('sld') || this.$store.getters.userInfo.roleCode.includes('admin'))
     }
   },
   data() {
@@ -82,15 +89,20 @@ export default {
 <style lang="less" scoped>
 // 全所收入统计 单月
 .single-month,
-.single-month-total {
+.single-month-total,
+.three-year{
   width: 100%;
   height: 700px;
   background: #fff;
 }
+.three-year {
+  height: 620px;
+}
 
 .m-t-10 {
   margin-top: 10px;
 }
+
 .wrap {
   width: 100%;
   height: auto;
@@ -100,19 +112,21 @@ export default {
 
 // 科室总体统计
 .depart-total {
-  width: 64%;
+  width: 60%;
   min-width: 650px;
   height: auto;
   background: #fff;
 }
+
 // 分类统计
 .income-sort {
   margin-left: 8px;
-  width: 35%;
+  width: 39%;
   min-width: 350px;
   height: auto;
   background: #fff;
 }
+
 // 合同金额前十
 .all-money {
   width: 100%;
diff --git a/src/views/dashboard/DepartmentTotalEcharts.vue b/src/views/dashboard/DepartmentTotalEcharts.vue
index 7593e47..d99d930 100644
--- a/src/views/dashboard/DepartmentTotalEcharts.vue
+++ b/src/views/dashboard/DepartmentTotalEcharts.vue
@@ -133,11 +133,20 @@ export default {
      * 处理表头
      * */
     initColumns(data) {
+      this.columns = [
+        {
+          title: '',
+          align: 'center',
+          width: 100,
+          dataIndex: 'indexName',
+          scopedSlots: {customRender: 'text'}
+        },
+      ]
       data.map((item, index) => {
         this.columns.push({
           title: item.name,
           align: 'center',
-          width: 100,
+          width: 160,
           dataIndex: 'key' + index,
           scopedSlots: {customRender: 'allMoney'}
         },)
diff --git a/src/views/dashboard/IncomeSortEcharts.vue b/src/views/dashboard/IncomeSortEcharts.vue
index 7ab26fa..1c98086 100644
--- a/src/views/dashboard/IncomeSortEcharts.vue
+++ b/src/views/dashboard/IncomeSortEcharts.vue
@@ -152,7 +152,8 @@ export default {
         },
         legend: {
           bottom:'2%',
-          left: '7%'
+          right:'5%',
+          padding: [0,10,0,20]
         },
         labelLine:{
           lineStyle:{
diff --git a/src/views/dashboard/ThreeYearEcharts.vue b/src/views/dashboard/ThreeYearEcharts.vue
new file mode 100644
index 0000000..5ac39a2
--- /dev/null
+++ b/src/views/dashboard/ThreeYearEcharts.vue
@@ -0,0 +1,326 @@
+<!--三年统计-->
+<template>
+  <div class="container">
+    <div class="title">三年统计</div>
+    <div class="echarts-box" id="threeYear"></div>
+
+    <!--   表格区域beign -->
+    <div style="width: 100%">
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="projectId"
+        :columns="columns"
+        :scroll="{x: 900}"
+        :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/core'
+import {
+  DatasetComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent
+} from 'echarts/components'
+import {BarChart} from 'echarts/charts'
+import {CanvasRenderer} from 'echarts/renderers'
+
+echarts.use([
+  DatasetComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  BarChart,
+  CanvasRenderer
+])
+
+import {JeroListMixin} from '@/mixins/JeroListMixin'
+import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
+
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 100,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
+export default {
+  name: 'ThreeYearEcharts',
+  mixins:[JeroListMixin],
+  data() {
+    return {
+      disableMixinCreated: true,
+      url: {
+        list: '/index/threeYear',
+      },
+      echartsData: {
+        allMoney: [],
+        confirmAmount: [],
+      },
+      columns
+    }
+  },
+  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
+          this.initColumns(res.result)
+          this.initEcharts(res.result)
+          // 将接口数据 转化成表格数据形式
+          let tableData = [
+            {indexName: '合同金额'},
+            {indexName: '确认收入金额'}
+          ]
+          dataSource.map((item, index) => {
+            let dataIndex = 'key' + index
+            tableData[0][dataIndex] = item.allMoney
+            tableData[1][dataIndex] = item.confirmAmount
+          })
+          this.dataSource = tableData
+        }
+        if (res.code === 510) {
+          this.$message.warning(res.message)
+        }
+        this.loading = false
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    /**
+     * 处理表头
+     * */
+    initColumns(data) {
+      this.columns = [
+        {
+          title: '',
+          align: 'center',
+          width: 80,
+          dataIndex: 'indexName',
+          scopedSlots: {customRender: 'text'}
+        },
+      ]
+      data.map((item, index) => {
+        this.columns.push({
+          title: item.name,
+          align: 'center',
+          width: 200,
+          dataIndex: 'key' + index,
+          scopedSlots: {customRender: 'allMoney'}
+        },)
+      })
+    },
+    initEcharts(data) {
+      // 处理 x轴数据
+      let xData = data.reduce((pre, val) => {
+        return pre.concat(val.name)
+      }, [])
+      // 处理y轴数据
+      data.map(item => {
+        this.echartsData.allMoney.push(item.allMoney)
+        this.echartsData.confirmAmount.push(item.confirmAmount)
+      })
+
+      let chartDom = document.getElementById('threeYear')
+      let myChart = echarts.init(chartDom)
+      let option
+
+      option = {
+        color: ['#069F99', '#FFA17A'],
+        grid: {
+          left: '3%',
+          right: '0%',
+          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;">${this.formatMoney(item.data)}</div>
+          </div>
+        </div>`
+            })
+            return dataStr
+          }
+        },
+        xAxis: {
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#F5F5F5'
+            }
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            color: '#999',
+            formatter: function (params) {
+              let newParamsName = '' // 最终拼接成的字符串
+              let paramsNameNumber = params.length // 实际标签的个数
+              let provideNumber = 8 // 每行能显示的字的个数
+              let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
+              /**
+               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+               */
+              // 条件等同于rowNumber>1
+              if (paramsNameNumber > provideNumber) {
+                /** 循环每一行,p表示行 */
+                for (let p = 0; p < rowNumber; p++) {
+                  let tempStr = ''// 表示每一次截取的字符串
+                  let start = p * provideNumber // 开始截取的位置
+                  let end = start + provideNumber // 结束截取的位置
+                  // 此处特殊处理最后一行的索引值
+                  if (p === rowNumber - 1) {
+                    // 最后一次不换行
+                    tempStr = params.substring(start, paramsNameNumber)
+                  } else {
+                    // 每一次拼接字符串并换行
+                    tempStr = params.substring(start, end) + '\n'
+                  }
+                  newParamsName += tempStr // 最终拼成的字符串
+                }
+              } else {
+                // 将旧标签的值赋给新标签
+                newParamsName = params
+              }
+              return newParamsName
+            },
+          },
+          // 刻度线设置
+          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',
+            barMaxWidth: 30,
+            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;
+}
+
+/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