@vtx/modals2 2.6.19

package/src/vm-appraisal-info/ListZg.tsx

@@ -0,0 +1,176 @@
+/**
+ * 考核信息-列表
+ */
+
+import React from 'react';
+import { useSetState } from 'ahooks';
+import { VtxImage } from '@vtx/components';
+import VMTable from '../vm-table';
+import { BaseService } from './api';
+interface ListProps {
+    id: string;
+    startDate: string;
+    endDate: string;
+}
+
+const ListZg = (props: ListProps) => {
+    const { id, startDate, endDate } = props;
+    const [state, setState] = useSetState({
+        filterKey: 'kh',
+        pagination: {
+            current: 1,
+            pageSize: 10,
+            total: 0,
+        },
+        sorter: '',
+    });
+    const { pagination,sorter } = state;
+    const { zgData } = BaseService.useZgRecord(
+        id,
+        startDate,
+        endDate,
+        pagination.current - 1,
+        sorter,
+    );
+
+    const getZgColor = (code: string) => {
+        let color = '#0FEBFF';
+        switch (code) {
+            case 'Zgtg':
+                color = '#1FEFA9';
+                break;
+            case 'Zgbtg':
+                color = '#FF6A65';
+                break;
+            case 'Dzg':
+                color = '#00A8FF';
+                break;
+            case 'Dzgz':
+                color = '#FFBD1E';
+                break;
+            case 'Dpf':
+                color = '#FA69FF';
+                break;
+            default:
+                color = '#0FEBFF';
+                break;
+        }
+        return color;
+    };
+
+    const zgColumns = [
+        {
+            title: '问题来源',
+            dataIndex: 'problemFromStr',
+            key: 'problemFromStr',
+        },
+        {
+            title: '问题分类',
+            dataIndex: 'problemCategoryName',
+            key: 'problemCategoryName',
+        },
+        {
+            title: '问题描述',
+            dataIndex: 'memo',
+            key: 'memo',
+            ellipsis: true,
+        },
+        {
+            title: '上报时间',
+            dataIndex: 'reportDateTimeStr',
+            key: 'reportDateTimeStr',
+        },
+        {
+            title: '上报单位',
+            dataIndex: 'responsibleUnitName',
+            key: 'responsibleUnitName',
+        },
+        {
+            title: '上报人员',
+            dataIndex: 'reportStaffName',
+            key: 'reportStaffName',
+        },
+        {
+            title: '状态',
+            dataIndex: 'orderStatusStr',
+            key: 'orderStatusStr',
+            render: (text: string, record: any) => {
+                return (
+                    <span style={{ color: getZgColor(record.orderStatus) }}>
+                        <div
+                            style={{
+                                display: 'inline-block',
+                                width: '8px',
+                                height: '8px',
+                                borderRadius: '50%',
+                                marginRight: '6px',
+                                background: getZgColor(record.orderStatus),
+                            }}
+                        ></div>
+                        {text}
+                    </span>
+                );
+            },
+        },
+        {
+            title: '图片',
+            dataIndex: 'operation',
+            key: 'operation',
+            width: 50,
+            render: (_text: string, record: any) => {
+                let photos: any = {};
+                if (record.photos) {
+                    photos = JSON.parse(record.photos)[0];
+                }
+
+                return photos?.id ? (
+                    <VtxImage
+                        style={{ width: '45px', height: '45px' }}
+                        alt={photos?.name}
+                        errorText=""
+                        src={`/cloudFile/common/downloadFile?id=${photos?.id}`}
+                    />
+                ) : (
+                    <span>-</span>
+                );
+            },
+        },
+    ];
+
+    const pageChange = (page: number) => {
+        setState({
+            pagination: {
+                ...pagination,
+                current: page,
+            },
+        });
+    };
+
+    const tableProps = {
+        height: 440,
+        pagination: {
+            ...pagination,
+            total: zgData?.total || 0,
+            defaultPageSize: 10,
+            onChange: pageChange,
+        },
+    };
+
+    const handleTableChange = (sorter: any) => {
+        setState({
+            sorter: `${sorter.columnKey},${sorter.order === 'ascend' ? 'ASC' : 'DESC'}`,
+        });
+    };
+
+    return (
+        <VMTable
+            columns={zgColumns}
+            rowKey="id"
+            {...tableProps}
+            handleTableChange={handleTableChange}
+            dataSource={zgData?.rows || []}
+        />
+    );
+};
+
+export default ListZg;

