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';
import { useParams } from 'umi';
import DEV from '@/utils/env/dev';
import { countType } from '@/utils/sysType';

interface PageProps {
}

const PowerOnAuth: FC<PageProps> = ({ }) => {
  const urlParams = useParams();
  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": ""
  });
  const [isDeviceInit, setIsDeviceInit] = useState<boolean>(false);

  let sysInfo = localStorage.getItem(`${urlParams?.fileType}`);
  let info = sysInfo ? JSON.parse(sysInfo) : null;

  useEffect(() => {
    if (info?.deviceInit?.data && info?.deviceInit?.install) {
      setIsDeviceInit(true);
      college_table_query({}).then((res) => {
        if (res?.result == "success" && res?.data.length > 0) {
          if (!info?.powerOn) {
            setVisibility(true);
            localStorage.setItem(`${urlParams?.fileType}`, JSON.stringify({ ...info, powerOn: true }))
          }
          installSuccess()
          setDeviceInfo(res?.data[0]);
        } else {
          message.error(res?.errorMsg);
        }
      })
    }else {
      setVisibility(true);
    }
  }, [])

  const getName = () => {
    return urlParams?.fileType == 'offLine' ? '离线版' : '在线版'
  }

  // 在指定的目录下安装快捷方式
  const installSuccess = async () => {
    try {
      const response = await fetch('http://localhost:3000/createShortcut', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        mode: "cors",
        body: JSON.stringify({
          folderPath: `${DEV.FILE_URL}/${getName()}/${countType[urlParams?.fileType]}`,
          shortcutName: '重启服务',
          shortcutURL: `${DEV.LOCAL_URL}/restartService/${urlParams?.fileType}`
        }),
      });
    } catch (error) {
      message.error(error); // 处理请求错误
    }
  }

  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'>{deviceInfo.deviceStatus == '已开机' ? '无密钥' : '--'}</span></div>
            <div>第二区 <span className='ml50'>{deviceInfo.deviceStatus == '已开机' ? '无密钥' : '--'}</span></div>
          </div>
        </div>
        <div className={styles.flex}>
          <div className='mr50'>VPN间通信</div>
          <div>
            <div className='mb30'>第一区 <span className='ml50'>{deviceInfo.deviceStatus == '已开机' ? '无密钥' : '--'}</span></div>
            <div>第二区 <span className='ml50'>{deviceInfo.deviceStatus == '已开机' ? '无密钥' : '--'}</span></div>
          </div>
        </div>
        <div className={styles.flex}>
          <div className='mr50'>与专核设备</div>
          <div>
            <div className='mb30'>第一区 <span className='ml50'>{deviceInfo.deviceStatus == '已开机' ? '无密钥' : '--'}</span></div>
            <div>第二区 <span className='ml50'>{deviceInfo.deviceStatus == '已开机' ? '无密钥' : '--'}</span></div>
          </div>
        </div>
        <div className={styles.flex}>
          <div className='mr50'>与普密设备</div>
          <div>
            <div className='mb30'>第一区 <span className='ml50'>{deviceInfo.deviceStatus == '已开机' ? '无密钥' : '--'}</span></div>
            <div>第二区 <span className='ml50'>{deviceInfo.deviceStatus == '已开机' ? '无密钥' : '--'}</span></div>
          </div>
        </div>
      </div>


      {/* 开机认证 */}
      <Modal
        title="开机认证"
        open={visibility}
        centered
        width={380}
        onCancel={() => setVisibility(false)}
        footer={null}
        maskClosable={false}
      >
        <div style={{ fontSize: 16 }}>
          {isDeviceInit ? '开机认证成功!' :'开机认证失败，请先完成设备初装！'}
        </div>

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

export default PowerOnAuth