|
|
|
|
@ -22,17 +22,17 @@
|
|
|
|
|
<div class="metric-extra"><span>单</span><span>同比 +8.6%</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="metric-card">
|
|
|
|
|
<div class="metric-label">排产数量</div>
|
|
|
|
|
<div class="metric-label">已排产数量</div>
|
|
|
|
|
<div class="metric-value" ref="monthPlanEl"></div>
|
|
|
|
|
<div class="metric-extra"><span>件</span><span>较计划 +3.2%</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="metric-card">
|
|
|
|
|
<div class="metric-label">待生产数量</div>
|
|
|
|
|
<div class="metric-value warn" ref="monthPendingEl"></div>
|
|
|
|
|
<div class="metric-label">已生产数量</div>
|
|
|
|
|
<div class="metric-value ok" ref="monthPendingEl"></div>
|
|
|
|
|
<div class="metric-extra"><span>件</span><span>剩余 5 天完成</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="metric-card">
|
|
|
|
|
<div class="metric-label">产能达成率</div>
|
|
|
|
|
<div class="metric-label">产能合格率</div>
|
|
|
|
|
<div class="metric-value accent" ref="monthRateEl"></div>
|
|
|
|
|
<div class="metric-extra"><span>目标 ≥ 85%</span><span>接近预期</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -47,8 +47,21 @@
|
|
|
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
import { colors, animateCount, style } from '../utils'
|
|
|
|
|
import { PlanApi } from '@/api/mes/plan'
|
|
|
|
|
|
|
|
|
|
const month = { orders: 158, plan: 420000, pending: 75600, rate: 82.0 }
|
|
|
|
|
type CapacityData = {
|
|
|
|
|
orders: number
|
|
|
|
|
scheduled: number
|
|
|
|
|
produced: number
|
|
|
|
|
rate: number
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const month: CapacityData = {
|
|
|
|
|
orders: 0,
|
|
|
|
|
scheduled: 0,
|
|
|
|
|
produced: 0,
|
|
|
|
|
rate: 0
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const chartRef = ref<HTMLElement | null>(null)
|
|
|
|
|
const monthOrderEl = ref<HTMLElement | null>(null)
|
|
|
|
|
@ -58,6 +71,26 @@ const monthRateEl = ref<HTMLElement | null>(null)
|
|
|
|
|
|
|
|
|
|
let chart: echarts.ECharts | null = null
|
|
|
|
|
|
|
|
|
|
const mapCapacity = (raw: any): CapacityData => {
|
|
|
|
|
const orderCount = Number(raw?.orders ?? raw?.order ?? 0)
|
|
|
|
|
const scheduled = Number(raw?.plan ?? 0)
|
|
|
|
|
const produced = Number(raw?.pending ?? 0)
|
|
|
|
|
const rate = Number(raw?.rate ?? raw?.passRate ?? raw?.qualifiedRate ?? 0)
|
|
|
|
|
return { orders: orderCount, scheduled, produced, rate }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const loadMonthCapacity = async () => {
|
|
|
|
|
try {
|
|
|
|
|
const raw = await PlanApi.getPlanCapacity(2)
|
|
|
|
|
const mapped = mapCapacity(raw || {})
|
|
|
|
|
month.orders = mapped.orders
|
|
|
|
|
month.scheduled = mapped.scheduled
|
|
|
|
|
month.produced = mapped.produced
|
|
|
|
|
month.rate = mapped.rate
|
|
|
|
|
} catch {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const initChart = () => {
|
|
|
|
|
if (!chartRef.value) return
|
|
|
|
|
chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
|
|
|
|
|
@ -73,8 +106,8 @@ const initChart = () => {
|
|
|
|
|
label: { show: false },
|
|
|
|
|
emphasis: { scale: false },
|
|
|
|
|
data: [
|
|
|
|
|
{ value: month.plan - month.pending, name: '已完成', itemStyle: { color: colors.green } },
|
|
|
|
|
{ value: month.pending, name: '待生产', itemStyle: { color: 'rgba(15,23,42,0.8)' } }
|
|
|
|
|
{ value: month.scheduled, name: '已排产', itemStyle: { color: colors.cyan } },
|
|
|
|
|
{ value: month.produced, name: '已生产', itemStyle: { color: colors.green } }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
@ -85,11 +118,12 @@ const resizeHandler = () => {
|
|
|
|
|
chart?.resize()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
await loadMonthCapacity()
|
|
|
|
|
initChart()
|
|
|
|
|
animateCount(monthOrderEl.value, month.orders, '', 900)
|
|
|
|
|
animateCount(monthPlanEl.value, month.plan, '', 900)
|
|
|
|
|
animateCount(monthPendingEl.value, month.pending, '', 900)
|
|
|
|
|
animateCount(monthPlanEl.value, month.scheduled, '', 900)
|
|
|
|
|
animateCount(monthPendingEl.value, month.produced, '', 900)
|
|
|
|
|
animateCount(monthRateEl.value, month.rate, '%', 900)
|
|
|
|
|
window.addEventListener('resize', resizeHandler)
|
|
|
|
|
})
|
|
|
|
|
|