strategyConfig.jsx 5.43 KB
Newer Older
1
import { Space, Table, Button, Popconfirm, notification ,Spin} from 'antd';
2 3 4
import React, { useState, useEffect } from 'react';
import styles from '../policiesIssued.less'
import {
5
  getIotDeviceType, getStrategyInfo, deleteStrategyOptions
6
} from '@/services/intelligence/api';
7 8 9 10 11 12
import AddModal from './AddModal'
const VectorData = props => {
    const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
    const [flag, setFlag] = useState(0); // 更新list
    const [type, setType] = useState(''); // 弹窗类型
    const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' });
13 14 15
    const [tileData, setTileData] = useState([]); // table表格数据
    const [visible, setVisible] = useState(false); // 弹窗
    const [deviceType, setDeviceType] = useState([]); //设备类型列表
16 17 18
    const columns = [
        {
            title: '序号',
19 20 21 22 23 24 25
            align: 'center',
            render: (text, record, index) => (
                <Space>
                    <span>{(index + 1)}</span>
                </Space>
            )

26 27
        },
        {
28 29 30
            title: '策略名称',
            dataIndex: 'StrategyName',
            key: 'StrategyName',
31 32 33
            align: 'center'
        },
        {
34 35 36
            title: '策略类型',
            dataIndex: 'StrategyType',
            key: 'StrategyType',
37 38 39
            align: 'center'
        },
        {
40 41 42
            title: '创建时间',
            dataIndex: 'CreateTime',
            key: 'CreateTime',
43 44 45
            align: 'center'
        },
        {
46 47 48
            title: '设备类型',
            dataIndex: 'DeviceType',
            key: 'DeviceType',
49 50
            align: 'center'
        },
51
     
52 53
        {
            title: '描述',
54 55
            dataIndex: 'StrategyDes',
            key: 'StrategyDes',
56 57 58 59 60 61 62
            align: 'center'
        },
        {
            title: '编辑',
            align: 'center',
            render: (text, record, index) => (
                <Space>
63 64 65 66 67 68 69 70 71
                    <Button
                        type="primary"
                        size="small"
                        onClick={() => {
                            changeRecord(record);
                        }}
                    >
                        编辑
                </Button>
72 73
                    <div onClick={e => e.stopPropagation()}>
                        <Popconfirm
74
                            title="是否删除该方案?"
75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
                            okText="确认"
                            cancelText="取消"
                            onConfirm={() => {
                                delConfirm(record);
                            }}
                        >
                            <Button size="small" danger>
                                删除
                            </Button>
                        </Popconfirm>
                    </div>
                </Space>
            ),
        },

    ];


93

94 95
    const onSubmit = prop => {
        setVisible(false);
96
        setFlag(flag + 1)
97
    };
98

99
    const delConfirm = (record) => {
100 101
        deleteStrategyOptions(record.ID).then(res => {
            if (res.errMsg==='') {
102 103 104 105
                setFlag(flag + 1)
                notification.success({
                    message: '提示',
                    duration: 3,
106
                    description: '删除成功',
107 108 109 110 111
                });
            } else {
                notification.error({
                    message: '提示',
                    duration: 3,
112
                    description: res.errMsg,
113 114 115
                });
            };
        })
116

117 118
    }
    const handleAdd = () => {
119 120 121
        setFormObj({});
        setType('add');
        setVisible(true);
122 123 124 125 126 127
    }
    useEffect(() => {
        renderTile();
    }, [flag]);
    // 获取瓦片数据配置数据
    const renderTile = () => {
128 129 130 131 132 133 134 135 136 137 138
        setTreeLoading(true)
        const getIotDevice = getIotDeviceType()
        const getStrategy = getStrategyInfo()
        Promise.all([getIotDevice,getStrategy]).then(res => {
            console.log('res[3].getMe',res[1].getMe);
            res[0].getMe && res[0].getMe.length && setDeviceType(res[0].getMe)
            res[1].getMe && res[1].getMe.length && setTileData(res[1].getMe)
            setTreeLoading(false)
        }).catch(err => {
            setTreeLoading(false)
        })
139 140
    };

141 142 143 144 145
    const changeRecord =(record)=>{
        setType('edit');
        setFormObj(record);
        setVisible(true);
    }
146 147 148

    return (
        <>
149
         <Spin tip="loading..." spinning={treeLoading}>
150 151 152 153 154 155 156 157 158 159 160
            <div className={styles.tileBtn}>
                <Button type="primary" onClick={() => {
                    handleAdd();
                }} >
                    新增
                </Button>
            </div>
            <Table
                columns={columns}
                dataSource={tileData}
                bordered
161 162
                rowKey="ID"
                scroll={{ y: 700 }}
163
                pagination={{
164
                    pageSize: '10' ,
165 166 167 168 169 170 171 172 173 174 175
                    showTotal: (total, range) =>
                        `第${range[0]}-${range[1]} 条/共 ${total} 条`

                }}
            >
            </Table>
            <AddModal
                visible={visible}
                onCancel={() => setVisible(false)}
                callBackSubmit={onSubmit}
                type={type}
176
                deviceType={deviceType}
177 178
                formObj={formObj}
            />
179
                </Spin>
180
        </>
181
    
182 183 184
    )
}
export default VectorData