|
|
|
|
@ -24,11 +24,12 @@
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="机床">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="filters.machineId"
|
|
|
|
|
v-model="filters.machineIds"
|
|
|
|
|
value-key="value"
|
|
|
|
|
placeholder="请选择机床"
|
|
|
|
|
clearable
|
|
|
|
|
filterable
|
|
|
|
|
multiple
|
|
|
|
|
style="min-width:200px"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
@ -111,20 +112,12 @@
|
|
|
|
|
|
|
|
|
|
<!-- 图表行 -->
|
|
|
|
|
<el-row :gutter="16" class="chart-row">
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-card shadow="hover">
|
|
|
|
|
<template #header>
|
|
|
|
|
<span class="card-title">机床产量柱状图</span>
|
|
|
|
|
</template>
|
|
|
|
|
<div ref="barChartRef" style="height: 300px"></div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
<el-card shadow="hover">
|
|
|
|
|
<template #header>
|
|
|
|
|
<span class="card-title">各机床产量占比</span>
|
|
|
|
|
</template>
|
|
|
|
|
<div ref="pieChartRef" style="height: 300px"></div>
|
|
|
|
|
<div ref="barChartRef" style="height: 350px"></div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
@ -137,7 +130,11 @@
|
|
|
|
|
<el-table :data="tableData" stripe size="small" v-loading="loading">
|
|
|
|
|
<el-table-column prop="rank" label="排名" width="60" align="center" />
|
|
|
|
|
<el-table-column prop="machineName" label="机床名称" width="120" />
|
|
|
|
|
<el-table-column prop="programName" label="程序名" show-overflow-tooltip />
|
|
|
|
|
<el-table-column prop="programName" label="程序名" show-overflow-tooltip>
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
<el-link type="primary" :underline="false" @click="goToProgram(row)">{{ row.programName }}</el-link>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="totalQuantity" label="产量" width="100" align="center" />
|
|
|
|
|
<el-table-column label="运行时间" width="100" align="center">
|
|
|
|
|
<template #default="{ row }">{{ row.runTime }}h</template>
|
|
|
|
|
@ -150,6 +147,7 @@
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
|
|
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
|
|
|
import request from '@/utils/request'
|
|
|
|
|
import echarts from '@/utils/echarts'
|
|
|
|
|
import type { ECharts } from 'echarts/core'
|
|
|
|
|
@ -179,6 +177,10 @@ interface DropdownOption {
|
|
|
|
|
label: string
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ---------- 路由 ----------
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
|
|
|
|
|
// ---------- 状态 ----------
|
|
|
|
|
const loading = ref(false)
|
|
|
|
|
const tableData = ref<MachineProductionItem[]>([])
|
|
|
|
|
@ -187,7 +189,7 @@ const summary = ref<Partial<MachineProductionSummary>>({})
|
|
|
|
|
const filters = reactive({
|
|
|
|
|
dateRange: [] as string[],
|
|
|
|
|
workshopId: '' as string | number,
|
|
|
|
|
machineId: '' as string | number,
|
|
|
|
|
machineIds: [] as string[],
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const options = reactive({
|
|
|
|
|
@ -197,9 +199,7 @@ const options = reactive({
|
|
|
|
|
|
|
|
|
|
// ---------- ECharts ----------
|
|
|
|
|
const barChartRef = ref<HTMLElement>()
|
|
|
|
|
const pieChartRef = ref<HTMLElement>()
|
|
|
|
|
let barChart: ECharts | null = null
|
|
|
|
|
let pieChart: ECharts | null = null
|
|
|
|
|
|
|
|
|
|
/** 初始化柱状图 */
|
|
|
|
|
function initBarChart() {
|
|
|
|
|
@ -208,6 +208,7 @@ function initBarChart() {
|
|
|
|
|
barChart = echarts.init(barChartRef.value)
|
|
|
|
|
const names = tableData.value.map((i) => i.machineName)
|
|
|
|
|
const quantities = tableData.value.map((i) => i.totalQuantity)
|
|
|
|
|
const total = tableData.value.reduce((sum, i) => sum + i.totalQuantity, 0)
|
|
|
|
|
barChart.setOption({
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
@ -216,7 +217,7 @@ function initBarChart() {
|
|
|
|
|
return `${item.name}<br/>产量: ${item.value} 件`
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
grid: { left: 50, right: 20, top: 20, bottom: 40 },
|
|
|
|
|
grid: { left: 50, right: 20, top: 30, bottom: 40 },
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
data: names,
|
|
|
|
|
@ -232,38 +233,15 @@ function initBarChart() {
|
|
|
|
|
borderRadius: [4, 4, 0, 0],
|
|
|
|
|
},
|
|
|
|
|
barWidth: '50%',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/** 初始化饼图 */
|
|
|
|
|
function initPieChart() {
|
|
|
|
|
if (!pieChartRef.value || !tableData.value.length) return
|
|
|
|
|
if (pieChart) pieChart.dispose()
|
|
|
|
|
pieChart = echarts.init(pieChartRef.value)
|
|
|
|
|
const pieData = tableData.value.map((i) => ({
|
|
|
|
|
value: i.totalQuantity,
|
|
|
|
|
name: i.machineName,
|
|
|
|
|
}))
|
|
|
|
|
pieChart.setOption({
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item',
|
|
|
|
|
formatter: '{b}: {c}件 ({d}%)',
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: ['40%', '65%'],
|
|
|
|
|
center: ['50%', '50%'],
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
formatter: '{b}: {c}件 ({d}%)',
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
},
|
|
|
|
|
data: pieData,
|
|
|
|
|
emphasis: {
|
|
|
|
|
label: { fontSize: 14, fontWeight: 'bold' },
|
|
|
|
|
position: 'top',
|
|
|
|
|
formatter: (params: { value: number }) => {
|
|
|
|
|
if (total === 0) return ''
|
|
|
|
|
const pct = ((params.value / total) * 100).toFixed(1)
|
|
|
|
|
return `${params.value}件 (${pct}%)`
|
|
|
|
|
},
|
|
|
|
|
fontSize: 11,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
@ -273,9 +251,22 @@ function initPieChart() {
|
|
|
|
|
/** 销毁所有图表 */
|
|
|
|
|
function disposeCharts() {
|
|
|
|
|
barChart?.dispose()
|
|
|
|
|
pieChart?.dispose()
|
|
|
|
|
barChart = null
|
|
|
|
|
pieChart = null
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ---------- 跨页面联动 ----------
|
|
|
|
|
/** 点击程序名跳转到程序产量页面 */
|
|
|
|
|
function goToProgram(row: MachineProductionItem) {
|
|
|
|
|
const startDate = filters.dateRange[0] ?? ''
|
|
|
|
|
const endDate = filters.dateRange[1] ?? ''
|
|
|
|
|
router.push({
|
|
|
|
|
path: '/admin/production/program',
|
|
|
|
|
query: {
|
|
|
|
|
startDate,
|
|
|
|
|
endDate,
|
|
|
|
|
programNames: row.programName,
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ---------- 数据加载 ----------
|
|
|
|
|
@ -306,7 +297,7 @@ async function loadData() {
|
|
|
|
|
startDate: filters.dateRange[0] ?? '',
|
|
|
|
|
endDate: filters.dateRange[1] ?? '',
|
|
|
|
|
workshopId: filters.workshopId ?? '',
|
|
|
|
|
machineId: filters.machineId ?? '',
|
|
|
|
|
machineIds: filters.machineIds.join(','),
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const [summaryRes, listRes] = await Promise.all([
|
|
|
|
|
@ -327,7 +318,6 @@ async function loadData() {
|
|
|
|
|
disposeCharts()
|
|
|
|
|
await nextTick()
|
|
|
|
|
initBarChart()
|
|
|
|
|
initPieChart()
|
|
|
|
|
} catch {
|
|
|
|
|
// API 不存在时 catch 错误不阻塞
|
|
|
|
|
} finally {
|
|
|
|
|
@ -341,16 +331,23 @@ function resetFilters() {
|
|
|
|
|
const todayStr = fmtDate(today)
|
|
|
|
|
filters.dateRange = [todayStr, todayStr]
|
|
|
|
|
filters.workshopId = ''
|
|
|
|
|
filters.machineId = ''
|
|
|
|
|
filters.machineIds = []
|
|
|
|
|
loadData()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// ---------- 生命周期 ----------
|
|
|
|
|
onMounted(async () => {
|
|
|
|
|
// 默认日期：今天到今天
|
|
|
|
|
const today = new Date()
|
|
|
|
|
const todayStr = fmtDate(today)
|
|
|
|
|
filters.dateRange = [todayStr, todayStr]
|
|
|
|
|
// 优先从 URL query 初始化筛选条件（跨页面联动）
|
|
|
|
|
if (route.query.startDate) {
|
|
|
|
|
filters.dateRange = [route.query.startDate as string, (route.query.endDate as string) || (route.query.startDate as string)]
|
|
|
|
|
} else {
|
|
|
|
|
const today = new Date()
|
|
|
|
|
const todayStr = fmtDate(today)
|
|
|
|
|
filters.dateRange = [todayStr, todayStr]
|
|
|
|
|
}
|
|
|
|
|
if (route.query.machineIds) {
|
|
|
|
|
filters.machineIds = (route.query.machineIds as string).split(',').filter(Boolean)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
await loadOptions()
|
|
|
|
|
loadData()
|
|
|
|
|
|
