feat: 初始页配置，modbus通道页

src/pages/link/Channel/Modbus/index.tsx

@@ -19,6 +19,7 @@ import Save from './Save';
 import { getMenuPathByCode } from '@/utils/menu';
 import { useDomFullHeight } from '@/hooks';
 import { onlyMessage } from '@/utils/util';
+// import NewModbus from '../new'
 
 export const service = new Service('modbus/master');
 
@@ -210,6 +211,7 @@ const Modbus = () => {
   ];
   return (
     <PageContainer>
+      {/* <NewModbus/> */}
       <Card style={{ marginBottom: 10 }}>
         <Row gutter={[24, 24]}>
           {topCard.map((item) => (

src/pages/link/Channel/channelCard.tsx

@@ -0,0 +1,52 @@
+import { Badge } from "antd";
+import classNames from "classnames";
+import { useState } from "react";
+import './index.less'
+interface Props {
+    actions: any;
+    onClick: Function;
+    active: boolean;
+    data: any;
+    defaultActiveKey?: any;
+}
+
+const ChannelCard = (props: Props) => {
+    const [actions, setActions] = useState<boolean>(false)
+    const connectImg = require('/public/images/channel/connect.png')
+    const disconnectImg = require('/public/images/channel/disconnect.png')
+
+    return (
+        <div
+            className={
+                classNames("channel-card",
+                    {
+                        active: props.active,
+                        connect: props.data.status === 'connect',
+                        disconnect: props.data.status === 'disconnect'
+                    }
+                )}
+            onMouseEnter={() => { setActions(true) }}
+            onMouseLeave={() => { setActions(false) }}
+        >
+            <div
+                className="channel-card-top"
+                onClick={() => { props.onClick() }}
+            >
+                <div className="card-top-img"> <img src={props.data.status === 'connect' ? connectImg : disconnectImg} /></div>
+                <div className="card-top-name">这里是通道名称</div>
+                <div className="card-top-status">
+                    {props.data.status === 'connect' ?
+                        <Badge status="processing" color={'green'} text={'正常'} /> :
+                        <Badge status="processing" color={'red'} text={'禁用'} />}
+                </div>
+            </div>
+            {
+                actions && <div className="channel-card-actions">
+                    {props.actions}
+                </div>
+            }
+
+        </div>
+    )
+}
+export default ChannelCard;

src/pages/link/Channel/index.less

@@ -0,0 +1,67 @@
+.item {
+    display: flex;
+
+    .item-left {
+        margin-right: 20px;
+        padding-right: 10px;
+        border-right: 1px #EEE solid;
+    }
+
+    .item-right {
+        .ant-card-body {
+            padding-top: 0;
+            padding-left: 0;
+        }
+    }
+}
+
+.channel-card {
+    height: 112px;
+    width: 220px;
+    border: 1px #E0E0E0 solid;
+    margin-top: 16px;
+
+    &.active {
+        &.connect {
+            background-color: #24b27614;
+            border: 1px solid #24B276;
+            border-radius: 2px;
+        }
+
+        &.disconnect {
+            background-color: rgba(255, 144, 0, 0.08);
+            border: 1px solid #FF9000;
+            border-radius: 2px;
+        }
+    }
+
+    .channel-card-top {
+        .card-top-img {
+            text-align: end;
+        }
+
+        .card-top-name {
+            color: #323130;
+            font-size: 16px;
+            font-weight: 600;
+            margin-left: 16px;
+            line-height: 22px;
+            position: relative;
+            bottom: 8px;
+        }
+
+        .card-top-status {
+            margin-left: 16px;
+            margin-bottom: 8px
+        }
+    }
+
+    .channel-card-actions {
+        // height: 40px;
+        background-color: #F6F6F6;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        border-top: 1px #eee solid;
+    }
+}

src/pages/link/Channel/new.tsx

@@ -0,0 +1,340 @@
+import { Card, Input } from 'antd';
+import { useDomFullHeight } from '@/hooks';
+import './index.less'
+import SearchComponent from '@/components/SearchComponent';
+import ProTable, { ActionType, ProColumns } from '@jetlinks/pro-table';
+import PermissionButton from '@/components/PermissionButton';
+import { EditOutlined, PlusOutlined } from '@ant-design/icons';
+import { useRef, useState } from 'react';
+import { useIntl } from 'umi';
+import ChannelCard from './channelCard'
+
+const NewModbus = () => {
+    const { minHeight } = useDomFullHeight(`.modbus`);
+    const intl = useIntl();
+    const actionRef = useRef<ActionType>();
+    const { permission } = PermissionButton.usePermission('link/Channel/Modbus');
+    const [param, setParam] = useState({});
+    const [activeKey, setActiveKey] = useState<any>('')
+    const data = [
+        {
+            id: 1,
+            status: 'connect'
+        },
+        {
+            id: 2,
+            status: 'disconnect'
+        },
+    ]
+
+    const columns: ProColumns<any>[] = [
+        {
+            title: '名称',
+            dataIndex: 'name',
+            ellipsis: true,
+            fixed: 'left',
+        },
+        {
+            title: '功能码',
+            dataIndex: 'host',
+        },
+        {
+            title: '从站ID',
+            dataIndex: 'port',
+            search: false,
+            valueType: 'digit',
+        },
+        {
+            title: '寄存器数量',
+            dataIndex: 'port',
+            search: false,
+            valueType: 'digit',
+        },
+        {
+            title: '地址',
+            dataIndex: 'port',
+            search: false,
+            valueType: 'digit',
+        },
+        {
+            title: '当前数据',
+            dataIndex: 'port',
+            search: false,
+            valueType: 'digit',
+        },
+        {
+            title: '采集状态',
+            dataIndex: 'port',
+            search: false,
+            valueType: 'digit',
+        },
+        {
+            title: '状态',
+            dataIndex: 'port',
+            search: false,
+            valueType: 'digit',
+        },
+        // {
+        //   title: '状态',
+        //   dataIndex: 'state',
+        //   renderText: (state) => (
+        //     <Badge text={state?.text} status={state?.value === 'disabled' ? 'error' : 'success'} />
+        //   ),
+        //   valueType: 'select',
+        //   valueEnum: {
+        //     disabled: {
+        //       text: intl.formatMessage({
+        //         id: 'pages.data.option.disabled',
+        //         defaultMessage: '禁用',
+        //       }),
+        //       status: 'disabled',
+        //     },
+        //     enabled: {
+        //       text: '正常',
+        //       status: 'enabled',
+        //     },
+        //   },
+        //   filterMultiple: false,
+        // },
+        // {
+        //   title: '操作',
+        //   valueType: 'option',
+        //   align: 'center',
+        //   width: 200,
+        //   fixed: 'right',
+        //   render: (text, record) => [
+        //     <PermissionButton
+        //       isPermission={permission.update}
+        //       key="edit"
+        //       onClick={() => {
+        //         setVisible(true);
+        //         setCurrent(record);
+        //       }}
+        //       type={'link'}
+        //       style={{ padding: 0 }}
+        //       tooltip={{
+        //         title: intl.formatMessage({
+        //           id: 'pages.data.option.edit',
+        //           defaultMessage: '编辑',
+        //         }),
+        //       }}
+        //     >
+        //       <EditOutlined />
+        //     </PermissionButton>,
+        //     <PermissionButton
+        //       type="link"
+        //       key={'action'}
+        //       style={{ padding: 0 }}
+        //       popConfirm={{
+        //         title: intl.formatMessage({
+        //           id: `pages.data.option.${
+        //             record.state.value !== 'disabled' ? 'disabled' : 'enabled'
+        //           }.tips`,
+        //           defaultMessage: '确认禁用？',
+        //         }),
+        //         onConfirm: async () => {
+        //           if (record.state.value === 'disabled') {
+        //             await service.edit({
+        //               ...record,
+        //               state: 'enabled',
+        //             });
+        //           } else {
+        //             await service.edit({
+        //               ...record,
+        //               state: 'disabled',
+        //             });
+        //           }
+        //           onlyMessage(
+        //             intl.formatMessage({
+        //               id: 'pages.data.option.success',
+        //               defaultMessage: '操作成功!',
+        //             }),
+        //           );
+        //           actionRef.current?.reload();
+        //         },
+        //       }}
+        //       isPermission={permission.action}
+        //       tooltip={{
+        //         title: intl.formatMessage({
+        //           id: `pages.data.option.${record.state.value !== 'disabled' ? 'disabled' : 'enabled'}`,
+        //           defaultMessage: record.state.value !== 'disabled' ? '禁用' : '启用',
+        //         }),
+        //       }}
+        //     >
+        //       {record.state.value !== 'disabled' ? <StopOutlined /> : <PlayCircleOutlined />}
+        //     </PermissionButton>,
+        //     <PermissionButton
+        //       isPermission={permission.view}
+        //       style={{ padding: 0 }}
+        //       key="link"
+        //       type="link"
+        //       tooltip={{
+        //         title: '数据点绑定',
+        //       }}
+        //       onClick={() => {
+        //         history.push(`${getMenuPathByCode('link/Channel/Modbus/Access')}?id=${record.id}`);
+        //       }}
+        //     >
+        //       <ControlOutlined />
+        //     </PermissionButton>,
+        //     <PermissionButton
+        //       isPermission={permission.delete}
+        //       style={{ padding: 0 }}
+        //       disabled={record.state.value === 'enabled'}
+        //       popConfirm={{
+        //         title: '确认删除',
+        //         disabled: record.state.value === 'enabled',
+        //         onConfirm: async () => {
+        //           const resp: any = await service.remove(record.id);
+        //           if (resp.status === 200) {
+        //             onlyMessage(
+        //               intl.formatMessage({
+        //                 id: 'pages.data.option.success',
+        //                 defaultMessage: '操作成功!',
+        //               }),
+        //             );
+        //             actionRef.current?.reload();
+        //           }
+        //         },
+        //       }}
+        //       key="delete"
+        //       type="link"
+        //     >
+        //       <DeleteOutlined />
+        //     </PermissionButton>,
+        //   ],
+        // },
+    ];
+    return (
+        <Card className='modbus' style={{ minHeight }}>
+            <div className='item'>
+                <div className='item-left'>
+                    <div style={{ width: 220 }}>
+                        <Input.Search
+                            placeholder="请输入名称"
+                            allowClear
+                            onSearch={(value) => {
+                                console.log(value)
+                            }}
+                        />
+                        <PermissionButton
+                            onClick={() => {
+                                // setDeviceVisiable(true);
+                            }}
+                            isPermission={permission.add}
+                            key="add"
+                            icon={<PlusOutlined />}
+                            type="default"
+                            style={{ width: '100%', marginTop: 16 }}
+                        >
+                            新增
+                        </PermissionButton>
+                        <div className='item-left-list'>
+                            {
+                                data.map(item => <ChannelCard
+                                    active={activeKey === item.id}
+                                    data={item}
+                                    onClick={() => {
+                                        setActiveKey(item.id)
+                                        // console.log(item.id)
+                                    }}
+                                    actions={
+                                        <>
+                                            <PermissionButton
+                                                isPermission={permission.update}
+                                                key="edit"
+                                                onClick={() => {
+                                                    // setVisible(true);
+                                                    // setCurrent(record);
+                                                }}
+                                                type={'link'}
+                                                style={{ padding: 0 }}
+                                                tooltip={{
+                                                    title: intl.formatMessage({
+                                                        id: 'pages.data.option.edit',
+                                                        defaultMessage: '编辑',
+                                                    }),
+                                                }}
+                                            >
+                                                <EditOutlined />编辑
+                                            </PermissionButton>
+                                            <PermissionButton
+                                                isPermission={permission.update}
+                                                key="enbale"
+                                                onClick={() => {
+                                                    // setVisible(true);
+                                                    // setCurrent(record);
+                                                }}
+                                                type={'link'}
+                                                style={{ padding: 0 }}
+                                            >
+                                                <EditOutlined />禁用
+                                            </PermissionButton>
+                                            <PermissionButton
+                                                isPermission={permission.update}
+                                                key="delete"
+                                                onClick={() => {
+                                                    // setVisible(true);
+                                                    // setCurrent(record);
+                                                }}
+                                                type={'link'}
+                                                style={{ padding: 0 }}
+                                                tooltip={{
+                                                    title: intl.formatMessage({
+                                                        id: 'pages.data.option.edit',
+                                                        defaultMessage: '编辑',
+                                                    }),
+                                                }}
+                                            >
+                                                <EditOutlined />
+                                            </PermissionButton>
+                                        </>} />)
+                            }
+
+                        </div>
+                    </div>
+                </div>
+                <div className='item-right'>
+                    <SearchComponent<any>
+                        field={columns}
+                        target="modbus"
+                        onSearch={(data) => {
+                            actionRef.current?.reset?.();
+                            setParam(data);
+                        }}
+                    />
+                    <ProTable
+                        actionRef={actionRef}
+                        params={param}
+                        columns={columns}
+                        rowKey="id"
+                        // scroll={{ x: 1366 }}
+                        search={false}
+                        headerTitle={
+                            <PermissionButton
+                                onClick={() => {
+                                    // setMode('add');
+                                    // setVisible(true);
+                                    // setCurrent({});
+                                }}
+                                isPermission={permission.add}
+                                key="add"
+                                icon={<PlusOutlined />}
+                                type="primary"
+                            >
+                                {intl.formatMessage({
+                                    id: 'pages.data.option.add',
+                                    defaultMessage: '新增',
+                                })}
+                            </PermissionButton>
+                        }
+                    // request={async (params) =>
+                    //     service.query({ ...params, sorts: [{ name: 'createTime', order: 'desc' }] })
+                    // }
+                    />
+                </div>
+            </div>
+        </Card >
+    )
+}
+export default NewModbus;

src/pages/system/Basis/init.tsx

@@ -1,15 +1,21 @@
 import { UploadImage } from '@/components';
 import { Card, Col, Form, Input, Row, Select, } from 'antd';
+import { useEffect} from 'react';
 
 interface Props{
-
+    getData:Function
 }
 
 const Init = (props:Props) => {
     const [form] = Form.useForm();
+
+    useEffect(()=>{
+        props.getData(form)
+    },[])
+
     return (
         <Card>
-            <Form layout="vertical" form={form}>
+            <Form layout="vertical" form={form} >
                 <Row gutter={[24, 24]}>
                     <Col span={10}>
                         <Form.Item