| | |
| | | <div> |
| | | <PanelHeader title="工单执行效率分析" /> |
| | | <div class="main-panel panel-item-customers"> |
| | | <Echarts ref="chart" :chartStyle="chartStyle" :grid="grid" :legend="barLegend" :series="chartSeries" |
| | | :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1" |
| | | :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }" style="height: 260px" /> |
| | | <div class="filters-row"> |
| | | <DateTypeSwitch v-model="dateType" @change="handleDateTypeChange" /> |
| | | </div> |
| | | <Echarts |
| | | ref="chart" |
| | | :chartStyle="chartStyle" |
| | | :grid="grid" |
| | | :legend="barLegend" |
| | | :series="chartSeries" |
| | | :tooltip="tooltip" |
| | | :xAxis="xAxis1" |
| | | :yAxis="yAxis1" |
| | | :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }" |
| | | style="height: 260px" |
| | | /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | import { workOrderEfficiencyAnalysis } from '@/api/viewIndex.js' |
| | | import PanelHeader from './PanelHeader.vue' |
| | | import Echarts from '@/components/Echarts/echarts.vue' |
| | | import DateTypeSwitch from './DateTypeSwitch.vue' |
| | | |
| | | const dateType = ref(1) // 1=周 2=月 3=季度 |
| | | |
| | | const chartStyle = { |
| | | width: '100%', |
| | | height: '160%', |
| | | height: '140%', |
| | | } |
| | | |
| | | const grid = { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true } |
| | |
| | | }, |
| | | ] |
| | | |
| | | const handleDateTypeChange = () => { |
| | | fetchData() |
| | | } |
| | | |
| | | const fetchData = () => { |
| | | workOrderEfficiencyAnalysis() |
| | | workOrderEfficiencyAnalysis({ dateType: dateType.value }) |
| | | .then((res) => { |
| | | // 根据你的结构,数据直接在 res.data 中 |
| | | if (!res?.data || !Array.isArray(res.data)) return |
| | | |
| | | const list = res.data |
| | | |
| | | xAxis1.value[0].data = list.map((item) => item.date) |
| | | |
| | | chartSeries.value[0].data = list.map((item) => Number(item.startQuantity) || 0) |
| | | |
| | | chartSeries.value[1].data = list.map((item) => Number(item.finishQuantity) || 0) |
| | | |
| | | chartSeries.value[2].data = list.map((item) => Number(item.yieldRate) || 0) |
| | | if (res.code !== 200 || !Array.isArray(res.data)) return |
| | | const items = res.data |
| | | xAxis1.value[0].data = items.map((d) => d.date) |
| | | // 开工 |
| | | chartSeries.value[0].data = items.map((d) => Number(d.startQuantity) || 0) |
| | | // 完成 |
| | | chartSeries.value[1].data = items.map((d) => Number(d.finishQuantity) || 0) |
| | | // 良品率 |
| | | chartSeries.value[2].data = items.map((d) => Math.min(100, parseFloat(d.yieldRate) || 0)) |
| | | }) |
| | | .catch((err) => { |
| | | console.error('获取工单效率数据失败:', err) |
| | | console.error('获取工单执行效率分析失败:', err) |
| | | }) |
| | | } |
| | | |
| | |
| | | gap: 20px; |
| | | } |
| | | |
| | | .filters-row { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | align-items: center; |
| | | gap: 12px; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .panel-item-customers { |
| | | border: 1px solid #1a58b0; |
| | | padding: 18px; |