@vtx/modals2 2.6.19

package/src/vm-sub-tabs/index.tsx

@@ -0,0 +1,39 @@
+import type { TabPaneProps, TabsProps } from 'antd';
+import { Tabs } from 'antd';
+import React from 'react';
+import useSettings from '../vm-hooks/useSettings';
+import './style';
+const { TabPane } = Tabs;
+
+const SubTabs = (props: TabsProps) => {
+    const { theme } = useSettings();
+    return (
+        <Tabs {...props} className={`vtx-sub-tabs ${theme}`} type="card">
+            {props.children}
+        </Tabs>
+    );
+};
+
+interface SubTabPaneProps extends TabPaneProps {
+    subKey: string;
+}
+
+export const SubTabPane = (props: SubTabPaneProps) => {
+    const { subKey, children, ...ext } = props;
+    return (
+        <TabPane key={subKey} {...ext} className="tab-pane">
+            {children}
+        </TabPane>
+    );
+};
+
+export const SubTabsLine = (props: TabsProps) => {
+    const { theme } = useSettings();
+    return (
+        <Tabs {...props} className={`vtx-sub-tabs-line ${theme}`}>
+            {props.children}
+        </Tabs>
+    );
+};
+
+export default SubTabs;

package/src/vm-sub-tabs/style/index.less

