import { Space, Table, Button, Popconfirm, notification ,Spin} from 'antd'; import React, { useState, useEffect } from 'react'; import styles from '../policiesIssued.less' import { getIotDeviceType, getStrategyInfo, deleteStrategyOptions } from '@/services/intelligence/api'; 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' }); const [tileData, setTileData] = useState([]); // table表格数据 const [visible, setVisible] = useState(false); // 弹窗 const [deviceType, setDeviceType] = useState([]); //设备类型列表 const columns = [ { title: '序号', align: 'center', render: (text, record, index) => ( <Space> <span>{(index + 1)}</span> </Space> ) }, { title: '策略名称', dataIndex: 'StrategyName', key: 'StrategyName', align: 'center' }, { title: '策略类型', dataIndex: 'StrategyType', key: 'StrategyType', align: 'center' }, { title: '创建时间', dataIndex: 'CreateTime', key: 'CreateTime', align: 'center' }, { title: '设备类型', dataIndex: 'DeviceType', key: 'DeviceType', align: 'center' }, { title: '描述', dataIndex: 'StrategyDes', key: 'StrategyDes', align: 'center' }, { title: '编辑', align: 'center', render: (text, record, index) => ( <Space> <Button type="primary" size="small" onClick={() => { changeRecord(record); }} > 编辑 </Button> <div onClick={e => e.stopPropagation()}> <Popconfirm title="是否删除该方案?" okText="确认" cancelText="取消" onConfirm={() => { delConfirm(record); }} > <Button size="small" danger> 删除 </Button> </Popconfirm> </div> </Space> ), }, ]; const onSubmit = prop => { setVisible(false); setFlag(flag + 1) }; const delConfirm = (record) => { deleteStrategyOptions(record.ID).then(res => { if (res.errMsg==='') { setFlag(flag + 1) notification.success({ message: '提示', duration: 3, description: '删除成功', }); } else { notification.error({ message: '提示', duration: 3, description: res.errMsg, }); }; }) } const handleAdd = () => { setFormObj({}); setType('add'); setVisible(true); } useEffect(() => { renderTile(); }, [flag]); // 获取瓦片数据配置数据 const renderTile = () => { 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) }) }; const changeRecord =(record)=>{ setType('edit'); setFormObj(record); setVisible(true); } return ( <> <Spin tip="loading..." spinning={treeLoading}> <div className={styles.tileBtn}> <Button type="primary" onClick={() => { handleAdd(); }} > 新增 </Button> </div> <Table columns={columns} dataSource={tileData} bordered rowKey="ID" scroll={{ y: 700 }} pagination={{ pageSize: '10' , showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条` }} > </Table> <AddModal visible={visible} onCancel={() => setVisible(false)} callBackSubmit={onSubmit} type={type} deviceType={deviceType} formObj={formObj} /> </Spin> </> ) } export default VectorData