1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| <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 { 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)
| })
| }
|
| onMounted(() => {
| fetchData()
| })
| </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>
|
|
