135 lines
3.9 KiB
Vue
135 lines
3.9 KiB
Vue
<template>
|
|
<div class="flex-1 w-full chart-card">
|
|
<card title="线索转客户统计">
|
|
<v-charts ref="chartRef" v-loading="loading" style="height: 350px" :autoresize="true" />
|
|
</card>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { convertProcessApi } from '@/api/workbench'
|
|
import card from './card.vue'
|
|
import vCharts from 'vue-echarts'
|
|
import type { IForm } from '../index.vue'
|
|
|
|
function createBarSeries(data, name, field) {
|
|
return {
|
|
name,
|
|
type: 'bar',
|
|
data: data.map(item => item[field])
|
|
}
|
|
}
|
|
|
|
function createLineSeries(data, name, field) {
|
|
return {
|
|
name,
|
|
type: 'line',
|
|
tooltip: {
|
|
valueFormatter: function (value) {
|
|
return value as number
|
|
}
|
|
},
|
|
data: data.map(item => item[field]),
|
|
yAxisIndex: 1
|
|
}
|
|
}
|
|
const loading = ref(false)
|
|
const data = ref([])
|
|
const xAxisData = ref([])
|
|
|
|
const chartRef = ref()
|
|
const fetchData = async (payload: IForm) => {
|
|
loading.value = true
|
|
try {
|
|
const result = await convertProcessApi(payload)
|
|
if (result.length > 0) {
|
|
data.value = result.map((item: any) => {
|
|
const { clueCount, transactionClient, percentConversion } = item.leadToCustomerStatisticsVo
|
|
return {
|
|
name: item.organizationName,
|
|
clueNumber: clueCount,
|
|
client: transactionClient,
|
|
rate: percentConversion
|
|
}
|
|
})
|
|
xAxisData.value = result.map((item: any) => item.organizationName)
|
|
chartRef.value.setOption({
|
|
color: ['#0E66FB', '#FAC858', '#96B2D9'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
toolbox: {},
|
|
legend: {},
|
|
title: {
|
|
text: ''
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: xAxisData.value
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value}'
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
createBarSeries(data.value, '线索数', 'clueNumber'),
|
|
createBarSeries(data.value, '线索转客户数', 'client'),
|
|
createLineSeries(data.value, '线索转客户率', 'rate')
|
|
]
|
|
})
|
|
} else {
|
|
chartRef.value.setOption({
|
|
legend: {},
|
|
title: {
|
|
text: '暂无数据',
|
|
x: 'center',
|
|
y: 'center'
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: [],
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
yAxis: [],
|
|
series: [createBarSeries([], '', ''), createBarSeries([], '', ''), createLineSeries([], '', '')]
|
|
})
|
|
}
|
|
} catch (error) {}
|
|
loading.value = false
|
|
}
|
|
defineExpose({
|
|
fetchData
|
|
})
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@media (max-width: 1000px) {
|
|
.chart-card {
|
|
flex: 1 0 100%;
|
|
}
|
|
}
|
|
</style>
|