@vtx/modals2 2.6.19

package/src/index.ts

@@ -0,0 +1,14 @@
+export { default as VtxHousingEstateModal } from './vtx-housing-estate-modal';
+export { default as VtxThrowPointModal } from './vtx-throw-point-modal';
+export { default as VtxFacilityModal } from './vtx-facility-modal'
+export { default as VtxDefaultModal } from './vtx-default-modal';
+export type { VtxDefaultModalProps } from './vtx-default-modal';
+export { default as VtxCarModal } from './vtx-car-modal';
+export { default as VtxStaffModal } from './vtx-staff-modal';
+export { default as VtxCpModal } from './vtx-cp-modal';
+export { default as VtxDfModal } from './vtx-df-modal';
+export { default as VtxRoadModal } from './vtx-road-modal';
+export { default as VtxWrModal } from './vtx-wr-modal';
+export type { VtxWrProps } from './vtx-wr-modal'
+export {default as VtxZgModal} from './vtx-zg-modal';
+export {default as VtxKhModal} from './vtx-kh-modal';

package/src/style/index.less

@@ -0,0 +1,8 @@
+// @webkit-scrollbar-width: 8px;
+// @webkit-scrollbar-height: 8px;
+// @webkit-scrollbar-color: hsla(0, 0%, 80%, 0.08);
+// @webkit-scrollbar-thumb-color: rgba(0, 0, 0, 0.05);
+// @webkit-scrollbar-thumb-radius: 4px;
+// @statistics-text-color: rgba(0, 0, 0, 0.65);
+// @table-row-odd: '#f6f6f6';
+@import './themes/index';

package/src/style/index.tsx

@@ -0,0 +1,14 @@
+import './index.less';
+
+import 'antd/es/date-picker/style/css';
+import 'antd/es/select/style/css';
+import 'antd/es/tabs/style/css';
+import 'antd/es/button/style/css';
+import 'antd/es/dropdown/style/css';
+import 'antd/es/menu/style/css';
+import 'antd/es/table/style/css';
+import 'antd/es/modal/style/css';
+import '@vtx/player/lib/live-control/style/css';
+import '@vtx/player/lib/history-control/style/css';
+import '@vtx/player/lib/bill-player/style/css';
+// import 'antd/es/image/style/css';

package/src/style/themes/dark.less

