taskScheduling.jsx 5.58 KB
Newer Older
1
import { Space, Table, Button, Popconfirm, notification ,Spin} from 'antd';
2
import React, { useState, useEffect } from 'react';
shaoan123's avatar
shaoan123 committed
3
import styles from './taskScheduling.less'
4
import {
5
    deleteTaskOptions, taskOptionsList, getIotDeviceType
6
} from '@/services/intelligence/api';
7 8 9 10 11
import AddModal from './AddModal'
const VectorData = props => {
    const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
    const [tileData, setTileData] = useState([]); // table表格数据
    const [visible, setVisible] = useState(false); // 弹窗
12
    const [deviceType, setDeviceType] = useState([]); //设备类型列表
13 14 15
    const [flag, setFlag] = useState(0); // 更新list
    const [type, setType] = useState(''); // 弹窗类型
    const [solutionNames, setSolutionNames] = useState('');
16
    const [formObj, setFormObj] = useState({});
17 18 19
    const columns = [
        {
            title: '序号',
20 21 22 23 24 25
            align: 'center',
            render: (text, record, index) => (
                <Space>
                    <span>{(index + 1)}</span>
                </Space>
            )
26 27 28
        },
        {
            title: '任务名称',
29 30
            dataIndex: 'TaskName',
            key: 'TaskName',
31 32 33 34
            align: 'center'
        },
        {
            title: '状态',
35 36
            dataIndex: 'Status',
            key: 'Status',
37 38 39 40
            align: 'center'
        },
        {
            title: '任务类型',
41 42
            dataIndex: 'TaskType',
            key: 'TaskType',
43 44 45 46
            align: 'center'
        },
        {
            title: '间隔',
47 48
            dataIndex: 'Interval',
            key: 'Interval',
49 50 51 52
            align: 'center'
        },
        {
            title: '描述',
53 54
            dataIndex: 'Describe',
            key: 'Describe',
55 56 57 58 59 60 61
            align: 'center'
        },
        {
            title: '编辑',
            align: 'center',
            render: (text, record, index) => (
                <Space>
62 63 64 65 66 67 68 69 70
                    <Button
                        type="primary"
                        size="small"
                        onClick={() => {
                            changeRecord(record);
                        }}
                    >
                        编辑
                        </Button>
71 72
                    <div onClick={e => e.stopPropagation()}>
                        <Popconfirm
73
                            title="是否删除该任务?"
74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
                            okText="确认"
                            cancelText="取消"
                            onConfirm={() => {
                                delConfirm(record);
                            }}
                        >
                            <Button size="small" danger>
                                删除
                            </Button>
                        </Popconfirm>
                    </div>
                </Space>
            ),
        },

    ];


92

93 94
    const onSubmit = prop => {
        setVisible(false);
95
        setFlag(flag + 1)
96 97
    };
    const delConfirm = (record) => {
98 99
        deleteTaskOptions([record]).then(res => {
            if (res.errMsg === '') {
100 101 102 103
                setFlag(flag + 1)
                notification.success({
                    message: '提示',
                    duration: 3,
104
                    description: '删除成功',
105 106 107 108 109
                });
            } else {
                notification.error({
                    message: '提示',
                    duration: 3,
110
                    description: res.errMsg,
111 112 113 114
                });
            };
        })
    }
115 116 117 118 119 120
    //编辑任务调度
    const changeRecord = (record) => {
        setType('edit');
        setFormObj(record);
        setVisible(true);
    }
121
    const handleAdd = () => {
shaoan123's avatar
shaoan123 committed
122 123
        setType('add');
        setVisible(true);
124 125 126 127
    }
    useEffect(() => {
        renderTile();
    }, [flag]);
128
    // 获取任务列表及设备类型及编码数据
129
    const renderTile = () => {
130 131 132
        setTreeLoading(true)
        const getIotDevice = getIotDeviceType()
        const taskOption = taskOptionsList()
133
        Promise.all([getIotDevice, taskOption]).then(res => {
134
            res[0].getMe && res[0].getMe.length && setDeviceType(res[0].getMe)
135
            res[1].getMe && res[1].getMe.length && setTileData(res[1].getMe)
136 137 138 139 140
            setTreeLoading(false)
        }).catch(err => {
            setTreeLoading(false)
        })
    }
141 142 143 144


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

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