add:站点管理支持树状结构

.env

@@ -5,7 +5,7 @@ PROXY=/Cityinterface:http://192.168.10.150:8777;/Publish:http://192.168.10.150:8
 # PROXY2 = test : http://localhost:8006/
 
 # 本地应用启动的host域名
-HOST = localhost
+HOST = 0.0.0.0
 
 # 本地应用启动的端口
 PORT = 3001
\ No newline at end of file

src/pages/platformCenter/hostmanager/IotConfig/IotConfig.jsx

 import React, { useEffect, useState } from 'react'
-import { Card, Form, Input, Button, Select } from 'antd'
+import { Card, Form, Input, Button, Select, message } from 'antd'
 import styles from './IotConfig.less'
-
+import { GetIOTPlatformVersion, GetTCPConfigInfo, PingIOTPlatform,SaveTcpAddress } from '../../../../services/platform/hostmanager'
 const layout = {
     labelCol: { span: 8 },
     wrapperCol: { span: 16 },
-    
+
 };
 const tailLayout = {
     wrapperCol: { offset: 8, span: 16 },
-   
+
 };
 
 const IotConfig = () => {
 
+
+    const [currentIotVersion, setCurrentIotVersion] = useState({ data: "" });
+    const [currentIotConfig, setCurrentIotConfig] = useState({
+        TcpAddress: "",
+        SSLSafe: "",
+        IotAddress: ""
+    });
+
+    const [form] = Form.useForm();
     const onFinish = (values) => {
-        console.log('Success:', values);
+        if(values.IotAddress != null &&values.IotAddress.length > 0){
+            PingIot({ip:values.IotAddress,values:values})
+        }else{
+            SaveIotConfig({
+                tcpAddress:values.TcpAddress,
+                iotAddress:values.IotAddress,
+                sslSafe:values.SSLSafe
+            })
+        }
     };
 
     const onFinishFailed = (errorInfo) => {
         console.log('Failed:', errorInfo);
     };
 
+    useEffect(() => {
+        GetCurentIotVerison()
+        GetIotConfig()
+        
+    }, [])
+
+    const GetCurentIotVerison = () => {
+        GetIOTPlatformVersion().then(
+            res => {
+                if (res.data) {
+                    setCurrentIotVersion(res)
+                }
+            }
+        )
+    }
+    const GetIotConfig = () => {
+        GetTCPConfigInfo().then(
+            res => {
+                if (res.data) {
+                    let obj = {};
+                    Object.keys(currentIotConfig).forEach(k => {
+                        obj[k] = res.data[k];
+                    });
+                    console.log(obj)
+                    form.setFieldsValue(obj);
+                    setCurrentIotConfig(val => ({ ...val, ...obj }));
+
+                }
+            }
+        )
+    }
+    const PingIot = (ip,values) => {
+        PingIOTPlatform({
+            ip:ip
+        }).then(
+            res =>{
+                if(res.code === 0){
+                    SaveIotConfig({
+                        tcpAddress:values.TcpAddress,
+                        iotAddress:values.IotAddress,
+                        sslSafe:values.SSLSafe
+                    })
+                }else{
+                    message.info("物联平台服务器连接异常!");
+                }
+            }
+        )
+    }
+    const SaveIotConfig = (config) =>{
+        SaveTcpAddress(config).then(
+            res =>{
+                if(res.code === 0){
+                    message.info('配置保存成功');
+                }
+            }
+        )
+    }
+
+
     return (
         <div className={styles.iot_container}>
-            <Card title="物联平台(V2.1.0302)" style={{ width: 350 }}>
+            <Card title={`物联平台[${currentIotVersion.data}]`} style={{ width: 430 }}>
 
                 <Form
                     {...layout}
+                    form={form}
                     name="basic"
                     initialValues={{ remember: true }}
                     onFinish={onFinish}
                     onFinishFailed={onFinishFailed}
                 >
                     <Form.Item
-                        label="服务器地址"
-                        name="username"
-                        rules={[{ required: true, message: '请输入服务器地址!' }]}
+                        label="服务器地址(平台)"
+                        name="IotAddress"
+                        rules={[{ required: false, message: '请输入服务器地址!' }]}
+
                     >
                         <Input />
                     </Form.Item>
-                    <Form.Item {...tailLayout}>
-                        <Button type="primary" htmlType="submit">
-                            保存连接
-                        </Button>
-                    </Form.Item>
-                </Form>
-            </Card>
-            <Card title="EMQ服务器" style={{ width: 350, marginLeft: 15 }}>
 
-                <Form
-                    {...layout}
-                    name="basic"
-                    initialValues={{ remember: true }}
-                    onFinish={onFinish}
-                    onFinishFailed={onFinishFailed}
-                >
                     <Form.Item
-                        name="select"
-                        label="SSL"
-                        hasFeedback
-                        rules={[{ required: true, message: 'Please select your country!' }]}
-                        initialValue="否"
-                    >
-                        <Select placeholder="Please select a country">
-                            <Option value="是">是</Option>
-                            <Option value="否">否</Option>
-                        </Select>
-                    </Form.Item>
-                    <Form.Item 
-                        label="服务器地址"
-                        name="username"
+                        label="服务器地址(EMQ)"
+                        name="TcpAddress"
                         rules={[{ required: true, message: '请输入服务器地址!' }]}
+
+
                     >
                         <Input />
                     </Form.Item>
+                    <Form.Item
+                        name="SSLSafe"
+                        label="SSL(EMQ)"
+                        hasFeedback
+                        rules={[{ required: true, message: '请选择是否!' }]}
+
+                    >
+                        <Select placeholder="请选择是否!">
+                            <Option value="0">是</Option>
+                            <Option value="1">否</Option>
+                        </Select>
+                    </Form.Item>
                     <Form.Item {...tailLayout}>
                         <Button type="primary" htmlType="submit">
                             保存连接
@@ -85,4 +150,4 @@ const IotConfig = () => {
         </div>
     )
 }
-export default IotConfig
\ No newline at end of file
+export default IotConfig

src/pages/userCenter/siteManage/AddChildModal.jsx

+import React, { useState } from 'react';
+import { Form, Input, notification } from 'antd';
+import SiteModal from '@/components/Modal/SiteModa';
+import { addStation, addChildSiteNode } from '@/services/userCenter/siteManage/api';
+const { Item } = Form;
+const AddChildModal = props => {
+    const [form] = Form.useForm();
+    const [formLayout, setFormLayout] = useState('horizontal');
+    const [loading, setLoading] = useState(false);
+    const { confirmModal } = props;
+    const onSubmit = () => {
+        form
+            .validateFields()
+            .then(res => {
+                console.log(res, 'res');
+                setLoading(true);
+                addChildSiteNode({
+                    pid: props.pid,
+                    nodeName: res.stationName,
+                    description: res.description,
+                })
+                    .then(res => {
+                        setLoading(false);
+                        if (res.code === 0) {
+                            form.resetFields();
+                            notification.success({
+                                message: '通知',
+                                duration: 3,
+                                description: '新增成功',
+                            });
+                            confirmModal();
+                        } else {
+                            notification.error({
+                                message: '提示',
+                                duration: 3,
+                                description: res.message,
+                            });
+                        }
+                    })
+                    .catch(err => {
+                        setLoading(false);
+                        notification.error({
+                            message: '提示',
+                            duration: 3,
+                            description: err,
+                        });
+                    });
+            })
+            .catch(err => {
+                console.error(err);
+            });
+    };
+
+    const onFinish = value => { };
+    return (
+        <SiteModal
+            {...props}
+            title="新增子站点"
+            bodyStyle={{ width: '100%', minHeight: '100px' }}
+            style={{ top: 200, borderRadius: '20px' }}
+            width="600px"
+            destroyOnClose
+            cancelText="取消"
+            okText="确认"
+            onOk={() => onSubmit()}
+            confirmLoading={loading}
+        >
+            <Form
+                form={form}
+                layout={formLayout}
+                onFinish={onFinish}
+                labelCol={{ span: 4 }}
+            >
+                <Item
+                    label="站点名称"
+                    name="stationName"
+                    rules={[
+                        {
+                            required: true,
+                            message: '请输入站点名称',
+                        },
+                    ]}
+                >
+                    <Input placeholder="请输入站点名称" />
+                </Item>
+                {/* <Item label="站点类别">all</Item> */}
+                <Item label="站点描述" name="description">
+                    <Input placeholder="请输入站点描述" />
+                </Item>
+            </Form>
+        </SiteModal>
+    );
+};
+
+export default AddChildModal;

src/pages/userCenter/siteManage/EditModal.jsx

@@ -18,7 +18,7 @@ const EditModal = props => {
         editStation({
           stationName: res.stationName,
           description: res.description,
-          stationID: stationObj.stationID,
+          stationID: stationObj,
           _version: 9999,
           _dc: new Date().getTime(),
         })

src/pages/userCenter/siteManageV2/siteManage.jsx

+import React, { useEffect, useState } from 'react'
+import {
+    // Tree,
+    Table,
+    Space,
+    message,
+    Modal,
+    Input,
+    notification,
+    Tooltip,
+    Card,
+    Button,
+    Spin,
+    Dropdown,
+    Menu,
+    Row,
+    Col,
+    Empty,
+    Pagination,
+    Checkbox
+} from 'antd';
+
+import classnames from 'classnames'
+import {
+    UserOutlined,
+    UserAddOutlined,
+    UsergroupAddOutlined,
+    EditOutlined,
+    EditTwoTone,
+    DeleteOutlined,
+    IdcardOutlined,
+    UnlockOutlined,
+    ApartmentOutlined,
+    StopOutlined,
+    DoubleLeftOutlined,
+    DoubleRightOutlined,
+    DownOutlined,
+} from '@ant-design/icons';
+
+import PageContainer from '@/components/BasePageContainer';
+import Tree from '@/components/ExpendableTree';
+import voca from 'voca';
+import zhCN from 'antd/es/locale/zh_CN';
+import qs from 'qs';
+import styles from './siteManage.less';
+
+import {
+    getWebModuleTree,
+    chooseUserToStation,
+    getAllGroup,
+    getUserByStation,
+    getStationUserList,
+    groupUserPagingList,
+    addChildSiteNode,
+    getSiteTree,
+    getStationUsers
+} from '@/services/userCenter/siteManage/api';
+import lodash, { clone } from 'lodash';
+import AddModal from '../siteManage/AddModal';
+import DelModal from '../siteManage/DelModal';
+import EditModal from '../siteManage/EditModal';
+import AddChildModal from '../siteManage/AddChildModal';
+const { Search } = Input;
+const placeholder = '请输入机构名称';
+const SiteManageV2 = () => {
+
+
+
+
+    const [treeVisible, setTreeVisible] = useState(true); // 树是否可见
+    const [treeData, setTreeData] = useState([]); // 用户站点树
+    const [treeDataCopy, setTreeDataCopy] = useState([]); // 机构树数据备份，用于更改机构
+    const [treeState, setTreeState] = useState(true); // 树第一次加载
+    const [treeLoading, setTreeLoading] = useState(false);
+    const [currentStation, setCurrentStation] = useState(''); // 当前选中站点
+    const [currentStationOperate, setCurrentStationOperate] = useState(false)
+    const [flag, setFlag] = useState(1);//操作标致触发界面刷新
+    const [dataList, setdataList] = useState([]);//当前站点对应的分页用户列表
+    const [visibleParams, setvisibleParams] = useState({
+        modalVisible: false, // 新增弹窗
+        delVisible: false, // 删除弹窗
+        editVisible: false, // 修改弹窗
+        spinLoading: false, // 加载弹窗
+        btnLoading: false,
+        loading: false,
+        checkBoxLoading: false,
+    });
+    const [total, setTotal] = useState(0); // 分页总数
+    const [page, setPage] = useState({ pageNum: 1, pageSize: 5 });
+    const [selectList, setSelectList] = useState([]); // 选择列表数据
+    const [updatePageUser, setUpdatePageUser] = useState(1);//
+    const [updateCheck, setUpdateCheck] = useState(1);
+    const [name, setName] = useState('');
+
+    // 渲染机构树
+    const mapTree = org => {
+        const haveChildren = Array.isArray(org.children) && org.children.length > 0;
+        return {
+            title: org.text,
+            key: org.id,
+            // icon: <UserOutlined style={{ display: 'inline' }} />,
+            // 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
+            children: haveChildren ? org.children.map(i => mapTree(i)) : [],
+        };
+    };
+    // 重新渲染树
+    const updateTrees = () => {
+        setTreeLoading(true);
+        getSiteTree({ selectNode: -1 }).then(
+            res => {
+                if (res.data.length > 0) {
+                    setTreeLoading(false);
+                    setTreeData(res.data);
+                    setTreeDataCopy(res.data);
+                    // 第一次加载，默认选择第一个组织
+                    if (treeState) {
+                        onSelect([res.data[0].id], false);//待会儿要改
+                        setTreeState(false);
+                    }
+                } else {
+                    setTreeLoading(false);
+                    notification.error({
+                        message: '获取失败',
+                        description: res.message,
+                    });
+                }
+            }
+        )
+
+    };
+
+    // 获取用户机构树
+    useEffect(() => {
+        updateTrees();
+    }, [flag]);
+
+    //切换站点，点击分页按钮，提交 
+    useEffect(() => {
+        if (!currentStation) return;
+        getList();
+    }, [updatePageUser, name]);
+    //切换站点，提交时触发已勾选列表更新
+    useEffect(() => {
+        if (!currentStation) return;
+        getAllcheckList();
+    }, [currentStation, updateCheck]);
+
+    //获取当前站点可编辑用户(已勾选和未勾选)分页展示
+    const getList = () => {
+        let params = {
+            id: +currentStation || '',
+            PageIndex: +page.pageNum,
+            PageSize: +page.pageSize,
+        };
+        if (name) params = { ...params, name };
+        groupUserPagingList(params).then(res => {
+            if (res.code === 0 && res.data) {
+                let { list } = res.data;
+                // 还原选择的数据
+                if (selectList.length > 0) {
+                    selectList.forEach(item => {
+                        list.forEach((value, index) => {
+                            if (item.GroupId === value.GroupId) {
+                                list[index].Users.forEach((user, userIndex) => {
+                                    if (user.userID === item.userID) {
+                                        list[index].Users[userIndex].isChecked = true;
+                                    }
+                                });
+                                let checkedLen = list[index].Users.filter(v => v.isChecked)
+                                    .length;
+                                if (checkedLen === list[index].Users.length) {
+                                    list[index].isChecked = true;
+                                }
+                            }
+                        });
+                    });
+                }
+                handleShowModal('loading', false);
+                setdataList(lodash.cloneDeep(list));
+                setTotal(res.data.TotalCount);
+            } else {
+                handleShowModal('loading', false);
+                setdataList(lodash.cloneDeep([]));
+            }
+        });
+    }
+    //获取当前站点所有已经勾选的用户
+    const getAllcheckList = async () => {
+        let res = await getUserByStation({
+            stationID: currentStation,
+            _version: 9999,
+            _dc: new Date().getTime(),
+        });
+        if (res.length > 0) {
+            // 还原从后台返回的数据 选中的列表
+            let list = [];
+            // console.log(res);
+            res.forEach(item => {
+                if (item.userList.length > 0) {
+                    item.userList.forEach(value => {
+                        // console.log(value);
+                        if (
+                            value.isChecked &&
+                            list.findIndex(
+                                v => +v.GroupId === +item.OUID && +v.userID === +value.userID,
+                            ) === -1
+                        ) {
+                            list.push({
+                                GroupId: +item.OUID,
+                                GroupName: item.OUName,
+                                userName: value.userName,
+                                userID: value.userID,
+                            });
+                        }
+                    });
+                }
+            });
+            setSelectList(lodash.cloneDeep(list));
+            setUpdatePageUser(updatePageUser + 1)
+        }
+    }
+    //选中某个站点
+    const onSelect = (props, e) => {
+        if (!props[0]) {
+
+            setCurrentStation(currentStation)
+        } else {
+            setCurrentStation(props[0]);
+        }
+        setPage({ pageNum: 1, pageSize: 5 });
+
+    }
+    // 弹出模态框
+    const handleShowModal = (key, value) => {
+        setvisibleParams({ ...visibleParams, [key]: value });
+    };
+    // 获取搜索框的值
+    const handleSearch = value => {
+        setName(value);
+        getList(value);
+    };
+    const confirmModal = e => {
+        handleShowModal('modalVisible', false);
+        setFlag(flag + 1);
+    };
+    const delModal = () => {
+        handleShowModal('delVisible', false);
+        setFlag(flag + 1);
+    };
+    const editModal = () => {
+        handleShowModal('editVisible', false);
+        setFlag(flag + 1);
+    };
+    const addChildModal = ()=>{
+        handleShowModal('addChildVisible', false);
+        setFlag(flag + 1);
+    }
+
+    const handleChangeCollpase = (groupId, isShow) => {
+        let index = dataList.findIndex(item => item.GroupId === groupId);
+        if (dataList[index].children && dataList[index].children.length > 0) {
+            setdataList(lodash.cloneDeep(dataList));
+            return;
+        }
+        handleShowModal('loading', true);
+        getStationUserList({ stationID: currentStation, groupId }).then(
+            res => {
+                if (res.code === 0 && res.data) {
+                    handleShowModal('loading', false);
+                    dataList[index].children = res.data;
+                    setdataList(lodash.cloneDeep(dataList));
+                }
+            },
+        );
+    };
+    // 每组全选全不选
+    const handleChangeAll = (e, index) => {
+        dataList[index].isChecked = e.target.checked;
+        dataList[index].Users.forEach(item => {
+            item.isChecked = e.target.checked;
+            let delIndex = selectList.findIndex(
+                v => v.GroupId === dataList[index].GroupId && v.userID === item.userID,
+            );
+            if (e.target.checked) {
+                if (delIndex === -1) {
+                    selectList.push({
+                        GroupId: dataList[index].GroupId,
+                        GroupName: dataList[index].GroupName,
+                        userName: item.userName,
+                        userID: item.userID,
+                    });
+                }
+            }
+            if (!e.target.checked) {
+                selectList.splice(delIndex, 1);
+            }
+        });
+
+        setSelectList(lodash.cloneDeep(selectList));
+        setdataList(lodash.cloneDeep(dataList));
+    };
+    // 单个选择checkbox
+    const handleChangeSignel = (e, index, vIndex) => {
+        dataList[index].Users[vIndex].isChecked = e.target.checked;
+        let checked = isAllChecked(index);
+        let hasIndex = selectList.findIndex(
+            item =>
+                item.userID === dataList[index].Users[vIndex].userID &&
+                item.GroupId === dataList[index].GroupId,
+        );
+        dataList[index].isChecked = checked;
+        if (e.target.checked && hasIndex === -1) {
+            selectList.push({
+                GroupId: dataList[index].GroupId,
+                GroupName: dataList[index].GroupName,
+                userName: dataList[index].Users[vIndex].userName,
+                userID: dataList[index].Users[vIndex].userID,
+            });
+        } else {
+            selectList.splice(hasIndex, 1);
+        }
+        setdataList(lodash.cloneDeep(dataList));
+    };
+    const isAllChecked = index =>
+        dataList[index].Users.filter(item => item.isChecked).length ===
+        dataList[index].Users.length;
+    // 删除已选列表
+    const handleDel = index => {
+        let { GroupId, userID } = selectList[index];
+        let outerIndex = dataList.findIndex(item => item.GroupId === GroupId);
+        if (outerIndex > -1) {
+            let innerIndex = dataList[outerIndex].Users.findIndex(
+                item => item.userID === userID,
+            );
+            dataList[outerIndex].Users[innerIndex].isChecked = false;
+            dataList[outerIndex].isChecked = isAllChecked(outerIndex);
+        }
+        selectList.splice(index, 1);
+        setSelectList(lodash.cloneDeep(selectList));
+        setdataList(lodash.cloneDeep(dataList));
+    };
+    // 提交
+    const handleCommitBtn = () => {
+        handleShowModal('btnLoading', true);
+        let result = [];
+        let obj = {};
+        selectList.forEach(item => {
+            if (obj[item.GroupId]) {
+                obj[item.GroupId].push(item.userID);
+            } else {
+                obj[item.GroupId] = [item.userID];
+            }
+        });
+        dataList.forEach(item => {
+            if (obj[item.GroupId] && item.Users.length === obj[item.GroupId].length) {
+                obj[item.GroupId].push(item.GroupId);
+            }
+        });
+        result = Object.values(obj);
+        // 数据处理成后台需要的格式
+        if (result.length === 0)
+            return notification.warning({
+                message: '提示',
+                description: '请至少选择选择一个用户！',
+            });
+        chooseUserToStation(
+            qs.stringify({
+                userList: String(result.flat()),
+                stationID: currentStation,
+            }),
+            {
+                headers: {
+                    'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8',
+                },
+            },
+        )
+            .then(res => {
+                handleShowModal('btnLoading', false);
+
+                if (res.success) {
+                    setSelectList([]);
+                    setUpdateCheck(updateCheck + 1);
+                    notification.success({
+                        message: '提示',
+                        duration: 3,
+                        description: '设置成功',
+                    });
+                } else {
+                    notification.error({
+                        message: '提示',
+                        duration: 15,
+                        description: res.message,
+                    });
+                }
+            })
+            .catch(err => {
+                handleShowModal('btnLoading', false);
+                console.log(err);
+            });
+    };
+    // 分页
+    const handleChangePage = (pageNum, pageSize) => {
+        setPage({ pageNum, pageSize });
+        setUpdatePageUser(updatePageUser + 1);
+    };
+    /** ***操作按钮**** */
+    // 机构操作
+    const addTopStation = () => {
+        handleShowModal('modalVisible', true);
+    }
+    const addSubStation = () => {
+        handleShowModal('addChildVisible', true);
+    }
+    const editStation = () => {
+        handleShowModal('editVisible', true);
+    }
+    const deleteStation = () => {
+        handleShowModal('delVisible', true);
+
+    }
+    const stationButtonMenu = (
+        <Menu>
+            <Menu.Item key="2" onClick={addSubStation} icon={<UsergroupAddOutlined />}>
+                添加下级站点
+      </Menu.Item>
+            <Menu.Item key="3" onClick={editStation} icon={<EditOutlined />}>
+                编辑当前站点
+      </Menu.Item>
+            <Menu.Item key="4" onClick={deleteStation} icon={<DeleteOutlined />}>
+                删除当前站点
+      </Menu.Item>
+        </Menu>
+    );
+
+
+    return (
+        <PageContainer className={styles.siteManageContainer}>
+            <div className={styles.contentContainer}>
+                <Card
+                    className={classnames({
+                        [styles.orgContainer]: true,
+                        [styles.orgContainerHide]: !treeVisible,
+                    })}
+                >
+                    <span style={{ margin: '0 106px 0 10px' }}>站点列表</span>
+                    <Tooltip title="添加顶级站点">
+                        <UsergroupAddOutlined
+                            onClick={() => addTopStation()}
+                            style={{
+                                color: '#1890FF',
+                                fontSize: '18px',
+                                verticalAlign: '0.04em',
+                            }}
+                        />
+                    </Tooltip>
+                    {treeData.length > 0 && (
+                        <Tree
+                            showIcon="true"
+                            showLine={{ showLeafIcon: false }}
+                            blockNode
+                            autoExpandParent
+                            selectedKeys={[currentStation]}
+                            onSelect={onSelect}
+                            treeData={treeData.map(t => mapTree(t))}
+                        />
+                    )}
+                    <div className={styles.switcher}>
+                        {treeVisible && (
+                            <Tooltip title="隐藏机构列表">
+                                <DoubleLeftOutlined onClick={() => setTreeVisible(false)} />
+                            </Tooltip>
+                        )}
+                        {!treeVisible && (
+                            <Tooltip title="显示机构列表">
+                                <DoubleRightOutlined onClick={() => setTreeVisible(true)} />
+                            </Tooltip>
+                        )}
+                    </div>
+                </Card>
+                {/* 右侧用户表 */}
+                <div
+                    className={classnames({
+                        [styles.userContainer]: true,
+                        [styles.userContainerHide]: !treeVisible,
+                    })}
+                >
+                    <AddModal
+                        visible={visibleParams.modalVisible}
+                        onCancel={() => handleShowModal('modalVisible', false)}
+                        confirmModal={confirmModal}
+                    />
+                    <AddChildModal
+                        visible={visibleParams.addChildVisible}
+                        pid={currentStation}
+                        onCancel={() => handleShowModal('addChildVisible', false)}
+                        confirmModal={addChildModal}
+                    />
+                    <DelModal
+                        visible={visibleParams.delVisible}
+                        stationId={currentStation}
+                        onCancel={() => handleShowModal('delVisible', false)}
+                        confirmModal={delModal}
+                    />
+                    <EditModal
+                        visible={visibleParams.editVisible}
+                        stationObj={currentStation}
+                        onCancel={() => handleShowModal('editVisible', false)}
+                        confirmModal={editModal}
+                    />
+                    <div
+                        className={classnames({
+                            [styles.boxR]: true,
+                            [styles.boxH]: treeVisible,
+                        })}
+                    >
+                        <Card
+                            className={classnames({
+                                [styles.cardBoxTop]: true,
+                                [styles.boxH]: treeVisible,
+                            })}
+                        >
+                            <Row align="middle">
+                                <Col span={1}>搜索</Col>
+                                <Col span={8}>
+                                    <Search
+                                        allowClear
+                                        placeholder={placeholder}
+                                        onSearch={handleSearch}
+                                        // onChange={handleChange}
+                                        enterButton
+                                    />
+                                </Col>
+                                <Col span={3} />
+                                <Col span={8}>
+                                    <Space size="large">
+                                        <Dropdown overlay={stationButtonMenu} disabled={currentStationOperate}>
+                                            <Button type="primary">
+                                                当前站点操作 <DownOutlined />
+                                            </Button>
+                                        </Dropdown>
+                                    </Space>
+                                </Col>
+                            </Row>
+                        </Card>
+                        <div style={{ background: '#fff' }}>
+                            <Card
+                                className={classnames({
+                                    [styles.boxH]: treeVisible,
+                                    [styles.cardBoxR]: true,
+                                })}
+                            >
+                                {/* <Checkbox className={styles.siteAll}>全选/反选</Checkbox> */}
+                                <Spin spinning={visibleParams.loading}>
+                                    {dataList.map((item, index) => (
+                                        <Panels
+                                            {...item}
+                                            index={index}
+                                            key={item.GroupId}
+                                            handleChangeCollpase={handleChangeCollpase}
+                                            handleChangeAll={handleChangeAll}
+                                            handleChangeSignel={handleChangeSignel}
+                                        />
+                                    ))}
+                                </Spin>
+                                {dataList.length > 0 && !visibleParams.loading ? (
+                                    <>
+                                        <div style={{ textAlign: 'right' }}>
+                                            <Pagination
+                                                size="small"
+                                                total={total}
+                                                current={page.pageNum}
+                                                defaultPageSize="5"
+                                                onChange={handleChangePage}
+                                                pageSizeOptions={['5']}
+                                            />
+                                        </div>
+                                        <p className={styles.siteline}>已选择列表：</p>
+                                        <div className={styles.siteSelectList}>
+                                            <ul className={styles.siteSelectUl}>
+                                                {selectList.map((item, index) => (
+                                                    <li
+                                                        key={`${item.userName}${item.GroupId}${index}`}
+                                                        onClick={() => handleDel(index)}
+                                                    >
+                                                        {`${item.userName}(${item.GroupName})`}
+                                                    </li>
+                                                ))}
+                                            </ul>
+                                        </div>
+                                    </>
+                                ) : (
+                                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                                )}
+                            </Card>
+                            <div className={styles.siteBtn}>
+                                <Button
+                                    type="primary"
+                                    className={styles.siteCommit}
+                                    onClick={handleCommitBtn}
+                                >
+                                    提交
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </PageContainer>
+    )
+}
+
+
+const Panels = React.memo(props => {
+    let { index, GroupId, GroupName, Users, isChecked, isShow, color } = props;
+    return (
+        <div className={styles.sitePanel} key={GroupId} id={`siteId${GroupId}`}>
+            {/* onClick={() => props.handleChangeCollpase(GroupId, isShow)} */}
+            <div className={styles.sitePanelHead}>
+                {/* {isShow ? (
+            <UpOutlined className={styles.siteIcon} />
+          ) : (
+            <DownOutlined className={styles.siteIcon} />
+          )} */}
+                {/* <UpOutlined className={styles.siteIcon} /> */}
+                <UserOutlined className={styles.siteIcon} />
+                <p style={{ color }}>{GroupName}</p>
+            </div>
+            <div className={styles.sitePanelCon}>
+                <Checkbox
+                    key="0"
+                    className={styles.siteList}
+                    checked={isChecked}
+                    onClick={e => props.handleChangeAll(e, index)}
+                >
+                    全选
+          </Checkbox>
+                {Users.length > 0 &&
+                    Users.map((v, vIndex) => (
+                        <CheckBoxRow
+                            {...v}
+                            index={index}
+                            vIndex={vIndex}
+                            key={v.userID}
+                            handleChangeSignel={props.handleChangeSignel}
+                        />
+                    ))}
+            </div>
+        </div>
+    );
+});
+
+const CheckBoxRow = React.memo(props => {
+    let { vIndex, index, isChecked, userName } = props;
+    return (
+        <Checkbox
+            className={styles.siteList}
+            checked={isChecked}
+            onClick={e => props.handleChangeSignel(e, index, vIndex)}
+        >
+            {userName}
+        </Checkbox>
+    );
+});
+export default SiteManageV2;
\ No newline at end of file

src/pages/userCenter/siteManageV2/siteManage.less

+:global {
+  ::-webkit-scrollbar {
+    height: 6px; //x轴滚动条粗细
+    width: 6px; //y轴滚动条粗细
+    border-bottom: 2px solid white;
+  }
+
+  //滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条）
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
+    background: rgba(74, 74, 75, 0.3);
+    margin-bottom: 10px;
+  }
+
+  //滚动条的轨道（里面装有thumb）滚动槽
+  ::-webkit-scrollbar-track {
+    box-shadow: 0;
+    border-radius: 0;
+    background: white; //滚动槽背景色
+    border-radius: 10px; //滚动条边框半径设置
+  }
+
+  .ant-tree-node-content-wrapper {
+    width: 100%;
+    overflow: hidden !important;
+
+    .ant-tree-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: block;
+    }
+  }
+
+  .ant-pagination-prev,
+  .ant-pagination-next {
+    line-height: 8px !important;
+  }
+
+  .ant-input-search-button {
+    line-height: 1;
+  }
+
+  .ant-dropdown-menu-item>.anticon:first-child {
+    vertical-align: 0.15em !important;
+  }
+
+  .ant-table-tbody {
+    .ant-table-row:hover>td {
+      background: #aed8fa !important;
+    }
+  }
+
+  .ant-modal-close-icon {
+    vertical-align: 0.3em;
+  }
+
+  .ant-notification-close-icon {
+    vertical-align: 0.2em;
+  }
+
+  .ant-tree-switcher-icon svg {
+    font-size: 14px;
+  }
+}
+
+.redText {
+  color: red;
+  cursor: pointer;
+}
+
+.ant-layout {
+  overflow: auto;
+
+  .ant-layout-content {
+    margin: 12px !important;
+  }
+}
+
+.siteTitle {
+  font-size: 16px;
+  margin: 0 0 6px 0;
+  user-select: none;
+  padding: 3px;
+  border-bottom: 1px solid #ccc;
+}
+
+.siteManageContainer {
+  .ant-tree-treenode {
+    width: 100% !important;
+
+    .ant-tree-node-content-wrapper {
+      display: inline-block;
+      width: 100%;
+    }
+
+    .iconWraper1 {
+      float: right;
+
+      span {
+        display: none;
+      }
+    }
+  }
+
+  .ant-tree-treenode:hover {
+    .iconWraper1>span {
+      margin-left: 12px;
+      font-size: 18px;
+      display: inline-block;
+    }
+  }
+
+  .contentContainer {
+    display: flex;
+    width: 100%;
+    position: relative;
+
+    .orgContainer {
+      height: calc(100vh - 74px);
+      width: 280px;
+      left: 0;
+      top: 0;
+      overflow-x: hidden;
+      margin-right: 10px;
+      position: relative;
+      transition-property: width, left;
+      transition-duration: 0.5s;
+      white-space: nowrap;
+
+      .ant-tree {
+        padding-top: 6px;
+
+        .ant-tree-switcher {
+          line-height: 1;
+          margin-right: 0px !important;
+          color: #1890FF;
+
+          .ant-tree-switcher-line-icon {
+            margin-left: 5px;
+          }
+        }
+      }
+
+      .switcher {
+        display: block;
+        position: absolute;
+        font-size: 18px;
+        color: #1890FF !important;
+        top: 45%;
+        right: 2px;
+        transform: translate(0%, -50%);
+        z-index: 1;
+      }
+    }
+
+    .orgContainerHide {
+      // transform: translateX(-230px);
+      left: 0px;
+      top: 0;
+      width: 26px;
+    }
+
+    .userContainer {
+      height: calc(100vh - 74px) !important;
+      z-index: 999;
+      min-width: 800px;
+      background: white;
+      width: 100%;
+      position: relative;
+      transition: width 0.5s;
+
+      .title {
+        margin: 16px 0 10px 16px;
+        display: inline-block;
+        width: 270px;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .ant-table-pagination {
+        padding-right: 12px;
+        background: white;
+        margin: 1px 0;
+        padding: 8px;
+        padding-right: 20px;
+      }
+
+      .ant-btn {
+        margin: 0px 10px;
+
+        .ant-btn-primary {
+          background: #50aefc;
+        }
+      }
+
+      .ant-input-search-button {
+        margin-left: 0px !important;
+      }
+
+      .ant-table-thead tr th {
+        font-weight: 600;
+        color: rgba(0, 0, 0, 0.85);
+      }
+
+      .ant-table-cell {
+        text-align: center;
+        overflow: hidden;
+        // text-overflow:ellipsis;
+        white-space: nowrap;
+      }
+
+      .ant-table-body {
+        height: calc(100vh - 210px);
+        border-right: white;
+        overflow: auto !important;
+      }
+
+      .clickRowStyle {
+        background: #cfe7fd;
+      }
+
+      .ant-pagination {
+        z-index: 999;
+        border-top: 1px solid #f0eded;
+      }
+    }
+  }
+}
+
+
+//机构编辑面板
+.boxR {
+  width: 100%;
+  position: relative;
+  transition: width 2s;
+}
+
+.cardBoxR {
+  min-height: calc(100vh - 210px);
+  max-height: calc(100vh - 210px);
+  min-width: 600px;
+  overflow-y: scroll;
+}
+
+
+.siteCheckbox .ant-collapse-content > .ant-collapse-content-box{
+    padding: 16px 16px 0;
+  }
+  .siteList{
+    width:199px;
+    // margin:0 0 15px 0;
+    padding:0 0  15px 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .sitePanel{
+    margin: 0 0 10px 0;
+  }
+  .sitePanelHead{
+    background-color: #f5f5f5;
+    padding:8px 10px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+  }
+  .sitePanelHead p{
+    margin: 0;
+  }
+  .sitePanelCon{
+    border:1px solid #f5f5f5;
+    padding:20px;
+    padding-bottom: 0;
+    border-top:0;
+    max-height: 200px;
+    overflow: auto;
+  }
+  .sitePanel .ant-checkbox-wrapper + .ant-checkbox-wrapper{
+    margin:0
+  }
+  .siteIcon{
+    color:#ccc;
+    margin:4px 10px 0 0;
+  }
+  .siteAll{
+    margin:0 0 10px 0;
+  }
+  .siteColor{
+    color:#f00
+  }
+  .siteCommit{
+     margin: 10px 0;
+  }
+  .siteSelectList{
+    border:1px solid #f5f5f5;
+    height: 200px;
+    overflow: auto;
+    margin-bottom: 50px;
+    .siteSelectUl{
+      margin: 0;
+      padding: 15px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      li{
+        width:200px;
+        height: 35px;
+        line-height: 35px;
+        background: rgba(24, 144, 255,0.16) url('../../../assets/images/icons/close.png') no-repeat 175px;
+        background-size: 20px;
+        margin: 0 10px 10px 0;
+        cursor: pointer;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding: 0 20px 0 10px;
+      }
+    }
+  }
+  .siteline{
+    border-top: 1px solid #eee;
+    padding-top: 15px;
+    margin-top: 20px;
+  }
+  .siteBtn{
+    width:98%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+.ant-modal-root {
+  .ant-tree-switcher {
+    line-height: 1;
+    color: #1890FF;
+    margin-right: 0px !important;
+  }
+
+  .ant-checkbox-group .ant-checkbox-group-item {
+    margin-right: 0px !important;
+    min-width: 270px !important;
+  }
+
+  .ant-tree-list-holder {
+    overflow: auto;
+    height: 40vh;
+  }
+
+  .ant-tabs-content-holder {
+    overflow: auto;
+    height: 50vh;
+  }
+}

src/routes/config.js

@@ -22,6 +22,7 @@ import CurrentSolution from '@/pages/database/CurrentSolution';
 import UserManage from '../pages/userCenter/userManage/UserManage';
 import RoleManage from '@/pages/userCenter/roleManage/RoleManage';
 import SiteManage from '../pages/userCenter/siteManage/SiteManage';
+import SiteManageV2 from '../pages/userCenter/siteManageV2/SiteManage';
 import Dictionary from '../pages/dataCenter/dictionary';
 import ServiceLog from '../pages/log/serviceLog';
 import LoginLog from '../pages/log/loginLog';
@@ -120,7 +121,7 @@ export default {
             {
               path: '/userCenter/SiteManage',
               name: '站点管理',
-              component: SiteManage,
+              component: SiteManageV2,
             },
           ],
         },

src/services/platform/hostmanager.jsx

 import { get, post, PUBLISH_SERVICE, CITY_SERVICE } from '@/services/index';
 
 
-export const S_GetDataBaseConfig = param =>
-    get(`${CITY_SERVICE}/OMS.svc/S_GetDataBaseConfig`, param);
+// export const S_GetDataBaseConfig = param =>
+//     get(`${CITY_SERVICE}/OMS.svc/S_GetDataBaseConfig`, param);
+
+// export const GetTCPConfigInfo = param =>
+//     get(`${CITY_SERVICE}/MessagePlatform.svc/MessageManage/GetTCPConfigInfo`, param);
 
-export const GetTCPConfigInfo = param =>
-    get(`${CITY_SERVICE}/MessagePlatform.svc/MessageManage/GetTCPConfigInfo`, param);
 export const GetDataBaseConfig = param =>
     get(`${PUBLISH_SERVICE}/DBManager/GetDataBaseConfig`, param);
 export const GetBasicInfo = param =>
-    get(`${PUBLISH_SERVICE}/Message/GetBasicInfo`, param);
+    get(`${PUBLISH_SERVICE}/HostManager/GetBasicInfo`, param);
+export const GetIOTPlatformVersion = param =>
+    get(`${PUBLISH_SERVICE}/HostManager/GetIOTPlatformVersion`, param);
+export const GetTCPConfigInfo = param =>
+    get(`${PUBLISH_SERVICE}/HostManager/GetTCPConfigInfo`, param);
+export const PingIOTPlatform = param =>
+    get(`${PUBLISH_SERVICE}/HostManager/PingIOTPlatform`, param);
+export const SaveTcpAddress = param =>
+    get(`${PUBLISH_SERVICE}/HostManager/SaveTcpAddress`, param);
+

src/services/userCenter/siteManage/api.js

@@ -42,3 +42,14 @@ export const getStationUserList = params =>
 // 获取站点管理一二级列表+分页
 export const groupUserPagingList = params =>
   post(`${PUBLISH_SERVICE}/UserCenter/GroupUserPagingList`, params);
+// 添加子站点
+export const addChildSiteNode = params =>
+  get(`${PUBLISH_SERVICE}/UserCenter/AddChildSiteNode`, params);
+// 获取树状站点列表
+export const getSiteTree = params =>
+  get(`${PUBLISH_SERVICE}/UserCenter/GetSiteTree`, params);
+  //获取当前站点关联的用户
+export const getStationUsers = params =>
+  get(`${PUBLISH_SERVICE}/UserCenter/GetStationUsers`, params);
+
+