@vtx/modals2 2.6.19

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

@@ -0,0 +1,17 @@
+---
+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-cp-modal/index.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import VtxBaseModal from '../vtx-base-modal';
+import { BaseInfo, SyInfo, AlarmInfo, ExeceptionInfo } from './components';
+import Appraisal from '../vm-appraisal-info';
+import RepaireMaintain from '../vm-repair-maintain';
+import useSettings from '../vm-hooks/useSettings';
+import VmVideo from '../vm-video';
+import { BaseService } from './api';
+import VideoService from '../vm-video/api';
+import '../style';
+
+const TABS_BASE = 'cp-base';
+const TABS_SY = 'cp-sy';
+const TABS_WARNNING = 'cp-warning';
+const TABS_EXECEPTION = 'cp-exeception';
+const TABS_APPRAISAL = 'default-appraisal';
+const TABS_RM = 'default-rm';
+const TABS_VIDEO = 'cp-video';
+
+interface VtxCpModalProps {
+    id: string;
+    theme?: 'light' | 'dark';
+    visible: boolean;
+    onCancel: () => void;
+    title: string;
+    subTitle?: string;
+}
+const VtxCpModal = (props: VtxCpModalProps) => {
+    const { id, title, subTitle, theme, visible, onCancel } = props;
+    const { info, baseInfo, rules } = BaseService.useBaseDetail(id);
+    const { channels } = VideoService.getChannels(
+        `${info?.collectPointTypeCode}_${info?.code}`,
+        !!info?.collectPointTypeCode,
+    );
+    let tabs = [
+        { key: TABS_BASE, title: '总览信息' },
+        { key: TABS_SY, title: '收运信息' },
+        { key: TABS_WARNNING, title: '报警信息' },
+        { key: TABS_EXECEPTION, title: '异常信息' },
+        { key: TABS_APPRAISAL, title: '考核信息' },
+        { key: TABS_RM, title: '维保信息' },
+    ];
+    if (channels?.length > 0) {
+        tabs = tabs.concat([{ key: TABS_VIDEO, title: '视频信息' }]);
+    }
+
+    return (
+        <>
+            {visible && (
+                <VtxBaseModal
+                    id={id}
+                    type="facility"
+                    title={title}
+                    subTitle={subTitle}
+                    width={1210}
+                    theme={theme}
+                    visible={visible}
+                    onCancel={onCancel}
+                    tabs={tabs}
+                    contents={{
+                        [TABS_BASE]: <BaseInfo id={id} baseInfo={baseInfo} rules={rules} />,
+                        [TABS_SY]: <SyInfo id={id} />,
+                        [TABS_WARNNING]: <AlarmInfo id={id} />,
+                        [TABS_EXECEPTION]: <ExeceptionInfo id={id} />,
+                        [TABS_APPRAISAL]: <Appraisal id={id} />,
+                        [TABS_RM]: <RepaireMaintain id={id} />,
+                        [TABS_VIDEO]: (
+                            <VmVideo
+                                videoPlaceCode={`${info?.collectPointTypeCode}_${info?.code}`}
+                            />
+                        ),
+                    }}
+                />
+            )}
+        </>
+    );
+};
+
+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 VtxCpModal;

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

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

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

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

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

@@ -0,0 +1,44 @@
+import { request } from '@vtx/utils';
+import { useRequest } from 'ahooks';
+const BaseService = {
+    useBaseInfo: (id: string) => {
+        const { data: baseInfoRes } = useRequest(
+            () =>
+                request.get('/cloud/jcss-reborn/facility/get', {
+                    data: { id: id, coordType: 'bd09' },
+                }),
+            { refreshDeps: [id] },
+        );
+        const info = baseInfoRes?.data;
+        const baseInfo = [
+            {
+                label: '设施类型',
+                key: 'facilityClassName',
+                value: info?.facilityClassName,
+            },
+            {
+                label: '行政区划',
+                key: 'divisionName',
+                value: info?.divisionName,
+            },
+            {
+                label: '管理单位',
+                key: 'manageUnitName',
+                value: info?.manageUnitName,
+            },
+            {
+                label: '地址',
+                key: 'address',
+                value: info?.address,
+            },
+        ];
+        const photos = info?.photoIds ? JSON.parse(info.photoIds) : [];
+        return {
+            baseInfo,
+            photos,
+            info,
+        };
+    },
+};
+
+export { BaseService };

package/src/vtx-default-modal/components/BaseInfo/index.less

