style: 任务页面及工单详情样式修改

src/pages/TaskManage/Detail/TaskDetail/TaskDetail.tsx

@@ -22,7 +22,7 @@ import {
   withdrawOrderRequest,
 } from '@/services/TaskManage';
 import { useLocation } from '@@/exports';
-import { UpOutlined } from '@ant-design/icons';
+import { CaretDownFilled } from '@ant-design/icons';
 import { connect, useRequest } from '@umijs/max';
 import {
   Col,
@@ -134,7 +134,7 @@ function TaskDetail(props: IPropsType) {
         {
           key: '1',
           label: (
-            <span style={{ color: '#5697e4' }}>
+            <span style={{ color: '#ffffff', marginRight: '0.1rem' }}>
               关联工单({workOrder.length})
             </span>
           ),
@@ -143,18 +143,18 @@ function TaskDetail(props: IPropsType) {
               <div key={record.Id} className={styles.workOrderCard}>
                 <div className={styles.leftInfo}>
                   <Row style={{ marginBottom: '15px' }}>
-                    <Col className={styles.fontS24} span={12}>
+                    <Col className={styles.fontS32} span={12}>
                       <>
                         工单类型：
                         {record.RecordType?.label?.replace('工单', '')}
                       </>
                     </Col>
-                    <Col className={styles.fontS24} span={12}>
+                    <Col className={styles.fontS32} span={12}>
                       时间：{record.CreateTime || '-'}
                     </Col>
                   </Row>
                   <Row>
-                    <Col className={styles.fontS24} span={12}>
+                    <Col className={styles.fontS32} span={12}>
                       工单状态：
                       <span style={{ color: '#5697e4' }}>
                         {typeof record.Status === 'number'
@@ -162,7 +162,7 @@ function TaskDetail(props: IPropsType) {
                           : record.Status?.label}
                       </span>
                     </Col>
-                    <Col className={styles.fontS24} span={12}>
+                    <Col className={styles.fontS32} span={12}>
                       工单负责人：
                       {typeof record.Responsible === 'number'
                         ? '-'
@@ -175,7 +175,6 @@ function TaskDetail(props: IPropsType) {
                   <div
                     className={styles.rightButton}
                     style={{
-                      color: '#5697e4',
                       marginBottom: `${
                         record.Status.value === 0 ? '0.15rem' : '0'
                       }`,
@@ -197,7 +196,6 @@ function TaskDetail(props: IPropsType) {
                   {record?.Status?.value === 0 && (
                     <div
                       className={styles.rightButton}
-                      style={{ color: '#5697e4' }}
                       onClick={() => {
                         setWithdrawOrderOpen(true);
                         setClickedOrder(record);
@@ -324,22 +322,22 @@ function TaskDetail(props: IPropsType) {
       <div className=" content-title">
         <div className={`${styles.cardContainer} card-box`}>
           <div className={styles.normalInfo}>
-            <Row className={styles.infoRow} justify="space-between">
-              <Col className={styles.fontS24}>
+            <Row className={styles.infoRow}>
+              <Col span={14} className={styles.fontS32}>
                 时间：{mandateDetail?.CreateTime}
               </Col>
               {/*// @ts-ignore*/}
-              <Col className={styles.fontS24}>
+              <Col className={styles.fontS32}>
                 {/*//@ts-ignore*/}
                 任务类别：{mandateDetail?.MandateClass?.label}
               </Col>
             </Row>
-            <Row justify="space-between">
-              <Col className={styles.fontS24}>
+            <Row>
+              <Col span={14} className={styles.fontS32}>
                 {/*//@ts-ignore*/}
                 任务状态：{mandateDetail?.Status?.label}
               </Col>
-              <Col className={styles.fontS24}>
+              <Col className={styles.fontS32}>
                 {/*// @ts-ignore*/}
                 任务负责人：{mandateDetail?.ResponsiblePeople?.CName}
               </Col>
@@ -347,20 +345,31 @@ function TaskDetail(props: IPropsType) {
           </div>
           <div className={styles.detailInfo}>
             <Row className={styles.infoRow}>
-              <Col className={styles.fontS24} span={4}>
+              <Col
+                className={styles.fontS32}
+                span={4}
+                style={{ fontWeight: 600 }}
+              >
                 任务总结
               </Col>
-              <Col className={styles.fontS24}>
+              <Col
+                className={styles.fontS32}
+                style={{ color: 'rgba(97, 93, 93, 1)' }}
+              >
                 {mandateDetail?.Summary ||
                   '根据水质相关数据．建议您调节以下参数，水厂运行可达较优状态'}
               </Col>
             </Row>
             {mandateDetail?.img && (
               <Row className={styles.infoRow}>
-                <Col className={styles.fontS24} span={4}>
+                <Col
+                  className={styles.fontS32}
+                  span={4}
+                  style={{ fontWeight: 600 }}
+                >
                   预警图片
                 </Col>
-                <Col className={styles.fontS24}>
+                <Col className={styles.fontS32}>
                   <ReactZmage
                     controller={{
                       // 关闭按钮
@@ -384,10 +393,14 @@ function TaskDetail(props: IPropsType) {
 
             {mandateDetail?.Files.length > 0 && (
               <Row className={styles.infoRow}>
-                <Col className={styles.fontS24} span={4}>
+                <Col
+                  className={styles.fontS32}
+                  span={4}
+                  style={{ fontWeight: 600 }}
+                >
                   截图
                 </Col>
-                <Col className={styles.fontS24}>
+                <Col className={styles.fontS32}>
                   <ReactZmage
                     controller={{
                       // 关闭按钮
@@ -418,12 +431,17 @@ function TaskDetail(props: IPropsType) {
             )}
 
             <Row>
-              <Col className={styles.fontS24} span={4}>
+              <Col
+                className={styles.fontS32}
+                span={4}
+                style={{ fontWeight: 600 }}
+              >
                 任务内容
               </Col>
-              <Col className={styles.fontS24} span={20}>
+              <Col className={styles.fontS32} span={20}>
                 {/*{mandateDetail?.Detail}*/}
                 <Table
+                  className={styles.taskTable}
                   rowKey="key"
                   columns={columnDef}
                   dataSource={mandateTable}
@@ -437,8 +455,8 @@ function TaskDetail(props: IPropsType) {
               className={styles.collapseLabel}
               ghost
               expandIcon={({ isActive }) => (
-                <UpOutlined
-                  style={{ color: '#5697e4' }}
+                <CaretDownFilled
+                  style={{ color: '#ffffff' }}
                   rotate={isActive ? 180 : 0}
                 />
               )}

src/pages/TaskManage/Detail/TaskDetail/taskDetail.less

@@ -14,7 +14,6 @@
 
   .detailInfo {
     padding: 0.25rem 0.15rem;
-    border-bottom: 0.01rem solid rgba(0, 0, 0, 10%);
   }
 
   .relatedOrder {
@@ -25,7 +24,7 @@
       width: 100%;
 
       .ant-collapse-arrow {
-        font-size: 0.24rem;
+        font-size: 0.32rem;
       }
 
       :global {
@@ -33,29 +32,46 @@
           margin-bottom: 0;
         }
 
+        .ant-collapse-item:last-child > .ant-collapse-header {
+          border-radius: 0;
+        }
+
         .ant-collapse-header {
+          height: 0.5rem;
+          background: url('@/assets/TaskManage/viewOrder@2x.png') no-repeat
+            center;
+          background-size: 25% 100%;
           justify-content: center;
           flex-direction: row-reverse;
           align-items: center;
           margin-top: 0.1rem;
+          border-bottom: 0.02rem solid #1755ff;
 
           .ant-collapse-header-text {
-            font-size: 0.24rem;
+            font-size: 0.32rem;
             flex: unset;
             margin-inline-end: unset;
           }
 
           .ant-collapse-arrow {
-            font-size: 0.24rem;
+            font-size: 0.32rem;
           }
         }
+
+        .ant-collapse-content-box {
+          padding: 0;
+        }
+
+        .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
+          padding-block: 0;
+        }
       }
 
       .workOrderCard {
-        margin-bottom: 0.2rem;
-        padding: 0.2rem 0.1rem;
-        border-radius: 0.08rem;
-        background-color: #e5effa;
+        margin-bottom: 0.1rem;
+        padding: 0.2rem;
+        border-radius: 0;
+        background-color: rgba(23, 85, 255, 0.06);
         display: flex;
         align-items: center;
 
@@ -63,45 +79,60 @@
           width: 80%;
         }
 
+        .rightButtonContainer {
+          width: 20%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          align-items: center;
+        }
+
         .rightButton {
-          color: #5697e4;
-          font-size: 0.24rem;
+          background-color: #fff;
+          border-radius: 0.5rem;
+          width: 1.5rem;
+          letter-spacing: 0.05rem;
+          color: rgba(23, 85, 255, 1);
+          font-size: 0.32rem;
           text-align: center;
         }
       }
-    }
-  }
-
-  .workOrderCard {
-    margin-bottom: 0.25rem;
-    padding: 0.2rem 0.1rem;
-    border-radius: 0.08rem;
-    background-color: #e5effa;
-    display: flex;
-    align-items: center;
-
-    .leftInfo {
-      width: 80%;
-    }
-
-    .rightButtonContainer {
-      width: 20%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: center;
-    }
 
-    .rightButton {
-      flex: auto;
-      color: #5697e4;
-      font-size: 0.24rem;
-      text-align: center;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      .workOrderCard:last-child {
+        margin-bottom: 0;
+      }
     }
   }
+
+  // .workOrderCard {
+  //   margin-bottom: 0.25rem;
+  //   padding: 0.2rem 0.1rem;
+  //   background-color: #e5effa;
+  //   display: flex;
+  //   align-items: center;
+
+  //   .leftInfo {
+  //     width: 80%;
+  //   }
+
+  //   .rightButtonContainer {
+  //     width: 20%;
+  //     display: flex;
+  //     flex-direction: column;
+  //     justify-content: space-between;
+  //     align-items: center;
+  //   }
+
+  //   .rightButton {
+  //     flex: auto;
+  //     color: #5697e4;
+  //     font-size: 0.24rem;
+  //     text-align: center;
+  //     display: flex;
+  //     justify-content: center;
+  //     align-items: center;
+  //   }
+  // }
 }
 
 .handleModal {
@@ -150,6 +181,22 @@
   }
 }
 
+.taskTable {
+  :global {
+    .ant-table-thead {
+      background: rgba(155, 151, 151, 0.2);
+    }
+    .ant-table-thead > tr > th {
+      color: rgba(59, 59, 59, 1);
+      font-weight: 600;
+    }
+  }
+}
+
+.fontS32 {
+  font-size: 0.32rem;
+}
+
 .fontS28 {
   font-size: 0.28rem;
 }

src/pages/TaskManage/Detail/TaskList/taskList.less

@@ -13,6 +13,7 @@
 
   .collapseLabel {
     width: 100%;
+
     .ant-collapse-arrow {
       font-size: 0.32rem;
     }
@@ -44,6 +45,7 @@
           font-size: 0.32rem;
         }
       }
+
       .ant-collapse-content-box {
         padding: 0;
       }

src/pages/TaskManage/Detail/TaskOrder/TaskOrder.tsx

@@ -13,7 +13,7 @@ import {
 } from '@/services/TaskManage';
 import { useLocation } from '@@/exports';
 import { connect, useRequest } from '@umijs/max';
-import { Col, Row, Steps } from 'antd';
+import { Col, Divider, Row, Steps } from 'antd';
 import dayjs from 'dayjs';
 import { DefaultOptionType } from 'rc-select/es/Select';
 import React, { useEffect, useState } from 'react';
@@ -76,7 +76,7 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
           ? dayjs(temp.PlanTime).format('YYYY-MM-DD HH:mm')
           : '-',
         RepairTime: temp?.RepairTime
-          ? dayjs(temp.RepairTime).format('YYYY-MM-DD HH:mm')
+          ? dayjs(temp.RepairTime).format('YYYY-MM-DD HH:mm') === ''
           : '-',
         Reason: temp.Note,
         Lubrication: temp.Lubrication,
@@ -163,9 +163,10 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
         CreateTime: dayjs(temp.start_time).format('YYYY-MM-DD HH:mm'),
         PlanTime: dayjs(temp.plan_end_time).format('YYYY-MM-DD HH:mm'),
         RepairTime:
-          (temp.actual_end_time &&
-            dayjs(temp.actual_end_time).format('YYYY-MM-DD HH:mm')) ||
-          '-',
+          temp.actual_end_time &&
+          temp.actual_end_time !== '0001-01-01T00:00:00Z'
+            ? dayjs(temp.actual_end_time).format('YYYY-MM-DD HH:mm')
+            : '-',
         Reason: temp.detail,
         Repairman: userList.find((item) => item.ID === temp.operator_id) || '-',
         DispatchMan:
@@ -187,7 +188,6 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
               })
             : [],
       };
-
       setOrderInfo(tempDetail);
     },
   });
@@ -231,9 +231,11 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
           PlanTime: temp.plan_end_time
             ? dayjs(temp.plan_end_time).format('YYYY-MM-DD HH:mm')
             : '-',
-          RepairTime: temp?.actual_end_time
-            ? dayjs(temp.actual_end_time).format('YYYY-MM-DD HH:mm')
-            : '-',
+          RepairTime:
+            temp?.actual_end_time &&
+            temp?.actual_end_time !== '0001-01-01T00:00:00Z'
+              ? dayjs(temp.actual_end_time).format('YYYY-MM-DD HH:mm')
+              : '-',
           Reason: temp.detail,
           Repairman: '-',
           DispatchMan:
@@ -329,49 +331,57 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
           <SubTitle
             title="工单信息"
             // @ts-ignore
-            showStatus={orderInfo?.OrderStatus.value === 2}
+            // showStatus={orderInfo?.OrderStatus.value === 2}
             radius
           />
-          <div style={{ padding: '15px', letterSpacing: '1.5px' }}>
-            <Row className={styles.rowMargin}>
-              <Col className={styles.fontS28} span={15}>
-                {/* @ts-ignore */}
-                工单类型：
-                {OrderType.find((item) => item.value === order_type)?.label ||
-                  '-'}
-              </Col>
-              <Col className={styles.fontS28} span={9}>
-                {/* @ts-ignore */}
-                工单负责人：{orderInfo?.Repairman?.CName || '-'}
-              </Col>
-            </Row>
-            <Row className={styles.rowMargin}>
-              <Col className={styles.fontS28} span={15}>
-                {/*  @ts-ignore */}
-                工单状态：{orderInfo?.OrderStatus?.label}
-              </Col>
-              <Col className={styles.fontS28} span={9}>
-                {/* @ts-ignore */}
-                派单人员：{orderInfo?.DispatchMan?.CName || '-'}
-              </Col>
-            </Row>
-            <Row className={styles.rowMargin}>
-              <Col className={styles.fontS28}>
-                派单时间：{orderInfo?.CreateTime || '-'}
-              </Col>
-            </Row>
-            <Row className={styles.rowMargin}>
-              <Col className={styles.fontS28}>
-                计划完成时间：{orderInfo?.PlanTime || '-'}
-              </Col>
-            </Row>
-            <Row className={styles.rowMargin}>
-              <Col className={styles.fontS28}>
-                实际完成时间：{orderInfo?.RepairTime || '-'}
+          <div style={{ padding: '0.15rem', letterSpacing: '1.5px' }}>
+            <div
+              style={{
+                background: 'rgba(23, 85, 255, 0.06)',
+                padding: '0.2rem',
+                marginBottom: '0.2rem',
+              }}
+            >
+              <Row className={styles.rowMargin}>
+                <Col className={styles.fontS28} span={13}>
+                  {/* @ts-ignore */}
+                  工单类型：
+                  {OrderType.find((item) => item.value === order_type)?.label ||
+                    '-'}
+                </Col>
+                <Col className={styles.fontS28} span={9}>
+                  {/* @ts-ignore */}
+                  工单负责人：{orderInfo?.Repairman?.CName || '-'}
+                </Col>
+              </Row>
+              <Row className={styles.rowMargin}>
+                <Col className={styles.fontS28} span={13}>
+                  {/*  @ts-ignore */}
+                  工单状态：{orderInfo?.OrderStatus?.label}
+                </Col>
+                <Col className={styles.fontS28} span={9}>
+                  {/* @ts-ignore */}
+                  派单人员：{orderInfo?.DispatchMan?.CName || '-'}
+                </Col>
+              </Row>
+              <Row className={styles.rowMargin}>
+                <Col className={styles.fontS28}>
+                  派单时间：{orderInfo?.CreateTime || '-'}
+                </Col>
+              </Row>
+              <Row>
+                <Col className={styles.fontS28} span={13}>
+                  计划完成时间：{orderInfo?.PlanTime || '-'}
+                </Col>
+                <Col className={styles.fontS28}>
+                  实际完成时间：{orderInfo?.RepairTime || '-'}
+                </Col>
+              </Row>
+            </div>
+            <Row style={{ padding: '0 0.2rem' }}>
+              <Col className={styles.fontS28} style={{ fontWeight: '600' }}>
+                工单详情：
               </Col>
-            </Row>
-            <Row>
-              <Col className={styles.fontS28}>工单详情：</Col>
               <Col className={styles.fontS28} span={18}>
                 {orderInfo?.Reason}
               </Col>
@@ -389,38 +399,57 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
         {order_type === 3 && (
           <div>
             <SubTitle title="维修内容" />
-            <div style={{ padding: '15px' }}>
-              <Row className={styles.rowMargin} justify={'space-around'}>
-                <Col className={styles.fontS28} span={8}>
-                  是否润滑/加油：{orderInfo?.Lubrication === 1 ? '是' : '否'}
-                </Col>
-                <Col className={styles.fontS28} span={8}>
-                  是否拆检：{orderInfo?.Check === 1 ? '是' : '否'}
-                </Col>
-                <Col className={styles.fontS28} span={8}>
-                  是否清洁：{orderInfo?.Clean === 1 ? '是' : '否'}
-                </Col>
-              </Row>
-              <Row justify={'space-around'}>
-                <Col className={styles.fontS28} span={8}>
-                  是否紧固：{orderInfo?.Fasten === 1 ? '是' : '否'}
-                </Col>
-                <Col className={styles.fontS28} span={8}>
-                  是否除锈：{orderInfo?.AntiCorrosive === 1 ? '是' : '否'}
-                </Col>
-                <Col className={styles.fontS28} span={8}>
-                  是否防腐：{orderInfo?.RustRemoval === 1 ? '是' : '否'}
-                </Col>
-              </Row>
+            <div
+              style={{
+                padding: '0 0.15rem',
+              }}
+            >
+              <div
+                style={{
+                  padding: '0.15rem 0.2rem',
+                  background: 'rgba(23, 85, 255, 0.06)',
+                }}
+              >
+                <Row className={styles.rowMargin} justify={'space-around'}>
+                  <Col className={styles.fontS28} span={8}>
+                    是否润滑/加油：{orderInfo?.Lubrication === 1 ? '是' : '否'}
+                  </Col>
+                  <Col className={styles.fontS28} span={8}>
+                    是否拆检：{orderInfo?.Check === 1 ? '是' : '否'}
+                  </Col>
+                  <Col className={styles.fontS28} span={8}>
+                    是否清洁：{orderInfo?.Clean === 1 ? '是' : '否'}
+                  </Col>
+                </Row>
+                <Row justify={'space-around'}>
+                  <Col className={styles.fontS28} span={8}>
+                    是否紧固：{orderInfo?.Fasten === 1 ? '是' : '否'}
+                  </Col>
+                  <Col className={styles.fontS28} span={8}>
+                    是否除锈：{orderInfo?.AntiCorrosive === 1 ? '是' : '否'}
+                  </Col>
+                  <Col className={styles.fontS28} span={8}>
+                    是否防腐：{orderInfo?.RustRemoval === 1 ? '是' : '否'}
+                  </Col>
+                </Row>
+              </div>
             </div>
           </div>
         )}
-
         {order_type === 5 && (
           <div>
             <SubTitle title="加药详情" />
-            <div style={{ padding: '15px' }}>
-              <Row>
+            <div
+              style={{
+                padding: '0 0.15rem',
+              }}
+            >
+              <Row
+                style={{
+                  padding: '0.15rem 0.2rem',
+                  background: 'rgba(23, 85, 255, 0.06)',
+                }}
+              >
                 <Col className={styles.fontS28} span={8}>
                   药剂名称：{additionalInfo?.name || '-'}
                 </Col>
@@ -438,7 +467,17 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
         {stepInfo?.length > 0 && (
           <div>
             <SubTitle title="工单流程" />
-            <div style={{ padding: '15px 20px' }}>
+            <Divider
+              type="horizontal"
+              style={{
+                height: '0.02rem',
+                margin: 0,
+                padding: 0,
+                color: 'rgba(23, 85, 255, 0.50)',
+                background: 'rgba(23, 85, 255, 0.50)',
+              }}
+            />
+            <div style={{ padding: '0.15rem 0.2rem' }}>
               <Steps
                 direction="vertical"
                 current={stepInfo?.length ? stepInfo.length - 1 : 0}

src/pages/TaskManage/Detail/TaskOrder/taskOrder.less

@@ -1,7 +1,7 @@
 .selfCardBox {
   margin-top: 0.15rem;
+  margin-left: 0.15rem;
   border-radius: 0.08rem;
-  box-shadow: 0.02rem 0 0.08rem 0 rgba(0, 0, 0, 30%);
   background-color: white;
 }
 

src/pages/TaskManage/components/SubTitle.tsx

@@ -26,15 +26,25 @@ const SubTitle: React.FC<IPropsType> = ({
         alignItems: 'center',
         paddingLeft: '20px',
         paddingRight: '10px',
-        backgroundColor: '#d9e7f9',
+        // backgroundColor: '#d9e7f9',
         fontSize: String(titleFontSize) + 'px',
         height: String(Number(titleFontSize) + 40) + 'px',
-        borderRadius: radius ? '8px 8px 0 0 ' : 'unset',
+        // borderRadius: radius ? '8px 8px 0 0 ' : 'unset',
       }}
     >
-      <div>
-        <span style={{ border: '2px solid #4a90e2', marginRight: '8px' }} />
-        {title}
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <div
+          style={{
+            background: 'rgba(23, 85, 255, 1)',
+            width: '0.1rem',
+            height: '0.1rem',
+            borderRadius: '0.1rem',
+            marginRight: '8px',
+          }}
+        />
+        <span style={{ color: 'rgba(97, 93, 93, 1)', fontWeight: '600' }}>
+          {title}
+        </span>
       </div>
       {showStatus && (
         <div>