liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'uat-video-monitor' into 'release_electronic_bid_evaluation_room'

Browse Source 
8.26 电子评标室 在线监督 事后监督

See merge request eshop/fe_service_ebtp_frontend!248
This commit is contained in:
周建龙
2022-08-26 13:39:06 +08:00
parent e489ef2f7d c0e2564b4a
commit 90d9860fd7
9 changed files with 840 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
config/router.config.ts
View File

@ -327,6 +327,22 @@ export default [
},
]
},
//在线监督和事后监督
{
path: '/VideoMonitor',
routes: [
{
name: 'Online',
path: '/VideoMonitor/Online',
component: './VideoMonitor/Online',
},
{
name: 'Post',
path: '/VideoMonitor/Post',
component: './VideoMonitor/Post',
},
],
},
{//账号信息管理-代理机构管理员
name: 'Account',
icon: 'form',

1
config/router_transfer.ts
View File

@ -102,5 +102,4 @@ export default [
},
],
},
]

192
src/pages/VideoMonitor/Online/components/OnlineSupervision.tsx Normal file
View File

@ -0,0 +1,192 @@
import { isNotEmpty } from '@/utils/CommonUtils';
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';
/**
* 在线监督列表
* @returns
*/
const OnlineSupervision: React.FC<{}> = () => {
const [spin, spinSet] = useState<boolean>(false);
const [visible, setVisible] = useState<boolean>(false);
//查询分页数据
const [pageData, pageDataSet] = useState<any>({
pageNo: 1,
pageSize: 10
});
const history = useHistory();
const viewModalRef = useRef(null);
//查看详情
const viewDetails = (record: any) => {
setVisible(true);
viewModalRef.current?.InitData(record.id);
}
//关闭
const closeViewDetails = () => {
setVisible(false);
}
//在线监督
function supervision(record: any): void {
window.open("/MonitorScreen/ProjectMonitorRoom?monitorId=" + record.id);
}
const columns: ProColumns<any>[] = [
{
valueType: 'index',
align: 'center',
hideInSearch: true,
},
{
title: '项目名称',
align: 'center',
dataIndex: 'projectName',
width: '20%',
hideInSearch: false,
},
{
title: '项目编号',
align: 'center',
dataIndex: 'projectNum',
hideInSearch: true,
},
{
title: '标段',
align: 'center',
dataIndex: 'packageNames',
hideInSearch: true,
},
{
title: '评审室名称',
align: 'center',
dataIndex: 'areaName',
hideInSearch: false,
width: '10%',
},
{
title: '预计评标开始时间',
align: 'center',
dataIndex: 'reserveStartDate',
hideInSearch: true,
width: '15%',
},
{
title: '预计评标结束时间',
align: 'center',
dataIndex: 'reserveEndDate',
hideInSearch: true,
width: '9.5%',
},
{
title: '状态',
align: 'center',
dataIndex: 'status',
hideInSearch: true,
width: '4.5%',
valueEnum: {
'-1': {
text: '待确认'
},
'0': {
text: '未开启'
},
'1': {
text: '进行中'
},
'2': {
text: '已结束'
},
'3': {
text: '已取消'
},
'4': {
text: '结束未使用'
},
}
},
{
title: '操作',
align: 'center',
valueType: 'option',
width: '9%',
render: (_: any, record: any) =>
(
<>
<Button
key="viewDetails"
type="text"
onClick={() =>
viewDetails(record)
}
>
查看详情
</Button>
<Button
key="supervision"
type="text"
onClick={() =>
supervision(record)
}
>
在线监督
</Button>
</>
)
},
]
return (
<Spin spinning={spin}>
<div className="zjl-entrust confirm">
<ProTable
columns={columns}
options={false}
bordered={false}
size='small'
search={{ labelWidth: 'auto', span: 6 }}
loading={false}
request={async (params) => {
spinSet(true);
return await getPage({
...params,
basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
queryType: 1,
areaRoomName: params.areaName
}).then((res) => {
const result = {
data: res.data.records,
total: res.data.total,
success: res.success,
pageSize: res.data.size,
current: res.data.current
}
return result;
}).finally(() => {
isNotEmpty(window.location.search) && history.push(window.location.pathname);
spinSet(false);
})
}
}
pagination={{
defaultPageSize: 10,
pageSizeOptions: [10, 20, 30, 50],
defaultCurrent: 1,
size: "small",
showSizeChanger: true,
onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
}}
onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }) }}
rowKey={"id"}
/>
</div>
<ViewModal modalVisible = {visible} onCancel = {()=> closeViewDetails()} ref = {viewModalRef}/>
</Spin>
)
}
export default OnlineSupervision;