@@ -0,0 +1,24 @@
+.default-baseContent {
+    padding: 6px 10px;
+    display: flex;
+    justify-content: start;
+    height: 100%;
+
+    .default-base {
+        width: 430px;
+        height: 100%;
+        padding: 24px;
+        margin-right: 10px;
+        background-color: var(--bg-color2);
+        &-img {
+            margin-bottom: 24px;
+            img {
+                width: 100%;
+            }
+        }
+    }
+    .default-base-map {
+        width: 660px;
+        height: 430px;
+    }
+}

package/src/vtx-default-modal/components/BaseInfo/index.tsx

@@ -0,0 +1,56 @@
+import { VtxImage } from '@vtx/components';
+import { Carousel } from 'antd';
+import React from 'react';
+import useSettings from '../../../vm-hooks/useSettings';
+import Base from '../../../vm-info-collection';
+import NoData from '../../../vm-nodata';
+import VmMap from '../../../vm-map';
+
+import './index.less';
+
+interface BaseInfoProps {
+    id?: string;
+    baseInfo: any[];
+    photos?: any[];
+    mapCenter?: string[] | number[];
+}
+
+const BaseInfo = (props: BaseInfoProps) => {
+    const { baseInfo, photos, mapCenter } = props;
+    const { theme } = useSettings();
+
+    return (
+        <div className={`default-baseContent ${theme}`}>
+            <div className="default-base">
+                {photos && (
+                    <div className="default-base-img">
+                        {photos.length ? (
+                            <VtxImage.PreviewGroup>
+                                <Carousel style={{ width: '370px', height: '244px' }}>
+                                    {photos.map((item: any) => {
+                                        return (
+                                            <VtxImage
+                                                key={item.id}
+                                                src={`/cloudFile/common/downloadFile?id=${item.id}`}
+                                                alt={item.name}
+                                                isDark={true}
+                                            />
+                                        );
+                                    })}
+                                </Carousel>
+                            </VtxImage.PreviewGroup>
+                        ) : (
+                            <NoData />
+                        )}
+                    </div>
+                )}
+                <Base data={baseInfo} gap={10} />
+            </div>
+            <div className="default-base-map">
+                <VmMap mapCenter={mapCenter} />
+            </div>
+        </div>
+    );
+};
+
+export default BaseInfo;

package/src/vtx-default-modal/components/index.ts

@@ -0,0 +1,3 @@
+import BaseInfo from './BaseInfo';
+
+export { BaseInfo };

package/src/vtx-default-modal/demo/demo1.tsx

@@ -0,0 +1,27 @@
+import { Button } from 'antd';
+import React, { useState } from 'react';
+import { VtxDefaultModal } from '@vtx/modals';
+export default function Demo() {
+    const [visible, setVisible] = useState(false);
+    return (
+        <div style={{ height: '200px' }}>
+            <Button
+                type="primary"
+                onClick={() => {
+                    setVisible(true);
+                }}
+            >
+                暗色
+            </Button>
+            <VtxDefaultModal
+                visible={visible}
+                theme="dark"
+                title="模拟设施"
+                id="1506925260432261122"
+                onCancel={() => {
+                    setVisible(false);
+                }}
+            />
+        </div>
+    );
+}

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

