| | |
| | | <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" |
| | | /> |
| | | <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> |
| | | |
| | | <script setup> |
| | | import { ref, onMounted } from 'vue' |
| | | import { qualityStatistics } from '@/api/viewIndex.js' |
| | | import { workOrderEfficiencyAnalysis } from '@/api/viewIndex.js' |
| | | import PanelHeader from './PanelHeader.vue' |
| | | import Echarts from '@/components/Echarts/echarts.vue' |
| | | |
| | |
| | | data: ['开工', '完成', '良品率'], |
| | | } |
| | | |
| | | // 柱状图:开工、完成;折线图:良品率(颜色 rgba(90, 216, 166, 1)) |
| | | const chartSeries = ref([ |
| | | { |
| | | name: '开工', |
| | |
| | | const xAxis1 = ref([ |
| | | { type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] }, |
| | | ]) |
| | | |
| | | const yAxis1 = [ |
| | | { type: 'value', name: '件', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } }, |
| | | { |
| | |
| | | ] |
| | | |
| | | const fetchData = () => { |
| | | qualityStatistics() |
| | | workOrderEfficiencyAnalysis() |
| | | .then((res) => { |
| | | if (!res?.data?.item || !Array.isArray(res.data.item)) return |
| | | const items = res.data.item |
| | | xAxis1.value[0].data = items.map((d) => d.date) |
| | | // 开工:过程检验数 |
| | | chartSeries.value[0].data = items.map((d) => Number(d.processNum) || 0) |
| | | // 完成:出厂数 |
| | | chartSeries.value[1].data = items.map((d) => Number(d.factoryNum) || 0) |
| | | // 良品率:出厂数/过程数*100(无单独接口时用此占位) |
| | | chartSeries.value[2].data = items.map((d) => { |
| | | const processNum = Number(d.processNum) || 0 |
| | | const factoryNum = Number(d.factoryNum) || 0 |
| | | if (processNum <= 0) return 0 |
| | | return Math.min(100, Math.round((factoryNum / processNum) * 100)) |
| | | }) |
| | | // 根据你的结构,数据直接在 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) |
| | | }) |
| | | .catch((err) => { |
| | | console.error('获取开工与良品率数据失败:', err) |
| | | console.error('获取工单效率数据失败:', err) |
| | | }) |
| | | } |
| | | |