<script setup>
|
import {reactive, ref} from "vue";
|
import {useI18n} from "vue-i18n";
|
import {Minus, Plus, Search} from "@element-plus/icons-vue";
|
|
const {t} = useI18n()
|
|
const xGrid = 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
|
},
|
/*formConfig: {
|
data: {
|
width: '',
|
height: '',
|
quantity: ''
|
},
|
items: [
|
{ field: 'width', title: t('order.width')+':', itemRender: { name: 'VxeInput' } },
|
{ field: 'height', title: t('order.height')+':', itemRender: { name: 'VxeInput' } },
|
{ field: 'quantity', title: t('order.quantity')+':', itemRender: { name: 'VxeInput' } },
|
{
|
itemRender: {
|
name: 'VxeButtonGroup',
|
options: [
|
{ type: 'submit', content: t('craft.sure'), status: 'primary' },
|
{ type: 'reset', content: t('product.msg.reset') }
|
]
|
}
|
}
|
]
|
},*/
|
columns: [
|
{field: 'id', width: 70, title: '序号', filters: [{data: ''}], slots: {default: 'state', filter: 'num2_filter'}},
|
{field: '', width: 100, title: '版图数'},
|
{field: '', width: 100, title: '装载率'},
|
{field: '', width: 100, title: '流程卡数'},
|
{field: '', width: 100, title: '模拟片数'},
|
{
|
field: 'processId',
|
width: 150,
|
title: t('processCard.processId'),
|
filters: [{data: ''}],
|
slots: {filter: 'num1_filter'},
|
sortable: true
|
},
|
],//表头参数
|
data: null,//表格数据
|
toolbarConfig: {
|
buttons: [],
|
slots: {
|
buttons: "toolbar_buttons"
|
},
|
},
|
})
|
|
|
// 进度条颜色和按钮加减
|
const percentage1 = ref(80)
|
const percentage2 = ref(50)
|
const customColors = [
|
{color: '#f56c6c', percentage: 20},
|
{color: '#e6a23c', percentage: 40},
|
{color: '#5cb87a', percentage: 60},
|
{color: '#1989fa', percentage: 80},
|
{color: '#162ce5', percentage: 100},
|
]
|
const handleButtonClick = (progressIndex, isIncrease) => {
|
let percentageRef;
|
if (progressIndex === 1) {
|
percentageRef = percentage1;
|
} else if (progressIndex === 2) {
|
percentageRef = percentage2;
|
}
|
if (isIncrease && percentageRef.value < 100) {
|
percentageRef.value += 10;
|
} else if (!isIncrease && percentageRef.value > 0) {
|
percentageRef.value -= 10;
|
}
|
};
|
|
// 混排等级
|
const optionVal = ref('')
|
const options = [
|
{
|
value: '0',
|
label: '不混排',
|
},
|
{
|
value: '1',
|
label: '轻度混排',
|
},
|
{
|
value: '2',
|
label: '中度混排',
|
},
|
{
|
value: '3',
|
label: '高度混排',
|
},
|
]
|
|
// 定义响应式数据，用于绑定工程号输入框的值
|
const projectNumber = ref('');
|
|
let emit = defineEmits(['changeDialog', 'fetch-data']);
|
|
const handleSearchClick = () => {
|
// 通过 $emit 触发自定义事件，将工程号传递给父组件，由父组件去调用接口获取数据
|
emit('fetch-data', projectNumber.value);
|
};
|
|
|
</script>
|
|
<template>
|
<div style="width: 100%;height: 100%">
|
<!--模拟计算表头-->
|
<div id="title" style="margin-top: -10px">
|
<span>
|
工程编号
|
<vxe-input size="small" style="margin-left: 20px" clearable v-model="projectNumber"></vxe-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: 20px">模拟计算</el-button>
|
<el-button type="primary" style="margin-left: 50px">保存</el-button>
|
</span><br>
|
<div class="demo-progress" style="margin-top: 5px">
|
<div style="display: flex; align-items: center">
|
<span>钢化最大装载</span>
|
<!--进度条设置-->
|
<el-progress style="max-width: 300px; flex: 1; margin-left: 10px" :percentage="percentage1"
|
:color="customColors"/>
|
<el-button-group style="margin-left: 10px;">
|
<el-button :icon="Minus" @click="handleButtonClick(1,false)"/>
|
<el-button :icon="Plus" @click="handleButtonClick(1,true)"/>
|
</el-button-group>
|
<span style="float: right ; margin-left: 198px;">
|
工程玻璃片 <vxe-input size="small" class="input" clearable></vxe-input>
|
宽轴间隔<vxe-input size="small" class="input" clearable></vxe-input>
|
炉宽(mm)<vxe-input size="small" class="input" clearable></vxe-input>
|
</span>
|
</div>
|
</div>
|
<br>
|
<div class="demo-progress" style="margin-top: -10px">
|
<div style="display: flex; align-items: center">
|
<span>理片笼空闲度</span>
|
<!--进度条设置-->
|
<el-progress style="max-width: 300px; flex: 1; margin-left: 10px" :percentage="percentage2"
|
:color="customColors"/>
|
<el-button-group style="margin-left: 10px;">
|
<el-button :icon="Minus" @click="handleButtonClick(2,false)"/>
|
<el-button :icon="Plus" @click="handleButtonClick(2,true)"/>
|
</el-button-group>
|
<span style="float: right ; margin-left: 198px;">
|
加热时间(秒)<vxe-input size="small" class="input" clearable></vxe-input>
|
长轴间隔<vxe-input size="small" class="input" clearable></vxe-input>
|
炉长(mm)<vxe-input size="small" class="input" clearable></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>
|
