1.19 评标室监控列表页重构

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

@@ -1684,7 +1684,7 @@ const MonitorHome: React.FC<{}> = () => {
                         <div className="review-distribution">
                             {mapChart}
                         </div>
-                        <div className="monitor-label-pointer" onClick={() => { window.open("/ElecMonitorScreen/MonitorRoom") }}>
+                        <div className="monitor-label-pointer" onClick={() => { window.open("/ElecMonitor/Room") }}>
                             <ScreenLabel title="智能评标监控" />
                         </div>
                         <div className="bid-evaluation">

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<string>("");
+    const selectStatus = useRef<string>("");
+    //当前选中的省分
+    const [selectedTag, setSelectedTag] = useState<string>("");
+    const selectProvince = useRef<string>("");
+    //当前页码
+    const pageNo = useRef<number>(1);
+    //总数
+    const [totalItem, setTotalItem] = useState<number>(0);
+    //当前页数据
+    const [listData, setListData] = useState<any[]>([]);
+    //all expand 展开收起
+    const [allExpand, setAllExpand] = useState<boolean>(false);
+    //关键字搜索条件
+    const search = useRef<string>("");
+    //定时刷新间隔
+    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) => (
+        <Col span={3} key={index}>
+            <CheckableTag
+                className='top-province-tag'
+                key={tag.provincesNumber}
+                checked={selectedTag === tag.provincesNumber}
+                onChange={checked => handleChange(tag.provincesNumber, checked)}
+            >
+                {tag.provincesRemark}
+            </CheckableTag>
+        </Col>
+    )
+    const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
+        if (type === 'prev') {
+            return <a><img src={arrowLeftCircleFill} alt="" /></a>;
+        }
+        if (type === 'next') {
+            return <a><img src={arrowRightCircleFill} alt="" /></a>;
+        }
+        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 (
+        <ScreenTitle title="评标室监控">
+            <div className="top-main">
+                <div className='monitor-top-search'>
+                    <div><Input placeholder="请输入关键字搜索" onChange={onSearchChange} onPressEnter={onSearchClick} /></div>
+                    <div><Button type="primary" onClick={() => { onSearchClick() }}>搜索</Button></div>
+                </div>
+
+                <div className='top-province-label'>
+                    <span>选择省分：</span>
+                </div>
+                <div>
+                    <Row>
+                        <Col span={allExpand ? 16 : 8} className="list-content-col">
+                            <div className="top-province">
+                                <Row>
+                                    {provinceList.slice(0, 16).map(onProvinceMap)}
+                                </Row>
+                                {allExpand ? <Row>
+                                    {provinceList.slice(16, 32).map(onProvinceMap)}
+                                </Row> : null}
+                                <div className='top-province-expand'>
+                                    <span className='top-province-all' onClick={() => { setAllExpand(ite => !ite) }}>{allExpand ? "收起" : "展开"}</span>{allExpand ? <LeftOutlined style={{ marginLeft: 4, color: "#29F1FA" }} /> : <RightOutlined style={{ marginLeft: 4, color: "#29F1FA" }} />}
+                                </div>
+                            </div>
+                        </Col>
+                        <Col span={8}>
+                            <div className='monitor-center-menu'>
+                                <div className='monitor-center-menu-options monitor-center-menu-home' onClick={homeClick}></div>
+                                <div className={selectBtn == "order" ? "monitor-center-menu-select monitor-center-menu-checked" : "monitor-center-menu-select"} onClick={() => onBtnSelect("order", "0")}>
+                                    <div className='monitor-center-menu-select-first'></div>
+                                    <span>已预约</span>
+                                </div>
+                                <div className={selectBtn == "going" ? "monitor-center-menu-select monitor-center-menu-checked" : "monitor-center-menu-select"} onClick={() => onBtnSelect("going", "1")}>
+                                    <div className='monitor-center-menu-select-second'></div>
+                                    <span>开标中</span>
+                                </div>
+                                <div className={selectBtn == "ending" ? "monitor-center-menu-select monitor-center-menu-checked" : "monitor-center-menu-select"} onClick={() => onBtnSelect("ending", "2")}>
+                                    <div className='monitor-center-menu-select-third'></div>
+                                    <span>已结束</span>
+                                </div>
+                                <div className='monitor-center-menu-options monitor-center-menu-back' onClick={previousClick}></div>
+                            </div>
+                        </Col>
+                        <Col span={0}></Col>
+                    </Row>
+                </div>
+            </div>
+            <List
+                grid={{ gutter: 24, column: 3 }}
+                pagination={{
+                    defaultPageSize: 6,
+                    showSizeChanger: false,
+                    onChange: onPageChange,
+                    current: pageNo.current,
+                    total: totalItem,
+                    // showTotal: (total, range) => `当前第 ${range[0]}-${range[1]} 条，共计 ${total} 条`,
+                    itemRender,
+                    hideOnSinglePage: true,
+                }}
+                className="monitor-list-global"
+                dataSource={listData}
+                renderItem={item => (
+                    <List.Item>
+                        <div className="list-card" onClick={() => onCardClick(item)}>
+                            <div className="space-between">
+                                <div className="list-card-title">
+                                    <img src={content_title} />
+                                    <span>{item.areaName}</span>
+                                </div>
+                                {item.isAbnormal == "1" && <span className="list-error-text"><img src={errorIcon} alt="" /><span>异常预警</span></span>}
+                            </div>
+                            <div>
+                                <p><span className='blue-text'>项目名称：</span><Tooltip title={item.projectName}><span>{item.projectName}</span></Tooltip></p>
+                                <p><span className='blue-text'>标段名称：</span><Tooltip title={item.sectionName}><span>{item.sectionName}</span></Tooltip></p>
+                                <p><span className='blue-text'>评标时间：</span>{item.startDate} — {item.endDate}</p>
+                                <p><span className='blue-text'>专家数量：</span><span className='yellow-text'>{item.expertNumber}</span>人</p>
+                                <p className="space-between"><span><span className='blue-text'>评标状态：</span><span className={statusColorMap[item.status]}>{bidStatusMap[item.status]}</span></span><span className='blue-text'>所属省份：{proviceEnum[item.provinceDictId]}</span></p>
+                            </div>
+                        </div>
+                    </List.Item>
+                )}
+            />
+        </ScreenTitle>
+    );
+};
+
+export default MonitorException;

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

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;
+            }
+
+        }
+
     }
 }