safety-eval-service-frontend/src/pages/Container/MonitorManage/EvalProjectMonitor/index.js

import React, { useState, useEffect } from "react";
import {
  Row,
  Col,
  Card,
  Statistic,
  Table,
  Tag,
  Form,
  Space,
  Tooltip,
} from "antd";
import dayjs from "dayjs";
import { AntdTableFuncControl } from "@cqsjjb/jjb-common-decorator/antd";
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
import SearchForm from "@cqsjjb/jjb-react-admin-component/SearchForm";
import ControlWrapper from "@cqsjjb/jjb-react-admin-component/ControlWrapper";
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { NS_SAFETY_EVAL_BUSINESS } from "~/enumerate/namespace";
import { tools } from "@cqsjjb/jjb-common-lib";
import {
  EVAL_TYPE_OPTIONS,
  EVAL_TYPE_MAP,
  MONITOR_WARING_STATUS_OPTIONS,
} from "~/enumerate/constant";
import {
  QUALIFICATION_INDUSTRY_OPTIONS,
  QUALIFICATION_INDUSTRY_OPTIONS_MAP,
} from "~/enumerate/enterpriseOptions";
import "./index.less";

const { router } = tools;

const STAT_ITEMS = [
  { key: "monitoringCount", title: "在监项目", color: "#1677ff" },
  { key: "normalCount", title: "正常执行", color: "#52c41a" },
  { key: "warningCount", title: "进度/人员预警", color: "#faad14" },
  { key: "monthPlanCompleteCount", title: "本月计划完成", color: "#722ed1" },
];

