xgd_system/src/pages/InitialSystem/PowerOnAuth/index.tsx

import { FC, useEffect, useState } from 'react';
import styles from './index.less';
import { Modal, message } from 'antd';
import ButtonComp from '@/components/ButtonComp';
import { college_table_query } from '@/services/api';

interface PageProps {
}

const PowerOnAuth: FC<PageProps> = ({ }) => {
  const [visibility, setVisibility] = useState<boolean>(false);
  const [deviceInfo, setDeviceInfo] = useState<any>({
    "createTime": "",
    "updateTime": "",
    "secret": "",
    "algorithm": "",
    "selfInspectionCode": "",
    "deviceName": "",
    "initNumber": "",
    "versionNumber": "",
    "localNum": "",
    "firmwareVersion": "",
    "deviceStatus": "",
    "fileName": null,
    "dataInstalled": ""
  });

  useEffect(() => {
    college_table_query({}).then((res) => {
      if (res?.result == "success" && res?.data.length > 0) {
        let layoutInfo: any = localStorage.getItem('powerOn');
        if (!JSON.parse(layoutInfo)) {
          setVisibility(true);
          localStorage.setItem('powerOn', JSON.stringify({ powerOn: true }));
        }
        setDeviceInfo(res?.data[0]);
      } else {
        message.error(res?.errorMsg);
      }
    })
  }, [])

  return (
    <div className={styles.con_warp}>
      <div style={{ padding: 30 }}>
        <div className={styles.title1}>设备状态</div>
        <div className='mt30 mb30'>本机编号：{deviceInfo.deviceName || '--'}</div>
        <div className='mt30 mb30' style={{ display: 'flex' }}>
          <div style={{ marginRight: 150 }}>开机状态：{deviceInfo.deviceStatus || '--'}</div>
          <div>初装盘号：{deviceInfo.initNumber || '--'}</div>
        </div>
        <div style={{ display: 'flex', marginBottom: 40 }}>
          <div style={{ marginRight: 150 }}>固件版本：{deviceInfo.firmwareVersion || '--'}</div>
          <div>初装时间：{deviceInfo.createTime || '--'}</div>
        </div>

        <div className={styles.title1}>密钥状态</div>
        <div className={styles.flex}>
          <div className='mr50'>系统间通信</div>
          <div>
            <div className='mb30'>第一区 <span className='ml50'>{'无密钥'}</span></div>
            <div>第二区 <span className='ml50'>{'无密钥'}</span></div>
          </div>
        </div>
        <div className={styles.flex}>
          <div className='mr50'>VPN间通信</div>
          <div>
            <div className='mb30'>第一区 <span className='ml50'>{'无密钥'}</span></div>
            <div>第二区 <span className='ml50'>{'无密钥'}</span></div>
          </div>
        </div>
        <div className={styles.flex}>
          <div className='mr50'>与专核设备</div>
          <div>
            <div className='mb30'>第一区 <span className='ml50'>{'无密钥'}</span></div>
            <div>第二区 <span className='ml50'>{'无密钥'}</span></div>
          </div>
        </div>
        <div className={styles.flex}>
          <div className='mr50'>与普密设备</div>
          <div>
            <div className='mb30'>第一区 <span className='ml50'>{'无密钥'}</span></div>
            <div>第二区 <span className='ml50'>{'无密钥'}</span></div>
          </div>
        </div>
      </div>


      {/* 开机认证 */}
      <Modal
        title="开机认证"
        open={visibility}
        centered
        width={380}
        onCancel={() => setVisibility(false)}
        footer={null}
        maskClosable={false}
      >
        <div style={{ fontSize: 16 }}>
          开机认证成功!
        </div>

        <div className='flex_jE mt20'>
          <ButtonComp text={'确定'} onClick={() => setVisibility(false)} />
        </div>
      </Modal>
    </div>
  )
}

export default PowerOnAuth