qiangmj / ebc-Mes

Commit 779666f80dbf61f742b56b0f74ad7963b84937b3

Authored by Min
1 parent 5ca73950

1.当设备是手工的时候，班组信息的界面布局调整为左右列呈现

Inline Side-by-side
Showing 2 changed files with 355 additions and 100 deletions
src/mes/teamInfo/index.js
  View file @779666f
... ... @@ -482,7 +482,7 @@ const TeamInfo = baseProps => {
482 482 }
483 483 };
484 484  
485   - const { sForemanName = "", sIpqcName = "", sEmployeeName = "" } =
  485 + const { bManual, sForemanName = "", sIpqcName = "", sEmployeeName = "" } =
486 486 props.slaveData && props.slaveData.length !== 0 ? props.slaveData[0] : {};
487 487  
488 488 const { sTeamEmployeeNo = "" } = props.slave0Data?.[0] || {};
... ... @@ -500,75 +500,148 @@ const TeamInfo = baseProps => {
500 500 ...props,
501 501 sName: "slave0"
502 502 };
503   -
  503 + const tableHeight = bManual ? "calc(88vh - 80px)" : "calc(25vh - 80px)";
504 504 return (
505 505 <div className={styles.teamInfo}>
506   - <div className="teamPost">
507   - <div className="teamInfo">
508   - <h2>
509   - <img src={teaIcon} />
510   - 班组信息
511   - </h2>
512   - <div className="userWorkBox">
513   - <div className="workTop">
514   - {props.app.userinfo.sJzPicturePath ? (
515   - <img
516   - src={`${commonConfig.file_host}file/download?savePathStr=${props.app.userinfo.sJzPicturePath}&sModelsId=100&token=${props.token}`}
517   - onError={event => {
518   - event.target.src = userImgs;
519   - }}
520   - />
521   - ) : (
522   - <img src={userImgs} />
523   - )}
524   - <ul>
525   - <li>
526   - <label>机长</label>
527   - <span>{sEmployeeName}</span>
528   - </li>
529   - <li>
530   - <label>班组</label>
531   - <span>{props.app.userinfo?.sTeamNo}</span>
532   - </li>
533   - <li>
534   - <label>班次</label>
535   - <span>
536   - {props.app.userinfo?.sShift == "1"
537   - ? "白班"
538   - : props.app.userinfo?.sShift == "2"
539   - ? "夜班"
540   - : ""}
541   - </span>
542   - </li>
543   - </ul>
  506 + {bManual ? (
  507 + // bManual = true 时的布局：左右结构
  508 + <div className="teamInfoManual">
  509 + <div className="teamInfoLeft">
  510 + <div className="teamInfoTop">
  511 + <h2>
  512 + <img src={teaIcon} />
  513 + 班组信息
  514 + </h2>
  515 + <div className="userWorkBox">
  516 + <div className="workTop">
  517 + {props.app.userinfo.sJzPicturePath ? (
  518 + <img
  519 + src={`${commonConfig.file_host}file/download?savePathStr=${props.app.userinfo.sJzPicturePath}&sModelsId=100&token=${props.token}`}
  520 + onError={event => {
  521 + event.target.src = userImgs;
  522 + }}
  523 + />
  524 + ) : (
  525 + <img src={userImgs} />
  526 + )}
  527 + <ul>
  528 + <li>
  529 + <label>机长</label>
  530 + <span>{sEmployeeName}</span>
  531 + </li>
  532 + <li>
  533 + <label>班组</label>
  534 + <span>{props.app.userinfo?.sTeamNo}</span>
  535 + </li>
  536 + <li>
  537 + <label>班次</label>
  538 + <span>
  539 + {props.app.userinfo?.sShift == "1"
  540 + ? "白班"
  541 + : props.app.userinfo?.sShift == "2"
  542 + ? "夜班"
  543 + : ""}
  544 + </span>
  545 + </li>
  546 + </ul>
  547 + </div>
  548 + <ul>
  549 + <li>
  550 + <label>{foremanConfig.showName}</label>
  551 + <span>{sForemanName}</span>
  552 + </li>
  553 + <li>
  554 + <label>
  555 + {props.app.userinfo?.iInterface == 10
  556 + ? "OQC/姓名"
  557 + : ipqcConfig.showName}
  558 + </label>
  559 + <span>{sIpqcName}</span>
  560 + </li>
  561 + </ul>
  562 + </div>
  563 + </div>
  564 + <div className="teamInfoLeftdiv">
  565 + <TeamJoinInfo {...props} />
  566 + </div>
  567 + </div>
  568 + <div className="teamInfoRight">
  569 + <div className="postList">
  570 + <Spin spinning={props.loadings} delay={500}>
  571 + <StaticEditTable {...tableProps } fixedHeight={tableHeight} />
  572 + <CommonOperationBarComponent {...operationBarProps} />
  573 + </Spin>
544 574 </div>
545   - <ul>
546   - <li>
547   - <label>{foremanConfig.showName}</label>
548   - <span>{sForemanName}</span>
549   - </li>
550   - <li>
551   - <label>
552   - {props.app.userinfo?.iInterface == 10
553   - ? "OQC/姓名"
554   - : ipqcConfig.showName}
555   - </label>
556   - <span>{sIpqcName}</span>
557   - </li>
558   - </ul>
559 575 </div>
560 576 </div>
561   - <div className="postList">
562   - <Spin spinning={props.loadings} delay={500}>
563   - <StaticEditTable {...tableProps} />
564   - {/*<Button type="primary" size="large" onClick={handleModalConfirm}>*/}
565   - {/* {bDelayedOvertime ? "取消延迟加班" : "延迟加班"}*/}
566   - {/*</Button>*/}
567   - <CommonOperationBarComponent {...operationBarProps} />
568   - </Spin>
569   - </div>
570   - </div>
571   - <TeamJoinInfo {...props} />
  577 + ) : (
  578 + // bManual = false 时的布局：维持原样
  579 + <>
  580 + <div className="teamPost">
  581 + <div className="teamInfo">
  582 + <h2>
  583 + <img src={teaIcon} />
  584 + 班组信息
  585 + </h2>
  586 + <div className="userWorkBox">
  587 + <div className="workTop">
  588 + {props.app.userinfo.sJzPicturePath ? (
  589 + <img
  590 + src={`${commonConfig.file_host}file/download?savePathStr=${props.app.userinfo.sJzPicturePath}&sModelsId=100&token=${props.token}`}
  591 + onError={event => {
  592 + event.target.src = userImgs;
  593 + }}
  594 + />
  595 + ) : (
  596 + <img src={userImgs} />
  597 + )}
  598 + <ul>
  599 + <li>
  600 + <label>机长</label>
  601 + <span>{sEmployeeName}</span>
  602 + </li>
  603 + <li>
  604 + <label>班组</label>
  605 + <span>{props.app.userinfo?.sTeamNo}</span>
  606 + </li>
  607 + <li>
  608 + <label>班次</label>
  609 + <span>
  610 + {props.app.userinfo?.sShift == "1"
  611 + ? "白班"
  612 + : props.app.userinfo?.sShift == "2"
  613 + ? "夜班"
  614 + : ""}
  615 + </span>
  616 + </li>
  617 + </ul>
  618 + </div>
  619 + <ul>
  620 + <li>
  621 + <label>{foremanConfig.showName}</label>
  622 + <span>{sForemanName}</span>
  623 + </li>
  624 + <li>
  625 + <label>
  626 + {props.app.userinfo?.iInterface == 10
  627 + ? "OQC/姓名"
  628 + : ipqcConfig.showName}
  629 + </label>
  630 + <span>{sIpqcName}</span>
  631 + </li>
  632 + </ul>
  633 + </div>
  634 + </div>
  635 + <div className="postList">
  636 + <Spin spinning={props.loadings} delay={500}>
  637 + <StaticEditTable {...tableProps} />
  638 + <CommonOperationBarComponent {...operationBarProps} />
  639 + </Spin>
  640 + </div>
  641 + </div>
  642 + <TeamJoinInfo {...props} />
  643 + </>
  644 + )}
572 645  
573 646 {/* 刷脸 */}
574 647 <FaceLoginModal {...faceProps} />
... ... @@ -616,7 +689,7 @@ const FaceLoginModal = props =&gt; {
616 689 };
617 690  
618 691 const TeamJoinInfo = props => {
619   - const { slave1Config, slave1Data } = props;
  692 + const { slave1Config, slave1Data, bManual } = props;
620 693  
621 694 const joinInfoData = commonUtils.filteredArr(
622 695 slave1Config?.gdsconfigformslave.map(e => {
... ... @@ -674,28 +747,45 @@ const TeamJoinInfo = props =&gt; {
674 747 </h2>
675 748 </Row>
676 749 <Row className="teamInfoBox">
677   - <Col span={6} className="teamInfoLeft">
678   - {joinInfoData?.map((item, i) => (
679   - <div key={i} className="infoBox">
680   - <h2>{item.showName}</h2>
681   - <div className="infoBorBox">
682   - {slave1Data.length > 0 ? slave1Data[0][item.sName] : ""}
683   - </div>
684   - </div>
685   - ))}
686   - </Col>
687   - <Col span={18} className="teamInfoRight">
688   - {joinInfoTableData?.map((item, i) => (
689   - <div key={i} className="infoBox">
690   - <h2>{item.showName}</h2>
691   - <div className="infoBorBox">
692   - <Spin spinning={props.loadings} delay={500}>
693   - <StaticEditTable {...tableProps(item.tableName)} />
694   - </Spin>
  750 + {bManual ? (
  751 + // bManual = true 时的布局：teamInfoLeft占据整个宽度
  752 + <Col span={24} className="teamInfoLeft">
  753 + {joinInfoData?.map((item, i) => (
  754 + <div key={i} className="infoBox">
  755 + <h2>{item.showName}</h2>
  756 + <div className="infoBorBox">
  757 + {slave1Data.length > 0 ? slave1Data[0][item.sName] : ""}
  758 + </div>
695 759 </div>
696   - </div>
697   - ))}
698   - </Col>
  760 + ))}
  761 + </Col>
  762 + ) : (
  763 + // bManual = false 时的布局：维持原有左右布局
  764 + <>
  765 + <Col span={6} className="teamInfoLeft">
  766 + {joinInfoData?.map((item, i) => (
  767 + <div key={i} className="infoBox">
  768 + <h2>{item.showName}</h2>
  769 + <div className="infoBorBox">
  770 + {slave1Data.length > 0 ? slave1Data[0][item.sName] : ""}
  771 + </div>
  772 + </div>
  773 + ))}
  774 + </Col>
  775 + <Col span={18} className="teamInfoRight">
  776 + {joinInfoTableData?.map((item, i) => (
  777 + <div key={i} className="infoBox">
  778 + <h2>{item.showName}</h2>
  779 + <div className="infoBorBox">
  780 + <Spin spinning={props.loadings} delay={500}>
  781 + <StaticEditTable {...tableProps(item.tableName)} />
  782 + </Spin>
  783 + </div>
  784 + </div>
  785 + ))}
  786 + </Col>
  787 + </>
  788 + )}
699 789 </Row>
700 790 {/* <Row className="teamFoot">
701 791 <Col span={24} className='teamBtn'>
... ...
src/mes/teamInfo/index.less
  View file @779666f
... ... @@ -2,7 +2,7 @@
2 2 * @Author: Sakura
3 3 * @LastEditors: Sakura
4 4 * @Date: 2023-12-06 08:38:22
5   - * @Description:
  5 + * @Description:
6 6 */
7 7 @import "~@/mixins.less";
8 8  
... ... @@ -34,21 +34,188 @@
34 34 .teamInfo {
35 35 .size();
36 36  
37   - // background: url(./assets/temp.jpg) no-repeat;
38   - // background-size: 100% 100%;
39   - // background-color: #fff;
  37 + // bManual = true 时的布局样式
40 38 :global {
  39 + .teamInfoManual {
  40 + display: flex;
  41 + gap: 15px;
  42 + height: 100%;
  43 +
  44 + .teamInfoLeft {
  45 + width: 40%;
  46 + display: flex;
  47 + flex-direction: column;
  48 + gap: 10px;
  49 +
  50 + .teamInfoTop {
  51 + background-color: #fff;
  52 + padding: 10px;
  53 + border-radius: 5px;
  54 + box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);
  55 + height: 30%;
  56 +
  57 + h2 {
  58 + font-weight: 600;
  59 + font-size: 18px;
  60 + color: #1890ff;
  61 + .flex(center);
  62 + gap: 8px;
  63 +
  64 + img {
  65 + width: 24px;
  66 + }
  67 + }
  68 +
  69 + .userWorkBox {
  70 + height: calc(100% - 37px);
  71 + display: flex;
  72 + gap: 10px;
  73 + flex-direction: column;
  74 + text-wrap: nowrap;
  75 +
  76 + .workTop {
  77 + display: flex;
  78 + background: #f2f2f2;
  79 + gap: 20px;
  80 + height: 70%;
  81 +
  82 + ul {
  83 + width: calc(65% - 10px);
  84 + display: flex;
  85 + flex-direction: column;
  86 + justify-content: space-evenly;
  87 + font-size: 1.3em;
  88 + padding: 15px 0;
  89 + list-style: none;
  90 + }
  91 + }
41 92  
  93 + img {
  94 + width: 35%;
  95 + background: #cccccc;
  96 + }
  97 +
  98 + & > ul {
  99 + height: 30%;
  100 + background: #f2f2f2;
  101 + padding: 10px 20px;
  102 + font-size: 1.3em;
  103 +
  104 + display: flex;
  105 + flex-direction: column;
  106 + justify-content: center;
  107 + align-items: flex-start;
  108 +
  109 + li {
  110 + width: 100%;
  111 + display: flex;
  112 + align-items: center;
  113 + }
  114 +
  115 + label {
  116 + width: 115px;
  117 + display: block;
  118 + text-align: end;
  119 + }
  120 + }
42 121  
  122 + label {
  123 + font-weight: 600;
  124 +
  125 + &::after {
  126 + content: ":";
  127 + margin: 0 4px;
  128 + margin-right: 6px;
  129 + }
  130 + }
  131 + }
  132 + }
  133 +
  134 +
  135 + .teamInfoLeftdiv {
  136 + flex: 1;
  137 + background-color: #fff;
  138 + border-radius: 5px;
  139 + box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);
  140 + overflow: hidden;
  141 +
  142 + .joinInfo{
  143 + height: 90%;
  144 + }
  145 +
  146 + // 添加infoBox样式
  147 + .infoBox {
  148 + padding: 10px;
  149 + height: calc(100% / 3); // 三个infoBox均等高度
  150 + background-color: #fff;
  151 + border-bottom: 1px solid #f0f0f0;
  152 +
  153 + &:last-child {
  154 + border-bottom: none;
  155 + }
  156 +
  157 + h2 {
  158 + font-weight: 600;
  159 + font-size: 16px;
  160 + color: #333;
  161 + margin-bottom: 8px;
  162 + .flex(center);
  163 + gap: 8px;
  164 +
  165 + img {
  166 + width: 18px;
  167 + }
  168 + }
  169 +
  170 + .infoBorBox {
  171 + height: calc(100% - 32px);
  172 + background-color: #f2f2f2;
  173 + padding: 8px;
  174 + border-radius: 4px;
  175 + overflow: auto;
  176 + }
  177 + }
  178 + }
  179 + }
  180 +
  181 +
  182 + .teamInfoRight {
  183 + width: 60%;
  184 +
  185 + .postList {
  186 + height: 100%;
  187 + background-color: #fff;
  188 + padding: 10px;
  189 + border-radius: 5px;
  190 + box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);
  191 +
  192 + .ant-table.ant-table-bordered > .ant-table-container {
  193 + border-left: 1px solid #aaa;
  194 + border-bottom: 1px solid #aaa;
  195 + border-right: 1px solid #aaa;
  196 + }
  197 +
  198 + .ant-btn {
  199 + width: 90px;
  200 + height: 36px;
  201 + border-radius: 5px;
  202 + }
  203 + }
  204 + }
  205 + }
  206 + }
  207 +
  208 + // bManual = false 时的布局样式（维持原样）
  209 + :global {
43 210 .teamPost {
44 211 background-color: #fff;
45 212 padding: 10px;
46 213 border-radius: 5px;
47 214 box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);
48 215  
49   - .ant-table.ant-table-bordered>.ant-table-container {
50   - border-left: 1px solid #AAA;
51   - border-bottom: 1px solid #AAA;
  216 + .ant-table.ant-table-bordered > .ant-table-container {
  217 + border-left: 1px solid #aaa;
  218 + border-bottom: 1px solid #aaa;
52 219 border-right: 1px solid #aaa;
53 220 }
54 221 }
... ... @@ -120,7 +287,7 @@
120 287 background: #cccccc;
121 288 }
122 289  
123   - &>ul {
  290 + & > ul {
124 291 height: 30%;
125 292 background: #f2f2f2;
126 293 padding: 10px 20px;
... ... @@ -182,7 +349,7 @@
182 349 height: 45px;
183 350 padding: 10px;
184 351 background: #fff;
185   - border-bottom: 1px solid #AAAAAA;
  352 + border-bottom: 1px solid #aaaaaa;
186 353 position: relative;
187 354  
188 355 .ant-btn {
... ... @@ -220,18 +387,16 @@
220 387  
221 388 // margin-top: 15px;
222 389 .infoBox {
223   -
224 390 // margin-top: 15px;
225 391 &:first-child {
226 392 margin-top: 0;
227 393 }
228 394 }
229   -
230 395 }
231 396 }
232 397  
233 398 .teamFoot {
234   - border-top: 1px solid #AAAAAA;
  399 + border-top: 1px solid #aaaaaa;
235 400 height: 60px;
236 401 padding: 10px;
237 402  
... ... @@ -241,4 +406,4 @@
241 406 }
242 407 }
243 408 }
244   -}
245 409 \ No newline at end of file
  410 +}
... ...