@vtx/modals2 2.6.19 → 2.6.21

package/src/vtx-staff-modal/components/AlarmInfo/List.tsx

@@ -1,135 +0,0 @@
-/**
- * 报警信息-列表
- */
-
-import React from 'react';
-import { useSetState } from 'ahooks';
-import { SubTabsLine } from '../../../vm-sub-tabs';
-import VMTable from '../../../vm-table';
-import { secondToFormatTime } from '../../../util';
-import { AlarmService } from '../../api';
-
-interface ListProps {
-    id: string;
-    alarmTabs: Array<{ key: string; label: string }>;
-    startDate: string;
-    endDate: string;
-}
-
-const List = (props: ListProps) => {
-    const { alarmTabs, id, startDate, endDate } = props;
-    const [state, setState] = useSetState({
-        alarmTypeCode: 'all',
-        pagination: {
-            current: 1,
-            pageSize: 10,
-            total: 0,
-        },
-        sortBy: '',
-        order: '',
-    });
-    const { alarmTypeCode, pagination, sortBy, order } = state;
-    const { alarmRecordRes } = AlarmService.useAlarmRecord(
-        id,
-        alarmTypeCode === 'all' ? '' : alarmTypeCode,
-        `${startDate} 00:00:00`,
-        `${endDate} 23:59:59`,
-        pagination.current - 1,
-        sortBy,
-        order,
-    );
-    const records = {
-        total: alarmRecordRes?.total || 0,
-        rows: alarmRecordRes?.rows || [],
-    };
-    const columns = [
-        {
-            title: '报警类型',
-            dataIndex: 'alarmTypeName',
-            key: 'alarmTypeName',
-        },
-        {
-            title: '报警等级',
-            dataIndex: 'alarmLevelName',
-            key: 'alarmLevelName',
-        },
-        {
-            title: '报警开始时间',
-            dataIndex: 'startTime',
-            key: 'startTime',
-            sorter: true,
-        },
-        {
-            title: '报警结束时间',
-            dataIndex: 'endTime',
-            key: 'endTime',
-            sorter: true,
-        },
-        {
-            title: '报警时长',
-            dataIndex: 'currentDuration',
-            key: 'currentDuration',
-            sorter: true,
-            render: (text: number) => {
-                return secondToFormatTime(text ? text / 1000 : 0);
-            },
-        },
-        {
-            title: '是否有效',
-            dataIndex: 'hasMistake',
-            key: 'hasMistake',
-            render: (text: boolean) => {
-                return text ? '无效' : '有效';
-            },
-        },
-    ];
-
-    const pageChange = (page: number) => {
-        setState({
-            pagination: {
-                ...pagination,
-                current: page,
-            },
-        });
-    };
-
-    const handleTableChange = (sorter: any) => {
-        setState({
-            sortBy: sorter.columnKey,
-            order: sorter.order === 'ascend' ? 'ASC' : 'DESC',
-        });
-    };
-
-    const tableProps = {
-        pagination: {
-            ...pagination,
-            total: records.total,
-            defaultPageSize: 10,
-            onChange: pageChange,
-        },
-        handleTableChange,
-        height: 440,
-        dataSource: records.rows,
-    };
-
-    return (
-        <>
-            {alarmTabs?.length > 0 && (
-                <SubTabsLine
-                    items={alarmTabs}
-                    activeKey={alarmTypeCode}
-                    onChange={key => {
-                        setState({
-                            alarmTypeCode: key,
-                        });
-                    }}
-                />
-            )}
-            <div className="staff-alarm-table">
-                <VMTable columns={columns} rowKey="id" {...tableProps} />
-            </div>
-        </>
-    );
-};
-
-export default List;

package/src/vtx-staff-modal/components/AlarmInfo/index.less

