|
|
<template>
|
|
|
<div class="app-container">
|
|
|
|
|
|
<el-row :gutter="10" class="mb8">
|
|
|
|
|
|
<el-col :span="3">
|
|
|
<el-form :model="queryForm" label-width="80px">
|
|
|
<el-form-item label="时间范围">
|
|
|
<el-select v-model="queryForm.selectedTimeRange" placeholder="选择时间范围" style="width: 100%">
|
|
|
<el-option
|
|
|
v-for="item in timeRangeOptions"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="3">
|
|
|
<el-form :model="queryForm" label-width="80px">
|
|
|
<el-form-item label="机台机型">
|
|
|
<el-select v-model="queryForm.selectedEquipmentType" placeholder="选择设备类型" style="width: 100%">
|
|
|
<el-option
|
|
|
v-for="item in equipmentTypes"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="1.5">
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
plain
|
|
|
@click="handlePareto"
|
|
|
v-hasPermi="['warehouse:WmsImportResult:add']"
|
|
|
>帕累托分析</el-button>
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="1.5">
|
|
|
<el-button
|
|
|
type="info"
|
|
|
plain
|
|
|
@click="handleRepairSummary"
|
|
|
v-hasPermi="['equipment:repair:list']"
|
|
|
>维修汇总</el-button>
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
<el-col :span="1.5">
|
|
|
<el-button
|
|
|
type="success"
|
|
|
plain
|
|
|
icon="Edit"
|
|
|
@click="handleItemAnalysis"
|
|
|
v-hasPermi="['warehouse:WmsImportResult:edit']"
|
|
|
>项目分析</el-button>
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="1.5">
|
|
|
<el-button
|
|
|
type="danger"
|
|
|
plain
|
|
|
:disabled="multiple"
|
|
|
@click="handleDelete"
|
|
|
v-hasPermi="['warehouse:WmsImportResult:remove']"
|
|
|
>趋势分析</el-button>
|
|
|
</el-col>
|
|
|
<el-col :span="1.5">
|
|
|
<el-button
|
|
|
type="warning"
|
|
|
plain
|
|
|
@click="handleExport"
|
|
|
v-hasPermi="['warehouse:WmsImportResult:export']"
|
|
|
>产品特征分析</el-button>
|
|
|
</el-col>
|
|
|
|
|
|
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
</el-row>
|
|
|
|
|
|
<!-- 动态内容显示区域 -->
|
|
|
<el-row class="mb8">
|
|
|
<el-col :span="24">
|
|
|
<!-- 根据currentComponent动态切换组件 -->
|
|
|
<component
|
|
|
:is="currentComponent"
|
|
|
v-if="currentComponent"
|
|
|
:selected-time-range="queryForm.selectedTimeRange"
|
|
|
:selected-equipment-type="queryForm.selectedEquipmentType"
|
|
|
:pareto-data="paretoData"
|
|
|
:date-range="dateRange"
|
|
|
@ai-analysis-complete="handleAIAnalysisComplete"
|
|
|
/>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
<!-- 消息显示文本框 -->
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<el-input
|
|
|
v-model="message"
|
|
|
type="textarea"
|
|
|
:rows="6"
|
|
|
placeholder="API返回的消息将显示在这里"
|
|
|
clearable
|
|
|
/>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup name="WmsImportResult">
|
|
|
import { ref, reactive, shallowRef, watch } from 'vue'
|
|
|
import { API_CONFIG } from "@/config/api"
|
|
|
import { getDateRangeByTimeRange } from "@/utils/dateFormat"
|
|
|
import ParetoAnalysis from './ParetoAnalysis.vue'
|
|
|
import ItemAnalysis from './ItemAnalysis.vue'
|
|
|
import EmptyContent from './EmptyContent.vue'
|
|
|
import RepairSummary from './RepairSummary.vue'
|
|
|
|
|
|
const showSearch = ref(true)
|
|
|
const single = ref(true)
|
|
|
const multiple = ref(true)
|
|
|
const message = ref("")
|
|
|
const timeRangeOptions = ref([
|
|
|
{ value: "近1年", label: "近1年" },
|
|
|
{ value: "近2年", label: "近2年" },
|
|
|
{ value: "近3年", label: "近3年" }
|
|
|
])
|
|
|
|
|
|
const equipmentTypes = ref([
|
|
|
{ value: '漆包机', label: '漆包机' },
|
|
|
{ value: '拉丝机', label: '拉丝机' }
|
|
|
])
|
|
|
|
|
|
const queryForm = ref({
|
|
|
selectedTimeRange: "近1年",
|
|
|
selectedEquipmentType: "漆包机"
|
|
|
})
|
|
|
const paretoData = ref([])
|
|
|
const dateRange = ref({
|
|
|
start_date: '',
|
|
|
end_date: ''
|
|
|
})
|
|
|
|
|
|
// 当前显示的组件
|
|
|
const currentComponent = shallowRef(EmptyContent)
|
|
|
|
|
|
// 监听时间范围变化，更新dateRange
|
|
|
watch(() => queryForm.value.selectedTimeRange, (newTimeRange) => {
|
|
|
// 如果当前是维修汇总组件，则更新dateRange并刷新数据
|
|
|
if (currentComponent.value === RepairSummary) {
|
|
|
dateRange.value = getDateRangeByTimeRange(newTimeRange);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
const data = reactive({
|
|
|
form: {},
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
model: null,
|
|
|
specification: null,
|
|
|
wireDisc: null,
|
|
|
totalNumber: null,
|
|
|
totalNetWeight: null,
|
|
|
totalGrossWeight: null,
|
|
|
type: 1,
|
|
|
warningValue: null,
|
|
|
},
|
|
|
rules: {
|
|
|
}
|
|
|
})
|
|
|
|
|
|
function handlePareto() {
|
|
|
// 根据选择的时间范围计算开始和结束日期
|
|
|
const dateRange = getDateRangeByTimeRange(queryForm.value.selectedTimeRange);
|
|
|
const { start_date: startDateStr, end_date: endDateStr } = dateRange;
|
|
|
|
|
|
// console.log(startDateStr, endDateStr);
|
|
|
// 调用质检API并显示结果
|
|
|
fetch(`${API_CONFIG.BASE_URL}${API_CONFIG.ENDPOINTS.PARETO_ANALYSIS}?start_date=${startDateStr}&end_date=${endDateStr}`)
|
|
|
.then(response => response.json())
|
|
|
.then(data => {
|
|
|
message.value = data.message || `质检数据获取成功 (${queryForm.value.selectedTimeRange})`
|
|
|
// 更新帕累托数据
|
|
|
if (data.code === 200 && data.data) {
|
|
|
paretoData.value = data.data;
|
|
|
dateRange.value = {
|
|
|
start_date: data.start_date,
|
|
|
end_date: data.end_date
|
|
|
};
|
|
|
// 切换到帕累托分析组件
|
|
|
currentComponent.value = ParetoAnalysis;
|
|
|
}
|
|
|
})
|
|
|
.catch(error => {
|
|
|
console.error('质检API调用失败:', error)
|
|
|
message.value = '质检API调用失败'
|
|
|
})
|
|
|
}
|
|
|
|
|
|
// 处理AI分析完成事件
|
|
|
function handleAIAnalysisComplete(result) {
|
|
|
message.value = result;
|
|
|
}
|
|
|
|
|
|
|
|
|
// 项目分析按钮点击事件
|
|
|
function handleItemAnalysis() {
|
|
|
// 切换到项目分析组件
|
|
|
currentComponent.value = ItemAnalysis;
|
|
|
}
|
|
|
|
|
|
// 维修汇总按钮点击事件
|
|
|
function handleRepairSummary() {
|
|
|
// 打印调试信息
|
|
|
console.log('切换到维修汇总组件，设备类型:', queryForm.value.selectedEquipmentType);
|
|
|
|
|
|
// 根据选择的时间范围计算开始和结束日期
|
|
|
dateRange.value = getDateRangeByTimeRange(queryForm.value.selectedTimeRange);
|
|
|
|
|
|
// 切换到维修汇总组件
|
|
|
currentComponent.value = RepairSummary;
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
/* 在全局样式文件中添加 */
|
|
|
.el-dialog {
|
|
|
margin-top: 0 !important;
|
|
|
position: absolute;
|
|
|
top: 40%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
|
|
|
.statistics-info {
|
|
|
margin-top: 10px;
|
|
|
padding: 10px;
|
|
|
background-color: #f5f7fa;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
.statistics-info p {
|
|
|
margin: 5px 0;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.ai-analysis-content {
|
|
|
padding: 10px 0;
|
|
|
}
|
|
|
</style>
|