package/src/vm-appraisal-info/Wtlx.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import ReactEcharts from 'echarts-for-react';
+import useSettings from '../vm-hooks/useSettings';
+import SubTitle from '../vm-sub-title';
+import NoData from '../vm-nodata';
+
+interface TypeProps {
+    orderCategory: Array<{ name: string; value: string }>;
+}
+
+const Wtlx = (props: TypeProps) => {
+    const { orderCategory } = props;
+    const { isDark, chartColor, chartFontColor } = useSettings();
+
+    let option = {
+        color: chartColor,
+        backgroundColor: 'transparent',
+        tooltip: {
+            show: true,
+            trigger: 'item',
+        },
+        legend: {
+            orient: 'vertical',
+            left: '45%',
+            top: 'middle',
+            align: 'left',
+            itemGap: 12,
+            itemWidth: 10,
+            itemHeight: 10,
+            formatter: function(name: string) {
+                const value = orderCategory.find((item: any) => item.name === name);
+                if (value) {
+                    return `\t\t${name}\t\t${value.value}次\t\t`;
+                } else {
+                    return '';
+                }
+            },
+            textStyle: {
+                fontSize: 14,
+                color: chartFontColor,
+            },
+            pageIconColor: chartFontColor,
+            pageIconInactiveColor: chartFontColor,
+            pageTextStyle: {
+                color: chartFontColor,
+            },
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: ['55%', '75%'],
+                center: ['20%', '50%'],
+                hoverAnimation: true,
+                z: 10,
+                itemStyle: {
+                    normal: {
+                        borderWidth: 2,
+                        borderColor: isDark ? '#003359' : '#ffffff',
+                    },
+                },
+                label: {
+                    show: false,
+                },
+                data: orderCategory,
+                labelLine: {
+                    show: false,
+                },
+            },
+        ],
+    };
+
+    return (
+        <div className="appraisal-content-zg-wt">
+            <SubTitle title="问题类型分析" />
+            {orderCategory?.length ? (
+                <ReactEcharts
+                    option={option}
+                    notMerge
+                    lazyUpdate
+                    style={{ height: '200px', width: '100%' }}
+                />
+            ) : (
+                <NoData style={{ height: '100%', width: '100%' }} />
+            )}
+        </div>
+    );
+};
+
+export default Wtlx;

package/src/vm-appraisal-info/Zgxxhz.tsx

