<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, inject, watch } from 'vue'
|
import Echarts from '@/components/Echarts/echarts.vue'
|
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 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 fetchData = () => {
|
productTurnoverDays()
|
.then((res) => {
|
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((err) => {
|
console.error('获取产品周转天数失败:', err)
|
})
|
}
|
|
const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null)
|
if (dataDashboardRefreshTick) {
|
watch(dataDashboardRefreshTick, () => {
|
fetchData()
|
})
|
}
|
|
onMounted(() => {
|
fetchData()
|
})
|
</script>
|
|
<style scoped>
|
.equipment-stats {
|
border: 1px solid #1a58b0;
|
padding: 0 18px 18px;
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
position: relative;
|
overflow: hidden;
|
}
|
|
/* 面板角落装饰 */
|
.equipment-stats::before,
|
.equipment-stats::after {
|
content: '';
|
position: absolute;
|
width: 15px;
|
height: 15px;
|
border-color: rgba(0, 212, 255, 0.5);
|
border-style: solid;
|
pointer-events: none;
|
}
|
|
.equipment-stats::before {
|
top: -1px;
|
left: -1px;
|
border-width: 2px 0 0 2px;
|
}
|
|
.equipment-stats::after {
|
bottom: -1px;
|
right: -1px;
|
border-width: 0 2px 2px 0;
|
}
|
|
.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;
|
animation: iconFloat 4s ease-in-out infinite;
|
}
|
|
@keyframes iconFloat {
|
0%, 100% { transform: translateY(0); }
|
50% { transform: translateY(-3px); }
|
}
|
</style>
|