181
src/pages/VideoMonitor/Online/components/ReservedItems.tsx Normal file
View File

@ -0,0 +1,181 @@
import { isNotEmpty } from '@/utils/CommonUtils';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import { Button, Spin } from 'antd';
import React, { useRef, useState } from 'react';
import { useHistory } from 'umi';
import ViewModal from '../../ViewModal';
import { getPage } from '../../service';
/**
* 预约项目列表
* @returns
*/
const ReservedItems: React.FC<{}> = () => {
const [spin, spinSet] = useState<boolean>(false);
const [visible, setVisible] = useState(false);
//查询分页数据
const [pageData, pageDataSet] = useState<any>({
pageNo: 1,
pageSize: 10
});
const history = useHistory();
const viewModalRef = useRef(null);
//查看详情
const viewDetails = (record: any) => {
setVisible(true);
viewModalRef.current?.InitData(record.id);
}
//关闭
const closeViewDetails = () => {
setVisible(false);
}
const columns: ProColumns<any>[] = [
{
valueType: 'index',
align: 'center',
hideInSearch: true,
},
{
title: '项目名称',
align: 'center',
dataIndex: 'projectName',
width: '20%',
hideInSearch: false,
},
{
title: '项目编号',
align: 'center',
dataIndex: 'projectNum',
hideInSearch: true,
},
{
title: '标段',
align: 'center',
dataIndex: 'packageNames',
hideInSearch: true,
},
{
title: '评审室名称',
align: 'center',
dataIndex: 'areaName',
hideInSearch: false,
width: '10%',
},
{
title: '预计评标开始时间',
align: 'center',
dataIndex: 'reserveStartDate',
hideInSearch: true,
width: '15%',
},
{
title: '预计评标结束时间',
align: 'center',
dataIndex: 'reserveEndDate',
hideInSearch: true,
width: '9.5%',
},
{
title: '状态',
align: 'center',
dataIndex: 'status',
hideInSearch: true,
width: '4.5%',
valueEnum: {
'-1': {
text: '待确认'
},
'0': {
text: '未开启'
},
'1': {
text: '进行中'
},
'2': {
text: '已结束'
},
'3': {
text: '已取消'
},
'4': {
text: '结束未使用'
},
}
},
{
title: '操作',
align: 'center',
valueType: 'option',
width: '4.5%',
render: (_: any, record: any) =>
(
<>
<Button
key="viewDetails"
type="text"
onClick={() =>
viewDetails(record)
}
>
查看详情
</Button>
</>
)
},
]
return (
<Spin spinning={spin}>
<div className="zjl-entrust confirm">
<ProTable
columns={columns}
options={false}
bordered={false}
size='small'
search={{ labelWidth: 'auto', span: 6 }}
loading={false}
request={async (params) => {
spinSet(true);
return await getPage({
...params,
basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
queryType: 0,
areaRoomName: params.areaName
}).then((res) => {
const result = {
data: res.data.records,
total: res.data.total,
success: res.success,
pageSize: res.data.size,
current: res.data.current
}
return result;
}).finally(() => {
isNotEmpty(window.location.search) && history.push(window.location.pathname);
spinSet(false);
})
}
}
pagination={{
defaultPageSize: 10,
pageSizeOptions: [10, 20, 30, 50],
defaultCurrent: 1,
size: "small",
showSizeChanger: true,
onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
}}
onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }) }}
rowKey={"id"}
/>
</div>
<ViewModal modalVisible = {visible} onCancel = {()=> closeViewDetails()} ref = {viewModalRef}/>
</Spin>
)
}
export default ReservedItems;

34
src/pages/VideoMonitor/Online/index.tsx Normal file
View File

@ -0,0 +1,34 @@
import { Card, Radio } from 'antd';
import React, { useState } from 'react';
import OnlineSupervision from './components/OnlineSupervision';
import ReservedItems from './components/ReservedItems';
/**
* 在线监督
* @returns
*/
const OnlineIndex: React.FC<{}> = () => {
//radio value
const [mode, setMode] = useState<string>('OnlineSupervision');
const handleModeChange = (e: any) => {
const mode = e.target.value;
setMode(mode);
};
return (
<Card style={{ borderRadius: 6 }} bodyStyle={{ padding: '16px 24px 0px' }}>
<Radio.Group onChange={handleModeChange} value={mode} buttonStyle="solid">
<Radio.Button value="OnlineSupervision">在线监督</Radio.Button>
<Radio.Button value="ReservedItems">预约项目</Radio.Button>
</Radio.Group>
{
mode === 'OnlineSupervision' ? (
<OnlineSupervision />
) : (
<ReservedItems />
)
}
</Card>
)
}
export default OnlineIndex;

