@vtx/modals2 2.6.19

package/src/vtx-wr-modal/components/Monitor/RealtimeInfo.tsx

@@ -0,0 +1,167 @@
+/**
+ * 公厕-监测信息-实时信息
+ */
+import React from 'react';
+import moment from 'moment';
+import SubTitle from '../../../vm-sub-title';
+import useSettings from '../../../vm-hooks/useSettings';
+
+import { MoniotrService } from '../../api';
+
+import PersonNum from '../../imgs/traffic.png';
+import OdorValue from '../../imgs/stench.png';
+import temperature from '../../imgs/temperature.png';
+import humidity from '../../imgs/humidity.png';
+import WaterUse from '../../imgs/water.png';
+import ElecUse from '../../imgs/electric.png';
+import male from '../../imgs/male.png';
+import female from '../../imgs/female.png';
+
+import PersonNumLight from '../../imgs/traffic_light.png';
+import OdorValueLight from '../../imgs/stench_light.png';
+import temperatureLight from '../../imgs/temperature_light.png';
+import humidityLight from '../../imgs/humidity_light.png';
+import WaterUseLight from '../../imgs/water_light.png';
+import ElecUseLight from '../../imgs/electric_light.png';
+import maleLight from '../../imgs/male_light.png';
+import femaleLight from '../../imgs/female_light.png';
+
+interface MonitorTypeProps {
+    id: string;
+}
+
+const RealtimeInfo: React.FC<MonitorTypeProps> = props => {
+    const { id } = props;
+    const { theme } = useSettings();
+    const { realtimeList } = MoniotrService.useRealtime(id, moment().format('YYYY-MM-DD'));
+    const img: any = {
+        light: {
+            PersonNum: PersonNumLight,
+            OdorValue: OdorValueLight,
+            temperature: temperatureLight,
+            humidity: humidityLight,
+            WaterUse: WaterUseLight,
+            ElecUse: ElecUseLight,
+            male: maleLight,
+            female: femaleLight,
+        },
+        dark: {
+            PersonNum,
+            OdorValue,
+            temperature,
+            humidity,
+            WaterUse,
+            ElecUse,
+            male,
+            female,
+        },
+    };
+    const getRealtimeItem = (code: string) => {
+        let src = '';
+        if (code.indexOf('_') < 0) {
+            return img[theme]['PersonNum'];
+        }
+        const str = code.split('_')[0];
+        switch (str) {
+            case 'PersonNum':
+                src = img[theme]['PersonNum'];
+                break;
+            case 'OdorValue':
+                src = img[theme]['OdorValue'];
+                break;
+            case 'temperature':
+                src = img[theme]['temperature'];
+                break;
+            case 'humidity':
+                src = img[theme]['humidity'];
+                break;
+            case 'WaterUse':
+                src = img[theme]['WaterUse'];
+                break;
+            case 'ElecUse':
+                src = img[theme]['ElecUse'];
+                break;
+            case 'SeatNum':
+                if (code.indexOf('female') > -1) {
+                    src = img[theme]['female'];
+                } else {
+                    src = img[theme]['male'];
+                }
+                break;
+            default:
+                break;
+        }
+        return src;
+    };
+
+    return (
+        <div className="wr-monitor-realtime">
+            <div className="realtime-head">
+                <div className="realtime-head-title">
+                    <SubTitle title="实时信息" />
+                    <div className="realtime-head-time">
+                        更新时间：{moment().format('YYYY-MM-DD HH:mm:ss')}
+                    </div>
+                </div>
+            </div>
+
+            <div className="realtime-content">
+                {realtimeList?.length > 0 ? (
+                    realtimeList.map((item: any, index: number) => (
+                        <div className="realtime-content-item" key={index}>
+                            <div className="realtime-content-item-icon">
+                                <img src={getRealtimeItem(item.code)} />
+                                <div className="realtime-content-item-icon-name">{item.title}</div>
+                            </div>
+                            <div className={`realtime-content-item-main ${theme}`}>
+                                {item.dataList.map(
+                                    (subItem: { name: string; value: string }, idx: number) => (
+                                        <>
+                                            <div
+                                                className="realtime-content-item-main-item"
+                                                key={idx}
+                                            >
+                                                <div>{subItem.name}</div>
+                                                <div>{subItem.value}</div>
+                                            </div>
+                                            {idx < item.dataList.length - 1 && (
+                                                <div className="realtime-content-item-main-line" />
+                                            )}
+                                        </>
+                                    ),
+                                )}
+                            </div>
+                        </div>
+                    ))
+                ) : (
+                    <div className="realtime-content-item">
+                        <div className="realtime-content-item-icon">
+                            <img src={PersonNum} />
+                            <div className="realtime-content-item-icon-name">
+                                今日人流量（人次）
+                            </div>
+                        </div>
+                        <div className="realtime-content-item-main">
+                            <div className="realtime-content-item-main-item">
+                                <div>全部</div>
+                                <div>0</div>
+                            </div>
+                            <div className="realtime-content-item-main-line" />
+                            <div className="realtime-content-item-main-item">
+                                <div>男</div>
+                                <div>0</div>
+                            </div>
+                            <div className="realtime-content-item-main-line" />
+                            <div className="realtime-content-item-main-item">
+                                <div>女</div>
+                                <div>0</div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default RealtimeInfo;

package/src/vtx-wr-modal/components/Monitor/index.less

@@ -0,0 +1,84 @@
+.wr-monitor {
+    margin: 6px;
+    &-realtime {
+        padding: 14px 20px 0 20px;
+        background-color: var(--bg-color2);
+        margin-bottom: 6px;
+        .realtime-head {
+            display: flex;
+            justify-content: space-between;
+            align-items: start;
+            &-title {
+                display: flex;
+                justify-content: start;
+                align-items: start;
+            }
+            &-time {
+                margin-left: 27px;
+                color: var(--info-warnning);
+                font-family: PingFang SC;
+            }
+        }
+        .realtime-content {
+            display: flex;
+            justify-content: start;
+            align-items: center;
+            flex-wrap: wrap;
+            margin-top: 11px;
+            &-item {
+                width: 269px;
+                margin-bottom: 20px;
+                margin-right: 40px;
+                &-icon {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    margin-bottom: 4px;
+                    img {
+                        width: 36px;
+                        height: 36px;
+                        margin-right: 14px;
+                    }
+                    &-name {
+                        color: var(--info-color);
+                    }
+                }
+                &-main {
+                    width: 100%;
+                    height: 80px;
+                    background-image: url('../../imgs/realtime_bg.png');
+                    background-repeat: no-repeat;
+                    background-size: 100% 100%;
+                    color: var(--info-color);
+                    display: flex;
+                    justify-content: space-evenly;
+                    align-items: center;
+                    &.light {
+                        background-image: url('../../imgs/realtime_bg_light.png');
+                    }
+
+                    &-line {
+                        width: 1px;
+                        height: 20px;
+                        background: #ffffff;
+                        opacity: 0.2;
+                    }
+
+                    &-item {
+                        width: 76px;
+                        text-align: center;
+                    }
+                }
+            }
+        }
+    }
+    &-trend {
+        padding: 14px 20px;
+        background-color: var(--bg-color2);
+        &-head {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+    }
+}

package/src/vtx-wr-modal/components/Monitor/index.tsx

@@ -0,0 +1,23 @@
+/**
+ * 公厕-监测信息
+ */
+import React from 'react';
+import RealtimeInfo from './RealtimeInfo';
+import MonitorInfo from './MonitorInfo';
+import './index.less';
+
+export interface MonitorTypeProps {
+    id: string;
+}
+
+const Monitor: React.FC<MonitorTypeProps> = props => {
+    const { id } = props;
+    return (
+        <div className="wr-monitor">
+            <RealtimeInfo id={id} />
+            <MonitorInfo id={id} />
+        </div>
+    );
+};
+
+export default Monitor;

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

@@ -0,0 +1,5 @@
+import BaseInfo from './BaseInfo';
+import Monitor from './Monitor';
+import AlarmInfo from './AlarmInfo';
+import Evaluate from './Evaluate';
+export { BaseInfo, Monitor, AlarmInfo, Evaluate };

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

@@ -0,0 +1,27 @@
+import { Button } from 'antd';
+import React, { useState } from 'react';
+import { VtxWrModal } from '@vtx/modals';
+export default function Demo() {
+    const [visible, setVisible] = useState(false);
+    return (
+        <div style={{ height: '150px' }}>
+            <Button
+                type="primary"
+                onClick={() => {
+                    setVisible(true);
+                }}
+            >
+                暗色
+            </Button>
+            <VtxWrModal
+                visible={visible}
+                theme="dark"
+                title="苏州火车站北广场东侧公共卫生间"
+                id="1588014206222225409"
+                onCancel={() => {
+                    setVisible(false);
+                }}
+            />
+        </div>
+    );
+}

package/src/vtx-wr-modal/demo/demo2.tsx

@@ -0,0 +1,27 @@
+import { Button } from 'antd';
+import React, { useState } from 'react';
+import { VtxWrModal } from '@vtx/modals';
+export default function Demo() {
+    const [visible, setVisible] = useState(false);
+    return (
+        <div style={{ height: '150px' }}>
+            <Button
+                type="primary"
+                onClick={() => {
+                    setVisible(true);
+                }}
+            >
+                浅色
+            </Button>
+            <VtxWrModal
+                visible={visible}
+                theme="light"
+                title="物贸大厦"
+                id="1588014232629563393"
+                onCancel={() => {
+                    setVisible(false);
+                }}
+            />
+        </div>
+    );
+}

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

@@ -0,0 +1,18 @@
+---
+nav:
+    title: 组件
+    path: /modal
+group:
+    title: 弹窗
+    path: /modal
+    order: 1
+---
+
+# 公厕弹窗
+
+深色Demo:
+
+<code src="./demo/demo1.tsx"></code>
+
+浅色Demo:
+<code src="./demo/demo2.tsx"></code>

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import VtxBaseModal from '../vtx-base-modal';
+import { BaseInfo, Monitor, AlarmInfo, Evaluate } from './components';
+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';
+import '../style';
+
+const TABS_BASE = 'wr-base';
+const TABS_MONITOR = 'wr-monitor';
+const TABS_EVALUATE = 'wr-appraise';
+const TABS_ALARM = 'wr-alarm';
+const TABS_APPRAISAL = 'default-appraisal';
+const TABS_VIDEO = 'wr-video';
+const TABS_RM = 'default-rm';
+
+export interface VtxWrProps {
+    id: string;
+    visible: boolean;
+    onCancel: () => void;
+    title: string;
+    subTitle?: string;
+    theme?: 'light' | 'dark';
+}
+
+const VtxWrModal = (props: VtxWrProps) => {
+    const { id, title, subTitle, theme, visible, onCancel } = props;
+    const { baseInfo, photos, info } = BaseService.useBaseDetail(id);
+    const { channels } = VideoService.getChannels(
+        `${info?.typeCode}_${info?.code}`,
+        !!info?.typeCode,
+    );
+    let tabs = [
+        { key: TABS_BASE, title: '总览信息' },
+        { key: TABS_MONITOR, title: '监测信息' },
+        { key: TABS_ALARM, title: '报警信息' },
+        { key: TABS_EVALUATE, 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}
+                    visible={visible}
+                    theme={theme}
+                    onCancel={onCancel}
+                    tabs={tabs}
+                    contents={{
+                        [TABS_BASE]: <BaseInfo id={id} baseInfo={baseInfo} photos={photos} />,
+                        [TABS_MONITOR]: <Monitor id={id} />,
+                        [TABS_ALARM]: <AlarmInfo id={id} />,
+                        [TABS_EVALUATE]: <Evaluate id={id} />,
+                        [TABS_APPRAISAL]: <Appraisal id={id} />,
+                        [TABS_RM]: <RepaireMaintain id={id} />,
+                        [TABS_VIDEO]: (
+                            <VmVideo videoPlaceCode={`${info?.typeCode}_${info?.code}`} />
+                        ),
+                    }}
+                />
+            )}
+        </>
+    );
+};
+
+export default VtxWrModal;

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

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

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

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

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

@@ -0,0 +1,68 @@
+import { request } from '@vtx/utils';
+import { useRequest } from 'ahooks';
+const BaseService = {
+    useBaseInfo: (id: string) => {
+        const { data: baseInfoRes } = useRequest(
+            () =>
+                request.get('/cloud/zykh-reborn/kanban/getOrderTask', {
+                    data: { id: id, coorType: 'bd09' },
+                }),
+            { refreshDeps: [id] },
+        );
+        const info = baseInfoRes?.data;
+        const baseInfo = [
+            {
+                label: '上报人',
+                key: 'reportStaffName',
+                value: info?.reportStaffName,
+            },
+            {
+                label: '上报单位',
+                key: 'reportManageUnitName',
+                value: info?.reportManageUnitName,
+            },
+            {
+                label: '上报时间',
+                key: 'score',
+                value: info?.reportDateTimeStr,
+            },
+            {
+                label: '问题来源',
+                key: 'problemFromStr',
+                value: info?.problemFromStr,
+            },
+            {
+                label: '问题分类',
+                key: 'problemCategoryName',
+                value: info?.problemCategoryName,
+            },
+            {
+                label: '问题地址',
+                key: 'address',
+                value: info?.address,
+            },
+            {
+                label: '责任人员',
+                key: 'responsibleStaffNames',
+                value: info?.responsibleStaffNames,
+            },
+            {
+                label: '责任单位',
+                key: 'responsibleUnitName',
+                value: info?.responsibleUnitName,
+            },
+        ];
+        const photos = info?.photos ? JSON.parse(info.photos) : [];
+        const feedbackPhotos = info?.feedbackPhotos ? JSON.parse(info.feedbackPhotos) : [];
+        const logs = info?.logs || [];
+        return {
+            baseInfo,
+            photos,
+            feedbackPhotos,
+            logs,
+            baseInfoRes: baseInfoRes?.data,
+        };
+    },
+};
+
+export { BaseService };

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

@@ -0,0 +1,82 @@
+.zg-baseContent {
+    padding: 6px 10px;
+    display: flex;
+    justify-content: start;
+    height: 100%;
+
+    .zg-base {
+        width: 380px;
+        height: 100%;
+        padding: 20px;
+        margin-right: 10px;
+        background-color: var(--bg-color2);
+
+        &-map {
+            width: 100%;
+            height: 240px;
+        }
+    }
+
+    .zg-right {
+        width: 100%;
+        &-photo {
+            height: 300px;
+            padding: 20px;
+            background-color: var(--bg-color2);
+            &-wrap {
+                display: flex;
+                justify-content: space-between;
+            }
+        }
+        &-photo1 {
+            width: 49%;
+            height: 212px;
+            margin-bottom: 12px;
+            display: inline-block;
+            text-align: center;
+            color: var(--info-color);
+
+            span {
+                display: block;
+                margin: 6px 0;
+            }
+        }
+        &-czlc {
+            margin-top: 10px;
+            padding: 20px;
+            background-color: var(--bg-color2);
+            &-main {
+                height: 319px;
+                overflow: auto;
+                padding: 12px 0;
+            }
+            .timeline {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                &-title {
+                    color: var(--timeline-active);
+                }
+                &-time {
+                    color: var(--title-color2);
+                }
+                &-main {
+                    color: var(--info-color);
+                    margin: 4px 0;
+                    &-extra {
+                        margin-top: 8px;
+                    }
+                }
+            }
+        }
+    }
+}
+.zg-status-subtitle {
+    display: inline-block;
+    height: 22px;
+    line-height: 20px;
+    padding: 0 12px;
+    margin-left: 12px;
+    border: 1px solid;
+    font-size: 14px;
+}