@@ -0,0 +1,49 @@
+/**
+ * 考核信息汇总
+ */
+
+import React from 'react';
+import SubTitle from '../vm-sub-title';
+import useSettings from '../vm-hooks/useSettings';
+
+import zggd from './imgs/zggd.png';
+import wtlx from './imgs/wtlx.png';
+
+import zggdLight from './imgs/zggd_light.png';
+import wtlxLight from './imgs/wtlx_light.png';
+
+interface TypeProps {
+    orderInfo: { taskNum: number; categoryNum: number };
+}
+
+const Zgxxhz = (props: TypeProps) => {
+    const { orderInfo } = props;
+    const { theme } = useSettings();
+    return (
+        <>
+            <SubTitle title="整改信息汇总" />
+            <div className="appraisal-content-zg-base">
+                <div className="appraisal-content-zg-base-item">
+                    <img src={theme === 'dark' ? zggd : zggdLight} />
+                    <div>
+                        <div className="appraisal-content-zg-base-item--name">整改工单</div>
+                        <div className="appraisal-content-zg-base-item--value">
+                            <span>{orderInfo?.taskNum || 0}</span>次
+                        </div>
+                    </div>
+                </div>
+                <div className="appraisal-content-zg-base-item">
+                    <img src={theme === 'dark' ? wtlx : wtlxLight} />
+                    <div>
+                        <div className="appraisal-content-zg-base-item--name">问题类型</div>
+                        <div className="appraisal-content-zg-base-item--value">
+                            <span>{orderInfo?.categoryNum || 0}</span>个
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Zgxxhz;

package/src/vm-appraisal-info/api.ts

@@ -0,0 +1,102 @@
+import { request } from '@vtx/utils';
+import { useRequest } from 'ahooks';
+const BaseService = {
+    useAppraisal: (id: string, startTime: string, endTime: string) => {
+        // 考核信息汇总
+        const { data: checkInfoRes } = useRequest(
+            () =>
+                request.get('/cloud/zykh-reborn/kanban/checkInfoBySourceId', {
+                    data: { jcssId: id, startTime, endTime },
+                }),
+            { refreshDeps: [id, startTime, endTime] },
+        );
+        const checkInfo = checkInfoRes?.data ? checkInfoRes.data : {};
+
+        //  整改信息汇总
+        const { data: orderInfoRes } = useRequest(
+            () =>
+                request.get('/cloud/zykh-reborn/kanban/orderInfoBySourceId', {
+                    data: { jcssId: id, startTime, endTime },
+                }),
+            { refreshDeps: [id, startTime, endTime] },
+        );
+        const orderInfo = orderInfoRes?.data?.length > 0 ? orderInfoRes?.data[0] : {};
+
+        // 扣分因子分析
+        const { data: deductPointRes } = useRequest(
+            () =>
+                request.get('/cloud/zykh-reborn/kanban/checkRuleBySourceId', {
+                    data: { jcssId: id, startTime, endTime },
+                }),
+            { refreshDeps: [id, startTime, endTime] },
+        );
+        const deductPoint = deductPointRes?.data || {};
+
+        // 问题类型分析
+        const { data: orderCategoryRes } = useRequest(
+            () =>
+                request.get('/cloud/zykh-reborn/kanban/orderCategoryBySourceId', {
+                    data: { jcssId: id, startTime, endTime },
+                }),
+            { refreshDeps: [id, startTime, endTime] },
+        );
+        const orderCategory =
+            orderCategoryRes?.data?.length > 0
+                ? orderCategoryRes?.data.map((ele: any) => ({
+                      name: ele.categoryName,
+                      value: ele.taskNum,
+                  }))
+                : [];
+
+        return {
+            checkInfo,
+            orderInfo,
+            deductPoint,
+            orderCategory,
+        };
+    },
+    useKhRecord: (id: string, startTime: string, endTime: string, page: number, sort: string) => {
+        // 考核列表
+        const { data: khRes } = useRequest(
+            () =>
+                request.get('/cloud/zykh-reborn/check/record/page', {
+                    data: {
+                        jcssId: id,
+                        startTime,
+                        endTime,
+                        page,
+                        size: 10,
+                        sort,
+                    },
+                }),
+            { refreshDeps: [id, startTime, endTime, page, sort] },
+        );
+        const khData = khRes?.data;
+        return {
+            khData,
+        };
+    },
+    useZgRecord: (id: string, startTime: string, endTime: string, page: number, sort: string) => {
+        // 整改列表
+        const { data: zgRes } = useRequest(
+            () =>
+                request.get('/cloud/zykh-reborn/orderTask/page', {
+                    data: {
+                        jcssId: id,
+                        startReportDateTime: startTime,
+                        endReportDateTime: endTime,
+                        page,
+                        size: 10,
+                        sort,
+                    },
+                }),
+            { refreshDeps: [id, startTime, endTime, page, sort] },
+        );
+        const zgData = zgRes?.data;
+        return {
+            zgData,
+        };
+    },
+};
+
+export { BaseService };

package/src/vm-appraisal-info/index.tsx

@@ -0,0 +1,138 @@
+/**
+ * 通用-考核信息
+ */
+
+import React from 'react';
+import { useSetState } from 'ahooks';
+import moment from 'moment';
+import { VMRangePicker } from '../vm-filter';
+import SubTabs, { SubTabPane } from '../vm-sub-tabs';
+import AppraisalBase from './AppraisalBase';
+import AppraisalInfo from './AppraisalTop5';
+import Zgxxhz from './Zgxxhz';
+import Wtlx from './Wtlx';
+import List from './List';
+import { BaseService } from './api';
+import useSettings from '../vm-hooks/useSettings';
+import './style';
+
+import chart from './imgs/chart.png';
+import chartActive from './imgs/chart_active.png';
+import chartActiveLight from './imgs/chart_active_light.png';
+import list from './imgs/list.png';
+import listActive from './imgs/list_active.png';
+import listActiveLight from './imgs/list_active_light.png';
+
+interface TypeProps {
+    id: string;
+}
+
+const Appraisal: React.FC<TypeProps> = props => {
+    const { id } = props;
+    const { isDark } = useSettings();
+    const [state, setState] = useSetState({
+        startDate: moment()
+            .startOf('D')
+            .format('YYYY-MM-DD'),
+        endDate: moment()
+            .endOf('D')
+            .format('YYYY-MM-DD'),
+        tabKey: '1',
+    });
+    const { startDate, endDate, tabKey } = state;
+    const { checkInfo, deductPoint, orderInfo, orderCategory } = BaseService.useAppraisal(
+        id,
+        `${startDate} 00:00:00`,
+        `${endDate} 23:59:59`,
+    );
+
+    const handleDateChange = (start: string, end: string) => {
+        setState({
+            startDate: start,
+            endDate: end,
+        });
+    };
+
+    return (
+        <div className="appraisal">
+            <div className="appraisal-head">
+                <SubTabs
+                    onChange={(key: string) => {
+                        setState({
+                            tabKey: key,
+                        });
+                    }}
+                    activeKey={tabKey}
+                >
+                    {[
+                        {
+                            name: (
+                                <div>
+                                    <img
+                                        src={
+                                            tabKey === '1'
+                                                ? isDark
+                                                    ? listActive
+                                                    : listActiveLight
+                                                : list
+                                        }
+                                    />
+                                    图表
+                                </div>
+                            ),
+                            key: '1',
+                        },
+                        {
+                            name: (
+                                <div>
+                                    <img
+                                        src={
+                                            tabKey === '2'
+                                                ? isDark
+                                                    ? chartActive
+                                                    : chartActiveLight
+                                                : chart
+                                        }
+                                    />
+                                    列表
+                                </div>
+                            ),
+                            key: '2',
+                        },
+                    ].map((ele: any) => (
+                        <SubTabPane subKey={ele.key} key={ele.key} tab={ele.name} />
+                    ))}
+                </SubTabs>
+                <div className="appraisal-head-date">
+                    <VMRangePicker
+                        value={[moment(startDate), moment(endDate)]}
+                        onChange={(dates: any) =>
+                            dates &&
+                            handleDateChange(
+                                moment(dates[0]).format('YYYY-MM-DD'),
+                                moment(dates[1]).format('YYYY-MM-DD'),
+                            )
+                        }
+                    />
+                </div>
+            </div>
+            {tabKey === '1' && (
+                <div className="appraisal-content-chart">
+                    <div className="appraisal-content-kh">
+                        <AppraisalBase checkInfo={checkInfo} />
+                        <AppraisalInfo deductPoint={deductPoint} />
+                    </div>
+                    <div className="appraisal-content-zg">
+                        <Zgxxhz orderInfo={orderInfo} />
+                        <Wtlx orderCategory={orderCategory} />
+                    </div>
+                </div>
+            )}
+            {tabKey === '2' && (
+                <List id={id} startDate={`${startDate} 00:00:00`} endDate={`${endDate} 23:59:59`} />
+            )}
+        </div>
+    );
+};
+
+export default Appraisal;