feat(regulatoryPlatForm): 添加待办总览统计功能并优化图表展示
- 新增indexPageStatistic API接口用于获取待办总览统计数据 - 实现待办事项状态显示（正常、超期、即将超期）的动态数据绑定 - 优化柱状图X轴标签显示，添加自动换行功能避免文字重叠 - 修复饼状图和柱状图的数据动态更新机制 - 添加getStatusData方法获取待办总览状态数据 - 实现图表数据的实时更新和颜色循环显示
This commit is contained in:
chenxf
parent
459134236b
commit
1366e8e848
|
|
@ -32,3 +32,12 @@ export function taskUnionPageStatistic(data) {
|
|||
})
|
||||
}
|
||||
|
||||
// 待办总览统计（正常、超期、即将超期）
|
||||
export function indexPageStatistic(data) {
|
||||
return request({
|
||||
url: '/aiccs-api/task/indexPageStatistic',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
<!-- 待办事项总览 -->
|
||||
<div class="todo-header">
|
||||
<span class="title">待办事项总览</span>
|
||||
<span class="tag normal">正常 <span class="color">12</span></span>
|
||||
<span class="tag overdue">超期 <span class="color">42</span></span>
|
||||
<span class="tag soon-overdue">即将超期 <span class="color">122</span></span>
|
||||
<span class="tag normal">正常 <span class="color">{{ statusData.normal }}</span></span>
|
||||
<span class="tag overdue">超期 <span class="color">{{ statusData.overdue }}</span></span>
|
||||
<span class="tag soon-overdue">即将超期 <span class="color">{{ statusData.soonOverdue }}</span></span>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { taskUnionPageStatistic } from '@/api/regulatoryPlatForm'
|
||||
import { taskUnionPageStatistic, indexPageStatistic } from '@/api/regulatoryPlatForm'
|
||||
|
||||
export default {
|
||||
name: 'BusinessAbnormalDashboard',
|
||||
|
|
@ -91,6 +91,11 @@ export default {
|
|||
illegal: 0,
|
||||
creditRepair: 0,
|
||||
dataCorrection: 0
|
||||
},
|
||||
statusData: {
|
||||
normal: 0,
|
||||
overdue: 0,
|
||||
soonOverdue: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -98,6 +103,7 @@ export default {
|
|||
this.initBarChart()
|
||||
this.initPieChart()
|
||||
this.getCardData()
|
||||
this.getStatusData()
|
||||
// 监听窗口大小变化，自适应图表
|
||||
window.addEventListener('resize', () => {
|
||||
this.barChart.resize()
|
||||
|
|
@ -128,13 +134,19 @@ export default {
|
|||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [
|
||||
'呼和浩特市', '包头市', '呼伦贝尔市', '兴安盟', '通辽市', '赤峰市',
|
||||
'锡林郭勒盟', '乌兰察布市', '鄂尔多斯市', '巴彦淖尔市', '乌海市', '阿拉善盟'
|
||||
],
|
||||
data: [],
|
||||
axisLabel: {
|
||||
rotate: 45,
|
||||
fontSize: 12
|
||||
rotate: 0,
|
||||
fontSize: 12,
|
||||
interval: 0,
|
||||
formatter: function(value) {
|
||||
// 每6个字符换行
|
||||
let result = ''
|
||||
for (let i = 0; i < value.length; i += 6) {
|
||||
result += value.substring(i, i + 6) + '\n'
|
||||
}
|
||||
return result.trim()
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
|
|
@ -144,19 +156,12 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
250000, 200000, 160000, 100000, 140000, 190000,
|
||||
90000, 130000, 210000, 100000, 70000, 60000
|
||||
],
|
||||
data: [],
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: function(params) {
|
||||
// 渐变蓝色系
|
||||
const colors = [
|
||||
'#66b1ff', '#409eff', '#337ecc', '#2662a6', '#194680', '#0c2a5a',
|
||||
'#66b1ff', '#409eff', '#337ecc', '#2662a6', '#194680', '#0c2a5a'
|
||||
]
|
||||
return colors[params.dataIndex]
|
||||
const colors = ['#66b1ff', '#409eff', '#337ecc', '#2662a6', '#194680', '#0c2a5a']
|
||||
return colors[params.dataIndex % colors.length]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -204,11 +209,7 @@ export default {
|
|||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 25, name: '企业' },
|
||||
{ value: 65, name: '个体工商户' },
|
||||
{ value: 10, name: '农民专业合作社' }
|
||||
],
|
||||
data: [],
|
||||
color: ['#409eff', '#66b1ff', '#a0cfff']
|
||||
}
|
||||
]
|
||||
|
|
@ -236,6 +237,70 @@ export default {
|
|||
} catch (error) {
|
||||
console.error('获取待办数据失败:', error)
|
||||
}
|
||||
},
|
||||
// 获取待办总览状态数据（正常、超期、即将超期）
|
||||
async getStatusData() {
|
||||
try {
|
||||
const userId = this.$store.state.user.keys
|
||||
const res = await indexPageStatistic({
|
||||
customParamMap: {
|
||||
userId: userId,
|
||||
type: '',
|
||||
currentNodeOrBizStatus: ''
|
||||
}
|
||||
})
|
||||
if (res && res.data) {
|
||||
// 更新状态数据
|
||||
const repairStatistic = res.data.repairStatistic || {}
|
||||
this.statusData.normal = repairStatistic.normalnum || 0
|
||||
this.statusData.overdue = repairStatistic.expirednum || 0
|
||||
this.statusData.soonOverdue = repairStatistic.aboutExpirenum || 0
|
||||
|
||||
// 更新柱状图数据
|
||||
const abnEntLocStatistic = res.data.abnEntLocStatistic || []
|
||||
if (abnEntLocStatistic.length > 0) {
|
||||
const xAxisData = abnEntLocStatistic.map(item => item.orgName)
|
||||
const seriesData = abnEntLocStatistic.map(item => item.abnNum)
|
||||
this.updateBarChart(xAxisData, seriesData)
|
||||
}
|
||||
|
||||
// 更新饼状图数据
|
||||
const entTypeStatistic = res.data.entTypeStatistic || {}
|
||||
const pieData = [
|
||||
{ value: entTypeStatistic.enterpriseNum || 0, name: '企业' },
|
||||
{ value: entTypeStatistic.individualNum || 0, name: '个体工商户' },
|
||||
{ value: entTypeStatistic.coopNum || 0, name: '农民专业合作社' }
|
||||
]
|
||||
this.updatePieChart(pieData)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取待办总览状态数据失败:', error)
|
||||
}
|
||||
},
|
||||
// 更新柱状图数据
|
||||
updateBarChart(xAxisData, seriesData) {
|
||||
const colors = ['#66b1ff', '#409eff', '#337ecc', '#2662a6', '#194680', '#0c2a5a']
|
||||
this.barChart.setOption({
|
||||
xAxis: {
|
||||
data: xAxisData
|
||||
},
|
||||
series: [{
|
||||
data: seriesData,
|
||||
itemStyle: {
|
||||
color: function(params) {
|
||||
return colors[params.dataIndex % colors.length]
|
||||
}
|
||||
}
|
||||
}]
|
||||
})
|
||||
},
|
||||
// 更新饼状图数据
|
||||
updatePieChart(pieData) {
|
||||
this.pieChart.setOption({
|
||||
series: [{
|
||||
data: pieData
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue