<template>
|
<div>
|
<!-- 设备统计 -->
|
<div class="equipment-stats">
|
<div class="equipment-header">
|
<img
|
src="@/assets/BI/shujutongjiicon@2x.png"
|
alt="图标"
|
class="equipment-icon"
|
/>
|
<span class="equipment-title">产品周转天数</span>
|
</div>
|
<Echarts
|
ref="chart"
|
:chartStyle="chartStyle"
|
:grid="grid"
|
:legend="barLegend"
|
:series="barSeries1"
|
:tooltip="tooltip"
|
:xAxis="xAxis1"
|
:yAxis="yAxis1"
|
:options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
|
style="height: 260px"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<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([])
|
|
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 barSeries1 = ref([
|
{
|
name: '营收',
|
type: 'bar',
|
barGap: 0,
|
barWidth: 30,
|
emphasis: { focus: 'series' },
|
itemStyle: {
|
color: {
|
type: 'linear',
|
x: 0, y: 1, x2: 0, y2: 0,
|
colorStops: [
|
{ offset: 0, color: 'rgba(0,164,237,0)' },
|
{ offset: 1, color: '#4EE4FF' },
|
],
|
},
|
},
|
data: [],
|
},
|
])
|
const tooltip = {
|
trigger: 'axis',
|
axisPointer: { type: 'shadow' },
|
formatter(params) {
|
let result = params[0].axisValueLabel + '<br/>'
|
params.forEach((item) => {
|
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 })
|
.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)
|
})
|
})
|
.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: '远景材料' },
|
]
|
}
|
}
|
|
onMounted(() => {
|
fetchCustomerOptions()
|
})
|
</script>
|
|
<style scoped>
|
.equipment-stats {
|
border: 1px solid #1a58b0;
|
padding: 0 18px 18px;
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
}
|
|
.equipment-header {
|
font-weight: 500;
|
font-size: 21px;
|
display: flex;
|
border-bottom: 1px solid;
|
border-image: linear-gradient(
|
270deg,
|
rgba(0, 126, 255, 0) 0%,
|
rgba(0, 126, 255, 0.4549) 35%,
|
#007eff 78%,
|
#007eff 100%
|
)
|
1;
|
padding-bottom: 2px;
|
}
|
|
.equipment-title {
|
font-weight: 500;
|
font-size: 18px;
|
background: linear-gradient(360deg, #056dff 0%, #43e8fc 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
background-clip: text;
|
line-height: 50px;
|
}
|
|
.equipment-icon {
|
width: 50px;
|
height: 50px;
|
}
|
</style>
|
