From 2573ad49e3fb32baf803768311119cbcd062c952 Mon Sep 17 00:00:00 2001 From: fengachen <373943794@qq.com> Date: Tue, 6 Sep 2022 10:54:32 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E9=A6=96=E9=A1=B5=E3=80=91=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E8=A1=A8=E6=A0=BC=E5=B1=95=E7=A4=BA=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/dashboard/AllMoneyTenEcharts.vue | 94 ++++++++++++++ .../dashboard/DepartmentTotalEcharts.vue | 117 +++++++++++++++--- src/views/dashboard/IncomeSortEcharts.vue | 91 +++++++++++++- 3 files changed, 286 insertions(+), 16 deletions(-) diff --git a/src/views/dashboard/AllMoneyTenEcharts.vue b/src/views/dashboard/AllMoneyTenEcharts.vue index a3474ee..69bf584 100644 --- a/src/views/dashboard/AllMoneyTenEcharts.vue +++ b/src/views/dashboard/AllMoneyTenEcharts.vue @@ -3,6 +3,42 @@
企业客户统计（合同额前十）
+ + +
+ + + + + + + + + + +
+
@@ -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); +} + \ No newline at end of file diff --git a/src/views/dashboard/DepartmentTotalEcharts.vue b/src/views/dashboard/DepartmentTotalEcharts.vue index b5669fc..2edfa7a 100644 --- a/src/views/dashboard/DepartmentTotalEcharts.vue +++ b/src/views/dashboard/DepartmentTotalEcharts.vue @@ -3,6 +3,38 @@
科室总体统计
+ + +
+ + + + + + +
+
@@ -14,8 +46,8 @@ import { GridComponent, LegendComponent } from 'echarts/components' -import { BarChart } from 'echarts/charts' -import { CanvasRenderer } from 'echarts/renderers' +import {BarChart} from 'echarts/charts' +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, - itemStyle:{ - borderRadius:[8,8,0,0] + barMaxWidth: 30, + itemStyle: { + borderRadius: [8, 8, 0, 0] } }, { - name:'确认收入金额', + name: '确认收入金额', data: this.echartsData.confirmAmount, type: 'bar', - barMaxWidth:30, - itemStyle:{ - borderRadius:[8,8,0,0] + barMaxWidth: 30, + itemStyle: { + 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); +} + \ No newline at end of file diff --git a/src/views/dashboard/IncomeSortEcharts.vue b/src/views/dashboard/IncomeSortEcharts.vue index f0815e7..6da3873 100644 --- a/src/views/dashboard/IncomeSortEcharts.vue +++ b/src/views/dashboard/IncomeSortEcharts.vue @@ -7,6 +7,38 @@ 收入额
+ +
+ + + + + + +
+ + @@ -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 } }) }, @@ -81,7 +136,7 @@ export default { let option option = { - + tooltip: { show:true, trigger: 'item', @@ -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); +} \ No newline at end of file