const EvalProjectMonitor = (props) => {
  const [searchForm] = Form.useForm();
  const [dataSource, setDataSource] = useState([]);
  const [total, setTotal] = useState(0);

  const { safetyEvalBusiness, evalProjectMonitorStat, evalProjectMonitorPage } =
    props;
  const { evalProjectMonitorStatLoading, evalProjectMonitorPageLoading } =
    safetyEvalBusiness || {};
  const statData = safetyEvalBusiness?.evalProjectMonitorStat || {};

  const getStat = async () => {
    evalProjectMonitorStat();
  };

  const getData = async () => {
    const params = {
      ...router.query,
      current: router.query.current || 1,
      size: router.query.size || 10,
    };
    const res = await evalProjectMonitorPage(params);
    if (res?.success !== false) {
      setDataSource(res?.data || []);
      setTotal(res?.total || 0);
    }
  };

  useEffect(() => {
    searchForm.setFieldsValue({
      ...router.query,
      planEndDateRange:
        router.query.planEndDateStart && router.query.planEndDateEnd
          ? [
              dayjs(router.query.planEndDateStart),
              dayjs(router.query.planEndDateEnd),
            ]
          : undefined,
    });
    getStat();
    getData();
  }, []);

  const handleSearch = (values) => {
    const { planEndDateRange, ...rest } = values;
    router.query = {
      ...rest,
      planEndDateStart:
        planEndDateRange?.[0]?.format?.("YYYY-MM-DD") || undefined,
      planEndDateEnd:
        planEndDateRange?.[1]?.format?.("YYYY-MM-DD") || undefined,
      current: 1,
      size: 10,
    };
    getData();
  };

  const handleReset = (values) => {
    searchForm.resetFields();
    values.planEndDateStart = undefined;
    values.planEndDateEnd = undefined;
    router.query = { ...values, current: 1, size: 10 };
    getData();
  };

  const handlePageChange = (pagination) => {
    router.query = {
      ...router.query,
      current: pagination.current,
      size: pagination.pageSize,
    };
    getData();
  };

  const renderWaringStatus = (_, record) => {
    if (record.waringStatus === "NORMAL") {
      return <Tag color="success">正常</Tag>;
    }
    const tags = [];
    if (record.processWaringMsg) {
      tags.push(
        <Tooltip key="process" title={record.processWaringMsg}>
          <Tag color="warning">进度预警</Tag>
        </Tooltip>,
      );
    }
    if (record.personnelWaringMsg) {
      tags.push(
        <Tooltip key="personnel" title={record.personnelWaringMsg}>
          <Tag color="error">人员异常</Tag>
        </Tooltip>,
      );
    }

    return <Space size={4}>{tags}</Space>;
  };

  const columns = [
    { title: "项目编号", dataIndex: "projectNo", width: 140 },
    { title: "项目名称", dataIndex: "projectName", ellipsis: true, width: 220 },
    { title: "评价机构", dataIndex: "orgName", ellipsis: true, width: 200 },
    {
      title: "评价类型",
      dataIndex: "evalTypeCode",
      width: 120,
      render: (code) => EVAL_TYPE_MAP[code] || code,
    },
    {
      title: "行业",
      dataIndex: "industryCode",
      width: 140,
      ellipsis: true,
      render: (code) => QUALIFICATION_INDUSTRY_OPTIONS_MAP[code] || code,
    },
    { title: "负责人", dataIndex: "leaderName", width: 90 },
    { title: "计划完成", dataIndex: "planEndDate", width: 120 },
    {
      title: "状态",
      width: 100,
      render: renderWaringStatus,
    },
    {
      title: "操作",
      width: 180,
      fixed: "right",
      render: (_, record) => (
        <Space size={4}>
          <Button type="primary"  onClick={()=>{}}>
            查看过程
          </Button>
        </Space>
      ),
    }
  ];

  return (
    <PageLayout title="安评项目实时监控">
      <Row gutter={16} className="epm-stat-row">
        {STAT_ITEMS.map((item) => (
          <Col span={6} key={item.key}>
            <Card size="small">
              <Statistic
                title={item.title}
                value={statData[item.key] ?? "-"}
                valueStyle={{ color: item.color }}
              />
            </Card>
          </Col>
        ))}
      </Row>

      <SearchForm
        form={searchForm}
        loading={false}
        style={{ marginBottom: 16 }}
        formLine={[
          <Form.Item key="projectNameOrNo" name="projectNameOrNo">
            <ControlWrapper.Input
              label="项目名称/编号"
              placeholder="请输入"
              allowClear
            />
          </Form.Item>,
          <Form.Item key="evalTypeCode" name="evalTypeCode">
            <ControlWrapper.Select
              label="评价类型"
              placeholder="全部"
              allowClear
              options={EVAL_TYPE_OPTIONS}
            />
          </Form.Item>,
          <Form.Item key="industryCode" name="industryCode">
            <ControlWrapper.Select
              label="行业类别"
              placeholder="全部"
              allowClear
              options={QUALIFICATION_INDUSTRY_OPTIONS}
              showSearch
              optionFilterProp="label"
            />
          </Form.Item>,
          <Form.Item key="leaderName" name="leaderName">
            <ControlWrapper.Input
              label="项目负责人"
              placeholder="请输入"
              allowClear
            />
          </Form.Item>,
          <Form.Item key="waringStatus" name="waringStatus">
            <ControlWrapper.Select
              label="监管状态"
              placeholder="全部"
              allowClear
              options={MONITOR_WARING_STATUS_OPTIONS}
            />
          </Form.Item>,
          <Form.Item key="planEndDateRange" name="planEndDateRange">
            <ControlWrapper.DatePicker.RangePicker
              label="计划完成时间"
              style={{ width: "100%" }}
            />
          </Form.Item>,
        ]}
        onFinish={handleSearch}
        onReset={handleReset}
      />

      <Table
        rowKey="id"
        columns={columns}
        dataSource={dataSource}
        loading={evalProjectMonitorPageLoading}
        scroll={{ y: props.scrollY, x: 1200 }}
        pagination={{
          total,
          current: Number(router.query.current) || 1,
          pageSize: Number(router.query.size) || 10,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (t) => `共 ${t} 条`,
        }}
        onChange={handlePageChange}
      />
    </PageLayout>
  );
};

export default Connect(
  [NS_SAFETY_EVAL_BUSINESS],
  true,
)(AntdTableFuncControl(EvalProjectMonitor));