|
|
@@ -0,0 +1,279 @@
|
|
|
+import { useEffect, useCallback, useState, useRef } from 'react';
|
|
|
+import {
|
|
|
+ Button,
|
|
|
+ Table,
|
|
|
+ Modal,
|
|
|
+ Radio,
|
|
|
+ Space,
|
|
|
+ PageHeader,
|
|
|
+ message,
|
|
|
+ Badge,
|
|
|
+ Typography,
|
|
|
+} from 'antd';
|
|
|
+import { ColumnProps } from 'antd/lib/table';
|
|
|
+import {
|
|
|
+ useDustList,
|
|
|
+ DustRecordProps,
|
|
|
+ DustState,
|
|
|
+ DustStatus,
|
|
|
+ DustStatusConfis,
|
|
|
+} from './hook';
|
|
|
+import {
|
|
|
+ useBindChanle,
|
|
|
+ useUnBindChanle,
|
|
|
+ usPutDevice,
|
|
|
+} from '../../hooks/device';
|
|
|
+
|
|
|
+const { Text } = Typography;
|
|
|
+
|
|
|
+import BindChanleModal from './components/bindChanle';
|
|
|
+const device: React.FC = () => {
|
|
|
+ const ApplyStatus = useRef(true);
|
|
|
+ const [modalState, setModalState] = useState<{
|
|
|
+ visible: boolean;
|
|
|
+ values?: DustRecordProps;
|
|
|
+ }>({
|
|
|
+ visible: false,
|
|
|
+ });
|
|
|
+ const [searchState, changeSearchState] = useState({ page: 1 });
|
|
|
+ const { state: dustListState, request: requestDustList } = useDustList();
|
|
|
+ const { state: bindState, request: requestBindChanle } = useBindChanle();
|
|
|
+ const { state: revokeState, request: requestRevoke } = useUnBindChanle();
|
|
|
+ const { state: putState, request: requestPutDevice } = usPutDevice();
|
|
|
+ const [state, setState] = useState<{ reviewStatue: boolean }>({
|
|
|
+ reviewStatue: true,
|
|
|
+ });
|
|
|
+ useEffect(() => {
|
|
|
+ requestDustList(searchState);
|
|
|
+ }, [searchState]);
|
|
|
+
|
|
|
+ const colums: ColumnProps<DustRecordProps>[] = [
|
|
|
+ {
|
|
|
+ title: '供应商',
|
|
|
+ dataIndex: 'provider_name',
|
|
|
+ key: 'provider_name',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备名',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '批次',
|
|
|
+ dataIndex: 'batch',
|
|
|
+ key: 'batch',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '设备唯一编码',
|
|
|
+ dataIndex: 'sn',
|
|
|
+ key: 'sn',
|
|
|
+ },
|
|
|
+ /*{
|
|
|
+ title: '设备密钥',
|
|
|
+ width: 130,
|
|
|
+ dataIndex: 'key',
|
|
|
+ key: 'key',
|
|
|
+ },*/
|
|
|
+ {
|
|
|
+ title: '申请时间',
|
|
|
+ dataIndex: 'created_time',
|
|
|
+ key: 'created_time',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '审批时间',
|
|
|
+ dataIndex: 'approve_time',
|
|
|
+ key: 'approve_time',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'state',
|
|
|
+ key: 'state',
|
|
|
+ render: (dataIndex) => {
|
|
|
+ const online = dataIndex === 1;
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <Badge status={online ? 'success' : 'error'}></Badge>
|
|
|
+ <Text type={online ? 'success' : 'secondary'}>
|
|
|
+ {DustState[dataIndex as 0 | 1]}
|
|
|
+ </Text>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ //render: (_, record) => DustState[record.state],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '确认状态',
|
|
|
+ dataIndex: 'status',
|
|
|
+ key: 'status',
|
|
|
+ render: (_, record) => DustStatusConfis[record.status],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ render: (record) => {
|
|
|
+ return (
|
|
|
+ <Space>
|
|
|
+ <Button
|
|
|
+ type={record.status === DustStatus.wait ? 'primary' : 'default'}
|
|
|
+ disabled={record.status !== DustStatus.wait}
|
|
|
+ size='small'
|
|
|
+ onClick={() => handleConfirm(record)}>
|
|
|
+ 审核
|
|
|
+ </Button>
|
|
|
+ {/*{!!record.channel_id ? (*/}
|
|
|
+ {/* <Button*/}
|
|
|
+ {/* size='small'*/}
|
|
|
+ {/* danger*/}
|
|
|
+ {/* onClick={() => handleRevokeChanle(record)}>*/}
|
|
|
+ {/* 解绑摄像头*/}
|
|
|
+ {/* </Button>*/}
|
|
|
+ {/*) : (*/}
|
|
|
+ {/* <Button*/}
|
|
|
+ {/* size='small'*/}
|
|
|
+ {/* onClick={() => {*/}
|
|
|
+ {/* setModalState((preState) => ({*/}
|
|
|
+ {/* ...preState,*/}
|
|
|
+ {/* visible: true,*/}
|
|
|
+ {/* values: record,*/}
|
|
|
+ {/* }));*/}
|
|
|
+ {/* }}>*/}
|
|
|
+ {/* 绑定摄像头*/}
|
|
|
+ {/* </Button>*/}
|
|
|
+ {/*)}*/}
|
|
|
+ </Space>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ /**
|
|
|
+ * @description 审批设备
|
|
|
+ * @param record
|
|
|
+ */
|
|
|
+ const handleConfirm = useCallback(
|
|
|
+ (record: DustRecordProps) => {
|
|
|
+ Modal.confirm({
|
|
|
+ title: '审核',
|
|
|
+ content: (
|
|
|
+ <div>
|
|
|
+ <Space>
|
|
|
+ 确认是否为当前项目设备：
|
|
|
+ <Radio.Group
|
|
|
+ defaultValue={true}
|
|
|
+ onChange={(event) => {
|
|
|
+ console.log(event.target.value);
|
|
|
+ ApplyStatus.current = event.target.value;
|
|
|
+ }}>
|
|
|
+ <Radio value={true}>通过</Radio>
|
|
|
+ <Radio value={false}>拒绝</Radio>
|
|
|
+ </Radio.Group>
|
|
|
+ </Space>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ okText: '确认',
|
|
|
+ cancelText: '取消',
|
|
|
+ onOk: () => {
|
|
|
+ return requestPutDevice({
|
|
|
+ id: record.id,
|
|
|
+ device_code: record.type_code,
|
|
|
+ status: ApplyStatus.current,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ requestDustList(searchState);
|
|
|
+ message.success('操作成功');
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ message.error(error.message);
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ ApplyStatus.current = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onCancel() {
|
|
|
+ ApplyStatus.current = true;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ [Modal]
|
|
|
+ );
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @description 绑定摄像头
|
|
|
+ */
|
|
|
+ const handleBindChanle = useCallback(
|
|
|
+ (data) => {
|
|
|
+ requestBindChanle({
|
|
|
+ ...data,
|
|
|
+ device_id: modalState.values?.id,
|
|
|
+ device_code: modalState.values?.type_code,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ message.success('绑定摄像头成功');
|
|
|
+ requestDustList(searchState);
|
|
|
+ setModalState((preState) => ({
|
|
|
+ ...preState,
|
|
|
+ visible: false,
|
|
|
+ values: undefined,
|
|
|
+ }));
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ message.error(error.message);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ [modalState.values, message, requestDustList]
|
|
|
+ );
|
|
|
+ /**
|
|
|
+ * @description 解绑摄像头
|
|
|
+ */
|
|
|
+ const handleRevokeChanle = useCallback(
|
|
|
+ (record: DustRecordProps) => {
|
|
|
+ Modal.confirm({
|
|
|
+ title: '确认解绑摄像头',
|
|
|
+ okText: '确认',
|
|
|
+ cancelText: '取消',
|
|
|
+ okButtonProps: {
|
|
|
+ loading: revokeState.loading,
|
|
|
+ },
|
|
|
+ onOk: () => {
|
|
|
+ return requestRevoke({
|
|
|
+ device_id: record.id,
|
|
|
+ device_code: record.type_code,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ requestDustList(searchState);
|
|
|
+ message.success('解绑成功');
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ message.error(error.message);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ [requestDustList, message]
|
|
|
+ );
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <PageHeader title='塔吊设备'/>
|
|
|
+ <Table
|
|
|
+ rowKey={(record) => record.id}
|
|
|
+ columns={colums}
|
|
|
+ pagination={{
|
|
|
+ current: dustListState.current,
|
|
|
+ total: dustListState.total,
|
|
|
+ showQuickJumper: false,
|
|
|
+ showSizeChanger: false,
|
|
|
+ hideOnSinglePage: true,
|
|
|
+ onChange: (page) =>
|
|
|
+ changeSearchState((preState) => ({ ...preState, page })),
|
|
|
+ }}
|
|
|
+ loading={dustListState.loading}
|
|
|
+ dataSource={dustListState.dataSource}/>
|
|
|
+ <BindChanleModal
|
|
|
+ loading={bindState.loading}
|
|
|
+ visible={modalState.visible}
|
|
|
+ onCancle={() => {
|
|
|
+ setModalState((preState) => ({ ...preState, visible: false }));
|
|
|
+ }}
|
|
|
+ onOk={handleBindChanle}/>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+export default device;
|
