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

Min
1 parent 5ca73950
Showing 2 changed files with 355 additions and 100 deletions
src/mes/teamInfo/index.js
src/mes/teamInfo/index.less
@@ -482,7 +482,7 @@ const TeamInfo = baseProps =&gt; {
     }
   };
-  const { sForemanName = "", sIpqcName = "", sEmployeeName = "" } =
+  const { bManual, sForemanName = "", sIpqcName = "", sEmployeeName = "" } =
     props.slaveData && props.slaveData.length !== 0 ? props.slaveData[0] : {};
   const { sTeamEmployeeNo = "" } = props.slave0Data?.[0] || {};
@@ -500,75 +500,148 @@ const TeamInfo = baseProps =&gt; {
     ...props,
     sName: "slave0"
   };
-
+  const tableHeight = bManual ? "calc(88vh - 80px)" : "calc(25vh - 80px)";
   return (
     <div className={styles.teamInfo}>
-      <div className="teamPost">
-        <div className="teamInfo">
-          <h2>
-            <img src={teaIcon} />
-            班组信息
-          </h2>
-          <div className="userWorkBox">
-            <div className="workTop">
-              {props.app.userinfo.sJzPicturePath ? (
-                <img
-                  src={`${commonConfig.file_host}file/download?savePathStr=${props.app.userinfo.sJzPicturePath}&sModelsId=100&token=${props.token}`}
-                  onError={event => {
-                    event.target.src = userImgs;
-                  }}
-                />
-              ) : (
-                <img src={userImgs} />
-              )}
-              <ul>
-                <li>
-                  <label>机长</label>
-                  <span>{sEmployeeName}</span>
-                </li>
-                <li>
-                  <label>班组</label>
-                  <span>{props.app.userinfo?.sTeamNo}</span>
-                </li>
-                <li>
-                  <label>班次</label>
-                  <span>
-                    {props.app.userinfo?.sShift == "1"
-                      ? "白班"
-                      : props.app.userinfo?.sShift == "2"
-                        ? "夜班"
-                        : ""}
-                  </span>
-                </li>
-              </ul>
+      {bManual ? (
+        // bManual = true 时的布局：左右结构
+        <div className="teamInfoManual">
+          <div className="teamInfoLeft">
+            <div className="teamInfoTop">
+              <h2>
+                <img src={teaIcon} />
+                班组信息
+              </h2>
+              <div className="userWorkBox">
+                <div className="workTop">
+                  {props.app.userinfo.sJzPicturePath ? (
+                    <img
+                      src={`${commonConfig.file_host}file/download?savePathStr=${props.app.userinfo.sJzPicturePath}&sModelsId=100&token=${props.token}`}
+                      onError={event => {
+                        event.target.src = userImgs;
+                      }}
+                    />
+                  ) : (
+                    <img src={userImgs} />
+                  )}
+                  <ul>
+                    <li>
+                      <label>机长</label>
+                      <span>{sEmployeeName}</span>
+                    </li>
+                    <li>
+                      <label>班组</label>
+                      <span>{props.app.userinfo?.sTeamNo}</span>
+                    </li>
+                    <li>
+                      <label>班次</label>
+                      <span>
+                        {props.app.userinfo?.sShift == "1"
+                          ? "白班"
+                          : props.app.userinfo?.sShift == "2"
+                            ? "夜班"
+                            : ""}
+                      </span>
+                    </li>
+                  </ul>
+                </div>
+                <ul>
+                  <li>
+                    <label>{foremanConfig.showName}</label>
+                    <span>{sForemanName}</span>
+                  </li>
+                  <li>
+                    <label>
+                      {props.app.userinfo?.iInterface == 10
+                        ? "OQC/姓名"
+                        : ipqcConfig.showName}
+                    </label>
+                    <span>{sIpqcName}</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className="teamInfoLeftdiv">
+              <TeamJoinInfo {...props} />
+            </div>
+          </div>
+          <div className="teamInfoRight">
+            <div className="postList">
+              <Spin spinning={props.loadings} delay={500}>
+                <StaticEditTable {...tableProps } fixedHeight={tableHeight}  />
+                <CommonOperationBarComponent {...operationBarProps} />
+              </Spin>
             </div>
-            <ul>
-              <li>
-                <label>{foremanConfig.showName}</label>
-                <span>{sForemanName}</span>
-              </li>
-              <li>
-                <label>
-                  {props.app.userinfo?.iInterface == 10
-                    ? "OQC/姓名"
-                    : ipqcConfig.showName}
-                </label>
-                <span>{sIpqcName}</span>
-              </li>
-            </ul>
           </div>
         </div>
-        <div className="postList">
-          <Spin spinning={props.loadings} delay={500}>
-            <StaticEditTable {...tableProps} />
-            {/*<Button type="primary" size="large" onClick={handleModalConfirm}>*/}
-            {/*  {bDelayedOvertime ? "取消延迟加班" : "延迟加班"}*/}
-            {/*</Button>*/}
-            <CommonOperationBarComponent {...operationBarProps} />
-          </Spin>
-        </div>
-      </div>
-      <TeamJoinInfo {...props} />
+      ) : (
+        // bManual = false 时的布局：维持原样
+        <>
+          <div className="teamPost">
+            <div className="teamInfo">
+              <h2>
+                <img src={teaIcon} />
+                班组信息
+              </h2>
+              <div className="userWorkBox">
+                <div className="workTop">
+                  {props.app.userinfo.sJzPicturePath ? (
+                    <img
+                      src={`${commonConfig.file_host}file/download?savePathStr=${props.app.userinfo.sJzPicturePath}&sModelsId=100&token=${props.token}`}
+                      onError={event => {
+                        event.target.src = userImgs;
+                      }}
+                    />
+                  ) : (
+                    <img src={userImgs} />
+                  )}
+                  <ul>
+                    <li>
+                      <label>机长</label>
+                      <span>{sEmployeeName}</span>
+                    </li>
+                    <li>
+                      <label>班组</label>
+                      <span>{props.app.userinfo?.sTeamNo}</span>
+                    </li>
+                    <li>
+                      <label>班次</label>
+                      <span>
+                        {props.app.userinfo?.sShift == "1"
+                          ? "白班"
+                          : props.app.userinfo?.sShift == "2"
+                            ? "夜班"
+                            : ""}
+                      </span>
+                    </li>
+                  </ul>
+                </div>
+                <ul>
+                  <li>
+                    <label>{foremanConfig.showName}</label>
+                    <span>{sForemanName}</span>
+                  </li>
+                  <li>
+                    <label>
+                      {props.app.userinfo?.iInterface == 10
+                        ? "OQC/姓名"
+                        : ipqcConfig.showName}
+                    </label>
+                    <span>{sIpqcName}</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className="postList">
+              <Spin spinning={props.loadings} delay={500}>
+                <StaticEditTable {...tableProps} />
+                <CommonOperationBarComponent {...operationBarProps} />
+              </Spin>
+            </div>
+          </div>
+          <TeamJoinInfo {...props} />
+        </>
+      )}
       {/* 刷脸 */}
       <FaceLoginModal {...faceProps} />
@@ -616,7 +689,7 @@ const FaceLoginModal = props =&gt; {
 };
 const TeamJoinInfo = props => {
-  const { slave1Config, slave1Data } = props;
+  const { slave1Config, slave1Data, bManual } = props;
   const joinInfoData = commonUtils.filteredArr(
     slave1Config?.gdsconfigformslave.map(e => {
@@ -674,28 +747,45 @@ const TeamJoinInfo = props =&gt; {
         </h2>
       </Row>
       <Row className="teamInfoBox">
-        <Col span={6} className="teamInfoLeft">
-          {joinInfoData?.map((item, i) => (
-            <div key={i} className="infoBox">
-              <h2>{item.showName}</h2>
-              <div className="infoBorBox">
-                {slave1Data.length > 0 ? slave1Data[0][item.sName] : ""}
-              </div>
-            </div>
-          ))}
-        </Col>
-        <Col span={18} className="teamInfoRight">
-          {joinInfoTableData?.map((item, i) => (
-            <div key={i} className="infoBox">
-              <h2>{item.showName}</h2>
-              <div className="infoBorBox">
-                <Spin spinning={props.loadings} delay={500}>
-                  <StaticEditTable {...tableProps(item.tableName)} />
-                </Spin>
+        {bManual ? (
+          // bManual = true 时的布局：teamInfoLeft占据整个宽度
+          <Col span={24} className="teamInfoLeft">
+            {joinInfoData?.map((item, i) => (
+              <div key={i} className="infoBox">
+                <h2>{item.showName}</h2>
+                <div className="infoBorBox">
+                  {slave1Data.length > 0 ? slave1Data[0][item.sName] : ""}
+                </div>
               </div>
-            </div>
-          ))}
-        </Col>
+            ))}
+          </Col>
+        ) : (
+          // bManual = false 时的布局：维持原有左右布局
+          <>
+            <Col span={6} className="teamInfoLeft">
+              {joinInfoData?.map((item, i) => (
+                <div key={i} className="infoBox">
+                  <h2>{item.showName}</h2>
+                  <div className="infoBorBox">
+                    {slave1Data.length > 0 ? slave1Data[0][item.sName] : ""}
+                  </div>
+                </div>
+              ))}
+            </Col>
+            <Col span={18} className="teamInfoRight">
+              {joinInfoTableData?.map((item, i) => (
+                <div key={i} className="infoBox">
+                  <h2>{item.showName}</h2>
+                  <div className="infoBorBox">
+                    <Spin spinning={props.loadings} delay={500}>
+                      <StaticEditTable {...tableProps(item.tableName)} />
+                    </Spin>
+                  </div>
+                </div>
+              ))}
+            </Col>
+          </>
+        )}
       </Row>
       {/* <Row className="teamFoot">
                 <Col span={24} className='teamBtn'>
@@ -2,7 +2,7 @@
  * @Author: Sakura
  * @LastEditors: Sakura
  * @Date: 2023-12-06 08:38:22
- * @Description: 
+ * @Description:
  */
 @import "~@/mixins.less";
@@ -34,21 +34,188 @@
 .teamInfo {
   .size();
-  //   background: url(./assets/temp.jpg) no-repeat;
-  //   background-size: 100% 100%;
-  // background-color: #fff;
+  // bManual = true 时的布局样式
   :global {
+    .teamInfoManual {
+      display: flex;
+      gap: 15px;
+      height: 100%;
+
+      .teamInfoLeft {
+        width: 40%;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+
+        .teamInfoTop {
+          background-color: #fff;
+          padding: 10px;
+          border-radius: 5px;
+          box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);
+          height: 30%;
+
+          h2 {
+            font-weight: 600;
+            font-size: 18px;
+            color: #1890ff;
+            .flex(center);
+            gap: 8px;
+
+            img {
+              width: 24px;
+            }
+          }
+
+          .userWorkBox {
+            height: calc(100% - 37px);
+            display: flex;
+            gap: 10px;
+            flex-direction: column;
+            text-wrap: nowrap;
+
+            .workTop {
+              display: flex;
+              background: #f2f2f2;
+              gap: 20px;
+              height: 70%;
+
+              ul {
+                width: calc(65% - 10px);
+                display: flex;
+                flex-direction: column;
+                justify-content: space-evenly;
+                font-size: 1.3em;
+                padding: 15px 0;
+                list-style: none;
+              }
+            }
+            img {
+              width: 35%;
+              background: #cccccc;
+            }
+
+            & > ul {
+              height: 30%;
+              background: #f2f2f2;
+              padding: 10px 20px;
+              font-size: 1.3em;
+
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: flex-start;
+
+              li {
+                width: 100%;
+                display: flex;
+                align-items: center;
+              }
+
+              label {
+                width: 115px;
+                display: block;
+                text-align: end;
+              }
+            }
+            label {
+              font-weight: 600;
+
+              &::after {
+                content: ":";
+                margin: 0 4px;
+                margin-right: 6px;
+              }
+            }
+          }
+        }
+
+
+        .teamInfoLeftdiv {
+          flex: 1;
+          background-color: #fff;
+          border-radius: 5px;
+          box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);
+          overflow: hidden;
+
+          .joinInfo{
+            height: 90%;
+          }
+
+          // 添加infoBox样式
+          .infoBox {
+            padding: 10px;
+            height: calc(100% / 3); // 三个infoBox均等高度
+            background-color: #fff;
+            border-bottom: 1px solid #f0f0f0;
+
+            &:last-child {
+              border-bottom: none;
+            }
+
+            h2 {
+              font-weight: 600;
+              font-size: 16px;
+              color: #333;
+              margin-bottom: 8px;
+              .flex(center);
+              gap: 8px;
+
+              img {
+                width: 18px;
+              }
+            }
+
+            .infoBorBox {
+              height: calc(100% - 32px);
+              background-color: #f2f2f2;
+              padding: 8px;
+              border-radius: 4px;
+              overflow: auto;
+            }
+          }
+        }
+      }
+
+
+      .teamInfoRight {
+        width: 60%;
+
+        .postList {
+          height: 100%;
+          background-color: #fff;
+          padding: 10px;
+          border-radius: 5px;
+          box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);
+
+          .ant-table.ant-table-bordered > .ant-table-container {
+            border-left: 1px solid #aaa;
+            border-bottom: 1px solid #aaa;
+            border-right: 1px solid #aaa;
+          }
+
+          .ant-btn {
+            width: 90px;
+            height: 36px;
+            border-radius: 5px;
+          }
+        }
+      }
+    }
+  }
+
+  // bManual = false 时的布局样式（维持原样）
+  :global {
     .teamPost {
       background-color: #fff;
       padding: 10px;
       border-radius: 5px;
       box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.05);
-      .ant-table.ant-table-bordered>.ant-table-container {
-        border-left: 1px solid #AAA;
-        border-bottom: 1px solid #AAA;
+      .ant-table.ant-table-bordered > .ant-table-container {
+        border-left: 1px solid #aaa;
+        border-bottom: 1px solid #aaa;
         border-right: 1px solid #aaa;
       }
     }
@@ -120,7 +287,7 @@
           background: #cccccc;
         }
-        &>ul {
+        & > ul {
           height: 30%;
           background: #f2f2f2;
           padding: 10px 20px;
@@ -182,7 +349,7 @@
         height: 45px;
         padding: 10px;
         background: #fff;
-        border-bottom: 1px solid #AAAAAA;
+        border-bottom: 1px solid #aaaaaa;
         position: relative;
         .ant-btn {
@@ -220,18 +387,16 @@
           // margin-top: 15px;
           .infoBox {
-
             // margin-top: 15px;
             &:first-child {
               margin-top: 0;
             }
           }
-
         }
       }
       .teamFoot {
-        border-top: 1px solid #AAAAAA;
+        border-top: 1px solid #aaaaaa;
         height: 60px;
         padding: 10px;
@@ -241,4 +406,4 @@
       }
     }
   }
-}
 \ No newline at end of file
+}