Skip to content

C
CivManage
Commit 33191327 authored by mayongxin's avatar mayongxin
Browse files
Options

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

parent 26ef2629
Pipeline #24497 passed with stages
        in 21 minutes 3 seconds
        Show whitespace changes
        Inline Side-by-side
        Showing with 1250 additions and 43 deletions
        .env
        View file @ 33191327
        ......@@ -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
        View file @ 33191327
        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 },
        ......@@ -14,66 +14,131 @@ const tailLayout = {
        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="否"
        label="服务器地址(EMQ)"
        name="TcpAddress"
        rules={[{ required: true, message: '请输入服务器地址!' }]}
        >
        <Select placeholder="Please select a country">
        <Option value="是">是</Option>
        <Option value="否">否</Option>
        </Select>
        <Input />
        </Form.Item>
        <Form.Item
        label="服务器地址"
        name="username"
        rules={[{ required: true, message: '请输入服务器地址!' }]}
        name="SSLSafe"
        label="SSL(EMQ)"
        hasFeedback
        rules={[{ required: true, message: '请选择是否!' }]}
        >
        <Input />
        <Select placeholder="请选择是否!">
        <Option value="0">是</Option>
        <Option value="1">否</Option>
        </Select>
        </Form.Item>
        <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
        ......
        src/pages/userCenter/siteManage/AddChildModal.jsx 0 → 100644
        View file @ 33191327
        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
        View file @ 33191327
        ......@@ -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 0 → 100644
        View file @ 33191327
        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 0 → 100644
        View file @ 33191327
        :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
        View file @ 33191327
        ......@@ -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
        View file @ 33191327
        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
        View file @ 33191327
        ......@@ -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);
        Markdown is supported
        0% or
        You are about to add 0 people to the discussion. Proceed with caution.
        Finish editing this message first!
        Please register or to comment