@vtx/modals2 2.6.19

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

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import VtxBaseModal from '../vtx-base-modal';
+import { BaseInfo, Metering, WorkCondition } from './components';
+import { BaseInfo as DefaultBaseInfo } from '../vtx-default-modal/components';
+import Appraisal from '../vm-appraisal-info';
+import RepaireMaintain from '../vm-repair-maintain';
+import VmVideo from '../vm-video';
+import { BaseService, LmService } from './api';
+import VideoService from '../vm-video/api';
+import '../style';
+
+const TABS_BASE = 'df-base';
+const TABS_METERING = 'df-metering';
+const TABS_WC = 'df-workCondition';
+const TABS_VIDEO = 'df-video';
+const TABS_APPRAISAL = 'default-appraisal';
+const TABS_RM = 'default-rm';
+interface DfProps {
+    id: string;
+    visible: boolean;
+    onCancel: () => void;
+    title: string;
+    subTitle?: string;
+    theme?: 'light' | 'dark';
+    mapCenter?: string[] | number[];
+}
+
+const VtxDfModal = (props: DfProps) => {
+    const { id, title, subTitle, theme, visible, onCancel, mapCenter } = props;
+
+    const { info, photos, baseInfo } = BaseService.useBaseInfo(id);
+    const { detail } = LmService.useLmDetail(id);
+    const { channels } = VideoService.getChannels(
+        `${info?.typeCode}_${info?.code}`,
+        !!info?.typeCode,
+    );
+    const { realtimeRes } = BaseService.useRealtime(info?.code);
+    // realtimeRes为空则无工况，beenWeigh为false则无计量
+    let tabs = [
+        { key: TABS_BASE, title: '总览信息' },
+
+        { key: TABS_APPRAISAL, title: '考核信息' },
+        { key: TABS_RM, title: '维保信息' },
+    ];
+    if (detail?.beenWeigh && detail?.deviceId) {
+        tabs.splice(1, 0, { key: TABS_METERING, title: '计量信息' });
+    }
+    if (realtimeRes?.length > 0) {
+        if (detail?.beenWeigh && detail?.deviceId) {
+            tabs.splice(2, 0, { key: TABS_WC, title: '工况信息' });
+        } else {
+            tabs.splice(1, 0, { key: TABS_WC, title: '工况信息' });
+        }
+    }
+    if (channels?.length > 0) {
+        tabs = tabs.concat([{ key: TABS_VIDEO, title: '视频信息' }]);
+    }
+
+    return (
+        <>
+            {visible && (
+                <VtxBaseModal
+                    id={id}
+                    type="facility"
+                    title={title}
+                    subTitle={subTitle}
+                    theme={theme}
+                    visible={visible}
+                    onCancel={onCancel}
+                    tabs={tabs}
+                    contents={{
+                        [TABS_BASE]:
+                            !detail?.beenWeigh || !detail?.deviceId ? (
+                                <DefaultBaseInfo
+                                    id={id}
+                                    baseInfo={baseInfo}
+                                    photos={photos}
+                                    mapCenter={mapCenter}
+                                />
+                            ) : (
+                                <BaseInfo code={info?.code} baseInfo={baseInfo} photos={photos} />
+                            ),
+                        [TABS_METERING]: <Metering id={id} />,
+                        [TABS_WC]: <WorkCondition id={id} />,
+                        [TABS_APPRAISAL]: <Appraisal id={id} />,
+                        [TABS_RM]: <RepaireMaintain id={id} />,
+                        [TABS_VIDEO]: (
+                            <VmVideo videoPlaceCode={`${info?.typeCode}_${info?.code}`} />
+                        ),
+                    }}
+                />
+            )}
+        </>
+    );
+};
+
+export default VtxDfModal;

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

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

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

@@ -0,0 +1,4 @@
+import './index.less';
+import '../components/BaseInfo/index.less';
+import '../components/Metering/index.less';
+import '../components/WorkCondition/index.less';

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

