@vtx/modals2 2.6.19

package/src/vtx-road-modal/index.md

@@ -0,0 +1,14 @@
+---
+nav:
+    title: 组件
+    path: /modal
+group:
+    title: 弹窗
+    path: /modal
+    order: 1
+---
+
+# 路段弹窗
+
+<code src="./demo/demo1.tsx">暗色</code>
+<code src="./demo/demo2.tsx">浅色</code>

package/src/vtx-road-modal/index.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import moment from 'moment';
+import VtxBaseModal from '../vtx-base-modal';
+import { BaseInfo, Statistical } from './components';
+import Appraisal from '../vm-appraisal-info';
+import RepaireMaintain from '../vm-repair-maintain';
+import useSettings from '../vm-hooks/useSettings';
+import { BaseService } from './api';
+import '../style';
+
+const TABS_BASE = 'road-base';
+const TABS_STATIC = 'road-statistical';
+const TABS_APPRAISAL = 'default-appraisal';
+const TABS_RM = 'default-rm';
+
+interface RoadProps {
+    id: string;
+    visible: boolean;
+    onCancel: () => void;
+    title: string;
+    subTitle?: string;
+    theme?: 'light' | 'dark';
+}
+
+const VtxRoadModal = (props: RoadProps) => {
+    const { id, title, subTitle, visible, onCancel, theme } = props;
+    const { baseInfo, rules, todayWorkRes } = BaseService.useBaseInfo(
+        id,
+        moment().format('YYYY-MM-DD'),
+    );
+    let tabs = [
+        { key: TABS_BASE, title: '总览信息' },
+        // { key: TABS_STATIC, title: '统计信息' },
+        { key: TABS_APPRAISAL, title: '考核信息' },
+        { key: TABS_RM, title: '维保信息' },
+    ];
+    if (rules?.length > 0) {
+        tabs.splice(1, 0, { key: TABS_STATIC, title: '统计信息' });
+    }
+    return (
+        <>
+            {visible && (
+                <VtxBaseModal
+                    title={title}
+                    subTitle={subTitle}
+                    width={1355}
+                    theme={theme}
+                    visible={visible}
+                    onCancel={onCancel}
+                    tabs={tabs}
+                    contents={{
+                        [TABS_BASE]: <BaseInfo id={id} data={{ baseInfo, rules, todayWorkRes }} />,
+                        [TABS_STATIC]: <Statistical id={id} />,
+                        [TABS_APPRAISAL]: <Appraisal id={id} />,
+                        [TABS_RM]: <RepaireMaintain id={id} />,
+                    }}
+                />
+            )}
+        </>
+    );
+};
+
+interface ExtButtonProps {
+    text: string;
+    img: string;
+    onClick: () => void;
+}
+
+export const VehicleExtButton = (props: ExtButtonProps) => {
+    const { img, text, onClick } = props;
+    const { theme } = useSettings();
+    return (
+        <div className={`vtx-vehicle-ext-btn ${theme}`} onClick={onClick}>
+            <img src={img} alt="" />
+            <span>{text}</span>
+        </div>
+    );
+};
+
+export default VtxRoadModal;

package/src/vtx-road-modal/style/index.less

@@ -0,0 +1 @@
+@import '../../style/index';

package/src/vtx-road-modal/style/index.ts

@@ -0,0 +1,3 @@
+import '../components/BaseInfo/index.less';
+import '../components/Statistical/index.less';
+import './index.less';

package/src/vtx-staff-modal/api.ts

