OperationalService/web-network/client/src/sections/fillion/components/editGuanlang.js

import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, Select, DatePicker, AutoComplete, Col, Button, Row } from 'antd';

import { MinusCircleOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons';
const Search = Input.Search
const { TextArea } = Input;
import moment from 'moment';

const EditGuanlang = (props) => {
    const { visible, onCancel, editData, handleSaveScore, readOnly, companys, searchCompany, applyState } = props;
    const [form] = Form.useForm();
    const [replyFiles, setReplyFiles] = useState([]);
    const [companyOpts, setCompanyOpts] = useState([]);
    const [stationItem, setStationItem] = useState(null);
    const [deviceList, setDeviceList] = useState([]);

    useEffect(() => {
        if (!visible) {
            form.resetFields()
        }
    }, [visible])

    useEffect(() => {
        if (editData) {
            let revertData = Object.assign({}, editData);
            Object.keys(editData).forEach(key => {
                if (key == 'accidentTime') {
                    revertData[key] = editData[key] && moment(editData[key]);
                }
                if (key == 'images') {
                    // const list = (editData[key] || '').split(',') || []
                    if (editData[key]) {

                        revertData[key] = JSON.parse(editData[key]);
                    }
                }
            });
            form.setFieldsValue({ ...revertData });
        }
    }, [editData])

    useEffect(() => {
        if (companys && companys.length) {
            let list = [];
            companys.forEach(item => {
                list.push({ label: item.company, value: item.company })
            })
            setCompanyOpts(list);
        }
    }, [companys])

    useEffect(() => {
        if (editData && companys && companys.length) {
            handleSelectCompany(null, { value: editData.companyName })
            let list = ((editData || {}).accidentStations || []).map(item => item.stationId)
            form.setFieldsValue({ stations: list })
        }
    }, [companys, editData])


    const handleSave = () => {
        const data = form.getFieldsValue(true);
        //console.log(data,'data')
        handleSaveScore();
    }

    const onFileUploaded = (fileList) => {
        setReplyFiles(fileList);
    }

    const handleSelectCompany = (v, opt) => {
        const { value } = opt;
        const target = companys.filter(c => c.company == value);
        setDeviceList(target[0]?.deviceInfos || []);

    }

    return (
        <Modal
            title="新增摄像头"
            visible={visible}
            destroyOnClose
            width={1000}
            // onOk={handleSave}
            onCancel={onCancel}
            footer={null}
        >
            <Form form={form} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} onFinish={handleSave}>
                <img src='/assets/images/tiptop.png' style={{ width: '100%' }}></img>
                <Row style={{ marginBottom: '20px' }}>
                    <Col span={20}> <a>配置属性</a> </Col>
                    <Col span={2}> <Button>视频格式转换</Button> </Col>
                    {/* <Col span={2}> <Button>测试</Button> </Col> */}

                </Row>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            // style={{ width: 'calc(45% - 4px' }}
                            label={'设备名称'}
                            rules={[{ required: true, message: '设备名称为必填项' }]}
                            name={'guanlangname'}>
                            <Input placeholder="请输入设备名称、常用项目或者位置定义" />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label={'云台支持'}
                            name={'roadnamee'}
                            rules={[{ required: true, message: '所在道路名称不能为空' }]}
                        >
                            <Select options={[{ label: '支持', value: '支持' }, { label: '不支持', value: '不支持' }]} defaultValue="支持"></Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            label={'高清切换'}
                            name={'startposition'}>
                            <Select options={[{ label: '支持', value: '支持' }, { label: '不支持', value: '不支持' }]} defaultValue="支持"></Select>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label={'语音支持'}
                            name={'endposition'}>
                            <Select options={[{ label: '支持', value: '支持' }, { label: '不支持', value: '不支持' }]} defaultValue="支持"></Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            style={{ width: 'calc(45%-4px' }}
                            label={'内存'}
                            name={'guanlangmaterial'}
                            rules={[{ required: true, message: '管廊材质不能为空' }]}>
                            <Select options={[{ label: '8g', value: '8g' }, { label: '16g', value: '16g' }, { label: '32g', value: '32g' }
                                , { label: '64g', value: '64g' }, { label: '128g', value: '128g' }, { label: '256g', value: '256g' }, { label: '>256g', value: '>256g' }]} defaultValue="未安装"></Select>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label={'序列设备号'}
                            name={'guanlanglayer'}
                            rules={[{ required: true, message: '序列设备号不能为空' }]}>
                            <Input placeholder="请输入序列设备号" />
                        </Form.Item>
                    </Col>
                </Row>

                <Row>
                    <Col span={12}>
                        <Form.Item
                            style={{ width: 'calc(45%-4px' }}
                            label={'安装位置'}
                            name={'guanlanglength'}
                            rules={[{ required: true, message: '安装位置不能为空' }]}>
                            <Input placeholder="请输入高德经纬度坐标" />
                        </Form.Item>
                    </Col>
                    <Col span={12}>

                        <Form.Item
                            label={'通道号'}
                            name={'manageunit'}
                            rules={[{ required: true, message: '通道号不能为空' }]}>
                            <Col span={24} style={{ display: 'flex', justifyContent: 'space-around' }}>
                                <Input />

                            </Col>
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            label={'设备类型'}
                            name={'startposition'}>
                            <Select options={[{ label: '枪机', value: '枪机' }, { label: '球机', value: '球机' }, { label: '其他', value: '其他' }]} placeholder="请选择摄像头类型"></Select>
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label={'设备能力'}
                            name={'endposition'}>
                            <Select options={[{ label: '普通摄像头', value: '普通摄像头' }, { label: '人流量计数', value: '人流量计数' }, { label: '热成像', value: '热成像' }, { label: 'AI摄像头', value: 'AI摄像头' }, { label: '其他', value: '其他' }]} placeholder="请选择能力"></Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                    <Col span={24} style={{ display: 'flex', justifyContent: 'space-around' }}>
                        <Button htmlType="submit" onClick={() => {
                            onCancel()
                        }}>
                            取消
                        </Button>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                    </Col>
                </Form.Item>
            </Form>

        </Modal >
    )
}


export default EditGuanlang;