11
src/pages/VideoMonitor/Online/service.ts Normal file
View File

@ -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,
});
}

194
src/pages/VideoMonitor/Post/index.tsx Normal file
View File

@ -0,0 +1,194 @@
import { isNotEmpty } from '@/utils/CommonUtils';
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';
/**
* 事后监督列表
* @returns
*/
const PostSupervision: React.FC<{}> = () => {
const [spin, spinSet] = useState<boolean>(false);
const [visible, setVisible] = useState<boolean>(false);
//查询分页数据
const [pageData, pageDataSet] = useState<any>({
pageNo: 1,
pageSize: 10
});
const history = useHistory();
const viewModalRef = useRef(null);
//查看详情
const viewDetails = (record: any) => {
setVisible(true);
viewModalRef.current?.InitData(record.id);
}
//关闭
const closeViewDetails = () => {
setVisible(false);
}
//评标监控回看
function reviewMonitor(record: any): void {
window.open("/MonitorScreen/ProjectMonitorRoom?monitorId=" + record.id);
}
const columns: ProColumns<any>[] = [
{
valueType: 'index',
align: 'center',
hideInSearch: true,
},
{
title: '项目名称',
align: 'center',
dataIndex: 'projectName',
width: '20%',
hideInSearch: false,
},
{
title: '项目编号',
align: 'center',
dataIndex: 'projectNum',
hideInSearch: true,
},
{
title: '标段',
align: 'center',
dataIndex: 'packageNames',
hideInSearch: true,
},
{
title: '评审室名称',
align: 'center',
dataIndex: 'areaName',
hideInSearch: false,
width: '10%',
},
{
title: '预计评标开始时间',
align: 'center',
dataIndex: 'reserveStartDate',
hideInSearch: true,
width: '15%',
},
{
title: '预计评标结束时间',
align: 'center',
dataIndex: 'reserveEndDate',
hideInSearch: true,
width: '9.5%',
},
{
title: '状态',
align: 'center',
dataIndex: 'status',
hideInSearch: true,
width: '4.5%',
valueEnum: {
'-1': {
text: '待确认'
},
'0': {
text: '未开启'
},
'1': {
text: '进行中'
},
'2': {
text: '已结束'
},
'3': {
text: '已取消'
},
'4': {
text: '结束未使用'
},
}
},
{
title: '操作',
align: 'center',
valueType: 'option',
width: '10%',
render: (_: any, record: any) =>
(
<>
<Button
key="viewDetails"
type="text"
onClick={() =>
viewDetails(record)
}
>
查看详情
</Button>
<Button
key="reviewMonitor"
type="text"
onClick={() =>
reviewMonitor(record)
}
>
评标监控回看
</Button>
</>
)
},
]
return (
<Spin spinning={spin}>
<div className="zjl-entrust confirm">
<ProTable
columns={columns}
options={false}
bordered={false}
size='small'
search={{ labelWidth: 'auto', span: 6 }}
loading={false}
request={async (params) => {
spinSet(true);
return await getPage({
...params,
basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
queryType: 2,
areaRoomName: params.areaName
}).then((res) => {
const result = {
data: res.data.records,
total: res.data.total,
success: res.success,
pageSize: res.data.size,
current: res.data.current
}
return result;
}).finally(() => {
isNotEmpty(window.location.search) && history.push(window.location.pathname);
spinSet(false);
})
}
}
pagination={{
defaultPageSize: 10,
pageSizeOptions: [10, 20, 30, 50],
defaultCurrent: 1,
size: "small",
showSizeChanger: true,
onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
}}
onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }) }}
rowKey={"id"}
/>
</div>
<ViewModal modalVisible = {visible} onCancel = {()=> closeViewDetails()} ref = {viewModalRef}/>
</Spin>
)
}
export default PostSupervision;

181
src/pages/VideoMonitor/ViewModal.tsx Normal file
View File

