<script setup>
|
import {onMounted, ref} from "vue";
|
import {defineEmits} from 'vue';
|
import request from "@/utils/request";
|
import {ElMessage} from "element-plus";
|
import useUserInfoStore from "@/stores/userInfo";
|
import useOrderInfoStore from "@/stores/sd/order/orderInfo";
|
|
const userStore = useUserInfoStore()
|
const orderInfo = useOrderInfoStore()
|
const username = userStore.user.userName
|
|
onMounted(async() => {
|
await firstLoading()
|
})
|
|
const firstLoading = async() => {
|
request.post(`/glassOptimize/getConfiguration/磨量/${username}`).then((res) => {
|
if (res.code == "200") {
|
const rawData = res.data.data;
|
if (Array.isArray(rawData) && rawData.length > 0) {
|
const formattedData = rawData.map(item => {
|
const formattedItem = {};
|
for (const key in item) {
|
if (typeof item[key] === 'string') {
|
//去除字符串属性值开头和结尾的双引号
|
formattedItem[key] = item[key].replace(/^\"|\"$/g, '');
|
} else {
|
formattedItem[key] = item[key];
|
}
|
}
|
return formattedItem;
|
});
|
quicksetLeft.value=formattedData[0].leftEdge
|
quicksetTop.value=formattedData[0].upEdge
|
quicksetRight.value=formattedData[0].rightEdge
|
quicksetBottom.value=formattedData[0].downEdge
|
controlValue.value=formattedData[0].quickEdge
|
if(formattedData[0].autoFillEdge=="true"){
|
check.value=true
|
}else{
|
check.value=false
|
}
|
minAutoLenght.value=formattedData[0].minAutoLenght
|
|
}
|
} else {
|
ElMessage.warning(res.msg)
|
}
|
});
|
};
|
function setupComponent() {
|
// 各个输入框绑定的值，初始化为0
|
const quicksetTop = ref('0');
|
const quicksetRight = ref('0');
|
const quicksetBottom = ref('0');
|
const quicksetLeft = ref('0');
|
// 用于控制的输入值，初始化为1
|
const controlValue = ref('1');
|
const minAutoLenght = ref('0');
|
|
const syncValues = () => {
|
// 将控制值赋给其他四个组件
|
quicksetTop.value = controlValue.value;
|
quicksetRight.value = controlValue.value;
|
quicksetBottom.value = controlValue.value;
|
quicksetLeft.value = controlValue.value;
|
};
|
return {
|
quicksetTop,
|
quicksetRight,
|
quicksetBottom,
|
quicksetLeft,
|
controlValue,
|
minAutoLenght,
|
syncValues
|
};
|
}
|
const {
|
quicksetTop,
|
quicksetRight,
|
quicksetBottom,
|
quicksetLeft,
|
controlValue,
|
minAutoLenght,
|
syncValues
|
} = setupComponent();
|
|
const check = ref()
|
|
const emit = defineEmits(['set-amount']);
|
const props = defineProps({
|
closeDialog: Function
|
});
|
|
const setAmount = () => {
|
let json = "{"
|
json+='"left_edge":"'+quicksetLeft.value+'",'
|
json+='"up_edge":"'+quicksetTop.value+'",'
|
json+='"right_edge":"'+quicksetRight.value+'",'
|
json+='"down_edge":"'+quicksetBottom.value+'",'
|
json+='"auto_fill_edge":"'+check.value+'",'
|
json+='"quick_edge":"'+controlValue.value+'",'
|
json+='"min_auto_lenght":"'+minAutoLenght.value+'"'
|
json+="}"
|
|
let configuration={
|
json:json,
|
}
|
|
request.post(`/glassOptimize/saveConfiguration/磨量/${username}`,configuration).then((res) => {
|
if(res.code==200 && res.data===true){
|
const amountData = {
|
quicksetTop: quicksetTop.value,
|
quicksetRight: quicksetRight.value,
|
quicksetBottom: quicksetBottom.value,
|
quicksetLeft: quicksetLeft.value,
|
controlValue:controlValue.value,
|
minAutoLenght:minAutoLenght.value,
|
};
|
emit('set-amount', amountData);
|
props.closeDialog(2);
|
} else {
|
ElMessage.warning(res.msg)
|
}
|
});
|
};
|
|
</script>
|
|
<template>
|
<div id="box1">
|
<div style="display: flex; justify-content: center">
|
<div class="square-container">
|
<div class="square" @click="syncValues"></div>
|
<el-input-number v-model="quicksetTop" class="top" placeholder="0"
|
controls-position="right" :step="0.1" :min="0"></el-input-number>
|
<el-input-number v-model="quicksetRight" class="right" placeholder="0"
|
controls-position="right" :step="0.1" :min="0"></el-input-number>
|
<el-input-number v-model="quicksetBottom" class="bottom" placeholder="0"
|
controls-position="right" :step="0.1" :min="0"></el-input-number>
|
<el-input-number v-model="quicksetLeft" class="left" placeholder="0"
|
controls-position="right" :step="0.1" :min="0"></el-input-number>
|
</div>
|
<el-button type="primary" style="float: right; margin: -75px 0;" @click="setAmount">应用</el-button>
|
</div>
|
|
<div style="margin-top: 20px">
|
<span>鼠标点击蓝色图形区域可快速设置磨量(mm)</span>
|
<el-input-number v-model="controlValue" class="quickset" placeholder="0"
|
controls-position="right" :step="0.1" :min="0"></el-input-number>
|
<br>
|
<div style="margin-top: 30px">
|
<span>成品边长大于等于多少时自动填充(mm)</span>
|
<el-checkbox v-model="check" style="margin: 5px 0 0 12px;"/>
|
<vxe-input style="width: 100px; height: 40px; margin-left: 5px" v-model="minAutoLenght" placeholder=""/>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
#box1 {
|
width: 100%;
|
height: 100%;
|
padding: 10px;
|
border-radius: 5px;
|
}
|
|
.square-container {
|
width: 300px;
|
height: 250px;
|
display: flex;
|
position: relative;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.square {
|
width: 100px;
|
height: 100px;
|
background-color: #5cadfe;
|
}
|
|
.top,
|
.right,
|
.bottom,
|
.left {
|
width: 100px;
|
height: 50px;
|
position: absolute;
|
}
|
|
.top {
|
top: 20px;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
|
.right {
|
top: 50%;
|
right: -5px;
|
transform: translateY(-50%);
|
}
|
|
.bottom {
|
bottom: 20px;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
|
.left {
|
top: 50%;
|
left: -5px;
|
transform: translateY(-50%);
|
}
|
|
.quickset {
|
margin-left: 60px;
|
width: 100px;
|
height: 40px;
|
}
|
</style>
|