@@ -0,0 +1,86 @@
+import { request } from '@vtx/utils';
+import { useRequest } from 'ahooks';
+import * as Types from './types';
+
+const query = async <T>(url: string, params: any, method: 'get' | 'post' = 'get'): Promise<T> => {
+    const res = await request[method](url, {
+        data: params,
+    });
+    return res?.data;
+};
+
+export const queryPage = async <T>(url: string, params: T) => {
+    const res = await request.get(url, {
+        data: params,
+    });
+    return {
+        list: res?.data?.rows || [],
+        total: res?.data?.total || 0,
+    };
+};
+
+// 综合总览
+export const overViewService = {
+    // 基本信息
+    estateStatistics: ({ id }: Types.EstateStatisticsProps) => {
+        const { data } = useRequest(
+            () =>
+                query<Types.EstateStatisticsResp>('/cloud/jcss-reborn/facility/get', {
+                    id,
+                    coordType: 'bd09'
+                }),
+            {
+                ready: !!id,
+                refreshDeps: [id],
+            },
+        );
+        return data;
+    },
+
+    // 作业对象
+    workObject: ({ id }: Types.EstateStatisticsProps) => {
+        const { data } = useRequest(
+            () =>
+                query<Types.EstateStatisticsResp>('/cloud/jcss-reborn/work/type/report/getWorkInfoByFacilityId', {
+                    id,
+                }),
+            {
+                ready: !!id,
+                refreshDeps: [id],
+            },
+        );
+        return data;
+    },
+
+    // 资源投入
+    resourceInput: ({ id }: Types.EstateStatisticsProps) => {
+        const { data } = useRequest(
+            () =>
+                query<Types.EstateStatisticsResp>('/cloud/jcss-reborn/gis/high/precision/resourceInput', {
+                    ids: id,
+                }),
+            {
+                ready: !!id,
+                refreshDeps: [id],
+            },
+        );
+        return data;
+    },
+
+    // 关联对象
+    getChildWorkInfo: ({ id }: Types.EstateStatisticsProps) => {
+        const { data } = useRequest(
+            () =>
+                query<Types.EstateStatisticsResp>('/cloud/jcss-reborn/gis/getChildWorkInfo', {
+                    id,
+                    coordType:'bd09'
+                }),
+            {
+                ready: !!id,
+                refreshDeps: [id],
+            },
+        );
+        return data;
+    },
+
+};

package/src/vtx-facility-modal/components/OverView/Left.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import VmMap from '../../../vm-map';
+interface OverViewLeftProps {
+    classPrefix?: string;
+    mapLayers?: any[];
+    currentLayer?: Object;
+}
+
+const Left: React.FC<OverViewLeftProps> = ({ classPrefix, mapLayers = [], currentLayer = {} }) => {
+    return (
+        <div className={`${classPrefix}-left`}>
+            <div className={`${classPrefix}-left-map`}>
+                <VmMap mapPolygons={mapLayers} currentLayer={currentLayer} />
+            </div>
+        </div>
+    );
+};
+
+export default Left;

package/src/vtx-facility-modal/components/OverView/index.less

@@ -0,0 +1,83 @@
+@import '../../style/index';
+
+.@{prefix-cls}-overview {
+    display: flex;
+    gap: 10px;
+    height: 716px;
+    &-left {
+        height: 716px;
+        width: 470px;
+        padding: 10px;
+        &-map {
+            height: 690px;
+        }
+    }
+    &-right {
+        flex: 1;
+        overflow-y: auto;
+        &-base {
+            margin: 10px 10px 10px 0;
+            padding: 10px 0 10px 10px;
+            background: var(--bg-color2);
+        }
+        &-basic {
+            height: 140px;
+            overflow-y: auto;
+            .info-line {
+                width: 45% !important;
+            }
+        }
+        &-work {
+            margin: 10px 10px 10px 0;
+            padding: 10px 0 10px 10px;
+            background: var(--bg-color2);
+            .label {
+                color: var(--label-color);
+                white-space: nowrap;
+            }
+        }
+        &-item {
+            min-height: 36px;
+            overflow-y: auto;
+            .info-line {
+                width: 45% !important;
+            }
+        }
+
+        &-list {
+            display: flex;
+            flex-wrap: wrap;
+        }
+        &-listItem {
+            width: 100%;
+        }
+        &-bottom {
+            display: flex;
+            display: flex;
+            flex-wrap: wrap;
+            height: 30px;
+            line-height: 30px;
+        }
+        &-bottomItem {
+            width: 50%;
+            display: flex;
+        }
+        &-title {
+            color: var(--label-color);
+            white-space: nowrap;
+        }
+        &-num {
+            color: var(--info-color);
+            font-weight: 400;
+            min-width: 98px;
+        }
+        &-img {
+            width: 30px;
+        }
+        &-table {
+            margin: 10px 10px 10px 0;
+            padding: 10px 0 10px 10px;
+            background: var(--bg-color2);
+        }
+    }
+}

package/src/vtx-facility-modal/components/OverView/index.tsx