@@ -0,0 +1,301 @@
+import { request } from '@vtx/utils';
+import { useRequest } from 'ahooks';
+const BaseService = {
+    useBaseInfo: (id: string) => {
+        const { data: baseInfoRes } = useRequest(
+            () =>
+                request.post('/cloud/sjzt-reborn/api/v101/dataSet/execute', {
+                    data: JSON.stringify({
+                        code: 'ZYRY_STAFF_INFO',
+                        parameters: {
+                            staffId: id,
+                        },
+                    }),
+                }),
+            { refreshDeps: [id] },
+        );
+
+        const info = baseInfoRes ? baseInfoRes.data?.[0] : {};
+        const baseInfo = [
+            {
+                label: '编号',
+                key: 'code',
+                value: info?.code,
+            },
+            {
+                label: '所属单位',
+                key: 'deptName',
+                value: info?.deptName,
+            },
+            {
+                label: '性别',
+                key: 'gender',
+                value: info?.gender,
+            },
+            {
+                label: '入职日期',
+                key: 'updateTime',
+                value: info?.updateTime,
+            },
+            {
+                label: '在职状态',
+                key: 'isLeaveName',
+                value: info?.isLeaveName,
+            },
+            {
+                label: '所属标段',
+                key: 'tenderName',
+                value: info?.tenderName,
+            },
+            {
+                label: '行政区划',
+                key: 'divisionName',
+                value: info?.divisionName,
+            },
+        ];
+
+        return {
+            baseInfo,
+            info,
+        };
+    },
+    useWorkInfo: (staffId: string, startDate: string, endDate: string) => {
+        const { data: workInfoRes } = useRequest(
+            () =>
+                request.get('/cloud/zyry-reborn/api/v101/kanban/kanbanWorkInfo', {
+                    data: {
+                        staffId,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { refreshDeps: [staffId, startDate, endDate] },
+        );
+        return { workInfoRes: workInfoRes?.data || {} };
+    },
+    // 今日作业
+    useTodayWork: (staffId: string, startDate: string, endDate: string) => {
+        const { data: todayWorkRes } = useRequest(
+            () =>
+                request.get('/cloud/zyry-reborn/api/v101/kanban/kanbanShiftWorkInfo', {
+                    data: {
+                        staffId,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { refreshDeps: [staffId, startDate, endDate] },
+        );
+        return { todayWorkRes: todayWorkRes?.data || [] };
+    },
+    // 作业统计
+    useWorkStatic: (staffId: string, startDate: string, endDate: string) => {
+        const { data: workStaticRes } = useRequest(
+            () =>
+                request.get('/cloud/zyry-reborn/api/v101/kanban/kanbanWorkInfoStatistics', {
+                    data: {
+                        staffId,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { refreshDeps: [staffId, startDate, endDate] },
+        );
+        return { workStaticRes: workStaticRes?.data || {} };
+    },
+    // 里程分析
+    useMileAnalysis: (staffId: string, startDate: string, endDate: string) => {
+        const { data: mileAnalysisRes } = useRequest(
+            () =>
+                request.get('/cloud/zyry-reborn/api/v101/kanban/kanbanWorkMileageAnalysis', {
+                    data: {
+                        staffId,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { refreshDeps: [staffId, startDate, endDate] },
+        );
+        return { mileAnalysisRes: mileAnalysisRes?.data || {} };
+    },
+};
+
+const AlarmService = {
+    // 报警类型
+    useAlarmType: (staffId: string, startTime: string, endTime: string) => {
+        const { data: alarmTypeRes } = useRequest(
+            () =>
+                request.get('/cloud/zyry-reborn/api/v101/alarmInfo/pageAlarmCount', {
+                    data: {
+                        staffId,
+                        startTime,
+                        endTime,
+                    },
+                }),
+            { refreshDeps: [staffId, startTime, endTime] },
+        );
+        return {
+            alarmTypeRes:
+                alarmTypeRes?.data?.length > 0
+                    ? alarmTypeRes.data.map((ele: any) => ({
+                          name: ele.alarmTypeName,
+                          value: ele.count,
+                          label: `${ele.alarmTypeName}(${ele.count})`,
+                          key: ele.alarmTypeCode || 'all',
+                          ...ele,
+                      }))
+                    : [],
+        };
+    },
+    // 报警类型分析
+    useAlarmAnalysis: (staffId: string, startDate: string, endDate: string) => {
+        const { data: alarmAnalysisRes } = useRequest(
+            () =>
+                request.get('/cloud/zyry-reborn/api/v101/kanban/kanbanAlarmAnalysis', {
+                    data: {
+                        staffId,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { refreshDeps: [staffId, startDate, endDate] },
+        );
+        return {
+            alarmAnalysisRes: alarmAnalysisRes?.data || {},
+        };
+    },
+    // 报警列表
+    useAlarmRecord: (
+        staffId: string,
+        alarmTypeCode: string,
+        startTime: string,
+        endTime: string,
+        pageNo: number,
+        sortBy: string,
+        order: string,
+    ) => {
+        const { data: alarmRecordRes } = useRequest(
+            () =>
+                request.get('/cloud/zyry-reborn/api/v101/alarmInfo/page', {
+                    data: {
+                        staffId,
+                        alarmTypeCode,
+                        startTime,
+                        endTime,
+                        pageNo,
+                        pageSize: 10,
+                        sortBy,
+                        order,
+                    },
+                }),
+            { refreshDeps: [staffId, alarmTypeCode, startTime, endTime, pageNo, sortBy, order] },
+        );
+        return {
+            alarmRecordRes: alarmRecordRes?.data || {},
+        };
+    },
+};
+// 考勤信息
+const AttendanceService = {
+    useTimeAnalysis: (staffId: string, startDate: string, endDate: string) => {
+        const { data: attendTimeAnalysisRes } = useRequest(
+            () =>
+                request.get('/cloud/zyry-reborn/api/v101/kanban/kanbanAttendanceTimeAnalysis', {
+                    data: {
+                        staffId,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { refreshDeps: [staffId, startDate, endDate] },
+        );
+        return {
+            attendTimeAnalysisRes: attendTimeAnalysisRes?.data || {},
+        };
+    },
+    useAnalysis: (staffId: string, startDate: string, endDate: string) => {
+        const { data: attendAnalysisRes } = useRequest(
+            () =>
+                request.get('/cloud/zyry-reborn/api/v101/kanban/kanbanAttendanceAnalysis', {
+                    data: {
+                        staffId,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { refreshDeps: [staffId, startDate, endDate] },
+        );
+        return {
+            attendAnalysisRes:
+                attendAnalysisRes?.data?.length > 0
+                    ? attendAnalysisRes.data.map((ele: any) => ({
+                          name: ele.alarmTypeName,
+                          value: ele.count,
+                          ...ele,
+                      }))
+                    : [],
+        };
+    },
+    useAttendRecord: (staffId: string, startTime: string, endTime: string, pageNo: number) => {
+        const { data: attendRecordRes } = useRequest(
+            () =>
+                request.get('/cloud/zyry-reborn/api/v101/attendanceRecord', {
+                    data: {
+                        staffId,
+                        startTime,
+                        endTime,
+                        pageNo,
+                        pageSize: 10,
+                    },
+                }),
+            { refreshDeps: [staffId, startTime, endTime, pageNo] },
+        );
+        return {
+            attendRecordRes: attendRecordRes?.data || {},
+        };
+    },
+};
+
+const EquipmentService = {
+    useDevice: (staffId: string) => {
+        const { data: deviceRes } = useRequest(
+            () =>
+                request.get('/cloud/zyry-reborn/api/v101/device/getByStaffId', {
+                    data: {
+                        staffId,
+                    },
+                }),
+            { refreshDeps: [staffId] },
+        );
+        const { data: monitorRes } = useRequest(
+            () =>
+                request.get('/cloud/zyry-reborn/api/v101/positionRealtime/getByStaffId', {
+                    data: {
+                        staffId,
+                    },
+                }),
+            { refreshDeps: [staffId] },
+        );
+
+        return {
+            deviceRes: deviceRes?.data || {},
+            monitorRes: monitorRes?.data || {},
+        };
+    },
+    useDeviceStatus: (id: string) => {
+        const { data: deviceStatusRes } = useRequest(
+            () =>
+                request.get('/cloud/zyry-reborn/api/v101/positionRealtime/deviceStatus', {
+                    data: {
+                        id,
+                    },
+                }),
+            { ready: !!id, refreshDeps: [id] },
+        );
+        return {
+            deviceStatusRes: deviceStatusRes?.data || '-',
+        };
+    },
+};
+
+export { BaseService, AlarmService, AttendanceService, EquipmentService };

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

@@ -0,0 +1,172 @@
+import React from 'react';
+import ReactEcharts from 'echarts-for-react';
+import useSettings from '../../../vm-hooks/useSettings';
+import NoData from '../../../vm-nodata';
+
+interface TypeProps {
+    chartData: Array<{ name: string; value: string; alarmTypeCode: string }>;
+    lineData: {
+        legends: string[];
+        names: string[];
+        values: number[][];
+    };
+}
+
+const Charts = ({ chartData, lineData }: TypeProps) => {
+    const { chartColor, chartFontColor, isDark } = useSettings();
+    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 = chartData.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: ['40%', '50%'],
+                hoverAnimation: true,
+                z: 10,
+                itemStyle: {
+                    normal: {
+                        borderWidth: 2,
+                        borderColor: isDark ? '#003359' : '#ffffff',
+                    },
+                },
+                label: {
+                    show: false,
+                },
+                data: chartData?.filter(ele => ele.alarmTypeCode),
+                labelLine: {
+                    show: false,
+                },
+            },
+        ],
+    };
+
+    const { legends, names, values } = lineData;
+
+    let series: { type: string; name: string; data: number[] }[] = [];
+    if (values?.length > 0) {
+        values.forEach((item: number[], index: number) => {
+            series.push({
+                type: 'line',
+                name: legends[index],
+                data: item,
+            });
+        });
+    }
+
+    const lineOption = {
+        color: chartColor,
+        tooltip: {
+            trigger: 'axis',
+        },
+        legend: {
+            show: true,
+            itemWith: 6,
+            itemHeight: 6,
+            top: 20,
+            textStyle: {
+                color: chartFontColor,
+                fontSize: 12,
+            },
+            data: legends || [],
+        },
+        grid: {
+            // top: 58,
+            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: series,
+    };
+
+    return (
+        <div className="staff-alarm-charts">
+            {chartData?.length > 0 ? (
+                <ReactEcharts
+                    option={option}
+                    notMerge
+                    lazyUpdate
+                    style={{ height: '200px', width: '100%' }}
+                />
+            ) : (
+                <NoData style={{ marginLeft: '50%', transform: 'translateX(-50%)' }} />
+            )}
+            {names?.length && (
+                <ReactEcharts
+                    option={lineOption}
+                    notMerge
+                    lazyUpdate
+                    style={{ height: '300px', width: '100%' }}
+                />
+            )}
+        </div>
+    );
+};
+
+export default Charts;