9.15 大屏详情页改造

src/components/ElecBidEvaluation/BidEvalAppointment.tsx

@@ -229,7 +229,8 @@ const BidEvalAppointment: React.FC<BidEvalAppointmentProps> = (props) => {
                     columns={columns}
                     actionRef={actionRef}
                     bordered={false}
-                    request={async (params: any) => {
+                    params={{ areaType: "eval_room" }}
+                    request={async (params) => {
                         return await getBidEvalRoom(params).then(res => {
                             if (res?.code == 200) {
                                 return {

src/pages/ElecEvaluation/MonitorScreen/Home/index.tsx

@@ -220,7 +220,7 @@ const GraphChart = (props: { type: string, chartData: any[] }) => {
                             target = chartData[i].value;
                         }
                     }
-                    let v = ((target / total) * 100).toFixed(0);
+                    let v = total == 0 ? 0 : ((target / total) * 100).toFixed(0);
                     return `${name} ${target}个，占比${v}%`;
                 },
             },
@@ -666,14 +666,14 @@ export default () => {
                                         <Radio.Button value="2"> 年 </Radio.Button>
                                     </Radio.Group>}
                                 </div>
-                                <div className='screen-graph-chart' style={{ display: 'flex' }}>
+                                <div className='screen-graph-chart'>
-                                    <div style={{ flex: 1 }}>
+                                    <div className='screen-graph-layout'>
                                         <PieChart data={evalApplData?.reserveNumber} title="已预约" />
                                     </div>
-                                    <div style={{ flex: 1 }}>
+                                    <div className='screen-graph-layout'>
                                         <PieChart data={evalApplData?.ingNumber} title="评审中" />
                                     </div>
-                                    <div style={{ flex: 1 }}>
+                                    <div className='screen-graph-layout'>
                                         <PieChart data={evalApplData?.endNumber} title="评审结束" />
                                     </div>
                                 </div>

src/pages/ElecEvaluation/MonitorScreen/Home/style.less

@@ -139,19 +139,25 @@
         font-size: 0.875rem;
         line-height: 0.875rem;
         position: absolute;
-        bottom: 0.5rem;
+        bottom: 4%;
-        width: 100%;
+        width: 33.33333333%;
         // padding-top: 0.75rem;
 
         .screen-graph-title {
             display: inline-block;
-            width: 20%;
+            width: 60%;
             text-align: center;
         }
     }
 
     .screen-graph-chart {
         height: 100%;
+
+        .screen-graph-layout {
+            display: inline-block;
+            width: 33.33333333%;
+            height: 100%;
+        }
     }
 
     // .screen-graph-end {

src/pages/ElecEvaluation/MonitorScreen/MonitorRoom/style.less

@@ -413,7 +413,8 @@
             // border: none;
             background: none;
             border: 1px solid #8de3f3;
-            margin-right: 0.5rem;
+            // margin-right: 0.5rem;
+            margin: 0 0.5rem 0 0;
 
             &>a {
                 color: #8de3f3;

src/pages/ElecEvaluation/MonitorScreen/ProjectMonitorRoom/index.tsx

@@ -332,15 +332,16 @@ export default (props: any) => {
                 <Row>
                     <Col span={6}>
                         <div className="left-content-g">
-                            <p>{bidMethodObj?.[basicInfo?.procurementMode]}</p>
+                            {/* <p>{bidMethodObj?.[basicInfo?.procurementMode]}</p> */}
-                            <p>项目名称：{basicInfo?.projectName}</p>
+                            <p className="left-content-title">{bidMethodObj?.[basicInfo?.procurementMode]}</p>
-                            <p>项目编号：{basicInfo?.projectNum}</p>
+                            <p><span className="left-content-label">项目名称：</span>{basicInfo?.projectName}</p>
-                            <p>标段名称：{basicInfo?.sectionName}</p>
+                            <p><span className="left-content-label">项目编号：</span>{basicInfo?.projectNum}</p>
-                            <p>评标时间：{basicInfo?.startDate} —— {basicInfo?.endDate}</p>
+                            <p><span className="left-content-label">标段名称：</span>{basicInfo?.sectionName}</p>
-                            <p>代理机构业务经理：{basicInfo?.appManagerName}</p>
+                            <p><span className="left-content-label">评标时间：</span>{basicInfo?.startDate} —— {basicInfo?.endDate}</p>
-                            <p>评标室人数：{basicInfo?.peopleNumber}人</p>
+                            <p><span className="left-content-label">代理机构业务经理：</span>{basicInfo?.appManagerName}</p>
+                            <p><span className="left-content-label">评标室人数：</span>{basicInfo?.peopleNumber}人</p>
                             <div className="left-content-people">
-                                <span><Tag color="rgba(2,125,180,1)">人员信息</Tag>业务经理：{basicInfo?.manager}人 招标人代表：{basicInfo?.purchaseExpert}人 专家：{basicInfo?.expert}人</span>
+                                <span><span className="people-title">人员信息</span>&nbsp;&nbsp;&nbsp;<span className="left-content-label">业务经理：</span>{basicInfo?.manager}人&nbsp;&nbsp;&nbsp;<span className="left-content-label">招标人代表：</span>{basicInfo?.purchaseExpert}人&nbsp;&nbsp;&nbsp;<span className="left-content-label">专家：</span>{basicInfo?.expert}人</span>
                             </div>
                         </div>
                     </Col>
@@ -349,7 +350,7 @@ export default (props: any) => {
                         <div className="top-title-global">
                             <div className="top-title-left"></div>
                             <div className="top-title-center"><span>{basicInfo?.areaName}</span></div>
-                            <div className="top-title-right"><span>{bidStatusMap[basicInfo?.status]}</span></div>
+                            <div className="top-title-right"><div className={basicInfo?.status == "1" ? "ing-status" : "end-status"}>{bidStatusMap[basicInfo?.status]}</div></div>
                         </div>
                         <div><a className="top-back" onClick={() => previousClick()}></a></div>
                     </Col>
@@ -376,8 +377,9 @@ export default (props: any) => {
                 <Row>
                     <Col span={17}>
                         <div className="left-monitor">
+                            <div className="left-monitor-title"><div><span>监控画面</span></div></div>
+                            <div className="left-monitor-content">
                                 <div className="left-menu">
-                                <div className="left-menu-title">监控画面：</div>
                                     <div className="left-menu-content">
                                         {caremaList.map(item => <div className={cameraSelect == item.id ? "left-menu-btn left-menu-btn-select" : "left-menu-btn"} onClick={() => onCaremaPlay(item)} key={item.id}>{item.deviceName}</div>)}
                                     </div>
@@ -386,6 +388,7 @@ export default (props: any) => {
                                     {cameraParams && <ScreenVideoPlay videoRef={videoRef} cameraParams={cameraParams} status={basicInfo?.status == "2" ? 1 : 0} />}
                                 </div>
                             </div>
+                        </div>
                     </Col>
                     <Col span={7}>
                         <div className="right-warn-list">
@@ -400,7 +403,7 @@ export default (props: any) => {
                                         ? backStrangerList.slice(0, 5).map((item: any, index: any) => (
                                             <div className="stranger-list-card" key={index}>
                                                 <div>
-                                                    <p>时间：{item.createDate}</p>
+                                                    <p><span>时间：</span>{item.createDate}</p>
                                                 </div>
                                                 <div>
                                                     <Image src={pictureDisplayPath + "?filePath=" + item.details[0].filePath} preview={{ getContainer: "null" }} height={"100%"} onClick={() => drawerClick(item.details[0].filePath)} />
@@ -410,8 +413,8 @@ export default (props: any) => {
                                         : earlyWarnData?.strangerDetails?.map((item: any, index: any) => (
                                             <div className="stranger-list-card" key={index}>
                                                 <div>
-                                                    <p>时间：{item.eventTime}</p>
+                                                    <p><span>时间：</span>{item.eventTime}</p>
-                                                    <p>描述：{item.describeStranger}</p>
+                                                    <p><span>描述：</span>{item.describeStranger}</p>
                                                 </div>
                                                 <div>
                                                     <Image src={pictureDisplayPath + "?filePath=" + item.filePath} preview={{ getContainer: "null" }} height={"100%"} onClick={() => drawerClick(item.filePath)} />

src/pages/ElecEvaluation/MonitorScreen/ProjectMonitorRoom/style.less

@@ -14,21 +14,41 @@
         width: 100%;
 
         &>p {
-            color: #94edf7;
+            color: #99f6ff;
             margin-bottom: 0;
+            line-height: 1.6;
             width: 100%;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
 
             &:first-child {
-                color: #F59A23;
+                color: #FFCC00;
+                margin-bottom: 2px;
             }
         }
 
-        .left-content-people {
+        .left-content-title {
+            background-image: url('@{screen-img-url}/content_title_bg.jpg');
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            width: 7.5rem;
+            padding-left: 0.75rem;
+            line-height: 1.625rem;
+            font-size: 0.9rem;
+        }
+
+        .left-content-label {
             color: #fff;
-            margin-top: 8px;
+        }
+
+        .left-content-people {
+            color: #99f6ff;
+
+            // margin-top: 8px;
+            .people-title {
+                color: #FFCC00;
+            }
         }
     }
 
@@ -48,24 +68,44 @@
 
             &>span {
                 font-size: 22px;
-                line-height: 22px;
+                line-height: 24px;
             }
         }
 
         .top-title-right {
             .screen-flex-center;
             flex: 1;
-            color: #facd91;
             justify-content: center;
+
+            &>div {
+                border-radius: 2px;
+                padding: 0.2rem 0.7rem;
+                line-height: 1.375rem;
+            }
+
+            .ing-status {
+                border: 1px solid #FFCC00;
+                color: #FFCC00;
+            }
+
+            .end-status {
+                border: 1px solid #ee6666;
+                color: #ee6666;
+            }
         }
 
     }
 
     .right-warn-title {
-        font-size: 20px;
+        background-image: url('@{screen-img-url}/content_title_bg.jpg');
-        line-height: 20px;
+        background-repeat: no-repeat;
-        color: #ee6766;
+        background-size: 100% 100%;
-        padding-bottom: 1rem;
+        width: 7.8rem;
+        line-height: 1.725rem;
+        text-align: center;
+        color: #FFCC00;
+        font-size: 1rem;
+        margin-bottom: 1rem;
     }
 
     .right-warn-content {
@@ -78,18 +118,18 @@
     }
 
     .answer-supplier {
-        margin: 8px 0;
+        margin: 10px 0 8px;
 
         &>span {
             color: #fff;
             margin-bottom: 0;
 
             &:first-child {
-                color: #81d3f8;
+                color: #FFCC00;
             }
 
             &>a {
-                color: #00e1ff;
+                color: #99f6ff;
                 margin-left: 8px;
             }
         }
@@ -107,7 +147,7 @@
 
         .left-monitor,
         .right-warn-list {
-            height: 83vh;
+            height: 82.6vh;
         }
     }
 
@@ -115,7 +155,7 @@
 
         .left-monitor,
         .right-warn-list {
-            height: 80.2vh;
+            height: 79.6vh;
         }
     }
 
@@ -123,7 +163,7 @@
 
         .left-monitor,
         .right-warn-list {
-            height: 76vh;
+            height: 75.6vh;
         }
     }
 
@@ -131,7 +171,7 @@
 
         .left-monitor,
         .right-warn-list {
-            height: 70vh;
+            height: 69.6vh;
         }
     }
 
@@ -144,33 +184,59 @@
     }
 
     .left-monitor {
-        border: 1px solid #fff;
+        border: 1px solid #5c6aa2;
-        margin-right: 4px;
+        border-radius: 4px;
-        padding: 12px;
+        margin-right: 8px;
+
+        .left-monitor-title {
+            display: flex;
+            justify-content: center;
+
+            &>div {
+                width: 375px;
+                height: 36px;
+                background-image: url('@{screen-img-url}/title_bg.png');
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                text-align: center;
+            }
+
+            &>div>span {
+                color: #ffcd00;
+                line-height: 36px;
+                font-size: 1rem;
+            }
+        }
+
+        .left-monitor-content {
+            padding: 8px 12px;
             display: flex;
             justify-content: flex-start;
+            height: calc(100% - 36px);
 
             .left-menu {
-            color: #fff;
+                color: #72c1dd;
-            width: 15%;
+                width: 12%;
-
-            .left-menu-title {
-                font-size: 18px;
-                padding-bottom: 16px;
-            }
 
                 .left-menu-content {
                     .left-menu-btn {
-                    height: 40px;
+                        height: 36px;
                         width: 100%;
-                    line-height: 40px;
+                        line-height: 36px;
                         text-align: center;
                         cursor: pointer;
                         background: none;
+                        border-top-left-radius: 2px;
+                        border-bottom-left-radius: 2px;
+                        border: 1px solid #72c1dd;
+                        border-right: none;
+                        margin-bottom: 1rem;
+                        transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s
                     }
 
                     .left-menu-btn-select {
-                    background-color: #81d3f8;
+                        background-color: #72c1dd;
+                        color: #fff;
                     }
                 }
             }
@@ -178,27 +244,37 @@
             .right-content-c {
                 width: 100%;
                 height: 100%;
-            border: 1px solid #fff;
+                position: relative;
+                left: -1px;
+                top: -1px;
+            }
         }
     }
 
     .right-warn-list {
-        border: 1px solid #fff;
+        border: 1px solid #5c6aa2;
-        margin-left: 4px;
+        border-radius: 4px;
+        margin-left: 8px;
         padding: 12px;
+        text-align: center;
 
         .stranger-list {
             height: calc(100% - 76px);
 
             .stranger-list-card {
-                border: 1px solid #2B5093;
+                // border: 1px solid #2B5093;
-                background-color: #051666;
+                // background-color: #051666;
+                border-bottom: 1px solid #5c6aa2;
                 height: 20%;
                 margin-top: 8px;
                 padding: 8px;
-                color: #fff;
+                color: #99f6ff;
                 display: flex;
                 justify-content: space-between;
+
+                &>div>p>span {
+                    color: #fff;
+                }
             }
         }
 
@@ -241,25 +317,41 @@
     }
 
     .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
-        background: #02A7F0;
+        background: #72c1dd;
-        border-color: #02A7F0;
+        border-color: #72c1dd;
 
         &:hover {
-            background: #02A7F0;
+            background: #72c1dd;
-            border-color: #02A7F0;
+            border-color: #72c1dd;
         }
     }
 
     .ant-radio-button-wrapper-checked:not([class*=' ant-radio-button-wrapper-disabled']).ant-radio-button-wrapper:first-child {
-        border-right-color: #02A7F0;
+        border-right-color: #72c1dd;
     }
 
     .ant-radio-button-wrapper:hover {
-        color: #02A7F0;
+        color: #72c1dd;
+    }
+
+    .ant-radio-button-wrapper {
+        color: #72c1dd;
+        border: 1px solid #72c1dd;
+        border-left-width: 0;
+        border-top-width: 1.02px;
+        background: none;
+    }
+
+    .ant-radio-button-wrapper:first-child {
+        border-left: 1px solid #72c1dd;
+    }
+
+    .ant-radio-button-wrapper:not(:first-child)::before {
+        background-color: #72c1dd;
     }
 
     .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before,
     .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before {
-        background-color: #02A7F0;
+        background-color: #72c1dd;
     }
 }