税务预检使用情况
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