LK/income_payments_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【开发】首页联调与修改

Browse Source
This commit is contained in:
fengachen
2022-09-02 16:44:36 +08:00
parent 1e95a35dfc
commit b418d00b54
6 changed files with 180 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/dashboard/AllMoneyTenEcharts.vue
+39 -12
View File
@@ -10,6 +10,7 @@
import * as echarts from 'echarts'
import {JeroListMixin} from '@/mixins/JeroListMixin'
import {getAction} from '@api/manage'
import {formatMoney} from '@/utils/formatMoney'
export default {
name: 'AllMoneyTenEcharts',
@@ -18,14 +19,7 @@ export default {
return {
disableMixinCreated: true,
url: {
list: '/statistics/allProjectStatistics/listDepartment',
},
// 给定当年作为来款年份默认查询条件
queryParam: {
year: new Date().getFullYear().toString()
},
lastQueryParam: {
year: new Date().getFullYear().toString()
list: '/index/top10Statistics',
},
echartsData: {
allMoney: [],
@@ -37,6 +31,7 @@ export default {
this.loadData(1)
},
methods: {
formatMoney,
loadData(arg) {
if (!this.url.list) {
this.$message.error('请设置url.list属性!')
@@ -50,7 +45,7 @@ export default {
this.loading = true
getAction(this.url.list, params).then((res) => {
if (res.success) {
this.initEcharts(res.result.pageList.records)
this.initEcharts(res.result)
}
if (res.code === 510) {
this.$message.warning(res.message)
@@ -61,10 +56,9 @@ export default {
})
},
initEcharts(data) {
console.log(data)
// 处理 x轴数据
let xData = data.reduce((pre, val) => {
return pre.concat(val.departName || '')
return pre.concat(val.name)
}, [])
// 处理y轴数据
data.map(item => {
@@ -99,7 +93,7 @@ export default {
<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;">${item.data}</div>
<div style="color:#333;">${this.formatMoney(item.data)}</div>
</div>
</div>`
})
@@ -115,6 +109,39 @@ export default {
},
axisLabel: {
show: true,
interval:0,
// 坐标轴刻度标签换行处理
formatter: function (params) {
let newParamsName = '' // 最终拼接成的字符串
let paramsNameNumber = params.length // 实际标签的个数
let provideNumber = 6 // 每行能显示的字的个数
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
},
color: '#999'
},
// 刻度线设置
src/views/dashboard/Analysis.vue
+1
View File
@@ -66,6 +66,7 @@ export default {
return {}
},
created() {
console.log(this.$store.getters.userInfo.roleCode === 'bmfzr' || this.$store.getters.userInfo.roleCode === 'sld')
},
mounted() {
},
src/views/dashboard/DepartmentTotalEcharts.vue
+39 -13
View File
@@ -10,6 +10,7 @@
import * as echarts from 'echarts'
import {JeroListMixin} from '@/mixins/JeroListMixin'
import {getAction} from '@api/manage'
import {formatMoney} from '@/utils/formatMoney'
export default {
name: 'DepartmentTotalEcharts',
@@ -18,14 +19,7 @@ export default {
return {
disableMixinCreated: true,
url: {
list: '/statistics/allProjectStatistics/listDepartment',
},
// 给定当年作为来款年份默认查询条件
queryParam: {
year: new Date().getFullYear().toString()
},
lastQueryParam: {
year: new Date().getFullYear().toString()
list: '/index/overallDepartmentStatistics',
},
echartsData: {
allMoney: [],
@@ -37,6 +31,7 @@ export default {
this.loadData(1)
},
methods: {
formatMoney,
loadData(arg) {
if (!this.url.list) {
this.$message.error('请设置url.list属性!')
@@ -50,7 +45,7 @@ export default {
this.loading = true
getAction(this.url.list, params).then((res) => {
if (res.success) {
this.initEcharts(res.result.pageList.records)
this.initEcharts(res.result)
}
if (res.code === 510) {
this.$message.warning(res.message)
@@ -61,10 +56,9 @@ export default {
})
},
initEcharts(data) {
console.log(data)
// 处理 x轴数据
let xData = data.reduce((pre, val) => {
return pre.concat(val.departName || '')
return pre.concat(val.name)
}, [])
// 处理y轴数据
data.map(item => {
@@ -99,7 +93,7 @@ export default {
<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;">${item.data}</div>
<div style="color:#333;">${this.formatMoney(item.data)}</div>
</div>
</div>`
})
@@ -115,7 +109,39 @@ export default {
},
axisLabel: {
show: true,
color: '#999'
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: {
src/views/dashboard/IncomeSortEcharts.vue
+97 -24
View File
@@ -12,74 +12,140 @@
<script>
import * as echarts from 'echarts'
import {getAction} from '@api/manage'
export default {
name: 'IncomeSortEcharts',
data() {
return {
activeIndex:'allMoney'
activeIndex:'allMoney',
echartsInstace:null,
url:{
list:'/index/incomeClassificationStatistics'
}
}
},
mounted() {
this.initEcharts()
// this.initEcharts()
this.loadData()
},
methods:{
toggleEcharts(key) {
this.activeIndex = key
if(key === this.activeIndex) {
return
}else {
this.activeIndex = key
this.loadData()
}
},
initEcharts() {
loadData() {
if (this.echartsInstace != null && this.echartsInstace != '' && this.echartsInstace != undefined) {
this.echartsInstace.dispose()//销毁
}
let typeEnum = {
allMoney:1,
confirmAmount:2
}
getAction(this.url.list,{type:typeEnum[this.activeIndex]}).then(res =>{
if(res.success){
this.initEcharts(res.result)
}
})
},
initEcharts(data) {
let color = ['#069F99', '#6D7FD0 ', '#A5B3FF', '#A5B3FF', '#BDA79E']
let echartsData = data.reduce( (pre,val) => {
return pre.concat({value:val.value,name:val.name_dictText})
},[])
echartsData = this.initPoint(echartsData,color)
let chartDom = document.getElementById('incomeSort')
let myChart = echarts.init(chartDom)
let option
option = {
tooltip: {
show:false,
trigger: 'item'
},
legend: {
bottom:'2%',
left: 'center'
},
labelLine:{
lineStyle:{
color:'#999'
}
},
series: [
{
name: 'Access From',
color:color,
type: 'pie',
radius: ['30%', '60%'],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold'
label:{
show:true,
formatter: '{pre|}{d}%',
rich:{
pre:{
width:4,
height:4,
borderRadius:[4,4,4,4]
}
}
},
labelLine: {
show: false
show: true
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
data: echartsData
}
]
}
option && myChart.setOption(option)
this.echartsInstace = myChart
window.addEventListener('resize', () => {
myChart.resize()
})
},
// 处理圆点
initPoint(data,color) {
// 这步主要是为了让小圆点的颜色和饼状图的块对应
let setLabel = (data) => {
let opts = []
for (let i = 0; i < data.length; i++) {
let item = {}
item.name = data[i].name
item.value = data[i].value
item.label = {
normal: {
//控制引导线上文字颜色和位置,此处a是显示文字区域，b做一个小圆圈在引导线尾部显示
show: true,
formatter: '{point|}{a|}{d}%',
rich: {
a:{
padding: [0,0,0,4]
},
point: {
height: 6,
width: 6,
lineHeight: 6,
borderRadius: 4,
backgroundColor: color[i], // 圆点颜色和饼图块状颜色一致
},
}
},
}
opts.push(item)
}
return opts
}
return setLabel(data)
}
}
}
@@ -126,6 +192,13 @@ export default {
width: 100%;
height: 400px;
}
.point {
width: 3px;
height: 3px;
display: inline-block;
border-radius: 50%;
background: #000;
}
.title {
text-align: left;
font-weight: 500;
src/views/dashboard/SingleMonthEcharts.vue
+2 -4
View File
@@ -126,8 +126,6 @@ export default {
// 初始化 echarts
this.initEcharts()
this.dataSource = tableData
console.log(this.dataSource)
}
if (res.code === 510) {
this.$message.warning(res.message)
@@ -166,8 +164,8 @@ export default {
dataStr += `<div>
<div style="margin: 0 8px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#fff;border: 2px solid ${item.color};border-radius: 50%"></span>
<span>${item.seriesName}</span>
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
<span style="color: #666">${item.seriesName}</span>
<span style="float:right;color:#333;margin-left:20px;">${this.formatMoney(item.data)}</span>
</div>
</div>`
})
src/views/dashboard/SingleMonthTotalEcharts.vue
+2 -2
View File
@@ -165,8 +165,8 @@ export default {
dataStr += `<div>
<div style="margin: 0 8px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#fff;border: 2px solid ${item.color};border-radius: 50%"></span>
<span>${item.seriesName}</span>
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
<span style="color: #666">${item.seriesName}</span>
<span style="float:right;color:#333;margin-left:20px;">${this.formatMoney(item.data)}</span>
</div>
</div>`
})