【首页】增加表格展示数据
This commit is contained in:
fengachen
@@ -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>
|
||||
@@ -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 { 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);
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -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
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -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);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user