@@ -0,0 +1,17 @@
+---
+nav:
+    title: 组件
+    path: /modal
+group:
+    title: 弹窗
+    path: /modal
+    order: 1
+---
+
+# 通用弹窗
+
+Demo:
+
+<code src="./demo/demo1.tsx">demo1</code>
+
+[更多技巧](https://d.umijs.org/guide/demo-principle)

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

@@ -0,0 +1,74 @@
+/**
+ * 通用弹窗
+ */
+import React from 'react';
+import VtxBaseModal from '../vtx-base-modal';
+import { BaseInfo } from './components';
+import '../style';
+import Appraisal from '../vm-appraisal-info';
+import RepaireMaintain from '../vm-repair-maintain';
+import VmVideo from '../vm-video';
+import VideoService from '../vm-video/api';
+import { BaseService } from './api';
+
+const TABS_BASE = 'default-base';
+const TABS_APPRAISAL = 'default-appraisal';
+const TABS_RM = 'default-rm';
+const TABS_VIDEO = 'default-video';
+
+export interface VtxDefaultModalProps {
+    id: string;
+    visible: boolean;
+    onCancel: () => void;
+    title: string;
+    subTitle?: string;
+    theme?: 'light' | 'dark';
+    mapCenter?: string[] | number[];
+}
+
+const VtxDefaultModal = (props: VtxDefaultModalProps) => {
+    const { id, title, subTitle, theme, visible, onCancel, mapCenter } = props;
+
+    const { baseInfo, photos, info } = BaseService.useBaseInfo(id);
+    const { channels } = VideoService.getChannels(
+        `${info?.typeCode}_${info?.code}`,
+        !!info?.typeCode,
+    );
+    let tabs = [
+        { key: TABS_BASE, title: '总览信息' },
+        { key: TABS_APPRAISAL, title: '考核信息' },
+        { key: TABS_RM, title: '维保信息' },
+    ];
+    if (channels?.length > 0) {
+        tabs = tabs.concat([{ key: TABS_VIDEO, title: '视频信息' }]);
+    }
+
+    return (
+        <>
+            {visible && (
+                <VtxBaseModal
+                    id={id}
+                    type="facility"
+                    title={title}
+                    subTitle={subTitle}
+                    width={1210}
+                    height={550}
+                    theme={theme}
+                    visible={visible}
+                    onCancel={onCancel}
+                    tabs={tabs}
+                    contents={{
+                        [TABS_BASE]: <BaseInfo id={id} baseInfo={baseInfo} photos={photos} mapCenter={mapCenter} />,
+                        [TABS_APPRAISAL]: <Appraisal id={id} />,
+                        [TABS_RM]: <RepaireMaintain id={id} />,
+                        [TABS_VIDEO]: (
+                            <VmVideo videoPlaceCode={`${info?.typeCode}_${info?.code}`} />
+                        ),
+                    }}
+                />
+            )}
+        </>
+    );
+};
+
+export default VtxDefaultModal;

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

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

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

@@ -0,0 +1,4 @@
+// import 'antd/es/modal/style/css';
+import './index.less';
+// import './baseInfo.less';
+import '../components/BaseInfo/index.less';

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

@@ -0,0 +1,216 @@
+import { request } from '@vtx/utils';
+import { useRequest } from 'ahooks';
+const BaseService = {
+    useBaseInfo: (id: string) => {
+        const { data: baseInfoRes } = useRequest(
+            () =>
+                request.get('/cloud/jcss-reborn/facility/get', {
+                    data: { id: id, coordType: 'bd09' },
+                }),
+            { refreshDeps: [id] },
+        );
+        const info = baseInfoRes?.data;
+        const baseInfo = [
+            {
+                label: '行政区划',
+                key: 'divisionName',
+                value: info?.divisionName,
+            },
+            {
+                label: '管理单位',
+                key: 'manageUnitName',
+                value: info?.manageUnitName,
+            },
+            {
+                label: '设施类型',
+                key: 'facilityClassName',
+                value: info?.facilityClassName,
+            },
+            {
+                label: '设施状态',
+                key: 'facilityStatusName',
+                value: info?.facilityStatusName,
+                color: '#52C41A',
+            },
+            {
+                label: '启用日期',
+                key: 'createTime',
+                value: info?.createTime,
+            },
+            {
+                label: '设计能力',
+                key: 'disposalDayCount',
+                value: `${info?.dataJson?.disposalDayCount || 0}吨/日`,
+            },
+            {
+                label: '详细地址',
+
+                key: 'address',
+                value: info?.address,
+            },
+        ];
+        const photos = info?.photoIds ? JSON.parse(info.photoIds) : [];
+
+        return { baseInfo, photos, code: info?.code, info };
+    },
+    useTrendInfo: (code: string, startDate: string, endDate: string) => {
+        // 进场趋势
+        const { data: trendRes } = useRequest(
+            () =>
+                request.get('/cloud/zd/lm/api/cp/dataBoard/getSumDataLineByFactory.smvc', {
+                    data: {
+                        disposeUnitCode: code,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { ready: !!code, refreshDeps: [startDate, endDate] },
+        );
+        return { trendRes: trendRes?.data || [] };
+    },
+    useSituation: (code: string, startDate: string, endDate: string) => {
+        // 实时运行情况
+        const { data: situationRes } = useRequest(
+            () =>
+                request.get('/cloud/zd/lm/api/cp/dataBoard/getSumOperationData.smvc', {
+                    data: {
+                        disposeUnitCode: code,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { ready: !!code, refreshDeps: [startDate, endDate] },
+        );
+        return { situationRes: situationRes?.data || [] };
+    },
+    // 实时运行情况-运行指标报警
+    useSituationAlarm: (code: string, startDate: string, endDate: string) => {
+        const { data: situationAlarmRes } = useRequest(
+            () =>
+                request.get('/cloud/zd/jg/api/cp/alarmInfo/getSummaryByFactory.smvc', {
+                    data: {
+                        disposeUnitCode: code,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { ready: !!code, refreshDeps: [startDate, endDate] },
+        );
+        return { situationAlarmRes: situationAlarmRes?.data };
+    },
+    useRealtime: (code: string) => {
+        // 实时运行情况
+        const { data: realtimeRes } = useRequest(
+            () =>
+                request.get('/cloud/zd/jg/api/cp/realTime/deviceBoardByFactory.smvc', {
+                    data: {
+                        factoryCode: code,
+                    },
+                }),
+            { ready: !!code },
+        );
+        return { realtimeRes: realtimeRes?.data || [] };
+    },
+    useJcccsjfb: (code: string, startDate: string, endDate: string) => {
+        // 实时运行情况
+        const { data: jcccsjfbRes } = useRequest(
+            () =>
+                request.get('/cloud/zd/lm/api/cp/dataBoard/getSumCarNumHourLineByFactory.smvc', {
+                    data: {
+                        disposeUnitCode: code,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { ready: !!code, refreshDeps: [startDate, endDate] },
+        );
+        return { jcccsjfbRes: jcccsjfbRes?.data || [] };
+    },
+    useMonitorCarExeception: (code: string, dateValue: string, num: number) => {
+        // 车辆监测指标异常
+        const { data: execeptionCarRes } = useRequest(
+            () =>
+                request.get('/cloud/zd/lm/api/cp/dataBoard/getAlarmDescriptionByFactory.smvc', {
+                    data: {
+                        disposeUnitCode: code,
+                        dateValue,
+                    },
+                }),
+            { ready: num == null && !!code, refreshDeps: [dateValue] },
+        );
+        return { execeptionCar: execeptionCarRes?.data || '' };
+    },
+    useMonitorPointExeception: (code: string, num: number) => {
+        // 点位监测指标异常
+        const { data: execeptionPointRes } = useRequest(
+            () =>
+                request.get('/cloud/zd/jg/api/cp/realTime/getAlarmDescriptionByFactory.smvc', {
+                    data: {
+                        factoryCode: code,
+                    },
+                }),
+            { ready: !!code && num !== null && num >= 0 },
+        );
+        return { execeptionPoint: execeptionPointRes?.data || '' };
+    },
+};
+
+const MeteringService = {
+    useRecord: (code: string, startTime: string, endTime: string, page: number) => {
+        const { data: recordRes } = useRequest(
+            () =>
+                request.get('/cloud/zd/lm/api/cp/zdjgLmWeighData/pageList.smvc', {
+                    data: { disposeUnitCode: code, startTime, endTime, page, rows: 10 },
+                }),
+            { ready: !!code, refreshDeps: [startTime, endTime, page] },
+        );
+
+        const records = recordRes?.data || { total: 0, rows: [] };
+        return {
+            records,
+        };
+    },
+};
+
+// 工况
+const WorkConditionService = {
+    useFetchData: (code: string, startDateTime: string, endDateTime: string) => {
+        const { data: res } = useRequest(
+            () =>
+                request.get('/cloud/zd/jg/api/cp/historyValue/getMonitorItemSum.smvc', {
+                    data: {
+                        factoryCode: code,
+                        startDateTime,
+                        endDateTime,
+                        monitorItemCodes: 'MI_TRW_LJ_RL,MI_CW_FDL,MI_CW_SLY,MI_CW_FH,MI_CW_LZH',
+                    },
+                }),
+            { ready: !!code, refreshDeps: [startDateTime, endDateTime] },
+        );
+
+        const situationData = res?.data || [];
+        return {
+            situationData,
+        };
+    },
+};
+
+// 是否有计量
+const LmService = {
+    useLmDetail: (id: string) => {
+        const { data: res } = useRequest(
+            () =>
+                request.get('/cloud/zd/base/api/cp/commonFactory/getCommonFactoryById.smvc', {
+                    data: { factoryId: id },
+                }),
+            {
+                refreshDeps: [id],
+            },
+        );
+        return {
+            detail: res?.data || {},
+        };
+    },
+};
+
+export { BaseService, MeteringService, WorkConditionService, LmService };