@ -0,0 +1,181 @@
import { Spin, Modal, Descriptions, Table, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useState, useImperativeHandle, forwardRef } from 'react';
import { getReservationInfo, getReportInfo } from './service';
interface ViewDetailsProps {
modalVisible: boolean; //开启关闭控制
onCancel: () => void; //关闭方法传入
}
interface ReportInfo {
expertAmount ?: string;
purchaseExpertAmount ?: string;
manageAmount ?: string;
userList ?: DataType[];
}
interface DataType {
key ?: string;
userName ?: string;
status: number;
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> = [
{
title: '序号',
dataIndex: 'key',
key: 'key',
},
{
title: '人员',
dataIndex: 'userName',
key: 'userName',
},
{
title: '报到状态',
dataIndex: 'reportStatus',
key: 'reportStatus',
},
{
title: '报到时间',
dataIndex: 'signDate',
key: 'signDate',
},
];
/**
* 详情弹出层
* @returns
*/
const ViewDetails: React.FC<ViewDetailsProps> = forwardRef((props,ref) => {
const {modalVisible, onCancel} = props;
const [initReservationInfo, setInitReservationInfo] = useState<boolean>(false);
const [initReportInfo, setInitReportInfo] = useState<boolean>(false);
const [reservationInfo, setReservationInfo] = useState<ReservationInfo>();
const [reportInfo, setReportInfo] = useState<ReportInfo>();
const InitData = (id:string) => {
setInitReservationInfo(true);
setInitReportInfo(true);
//获取预约信息
getReservationInfo(id)
.then((res) => {
if (res.code == 200) {
setReservationInfo(res.data);
}else{
message.error(res.message);
}
})
.catch(res => {
message.error(res.message);
})
.finally(() => {
setInitReservationInfo(false);
});
//获取报道信息
getReportInfo(id)
.then((res) => {
if (res.code == 200) {
let _data: DataType[] = res.data.userList;
_data?.forEach((item, index) =>{
item.key = (index + 1).toString();
item.reportStatus = getReportStatus(item.status);
})
setReportInfo(res.data);
}else{
message.error(res.message);
}
})
.catch(res => {
message.error(res.message);
})
.finally(() => {
setInitReportInfo(false);
})
}
useImperativeHandle(ref, () => ({
InitData,
}));
const getStatus = (state: number) => {
let result = '';
switch(state){
case -1:
result = '待确认';
break;
case 0:
result = '未开启';
break;
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;
}
return (<Modal
destroyOnClose = {true}
visible = {modalVisible}
onCancel = {() => {onCancel()}}
title={<div>
<span>详情</span>
<span style={{textAlign: "center",width: "100%",position: "absolute",left: 0}}>{reservationInfo?.projectName}</span>
</div>}
footer={null}
width={1000}
>
<Spin spinning={initReservationInfo || initReportInfo}>
<Descriptions>
<Descriptions.Item label="项目编号">{reservationInfo?.projectNum}</Descriptions.Item>
<Descriptions.Item label="标段名称">{reservationInfo?.packageNames}</Descriptions.Item>
<Descriptions.Item label="评标室名称">{reservationInfo?.areaName}</Descriptions.Item>
<Descriptions.Item label="评标状态">{reservationInfo?getStatus(reservationInfo?.status):''}</Descriptions.Item>
<Descriptions.Item label="预计开始时间">{reservationInfo?.reserveStartDate}</Descriptions.Item>
<Descriptions.Item label="预计结束时间">{reservationInfo?.reserveEndDate}</Descriptions.Item>
<Descriptions.Item label="开启评标室时间">{reservationInfo?.realStartDate}</Descriptions.Item>
<Descriptions.Item label="关闭评标室时间" span={2}>{reservationInfo?.realEndDate}</Descriptions.Item>
<Descriptions.Item label="专家人数">{reportInfo?.expertAmount}人</Descriptions.Item>
<Descriptions.Item label="采购人代表">{reportInfo?.purchaseExpertAmount}人</Descriptions.Item>
<Descriptions.Item label="招标代理机构">{reportInfo?.manageAmount}人</Descriptions.Item>
</Descriptions>
<h3>报道信息</h3>
<Table columns={columns} dataSource={reportInfo?.userList} />
</Spin>
</Modal>)
})
export default ViewDetails;

31
src/pages/VideoMonitor/service.ts Normal file
View File

@ -0,0 +1,31 @@
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,
});
}
/**
* 查询预约信息
* @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'
});
}