@@ -0,0 +1,68 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+
+@import './default.less';
+
+// ScrollBar
+* {
+    &::-webkit-scrollbar {
+        width: 0px;
+        height: 0px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+        border-radius: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: transparent;
+        border-radius: 5px;
+    }
+
+    &::-webkit-scrollbar-corner {
+        background-color: transparent;
+    }
+
+    // &::-webkit-scrollbar-thumb:hover {
+    //     background: var(--scroll-bar-hover-bg);
+    // }
+}
+
+.vtx-business-modal-wrap {
+    &.dark {
+        --modal-content-bg: #0b1315;
+        --modal-border-color: #69958a;
+        --head-bg: #122a2c;
+        --bg-color: linear-gradient(0deg, #081e21cc, #000c);
+        --bg-color2: #162123;
+        --sub-bg-color: #ffffff0d;
+        --title-bg-color: #1a292bff;
+        --title-border: 1px solid transparent;
+        --title-color: white;
+        --title-color2: #a9d5d3;
+        --sub-title-color: #00f0ff;
+        --label-color: #cafdffff;
+        --info-color: #ffffffff;
+        --border-color: '#3C7073FF';
+        --scroll-bar-bg: #39cbc3aa;
+        --scroll-bar-hover-bg: #39cbc3ff;
+        --scroll-bar-track-bg: transparent;
+        --button-text-color--defalut: #c9e6e8;
+        --button-text-color--active: #ffffff;
+        --button-background-color--default: #1a5561;
+        --button-background-color--active: linear-gradient(0deg, #3195aa, #0f5160);
+        --button-checked-color: #1890ff;
+        --arrow-icon-color: #355e5f;
+        --block-bg-color: rgba(255, 255, 255, 0.1);
+        --block-bg-color2: rgba(48, 118, 114, 0.2);
+        --info-active: #40ffd3;
+        --info-active2: #52c41a;
+        --info-danger: #fd3a15;
+        --info-warnning: #f7d93d;
+        --table-head-bg: rgba(0, 173, 177, 0.1);
+        --timeline-active: #24f2ff;
+        --calendar-border: #35444c;
+        --calendar-thead-bg: #29373e;
+        --calendar-bg: rgba(255, 255, 255, 0.1);
+    }
+}

package/src/style/themes/default.less

@@ -0,0 +1,31 @@
+.vtx-business-modal-wrap {
+    --modal-content-bg: #f7f9fb;
+    --modal-border-color: #fff;
+    --head-bg: #fff;
+    --bg-color2: #fff;
+    --label-color: rgba(0, 0, 0, 0.65);
+    --table-head-bg: rgba(24, 144, 255, 0.1);
+    --title-color: #222;
+    --title-color2: #222;
+    --block-bg-color: rgba(0, 0, 0, 0.1);
+    --calendar-border: #ececec;
+    --calendar-thead-bg: #fff;
+    --calendar-bg: #fff;
+    --info-danger: #fd3a15;
+    --info-warnning: #f7d93d;
+    --info-active2: #52c41a;
+
+    --bg-color: white;
+    --sub-bg-color: #f3f3f380;
+    --title-bg-color: white;
+    --title-border: 1px solid #dbdbdbff;
+    --sub-title-color: #222;
+
+    --info-color: #222;
+    --border-color: '#DADADAFF';
+    --scroll-bar-bg: #c0c0c0;
+    --scroll-bar-hover-bg: #adadad;
+    --scroll-bar-track-bg: #fafafa;
+    --button-checked-color: #1890ff;
+    --button-color: #222;
+}

package/src/style/themes/index.less

@@ -0,0 +1 @@
+@import './dark.less';

package/src/typings.d.ts

@@ -0,0 +1,15 @@
+declare module '*.png';
+declare module '*.svg';
+declare module '*.css';
+declare module '*.less';
+declare module '@vtx/utils';
+declare module '@vtx/components';
+declare module '@vtx/modals';
+declare module 'dumi';
+declare module 'lodash';
+declare module 'echarts';
+declare module 'echarts-for-react';
+interface Window {
+    BMapGL: any;
+    console: any;
+}

package/src/util/index.ts

@@ -0,0 +1,23 @@
+// 秒转化为时间的格式化字符串
+export function secondToFormatTime(times: number): string {
+    if (times <= 0) return '--';
+    let timeStr = '';
+    let remain = times;
+
+    let days = Math.floor(remain / (24 * 60 * 60));
+    if (days) timeStr += `${days}天`;
+
+    remain = remain % (24 * 60 * 60);
+    let hours = Math.floor(remain / (60 * 60));
+    if (hours) timeStr += `${hours}h`;
+
+    remain = remain % (60 * 60);
+    let minutes = Math.floor(remain / 60);
+    if (minutes) timeStr += `${minutes}min`;
+
+    remain = remain % 60;
+    let seconds = Math.floor(remain);
+    if (seconds) timeStr += `${seconds}s`;
+
+    return timeStr;
+}

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

@@ -0,0 +1,59 @@
+/**
+ * 考核信息汇总
+ */
+
+import React from 'react';
+import SubTitle from '../vm-sub-title';
+import useSettings from '../vm-hooks/useSettings';
+
+import ljkf from './imgs/ljkf.png';
+import kfyz from './imgs/kfyz.png';
+import khcs from './imgs/khcs.png';
+
+import ljkfLight from './imgs/ljkf_light.png';
+import kfyzLight from './imgs/kfyz_light.png';
+import khcsLight from './imgs/khcs_light.png';
+
+interface TypeProps {
+    checkInfo: { checkNum: number; standardNum: number; deductPoints: number };
+}
+const AppraisalBase = (props: TypeProps) => {
+    const { checkInfo } = props;
+    const { theme } = useSettings();
+    return (
+        <div>
+            <SubTitle title="考核信息汇总" />
+            <div className="appraisal-content-kh-row">
+                <div className="appraisal-content-kh-item">
+                    <img src={theme === 'dark' ? khcs : khcsLight} />
+                    <div>
+                        <div className="appraisal-content-kh-item--name">考核次数</div>
+                        <div className="appraisal-content-kh-item--value">
+                            <span>{checkInfo?.checkNum || 0}</span>次
+                        </div>
+                    </div>
+                </div>
+                <div className="appraisal-content-kh-item">
+                    <img src={theme === 'dark' ? kfyz : kfyzLight} />
+                    <div>
+                        <div className="appraisal-content-kh-item--name">扣分因子</div>
+                        <div className="appraisal-content-kh-item--value">
+                            <span>{checkInfo?.standardNum || 0}</span>个
+                        </div>
+                    </div>
+                </div>
+                <div className="appraisal-content-kh-item">
+                    <img src={theme === 'dark' ? ljkf : ljkfLight} />
+                    <div>
+                        <div className="appraisal-content-kh-item--name">累计扣分</div>
+                        <div className="appraisal-content-kh-item--value">
+                            <span>{checkInfo?.deductPoints || 0}</span>分
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AppraisalBase;

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

@@ -0,0 +1,77 @@
+/**
+ * 考核信息汇总
+ */
+
+import NoData from '../vm-nodata';
+import React from 'react';
+import SubTitle from '../vm-sub-title';
+
+import top1 from './imgs/1.png';
+import top2 from './imgs/2.png';
+import top3 from './imgs/3.png';
+import top4 from './imgs/4.png';
+import top5 from './imgs/5.png';
+
+interface DeductPointItem {
+    standardName: string;
+    standardNum: number;
+    deductPoints: number;
+}
+
+interface TypeProps {
+    deductPoint: Array<DeductPointItem>;
+}
+
+const AppraisalTop5 = (props: TypeProps) => {
+    const { deductPoint } = props;
+
+    const imgs = (index: number) => {
+        let src = '';
+        switch (index) {
+            case 1:
+                src = top1;
+                break;
+            case 2:
+                src = top2;
+                break;
+            case 3:
+                src = top3;
+                break;
+            case 4:
+                src = top4;
+                break;
+            case 5:
+                src = top5;
+                break;
+            default:
+                break;
+        }
+        return src;
+    };
+
+    return (
+        <div className="appraisal-content-kh-top">
+            <SubTitle title="扣分因子分析TOP5" />
+            {deductPoint?.length > 0 ? (
+                deductPoint.map((ele: any, index: number) => (
+                    <div className="appraisal-content-kh-topItem" key={index}>
+                        <div className="appraisal-content-kh-topItem-content">
+                            <img src={imgs(index + 1)} />
+                            {ele.standardName}
+                        </div>
+                        <div>
+                            <span>{ele.standardNum}</span>次
+                        </div>
+                        <div className="appraisal-content-kh-topItem-score">
+                            <span>{ele.deductPoints}</span>分
+                        </div>
+                    </div>
+                ))
+            ) : (
+                <NoData style={{ height: '100%', width: '100%' }} />
+            )}
+        </div>
+    );
+};
+
+export default AppraisalTop5;

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

@@ -0,0 +1,50 @@
+/**
+ * 考核信息-列表
+ */
+
+import React from 'react';
+import { useSetState } from 'ahooks';
+import { SubTabsLine } from '../vm-sub-tabs';
+import ListKh from './ListKh';
+import ListZg from './ListZg';
+interface ListProps {
+    id: string;
+    startDate: string;
+    endDate: string;
+}
+
+const List = (props: ListProps) => {
+    const [state, setState] = useSetState({
+        filterKey: 'kh',
+    });
+    const { filterKey } = state;
+
+    return (
+        <div className="appraisal-content-list">
+            <SubTabsLine
+                items={[
+                    {
+                        label: `考核`,
+                        key: 'kh',
+                    },
+                    {
+                        label: `整改`,
+                        key: 'zg',
+                    },
+                ]}
+                activeKey={filterKey}
+                onChange={key => {
+                    setState({
+                        filterKey: key,
+                    });
+                }}
+            />
+            <div className="appraisal-content-list-table">
+                {filterKey === 'kh' && <ListKh {...props} />}
+                {filterKey === 'zg' && <ListZg {...props} />}
+            </div>
+        </div>
+    );
+};
+
+export default List;

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

@@ -0,0 +1,168 @@
+/**
+ * 考核信息-列表
+ */
+
+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 ListKh = (props: ListProps) => {
+    const { id, startDate, endDate } = props;
+    const [state, setState] = useSetState({
+        pagination: {
+            current: 1,
+            pageSize: 10,
+            total: 0,
+        },
+        sorter: '',
+    });
+    const { pagination, sorter } = state;
+    const { khData } = BaseService.useKhRecord(
+        id,
+        startDate,
+        endDate,
+        pagination.current - 1,
+        sorter,
+    );
+
+    const getColor = (code: string) => {
+        let color = '';
+        switch (code) {
+            case 'PASS':
+                color = '#1FEFA9';
+                break;
+            case 'NOPASS':
+                color = '#FF6A65';
+                break;
+            case 'REVOKE':
+                color = '#00A8FF';
+                break;
+            case 'APPEAL':
+                color = '#FFBD1E';
+                break;
+            case 'WAITREVIEW':
+                color = '#FA69FF';
+                break;
+            default:
+                color = '#0FEBFF';
+                break;
+        }
+        return color;
+    };
+    const columns = [
+        {
+            title: '考核扣分',
+            dataIndex: 'totalDeductPoints',
+            key: 'totalDeductPoints',
+        },
+        {
+            title: '考核时间',
+            dataIndex: 'checkDate',
+            key: 'checkDate',
+            width: 140,
+            sorter: true,
+        },
+        {
+            title: '考核单位',
+            dataIndex: 'checkDepartName',
+            key: 'checkDepartName',
+            width: 160,
+            ellipsis: true,
+        },
+        {
+            title: '考核人',
+            dataIndex: 'checkUserName',
+            key: 'checkUserName',
+        },
+        {
+            title: '记录状态',
+            dataIndex: 'statusName',
+            key: 'statusName',
+            render: (text: string, record: any) => {
+                return (
+                    <span style={{ color: getColor(record.statusCode) }}>
+                        <div
+                            style={{
+                                display: 'inline-block',
+                                width: '8px',
+                                height: '8px',
+                                borderRadius: '50%',
+                                marginRight: '6px',
+                                background: getColor(record.statusCode),
+                            }}
+                        ></div>
+                        {text}
+                    </span>
+                );
+            },
+        },
+        {
+            title: '图片',
+            dataIndex: 'operation',
+            key: 'operation',
+            width: 50,
+            render: (_text: string, record: any) => {
+                let photos: any = {};
+                if (record.files) {
+                    photos = JSON.parse(record.files)[0];
+                }
+
+                return photos?.id ? (
+                    <VtxImage
+                        style={{ width: '45px', height: '45px' }}
+                        alt={photos?.name}
+                        errorText=""
+                        isDark={true}
+                        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: khData?.total || 0,
+            defaultPageSize: 10,
+            onChange: pageChange,
+        },
+    };
+
+    const handleTableChange = (sorter: any) => {
+        setState({
+            sorter: `${sorter.columnKey},${sorter.order === 'ascend' ? 'ASC' : 'DESC'}`,
+        });
+    };
+
+    return (
+        <VMTable
+            columns={columns}
+            rowKey="id"
+            {...tableProps}
+            handleTableChange={handleTableChange}
+            dataSource={khData?.rows || []}
+        />
+    );
+};
+
+export default ListKh;