fe_service_ebtp_frontend/src/pages/ElecEvaluation/Device/index.tsx

import React, { useState, useRef, useEffect } from 'react';
import { Button, Spin, Tabs, Tree} from 'antd';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { deviceList, getplaceareaList, roomList } from './service';
import '@/assets/ld_style.less';
import { getURLInformation, isNotEmpty } from '@/utils/CommonUtils';
import ProCard from "@ant-design/pro-card";
import DeviceForm from './DeviceForm';


const deviceTypeEnum = {
  'resource_door': { text: '门禁点' },
  'resource_camera': { text: '监控点' },
  'resource_nvr': { text: 'nvr' },
  'resource_encodeDevice': { text: '编码设备' },
  'resource_oneMachine': { text: '门禁一体机' },

}
const deviceStatusEnum = {
  'online_0': { text: '离线' },
  'online_1': { text: '在线' },
  'online_9': { text: '无此设备' },
}
const Index: React.FC<{}> = () => {
  const checkRelationRef = useRef<ActionType>(); //操作数据后刷新列表
  const [treeData, setTreeData] = useState<any>();
  const [treeId, setTreeId] = useState<any>();
  const [updateVisible, setUpdateVisible] = useState<boolean>(false)
  const [type, setType] = useState<any>();// 状态 编辑or 查看
  const [deviceId, setDeviceId] = useState<any>("");//设备id
  const [spin, spinSet] = useState<boolean>(false);//加载遮罩
  const [updateChange, setUpdateChange] = useState<string>('')

  /*拉取数据*/
  useEffect(() => {
    getplaceareaList().then((res: { code: number; data: any[] | undefined; }) => {
      if (res.code == 200) {
        let data: any = [];
        if (res.data != undefined) {
          res.data.map((item: any, index: any) => {
            const title1 = item.placeName;
            const key1 = item.id;
            let children1: any = [];
            if (item.roomList != undefined) {
              const children = item.roomList.map((item: any, index: any) => {
                const title2 = item.areaName;
                const key2 = item.id;
              
                return { title: title2, key: key2}
              });
              children1 = children;
            }
            const first = { title: title1, key: key1, children: children1 }
            data.push(first);
          });
        }
        setTreeData(data);
      }
    })
  }, []);

  const toAdd = async (props?: any) => {
    spinSet(true);
    setUpdateChange('新增设备');
    setType("new");
    setUpdateVisible(true);

  }
  const toEdit = (dId: String) => {
    setUpdateChange('修改设备');
    console.log(dId)
    setDeviceId(dId)
    setType("edit");
    setUpdateVisible(true);
  }

  const toRead = (props: any) => {
    setUpdateChange('查看设备');
    setDeviceId(props.id)
    setType("read");
    setUpdateVisible(true);

  }
  /**
   *  设备管理
   * @param record
   */

  const current = getURLInformation('current');
  //列表页loading
  const [spinLoading, setSpinLoading] = useState<boolean>(false);

  const onSelect = (selectedKeys: any, info: any) => {
    selectedKeys.length == 0 ? setTreeId(null) : setTreeId(selectedKeys[0])

    console.log(selectedKeys)
  }
  const columns: any[] = [
    //设备管理

    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      search: false,
      width: '3%',
    },
    {
      title: '评标场所名称',
      dataIndex: 'placeName',
      width: '10%',
      search: false,
    },
    {
      title: '评标区域名称',
      dataIndex: 'areaName',
      width: '10%',
      search: false,
    },
    {
      title: '设备类型',
      dataIndex: 'deviceType',
      width: '10%',
      valueType: 'select',
      valueEnum: deviceTypeEnum,
      search: false,
    },
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      search: true,
      width: '10%',
    },
    {
      title: '设备标识',
      dataIndex: 'deviceCode',
      search: true,
      width: '10%',
    },

    {
      title: '网络IP',
      dataIndex: 'deviceManagementIp',
      search: true,
      width: '10%',
    },
    {
      title: '设备状态',
      dataIndex: 'deviceStatus',
      width: '10%',
      valueType: 'select',
      valueEnum: deviceStatusEnum,
      search: true,
    },

    // {
    //   title: '操作',
    //   width: '7%',
    //   search: false,
    //   render: (text: any, record: any) => {
    //     return (
    //       <>
    //         <Button type="text" onClick={() => {toEdit(record.id)}} danger>
    //           编辑
    //         </Button>
    //         <Button type="text" onClick={() => {}} danger>
    //           删除
    //         </Button>
    //       </>
    //     );
    //   },
    // },
  ];
  
  return (
    <div style={{ padding: '0px 24px' }}>
      <Spin spinning={spin}>
    <ProCard  split="vertical" bordered headerBordered>
        <ProCard colSpan="300px">
            {treeData == undefined ? null : (
              <Tree
                defaultExpandAll
                onSelect={onSelect}
                treeData={treeData}
              />
            )}
        </ProCard>

    
      <ProCard bodyStyle={{ width: "100%" }} >
        <ProTable
                actionRef={checkRelationRef}
                className="proSearch"
                columns={columns}
                params={{ treeId: treeId }}
                size="small"
                
                request={async (params) =>
                  await deviceList(params).then((res) => {
                    if (res.code == 200) {
                      let data = res.data;
                      return Promise.resolve({
                        data: data.records,
                        success: res.success,
                        total: res.data.total,
                        current: res.data.current,
                      });
                    }
                    return Promise.resolve({
                      data: [],
                      success: false,
                      total: 0,
                      current: 1,
                    });
                  })
                }
                search={{
                  filterType: 'query',
                  optionRender: (searchConfig: any, { form }) => {
                    return [
                      <Button
                        key="resetText"
                        onClick={() => {
                          form?.setFieldsValue({
                            current: 1,
                          });
                          form?.submit();
                        }}
                      >
                        {searchConfig?.resetText}
                      </Button>,
                      <Button
                        key="searchText"
                        type="primary"
                        onClick={() => {
                          form?.submit();
                        }}
                      >
                        {searchConfig?.searchText}
                      </Button>,
                    //    <Button key="toCreate" onClick={() => toAdd()}>
                    //    新建
                    //  </Button>,
                    ];
                  },
                }}
                pagination={{
                  defaultCurrent: isNotEmpty(current) ? Number(current) : 1,
                  defaultPageSize: 10,
                  showSizeChanger: false,
                }} //默认显示条数
                toolBarRender={false}
              />
      </ProCard>
    </ProCard>
    {/* {updateVisible ? (
              <DeviceForm key={Math.random()} titleName={updateChange}
          type={type} deviceId={deviceId} status={'2'} onCancel={() => setUpdateVisible(false)}
          modalVisible={updateVisible} tpId={''} />
            ) : null} */}
    </Spin>
    </div>
            
  );
};
export default Index