添加视频管理模块

web/client/src/sections/fillion/components/editGuanlang.js

@@ -0,0 +1,213 @@
+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/>
+                            <Button type="primary">
+                            获取
+                            </Button>
+                            </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;

web/client/src/sections/fillion/containers/videois.js

@@ -1,42 +1,243 @@
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
+import { Input, Table, Button, Select, message, Popconfirm } from 'antd';
+// import { getAccidentInfo, createAccidentInfo, deleteAccidentInfo, editAccidentInfo, getAllCompany } from '../actions/device';
+
+// import EditAccidentModal from '../components/editAccidentModal';
+import EditGuanlang from '../components/editGuanlang';
 import '../style.less';
-import { getDepMessage, getReportStatistic } from "../actions/infor"
+import { Func } from '$utils';
-import VideoTable from '../components/videoTable';
+
-const superagent = require('superagent');
+import moment from 'moment';
-const Videois = (props) => {
+var recordId = null;
-  const { dispatch, user } = props
+const Guanlang = (props) => {
-  const [data, setData] = useState()
+    const { dispatch, user,  totalPage, companys, creditScore } = props
+    const [data, setData] = useState([])
+    const [modalVisible, setModalVisible] = useState(false);
+    const [modalRecord, setModalRecord] = useState();
+    const [companyName, setCompanyName] = useState(null)
+    const [creditCode, setCreditCode] = useState(null)
+    const [pageSize, setPageSize] = useState(10);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [applyStatus, setApplyStatus] = useState(null);
+    const [applyState, setApplyState] = useState('check'); // check 查看；create 新增； apply 初审； approve 复审
+    const [editModal, setEditModal] = useState(false);
+    const [readOnly, setReadOnly] = useState(false);
+
+    const accidentInfo= []
+   //  const initial = (params, search = false) => {
+   //      dispatch(getAccidentInfo(params)).then(() => { if (search) setCurrentPage(1) })
+   //  }
+
     useEffect(() => {
-    // dispatch(getDepMessage())
+        const params = { limit: pageSize, offset: currentPage }
-    
+        // initial(params)
-    setData(props)
+    }, [true])
-  }, []);
+
-  //批量导出
+
-  const exports = (ids, counts) => {
+    const openModal = (record, state) => {
-    // console.log(user);
+        if (state == 'check') {
-    let reportIds = [];
+            setReadOnly(true)
-    if (ids.length)
+        } else {
-      reportIds = ids
+            setReadOnly(false)
-    else
+        }
-      reportIds = (counts || {}).ids || [];
+        searchCompany(record.companyName)
-    superagent.post('/_report/http')
+        setApplyState(state);
-      .send({ id: reportIds.map(i => Number(i)) }).end((err, res) => {
+        setModalVisible(true);
-        const resTextIs = res.text.split('/').pop()
+        setModalRecord(record);
-        window.open(
+    }
-          '/_api/' +
+    const search = () => {
-          `attachments?src=files/${resTextIs}&filename=${encodeURIComponent(resTextIs)}&token=${user.token}`)
+        const params = { company: companyName, applyStatus, limit: pageSize, offset: 1 }
-      })
+        // initial(params, true)
+    }
+    const clearSearch = () => {
+        setCompanyName(null)
+        setCreditCode(null)
+        const params = { limit: pageSize, offset: currentPage }
+        // initial(params)
     }
+    const columns = [
+        {
+            title: '序号',
+            dataIndex: 'companyName',
+            key: 'companyName',
+           
+        },
+        {
+            title: '设备名称',
+            dataIndex: 'accidentTime',
+            key: 'accidentTime',
+            
+            render: (text) => {
+                return moment(text).format('YYYY-MM-DD')
+            }
+        },
+        {
+            title: '设备状态',
+            dataIndex: 'stationName',
+            key: 'stationName',
+            
+            render: (v, t) => {
+                let list = t.accidentStations.map(item => item.stationName);
+                return list.join(',');
+            }
+        },
+        {
+            title: '接入类型',
+            dataIndex: 'stationName',
+            key: 'stationName',
+            
+            render: (v, t) => {
+                let list = t.accidentStations.map(item => item.stationName);
+                return list.join(',');
+            }
+        },
+        {
+            title: '设备厂家',
+            dataIndex: 'stationName',
+            key: 'stationName',
+            
+            render: (v, t) => {
+                let list = t.accidentStations.map(item => item.stationName);
+                return list.join(',');
+            }
+        },
+        {
+            title: '操作',
+            render: (record) => {
+                return (
+                    <span>
+                        <a onClick={() => openModal(record, 'check')}>查看&nbsp;&nbsp;</a>
+                        <a onClick={() => openModal(record, 'edit')}>编辑&nbsp;&nbsp;</a>
+                        <Popconfirm
+                            title="确认删除"
+                            onConfirm={() => {
+                                // console.log(record)
+                              //   dispatch(deleteAccidentInfo(record.id)).then((res) => {
+                              //       if (res.success) {
+                              //           message.success('删除记录成功');
+                              //           search();
+                              //       }
+                              //   }
+                              //   )
+                            }
+                            }
+                        >
+                            <a>删除&nbsp;&nbsp;</a>
+                        </Popconfirm>
+                    </span>
+                )
+            }
+        }
+    ];
+
+    const handleSaveScore = (data) => {
+        console.log('执行了')
+        setModalVisible(false);
+        // if (applyState == 'create')
+        //     dispatch(createAccidentInfo(data)).then(res => {
+        //         if (res.success) {
+        //             message.success('事故资讯添加成功');
+        //             setModalVisible(false);
+        //             search();
+        //         }
+        //     })
+        // else if (applyState == 'edit') {
+        //     dispatch(editAccidentInfo(data)).then(res => {
+        //         if (res.success) {
+        //             message.success('事故资讯编辑成功');
+        //             setModalVisible(false);
+        //             search();
+        //         }
+        //     })
+        // }
+    }
+    var timer = null;
+    const searchCompany = (companyName) => {
+        if (timer) {
+            clearTimeout(timer)
+        } else {
+            timer = setTimeout(() => {
+               //  dispatch(getAllCompany({ companyName }));
+            }, 400);
+        }
+    }
+
+    const spanStyle = { diplay: 'inline-block', marginLeft: 10 }
+    const inputStyle = { width: 200 }
     return (
-    <> <VideoTable data={data} exports={exports} />
+        <div style={{ margin: 5 }}>
-    </>
+            <div style={{ marginBottom: 10 }}>
+                <span style={spanStyle}>
+                    设备搜索：
+                    <Input style={inputStyle} placeholder='请输入' value={companyName} onChange={(v) => setCompanyName(v.target.value)}></Input>
+                </span>
+                <span style={{...spanStyle,marginLeft: 40}}>
+                    接入类型：
+                    <Input style={inputStyle} placeholder='请输入' value={companyName} onChange={(v) => setCompanyName(v.target.value)}></Input>
+                </span>
+                <span style={{...spanStyle,marginLeft: 40}}>
+                    厂家筛选：
+                    <Input style={inputStyle} placeholder='请输入' value={companyName} onChange={(v) => setCompanyName(v.target.value)}></Input>
+                </span>
+                <span style={{...spanStyle,marginLeft: 40}}>
+                    查询状态：
+                    <Input style={inputStyle} placeholder='请输入' value={companyName} onChange={(v) => setCompanyName(v.target.value)}></Input>
+                </span>
+                <Button type='primary' onClick={() => search()} style={{ marginLeft: 15 }}>查询</Button>
+                <Button onClick={() => { setModalVisible(true); setApplyState('create'); setReadOnly(false); setModalRecord(null) }} style={{ marginLeft: 15 }}>新增</Button>
+            </div>
+          
+            <div>
+                <Table
+                    rowKey='id'
+                    columns={columns}
+                    dataSource={accidentInfo}
+                    pagination={{
+                        total: totalPage,
+                        showSizeChanger: true,
+                        showQuickJumper: true,
+                        current: currentPage,
+                        showTotal: (total) => {
+                            return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / pageSize)}页，${total}项`}</span>
+                        },
+                        onShowSizeChange: (currentPage, pageSize) => {
+                            setCurrentPage(currentPage);
+                            setPageSize(pageSize);
+                            const params = { company: companyName, creditCode, limit: pageSize, offset: currentPage }
+                            // initial(params)
+                        },
+                        onChange: (page, pageSize) => {
+                            setCurrentPage(page);
+                            setPageSize(pageSize);
+                            const params = { company: companyName, creditCode, limit: pageSize, offset: page }
+                            // initial(params)
+                        }
+                    }}
+                />
+
+                {modalVisible ? <EditGuanlang
+                    visible={modalVisible}
+                    onCancel={() => { setModalVisible(false) }}
+                    handleSaveScore={handleSaveScore}
+                  //   searchCompany={searchCompany}
+                    companys={companys}
+                    editData={modalRecord}
+                    readOnly={readOnly}
+                    applyState={applyState}
+                ></EditGuanlang> : ''}
+            </div>
+        </div>
     )
 }
 function mapStateToProps(state) {
-  const { auth } = state
+    const { auth, accidentInfo, allCompany } = state
     return {
-    user: auth.user,
+      //   user: auth?.user,
+      //   accidentInfo: accidentInfo?.data && accidentInfo?.data.rows || [],
+      //   totalPage: accidentInfo.data && accidentInfo.data.count,
+      //   companys: allCompany.data && allCompany.data.rows || []
     }
 }
-export default connect(mapStateToProps)(Videois);
+export default connect(mapStateToProps)(Guanlang);
+

web/client/src/sections/fillion/nav-item.js

@@ -35,9 +35,9 @@ export function getNavItem(user, dispatch) {
             <Menu.Item key="fileCont">
                 <Link to="/fillion/file">档案管理</Link>
             </Menu.Item>
-            {/* <Menu.Item key="fillionvideois">
+            <Menu.Item key="fillionvideois">
                 <Link to="/fillion/videois">视频管理</Link>
-            </Menu.Item> */}
+            </Menu.Item>
             <Menu.Item key="fillionpromotional">
                 <Link to="/fillion/promotional">宣传视频</Link>
             </Menu.Item>