<script setup>
|
import { ref, reactive, onMounted, watch } from 'vue';
|
import { useI18n } from "vue-i18n";
|
import { ElMessage } from "element-plus";
|
import request from "@/utils/request";
|
import useUserInfoStore from "@/stores/userInfo";
|
|
const { t } = useI18n();
|
const userStore = useUserInfoStore()
|
const username = userStore.user.userName
|
|
const currentComponent = ref('optimization');
|
|
const settings = reactive({
|
optimization: {},
|
display: {},
|
cutting: {},
|
server: {},
|
tempering: {}
|
});
|
|
const selectComponent = (component) => {
|
currentComponent.value = component;
|
};
|
|
const saveToDatabase = () => {
|
request.post(`/glassOptimize/optimizeParms`, settings).then((res) => {
|
if (res.code == 200 && res.data === true) {
|
ElMessage.success(t('basicData.msg.saveSuccess'))
|
} else {
|
ElMessage.warning(res.msg)
|
}
|
});
|
};
|
|
const fetchSettings = async (username) => {
|
try {
|
const response = await request.post(`/glassOptimize/selectOptimizeParms/${username}`);
|
if (response.code == 200) {
|
if (!response.data) {
|
console.error('响应数据为空');
|
return;
|
}
|
const parsedData = JSON.parse(response.data);
|
Object.assign(settings, parsedData);
|
console.log('设置已更新:', settings);
|
} else {
|
console.error('请求失败，状态码:', response.code);
|
}
|
} catch (error) {
|
console.error('请求发生错误:', error);
|
}
|
};
|
|
onMounted(() => {
|
fetchSettings(username);
|
});
|
|
// 参数映射表，用于将英文参数名映射为中文名称和类型
|
const paramMapping = {
|
yShapeJoinOptimization: { name: '异形拼接优化', type: 'checkbox' },
|
autoMiddleEmptyPairing: { name: '自动中空配对', type: 'checkbox' },
|
smallPieceRotationProhibited: { name: '小片禁止旋转', type: 'checkbox' },
|
maxFramesOnSite: { name: '现场最大可放架子数量', type: 'text' },
|
bendEdgeDistance: { name: '掰边距(mm)', type: 'text' },
|
positiveTolerance: { name: '正公差(mm)', type: 'text' },
|
negativeTolerance: { name: '负公差(mm)', type: 'text' },
|
cutterOriginPosition: { name: '切割机原点位置', type: 'select' },
|
uniformShapeEdgeTrimAmount: { name: '统一设置异形修边量', type: 'text' },
|
edgeTrimMode: { name: '修边模式', type: 'select' },
|
parallelOptimizationChannels: { name: '并行优化的通道数量', type: 'text' },
|
optimizationIterations: { name: '重复优化次数', type: 'text' },
|
finishedProductGrindingAmount: { name: '成品默认磨量', type: 'text' },
|
rawPieceEdgeTrimAmount: { name: '原片默认修边量', type: 'text' },
|
finishedSinglePieceBelowGrindingAmount: { name: '成品单片小于多少时磨量为', type: 'text' }
|
};
|
|
// 动态生成参数列表
|
const parameterList = ref(Object.keys(paramMapping).map(key => ({
|
key,
|
...paramMapping[key]
|
})));
|
</script>
|
|
<template>
|
<div class="settings-container">
|
<div class="sidebar">
|
<div
|
@click="selectComponent('optimization')"
|
:class="{ active: currentComponent === 'optimization' }"
|
class="sidebar-item"
|
>
|
<div class="sidebar-header">优化参数</div>
|
<div class="sidebar-content">优化参数设置</div>
|
</div>
|
|
<div
|
@click="selectComponent('display')"
|
:class="{ active: currentComponent === 'display' }"
|
class="sidebar-item"
|
>
|
<div class="sidebar-header">版图显示</div>
|
<div class="sidebar-content">版图显示设置</div>
|
</div>
|
|
<div
|
@click="selectComponent('cutting')"
|
:class="{ active: currentComponent === 'cutting' }"
|
class="sidebar-item"
|
>
|
<div class="sidebar-header">刀路</div>
|
<div class="sidebar-content">刀路设置</div>
|
</div>
|
|
<div
|
@click="selectComponent('server')"
|
:class="{ active: currentComponent === 'server' }"
|
class="sidebar-item"
|
>
|
<div class="sidebar-header">输出</div>
|
<div class="sidebar-content">结果输出设置</div>
|
</div>
|
|
<div
|
@click="selectComponent('tempering')"
|
:class="{ active: currentComponent === 'tempering' }"
|
class="sidebar-item"
|
>
|
<div class="sidebar-header">钢化</div>
|
<div class="sidebar-content">钢化设置</div>
|
</div>
|
</div>
|
|
<div class="main-content">
|
<template v-if="currentComponent === 'display'">
|
<div class="display-settings">
|
<h2>版图显示设置</h2>
|
<div class="form-group">
|
<label>矩形成品显示颜色</label>
|
<input type="color" v-model="settings.display.themeColor" />
|
</div>
|
<div class="form-group">
|
<label>成品尺寸包含磨边量</label>
|
<input type="checkbox" v-model="settings.display.includeProductEdge" />
|
</div>
|
<div class="form-group">
|
<label>异形尺寸包含磨边量</label>
|
<input type="checkbox" v-model="settings.display.includeIrregularEdge" />
|
</div>
|
<div class="form-group">
|
<label>按架号合并版图</label>
|
<input type="checkbox" v-model="settings.display.mergeByFrameNumber" />
|
</div>
|
<div style="border: 1px solid #d2d0d0; margin-top: 20px;">
|
<div style="background-color: #D5EAFF;">小片信息</div>
|
<div class="form-group">
|
<label>架号</label>
|
<input type="checkbox" v-model="settings.display.frameNumber" />
|
</div>
|
<div class="form-group">
|
<label>订单编号</label>
|
<input type="checkbox" v-model="settings.display.orderNumber" />
|
</div>
|
<div class="form-group">
|
<label>产品名称</label>
|
<input type="checkbox" v-model="settings.display.productName" />
|
</div>
|
<div class="form-group">
|
<label>加工信息</label>
|
<input type="checkbox" v-model="settings.display.processingInfo" />
|
</div>
|
<div class="form-group">
|
<label>备注</label>
|
<input type="checkbox" v-model="settings.display.remarks" />
|
</div>
|
<div class="form-group">
|
<label>楼层编号</label>
|
<input type="checkbox" v-model="settings.display.floorNumber" />
|
</div>
|
<div class="form-group">
|
<label>边长</label>
|
<input type="checkbox" v-model="settings.display.edgeLength" />
|
</div>
|
<div class="form-group">
|
<label>工艺</label>
|
<input type="checkbox" v-model="settings.display.manufacturingProcess" />
|
</div>
|
<div class="form-group">
|
<label>ID</label>
|
<input type="checkbox" v-model="settings.display.identifier" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<template v-else-if="currentComponent === 'cutting'">
|
<div class="display-settings">
|
<h2>刀路设置</h2>
|
<div class="form-group">
|
<label>正向切割</label>
|
<input type="checkbox" v-model="settings.cutting.cutting_direction" />
|
</div>
|
<div class="form-group">
|
<label>显示切割方向</label>
|
<input type="checkbox" v-model="settings.cutting.show_cutting_path" />
|
</div>
|
<div class="form-group">
|
<label>强制弧线和直线连续切割</label>
|
<input type="checkbox" v-model="settings.cutting.force_continuous_cutting" />
|
</div>
|
<div class="form-group">
|
<label>孔洞最小切割半径</label>
|
<input type="number" v-model="settings.cutting.min_radius" />
|
</div>
|
<div class="form-group">
|
<label>两条平行线最小间隔</label>
|
<input type="number" v-model="settings.cutting.min_parallel_offset" />
|
</div>
|
<div class="form-group">
|
<label>T型退缩</label>
|
<input type="number" v-model="settings.cutting.t_shaped_recess" />
|
</div>
|
<div class="form-group">
|
<label>下刀间距</label>
|
<input type="number" v-model="settings.cutting.down_cut_spacing" />
|
</div>
|
<div class="form-group">
|
<label>抬刀退缩</label>
|
<input type="number" v-model="settings.cutting.lift_retract" />
|
</div>
|
</div>
|
</template>
|
|
<template v-else-if="currentComponent === 'server'">
|
<div class="display-settings">
|
<h2>结果输出设置</h2>
|
<div class="form-group">
|
<label>工程文件保存路径</label>
|
<input type="text" v-model="settings.server.output_format" />
|
</div>
|
<div class="form-group">
|
<label>切割代码保存路径</label>
|
<input type="text" v-model="settings.server.cutting_code_save_path" />
|
</div>
|
<div class="form-group">
|
<label>保存文件后打开所在文件夹</label>
|
<input type="text" v-model="settings.server.open_folder_after_save" />
|
</div>
|
<div class="form-group">
|
<label>G代码文件格式</label>
|
<input type="text" v-model="settings.server.g_code_file_format" />
|
</div>
|
<div class="form-group">
|
<label>TRF文件保存路径</label>
|
<input type="text" v-model="settings.server.trf_file_save_path" />
|
</div>
|
<div class="form-group">
|
<label>保特罗文件保存路径</label>
|
<input type="text" v-model="settings.server.btl_file_save_path" />
|
</div>
|
<div class="form-group">
|
<label>OPTIMA文件保存路径</label>
|
<input type="text" v-model="settings.server.optima_file_save_path" />
|
</div>
|
<div class="form-group">
|
<label>优化深度限制启用</label>
|
<input type="text" v-model="settings.server.optimization_depth_limit_enable" />
|
</div>
|
<div class="form-group">
|
<label>原片切材率计算</label>
|
<input type="text" v-model="settings.server.original_sheet_material_calculation" />
|
</div>
|
</div>
|
</template>
|
|
<template v-else-if="currentComponent === 'tempering'">
|
<div class="display-settings">
|
<h2>钢化设置</h2>
|
<div class="form-group">
|
<label>炉长(mm)</label>
|
<input type="number" v-model="settings.tempering.furnaceLength" step="1" />
|
</div>
|
<div class="form-group">
|
<label>炉宽(mm)</label>
|
<input type="number" v-model="settings.tempering.furnaceWidth" step="1" />
|
</div>
|
<div class="form-group">
|
<label>最大装载率(%)</label>
|
<input type="number" v-model="settings.tempering.maxLoadingRate" step="1" />
|
</div>
|
<div class="form-group">
|
<label>混乱程度(%)</label>
|
<input type="number" v-model="settings.tempering.chaosLevel" step="1" />
|
</div>
|
<div class="form-group">
|
<label>钢化加热时间(秒)</label>
|
<input type="number" v-model="settings.tempering.temperingTime" step="1" />
|
</div>
|
<div class="form-group">
|
<label>默认钢化推荐模式</label>
|
<select v-model="settings.tempering.defaultTemperingMode">
|
<option value="auto">自动推荐</option>
|
<option value="manual">手动选择</option>
|
</select>
|
</div>
|
<div class="form-group">
|
<label>最大面积设置(㎡)</label>
|
<input type="number" v-model="settings.tempering.maxArea" step="0.1" />
|
</div>
|
<div class="form-group">
|
<label>最大片数设置(片)</label>
|
<input type="number" v-model="settings.tempering.maxPieceCount" step="1" />
|
</div>
|
<div class="form-group">
|
<label>X轴默认间隔(mm)</label>
|
<input type="number" v-model="settings.tempering.xAxisInterval" step="1" />
|
</div>
|
<div class="form-group">
|
<label>Y轴默认间隔(mm)</label>
|
<input type="number" v-model="settings.tempering.yAxisInterval" step="1" />
|
</div>
|
</div>
|
</template>
|
|
<template v-else>
|
<div class="display-settings">
|
<h2>优化参数设置</h2>
|
<div class="parameter-list">
|
<div
|
class="form-group"
|
v-for="(param, index) in parameterList"
|
:key="index"
|
>
|
<label class="parameter-name">{{ param.name }}</label>
|
<div class="parameter-control">
|
<input
|
v-if="param.type === 'checkbox'"
|
type="checkbox"
|
:checked="settings.optimization[param.key] === '1'"
|
@click="() => { settings.optimization[param.key] = settings.optimization[param.key] === '1' ? '0' : '1' }"
|
>
|
<select
|
v-else-if="param.type === 'select'"
|
:name="param.key"
|
class="cs"
|
>
|
<option
|
v-for="option in getOptions(param.key)"
|
:key="option.value"
|
:selected="option.value === settings.optimization[param.key]"
|
>
|
{{ option.label }}
|
</option>
|
</select>
|
<input
|
v-else
|
:type="param.type || 'text'"
|
:name="param.key"
|
class="cs"
|
v-model="settings.optimization[param.key]"
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
</div>
|
|
<button class="button" @click="saveToDatabase">保存</button>
|
</div>
|
</template>
|
|
<style>
|
.settings-container {
|
display: flex;
|
gap: 20px;
|
padding: 20px;
|
background-color: #f0f2f5;
|
}
|
|
.sidebar {
|
width: 300px;
|
background-color: white;
|
padding: 15px;
|
border-radius: 8px;
|
box-shadow: 0 2px 4 rgba(0, 0, 0, 0.1);
|
}
|
|
.sidebar-item {
|
cursor: pointer;
|
padding: 10px;
|
margin-bottom: 5px;
|
border-radius: 6px;
|
transition: all 0.3s ease;
|
}
|
|
.sidebar-item.active {
|
background-color: #f8f9fa;
|
transform: translateX(5px);
|
}
|
|
.sidebar-header {
|
font-size: 12px;
|
color: #666;
|
margin-bottom: 5px;
|
}
|
|
.sidebar-content {
|
font-size: 14px;
|
color:#333;
|
}
|
|
.main-content {
|
flex-grow: 1;
|
padding: 20px;
|
}
|
|
button {
|
padding: 10px 20px;
|
background-color: #5cadfe;
|
color: white;
|
border: none;
|
border-radius: 4px;
|
cursor: pointer;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
}
|
|
@media (max-width: 768px) {
|
.settings-container {
|
flex-direction: column;
|
}
|
|
.sidebar {
|
order: -1;
|
}
|
|
.main-content {
|
margin-top: 20px;
|
}
|
}
|
|
.form-group {
|
margin-bottom: 15px;
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.form-group label {
|
font-weight: normal;
|
min-width: 120px;
|
}
|
|
.form-group input,
|
.form-group select {
|
flex: 1;
|
padding: 5px;
|
border: 1px solid #ddd;
|
border-radius: 4px;
|
}
|
|
.form-group select {
|
cursor: pointer;
|
}
|
|
.display-settings {
|
background-color: white;
|
padding: 20px;
|
border-radius: 8px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
}
|
|
.parameter-list {
|
display: flex;
|
flex-direction: column;
|
gap: 0px;
|
}
|
|
.parameter-item {
|
display: flex;
|
align-items: center;
|
gap: 0px;
|
}
|
|
.parameter-name {
|
font-weight: normal;
|
min-width: 120px;
|
}
|
|
.parameter-control {
|
flex: 1;
|
}
|
|
.button {
|
text-align: center;
|
width: 70px;
|
height: 28px;
|
border: none;
|
background-color: #5CADFE;
|
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0), 0 6px 5px 0 rgba(0, 0, 0, 0.19);
|
margin-left: 500px;
|
}
|
</style>
|
|
<script>
|
// 辅助函数，根据参数键获取选项
|
function getOptions(key) {
|
const optionsMapping = {
|
cutterOriginPosition: [
|
{ value: 'topLeft', label: '左上角' },
|
{ value: 'bottomLeft', label: '左下角' },
|
{ value: 'topRight', label: '右上角' },
|
{ value: 'bottomRight', label: '右下角' }
|
],
|
edgeTrimMode: [
|
{ value: 'intelligent', label: '智能修边' },
|
{ value: 'complete', label: '完全修边' }
|
]
|
};
|
return optionsMapping[key] || [];
|
}
|
</script>
|
