更新

src/components/ButtonComp/index.tsx

@@ -1,76 +1,65 @@
-import { FC, useEffect, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import styles from './index.less';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Spin } from 'antd';
 
 interface PageProps {
   type?: string; // 按钮类型
   text?: string; // 按钮文字
   disabled?: boolean; // 按钮禁用
   style?: any; //样式
+  loading?: boolean; // 加载中
   onClick?: () => void;
 }
 
+// 按钮类型有以下几种：confirm（确认）, cancel（取消）, delete(删除), special(特殊) 
 const ButtonComp: FC<PageProps> = ({
   type = 'confirm',
   text = '确定',
   disabled = false,
-  onClick = () => { },
-  style = {}
+  style = {},
+  loading = false,
+  onClick = () => {},
 }) => {
-  let timerId: any;
+  const [isLoading, setIsLoading] = useState(loading);
+
+  useEffect(() => {
+    setIsLoading(loading);
+  }, [loading]);
 
   const click = () => {
-    clearTimeout(timerId);
-    timerId = setTimeout(() => {
-      onClick()
+    if (disabled || isLoading) return;
+
+    const timerId = setTimeout(() => {
+      onClick();
     }, 300);
-  }
+
+    return () => clearTimeout(timerId);
+  };
+
+  const buttonStyle = {
+    opacity: isLoading ? 0.8 : 1,
+    ...style,
+  };
 
   return (
     <div style={{ display: 'flex' }}>
-      {/* 确定 */}
-      {type == 'confirm' &&
-        <div
-          style={style}
-          className={`${styles.btn} ${styles.confirm_btn} ${disabled ? styles.disabled : ''}`}
-          onClick={() => {
-            if (disabled) return;
-            click()
-          }}>
-          {text}
-        </div>}
-      {/* 取消 */}
-      {type == 'cancel' &&
-        <div style={style}
-          className={`${styles.btn} ${styles.cancel_btn} ${disabled ? styles.disabled : ''}`}
-          onClick={() => {
-            if (disabled) return;
-            click()
-          }}>
-          {text}
-        </div>}
-      {/* 删除 */}
-      {type == 'delete' &&
-        <div
-          style={style}
-          className={`${styles.btn} ${styles.delete_btn} ${disabled ? styles.disabled : ''}`}
-          onClick={() => {
-            if (disabled) return;
-            click()
-          }}>
-          {text}
-        </div>}
-      {/* 定制按钮 */}
-      {type == 'special' &&
-        <div style={style}
-          className={`${styles.btn} ${styles.special_btn} ${disabled ? styles.disabled : ''}`}
-          onClick={() => {
-            if (disabled) return;
-            click()
-          }}>
-          {text}
-        </div>}
+      <div
+        style={buttonStyle}
+        className={`${styles.btn} ${styles[type + '_btn']} ${disabled ? styles.disabled : ''}`}
+        onClick={click}
+      >
+        {isLoading ? (
+          <>
+            <Spin size="small" style={{ color: '#fff', marginRight: 10 }} indicator={<LoadingOutlined spin />} />
+            <span>{`${text}中`}</span>
+          </>
+        ) : (
+          text
+        )}
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default ButtonComp
+export default ButtonComp;

src/pages/MY/KeyManage/RelationConfig/index.tsx

@@ -46,7 +46,7 @@ export default function Page() {
 
       <div className='flex_jB'>
         {/* 左侧 */}
-        <div style={{ width: '45%' }}>
+        <div style={{ width: '43%' }}>
           <div className='mb20' style={{ color: '#0087DA' }}>目标设备信息列表</div>
           <Table
             scroll={tableData.length > 0 ? { y: 41 * 10 } : {}}
@@ -68,7 +68,7 @@ export default function Page() {
           </div>
         </div>
         {/* 底部 */}
-        <div style={{ width: '45%' }}>
+        <div style={{ width: '43%' }}>
           <div className='mb20' style={{ color: '#0087DA' }}>已经配置的设备信息</div>
           <Table
             scroll={tableData1.length > 0 ? { y: 41 * 10 } : {}}

src/pages/Register/RegisterManage/DevicePhotoMainten/index.tsx

@@ -15,7 +15,7 @@ export default function Page() {
   const [pageSize, setpageSize] = useState(10);
   const [total, setTotal] = useState(0);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-  const [imageUrl, setImageUrl] = useState(null);
+  const [imageUrl, setImageUrl] = useState('');
 
   const columns: any = [
     { title: '设备型号', dataIndex: 'name', key: 'name', align: 'center' },
@@ -66,6 +66,8 @@ export default function Page() {
       if (info.file.status === 'done') {
         // 上传完成后，从响应数据中获取图片 URL
         const imageUrl = info.file.response.url;
+        console.log("imageUrl",info);
+        
         setImageUrl(imageUrl);
 
         //   const formData = new FormData();
@@ -130,7 +132,7 @@ export default function Page() {
           <div className={styles1.info}>提示：请选择设备型号，然后选择该型号的照片，照片大小不要超过64KB，建议尺寸为128×128像素。</div>
           <div className={styles1.picture}>
             <ButtonComp style={{ position: 'absolute', left: '-1px', top: '-8px' }} type={'special'} text={'照片'} />
-            <img src={imageUrl || ''}/>
+            <img src={imageUrl}/>
           </div>
           <div className='flex_jE mt20 mb20'>
             <Upload {...props} showUploadList={false}>

src/pages/Register/RegisterManage/DeviceRegister/AdminsTab/index.tsx

@@ -73,6 +73,9 @@ export default function Page() {
       content,
       ...values
     }
+    if (layer == 2) {
+      params.isolatorIntranetIp = '199.66.33.33'
+    }
     console.log("params", params);
 
     managerSystemEditOrAdd(params).then((res) => {

src/pages/Register/RegisterManage/DeviceSearch/index.tsx

@@ -1,30 +1,69 @@
 import TabsComp from '@/components/TabsComp';
 import styles from '../../../GLQ/index.less';
-import { useState } from 'react';
-import { Checkbox, ConfigProvider, DatePicker, Input, Select, Table } from 'antd';
+import { useEffect, useState } from 'react';
+import { Checkbox, ConfigProvider, DatePicker, Input, Pagination, Select, Table, message } from 'antd';
 
 import { rowClassName } from '@/utils';
 import ButtonComp from '@/components/ButtonComp';
 import ContentWarp from '@/components/ContentWarp';
+import moment from 'moment';
+import { deviceHardDeviceHardSelect } from '@/services/register';
 
 export default function Page() {
   const [activeTab, setActiveTab] = useState(1)
   const [tableData, setTableData] = useState([]);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [pageSize, setpageSize] = useState(10);
+  const [total, setTotal] = useState(0);
+  const [params, setParams] = useState<any>(null);
+
+  let mr30 = { marginRight: 30 }
+
+  useEffect(() => {
+    initParams()
+  }, [])
+
+  const initParams = () => {
+    setParams({
+      unitName: '',
+      deviceName: '',
+      deviceEntityId: '',
+      diskNumber: '',
+      telephone: '',
+      ip: '',
+      deviceType: '',
+      homeNetwork: '',
+      connFlag: '',
+      startDate: '',
+      endDate: '',
+    })
+  }
 
   const columns: any = [
-    { title: '单位名称', dataIndex: 'name', key: 'name', align: 'center' },
-    { title: '设备名称', dataIndex: 'name', key: 'name', align: 'center' },
-    { title: '实体标识', dataIndex: 'name', key: 'name', align: 'center' },
-    { title: '设备型号', dataIndex: 'name', key: 'name', align: 'center' },
-    { title: '网络', dataIndex: 'name', key: 'name', align: 'center' },
-    { title: '管理盘号', dataIndex: 'name', key: 'name', align: 'center' },
-    { title: '电话号码', dataIndex: 'name', key: 'name', align: 'center' },
+    { title: '单位名称', dataIndex: 'unitName', key: 'unitName', align: 'center' },
+    { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName', align: 'center' },
+    { title: '实体标识', dataIndex: 'deviceEntityId', key: 'deviceEntityId', align: 'center' },
+    { title: '设备型号', dataIndex: 'deviceType', key: 'deviceType', align: 'center' },
+    { title: '所属网络', dataIndex: 'homeNetwork', key: 'homeNetwork', align: 'center' },
+    { title: '管理盘号', dataIndex: 'diskNumber', key: 'diskNumber', align: 'center' },
+    { title: '电话号码', dataIndex: 'telephone', key: 'telephone', align: 'center' },
     { title: '接入日志', dataIndex: 'name', key: 'name', align: 'center' },
-    { title: 'IP地址', dataIndex: 'name', key: 'name', align: 'center' },
-    { title: '注册日期', dataIndex: 'name', key: 'name', align: 'center' }
+    { title: 'IP地址', dataIndex: 'ip', key: 'ip', align: 'center' },
+    { title: '注册日期', dataIndex: 'createTime', key: 'createTime', align: 'center' }
   ]
 
-  let mr30 = { marginRight: 30 }
+  useEffect(() => { getList() }, [pageNumber]);
+
+  const getList = () => {
+    deviceHardDeviceHardSelect({ pageNumber, pageSize, ...params }).then((res) => {
+      if (res?.result == "success") {
+        setTotal(res.data[0].total);
+        setTableData(res.data[0].list);
+      } else {
+        message.error(res?.errorMsg);
+      }
+    })
+  }
 
   return (
     <div className={`${styles.params_warp}`}>
@@ -41,16 +80,16 @@ export default function Page() {
           <div className='flex_aiC_jB' style={{ marginBottom: 70 }}>
             <div style={{ width: '45%' }}>
               <div className='mb10'>单位名称</div>
-              <Input placeholder="请输入单位名称" style={mr30} />
+              <Input value={params?.unitName} onChange={(e) => { setParams({ ...params, unitName: e.target.value }) }} placeholder="请输入单位名称" style={mr30} />
             </div>
             <div style={{ width: '45%' }}>
               <div className='mb10'>设备名称</div>
-              <Input placeholder="请输入设备名称" style={mr30} />
+              <Input value={params?.deviceName} onChange={(e) => { setParams({ ...params, deviceName: e.target.value }) }} placeholder="请输入设备名称" style={mr30} />
             </div>
           </div>
           <div>
             <div className='mt20 mb10'>实体标识</div>
-            <Input placeholder="请输入实体标识" style={mr30} />
+            <Input value={params?.deviceEntityId} onChange={(e) => { setParams({ ...params, deviceEntityId: e.target.value }) }} placeholder="请输入实体标识" style={mr30} />
           </div>
           <div className='mt10' style={{ color: '#666666' }}>提示：若输入项为空，则查找时忽略该条件。</div>
         </div>
@@ -59,19 +98,50 @@ export default function Page() {
         <div className='flex_aiC_jB' style={{ width: '30%' }}>
           <div style={{ width: '45%' }}>
             <div className='mb10'>管理盘号</div>
-            <Input placeholder="请输入管理盘号" style={mr30} />
+            <Input placeholder="请输入管理盘号" value={params?.diskNumber} onChange={(e) => { setParams({ ...params, diskNumber: e.target.value }) }} style={mr30} />
             <div className='mb10 mt20'>电话号码</div>
-            <Input placeholder="请输入电话号码" style={mr30} />
+            <Input placeholder="请输入电话号码" value={params?.telephone} onChange={(e) => { setParams({ ...params, telephone: e.target.value }) }} style={mr30} />
             <div className='mb10 mt20'>IP地址</div>
-            <Input placeholder="请输入IP地址" style={mr30} />
+            <Input placeholder="请输入IP地址" value={params?.ip} onChange={(e) => { setParams({ ...params, ip: e.target.value }) }} style={mr30} />
           </div>
           <div style={{ width: '45%' }}>
             <div className='mb10'>设备型号</div>
-            <Select style={{ width: '100%' }} placeholder="请选择设备型号" onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+            <Select
+              style={{ width: '100%' }}
+              placeholder="请选择设备型号"
+              value={params?.deviceType}
+              onChange={(e) => { setParams({ ...params, deviceType: e }) }}
+              options={[
+                { label: '全部', value: '' },
+                { label: '设备型号1', value: '设备型号1' },
+                { label: '设备型号2', value: '设备型号2' },
+                { label: '设备型号3', value: '设备型号3' },
+              ]} />
+
             <div className='mb10 mt20'>所属网络</div>
-            <Select style={{ width: '100%' }} placeholder="请选择所属网络" onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+            <Select
+              style={{ width: '100%' }}
+              placeholder="请选择所属网络"
+              value={params?.homeNetwork}
+              onChange={(e) => { setParams({ ...params, homeNetwork: e }) }}
+              options={[
+                { label: '全部', value: '' },
+                { label: '指挥专网', value: '指挥专网' },
+                { label: '军事综合信息网', value: '军事综合信息网' },
+                { label: '资源管理网', value: '资源管理网' }
+              ]} />
+
             <div className='mb10 mt20'>接入标志</div>
-            <Select style={{ width: '100%' }} placeholder="请选择接入标志" onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
+            <Select
+              style={{ width: '100%' }}
+              placeholder="请选择接入标志"
+              value={params?.connFlag}
+              onChange={(e) => { setParams({ ...params, connFlag: e }) }}
+              options={[
+                { label: '全部', value: '' },
+                { label: '接入', value: 1 },
+                { label: '未接入', value: 2 }
+              ]} />
           </div>
         </div>
 
@@ -83,18 +153,32 @@ export default function Page() {
           >
             <div className='flex_aiC' style={{ marginBottom: 30 }}>
               <div className='mr16'>从</div>
-              <DatePicker style={{ width: '70%' }} onChange={(e) => { }} />
+              <DatePicker
+                style={{ width: '70%' }}
+                format="YYYY-MM-DD"
+                value={params?.startDate ? moment(params?.startDate) : ''}
+                onChange={(a, b) => {
+                  setParams({ ...params, startDate: b })
+                }} />
             </div>
             <div className='flex_aiC' style={{ marginBottom: 30 }}>
               <div className='mr16'>到</div>
-              <DatePicker style={{ width: '70%' }} onChange={(e) => { }} />
+              <DatePicker
+                style={{ width: '70%' }}
+                format="YYYY-MM-DD"
+                value={params?.endDate ? moment(params?.endDate) : ''}
+                onChange={(a, b) => {
+                  setParams({ ...params, endDate: b })
+                }} />
             </div>
           </ContentWarp>
         </div>
       </div>
 
       <div className='flex_jE mt20 mb20'>
-        <ButtonComp text={'查询'} onClick={() => { }} />
+        <ButtonComp text={'查询'} onClick={() => {
+          pageNumber == 1 ? getList() : setPageNumber(1);
+        }} />
       </div>
 
       <ButtonComp type={'special'} text={'查找结果'} onClick={() => { }} />
@@ -107,6 +191,23 @@ export default function Page() {
         rowKey={(record: any) => record?.id}
         rowClassName={rowClassName}
       />
+
+      {total > 0 && <div className='flex_aiC_jB mt20'>
+        <div>共 {total} 条</div>
+        <Pagination
+          current={pageNumber}
+          pageSize={pageSize}
+          total={total}
+          showQuickJumper
+          onChange={(val) => {
+            setPageNumber(val);
+          }}
+          onShowSizeChange={(val) => {
+            setpageSize(val);
+            getList();
+          }}
+        />
+      </div>}
     </div>
   );
 }

src/pages/SF/ConfigManage/ParamSingleInstallConfig/index.tsx

@@ -5,7 +5,8 @@ import { ConfigProvider, Pagination, Select, Table, message } from 'antd';
 
 import { rowClassName } from '@/utils';
 import { useEffect, useState } from 'react';
-import { algorithmArgsConfigList, upholdArgsInfoList } from '@/services/sf';
+import { algorithmArgsConfigEditOrAdd, algorithmArgsConfigList, upholdArgsInfoList } from '@/services/sf';
+import { deviceHardPage } from '@/services/register';
 
 export default function Page() {
   const [tableData, setTableData] = useState([]);
@@ -25,7 +26,7 @@ export default function Page() {
   const [pageSize2, setpageSize2] = useState(10);
   const [total2, setTotal2] = useState(0);
 
-  const [paramsList, setParamsList] = useState<any>([{label: '全部', value: ''}]);
+  const [paramsList, setParamsList] = useState<any>([{ label: '全部', value: '' }]);
   const [paramsId, setParamsId] = useState('');
 
   useEffect(() => { getList(); setSelectedRowKeys([]) }, [pageNumber]);
@@ -43,7 +44,7 @@ export default function Page() {
     {
       title: '序号', key: 'index', align: 'center', width: 80,
       render: (a: any, b: any, c: any) => {
-        return <span>{(pageNumber  - 1) * pageSize + c + 1}</span>;
+        return <span>{(pageNumber - 1) * pageSize + c + 1}</span>;
       },
     },
     { title: '参数中文名称', dataIndex: 'argsCnName', key: 'argsCnName', align: 'center' },
@@ -53,10 +54,15 @@ export default function Page() {
   ]
 
   const columns1: any = [
-    serial,
-    { title: '设备名称', dataIndex: 'name', key: 'name', align: 'center' },
-    { title: '管理实体标识', dataIndex: 'name', key: 'name', align: 'center' },
-    { title: '设备型号', dataIndex: 'name', key: 'name', align: 'center' },
+    {
+      title: '序号', key: 'index', align: 'center', width: 80,
+      render: (a: any, b: any, c: any) => {
+        return <span>{(pageNumber1 - 1) * pageSize1 + c + 1}</span>;
+      },
+    },
+    { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName', align: 'center' },
+    { title: '管理实体标识', dataIndex: 'deviceEntityId', key: 'deviceEntityId', align: 'center' },
+    { title: '设备型号', dataIndex: 'deviceType', key: 'deviceType', align: 'center' },
     { title: '协同管理标志', dataIndex: 'name', key: 'name', align: 'center' }
   ]
 
@@ -73,7 +79,7 @@ export default function Page() {
   ]
 
   const getList = () => {
-    upholdArgsInfoList({ pageNumber, pageSize}).then((res) => {
+    upholdArgsInfoList({ pageNumber, pageSize }).then((res) => {
       if (res?.result == "success") {
         setTotal(res.data[0].total);
         setTableData(res.data[0].list);
@@ -83,8 +89,60 @@ export default function Page() {
     })
   }
 
-  const getList1 = () => { }
-  const getList2 = () => { }
+  // 获取注册设备列表
+  const getList1 = () => {
+    deviceHardPage({ pageNumber: pageNumber1, pageSize: pageSize1 }).then((res) => {
+      if (res?.result == "success") {
+        setTotal1(res.data[0].total)
+        setTableData1(res.data[0].list)
+      } else {
+        message.error(res?.errorMsg);
+      }
+    })
+  }
+  // 获取安装配置成功记录列表
+  const getList2 = () => {
+    algorithmArgsConfigList({ pageNumber: pageNumber2, pageSize: pageSize2 }).then((res) => {
+      if (res?.result == "success") {
+        setTotal2(res.data[0].total)
+        setTableData2(res.data[0].list)
+      } else {
+        message.error(res?.errorMsg);
+      }
+    })
+  }
+
+  // 确认提交
+  const submit = () => {
+    if (selectedRowKeys.length == 0 && selectedRowKeys1.length == 0) {
+      message.info("请选择算法与设备后再提交！");
+      return
+    }
+    let algorithm: any = tableData.filter((val: any) => val?.id == selectedRowKeys);
+    let device: any = tableData1.filter((val: any) => val?.id == selectedRowKeys1);
+
+    let params = {
+      argsId: algorithm[0]?.id,
+      deviceId: device[0]?.id,
+      argsCnName: algorithm[0]?.argsCnName,
+      algorithmId: algorithm[0]?.algorithmId,
+      argsShortName: algorithm[0]?.argsShortName,
+      modelShortName: algorithm[0]?.modelShortName,
+      deviceName: device[0]?.deviceName,
+      deviceEntityId: device[0]?.deviceEntityId,
+      deviceType: device[0]?.deviceType,
+    }
+    algorithmArgsConfigEditOrAdd(params).then((res) => {
+      if (res?.result == "success") {
+        message.success("新增算法参数配置成功");
+        pageNumber2 == 1 ? getList2() : setPageNumber2(1);
+        setSelectedRowKeys([])
+        setSelectedRowKeys1([])
+      } else {
+        message.error(res?.errorMsg);
+      }
+    })
+  }
 
   return (
     <div className={styles.params_warp}>
@@ -108,6 +166,7 @@ export default function Page() {
               rowKey={(record: any) => record?.id}
               rowClassName={rowClassName}
               rowSelection={{
+                type: 'radio',
                 selectedRowKeys,
                 onChange: (selectedKeys: any) => {
                   setSelectedRowKeys(selectedKeys);
@@ -134,7 +193,7 @@ export default function Page() {
           </ContentWarp>
         </div>
         <div style={{ width: '60%' }}>
-          <ContentWarp text={'选择设备'} style={{ padding: '40px 20px 20px 20px', minHeight: '290px' }}>
+          <ContentWarp text={'选择设备'} style={{ padding: '40px 20px 20px 20px', minHeight: '280px' }}>
             <div className='flex_jE mb20'>
               <ButtonComp text={'查询'} onClick={() => { }} />
             </div>
@@ -147,6 +206,13 @@ export default function Page() {
               dataSource={tableData1}
               rowKey={(record: any) => record?.id}
               rowClassName={rowClassName}
+              rowSelection={{
+                type: 'radio',
+                selectedRowKeys: selectedRowKeys1,
+                onChange: (key: any, row: any) => {
+                  setSelectedRowKeys1(key);
+                }
+              }}
             />
             {total1 > 0 && <div className='flex_aiC_jB mt20'>
               <div>共 {total1} 条</div>
@@ -155,15 +221,13 @@ export default function Page() {
                 pageSize={pageSize1}
                 total={total1}
                 showQuickJumper
-                onChange={() => {
-
-                }}
-                onShowSizeChange={() => {
-
+                onChange={(val) => setPageNumber1(val)}
+                onShowSizeChange={(val) => {
+                  setpageSize1(val);
+                  getList1();
                 }}
               />
             </div>}
-
           </ContentWarp>
           <ContentWarp text={'安装配置成功记录'} style={{ padding: '48px 20px 20px 20px', marginTop: 28, minHeight: '240px' }}>
             <Table
@@ -195,7 +259,7 @@ export default function Page() {
         </div>
       </div>
       <div className='flex_jE mt20'>
-        <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={() => { }} />
+        <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={() => submit()} />
         <ButtonComp type={'cancel'} text={'载体输出'} onClick={() => { }} />
       </div>
     </div>

src/pages/SF/ConfigManage/SFSingleInstallConfig/index.tsx

@@ -115,7 +115,7 @@ export default function Page() {
     let device: any = tableData1.filter((val: any) => val?.id == selectedRowKeys1);
 
     let params = {
-      algorithmId: algorithm[0]?.id,
+      argsId: algorithm[0]?.id,
       deviceId: device[0]?.id,
       algorithmModelShortName: algorithm[0]?.algorithmModelShortName,
       algorithmName: algorithm[0]?.algorithmName,

src/pages/index.tsx

@@ -1,7 +1,20 @@
+import { useEffect, useState } from 'react';
 import styles from './index.less';
-import {history} from 'umi'
+import { history } from 'umi'
+import { Button, ConfigProvider, Form, Input, Modal, Radio } from 'antd';
+import ButtonComp from '@/components/ButtonComp';
+import theme from '@/styles/antd.theme';
+import { getPlugCordResult } from '@/services/api';
+import { validateNumber } from '@/utils/validate';
 
+// 首页
 export default function IndexPage() {
+  // 是否认证通过
+  const [isAuth, setIsAuth] = useState(false);
+  const [visibility, setVisibility] = useState<boolean>(false);
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
   const list = [
     { name: '01MMD049安装.exe', img: '', url: '/installExe' },
     { name: '初装系统', img: '', url: '/initialSystem' },
@@ -9,26 +22,88 @@ export default function IndexPage() {
     { name: '需要导出的文件', img: '', url: null },
     { name: '生成导出的文件', img: '', url: null },
   ]
-  return (
-    <div className={styles.index_con}>
-      {
-        list.map((item, index) => {
-          return (
-            <div className={styles.item_warp} key={index} onClick={()=> {
-              if (item.url) {
-                history.push(item.url) 
-              }else if (item.name == '需要导出的文件') {
-                
-              } else if (item.name == '生成导出的文件'){
-                
-              }
-            }}>
-              <div className={styles.img}></div>
-              <div>{item.name}</div>
-            </div>
-          )
-        })
+
+  useEffect(() => {
+    let is_auth: any = localStorage.getItem('is_auth');
+    if (is_auth) {
+      setIsAuth(true)
+    } else {
+      initForm();
+      setVisibility(true);
+    }
+  }, [])
+
+
+  const initForm = () => {
+    form.setFieldsValue({
+      sysType: 49,
+      workbenchNumber: ''
+    })
+  }
+
+  const onFinish = async (data: any) => {
+    setLoading(true)
+    await getPlugCordResult(data).then(res => {
+      if (res?.result == 'success') {
+        setIsAuth(true)
+        localStorage.setItem('is_auth', JSON.stringify(true));
       }
-    </div>
+    })
+    setLoading(false)
+  };
+
+  return (
+    <ConfigProvider theme={theme}>
+      <div className={styles.index_con}>
+        {
+          isAuth ?
+            list.map((item, index) => {
+              return (
+                <div className={styles.item_warp} key={index} onClick={() => {
+                  if (item.url) {
+                    history.push(item.url)
+                  } else if (item.name == '需要导出的文件') {
+
+                  } else if (item.name == '生成导出的文件') {
+
+                  }
+                }}>
+                  <div className={styles.img}></div>
+                  <div>{item.name}</div>
+                </div>
+              )
+            }) :
+            <Modal
+              title={'系统连接检测'}
+              open={visibility}
+              centered
+              width={500}
+              closeIcon={false}
+              footer={null}
+              maskClosable={false}
+            >
+              <Form form={form} layout={'inline'} onFinish={onFinish}>
+                <Form.Item name="sysType" label="系统类型" style={{ marginBottom: 15 }} rules={[
+                  { required: true, message: '请选择系统类型' }
+                ]}>
+                  <Radio.Group style={{}}>
+                    <Radio value={49} style={{ margin: "0 20px 0 5px" }}> 49 </Radio>
+                    <Radio value={52}> 52 </Radio>
+                  </Radio.Group>
+                </Form.Item>
+                <Form.Item name="workbenchNumber" label="系统编号" rules={[
+                  { required: true, message: '请输入系统编号' },
+                  { validator: validateNumber }
+                ]}>
+                  <Input style={{ width: 260, marginLeft: 5 }} placeholder="请输入系统编号" />
+                </Form.Item>
+              </Form>
+              <div className='flex_jE mt20'>
+                <ButtonComp text={'连接检测'} loading={loading} onClick={() => form.submit()} />
+              </div>
+            </Modal>
+        }
+      </div>
+    </ConfigProvider>
   );
 }

src/services/api.ts

@@ -1,5 +1,10 @@
 import { getRequest, postRequest, uploadFile } from '@/utils/request';
 
+// 硬件连接性检测
+export async function getPlugCordResult(data: any) {
+  return postRequest(`/xgd/pcd/getPlugCordResult`, data);
+}
+
 // --------------------------初装系统---------------------------
 // 设备初装
 export async function deviceInit_init(formData: any) {

src/styles/antd.less

@@ -48,4 +48,24 @@
 
 .ant-modal-body {
   padding: 20px;
+}
+
+// 按钮样式
+.ant-btn-primary {
+  background: linear-gradient(180deg, #87CDEE 0%, #69C0E9 34%, #7ECDF2 51%, #56B9E6 63%, #81D7FE 100%);
+  box-shadow: 0px 1px 4px 0px rgba(81, 84, 90, 0.5);
+  border: 1px solid rgba(76, 106, 118, 0.22);
+}
+
+.ant-btn-default {
+  background: linear-gradient(180deg, #E3F6FF 0%, #F3FBFF 37%, #FFFFFF 51%, #EBF9FF 60%, #FFFFFF 100%);
+  box-shadow: 0px 1px 4px 0px rgba(81, 84, 90, 0.5);
+  border-radius: 4px;
+  border: 1px solid rgba(171, 207, 223, 0.22);
+  color: #65686E;
+}
+
+.ant-btn {
+  height: 34px;
+  padding: 0px 20px;
 }

src/utils/validate.ts

@@ -22,4 +22,12 @@ export const subnetMaskValidator = (_: any, value: any) => {
     return Promise.reject(new Error('请输入有效的子网掩码'));
   }
   return Promise.resolve();
-};
+};
+
+// 校验输入内容为整数
+export const validateNumber = (_: any, value: any) => {
+  if (value && !Number.isInteger(Number(value))) {
+    return Promise.reject(new Error('输入内容只能为数字'));
+  }
+  return Promise.resolve();
+};