@@ -0,0 +1,211 @@
+import React, { useEffect } from 'react';
+import { useSetState } from 'ahooks';
+import Left from './Left';
+import VMTable from '../../../vm-table';
+import { OverViewLHDorHDFields, OverViewTRFields } from '../../config';
+import { SubTabsLine } from '../../../vm-sub-tabs';
+import VmInfoCollection from '../../../vm-info-collection';
+import { EstateStatisticsResp } from '../../types';
+import VmSubTitle from '../../../vm-sub-title';
+import { overViewService } from '../../api';
+import './index.less';
+
+interface OverViewProps {
+    classPrefix?: string;
+    id: string;
+    basicInfo?: EstateStatisticsResp;
+}
+
+const OverView: React.FC<OverViewProps> = ({ classPrefix = '', id, basicInfo }) => {
+    const [state, setState] = useSetState({
+        tabKey: 'all',
+        rows: [], // 当前需要显示的列表
+        mapLayers: [], // 所有图层数据
+        currentLayer: {} // 地图中当前选中的图层
+    });
+    const { tabKey, rows } = state;
+    const prefix = `${classPrefix}-overview`;
+    const common = {
+        classPrefix: prefix,
+        id,
+    };
+
+    // 关联对象
+    const linkedObject: any = overViewService.getChildWorkInfo({ id }) || {};
+
+    useEffect(() => {
+        if (!linkedObject?.count) return;
+        let result: any = [];
+        let layerData: any = [];
+        // 获取所有图层数据
+        linkedObject.count.forEach((item: any) => {
+            layerData.push(...(item?.data?.rows || []))
+        })
+        setState({
+            mapLayers: layerData.map((item: any) => ({
+                ...item,
+                rings: item?.geometryInfo?.lngLats,
+            }))
+        })
+
+        // 区分页签
+        if (tabKey === 'all') {
+            linkedObject.count.forEach((item: any) => {
+                result.push(...(item?.data?.rows || []))
+            })
+            setState({
+                rows: result
+            })
+        } else {
+            result = linkedObject.count.filter((item: any) => item.typeCode === tabKey)
+            setState({
+                rows: result[0].data.rows
+            })
+        }
+    }, [JSON.stringify(linkedObject), tabKey])
+
+    // 若当前设施为主次干道（TR）或为绿化带/河道（LHDorHD）
+    // 基本信息数据
+    const fieldsData = [...basicInfo?.typeCode === 'tr' ? OverViewTRFields : OverViewLHDorHDFields].map((item: any) => ({
+        ...item,
+        value: (item.key === 'facilityLength' || item.key === 'facilityWidth' || item.key === 'facilityArea') ? basicInfo?.dataJson?.[item.key] : basicInfo?.[item.key],
+    }));
+
+    // 作业对象
+    let workObjectData = []
+
+    // 资源投入
+    let resourceInput: any = [];
+    let planNumOfCar = 0
+    let actualNumOfCar = 0
+    let planNumOfPeople = 0
+    let actualNumOfPeople = 0
+    // 存在作业对象时，获取相关数据
+    workObjectData = (overViewService.workObject({
+        id,
+    }))?.filter((item: any) => item?.details && item.details.length > 0).map((ele: any) => ({
+        label: `${ele?.workTypeStr}(${ele.unitStr})`,
+        value: ele?.dataValue
+    })) || [];
+    resourceInput = overViewService.resourceInput({ id }) || [];
+    planNumOfCar = resourceInput?.reduce((pre: Number, next: any) => pre + (next.planNumOfCar || 0), 0);
+    actualNumOfCar = resourceInput?.reduce((pre: Number, next: any) => pre + (next.actualNumOfCar || 0), 0);
+    planNumOfPeople = resourceInput?.reduce((pre: Number, next: any) => pre + (next.planNumOfPeople || 0), 0);
+    actualNumOfPeople = resourceInput?.reduce((pre: Number, next: any) => pre + (next.actualNumOfPeople || 0), 0);
+    const columns = [
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: '长度（m）',
+            dataIndex: 'facilityLength',
+            key: 'facilityLength',
+        },
+        {
+            title: '宽度（m）',
+            dataIndex: 'facilityWidth',
+            key: 'facilityWidth',
+        },
+        {
+            title: '面积（k㎡）',
+            dataIndex: 'facilityArea',
+            key: 'facilityArea',
+        }
+    ];
+
+    const tableProps = {
+        height: 320,
+        dataSource: rows || [],
+        isIndex: false,
+        onRowCallBack: (record: any) => {
+            setState({
+                currentLayer: record
+            })
+        }
+    };
+
+    return (
+        <div className={prefix}>
+            <Left {...common} mapLayers={state.mapLayers} currentLayer={state.currentLayer} />
+            <div className={`${prefix}-right`}>
+                <div className={`${prefix}-right-base`}>
+                    <VmSubTitle title="基本信息" />
+                    <div className={`${prefix}-right-basic`}>
+                        <VmInfoCollection data={fieldsData} gap={16} horizontal />
+                    </div>
+                </div>
+                {basicInfo?.workTypeId &&
+                    <div className={`${prefix}-right-work`}>
+                        <VmSubTitle title="作业对象" />
+                        <div className={`${prefix}-right-item`}>
+                            {workObjectData?.length ? <VmInfoCollection data={workObjectData} gap={16} horizontal /> : null}
+                            <span className='label'>资源投入：</span>
+                            <div className={`${prefix}-right-list`}>
+                                <div className={`${prefix}-right-listItem`}>
+                                    <div className={`${prefix}-right-bottom`}>
+                                        <div className={`${prefix}-right-bottomItem`}>
+                                            <div className={`${prefix}-right-img`}>
+                                                <img src={require('../../imgs/car.png')} />
+                                            </div>
+                                            <span className={`${prefix}-right-title`}>建议配备(辆)：</span>
+                                            <span className={`${prefix}-right-num`}>
+                                                {planNumOfCar || '--'}
+                                            </span>
+                                        </div>
+                                        <div className={`${prefix}-right-bottomItem`}>
+                                            <span className={`${prefix}-right-title`}>实际投入(辆)：</span>
+                                            <span className={`${prefix}-right-num`}>
+                                                {actualNumOfCar || '--'}
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div className={`${prefix}-right-bottom`}>
+                                        <div className={`${prefix}-right-bottomItem`}>
+                                            <div className={`${prefix}-right-img`}>
+                                                <img src={require('../../imgs/user.png')} />
+                                            </div>
+                                            <span className={`${prefix}-right-title`}>建议配备(人)：</span>
+                                            <span className={`${prefix}-right-num`}>
+                                                {planNumOfPeople || '--'}
+                                            </span>
+                                        </div>
+                                        <div className={`${prefix}-right-bottomItem`}>
+                                            <span className={`${prefix}-right-title`}>实际投入(人)：</span>
+                                            <span className={`${prefix}-right-num`}>
+                                                {actualNumOfPeople || '--'}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                }
+                {/* 或没有关联对象不展示 */}
+                {
+                    linkedObject?.count?.length ? <div className={`${prefix}-right-table`}>
+                        <SubTabsLine
+                            items={[{ key: 'all', label: `全部(${linkedObject?.allNums || 0})` }, ...linkedObject.count.map((item: any) => ({
+                                key: item.typeCode,
+                                label: `${item.typeName}(${item.count})`
+                            }))]}
+                            activeKey={tabKey}
+                            onChange={key => {
+                                setState({
+                                    tabKey: key,
+                                });
+                            }}
+                        />
+                        <div>
+                            <VMTable columns={columns} rowKey="id" {...tableProps} />
+                        </div>
+                    </div> : null
+                }
+            </div>
+        </div>
+    );
+};
+
+export default OverView;

