BPA_MES
/
BPA.FINAL.MES
4
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

前端优化

master
Yanko 3 weeks ago
parent
4dbe2d5c75
commit
a1608c3826
6 changed files with 186 additions and 76 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -1
      frontend/src/app.tsx
  2. +4
    -3
      frontend/src/pages/deviceProductInfo/index.tsx
  3. +51
    -7
      frontend/src/pages/final/index.less
  4. +37
    -21
      frontend/src/pages/final/index.tsx
  5. +45
    -1
      frontend/src/pages/workInfo/index.less
  6. +49
    -43
      frontend/src/pages/workInfo/index.tsx

+ 0
- 1
frontend/src/app.tsx View File

@@ -133,7 +133,6 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
colorBgPageContainerFixed: '#0960bd'
},
},
headerContentRender: () => <ProBreadcrumb />,
footerRender: () => <Footer />,
onPageChange: () => {
const userToken = sessionStorage.getItem('USER_TOKEN');


+ 4
- 3
frontend/src/pages/deviceProductInfo/index.tsx View File

@@ -1,6 +1,7 @@
import { ArrowLeftOutlined, LeftCircleOutlined, LeftSquareTwoTone, PlusOutlined } from '@ant-design/icons';
import {
ActionType,
PageContainer,
ProColumns,
ProForm,
ProFormInstance,
@@ -34,7 +35,7 @@ const ParmsTypeList = [
value: 0
},
{
label: '多选',
label: '物料',
value: 1
},
{
@@ -152,7 +153,7 @@ export default () => {
];

return (
<>
<PageContainer>
{!isfunc ?
<>

@@ -529,6 +530,6 @@ export default () => {

</>
}
</>
</PageContainer>
);
};

+ 51
- 7
frontend/src/pages/final/index.less View File

@@ -13,7 +13,7 @@
}
&_item {
box-shadow:6px 5px 1px 1px rgb(237 236 236 / 50%);
border: 1px solid #edecec;
border-bottom: 1px solid @primary-color;
padding: 25px ;
height: 38px;
width: 200px;
@@ -57,22 +57,65 @@
width: 100%;
display: flex;
flex-direction: row;

box-shadow:6px 5px 1px 1px rgb(237 236 236 / 50%);
&_box{
margin: 5px;
position: relative;
margin-right: 63px;
border: 1px solid;
color: #969595;
}
&_jiantou{
position: absolute;
right: -55px;
top: 150px;
z-index: 99;
display: flex;
align-items: center;
justify-items: center;
&_arrow{
position: relative;
width: 15px;
height: 15px;
border-top: 3px solid @primary-color;
border-left: 3px solid @primary-color;
transform: rotate(135deg);
// animation: arrow-load 2s infinite;
}
&_arrow:nth-child(3){
left: 0px;
animation-delay: -0.4s;
}
&_arrow:nth-child(2){
animation-delay: -0.2s;
}
&_arrow:nth-child(1){
right: 0px;
}
@keyframes arrow-load {
0%{
opacity: 0;
transform: rotate(135deg) translate(20px,20px);
}
0%{
opacity: 1;
}
100%{
opacity: 0;
transform: rotate(135deg) translate(-20px,-20px);
}
}
}
&_item {
padding: 25px ;
height: 38px;
width: 200px;
width: 250px;
position: relative;
cursor: pointer;
display: -ms-flexbox;
box-shadow:6px 5px 1px 1px rgb(237 236 236 / 50%);
border: 1px solid #edecec;
margin: auto;
border-bottom: 1px solid @primary-color;
display: flex;
-ms-flex-align: center;
align-items: center;
@@ -105,3 +148,4 @@
}
}



+ 37
- 21
frontend/src/pages/final/index.tsx View File

@@ -237,9 +237,9 @@ const final = () => {
if (res.statusCode === 200) {
res.data.map((item: any) => (
item.value = item.materialCode,
item.label = item.materialName+`(${item.mode==1?"人工":"设备"})`
item.label = item.materialName + `(${item.mode == 1 ? "人工" : "设备"})`
))
console.log('物料信息',res.data);
console.log('物料信息', res.data);

setMaterialParmList(res.data)
}
@@ -394,7 +394,7 @@ const final = () => {
}>
<Divider />

<Card title={'选择产线'}>
<Card bordered={false} title={'选择产线'}>
<div className={styles.tag}>
{finallineList.map((item, index) => (
<Badge.Ribbon text={item.status == '0' ? '未配置' : '已配置'} color={item.status == '0' ? '' : 'pink'}>
@@ -421,7 +421,7 @@ const final = () => {
</div>
</Card>
{lineProcessList.length > 0 ?
<Card title={'产线工序路线'} extra={<Space direction='horizontal' >
<Card bordered={false} title={'产线工序路线'} extra={<Space direction='horizontal' >
<Popconfirm
key="save"
title="确定要保存配置?保存成功后将返回成品列表。"
@@ -452,16 +452,29 @@ const final = () => {

{lineProcessList.map((item, index) => (
<div className={styles.gongyi_tag_box} key={index} >
{lineProcessList.length <= index+1?<></>:
<div className={styles.gongyi_tag_jiantou}>

<div className={styles.gongyi_tag_jiantou_arrow}></div>
<div className={styles.gongyi_tag_jiantou_arrow}></div>
<div className={styles.gongyi_tag_jiantou_arrow}></div>

</div>
}
<div

className={`${styles.gongyi_tag_item} ${index === selectProcess ? styles.gongyi_tag_item_activeItem : ''}`}>
<Space size="middle">
<div color="#2db7f5" style={{ fontSize: '22px' }}> 0{index + 1}-{item.processName}</div>
<div color="#2db7f5" style={{ fontSize: '22px' }}> 0{index + 1}-{item.processName}



</div>
</Space>
<div className={index === selectProcess ? styles.gongyi_tag_item_active : ''}></div>

</div>
<Card title='所属设备' size="small" bordered={false} style={{ height: '200px', overflowY: 'auto', overflowX: 'hidden' }} className={styles.gongyi_tag_device}>
<Card title='设备列表' size="small" bordered={false} styles={{ body:{ height: '200px', overflowY: 'auto', overflowX: 'hidden'} }} className={styles.gongyi_tag_device}>
{
item.devicesInfo.length > 0 ?
<Space title='设备' direction="vertical">
@@ -530,8 +543,8 @@ const final = () => {
const jsonData: deviceProductFunction.queryParms = {
deviceProductId: currentproductionDev?.deviceType
};
console.log('jsonData',jsonData);
console.log('jsonData', jsonData);
DeviceProductFunctionAPI.List(jsonData).then((res: MyResponse.Content) => {
if (res.succeeded) {
setDeviceFun(res.data);
@@ -575,7 +588,7 @@ const final = () => {
})
}}
>
添加工艺参数
添加工艺参数
</Button>,
<Button
type="primary"
@@ -608,23 +621,18 @@ const final = () => {
);
},
},
{
title: '步骤备注',
dataIndex: 'description',

hideInSearch: true
},
{
title: '功能',
dataIndex: 'deviceProductFunctionName',
hideInSearch: true,
width:200
width: 200
},
{
title: '设备参数预览',
hideInSearch: true,
render(dom, entity, index, action, schema) {
const deviceFunParams = JSON.parse(entity?.deviceFunParams);
if (entity?.deviceStepParms) {
@@ -657,7 +665,7 @@ const final = () => {
<Space size='small' direction="vertical" align='start'>
{
newParms.map((sss) => (
<div style={{wordWrap:'break-word'}}>{sss.name}</div>
<div style={{ wordWrap: 'break-word' }}>{sss.name}</div>
))
}
</Space>
@@ -665,6 +673,12 @@ const final = () => {
}
},
},
{
title: '步骤备注',
dataIndex: 'description',

hideInSearch: true
},
{
title: '操作',
align: 'center',
@@ -675,7 +689,8 @@ const final = () => {
render: (_, record, index, action) => [
<Space size="middle">
<Button
type='primary' ghost
type='primary'
size='small'
onClick={async () => {
setIsSchemaModalOpen(true)
setDeviceParm([]);
@@ -755,7 +770,8 @@ const final = () => {
okText="确认"
cancelText="关闭"
>
<Button type='primary' danger ghost>删除</Button>
<Button
size='small' type='primary' danger >删除</Button>
</Popconfirm>
</Space>
],


+ 45
- 1
frontend/src/pages/workInfo/index.less View File

@@ -5,4 +5,48 @@
.rowHeight{
padding: 10px;
}

.box{
position: relative;
margin-right: 60px;
}
.jiantou{
position: absolute;
right: -55px;
top: 150px;
z-index: 99;
display: flex;
align-items: center;
justify-items: center;
&_arrow{
position: relative;
width: 15px;
height: 15px;
border-top: 3px solid @primary-color;
border-left: 3px solid @primary-color;
transform: rotate(135deg);
// animation: arrow-load 2s infinite;
}
&_arrow:nth-child(3){
left: 0px;
animation-delay: -0.4s;
}
&_arrow:nth-child(2){
animation-delay: -0.2s;
}
&_arrow:nth-child(1){
right: 0px;
}
@keyframes arrow-load {
0%{
opacity: 0;
transform: rotate(135deg) translate(20px,20px);
}
0%{
opacity: 1;
}
100%{
opacity: 0;
transform: rotate(135deg) translate(-20px,-20px);
}
}
}

+ 49
- 43
frontend/src/pages/workInfo/index.tsx View File

@@ -137,7 +137,7 @@ export default () => {
ellipsis: true,
hideInSearch: true,
align: 'center',
width:80
width: 80
},
{
dataIndex: 'batchId',
@@ -149,10 +149,10 @@ export default () => {
{
title: '进度',
dataIndex: 'status',
width:300,
width: 300,
hideInSearch: true,
align:'center',
fixed:'right',
align: 'center',
fixed: 'right',
render(_, record) {
return <ConfigProvider
theme={{
@@ -167,7 +167,7 @@ export default () => {
<Steps
progressDot
direction='horizontal'
style={{padding:'18px'}}
style={{ padding: '18px' }}
type='default'
current={record.status}
size='small'
@@ -176,7 +176,7 @@ export default () => {
</ConfigProvider>
},
},
{
title: '操作',
valueType: 'option',
@@ -438,7 +438,7 @@ export default () => {
title: '操作',
valueType: 'option',
key: 'option',
fixed:'right',
fixed: 'right',
render: (_, record) => {
switch (record.status) {
case 0:
@@ -447,7 +447,7 @@ export default () => {
[
<Button
key="edit"
type="primary"
type="primary"
size='small'
onClick={async () => {
// setIsModalOpen(true);
@@ -492,8 +492,8 @@ export default () => {
okText="确认"
cancelText="关闭"
>
<Button type="primary"
size='small'>批次下发</Button>
<Button type="primary"
size='small'>批次下发</Button>
</Popconfirm> : ""
,
<Popconfirm
@@ -516,8 +516,8 @@ export default () => {
okText="确认"
cancelText="关闭"
>
<Button type="primary"
size='small' danger >删除</Button>
<Button type="primary"
size='small' danger >删除</Button>
</Popconfirm>,
]
)
@@ -526,7 +526,7 @@ export default () => {
[
<Button
key="edit"
type="primary"
type="primary"
size='small'
onClick={async () => {
// setIsModalOpen(true);
@@ -566,8 +566,8 @@ export default () => {
okText="确认"
cancelText="关闭"
>
<Button type="primary"
size='small'>继续下发</Button>
<Button type="primary"
size='small'>继续下发</Button>
</Popconfirm>
,
<Popconfirm
@@ -623,8 +623,8 @@ export default () => {
const UpdateGY = (lineId: string, finalId: string) => {
productlineInfoStepsAPI.List({ lineId: lineId, finalId: finalId }).then((res: MyResponse.Content) => {
if (res.statusCode === 200) {
console.log('res.data',res.data);
console.log('res.data', res.data);
setLineProcessList(res.data);
}
})
@@ -676,7 +676,7 @@ export default () => {
const OnSubmit = async (values: any) => {

values.batchId = selectBatchItemRow?.id

const WorkDeviceAddInputs: any[] = []

@@ -926,7 +926,7 @@ export default () => {
if (res.statusCode === 200) {
setSelectFinal({ name: res.data.finalName, finalId: res.data.finalId, quantity: res.data.quantity })
typeForm.setFieldValue('finalName', res.data.finalName)
typeForm.setFieldValue('quantity', res.data.quantity)
typeForm.setFieldValue('quantity', res.data.quantity)
setLineProcessList([])
FinalAPI.FinishLineList(res.data.finalId).then((res: MyResponse.Content) => {
if (res.statusCode === 200) {
@@ -942,7 +942,7 @@ export default () => {
</ProFormSelect>
<Row gutter={18}>
<Col xl={6} md={12} sm={24}>
<Form.Item name='finalId' hidden
<Form.Item name='finalId' hidden
label="成品" >
<Input readOnly disabled value={selectfinal?.id}></Input>
</Form.Item>
@@ -957,8 +957,8 @@ export default () => {
</Form.Item>
</Col>
</Row>
<Form.Item label="产线" name="lineId" rules={[{ required: true, message: '此项为必填项!' }]}>
<Select onChange={(e) => {
<Form.Item label="选择产线" name="lineId" rules={[{ required: true, message: '此项为必填项!' }]}>
<Select placeholder="请选择" onChange={(e) => {
console.log('selectfinal', selectfinal);

UpdateGY(e, selectfinal?.finalId)
@@ -984,26 +984,32 @@ export default () => {
<div className={styles.gongyi_tag}>
<Flex wrap gap="small">
{lineProcessList.map((item, index) => (
<div className={styles.gongyi_tag_box} key={index} >
<div

className={styles.gongyi_tag_item}>
<Space size="middle">
<div color="#2db7f5" style={{ fontSize: '22px' }}> {index + 1}-{item.processName}</div>
</Space>
</div>
<Card title='选择设备' size="small" bordered={false} style={{ height: '200px', overflowY: 'auto', overflowX: 'hidden' }} className={styles.gongyi_tag_device}>

<Form.Item name={'pro:' + item.id}
rules={[{ required: item.devicesInfo.length > 0,
message: `产线工序路线[${index + 1}-${item.processName}]未选择设备!`,validator(rule, value, callback) {
if (value || item.devicesInfo.length == 0) {
return Promise.resolve();
}else{
message.error(`产线工序路线[${index + 1}-${item.processName}]未选择设备!`)
}
},}]}>
<div className={styles.box} key={index} >
{lineProcessList.length <= index + 1 ? <></> :
<div className={styles.jiantou}>
<div className={styles.jiantou_arrow}></div>
<div className={styles.jiantou_arrow}></div>
<div className={styles.jiantou_arrow}></div>
</div>
}
<Space size="middle">
<div color="#2db7f5" style={{ fontSize: '22px' }}> {index + 1}-{item.processName}</div>
</Space>

<Card title='选择设备' size="small" bordered={false} styles={{ body: { height: '200px', overflowY: 'auto', overflowX: 'hidden' } }} className={styles.gongyi_tag_device}>

<Form.Item name={'pro:' + item.id}
rules={[{
required: item.devicesInfo.length > 0,
message: `产线工序路线[${index + 1}-${item.processName}]未选择设备!`, validator(rule, value, callback) {
if (value || item.devicesInfo.length == 0) {
return Promise.resolve();
} else {
message.error(`产线工序路线[${index + 1}-${item.processName}]未选择设备!`)
}

},
}]}>
<CheckCard.Group >
{
item.devicesInfo.length > 0 ?
@@ -1013,7 +1019,7 @@ export default () => {
}} size='small' title={devicesItem.name} value={devicesItem.code} />
))}
</Space>
: <Empty />
: <Empty description="默认选择" />
}
</CheckCard.Group>
</Form.Item>


Write Preview
Loading…
Cancel
Save