|
|
|
|
@ -5,9 +5,9 @@
|
|
|
|
|
<span class="card-title-icon">
|
|
|
|
|
<Icon icon="fa-solid:moon" />
|
|
|
|
|
</span>
|
|
|
|
|
<span>月产能达成情况</span>
|
|
|
|
|
<span>{{ t('MonthCapacity.title') }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="tag">当月累计</span>
|
|
|
|
|
<span class="tag">{{ t('MonthCapacity.tag') }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="card-body-row">
|
|
|
|
|
@ -17,19 +17,19 @@
|
|
|
|
|
<div class="card-body-col">
|
|
|
|
|
<div class="metrics-grid">
|
|
|
|
|
<div class="metric-card">
|
|
|
|
|
<div class="metric-label">排产单数量</div>
|
|
|
|
|
<div class="metric-label">{{ t('MonthCapacity.metrics.orders') }}</div>
|
|
|
|
|
<div class="metric-value" ref="monthOrderEl"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="metric-card">
|
|
|
|
|
<div class="metric-label">已排产数量</div>
|
|
|
|
|
<div class="metric-label">{{ t('MonthCapacity.metrics.scheduled') }}</div>
|
|
|
|
|
<div class="metric-value" ref="monthPlanEl"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="metric-card">
|
|
|
|
|
<div class="metric-label">已生产数量</div>
|
|
|
|
|
<div class="metric-label">{{ t('MonthCapacity.metrics.produced') }}</div>
|
|
|
|
|
<div class="metric-value ok" ref="monthPendingEl"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="metric-card">
|
|
|
|
|
<div class="metric-label">产能合格率</div>
|
|
|
|
|
<div class="metric-label">{{ t('MonthCapacity.metrics.rate') }}</div>
|
|
|
|
|
<div class="metric-value accent" ref="monthRateEl"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -40,14 +40,18 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
|
|
import { ref, onMounted, onUnmounted, watch } from 'vue'
|
|
|
|
|
import { useRoute } from 'vue-router'
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
import { colors, animateCount, style } from '../utils'
|
|
|
|
|
import { PlanApi } from '@/api/mes/plan'
|
|
|
|
|
import { useI18n } from '@/hooks/web/useI18n'
|
|
|
|
|
import { useLocaleStore } from '@/store/modules/locale'
|
|
|
|
|
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
const orgId = route.query.orgId
|
|
|
|
|
const { t } = useI18n('Dashboard8')
|
|
|
|
|
const localeStore = useLocaleStore()
|
|
|
|
|
|
|
|
|
|
type CapacityData = {
|
|
|
|
|
orders: number
|
|
|
|
|
@ -71,6 +75,27 @@ const monthRateEl = ref<HTMLElement | null>(null)
|
|
|
|
|
|
|
|
|
|
let chart: echarts.ECharts | null = null
|
|
|
|
|
|
|
|
|
|
const buildOption = () => {
|
|
|
|
|
return {
|
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
|
tooltip: { trigger: 'item' },
|
|
|
|
|
legend: { bottom: '0%', left: 'center', textStyle: style.legendText },
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: ['60%', '82%'],
|
|
|
|
|
center: ['50%', '55%'],
|
|
|
|
|
label: { show: false },
|
|
|
|
|
emphasis: { scale: false },
|
|
|
|
|
data: [
|
|
|
|
|
{ value: month.scheduled, name: t('MonthCapacity.chart.scheduled'), itemStyle: { color: colors.cyan } },
|
|
|
|
|
{ value: month.produced, name: t('MonthCapacity.chart.produced'), itemStyle: { color: colors.green } }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const mapCapacity = (raw: any): CapacityData => {
|
|
|
|
|
const orderCount = Number(raw?.orders ?? raw?.order ?? 0)
|
|
|
|
|
const scheduled = Number(raw?.plan ?? 0)
|
|
|
|
|
@ -94,24 +119,7 @@ const loadMonthCapacity = async () => {
|
|
|
|
|
const initChart = () => {
|
|
|
|
|
if (!chartRef.value) return
|
|
|
|
|
chart = echarts.init(chartRef.value, 'dark', { renderer: 'canvas' })
|
|
|
|
|
chart.setOption({
|
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
|
tooltip: { trigger: 'item' },
|
|
|
|
|
legend: { bottom: '0%', left: 'center', textStyle: style.legendText },
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: ['60%', '82%'],
|
|
|
|
|
center: ['50%', '55%'],
|
|
|
|
|
label: { show: false },
|
|
|
|
|
emphasis: { scale: false },
|
|
|
|
|
data: [
|
|
|
|
|
{ value: month.scheduled, name: '已排产', itemStyle: { color: colors.cyan } },
|
|
|
|
|
{ value: month.produced, name: '已生产', itemStyle: { color: colors.green } }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
chart.setOption(buildOption())
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const resizeHandler = () => {
|
|
|
|
|
@ -121,6 +129,7 @@ const resizeHandler = () => {
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
await loadMonthCapacity()
|
|
|
|
|
initChart()
|
|
|
|
|
chart?.setOption(buildOption(), true)
|
|
|
|
|
animateCount(monthOrderEl.value, month.orders, '', 900)
|
|
|
|
|
animateCount(monthPlanEl.value, month.scheduled, '', 900)
|
|
|
|
|
animateCount(monthPendingEl.value, month.produced, '', 900)
|
|
|
|
|
@ -128,6 +137,13 @@ onMounted(async () => {
|
|
|
|
|
window.addEventListener('resize', resizeHandler)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => localeStore.getCurrentLocale.lang,
|
|
|
|
|
() => {
|
|
|
|
|
chart?.setOption(buildOption(), true)
|
|
|
|
|
}
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
window.removeEventListener('resize', resizeHandler)
|
|
|
|
|
chart?.dispose()
|
|
|
|
|
|
