| | |
| | | <script setup> |
| | | import { ref, onMounted } from 'vue' |
| | | import Echarts from '@/components/Echarts/echarts.vue' |
| | | import { customerRevenueAnalysis } from '@/api/viewIndex.js' |
| | | import { listCustomer } from '@/api/basicData/customerFile.js' |
| | | |
| | | const dateType = ref(1) |
| | | const customerValue = ref(null) |
| | | const customerOptions = ref([]) |
| | | import { productTurnoverDays } from '@/api/viewIndex.js' |
| | | |
| | | const chartStyle = { width: '100%', height: '100%' } |
| | | const grid = { left: '3%', right: '4%', bottom: '3%', top: '4%', containLabel: true } |
| | | const barLegend = { show: false, textStyle: { color: '#B8C8E0' }, data: ['营收'] } |
| | | const barLegend = { show: false, textStyle: { color: '#B8C8E0' }, data: ['周转天数'] } |
| | | const barSeries1 = ref([ |
| | | { |
| | | name: '营收', |
| | | name: '周转天数', |
| | | type: 'bar', |
| | | barGap: 0, |
| | | barWidth: 30, |
| | |
| | | formatter(params) { |
| | | let result = params[0].axisValueLabel + '<br/>' |
| | | params.forEach((item) => { |
| | | result += `<div>${item.marker} ${item.seriesName}: ${item.value}</div>` |
| | | result += `<div>${item.marker} ${item.seriesName}: ${item.value} 天</div>` |
| | | }) |
| | | return result |
| | | }, |
| | |
| | | const xAxis1 = ref([{ type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] }]) |
| | | const yAxis1 = [{ type: 'value', axisLabel: { color: '#B8C8E0' } }] |
| | | |
| | | const getCustomerRevenueAnalysis = () => { |
| | | if (customerOptions.value.length > 0 && !customerValue.value) customerValue.value = customerOptions.value[0].value |
| | | if (!customerValue.value) return |
| | | customerRevenueAnalysis({ customerId: customerValue.value, type: dateType.value }) |
| | | const fetchData = () => { |
| | | productTurnoverDays() |
| | | .then((res) => { |
| | | xAxis1.value[0].data = [] |
| | | barSeries1.value[0].data = [] |
| | | const items = res.data?.items || [] |
| | | items.forEach((item) => { |
| | | xAxis1.value[0].data.push(item.name) |
| | | barSeries1.value[0].data.push(item.value) |
| | | }) |
| | | if (res.code === 200 && Array.isArray(res.data)) { |
| | | const list = res.data |
| | | xAxis1.value[0].data = list.map((d) => d.name) |
| | | barSeries1.value[0].data = list.map((d) => Number(d.value) || 0) |
| | | } |
| | | }) |
| | | .catch((e) => console.error('获取客户营收分析失败:', e)) |
| | | } |
| | | |
| | | const fetchCustomerOptions = async () => { |
| | | try { |
| | | const res = await listCustomer({ pageNum: 1, pageSize: 200 }) |
| | | const records = res?.records || res?.data?.records || res?.rows || [] |
| | | customerOptions.value = records.map((r) => ({ |
| | | label: r.customerName || r.name || r.customer || '-', |
| | | value: r.id ?? r.customerId ?? r.customerCode ?? r.customerName, |
| | | })) |
| | | if (customerOptions.value.length > 0 && !customerValue.value) { |
| | | customerValue.value = customerOptions.value[0].value |
| | | getCustomerRevenueAnalysis() |
| | | } |
| | | } catch (e) { |
| | | customerOptions.value = [ |
| | | { label: '华东精密', value: '华东精密' }, |
| | | { label: '星辰电子', value: '星辰电子' }, |
| | | { label: '启航科技', value: '启航科技' }, |
| | | { label: '铭诚制造', value: '铭诚制造' }, |
| | | { label: '远景材料', value: '远景材料' }, |
| | | ] |
| | | } |
| | | .catch((err) => { |
| | | console.error('获取产品周转天数失败:', err) |
| | | }) |
| | | } |
| | | |
| | | onMounted(() => { |
| | | fetchCustomerOptions() |
| | | fetchData() |
| | | }) |
| | | </script> |
| | | |