package/src/vtx-facility-modal/components/index.tsx

@@ -0,0 +1 @@
+export { default as OverView } from './OverView';

package/src/vtx-facility-modal/config.tsx

@@ -0,0 +1,57 @@
+export const OverViewLHDorHDFields = [  // 绿化或河道的基本信息
+    {
+        key: 'tenderName',
+        label: '所属标段',
+    },
+    {
+        key: 'manageUnitName',
+        label: '作业单位',
+    },
+    {
+        key: 'typeName',
+        label: '作业类型',
+    },
+    {
+        key: 'facilityLength',
+        label: '长度（m）',
+    },
+    {
+        key: 'facilityWidth',
+        label: '宽度（m）',
+    },
+    {
+        key: 'facilityArea',
+        label: '面积（㎡）',
+    },
+];
+
+export const OverViewTRFields = [  // 主要干道
+    {
+        key: 'facilityClassName',
+        label: '道路等级',
+    },
+    {
+        key: 'typeName',
+        label: '作业类型',
+    },
+    {
+        key: 'tenderName',
+        label: '所属标段',
+    },
+    {
+        key: 'manageUnitName',
+        label: '作业单位',
+    },
+    {
+        key: 'facilityLength',
+        label: '长度（m）',
+    },
+    {
+        key: 'facilityWidth',
+        label: '宽度（m）',
+    },
+    {
+        key: 'facilityArea',
+        label: '面积（㎡）',
+    },
+];

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

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

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

@@ -0,0 +1,15 @@
+---
+nav:
+    title: 组件
+    path: /modal
+group:
+    title: 弹窗
+    path: /modal
+    order: 11
+---
+
+# 设施弹窗
+
+Demo:
+
+<code src="./demo/demo1.tsx">demo</code>