在线监督、事后监督开发基本完成

src/pages/VideoMonitor/Online/components/OnlineSupervision.tsx

@@ -1,18 +1,11 @@
 import { isNotEmpty } from '@/utils/CommonUtils';
-import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
+import ProTable, { ProColumns } from '@ant-design/pro-table';
 import { Button, Spin, message } from 'antd';
 import React, { useRef, useState } from 'react';
 import { useHistory } from 'umi';
 import ViewModal from '../../ViewModal';
 import { getPage } from '../../service';
 
-interface ViewDetailsProps {
-    entity?: {
-        projectName?:string|null,
-        projectNumber?:string|null,
-    } | null,
-    visibleDefault?:boolean| false,
-}
 /**
  * 在线监督列表
  * @returns 
@@ -20,21 +13,18 @@ interface ViewDetailsProps {
 const OnlineSupervision: React.FC<{}> = () => {
     const [spin, spinSet] = useState<boolean>(false);
     const [visible, setVisible] = useState<boolean>(false);
-    const [record, setRecord] = useState<any[]>([]);
     //查询分页数据
     const [pageData, pageDataSet] = useState<any>({
         pageNo: 1,
         pageSize: 10
     });
     const history = useHistory();
-    const ref = useRef<ActionType>();
+    const viewModalRef = useRef(null);
-
     //查看详情
     const viewDetails = (record: any) => {
         setVisible(true);
-        setRecord(record);
+        viewModalRef.current?.InitData(record.id);
     }
-
     //关闭
     const closeViewDetails = () => {
         setVisible(false);
@@ -157,7 +147,6 @@ const OnlineSupervision: React.FC<{}> = () => {
                     options={false}
                     bordered={false}
                     size='small'
-                    actionRef={ref}
                     search={{ labelWidth: 'auto', span: 6 }}
                     loading={false}
                     request={async (params) => {
@@ -195,7 +184,7 @@ const OnlineSupervision: React.FC<{}> = () => {
                     rowKey={"id"}
                 />
             </div>
-            <ViewModal modalVisible = {visible} onCancel = {()=> closeViewDetails()} data = {record}/>
+            <ViewModal modalVisible = {visible} onCancel = {()=> closeViewDetails()} ref = {viewModalRef}/>
         </Spin>
     )
 }

src/pages/VideoMonitor/Online/components/ReservedItems.tsx

@@ -1,6 +1,6 @@
 import { isNotEmpty } from '@/utils/CommonUtils';
-import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
+import ProTable, { ProColumns } from '@ant-design/pro-table';
-import { Button, Spin, Modal } from 'antd';
+import { Button, Spin } from 'antd';
 import React, { useRef, useState } from 'react';
 import { useHistory } from 'umi';
 import ViewModal from '../../ViewModal';
@@ -14,19 +14,18 @@ const ReservedItems: React.FC<{}> = () => {
 
     const [spin, spinSet] = useState<boolean>(false);
     const [visible, setVisible] = useState(false);
-    const [record, setRecord] = useState<any[]>([]);
     //查询分页数据
     const [pageData, pageDataSet] = useState<any>({
         pageNo: 1,
         pageSize: 10
     });
     const history = useHistory();
-    const ref = useRef<ActionType>();
+    const viewModalRef = useRef(null);
     
     //查看详情
     const viewDetails = (record: any) => {
         setVisible(true);
-        setRecord(record);
+        viewModalRef.current?.InitData(record.id);
     }
 
     //关闭
@@ -137,7 +136,6 @@ const ReservedItems: React.FC<{}> = () => {
                     options={false}
                     bordered={false}
                     size='small'
-                    actionRef={ref}
                     search={{ labelWidth: 'auto', span: 6 }}
                     loading={false}
                     request={async (params) => {
@@ -175,7 +173,7 @@ const ReservedItems: React.FC<{}> = () => {
                     rowKey={"id"}
                 />
             </div>
-            <ViewModal modalVisible = {visible} onCancel = {()=> closeViewDetails()} data = {record}/>
+            <ViewModal modalVisible = {visible} onCancel = {()=> closeViewDetails()} ref = {viewModalRef}/>
         </Spin>
     )
 }

src/pages/VideoMonitor/Online/service.ts

@@ -0,0 +1,11 @@
+import request from '@/utils/request';
+/**
+ * 查询数据并分页
+ * @param params 
+ */
+export async function getPage(params?: any) {
+  return request('/api/biz-service-ebtp-evaluation//v1/eval/room/reserve/supervise/list', {
+    method: 'POST',
+    data: params,
+  });
+}

