12.30 第四版

src/pages/ElecEvaluation/Monitor/Exception/index.tsx

@@ -1,131 +1,20 @@
 import { Col, Row } from 'antd';
 import React, { useEffect, useRef, useState } from 'react';
 import '../style.less'
-import { authCheck, onCell, onHeaderCell, OverviewItem, ScreenLabel, ScreenTitle, ScrollTable } from '../Home';
+import { authCheck, ModalList, onCell, onHeaderCell, OverviewItem, ScreenLabel, ScreenTitle, ScrollTable } from '../Home';
 import Circle3199 from '@/assets/monitor/circle-3199.png';
-import { getDecryptDataAPI, getNoOpenAssessListAPI, getNoOpenListAPI, getNoOpenNumberAPI, getThreeDayNoEndAPI, getThreeDaysUnSendAnnoCountAPI, getThreeDaysUnSendAnnoListAPI } from '../service';
-
-const columns: any[] = [
-    {
-        title: '序号',
-        align: 'center',
-        width: '10%',
-        onCell,
-        onHeaderCell,
-        render: (_: any, record: any, index: any) => index + 1,
-    },
-    {
-        title: '省分',
-        dataIndex: 'provinceName',
-        key: 'provinceName',
-        width: '15%',
-        ellipsis: true,
-        onCell,
-        onHeaderCell,
-        // render: (_: any, record: any) => proviceEnum[record.provinceDictId],
-    },
-    {
-        title: '项目名称',
-        dataIndex: 'projectName',
-        key: 'projectName',
-        ellipsis: true,
-        width: '20%',
-        onCell,
-        onHeaderCell,
-    },
-    {
-        title: '预算金额',
-        dataIndex: 'budgetAmount',
-        key: 'budgetAmount',
-        width: '20%',
-        onCell,
-        onHeaderCell,
-    },
-    {
-        title: '采购经理',
-        dataIndex: 'ownerContactName',
-        key: 'ownerContactName',
-        width: '15%',
-        onCell,
-        onHeaderCell,
-    },
-    {
-        title: '查看',
-        width: '20%',
-        onCell,
-        onHeaderCell,
-        render: (_: any, record: any) => {
-            return (
-                <a onClick={() => { }} style={{ color: "#fff" }}>查看</a>
-            )
-        },
-    },
-];
-
-const columnsSecond: any[] = [
-    {
-        title: '序号',
-        align: 'center',
-        width: '10%',
-        onCell,
-        onHeaderCell,
-        render: (_: any, record: any, index: any) => index + 1,
-    },
-    {
-        title: '省分',
-        dataIndex: 'regionDictName',
-        key: 'regionDictName',
-        width: '15%',
-        ellipsis: true,
-        onCell,
-        onHeaderCell,
-        // render: (_: any, record: any) => proviceEnum[record.provinceDictId],
-    },
-    {
-        title: '项目名称',
-        dataIndex: 'projectName',
-        key: 'projectName',
-        ellipsis: true,
-        width: '20%',
-        onCell,
-        onHeaderCell,
-    },
-    {
-        title: '预算金额',
-        dataIndex: 'budgetAmount',
-        key: 'budgetAmount',
-        width: '20%',
-        onCell,
-        onHeaderCell,
-    },
-    {
-        title: '采购经理',
-        dataIndex: 'ownerContactName',
-        key: 'ownerContactName',
-        width: '15%',
-        onCell,
-        onHeaderCell,
-    },
-    {
-        title: '查看',
-        width: '20%',
-        onCell,
-        onHeaderCell,
-        render: (_: any, record: any) => {
-            return (
-                <a onClick={() => { }} style={{ color: "#fff" }}>查看</a>
-            )
-        },
-    },
-];
+import { getDecryptDataAPI, getNoOpenAssessListAPI, getNoOpenListAPI, getNoOpenNumberAPI, getThreeDayNoEndAPI, getThreeDayNoEndCountAPI, getThreeDaysUnSendAnnoCountAPI, getThreeDaysUnSendAnnoListAPI } from '../service';
+import { isNotEmpty } from '@/utils/CommonUtils';
 
 const MonitorException: React.FC<{}> = () => {
     //超过1小时未开标数量
     const [noOpenNumberData, setNoOpenNumberData] = useState<string>("");
     //开启评审后3日未结束评标-列表
     const [threeDayNoEndData, setThreeDayNoEndData] = useState<any[]>([]);
+    //开启评审后3日未结束评标-数量
+    const [threeDayNoEndCount, setThreeDayNoEndCount] = useState<any>(0);
     //超过1小时未开标数量-列表
-    const [noOpenListData, setNoOpenListData] = useState<any>();
+    const [noOpenListData, setNoOpenListData] = useState<any[]>([]);
     //开标后超过6小时未开启评审室-列表
     const [noOpenAssessListData, setNoOpenAssessListData] = useState<any>();
     //异常监控-解密异常、mac地址相同及相关项目列表
@@ -134,11 +23,17 @@ const MonitorException: React.FC<{}> = () => {
     const [threeDaysUnSendAnnoCount, setThreeDaysUnSendAnnoCount] = useState<string>("");
     //评审室关闭3日内未发布公示列表
     const [threeDaysUnSendAnnoList, setThreeDaysUnSendAnnoList] = useState<any[]>([]);
+    //ModalList visible
+    const [modalListVisible, setModalListVisible] = useState<boolean>(false);
+    //ModalList Data
+    const [modalListData, setModalListData] = useState<any[]>([]);
+    //ModalList Type
+    const [exceptionType, setExceptionType] = useState<any>();
     //权限校验
     const auth = useRef<boolean>(authCheck());
     //超过1小时未开标数量
     const getNoOpenNumber = () => {
-        getNoOpenNumberAPI().then(res => {
+        getNoOpenNumberAPI({ "timeLimit": "1", "dayNumber": "30" }).then(res => {
             if (res?.code == 200) {
                 setNoOpenNumberData(res?.data);
             }
@@ -152,17 +47,17 @@ const MonitorException: React.FC<{}> = () => {
             }
         })
     }
-    //开启评审后3日未结束评标
+    //超过1小时未开标数量-列表
     const getNoOpenList = () => {
-        getNoOpenListAPI({ pageNo: 1, pageSize: 10 }).then(res => {
+        getNoOpenListAPI({ "timeLimit": "1", "dayNumber": "30" }).then(res => {
             if (res?.code == 200) {
-                setNoOpenListData(res?.data);
+                setNoOpenListData(res?.data?.records);
             }
         })
     }
     //开标后超过6小时未开启评审室-列表
     const getNoOpenAssessList = () => {
-        getNoOpenAssessListAPI({ pageNo: 1, pageSize: 10 }).then(res => {
+        getNoOpenAssessListAPI({ pageNo: 1, pageSize: 100 }).then(res => {
             if (res?.code == 200) {
                 setNoOpenAssessListData(res?.data);
             }
@@ -194,6 +89,15 @@ const MonitorException: React.FC<{}> = () => {
             }
         })
     }
+
+    //异常监控-评审室关闭3日内未发布公示列表
+    const getThreeDayNoEndCount = () => {
+        getThreeDayNoEndCountAPI().then(res => {
+            if (res?.code == 200) {
+                setThreeDayNoEndCount(res?.data);
+            }
+        })
+    }
     useEffect(() => {
         if (auth.current) {
             getNoOpenNumber();
@@ -203,8 +107,324 @@ const MonitorException: React.FC<{}> = () => {
             getDecryptData();
             getThreeDaysUnSendAnnoCount();
             getThreeDaysUnSendAnnoList();
+            getThreeDayNoEndCount();
         }
     }, [])
+
+    const columns: any[] = [
+        {
+            title: '序号',
+            align: 'center',
+            width: '10%',
+            onCell,
+            onHeaderCell,
+            render: (_: any, record: any, index: any) => index + 1,
+        },
+        {
+            title: '省分',
+            dataIndex: 'provinceName',
+            key: 'provinceName',
+            align: 'center',
+            width: '15%',
+            ellipsis: true,
+            onCell,
+            onHeaderCell,
+            // render: (_: any, record: any) => proviceEnum[record.provinceDictId],
+        },
+        {
+            title: '项目名称',
+            dataIndex: 'projectName',
+            key: 'projectName',
+            align: 'center',
+            ellipsis: true,
+            width: '30%',
+            onCell,
+            onHeaderCell,
+        },
+        {
+            title: '预算金额',
+            dataIndex: 'budgetAmount',
+            key: 'budgetAmount',
+            align: 'center',
+            width: '20%',
+            onCell,
+            onHeaderCell,
+            render: (_: any, record: any) => isNotEmpty(record.budgetAmount) ? Number(record.budgetAmount).toFixed(2) : 0,
+        },
+        {
+            title: '采购经理',
+            dataIndex: 'ownerContactName',
+            key: 'ownerContactName',
+            align: 'center',
+            width: '15%',
+            onCell,
+            onHeaderCell,
+        },
+        {
+            title: '查看',
+            width: '10%',
+            align: 'center',
+            onCell,
+            onHeaderCell,
+            render: (_: any, record: any) => {
+                return (
+                    <a onClick={() => { setExceptionType(null); setModalListData([record]); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#fff" }}>查看</a>
+                )
+            },
+        },
+    ];
+
+    const columnsSecond: any[] = [
+        {
+            title: '序号',
+            align: 'center',
+            width: '10%',
+            onCell,
+            onHeaderCell,
+            render: (_: any, record: any, index: any) => index + 1,
+        },
+        {
+            title: '省分',
+            dataIndex: 'regionDictName',
+            key: 'regionDictName',
+            align: 'center',
+            width: '15%',
+            ellipsis: true,
+            onCell,
+            onHeaderCell,
+            // render: (_: any, record: any) => proviceEnum[record.provinceDictId],
+        },
+        {
+            title: '项目名称',
+            dataIndex: 'projectName',
+            key: 'projectName',
+            align: 'center',
+            ellipsis: true,
+            width: '30%',
+            onCell,
+            onHeaderCell,
+        },
+        {
+            title: '预算金额',
+            dataIndex: 'budgetAmount',
+            key: 'budgetAmount',
+            align: 'center',
+            width: '20%',
+            onCell,
+            onHeaderCell,
+            // render: (_: any, record: any) => isNotEmpty(record.budgetAmount) ? record.budgetAmount.toFixed(2) : 0,
+        },
+        {
+            title: '采购经理',
+            dataIndex: 'ownerContactName',
+            key: 'ownerContactName',
+            align: 'center',
+            width: '15%',
+            onCell,
+            onHeaderCell,
+        },
+        {
+            title: '查看',
+            width: '10%',
+            align: 'center',
+            onCell,
+            onHeaderCell,
+            render: (_: any, record: any) => {
+                return (
+                    <a onClick={() => { setExceptionType("解密异常"); setModalListData([record]); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#fff" }}>查看</a>
+                )
+            },
+        },
+    ];
+
+    const columnsThird: any[] = [
+        {
+            title: '序号',
+            align: 'center',
+            width: '10%',
+            onCell,
+            onHeaderCell,
+            render: (_: any, record: any, index: any) => index + 1,
+        },
+        {
+            title: '省分',
+            dataIndex: 'provinceName',
+            key: 'provinceName',
+            align: 'center',
+            width: '15%',
+            ellipsis: true,
+            onCell,
+            onHeaderCell,
+            // render: (_: any, record: any) => proviceEnum[record.provinceDictId],
+        },
+        {
+            title: '项目名称',
+            dataIndex: 'projectName',
+            key: 'projectName',
+            align: 'center',
+            ellipsis: true,
+            width: '30%',
+            onCell,
+            onHeaderCell,
+        },
+        {
+            title: '预算金额',
+            dataIndex: 'bidSectContractPrice',
+            key: 'bidSectContractPrice',
+            align: 'center',
+            width: '20%',
+            onCell,
+            onHeaderCell,
+            // render: (_: any, record: any) => isNotEmpty(record.bidSectContractPrice) ? record.bidSectContractPrice.toFixed(2) : 0,
+        },
+        {
+            title: '采购经理',
+            dataIndex: 'ownerContactName',
+            key: 'ownerContactName',
+            align: 'center',
+            width: '15%',
+            onCell,
+            onHeaderCell,
+        },
+        {
+            title: '查看',
+            width: '10%',
+            align: 'center',
+            onCell,
+            onHeaderCell,
+            render: (_: any, record: any) => {
+                return (
+                    <a onClick={() => { setExceptionType("评标结束后3日内未发布公示"); setModalListData([record]); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#fff" }}>查看</a>
+                )
+            },
+        },
+    ];
+
+    const columnsForth: any[] = [
+        {
+            title: '序号',
+            align: 'center',
+            width: '10%',
+            onCell,
+            onHeaderCell,
+            render: (_: any, record: any, index: any) => index + 1,
+        },
+        {
+            title: '省分',
+            dataIndex: 'provinceName',
+            key: 'provinceName',
+            align: 'center',
+            width: '15%',
+            ellipsis: true,
+            onCell,
+            onHeaderCell,
+            // render: (_: any, record: any) => proviceEnum[record.provinceDictId],
+        },
+        {
+            title: '项目名称',
+            dataIndex: 'projectName',
+            key: 'projectName',
+            align: 'center',
+            ellipsis: true,
+            width: '30%',
+            onCell,
+            onHeaderCell,
+        },
+        {
+            title: '预算金额',
+            dataIndex: 'budgetAmount',
+            key: 'budgetAmount',
+            align: 'center',
+            width: '20%',
+            onCell,
+            onHeaderCell,
+            render: (_: any, record: any) => isNotEmpty(record.budgetAmount) ? Number(record.budgetAmount).toFixed(2) : 0,
+        },
+        {
+            title: '采购经理',
+            dataIndex: 'ownerContactName',
+            key: 'ownerContactName',
+            align: 'center',
+            width: '15%',
+            onCell,
+            onHeaderCell,
+        },
+        {
+            title: '查看',
+            width: '10%',
+            align: 'center',
+            onCell,
+            onHeaderCell,
+            render: (_: any, record: any) => {
+                return (
+                    <a onClick={() => { setExceptionType("开启评审后3日未结束评标"); setModalListData([record]); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#fff" }}>查看</a>
+                )
+            },
+        },
+    ];
+
+    const columnsFifth: any[] = [
+        {
+            title: '序号',
+            align: 'center',
+            width: '10%',
+            onCell,
+            onHeaderCell,
+            render: (_: any, record: any, index: any) => index + 1,
+        },
+        {
+            title: '省分',
+            dataIndex: 'regionDictName',
+            key: 'regionDictName',
+            align: 'center',
+            width: '15%',
+            ellipsis: true,
+            onCell,
+            onHeaderCell,
+            // render: (_: any, record: any) => proviceEnum[record.provinceDictId],
+        },
+        {
+            title: '项目名称',
+            dataIndex: 'projectName',
+            key: 'projectName',
+            align: 'center',
+            ellipsis: true,
+            width: '30%',
+            onCell,
+            onHeaderCell,
+        },
+        {
+            title: '预算金额',
+            dataIndex: 'budgetAmount',
+            key: 'budgetAmount',
+            align: 'center',
+            width: '20%',
+            onCell,
+            onHeaderCell,
+            // render: (_: any, record: any) => isNotEmpty(record.budgetAmount) ? record.budgetAmount.toFixed(2) : 0,
+        },
+        {
+            title: '采购经理',
+            dataIndex: 'ownerContactName',
+            key: 'ownerContactName',
+            align: 'center',
+            width: '15%',
+            onCell,
+            onHeaderCell,
+        },
+        {
+            title: '查看',
+            width: '10%',
+            align: 'center',
+            onCell,
+            onHeaderCell,
+            render: (_: any, record: any) => {
+                return (
+                    <a onClick={() => { setExceptionType("MAC地址重复"); setModalListData([record]); setModalListVisible(true); }} className='monitor-extra-pointer' style={{ color: "#fff" }}>查看</a>
+                )
+            },
+        },
+    ];
     return (
         <ScreenTitle title="异常监控">
             <div className="top-main">
@@ -213,19 +433,19 @@ const MonitorException: React.FC<{}> = () => {
                     <OverviewItem icon={Circle3199} title="解密异常" number={decryptData?.decryptExceptionCount} unit="次" />
                     <OverviewItem icon={Circle3199} title="MAC地址相同" number={decryptData?.macSameCount} unit="个" />
                     <OverviewItem icon={Circle3199} title="开标后6小时未开启评审" number={noOpenAssessListData?.length} unit="个" />
-                    <OverviewItem icon={Circle3199} title="开启评审后3日未结束评标" number={threeDayNoEndData?.length} unit="个" />
+                    <OverviewItem icon={Circle3199} title="开启评审后3日未结束评标" number={threeDayNoEndCount} unit="个" />
                     <OverviewItem icon={Circle3199} title="评标结束3日未公示" number={threeDaysUnSendAnnoCount} unit="个" />
-                    <OverviewItem icon={Circle3199} title="重新评标次数" number={62520} unit="次" />
+                    {/* <OverviewItem icon={Circle3199} title="重新评标次数" number={62520} unit="次" /> */}
                 </div>
             </div>
             <Row>
                 <Col span={8}>
                     <div className="monitor-left-main">
-                        <ScreenLabel title="1小时未开标项目列表" extra={<span>more</span>} />
+                        <ScreenLabel title="1小时未开标项目列表" extra={<span className='monitor-extra-pointer' onClick={() => { setExceptionType(null); setModalListData(noOpenListData); setModalListVisible(true); }}>more</span>} />
                         <div className="monitor-exception-card">
-                            <ScrollTable dataSource={noOpenListData?.records} columns={columns} ynum={266} />
+                            <ScrollTable dataSource={noOpenListData} columns={columns} ynum={266} />
                         </div>
-                        <ScreenLabel title="开标后六小时未开启评审" extra={<span>more</span>} />
+                        <ScreenLabel title="开标后六小时未开启评审" extra={<span className='monitor-extra-pointer' onClick={() => { setExceptionType(null); setModalListData(noOpenAssessListData); setModalListVisible(true); }}>more</span>} />
                         <div className="monitor-exception-card">
                             <ScrollTable dataSource={noOpenAssessListData} columns={columns} ynum={266} />
                         </div>
@@ -233,29 +453,30 @@ const MonitorException: React.FC<{}> = () => {
                 </Col>
                 <Col span={8}>
                     <div className="monitor-center-main">
-                        <ScreenLabel title="解密异常项目列表" extra={<span>more</span>} />
+                        <ScreenLabel title="解密异常项目列表" extra={<span className='monitor-extra-pointer' onClick={() => { setExceptionType("解密异常"); setModalListData(decryptData?.decryptExceptionList); setModalListVisible(true); }}>more</span>} />
                         <div className="monitor-exception-card">
                             <ScrollTable dataSource={decryptData?.decryptExceptionList} columns={columnsSecond} ynum={266} />
                         </div>
-                        <ScreenLabel title="开启评审后3日未结束评标" extra={<span>more</span>} />
+                        <ScreenLabel title="开启评审后3日未结束评标" extra={<span className='monitor-extra-pointer' onClick={() => { setExceptionType("开启评审后3日未结束评标"); setModalListData(threeDayNoEndData); setModalListVisible(true); }}>more</span>} />
                         <div className="monitor-exception-card">
-                            <ScrollTable dataSource={threeDayNoEndData} columns={columns} ynum={266} />
+                            <ScrollTable dataSource={threeDayNoEndData} columns={columnsForth} ynum={266} />
                         </div>
                     </div>
                 </Col>
                 <Col span={8}>
                     <div className="monitor-right-main">
-                        <ScreenLabel title="MAC地址重复项目列表" extra={<span>more</span>} />
+                        <ScreenLabel title="MAC地址重复项目列表" extra={<span className='monitor-extra-pointer' onClick={() => { setExceptionType("MAC地址重复"); setModalListData(decryptData?.macSameList); setModalListVisible(true); }}>more</span>} />
                         <div className="monitor-exception-card">
-                            <ScrollTable dataSource={decryptData?.macSameList} columns={columnsSecond} ynum={266} />
+                            <ScrollTable dataSource={decryptData?.macSameList} columns={columnsFifth} ynum={266} />
                         </div>
-                        <ScreenLabel title="评标结束后3日内未发布公示" extra={<span>more</span>} />
+                        <ScreenLabel title="评标结束后3日内未发布公示" extra={<span className='monitor-extra-pointer' onClick={() => { setExceptionType("评标结束后3日内未发布公示"); setModalListData(threeDaysUnSendAnnoList); setModalListVisible(true); }}>more</span>} />
                         <div className="monitor-exception-card">
-                            <ScrollTable dataSource={threeDaysUnSendAnnoList} columns={columnsSecond} ynum={266} />
+                            <ScrollTable dataSource={threeDaysUnSendAnnoList} columns={columnsThird} ynum={266} />
                         </div>
                     </div>
                 </Col>
             </Row>
+            <ModalList modalVisible={modalListVisible} onCancel={() => { setModalListVisible(false); setModalListData([]); }} exceptionData={modalListData} exceptionType={exceptionType} />
         </ScreenTitle>
     );
 };

src/pages/ElecEvaluation/Monitor/OpenToday/index.tsx

@@ -1,10 +1,11 @@
 import { Col, Row } from 'antd';
 import React, { useEffect, useRef, useState } from 'react';
 import '../style.less'
-import { authCheck, onCell, onHeaderCell, OverviewItem, ProgressItem, proviceEnum, ScreenLabel, ScreenTitle, ScrollTable, StageCard } from '../Home';
+import { authCheck, ModalList, onCell, onHeaderCell, OverviewItem, ProgressItem, proviceEnum, ScreenLabel, ScreenTitle, ScrollTable, StageCard } from '../Home';
 import Circle3199 from '@/assets/monitor/circle-3199.png';
-import { getDecryptSuccessRateTodayAPI, getTodayInfoAPI, getTodayOpeningAPI } from '../service';
+import { getDecryptSuccessRateTodayAPI, getNoOpenListAPI, getNoOpenNumberAPI, getTodayInfoAPI, getTodayOpeningAPI, getUnopenSixAPI, getUnopenTenAPI } from '../service';
 import { isNotEmpty } from '@/utils/CommonUtils';
+const statusMap = ["未开标", "开标", "唱标", "唱标结束", "取消开标", "", "", "", "", "异常处理"];
 
 const columns: any[] = [
     {
@@ -12,6 +13,48 @@ const columns: any[] = [
         dataIndex: 'provinceName',
         key: 'provinceName',
         width: '20%',
+        align: "center",
+        ellipsis: true,
+        onCell,
+        onHeaderCell,
+        // render: (_: any, record: any) => proviceEnum[record.provinceDictId],
+    },
+    {
+        title: '项目名称',
+        dataIndex: 'projectName',
+        key: 'projectName',
+        align: "center",
+        ellipsis: true,
+        width: '30%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '采购预算',
+        dataIndex: 'bidSectContractPrice',
+        key: 'bidSectContractPrice',
+        align: "center",
+        width: '30%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '开标时间',
+        dataIndex: 'openTime',
+        key: 'openTime',
+        align: "center",
+        width: '20%',
+        onCell,
+        onHeaderCell,
+    },
+];
+const reiColumns: any[] = [
+    {
+        title: '省分',
+        dataIndex: 'provinceName',
+        key: 'provinceName',
+        align: "center",
+        width: '20%',
         ellipsis: true,
         onCell,
         onHeaderCell,
@@ -21,8 +64,9 @@ const columns: any[] = [
         title: '项目名称',
         dataIndex: 'projectName',
         key: 'projectName',
+        align: "center",
         ellipsis: true,
-        width: '30%',
+        width: '20%',
         onCell,
         onHeaderCell,
     },
@@ -30,7 +74,8 @@ const columns: any[] = [
         title: '采购预算',
         dataIndex: 'bidSectContractPrice',
         key: 'bidSectContractPrice',
-        width: '30%',
+        align: "center",
+        width: '20%',
         onCell,
         onHeaderCell,
     },
@@ -38,143 +83,22 @@ const columns: any[] = [
         title: '开标时间',
         dataIndex: 'openTime',
         key: 'openTime',
-        width: '20%',
-        onCell,
-        onHeaderCell,
-    },
-];
-const reiColumns: any[] = [
-    {
-        title: '省分',
-        dataIndex: 'provinceDictId',
-        key: 'provinceDictId',
-        width: '20%',
-        ellipsis: true,
-        onCell,
-        onHeaderCell,
-        render: (_: any, record: any) => proviceEnum[record.provinceDictId],
-    },
-    {
-        title: '项目名称',
-        dataIndex: 'projectName',
-        key: 'projectName',
-        ellipsis: true,
-        width: '20%',
-        onCell,
-        onHeaderCell,
-    },
-    {
-        title: '采购预算',
-        dataIndex: 'number',
-        key: 'number',
-        width: '20%',
-        onCell,
-        onHeaderCell,
-    },
-    {
-        title: '开标时间',
-        dataIndex: 'time',
-        key: 'time',
+        align: "center",
         width: '20%',
         onCell,
         onHeaderCell,
     },
     {
         title: '状态',
-        dataIndex: 'time',
-        key: 'time',
+        dataIndex: 'state',
+        key: 'state',
+        align: "center",
         width: '20%',
         onCell,
         onHeaderCell,
+        render: (_: any, record: any) => statusMap[record.state],
     },
 ];
-const dataSource = [
-    {
-        provinceDictId: "0012",
-        projectName: "天津设备采购",
-        number: "320万",
-        time: "9:30",
-        vital: "0",
-    },
-    {
-        provinceDictId: "0012",
-        projectName: "天津设备采购",
-        number: "320万",
-        time: "9:30",
-        vital: "0",
-    },
-    {
-        provinceDictId: "0012",
-        projectName: "天津设备采购",
-        number: "320万",
-        time: "9:30",
-        vital: "0",
-    },
-    {
-        provinceDictId: "0012",
-        projectName: "天津设备采购",
-        number: "320万",
-        time: "9:30",
-        vital: "0",
-    },
-    {
-        provinceDictId: "0012",
-        projectName: "天津设备采购",
-        number: "320万",
-        time: "9:30",
-        vital: "0",
-    },
-    {
-        provinceDictId: "0012",
-        projectName: "天津设备采购",
-        number: "320万",
-        time: "10:30",
-        vital: "1",
-    },
-    {
-        provinceDictId: "0012",
-        projectName: "天津设备采购",
-        number: "320万",
-        time: "10:30",
-        vital: "1",
-    },
-    {
-        provinceDictId: "0012",
-        projectName: "天津设备采购",
-        number: "320万",
-        time: "10:30",
-        vital: "1",
-    },
-    {
-        provinceDictId: "0012",
-        projectName: "天津设备采购",
-        number: "320万",
-        time: "10:30",
-        vital: "1",
-    },
-    {
-        provinceDictId: "0012",
-        projectName: "天津设备采购",
-        number: "320万",
-        time: "9:30",
-        vital: "0",
-    },
-    {
-        provinceDictId: "0012",
-        projectName: "天津设备采购",
-        number: "320万",
-        time: "9:30",
-        vital: "0",
-    },
-    {
-        provinceDictId: "0012",
-        projectName: "天津设备采购",
-        number: "320万",
-        time: "9:30",
-        vital: "0",
-    },
-]
-
 const OpenToday: React.FC<{}> = () => {
     //今日开标-评标阶段，评标及时率
     const [todayInfoData, setTodayInfoData] = useState<any>();
@@ -182,6 +106,24 @@ const OpenToday: React.FC<{}> = () => {
     const [decryptSuccessRateTodayData, setDecryptSuccessRateTodayData] = useState<any>();
     //今日开标-首页开标数据
     const [todayOpeningData, setTodayOpeningData] = useState<any>();
+    //今日开标-评标阶段10小时未评标
+    const [unopenTenData, setUnopenTenData] = useState<any[]>([]);
+    //今日开标-评标阶段6小时未评标
+    const [unopenSixData, setUnopenSixData] = useState<any[]>([]);
+    //超过2小时未开标数量
+    const [noOpenNumberTwo, setNoOpenNumberTwo] = useState<string>("0");
+    //超过5小时未开标数量
+    const [noOpenNumberFive, setNoOpenNumberFive] = useState<string>("0");
+    //超过2小时未开标列表
+    const [noOpenListTwo, setNoOpenListTwo] = useState<any[]>([]);
+    //超过5小时未开标列表
+    const [noOpenListFive, setNoOpenListFive] = useState<any[]>([]);
+    //ModalList visible
+    const [modalListVisible, setModalListVisible] = useState<boolean>(false);
+    //ModalList Data
+    const [modalListData, setModalListData] = useState<any[]>([]);
+    //ModalList Type
+    const [exceptionType, setExceptionType] = useState<any>();
     //权限校验
     const auth = useRef<boolean>(authCheck());
     //今日开标-评标阶段，评标及时率
@@ -208,35 +150,85 @@ const OpenToday: React.FC<{}> = () => {
             }
         })
     }
+    //评标阶段6小时未评标
+    const getUnopenSix = () => {
+        getUnopenSixAPI().then(res => {
+            if (res?.code == 200) {
+                setUnopenSixData(res?.data);
+            }
+        })
+    }
+    //评标阶段10小时未评标
+    const getUnopenTen = () => {
+        getUnopenTenAPI().then(res => {
+            if (res?.code == 200) {
+                setUnopenTenData(res?.data);
+            }
+        })
+    }
+    //超n小时未开标数量
+    const getNoOpenNumber = () => {
+        getNoOpenNumberAPI({ "timeLimit": "2", "dayNumber": "1" }).then(res => {
+            if (res?.code == 200) {
+                setNoOpenNumberTwo(res?.data);
+            }
+        })
+        getNoOpenNumberAPI({ "timeLimit": "5", "dayNumber": "1" }).then(res => {
+            if (res?.code == 200) {
+                setNoOpenNumberFive(res?.data);
+            }
+        })
+    }
+    //超n小时未开标列表
+    const getNoOpenList = () => {
+        getNoOpenListAPI({ "timeLimit": "2", "dayNumber": "1" }).then(res => {
+            if (res?.code == 200) {
+                setNoOpenListTwo(res?.data?.records);
+            }
+        })
+        getNoOpenListAPI({ "timeLimit": "5", "dayNumber": "1" }).then(res => {
+            if (res?.code == 200) {
+                setNoOpenListFive(res?.data?.records);
+            }
+        })
+    }
+
     useEffect(() => {
         if (auth.current) {
             getTodayInfo();
             getDecryptSuccessRateToday();
             getTodayOpening();
+            getUnopenSix();
+            getUnopenTen();
+            getNoOpenNumber();
+            getNoOpenList();
         }
     }, [])
     return (
         <ScreenTitle title="今日开标">
             <div className="top-main top-main-bottom">
+                <div className='monitor-top-exchange'>
+                    <span onClick={() => { window.open("/ElecMonitor/Exception") }}>异常监控</span>
+                </div>
                 <Row gutter={30}>
                     <Col span={7}>
                         <div className='monitor-tender-card'>
                             <ScreenLabel title="开标阶段" />
                             <div className='monitor-tender-card'>
-                                <StageCard percentage={60} total={130} firstTitle="已开标" firstNumber={`100个`} secondTitle="已解密" secondNumber={`80个`} thirdTitle="已唱标" thirdNumber={`65个`} />
+                                <StageCard percentage={isNotEmpty(todayOpeningData?.sectionNumber) && todayOpeningData?.sectionNumber != "0" ? Number(((Number(todayOpeningData?.banner) / todayOpeningData?.sectionNumber) * 100).toFixed(0)) : 0} total={isNotEmpty(todayOpeningData?.sectionNumber) ? todayOpeningData?.sectionNumber : 0} firstTitle="已开标" firstNumber={`${isNotEmpty(todayOpeningData?.openNumber) ? Number(todayOpeningData?.openNumber).toFixed(0) : 0}个`} secondTitle="已解密" secondNumber={`${isNotEmpty(todayOpeningData?.decrypt) ? Number(todayOpeningData?.decrypt).toFixed(0) : 0}个`} thirdTitle="已唱标" thirdNumber={`${isNotEmpty(todayOpeningData?.banner) ? Number(todayOpeningData?.banner).toFixed(0) : 0}个`} />
                             </div>
                         </div>
                     </Col>
                     <Col span={10}>
                         <div className="monitor-top-space-flex monitor-today-overview-width">
                             <OverviewItem icon={Circle3199} title="标段总数" number={isNotEmpty(todayOpeningData?.sectionNumber) ? todayOpeningData?.sectionNumber : 0} unit="个" />
-                            <OverviewItem icon={Circle3199} title="已完成" number={isNotEmpty(todayOpeningData?.complete) ? todayOpeningData?.complete : 0} unit="个" />
+                            <OverviewItem icon={Circle3199} title="已完成" number={isNotEmpty(todayOpeningData?.complete) ? Number(todayOpeningData?.complete).toFixed(0) : 0} unit="个" />
                             <OverviewItem icon={Circle3199} title="完成率" number={isNotEmpty(todayOpeningData?.rate) ? todayOpeningData?.rate.slice(0, todayOpeningData?.rate.length - 1) : 0} unit="%" />
                         </div>
-                        <div className="monitor-top-space-flex ">
-                            <ProgressItem progress={isNotEmpty(decryptSuccessRateTodayData?.successRate) ? Number(decryptSuccessRateTodayData?.successRate) : 0} title="解密成功率" leftTitle='解密成功' rightTitle='解密失败' leftNumber={isNotEmpty(decryptSuccessRateTodayData?.successNum) ? Number(decryptSuccessRateTodayData?.successNum) : 0} rightNumber={isNotEmpty(decryptSuccessRateTodayData?.failNum) ? Number(decryptSuccessRateTodayData?.failNum) : 0} />
-                            <ProgressItem progress={70} title="开标及时率" leftTitle='2小时未开标' rightTitle='5小时未开标' leftNumber={1223} rightNumber={1223} />
-                            <ProgressItem progress={90} title="评标及时率" leftTitle='6小时未评标' rightTitle='10小时未评标' leftNumber={todayInfoData?.sixTimelyRate} rightNumber={todayInfoData?.tenTimelyRate} />
+                        <div className="monitor-top-space-flex">
+                            <ProgressItem progress={isNotEmpty(decryptSuccessRateTodayData?.successRate) ? Number(Number(decryptSuccessRateTodayData?.successRate).toFixed(0)) : 100} title="解密成功率" leftTitle='解密成功' rightTitle='解密失败' leftNumber={isNotEmpty(decryptSuccessRateTodayData?.successNum) ? Number(decryptSuccessRateTodayData?.successNum) : 0} rightNumber={isNotEmpty(decryptSuccessRateTodayData?.failNum) ? Number(decryptSuccessRateTodayData?.failNum) : 0} leftClick={() => { }} rightClick={() => { setExceptionType("解密异常"); setModalListData(isNotEmpty(decryptSuccessRateTodayData?.decryptFailProjectList) ? decryptSuccessRateTodayData?.decryptFailProjectList : []); setModalListVisible(true); }} />
+                            <ProgressItem progress={isNotEmpty(todayOpeningData?.sectionNumber) ? todayOpeningData?.sectionNumber != 0 ? Number((((todayOpeningData?.sectionNumber - Number(noOpenNumberTwo) - Number(noOpenNumberFive)) / Number(todayOpeningData?.sectionNumber)) * 100).toFixed(0)) : 100 : 100} title="开标及时率" leftTitle='2小时未开标' rightTitle='5小时未开标' leftNumber={noOpenNumberTwo} rightNumber={noOpenNumberFive} leftClick={() => { setExceptionType(null); setModalListData(noOpenListTwo); setModalListVisible(true); }} rightClick={() => { setExceptionType(null); setModalListData(noOpenListFive); setModalListVisible(true); }} />
+                            <ProgressItem progress={isNotEmpty(todayInfoData?.sectionNumber) ? todayInfoData?.sectionNumber != 0 ? Number((((todayInfoData?.sectionNumber - Number(todayInfoData?.sixTimelyRate) - Number(todayInfoData?.tenTimelyRate)) / Number(todayInfoData?.sectionNumber)) * 100).toFixed(0)) : 100 : 100} title="评标及时率" leftTitle='6小时未评标' rightTitle='10小时未评标' leftNumber={todayInfoData?.sixTimelyRate} rightNumber={todayInfoData?.tenTimelyRate} leftClick={() => { setExceptionType(null); setModalListData(unopenSixData); setModalListVisible(true); }} rightClick={() => { setExceptionType(null); setModalListData(unopenTenData); setModalListVisible(true); }} />
                         </div>
                     </Col>
                     <Col span={7}>
@@ -259,10 +251,11 @@ const OpenToday: React.FC<{}> = () => {
                 <Col span={12}>
                     <ScreenLabel title="重保项目" />
                     <div className='monitor-tender-card'>
-                        <ScrollTable dataSource={dataSource} columns={reiColumns} ynum={530} />
+                        <ScrollTable dataSource={isNotEmpty(todayOpeningData?.importantList) ? todayOpeningData?.importantList : []} columns={reiColumns} ynum={530} />
                     </div>
                 </Col>
             </Row>
+            <ModalList modalVisible={modalListVisible} onCancel={() => { setModalListVisible(false); setModalListData([]); }} exceptionData={modalListData} exceptionType={exceptionType} />
         </ScreenTitle>
     );
 };

src/pages/ElecEvaluation/Monitor/service.ts

@@ -82,10 +82,12 @@ export async function getExpertNumberAPI(params: any) {
 
 /**
  * 异常监控-超过1小时未开标数量
+ * @param data
  */
-export async function getNoOpenNumberAPI() {
+export async function getNoOpenNumberAPI(data: any) {
     return request('/api/biz-service-ebtp-statistics/opening/noOpenNumber', {
         method: 'POST',
+        data: { ...data },
     });
 }
 
@@ -98,6 +100,15 @@ export async function getThreeDayNoEndAPI() {
     });
 }
 
+/**
+ * 异常监控-开启评审后3日未结束评标-数量
+ */
+export async function getThreeDayNoEndCountAPI() {
+    return request('/api/biz-service-ebtp-statistics/api/evaluation/exception/threedaynoend/count', {
+        method: 'GET',
+    });
+}
+
 /**
  * 异常监控-超过1小时未开标数量-列表
  * @param data
@@ -156,6 +167,22 @@ export async function getTodayInfoAPI() {
     });
 }
 
+/**
+ * 今日开标-评标阶段10小时未评标
+ */
+export async function getUnopenTenAPI() {
+    return request('/api/biz-service-ebtp-statistics/api/evaluation/today/unopen/ten', {
+        method: 'GET',
+    });
+}
+/**
+ * 今日开标-评标阶段6小时未评标
+ */
+export async function getUnopenSixAPI() {
+    return request('/api/biz-service-ebtp-statistics/api/evaluation/today/unopen/six', {
+        method: 'GET',
+    });
+}
 /**
  * 今日开标-解密成功率
  */
@@ -207,4 +234,15 @@ export async function getProvinceByAgencyAPI(agencyId: any) {
     return request(`/api/biz-service-ebtp-statistics/tenderAgent/getProvinceByAgency/${agencyId}`, {
         method: 'GET',
     });
+}
+/**
+ * 首页-获取评标室监控列表
+ * @param data 
+ * @returns 
+ */
+export async function getMonitorListAPI(data: any) {
+    return request('/api/biz-service-ebtp-evaluation/v1/screen/getReviewRoomList', {
+        method: 'POST',
+        data: data,
+    });
 }

src/pages/ElecEvaluation/Monitor/style.less

@@ -252,8 +252,15 @@
                     background-repeat: no-repeat;
                     background-size: 100% 100%;
                     height: 120px;
-                    margin-top: 20px;
+                    margin-top: 14px;
                     position: relative;
+                    cursor: pointer;
+
+                    &:hover {
+                        -webkit-filter: brightness(108%);
+                        filter: brightness(108%);
+                    }
+
                     .flex-center;
 
                     &>img {
@@ -290,7 +297,7 @@
                     letter-spacing: 0px;
                     color: rgba(255, 255, 255, 0.87);
                     text-align: center;
-                    margin-top: 12px;
+                    margin-top: 4px;
                 }
             }
         }
@@ -470,6 +477,14 @@
                 background: rgba(255, 255, 255, 0.15);
             }
         }
+
+        .monitor-extra-pointer {
+            cursor: pointer;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
     }
 }
 
@@ -590,6 +605,7 @@
         justify-content: space-around;
         margin-top: 10px;
 
+
         .progress-bottom-title {
             text-align: center;
 
@@ -620,6 +636,10 @@
                 color: #29F1FA;
             }
         }
+
+        .line-progress-pointer {
+            cursor: pointer;
+        }
     }
 }
 
@@ -1030,4 +1050,56 @@
     &:active {
         background-color: #12304ecc;
     }
+}
+
+.monitor-modal-list {
+    .ant-modal-body {
+        background: #12304ecc;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+
+    .ant-modal-content {
+        background: #12304ecc;
+    }
+
+    .ant-modal-close-x {
+        color: #1B7EF2;
+    }
+
+    .monitor-modal-btn {
+        display: flex;
+        justify-content: center;
+        margin-top: 16px;
+    }
+
+    .modal-list-btn {
+        padding: 4px 15px;
+        background-color: #12304e;
+        border-radius: 20px;
+        cursor: pointer;
+        border: 1px solid #1b7ef2;
+        width: 64px;
+
+        &:hover {
+            background-color: #ffffffcc;
+        }
+
+        &>span {
+            color: #1b7ef2;
+            line-height: 16px;
+        }
+    }
+
+    .monitor-modal-empty {
+        .ant-empty-image {
+            color: #fff;
+        }
+
+        .ant-empty-description {
+            color: #fff;
+        }
+    }
 }

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

@@ -4,7 +4,9 @@
 @screen-color: #041a6d;
 
 .screen-bg {
-    background: @screen-color;
+    // background: @screen-color;
+    background: url("~@/assets/monitor/background-2.jpg") left top no-repeat;
+    background-size: cover;
     width: 100%;
     height: 100%;
     margin: 0;

src/pages/userformal/login/index.tsx

@@ -37,7 +37,7 @@ const Index: React.FC<{}> = () => {
   const mediaStreamTrack = useRef<any>();
   const { TabPane } = Tabs;
   const [submitLoading, setSubmitLoading] = useState<boolean>(false);
-  const [faceLoginDisable, setFaceLoginDisable] = useState<boolean>(false);  
+  const [faceLoginDisable, setFaceLoginDisable] = useState<boolean>(false);
   const lv = useRef<LivingNotIE>();
   const [timerShow, setTimeShow] = useState<boolean>(false);
   const [itemShow, setItemShow] = useState<boolean>(false);
@@ -46,8 +46,8 @@ const Index: React.FC<{}> = () => {
   /**
    * 设置活体检测token
    */
-  const setLiveDetectToken = () =>{
-    let appKey= 'nkYy3g1yT0alE8pF6a1UTC4I'
+  const setLiveDetectToken = () => {
+    let appKey = 'nkYy3g1yT0alE8pF6a1UTC4I'
     let appSecrect = 'L30zHpTyAtTlY7tTCpbzdxxKCQgwWIQL'
     // Header
     var header = {
@@ -75,41 +75,41 @@ const Index: React.FC<{}> = () => {
    */
   const liveDetectStart = () => {
     liveDetectStop();
-     let _lv = new LivingNotIE(null, {
+    let _lv = new LivingNotIE(null, {
       timer: 10000,
-      action : [1,3,2],
+      action: [1, 3, 2],
       token: setLiveDetectToken(),
-      proxy:'/living/api',
-      getFacePicture:()=>{
+      proxy: '/living/api',
+      getFacePicture: () => {
         return getLiveDetectFile()
       },
       //开始活体检测，此时token已鉴权成功
-      onDetectStart:()=>{
+      onDetectStart: () => {
         setSubmitLoading(true);
       },
       //每轮检测开始
-      onDetectActionStart:(action:number)=>{
+      onDetectActionStart: (action: number) => {
         setAction(action);
         // this.drawCanvas()
       },
       //每轮检测计时
-      onDetectActionProgress:(action:number,timer:number)=>{
+      onDetectActionProgress: (action: number, timer: number) => {
         setTimer(timer);
       },
       //每轮检测结束
-      onDetectActionFinish:(action:number,data:any)=>{
+      onDetectActionFinish: (action: number, data: any) => {
         // this.clearCanvas()
         setTimer(10000);
         console.log(data)
       },
       //活体检测完成
-      onDetectFinish:(data:any)=>{
-        if(data.code == 1){
+      onDetectFinish: (data: any) => {
+        if (data.code == 1) {
           setAction(4);
           setTimeShow(false);
           //人脸比对
           hanleFaceSubmit(data.file.file, null);
-        }else{
+        } else {
           message.error('活体检测失败');
           setSubmitLoading(false);
         }
@@ -140,12 +140,12 @@ const Index: React.FC<{}> = () => {
     console.log(_imgURI);
     let _file = base64ToBlob(_imgURI);
     return {
-      file:_file//传给活体检测服务的文件
+      file: _file//传给活体检测服务的文件
     }
   }
-  const classColor = (action:any) => {
+  const classColor = (action: any) => {
     let color = '';
-    switch(action){
+    switch (action) {
       case 1:
         color = '#409eff';
         break;
@@ -161,17 +161,17 @@ const Index: React.FC<{}> = () => {
     }
     return color;
   }
-  const actionText = (action:number, timer:number) => {
+  const actionText = (action: number, timer: number) => {
     let text = '';
-    switch(action){
+    switch (action) {
       case 1:
-        text = '对准摄像头眨眨眼（'+ timer + 's）';
+        text = '对准摄像头眨眨眼（' + timer + 's）';
         break;
       case 2:
-        text = '对准摄像头张张嘴（'+ timer + 's）';
+        text = '对准摄像头张张嘴（' + timer + 's）';
         break;
       case 3:
-        text = '对准摄像头摇摇头（'+ timer + 's）';
+        text = '对准摄像头摇摇头（' + timer + 's）';
         break;
       case 4:
         text = '请稍候，正在验证中...';
@@ -428,7 +428,7 @@ const Index: React.FC<{}> = () => {
     return new Blob([uInt8Array], { type: contentType });
   };
 
-  const IELiveDetectFinish2 = async(data:any) => {
+  const IELiveDetectFinish2 = async (data: any) => {
     console.log(data);
     setAction(4);
     hanleFaceSubmit(data, null);
@@ -436,17 +436,17 @@ const Index: React.FC<{}> = () => {
 
   //IELiveDetectFinish
   const IELiveDetectFinish = async (data: any) => {
-    if(data.code != 0){
+    if (data.code != 0) {
       console.log(data);
       setAction(4);
       hanleFaceSubmit(data.file.file, null);
-    }else{
+    } else {
       message.error('活体检测失败');
       setSubmitLoading(false);
     }
   }
 
-  const UpdateDetectStatus = async(action:number, timer:number)=>{
+  const UpdateDetectStatus = async (action: number, timer: number) => {
     setSubmitLoading(true);
     setAction(action);
     setTimer(timer);
@@ -563,7 +563,7 @@ const Index: React.FC<{}> = () => {
                   </Form.Item>
                 </Form>
               </TabPane>
-              <TabPane tab="人脸识别登录" key="2" disabled={faceLoginDisable}>
+              {/* <TabPane tab="人脸识别登录" key="2" disabled={faceLoginDisable}>
                 <Form
                   name="basic2"
                   className="form-box"
@@ -585,25 +585,27 @@ const Index: React.FC<{}> = () => {
                       placeholder="请输入用户名"
                     />
                   </Form.Item>
-                  {/* 加载摄像头 */}
-                  {/* <Form.Item hidden={!itemShow}>
-                    <div>
-                      <span style={{color:classColor(action)}}>{actionText(action)}</span>
-                      <span hidden={!timerShow}>{Math.round(timer/1000)}</span>
-                    </div>
-                  </Form.Item> */}
+                  
                   <Form.Item>
                     {!whetherIE.current ? (<video ref={video} width="382" height="200"></video>) : (<FrameFaceLogin faceCompareEvent2={IELiveDetectFinish2} faceCompareEvent={IELiveDetectFinish} faceDetectStatusEvent = {UpdateDetectStatus}/>)}
-                    {/* <video ref={video} width="382" height="200"></video> */}
                   </Form.Item>
                   <Form.Item>
-                    {/* onClick={() => {hanleFaceSubmit(null, null);}} */}
+                    
                     <Button type="primary" className="w100" loading={submitLoading} htmlType="submit">
                       {submitLoading ? actionText(action, Math.round(timer/1000)) : '登 录'}
                     </Button>
                   </Form.Item>
                 </Form>
-              </TabPane>
+              </TabPane> */}
+              {/* 加载摄像头 */}
+              {/* <Form.Item hidden={!itemShow}>
+                    <div>
+                      <span style={{color:classColor(action)}}>{actionText(action)}</span>
+                      <span hidden={!timerShow}>{Math.round(timer/1000)}</span>
+                    </div>
+                  </Form.Item> */}
+              {/* <video ref={video} width="382" height="200"></video> */}
+              {/* onClick={() => {hanleFaceSubmit(null, null);}} */}
             </Tabs>
           </div>
         </div>