税务预检使用情况
This commit is contained in:
ZZM
parent
7685ea7f60
commit
1104ee84c3
|
|
@ -0,0 +1,297 @@
|
|||
<template>
|
||||
<div v-loading="loading" class="sale-statistics card">
|
||||
<flexbox class="card-title">
|
||||
<span class="icon wk wk-target" />
|
||||
<div class="card-title-center text-one-ellipsis">税务预检使用情况</div>
|
||||
<div class="card-title-right">
|
||||
<!--<span class="box">{{ filterText }}</span>
|
||||
<span class="box">{{ timeLine }}</span>-->
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<span class="box">
|
||||
{{ optionName }}<i class="el-icon-arrow-down el-icon--right" />
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="(item, index) in options" :key="index" :command="index">
|
||||
{{ item.name }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</flexbox>
|
||||
<div id="tax-statistics" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { crmTaxPreCheckUsageAPI } from '@/api/crm/workbench'
|
||||
|
||||
import echarts from 'echarts'
|
||||
import ChartMixin from './ChartMixin'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'TaxPreCheckUsage',
|
||||
mixins: [ChartMixin],
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{ name: '显示全部', value: 0 },
|
||||
{ name: '使用人数', value: 1 },
|
||||
{ name: '活跃人数', value: 2 },
|
||||
{ name: '新增用户', value: 3 },
|
||||
{ name: '新增企业', value: 4 }
|
||||
],
|
||||
optionName: '显示全部',
|
||||
optionValue: 0,
|
||||
chartOption: {
|
||||
color: ['#5470c6', '#91cc75', '#fac858'], // 添加默认颜色
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '46px',
|
||||
left: '20px',
|
||||
right: '20px',
|
||||
bottom: '10px',
|
||||
containLabel: true,
|
||||
borderColor: '#fff'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333'
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: { color: '#BDBDBD' }
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
minInterval: 1, // 确保刻度最小间隔为1
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
/** 坐标轴轴线相关设置 */
|
||||
axisLine: {
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#eee',
|
||||
type: 'dotted'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: []
|
||||
},
|
||||
chartObj: null,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['manage']),
|
||||
// 目标设置权限
|
||||
hasSetAuth() {
|
||||
return this.manage && this.manage.crm && this.manage.crm.achievement
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
// 获取默认 optionValue 类型的数据
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chartObj = echarts.init(document.getElementById('tax-statistics'))
|
||||
this.chartObj.setOption(this.chartOption, true)
|
||||
},
|
||||
|
||||
/**
|
||||
* 下拉菜单选项选择
|
||||
* @param index 选项序号
|
||||
*/
|
||||
handleCommand(index) {
|
||||
if (this.optionValue === this.options[index].value) return
|
||||
this.optionName = this.options[index].name
|
||||
this.optionValue = this.options[index].value
|
||||
this.getData()
|
||||
},
|
||||
|
||||
getData() {
|
||||
this.loading = true
|
||||
crmTaxPreCheckUsageAPI({
|
||||
label: this.optionValue,
|
||||
...this.getBaseParams()
|
||||
}).then(res => {
|
||||
// 处理API响应数据
|
||||
this.processChartData(res.data)
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 处理图标数据并渲染
|
||||
processChartData(data) {
|
||||
// 当选择"显示全部"时 (optionValue = 0)
|
||||
if (this.optionValue === 0) {
|
||||
// 处理显示全部的数据 - 渲染折线图
|
||||
this.renderAllData(data)
|
||||
} else {
|
||||
// 处理单个指标的数据 - 渲染柱状图
|
||||
this.renderSingleData(data)
|
||||
}
|
||||
},
|
||||
// 渲染单个属性的柱状图
|
||||
renderSingleData(data) {
|
||||
const list = data.list || []
|
||||
const showNum = []
|
||||
const xAxisData = []
|
||||
list.forEach(element => {
|
||||
showNum.push(element.value)
|
||||
xAxisData.push(element.type)
|
||||
})
|
||||
// 正确更新图表配置
|
||||
this.chartOption.xAxis[0].data = xAxisData
|
||||
this.chartOption.series = [{
|
||||
name: this.optionName,
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: showNum
|
||||
}]
|
||||
// 强制刷新图表
|
||||
this.chartObj.setOption(this.chartOption, true)
|
||||
},
|
||||
// 渲染全部属性的折线图
|
||||
renderAllData(data) {
|
||||
// 定义要显示的四个指标
|
||||
const metrics = [
|
||||
{ name: '使用人数', field: 'syyhs' },
|
||||
{ name: '活跃人数', field: 'hyyhs' },
|
||||
{ name: '新增用户', field: 'addUser' },
|
||||
{ name: '新增企业', field: 'addQys' }
|
||||
]
|
||||
// 准备数据
|
||||
const categories = []
|
||||
const seriesData = []
|
||||
// 首先提取所有日期类别
|
||||
data.list.forEach(item => {
|
||||
categories.push(item.type)
|
||||
})
|
||||
// 为每个指标创建数据系列
|
||||
metrics.forEach(metric => {
|
||||
const values = []
|
||||
|
||||
// 提取每个指标在所有日期的值
|
||||
data.list.forEach(item => {
|
||||
const value = item.value ? item.value[metric.field] : 0
|
||||
values.push(value)
|
||||
})
|
||||
// 添加到系列数据
|
||||
seriesData.push({
|
||||
name: metric.name,
|
||||
data: values
|
||||
})
|
||||
})
|
||||
// 颜色数组 - 为每条折线分配不同颜色
|
||||
const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666']
|
||||
|
||||
// 创建系列配置(指的是数据的展现形式)
|
||||
const series = seriesData.map((item, index) => ({
|
||||
name: item.name,
|
||||
type: 'line', // 折线图
|
||||
data: item.data,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: { width: 2 },
|
||||
itemStyle: { color: colors[index] } // 为每条线分配颜色
|
||||
}))
|
||||
|
||||
// 创建图表配置
|
||||
const option = {
|
||||
color: colors,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { type: 'line' } // 折线图使用线型指示器
|
||||
},
|
||||
grid: {
|
||||
top: '70px', // 增加顶部空间给图例
|
||||
left: '20px',
|
||||
right: '20px',
|
||||
bottom: '10px',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
data: seriesData.map(item => item.name), // 图例数据
|
||||
top: 10 // 图例位置在顶部
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: categories,
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333',
|
||||
rotate: 45, // 旋转45度避免重叠
|
||||
interval: 0 // 显示所有标签
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: { color: '#BDBDBD' }
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
minInterval: 1, // 确保Y轴显示整数
|
||||
axisLabel: {
|
||||
formatter: value => Math.floor(value) === value ? value : Math.round(value)
|
||||
},
|
||||
axisTick: {
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#eee',
|
||||
type: 'dotted'
|
||||
}
|
||||
}
|
||||
}],
|
||||
series
|
||||
}
|
||||
// 渲染图表
|
||||
this.chartObj.setOption(option, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "style";
|
||||
#tax-statistics {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue