diff --git a/config/router_elecEvaluation.ts b/config/router_elecEvaluation.ts index 9f3ac01..aac32ed 100644 --- a/config/router_elecEvaluation.ts +++ b/config/router_elecEvaluation.ts @@ -44,6 +44,10 @@ export const monitor = [ path: '/ElecMonitor/OpenToday', component: './ElecEvaluation/Monitor/OpenToday', }, + {//评标室监控-列表 + path: '/ElecMonitor/Room', + component: './ElecEvaluation/Monitor/Room', + }, ], }, ] diff --git a/src/assets/monitor/arrow-left-circle-fill.png b/src/assets/monitor/arrow-left-circle-fill.png new file mode 100644 index 0000000..a5424c0 Binary files /dev/null and b/src/assets/monitor/arrow-left-circle-fill.png differ diff --git a/src/assets/monitor/arrow-right-circle-fill.png b/src/assets/monitor/arrow-right-circle-fill.png new file mode 100644 index 0000000..3125cfb Binary files /dev/null and b/src/assets/monitor/arrow-right-circle-fill.png differ diff --git a/src/assets/monitor/error-icon.png b/src/assets/monitor/error-icon.png new file mode 100644 index 0000000..f7b0945 Binary files /dev/null and b/src/assets/monitor/error-icon.png differ diff --git a/src/assets/monitor/options-back.png b/src/assets/monitor/options-back.png new file mode 100644 index 0000000..26dafa4 Binary files /dev/null and b/src/assets/monitor/options-back.png differ diff --git a/src/assets/monitor/options-back2.png b/src/assets/monitor/options-back2.png new file mode 100644 index 0000000..9e3677d Binary files /dev/null and b/src/assets/monitor/options-back2.png differ diff --git a/src/assets/monitor/options-home.png b/src/assets/monitor/options-home.png new file mode 100644 index 0000000..ee8a00c Binary files /dev/null and b/src/assets/monitor/options-home.png differ diff --git a/src/assets/monitor/options-home2.png b/src/assets/monitor/options-home2.png new file mode 100644 index 0000000..50e2fdc Binary files /dev/null and b/src/assets/monitor/options-home2.png differ diff --git a/src/assets/monitor/select-first.png b/src/assets/monitor/select-first.png new file mode 100644 index 0000000..a70f248 Binary files /dev/null and b/src/assets/monitor/select-first.png differ diff --git a/src/assets/monitor/select-first2.png b/src/assets/monitor/select-first2.png new file mode 100644 index 0000000..ebf4ac1 Binary files /dev/null and b/src/assets/monitor/select-first2.png differ diff --git a/src/assets/monitor/select-second.png b/src/assets/monitor/select-second.png new file mode 100644 index 0000000..c0b0bac Binary files /dev/null and b/src/assets/monitor/select-second.png differ diff --git a/src/assets/monitor/select-second2.png b/src/assets/monitor/select-second2.png new file mode 100644 index 0000000..0ed7dce Binary files /dev/null and b/src/assets/monitor/select-second2.png differ diff --git a/src/assets/monitor/select-third.png b/src/assets/monitor/select-third.png new file mode 100644 index 0000000..ba3b4b4 Binary files /dev/null and b/src/assets/monitor/select-third.png differ diff --git a/src/assets/monitor/select-third2.png b/src/assets/monitor/select-third2.png new file mode 100644 index 0000000..90655a9 Binary files /dev/null and b/src/assets/monitor/select-third2.png differ diff --git a/src/assets/screen/content_title.png b/src/assets/screen/content_title.png index dfe3252..e2e3c85 100644 Binary files a/src/assets/screen/content_title.png and b/src/assets/screen/content_title.png differ diff --git a/src/pages/ElecEvaluation/Monitor/Home/index.tsx b/src/pages/ElecEvaluation/Monitor/Home/index.tsx index 205a96e..1a74d47 100644 --- a/src/pages/ElecEvaluation/Monitor/Home/index.tsx +++ b/src/pages/ElecEvaluation/Monitor/Home/index.tsx @@ -1684,7 +1684,7 @@ const MonitorHome: React.FC<{}> = () => {
{mapChart}
-
{ window.open("/ElecMonitorScreen/MonitorRoom") }}> +
{ window.open("/ElecMonitor/Room") }}>
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; + } + + } + } }