【首页】增加表格展示数据

src/views/dashboard/AllMoneyTenEcharts.vue

@@ -3,6 +3,42 @@
   <div class="container">
     <div class="title">企业客户统计（合同额前十）</div>
     <div class="echarts-box" id="allMoney"></div>
+
+    <!--   表格区域beign -->
+    <div style="width: 100%">
+      <a-table
+        ref="table"
+        size="middle"
+        bordered
+        rowKey="projectId"
+        :columns="columns"
+        :scroll="{x: 1100}"
+        :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>
+
+        <span  v-for="item in columns" :slot="item.dataIndex" :key="item.dataIndex">
+               <j-ellipsis :length="6" :value=" item[item.dataIndex] "></j-ellipsis>
+            </span>
+
+        <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>
 
@@ -30,6 +66,16 @@ import {JeroListMixin} from '@/mixins/JeroListMixin'
 import {getAction} from '@api/manage'
 import {formatMoney} from '@/utils/formatMoney'
 
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 150,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
+
 export default {
   name: 'AllMoneyTenEcharts',
   mixins: [JeroListMixin],
@@ -39,6 +85,7 @@ export default {
       url: {
         list: '/index/top10Statistics',
       },
+      columns,
       echartsData: {
         allMoney: [],
         confirmAmount: [],
@@ -63,7 +110,20 @@ export default {
       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)
@@ -73,6 +133,22 @@ export default {
         this.loading = false
       })
     },
+    /**
+     * 处理表头
+     * */
+    initColumns(data) {
+      data.map((item, index) => {
+        let dataIndex = 'key' + index
+        this.columns.push({
+          slots:{title: dataIndex},
+          [dataIndex]:item.name,
+          align: 'center',
+          width: 120,
+          dataIndex: dataIndex,
+          scopedSlots: {customRender: 'allMoney'}
+        },)
+      })
+    },
     initEcharts(data) {
       // 处理 x轴数据
       let xData = data.reduce((pre, val) => {
@@ -237,4 +313,22 @@ export default {
   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>

src/views/dashboard/DepartmentTotalEcharts.vue

@@ -3,6 +3,38 @@
   <div class="container">
     <div class="title">科室总体统计</div>
     <div class="echarts-box" id="departmentTotal"></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>
 
@@ -14,8 +46,8 @@ import {
   GridComponent,
   LegendComponent
 } from 'echarts/components'
-import { BarChart } from 'echarts/charts'
+import {BarChart} from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
+import {CanvasRenderer} from 'echarts/renderers'
 
 echarts.use([
   DatasetComponent,
@@ -30,6 +62,16 @@ import {JeroListMixin} from '@/mixins/JeroListMixin'
 import {getAction} from '@api/manage'
 import {formatMoney} from '@/utils/formatMoney'
 
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 150,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
+
 export default {
   name: 'DepartmentTotalEcharts',
   mixins: [JeroListMixin],
@@ -42,7 +84,8 @@ export default {
       echartsData: {
         allMoney: [],
         confirmAmount: [],
-      }
+      },
+      columns
     }
   },
   mounted() {
@@ -63,7 +106,20 @@ export default {
       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)
@@ -73,6 +129,20 @@ export default {
         this.loading = false
       })
     },
+    /**
+     * 处理表头
+     * */
+    initColumns(data) {
+      data.map((item, index) => {
+        this.columns.push({
+          title: item.name,
+          align: 'center',
+          width: 120,
+          dataIndex: 'key' + index,
+          scopedSlots: {customRender: 'allMoney'}
+        },)
+      })
+    },
     initEcharts(data) {
       // 处理 x轴数据
       let xData = data.reduce((pre, val) => {
@@ -89,7 +159,7 @@ export default {
       let option
 
       option = {
-        color:['#069F99','#FFA17A'],
+        color: ['#069F99', '#FFA17A'],
         grid: {
           left: '0%',
           right: '2%',
@@ -99,7 +169,7 @@ export default {
         legend: {
           right: '2%'
         },
-        tooltip:{
+        tooltip: {
           trigger: 'axis',
           formatter: params => {
             // 获取xAxis data中的数据
@@ -127,7 +197,7 @@ export default {
           },
           axisLabel: {
             show: true,
-            interval:0,
+            interval: 0,
             color: '#999',
             formatter: function (params) {
               let newParamsName = '' // 最终拼接成的字符串
@@ -189,21 +259,21 @@ export default {
         },
         series: [
           {
-            name:'合同金额',
+            name: '合同金额',
             data: this.echartsData.allMoney,
             type: 'bar',
-            barMaxWidth:30,
+            barMaxWidth: 30,
-            itemStyle:{
+            itemStyle: {
-              borderRadius:[8,8,0,0]
+              borderRadius: [8, 8, 0, 0]
             }
           },
           {
-            name:'确认收入金额',
+            name: '确认收入金额',
             data: this.echartsData.confirmAmount,
             type: 'bar',
-            barMaxWidth:30,
+            barMaxWidth: 30,
-            itemStyle:{
+            itemStyle: {
-              borderRadius:[8,8,0,0]
+              borderRadius: [8, 8, 0, 0]
             }
           }
         ]
@@ -224,6 +294,7 @@ export default {
   box-sizing: border-box;
   width: 100%;
 }
+
 .title {
   text-align: left;
   font-weight: 500;
@@ -236,4 +307,22 @@ export default {
   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>

src/views/dashboard/IncomeSortEcharts.vue

@@ -7,6 +7,38 @@
       <span @click="toggleEcharts('confirmAmount')" class="operator-right" :class="{'active':activeIndex === 'confirmAmount'}">收入额</span>
     </div>
     <div  class="echarts-box" id="incomeSort"> </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>
 
@@ -31,6 +63,15 @@ echarts.use([
 ])
 import {getAction} from '@api/manage'
 import {formatMoney} from '@/utils/formatMoney'
+const columns = [
+  {
+    title: '',
+    align: 'center',
+    width: 150,
+    dataIndex: 'indexName',
+    scopedSlots: {customRender: 'text'}
+  },
+]
 
 export default {
   name: 'IncomeSortEcharts',
@@ -38,6 +79,7 @@ export default {
     return {
       activeIndex:'allMoney',
       echartsInstace:null,
+      columns,
       url:{
         list:'/index/incomeClassificationStatistics'
       }
@@ -66,7 +108,20 @@ export default {
       }
       getAction(this.url.list,{type:typeEnum[this.activeIndex]}).then(res =>{
         if(res.success){
-         this.initEcharts(res.result)
+          let dataSource = res.result
+          this.initColumns(res.result)
+          this.initEcharts(res.result)
+          // 将接口数据 转化成表格数据形式
+          let tableData = [
+            {indexName: typeEnum[this.activeIndex] === 1 ? '合同金额' :'确认收入金额'},
+            {indexName: '百分比'}
+          ]
+          dataSource.map((item, index) => {
+            let dataIndex = 'key' + index
+            tableData[0][dataIndex] = item.money
+            tableData[1][dataIndex] = item.value + '%'
+          })
+          this.dataSource = tableData
         }
       })
     },
@@ -137,6 +192,20 @@ export default {
         myChart.resize()
       })
     },
+    /**
+     * 处理表头
+     * */
+    initColumns(data) {
+      data.map((item, index) => {
+        this.columns.push({
+          title: item.name_dictText,
+          align: 'center',
+          width: 120,
+          dataIndex: 'key' + index,
+          scopedSlots: {customRender: 'allMoney'}
+        },)
+      })
+    },
     // 处理圆点
     initPoint(data,color) {
       // 这步主要是为了让小圆点的颜色和饼状图的块对应
@@ -231,4 +300,22 @@ export default {
   color: #333;
   font-size: 20px;
 }
+
+/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>