@@ -0,0 +1,111 @@
+.vtx-sub-tabs {
+    --border: 1px solid #dadadaff;
+    --border-active: 1px solid #1890ffff;
+    --border-image: none;
+    --color: #222;
+    --active-color: #1890ffff;
+    --active-bg: transparent;
+
+    img {
+        margin: -2px 14px 0 0;
+    }
+
+    &.dark {
+        --border: 1px solid #95fff933;
+        --border-image: linear-gradient(180deg, #356178, #51e0ff) 1 1;
+        --border-active: 1px solid #95fff9ff;
+        --color: #8d9798ff;
+        --active-color: #95fff9ff !important;
+        --active-bg: linear-gradient(0deg, #1a606d, #192f3f);
+    }
+    .tab-pane {
+        padding: 18px 0;
+    }
+    > .ant-tabs-nav {
+        // margin-bottom: 0;
+
+        &::before {
+            display: none;
+        }
+
+        > .ant-tabs-nav-wrap {
+            > .ant-tabs-nav-list {
+                > .ant-tabs-tab {
+                    height: 32px;
+                    margin-left: 0 !important;
+                    color: var(--color);
+                    background-color: transparent;
+                    border: var(--border);
+                    border-radius: 2px;
+                }
+
+                > .ant-tabs-tab-active {
+                    background: var(--active-bg);
+                    border: var(--border-active);
+                    border-image: var(--border-image);
+
+                    .ant-tabs-tab-btn {
+                        color: var(--active-color);
+                        &:focus {
+                            color: var(--active-color);
+                        }
+                    }
+                }
+            }
+        }
+        .ant-tabs-tab-btn:active {
+            color: var(--border-active);
+        }
+    }
+}
+
+.vtx-sub-tabs-line {
+    --border: 1px solid #dadadaff;
+    --border-active: 1px solid #1890ffff;
+    --border-image: none;
+    --color: #222;
+    --active-color: #1890ffff;
+    --active-bg: transparent;
+
+    &.dark {
+        --border: 1px solid #95fff933;
+        --border-image: linear-gradient(180deg, #356178, #51e0ff) 1 1;
+        --border-active: 1px solid #95fff9ff;
+        --color: #8d9798ff;
+        --active-color: #95fff9ff !important;
+        --active-bg: linear-gradient(0deg, #1a606d, #192f3f);
+    }
+    > .ant-tabs-nav {
+        // margin-bottom: 0;
+
+        &::before {
+            border-bottom: 1px solid rgba(102, 244, 251, 0.1);
+            content: '';
+        }
+
+        > .ant-tabs-nav-wrap {
+            > .ant-tabs-nav-list {
+                > .ant-tabs-tab {
+                    height: 32px;
+                    color: var(--color);
+                    background-color: transparent;
+                }
+
+                > .ant-tabs-tab-active {
+                    .ant-tabs-tab-btn {
+                        color: var(--active-color);
+                        &:focus {
+                            color: var(--active-color);
+                        }
+                    }
+                }
+                > .ant-tabs-ink-bar {
+                    background: var(--active-color);
+                }
+            }
+        }
+        .ant-tabs-tab-btn:active {
+            color: var(--border-active);
+        }
+    }
+}

package/src/vm-sub-tabs/style/index.ts

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

package/src/vm-sub-title/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import useSettings from '../vm-hooks/useSettings';
+import './style';
+
+function SubTitle(props: {
+    title?: string;
+    extra?: string | React.ReactElement;
+    extraStyle?: React.CSSProperties;
+}) {
+    const { theme } = useSettings();
+    const { title = '基本信息', extra, extraStyle = {} } = props;
+    return (
+        <div className={`sub-title ${theme}`}>
+            {title}
+            {extra ? (
+                <div className="extra" style={{ ...extraStyle }}>
+                    {extra}
+                </div>
+            ) : null}
+        </div>
+    );
+}
+
+export default SubTitle;

package/src/vm-sub-title/style/index.less

@@ -0,0 +1,17 @@
+.sub-title {
+    font-size: 14px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #000;
+    line-height: 20px;
+    margin-bottom: 16px;
+    position: relative;
+    &.dark {
+        color: #95fff9;
+    }
+    .extra {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+}

package/src/vm-sub-title/style/index.ts

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

package/src/vm-table/index.tsx

@@ -0,0 +1,190 @@
+import { DownOutlined, ExportOutlined } from '@ant-design/icons';
+import { useSetState } from 'ahooks';
+import type { MenuProps, TableProps, TabPaneProps, TabsProps } from 'antd';
+import { Button, ConfigProvider, Dropdown, Menu, Table, Tabs } from 'antd';
+import zhCN from 'antd/es/locale/zh_CN';
+import React, { useEffect, useMemo } from 'react';
+import useSettings from '../vm-hooks/useSettings';
+import './style';
+
+interface VMTableProps extends TableProps<any> {
+    isIndex?: boolean;
+    height?: number;
+    onRowCallBack?: Function;
+    handleTableChange?:Function;
+}
+
+const VMTable: React.FC<VMTableProps> = (props) => {
+    const {
+        rowKey = 'id',
+        isIndex = true,
+        columns,
+        pagination = false,
+        height = 120,
+        dataSource = [],
+        onRowCallBack, // 点击某行返回的数据
+        handleTableChange,
+        ...ext
+    } = props;
+
+    const [state, setState] = useSetState({
+        selectedRowId: null
+    })
+
+    const newColumns = useMemo(() => {
+        const result = isIndex
+            ? columns
+                ? [
+                    {
+                        title: '序号',
+                        render: (_: any, __: any, index: number) => {
+                            if (
+                                pagination &&
+                                typeof pagination?.current === 'number' &&
+                                typeof pagination?.pageSize === 'number'
+                            ) {
+                                return (
+                                    (pagination?.current - 1) * pagination?.pageSize + index + 1
+                                );
+                            } else {
+                                return index + 1;
+                            }
+                        },
+                        width: 60,
+                    },
+                    ...columns,
+                ]
+                : undefined
+            : columns;
+        if (result) {
+            for (const col of result) {
+                if (!col.width) col.width = 70;
+            }
+        }
+        return result;
+    }, [columns, pagination]);
+    const { theme } = useSettings();
+
+    useEffect(() => {
+        setState({
+            selectedRowId: null,
+        })
+    }, [JSON.stringify(dataSource)])
+    return (
+        <ConfigProvider locale={zhCN}>
+            <Table
+                className={`vm-table ${theme}`}
+                rowKey={rowKey}
+                size="small"
+                scroll={{ y: height, scrollToFirstRowOnChange: true }}
+                columns={newColumns}
+                pagination={
+                    pagination
+                        ? {
+                            // showQuickJumper: true,
+                            size: 'default',
+                            showSizeChanger: false,
+                            //   hideOnSinglePage: true,
+                            showTotal: (total) => `共${total}条`,
+                            ...pagination,
+                        }
+                        : false
+                }
+                dataSource={dataSource}
+                rowClassName={record => (state.selectedRowId === record.id ? `vm-table-row ${theme}` : '')}
+                onRow={(record) => {
+                    return {
+                        onClick: () => {
+                            if (!onRowCallBack) return;
+                            setState({
+                                selectedRowId: record.id
+                            })
+                            onRowCallBack(record)
+                        }, // click row
+                    };
+                }}
+                onChange={(_pagination, _filters, sorter)=>handleTableChange && handleTableChange(sorter)}
+                {...ext}
+            />
+        </ConfigProvider>
+    );
+};
+
+/**
+ * 表格导出按钮
+ * @param props
+ * @returns
+ */
+
+interface ExportBtnProps {
+    onClick?: (key: string) => void;
+    items?: MenuProps['items'];
+}
+export const ExportBtn: React.FC<ExportBtnProps> = (props) => {
+    const { onClick, items } = props;
+    const { theme } = useSettings();
+    const menu = (
+        <Menu
+            onClick={(menuItem) => onClick && onClick(menuItem.key)}
+            items={
+                items || [
+                    {
+                        label: '导出选中行',
+                        key: 'select-rows',
+                    },
+                    {
+                        label: '导出当前页',
+                        key: 'current-page',
+                    },
+                    {
+                        label: '导出全部',
+                        key: 'all',
+                    },
+                ]
+            }
+        />
+    );
+    return (
+        <Dropdown
+            overlay={menu}
+            trigger={['click']}
+            className={`vtx-export-btn ${theme}`}
+            overlayClassName={`vtx-export-dropdown ${theme}`}
+        >
+            <Button type="primary" style={{ padding: '0 10px' }}>
+                <ExportOutlined />
+                导出
+                <DownOutlined />
+            </Button>
+        </Dropdown>
+    );
+};
+
+export const renderColumnParam = (cols: Array<{ title: string; dataIndex: string }>) => {
+    let colsParam: Array<{ title: string; field: string }> = [];
+    cols.forEach((item) => {
+        colsParam.push({
+            title: item.title,
+            field: item.dataIndex,
+        });
+    });
+    return JSON.stringify(colsParam);
+};
+
+const { TabPane } = Tabs;
+
+export const TableTabs = (props: TabsProps) => {
+    const { theme } = useSettings();
+    return (
+        <Tabs {...props} className={`vtx-table-tabs ${theme}`}>
+            {props.children}
+        </Tabs>
+    );
+};
+
+export const TableTabsPane = (props: TabPaneProps) => {
+    return <TabPane {...props} style={{ display: 'none' }} />;
+};
+
+export default VMTable;
+//# sourceMappingURL=index.jsx.map

package/src/vm-table/style/index.less

@@ -0,0 +1,196 @@
+.vm-table {
+    --table-bg: white;
+    --table-header-bg-color: #ecf6ff;
+    --table-color: #222;
+    --table-head-color: #222;
+    --table-row-border: 1px solid #f0f0f0;
+    --table-row-bg-color: #fafafa;
+
+    &.dark {
+        --table-bg: transparent;
+        --table-header-bg-color: #00adb11a;
+        --table-color: white;
+        --table-head-color: #d3fff9ff;
+        --table-row-border: 1px solid transparent;
+        --table-row-bg-color: #ffffff0d;
+
+        .ant-pagination {
+            color: white;
+            .ant-pagination-item {
+                background-color: transparent;
+                border-color: #454847;
+                > a {
+                    color: white;
+                }
+
+                &.ant-pagination-item-active,
+                &:hover {
+                    border-color: #95fff9;
+                    > a {
+                        color: #95fff9;
+                    }
+                }
+            }
+            .ant-select-arrow {
+                color: white;
+            }
+            .ant-pagination-item-link {
+                color: white;
+                background-color: transparent;
+                border-color: #454847;
+                &:hover :not(:disabled) {
+                    color: #95fff9;
+                    border-color: #95fff9;
+                }
+            }
+            .ant-select-dropdown {
+                background: #0d1a1b;
+                .ant-select-item {
+                    color: white;
+                }
+                .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+                    background-color: #2d575a;
+                }
+                .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+                    background-color: #1c3436;
+                }
+            }
+            .ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis {
+                color: #ffffff40;
+            }
+            .ant-pagination-options-quick-jumper input {
+                color: white;
+                background: transparent;
+                border: 1px solid #3c7073;
+                &:hover {
+                    border: 1px solid #6cc9ce;
+                }
+            }
+            .ant-select:not(.ant-select-customize-input) .ant-select-selector {
+                background-color: transparent;
+                border: 1px solid #3c7073;
+            }
+            .ant-select:not(.ant-select-disabled):hover .ant-select-selector {
+                border: 1px solid #6cc9ce;
+            }
+            .ant-select {
+                color: white;
+            }
+        }
+    }
+
+    .ant-table {
+        background: var(--table-bg);
+        .vm-table-row {
+            background: #2d575a;
+        }
+
+        .ant-table-container {
+            &::before {
+                display: none;
+            }
+
+            &::after {
+                display: none;
+            }
+
+            .ant-table-content {
+                padding-bottom: 10px;
+            }
+            table {
+                border-collapse: collapse;
+
+                thead {
+                    th {
+                        padding: 8px 12px;
+                        color: var(--table-head-color);
+                        white-space: no-wrap;
+                        background-color: var(--table-header-bg-color);
+                        border: none;
+
+                        &::before {
+                            display: none;
+                        }
+                    }
+                }
+
+                tbody {
+                    tr {
+                        td {
+                            padding: 8px 12px;
+                            color: var(--table-color);
+                            white-space: nowrap;
+                            background-color: transparent;
+                            border: none;
+                        }
+
+                        &:nth-child(odd) {
+                            td {
+                                background-color: var(--table-row-bg-color);
+                                border-top: var(--table-row-border);
+                                border-bottom: var(--table-row-border);
+
+                                &:first-child {
+                                    border-left: var(--table-row-border);
+                                }
+
+                                &:last-child {
+                                    border-right: var(--table-row-border);
+                                }
+                            }
+                        }
+                    }
+
+                    .ant-table-placeholder {
+                        .ant-empty-description {
+                            color: #fff;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.vtx-export-btn {
+    &.dark {
+        background: #2bd8cf;
+        border-color: #2bd8cf;
+        > span {
+            color: black;
+        }
+    }
+}
+.vtx-export-dropdown {
+    &.dark {
+        .ant-dropdown-menu {
+            background-color: #0d1a1b;
+            .ant-dropdown-menu-item {
+                color: white;
+                &:hover {
+                    background-color: #1c3436;
+                }
+            }
+        }
+    }
+}
+.vtx-table-tabs {
+    &.dark {
+        .ant-tabs-nav {
+            &::before {
+                border-bottom: 1px solid #ffffff1a;
+            }
+        }
+        .ant-tabs-tab-btn {
+            color: #c5c5c5ff;
+        }
+        .ant-tabs-ink-bar {
+            background-color: #95fff9;
+        }
+        .ant-tabs-tab-active {
+            .ant-tabs-tab-btn {
+                color: #95fff9 !important;
+            }
+        }
+    }
+}

package/src/vm-table/style/index.ts

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

package/src/vm-video/api.ts

@@ -0,0 +1,20 @@
+import { request } from '@vtx/utils';
+import { useRequest } from 'ahooks';
+const VideoService = {
+    getChannels: (billId: string, ready: boolean) => {
+        const { data: channelRes } = useRequest(
+            () =>
+                request.get('/cloud/vis/base/np/videoDevice/loadVideoChannelByBillId.smvc', {
+                    data: { billId },
+                }),
+            { ready, refreshDeps: [billId] },
+        );
+        const channels = channelRes?.data ? JSON.parse(channelRes.data) : [];
+
+        return {
+            channels,
+        };
+    },
+};
+
+export default VideoService;

package/src/vm-video/index.less

@@ -0,0 +1,10 @@
+@import '../style/index';
+
+.vm-video {
+    height: 640px;
+    padding: 0 20px;
+    background: #000;
+    .ant-tabs-tabpane {
+        height: 100%;
+    }
+}

package/src/vm-video/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BillPlayer } from '@vtx/player';
+import './index.less';
+
+interface VideoTypeProps {
+    videoPlaceCode?: string;
+}
+
+const VmVideo = ({ videoPlaceCode = '' }: VideoTypeProps) => {
+    return (
+        <div className="vm-video">
+            {videoPlaceCode ? (
+                <BillPlayer height={640} isDark params={{ billId: videoPlaceCode }} />
+            ) : (
+                <div
+                    style={{
+                        display: 'flex',
+                        height: '100%',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        color: '#fff',
+                    }}
+                >
+                    暂无视频
+                </div>
+            )}
+        </div>
+    );
+};
+export default VmVideo;

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

@@ -0,0 +1,19 @@
+import { request } from '@vtx/utils';
+
+export const saveFavoriter = (objectIds: string, type: string) => {
+    return request.post('/cloud/management/api/v101/user/favorites/saveUserFavorites', {
+        data: { objectIds, collectionType: type },
+    });
+};
+
+export const delFavoriter = (objectIds: string, type: string) => {
+    return request.post('/cloud/management/api/v101/user/favorites/deleteUserFavorites', {
+        data: { objectIds, collectionType: type },
+    });
+};
+
+export const fetchFavoriter = (objectIds: string, type: string) => {
+    return request.get('/cloud/management/api/v101/user/favorites/getUserFavoritesIds', {
+        data: { objectIds, collectionTypes: type },
+    });
+};