<script setup>
|
import {reactive, ref, watch} from "vue";
|
import {useI18n} from "vue-i18n";
|
import {Platform, Search, SuccessFilled} from "@element-plus/icons-vue";
|
import useUserInfoStore from "@/stores/userInfo";
|
import request from "@/utils/request";
|
import {ElMessage} from "element-plus";
|
|
|
const userStore = useUserInfoStore()
|
const username = userStore.user.userName
|
|
const {t} = useI18n()
|
|
const xGrid = ref()
|
//获取工程号
|
const props = defineProps({
|
projectNo : String,
|
data: {
|
type: Array,
|
default: () => []
|
}
|
});
|
// 定义响应式数据，用于绑定工程号输入框的值
|
const inputValue = ref(props.projectNo);
|
|
|
|
// 定义混排等级
|
const optionVal = ref('')
|
|
// 定义装载率
|
const percentage1 = ref(80)
|
const percentage2 = ref(50)
|
|
// 定义其他表单数据
|
const furnaceWidth = ref('') // 炉宽
|
const furnaceLength = ref('') // 炉长
|
const heatingTime = ref('') // 加热时间
|
const spacingLong = ref('') // 长轴间隔
|
const spacingWidth = ref('') // 宽轴间隔
|
|
|
const gridOptions = reactive({
|
height: '100%',
|
loading: false,
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
stripe: true,//斑马纹
|
rowConfig: {isCurrent: true, isHover: true, height: 30, useKey: true},//鼠标移动或选择高亮
|
id: 'Compute',
|
scrollX: {enabled: true},
|
scrollY: {enabled: true, gt: 0},//开启虚拟滚动
|
showOverflow: true,
|
columnConfig: {
|
resizable: true,
|
useKey: true
|
},
|
filterConfig: { //筛选配置项
|
remote: true
|
},
|
customConfig: {
|
storage: true
|
},
|
editConfig: {
|
trigger: 'click',
|
mode: 'row',
|
showStatus: true
|
},
|
|
columns: [
|
{field: 'id', width: 70, title: '序号'},
|
{field: 'layoutsNumber', width: 100, title: '版图数'},
|
{field: 'loadingRate', width: 100, title: '装载率'},
|
{field: 'processCards', width: 100, title: '流程卡数'},
|
{field: 'simulatedPieces', width: 100, title: '模拟片数'},
|
{
|
field: 'processId',
|
width: 350,
|
title: t('processCard.processId'),
|
filters: [{data: ''}],
|
slots: {filter: 'num1_filter'},
|
sortable: true
|
},
|
],//表头参数
|
data: null,//表格数据
|
toolbarConfig: {
|
buttons: [],
|
slots: {
|
buttons: "toolbar_buttons"
|
},
|
},
|
})
|
|
|
|
|
|
// 监听父组件传递的数据变化
|
watch(() => props.data, (newValue) => {
|
if (newValue) {
|
// 处理数据并更新表格
|
const processData = newValue.data[0];
|
console.log('Processed Data:', processData);
|
const processedData = [
|
{
|
id: "1",
|
layoutsNumber: processData.resultSum[0],
|
loadingRate: processData.resultSum[1],
|
processCards: processData.rackinfos.length,
|
simulatedPieces: processData.glass_details.length,
|
processId:processData.rackinfos
|
}
|
];
|
gridOptions.data = processedData;
|
console.log(gridOptions.data)
|
} else {
|
console.error("数据格式不正确或为空");
|
gridOptions.data = [];
|
}
|
})
|
|
|
const options = [
|
{
|
value: '0',
|
label: '不混排',
|
},
|
{
|
value: '1',
|
label: '轻度混排',
|
},
|
{
|
value: '2',
|
label: '中度混排',
|
},
|
{
|
value: '3',
|
label: '高度混排',
|
},
|
]
|
|
|
|
// let emit = defineEmits(['fetch-data']);
|
let emit = defineEmits(['fetch-data', 'sendData'])
|
const inputValues = {
|
project_no:inputValue,
|
glass_thickness:"",
|
glass_type:"",
|
chaos_pct: optionVal.value*0.01,//混排等级
|
cage_free:percentage2.value*0.01,//理片龙空闲度
|
tempering_time:heatingTime.value,//钢化加热时间
|
heat_mode: 0,//模式选择
|
max_load_pct: percentage1.value*0.01,//最大装载率
|
max_area: 0,//最大面积
|
max_qty:0,//最大片数
|
load_width:furnaceWidth,
|
load_length: furnaceLength,
|
x_space: spacingWidth,
|
y_space: spacingLong,
|
load_rate: null,
|
};
|
|
// 发送所有数据到父组件
|
emit('sendData', {
|
...inputValues
|
});
|
const handleSearchClick = () => {
|
// 通过 $emit 触发自定义事件，将工程号传递给父组件，由父组件去调用接口获取数据
|
emit('fetch-data', inputValue.value);
|
|
|
};
|
const handleSimulationClick = () => {
|
// 触发父组件的 simulate-click 事件
|
emit('simulate-click');
|
|
};
|
|
|
|
|
|
const handleSave = () => {
|
|
if (props.data) {
|
|
|
let projectData = ref({
|
projectdetail: props.data,
|
userName : username,
|
inputValues:inputValues
|
})
|
|
request.post(`/glassOptimize/simulationSave`, projectData.value).then((res) => {
|
if (res.code == 200 && res.data === true) {
|
ElMessage.success(t('basicData.msg.saveSuccess'))
|
|
} else {
|
ElMessage.warning(res.msg)
|
}
|
})
|
|
}
|
}
|
|
</script>
|
|
<template>
|
<div style="width: 100%;height: 100%">
|
<!--模拟计算表头-->
|
<div id="title" style="margin-top: -10px">
|
<span>
|
工程编号
|
<el-input style="width:150px;margin-left: 30px" clearable v-model="inputValue" placeholder="请输入工程号"></el-input>
|
<el-button
|
type="primary"
|
:icon="Search"
|
style="margin-left: 20px"
|
@click="handleSearchClick"
|
>{{ $t('basicData.search') }}
|
</el-button>
|
</span>
|
<span style="float: right ; margin-right: 120px">
|
工程混排等级
|
<el-select
|
placeholder="选择混排等级"
|
style="margin-left:10px; width: 200px; "
|
ref="getSelect"
|
v-model="optionVal"
|
clearable
|
class="m-2"
|
@change="getWorkOrder"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<el-button type="primary" style="margin-left: 10px" :icon="Platform" @click="handleSimulationClick">模拟计算</el-button>
|
<el-button type="primary" style="margin-left: 20px" :icon="SuccessFilled" @click="handleSave">保存</el-button>
|
</span><br>
|
<div class="demo-progress" style="margin-top: 5px">
|
<div style="display: flex; align-items: center">
|
<span>钢化最大装载</span>
|
<!-- 进度条设置 -->
|
<el-slider
|
style="max-width: 400px; flex: 1; margin-left: 10px"
|
v-model="percentage1"
|
:min="0"
|
:max="100"
|
:step="1"/>
|
<span style="margin-left: 20px ; width: 30px;">{{ percentage1 }}%</span>
|
<span style="float: right ; margin-left: 150px;">
|
宽轴间隔 <vxe-input size="small" class="input" clearable v-model="spacingWidth"></vxe-input>
|
炉宽(mm) <vxe-input size="small" class="input" clearable v-model="furnaceWidth"></vxe-input>
|
</span>
|
</div>
|
</div>
|
<br>
|
<div class="demo-progress" style="margin-top: -10px">
|
<div style="display: flex; align-items: center">
|
<span>理片笼空闲度</span>
|
<!-- 进度条设置 -->
|
<el-slider
|
style="max-width: 400px; flex: 1; margin-left: 10px"
|
v-model="percentage2"
|
:min="0"
|
:max="100"
|
:step="1"/>
|
<span style="margin-left: 20px ; width: 30px;">{{ percentage2 }}%</span>
|
<span style="float: right ; margin-left: 150px;">
|
加热时间(秒)<vxe-input size="small" class="input" clearable v-model="heatingTime"></vxe-input>
|
长轴间隔 <vxe-input size="small" class="input" clearable v-model="spacingLong"></vxe-input>
|
炉长(mm) <vxe-input size="small" class="input" clearable v-model="furnaceLength"></vxe-input>
|
</span>
|
</div>
|
</div>
|
</div>
|
|
<vxe-grid
|
size="small"
|
@filter-change="filterChanged"
|
height="100%"
|
class="mytable-scrollbar"
|
ref="xGrid"
|
v-bind="gridOptions"
|
v-on="gridEvents"
|
>
|
<template #num2_filter="{ column, $panel }">
|
<div>
|
<div v-for="(option, index) in column.filters" :key="index">
|
<vxe-select v-model="option.data" :placeholder="$t('processCard.pleaseSelect')"
|
@change="changeFilterEvent($event, option, $panel)">
|
<vxe-option value="0" :label="$t('basicData.unchecked')"></vxe-option>
|
<vxe-option value="1" :label="$t('basicData.selected')"></vxe-option>
|
</vxe-select>
|
</div>
|
</div>
|
</template>
|
|
<template #num1_filter="{ column, $panel }">
|
<div>
|
<div v-for="(option, index) in column.filters" :key="index">
|
<input
|
type="type"
|
v-model="option.data"
|
@keyup.enter.native="$panel.confirmFilter()"
|
@input="changeFilterEvent($event, option, $panel)"/>
|
</div>
|
</div>
|
</template>
|
</vxe-grid>
|
</div>
|
</template>
|
|
<style scoped>
|
|
.input {
|
width: 80px;
|
margin-left: 20px;
|
}
|
|
</style>
|