@@ -1,22 +0,0 @@
-.staff-alarm {
-    padding: 10px;
-
-    .staff-main {
-        padding: 11px 16px;
-        background-color: var(--bg-color2);
-
-        .staff-head {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-    }
-    &-charts {
-        margin: 24px auto;
-        text-align: center;
-    }
-    &-table {
-        min-height: 500px;
-        margin-top: 10px;
-    }
-}

package/src/vtx-staff-modal/components/AlarmInfo/index.tsx

@@ -1,132 +0,0 @@
-/**
- * 车辆-报警信息
- */
-
-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 Charts from './Charts';
-import List from './List';
-import useSettings from '../../../vm-hooks/useSettings';
-import { AlarmService } from '../../api';
-import './index.less';
-
-import chart from '../../../vm-appraisal-info/imgs/chart.png';
-import chartActive from '../../../vm-appraisal-info/imgs/chart_active.png';
-import chartActiveLight from '../../../vm-appraisal-info/imgs/chart_active_light.png';
-import list from '../../../vm-appraisal-info/imgs/list.png';
-import listActive from '../../../vm-appraisal-info/imgs/list_active.png';
-import listActiveLight from '../../../vm-appraisal-info/imgs/list_active_light.png';
-
-interface CarAlarmTypes {
-    id: string;
-}
-
-const CarAlarmInfo: React.FC<CarAlarmTypes> = props => {
-    const { id } = props;
-    const { isDark } = useSettings();
-    const [state, setState] = useSetState({
-        startDate: moment()
-            .startOf('M')
-            .format('YYYY-MM-DD'),
-        endDate: moment().format('YYYY-MM-DD'),
-        tabKey: '1',
-    });
-    const { startDate, endDate, tabKey } = state;
-
-    const { alarmTypeRes } = AlarmService.useAlarmType(
-        id,
-        `${startDate} 00:00:00`,
-        `${endDate} 23:59:59`,
-    );
-
-    const { alarmAnalysisRes } = AlarmService.useAlarmAnalysis(id, startDate, endDate);
-
-    const handleDateChange = (start: string, end: string) => {
-        setState({
-            startDate: start,
-            endDate: end,
-        });
-    };
-
-    return (
-        <div className="staff-alarm">
-            <div className="staff-main">
-                <div className="staff-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="staff-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' && <Charts chartData={alarmTypeRes} lineData={alarmAnalysisRes} />}
-                {tabKey === '2' && (
-                    <List
-                        id={id}
-                        startDate={startDate}
-                        endDate={endDate}
-                        alarmTabs={alarmTypeRes}
-                    />
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default CarAlarmInfo;

package/src/vtx-staff-modal/components/Attendance/Exeception.tsx

@@ -1,94 +0,0 @@
-/**
- * 异常统计
- */
-import React from 'react';
-import moment from 'moment';
-import ReactEcharts from 'echarts-for-react';
-import SubTitle from '../../../vm-sub-title';
-import NoData from '../../../vm-nodata';
-import useSettings from '../../../vm-hooks/useSettings';
-import { AttendanceService } from '../../api';
-
-export default function Exeception(props: { id: string; date: string }) {
-    const { chartColor, chartFontColor, isDark } = useSettings();
-    const { id } = props;
-    const { attendAnalysisRes } = AttendanceService.useAnalysis(
-        id,
-        moment()
-            .startOf('M')
-            .format('YYYY-MM-DD'),
-        moment().format('YYYY-MM-DD'),
-    );
-
-    let option = {
-        color: chartColor,
-        backgroundColor: 'transparent',
-        tooltip: {
-            show: true,
-            trigger: 'item',
-        },
-        legend: {
-            orient: 'vertical',
-            left: '50%',
-            top: 'middle',
-            align: 'left',
-            itemGap: 12,
-            itemWidth: 10,
-            itemHeight: 10,
-            formatter: function(name: string) {
-                const value = attendAnalysisRes.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: ['30%', '50%'],
-                hoverAnimation: true,
-                z: 10,
-                itemStyle: {
-                    normal: {
-                        borderWidth: 2,
-                        borderColor: isDark ? '#003359' : '#ffffff',
-                    },
-                },
-                label: {
-                    show: false,
-                },
-                data: attendAnalysisRes,
-                labelLine: {
-                    show: false,
-                },
-            },
-        ],
-    };
-    return (
-        <div key={id} className="staff-attend-exec">
-            <SubTitle title="考勤异常统计" />
-            {attendAnalysisRes?.length > 0 ? (
-                <ReactEcharts
-                    option={option}
-                    notMerge
-                    lazyUpdate
-                    style={{ height: '200px', width: '100%' }}
-                />
-            ) : (
-                <NoData style={{ height: '200px', width: '100%' }} />
-            )}
-        </div>
-    );
-}

package/src/vtx-staff-modal/components/Attendance/Record.tsx

@@ -1,150 +0,0 @@
-/**
- * 考勤记录
- */
-import React from 'react';
-import moment from 'moment';
-import { useSetState } from 'ahooks';
-import VMTable from '../../../vm-table';
-import SubTitle from '../../../vm-sub-title';
-import { AttendanceService } from '../../api';
-
-export default function Record(props: { id: string }) {
-    const { id } = props;
-    const [state, setState] = useSetState({
-        pagination: {
-            current: 1,
-            pageSize: 10,
-            total: 0,
-        },
-    });
-    const { pagination } = state;
-    const { attendRecordRes } = AttendanceService.useAttendRecord(
-        id,
-        `${moment().startOf("M").format('YYYY-MM-DD')} 00:00:00`,
-        `${moment().format('YYYY-MM-DD')} 23:59:59`,
-        pagination.current - 1,
-    );
-    const records = {
-        total: attendRecordRes?.totla || 0,
-        rows: attendRecordRes?.rows || [],
-    };
-    const getColor = (code: string) => {
-        let color = '';
-        switch (code) {
-            case '正常':
-                color = '#35EAFF';
-                break;
-            default:
-                color = '#FFEF41';
-                break;
-        }
-        return color;
-    };
-    const columns = [
-        {
-            title: '所属机构',
-            dataIndex: 'deptName',
-            key: 'deptName',
-            width: 140,
-            ellipsis: true,
-        },
-        {
-            title: '姓名',
-            dataIndex: 'staffName',
-            key: 'staffName',
-        },
-        {
-            title: '班次',
-            dataIndex: 'shiftName',
-            key: 'shiftName',
-        },
-        {
-            title: '开始时间',
-            dataIndex: 'shiftStartTime',
-            key: 'shiftStartTime',
-            width: 140,
-        },
-        {
-            title: '结束时间',
-            dataIndex: 'shiftEndTime',
-            key: 'shiftEndTime',
-            width: 140,
-        },
-        {
-            title: '排版区域',
-            dataIndex: 'shiftWorkElementNames',
-            key: 'shiftWorkElementNames',
-            width: 100,
-            ellipsis: true,
-        },
-        {
-            title: '上班时间',
-            dataIndex: 'clockInTime',
-            key: 'clockInTime',
-            width: 140,
-            render: (text: string) => {
-                return text ? text : '-';
-            },
-        },
-        {
-            title: '上班状态',
-            dataIndex: 'clockInStatusName',
-            key: 'clockInStatusName',
-            width: 80,
-            render: (text: string) => {
-                return <div style={{ color: getColor(text) }}>{text || '-'}</div>;
-            },
-        },
-        {
-            title: '下班时间',
-            dataIndex: 'clockOutTime',
-            key: 'clockOutTime',
-            width: 140,
-            render: (text: string) => {
-                return text ? text : '-';
-            },
-        },
-        {
-            title: '下班状态',
-            dataIndex: 'clockOutStatusName',
-            key: 'clockOutStatusName',
-            width: 80,
-            render: (text: string) => {
-                return <div style={{ color: getColor(text) }}>{text}</div>;
-            },
-        },
-        {
-            title: '用工类型',
-            dataIndex: 'workTypeName',
-            key: 'workTypeName',
-            width: 80,
-        },
-    ];
-
-    const pageChange = (page: number) => {
-        setState({
-            pagination: {
-                ...pagination,
-                current: page,
-            },
-        });
-    };
-
-    const tableProps = {
-        pagination: {
-            ...pagination,
-            total: records.total,
-            defaultPageSize: 10,
-            onChange: pageChange,
-        },
-        height: 250,
-        dataSource: records.rows,
-    };
-
-    return (
-        <div key={id}>
-            <SubTitle title="考勤记录" />
-            <VMTable columns={columns} rowKey="id" {...tableProps} />
-        </div>
-    );
-}

package/src/vtx-staff-modal/components/Attendance/WorkingHours.tsx

@@ -1,115 +0,0 @@
-/**
- * 工时统计
- */
-import React from 'react';
-import moment from 'moment';
-import ReactEcharts from 'echarts-for-react';
-import SubTitle from '../../../vm-sub-title';
-import NoData from '../../../vm-nodata';
-import useSettings from '../../../vm-hooks/useSettings';
-import { AttendanceService } from '../../api';
-
-export default function WorkingHours(props: { id: string; date: string }) {
-    const { chartColor, chartFontColor } = useSettings();
-    const { id } = props;
-    const { attendTimeAnalysisRes } = AttendanceService.useTimeAnalysis(
-        id,
-        moment()
-            .startOf('M')
-            .format('YYYY-MM-DD'),
-        moment().format('YYYY-MM-DD'),
-    );
-    const { names, values } = attendTimeAnalysisRes;
-    const option = {
-        color: chartColor,
-        tooltip: {
-            trigger: 'axis',
-        },
-        legend: {
-            show: true,
-            itemWith: 6,
-            itemHeight: 6,
-            top: 20,
-            textStyle: {
-                color: chartFontColor,
-                fontSize: 12,
-            },
-        },
-        grid: {
-            left: 24,
-            bottom: 12,
-            right: 40,
-            containLabel: true,
-        },
-        xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            axisTick: {
-                show: false,
-            },
-            axisLabel: {
-                color: chartFontColor,
-            },
-            data: names || [],
-        },
-        yAxis: [
-            {
-                name: '小时',
-                type: 'value',
-                nameTextStyle: {
-                    color: chartFontColor,
-                },
-                axisTick: {
-                    show: false,
-                },
-                axisLabel: {
-                    color: chartFontColor,
-                },
-                axisLine: {
-                    show: true,
-                },
-                splitLine: {
-                    lineStyle: {
-                        type: 'dashed',
-                        color: 'rgba(151,151,151,0.28)',
-                    },
-                },
-            },
-        ],
-        series: [
-            {
-                name: '每日工时',
-                type: 'line',
-                data: values?.length > 1 ? values[1] : [],
-                markLine: {
-                    data: [{ type: 'average', name: '平均工时' }],
-                    label: {
-                        show: true,
-                        position: 'insideEndTop',
-                        formatter: '{b}: {c}',
-                        color: chartFontColor,
-                        fontWeight: 'normal',
-                    },
-                    lineStyle: {
-                        color: '#76F8FA',
-                    },
-                },
-            },
-        ],
-    };
-    return (
-        <div key={id} className="staff-attend-workhours">
-            <SubTitle title="工时统计" />
-            {names?.length > 0 ? (
-                <ReactEcharts
-                    option={option}
-                    notMerge
-                    lazyUpdate
-                    style={{ height: '220px', width: '100%' }}
-                />
-            ) : (
-                <NoData style={{ height: '200px', width: '100%' }} />
-            )}
-        </div>
-    );
-}

package/src/vtx-staff-modal/components/Attendance/index.less

@@ -1,25 +0,0 @@
-.staff-attend {
-    padding: 10px;
-    &-head {
-        display: flex;
-        justify-content: space-between;
-    }
-    &-exec {
-        width: 631px;
-        height: 280px;
-        padding: 20px;
-        background-color: var(--bg-color2);
-    }
-    &-workhours {
-        width: 631px;
-        height: 280px;
-        padding: 20px;
-        background-color: var(--bg-color2);
-    }
-    &-record {
-        margin-top: 10px;
-        width: 100%;
-        padding: 20px;
-        background-color: var(--bg-color2);
-    }
-}