diff --git a/src/pages/ElecEvaluation/Monitor/Room/index.tsx b/src/pages/ElecEvaluation/Monitor/Room/index.tsx
new file mode 100644
index 0000000..7c9a017
--- /dev/null
+++ b/src/pages/ElecEvaluation/Monitor/Room/index.tsx
@@ -0,0 +1,347 @@
+import { Button, Col, Input, List, message, PaginationProps, Row, Tag, Tooltip } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import '../style.less'
+import { proviceEnum, ScreenTitle } from '../Home';
+import { isNotEmpty } from '@/utils/CommonUtils';
+import { history } from "umi";
+import { getMonitorList } from '../service';
+import content_title from '@/assets/screen/content_title.png'
+import errorIcon from '@/assets/monitor/error-icon.png'
+import arrowLeftCircleFill from '@/assets/monitor/arrow-left-circle-fill.png'
+import arrowRightCircleFill from '@/assets/monitor/arrow-right-circle-fill.png'
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+export const bidStatusMap = ["准备评标", "正在评标", "评标结束"];
+const statusColorMap = ["bidding-text-order", "bidding-text-going", "bidding-text-ending"];
+const provinceList = [{
+ "provincesRemark": "集团",
+ "provincesNumber": "001000",
+}, {
+ "provincesNumber": "0011",
+ "provincesRemark": "北京",
+},
+{
+ "provincesNumber": "0012",
+ "provincesRemark": "天津",
+},
+{
+ "provincesNumber": "0013",
+ "provincesRemark": "河北",
+},
+{
+ "provincesNumber": "0014",
+ "provincesRemark": "山西",
+},
+{
+ "provincesNumber": "0015",
+ "provincesRemark": "内蒙古",
+},
+{
+ "provincesNumber": "0021",
+ "provincesRemark": "辽宁",
+},
+{
+ "provincesNumber": "0022",
+ "provincesRemark": "吉林",
+},
+{
+ "provincesNumber": "0023",
+ "provincesRemark": "黑龙江",
+},
+{
+ "provincesNumber": "0031",
+ "provincesRemark": "上海",
+},
+{
+ "provincesNumber": "0032",
+ "provincesRemark": "江苏",
+},
+{
+ "provincesNumber": "0033",
+ "provincesRemark": "浙江",
+},
+{
+ "provincesNumber": "0034",
+ "provincesRemark": "安徽",
+},
+{
+ "provincesNumber": "0035",
+ "provincesRemark": "福建",
+},
+{
+ "provincesNumber": "0036",
+ "provincesRemark": "江西",
+},
+{
+ "provincesNumber": "0037",
+ "provincesRemark": "山东",
+},
+{
+ "provincesNumber": "0041",
+ "provincesRemark": "河南",
+},
+{
+ "provincesNumber": "0042",
+ "provincesRemark": "湖北",
+},
+{
+ "provincesNumber": "0043",
+ "provincesRemark": "湖南",
+},
+{
+ "provincesNumber": "0044",
+ "provincesRemark": "广东",
+},
+{
+ "provincesNumber": "0045",
+ "provincesRemark": "广西",
+},
+{
+ "provincesNumber": "0046",
+ "provincesRemark": "海南",
+},
+{
+ "provincesNumber": "0050",
+ "provincesRemark": "重庆",
+},
+{
+ "provincesNumber": "0051",
+ "provincesRemark": "四川",
+},
+{
+ "provincesNumber": "0052",
+ "provincesRemark": "贵州",
+},
+{
+ "provincesNumber": "0053",
+ "provincesRemark": "云南",
+},
+{
+ "provincesNumber": "0054",
+ "provincesRemark": "西藏",
+},
+{
+ "provincesNumber": "0061",
+ "provincesRemark": "陕西",
+},
+{
+ "provincesNumber": "0062",
+ "provincesRemark": "甘肃",
+},
+{
+ "provincesNumber": "0063",
+ "provincesRemark": "青海",
+},
+{
+ "provincesNumber": "0064",
+ "provincesRemark": "宁夏",
+},
+{
+ "provincesNumber": "0065",
+ "provincesRemark": "新疆",
+},];
+
+export const homeClick = () => {
+ history.push("/ElecMonitor/Home");
+}
+export const previousClick = () => {
+ history.goBack();
+}
+
+const MonitorException: React.FC<{}> = () => {
+ //状态选择
+ const [selectBtn, setSelectBtn] = useState
("");
+ const selectStatus = useRef("");
+ //当前选中的省分
+ const [selectedTag, setSelectedTag] = useState("");
+ const selectProvince = useRef("");
+ //当前页码
+ const pageNo = useRef(1);
+ //总数
+ const [totalItem, setTotalItem] = useState(0);
+ //当前页数据
+ const [listData, setListData] = useState([]);
+ //all expand 展开收起
+ const [allExpand, setAllExpand] = useState(false);
+ //关键字搜索条件
+ const search = useRef("");
+ //定时刷新间隔
+ const _time = 60000;
+ const { CheckableTag } = Tag;
+ const handleChange = (tag: string, checked: boolean) => {
+ const nextSelectedTag = checked ? tag : '';
+ setSelectedTag(nextSelectedTag);
+ selectProvince.current = nextSelectedTag;
+ pageNo.current = 1;
+ getMonitorRoom();
+ };
+ const onPageChange = (page: number) => {
+ pageNo.current = page;
+ getMonitorRoom();
+ }
+ const onSearchChange = (e: any) => {
+ search.current = e.target.value;
+ }
+ const onSearchClick = () => {
+ pageNo.current = 1;
+ getMonitorRoom();
+ }
+ const onBtnSelect = (btnName: string, status: string) => {
+ if (btnName == selectBtn) {
+ setSelectBtn("");
+ selectStatus.current = "";
+ } else {
+ setSelectBtn(btnName);
+ selectStatus.current = status;
+ }
+ pageNo.current = 1;
+ getMonitorRoom();
+ }
+ const onCardClick = (item: any) => {
+ if (item.status == "0") {
+ message.info("当前评标室未开启,请等待开启后查看");
+ return;
+ }
+ history.push({
+ pathname: "/ElecMonitorScreen/ProjectMonitorRoom",
+ state: { monitorId: item.id },
+ })
+ }
+ const onProvinceMap = (tag: any, index: any) => (
+
+ handleChange(tag.provincesNumber, checked)}
+ >
+ {tag.provincesRemark}
+
+
+ )
+ const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
+ if (type === 'prev') {
+ return
;
+ }
+ if (type === 'next') {
+ return
;
+ }
+ return originalElement;
+ };
+ //获取监控列表数据
+ const getMonitorRoom = () => {
+ const params = {
+ pageNo: pageNo.current,
+ pageSize: 6,
+ }
+ isNotEmpty(selectProvince.current) && (params["provinceDictId"] = selectProvince.current);
+ isNotEmpty(selectStatus.current) && (params["status"] = selectStatus.current);
+ isNotEmpty(search.current) && (params["keyword"] = search.current);
+ getMonitorList(params).then(res => {
+ if (res?.code == 200) {
+ setTotalItem(res?.data.total);
+ setListData(res?.data.records);
+ }
+ })
+ }
+
+ useEffect(() => {
+ getMonitorRoom();
+ }, [])
+
+ //定时器
+ useEffect(() => {
+ const interval = setInterval(function () {
+ getMonitorRoom();
+ }, _time);
+ return () => {
+ clearInterval(interval)
+ };
+ }, [])
+ return (
+
+
+
+
+
+
+
+
+ 选择省分:
+
+
+
+
+
+
+ {provinceList.slice(0, 16).map(onProvinceMap)}
+
+ {allExpand ?
+ {provinceList.slice(16, 32).map(onProvinceMap)}
+
: null}
+
+ { setAllExpand(ite => !ite) }}>{allExpand ? "收起" : "展开"}{allExpand ? : }
+
+
+
+
+
+
+
onBtnSelect("order", "0")}>
+
+
已预约
+
+
onBtnSelect("going", "1")}>
+
+
开标中
+
+
onBtnSelect("ending", "2")}>
+
+
已结束
+
+
+
+
+
+
+
+
+ `当前第 ${range[0]}-${range[1]} 条,共计 ${total} 条`,
+ itemRender,
+ hideOnSinglePage: true,
+ }}
+ className="monitor-list-global"
+ dataSource={listData}
+ renderItem={item => (
+
+ onCardClick(item)}>
+
+
+

+
{item.areaName}
+
+ {item.isAbnormal == "1" &&
异常预警}
+
+
+
项目名称:{item.projectName}
+
标段名称:{item.sectionName}
+
评标时间:{item.startDate} — {item.endDate}
+
专家数量:{item.expertNumber}人
+
评标状态:{bidStatusMap[item.status]}所属省份:{proviceEnum[item.provinceDictId]}
+
+
+
+ )}
+ />
+
+ );
+};
+
+export default MonitorException;
diff --git a/src/pages/ElecEvaluation/Monitor/service.ts b/src/pages/ElecEvaluation/Monitor/service.ts
index 55c6499..cdaf9c2 100644
--- a/src/pages/ElecEvaluation/Monitor/service.ts
+++ b/src/pages/ElecEvaluation/Monitor/service.ts
@@ -255,4 +255,15 @@ export async function getMonitorListAPI(data: any) {
method: 'POST',
data: data,
});
+}
+/**
+ * 评标室监控列表-获取评标室监控列表
+ * @param data
+ * @returns
+ */
+export async function getMonitorList(data: any) {
+ return request('/api/biz-service-ebtp-evaluation/v1/screen/getReviewRoomList', {
+ method: 'POST',
+ data: data,
+ });
}
\ No newline at end of file
diff --git a/src/pages/ElecEvaluation/Monitor/style.less b/src/pages/ElecEvaluation/Monitor/style.less
index 16a41fc..cf5bcfd 100644
--- a/src/pages/ElecEvaluation/Monitor/style.less
+++ b/src/pages/ElecEvaluation/Monitor/style.less
@@ -502,6 +502,422 @@
.monitor-extra-pointer-select {
color: #1B7EF2;
}
+
+ .monitor-center-menu {
+ .flex-center;
+ justify-content: space-around;
+
+ .monitor-center-menu-options {
+ width: 72px;
+ height: 72px;
+ cursor: pointer;
+ background-size: cover;
+ }
+
+ .monitor-center-menu-home {
+ background: url("~@/assets/monitor/options-home.png") left top no-repeat;
+
+ &:hover {
+ background: url("~@/assets/monitor/options-home2.png") left top no-repeat;
+ }
+ }
+
+ .monitor-center-menu-back {
+ background: url("~@/assets/monitor/options-back.png") left top no-repeat;
+
+ &:hover {
+ background: url("~@/assets/monitor/options-back2.png") left top no-repeat;
+ }
+ }
+
+ .monitor-center-menu-select {
+ width: 121.29px;
+ height: 75px;
+ opacity: 1;
+ background: #00000A;
+ box-sizing: border-box;
+ border: 1px solid #1B7EF2;
+ box-shadow: inset 0px 0px 87px 0px rgba(27, 126, 242, 0.4);
+ text-align: center;
+ padding-top: 8px;
+ cursor: pointer;
+
+ &>div {
+ height: 32px;
+ width: 32px;
+ background-size: cover;
+ display: inline-block;
+ }
+
+ .monitor-center-menu-select-first {
+ background: url("~@/assets/monitor/select-first.png") left top no-repeat;
+ }
+
+ .monitor-center-menu-select-second {
+ background: url("~@/assets/monitor/select-second.png") left top no-repeat;
+ }
+
+ .monitor-center-menu-select-third {
+ background: url("~@/assets/monitor/select-third.png") left top no-repeat;
+ }
+
+ &>span {
+ font-size: 18px;
+ font-weight: normal;
+ line-height: 18px;
+ text-align: center;
+ letter-spacing: 0px;
+ color: #29F1FA;
+ display: block;
+ }
+ }
+
+ .monitor-center-menu-select:hover,
+ .monitor-center-menu-checked {
+ background: #1B7EF2;
+ box-sizing: border-box;
+ border: 1px solid #1B7EF2;
+
+ &>span {
+ color: #FFFFFF;
+ }
+
+ .monitor-center-menu-select-first {
+ background: url("~@/assets/monitor/select-first2.png") left top no-repeat;
+ }
+
+ .monitor-center-menu-select-second {
+ background: url("~@/assets/monitor/select-second2.png") left top no-repeat;
+ }
+
+ .monitor-center-menu-select-third {
+ background: url("~@/assets/monitor/select-third2.png") left top no-repeat;
+ }
+ }
+ }
+
+ .monitor-top-search {
+ position: absolute;
+ top: 15px;
+ left: 5%;
+ display: flex;
+ justify-content: flex-end;
+
+ &>div:last-child {
+ padding-left: 8px;
+ }
+
+ .ant-input {
+ width: 200px;
+ color: #FFFFFF;
+ background-color: transparent;
+ border: 1px solid #1B7DF2;
+
+ &:hover {
+ border-color: #1B7DF2;
+ }
+
+ &:focus {
+ border-color: #1B7DF2;
+ box-shadow: 0 0 0 2px #1B7DF2;
+ }
+
+ &::-webkit-input-placeholder {
+ color: #29F1FA;
+ }
+
+ &:-ms-input-placeholder {
+ color: #29F1FA;
+ }
+ }
+
+ .ant-btn-primary {
+ background: #1B7EF2;
+ border-color: #1B7EF2;
+
+ &:hover &:focus &:active {
+ background: #1B7EF2;
+ border-color: #1B7EF2;
+ }
+ }
+ }
+
+ .monitor-list-global {
+
+ .ant-list-item {
+ margin-bottom: 24px !important;
+ }
+
+ .list-card {
+ background: rgba(27, 126, 242, 0.14);
+ border-radius: 4px;
+ border: 1px solid rgba(27, 126, 242, 0.14);
+ cursor: pointer;
+ height: 368px;
+ padding: 36px 32px;
+ position: relative;
+ transition: all .3s;
+
+ &:hover {
+ background: rgba(27, 127, 242, 0.281);
+ }
+
+ .list-card-title {
+ color: #29F0F9;
+ font-size: 20px;
+ font-weight: normal;
+ line-height: 34px;
+ letter-spacing: 0px;
+ color: #29F0F9;
+ margin-bottom: 38px;
+
+ &>img {
+ vertical-align: bottom;
+ height: 24px;
+ width: 23px;
+ }
+
+ &>span {
+ margin-left: 0.625rem;
+ }
+ }
+
+ .list-error-text {
+ margin-top: 2px;
+
+ &>img {
+ height: 22px;
+ width: 22px;
+ vertical-align: baseline;
+ }
+
+ &>span {
+ font-size: 16px;
+ font-weight: normal;
+ letter-spacing: 0em;
+ color: #FF473E;
+ margin-left: 8px;
+ }
+ }
+
+ .space-between {
+ display: flex;
+ justify-content: space-between;
+ }
+
+ &>div>p {
+ margin-bottom: 26px;
+ color: #fff;
+ width: 100%;
+ font-size: 14px;
+ font-weight: normal;
+ line-height: 17px;
+ letter-spacing: 0.6px;
+ z-index: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ .blue-text {
+ color: #45A2FF;
+ }
+
+ .yellow-text {
+ color: #ffd502;
+ }
+
+ .bidding-text-going {
+ color: #29F0F9;
+ }
+
+ .bidding-text-ending {
+ color: #ee6766;
+ }
+
+ .bidding-text-order {
+ color: #72c1dd;
+ }
+ }
+ }
+
+ .ant-list-pagination {
+ margin-top: 0;
+ text-align: center;
+ }
+
+ .ant-pagination-item {
+ // border: none;
+ background: none;
+ border: 0;
+ // margin-right: 0.5rem;
+ margin: 0 0.5rem 0 0;
+
+ &>a {
+ color: #45a2ff;
+ }
+
+ &:hover>a {
+ color: #ffd502;
+ }
+
+
+ }
+
+ .ant-pagination-item:hover {
+ border-color: #ffd502;
+ }
+
+ .ant-pagination-item:focus-visible {
+ border-color: #ffd502;
+ }
+
+ .ant-pagination-item-active {
+ border-color: #ffd502;
+
+ a {
+ color: #ffd502;
+ }
+
+ &:hover &:focus-visible {
+ border-color: #ffd502;
+ }
+ }
+
+ .ant-pagination-prev:focus-visible .ant-pagination-item-link,
+ .ant-pagination-next:focus-visible .ant-pagination-item-link,
+ .ant-pagination-prev:hover .ant-pagination-item-link,
+ .ant-pagination-next:hover .ant-pagination-item-link {
+ border-color: #45a2ff;
+ color: #45a2ff;
+ }
+
+ .ant-pagination-prev .ant-pagination-item-link,
+ .ant-pagination-next .ant-pagination-item-link {
+ background: none;
+ border-color: #45a2ff;
+ color: #45a2ff;
+ }
+
+ .pagination-icon {
+ font-size: 20px;
+ vertical-align: middle;
+ color: #45a2ff;
+ height: 24px;
+ }
+
+ .ant-pagination-total-text {
+ color: #45a2ff;
+ }
+
+ .ant-pagination-prev {
+ margin-right: 0.5rem;
+
+ &>a>img {
+ position: relative;
+ top: -2px;
+ }
+ }
+
+ .ant-pagination-next {
+ &>a>img {
+ position: relative;
+ top: -2px;
+ }
+ }
+
+ .ant-pagination-item-ellipsis {
+ color: #45a2ff;
+ }
+
+ .ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-link-icon,
+ .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon {
+ color: #45a2ff;
+ }
+
+ .ant-pagination-jump-prev .ant-pagination-item-container,
+ .ant-pagination-jump-next .ant-pagination-item-container {
+ position: relative;
+ top: -2px;
+ }
+
+ .ant-empty-image {
+ color: #FFFFFF;
+ }
+
+ .ant-empty-description {
+ color: #FFFFFF;
+ }
+
+ .ant-empty-normal {
+ margin: 100px 0;
+ }
+ }
+
+
+
+ .top-province-label {
+ height: 26px;
+ padding-left: 10px;
+
+ &>span {
+ font-size: 14px;
+ color: #fff;
+ }
+ }
+
+ .list-content-col {
+ display: flex;
+ align-items: center;
+
+ .top-province {
+ display: flex;
+ align-items: baseline;
+ justify-content: flex-start;
+ }
+
+ .top-province-expand {
+ width: 76px;
+ text-align: center;
+ position: relative;
+ top: 28px;
+
+ .top-province-all {
+ font-size: 0.875rem;
+ color: #29F1FA;
+ cursor: pointer;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ .top-province-tag {
+ font-size: 0.875rem;
+ padding: 0 0.5625rem;
+ line-height: 1.6875rem;
+ margin-right: 0;
+ color: #fff;
+ }
+
+ .ant-tag-checkable:not(.ant-tag-checkable-checked):hover {
+ color: #1b7ef2;
+ }
+
+ .ant-tag-checkable:active {
+ background-color: transparent;
+ }
+
+ .ant-tag-checkable-checked {
+ background-color: #1b7ef2;
+ }
+
+ }
+
}
}