@vtx/modals2 2.6.19

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

@@ -0,0 +1,135 @@
+/**
+ * 报警信息-列表
+ */
+
+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

@@ -0,0 +1,22 @@
+.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

@@ -0,0 +1,132 @@
+/**
+ * 车辆-报警信息
+ */
+
+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

@@ -0,0 +1,94 @@
+/**
+ * 异常统计
+ */
+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

@@ -0,0 +1,150 @@
+/**
+ * 考勤记录
+ */
+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

@@ -0,0 +1,115 @@
+/**
+ * 工时统计
+ */
+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

@@ -0,0 +1,25 @@
+.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);
+    }
+}