12.26 监控大屏

config/router.config.ts

@@ -4,7 +4,7 @@ import home from './HomePage/router_home';
 import juryRoom from './JuryRoom/router_menuJury.config';
 import approvalForm from './router_approval_form';
 import partyMemberTopic from './router_partyMemberTopic';
-import { elecBidEvaluation, monitorScreen } from './router_elecEvaluation';
+import { elecBidEvaluation, monitor, monitorScreen } from './router_elecEvaluation';
 export default [
   //========================================================================登陆
   ...transfer,//跳转、登陆
@@ -14,6 +14,7 @@ export default [
   ...partyMemberTopic,
   //电子评标室-监控大屏
   ...monitorScreen,
+  ...monitor,
   {
     path: '/userformal',
     // component: '../layouts/UserLayout',

config/router_elecEvaluation.ts

@@ -19,6 +19,35 @@ export const monitorScreen = [
     },
 ]
 
+export const monitor = [
+    //监控
+    {
+        path: '/ElecMonitor',
+        routes: [
+            {//监控首页
+                path: '/ElecMonitor/Home',
+                component: './ElecEvaluation/Monitor/Home',
+            },
+            {//异常监控
+                path: '/ElecMonitor/Exception',
+                component: './ElecEvaluation/Monitor/Exception',
+            },
+            {//招标代理机构概况
+                path: '/ElecMonitor/TenderAgent',
+                component: './ElecEvaluation/Monitor/TenderAgent',
+            },
+            {//供应商概况
+                path: '/ElecMonitor/Supplier',
+                component: './ElecEvaluation/Monitor/Supplier',
+            },
+            {//今日开标
+                path: '/ElecMonitor/OpenToday',
+                component: './ElecEvaluation/Monitor/OpenToday',
+            },
+        ],
+    },
+]
+
 export const elecBidEvaluation = [
     {
         path: '/ElecEvaluation',

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

@@ -0,0 +1,334 @@
+import { Col, Progress, Row, Table } from 'antd';
+import { debounce } from 'lodash';
+import React, { useEffect, useRef, useState } from 'react';
+import '../style.less'
+import { onCell, onHeaderCell, OverviewItem, proviceEnum, ScreenLabel, ScreenTitle, ScrollTable } from '../Home';
+import Circle3199 from '@/assets/monitor/circle-3199.png';
+import { getDecryptDataAPI, getNoOpenAssessListAPI, getNoOpenListAPI, getNoOpenNumberAPI, getThreeDayNoEndAPI } from '../service';
+
+const columns: any[] = [
+    {
+        title: '序号',
+        align: 'center',
+        width: '10%',
+        onCell,
+        onHeaderCell,
+        render: (_: any, record: any, index: any) => index + 1,
+    },
+    {
+        title: '省分',
+        dataIndex: 'provinceName',
+        key: 'provinceName',
+        width: '15%',
+        ellipsis: true,
+        onCell,
+        onHeaderCell,
+        // render: (_: any, record: any) => proviceEnum[record.provinceDictId],
+    },
+    {
+        title: '项目名称',
+        dataIndex: 'projectName',
+        key: 'projectName',
+        ellipsis: true,
+        width: '20%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '预算金额',
+        dataIndex: 'budgetAmount',
+        key: 'budgetAmount',
+        width: '20%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '采购经理',
+        dataIndex: 'ownerContactName',
+        key: 'ownerContactName',
+        width: '15%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '查看',
+        width: '20%',
+        onCell,
+        onHeaderCell,
+        render: (_: any, record: any) => {
+            return (
+                <a onClick={() => { }} style={{ color: "#fff" }}>查看</a>
+            )
+        },
+    },
+];
+
+const columnsSecond: any[] = [
+    {
+        title: '序号',
+        align: 'center',
+        width: '10%',
+        onCell,
+        onHeaderCell,
+        render: (_: any, record: any, index: any) => index + 1,
+    },
+    {
+        title: '省分',
+        dataIndex: 'regionDictName',
+        key: 'regionDictName',
+        width: '15%',
+        ellipsis: true,
+        onCell,
+        onHeaderCell,
+        // render: (_: any, record: any) => proviceEnum[record.provinceDictId],
+    },
+    {
+        title: '项目名称',
+        dataIndex: 'projectName',
+        key: 'projectName',
+        ellipsis: true,
+        width: '20%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '预算金额',
+        dataIndex: 'budgetAmount',
+        key: 'budgetAmount',
+        width: '20%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '采购经理',
+        dataIndex: 'ownerContactName',
+        key: 'ownerContactName',
+        width: '15%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '查看',
+        width: '20%',
+        onCell,
+        onHeaderCell,
+        render: (_: any, record: any) => {
+            return (
+                <a onClick={() => { }} style={{ color: "#fff" }}>查看</a>
+            )
+        },
+    },
+];
+const dataSource = [
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+        people: "曹鹏",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+        people: "曹鹏",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+        people: "曹鹏",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+        people: "曹鹏",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+        people: "曹鹏",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "10:30",
+        vital: "1",
+        people: "曹鹏",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "10:30",
+        vital: "1",
+        people: "曹鹏",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "10:30",
+        vital: "1",
+        people: "曹鹏",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "10:30",
+        vital: "1",
+        people: "曹鹏",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+        people: "曹鹏",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+        people: "曹鹏",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+        people: "曹鹏",
+    },
+]
+
+const MonitorException: React.FC<{}> = () => {
+    //超过1小时未开标数量
+    const [noOpenNumberData, setNoOpenNumberData] = useState<string>("");
+    //开启评审后3日未结束评标-列表
+    const [threeDayNoEndData, setThreeDayNoEndData] = useState<any[]>([]);
+    //超过1小时未开标数量-列表
+    const [noOpenListData, setNoOpenListData] = useState<any[]>([]);
+    //开标后超过6小时未开启评审室-列表
+    const [noOpenAssessListData, setNoOpenAssessListData] = useState<any>();
+    //异常监控-解密异常、mac地址相同及相关项目列表
+    const [decryptData, setDecryptData] = useState<any>();
+    //超过1小时未开标数量
+    const getNoOpenNumber = () => {
+        getNoOpenNumberAPI().then(res => {
+            if (res?.code == 200) {
+                setNoOpenNumberData(res?.data);
+            }
+        })
+    }
+    //开启评审后3日未结束评标
+    const getThreeDayNoEnd = () => {
+        getThreeDayNoEndAPI().then(res => {
+            if (res?.code == 200) {
+                setThreeDayNoEndData(res?.data);
+            }
+        })
+    }
+    //开启评审后3日未结束评标
+    const getNoOpenList = () => {
+        getNoOpenListAPI({ pageNo: 1, pageSize: 10 }).then(res => {
+            if (res?.code == 200) {
+                setNoOpenListData(res?.data);
+            }
+        })
+    }
+    //开标后超过6小时未开启评审室-列表
+    const getNoOpenAssessList = () => {
+        getNoOpenAssessListAPI({ pageNo: 1, pageSize: 10 }).then(res => {
+            if (res?.code == 200) {
+                setNoOpenAssessListData(res?.data);
+            }
+        })
+    }
+    //异常监控-解密异常、mac地址相同及相关项目列表
+    const getDecryptData = () => {
+        getDecryptDataAPI().then(res => {
+            if (res?.code == 200) {
+                setDecryptData(res?.data);
+            }
+        })
+    }
+    useEffect(() => {
+        getNoOpenNumber();
+        getThreeDayNoEnd();
+        getNoOpenList();
+        getNoOpenAssessList();
+        getDecryptData();
+    }, [])
+    return (
+        <ScreenTitle title="异常监控">
+            <div className="top-main">
+                <div className="monitor-top-space-flex">
+                    <OverviewItem icon={Circle3199} title="一小时内未开标数" number={noOpenNumberData} unit="次" />
+                    <OverviewItem icon={Circle3199} title="电子谈判总数" number={73185} unit="个" />
+                    <OverviewItem icon={Circle3199} title="MAC地址相同数" number={decryptData?.macSameCount} unit="次" />
+                    <OverviewItem icon={Circle3199} title="开标后6小时未开启评审数" number={noOpenAssessListData?.length} unit="次" />
+                    <OverviewItem icon={Circle3199} title="开启评审后3日未结束评标数" number={threeDayNoEndData?.length} unit="次" />
+                    <OverviewItem icon={Circle3199} title="评标结束3日未公示数" number={62520} unit="次" />
+                    <OverviewItem icon={Circle3199} title="重新评标次数" number={62520} unit="次" />
+                </div>
+            </div>
+            <Row>
+                <Col span={8}>
+                    <div className="monitor-left-main">
+                        <ScreenLabel title="1小时未开标项目列表" extra={<span>more</span>} />
+                        <div className="monitor-exception-card">
+                            <ScrollTable dataSource={noOpenListData} columns={columns} ynum={266} />
+                        </div>
+                        <ScreenLabel title="开标后六小时未开启评审" extra={<span>more</span>} />
+                        <div className="monitor-exception-card">
+                            <ScrollTable dataSource={noOpenAssessListData} columns={columns} ynum={266} />
+                        </div>
+                    </div>
+                </Col>
+                <Col span={8}>
+                    <div className="monitor-center-main">
+                        <ScreenLabel title="解密异常项目列表" extra={<span>more</span>} />
+                        <div className="monitor-exception-card">
+                            <ScrollTable dataSource={decryptData?.decryptExceptionList} columns={columnsSecond} ynum={266} />
+                        </div>
+                        <ScreenLabel title="开启评审后3日未结束评标" extra={<span>more</span>} />
+                        <div className="monitor-exception-card">
+                            <ScrollTable dataSource={threeDayNoEndData} columns={columns} ynum={266} />
+                        </div>
+                    </div>
+                </Col>
+                <Col span={8}>
+                    <div className="monitor-right-main">
+                        <ScreenLabel title="MAC地址重复项目列表" extra={<span>more</span>} />
+                        <div className="monitor-exception-card">
+                            <ScrollTable dataSource={decryptData?.macSameList} columns={columnsSecond} ynum={266} />
+                        </div>
+                        <ScreenLabel title="评标结束后3日内未发布公示" extra={<span>more</span>} />
+                        <div className="monitor-exception-card">
+                            <ScrollTable dataSource={dataSource} columns={columns} ynum={266} />
+                        </div>
+                    </div>
+                </Col>
+            </Row>
+        </ScreenTitle>
+    );
+};
+
+export default MonitorException;

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

@@ -0,0 +1,258 @@
+import { Col, Progress, Row, Table } from 'antd';
+import { debounce } from 'lodash';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import '../style.less'
+import { GraphChart, onCell, onHeaderCell, OverviewItem, ProgressItem, proviceEnum, ScreenLabel, ScreenTitle, ScrollTable, StageCard, StatisticTable } from '../Home';
+import Circle3197 from '@/assets/monitor/circle-3197.png';
+import Circle3198 from '@/assets/monitor/circle-3198.png';
+import Circle3199 from '@/assets/monitor/circle-3199.png';
+import Circle3200 from '@/assets/monitor/circle-3200.png';
+import { getDecryptSuccessRateTodayAPI, getTodayInfoAPI } from '../service';
+
+const columns: any[] = [
+    {
+        title: '省分',
+        dataIndex: 'provinceDictId',
+        key: 'provinceDictId',
+        width: '20%',
+        ellipsis: true,
+        onCell,
+        onHeaderCell,
+        render: (_: any, record: any) => proviceEnum[record.provinceDictId],
+    },
+    {
+        title: '项目名称',
+        dataIndex: 'projectName',
+        key: 'projectName',
+        ellipsis: true,
+        width: '30%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '采购预算',
+        dataIndex: 'number',
+        key: 'number',
+        width: '30%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '开标时间',
+        dataIndex: 'time',
+        key: 'time',
+        width: '20%',
+        onCell,
+        onHeaderCell,
+    },
+];
+const reiColumns: any[] = [
+    {
+        title: '省分',
+        dataIndex: 'provinceDictId',
+        key: 'provinceDictId',
+        width: '20%',
+        ellipsis: true,
+        onCell,
+        onHeaderCell,
+        render: (_: any, record: any) => proviceEnum[record.provinceDictId],
+    },
+    {
+        title: '项目名称',
+        dataIndex: 'projectName',
+        key: 'projectName',
+        ellipsis: true,
+        width: '20%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '采购预算',
+        dataIndex: 'number',
+        key: 'number',
+        width: '20%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '开标时间',
+        dataIndex: 'time',
+        key: 'time',
+        width: '20%',
+        onCell,
+        onHeaderCell,
+    },
+    {
+        title: '状态',
+        dataIndex: 'time',
+        key: 'time',
+        width: '20%',
+        onCell,
+        onHeaderCell,
+    },
+];
+const dataSource = [
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "10:30",
+        vital: "1",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "10:30",
+        vital: "1",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "10:30",
+        vital: "1",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "10:30",
+        vital: "1",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+    },
+    {
+        provinceDictId: "0012",
+        projectName: "天津设备采购",
+        number: "320万",
+        time: "9:30",
+        vital: "0",
+    },
+]
+
+const OpenToday: React.FC<{}> = () => {
+    //今日开标-评标阶段，评标及时率
+    const [todayInfoData, setTodayInfoData] = useState<any>();
+    //今日开标-解密成功率
+    const [decryptSuccessRateTodayData, setDecryptSuccessRateTodayData] = useState<any>();
+    //今日开标-评标阶段，评标及时率
+    const getTodayInfo = () => {
+        getTodayInfoAPI().then(res => {
+            if (res?.code == 200) {
+                setTodayInfoData(res?.data);
+            }
+        })
+    }
+    //今日开标-解密成功率
+    const getDecryptSuccessRateToday = () => {
+        getDecryptSuccessRateTodayAPI().then(res => {
+            if (res?.code == 200) {
+                setDecryptSuccessRateTodayData(res?.data);
+            }
+        })
+    }
+    useEffect(() => {
+        getTodayInfo();
+        getDecryptSuccessRateToday();
+    }, [])
+    return (
+        <ScreenTitle title="今日开标">
+            <div className="top-main top-main-bottom">
+                <Row gutter={30}>
+                    <Col span={7}>
+                        <div className='monitor-tender-card'>
+                            <ScreenLabel title="开标阶段" />
+                            <div className='monitor-tender-card'>
+                                <StageCard percentage={60} total={130} firstTitle="已开标" firstNumber={`100个`} secondTitle="已解密" secondNumber={`80个`} thirdTitle="已唱标" thirdNumber={`65个`} />
+                            </div>
+                        </div>
+                    </Col>
+                    <Col span={10}>
+                        <div className="monitor-top-space-flex monitor-today-overview-width">
+                            <OverviewItem icon={Circle3199} title="标段总数" number={todayInfoData?.sectionNumber} unit="个" />
+                            <OverviewItem icon={Circle3199} title="已完成" number={73185} unit="个" />
+                            <OverviewItem icon={Circle3199} title="完成率" number={90} unit="%" />
+                        </div>
+                        <div className="monitor-top-space-flex ">
+                            <ProgressItem progress={30} title="解密成功率" leftTitle='解密成功' rightTitle='解密失败' leftNumber={decryptSuccessRateTodayData?.successNum} rightNumber={decryptSuccessRateTodayData?.failNum} />
+                            <ProgressItem progress={70} title="开标及时率" leftTitle='2小时未开标' rightTitle='5小时未开标' leftNumber={1223} rightNumber={1223} />
+                            <ProgressItem progress={90} title="评标及时率" leftTitle='6小时未评标' rightTitle='10小时未评标' leftNumber={1223} rightNumber={1223} />
+                        </div>
+                    </Col>
+                    <Col span={7}>
+                        <div className='monitor-tender-card'>
+                            <ScreenLabel title="评标阶段" />
+                            <div className='monitor-tender-card'>
+                                <StageCard percentage={90} total={120} firstTitle="开启评审" firstNumber={`32个`} secondTitle="专家签到" secondNumber={`45/60`} thirdTitle="评审汇总" thirdNumber={`12个`} />
+                            </div>
+                        </div>
+                    </Col>
+                </Row>
+            </div>
+            <Row gutter={30}>
+                <Col span={12}>
+                    <ScreenLabel title="今日开标明细" />
+                    <div className='monitor-tender-card'>
+                        <ScrollTable dataSource={dataSource} columns={columns} ynum={530} />
+                    </div>
+                </Col>
+                <Col span={12}>
+                    <ScreenLabel title="重保项目" />
+                    <div className='monitor-tender-card'>
+                        <ScrollTable dataSource={dataSource} columns={reiColumns} ynum={530} />
+                    </div>
+                </Col>
+            </Row>
+        </ScreenTitle>
+    );
+};
+
+export default OpenToday;

src/pages/ElecEvaluation/Monitor/service.ts

@@ -0,0 +1,156 @@
+import request from '@/utils/request';
+
+/**
+ * 首页-今日开标
+ * @param data
+ */
+export async function getTodayOpeningAPI(data: any) {
+    return request('/api/biz-service-ebtp-statistics/opening/getTodayOpening', {
+        method: 'POST',
+        data: { ...data },
+    });
+}
+/**
+ * 首页-地图
+ * @param data
+ */
+export async function getReviewDistributionAPI() {
+    return request('/api/biz-service-ebtp-statistics/opening/getProvincesList', {
+        method: 'GET',
+    });
+}
+
+/**
+ * 首页-开标大厅资源
+ * @param data
+ */
+export async function getOpeningListAPI(data: any) {
+    return request('/api/biz-service-ebtp-statistics/opening/openList', {
+        method: 'POST',
+        data: { ...data },
+    });
+}
+
+/**
+ * 首页-上面前三个指标和招标代理实施项目统计
+ * @param data
+ */
+export async function getAnnualAndTenderAgentAPI() {
+    return request('/api/biz-service-ebtp-statistics/indexMonitor/getProjectData', {
+        method: 'GET',
+    });
+}
+
+/**
+ * 首页-活跃供应商
+ * @param data
+ */
+export async function getActiveSupplierAPI() {
+    return request('/api/biz-service-ebtp-statistics/indexMonitor/indexQuerySupplier', {
+        method: 'GET',
+    });
+}
+
+/**
+ * 异常监控-超过1小时未开标数量
+ */
+export async function getNoOpenNumberAPI() {
+    return request('/api/biz-service-ebtp-statistics/opening/noOpenNumber', {
+        method: 'POST',
+    });
+}
+
+/**
+ * 异常监控-开启评审后3日未结束评标
+ */
+export async function getThreeDayNoEndAPI() {
+    return request('/api/biz-service-ebtp-statistics/api/evaluation/exception/threedaynoend', {
+        method: 'GET',
+    });
+}
+
+/**
+ * 异常监控-超过1小时未开标数量-列表
+ * @param data
+ */
+export async function getNoOpenListAPI(data: any) {
+    return request('/api/biz-service-ebtp-statistics/opening/noOpenList', {
+        method: 'POST',
+        data: { ...data },
+    });
+}
+
+/**
+ * 异常监控-开标后超过6小时未开启评审室-列表
+ * @param data
+ */
+export async function getNoOpenAssessListAPI(data: any) {
+    return request('/api/biz-service-ebtp-statistics/opening/noOpenAssessList', {
+        method: 'POST',
+        data: { ...data },
+    });
+}
+
+/**
+ * 异常监控-解密异常、mac地址相同及相关项目列表
+ */
+export async function getDecryptDataAPI() {
+    return request('/api/biz-service-ebtp-statistics/exceptionMonitor/getDecryptData', {
+        method: 'GET',
+    });
+}
+
+/**
+ * 今日开标-评标阶段，评标及时率
+ */
+export async function getTodayInfoAPI() {
+    return request('/api/biz-service-ebtp-statistics/api/evaluation/today/info', {
+        method: 'GET',
+    });
+}
+
+/**
+ * 今日开标-解密成功率
+ */
+export async function getDecryptSuccessRateTodayAPI() {
+    return request('/api/biz-service-ebtp-statistics/exceptionMonitor/getDecryptSuccessRateToday', {
+        method: 'GET',
+    });
+}
+
+/**
+ * 供应商概况-上面六个指标
+ */
+export async function getSupplierInfoAPI() {
+    return request('/api/biz-service-ebtp-statistics/v1/tenderMonitor/supplierInfo', {
+        method: 'GET',
+    });
+}
+
+/**
+ * 供应商概况-全国活跃供应商排名
+ */
+export async function getActiveSupplierRankAPI() {
+    return request('/api/biz-service-ebtp-statistics/v1/tenderMonitor/activeSupplierRank', {
+        method: 'GET',
+    });
+}
+
+/**
+ * 供应商概况-省份活跃供应商
+ */
+export async function getProvinceActiveSupplierInfoAPI() {
+    return request('/api/biz-service-ebtp-statistics/v1/tenderMonitor/provinceActiveSupplierInfo', {
+        method: 'GET',
+    });
+}
+
+/**
+ * 供应商概况-参与供应商
+ */
+export async function getSupplierCountAPI(params: any) {
+    return request('/api/biz-service-ebtp-statistics/v1/tenderMonitor/supplierCount', {
+        method: 'GET',
+        params: { ...params }
+    });
+}

src/pages/ElecEvaluation/Monitor/style.less

@@ -0,0 +1,941 @@
+@import '~antd/lib/style/themes/default.less';
+
+.flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.screen-global {
+    width: 100%;
+    height: 100%;
+    background: url("~@/assets/monitor/background-3.jpg") left top no-repeat;
+    background-size: cover;
+    // background-color: #0a0c11;
+
+    .screen-wrapper {
+        height: 100vh;
+        width: calc(100vh * 16 / 9);
+        overflow: hidden;
+        margin: 0 auto;
+        position: relative;
+        z-index: 1;
+
+        .screen-main {
+            display: inline-block;
+            width: 1920px; //设计稿的宽度
+            height: 1080px; //设计稿的高度
+            transform-origin: 0 0;
+            position: absolute;
+            background: rgb(0, 0, 0);
+            // left: 50%;
+        }
+
+    }
+
+
+    .screen-bg-title {
+        position: absolute;
+        top: 38px;
+        z-index: 0;
+
+        .screen-bg-img {
+            width: 100%;
+            height: 11px;
+        }
+    }
+}
+
+
+.monitor-main {
+    height: 100%;
+    // background-color: #0a0c11;
+    background: url("~@/assets/monitor/background-3.jpg") left top no-repeat;
+    background-size: cover;
+
+    .monitor-title {
+        background: url("~@/assets/monitor/global-title-bg.png") left top no-repeat;
+        background-size: 100% 100%;
+        height: 114px;
+        width: 100%;
+        text-align: center;
+
+        &>span {
+            font-size: 38px;
+            font-weight: bold;
+            line-height: 72px;
+            letter-spacing: 3.2px;
+            text-indent: 3.2px;
+            color: #FFFFFF;
+        }
+    }
+
+    .monitor-flex {
+        width: 1860px;
+        // height: 100%;
+        margin: -24px auto 0;
+
+        .top-main {
+            width: 100%;
+            margin-bottom: 40px;
+
+            .monitor-top-main-flex {
+                margin-left: 80px;
+                margin-top: 20px;
+            }
+
+            .monitor-top-space-flex {
+                margin-left: 0;
+                margin-top: 20px;
+                display: flex;
+                justify-content: space-between;
+
+                .monitor-gauge {
+                    width: 200px;
+                    height: 100%;
+                    text-align: center;
+
+                    &>div>span {
+                        font-size: 18px;
+                        font-weight: normal;
+                        line-height: 31px;
+                        letter-spacing: 0px;
+                        color: #FFFFFF;
+                    }
+                }
+            }
+
+            .monitor-today-overview-width {
+                .line-overview-main {
+                    padding: 18px 18px 12px 18px;
+                }
+
+                .line-overview-content {
+                    width: 132px;
+                }
+            }
+
+            .monitor-top-space-top {
+                margin-top: 20px;
+            }
+        }
+
+        .top-main-bottom {
+            margin-bottom: 20px;
+        }
+
+        .screen-label-main {
+            height: 33.85px;
+            display: flex;
+            justify-content: flex-start;
+
+            .left-rect-1 {
+                width: 4px;
+                height: 33.85px;
+                opacity: 1;
+                background: #1B7EF2;
+            }
+
+            .right-rect-2 {
+                height: 33.85px;
+                background: #12304eb3;
+                margin-left: 2px;
+                opacity: 1;
+                width: calc(100% - 6px);
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .right-rect-icon {
+                    height: 6.5px;
+                    opacity: 1;
+                    color: #29F1FA;
+                    position: relative;
+                    top: -2px;
+                    margin-left: 4px;
+                }
+
+                .monitor-label {
+                    font-size: 20px;
+                    font-weight: normal;
+                    line-height: 34px;
+                    letter-spacing: 0px;
+                    color: rgba(255, 255, 255, 0.87);
+                    margin-left: 12px;
+                }
+
+                .monitor-label-right {
+                    font-size: 16px;
+                    font-weight: normal;
+                    line-height: 31px;
+                    letter-spacing: 0px;
+                    color: #29F1FA;
+                    margin-right: 24px;
+                }
+            }
+        }
+
+        .monitor-left-main {
+            margin-right: 16px;
+
+            .active-supplier {
+                margin-top: 10px;
+                height: 390px;
+            }
+
+            .scroll-table {
+                height: 320px;
+                margin-top: 20px;
+                margin-bottom: 20px;
+            }
+
+            .monitor-supplier-select-label {
+                font-size: 14px;
+                font-weight: normal;
+                line-height: 31px;
+                letter-spacing: 0px;
+                color: #FFFFFF;
+            }
+        }
+
+        .monitor-center-main {
+            margin: 0 8px;
+
+            .review-distribution {
+                height: 540px;
+                // background-color: rgb(10, 36, 83);
+                background-clip: border-box;
+                margin-top: 20px;
+                margin-bottom: 20px;
+                filter: blur(0px);
+            }
+
+            .review-distribution-title {
+                height: 33.85px;
+
+                &>span {
+                    font-size: 20px;
+                    font-weight: normal;
+                    line-height: 34px;
+                    letter-spacing: 0px;
+                    color: rgba(255, 255, 255, 0.87);
+                    margin-left: 16px;
+                }
+            }
+
+            .bid-evaluation {
+                height: 170px;
+                background-clip: border-box;
+                filter: blur(0px);
+
+                .card-default-01 {
+                    background-image: url('~@/assets/screen/default_pic01.jpg');
+                    background-repeat: no-repeat;
+                    background-size: 100% 100%;
+                    height: 120px;
+                    margin-top: 20px;
+                    position: relative;
+                    .flex-center;
+
+                    &>img {
+                        height: 50%;
+                    }
+
+                    .card-text-orange {
+                        font-family: "Microsoft Yahei", Arial, sans-serif;
+                        font-size: 14px;
+                        color: rgb(245, 166, 35);
+                        font-weight: normal;
+                        justify-content: center;
+                        text-align: center;
+                        position: absolute;
+                        top: 2px;
+                        left: 6px;
+                    }
+
+                    .card-text-green {
+                        .card-text-orange;
+                        color: rgb(126, 211, 33);
+                    }
+
+                    .card-text-purple {
+                        .card-text-orange;
+                        color: rgb(189, 16, 224);
+                    }
+                }
+
+                .evaluation-text {
+                    font-size: 16px;
+                    font-weight: normal;
+                    line-height: 16px;
+                    letter-spacing: 0px;
+                    color: rgba(255, 255, 255, 0.87);
+                    text-align: center;
+                    margin-top: 12px;
+                }
+            }
+        }
+
+        .monitor-right-main {
+            margin-left: 16px;
+
+            .monitor-bid-opening {
+                background-clip: border-box;
+                filter: blur(0px);
+                margin-top: 20px;
+                margin-bottom: 20px;
+
+                .bid-opening-top {
+                    height: 155px;
+                    background-color: #12304e66;
+                    padding: 18px 16px;
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+
+                    .bid-opening-text {
+                        width: 70px;
+                        text-align: center;
+
+                        &>div:first-child {
+                            font-size: 18px;
+                            font-weight: 500;
+                            line-height: 32px;
+                            letter-spacing: 0px;
+                            color: #FFFFFF;
+                            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+                        }
+
+                        &>div:last-child {
+                            font-size: 10px;
+                            font-weight: normal;
+                            line-height: 14px;
+                            text-align: center;
+                            letter-spacing: 0px;
+                            color: rgba(255, 255, 255, 0.5);
+                            margin-top: 4px;
+                        }
+                    }
+
+                    .bid-opening-card {
+                        width: 152px;
+                        height: 100%;
+                        margin-left: 16px;
+                        .flex-center;
+
+                        &>div>div:first-child {
+                            font-size: 14px;
+                            // font-weight: bold;
+                            line-height: 22px;
+                            letter-spacing: 0px;
+                            text-align: center;
+                            color: rgba(255, 255, 255, 0.6);
+                        }
+
+                        &>div>div:last-child {
+                            font-size: 20px;
+                            font-weight: 500;
+                            line-height: 20px;
+                            text-align: center;
+                            letter-spacing: 0px;
+                            color: #FFFFFF;
+                        }
+                    }
+
+                    .bid-opening-card-first {
+                        background: #1B7EF2;
+                    }
+
+                    .bid-opening-card-second {
+                        background: rgba(27, 126, 242, 0.6);
+                    }
+
+                    .bid-opening-card-third {
+                        background: rgba(27, 126, 242, 0.3);
+                    }
+                }
+
+                .bid-opening-end {
+                    margin-top: 10px;
+                }
+
+            }
+
+            .tender-agent {
+                height: 390px;
+                margin-top: 10px;
+            }
+        }
+
+        .monitor-exception-card {
+            margin-top: 20px;
+            margin-bottom: 20px;
+        }
+
+        .monitor-tender-card {
+            margin-top: 20px;
+        }
+
+        .monitor-supplier-card {
+            margin-top: 20px;
+            text-align: right;
+        }
+
+        .monitor-category-style {
+            height: 350px;
+        }
+
+        .monitor-tender-map {
+            margin-top: 20px;
+            height: 690px;
+        }
+
+        .monitor-supplier-rank {
+            margin-top: 20px;
+            height: 760px;
+        }
+    }
+}
+
+.line-box-main {
+    box-sizing: border-box;
+    display: flex;
+
+    .card-icon {
+        height: 72px;
+        width: 72px;
+        z-index: 0;
+    }
+
+    .line-box-content {
+        margin-left: 16px;
+    }
+
+    .card-number {
+        font-size: 32px;
+        font-weight: bold;
+        line-height: 45px;
+        letter-spacing: 0px;
+        color: rgba(255, 255, 255, 0.87);
+        z-index: 0;
+    }
+
+    .card-title {
+        font-size: 20px;
+        font-weight: normal;
+        line-height: 28px;
+        letter-spacing: 0px;
+        color: rgba(255, 255, 255, 0.64);
+        z-index: 0;
+    }
+
+    .card-unit {
+        margin-left: 8px;
+    }
+}
+
+.line-overview-main {
+    background: #00000A;
+    box-sizing: border-box;
+    border: 1px solid #1B7EF2;
+    box-shadow: inset 0px 0px 87px 0px rgba(1, 194, 255, 0.4);
+    padding: 20px 18px;
+    display: flex;
+    align-items: center;
+
+    .line-overview-content {
+        width: 144px;
+
+        .overview-title {
+            height: 42px;
+
+            &>span {
+                font-size: 18px;
+                font-weight: normal;
+                line-height: 16px;
+                letter-spacing: 0px;
+                color: #FFFFFF;
+            }
+        }
+
+        .overview-number {
+            font-size: 30px;
+            font-weight: normal;
+            line-height: 36px;
+            letter-spacing: 0px;
+            color: #29F1FA;
+        }
+
+        .overview-unit {
+            font-size: 12px;
+            font-weight: normal;
+            line-height: 16px;
+            letter-spacing: 0px;
+            color: #29F1FA;
+            margin-left: 2px;
+        }
+    }
+
+
+    .overview-icon {
+        width: 65px;
+        height: 50px;
+        margin-left: 8px;
+    }
+}
+
+.line-progress-main {
+    background: #00000A;
+    box-sizing: border-box;
+    border: 1px solid #1B7EF2;
+    box-shadow: inset 0px 0px 87px 0px rgba(1, 194, 255, 0.4);
+    padding: 12px 24px 8px 12px;
+    width: 243px;
+
+    .line-progress-top {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .progress-title {
+
+            &>span {
+                font-size: 18px;
+                font-weight: normal;
+                line-height: 16px;
+                letter-spacing: 0px;
+                color: #FFFFFF;
+            }
+        }
+    }
+
+    .line-progress-bottom {
+        display: flex;
+        justify-content: space-around;
+        margin-top: 10px;
+
+        .progress-bottom-title {
+            text-align: center;
+
+            &>span {
+                font-size: 14px;
+                font-weight: normal;
+                line-height: 16px;
+                letter-spacing: 0px;
+                color: #1B7EF2;
+            }
+        }
+
+        .progress-bottom-number {
+            text-align: center;
+            margin-top: 4px;
+
+            &>span {
+                font-size: 20px;
+                font-weight: bold;
+                line-height: 16px;
+                letter-spacing: 0px;
+                color: #1B7EF2;
+            }
+        }
+
+        .progress-bottom-right {
+            &>span {
+                color: #29F1FA;
+            }
+        }
+    }
+}
+
+.monitor-scroll-table {
+
+    .ant-table {
+        background: #081a3066 !important;
+    }
+
+    .ant-table-container table>thead>tr:first-child th:first-child {
+        border-radius: 0;
+    }
+
+    .ant-table-container table>thead>tr:first-child th:last-child {
+        border-radius: 0;
+    }
+
+    .ant-table-tbody>tr.ant-table-row:hover>td {
+        background: #1b7ef266;
+    }
+
+    .monitor-table-header {
+        background: #045da866;
+        color: #fff;
+        font-size: 18px;
+        font-weight: normal;
+        line-height: 28px;
+        letter-spacing: 0px;
+        border: 0;
+        padding: 12px 8px !important;
+    }
+
+    .monitor-table-content {
+        .monitor-table-header;
+        font-size: 14px;
+        background: #081a3066;
+        border-bottom: 1px solid #2384DD;
+        cursor: pointer;
+    }
+
+    ::-webkit-scrollbar {
+        display: none;
+    }
+
+    .ant-table-cell-scrollbar {
+        display: none;
+    }
+
+    .ant-table-tbody>tr.ant-table-placeholder:hover>td {
+        background: transparent;
+    }
+
+    .ant-empty-description {
+        color: #FFFFFF;
+    }
+
+    .ant-table-tbody>tr>td {
+        border-bottom: 0;
+    }
+}
+
+.monitor-statistic-table {
+
+    .ant-table {
+        background: transparent !important;
+    }
+
+    .ant-table-container table>thead>tr:first-child th:first-child {
+        border-radius: 0;
+    }
+
+    .ant-table-container table>thead>tr:first-child th:last-child {
+        border-radius: 0;
+    }
+
+    .ant-table-tbody>tr.ant-table-row:hover>td {
+        background: #1b7ef2;
+    }
+
+    .monitor-table-header {
+        background: transparent;
+        color: #fff;
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 28px;
+        letter-spacing: 0px;
+        border: 0;
+        padding: 8px !important;
+    }
+
+    .monitor-table-content {
+        .monitor-table-header;
+        background: transparent;
+        cursor: pointer;
+    }
+
+    .ant-table-thead>tr>th {
+        background-color: transparent;
+        font-size: 16px;
+        font-weight: normal;
+        line-height: 28px;
+        letter-spacing: 0px;
+        padding: 8px !important;
+        border-bottom: 1px solid rgba(2, 86, 255, 0.6);
+    }
+
+    ::-webkit-scrollbar {
+        display: none;
+    }
+
+    .ant-table-cell-scrollbar {
+        display: none;
+    }
+
+    .monitor-table-crown-1 {
+        height: 18px;
+        width: 18px;
+        background: url("~@/assets/monitor/vip-crown-1-fill.png") left top no-repeat;
+        line-height: 18px;
+        font-size: 12px;
+        color: #ffffff;
+        text-align: center;
+        display: inline-block
+    }
+
+    .monitor-table-crown-2 {
+        .monitor-table-crown-1;
+        background: url("~@/assets/monitor/vip-crown-2-fill.png") left top no-repeat;
+    }
+
+    .monitor-table-crown-3 {
+        .monitor-table-crown-1;
+        background: url("~@/assets/monitor/vip-crown-3-fill.png") left top no-repeat;
+    }
+
+    .monitor-table-index {
+        color: #0256FF;
+    }
+
+    .ant-table-tbody>tr.ant-table-placeholder:hover>td {
+        background: transparent;
+    }
+
+    .ant-empty-description {
+        color: #FFFFFF;
+    }
+
+    .ant-table-tbody>tr>td {
+        border-bottom: 0;
+    }
+}
+
+.monitor-stage-card {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 18px 16px 16px 20px;
+    gap: 40px;
+    background: rgba(27, 126, 242, 0.12);
+
+    .stage-left-img {
+        width: 179.18px;
+        height: 179.18px;
+        box-sizing: border-box;
+        padding: 10px;
+
+        .box-wrap {
+            --front-color: #1b7ef2;
+            --back-color: #1b7ef2;
+            --outer-border-color: #1b7ef2;
+            --outer-border-width: 4px;
+            --outer-padding: 4px;
+            --inner-background: transparent;
+            --water-height: 50%;
+            --wave-display: none;
+            --border-radius: 50%;
+            width: 100%;
+            height: 100%;
+            border: var(--outer-border-width) solid var(--outer-border-color);
+            padding: var(--outer-padding);
+            box-sizing: border-box;
+            border-radius: var(--border-radius);
+        }
+
+        .box {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            box-sizing: border-box;
+            border-radius: var(--border-radius);
+            /** 解决增加圆角后超出部分不隐藏bug */
+            z-index: 1;
+            overflow: hidden;
+            background-color: var(--inner-background);
+        }
+
+        /* 波纹填充区域 */
+        .fill-area {
+            position: absolute;
+            left: 0;
+            bottom: -123.33%;
+            width: 100%;
+            height: 100%;
+            transform: translateY(calc(0% - var(--water-height)));
+            background-color: var(--front-color);
+        }
+
+        .waves {
+            position: absolute;
+            left: 0;
+            bottom: 100%;
+            width: 200%;
+            stroke: none;
+            /* 解决水球图中间有一条线问题 */
+            box-shadow: 0 10px 4px 4px var(--front-color);
+        }
+
+        .front-wave {
+            fill: var(--front-color);
+            transform: translate(-50%, 0);
+            animation: front-wave-move 3s linear infinite;
+        }
+
+        .back-wave {
+            display: var(--wave-display);
+            fill: var(--back-color);
+            transform: translate(0, 0);
+            animation: back-wave-move 1.5s linear infinite;
+        }
+
+        @keyframes front-wave-move {
+            100% {
+                transform: translate(0, 0);
+            }
+        }
+
+        @keyframes back-wave-move {
+            100% {
+                transform: translate(-50%, 0);
+            }
+        }
+
+        /* 插槽内容样式 */
+        .slot-content {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .slot-font1 {
+            color: #fff;
+            font-size: 28px;
+            font-weight: bold;
+            position: relative;
+            left: 2px;
+        }
+    }
+
+    .stage-middle-content {
+        text-align: center;
+
+        &>span {
+            font-size: 20px;
+            font-weight: normal;
+            line-height: 22px;
+            letter-spacing: 0.8px;
+            color: #FFFFFF;
+        }
+
+        &>div {
+            font-size: 36px;
+            font-weight: normal;
+            line-height: 50px;
+            letter-spacing: 0px;
+            color: #129BFF;
+            margin-top: 8px;
+        }
+    }
+
+    .stage-right-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: flex-start;
+        height: 128px;
+
+        .stage-text {
+
+            .stage-pane {
+                display: inline-block;
+                width: 12px;
+                height: 12px;
+                opacity: 1;
+            }
+
+            .stage-title {
+                font-size: 16px;
+                font-weight: normal;
+                line-height: 22px;
+                letter-spacing: 0.8px;
+                color: #FFFFFF;
+                margin-left: 8px;
+            }
+
+            .stage-number {
+                font-size: 16px;
+                font-weight: normal;
+                line-height: 22px;
+                letter-spacing: 0.8px;
+                margin-left: 8px;
+            }
+
+            .stage-pane-blue {
+                background: #1B7EF2;
+            }
+
+            .stage-pane-green {
+                background: #29F0F9;
+            }
+
+            .stage-pane-yellow {
+                background: #FFD502;
+            }
+
+            .stage-number-blue {
+                color: #1B7EF2;
+            }
+
+            .stage-number-green {
+                color: #29F0F9;
+            }
+
+            .stage-number-yellow {
+                color: #FFD502;
+            }
+        }
+    }
+}
+
+.monitor-select-dropdown {
+    .ant-dropdown-menu {
+        background-color: #081a30;
+    }
+
+    .ant-dropdown-menu-item,
+    .ant-dropdown-menu-submenu-title {
+        color: #FFFFFF;
+    }
+
+    .ant-dropdown-menu-item:hover,
+    .ant-dropdown-menu-submenu-title:hover {
+        background-color: #1b7ef2;
+    }
+}
+
+.monitor-select-btn {
+    outline: none;
+    position: relative;
+    display: inline-block;
+    font-weight: 400;
+    white-space: nowrap;
+    text-align: center;
+    background-image: none;
+    background-color: transparent;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    user-select: none;
+    touch-action: manipulation;
+    line-height: 1.5714285714285714;
+    height: 32px;
+    padding: 4px 15px;
+    border-radius: 6px;
+
+    &>span {
+        font-size: 14px;
+        color: #FFFFFF;
+    }
+
+    &:hover {
+        background-color: #12304e99;
+
+    }
+
+    &:active {
+        background-color: #12304ecc;
+    }
+}