前端优化

frontend/src/app.tsx

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

frontend/src/pages/deviceProductInfo/index.tsx

@@ -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>
     );
 };

frontend/src/pages/final/index.less

@@ -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 @@
 }
 }
 
+

frontend/src/pages/final/index.tsx

@@ -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>
               ],

frontend/src/pages/workInfo/index.less

@@ -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);
+         }     
+    }
+}

frontend/src/pages/workInfo/index.tsx

@@ -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>