src/pages/VideoMonitor/Post/index.tsx

@@ -1,5 +1,5 @@
 import { isNotEmpty } from '@/utils/CommonUtils';
-import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
+import ProTable, { ProColumns } from '@ant-design/pro-table';
 import { Button, Spin, message } from 'antd';
 import React, { useRef, useState } from 'react';
 import { useHistory } from 'umi';
@@ -13,19 +13,18 @@ import { getPage } from '../service';
 const PostSupervision: React.FC<{}> = () => {
     const [spin, spinSet] = useState<boolean>(false);
     const [visible, setVisible] = useState<boolean>(false);
-    const [record, setRecord] = useState<any[]>([]);
     //查询分页数据
     const [pageData, pageDataSet] = useState<any>({
         pageNo: 1,
         pageSize: 10
     });
     const history = useHistory();
-    const ref = useRef<ActionType>();
+    const viewModalRef = useRef(null);
 
     //查看详情
     const viewDetails = (record: any) => {
         setVisible(true);
-        setRecord(record);
+        viewModalRef.current?.InitData(record.id);
     }
 
     //关闭
@@ -150,7 +149,6 @@ const PostSupervision: React.FC<{}> = () => {
                     options={false}
                     bordered={false}
                     size='small'
-                    actionRef={ref}
                     search={{ labelWidth: 'auto', span: 6 }}
                     loading={false}
                     request={async (params) => {
@@ -188,7 +186,7 @@ const PostSupervision: React.FC<{}> = () => {
                     rowKey={"id"}
                 />
             </div>
-            <ViewModal modalVisible = {visible} onCancel = {()=> closeViewDetails()} data = {record}/>
+            <ViewModal modalVisible = {visible} onCancel = {()=> closeViewDetails()} ref = {viewModalRef}/>
         </Spin>
     )
 }

src/pages/VideoMonitor/ViewModal.tsx

@@ -1,18 +1,38 @@
-import { Spin, Modal, Descriptions, Table } from 'antd';
+import { Spin, Modal, Descriptions, Table, message } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
-import React, { useState } from 'react';
+import React, { useState, useImperativeHandle, forwardRef } from 'react';
+import { getReservationInfo, getReportInfo } from './service';
 
 interface ViewDetailsProps {
     modalVisible: boolean; //开启关闭控制
     onCancel: () => void; //关闭方法传入
-    data: any //数据传入
+}
+
+interface ReportInfo {
+    expertAmount ?: string;
+    purchaseExpertAmount ?: string;
+    manageAmount ?: string;
+    userList ?: DataType[];
 }
 
 interface DataType {
-    key: string;
+    key ?: string;
-    userName: string;
+    userName ?: string;
-    reportStatus: string;
+    status: number;
-    reportTime: string;
+    reportStatus ?: string;
+    signDate ?: string;
+}
+
+interface ReservationInfo {
+    projectName ?: string;
+    projectNum ?: string;
+    packageNames ?: string;
+    areaName ?: string;
+    reserveStartDate ?: string;
+    reserveEndDate ?: string;
+    status: number;
+    realStartDate ?: string;
+    realEndDate ?: string;
 }
 
 const columns: ColumnsType<DataType> = [
@@ -33,8 +53,8 @@ const columns: ColumnsType<DataType> = [
     },
     {
       title: '报到时间',
-      dataIndex: 'reportTime',
+      dataIndex: 'signDate',
-      key: 'reportTime',
+      key: 'signDate',
     },
   ];
 
@@ -42,53 +62,87 @@ const columns: ColumnsType<DataType> = [
  * 详情弹出层
  * @returns 
  */
- const ViewDetails: React.FC<ViewDetailsProps> = (props) => {
+ const ViewDetails: React.FC<ViewDetailsProps> = forwardRef((props,ref) => {
-        const {modalVisible, onCancel, data} = props;
+        const {modalVisible, onCancel} = props;
-        const [spin, spinSet] = useState<boolean>(false);
+        const [initReservationInfo, setInitReservationInfo] = useState<boolean>(false);
-        const repostData :DataType[] = [
+        const [initReportInfo, setInitReportInfo] = useState<boolean>(false);
-            {
+        const [reservationInfo, setReservationInfo] = useState<ReservationInfo>();
-            key: '1',
+        const [reportInfo, setReportInfo] = useState<ReportInfo>();
-            userName: '1(0001)',
+        const InitData = (id:string) => {
-            reportStatus: '已报道',
+            setInitReservationInfo(true);
-            reportTime: '2022-07-02 15:22',
+            setInitReportInfo(true);
-            },
+            //获取预约信息
-            {
+            getReservationInfo(id)
-                key: '2',
+            .then((res) => {
-                userName: '2(0002)',
+                if (res.code == 200) {
-                reportStatus: '已报道',
+                    setReservationInfo(res.data);
-                reportTime: '2022-07-02 15:22',
+                }else{
-            },
+                    message.error(res.message);
-            {
+                }
-                key: '3',
+            })
-                userName: '3(0003)',
+            .catch(res => {
-                reportStatus: '已报道',
+                message.error(res.message);
-                reportTime: '2022-07-02 15:22',
+            })
-            },
+            .finally(() => {
-            {
+                setInitReservationInfo(false);
-                key: '4',
+            });
-                userName: '4(0004)',
+            //获取报道信息
-                reportStatus: '未报道',
+            getReportInfo(id)
-                reportTime: '2022-07-02 15:22',
+            .then((res) => {
-            },
+                if (res.code == 200) {
-            {
+                    let _data: DataType[] = res.data.userList;
-                key: '5',
+                    _data?.forEach((item, index) =>{
-                userName: '5(0005)',
+                        item.key = (index + 1).toString();
-                reportStatus: '已报道',
+                        item.reportStatus = getReportStatus(item.status);
-                reportTime: '2022-07-02 15:22',
+                    })
-            },
+                    setReportInfo(res.data);
-        ];
+                }else{
-        const getStateName = (state:any) => {
+                    message.error(res.message);
-            let result = null;
+                }
+            })
+            .catch(res => {
+                message.error(res.message);
+            })
+            .finally(() => {
+                setInitReportInfo(false);
+            })
+        }
+        useImperativeHandle(ref, () => ({
+            InitData,
+        }));
+        const getStatus = (state: number) => {
+            let result = '';
             switch(state){
-                case 0:
+                case -1: 
-                    result = '未开始';
+                    result = '待确认';
                     break;
-                case 1:
+                case 0: 
-                    result = '评标中';
+                    result = '未开启';
                     break;
-                case 2:
+                case 1: 
+                    result = '进行中';
+                    break;
+                case 2: 
                     result = '已结束';
                     break;
+                case 3: 
+                    result = '已取消';
+                    break;
+                case 4: 
+                    result = '结束为使用';
+                    break;   
+            }
+            return result;
+        }
+        const getReportStatus = (state:number) => {
+            let result = '';
+            switch(state){
+                case 0: 
+                    result = '未报道';
+                    break;
+                case 1: 
+                    result = '已报道';
+                    break;   
             }
             return result;
         }
@@ -98,30 +152,30 @@ const columns: ColumnsType<DataType> = [
                     onCancel = {() => {onCancel()}}        
                     title={<div>
                         <span>详情</span>
-                        <span style={{textAlign: "center",width: "100%",position: "absolute",left: 0}}>{data?.projectName}</span>
+                        <span style={{textAlign: "center",width: "100%",position: "absolute",left: 0}}>{reservationInfo?.projectName}</span>
                         </div>}
                     footer={null}
                     width={1000}
                 >
                     
-                    <Spin spinning={spin}>
+                    <Spin spinning={initReservationInfo || initReportInfo}>
                         <Descriptions>
-                            <Descriptions.Item label="项目编号">{data?.projectNumber}</Descriptions.Item>
+                            <Descriptions.Item label="项目编号">{reservationInfo?.projectNum}</Descriptions.Item>
-                            <Descriptions.Item label="标段名称">{data?.sectionName}</Descriptions.Item>
+                            <Descriptions.Item label="标段名称">{reservationInfo?.packageNames}</Descriptions.Item>
-                            <Descriptions.Item label="评标室名称">{data?.areaRoomName}</Descriptions.Item>
+                            <Descriptions.Item label="评标室名称">{reservationInfo?.areaName}</Descriptions.Item>
-                            <Descriptions.Item label="评标状态">{getStateName(data?.state)}</Descriptions.Item>
+                            <Descriptions.Item label="评标状态">{reservationInfo?getStatus(reservationInfo?.status):''}</Descriptions.Item>
-                            <Descriptions.Item label="预计开始时间">{data?.startTime}</Descriptions.Item>
+                            <Descriptions.Item label="预计开始时间">{reservationInfo?.reserveStartDate}</Descriptions.Item>
-                            <Descriptions.Item label="预计结束时间">{data?.endTime}</Descriptions.Item>
+                            <Descriptions.Item label="预计结束时间">{reservationInfo?.reserveEndDate}</Descriptions.Item>
-                            <Descriptions.Item label="开启评标室时间">2022-07-13 12:30</Descriptions.Item>
+                            <Descriptions.Item label="开启评标室时间">{reservationInfo?.realStartDate}</Descriptions.Item>
-                            <Descriptions.Item label="关闭评标室时间" span={2}>2022-07-15 15:00</Descriptions.Item>
+                            <Descriptions.Item label="关闭评标室时间" span={2}>{reservationInfo?.realEndDate}</Descriptions.Item>
-                            <Descriptions.Item label="专家人数">5人</Descriptions.Item>
+                            <Descriptions.Item label="专家人数">{reportInfo?.expertAmount}人</Descriptions.Item>
-                            <Descriptions.Item label="采购人代表">2人</Descriptions.Item>
+                            <Descriptions.Item label="采购人代表">{reportInfo?.purchaseExpertAmount}人</Descriptions.Item>
-                            <Descriptions.Item label="招标代理机构">1人</Descriptions.Item>
+                            <Descriptions.Item label="招标代理机构">{reportInfo?.manageAmount}人</Descriptions.Item>
                         </Descriptions>
                         <h3>报道信息</h3>
-                        <Table columns={columns} dataSource={repostData} />
+                        <Table columns={columns} dataSource={reportInfo?.userList} />
                     </Spin>
             </Modal>)
-}
+})
 export default ViewDetails;
 

src/pages/VideoMonitor/service.ts

@@ -4,8 +4,28 @@ import request from '@/utils/request';
  * @param params 
  */
 export async function getPage(params?: any) {
-  return request('/api/biz-service-ebtp-evaluation//v1/eval/room/reserve/supervise/list', {
+  return request('/api/biz-service-ebtp-evaluation/v1/eval/room/reserve/supervise/list', {
     method: 'POST',
     data: params,
   });
+}
+
+/**
+ * 查询预约信息
+ * @param params 
+ */
+ export async function getReservationInfo(params?: string) {
+  return request('/api/biz-service-ebtp-evaluation/v1/eval/room/reserve/' + params, {
+    method: 'GET'
+  });
+}
+
+/**
+ * 查询报道信息
+ * @param params 
+ */
+ export async function getReportInfo(params?: string) {
+  return request('/api/biz-service-ebtp-evaluation/v1/eleceval/user/number/report/' + params, {
+    method: 'GET'
+  });
 }